@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/src/core/primitives/popover/popover.tsx

@@ -9,6 +9,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
+import {type MaxWidth, popover as popoverCss, type ResponsiveProp} from '@sanity/ui/css'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
@@ -24,7 +25,7 @@ import {
 } from 'react'
 
 import {Z_OFFSETS} from '../../constants'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, PopoverMargins, Props} from '../../types'
 import {type LayerOwnProps, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -43,7 +44,7 @@ import type {PopoverUpdateCallback} from './types'
 export const DEFAULT_POPOVER_ELEMENT = 'div'
 
 /** @public */
-export type PopoverOwnProps = LayerOwnProps & {
+export type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -102,6 +103,7 @@ export type PopoverOwnProps = LayerOwnProps & {
   referenceElement?: HTMLElement | null
   /** @beta */
   updateRef?: Ref<PopoverUpdateCallback | undefined>
+  width?: ResponsiveProp<MaxWidth>
 }
 
 /** @public */
@@ -147,6 +149,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     boundaryElement = boundaryElementContext.element,
     children: childProp,
+    className,
     constrainSize = false,
     content,
     disabled,
@@ -180,7 +183,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const zOffset = useArrayProp(zOffsetProp)
+  const zOffset = useResponsiveProp(zOffsetProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
@@ -352,9 +355,9 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     return childProp || <></>
   }
 
-  const popover = (
+  const node = (
     <>
-      {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned 
+      {/* Optional transparent blocking overlay at the top-most z-index layer. Must be positioned
       before the below popover card. */}
       {modal && <ViewportOverlay />}
 
@@ -367,6 +370,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
         arrowX={arrowX}
         arrowY={arrowY}
         as={as}
+        className={popoverCss({className})}
         hidden={referenceHidden}
         maxWidth={widthProp}
         overflow={overflow}
@@ -396,11 +400,11 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
           tone={tone === 'inherit' ? (card?.tone ?? 'default') : tone}
           scheme={scheme ?? 'light'}
         >
-          {popover}
+          {node}
         </CardProvider>
       </Portal>
     ) : (
-      popover
+      node
     ))
 
   return (
@@ -414,8 +418,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   )
 }
 
-Popover.displayName = 'Popover'
-
 // Before React 19 accessing `element.props.ref` will throw a warning and suggest using `element.ref`
 // After React 19 accessing `element.ref` does the opposite.
 // https://github.com/facebook/react/pull/28348

package/src/core/primitives/popover/popoverLayer.tsx

@@ -107,7 +107,7 @@ export function PopoverLayer(props: PopoverLayerProps) {
       as={motion.div}
       data-context-tone={tone}
       data-placement={placement}
-      direction="column"
+      flexDirection="column"
       display="flex"
       position={strategy}
       radius={radius}
@@ -145,5 +145,3 @@ export function PopoverLayer(props: PopoverLayerProps) {
     </Layer>
   )
 }
-
-PopoverLayer.displayName = 'PopoverCard'

package/src/core/primitives/radio/radio.tsx

@@ -1,4 +1,4 @@
-import {_composeClassNames, radio} from '@sanity/ui/css'
+import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
 import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
@@ -47,9 +47,10 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={_composeClassNames(className, radio())} data-ui="Radio" style={style}>
+    <div className={radio({className})} data-ui="Radio" style={style}>
       <Element
         {...rest}
+        className={radioInput()}
         data-invalid={customValidity ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
@@ -57,9 +58,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
         ref={ref}
         type="radio"
       />
-      <span />
+      <span className={radioPresentation()} />
     </div>
   )
 }
-
-Radio.displayName = 'Radio'

package/src/core/primitives/select/select.tsx

@@ -83,5 +83,3 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
     </div>
   )
 }
-
-Select.displayName = 'Select'

package/src/core/primitives/spinner/animatedSpinnerIcon.tsx

@@ -1,18 +1,14 @@
 import {SpinnerIcon} from '@sanity/icons'
-import {_composeClassNames, animatedSpinnerIcon} from '@sanity/ui/css'
+import {animatedSpinnerIcon} from '@sanity/ui/css'
 import type {ReactElement, SVGProps} from 'react'
 
 /** @internal */
