@sanity/ui 2.3.6 → 2.3.7-canary.0

package/dist/index.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), reactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
-var ReactIs__default = /* @__PURE__ */ _interopDefaultCompat(ReactIs), Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
+var Refractor__default = /* @__PURE__ */ _interopDefaultCompat(Refractor);
 const createColorTheme = theme.createColorTheme, hexToRgb = theme.hexToRgb, hslToRgb = theme.hslToRgb, multiply = theme.multiply, parseColor = theme.parseColor, rgbToHex = theme.rgbToHex, rgbToHsl = theme.rgbToHsl, rgba = theme.rgba, screen = theme.screen, studioTheme = theme.buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
@@ -117,617 +117,141 @@ function responsiveTextAlignStyle(props) {
 function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
-function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = react.useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
-  return react.useMemo(
-    () => _getArrayProp(val, defaultVal),
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__]
+function getGlobalScope() {
+  if (typeof globalThis < "u") return globalThis;
+  if (typeof window < "u") return window;
+  if (typeof self < "u") return self;
+  if (typeof global < "u") return global;
+  throw new Error("@sanity/ui: could not locate global scope");
+}
+const globalScope = getGlobalScope();
+function createGlobalScopedContext(key2, defaultValue) {
+  return typeof document > "u" ? react.createContext(defaultValue) : (globalScope[key2] = globalScope[key2] || react.createContext(defaultValue), globalScope[key2]);
+}
+const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
+function ThemeProvider(props) {
+  var _a, _b, _c;
+  const { children } = props, parentTheme = react.useContext(ThemeContext), scheme = (_a = props.scheme) != null ? _a : (parentTheme == null ? void 0 : parentTheme.scheme) || "light", rootTheme = (_b = props.theme) != null ? _b : (parentTheme == null ? void 0 : parentTheme.theme) || null, tone = (_c = props.tone) != null ? _c : (parentTheme == null ? void 0 : parentTheme.tone) || "default", themeContext = react.useMemo(() => rootTheme ? {
+    version: 0,
+    theme: rootTheme,
+    scheme,
+    tone
+  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
+  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+}
+function useRootTheme() {
+  const value = react.useContext(ThemeContext);
+  if (!value)
+    throw new Error("useRootTheme(): missing context value");
+  return value;
+}
+function ThemeColorProvider(props) {
+  const { children, scheme, tone } = props, root = useRootTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
+}
+function useTheme() {
+  return styledComponents.useTheme();
+}
+function useTheme_v2() {
+  return theme.getTheme_v2(styledComponents.useTheme());
+}
+function responsiveBorderStyle() {
+  return [border, borderTop, borderRight, borderBottom, borderLeft];
+}
+function border(props) {
+  var _a, _b;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  return _responsive(
+    media,
+    props.$border,
+    (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } }
   );
 }
-function _getElements(element, elementsArg) {
-  const ret = [element];
-  for (const el of elementsArg)
-    Array.isArray(el) ? ret.push(...el) : ret.push(el);
-  return ret.filter(Boolean);
+function borderTop(props) {
+  var _a, _b;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  return _responsive(
+    media,
+    props.$borderTop,
+    (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } }
+  );
 }
-function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
-  const [element, setElement] = react.useState(null), [elements, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements);
-  return react.useEffect(() => {
-    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements), elementsRef.current = nextElements;
-      return;
-    }
-    for (const el of prevElements)
-      if (!nextElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-    for (const el of nextElements)
-      if (!prevElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-  }, [element, elementsArg]), react.useEffect(() => {
-    if (!listener) return;
-    const handleWindowMouseDown = (evt) => {
-      const target = evt.target;
-      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
-        for (const el of elements)
-          if (target === el || el.contains(target))
-            return;
-        listener(evt);
-      }
-    };
-    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
-      window.removeEventListener("mousedown", handleWindowMouseDown);
-    };
-  }, [boundaryElement, listener, elements]), setElement;
+function borderRight(props) {
+  var _a, _b;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  return _responsive(
+    media,
+    props.$borderRight,
+    (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } }
+  );
 }
-var resizeObservers = [], hasActiveObservations = function() {
-  return resizeObservers.some(function(ro) {
-    return ro.activeTargets.length > 0;
-  });
-}, hasSkippedObservations = function() {
-  return resizeObservers.some(function(ro) {
-    return ro.skippedTargets.length > 0;
-  });
-}, msg = "ResizeObserver loop completed with undelivered notifications.", deliverResizeLoopError = function() {
-  var event;
-  typeof ErrorEvent == "function" ? event = new ErrorEvent("error", {
-    message: msg
-  }) : (event = document.createEvent("Event"), event.initEvent("error", !1, !1), event.message = msg), window.dispatchEvent(event);
-}, ResizeObserverBoxOptions;
-(function(ResizeObserverBoxOptions2) {
-  ResizeObserverBoxOptions2.BORDER_BOX = "border-box", ResizeObserverBoxOptions2.CONTENT_BOX = "content-box", ResizeObserverBoxOptions2.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
-})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
-var freeze = function(obj) {
-  return Object.freeze(obj);
-}, ResizeObserverSize = /* @__PURE__ */ function() {
-  function ResizeObserverSize2(inlineSize, blockSize) {
-    this.inlineSize = inlineSize, this.blockSize = blockSize, freeze(this);
-  }
-  return ResizeObserverSize2;
-}(), DOMRectReadOnly = function() {
-  function DOMRectReadOnly2(x, y, width, height) {
-    return this.x = x, this.y = y, this.width = width, this.height = height, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, freeze(this);
-  }
-  return DOMRectReadOnly2.prototype.toJSON = function() {
-    var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
-    return { x, y, top, right, bottom, left, width, height };
-  }, DOMRectReadOnly2.fromRect = function(rectangle) {
-    return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
-  }, DOMRectReadOnly2;
-}(), isSVG = function(target) {
-  return target instanceof SVGElement && "getBBox" in target;
-}, isHidden = function(target) {
-  if (isSVG(target)) {
-    var _a = target.getBBox(), width = _a.width, height = _a.height;
-    return !width && !height;
+function borderBottom(props) {
+  var _a, _b;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  return _responsive(
+    media,
+    props.$borderBottom,
+    (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } }
+  );
+}
+function borderLeft(props) {
+  var _a, _b;
+  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
+  return _responsive(
+    media,
+    props.$borderLeft,
+    (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } }
+  );
+}
+const BASE_STYLE$4 = {
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: "none"
   }
