@sanity/ui 2.8.24-canary.2 → 2.8.25

package/dist/index.js

@@ -39,8 +39,8 @@ function _responsive(media, values, callback) {
     [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
   });
 }
-function _getArrayProp(val) {
-  return val === void 0 ? EMPTY_ARRAY : Array.isArray(val) ? val : [val];
+function _getArrayProp(val, defaultVal) {
+  return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
 }
 function _getResponsiveSpace(theme$1, props, spaceIndexes = EMPTY_ARRAY) {
   if (!Array.isArray(spaceIndexes))
@@ -147,2300 +147,2284 @@ function responsiveTextAlignStyle(props) {
 function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
-function useArrayProp$1(val) {
-  const $ = reactCompilerRuntime.c(6);
+function useArrayProp(val, defaultVal) {
+  const $ = reactCompilerRuntime.c(3);
   let t0;
-  $[0] !== val ? (t0 = () => [_getArrayProp(val), JSON.stringify(val)], $[0] = val, $[1] = t0) : t0 = $[1];
-  const [t1, setCache] = react.useState(t0), [cachedVal, cachedHash] = t1;
-  let result = cachedVal, t2;
-  $[2] !== val ? (t2 = JSON.stringify(val), $[2] = val, $[3] = t2) : t2 = $[3];
-  const hash = t2;
-  if (hash !== cachedHash) {
-    let t3;
-    $[4] !== val ? (t3 = _getArrayProp(val), $[4] = val, $[5] = t3) : t3 = $[5];
-    const current = t3;
-    setCache([current, hash]), result = current;
-  }
-  return result;
-}
-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");
+  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
+  const [t1, setCache] = react.useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
+  return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
 }
-const globalScope = getGlobalScope();
-function createGlobalScopedContext(key2, defaultValue) {
-  const symbol = Symbol.for(key2);
-  return typeof document > "u" ? react.createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || react.createContext(defaultValue), globalScope[symbol]);
+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 ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
-function ThemeProvider(props) {
-  const $ = reactCompilerRuntime.c(15), parentTheme = react.useContext(ThemeContext), {
-    children
-  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
-  let t0;
-  bb0: {
-    if (!rootTheme) {
-      t0 = null;
-      break bb0;
-    }
-    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;
-  }
-  const themeContext = t0;
+function useClickOutside(listener, t0, boundaryElement) {
+  const $ = reactCompilerRuntime.c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = react.useState(null);
   let t1;
-  bb1: {
-    if (!rootTheme) {
-      t1 = null;
-      break bb1;
+  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
+  const [elements, setElements] = react.useState(t1), elementsRef = react.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;
     }
-    let t22;
-    $[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = theme.getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
-  }
-  const theme$1 = t1;
-  if (!theme$1) {
-    let t22;
-    return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
-  }
-  let t2;
-  $[9] !== children || $[10] !== theme$1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }), $[9] = children, $[10] = theme$1, $[11] = t2) : t2 = $[11];
-  let t3;
-  return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
-}
-ThemeProvider.displayName = "ThemeProvider";
-function useRootTheme() {
-  const value = react.useContext(ThemeContext);
-  if (!value)
-    throw new Error("useRootTheme(): missing context value");
-  return value;
+    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]), react.useEffect(t2, t3);
+  let t4, t5;
+  return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (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] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
 }
-function ThemeColorProvider(props) {
-  const $ = reactCompilerRuntime.c(5), {
-    children,
-    scheme,
-    tone
-  } = props, root = useRootTheme(), t0 = scheme || root.scheme;
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$b : t0;
   let t1;
-  return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
+  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
+    if (!listener)
+      return;
+    const target = evt.target;
+    if (!(target instanceof Node))
+      return;
+    const resolvedBoundaryElement = boundaryElement?.();
+    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
+      return;
+    const elements = elementsArg().flat();
+    for (const el of elements)
+      if (el && (target === el || el.contains(target)))
+        return;
+    listener(evt);
+  }, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
+  const onEvent = useEffectEvent.useEffectEvent(t1), hasListener = !!listener;
+  let t2, t3;
+  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
+    if (!hasListener)
+      return;
+    const handleEvent = (evt_0) => onEvent(evt_0);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-ThemeColorProvider.displayName = "ThemeColorProvider";
-function useTheme() {
-  return styledComponents.useTheme();
+function _temp$b() {
+  return EMPTY_ARRAY;
 }
-function useTheme_v2() {
-  const $ = reactCompilerRuntime.c(2), t0 = styledComponents.useTheme();
+function useCustomValidity(ref, customValidity) {
+  const $ = reactCompilerRuntime.c(6);
+  let t0;
+  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
+    ref.current?.setCustomValidity(customValidity || "");
+  }, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
   let t1;
-  return $[0] !== t0 ? (t1 = theme.getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
-}
-function responsiveBorderStyle() {
-  return [border, borderTop, borderRight, borderBottom, borderLeft];
-}
-function border(props) {
-  const {
-    card,
-    media
-  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(media, props.$border, (value) => value ? {
-    "&&": {
-      border: borderStyle
-    }
-  } : {
-    "&&": {
-      border: 0
-    }
-  });
-}
-function borderTop(props) {
-  const {
-    card,
-    media
-  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(media, props.$borderTop, (value) => value ? {
-    "&&": {
-      borderTop: borderStyle
-    }
-  } : {
-    "&&": {
-      borderTop: 0
-    }
-  });
-}
-function borderRight(props) {
-  const {
-    card,
-    media
-  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(media, props.$borderRight, (value) => value ? {
-    "&&": {
-      borderRight: borderStyle
-    }
-  } : {
-    "&&": {
-      borderRight: 0
-    }
-  });
+  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], react.useEffect(t0, t1);
 }
-function borderBottom(props) {
-  const {
-    card,
-    media
-  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(media, props.$borderBottom, (value) => value ? {
-    "&&": {
-      borderBottom: borderStyle
-    }
-  } : {
-    "&&": {
-      borderBottom: 0
-    }
+var resizeObservers = [], hasActiveObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.activeTargets.length > 0;
   });
-}
-function borderLeft(props) {
-  const {
-    card,
-    media
-  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
-  return _responsive(media, props.$borderLeft, (value) => value ? {
-    "&&": {
-      borderLeft: borderStyle
-    }
-  } : {
-    "&&": {
-      borderLeft: 0
-    }
+}, hasSkippedObservations = function() {
+  return resizeObservers.some(function(ro) {
+    return ro.skippedTargets.length > 0;
   });
-}
-const BASE_STYLE$4 = {
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
+}, 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);
   }
-}, BOX_SIZING = {
-  content: "content-box",
-  border: "border-box"
-}, BOX_HEIGHT = {
-  stretch: "stretch",
-  fill: "100%"
-};
-function boxStyle() {
-  return BASE_STYLE$4;
-}
-function responsiveBoxStyle() {
-  return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
-}
-function responsiveBoxDisplayStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$display, (display) => ({
-    "&:not([hidden])": {
-      display
+  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?.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 responsiveBoxSizingStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$sizing, (sizing) => ({
-    boxSizing: BOX_SIZING[sizing]
-  }));
+  };
 }
-function responsiveBoxHeightStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$height, (height) => ({
-    height: BOX_HEIGHT[height]
-  }));
+function _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 responsiveBoxOverflowStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$overflow, (overflow) => ({
-    overflow
-  }));
+function useElementSize(element) {
+  const $ = reactCompilerRuntime.c(3), [size2, setSize] = react.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]), react.useEffect(t0, t1), size2;
 }
-const BASE_STYLE$3 = {
-  "&&:not([hidden])": {
-    display: "flex"
-  }
-};
-function responsiveFlexStyle() {
-  return [BASE_STYLE$3, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
+function useElementRect(element) {
+  return useElementSize(element)?._contentRect || null;
 }
-function responsiveFlexAlignStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$align, (align) => ({
-    alignItems: align
-  }));
+function useForwardedRef(ref) {
+  const $ = reactCompilerRuntime.c(1), innerRef = react.useRef(null);
+  let t0;
+  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], react.useImperativeHandle(ref, t0), innerRef;
 }
-function responsiveFlexGapStyle(props) {
-  const {
-    media,
-    space
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gap, (gap) => ({
-    gap: gap ? rem(space[gap]) : void 0
-  }));
+function useGlobalKeyDown(onKeyDown) {
+  const $ = reactCompilerRuntime.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]), react.useEffect(t0, t1);
 }
-function responsiveFlexWrapStyle(props) {
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$wrap, (wrap) => ({
-    flexWrap: wrap
-  }));
+    subscribe: subscribe2,
+    getSnapshot
+  } = react.useMemo(() => {
+    let MEDIA_QUERY_CACHE;
+    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
+    return {
+      subscribe: (onStoreChange) => {
+        const matchMedia = getMatchMedia();
+        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+      },
+      getSnapshot: () => getMatchMedia().matches
+    };
+  }, [mediaQueryString]);
+  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
 }
-function responsiveFlexJustifyStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$justify, (justify) => ({
-    justifyContent: justify
-  }));
+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 responsiveFlexDirectionStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$direction, (direction) => ({
-    flexDirection: direction
-  }));
+const globalScope = getGlobalScope();
+function createGlobalScopedContext(key2, defaultValue) {
+  const symbol = Symbol.for(key2);
+  return typeof document > "u" ? react.createContext(defaultValue) : (globalScope[symbol] = globalScope[symbol] || react.createContext(defaultValue), globalScope[symbol]);
 }
-const BASE_STYLE$2 = {
-  minWidth: 0,
-  minHeight: 0
-};
-function flexItemStyle() {
-  return [BASE_STYLE$2, responsiveFlexItemStyle];
+const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
+function ThemeProvider(props) {
+  const $ = reactCompilerRuntime.c(15), parentTheme = react.useContext(ThemeContext), {
+    children
+  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
+  let t0;
+  bb0: {
+    if (!rootTheme) {
+      t0 = null;
+      break bb0;
+    }
+    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;
+  }
+  const themeContext = t0;
+  let t1;
+  bb1: {
+    if (!rootTheme) {
+      t1 = null;
+      break bb1;
+    }
+    let t22;
+    $[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = theme.getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
+  }
+  const theme$1 = t1;
+  if (!theme$1) {
+    let t22;
+    return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
+  }
+  let t2;
+  $[9] !== children || $[10] !== theme$1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }), $[9] = children, $[10] = theme$1, $[11] = t2) : t2 = $[11];
+  let t3;
+  return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
 }
-function responsiveFlexItemStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return props.$flex ? _responsive(media, props.$flex, (flex) => ({
-    flex
-  })) : EMPTY_ARRAY;
+ThemeProvider.displayName = "ThemeProvider";
+function useRootTheme() {
+  const value = react.useContext(ThemeContext);
+  if (!value)
+    throw new Error("useRootTheme(): missing context value");
+  return value;
 }