-export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
-  const {className, ...rest} = props
+export function AnimatedSpinnerIcon(
+  props: Omit<SVGProps<SVGSVGElement>, 'className'>,
+): ReactElement {
+  const {...rest} = props
 
   return (
-    <SpinnerIcon
-      {...rest}
-      data-sanity-icon="animated-spinner"
-      className={_composeClassNames(className, animatedSpinnerIcon())}
-    />
+    <SpinnerIcon data-sanity-icon="animated-spinner" {...rest} className={animatedSpinnerIcon()} />
   )
 }
-
-AnimatedSpinnerIcon.displayName = 'AnimatedSpinnerIcon'

package/src/core/primitives/spinner/spinner.tsx

@@ -31,15 +31,15 @@ export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Pr
 export function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
   props: SpinnerProps<E>,
 ) {
-  const {as = DEFAULT_SPINNER_ELEMENT, ...rest} = props as SpinnerProps<
-    typeof DEFAULT_SPINNER_ELEMENT
-  >
+  const {
+    as = DEFAULT_SPINNER_ELEMENT,
+    className,
+    ...rest
+  } = props as SpinnerProps<typeof DEFAULT_SPINNER_ELEMENT>
 
   return (
-    <Text as={as} data-ui="Spinner" {...rest} className={spinner()}>
+    <Text as={as} data-ui="Spinner" {...rest} className={spinner({className})}>
       <AnimatedSpinnerIcon />
     </Text>
   )
 }
-
-Spinner.displayName = 'Spinner'

package/src/core/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import {_composeClassNames, type ResponsiveProp, stack} from '@sanity/ui/css'
+import {type ResponsiveProp, stack} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
@@ -10,7 +10,19 @@ export const DEFAULT_STACK_ELEMENT = 'div'
 /** @public */
 export type StackOwnProps = Omit<
   BoxOwnProps,
-  'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+  | 'align'
+  | 'alignItems'
+  | 'columns'
+  | 'gridTemplateColumns'
+  | 'direction'
+  | 'display'
+  | 'flexDirection'
+  | 'gapX'
+  | 'gapY'
+  | 'justify'
+  | 'justifyContent'
+  | 'rows'
+  | 'gridTemplateRows'
 > & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
@@ -43,12 +55,10 @@ export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>
       data-ui="Stack"
       {...rest}
       as={as}
-      autoRows="min"
-      className={_composeClassNames(className, stack())}
+      gridAutoRows="min"
+      className={stack({className})}
       display="grid"
       gap={gap ?? space}
     />
   )
 }
-
-Stack.displayName = 'Stack'

package/src/core/primitives/switch/switch.tsx

@@ -1,5 +1,4 @@
 import {
-  _composeClassNames,
   _switch,
   _switchElement,
   _switchPresentation,
@@ -63,7 +62,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
 
   return (
     <Box
-      className={_composeClassNames(className, _switch())}
+      className={_switch({className})}
       data-checked={checked ? '' : undefined}
       data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
@@ -88,5 +87,3 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     </Box>
   )
 }
-
-Switch.displayName = 'Switch'

package/src/core/primitives/text/text.tsx

@@ -1,10 +1,4 @@
-import {
-  _composeClassNames,
-  text,
-  textOverflow,
-  type TextOverflowStyleProps,
-  type TextStyleProps,
-} from '@sanity/ui/css'
+import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
 import type {ComponentType, Props} from '../../types'
 
@@ -56,17 +50,15 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     <Element
       data-ui="Text"
       {...rest}
-      className={_composeClassNames(
+      className={text({
         className,
-        text({
-          accent,
-          align,
-          flex,
-          muted,
-          size,
-          weight,
-        }),
-      )}
+        accent,
+        align,
+        flex,
+        muted,
+        size,
+        weight,
+      })}
     >
       <span
         className={textOverflow({
@@ -78,5 +70,3 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     </Element>
   )
 }
-
-Text.displayName = 'Text'

package/src/core/primitives/textArea/textArea.tsx

@@ -94,5 +94,3 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     </span>
   )
 }
-
-TextArea.displayName = 'TextArea'

package/src/core/primitives/textInput/textInput.tsx

@@ -1,6 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
 import {
-  _composeClassNames,
   _inputElement,
   _inputPresentation,
   type InputStyleProps,
@@ -12,7 +11,6 @@ import {
 } from '@sanity/ui/css'
 import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
-  type CSSProperties,
   type ElementType,
   isValidElement,
   type MouseEvent,
@@ -25,7 +23,7 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useArrayProp, useCustomValidity} from '../../hooks'
+import {useCustomValidity, useResponsiveProp} from '../../hooks'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
@@ -74,13 +72,6 @@ export type TextInputProps<E extends TextInputElementType = TextInputElementType
   E
 >
 
