@sanity/ui 2.3.6-canary.0 → 2.3.6-canary.2

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;
+  const { children } = props, parentTheme = react.useContext(ThemeContext), scheme = (_a = props.scheme) != null ? _a : (parentTheme == null ? void 0 : parentTheme.scheme) || "light", rootTheme = (parentTheme == null ? void 0 : parentTheme.theme) || null, tone = (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 = react.useMemo(() => _getArrayProp(sizeProp), [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(() => {
@@ -1520,7 +1044,7 @@ 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(
+  const { count, size: sizeProp = 1 } = props, size2 = react.useMemo(() => _getArrayProp(sizeProp), [sizeProp]), fontSize2 = react.useMemo(
     () => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0),
     [size2]
   );
@@ -1559,7 +1083,7 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
   } = 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;
+  ), 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 +1125,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 +1246,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 +1254,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 +1289,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 +1306,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
     }
@@ -1966,278 +1490,744 @@ function buttonColorStyles(props) {
         },
         "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
       }
-    },
-    (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
-  ].filter(Boolean);
+    },
+    (_a = style == null ? void 0 : style.button) == null ? void 0 : _a.root
+  ].filter(Boolean);
+}
+const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--card-bg-color);
+  border-radius: inherit;
+  z-index: 1;
+  box-shadow: inherit;
+`, Button = react.forwardRef(function(props, ref) {
+  const {
+    children,
+    disabled,
+    fontSize: fontSize2 = 1,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    justify: justifyProp = "center",
+    loading,
+    mode = "default",
+    padding: paddingProp = 3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: radiusProp = 2,
+    selected,
+    space: spaceProp = 3,
+    text,
+    textAlign,
+    tone = "default",
+    type = "button",
+    muted = !1,
+    width,
+    ...restProps
+  } = 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,
+      paddingX,
+      paddingY,
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight
+    }),
+    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Root$t,
+    {
+      "data-ui": "Button",
+      ...restProps,
+      $mode: mode,
+      $radius: radius,
+      $tone: tone,
+      "data-disabled": !!(loading || disabled),
+      "data-selected": selected ? "" : void 0,
+      disabled: !!(loading || disabled),
+      ref,
+      type,
+      $width: width,
+      children: [
+        !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
+        (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, {})
+          ] }),
+          text && /* @__PURE__ */ jsxRuntime.jsx(
+            Text,
+            {
+              muted,
+              align: textAlign,
+              size: fontSize2,
+              textOverflow: "ellipsis",
+              weight: button.textWeight,
+              children: text
+            }
+          ),
+          IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+            react.isValidElement(IconRightComponent) && 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$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`, Button = react.forwardRef(function(props, ref) {
+const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const {
-    children,
-    disabled,
-    fontSize: fontSize2 = 1,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify: justifyProp = "center",
-    loading,
-    mode = "default",
-    padding: paddingProp = 3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
+    __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,
-    space: spaceProp = 3,
-    text,
-    textAlign,
-    tone = "default",
-    type = "button",
-    muted = !1,
-    width,
+    shadow,
+    tone: toneProp = "default",
     ...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(
-    () => ({
-      // flex: 1,
-      padding,
-      paddingX,
-      paddingY,
-      paddingTop,
-      paddingBottom,
-      paddingLeft,
-      paddingRight
-    }),
-    [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root$t,
+  } = 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-ui": "Button",
+      "data-as": typeof as == "string" ? as : void 0,
+      "data-scheme": rootTheme.scheme,
+      "data-ui": "Card",
+      "data-tone": tone,
       ...restProps,
-      $mode: mode,
-      $radius: radius,
+      $border,
+      $borderTop,
+      $borderRight,
+      $borderBottom,
+      $borderLeft,
+      $radius,
+      $shadow,
+      $checkered: checkered,
+      $focusRing: focusRing,
+      $muted: muted,
       $tone: tone,
-      "data-disabled": !!(loading || disabled),
+      "data-checkered": checkered ? "" : void 0,
+      "data-pressed": pressed ? "" : void 0,
       "data-selected": selected ? "" : void 0,
-      disabled: !!(loading || disabled),
+      forwardedAs: as,
       ref,
-      type,
-      $width: width,
-      children: [
-        !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
-        (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, {})
-          ] }),
-          text && /* @__PURE__ */ jsxRuntime.jsx(
-            Text,
-            {
-              muted,
-              align: textAlign,
-              size: fontSize2,
-              textOverflow: "ellipsis",
-              weight: button.textWeight,
-              children: text
-            }
-          ),
-          IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-            react.isValidElement(IconRightComponent) && IconRightComponent,
-            ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
-          ] })
-        ] }) }),
-        children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children })
-      ]
+      selected
+    }
+  ) });
+});
+function useArrayProp(val, defaultVal) {
+  return react.useMemo(() => _getArrayProp(val, defaultVal), [defaultVal, val]);
+}
+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;
+    }
+    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);
     }
-  );
-});
-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;
+  });
+  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(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
+  }, 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();
+      };
     }
-
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
+  };
+}
+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 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 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) });
       }
     }
-
-    /* &: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};
-        }
-      }
+    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));
     }
-
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
-  `;
+    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]);
 }
-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
-    }
-  ) });
-});
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2466,8 +2456,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 +2478,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 +2572,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 +2580,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 +2612,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 +2621,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
     {
       "data-ui": "Inline",
       ...restProps,
-      $space: useArrayProp(space),
+      $space,
       forwardedAs: as,
       ref,
       children
@@ -2665,8 +2646,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 }) {
@@ -2986,7 +2967,7 @@ 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), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, 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], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback(
     (childLevel) => {
       const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
       return childLevel !== void 0 ? setChildLayers((state) => {
@@ -3315,7 +3296,7 @@ const Popover = react.memo(
       zOffset: zOffsetProp = layer.popover.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, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = react.useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = react.useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = react.useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = react.useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
     react.useImperativeHandle(
       forwardedRef,
       () => ref.current
@@ -3741,20 +3722,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 +3765,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 +3967,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 +3980,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 +3993,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 +4067,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 +4099,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, {})
           ] }) })
         ]
       }
@@ -4352,7 +4337,10 @@ const Root$a = styledComponents.styled(Layer)`
     zOffset = layer.tooltip.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, 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(
     emptySubscribe,
@@ -4641,7 +4629,7 @@ 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 = react.useMemo(() => _getArrayProp(paddingProp), [paddingProp]), currentOption = react.useMemo(
     () => value !== null ? options.find((o) => o.value === value) : void 0,
     [options, value]
   ), filteredOptions = react.useMemo(
@@ -4947,7 +4935,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;
@@ -5096,7 +5084,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
@@ -5167,7 +5155,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     zOffset: zOffsetProp = dialog.zOffset || layer.dialog.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, 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;
@@ -5263,7 +5251,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) {
@@ -5769,7 +5757,7 @@ function MenuGroup(props) {
     onClick,
     padding = 3,
     popover,
-    radius = 2,
+    radius: radiusProp = 2,
     space = 3,
     text,
     tone = "default",
@@ -5782,7 +5770,7 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     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, [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);
     },
@@ -5840,7 +5828,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,
@@ -5852,7 +5840,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, {}) })
@@ -5908,7 +5896,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(
@@ -5921,8 +5909,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,
@@ -5937,7 +5925,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(
@@ -5950,7 +5938,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 })
@@ -5998,7 +5986,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(() => {
@@ -6007,16 +5995,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) => {
@@ -6024,16 +6005,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%;