-function focusRingBorderStyle(border2) {
-  return `inset 0 0 0 ${border2.width}px ${border2.color}`;
+function ThemeColorProvider(props) {
+  const $ = reactCompilerRuntime.c(5), {
+    children,
+    scheme,
+    tone
+  } = props, root = useRootTheme(), t0 = scheme || root.scheme;
+  let t1;
+  return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
 }
-function focusRingStyle(opts) {
-  const {
-    base,
-    border: border2,
-    focusRing
-  } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
-  return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border2 && focusRingBorderStyle(border2), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(",");
+ThemeColorProvider.displayName = "ThemeColorProvider";
+function useTheme() {
+  return styledComponents.useTheme();
 }
-const GRID_CSS = {
-  "&&:not([hidden])": {
-    display: "grid"
-  },
-  '&[data-as="ul"],&[data-as="ol"]': {
-    listStyle: "none"
-  }
-}, GRID_AUTO_COLUMS = {
-  auto: "auto",
-  min: "min-content",
-  max: "max-content",
-  fr: "minmax(0, 1fr)"
-}, GRID_AUTO_ROWS = {
-  auto: "auto",
-  min: "min-content",
-  max: "max-content",
-  fr: "minmax(0, 1fr)"
-};
-function responsiveGridStyle() {
-  return [GRID_CSS, responsiveGridAutoFlowStyle, responsiveGridAutoRowsStyle, responsiveGridAutoColsStyle, responsiveGridColumnsStyle, responsiveGridRowsStyle, responsiveGridGapStyle, responsiveGridGapXStyle, responsiveGridGapYStyle];
+function useTheme_v2() {
+  const $ = reactCompilerRuntime.c(2), t0 = styledComponents.useTheme();
+  let t1;
+  return $[0] !== t0 ? (t1 = theme.getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
-function responsiveGridAutoFlowStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$autoFlow, (autoFlow) => ({
-    gridAutoFlow: autoFlow
-  }));
+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 responsiveGridAutoRowsStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$autoRows, (autoRows) => ({
-    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
-  }));
+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 responsiveGridAutoColsStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$autoCols, (autoCols) => ({
-    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
-  }));
+function getServerSnapshot() {
+  return 0;
 }
-function responsiveGridColumnsStyle(props) {
-  const {
+function useMediaIndex() {
+  const $ = reactCompilerRuntime.c(2), {
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columns, (columns) => ({
-    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
-  }));
+  } = useTheme_v2();
+  let t0, t1;
+  $[0] !== media ? (t1 = _createMediaStore(media), $[0] = media, $[1] = t1) : t1 = $[1], t0 = t1;
+  const store = t0;
+  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
-function responsiveGridRowsStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rows, (rows) => ({
-    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
-  }));
+function usePrefersDark(t0) {
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$a : t0);
 }
-function responsiveGridGapStyle(props) {
-  const {
-    media,
-    space
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gap, (gap) => ({
-    gridGap: gap ? rem(space[gap]) : void 0
-  }));
+function _temp$a() {
+  return !1;
 }
-function responsiveGridGapXStyle(props) {
-  const {
-    media,
-    space
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gapX, (gapX) => ({
-    columnGap: gapX ? rem(space[gapX]) : void 0
-  }));
+function usePrefersReducedMotion(t0) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$9 : t0);
 }
-function responsiveGridGapYStyle(props) {
-  const {
-    media,
-    space
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$gapY, (gapY) => ({
-    rowGap: gapY ? rem(space[gapY]) : void 0
-  }));
+function _temp$9() {
+  return !1;
 }
-function responsiveGridItemStyle() {
-  return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
+function responsiveBorderStyle() {
+  return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
-const GRID_ITEM_ROW = {
-  auto: "auto",
-  full: "1 / -1"
-}, GRID_ITEM_COLUMN = {
-  auto: "auto",
-  full: "1 / -1"
-};
-function responsiveGridItemRowStyle(props) {
+function border(props) {
   const {
+    card,
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$row, (row) => typeof row == "number" ? {
-    gridRow: `span ${row} / span ${row}`
+  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+  return _responsive(media, props.$border, (value) => value ? {
+    "&&": {
+      border: borderStyle
+    }
   } : {
-    gridRow: GRID_ITEM_ROW[row]
+    "&&": {
+      border: 0
+    }
   });
 }
-function responsiveGridItemRowStartStyle(props) {
-  const {
-    media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowStart, (rowStart) => ({
-    gridRowStart: rowStart
-  }));
-}
-function responsiveGridItemRowEndStyle(props) {
+function borderTop(props) {
   const {
+    card,
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$rowEnd, (rowEnd) => ({
-    gridRowEnd: rowEnd
-  }));
+  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+  return _responsive(media, props.$borderTop, (value) => value ? {
+    "&&": {
+      borderTop: borderStyle
+    }
+  } : {
+    "&&": {
+      borderTop: 0
+    }
+  });
 }
-function responsiveGridItemColumnStyle(props) {
+function borderRight(props) {
   const {
+    card,
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$column, (column) => typeof column == "number" ? {
-    gridColumn: `span ${column} / span ${column}`
+  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+  return _responsive(media, props.$borderRight, (value) => value ? {
+    "&&": {
+      borderRight: borderStyle
+    }
   } : {
-    gridColumn: GRID_ITEM_COLUMN[column]
+    "&&": {
+      borderRight: 0
+    }
   });
 }
-function responsiveGridItemColumnStartStyle(props) {
+function borderBottom(props) {
   const {
+    card,
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnStart, (columnStart) => ({
-    gridColumnStart: columnStart
-  }));
+  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+  return _responsive(media, props.$borderBottom, (value) => value ? {
+    "&&": {
+      borderBottom: borderStyle
+    }
+  } : {
+    "&&": {
+      borderBottom: 0
+    }
+  });
 }
-function responsiveGridItemColumnEndStyle(props) {
+function borderLeft(props) {
   const {
+    card,
     media
-  } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$columnEnd, (columnEnd) => ({
-    gridColumnEnd: columnEnd
-  }));
-}
-function responsiveInputPaddingStyle(props) {
-  const {
-    $fontSize,
-    $iconLeft,
-    $iconRight,
-    $padding,
-    $space
-  } = props, {
-    font,
-    media,
-    space
-  } = theme.getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
-  for (let i = 0; i < len; i += 1)
-    _fontSize[i] = $fontSize[i] === void 0 ? _fontSize[i - 1] : $fontSize[i], _padding[i] = $padding[i] === void 0 ? _padding[i - 1] : $padding[i], _space[i] = $space[i] === void 0 ? _space[i - 1] : $space[i];
-  return _responsive(media, _padding, (_, i) => {
-    const size2 = font.text.sizes[_fontSize[i]] || font.text.sizes[2], emSize = size2.lineHeight - size2.ascenderHeight - size2.descenderHeight, p = space[_padding[i]], s = space[_space[i]], styles = {
-      paddingTop: rem(p - size2.ascenderHeight),
-      paddingRight: rem(p),
-      paddingBottom: rem(p - size2.descenderHeight),
-      paddingLeft: rem(p)
-    };
-    return $iconRight && (styles.paddingRight = rem(p + emSize + s)), $iconLeft && (styles.paddingLeft = rem(p + emSize + s)), styles;
+  } = theme.getTheme_v2(props.theme), borderStyle = `${card.border?.width ?? 1}px solid var(--card-border-color)`;
+  return _responsive(media, props.$borderLeft, (value) => value ? {
+    "&&": {
+      borderLeft: borderStyle
+    }
+  } : {
+    "&&": {
+      borderLeft: 0
+    }
   });
 }
-function responsiveInputPaddingIconRightStyle(props) {
-  return responsiveInputPaddingStyle({
-    ...props,
-    $iconRight: !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;
 }
-const ROOT_STYLE = styledComponents.css`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  align-items: center;
-`;
-function textInputRootStyle() {
-  return ROOT_STYLE;
+function responsiveBoxStyle() {
+  return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
 }
-function textInputBaseStyle(props) {
+function responsiveBoxDisplayStyle(props) {
   const {
-    $scheme,
-    $tone,
-    $weight
-  } = props, {
-    color,
-    font
+    media
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    appearance: none;
-    background: none;
-    border: 0;
-    border-radius: 0;
-    outline: none;
-    width: 100%;
-    box-sizing: border-box;
-    font-family: ${font.text.family};
-    font-weight: ${$weight && font.text.weights[$weight] || font.text.weights.regular};
-    margin: 0;
-    position: relative;
-    z-index: 1;
-    display: block;
-
-    /* NOTE: This is a hack to disable Chrome’s autofill styles */
-    &:-webkit-autofill,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus,
-    &:-webkit-autofill:active {
-      -webkit-text-fill-color: var(--input-fg-color) !important;
-      transition: background-color 5000s;
-      transition-delay: 86400s /* 24h */;
-    }
-
-    /* &:is(textarea) */
-    &[data-as='textarea'] {
-      resize: none;
-    }
-
-    color: var(--input-fg-color);
-
-    &::placeholder {
-      color: var(--input-placeholder-color);
-    }
-
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --input-fg-color: ${color.input.default.enabled.fg};
-      --input-placeholder-color: ${color.input.default.enabled.placeholder};
-
-      /* enabled */
-      &:not(:invalid):not(:disabled):not(:read-only) {
-        --input-fg-color: ${color.input.default.enabled.fg};
-        --input-placeholder-color: ${color.input.default.enabled.placeholder};
-      }
-
-      /* disabled */
-      &:not(:invalid):disabled {
-        --input-fg-color: ${color.input.default.disabled.fg};
-        --input-placeholder-color: ${color.input.default.disabled.placeholder};
-      }
-
-      /* invalid */
-      &:invalid {
-        --input-fg-color: ${color.input.invalid.enabled.fg};
-        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
-      }
-
-      /* readOnly */
-      &:read-only {
-        --input-fg-color: ${color.input.default.readOnly.fg};
-        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
-      }
+  return _responsive(media, props.$display, (display) => ({
+    "&:not([hidden])": {
+      display
     }
-  `;
+  }));
 }
-function textInputFontSizeStyle(props) {
+function responsiveBoxSizingStyle(props) {
   const {
-    font,
     media
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$fontSize, (sizeIndex) => {
-    const size2 = font.text.sizes[sizeIndex] || font.text.sizes[2];
-    return {
-      fontSize: rem(size2.fontSize),
-      lineHeight: size2.lineHeight / size2.fontSize
-    };
-  });
+  return _responsive(media, props.$sizing, (sizing) => ({
+    boxSizing: BOX_SIZING[sizing]
+  }));
 }
-function textInputRepresentationStyle(props) {
+function responsiveBoxHeightStyle(props) {
   const {
-    $hasPrefix,
-    $hasSuffix,
-    $scheme,
-    $tone,
-    $unstableDisableFocusRing
-  } = props, {
-    color,
-    input
+    media
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    --input-box-shadow: none;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: block;
-    pointer-events: none;
-    z-index: 0;
-
-    background-color: var(--card-bg-color);
-    box-shadow: var(--input-box-shadow);
-
-    border-top-left-radius: ${$hasPrefix ? 0 : void 0};
-    border-bottom-left-radius: ${$hasPrefix ? 0 : void 0};
-    border-top-right-radius: ${$hasSuffix ? 0 : void 0};
-    border-bottom-right-radius: ${$hasSuffix ? 0 : void 0};
-
-    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      --card-bg-color: ${color.input.default.enabled.bg};
-      --card-fg-color: ${color.input.default.enabled.fg};
-
-      /* enabled */
-      *:not(:disabled) + &[data-border] {
-        --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.default.enabled.border,
-    width: input.border.width
-  })};
-      }
-
-      /* invalid */
-      *:not(:disabled):invalid + & {
-        --card-bg-color: ${color.input.invalid.enabled.bg};
-        --card-fg-color: ${color.input.invalid.enabled.fg};
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.invalid.enabled.border,
-    width: input.border.width
-  })};
-        }
-      }
-
-      /* focused */
-      *:not(:disabled):focus + & {
-        &[data-border] {
-          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
-    border: {
-      color: color.input.default.enabled.border,
-      width: input.border.width
-    },
-    focusRing: input.text.focusRing
-  })};
-        }
-
-        &:not([data-border]) {
-          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
-    focusRing: input.text.focusRing
-  })};
-        }
-      }
-
-      /* disabled */
-      *:not(:invalid):disabled + & {
-        --card-bg-color: ${color.input.default.disabled.bg} !important;
-        --card-fg-color: ${color.input.default.disabled.fg} !important;
-        --card-icon-color: ${color.input.default.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.default.disabled.border,
-    width: input.border.width
-  })};
-        }
-      }
-
-      *:invalid:disabled + & {
-        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-
-        &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.invalid.disabled.border,
-    width: input.border.width
-  })};
-        }
-      }
-
-      /* readOnly */
-      *:not(:invalid):read-only + & {
-        --card-bg-color: ${color.input.default.readOnly.bg} !important;
-        --card-fg-color: ${color.input.default.readOnly.fg} !important;
-      }
-
-      *:invalid:read-only + & {
-        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-      }
-
-      /* hovered */
-      @media (hover: hover) {
-        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-          --card-bg-color: ${color.input.default.hovered.bg};
-          --card-fg-color: ${color.input.default.hovered.fg};
-        }
-
-        *:invalid:not(:disabled):not(:read-only):hover + & {
-          --card-bg-color: ${color.input.invalid.hovered.bg};
-          --card-fg-color: ${color.input.invalid.hovered.fg};
-        }
-
-        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.default.hovered.border,
-    width: input.border.width
-  })};
-        }
-
-        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-          --input-box-shadow: ${focusRingBorderStyle({
-    color: color.input.invalid.hovered.border,
-    width: input.border.width
-  })};
-        }
-      }
-    }
-  `;
+  return _responsive(media, props.$height, (height) => ({
+    height: BOX_HEIGHT[height]
+  }));
 }
-function responsiveMarginStyle(props) {
+function responsiveBoxOverflowStyle(props) {
   const {
-    theme: theme2
-  } = props;
-  return [_getResponsiveSpace(theme2, ["margin"], props.$margin), _getResponsiveSpace(theme2, ["marginLeft", "marginRight"], props.$marginX), _getResponsiveSpace(theme2, ["marginTop", "marginBottom"], props.$marginY), _getResponsiveSpace(theme2, ["marginTop"], props.$marginTop), _getResponsiveSpace(theme2, ["marginRight"], props.$marginRight), _getResponsiveSpace(theme2, ["marginBottom"], props.$marginBottom), _getResponsiveSpace(theme2, ["marginLeft"], props.$marginLeft)].filter(Boolean);
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$overflow, (overflow) => ({
+    overflow
+  }));
+}
+const BASE_STYLE$3 = {
+  "&&:not([hidden])": {
+    display: "flex"
+  }
+};
+function responsiveFlexStyle() {
+  return [BASE_STYLE$3, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
 }
-function responsivePaddingStyle(props) {
+function responsiveFlexAlignStyle(props) {
   const {
-    theme: theme2
-  } = props;
-  return [_getResponsiveSpace(theme2, ["padding"], props.$padding), _getResponsiveSpace(theme2, ["paddingLeft", "paddingRight"], props.$paddingX), _getResponsiveSpace(theme2, ["paddingTop", "paddingBottom"], props.$paddingY), _getResponsiveSpace(theme2, ["paddingTop"], props.$paddingTop), _getResponsiveSpace(theme2, ["paddingRight"], props.$paddingRight), _getResponsiveSpace(theme2, ["paddingBottom"], props.$paddingBottom), _getResponsiveSpace(theme2, ["paddingLeft"], props.$paddingLeft)].filter(Boolean);
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$align, (align) => ({
+    alignItems: align
+  }));
 }
-function responsiveRadiusStyle(props) {
+function responsiveFlexGapStyle(props) {
   const {
     media,
-    radius
+    space
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$radius, (value) => {
-    let borderRadius = 0;
-    return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), {
-      borderRadius
-    };
-  });
-}
-function toBoxShadow(shadow, color) {
-  return `${shadow.map(rem).join(" ")} ${color}`;
+  return _responsive(media, props.$gap, (gap) => ({
+    gap: gap ? rem(space[gap]) : void 0
+  }));
 }
-function shadowStyle(shadow, outlineWidth = 1) {
-  if (!shadow) return EMPTY_RECORD;
-  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`, umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)"), penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)"), ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
-  return {
-    boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`
-  };
+function responsiveFlexWrapStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$wrap, (wrap) => ({
+    flexWrap: wrap
+  }));
 }
-function responsiveShadowStyle(props) {
+function responsiveFlexJustifyStyle(props) {
   const {
-    card,
-    media,
-    shadow
+    media
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
+  return _responsive(media, props.$justify, (justify) => ({
+    justifyContent: justify
+  }));
 }
-function labelBaseStyle(props) {
+function responsiveFlexDirectionStyle(props) {
   const {
-    $accent,
-    $muted
-  } = props, {
-    font
+    media
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    text-transform: uppercase;
-
-    ${$accent && styledComponents.css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && styledComponents.css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-    }
-  `;
+  return _responsive(media, props.$direction, (direction) => ({
+    flexDirection: direction
+  }));
 }
-const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Label = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
-  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
-  $[0] !== props ? ({
-    accent,
-    align,
-    children: childrenProp,
-    muted: t0,
-    size: t1,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
-  const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    let t22;
-    $[9] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$2, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
-  } else {
-    let t22;
-    $[11] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
-  }
-  const t2 = useArrayProp$1(align), t3 = useArrayProp$1(size2);
-  let t4;
-  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
-});
-Label.displayName = "ForwardRef(Label)";
-const avatarStyle = {
-  root: avatarRootStyle,
-  arrow: avatarArrowStyle,
-  bgStroke: avatarBgStrokeStyle,
-  stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle,
-  image: avatarImageStyle
+const BASE_STYLE$2 = {
+  minWidth: 0,
+  minHeight: 0
 };
-function avatarArrowStyle() {
-  return {
-    position: "absolute",
-    boxSizing: "border-box",
-    zIndex: 0,
-    opacity: 0,
-    transition: "all 0.2s linear",
-    transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    "& > svg": {
-      width: "11px",
-      height: "7px",
-      position: "absolute",
-      top: "-5px",
-      left: "50%",
-      transform: "translateX(-6px)",
-      "&:not([hidden])": {
-        display: "block"
-      }
-    },
-    "[data-arrow-position='inside'] > &": {
-      transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-      opacity: 0
-    },
-    "[data-arrow-position='top'] > &": {
-      opacity: 1,
-      transform: "rotate(0deg)"
-    },
-    "[data-arrow-position='bottom'] > &": {
-      opacity: 1,
-      transform: "rotate(-180deg)"
-    }
-  };
+function flexItemStyle() {
+  return [BASE_STYLE$2, responsiveFlexItemStyle];
 }
-function avatarRootStyle(props) {
+function responsiveFlexItemStyle(props) {
   const {
-    $color
-  } = props, {
-    avatar
+    media
   } = theme.getTheme_v2(props.theme);
-  return {
-    "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
-    "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
-    backgroundColor: "var(--avatar-bg-color)",
-    position: "relative",
-    boxSizing: "border-box",
-    userSelect: "none",
-    boxShadow: "0 0 0 1px var(--card-bg-color)",
-    '&[data-status="inactive"]': {
-      opacity: 0.5
-    },
-    "&>svg": {
-      "&:not([hidden])": {
-        display: "block"
-      }
-    },
-    /* &:is(button) */
-    '&[data-as="button"]': {
-      WebkitFontSmoothing: "inherit",
-      appearance: "none",
-      margin: 0,
-      padding: 0,
-      border: 0,
-      font: "inherit",
-      color: "inherit",
-      outline: "none",
-      "&:focus": {
-        boxShadow: focusRingStyle({
-          focusRing: avatar.focusRing
-        })
-      },
-      "&:focus:not(:focus-visible)": {
-        boxShadow: "none"
-      }
-    }
-  };
+  return props.$flex ? _responsive(media, props.$flex, (flex) => ({
+    flex
+  })) : EMPTY_ARRAY;
 }
-function responsiveAvatarSizeStyle(props) {
+function focusRingBorderStyle(border2) {
+  return `inset 0 0 0 ${border2.width}px ${border2.color}`;
+}
+function focusRingStyle(opts) {
+  const {
+    base,
+    border: border2,
+    focusRing
+  } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
+  return [focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`, border2 && focusRingBorderStyle(border2), focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`, focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`].filter(Boolean).join(",");
+}
+const GRID_CSS = {
+  "&&:not([hidden])": {
+    display: "grid"
+  },
+  '&[data-as="ul"],&[data-as="ol"]': {
+    listStyle: "none"
+  }
+}, GRID_AUTO_COLUMS = {
+  auto: "auto",
+  min: "min-content",
+  max: "max-content",
+  fr: "minmax(0, 1fr)"
+}, GRID_AUTO_ROWS = {
+  auto: "auto",
+  min: "min-content",
+  max: "max-content",
+  fr: "minmax(0, 1fr)"
+};
+function responsiveGridStyle() {
+  return [GRID_CSS, responsiveGridAutoFlowStyle, responsiveGridAutoRowsStyle, responsiveGridAutoColsStyle, responsiveGridColumnsStyle, responsiveGridRowsStyle, responsiveGridGapStyle, responsiveGridGapXStyle, responsiveGridGapYStyle];
+}
+function responsiveGridAutoFlowStyle(props) {
   const {
-    avatar,
     media
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
-    return {
-      width: rem(avatarSize.size),
-      height: rem(avatarSize.size),
-      borderRadius: rem(avatarSize.size / 2),
-      "&>svg": {
-        width: rem(avatarSize.size),
-        height: rem(avatarSize.size),
-        borderRadius: rem(avatarSize.size / 2)
-      }
-    };
-  });
-}
-function avatarImageStyle() {
-  return {
-    position: "relative"
-  };
-}
-function avatarInitialsStyle() {
-  return {
-    width: "100%",
-    height: "100%",
-    color: "var(--avatar-fg-color)",
-    alignItems: "center",
-    justifyContent: "center",
-    textTransform: "uppercase",
-    textAlign: "center",
-    borderRadius: "50%",
-    "&:not([hidden])": {
-      display: "flex"
-    }
-  };
-}
-function avatarBgStrokeStyle() {
-  return {
-    strokeWidth: "4px",
-    stroke: "var(--card-bg-color)"
-  };
-}
-function avatarStrokeStyle() {
-  return {
-    strokeWidth: "2px",
-    stroke: "var(--avatar-bg-color)",
-    '[data-status="editing"] &': {
-      strokeDasharray: "2 4",
-      strokeLinecap: "round"
-    }
-  };
+  return _responsive(media, props.$autoFlow, (autoFlow) => ({
+    gridAutoFlow: autoFlow
+  }));
 }
-const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
-  color: "inherit"
-}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(53);
-  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
-  $[0] !== props ? ({
-    __unstable_hideInnerStroke,
-    as: asProp,
-    color: t0,
-    src,
-    title,
-    initials,
-    onImageLoadError,
-    arrowPosition: arrowPositionProp,
-    animateArrowFrom,
-    status: t1,
-    size: t2,
-    ...restProps
-  } = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = restProps, $[8] = src, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], restProps = $[7], src = $[8], t0 = $[9], t1 = $[10], t2 = $[11], title = $[12]);
-  const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
-    avatar
-  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp$1(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
-  let t3, t4;
-  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
-    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]), react.useEffect(t3, t4);
-  let t5, t6;
-  $[17] !== src ? (t5 = () => {
-    src && setImageFailed(!1);
-  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), react.useEffect(t5, t6);
-  let t7;
-  $[20] !== onImageLoadError ? (t7 = () => {
-    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__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.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] !== __unstable_hideInnerStroke || $[28] !== _radius || $[29] !== _sizeRem || $[30] !== handleImageError || $[31] !== imageFailed || $[32] !== imageId || $[33] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
-    !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
-    /* @__PURE__ */ jsxRuntime.jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-  ] }), $[27] = __unstable_hideInnerStroke, $[28] = _radius, $[29] = _sizeRem, $[30] = handleImageError, $[31] = imageFailed, $[32] = imageId, $[33] = src, $[34] = t12) : t12 = $[34];
-  let t13;
-  $[35] !== imageFailed || $[36] !== initials || $[37] !== initialsSize || $[38] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[35] = imageFailed, $[36] = initials, $[37] = initialsSize, $[38] = src, $[39] = t13) : t13 = $[39];
-  let t14;
-  return $[40] !== arrowPosition || $[41] !== as || $[42] !== color || $[43] !== ref || $[44] !== restProps || $[45] !== size2 || $[46] !== status || $[47] !== t10 || $[48] !== t11 || $[49] !== t12 || $[50] !== t13 || $[51] !== title ? (t14 = /* @__PURE__ */ jsxRuntime.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] = arrowPosition, $[41] = as, $[42] = color, $[43] = ref, $[44] = restProps, $[45] = size2, $[46] = status, $[47] = t10, $[48] = t11, $[49] = t12, $[50] = t13, $[51] = title, $[52] = t14) : t14 = $[52], t14;
-});
-Avatar.displayName = "ForwardRef(Avatar)";
-function _responsiveAvatarCounterSizeStyle(props) {
+function responsiveGridAutoRowsStyle(props) {
   const {
-    avatar,
     media
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2];
-    return avatarSize ? {
-      borderRadius: rem(avatarSize.size / 2),
-      minWidth: rem(avatarSize.size),
-      height: rem(avatarSize.size)
-    } : EMPTY_RECORD;
-  });
+  return _responsive(media, props.$autoRows, (autoRows) => ({
+    gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
+  }));
 }
-function _avatarCounterBaseStyle(props) {
+function responsiveGridAutoColsStyle(props) {
   const {
-    space
+    media
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    user-select: none;
-    color: inherit;
-    color: var(--card-fg-color);
-    background: var(--card-bg-color);
-    box-shadow:
-      0 0 0 1px var(--card-bg-color),
-      inset 0 0 0 1px var(--card-hairline-hard-color);
-    padding: 0 ${rem(space[2])};
-
-    &:not([hidden]) {
-      display: flex;
-    }
-  `;
+  return _responsive(media, props.$autoCols, (autoCols) => ({
+    gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
+  }));
 }
-const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(10), {
-    count,
-    size: t0
-  } = props, size2 = useArrayProp$1(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] !== count || $[4] !== fontSize2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[3] = count, $[4] = fontSize2, $[5] = t3) : t3 = $[5];
-  let t4;
-  return $[6] !== ref || $[7] !== size2 || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[6] = ref, $[7] = size2, $[8] = t3, $[9] = t4) : t4 = $[9], t4;
-});
-AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
-const BASE_STYLES = styledComponents.css`
-  white-space: nowrap;
-
-  & > div {
-    vertical-align: top;
-
-    &:not([hidden]) {
-      display: inline-block;
-    }
-  }
-`;
-function avatarStackStyle() {
-  return BASE_STYLES;
+function responsiveGridColumnsStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$columns, (columns) => ({
+    gridTemplateColumns: columns && `repeat(${columns},minmax(0,1fr));`
+  }));
 }
-function responsiveAvatarStackSizeStyle(props) {
+function responsiveGridRowsStyle(props) {
   const {
-    avatar,
     media
   } = theme.getTheme_v2(props.theme);
-  return _responsive(media, props.$size, (size2) => {
-    const avatarSize = avatar.sizes[size2];
-    return avatarSize ? {
-      "& > div + div": {
-        marginLeft: rem(avatarSize.distance)
-      }
-    } : EMPTY_RECORD;
-  });
+  return _responsive(media, props.$rows, (rows) => ({
+    gridTemplateRows: rows && `repeat(${rows},minmax(0,1fr));`
+  }));
 }
-const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(15);
-  let childrenProp, restProps, t0, t1;
-  $[0] !== props ? ({
-    children: childrenProp,
-    maxLength: t0,
-    size: t1,
-    ...restProps
-  } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps, $[3] = t0, $[4] = t1) : (childrenProp = $[1], restProps = $[2], t0 = $[3], t1 = $[4]);
-  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp$1(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Root$z, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
-  let t5;
-  $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
-    size: size2
-  }) }, String(childIndex)), $[5] = size2, $[6] = t5) : t5 = $[6];
-  const t6 = visibleChildren.map(t5);
-  let t7;
-  return $[7] !== T0 || $[8] !== ref || $[9] !== restProps || $[10] !== size2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
-    t3,
-    t4,
-    t6
-  ] }), $[7] = T0, $[8] = ref, $[9] = restProps, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
-});
-AvatarStack.displayName = "ForwardRef(AvatarStack)";
-const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(59);
-  let column, columnEnd, columnStart, flex, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, row, rowEnd, rowStart, sizing, t0, t1, t2, t3;
-  $[0] !== props ? ({
-    as: t0,
-    column,
-    columnStart,
-    columnEnd,
-    display: t1,
-    flex,
-    height,
-    margin: t2,
-    marginX,
-    marginY,
-    marginTop,
-    marginRight,
-    marginBottom,
-    marginLeft,
-    overflow,
-    padding: t3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    row,
-    rowStart,
-    rowEnd,
-    sizing,
-    ...restProps
-  } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[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$1(column), t6 = useArrayProp$1(columnStart), t7 = useArrayProp$1(columnEnd), t8 = useArrayProp$1(display), t9 = useArrayProp$1(flex), t10 = useArrayProp$1(height), t11 = useArrayProp$1(margin), t12 = useArrayProp$1(marginX), t13 = useArrayProp$1(marginY), t14 = useArrayProp$1(marginTop), t15 = useArrayProp$1(marginRight), t16 = useArrayProp$1(marginBottom), t17 = useArrayProp$1(marginLeft), t18 = useArrayProp$1(overflow), t19 = useArrayProp$1(padding), t20 = useArrayProp$1(paddingX), t21 = useArrayProp$1(paddingY), t22 = useArrayProp$1(paddingTop), t23 = useArrayProp$1(paddingRight), t24 = useArrayProp$1(paddingBottom), t25 = useArrayProp$1(paddingLeft), t26 = useArrayProp$1(row), t27 = useArrayProp$1(rowStart), t28 = useArrayProp$1(rowEnd), t29 = useArrayProp$1(sizing);
-  let t30;
-  return $[28] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.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] = asProp, $[29] = props.children, $[30] = ref, $[31] = restProps, $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13, $[36] = t14, $[37] = t15, $[38] = t16, $[39] = t17, $[40] = t18, $[41] = t19, $[42] = t20, $[43] = t21, $[44] = t22, $[45] = t23, $[46] = t24, $[47] = t25, $[48] = t26, $[49] = t27, $[50] = t28, $[51] = t29, $[52] = t4, $[53] = t5, $[54] = t6, $[55] = t7, $[56] = t8, $[57] = t9, $[58] = t30) : t30 = $[58], t30;
-});
-Box.displayName = "ForwardRef(Box)";
-function textBaseStyle(props) {
+function responsiveGridGapStyle(props) {
+  const {
+    media,
+    space
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$gap, (gap) => ({
+    gridGap: gap ? rem(space[gap]) : void 0
+  }));
+}
+function responsiveGridGapXStyle(props) {
   const {
-    $accent,
-    $muted
-  } = props, {
-    font
+    media,
+    space
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    color: var(--card-fg-color);
-
-    ${$accent && styledComponents.css`
-      color: var(--card-accent-fg-color);
-    `}
-
-    ${$muted && styledComponents.css`
-      color: var(--card-muted-fg-color);
-    `}
-
-    & code {
-      font-family: ${font.code.family};
-      border-radius: 1px;
-      background-color: var(--card-code-bg-color);
-      color: var(--card-code-fg-color);
-    }
-
-    & a {
-      text-decoration: none;
-      border-radius: 1px;
-      color: var(--card-link-color);
-      outline: none;
-
-      @media (hover: hover) {
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-
-      &:focus {
-        box-shadow:
-          0 0 0 1px var(--card-bg-color),
-          0 0 0 3px var(--card-focus-ring-color);
-      }
-
-      &:focus:not(:focus-visible) {
-        box-shadow: none;
-      }
-    }
-
-    & strong {
-      font-weight: ${font.text.weights.bold};
-    }
-
-    & svg {
-      /* Certain popular CSS libraries changes the defaults for SVG display */
-      /* Make sure SVGs are rendered as inline elements */
-      display: inline;
-    }
-
-    & [data-sanity-icon] {
-      vertical-align: baseline;
-      color: var(--card-icon-color);
-
-      & path {
-        vector-effect: non-scaling-stroke !important;
-      }
-    }
-  `;
+  return _responsive(media, props.$gapX, (gapX) => ({
+    columnGap: gapX ? rem(space[gapX]) : void 0
+  }));
 }
-const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styledComponents.styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`, Text = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
-  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
-  $[0] !== props ? ({
-    accent: t0,
-    align,
-    children: childrenProp,
-    muted: t1,
-    size: t2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
-  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    let t32;
-    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$1, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
-  }
-  const t3 = useArrayProp$1(align), t4 = useArrayProp$1(size2);
-  let t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
-  let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
-});
-Text.displayName = "ForwardRef(Text)";
-function badgeStyle(props) {
+function responsiveGridGapYStyle(props) {
   const {
-    $tone
-  } = props;
-  return {
-    "--card-bg-color": `var(--card-badge-${$tone}-bg-color)`,
-    "--card-fg-color": `var(--card-badge-${$tone}-fg-color)`,
-    backgroundColor: "var(--card-bg-color)",
-    cursor: "default",
-    "&:not([hidden])": {
-      display: "inline-block",
-      verticalAlign: "top"
-    }
-  };
+    media,
+    space
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$gapY, (gapY) => ({
+    rowGap: gapY ? rem(space[gapY]) : void 0
+  }));
 }
-const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(17);
-  let children, restProps, t0, t1, t2, t3;
-  if ($[0] !== props) {
-    const {
-      children: t42,
-      fontSize: t52,
-      mode: _deprecated_mode,
-      padding: t62,
-      radius: t72,
-      tone: t8,
-      ...t9
-    } = props;
-    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t8, restProps = t9, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2, $[6] = t3;
-  } else
-    children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5], t3 = $[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$1(radius), t5 = useArrayProp$1(padding);
-  let t6;
-  $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
-  let t7;
-  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
-});
-Badge.displayName = "ForwardRef(Badge)";
-const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(17);
-  let align, as, gap, justify, restProps, t0, wrap;
-  $[0] !== props ? ({
-    align,
-    as,
-    direction: t0,
-    gap,
-    justify,
-    wrap,
-    ...restProps
-  } = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap) : (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]);
-  const direction = t0 === void 0 ? "row" : t0, t1 = useArrayProp$1(align), t2 = useArrayProp$1(direction), t3 = useArrayProp$1(gap), t4 = useArrayProp$1(justify), t5 = useArrayProp$1(wrap);
-  let t6;
-  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = as, $[9] = ref, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
-});
-Flex.displayName = "ForwardRef(Flex)";
-const rotate$1 = styledComponents.keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`, Root$u = styledComponents.styled(Text)`
-  & > span > svg {
-    animation: ${rotate$1} 500ms linear infinite;
-  }
-`, Spinner = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(4);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
-  let t1;
-  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
-});
-Spinner.displayName = "ForwardRef(Spinner)";
-function _cardColorStyle(base, color, checkered = !1) {
-  return {
-    // from base
-    "--card-backdrop-color": base.backdrop,
-    "--card-focus-ring-color": base.focusRing,
-    "--card-shadow-outline-color": base.shadow.outline,
-    "--card-shadow-umbra-color": base.shadow.umbra,
-    "--card-shadow-penumbra-color": base.shadow.penumbra,
-    "--card-shadow-ambient-color": base.shadow.ambient,
-    // from state
-    "--card-accent-fg-color": color.accent.fg,
-    "--card-avatar-gray-bg-color": color.avatar.gray.bg,
-    "--card-avatar-gray-fg-color": color.avatar.gray.fg,
-    "--card-avatar-blue-bg-color": color.avatar.blue.bg,
-    "--card-avatar-blue-fg-color": color.avatar.blue.fg,
-    "--card-avatar-purple-bg-color": color.avatar.purple.bg,
-    "--card-avatar-purple-fg-color": color.avatar.purple.fg,
-    "--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
-    "--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
-    "--card-avatar-red-bg-color": color.avatar.red.bg,
-    "--card-avatar-red-fg-color": color.avatar.red.fg,
-    "--card-avatar-orange-bg-color": color.avatar.orange.bg,
-    "--card-avatar-orange-fg-color": color.avatar.orange.fg,
-    "--card-avatar-yellow-bg-color": color.avatar.yellow.bg,
-    "--card-avatar-yellow-fg-color": color.avatar.yellow.fg,
-    "--card-avatar-green-bg-color": color.avatar.green.bg,
-    "--card-avatar-green-fg-color": color.avatar.green.fg,
-    "--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
-    "--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
-    "--card-bg-color": color.bg,
-    "--card-bg-image": checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)` : void 0,
-    "--card-border-color": color.border,
-    "--card-badge-default-bg-color": color.badge.default.bg,
-    "--card-badge-default-dot-color": color.badge.default.dot,
-    "--card-badge-default-fg-color": color.badge.default.fg,
-    "--card-badge-default-icon-color": color.badge.default.icon,
-    "--card-badge-primary-bg-color": color.badge.primary.bg,
-    "--card-badge-primary-dot-color": color.badge.primary.dot,
-    "--card-badge-primary-fg-color": color.badge.primary.fg,
-    "--card-badge-primary-icon-color": color.badge.primary.icon,
-    "--card-badge-positive-bg-color": color.badge.positive.bg,
-    "--card-badge-positive-dot-color": color.badge.positive.dot,
-    "--card-badge-positive-fg-color": color.badge.positive.fg,
-    "--card-badge-positive-icon-color": color.badge.positive.icon,
-    "--card-badge-caution-bg-color": color.badge.caution.bg,
-    "--card-badge-caution-dot-color": color.badge.caution.dot,
-    "--card-badge-caution-fg-color": color.badge.caution.fg,
-    "--card-badge-caution-icon-color": color.badge.caution.icon,
-    "--card-badge-critical-bg-color": color.badge.critical.bg,
-    "--card-badge-critical-dot-color": color.badge.critical.dot,
-    "--card-badge-critical-fg-color": color.badge.critical.fg,
-    "--card-badge-critical-icon-color": color.badge.critical.icon,
-    "--card-code-bg-color": color.code.bg,
-    "--card-code-fg-color": color.code.fg,
-    "--card-fg-color": color.fg,
-    "--card-icon-color": color.icon,
-    "--card-kbd-bg-color": color.kbd.bg,
-    "--card-kbd-border-color": color.kbd.border,
-    "--card-kbd-fg-color": color.kbd.fg,
-    "--card-link-fg-color": color.link.fg,
-    "--card-muted-bg-color": color.muted.bg,
-    "--card-muted-fg-color": color.muted.fg,
-    "--card-skeleton-color-from": color.skeleton.from,
-    "--card-skeleton-color-to": color.skeleton.to,
-    // deprecated variables (kept for legacy)
-    "--card-bg2-color": color.muted.bg,
-    "--card-link-color": color.link.fg,
-    "--card-hairline-soft-color": color.border,
-    "--card-hairline-hard-color": color.border
-  };
+function responsiveGridItemStyle() {
+  return [responsiveGridItemRowStyle, responsiveGridItemRowStartStyle, responsiveGridItemRowEndStyle, responsiveGridItemColumnStyle, responsiveGridItemColumnStartStyle, responsiveGridItemColumnEndStyle];
+}
+const GRID_ITEM_ROW = {
+  auto: "auto",
+  full: "1 / -1"
+}, GRID_ITEM_COLUMN = {
+  auto: "auto",
+  full: "1 / -1"
+};
+function responsiveGridItemRowStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$row, (row) => typeof row == "number" ? {
+    gridRow: `span ${row} / span ${row}`
+  } : {
+    gridRow: GRID_ITEM_ROW[row]
+  });
 }
-function buttonBaseStyles(props) {
+function responsiveGridItemRowStartStyle(props) {
   const {
-    $width
-  } = props, {
-    style
+    media
   } = theme.getTheme_v2(props.theme);
-  return styledComponents.css`
-    ${style?.button};
-
-    -webkit-font-smoothing: inherit;
-    appearance: none;
-    display: inline-flex;
-    align-items: center;
-    font: inherit;
-    border: 0;
-    outline: none;
-    user-select: none;
-    text-decoration: none;
-    border: 0;
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    white-space: nowrap;
-    text-align: left;
-    position: relative;
-    vertical-align: top;
-
-    ${$width === "fill" && styledComponents.css`
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
-    `}
-
-    & > span {
-      display: block;
-      flex: 1;
-      min-width: 0;
-      border-radius: inherit;
-    }
-
-    &::-moz-focus-inner {
-      border: 0;
-      padding: 0;
-    }
-  `;
+  return _responsive(media, props.$rowStart, (rowStart) => ({
+    gridRowStart: rowStart
+  }));
 }
-function combineBoxShadow(...boxShadows) {
-  return boxShadows.filter(Boolean).join(",");
+function responsiveGridItemRowEndStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$rowEnd, (rowEnd) => ({
+    gridRowEnd: rowEnd
+  }));
 }
-function buttonColorStyles(props) {
+function responsiveGridItemColumnStyle(props) {
   const {
-    $mode
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$column, (column) => typeof column == "number" ? {
+    gridColumn: `span ${column} / span ${column}`
+  } : {
+    gridColumn: GRID_ITEM_COLUMN[column]
+  });
+}
+function responsiveGridItemColumnStartStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$columnStart, (columnStart) => ({
+    gridColumnStart: columnStart
+  }));
+}
+function responsiveGridItemColumnEndStyle(props) {
+  const {
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$columnEnd, (columnEnd) => ({
+    gridColumnEnd: columnEnd
+  }));
+}
+function responsiveInputPaddingStyle(props) {
+  const {
+    $fontSize,
+    $iconLeft,
+    $iconRight,
+    $padding,
+    $space
   } = props, {
-    button,
-    color: baseColor,
-    style
-  } = theme.getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
-    width: button.border.width,
-    color: "var(--card-border-color)"
-  }, defaultBoxShadow = void 0;
-  return [_cardColorStyle(baseColor, color.enabled), {
-    backgroundColor: "var(--card-bg-color)",
-    color: "var(--card-fg-color)",
-    boxShadow: focusRingBorderStyle(border2),
-    '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
-    "&:not([data-disabled='true'])": {
-      boxShadow: combineBoxShadow(focusRingBorderStyle(border2), shadow ? defaultBoxShadow : void 0),
-      "&:focus": {
-        boxShadow: focusRingStyle({
-          base: baseColor,
-          border: {
-            width: 2,
-            color: baseColor.bg
-          },
-          focusRing: button.focusRing
-        })
-      },
-      "&:focus:not(:focus-visible)": {
-        boxShadow: combineBoxShadow(focusRingBorderStyle(border2), shadow ? defaultBoxShadow : void 0)
-      },
-      "@media (hover: hover)": {
-        "&:hover": _cardColorStyle(baseColor, color.hovered),
-        "&:active": _cardColorStyle(baseColor, color.pressed),
-        "&[data-hovered]": _cardColorStyle(baseColor, color.hovered)
-      },
-      "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
-    }
-  }, style?.button?.root].filter(Boolean);
+    font,
+    media,
+    space
+  } = theme.getTheme_v2(props.theme), len = Math.max($padding.length, $space.length, $fontSize.length), _padding = [], _space = [], _fontSize = [];
+  for (let i = 0; i < len; i += 1)
+    _fontSize[i] = $fontSize[i] === void 0 ? _fontSize[i - 1] : $fontSize[i], _padding[i] = $padding[i] === void 0 ? _padding[i - 1] : $padding[i], _space[i] = $space[i] === void 0 ? _space[i - 1] : $space[i];
+  return _responsive(media, _padding, (_, i) => {
+    const size2 = font.text.sizes[_fontSize[i]] || font.text.sizes[2], emSize = size2.lineHeight - size2.ascenderHeight - size2.descenderHeight, p = space[_padding[i]], s = space[_space[i]], styles = {
+      paddingTop: rem(p - size2.ascenderHeight),
+      paddingRight: rem(p),
+      paddingBottom: rem(p - size2.descenderHeight),
+      paddingLeft: rem(p)
+    };
+    return $iconRight && (styles.paddingRight = rem(p + emSize + s)), $iconLeft && (styles.paddingLeft = rem(p + emSize + s)), styles;
+  });
 }
-const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
+function responsiveInputPaddingIconRightStyle(props) {
+  return responsiveInputPaddingStyle({
+    ...props,
+    $iconRight: !0
+  });
+}
+const ROOT_STYLE = styledComponents.css`
+  &:not([hidden]) {
+    display: flex;
+  }
+
   align-items: center;
-  justify-content: center;
-  background-color: var(--card-bg-color);
-  border-radius: inherit;
-  z-index: 1;
-  box-shadow: inherit;
-`, Button = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(64);
-  let IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, width;
-  $[0] !== props ? ({
-    children,
-    disabled,
-    fontSize: t0,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify: t1,
-    loading,
-    mode: t2,
-    padding: t3,
-    paddingX: paddingXProp,
-    paddingY: paddingYProp,
-    paddingTop: paddingTopProp,
-    paddingBottom: paddingBottomProp,
-    paddingLeft: paddingLeftProp,
-    paddingRight: paddingRightProp,
-    radius: t4,
-    selected,
-    space: t5,
-    text,
-    textAlign,
-    tone: t6,
-    type: t7,
-    muted: t8,
-    width,
-    ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], restProps = $[12], selected = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], text = $[23], textAlign = $[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$1(justifyProp), padding = useArrayProp$1(paddingProp), paddingX = useArrayProp$1(paddingXProp), paddingY = useArrayProp$1(paddingYProp), paddingTop = useArrayProp$1(paddingTopProp), paddingBottom = useArrayProp$1(paddingBottomProp), paddingLeft = useArrayProp$1(paddingLeftProp), paddingRight = useArrayProp$1(paddingRightProp), radius = useArrayProp$1(radiusProp), space = useArrayProp$1(spaceProp);
-  let t9, t10;
-  $[26] !== padding || $[27] !== paddingBottom || $[28] !== paddingLeft || $[29] !== paddingRight || $[30] !== paddingTop || $[31] !== paddingX || $[32] !== paddingY ? (t10 = {
-    padding,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight
-  }, $[26] = padding, $[27] = paddingBottom, $[28] = paddingLeft, $[29] = paddingRight, $[30] = paddingTop, $[31] = paddingX, $[32] = paddingY, $[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__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }), $[34] = loading, $[35] = t14) : t14 = $[35];
-  let t15;
-  $[36] !== IconComponent || $[37] !== IconRightComponent || $[38] !== boxProps || $[39] !== button || $[40] !== fontSize2 || $[41] !== justify || $[42] !== muted || $[43] !== space || $[44] !== text || $[45] !== textAlign ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
-    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      react.isValidElement(IconComponent) && IconComponent,
-      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-    ] }),
-    text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, align: textAlign, size: fontSize2, textOverflow: "ellipsis", weight: button.textWeight, children: text }) }),
-    IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      react.isValidElement(IconRightComponent) && IconRightComponent,
-      ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
-    ] })
-  ] }) }), $[36] = IconComponent, $[37] = IconRightComponent, $[38] = boxProps, $[39] = button, $[40] = fontSize2, $[41] = justify, $[42] = muted, $[43] = space, $[44] = text, $[45] = textAlign, $[46] = t15) : t15 = $[46];
-  let t16;
-  $[47] !== boxProps || $[48] !== children ? (t16 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children }), $[47] = boxProps, $[48] = children, $[49] = t16) : t16 = $[49];
-  let t17;
-  return $[50] !== mode || $[51] !== radius || $[52] !== ref || $[53] !== restProps || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== tone || $[61] !== type || $[62] !== width ? (t17 = /* @__PURE__ */ jsxRuntime.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] = mode, $[51] = radius, $[52] = ref, $[53] = restProps, $[54] = t11, $[55] = t12, $[56] = t13, $[57] = t14, $[58] = t15, $[59] = t16, $[60] = tone, $[61] = type, $[62] = width, $[63] = t17) : t17 = $[63], t17;
-});
-Button.displayName = "ForwardRef(Button)";
-function cardStyle(props) {
-  return [cardBaseStyle(props), cardColorStyle(props)];
+`;
+function textInputRootStyle() {
+  return ROOT_STYLE;
 }
-function cardBaseStyle(props) {
+function textInputBaseStyle(props) {
   const {
-    $checkered
+    $scheme,
+    $tone,
+    $weight
   } = props, {
-    space
+    color,
+    font
   } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
-    ${$checkered && styledComponents.css`
-      background-size: ${space[3]}px ${space[3]}px;
-      background-position: 50% 50%;
-      background-image: var(--card-bg-image);
-    `}
+    appearance: none;
+    background: none;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    font-family: ${font.text.family};
+    font-weight: ${$weight && font.text.weights[$weight] || font.text.weights.regular};
+    margin: 0;
+    position: relative;
+    z-index: 1;
+    display: block;
 
-    &[data-as='button'] {
-      -webkit-font-smoothing: inherit;
-      appearance: none;
-      outline: none;
-      font: inherit;
-      text-align: inherit;
-      border: 0;
-      width: -moz-available;
-      width: -webkit-fill-available;
-      width: stretch;
+    /* NOTE: This is a hack to disable Chrome’s autofill styles */
+    &:-webkit-autofill,
+    &:-webkit-autofill:hover,
+    &:-webkit-autofill:focus,
+    &:-webkit-autofill:active {
+      -webkit-text-fill-color: var(--input-fg-color) !important;
+      transition: background-color 5000s;
+      transition-delay: 86400s /* 24h */;
     }
 
-    /* &:is(a) */
-    &[data-as='a'] {
-      outline: none;
-      text-decoration: none;
+    /* &:is(textarea) */
+    &[data-as='textarea'] {
+      resize: none;
     }
 
-    /* &:is(pre) */
-    &[data-as='pre'] {
-      font: inherit;
+    color: var(--input-fg-color);
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --input-fg-color: ${color.input.default.enabled.fg};
+      --input-placeholder-color: ${color.input.default.enabled.placeholder};
+
+      /* enabled */
+      &:not(:invalid):not(:disabled):not(:read-only) {
+        --input-fg-color: ${color.input.default.enabled.fg};
+        --input-placeholder-color: ${color.input.default.enabled.placeholder};
+      }
+
+      /* disabled */
+      &:not(:invalid):disabled {
+        --input-fg-color: ${color.input.default.disabled.fg};
+        --input-placeholder-color: ${color.input.default.disabled.placeholder};
+      }
+
+      /* invalid */
+      &:invalid {
+        --input-fg-color: ${color.input.invalid.enabled.fg};
+        --input-placeholder-color: ${color.input.invalid.enabled.placeholder};
+      }
+
+      /* readOnly */
+      &:read-only {
+        --input-fg-color: ${color.input.default.readOnly.fg};
+        --input-placeholder-color: ${color.input.default.readOnly.placeholder};
+      }
     }
   `;
 }
-function cardColorStyle(props) {
+function textInputFontSizeStyle(props) {
   const {
-    $checkered,
-    $focusRing,
-    $muted
+    font,
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$fontSize, (sizeIndex) => {
+    const size2 = font.text.sizes[sizeIndex] || font.text.sizes[2];
+    return {
+      fontSize: rem(size2.fontSize),
+      lineHeight: size2.lineHeight / size2.fontSize
+    };
+  });
+}
+function textInputRepresentationStyle(props) {
+  const {
+    $hasPrefix,
+    $hasSuffix,
+    $scheme,
+    $tone,
+    $unstableDisableFocusRing
   } = props, {
-    card,
     color,
-    style
-  } = theme.getTheme_v2(props.theme), border2 = {
-    width: card.border.width,
-    color: "var(--card-border-color)"
-  };
+    input
+  } = theme.getTheme_v2(props.theme);
   return styledComponents.css`
-    color-scheme: ${color._dark ? "dark" : "light"};
+    --input-box-shadow: none;
 
-    ${_cardColorStyle(color, color, $checkered)}
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: block;
+    pointer-events: none;
+    z-index: 0;
 
-    background-color: ${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};
-    color: var(--card-fg-color);
+    background-color: var(--card-bg-color);
+    box-shadow: var(--input-box-shadow);
 
-    /* &:is(button) */
-    &[data-as='button'] {
-      --card-focus-ring-box-shadow: none;
+    border-top-left-radius: ${$hasPrefix ? 0 : void 0};
+    border-bottom-left-radius: ${$hasPrefix ? 0 : void 0};
+    border-top-right-radius: ${$hasSuffix ? 0 : void 0};
+    border-bottom-right-radius: ${$hasSuffix ? 0 : void 0};
 
-      cursor: default;
-      box-shadow: var(--card-focus-ring-box-shadow);
+    &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      --card-bg-color: ${color.input.default.enabled.bg};
+      --card-fg-color: ${color.input.default.enabled.fg};
 
-      &:disabled {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      /* enabled */
+      *:not(:disabled) + &[data-border] {
+        --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.default.enabled.border,
+    width: input.border.width
+  })};
       }
 
-      &:not(:disabled) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+      /* invalid */
+      *:not(:disabled):invalid + & {
+        --card-bg-color: ${color.input.invalid.enabled.bg};
+        --card-fg-color: ${color.input.invalid.enabled.fg};
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.invalid.enabled.border,
+    width: input.border.width
+  })};
         }
+      }
 
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+      /* focused */
+      *:not(:disabled):focus + & {
+        &[data-border] {
+          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
+    border: {
+      color: color.input.default.enabled.border,
+      width: input.border.width
+    },
+    focusRing: input.text.focusRing
+  })};
         }
 
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
+        &:not([data-border]) {
+          --input-box-shadow: ${$unstableDisableFocusRing ? void 0 : focusRingStyle({
+    focusRing: input.text.focusRing
+  })};
+        }
+      }
 
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
+      /* disabled */
+      *:not(:invalid):disabled + & {
+        --card-bg-color: ${color.input.default.disabled.bg} !important;
+        --card-fg-color: ${color.input.default.disabled.fg} !important;
+        --card-icon-color: ${color.input.default.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.default.disabled.border,
+    width: input.border.width
+  })};
         }
+      }
 
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({
-    base: color,
-    border: border2,
-    focusRing: card.focusRing
-  }) : void 0};
+      *:invalid:disabled + & {
+        --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+        --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+        --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+
+        &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.invalid.disabled.border,
+    width: input.border.width
+  })};
+        }
+      }
+
+      /* readOnly */
+      *:not(:invalid):read-only + & {
+        --card-bg-color: ${color.input.default.readOnly.bg} !important;
+        --card-fg-color: ${color.input.default.readOnly.fg} !important;
+      }
+
+      *:invalid:read-only + & {
+        --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+        --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+      }
+
+      /* hovered */
+      @media (hover: hover) {
+        *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+          --card-bg-color: ${color.input.default.hovered.bg};
+          --card-fg-color: ${color.input.default.hovered.fg};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):hover + & {
+          --card-bg-color: ${color.input.invalid.hovered.bg};
+          --card-fg-color: ${color.input.invalid.hovered.fg};
+        }
+
+        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.default.hovered.border,
+    width: input.border.width
+  })};
+        }
+
+        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+          --input-box-shadow: ${focusRingBorderStyle({
+    color: color.input.invalid.hovered.border,
+    width: input.border.width
+  })};
         }
       }
     }
