@sanity/ui 2.3.7-canary.0 → 2.5.0

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

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

package/src/core/components/toast/styles.ts

@@ -0,0 +1,61 @@
+import {styled, keyframes, css} from 'styled-components'
+import {ThemeColorStateToneKey, getTheme_v2} from '../../../theme'
+import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
+import {Flex} from '../../primitives'
+import {ThemeProps} from '../../styles'
+
+export const TextBox = styled(Flex)`
+  overflow-x: auto;
+`
+
+const loadingAnimation = keyframes`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  } 
+`
+
+const LOADING_BAR_HEIGHT = 2
+
+export function rootStyles(
+  props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,
+): ReturnType<typeof css> {
+  const {color} = getTheme_v2(props.theme)
+
+  const loadingBarColor = color.button.default[props.tone].enabled.bg
+
+  if (!props.$duration)
+    return css`
+      pointer-events: all;
+      & > * {
+        opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        will-change: opacity;
+      }
+    `
+
+  return css`
+    pointer-events: all;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    overflow: clip;
+    padding-bottom: ${LOADING_BAR_HEIGHT}px;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      height: ${LOADING_BAR_HEIGHT}px;
+      background: ${loadingBarColor};
+      animation-name: ${loadingAnimation};
+      animation-duration: ${props.$duration}ms;
+      animation-fill-mode: both;
+    }
+
+    & > * {
+      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+      will-change: opacity;
+    }
+  `
+}

package/src/core/components/toast/toast.tsx

@@ -1,9 +1,10 @@
 import {CloseIcon} from '@sanity/icons'
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {styled} from 'styled-components'
-import {POPOVER_MOTION_CONTENT_OPACITY_PROPERTY} from '../../constants'
-import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
+import {Box, Button, Flex, Stack, Text, Card} from '../../primitives'
+import {ThemeProps} from '../../styles'
 import type {ButtonTone} from '../../types'
+import {rootStyles, TextBox} from './styles'
 
 /**
  * @public
@@ -15,9 +16,10 @@ export interface ToastProps {
   radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
 }
 
-const STATUS_CARD_TONE: {[key: string]: ThemeColorToneKey} = {
+const STATUS_CARD_TONE: {[key: string]: ThemeColorStateToneKey} = {
   error: 'critical',
   warning: 'caution',
   success: 'positive',
@@ -38,17 +40,9 @@ const ROLES = {
   info: 'alert',
 } as const
 
-const Root = styled(Card)`
-  pointer-events: all;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`
-
-const TextBox = styled(Flex)`
-  overflow-x: auto;
-`
+const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
+  rootStyles,
+)
 
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
@@ -60,7 +54,7 @@ const TextBox = styled(Flex)`
 export function Toast(
   props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
 ): React.ReactElement {
-  const {closable, description, onClose, radius = 3, title, status, ...restProps} = props
+  const {closable, description, duration, onClose, radius = 3, title, status, ...restProps} = props
   const cardTone = status ? STATUS_CARD_TONE[status] : 'default'
   const buttonTone = status ? BUTTON_TONE[status] : 'default'
   const role = status ? ROLES[status] : 'status'
@@ -74,6 +68,7 @@ export function Toast(
       radius={radius}
       shadow={2}
       tone={cardTone}
+      $duration={duration}
     >
       <Flex align="flex-start">
         <TextBox flex={1} padding={3}>

package/src/core/components/toast/toastProvider.tsx

@@ -45,6 +45,8 @@ const ToastContainer = styled.div`
   width: 100%;
 `
 
+let toastId = 0
+
 /**
  * @public
  */
@@ -55,7 +57,27 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
   const mounted = useMounted()
   const prefersReducedMotion = usePrefersReducedMotion()
   const variants = useMemo<Variants>(
-    () => getVariants(prefersReducedMotion),
+    () => ({
+      initial: {
+        opacity: 0,
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
+        y: 32,
+        scale: 0.25,
+        willChange: 'transform',
+      },
+      animate: {
+        opacity: [0, 1, 1],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
+        y: 0,
+        scale: 1,
+      },
+      exit: {
+        opacity: [1, 1, 0],
+        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
+        scale: 0.5,
+        transition: prefersReducedMotion ? {duration: 0} : {duration: 0.2},
+      },
+    }),
     [prefersReducedMotion],
   )
 
@@ -64,7 +86,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
       // Wrap setState in startTransition to allow React to give input state updates higher priority
       const setState: typeof _setState = (state) => startTransition(() => _setState(state))
 
-      const id = params.id || crypto.randomUUID()
+      const id = params.id || String(toastId++)
       const duration = params.duration || 5000
 
       const dismiss = () => {
@@ -155,6 +177,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
                       onClose={dismiss}
                       status={params.status}
                       title={params.title}
+                      duration={params.duration}
                     />
                   </motion.div>
                 ))}
@@ -166,27 +189,3 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement {
     </ToastContext.Provider>
   )
 }
-
-function getVariants(prefersReducedMotion: boolean) {
-  return {
-    initial: {
-      opacity: 0,
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: 0,
-      y: 32,
-      scale: 0.25,
-      willChange: 'transform',
-    },
-    animate: {
-      opacity: [0, 1, 1],
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [0, 0, 1],
-      y: 0,
-      scale: 1,
-    },
-    exit: {
-      opacity: [1, 1, 0],
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY as string]: [1, 0, 0],
-      scale: 0.5,
-      transition: {duration: prefersReducedMotion ? 0 : 0.2},
-    },
-  }
-}

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

