How to use the baseui.styled function in baseui

import { PaymentCard, StatefulPaymentCard } from 'baseui/payment-card';
import { PhoneInput, StatefulPhoneInput, COUNTRIES } from 'baseui/phone-input';

// Base API
const newTheme = createTheme({...lightThemePrimitives}, {}); // $ExpectType Theme
createTheme({primary: 'red'}, {}); // $ExpectError

mergeOverrides({style: {}}, {props: {}});
mergeOverrides({style: {}}, 'hello'); // $ExpectError
mergeOverrides({style: {}}, {name: 'override'}); // $ExpectError

styled(StyledProgressSteps, { marginTop: '10px' });
styled(StyledProgressSteps, { marginTop: null }); // $ExpectError
styled(StyledProgressSteps, ({ $theme }) => ({ marginTop: '10px' }));
const StyledAnchor = styled('a', { marginTop: '10px' });
const NewStyledProgressSteps = styled(
    StyledProgressSteps,
    ({ $theme, $disabled }) => ({ marginTop: '10px' })
);

;
; // $ExpectError
;

; // $ExpectError

// Accordion

    Content
;

overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  width: '150px'
}));

// search

export const SearchContainer = styled('div', ({$theme, ...props}) => ({
  position: 'relative',
  height: $theme.sizing.scale1000,
  marginBottom: '20px',
  background: $theme.colors.mono200
}));

export const IconContainer = styled('div', ({$theme, ...props}) => ({
  position: 'absolute',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: $theme.sizing.scale1000,
  height: $theme.sizing.scale1000
}));

export const InputSearch = styled('input', ({$theme, ...props}) => ({
  boxShadow: `rgba(0, 0, 0, 0) 0px 2px 6px`,
  border: `1px solid transparent`,
  transition: `0.3s`,
  fontSize: `14px`,
  fontWeight: 500,
  lineHeight: `20px`,
  padding: `10px 10px 10px 40px`,

// document is long, the TOC will be not visible (above the viewport).
    // to address that, when the TOC is open, we are removing the document from the flow, so
    // that the TOC will be visible. Now, there are several ways to do that, some of which
    // introduce another problem - when closing the table of contents, we want the user to be
    // back exactly where they were before they opened it, as opposed to back on the top.
    // that's one way to approach this -
  })
);

export const Body = styled('div', ({$theme, ...props}) => ({
  height: '100vh'
}));

// example

export const MainExample = styled('main', ({$theme, ...props}) => ({
  height: 'calc(100vh - 96px)',
  [`@media screen and (max-width: ${$theme.breakpoints.medium})`]: {
    marginTop: '64px'
  }
}));

// examples

export const MainExamples = styled('main', ({$theme, ...props}) => ({
  background: $theme.colors.mono100,
  display: 'flex',
  flexWrap: 'wrap',
  [`@media screen and (max-width: ${$theme.breakpoints.medium})`]: {
    marginTop: '64px'
  }
}));

import React from 'react';
import {Link} from 'gatsby';

import {styled} from 'baseui';

export const Header = styled('header', ({$theme}) => ({
  alignItems: 'center',
  backgroundColor: $theme.colors.mono1000,
  color: $theme.colors.mono100,
  display: 'flex',
  height: $theme.sizing.scale1600,
  justifyContent: 'space-between',
  padding: `0 36px`,
  top: 0,
  left: 0,
  width: '100%',
  userSelect: 'none',
  [`@media screen and (min-width: ${$theme.breakpoints.medium}px)`]: {
    position: 'fixed'
  },
  [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
    position: 'static'

textDecoration: 'none',
  color: $theme.colors.primary400,
  ':visited': {color: $theme.colors.primary400},
  ':active': {color: $theme.colors.primary400}, 
  ':hover': {color: $theme.colors.primary700}, 
}))

export const H1 = styled('h1', ({$theme}) => ({
  ...$theme.typography.font700,
  fontFamily: 'Uber Move',
  fontWeight: 500,
  letterSpacing: '0.02em',
  margin: '4px 0 24px'
}));

export const H2 = styled('h2', ({$theme}) => ({
  ...$theme.typography.font500,
  fontFamily: 'Uber Move',
  fontWeight: 500,
  margin: '24px 0 16px'
}));

export const H3 = styled('h3', ({$theme}) => ({
  fontFamily: 'Uber Move',
  ...$theme.typography.font350,
}));

export const P = styled('p', ({$theme}) => ({
  fontFamily: 'Uber Move',
  ...$theme.typography.font300,
  lineHeight: 1.5,
  margin: '0 0 16px'

...($isTocOpen
      ? {
          opacity: 1,
          maxHeight: 'unset',
          transform: 'translateY(0)'
        }
      : {
          opacity: 0,
          maxHeight: 0,
          overflow: 'hidden',
          transform: 'translateY(30px)'
        })
  }
}));

