@sanity/ui 3.0.12 → 3.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "keywords": [
     "sanity",
     "ui",

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

@@ -21,7 +21,6 @@ import {
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
 import {
   Box,
   BoxProps,
@@ -33,6 +32,7 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
@@ -214,7 +214,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],
@@ -470,18 +470,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     return undefined
   }, [disabled, handleClearButtonFocus, loading, value])
 
-  const openButtonBoxPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
-
-        return v - 2
-      }),
-    [padding],
-  )
-  const openButtonPadding = useMemo(() => padding.map((v) => Math.max(v - 1, 0)), [padding])
+  const openButtonBoxPadding = padding.map((v) => {
+    if (v === 0) return 0
+    if (v === 1) return 1
+    if (v === 2) return 1
+
+    return v - 2
+  })
+  const openButtonPadding = padding.map((v) => Math.max(v - 1, 0))
   const openButtonProps: AutocompleteOpenButtonProps = useMemo(
     () => (typeof openButton === 'object' ? openButton : EMPTY_RECORD),
     [openButton],

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

@@ -9,8 +9,9 @@ import {
   useState,
 } from 'react'
 
-import {useArrayProp, useClickOutsideEvent} from '../../hooks'
+import {useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**
@@ -30,7 +31,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 = _getArrayProp(spaceRaw)
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)

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

@@ -9,14 +9,10 @@ import {
   focusLastDescendant,
   isHTMLElement,
 } from '../../helpers'
-import {
-  useArrayProp,
-  useClickOutsideEvent,
-  useGlobalKeyDown,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {useClickOutsideEvent, 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'
@@ -172,9 +168,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 = _getArrayProp(radiusProp)
+  const shadow = _getArrayProp(shadowProp)
+  const width = _getArrayProp(widthProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const contentRef = useRef<HTMLDivElement | null>(null)
   const layer = useLayer()
@@ -320,11 +316,11 @@ export const Dialog = forwardRef(function Dialog(
   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 = _getArrayProp(cardRadiusProp)
+  const padding = _getArrayProp(paddingProp)
+  const position = _getArrayProp(positionProp)
+  const width = _getArrayProp(widthProp)
+  const zOffset = _getArrayProp(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,8 +1,8 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
 import {Inline, KBD} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {Radius} from '../../types'
 
 /**
@@ -41,7 +41,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 = _getArrayProp(spaceProp)
 
   if (!keys || keys.length === 0) {
     return <></>

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

@@ -2,9 +2,9 @@ import {ChevronRightIcon} from '@sanity/icons'
 import {isValidElement, useCallback, useEffect, 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, MenuProps} from './menu'
@@ -122,11 +122,13 @@ export function MenuGroup(
 
   // Close child menu when a sibling item becomes active
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!active) setOpen(false)
   }, [active])
 
   // Update state when child menu is no longer open
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (!open) setWithinMenu(false)
   }, [open])
 
@@ -181,7 +183,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={_getArrayProp(radius)}
         $tone={tone}
         $scheme={scheme}
         onClick={handleClick}

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

@@ -10,10 +10,10 @@ import {
 } 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'
@@ -108,7 +108,7 @@ export const MenuItem = forwardRef(function MenuItem(
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft],
   )
 
-  const hotkeysFontSize = useArrayProp(fontSize).map((s) => s - 1)
+  const hotkeysFontSize = _getArrayProp(fontSize).map((s) => s - 1)
 
   const setRef = useCallback((el: HTMLDivElement | null) => {
     ref.current = el
@@ -124,8 +124,8 @@ export const MenuItem = forwardRef(function MenuItem(
       data-selected={active ? '' : undefined}
       data-disabled={disabled ? '' : undefined}
       forwardedAs={as}
-      $radius={useArrayProp(radius)}
-      $padding={useArrayProp(0)}
+      $radius={_getArrayProp(radius)}
+      $padding={_getArrayProp(0)}
       $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 {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
 import {Box, BoxProps, ResponsiveRadiusProps} from '../../primitives'
+import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
@@ -32,7 +32,7 @@ export const Skeleton = forwardRef(function Skeleton(
 
   useEffect(() => {
     if (!delay) {
-      return setVisible(true)
+      return undefined
     }
 
     const timeout = setTimeout(() => {
@@ -48,8 +48,8 @@ export const Skeleton = forwardRef(function Skeleton(
     <StyledSkeleton
       {...restProps}
       $animated={animated}
-      $radius={useArrayProp(radius)}
-      $visible={visible}
+      $radius={_getArrayProp(radius)}
+      $visible={delay ? visible : true}
       ref={ref}
     />
   )

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

@@ -2,8 +2,7 @@ import {getTheme_v2, ThemeFontKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
-import {_responsive, ThemeProps} from '../../styles'
+import {_getArrayProp, _responsive, ThemeProps} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
 const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
@@ -68,7 +67,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = _getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
 })
@@ -84,7 +83,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = _getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
 })
@@ -100,7 +99,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = _getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
 })
@@ -116,7 +115,7 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {size = 2, ...restProps} = props
-  const $size = useArrayProp(size)
+  const $size = _getArrayProp(size)
 
   return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
 })

package/src/core/components/tree/tree.tsx

@@ -208,6 +208,7 @@ export const Tree = forwardRef(function Tree(
       ref.current.querySelectorAll('[data-ui="TreeItem"]'),
     ) as HTMLElement[]
 
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setItemElements(_itemElements)
   }, [children])
 

package/src/core/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './useArrayProp'
+export {type ArrayPropPrimitive, useArrayProp} from './useArrayProp'
 export * from './useClickOutside'
 export * from './useClickOutsideEvent'
 export * from './useCustomValidity'

package/src/core/hooks/useArrayProp.ts

@@ -1,4 +1,4 @@
-import {useState} from 'react'
+import {useMemo} from 'react'
 
 import {_getArrayProp} from '../styles'
 
@@ -6,26 +6,12 @@ import {_getArrayProp} from '../styles'
 export type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
  * @beta
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  const [[cachedVal, cachedHash], setCache] = useState<[T[], string]>(() => [
-    _getArrayProp(val, defaultVal),
-    JSON.stringify(val ?? defaultVal),
-  ])
-
-  const hash = JSON.stringify(val ?? defaultVal)
-
-  if (hash !== cachedHash) {
-    // If the cached hash has changed, update the cache right away.
-    // Calling setState during render is fine in this case, and preferred over a useEffect loop
-    // https://19.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-    setCache([_getArrayProp(val, defaultVal), hash])
-  }
-
-  return cachedVal
+  return useMemo(() => _getArrayProp(val, defaultVal), [val, defaultVal])
 }

package/src/core/hooks/useClickOutside.ts

@@ -58,6 +58,7 @@ export function useClickOutside(
     const nextElements = _getElements(element, elementsArg)
 
     if (prevElements.length !== nextElements.length) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect
       setElements(nextElements)
       elementsRef.current = nextElements
 

package/src/core/primitives/avatar/avatar.tsx

@@ -1,9 +1,9 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useState} from 'react'
 import ReactIs from 'react-is'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Label} from '../label'
@@ -75,7 +75,7 @@ export const Avatar = forwardRef(function Avatar(
   } = props
   const {avatar} = useTheme_v2()
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(sizeProp)
+  const size = _getArrayProp(sizeProp)
 
   // eslint-disable-next-line no-warning-comments
   // @todo: remove this
@@ -102,6 +102,7 @@ export const Avatar = forwardRef(function Avatar(
   }, [arrowPosition, arrowPositionProp])
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     if (src) setImageFailed(false)
   }, [src])
 
@@ -113,18 +114,6 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
-
   return (
     <StyledAvatar
       as={as}
@@ -181,7 +170,17 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <InitialsLabel forwardedAs="span" size={initialsSize} weight="medium">
+            <InitialsLabel
+              forwardedAs="span"
+              size={size.map((s) => {
+                if (s === 1) return 1
+                if (s === 2) return 3
+                if (s === 3) return 5
+
+                return 0
+              })}
+              weight="medium"
+            >
               {initials}
             </InitialsLabel>
           </Initials>

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,10 +1,9 @@
 import {getTheme_v2} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {css, styled} from 'styled-components'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
+import {_getArrayProp, _responsive, rem, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'
 
@@ -69,23 +68,21 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {count, size: sizeProp = 1} = props
-  const size = useArrayProp(sizeProp)
-
-  const fontSize = useMemo(
-    () =>
-      size.map((s) => {
-        if (s === 1) return 1
-        if (s === 2) return 3
-        if (s === 3) return 5
-
-        return 0
-      }),
-    [size],
-  )
+  const size = _getArrayProp(sizeProp)
 
   return (
     <StyledAvatarCounter $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Label as="span" size={fontSize} weight="medium">
+      <Label
+        as="span"
+        size={size.map((s) => {
+          if (s === 1) return 1
+          if (s === 2) return 3
+          if (s === 3) return 5
+
+          return 0
+        })}
+        weight="medium"
+      >
         {count}
       </Label>
     </StyledAvatarCounter>

package/src/core/primitives/avatar/avatarStack.tsx

@@ -3,8 +3,7 @@ import {Children, cloneElement, forwardRef, isValidElement} from 'react'
 import {css, styled} from 'styled-components'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {_responsive, rem, ThemeProps} from '../../styles'
+import {_getArrayProp, _responsive, rem, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
 
@@ -71,7 +70,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   } = props
   const children: React.JSX.Element[] = Children.toArray(childrenProp).filter(isValidElement)
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = _getArrayProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1

package/src/core/primitives/badge/badge.tsx

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -51,8 +51,8 @@ export const Badge = forwardRef(function Badge(
       data-ui="Badge"
       {...restProps}
       $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
+      $radius={_getArrayProp(radius)}
+      padding={_getArrayProp(padding)}
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>

package/src/core/primitives/box/box.tsx

@@ -1,7 +1,7 @@
 import {forwardRef} from 'react'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   boxStyle,
   flexItemStyle,
@@ -96,31 +96,31 @@ export const Box = forwardRef(function Box(
       data-as={typeof asProp === 'string' ? asProp : undefined}
       data-ui="Box"
       {...restProps}
-      $column={useArrayProp(column)}
-      $columnStart={useArrayProp(columnStart)}
-      $columnEnd={useArrayProp(columnEnd)}
-      $display={useArrayProp(display)}
-      $flex={useArrayProp(flex)}
-      $height={useArrayProp(height)}
-      $margin={useArrayProp(margin)}
-      $marginX={useArrayProp(marginX)}
-      $marginY={useArrayProp(marginY)}
-      $marginTop={useArrayProp(marginTop)}
-      $marginRight={useArrayProp(marginRight)}
-      $marginBottom={useArrayProp(marginBottom)}
-      $marginLeft={useArrayProp(marginLeft)}
-      $overflow={useArrayProp(overflow)}
-      $padding={useArrayProp(padding)}
-      $paddingX={useArrayProp(paddingX)}
-      $paddingY={useArrayProp(paddingY)}
-      $paddingTop={useArrayProp(paddingTop)}
-      $paddingRight={useArrayProp(paddingRight)}
-      $paddingBottom={useArrayProp(paddingBottom)}
-      $paddingLeft={useArrayProp(paddingLeft)}
-      $row={useArrayProp(row)}
-      $rowStart={useArrayProp(rowStart)}
-      $rowEnd={useArrayProp(rowEnd)}
-      $sizing={useArrayProp(sizing)}
+      $column={_getArrayProp(column)}
+      $columnStart={_getArrayProp(columnStart)}
+      $columnEnd={_getArrayProp(columnEnd)}
+      $display={_getArrayProp(display)}
+      $flex={_getArrayProp(flex)}
+      $height={_getArrayProp(height)}
+      $margin={_getArrayProp(margin)}
+      $marginX={_getArrayProp(marginX)}
+      $marginY={_getArrayProp(marginY)}
+      $marginTop={_getArrayProp(marginTop)}
+      $marginRight={_getArrayProp(marginRight)}
+      $marginBottom={_getArrayProp(marginBottom)}
+      $marginLeft={_getArrayProp(marginLeft)}
+      $overflow={_getArrayProp(overflow)}
+      $padding={_getArrayProp(padding)}
+      $paddingX={_getArrayProp(paddingX)}
+      $paddingY={_getArrayProp(paddingY)}
+      $paddingTop={_getArrayProp(paddingTop)}
+      $paddingRight={_getArrayProp(paddingRight)}
+      $paddingBottom={_getArrayProp(paddingBottom)}
+      $paddingLeft={_getArrayProp(paddingLeft)}
+      $row={_getArrayProp(row)}
+      $rowStart={_getArrayProp(rowStart)}
+      $rowEnd={_getArrayProp(rowEnd)}
+      $sizing={_getArrayProp(sizing)}
       as={asProp}
       ref={ref}
     >

package/src/core/primitives/button/button.tsx

@@ -3,8 +3,7 @@ import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
-import {ThemeProps} from '../../styles'
+import {_getArrayProp, ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
@@ -97,16 +96,16 @@ export const Button = forwardRef(function Button(
   } = props
   const {button} = useTheme_v2()
 
-  const justify = useArrayProp(justifyProp)
-  const padding = useArrayProp(paddingProp)
-  const paddingX = useArrayProp(paddingXProp)
-  const paddingY = useArrayProp(paddingYProp)
-  const paddingTop = useArrayProp(paddingTopProp)
-  const paddingBottom = useArrayProp(paddingBottomProp)
-  const paddingLeft = useArrayProp(paddingLeftProp)
-  const paddingRight = useArrayProp(paddingRightProp)
-  const radius = useArrayProp(radiusProp)
-  const space = useArrayProp(spaceProp)
+  const justify = _getArrayProp(justifyProp)
+  const padding = _getArrayProp(paddingProp)
+  const paddingX = _getArrayProp(paddingXProp)
+  const paddingY = _getArrayProp(paddingYProp)
+  const paddingTop = _getArrayProp(paddingTopProp)
+  const paddingBottom = _getArrayProp(paddingBottomProp)
+  const paddingLeft = _getArrayProp(paddingLeftProp)
+  const paddingRight = _getArrayProp(paddingRightProp)
+  const radius = _getArrayProp(radiusProp)
+  const space = _getArrayProp(spaceProp)
 
   const boxProps = useMemo(
     () => ({

package/src/core/primitives/card/card.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -93,16 +93,16 @@ export const Card = forwardRef(function Card(
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={useArrayProp(border)}
-        $borderTop={useArrayProp(borderTop)}
-        $borderRight={useArrayProp(borderRight)}
-        $borderBottom={useArrayProp(borderBottom)}
-        $borderLeft={useArrayProp(borderLeft)}
+        $border={_getArrayProp(border)}
+        $borderTop={_getArrayProp(borderTop)}
+        $borderRight={_getArrayProp(borderRight)}
+        $borderBottom={_getArrayProp(borderBottom)}
+        $borderLeft={_getArrayProp(borderLeft)}
         $checkered={checkered}
         $focusRing={focusRing}
         $muted={muted}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
+        $radius={_getArrayProp(radius)}
+        $shadow={_getArrayProp(shadow)}
         $tone={tone}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}