@sanity/ui 0.37.20 → 0.37.21

package/src/styles/grid/types.ts

@@ -14,24 +14,24 @@ import {
  * @internal
  */
 export interface ResponsiveGridStyleProps {
-  $autoRows: GridAutoRows[]
-  $autoCols: GridAutoCols[]
-  $autoFlow: GridAutoFlow[]
-  $columns: number[]
-  $gap: number[]
-  $gapX: number[]
-  $gapY: number[]
-  $rows: number[]
+  $autoRows?: GridAutoRows | GridAutoRows[]
+  $autoCols?: GridAutoCols | GridAutoCols[]
+  $autoFlow?: GridAutoFlow | GridAutoFlow[]
+  $columns?: number | number[]
+  $gap?: number | number[]
+  $gapX?: number | number[]
+  $gapY?: number | number[]
+  $rows?: number | number[]
 }
 
 /**
  * @internal
  */
 export interface ResponsiveGridItemStyleProps {
-  $column: GridItemColumn[]
-  $columnStart: GridItemColumnStart[]
-  $columnEnd: GridItemColumnEnd[]
-  $row: GridItemRow[]
-  $rowStart: GridItemRowStart[]
-  $rowEnd: GridItemRowEnd[]
+  $column?: GridItemColumn | GridItemColumn[]
+  $columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  $columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  $row?: GridItemRow | GridItemRow[]
+  $rowStart?: GridItemRowStart | GridItemRowStart[]
+  $rowEnd?: GridItemRowEnd | GridItemRowEnd[]
 }

package/src/styles/helpers.ts

@@ -5,11 +5,11 @@ import {Theme} from '../theme'
 /**
  * @internal
  */
-export function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject {
-  return keys.reduce<CSSObject>((style, key) => {
-    style[key] = value
+export function fillCSSObject(propKeys: string[], value: unknown): CSSObject {
+  return propKeys.reduce((obj: CSSObject, propKey) => {
+    obj[propKey] = value as any
 
-    return style
+    return obj
   }, {})
 }
 
@@ -25,7 +25,7 @@ export function rem(pixelValue: number): string | 0 {
 /**
  * @internal
  */
-export function _responsive<T>(
+export function responsive<T>(
   media: number[],
   values: T[],
   callback: (value: T, index: number, array: T[]) => CSSObject
@@ -42,7 +42,7 @@ export function _responsive<T>(
 /**
  * @internal
  */
-export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
+export function getResponsiveProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[] {
   if (val === undefined) return defaultVal || EMPTY_ARRAY
 
   return Array.isArray(val) ? val : [val]
@@ -51,7 +51,7 @@ export function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?:
 /**
  * @internal
  */
-export function _getResponsiveSpace(
+export function getResponsiveSpace(
   theme: Theme,
   props: string[],
   spaceIndexes: number[] = EMPTY_ARRAY
@@ -64,7 +64,7 @@ export function _getResponsiveSpace(
     return null
   }
 
-  return _responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
-    _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
+  return responsive(theme.sanity.media, spaceIndexes, (spaceIndex) =>
+    fillCSSObject(props, rem(theme.sanity.space[spaceIndex]))
   )
 }

package/src/styles/input/responsiveInputPaddingStyle.ts

@@ -1,41 +1,44 @@
 import {CSSObject} from 'styled-components'
-import {rem, _responsive} from '../helpers'
+import {getResponsiveProp, rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 
 export interface TextInputResponsivePaddingStyleProps {
-  $fontSize: number[]
+  $fontSize?: number | number[]
   $iconLeft?: boolean
   $iconRight?: boolean
-  $padding: number[]
-  $space: number[]
+  $padding?: number | number[]
+  $space?: number | number[]
 }
 
 export function responsiveInputPaddingStyle(
   props: TextInputResponsivePaddingStyleProps & ThemeProps
 ): CSSObject[] {
-  const {$fontSize, $iconLeft, $iconRight, $padding, $space, theme} = props
+  const {$iconLeft, $iconRight, theme} = props
   const {fonts, media, space: spaceScale} = theme.sanity
-  const len = Math.max($padding.length, $space.length, $fontSize.length)
+  const padding = getResponsiveProp(props.$padding, [0])
+  const space = getResponsiveProp(props.$space, [0])
+  const size = getResponsiveProp(props.$fontSize, [0])
+  const len = Math.max(padding.length, space.length, size.length)
   const _padding: number[] = []
   const _space: number[] = []
-  const _fontSize: number[] = []
+  const _size: number[] = []
 
   for (let i = 0; i < len; i += 1) {
-    _fontSize[i] = $fontSize[i] === undefined ? _fontSize[i - 1] : $fontSize[i]
-    _padding[i] = $padding[i] === undefined ? _padding[i - 1] : $padding[i]
-    _space[i] = $space[i] === undefined ? _space[i - 1] : $space[i]
+    _padding[i] = padding[i] === undefined ? _padding[i - 1] : padding[i]
+    _space[i] = space[i] === undefined ? _space[i - 1] : space[i]
+    _size[i] = size[i] === undefined ? _size[i - 1] : size[i]
   }
 
-  return _responsive(media, _padding, (_, i) => {
-    const size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2]
-    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight
+  return responsive(media, _padding, (_, i) => {
+    const fontSize = fonts.text.sizes[_size[i]] || fonts.text.sizes[2]
+    const emSize = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
     const p = spaceScale[_padding[i]]
     const s = spaceScale[_space[i]]
 
     const styles = {
-      paddingTop: rem(p - size.ascenderHeight),
+      paddingTop: rem(p - fontSize.ascenderHeight),
       paddingRight: rem(p),
-      paddingBottom: rem(p - size.descenderHeight),
+      paddingBottom: rem(p - fontSize.descenderHeight),
       paddingLeft: rem(p),
     }
 
@@ -48,9 +51,9 @@ export function responsiveInputPaddingStyle(
 
 export function responsiveInputPaddingIconsStyle(
   props: {
-    $fontSize: number[]
-    $padding: number[]
-    $space: number[]
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
   } & ThemeProps
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconLeft: true, $iconRight: true})
@@ -58,9 +61,9 @@ export function responsiveInputPaddingIconsStyle(
 
 export function responsiveInputPaddingIconLeftStyle(
   props: {
-    $fontSize: number[]
-    $padding: number[]
-    $space: number[]
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
   } & ThemeProps
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconLeft: true})
@@ -68,9 +71,9 @@ export function responsiveInputPaddingIconLeftStyle(
 
 export function responsiveInputPaddingIconRightStyle(
   props: {
-    $fontSize: number[]
-    $padding: number[]
-    $space: number[]
+    padding?: number | number[]
+    size?: number | number[]
+    space?: number | number[]
   } & ThemeProps
 ): CSSObject[] {
   return responsiveInputPaddingStyle({...props, $iconRight: true})

package/src/styles/input/textInputStyle.ts

@@ -1,17 +1,14 @@
 import {css, CSSObject, FlattenSimpleInterpolation} from 'styled-components'
-import {ThemeColorSchemeKey, ThemeFontWeightKey} from '../../theme'
-import {CardTone} from '../../types'
+import {ThemeFontWeightKey} from '../../theme'
 import {focusRingBorderStyle, focusRingStyle} from '../focusRing'
-import {rem, _responsive} from '../helpers'
+import {getResponsiveProp, rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 
 /**
  * @internal
  */
 export interface TextInputInputStyleProps {
-  $fontSize: number[]
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
+  $fontSize?: number | number[]
   $weight?: ThemeFontWeightKey
 }
 
@@ -22,8 +19,6 @@ export interface TextInputRepresentationStyleProps {
   $border?: boolean
   $hasPrefix?: boolean
   $hasSuffix?: boolean
-  $scheme: ThemeColorSchemeKey
-  $tone: CardTone
 }
 
 const ROOT_STYLE = css`
@@ -41,11 +36,14 @@ export function textInputRootStyle(): FlattenSimpleInterpolation {
 export function textInputBaseStyle(
   props: TextInputInputStyleProps & ThemeProps
 ): FlattenSimpleInterpolation {
-  const {theme, $scheme, $tone, $weight} = props
+  const {theme, $weight} = props
   const font = theme.sanity.fonts.text
   const color = theme.sanity.color.input
 
   return css`
+    --input-fg-color: ${color.default.enabled.fg};
+    --input-placeholder-color: ${color.default.enabled.placeholder};
+
     appearance: none;
     background: none;
     border: 0;
@@ -59,6 +57,7 @@ export function textInputBaseStyle(
     position: relative;
     z-index: 1;
     display: block;
+    color: var(--input-fg-color);
 
     /* NOTE: This is a hack to disable Chrome’s autofill styles */
     &:-webkit-autofill,
@@ -70,44 +69,37 @@ export function textInputBaseStyle(
       transition-delay: 86400s /* 24h */;
     }
 
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+
     /* &:is(textarea) */
     &[data-as='textarea'] {
       resize: none;
     }
 
-    color: var(--input-fg-color);
-
-    &::placeholder {
-      color: var(--input-placeholder-color);
-    }
-
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+    /* enabled */
+    &:not(:invalid):not(:disabled):not(:read-only) {
       --input-fg-color: ${color.default.enabled.fg};
       --input-placeholder-color: ${color.default.enabled.placeholder};
+    }
 
-      /* enabled */
-      &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.default.enabled.fg};
-        --input-placeholder-color: ${color.default.enabled.placeholder};
-      }
-
-      /* disabled */
-      &:not(:invalid):disabled {
-        --input-fg-color: ${color.default.disabled.fg};
-        --input-placeholder-color: ${color.default.disabled.placeholder};
-      }
+    /* disabled */
+    &:not(:invalid):disabled {
+      --input-fg-color: ${color.default.disabled.fg};
+      --input-placeholder-color: ${color.default.disabled.placeholder};
+    }
 
-      /* invalid */
-      &:invalid {
-        --input-fg-color: ${color.invalid.enabled.fg};
-        --input-placeholder-color: ${color.invalid.enabled.placeholder};
-      }
+    /* invalid */
+    &:invalid {
+      --input-fg-color: ${color.invalid.enabled.fg};
+      --input-placeholder-color: ${color.invalid.enabled.placeholder};
+    }
 
-      /* readOnly */
-      &:read-only {
-        --input-fg-color: ${color.default.readOnly.fg};
-        --input-placeholder-color: ${color.default.readOnly.placeholder};
-      }
+    /* readOnly */
+    &:read-only {
+      --input-fg-color: ${color.default.readOnly.fg};
+      --input-placeholder-color: ${color.default.readOnly.placeholder};
     }
   `
 }
@@ -116,7 +108,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
   const {theme} = props
   const {fonts, media} = theme.sanity
 
-  return _responsive(media, props.$fontSize, (sizeIndex) => {
+  return responsive(media, getResponsiveProp(props.$fontSize, [2]), (sizeIndex) => {
     const size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2]
 
     return {
@@ -129,11 +121,13 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps
 ): FlattenSimpleInterpolation {
-  const {$border, $hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$border, $hasPrefix, $hasSuffix, theme} = props
   const {focusRing, input} = theme.sanity
   const color = theme.sanity.color.input
 
   return css`
+    --card-bg-color: ${color.default.enabled.bg};
+    --card-fg-color: ${color.default.enabled.fg};
     --input-box-shadow: none;
 
     position: absolute;
@@ -144,7 +138,6 @@ export function textInputRepresentationStyle(
     display: block;
     pointer-events: none;
     z-index: 0;
-
     background-color: var(--card-bg-color);
     box-shadow: var(--input-box-shadow);
 
@@ -153,70 +146,65 @@ export function textInputRepresentationStyle(
     border-top-right-radius: ${$hasSuffix ? 0 : undefined};
     border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
 
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.default.enabled.bg};
-      --card-fg-color: ${color.default.enabled.fg};
+    /* enabled */
+    *:not(:disabled) + && {
+      --input-box-shadow: ${$border
+        ? focusRingBorderStyle({color: color.default.enabled.border, width: input.border.width})
+        : undefined};
+    }
 
-      /* enabled */
-      *:not(:disabled) + & {
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({color: color.default.enabled.border, width: input.border.width})
-          : undefined};
-      }
+    /* invalid */
+    *:not(:disabled):invalid + && {
+      --card-bg-color: ${color.invalid.enabled.bg};
+      --card-fg-color: ${color.invalid.enabled.fg};
+      --input-box-shadow: ${$border
+        ? focusRingBorderStyle({color: color.invalid.enabled.border, width: input.border.width})
+        : 'none'};
+    }
 
-      /* invalid */
-      *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.invalid.enabled.bg};
-        --card-fg-color: ${color.invalid.enabled.fg};
-        --input-box-shadow: ${$border
-          ? focusRingBorderStyle({color: color.invalid.enabled.border, width: input.border.width})
-          : 'none'};
-      }
+    /* focused */
+    *:not(:disabled):focus + && {
+      --input-box-shadow: ${focusRingStyle({
+        border: $border
+          ? {color: color.default.enabled.border, width: input.border.width}
+          : undefined,
+        focusRing,
+      })};
+    }
+
+    /* disabled */
+    *:disabled + && {
+      --card-bg-color: ${color.default.disabled.bg};
+      --card-fg-color: ${color.default.disabled.fg};
+      --input-box-shadow: ${$border
+        ? focusRingBorderStyle({
+            color: color.default.disabled.border,
+            width: input.border.width,
+          })
+        : 'none'};
+    }
 
-      /* focused */
-      *:not(:disabled):focus + & {
-        --input-box-shadow: ${focusRingStyle({
-          border: $border
-            ? {color: color.default.enabled.border, width: input.border.width}
-            : undefined,
-          focusRing,
-        })};
+    /* hovered */
+    @media (hover: hover) {
+      *:not(:disabled):not(:read-only):not(:invalid):hover + && {
+        --card-bg-color: ${color.default.hovered.bg};
+        --card-fg-color: ${color.default.hovered.fg};
       }
 
-      /* disabled */
-      *:disabled + & {
-        --card-bg-color: ${color.default.disabled.bg} !important;
-        --card-fg-color: ${color.default.disabled.fg} !important;
+      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + && {
         --input-box-shadow: ${$border
           ? focusRingBorderStyle({
-              color: color.default.disabled.border,
+              color: color.default.hovered.border,
               width: input.border.width,
             })
           : 'none'};
       }
+    }
 
-      /* readOnly */
-      *:read-only + & {
-        --card-bg-color: ${color.default.readOnly.bg} !important;
-        --card-fg-color: ${color.default.readOnly.fg} !important;
-      }
-
-      /* hovered */
-      @media (hover: hover) {
-        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.default.hovered.bg};
-          --card-fg-color: ${color.default.hovered.fg};
-        }
-
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {
-          --input-box-shadow: ${$border
-            ? focusRingBorderStyle({
-                color: color.default.hovered.border,
-                width: input.border.width,
-              })
-            : 'none'};
-        }
-      }
+    /* readOnly */
+    *:read-only + && {
+      --card-bg-color: ${color.default.readOnly.bg};
+      --card-fg-color: ${color.default.readOnly.fg};
     }
   `
 }

package/src/styles/margin/marginStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {_getResponsiveSpace} from '../helpers'
+import {getResponsiveProp, getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveMarginStyleProps} from './types'
 
@@ -9,12 +9,12 @@ export function responsiveMarginStyle(
   const {theme} = props
 
   return [
-    _getResponsiveSpace(theme, ['margin'], props.$margin),
-    _getResponsiveSpace(theme, ['marginLeft', 'marginRight'], props.$marginX),
-    _getResponsiveSpace(theme, ['marginTop', 'marginBottom'], props.$marginY),
-    _getResponsiveSpace(theme, ['marginTop'], props.$marginTop),
-    _getResponsiveSpace(theme, ['marginRight'], props.$marginRight),
-    _getResponsiveSpace(theme, ['marginBottom'], props.$marginBottom),
-    _getResponsiveSpace(theme, ['marginLeft'], props.$marginLeft),
+    getResponsiveSpace(theme, ['margin'], getResponsiveProp(props.$margin)),
+    getResponsiveSpace(theme, ['marginLeft', 'marginRight'], getResponsiveProp(props.$marginX)),
+    getResponsiveSpace(theme, ['marginTop', 'marginBottom'], getResponsiveProp(props.$marginY)),
+    getResponsiveSpace(theme, ['marginTop'], getResponsiveProp(props.$marginTop)),
+    getResponsiveSpace(theme, ['marginRight'], getResponsiveProp(props.$marginRight)),
+    getResponsiveSpace(theme, ['marginBottom'], getResponsiveProp(props.$marginBottom)),
+    getResponsiveSpace(theme, ['marginLeft'], getResponsiveProp(props.$marginLeft)),
   ].filter(Boolean) as CSSObject[][]
 }

package/src/styles/margin/marginsStyle.test.ts

@@ -6,7 +6,7 @@ const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
 
 describe('styles/margin', () => {
   it('should 1', () => {
-    const styles = responsiveMarginStyle({$margin: [0], theme})
+    const styles = responsiveMarginStyle({$margin: 0, theme})
 
     expect(styles).toEqual([[{margin: 0}]])
   })

package/src/styles/margin/types.ts

@@ -1,9 +1,9 @@
 export interface ResponsiveMarginStyleProps {
-  $margin?: number[]
-  $marginX?: number[]
-  $marginY?: number[]
-  $marginTop?: number[]
-  $marginRight?: number[]
-  $marginBottom?: number[]
-  $marginLeft?: number[]
+  $margin?: number | number[]
+  $marginX?: number | number[]
+  $marginY?: number | number[]
+  $marginTop?: number | number[]
+  $marginRight?: number | number[]
+  $marginBottom?: number | number[]
+  $marginLeft?: number | number[]
 }

package/src/styles/padding/paddingStyle.test.ts

@@ -6,7 +6,7 @@ const theme: Theme = {sanity: {...restTheme, color: color.light.default}}
 
 describe('styles/padding', () => {
   it('should 1', () => {
-    const styles = responsivePaddingStyle({$padding: [0], theme})
+    const styles = responsivePaddingStyle({$padding: 0, theme})
 
     expect(styles).toEqual([[{padding: 0}]])
   })

package/src/styles/padding/paddingStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {_getResponsiveSpace} from '../helpers'
+import {getResponsiveProp, getResponsiveSpace} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsivePaddingStyleProps} from './types'
 
@@ -9,12 +9,12 @@ export function responsivePaddingStyle(
   const {theme} = props
 
   return [
-    _getResponsiveSpace(theme, ['padding'], props.$padding),
-    _getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], props.$paddingX),
-    _getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], props.$paddingY),
-    _getResponsiveSpace(theme, ['paddingTop'], props.$paddingTop),
-    _getResponsiveSpace(theme, ['paddingRight'], props.$paddingRight),
-    _getResponsiveSpace(theme, ['paddingBottom'], props.$paddingBottom),
-    _getResponsiveSpace(theme, ['paddingLeft'], props.$paddingLeft),
+    getResponsiveSpace(theme, ['padding'], getResponsiveProp(props.$padding)),
+    getResponsiveSpace(theme, ['paddingLeft', 'paddingRight'], getResponsiveProp(props.$paddingX)),
+    getResponsiveSpace(theme, ['paddingTop', 'paddingBottom'], getResponsiveProp(props.$paddingY)),
+    getResponsiveSpace(theme, ['paddingTop'], getResponsiveProp(props.$paddingTop)),
+    getResponsiveSpace(theme, ['paddingRight'], getResponsiveProp(props.$paddingRight)),
+    getResponsiveSpace(theme, ['paddingBottom'], getResponsiveProp(props.$paddingBottom)),
+    getResponsiveSpace(theme, ['paddingLeft'], getResponsiveProp(props.$paddingLeft)),
   ].filter(Boolean) as CSSObject[][]
 }

package/src/styles/padding/types.ts

@@ -2,11 +2,11 @@
  * @internal
  */
 export interface ResponsivePaddingStyleProps {
-  $padding?: number[]
-  $paddingX?: number[]
-  $paddingY?: number[]
-  $paddingTop?: number[]
-  $paddingRight?: number[]
-  $paddingBottom?: number[]
-  $paddingLeft?: number[]
+  $padding?: number | number[]
+  $paddingX?: number | number[]
+  $paddingY?: number | number[]
+  $paddingTop?: number | number[]
+  $paddingRight?: number | number[]
+  $paddingBottom?: number | number[]
+  $paddingLeft?: number | number[]
 }

package/src/styles/radius/radiusStyle.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 {ResponsiveRadiusStyleProps} from './types'
 
@@ -7,7 +7,7 @@ export function responsiveRadiusStyle(props: ResponsiveRadiusStyleProps & ThemeP
   const {theme} = props
   const {media, radius} = theme.sanity
 
-  return _responsive(media, props.$radius, (radiusIndex) => ({
+  return responsive(media, getResponsiveProp(props.$radius), (radiusIndex) => ({
     borderRadius: rem(radius[radiusIndex]),
   }))
 }

package/src/styles/radius/types.ts

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

package/src/styles/shadow/shadowStyle.ts

@@ -1,7 +1,8 @@
 import {CSSObject} from 'styled-components'
+import {getResponsiveProp} from '..'
 import {EMPTY_RECORD} from '../../constants'
 import {BoxShadow, ThemeShadow} from '../../theme'
-import {rem, _responsive} from '../helpers'
+import {rem, responsive} from '../helpers'
 import {ThemeProps} from '../types'
 import {ResponsiveShadowStyleProps} from './types'
 
@@ -24,5 +25,7 @@ export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeP
   const {theme} = props
   const {media, shadows} = theme.sanity
 
-  return _responsive(media, props.$shadow, (shadow) => shadowStyle(shadows[shadow]))
+  return responsive(media, getResponsiveProp(props.$shadow), (shadow) =>
+    shadowStyle(shadows[shadow])
+  )
 }

package/src/styles/shadow/types.ts

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