@@ -1,10 +1,16 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import {styled} from 'styled-components'
 import {Box, BoxProps, Flex, Text} from '../../primitives'
+import {
+  treeItemRootStyle,
+  treeItemRootColorStyle,
+  treeItemBoxStyle,
+  TreeItemBoxStyleProps,
+} from './style'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
-import {Root, ToggleArrowText, TreeItemBox} from './treeItem.styles'
 import {useTree} from './useTree'
 
 /**
@@ -24,6 +30,16 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
+const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+
+const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
+
+const ToggleArrowText = styled(Text)`
+  & > svg {
+    transition: transform 100ms;
+  }
+`
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -54,7 +70,7 @@ export const TreeItem = memo(function TreeItem(
   const {path, registerItem, setExpanded, setFocusedElement} = tree
   const _id = useId()
   const id = idProp || _id
-  const itemPath = useMemo(() => [...path, id || ''], [id, path])
+  const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
   const focused = tree.focusedElement === rootRef.current
@@ -67,7 +83,7 @@ export const TreeItem = memo(function TreeItem(
 
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {
-      onClick?.(event)
+      if (onClick) onClick(event)
 
       const target = event.target
 
@@ -101,35 +117,32 @@ export const TreeItem = memo(function TreeItem(
     return registerItem(rootRef.current, itemPath.join('/'), expanded, selected)
   }, [expanded, itemPath, registerItem, selected])
 
-  const content = useMemo(
-    () => (
-      <Flex padding={padding}>
-        <Box
-          marginRight={space}
-          style={{
-            visibility: IconComponent || children ? 'visible' : 'hidden',
-            pointerEvents: 'none',
-          }}
-        >
-          {IconComponent && (
-            <Text muted={muted} size={fontSize} weight={weight}>
-              <IconComponent />
-            </Text>
-          )}
-          {!IconComponent && (
-            <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
-              <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
-            </ToggleArrowText>
-          )}
-        </Box>
-        <Box flex={1}>
-          <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
-            {text}
+  const content = (
+    <Flex padding={padding}>
+      <Box
+        marginRight={space}
+        style={{
+          visibility: IconComponent || children ? 'visible' : 'hidden',
+          pointerEvents: 'none',
+        }}
+      >
+        {IconComponent && (
+          <Text muted={muted} size={fontSize} weight={weight}>
+            <IconComponent />
           </Text>
-        </Box>
-      </Flex>
-    ),
-    [IconComponent, children, expanded, fontSize, muted, padding, space, text, weight],
+        )}
+        {!IconComponent && (
+          <ToggleArrowText muted={muted} size={fontSize} weight={weight}>
+            <ToggleArrowRightIcon style={{transform: expanded ? 'rotate(90deg)' : undefined}} />
+          </ToggleArrowText>
+        )}
+      </Box>
+      <Box flex={1}>
+        <Text muted={muted} size={fontSize} textOverflow="ellipsis" weight={weight}>
+          {text}
+        </Text>
+      </Box>
+    </Flex>
   )
 
   if (href) {

package/src/core/hooks/useArrayProp.ts

@@ -7,20 +7,19 @@ 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[] {
-  return useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val])
+  // 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__],
+  )
 }

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

@@ -1,8 +1,8 @@
 import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-import {forwardRef, useCallback, useEffect, useId, useState} from 'react'
-import {isValidElementType} from 'react-is'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import ReactIs from 'react-is'
 import {styled} from 'styled-components'
-import {_getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
 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 = isValidElementType(asProp) ? asProp : 'div'
-  const size = _getArrayProp(sizeProp)
+  const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
+  const size = useArrayProp(sizeProp)
 
   // @todo: remove this
   const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0]
@@ -111,13 +111,17 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = size.map((s) => {
-    if (s === 1) return 1
-    if (s === 2) return 3
-    if (s === 3) return 5
+  const initialsSize = useMemo(
+    () =>
+      size.map((s) => {
+        if (s === 1) return 1
+        if (s === 2) return 3
+        if (s === 3) return 5
 
-    return 0
-  })
+        return 0
+      }),
+    [size],
+  )
 
   return (
     <Root

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

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

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

@@ -2,7 +2,8 @@ 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 {rem, _responsive, ThemeProps, _getArrayProp} from '../../styles'
+import {useArrayProp} from '../../hooks'
+import {rem, _responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {AvatarCounter} from './avatarCounter'
 
@@ -64,9 +65,12 @@ export const AvatarStack = forwardRef(function AvatarStack(
     size: sizeProp = 1,
     ...restProps
   } = props
-  const children: React.ReactElement[] = Children.toArray(childrenProp).filter(isValidElement)
+  const children = useMemo<React.ReactElement[]>(
+    () => Children.toArray(childrenProp).filter(isValidElement),
+    [childrenProp],
+  )
   const maxLength = Math.max(maxLengthProp, 0)
-  const size = useMemo(() => _getArrayProp(sizeProp), [sizeProp])
+  const size = useArrayProp(sizeProp)
 
   const len = children.length
   const visibleCount = maxLength - 1

package/src/core/primitives/badge/badge.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 {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -45,16 +45,13 @@ 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={$radius}
-      padding={$padding}
+      $radius={useArrayProp(radius)}
+      padding={useArrayProp(padding)}
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>

package/src/core/primitives/box/box.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 {
   boxStyle,
   flexItemStyle,
@@ -90,62 +90,36 @@ 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={$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}
+      $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)}
       as={asProp}
       ref={ref}
     >