+  `;
+}
+function responsiveMarginStyle(props) {
+  const {
+    theme: theme2
+  } = props;
+  return [_getResponsiveSpace(theme2, ["margin"], props.$margin), _getResponsiveSpace(theme2, ["marginLeft", "marginRight"], props.$marginX), _getResponsiveSpace(theme2, ["marginTop", "marginBottom"], props.$marginY), _getResponsiveSpace(theme2, ["marginTop"], props.$marginTop), _getResponsiveSpace(theme2, ["marginRight"], props.$marginRight), _getResponsiveSpace(theme2, ["marginBottom"], props.$marginBottom), _getResponsiveSpace(theme2, ["marginLeft"], props.$marginLeft)].filter(Boolean);
+}
+function responsivePaddingStyle(props) {
+  const {
+    theme: theme2
+  } = props;
+  return [_getResponsiveSpace(theme2, ["padding"], props.$padding), _getResponsiveSpace(theme2, ["paddingLeft", "paddingRight"], props.$paddingX), _getResponsiveSpace(theme2, ["paddingTop", "paddingBottom"], props.$paddingY), _getResponsiveSpace(theme2, ["paddingTop"], props.$paddingTop), _getResponsiveSpace(theme2, ["paddingRight"], props.$paddingRight), _getResponsiveSpace(theme2, ["paddingBottom"], props.$paddingBottom), _getResponsiveSpace(theme2, ["paddingLeft"], props.$paddingLeft)].filter(Boolean);
+}
+function responsiveRadiusStyle(props) {
+  const {
+    media,
+    radius
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$radius, (value) => {
+    let borderRadius = 0;
+    return typeof value == "number" && (borderRadius = rem(radius[value])), value === "full" && (borderRadius = "9999px"), {
+      borderRadius
+    };
+  });
+}
+function toBoxShadow(shadow, color) {
+  return `${shadow.map(rem).join(" ")} ${color}`;
+}
+function shadowStyle(shadow, outlineWidth = 1) {
+  if (!shadow) return EMPTY_RECORD;
+  const outline = `0 0 0 ${rem(outlineWidth)} var(--card-shadow-outline-color)`, umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)"), penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)"), ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
+  return {
+    boxShadow: `${outline}, ${umbra}, ${penumbra}, ${ambient}`
+  };
+}
+function responsiveShadowStyle(props) {
+  const {
+    card,
+    media,
+    shadow
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$shadow, (index) => shadowStyle(shadow[index], card.shadow.outline));
+}
+function labelBaseStyle(props) {
+  const {
+    $accent,
+    $muted
+  } = props, {
+    font
+  } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    text-transform: uppercase;
 
-    /* &:is(a) */
-    &[data-as='a'] {
-      cursor: pointer;
-      box-shadow: var(--card-focus-ring-box-shadow);
-
-      &[data-disabled] {
-        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
-      }
-
-      &:not([data-disabled]) {
-        &[data-pressed] {
-          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-        }
+    ${$accent && styledComponents.css`
+      color: var(--card-accent-fg-color);
+    `}
 
-        &[data-selected] {
-          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
-        }
+    ${$muted && styledComponents.css`
+      color: var(--card-muted-fg-color);
+    `}
 
-        @media (hover: hover) {
-          &:not([data-pressed]):not([data-selected]) {
-            &[data-hovered],
-            &:hover {
-              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
-            }
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+    }
 
-            &:active {
-              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
-            }
-          }
-        }
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+    }
 
-        &:focus-visible {
-          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({
-    base: color,
-    border: border2,
-    focusRing: card.focusRing
-  }) : void 0};
-        }
-      }
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
     }
 
-    ${style?.card?.root}
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+    }
   `;
 }
