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

package/dist/index.compiled.mjs

@@ -1,9 +1,9 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
-import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useImperativeHandle, forwardRef, useId, Children, isValidElement, cloneElement, useCallback, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
-import ReactIs, { isValidElementType } from "react-is";
+import { createContext, useContext, forwardRef, useMemo, useId, useState, useEffect, useCallback, Children, isValidElement, cloneElement, useRef, useSyncExternalStore, useImperativeHandle, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
+import { c } from "react/compiler-runtime";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
@@ -151,657 +151,179 @@ function responsiveTextAlignStyle(props) {
 function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
-function useArrayProp(val, defaultVal) {
-  const __perf_hash__ = useMemo(() => JSON.stringify(val != null ? val : defaultVal), [defaultVal, val]);
-  return useMemo(
-    () => _getArrayProp(val, defaultVal),
-    // Improve performance: Keep object identify for a given hash of the value
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [__perf_hash__]
-  );
+function 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");
 }
-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);
+const globalScope = getGlobalScope();
+function createGlobalScopedContext(key2, defaultValue) {
+  return typeof document > "u" ? createContext(defaultValue) : (globalScope[key2] = globalScope[key2] || createContext(defaultValue), globalScope[key2]);
 }
-function useClickOutside(listener, t0, boundaryElement) {
-  const $ = c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
-  let t1;
-  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
-  const [elements, setElements] = useState(t1), elementsRef = useRef(elements);
-  let t2, t3;
-  $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
-    const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
-    if (prevElements.length !== nextElements.length) {
-      setElements(nextElements), elementsRef.current = nextElements;
-      return;
+const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
+function ThemeProvider(props) {
+  var _a;
+  const $ = c(15), {
+    children
+  } = props, parentTheme = 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";
+  let t0;
+  bb0: {
+    if (!rootTheme) {
+      t0 = null;
+      break bb0;
     }
-    for (const el of prevElements)
-      if (!nextElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-    for (const el_0 of nextElements)
-      if (!prevElements.includes(el_0)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
-      }
-  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
-  let t4, t5;
-  return $[7] !== listener || $[8] !== boundaryElement || $[9] !== elements ? (t4 = () => {
-    if (!listener)
-      return;
-    const handleWindowMouseDown = (evt) => {
-      const target = evt.target;
-      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
-        for (const el_1 of elements)
-          if (target === el_1 || el_1.contains(target))
-            return;
-        listener(evt);
-      }
-    };
-    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
-      window.removeEventListener("mousedown", handleWindowMouseDown);
-    };
-  }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5), 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);
+    let t12;
+    $[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t12 = {
+      version: 0,
+      theme: rootTheme,
+      scheme,
+      tone
+    }, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t12) : t12 = $[3], t0 = t12;
   }
-  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;
+  const themeContext = t0;
+  let t1;
+  bb1: {
+    if (!rootTheme) {
+      t1 = null;
+      break bb1;
+    }
+    let t22;
+    $[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
   }
-  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;
+  const theme = t1;
+  if (!theme) {
+    let t22;
+    return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
   }
-  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)
+  let t2;
+  $[9] !== theme || $[10] !== children ? (t2 = /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }), $[9] = theme, $[10] = children, $[11] = t2) : t2 = $[11];
+  let t3;
+  return $[12] !== themeContext || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = themeContext, $[13] = t2, $[14] = t3) : t3 = $[14], t3;
+}
+function useRootTheme() {
+  const value = useContext(ThemeContext);
+  if (!value)
+    throw new Error("useRootTheme(): missing context value");
+  return value;
+}
+function ThemeColorProvider(props) {
+  const $ = c(5), {
+    children,
+    scheme,
+    tone
+  } = props, root = useRootTheme(), t0 = scheme || root.scheme;
+  let t1;
+  return $[0] !== t0 || $[1] !== root.theme || $[2] !== tone || $[3] !== children ? (t1 = /* @__PURE__ */ jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = t0, $[1] = root.theme, $[2] = tone, $[3] = children, $[4] = t1) : t1 = $[4], t1;
+}
+function useTheme() {
+  return useTheme$1();
+}
+function useTheme_v2() {
+  const $ = c(2), t0 = useTheme$1();
+  let t1;
+  return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
+}
+function responsiveBorderStyle() {
+  return [border, borderTop, borderRight, borderBottom, borderLeft];
+}
+function border(props) {
+  var _a, _b;
+  const {
+    card,
+    media
+  } = 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
+    }
   });
-  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 borderTop(props) {
+  var _a, _b;
+  const {
+    card,
+    media
+  } = 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
     }
   });
-  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();
-        }
-      });
+}
+function borderRight(props) {
+  var _a, _b;
+  const {
+    card,
+    media
+  } = 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
     }
-  }, 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();
-      };
+  } : {
+    "&&": {
+      borderRight: 0
     }
-  };
+  });
 }
