How to use the sku/treat.useStyles function in sku

(
    {
      label,
      onClick,
      onMouseDown,
      onKeyUp,
      onKeyDown,
      'aria-haspopup': ariaHasPopUp,
      'aria-expanded': ariaExpanded,
      keyboardAccessible = true,
      active = false,
      children,
    },
    forwardedRef,
  ) => {
    const styles = useStyles(styleRefs);
    const iconContainerStyles = useIconContainerSize();
    const iconStyles = useIconSize();
    const background = useBackground();

    const handleMouseDown = useCallback(
      (event: MouseEvent) => {
        if (typeof onMouseDown !== 'function') {
          return;
        }

        if (!onClick) {
          // Ensure that the mousedown event doesn't trigger
          // a blur on the currently focused element if there
          // isn't any click behaviour attached to this button.
          // If we don't do this, the currently focused element
          // will lose its visible focus state which may not be

export const OverflowMenuItem = ({
  children,
  onClick,
  type = 'button',
}: OverflowMenuItemProps) => {
  const styles = useStyles(styleRefs);
  const menuContext = useContext(OverflowMenuContext);

  if (!menuContext) {
    if (process.env.NODE_ENV !== 'production') {
      throw new Error(
        'An OverflowMenuItem must be rendered as an immediate child of an OverflowMenu. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/OverflowMenu',
      );
    } else {
      throw new Error('OverflowMenuItem rendered outside menu context');
    }
  }

  const { isHighlighted, index, dispatch, focusTrigger } = menuContext;
  const menuItemRef = useRef(null);

  useEffect(() => {

export const useNegativeMarginLeft = (
  space: ResponsiveProp,
) => {
  const styles = useStyles(styleRefs);
  return classnames(
    resolveResponsiveProp(space, styles.mobile, styles.tablet, styles.desktop),
  );
};

export const ButtonRenderer = ({
  weight = 'regular',
  loading = false,
  children,
}: ButtonRendererProps) => {
  const styles = useStyles(styleRefs);
  const isWeak = weight === 'weak';
  const { background, boxShadow } = useButtonVariant(weight);

  const buttonStyles = classnames(
    styles.root,
    isWeak ? styles.weak : null,
    useBackgroundLightness() === 'dark' ? styles.inverted : null,
    useBoxStyles({
      component: 'button',
      cursor: 'pointer',
      width: 'full',
      position: 'relative',
      display: 'block',
      borderRadius: 'standard',
      boxShadow,
      background,

export const OverflowMenu = ({
  onOpen,
  onClose,
  label,
  children,
}: OverflowMenuProps) => {
  const styles = useStyles(styleRefs);
  const buttonRef = useRef(null);
  const hasOpened = useRef(false);
  const items = Children.toArray(children);

  const [{ open, highlightIndex }, dispatch] = useReducer(
    (state: State, action: Action): State => {
      switch (action.type) {
        case MENU_TRIGGER_UP:
        case MENU_ITEM_UP: {
          return {
            ...state,
            open: true,
            highlightIndex: getNextIndex(
              -1,
              state.highlightIndex,
              items.length,

export const Inline = ({ space = 'none', align, children }: InlineProps) => {
  const styles = useStyles(styleRefs);
  const negativeMarginLeft = useNegativeMarginLeft(space);
  const negativeMarginTop = useNegativeMarginTop(space);

  return (
    
      
        {Children.map(children, child =>
          child !== null && child !== undefined ? (
            
              {child}
            
          ) : null,

},
    ref,
  ) => {
    useEffect(() => {
      if (timed) {
        const timeoutId = window.setTimeout(() => {
          onClear();
        }, 5000);

        return () => {
          window.clearTimeout(timeoutId);
        };
      }
    }, [timed]);

    const styles = useStyles(styleRefs);
    const touchable = useTouchableSpace('standard');

    const icon =
      tone === 'critical' ? (
        
          
        
      ) : null;

    return (

const ButtonChildren = ({ children }: ButtonChildrenProps) => {
  const styles = useStyles(styleRefs);
  const { weight, loading } = useContext(ButtonChildrenContext);
  const buttonVariant = useButtonVariant(weight);

  return (

const IconTile = ({
  icon,
  suggestion = false,
}: {
  icon: typeof iconNames[number];
  suggestion?: boolean;
}) => {
  const styles = useStyles(styleRefs);
  const IconComponent = icons[icon.name];

  return (

export const Badge = ({
  tone = 'info',
  weight = 'regular',
  children,
  id,
}: BadgeProps) => {
  const styles = useStyles(styleRefs);

  if (typeof children !== 'string') {
    throw new Error('Badge may only contain a `string`');
  }

  return (