-const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(42);
-  let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
+const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), SpanWithTextOverflow$2 = styledComponents.styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`, Label = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(22);
+  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[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,
+    accent,
+    align,
+    children: childrenProp,
+    muted: t0,
+    size: t1,
+    textOverflow,
+    weight,
     ...restProps
-  } = props, $[0] = props, $[1] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[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 = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp$1(border2), t7 = useArrayProp$1(borderTop2), t8 = useArrayProp$1(borderRight2), t9 = useArrayProp$1(borderBottom2), t10 = useArrayProp$1(borderLeft2), t11 = useArrayProp$1(radius), t12 = useArrayProp$1(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
-  let t16;
-  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Root$s, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
-  let t17;
-  return $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
+  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
+  const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    let t22;
+    $[9] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$2, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
+  } else {
+    let t22;
+    $[11] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
+  }
+  const t2 = useArrayProp(align), t3 = useArrayProp(size2);
+  let t4;
+  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
 });
-Card.displayName = "ForwardRef(Card)";
-function useArrayProp(val, defaultVal) {
-  return useArrayProp$1(val ?? defaultVal);
-}
-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 $ = reactCompilerRuntime.c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = react.useState(null);
-  let t1;
-  $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
-  const [elements, setElements] = react.useState(t1), elementsRef = react.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;
+Label.displayName = "ForwardRef(Label)";
+const avatarStyle = {
+  root: avatarRootStyle,
+  arrow: avatarArrowStyle,
+  bgStroke: avatarBgStrokeStyle,
+  stroke: avatarStrokeStyle,
+  initials: avatarInitialsStyle,
+  image: avatarImageStyle
+};
+function avatarArrowStyle() {
+  return {
+    position: "absolute",
+    boxSizing: "border-box",
+    zIndex: 0,
+    opacity: 0,
+    transition: "all 0.2s linear",
+    transform: "rotate(-90deg) translate3d(0, 6px, 0)",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    "& > svg": {
+      width: "11px",
+      height: "7px",
+      position: "absolute",
+      top: "-5px",
+      left: "50%",
+      transform: "translateX(-6px)",
+      "&:not([hidden])": {
+        display: "block"
+      }
+    },
+    "[data-arrow-position='inside'] > &": {
+      transform: "rotate(-90deg) translate3d(0, 6px, 0)",
+      opacity: 0
+    },
+    "[data-arrow-position='top'] > &": {
+      opacity: 1,
+      transform: "rotate(0deg)"
+    },
+    "[data-arrow-position='bottom'] > &": {
+      opacity: 1,
+      transform: "rotate(-180deg)"
     }
-    for (const el of prevElements)
-      if (!nextElements.includes(el)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
+  };
+}
+function avatarRootStyle(props) {
+  const {
+    $color
+  } = props, {
+    avatar
+  } = theme.getTheme_v2(props.theme);
+  return {
+    "--avatar-bg-color": `var(--card-avatar-${$color}-bg-color)`,
+    "--avatar-fg-color": `var(--card-avatar-${$color}-fg-color)`,
+    backgroundColor: "var(--avatar-bg-color)",
+    position: "relative",
+    boxSizing: "border-box",
+    userSelect: "none",
+    boxShadow: "0 0 0 1px var(--card-bg-color)",
+    '&[data-status="inactive"]': {
+      opacity: 0.5
+    },
+    "&>svg": {
+      "&:not([hidden])": {
+        display: "block"
       }
-    for (const el_0 of nextElements)
-      if (!prevElements.includes(el_0)) {
-        setElements(nextElements), elementsRef.current = nextElements;
-        return;
+    },
+    /* &:is(button) */
+    '&[data-as="button"]': {
+      WebkitFontSmoothing: "inherit",
+      appearance: "none",
+      margin: 0,
+      padding: 0,
+      border: 0,
+      font: "inherit",
+      color: "inherit",
+      outline: "none",
+      "&:focus": {
+        boxShadow: focusRingStyle({
+          focusRing: avatar.focusRing
+        })
+      },
+      "&:focus:not(:focus-visible)": {
+        boxShadow: "none"
       }
-  }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
-  let t4, t5;
-  return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (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);
+    }
+  };
+}
+function responsiveAvatarSizeStyle(props) {
+  const {
+    avatar,
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$size, (size2) => {
+    const avatarSize = avatar.sizes[size2] || avatar.sizes[0];
+    return {
+      width: rem(avatarSize.size),
+      height: rem(avatarSize.size),
+      borderRadius: rem(avatarSize.size / 2),
+      "&>svg": {
+        width: rem(avatarSize.size),
+        height: rem(avatarSize.size),
+        borderRadius: rem(avatarSize.size / 2)
       }
     };
-    return window.addEventListener("mousedown", handleWindowMouseDown), () => {
-      window.removeEventListener("mousedown", handleWindowMouseDown);
-    };
-  }, t5 = [boundaryElement, listener, elements], $[7] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
+  });
 }
-function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$6 : t0;
-  let t1;
-  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
-    if (!listener)
-      return;
-    const target = evt.target;
-    if (!(target instanceof Node))
-      return;
-    const resolvedBoundaryElement = boundaryElement?.();
-    if (resolvedBoundaryElement && !resolvedBoundaryElement.contains(target))
-      return;
-    const elements = elementsArg().flat();
-    for (const el of elements)
-      if (el && (target === el || el.contains(target)))
-        return;
-    listener(evt);
-  }, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
-  const onEvent = useEffectEvent.useEffectEvent(t1), hasListener = !!listener;
-  let t2, t3;
-  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
-    if (!hasListener)
-      return;
-    const handleEvent = (evt_0) => onEvent(evt_0);
-    return document.addEventListener("mousedown", handleEvent), () => {
-      document.removeEventListener("mousedown", handleEvent);
-    };
-  }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+function avatarImageStyle() {
+  return {
+    position: "relative"
+  };
 }
-function _temp$6() {
-  return EMPTY_ARRAY;
+function avatarInitialsStyle() {
+  return {
+    width: "100%",
+    height: "100%",
+    color: "var(--avatar-fg-color)",
+    alignItems: "center",
+    justifyContent: "center",
+    textTransform: "uppercase",
+    textAlign: "center",
+    borderRadius: "50%",
+    "&:not([hidden])": {
+      display: "flex"
+    }
+  };
 }
-function useCustomValidity(ref, customValidity) {
-  const $ = reactCompilerRuntime.c(6);
-  let t0;
-  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
-    ref.current?.setCustomValidity(customValidity || "");
-  }, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
-  let t1;
-  $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], react.useEffect(t0, t1);
+function avatarBgStrokeStyle() {
+  return {
+    strokeWidth: "4px",
+    stroke: "var(--card-bg-color)"
+  };
 }
-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?.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)
+function avatarStrokeStyle() {
+  return {
+    strokeWidth: "2px",
+    stroke: "var(--avatar-bg-color)",
+    '[data-status="editing"] &': {
+      strokeDasharray: "2 4",
+      strokeLinecap: "round"
+    }
+  };
+}
+const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
+  color: "inherit"
+}), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(52);
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
+  $[0] !== props ? ({
+    __unstable_hideInnerStroke,
+    as: asProp,
+    color: t0,
+    src,
+    title,
+    initials,
+    onImageLoadError,
+    arrowPosition: arrowPositionProp,
+    animateArrowFrom,
+    status: t1,
+    size: t2,
+    ...restProps
+  } = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = restProps, $[8] = src, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], restProps = $[7], src = $[8], t0 = $[9], t1 = $[10], t2 = $[11], title = $[12]);
+  const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
+    avatar
+  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
+  let t3, t4;
+  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
+    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]), react.useEffect(t3, t4);
+  let t5, t6;
+  $[17] !== src ? (t5 = () => {
+    src && setImageFailed(!1);
+  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), react.useEffect(t5, t6);
+  let t7;
+  $[20] !== onImageLoadError ? (t7 = () => {
+    setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
+  }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
+  const handleImageError = t7;
+  let t8, t9;
+  $[22] !== size2 ? (t9 = size2.map(_temp$8), $[22] = size2, $[23] = t9) : t9 = $[23], t8 = t9;
+  const initialsSize = t8, t10 = typeof as == "string" ? as : void 0;
+  let t11;
+  $[24] !== color ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.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 }) }) }), $[24] = color, $[25] = t11) : t11 = $[25];
+  let t12;
+  $[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
+    !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
+  ] }), $[26] = __unstable_hideInnerStroke, $[27] = _radius, $[28] = _sizeRem, $[29] = handleImageError, $[30] = imageFailed, $[31] = imageId, $[32] = src, $[33] = t12) : t12 = $[33];
+  let t13;
+  $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = t13) : t13 = $[38];
+  let t14;
+  return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== title ? (t14 = /* @__PURE__ */ jsxRuntime.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
+  ] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t13, $[50] = title, $[51] = t14) : t14 = $[51], t14;
+});
+Avatar.displayName = "ForwardRef(Avatar)";
+function _temp$8(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
+function _responsiveAvatarCounterSizeStyle(props) {
+  const {
+    avatar,
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$size, (size2) => {
+    const avatarSize = avatar.sizes[size2];
+    return avatarSize ? {
+      borderRadius: rem(avatarSize.size / 2),
+      minWidth: rem(avatarSize.size),
+      height: rem(avatarSize.size)
+    } : EMPTY_RECORD;
   });
-  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 _avatarCounterBaseStyle(props) {
+  const {
+    space
+  } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    user-select: none;
+    color: inherit;
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    box-shadow:
+      0 0 0 1px var(--card-bg-color),
+      inset 0 0 0 1px var(--card-hairline-hard-color);
+    padding: 0 ${rem(space[2])};
+
+    &:not([hidden]) {
+      display: flex;
+    }
+  `;
+}
+const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(9), {
+    count,
+    size: t0
+  } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
+  let t1, t2;
+  $[0] !== size2 ? (t2 = size2.map(_temp$7), $[0] = size2, $[1] = t2) : t2 = $[1], t1 = t2;
+  const fontSize2 = t1;
+  let t3;
+  $[2] !== count || $[3] !== fontSize2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t3) : t3 = $[4];
+  let t4;
+  return $[5] !== ref || $[6] !== size2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[5] = ref, $[6] = size2, $[7] = t3, $[8] = t4) : t4 = $[8], t4;
+});
+AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
+function _temp$7(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
+const BASE_STYLES = styledComponents.css`
+  white-space: nowrap;
+
+  & > div {
+    vertical-align: top;
+
+    &:not([hidden]) {
+      display: inline-block;
     }
-  });
-  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);
+`;
+function avatarStackStyle() {
+  return BASE_STYLES;
+}
+function responsiveAvatarStackSizeStyle(props) {
+  const {
+    avatar,
+    media
+  } = theme.getTheme_v2(props.theme);
+  return _responsive(media, props.$size, (size2) => {
+    const avatarSize = avatar.sizes[size2];
+    return avatarSize ? {
+      "& > div + div": {
+        marginLeft: rem(avatarSize.distance)
+      }
+    } : EMPTY_RECORD;
   });
-}, 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();
+}
+const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(15);
+  let childrenProp, restProps, t0, t1;
+  $[0] !== props ? ({
+    children: childrenProp,
+    maxLength: t0,
+    size: t1,
+    ...restProps
+  } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps, $[3] = t0, $[4] = t1) : (childrenProp = $[1], restProps = $[2], t0 = $[3], t1 = $[4]);
+  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = react.Children.toArray(childrenProp).filter(react.isValidElement), 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, T0 = Root$z, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
+  let t5;
+  $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
+    size: size2
+  }) }, String(childIndex)), $[5] = size2, $[6] = t5) : t5 = $[6];
+  const t6 = visibleChildren.map(t5);
+  let t7;
+  return $[7] !== T0 || $[8] !== ref || $[9] !== restProps || $[10] !== size2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
+    t3,
+    t4,
+    t6
+  ] }), $[7] = T0, $[8] = ref, $[9] = restProps, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
+});
+AvatarStack.displayName = "ForwardRef(AvatarStack)";
+const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(59);
+  let column, columnEnd, columnStart, flex, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, row, rowEnd, rowStart, sizing, t0, t1, t2, t3;
+  $[0] !== props ? ({
+    as: t0,
+    column,
+    columnStart,
+    columnEnd,
+    display: t1,
+    flex,
+    height,
+    margin: t2,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    overflow,
+    padding: t3,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    row,
+    rowStart,
+    rowEnd,
+    sizing,
+    ...restProps
+  } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[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] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.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] = asProp, $[29] = props.children, $[30] = ref, $[31] = restProps, $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13, $[36] = t14, $[37] = t15, $[38] = t16, $[39] = t17, $[40] = t18, $[41] = t19, $[42] = t20, $[43] = t21, $[44] = t22, $[45] = t23, $[46] = t24, $[47] = t25, $[48] = t26, $[49] = t27, $[50] = t28, $[51] = t29, $[52] = t4, $[53] = t5, $[54] = t6, $[55] = t7, $[56] = t8, $[57] = t9, $[58] = t30) : t30 = $[58], t30;
+});
+Box.displayName = "ForwardRef(Box)";
+function textBaseStyle(props) {
+  const {
+    $accent,
+    $muted
+  } = props, {
+    font
+  } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    color: var(--card-fg-color);
+
+    ${$accent && styledComponents.css`
+      color: var(--card-accent-fg-color);
+    `}
+
+    ${$muted && styledComponents.css`
+      color: var(--card-muted-fg-color);
+    `}
+
+    & code {
+      font-family: ${font.code.family};
+      border-radius: 1px;
+      background-color: var(--card-code-bg-color);
+      color: var(--card-code-fg-color);
+    }
+
+    & a {
+      text-decoration: none;
+      border-radius: 1px;
+      color: var(--card-link-color);
+      outline: none;
+
+      @media (hover: hover) {
+        &:hover {
+          text-decoration: underline;
         }
-      });
+      }
+
+      &:focus {
+        box-shadow:
+          0 0 0 1px var(--card-bg-color),
+          0 0 0 3px var(--card-focus-ring-color);
+      }
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+      }
     }