-  var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
-  return !(offsetWidth || offsetHeight || target.getClientRects().length);
-}, isElement = function(obj) {
-  var _a;
-  if (obj instanceof Element)
-    return !0;
-  var scope = (_a = obj == null ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
-  return !!(scope && obj instanceof scope.Element);
-}, isReplacedElement = function(target) {
-  switch (target.tagName) {
-    case "INPUT":
-      if (target.type !== "image")
-        break;
-    case "VIDEO":
-    case "AUDIO":
-    case "EMBED":
-    case "OBJECT":
-    case "CANVAS":
-    case "IFRAME":
-    case "IMG":
-      return !0;
-  }
-  return !1;
-}, global$1 = typeof window < "u" ? window : {}, cache = /* @__PURE__ */ new WeakMap(), scrollRegexp = /auto|scroll/, verticalRegexp = /^tb|vertical/, IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent), parseDimension = function(pixel) {
-  return parseFloat(pixel || "0");
-}, size$1 = function(inlineSize, blockSize, switchSizes) {
-  return inlineSize === void 0 && (inlineSize = 0), blockSize === void 0 && (blockSize = 0), switchSizes === void 0 && (switchSizes = !1), new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
-}, zeroBoxes = freeze({
-  devicePixelContentBoxSize: size$1(),
-  borderBoxSize: size$1(),
-  contentBoxSize: size$1(),
-  contentRect: new DOMRectReadOnly(0, 0, 0, 0)
-}), calculateBoxSizes = function(target, forceRecalculation) {
-  if (forceRecalculation === void 0 && (forceRecalculation = !1), cache.has(target) && !forceRecalculation)
-    return cache.get(target);
-  if (isHidden(target))
-    return cache.set(target, zeroBoxes), zeroBoxes;
-  var cs = getComputedStyle(target), svg = isSVG(target) && target.ownerSVGElement && target.getBBox(), removePadding = !IE && cs.boxSizing === "border-box", switchSizes = verticalRegexp.test(cs.writingMode || ""), canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""), canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""), paddingTop = svg ? 0 : parseDimension(cs.paddingTop), paddingRight = svg ? 0 : parseDimension(cs.paddingRight), paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom), paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft), borderTop2 = svg ? 0 : parseDimension(cs.borderTopWidth), borderRight2 = svg ? 0 : parseDimension(cs.borderRightWidth), borderBottom2 = svg ? 0 : parseDimension(cs.borderBottomWidth), borderLeft2 = svg ? 0 : parseDimension(cs.borderLeftWidth), horizontalPadding = paddingLeft + paddingRight, verticalPadding = paddingTop + paddingBottom, horizontalBorderArea = borderLeft2 + borderRight2, verticalBorderArea = borderTop2 + borderBottom2, horizontalScrollbarThickness = canScrollHorizontally ? target.offsetHeight - verticalBorderArea - target.clientHeight : 0, verticalScrollbarThickness = canScrollVertically ? target.offsetWidth - horizontalBorderArea - target.clientWidth : 0, widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0, heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0, contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness, contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness, borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea, borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea, boxes = freeze({
-    devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
-    borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
-    contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
-    contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
-  });
-  return cache.set(target, boxes), boxes;
-}, calculateBoxSize = function(target, observedBox, forceRecalculation) {
-  var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
-  switch (observedBox) {
-    case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
-      return devicePixelContentBoxSize;
-    case ResizeObserverBoxOptions.BORDER_BOX:
-      return borderBoxSize;
-    default:
-      return contentBoxSize;
-  }
-}, ResizeObserverEntry = /* @__PURE__ */ function() {
-  function ResizeObserverEntry2(target) {
-    var boxes = calculateBoxSizes(target);
-    this.target = target, this.contentRect = boxes.contentRect, this.borderBoxSize = freeze([boxes.borderBoxSize]), this.contentBoxSize = freeze([boxes.contentBoxSize]), this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
-  }
-  return ResizeObserverEntry2;
-}(), calculateDepthForNode = function(node) {
-  if (isHidden(node))
-    return 1 / 0;
-  for (var depth = 0, parent = node.parentNode; parent; )
-    depth += 1, parent = parent.parentNode;
-  return depth;
-}, broadcastActiveObservations = function() {
-  var shallowestDepth = 1 / 0, callbacks2 = [];
-  resizeObservers.forEach(function(ro) {
-    if (ro.activeTargets.length !== 0) {
-      var entries = [];
-      ro.activeTargets.forEach(function(ot) {
-        var entry = new ResizeObserverEntry(ot.target), targetDepth = calculateDepthForNode(ot.target);
-        entries.push(entry), ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox), targetDepth < shallowestDepth && (shallowestDepth = targetDepth);
-      }), callbacks2.push(function() {
-        ro.callback.call(ro.observer, entries, ro.observer);
-      }), ro.activeTargets.splice(0, ro.activeTargets.length);
-    }
-  });
-  for (var _i = 0, callbacks_1 = callbacks2; _i < callbacks_1.length; _i++) {
-    var callback = callbacks_1[_i];
-    callback();
-  }
-  return shallowestDepth;
-}, gatherActiveObservationsAtDepth = function(depth) {
-  resizeObservers.forEach(function(ro) {
-    ro.activeTargets.splice(0, ro.activeTargets.length), ro.skippedTargets.splice(0, ro.skippedTargets.length), ro.observationTargets.forEach(function(ot) {
-      ot.isActive() && (calculateDepthForNode(ot.target) > depth ? ro.activeTargets.push(ot) : ro.skippedTargets.push(ot));
-    });
-  });
-}, process = function() {
-  var depth = 0;
-  for (gatherActiveObservationsAtDepth(depth); hasActiveObservations(); )
-    depth = broadcastActiveObservations(), gatherActiveObservationsAtDepth(depth);
-  return hasSkippedObservations() && deliverResizeLoopError(), depth > 0;
-}, trigger, callbacks = [], notify = function() {
-  return callbacks.splice(0).forEach(function(cb) {
-    return cb();
-  });
-}, queueMicroTask = function(callback) {
-  if (!trigger) {
-    var toggle_1 = 0, el_1 = document.createTextNode(""), config = { characterData: !0 };
-    new MutationObserver(function() {
-      return notify();
-    }).observe(el_1, config), trigger = function() {
-      el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
-    };
-  }
-  callbacks.push(callback), trigger();
-}, queueResizeObserver = function(cb) {
-  queueMicroTask(function() {
-    requestAnimationFrame(cb);
-  });
-}, watching = 0, isWatching = function() {
-  return !!watching;
-}, CATCH_PERIOD = 250, observerConfig = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, events = [
-  "resize",
-  "load",
-  "transitionend",
-  "animationend",
-  "animationstart",
-  "animationiteration",
-  "keyup",
-  "keydown",
-  "mouseup",
-  "mousedown",
-  "mouseover",
-  "mouseout",
-  "blur",
-  "focus"
-], time = function(timeout) {
-  return timeout === void 0 && (timeout = 0), Date.now() + timeout;
-}, scheduled = !1, Scheduler = function() {
-  function Scheduler2() {
-    var _this = this;
-    this.stopped = !0, this.listener = function() {
-      return _this.schedule();
-    };
-  }
-  return Scheduler2.prototype.run = function(timeout) {
-    var _this = this;
-    if (timeout === void 0 && (timeout = CATCH_PERIOD), !scheduled) {
-      scheduled = !0;
-      var until = time(timeout);
-      queueResizeObserver(function() {
-        var elementsHaveResized = !1;
-        try {
-          elementsHaveResized = process();
-        } finally {
-          if (scheduled = !1, timeout = until - time(), !isWatching())
-            return;
-          elementsHaveResized ? _this.run(1e3) : timeout > 0 ? _this.run(timeout) : _this.start();
-        }
-      });
-    }
-  }, Scheduler2.prototype.schedule = function() {
-    this.stop(), this.run();
-  }, Scheduler2.prototype.observe = function() {
-    var _this = this, cb = function() {
-      return _this.observer && _this.observer.observe(document.body, observerConfig);
-    };
-    document.body ? cb() : global$1.addEventListener("DOMContentLoaded", cb);
-  }, Scheduler2.prototype.start = function() {
-    var _this = this;
-    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), events.forEach(function(name) {
-      return global$1.addEventListener(name, _this.listener, !0);
-    }));
-  }, Scheduler2.prototype.stop = function() {
-    var _this = this;
-    this.stopped || (this.observer && this.observer.disconnect(), events.forEach(function(name) {
-      return global$1.removeEventListener(name, _this.listener, !0);
-    }), this.stopped = !0);
-  }, Scheduler2;
-}(), scheduler = new Scheduler(), updateCount = function(n) {
-  !watching && n > 0 && scheduler.start(), watching += n, !watching && scheduler.stop();
-}, skipNotifyOnElement = function(target) {
-  return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
-}, ResizeObservation = function() {
-  function ResizeObservation2(target, observedBox) {
-    this.target = target, this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX, this.lastReportedSize = {
-      inlineSize: 0,
-      blockSize: 0
-    };
-  }
-  return ResizeObservation2.prototype.isActive = function() {
-    var size2 = calculateBoxSize(this.target, this.observedBox, !0);
-    return skipNotifyOnElement(this.target) && (this.lastReportedSize = size2), this.lastReportedSize.inlineSize !== size2.inlineSize || this.lastReportedSize.blockSize !== size2.blockSize;
-  }, ResizeObservation2;
-}(), ResizeObserverDetail = /* @__PURE__ */ function() {
-  function ResizeObserverDetail2(resizeObserver, callback) {
-    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = resizeObserver, this.callback = callback;
-  }
-  return ResizeObserverDetail2;
-}(), observerMap = /* @__PURE__ */ new WeakMap(), getObservationIndex = function(observationTargets, target) {
-  for (var i = 0; i < observationTargets.length; i += 1)
-    if (observationTargets[i].target === target)
-      return i;
-  return -1;
-}, ResizeObserverController = function() {
-  function ResizeObserverController2() {
-  }
-  return ResizeObserverController2.connect = function(resizeObserver, callback) {
-    var detail = new ResizeObserverDetail(resizeObserver, callback);
-    observerMap.set(resizeObserver, detail);
-  }, ResizeObserverController2.observe = function(resizeObserver, target, options) {
-    var detail = observerMap.get(resizeObserver), firstObservation = detail.observationTargets.length === 0;
-    getObservationIndex(detail.observationTargets, target) < 0 && (firstObservation && resizeObservers.push(detail), detail.observationTargets.push(new ResizeObservation(target, options && options.box)), updateCount(1), scheduler.schedule());
-  }, ResizeObserverController2.unobserve = function(resizeObserver, target) {
-    var detail = observerMap.get(resizeObserver), index = getObservationIndex(detail.observationTargets, target), lastObservation = detail.observationTargets.length === 1;
-    index >= 0 && (lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1), detail.observationTargets.splice(index, 1), updateCount(-1));
-  }, ResizeObserverController2.disconnect = function(resizeObserver) {
-    var _this = this, detail = observerMap.get(resizeObserver);
-    detail.observationTargets.slice().forEach(function(ot) {
-      return _this.unobserve(resizeObserver, ot.target);
-    }), detail.activeTargets.splice(0, detail.activeTargets.length);
-  }, ResizeObserverController2;
-}(), ResizeObserver = function() {
-  function ResizeObserver2(callback) {
-    if (arguments.length === 0)
-      throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
-    if (typeof callback != "function")
-      throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
-    ResizeObserverController.connect(this, callback);
-  }
-  return ResizeObserver2.prototype.observe = function(target, options) {
-    if (arguments.length === 0)
-      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
-    if (!isElement(target))
-      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
-    ResizeObserverController.observe(this, target, options);
-  }, ResizeObserver2.prototype.unobserve = function(target) {
-    if (arguments.length === 0)
-      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
-    if (!isElement(target))
-      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
-    ResizeObserverController.unobserve(this, target);
-  }, ResizeObserver2.prototype.disconnect = function() {
-    ResizeObserverController.disconnect(this);
-  }, ResizeObserver2.toString = function() {
-    return "function ResizeObserver () { [polyfill code] }";
-  }, ResizeObserver2;
-}();
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
-function _createElementRectValueListener() {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver = new _ResizeObserver(([entry]) => {
-        subscriber({
-          _contentRect: entry.contentRect,
-          border: {
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize
-          },
-          content: {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height
-          }
-        });
-      });
-      return resizeObserver.observe(element), () => {
-        resizeObserver.unobserve(element), resizeObserver.disconnect();
-      };
-    }
-  };
-}
-function _createElementSizeObserver() {
-  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || [];
-      let dispose = disposeCache.get(element);
-      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
-        for (const sub of subscribers)
-          sub(elementRect);
-      })), subscribers.push(subscriber), () => {
-        const idx = subscribers.indexOf(subscriber);
-        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
-      };
-    }
-  };
-}
-function useElementSize(element) {
-  const [size2, setSize] = react.useState(null);
-  return react.useEffect(() => {
-    if (element)
-      return _elementSizeObserver.subscribe(element, setSize);
-  }, [element]), size2;
-}
-function useElementRect(element) {
-  const elementSize = useElementSize(element);
-  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
-}
-function useGlobalKeyDown(onKeyDown) {
-  return react.useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
-}
-function getGlobalScope() {
-  if (typeof globalThis < "u") return globalThis;
-  if (typeof window < "u") return window;
-  if (typeof self < "u") return self;
-  if (typeof global < "u") return global;
-  throw new Error("@sanity/ui: could not locate global scope");
-}
-const globalScope = getGlobalScope();
-function createGlobalScopedContext(key2, defaultValue) {
-  return typeof document > "u" ? react.createContext(defaultValue) : (globalScope[key2] = globalScope[key2] || react.createContext(defaultValue), globalScope[key2]);
-}
-const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
-function ThemeProvider(props) {
-  const parentTheme = react.useContext(ThemeContext), {
-    children,
-    scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || "light",
-    theme: rootTheme = (parentTheme == null ? void 0 : parentTheme.theme) || null,
-    tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default"
-  } = props, themeContext = react.useMemo(() => rootTheme ? {
-    version: 0,
-    theme: rootTheme,
-    scheme,
-    tone
-  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
-}
-function useRootTheme() {
-  const value = react.useContext(ThemeContext);
-  if (!value)
-    throw new Error("useRootTheme(): missing context value");
-  return value;
-}
-function ThemeColorProvider(props) {
-  const { children, scheme, tone } = props, root = useRootTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
-}
-function useTheme() {
-  return styledComponents.useTheme();
-}
-function useTheme_v2() {
-  return theme.getTheme_v2(styledComponents.useTheme());
-}
-const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
-function _getMediaQuery(media, index) {
-  return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
-}
-function _createMediaStore(media) {
-  const mediaLen = media.length;
-  let sizes;
-  const getSizes = () => {
-    if (!sizes) {
-      sizes = [];
-      for (let index = mediaLen; index > -1; index -= 1) {
-        const mediaQuery = _getMediaQuery(media, index);
-        sizes.push({ index, mq: window.matchMedia(mediaQuery) });
-      }
-    }
-    return sizes;
-  };
-  return { getSnapshot: () => {
-    for (const { index, mq } of getSizes())
-      if (mq.matches) return index;
-    return 0;
-  }, subscribe: (onStoreChange) => {
-    const disposeFns = [];
-    for (const { mq } of getSizes()) {
-      const handleChange = () => {
-        mq.matches && onStoreChange();
-      };
-      mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
-    }
-    return () => {
-      for (const disposeFn of disposeFns)
-        disposeFn();
-    };
-  } };
-}
-function getServerSnapshot$2() {
-  return 0;
-}
-function useMediaIndex() {
-  const { media } = useTheme_v2();
-  let store = MEDIA_STORE_CACHE.get(media);
-  return store || (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store)), react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$2);
-}
-let MEDIA_QUERY_CACHE$1;
-function getMatchMedia$1() {
-  return MEDIA_QUERY_CACHE$1 || (MEDIA_QUERY_CACHE$1 = window.matchMedia("(prefers-color-scheme: dark)")), MEDIA_QUERY_CACHE$1;
-}
-function subscribe$2(onStoreChange) {
-  const matchMedia = getMatchMedia$1();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-}
-function getSnapshot$1() {
-  return getMatchMedia$1().matches;
-}
-function getServerSnapshot$1() {
-  return !1;
-}
-function usePrefersDark() {
-  return react.useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
-}
-let MEDIA_QUERY_CACHE;
-function getMatchMedia() {
-  return MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia("(prefers-reduced-motion: reduce)")), MEDIA_QUERY_CACHE;
-}
-function subscribe$1(onStoreChange) {
-  const matchMedia = getMatchMedia();
-  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-}
-function getSnapshot() {
-  return getMatchMedia().matches;
-}
-function getServerSnapshot() {
-  return !1;
-}
-function usePrefersReducedMotion() {
-  return react.useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
-}
-function useForwardedRef(ref) {
-  const innerRef = react.useRef(null);
-  return react.useImperativeHandle(ref, () => innerRef.current), innerRef;
-}
-function useCustomValidity(ref, customValidity) {
-  react.useEffect(() => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
-  }, [customValidity, ref]);
-}
-function responsiveBorderStyle() {
-  return [border, borderTop, borderRight, borderBottom, borderLeft];
-}
-function border(props) {
-  var _a, _b;
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$border,
-    (value) => value ? { "&&": { border: borderStyle } } : { "&&": { border: 0 } }
-  );
-}
-function borderTop(props) {
-  var _a, _b;
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderTop,
-    (value) => value ? { "&&": { borderTop: borderStyle } } : { "&&": { borderTop: 0 } }
-  );
-}
-function borderRight(props) {
-  var _a, _b;
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderRight,
-    (value) => value ? { "&&": { borderRight: borderStyle } } : { "&&": { borderRight: 0 } }
-  );
-}
-function borderBottom(props) {
-  var _a, _b;
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderBottom,
-    (value) => value ? { "&&": { borderBottom: borderStyle } } : { "&&": { borderBottom: 0 } }
-  );
-}
-function borderLeft(props) {
-  var _a, _b;
-  const { card, media } = theme.getTheme_v2(props.theme), borderStyle = `${(_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1}px solid var(--card-border-color)`;
-  return _responsive(
-    media,
-    props.$borderLeft,
-    (value) => value ? { "&&": { borderLeft: borderStyle } } : { "&&": { borderLeft: 0 } }
-  );
-}
-const BASE_STYLE$4 = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
-  }
-}, BOX_SIZING = {
-  content: "content-box",
-  border: "border-box"
-}, BOX_HEIGHT = {
-  stretch: "stretch",
-  fill: "100%"
-};
-function boxStyle() {
-  return BASE_STYLE$4;
-}
-function responsiveBoxStyle() {
-  return [
-    responsiveBoxSizingStyle,
-    responsiveBoxHeightStyle,
-    responsiveBoxOverflowStyle,
-    responsiveBoxDisplayStyle
-  ];
-}
-function responsiveBoxDisplayStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$display, (display) => ({
-    "&:not([hidden])": { display }
-  }));
-}
-function responsiveBoxSizingStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing]
-  }));
-}
-function responsiveBoxHeightStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height]
-  }));
-}
-function responsiveBoxOverflowStyle(props) {
-  const { media } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow
-  }));
-}
-const BASE_STYLE$3 = {
-  "&&:not([hidden])": {
-    display: "flex"
+}, BOX_SIZING = {
+  content: "content-box",
+  border: "border-box"
+}, BOX_HEIGHT = {
+  stretch: "stretch",
+  fill: "100%"
+};
+function boxStyle() {
+  return BASE_STYLE$4;
+}
+function responsiveBoxStyle() {
+  return [
+    responsiveBoxSizingStyle,
+    responsiveBoxHeightStyle,
+    responsiveBoxOverflowStyle,
+    responsiveBoxDisplayStyle
+  ];
+}
+function responsiveBoxDisplayStyle(props) {
+  const { media } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$display, (display) => ({
+    "&:not([hidden])": { display }
+  }));
+}
+function responsiveBoxSizingStyle(props) {
+  const { media } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$sizing, (sizing) => ({
+    boxSizing: BOX_SIZING[sizing]
+  }));
+}
+function responsiveBoxHeightStyle(props) {
+  const { media } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$height, (height) => ({
+    height: BOX_HEIGHT[height]
+  }));
+}
+function responsiveBoxOverflowStyle(props) {
+  const { media } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$overflow, (overflow) => ({
+    overflow
+  }));
+}
+const BASE_STYLE$3 = {
+  "&&:not([hidden])": {
+    display: "flex"
   }
 };
 function responsiveFlexStyle() {
@@ -1241,7 +765,7 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]), $align = react.useMemo(() => _getArrayProp(align), [align]);
   let children = childrenProp;
   return textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$2, { children }) : children = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), /* @__PURE__ */ jsxRuntime.jsx(
     Root$C,
@@ -1249,9 +773,9 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
       "data-ui": "Label",
       ...restProps,
       $accent: accent,
-      $align: useArrayProp(align),
+      $align,
+      $size,
       $muted: muted,
-      $size: useArrayProp(size2),
       $weight: weight,
       ref,
       children
@@ -1410,7 +934,7 @@ const Root$B = styledComponents.styled.div(
     status = "online",
     size: sizeProp = 1,
     ...restProps
-  } = props, { avatar } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
+  } = props, { avatar } = useTheme_v2(), as = reactIs.isValidElementType(asProp) ? asProp : "div", size2 = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(
     animateArrowFrom || arrowPositionProp || "inside"
   ), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   react.useEffect(() => {
@@ -1422,10 +946,7 @@ const Root$B = styledComponents.styled.div(
   }, [src]);
   const handleImageError = react.useCallback(() => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, [onImageLoadError]), initialsSize = react.useMemo(
-    () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
-    [size2]
-  );
+  }, [onImageLoadError]), initialsSize = size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Root$B,
     {
@@ -1520,11 +1041,8 @@ const Root$A = styledComponents.styled.div(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle
 ), AvatarCounter = react.forwardRef(function(props, ref) {
-  const { count, size: sizeProp = 1 } = props, size2 = useArrayProp(sizeProp), fontSize2 = react.useMemo(
-    () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
-    [size2]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
+  const { count, size: size2 } = props, $size = _getArrayProp(size2 != null ? size2 : 1), fontSize2 = $size.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
 }), BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
@@ -1556,10 +1074,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
-  } = props, children = react.useMemo(
-    () => react.Children.toArray(childrenProp).filter(react.isValidElement),
-    [childrenProp]
-  ), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+  } = props, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
   return /* @__PURE__ */ jsxRuntime.jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