-const CLEAR_BUTTON_BOX_STYLE: CSSProperties = {
-  backgroundColor: 'transparent',
-  top: 0,
-  right: 0,
-  zIndex: 2,
-}
-
 /**
  * Single line text input.
  *
@@ -117,7 +108,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
 
   const ref = useRef<HTMLInputElement | null>(null)
 
-  const paddingArray = useArrayProp(padding)
+  const responsivePadding = useResponsiveProp(padding)
 
   const withClearButton = Boolean(clearButton)
 
@@ -147,29 +138,29 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     [onClear, ref],
   )
 
-  const clearButtonBoxPadding = useMemo(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
+  const clearButtonBoxPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
 
-        return typeof v === 'number' ? v - 2 : 0
-      }) as Space[],
-    [paddingArray],
-  )
+        return [key, typeof value === 'number' ? value - 2 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
 
-  const clearButtonPadding = useMemo(
-    () =>
-      paddingArray.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 0
-        if (v === 2) return 1
+  const clearButtonPadding = useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(responsivePadding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 0]
+        if (value === 2) return [key, 1]
 
-        return typeof v === 'number' ? v - 1 : 0
-      }) as Space[],
-    [paddingArray],
-  )
+        return [key, typeof value === 'number' ? value - 1 : 0]
+      }),
+    ) as ResponsiveProp<Space>
+  }, [responsivePadding])
 
   const clearButtonProps: TextInputClearButtonProps = useMemo(
     () => (isRecord(clearButton) ? clearButton : EMPTY_RECORD),
@@ -178,18 +169,16 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
 
   return (
     <Box
-      align="center"
-      className={_composeClassNames(
+      alignItems="center"
+      className={textInput({
         className,
-        textInput({
-          border,
-          fontSize,
-          padding,
-          radius,
-          gap: gap ?? space,
-          width,
-        }),
-      )}
+        border,
+        fontSize,
+        padding,
+        radius,
+        gap: gap ?? space,
+        width,
+      })}
       data-icon-left={IconComponent ? '' : undefined}
       data-icon-right={IconRightComponent ? '' : undefined}
       data-invalid={customValidity ? '' : undefined}
@@ -218,7 +207,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
 
         <Box className={_inputPresentation()} position="absolute">
           {IconComponent && (
-            <Box padding={padding} position="absolute" style={{top: 0, left: 0}}>
+            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
               <Text size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
@@ -227,7 +216,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" style={{top: 0, right: 0}}>
+            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
               <Text size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
@@ -237,7 +226,13 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
         </Box>
 
         {!disabled && !readOnly && clearButton && (
-          <Box padding={clearButtonBoxPadding} position="absolute" style={CLEAR_BUTTON_BOX_STYLE}>
+          <Box
+            insetTop={0}
+            insetRight={0}
+            padding={clearButtonBoxPadding}
+            position="absolute"
+            style={{zIndex: 2}}
+          >
             <Button
               aria-label="Clear"
               data-qa="clear-button"
@@ -263,5 +258,3 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     </Box>
   )
 }
-
-TextInput.displayName = 'TextInput'

package/src/core/primitives/tooltip/tooltip.tsx

@@ -8,12 +8,7 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
-import {
-  _composeClassNames,
-  type RadiusStyleProps,
-  type ShadowStyleProps,
-  tooltip,
-} from '@sanity/ui/css'
+import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
@@ -36,7 +31,7 @@ import {
 import {useEffectEvent} from 'use-effect-event'
 
 import {Z_OFFSETS} from '../../constants'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
@@ -121,7 +116,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
     content,
     delay,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ??
+    fallbackPlacements = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     padding = 2,
     placement: placementProp = 'bottom',
@@ -138,7 +133,6 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   const card = useCard()
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const fallbackPlacements = useArrayProp(fallbackPlacementsProp)
   const ref = useRef<HTMLDivElement | null>(null)
   const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -396,7 +390,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
       arrowX={arrowX}
       arrowY={arrowY}
       as={as}
-      className={_composeClassNames(className, tooltip())}
+      className={tooltip({className})}
       originX={originX}
       originY={originY}
       padding={padding}
@@ -488,5 +482,3 @@ function useCloseOnMouseLeave({
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [isInsideGroup, showTooltip])
 }
-
-Tooltip.displayName = 'Tooltip'

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -51,5 +51,3 @@ export function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps)
     <TooltipDelayGroupContext.Provider value={value}>{children}</TooltipDelayGroupContext.Provider>
   )
 }
-
-TooltipDelayGroupProvider.displayName = 'TooltipDelayGroupProvider'

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -103,5 +103,3 @@ export function TooltipLayer(props: TooltipLayerProps) {
     </Layer>
   )
 }
-
-TooltipLayer.displayName = 'TooltipLayer'

package/src/core/primitives/types.ts

@@ -1,8 +1,7 @@
 import type {
-  FlexAlign,
+  AlignItems,
+  Flex,
   FlexDirection,
-  FlexJustify,
-  FlexValue,
   FlexWrap,
   GridItemColumn,
   GridItemColumnEnd,
@@ -10,6 +9,7 @@ import type {
   GridItemRow,
   GridItemRowEnd,
   GridItemRowStart,
+  JustifyContent,
 } from '@sanity/ui/css'
 
 import type {
@@ -51,9 +51,9 @@ export interface ResponsiveBoxProps {
  * @deprecated
  */
 export interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