-  }, Scheduler2.prototype.schedule = function() {
-    this.stop(), this.run();
-  }, Scheduler2.prototype.observe = function() {
-    var _this = this, cb = function() {
-      return _this.observer && _this.observer.observe(document.body, observerConfig);
-    };
-    document.body ? cb() : global$1.addEventListener("DOMContentLoaded", cb);
-  }, Scheduler2.prototype.start = function() {
-    var _this = this;
-    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), events.forEach(function(name) {
-      return global$1.addEventListener(name, _this.listener, !0);
-    }));
-  }, Scheduler2.prototype.stop = function() {
-    var _this = this;
-    this.stopped || (this.observer && this.observer.disconnect(), events.forEach(function(name) {
-      return global$1.removeEventListener(name, _this.listener, !0);
-    }), this.stopped = !0);
-  }, Scheduler2;
-}(), scheduler = new Scheduler(), updateCount = function(n) {
-  !watching && n > 0 && scheduler.start(), watching += n, !watching && scheduler.stop();
-}, skipNotifyOnElement = function(target) {
-  return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
-}, ResizeObservation = function() {
-  function ResizeObservation2(target, observedBox) {
-    this.target = target, this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX, this.lastReportedSize = {
-      inlineSize: 0,
-      blockSize: 0
-    };
+
+    & strong {
+      font-weight: ${font.text.weights.bold};
+    }
+
+    & svg {
+      /* Certain popular CSS libraries changes the defaults for SVG display */
+      /* Make sure SVGs are rendered as inline elements */
+      display: inline;
+    }
+
+    & [data-sanity-icon] {
+      vertical-align: baseline;
+      color: var(--card-icon-color);
+
+      & path {
+        vector-effect: non-scaling-stroke !important;
+      }
+    }
+  `;
+}
+const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), SpanWithTextOverflow$1 = styledComponents.styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`, Text = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(22);
+  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
+  $[0] !== props ? ({
+    accent: t0,
+    align,
+    children: childrenProp,
+    muted: t1,
+    size: t2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
+  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    let t32;
+    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow$1, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
-  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;
+  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
+  let t5;
+  $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
+  let t6;
+  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
+});
+Text.displayName = "ForwardRef(Text)";
+function badgeStyle(props) {
+  const {
+    $tone
+  } = props;
+  return {
+    "--card-bg-color": `var(--card-badge-${$tone}-bg-color)`,
+    "--card-fg-color": `var(--card-badge-${$tone}-fg-color)`,
+    backgroundColor: "var(--card-bg-color)",
+    cursor: "default",
+    "&:not([hidden])": {
+      display: "inline-block",
+      verticalAlign: "top"
+    }
+  };
+}
+const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(17);
+  let children, restProps, t0, t1, t2, t3;
+  if ($[0] !== props) {
+    const {
+      children: t42,
+      fontSize: t52,
+      mode: _deprecated_mode,
+      padding: t62,
+      radius: t72,
+      tone: t8,
+      ...t9
+    } = props;
+    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t8, restProps = t9, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2, $[6] = t3;
+  } else
+    children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5], t3 = $[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] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
+  let t7;
+  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
+});
+Badge.displayName = "ForwardRef(Badge)";
+const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(17);
+  let align, as, gap, justify, restProps, t0, wrap;
+  $[0] !== props ? ({
+    align,
+    as,
+    direction: t0,
+    gap,
+    justify,
+    wrap,
+    ...restProps
+  } = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap) : (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[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] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = as, $[9] = ref, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+});
+Flex.displayName = "ForwardRef(Flex)";
+const rotate$1 = styledComponents.keyframes`
+  from {
+    transform: rotate(0deg);
   }
-  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() {
+
+  to {
+    transform: rotate(360deg);
   }
-  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);
+`, Root$u = styledComponents.styled(Text)`
+  & > span > svg {
+    animation: ${rotate$1} 500ms linear infinite;
   }
-  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() {
+`, Spinner = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(4);
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
+  let t1;
+  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$u, { "data-ui": "Spinner", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
+});
+Spinner.displayName = "ForwardRef(Spinner)";
+function _cardColorStyle(base, color, checkered = !1) {
   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();
-      };
-    }
+    // from base
+    "--card-backdrop-color": base.backdrop,
+    "--card-focus-ring-color": base.focusRing,
+    "--card-shadow-outline-color": base.shadow.outline,
+    "--card-shadow-umbra-color": base.shadow.umbra,
+    "--card-shadow-penumbra-color": base.shadow.penumbra,
+    "--card-shadow-ambient-color": base.shadow.ambient,
+    // from state
+    "--card-accent-fg-color": color.accent.fg,
+    "--card-avatar-gray-bg-color": color.avatar.gray.bg,
+    "--card-avatar-gray-fg-color": color.avatar.gray.fg,
+    "--card-avatar-blue-bg-color": color.avatar.blue.bg,
+    "--card-avatar-blue-fg-color": color.avatar.blue.fg,
+    "--card-avatar-purple-bg-color": color.avatar.purple.bg,
+    "--card-avatar-purple-fg-color": color.avatar.purple.fg,
+    "--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
+    "--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
+    "--card-avatar-red-bg-color": color.avatar.red.bg,
+    "--card-avatar-red-fg-color": color.avatar.red.fg,
+    "--card-avatar-orange-bg-color": color.avatar.orange.bg,
+    "--card-avatar-orange-fg-color": color.avatar.orange.fg,
+    "--card-avatar-yellow-bg-color": color.avatar.yellow.bg,
+    "--card-avatar-yellow-fg-color": color.avatar.yellow.fg,
+    "--card-avatar-green-bg-color": color.avatar.green.bg,
+    "--card-avatar-green-fg-color": color.avatar.green.fg,
+    "--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
+    "--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
+    "--card-bg-color": color.bg,
+    "--card-bg-image": checkered ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)` : void 0,
+    "--card-border-color": color.border,
+    "--card-badge-default-bg-color": color.badge.default.bg,
+    "--card-badge-default-dot-color": color.badge.default.dot,
+    "--card-badge-default-fg-color": color.badge.default.fg,
+    "--card-badge-default-icon-color": color.badge.default.icon,
+    "--card-badge-primary-bg-color": color.badge.primary.bg,
+    "--card-badge-primary-dot-color": color.badge.primary.dot,
+    "--card-badge-primary-fg-color": color.badge.primary.fg,
+    "--card-badge-primary-icon-color": color.badge.primary.icon,
+    "--card-badge-positive-bg-color": color.badge.positive.bg,
+    "--card-badge-positive-dot-color": color.badge.positive.dot,
+    "--card-badge-positive-fg-color": color.badge.positive.fg,
+    "--card-badge-positive-icon-color": color.badge.positive.icon,
+    "--card-badge-caution-bg-color": color.badge.caution.bg,
+    "--card-badge-caution-dot-color": color.badge.caution.dot,
+    "--card-badge-caution-fg-color": color.badge.caution.fg,
+    "--card-badge-caution-icon-color": color.badge.caution.icon,
+    "--card-badge-critical-bg-color": color.badge.critical.bg,
+    "--card-badge-critical-dot-color": color.badge.critical.dot,
+    "--card-badge-critical-fg-color": color.badge.critical.fg,
+    "--card-badge-critical-icon-color": color.badge.critical.icon,
+    "--card-code-bg-color": color.code.bg,
+    "--card-code-fg-color": color.code.fg,
+    "--card-fg-color": color.fg,
+    "--card-icon-color": color.icon,
+    "--card-kbd-bg-color": color.kbd.bg,
+    "--card-kbd-border-color": color.kbd.border,
+    "--card-kbd-fg-color": color.kbd.fg,
+    "--card-link-fg-color": color.link.fg,
+    "--card-muted-bg-color": color.muted.bg,
+    "--card-muted-fg-color": color.muted.fg,
+    "--card-skeleton-color-from": color.skeleton.from,
+    "--card-skeleton-color-to": color.skeleton.to,
+    // deprecated variables (kept for legacy)
+    "--card-bg2-color": color.muted.bg,
+    "--card-link-color": color.link.fg,
+    "--card-hairline-soft-color": color.border,
+    "--card-hairline-hard-color": color.border
   };
 }
-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 buttonBaseStyles(props) {
+  const {
+    $width
+  } = props, {
+    style
+  } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    ${style?.button};
+
+    -webkit-font-smoothing: inherit;
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    font: inherit;
+    border: 0;
+    outline: none;
+    user-select: none;
+    text-decoration: none;
+    border: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    white-space: nowrap;
+    text-align: left;
+    position: relative;
+    vertical-align: top;
+
+    ${$width === "fill" && styledComponents.css`
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    `}
+
+    & > span {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      border-radius: inherit;
     }
-  };
-}
-function useElementSize(element) {
-  const $ = reactCompilerRuntime.c(3), [size2, setSize] = react.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]), react.useEffect(t0, t1), size2;
+
+    &::-moz-focus-inner {
+      border: 0;
+      padding: 0;
+    }
+  `;
 }
