1import { css } from '@emotion/react';
2import { spacing } from '@expo/styleguide-base';
3import type { PropsWithChildren } from 'react';
4
5import { CALLOUT } from '../Text';
6
7type SidebarTitleProps = PropsWithChildren;
8
9export const SidebarTitle = ({ children }: SidebarTitleProps) => (
10  <div css={STYLES_TITLE}>
11    <CALLOUT weight="medium">{children}</CALLOUT>
12  </div>
13);
14
15const STYLES_TITLE = css({
16  display: 'block',
17  position: 'relative',
18  marginLeft: spacing[3],
19  marginRight: -spacing[4],
20  paddingBottom: spacing[1],
21  userSelect: 'none',
22});
23