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

(props: DropdownProps, ref) => {
    const {
      children,
      value,
      onChange,
      onBlur,
      onFocus,
      placeholder,
      ...restProps
    } = props;

    const styles = useStyles(styleRefs);

    Children.forEach(children, child => {
      if (!(isValidElement(child) && /^(option|optgroup)$/.test(child.type))) {
        throw new Error(
          '`Dropdown` only accepts children of type `option` or `optgroup`.',
        );
      }
    });

    return (

export function useHeading({
  weight = 'regular',
  level,
  baseline,
  backgroundContext,
  _LEGACY_SPACE_ = false,
}: UseHeadingParams) {
  const styles = useStyles(styleRefs);
  const textTone = useTextTone({ tone: 'neutral', backgroundContext });

  return classnames(
    styles.fontFamily,
    styles.headingWeight[weight],
    styles.heading[level].base,
    _LEGACY_SPACE_ ? null : styles.heading[level].cropFirstLine,
    textTone,
    {
      [styles.heading[level].baseline]: baseline,
    },
  );
}

function GroupHeading({ children }: GroupHeadingProps) {
  const styles = useStyles(styleRefs);

  return (

export function useTextSize(size: keyof typeof styleRefs.text) {
  return useStyles(styleRefs).text[size].base;
}

export function Autosuggest({
  id,
  value = fallbackValue,
  suggestions = fallbackSuggestions,
  onChange = noop,
  automaticSelection = false,
  showMobileBackdrop = false,
  scrollToTopOnMobile = true,
  onFocus = noop,
  onBlur = noop,
  placeholder,
  ...restProps
}: AutosuggestProps) {
  const styles = useStyles(styleRefs);

  const fireChange = useCallback(
    (suggestion: Suggestion) =>
      onChange(valueFromSuggestion(suggestion)),
    [onChange],
  );

  const inputRef = useRef(null);
  const rootRef = useRef(null);
  const menuRef = useRef(null);
  const justPressedArrowRef = useRef(false);
  const mobileDetectionRef = useRef(null);
  const {
    normalisedSuggestions,
    groupHeadingIndexes,
    groupHeadingForSuggestion,

(
    { value, onChange, onBlur, onFocus, placeholder, limit, ...restProps },
    ref,
  ) => {
    const styles = useStyles(styleRefs);

    return (
      
        {({ className, ...fieldProps }, fieldRef) => (

export const Divider = () => {
  const styles = useStyles(styleRefs);

  return (
    
      
    
  );
};

export const Toggle = ({
  id,
  on,
  onChange,
  label,
  align = 'left',
}: ToggleProps) => {
  const styles = useStyles(styleRefs);

  return (

export const useIconContainerSize = ({
  size = 'standard',
}: UseIconContainerSizeProps = {}) => {
  const styles = useStyles(styleRefs);
  return styles.blockSizes[size];
};

function useLinkStyles(showVisited: boolean) {
  const styles = useStyles(styleRefs);
  const inHeading = useContext(HeadingContext);
  const backgroundContext = useBackground();
  const mediumWeight = useWeight('medium');
  const highlightLink = backgroundContext === 'card' || !backgroundContext;

  return [
    highlightLink ? styles.underlineOnHoverOnly : styles.underlineAlways,
    useTextTone({ tone: highlightLink ? 'link' : 'neutral' }),
    !inHeading ? mediumWeight : null,
    showVisited ? styles.visited : null,
  ];
}