@sanity/ui 0.37.20 → 0.37.22

package/lib/sanity-ui.js

@@ -2,11 +2,11 @@ var autoId = require('@reach/auto-id');
 var React = require('react');
 var ReactIs = require('react-is');
 var styled = require('styled-components');
-var resizeObserver = require('@juggle/resize-observer');
 var color$1 = require('@sanity/color');
 var icons = require('@sanity/icons');
 var Refractor = require('react-refractor');
 var reactPopper = require('react-popper');
+var resizeObserver = require('@juggle/resize-observer');
 var ReactDOM = require('react-dom');
 var maxSizeModifier = require('popper-max-size-modifier');
 var framerMotion = require('framer-motion');
@@ -119,215 +119,6 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 var EMPTY_ARRAY = [];
 var EMPTY_RECORD = {};
 
-/**
- * @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 React.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];
 
@@ -429,110 +220,26 @@ function useClickOutside(listener, elementsArg, boundaryElement) {
 }
 
 /**
- * @internal
- */
-
-var _ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : 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.
+ * Subscribe to the rect of a DOM element.
  * @beta
  */
 
-function useElementSize(element) {
+function useElementRect(element) {
   var _useState = React.useState(null),
-      size = _useState[0],
-      setSize = _useState[1];
+      rect = _useState[0],
+      setRect = _useState[1];
 
   React.useEffect(function () {
     if (!element) return undefined;
-    return _elementSizeObserver.subscribe(element, setSize);
+    var ro = new ResizeObserver(function (entries) {
+      setRect(entries[0].contentRect);
+    });
+    ro.observe(element);
+    return function () {
+      return ro.disconnect();
+    };
   }, [element]);
-  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;
+  return rect;
 }
 
 /**
@@ -1984,20 +1691,18 @@ var color = createColorTheme({
         name = _ref.name;
 
     if (name === 'default') {
-      var _tints = color$1.hues.gray;
-
-      var _skeletonFrom = dark ? _tints[900].hex : _tints[100].hex;
+      var _skeletonFrom = dark ? color$1.hues.gray[900].hex : color$1.hues.gray[100].hex;
 
       return {
         fg: dark ? color$1.white.hex : color$1.black.hex,
         bg: dark ? color$1.black.hex : color$1.white.hex,
-        border: _tints[dark ? 800 : 200].hex,
+        border: color$1.hues.gray[dark ? 800 : 200].hex,
         focusRing: color$1.hues.blue[dark ? 500 : 500].hex,
         shadow: {
-          outline: rgba(_tints[500].hex, 0.4),
-          umbra: dark ? rgba(_tints[950].hex, 0.4) : rgba(_tints[500].hex, 0.2),
-          penumbra: dark ? rgba(_tints[950].hex, 0.28) : rgba(_tints[500].hex, 0.14),
-          ambient: dark ? rgba(_tints[950].hex, 0.24) : rgba(_tints[500].hex, 0.12)
+          outline: rgba(color$1.hues.gray[500].hex, 0.4),
+          umbra: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.2),
+          penumbra: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.14),
+          ambient: rgba(dark ? color$1.black.hex : color$1.hues.gray[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom,
@@ -2007,18 +1712,18 @@ var color = createColorTheme({
     }
 
     if (name === 'transparent') {
-      var _tints2 = tones["default"];
-      var _skeletonFrom2 = _tints2[dark ? 800 : 200].hex;
+      var _tints = tones["default"];
+      var _skeletonFrom2 = _tints[dark ? 800 : 200].hex;
       return {
-        fg: _tints2[dark ? 100 : 900].hex,
-        bg: _tints2[dark ? 950 : 50].hex,
-        border: _tints2[dark ? 800 : 300].hex,
+        fg: _tints[dark ? 100 : 900].hex,
+        bg: _tints[dark ? 950 : 50].hex,
+        border: _tints[dark ? 800 : 300].hex,
         focusRing: color$1.hues.blue[500].hex,
         shadow: {
-          outline: rgba(_tints2[500].hex, 0.4),
-          umbra: dark ? rgba(_tints2[900].hex, 0.4) : rgba(_tints2[500].hex, 0.2),
-          penumbra: dark ? rgba(_tints2[900].hex, 0.28) : rgba(_tints2[500].hex, 0.14),
-          ambient: dark ? rgba(_tints2[900].hex, 0.24) : rgba(_tints2[500].hex, 0.12)
+          outline: rgba(_tints[500].hex, dark ? 0.2 : 0.4),
+          umbra: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.2),
+          penumbra: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.14),
+          ambient: rgba(dark ? color$1.black.hex : _tints[500].hex, 0.12)
         },
         skeleton: {
           from: _skeletonFrom2,
@@ -2035,10 +1740,10 @@ var color = createColorTheme({
       border: tints[dark ? 800 : 200].hex,
       focusRing: tints[500].hex,
       shadow: {
-        outline: rgba(tints[500].hex, 0.4),
-        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
+        outline: rgba(tints[500].hex, dark ? 0.2 : 0.4),
+        umbra: rgba(dark ? color$1.black.hex : tints[500].hex, 0.2),
+        penumbra: rgba(dark ? color$1.black.hex : tints[500].hex, 0.14),
+        ambient: rgba(dark ? color$1.black.hex : tints[500].hex, 0.12)
       },
       skeleton: {
         from: skeletonFrom,
@@ -2704,15 +2409,15 @@ var fonts = {
       lineHeight: 33,
       letterSpacing: 0
     }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
+      ascenderHeight: 9,
+      descenderHeight: 7,
       fontSize: 33,
       iconSize: 49,
       lineHeight: 39,
       letterSpacing: 0
     }, {
-      ascenderHeight: 9,
-      descenderHeight: 9,
+      ascenderHeight: 10,
+      descenderHeight: 8,
       fontSize: 38,
       iconSize: 53,
       lineHeight: 45,
@@ -2934,7 +2639,7 @@ globalScope[key$7] = globalScope[key$7] || /*#__PURE__*/React.createContext(null
 
 var ThemeContext = globalScope[key$7];
 
-var _excluded$H = ["color", "layer"];
+var _excluded$I = ["color", "layer"];
 /**
  * @public
  */
@@ -2953,7 +2658,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"];
@@ -3104,122 +2809,325 @@ function _createMediaManager(media) {
     for (var _iterator2 = _createForOfIteratorHelperLoose(sizes), _step2; !(_step2 = _iterator2()).done;) {
       _loop();
     }
-
-    return function () {
-      for (var _iterator3 = _createForOfIteratorHelperLoose(disposeFns), _step3; !(_step3 = _iterator3()).done;) {
-        var disposeFn = _step3.value;
-        disposeFn();
-      }
-    };
-  };
-
-  return {
-    getCurrentIndex: getCurrentIndex,
-    subscribe: subscribe
+
+    return function () {
+      for (var _iterator3 = _createForOfIteratorHelperLoose(disposeFns), _step3; !(_step3 = _iterator3()).done;) {
+        var disposeFn = _step3.value;
+        disposeFn();
+      }
+    };
+  };
+
+  return {
+    getCurrentIndex: getCurrentIndex,
+    subscribe: subscribe
+  };
+}
+/**
+ * @internal
+ */
+
+
+function _getMediaManager(media) {
+  var manager = MEDIA_MANAGER_CACHE.get(media);
+
+  if (!manager) {
+    manager = _createMediaManager(media);
+    MEDIA_MANAGER_CACHE.set(media, manager);
+  }
+
+  return manager;
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+
+function useMediaIndex() {
+  var theme = useTheme();
+  var media = theme.sanity.media;
+  var manager = React.useMemo(function () {
+    return _getMediaManager(media);
+  }, [media]);
+
+  var _useState = React.useState(manager.getCurrentIndex),
+      index = _useState[0],
+      setIndex = _useState[1];
+
+  React.useEffect(function () {
+    return manager.subscribe(setIndex);
+  }, [manager]);
+  return index;
+}
+
+/**
+ * @public
+ */
+
+function usePrefersDark() {
+  var mq = React.useMemo(function () {
+    if (typeof window === 'undefined') return undefined;
+    return window.matchMedia('(prefers-color-scheme: dark)');
+  }, []);
+
+  var _useState = React.useState((mq == null ? void 0 : mq.matches) || false),
+      dark = _useState[0],
+      setDark = _useState[1];
+
+  React.useEffect(function () {
+    if (!mq) return undefined;
+    setDark(mq.matches);
+
+    var handleChange = function handleChange() {
+      return setDark(mq.matches);
+    };
+
+    mq.addEventListener('change', handleChange);
+    return function () {
+      return mq.removeEventListener('change', handleChange);
+    };
+  }, [mq]);
+  return dark;
+}
+
+/**
+ * @beta
+ */
+
+var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+/**
+ * @beta
+ */
+
+function useForwardedRef(ref) {
+  var innerRef = React.useRef(null);
+  useIsomorphicEffect(function () {
+    if (!ref) return;
+
+    if (typeof ref === 'function') {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
+
+/**
+ * @beta
+ */
+
+function useCustomValidity(ref, customValidity) {
+  React.useEffect(function () {
+    if (ref.current) {
+      ref.current.setCustomValidity(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;
+  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, getResponsiveProp($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 _getMediaManager(media) {
-  var manager = MEDIA_MANAGER_CACHE.get(media);
-
-  if (!manager) {
-    manager = _createMediaManager(media);
-    MEDIA_MANAGER_CACHE.set(media, manager);
-  }
-
-  return manager;
+function responsiveCodeFontStyle(props) {
+  return responsiveFont('code', props);
 }
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * Get responsive CSS for the `heading` font style.
+ * @internal
  */
 
-function useMediaIndex() {
-  var theme = useTheme();
-  var media = theme.sanity.media;
-  var manager = React.useMemo(function () {
-    return _getMediaManager(media);
-  }, [media]);
-
-  var _useState = React.useState(manager.getCurrentIndex),
-      index = _useState[0],
-      setIndex = _useState[1];
-
-  React.useEffect(function () {
-    return manager.subscribe(setIndex);
-  }, [manager]);
-  return index;
+function responsiveHeadingFont(props) {
+  return responsiveFont('heading', props);
 }
 
 /**
- * @public
+ * Get responsive CSS for the `label` font style.
+ * @internal
  */
 
-function usePrefersDark() {
-  var mq = React.useMemo(function () {
-    if (typeof window === 'undefined') return undefined;
-    return window.matchMedia('(prefers-color-scheme: dark)');
-  }, []);
-
-  var _useState = React.useState((mq == null ? void 0 : mq.matches) || false),
-      dark = _useState[0],
-      setDark = _useState[1];
-
-  React.useEffect(function () {
-    if (!mq) return undefined;
-    setDark(mq.matches);
-
-    var handleChange = function handleChange() {
-      return setDark(mq.matches);
-    };
-
-    mq.addEventListener('change', handleChange);
-    return function () {
-      return mq.removeEventListener('change', handleChange);
-    };
-  }, [mq]);
-  return dark;
+function responsiveLabelFont(props) {
+  return responsiveFont('label', props);
 }
 
 /**
- * @beta
+ * Get responsive text align styles.
+ * @internal
  */
 
-var useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+function responsiveTextAlignStyle(props) {
+  var theme = props.theme;
+  return responsive(theme.sanity.media, getResponsiveProp(props.$align), function (textAlign) {
+    return {
+      textAlign: textAlign
+    };
+  });
+}
 
 /**
- * @beta
+ * Get responsive CSS for the `text` font style.
+ * @internal
  */
 
-function useForwardedRef(ref) {
-  var innerRef = React.useRef(null);
-  useIsomorphicEffect(function () {
-    if (!ref) return;
-
-    if (typeof ref === 'function') {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-  return innerRef;
+function responsiveTextFont(props) {
+  return responsiveFont('text', props);
 }
 
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 
-function useCustomValidity(ref, customValidity) {
-  React.useEffect(function () {
-    if (ref.current) {
-      ref.current.setCustomValidity(customValidity || '');
-    }
-  }, [customValidity, ref]);
+function useResponsiveProp(val, defaultVal) {
+  return React.useMemo(function () {
+    return getResponsiveProp(val, defaultVal);
+  }, [defaultVal, val]);
 }
 
 var BORDER_VALUE = '1px solid var(--card-border-color)';
@@ -3230,7 +3138,7 @@ function responsiveBorderStyle() {
 function border(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$border, function (value) {
+  return responsive(media, getResponsiveProp(props.$border), function (value) {
     return value ? {
       '&&': {
         border: BORDER_VALUE
@@ -3246,7 +3154,7 @@ function border(props) {
 function borderTop(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$borderTop, function (value) {
+  return responsive(media, getResponsiveProp(props.$borderTop), function (value) {
     return value ? {
       '&&': {
         borderTop: BORDER_VALUE
@@ -3262,7 +3170,7 @@ function borderTop(props) {
 function borderRight(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$borderRight, function (value) {
+  return responsive(media, getResponsiveProp(props.$borderRight), function (value) {
     return value ? {
       '&&': {
         borderRight: BORDER_VALUE
@@ -3278,7 +3186,7 @@ function borderRight(props) {
 function borderBottom(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$borderBottom, function (value) {
+  return responsive(media, getResponsiveProp(props.$borderBottom), function (value) {
     return value ? {
       '&&': {
         borderBottom: BORDER_VALUE
@@ -3294,7 +3202,7 @@ function borderBottom(props) {
 function borderLeft(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$borderLeft, function (value) {
+  return responsive(media, getResponsiveProp(props.$borderLeft), function (value) {
     return value ? {
       '&&': {
         borderLeft: BORDER_VALUE
@@ -3330,7 +3238,7 @@ function responsiveBoxStyle() {
 function responsiveBoxDisplayStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$display, function (display) {
+  return responsive(media, getResponsiveProp(props.$display), function (display) {
     return {
       '&:not([hidden])': {
         display: display
@@ -3342,7 +3250,7 @@ function responsiveBoxDisplayStyle(props) {
 function responsiveBoxSizingStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$sizing, function (sizing) {
+  return responsive(media, getResponsiveProp(props.$sizing), function (sizing) {
     return {
       boxSizing: BOX_SIZING[sizing]
     };
@@ -3352,7 +3260,7 @@ function responsiveBoxSizingStyle(props) {
 function responsiveBoxHeightStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$height, function (height) {
+  return responsive(media, getResponsiveProp(props.$height), function (height) {
     return {
       height: BOX_HEIGHT[height]
     };
@@ -3362,7 +3270,7 @@ function responsiveBoxHeightStyle(props) {
 function responsiveBoxOverflowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$overflow, function (overflow) {
+  return responsive(media, getResponsiveProp(props.$overflow), function (overflow) {
     return {
       overflow: overflow
     };
@@ -3380,7 +3288,7 @@ function responsiveFlexStyle() {
 function responsiveFlexAlignStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$align, function (align) {
+  return responsive(media, getResponsiveProp(props.$align), function (align) {
     return {
       alignItems: align
     };
@@ -3392,7 +3300,7 @@ function responsiveFlexGapStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return _responsive(media, props.$gap, function (gap) {
+  return responsive(media, getResponsiveProp(props.$gap), function (gap) {
     return {
       gap: gap ? rem(space[gap]) : undefined
     };
@@ -3402,7 +3310,7 @@ function responsiveFlexGapStyle(props) {
 function responsiveFlexWrapStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$wrap, function (wrap) {
+  return responsive(media, getResponsiveProp(props.$wrap), function (wrap) {
     return {
       flexWrap: wrap
     };
@@ -3411,7 +3319,7 @@ function responsiveFlexWrapStyle(props) {
 function responsiveFlexJustifyStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$justify, function (justify) {
+  return responsive(media, getResponsiveProp(props.$justify), function (justify) {
     return {
       justifyContent: justify
     };
@@ -3420,7 +3328,7 @@ function responsiveFlexJustifyStyle(props) {
 function responsiveFlexDirectionStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$direction, function (direction) {
+  return responsive(media, getResponsiveProp(props.$direction), function (direction) {
     return {
       flexDirection: direction
     };
@@ -3437,8 +3345,7 @@ function flexItemStyle() {
 function responsiveFlexItemStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  if (!props.$flex) return EMPTY_ARRAY;
-  return _responsive(media, props.$flex, function (flex) {
+  return responsive(media, getResponsiveProp(props.$flex), function (flex) {
     return {
       flex: flex
     };
@@ -3485,7 +3392,7 @@ function responsiveGridStyle() {
 function responsiveGridAutoFlowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$autoFlow, function (autoFlow) {
+  return responsive(media, getResponsiveProp(props.$autoFlow), function (autoFlow) {
     return {
       gridAutoFlow: autoFlow
     };
@@ -3495,7 +3402,7 @@ function responsiveGridAutoFlowStyle(props) {
 function responsiveGridAutoRowsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$autoRows, function (autoRows) {
+  return responsive(media, getResponsiveProp(props.$autoRows), function (autoRows) {
     return {
       gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
     };
@@ -3505,7 +3412,7 @@ function responsiveGridAutoRowsStyle(props) {
 function responsiveGridAutoColsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$autoCols, function (autoCols) {
+  return responsive(media, getResponsiveProp(props.$autoCols), function (autoCols) {
     return {
       gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
     };
@@ -3515,7 +3422,7 @@ function responsiveGridAutoColsStyle(props) {
 function responsiveGridColumnsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$columns, function (columns) {
+  return responsive(media, getResponsiveProp(props.$columns), function (columns) {
     return {
       gridTemplateColumns: columns && "repeat(" + columns + ",minmax(0,1fr));"
     };
@@ -3525,7 +3432,7 @@ function responsiveGridColumnsStyle(props) {
 function responsiveGridRowsStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$rows, function (rows) {
+  return responsive(media, getResponsiveProp(props.$rows), function (rows) {
     return {
       gridTemplateRows: rows && "repeat(" + rows + ",minmax(0,1fr));"
     };
@@ -3537,7 +3444,7 @@ function responsiveGridGapStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return _responsive(media, props.$gap, function (gap) {
+  return responsive(media, getResponsiveProp(props.$gap), function (gap) {
     return {
       gridGap: gap ? rem(space[gap]) : undefined
     };
@@ -3549,7 +3456,7 @@ function responsiveGridGapXStyle(props) {
   var _theme$sanity2 = theme.sanity,
       media = _theme$sanity2.media,
       space = _theme$sanity2.space;
-  return _responsive(media, props.$gapX, function (gapX) {
+  return responsive(media, getResponsiveProp(props.$gapX), function (gapX) {
     return {
       columnGap: gapX ? rem(space[gapX]) : undefined
     };
@@ -3561,7 +3468,7 @@ function responsiveGridGapYStyle(props) {
   var _theme$sanity3 = theme.sanity,
       media = _theme$sanity3.media,
       space = _theme$sanity3.space;
-  return _responsive(media, props.$gapY, function (gapY) {
+  return responsive(media, getResponsiveProp(props.$gapY), function (gapY) {
     return {
       rowGap: gapY ? rem(space[gapY]) : undefined
     };
@@ -3583,7 +3490,7 @@ var GRID_ITEM_COLUMN = {
 function responsiveGridItemRowStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$row, function (row) {
+  return responsive(media, getResponsiveProp(props.$row), function (row) {
     if (typeof row === 'number') {
       return {
         gridRow: "span " + row + " / span " + row
@@ -3599,7 +3506,7 @@ function responsiveGridItemRowStyle(props) {
 function responsiveGridItemRowStartStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$rowStart, function (rowStart) {
+  return responsive(media, getResponsiveProp(props.$rowStart), function (rowStart) {
     return {
       gridRowStart: rowStart
     };
@@ -3609,7 +3516,7 @@ function responsiveGridItemRowStartStyle(props) {
 function responsiveGridItemRowEndStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$rowEnd, function (rowEnd) {
+  return responsive(media, getResponsiveProp(props.$rowEnd), function (rowEnd) {
     return {
       gridRowEnd: rowEnd
     };
@@ -3619,7 +3526,7 @@ function responsiveGridItemRowEndStyle(props) {
 function responsiveGridItemColumnStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$column, function (column) {
+  return responsive(media, getResponsiveProp(props.$column), function (column) {
     if (typeof column === 'number') {
       return {
         gridColumn: "span " + column + " / span " + column
@@ -3635,7 +3542,7 @@ function responsiveGridItemColumnStyle(props) {
 function responsiveGridItemColumnStartStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$columnStart, function (columnStart) {
+  return responsive(media, getResponsiveProp(props.$columnStart), function (columnStart) {
     return {
       gridColumnStart: columnStart
     };
@@ -3645,7 +3552,7 @@ function responsiveGridItemColumnStartStyle(props) {
 function responsiveGridItemColumnEndStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$columnEnd, function (columnEnd) {
+  return responsive(media, getResponsiveProp(props.$columnEnd), function (columnEnd) {
     return {
       gridColumnEnd: columnEnd
     };
@@ -3653,36 +3560,36 @@ function responsiveGridItemColumnEndStyle(props) {
 }
 
 function responsiveInputPaddingStyle(props) {
-  var $fontSize = props.$fontSize,
-      $iconLeft = props.$iconLeft,
+  var $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 len = Math.max($padding.length, $space.length, $fontSize.length);
+  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 _padding = [];
   var _space = [];
-  var _fontSize = [];
+  var _size = [];
 
   for (var i = 0; i < len; i += 1) {
-    _fontSize[i] = $fontSize[i] === undefined ? _fontSize[i - 1] : $fontSize[i];
-    _padding[i] = $padding[i] === undefined ? _padding[i - 1] : $padding[i];
-    _space[i] = $space[i] === undefined ? _space[i - 1] : $space[i];
+    _padding[i] = padding[i] === undefined ? _padding[i - 1] : padding[i];
+    _space[i] = space[i] === undefined ? _space[i - 1] : space[i];
+    _size[i] = size[i] === undefined ? _size[i - 1] : size[i];
   }
 
-  return _responsive(media, _padding, function (_, i) {
-    var size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2];
-    var emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight;
+  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;
     var p = spaceScale[_padding[i]];
     var s = spaceScale[_space[i]];
     var styles = {
-      paddingTop: rem(p - size.ascenderHeight),
+      paddingTop: rem(p - fontSize.ascenderHeight),
       paddingRight: rem(p),
-      paddingBottom: rem(p - size.descenderHeight),
+      paddingBottom: rem(p - fontSize.descenderHeight),
       paddingLeft: rem(p)
     };
     if ($iconRight) styles.paddingRight = rem(p + emSize + s);
@@ -3703,19 +3610,17 @@ function textInputRootStyle() {
 }
 function textInputBaseStyle(props) {
   var theme = props.theme,
-      $scheme = props.$scheme,
-      $tone = props.$tone,
       $weight = props.$weight;
   var font = theme.sanity.fonts.text;
   var color = theme.sanity.color.input;
-  return styled.css(_templateObject2$n || (_templateObject2$n = _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-scheme='", "'][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, $scheme, $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);
+  return styled.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);
 }
 function textInputFontSizeStyle(props) {
   var theme = props.theme;
   var _theme$sanity = theme.sanity,
       fonts = _theme$sanity.fonts,
       media = _theme$sanity.media;
-  return _responsive(media, props.$fontSize, function (sizeIndex) {
+  return responsive(media, getResponsiveProp(props.$fontSize, [2]), function (sizeIndex) {
     var size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2];
     return {
       fontSize: rem(size.fontSize),
@@ -3727,14 +3632,12 @@ function textInputRepresentationStyle(props) {
   var $border = props.$border,
       $hasPrefix = props.$hasPrefix,
       $hasSuffix = props.$hasSuffix,
-      $scheme = props.$scheme,
-      $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 styled.css(_templateObject3$e || (_templateObject3$e = _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-scheme='", "'][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, $scheme, $tone, color["default"].enabled.bg, color["default"].enabled.fg, $border ? focusRingBorderStyle({
+  return styled.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({
     color: color["default"].enabled.border,
     width: input.border.width
   }) : undefined, color.invalid.enabled.bg, color.invalid.enabled.fg, $border ? focusRingBorderStyle({
@@ -3749,20 +3652,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"].readOnly.bg, color["default"].readOnly.fg, color["default"].hovered.bg, color["default"].hovered.fg, $border ? focusRingBorderStyle({
+  }) : 'none', color["default"].hovered.bg, color["default"].hovered.fg, $border ? focusRingBorderStyle({
     color: color["default"].hovered.border,
     width: input.border.width
-  }) : 'none');
+  }) : 'none', color["default"].readOnly.bg, color["default"].readOnly.fg);
 }
 
 function responsiveMarginStyle(props) {
   var theme = props.theme;
-  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);
+  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);
 }
 
 function responsivePaddingStyle(props) {
   var theme = props.theme;
-  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);
+  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);
 }
 
 function responsiveRadiusStyle(props) {
@@ -3770,7 +3673,7 @@ function responsiveRadiusStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       radius = _theme$sanity.radius;
-  return _responsive(media, props.$radius, function (radiusIndex) {
+  return responsive(media, getResponsiveProp(props.$radius), function (radiusIndex) {
     return {
       borderRadius: rem(radius[radiusIndex])
     };
@@ -3797,7 +3700,7 @@ function responsiveShadowStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       shadows = _theme$sanity.shadows;
-  return _responsive(media, props.$shadow, function (shadow) {
+  return responsive(media, getResponsiveProp(props.$shadow), function (shadow) {
     return shadowStyle(shadows[shadow]);
   });
 }
@@ -3811,7 +3714,7 @@ function textBaseStyle(props) {
   return styled.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 && styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$d || (_templateObject3$d = _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 Root$E = styled__default["default"].div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
@@ -3831,7 +3734,7 @@ var Text = /*#__PURE__*/React.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;
 
@@ -3843,10 +3746,10 @@ var Text = /*#__PURE__*/React.forwardRef(function Text(props, ref) {
     "data-ui": "Text"
   }, restProps, {
     "$accent": accent,
-    "$align": useArrayProp(align),
+    "$align": align,
     "$muted": muted,
     ref: ref,
-    "$size": useArrayProp(size),
+    "$size": size,
     "$weight": weight
   }), /*#__PURE__*/React__default["default"].createElement("span", null, children));
 });
@@ -3942,7 +3845,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),
@@ -3991,7 +3894,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__default["default"].div(responsiveAvatarSizeStyle, avatarStyle.root);
 var Arrow = styled__default["default"].div(avatarStyle.arrow);
 var BgStroke = styled__default["default"].ellipse(avatarStyle.bgStroke);
@@ -4013,12 +3916,11 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
       animateArrowFrom = props.animateArrowFrom,
       _props$status = props.status,
       status = _props$status === void 0 ? 'online' : _props$status,
-      _props$size = props.size,
-      sizeProp = _props$size === void 0 ? 0 : _props$size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$F);
+      sizeProp = props.size,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$G);
 
   var as = ReactIs__default["default"].isValidElementType(asProp) ? asProp : 'div';
-  var size = useArrayProp(sizeProp);
+  var size = useResponsiveProp(sizeProp, [0]);
   var theme = useTheme();
   var color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray; // @todo: remove this
 
@@ -4058,11 +3960,6 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
       onImageLoadError(new Error('Avatar: the image failed to load'));
     }
   }, [onImageLoadError]);
-  var initialsSize = React.useMemo(function () {
-    return size.map(function (s) {
-      return s === 0 ? 0 : s + 1;
-    });
-  }, [size]);
   return /*#__PURE__*/React__default["default"].createElement(Root$D, _extends({
     as: as,
     "data-as": typeof as === 'string' ? as : undefined,
@@ -4116,18 +4013,20 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
     vectorEffect: "non-scaling-stroke"
   })), (imageFailed || !src) && initials && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Initials, null, /*#__PURE__*/React__default["default"].createElement(Text, {
     as: "span",
-    size: initialsSize
+    size: size.map(function (s) {
+      return s === 0 ? 0 : s + 1;
+    })
   }, /*#__PURE__*/React__default["default"].createElement("strong", null, initials)))));
 });
 
 var _templateObject$A;
 
-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;
     return {
@@ -4138,12 +4037,12 @@ function _responsiveAvatarCounterSizeStyle(props) {
   });
 }
 
-function _avatarCounterBaseStyle(props) {
+function avatarCounterBaseStyle(props) {
   var theme = props.theme;
   return styled.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]));
 }
 
-var Root$C = styled__default["default"].div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
+var Root$C = styled__default["default"].div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle);
 /**
  * @public
  */
@@ -4152,19 +4051,15 @@ var AvatarCounter = /*#__PURE__*/React.forwardRef(function AvatarCounter(props,
   var count = props.count,
       _props$size = props.size,
       sizeProp = _props$size === void 0 ? 0 : _props$size;
-  var size = useArrayProp(sizeProp);
-  var counterSize = React.useMemo(function () {
-    return size.map(function (s) {
-      return s === 0 ? 0 : s + 1;
-    });
-  }, [size]);
+  var size = useResponsiveProp(sizeProp, [0]);
   return /*#__PURE__*/React__default["default"].createElement(Root$C, {
     "$size": size,
-    "data-ui": "AvatarCounter",
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement(Text, {
     as: "span",
-    size: counterSize
+    size: size.map(function (s) {
+      return s === 0 ? 0 : s + 1;
+    })
   }, /*#__PURE__*/React__default["default"].createElement("strong", null, count)));
 });
 
@@ -4175,7 +4070,7 @@ function childrenToElementArray(children) {
   });
 }
 
-var _excluded$E = ["children", "maxLength", "size"];
+var _excluded$F = ["children", "maxLength", "size", "tone"];
 
 var _templateObject$z;
 var BASE_STYLES = styled.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"])));
@@ -4189,7 +4084,7 @@ function responsiveAvatarStackSizeStyle(props) {
   var _theme$sanity = theme.sanity,
       avatar = _theme$sanity.avatar,
       media = _theme$sanity.media;
-  return _responsive(media, props.$size, function (size) {
+  return responsive(media, getResponsiveProp(props.size), function (size) {
     var avatarSize = avatar.sizes[size];
     if (!avatarSize) return EMPTY_RECORD;
     return {
@@ -4210,14 +4105,13 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
       _props$maxLength = props.maxLength,
       maxLengthProp = _props$maxLength === void 0 ? 4 : _props$maxLength,
       _props$size = props.size,
-      sizeProp = _props$size === void 0 ? 0 : _props$size,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$E);
+      size = _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;
@@ -4226,7 +4120,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
     "data-ui": "AvatarStack"
   }, restProps, {
     ref: ref,
-    "$size": size
+    size: size
   }), len === 0 && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(AvatarCounter, {
     count: len
   })), len !== 0 && extraCount > 1 && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(AvatarCounter, {
@@ -4241,7 +4135,7 @@ var AvatarStack = /*#__PURE__*/React.forwardRef(function AvatarStack(props, ref)
   }));
 });
 
-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__default["default"].div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 /**
  * @public
@@ -4278,37 +4172,37 @@ var Box = /*#__PURE__*/React.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__default["default"].createElement(Root$A, _extends({
     "data-as": typeof asProp === 'string' ? asProp : undefined,
     "data-ui": "Box"
   }, restProps, {
-    "$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),
+    "$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,
     as: asProp,
     ref: ref
   }), props.children);
@@ -4323,7 +4217,7 @@ function labelBaseStyle(props) {
   return styled.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 && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _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 Root$z = styled__default["default"].div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
@@ -4342,7 +4236,7 @@ var Label = /*#__PURE__*/React.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;
 
@@ -4356,9 +4250,9 @@ var Label = /*#__PURE__*/React.forwardRef(function Label(props, ref) {
     "data-ui": "Label"
   }, restProps, {
     "$accent": accent,
-    "$align": useArrayProp(align),
+    "$align": align,
     "$muted": muted,
-    "$size": useArrayProp(size),
+    "$size": size,
     "$weight": weight,
     ref: ref
   }), children);
@@ -4381,7 +4275,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__default["default"](Box)(responsiveRadiusStyle, badgeStyle);
 /**
  * @public
@@ -4398,22 +4292,22 @@ var Badge = /*#__PURE__*/React.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__default["default"].createElement(Root$y, _extends({
     "data-ui": "Badge"
   }, restProps, {
     "$mode": mode,
     "$tone": tone,
-    "$radius": useArrayProp(radius),
-    padding: useArrayProp(padding),
+    "$radius": radius,
+    padding: padding,
     ref: ref
   }), /*#__PURE__*/React__default["default"].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__default["default"](Box)(flexItemStyle, responsiveFlexStyle);
 /**
  * @public
@@ -4427,32 +4321,72 @@ var Flex = /*#__PURE__*/React.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__default["default"].createElement(Root$x, _extends({
     "data-ui": "Flex"
   }, restProps, {
-    "$align": useArrayProp(align),
-    "$direction": useArrayProp(direction),
-    "$gap": useArrayProp(gap),
-    "$justify": useArrayProp(justify),
-    "$wrap": useArrayProp(wrap),
+    "$align": align,
+    "$direction": direction,
+    "$gap": gap,
+    "$justify": justify,
+    "$wrap": wrap,
     forwardedAs: as,
     ref: ref
   }));
 });
 
 var _templateObject$w, _templateObject2$k;
-var rotate$1 = styled.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__default["default"](Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var rotate$1 = styled.keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\nfrom {\n  transform: rotate(0deg);\n}\n\nto {\n  transform: rotate(360deg);\n}\n"])));
+function spinnerStyle(props) {
+  var $muted = props.$muted;
+  return styled.css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n    animation: ", " 500ms linear infinite;\n    color: ", ";\n  "])), rotate$1, $muted ? 'var(--card-muted-fg-color)' : 'var(--card-fg-color)');
+}
+function spinnerSizeStyle(props) {
+  var $size = props.$size;
+  var _props$theme$sanity = props.theme.sanity,
+      fonts = _props$theme$sanity.fonts,
+      media = _props$theme$sanity.media;
+  return responsive(media, $size, function (size) {
+    var _fonts$text$sizes$siz = fonts.text.sizes[size],
+        ascenderHeight = _fonts$text$sizes$siz.ascenderHeight,
+        descenderHeight = _fonts$text$sizes$siz.descenderHeight,
+        lineHeight = _fonts$text$sizes$siz.lineHeight,
+        iconSize = _fonts$text$sizes$siz.iconSize;
+    var capHeight = lineHeight - ascenderHeight - descenderHeight;
+    return {
+      width: rem(capHeight),
+      height: rem(capHeight),
+      '& > svg': {
+        display: 'block',
+        width: rem(iconSize),
+        height: rem(iconSize),
+        margin: (capHeight - iconSize) / 2
+      }
+    };
+  });
+}
+
+var _excluded$A = ["muted", "size"];
+var Root$w = styled__default["default"].div(spinnerStyle, spinnerSizeStyle);
 /**
  * @public
  */
 
 var Spinner = /*#__PURE__*/React.forwardRef(function Spinner(props, ref) {
+  var muted = props.muted,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 2 : _props$size,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$A);
+
+  var $size = React.useMemo(function () {
+    return Array.isArray(size) ? size : [size];
+  }, [size]);
   return /*#__PURE__*/React__default["default"].createElement(Root$w, _extends({
     "data-ui": "Spinner"
-  }, props, {
+  }, restProps, {
+    "$muted": muted,
+    "$size": $size,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(icons.SpinnerIcon, null));
 });
@@ -4565,23 +4499,23 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
       icon = props.icon,
       iconRight = props.iconRight,
       _props$justify = props.justify,
-      justifyProp = _props$justify === void 0 ? 'center' : _props$justify,
+      justify = _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,
-      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,
+      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,
       _props$radius = props.radius,
-      radiusProp = _props$radius === void 0 ? 2 : _props$radius,
+      radius = _props$radius === void 0 ? 2 : _props$radius,
       selected = props.selected,
       _props$space = props.space,
-      spaceProp = _props$space === void 0 ? 3 : _props$space,
+      space = _props$space === void 0 ? 3 : _props$space,
       text = props.text,
       textAlign = props.textAlign,
       _props$tone = props.tone,
@@ -4590,16 +4524,6 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
       type = _props$type === void 0 ? 'button' : _props$type,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
-  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 = React.useMemo(function () {
     return {
@@ -4721,15 +4645,15 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
     "data-ui": "Card",
     "data-tone": tone
   }, restProps, {
-    "$border": useArrayProp(border),
-    "$borderTop": useArrayProp(borderTop),
-    "$borderRight": useArrayProp(borderRight),
-    "$borderBottom": useArrayProp(borderBottom),
-    "$borderLeft": useArrayProp(borderLeft),
+    "$border": border,
+    "$borderTop": borderTop,
+    "$borderRight": borderRight,
+    "$borderBottom": borderBottom,
+    "$borderLeft": borderLeft,
     "$checkered": checkered,
     "$focusRing": focusRing,
-    "$radius": useArrayProp(radius),
-    "$shadow": useArrayProp(shadow),
+    "$radius": radius,
+    "$shadow": shadow,
     "$tone": tone,
     "data-checkered": checkered ? '' : undefined,
     "data-pressed": pressed ? '' : undefined,
@@ -4952,7 +4876,7 @@ var Code = /*#__PURE__*/React.forwardRef(function Code(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Root$s, _extends({
     "data-ui": "Code"
   }, restProps, {
-    "$size": useArrayProp(size),
+    "$size": size,
     "$weight": weight,
     ref: ref
   }), !(language && registered) && /*#__PURE__*/React__default["default"].createElement("code", null, children), language && registered && /*#__PURE__*/React__default["default"].createElement(Refractor__default["default"], {
@@ -4974,7 +4898,7 @@ function responsiveContainerWidthStyle(props) {
   var _theme$sanity = theme.sanity,
       container = _theme$sanity.container,
       media = _theme$sanity.media;
-  return _responsive(media, props.$width, function (val) {
+  return responsive(media, getResponsiveProp(props.$width), function (val) {
     return {
       maxWidth: val === 'auto' ? 'none' : rem(container[val])
     };
@@ -4996,7 +4920,7 @@ var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Root$r, _extends({
     "data-ui": "Container"
   }, restProps, {
-    "$width": useArrayProp(width),
+    "$width": width,
     forwardedAs: as,
     ref: ref
   }));
@@ -5025,14 +4949,14 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
     "data-as": typeof as === 'string' ? as : undefined,
     "data-ui": "Grid"
   }, restProps, {
-    "$autoRows": useArrayProp(autoRows),
-    "$autoCols": useArrayProp(autoCols),
-    "$autoFlow": useArrayProp(autoFlow),
-    "$columns": useArrayProp(columns),
-    "$gap": useArrayProp(gap),
-    "$gapX": useArrayProp(gapX),
-    "$gapY": useArrayProp(gapY),
-    "$rows": useArrayProp(rows),
+    "$autoRows": autoRows,
+    "$autoCols": autoCols,
+    "$autoFlow": autoFlow,
+    "$columns": columns,
+    "$gap": gap,
+    "$gapX": gapX,
+    "$gapY": gapY,
+    "$rows": rows,
     forwardedAs: as,
     ref: ref
   }), children);
@@ -5078,9 +5002,9 @@ var Heading = /*#__PURE__*/React.forwardRef(function Heading(props, ref) {
     "data-ui": "Heading"
   }, restProps, {
     "$accent": accent,
-    "$align": useArrayProp(align),
+    "$align": align,
     "$muted": muted,
-    "$size": useArrayProp(size),
+    "$size": size,
     "$weight": weight,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement("span", null, children));
@@ -5100,7 +5024,7 @@ function inlineBaseStyle() {
 }
 function inlineSpaceStyle(props) {
   var theme = props.theme;
-  return _responsive(theme.sanity.media, props.$space, function (spaceIndex) {
+  return responsive(theme.sanity.media, getResponsiveProp(props.$space), function (spaceIndex) {
     var space = rem(theme.sanity.space[spaceIndex]);
     return {
       margin: "-" + space + " 0 0 -" + space,
@@ -5123,20 +5047,18 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
       space = props.space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$s);
 
-  var children = React.useMemo(function () {
-    return childrenToElementArray(childrenProp).filter(Boolean).map(function (child, idx) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        key: idx
-      }, child);
-    });
-  }, [childrenProp]);
+  var children = childrenToElementArray(childrenProp).filter(Boolean);
   return /*#__PURE__*/React__default["default"].createElement(Root$o, _extends({
     "data-ui": "Inline"
   }, restProps, {
-    "$space": useArrayProp(space),
+    "$space": space,
     forwardedAs: as,
     ref: ref
-  }), children);
+  }), children.map(function (child, idx) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      key: idx
+    }, child);
+  }));
 });
 
 var _excluded$r = ["children", "fontSize", "padding", "radius"];
@@ -5165,7 +5087,7 @@ var KBD = /*#__PURE__*/React.forwardRef(function KBD(props, ref) {
   return /*#__PURE__*/React__default["default"].createElement(Root$n, _extends({
     "data-ui": "KBD"
   }, restProps, {
-    "$radius": useArrayProp(radius),
+    "$radius": radius,
     ref: ref
   }), /*#__PURE__*/React__default["default"].createElement(Box, {
     as: "span",
@@ -5219,6 +5141,12 @@ function useBoundaryElement() {
   return value || DEFAULT_VALUE;
 }
 
+/**
+ * @internal
+ */
+
+var RO = typeof window !== 'undefined' && window.ResizeObserver ? window.ResizeObserver : resizeObserver.ResizeObserver;
+
 function findMaxBreakpoints(media, width) {
   var ret = [];
 
@@ -5260,18 +5188,31 @@ var ElementQuery = /*#__PURE__*/React.forwardRef(function ElementQuery(props, re
       media = _props$media === void 0 ? theme.sanity.media : _props$media,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$q);
 
+  var _useState = React.useState(function () {
+    return window.innerWidth;
+  }),
+      width = _useState[0],
+      setWidth = _useState[1];
+
   var forwardedRef = useForwardedRef(ref);
 
-  var _useState = React.useState(null),
-      element = _useState[0],
-      setElement = _useState[1];
+  var _useState2 = React.useState(null),
+      element = _useState2[0],
+      setElement = _useState2[1];
 
-  var elementSize = useElementSize(element);
-  var width = React.useMemo(function () {
-    var _elementSize$border$w;
+  React.useEffect(function () {
+    if (!element) return;
+
+    var handleResizeEntries = function handleResizeEntries(entries) {
+      setWidth(entries[0].contentRect.width);
+    };
 
-    return (_elementSize$border$w = elementSize == null ? void 0 : elementSize.border.width) != null ? _elementSize$border$w : window.innerWidth;
-  }, [elementSize]);
+    var ro = new RO(handleResizeEntries);
+    ro.observe(element);
+    return function () {
+      return ro.disconnect();
+    };
+  }, [element]);
   var max = React.useMemo(function () {
     return findMaxBreakpoints(media, width);
   }, [media, width]);
@@ -5377,7 +5318,7 @@ function LayerProvider(props) {
       _props$zOffset = props.zOffset,
       zOffsetProp = _props$zOffset === void 0 ? 0 : _props$zOffset;
   var parent = React.useContext(LayerContext);
-  var zOffset = useArrayProp(zOffsetProp);
+  var zOffset = useResponsiveProp(zOffsetProp);
   var maxMediaIndex = zOffset.length - 1;
   var mediaIndex = Math.min(useMediaIndex(), maxMediaIndex);
   var zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
@@ -5819,7 +5760,7 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
       scrollEl.addEventListener('scroll', _handleScroll, {
         passive: true
       });
-      var ro = new _ResizeObserver(function (entries) {
+      var ro = new ResizeObserver(function (entries) {
         setScrollHeight(entries[0].contentRect.height);
       });
       ro.observe(scrollEl);
@@ -6136,7 +6077,7 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'inherit' : _props$tone,
       _props$width = props.width,
-      widthProp = _props$width === void 0 ? 0 : _props$width,
+      width = _props$width === void 0 ? 0 : _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,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$n);
@@ -6157,7 +6098,6 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
       setArrowElement = _useState3[1];
 
   var popperReferenceElement = referenceElementProp || referenceElement;
-  var width = useArrayProp(matchReferenceWidth ? 'auto' : widthProp);
   var modifiers = usePopoverModifiers({
     allowedAutoPlacements: allowedAutoPlacements,
     arrow: arrow,
@@ -6198,21 +6138,13 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   var popoverStyle = React.useMemo(function () {
     return _extends({}, style, styles.popper);
   }, [style, styles]);
-  var updateTimeoutRef = React.useRef(null);
   React.useEffect(function () {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current);
-      updateTimeoutRef.current = null;
-    }
-
-    updateTimeoutRef.current = setTimeout(function () {
-      if (forceUpdate) {
-        try {
-          forceUpdate();
-        } catch (_) {// ignore caught error
-        }
+    if (forceUpdate) {
+      try {
+        forceUpdate();
+      } catch (_) {// ignore caught error
       }
-    }, 0);
+    }
   }, [content, forceUpdate, open, popperReferenceElement]);
 
   if (disabled) {
@@ -6228,13 +6160,13 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
     zOffset: zOffset
   }, attributes.popper), /*#__PURE__*/React__default["default"].createElement(PopoverCard, {
     "$constrainSize": constrainSize,
-    "$width": width,
     "data-ui": "PopoverCard",
     padding: padding,
     radius: radius,
     scheme: scheme,
     shadow: shadow,
-    tone: tone
+    tone: tone,
+    width: width
   }, arrow && /*#__PURE__*/React__default["default"].createElement(PopoverArrow, {
     ref: setArrowElement,
     style: styles.arrow
@@ -6353,7 +6285,7 @@ function inputTextSizeStyle(props) {
   var theme = props.theme,
       $fontSize = props.$fontSize;
   var sizes = theme.sanity.fonts.text.sizes;
-  return _responsive(theme.sanity.media, $fontSize, function (sizeIndex) {
+  return responsive(theme.sanity.media, getResponsiveProp($fontSize), function (sizeIndex) {
     return textSize(sizes[sizeIndex] || sizes[2]);
   });
 }
@@ -6405,10 +6337,10 @@ var Select = /*#__PURE__*/React.forwardRef(function Select(props, forwardedRef)
     "data-read-only": !disabled && readOnly ? '' : undefined,
     "data-ui": "Select"
   }, restProps, {
-    "$fontSize": useArrayProp(fontSize),
-    "$padding": useArrayProp(padding),
-    "$radius": useArrayProp(radius),
-    "$space": useArrayProp(space),
+    "$fontSize": fontSize,
+    "$padding": padding,
+    "$radius": radius,
+    "$space": space,
     disabled: disabled || readOnly,
     ref: ref
   }), children), /*#__PURE__*/React__default["default"].createElement(IconBox, {
@@ -6436,7 +6368,7 @@ function responsiveStackSpaceStyle(props) {
   var _theme$sanity = theme.sanity,
       media = _theme$sanity.media,
       space = _theme$sanity.space;
-  return _responsive(media, props.$space, function (spaceIndex) {
+  return responsive(media, getResponsiveProp(props.$space), function (spaceIndex) {
     return {
       gridGap: rem(space[spaceIndex])
     };
@@ -6458,13 +6390,13 @@ var Stack = /*#__PURE__*/React.forwardRef(function Stack(props, ref) {
     "data-as": typeof as === 'string' ? as : undefined,
     "data-ui": "Stack"
   }, restProps, {
-    "$space": useArrayProp(space),
+    "$space": space,
     forwardedAs: as,
     ref: ref
   }));
 });
 
-var _templateObject$g, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$2, _templateObject7;
+var _templateObject$g, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7;
 /* Root */
 
 function switchBaseStyles() {
@@ -6508,7 +6440,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 styled.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 && styled.css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
+  return styled.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 && styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
 
 var _excluded$j = ["checked", "className", "disabled", "indeterminate", "readOnly", "style"];
@@ -6557,7 +6489,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef)
   })));
 });
 
-var _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius", "weight"];
+var _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
 
 var _templateObject$f;
 var Root$d = styled__default["default"].span(textInputRootStyle);
@@ -6580,46 +6512,32 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
       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__default["default"].createElement(Root$d, {
     "data-ui": "TextArea"
   }, /*#__PURE__*/React__default["default"].createElement(InputRoot$1, null, /*#__PURE__*/React__default["default"].createElement(Input$1, _extends({
-    "data-as": "textarea",
-    "data-scheme": rootTheme.scheme,
-    "data-tone": rootTheme.tone
+    "data-as": "textarea"
   }, restProps, {
-    "$fontSize": useArrayProp(fontSize),
-    "$padding": useArrayProp(padding),
-    "$scheme": rootTheme.scheme,
-    "$space": useArrayProp(0),
-    "$tone": rootTheme.tone,
-    "$weight": weight,
+    "$fontSize": fontSize,
+    "$padding": padding,
     disabled: disabled,
     ref: ref
   })), /*#__PURE__*/React__default["default"].createElement(Presentation$1, {
     "$border": border,
-    "$radius": useArrayProp(radius),
-    "$scheme": rootTheme.scheme,
-    "$tone": rootTheme.tone,
-    "data-scheme": rootTheme.scheme,
-    "data-tone": rootTheme.tone
+    "$radius": radius
   })));
 });
 
-var _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type", "weight"];
+var _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
 
-var _templateObject$e, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2, _templateObject6$1;
+var _templateObject$e, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2;
 var CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
-var Root$c = styled__default["default"](Card).attrs({
-  forwardedAs: 'span'
-})(textInputRootStyle);
+var Root$c = styled__default["default"].span(textInputRootStyle);
 var InputRoot = styled__default["default"].span(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 var Prefix = styled__default["default"](Card).attrs({
   forwardedAs: 'span'
@@ -6630,8 +6548,7 @@ var Suffix = styled__default["default"](Card).attrs({
 var Input = styled__default["default"].input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 var Presentation = styled__default["default"].span(responsiveRadiusStyle, textInputRepresentationStyle);
 var LeftBox = styled__default["default"](Box)(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
-var RightBox = styled__default["default"](Box)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-var RightCard = styled__default["default"](Card)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
+var RightCard = styled__default["default"](Card)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteralLoose(["\n  background-color: transparent;\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
 /**
  * @public
  */
@@ -6643,7 +6560,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       _props$fontSize = props.fontSize,
-      fontSizeProp = _props$fontSize === void 0 ? 2 : _props$fontSize,
+      fontSize = _props$fontSize === void 0 ? 2 : _props$fontSize,
       icon = props.icon,
       iconRight = props.iconRight,
       onClear = props.onClear,
@@ -6654,20 +6571,16 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
       radiusProp = _props$radius === void 0 ? 1 : _props$radius,
       readOnly = props.readOnly,
       _props$space = props.space,
-      spaceProp = _props$space === void 0 ? 3 : _props$space,
+      space = _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 rootTheme = useRootTheme();
-  var fontSize = useArrayProp(fontSizeProp);
-  var padding = useArrayProp(paddingProp);
-  var radius = useArrayProp(radiusProp);
-  var space = useArrayProp(spaceProp); // Transient properties
+  var padding = useResponsiveProp(paddingProp);
+  var radius = useResponsiveProp(radiusProp); // Transient properties
 
   var $hasClearButton = Boolean(clearButton);
   var $hasIcon = Boolean(icon);
@@ -6706,21 +6619,17 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
       "$border": border,
       "$hasPrefix": $hasPrefix,
       "$hasSuffix": $hasSuffix,
-      "$radius": radius,
-      "$scheme": rootTheme.scheme,
-      "$tone": rootTheme.tone,
-      "data-scheme": rootTheme.scheme,
-      "data-tone": rootTheme.tone
+      "$radius": radius
     }, icon && /*#__PURE__*/React__default["default"].createElement(LeftBox, {
       padding: padding
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
       size: fontSize
-    }, /*#__PURE__*/React.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && /*#__PURE__*/React.createElement(icon))), !$hasClearButton && iconRight && /*#__PURE__*/React__default["default"].createElement(RightBox, {
+    }, /*#__PURE__*/React.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && /*#__PURE__*/React.createElement(icon))), !$hasClearButton && iconRight && /*#__PURE__*/React__default["default"].createElement(RightCard, {
       padding: padding
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
       size: fontSize
     }, /*#__PURE__*/React.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && /*#__PURE__*/React.createElement(iconRight))));
-  }, [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
+  }, [border, fontSize, icon, iconRight, padding, radius, $hasClearButton, $hasPrefix, $hasSuffix]); // Render clear button (memoized)
 
   var clearButtonBoxPadding = React.useMemo(function () {
     return padding.map(function (v) {
@@ -6771,21 +6680,15 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
     }, /*#__PURE__*/React__default["default"].createElement("span", null, suffix));
   }, [radius, suffix]);
   return /*#__PURE__*/React__default["default"].createElement(Root$c, {
-    "data-ui": "TextInput",
-    tone: rootTheme.tone
+    "data-ui": "TextInput"
   }, prefixNode, /*#__PURE__*/React__default["default"].createElement(InputRoot, null, /*#__PURE__*/React__default["default"].createElement(Input, _extends({
-    "data-as": "input",
-    "data-scheme": rootTheme.scheme,
-    "data-tone": rootTheme.tone
+    "data-as": "input"
   }, restProps, {
-    "$fontSize": fontSize,
     "$iconLeft": $hasIcon,
     "$iconRight": $hasIconRight || $hasClearButton,
     "$padding": padding,
-    "$scheme": rootTheme.scheme,
     "$space": space,
-    "$tone": rootTheme.tone,
-    "$weight": weight,
+    "$fontSize": fontSize,
     disabled: disabled,
     readOnly: readOnly,
     ref: ref,
@@ -6833,7 +6736,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
       children = props.children,
       content = props.content,
       disabled = props.disabled,
-      fallbackPlacementsProp = props.fallbackPlacements,
+      fallbackPlacements = props.fallbackPlacements,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom' : _props$placement,
       portal = props.portal,
@@ -6842,7 +6745,6 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
       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 = React.useState(null),
@@ -6924,21 +6826,13 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
       window.removeEventListener('mousemove', handleWindowMouseMove);
     };
   }, [isOpen, referenceElement]);
-  var updateTimeoutRef = React.useRef(null);
   React.useEffect(function () {
-    if (updateTimeoutRef.current) {
-      clearTimeout(updateTimeoutRef.current);
-      updateTimeoutRef.current = null;
-    }
-
-    updateTimeoutRef.current = setTimeout(function () {
-      if (forceUpdate) {
-        try {
-          forceUpdate();
-        } catch (_) {// ignore caught error
-        }
+    if (forceUpdate) {
+      try {
+        forceUpdate();
+      } catch (_) {// ignore caught error
       }
-    }, 0);
+    }
   }, [forceUpdate, content]); // Close when `disabled` changes to `true`
 
   React.useEffect(function () {
@@ -7220,7 +7114,7 @@ var InnerAutocomplete = /*#__PURE__*/React.forwardRef(function InnerAutocomplete
   var popoverMouseWithinRef = React.useRef(false);
   var listBoxId = id + "-listbox";
   var options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY;
-  var padding = useArrayProp(paddingProp);
+  var padding = useResponsiveProp(paddingProp);
   var currentOption = React.useMemo(function () {
     return value !== null ? options.find(function (o) {
       return o.value === value;
@@ -7652,11 +7546,9 @@ var Breadcrumbs = /*#__PURE__*/React.forwardRef(function Breadcrumbs(props, ref)
       maxLength = props.maxLength,
       separator = props.separator,
       _props$space = props.space,
-      spaceRaw = _props$space === void 0 ? 2 : _props$space,
+      space = _props$space === void 0 ? 2 : _props$space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$e);
 
-  var space = useArrayProp(spaceRaw);
-
   var _useState = React.useState(false),
       open = _useState[0],
       setOpen = _useState[1];
@@ -7746,13 +7638,13 @@ function dialogStyle(_ref) {
     alignItems: 'center',
     justifyContent: 'center',
     outline: 'none',
-    background: color.shadow.umbra
+    background: color.shadow.penumbra
   };
 }
 function responsiveDialogPositionStyle(props) {
   var theme = props.theme;
   var media = theme.sanity.media;
-  return _responsive(media, props.$position, function (position) {
+  return responsive(media, getResponsiveProp(props.$position), function (position) {
     return {
       '&&': {
         position: position
@@ -7800,13 +7692,10 @@ var DialogCard = /*#__PURE__*/React.forwardRef(function DialogCard(props, ref) {
       id = props.id,
       onClickOutside = props.onClickOutside,
       onClose = props.onClose,
-      radiusProp = props.radius,
+      radius = props.radius,
       scheme = props.scheme,
-      shadowProp = props.shadow,
-      widthProp = props.width;
-  var radius = useArrayProp(radiusProp);
-  var shadow = useArrayProp(shadowProp);
-  var width = useArrayProp(widthProp);
+      shadow = props.shadow,
+      width = props.width;
   var forwardedRef = useForwardedRef(ref);
 
   var _useState = React.useState(null),
@@ -7893,7 +7782,7 @@ var Dialog = /*#__PURE__*/React.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,
-      cardRadiusProp = _props$cardRadius === void 0 ? 3 : _props$cardRadius,
+      cardRadius = _props$cardRadius === void 0 ? 3 : _props$cardRadius,
       _props$cardShadow = props.cardShadow,
       cardShadow = _props$cardShadow === void 0 ? 4 : _props$cardShadow,
       children = props.children,
@@ -7904,22 +7793,17 @@ var Dialog = /*#__PURE__*/React.forwardRef(function Dialog(props, ref) {
       onClickOutside = props.onClickOutside,
       onClose = props.onClose,
       _props$padding = props.padding,
-      paddingProp = _props$padding === void 0 ? 4 : _props$padding,
+      padding = _props$padding === void 0 ? 4 : _props$padding,
       portal = props.portal,
       _props$position = props.position,
-      positionProp = _props$position === void 0 ? dialog.position || 'fixed' : _props$position,
+      position = _props$position === void 0 ? dialog.position || 'fixed' : _props$position,
       scheme = props.scheme,
       _props$width = props.width,
-      widthProp = _props$width === void 0 ? 0 : _props$width,
+      width = _props$width === void 0 ? 0 : _props$width,
       _props$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,
+      zOffset = _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 = React.useRef(null);
   var postDivRef = React.useRef(null);
   var cardRef = React.useRef(null);
@@ -8014,11 +7898,9 @@ var Hotkeys = /*#__PURE__*/React.forwardRef(function Hotkeys(props, ref) {
       padding = props.padding,
       radius = props.radius,
       _props$space = props.space,
-      spaceProp = _props$space === void 0 ? 1 : _props$space,
+      space = _props$space === void 0 ? 1 : _props$space,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
-  var space = useArrayProp(spaceProp);
-
   if (!keys || keys.length === 0) {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   }
@@ -8632,7 +8514,7 @@ function selectableColorStyle(props) {
  * @internal
  */
 
-var Selectable = styled__default["default"](Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
+var Selectable = styled__default["default"](Box)(responsiveBorderStyle, responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 
 function useMenu() {
   var value = React.useContext(MenuContext);
@@ -8665,7 +8547,8 @@ function MenuGroup(props) {
       onClick = props.onClick,
       _props$padding = props.padding,
       padding = _props$padding === void 0 ? 3 : _props$padding,
-      popover = props.popover,
+      _props$popover = props.popover,
+      popover = _props$popover === void 0 ? {} : _props$popover,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 2 : _props$radius,
       _props$space = props.space,
@@ -8779,7 +8662,7 @@ function MenuGroup(props) {
     "aria-pressed": as === 'button' ? withinMenu : undefined,
     "data-pressed": as !== 'button' ? withinMenu : undefined,
     "data-selected": !withinMenu && active ? '' : undefined,
-    "$radius": useArrayProp(radius),
+    "$radius": radius,
     "$tone": tone,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
@@ -8885,13 +8768,13 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedR
     "data-selected": active ? '' : undefined,
     "data-disabled": disabled ? '' : undefined,
     forwardedAs: as,
-    "$radius": useArrayProp(radius),
-    "$padding": useArrayProp(0),
+    "$radius": radius,
     "$tone": tone,
     disabled: disabled,
     onClick: handleClick,
     onMouseEnter: onItemMouseEnter,
     onMouseLeave: onItemMouseLeave,
+    padding: 0,
     ref: setRef,
     role: "menuitem",
     tabIndex: -1,
@@ -8973,7 +8856,7 @@ var Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(props, ref) {
   }, [delay]);
   return /*#__PURE__*/React__default["default"].createElement(Root$4, _extends({}, restProps, {
     "$animated": animated,
-    "$radius": useArrayProp(radius),
+    "$radius": radius,
     "$visible": visible,
     ref: ref
   }));
@@ -8989,15 +8872,13 @@ var Root$3 = styled__default["default"](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;
 });
 /**
@@ -9010,7 +8891,7 @@ var TextSkeleton = /*#__PURE__*/React.forwardRef(function TextSkeleton(props, re
       size = _props$size === void 0 ? 2 : _props$size,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
-  var $size = useArrayProp(size);
+  var $size = useResponsiveProp(size);
   return /*#__PURE__*/React__default["default"].createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9027,7 +8908,7 @@ var LabelSkeleton = /*#__PURE__*/React.forwardRef(function TextSkeleton(props, r
       size = _props$size2 === void 0 ? 2 : _props$size2,
       restProps = _objectWithoutPropertiesLoose(props, _excluded2);
 
-  var $size = useArrayProp(size);
+  var $size = useResponsiveProp(size);
   return /*#__PURE__*/React__default["default"].createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9044,7 +8925,7 @@ var HeadingSkeleton = /*#__PURE__*/React.forwardRef(function TextSkeleton(props,
       size = _props$size3 === void 0 ? 2 : _props$size3,
       restProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
-  var $size = useArrayProp(size);
+  var $size = useResponsiveProp(size);
   return /*#__PURE__*/React__default["default"].createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9061,7 +8942,7 @@ var CodeSkeleton = /*#__PURE__*/React.forwardRef(function TextSkeleton(props, re
       size = _props$size4 === void 0 ? 2 : _props$size4,
       restProps = _objectWithoutPropertiesLoose(props, _excluded4);
 
-  var $size = useArrayProp(size);
+  var $size = useResponsiveProp(size);
   return /*#__PURE__*/React__default["default"].createElement(Root$3, _extends({}, restProps, {
     "$size": $size,
     ref: ref,
@@ -9974,6 +9855,7 @@ exports.Popover = Popover;
 exports.Portal = Portal;
 exports.PortalProvider = PortalProvider;
 exports.Radio = Radio;
+exports.ResizeObserver = RO;
 exports.Select = Select;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
@@ -9995,21 +9877,18 @@ exports.Tooltip = Tooltip;
 exports.Tree = Tree;
 exports.TreeItem = TreeItem;
 exports.VirtualList = VirtualList;
-exports._ResizeObserver = _ResizeObserver;
-exports._elementSizeObserver = _elementSizeObserver;
-exports._fillCSSObject = _fillCSSObject;
-exports._getArrayProp = _getArrayProp;
-exports._getResponsiveSpace = _getResponsiveSpace;
 exports._hasFocus = _hasFocus;
 exports._isEnterToClickElement = _isEnterToClickElement;
 exports._isScrollable = _isScrollable;
 exports._raf = _raf;
 exports._raf2 = _raf2;
-exports._responsive = _responsive;
 exports.attemptFocus = attemptFocus;
 exports.createColorTheme = createColorTheme;
+exports.fillCSSObject = fillCSSObject;
 exports.focusFirstDescendant = focusFirstDescendant;
 exports.focusLastDescendant = focusLastDescendant;
+exports.getResponsiveProp = getResponsiveProp;
+exports.getResponsiveSpace = getResponsiveSpace;
 exports.hexToRgb = hexToRgb;
 exports.hslToRgb = hslToRgb;
 exports.isFocusable = isFocusable;
@@ -10022,6 +9901,7 @@ exports.isHTMLTextAreaElement = isHTMLTextAreaElement;
 exports.multiply = multiply$1;
 exports.parseColor = parseColor;
 exports.rem = rem;
+exports.responsive = responsive;
 exports.responsiveCodeFontStyle = responsiveCodeFontStyle;
 exports.responsiveHeadingFont = responsiveHeadingFont;
 exports.responsiveLabelFont = responsiveLabelFont;
@@ -10032,19 +9912,18 @@ exports.rgbToHsl = rgbToHsl;
 exports.rgba = rgba;
 exports.screen = screen$1;
 exports.studioTheme = studioTheme;
-exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useClickOutside = useClickOutside;
 exports.useCustomValidity = useCustomValidity;
 exports.useDialog = useDialog;
 exports.useElementRect = useElementRect;
-exports.useElementSize = useElementSize;
 exports.useForwardedRef = useForwardedRef;
 exports.useGlobalKeyDown = useGlobalKeyDown;
 exports.useLayer = useLayer;
 exports.useMediaIndex = useMediaIndex;
 exports.usePortal = usePortal;
 exports.usePrefersDark = usePrefersDark;
+exports.useResponsiveProp = useResponsiveProp;
 exports.useRootTheme = useRootTheme;
 exports.useTheme = useTheme;
 exports.useToast = useToast;