-function _createElementSizeObserver() {
-  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || [];
-      let dispose = disposeCache.get(element);
-      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
-        for (const sub of subscribers)
-          sub(elementRect);
-      })), subscribers.push(subscriber), () => {
-        const idx = subscribers.indexOf(subscriber);
-        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
-      };
+function borderBottom(props) {
+  var _a, _b;
+  const {
+    card,
+    media
+  } = 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 useElementSize(element) {
-  const $ = c(3), [size2, setSize] = useState(null);
-  let t0, t1;
-  return $[0] !== element ? (t0 = () => {
-    if (element)
-      return _elementSizeObserver.subscribe(element, setSize);
-  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
+function borderLeft(props) {
+  var _a, _b;
+  const {
+    card,
+    media
+  } = 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
+    }
+  });
 }
-function useElementRect(element) {
-  const elementSize = useElementSize(element);
-  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
+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 useGlobalKeyDown(onKeyDown) {
-  const $ = c(3);
-  let t0, t1;
-  return $[0] !== onKeyDown ? (t0 = () => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), t1 = [onKeyDown], $[0] = onKeyDown, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
-}
-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" ? createContext(defaultValue) : (globalScope[key2] = globalScope[key2] || createContext(defaultValue), globalScope[key2]);
-}
-const key$8 = Symbol.for("@sanity/ui/context/theme"), ThemeContext = createGlobalScopedContext(key$8, null);
-function ThemeProvider(props) {
-  const parentTheme = 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 = useMemo(() => rootTheme ? {
-    version: 0,
-    theme: rootTheme,
-    scheme,
-    tone
-  } : null, [rootTheme, scheme, tone]), theme = useMemo(() => rootTheme ? getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme ? /* @__PURE__ */ jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsx(ThemeProvider$1, { theme, children }) }) : /* @__PURE__ */ jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
-}
-function useRootTheme() {
-  const value = useContext(ThemeContext);
-  if (!value)
-    throw new Error("useRootTheme(): missing context value");
-  return value;
-}
-function ThemeColorProvider(props) {
-  const $ = c(5), {
-    children,
-    scheme,
-    tone
-  } = props, root = useRootTheme(), t0 = scheme || root.scheme;
-  let t1;
-  return $[0] !== t0 || $[1] !== root.theme || $[2] !== tone || $[3] !== children ? (t1 = /* @__PURE__ */ jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = t0, $[1] = root.theme, $[2] = tone, $[3] = children, $[4] = t1) : t1 = $[4], t1;
-}
-function useTheme() {
-  return useTheme$1();
-}
-function useTheme_v2() {
-  const $ = c(2), t0 = useTheme$1();
-  let t1;
-  return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
-}
-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 $ = c(4), {
-    media
-  } = useTheme_v2();
-  let t0;
-  $[0] !== media ? (t0 = MEDIA_STORE_CACHE.get(media), $[0] = media, $[1] = t0) : t0 = $[1];
-  let store = t0;
-  return store || ($[2] !== media ? (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store), $[2] = media, $[3] = store) : store = $[3]), 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 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 useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
-}
-function useForwardedRef(ref) {
-  const $ = c(1), innerRef = useRef(null);
-  let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], useImperativeHandle(ref, t0), innerRef;
-}
-function useCustomValidity(ref, customValidity) {
-  const $ = c(6);
-  let t0;
-  $[0] !== ref.current || $[1] !== customValidity ? (t0 = () => {
-    var _a;
-    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
-  }, $[0] = ref.current, $[1] = customValidity, $[2] = t0) : t0 = $[2];
-  let t1;
-  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], useEffect(t0, t1);
-}
-function responsiveBorderStyle() {
-  return [border, borderTop, borderRight, borderBottom, borderLeft];
-}
-function border(props) {
-  var _a, _b;
-  const {
-    card,
-    media
-  } = 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
-  } = 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
-  } = 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
-  } = 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
-  } = 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 responsiveBoxStyle() {
+  return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
 }
 function responsiveBoxDisplayStyle(props) {
   const {
@@ -1420,8 +942,8 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
   overflow: hidden;
   overflow: clip;
 `, Label = forwardRef(function(props, ref) {
-  const $ = c(22);
-  let t0, t1, childrenProp, textOverflow, align, restProps, accent, weight;
+  const $ = c(26);
+  let t0, t1, align, childrenProp, textOverflow, restProps, accent, weight;
   $[0] !== props ? ({
     accent,
     align,
@@ -1431,19 +953,24 @@ const Root$C = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBa
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = childrenProp, $[4] = textOverflow, $[5] = align, $[6] = restProps, $[7] = accent, $[8] = weight) : (t0 = $[1], t1 = $[2], childrenProp = $[3], textOverflow = $[4], align = $[5], restProps = $[6], accent = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = align, $[4] = childrenProp, $[5] = textOverflow, $[6] = restProps, $[7] = accent, $[8] = weight) : (t0 = $[1], t1 = $[2], align = $[3], childrenProp = $[4], textOverflow = $[5], restProps = $[6], accent = $[7], weight = $[8]);
   const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
+  let t2, t3;
+  $[9] !== size2 ? (t3 = _getArrayProp(size2), $[9] = size2, $[10] = t3) : t3 = $[10], t2 = t3;
+  const $size = t2;
+  let t4, t5;
+  $[11] !== align ? (t5 = _getArrayProp(align), $[11] = align, $[12] = t5) : t5 = $[12], t4 = t5;
+  const $align = t4;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    let t22;
-    $[9] !== children ? (t22 = /* @__PURE__ */ jsx(SpanWithTextOverflow$2, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
+    let t62;
+    $[13] !== children ? (t62 = /* @__PURE__ */ jsx(SpanWithTextOverflow$2, { children }), $[13] = children, $[14] = t62) : t62 = $[14], children = t62;
   } else {
-    let t22;
-    $[11] !== children ? (t22 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
+    let t62;
+    $[15] !== children ? (t62 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t62) : t62 = $[16], children = t62;
   }
-  const t2 = useArrayProp(align), t3 = useArrayProp(size2);
-  let t4;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t2 || $[16] !== muted || $[17] !== t3 || $[18] !== weight || $[19] !== ref || $[20] !== children ? (t4 = /* @__PURE__ */ jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = restProps, $[14] = accent, $[15] = t2, $[16] = muted, $[17] = t3, $[18] = weight, $[19] = ref, $[20] = children, $[21] = t4) : t4 = $[21], t4;
+  let t6;
+  return $[17] !== restProps || $[18] !== accent || $[19] !== $align || $[20] !== $size || $[21] !== muted || $[22] !== weight || $[23] !== ref || $[24] !== children ? (t6 = /* @__PURE__ */ jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align, $size, $muted: muted, $weight: weight, ref, children }), $[17] = restProps, $[18] = accent, $[19] = $align, $[20] = $size, $[21] = muted, $[22] = weight, $[23] = ref, $[24] = children, $[25] = t6) : t6 = $[25], t6;
 }), avatarStyle = {
   root: avatarRootStyle,
   arrow: avatarArrowStyle,
@@ -1590,66 +1117,50 @@ function avatarStrokeStyle() {
 const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styled.div(avatarStyle.arrow), BgStroke = styled.ellipse(avatarStyle.bgStroke), Stroke = styled.ellipse(avatarStyle.stroke), Initials = styled.div(avatarStyle.initials), InitialsLabel = styled(Label)({
   color: "inherit"
 }), Image = styled.svg(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
-  const $ = c(53);
-  let t0, t1, t2, asProp, animateArrowFrom, arrowPositionProp, src, onImageLoadError, __unstable_hideInnerStroke, initials, restProps, title;
-  $[0] !== props ? ({
+  const {
     __unstable_hideInnerStroke,
     as: asProp,
-    color: t0,
+    color = "gray",
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status: t1,
-    size: t2,
+    status = "online",
+    size: sizeProp = 1,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = asProp, $[5] = animateArrowFrom, $[6] = arrowPositionProp, $[7] = src, $[8] = onImageLoadError, $[9] = __unstable_hideInnerStroke, $[10] = initials, $[11] = restProps, $[12] = title) : (t0 = $[1], t1 = $[2], t2 = $[3], asProp = $[4], animateArrowFrom = $[5], arrowPositionProp = $[6], src = $[7], onImageLoadError = $[8], __unstable_hideInnerStroke = $[9], initials = $[10], restProps = $[11], title = $[12]);
-  const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
+  } = props, {
     avatar
-  } = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
-  let t3, t4;
-  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
-    if (arrowPosition === arrowPositionProp)
-      return;
+  } = useTheme_v2(), as = isValidElementType(asProp) ? asProp : "div", size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
+  useEffect(() => {
+    if (arrowPosition === arrowPositionProp) return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), useEffect(t3, t4);
-  let t5, t6;
-  $[17] !== src ? (t5 = () => {
+  }, [arrowPosition, arrowPositionProp]), useEffect(() => {
     src && setImageFailed(!1);
-  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), useEffect(t5, t6);
-  let t7;
-  $[20] !== onImageLoadError ? (t7 = () => {
+  }, [src]);
+  const handleImageError = useCallback(() => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
-  const handleImageError = t7;
-  let t8, t9;
-  if ($[22] !== size2) {
-    let t102;
-    $[24] === Symbol.for("react.memo_cache_sentinel") ? (t102 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[24] = t102) : t102 = $[24], t9 = size2.map(t102), $[22] = size2, $[23] = t9;
-  } else
-    t9 = $[23];
-  t8 = t9;
-  const initialsSize = t8, t10 = typeof as == "string" ? as : void 0;
-  let t11;
-  $[25] !== color ? (t11 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[25] = color, $[26] = t11) : t11 = $[26];
-  let t12;
-  $[27] !== imageFailed || $[28] !== src || $[29] !== _sizeRem || $[30] !== handleImageError || $[31] !== imageId || $[32] !== _radius || $[33] !== __unstable_hideInnerStroke ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
-    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
-    /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
-    !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
-    /* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-  ] }), $[27] = imageFailed, $[28] = src, $[29] = _sizeRem, $[30] = handleImageError, $[31] = imageId, $[32] = _radius, $[33] = __unstable_hideInnerStroke, $[34] = t12) : t12 = $[34];
-  let t13;
-  $[35] !== imageFailed || $[36] !== src || $[37] !== initials || $[38] !== initialsSize ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[35] = imageFailed, $[36] = src, $[37] = initials, $[38] = initialsSize, $[39] = t13) : t13 = $[39];
-  let t14;
-  return $[40] !== as || $[41] !== t10 || $[42] !== restProps || $[43] !== color || $[44] !== size2 || $[45] !== title || $[46] !== arrowPosition || $[47] !== status || $[48] !== ref || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Root$B, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
-    t11,
-    t12,
-    t13
-  ] }), $[40] = as, $[41] = t10, $[42] = restProps, $[43] = color, $[44] = size2, $[45] = title, $[46] = arrowPosition, $[47] = status, $[48] = ref, $[49] = t11, $[50] = t12, $[51] = t13, $[52] = t14) : t14 = $[52], t14;
+  }, [onImageLoadError]), initialsSize = useMemo(() => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), [size2]);
+  return /* @__PURE__ */ jsxs(Root$B, { as, "data-as": typeof as == "string" ? as : void 0, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+    /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }),
+    !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx(
+        "image",
+        {
+          href: src,
+          width: "1",
+          height: "1",
+          onError: handleImageError
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
+      !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
+      /* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
+    ] }),
+    (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) })
+  ] });
 });
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
@@ -1688,22 +1199,11 @@ function _avatarCounterBaseStyle(props) {
   `;
 }
 const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
-  const $ = c(10), {
+  const {
     count,
-    size: t0
-  } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
-  let t1, t2;
-  if ($[0] !== size2) {
-    let t32;
-    $[2] === Symbol.for("react.memo_cache_sentinel") ? (t32 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[2] = t32) : t32 = $[2], t2 = size2.map(t32), $[0] = size2, $[1] = t2;
-  } else
-    t2 = $[1];
-  t1 = t2;
-  const fontSize2 = t1;
-  let t3;
-  $[3] !== fontSize2 || $[4] !== count ? (t3 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[3] = fontSize2, $[4] = count, $[5] = t3) : t3 = $[5];
-  let t4;
-  return $[6] !== size2 || $[7] !== ref || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[6] = size2, $[7] = ref, $[8] = t3, $[9] = t4) : t4 = $[9], t4;
+    size: sizeProp = 1
+  } = props, size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), fontSize2 = useMemo(() => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), [size2]);
+  return /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
 }), BASE_STYLES = css`
   white-space: nowrap;
 
@@ -1738,7 +1238,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     maxLength: maxLengthProp = 4,
     size: sizeProp = 1,
     ...restProps
-  } = props, children = useMemo(() => Children.toArray(childrenProp).filter(isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+  } = props, children = useMemo(() => Children.toArray(childrenProp).filter(isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
   return /* @__PURE__ */ jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
     len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }),
     len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
@@ -1747,7 +1247,7 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     }) }, String(childIndex)))
   ] });
 }), Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
-  const $ = c(59);
+  const $ = c(109);
   let t0, t1, t2, t3, column, columnStart, columnEnd, flex, height, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, row, rowStart, rowEnd, sizing, restProps;
   $[0] !== props ? ({
     as: t0,
@@ -1778,9 +1278,84 @@ const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), Ava
     sizing,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = column, $[6] = columnStart, $[7] = columnEnd, $[8] = flex, $[9] = height, $[10] = marginX, $[11] = marginY, $[12] = marginTop, $[13] = marginRight, $[14] = marginBottom, $[15] = marginLeft, $[16] = overflow, $[17] = paddingX, $[18] = paddingY, $[19] = paddingTop, $[20] = paddingRight, $[21] = paddingBottom, $[22] = paddingLeft, $[23] = row, $[24] = rowStart, $[25] = rowEnd, $[26] = sizing, $[27] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], column = $[5], columnStart = $[6], columnEnd = $[7], flex = $[8], height = $[9], marginX = $[10], marginY = $[11], marginTop = $[12], marginRight = $[13], marginBottom = $[14], marginLeft = $[15], overflow = $[16], paddingX = $[17], paddingY = $[18], paddingTop = $[19], paddingRight = $[20], paddingBottom = $[21], paddingLeft = $[22], row = $[23], rowStart = $[24], rowEnd = $[25], sizing = $[26], restProps = $[27]);
-  const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0, t5 = useArrayProp(column), t6 = useArrayProp(columnStart), t7 = useArrayProp(columnEnd), t8 = useArrayProp(display), t9 = useArrayProp(flex), t10 = useArrayProp(height), t11 = useArrayProp(margin), t12 = useArrayProp(marginX), t13 = useArrayProp(marginY), t14 = useArrayProp(marginTop), t15 = useArrayProp(marginRight), t16 = useArrayProp(marginBottom), t17 = useArrayProp(marginLeft), t18 = useArrayProp(overflow), t19 = useArrayProp(padding), t20 = useArrayProp(paddingX), t21 = useArrayProp(paddingY), t22 = useArrayProp(paddingTop), t23 = useArrayProp(paddingRight), t24 = useArrayProp(paddingBottom), t25 = useArrayProp(paddingLeft), t26 = useArrayProp(row), t27 = useArrayProp(rowStart), t28 = useArrayProp(rowEnd), t29 = useArrayProp(sizing);
-  let t30;
-  return $[28] !== t4 || $[29] !== restProps || $[30] !== t5 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9 || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t15 || $[41] !== t16 || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21 || $[47] !== t22 || $[48] !== t23 || $[49] !== t24 || $[50] !== t25 || $[51] !== t26 || $[52] !== t27 || $[53] !== t28 || $[54] !== t29 || $[55] !== asProp || $[56] !== ref || $[57] !== props.children ? (t30 = /* @__PURE__ */ jsx(Root$y, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[28] = t4, $[29] = restProps, $[30] = t5, $[31] = t6, $[32] = t7, $[33] = t8, $[34] = t9, $[35] = t10, $[36] = t11, $[37] = t12, $[38] = t13, $[39] = t14, $[40] = t15, $[41] = t16, $[42] = t17, $[43] = t18, $[44] = t19, $[45] = t20, $[46] = t21, $[47] = t22, $[48] = t23, $[49] = t24, $[50] = t25, $[51] = t26, $[52] = t27, $[53] = t28, $[54] = t29, $[55] = asProp, $[56] = ref, $[57] = props.children, $[58] = t30) : t30 = $[58], t30;
+  const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3;
+  let t4, t5;
+  $[28] !== column ? (t5 = _getArrayProp(column), $[28] = column, $[29] = t5) : t5 = $[29], t4 = t5;
+  const $column = t4;
+  let t6, t7;
+  $[30] !== columnStart ? (t7 = _getArrayProp(columnStart), $[30] = columnStart, $[31] = t7) : t7 = $[31], t6 = t7;
+  const $columnStart = t6;
+  let t8, t9;
+  $[32] !== columnEnd ? (t9 = _getArrayProp(columnEnd), $[32] = columnEnd, $[33] = t9) : t9 = $[33], t8 = t9;
+  const $columnEnd = t8;
+  let t10, t11;
+  $[34] !== display ? (t11 = _getArrayProp(display), $[34] = display, $[35] = t11) : t11 = $[35], t10 = t11;
+  const $display = t10;
+  let t12, t13;
+  $[36] !== flex ? (t13 = _getArrayProp(flex), $[36] = flex, $[37] = t13) : t13 = $[37], t12 = t13;
+  const $flex = t12;
+  let t14, t15;
+  $[38] !== height ? (t15 = _getArrayProp(height), $[38] = height, $[39] = t15) : t15 = $[39], t14 = t15;
+  const $height = t14;
+  let t16, t17;
+  $[40] !== margin ? (t17 = _getArrayProp(margin), $[40] = margin, $[41] = t17) : t17 = $[41], t16 = t17;
+  const $margin = t16;
+  let t18, t19;
+  $[42] !== marginX ? (t19 = _getArrayProp(marginX), $[42] = marginX, $[43] = t19) : t19 = $[43], t18 = t19;
+  const $marginX = t18;
+  let t20, t21;
+  $[44] !== marginY ? (t21 = _getArrayProp(marginY), $[44] = marginY, $[45] = t21) : t21 = $[45], t20 = t21;
+  const $marginY = t20;
+  let t22, t23;
+  $[46] !== marginTop ? (t23 = _getArrayProp(marginTop), $[46] = marginTop, $[47] = t23) : t23 = $[47], t22 = t23;
+  const $marginTop = t22;
+  let t24, t25;
+  $[48] !== marginRight ? (t25 = _getArrayProp(marginRight), $[48] = marginRight, $[49] = t25) : t25 = $[49], t24 = t25;
+  const $marginRight = t24;
+  let t26, t27;
+  $[50] !== marginBottom ? (t27 = _getArrayProp(marginBottom), $[50] = marginBottom, $[51] = t27) : t27 = $[51], t26 = t27;
+  const $marginBottom = t26;
+  let t28, t29;
+  $[52] !== marginLeft ? (t29 = _getArrayProp(marginLeft), $[52] = marginLeft, $[53] = t29) : t29 = $[53], t28 = t29;
+  const $marginLeft = t28;
+  let t30, t31;
+  $[54] !== overflow ? (t31 = _getArrayProp(overflow), $[54] = overflow, $[55] = t31) : t31 = $[55], t30 = t31;
+  const $overflow = t30;
+  let t32, t33;
+  $[56] !== padding ? (t33 = _getArrayProp(padding), $[56] = padding, $[57] = t33) : t33 = $[57], t32 = t33;
+  const $padding = t32;
+  let t34, t35;
+  $[58] !== paddingX ? (t35 = _getArrayProp(paddingX), $[58] = paddingX, $[59] = t35) : t35 = $[59], t34 = t35;
+  const $paddingX = t34;
+  let t36, t37;
+  $[60] !== paddingY ? (t37 = _getArrayProp(paddingY), $[60] = paddingY, $[61] = t37) : t37 = $[61], t36 = t37;
+  const $paddingY = t36;
+  let t38, t39;
+  $[62] !== paddingTop ? (t39 = _getArrayProp(paddingTop), $[62] = paddingTop, $[63] = t39) : t39 = $[63], t38 = t39;
+  const $paddingTop = t38;
+  let t40, t41;
+  $[64] !== paddingRight ? (t41 = _getArrayProp(paddingRight), $[64] = paddingRight, $[65] = t41) : t41 = $[65], t40 = t41;
+  const $paddingRight = t40;
+  let t42, t43;
+  $[66] !== paddingBottom ? (t43 = _getArrayProp(paddingBottom), $[66] = paddingBottom, $[67] = t43) : t43 = $[67], t42 = t43;
+  const $paddingBottom = t42;
+  let t44, t45;
+  $[68] !== paddingLeft ? (t45 = _getArrayProp(paddingLeft), $[68] = paddingLeft, $[69] = t45) : t45 = $[69], t44 = t45;
+  const $paddingLeft = t44;
+  let t46, t47;
+  $[70] !== row ? (t47 = _getArrayProp(row), $[70] = row, $[71] = t47) : t47 = $[71], t46 = t47;
+  const $row = t46;
+  let t48, t49;
+  $[72] !== rowStart ? (t49 = _getArrayProp(rowStart), $[72] = rowStart, $[73] = t49) : t49 = $[73], t48 = t49;
+  const $rowStart = t48;
+  let t50, t51;
+  $[74] !== rowEnd ? (t51 = _getArrayProp(rowEnd), $[74] = rowEnd, $[75] = t51) : t51 = $[75], t50 = t51;
+  const $rowEnd = t50;
+  let t52, t53;
+  $[76] !== sizing ? (t53 = _getArrayProp(sizing), $[76] = sizing, $[77] = t53) : t53 = $[77], t52 = t53;
+  const $sizing = t52, t54 = typeof asProp == "string" ? asProp : void 0;
+  let t55;
+  return $[78] !== t54 || $[79] !== restProps || $[80] !== $column || $[81] !== $columnStart || $[82] !== $columnEnd || $[83] !== $display || $[84] !== $flex || $[85] !== $height || $[86] !== $margin || $[87] !== $marginX || $[88] !== $marginY || $[89] !== $marginTop || $[90] !== $marginRight || $[91] !== $marginBottom || $[92] !== $marginLeft || $[93] !== $overflow || $[94] !== $padding || $[95] !== $paddingX || $[96] !== $paddingY || $[97] !== $paddingTop || $[98] !== $paddingRight || $[99] !== $paddingBottom || $[100] !== $paddingLeft || $[101] !== $row || $[102] !== $rowStart || $[103] !== $rowEnd || $[104] !== $sizing || $[105] !== asProp || $[106] !== ref || $[107] !== props.children ? (t55 = /* @__PURE__ */ jsx(Root$y, { "data-as": t54, "data-ui": "Box", ...restProps, $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 }), $[78] = t54, $[79] = restProps, $[80] = $column, $[81] = $columnStart, $[82] = $columnEnd, $[83] = $display, $[84] = $flex, $[85] = $height, $[86] = $margin, $[87] = $marginX, $[88] = $marginY, $[89] = $marginTop, $[90] = $marginRight, $[91] = $marginBottom, $[92] = $marginLeft, $[93] = $overflow, $[94] = $padding, $[95] = $paddingX, $[96] = $paddingY, $[97] = $paddingTop, $[98] = $paddingRight, $[99] = $paddingBottom, $[100] = $paddingLeft, $[101] = $row, $[102] = $rowStart, $[103] = $rowEnd, $[104] = $sizing, $[105] = asProp, $[106] = ref, $[107] = props.children, $[108] = t55) : t55 = $[108], t55;
 });
 function textBaseStyle(props) {
   const {
@@ -1857,8 +1432,8 @@ const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBase
   overflow: hidden;
   overflow: clip;
 `, Text = forwardRef(function(props, ref) {
-  const $ = c(22);
-  let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
+  const $ = c(26);
+  let t0, t1, t2, align, childrenProp, textOverflow, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
     align,
@@ -1868,18 +1443,23 @@ const Root$x = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBase
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = childrenProp, $[5] = textOverflow, $[6] = align, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], childrenProp = $[4], textOverflow = $[5], align = $[6], restProps = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = align, $[5] = childrenProp, $[6] = textOverflow, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], align = $[4], childrenProp = $[5], textOverflow = $[6], restProps = $[7], weight = $[8]);
   const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
+  let t3, t4;
+  $[9] !== size2 ? (t4 = _getArrayProp(size2), $[9] = size2, $[10] = t4) : t4 = $[10], t3 = t4;
+  const $size = t3;
+  let t5, t6;
+  $[11] !== align ? (t6 = _getArrayProp(align), $[11] = align, $[12] = t6) : t6 = $[12], t5 = t6;
+  const $align = t5;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    let t32;
-    $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow$1, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+    let t72;
+    $[13] !== children ? (t72 = /* @__PURE__ */ jsx(SpanWithTextOverflow$1, { children }), $[13] = children, $[14] = t72) : t72 = $[14], children = t72;
   }