@@ -1601,38 +1116,38 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
     rowEnd,
     sizing,
     ...restProps
-  } = props;
+  } = props, $column = react.useMemo(() => _getArrayProp(column), [column]), $columnStart = react.useMemo(() => _getArrayProp(columnStart), [columnStart]), $columnEnd = react.useMemo(() => _getArrayProp(columnEnd), [columnEnd]), $display = react.useMemo(() => _getArrayProp(display), [display]), $flex = react.useMemo(() => _getArrayProp(flex), [flex]), $height = react.useMemo(() => _getArrayProp(height), [height]), $margin = react.useMemo(() => _getArrayProp(margin), [margin]), $marginX = react.useMemo(() => _getArrayProp(marginX), [marginX]), $marginY = react.useMemo(() => _getArrayProp(marginY), [marginY]), $marginTop = react.useMemo(() => _getArrayProp(marginTop), [marginTop]), $marginRight = react.useMemo(() => _getArrayProp(marginRight), [marginRight]), $marginBottom = react.useMemo(() => _getArrayProp(marginBottom), [marginBottom]), $marginLeft = react.useMemo(() => _getArrayProp(marginLeft), [marginLeft]), $overflow = react.useMemo(() => _getArrayProp(overflow), [overflow]), $padding = react.useMemo(() => _getArrayProp(padding), [padding]), $paddingX = react.useMemo(() => _getArrayProp(paddingX), [paddingX]), $paddingY = react.useMemo(() => _getArrayProp(paddingY), [paddingY]), $paddingTop = react.useMemo(() => _getArrayProp(paddingTop), [paddingTop]), $paddingRight = react.useMemo(() => _getArrayProp(paddingRight), [paddingRight]), $paddingBottom = react.useMemo(() => _getArrayProp(paddingBottom), [paddingBottom]), $paddingLeft = react.useMemo(() => _getArrayProp(paddingLeft), [paddingLeft]), $row = react.useMemo(() => _getArrayProp(row), [row]), $rowStart = react.useMemo(() => _getArrayProp(rowStart), [rowStart]), $rowEnd = react.useMemo(() => _getArrayProp(rowEnd), [rowEnd]), $sizing = react.useMemo(() => _getArrayProp(sizing), [sizing]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$y,
     {
       "data-as": typeof asProp == "string" ? asProp : void 0,
       "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,
+      $columnStart,
+      $columnEnd,
+      $display,
+      $flex,
+      $height,
+      $margin,
+      $marginX,
+      $marginY,
+      $marginTop,
+      $marginRight,
+      $marginBottom,
+      $marginLeft,
+      $overflow,
+      $padding,
+      $paddingX,
+      $paddingY,
+      $paddingTop,
+      $paddingRight,
+      $paddingBottom,
+      $paddingLeft,
+      $row,
+      $rowStart,
+      $rowEnd,
+      $sizing,
       as: asProp,
       ref,
       children: props.children
@@ -1722,7 +1237,7 @@ const Root$x = styledComponents.styled.div(
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]), $align = react.useMemo(() => _getArrayProp(align), [align]);
   let children = childrenProp;
   return textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$1, { children })), /* @__PURE__ */ jsxRuntime.jsx(
     Root$x,
@@ -1730,10 +1245,10 @@ const Root$x = styledComponents.styled.div(
       "data-ui": "Text",
       ...restProps,
       $accent: accent,
-      $align: useArrayProp(align),
+      $align,
+      $size,
       $muted: muted,
       ref,
-      $size: useArrayProp(size2),
       $weight: weight,
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { children })
     }
@@ -1765,15 +1280,15 @@ const Root$w = styledComponents.styled(Box)(
     radius = "full",
     tone = "default",
     ...restProps
-  } = props;
+  } = props, $radius = react.useMemo(() => _getArrayProp(radius), [radius]), $padding = react.useMemo(() => _getArrayProp(padding), [padding]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$w,
     {
       "data-ui": "Badge",
       ...restProps,
       $tone: tone,
-      $radius: useArrayProp(radius),
-      padding: useArrayProp(padding),
+      $radius,
+      padding: $padding,
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children })
     }
@@ -1782,17 +1297,17 @@ const Root$w = styledComponents.styled(Box)(
   flexItemStyle,
   responsiveFlexStyle
 ), Flex = react.forwardRef(function(props, ref) {
-  const { align, as, direction = "row", gap, justify, wrap, ...restProps } = props;
+  const { align, as, direction = "row", gap, justify, wrap, ...restProps } = props, $align = react.useMemo(() => _getArrayProp(align), [align]), $direction = react.useMemo(() => _getArrayProp(direction), [direction]), $gap = react.useMemo(() => _getArrayProp(gap), [gap]), $justify = react.useMemo(() => _getArrayProp(justify), [justify]), $wrap = react.useMemo(() => _getArrayProp(wrap), [wrap]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$v,
     {
       "data-ui": "Flex",
       ...restProps,
-      $align: useArrayProp(align),
-      $direction: useArrayProp(direction),
-      $gap: useArrayProp(gap),
-      $justify: useArrayProp(justify),
-      $wrap: useArrayProp(wrap),
+      $align,
+      $direction,
+      $gap,
+      $justify,
+      $wrap,
       forwardedAs: as,
       ref
     }
@@ -2010,7 +1525,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     muted = !1,
     width,
     ...restProps
-  } = props, { button } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), boxProps = react.useMemo(
+  } = props, { button } = useTheme_v2(), justify = react.useMemo(() => _getArrayProp(justifyProp), [justifyProp]), padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), paddingX = react.useMemo(() => _getArrayProp(paddingXProp), [paddingXProp]), paddingY = react.useMemo(() => _getArrayProp(paddingYProp), [paddingYProp]), paddingTop = react.useMemo(() => _getArrayProp(paddingTopProp), [paddingTopProp]), paddingBottom = react.useMemo(() => _getArrayProp(paddingBottomProp), [paddingBottomProp]), paddingLeft = react.useMemo(() => _getArrayProp(paddingLeftProp), [paddingLeftProp]), paddingRight = react.useMemo(() => _getArrayProp(paddingRightProp), [paddingRightProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), space = react.useMemo(() => _getArrayProp(spaceProp), [spaceProp]), boxProps = react.useMemo(
     () => ({
       // flex: 1,
       padding,
@@ -2042,7 +1557,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
         (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
           IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconComponent) && IconComponent,
-            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+            reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsxRuntime.jsx(
             Text,
@@ -2057,187 +1572,653 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
           ),
           IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconRightComponent) && IconRightComponent,
-            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+            reactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] })
         ] }) }),
         children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children })
       ]
     }
