@sanity/ui 2.3.6 → 2.3.7-canary.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.6",
+  "version": "2.3.7-canary.0",
   "keywords": [
     "sanity",
     "ui",
@@ -23,6 +23,10 @@
   "exports": {
     ".": {
       "source": "./exports/index.ts",
+      "react-compiler": {
+        "source": "./exports/index.ts",
+        "default": "./dist/index.compiled.mjs"
+      },
       "import": "./dist/index.mjs",
       "require": "./dist/index.js",
       "default": "./dist/index.js"
@@ -51,32 +55,6 @@
     "src",
     "theme.js"
   ],
-  "scripts": {
-    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
-    "commit": "cz",
-    "cypress:dev": "run-p dev cypress:open",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
-    "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
-    "pkg:build": "pkg build --strict",
-    "pkg:check": "pkg --strict",
-    "prepare": "husky install",
-    "prepublishOnly": "pnpm build",
-    "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
-    "ts:check": "tsc",
-    "watch": "pkg watch --strict",
-    "workshop:build": "workshop build",
-    "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
-  },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
@@ -106,7 +84,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.0",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.2.0",
+    "@sanity/icons": "3.2.1-canary.0",
     "csstype": "^3.1.3",
     "framer-motion": "11.0.8",
     "react-refractor": "^2.2.0"
@@ -119,7 +97,7 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.9.3",
+    "@sanity/pkg-utils": "6.9.4-canary.1",
     "@sanity/semantic-release-preset": "^4.1.8",
     "@sanity/ui-workshop": "^2.0.15",
     "@storybook/addon-a11y": "^8.0.8",
@@ -193,7 +171,6 @@
     "react-is": "^18",
     "styled-components": "^5.2 || ^6"
   },
-  "packageManager": "pnpm@9.2.0",
   "engines": {
     "node": ">=14.0.0"
   },
@@ -203,9 +180,28 @@
   "esm.sh": {
     "bundle": false
   },
-  "pnpm": {
-    "overrides": {
-      "conventional-changelog-conventionalcommits": ">= 8.0.0"
-    }
+  "scripts": {
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "commit": "cz",
+    "cypress:dev": "run-p dev cypress:open",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
+    "format": "prettier --write --cache --ignore-unknown .",
+    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
+    "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
+    "test": "jest",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
+    "watch": "pkg watch --strict",
+    "workshop:build": "workshop build",
+    "workshop:dev": "workshop dev",
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   }
-}
+}

package/src/core/components/autocomplete/autocomplete.tsx

@@ -20,7 +20,6 @@ import {
 } from 'react'
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -32,6 +31,7 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -200,7 +200,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(paddingProp)
+  const padding = _getArrayProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],
@@ -213,44 +213,41 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const activeItemId = activeValue ? `${id}-option-${activeValue}` : undefined
   const expanded = (query !== null && loading) || (focused && query !== null)
 
