@sanity/ui 0.37.21 → 0.38.0

package/src/primitives/grid/__workshop__/responsive.tsx

@@ -10,41 +10,42 @@ export default function ResponsiveStory() {
           columns={[1, 2, 3, 4, 5, 6, 7]}
           gap={[0, 1, 2, 3, 4, 5, 6]}
           rows={[1, 2, 3, 4, 5, 6, 7]}
+          style={{textAlign: 'center'}}
         >
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>1</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>2</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>3</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>4</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>5</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>6</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>7</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>8</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>9</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>10</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>11</Code>
           </Card>
-          <Card tone="transparent">
+          <Card padding={[1, 2, 3]} tone="transparent">
             <Code>12</Code>
           </Card>
         </Grid>

package/src/primitives/grid/grid.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 import {ResponsiveGridProps} from '../types'
@@ -26,14 +27,14 @@ export const Grid = forwardRef(function Grid(
       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/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -8,43 +8,55 @@ export default function OpticalAlignment() {
       <Stack space={1}>
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={5}>Hamburgefonstiv M</Heading>
+            <Heading accent size={5}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={4}>Hamburgefonstiv M</Heading>
+            <Heading accent size={4}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={3}>Hamburgefonstiv M</Heading>
+            <Heading accent size={3}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={2}>Hamburgefonstiv M</Heading>
+            <Heading accent size={2}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={1}>Hamburgefonstiv M</Heading>
+            <Heading accent size={1}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={0} scheme="dark">
-            <Heading size={0}>Hamburgefonstiv M</Heading>
+            <Heading accent size={0}>
+              Hamburgefonstiv M
+            </Heading>
           </Card>
         </Flex>
 
         <Flex>
           <Card padding={2} scheme="dark">
-            <Heading>
+            <Heading accent>
               <AddCircleIcon />
             </Heading>
           </Card>

package/src/primitives/heading/heading.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {
   ResponsiveFontStyleProps,
   responsiveHeadingFont,
@@ -69,9 +70,9 @@ export const Heading = forwardRef(function Heading(
       data-ui="Heading"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/primitives/inline/inline.tsx

@@ -1,5 +1,6 @@
-import React, {forwardRef} from 'react'
+import React, {forwardRef, useMemo} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {childrenToElementArray} from '../helpers'
 import {inlineBaseStyle, inlineSpaceStyle} from './styles'
@@ -22,13 +23,18 @@ export const Inline = forwardRef(function Inline(
   ref
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
-  const children = childrenToElementArray(childrenProp).filter(Boolean)
+
+  const children = useMemo(
+    () =>
+      childrenToElementArray(childrenProp)
+        .filter(Boolean)
+        .map((child, idx) => <div key={idx}>{child}</div>),
+    [childrenProp]
+  )
 
   return (
-    <Root data-ui="Inline" {...restProps} $space={space} forwardedAs={as} ref={ref}>
-      {children.map((child, idx) => (
-        <div key={idx}>{child}</div>
-      ))}
+    <Root data-ui="Inline" {...restProps} $space={useArrayProp(space)} forwardedAs={as} ref={ref}>
+      {children}
     </Root>
   )
 })

package/src/primitives/inline/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {
@@ -20,7 +20,7 @@ export function inlineBaseStyle(): CSSObject {
 export function inlineSpaceStyle(props: ResponsiveInlineSpaceStyleProps & ThemeProps): CSSObject[] {
   const {theme} = props
 
-  return responsive(theme.sanity.media, getResponsiveProp(props.$space), (spaceIndex) => {
+  return _responsive(theme.sanity.media, props.$space, (spaceIndex) => {
     const space = rem(theme.sanity.space[spaceIndex])
 
     return {

package/src/primitives/inline/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveInlineSpaceStyleProps {
-  $space?: number | number[]
+  $space: number[]
 }

package/src/primitives/kbd/kbd.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {Box} from '../box'
 import {Code} from '../code'
@@ -38,7 +39,7 @@ export const KBD = forwardRef(function KBD(
   const {children, fontSize = 1, padding = 1, radius = 2, ...restProps} = props
 
   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}>
         <Code as="span" muted size={fontSize}>
           {children}

package/src/primitives/label/label.tsx

@@ -1,5 +1,6 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
+import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {ThemeFontWeightKey} from '../../theme'
 import {TextAlign} from '../../types'
@@ -25,7 +26,7 @@ export interface LabelProps {
 
 const Root = styled.div<{
   $accent?: boolean
-  $align?: TextAlign | TextAlign[]
+  $align: TextAlign[]
   $muted: boolean
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
@@ -68,9 +69,9 @@ export const Label = forwardRef(function Label(
       data-ui="Label"
       {...restProps}
       $accent={accent}
-      $align={align}
+      $align={useArrayProp(align)}
       $muted={muted}
-      $size={size}
+      $size={useArrayProp(size)}
       $weight={weight}
       ref={ref}
     >

package/src/primitives/popover/__workshop__/{margins.tsx → MarginsStory.tsx}

@@ -5,7 +5,7 @@ export default function MarginsStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Popover
-        __unstable_margins={[-5, -5, -5, -5]}
+        __unstable_margins={[-8, 8, -8, 8]}
         arrow={false}
         content={
           <Box padding={2}>

package/src/primitives/popover/__workshop__/{plain.tsx → PlainStory.tsx}

@@ -1,5 +1,5 @@
 import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
-import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import React, {useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
@@ -9,18 +9,17 @@ import {
 } from '../../../__workshop__/constants'
 
 export default function PlainStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const boundaryElementFlag = useBoolean('Boundary element', true, 'Props')
-  const content = useText('Content', 'Hello, world', 'Props')
-  const constrainSize = useBoolean('Constrain size', true, 'Props')
-  const matchReferenceWidth = useBoolean('Match reference width', false, 'Props')
-  const open = useBoolean('Open', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
-  const portal = useBoolean('Portal', true, 'Props')
-  const preventOverflow = useBoolean('Prevent overflow', true, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto', 'Props')
+  const arrow = useBoolean('Arrow', true)
+  const boundaryElementFlag = useBoolean('Boundary element', true)
+  const constrainSize = useBoolean('Constrain size', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const portal = useBoolean('Portal', true)
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
@@ -46,7 +45,6 @@ export default function PlainStory() {
               __unstable_margins={[1, 1, 1, 1]}
               arrow={arrow}
               boundaryElement={boundaryElementFlag ? boundaryElement : undefined}
-              content={<Text>{content}</Text>}
               constrainSize={constrainSize}
               fallbackPlacements={['top', 'bottom']}
               matchReferenceWidth={matchReferenceWidth}

package/src/primitives/popover/__workshop__/{recursive.tsx → RecursiveStory.tsx}

@@ -39,7 +39,9 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
   }, [open])
 
   useEffect(() => {
-    buttonRef.current?.focus()
+    setTimeout(() => {
+      buttonRef.current?.focus()
+    }, 0)
   }, [])
 
   const handleOpen = useCallback(() => setOpen(true), [])
@@ -58,6 +60,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       fallbackPlacements={fallbackPlacements}
       content={<RecursiveExample onClose={handleClose} />}
       open={open}
+      padding={1}
       placement={fallbackPlacements[3]}
       portal
       tone={tones[seed]}

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -0,0 +1,60 @@
+import {EllipsisVerticalIcon} from '@sanity/icons'
+import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
+import {useBoolean} from '@sanity/ui-workshop'
+import React, {useCallback, useState} from 'react'
+
+export default function RightAlignedStory() {
+  const constrainSize = useBoolean('Constrain size', false)
+
+  const [open, setOpen] = useState(false)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
+  const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
+
+  const content = (
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
+      hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi imperdiet
+      quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis, ex quam luctus
+      felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at rhoncus a, tempus vel
+      neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+      Sed id mauris quam. Nam finibus sapien non lacinia ultricies. Integer fermentum tortor at
+      pellentesque faucibus. In venenatis commodo placerat. Curabitur commodo tortor libero, vel
+      pellentesque elit luctus sodales. Donec mattis tristique nunc ac lacinia. Vestibulum non
+      pulvinar turpis, posuere consequat arcu. Fusce ut urna blandit, finibus nisi a, molestie elit.
+      Nulla sed eleifend mi.
+    </Text>
+  )
+
+  const handleToggleOpen = useCallback(() => setOpen((v) => !v), [])
+  const handleClose = useCallback(() => setOpen(false), [])
+
+  useClickOutside(handleClose, [buttonElement, popoverElement])
+
+  return (
+    <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
+      <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1}>
+        <Flex justify="flex-end" padding={0}>
+          <Popover
+            boundaryElement={boundaryElement}
+            constrainSize={constrainSize}
+            content={content}
+            open={open}
+            padding={3}
+            portal
+            placement="bottom"
+            ref={setPopoverElement}
+          >
+            <Button
+              icon={EllipsisVerticalIcon}
+              mode="bleed"
+              onClick={handleToggleOpen}
+              ref={setButtonElement}
+              selected={open}
+            />
+          </Popover>
+        </Flex>
+      </Card>
+    </Card>
+  )
+}

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -0,0 +1,79 @@
+import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
+import React, {ReactElement, useState} from 'react'
+import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  WORKSHOP_PLACEMENT_OPTIONS,
+  WORKSHOP_RADIUS_OPTIONS,
+} from '../../../__workshop__/constants'
+import {BoundaryElementProvider, PortalProvider} from '../../../utils'
+import {Button} from '../../button'
+import {Card} from '../../card'
+import {Text} from '../../text'
+import {Popover} from '../popover'
+
+export default function TestStory(): ReactElement {
+  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
+  const arrow = useBoolean('Arrow', true)
+  const matchReferenceWidth = useBoolean('Match reference width', false)
+  const open = useBoolean('Open', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const preventOverflow = useBoolean('Prevent overflow', true)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const referenceWide = useBoolean('Reference wide?', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
+
+  const text = useText('Text', 'Test')
+
+  return (
+    <Card
+      ref={setBoundaryElement}
+      shadow={2}
+      style={{
+        position: 'absolute',
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 50,
+      }}
+    >
+      <div
+        data-portal=""
+        ref={setPortalElement}
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          overflow: 'hidden',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <div style={{width: '100%', height: '100%', overflow: 'auto'}}>
+        <div style={{padding: '150vh'}}>
+          <PortalProvider element={portalElement}>
+            <BoundaryElementProvider element={boundaryElement}>
+              <Popover
+                arrow={arrow}
+                content={<Text size={1}>{text}</Text>}
+                fallbackPlacements={['left', 'bottom', 'right', 'top']}
+                matchReferenceWidth={matchReferenceWidth}
+                open={open}
+                padding={3}
+                placement={placement}
+                portal
+                preventOverflow={preventOverflow}
+                radius={radius}
+                width={width}
+              >
+                <Button text="reference" style={{width: referenceWide ? 300 : undefined}} />
+              </Popover>
+            </BoundaryElementProvider>
+          </PortalProvider>
+        </div>
+      </div>
+    </Card>
+  )
+}

package/src/primitives/popover/__workshop__/index.ts

@@ -2,29 +2,34 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope('primitives/popover', 'Popover', [
+  {
+    name: 'test',
+    title: 'Test',
+    component: lazy(() => import('./TestStory')),
+  },
   {
     name: 'plain',
     title: 'Plain',
-    component: lazy(() => import('./plain')),
+    component: lazy(() => import('./PlainStory')),
   },
   {
     name: 'recursive',
     title: 'Recursive',
-    component: lazy(() => import('./recursive')),
+    component: lazy(() => import('./RecursiveStory')),
   },
   {
     name: 'match-ref-width',
     title: 'Match reference width',
-    component: lazy(() => import('./matchReferenceWidth')),
+    component: lazy(() => import('./MatchReferenceWidthStory')),
   },
   {
     name: 'margins',
     title: 'Margins',
-    component: lazy(() => import('./margins')),
+    component: lazy(() => import('./MarginsStory')),
   },
   {
     name: 'right-aligned',
     title: 'Right-aligned',
-    component: lazy(() => import('./rightAligned')),
+    component: lazy(() => import('./RightAlignedStory')),
   },
 ])

package/src/primitives/popover/popover.tsx

@@ -1,8 +1,16 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import React, {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {usePopper} from 'react-popper'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useForwardedRef} from '../../hooks'
+import {useArrayProp, useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {CardTone, Placement, PopoverMargins} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
@@ -71,6 +79,7 @@ const PopoverCard = styled(Card)<
   ResponsiveWidthStyleProps & {
     $constrainSize?: boolean
     $preventOverflow?: boolean
+    $width: (number | 'auto')[]
   }
 >(
   ({$constrainSize}) => css`
@@ -126,7 +135,7 @@ export const Popover = forwardRef(function Popover(
     tether,
     tetherOffset,
     tone = 'inherit',
-    width = 0,
+    width: widthProp = 0,
     zOffset = theme.sanity.layer?.popover.zOffset,
     ...restProps
   } = props
@@ -136,6 +145,7 @@ export const Popover = forwardRef(function Popover(
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null)
   const [arrowElement, setArrowElement] = useState<HTMLElement | null>(null)
   const popperReferenceElement = referenceElementProp || referenceElement
+  const width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp)
 
   const modifiers = usePopoverModifiers({
     allowedAutoPlacements,
@@ -186,14 +196,23 @@ export const Popover = forwardRef(function Popover(
 
   const popoverStyle = useMemo(() => ({...style, ...styles.popper}), [style, styles])
 
+  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate()
-      } catch (_) {
-        // ignore caught error
-      }
+    if (updateTimeoutRef.current) {
+      clearTimeout(updateTimeoutRef.current)
+      updateTimeoutRef.current = null
     }
+
+    updateTimeoutRef.current = setTimeout(() => {
+      if (forceUpdate) {
+        try {
+          forceUpdate()
+        } catch (_) {
+          // ignore caught error
+        }
+      }
+    }, 0)
   }, [content, forceUpdate, open, popperReferenceElement])
 
   if (disabled) {
@@ -212,13 +231,13 @@ export const Popover = forwardRef(function Popover(
     >
       <PopoverCard
         $constrainSize={constrainSize}
+        $width={width}
         data-ui="PopoverCard"
         padding={padding}
         radius={radius}
         scheme={scheme}
         shadow={shadow}
         tone={tone}
-        width={width as any}
       >
         {arrow && <PopoverArrow ref={setArrowElement} style={styles.arrow} />}
         {content}

package/src/primitives/select/select.tsx

@@ -1,7 +1,7 @@
 import {SelectIcon} from '@sanity/icons'
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useForwardedRef, useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'
 import {Text} from '../text'
 import {selectStyle} from './styles'
@@ -20,10 +20,10 @@ export interface SelectProps {
 const Root = styled.div(selectStyle.root)
 
 const Input = styled.select<{
-  $fontSize?: number | number[]
-  $padding?: number | number[]
-  $radius?: number | number[]
-  $space?: number | number[]
+  $fontSize: number[]
+  $padding: number[]
+  $radius: number[]
+  $space: number[]
 }>(selectStyle.input)
 
 const IconBox = styled(Box)(selectStyle.iconBox)
@@ -57,10 +57,10 @@ export const Select = forwardRef(function Select(
         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}
       >