+  align?: AlignItems | AlignItems[]
   direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
+  justify?: JustifyContent | JustifyContent[]
   wrap?: FlexWrap | FlexWrap[]
 }
 
@@ -63,7 +63,7 @@ export interface ResponsiveFlexProps {
  */
 export interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: FlexValue | FlexValue[]
+  flex?: Flex | Flex[]
 }
 
 /**

package/src/core/types/flex.ts

@@ -3,7 +3,7 @@ export {
    * @public
    * @deprecated
    */
-  type FlexAlign,
+  type AlignItems as FlexAlign,
   /**
    * @public
    * @deprecated
@@ -13,12 +13,12 @@ export {
    * @public
    * @deprecated
    */
-  type FlexJustify,
+  type JustifyContent as FlexJustify,
   /**
    * @public
    * @deprecated
    */
-  type FlexValue,
+  type Flex as FlexValue,
   /**
    * @public
    * @deprecated

package/src/core/utils/arrow/arrow.tsx

@@ -1,4 +1,5 @@
-import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, varNames} from '@sanity/ui/css'
+import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} from '@sanity/ui/css'
+import {assignInlineVars} from '@vanilla-extract/dynamic'
 import {useMemo} from 'react'
 
 import type {ComponentType, Props} from '../../types'
@@ -53,8 +54,15 @@ export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>
   const fillPath = `${path} M ${w} -1 M 0 -1 Z`
 
   return (
-    <Element {...rest} className={_arrow()} style={{...style, [varNames.arrow.size]: `${w}px`}}>
-      <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
+    <Element
+      {...rest}
+      className={_arrow()}
+      style={{
+        ...style,
+        ...assignInlineVars({[vars.arrow.size]: `${w}px`}),
+      }}
+    >
+      <svg className={_arrowSvg()} width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
         <mask id="stroke-mask">
           <rect className={_arrowStrokeMask()} x={0} width={w} height={w} fill="white" />
         </mask>
@@ -64,5 +72,3 @@ export function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>
     </Element>
   )
 }
-
-Arrow.displayName = 'Arrow'

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -16,5 +16,3 @@ export function BoundaryElementProvider(props: BoundaryElementProviderProps): Re
 
   return <BoundaryElementContext.Provider value={value}>{children}</BoundaryElementContext.Provider>
 }
-
-BoundaryElementProvider.displayName = 'BoundaryElementProvider'

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -73,5 +73,3 @@ export function ElementQuery<
     </Element>
   )
 }
-
-ElementQuery.displayName = 'ElementQuery'

package/src/core/utils/layer/layer.tsx

@@ -1,3 +1,5 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+
 import type {CardElementType, CardOwnProps} from '../../primitives'
 import type {Props} from '../../types'
 import {LayerCard} from './layerCard'
@@ -10,7 +12,7 @@ export const DEFAULT_LAYER_ELEMENT = 'div'
 export type LayerOwnProps = CardOwnProps & {
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
 /** @public */
@@ -38,5 +40,3 @@ export function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>
     </LayerProvider>
   )
 }
-
-Layer.displayName = 'Layer'

package/src/core/utils/layer/layerCard.tsx

@@ -88,5 +88,3 @@ export function LayerCard<E extends LayerCardElementType = typeof DEFAULT_LAYER_
     </Card>
   )
 }
-
-LayerCard.displayName = 'LayerCard'