-function useElementRect(element) {
-  return useElementSize(element)?._contentRect || null;
+function combineBoxShadow(...boxShadows) {
+  return boxShadows.filter(Boolean).join(",");
 }
-function useForwardedRef(ref) {
-  const $ = reactCompilerRuntime.c(1), innerRef = react.useRef(null);
-  let t0;
-  return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], react.useImperativeHandle(ref, t0), innerRef;
+function buttonColorStyles(props) {
+  const {
+    $mode
+  } = props, {
+    button,
+    color: baseColor,
+    style
+  } = theme.getTheme_v2(props.theme), shadow = props.$mode === "ghost", mode = baseColor.button[$mode] || baseColor.button.default, color = mode[props.$tone] || mode.default, border2 = {
+    width: button.border.width,
+    color: "var(--card-border-color)"
+  }, defaultBoxShadow = void 0;
+  return [_cardColorStyle(baseColor, color.enabled), {
+    backgroundColor: "var(--card-bg-color)",
+    color: "var(--card-fg-color)",
+    boxShadow: focusRingBorderStyle(border2),
+    '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
+    "&:not([data-disabled='true'])": {
+      boxShadow: combineBoxShadow(focusRingBorderStyle(border2), shadow ? defaultBoxShadow : void 0),
+      "&:focus": {
+        boxShadow: focusRingStyle({
+          base: baseColor,
+          border: {
+            width: 2,
+            color: baseColor.bg
+          },
+          focusRing: button.focusRing
+        })
+      },
+      "&:focus:not(:focus-visible)": {
+        boxShadow: combineBoxShadow(focusRingBorderStyle(border2), shadow ? defaultBoxShadow : void 0)
+      },
+      "@media (hover: hover)": {
+        "&:hover": _cardColorStyle(baseColor, color.hovered),
+        "&:active": _cardColorStyle(baseColor, color.pressed),
+        "&[data-hovered]": _cardColorStyle(baseColor, color.hovered)
+      },
+      "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
+    }
+  }, style?.button?.root].filter(Boolean);
 }
-function useGlobalKeyDown(onKeyDown) {
-  const $ = reactCompilerRuntime.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]), react.useEffect(t0, t1);
+const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles), LoadingBox = styledComponents.styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--card-bg-color);
+  border-radius: inherit;
+  z-index: 1;
+  box-shadow: inherit;
+`, Button = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(64);
+  let IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, width;
+  $[0] !== props ? ({
+    children,
+    disabled,
+    fontSize: t0,
+    icon: IconComponent,
+    iconRight: IconRightComponent,
+    justify: t1,
+    loading,
+    mode: t2,
+    padding: t3,
+    paddingX: paddingXProp,
+    paddingY: paddingYProp,
+    paddingTop: paddingTopProp,
+    paddingBottom: paddingBottomProp,
+    paddingLeft: paddingLeftProp,
+    paddingRight: paddingRightProp,
+    radius: t4,
+    selected,
+    space: t5,
+    text,
+    textAlign,
+    tone: t6,
+    type: t7,
+    muted: t8,
+    width,
+    ...restProps
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], restProps = $[12], selected = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], text = $[23], textAlign = $[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);
+  let t9, t10;
+  $[26] !== padding || $[27] !== paddingBottom || $[28] !== paddingLeft || $[29] !== paddingRight || $[30] !== paddingTop || $[31] !== paddingX || $[32] !== paddingY ? (t10 = {
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  }, $[26] = padding, $[27] = paddingBottom, $[28] = paddingLeft, $[29] = paddingRight, $[30] = paddingTop, $[31] = paddingX, $[32] = paddingY, $[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__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }), $[34] = loading, $[35] = t14) : t14 = $[35];
+  let t15;
+  $[36] !== IconComponent || $[37] !== IconRightComponent || $[38] !== boxProps || $[39] !== button || $[40] !== fontSize2 || $[41] !== justify || $[42] !== muted || $[43] !== space || $[44] !== text || $[45] !== textAlign ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+    ] }),
+    text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, align: textAlign, size: fontSize2, textOverflow: "ellipsis", weight: button.textWeight, children: text }) }),
+    IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconRightComponent) && IconRightComponent,
+      ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+    ] })
+  ] }) }), $[36] = IconComponent, $[37] = IconRightComponent, $[38] = boxProps, $[39] = button, $[40] = fontSize2, $[41] = justify, $[42] = muted, $[43] = space, $[44] = text, $[45] = textAlign, $[46] = t15) : t15 = $[46];
+  let t16;
+  $[47] !== boxProps || $[48] !== children ? (t16 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children }), $[47] = boxProps, $[48] = children, $[49] = t16) : t16 = $[49];
+  let t17;
+  return $[50] !== mode || $[51] !== radius || $[52] !== ref || $[53] !== restProps || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== tone || $[61] !== type || $[62] !== width ? (t17 = /* @__PURE__ */ jsxRuntime.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] = mode, $[51] = radius, $[52] = ref, $[53] = restProps, $[54] = t11, $[55] = t12, $[56] = t13, $[57] = t14, $[58] = t15, $[59] = t16, $[60] = tone, $[61] = type, $[62] = width, $[63] = t17) : t17 = $[63], t17;
+});
+Button.displayName = "ForwardRef(Button)";
+function cardStyle(props) {
+  return [cardBaseStyle(props), cardColorStyle(props)];
 }
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+function cardBaseStyle(props) {
   const {
-    subscribe: subscribe2,
-    getSnapshot
-  } = react.useMemo(() => {
-    let MEDIA_QUERY_CACHE;
-    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
-    return {
-      subscribe: (onStoreChange) => {
-        const matchMedia = getMatchMedia();
-        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
-      },
-      getSnapshot: () => getMatchMedia().matches
-    };
-  }, [mediaQueryString]);
-  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
-}
-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)`;
+    $checkered
+  } = props, {
+    space
+  } = theme.getTheme_v2(props.theme);
+  return styledComponents.css`
+    ${$checkered && styledComponents.css`
+      background-size: ${space[3]}px ${space[3]}px;
+      background-position: 50% 50%;
+      background-image: var(--card-bg-image);
+    `}
+
+    &[data-as='button'] {
+      -webkit-font-smoothing: inherit;
+      appearance: none;
+      outline: none;
+      font: inherit;
+      text-align: inherit;
+      border: 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: stretch;
+    }
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      outline: none;
+      text-decoration: none;
+    }
+
+    /* &:is(pre) */
+    &[data-as='pre'] {
+      font: inherit;
+    }
+  `;
 }
