@sanity/ui 2.3.7-canary.0 → 2.5.0

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

@@ -1,7 +1,8 @@
 import {forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {ThemeProps, _getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
+import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme_v2} from '../../theme'
 import {ButtonMode, ButtonTextAlign, ButtonTone, ButtonWidth, FlexJustify} from '../../types'
@@ -92,16 +93,16 @@ export const Button = forwardRef(function Button(
   } = props
   const {button} = useTheme_v2()
 
-  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 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 boxProps = useMemo(
     () => ({

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

@@ -1,8 +1,8 @@
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -82,14 +82,6 @@ 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}>
@@ -99,16 +91,16 @@ export const Card = forwardRef(function Card(
         data-ui="Card"
         data-tone={tone}
         {...restProps}
-        $border={$border}
-        $borderTop={$borderTop}
-        $borderRight={$borderRight}
-        $borderBottom={$borderBottom}
-        $borderLeft={$borderLeft}
-        $radius={$radius}
-        $shadow={$shadow}
+        $border={useArrayProp(border)}
+        $borderTop={useArrayProp(borderTop)}
+        $borderRight={useArrayProp(borderRight)}
+        $borderBottom={useArrayProp(borderBottom)}
+        $borderLeft={useArrayProp(borderLeft)}
         $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, useMemo} from 'react'
+import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -29,10 +29,9 @@ 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={$size} $weight={weight} ref={ref}>
+    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
     </Root>

package/src/core/primitives/container/container.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -26,7 +26,14 @@ export const Container = forwardRef(function Container(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, width = 2, ...restProps} = props
-  const $width = useMemo(() => _getArrayProp(width), [width])
 
-  return <Root data-ui="Container" {...restProps} $width={$width} forwardedAs={as} ref={ref} />
+  return (
+    <Root
+      data-ui="Container"
+      {...restProps}
+      $width={useArrayProp(width)}
+      forwardedAs={as}
+      ref={ref}
+    />
+  )
 })

package/src/core/primitives/flex/flex.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -36,21 +36,15 @@ export const Flex = forwardRef(function Flex(
 ) {
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
-  const $align = useMemo(() => _getArrayProp(align), [align])
-  const $direction = useMemo(() => _getArrayProp(direction), [direction])
-  const $gap = useMemo(() => _getArrayProp(gap), [gap])
-  const $justify = useMemo(() => _getArrayProp(justify), [justify])
-  const $wrap = useMemo(() => _getArrayProp(wrap), [wrap])
-
   return (
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={$align}
-      $direction={$direction}
-      $gap={$gap}
-      $justify={$justify}
-      $wrap={$wrap}
+      $align={useArrayProp(align)}
+      $direction={useArrayProp(direction)}
+      $gap={useArrayProp(gap)}
+      $justify={useArrayProp(justify)}
+      $wrap={useArrayProp(wrap)}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/grid/grid.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -24,28 +24,19 @@ export const Grid = forwardRef(function Grid(
   const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
     props
 
-  const $autoRows = useMemo(() => _getArrayProp(autoRows), [autoRows])
-  const $autoCols = useMemo(() => _getArrayProp(autoCols), [autoCols])
-  const $autoFlow = useMemo(() => _getArrayProp(autoFlow), [autoFlow])
-  const $columns = useMemo(() => _getArrayProp(columns), [columns])
-  const $gap = useMemo(() => _getArrayProp(gap), [gap])
-  const $gapX = useMemo(() => _getArrayProp(gapX), [gapX])
-  const $gapY = useMemo(() => _getArrayProp(gapY), [gapY])
-  const $rows = useMemo(() => _getArrayProp(rows), [rows])
-
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={$autoRows}
-      $autoCols={$autoCols}
-      $autoFlow={$autoFlow}
-      $columns={$columns}
-      $gap={$gap}
-      $gapX={$gapX}
-      $gapY={$gapY}
-      $rows={$rows}
+      $autoRows={useArrayProp(autoRows)}
+      $autoCols={useArrayProp(autoCols)}
+      $autoFlow={useArrayProp(autoFlow)}
+      $columns={useArrayProp(columns)}
+      $gap={useArrayProp(gap)}
+      $gapX={useArrayProp(gapX)}
+      $gapY={useArrayProp(gapY)}
+      $rows={useArrayProp(rows)}
       forwardedAs={as}
       ref={ref}
     >

package/src/core/primitives/heading/heading.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -62,9 +62,6 @@ export const Heading = forwardRef(function Heading(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -76,9 +73,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/core/primitives/inline/inline.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useMemo, Children} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
@@ -26,7 +26,6 @@ export const Inline = forwardRef(function Inline(
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
-  const $space = useMemo(() => _getArrayProp(space), [space])
   const children = useMemo(
     () => Children.map(childrenProp, (child) => child && <div>{child}</div>),
     [childrenProp],
@@ -36,7 +35,7 @@ export const Inline = forwardRef(function Inline(
     <Root
       data-ui="Inline"
       {...restProps}
-      $space={$space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       ref={ref as any}

package/src/core/primitives/kbd/kbd.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled, css} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Radius} from '../../types'
 import {Box} from '../box'
@@ -46,10 +46,9 @@ export const KBD = forwardRef(function KBD(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={$radius} ref={ref}>
+    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
         <Text as="span" size={fontSize} weight="semibold">
           {children}

package/src/core/primitives/label/label.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
@@ -59,9 +59,6 @@ export const Label = forwardRef(function Label(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -75,9 +72,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/core/primitives/popover/popover.tsx

@@ -23,9 +23,8 @@ import {
   useMemo,
   useRef,
 } from 'react'
-import {useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
+import {useArrayProp, useElementSize, useMediaIndex, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
-import {_getArrayProp} from '../../styles'
 import {useTheme_v2} from '../../theme'
 import {BoxOverflow, CardTone, Placement, PopoverMargins} from '../../types'
 import {
@@ -66,7 +65,6 @@ export interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  /** @deprecated Use `referenceElement` instead */
   children?: React.ReactElement
   /**
    * When `true`, prevent overflow within the current boundary:
@@ -133,14 +131,15 @@ export const Popover = memo(
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
-      boundaryElement: _boundaryElement,
-      children: _children,
+      boundaryElement = boundaryElementContext.element,
+      children: childProp,
       constrainSize = false,
       content,
       disabled,
-      fallbackPlacements: _fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements ??
+        DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
       matchReferenceWidth,
-      floatingBoundary: _floatingBoundary,
+      floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -150,32 +149,24 @@ export const Popover = memo(
       portal,
       preventOverflow = true,
       radius: radiusProp = 3,
-      referenceBoundary: _referenceBoundary,
+      referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = 'inherit',
       width: widthProp = 'auto',
-      zOffset: _zOffset,
+      zOffset: zOffsetProp = layer.popover.zOffset,
       updateRef,
       ...restProps
     } = props
-    const boundaryElement = _boundaryElement ?? boundaryElementContext.element
-    const referenceBoundary =
-      _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element
-    const floatingBoundary =
-      _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element
-    const fallbackPlacements =
-      _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
-    const zOffsetProp = _zOffset ?? layer.popover.zOffset
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
     const boundarySize = useElementSize(boundaryElement)?.border
-    const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
-    const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
-    const shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp])
-    const widthArrayProp = _getArrayProp(widthProp)
-    const zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp])
+    const padding = useArrayProp(paddingProp)
+    const radius = useArrayProp(radiusProp)
+    const shadow = useArrayProp(shadowProp)
+    const widthArrayProp = useArrayProp(widthProp)
+    const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
     const rootBoundary: RootBoundary = 'viewport'
@@ -364,26 +355,45 @@ export const Popover = memo(
       [refs],
     )
 
-    useImperativeHandle(updateRef, () => update, [update])
+    const setReference = useCallback(
+      (node: HTMLElement | null) => {
+        refs.setReference(node)
 
-    useEffect(() => {
-      if (_children) return
-      refs.setReference(referenceElement || null)
-    }, [_children, referenceElement, refs])
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const childRef = (childProp as any)?.ref
+
+        if (typeof childRef === 'function') {
+          childRef(node)
+        } else if (childRef) {
+          childRef.current = node
+        }
+      },
+      [childProp, refs],
+    )
+
+    const child = useMemo(() => {
+      if (!childProp || referenceElement) return null
+
+      return cloneElement(childProp, {ref: setReference})
+    }, [childProp, referenceElement, setReference])
 
-    const children = useMemo(() => {
-      if (!_children || referenceElement) return null
+    useEffect(() => {
+      if (updateRef) {
+        if (typeof updateRef === 'function') {
+          updateRef(update)
+        } else if (updateRef) {
+          updateRef.current = update
+        }
+      }
+    }, [update, updateRef])
 
-      return cloneElement(_children, {
-        ref: (node: HTMLDivElement | null): void => {
-          logDeprecatedWarning()
-          refs.setReference(node)
-        },
-      })
-    }, [_children, referenceElement, refs])
+    useEffect(() => {
+      if (child) return
+      refs.setReference(referenceElement || null)
+    }, [referenceElement, refs, child])
 
     if (disabled) {
-      return _children || <></>
+      return childProp || <></>
     }
 
     const popover = (
@@ -438,21 +448,11 @@ export const Popover = memo(
           )}
         </ConditionalWrapper>
 
-        {/* the referred element (legacy, use referenceElement instead) */}
-        {children}
+        {/* the referred element */}
+        {child}
       </>
     )
   }),
 )
 
 Popover.displayName = 'Popover'
-
-let didWarn = false
-
-function logDeprecatedWarning() {
-  if (!didWarn) {
-    // eslint-disable-next-line no-console
-    console.warn('Popover: Please use the `referenceElement` prop instead of passing a children.')
-    didWarn = true
-  }
-}

package/src/core/primitives/select/select.tsx

@@ -1,8 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'
@@ -60,21 +59,16 @@ export const Select = forwardRef(function Select(
 
   useCustomValidity(ref, customValidity)
 
-  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
-  const $padding = useMemo(() => _getArrayProp(padding), [padding])
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-  const $space = useMemo(() => _getArrayProp(space), [space])
-
   return (
     <Root data-ui="Select">
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
         {...restProps}
-        $fontSize={$fontSize}
-        $padding={$padding}
-        $radius={$radius}
-        $space={$space}
+        $fontSize={useArrayProp(fontSize)}
+        $padding={useArrayProp(padding)}
+        $radius={useArrayProp(radius)}
+        $space={useArrayProp(space)}
         disabled={disabled || readOnly}
         ref={ref}
       >

package/src/core/primitives/stack/stack.tsx

@@ -1,6 +1,6 @@
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {stackBaseStyle, responsiveStackSpaceStyle, ResponsiveStackSpaceStyleProps} from './styles'
 
@@ -24,14 +24,13 @@ export const Stack = forwardRef(function Stack(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {as, space, ...restProps} = props
-  const $space = useMemo(() => _getArrayProp(space), [space])
 
   return (
     <Root
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}
-      $space={$space}
+      $space={useArrayProp(space)}
       forwardedAs={as}
       ref={ref}
     />

package/src/core/primitives/text/text.tsx

@@ -1,7 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useMemo} from 'react'
+import {forwardRef} from 'react'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveTextAlignStyle,
@@ -63,9 +63,6 @@ export const Text = forwardRef(function Text(
     ...restProps
   } = props
 
-  const $size = useMemo(() => _getArrayProp(size), [size])
-  const $align = useMemo(() => _getArrayProp(align), [align])
-
   let children = childrenProp
 
   if (textOverflow === 'ellipsis') {
@@ -77,10 +74,10 @@ export const Text = forwardRef(function Text(
       data-ui="Text"
       {...restProps}
       $accent={accent}
-      $align={$align}
-      $size={$size}
+      $align={useArrayProp(align)}
       $muted={muted}
       ref={ref}
+      $size={useArrayProp(size)}
       $weight={weight}
     >
       <span>{children}</span>

package/src/core/primitives/textArea/textArea.tsx

@@ -1,8 +1,7 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {forwardRef, useImperativeHandle, useMemo, useRef} from 'react'
+import {forwardRef, useImperativeHandle, useRef} from 'react'
 import {styled} from 'styled-components'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -81,11 +80,6 @@ export const TextArea = forwardRef(function TextArea(
 
   useCustomValidity(ref, customValidity)
 
-  const $radius = useMemo(() => _getArrayProp(radius), [radius])
-  const $fontSize = useMemo(() => _getArrayProp(fontSize), [fontSize])
-  const $padding = useMemo(() => _getArrayProp(padding), [padding])
-  const $space = useMemo(() => _getArrayProp(0), [])
-
   return (
     <Root data-ui="TextArea">
       <InputRoot>
@@ -94,17 +88,17 @@ export const TextArea = forwardRef(function TextArea(
           data-scheme={rootTheme.scheme}
           data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={$fontSize}
-          $padding={$padding}
-          $space={$space}
+          $fontSize={useArrayProp(fontSize)}
+          $padding={useArrayProp(padding)}
           $scheme={rootTheme.scheme}
+          $space={useArrayProp(0)}
           $tone={rootTheme.tone}
           $weight={weight}
           disabled={disabled}
           ref={ref}
         />
         <Presentation
-          $radius={$radius}
+          $radius={useArrayProp(radius)}
           $scheme={rootTheme.scheme}
           $tone={rootTheme.tone}
           data-border={border ? '' : undefined}

package/src/core/primitives/textInput/textInput.tsx

@@ -4,8 +4,7 @@ import {forwardRef, isValidElement, useCallback, useImperativeHandle, useMemo, u
 import {isValidElementType} from 'react-is'
 import {styled} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity} from '../../hooks'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp, useCustomValidity} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -178,10 +177,10 @@ export const TextInput = forwardRef(function TextInput(
 
   const rootTheme = useRootTheme()
 
-  const fontSize = useMemo(() => _getArrayProp(fontSizeProp), [fontSizeProp])
-  const padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp])
-  const radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp])
-  const space = useMemo(() => _getArrayProp(spaceProp), [spaceProp])
+  const fontSize = useArrayProp(fontSizeProp)
+  const padding = useArrayProp(paddingProp)
+  const radius = useArrayProp(radiusProp)
+  const space = useArrayProp(spaceProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)