-  );
+  );
+});
+function cardStyle(props) {
+  return [cardBaseStyle(props), cardColorStyle(props)];
+}
+function cardBaseStyle(props) {
+  const { $checkered } = props, { space } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    ${$checkered && styledComponents.css`
+      background-size: ${space[3]}px ${space[3]}px;
+      background-position: 50% 50%;
+      background-image: var(--card-bg-image);
+    `}
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      outline: none;
+      text-decoration: none;
+    }
+
+    /* &:is(pre) */
+    &[data-as='pre'] {
+      font: inherit;
+    }
+  `;
+}
+function cardColorStyle(props) {
+  var _a;
+  const { $checkered, $focusRing, $muted } = props, { card, color, style } = theme.getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
+  return styledComponents.css`
+    color-scheme: ${color._dark ? "dark" : "light"};
+
+    ${_cardColorStyle(color, color, $checkered)}
+
+    background-color: ${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};
+    color: var(--card-fg-color);
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      --card-focus-ring-box-shadow: none;
+
+      cursor: default;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &:disabled {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not(:disabled) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
+        }
+      }
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      cursor: pointer;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &[data-disabled] {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
+        }
+      }
+    }
+
+    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+  `;
+}
+const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+  const {
+    __unstable_checkered: checkered = !1,
+    __unstable_focusRing: focusRing = !1,
+    as: asProp,
+    border: border2,
+    borderTop: borderTop2,
+    borderRight: borderRight2,
+    borderBottom: borderBottom2,
+    borderLeft: borderLeft2,
+    muted,
+    pressed,
+    radius = 0,
+    scheme,
+    selected,
+    shadow,
+    tone: toneProp = "default",
+    ...restProps
+  } = props, as = reactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, $border = react.useMemo(() => _getArrayProp(border2), [border2]), $borderTop = react.useMemo(() => _getArrayProp(borderTop2), [borderTop2]), $borderRight = react.useMemo(() => _getArrayProp(borderRight2), [borderRight2]), $borderBottom = react.useMemo(() => _getArrayProp(borderBottom2), [borderBottom2]), $borderLeft = react.useMemo(() => _getArrayProp(borderLeft2), [borderLeft2]), $radius = react.useMemo(() => _getArrayProp(radius), [radius]), $shadow = react.useMemo(() => _getArrayProp(shadow), [shadow]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Root$s,
+    {
+      "data-as": typeof as == "string" ? as : void 0,
+      "data-scheme": rootTheme.scheme,
+      "data-ui": "Card",
+      "data-tone": tone,
+      ...restProps,
+      $border,
+      $borderTop,
+      $borderRight,
+      $borderBottom,
+      $borderLeft,
+      $radius,
+      $shadow,
+      $checkered: checkered,
+      $focusRing: focusRing,
+      $muted: muted,
+      $tone: tone,
+      "data-checkered": checkered ? "" : void 0,
+      "data-pressed": pressed ? "" : void 0,
+      "data-selected": selected ? "" : void 0,
+      forwardedAs: as,
+      ref,
+      selected
+    }
+  ) });
 });
-function cardStyle(props) {
-  return [cardBaseStyle(props), cardColorStyle(props)];
+function useArrayProp(val, defaultVal) {
+  return react.useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val]);
 }
-function cardBaseStyle(props) {
-  const { $checkered } = props, { space } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    ${$checkered && styledComponents.css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
-
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
+function _getElements(element, elementsArg) {
+  const ret = [element];
+  for (const el of elementsArg)
+    Array.isArray(el) ? ret.push(...el) : ret.push(el);
+  return ret.filter(Boolean);
+}
+function useClickOutside(listener, elementsArg = EMPTY_ARRAY, boundaryElement) {
+  const [element, setElement] = react.useState(null), [elements, setElements] = react.useState(() => _getElements(element, elementsArg)), elementsRef = react.useRef(elements);
+  return react.useEffect(() => {
+    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
+    if (prevElements.length !== nextElements.length) {
+      setElements(nextElements), elementsRef.current = nextElements;
+      return;
     }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
+    for (const el of prevElements)
+      if (!nextElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+    for (const el of nextElements)
+      if (!prevElements.includes(el)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+  }, [element, elementsArg]), react.useEffect(() => {
+    if (!listener) return;
+    const handleWindowMouseDown = (evt) => {
+      const target = evt.target;
+      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
+        for (const el of elements)
+          if (target === el || el.contains(target))
+            return;
+        listener(evt);
+      }
+    };
+    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
+      window.removeEventListener("mousedown", handleWindowMouseDown);
+    };
+  }, [boundaryElement, listener, elements]), setElement;
+}
+var resizeObservers = [], hasActiveObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.activeTargets.length > 0;
+  });
+}, hasSkippedObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.skippedTargets.length > 0;
+  });
+}, msg = "ResizeObserver loop completed with undelivered notifications.", deliverResizeLoopError = function() {
+  var event;
+  typeof ErrorEvent == "function" ? event = new ErrorEvent("error", {
+    message: msg
+  }) : (event = document.createEvent("Event"), event.initEvent("error", !1, !1), event.message = msg), window.dispatchEvent(event);
+}, ResizeObserverBoxOptions;
+(function(ResizeObserverBoxOptions2) {
+  ResizeObserverBoxOptions2.BORDER_BOX = "border-box", ResizeObserverBoxOptions2.CONTENT_BOX = "content-box", ResizeObserverBoxOptions2.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
+})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+var freeze = function(obj) {
+  return Object.freeze(obj);
+}, ResizeObserverSize = /* @__PURE__ */ function() {
+  function ResizeObserverSize2(inlineSize, blockSize) {
+    this.inlineSize = inlineSize, this.blockSize = blockSize, freeze(this);
+  }
+  return ResizeObserverSize2;
+}(), DOMRectReadOnly = function() {
+  function DOMRectReadOnly2(x, y, width, height) {
+    return this.x = x, this.y = y, this.width = width, this.height = height, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, freeze(this);
+  }
+  return DOMRectReadOnly2.prototype.toJSON = function() {
+    var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
+    return { x, y, top, right, bottom, left, width, height };
+  }, DOMRectReadOnly2.fromRect = function(rectangle) {
+    return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+  }, DOMRectReadOnly2;
+}(), isSVG = function(target) {
+  return target instanceof SVGElement && "getBBox" in target;
+}, isHidden = function(target) {
+  if (isSVG(target)) {
+    var _a = target.getBBox(), width = _a.width, height = _a.height;
+    return !width && !height;
+  }
+  var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
+  return !(offsetWidth || offsetHeight || target.getClientRects().length);
+}, isElement = function(obj) {
+  var _a;
+  if (obj instanceof Element)
+    return !0;
+  var scope = (_a = obj == null ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  return !!(scope && obj instanceof scope.Element);
+}, isReplacedElement = function(target) {
+  switch (target.tagName) {
+    case "INPUT":
+      if (target.type !== "image")
+        break;
+    case "VIDEO":
+    case "AUDIO":
+    case "EMBED":
+    case "OBJECT":
+    case "CANVAS":
+    case "IFRAME":
+    case "IMG":
+      return !0;
+  }
+  return !1;
+}, global$1 = typeof window < "u" ? window : {}, cache = /* @__PURE__ */ new WeakMap(), scrollRegexp = /auto|scroll/, verticalRegexp = /^tb|vertical/, IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent), parseDimension = function(pixel) {
+  return parseFloat(pixel || "0");
+}, size$1 = function(inlineSize, blockSize, switchSizes) {
+  return inlineSize === void 0 && (inlineSize = 0), blockSize === void 0 && (blockSize = 0), switchSizes === void 0 && (switchSizes = !1), new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
+}, zeroBoxes = freeze({
+  devicePixelContentBoxSize: size$1(),
+  borderBoxSize: size$1(),
+  contentBoxSize: size$1(),
+  contentRect: new DOMRectReadOnly(0, 0, 0, 0)
+}), calculateBoxSizes = function(target, forceRecalculation) {
+  if (forceRecalculation === void 0 && (forceRecalculation = !1), cache.has(target) && !forceRecalculation)
+    return cache.get(target);
+  if (isHidden(target))
+    return cache.set(target, zeroBoxes), zeroBoxes;
+  var cs = getComputedStyle(target), svg = isSVG(target) && target.ownerSVGElement && target.getBBox(), removePadding = !IE && cs.boxSizing === "border-box", switchSizes = verticalRegexp.test(cs.writingMode || ""), canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""), canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""), paddingTop = svg ? 0 : parseDimension(cs.paddingTop), paddingRight = svg ? 0 : parseDimension(cs.paddingRight), paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom), paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft), borderTop2 = svg ? 0 : parseDimension(cs.borderTopWidth), borderRight2 = svg ? 0 : parseDimension(cs.borderRightWidth), borderBottom2 = svg ? 0 : parseDimension(cs.borderBottomWidth), borderLeft2 = svg ? 0 : parseDimension(cs.borderLeftWidth), horizontalPadding = paddingLeft + paddingRight, verticalPadding = paddingTop + paddingBottom, horizontalBorderArea = borderLeft2 + borderRight2, verticalBorderArea = borderTop2 + borderBottom2, horizontalScrollbarThickness = canScrollHorizontally ? target.offsetHeight - verticalBorderArea - target.clientHeight : 0, verticalScrollbarThickness = canScrollVertically ? target.offsetWidth - horizontalBorderArea - target.clientWidth : 0, widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0, heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0, contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness, contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness, borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea, borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea, boxes = freeze({
+    devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+    borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
+    contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
+    contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
+  });
+  return cache.set(target, boxes), boxes;
+}, calculateBoxSize = function(target, observedBox, forceRecalculation) {
+  var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+  switch (observedBox) {
+    case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
+      return devicePixelContentBoxSize;
+    case ResizeObserverBoxOptions.BORDER_BOX:
+      return borderBoxSize;
+    default:
+      return contentBoxSize;
+  }
+}, ResizeObserverEntry = /* @__PURE__ */ function() {
+  function ResizeObserverEntry2(target) {
+    var boxes = calculateBoxSizes(target);
+    this.target = target, this.contentRect = boxes.contentRect, this.borderBoxSize = freeze([boxes.borderBoxSize]), this.contentBoxSize = freeze([boxes.contentBoxSize]), this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
+  }
+  return ResizeObserverEntry2;
+}(), calculateDepthForNode = function(node) {
+  if (isHidden(node))
+    return 1 / 0;
+  for (var depth = 0, parent = node.parentNode; parent; )
+    depth += 1, parent = parent.parentNode;
+  return depth;
+}, broadcastActiveObservations = function() {
+  var shallowestDepth = 1 / 0, callbacks2 = [];
+  resizeObservers.forEach(function(ro) {
+    if (ro.activeTargets.length !== 0) {
+      var entries = [];
+      ro.activeTargets.forEach(function(ot) {
+        var entry = new ResizeObserverEntry(ot.target), targetDepth = calculateDepthForNode(ot.target);
+        entries.push(entry), ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox), targetDepth < shallowestDepth && (shallowestDepth = targetDepth);
+      }), callbacks2.push(function() {
+        ro.callback.call(ro.observer, entries, ro.observer);
+      }), ro.activeTargets.splice(0, ro.activeTargets.length);
+    }
+  });
+  for (var _i = 0, callbacks_1 = callbacks2; _i < callbacks_1.length; _i++) {
+    var callback = callbacks_1[_i];
+    callback();
+  }
+  return shallowestDepth;
+}, gatherActiveObservationsAtDepth = function(depth) {
+  resizeObservers.forEach(function(ro) {
+    ro.activeTargets.splice(0, ro.activeTargets.length), ro.skippedTargets.splice(0, ro.skippedTargets.length), ro.observationTargets.forEach(function(ot) {
+      ot.isActive() && (calculateDepthForNode(ot.target) > depth ? ro.activeTargets.push(ot) : ro.skippedTargets.push(ot));
+    });
+  });
+}, process = function() {
+  var depth = 0;
+  for (gatherActiveObservationsAtDepth(depth); hasActiveObservations(); )
+    depth = broadcastActiveObservations(), gatherActiveObservationsAtDepth(depth);
+  return hasSkippedObservations() && deliverResizeLoopError(), depth > 0;
+}, trigger, callbacks = [], notify = function() {
+  return callbacks.splice(0).forEach(function(cb) {
+    return cb();
+  });
+}, queueMicroTask = function(callback) {
+  if (!trigger) {
+    var toggle_1 = 0, el_1 = document.createTextNode(""), config = { characterData: !0 };
+    new MutationObserver(function() {
+      return notify();
+    }).observe(el_1, config), trigger = function() {
+      el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
+    };
+  }
+  callbacks.push(callback), trigger();
+}, queueResizeObserver = function(cb) {
+  queueMicroTask(function() {
+    requestAnimationFrame(cb);
+  });
+}, watching = 0, isWatching = function() {
+  return !!watching;
+}, CATCH_PERIOD = 250, observerConfig = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, events = [
+  "resize",
+  "load",
+  "transitionend",
+  "animationend",
+  "animationstart",
+  "animationiteration",
+  "keyup",
+  "keydown",
+  "mouseup",
+  "mousedown",
+  "mouseover",
+  "mouseout",
+  "blur",
+  "focus"
+], time = function(timeout) {
+  return timeout === void 0 && (timeout = 0), Date.now() + timeout;
+}, scheduled = !1, Scheduler = function() {
+  function Scheduler2() {
+    var _this = this;
+    this.stopped = !0, this.listener = function() {
+      return _this.schedule();
+    };
+  }
+  return Scheduler2.prototype.run = function(timeout) {
+    var _this = this;
+    if (timeout === void 0 && (timeout = CATCH_PERIOD), !scheduled) {
+      scheduled = !0;
+      var until = time(timeout);
+      queueResizeObserver(function() {
+        var elementsHaveResized = !1;
+        try {
+          elementsHaveResized = process();
+        } finally {
+          if (scheduled = !1, timeout = until - time(), !isWatching())
+            return;
+          elementsHaveResized ? _this.run(1e3) : timeout > 0 ? _this.run(timeout) : _this.start();
+        }
+      });
     }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
+  }, Scheduler2.prototype.schedule = function() {
+    this.stop(), this.run();
+  }, Scheduler2.prototype.observe = function() {
+    var _this = this, cb = function() {
+      return _this.observer && _this.observer.observe(document.body, observerConfig);
+    };
+    document.body ? cb() : global$1.addEventListener("DOMContentLoaded", cb);
+  }, Scheduler2.prototype.start = function() {
+    var _this = this;
+    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), events.forEach(function(name) {
+      return global$1.addEventListener(name, _this.listener, !0);
+    }));
+  }, Scheduler2.prototype.stop = function() {
+    var _this = this;
+    this.stopped || (this.observer && this.observer.disconnect(), events.forEach(function(name) {
+      return global$1.removeEventListener(name, _this.listener, !0);
+    }), this.stopped = !0);
+  }, Scheduler2;
+}(), scheduler = new Scheduler(), updateCount = function(n) {
+  !watching && n > 0 && scheduler.start(), watching += n, !watching && scheduler.stop();
+}, skipNotifyOnElement = function(target) {
+  return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
+}, ResizeObservation = function() {
+  function ResizeObservation2(target, observedBox) {
+    this.target = target, this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX, this.lastReportedSize = {
+      inlineSize: 0,
+      blockSize: 0
+    };
+  }
+  return ResizeObservation2.prototype.isActive = function() {
+    var size2 = calculateBoxSize(this.target, this.observedBox, !0);
+    return skipNotifyOnElement(this.target) && (this.lastReportedSize = size2), this.lastReportedSize.inlineSize !== size2.inlineSize || this.lastReportedSize.blockSize !== size2.blockSize;
+  }, ResizeObservation2;
+}(), ResizeObserverDetail = /* @__PURE__ */ function() {
+  function ResizeObserverDetail2(resizeObserver, callback) {
+    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = resizeObserver, this.callback = callback;
+  }
+  return ResizeObserverDetail2;
+}(), observerMap = /* @__PURE__ */ new WeakMap(), getObservationIndex = function(observationTargets, target) {
+  for (var i = 0; i < observationTargets.length; i += 1)
+    if (observationTargets[i].target === target)
+      return i;
+  return -1;
+}, ResizeObserverController = function() {
+  function ResizeObserverController2() {
+  }
+  return ResizeObserverController2.connect = function(resizeObserver, callback) {
+    var detail = new ResizeObserverDetail(resizeObserver, callback);
+    observerMap.set(resizeObserver, detail);
+  }, ResizeObserverController2.observe = function(resizeObserver, target, options) {
+    var detail = observerMap.get(resizeObserver), firstObservation = detail.observationTargets.length === 0;
+    getObservationIndex(detail.observationTargets, target) < 0 && (firstObservation && resizeObservers.push(detail), detail.observationTargets.push(new ResizeObservation(target, options && options.box)), updateCount(1), scheduler.schedule());
+  }, ResizeObserverController2.unobserve = function(resizeObserver, target) {
+    var detail = observerMap.get(resizeObserver), index = getObservationIndex(detail.observationTargets, target), lastObservation = detail.observationTargets.length === 1;
+    index >= 0 && (lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1), detail.observationTargets.splice(index, 1), updateCount(-1));
+  }, ResizeObserverController2.disconnect = function(resizeObserver) {
+    var _this = this, detail = observerMap.get(resizeObserver);
+    detail.observationTargets.slice().forEach(function(ot) {
+      return _this.unobserve(resizeObserver, ot.target);
+    }), detail.activeTargets.splice(0, detail.activeTargets.length);
+  }, ResizeObserverController2;
+}(), ResizeObserver = function() {
+  function ResizeObserver2(callback) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (typeof callback != "function")
+      throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
+    ResizeObserverController.connect(this, callback);
+  }
+  return ResizeObserver2.prototype.observe = function(target, options) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (!isElement(target))
+      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
+    ResizeObserverController.observe(this, target, options);
+  }, ResizeObserver2.prototype.unobserve = function(target) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (!isElement(target))
+      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
+    ResizeObserverController.unobserve(this, target);
+  }, ResizeObserver2.prototype.disconnect = function() {
+    ResizeObserverController.disconnect(this);
+  }, ResizeObserver2.toString = function() {
+    return "function ResizeObserver () { [polyfill code] }";
+  }, ResizeObserver2;
+}();
+const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
+function _createElementRectValueListener() {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver = new _ResizeObserver(([entry]) => {
+        subscriber({
+          _contentRect: entry.contentRect,
+          border: {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize
+          },
+          content: {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          }
+        });
+      });
+      return resizeObserver.observe(element), () => {
+        resizeObserver.unobserve(element), resizeObserver.disconnect();
+      };
     }
-  `;
+  };
 }