-function _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)
-        });
+function cardColorStyle(props) {
+  const {
+    $checkered,
+    $focusRing,
+    $muted
+  } = props, {
+    card,
+    color,
+    style
+  } = theme.getTheme_v2(props.theme), border2 = {
+    width: card.border.width,
+    color: "var(--card-border-color)"
+  };
+  return styledComponents.css`
+    color-scheme: ${color._dark ? "dark" : "light"};
+
+    ${_cardColorStyle(color, color, $checkered)}
+
+    background-color: ${$muted ? "var(--card-muted-bg-color)" : "var(--card-bg-color)"};
+    color: var(--card-fg-color);
+
+    /* &:is(button) */
+    &[data-as='button'] {
+      --card-focus-ring-box-shadow: none;
+
+      cursor: default;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &:disabled {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not(:disabled) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({
+    base: color,
+    border: border2,
+    focusRing: card.focusRing
+  }) : void 0};
+        }
       }
     }
-    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));
+
+    /* &:is(a) */
+    &[data-as='a'] {
+      cursor: pointer;
+      box-shadow: var(--card-focus-ring-box-shadow);
+
+      &[data-disabled] {
+        ${_cardColorStyle(color, color.selectable.default.disabled, $checkered)}
+      }
+
+      &:not([data-disabled]) {
+        &[data-pressed] {
+          ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+        }
+
+        &[data-selected] {
+          ${_cardColorStyle(color, color.selectable.default.selected, $checkered)}
+        }
+
+        @media (hover: hover) {
+          &:not([data-pressed]):not([data-selected]) {
+            &[data-hovered],
+            &:hover {
+              ${_cardColorStyle(color, color.selectable.default.hovered, $checkered)}
+            }
+
+            &:active {
+              ${_cardColorStyle(color, color.selectable.default.pressed, $checkered)}
+            }
+          }
+        }
+
+        &:focus-visible {
+          --card-focus-ring-box-shadow: ${$focusRing ? focusRingStyle({
+    base: color,
+    border: border2,
+    focusRing: card.focusRing
+  }) : void 0};
+        }
       }
-      return () => {
-        for (const disposeFn of disposeFns)
-          disposeFn();
-      };
     }
-  };
-}
-function getServerSnapshot() {
-  return 0;
-}
-function useMediaIndex() {
-  const $ = reactCompilerRuntime.c(2), {
-    media
-  } = useTheme_v2();
-  let t0, t1;
-  $[0] !== media ? (t1 = _createMediaStore(media), $[0] = media, $[1] = t1) : t1 = $[1], t0 = t1;
-  const store = t0;
-  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
-}
-function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$5 : t0);
-}
-function _temp$5() {
-  return !1;
-}
-function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$4 : t0);
-}
-function _temp$4() {
-  return !1;
+
+    ${style?.card?.root}
+  `;
 }
+const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
+  const $ = reactCompilerRuntime.c(42);
+  let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
+  $[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] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[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 = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp(border2), t7 = useArrayProp(borderTop2), t8 = useArrayProp(borderRight2), t9 = useArrayProp(borderBottom2), t10 = useArrayProp(borderLeft2), t11 = useArrayProp(radius), t12 = useArrayProp(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
+  let t16;
+  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Root$s, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
+  let t17;
+  return $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
+});
+Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2775,7 +2759,7 @@ const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyl
   const size2 = t0 === void 0 ? 2 : t0, language = typeof languageProp == "string" ? languageProp : void 0;
   let t1;
   $[6] !== language ? (t1 = language ? Refractor__default.default.hasLanguage(language) : !1, $[6] = language, $[7] = t1) : t1 = $[7];
-  const registered = t1, t2 = useArrayProp$1(size2);
+  const registered = t1, t2 = useArrayProp(size2);
   let t3;
   $[8] !== children || $[9] !== language || $[10] !== registered ? (t3 = !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[8] = children, $[9] = language, $[10] = registered, $[11] = t3) : t3 = $[11];
   let t4;
@@ -2811,7 +2795,7 @@ const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContai
     width: t0,
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
-  const t1 = useArrayProp$1(t0 === void 0 ? 2 : t0);
+  const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
   let t2;
   return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
 });
@@ -2832,7 +2816,7 @@ const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.f
     children,
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = restProps, $[11] = rows) : (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], restProps = $[10], rows = $[11]);
-  const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp$1(autoRows), t2 = useArrayProp$1(autoCols), t3 = useArrayProp$1(autoFlow), t4 = useArrayProp$1(columns), t5 = useArrayProp$1(gap), t6 = useArrayProp$1(gapX), t7 = useArrayProp$1(gapY), t8 = useArrayProp$1(rows);
+  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] !== as || $[13] !== children || $[14] !== ref || $[15] !== restProps || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.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] = as, $[13] = children, $[14] = ref, $[15] = restProps, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 });
@@ -2921,7 +2905,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
     let t32;
     $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
-  const t3 = useArrayProp$1(align), t4 = useArrayProp$1(size2);
+  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
   let t6;
@@ -2956,7 +2940,7 @@ function inlineSpaceStyle(props) {
   });
 }
 const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(13);
+  const $ = reactCompilerRuntime.c(12);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
     as,
@@ -2965,17 +2949,15 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
   let t0, t1;
-  if ($[5] !== childrenProp) {
-    let t22;
-    $[7] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }), $[7] = t22) : t22 = $[7], t1 = react.Children.map(childrenProp, t22), $[5] = childrenProp, $[6] = t1;
-  } else
-    t1 = $[6];
-  t0 = t1;
-  const children = t0, t2 = useArrayProp$1(space);
+  $[5] !== childrenProp ? (t1 = react.Children.map(childrenProp, _temp$6), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
+  const children = t0, t2 = useArrayProp(space);
   let t3;
-  return $[8] !== as || $[9] !== children || $[10] !== restProps || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[8] = as, $[9] = children, $[10] = restProps, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
+  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
+function _temp$6(child) {
+  return child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child });
+}
 function kbdStyle() {
   return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -3003,7 +2985,7 @@ const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD
     radius: t2,
     ...restProps
   } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2) : (children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5]);
-  const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, t3 = useArrayProp$1(t2 === void 0 ? 2 : t2);
+  const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, t3 = useArrayProp(t2 === void 0 ? 2 : t2);
   let t4;
   $[6] !== children || $[7] !== fontSize2 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = children, $[7] = fontSize2, $[8] = t4) : t4 = $[8];
   let t5;
@@ -3391,7 +3373,7 @@ function LayerProvider(props) {
   } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = react.useContext(LayerContext);
   let t1;
   $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
-  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp$1(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
+  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
   let t2;
   $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
   const [, setChildLayers] = react.useState(t2), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0;
@@ -3404,13 +3386,13 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize((v) => v + 1), () => {
+    }) : setSize(_temp$5), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
         };
         return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize((v_0) => v_0 - 1), parentDispose?.();
+      }) : setSize(_temp2$3), parentDispose?.();
     };
   }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
   const registerChild = t3;
@@ -3429,6 +3411,12 @@ function LayerProvider(props) {
   let t8;
   return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
 }
+function _temp2$3(v_0) {
+  return v_0 - 1;
+}
+function _temp$5(v) {
+  return v + 1;
+}
 LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({
   position: "relative"
@@ -3515,8 +3503,9 @@ function PortalProvider(props) {
   const $ = reactCompilerRuntime.c(7), {
     boundaryElement,
     children,
-    element
-  } = props, elements = useUnique(props.__unstable_elements), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1);
+    element,
+    __unstable_elements: elementsProp
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
   let t0;
   const t1 = boundaryElement || null, t2 = element || fallbackElement;
   let t3;
@@ -3530,21 +3519,20 @@ function PortalProvider(props) {
   let t4;
   return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
 }
-function _temp2$1() {
+function _temp2$2() {
   return null;
 }
-function _temp$3() {
+function _temp$4() {
   return document.body;
 }
 PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
 };
 function useUnique(value) {
-  const [cachedValue, setCachedValue] = react.useState(value);
-  let result = cachedValue;
-  return isEqual(cachedValue, value) || (setCachedValue(value), result = value), result;
+  const valueRef = react.useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
 }
-function isEqual(objA, objB) {
+function _isEqual(objA, objB) {
   if (!objA || !objB)
     return objA === objB;
   const keysA = Object.keys(objA), keysB = Object.keys(objB);
@@ -3876,7 +3864,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     zOffset: zOffsetProp = layer.popover.zOffset,
     updateRef,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp$1(paddingProp), radius = useArrayProp$1(radiusProp), shadow = useArrayProp$1(shadowProp), widthArrayProp = useArrayProp$1(widthProp), zOffset = useArrayProp$1(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
@@ -4276,7 +4264,7 @@ 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 = react.useRef(null);
   let t4;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
-  const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp$1(fontSize2), t7 = useArrayProp$1(padding), t8 = useArrayProp$1(radius), t9 = useArrayProp$1(space), t10 = disabled || readOnly;
+  const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(radius), t9 = useArrayProp(space), t10 = disabled || readOnly;
   let t11;
   $[11] !== children || $[12] !== restProps || $[13] !== t10 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = children, $[12] = restProps, $[13] = t10, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8, $[18] = t9, $[19] = t11) : t11 = $[19];
   let t12;
@@ -4322,7 +4310,7 @@ const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpace
     space,
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = space) : (as = $[1], restProps = $[2], space = $[3]);
-  const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp$1(space);
+  const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(space);
   let t2;
   return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$e, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
 });
@@ -4538,10 +4526,10 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
   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 = react.useRef(null), rootTheme = useRootTheme();
   let t5;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], react.useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
-  const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp$1(fontSize2), t9 = useArrayProp$1(padding), t10 = rootTheme.scheme, t11 = useArrayProp$1(0);
+  const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp(fontSize2), t9 = useArrayProp(padding), t10 = rootTheme.scheme, t11 = useArrayProp(0);
   let t12;
   $[11] !== disabled || $[12] !== restProps || $[13] !== rootTheme.scheme || $[14] !== rootTheme.tone || $[15] !== t11 || $[16] !== t8 || $[17] !== t9 || $[18] !== weight ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[11] = disabled, $[12] = restProps, $[13] = rootTheme.scheme, $[14] = rootTheme.tone, $[15] = t11, $[16] = t8, $[17] = t9, $[18] = weight, $[19] = t12) : t12 = $[19];
