@sanity/ui 0.37.20 → 0.37.21

package/src/primitives/avatar/avatar.tsx

@@ -1,8 +1,8 @@
 import {useId} from '@reach/auto-id'
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import React, {forwardRef, useCallback, useEffect, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
+import {useResponsiveProp} from '../../hooks'
 import {ThemeColorSpotKey, useTheme} from '../../theme'
 import {AvatarPosition, AvatarSize, AvatarStatus} from '../../types'
 import {Text} from '../text'
@@ -58,11 +58,11 @@ export const Avatar = forwardRef(function Avatar(
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp = 0,
+    size: sizeProp,
     ...restProps
   } = props
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div'
-  const size = useArrayProp(sizeProp)
+  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
   const theme = useTheme()
   const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray
 
@@ -101,8 +101,6 @@ export const Avatar = forwardRef(function Avatar(
     }
   }, [onImageLoadError])
 
-  const initialsSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
-
   return (
     <Root
       as={as}
@@ -156,7 +154,7 @@ export const Avatar = forwardRef(function Avatar(
       {(imageFailed || !src) && initials && (
         <>
           <Initials>
-            <Text as="span" size={initialsSize}>
+            <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
               <strong>{initials}</strong>
             </Text>
           </Initials>

package/src/primitives/avatar/avatarCounter.tsx

@@ -1,16 +1,16 @@
-import React, {forwardRef, useMemo} from 'react'
+import React, {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {useResponsiveProp} from '../../hooks'
+import {rem, responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {Text} from '../text'
 
-function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+function responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return _responsive(media, props.$size, (size) => {
+  return responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size]
 
     if (!avatarSize) return EMPTY_RECORD
@@ -23,7 +23,7 @@ function _responsiveAvatarCounterSizeStyle(props: {$size: AvatarSize[]} & ThemeP
   })
 }
 
-function _avatarCounterBaseStyle(props: ThemeProps) {
+function avatarCounterBaseStyle(props: ThemeProps) {
   const {theme} = props
 
   return css`
@@ -44,8 +44,8 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
 }
 
 const Root = styled.div<{$size: AvatarSize[]}>(
-  _responsiveAvatarCounterSizeStyle,
-  _avatarCounterBaseStyle
+  responsiveAvatarCounterSizeStyle,
+  avatarCounterBaseStyle
 )
 
 /**
@@ -66,12 +66,11 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   ref: React.Ref<HTMLDivElement>
 ) {
   const {count, size: sizeProp = 0} = props
-  const size = useArrayProp(sizeProp)
-  const counterSize = useMemo(() => size.map((s) => (s === 0 ? 0 : s + 1)), [size])
+  const size: AvatarSize[] = useResponsiveProp(sizeProp, [0])
 
   return (
-    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
-      <Text as="span" size={counterSize}>
+    <Root $size={size} ref={ref}>
+      <Text as="span" size={size.map((s) => (s === 0 ? 0 : s + 1))}>
         <strong>{count}</strong>
       </Text>
     </Root>

package/src/primitives/avatar/avatarStack.tsx

@@ -1,8 +1,7 @@
 import React, {cloneElement, forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp} from '../../hooks'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
 import {AvatarSize} from '../../types'
 import {childrenToElementArray} from '../helpers'
 import {AvatarCounter} from './avatarCounter'
@@ -23,11 +22,11 @@ function avatarStackStyle() {
   return BASE_STYLES
 }
 
-function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProps) {
+function responsiveAvatarStackSizeStyle(props: {size: AvatarSize | AvatarSize[]} & ThemeProps) {
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return _responsive(media, props.$size, (size) => {
+  return responsive(media, getResponsiveProp(props.size), (size) => {
     const avatarSize = avatar.sizes[size]
 
     if (!avatarSize) return EMPTY_RECORD
@@ -40,7 +39,10 @@ function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProp
   })
 }
 
-const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
+const Root = styled.div<{size: AvatarSize | AvatarSize[]}>(
+  responsiveAvatarStackSizeStyle,
+  avatarStackStyle
+)
 
 /**
  * @public
@@ -60,25 +62,18 @@ export const AvatarStack = forwardRef(function AvatarStack(
   props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'ref'>,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
-  const {
-    children: childrenProp,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 0,
-    ...restProps
-  } = props
+  const {children: childrenProp, maxLength: maxLengthProp = 4, size = 0, tone, ...restProps} = props
+  const maxLength = Math.max(maxLengthProp, 0)
   const children = childrenToElementArray(childrenProp).filter(
     (child) => typeof child !== 'string'
   ) as React.ReactElement[]
-  const maxLength = Math.max(maxLengthProp, 0)
-  const size = useArrayProp(sizeProp)
-
   const len = children.length
   const visibleCount = maxLength - 1
   const extraCount = len - visibleCount
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
 
   return (
-    <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
+    <Root data-ui="AvatarStack" {...restProps} ref={ref} size={size}>
       {len === 0 && (
         <div>
           <AvatarCounter count={len} />

package/src/primitives/avatar/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, responsive, ThemeProps} from '../../styles'
 import {focusRingStyle} from '../../styles/internal'
 import {AvatarRootStyleProps, ResponsiveAvatarSizeStyleProps} from './types'
 
@@ -103,7 +103,7 @@ export function responsiveAvatarSizeStyle(
   const {theme} = props
   const {avatar, media} = theme.sanity
 
-  return _responsive(media, props.$size, (size) => {
+  return responsive(media, props.$size, (size) => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0]
 
     return {

package/src/primitives/badge/badge.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {BadgeMode, BadgeTone} from '../../types'
 import {Box, BoxProps} from '../box'
@@ -47,8 +46,8 @@ export const Badge = forwardRef(function Badge(
       {...restProps}
       $mode={mode}
       $tone={tone}
-      $radius={useArrayProp(radius)}
-      padding={useArrayProp(padding)}
+      $radius={radius}
+      padding={padding}
       ref={ref}
     >
       <Label size={fontSize}>{children}</Label>

package/src/primitives/box/box.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {
   boxStyle,
   flexItemStyle,
@@ -91,31 +90,31 @@ export const Box = forwardRef(function Box(
       data-as={typeof asProp === 'string' ? asProp : undefined}
       data-ui="Box"
       {...restProps}
-      $column={useArrayProp(column)}
-      $columnStart={useArrayProp(columnStart)}
-      $columnEnd={useArrayProp(columnEnd)}
-      $display={useArrayProp(display)}
-      $flex={useArrayProp(flex)}
-      $height={useArrayProp(height)}
-      $margin={useArrayProp(margin)}
-      $marginX={useArrayProp(marginX)}
-      $marginY={useArrayProp(marginY)}
-      $marginTop={useArrayProp(marginTop)}
-      $marginRight={useArrayProp(marginRight)}
-      $marginBottom={useArrayProp(marginBottom)}
-      $marginLeft={useArrayProp(marginLeft)}
-      $overflow={useArrayProp(overflow)}
-      $padding={useArrayProp(padding)}
-      $paddingX={useArrayProp(paddingX)}
-      $paddingY={useArrayProp(paddingY)}
-      $paddingTop={useArrayProp(paddingTop)}
-      $paddingRight={useArrayProp(paddingRight)}
-      $paddingBottom={useArrayProp(paddingBottom)}
-      $paddingLeft={useArrayProp(paddingLeft)}
-      $row={useArrayProp(row)}
-      $rowStart={useArrayProp(rowStart)}
-      $rowEnd={useArrayProp(rowEnd)}
-      $sizing={useArrayProp(sizing)}
+      $column={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/primitives/button/button.tsx

@@ -1,7 +1,6 @@
 import React, {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {ThemeProps} from '../../styles'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {useTheme} from '../../theme'
@@ -67,19 +66,19 @@ export const Button = forwardRef(function Button(
     fontSize,
     icon,
     iconRight,
-    justify: justifyProp = 'center',
+    justify = 'center',
     loading,
     mode = 'default',
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
+    padding = 3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    radius = 2,
     selected,
-    space: spaceProp = 3,
+    space = 3,
     text,
     textAlign,
     tone = 'default',
@@ -87,17 +86,6 @@ export const Button = forwardRef(function Button(
     ...restProps
   } = props
 
-  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 theme = useTheme()
 
   const boxProps = useMemo(

package/src/primitives/card/card.tsx

@@ -1,7 +1,6 @@
 import React, {forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {
   responsiveBorderStyle,
   ResponsiveBorderStyleProps,
@@ -84,15 +83,15 @@ 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}
         $checkered={checkered}
         $focusRing={focusRing}
-        $radius={useArrayProp(radius)}
-        $shadow={useArrayProp(shadow)}
+        $radius={radius}
+        $shadow={shadow}
         $tone={tone}
         data-checkered={checkered ? '' : undefined}
         data-pressed={pressed ? '' : undefined}

package/src/primitives/checkbox/__workshop__/example.tsx

@@ -14,10 +14,8 @@ export default function ExampleStory() {
           indeterminate={indeterminate}
           onChange={handleChange}
         />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
+        <Box marginLeft={3}>
+          <Text>Label</Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/checkbox/__workshop__/props.tsx

@@ -23,10 +23,8 @@ export default function PropsStory() {
           onBlur={onBlur}
           readOnly={readOnly}
         />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
+        <Box marginLeft={3}>
+          <Text>Label</Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/checkbox/__workshop__/readOnly.tsx

@@ -6,10 +6,8 @@ export default function ReadOnlyStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Flex align="center" as="label">
         <Checkbox id="checkbox-example" readOnly />
-        <Box marginLeft={2}>
-          <Text size={1} weight="semibold">
-            Toggle
-          </Text>
+        <Box marginLeft={3}>
+          <Text>Label</Text>
         </Box>
       </Flex>
     </Flex>

package/src/primitives/code/__workshop__/props.tsx

@@ -9,7 +9,7 @@ import {
 export default function PropsStory() {
   const code = useText('Code', `console.log('Hello, world')`, 'Props')
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, undefined, 'Props')
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/primitives/code/code.tsx

@@ -1,7 +1,6 @@
 import React, {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {responsiveCodeFontStyle, ResponsiveFontStyleProps} from '../../styles/internal'
 import {codeBaseStyle} from './styles'
 
@@ -29,7 +28,7 @@ export const Code = forwardRef(function Code(
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   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>

package/src/primitives/container/container.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'
 import {ResponsiveWidthProps} from '../types'
 import {containerBaseStyle, responsiveContainerWidthStyle} from './styles'
@@ -25,13 +24,5 @@ export const Container = forwardRef(function Container(
 ) {
   const {as, width = 2, ...restProps} = props
 
-  return (
-    <Root
-      data-ui="Container"
-      {...restProps}
-      $width={useArrayProp(width)}
-      forwardedAs={as}
-      ref={ref}
-    />
-  )
+  return <Root data-ui="Container" {...restProps} $width={width} forwardedAs={as} ref={ref} />
 })

package/src/primitives/container/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {getResponsiveProp, rem, responsive, ThemeProps} from '../../styles'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {
@@ -17,7 +17,7 @@ export function responsiveContainerWidthStyle(
   const {theme} = props
   const {container, media} = theme.sanity
 
-  return _responsive(media, props.$width, (val) => ({
+  return responsive(media, getResponsiveProp(props.$width), (val) => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val]),
   }))
 }

package/src/primitives/container/types.ts

@@ -2,5 +2,5 @@
  * @internal
  */
 export interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
+  $width?: number | number[] | 'auto'
 }

package/src/primitives/flex/flex.tsx

@@ -1,6 +1,5 @@
 import React, {forwardRef} from 'react'
 import styled from 'styled-components'
-import {useArrayProp} from '../../hooks'
 import {
   flexItemStyle,
   FlexItemStyleProps,
@@ -38,11 +37,11 @@ export const Flex = forwardRef(function Flex(
     <Root
       data-ui="Flex"
       {...restProps}
-      $align={useArrayProp(align)}
-      $direction={useArrayProp(direction)}
-      $gap={useArrayProp(gap)}
-      $justify={useArrayProp(justify)}
-      $wrap={useArrayProp(wrap)}
+      $align={align}
+      $direction={direction}
+      $gap={gap}
+      $justify={justify}
+      $wrap={wrap}
       forwardedAs={as}
       ref={ref}
     />

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

@@ -10,42 +10,41 @@ 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 padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>1</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>2</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>3</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>4</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>5</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>6</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>7</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>8</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>9</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>10</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>11</Code>
           </Card>
-          <Card padding={[1, 2, 3]} tone="transparent">
+          <Card tone="transparent">
             <Code>12</Code>
           </Card>
         </Grid>

package/src/primitives/grid/grid.tsx

@@ -1,6 +1,5 @@
 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'
@@ -27,14 +26,14 @@ export const Grid = forwardRef(function Grid(
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
+      $autoRows={autoRows}
+      $autoCols={autoCols}
+      $autoFlow={autoFlow}
+      $columns={columns}
+      $gap={gap}
+      $gapX={gapX}
+      $gapY={gapY}
+      $rows={rows}
       forwardedAs={as}
       ref={ref}
     >

package/src/primitives/heading/__workshop__/opticalAlignment.tsx

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

package/src/primitives/heading/heading.tsx

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