-function cardColorStyle(props) {
-  var _a;
-  const { $checkered, $focusRing, $muted } = props, { card, color, style } = theme.getTheme_v2(props.theme), border2 = { width: card.border.width, color: "var(--card-border-color)" };
-  return styledComponents.css`
-    color-scheme: ${color._dark ? "dark" : "light"};
-
-    ${_cardColorStyle(color, color, $checkered)}
-
-    background-color: ${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};
-    color: var(--card-fg-color);
-
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
-
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
-        }
-      }
+function _createElementSizeObserver() {
+  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
+  return {
+    subscribe(element, subscriber) {
+      const subscribers = subscribersCache.get(element) || [];
+      let dispose = disposeCache.get(element);
+      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
+        for (const sub of subscribers)
+          sub(elementRect);
+      })), subscribers.push(subscriber), () => {
+        const idx = subscribers.indexOf(subscriber);
+        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
+      };
     }
-
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
-
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
-
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
-
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
-
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({ base: color, border: border2, focusRing: card.focusRing }) : void 0};
-        }
+  };
+}
+function useElementSize(element) {
+  const [size2, setSize] = react.useState(null);
+  return react.useEffect(() => {
+    if (element)
+      return _elementSizeObserver.subscribe(element, setSize);
+  }, [element]), size2;
+}
+function useElementRect(element) {
+  const elementSize = useElementSize(element);
+  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
+}
+function useGlobalKeyDown(onKeyDown) {
+  return react.useEffect(() => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), [onKeyDown]);
+}
+const MEDIA_STORE_CACHE = /* @__PURE__ */ new WeakMap();
+function _getMediaQuery(media, index) {
+  return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
+}
+function _createMediaStore(media) {
+  const mediaLen = media.length;
+  let sizes;
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = [];
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index);
+        sizes.push({ index, mq: window.matchMedia(mediaQuery) });
       }
     }
-
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
-  `;
-}
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
-  const {
-    __unstable_checkered: checkered = !1,
-    __unstable_focusRing: focusRing = !1,
-    as: asProp,
-    border: border2,
-    borderTop: borderTop2,
-    borderRight: borderRight2,
-    borderBottom: borderBottom2,
-    borderLeft: borderLeft2,
-    muted,
-    pressed,
-    radius = 0,
-    scheme,
-    selected,
-    shadow,
-    tone: toneProp = "default",
-    ...restProps
-  } = props, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsxRuntime.jsx(
-    Root$s,
-    {
-      "data-as": typeof as == "string" ? as : void 0,
-      "data-scheme": rootTheme.scheme,
-      "data-ui": "Card",
-      "data-tone": tone,
-      ...restProps,
-      $border: useArrayProp(border2),
-      $borderTop: useArrayProp(borderTop2),
-      $borderRight: useArrayProp(borderRight2),
-      $borderBottom: useArrayProp(borderBottom2),
-      $borderLeft: useArrayProp(borderLeft2),
-      $checkered: checkered,
-      $focusRing: focusRing,
-      $muted: muted,
-      $radius: useArrayProp(radius),
-      $shadow: useArrayProp(shadow),
-      $tone: tone,
-      "data-checkered": checkered ? "" : void 0,
-      "data-pressed": pressed ? "" : void 0,
-      "data-selected": selected ? "" : void 0,
-      forwardedAs: as,
-      ref,
-      selected
+    return sizes;
+  };
+  return { getSnapshot: () => {
+    for (const { index, mq } of getSizes())
+      if (mq.matches) return index;
+    return 0;
+  }, subscribe: (onStoreChange) => {
+    const disposeFns = [];
+    for (const { mq } of getSizes()) {
+      const handleChange = () => {
+        mq.matches && onStoreChange();
+      };
+      mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
     }
-  ) });
-});
+    return () => {
+      for (const disposeFn of disposeFns)
+        disposeFn();
+    };
+  } };
+}
+function getServerSnapshot$2() {
+  return 0;
+}
+function useMediaIndex() {
+  const { media } = useTheme_v2();
+  let store = MEDIA_STORE_CACHE.get(media);
+  return store || (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store)), react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot$2);
+}
+let MEDIA_QUERY_CACHE$1;
+function getMatchMedia$1() {
+  return MEDIA_QUERY_CACHE$1 || (MEDIA_QUERY_CACHE$1 = window.matchMedia("(prefers-color-scheme: dark)")), MEDIA_QUERY_CACHE$1;
+}
+function subscribe$2(onStoreChange) {
+  const matchMedia = getMatchMedia$1();
+  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+}
+function getSnapshot$1() {
+  return getMatchMedia$1().matches;
+}
+function getServerSnapshot$1() {
+  return !1;
+}
+function usePrefersDark() {
+  return react.useSyncExternalStore(subscribe$2, getSnapshot$1, getServerSnapshot$1);
+}
+let MEDIA_QUERY_CACHE;
+function getMatchMedia() {
+  return MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia("(prefers-reduced-motion: reduce)")), MEDIA_QUERY_CACHE;
+}
+function subscribe$1(onStoreChange) {
+  const matchMedia = getMatchMedia();
+  return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+}
+function getSnapshot() {
+  return getMatchMedia().matches;
+}
+function getServerSnapshot() {
+  return !1;
+}
+function usePrefersReducedMotion() {
+  return react.useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
+}
+function useForwardedRef(ref) {
+  const innerRef = react.useRef(null);
+  return react.useImperativeHandle(ref, () => innerRef.current), innerRef;
+}
+function useCustomValidity(ref, customValidity) {
+  react.useEffect(() => {
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+  }, [customValidity, ref]);
+}
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2466,8 +2447,8 @@ function codeBaseStyle() {
   `;
 }
 const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
-  const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: useArrayProp(size2), $weight: weight, ref, children: [
+  const { children, language: languageProp, size: size2 = 2, weight, ...restProps } = props, language = typeof languageProp == "string" ? languageProp : void 0, registered = language ? Refractor__default.default.hasLanguage(language) : !1, $size = react.useMemo(() => _getArrayProp(size2), [size2]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size, $weight: weight, ref, children: [
     !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }),
     language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) })
   ] });
@@ -2488,33 +2469,24 @@ const Root$p = styledComponents.styled(Box)(
   containerBaseStyle,
   responsiveContainerWidthStyle
 ), Container = react.forwardRef(function(props, ref) {
-  const { as, width = 2, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Root$p,
-    {
-      "data-ui": "Container",
-      ...restProps,
-      $width: useArrayProp(width),
-      forwardedAs: as,
-      ref
-    }
-  );
+  const { as, width = 2, ...restProps } = props, $width = react.useMemo(() => _getArrayProp(width), [width]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width, forwardedAs: as, ref });
 }), Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
-  const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props;
+  const { as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps } = props, $autoRows = react.useMemo(() => _getArrayProp(autoRows), [autoRows]), $autoCols = react.useMemo(() => _getArrayProp(autoCols), [autoCols]), $autoFlow = react.useMemo(() => _getArrayProp(autoFlow), [autoFlow]), $columns = react.useMemo(() => _getArrayProp(columns), [columns]), $gap = react.useMemo(() => _getArrayProp(gap), [gap]), $gapX = react.useMemo(() => _getArrayProp(gapX), [gapX]), $gapY = react.useMemo(() => _getArrayProp(gapY), [gapY]), $rows = react.useMemo(() => _getArrayProp(rows), [rows]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$o,
     {
       "data-as": typeof as == "string" ? as : void 0,
       "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,
+      $autoCols,
+      $autoFlow,
+      $columns,
+      $gap,
+      $gapX,
+      $gapY,
+      $rows,
       forwardedAs: as,
       ref,
       children
@@ -2591,7 +2563,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]), $align = react.useMemo(() => _getArrayProp(align), [align]);
   let children = childrenProp;
   return textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children })), /* @__PURE__ */ jsxRuntime.jsx(
     Root$n,
@@ -2599,9 +2571,9 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
       "data-ui": "Heading",
       ...restProps,
       $accent: accent,
-      $align: useArrayProp(align),
+      $align,
+      $size,
       $muted: muted,
-      $size: useArrayProp(size2),
       $weight: weight,
       ref,
       children: /* @__PURE__ */ jsxRuntime.jsx("span", { children })
@@ -2631,7 +2603,7 @@ function inlineSpaceStyle(props) {
   });
 }
 const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
-  const { as, children: childrenProp, space, ...restProps } = props, children = react.useMemo(
+  const { as, children: childrenProp, space, ...restProps } = props, $space = react.useMemo(() => _getArrayProp(space), [space]), children = react.useMemo(
     () => react.Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child })),
     [childrenProp]
   );
@@ -2640,7 +2612,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
     {
       "data-ui": "Inline",
       ...restProps,
-      $space: useArrayProp(space),
+      $space,
       forwardedAs: as,
       ref,
       children
@@ -2665,8 +2637,8 @@ function kbdStyle() {
   `;
 }
 const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