-  const t13 = useArrayProp$1(radius), t14 = border2 ? "" : void 0;
+  const t13 = useArrayProp(radius), t14 = border2 ? "" : void 0;
   let t15;
   $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = __unstable_disableFocusRing, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t13, $[24] = t14, $[25] = t15) : t15 = $[25];
   let t16;
@@ -4598,7 +4586,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(86);
+  const $ = reactCompilerRuntime.c(84);
   let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
@@ -4620,10 +4608,10 @@ const CLEAR_BUTTON_BOX_STYLE = {
     weight,
     ...restProps
   } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = clearButton, $[5] = customValidity, $[6] = onClear, $[7] = prefix, $[8] = readOnly, $[9] = restProps, $[10] = suffix, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = weight) : (IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], clearButton = $[4], customValidity = $[5], onClear = $[6], prefix = $[7], readOnly = $[8], restProps = $[9], suffix = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16], t6 = $[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 = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp$1(fontSizeProp), padding = useArrayProp$1(paddingProp), radius = useArrayProp$1(radiusProp), space = useArrayProp$1(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  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 = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t7;
   $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  const handleClearMouseDown = _temp$3;
   let t8;
   $[20] !== onClear ? (t8 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
@@ -4651,49 +4639,45 @@ const CLEAR_BUTTON_BOX_STYLE = {
   ] }), $[34] = $hasPrefix, $[35] = $hasSuffix, $[36] = __unstable_disableFocusRing, $[37] = radius, $[38] = rootTheme.scheme, $[39] = rootTheme.tone, $[40] = t12, $[41] = t13, $[42] = t14, $[43] = t15) : t15 = $[43], t11 = t15;
   const presentationNode = t11;
   let t16, t17;
-  if ($[44] !== padding) {
-    let t182;
-    $[46] === Symbol.for("react.memo_cache_sentinel") ? (t182 = (v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2, $[46] = t182) : t182 = $[46], t17 = padding.map(t182), $[44] = padding, $[45] = t17;
-  } else
-    t17 = $[45];
-  t16 = t17;
+  $[44] !== padding ? (t17 = padding.map(_temp2$1), $[44] = padding, $[45] = t17) : t17 = $[45], t16 = t17;
   const clearButtonBoxPadding = t16;
   let t18, t19;
-  if ($[47] !== padding) {
-    let t202;
-    $[49] === Symbol.for("react.memo_cache_sentinel") ? (t202 = (v_0) => v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1, $[49] = t202) : t202 = $[49], t19 = padding.map(t202), $[47] = padding, $[48] = t19;
-  } else
-    t19 = $[48];
-  t18 = t19;
+  $[46] !== padding ? (t19 = padding.map(_temp3), $[46] = padding, $[47] = t19) : t19 = $[47], t18 = t19;
   const clearButtonPadding = t18;
   let t20;
   t20 = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
   const clearButtonProps = t20;
   let t21, t22;
-  $[50] !== clearButton || $[51] !== clearButtonBoxPadding || $[52] !== clearButtonPadding || $[53] !== clearButtonProps || $[54] !== customValidity || $[55] !== disabled || $[56] !== fontSize2 || $[57] !== handleClearClick || $[58] !== radius || $[59] !== readOnly ? (t22 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[50] = clearButton, $[51] = clearButtonBoxPadding, $[52] = clearButtonPadding, $[53] = clearButtonProps, $[54] = customValidity, $[55] = disabled, $[56] = fontSize2, $[57] = handleClearClick, $[58] = radius, $[59] = readOnly, $[60] = t22) : t22 = $[60], t21 = t22;
+  $[48] !== clearButton || $[49] !== clearButtonBoxPadding || $[50] !== clearButtonPadding || $[51] !== clearButtonProps || $[52] !== customValidity || $[53] !== disabled || $[54] !== fontSize2 || $[55] !== handleClearClick || $[56] !== radius || $[57] !== readOnly ? (t22 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[48] = clearButton, $[49] = clearButtonBoxPadding, $[50] = clearButtonPadding, $[51] = clearButtonProps, $[52] = customValidity, $[53] = disabled, $[54] = fontSize2, $[55] = handleClearClick, $[56] = radius, $[57] = readOnly, $[58] = t22) : t22 = $[58], t21 = t22;
   const clearButtonNode = t21;
   let t23, t24;
-  $[61] !== radius || $[62] !== suffix ? (t24 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[61] = radius, $[62] = suffix, $[63] = t24) : t24 = $[63], t23 = t24;
+  $[59] !== radius || $[60] !== suffix ? (t24 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[59] = radius, $[60] = suffix, $[61] = t24) : t24 = $[61], t23 = t24;
   const suffixNode = t23, t25 = $hasIconRight || $hasClearButton;
   let t26;
-  $[64] !== $hasIcon || $[65] !== disabled || $[66] !== fontSize2 || $[67] !== padding || $[68] !== readOnly || $[69] !== restProps || $[70] !== rootTheme.scheme || $[71] !== rootTheme.tone || $[72] !== space || $[73] !== t25 || $[74] !== type || $[75] !== weight ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t25, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[64] = $hasIcon, $[65] = disabled, $[66] = fontSize2, $[67] = padding, $[68] = readOnly, $[69] = restProps, $[70] = rootTheme.scheme, $[71] = rootTheme.tone, $[72] = space, $[73] = t25, $[74] = type, $[75] = weight, $[76] = t26) : t26 = $[76];
+  $[62] !== $hasIcon || $[63] !== disabled || $[64] !== fontSize2 || $[65] !== padding || $[66] !== readOnly || $[67] !== restProps || $[68] !== rootTheme.scheme || $[69] !== rootTheme.tone || $[70] !== space || $[71] !== t25 || $[72] !== type || $[73] !== weight ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t25, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[62] = $hasIcon, $[63] = disabled, $[64] = fontSize2, $[65] = padding, $[66] = readOnly, $[67] = restProps, $[68] = rootTheme.scheme, $[69] = rootTheme.tone, $[70] = space, $[71] = t25, $[72] = type, $[73] = weight, $[74] = t26) : t26 = $[74];
   let t27;
-  $[77] !== clearButtonNode || $[78] !== presentationNode || $[79] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
+  $[75] !== clearButtonNode || $[76] !== presentationNode || $[77] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
     t26,
     presentationNode,
     clearButtonNode
-  ] }), $[77] = clearButtonNode, $[78] = presentationNode, $[79] = t26, $[80] = t27) : t27 = $[80];
+  ] }), $[75] = clearButtonNode, $[76] = presentationNode, $[77] = t26, $[78] = t27) : t27 = $[78];
   let t28;
-  return $[81] !== prefixNode || $[82] !== rootTheme.tone || $[83] !== suffixNode || $[84] !== t27 ? (t28 = /* @__PURE__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t27 ? (t28 = /* @__PURE__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
     t27,
     suffixNode
-  ] }), $[81] = prefixNode, $[82] = rootTheme.tone, $[83] = suffixNode, $[84] = t27, $[85] = t28) : t28 = $[85], t28;
+  ] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t27, $[83] = t28) : t28 = $[83], t28;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
-function _temp$2(event) {
+function _temp$3(event) {
   event.preventDefault(), event.stopPropagation();
 }
+function _temp2$1(v) {
+  return v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2;
+}
+function _temp3(v_0) {
+  return v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1;
+}
 function useDelayedState(initialState) {
   const $ = reactCompilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.useRef();
   let t0;
@@ -4825,7 +4809,7 @@ const Root$a = styledComponents.styled(Layer)`
     zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp$1(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
     const ret = [];
@@ -5077,7 +5061,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     value: value_0
   }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.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 = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
   react.useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp$1(paddingProp), currentOption = react.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = react.useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback((event) => {
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = react.useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback((event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -5243,7 +5227,7 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
     separator,
     space: spaceRaw = 2,
     ...restProps
-  } = props, space = useArrayProp$1(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
+  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
   useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
   const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
     const len = rawItems.length;
@@ -5375,7 +5359,7 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     scheme,
     shadow: shadowProp,
     width: widthProp
-  } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp$1(radiusProp), shadow = useArrayProp$1(shadowProp), width = useArrayProp$1(widthProp), ref = react.useRef(null), contentRef = react.useRef(null), layer = useLayer(), {
+  } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = react.useRef(null), contentRef = react.useRef(null), layer = useLayer(), {
     isTopLayer
   } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
   let t0;
@@ -5449,7 +5433,7 @@ const Dialog = react.forwardRef(function(props, ref) {
     animate: t6,
     ...restProps
   } = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = contentRef, $[5] = footer, $[6] = header, $[7] = id, $[8] = onActivate, $[9] = onClickOutside, $[10] = onClose, $[11] = onFocus, $[12] = portalProp, $[13] = restProps, $[14] = scheme, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], contentRef = $[4], footer = $[5], header = $[6], id = $[7], onActivate = $[8], onClickOutside = $[9], onClose = $[10], onFocus = $[11], portalProp = $[12], restProps = $[13], scheme = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21]);
-  const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp$1(cardRadiusProp), padding = useArrayProp$1(paddingProp), position = useArrayProp$1(positionProp), width = useArrayProp$1(widthProp), zOffset = useArrayProp$1(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
+  const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
   let t7;
   $[22] !== onFocus ? (t7 = (event) => {
     onFocus?.(event);
@@ -5536,7 +5520,7 @@ const Root$6 = styledComponents.styled.kbd`
     space: t0,
     ...restProps
   } = props, $[0] = props, $[1] = fontSize2, $[2] = keys, $[3] = padding, $[4] = radius, $[5] = restProps, $[6] = t0) : (fontSize2 = $[1], keys = $[2], padding = $[3], radius = $[4], restProps = $[5], t0 = $[6]);
-  const space = useArrayProp$1(t0 === void 0 ? 0.5 : t0);
+  const space = useArrayProp(t0 === void 0 ? 0.5 : t0);
   if (!keys || keys.length === 0) {
     let t12;
     return $[7] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[7] = t12) : t12 = $[7], t12;
@@ -5810,7 +5794,7 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), react.useEffect(t7, t8);
   let t9;
   $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
-    setOpen((v) => !v), setShouldFocus(null);
+    setOpen(_temp$2), setShouldFocus(null);
   }, $[12] = t9) : t9 = $[12];
   const handleButtonClick = t9;
   let t10;
@@ -5912,6 +5896,9 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   return $[57] !== menu || $[58] !== open || $[59] !== popoverProps || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = menu, $[58] = open, $[59] = popoverProps, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
+function _temp$2(v) {
+  return !v;
+}
 const MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;
@@ -6110,7 +6097,7 @@ function MenuGroup(props) {
       return;
     }
   }, $[43] = t20) : t20 = $[43];
-  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = useArrayProp$1(radius), t25 = as === "button" ? "button" : void 0;
+  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = useArrayProp(radius), t25 = as === "button" ? "button" : void 0;
   let t26;
   $[44] !== IconComponent || $[45] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
     react.isValidElement(IconComponent) && IconComponent,
@@ -6189,7 +6176,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingBottom,
     paddingLeft
   }, $[33] = padding, $[34] = paddingBottom, $[35] = paddingLeft, $[36] = paddingRight, $[37] = paddingTop, $[38] = paddingX, $[39] = paddingY, $[40] = t11) : t11 = $[40], t10 = t11;
-  const paddingProps = t10, t12 = useArrayProp$1(fontSize2);
+  const paddingProps = t10, t12 = useArrayProp(fontSize2);
   let t13;
   $[41] !== t12 ? (t13 = t12.map(_temp$1), $[41] = t12, $[42] = t13) : t13 = $[42];
   const hotkeysFontSize = t13;
@@ -6197,7 +6184,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (el) => {
     ref.current = el, setRootElement(el);
   }, $[43] = t14) : t14 = $[43];
-  const setRef = t14, t15 = as === "button" && pressed, t16 = as !== "button" && pressed ? "" : void 0, t17 = active ? "" : void 0, t18 = disabled ? "" : void 0, t19 = useArrayProp$1(radius), t20 = useArrayProp$1(0), t21 = disabled ? "default" : tone, t22 = as === "button" ? "button" : void 0;
+  const setRef = t14, t15 = as === "button" && pressed, t16 = as !== "button" && pressed ? "" : void 0, t17 = active ? "" : void 0, t18 = disabled ? "" : void 0, t19 = useArrayProp(radius), t20 = useArrayProp(0), t21 = disabled ? "default" : tone, t22 = as === "button" ? "button" : void 0;
   let t23;
   $[44] !== IconComponent || $[45] !== IconRightComponent || $[46] !== fontSize2 || $[47] !== hotkeys || $[48] !== hotkeysFontSize || $[49] !== paddingProps || $[50] !== space || $[51] !== text ? (t23 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
@@ -6287,7 +6274,7 @@ const keyframe = styledComponents.keyframes`
       clearTimeout(timeout);
     };
   }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), react.useEffect(t1, t2);
-  const t3 = useArrayProp$1(radius);
+  const t3 = useArrayProp(radius);
   let t4;
   return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
 });
@@ -6313,7 +6300,7 @@ const Root$3 = styledComponents.styled(Skeleton)((props) => {
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
-  const $size = useArrayProp$1(t0 === void 0 ? 2 : t0);
+  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
   return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
@@ -6325,7 +6312,7 @@ const LabelSkeleton = react.forwardRef(function(props, ref) {
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
-  const $size = useArrayProp$1(t0 === void 0 ? 2 : t0);
+  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
   return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
@@ -6337,7 +6324,7 @@ const HeadingSkeleton = react.forwardRef(function(props, ref) {
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
-  const $size = useArrayProp$1(t0 === void 0 ? 2 : t0);
+  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
   return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
@@ -6349,7 +6336,7 @@ const CodeSkeleton = react.forwardRef(function(props, ref) {
     size: t0,
     ...restProps
   } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
-  const $size = useArrayProp$1(t0 === void 0 ? 2 : t0);
+  const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
   return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });