@sanity/ui 2.3.6-0 → 2.3.6-canary.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.3.6-0",
+  "version": "2.3.6-canary.1",
   "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"
@@ -93,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",

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 = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],

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)
@@ -319,11 +328,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 = 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/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',
@@ -61,6 +61,7 @@ export function MenuGroup(
   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 +167,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'
@@ -105,7 +105,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 +123,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" />
 })

package/src/core/hooks/useArrayProp.ts

@@ -7,19 +7,20 @@ export type ArrayPropPrimitive = string | number | boolean | undefined | null
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
+ * @deprecated use `_getArrayProp` and `useMemo` directly instead
+ * @example
+ * ```diff
+ * -import {useArrayProp} from '@sanity/ui'
+ * +import {_getArrayProp} from '@sanity/ui'
+ * +import {useMemo} from 'react'
+ *
+ * -const width = useArrayProp(props.width)
+ * +const width = useMemo(() => _getArrayProp(props.width), [props.width])
+ * ```
  */
 export function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
   val: T | T[] | undefined,
   defaultVal?: T[],
 ): T[] {
-  // JSON.stringify is fast, but it's not faster than useMemo's referencial equality check
-  const __perf_hash__ = useMemo(() => JSON.stringify(val ?? defaultVal), [defaultVal, val])
-
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
-
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__],
-  )
+  return useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val])
 }

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

@@ -1,8 +1,8 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
-import ReactIs from 'react-is'
+import {isValidElementType} 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'
@@ -73,8 +73,8 @@ export const Avatar = forwardRef(function Avatar(
     ...restProps
   } = props
   const {avatar} = useTheme_v2()
-  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(sizeProp)
+  const as = isValidElementType(asProp) ? asProp : 'div'
+  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]

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

@@ -2,8 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {forwardRef, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps, _getArrayProp} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Label} from '../label'
 