-  const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: useArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
+  const { children, fontSize: fontSize2 = 0, padding = 1, radius = 2, ...restProps } = props, $radius = react.useMemo(() => _getArrayProp(radius), [radius]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
 }), origin = {
   name: "@sanity/ui/origin",
   fn({ middlewareData, placement, rects }) {
@@ -2849,10 +2821,10 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const theme2 = useTheme_v2(), { children, media = theme2.media, ...restProps } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
+  const theme2 = useTheme_v2(), { children, media: _media, ...restProps } = props, media = _media != null ? _media : theme2.media, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => {
     var _a;
     return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  }, [elementSize]), max = findMaxBreakpoints(media, width), min = findMinBreakpoints(media, width);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const setRef = react.useCallback((el) => {
     ref.current = el, setElement(el);
@@ -2986,18 +2958,18 @@ function _isScrollable(el) {
 }
 function LayerProvider(props) {
   var _a;
-  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = react.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback(
+  const { children, zOffset: zOffsetProp = 0 } = props, parentContextValue = react.useContext(LayerContext), parentRegisterChild = react.useContext(LayerContextRegisterChild), parent = parentContextValue && getLayerContext(parentContextValue), level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [childLayers, setChildLayers] = react.useState({}), size2 = react.useMemo(() => Object.keys(childLayers).length, [childLayers]), isTopLayer = size2 === 0, registerChild = react.useCallback(
     (childLevel) => {
       const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
-      return childLevel !== void 0 ? setChildLayers((state) => {
+      return setChildLayers((state) => {
         var _a2;
-        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0, nextState = { ...state, [childLevel]: prevLen + 1 };
-        return setSize(Object.keys(nextState).length), nextState;
-      }) : setSize((v) => v + 1), () => {
-        childLevel !== void 0 ? setChildLayers((state) => {
+        const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0;
+        return { ...state, [childLevel]: prevLen + 1 };
+      }), () => {
+        setChildLayers((state) => {
           const nextState = { ...state };
-          return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
-        }) : setSize((v) => v - 1), parentDispose == null || parentDispose();
+          return nextState[childLevel] === 1 ? delete nextState[childLevel] : nextState[childLevel] -= 1, nextState;
+        }), parentDispose == null || parentDispose();
       };
     },
     [parentRegisterChild]
@@ -3008,15 +2980,14 @@ function LayerProvider(props) {
       version: 0,
       isTopLayer,
       level,
-      registerChild,
       size: size2,
       zIndex
     }),
-    [isTopLayer, level, registerChild, size2, zIndex]
+    [isTopLayer, level, size2, zIndex]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(LayerContextRegisterChild.Provider, { value: registerChild, children }) });
 }
-const Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
+const LayerContextRegisterChild = react.createContext(null), Root$j = styledComponents.styled.div({ position: "relative" }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
   const { children, onActivate, onFocus, style = EMPTY_RECORD, ...restProps } = props, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && (onActivate == null || onActivate({ activeElement: lastFocusedRef.current })), isTopLayerRef.current = isTopLayer;
@@ -3284,19 +3255,19 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
 PopoverCard.displayName = "PopoverCard";
 const Popover = react.memo(
   react.forwardRef(function(props, forwardedRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const { container, layer } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = !1,
       arrow: arrowProp = !1,
-      boundaryElement = boundaryElementContext.element,
-      children: childProp,
+      boundaryElement: _boundaryElement,
+      children: _children,
       constrainSize = !1,
       content,
       disabled,
-      fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
+      fallbackPlacements: _fallbackPlacements,
       matchReferenceWidth,
-      floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
+      floatingBoundary: _floatingBoundary,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onActivate,
       open,
@@ -3306,16 +3277,16 @@ const Popover = react.memo(
       portal,
       preventOverflow = !0,
       radius: radiusProp = 3,
-      referenceBoundary = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
+      referenceBoundary: _referenceBoundary,
       referenceElement,
       scheme,
       shadow: shadowProp = 3,
       tone = "inherit",
       width: widthProp = "auto",
-      zOffset: zOffsetProp = layer.popover.zOffset,
+      zOffset: _zOffset,
       updateRef,
       ...restProps
-    } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+    } = props, boundaryElement = _boundaryElement != null ? _boundaryElement : boundaryElementContext.element, referenceBoundary = (_a = _referenceBoundary != null ? _referenceBoundary : props.boundaryElement) != null ? _a : boundaryElementContext.element, floatingBoundary = (_b = _floatingBoundary != null ? _floatingBoundary : props.boundaryElement) != null ? _b : boundaryElementContext.element, fallbackPlacements = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS$1[(_c = props.placement) != null ? _c : "bottom"], zOffsetProp = _zOffset != null ? _zOffset : layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border, padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = react.useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = _getArrayProp(widthProp), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
     react.useImperativeHandle(
       forwardedRef,
       () => ref.current
@@ -3396,27 +3367,24 @@ const Popover = react.memo(
       middleware,
       placement: placementProp,
       whileElementsMounted: reactDom$1.autoUpdate
-    }), referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden, arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x, arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y, originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX, originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY, setArrow = react.useCallback((arrowEl) => {
+    }), referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden, arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x, arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y, originX = (_h = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _h.originX, originY = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originY, setArrow = react.useCallback((arrowEl) => {
       arrowRef.current = arrowEl;
     }, []), setFloating = react.useCallback(
       (node) => {
         ref.current = node, refs.setFloating(node);
       },
       [refs]
-    ), setReference = react.useCallback(
-      (node) => {
-        refs.setReference(node);
-        const childRef = childProp == null ? void 0 : childProp.ref;
-        typeof childRef == "function" ? childRef(node) : childRef && (childRef.current = node);
-      },
-      [childProp, refs]
-    ), child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, { ref: setReference }), [childProp, referenceElement, setReference]);
-    if (react.useEffect(() => {
-      updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-    }, [update, updateRef]), react.useEffect(() => {
-      child || refs.setReference(referenceElement || null);
-    }, [referenceElement, refs, child]), disabled)
-      return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+    );
+    react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
+      _children || refs.setReference(referenceElement || null);
+    }, [_children, referenceElement, refs]);
+    const children = react.useMemo(() => !_children || referenceElement ? null : react.cloneElement(_children, {
+      ref: (node) => {
+        logDeprecatedWarning(), refs.setReference(node);
+      }
+    }), [_children, referenceElement, refs]);
+    if (disabled)
+      return _children || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
     const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(
       PopoverCard,
       {
@@ -3450,22 +3418,26 @@ const Popover = react.memo(
         ConditionalWrapper,
         {
           condition: animate,
-          wrapper: (children) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }),
+          wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: children2 }),
           children: open && /* @__PURE__ */ jsxRuntime.jsx(
             ConditionalWrapper,
             {
               condition: !!portal,
-              wrapper: (children) => /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children }),
+              wrapper: (children2) => /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: children2 }),
               children: popover
             }
           )
         }
       ),