-  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
-  let t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
-  let t6;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t3 || $[16] !== muted || $[17] !== ref || $[18] !== t4 || $[19] !== weight || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = restProps, $[14] = accent, $[15] = t3, $[16] = muted, $[17] = ref, $[18] = t4, $[19] = weight, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  let t7;
+  $[15] !== children ? (t7 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t7) : t7 = $[16];
+  let t8;
+  return $[17] !== restProps || $[18] !== accent || $[19] !== $align || $[20] !== $size || $[21] !== muted || $[22] !== ref || $[23] !== weight || $[24] !== t7 ? (t8 = /* @__PURE__ */ jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align, $size, $muted: muted, ref, $weight: weight, children: t7 }), $[17] = restProps, $[18] = accent, $[19] = $align, $[20] = $size, $[21] = muted, $[22] = ref, $[23] = weight, $[24] = t7, $[25] = t8) : t8 = $[25], t8;
 });
 function badgeStyle(props) {
   const {
@@ -1897,7 +1477,7 @@ function badgeStyle(props) {
   };
 }
 const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(21);
   let t0, t1, t2, t3, children, restProps;
   if ($[0] !== props) {
     const {
@@ -1906,19 +1486,25 @@ const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRe
       mode: _deprecated_mode,
       padding: t62,
       radius: t72,
-      tone: t8,
-      ...t9
+      tone: t82,
+      ...t92
     } = props;
-    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t8, restProps = t9, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = children, $[6] = restProps;
+    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t82, restProps = t92, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = children, $[6] = restProps;
   } else
     t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], children = $[5], restProps = $[6];
-  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? "full" : t2, tone = t3 === void 0 ? "default" : t3, t4 = useArrayProp(radius), t5 = useArrayProp(padding);
-  let t6;
-  $[7] !== fontSize2 || $[8] !== children ? (t6 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children }), $[7] = fontSize2, $[8] = children, $[9] = t6) : t6 = $[9];
-  let t7;
-  return $[10] !== restProps || $[11] !== tone || $[12] !== t4 || $[13] !== t5 || $[14] !== ref || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = restProps, $[11] = tone, $[12] = t4, $[13] = t5, $[14] = ref, $[15] = t6, $[16] = t7) : t7 = $[16], t7;
+  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? "full" : t2, tone = t3 === void 0 ? "default" : t3;
+  let t4, t5;
+  $[7] !== radius ? (t5 = _getArrayProp(radius), $[7] = radius, $[8] = t5) : t5 = $[8], t4 = t5;
+  const $radius = t4;
+  let t6, t7;
+  $[9] !== padding ? (t7 = _getArrayProp(padding), $[9] = padding, $[10] = t7) : t7 = $[10], t6 = t7;
+  const $padding = t6;
+  let t8;
+  $[11] !== fontSize2 || $[12] !== children ? (t8 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children }), $[11] = fontSize2, $[12] = children, $[13] = t8) : t8 = $[13];
+  let t9;
+  return $[14] !== restProps || $[15] !== tone || $[16] !== $radius || $[17] !== $padding || $[18] !== ref || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius, padding: $padding, ref, children: t8 }), $[14] = restProps, $[15] = tone, $[16] = $radius, $[17] = $padding, $[18] = ref, $[19] = t8, $[20] = t9) : t9 = $[20], t9;
 }), Root$v = styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(27);
   let t0, align, gap, justify, wrap, restProps, as;
   $[0] !== props ? ({
     align,
@@ -1929,9 +1515,24 @@ const Root$w = styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = forwardRe
     wrap,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = align, $[3] = gap, $[4] = justify, $[5] = wrap, $[6] = restProps, $[7] = as) : (t0 = $[1], align = $[2], gap = $[3], justify = $[4], wrap = $[5], restProps = $[6], as = $[7]);
-  const direction = t0 === void 0 ? "row" : t0, t1 = useArrayProp(align), t2 = useArrayProp(direction), t3 = useArrayProp(gap), t4 = useArrayProp(justify), t5 = useArrayProp(wrap);
-  let t6;
-  return $[8] !== restProps || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== as || $[15] !== ref ? (t6 = /* @__PURE__ */ jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = restProps, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = as, $[15] = ref, $[16] = t6) : t6 = $[16], t6;
+  const direction = t0 === void 0 ? "row" : t0;
+  let t1, t2;
+  $[8] !== align ? (t2 = _getArrayProp(align), $[8] = align, $[9] = t2) : t2 = $[9], t1 = t2;
+  const $align = t1;
+  let t3, t4;
+  $[10] !== direction ? (t4 = _getArrayProp(direction), $[10] = direction, $[11] = t4) : t4 = $[11], t3 = t4;
+  const $direction = t3;
+  let t5, t6;
+  $[12] !== gap ? (t6 = _getArrayProp(gap), $[12] = gap, $[13] = t6) : t6 = $[13], t5 = t6;
+  const $gap = t5;
+  let t7, t8;
+  $[14] !== justify ? (t8 = _getArrayProp(justify), $[14] = justify, $[15] = t8) : t8 = $[15], t7 = t8;
+  const $justify = t7;
+  let t9, t10;
+  $[16] !== wrap ? (t10 = _getArrayProp(wrap), $[16] = wrap, $[17] = t10) : t10 = $[17], t9 = t10;
+  const $wrap = t9;
+  let t11;
+  return $[18] !== restProps || $[19] !== $align || $[20] !== $direction || $[21] !== $gap || $[22] !== $justify || $[23] !== $wrap || $[24] !== as || $[25] !== ref ? (t11 = /* @__PURE__ */ jsx(Root$v, { "data-ui": "Flex", ...restProps, $align, $direction, $gap, $justify, $wrap, forwardedAs: as, ref }), $[18] = restProps, $[19] = $align, $[20] = $direction, $[21] = $gap, $[22] = $justify, $[23] = $wrap, $[24] = as, $[25] = ref, $[26] = t11) : t11 = $[26], t11;
 }), rotate$1 = keyframes`
   from {
     transform: rotate(0deg);
@@ -2126,7 +1727,7 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
   z-index: 1;
   box-shadow: inherit;
 `, Button = forwardRef(function(props, ref) {
-  const $ = c(64);
+  const $ = c(84);
   let t0, t1, t2, t3, t4, t5, t6, t7, t8, paddingXProp, paddingYProp, paddingTopProp, paddingBottomProp, paddingLeftProp, paddingRightProp, loading, disabled, selected, IconComponent, text, IconRightComponent, textAlign, children, restProps, width;
   $[0] !== props ? ({
     children,
@@ -2157,9 +1758,39 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = t7, $[9] = t8, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = paddingTopProp, $[13] = paddingBottomProp, $[14] = paddingLeftProp, $[15] = paddingRightProp, $[16] = loading, $[17] = disabled, $[18] = selected, $[19] = IconComponent, $[20] = text, $[21] = IconRightComponent, $[22] = textAlign, $[23] = children, $[24] = restProps, $[25] = width) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], t7 = $[8], t8 = $[9], paddingXProp = $[10], paddingYProp = $[11], paddingTopProp = $[12], paddingBottomProp = $[13], paddingLeftProp = $[14], paddingRightProp = $[15], loading = $[16], disabled = $[17], selected = $[18], IconComponent = $[19], text = $[20], IconRightComponent = $[21], textAlign = $[22], children = $[23], restProps = $[24], width = $[25]);
   const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
     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);
+  } = useTheme_v2();
   let t9, t10;
-  $[26] !== padding || $[27] !== paddingX || $[28] !== paddingY || $[29] !== paddingTop || $[30] !== paddingBottom || $[31] !== paddingLeft || $[32] !== paddingRight ? (t10 = {
+  $[26] !== justifyProp ? (t10 = _getArrayProp(justifyProp), $[26] = justifyProp, $[27] = t10) : t10 = $[27], t9 = t10;
+  const justify = t9;
+  let t11, t12;
+  $[28] !== paddingProp ? (t12 = _getArrayProp(paddingProp), $[28] = paddingProp, $[29] = t12) : t12 = $[29], t11 = t12;
+  const padding = t11;
+  let t13, t14;
+  $[30] !== paddingXProp ? (t14 = _getArrayProp(paddingXProp), $[30] = paddingXProp, $[31] = t14) : t14 = $[31], t13 = t14;
+  const paddingX = t13;
+  let t15, t16;
+  $[32] !== paddingYProp ? (t16 = _getArrayProp(paddingYProp), $[32] = paddingYProp, $[33] = t16) : t16 = $[33], t15 = t16;
+  const paddingY = t15;
+  let t17, t18;
+  $[34] !== paddingTopProp ? (t18 = _getArrayProp(paddingTopProp), $[34] = paddingTopProp, $[35] = t18) : t18 = $[35], t17 = t18;
+  const paddingTop = t17;
+  let t19, t20;
+  $[36] !== paddingBottomProp ? (t20 = _getArrayProp(paddingBottomProp), $[36] = paddingBottomProp, $[37] = t20) : t20 = $[37], t19 = t20;
+  const paddingBottom = t19;
+  let t21, t22;
+  $[38] !== paddingLeftProp ? (t22 = _getArrayProp(paddingLeftProp), $[38] = paddingLeftProp, $[39] = t22) : t22 = $[39], t21 = t22;
+  const paddingLeft = t21;
+  let t23, t24;
+  $[40] !== paddingRightProp ? (t24 = _getArrayProp(paddingRightProp), $[40] = paddingRightProp, $[41] = t24) : t24 = $[41], t23 = t24;
+  const paddingRight = t23;
+  let t25, t26;
+  $[42] !== radiusProp ? (t26 = _getArrayProp(radiusProp), $[42] = radiusProp, $[43] = t26) : t26 = $[43], t25 = t26;
+  const radius = t25;
+  let t27, t28;
+  $[44] !== spaceProp ? (t28 = _getArrayProp(spaceProp), $[44] = spaceProp, $[45] = t28) : t28 = $[45], t27 = t28;
+  const space = t27;
+  let t29, t30;
+  $[46] !== padding || $[47] !== paddingX || $[48] !== paddingY || $[49] !== paddingTop || $[50] !== paddingBottom || $[51] !== paddingLeft || $[52] !== paddingRight ? (t30 = {
     padding,
     paddingX,
     paddingY,
@@ -2167,12 +1798,12 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
     paddingBottom,
     paddingLeft,
     paddingRight
-  }, $[26] = padding, $[27] = paddingX, $[28] = paddingY, $[29] = paddingTop, $[30] = paddingBottom, $[31] = paddingLeft, $[32] = paddingRight, $[33] = t10) : t10 = $[33], t9 = t10;
-  const boxProps = t9, t11 = !!(loading || disabled), t12 = selected ? "" : void 0, t13 = !!(loading || disabled);
-  let t14;
-  $[34] !== loading ? (t14 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[34] = loading, $[35] = t14) : t14 = $[35];
-  let t15;
-  $[36] !== IconComponent || $[37] !== text || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== muted || $[41] !== textAlign || $[42] !== button || $[43] !== justify || $[44] !== space || $[45] !== boxProps ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
+  }, $[46] = padding, $[47] = paddingX, $[48] = paddingY, $[49] = paddingTop, $[50] = paddingBottom, $[51] = paddingLeft, $[52] = paddingRight, $[53] = t30) : t30 = $[53], t29 = t30;
+  const boxProps = t29, t31 = !!(loading || disabled), t32 = selected ? "" : void 0, t33 = !!(loading || disabled);
+  let t34;
+  $[54] !== loading ? (t34 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[54] = loading, $[55] = t34) : t34 = $[55];
+  let t35;
+  $[56] !== IconComponent || $[57] !== text || $[58] !== IconRightComponent || $[59] !== fontSize2 || $[60] !== muted || $[61] !== textAlign || $[62] !== button || $[63] !== justify || $[64] !== space || $[65] !== boxProps ? (t35 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -2182,15 +1813,15 @@ const Root$t = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColo
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }) }), $[36] = IconComponent, $[37] = text, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = muted, $[41] = textAlign, $[42] = button, $[43] = justify, $[44] = space, $[45] = boxProps, $[46] = t15) : t15 = $[46];
-  let t16;
-  $[47] !== children || $[48] !== boxProps ? (t16 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[47] = children, $[48] = boxProps, $[49] = t16) : t16 = $[49];
-  let t17;
-  return $[50] !== restProps || $[51] !== mode || $[52] !== radius || $[53] !== tone || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== ref || $[58] !== type || $[59] !== width || $[60] !== t14 || $[61] !== t15 || $[62] !== t16 ? (t17 = /* @__PURE__ */ jsxs(Root$t, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t11, "data-selected": t12, disabled: t13, ref, type, $width: width, children: [
-    t14,
-    t15,
-    t16
-  ] }), $[50] = restProps, $[51] = mode, $[52] = radius, $[53] = tone, $[54] = t11, $[55] = t12, $[56] = t13, $[57] = ref, $[58] = type, $[59] = width, $[60] = t14, $[61] = t15, $[62] = t16, $[63] = t17) : t17 = $[63], t17;
+  ] }) }), $[56] = IconComponent, $[57] = text, $[58] = IconRightComponent, $[59] = fontSize2, $[60] = muted, $[61] = textAlign, $[62] = button, $[63] = justify, $[64] = space, $[65] = boxProps, $[66] = t35) : t35 = $[66];
+  let t36;
+  $[67] !== children || $[68] !== boxProps ? (t36 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[67] = children, $[68] = boxProps, $[69] = t36) : t36 = $[69];
+  let t37;
+  return $[70] !== restProps || $[71] !== mode || $[72] !== radius || $[73] !== tone || $[74] !== t31 || $[75] !== t32 || $[76] !== t33 || $[77] !== ref || $[78] !== type || $[79] !== width || $[80] !== t34 || $[81] !== t35 || $[82] !== t36 ? (t37 = /* @__PURE__ */ jsxs(Root$t, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t31, "data-selected": t32, disabled: t33, ref, type, $width: width, children: [
+    t34,
+    t35,
+    t36
+  ] }), $[70] = restProps, $[71] = mode, $[72] = radius, $[73] = tone, $[74] = t31, $[75] = t32, $[76] = t33, $[77] = ref, $[78] = type, $[79] = width, $[80] = t34, $[81] = t35, $[82] = t36, $[83] = t37) : t37 = $[83], t37;
 });
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
@@ -2337,37 +1968,557 @@ function cardColorStyle(props) {
         }
       }
     }
