@sanity/ui 0.37.20 → 0.37.21

package/src/primitives/textInput/textInput.tsx

@@ -3,7 +3,7 @@ import React, {createElement, forwardRef, isValidElement, useCallback, useMemo}
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useForwardedRef, useCustomValidity} from '../../hooks'
+import {useForwardedRef, useCustomValidity, useResponsiveProp} from '../../hooks'
 import {
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
@@ -16,7 +16,7 @@ import {
   textInputRepresentationStyle,
   textInputRootStyle,
 } from '../../styles/internal'
-import {ThemeFontWeightKey, useRootTheme} from '../../theme'
+import {ThemeFontWeightKey} from '../../theme'
 import {Box} from '../box'
 import {Button, ButtonProps} from '../button'
 import {Card} from '../card'
@@ -72,7 +72,7 @@ export interface TextInputProps {
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
 
-const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
+const Root = styled.span(textInputRootStyle)
 
 const InputRoot = styled.span`
   flex: 1;
@@ -118,12 +118,6 @@ const LeftBox = styled(Box)`
   left: 0;
 `
 
-const RightBox = styled(Box)`
-  position: absolute;
-  top: 0;
-  right: 0;
-`
-
 const RightCard = styled(Card)`
   background-color: transparent;
   position: absolute;
@@ -142,7 +136,7 @@ export const TextInput = forwardRef(function TextInput(
     border = true,
     clearButton,
     disabled = false,
-    fontSize: fontSizeProp = 2,
+    fontSize = 2,
     icon,
     iconRight,
     onClear,
@@ -150,22 +144,16 @@ export const TextInput = forwardRef(function TextInput(
     prefix,
     radius: radiusProp = 1,
     readOnly,
-    space: spaceProp = 3,
+    space = 3,
     suffix,
     customValidity,
     type = 'text',
-    weight,
     ...restProps
   } = props
 
   const ref = useForwardedRef(forwardedRef)
-
-  const rootTheme = useRootTheme()
-
-  const fontSize = useArrayProp(fontSizeProp)
-  const padding = useArrayProp(paddingProp)
-  const radius = useArrayProp(radiusProp)
-  const space = useArrayProp(spaceProp)
+  const padding = useResponsiveProp(paddingProp)
+  const radius = useResponsiveProp(radiusProp)
 
   // Transient properties
   const $hasClearButton = Boolean(clearButton)
@@ -214,10 +202,6 @@ export const TextInput = forwardRef(function TextInput(
         $hasPrefix={$hasPrefix}
         $hasSuffix={$hasSuffix}
         $radius={radius}
-        $scheme={rootTheme.scheme}
-        $tone={rootTheme.tone}
-        data-scheme={rootTheme.scheme}
-        data-tone={rootTheme.tone}
       >
         {icon && (
           <LeftBox padding={padding}>
@@ -229,27 +213,16 @@ export const TextInput = forwardRef(function TextInput(
         )}
 
         {!$hasClearButton && iconRight && (
-          <RightBox padding={padding}>
+          <RightCard padding={padding}>
             <Text size={fontSize}>
               {isValidElement(iconRight) && iconRight}
               {isValidElementType(iconRight) && createElement(iconRight)}
             </Text>
-          </RightBox>
+          </RightCard>
         )}
       </Presentation>
     ),
-    [
-      border,
-      fontSize,
-      icon,
-      iconRight,
-      padding,
-      radius,
-      rootTheme,
-      $hasClearButton,
-      $hasPrefix,
-      $hasSuffix,
-    ]
+    [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]
   )
 
   // Render clear button (memoized)
@@ -330,33 +303,25 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput" tone={rootTheme.tone}>
+    <Root data-ui="TextInput">
       {prefixNode}
-
       <InputRoot>
         <Input
           data-as="input"
-          data-scheme={rootTheme.scheme}
-          data-tone={rootTheme.tone}
           {...restProps}
-          $fontSize={fontSize}
           $iconLeft={$hasIcon}
           $iconRight={$hasIconRight || $hasClearButton}
           $padding={padding}
-          $scheme={rootTheme.scheme}
           $space={space}
-          $tone={rootTheme.tone}
-          $weight={weight}
+          $fontSize={fontSize}
           disabled={disabled}
           readOnly={readOnly}
           ref={ref}
           type={type}
         />
-
         {presentationNode}
         {clearButtonNode}
       </InputRoot>
-
       {suffixNode}
     </Root>
   )

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

@@ -1,22 +1,17 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
-import {useSelect, useText} from '@sanity/ui-workshop'
 import React from 'react'
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {
-  const content = useText('Content', 'Tooltip content')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
-
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
         <Tooltip
           content={
             <Box padding={2}>
-              <Text size={1}>{content}</Text>
+              <Text size={1}>Tooltip content</Text>
             </Box>
           }
-          placement={placement}
+          placement="top"
           portal
         >
           <Button mode="bleed" text="Hover me" />

package/src/primitives/tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import React, {cloneElement, forwardRef, useCallback, useEffect, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled from 'styled-components'
-import {useArrayProp, useForwardedRef} from '../../hooks'
+import {useForwardedRef} from '../../hooks'
 import {ThemeColorSchemeKey, useTheme} from '../../theme'
 import {Placement} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement} from '../../utils'
@@ -42,14 +42,13 @@ export const Tooltip = forwardRef(function Tooltip(
     children,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp,
+    fallbackPlacements,
     placement = 'bottom',
     portal,
     scheme,
     zOffset = theme.sanity.layer?.tooltip.zOffset,
     ...restProps
   } = props
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const forwardedRef = useForwardedRef(ref)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null)
@@ -118,23 +117,14 @@ export const Tooltip = forwardRef(function Tooltip(
     }
   }, [isOpen, referenceElement])
 
-  const updateTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
   useEffect(() => {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current)
-      updateTimeoutRef.current = null
-    }
-
-    updateTimeoutRef.current = setTimeout(() => {
-      if (forceUpdate) {
-        try {
-          forceUpdate()
-        } catch (_) {
-          // ignore caught error
-        }
+    if (forceUpdate) {
+      try {
+        forceUpdate()
+      } catch (_) {
+        // ignore caught error
       }
-    }, 0)
+    }
   }, [forceUpdate, content])
 
   // Close when `disabled` changes to `true`

package/src/primitives/types.ts

@@ -127,5 +127,5 @@ export interface ResponsiveShadowProps {
  * @public
  */
 export interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
+  width?: number | number[] | 'auto'
 }

package/src/styles/border/borderStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {_responsive} from '../helpers'
+import {getResponsiveProp, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBorderStyleProps} from './types'
 
@@ -15,7 +15,7 @@ function border(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$border, (value) =>
+  return responsive(media, getResponsiveProp(props.$border), (value) =>
     value ? {'&&': {border: BORDER_VALUE}} : {'&&': {border: 0}}
   )
 }
@@ -24,7 +24,7 @@ function borderTop(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$borderTop, (value) =>
+  return responsive(media, getResponsiveProp(props.$borderTop), (value) =>
     value ? {'&&': {borderTop: BORDER_VALUE}} : {'&&': {borderTop: 0}}
   )
 }
@@ -33,7 +33,7 @@ function borderRight(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$borderRight, (value) =>
+  return responsive(media, getResponsiveProp(props.$borderRight), (value) =>
     value ? {'&&': {borderRight: BORDER_VALUE}} : {'&&': {borderRight: 0}}
   )
 }
@@ -42,7 +42,7 @@ function borderBottom(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$borderBottom, (value) =>
+  return responsive(media, getResponsiveProp(props.$borderBottom), (value) =>
     value ? {'&&': {borderBottom: BORDER_VALUE}} : {'&&': {borderBottom: 0}}
   )
 }
@@ -51,7 +51,7 @@ function borderLeft(props: ResponsiveBorderStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$borderLeft, (value) =>
+  return responsive(media, getResponsiveProp(props.$borderLeft), (value) =>
     value ? {'&&': {borderLeft: BORDER_VALUE}} : {'&&': {borderLeft: 0}}
   )
 }

package/src/styles/border/types.ts

@@ -2,9 +2,9 @@
  * @internal
  */
 export interface ResponsiveBorderStyleProps {
-  $border: boolean[]
-  $borderTop: boolean[]
-  $borderRight: boolean[]
-  $borderBottom: boolean[]
-  $borderLeft: boolean[]
+  $border?: boolean | boolean[]
+  $borderTop?: boolean | boolean[]
+  $borderRight?: boolean | boolean[]
+  $borderBottom?: boolean | boolean[]
+  $borderLeft?: boolean | boolean[]
 }

package/src/styles/box/boxStyle.ts

@@ -1,6 +1,6 @@
 import {Property} from 'csstype'
 import {CSSObject} from 'styled-components'
-import {_responsive} from '../helpers'
+import {getResponsiveProp, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveBoxStyleProps} from './types'
 
@@ -39,7 +39,7 @@ function responsiveBoxDisplayStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$display, (display) => ({
+  return responsive(media, getResponsiveProp(props.$display), (display) => ({
     '&:not([hidden])': {display},
   }))
 }
@@ -48,7 +48,7 @@ function responsiveBoxSizingStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$sizing, (sizing) => ({
+  return responsive(media, getResponsiveProp(props.$sizing), (sizing) => ({
     boxSizing: BOX_SIZING[sizing],
   }))
 }
@@ -57,7 +57,7 @@ function responsiveBoxHeightStyle(props: ResponsiveBoxStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$height, (height) => ({
+  return responsive(media, getResponsiveProp(props.$height), (height) => ({
     height: BOX_HEIGHT[height],
   }))
 }
@@ -66,7 +66,7 @@ function responsiveBoxOverflowStyle(props: ResponsiveBoxStyleProps & ThemeProps)
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$overflow, (overflow) => ({
+  return responsive(media, getResponsiveProp(props.$overflow), (overflow) => ({
     overflow,
   }))
 }

package/src/styles/box/types.ts

@@ -4,8 +4,8 @@ import {BoxDisplay, BoxHeight, BoxOverflow, BoxSizing} from '../../types'
  * @internal
  */
 export interface ResponsiveBoxStyleProps {
-  $display: BoxDisplay[]
-  $height: BoxHeight[]
-  $overflow: BoxOverflow[]
-  $sizing: BoxSizing[]
+  $display?: BoxDisplay | BoxDisplay[]
+  $height?: BoxHeight | BoxHeight[]
+  $overflow?: BoxOverflow | BoxOverflow[]
+  $sizing?: BoxSizing | BoxSizing[]
 }

package/src/styles/flex/flexItemStyle.ts

@@ -1,6 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {EMPTY_ARRAY} from '../../constants'
-import {_responsive} from '../helpers'
+import {getResponsiveProp, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexItemStyleProps} from './types'
 
@@ -21,7 +20,7 @@ export function responsiveFlexItemStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  if (!props.$flex) return EMPTY_ARRAY
-
-  return _responsive(media, props.$flex, (flex) => ({flex}))
+  return responsive(media, getResponsiveProp(props.$flex), (flex) => {
+    return {flex}
+  })
 }

package/src/styles/flex/flexStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive} from '../helpers'
+import {getResponsiveProp, rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFlexStyleProps} from './types'
 
@@ -28,7 +28,7 @@ export function responsiveFlexAlignStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$align, (align) => {
+  return responsive(media, getResponsiveProp(props.$align), (align) => {
     return {alignItems: align}
   })
 }
@@ -37,7 +37,7 @@ function responsiveFlexGapStyle(props: ResponsiveFlexStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return _responsive(media, props.$gap, (gap) => ({
+  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
     gap: gap ? rem(space[gap]) : undefined,
   }))
 }
@@ -46,7 +46,7 @@ export function responsiveFlexWrapStyle(props: ResponsiveFlexStyleProps & ThemeP
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$wrap, (wrap) => {
+  return responsive(media, getResponsiveProp(props.$wrap), (wrap) => {
     return {flexWrap: wrap}
   })
 }
@@ -57,7 +57,7 @@ export function responsiveFlexJustifyStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$justify, (justify) => {
+  return responsive(media, getResponsiveProp(props.$justify), (justify) => {
     return {justifyContent: justify}
   })
 }
@@ -68,7 +68,7 @@ export function responsiveFlexDirectionStyle(
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$direction, (direction) => {
+  return responsive(media, getResponsiveProp(props.$direction), (direction) => {
     return {flexDirection: direction}
   })
 }

package/src/styles/flex/types.ts

@@ -4,18 +4,18 @@ import {FlexAlign, FlexDirection, FlexJustify, FlexValue, FlexWrap} from '../../
  * @internal
  */
 export interface ResponsiveFlexStyleProps {
-  $align: FlexAlign[]
-  $direction: FlexDirection[]
-  $gap: number[]
-  $justify: FlexJustify[]
-  $wrap: FlexWrap[]
+  $align?: FlexAlign | FlexAlign[]
+  $direction?: FlexDirection | FlexDirection[]
+  $gap?: number | number[]
+  $justify?: FlexJustify | FlexJustify[]
+  $wrap?: FlexWrap | FlexWrap[]
 }
 
 /**
  * @internal
  */
 export interface ResponsiveFlexItemStyleProps {
-  $flex: FlexValue[]
+  $flex?: FlexValue | FlexValue[]
 }
 
 /**

package/src/styles/font/responsiveFont.ts

@@ -1,6 +1,6 @@
 import {CSSObject} from 'styled-components'
 import {ThemeFontSize, ThemeFontKey} from '../../theme'
-import {rem, _responsive} from '../helpers'
+import {getResponsiveProp, rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveFontStyleProps} from './types'
 
@@ -48,7 +48,9 @@ export function responsiveFont(
     },
   }
 
-  const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
+  const resp = responsive(media, getResponsiveProp($size), (sizeIndex) =>
+    fontSize(sizes[sizeIndex] || defaultSize)
+  )
 
   return [base, ...resp]
 }

package/src/styles/font/textAlignStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {_responsive} from '../helpers'
+import {getResponsiveProp, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveTextAlignStyleProps} from './types'
 
@@ -12,7 +12,7 @@ export function responsiveTextAlignStyle(
 ): CSSObject[] {
   const {theme} = props
 
-  return _responsive(theme.sanity.media, props.$align, (textAlign) => {
+  return responsive(theme.sanity.media, getResponsiveProp(props.$align), (textAlign) => {
     return {textAlign}
   })
 }

package/src/styles/font/types.ts

@@ -5,7 +5,7 @@ import {TextAlign} from '../../types'
  * @internal
  */
 export interface ResponsiveFontSizeStyleProps {
-  $size: number[]
+  $size?: number | number[]
 }
 
 /**
@@ -19,7 +19,7 @@ export interface FontWeightStyleProps {
  * @internal
  */
 export interface ResponsiveTextAlignStyleProps {
-  $align: TextAlign[]
+  $align?: TextAlign | TextAlign[]
 }
 
 /**
@@ -27,8 +27,7 @@ export interface ResponsiveTextAlignStyleProps {
  */
 export interface ResponsiveFontStyleProps
   extends FontWeightStyleProps,
-    ResponsiveFontSizeStyleProps,
-    ResponsiveTextAlignStyleProps {
+    ResponsiveFontSizeStyleProps {
   $accent?: boolean
   $muted?: boolean
 }

package/src/styles/grid/gridItemStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {_responsive} from '../helpers'
+import {getResponsiveProp, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridItemStyleProps} from './types'
 
@@ -30,7 +30,7 @@ function responsiveGridItemRowStyle(props: ResponsiveGridItemStyleProps & ThemeP
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$row, (row) => {
+  return responsive(media, getResponsiveProp(props.$row), (row) => {
     if (typeof row === 'number') {
       return {gridRow: `span ${row} / span ${row}`}
     }
@@ -43,7 +43,7 @@ function responsiveGridItemRowStartStyle(props: ResponsiveGridItemStyleProps & T
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$rowStart, (rowStart) => ({
+  return responsive(media, getResponsiveProp(props.$rowStart), (rowStart) => ({
     gridRowStart: rowStart,
   }))
 }
@@ -52,14 +52,14 @@ function responsiveGridItemRowEndStyle(props: ResponsiveGridItemStyleProps & The
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({gridRowEnd: rowEnd}))
+  return responsive(media, getResponsiveProp(props.$rowEnd), (rowEnd) => ({gridRowEnd: rowEnd}))
 }
 
 function responsiveGridItemColumnStyle(props: ResponsiveGridItemStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$column, (column) => {
+  return responsive(media, getResponsiveProp(props.$column), (column) => {
     if (typeof column === 'number') {
       return {gridColumn: `span ${column} / span ${column}`}
     }
@@ -72,7 +72,7 @@ function responsiveGridItemColumnStartStyle(props: ResponsiveGridItemStyleProps
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$columnStart, (columnStart) => ({
+  return responsive(media, getResponsiveProp(props.$columnStart), (columnStart) => ({
     gridColumnStart: columnStart,
   }))
 }
@@ -81,7 +81,7 @@ function responsiveGridItemColumnEndStyle(props: ResponsiveGridItemStyleProps &
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$columnEnd, (columnEnd) => ({
+  return responsive(media, getResponsiveProp(props.$columnEnd), (columnEnd) => ({
     gridColumnEnd: columnEnd,
   }))
 }

package/src/styles/grid/gridStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive} from '../helpers'
+import {getResponsiveProp, rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveGridStyleProps} from './types'
 
@@ -46,7 +46,7 @@ function responsiveGridAutoFlowStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$autoFlow, (autoFlow) => ({
+  return responsive(media, getResponsiveProp(props.$autoFlow), (autoFlow) => ({
     gridAutoFlow: autoFlow,
   }))
 }
@@ -55,7 +55,7 @@ function responsiveGridAutoRowsStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$autoRows, (autoRows) => ({
+  return responsive(media, getResponsiveProp(props.$autoRows), (autoRows) => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows],
   }))
 }
@@ -64,7 +64,7 @@ function responsiveGridAutoColsStyle(props: ResponsiveGridStyleProps & ThemeProp
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$autoCols, (autoCols) => ({
+  return responsive(media, getResponsiveProp(props.$autoCols), (autoCols) => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols],
   }))
 }
@@ -73,7 +73,7 @@ function responsiveGridColumnsStyle(props: ResponsiveGridStyleProps & ThemeProps
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$columns, (columns) => ({
+  return responsive(media, getResponsiveProp(props.$columns), (columns) => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`,
   }))
 }
@@ -82,7 +82,7 @@ function responsiveGridRowsStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media} = theme.sanity
 
-  return _responsive(media, props.$rows, (rows) => ({
+  return responsive(media, getResponsiveProp(props.$rows), (rows) => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`,
   }))
 }
@@ -91,7 +91,7 @@ function responsiveGridGapStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return _responsive(media, props.$gap, (gap) => ({
+  return responsive(media, getResponsiveProp(props.$gap), (gap) => ({
     gridGap: gap ? rem(space[gap]) : undefined,
   }))
 }
@@ -100,7 +100,7 @@ function responsiveGridGapXStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return _responsive(media, props.$gapX, (gapX) => ({
+  return responsive(media, getResponsiveProp(props.$gapX), (gapX) => ({
     columnGap: gapX ? rem(space[gapX]) : undefined,
   }))
 }
@@ -109,7 +109,7 @@ function responsiveGridGapYStyle(props: ResponsiveGridStyleProps & ThemeProps) {
   const {theme} = props
   const {media, space} = theme.sanity
 
-  return _responsive(media, props.$gapY, (gapY) => ({
+  return responsive(media, getResponsiveProp(props.$gapY), (gapY) => ({
     rowGap: gapY ? rem(space[gapY]) : undefined,
   }))
 }