@sanity/ui 0.37.11 → 0.37.14-next.5

package/lib/{sanity-ui.modern.js → sanity-ui.modern.mjs}

@@ -1,14 +1,13 @@
 import { useId } from '@reach/auto-id';
-import React, { useState, useRef, useEffect, createContext, useContext, useMemo, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, useReducer, Children, Fragment, memo } from 'react';
+import React, { useMemo, useState, useRef, useEffect, createContext, useContext, useLayoutEffect, forwardRef, useCallback, cloneElement, isValidElement, createElement, memo, useReducer, Children, Fragment } from 'react';
 import ReactIs, { isElement, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
+import { ResizeObserver } from '@juggle/resize-observer';
 import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
-import { usePopper } from 'react-popper';
-import { ResizeObserver as ResizeObserver$1 } from '@juggle/resize-observer';
+import { flip, size as size$1, offset, shift, arrow, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import ReactDOM from 'react-dom';
-import maxSizeModifier from 'popper-max-size-modifier';
 import { AnimatePresence, motion } from 'framer-motion';
 
 function _extends() {
@@ -44,8 +43,232 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+/**
+ * @internal
+ */
 const EMPTY_ARRAY = [];
-const EMPTY_RECORD$1 = {};
+/**
+ * @internal
+ */
+
+const EMPTY_RECORD = {};
+/**
+ * @internal
+ */
+
+const FLOATING_STATIC_SIDES = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+
+/**
+ * @internal
+ */
+
+function _fillCSSObject(keys, value) {
+  return keys.reduce((style, key) => {
+    style[key] = value;
+    return style;
+  }, {});
+}
+/**
+ * @public
+ */
+
+function rem(pixelValue) {
+  if (pixelValue === 0) return 0;
+  return `${pixelValue / 16}rem`;
+}
+/**
+ * @internal
+ */
+
+function _responsive(media, values, callback) {
+  const statements = values.map(callback);
+  return statements.map((statement, mediaIndex) => {
+    if (mediaIndex === 0) return statement;
+    return {
+      [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
+    };
+  });
+}
+/**
+ * @internal
+ */
+
+function _getArrayProp(val, defaultVal) {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY;
+  return Array.isArray(val) ? val : [val];
+}
+/**
+ * @internal
+ */
+
+function _getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
+  if (!Array.isArray(spaceIndexes)) {
+    throw new Error('the property must be array of numbers');
+  }
+
+  if (spaceIndexes.length === 0) {
+    return null;
+  }
+
+  return _responsive(theme.sanity.media, spaceIndexes, spaceIndex => _fillCSSObject(props, rem(theme.sanity.space[spaceIndex])));
+}
+
+/**
+ * A utility function getting responsive font styles.
+ * @internal
+ */
+
+function responsiveFont(fontKey, props) {
+  const {
+    $size,
+    $weight,
+    theme
+  } = props;
+  const {
+    fonts,
+    media
+  } = theme.sanity;
+  const {
+    family,
+    sizes,
+    weights
+  } = fonts[fontKey];
+  const fontWeight = $weight && weights[$weight] || weights.regular; // @todo: make this configurable
+
+  const defaultSize = sizes[2];
+  const base = {
+    position: 'relative',
+    fontFamily: family,
+    fontWeight,
+    padding: '1px 0',
+    margin: 0,
+    '&:before': {
+      content: '""',
+      display: 'block',
+      height: 0
+    },
+    '&:after': {
+      content: '""',
+      display: 'block',
+      height: 0
+    },
+    '& > code, & > span': {
+      display: 'block'
+    },
+    '&:not([hidden])': {
+      display: 'block'
+    }
+  };
+
+  const resp = _responsive(media, $size, sizeIndex => fontSize(sizes[sizeIndex] || defaultSize));
+
+  return [base, ...resp];
+}
+function fontSize(size) {
+  const {
+    ascenderHeight,
+    descenderHeight,
+    fontSize,
+    iconSize,
+    letterSpacing,
+    lineHeight
+  } = size;
+  const negHeight = ascenderHeight + descenderHeight;
+  const capHeight = lineHeight - negHeight;
+  const iconOffset = (capHeight - iconSize) / 2;
+  const customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1;
+  const customIconOffset = (capHeight - customIconSize) / 2;
+  return {
+    fontSize: rem(fontSize),
+    lineHeight: `calc(${lineHeight} / ${fontSize})`,
+    letterSpacing: rem(letterSpacing),
+    transform: `translateY(${rem(descenderHeight)})`,
+    '&:before': {
+      marginTop: `calc(${rem(0 - negHeight)} - 1px)`
+    },
+    '&:after': {
+      marginBottom: '-1px'
+    },
+    '& svg:not([data-sanity-icon])': {
+      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
+      margin: rem(customIconOffset)
+    },
+    '& [data-sanity-icon]': {
+      fontSize: `calc(${iconSize} / 16 * 1rem)`,
+      margin: rem(iconOffset)
+    }
+  };
+}
+
+/**
+ * Get responsive CSS for the `code` font style.
+ * @internal
+ */
+
+function responsiveCodeFontStyle(props) {
+  return responsiveFont('code', props);
+}
+
+/**
+ * Get responsive CSS for the `heading` font style.
+ * @internal
+ */
+
+function responsiveHeadingFont(props) {
+  return responsiveFont('heading', props);
+}
+
+/**
+ * Get responsive CSS for the `label` font style.
+ * @internal
+ */
+
+function responsiveLabelFont(props) {
+  return responsiveFont('label', props);
+}
+
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+
+function responsiveTextAlignStyle(props) {
+  const {
+    theme
+  } = props;
+  return _responsive(theme.sanity.media, props.$align, textAlign => {
+    return {
+      textAlign
+    };
+  });
+}
+
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+
+function responsiveTextFont(props) {
+  return responsiveFont('text', props);
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+
+function useArrayProp(val, defaultVal) {
+  const __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
+
+  return useMemo(() => _getArrayProp(val, defaultVal), // Improve performance: Keep object identify for a given hash of the value
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [__perf_hash__]);
+}
 
 function _getElements(element, elementsArg) {
   const ret = [element];
@@ -128,21 +351,107 @@ function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
 }
 
 /**
- * Subscribe to the rect of a DOM element.
+ * @internal
+ */
+
+const _ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
+
+// NOTE: this should NOT have size effects
+
+/**
+ * @internal
+ */
+
+const _elementSizeObserver = _createElementSizeObserver();
+
+function _createElementRectValueListener() {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver = new _ResizeObserver(([entry]) => {
+        subscriber({
+          _contentRect: entry.contentRect,
+          border: {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize
+          },
+          content: {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          }
+        });
+      });
+      resizeObserver.observe(element);
+      return () => {
+        resizeObserver.unobserve(element);
+        resizeObserver.disconnect();
+      };
+    }
+
+  };
+}
+
+function _createElementSizeObserver() {
+  const disposeCache = new WeakMap();
+  const subscribersCache = new WeakMap();
+  return {
+    subscribe(element, subscriber) {
+      const subscribers = subscribersCache.get(element) || [];
+      let dispose = disposeCache.get(element);
+
+      if (!subscribersCache.has(element)) {
+        subscribersCache.set(element, subscribers);
+
+        const listener = _createElementRectValueListener(); // listen
+
+
+        dispose = listener.subscribe(element, elementRect => {
+          for (const sub of subscribers) {
+            sub(elementRect);
+          }
+        });
+      }
+
+      subscribers.push(subscriber);
+      return () => {
+        // dispose
+        const idx = subscribers.indexOf(subscriber);
+
+        if (idx > -1) {
+          subscribers.splice(idx, 1);
+        }
+
+        if (subscribers.length === 0) {
+          // unlisten
+          if (dispose) dispose();
+        }
+      };
+    }
+
+  };
+}
+
+/**
+ * Subscribe to the size of a DOM element.
  * @beta
  */
 
-function useElementRect(element) {
-  const [rect, setRect] = useState(null);
+function useElementSize(element) {
+  const [size, setSize] = useState(null);
   useEffect(() => {
     if (!element) return undefined;
-    const ro = new ResizeObserver(entries => {
-      setRect(entries[0].contentRect);
-    });
-    ro.observe(element);
-    return () => ro.disconnect();
+    return _elementSizeObserver.subscribe(element, setSize);
   }, [element]);
-  return rect;
+  return size;
+}
+
+/**
+ * Subscribe to the rect of a DOM element.
+ * @deprecated Use `useElementSize` instead
+ */
+
+function useElementRect(element) {
+  const elementSize = useElementSize(element);
+  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
 
 /**
@@ -2233,8 +2542,7 @@ const color = createColorTheme({
 
 const fonts = {
   code: {
-    family: '-apple-system-ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace',
-    horizontalOffset: 0.075,
+    family: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
     weights: {
       regular: 400,
       medium: 500,
@@ -2280,7 +2588,6 @@ const fonts = {
   },
   heading: {
     family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    horizontalOffset: 0.075,
     weights: {
       regular: 700,
       medium: 800,
@@ -2316,15 +2623,15 @@ const fonts = {
       lineHeight: 33,
       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,
@@ -2333,7 +2640,6 @@ const fonts = {
   },
   label: {
     family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    horizontalOffset: 0.075,
     weights: {
       regular: 600,
       medium: 700,
@@ -2379,7 +2685,6 @@ const fonts = {
   },
   text: {
     family: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    horizontalOffset: 0.075,
     weights: {
       regular: 400,
       medium: 500,
@@ -2548,7 +2853,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
 
 const ThemeContext = globalScope[key$7];
 
-const _excluded$H = ["color", "layer"];
+const _excluded$I = ["color", "layer"];
 /**
  * @public
  */
@@ -2568,7 +2873,7 @@ function ThemeProvider(props) {
       color: rootColor,
       layer: rootLayer
     } = themeProp,
-          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
+          restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
 
     const colorScheme = rootColor[scheme] || rootColor.light;
     const color = colorScheme[tone] || colorScheme.default;
@@ -2785,245 +3090,36 @@ function usePrefersDark() {
  * @beta
  */
 
-const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-
-/**
- * @beta
- */
-
-function useForwardedRef(ref) {
-  const innerRef = useRef(null);
-  useIsomorphicEffect(() => {
-    if (!ref) return;
-
-    if (typeof ref === 'function') {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-  return innerRef;
-}
-
-/**
- * @beta
- */
-
-function useCustomValidity(ref, customValidity) {
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.setCustomValidity(customValidity || '');
-    }
-  }, [customValidity, ref]);
-}
-
-/**
- * @internal
- */
-
-function fillCSSObject(propKeys, value) {
-  return propKeys.reduce((obj, propKey) => {
-    obj[propKey] = value;
-    return obj;
-  }, {});
-}
-/**
- * @public
- */
-
-function rem(pixelValue) {
-  if (pixelValue === 0) return 0;
-  return `${pixelValue / 16}rem`;
-}
-/**
- * @internal
- */
-
-function responsive(media, values, callback) {
-  const statements = values.map(callback);
-  return statements.map((statement, mediaIndex) => {
-    if (mediaIndex === 0) return statement;
-    return {
-      [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
-    };
-  });
-}
-/**
- * @internal
- */
-
-function getResponsiveProp(val, defaultVal) {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY;
-  return Array.isArray(val) ? val : [val];
-}
-/**
- * @internal
- */
-
-function getResponsiveSpace(theme, props, spaceIndexes = EMPTY_ARRAY) {
-  if (!Array.isArray(spaceIndexes)) {
-    throw new Error('the property must be array of numbers');
-  }
-
-  if (spaceIndexes.length === 0) {
-    return null;
-  }
-
-  return responsive(theme.sanity.media, spaceIndexes, spaceIndex => fillCSSObject(props, rem(theme.sanity.space[spaceIndex])));
-}
-
-/**
- * A utility function getting responsive font styles.
- * @internal
- */
-
-function responsiveFont(fontKey, props) {
-  const {
-    $size,
-    $weight,
-    theme
-  } = props;
-  const {
-    fonts,
-    media
-  } = theme.sanity;
-  const {
-    family,
-    sizes,
-    weights,
-    horizontalOffset
-  } = fonts[fontKey];
-  const fontWeight = $weight && weights[$weight] || weights.regular; // @todo: make this configurable
-
-  const defaultSize = sizes[2];
-  const base = {
-    position: 'relative',
-    fontFamily: family,
-    fontWeight,
-    padding: '1px',
-    margin: 0,
-    '&:before': {
-      content: '""',
-      display: 'block',
-      height: 0
-    },
-    '&:after': {
-      content: '""',
-      display: 'block',
-      height: 0
-    },
-    '& > code, & > span': {
-      display: 'block'
-    },
-    '&:not([hidden])': {
-      display: 'block'
-    }
-  };
-  const resp = responsive(media, getResponsiveProp($size), sizeIndex => fontSize(sizes[sizeIndex] || defaultSize, horizontalOffset));
-  return [base, ...resp];
-}
-function fontSize(size, horizontalOffset) {
-  const {
-    ascenderHeight,
-    descenderHeight,
-    fontSize,
-    iconSize,
-    letterSpacing,
-    lineHeight
-  } = size;
-  const negHeight = ascenderHeight + descenderHeight;
-  const capHeight = lineHeight - negHeight;
-  const iconOffset = (capHeight - iconSize) / 2;
-  const customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1;
-  const customIconOffset = (capHeight - customIconSize) / 2;
-  return {
-    fontSize: rem(fontSize),
-    lineHeight: `calc(${lineHeight} / ${fontSize})`,
-    letterSpacing: rem(letterSpacing),
-    transform: `translateY(${rem(descenderHeight)})`,
-    '&:before': {
-      marginTop: `calc(${rem(0 - negHeight)} - 1px)`
-    },
-    '&:after': {
-      marginBottom: '-1px'
-    },
-    '& > code, & > span': {
-      margin: horizontalOffset ? `0 calc(${rem(0 - horizontalOffset * fontSize)} - 1px)` : '0 -1px'
-    },
-    '& svg:not([data-sanity-icon])': {
-      fontSize: `calc(${customIconSize} / 16 * 1rem)`,
-      margin: [// top & bottom
-      rem(customIconOffset), // left & right
-      horizontalOffset ? `calc(${rem(customIconOffset)} + ${rem(horizontalOffset * fontSize)})` : rem(customIconOffset)].join(' ')
-    },
-    '& [data-sanity-icon]': {
-      fontSize: `calc(${iconSize} / 16 * 1rem)`,
-      margin: [// top & bottom
-      rem(iconOffset), // left & right
-      horizontalOffset ? `calc(${rem(iconOffset)} + ${rem(horizontalOffset * fontSize)})` : rem(iconOffset)].join(' ')
-    }
-  };
-}
-
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-
-function responsiveCodeFontStyle(props) {
-  return responsiveFont('code', props);
-}
-
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-
-function responsiveHeadingFont(props) {
-  return responsiveFont('heading', props);
-}
-
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-
-function responsiveLabelFont(props) {
-  return responsiveFont('label', props);
-}
-
-/**
- * Get responsive text align styles.
- * @internal
- */
-
-function responsiveTextAlignStyle(props) {
-  const {
-    theme
-  } = props;
-  return responsive(theme.sanity.media, getResponsiveProp(props.$align), textAlign => {
-    return {
-      textAlign
-    };
-  });
-}
-
+const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 /**
- * Get responsive CSS for the `text` font style.
- * @internal
+ * @beta
  */
 
-function responsiveTextFont(props) {
-  return responsiveFont('text', props);
+function useForwardedRef(ref) {
+  const innerRef = useRef(null);
+  useIsomorphicEffect(() => {
+    if (!ref) return;
+
+    if (typeof ref === 'function') {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
 }
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 
-function useResponsiveProp(val, defaultVal) {
-  return useMemo(() => getResponsiveProp(val, defaultVal), [defaultVal, val]);
+function useCustomValidity(ref, customValidity) {
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.setCustomValidity(customValidity || '');
+    }
+  }, [customValidity, ref]);
 }
 
 const BORDER_VALUE = '1px solid var(--card-border-color)';
@@ -3038,7 +3134,7 @@ function border(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$border), value => value ? {
+  return _responsive(media, props.$border, value => value ? {
     '&&': {
       border: BORDER_VALUE
     }
@@ -3056,7 +3152,7 @@ function borderTop(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$borderTop), value => value ? {
+  return _responsive(media, props.$borderTop, value => value ? {
     '&&': {
       borderTop: BORDER_VALUE
     }
@@ -3074,7 +3170,7 @@ function borderRight(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$borderRight), value => value ? {
+  return _responsive(media, props.$borderRight, value => value ? {
     '&&': {
       borderRight: BORDER_VALUE
     }
@@ -3092,7 +3188,7 @@ function borderBottom(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$borderBottom), value => value ? {
+  return _responsive(media, props.$borderBottom, value => value ? {
     '&&': {
       borderBottom: BORDER_VALUE
     }
@@ -3110,7 +3206,7 @@ function borderLeft(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$borderLeft), value => value ? {
+  return _responsive(media, props.$borderLeft, value => value ? {
     '&&': {
       borderLeft: BORDER_VALUE
     }
@@ -3148,7 +3244,7 @@ function responsiveBoxDisplayStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$display), display => ({
+  return _responsive(media, props.$display, display => ({
     '&:not([hidden])': {
       display
     }
@@ -3162,7 +3258,7 @@ function responsiveBoxSizingStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$sizing), sizing => ({
+  return _responsive(media, props.$sizing, sizing => ({
     boxSizing: BOX_SIZING[sizing]
   }));
 }
@@ -3174,7 +3270,7 @@ function responsiveBoxHeightStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$height), height => ({
+  return _responsive(media, props.$height, height => ({
     height: BOX_HEIGHT[height]
   }));
 }
@@ -3186,7 +3282,7 @@ function responsiveBoxOverflowStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$overflow), overflow => ({
+  return _responsive(media, props.$overflow, overflow => ({
     overflow
   }));
 }
@@ -3206,7 +3302,7 @@ function responsiveFlexAlignStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$align), align => {
+  return _responsive(media, props.$align, align => {
     return {
       alignItems: align
     };
@@ -3221,7 +3317,7 @@ function responsiveFlexGapStyle(props) {
     media,
     space
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$gap), gap => ({
+  return _responsive(media, props.$gap, gap => ({
     gap: gap ? rem(space[gap]) : undefined
   }));
 }
@@ -3233,7 +3329,7 @@ function responsiveFlexWrapStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$wrap), wrap => {
+  return _responsive(media, props.$wrap, wrap => {
     return {
       flexWrap: wrap
     };
@@ -3246,7 +3342,7 @@ function responsiveFlexJustifyStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$justify), justify => {
+  return _responsive(media, props.$justify, justify => {
     return {
       justifyContent: justify
     };
@@ -3259,7 +3355,7 @@ function responsiveFlexDirectionStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$direction), direction => {
+  return _responsive(media, props.$direction, direction => {
     return {
       flexDirection: direction
     };
@@ -3280,11 +3376,10 @@ function responsiveFlexItemStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$flex), flex => {
-    return {
-      flex
-    };
-  });
+  if (!props.$flex) return EMPTY_ARRAY;
+  return _responsive(media, props.$flex, flex => ({
+    flex
+  }));
 }
 
 function focusRingBorderStyle(border) {
@@ -3333,7 +3428,7 @@ function responsiveGridAutoFlowStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$autoFlow), autoFlow => ({
+  return _responsive(media, props.$autoFlow, autoFlow => ({
     gridAutoFlow: autoFlow
   }));
 }
@@ -3345,7 +3440,7 @@ function responsiveGridAutoRowsStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$autoRows), autoRows => ({
+  return _responsive(media, props.$autoRows, autoRows => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
   }));
 }
@@ -3357,7 +3452,7 @@ function responsiveGridAutoColsStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$autoCols), autoCols => ({
+  return _responsive(media, props.$autoCols, autoCols => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
   }));
 }
@@ -3369,7 +3464,7 @@ function responsiveGridColumnsStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$columns), columns => ({
+  return _responsive(media, props.$columns, columns => ({
     gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
   }));
 }
@@ -3381,7 +3476,7 @@ function responsiveGridRowsStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$rows), rows => ({
+  return _responsive(media, props.$rows, rows => ({
     gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
   }));
 }
@@ -3394,7 +3489,7 @@ function responsiveGridGapStyle(props) {
     media,
     space
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$gap), gap => ({
+  return _responsive(media, props.$gap, gap => ({
     gridGap: gap ? rem(space[gap]) : undefined
   }));
 }
@@ -3407,7 +3502,7 @@ function responsiveGridGapXStyle(props) {
     media,
     space
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$gapX), gapX => ({
+  return _responsive(media, props.$gapX, gapX => ({
     columnGap: gapX ? rem(space[gapX]) : undefined
   }));
 }
@@ -3420,7 +3515,7 @@ function responsiveGridGapYStyle(props) {
     media,
     space
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$gapY), gapY => ({
+  return _responsive(media, props.$gapY, gapY => ({
     rowGap: gapY ? rem(space[gapY]) : undefined
   }));
 }
@@ -3444,7 +3539,7 @@ function responsiveGridItemRowStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$row), row => {
+  return _responsive(media, props.$row, row => {
     if (typeof row === 'number') {
       return {
         gridRow: `span ${row} / span ${row}`
@@ -3464,7 +3559,7 @@ function responsiveGridItemRowStartStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$rowStart), rowStart => ({
+  return _responsive(media, props.$rowStart, rowStart => ({
     gridRowStart: rowStart
   }));
 }
@@ -3476,7 +3571,7 @@ function responsiveGridItemRowEndStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$rowEnd), rowEnd => ({
+  return _responsive(media, props.$rowEnd, rowEnd => ({
     gridRowEnd: rowEnd
   }));
 }
@@ -3488,7 +3583,7 @@ function responsiveGridItemColumnStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$column), column => {
+  return _responsive(media, props.$column, column => {
     if (typeof column === 'number') {
       return {
         gridColumn: `span ${column} / span ${column}`
@@ -3508,7 +3603,7 @@ function responsiveGridItemColumnStartStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$columnStart), columnStart => ({
+  return _responsive(media, props.$columnStart, columnStart => ({
     gridColumnStart: columnStart
   }));
 }
@@ -3520,15 +3615,18 @@ function responsiveGridItemColumnEndStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$columnEnd), columnEnd => ({
+  return _responsive(media, props.$columnEnd, columnEnd => ({
     gridColumnEnd: columnEnd
   }));
 }
 
 function responsiveInputPaddingStyle(props) {
   const {
+    $fontSize,
     $iconLeft,
     $iconRight,
+    $padding,
+    $space,
     theme
   } = props;
   const {
@@ -3536,29 +3634,26 @@ function responsiveInputPaddingStyle(props) {
     media,
     space: spaceScale
   } = theme.sanity;
-  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 len = Math.max($padding.length, $space.length, $fontSize.length);
   const _padding = [];
   const _space = [];
-  const _size = [];
+  const _fontSize = [];
 
   for (let i = 0; i < len; i += 1) {
-    _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];
+    _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];
   }
 
-  return responsive(media, _padding, (_, i) => {
-    const fontSize = fonts.text.sizes[_size[i]] || fonts.text.sizes[2];
-    const emSize = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
+  return _responsive(media, _padding, (_, i) => {
+    const size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2];
+    const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight;
     const p = spaceScale[_padding[i]];
     const s = spaceScale[_space[i]];
     const styles = {
-      paddingTop: rem(p - fontSize.ascenderHeight),
+      paddingTop: rem(p - size.ascenderHeight),
       paddingRight: rem(p),
-      paddingBottom: rem(p - fontSize.descenderHeight),
+      paddingBottom: rem(p - size.descenderHeight),
       paddingLeft: rem(p)
     };
     if ($iconRight) styles.paddingRight = rem(p + emSize + s);
@@ -3572,11 +3667,11 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-let _$B = t => t,
-    _t$D,
-    _t2$n,
-    _t3$e;
-const ROOT_STYLE = css(_t$D || (_t$D = _$B`
+let _$C = t => t,
+    _t$C,
+    _t2$m,
+    _t3$d;
+const ROOT_STYLE = css(_t$C || (_t$C = _$C`
   &:not([hidden]) {
     display: flex;
   }
@@ -3589,14 +3684,12 @@ function textInputRootStyle() {
 function textInputBaseStyle(props) {
   const {
     theme,
+    $tone,
     $weight
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_t2$n || (_t2$n = _$B`
-    --input-fg-color: ${0};
-    --input-placeholder-color: ${0};
-
+  return css(_t2$m || (_t2$m = _$C`
     appearance: none;
     background: none;
     border: 0;
@@ -3610,7 +3703,6 @@ function textInputBaseStyle(props) {
     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,
@@ -3622,39 +3714,46 @@ function textInputBaseStyle(props) {
       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) {
-      --input-fg-color: ${0};
-      --input-placeholder-color: ${0};
-    }
+    color: var(--input-fg-color);
 
-    /* disabled */
-    &:not(:invalid):disabled {
-      --input-fg-color: ${0};
-      --input-placeholder-color: ${0};
+    &::placeholder {
+      color: var(--input-placeholder-color);
     }
 
-    /* invalid */
-    &:invalid {
+    &[data-tone='${0}'] {
       --input-fg-color: ${0};
       --input-placeholder-color: ${0};
-    }
 
-    /* readOnly */
-    &:read-only {
-      --input-fg-color: ${0};
-      --input-placeholder-color: ${0};
+      /* enabled */
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${0};
+        --input-placeholder-color: ${0};
+      }
+
+      /* disabled */
+      &:not(:invalid):disabled {
+        --input-fg-color: ${0};
+        --input-placeholder-color: ${0};
+      }
+
+      /* invalid */
+      &:invalid {
+        --input-fg-color: ${0};
+        --input-placeholder-color: ${0};
+      }
+
+      /* readOnly */
+      &:read-only {
+        --input-fg-color: ${0};
+        --input-placeholder-color: ${0};
+      }
     }
-  `), color.default.enabled.fg, color.default.enabled.placeholder, font.family, $weight && font.weights[$weight] || font.weights.regular, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  `), font.family, $weight && font.weights[$weight] || font.weights.regular, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3664,7 +3763,7 @@ function textInputFontSizeStyle(props) {
     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 {
       fontSize: rem(size.fontSize),
@@ -3677,6 +3776,7 @@ function textInputRepresentationStyle(props) {
     $border,
     $hasPrefix,
     $hasSuffix,
+    $tone,
     theme
   } = props;
   const {
@@ -3684,9 +3784,7 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$e || (_t3$e = _$B`
-    --card-bg-color: ${0};
-    --card-fg-color: ${0};
+  return css(_t3$d || (_t3$d = _$C`
     --input-box-shadow: none;
 
     position: absolute;
@@ -3697,6 +3795,7 @@ function textInputRepresentationStyle(props) {
     display: block;
     pointer-events: none;
     z-index: 0;
+
     background-color: var(--card-bg-color);
     box-shadow: var(--input-box-shadow);
 
@@ -3705,48 +3804,53 @@ function textInputRepresentationStyle(props) {
     border-top-right-radius: ${0};
     border-bottom-right-radius: ${0};
 
-    /* enabled */
-    *:not(:disabled) + && {
-      --input-box-shadow: ${0};
-    }
-
-    /* invalid */
-    *:not(:disabled):invalid + && {
+    &[data-tone='${0}'] {
       --card-bg-color: ${0};
       --card-fg-color: ${0};
-      --input-box-shadow: ${0};
-    }
-
-    /* focused */
-    *:not(:disabled):focus + && {
-      --input-box-shadow: ${0};
-    }
 
-    /* disabled */
-    *:disabled + && {
-      --card-bg-color: ${0};
-      --card-fg-color: ${0};
-      --input-box-shadow: ${0};
-    }
+      /* enabled */
+      *:not(:disabled) + & {
+        --input-box-shadow: ${0};
+      }
 
-    /* hovered */
-    @media (hover: hover) {
-      *:not(:disabled):not(:read-only):not(:invalid):hover + && {
+      /* invalid */
+      *:not(:disabled):invalid + & {
         --card-bg-color: ${0};
         --card-fg-color: ${0};
+        --input-box-shadow: ${0};
       }
 
-      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + && {
+      /* focused */
+      *:not(:disabled):focus + & {
         --input-box-shadow: ${0};
       }
-    }
 
-    /* readOnly */
-    *:read-only + && {
-      --card-bg-color: ${0};
-      --card-fg-color: ${0};
+      /* disabled */
+      *:disabled + & {
+        --card-bg-color: ${0} !important;
+        --card-fg-color: ${0} !important;
+        --input-box-shadow: ${0};
+      }
+
+      /* readOnly */
+      *:read-only + & {
+        --card-bg-color: ${0} !important;
+        --card-fg-color: ${0} !important;
+      }
+
+      /* hovered */
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${0};
+          --card-fg-color: ${0};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {
+          --input-box-shadow: ${0};
+        }
+      }
     }
-  `), color.default.enabled.bg, color.default.enabled.fg, $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $border ? focusRingBorderStyle({
+  `), $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $tone, color.default.enabled.bg, color.default.enabled.fg, $border ? focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
@@ -3761,24 +3865,24 @@ function textInputRepresentationStyle(props) {
   }), color.default.disabled.bg, color.default.disabled.fg, $border ? focusRingBorderStyle({
     color: color.default.disabled.border,
     width: input.border.width
-  }) : 'none', color.default.hovered.bg, color.default.hovered.fg, $border ? focusRingBorderStyle({
+  }) : 'none', color.default.readOnly.bg, color.default.readOnly.fg, color.default.hovered.bg, color.default.hovered.fg, $border ? focusRingBorderStyle({
     color: color.default.hovered.border,
     width: input.border.width
-  }) : 'none', color.default.readOnly.bg, color.default.readOnly.fg);
+  }) : 'none');
 }
 
 function responsiveMarginStyle(props) {
   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))].filter(Boolean);
+  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)].filter(Boolean);
 }
 
 function responsivePaddingStyle(props) {
   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))].filter(Boolean);
+  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)].filter(Boolean);
 }
 
 function responsiveRadiusStyle(props) {
@@ -3789,7 +3893,7 @@ function responsiveRadiusStyle(props) {
     media,
     radius
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$radius), radiusIndex => ({
+  return _responsive(media, props.$radius, radiusIndex => ({
     borderRadius: rem(radius[radiusIndex])
   }));
 }
@@ -3799,7 +3903,7 @@ function toBoxShadow(shadow, color) {
 }
 
 function shadowStyle(shadow) {
-  if (!shadow) return EMPTY_RECORD$1;
+  if (!shadow) return EMPTY_RECORD;
   const outline = `0 0 0 ${rem(1)} var(--card-shadow-outline-color)`;
   const umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)');
   const penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)');
@@ -3817,13 +3921,13 @@ function responsiveShadowStyle(props) {
     media,
     shadows
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$shadow), shadow => shadowStyle(shadows[shadow]));
+  return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
 }
 
-let _$A = t => t,
-    _t$C,
-    _t2$m,
-    _t3$d;
+let _$B = t => t,
+    _t$B,
+    _t2$l,
+    _t3$c;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -3833,7 +3937,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_t$C || (_t$C = _$A`
+  return css(_t$B || (_t$B = _$B`
     color: var(--card-fg-color);
 
     ${0}
@@ -3875,19 +3979,19 @@ function textBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$m || (_t2$m = _$A`
+  `), $accent && css(_t2$l || (_t2$l = _$B`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$d || (_t3$d = _$A`
+    `)), $muted && css(_t3$c || (_t3$c = _$B`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family, weights.bold);
 }
 
-const _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$z = t => t,
-    _t$B;
+let _$A = t => t,
+    _t$A;
 const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_t$B || (_t$B = _$z`
+const SpanWithTextOverflow$2 = styled.span(_t$A || (_t$A = _$A`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -3907,7 +4011,7 @@ const Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
 
   let children = childrenProp;
 
@@ -3919,10 +4023,10 @@ const Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
     "data-ui": "Text"
   }, restProps, {
     "$accent": accent,
-    "$align": align,
+    "$align": useArrayProp(align),
     "$muted": muted,
     ref: ref,
-    "$size": size,
+    "$size": useArrayProp(size),
     "$weight": weight
   }), /*#__PURE__*/React.createElement("span", null, children));
 });
@@ -4025,7 +4129,7 @@ function responsiveAvatarSizeStyle(props) {
     avatar,
     media
   } = theme.sanity;
-  return responsive(media, props.$size, size => {
+  return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0];
     return {
       width: rem(avatarSize.size),
@@ -4078,7 +4182,7 @@ function avatarStrokeStyle() {
   };
 }
 
-const _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+const _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 const Arrow = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
@@ -4099,12 +4203,12 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
     status = 'online',
-    size: sizeProp
+    size: sizeProp = 0
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   const as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
-  const size = useResponsiveProp(sizeProp, [0]);
+  const size = useArrayProp(sizeProp);
   const theme = useTheme();
   const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray; // @todo: remove this
 
@@ -4133,6 +4237,7 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
       onImageLoadError(new Error('Avatar: the image failed to load'));
     }
   }, [onImageLoadError]);
+  const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
   return /*#__PURE__*/React.createElement(Root$D, _extends({
     as: as,
     "data-as": typeof as === 'string' ? as : undefined,
@@ -4186,14 +4291,14 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
     vectorEffect: "non-scaling-stroke"
   })), (imageFailed || !src) && initials && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Initials, null, /*#__PURE__*/React.createElement(Text, {
     as: "span",
-    size: size.map(s => s === 0 ? 0 : s + 1)
+    size: initialsSize
   }, /*#__PURE__*/React.createElement("strong", null, initials)))));
 });
 
-let _$y = t => t,
-    _t$A;
+let _$z = t => t,
+    _t$z;
 
-function responsiveAvatarCounterSizeStyle(props) {
+function _responsiveAvatarCounterSizeStyle(props) {
   const {
     theme
   } = props;
@@ -4201,9 +4306,9 @@ function responsiveAvatarCounterSizeStyle(props) {
     avatar,
     media
   } = theme.sanity;
-  return responsive(media, props.$size, size => {
+  return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size];
-    if (!avatarSize) return EMPTY_RECORD$1;
+    if (!avatarSize) return EMPTY_RECORD;
     return {
       borderRadius: rem(avatarSize.size / 2),
       minWidth: rem(avatarSize.size),
@@ -4212,11 +4317,11 @@ function responsiveAvatarCounterSizeStyle(props) {
   });
 }
 
-function avatarCounterBaseStyle(props) {
+function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_t$A || (_t$A = _$y`
+  return css(_t$z || (_t$z = _$z`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -4233,7 +4338,7 @@ function avatarCounterBaseStyle(props) {
   `), rem(theme.sanity.space[2]));
 }
 
-const Root$C = styled.div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle);
+const Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 /**
  * @public
  */
@@ -4241,17 +4346,17 @@ const Root$C = styled.div(responsiveAvatarCounterSizeStyle, avatarCounterBaseSty
 const AvatarCounter = /*#__PURE__*/forwardRef(function AvatarCounter(props, ref) {
   const {
     count,
-    size: sizeProp = 0,
-    tone
+    size: sizeProp = 0
   } = props;
-  const size = useResponsiveProp(sizeProp, [0]);
+  const size = useArrayProp(sizeProp);
+  const counterSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
   return /*#__PURE__*/React.createElement(Root$C, {
     "$size": size,
-    "data-tone": tone,
+    "data-ui": "AvatarCounter",
     ref: ref
   }, /*#__PURE__*/React.createElement(Text, {
     as: "span",
-    size: size.map(s => s === 0 ? 0 : s + 1)
+    size: counterSize
   }, /*#__PURE__*/React.createElement("strong", null, count)));
 });
 
@@ -4260,11 +4365,11 @@ function childrenToElementArray(children) {
   return childrenArray.filter(node => isElement(node) || isFragment(node) || typeof node === 'string');
 }
 
-const _excluded$E = ["children", "maxLength", "size", "tone"];
+const _excluded$F = ["children", "maxLength", "size"];
 
-let _$x = t => t,
-    _t$z;
-const BASE_STYLES = css(_t$z || (_t$z = _$x`
+let _$y = t => t,
+    _t$y;
+const BASE_STYLES = css(_t$y || (_t$y = _$y`
   white-space: nowrap;
 
   & > div {
@@ -4288,9 +4393,9 @@ function responsiveAvatarStackSizeStyle(props) {
     avatar,
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.size), size => {
+  return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size];
-    if (!avatarSize) return EMPTY_RECORD$1;
+    if (!avatarSize) return EMPTY_RECORD;
     return {
       '& > div + div': {
         marginLeft: rem(avatarSize.distance)
@@ -4308,13 +4413,13 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
   const {
     children: childrenProp,
     maxLength: maxLengthProp = 4,
-    size = 0,
-    tone
+    size: sizeProp = 0
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
-  const maxLength = Math.max(maxLengthProp, 0);
   const children = childrenToElementArray(childrenProp).filter(child => typeof child !== 'string');
+  const maxLength = Math.max(maxLengthProp, 0);
+  const size = useArrayProp(sizeProp);
   const len = children.length;
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
@@ -4323,23 +4428,20 @@ const AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
     "data-ui": "AvatarStack"
   }, restProps, {
     ref: ref,
-    size: size
+    "$size": size
   }), len === 0 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarCounter, {
-    count: len,
-    tone: tone
+    count: len
   })), len !== 0 && extraCount > 1 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(AvatarCounter, {
     count: extraCount,
-    size: size,
-    tone: tone
+    size: size
   })), visibleChildren.map((child, childIndex) => /*#__PURE__*/React.createElement("div", {
     key: String(childIndex)
   }, /*#__PURE__*/cloneElement(child, {
-    size,
-    tone
+    size
   }))));
 });
 
-const _excluded$D = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
+const _excluded$E = ["as", "column", "columnStart", "columnEnd", "display", "flex", "height", "margin", "marginX", "marginY", "marginTop", "marginRight", "marginBottom", "marginLeft", "overflow", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "row", "rowStart", "rowEnd", "sizing"];
 const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4374,46 +4476,46 @@ const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
     rowEnd,
     sizing
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
 
   return /*#__PURE__*/React.createElement(Root$A, _extends({
-    "data-as": asProp,
+    "data-as": typeof asProp === 'string' ? asProp : undefined,
     "data-ui": "Box"
   }, restProps, {
-    "$column": column,
-    "$columnStart": columnStart,
-    "$columnEnd": columnEnd,
-    "$display": display,
-    "$flex": flex,
-    "$height": height,
-    "$margin": margin,
-    "$marginX": marginX,
-    "$marginY": marginY,
-    "$marginTop": marginTop,
-    "$marginRight": marginRight,
-    "$marginBottom": marginBottom,
-    "$marginLeft": marginLeft,
-    "$overflow": overflow,
-    "$padding": padding,
-    "$paddingX": paddingX,
-    "$paddingY": paddingY,
-    "$paddingTop": paddingTop,
-    "$paddingRight": paddingRight,
-    "$paddingBottom": paddingBottom,
-    "$paddingLeft": paddingLeft,
-    "$row": row,
-    "$rowStart": rowStart,
-    "$rowEnd": rowEnd,
-    "$sizing": sizing,
+    "$column": useArrayProp(column),
+    "$columnStart": useArrayProp(columnStart),
+    "$columnEnd": useArrayProp(columnEnd),
+    "$display": useArrayProp(display),
+    "$flex": useArrayProp(flex),
+    "$height": useArrayProp(height),
+    "$margin": useArrayProp(margin),
+    "$marginX": useArrayProp(marginX),
+    "$marginY": useArrayProp(marginY),
+    "$marginTop": useArrayProp(marginTop),
+    "$marginRight": useArrayProp(marginRight),
+    "$marginBottom": useArrayProp(marginBottom),
+    "$marginLeft": useArrayProp(marginLeft),
+    "$overflow": useArrayProp(overflow),
+    "$padding": useArrayProp(padding),
+    "$paddingX": useArrayProp(paddingX),
+    "$paddingY": useArrayProp(paddingY),
+    "$paddingTop": useArrayProp(paddingTop),
+    "$paddingRight": useArrayProp(paddingRight),
+    "$paddingBottom": useArrayProp(paddingBottom),
+    "$paddingLeft": useArrayProp(paddingLeft),
+    "$row": useArrayProp(row),
+    "$rowStart": useArrayProp(rowStart),
+    "$rowEnd": useArrayProp(rowEnd),
+    "$sizing": useArrayProp(sizing),
     as: asProp,
     ref: ref
   }), props.children);
 });
 
-let _$w = t => t,
-    _t$y,
-    _t2$l,
-    _t3$c;
+let _$x = t => t,
+    _t$x,
+    _t2$k,
+    _t3$b;
 function labelBaseStyle(props) {
   const {
     $accent,
@@ -4423,7 +4525,7 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return css(_t$y || (_t$y = _$w`
+  return css(_t$x || (_t$x = _$x`
     text-transform: uppercase;
 
     ${0}
@@ -4443,19 +4545,19 @@ function labelBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$l || (_t2$l = _$w`
+  `), $accent && css(_t2$k || (_t2$k = _$x`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$c || (_t3$c = _$w`
+    `)), $muted && css(_t3$b || (_t3$b = _$x`
       color: var(--card-muted-fg-color);
     `)), fonts.code.family);
 }
 
-const _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$v = t => t,
-    _t$x;
+let _$w = t => t,
+    _t$w;
 const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_t$x || (_t$x = _$v`
+const SpanWithTextOverflow$1 = styled.span(_t$w || (_t$w = _$w`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4475,7 +4577,7 @@ const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   let children = childrenProp;
 
@@ -4489,9 +4591,9 @@ const Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
     "data-ui": "Label"
   }, restProps, {
     "$accent": accent,
-    "$align": align,
+    "$align": useArrayProp(align),
     "$muted": muted,
-    "$size": size,
+    "$size": useArrayProp(size),
     "$weight": weight,
     ref: ref
   }), children);
@@ -4516,7 +4618,7 @@ function badgeStyle(props) {
   };
 }
 
-const _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+const _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4531,22 +4633,22 @@ const Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
     radius = 2,
     tone = 'default'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
 
   return /*#__PURE__*/React.createElement(Root$y, _extends({
     "data-ui": "Badge"
   }, restProps, {
     "$mode": mode,
     "$tone": tone,
-    "$radius": radius,
-    padding: padding,
+    "$radius": useArrayProp(radius),
+    padding: useArrayProp(padding),
     ref: ref
   }), /*#__PURE__*/React.createElement(Label, {
     size: fontSize
   }, children));
 });
 
-const _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
+const _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
 const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4561,25 +4663,25 @@ const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
     justify,
     wrap
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$B);
 
   return /*#__PURE__*/React.createElement(Root$x, _extends({
     "data-ui": "Flex"
   }, restProps, {
-    "$align": align,
-    "$direction": direction,
-    "$gap": gap,
-    "$justify": justify,
-    "$wrap": wrap,
+    "$align": useArrayProp(align),
+    "$direction": useArrayProp(direction),
+    "$gap": useArrayProp(gap),
+    "$justify": useArrayProp(justify),
+    "$wrap": useArrayProp(wrap),
     forwardedAs: as,
     ref: ref
   }));
 });
 
-let _$u = t => t,
-    _t$w,
-    _t2$k;
-const rotate$1 = keyframes(_t$w || (_t$w = _$u`
+let _$v = t => t,
+    _t$v,
+    _t2$j;
+const rotate$1 = keyframes(_t$v || (_t$v = _$v`
   from {
     transform: rotate(0deg);
   }
@@ -4588,7 +4690,7 @@ const rotate$1 = keyframes(_t$w || (_t$w = _$u`
     transform: rotate(360deg);
   }
 `));
-const Root$w = styled(Text)(_t2$k || (_t2$k = _$u`
+const Root$w = styled(Text)(_t2$j || (_t2$j = _$v`
   & > span > svg {
     animation: ${0} 500ms linear infinite;
   }
@@ -4638,14 +4740,14 @@ function _colorVarsStyle(base, color, checkered = false) {
   };
 }
 
-let _$t = t => t,
-    _t$v;
+let _$u = t => t,
+    _t$u;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return css(_t$v || (_t$v = _$t`
+  return css(_t$u || (_t$u = _$u`
     -webkit-font-smoothing: inherit;
     appearance: none;
     display: inline-flex;
@@ -4727,12 +4829,12 @@ function buttonColorStyles(props) {
   }, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.button) == null ? void 0 : _theme$sanity$styles$.root].filter(Boolean);
 }
 
-const _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
+const _excluded$A = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-let _$s = t => t,
-    _t$u;
+let _$t = t => t,
+    _t$t;
 const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_t$u || (_t$u = _$s`
+const LoadingBox = styled.div(_t$t || (_t$t = _$t`
   position: absolute;
   top: 0;
   left: 0;
@@ -4757,26 +4859,36 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
     fontSize,
     icon,
     iconRight,
-    justify = 'center',
+    justify: justifyProp = 'center',
     loading,
     mode = 'default',
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
     selected,
-    space = 3,
+    space: spaceProp = 3,
     text,
     textAlign,
     tone = 'default',
     type = 'button'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
+  const justify = useArrayProp(justifyProp);
+  const padding = useArrayProp(paddingProp);
+  const paddingX = useArrayProp(paddingXProp);
+  const paddingY = useArrayProp(paddingYProp);
+  const paddingTop = useArrayProp(paddingTopProp);
+  const paddingBottom = useArrayProp(paddingBottomProp);
+  const paddingLeft = useArrayProp(paddingLeftProp);
+  const paddingRight = useArrayProp(paddingRightProp);
+  const radius = useArrayProp(radiusProp);
+  const space = useArrayProp(spaceProp);
   const theme = useTheme();
   const boxProps = useMemo(() => ({
     // flex: 1,
@@ -4822,10 +4934,10 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-let _$r = t => t,
-    _t$t,
-    _t2$j,
-    _t3$b;
+let _$s = t => t,
+    _t$s,
+    _t2$i,
+    _t3$a;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4835,7 +4947,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_t$t || (_t$t = _$r`
+  return css(_t$s || (_t$s = _$s`
     ${0}
 
     &[data-as='button'] {
@@ -4858,7 +4970,7 @@ function cardBaseStyle(props) {
     &[data-as='pre'] {
       font: inherit;
     }
-  `), $checkered && css(_t2$j || (_t2$j = _$r`
+  `), $checkered && css(_t2$i || (_t2$i = _$s`
       background-size: ${0}px ${0}px;
       background-position: 50% 50%;
       background-image: var(--card-bg-image);
@@ -4883,7 +4995,7 @@ function cardColorStyle(props) {
     width: 0,
     color: 'var(--card-border-color)'
   };
-  return css(_t3$b || (_t3$b = _$r`
+  return css(_t3$a || (_t3$a = _$s`
     ${0}
 
     background-color: var(--card-bg-color);
@@ -4983,7 +5095,7 @@ function cardColorStyle(props) {
   }) : undefined, $focusRing ? focusRingBorderStyle(border) : undefined, (_theme$sanity$styles = theme.sanity.styles) == null ? void 0 : (_theme$sanity$styles$ = _theme$sanity$styles.card) == null ? void 0 : _theme$sanity$styles$.root);
 }
 
-const _excluded$y = ["pressed", "__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "radius", "scheme", "selected", "shadow", "tone"];
+const _excluded$z = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
 const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 /**
  * @public
@@ -4991,7 +5103,6 @@ const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, respons
 
 const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
   const {
-    pressed = false,
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,
     as: asProp,
@@ -5000,13 +5111,14 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     borderRight,
     borderBottom,
     borderLeft,
+    pressed,
     radius = 0,
     scheme,
     selected,
     shadow,
     tone: toneProp = 'default'
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   const as = isValidElementType(asProp) ? asProp : 'div';
   const rootTheme = useRootTheme();
@@ -5016,34 +5128,34 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
     tone: tone
   }, /*#__PURE__*/React.createElement(Root$u, _extends({
     "data-as": typeof as === 'string' ? as : undefined,
-    "data-checkered": checkered ? '' : undefined,
-    "data-pressed": pressed ? '' : undefined,
     "data-scheme": rootTheme.scheme,
-    "data-selected": selected ? '' : undefined,
     "data-ui": "Card",
     "data-tone": tone
   }, restProps, {
-    "$border": border,
-    "$borderTop": borderTop,
-    "$borderRight": borderRight,
-    "$borderBottom": borderBottom,
-    "$borderLeft": borderLeft,
+    "$border": useArrayProp(border),
+    "$borderTop": useArrayProp(borderTop),
+    "$borderRight": useArrayProp(borderRight),
+    "$borderBottom": useArrayProp(borderBottom),
+    "$borderLeft": useArrayProp(borderLeft),
     "$checkered": checkered,
     "$focusRing": focusRing,
-    "$radius": radius,
-    "$shadow": shadow,
+    "$radius": useArrayProp(radius),
+    "$shadow": useArrayProp(shadow),
     "$tone": tone,
+    "data-checkered": checkered ? '' : undefined,
+    "data-pressed": pressed ? '' : undefined,
+    "data-selected": selected ? '' : undefined,
     forwardedAs: as,
     ref: ref,
     selected: selected
   })));
 });
 
-let _$q = t => t,
-    _t$s,
-    _t2$i;
+let _$r = t => t,
+    _t$r,
+    _t2$h;
 function checkboxBaseStyles() {
-  return css(_t$s || (_t$s = _$q`
+  return css(_t$r || (_t$r = _$r`
     position: relative;
     display: inline-block;
   `));
@@ -5058,7 +5170,7 @@ function inputElementStyles(props) {
     input,
     radius
   } = theme.sanity;
-  return css(_t2$i || (_t2$i = _$q`
+  return css(_t2$h || (_t2$h = _$r`
     position: absolute;
     top: 0;
     left: 0;
@@ -5143,7 +5255,7 @@ function inputElementStyles(props) {
   }), color.default.disabled.fg);
 }
 
-const _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
+const _excluded$y = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
 const Root$t = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 /**
@@ -5160,7 +5272,7 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef)
     readOnly,
     style
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
 
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -5185,8 +5297,8 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef)
   })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckmarkIcon, null), /*#__PURE__*/React.createElement(RemoveIcon, null)));
 });
 
-let _$p = t => t,
-    _t$r;
+let _$q = t => t,
+    _t$q;
 
 function codeSyntaxHighlightingStyle({
   theme
@@ -5305,7 +5417,7 @@ function codeSyntaxHighlightingStyle({
 }
 
 function codeBaseStyle() {
-  return css(_t$r || (_t$r = _$p`
+  return css(_t$q || (_t$q = _$q`
     color: var(--card-code-fg-color);
 
     & code {
@@ -5328,7 +5440,7 @@ function codeBaseStyle() {
   `), codeSyntaxHighlightingStyle);
 }
 
-const _excluded$w = ["children", "language", "size", "weight"];
+const _excluded$x = ["children", "language", "size", "weight"];
 const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 /**
  * @public
@@ -5341,14 +5453,14 @@ const Code = /*#__PURE__*/forwardRef(function Code(props, ref) {
     size = 2,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   const language = typeof languageProp === 'string' ? languageProp : undefined;
   const registered = language ? Refractor.hasLanguage(language) : false;
   return /*#__PURE__*/React.createElement(Root$s, _extends({
     "data-ui": "Code"
   }, restProps, {
-    "$size": size,
+    "$size": useArrayProp(size),
     "$weight": weight,
     ref: ref
   }), !(language && registered) && /*#__PURE__*/React.createElement("code", null, children), language && registered && /*#__PURE__*/React.createElement(Refractor, {
@@ -5373,12 +5485,12 @@ function responsiveContainerWidthStyle(props) {
     container,
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$width), val => ({
+  return _responsive(media, props.$width, val => ({
     maxWidth: val === 'auto' ? 'none' : rem(container[val])
   }));
 }
 
-const _excluded$v = ["as", "width"];
+const _excluded$w = ["as", "width"];
 const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 /**
  * @public
@@ -5389,18 +5501,18 @@ const Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
     as,
     width = 2
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
 
   return /*#__PURE__*/React.createElement(Root$r, _extends({
     "data-ui": "Container"
   }, restProps, {
-    "$width": width,
+    "$width": useArrayProp(width),
     forwardedAs: as,
     ref: ref
   }));
 });
 
-const _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
+const _excluded$v = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
 const Root$q = styled(Box)(responsiveGridStyle);
 /**
  * @public
@@ -5419,36 +5531,36 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
     rows,
     children
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$v);
 
   return /*#__PURE__*/React.createElement(Root$q, _extends({
     "data-as": typeof as === 'string' ? as : undefined,
     "data-ui": "Grid"
   }, restProps, {
-    "$autoRows": autoRows,
-    "$autoCols": autoCols,
-    "$autoFlow": autoFlow,
-    "$columns": columns,
-    "$gap": gap,
-    "$gapX": gapX,
-    "$gapY": gapY,
-    "$rows": rows,
+    "$autoRows": useArrayProp(autoRows),
+    "$autoCols": useArrayProp(autoCols),
+    "$autoFlow": useArrayProp(autoFlow),
+    "$columns": useArrayProp(columns),
+    "$gap": useArrayProp(gap),
+    "$gapX": useArrayProp(gapX),
+    "$gapY": useArrayProp(gapY),
+    "$rows": useArrayProp(rows),
     forwardedAs: as,
     ref: ref
   }), children);
 });
 
-let _$o = t => t,
-    _t$q,
-    _t2$h,
-    _t3$a;
+let _$p = t => t,
+    _t$p,
+    _t2$g,
+    _t3$9;
 function headingBaseStyle(props) {
   const {
     $accent,
     $muted,
     theme
   } = props;
-  return css(_t$q || (_t$q = _$o`
+  return css(_t$p || (_t$p = _$p`
     ${0}
 
     ${0}
@@ -5482,19 +5594,19 @@ function headingBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$h || (_t2$h = _$o`
+  `), $accent && css(_t2$g || (_t2$g = _$p`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$a || (_t3$a = _$o`
+    `)), $muted && css(_t3$9 || (_t3$9 = _$p`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family);
 }
 
-const _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+const _excluded$u = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$n = t => t,
-    _t$p;
+let _$o = t => t,
+    _t$o;
 const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_t$p || (_t$p = _$n`
+const SpanWithTextOverflow = styled.span(_t$o || (_t$o = _$o`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -5514,7 +5626,7 @@ const Heading = /*#__PURE__*/forwardRef(function Heading(props, ref) {
     textOverflow,
     weight
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   let children = childrenProp;
 
@@ -5526,9 +5638,9 @@ const Heading = /*#__PURE__*/forwardRef(function Heading(props, ref) {
     "data-ui": "Heading"
   }, restProps, {
     "$accent": accent,
-    "$align": align,
+    "$align": useArrayProp(align),
     "$muted": muted,
-    "$size": size,
+    "$size": useArrayProp(size),
     "$weight": weight,
     ref: ref
   }), /*#__PURE__*/React.createElement("span", null, children));
@@ -5550,7 +5662,7 @@ function inlineSpaceStyle(props) {
   const {
     theme
   } = props;
-  return responsive(theme.sanity.media, getResponsiveProp(props.$space), spaceIndex => {
+  return _responsive(theme.sanity.media, props.$space, spaceIndex => {
     const space = rem(theme.sanity.space[spaceIndex]);
     return {
       margin: `-${space} 0 0 -${space}`,
@@ -5561,7 +5673,7 @@ function inlineSpaceStyle(props) {
   });
 }
 
-const _excluded$s = ["as", "children", "space"];
+const _excluded$t = ["as", "children", "space"];
 const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 /**
  * @public
@@ -5573,27 +5685,27 @@ const Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
     children: childrenProp,
     space
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
 
-  const children = childrenToElementArray(childrenProp).filter(Boolean);
+  const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /*#__PURE__*/React.createElement("div", {
+    key: idx
+  }, child)), [childrenProp]);
   return /*#__PURE__*/React.createElement(Root$o, _extends({
     "data-ui": "Inline"
   }, restProps, {
-    "$space": space,
+    "$space": useArrayProp(space),
     forwardedAs: as,
     ref: ref
-  }), children.map((child, idx) => /*#__PURE__*/React.createElement("div", {
-    key: idx
-  }, child)));
+  }), children);
 });
 
-const _excluded$r = ["children", "fontSize", "padding", "radius"];
+const _excluded$s = ["children", "fontSize", "padding", "radius"];
 
-let _$m = t => t,
-    _t$o;
+let _$n = t => t,
+    _t$n;
 
 function kbdStyle() {
-  return css(_t$o || (_t$o = _$m`
+  return css(_t$n || (_t$n = _$n`
     background: var(--card-bg-color);
     font: inherit;
     box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
@@ -5616,12 +5728,12 @@ const KBD = /*#__PURE__*/forwardRef(function KBD(props, ref) {
     padding = 1,
     radius = 2
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
 
   return /*#__PURE__*/React.createElement(Root$n, _extends({
     "data-ui": "KBD"
   }, restProps, {
-    "$radius": radius,
+    "$radius": useArrayProp(radius),
     ref: ref
   }), /*#__PURE__*/React.createElement(Box, {
     as: "span",
@@ -5675,12 +5787,6 @@ function useBoundaryElement() {
   return value || DEFAULT_VALUE;
 }
 
-/**
- * @internal
- */
-
-const RO = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : ResizeObserver$1;
-
 function findMaxBreakpoints(media, width) {
   const ret = [];
 
@@ -5708,7 +5814,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 
-const _excluded$q = ["children", "media"];
+const _excluded$r = ["children", "media"];
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -5721,22 +5827,16 @@ const ElementQuery = /*#__PURE__*/forwardRef(function ElementQuery(props, ref) {
     children,
     media = theme.sanity.media
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
-  const [width, setWidth] = useState(() => window.innerWidth);
   const forwardedRef = useForwardedRef(ref);
   const [element, setElement] = useState(null);
-  useEffect(() => {
-    if (!element) return;
-
-    const handleResizeEntries = entries => {
-      setWidth(entries[0].contentRect.width);
-    };
+  const elementSize = useElementSize(element);
+  const width = useMemo(() => {
+    var _elementSize$border$w;
 
-    const ro = new RO(handleResizeEntries);
-    ro.observe(element);
-    return () => ro.disconnect();
-  }, [element]);
+    return (_elementSize$border$w = elementSize == null ? void 0 : elementSize.border.width) != null ? _elementSize$border$w : window.innerWidth;
+  }, [elementSize]);
   const max = useMemo(() => findMaxBreakpoints(media, width), [media, width]);
   const min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
   const setRef = useCallback(el => {
@@ -5829,7 +5929,7 @@ function LayerProvider(props) {
     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];
@@ -5855,25 +5955,26 @@ function LayerProvider(props) {
   }, children);
 }
 
-const _excluded$p = ["children", "style"],
+const _excluded$q = ["children", "style"],
       _excluded2$1 = ["children", "zOffset"];
 
-let _$l = t => t,
-    _t$n;
-const Root$m = styled.div(_t$n || (_t$n = _$l`
+let _$m = t => t,
+    _t$m;
+const Root$m = styled.div(_t$m || (_t$m = _$m`
   position: relative;
 `));
 const LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref) {
   const {
     children,
-    style = EMPTY_RECORD$1
+    style = EMPTY_RECORD
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
   const {
     zIndex
   } = useLayer();
   return /*#__PURE__*/React.createElement(Root$m, _extends({}, restProps, {
+    "data-ui": "Layer",
     ref: ref,
     style: _extends({}, style, {
       zIndex
@@ -5969,14 +6070,14 @@ function Portal(props) {
 function useUnique(value) {
   const valueRef = useRef(value);
 
-  if (!isEqual(valueRef.current, value)) {
+  if (!_isEqual(valueRef.current, value)) {
     valueRef.current = value;
   }
 
   return valueRef.current;
 }
 
-function isEqual(objA, objB) {
+function _isEqual(objA, objB) {
   if (!objA || !objB) {
     return objA === objB;
   }
@@ -6018,9 +6119,9 @@ function PortalProvider(props) {
   }, children);
 }
 
-let _$k = t => t,
-    _t$m;
-const Root$l = styled.div(_t$m || (_t$m = _$k`
+let _$l = t => t,
+    _t$l;
+const Root$l = styled.div(_t$l || (_t$l = _$l`
   display: block;
   width: 0;
   height: 0;
@@ -6210,15 +6311,15 @@ function _isScrollable(el) {
   return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
 }
 
-const _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
+const _excluded$p = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-let _$j = t => t,
-    _t$l,
-    _t2$g;
-const Root$k = styled.div(_t$l || (_t$l = _$j`
+let _$k = t => t,
+    _t$k,
+    _t2$f;
+const Root$k = styled.div(_t$k || (_t$k = _$k`
   position: relative;
 `));
-const ItemWrapper = styled.div(_t2$g || (_t2$g = _$j`
+const ItemWrapper = styled.div(_t2$f || (_t2$f = _$k`
   position: absolute;
   left: 0;
   right: 0;
@@ -6236,7 +6337,7 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
     onChange,
     renderItem
   } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   const {
     space
@@ -6273,17 +6374,16 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
       scrollEl.addEventListener('scroll', _handleScroll, {
         passive: true
       });
-      const ro = new ResizeObserver(entries => {
-        setScrollHeight(entries[0].contentRect.height);
+
+      const disposeElementSizeListener = _elementSizeObserver.subscribe(scrollEl, scrollElementSize => {
+        setScrollHeight(scrollElementSize.content.height);
       });
-      ro.observe(scrollEl);
 
       _handleScroll();
 
       return () => {
         scrollEl.removeEventListener('scroll', _handleScroll);
-        ro.unobserve(scrollEl);
-        ro.disconnect();
+        disposeElementSizeListener();
       };
     }
 
@@ -6356,11 +6456,11 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
   }, children));
 });
 
-let _$i = t => t,
-    _t$k,
-    _t2$f,
-    _t3$9;
-const Root$j = styled.div(_t$k || (_t$k = _$i`
+let _$j = t => t,
+    _t$j,
+    _t2$e,
+    _t3$8;
+const Root$j = styled.div(_t$j || (_t$j = _$j`
   position: absolute;
   pointer-events: none;
   width: 27px;
@@ -6376,11 +6476,11 @@ const Root$j = styled.div(_t$k || (_t$k = _$i`
     transform-origin: 13.5px 13.5px;
   }
 
-  [data-popper-placement^='top'] > div > & {
+  [data-placement^='top'] > & {
     bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
+  [data-placement^='right'] > & {
     left: -27px;
 
     & > svg {
@@ -6388,7 +6488,7 @@ const Root$j = styled.div(_t$k || (_t$k = _$i`
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
+  [data-placement^='left'] > & {
     right: -27px;
 
     & > svg {
@@ -6396,7 +6496,7 @@ const Root$j = styled.div(_t$k || (_t$k = _$i`
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
+  [data-placement^='bottom'] > & {
     top: -27px;
 
     & > svg {
@@ -6404,15 +6504,15 @@ const Root$j = styled.div(_t$k || (_t$k = _$i`
     }
   }
 `));
-const BorderPath = styled.path(_t2$f || (_t2$f = _$i`
+const BorderPath = styled.path(_t2$e || (_t2$e = _$j`
   fill: var(--card-shadow-outline-color);
 `));
-const ShapePath = styled.path(_t3$9 || (_t3$9 = _$i`
+const ShapePath = styled.path(_t3$8 || (_t3$8 = _$j`
   fill: var(--card-bg-color);
 `));
 const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
   return /*#__PURE__*/React.createElement(Root$j, _extends({
-    "data-ui": "PopoverArrow"
+    "data-ui": "Popover__arrow"
   }, props, {
     ref: ref
   }), /*#__PURE__*/React.createElement("svg", {
@@ -6426,355 +6526,296 @@ const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
   }), /*#__PURE__*/React.createElement(ShapePath, {
     d: "M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
   })));
-});
-
-/*
-
-The order of popper phases:
-
-- beforeRead
-- read
-- afterRead
-- beforeMain
-- main
-- afterMain
-- beforeWrite
-- write
-- afterWrite
+});
 
-*/
+const _excluded$o = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"];
 
-function getPopoverModifiers(props) {
+function popoverCardStyle(props) {
   const {
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset
-  } = props; // NOTE: For later viewers:
-  // Prior to adding this change, the popover would get `maxWidth: 0` the 2nd time it
-  // was opened, when used with `constrainSize`. I was looking for a way to "reset"
-  // the size of the popover as measured by Popper.js, and this seems to be a workaround.
-
-  if (!open) {
-    return [];
-  }
-
-  const detectOverflowOptions = {
-    altAxis: !constrainSize,
-    boundary: boundaryElement || undefined,
-    padding: 8,
-    tether,
-    tetherOffset
+    $boundaryWidth
+  } = props;
+  return {
+    maxWidth: $boundaryWidth ? `${$boundaryWidth - 16}px` : 'calc(100% - 16px)'
   };
-  return [constrainSize && _extends({}, maxSizeModifier, {
-    options: detectOverflowOptions
-  }), constrainSize && {
-    name: 'applyMaxSize',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-
-    fn({
-      state
-    }) {
-      const {
-        width,
-        height
-      } = state.modifiersData.maxSize;
-      state.styles.popper = _extends({}, state.styles.popper, {
-        maxWidth: `${width}px`,
-        maxHeight: `${height}px`
-      });
-    }
-
-  }, arrow && {
-    name: 'arrow',
-    options: {
-      element: arrowElement,
-      padding: 4
-    }
-  }, (constrainSize || preventOverflow) && {
-    name: 'preventOverflow',
-    options: detectOverflowOptions
-  }, {
-    name: 'offset',
-    options: {
-      offset: [skidding, distance]
-    }
-  }, margins && {
-    name: 'margins',
-    enabled: true,
-    phase: 'beforeRead',
-    fn: ({
-      state
-    }) => {
-      const {
-        rects
-      } = state;
-
-      if (rects.reference) {
-        rects.reference.x += margins[3];
-        rects.reference.y += margins[1];
-        rects.reference.width -= margins[1] + margins[3];
-        rects.reference.height -= margins[0] + margins[2];
-      }
-    }
-  }, {
-    name: 'flip',
-    options: {
-      allowedAutoPlacements,
-      boundary: boundaryElement || undefined,
-      fallbackPlacements,
-      padding: 8
-    }
-  }, matchReferenceWidth && {
-    name: 'matchWidth',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['computeStyles'],
-
-    fn({
-      state
-    }) {
-      const {
-        width
-      } = state.rects.reference;
-      state.styles.popper.width = `${width}px`;
-    },
-
-    effect: ({
-      state
-    }) => {
-      const refElement = state.elements.reference;
-
-      if (refElement instanceof HTMLElement) {
-        state.elements.popper.style.width = `${refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0)}px`;
-      }
-    }
-  }].filter(Boolean);
 }
 
-function usePopoverModifiers(props) {
+const Root$i = /*#__PURE__*/memo(styled(Card)(popoverCardStyle));
+/**
+ * @internal
+ */
+
+const PopoverCard = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function PopoverCard(props, ref) {
   const {
-    allowedAutoPlacements,
+    __unstable_margins: marginsProp,
     arrow,
-    arrowElement,
-    boundaryElement,
-    constrainSize,
-    distance,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding,
-    tether,
-    tetherOffset
-  } = props;
-  return useMemo(() => {
-    return getPopoverModifiers({
-      allowedAutoPlacements,
-      arrow,
-      arrowElement,
-      boundaryElement,
-      constrainSize,
-      distance,
-      fallbackPlacements,
-      margins,
-      matchReferenceWidth,
-      open,
-      preventOverflow,
-      skidding,
-      tether,
-      tetherOffset
-    });
-  }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
-}
-
-const _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"];
+    arrowRef,
+    arrowX,
+    arrowY,
+    availableHeight,
+    availableWidth,
+    boundaryWidth,
+    children,
+    padding,
+    placement,
+    overflow,
+    radius,
+    referenceWidth: referenceWidthProp,
+    scheme,
+    shadow,
+    strategy,
+    tone,
+    width,
+    x: xProp,
+    y: yProp
+  } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
-let _2$1 = t => t,
-    _t$j,
-    _t2$e,
-    _t3$8;
-const Root$i = styled(Layer)(({
-  $preventOverflow
-}) => css(_t$j || (_t$j = _2$1`
-    pointer-events: none;
-    display: flex;
-    flex-direction: column;
-    max-width: calc(100% - 16px);
+  const {
+    zIndex
+  } = useLayer(); // top right bottom left
+
+  const margins = useMemo(() => marginsProp || [0, 0, 0, 0], [marginsProp]); // translate according to margins
+
+  const referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : undefined;
+  const x = (xProp != null ? xProp : 0) + margins[3];
+  const y = (yProp != null ? yProp : 0) + margins[0];
+  const maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : undefined;
+  const rootStyle = useMemo(() => ({
+    position: strategy,
+    top: y,
+    left: x,
+    zIndex,
+    width: referenceWidth,
+    maxWidth: referenceWidth ? undefined : maxWidth
+  }), [referenceWidth, maxWidth, strategy, x, y, zIndex]);
+  const wrapperStyle = useMemo(() => ({
+    minHeight: 25,
+    maxHeight: availableHeight ? availableHeight - 8 : undefined
+  }), [availableHeight]);
+  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
+  const arrowStyle = useMemo(() => {
+    const style = {
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined
+    };
+    if (staticSide) style[staticSide] = -27;
+    return style;
+  }, [arrowX, arrowY, staticSide]);
+  return /*#__PURE__*/React.createElement(Root$i, _extends({}, restProps, {
+    "$boundaryWidth": boundaryWidth,
+    "data-placement": placement,
+    "data-ui": "Popover",
+    radius: radius,
+    ref: ref,
+    scheme: scheme,
+    shadow: shadow,
+    style: rootStyle,
+    tone: tone,
+    "$width": width
+  }), /*#__PURE__*/React.createElement(Box, {
+    "data-ui": "Popover__wrapper",
+    overflow: overflow,
+    padding: padding,
+    sizing: "border",
+    style: wrapperStyle
+  }, children), arrow && /*#__PURE__*/React.createElement(PopoverArrow, {
+    ref: arrowRef,
+    style: arrowStyle
+  }));
+}));
+PopoverCard.displayName = 'PopoverCard';
 
-    & > * {
-      min-height: 0;
-    }
+const _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "constrainSize", "content", "disabled", "fallbackPlacements", "matchReferenceWidth", "open", "overflow", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "scheme", "shadow", "tether", "tetherOffset", "tone", "width", "zOffset"];
 
-    /* Hide the popover when the reference element is out of bounds */
-    ${0}
-  `), $preventOverflow && css(_t2$e || (_t2$e = _2$1`
-      &[data-popper-reference-hidden='true'] {
-        display: none;
+function size(scope) {
+  return size$1({
+    apply(args) {
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(args.availableWidth);
+        scope.setAvailableHeight(args.availableHeight);
       }
-    `))));
-const PopoverCard = styled(Card)(({
-  $constrainSize
-}) => css(_t3$8 || (_t3$8 = _2$1`
-    flex: 1;
-    max-height: ${0};
-    pointer-events: all;
-
-    && {
-      display: flex;
-    }
-
-    flex-direction: column;
 
-    & > * {
-      min-height: 0;
-    }
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width);
+      }
+    },
 
-    ${0}
-  `), $constrainSize && '100%', responsiveContainerWidthStyle));
-/**
- * @public
- */
+    boundary: scope.boundaryElement || undefined
+  });
+}
 
-const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
-  var _theme$sanity$layer;
+const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popover(props, ref) {
+  var _theme$sanity$layer, _useElementSize, _middlewareData$arrow, _middlewareData$arrow2;
 
-  const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
+  const boundaryElementContext = useBoundaryElement();
 
   const {
     __unstable_margins: margins,
-    allowedAutoPlacements,
-    arrow = true,
-    boundaryElement: boundaryElementProp = boundaryElementContext.element,
-    children: child,
+    arrow: arrowProp = true,
+    boundaryElement = boundaryElementContext.element,
+    children: childProp,
+    constrainSize = false,
     content,
-    constrainSize,
     disabled,
     fallbackPlacements,
-    open = false,
-    padding,
-    placement = 'bottom',
-    portal: portalProp = false,
-    preventOverflow,
-    radius = 3,
-    referenceElement: referenceElementProp,
-    matchReferenceWidth,
-    shadow = 3,
+    matchReferenceWidth: matchReferenceWidthProp,
+    open,
+    overflow = props.constrainSize ? 'auto' : undefined,
+    padding: paddingProp,
+    placement: placementProp = 'bottom',
+    portal,
+    preventOverflow = true,
+    radius: radiusProp = 3,
+    referenceElement,
     scheme,
-    style = EMPTY_RECORD$1,
-    tether,
-    tetherOffset,
+    shadow: shadowProp = 3,
     tone = 'inherit',
-    width = 0,
-    zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset
+    width: widthProp = undefined,
+    zOffset: zOffsetProp = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
+  const boundarySize = (_useElementSize = useElementSize(boundaryElement)) == null ? void 0 : _useElementSize.border;
+  const padding = useArrayProp(paddingProp);
+  const radius = useArrayProp(radiusProp);
+  const shadow = useArrayProp(shadowProp);
+  const width = useArrayProp(widthProp);
+  const zOffset = useArrayProp(zOffsetProp);
+  const [availableWidth, setAvailableWidth] = useState(undefined);
+  const [availableHeight, setAvailableHeight] = useState(undefined);
+  const [referenceWidth, setReferenceWidth] = useState(undefined);
   const forwardedRef = useForwardedRef(ref);
-  const portal = usePortal();
-  const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const popperReferenceElement = referenceElementProp || referenceElement;
-  const modifiers = usePopoverModifiers({
-    allowedAutoPlacements,
-    arrow,
-    arrowElement,
-    boundaryElement: boundaryElementProp || portal.boundaryElement,
-    constrainSize,
-    distance: arrow ? 4 : 0,
-    fallbackPlacements,
-    margins,
-    matchReferenceWidth,
-    open,
-    preventOverflow,
-    skidding: 0,
-    tether,
-    tetherOffset
-  });
-  const popper = usePopper(popperReferenceElement, popperElement, {
+  const arrowRef = useRef(null);
+  const rootBoundary = 'viewport';
+  const middleware = useMemo(() => {
+    const ret = []; // Flip the floating element when leaving the boundary box
+
+    if (constrainSize || preventOverflow) {
+      ret.push(flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements,
+        padding: 8,
+        rootBoundary
+      }));
+    } // Track sizes
+
+
+    ret.push(size({
+      boundaryElement,
+      constrainSize,
+      matchReferenceWidth: matchReferenceWidthProp,
+      setAvailableHeight,
+      setAvailableWidth,
+      setReferenceWidth
+    })); // Define distance between reference and floating element
+
+    ret.push(offset({
+      mainAxis: arrowProp ? 4 : 0
+    })); // Shift the popover so its sits with the boundary eleement
+
+    if (preventOverflow) {
+      ret.push(shift({
+        boundary: boundaryElement || undefined,
+        rootBoundary,
+        padding: 8
+      }));
+    } // Place arrow
+
+
+    if (arrowProp) {
+      ret.push(arrow({
+        element: arrowRef,
+        padding: 4
+      }));
+    }
+
+    return ret;
+  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
+  const {
+    x,
+    y,
     placement,
-    modifiers
+    reference,
+    floating,
+    middlewareData,
+    strategy
+  } = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
   });
-  const {
-    attributes,
-    forceUpdate,
-    styles
-  } = popper;
-  const setRef = useCallback(el => {
-    const childRef = child.ref;
-    setReferenceElement(el);
+  const arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
+  const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
+  const setArrow = useCallback(arrowEl => {
+    arrowRef.current = arrowEl;
+  }, []);
+  const setFloating = useCallback(node => {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  const setReference = useCallback(node => {
+    reference(node);
+    const childRef = childProp == null ? void 0 : childProp.ref;
 
     if (typeof childRef === 'function') {
-      childRef(el);
+      childRef(node);
     } else if (childRef) {
-      childRef.current = el;
+      childRef.current = node;
     }
-  }, [child]);
-  const setRootRef = useCallback(el => {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  }, [forwardedRef]);
-  const popoverStyle = useMemo(() => _extends({}, style, styles.popper), [style, styles]);
+  }, [childProp, reference]);
+  const child = useMemo(() => {
+    if (!childProp || referenceElement) return null;
+    return /*#__PURE__*/cloneElement(childProp, {
+      ref: setReference
+    });
+  }, [childProp, referenceElement, setReference]);
   useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate();
-      } catch (_) {// ignore caught error
-      }
-    }
-  }, [content, forceUpdate, open, popperReferenceElement]);
+    if (referenceElement) reference(referenceElement);
+  }, [reference, referenceElement]);
 
   if (disabled) {
-    return child || /*#__PURE__*/React.createElement(React.Fragment, null);
+    return childProp || /*#__PURE__*/React.createElement(React.Fragment, null);
   }
 
-  const node = /*#__PURE__*/React.createElement(Root$i, _extends({
-    "data-ui": "Popover"
-  }, restProps, {
-    "$preventOverflow": preventOverflow,
-    ref: setRootRef,
-    style: popoverStyle,
+  const popover = /*#__PURE__*/React.createElement(LayerProvider, {
     zOffset: zOffset
-  }, attributes.popper), /*#__PURE__*/React.createElement(PopoverCard, {
-    "$constrainSize": constrainSize,
-    "data-ui": "PopoverCard",
+  }, /*#__PURE__*/React.createElement(PopoverCard, _extends({}, restProps, {
+    __unstable_margins: margins,
+    arrow: arrowProp,
+    arrowRef: setArrow,
+    arrowX: arrowX,
+    arrowY: arrowY,
+    availableWidth: constrainSize ? availableWidth : undefined,
+    availableHeight: constrainSize ? availableHeight : undefined,
+    boundaryWidth: boundarySize == null ? void 0 : boundarySize.width,
+    overflow: overflow,
     padding: padding,
+    placement: placement,
     radius: radius,
+    ref: setFloating,
+    referenceWidth: matchReferenceWidthProp ? referenceWidth : undefined,
     scheme: scheme,
     shadow: shadow,
+    strategy: strategy,
     tone: tone,
+    x: x,
+    y: y,
     width: width
-  }, arrow && /*#__PURE__*/React.createElement(PopoverArrow, {
-    ref: setArrowElement,
-    style: styles.arrow
   }), content));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, child && !referenceElementProp ? /*#__PURE__*/cloneElement(child, {
-    ref: setRef
-  }) : child || /*#__PURE__*/React.createElement(React.Fragment, null), open && /*#__PURE__*/React.createElement(React.Fragment, null, portalProp && /*#__PURE__*/React.createElement(Portal, {
-    __unstable_name: typeof portalProp === 'string' ? portalProp : undefined
-  }, node), !portalProp && node));
-});
+  return /*#__PURE__*/React.createElement(React.Fragment, null, open && /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/React.createElement(Portal, {
+    __unstable_name: typeof portal === 'string' ? portal : undefined
+  }, popover) : popover), child);
+}));
+Popover.displayName = 'Popover';
 
-let _$h = t => t,
+let _$i = t => t,
     _t$i,
     _t2$d;
 function radioBaseStyle() {
-  return css(_t$i || (_t$i = _$h`
+  return css(_t$i || (_t$i = _$i`
     position: relative;
 
     &:not([hidden]) {
@@ -6796,7 +6837,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_t2$d || (_t2$d = _$h`
+  return css(_t2$d || (_t2$d = _$i`
     appearance: none;
     position: absolute;
     top: 0;
@@ -6914,14 +6955,14 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(props, forwardedRef) {
   })), /*#__PURE__*/React.createElement("span", null));
 });
 
-let _$g = t => t,
+let _$h = t => t,
     _t$h,
     _t2$c,
     _t3$7,
     _t4$5;
 
 function rootStyle() {
-  return css(_t$h || (_t$h = _$g`
+  return css(_t$h || (_t$h = _$h`
     position: relative;
     width: stretch;
 
@@ -6936,7 +6977,7 @@ function inputBaseStyle(props) {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_t2$c || (_t2$c = _$g`
+  return css(_t2$c || (_t2$c = _$h`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -6961,7 +7002,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$7 || (_t3$7 = _$g`
+  return css(_t3$7 || (_t3$7 = _$h`
     /* enabled */
     background-color: ${0};
     color: ${0};
@@ -7030,7 +7071,7 @@ function inputTextSizeStyle(props) {
   const {
     sizes
   } = theme.sanity.fonts.text;
-  return responsive(theme.sanity.media, getResponsiveProp($fontSize), sizeIndex => textSize(sizes[sizeIndex] || sizes[2]));
+  return _responsive(theme.sanity.media, $fontSize, sizeIndex => textSize(sizes[sizeIndex] || sizes[2]));
 }
 
 function inputStyle() {
@@ -7042,7 +7083,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_t4$5 || (_t4$5 = _$g`
+  return css(_t4$5 || (_t4$5 = _$h`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -7105,10 +7146,10 @@ const Select = /*#__PURE__*/forwardRef(function Select(props, forwardedRef) {
     "data-read-only": !disabled && readOnly ? '' : undefined,
     "data-ui": "Select"
   }, restProps, {
-    "$fontSize": fontSize,
-    "$padding": padding,
-    "$radius": radius,
-    "$space": space,
+    "$fontSize": useArrayProp(fontSize),
+    "$padding": useArrayProp(padding),
+    "$radius": useArrayProp(radius),
+    "$space": useArrayProp(space),
     disabled: disabled || readOnly,
     ref: ref
   }), children), /*#__PURE__*/React.createElement(IconBox, {
@@ -7139,7 +7180,7 @@ function responsiveStackSpaceStyle(props) {
     media,
     space
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$space), spaceIndex => ({
+  return _responsive(media, props.$space, spaceIndex => ({
     gridGap: rem(space[spaceIndex])
   }));
 }
@@ -7161,24 +7202,24 @@ const Stack = /*#__PURE__*/forwardRef(function Stack(props, ref) {
     "data-as": typeof as === 'string' ? as : undefined,
     "data-ui": "Stack"
   }, restProps, {
-    "$space": space,
+    "$space": useArrayProp(space),
     forwardedAs: as,
     ref: ref
   }));
 });
 
-let _$f = t => t,
+let _$g = t => t,
     _t$g,
     _t2$b,
     _t3$6,
     _t4$4,
     _t5$3,
-    _t6$1,
+    _t6$2,
     _t7;
 /* Root */
 
 function switchBaseStyles() {
-  return css(_t$g || (_t$g = _$f`
+  return css(_t$g || (_t$g = _$g`
     position: relative;
     &:not([hidden]) {
       display: inline-block;
@@ -7189,7 +7230,7 @@ function switchBaseStyles() {
 
 function switchInputStyles() {
   // Visually hide the input element while keeping it interactive
-  return css(_t2$b || (_t2$b = _$f`
+  return css(_t2$b || (_t2$b = _$g`
     position: absolute;
     top: 0;
     right: 0;
@@ -7217,7 +7258,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_t3$6 || (_t3$6 = _$f`
+  return css(_t3$6 || (_t3$6 = _$g`
     --switch-bg-color: ${0};
     --switch-fg-color: ${0};
     --switch-box-shadow: none;
@@ -7289,7 +7330,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_t4$4 || (_t4$4 = _$f`
+  return css(_t4$4 || (_t4$4 = _$g`
     &:not([hidden]) {
       display: block;
     }
@@ -7319,7 +7360,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_t5$3 || (_t5$3 = _$f`
+  return css(_t5$3 || (_t5$3 = _$g`
     &:not([hidden]) {
       display: block;
     }
@@ -7338,9 +7379,9 @@ function switchThumbStyles(props) {
     ${0}
 
     ${0}
-  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$1 || (_t6$1 = _$f`
+  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$2 || (_t6$2 = _$g`
       transform: translate3d(${0}px, 0, 0);
-    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$f`
+    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$g`
       transform: translate3d(${0}px, 0, 0);
     `), indeterminateOffset));
 }
@@ -7393,12 +7434,12 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
   })));
 });
 
-const _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
+const _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"];
 
-let _$e = t => t,
+let _$f = t => t,
     _t$f;
 const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_t$f || (_t$f = _$e`
+const InputRoot$1 = styled.span(_t$f || (_t$f = _$f`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7417,40 +7458,51 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef)
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1
+    radius = 1,
+    weight
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$i);
 
   const ref = useForwardedRef(forwardedRef);
+  const rootTheme = useRootTheme();
   useCustomValidity(ref, customValidity);
   return /*#__PURE__*/React.createElement(Root$d, {
     "data-ui": "TextArea"
   }, /*#__PURE__*/React.createElement(InputRoot$1, null, /*#__PURE__*/React.createElement(Input$1, _extends({
-    "data-as": "textarea"
+    "data-as": "textarea",
+    "data-tone": rootTheme.tone
   }, restProps, {
-    "$fontSize": fontSize,
-    "$padding": padding,
+    "$fontSize": useArrayProp(fontSize),
+    "$padding": useArrayProp(padding),
+    "$space": useArrayProp(0),
+    "$tone": rootTheme.tone,
+    "$weight": weight,
     disabled: disabled,
     ref: ref
   })), /*#__PURE__*/React.createElement(Presentation$1, {
     "$border": border,
-    "$radius": radius
+    "$radius": useArrayProp(radius),
+    "$tone": rootTheme.tone,
+    "data-tone": rootTheme.tone
   })));
 });
 
-const _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
+const _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"];
 
-let _$d = t => t,
+let _$e = t => t,
     _t$e,
     _t2$a,
     _t3$5,
     _t4$3,
-    _t5$2;
+    _t5$2,
+    _t6$1;
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
-const Root$c = styled.span(textInputRootStyle);
-const InputRoot = styled.span(_t$e || (_t$e = _$d`
+const Root$c = styled(Card).attrs({
+  forwardedAs: 'span'
+})(textInputRootStyle);
+const InputRoot = styled.span(_t$e || (_t$e = _$e`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7458,7 +7510,7 @@ const InputRoot = styled.span(_t$e || (_t$e = _$d`
 `));
 const Prefix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t2$a || (_t2$a = _$d`
+})(_t2$a || (_t2$a = _$e`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -7469,7 +7521,7 @@ const Prefix = styled(Card).attrs({
 `));
 const Suffix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t3$5 || (_t3$5 = _$d`
+})(_t3$5 || (_t3$5 = _$e`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -7480,12 +7532,17 @@ const Suffix = styled(Card).attrs({
 `));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$d`
+const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$e`
   position: absolute;
   top: 0;
   left: 0;
 `));
-const RightCard = styled(Card)(_t5$2 || (_t5$2 = _$d`
+const RightBox = styled(Box)(_t5$2 || (_t5$2 = _$e`
+  position: absolute;
+  top: 0;
+  right: 0;
+`));
+const RightCard = styled(Card)(_t6$1 || (_t6$1 = _$e`
   background-color: transparent;
   position: absolute;
   top: 0;
@@ -7500,7 +7557,7 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     border = true,
     clearButton,
     disabled = false,
-    fontSize = 2,
+    fontSize: fontSizeProp = 2,
     icon,
     iconRight,
     onClear,
@@ -7508,16 +7565,20 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     prefix,
     radius: radiusProp = 1,
     readOnly,
-    space = 3,
+    space: spaceProp = 3,
     suffix,
     customValidity,
-    type = 'text'
+    type = 'text',
+    weight
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
 
   const ref = useForwardedRef(forwardedRef);
-  const padding = useResponsiveProp(paddingProp);
-  const radius = useResponsiveProp(radiusProp); // Transient properties
+  const rootTheme = useRootTheme();
+  const fontSize = useArrayProp(fontSizeProp);
+  const padding = useArrayProp(paddingProp);
+  const radius = useArrayProp(radiusProp);
+  const space = useArrayProp(spaceProp); // Transient properties
 
   const $hasClearButton = Boolean(clearButton);
   const $hasIcon = Boolean(icon);
@@ -7553,16 +7614,18 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     "$border": border,
     "$hasPrefix": $hasPrefix,
     "$hasSuffix": $hasSuffix,
-    "$radius": radius
+    "$radius": radius,
+    "$tone": rootTheme.tone,
+    "data-tone": rootTheme.tone
   }, icon && /*#__PURE__*/React.createElement(LeftBox, {
     padding: padding
   }, /*#__PURE__*/React.createElement(Text, {
     size: fontSize
-  }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon))), !$hasClearButton && iconRight && /*#__PURE__*/React.createElement(RightCard, {
+  }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon))), !$hasClearButton && iconRight && /*#__PURE__*/React.createElement(RightBox, {
     padding: padding
   }, /*#__PURE__*/React.createElement(Text, {
     size: fontSize
-  }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
+  }, /*#__PURE__*/isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && /*#__PURE__*/createElement(iconRight)))), [border, fontSize, icon, iconRight, padding, radius, rootTheme.tone, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
   const clearButtonBoxPadding = useMemo(() => padding.map(v => {
     if (v === 0) return 0;
@@ -7576,7 +7639,7 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     if (v === 2) return 1;
     return v - 1;
   }), [padding]);
-  const clearButtonProps = useMemo(() => typeof clearButton === 'object' ? clearButton : EMPTY_RECORD$1, [clearButton]);
+  const clearButtonProps = useMemo(() => typeof clearButton === 'object' ? clearButton : EMPTY_RECORD, [clearButton]);
   const clearButtonNode = useMemo(() => !disabled && !readOnly && clearButton && /*#__PURE__*/React.createElement(RightCard, {
     forwardedAs: "span",
     padding: clearButtonBoxPadding,
@@ -7603,15 +7666,19 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
     tone: "inherit"
   }, /*#__PURE__*/React.createElement("span", null, suffix)), [radius, suffix]);
   return /*#__PURE__*/React.createElement(Root$c, {
-    "data-ui": "TextInput"
+    "data-ui": "TextInput",
+    tone: rootTheme.tone
   }, prefixNode, /*#__PURE__*/React.createElement(InputRoot, null, /*#__PURE__*/React.createElement(Input, _extends({
-    "data-as": "input"
+    "data-as": "input",
+    "data-tone": rootTheme.tone
   }, restProps, {
+    "$fontSize": fontSize,
     "$iconLeft": $hasIcon,
     "$iconRight": $hasIconRight || $hasClearButton,
     "$padding": padding,
     "$space": space,
-    "$fontSize": fontSize,
+    "$tone": rootTheme.tone,
+    "$weight": weight,
     disabled: disabled,
     readOnly: readOnly,
     ref: ref,
@@ -7619,12 +7686,27 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
   })), presentationNode, clearButtonNode), suffixNode);
 });
 
-let _$c = t => t,
+let _$d = t => t,
     _t$d,
     _t2$9,
     _t3$4;
-const Root$b = styled.div(_t$d || (_t$d = _$c`
+const Root$b = styled.div(_t$d || (_t$d = _$d`
   position: absolute;
+  pointer-events: none;
+  width: 15px;
+  height: 15px;
+  fill: none;
+
+  :empty + & {
+    display: none;
+  }
+
+  & > svg {
+    display: block;
+    transform-origin: 7.5px 7.5px;
+  }
+
+  /* position: absolute;
   width: 15px;
   height: 15px;
   fill: none;
@@ -7638,46 +7720,48 @@ const Root$b = styled.div(_t$d || (_t$d = _$c`
       display: block;
     }
     transform-origin: 7.5px 7.5px;
-  }
+  } */
 
-  [data-popper-placement^='top'] > div > & {
-    bottom: -15px;
+  [data-placement^='top'] > & {
+    bottom: -27px;
   }
 
-  [data-popper-placement^='right'] > div > & {
-    left: -15px;
+  [data-placement^='right'] > & {
+    left: -27px;
 
     & > svg {
       transform: rotate(90deg);
     }
   }
 
-  [data-popper-placement^='left'] > div > & {
-    right: -15px;
+  [data-placement^='left'] > & {
+    right: -27px;
 
     & > svg {
       transform: rotate(-90deg);
     }
   }
 
-  [data-popper-placement^='bottom'] > div > & {
-    top: -15px;
+  [data-placement^='bottom'] > & {
+    top: -27px;
 
     & > svg {
       transform: rotate(180deg);
     }
   }
 `));
-const Border = styled.path(_t2$9 || (_t2$9 = _$c`
+const Border = styled.path(_t2$9 || (_t2$9 = _$d`
   fill: var(--card-shadow-outline-color);
 `));
-const Shape = styled.path(_t3$4 || (_t3$4 = _$c`
+const Shape = styled.path(_t3$4 || (_t3$4 = _$d`
   fill: var(--card-bg-color);
 `));
 const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   const restProps = _extends({}, props);
 
-  return /*#__PURE__*/React.createElement(Root$b, _extends({}, restProps, {
+  return /*#__PURE__*/React.createElement(Root$b, _extends({
+    "data-ui": "Tooltip__arrow"
+  }, restProps, {
     ref: ref
   }), /*#__PURE__*/React.createElement("svg", {
     width: "15",
@@ -7690,11 +7774,11 @@ const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   })));
 });
 
-const _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
+const _excluded$g = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "shadow", "zOffset"];
 
-let _2 = t => t,
+let _$c = t => t,
     _t$c;
-const Root$a = styled(Layer)(_t$c || (_t$c = _2`
+const Root$a = styled(Layer)(_t$c || (_t$c = _$c`
   pointer-events: none;
 `));
 /**
@@ -7702,60 +7786,88 @@ const Root$a = styled(Layer)(_t$c || (_t$c = _2`
  */
 
 const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
-  var _theme$sanity$layer;
+  var _theme$sanity$layer, _middlewareData$arrow, _middlewareData$arrow2;
 
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
 
   const {
-    allowedAutoPlacements,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
-    children,
+    children: childProp,
     content,
     disabled,
-    fallbackPlacements,
-    placement = 'bottom',
+    fallbackPlacements: fallbackPlacementsProp,
+    placement: placementProp = 'bottom',
     portal,
     scheme,
+    shadow = 2,
     zOffset = (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
 
+  const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   const forwardedRef = useForwardedRef(ref);
   const [referenceElement, setReferenceElement] = useState(null);
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const popper = usePopper(referenceElement, popperElement, {
+  const arrowRef = useRef(null);
+  const rootBoundary = 'viewport';
+  const middleware = useMemo(() => {
+    const ret = []; // Flip the floating element when leaving the boundary box
+
+    ret.push(flip({
+      boundary: boundaryElement || undefined,
+      fallbackPlacements,
+      padding: 4,
+      rootBoundary
+    })); // Define distance between reference and floating element
+
+    ret.push(offset({
+      mainAxis: 3
+    })); // Shift the tooltip so its sits with the boundary eleement
+
+    ret.push(shift({
+      boundary: boundaryElement || undefined,
+      rootBoundary,
+      padding: 4
+    })); // Place arrow
+
+    ret.push(arrow({
+      element: arrowRef,
+      padding: 2
+    }));
+    return ret;
+  }, [boundaryElement, fallbackPlacements]);
+  const {
+    x,
+    y,
     placement,
-    modifiers: [{
-      name: 'arrow',
-      options: {
-        element: arrowElement,
-        padding: 4
-      }
-    }, {
-      name: 'preventOverflow',
-      options: {
-        altAxis: true,
-        boundary: boundaryElement || undefined,
-        padding: 4
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 3]
-      }
-    }, {
-      name: 'flip',
-      options: {
-        allowedAutoPlacements,
-        fallbackPlacements
-      }
-    }]
+    reference,
+    floating,
+    middlewareData,
+    update,
+    strategy
+  } = useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
   });
-  const {
-    forceUpdate
-  } = popper;
+  const rootStyle = useMemo(() => ({
+    position: strategy,
+    top: y != null ? y : 0,
+    left: x != null ? x : 0
+  }), [strategy, x, y]);
+  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
+  const arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
+  const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
+  const arrowStyle = useMemo(() => {
+    const style = {
+      left: arrowX !== null ? arrowX : undefined,
+      top: arrowY !== null ? arrowY : undefined,
+      right: undefined,
+      bottom: undefined
+    };
+    if (staticSide) style[staticSide] = -15;
+    return style;
+  }, [arrowX, arrowY, staticSide]);
   const [isOpen, setIsOpen] = useState(false);
   const handleBlur = useCallback(() => setIsOpen(false), []);
   const handleFocus = useCallback(() => setIsOpen(true), []);
@@ -7781,15 +7893,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     return () => {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]);
-  useEffect(() => {
-    if (forceUpdate) {
-      try {
-        forceUpdate();
-      } catch (_) {// ignore caught error
-      }
-    }
-  }, [forceUpdate, content]); // Close when `disabled` changes to `true`
+  }, [isOpen, referenceElement]); // Close when `disabled` changes to `true`
 
   useEffect(() => {
     if (disabled) setIsOpen(false);
@@ -7797,40 +7901,59 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
 
   useEffect(() => {
     if (!content) setIsOpen(false);
-  }, [content]);
-
-  const setRef = el => {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  };
-
-  if (!children) return /*#__PURE__*/React.createElement(React.Fragment, null);
-  if (disabled) return children;
-  const referenceProps = {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ref: setReferenceElement
-  };
-  const referenceNode = /*#__PURE__*/cloneElement(children, referenceProps);
-  const popperNode = /*#__PURE__*/React.createElement(Root$a, _extends({
+  }, [content]); // Update reference
+
+  useEffect(() => reference(referenceElement), [reference, referenceElement]);
+  const setArrow = useCallback(arrowEl => {
+    arrowRef.current = arrowEl;
+    update();
+  }, [update]);
+  const setFloating = useCallback(node => {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  const childRef = childProp == null ? void 0 : childProp.ref;
+  const setReference = useCallback(node => {
+    if (typeof childRef === 'function') {
+      childRef(node);
+    } else if (childRef) {
+      childRef.current = node;
+    } // childRef.current = node
+
+
+    setReferenceElement(node);
+  }, [childRef]);
+  const child = useMemo(() => {
+    if (!childProp) return null;
+    return /*#__PURE__*/cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      ref: setReference
+    });
+  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
+  if (!child) return /*#__PURE__*/React.createElement(React.Fragment, null);
+  if (disabled) return child;
+  const root = /*#__PURE__*/React.createElement(Root$a, _extends({
     "data-ui": "Tooltip"
-  }, restProps, popper.attributes.popper, {
-    ref: setRef,
-    style: popper.styles.popper,
+  }, restProps, {
+    ref: setFloating,
+    style: rootStyle,
     zOffset: zOffset
   }), /*#__PURE__*/React.createElement(Card, {
+    "data-ui": "Tooltip__card",
+    "data-placement": placement,
     radius: 2,
     scheme: scheme,
-    shadow: 3
+    shadow: shadow
   }, content, /*#__PURE__*/React.createElement(TooltipArrow, {
-    ref: setArrowElement,
-    style: popper.styles.arrow
+    ref: setArrow,
+    style: arrowStyle
   })));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, referenceNode, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, portal && /*#__PURE__*/React.createElement(Portal, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, child, isOpen && /*#__PURE__*/React.createElement(React.Fragment, null, portal ? /*#__PURE__*/React.createElement(Portal, {
     __unstable_name: typeof portal === 'string' ? portal : undefined
-  }, popperNode), !portal && popperNode));
+  }, root) : root));
 });
 
 let _$b = t => t,
@@ -7844,7 +7967,6 @@ let _$b = t => t,
  */
 
 const Root$9 = styled.div(_t$b || (_t$b = _$b`
-  /* position: relative; */
   line-height: 0;
 `));
 /**
@@ -7863,11 +7985,6 @@ const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$b`
  */
 
 const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$b`
-  & > div {
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-
   &[data-popper-reference-hidden='true'] {
     display: none;
   }
@@ -7994,27 +8111,22 @@ function autocompleteReducer(state, msg) {
 /**
  * @internal
  */
-const EMPTY_RECORD = {};
-/**
- * @internal
- */
-
 const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'Home', 'End', 'PageUp', 'PageDown', 'Meta', 'Tab', 'CapsLock'];
 /**
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
+const AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 0, 0];
 /**
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
+const AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom';
 /**
  * @internal
  */
 
-const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
+const AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['bottom', 'top'];
 
 const _excluded$f = ["border", "customValidity", "disabled", "filterOption", "fontSize", "icon", "id", "listBox", "loading", "onBlur", "onChange", "onFocus", "onQueryChange", "onSelect", "openButton", "options", "padding", "popover", "prefix", "radius", "readOnly", "relatedElements", "renderOption", "renderPopover", "renderValue", "suffix", "value"];
 
@@ -8092,7 +8204,7 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
   const popoverMouseWithinRef = useRef(false);
   const listBoxId = `${id}-listbox`;
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
-  const padding = useResponsiveProp(paddingProp);
+  const padding = useArrayProp(paddingProp);
   const currentOption = useMemo(() => value !== null ? options.find(o => o.value === value) : undefined, [options, value]);
   const filteredOptions = useMemo(() => options.filter(option => query ? filterOption(query, option) : true), [filterOption, options, query]);
   const filteredOptionsLen = filteredOptions.length;
@@ -8409,6 +8521,7 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
   const content = useMemo(() => {
     if (filteredOptions.length === 0) return null;
     return /*#__PURE__*/React.createElement(ListBox, _extends({
+      "data-ui": "AutoComplete__results",
       onKeyDown: handleListBoxKeyDown,
       padding: 1
     }, listBox, {
@@ -8416,6 +8529,7 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
     }), /*#__PURE__*/React.createElement(Stack, {
       as: "ul",
       "aria-multiselectable": false,
+      "data-ui": "AutoComplete__resultsList",
       id: listBoxId,
       ref: listBoxElementRef,
       role: "listbox",
@@ -8508,10 +8622,11 @@ const Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(props, ref) {
     children,
     maxLength,
     separator,
-    space = 2
+    space: spaceRaw = 2
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
+  const space = useArrayProp(spaceRaw);
   const [open, setOpen] = useState(false);
   const [expandElement, setExpandElement] = useState(null);
   const [popoverElement, setPopoverElement] = useState(null);
@@ -8595,7 +8710,7 @@ function responsiveDialogPositionStyle(props) {
   const {
     media
   } = theme.sanity;
-  return responsive(media, getResponsiveProp(props.$position), position => ({
+  return _responsive(media, props.$position, position => ({
     '&&': {
       position
     }
@@ -8691,11 +8806,14 @@ const DialogCard = /*#__PURE__*/forwardRef(function DialogCard(props, ref) {
     id,
     onClickOutside,
     onClose,
-    radius,
+    radius: radiusProp,
     scheme,
-    shadow,
-    width
+    shadow: shadowProp,
+    width: widthProp
   } = props;
+  const radius = useArrayProp(radiusProp);
+  const shadow = useArrayProp(shadowProp);
+  const width = useArrayProp(widthProp);
   const forwardedRef = useForwardedRef(ref);
   const [rootElement, setRootElement] = useState(null);
   const localContentRef = useRef(null);
@@ -8778,7 +8896,7 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius = 3,
+    cardRadius: cardRadiusProp = 3,
     cardShadow = 4,
     children,
     contentRef,
@@ -8787,15 +8905,20 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
     id,
     onClickOutside,
     onClose,
-    padding = 4,
+    padding: paddingProp = 4,
     portal,
-    position = dialog.position || 'fixed',
+    position: positionProp = dialog.position || 'fixed',
     scheme,
-    width = 0,
-    zOffset = dialog.zOffset || ((_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.dialog.zOffset)
+    width: widthProp = 0,
+    zOffset: zOffsetProp = dialog.zOffset || ((_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.dialog.zOffset)
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
+  const cardRadius = useArrayProp(cardRadiusProp);
+  const padding = useArrayProp(paddingProp);
+  const position = useArrayProp(positionProp);
+  const width = useArrayProp(widthProp);
+  const zOffset = useArrayProp(zOffsetProp);
   const preDivRef = useRef(null);
   const postDivRef = useRef(null);
   const cardRef = useRef(null);
@@ -8901,10 +9024,12 @@ const Hotkeys = /*#__PURE__*/forwardRef(function Hotkeys(props, ref) {
     keys,
     padding,
     radius,
-    space = 1
+    space: spaceProp = 1
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
+  const space = useArrayProp(spaceProp);
+
   if (!keys || keys.length === 0) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
@@ -9292,17 +9417,17 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
 const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = false,
-    boundaryElement,
+    boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
     menu: menuProp,
     onClose,
-    placement,
-    popoverScheme,
-    portal,
+    placement: deprecated_placement,
+    popoverScheme: deprecated_popoverScheme,
+    portal: deprecated_portal = true,
     popover,
-    popoverRadius,
-    preventOverflow
+    popoverRadius: deprecated_popoverRadius,
+    preventOverflow: deprecated_preventOverflow
   } = props;
   const [open, setOpen] = useState(false);
   const [shouldFocus, setShouldFocus] = useState(null);
@@ -9424,14 +9549,14 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
   }) : null, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
   const popoverProps = useMemo(() => {
     return _extends({
-      boundaryElement,
-      placement,
-      portal,
-      radius: popoverRadius,
-      overflow: preventOverflow,
-      scheme: popoverScheme
+      boundaryElement: deprecated_boundaryElement,
+      placement: deprecated_placement,
+      portal: deprecated_portal,
+      radius: deprecated_popoverRadius,
+      preventOverflow: deprecated_preventOverflow,
+      scheme: deprecated_popoverScheme
     }, popover || {});
-  }, [boundaryElement, placement, popover, popoverRadius, portal, preventOverflow, popoverScheme]);
+  }, [deprecated_boundaryElement, deprecated_preventOverflow, deprecated_placement, popover, deprecated_popoverRadius, deprecated_portal, deprecated_popoverScheme]);
   return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
     content: menu,
     "data-ui": "MenuButton__popover",
@@ -9564,7 +9689,7 @@ function selectableColorStyle(props) {
  * @internal
  */
 
-const Selectable = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 
 function useMenu() {
   const value = useContext(MenuContext);
@@ -9596,7 +9721,7 @@ function MenuGroup(props) {
     icon,
     onClick,
     padding = 3,
-    popover = {},
+    popover,
     radius = 2,
     space = 3,
     text,
@@ -9694,7 +9819,7 @@ function MenuGroup(props) {
     "aria-pressed": as === 'button' ? withinMenu : undefined,
     "data-pressed": as !== 'button' ? withinMenu : undefined,
     "data-selected": !withinMenu && active ? '' : undefined,
-    "$radius": radius,
+    "$radius": useArrayProp(radius),
     "$tone": tone,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -9781,21 +9906,20 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef)
     setRootElement(el);
   }, [ref]);
   return /*#__PURE__*/React.createElement(Selectable, _extends({
-    "data-as": as,
-    "data-ui": "MenuItem",
-    forwardedAs: as
+    "data-ui": "MenuItem"
   }, restProps, {
     "aria-pressed": as === 'button' && pressed,
     "data-pressed": as !== 'button' && pressed ? '' : undefined,
     "data-selected": active ? '' : undefined,
     "data-disabled": disabled ? '' : undefined,
-    "$radius": radius,
+    forwardedAs: as,
+    "$radius": useArrayProp(radius),
+    "$padding": useArrayProp(0),
     "$tone": tone,
     disabled: disabled,
     onClick: handleClick,
     onMouseEnter: onItemMouseEnter,
     onMouseLeave: onItemMouseLeave,
-    padding: 0,
     ref: setRef,
     role: "menuitem",
     tabIndex: -1,
@@ -9913,7 +10037,7 @@ const Skeleton = /*#__PURE__*/forwardRef(function Skeleton(props, ref) {
   }, [delay]);
   return /*#__PURE__*/React.createElement(Root$4, _extends({}, restProps, {
     "$animated": animated,
-    "$radius": radius,
+    "$radius": useArrayProp(radius),
     "$visible": visible,
     ref: ref
   }));
@@ -9932,13 +10056,15 @@ const Root$3 = styled(Skeleton)(({
     media
   } = theme.sanity;
   const font = theme.sanity.fonts[$style];
-  const styles = responsive(media, $size, sizeIndex => {
+
+  const styles = _responsive(media, $size, sizeIndex => {
     const fontSize = font.sizes[sizeIndex];
     const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
     return {
       height: capHeight
     };
   });
+
   return styles;
 });
 /**
@@ -9952,7 +10078,7 @@ const TextSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
-  const $size = useResponsiveProp(size);
+  const $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9970,7 +10096,7 @@ const LabelSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref)
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  const $size = useResponsiveProp(size);
+  const $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9988,7 +10114,7 @@ const HeadingSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
-  const $size = useResponsiveProp(size);
+  const $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -10006,7 +10132,7 @@ const CodeSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-  const $size = useResponsiveProp(size);
+  const $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -10958,5 +11084,5 @@ const TreeItem = /*#__PURE__*/memo(function TreeItem(props) {
   }, children)));
 });
 
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, RO as ResizeObserver, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, attemptFocus, createColorTheme, fillCSSObject, focusFirstDescendant, focusLastDescendant, getResponsiveProp, getResponsiveSpace, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsive, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useResponsiveProp, useRootTheme, useTheme, useToast, useTree };
-//# sourceMappingURL=sanity-ui.modern.js.map
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, useRootTheme, useTheme, useToast, useTree };
+//# sourceMappingURL=sanity-ui.modern.mjs.map