-
-    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
-  `;
+
+    ${(_a = style == null ? void 0 : style.card) == null ? void 0 : _a.root}
+  `;
+}
+const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+  const $ = c(56);
+  let t0, t1, t2, t3, asProp, border2, borderTop2, borderRight2, borderBottom2, borderLeft2, shadow, pressed, selected, restProps, muted, scheme;
+  $[0] !== props ? ({
+    __unstable_checkered: t0,
+    __unstable_focusRing: t1,
+    as: asProp,
+    border: border2,
+    borderTop: borderTop2,
+    borderRight: borderRight2,
+    borderBottom: borderBottom2,
+    borderLeft: borderLeft2,
+    muted,
+    pressed,
+    radius: t2,
+    scheme,
+    selected,
+    shadow,
+    tone: t3,
+    ...restProps
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = asProp, $[6] = border2, $[7] = borderTop2, $[8] = borderRight2, $[9] = borderBottom2, $[10] = borderLeft2, $[11] = shadow, $[12] = pressed, $[13] = selected, $[14] = restProps, $[15] = muted, $[16] = scheme) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], asProp = $[5], border2 = $[6], borderTop2 = $[7], borderRight2 = $[8], borderBottom2 = $[9], borderLeft2 = $[10], shadow = $[11], pressed = $[12], selected = $[13], restProps = $[14], muted = $[15], scheme = $[16]);
+  const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
+  let t4, t5;
+  $[17] !== border2 ? (t5 = _getArrayProp(border2), $[17] = border2, $[18] = t5) : t5 = $[18], t4 = t5;
+  const $border = t4;
+  let t6, t7;
+  $[19] !== borderTop2 ? (t7 = _getArrayProp(borderTop2), $[19] = borderTop2, $[20] = t7) : t7 = $[20], t6 = t7;
+  const $borderTop = t6;
+  let t8, t9;
+  $[21] !== borderRight2 ? (t9 = _getArrayProp(borderRight2), $[21] = borderRight2, $[22] = t9) : t9 = $[22], t8 = t9;
+  const $borderRight = t8;
+  let t10, t11;
+  $[23] !== borderBottom2 ? (t11 = _getArrayProp(borderBottom2), $[23] = borderBottom2, $[24] = t11) : t11 = $[24], t10 = t11;
+  const $borderBottom = t10;
+  let t12, t13;
+  $[25] !== borderLeft2 ? (t13 = _getArrayProp(borderLeft2), $[25] = borderLeft2, $[26] = t13) : t13 = $[26], t12 = t13;
+  const $borderLeft = t12;
+  let t14, t15;
+  $[27] !== radius ? (t15 = _getArrayProp(radius), $[27] = radius, $[28] = t15) : t15 = $[28], t14 = t15;
+  const $radius = t14;
+  let t16, t17;
+  $[29] !== shadow ? (t17 = _getArrayProp(shadow), $[29] = shadow, $[30] = t17) : t17 = $[30], t16 = t17;
+  const $shadow = t16, t18 = typeof as == "string" ? as : void 0, t19 = checkered ? "" : void 0, t20 = pressed ? "" : void 0, t21 = selected ? "" : void 0;
+  let t22;
+  $[31] !== t18 || $[32] !== rootTheme.scheme || $[33] !== tone || $[34] !== restProps || $[35] !== $border || $[36] !== $borderTop || $[37] !== $borderRight || $[38] !== $borderBottom || $[39] !== $borderLeft || $[40] !== $radius || $[41] !== $shadow || $[42] !== checkered || $[43] !== focusRing || $[44] !== muted || $[45] !== t19 || $[46] !== t20 || $[47] !== t21 || $[48] !== as || $[49] !== ref || $[50] !== selected ? (t22 = /* @__PURE__ */ jsx(Root$s, { "data-as": t18, "data-scheme": rootTheme.scheme, "data-ui": "Card", "data-tone": tone, ...restProps, $border, $borderTop, $borderRight, $borderBottom, $borderLeft, $radius, $shadow, $checkered: checkered, $focusRing: focusRing, $muted: muted, $tone: tone, "data-checkered": t19, "data-pressed": t20, "data-selected": t21, forwardedAs: as, ref, selected }), $[31] = t18, $[32] = rootTheme.scheme, $[33] = tone, $[34] = restProps, $[35] = $border, $[36] = $borderTop, $[37] = $borderRight, $[38] = $borderBottom, $[39] = $borderLeft, $[40] = $radius, $[41] = $shadow, $[42] = checkered, $[43] = focusRing, $[44] = muted, $[45] = t19, $[46] = t20, $[47] = t21, $[48] = as, $[49] = ref, $[50] = selected, $[51] = t22) : t22 = $[51];
+  let t23;
+  return $[52] !== scheme || $[53] !== tone || $[54] !== t22 ? (t23 = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: t22 }), $[52] = scheme, $[53] = tone, $[54] = t22, $[55] = t23) : t23 = $[55], t23;
+});
+function useArrayProp(val, defaultVal) {
+  const $ = c(3);
+  let t0, t1;
+  return $[0] !== val || $[1] !== defaultVal ? (t1 = _getArrayProp(val, defaultVal), $[0] = val, $[1] = defaultVal, $[2] = t1) : t1 = $[2], t0 = t1, t0;
+}
+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, t0, boundaryElement) {
+  const $ = c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
+  let t1;
+  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
+  const [elements, setElements] = useState(t1), elementsRef = useRef(elements);
+  let t2, t3;
+  $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
+    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_0 of nextElements)
+      if (!prevElements.includes(el_0)) {
+        setElements(nextElements), elementsRef.current = nextElements;
+        return;
+      }
+  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
+  let t4, t5;
+  return $[7] !== listener || $[8] !== boundaryElement || $[9] !== elements ? (t4 = () => {
+    if (!listener)
+      return;
+    const handleWindowMouseDown = (evt) => {
+      const target = evt.target;
+      if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
+        for (const el_1 of elements)
+          if (target === el_1 || el_1.contains(target))
+            return;
+        listener(evt);
+      }
+    };
+    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
+      window.removeEventListener("mousedown", handleWindowMouseDown);
+    };
+  }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5), setElement;
+}
+var resizeObservers = [], hasActiveObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.activeTargets.length > 0;
+  });
+}, hasSkippedObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.skippedTargets.length > 0;
+  });
+}, msg = "ResizeObserver loop completed with undelivered notifications.", deliverResizeLoopError = function() {
+  var event;
+  typeof ErrorEvent == "function" ? event = new ErrorEvent("error", {
+    message: msg
+  }) : (event = document.createEvent("Event"), event.initEvent("error", !1, !1), event.message = msg), window.dispatchEvent(event);
+}, ResizeObserverBoxOptions;
+(function(ResizeObserverBoxOptions2) {
+  ResizeObserverBoxOptions2.BORDER_BOX = "border-box", ResizeObserverBoxOptions2.CONTENT_BOX = "content-box", ResizeObserverBoxOptions2.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
+})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+var freeze = function(obj) {
+  return Object.freeze(obj);
+}, ResizeObserverSize = /* @__PURE__ */ function() {
+  function ResizeObserverSize2(inlineSize, blockSize) {
+    this.inlineSize = inlineSize, this.blockSize = blockSize, freeze(this);
+  }
+  return ResizeObserverSize2;
+}(), DOMRectReadOnly = function() {
+  function DOMRectReadOnly2(x, y, width, height) {
+    return this.x = x, this.y = y, this.width = width, this.height = height, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, freeze(this);
+  }
+  return DOMRectReadOnly2.prototype.toJSON = function() {
+    var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
+    return {
+      x,
+      y,
+      top,
+      right,
+      bottom,
+      left,
+      width,
+      height
+    };
+  }, DOMRectReadOnly2.fromRect = function(rectangle) {
+    return new DOMRectReadOnly2(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+  }, DOMRectReadOnly2;
+}(), isSVG = function(target) {
+  return target instanceof SVGElement && "getBBox" in target;
+}, isHidden = function(target) {
+  if (isSVG(target)) {
+    var _a = target.getBBox(), width = _a.width, height = _a.height;
+    return !width && !height;
+  }
+  var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
+  return !(offsetWidth || offsetHeight || target.getClientRects().length);
+}, isElement = function(obj) {
+  var _a;
+  if (obj instanceof Element)
+    return !0;
+  var scope = (_a = obj == null ? void 0 : obj.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView;
+  return !!(scope && obj instanceof scope.Element);
+}, isReplacedElement = function(target) {
+  switch (target.tagName) {
+    case "INPUT":
+      if (target.type !== "image")
+        break;
+    case "VIDEO":
+    case "AUDIO":
+    case "EMBED":
+    case "OBJECT":
+    case "CANVAS":
+    case "IFRAME":
+    case "IMG":
+      return !0;
+  }
+  return !1;
+}, global$1 = typeof window < "u" ? window : {}, cache = /* @__PURE__ */ new WeakMap(), scrollRegexp = /auto|scroll/, verticalRegexp = /^tb|vertical/, IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent), parseDimension = function(pixel) {
+  return parseFloat(pixel || "0");
+}, size$1 = function(inlineSize, blockSize, switchSizes) {
+  return inlineSize === void 0 && (inlineSize = 0), blockSize === void 0 && (blockSize = 0), switchSizes === void 0 && (switchSizes = !1), new ResizeObserverSize((switchSizes ? blockSize : inlineSize) || 0, (switchSizes ? inlineSize : blockSize) || 0);
+}, zeroBoxes = freeze({
+  devicePixelContentBoxSize: size$1(),
+  borderBoxSize: size$1(),
+  contentBoxSize: size$1(),
+  contentRect: new DOMRectReadOnly(0, 0, 0, 0)
+}), calculateBoxSizes = function(target, forceRecalculation) {
+  if (forceRecalculation === void 0 && (forceRecalculation = !1), cache.has(target) && !forceRecalculation)
+    return cache.get(target);
+  if (isHidden(target))
+    return cache.set(target, zeroBoxes), zeroBoxes;
+  var cs = getComputedStyle(target), svg = isSVG(target) && target.ownerSVGElement && target.getBBox(), removePadding = !IE && cs.boxSizing === "border-box", switchSizes = verticalRegexp.test(cs.writingMode || ""), canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || ""), canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || ""), paddingTop = svg ? 0 : parseDimension(cs.paddingTop), paddingRight = svg ? 0 : parseDimension(cs.paddingRight), paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom), paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft), borderTop2 = svg ? 0 : parseDimension(cs.borderTopWidth), borderRight2 = svg ? 0 : parseDimension(cs.borderRightWidth), borderBottom2 = svg ? 0 : parseDimension(cs.borderBottomWidth), borderLeft2 = svg ? 0 : parseDimension(cs.borderLeftWidth), horizontalPadding = paddingLeft + paddingRight, verticalPadding = paddingTop + paddingBottom, horizontalBorderArea = borderLeft2 + borderRight2, verticalBorderArea = borderTop2 + borderBottom2, horizontalScrollbarThickness = canScrollHorizontally ? target.offsetHeight - verticalBorderArea - target.clientHeight : 0, verticalScrollbarThickness = canScrollVertically ? target.offsetWidth - horizontalBorderArea - target.clientWidth : 0, widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0, heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0, contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness, contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness, borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea, borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea, boxes = freeze({
+    devicePixelContentBoxSize: size$1(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+    borderBoxSize: size$1(borderBoxWidth, borderBoxHeight, switchSizes),
+    contentBoxSize: size$1(contentWidth, contentHeight, switchSizes),
+    contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
+  });
+  return cache.set(target, boxes), boxes;
+}, calculateBoxSize = function(target, observedBox, forceRecalculation) {
+  var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+  switch (observedBox) {
+    case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
+      return devicePixelContentBoxSize;
+    case ResizeObserverBoxOptions.BORDER_BOX:
+      return borderBoxSize;
+    default:
+      return contentBoxSize;
+  }
+}, ResizeObserverEntry = /* @__PURE__ */ function() {
+  function ResizeObserverEntry2(target) {
+    var boxes = calculateBoxSizes(target);
+    this.target = target, this.contentRect = boxes.contentRect, this.borderBoxSize = freeze([boxes.borderBoxSize]), this.contentBoxSize = freeze([boxes.contentBoxSize]), this.devicePixelContentBoxSize = freeze([boxes.devicePixelContentBoxSize]);
+  }
+  return ResizeObserverEntry2;
+}(), calculateDepthForNode = function(node) {
+  if (isHidden(node))
+    return 1 / 0;
+  for (var depth = 0, parent = node.parentNode; parent; )
+    depth += 1, parent = parent.parentNode;
+  return depth;
+}, broadcastActiveObservations = function() {
+  var shallowestDepth = 1 / 0, callbacks2 = [];
+  resizeObservers.forEach(function(ro) {
+    if (ro.activeTargets.length !== 0) {
+      var entries = [];
+      ro.activeTargets.forEach(function(ot) {
+        var entry = new ResizeObserverEntry(ot.target), targetDepth = calculateDepthForNode(ot.target);
+        entries.push(entry), ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox), targetDepth < shallowestDepth && (shallowestDepth = targetDepth);
+      }), callbacks2.push(function() {
+        ro.callback.call(ro.observer, entries, ro.observer);
+      }), ro.activeTargets.splice(0, ro.activeTargets.length);
+    }
+  });
+  for (var _i = 0, callbacks_1 = callbacks2; _i < callbacks_1.length; _i++) {
+    var callback = callbacks_1[_i];
+    callback();
+  }
+  return shallowestDepth;
+}, gatherActiveObservationsAtDepth = function(depth) {
+  resizeObservers.forEach(function(ro) {
+    ro.activeTargets.splice(0, ro.activeTargets.length), ro.skippedTargets.splice(0, ro.skippedTargets.length), ro.observationTargets.forEach(function(ot) {
+      ot.isActive() && (calculateDepthForNode(ot.target) > depth ? ro.activeTargets.push(ot) : ro.skippedTargets.push(ot));
+    });
+  });
+}, process = function() {
+  var depth = 0;
+  for (gatherActiveObservationsAtDepth(depth); hasActiveObservations(); )
+    depth = broadcastActiveObservations(), gatherActiveObservationsAtDepth(depth);
+  return hasSkippedObservations() && deliverResizeLoopError(), depth > 0;
+}, trigger, callbacks = [], notify = function() {
+  return callbacks.splice(0).forEach(function(cb) {
+    return cb();
+  });
+}, queueMicroTask = function(callback) {
+  if (!trigger) {
+    var toggle_1 = 0, el_1 = document.createTextNode(""), config = {
+      characterData: !0
+    };
+    new MutationObserver(function() {
+      return notify();
+    }).observe(el_1, config), trigger = function() {
+      el_1.textContent = "".concat(toggle_1 ? toggle_1-- : toggle_1++);
+    };
+  }
+  callbacks.push(callback), trigger();
+}, queueResizeObserver = function(cb) {
+  queueMicroTask(function() {
+    requestAnimationFrame(cb);
+  });
+}, watching = 0, isWatching = function() {
+  return !!watching;
+}, CATCH_PERIOD = 250, observerConfig = {
+  attributes: !0,
+  characterData: !0,
+  childList: !0,
+  subtree: !0
+}, events = ["resize", "load", "transitionend", "animationend", "animationstart", "animationiteration", "keyup", "keydown", "mouseup", "mousedown", "mouseover", "mouseout", "blur", "focus"], time = function(timeout) {
+  return timeout === void 0 && (timeout = 0), Date.now() + timeout;
+}, scheduled = !1, Scheduler = function() {
+  function Scheduler2() {
+    var _this = this;
+    this.stopped = !0, this.listener = function() {
+      return _this.schedule();
+    };
+  }
+  return Scheduler2.prototype.run = function(timeout) {
+    var _this = this;
+    if (timeout === void 0 && (timeout = CATCH_PERIOD), !scheduled) {
+      scheduled = !0;
+      var until = time(timeout);
+      queueResizeObserver(function() {
+        var elementsHaveResized = !1;
+        try {
+          elementsHaveResized = process();
+        } finally {
+          if (scheduled = !1, timeout = until - time(), !isWatching())
+            return;
+          elementsHaveResized ? _this.run(1e3) : timeout > 0 ? _this.run(timeout) : _this.start();
+        }
+      });
+    }
+  }, 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 $ = c(3), [size2, setSize] = useState(null);
+  let t0, t1;
+  return $[0] !== element ? (t0 = () => {
+    if (element)
+      return _elementSizeObserver.subscribe(element, setSize);
+  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
+}
+function useElementRect(element) {
+  const elementSize = useElementSize(element);
+  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
+}
+function useGlobalKeyDown(onKeyDown) {
+  const $ = c(3);
+  let t0, t1;
+  return $[0] !== onKeyDown ? (t0 = () => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), t1 = [onKeyDown], $[0] = onKeyDown, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1);
+}
+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 $ = c(4), {
+    media
+  } = useTheme_v2();
+  let t0;
+  $[0] !== media ? (t0 = MEDIA_STORE_CACHE.get(media), $[0] = media, $[1] = t0) : t0 = $[1];
+  let store = t0;
+  return store || ($[2] !== media ? (store = _createMediaStore(media), MEDIA_STORE_CACHE.set(media, store), $[2] = media, $[3] = store) : store = $[3]), 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 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 useSyncExternalStore(subscribe$1, getSnapshot, getServerSnapshot);
+}
+function useForwardedRef(ref) {
+  const $ = c(1), innerRef = useRef(null);
+  let t0;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], useImperativeHandle(ref, t0), innerRef;
+}
+function useCustomValidity(ref, customValidity) {
+  const $ = c(6);
+  let t0;
+  $[0] !== ref.current || $[1] !== customValidity ? (t0 = () => {
+    var _a;
+    (_a = ref.current) == null || _a.setCustomValidity(customValidity || "");
+  }, $[0] = ref.current, $[1] = customValidity, $[2] = t0) : t0 = $[2];
+  let t1;
+  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], useEffect(t0, t1);
 }