@@ -68,7 +67,7 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {count, size: sizeProp = 1} = props
-  const size = useArrayProp(sizeProp)
+  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
 
   const fontSize = useMemo(
     () =>

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

@@ -2,8 +2,7 @@ import {getTheme_v2} from '@sanity/ui/theme'
 import {Children, cloneElement, forwardRef, isValidElement, useMemo} from 'react'
 import {styled, css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps, _getArrayProp} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
 
@@ -70,7 +69,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
     [childrenProp],
   )
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
+  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
 
   const len = children.length
   const visibleCount = maxLength - 1

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

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} 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'
@@ -45,13 +45,16 @@ export const Badge = forwardRef(function Badge(
     ...restProps
   } = props
 
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+  const $padding = useMemo(() => _getArrayProp(padding), [padding])
+
   return (
     <Root
       data-ui="Badge"
       {...restProps}
       $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
+      $radius={$radius}
+      padding={$padding}
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>

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

@@ -1,6 +1,6 @@
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   boxStyle,
   flexItemStyle,
@@ -90,36 +90,62 @@ export const Box = forwardRef(function Box(
     ...restProps
   } = props
 
+  const $column = useMemo(() => _getArrayProp(column), [column])
+  const $columnStart = useMemo(() => _getArrayProp(columnStart), [columnStart])
+  const $columnEnd = useMemo(() => _getArrayProp(columnEnd), [columnEnd])
+  const $display = useMemo(() => _getArrayProp(display), [display])
+  const $flex = useMemo(() => _getArrayProp(flex), [flex])
+  const $height = useMemo(() => _getArrayProp(height), [height])
+  const $margin = useMemo(() => _getArrayProp(margin), [margin])
+  const $marginX = useMemo(() => _getArrayProp(marginX), [marginX])
+  const $marginY = useMemo(() => _getArrayProp(marginY), [marginY])
+  const $marginTop = useMemo(() => _getArrayProp(marginTop), [marginTop])
+  const $marginRight = useMemo(() => _getArrayProp(marginRight), [marginRight])
+  const $marginBottom = useMemo(() => _getArrayProp(marginBottom), [marginBottom])
+  const $marginLeft = useMemo(() => _getArrayProp(marginLeft), [marginLeft])
+  const $overflow = useMemo(() => _getArrayProp(overflow), [overflow])
+  const $padding = useMemo(() => _getArrayProp(padding), [padding])
+  const $paddingX = useMemo(() => _getArrayProp(paddingX), [paddingX])
+  const $paddingY = useMemo(() => _getArrayProp(paddingY), [paddingY])
+  const $paddingTop = useMemo(() => _getArrayProp(paddingTop), [paddingTop])
+  const $paddingRight = useMemo(() => _getArrayProp(paddingRight), [paddingRight])
+  const $paddingBottom = useMemo(() => _getArrayProp(paddingBottom), [paddingBottom])
+  const $paddingLeft = useMemo(() => _getArrayProp(paddingLeft), [paddingLeft])
+  const $row = useMemo(() => _getArrayProp(row), [row])
+  const $rowStart = useMemo(() => _getArrayProp(rowStart), [rowStart])
+  const $rowEnd = useMemo(() => _getArrayProp(rowEnd), [rowEnd])
+  const $sizing = useMemo(() => _getArrayProp(sizing), [sizing])
+
   return (
     <Root
       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={$column}
+      $columnStart={$columnStart}
+      $columnEnd={$columnEnd}
+      $display={$display}
+      $flex={$flex}
+      $height={$height}
+      $margin={$margin}
+      $marginX={$marginX}
+      $marginY={$marginY}
+      $marginTop={$marginTop}
+      $marginRight={$marginRight}
+      $marginBottom={$marginBottom}
+      $marginLeft={$marginLeft}
+      $overflow={$overflow}
+      $padding={$padding}
+      $paddingX={$paddingX}
+      $paddingY={$paddingY}
+      $paddingTop={$paddingTop}
+      $paddingRight={$paddingRight}
+      $paddingBottom={$paddingBottom}
+      $paddingLeft={$paddingLeft}
+      $row={$row}
+      $rowStart={$rowStart}
+      $rowEnd={$rowEnd}
+      $sizing={$sizing}
       as={asProp}
       ref={ref}
     >

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

@@ -1,8 +1,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 {ThemeProps, _getArrayProp} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
@@ -93,16 +92,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 = useMemo(() => _getArrayProp(justifyProp), [justifyProp])
+  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
+  const paddingX = useMemo(() => _getArrayProp(paddingXProp), [paddingXProp])
+  const paddingY = useMemo(() => _getArrayProp(paddingYProp), [paddingYProp])
+  const paddingTop = useMemo(() => _getArrayProp(paddingTopProp), [paddingTopProp])
+  const paddingBottom = useMemo(() => _getArrayProp(paddingBottomProp), [paddingBottomProp])
+  const paddingLeft = useMemo(() => _getArrayProp(paddingLeftProp), [paddingLeftProp])
+  const paddingRight = useMemo(() => _getArrayProp(paddingRightProp), [paddingRightProp])
+  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
+  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
 
   const boxProps = useMemo(
     () => ({

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

@@ -1,8 +1,8 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -82,6 +82,14 @@ export const Card = forwardRef(function Card(
   const rootTheme = useRootTheme()
   const tone = toneProp === 'inherit' ? rootTheme.tone : toneProp
 
+  const $border = useMemo(() => _getArrayProp(border), [border])
+  const $borderTop = useMemo(() => _getArrayProp(borderTop), [borderTop])
+  const $borderRight = useMemo(() => _getArrayProp(borderRight), [borderRight])
+  const $borderBottom = useMemo(() => _getArrayProp(borderBottom), [borderBottom])
+  const $borderLeft = useMemo(() => _getArrayProp(borderLeft), [borderLeft])
+  const $radius = useMemo(() => _getArrayProp(radius), [radius])
+  const $shadow = useMemo(() => _getArrayProp(shadow), [shadow])
+
   // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>
@@ -91,16 +99,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={$border}
+        $borderTop={$borderTop}
+        $borderRight={$borderRight}
+        $borderBottom={$borderBottom}
+        $borderLeft={$borderLeft}
+        $radius={$radius}
+        $shadow={$shadow}
         $checkered={checkered}
         $focusRing={focusRing}
         $muted={muted}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
         $tone={tone}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}

package/src/core/primitives/code/code.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {forwardRef} from 'react'
+import {forwardRef, useMemo} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {_getArrayProp} from '../../styles'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -29,9 +29,10 @@ export const Code = forwardRef(function Code(
   const {children, language: languageProp, size = 2, weight, ...restProps} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language as any) : false
+  const $size = useMemo(() => _getArrayProp(size), [size])
 
   return (
-    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <Root data-ui="Code" {...restProps} $size={$size} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>