@sanity/ui 0.37.12 → 0.37.14-next.6

package/lib/sanity-ui.module.js

@@ -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() {
@@ -107,8 +106,234 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 
+/**
+ * @internal
+ */
 var EMPTY_ARRAY = [];
-var EMPTY_RECORD$1 = {};
+/**
+ * @internal
+ */
+
+var EMPTY_RECORD = {};
+/**
+ * @internal
+ */
+
+var FLOATING_STATIC_SIDES = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+
+/**
+ * @internal
+ */
+
+function _fillCSSObject(keys, value) {
+  return keys.reduce(function (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) {
+  var statements = values.map(callback);
+  return statements.map(function (statement, mediaIndex) {
+    var _ref;
+
+    if (mediaIndex === 0) return statement;
+    return _ref = {}, _ref["@media screen and (min-width: " + media[mediaIndex - 1] + "px)"] = statement, _ref;
+  });
+}
+/**
+ * @internal
+ */
+
+function _getArrayProp(val, defaultVal) {
+  if (val === undefined) return defaultVal || EMPTY_ARRAY;
+  return Array.isArray(val) ? val : [val];
+}
+/**
+ * @internal
+ */
+
+function _getResponsiveSpace(theme, props, spaceIndexes) {
+  if (spaceIndexes === void 0) {
+    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, function (spaceIndex) {
+    return _fillCSSObject(props, rem(theme.sanity.space[spaceIndex]));
+  });
+}
+
+/**
+ * A utility function getting responsive font styles.
+ * @internal
+ */
+
+function responsiveFont(fontKey, props) {
+  var $size = props.$size,
+      $weight = props.$weight,
+      theme = props.theme;
+  var _theme$sanity = theme.sanity,
+      fonts = _theme$sanity.fonts,
+      media = _theme$sanity.media;
+  var _fonts$fontKey = fonts[fontKey],
+      family = _fonts$fontKey.family,
+      sizes = _fonts$fontKey.sizes,
+      weights = _fonts$fontKey.weights;
+  var fontWeight = $weight && weights[$weight] || weights.regular; // @todo: make this configurable
+
+  var defaultSize = sizes[2];
+  var base = {
+    position: 'relative',
+    fontFamily: family,
+    fontWeight: 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'
+    }
+  };
+
+  var resp = _responsive(media, $size, function (sizeIndex) {
+    return fontSize(sizes[sizeIndex] || defaultSize);
+  });
+
+  return [base].concat(resp);
+}
+function fontSize(size) {
+  var ascenderHeight = size.ascenderHeight,
+      descenderHeight = size.descenderHeight,
+      fontSize = size.fontSize,
+      iconSize = size.iconSize,
+      letterSpacing = size.letterSpacing,
+      lineHeight = size.lineHeight;
+  var negHeight = ascenderHeight + descenderHeight;
+  var capHeight = lineHeight - negHeight;
+  var iconOffset = (capHeight - iconSize) / 2;
+  var customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1;
+  var 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) {
+  var theme = props.theme;
+  return _responsive(theme.sanity.media, props.$align, function (textAlign) {
+    return {
+      textAlign: 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) {
+  var __perf_hash__ = JSON.stringify(val != null ? val : defaultVal);
+
+  return useMemo(function () {
+    return _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) {
   var ret = [element];
@@ -211,26 +436,110 @@ function useClickOutside(listener, elementsArg, boundaryElement) {
 }
 
 /**
- * Subscribe to the rect of a DOM element.
+ * @internal
+ */
+
+var _ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
+
+// NOTE: this should NOT have size effects
+
+/**
+ * @internal
+ */
+
+var _elementSizeObserver = _createElementSizeObserver();
+
+function _createElementRectValueListener() {
+  return {
+    subscribe: function subscribe(element, subscriber) {
+      var resizeObserver = new _ResizeObserver(function (_ref) {
+        var entry = _ref[0];
+        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 function () {
+        resizeObserver.unobserve(element);
+        resizeObserver.disconnect();
+      };
+    }
+  };
+}
+
+function _createElementSizeObserver() {
+  var disposeCache = new WeakMap();
+  var subscribersCache = new WeakMap();
+  return {
+    subscribe: function subscribe(element, subscriber) {
+      var subscribers = subscribersCache.get(element) || [];
+      var dispose = disposeCache.get(element);
+
+      if (!subscribersCache.has(element)) {
+        subscribersCache.set(element, subscribers);
+
+        var listener = _createElementRectValueListener(); // listen
+
+
+        dispose = listener.subscribe(element, function (elementRect) {
+          for (var _iterator = _createForOfIteratorHelperLoose(subscribers), _step; !(_step = _iterator()).done;) {
+            var sub = _step.value;
+            sub(elementRect);
+          }
+        });
+      }
+
+      subscribers.push(subscriber);
+      return function () {
+        // dispose
+        var 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) {
+function useElementSize(element) {
   var _useState = useState(null),
-      rect = _useState[0],
-      setRect = _useState[1];
+      size = _useState[0],
+      setSize = _useState[1];
 
   useEffect(function () {
     if (!element) return undefined;
-    var ro = new ResizeObserver(function (entries) {
-      setRect(entries[0].contentRect);
-    });
-    ro.observe(element);
-    return function () {
-      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) {
+  var elementSize = useElementSize(element);
+  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
 }
 
 /**
@@ -2319,8 +2628,7 @@ var color = createColorTheme({
 
 var 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,
@@ -2366,7 +2674,6 @@ var 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,
@@ -2402,15 +2709,15 @@ var 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,
@@ -2419,7 +2726,6 @@ var 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,
@@ -2465,7 +2771,6 @@ var 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,
@@ -2634,7 +2939,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/createContext(null);
 
 var ThemeContext = globalScope[key$7];
 
-var _excluded$H = ["color", "layer"];
+var _excluded$I = ["color", "layer"];
 /**
  * @public
  */
@@ -2653,7 +2958,7 @@ function ThemeProvider(props) {
 
     var rootColor = themeProp.color,
         rootLayer = themeProp.layer,
-        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$H);
+        restTheme = _objectWithoutPropertiesLoose(themeProp, _excluded$I);
 
     var colorScheme = rootColor[scheme] || rootColor.light;
     var color = colorScheme[tone] || colorScheme["default"];
@@ -2922,217 +3227,6 @@ function useCustomValidity(ref, customValidity) {
   }, [customValidity, ref]);
 }
 
-/**
- * @internal
- */
-
-function fillCSSObject(propKeys, value) {
-  return propKeys.reduce(function (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) {
-  var statements = values.map(callback);
-  return statements.map(function (statement, mediaIndex) {
-    var _ref;
-
-    if (mediaIndex === 0) return statement;
-    return _ref = {}, _ref["@media screen and (min-width: " + media[mediaIndex - 1] + "px)"] = statement, _ref;
-  });
-}
-/**
- * @internal
- */
-
-function getResponsiveProp(val, defaultVal) {
-  if (val === undefined) return defaultVal || EMPTY_ARRAY;
-  return Array.isArray(val) ? val : [val];
-}
-/**
- * @internal
- */
-
-function getResponsiveSpace(theme, props, spaceIndexes) {
-  if (spaceIndexes === void 0) {
-    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, function (spaceIndex) {
-    return fillCSSObject(props, rem(theme.sanity.space[spaceIndex]));
-  });
-}
-
-/**
- * A utility function getting responsive font styles.
- * @internal
- */
-
-function responsiveFont(fontKey, props) {
-  var $size = props.$size,
-      $weight = props.$weight,
-      theme = props.theme;
-  var _theme$sanity = theme.sanity,
-      fonts = _theme$sanity.fonts,
-      media = _theme$sanity.media;
-  var _fonts$fontKey = fonts[fontKey],
-      family = _fonts$fontKey.family,
-      sizes = _fonts$fontKey.sizes,
-      weights = _fonts$fontKey.weights,
-      horizontalOffset = _fonts$fontKey.horizontalOffset;
-  var fontWeight = $weight && weights[$weight] || weights.regular; // @todo: make this configurable
-
-  var defaultSize = sizes[2];
-  var base = {
-    position: 'relative',
-    fontFamily: family,
-    fontWeight: 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'
-    }
-  };
-  var resp = responsive(media, getResponsiveProp($size), function (sizeIndex) {
-    return fontSize(sizes[sizeIndex] || defaultSize, horizontalOffset);
-  });
-  return [base].concat(resp);
-}
-function fontSize(size, horizontalOffset) {
-  var ascenderHeight = size.ascenderHeight,
-      descenderHeight = size.descenderHeight,
-      fontSize = size.fontSize,
-      iconSize = size.iconSize,
-      letterSpacing = size.letterSpacing,
-      lineHeight = size.lineHeight;
-  var negHeight = ascenderHeight + descenderHeight;
-  var capHeight = lineHeight - negHeight;
-  var iconOffset = (capHeight - iconSize) / 2;
-  var customIconSize = Math.floor(fontSize * 1.125 / 2) * 2 + 1;
-  var 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) {
-  var theme = props.theme;
-  return responsive(theme.sanity.media, getResponsiveProp(props.$align), function (textAlign) {
-    return {
-      textAlign: 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 useResponsiveProp(val, defaultVal) {
-  return useMemo(function () {
-    return getResponsiveProp(val, defaultVal);
-  }, [defaultVal, val]);
-}
-
 var BORDER_VALUE = '1px solid var(--card-border-color)';
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -3141,7 +3235,7 @@ function responsiveBorderStyle() {
 function border(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$border), function (value) {
+  return _responsive(media, props.$border, function (value) {
     return value ? {
       '&&': {
         border: BORDER_VALUE
@@ -3157,7 +3251,7 @@ function border(props) {
 function borderTop(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$borderTop), function (value) {
+  return _responsive(media, props.$borderTop, function (value) {
     return value ? {
       '&&': {
         borderTop: BORDER_VALUE
@@ -3173,7 +3267,7 @@ function borderTop(props) {
 function borderRight(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$borderRight), function (value) {
+  return _responsive(media, props.$borderRight, function (value) {
     return value ? {
       '&&': {
         borderRight: BORDER_VALUE
@@ -3189,7 +3283,7 @@ function borderRight(props) {
 function borderBottom(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$borderBottom), function (value) {
+  return _responsive(media, props.$borderBottom, function (value) {
     return value ? {
       '&&': {
         borderBottom: BORDER_VALUE
@@ -3205,7 +3299,7 @@ function borderBottom(props) {
 function borderLeft(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$borderLeft), function (value) {
+  return _responsive(media, props.$borderLeft, function (value) {
     return value ? {
       '&&': {
         borderLeft: BORDER_VALUE
@@ -3241,7 +3335,7 @@ function responsiveBoxStyle() {
 function responsiveBoxDisplayStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$display), function (display) {
+  return _responsive(media, props.$display, function (display) {
     return {
       '&:not([hidden])': {
         display: display
@@ -3253,7 +3347,7 @@ function responsiveBoxDisplayStyle(props) {
 function responsiveBoxSizingStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$sizing), function (sizing) {
+  return _responsive(media, props.$sizing, function (sizing) {
     return {
       boxSizing: BOX_SIZING[sizing]
     };
@@ -3263,7 +3357,7 @@ function responsiveBoxSizingStyle(props) {
 function responsiveBoxHeightStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$height), function (height) {
+  return _responsive(media, props.$height, function (height) {
     return {
       height: BOX_HEIGHT[height]
     };
@@ -3273,7 +3367,7 @@ function responsiveBoxHeightStyle(props) {
 function responsiveBoxOverflowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$overflow), function (overflow) {
+  return _responsive(media, props.$overflow, function (overflow) {
     return {
       overflow: overflow
     };
@@ -3291,7 +3385,7 @@ function responsiveFlexStyle() {
 function responsiveFlexAlignStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$align), function (align) {
+  return _responsive(media, props.$align, function (align) {
     return {
       alignItems: align
     };
@@ -3303,7 +3397,7 @@ function responsiveFlexGapStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return responsive(media, getResponsiveProp(props.$gap), function (gap) {
+  return _responsive(media, props.$gap, function (gap) {
     return {
       gap: gap ? rem(space[gap]) : undefined
     };
@@ -3313,7 +3407,7 @@ function responsiveFlexGapStyle(props) {
 function responsiveFlexWrapStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$wrap), function (wrap) {
+  return _responsive(media, props.$wrap, function (wrap) {
     return {
       flexWrap: wrap
     };
@@ -3322,7 +3416,7 @@ function responsiveFlexWrapStyle(props) {
 function responsiveFlexJustifyStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$justify), function (justify) {
+  return _responsive(media, props.$justify, function (justify) {
     return {
       justifyContent: justify
     };
@@ -3331,7 +3425,7 @@ function responsiveFlexJustifyStyle(props) {
 function responsiveFlexDirectionStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$direction), function (direction) {
+  return _responsive(media, props.$direction, function (direction) {
     return {
       flexDirection: direction
     };
@@ -3348,7 +3442,8 @@ function flexItemStyle() {
 function responsiveFlexItemStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$flex), function (flex) {
+  if (!props.$flex) return EMPTY_ARRAY;
+  return _responsive(media, props.$flex, function (flex) {
     return {
       flex: flex
     };
@@ -3395,7 +3490,7 @@ function responsiveGridStyle() {
 function responsiveGridAutoFlowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$autoFlow), function (autoFlow) {
+  return _responsive(media, props.$autoFlow, function (autoFlow) {
     return {
       gridAutoFlow: autoFlow
     };
@@ -3405,7 +3500,7 @@ function responsiveGridAutoFlowStyle(props) {
 function responsiveGridAutoRowsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$autoRows), function (autoRows) {
+  return _responsive(media, props.$autoRows, function (autoRows) {
     return {
       gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
     };
@@ -3415,7 +3510,7 @@ function responsiveGridAutoRowsStyle(props) {
 function responsiveGridAutoColsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$autoCols), function (autoCols) {
+  return _responsive(media, props.$autoCols, function (autoCols) {
     return {
       gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
     };
@@ -3425,7 +3520,7 @@ function responsiveGridAutoColsStyle(props) {
 function responsiveGridColumnsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$columns), function (columns) {
+  return _responsive(media, props.$columns, function (columns) {
     return {
       gridTemplateColumns: columns && "repeat(" + columns + ",minmax(0,1fr));"
     };
@@ -3435,7 +3530,7 @@ function responsiveGridColumnsStyle(props) {
 function responsiveGridRowsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$rows), function (rows) {
+  return _responsive(media, props.$rows, function (rows) {
     return {
       gridTemplateRows: rows && "repeat(" + rows + ",minmax(0,1fr));"
     };
@@ -3447,7 +3542,7 @@ function responsiveGridGapStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return responsive(media, getResponsiveProp(props.$gap), function (gap) {
+  return _responsive(media, props.$gap, function (gap) {
     return {
       gridGap: gap ? rem(space[gap]) : undefined
     };
@@ -3459,7 +3554,7 @@ function responsiveGridGapXStyle(props) {
   var _theme$sanity2 = theme.sanity,
       media = _theme$sanity2.media,
       space = _theme$sanity2.space;
-  return responsive(media, getResponsiveProp(props.$gapX), function (gapX) {
+  return _responsive(media, props.$gapX, function (gapX) {
     return {
       columnGap: gapX ? rem(space[gapX]) : undefined
     };
@@ -3471,7 +3566,7 @@ function responsiveGridGapYStyle(props) {
   var _theme$sanity3 = theme.sanity,
       media = _theme$sanity3.media,
       space = _theme$sanity3.space;
-  return responsive(media, getResponsiveProp(props.$gapY), function (gapY) {
+  return _responsive(media, props.$gapY, function (gapY) {
     return {
       rowGap: gapY ? rem(space[gapY]) : undefined
     };
@@ -3493,7 +3588,7 @@ var GRID_ITEM_COLUMN = {
 function responsiveGridItemRowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$row), function (row) {
+  return _responsive(media, props.$row, function (row) {
     if (typeof row === 'number') {
       return {
         gridRow: "span " + row + " / span " + row
@@ -3509,7 +3604,7 @@ function responsiveGridItemRowStyle(props) {
 function responsiveGridItemRowStartStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$rowStart), function (rowStart) {
+  return _responsive(media, props.$rowStart, function (rowStart) {
     return {
       gridRowStart: rowStart
     };
@@ -3519,7 +3614,7 @@ function responsiveGridItemRowStartStyle(props) {
 function responsiveGridItemRowEndStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$rowEnd), function (rowEnd) {
+  return _responsive(media, props.$rowEnd, function (rowEnd) {
     return {
       gridRowEnd: rowEnd
     };
@@ -3529,7 +3624,7 @@ function responsiveGridItemRowEndStyle(props) {
 function responsiveGridItemColumnStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$column), function (column) {
+  return _responsive(media, props.$column, function (column) {
     if (typeof column === 'number') {
       return {
         gridColumn: "span " + column + " / span " + column
@@ -3545,7 +3640,7 @@ function responsiveGridItemColumnStyle(props) {
 function responsiveGridItemColumnStartStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$columnStart), function (columnStart) {
+  return _responsive(media, props.$columnStart, function (columnStart) {
     return {
       gridColumnStart: columnStart
     };
@@ -3555,7 +3650,7 @@ function responsiveGridItemColumnStartStyle(props) {
 function responsiveGridItemColumnEndStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$columnEnd), function (columnEnd) {
+  return _responsive(media, props.$columnEnd, function (columnEnd) {
     return {
       gridColumnEnd: columnEnd
     };
@@ -3563,36 +3658,36 @@ function responsiveGridItemColumnEndStyle(props) {
 }
 
 function responsiveInputPaddingStyle(props) {
-  var $iconLeft = props.$iconLeft,
+  var $fontSize = props.$fontSize,
+      $iconLeft = props.$iconLeft,
       $iconRight = props.$iconRight,
+      $padding = props.$padding,
+      $space = props.$space,
       theme = props.theme;
   var _theme$sanity = theme.sanity,
       fonts = _theme$sanity.fonts,
       media = _theme$sanity.media,
       spaceScale = _theme$sanity.space;
-  var padding = getResponsiveProp(props.$padding, [0]);
-  var space = getResponsiveProp(props.$space, [0]);
-  var size = getResponsiveProp(props.$fontSize, [0]);
-  var len = Math.max(padding.length, space.length, size.length);
+  var len = Math.max($padding.length, $space.length, $fontSize.length);
   var _padding = [];
   var _space = [];
-  var _size = [];
+  var _fontSize = [];
 
   for (var 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, function (_, i) {
-    var fontSize = fonts.text.sizes[_size[i]] || fonts.text.sizes[2];
-    var emSize = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
+  return _responsive(media, _padding, function (_, i) {
+    var size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2];
+    var emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight;
     var p = spaceScale[_padding[i]];
     var s = spaceScale[_space[i]];
     var 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);
@@ -3606,24 +3701,25 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-var _templateObject$D, _templateObject2$n, _templateObject3$e;
-var ROOT_STYLE = css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
+var _templateObject$C, _templateObject2$m, _templateObject3$d;
+var ROOT_STYLE = css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
 function textInputBaseStyle(props) {
   var theme = props.theme,
+      $tone = props.$tone,
       $weight = props.$weight;
   var font = theme.sanity.fonts.text;
   var color = theme.sanity.color.input;
-  return css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n    --input-fg-color: ", ";\n    --input-placeholder-color: ", ";\n\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n    color: var(--input-fg-color);\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    /* enabled */\n    &:not(:invalid):not(:disabled):not(:read-only) {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* disabled */\n    &:not(:invalid):disabled {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* invalid */\n    &:invalid {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n\n    /* readOnly */\n    &:read-only {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n    }\n  "])), 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);
+  return css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), 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) {
   var theme = props.theme;
   var _theme$sanity = theme.sanity,
       fonts = _theme$sanity.fonts,
       media = _theme$sanity.media;
-  return responsive(media, getResponsiveProp(props.$fontSize, [2]), function (sizeIndex) {
+  return _responsive(media, props.$fontSize, function (sizeIndex) {
     var size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2];
     return {
       fontSize: rem(size.fontSize),
@@ -3635,12 +3731,13 @@ function textInputRepresentationStyle(props) {
   var $border = props.$border,
       $hasPrefix = props.$hasPrefix,
       $hasSuffix = props.$hasSuffix,
+      $tone = props.$tone,
       theme = props.theme;
   var _theme$sanity2 = theme.sanity,
       focusRing = _theme$sanity2.focusRing,
       input = _theme$sanity2.input;
   var color = theme.sanity.color.input;
-  return css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteralLoose(["\n    --card-bg-color: ", ";\n    --card-fg-color: ", ";\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    /* enabled */\n    *:not(:disabled) + && {\n      --input-box-shadow: ", ";\n    }\n\n    /* invalid */\n    *:not(:disabled):invalid + && {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n      --input-box-shadow: ", ";\n    }\n\n    /* focused */\n    *:not(:disabled):focus + && {\n      --input-box-shadow: ", ";\n    }\n\n    /* disabled */\n    *:disabled + && {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n      --input-box-shadow: ", ";\n    }\n\n    /* hovered */\n    @media (hover: hover) {\n      *:not(:disabled):not(:read-only):not(:invalid):hover + && {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n      }\n\n      *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + && {\n        --input-box-shadow: ", ";\n      }\n    }\n\n    /* readOnly */\n    *:read-only + && {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n    }\n  "])), color["default"].enabled.bg, color["default"].enabled.fg, $hasPrefix ? 0 : undefined, $hasPrefix ? 0 : undefined, $hasSuffix ? 0 : undefined, $hasSuffix ? 0 : undefined, $border ? focusRingBorderStyle({
+  return css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n        --input-box-shadow: ", ";\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        --input-box-shadow: ", ";\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --input-box-shadow: ", ";\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + & {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $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({
@@ -3655,20 +3752,20 @@ 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) {
   var theme = props.theme;
-  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) {
   var theme = props.theme;
-  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) {
@@ -3676,7 +3773,7 @@ function responsiveRadiusStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       radius = _theme$sanity.radius;
-  return responsive(media, getResponsiveProp(props.$radius), function (radiusIndex) {
+  return _responsive(media, props.$radius, function (radiusIndex) {
     return {
       borderRadius: rem(radius[radiusIndex])
     };
@@ -3688,7 +3785,7 @@ function toBoxShadow(shadow, color) {
 }
 
 function shadowStyle(shadow) {
-  if (!shadow) return EMPTY_RECORD$1;
+  if (!shadow) return EMPTY_RECORD;
   var outline = "0 0 0 " + rem(1) + " var(--card-shadow-outline-color)";
   var umbra = toBoxShadow(shadow.umbra, 'var(--card-shadow-umbra-color)');
   var penumbra = toBoxShadow(shadow.penumbra, 'var(--card-shadow-penumbra-color)');
@@ -3703,25 +3800,25 @@ function responsiveShadowStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       shadows = _theme$sanity.shadows;
-  return responsive(media, getResponsiveProp(props.$shadow), function (shadow) {
+  return _responsive(media, props.$shadow, function (shadow) {
     return shadowStyle(shadows[shadow]);
   });
 }
 
-var _templateObject$C, _templateObject2$m, _templateObject3$d;
+var _templateObject$B, _templateObject2$l, _templateObject3$c;
 function textBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var weights = theme.sanity.fonts.text.weights;
-  return css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 
-var _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$H = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$B;
+var _templateObject$A;
 var Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-var SpanWithTextOverflow$2 = styled.span(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$2 = styled.span(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -3737,7 +3834,7 @@ var Text = /*#__PURE__*/forwardRef(function Text(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$H);
 
   var children = childrenProp;
 
@@ -3749,10 +3846,10 @@ var 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));
 });
@@ -3848,7 +3945,7 @@ function responsiveAvatarSizeStyle(props) {
   var _theme$sanity = theme.sanity,
       avatar = _theme$sanity.avatar,
       media = _theme$sanity.media;
-  return responsive(media, props.$size, function (size) {
+  return _responsive(media, props.$size, function (size) {
     var avatarSize = avatar.sizes[size] || avatar.sizes[0];
     return {
       width: rem(avatarSize.size),
@@ -3897,7 +3994,7 @@ function avatarStrokeStyle() {
   };
 }
 
-var _excluded$F = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
+var _excluded$G = ["as", "color", "src", "title", "initials", "onImageLoadError", "arrowPosition", "animateArrowFrom", "status", "size"];
 var Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
 var Arrow = styled.div(avatarStyle.arrow);
 var BgStroke = styled.ellipse(avatarStyle.bgStroke);
@@ -3919,11 +4016,12 @@ var Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
       animateArrowFrom = props.animateArrowFrom,
       _props$status = props.status,
       status = _props$status === void 0 ? 'online' : _props$status,
-      sizeProp = props.size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+      _props$size = props.size,
+      sizeProp = _props$size === void 0 ? 0 : _props$size,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var as = ReactIs.isValidElementType(asProp) ? asProp : 'div';
-  var size = useResponsiveProp(sizeProp, [0]);
+  var size = useArrayProp(sizeProp);
   var theme = useTheme();
   var color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray; // @todo: remove this
 
@@ -3963,6 +4061,11 @@ var Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
       onImageLoadError(new Error('Avatar: the image failed to load'));
     }
   }, [onImageLoadError]);
+  var initialsSize = useMemo(function () {
+    return size.map(function (s) {
+      return s === 0 ? 0 : s + 1;
+    });
+  }, [size]);
   return /*#__PURE__*/React.createElement(Root$D, _extends({
     as: as,
     "data-as": typeof as === 'string' ? as : undefined,
@@ -4016,22 +4119,20 @@ var 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(function (s) {
-      return s === 0 ? 0 : s + 1;
-    })
+    size: initialsSize
   }, /*#__PURE__*/React.createElement("strong", null, initials)))));
 });
 
-var _templateObject$A;
+var _templateObject$z;
 
-function responsiveAvatarCounterSizeStyle(props) {
+function _responsiveAvatarCounterSizeStyle(props) {
   var theme = props.theme;
   var _theme$sanity = theme.sanity,
       avatar = _theme$sanity.avatar,
       media = _theme$sanity.media;
-  return responsive(media, props.$size, function (size) {
+  return _responsive(media, props.$size, function (size) {
     var 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),
@@ -4040,12 +4141,12 @@ function responsiveAvatarCounterSizeStyle(props) {
   });
 }
 
-function avatarCounterBaseStyle(props) {
+function _avatarCounterBaseStyle(props) {
   var theme = props.theme;
-  return css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 
-var Root$C = styled.div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle);
+var Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 /**
  * @public
  */
@@ -4053,18 +4154,20 @@ var Root$C = styled.div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle
 var AvatarCounter = /*#__PURE__*/forwardRef(function AvatarCounter(props, ref) {
   var count = props.count,
       _props$size = props.size,
-      sizeProp = _props$size === void 0 ? 0 : _props$size,
-      tone = props.tone;
-  var size = useResponsiveProp(sizeProp, [0]);
+      sizeProp = _props$size === void 0 ? 0 : _props$size;
+  var size = useArrayProp(sizeProp);
+  var counterSize = useMemo(function () {
+    return size.map(function (s) {
+      return 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(function (s) {
-      return s === 0 ? 0 : s + 1;
-    })
+    size: counterSize
   }, /*#__PURE__*/React.createElement("strong", null, count)));
 });
 
@@ -4075,10 +4178,10 @@ function childrenToElementArray(children) {
   });
 }
 
-var _excluded$E = ["children", "maxLength", "size", "tone"];
+var _excluded$F = ["children", "maxLength", "size"];
 
-var _templateObject$z;
-var BASE_STYLES = css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _templateObject$y;
+var BASE_STYLES = css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 
 function avatarStackStyle() {
   return BASE_STYLES;
@@ -4089,9 +4192,9 @@ function responsiveAvatarStackSizeStyle(props) {
   var _theme$sanity = theme.sanity,
       avatar = _theme$sanity.avatar,
       media = _theme$sanity.media;
-  return responsive(media, getResponsiveProp(props.size), function (size) {
+  return _responsive(media, props.$size, function (size) {
     var avatarSize = avatar.sizes[size];
-    if (!avatarSize) return EMPTY_RECORD$1;
+    if (!avatarSize) return EMPTY_RECORD;
     return {
       '& > div + div': {
         marginLeft: rem(avatarSize.distance)
@@ -4110,14 +4213,14 @@ var AvatarStack = /*#__PURE__*/forwardRef(function AvatarStack(props, ref) {
       _props$maxLength = props.maxLength,
       maxLengthProp = _props$maxLength === void 0 ? 4 : _props$maxLength,
       _props$size = props.size,
-      size = _props$size === void 0 ? 0 : _props$size,
-      tone = props.tone,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+      sizeProp = _props$size === void 0 ? 0 : _props$size,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
 
-  var maxLength = Math.max(maxLengthProp, 0);
   var children = childrenToElementArray(childrenProp).filter(function (child) {
     return typeof child !== 'string';
   });
+  var maxLength = Math.max(maxLengthProp, 0);
+  var size = useArrayProp(sizeProp);
   var len = children.length;
   var visibleCount = maxLength - 1;
   var extraCount = len - visibleCount;
@@ -4126,25 +4229,22 @@ var 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(function (child, childIndex) {
     return /*#__PURE__*/React.createElement("div", {
       key: String(childIndex)
     }, /*#__PURE__*/cloneElement(child, {
-      size: size,
-      tone: tone
+      size: size
     }));
   }));
 });
 
-var _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"];
+var _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"];
 var Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4181,56 +4281,56 @@ var Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
       rowStart = props.rowStart,
       rowEnd = props.rowEnd,
       sizing = props.sizing,
-      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);
 });
 
-var _templateObject$y, _templateObject2$l, _templateObject3$c;
+var _templateObject$x, _templateObject2$k, _templateObject3$b;
 function labelBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var fonts = theme.sanity.fonts;
-  return css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return css(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
 
-var _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$D = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$x;
+var _templateObject$w;
 var Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-var SpanWithTextOverflow$1 = styled.span(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$1 = styled.span(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -4245,7 +4345,7 @@ var Label = /*#__PURE__*/forwardRef(function Label(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$C);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$D);
 
   var children = childrenProp;
 
@@ -4259,9 +4359,9 @@ var 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);
@@ -4284,7 +4384,7 @@ function badgeStyle(props) {
   };
 }
 
-var _excluded$B = ["children", "fontSize", "mode", "padding", "radius", "tone"];
+var _excluded$C = ["children", "fontSize", "mode", "padding", "radius", "tone"];
 var Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4301,22 +4401,22 @@ var Badge = /*#__PURE__*/forwardRef(function Badge(props, ref) {
       radius = _props$radius === void 0 ? 2 : _props$radius,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'default' : _props$tone,
-      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));
 });
 
-var _excluded$A = ["align", "as", "direction", "gap", "justify", "wrap"];
+var _excluded$B = ["align", "as", "direction", "gap", "justify", "wrap"];
 var Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4330,24 +4430,24 @@ var Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
       gap = props.gap,
       justify = props.justify,
       wrap = props.wrap,
-      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
   }));
 });
 
-var _templateObject$w, _templateObject2$k;
-var rotate$1 = keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-var Root$w = styled(Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var _templateObject$v, _templateObject2$j;
+var rotate$1 = keyframes(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var Root$w = styled(Text)(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 /**
  * @public
  */
@@ -4397,13 +4497,13 @@ function _colorVarsStyle(base, color, checkered) {
   };
 }
 
-var _templateObject$v;
+var _templateObject$u;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+  return css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
 }
 var buttonTheme = {
   border: {
@@ -4452,11 +4552,11 @@ 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);
 }
 
-var _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
+var _excluded$A = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-var _templateObject$u;
+var _templateObject$t;
 var Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-var LoadingBox = styled.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+var LoadingBox = styled.div(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 /**
  * @public
  */
@@ -4468,31 +4568,41 @@ var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
       icon = props.icon,
       iconRight = props.iconRight,
       _props$justify = props.justify,
-      justify = _props$justify === void 0 ? 'center' : _props$justify,
+      justifyProp = _props$justify === void 0 ? 'center' : _props$justify,
       loading = props.loading,
       _props$mode = props.mode,
       mode = _props$mode === void 0 ? 'default' : _props$mode,
       _props$padding = props.padding,
-      padding = _props$padding === void 0 ? 3 : _props$padding,
-      paddingX = props.paddingX,
-      paddingY = props.paddingY,
-      paddingTop = props.paddingTop,
-      paddingBottom = props.paddingBottom,
-      paddingLeft = props.paddingLeft,
-      paddingRight = props.paddingRight,
+      paddingProp = _props$padding === void 0 ? 3 : _props$padding,
+      paddingXProp = props.paddingX,
+      paddingYProp = props.paddingY,
+      paddingTopProp = props.paddingTop,
+      paddingBottomProp = props.paddingBottom,
+      paddingLeftProp = props.paddingLeft,
+      paddingRightProp = props.paddingRight,
       _props$radius = props.radius,
-      radius = _props$radius === void 0 ? 2 : _props$radius,
+      radiusProp = _props$radius === void 0 ? 2 : _props$radius,
       selected = props.selected,
       _props$space = props.space,
-      space = _props$space === void 0 ? 3 : _props$space,
+      spaceProp = _props$space === void 0 ? 3 : _props$space,
       text = props.text,
       textAlign = props.textAlign,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'default' : _props$tone,
       _props$type = props.type,
       type = _props$type === void 0 ? 'button' : _props$type,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
 
+  var justify = useArrayProp(justifyProp);
+  var padding = useArrayProp(paddingProp);
+  var paddingX = useArrayProp(paddingXProp);
+  var paddingY = useArrayProp(paddingYProp);
+  var paddingTop = useArrayProp(paddingTopProp);
+  var paddingBottom = useArrayProp(paddingBottomProp);
+  var paddingLeft = useArrayProp(paddingLeftProp);
+  var paddingRight = useArrayProp(paddingRightProp);
+  var radius = useArrayProp(radiusProp);
+  var space = useArrayProp(spaceProp);
   var theme = useTheme();
   var boxProps = useMemo(function () {
     return {
@@ -4540,7 +4650,7 @@ var Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-var _templateObject$t, _templateObject2$j, _templateObject3$b;
+var _templateObject$s, _templateObject2$i, _templateObject3$a;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4548,7 +4658,7 @@ function cardBaseStyle(props) {
   var $checkered = props.$checkered,
       theme = props.theme;
   var space = theme.sanity.space;
-  return css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _theme$sanity$styles, _theme$sanity$styles$;
@@ -4564,7 +4674,7 @@ function cardColorStyle(props) {
     width: 0,
     color: 'var(--card-border-color)'
   };
-  return css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteralLoose(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base: base,
     border: border,
     focusRing: focusRing
@@ -4575,16 +4685,14 @@ 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);
 }
 
-var _excluded$y = ["pressed", "__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "radius", "scheme", "selected", "shadow", "tone"];
+var _excluded$z = ["__unstable_checkered", "__unstable_focusRing", "as", "border", "borderTop", "borderRight", "borderBottom", "borderLeft", "pressed", "radius", "scheme", "selected", "shadow", "tone"];
 var Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 /**
  * @public
  */
 
 var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
-  var _props$pressed = props.pressed,
-      pressed = _props$pressed === void 0 ? false : _props$pressed,
-      _props$__unstable_che = props.__unstable_checkered,
+  var _props$__unstable_che = props.__unstable_checkered,
       checkered = _props$__unstable_che === void 0 ? false : _props$__unstable_che,
       _props$__unstable_foc = props.__unstable_focusRing,
       focusRing = _props$__unstable_foc === void 0 ? false : _props$__unstable_foc,
@@ -4594,6 +4702,7 @@ var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
       borderRight = props.borderRight,
       borderBottom = props.borderBottom,
       borderLeft = props.borderLeft,
+      pressed = props.pressed,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 0 : _props$radius,
       scheme = props.scheme,
@@ -4601,7 +4710,7 @@ var Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
       shadow = props.shadow,
       _props$tone = props.tone,
       toneProp = _props$tone === void 0 ? 'default' : _props$tone,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var as = isValidElementType(asProp) ? asProp : 'div';
   var rootTheme = useRootTheme();
@@ -4611,32 +4720,32 @@ var 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
   })));
 });
 
-var _templateObject$s, _templateObject2$i;
+var _templateObject$r, _templateObject2$h;
 function checkboxBaseStyles() {
-  return css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   var theme = props.theme;
@@ -4645,7 +4754,7 @@ function inputElementStyles(props) {
       focusRing = _theme$sanity.focusRing,
       input = _theme$sanity.input,
       radius = _theme$sanity.radius;
-  return css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 2 !important;\n        }\n      }\n    }\n\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:not([data-read-only]):disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: color["default"].enabled.border,
     width: input.border.width
   }), rem(radius[2]), color["default"].enabled.bg, focusRingStyle({
@@ -4666,7 +4775,7 @@ function inputElementStyles(props) {
   }), color["default"].disabled.fg);
 }
 
-var _excluded$x = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
+var _excluded$y = ["checked", "className", "disabled", "indeterminate", "customValidity", "readOnly", "style"];
 var Root$t = styled.div(checkboxBaseStyles);
 var Input$5 = styled.input(inputElementStyles);
 /**
@@ -4681,7 +4790,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef) {
       customValidity = props.customValidity,
       readOnly = props.readOnly,
       style = props.style,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$y);
 
   var ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
@@ -4706,7 +4815,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef) {
   })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckmarkIcon, null), /*#__PURE__*/React.createElement(RemoveIcon, null)));
 });
 
-var _templateObject$r;
+var _templateObject$q;
 
 function codeSyntaxHighlightingStyle(_ref) {
   var theme = _ref.theme;
@@ -4824,10 +4933,10 @@ function codeSyntaxHighlightingStyle(_ref) {
 }
 
 function codeBaseStyle() {
-  return css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
 }
 
-var _excluded$w = ["children", "language", "size", "weight"];
+var _excluded$x = ["children", "language", "size", "weight"];
 var Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 /**
  * @public
@@ -4839,14 +4948,14 @@ var Code = /*#__PURE__*/forwardRef(function Code(props, ref) {
       _props$size = props.size,
       size = _props$size === void 0 ? 2 : _props$size,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$w);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$x);
 
   var language = typeof languageProp === 'string' ? languageProp : undefined;
   var 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, {
@@ -4868,14 +4977,14 @@ function responsiveContainerWidthStyle(props) {
   var _theme$sanity = theme.sanity,
       container = _theme$sanity.container,
       media = _theme$sanity.media;
-  return responsive(media, getResponsiveProp(props.$width), function (val) {
+  return _responsive(media, props.$width, function (val) {
     return {
       maxWidth: val === 'auto' ? 'none' : rem(container[val])
     };
   });
 }
 
-var _excluded$v = ["as", "width"];
+var _excluded$w = ["as", "width"];
 var Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 /**
  * @public
@@ -4885,18 +4994,18 @@ var Container = /*#__PURE__*/forwardRef(function Container(props, ref) {
   var as = props.as,
       _props$width = props.width,
       width = _props$width === void 0 ? 2 : _props$width,
-      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
   }));
 });
 
-var _excluded$u = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
+var _excluded$v = ["as", "autoRows", "autoCols", "autoFlow", "columns", "gap", "gapX", "gapY", "rows", "children"];
 var Root$q = styled(Box)(responsiveGridStyle);
 /**
  * @public
@@ -4913,38 +5022,38 @@ var Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
       gapY = props.gapY,
       rows = props.rows,
       children = props.children,
-      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);
 });
 
-var _templateObject$q, _templateObject2$h, _templateObject3$a;
+var _templateObject$p, _templateObject2$g, _templateObject3$9;
 function headingBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
-  return css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
 
-var _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
+var _excluded$u = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$p;
+var _templateObject$o;
 var Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-var SpanWithTextOverflow = styled.span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow = styled.span(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -4960,7 +5069,7 @@ var Heading = /*#__PURE__*/forwardRef(function Heading(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       textOverflow = props.textOverflow,
       weight = props.weight,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$u);
 
   var children = childrenProp;
 
@@ -4972,9 +5081,9 @@ var 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));
@@ -4994,7 +5103,7 @@ function inlineBaseStyle() {
 }
 function inlineSpaceStyle(props) {
   var theme = props.theme;
-  return responsive(theme.sanity.media, getResponsiveProp(props.$space), function (spaceIndex) {
+  return _responsive(theme.sanity.media, props.$space, function (spaceIndex) {
     var space = rem(theme.sanity.space[spaceIndex]);
     return {
       margin: "-" + space + " 0 0 -" + space,
@@ -5005,7 +5114,7 @@ function inlineSpaceStyle(props) {
   });
 }
 
-var _excluded$s = ["as", "children", "space"];
+var _excluded$t = ["as", "children", "space"];
 var Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 /**
  * @public
@@ -5015,28 +5124,30 @@ var Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
   var as = props.as,
       childrenProp = props.children,
       space = props.space,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$t);
 
-  var children = childrenToElementArray(childrenProp).filter(Boolean);
+  var children = useMemo(function () {
+    return childrenToElementArray(childrenProp).filter(Boolean).map(function (child, idx) {
+      return /*#__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(function (child, idx) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: idx
-    }, child);
-  }));
+  }), children);
 });
 
-var _excluded$r = ["children", "fontSize", "padding", "radius"];
+var _excluded$s = ["children", "fontSize", "padding", "radius"];
 
-var _templateObject$o;
+var _templateObject$n;
 
 function kbdStyle() {
-  return css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 var Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
@@ -5052,12 +5163,12 @@ var KBD = /*#__PURE__*/forwardRef(function KBD(props, ref) {
       padding = _props$padding === void 0 ? 1 : _props$padding,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 2 : _props$radius,
-      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",
@@ -5111,12 +5222,6 @@ function useBoundaryElement() {
   return value || DEFAULT_VALUE;
 }
 
-/**
- * @internal
- */
-
-var RO = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : ResizeObserver$1;
-
 function findMaxBreakpoints(media, width) {
   var ret = [];
 
@@ -5144,7 +5249,7 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 
-var _excluded$q = ["children", "media"];
+var _excluded$r = ["children", "media"];
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -5156,33 +5261,20 @@ var ElementQuery = /*#__PURE__*/forwardRef(function ElementQuery(props, ref) {
   var children = props.children,
       _props$media = props.media,
       media = _props$media === void 0 ? theme.sanity.media : _props$media,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
-
-  var _useState = useState(function () {
-    return window.innerWidth;
-  }),
-      width = _useState[0],
-      setWidth = _useState[1];
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$r);
 
   var forwardedRef = useForwardedRef(ref);
 
-  var _useState2 = useState(null),
-      element = _useState2[0],
-      setElement = _useState2[1];
-
-  useEffect(function () {
-    if (!element) return;
+  var _useState = useState(null),
+      element = _useState[0],
+      setElement = _useState[1];
 
-    var handleResizeEntries = function handleResizeEntries(entries) {
-      setWidth(entries[0].contentRect.width);
-    };
+  var elementSize = useElementSize(element);
+  var width = useMemo(function () {
+    var _elementSize$border$w;
 
-    var ro = new RO(handleResizeEntries);
-    ro.observe(element);
-    return function () {
-      return ro.disconnect();
-    };
-  }, [element]);
+    return (_elementSize$border$w = elementSize == null ? void 0 : elementSize.border.width) != null ? _elementSize$border$w : window.innerWidth;
+  }, [elementSize]);
   var max = useMemo(function () {
     return findMaxBreakpoints(media, width);
   }, [media, width]);
@@ -5288,7 +5380,7 @@ function LayerProvider(props) {
       _props$zOffset = props.zOffset,
       zOffsetProp = _props$zOffset === void 0 ? 0 : _props$zOffset;
   var parent = useContext(LayerContext);
-  var zOffset = useResponsiveProp(zOffsetProp);
+  var zOffset = useArrayProp(zOffsetProp);
   var maxMediaIndex = zOffset.length - 1;
   var mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
   var zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
@@ -5326,21 +5418,22 @@ function LayerProvider(props) {
   }, children);
 }
 
-var _excluded$p = ["children", "style"],
+var _excluded$q = ["children", "style"],
     _excluded2$1 = ["children", "zOffset"];
 
-var _templateObject$n;
-var Root$m = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$m;
+var Root$m = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref) {
   var children = props.children,
       _props$style = props.style,
-      style = _props$style === void 0 ? EMPTY_RECORD$1 : _props$style,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
+      style = _props$style === void 0 ? EMPTY_RECORD : _props$style,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
   var _useLayer = useLayer(),
       zIndex = _useLayer.zIndex;
 
   return /*#__PURE__*/React.createElement(Root$m, _extends({}, restProps, {
+    "data-ui": "Layer",
     ref: ref,
     style: _extends({}, style, {
       zIndex: zIndex
@@ -5433,14 +5526,14 @@ function Portal(props) {
 function useUnique(value) {
   var 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;
   }
@@ -5482,8 +5575,8 @@ function PortalProvider(props) {
   }, children);
 }
 
-var _templateObject$m;
-var Root$l = styled.div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
+var _templateObject$l;
+var Root$l = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -5665,11 +5758,11 @@ function _isScrollable(el) {
   return style.overflowX.includes('auto') || style.overflowX.includes('scroll') || style.overflowY.includes('auto') || style.overflowY.includes('scroll');
 }
 
-var _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
+var _excluded$p = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-var _templateObject$l, _templateObject2$g;
-var Root$k = styled.div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
-var ItemWrapper = styled.div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+var _templateObject$k, _templateObject2$f;
+var Root$k = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var ItemWrapper = styled.div(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 /**
  * @beta
  */
@@ -5684,7 +5777,7 @@ var VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
       items = _props$items === void 0 ? [] : _props$items,
       onChange = props.onChange,
       renderItem = props.renderItem,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$p);
 
   var space = useTheme().sanity.space;
   var forwardedRef = useForwardedRef(ref);
@@ -5729,17 +5822,16 @@ var VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
       scrollEl.addEventListener('scroll', _handleScroll, {
         passive: true
       });
-      var ro = new ResizeObserver(function (entries) {
-        setScrollHeight(entries[0].contentRect.height);
+
+      var disposeElementSizeListener = _elementSizeObserver.subscribe(scrollEl, function (scrollElementSize) {
+        setScrollHeight(scrollElementSize.content.height);
       });
-      ro.observe(scrollEl);
 
       _handleScroll();
 
       return function () {
         scrollEl.removeEventListener('scroll', _handleScroll);
-        ro.unobserve(scrollEl);
-        ro.disconnect();
+        disposeElementSizeListener();
       };
     }
 
@@ -5814,13 +5906,13 @@ var VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
   }, children));
 });
 
-var _templateObject$k, _templateObject2$f, _templateObject3$9;
-var Root$j = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -27px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-var BorderPath = styled.path(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
-var ShapePath = styled.path(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
+var _templateObject$j, _templateObject2$e, _templateObject3$8;
+var Root$j = styled.div(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var BorderPath = styled.path(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
+var ShapePath = styled.path(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var 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", {
@@ -5836,316 +5928,309 @@ var PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
   })));
 });
 
-/*
-
-The order of popper phases:
+var _excluded$o = ["__unstable_margins", "arrow", "arrowRef", "arrowX", "arrowY", "availableHeight", "availableWidth", "boundaryWidth", "children", "padding", "placement", "overflow", "radius", "referenceWidth", "scheme", "shadow", "strategy", "tone", "width", "x", "y"];
 
-- beforeRead
-- read
-- afterRead
-- beforeMain
-- main
-- afterMain
-- beforeWrite
-- write
-- afterWrite
+function popoverCardStyle(props) {
+  var $boundaryWidth = props.$boundaryWidth;
+  return {
+    maxWidth: $boundaryWidth ? $boundaryWidth - 16 + "px" : 'calc(100% - 16px)'
+  };
+}
 
-*/
+var Root$i = /*#__PURE__*/memo(styled(Card)(popoverCardStyle));
+/**
+ * @internal
+ */
 
-function getPopoverModifiers(props) {
-  var allowedAutoPlacements = props.allowedAutoPlacements,
+var PopoverCard = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function PopoverCard(props, ref) {
+  var marginsProp = props.__unstable_margins,
       arrow = props.arrow,
-      arrowElement = props.arrowElement,
-      boundaryElement = props.boundaryElement,
-      constrainSize = props.constrainSize,
-      distance = props.distance,
-      fallbackPlacements = props.fallbackPlacements,
-      margins = props.margins,
-      matchReferenceWidth = props.matchReferenceWidth,
-      open = props.open,
-      preventOverflow = props.preventOverflow,
-      skidding = props.skidding,
-      tether = props.tether,
-      tetherOffset = props.tetherOffset; // 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 [];
-  }
+      arrowRef = props.arrowRef,
+      arrowX = props.arrowX,
+      arrowY = props.arrowY,
+      availableHeight = props.availableHeight,
+      availableWidth = props.availableWidth,
+      boundaryWidth = props.boundaryWidth,
+      children = props.children,
+      padding = props.padding,
+      placement = props.placement,
+      overflow = props.overflow,
+      radius = props.radius,
+      referenceWidthProp = props.referenceWidth,
+      scheme = props.scheme,
+      shadow = props.shadow,
+      strategy = props.strategy,
+      tone = props.tone,
+      width = props.width,
+      xProp = props.x,
+      yProp = props.y,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$o);
 
-  var detectOverflowOptions = {
-    altAxis: !constrainSize,
-    boundary: boundaryElement || undefined,
-    padding: 8,
-    tether: tether,
-    tetherOffset: tetherOffset
-  };
-  return [constrainSize && _extends({}, maxSizeModifier, {
-    options: detectOverflowOptions
-  }), constrainSize && {
-    name: 'applyMaxSize',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['maxSize'],
-    fn: function fn(_ref) {
-      var state = _ref.state;
-      var _state$modifiersData$ = state.modifiersData.maxSize,
-          width = _state$modifiersData$.width,
-          height = _state$modifiersData$.height;
-      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: function fn(_ref2) {
-      var state = _ref2.state;
-      var rects = state.rects;
-
-      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: allowedAutoPlacements,
-      boundary: boundaryElement || undefined,
-      fallbackPlacements: fallbackPlacements,
-      padding: 8
-    }
-  }, matchReferenceWidth && {
-    name: 'matchWidth',
-    enabled: true,
-    phase: 'beforeWrite',
-    requires: ['computeStyles'],
-    fn: function fn(_ref3) {
-      var state = _ref3.state;
-      var width = state.rects.reference.width;
-      state.styles.popper.width = width + "px";
-    },
-    effect: function effect(_ref4) {
-      var state = _ref4.state;
-      var refElement = state.elements.reference;
+  var _useLayer = useLayer(),
+      zIndex = _useLayer.zIndex; // top right bottom left
 
-      if (refElement instanceof HTMLElement) {
-        state.elements.popper.style.width = refElement.offsetWidth - (margins ? margins[1] + margins[3] : 0) + "px";
-      }
-    }
-  }].filter(Boolean);
-}
 
-function usePopoverModifiers(props) {
-  var allowedAutoPlacements = props.allowedAutoPlacements,
-      arrow = props.arrow,
-      arrowElement = props.arrowElement,
-      boundaryElement = props.boundaryElement,
-      constrainSize = props.constrainSize,
-      distance = props.distance,
-      fallbackPlacements = props.fallbackPlacements,
-      margins = props.margins,
-      matchReferenceWidth = props.matchReferenceWidth,
-      open = props.open,
-      preventOverflow = props.preventOverflow,
-      skidding = props.skidding,
-      tether = props.tether,
-      tetherOffset = props.tetherOffset;
-  return useMemo(function () {
-    return getPopoverModifiers({
-      allowedAutoPlacements: allowedAutoPlacements,
-      arrow: arrow,
-      arrowElement: arrowElement,
-      boundaryElement: boundaryElement,
-      constrainSize: constrainSize,
-      distance: distance,
-      fallbackPlacements: fallbackPlacements,
-      margins: margins,
-      matchReferenceWidth: matchReferenceWidth,
-      open: open,
-      preventOverflow: preventOverflow,
-      skidding: skidding,
-      tether: tether,
-      tetherOffset: tetherOffset
-    });
-  }, [allowedAutoPlacements, arrow, arrowElement, boundaryElement, constrainSize, distance, fallbackPlacements, margins, matchReferenceWidth, open, preventOverflow, skidding, tether, tetherOffset]);
-}
+  var margins = useMemo(function () {
+    return marginsProp || [0, 0, 0, 0];
+  }, [marginsProp]); // translate according to margins
 
-var _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"];
+  var referenceWidth = referenceWidthProp ? referenceWidthProp - margins[1] - margins[3] : undefined;
+  var x = (xProp != null ? xProp : 0) + margins[3];
+  var y = (yProp != null ? yProp : 0) + margins[0];
+  var maxWidth = availableWidth ? Math.min(availableWidth - 8, referenceWidth || Infinity) : undefined;
+  var rootStyle = useMemo(function () {
+    return {
+      position: strategy,
+      top: y,
+      left: x,
+      zIndex: zIndex,
+      width: referenceWidth,
+      maxWidth: referenceWidth ? undefined : maxWidth
+    };
+  }, [referenceWidth, maxWidth, strategy, x, y, zIndex]);
+  var wrapperStyle = useMemo(function () {
+    return {
+      minHeight: 25,
+      maxHeight: availableHeight ? availableHeight - 8 : undefined
+    };
+  }, [availableHeight]);
+  var staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
+  var arrowStyle = useMemo(function () {
+    var 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';
 
-var _templateObject$j, _templateObject2$e, _templateObject3$8;
-var Root$i = styled(Layer)(function (_ref) {
-  var $preventOverflow = _ref.$preventOverflow;
-  return css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    max-width: calc(100% - 16px);\n\n    & > * {\n      min-height: 0;\n    }\n\n    /* Hide the popover when the reference element is out of bounds */\n    ", "\n  "])), $preventOverflow && css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n      &[data-popper-reference-hidden='true'] {\n        display: none;\n      }\n    "]))));
-});
-var PopoverCard = styled(Card)(function (_ref2) {
-  var $constrainSize = _ref2.$constrainSize;
-  return css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteralLoose(["\n    flex: 1;\n    max-height: ", ";\n    pointer-events: all;\n\n    && {\n      display: flex;\n    }\n\n    flex-direction: column;\n\n    & > * {\n      min-height: 0;\n    }\n\n    ", "\n  "])), $constrainSize && '100%', responsiveContainerWidthStyle);
-});
-/**
- * @public
- */
+var _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"];
 
-var Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
-  var _theme$sanity$layer;
+function size(scope) {
+  return size$1({
+    apply: function apply(args) {
+      if (scope.constrainSize) {
+        scope.setAvailableWidth(args.availableWidth);
+        scope.setAvailableHeight(args.availableHeight);
+      }
+
+      if (scope.matchReferenceWidth) {
+        scope.setReferenceWidth(args.rects.reference.width);
+      }
+    },
+    boundary: scope.boundaryElement || undefined
+  });
+}
+
+var Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Popover(props, ref) {
+  var _theme$sanity$layer, _useElementSize, _middlewareData$arrow, _middlewareData$arrow2;
 
-  var boundaryElementContext = useBoundaryElement();
   var theme = useTheme();
+  var boundaryElementContext = useBoundaryElement();
 
   var margins = props.__unstable_margins,
-      allowedAutoPlacements = props.allowedAutoPlacements,
       _props$arrow = props.arrow,
-      arrow = _props$arrow === void 0 ? true : _props$arrow,
+      arrowProp = _props$arrow === void 0 ? true : _props$arrow,
       _props$boundaryElemen = props.boundaryElement,
-      boundaryElementProp = _props$boundaryElemen === void 0 ? boundaryElementContext.element : _props$boundaryElemen,
-      child = props.children,
+      boundaryElement = _props$boundaryElemen === void 0 ? boundaryElementContext.element : _props$boundaryElemen,
+      childProp = props.children,
+      _props$constrainSize = props.constrainSize,
+      constrainSize = _props$constrainSize === void 0 ? false : _props$constrainSize,
       content = props.content,
-      constrainSize = props.constrainSize,
       disabled = props.disabled,
       fallbackPlacements = props.fallbackPlacements,
-      _props$open = props.open,
-      open = _props$open === void 0 ? false : _props$open,
-      padding = props.padding,
+      matchReferenceWidthProp = props.matchReferenceWidth,
+      open = props.open,
+      _props$overflow = props.overflow,
+      overflow = _props$overflow === void 0 ? props.constrainSize ? 'auto' : undefined : _props$overflow,
+      paddingProp = props.padding,
       _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      _props$portal = props.portal,
-      portalProp = _props$portal === void 0 ? false : _props$portal,
-      preventOverflow = props.preventOverflow,
+      placementProp = _props$placement === void 0 ? 'bottom' : _props$placement,
+      portal = props.portal,
+      _props$preventOverflo = props.preventOverflow,
+      preventOverflow = _props$preventOverflo === void 0 ? true : _props$preventOverflo,
       _props$radius = props.radius,
-      radius = _props$radius === void 0 ? 3 : _props$radius,
-      referenceElementProp = props.referenceElement,
-      matchReferenceWidth = props.matchReferenceWidth,
-      _props$shadow = props.shadow,
-      shadow = _props$shadow === void 0 ? 3 : _props$shadow,
+      radiusProp = _props$radius === void 0 ? 3 : _props$radius,
+      referenceElement = props.referenceElement,
       scheme = props.scheme,
-      _props$style = props.style,
-      style = _props$style === void 0 ? EMPTY_RECORD$1 : _props$style,
-      tether = props.tether,
-      tetherOffset = props.tetherOffset,
+      _props$shadow = props.shadow,
+      shadowProp = _props$shadow === void 0 ? 3 : _props$shadow,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'inherit' : _props$tone,
       _props$width = props.width,
-      width = _props$width === void 0 ? 0 : _props$width,
+      widthProp = _props$width === void 0 ? undefined : _props$width,
       _props$zOffset = props.zOffset,
-      zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset : _props$zOffset,
+      zOffsetProp = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.popover.zOffset : _props$zOffset,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
+  var boundarySize = (_useElementSize = useElementSize(boundaryElement)) == null ? void 0 : _useElementSize.border;
+  var padding = useArrayProp(paddingProp);
+  var radius = useArrayProp(radiusProp);
+  var shadow = useArrayProp(shadowProp);
+  var width = useArrayProp(widthProp);
+  var zOffset = useArrayProp(zOffsetProp);
+
+  var _useState = useState(undefined),
+      availableWidth = _useState[0],
+      setAvailableWidth = _useState[1];
+
+  var _useState2 = useState(undefined),
+      availableHeight = _useState2[0],
+      setAvailableHeight = _useState2[1];
+
+  var _useState3 = useState(undefined),
+      referenceWidth = _useState3[0],
+      setReferenceWidth = _useState3[1];
+
   var forwardedRef = useForwardedRef(ref);
-  var portal = usePortal();
+  var arrowRef = useRef(null);
+  var rootBoundary = 'viewport';
+  var middleware = useMemo(function () {
+    var ret = []; // Flip the floating element when leaving the boundary box
 
-  var _useState = useState(null),
-      referenceElement = _useState[0],
-      setReferenceElement = _useState[1];
+    if (constrainSize || preventOverflow) {
+      ret.push(flip({
+        boundary: boundaryElement || undefined,
+        fallbackPlacements: fallbackPlacements,
+        padding: 8,
+        rootBoundary: rootBoundary
+      }));
+    } // Track sizes
 
-  var _useState2 = useState(null),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
 
-  var _useState3 = useState(null),
-      arrowElement = _useState3[0],
-      setArrowElement = _useState3[1];
-
-  var popperReferenceElement = referenceElementProp || referenceElement;
-  var modifiers = usePopoverModifiers({
-    allowedAutoPlacements: allowedAutoPlacements,
-    arrow: arrow,
-    arrowElement: arrowElement,
-    boundaryElement: boundaryElementProp || portal.boundaryElement,
-    constrainSize: constrainSize,
-    distance: arrow ? 4 : 0,
-    fallbackPlacements: fallbackPlacements,
-    margins: margins,
-    matchReferenceWidth: matchReferenceWidth,
-    open: open,
-    preventOverflow: preventOverflow,
-    skidding: 0,
-    tether: tether,
-    tetherOffset: tetherOffset
-  });
-  var popper = usePopper(popperReferenceElement, popperElement, {
-    placement: placement,
-    modifiers: modifiers
-  });
-  var attributes = popper.attributes,
-      forceUpdate = popper.forceUpdate,
-      styles = popper.styles;
-  var setRef = useCallback(function (el) {
-    var childRef = child.ref;
-    setReferenceElement(el);
+    ret.push(size({
+      boundaryElement: boundaryElement,
+      constrainSize: constrainSize,
+      matchReferenceWidth: matchReferenceWidthProp,
+      setAvailableHeight: setAvailableHeight,
+      setAvailableWidth: setAvailableWidth,
+      setReferenceWidth: 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: rootBoundary,
+        padding: 8
+      }));
+    } // Place arrow
+
+
+    if (arrowProp) {
+      ret.push(arrow({
+        element: arrowRef,
+        padding: 4
+      }));
+    }
+
+    return ret;
+  }, [arrowProp, boundaryElement, constrainSize, fallbackPlacements, matchReferenceWidthProp, preventOverflow]);
+
+  var _useFloating = useFloating({
+    middleware: middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      placement = _useFloating.placement,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      middlewareData = _useFloating.middlewareData,
+      strategy = _useFloating.strategy;
+
+  var arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
+  var arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
+  var setArrow = useCallback(function (arrowEl) {
+    arrowRef.current = arrowEl;
+  }, []);
+  var setFloating = useCallback(function (node) {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  var setReference = useCallback(function (node) {
+    reference(node);
+    var 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]);
-  var setRootRef = useCallback(function (el) {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  }, [forwardedRef]);
-  var popoverStyle = useMemo(function () {
-    return _extends({}, style, styles.popper);
-  }, [style, styles]);
+  }, [childProp, reference]);
+  var child = useMemo(function () {
+    if (!childProp || referenceElement) return null;
+    return /*#__PURE__*/cloneElement(childProp, {
+      ref: setReference
+    });
+  }, [childProp, referenceElement, setReference]);
   useEffect(function () {
-    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);
   }
 
-  var node = /*#__PURE__*/React.createElement(Root$i, _extends({
-    "data-ui": "Popover"
-  }, restProps, {
-    "$preventOverflow": preventOverflow,
-    ref: setRootRef,
-    style: popoverStyle,
+  var 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';
 
 var _templateObject$i, _templateObject2$d;
 function radioBaseStyle() {
@@ -6254,7 +6339,7 @@ function inputTextSizeStyle(props) {
   var theme = props.theme,
       $fontSize = props.$fontSize;
   var sizes = theme.sanity.fonts.text.sizes;
-  return responsive(theme.sanity.media, getResponsiveProp($fontSize), function (sizeIndex) {
+  return _responsive(theme.sanity.media, $fontSize, function (sizeIndex) {
     return textSize(sizes[sizeIndex] || sizes[2]);
   });
 }
@@ -6306,10 +6391,10 @@ var 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, {
@@ -6337,7 +6422,7 @@ function responsiveStackSpaceStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return responsive(media, getResponsiveProp(props.$space), function (spaceIndex) {
+  return _responsive(media, props.$space, function (spaceIndex) {
     return {
       gridGap: rem(space[spaceIndex])
     };
@@ -6359,13 +6444,13 @@ var 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
   }));
 });
 
-var _templateObject$g, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7;
+var _templateObject$g, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7;
 /* Root */
 
 function switchBaseStyles() {
@@ -6409,7 +6494,7 @@ function switchThumbStyles(props) {
   var checkedOffset = trackWidth - trackPadding * 2 - size;
   var indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   var checked = $indeterminate !== true && props.$checked === true;
-  return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input["switch"].transitionDurationMs, input["switch"].transitionTimingFunction, checked && css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteralLoose(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input["switch"].transitionDurationMs, input["switch"].transitionTimingFunction, checked && css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 
 var _excluded$j = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"];
@@ -6458,7 +6543,7 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
   })));
 });
 
-var _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
+var _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"];
 
 var _templateObject$f;
 var Root$d = styled.span(textInputRootStyle);
@@ -6481,32 +6566,42 @@ var TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef) {
       padding = _props$padding === void 0 ? 3 : _props$padding,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 1 : _props$radius,
+      weight = props.weight,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$i);
 
   var ref = useForwardedRef(forwardedRef);
+  var 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
   })));
 });
 
-var _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
+var _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"];
 
-var _templateObject$e, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2;
+var _templateObject$e, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2, _templateObject6$1;
 var CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
-var Root$c = styled.span(textInputRootStyle);
+var Root$c = styled(Card).attrs({
+  forwardedAs: 'span'
+})(textInputRootStyle);
 var InputRoot = styled.span(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 var Prefix = styled(Card).attrs({
   forwardedAs: 'span'
@@ -6517,7 +6612,8 @@ var Suffix = styled(Card).attrs({
 var Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 var Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
 var LeftBox = styled(Box)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-var RightCard = styled(Card)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+var RightBox = styled(Box)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+var RightCard = styled(Card)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 /**
  * @public
  */
@@ -6529,7 +6625,7 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$fontSize = props.fontSize,
-      fontSize = _props$fontSize === void 0 ? 2 : _props$fontSize,
+      fontSizeProp = _props$fontSize === void 0 ? 2 : _props$fontSize,
       icon = props.icon,
       iconRight = props.iconRight,
       onClear = props.onClear,
@@ -6540,16 +6636,20 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
       radiusProp = _props$radius === void 0 ? 1 : _props$radius,
       readOnly = props.readOnly,
       _props$space = props.space,
-      space = _props$space === void 0 ? 3 : _props$space,
+      spaceProp = _props$space === void 0 ? 3 : _props$space,
       suffix = props.suffix,
       customValidity = props.customValidity,
       _props$type = props.type,
       type = _props$type === void 0 ? 'text' : _props$type,
+      weight = props.weight,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$h);
 
   var ref = useForwardedRef(forwardedRef);
-  var padding = useResponsiveProp(paddingProp);
-  var radius = useResponsiveProp(radiusProp); // Transient properties
+  var rootTheme = useRootTheme();
+  var fontSize = useArrayProp(fontSizeProp);
+  var padding = useArrayProp(paddingProp);
+  var radius = useArrayProp(radiusProp);
+  var space = useArrayProp(spaceProp); // Transient properties
 
   var $hasClearButton = Boolean(clearButton);
   var $hasIcon = Boolean(icon);
@@ -6588,17 +6688,19 @@ var 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)
+  }, [border, fontSize, icon, iconRight, padding, radius, rootTheme.tone, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
   var clearButtonBoxPadding = useMemo(function () {
     return padding.map(function (v) {
@@ -6617,7 +6719,7 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
     });
   }, [padding]);
   var clearButtonProps = useMemo(function () {
-    return typeof clearButton === 'object' ? clearButton : EMPTY_RECORD$1;
+    return typeof clearButton === 'object' ? clearButton : EMPTY_RECORD;
   }, [clearButton]);
   var clearButtonNode = useMemo(function () {
     return !disabled && !readOnly && clearButton && /*#__PURE__*/React.createElement(RightCard, {
@@ -6649,15 +6751,19 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
     }, /*#__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,
@@ -6666,13 +6772,15 @@ var TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef)
 });
 
 var _templateObject$d, _templateObject2$9, _templateObject3$4;
-var Root$b = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -15px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -15px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -15px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -15px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var Root$b = styled.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 var Border = styled.path(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
 var Shape = styled.path(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   var 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",
@@ -6685,7 +6793,7 @@ var TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
   })));
 });
 
-var _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
+var _excluded$g = ["boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "shadow", "zOffset"];
 
 var _templateObject$c;
 var Root$a = styled(Layer)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
@@ -6694,73 +6802,101 @@ var Root$a = styled(Layer)(_templateObject$c || (_templateObject$c = _taggedTemp
  */
 
 var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
-  var _theme$sanity$layer;
+  var _theme$sanity$layer, _middlewareData$arrow, _middlewareData$arrow2;
 
   var boundaryElementContext = useBoundaryElement();
   var theme = useTheme();
 
-  var allowedAutoPlacements = props.allowedAutoPlacements,
-      _props$boundaryElemen = props.boundaryElement,
+  var _props$boundaryElemen = props.boundaryElement,
       boundaryElement = _props$boundaryElemen === void 0 ? boundaryElementContext == null ? void 0 : boundaryElementContext.element : _props$boundaryElemen,
-      children = props.children,
+      childProp = props.children,
       content = props.content,
       disabled = props.disabled,
-      fallbackPlacements = props.fallbackPlacements,
+      fallbackPlacementsProp = props.fallbackPlacements,
       _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
+      placementProp = _props$placement === void 0 ? 'bottom' : _props$placement,
       portal = props.portal,
       scheme = props.scheme,
+      _props$shadow = props.shadow,
+      shadow = _props$shadow === void 0 ? 2 : _props$shadow,
       _props$zOffset = props.zOffset,
       zOffset = _props$zOffset === void 0 ? (_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.tooltip.zOffset : _props$zOffset,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$g);
 
+  var fallbackPlacements = useArrayProp(fallbackPlacementsProp);
   var forwardedRef = useForwardedRef(ref);
 
   var _useState = useState(null),
       referenceElement = _useState[0],
       setReferenceElement = _useState[1];
 
-  var _useState2 = useState(null),
-      popperElement = _useState2[0],
-      setPopperElement = _useState2[1];
+  var arrowRef = useRef(null);
+  var rootBoundary = 'viewport';
+  var middleware = useMemo(function () {
+    var ret = []; // Flip the floating element when leaving the boundary box
 
-  var _useState3 = useState(null),
-      arrowElement = _useState3[0],
-      setArrowElement = _useState3[1];
+    ret.push(flip({
+      boundary: boundaryElement || undefined,
+      fallbackPlacements: fallbackPlacements,
+      padding: 4,
+      rootBoundary: rootBoundary
+    })); // Define distance between reference and floating element
 
-  var popper = usePopper(referenceElement, popperElement, {
-    placement: 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: allowedAutoPlacements,
-        fallbackPlacements: fallbackPlacements
-      }
-    }]
-  });
-  var forceUpdate = popper.forceUpdate;
+    ret.push(offset({
+      mainAxis: 3
+    })); // Shift the tooltip so its sits with the boundary eleement
+
+    ret.push(shift({
+      boundary: boundaryElement || undefined,
+      rootBoundary: rootBoundary,
+      padding: 4
+    })); // Place arrow
+
+    ret.push(arrow({
+      element: arrowRef,
+      padding: 2
+    }));
+    return ret;
+  }, [boundaryElement, fallbackPlacements]);
+
+  var _useFloating = useFloating({
+    middleware: middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
+  }),
+      x = _useFloating.x,
+      y = _useFloating.y,
+      placement = _useFloating.placement,
+      reference = _useFloating.reference,
+      floating = _useFloating.floating,
+      middlewareData = _useFloating.middlewareData,
+      update = _useFloating.update,
+      strategy = _useFloating.strategy;
+
+  var rootStyle = useMemo(function () {
+    return {
+      position: strategy,
+      top: y != null ? y : 0,
+      left: x != null ? x : 0
+    };
+  }, [strategy, x, y]);
+  var staticSide = placement && FLOATING_STATIC_SIDES[placement.split('-')[0]];
+  var arrowX = (_middlewareData$arrow = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow.x;
+  var arrowY = (_middlewareData$arrow2 = middlewareData.arrow) == null ? void 0 : _middlewareData$arrow2.y;
+  var arrowStyle = useMemo(function () {
+    var 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]);
 
-  var _useState4 = useState(false),
-      isOpen = _useState4[0],
-      setIsOpen = _useState4[1];
+  var _useState2 = useState(false),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
 
   var handleBlur = useCallback(function () {
     return setIsOpen(false);
@@ -6794,15 +6930,7 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
     return function () {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement]);
-  useEffect(function () {
-    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(function () {
     if (disabled) setIsOpen(false);
@@ -6810,40 +6938,61 @@ var Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
 
   useEffect(function () {
     if (!content) setIsOpen(false);
-  }, [content]);
-
-  var setRef = function setRef(el) {
-    setPopperElement(el);
-    forwardedRef.current = el;
-  };
+  }, [content]); // Update reference
 
-  if (!children) return /*#__PURE__*/React.createElement(React.Fragment, null);
-  if (disabled) return children;
-  var referenceProps = {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    ref: setReferenceElement
-  };
-  var referenceNode = /*#__PURE__*/cloneElement(children, referenceProps);
-  var popperNode = /*#__PURE__*/React.createElement(Root$a, _extends({
+  useEffect(function () {
+    return reference(referenceElement);
+  }, [reference, referenceElement]);
+  var setArrow = useCallback(function (arrowEl) {
+    arrowRef.current = arrowEl;
+    update();
+  }, [update]);
+  var setFloating = useCallback(function (node) {
+    forwardedRef.current = node;
+    floating(node);
+  }, [floating, forwardedRef]);
+  var childRef = childProp == null ? void 0 : childProp.ref;
+  var setReference = useCallback(function (node) {
+    if (typeof childRef === 'function') {
+      childRef(node);
+    } else if (childRef) {
+      childRef.current = node;
+    } // childRef.current = node
+
+
+    setReferenceElement(node);
+  }, [childRef]);
+  var child = useMemo(function () {
+    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;
+  var 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));
 });
 
 var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$2, _templateObject5$1;
@@ -6851,7 +7000,7 @@ var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$
  * @internal
  */
 
-var Root$9 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  /* position: relative; */\n  line-height: 0;\n"])));
+var Root$9 = styled.div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  line-height: 0;\n"])));
 /**
  * @internal
  */
@@ -6861,7 +7010,7 @@ var ListBox = styled(Box)(_templateObject2$8 || (_templateObject2$8 = _taggedTem
  * @internal
  */
 
-var ResultsPopover = styled(Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  & > div {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
+var ResultsPopover = styled(Popover)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteralLoose(["\n  &[data-popper-reference-hidden='true'] {\n    display: none;\n  }\n"])));
 var rotate = keyframes(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 /**
  * @internal
@@ -6972,27 +7121,22 @@ function autocompleteReducer(state, msg) {
 /**
  * @internal
  */
-var EMPTY_RECORD = {};
-/**
- * @internal
- */
-
 var AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ['Control', 'Shift', 'Alt', 'Enter', 'Home', 'End', 'PageUp', 'PageDown', 'Meta', 'Tab', 'CapsLock'];
 /**
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 1, 1];
+var AUTOCOMPLETE_POPOVER_MARGINS = [0, 1, 0, 0];
 /**
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom-start';
+var AUTOCOMPLETE_POPOVER_PLACEMENT = 'bottom';
 /**
  * @internal
  */
 
-var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['top-start'];
+var AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ['bottom', 'top'];
 
 var _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"];
 
@@ -7088,7 +7232,7 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
   var popoverMouseWithinRef = useRef(false);
   var listBoxId = id + "-listbox";
   var options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
-  var padding = useResponsiveProp(paddingProp);
+  var padding = useArrayProp(paddingProp);
   var currentOption = useMemo(function () {
     return value !== null ? options.find(function (o) {
       return o.value === value;
@@ -7432,6 +7576,7 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
   var content = useMemo(function () {
     if (filteredOptions.length === 0) return null;
     return /*#__PURE__*/React.createElement(ListBox, _extends({
+      "data-ui": "AutoComplete__results",
       onKeyDown: handleListBoxKeyDown,
       padding: 1
     }, listBox, {
@@ -7439,6 +7584,7 @@ var InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(props
     }), /*#__PURE__*/React.createElement(Stack, {
       as: "ul",
       "aria-multiselectable": false,
+      "data-ui": "AutoComplete__resultsList",
       id: listBoxId,
       ref: listBoxElementRef,
       role: "listbox",
@@ -7518,9 +7664,11 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function Breadcrumbs(props, ref) {
       maxLength = props.maxLength,
       separator = props.separator,
       _props$space = props.space,
-      space = _props$space === void 0 ? 2 : _props$space,
+      spaceRaw = _props$space === void 0 ? 2 : _props$space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
+  var space = useArrayProp(spaceRaw);
+
   var _useState = useState(false),
       open = _useState[0],
       setOpen = _useState[1];
@@ -7616,7 +7764,7 @@ function dialogStyle(_ref) {
 function responsiveDialogPositionStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return responsive(media, getResponsiveProp(props.$position), function (position) {
+  return _responsive(media, props.$position, function (position) {
     return {
       '&&': {
         position: position
@@ -7664,10 +7812,13 @@ var DialogCard = /*#__PURE__*/forwardRef(function DialogCard(props, ref) {
       id = props.id,
       onClickOutside = props.onClickOutside,
       onClose = props.onClose,
-      radius = props.radius,
+      radiusProp = props.radius,
       scheme = props.scheme,
-      shadow = props.shadow,
-      width = props.width;
+      shadowProp = props.shadow,
+      widthProp = props.width;
+  var radius = useArrayProp(radiusProp);
+  var shadow = useArrayProp(shadowProp);
+  var width = useArrayProp(widthProp);
   var forwardedRef = useForwardedRef(ref);
 
   var _useState = useState(null),
@@ -7754,7 +7905,7 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
       _props$__unstable_hid = props.__unstable_hideCloseButton,
       hideCloseButton = _props$__unstable_hid === void 0 ? false : _props$__unstable_hid,
       _props$cardRadius = props.cardRadius,
-      cardRadius = _props$cardRadius === void 0 ? 3 : _props$cardRadius,
+      cardRadiusProp = _props$cardRadius === void 0 ? 3 : _props$cardRadius,
       _props$cardShadow = props.cardShadow,
       cardShadow = _props$cardShadow === void 0 ? 4 : _props$cardShadow,
       children = props.children,
@@ -7765,17 +7916,22 @@ var Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
       onClickOutside = props.onClickOutside,
       onClose = props.onClose,
       _props$padding = props.padding,
-      padding = _props$padding === void 0 ? 4 : _props$padding,
+      paddingProp = _props$padding === void 0 ? 4 : _props$padding,
       portal = props.portal,
       _props$position = props.position,
-      position = _props$position === void 0 ? dialog.position || 'fixed' : _props$position,
+      positionProp = _props$position === void 0 ? dialog.position || 'fixed' : _props$position,
       scheme = props.scheme,
       _props$width = props.width,
-      width = _props$width === void 0 ? 0 : _props$width,
+      widthProp = _props$width === void 0 ? 0 : _props$width,
       _props$zOffset = props.zOffset,
-      zOffset = _props$zOffset === void 0 ? dialog.zOffset || ((_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.dialog.zOffset) : _props$zOffset,
+      zOffsetProp = _props$zOffset === void 0 ? dialog.zOffset || ((_theme$sanity$layer = theme.sanity.layer) == null ? void 0 : _theme$sanity$layer.dialog.zOffset) : _props$zOffset,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$d);
 
+  var cardRadius = useArrayProp(cardRadiusProp);
+  var padding = useArrayProp(paddingProp);
+  var position = useArrayProp(positionProp);
+  var width = useArrayProp(widthProp);
+  var zOffset = useArrayProp(zOffsetProp);
   var preDivRef = useRef(null);
   var postDivRef = useRef(null);
   var cardRef = useRef(null);
@@ -7870,9 +8026,11 @@ var Hotkeys = /*#__PURE__*/forwardRef(function Hotkeys(props, ref) {
       padding = props.padding,
       radius = props.radius,
       _props$space = props.space,
-      space = _props$space === void 0 ? 1 : _props$space,
+      spaceProp = _props$space === void 0 ? 1 : _props$space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
+  var space = useArrayProp(spaceProp);
+
   if (!keys || keys.length === 0) {
     return /*#__PURE__*/React.createElement(React.Fragment, null);
   }
@@ -8283,17 +8441,18 @@ var Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
 var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
   var _props$__unstable_dis = props.__unstable_disableRestoreFocusOnClose,
       disableRestoreFocusOnClose = _props$__unstable_dis === void 0 ? false : _props$__unstable_dis,
-      boundaryElement = props.boundaryElement,
+      deprecated_boundaryElement = props.boundaryElement,
       buttonProp = props.button,
       id = props.id,
       menuProp = props.menu,
       onClose = props.onClose,
-      placement = props.placement,
-      popoverScheme = props.popoverScheme,
-      portal = props.portal,
+      deprecated_placement = props.placement,
+      deprecated_popoverScheme = props.popoverScheme,
+      _props$portal = props.portal,
+      deprecated_portal = _props$portal === void 0 ? true : _props$portal,
       popover = props.popover,
-      popoverRadius = props.popoverRadius,
-      preventOverflow = props.preventOverflow;
+      deprecated_popoverRadius = props.popoverRadius,
+      deprecated_preventOverflow = props.preventOverflow;
 
   var _useState = useState(false),
       open = _useState[0],
@@ -8441,14 +8600,14 @@ var MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
   }, [buttonProp, handleButtonClick, handleButtonKeyDown, id, open, setButtonRef]);
   var popoverProps = useMemo(function () {
     return _extends({
-      boundaryElement: boundaryElement,
-      placement: placement,
-      portal: 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",
@@ -8485,7 +8644,7 @@ function selectableColorStyle(props) {
  * @internal
  */
 
-var Selectable = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+var Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 
 function useMenu() {
   var value = useContext(MenuContext);
@@ -8518,8 +8677,7 @@ function MenuGroup(props) {
       onClick = props.onClick,
       _props$padding = props.padding,
       padding = _props$padding === void 0 ? 3 : _props$padding,
-      _props$popover = props.popover,
-      popover = _props$popover === void 0 ? {} : _props$popover,
+      popover = props.popover,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 2 : _props$radius,
       _props$space = props.space,
@@ -8633,7 +8791,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,
@@ -8732,21 +8890,20 @@ var 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,
@@ -8828,7 +8985,7 @@ var 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
   }));
@@ -8844,13 +9001,15 @@ var Root$3 = styled(Skeleton)(function (_ref) {
       theme = _ref.theme;
   var media = theme.sanity.media;
   var font = theme.sanity.fonts[$style];
-  var styles = responsive(media, $size, function (sizeIndex) {
+
+  var styles = _responsive(media, $size, function (sizeIndex) {
     var fontSize = font.sizes[sizeIndex];
     var capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
     return {
       height: capHeight
     };
   });
+
   return styles;
 });
 /**
@@ -8863,7 +9022,7 @@ var TextSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
       size = _props$size === void 0 ? 2 : _props$size,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
-  var $size = useResponsiveProp(size);
+  var $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -8880,7 +9039,7 @@ var LabelSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
       size = _props$size2 === void 0 ? 2 : _props$size2,
       restProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  var $size = useResponsiveProp(size);
+  var $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -8897,7 +9056,7 @@ var HeadingSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref)
       size = _props$size3 === void 0 ? 2 : _props$size3,
       restProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
-  var $size = useResponsiveProp(size);
+  var $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -8914,7 +9073,7 @@ var CodeSkeleton = /*#__PURE__*/forwardRef(function TextSkeleton(props, ref) {
       size = _props$size4 === void 0 ? 2 : _props$size4,
       restProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-  var $size = useResponsiveProp(size);
+  var $size = useArrayProp(size);
   return /*#__PURE__*/React.createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9788,5 +9947,5 @@ var 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 };
+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.module.js.map