const StyledTocToggle = styled('div', ({$theme}) => ({
  ...$theme.typography.font300,
  fontFamily: 'Uber Move',
  background: $theme.colors.mono1000,
  color: $theme.colors.mono100,
  alignItems: 'center',
  padding: '18px 24px',
  position: 'sticky',
  top: 0,
  userSelect: 'none',
  zIndex: 10,
  [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
    display: 'flex'
  },
  [`@media screen and (min-width: ${$theme.breakpoints.medium}px)`]: {
    display: 'none'
  }

fontSize: '0.9em',
  direction: 'ltr',
  textAlign: 'left',
  whiteSpace: 'pre',
  wordSpacing: 'normal',
  wordBreak: 'normal',
  tabSize: 4,
  hyphens: 'none',
  backgroundColor: $theme.colors.mono200,
}));

export const Pre = styled('pre', ({$theme}) => ({
  backgroundColor: $theme.colors.mono200
}));

export const BlockQuote = styled('blockquote', ({$theme}) => ({
  backgroundColor: $theme.colors.warning100,
  marginInlineStart: 0,
  marginInlineEnd: 0,
  padding: $theme.sizing.scale600,
  paddingBottom: '1px'
}));

export const Table = styled('table', ({$theme}) => ({
  borderCollapse: 'collapse',
  borderSpacing: '1px',
  width: '100%'
}));

export const TableHeaderCell = styled('th', ({$theme}) => ({
  padding: '4px',
  textAlign: 'left',

import * as React from 'react';
import {StatefulTooltip} from 'baseui/tooltip';
import {styled} from 'baseui';

const FakeLink = styled('span', props => ({
  borderBottom: `1px dotted ${props.$theme.colors.primary500}`,
  color: props.$theme.colors.primary500,
}));

export default () => (
  <div>
    You can use tooltips in many places, including inline text{' '}
    
          <p>Tooltips also support rendering arbitrary content.</p>
          <p>This in includes paragraphs, links, and any other markup.</p>
        </div>
      }
    &gt;

import {styled} from 'baseui';

export {H4, H5, H6} from 'baseui/typography';

export const A = styled('a', ({$theme}) => ({
  textDecoration: 'none',
  color: $theme.colors.primary400,
  ':visited': {color: $theme.colors.primary400},
  ':active': {color: $theme.colors.primary400}, 
  ':hover': {color: $theme.colors.primary700}, 
}))

export const H1 = styled('h1', ({$theme}) => ({
  ...$theme.typography.font700,
  fontFamily: 'Uber Move',
  fontWeight: 500,
  letterSpacing: '0.02em',
  margin: '4px 0 24px'
}));

export const H2 = styled('h2', ({$theme}) => ({

},
  [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
    position: 'static'
  }
}));

export const HeaderContainer = styled('div', ({$theme, ...props}) => ({
  gridColumn: '1 / 3',
  gridRow: '1 / 2',
  zIndex: 2,
  [`@media screen and (max-width: ${$theme.breakpoints.medium}px)`]: {
    order: 1
  }
}));

export const HeaderMenuBlock = styled('div', ({$theme, ...props}) => ({
  alignItems: 'center',
  display: 'flex',
  flexDirection: 'row'
}));

export const HeaderLogo = styled('a', ({$theme}) => ({
  ...$theme.typography.font600,
  textDecoration: 'none',
  fontFamily: 'Uber Move',
  fontWeight: 500,
  fontSize: '28px',
  ':visited': {color: $theme.colors.mono100},
  ':active': {color: $theme.colors.mono100},
  ':hover': {color: $theme.colors.mono100}
}));