-const Root$s = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
-  const $ = c(42);
-  let t0, t1, t2, t3, asProp, border2, borderTop2, borderRight2, borderBottom2, borderLeft2, shadow, pressed, selected, restProps, muted, scheme;
-  $[0] !== props ? ({
-    __unstable_checkered: t0,
-    __unstable_focusRing: t1,
-    as: asProp,
-    border: border2,
-    borderTop: borderTop2,
-    borderRight: borderRight2,
-    borderBottom: borderBottom2,
-    borderLeft: borderLeft2,
-    muted,
-    pressed,
-    radius: t2,
-    scheme,
-    selected,
-    shadow,
-    tone: t3,
-    ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = asProp, $[6] = border2, $[7] = borderTop2, $[8] = borderRight2, $[9] = borderBottom2, $[10] = borderLeft2, $[11] = shadow, $[12] = pressed, $[13] = selected, $[14] = restProps, $[15] = muted, $[16] = scheme) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], asProp = $[5], border2 = $[6], borderTop2 = $[7], borderRight2 = $[8], borderBottom2 = $[9], borderLeft2 = $[10], shadow = $[11], pressed = $[12], selected = $[13], restProps = $[14], muted = $[15], scheme = $[16]);
-  const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = useArrayProp(border2), t6 = useArrayProp(borderTop2), t7 = useArrayProp(borderRight2), t8 = useArrayProp(borderBottom2), t9 = useArrayProp(borderLeft2), t10 = useArrayProp(radius), t11 = useArrayProp(shadow), t12 = checkered ? "" : void 0, t13 = pressed ? "" : void 0, t14 = selected ? "" : void 0;
-  let t15;
-  $[17] !== t4 || $[18] !== rootTheme.scheme || $[19] !== tone || $[20] !== restProps || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 || $[26] !== checkered || $[27] !== focusRing || $[28] !== muted || $[29] !== t10 || $[30] !== t11 || $[31] !== t12 || $[32] !== t13 || $[33] !== t14 || $[34] !== as || $[35] !== ref || $[36] !== selected ? (t15 = /* @__PURE__ */ jsx(Root$s, { "data-as": t4, "data-scheme": rootTheme.scheme, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t5, $borderTop: t6, $borderRight: t7, $borderBottom: t8, $borderLeft: t9, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t10, $shadow: t11, $tone: tone, "data-checkered": t12, "data-pressed": t13, "data-selected": t14, forwardedAs: as, ref, selected }), $[17] = t4, $[18] = rootTheme.scheme, $[19] = tone, $[20] = restProps, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9, $[26] = checkered, $[27] = focusRing, $[28] = muted, $[29] = t10, $[30] = t11, $[31] = t12, $[32] = t13, $[33] = t14, $[34] = as, $[35] = ref, $[36] = selected, $[37] = t15) : t15 = $[37];
-  let t16;
-  return $[38] !== scheme || $[39] !== tone || $[40] !== t15 ? (t16 = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: t15 }), $[38] = scheme, $[39] = tone, $[40] = t15, $[41] = t16) : t16 = $[41], t16;
-});
 function checkboxBaseStyles() {
   return css`
     position: relative;
@@ -2691,7 +2842,7 @@ function codeBaseStyle() {
   `;
 }
 const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
-  const $ = c(23);
+  const $ = c(25);
   let t0, languageProp, children, restProps, weight;
   $[0] !== props ? ({
     children,
@@ -2703,16 +2854,19 @@ const Root$q = styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = forwar
   const size2 = t0 === void 0 ? 2 : t0, language = typeof languageProp == "string" ? languageProp : void 0;
   let t1;
   $[6] !== language ? (t1 = language ? Refractor.hasLanguage(language) : !1, $[6] = language, $[7] = t1) : t1 = $[7];
-  const registered = t1, t2 = useArrayProp(size2);
-  let t3;
-  $[8] !== language || $[9] !== registered || $[10] !== children ? (t3 = !(language && registered) && /* @__PURE__ */ jsx("code", { children }), $[8] = language, $[9] = registered, $[10] = children, $[11] = t3) : t3 = $[11];
+  const registered = t1;
+  let t2, t3;
+  $[8] !== size2 ? (t3 = _getArrayProp(size2), $[8] = size2, $[9] = t3) : t3 = $[9], t2 = t3;
+  const $size = t2;
   let t4;
-  $[12] !== language || $[13] !== registered || $[14] !== children ? (t4 = language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(children) }), $[12] = language, $[13] = registered, $[14] = children, $[15] = t4) : t4 = $[15];
+  $[10] !== language || $[11] !== registered || $[12] !== children ? (t4 = !(language && registered) && /* @__PURE__ */ jsx("code", { children }), $[10] = language, $[11] = registered, $[12] = children, $[13] = t4) : t4 = $[13];
   let t5;
-  return $[16] !== restProps || $[17] !== t2 || $[18] !== weight || $[19] !== ref || $[20] !== t3 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: t2, $weight: weight, ref, children: [
-    t3,
-    t4
-  ] }), $[16] = restProps, $[17] = t2, $[18] = weight, $[19] = ref, $[20] = t3, $[21] = t4, $[22] = t5) : t5 = $[22], t5;
+  $[14] !== language || $[15] !== registered || $[16] !== children ? (t5 = language && registered && /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value: String(children) }), $[14] = language, $[15] = registered, $[16] = children, $[17] = t5) : t5 = $[17];
+  let t6;
+  return $[18] !== restProps || $[19] !== $size || $[20] !== weight || $[21] !== ref || $[22] !== t4 || $[23] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Root$q, { "data-ui": "Code", ...restProps, $size, $weight: weight, ref, children: [
+    t4,
+    t5
+  ] }), $[18] = restProps, $[19] = $size, $[20] = weight, $[21] = ref, $[22] = t4, $[23] = t5, $[24] = t6) : t6 = $[24], t6;
 }), BASE_STYLE$1 = {
   width: "100%",
   margin: "0 auto"
@@ -2730,19 +2884,22 @@ function responsiveContainerWidthStyle(props) {
   }));
 }
 const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