-      child
+      children
     ] });
   })
 );
 Popover.displayName = "Popover";
+let didWarn = !1;
+function logDeprecatedWarning() {
+  didWarn || (console.warn("Popover: Please use the `referenceElement` prop instead of passing a children."), didWarn = !0);
+}
 function radioBaseStyle() {
   return styledComponents.css`
     position: relative;
@@ -3741,20 +3713,22 @@ const selectStyle = {
     space = 3,
     ...restProps
   } = props, ref = react.useRef(null);
-  return react.useImperativeHandle(
+  react.useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
+  ), useCustomValidity(ref, customValidity);
+  const $fontSize = react.useMemo(() => _getArrayProp(fontSize2), [fontSize2]), $padding = react.useMemo(() => _getArrayProp(padding), [padding]), $radius = react.useMemo(() => _getArrayProp(radius), [radius]), $space = react.useMemo(() => _getArrayProp(space), [space]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$f, { "data-ui": "Select", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$3,
       {
         "data-read-only": !disabled && readOnly ? "" : void 0,
         "data-ui": "Select",
         ...restProps,
-        $fontSize: useArrayProp(fontSize2),
-        $padding: useArrayProp(padding),
-        $radius: useArrayProp(radius),
-        $space: useArrayProp(space),
+        $fontSize,
+        $padding,
+        $radius,
+        $space,
         disabled: disabled || readOnly,
         ref,
         children
@@ -3782,14 +3756,14 @@ function responsiveStackSpaceStyle(props) {
   }));
 }
 const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
-  const { as, space, ...restProps } = props;
+  const { as, space, ...restProps } = props, $space = react.useMemo(() => _getArrayProp(space), [space]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Root$e,
     {
       "data-as": typeof as == "string" ? as : void 0,
       "data-ui": "Stack",
       ...restProps,
-      $space: useArrayProp(space),
+      $space,
       forwardedAs: as,
       ref
     }
@@ -3984,10 +3958,12 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     weight,
     ...restProps
   } = props, ref = react.useRef(null), rootTheme = useRootTheme();
-  return react.useImperativeHandle(
+  react.useImperativeHandle(
     forwardedRef,
     () => ref.current
-  ), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+  ), useCustomValidity(ref, customValidity);
+  const $radius = react.useMemo(() => _getArrayProp(radius), [radius]), $fontSize = react.useMemo(() => _getArrayProp(fontSize2), [fontSize2]), $padding = react.useMemo(() => _getArrayProp(padding), [padding]), $space = react.useMemo(() => _getArrayProp(0), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Input$1,
       {
@@ -3995,10 +3971,10 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
         "data-scheme": rootTheme.scheme,
         "data-tone": rootTheme.tone,
         ...restProps,
-        $fontSize: useArrayProp(fontSize2),
-        $padding: useArrayProp(padding),
+        $fontSize,
+        $padding,
+        $space,
         $scheme: rootTheme.scheme,
-        $space: useArrayProp(0),
         $tone: rootTheme.tone,
         $weight: weight,
         disabled,
@@ -4008,7 +3984,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     /* @__PURE__ */ jsxRuntime.jsx(
       Presentation$1,
       {
-        $radius: useArrayProp(radius),
+        $radius,
         $scheme: rootTheme.scheme,
         $tone: rootTheme.tone,
         "data-border": border2 ? "" : void 0,
@@ -4082,7 +4058,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     type = "text",
     weight,
     ...restProps
-  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = react.useMemo(() => _getArrayProp(fontSizeProp), [fontSizeProp]), padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), space = react.useMemo(() => _getArrayProp(spaceProp), [spaceProp]), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   react.useImperativeHandle(
     forwardedRef,
     () => ref.current
@@ -4114,11 +4090,11 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
         children: [
           IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconComponent) && IconComponent,
-            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+            reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }) }),
           !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconRightComponent) && IconRightComponent,
-            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+            reactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] }) })
         ]
       }
@@ -4334,27 +4310,30 @@ const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
   max-width: ${({ $maxWidth }) => $maxWidth}px;
 `, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const boundaryElementContext = useBoundaryElement(), { layer } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  } = props, zOffset = _zOffset != null ? _zOffset : layer.tooltip.zOffset, fallbackPlacementsProp = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"], boundaryElement = _boundaryElement != null ? _boundaryElement : boundaryElementContext == null ? void 0 : boundaryElementContext.element, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = react.useMemo(
+    () => _getArrayProp(fallbackPlacementsProp),
+    [fallbackPlacementsProp]
+  ), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_b = portal.elements) == null ? void 0 : _b[portalProp]) || null : portal.element, documentBodyOffsetWidth = react.useSyncExternalStore(
     emptySubscribe,
     () => document.body.offsetWidth,
     // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
@@ -4385,7 +4364,7 @@ const Root$a = styledComponents.styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: reactDom$1.autoUpdate
-  }), arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x, arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y, originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX, originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback(
+  }), arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x, arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y, originX = (_e = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _e.originX, originY = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback(
     (open, immediate) => {
       if (isInsideGroup)
         if (open) {
@@ -4438,9 +4417,9 @@ const Root$a = styledComponents.styled(Layer)`
   );
   react.useEffect(() => {
     if (!showTooltip) return;
-    function handleWindowMouseMove(event) {
+    const handleWindowMouseMove = (event) => {
       referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || (handleIsOpenChange(!1), window.removeEventListener("mousemove", handleWindowMouseMove)));
-    }
+    };
     return window.addEventListener("mousemove", handleWindowMouseMove), () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
@@ -4643,37 +4622,34 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
     forwardedRef,
     () => inputElementRef.current
   );
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = _getArrayProp(paddingProp), currentOption = react.useMemo(
     () => value !== null ? options.find((o) => o.value === value) : void 0,
     [options, value]
   ), filteredOptions = react.useMemo(
     () => options.filter((option) => query ? filterOption(query, option) : !0),
     [filterOption, options, query]
-  ), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback(
-    (event) => {
-      setTimeout(() => {
-        if (popoverMouseWithinRef.current)
-          return;
-        const elements = (relatedElements || []).concat(
-          rootElementRef.current ? [rootElementRef.current] : [],
-          resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
-        );
-        let focusInside = !1;
-        if (document.activeElement) {
-          for (const e of elements)
-            if (e === document.activeElement || e.contains(document.activeElement)) {
-              focusInside = !0;
-              break;
-            }
-        }
-        focusInside === !1 && (dispatch({ type: "root/blur" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
-      }, 0);
-    },
-    [onBlur, onQueryChange, relatedElements]
-  ), handleRootFocus = react.useCallback((event) => {
+  ), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = (event) => {
+    setTimeout(() => {
+      if (popoverMouseWithinRef.current)
+        return;
+      const elements = (relatedElements || []).concat(
+        rootElementRef.current ? [rootElementRef.current] : [],
+        resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []
+      );
+      let focusInside = !1;
+      if (document.activeElement) {
+        for (const e of elements)
+          if (e === document.activeElement || e.contains(document.activeElement)) {
+            focusInside = !0;
+            break;
+          }
+      }
+      focusInside === !1 && (dispatch({ type: "root/blur" }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
+    }, 0);
+  }, handleRootFocus = (event) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event.target instanceof HTMLElement ? event.target : null, listFocused2 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || !1;
     listFocused2 !== listFocusedRef.current && (listFocusedRef.current = listFocused2, dispatch({ type: "root/setListFocused", listFocused: listFocused2 }));
-  }, []), handleOptionSelect = react.useCallback(
+  }, handleOptionSelect = react.useCallback(
     (v) => {
       var _a;
       dispatch({ type: "value/change", value: v }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), (_a = inputElementRef.current) == null || _a.focus();
@@ -4949,7 +4925,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), [expandElement, setExpandElement] = react.useState(null), [popoverElement, setPopoverElement] = react.useState(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
+  const { children, maxLength, separator, space: spaceRaw = 2, ...restProps } = props, space = react.useMemo(() => _getArrayProp(spaceRaw), [spaceRaw]), [open, setOpen] = react.useState(!1), [expandElement, setExpandElement] = react.useState(null), [popoverElement, setPopoverElement] = react.useState(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
   useClickOutside(collapse, [expandElement, popoverElement]);
   const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
     const len = rawItems.length;
@@ -5098,7 +5074,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = react.useRef(null), [rootElement, setRootElement] = react.useState(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
+  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = react.useMemo(() => _getArrayProp(shadowProp), [shadowProp]), width = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), ref = react.useRef(null), [rootElement, setRootElement] = react.useState(null), contentRef = react.useRef(null), layer = useLayer(), { isTopLayer } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useImperativeHandle(
     forwardedContentRef,
     () => contentRef.current
@@ -5163,13 +5139,13 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     onFocus,
     padding: paddingProp = 3,
     portal: portalProp,
-    position: positionProp = dialog.position || "fixed",
+    position: _position,
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
+    zOffset: _zOffset,
     animate: _animate = !1,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
+  } = props, positionProp = _position != null ? _position : dialog.position || "fixed", zOffsetProp = _zOffset != null ? _zOffset : dialog.zOffset || layer.dialog.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = react.useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp]), padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), position = react.useMemo(() => _getArrayProp(positionProp), [positionProp]), width = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback(
     (event) => {
       onFocus == null || onFocus(event);
       const target = event.target, cardElement = cardRef.current;
@@ -5265,7 +5241,7 @@ const Root$6 = styledComponents.styled.kbd`
     display: block;
   }
 `, Hotkeys = react.forwardRef(function(props, ref) {
-  const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = useArrayProp(spaceProp);
+  const { fontSize: fontSize2, keys, padding, radius, space: spaceProp = 0.5, ...restProps } = props, space = react.useMemo(() => _getArrayProp(spaceProp), [spaceProp]);
   return !keys || keys.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
 }), key$2 = Symbol.for("@sanity/ui/context/menu"), MenuContext = createGlobalScopedContext(key$2, null);
 function _isFocusable(element) {
@@ -5433,10 +5409,10 @@ const Root$5 = styledComponents.styled(Box)`
     originElement,
     padding = 1,
     registerElement,
-    shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
+    shouldFocus: _shouldFocus,
     space = 1,
     ...restProps
-  } = props, ref = react.useRef(null);
+  } = props, shouldFocus = _shouldFocus != null ? _shouldFocus : props.focusFirst && "first" || props.focusLast && "last" || null, ref = react.useRef(null);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const { isTopLayer } = useLayer(), {
     activeElement,
@@ -5580,28 +5556,16 @@ const Root$5 = styledComponents.styled(Box)`
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
   }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el) => (setChildMenuElements((els) => els.concat([el])), () => {
     setChildMenuElements((els) => els.filter((_el) => _el !== el));
-  }), []), menuProps = react.useMemo(
-    () => ({
-      "aria-labelledby": id,
-      onBlurCapture: handleBlur,
-      onClickOutside: handleMenuClickOutside,
-      onEscape: handleMenuEscape,
-      onItemClick: handleItemClick,
-      originElement: buttonElement,
-      registerElement,
-      shouldFocus
-    }),
-    [
-      buttonElement,
-      handleMenuClickOutside,
-      handleMenuEscape,
-      handleItemClick,
-      id,
-      handleBlur,
-      registerElement,
-      shouldFocus
-    ]
-  ), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(
+  }), []), menu = menuProp && react.cloneElement(menuProp, {
+    "aria-labelledby": id,
+    onBlurCapture: handleBlur,
+    onClickOutside: handleMenuClickOutside,
+    onEscape: handleMenuEscape,
+    onItemClick: handleItemClick,
+    originElement: buttonElement,
+    registerElement,
+    shouldFocus
+  }), button = react.useMemo(
     () => {
       var _a;
       return buttonProp && react.cloneElement(buttonProp, {
@@ -5612,7 +5576,7 @@ const Root$5 = styledComponents.styled(Box)`
         onMouseDown: handleMouseDown,
         "aria-haspopup": !0,
         "aria-expanded": open,
-        ref,
+        ref: setButtonElement,
         selected: (_a = buttonProp.props.selected) != null ? _a : open
       });
     },
