How to use the @airbnb/lunar/lib/hooks/useStyles function in @airbnb/lunar

export default function LayoutShell({ children, sideBar }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <div>
      {sideBar &amp;&amp; <aside>{sideBar}</aside>}

      <div>{children}</div>
    </div>
  );
}

export default function SideBar({ accessibilityLabel, children }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <nav>
      <ul aria-label="{accessibilityLabel}" role="menubar">
        {children}
      </ul>
    </nav>
  );
}

export default function Layout({
  after,
  before,
  centerAlign,
  children,
  fluid,
  minHeight,
  noBackground,
  noPadding,
}: Props & AsideProps) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <div>
      {before}

      <main role="main">
        </main></div>

export default function Aside({
  after,
  before,
  children,
  collapsible,
  noPadding,
  scrollable,
  width,
  onCollapseToggle,
}: Props) {
  const [styles, cx] = useStyles(styleSheet);
  const [expanded, setExpanded] = useState(true);

  const handleCollapseToggle: React.DOMAttributes['onClick'] = collapsible
    ? () => {
        setExpanded(prev => !prev);

        if (onCollapseToggle) {
          onCollapseToggle(!expanded);
        }
      }
    : undefined;

  return (

export default function SplitLayout({ after, before, fluid }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    
      <div>
        <div>{before}</div>
        <div>{after}</div>
      </div>
    
  );
}

function ShellLayout({ children }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return <div>{children}</div>;
}

accessibilityLabel,
  activeCount,
  children,
  dropdownProps = { right: 0 },
  ignoreClickOutside,
  keepOpenOnClear,
  large,
  menuProps,
  small,
  zIndex = 1,
  onApply,
  onClear,
  onHide,
  onShow,
}: Props) {
  const [styles, cx] = useStyles(styleSheet);
  const [opened, setOpened] = useState(false);

  const handleShowFilters = () => {
    setOpened(true);

    if (onShow) {
      onShow();
    }
  };

  const handleHideFilters = () => {
    setOpened(false);

    if (onHide) {
      onHide();
    }

function SideBarItem({ active, label, href, icon, onClick }: Props) {
  const [styles, cx] = useStyles(styleSheet);

  return (
    <li role="none">
      
        <span>{React.cloneElement(icon, { size: '2em' })}</span>

        {label &amp;&amp; (
          <span>
            </span></li>

export default function Toasts() {
  const context = useContext(AppContext);
  const [styles, cx] = useStyles(styleSheet);

  if (!context || context.toasts.length === 0) {
    return null;
  }

  const toasts = [...context.toasts];

  toasts.reverse();

  return (
    <div>
      {toasts.map(toast =&gt; (
        </div>