-  const $ = c(9);
+  const $ = c(11);
   let t0, restProps, as;
   $[0] !== props ? ({
     as,
     width: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = as) : (t0 = $[1], restProps = $[2], as = $[3]);
-  const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
-  let t2;
-  return $[4] !== restProps || $[5] !== t1 || $[6] !== as || $[7] !== ref ? (t2 = /* @__PURE__ */ jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = restProps, $[5] = t1, $[6] = as, $[7] = ref, $[8] = t2) : t2 = $[8], t2;
+  const width = t0 === void 0 ? 2 : t0;
+  let t1, t2;
+  $[4] !== width ? (t2 = _getArrayProp(width), $[4] = width, $[5] = t2) : t2 = $[5], t1 = t2;
+  const $width = t1;
+  let t3;
+  return $[6] !== restProps || $[7] !== $width || $[8] !== as || $[9] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$p, { "data-ui": "Container", ...restProps, $width, forwardedAs: as, ref }), $[6] = restProps, $[7] = $width, $[8] = as, $[9] = ref, $[10] = t3) : t3 = $[10], t3;
 }), Root$o = styled(Box)(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
-  const $ = c(26);
-  let as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, restProps, children;
+  const $ = c(42);
+  let autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, as, restProps, children;
   $[0] !== props ? ({
     as,
     autoRows,
@@ -2755,10 +2912,33 @@ const Root$p = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), C
     rows,
     children,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = autoRows, $[3] = autoCols, $[4] = autoFlow, $[5] = columns, $[6] = gap, $[7] = gapX, $[8] = gapY, $[9] = rows, $[10] = restProps, $[11] = children) : (as = $[1], autoRows = $[2], autoCols = $[3], autoFlow = $[4], columns = $[5], gap = $[6], gapX = $[7], gapY = $[8], rows = $[9], restProps = $[10], children = $[11]);
-  const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(autoRows), t2 = useArrayProp(autoCols), t3 = useArrayProp(autoFlow), t4 = useArrayProp(columns), t5 = useArrayProp(gap), t6 = useArrayProp(gapX), t7 = useArrayProp(gapY), t8 = useArrayProp(rows);
-  let t9;
-  return $[12] !== t0 || $[13] !== restProps || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== as || $[23] !== ref || $[24] !== children ? (t9 = /* @__PURE__ */ jsx(Root$o, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[12] = t0, $[13] = restProps, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7, $[21] = t8, $[22] = as, $[23] = ref, $[24] = children, $[25] = t9) : t9 = $[25], t9;
+  } = props, $[0] = props, $[1] = autoRows, $[2] = autoCols, $[3] = autoFlow, $[4] = columns, $[5] = gap, $[6] = gapX, $[7] = gapY, $[8] = rows, $[9] = as, $[10] = restProps, $[11] = children) : (autoRows = $[1], autoCols = $[2], autoFlow = $[3], columns = $[4], gap = $[5], gapX = $[6], gapY = $[7], rows = $[8], as = $[9], restProps = $[10], children = $[11]);
+  let t0, t1;
+  $[12] !== autoRows ? (t1 = _getArrayProp(autoRows), $[12] = autoRows, $[13] = t1) : t1 = $[13], t0 = t1;
+  const $autoRows = t0;
+  let t2, t3;
+  $[14] !== autoCols ? (t3 = _getArrayProp(autoCols), $[14] = autoCols, $[15] = t3) : t3 = $[15], t2 = t3;
+  const $autoCols = t2;
+  let t4, t5;
+  $[16] !== autoFlow ? (t5 = _getArrayProp(autoFlow), $[16] = autoFlow, $[17] = t5) : t5 = $[17], t4 = t5;
+  const $autoFlow = t4;
+  let t6, t7;
+  $[18] !== columns ? (t7 = _getArrayProp(columns), $[18] = columns, $[19] = t7) : t7 = $[19], t6 = t7;
+  const $columns = t6;
+  let t8, t9;
+  $[20] !== gap ? (t9 = _getArrayProp(gap), $[20] = gap, $[21] = t9) : t9 = $[21], t8 = t9;
+  const $gap = t8;
+  let t10, t11;
+  $[22] !== gapX ? (t11 = _getArrayProp(gapX), $[22] = gapX, $[23] = t11) : t11 = $[23], t10 = t11;
+  const $gapX = t10;
+  let t12, t13;
+  $[24] !== gapY ? (t13 = _getArrayProp(gapY), $[24] = gapY, $[25] = t13) : t13 = $[25], t12 = t13;
+  const $gapY = t12;
+  let t14, t15;
+  $[26] !== rows ? (t15 = _getArrayProp(rows), $[26] = rows, $[27] = t15) : t15 = $[27], t14 = t15;
+  const $rows = t14, t16 = typeof as == "string" ? as : void 0;
+  let t17;
+  return $[28] !== t16 || $[29] !== restProps || $[30] !== $autoRows || $[31] !== $autoCols || $[32] !== $autoFlow || $[33] !== $columns || $[34] !== $gap || $[35] !== $gapX || $[36] !== $gapY || $[37] !== $rows || $[38] !== as || $[39] !== ref || $[40] !== children ? (t17 = /* @__PURE__ */ jsx(Root$o, { "data-as": t16, "data-ui": "Grid", ...restProps, $autoRows, $autoCols, $autoFlow, $columns, $gap, $gapX, $gapY, $rows, forwardedAs: as, ref, children }), $[28] = t16, $[29] = restProps, $[30] = $autoRows, $[31] = $autoCols, $[32] = $autoFlow, $[33] = $columns, $[34] = $gap, $[35] = $gapX, $[36] = $gapY, $[37] = $rows, $[38] = as, $[39] = ref, $[40] = children, $[41] = t17) : t17 = $[41], t17;
 });
 function headingBaseStyle(props) {
   const {
@@ -2826,8 +3006,8 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
   overflow: hidden;
   overflow: clip;
 `, Heading = forwardRef(function(props, ref) {
-  const $ = c(22);
-  let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
+  const $ = c(26);
+  let t0, t1, t2, align, childrenProp, textOverflow, restProps, weight;
   $[0] !== props ? ({
     accent: t0,
     align,
@@ -2837,18 +3017,23 @@ const Root$n = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsive
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = childrenProp, $[5] = textOverflow, $[6] = align, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], childrenProp = $[4], textOverflow = $[5], align = $[6], restProps = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = align, $[5] = childrenProp, $[6] = textOverflow, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], align = $[4], childrenProp = $[5], textOverflow = $[6], restProps = $[7], weight = $[8]);
   const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
+  let t3, t4;
+  $[9] !== size2 ? (t4 = _getArrayProp(size2), $[9] = size2, $[10] = t4) : t4 = $[10], t3 = t4;
+  const $size = t3;
+  let t5, t6;
+  $[11] !== align ? (t6 = _getArrayProp(align), $[11] = align, $[12] = t6) : t6 = $[12], t5 = t6;
+  const $align = t5;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    let t32;
-    $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+    let t72;
+    $[13] !== children ? (t72 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[13] = children, $[14] = t72) : t72 = $[14], children = t72;
   }
-  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
-  let t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
-  let t6;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t3 || $[16] !== muted || $[17] !== t4 || $[18] !== weight || $[19] !== ref || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$n, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = restProps, $[14] = accent, $[15] = t3, $[16] = muted, $[17] = t4, $[18] = weight, $[19] = ref, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  let t7;
+  $[15] !== children ? (t7 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t7) : t7 = $[16];
+  let t8;
+  return $[17] !== restProps || $[18] !== accent || $[19] !== $align || $[20] !== $size || $[21] !== muted || $[22] !== weight || $[23] !== ref || $[24] !== t7 ? (t8 = /* @__PURE__ */ jsx(Root$n, { "data-ui": "Heading", ...restProps, $accent: accent, $align, $size, $muted: muted, $weight: weight, ref, children: t7 }), $[17] = restProps, $[18] = accent, $[19] = $align, $[20] = $size, $[21] = muted, $[22] = weight, $[23] = ref, $[24] = t7, $[25] = t8) : t8 = $[25], t8;
 });
 function inlineBaseStyle() {
   return {
@@ -2878,24 +3063,27 @@ function inlineSpaceStyle(props) {
   });
 }
 const Root$m = styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
-  const $ = c(14);
-  let childrenProp, space, restProps, as;
+  const $ = c(16);
+  let space, childrenProp, restProps, as;
   $[0] !== props ? ({
     as,
     children: childrenProp,
     space,
     ...restProps
-  } = props, $[0] = props, $[1] = childrenProp, $[2] = space, $[3] = restProps, $[4] = as) : (childrenProp = $[1], space = $[2], restProps = $[3], as = $[4]);
+  } = props, $[0] = props, $[1] = space, $[2] = childrenProp, $[3] = restProps, $[4] = as) : (space = $[1], childrenProp = $[2], restProps = $[3], as = $[4]);
   let t0, t1;
-  if ($[5] !== childrenProp) {
-    let t22;
-    $[7] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (child) => child && /* @__PURE__ */ jsx("div", { children: child }), $[7] = t22) : t22 = $[7], t1 = Children.map(childrenProp, t22), $[5] = childrenProp, $[6] = t1;
+  $[5] !== space ? (t1 = _getArrayProp(space), $[5] = space, $[6] = t1) : t1 = $[6], t0 = t1;
+  const $space = t0;
+  let t2, t3;
+  if ($[7] !== childrenProp) {
+    let t42;
+    $[9] === Symbol.for("react.memo_cache_sentinel") ? (t42 = (child) => child && /* @__PURE__ */ jsx("div", { children: child }), $[9] = t42) : t42 = $[9], t3 = Children.map(childrenProp, t42), $[7] = childrenProp, $[8] = t3;
   } else
-    t1 = $[6];
-  t0 = t1;
-  const children = t0, t2 = useArrayProp(space), t3 = ref;
-  let t4;
-  return $[8] !== restProps || $[9] !== t2 || $[10] !== as || $[11] !== t3 || $[12] !== children ? (t4 = /* @__PURE__ */ jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref: t3, children }), $[8] = restProps, $[9] = t2, $[10] = as, $[11] = t3, $[12] = children, $[13] = t4) : t4 = $[13], t4;
+    t3 = $[8];
+  t2 = t3;
+  const children = t2, t4 = ref;
+  let t5;
+  return $[10] !== restProps || $[11] !== $space || $[12] !== as || $[13] !== t4 || $[14] !== children ? (t5 = /* @__PURE__ */ jsx(Root$m, { "data-ui": "Inline", ...restProps, $space, forwardedAs: as, ref: t4, children }), $[10] = restProps, $[11] = $space, $[12] = as, $[13] = t4, $[14] = children, $[15] = t5) : t5 = $[15], t5;
 });
 function kbdStyle() {
   return css`
@@ -2915,7 +3103,7 @@ function kbdStyle() {
   `;
 }
 const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(19);
   let t0, t1, t2, children, restProps;
   $[0] !== props ? ({
     children,
@@ -2924,13 +3112,16 @@ const Root$l = styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(fun
     radius: t2,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = children, $[5] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], children = $[4], restProps = $[5]);
-  const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, t3 = useArrayProp(t2 === void 0 ? 2 : t2);
-  let t4;
-  $[6] !== fontSize2 || $[7] !== children ? (t4 = /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = fontSize2, $[7] = children, $[8] = t4) : t4 = $[8];
+  const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? 2 : t2;
+  let t3, t4;
+  $[6] !== radius ? (t4 = _getArrayProp(radius), $[6] = radius, $[7] = t4) : t4 = $[7], t3 = t4;
+  const $radius = t3;
   let t5;
-  $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
+  $[8] !== fontSize2 || $[9] !== children ? (t5 = /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[8] = fontSize2, $[9] = children, $[10] = t5) : t5 = $[10];
   let t6;
-  return $[12] !== restProps || $[13] !== t3 || $[14] !== ref || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = restProps, $[13] = t3, $[14] = ref, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+  $[11] !== padding || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsx(Box, { as: "span", padding, children: t5 }), $[11] = padding, $[12] = t5, $[13] = t6) : t6 = $[13];
+  let t7;
+  return $[14] !== restProps || $[15] !== $radius || $[16] !== ref || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius, ref, children: t6 }), $[14] = restProps, $[15] = $radius, $[16] = ref, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
 }), origin = {
   name: "@sanity/ui/origin",
   fn({
@@ -3289,7 +3480,7 @@ function LayerProvider(props) {
   const {
     children,
     zOffset: zOffsetProp = 0
-  } = props, parentContextValue = 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] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback((childLevel) => {
+  } = props, parentContextValue = 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 = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback((childLevel) => {
     const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       var _a2;
@@ -3754,7 +3945,7 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
     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 = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
   useImperativeHandle(forwardedRef, () => ref.current);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
     container,
@@ -4133,7 +4324,7 @@ const selectStyle = {
   input: inputStyle,
   iconBox: iconBoxStyle
 }, Root$f = styled.div(selectStyle.root), Input$3 = styled.select(selectStyle.input), IconBox = styled(Box)(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
-  const $ = c(30);
+  const $ = c(38);
   let t0, t1, t2, t3, customValidity, disabled, readOnly, restProps, children;
   $[0] !== props ? ({
     children,
@@ -4149,20 +4340,31 @@ const selectStyle = {
   const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = useRef(null);
   let t4;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
-  const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(radius), t9 = useArrayProp(space), t10 = disabled || readOnly;
-  let t11;
-  $[11] !== t5 || $[12] !== restProps || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== t9 || $[17] !== t10 || $[18] !== ref || $[19] !== children ? (t11 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = t5, $[12] = restProps, $[13] = t6, $[14] = t7, $[15] = t8, $[16] = t9, $[17] = t10, $[18] = ref, $[19] = children, $[20] = t11) : t11 = $[20];
-  let t12;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[21] = t12) : t12 = $[21];
-  let t13;
-  $[22] !== fontSize2 ? (t13 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t12 }), $[22] = fontSize2, $[23] = t13) : t13 = $[23];
-  let t14;
-  $[24] !== padding || $[25] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[24] = padding, $[25] = t13, $[26] = t14) : t14 = $[26];
+  let t5, t6;
+  $[11] !== fontSize2 ? (t6 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t6) : t6 = $[12], t5 = t6;
+  const $fontSize = t5;
+  let t7, t8;
+  $[13] !== padding ? (t8 = _getArrayProp(padding), $[13] = padding, $[14] = t8) : t8 = $[14], t7 = t8;
+  const $padding = t7;
+  let t9, t10;
+  $[15] !== radius ? (t10 = _getArrayProp(radius), $[15] = radius, $[16] = t10) : t10 = $[16], t9 = t10;
+  const $radius = t9;
+  let t11, t12;
+  $[17] !== space ? (t12 = _getArrayProp(space), $[17] = space, $[18] = t12) : t12 = $[18], t11 = t12;
+  const $space = t11, t13 = !disabled && readOnly ? "" : void 0, t14 = disabled || readOnly;
   let t15;
-  return $[27] !== t11 || $[28] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
-    t11,
-    t14
-  ] }), $[27] = t11, $[28] = t14, $[29] = t15) : t15 = $[29], t15;
+  $[19] !== t13 || $[20] !== restProps || $[21] !== $fontSize || $[22] !== $padding || $[23] !== $radius || $[24] !== $space || $[25] !== t14 || $[26] !== ref || $[27] !== children ? (t15 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t13, "data-ui": "Select", ...restProps, $fontSize, $padding, $radius, $space, disabled: t14, ref, children }), $[19] = t13, $[20] = restProps, $[21] = $fontSize, $[22] = $padding, $[23] = $radius, $[24] = $space, $[25] = t14, $[26] = ref, $[27] = children, $[28] = t15) : t15 = $[28];
+  let t16;
+  $[29] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[29] = t16) : t16 = $[29];
+  let t17;
+  $[30] !== fontSize2 ? (t17 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t16 }), $[30] = fontSize2, $[31] = t17) : t17 = $[31];
+  let t18;
+  $[32] !== padding || $[33] !== t17 ? (t18 = /* @__PURE__ */ jsx(IconBox, { padding, children: t17 }), $[32] = padding, $[33] = t17, $[34] = t18) : t18 = $[34];
+  let t19;
+  return $[35] !== t15 || $[36] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Root$f, { "data-ui": "Select", children: [
+    t15,
+    t18
+  ] }), $[35] = t15, $[36] = t18, $[37] = t19) : t19 = $[37], t19;
 }), BASE_STYLE = {
   "&&:not([hidden])": {
     display: "grid"
@@ -4186,16 +4388,18 @@ function responsiveStackSpaceStyle(props) {
   }));
 }
 const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
-  const $ = c(10);
-  let as, space, restProps;
+  const $ = c(12);
+  let space, as, restProps;
   $[0] !== props ? ({
     as,
     space,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = space, $[3] = restProps) : (as = $[1], space = $[2], restProps = $[3]);
-  const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(space);
-  let t2;
-  return $[4] !== t0 || $[5] !== restProps || $[6] !== t1 || $[7] !== as || $[8] !== ref ? (t2 = /* @__PURE__ */ jsx(Root$e, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = t0, $[5] = restProps, $[6] = t1, $[7] = as, $[8] = ref, $[9] = t2) : t2 = $[9], t2;
+  } = props, $[0] = props, $[1] = space, $[2] = as, $[3] = restProps) : (space = $[1], as = $[2], restProps = $[3]);
+  let t0, t1;
+  $[4] !== space ? (t1 = _getArrayProp(space), $[4] = space, $[5] = t1) : t1 = $[5], t0 = t1;
+  const $space = t0, t2 = typeof as == "string" ? as : void 0;
+  let t3;
+  return $[6] !== t2 || $[7] !== restProps || $[8] !== $space || $[9] !== as || $[10] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$e, { "data-as": t2, "data-ui": "Stack", ...restProps, $space, forwardedAs: as, ref }), $[6] = t2, $[7] = restProps, $[8] = $space, $[9] = as, $[10] = ref, $[11] = t3) : t3 = $[11], t3;
 });
 function switchBaseStyles() {
   return css`
@@ -4390,7 +4594,7 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
   display: block;
   position: relative;
 `, Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
-  const $ = c(28);
+  const $ = c(34);
   let t0, t1, t2, t3, t4, customValidity, restProps, weight;
   $[0] !== props ? ({
     border: t0,
@@ -4405,17 +4609,28 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize2 = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = useRef(null), rootTheme = useRootTheme();
   let t5;
   $[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[9] = t5) : t5 = $[9], useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
-  const t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(0);
-  let t9;
-  $[10] !== rootTheme.scheme || $[11] !== rootTheme.tone || $[12] !== restProps || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== weight || $[17] !== disabled || $[18] !== ref ? (t9 = /* @__PURE__ */ jsx(Input$1, { "data-as": "textarea", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: t6, $padding: t7, $scheme: rootTheme.scheme, $space: t8, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[10] = rootTheme.scheme, $[11] = rootTheme.tone, $[12] = restProps, $[13] = t6, $[14] = t7, $[15] = t8, $[16] = weight, $[17] = disabled, $[18] = ref, $[19] = t9) : t9 = $[19];
-  const t10 = useArrayProp(radius), t11 = border2 ? "" : void 0;
-  let t12;
-  $[20] !== t10 || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t11 ? (t12 = /* @__PURE__ */ jsx(Presentation$1, { $radius: t10, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t11, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = t10, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t11, $[24] = t12) : t12 = $[24];
-  let t13;
-  return $[25] !== t9 || $[26] !== t12 ? (t13 = /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
-    t9,
-    t12
-  ] }) }), $[25] = t9, $[26] = t12, $[27] = t13) : t13 = $[27], t13;
+  let t6, t7;
+  $[10] !== radius ? (t7 = _getArrayProp(radius), $[10] = radius, $[11] = t7) : t7 = $[11], t6 = t7;
+  const $radius = t6;
+  let t8, t9;
+  $[12] !== fontSize2 ? (t9 = _getArrayProp(fontSize2), $[12] = fontSize2, $[13] = t9) : t9 = $[13], t8 = t9;
+  const $fontSize = t8;
+  let t10, t11;
+  $[14] !== padding ? (t11 = _getArrayProp(padding), $[14] = padding, $[15] = t11) : t11 = $[15], t10 = t11;
+  const $padding = t10;
+  let t12, t13;
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t13 = _getArrayProp(0), $[16] = t13) : t13 = $[16], t12 = t13;
+  const $space = t12;
+  let t14;
+  $[17] !== rootTheme.scheme || $[18] !== rootTheme.tone || $[19] !== restProps || $[20] !== $fontSize || $[21] !== $padding || $[22] !== weight || $[23] !== disabled || $[24] !== ref ? (t14 = /* @__PURE__ */ jsx(Input$1, { "data-as": "textarea", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize, $padding, $space, $scheme: rootTheme.scheme, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[17] = rootTheme.scheme, $[18] = rootTheme.tone, $[19] = restProps, $[20] = $fontSize, $[21] = $padding, $[22] = weight, $[23] = disabled, $[24] = ref, $[25] = t14) : t14 = $[25];
+  const t15 = border2 ? "" : void 0;
+  let t16;
+  $[26] !== $radius || $[27] !== rootTheme.scheme || $[28] !== rootTheme.tone || $[29] !== t15 ? (t16 = /* @__PURE__ */ jsx(Presentation$1, { $radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t15, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[26] = $radius, $[27] = rootTheme.scheme, $[28] = rootTheme.tone, $[29] = t15, $[30] = t16) : t16 = $[30];
+  let t17;
+  return $[31] !== t14 || $[32] !== t16 ? (t17 = /* @__PURE__ */ jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
+    t14,
+    t16
+  ] }) }), $[31] = t14, $[32] = t16, $[33] = t17) : t17 = $[33], t17;
 }), CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 }, Root$b = styled(Card).attrs({
@@ -4463,7 +4678,7 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     display: "block"
   }
 }), TextInput = forwardRef(function(props, forwardedRef) {
-  const $ = c(88);
+  const $ = c(96);
   let t0, t1, t2, t3, t4, t5, t6, clearButton, IconComponent, IconRightComponent, suffix, prefix, customValidity, onClear, __unstable_disableFocusRing, readOnly, restProps, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
@@ -4485,80 +4700,92 @@ const Root$d = styled.span(switchBaseStyles), Input$2 = styled.input(switchInput
     weight,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = clearButton, $[9] = IconComponent, $[10] = IconRightComponent, $[11] = suffix, $[12] = prefix, $[13] = customValidity, $[14] = onClear, $[15] = __unstable_disableFocusRing, $[16] = readOnly, $[17] = restProps, $[18] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], clearButton = $[8], IconComponent = $[9], IconRightComponent = $[10], suffix = $[11], prefix = $[12], customValidity = $[13], onClear = $[14], __unstable_disableFocusRing = $[15], readOnly = $[16], restProps = $[17], weight = $[18]);
-  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = 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;
-  let t7;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  let t8;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t8 = (event) => {
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme();
+  let t7, t8;
+  $[19] !== fontSizeProp ? (t8 = _getArrayProp(fontSizeProp), $[19] = fontSizeProp, $[20] = t8) : t8 = $[20], t7 = t8;
+  const fontSize2 = t7;
+  let t9, t10;
+  $[21] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[21] = paddingProp, $[22] = t10) : t10 = $[22], t9 = t10;
+  const padding = t9;
+  let t11, t12;
+  $[23] !== radiusProp ? (t12 = _getArrayProp(radiusProp), $[23] = radiusProp, $[24] = t12) : t12 = $[24], t11 = t12;
+  const radius = t11;
+  let t13, t14;
+  $[25] !== spaceProp ? (t14 = _getArrayProp(spaceProp), $[25] = spaceProp, $[26] = t14) : t14 = $[26], t13 = t14;
+  const space = t13, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  let t15;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = () => ref.current, $[27] = t15) : t15 = $[27], useImperativeHandle(forwardedRef, t15), useCustomValidity(ref, customValidity);
+  let t16;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (event) => {
     event.preventDefault(), event.stopPropagation();
-  }, $[20] = t8) : t8 = $[20];
-  const handleClearMouseDown = t8;
-  let t9;
-  $[21] !== onClear ? (t9 = (event_0) => {
+  }, $[28] = t16) : t16 = $[28];
+  const handleClearMouseDown = t16;
+  let t17;
+  $[29] !== onClear ? (t17 = (event_0) => {
     var _a;
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), (_a = ref.current) == null || _a.focus();
-  }, $[21] = onClear, $[22] = t9) : t9 = $[22];
-  const handleClearClick = t9;
-  let t10, t11;
-  $[23] !== prefix || $[24] !== radius ? (t11 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[23] = prefix, $[24] = radius, $[25] = t11) : t11 = $[25], t10 = t11;
-  const prefixNode = t10;
-  let t12;
-  const t13 = border2 ? "" : void 0;
-  let t14;
-  $[26] !== IconComponent || $[27] !== fontSize2 || $[28] !== padding ? (t14 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  }, $[29] = onClear, $[30] = t17) : t17 = $[30];
+  const handleClearClick = t17;
+  let t18, t19;
+  $[31] !== prefix || $[32] !== radius ? (t19 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[31] = prefix, $[32] = radius, $[33] = t19) : t19 = $[33], t18 = t19;
+  const prefixNode = t18;
+  let t20;
+  const t21 = border2 ? "" : void 0;
+  let t22;
+  $[34] !== IconComponent || $[35] !== fontSize2 || $[36] !== padding ? (t22 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }) }), $[26] = IconComponent, $[27] = fontSize2, $[28] = padding, $[29] = t14) : t14 = $[29];
-  let t15;
-  $[30] !== $hasClearButton || $[31] !== IconRightComponent || $[32] !== fontSize2 || $[33] !== padding ? (t15 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  ] }) }), $[34] = IconComponent, $[35] = fontSize2, $[36] = padding, $[37] = t22) : t22 = $[37];
+  let t23;
+  $[38] !== $hasClearButton || $[39] !== IconRightComponent || $[40] !== fontSize2 || $[41] !== padding ? (t23 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconRightComponent) && IconRightComponent,
     isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[30] = $hasClearButton, $[31] = IconRightComponent, $[32] = fontSize2, $[33] = padding, $[34] = t15) : t15 = $[34];
-  let t16;
-  $[35] !== $hasPrefix || $[36] !== __unstable_disableFocusRing || $[37] !== $hasSuffix || $[38] !== radius || $[39] !== rootTheme.scheme || $[40] !== rootTheme.tone || $[41] !== t13 || $[42] !== t14 || $[43] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t13, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
-    t14,
-    t15
-  ] }), $[35] = $hasPrefix, $[36] = __unstable_disableFocusRing, $[37] = $hasSuffix, $[38] = radius, $[39] = rootTheme.scheme, $[40] = rootTheme.tone, $[41] = t13, $[42] = t14, $[43] = t15, $[44] = t16) : t16 = $[44], t12 = t16;
-  const presentationNode = t12;
-  let t17, t18;
-  if ($[45] !== padding) {
-    let t192;
-    $[47] === Symbol.for("react.memo_cache_sentinel") ? (t192 = (v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2, $[47] = t192) : t192 = $[47], t18 = padding.map(t192), $[45] = padding, $[46] = t18;
+  ] }) }), $[38] = $hasClearButton, $[39] = IconRightComponent, $[40] = fontSize2, $[41] = padding, $[42] = t23) : t23 = $[42];
+  let t24;
+  $[43] !== $hasPrefix || $[44] !== __unstable_disableFocusRing || $[45] !== $hasSuffix || $[46] !== radius || $[47] !== rootTheme.scheme || $[48] !== rootTheme.tone || $[49] !== t21 || $[50] !== t22 || $[51] !== t23 ? (t24 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t21, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+    t22,
+    t23
+  ] }), $[43] = $hasPrefix, $[44] = __unstable_disableFocusRing, $[45] = $hasSuffix, $[46] = radius, $[47] = rootTheme.scheme, $[48] = rootTheme.tone, $[49] = t21, $[50] = t22, $[51] = t23, $[52] = t24) : t24 = $[52], t20 = t24;
+  const presentationNode = t20;
+  let t25, t26;
+  if ($[53] !== padding) {
+    let t272;
+    $[55] === Symbol.for("react.memo_cache_sentinel") ? (t272 = (v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2, $[55] = t272) : t272 = $[55], t26 = padding.map(t272), $[53] = padding, $[54] = t26;
   } else
-    t18 = $[46];
-  t17 = t18;
-  const clearButtonBoxPadding = t17;
-  let t19, t20;
-  if ($[48] !== padding) {
-    let t212;
-    $[50] === Symbol.for("react.memo_cache_sentinel") ? (t212 = (v_0) => v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1, $[50] = t212) : t212 = $[50], t20 = padding.map(t212), $[48] = padding, $[49] = t20;
+    t26 = $[54];
+  t25 = t26;
+  const clearButtonBoxPadding = t25;
+  let t27, t28;
+  if ($[56] !== padding) {
+    let t292;
+    $[58] === Symbol.for("react.memo_cache_sentinel") ? (t292 = (v_0) => v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1, $[58] = t292) : t292 = $[58], t28 = padding.map(t292), $[56] = padding, $[57] = t28;
   } else
-    t20 = $[49];
-  t19 = t20;
-  const clearButtonPadding = t19;
-  let t21;
-  t21 = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
-  const clearButtonProps = t21;
-  let t22, t23;
-  $[51] !== disabled || $[52] !== readOnly || $[53] !== clearButton || $[54] !== customValidity || $[55] !== fontSize2 || $[56] !== clearButtonPadding || $[57] !== radius || $[58] !== clearButtonProps || $[59] !== handleClearClick || $[60] !== clearButtonBoxPadding ? (t23 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[51] = disabled, $[52] = readOnly, $[53] = clearButton, $[54] = customValidity, $[55] = fontSize2, $[56] = clearButtonPadding, $[57] = radius, $[58] = clearButtonProps, $[59] = handleClearClick, $[60] = clearButtonBoxPadding, $[61] = t23) : t23 = $[61], t22 = t23;
-  const clearButtonNode = t22;
-  let t24, t25;
-  $[62] !== suffix || $[63] !== radius ? (t25 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[62] = suffix, $[63] = radius, $[64] = t25) : t25 = $[64], t24 = t25;
-  const suffixNode = t24, t26 = $hasIconRight || $hasClearButton;
-  let t27;
-  $[65] !== rootTheme.scheme || $[66] !== rootTheme.tone || $[67] !== restProps || $[68] !== fontSize2 || $[69] !== $hasIcon || $[70] !== t26 || $[71] !== padding || $[72] !== space || $[73] !== weight || $[74] !== disabled || $[75] !== readOnly || $[76] !== ref || $[77] !== type ? (t27 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t26, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[65] = rootTheme.scheme, $[66] = rootTheme.tone, $[67] = restProps, $[68] = fontSize2, $[69] = $hasIcon, $[70] = t26, $[71] = padding, $[72] = space, $[73] = weight, $[74] = disabled, $[75] = readOnly, $[76] = ref, $[77] = type, $[78] = t27) : t27 = $[78];
-  let t28;
-  $[79] !== t27 || $[80] !== presentationNode || $[81] !== clearButtonNode ? (t28 = /* @__PURE__ */ jsxs(InputRoot, { children: [
-    t27,
+    t28 = $[57];
+  t27 = t28;
+  const clearButtonPadding = t27;
+  let t29;
+  t29 = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
+  const clearButtonProps = t29;
+  let t30, t31;
+  $[59] !== disabled || $[60] !== readOnly || $[61] !== clearButton || $[62] !== customValidity || $[63] !== fontSize2 || $[64] !== clearButtonPadding || $[65] !== radius || $[66] !== clearButtonProps || $[67] !== handleClearClick || $[68] !== clearButtonBoxPadding ? (t31 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[59] = disabled, $[60] = readOnly, $[61] = clearButton, $[62] = customValidity, $[63] = fontSize2, $[64] = clearButtonPadding, $[65] = radius, $[66] = clearButtonProps, $[67] = handleClearClick, $[68] = clearButtonBoxPadding, $[69] = t31) : t31 = $[69], t30 = t31;
+  const clearButtonNode = t30;
+  let t32, t33;
+  $[70] !== suffix || $[71] !== radius ? (t33 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[70] = suffix, $[71] = radius, $[72] = t33) : t33 = $[72], t32 = t33;
+  const suffixNode = t32, t34 = $hasIconRight || $hasClearButton;
+  let t35;
+  $[73] !== rootTheme.scheme || $[74] !== rootTheme.tone || $[75] !== restProps || $[76] !== fontSize2 || $[77] !== $hasIcon || $[78] !== t34 || $[79] !== padding || $[80] !== space || $[81] !== weight || $[82] !== disabled || $[83] !== readOnly || $[84] !== ref || $[85] !== type ? (t35 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t34, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[73] = rootTheme.scheme, $[74] = rootTheme.tone, $[75] = restProps, $[76] = fontSize2, $[77] = $hasIcon, $[78] = t34, $[79] = padding, $[80] = space, $[81] = weight, $[82] = disabled, $[83] = readOnly, $[84] = ref, $[85] = type, $[86] = t35) : t35 = $[86];
+  let t36;
+  $[87] !== t35 || $[88] !== presentationNode || $[89] !== clearButtonNode ? (t36 = /* @__PURE__ */ jsxs(InputRoot, { children: [
+    t35,
     presentationNode,
     clearButtonNode
-  ] }), $[79] = t27, $[80] = presentationNode, $[81] = clearButtonNode, $[82] = t28) : t28 = $[82];
-  let t29;
-  return $[83] !== rootTheme.tone || $[84] !== prefixNode || $[85] !== t28 || $[86] !== suffixNode ? (t29 = /* @__PURE__ */ jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  ] }), $[87] = t35, $[88] = presentationNode, $[89] = clearButtonNode, $[90] = t36) : t36 = $[90];
+  let t37;
+  return $[91] !== rootTheme.tone || $[92] !== prefixNode || $[93] !== t36 || $[94] !== suffixNode ? (t37 = /* @__PURE__ */ jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
-    t28,
+    t36,
     suffixNode
-  ] }), $[83] = rootTheme.tone, $[84] = prefixNode, $[85] = t28, $[86] = suffixNode, $[87] = t29) : t29 = $[87], t29;
+  ] }), $[91] = rootTheme.tone, $[92] = prefixNode, $[93] = t36, $[94] = suffixNode, $[95] = t37) : t37 = $[95], t37;
 });
 function useDelayedState(initialState) {
   const $ = c(4), [state, setState] = useState(initialState), delayedAction = useRef();
@@ -4694,7 +4921,7 @@ const Root$a = styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useMemo(() => _getArrayProp(fallbackPlacementsProp), [fallbackPlacementsProp]), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
   useImperativeHandle(forwardedRef, () => ref.current);
   const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = useSyncExternalStore(
     emptySubscribe,
@@ -4933,7 +5160,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     value: value_0
   }) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) }), [fontSize2, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
   useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -5102,7 +5329,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     separator,
     space: spaceRaw = 2,
     ...restProps
-  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), [expandElement, setExpandElement] = useState(null), [popoverElement, setPopoverElement] = useState(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
+  } = props, space = useMemo(() => _getArrayProp(spaceRaw), [spaceRaw]), [open, setOpen] = useState(!1), [expandElement, setExpandElement] = useState(null), [popoverElement, setPopoverElement] = useState(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
   useClickOutside(collapse, [expandElement, popoverElement]);
   const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
     const len = rawItems.length;
@@ -5219,7 +5446,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   z-index: 3;
 `, DialogCard = forwardRef(function(props, forwardedRef) {
   var _a;
-  const $ = c(44), {
+  const $ = c(50), {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,
     children,
@@ -5234,59 +5461,68 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     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 = useRef(null), [rootElement, setRootElement] = useState(null), contentRef = useRef(null), layer = useLayer(), {
+  } = props, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element;
+  let t0, t1;
+  $[0] !== radiusProp ? (t1 = _getArrayProp(radiusProp), $[0] = radiusProp, $[1] = t1) : t1 = $[1], t0 = t1;
+  const radius = t0;
+  let t2, t3;
+  $[2] !== shadowProp ? (t3 = _getArrayProp(shadowProp), $[2] = shadowProp, $[3] = t3) : t3 = $[3], t2 = t3;
+  const shadow = t2;
+  let t4, t5;
+  $[4] !== widthProp ? (t5 = _getArrayProp(widthProp), $[4] = widthProp, $[5] = t5) : t5 = $[5], t4 = t5;
+  const width = t4, ref = useRef(null), [rootElement, setRootElement] = useState(null), contentRef = useRef(null), layer = useLayer(), {
     isTopLayer
   } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[0] = t0) : t0 = $[0], useImperativeHandle(forwardedRef, t0);
-  let t1;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => contentRef.current, $[1] = t1) : t1 = $[1], useImperativeHandle(forwardedContentRef, t1);
-  let t2;
-  $[2] !== autoFocus ? (t2 = () => {
+  let t6;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[6] = t6) : t6 = $[6], useImperativeHandle(forwardedRef, t6);
+  let t7;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => contentRef.current, $[7] = t7) : t7 = $[7], useImperativeHandle(forwardedContentRef, t7);
+  let t8;
+  $[8] !== autoFocus ? (t8 = () => {
     autoFocus && ref.current && focusFirstDescendant(ref.current);
-  }, $[2] = autoFocus, $[3] = t2) : t2 = $[3];
-  let t3;
-  $[4] !== autoFocus || $[5] !== ref ? (t3 = [autoFocus, ref], $[4] = autoFocus, $[5] = ref, $[6] = t3) : t3 = $[6], useEffect(t2, t3);
-  let t4;
-  $[7] !== isTopLayer || $[8] !== onClose || $[9] !== boundaryElement || $[10] !== portalElement ? (t4 = (event) => {
+  }, $[8] = autoFocus, $[9] = t8) : t8 = $[9];
+  let t9;
+  $[10] !== autoFocus || $[11] !== ref ? (t9 = [autoFocus, ref], $[10] = autoFocus, $[11] = ref, $[12] = t9) : t9 = $[12], useEffect(t8, t9);
+  let t10;
+  $[13] !== isTopLayer || $[14] !== onClose || $[15] !== boundaryElement || $[16] !== portalElement ? (t10 = (event) => {
     if (!isTopLayer || !onClose)
       return;
     const target = document.activeElement;
     target && !isTargetWithinScope(boundaryElement, portalElement, target) || event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), onClose());
-  }, $[7] = isTopLayer, $[8] = onClose, $[9] = boundaryElement, $[10] = portalElement, $[11] = t4) : t4 = $[11], useGlobalKeyDown(t4);
-  let t5;
-  $[12] !== isTopLayer || $[13] !== onClickOutside || $[14] !== boundaryElement || $[15] !== portalElement ? (t5 = (event_0) => {
+  }, $[13] = isTopLayer, $[14] = onClose, $[15] = boundaryElement, $[16] = portalElement, $[17] = t10) : t10 = $[17], useGlobalKeyDown(t10);
+  let t11;
+  $[18] !== isTopLayer || $[19] !== onClickOutside || $[20] !== boundaryElement || $[21] !== portalElement ? (t11 = (event_0) => {
     if (!isTopLayer || !onClickOutside)
       return;
     const target_0 = event_0.target;
     target_0 && !isTargetWithinScope(boundaryElement, portalElement, target_0) || onClickOutside();
-  }, $[12] = isTopLayer, $[13] = onClickOutside, $[14] = boundaryElement, $[15] = portalElement, $[16] = t5) : t5 = $[16];
-  let t6;
-  $[17] !== rootElement ? (t6 = [rootElement], $[17] = rootElement, $[18] = t6) : t6 = $[18], useClickOutside(t5, t6);
-  let t7;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = (el) => {
+  }, $[18] = isTopLayer, $[19] = onClickOutside, $[20] = boundaryElement, $[21] = portalElement, $[22] = t11) : t11 = $[22];
+  let t12;
+  $[23] !== rootElement ? (t12 = [rootElement], $[23] = rootElement, $[24] = t12) : t12 = $[24], useClickOutside(t11, t12);
+  let t13;
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t13 = (el) => {
     setRootElement(el), ref.current = el;
-  }, $[19] = t7) : t7 = $[19];
-  const setRef = t7;
-  let t8;
-  $[20] !== showHeader || $[21] !== header || $[22] !== labelId || $[23] !== showCloseButton || $[24] !== onClose ? (t8 = showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 3, children: [
+  }, $[25] = t13) : t13 = $[25];
+  const setRef = t13;
+  let t14;
+  $[26] !== showHeader || $[27] !== header || $[28] !== labelId || $[29] !== showCloseButton || $[30] !== onClose ? (t14 = showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "center", padding: 3, children: [
     /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
     showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(Button, { "aria-label": "Close dialog", disabled: !onClose, icon: CloseIcon, mode: "bleed", onClick: onClose, padding: 2 }) })
-  ] }) }), $[20] = showHeader, $[21] = header, $[22] = labelId, $[23] = showCloseButton, $[24] = onClose, $[25] = t8) : t8 = $[25];
-  let t9;
-  $[26] !== contentRef || $[27] !== children ? (t9 = /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }), $[26] = contentRef, $[27] = children, $[28] = t9) : t9 = $[28];
-  let t10;
-  $[29] !== footer ? (t10 = footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer }), $[29] = footer, $[30] = t10) : t10 = $[30];
-  let t11;
-  $[31] !== t8 || $[32] !== t9 || $[33] !== t10 ? (t11 = /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
-    t8,
-    t9,
-    t10
-  ] }), $[31] = t8, $[32] = t9, $[33] = t10, $[34] = t11) : t11 = $[34];
-  let t12;
-  $[35] !== radius || $[36] !== setRef || $[37] !== scheme || $[38] !== shadow || $[39] !== t11 ? (t12 = /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: t11 }), $[35] = radius, $[36] = setRef, $[37] = scheme, $[38] = shadow, $[39] = t11, $[40] = t12) : t12 = $[40];
-  let t13;
-  return $[41] !== width || $[42] !== t12 ? (t13 = /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t12 }), $[41] = width, $[42] = t12, $[43] = t13) : t13 = $[43], t13;
+  ] }) }), $[26] = showHeader, $[27] = header, $[28] = labelId, $[29] = showCloseButton, $[30] = onClose, $[31] = t14) : t14 = $[31];
+  let t15;
+  $[32] !== contentRef || $[33] !== children ? (t15 = /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }), $[32] = contentRef, $[33] = children, $[34] = t15) : t15 = $[34];
+  let t16;
+  $[35] !== footer ? (t16 = footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer }), $[35] = footer, $[36] = t16) : t16 = $[36];
+  let t17;
+  $[37] !== t14 || $[38] !== t15 || $[39] !== t16 ? (t17 = /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
+    t14,
+    t15,
+    t16
+  ] }), $[37] = t14, $[38] = t15, $[39] = t16, $[40] = t17) : t17 = $[40];
+  let t18;
+  $[41] !== radius || $[42] !== setRef || $[43] !== scheme || $[44] !== shadow || $[45] !== t17 ? (t18 = /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref: setRef, scheme, shadow, children: t17 }), $[41] = radius, $[42] = setRef, $[43] = scheme, $[44] = shadow, $[45] = t17, $[46] = t18) : t18 = $[46];
+  let t19;
+  return $[47] !== width || $[48] !== t18 ? (t19 = /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t18 }), $[47] = width, $[48] = t18, $[49] = t19) : t19 = $[49], t19;
 }), Dialog = forwardRef(function(props, ref) {
   var _a;
   const dialog = useDialog(), {
@@ -5313,7 +5549,7 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     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 = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback((event) => {
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp]), padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), position = useMemo(() => _getArrayProp(positionProp), [positionProp]), width = useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback((event) => {
     onFocus == null || onFocus(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -5373,7 +5609,7 @@ const Root$6 = styled.kbd`
     display: block;
   }
 `, Hotkeys = forwardRef(function(props, ref) {
-  const $ = c(24);
+  const $ = c(26);
   let t0, keys, fontSize2, padding, radius, restProps;
   $[0] !== props ? ({
     fontSize: fontSize2,
@@ -5383,21 +5619,24 @@ const Root$6 = styled.kbd`
     space: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = keys, $[3] = fontSize2, $[4] = padding, $[5] = radius, $[6] = restProps) : (t0 = $[1], keys = $[2], fontSize2 = $[3], padding = $[4], radius = $[5], restProps = $[6]);
-  const space = useArrayProp(t0 === void 0 ? 0.5 : t0);
+  const spaceProp = t0 === void 0 ? 0.5 : t0;
+  let t1, t2;
+  $[7] !== spaceProp ? (t2 = _getArrayProp(spaceProp), $[7] = spaceProp, $[8] = t2) : t2 = $[8], t1 = t2;
+  const space = t1;
   if (!keys || keys.length === 0) {
-    let t12;
-    return $[7] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Fragment, {}), $[7] = t12) : t12 = $[7], t12;
+    let t32;
+    return $[9] === Symbol.for("react.memo_cache_sentinel") ? (t32 = /* @__PURE__ */ jsx(Fragment, {}), $[9] = t32) : t32 = $[9], t32;
   }
-  let t1;
-  if ($[8] !== fontSize2 || $[9] !== padding || $[10] !== radius || $[11] !== keys) {
-    let t22;
-    $[13] !== fontSize2 || $[14] !== padding || $[15] !== radius ? (t22 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[13] = fontSize2, $[14] = padding, $[15] = radius, $[16] = t22) : t22 = $[16], t1 = keys.map(t22), $[8] = fontSize2, $[9] = padding, $[10] = radius, $[11] = keys, $[12] = t1;
-  } else
-    t1 = $[12];
-  let t2;
-  $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t1 }), $[17] = space, $[18] = t1, $[19] = t2) : t2 = $[19];
   let t3;
-  return $[20] !== restProps || $[21] !== ref || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = restProps, $[21] = ref, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
+  if ($[10] !== fontSize2 || $[11] !== padding || $[12] !== radius || $[13] !== keys) {
+    let t42;
+    $[15] !== fontSize2 || $[16] !== padding || $[17] !== radius ? (t42 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[15] = fontSize2, $[16] = padding, $[17] = radius, $[18] = t42) : t42 = $[18], t3 = keys.map(t42), $[10] = fontSize2, $[11] = padding, $[12] = radius, $[13] = keys, $[14] = t3;
+  } else
+    t3 = $[14];
+  let t4;
+  $[19] !== space || $[20] !== t3 ? (t4 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t3 }), $[19] = space, $[20] = t3, $[21] = t4) : t4 = $[21];
+  let t5;
+  return $[22] !== restProps || $[23] !== ref || $[24] !== t4 ? (t5 = /* @__PURE__ */ jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: t4 }), $[22] = restProps, $[23] = ref, $[24] = t4, $[25] = t5) : t5 = $[25], t5;
 }), key$2 = Symbol.for("@sanity/ui/context/menu"), MenuContext = createGlobalScopedContext(key$2, null);
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
@@ -5856,7 +6095,7 @@ function MenuGroup(props) {
     onClick,
     padding = 3,
     popover,
-    radius = 2,
+    radius: radiusProp = 2,
     space = 3,
     text,
     tone = "default",
@@ -5871,7 +6110,7 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), handleMouseEnter = useCallback((event) => {
+  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp]), handleMouseEnter = useCallback((event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
   }, [onItemMouseEnter]), handleMenuKeyDown = useCallback((event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
@@ -5898,7 +6137,7 @@ function MenuGroup(props) {
       return;
     }
   }, []);
-  return /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": as === "button" ? withinMenu : void 0, "data-pressed": as !== "button" ? withinMenu : void 0, "data-selected": !withinMenu && active ? "" : void 0, $radius: useArrayProp(radius), $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+  return /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": as === "button" ? withinMenu : void 0, "data-pressed": as !== "button" ? withinMenu : void 0, "data-selected": !withinMenu && active ? "" : void 0, $radius: radius, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -5951,10 +6190,10 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = useCallback((el) => {
+  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useMemo(() => _getArrayProp(fontSize2).map((s) => s - 1), [fontSize2]), $radius = useMemo(() => _getArrayProp(radius), [radius]), $padding = useMemo(() => _getArrayProp(0), []), setRef = useCallback((el) => {
     ref.current = el, setRootElement(el);
   }, []);
-  return /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": as === "button" && pressed, "data-pressed": as !== "button" && pressed ? "" : void 0, "data-selected": active ? "" : void 0, "data-disabled": disabled ? "" : void 0, forwardedAs: as, $radius: useArrayProp(radius), $padding: useArrayProp(0), $tone: disabled ? "default" : tone, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: as === "button" ? "button" : void 0, children: [
+  return /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": as === "button" && pressed, "data-pressed": as !== "button" && pressed ? "" : void 0, "data-selected": active ? "" : void 0, "data-disabled": disabled ? "" : void 0, forwardedAs: as, $radius, $padding, $tone: disabled ? "default" : tone, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: as === "button" ? "button" : void 0, children: [
     (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
       IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
         isValidElement(IconComponent) && IconComponent,
@@ -6013,7 +6252,7 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     background-color: var(--card-skeleton-color-from);
   }
 `, Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
-  const $ = c(14);
+  const $ = c(16);
   let t0, delay, radius, restProps;
   $[0] !== props ? ({
     animated: t0,
@@ -6033,9 +6272,11 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       clearTimeout(timeout);
     };
   }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), useEffect(t1, t2);
-  const t3 = useArrayProp(radius);
-  let t4;
-  return $[8] !== restProps || $[9] !== animated || $[10] !== t3 || $[11] !== visible || $[12] !== ref ? (t4 = /* @__PURE__ */ jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = restProps, $[9] = animated, $[10] = t3, $[11] = visible, $[12] = ref, $[13] = t4) : t4 = $[13], t4;
+  let t3, t4;
+  $[8] !== radius ? (t4 = _getArrayProp(radius), $[8] = radius, $[9] = t4) : t4 = $[9], t3 = t4;
+  const $radius = t3;
+  let t5;
+  return $[10] !== restProps || $[11] !== animated || $[12] !== $radius || $[13] !== visible || $[14] !== ref ? (t5 = /* @__PURE__ */ jsx(Root$4, { ...restProps, $animated: animated, $radius, $visible: visible, ref }), $[10] = restProps, $[11] = animated, $[12] = $radius, $[13] = visible, $[14] = ref, $[15] = t5) : t5 = $[15], t5;
 }), Root$3 = styled(Skeleton)((props) => {
   const {
     $size,
@@ -6051,45 +6292,57 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     };
   });
 }), TextSkeleton = forwardRef(function(props, ref) {
-  const $ = c(7);
+  const $ = c(9);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
-  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
-  let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1, t2;
+  $[3] !== size2 ? (t2 = _getArrayProp(size2), $[3] = size2, $[4] = t2) : t2 = $[4], t1 = t2;
+  const $size = t1;
+  let t3;
+  return $[5] !== restProps || $[6] !== $size || $[7] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[5] = restProps, $[6] = $size, $[7] = ref, $[8] = t3) : t3 = $[8], t3;
 }), LabelSkeleton = forwardRef(function(props, ref) {
-  const $ = c(7);
+  const $ = c(9);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
-  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
-  let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1, t2;
+  $[3] !== size2 ? (t2 = _getArrayProp(size2), $[3] = size2, $[4] = t2) : t2 = $[4], t1 = t2;
+  const $size = t1;
+  let t3;
+  return $[5] !== restProps || $[6] !== $size || $[7] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[5] = restProps, $[6] = $size, $[7] = ref, $[8] = t3) : t3 = $[8], t3;
 }), HeadingSkeleton = forwardRef(function(props, ref) {
-  const $ = c(7);
+  const $ = c(9);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
-  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
-  let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1, t2;
+  $[3] !== size2 ? (t2 = _getArrayProp(size2), $[3] = size2, $[4] = t2) : t2 = $[4], t1 = t2;
+  const $size = t1;
+  let t3;
+  return $[5] !== restProps || $[6] !== $size || $[7] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[5] = restProps, $[6] = $size, $[7] = ref, $[8] = t3) : t3 = $[8], t3;
 }), CodeSkeleton = forwardRef(function(props, ref) {
-  const $ = c(7);
+  const $ = c(9);
   let t0, restProps;
   $[0] !== props ? ({
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
-  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
-  let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1, t2;
+  $[3] !== size2 ? (t2 = _getArrayProp(size2), $[3] = size2, $[4] = t2) : t2 = $[4], t1 = t2;
+  const $size = t1;
+  let t3;
+  return $[5] !== restProps || $[6] !== $size || $[7] !== ref ? (t3 = /* @__PURE__ */ jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[5] = restProps, $[6] = $size, $[7] = ref, $[8] = t3) : t3 = $[8], t3;
 }), CustomButton = styled(Button)`
   max-width: 100%;
 `, Tab = forwardRef(function(props, forwardedRef) {