@sanity/ui 0.37.21 → 0.38.1

package/src/styles/input/textInputStyle.ts

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

package/src/styles/margin/marginStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, getResponsiveSpace} from '../helpers'
+import {_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'], 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)),
+    _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),
   ].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 | number[]
-  $marginX?: number | number[]
-  $marginY?: number | number[]
-  $marginTop?: number | number[]
-  $marginRight?: number | number[]
-  $marginBottom?: number | number[]
-  $marginLeft?: number | number[]
+  $margin?: number[]
+  $marginX?: number[]
+  $marginY?: number[]
+  $marginTop?: number[]
+  $marginRight?: number[]
+  $marginBottom?: number[]
+  $marginLeft?: 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 {getResponsiveProp, getResponsiveSpace} from '../helpers'
+import {_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'], 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)),
+    _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),
   ].filter(Boolean) as CSSObject[][]
 }

package/src/styles/padding/types.ts

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

package/src/styles/radius/radiusStyle.ts

@@ -1,5 +1,5 @@
 import {CSSObject} from 'styled-components'
-import {getResponsiveProp, rem, responsive} from '../helpers'
+import {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, getResponsiveProp(props.$radius), (radiusIndex) => ({
+  return _responsive(media, props.$radius, (radiusIndex) => ({
     borderRadius: rem(radius[radiusIndex]),
   }))
 }

package/src/styles/radius/types.ts

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

package/src/styles/shadow/shadowStyle.ts

@@ -1,8 +1,7 @@
 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'
 
@@ -25,7 +24,5 @@ export function responsiveShadowStyle(props: ResponsiveShadowStyleProps & ThemeP
   const {theme} = props
   const {media, shadows} = theme.sanity
 
-  return responsive(media, getResponsiveProp(props.$shadow), (shadow) =>
-    shadowStyle(shadows[shadow])
-  )
+  return _responsive(media, props.$shadow, (shadow) => shadowStyle(shadows[shadow]))
 }

package/src/styles/shadow/types.ts

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

package/src/theme/lib/theme/color/button/types.ts

@@ -23,8 +23,8 @@ export interface ThemeColorButtonStates {
 }
 
 /**
+ * TODO: Rename to `ThemeColorButtonMode`.
  * @public
- * @todo Rename to `ThemeColorButtonMode`.
  */
 export interface ThemeColorButtonTones {
   default: ThemeColorButtonStates

package/src/theme/lib/theme/shadow.ts

@@ -1,6 +1,6 @@
 /**
+ * TODO: Rename to `ThemeBoxShadow`
  * @public
- * @todo Rename to `ThemeBoxShadow`
  */
 export type BoxShadow = [
   // offsetX, offsetY, blurRadius, spreadRadius

package/src/theme/studioTheme/color.ts

@@ -17,18 +17,19 @@ const NEUTRAL_TONES = ['default', 'transparent']
 export const color = createColorTheme({
   base: ({dark, name}) => {
     if (name === 'default') {
-      const skeletonFrom = dark ? hues.gray[900].hex : hues.gray[100].hex
+      const tints = hues.gray
+      const skeletonFrom = dark ? tints[900].hex : tints[100].hex
 
       return {
         fg: dark ? white.hex : black.hex,
         bg: dark ? black.hex : white.hex,
-        border: hues.gray[dark ? 800 : 200].hex,
+        border: tints[dark ? 800 : 200].hex,
         focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(hues.gray[500].hex, 0.4),
-          umbra: rgba(dark ? black.hex : hues.gray[500].hex, 0.2),
-          penumbra: rgba(dark ? black.hex : hues.gray[500].hex, 0.14),
-          ambient: rgba(dark ? black.hex : hues.gray[500].hex, 0.12),
+          outline: rgba(tints[500].hex, 0.4),
+          umbra: dark ? rgba(tints[950].hex, 0.4) : rgba(tints[500].hex, 0.2),
+          penumbra: dark ? rgba(tints[950].hex, 0.28) : rgba(tints[500].hex, 0.14),
+          ambient: dark ? rgba(tints[950].hex, 0.24) : rgba(tints[500].hex, 0.12),
         },
         skeleton: {
           from: skeletonFrom,
@@ -47,10 +48,10 @@ export const color = createColorTheme({
         border: tints[dark ? 800 : 300].hex,
         focusRing: hues.blue[500].hex,
         shadow: {
-          outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
-          umbra: rgba(dark ? black.hex : tints[500].hex, 0.2),
-          penumbra: rgba(dark ? black.hex : tints[500].hex, 0.14),
-          ambient: rgba(dark ? black.hex : tints[500].hex, 0.12),
+          outline: rgba(tints[500].hex, 0.4),
+          umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
+          penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
+          ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
         },
         skeleton: {
           from: skeletonFrom,
@@ -68,10 +69,10 @@ export const color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
-        umbra: rgba(dark ? black.hex : tints[500].hex, 0.2),
-        penumbra: rgba(dark ? black.hex : tints[500].hex, 0.14),
-        ambient: rgba(dark ? black.hex : tints[500].hex, 0.12),
+        outline: rgba(tints[500].hex, 0.4),
+        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
+        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
+        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12),
       },
       skeleton: {
         from: skeletonFrom,

package/src/theme/studioTheme/fonts.ts

@@ -95,16 +95,16 @@ export const fonts: ThemeFonts = {
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 9,
-        descenderHeight: 7,
+        ascenderHeight: 8,
+        descenderHeight: 8,
         fontSize: 33,
         iconSize: 49,
         lineHeight: 39,
         letterSpacing: 0,
       },
       {
-        ascenderHeight: 10,
-        descenderHeight: 8,
+        ascenderHeight: 9,
+        descenderHeight: 9,
         fontSize: 38,
         iconSize: 53,
         lineHeight: 45,

package/src/theme/types.ts

@@ -7,7 +7,7 @@ import {BaseTheme, ThemeColor, ThemeColorName, ThemeColorSchemeKey} from './lib/
 export type RootTheme = BaseTheme<Styles>
 
 /**
- * @todo Rename to `ThemeStyles`
+ * TODO: Rename to `ThemeStyles`
  * @public
  */
 export interface Styles {

package/src/utils/elementQuery/elementQuery.tsx

@@ -1,7 +1,6 @@
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
-import {useForwardedRef} from '../../hooks'
+import React, {forwardRef, useCallback, useMemo, useState} from 'react'
+import {useElementSize, useForwardedRef} from '../../hooks'
 import {useTheme} from '../../theme'
-import {ResizeObserver} from '../resizeObserver'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /**
@@ -23,23 +22,11 @@ export const ElementQuery = forwardRef(function ElementQuery(
 ) {
   const theme = useTheme()
   const {children, media = theme.sanity.media, ...restProps} = props
-  const [width, setWidth] = useState(() => window.innerWidth)
+
   const forwardedRef = useForwardedRef(ref)
   const [element, setElement] = useState<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    if (!element) return
-
-    const handleResizeEntries: ResizeObserverCallback = (entries) => {
-      setWidth(entries[0].contentRect.width)
-    }
-
-    const ro = new ResizeObserver(handleResizeEntries)
-
-    ro.observe(element)
-
-    return () => ro.disconnect()
-  }, [element])
+  const elementSize = useElementSize(element)
+  const width = useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize])
 
   const max = useMemo(() => findMaxBreakpoints(media, width), [media, width])
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width])

package/src/utils/index.ts

@@ -3,6 +3,5 @@ export * from './elementQuery'
 export * from './errorBoundary'
 export * from './layer'
 export * from './portal'
-export * from './resizeObserver'
 export * from './srOnly'
 export * from './virtualList'

package/src/utils/layer/layerProvider.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react'
-import {useMediaIndex, useResponsiveProp} from '../../hooks'
+import {useMediaIndex, useArrayProp} from '../../hooks'
 import {LayerContext} from './layerContext'
 import {LayerContextValue} from './types'
 
@@ -17,7 +17,7 @@ export interface LayerProviderProps {
 export function LayerProvider(props: LayerProviderProps): React.ReactElement {
   const {children, zOffset: zOffsetProp = 0} = props
   const parent = useContext(LayerContext)
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useArrayProp(zOffsetProp)
   const maxMediaIndex = zOffset.length - 1
   const mediaIndex = Math.min(useMediaIndex(), maxMediaIndex)
   const zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex]

package/src/utils/virtualList/virtualList.tsx

@@ -2,6 +2,7 @@ import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {_isScrollable} from '../../helpers'
 import {useForwardedRef} from '../../hooks'
+import {_ResizeObserver} from '../../observers'
 import {StackProps} from '../../primitives'
 import {useTheme} from '../../theme'
 
@@ -86,7 +87,7 @@ export const VirtualList = forwardRef(function VirtualList(
 
       scrollEl.addEventListener('scroll', handleScroll, {passive: true})
 
-      const ro = new ResizeObserver((entries) => {
+      const ro = new _ResizeObserver((entries) => {
         setScrollHeight(entries[0].contentRect.height)
       })
 
@@ -96,6 +97,7 @@ export const VirtualList = forwardRef(function VirtualList(
 
       return () => {
         scrollEl.removeEventListener('scroll', handleScroll)
+
         ro.unobserve(scrollEl)
         ro.disconnect()
       }