-  const handleRootBlur = useCallback(
-    (event: FocusEvent<HTMLInputElement>) => {
-      setTimeout(() => {
-        // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
-        // closes the results in certain situations):
-        // - Do not handle blur if the mouse is within the popover
-        if (popoverMouseWithinRef.current) {
-          return
-        }
+  const handleRootBlur = (event: FocusEvent<HTMLInputElement>) => {
+    setTimeout(() => {
+      // NOTE: This is a workaround for a bug that may happen in Chrome (clicking the scrollbar
+      // closes the results in certain situations):
+      // - Do not handle blur if the mouse is within the popover
+      if (popoverMouseWithinRef.current) {
+        return
+      }
 
-        const elements: HTMLElement[] = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
-        )
+      const elements: HTMLElement[] = (relatedElements || []).concat(
+        rootElementRef.current ? [rootElementRef.current] : [],
+        resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : [],
+      )
 
-        let focusInside = false
+      let focusInside = false
 
-        if (document.activeElement) {
-          for (const e of elements) {
-            if (e === document.activeElement || e.contains(document.activeElement)) {
-              focusInside = true
-              break
-            }
+      if (document.activeElement) {
+        for (const e of elements) {
+          if (e === document.activeElement || e.contains(document.activeElement)) {
+            focusInside = true
+            break
           }
         }
+      }
 
-        if (focusInside === false) {
-          dispatch({type: 'root/blur'})
-          popoverMouseWithinRef.current = false
-          if (onQueryChange) onQueryChange(null)
-          if (onBlur) onBlur(event)
-        }
-      }, 0)
-    },
-    [onBlur, onQueryChange, relatedElements],
-  )
+      if (focusInside === false) {
+        dispatch({type: 'root/blur'})
+        popoverMouseWithinRef.current = false
+        if (onQueryChange) onQueryChange(null)
+        if (onBlur) onBlur(event)
+      }
+    }, 0)
+  }
 
-  const handleRootFocus = useCallback((event: FocusEvent<HTMLDivElement>) => {
+  const handleRootFocus = (event: FocusEvent<HTMLDivElement>) => {
     const listBoxElement = listBoxElementRef.current
     const focusedElement = event.target instanceof HTMLElement ? event.target : null
     const listFocused = listBoxElement?.contains(focusedElement) || false
@@ -260,7 +257,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
       dispatch({type: 'root/setListFocused', listFocused})
     }
-  }, [])
+  }
 
   const handleOptionSelect = useCallback(
     (v: string) => {

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,6 +1,7 @@
 import {Children, forwardRef, Fragment, isValidElement, useCallback, useMemo, useState} from 'react'
-import {useArrayProp, useClickOutside} from '../../hooks'
+import {useClickOutside} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {ExpandButton, Root} from './breadcrumbs.styles'
 
 /**
@@ -20,7 +21,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   ref: React.ForwardedRef<HTMLOListElement>,
 ) {
   const {children, maxLength, separator, space: spaceRaw = 2, ...restProps} = props
-  const space = useArrayProp(spaceRaw)
+  const space = useMemo(() => _getArrayProp(spaceRaw), [spaceRaw])
   const [open, setOpen] = useState(false)
   const [expandElement, setExpandElement] = useState<HTMLButtonElement | null>(null)
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)

package/src/core/components/dialog/dialog.tsx

@@ -1,6 +1,14 @@
 import {CloseIcon} from '@sanity/icons'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react'
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {styled} from 'styled-components'
 import {
   containsOrEqualsElement,
@@ -8,9 +16,10 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {useArrayProp, useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
+import {useClickOutside, useGlobalKeyDown, usePrefersReducedMotion} from '../../hooks'
 import {Box, Button, Card, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
+import {_getArrayProp} from '../../styles'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
@@ -166,9 +175,9 @@ const DialogCard = forwardRef(function DialogCard(
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const radius = useArrayProp(radiusProp)
-  const shadow = useArrayProp(shadowProp)
-  const width = useArrayProp(widthProp)
+  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
+  const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
+  const width = useMemo(() => _getArrayProp(widthProp), [widthProp])
   const ref = useRef<HTMLDivElement | null>(null)
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
@@ -307,23 +316,25 @@ export const Dialog = forwardRef(function Dialog(
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || 'fixed',
+    position: _position,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffset,
     animate: _animate = false,
     ...restProps
   } = props
+  const positionProp = _position ?? (dialog.position || 'fixed')
+  const zOffsetProp = _zOffset ?? (dialog.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const padding = useArrayProp(paddingProp)
-  const position = useArrayProp(positionProp)
-  const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
+  const cardRadius = useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp])
+  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
+  const position = useMemo(() => _getArrayProp(positionProp), [positionProp])
+  const width = useMemo(() => _getArrayProp(widthProp), [widthProp])
+  const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)

package/src/core/components/hotkeys/hotkeys.tsx

@@ -1,7 +1,7 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 
 /**
@@ -40,7 +40,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   ref: React.Ref<HTMLElement>,
 ) {
   const {fontSize, keys, padding, radius, space: spaceProp = 0.5, ...restProps} = props
-  const space = useArrayProp(spaceProp)
+  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
 
   if (!keys || keys.length === 0) {
     return <></>

package/src/core/components/menu/menu.tsx

@@ -11,6 +11,7 @@ import {useMenuController} from './useMenuController'
  * @public
  */
 export interface MenuProps extends ResponsivePaddingProps {
+  'aria-labelledby'?: string
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -20,6 +21,7 @@ export interface MenuProps extends ResponsivePaddingProps {
    */
   focusLast?: boolean
   onClickOutside?: (event: MouseEvent) => void
+  onBlurCapture?: (event: React.FocusEvent<HTMLButtonElement>) => void
   onEscape?: () => void
   onItemClick?: () => void
   onItemSelect?: (index: number) => void
@@ -57,10 +59,12 @@ export const Menu = forwardRef(function Menu(
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = (props.focusFirst && 'first') || (props.focusLast && 'last') || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
   } = props
+  const shouldFocus =
+    _shouldFocus ?? ((props.focusFirst && 'first') || (props.focusLast && 'last') || null)
 
   const ref = useRef<HTMLDivElement | null>(null)
 

package/src/core/components/menu/menuButton.tsx

@@ -203,8 +203,9 @@ export const MenuButton = forwardRef(function MenuButton(
     }
   }, [])
 
-  const menuProps: MenuProps = useMemo(
-    () => ({
+  const menu =
+    menuProp &&
+    cloneElement<MenuProps>(menuProp, {
       'aria-labelledby': id,
       onBlurCapture: handleBlur,
       onClickOutside: handleMenuClickOutside,
@@ -213,22 +214,8 @@ export const MenuButton = forwardRef(function MenuButton(
       originElement: buttonElement,
       registerElement,
       shouldFocus,
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus,
-    ],
-  )
-
-  const menu = menuProp && cloneElement(menuProp, menuProps)
+    })
 
-  const ref = useRef<HTMLButtonElement | null>(null)
   const button = useMemo(
     () =>
       buttonProp &&
@@ -240,7 +227,7 @@ export const MenuButton = forwardRef(function MenuButton(
         onMouseDown: handleMouseDown,
         'aria-haspopup': true,
         'aria-expanded': open,
-        ref: ref,
+        ref: setButtonElement,
         selected: buttonProp.props.selected ?? open,
       }),
     [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open],
@@ -249,19 +236,10 @@ export const MenuButton = forwardRef(function MenuButton(
   // Forward button ref to parent
   useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
     forwardedRef,
-    () => ref.current,
+    () => buttonElement,
+    [buttonElement],
   )
 
-  // If there's a button then we need to set the reference element to the cloned button ref
-  // and if button changes we make sure to update or remove the reference element.
-  useEffect(() => {
-    if (!button) return undefined
-
-    setButtonElement(ref.current)
-
-    return () => setButtonElement(null)
-  }, [button])
-
   const popoverProps: MenuButtonProps['popover'] = useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -285,8 +263,15 @@ export const MenuButton = forwardRef(function MenuButton(
   )
 
   return (
-    <Popover data-ui="MenuButton__popover" {...popoverProps} content={menu} open={open}>
-      {button || <></>}
-    </Popover>
+    <>
+      <Popover
+        data-ui="MenuButton__popover"
+        referenceElement={buttonElement}
+        {...popoverProps}
+        content={menu}
+        open={open}
+      />
+      {button}
+    </>
   )
 })

package/src/core/components/menu/menuGroup.tsx

@@ -1,9 +1,9 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {isValidElement, useCallback, useEffect, useRef, useState} from 'react'
+import {isValidElement, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
 import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
+import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
 import {Radius, SelectableTone} from '../../types'
 import {Menu} from './menu'
@@ -39,7 +39,7 @@ export function MenuGroup(
     onClick,
     padding = 3,
     popover,
-    radius = 2,
+    radius: radiusProp = 2,
     space = 3,
     text,
     tone = 'default',
@@ -53,14 +53,16 @@ export function MenuGroup(
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
   const [rootElement, setRootElement] = useState<HTMLButtonElement | HTMLDivElement | null>(null)
   const [open, setOpen] = useState(false)
   const shouldFocusRef = useRef<'first' | 'last' | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const [withinMenu, setWithinMenu] = useState(false)
+  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
 
   const handleMouseEnter = useCallback(
     (event: React.MouseEvent<HTMLElement>) => {
@@ -166,7 +168,7 @@ export function MenuGroup(
         aria-pressed={as === 'button' ? withinMenu : undefined}
         data-pressed={as !== 'button' ? withinMenu : undefined}
         data-selected={!withinMenu && active ? '' : undefined}
-        $radius={useArrayProp(radius)}
+        $radius={radius}
         $tone={tone}
         $scheme={scheme}
         onClick={handleClick}

package/src/core/components/menu/menuItem.tsx

@@ -9,10 +9,10 @@ import {
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
-import {useArrayProp} from '../../hooks'
 import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
 import {ResponsivePaddingProps, ResponsiveRadiusProps} from '../../primitives/types'
+import {_getArrayProp} from '../../styles'
 import {useRootTheme} from '../../theme'
 import {SelectableTone} from '../../types/selectable'
 import {Hotkeys} from '../hotkeys'
@@ -72,9 +72,11 @@ export const MenuItem = forwardRef(function MenuItem(
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave,
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave,
   } = menu
+  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
+  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
   const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLDivElement | null>(null)
@@ -105,7 +107,9 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+  const hotkeysFontSize = useMemo(() => _getArrayProp(fontSize).map((s) => s - 1), [fontSize])
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+  const $padding = useMemo(() => _getArrayProp(0), [])
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -121,8 +125,8 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
+      $radius={$radius}
+      $padding={$padding}
       $tone={disabled ? 'default' : tone}
       $scheme={scheme}
       disabled={disabled}

package/src/core/components/skeleton/skeleton.tsx

@@ -1,8 +1,8 @@
-import {forwardRef, useEffect, useState} from 'react'
+import {forwardRef, useEffect, useMemo, useState} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box} from '../../primitives'
 import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
@@ -45,13 +45,7 @@ export const Skeleton = forwardRef(function Skeleton(
     }
   }, [delay])
 
-  return (
-    <Root
-      {...restProps}
-      $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
-      ref={ref}
-    />
-  )
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+
+  return <Root {...restProps} $animated={animated} $radius={$radius} $visible={visible} ref={ref} />
 })

package/src/core/components/skeleton/textSkeleton.tsx

@@ -1,8 +1,7 @@
 import {ThemeFontKey, getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
-import {ThemeProps, _responsive} from '../../styles'
+import {ThemeProps, _getArrayProp, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
@@ -67,7 +66,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useMemo(() => _getArrayProp(size), [size])
 
   return <Root {...restProps} $size={$size} ref={ref} $style="text" />
 })
@@ -82,7 +81,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useMemo(() => _getArrayProp(size), [size])
 
   return <Root {...restProps} $size={$size} ref={ref} $style="label" />
 })
@@ -97,7 +96,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useMemo(() => _getArrayProp(size), [size])
 
   return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
 })
@@ -112,7 +111,7 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = useMemo(() => _getArrayProp(size), [size])
 
   return <Root {...restProps} $size={$size} ref={ref} $style="code" />
 })