@@ -5620,11 +5584,9 @@ const Root$5 = styledComponents.styled(Box)`
   );
   react.useImperativeHandle(
     forwardedRef,
-    () => ref.current
-  ), react.useEffect(() => {
-    if (button)
-      return setButtonElement(ref.current), () => setButtonElement(null);
-  }, [button]);
+    () => buttonElement,
+    [buttonElement]
+  );
   const popoverProps = react.useMemo(
     () => ({
       boundaryElement: deprecated_boundaryElement,
@@ -5646,7 +5608,19 @@ const Root$5 = styledComponents.styled(Box)`
       popover
     ]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover,
+      {
+        "data-ui": "MenuButton__popover",
+        referenceElement: buttonElement,
+        ...popoverProps,
+        content: menu,
+        open
+      }
+    ),
+    button
+  ] });
 }), MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;
@@ -5771,7 +5745,7 @@ function MenuGroup(props) {
     onClick,
     padding = 3,
     popover,
-    radius = 2,
+    radius: radiusProp = 2,
     space = 3,
     text,
     tone = "default",
@@ -5782,9 +5756,9 @@ function MenuGroup(props) {
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), shouldFocusRef = react.useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback(
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), shouldFocusRef = react.useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), handleMouseEnter = react.useCallback(
     (event) => {
       setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
     },
@@ -5842,7 +5816,7 @@ function MenuGroup(props) {
       "aria-pressed": as === "button" ? withinMenu : void 0,
       "data-pressed": as !== "button" ? withinMenu : void 0,
       "data-selected": !withinMenu && active ? "" : void 0,
-      $radius: useArrayProp(radius),
+      $radius: radius,
       $tone: tone,
       $scheme: scheme,
       onClick: handleClick,
@@ -5854,7 +5828,7 @@ function MenuGroup(props) {
       children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
         IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
           react.isValidElement(IconComponent) && IconComponent,
-          ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+          reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}) })
@@ -5890,9 +5864,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, onItemMouseLeave = _onItemMouseLeave != null ? _onItemMouseLeave : menu.onMouseLeave, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
   react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
   const handleClick = react.useCallback(
     (event) => {
@@ -5910,7 +5884,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       paddingLeft
     }),
     [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]
-  ), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((el) => {
+  ), hotkeysFontSize = react.useMemo(() => _getArrayProp(fontSize2).map((s) => s - 1), [fontSize2]), $radius = react.useMemo(() => _getArrayProp(radius), [radius]), $padding = react.useMemo(() => _getArrayProp(0), []), setRef = react.useCallback((el) => {
     ref.current = el, setRootElement(el);
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -5923,8 +5897,8 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       "data-selected": active ? "" : void 0,
       "data-disabled": disabled ? "" : void 0,
       forwardedAs: as,
-      $radius: useArrayProp(radius),
-      $padding: useArrayProp(0),
+      $radius,
+      $padding,
       $tone: disabled ? "default" : tone,
       $scheme: scheme,
       disabled,
@@ -5939,7 +5913,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
         (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
           IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconComponent) && IconComponent,
-            ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+            reactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
           ] }),
           text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
           hotkeys && /* @__PURE__ */ jsxRuntime.jsx(
@@ -5952,7 +5926,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
           ),
           IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
             react.isValidElement(IconRightComponent) && IconRightComponent,
-            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+            reactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
           ] })
         ] }),
         children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children })
@@ -6000,7 +5974,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   skeletonStyle
 ), Skeleton = react.forwardRef(function(props, ref) {
   const { animated = !1, delay, radius, ...restProps } = props, [visible, setVisible] = react.useState(!delay);
-  return react.useEffect(() => {
+  react.useEffect(() => {
     if (!delay)
       return setVisible(!0);
     const timeout = setTimeout(() => {
@@ -6009,16 +5983,9 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     return () => {
       clearTimeout(timeout);
     };
-  }, [delay]), /* @__PURE__ */ jsxRuntime.jsx(
-    Root$4,
-    {
-      ...restProps,
-      $animated: animated,
-      $radius: useArrayProp(radius),
-      $visible: visible,
-      ref
-    }
-  );
+  }, [delay]);
+  const $radius = react.useMemo(() => _getArrayProp(radius), [radius]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius, $visible: visible, ref });
 }), Root$3 = styledComponents.styled(Skeleton)((props) => {
   const { $size, $style } = props, { font, media } = theme.getTheme_v2(props.theme), fontStyle = font[$style];
   return _responsive(media, $size, (sizeIndex) => {
@@ -6026,16 +5993,16 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     return { height: fontSize2.lineHeight - fontSize2.ascenderHeight - fontSize2.descenderHeight };
   });
 }), TextSkeleton = react.forwardRef(function(props, ref) {
-  const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
+  const { size: size2 = 2, ...restProps } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" });
 }), LabelSkeleton = react.forwardRef(function(props, ref) {
-  const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
+  const { size: size2 = 2, ...restProps } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" });
 }), HeadingSkeleton = react.forwardRef(function(props, ref) {
-  const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
+  const { size: size2 = 2, ...restProps } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" });
 }), CodeSkeleton = react.forwardRef(function(props, ref) {
-  const { size: size2 = 2, ...restProps } = props, $size = useArrayProp(size2);
+  const { size: size2 = 2, ...restProps } = props, $size = react.useMemo(() => _getArrayProp(size2), [size2]);
   return /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" });
 }), CustomButton = styledComponents.styled(Button)`
   max-width: 100%;
@@ -6219,33 +6186,12 @@ const subscribe = () => () => {
   max-width: 420px;
   width: 100%;
 `;
-let toastId = 0;
 function ToastProvider(props) {
   const { children, padding = 4, paddingX, paddingY, zOffset } = props, [state, _setState] = react.useState([]), toastsRef = react.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = react.useMemo(
-    () => ({
-      initial: {
-        opacity: 0,
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
-        y: 32,
-        scale: 0.25,
-        willChange: "transform"
-      },
-      animate: {
-        opacity: [0, 1, 1],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
-        y: 0,
-        scale: 1
-      },
-      exit: {
-        opacity: [1, 1, 0],
-        [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
-        scale: 0.5,
-        transition: prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }
-      }
-    }),
+    () => getVariants(prefersReducedMotion),
     [prefersReducedMotion]
   ), value = react.useMemo(() => ({ version: 0, push: (params) => {
-    const setState = (state2) => react.startTransition(() => _setState(state2)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
+    const setState = (state2) => react.startTransition(() => _setState(state2)), id = params.id || crypto.randomUUID(), duration = params.duration || 5e3, dismiss = () => {
       var _a;
       const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
       setState((prevState) => {
@@ -6298,6 +6244,29 @@ function ToastProvider(props) {
     )) }) }) }) })
   ] });
 }
+function getVariants(prefersReducedMotion) {
+  return {
+    initial: {
+      opacity: 0,
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+      y: 32,
+      scale: 0.25,
+      willChange: "transform"
+    },
+    animate: {
+      opacity: [0, 1, 1],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
+      y: 0,
+      scale: 1
+    },
+    exit: {
+      opacity: [1, 1, 0],
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
+      scale: 0.5,
+      transition: { duration: prefersReducedMotion ? 0 : 0.2 }
+    }
+  };
+}
 function useToast() {
   const value = react.useContext(ToastContext);
   if (!value)
@@ -6484,6 +6453,28 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
   })
 );
 Tree.displayName = "Tree";
+function useTree() {
+  const tree = react.useContext(TreeContext);
+  if (!tree)
+    throw new Error("Tree: missing context value");
+  return tree;
+}
+const TreeGroup = react.memo(function(props) {
+  const { children, expanded = !1, ...restProps } = props, tree = useTree();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Stack,
+    {
+      as: "ul",
+      "data-ui": "TreeGroup",
+      ...restProps,
+      hidden: !expanded,
+      marginTop: tree.space,
+      role: "group",
+      space: tree.space,
+      children
+    }
+  );
+});
 function treeItemRootStyle() {
   return styledComponents.css`
     &[role='none'] > [role='treeitem'] {
@@ -6570,28 +6561,9 @@ function treeItemBoxStyle(props) {
     }
   `;
 }
-function useTree() {
-  const tree = react.useContext(TreeContext);
-  if (!tree)
-    throw new Error("Tree: missing context value");
-  return tree;
-}
-const TreeGroup = react.memo(function(props) {
-  const { children, expanded = !1, ...restProps } = props, tree = useTree();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Stack,
-    {
-      as: "ul",
-      "data-ui": "TreeGroup",
-      ...restProps,
-      hidden: !expanded,
-      marginTop: tree.space,
-      role: "group",
-      space: tree.space,
-      children
-    }
-  );
-}), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
+const Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({ forwardedAs: "a" })(
+  treeItemBoxStyle
+), ToggleArrowText = styledComponents.styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
@@ -6612,12 +6584,12 @@ const TreeGroup = react.memo(function(props) {
     text,
     weight,
     ...restProps
-  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(
+  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), { path, registerItem, setExpanded, setFocusedElement } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => [...path, id || ""], [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(
     () => ({ ...tree, level: tree.level + 1, path: itemPath }),
     [itemPath, tree]
   ), handleClick = react.useCallback(
     (event) => {
-      onClick && onClick(event);
+      onClick == null || onClick(event);
       const target = event.target;
       target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
     },
@@ -6635,23 +6607,26 @@ const TreeGroup = react.memo(function(props) {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
   }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Box,
-      {
-        marginRight: space,
-        style: {
-          visibility: IconComponent || children ? "visible" : "hidden",
-          pointerEvents: "none"
-        },
-        children: [
-          IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
-          !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
-  ] });
+  const content = react.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Box,
+        {
+          marginRight: space,
+          style: {
+            visibility: IconComponent || children ? "visible" : "hidden",
+            pointerEvents: "none"
+          },
+          children: [
+            IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
+            !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: { transform: expanded ? "rotate(90deg)" : void 0 } }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
+    ] }),
+    [IconComponent, children, expanded, fontSize2, muted, padding, space, text, weight]
+  );
   return href ? /* @__PURE__ */ jsxRuntime.jsxs(
     Root,
     {