@sanity/ui 3.0.12 → 3.0.14

package/dist/_chunks-es/_visual-editing.mjs

@@ -1,7 +1,7 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { useState, useEffect, useDebugValue, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, useRef, useImperativeHandle, lazy, Suspense, useLayoutEffect } from "react";
+import { createContext, useContext, forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement, useDebugValue, useSyncExternalStore, useRef, useImperativeHandle, lazy, Suspense, useLayoutEffect } from "react";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import ReactIs, { isValidElementType } from "react-is";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon } from "@sanity/icons";
@@ -195,125 +195,6 @@ function responsiveTextAlignStyle(props) {
 function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
-function useArrayProp(val, defaultVal) {
-  const $ = c(3);
-  let t0;
-  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
-  const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
-  return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
-}
-function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(9), elementsArg = t0 === void 0 ? _temp$a : 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(t1), hasListener = !!listener;
-  let t2;
-  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
-    if (!hasListener)
-      return;
-    const handleEvent = (evt_0) => onEvent(evt_0);
-    return document.addEventListener("mousedown", handleEvent), () => {
-      document.removeEventListener("mousedown", handleEvent);
-    };
-  }, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
-  let t3;
-  $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$a() {
-  return EMPTY_ARRAY;
-}
-function useCustomValidity(ref, customValidity) {
-  const $ = c(4);
-  let t0, t1;
-  $[0] !== customValidity || $[1] !== ref ? (t0 = () => {
-    ref.current?.setCustomValidity(customValidity || "");
-  }, t1 = [customValidity, ref], $[0] = customValidity, $[1] = ref, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
-}
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
-function _createElementRectValueListener() {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver = new _ResizeObserver(([entry]) => {
-        subscriber({
-          _contentRect: entry.contentRect,
-          border: {
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize
-          },
-          content: {
-            width: entry.contentRect.width,
-            height: entry.contentRect.height
-          }
-        });
-      });
-      return resizeObserver.observe(element), () => {
-        resizeObserver.unobserve(element), resizeObserver.disconnect();
-      };
-    }
-  };
-}
-function _createElementSizeObserver() {
-  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
-  return {
-    subscribe(element, subscriber) {
-      const subscribers = subscribersCache.get(element) || [];
-      let dispose = disposeCache.get(element);
-      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
-        for (const sub of subscribers)
-          sub(elementRect);
-      })), subscribers.push(subscriber), () => {
-        const idx = subscribers.indexOf(subscriber);
-        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
-      };
-    }
-  };
-}
-function useElementSize(element) {
-  const $ = c(3), [size2, setSize] = useState(null);
-  let t0, t1;
-  return $[0] !== element ? (t0 = () => {
-    if (element)
-      return _elementSizeObserver.subscribe(element, setSize);
-  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
-}
-function useGlobalKeyDown(onKeyDown) {
-  const $ = c(5);
-  let t0;
-  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
-  const handleKeyDown = useEffectEvent(t0);
-  let t1;
-  $[2] !== handleKeyDown ? (t1 = () => {
-    const handler = (event_0) => handleKeyDown(event_0);
-    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
-  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
-  let t2;
-  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
-}
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const $ = c(4);
-  useDebugValue(mediaQueryString);
-  let t0;
-  $[0] !== mediaQueryString ? (t0 = (onStoreChange) => {
-    const media = window.matchMedia(mediaQueryString);
-    return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
-  }, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
-  let t1;
-  return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
-}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -394,75 +275,6 @@ function useTheme_v2() {
   let t1;
   return $[0] !== t0 ? (t1 = getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
 }
-function _getMediaQuery(media, index) {
-  return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
-}
-function _createMediaStore(media) {
-  const mediaLen = media.length;
-  let sizes;
-  const getSizes = () => {
-    if (!sizes) {
-      sizes = [];
-      for (let index = mediaLen; index > -1; index -= 1) {
-        const mediaQuery = _getMediaQuery(media, index);
-        sizes.push({
-          index,
-          mq: window.matchMedia(mediaQuery)
-        });
-      }
-    }
-    return sizes;
-  };
-  return {
-    getSnapshot: () => {
-      for (const {
-        index,
-        mq
-      } of getSizes())
-        if (mq.matches) return index;
-      return 0;
-    },
-    subscribe: (onStoreChange) => {
-      const disposeFns = [];
-      for (const {
-        mq
-      } of getSizes()) {
-        const handleChange = () => {
-          mq.matches && onStoreChange();
-        };
-        mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
-      }
-      return () => {
-        for (const disposeFn of disposeFns)
-          disposeFn();
-      };
-    }
-  };
-}
-function getServerSnapshot() {
-  return 0;
-}
-function useMediaIndex() {
-  const $ = c(2), {
-    media
-  } = useTheme_v2();
-  let t0;
-  $[0] !== media ? (t0 = _createMediaStore(media), $[0] = media, $[1] = t0) : t0 = $[1];
-  const store = t0;
-  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
-}
-function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$9 : t0);
-}
-function _temp$9() {
-  return !1;
-}
-function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$8 : t0);
-}
-function _temp$8() {
-  return !1;
-}
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
@@ -1176,7 +988,7 @@ const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = forwardRef(function(props, ref) {
-  const $ = c(22);
+  const $ = c(26);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
     accent,
@@ -1197,9 +1009,12 @@ const StyledLabel = /* @__PURE__ */ styled.div.withConfig({
     let t22;
     $[11] !== children ? (t22 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
   }
-  const t2 = useArrayProp(align), t3 = useArrayProp(size2);
+  let t2;
+  $[13] !== align ? (t2 = _getArrayProp(align), $[13] = align, $[14] = t2) : t2 = $[14];
+  let t3;
+  $[15] !== size2 ? (t3 = _getArrayProp(size2), $[15] = size2, $[16] = t3) : t3 = $[16];
   let t4;
-  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsx(StyledLabel, { "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;
+  return $[17] !== accent || $[18] !== children || $[19] !== muted || $[20] !== ref || $[21] !== restProps || $[22] !== t2 || $[23] !== t3 || $[24] !== weight ? (t4 = /* @__PURE__ */ jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[17] = accent, $[18] = children, $[19] = muted, $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3, $[24] = weight, $[25] = t4) : t4 = $[25], t4;
 });
 Label.displayName = "ForwardRef(Label)";
 const avatarStyle = {
@@ -1369,7 +1184,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
 })(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
-  const $ = c(52);
+  const $ = c(46);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
@@ -1387,7 +1202,7 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
   } = 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.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
+  } = useTheme_v2(), as = ReactIs.isValidElementType(asProp) ? asProp : "div", size2 = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
   let t3, t4;
   $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
     if (arrowPosition === arrowPositionProp)
@@ -1403,30 +1218,26 @@ const StyledAvatar = /* @__PURE__ */ styled.div.withConfig({
   $[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;
-  $[22] !== size2 ? (t8 = size2.map(_temp$7), $[22] = size2, $[23] = t8) : t8 = $[23];
-  const initialsSize = t8, t9 = typeof as == "string" ? as : void 0;
+  const handleImageError = t7, T0 = StyledAvatar, t8 = typeof as == "string" ? as : void 0, t9 = "Avatar";
   let t10;
-  $[24] !== color ? (t10 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t10) : t10 = $[25];
+  $[22] !== color ? (t10 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[22] = color, $[23] = t10) : t10 = $[23];
   let t11;
-  $[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+  $[24] !== __unstable_hideInnerStroke || $[25] !== _radius || $[26] !== _sizeRem || $[27] !== handleImageError || $[28] !== imageFailed || $[29] !== imageId || $[30] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
     /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
     /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
     !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
     /* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-  ] }), $[26] = __unstable_hideInnerStroke, $[27] = _radius, $[28] = _sizeRem, $[29] = handleImageError, $[30] = imageFailed, $[31] = imageId, $[32] = src, $[33] = t11) : t11 = $[33];
-  let t12;
-  $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = t12) : t12 = $[38];
+  ] }), $[24] = __unstable_hideInnerStroke, $[25] = _radius, $[26] = _sizeRem, $[27] = handleImageError, $[28] = imageFailed, $[29] = imageId, $[30] = src, $[31] = t11) : t11 = $[31];
+  const t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: size2.map(_temp$a), weight: "medium", children: initials }) }) });
   let t13;
-  return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t9 || $[50] !== title ? (t13 = /* @__PURE__ */ jsxs(StyledAvatar, { as, "data-as": t9, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+  return $[32] !== T0 || $[33] !== arrowPosition || $[34] !== as || $[35] !== color || $[36] !== ref || $[37] !== restProps || $[38] !== size2 || $[39] !== status || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t8 || $[44] !== title ? (t13 = /* @__PURE__ */ jsxs(T0, { as, "data-as": t8, "data-ui": t9, ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
     t10,
     t11,
     t12
-  ] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t9, $[50] = title, $[51] = t13) : t13 = $[51], t13;
+  ] }), $[32] = T0, $[33] = arrowPosition, $[34] = as, $[35] = color, $[36] = ref, $[37] = restProps, $[38] = size2, $[39] = status, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t8, $[44] = title, $[45] = t13) : t13 = $[45], t13;
 });
 Avatar.displayName = "ForwardRef(Avatar)";
-function _temp$7(s) {
+function _temp$a(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
 function _responsiveAvatarCounterSizeStyle(props) {
@@ -1469,20 +1280,23 @@ const StyledAvatarCounter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledAvatarCounter",
   componentId: "sc-1ydx86y-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
-  const $ = c(9), {
+  const $ = c(20), {
     count,
     size: t0
-  } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
-  let t1;
-  $[0] !== size2 ? (t1 = size2.map(_temp$6), $[0] = size2, $[1] = t1) : t1 = $[1];
-  const fontSize2 = t1;
-  let t2;
-  $[2] !== count || $[3] !== fontSize2 ? (t2 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t2) : t2 = $[4];
-  let t3;
-  return $[5] !== ref || $[6] !== size2 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledAvatarCounter, { $size: size2, "data-ui": "AvatarCounter", ref, children: t2 }), $[5] = ref, $[6] = size2, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+  } = props, sizeProp = t0 === void 0 ? 1 : t0;
+  let T0, T1, t1, t2, t3, t4, t5;
+  if ($[0] !== ref || $[1] !== sizeProp) {
+    const size2 = _getArrayProp(sizeProp);
+    T1 = StyledAvatarCounter, t3 = size2, t4 = "AvatarCounter", t5 = ref, T0 = Label, t1 = "span", t2 = size2.map(_temp$9), $[0] = ref, $[1] = sizeProp, $[2] = T0, $[3] = T1, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5;
+  } else
+    T0 = $[2], T1 = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8];
+  let t6;
+  $[9] !== T0 || $[10] !== count || $[11] !== t1 || $[12] !== t2 ? (t6 = /* @__PURE__ */ jsx(T0, { as: t1, size: t2, weight: "medium", children: count }), $[9] = T0, $[10] = count, $[11] = t1, $[12] = t2, $[13] = t6) : t6 = $[13];
+  let t7;
+  return $[14] !== T1 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx(T1, { $size: t3, "data-ui": t4, ref: t5, children: t6 }), $[14] = T1, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
-function _temp$6(s) {
+function _temp$9(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
 const BASE_STYLES = css`
@@ -1517,7 +1331,7 @@ const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledAvatarStack",
   componentId: "sc-cysmbb-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
-  const $ = c(22);
+  const $ = c(38);
   let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
     children: childrenProp,
@@ -1525,29 +1339,33 @@ const StyledAvatarStack = /* @__PURE__ */ styled.div.withConfig({
     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 = Children.toArray(childrenProp).filter(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 = StyledAvatarStack, t2 = "AvatarStack";
-  let t3;
-  $[5] !== len || $[6] !== size2 ? (t3 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), $[5] = len, $[6] = size2, $[7] = t3) : t3 = $[7];
-  let t4;
-  $[8] !== extraCount || $[9] !== len || $[10] !== size2 ? (t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[8] = extraCount, $[9] = len, $[10] = size2, $[11] = t4) : t4 = $[11];
-  let t5;
-  $[12] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
-    size: size2
-  }) }, String(childIndex)), $[12] = size2, $[13] = t5) : t5 = $[13];
-  const t6 = visibleChildren.map(t5);
-  let t7;
-  return $[14] !== T0 || $[15] !== ref || $[16] !== restProps || $[17] !== size2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
-    t3,
-    t4,
-    t6
-  ] }), $[14] = T0, $[15] = ref, $[16] = restProps, $[17] = size2, $[18] = t3, $[19] = t4, $[20] = t6, $[21] = t7) : t7 = $[21], t7;
+  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1;
+  let T0, t2, t3, t4, t5, t6, t7, t8;
+  if ($[5] !== childrenProp || $[6] !== maxLengthProp || $[7] !== ref || $[8] !== restProps || $[9] !== sizeProp) {
+    const children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0);
+    let t92;
+    $[18] !== sizeProp ? (t92 = _getArrayProp(sizeProp), $[18] = sizeProp, $[19] = t92) : t92 = $[19];
+    const size2 = t92, len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+    T0 = StyledAvatarStack, t2 = "AvatarStack", t3 = restProps, t4 = ref, t5 = size2, $[20] !== len || $[21] !== size2 ? (t6 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), $[20] = len, $[21] = size2, $[22] = t6) : t6 = $[22], $[23] !== extraCount || $[24] !== len || $[25] !== size2 ? (t7 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[23] = extraCount, $[24] = len, $[25] = size2, $[26] = t7) : t7 = $[26];
+    let t10;
+    $[27] !== size2 ? (t10 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
+      size: size2
+    }) }, String(childIndex)), $[27] = size2, $[28] = t10) : t10 = $[28], t8 = visibleChildren.map(t10), $[5] = childrenProp, $[6] = maxLengthProp, $[7] = ref, $[8] = restProps, $[9] = sizeProp, $[10] = T0, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8;
+  } else
+    T0 = $[10], t2 = $[11], t3 = $[12], t4 = $[13], t5 = $[14], t6 = $[15], t7 = $[16], t8 = $[17];
+  let t9;
+  return $[29] !== T0 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T0, { "data-ui": t2, ...t3, ref: t4, $size: t5, children: [
+    t6,
+    t7,
+    t8
+  ] }), $[29] = T0, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = t9) : t9 = $[37], t9;
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const StyledBox = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
-  const $ = c(59);
+  const $ = c(109);
   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,
@@ -1578,9 +1396,59 @@ const StyledBox = /* @__PURE__ */ styled.div.withConfig({
     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);
+  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;
+  let t5;
+  $[28] !== column ? (t5 = _getArrayProp(column), $[28] = column, $[29] = t5) : t5 = $[29];
+  let t6;
+  $[30] !== columnStart ? (t6 = _getArrayProp(columnStart), $[30] = columnStart, $[31] = t6) : t6 = $[31];
+  let t7;
+  $[32] !== columnEnd ? (t7 = _getArrayProp(columnEnd), $[32] = columnEnd, $[33] = t7) : t7 = $[33];
+  let t8;
+  $[34] !== display ? (t8 = _getArrayProp(display), $[34] = display, $[35] = t8) : t8 = $[35];
+  let t9;
+  $[36] !== flex ? (t9 = _getArrayProp(flex), $[36] = flex, $[37] = t9) : t9 = $[37];
+  let t10;
+  $[38] !== height ? (t10 = _getArrayProp(height), $[38] = height, $[39] = t10) : t10 = $[39];
+  let t11;
+  $[40] !== margin ? (t11 = _getArrayProp(margin), $[40] = margin, $[41] = t11) : t11 = $[41];
+  let t12;
+  $[42] !== marginX ? (t12 = _getArrayProp(marginX), $[42] = marginX, $[43] = t12) : t12 = $[43];
+  let t13;
+  $[44] !== marginY ? (t13 = _getArrayProp(marginY), $[44] = marginY, $[45] = t13) : t13 = $[45];
+  let t14;
+  $[46] !== marginTop ? (t14 = _getArrayProp(marginTop), $[46] = marginTop, $[47] = t14) : t14 = $[47];
+  let t15;
+  $[48] !== marginRight ? (t15 = _getArrayProp(marginRight), $[48] = marginRight, $[49] = t15) : t15 = $[49];
+  let t16;
+  $[50] !== marginBottom ? (t16 = _getArrayProp(marginBottom), $[50] = marginBottom, $[51] = t16) : t16 = $[51];
+  let t17;
+  $[52] !== marginLeft ? (t17 = _getArrayProp(marginLeft), $[52] = marginLeft, $[53] = t17) : t17 = $[53];
+  let t18;
+  $[54] !== overflow ? (t18 = _getArrayProp(overflow), $[54] = overflow, $[55] = t18) : t18 = $[55];
+  let t19;
+  $[56] !== padding ? (t19 = _getArrayProp(padding), $[56] = padding, $[57] = t19) : t19 = $[57];
+  let t20;
+  $[58] !== paddingX ? (t20 = _getArrayProp(paddingX), $[58] = paddingX, $[59] = t20) : t20 = $[59];
+  let t21;
+  $[60] !== paddingY ? (t21 = _getArrayProp(paddingY), $[60] = paddingY, $[61] = t21) : t21 = $[61];
+  let t22;
+  $[62] !== paddingTop ? (t22 = _getArrayProp(paddingTop), $[62] = paddingTop, $[63] = t22) : t22 = $[63];
+  let t23;
+  $[64] !== paddingRight ? (t23 = _getArrayProp(paddingRight), $[64] = paddingRight, $[65] = t23) : t23 = $[65];
+  let t24;
+  $[66] !== paddingBottom ? (t24 = _getArrayProp(paddingBottom), $[66] = paddingBottom, $[67] = t24) : t24 = $[67];
+  let t25;
+  $[68] !== paddingLeft ? (t25 = _getArrayProp(paddingLeft), $[68] = paddingLeft, $[69] = t25) : t25 = $[69];
+  let t26;
+  $[70] !== row ? (t26 = _getArrayProp(row), $[70] = row, $[71] = t26) : t26 = $[71];
+  let t27;
+  $[72] !== rowStart ? (t27 = _getArrayProp(rowStart), $[72] = rowStart, $[73] = t27) : t27 = $[73];
+  let t28;
+  $[74] !== rowEnd ? (t28 = _getArrayProp(rowEnd), $[74] = rowEnd, $[75] = t28) : t28 = $[75];
+  let t29;
+  $[76] !== sizing ? (t29 = _getArrayProp(sizing), $[76] = sizing, $[77] = t29) : t29 = $[77];
   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__ */ jsx(StyledBox, { "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;
+  return $[78] !== asProp || $[79] !== props.children || $[80] !== ref || $[81] !== restProps || $[82] !== t10 || $[83] !== t11 || $[84] !== t12 || $[85] !== t13 || $[86] !== t14 || $[87] !== t15 || $[88] !== t16 || $[89] !== t17 || $[90] !== t18 || $[91] !== t19 || $[92] !== t20 || $[93] !== t21 || $[94] !== t22 || $[95] !== t23 || $[96] !== t24 || $[97] !== t25 || $[98] !== t26 || $[99] !== t27 || $[100] !== t28 || $[101] !== t29 || $[102] !== t4 || $[103] !== t5 || $[104] !== t6 || $[105] !== t7 || $[106] !== t8 || $[107] !== t9 ? (t30 = /* @__PURE__ */ jsx(StyledBox, { "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 }), $[78] = asProp, $[79] = props.children, $[80] = ref, $[81] = restProps, $[82] = t10, $[83] = t11, $[84] = t12, $[85] = t13, $[86] = t14, $[87] = t15, $[88] = t16, $[89] = t17, $[90] = t18, $[91] = t19, $[92] = t20, $[93] = t21, $[94] = t22, $[95] = t23, $[96] = t24, $[97] = t25, $[98] = t26, $[99] = t27, $[100] = t28, $[101] = t29, $[102] = t4, $[103] = t5, $[104] = t6, $[105] = t7, $[106] = t8, $[107] = t9, $[108] = t30) : t30 = $[108], t30;
 });
 Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
@@ -1655,7 +1523,7 @@ const StyledText = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledText",
   componentId: "sc-11ov82j-0"
 })(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = forwardRef(function(props, ref) {
-  const $ = c(22);
+  const $ = c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -1673,11 +1541,14 @@ const StyledText = /* @__PURE__ */ styled.div.withConfig({
     let t32;
     $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
-  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
+  let t3;
+  $[11] !== align ? (t3 = _getArrayProp(align), $[11] = align, $[12] = t3) : t3 = $[12];
+  let t4;
+  $[13] !== size2 ? (t4 = _getArrayProp(size2), $[13] = size2, $[14] = t4) : t4 = $[14];
   let t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t5) : t5 = $[16];
   let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledText, { "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;
+  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledText, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
 Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
@@ -1699,7 +1570,7 @@ const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(21);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
     const {
@@ -1714,18 +1585,22 @@ const StyledBadge = /* @__PURE__ */ styled(Box).withConfig({
     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);
+  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? "full" : t2, tone = t3 === void 0 ? "default" : t3;
+  let t4;
+  $[7] !== radius ? (t4 = _getArrayProp(radius), $[7] = radius, $[8] = t4) : t4 = $[8];
+  let t5;
+  $[9] !== padding ? (t5 = _getArrayProp(padding), $[9] = padding, $[10] = t5) : t5 = $[10];
   let t6;
-  $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
+  $[11] !== children || $[12] !== fontSize2 ? (t6 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children }), $[11] = children, $[12] = fontSize2, $[13] = t6) : t6 = $[13];
   let t7;
-  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsx(StyledBadge, { "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;
+  return $[14] !== ref || $[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== tone ? (t7 = /* @__PURE__ */ jsx(StyledBadge, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[14] = ref, $[15] = restProps, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = tone, $[20] = t7) : t7 = $[20], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
 const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(27);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
     align,
@@ -1736,9 +1611,19 @@ const StyledFlex = /* @__PURE__ */ styled(Box).withConfig({
     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);
+  const direction = t0 === void 0 ? "row" : t0;
+  let t1;
+  $[8] !== align ? (t1 = _getArrayProp(align), $[8] = align, $[9] = t1) : t1 = $[9];
+  let t2;
+  $[10] !== direction ? (t2 = _getArrayProp(direction), $[10] = direction, $[11] = t2) : t2 = $[11];
+  let t3;
+  $[12] !== gap ? (t3 = _getArrayProp(gap), $[12] = gap, $[13] = t3) : t3 = $[13];
+  let t4;
+  $[14] !== justify ? (t4 = _getArrayProp(justify), $[14] = justify, $[15] = t4) : t4 = $[15];
+  let t5;
+  $[16] !== wrap ? (t5 = _getArrayProp(wrap), $[16] = wrap, $[17] = t5) : t5 = $[17];
   let t6;
-  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledFlex, { "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;
+  return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledFlex, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
 });
 Flex.displayName = "ForwardRef(Flex)";
 const rotate = keyframes`
@@ -1935,7 +1820,7 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
   displayName: "LoadingBox",
   componentId: "sc-aaekt4-1"
 })`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 = forwardRef(function(props, ref) {
-  const $ = c(66);
+  const $ = c(86);
   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, textWeight, width;
   $[0] !== props ? ({
     children,
@@ -1967,9 +1852,39 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
   } = 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] = textWeight, $[26] = 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], textWeight = $[25], width = $[26]);
   const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
     button
-  } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp);
+  } = useTheme_v2();
   let t9;
-  $[27] !== padding || $[28] !== paddingBottom || $[29] !== paddingLeft || $[30] !== paddingRight || $[31] !== paddingTop || $[32] !== paddingX || $[33] !== paddingY ? (t9 = {
+  $[27] !== justifyProp ? (t9 = _getArrayProp(justifyProp), $[27] = justifyProp, $[28] = t9) : t9 = $[28];
+  const justify = t9;
+  let t10;
+  $[29] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[29] = paddingProp, $[30] = t10) : t10 = $[30];
+  const padding = t10;
+  let t11;
+  $[31] !== paddingXProp ? (t11 = _getArrayProp(paddingXProp), $[31] = paddingXProp, $[32] = t11) : t11 = $[32];
+  const paddingX = t11;
+  let t12;
+  $[33] !== paddingYProp ? (t12 = _getArrayProp(paddingYProp), $[33] = paddingYProp, $[34] = t12) : t12 = $[34];
+  const paddingY = t12;
+  let t13;
+  $[35] !== paddingTopProp ? (t13 = _getArrayProp(paddingTopProp), $[35] = paddingTopProp, $[36] = t13) : t13 = $[36];
+  const paddingTop = t13;
+  let t14;
+  $[37] !== paddingBottomProp ? (t14 = _getArrayProp(paddingBottomProp), $[37] = paddingBottomProp, $[38] = t14) : t14 = $[38];
+  const paddingBottom = t14;
+  let t15;
+  $[39] !== paddingLeftProp ? (t15 = _getArrayProp(paddingLeftProp), $[39] = paddingLeftProp, $[40] = t15) : t15 = $[40];
+  const paddingLeft = t15;
+  let t16;
+  $[41] !== paddingRightProp ? (t16 = _getArrayProp(paddingRightProp), $[41] = paddingRightProp, $[42] = t16) : t16 = $[42];
+  const paddingRight = t16;
+  let t17;
+  $[43] !== radiusProp ? (t17 = _getArrayProp(radiusProp), $[43] = radiusProp, $[44] = t17) : t17 = $[44];
+  const radius = t17;
+  let t18;
+  $[45] !== spaceProp ? (t18 = _getArrayProp(spaceProp), $[45] = spaceProp, $[46] = t18) : t18 = $[46];
+  const space = t18;
+  let t19;
+  $[47] !== padding || $[48] !== paddingBottom || $[49] !== paddingLeft || $[50] !== paddingRight || $[51] !== paddingTop || $[52] !== paddingX || $[53] !== paddingY ? (t19 = {
     padding,
     paddingX,
     paddingY,
@@ -1977,12 +1892,12 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
     paddingBottom,
     paddingLeft,
     paddingRight
-  }, $[27] = padding, $[28] = paddingBottom, $[29] = paddingLeft, $[30] = paddingRight, $[31] = paddingTop, $[32] = paddingX, $[33] = paddingY, $[34] = t9) : t9 = $[34];
-  const boxProps = t9, t10 = !!(loading || disabled), t11 = selected ? "" : void 0, t12 = !!(loading || disabled);
-  let t13;
-  $[35] !== loading ? (t13 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[35] = loading, $[36] = t13) : t13 = $[36];
-  let t14;
-  $[37] !== IconComponent || $[38] !== IconRightComponent || $[39] !== boxProps || $[40] !== button || $[41] !== fontSize2 || $[42] !== justify || $[43] !== muted || $[44] !== space || $[45] !== text || $[46] !== textAlign || $[47] !== textWeight ? (t14 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
+  }, $[47] = padding, $[48] = paddingBottom, $[49] = paddingLeft, $[50] = paddingRight, $[51] = paddingTop, $[52] = paddingX, $[53] = paddingY, $[54] = t19) : t19 = $[54];
+  const boxProps = t19, t20 = !!(loading || disabled), t21 = selected ? "" : void 0, t22 = !!(loading || disabled);
+  let t23;
+  $[55] !== loading ? (t23 = !!loading && /* @__PURE__ */ jsx(LoadingBox, { children: /* @__PURE__ */ jsx(Spinner, {}) }), $[55] = loading, $[56] = t23) : t23 = $[56];
+  let t24;
+  $[57] !== IconComponent || $[58] !== IconRightComponent || $[59] !== boxProps || $[60] !== button || $[61] !== fontSize2 || $[62] !== justify || $[63] !== muted || $[64] !== space || $[65] !== text || $[66] !== textAlign || $[67] !== textWeight ? (t24 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxs(Flex, { as: "span", justify, gap: space, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -1992,15 +1907,15 @@ const StyledButton = /* @__PURE__ */ styled.button.withConfig({
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }) }), $[37] = IconComponent, $[38] = IconRightComponent, $[39] = boxProps, $[40] = button, $[41] = fontSize2, $[42] = justify, $[43] = muted, $[44] = space, $[45] = text, $[46] = textAlign, $[47] = textWeight, $[48] = t14) : t14 = $[48];
-  let t15;
-  $[49] !== boxProps || $[50] !== children ? (t15 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[49] = boxProps, $[50] = children, $[51] = t15) : t15 = $[51];
-  let t16;
-  return $[52] !== mode || $[53] !== radius || $[54] !== ref || $[55] !== restProps || $[56] !== t10 || $[57] !== t11 || $[58] !== t12 || $[59] !== t13 || $[60] !== t14 || $[61] !== t15 || $[62] !== tone || $[63] !== type || $[64] !== width ? (t16 = /* @__PURE__ */ jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t10, "data-selected": t11, disabled: t12, ref, type, $width: width, children: [
-    t13,
-    t14,
-    t15
-  ] }), $[52] = mode, $[53] = radius, $[54] = ref, $[55] = restProps, $[56] = t10, $[57] = t11, $[58] = t12, $[59] = t13, $[60] = t14, $[61] = t15, $[62] = tone, $[63] = type, $[64] = width, $[65] = t16) : t16 = $[65], t16;
+  ] }) }), $[57] = IconComponent, $[58] = IconRightComponent, $[59] = boxProps, $[60] = button, $[61] = fontSize2, $[62] = justify, $[63] = muted, $[64] = space, $[65] = text, $[66] = textAlign, $[67] = textWeight, $[68] = t24) : t24 = $[68];
+  let t25;
+  $[69] !== boxProps || $[70] !== children ? (t25 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...boxProps, children }), $[69] = boxProps, $[70] = children, $[71] = t25) : t25 = $[71];
+  let t26;
+  return $[72] !== mode || $[73] !== radius || $[74] !== ref || $[75] !== restProps || $[76] !== t20 || $[77] !== t21 || $[78] !== t22 || $[79] !== t23 || $[80] !== t24 || $[81] !== t25 || $[82] !== tone || $[83] !== type || $[84] !== width ? (t26 = /* @__PURE__ */ jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t20, "data-selected": t21, disabled: t22, ref, type, $width: width, children: [
+    t23,
+    t24,
+    t25
+  ] }), $[72] = mode, $[73] = radius, $[74] = ref, $[75] = restProps, $[76] = t20, $[77] = t21, $[78] = t22, $[79] = t23, $[80] = t24, $[81] = t25, $[82] = tone, $[83] = type, $[84] = width, $[85] = t26) : t26 = $[85], t26;
 });
 Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
@@ -2147,41 +2062,237 @@ function cardColorStyle(props) {
         }
       }
     }
-
-    ${style?.card?.root}
-  `;
+
+    ${style?.card?.root}
+  `;
+}
+const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
+  displayName: "StyledCard",
+  componentId: "sc-osnro2-0"
+})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
+  const $ = c(56);
+  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 = isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme;
+  let t6;
+  $[17] !== border2 ? (t6 = _getArrayProp(border2), $[17] = border2, $[18] = t6) : t6 = $[18];
+  let t7;
+  $[19] !== borderTop2 ? (t7 = _getArrayProp(borderTop2), $[19] = borderTop2, $[20] = t7) : t7 = $[20];
+  let t8;
+  $[21] !== borderRight2 ? (t8 = _getArrayProp(borderRight2), $[21] = borderRight2, $[22] = t8) : t8 = $[22];
+  let t9;
+  $[23] !== borderBottom2 ? (t9 = _getArrayProp(borderBottom2), $[23] = borderBottom2, $[24] = t9) : t9 = $[24];
+  let t10;
+  $[25] !== borderLeft2 ? (t10 = _getArrayProp(borderLeft2), $[25] = borderLeft2, $[26] = t10) : t10 = $[26];
+  let t11;
+  $[27] !== radius ? (t11 = _getArrayProp(radius), $[27] = radius, $[28] = t11) : t11 = $[28];
+  let t12;
+  $[29] !== shadow ? (t12 = _getArrayProp(shadow), $[29] = shadow, $[30] = t12) : t12 = $[30];
+  const t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
+  let t16;
+  $[31] !== as || $[32] !== checkered || $[33] !== focusRing || $[34] !== muted || $[35] !== ref || $[36] !== restProps || $[37] !== rootTheme.scheme || $[38] !== selected || $[39] !== t10 || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t14 || $[44] !== t15 || $[45] !== t4 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== tone ? (t16 = /* @__PURE__ */ jsx(StyledCard, { "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 }), $[31] = as, $[32] = checkered, $[33] = focusRing, $[34] = muted, $[35] = ref, $[36] = restProps, $[37] = rootTheme.scheme, $[38] = selected, $[39] = t10, $[40] = t11, $[41] = t12, $[42] = t13, $[43] = t14, $[44] = t15, $[45] = t4, $[46] = t6, $[47] = t7, $[48] = t8, $[49] = t9, $[50] = tone, $[51] = t16) : t16 = $[51];
+  let t17;
+  return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
+});
+Card.displayName = "ForwardRef(Card)";
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+  const $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : 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(t1), hasListener = !!listener;
+  let t2;
+  $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
+    if (!hasListener)
+      return;
+    const handleEvent = (evt_0) => onEvent(evt_0);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
+  let t3;
+  $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+}
+function _temp$8() {
+  return EMPTY_ARRAY;
+}
+function useCustomValidity(ref, customValidity) {
+  const $ = c(4);
+  let t0, t1;
+  $[0] !== customValidity || $[1] !== ref ? (t0 = () => {
+    ref.current?.setCustomValidity(customValidity || "");
+  }, t1 = [customValidity, ref], $[0] = customValidity, $[1] = ref, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
+}
+const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
+function _createElementRectValueListener() {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver = new _ResizeObserver(([entry]) => {
+        subscriber({
+          _contentRect: entry.contentRect,
+          border: {
+            width: entry.borderBoxSize[0].inlineSize,
+            height: entry.borderBoxSize[0].blockSize
+          },
+          content: {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height
+          }
+        });
+      });
+      return resizeObserver.observe(element), () => {
+        resizeObserver.unobserve(element), resizeObserver.disconnect();
+      };
+    }
+  };
+}
+function _createElementSizeObserver() {
+  const disposeCache = /* @__PURE__ */ new WeakMap(), subscribersCache = /* @__PURE__ */ new WeakMap();
+  return {
+    subscribe(element, subscriber) {
+      const subscribers = subscribersCache.get(element) || [];
+      let dispose = disposeCache.get(element);
+      return subscribersCache.has(element) || (subscribersCache.set(element, subscribers), dispose = _createElementRectValueListener().subscribe(element, (elementRect) => {
+        for (const sub of subscribers)
+          sub(elementRect);
+      })), subscribers.push(subscriber), () => {
+        const idx = subscribers.indexOf(subscriber);
+        idx > -1 && subscribers.splice(idx, 1), subscribers.length === 0 && dispose && dispose();
+      };
+    }
+  };
+}
+function useElementSize(element) {
+  const $ = c(3), [size2, setSize] = useState(null);
+  let t0, t1;
+  return $[0] !== element ? (t0 = () => {
+    if (element)
+      return _elementSizeObserver.subscribe(element, setSize);
+  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), useEffect(t0, t1), size2;
+}
+function useGlobalKeyDown(onKeyDown) {
+  const $ = c(5);
+  let t0;
+  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
+  const handleKeyDown = useEffectEvent(t0);
+  let t1;
+  $[2] !== handleKeyDown ? (t1 = () => {
+    const handler = (event_0) => handleKeyDown(event_0);
+    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
+  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
+  let t2;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
+}
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const $ = c(4);
+  useDebugValue(mediaQueryString);
+  let t0;
+  $[0] !== mediaQueryString ? (t0 = (onStoreChange) => {
+    const media = window.matchMedia(mediaQueryString);
+    return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
+  }, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
+  let t1;
+  return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, 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)`;
+}
+function _createMediaStore(media) {
+  const mediaLen = media.length;
+  let sizes;
+  const getSizes = () => {
+    if (!sizes) {
+      sizes = [];
+      for (let index = mediaLen; index > -1; index -= 1) {
+        const mediaQuery = _getMediaQuery(media, index);
+        sizes.push({
+          index,
+          mq: window.matchMedia(mediaQuery)
+        });
+      }
+    }
+    return sizes;
+  };
+  return {
+    getSnapshot: () => {
+      for (const {
+        index,
+        mq
+      } of getSizes())
+        if (mq.matches) return index;
+      return 0;
+    },
+    subscribe: (onStoreChange) => {
+      const disposeFns = [];
+      for (const {
+        mq
+      } of getSizes()) {
+        const handleChange = () => {
+          mq.matches && onStoreChange();
+        };
+        mq.addEventListener("change", handleChange), disposeFns.push(() => mq.removeEventListener("change", handleChange));
+      }
+      return () => {
+        for (const disposeFn of disposeFns)
+          disposeFn();
+      };
+    }
+  };
+}
+function getServerSnapshot() {
+  return 0;
+}
+function useMediaIndex() {
+  const $ = c(2), {
+    media
+  } = useTheme_v2();
+  let t0;
+  $[0] !== media ? (t0 = _createMediaStore(media), $[0] = media, $[1] = t0) : t0 = $[1];
+  const store = t0;
+  return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
+function usePrefersDark(t0) {
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$7 : t0);
+}
+function _temp$7() {
+  return !1;
+}
+function usePrefersReducedMotion(t0) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$6 : t0);
+}
+function _temp$6() {
+  return !1;
 }
-const StyledCard = /* @__PURE__ */ styled(Box).withConfig({
-  displayName: "StyledCard",
-  componentId: "sc-osnro2-0"
-})(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = forwardRef(function(props, ref) {
-  const $ = 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 = 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__ */ jsx(StyledCard, { "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__ */ jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
-});
-Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
   return css`
     position: relative;
@@ -2513,7 +2624,7 @@ const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__
   displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
 })(codeBaseStyle, responsiveCodeFontStyle), Code = forwardRef(function(props, ref) {
-  const $ = c(20);
+  const $ = c(22);
   let children, language, restProps, t0, weight;
   $[0] !== props ? ({
     children,
@@ -2522,15 +2633,17 @@ const LazyRefractor = lazy(() => import("./refractor.mjs")), StyledCode = /* @__
     weight,
     ...restProps
   } = props, $[0] = props, $[1] = children, $[2] = language, $[3] = restProps, $[4] = t0, $[5] = weight) : (children = $[1], language = $[2], restProps = $[3], t0 = $[4], weight = $[5]);
-  const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1;
+  $[6] !== size2 ? (t1 = _getArrayProp(size2), $[6] = size2, $[7] = t1) : t1 = $[7];
   let t2;
-  $[6] !== children ? (t2 = /* @__PURE__ */ jsx("code", { children }), $[6] = children, $[7] = t2) : t2 = $[7];
+  $[8] !== children ? (t2 = /* @__PURE__ */ jsx("code", { children }), $[8] = children, $[9] = t2) : t2 = $[9];
   let t3;
-  $[8] !== children || $[9] !== language ? (t3 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[8] = children, $[9] = language, $[10] = t3) : t3 = $[10];
+  $[10] !== children || $[11] !== language ? (t3 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[10] = children, $[11] = language, $[12] = t3) : t3 = $[12];
   let t4;
-  $[11] !== t2 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsx(Suspense, { fallback: t2, children: t3 }), $[11] = t2, $[12] = t3, $[13] = t4) : t4 = $[13];
+  $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsx(Suspense, { fallback: t2, children: t3 }), $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15];
   let t5;
-  return $[14] !== ref || $[15] !== restProps || $[16] !== t1 || $[17] !== t4 || $[18] !== weight ? (t5 = /* @__PURE__ */ jsx(StyledCode, { "data-ui": "Code", ...restProps, $size: t1, $weight: weight, ref, children: t4 }), $[14] = ref, $[15] = restProps, $[16] = t1, $[17] = t4, $[18] = weight, $[19] = t5) : t5 = $[19], t5;
+  return $[16] !== ref || $[17] !== restProps || $[18] !== t1 || $[19] !== t4 || $[20] !== weight ? (t5 = /* @__PURE__ */ jsx(StyledCode, { "data-ui": "Code", ...restProps, $size: t1, $weight: weight, ref, children: t4 }), $[16] = ref, $[17] = restProps, $[18] = t1, $[19] = t4, $[20] = weight, $[21] = t5) : t5 = $[21], t5;
 });
 Code.displayName = "ForwardRef(Code)";
 const BASE_STYLE$1 = {
@@ -2553,23 +2666,25 @@ const StyledContainer = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
 })(containerBaseStyle, responsiveContainerWidthStyle), Container = forwardRef(function(props, ref) {
-  const $ = c(9);
+  const $ = c(11);
   let as, restProps, t0;
   $[0] !== props ? ({
     as,
     width: t0,
     ...restProps
   } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
-  const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
+  const width = t0 === void 0 ? 2 : t0;
+  let t1;
+  $[4] !== width ? (t1 = _getArrayProp(width), $[4] = width, $[5] = t1) : t1 = $[5];
   let t2;
-  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
+  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t1, $[10] = t2) : t2 = $[10], t2;
 });
 Container.displayName = "ForwardRef(Container)";
 const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
 })(responsiveGridStyle), Grid = forwardRef(function(props, ref) {
-  const $ = c(26);
+  const $ = c(42);
   let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
   $[0] !== props ? ({
     as,
@@ -2584,9 +2699,25 @@ const StyledGrid = /* @__PURE__ */ styled(Box).withConfig({
     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(autoRows), t2 = useArrayProp(autoCols), t3 = useArrayProp(autoFlow), t4 = useArrayProp(columns), t5 = useArrayProp(gap), t6 = useArrayProp(gapX), t7 = useArrayProp(gapY), t8 = useArrayProp(rows);
+  const t0 = typeof as == "string" ? as : void 0;
+  let t1;
+  $[12] !== autoRows ? (t1 = _getArrayProp(autoRows), $[12] = autoRows, $[13] = t1) : t1 = $[13];
+  let t2;
+  $[14] !== autoCols ? (t2 = _getArrayProp(autoCols), $[14] = autoCols, $[15] = t2) : t2 = $[15];
+  let t3;
+  $[16] !== autoFlow ? (t3 = _getArrayProp(autoFlow), $[16] = autoFlow, $[17] = t3) : t3 = $[17];
+  let t4;
+  $[18] !== columns ? (t4 = _getArrayProp(columns), $[18] = columns, $[19] = t4) : t4 = $[19];
+  let t5;
+  $[20] !== gap ? (t5 = _getArrayProp(gap), $[20] = gap, $[21] = t5) : t5 = $[21];
+  let t6;
+  $[22] !== gapX ? (t6 = _getArrayProp(gapX), $[22] = gapX, $[23] = t6) : t6 = $[23];
+  let t7;
+  $[24] !== gapY ? (t7 = _getArrayProp(gapY), $[24] = gapY, $[25] = t7) : t7 = $[25];
+  let t8;
+  $[26] !== rows ? (t8 = _getArrayProp(rows), $[26] = rows, $[27] = t8) : t8 = $[27];
   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__ */ jsx(StyledGrid, { "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;
+  return $[28] !== as || $[29] !== children || $[30] !== ref || $[31] !== restProps || $[32] !== t0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 ? (t9 = /* @__PURE__ */ jsx(StyledGrid, { "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 }), $[28] = as, $[29] = children, $[30] = ref, $[31] = restProps, $[32] = t0, $[33] = t1, $[34] = t2, $[35] = t3, $[36] = t4, $[37] = t5, $[38] = t6, $[39] = t7, $[40] = t8, $[41] = t9) : t9 = $[41], t9;
 });
 Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
@@ -2652,7 +2783,7 @@ const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
   displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = forwardRef(function(props, ref) {
-  const $ = c(22);
+  const $ = c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -2670,11 +2801,14 @@ const StyledHeading = /* @__PURE__ */ styled.div.withConfig({
     let t32;
     $[9] !== children ? (t32 = /* @__PURE__ */ jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
   }
-  const t3 = useArrayProp(align), t4 = useArrayProp(size2);
+  let t3;
+  $[11] !== align ? (t3 = _getArrayProp(align), $[11] = align, $[12] = t3) : t3 = $[12];
+  let t4;
+  $[13] !== size2 ? (t4 = _getArrayProp(size2), $[13] = size2, $[14] = t4) : t4 = $[14];
   let t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsx("span", { children }), $[15] = children, $[16] = t5) : t5 = $[16];
   let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
+  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
 Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
@@ -2708,7 +2842,7 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = forwardRef(function(props, ref) {
-  const $ = c(13);
+  const $ = c(15);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
     as,
@@ -2718,9 +2852,12 @@ const StyledInline = /* @__PURE__ */ styled(Box).withConfig({
   } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
   let t0;
   $[5] !== childrenProp ? (t0 = Children.map(childrenProp, _temp$5), $[5] = childrenProp, $[6] = t0) : t0 = $[6];
-  const children = t0, t1 = useArrayProp(space), t2 = ref;
+  const children = t0;
+  let t1;
+  $[7] !== space ? (t1 = _getArrayProp(space), $[7] = space, $[8] = t1) : t1 = $[8];
+  const t2 = ref;
   let t3;
-  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
+  return $[9] !== as || $[10] !== children || $[11] !== restProps || $[12] !== t1 || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[9] = as, $[10] = children, $[11] = restProps, $[12] = t1, $[13] = t2, $[14] = t3) : t3 = $[14], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
 function _temp$5(child) {
@@ -2747,7 +2884,7 @@ const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
   displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
 })(responsiveRadiusStyle, kbdStyle), KBD = forwardRef(function(props, ref) {
-  const $ = c(17);
+  const $ = c(19);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
     children,
@@ -2756,13 +2893,15 @@ const StyledKBD = /* @__PURE__ */ styled.kbd.withConfig({
     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(t2 === void 0 ? 2 : t2);
+  const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? 2 : t2;
+  let t3;
+  $[6] !== radius ? (t3 = _getArrayProp(radius), $[6] = radius, $[7] = t3) : t3 = $[7];
   let t4;
-  $[6] !== children || $[7] !== fontSize2 ? (t4 = /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = children, $[7] = fontSize2, $[8] = t4) : t4 = $[8];
+  $[8] !== children || $[9] !== fontSize2 ? (t4 = /* @__PURE__ */ jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[8] = children, $[9] = fontSize2, $[10] = t4) : t4 = $[10];
   let t5;
-  $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
+  $[11] !== padding || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", padding, children: t4 }), $[11] = padding, $[12] = t4, $[13] = t5) : t5 = $[13];
   let t6;
-  return $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+  return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -3025,18 +3164,21 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function LayerProvider(props) {
-  const $ = c(19), {
+  const $ = c(21), {
     children,
     zOffset: t0
   } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = 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(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;
   let t2;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
-  const [, setChildLayers] = useState(t2), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  $[2] !== zOffsetProp ? (t2 = _getArrayProp(zOffsetProp), $[2] = zOffsetProp, $[3] = t2) : t2 = $[3];
+  const zOffset = t2, maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
   let t3;
-  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[4] = t3) : t3 = $[4];
+  const [, setChildLayers] = useState(t3), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  let t4;
+  $[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -3052,22 +3194,22 @@ function LayerProvider(props) {
         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(_temp2$2), parentDispose?.();
     };
-  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
-  const registerChild = t3;
-  let t4, t5;
-  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), useEffect(t4, t5);
-  let t6;
-  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t6 = {
+  }, $[5] = parentRegisterChild, $[6] = setChildLayers, $[7] = t4) : t4 = $[7];
+  const registerChild = t4;
+  let t5, t6;
+  $[8] !== level || $[9] !== parentRegisterChild ? (t5 = () => parentRegisterChild?.(level), t6 = [level, parentRegisterChild], $[8] = level, $[9] = parentRegisterChild, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), useEffect(t5, t6);
+  let t7;
+  $[12] !== isTopLayer || $[13] !== level || $[14] !== registerChild || $[15] !== size2 || $[16] !== zIndex ? (t7 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t6) : t6 = $[15];
-  const value = t6;
-  let t7;
-  return $[16] !== children || $[17] !== value ? (t7 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t7) : t7 = $[18], t7;
+  }, $[12] = isTopLayer, $[13] = level, $[14] = registerChild, $[15] = size2, $[16] = zIndex, $[17] = t7) : t7 = $[17];
+  const value = t7;
+  let t8;
+  return $[18] !== children || $[19] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
 }
 function _temp2$2(v_0) {
   return v_0 - 1;
@@ -3515,7 +3657,7 @@ const ViewportOverlay = () => {
     zIndex
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }, Popover = forwardRef(function(props, forwardedRef) {
-  const $ = c(122), {
+  const $ = c(126), {
     container,
     layer
   } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
@@ -3549,50 +3691,59 @@ const ViewportOverlay = () => {
       shadow: t352,
       tone: t362,
       width: t372,
-      zOffset: t38,
-      updateRef: t39,
-      ...t40
+      zOffset: t382,
+      updateRef: t392,
+      ...t402
     } = props;
-    t0 = t122, t1 = t132, t2 = t142, _boundaryElement = t152, childProp = t162, t3 = t172, content = t182, disabled = t192, _fallbackPlacements = t202, matchReferenceWidth = t212, _floatingBoundary = t222, modal = t232, open = t242, t4 = t252, paddingProp = t262, t5 = t272, t6 = t282, portal = t292, t7 = t302, t8 = t312, _referenceBoundary = t322, referenceElement = t332, scheme = t342, t9 = t352, t10 = t362, t11 = t372, _zOffsetProp = t38, updateRef = t39, restProps = t40, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
+    t0 = t122, t1 = t132, t2 = t142, _boundaryElement = t152, childProp = t162, t3 = t172, content = t182, disabled = t192, _fallbackPlacements = t202, matchReferenceWidth = t212, _floatingBoundary = t222, modal = t232, open = t242, t4 = t252, paddingProp = t262, t5 = t272, t6 = t282, portal = t292, t7 = t302, t8 = t312, _referenceBoundary = t322, referenceElement = t332, scheme = t342, t9 = t352, t10 = t362, t11 = t372, _zOffsetProp = t382, updateRef = t392, restProps = t402, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
   } else
     _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
-  const margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !0 : t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null);
+  const margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !0 : t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border;
   let t12;
-  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ref.current, $[30] = t12) : t12 = $[30], useImperativeHandle(forwardedRef, t12);
-  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0;
+  $[30] !== paddingProp ? (t12 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t12) : t12 = $[31];
+  const padding = t12;
   let t13;
-  $[31] !== container || $[32] !== mediaIndex || $[33] !== widthArrayProp ? (t13 = calcCurrentWidth({
+  $[32] !== radiusProp ? (t13 = _getArrayProp(radiusProp), $[32] = radiusProp, $[33] = t13) : t13 = $[33];
+  const radius = t13;
+  let t14;
+  $[34] !== shadowProp ? (t14 = _getArrayProp(shadowProp), $[34] = shadowProp, $[35] = t14) : t14 = $[35];
+  const shadow = t14, widthArrayProp = _getArrayProp(widthProp);
+  let t15;
+  $[36] !== zOffsetProp ? (t15 = _getArrayProp(zOffsetProp), $[36] = zOffsetProp, $[37] = t15) : t15 = $[37];
+  const zOffset = t15, ref = useRef(null), arrowRef = useRef(null);
+  let t16;
+  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[38] = t16) : t16 = $[38], useImperativeHandle(forwardedRef, t16);
+  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
-  }), $[31] = container, $[32] = mediaIndex, $[33] = widthArrayProp, $[34] = t13) : t13 = $[34];
-  const width = t13, widthRef = useRef(width);
-  let t14, t15;
-  $[35] !== width ? (t14 = () => {
+  }), widthRef = useRef(width);
+  let t17, t18;
+  $[39] !== width ? (t17 = () => {
     widthRef.current = width;
-  }, t15 = [width], $[35] = width, $[36] = t14, $[37] = t15) : (t14 = $[36], t15 = $[37]), useEffect(t14, t15);
-  let t16;
-  $[38] !== boundaryWidth || $[39] !== width ? (t16 = calcMaxWidth({
+  }, t18 = [width], $[39] = width, $[40] = t17, $[41] = t18) : (t17 = $[40], t18 = $[41]), useEffect(t17, t18);
+  let t19;
+  $[42] !== boundaryWidth || $[43] !== width ? (t19 = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), $[38] = boundaryWidth, $[39] = width, $[40] = t16) : t16 = $[40];
-  const maxWidth = t16, maxWidthRef = useRef(maxWidth);
-  let t17, t18;
-  $[41] !== maxWidth ? (t17 = () => {
+  }), $[42] = boundaryWidth, $[43] = width, $[44] = t19) : t19 = $[44];
+  const maxWidth = t19, maxWidthRef = useRef(maxWidth);
+  let t20, t21;
+  $[45] !== maxWidth ? (t20 = () => {
     maxWidthRef.current = maxWidth;
-  }, t18 = [maxWidth], $[41] = maxWidth, $[42] = t17, $[43] = t18) : (t17 = $[42], t18 = $[43]), useEffect(t17, t18);
+  }, t21 = [maxWidth], $[45] = maxWidth, $[46] = t20, $[47] = t21) : (t20 = $[46], t21 = $[47]), useEffect(t20, t21);
   const referenceWidthRef = useRef(void 0);
-  let t19, t20;
-  $[44] !== matchReferenceWidth || $[45] !== maxWidth || $[46] !== open || $[47] !== width ? (t19 = () => {
+  let t22, t23;
+  $[48] !== matchReferenceWidth || $[49] !== maxWidth || $[50] !== open || $[51] !== width ? (t22 = () => {
     const floatingElement = ref.current;
     if (!open || !floatingElement)
       return;
     const referenceWidth = referenceWidthRef.current;
     matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
-  }, t20 = [width, matchReferenceWidth, maxWidth, open], $[44] = matchReferenceWidth, $[45] = maxWidth, $[46] = open, $[47] = width, $[48] = t19, $[49] = t20) : (t19 = $[48], t20 = $[49]), useEffect(t19, t20);
+  }, t23 = [width, matchReferenceWidth, maxWidth, open], $[48] = matchReferenceWidth, $[49] = maxWidth, $[50] = open, $[51] = width, $[52] = t22, $[53] = t23) : (t22 = $[52], t23 = $[53]), useEffect(t22, t23);
   const [referenceWidth_0, setReferenceWidth] = useState(void 0);
-  let t21;
-  $[50] !== animate || $[51] !== arrowProp || $[52] !== constrainSize || $[53] !== fallbackPlacements || $[54] !== floatingBoundary || $[55] !== margins || $[56] !== matchReferenceWidth || $[57] !== placementProp || $[58] !== placementStrategy || $[59] !== preventOverflow || $[60] !== referenceBoundary ? (t21 = {
+  let t24;
+  $[54] !== animate || $[55] !== arrowProp || $[56] !== constrainSize || $[57] !== fallbackPlacements || $[58] !== floatingBoundary || $[59] !== margins || $[60] !== matchReferenceWidth || $[61] !== placementProp || $[62] !== placementStrategy || $[63] !== preventOverflow || $[64] !== referenceBoundary ? (t24 = {
     animate,
     arrowProp,
     arrowRef,
@@ -3610,19 +3761,19 @@ const ViewportOverlay = () => {
     rootBoundary: "viewport",
     setReferenceWidth,
     widthRef
-  }, $[50] = animate, $[51] = arrowProp, $[52] = constrainSize, $[53] = fallbackPlacements, $[54] = floatingBoundary, $[55] = margins, $[56] = matchReferenceWidth, $[57] = placementProp, $[58] = placementStrategy, $[59] = preventOverflow, $[60] = referenceBoundary, $[61] = t21) : t21 = $[61];
-  const middleware = useMiddleware$1(t21);
-  let t22;
-  $[62] !== referenceElement ? (t22 = referenceElement ? {
+  }, $[54] = animate, $[55] = arrowProp, $[56] = constrainSize, $[57] = fallbackPlacements, $[58] = floatingBoundary, $[59] = margins, $[60] = matchReferenceWidth, $[61] = placementProp, $[62] = placementStrategy, $[63] = preventOverflow, $[64] = referenceBoundary, $[65] = t24) : t24 = $[65];
+  const middleware = useMiddleware$1(t24);
+  let t25;
+  $[66] !== referenceElement ? (t25 = referenceElement ? {
     reference: referenceElement
-  } : void 0, $[62] = referenceElement, $[63] = t22) : t22 = $[63];
-  let t23;
-  $[64] !== middleware || $[65] !== placementProp || $[66] !== t22 ? (t23 = {
+  } : void 0, $[66] = referenceElement, $[67] = t25) : t25 = $[67];
+  let t26;
+  $[68] !== middleware || $[69] !== placementProp || $[70] !== t25 ? (t26 = {
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
-    elements: t22
-  }, $[64] = middleware, $[65] = placementProp, $[66] = t22, $[67] = t23) : t23 = $[67];
+    elements: t25
+  }, $[68] = middleware, $[69] = placementProp, $[70] = t25, $[71] = t26) : t26 = $[71];
   const {
     x,
     y,
@@ -3631,63 +3782,63 @@ const ViewportOverlay = () => {
     refs,
     strategy,
     update
-  } = useFloating(t23), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
-  let t24;
-  $[68] === Symbol.for("react.memo_cache_sentinel") ? (t24 = (arrowEl) => {
-    arrowRef.current = arrowEl;
-  }, $[68] = t24) : t24 = $[68];
-  const setArrow = t24;
-  let t25;
-  $[69] !== refs ? (t25 = (node) => {
-    ref.current = node, refs.setFloating(node);
-  }, $[69] = refs, $[70] = t25) : t25 = $[70];
-  const setFloating = t25;
-  let t26;
-  $[71] !== childProp ? (t26 = childProp ? getElementRef(childProp) : null, $[71] = childProp, $[72] = t26) : t26 = $[72];
+  } = useFloating(t26), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
   let t27;
-  $[73] !== refs.reference.current ? (t27 = () => refs.reference.current, $[73] = refs.reference.current, $[74] = t27) : t27 = $[74], useImperativeHandle(t26, t27);
+  $[72] === Symbol.for("react.memo_cache_sentinel") ? (t27 = (arrowEl) => {
+    arrowRef.current = arrowEl;
+  }, $[72] = t27) : t27 = $[72];
+  const setArrow = t27;
   let t28;
+  $[73] !== refs ? (t28 = (node) => {
+    ref.current = node, refs.setFloating(node);
+  }, $[73] = refs, $[74] = t28) : t28 = $[74];
+  const setFloating = t28;
+  let t29;
+  $[75] !== childProp ? (t29 = childProp ? getElementRef(childProp) : null, $[75] = childProp, $[76] = t29) : t29 = $[76];
+  let t30;
+  $[77] !== refs.reference.current ? (t30 = () => refs.reference.current, $[77] = refs.reference.current, $[78] = t30) : t30 = $[78], useImperativeHandle(t29, t30);
+  let t31;
   bb0: {
     if (referenceElement) {
-      t28 = childProp;
+      t31 = childProp;
       break bb0;
     }
     if (!childProp) {
-      t28 = null;
+      t31 = null;
       break bb0;
     }
-    let t292;
-    $[75] !== childProp || $[76] !== refs.setReference ? (t292 = cloneElement(childProp, {
+    let t322;
+    $[79] !== childProp || $[80] !== refs.setReference ? (t322 = cloneElement(childProp, {
       ref: refs.setReference
-    }), $[75] = childProp, $[76] = refs.setReference, $[77] = t292) : t292 = $[77], t28 = t292;
+    }), $[79] = childProp, $[80] = refs.setReference, $[81] = t322) : t322 = $[81], t31 = t322;
   }
-  const child = t28;
-  let t29, t30;
-  if ($[78] !== update ? (t29 = () => update, t30 = [update], $[78] = update, $[79] = t29, $[80] = t30) : (t29 = $[79], t30 = $[80]), useImperativeHandle(updateRef, t29, t30), disabled) {
-    let t312;
-    return $[81] !== childProp ? (t312 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[81] = childProp, $[82] = t312) : t312 = $[82], t312;
+  const child = t31;
+  let t32, t33;
+  if ($[82] !== update ? (t32 = () => update, t33 = [update], $[82] = update, $[83] = t32, $[84] = t33) : (t32 = $[83], t33 = $[84]), useImperativeHandle(updateRef, t32, t33), disabled) {
+    let t342;
+    return $[85] !== childProp ? (t342 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[85] = childProp, $[86] = t342) : t342 = $[86], t342;
   }
-  let t31;
-  $[83] !== modal ? (t31 = modal && /* @__PURE__ */ jsx(ViewportOverlay, {}), $[83] = modal, $[84] = t31) : t31 = $[84];
-  const t32 = matchReferenceWidth ? referenceWidth_0 : width;
-  let t33;
-  $[85] !== animate || $[86] !== arrowProp || $[87] !== arrowX || $[88] !== arrowY || $[89] !== content || $[90] !== margins || $[91] !== originX || $[92] !== originY || $[93] !== overflow || $[94] !== padding || $[95] !== placement || $[96] !== radius || $[97] !== referenceHidden || $[98] !== restProps || $[99] !== scheme || $[100] !== setFloating || $[101] !== shadow || $[102] !== strategy || $[103] !== t32 || $[104] !== tone || $[105] !== x || $[106] !== y ? (t33 = /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: t32, x, y, children: content }), $[85] = animate, $[86] = arrowProp, $[87] = arrowX, $[88] = arrowY, $[89] = content, $[90] = margins, $[91] = originX, $[92] = originY, $[93] = overflow, $[94] = padding, $[95] = placement, $[96] = radius, $[97] = referenceHidden, $[98] = restProps, $[99] = scheme, $[100] = setFloating, $[101] = shadow, $[102] = strategy, $[103] = t32, $[104] = tone, $[105] = x, $[106] = y, $[107] = t33) : t33 = $[107];
   let t34;
-  $[108] !== t31 || $[109] !== t33 || $[110] !== zOffset ? (t34 = /* @__PURE__ */ jsxs(LayerProvider, { zOffset, children: [
-    t31,
-    t33
-  ] }), $[108] = t31, $[109] = t33, $[110] = zOffset, $[111] = t34) : t34 = $[111];
-  const popover = t34;
-  let t35;
-  $[112] !== open || $[113] !== popover || $[114] !== portal ? (t35 = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[112] = open, $[113] = popover, $[114] = portal, $[115] = t35) : t35 = $[115];
-  const children = t35;
+  $[87] !== modal ? (t34 = modal && /* @__PURE__ */ jsx(ViewportOverlay, {}), $[87] = modal, $[88] = t34) : t34 = $[88];
+  const t35 = matchReferenceWidth ? referenceWidth_0 : width;
   let t36;
-  $[116] !== animate || $[117] !== children ? (t36 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[116] = animate, $[117] = children, $[118] = t36) : t36 = $[118];
+  $[89] !== animate || $[90] !== arrowProp || $[91] !== arrowX || $[92] !== arrowY || $[93] !== content || $[94] !== margins || $[95] !== originX || $[96] !== originY || $[97] !== overflow || $[98] !== padding || $[99] !== placement || $[100] !== radius || $[101] !== referenceHidden || $[102] !== restProps || $[103] !== scheme || $[104] !== setFloating || $[105] !== shadow || $[106] !== strategy || $[107] !== t35 || $[108] !== tone || $[109] !== x || $[110] !== y ? (t36 = /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: t35, x, y, children: content }), $[89] = animate, $[90] = arrowProp, $[91] = arrowX, $[92] = arrowY, $[93] = content, $[94] = margins, $[95] = originX, $[96] = originY, $[97] = overflow, $[98] = padding, $[99] = placement, $[100] = radius, $[101] = referenceHidden, $[102] = restProps, $[103] = scheme, $[104] = setFloating, $[105] = shadow, $[106] = strategy, $[107] = t35, $[108] = tone, $[109] = x, $[110] = y, $[111] = t36) : t36 = $[111];
   let t37;
-  return $[119] !== child || $[120] !== t36 ? (t37 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    t36,
+  $[112] !== t34 || $[113] !== t36 || $[114] !== zOffset ? (t37 = /* @__PURE__ */ jsxs(LayerProvider, { zOffset, children: [
+    t34,
+    t36
+  ] }), $[112] = t34, $[113] = t36, $[114] = zOffset, $[115] = t37) : t37 = $[115];
+  const popover = t37;
+  let t38;
+  $[116] !== open || $[117] !== popover || $[118] !== portal ? (t38 = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[116] = open, $[117] = popover, $[118] = portal, $[119] = t38) : t38 = $[119];
+  const children = t38;
+  let t39;
+  $[120] !== animate || $[121] !== children ? (t39 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[120] = animate, $[121] = children, $[122] = t39) : t39 = $[122];
+  let t40;
+  return $[123] !== child || $[124] !== t39 ? (t40 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t39,
     child
-  ] }), $[119] = child, $[120] = t36, $[121] = t37) : t37 = $[121], t37;
+  ] }), $[123] = child, $[124] = t39, $[125] = t40) : t40 = $[125], t40;
 });
 Popover.displayName = "ForwardRef(Popover)";
 function useMiddleware$1(t0) {
@@ -4072,7 +4223,7 @@ const selectStyle = {
   displayName: "IconBox",
   componentId: "sc-5mxno7-2"
 })(selectStyle.iconBox), Select = forwardRef(function(props, forwardedRef) {
-  const $ = c(29);
+  const $ = c(37);
   let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
     children,
@@ -4088,20 +4239,29 @@ const selectStyle = {
   const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = useRef(null);
   let t4;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
-  const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(radius), t9 = useArrayProp(space), t10 = disabled || readOnly;
+  const t5 = !disabled && readOnly ? "" : void 0;
+  let t6;
+  $[11] !== fontSize2 ? (t6 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t6) : t6 = $[12];
+  let t7;
+  $[13] !== padding ? (t7 = _getArrayProp(padding), $[13] = padding, $[14] = t7) : t7 = $[14];
+  let t8;
+  $[15] !== radius ? (t8 = _getArrayProp(radius), $[15] = radius, $[16] = t8) : t8 = $[16];
+  let t9;
+  $[17] !== space ? (t9 = _getArrayProp(space), $[17] = space, $[18] = t9) : t9 = $[18];
+  const t10 = disabled || readOnly;
   let t11;
-  $[11] !== children || $[12] !== restProps || $[13] !== t10 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = children, $[12] = restProps, $[13] = t10, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8, $[18] = t9, $[19] = t11) : t11 = $[19];
+  $[19] !== children || $[20] !== restProps || $[21] !== t10 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[19] = children, $[20] = restProps, $[21] = t10, $[22] = t5, $[23] = t6, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t11) : t11 = $[27];
   let t12;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[20] = t12) : t12 = $[20];
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[28] = t12) : t12 = $[28];
   let t13;
-  $[21] !== fontSize2 ? (t13 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t12 }), $[21] = fontSize2, $[22] = t13) : t13 = $[22];
+  $[29] !== fontSize2 ? (t13 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t12 }), $[29] = fontSize2, $[30] = t13) : t13 = $[30];
   let t14;
-  $[23] !== padding || $[24] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[23] = padding, $[24] = t13, $[25] = t14) : t14 = $[25];
+  $[31] !== padding || $[32] !== t13 ? (t14 = /* @__PURE__ */ jsx(IconBox, { padding, children: t13 }), $[31] = padding, $[32] = t13, $[33] = t14) : t14 = $[33];
   let t15;
-  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, { "data-ui": "Select", children: [
+  return $[34] !== t11 || $[35] !== t14 ? (t15 = /* @__PURE__ */ jsxs(StyledSelect, { "data-ui": "Select", children: [
     t11,
     t14
-  ] }), $[26] = t11, $[27] = t14, $[28] = t15) : t15 = $[28], t15;
+  ] }), $[34] = t11, $[35] = t14, $[36] = t15) : t15 = $[36], t15;
 });
 Select.displayName = "ForwardRef(Select)";
 const BASE_STYLE = {
@@ -4130,16 +4290,18 @@ const StyledStack = /* @__PURE__ */ styled(Box).withConfig({
   displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = forwardRef(function(props, ref) {
-  const $ = c(10);
+  const $ = c(12);
   let as, restProps, space;
   $[0] !== props ? ({
     as,
     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(space);
+  const t0 = typeof as == "string" ? as : void 0;
+  let t1;
+  $[4] !== space ? (t1 = _getArrayProp(space), $[4] = space, $[5] = t1) : t1 = $[5];
   let t2;
-  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledStack, { "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;
+  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(StyledStack, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
@@ -4359,7 +4521,7 @@ const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Presentation",
   componentId: "sc-1d6h1o8-3"
 })(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = forwardRef(function(props, forwardedRef) {
-  const $ = c(29);
+  const $ = c(35);
   let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
   $[0] !== props ? ({
     border: t0,
@@ -4375,17 +4537,26 @@ const StyledTextArea = /* @__PURE__ */ styled.span.withConfig({
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize2 = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = useRef(null), rootTheme = useRootTheme();
   let t5;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
-  const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp(fontSize2), t9 = useArrayProp(padding), t10 = rootTheme.scheme, t11 = useArrayProp(0);
+  const t6 = rootTheme.scheme, t7 = rootTheme.tone;
+  let t8;
+  $[11] !== fontSize2 ? (t8 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t8) : t8 = $[12];
+  let t9;
+  $[13] !== padding ? (t9 = _getArrayProp(padding), $[13] = padding, $[14] = t9) : t9 = $[14];
+  const t10 = rootTheme.scheme;
+  let t11;
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = _getArrayProp(0), $[15] = t11) : t11 = $[15];
   let t12;
-  $[11] !== disabled || $[12] !== restProps || $[13] !== rootTheme.scheme || $[14] !== rootTheme.tone || $[15] !== t11 || $[16] !== t8 || $[17] !== t9 || $[18] !== weight ? (t12 = /* @__PURE__ */ 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(radius), t14 = border2 ? "" : void 0;
+  $[16] !== disabled || $[17] !== restProps || $[18] !== rootTheme.scheme || $[19] !== rootTheme.tone || $[20] !== t8 || $[21] !== t9 || $[22] !== weight ? (t12 = /* @__PURE__ */ 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 }), $[16] = disabled, $[17] = restProps, $[18] = rootTheme.scheme, $[19] = rootTheme.tone, $[20] = t8, $[21] = t9, $[22] = weight, $[23] = t12) : t12 = $[23];
+  let t13;
+  $[24] !== radius ? (t13 = _getArrayProp(radius), $[24] = radius, $[25] = t13) : t13 = $[25];
+  const t14 = border2 ? "" : void 0;
   let t15;
-  $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ 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];
+  $[26] !== __unstable_disableFocusRing || $[27] !== rootTheme.scheme || $[28] !== rootTheme.tone || $[29] !== t13 || $[30] !== t14 ? (t15 = /* @__PURE__ */ 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 }), $[26] = __unstable_disableFocusRing, $[27] = rootTheme.scheme, $[28] = rootTheme.tone, $[29] = t13, $[30] = t14, $[31] = t15) : t15 = $[31];
   let t16;
-  return $[26] !== t12 || $[27] !== t15 ? (t16 = /* @__PURE__ */ jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
+  return $[32] !== t12 || $[33] !== t15 ? (t16 = /* @__PURE__ */ jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxs(InputRoot$1, { children: [
     t12,
     t15
-  ] }) }), $[26] = t12, $[27] = t15, $[28] = t16) : t16 = $[28], t16;
+  ] }) }), $[32] = t12, $[33] = t15, $[34] = t16) : t16 = $[34], t16;
 });
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
@@ -4431,7 +4602,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = forwardRef(function(props, forwardedRef) {
-  const $ = c(84);
+  const $ = c(92);
   let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
@@ -4453,60 +4624,72 @@ 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 = 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;
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = useRef(null), rootTheme = useRootTheme();
   let t7;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  $[19] !== fontSizeProp ? (t7 = _getArrayProp(fontSizeProp), $[19] = fontSizeProp, $[20] = t7) : t7 = $[20];
+  const fontSize2 = t7;
   let t8;
-  $[20] !== onClear ? (t8 = (event_0) => {
-    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
-  }, $[20] = onClear, $[21] = t8) : t8 = $[21];
-  const handleClearClick = t8;
+  $[21] !== paddingProp ? (t8 = _getArrayProp(paddingProp), $[21] = paddingProp, $[22] = t8) : t8 = $[22];
+  const padding = t8;
   let t9;
-  $[22] !== prefix || $[23] !== radius ? (t9 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[22] = prefix, $[23] = radius, $[24] = t9) : t9 = $[24];
-  const prefixNode = t9, t10 = border2 ? "" : void 0;
+  $[23] !== radiusProp ? (t9 = _getArrayProp(radiusProp), $[23] = radiusProp, $[24] = t9) : t9 = $[24];
+  const radius = t9;
+  let t10;
+  $[25] !== spaceProp ? (t10 = _getArrayProp(spaceProp), $[25] = spaceProp, $[26] = t10) : t10 = $[26];
+  const space = t10, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t11;
-  $[25] !== IconComponent || $[26] !== fontSize2 || $[27] !== padding ? (t11 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-    isValidElement(IconComponent) && IconComponent,
-    isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }) }), $[25] = IconComponent, $[26] = fontSize2, $[27] = padding, $[28] = t11) : t11 = $[28];
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[27] = t11) : t11 = $[27], useImperativeHandle(forwardedRef, t11), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$2;
   let t12;
-  $[29] !== $hasClearButton || $[30] !== IconRightComponent || $[31] !== fontSize2 || $[32] !== padding ? (t12 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-    isValidElement(IconRightComponent) && IconRightComponent,
-    isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[29] = $hasClearButton, $[30] = IconRightComponent, $[31] = fontSize2, $[32] = padding, $[33] = t12) : t12 = $[33];
+  $[28] !== onClear ? (t12 = (event_0) => {
+    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
+  }, $[28] = onClear, $[29] = t12) : t12 = $[29];
+  const handleClearClick = t12;
   let t13;
-  $[34] !== $hasPrefix || $[35] !== $hasSuffix || $[36] !== __unstable_disableFocusRing || $[37] !== radius || $[38] !== rootTheme.scheme || $[39] !== rootTheme.tone || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 ? (t13 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t10, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
-    t11,
-    t12
-  ] }), $[34] = $hasPrefix, $[35] = $hasSuffix, $[36] = __unstable_disableFocusRing, $[37] = radius, $[38] = rootTheme.scheme, $[39] = rootTheme.tone, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t13) : t13 = $[43];
-  const presentationNode = t13;
-  let t14;
-  $[44] !== padding ? (t14 = padding.map(_temp2), $[44] = padding, $[45] = t14) : t14 = $[45];
-  const clearButtonBoxPadding = t14;
+  $[30] !== prefix || $[31] !== radius ? (t13 = prefix && /* @__PURE__ */ jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[30] = prefix, $[31] = radius, $[32] = t13) : t13 = $[32];
+  const prefixNode = t13, t14 = border2 ? "" : void 0;
   let t15;
-  $[46] !== padding ? (t15 = padding.map(_temp3), $[46] = padding, $[47] = t15) : t15 = $[47];
-  const clearButtonPadding = t15, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
+  $[33] !== IconComponent || $[34] !== fontSize2 || $[35] !== padding ? (t15 = IconComponent && /* @__PURE__ */ jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+    isValidElement(IconComponent) && IconComponent,
+    isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
+  ] }) }), $[33] = IconComponent, $[34] = fontSize2, $[35] = padding, $[36] = t15) : t15 = $[36];
   let t16;
-  $[48] !== clearButton || $[49] !== clearButtonBoxPadding || $[50] !== clearButtonPadding || $[51] !== clearButtonProps || $[52] !== customValidity || $[53] !== disabled || $[54] !== fontSize2 || $[55] !== handleClearClick || $[56] !== radius || $[57] !== readOnly ? (t16 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[48] = clearButton, $[49] = clearButtonBoxPadding, $[50] = clearButtonPadding, $[51] = clearButtonProps, $[52] = customValidity, $[53] = disabled, $[54] = fontSize2, $[55] = handleClearClick, $[56] = radius, $[57] = readOnly, $[58] = t16) : t16 = $[58];
-  const clearButtonNode = t16;
+  $[37] !== $hasClearButton || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== padding ? (t16 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsx(RightBox, { padding, children: /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+    isValidElement(IconRightComponent) && IconRightComponent,
+    isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
+  ] }) }), $[37] = $hasClearButton, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = padding, $[41] = t16) : t16 = $[41];
   let t17;
-  $[59] !== radius || $[60] !== suffix ? (t17 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[59] = radius, $[60] = suffix, $[61] = t17) : t17 = $[61];
-  const suffixNode = t17, t18 = $hasIconRight || $hasClearButton;
+  $[42] !== $hasPrefix || $[43] !== $hasSuffix || $[44] !== __unstable_disableFocusRing || $[45] !== radius || $[46] !== rootTheme.scheme || $[47] !== rootTheme.tone || $[48] !== t14 || $[49] !== t15 || $[50] !== t16 ? (t17 = /* @__PURE__ */ jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+    t15,
+    t16
+  ] }), $[42] = $hasPrefix, $[43] = $hasSuffix, $[44] = __unstable_disableFocusRing, $[45] = radius, $[46] = rootTheme.scheme, $[47] = rootTheme.tone, $[48] = t14, $[49] = t15, $[50] = t16, $[51] = t17) : t17 = $[51];
+  const presentationNode = t17;
+  let t18;
+  $[52] !== padding ? (t18 = padding.map(_temp2), $[52] = padding, $[53] = t18) : t18 = $[53];
+  const clearButtonBoxPadding = t18;
   let t19;
-  $[62] !== $hasIcon || $[63] !== disabled || $[64] !== fontSize2 || $[65] !== padding || $[66] !== readOnly || $[67] !== restProps || $[68] !== rootTheme.scheme || $[69] !== rootTheme.tone || $[70] !== space || $[71] !== t18 || $[72] !== type || $[73] !== weight ? (t19 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t18, $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] = t18, $[72] = type, $[73] = weight, $[74] = t19) : t19 = $[74];
+  $[54] !== padding ? (t19 = padding.map(_temp3), $[54] = padding, $[55] = t19) : t19 = $[55];
+  const clearButtonPadding = t19, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
   let t20;
-  $[75] !== clearButtonNode || $[76] !== presentationNode || $[77] !== t19 ? (t20 = /* @__PURE__ */ jsxs(InputRoot, { children: [
-    t19,
+  $[56] !== clearButton || $[57] !== clearButtonBoxPadding || $[58] !== clearButtonPadding || $[59] !== clearButtonProps || $[60] !== customValidity || $[61] !== disabled || $[62] !== fontSize2 || $[63] !== handleClearClick || $[64] !== radius || $[65] !== readOnly ? (t20 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[56] = clearButton, $[57] = clearButtonBoxPadding, $[58] = clearButtonPadding, $[59] = clearButtonProps, $[60] = customValidity, $[61] = disabled, $[62] = fontSize2, $[63] = handleClearClick, $[64] = radius, $[65] = readOnly, $[66] = t20) : t20 = $[66];
+  const clearButtonNode = t20;
+  let t21;
+  $[67] !== radius || $[68] !== suffix ? (t21 = suffix && /* @__PURE__ */ jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[67] = radius, $[68] = suffix, $[69] = t21) : t21 = $[69];
+  const suffixNode = t21, t22 = $hasIconRight || $hasClearButton;
+  let t23;
+  $[70] !== $hasIcon || $[71] !== disabled || $[72] !== fontSize2 || $[73] !== padding || $[74] !== readOnly || $[75] !== restProps || $[76] !== rootTheme.scheme || $[77] !== rootTheme.tone || $[78] !== space || $[79] !== t22 || $[80] !== type || $[81] !== weight ? (t23 = /* @__PURE__ */ jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t22, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[70] = $hasIcon, $[71] = disabled, $[72] = fontSize2, $[73] = padding, $[74] = readOnly, $[75] = restProps, $[76] = rootTheme.scheme, $[77] = rootTheme.tone, $[78] = space, $[79] = t22, $[80] = type, $[81] = weight, $[82] = t23) : t23 = $[82];
+  let t24;
+  $[83] !== clearButtonNode || $[84] !== presentationNode || $[85] !== t23 ? (t24 = /* @__PURE__ */ jsxs(InputRoot, { children: [
+    t23,
     presentationNode,
     clearButtonNode
-  ] }), $[75] = clearButtonNode, $[76] = presentationNode, $[77] = t19, $[78] = t20) : t20 = $[78];
-  let t21;
-  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t20 ? (t21 = /* @__PURE__ */ jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  ] }), $[83] = clearButtonNode, $[84] = presentationNode, $[85] = t23, $[86] = t24) : t24 = $[86];
+  let t25;
+  return $[87] !== prefixNode || $[88] !== rootTheme.tone || $[89] !== suffixNode || $[90] !== t24 ? (t25 = /* @__PURE__ */ jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
-    t20,
+    t24,
     suffixNode
-  ] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t20, $[83] = t21) : t21 = $[83], t21;
+  ] }), $[87] = prefixNode, $[88] = rootTheme.tone, $[89] = suffixNode, $[90] = t24, $[91] = t25) : t25 = $[91], t25;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
 function _temp$2(event) {
@@ -4627,7 +4810,7 @@ const StyledTooltip = styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = forwardRef(function(props, forwardedRef) {
-  const $ = c(135), boundaryElementContext = useBoundaryElement(), {
+  const $ = c(137), boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2();
   let _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
@@ -4649,46 +4832,49 @@ const StyledTooltip = styled(Layer).withConfig({
     delay,
     ...restProps
   } = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5) : (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16]);
-  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate;
   let t6;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[17] = t6) : t6 = $[17], useImperativeHandle(forwardedRef, t6);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  $[17] !== fallbackPlacementsProp ? (t6 = _getArrayProp(fallbackPlacementsProp), $[17] = fallbackPlacementsProp, $[18] = t6) : t6 = $[18];
+  const fallbackPlacements = t6, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
   let t7;
-  $[18] !== animate || $[19] !== arrowProp || $[20] !== boundaryElement || $[21] !== fallbackPlacements ? (t7 = {
+  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], useImperativeHandle(forwardedRef, t7);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let t8;
+  $[20] !== animate || $[21] !== arrowProp || $[22] !== boundaryElement || $[23] !== fallbackPlacements ? (t8 = {
     animate,
     arrowProp,
     arrowRef,
     boundaryElement,
     fallbackPlacements,
     rootBoundary: "viewport"
-  }, $[18] = animate, $[19] = arrowProp, $[20] = boundaryElement, $[21] = fallbackPlacements, $[22] = t7) : t7 = $[22];
-  const middleware = useMiddleware(t7);
-  let t8;
-  $[23] !== referenceElement ? (t8 = {
-    reference: referenceElement
-  }, $[23] = referenceElement, $[24] = t8) : t8 = $[24];
+  }, $[20] = animate, $[21] = arrowProp, $[22] = boundaryElement, $[23] = fallbackPlacements, $[24] = t8) : t8 = $[24];
+  const middleware = useMiddleware(t8);
   let t9;
-  $[25] !== middleware || $[26] !== placementProp || $[27] !== t8 ? (t9 = {
+  $[25] !== referenceElement ? (t9 = {
+    reference: referenceElement
+  }, $[25] = referenceElement, $[26] = t9) : t9 = $[26];
+  let t10;
+  $[27] !== middleware || $[28] !== placementProp || $[29] !== t9 ? (t10 = {
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
-    elements: t8
-  }, $[25] = middleware, $[26] = placementProp, $[27] = t8, $[28] = t9) : t9 = $[28];
+    elements: t9
+  }, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
   const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = useFloating(t9), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
-  let t10;
-  $[29] !== delayGroupContext ? (t10 = delayGroupContext || {}, $[29] = delayGroupContext, $[30] = t10) : t10 = $[30];
+  } = useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
+  let t11;
+  $[31] !== delayGroupContext ? (t11 = delayGroupContext || {}, $[31] = delayGroupContext, $[32] = t11) : t11 = $[32];
   const {
     setIsGroupActive,
     setOpenTooltipId
-  } = t10, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  let t11;
-  $[31] !== closeDelay || $[32] !== isInsideGroup || $[33] !== openDelay || $[34] !== setIsGroupActive || $[35] !== setIsOpen || $[36] !== setOpenTooltipId || $[37] !== tooltipId ? (t11 = (open, immediate) => {
+  } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
+  let t12;
+  $[33] !== closeDelay || $[34] !== isInsideGroup || $[35] !== openDelay || $[36] !== setIsGroupActive || $[37] !== setIsOpen || $[38] !== setOpenTooltipId || $[39] !== tooltipId ? (t12 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4699,55 +4885,55 @@ const StyledTooltip = styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, $[31] = closeDelay, $[32] = isInsideGroup, $[33] = openDelay, $[34] = setIsGroupActive, $[35] = setIsOpen, $[36] = setOpenTooltipId, $[37] = tooltipId, $[38] = t11) : t11 = $[38];
-  const handleIsOpenChange = t11;
-  let t12;
-  $[39] !== childProp?.props || $[40] !== handleIsOpenChange ? (t12 = (e) => {
-    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, $[39] = childProp?.props, $[40] = handleIsOpenChange, $[41] = t12) : t12 = $[41];
-  const handleBlur = t12;
+  }, $[33] = closeDelay, $[34] = isInsideGroup, $[35] = openDelay, $[36] = setIsGroupActive, $[37] = setIsOpen, $[38] = setOpenTooltipId, $[39] = tooltipId, $[40] = t12) : t12 = $[40];
+  const handleIsOpenChange = t12;
   let t13;
-  $[42] !== childProp?.props || $[43] !== handleIsOpenChange ? (t13 = (e_0) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, $[42] = childProp?.props, $[43] = handleIsOpenChange, $[44] = t13) : t13 = $[44];
-  const handleClick = t13;
+  $[41] !== childProp?.props || $[42] !== handleIsOpenChange ? (t13 = (e) => {
+    handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
+  }, $[41] = childProp?.props, $[42] = handleIsOpenChange, $[43] = t13) : t13 = $[43];
+  const handleBlur = t13;
   let t14;
-  $[45] !== childProp?.props || $[46] !== handleIsOpenChange ? (t14 = (e_1) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, $[45] = childProp?.props, $[46] = handleIsOpenChange, $[47] = t14) : t14 = $[47];
-  const handleContextMenu = t14;
+  $[44] !== childProp?.props || $[45] !== handleIsOpenChange ? (t14 = (e_0) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+  }, $[44] = childProp?.props, $[45] = handleIsOpenChange, $[46] = t14) : t14 = $[46];
+  const handleClick = t14;
   let t15;
-  $[48] !== childProp?.props || $[49] !== handleIsOpenChange ? (t15 = (e_2) => {
-    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, $[48] = childProp?.props, $[49] = handleIsOpenChange, $[50] = t15) : t15 = $[50];
-  const handleFocus = t15;
+  $[47] !== childProp?.props || $[48] !== handleIsOpenChange ? (t15 = (e_1) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+  }, $[47] = childProp?.props, $[48] = handleIsOpenChange, $[49] = t15) : t15 = $[49];
+  const handleContextMenu = t15;
   let t16;
-  $[51] !== childProp?.props || $[52] !== handleIsOpenChange ? (t16 = (e_3) => {
-    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, $[51] = childProp?.props, $[52] = handleIsOpenChange, $[53] = t16) : t16 = $[53];
-  const handleMouseEnter = t16;
+  $[50] !== childProp?.props || $[51] !== handleIsOpenChange ? (t16 = (e_2) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+  }, $[50] = childProp?.props, $[51] = handleIsOpenChange, $[52] = t16) : t16 = $[52];
+  const handleFocus = t16;
   let t17;
-  $[54] !== childProp?.props || $[55] !== handleIsOpenChange ? (t17 = (e_4) => {
-    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, $[54] = childProp?.props, $[55] = handleIsOpenChange, $[56] = t17) : t17 = $[56];
-  const handleMouseLeave = t17;
+  $[53] !== childProp?.props || $[54] !== handleIsOpenChange ? (t17 = (e_3) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+  }, $[53] = childProp?.props, $[54] = handleIsOpenChange, $[55] = t17) : t17 = $[55];
+  const handleMouseEnter = t17;
   let t18;
-  $[57] !== handleIsOpenChange || $[58] !== isInsideGroup || $[59] !== referenceElement || $[60] !== showTooltip ? (t18 = {
+  $[56] !== childProp?.props || $[57] !== handleIsOpenChange ? (t18 = (e_4) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+  }, $[56] = childProp?.props, $[57] = handleIsOpenChange, $[58] = t18) : t18 = $[58];
+  const handleMouseLeave = t18;
+  let t19;
+  $[59] !== handleIsOpenChange || $[60] !== isInsideGroup || $[61] !== referenceElement || $[62] !== showTooltip ? (t19 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }, $[57] = handleIsOpenChange, $[58] = isInsideGroup, $[59] = referenceElement, $[60] = showTooltip, $[61] = t18) : t18 = $[61], useCloseOnMouseLeave(t18);
-  let t19, t20;
-  $[62] !== disabled || $[63] !== handleIsOpenChange || $[64] !== showTooltip ? (t19 = () => {
+  }, $[59] = handleIsOpenChange, $[60] = isInsideGroup, $[61] = referenceElement, $[62] = showTooltip, $[63] = t19) : t19 = $[63], useCloseOnMouseLeave(t19);
+  let t20, t21;
+  $[64] !== disabled || $[65] !== handleIsOpenChange || $[66] !== showTooltip ? (t20 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, t20 = [disabled, handleIsOpenChange, showTooltip], $[62] = disabled, $[63] = handleIsOpenChange, $[64] = showTooltip, $[65] = t19, $[66] = t20) : (t19 = $[65], t20 = $[66]), useEffect(t19, t20);
-  let t21, t22;
-  $[67] !== content || $[68] !== handleIsOpenChange || $[69] !== showTooltip ? (t21 = () => {
+  }, t21 = [disabled, handleIsOpenChange, showTooltip], $[64] = disabled, $[65] = handleIsOpenChange, $[66] = showTooltip, $[67] = t20, $[68] = t21) : (t20 = $[67], t21 = $[68]), useEffect(t20, t21);
+  let t22, t23;
+  $[69] !== content || $[70] !== handleIsOpenChange || $[71] !== showTooltip ? (t22 = () => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, t22 = [content, handleIsOpenChange, showTooltip], $[67] = content, $[68] = handleIsOpenChange, $[69] = showTooltip, $[70] = t21, $[71] = t22) : (t21 = $[70], t22 = $[71]), useEffect(t21, t22);
-  let t23, t24;
-  $[72] !== handleIsOpenChange || $[73] !== showTooltip ? (t23 = () => {
+  }, t23 = [content, handleIsOpenChange, showTooltip], $[69] = content, $[70] = handleIsOpenChange, $[71] = showTooltip, $[72] = t22, $[73] = t23) : (t22 = $[72], t23 = $[73]), useEffect(t22, t23);
+  let t24, t25;
+  $[74] !== handleIsOpenChange || $[75] !== showTooltip ? (t24 = () => {
     if (!showTooltip)
       return;
     const handleWindowKeyDown = function(event) {
@@ -4756,32 +4942,32 @@ const StyledTooltip = styled(Layer).withConfig({
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, t24 = [handleIsOpenChange, showTooltip], $[72] = handleIsOpenChange, $[73] = showTooltip, $[74] = t23, $[75] = t24) : (t23 = $[74], t24 = $[75]), useEffect(t23, t24);
-  let t25;
-  $[76] !== boundaryElement || $[77] !== portalElement?.offsetWidth ? (t25 = () => {
+  }, t25 = [handleIsOpenChange, showTooltip], $[74] = handleIsOpenChange, $[75] = showTooltip, $[76] = t24, $[77] = t25) : (t24 = $[76], t25 = $[77]), useEffect(t24, t25);
+  let t26;
+  $[78] !== boundaryElement || $[79] !== portalElement?.offsetWidth ? (t26 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, $[76] = boundaryElement, $[77] = portalElement?.offsetWidth, $[78] = t25) : t25 = $[78];
-  let t26;
-  $[79] !== boundaryElement || $[80] !== portalElement ? (t26 = [boundaryElement, portalElement], $[79] = boundaryElement, $[80] = portalElement, $[81] = t26) : t26 = $[81], useLayoutEffect(t25, t26);
+  }, $[78] = boundaryElement, $[79] = portalElement?.offsetWidth, $[80] = t26) : t26 = $[80];
   let t27;
-  $[82] !== update ? (t27 = (arrowEl) => {
-    arrowRef.current = arrowEl, update();
-  }, $[82] = update, $[83] = t27) : t27 = $[83];
-  const setArrow = t27;
+  $[81] !== boundaryElement || $[82] !== portalElement ? (t27 = [boundaryElement, portalElement], $[81] = boundaryElement, $[82] = portalElement, $[83] = t27) : t27 = $[83], useLayoutEffect(t26, t27);
   let t28;
-  $[84] !== refs ? (t28 = (node) => {
-    ref.current = node, refs.setFloating(node);
-  }, $[84] = refs, $[85] = t28) : t28 = $[85];
-  const setFloating = t28;
+  $[84] !== update ? (t28 = (arrowEl) => {
+    arrowRef.current = arrowEl, update();
+  }, $[84] = update, $[85] = t28) : t28 = $[85];
+  const setArrow = t28;
   let t29;
+  $[86] !== refs ? (t29 = (node) => {
+    ref.current = node, refs.setFloating(node);
+  }, $[86] = refs, $[87] = t29) : t29 = $[87];
+  const setFloating = t29;
+  let t30;
   bb0: {
     if (!childProp) {
-      t29 = null;
+      t30 = null;
       break bb0;
     }
-    let t302;
-    $[86] !== childProp || $[87] !== handleBlur || $[88] !== handleClick || $[89] !== handleContextMenu || $[90] !== handleFocus || $[91] !== handleMouseEnter || $[92] !== handleMouseLeave ? (t302 = cloneElement(childProp, {
+    let t312;
+    $[88] !== childProp || $[89] !== handleBlur || $[90] !== handleClick || $[91] !== handleContextMenu || $[92] !== handleFocus || $[93] !== handleMouseEnter || $[94] !== handleMouseLeave ? (t312 = cloneElement(childProp, {
       onBlur: handleBlur,
       onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
@@ -4789,39 +4975,39 @@ const StyledTooltip = styled(Layer).withConfig({
       onClick: handleClick,
       onContextMenu: handleContextMenu,
       ref: setReferenceElement
-    }), $[86] = childProp, $[87] = handleBlur, $[88] = handleClick, $[89] = handleContextMenu, $[90] = handleFocus, $[91] = handleMouseEnter, $[92] = handleMouseLeave, $[93] = t302) : t302 = $[93], t29 = t302;
+    }), $[88] = childProp, $[89] = handleBlur, $[90] = handleClick, $[91] = handleContextMenu, $[92] = handleFocus, $[93] = handleMouseEnter, $[94] = handleMouseLeave, $[95] = t312) : t312 = $[95], t30 = t312;
   }
-  const child = t29;
-  let t30;
-  $[94] !== childProp ? (t30 = childProp ? getElementRef(childProp) : null, $[94] = childProp, $[95] = t30) : t30 = $[95];
-  let t31, t32;
-  if ($[96] !== referenceElement ? (t31 = () => referenceElement, t32 = [referenceElement], $[96] = referenceElement, $[97] = t31, $[98] = t32) : (t31 = $[97], t32 = $[98]), useImperativeHandle(t30, t31, t32), !child) {
-    let t332;
-    return $[99] === Symbol.for("react.memo_cache_sentinel") ? (t332 = /* @__PURE__ */ jsx(Fragment, {}), $[99] = t332) : t332 = $[99], t332;
+  const child = t30;
+  let t31;
+  $[96] !== childProp ? (t31 = childProp ? getElementRef(childProp) : null, $[96] = childProp, $[97] = t31) : t31 = $[97];
+  let t32, t33;
+  if ($[98] !== referenceElement ? (t32 = () => referenceElement, t33 = [referenceElement], $[98] = referenceElement, $[99] = t32, $[100] = t33) : (t32 = $[99], t33 = $[100]), useImperativeHandle(t31, t32, t33), !child) {
+    let t342;
+    return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t342 = /* @__PURE__ */ jsx(Fragment, {}), $[101] = t342) : t342 = $[101], t342;
   }
   if (disabled)
     return child;
-  const t33 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
-  let t34;
-  $[100] !== floatingStyles || $[101] !== t33 ? (t34 = {
-    ...floatingStyles,
-    maxWidth: t33
-  }, $[100] = floatingStyles, $[101] = t33, $[102] = t34) : t34 = $[102];
+  const t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
   let t35;
-  $[103] !== animate || $[104] !== arrowProp || $[105] !== arrowX || $[106] !== arrowY || $[107] !== content || $[108] !== originX || $[109] !== originY || $[110] !== padding || $[111] !== placement || $[112] !== radius || $[113] !== restProps || $[114] !== scheme || $[115] !== setArrow || $[116] !== setFloating || $[117] !== shadow ? (t35 = /* @__PURE__ */ jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[103] = animate, $[104] = arrowProp, $[105] = arrowX, $[106] = arrowY, $[107] = content, $[108] = originX, $[109] = originY, $[110] = padding, $[111] = placement, $[112] = radius, $[113] = restProps, $[114] = scheme, $[115] = setArrow, $[116] = setFloating, $[117] = shadow, $[118] = t35) : t35 = $[118];
+  $[102] !== floatingStyles || $[103] !== t34 ? (t35 = {
+    ...floatingStyles,
+    maxWidth: t34
+  }, $[102] = floatingStyles, $[103] = t34, $[104] = t35) : t35 = $[104];
   let t36;
-  $[119] !== restProps || $[120] !== setFloating || $[121] !== t34 || $[122] !== t35 || $[123] !== zOffset ? (t36 = /* @__PURE__ */ jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t34, zOffset, children: t35 }), $[119] = restProps, $[120] = setFloating, $[121] = t34, $[122] = t35, $[123] = zOffset, $[124] = t36) : t36 = $[124];
-  const tooltip = t36;
+  $[105] !== animate || $[106] !== arrowProp || $[107] !== arrowX || $[108] !== arrowY || $[109] !== content || $[110] !== originX || $[111] !== originY || $[112] !== padding || $[113] !== placement || $[114] !== radius || $[115] !== restProps || $[116] !== scheme || $[117] !== setArrow || $[118] !== setFloating || $[119] !== shadow ? (t36 = /* @__PURE__ */ jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[105] = animate, $[106] = arrowProp, $[107] = arrowX, $[108] = arrowY, $[109] = content, $[110] = originX, $[111] = originY, $[112] = padding, $[113] = placement, $[114] = radius, $[115] = restProps, $[116] = scheme, $[117] = setArrow, $[118] = setFloating, $[119] = shadow, $[120] = t36) : t36 = $[120];
   let t37;
-  $[125] !== portalProp || $[126] !== showTooltip || $[127] !== tooltip ? (t37 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[125] = portalProp, $[126] = showTooltip, $[127] = tooltip, $[128] = t37) : t37 = $[128];
-  const children = t37;
+  $[121] !== restProps || $[122] !== setFloating || $[123] !== t35 || $[124] !== t36 || $[125] !== zOffset ? (t37 = /* @__PURE__ */ jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t35, zOffset, children: t36 }), $[121] = restProps, $[122] = setFloating, $[123] = t35, $[124] = t36, $[125] = zOffset, $[126] = t37) : t37 = $[126];
+  const tooltip = t37;
   let t38;
-  $[129] !== animate || $[130] !== children ? (t38 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[129] = animate, $[130] = children, $[131] = t38) : t38 = $[131];
+  $[127] !== portalProp || $[128] !== showTooltip || $[129] !== tooltip ? (t38 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[127] = portalProp, $[128] = showTooltip, $[129] = tooltip, $[130] = t38) : t38 = $[130];
+  const children = t38;
   let t39;
-  return $[132] !== child || $[133] !== t38 ? (t39 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    t38,
+  $[131] !== animate || $[132] !== children ? (t39 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
+  let t40;
+  return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t39,
     child
-  ] }), $[132] = child, $[133] = t38, $[134] = t39) : t39 = $[134], t39;
+  ] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
 function useMiddleware(t0) {
@@ -4897,7 +5083,7 @@ const StyledHotkeys = styled.kbd.withConfig({
   displayName: "Key",
   componentId: "sc-b37mge-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = forwardRef(function(props, ref) {
-  const $ = c(24);
+  const $ = c(26);
   let fontSize2, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
     fontSize: fontSize2,
@@ -4907,21 +5093,24 @@ const StyledHotkeys = styled.kbd.withConfig({
     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(t0 === void 0 ? 0.5 : t0);
-  if (!keys || keys.length === 0) {
-    let t12;
-    return $[7] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Fragment, {}), $[7] = t12) : t12 = $[7], t12;
-  }
+  const spaceProp = t0 === void 0 ? 0.5 : t0;
   let t1;
-  if ($[8] !== fontSize2 || $[9] !== keys || $[10] !== padding || $[11] !== radius) {
+  $[7] !== spaceProp ? (t1 = _getArrayProp(spaceProp), $[7] = spaceProp, $[8] = t1) : t1 = $[8];
+  const space = t1;
+  if (!keys || keys.length === 0) {
     let t22;
-    $[13] !== fontSize2 || $[14] !== padding || $[15] !== radius ? (t22 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[13] = fontSize2, $[14] = padding, $[15] = radius, $[16] = t22) : t22 = $[16], t1 = keys.map(t22), $[8] = fontSize2, $[9] = keys, $[10] = padding, $[11] = radius, $[12] = t1;
-  } else
-    t1 = $[12];
+    return $[9] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Fragment, {}), $[9] = t22) : t22 = $[9], t22;
+  }
   let t2;
-  $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t1 }), $[17] = space, $[18] = t1, $[19] = t2) : t2 = $[19];
+  if ($[10] !== fontSize2 || $[11] !== keys || $[12] !== padding || $[13] !== radius) {
+    let t32;
+    $[15] !== fontSize2 || $[16] !== padding || $[17] !== radius ? (t32 = (key2, i) => /* @__PURE__ */ jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[15] = fontSize2, $[16] = padding, $[17] = radius, $[18] = t32) : t32 = $[18], t2 = keys.map(t32), $[10] = fontSize2, $[11] = keys, $[12] = padding, $[13] = radius, $[14] = t2;
+  } else
+    t2 = $[14];
   let t3;
-  return $[20] !== ref || $[21] !== restProps || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
+  $[19] !== space || $[20] !== t2 ? (t3 = /* @__PURE__ */ jsx(Inline, { as: "span", space, children: t2 }), $[19] = space, $[20] = t2, $[21] = t3) : t3 = $[21];
+  let t4;
+  return $[22] !== ref || $[23] !== restProps || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t3 }), $[22] = ref, $[23] = restProps, $[24] = t3, $[25] = t4) : t4 = $[25], t4;
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -5292,7 +5481,7 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const $ = c(79);
+  const $ = c(81);
   let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
@@ -5373,32 +5562,35 @@ function MenuGroup(props) {
       return;
     }
   }, $[45] = t20) : t20 = $[45];
-  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;
+  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0;
+  let t24;
+  $[46] !== radius ? (t24 = _getArrayProp(radius), $[46] = radius, $[47] = t24) : t24 = $[47];
+  const t25 = as === "button" ? "button" : void 0;
   let t26;
-  $[46] !== IconComponent || $[47] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+  $[48] !== IconComponent || $[49] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }), $[46] = IconComponent, $[47] = fontSize2, $[48] = t26) : t26 = $[48];
+  ] }), $[48] = IconComponent, $[49] = fontSize2, $[50] = t26) : t26 = $[50];
   let t27;
-  $[49] !== fontSize2 || $[50] !== text ? (t27 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[49] = fontSize2, $[50] = text, $[51] = t27) : t27 = $[51];
+  $[51] !== fontSize2 || $[52] !== text ? (t27 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[51] = fontSize2, $[52] = text, $[53] = t27) : t27 = $[53];
   let t28;
-  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[52] = t28) : t28 = $[52];
+  $[54] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[54] = t28) : t28 = $[54];
   let t29;
-  $[53] !== fontSize2 ? (t29 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t28 }), $[53] = fontSize2, $[54] = t29) : t29 = $[54];
+  $[55] !== fontSize2 ? (t29 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t28 }), $[55] = fontSize2, $[56] = t29) : t29 = $[56];
   let t30;
-  $[55] !== padding || $[56] !== space || $[57] !== t26 || $[58] !== t27 || $[59] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+  $[57] !== padding || $[58] !== space || $[59] !== t26 || $[60] !== t27 || $[61] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
     t26,
     t27,
     t29
-  ] }), $[55] = padding, $[56] = space, $[57] = t26, $[58] = t27, $[59] = t29, $[60] = t30) : t30 = $[60];
+  ] }), $[57] = padding, $[58] = space, $[59] = t26, $[60] = t27, $[61] = t29, $[62] = t30) : t30 = $[62];
   let t31;
-  $[61] !== as || $[62] !== handleClick || $[63] !== handleMouseEnter || $[64] !== restProps || $[65] !== scheme || $[66] !== t21 || $[67] !== t22 || $[68] !== t23 || $[69] !== t24 || $[70] !== t25 || $[71] !== t30 || $[72] !== tone ? (t31 = /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[61] = as, $[62] = handleClick, $[63] = handleMouseEnter, $[64] = restProps, $[65] = scheme, $[66] = t21, $[67] = t22, $[68] = t23, $[69] = t24, $[70] = t25, $[71] = t30, $[72] = tone, $[73] = t31) : t31 = $[73];
+  $[63] !== as || $[64] !== handleClick || $[65] !== handleMouseEnter || $[66] !== restProps || $[67] !== scheme || $[68] !== t21 || $[69] !== t22 || $[70] !== t23 || $[71] !== t24 || $[72] !== t25 || $[73] !== t30 || $[74] !== tone ? (t31 = /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[63] = as, $[64] = handleClick, $[65] = handleMouseEnter, $[66] = restProps, $[67] = scheme, $[68] = t21, $[69] = t22, $[70] = t23, $[71] = t24, $[72] = t25, $[73] = t30, $[74] = tone, $[75] = t31) : t31 = $[75];
   let t32;
-  return $[74] !== childMenu || $[75] !== open || $[76] !== popover || $[77] !== t31 ? (t32 = /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[74] = childMenu, $[75] = open, $[76] = popover, $[77] = t31, $[78] = t32) : t32 = $[78], t32;
+  return $[76] !== childMenu || $[77] !== open || $[78] !== popover || $[79] !== t31 ? (t32 = /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[76] = childMenu, $[77] = open, $[78] = popover, $[79] = t31, $[80] = t32) : t32 = $[80], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = forwardRef(function(props, forwardedRef) {
-  const $ = c(73);
+  const $ = c(75);
   let IconComponent, IconRightComponent, children, disabled, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
@@ -5452,17 +5644,22 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     paddingBottom,
     paddingLeft
   }, $[33] = padding, $[34] = paddingBottom, $[35] = paddingLeft, $[36] = paddingRight, $[37] = paddingTop, $[38] = paddingX, $[39] = paddingY, $[40] = t10) : t10 = $[40];
-  const paddingProps = t10, t11 = useArrayProp(fontSize2);
+  const paddingProps = t10;
+  let t11;
+  $[41] !== fontSize2 ? (t11 = _getArrayProp(fontSize2).map(_temp), $[41] = fontSize2, $[42] = t11) : t11 = $[42];
+  const hotkeysFontSize = t11;
   let t12;
-  $[41] !== t11 ? (t12 = t11.map(_temp), $[41] = t11, $[42] = t12) : t12 = $[42];
-  const hotkeysFontSize = t12;
-  let t13;
-  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t13 = (el) => {
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
     ref.current = el, setRootElement(el);
-  }, $[43] = t13) : t13 = $[43];
-  const setRef = t13, t14 = as !== "button" && pressed ? "" : void 0, t15 = active ? "" : void 0, t16 = disabled ? "" : void 0, t17 = useArrayProp(radius), t18 = useArrayProp(0), t19 = disabled ? "default" : tone, t20 = as === "button" ? "button" : void 0;
-  let t21;
-  $[44] !== IconComponent || $[45] !== IconRightComponent || $[46] !== fontSize2 || $[47] !== hotkeys || $[48] !== hotkeysFontSize || $[49] !== paddingProps || $[50] !== space || $[51] !== text ? (t21 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+  }, $[43] = t12) : t12 = $[43];
+  const setRef = t12, t13 = as !== "button" && pressed ? "" : void 0, t14 = active ? "" : void 0, t15 = disabled ? "" : void 0;
+  let t16;
+  $[44] !== radius ? (t16 = _getArrayProp(radius), $[44] = radius, $[45] = t16) : t16 = $[45];
+  let t17;
+  $[46] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[46] = t17) : t17 = $[46];
+  const t18 = disabled ? "default" : tone, t19 = as === "button" ? "button" : void 0;
+  let t20;
+  $[47] !== IconComponent || $[48] !== IconRightComponent || $[49] !== fontSize2 || $[50] !== hotkeys || $[51] !== hotkeysFontSize || $[52] !== paddingProps || $[53] !== space || $[54] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -5476,14 +5673,14 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }), $[44] = IconComponent, $[45] = IconRightComponent, $[46] = fontSize2, $[47] = hotkeys, $[48] = hotkeysFontSize, $[49] = paddingProps, $[50] = space, $[51] = text, $[52] = t21) : t21 = $[52];
+  ] }), $[47] = IconComponent, $[48] = IconRightComponent, $[49] = fontSize2, $[50] = hotkeys, $[51] = hotkeysFontSize, $[52] = paddingProps, $[53] = space, $[54] = text, $[55] = t20) : t20 = $[55];
+  let t21;
+  $[56] !== children || $[57] !== paddingProps ? (t21 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t21) : t21 = $[58];
   let t22;
-  $[53] !== children || $[54] !== paddingProps ? (t22 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[53] = children, $[54] = paddingProps, $[55] = t22) : t22 = $[55];
-  let t23;
-  return $[56] !== as || $[57] !== disabled || $[58] !== handleClick || $[59] !== onItemMouseEnter || $[60] !== onItemMouseLeave || $[61] !== restProps || $[62] !== scheme || $[63] !== t14 || $[64] !== t15 || $[65] !== t16 || $[66] !== t17 || $[67] !== t18 || $[68] !== t19 || $[69] !== t20 || $[70] !== t21 || $[71] !== t22 ? (t23 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t14, "data-selected": t15, "data-disabled": t16, forwardedAs: as, $radius: t17, $padding: t18, $tone: t19, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t20, children: [
-    t21,
-    t22
-  ] }), $[56] = as, $[57] = disabled, $[58] = handleClick, $[59] = onItemMouseEnter, $[60] = onItemMouseLeave, $[61] = restProps, $[62] = scheme, $[63] = t14, $[64] = t15, $[65] = t16, $[66] = t17, $[67] = t18, $[68] = t19, $[69] = t20, $[70] = t21, $[71] = t22, $[72] = t23) : t23 = $[72], t23;
+  return $[59] !== as || $[60] !== disabled || $[61] !== handleClick || $[62] !== onItemMouseEnter || $[63] !== onItemMouseLeave || $[64] !== restProps || $[65] !== scheme || $[66] !== t13 || $[67] !== t14 || $[68] !== t15 || $[69] !== t16 || $[70] !== t18 || $[71] !== t19 || $[72] !== t20 || $[73] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t13, "data-selected": t14, "data-disabled": t15, forwardedAs: as, $radius: t16, $padding: t17, $tone: t18, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t19, children: [
+    t20,
+    t21
+  ] }), $[59] = as, $[60] = disabled, $[61] = handleClick, $[62] = onItemMouseEnter, $[63] = onItemMouseLeave, $[64] = restProps, $[65] = scheme, $[66] = t13, $[67] = t14, $[68] = t15, $[69] = t16, $[70] = t18, $[71] = t19, $[72] = t20, $[73] = t21, $[74] = t22) : t22 = $[74], t22;
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
 function _temp(s) {
@@ -5647,7 +5844,6 @@ export {
   rgba,
   screen,
   studioTheme,
-  useArrayProp,
   useBoundaryElement,
   useClickOutsideEvent,
   useCustomValidity,