@sanity/ui 3.0.11 → 3.0.12-canary.1

package/dist/_chunks-cjs/_visual-editing.js

@@ -189,125 +189,6 @@ function responsiveTextAlignStyle(props) {
 function responsiveTextFont(props) {
   return responsiveFont("text", props);
 }
-function useArrayProp(val, defaultVal) {
-  const $ = reactCompilerRuntime.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] = react.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 $ = reactCompilerRuntime.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.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], react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
-}
-function _temp$a() {
-  return EMPTY_ARRAY;
-}
-function useCustomValidity(ref, customValidity) {
-  const $ = reactCompilerRuntime.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]), react.useEffect(t0, t1);
-}
-const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : resizeObserver.ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
-function _createElementRectValueListener() {
-  return {
-    subscribe(element, subscriber) {
-      const resizeObserver2 = 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 resizeObserver2.observe(element), () => {
-        resizeObserver2.unobserve(element), resizeObserver2.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 $ = reactCompilerRuntime.c(3), [size2, setSize] = react.useState(null);
-  let t0, t1;
-  return $[0] !== element ? (t0 = () => {
-    if (element)
-      return _elementSizeObserver.subscribe(element, setSize);
-  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1), size2;
-}
-function useGlobalKeyDown(onKeyDown) {
-  const $ = reactCompilerRuntime.c(5);
-  let t0;
-  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
-  const handleKeyDown = useEffectEvent.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], react.useEffect(t1, t2);
-}
-function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const $ = reactCompilerRuntime.c(4);
-  react.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], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
-}
 function getGlobalScope() {
   if (typeof globalThis < "u") return globalThis;
   if (typeof window < "u") return window;
@@ -388,75 +269,6 @@ function useTheme_v2() {
   let t1;
   return $[0] !== t0 ? (t1 = theme.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 $ = reactCompilerRuntime.c(2), {
-    media
-  } = useTheme_v2();
-  let t0;
-  $[0] !== media ? (t0 = _createMediaStore(media), $[0] = media, $[1] = t0) : t0 = $[1];
-  const store = t0;
-  return react.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];
 }
@@ -1170,7 +982,7 @@ const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(26);
   let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
     accent,
@@ -1191,9 +1003,12 @@ const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     let t22;
     $[11] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
   }
-  const t2 = useArrayProp(align), t3 = useArrayProp(size2);
+  let 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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -1363,7 +1178,7 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
 })(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(52);
+  const $ = reactCompilerRuntime.c(46);
   let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
@@ -1381,7 +1196,7 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.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__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
+  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
   let t3, t4;
   $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
     if (arrowPosition === arrowPositionProp)
@@ -1397,30 +1212,26 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t10) : t10 = $[25];
+  $[22] !== color ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
     !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
     /* @__PURE__ */ jsxRuntime.jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-  ] }), $[26] = __unstable_hideInnerStroke, $[27] = _radius, $[28] = _sizeRem, $[29] = handleImageError, $[30] = imageFailed, $[31] = imageId, $[32] = src, $[33] = t11) : t11 = $[33];
-  let t12;
-  $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = 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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1463,20 +1274,23 @@ const StyledAvatarCounter = /* @__PURE__ */ styledComponents.styled.div.withConf
   displayName: "StyledAvatarCounter",
   componentId: "sc-1ydx86y-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(9), {
+  const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = styledComponents.css`
@@ -1511,7 +1325,7 @@ const StyledAvatarStack = /* @__PURE__ */ styledComponents.styled.div.withConfig
   displayName: "StyledAvatarStack",
   componentId: "sc-cysmbb-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(38);
   let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
     children: childrenProp,
@@ -1519,29 +1333,33 @@ const StyledAvatarStack = /* @__PURE__ */ styledComponents.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 = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = StyledAvatarStack, t2 = "AvatarStack";
-  let t3;
-  $[5] !== len || $[6] !== size2 ? (t3 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[8] = extraCount, $[9] = len, $[10] = size2, $[11] = t4) : t4 = $[11];
-  let t5;
-  $[12] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.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__ */ jsxRuntime.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 = react.Children.toArray(childrenProp).filter(react.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[23] = extraCount, $[24] = len, $[25] = size2, $[26] = t7) : t7 = $[26];
+    let t10;
+    $[27] !== size2 ? (t10 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.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__ */ jsxRuntime.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__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(59);
+  const $ = reactCompilerRuntime.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,
@@ -1572,9 +1390,59 @@ const StyledBox = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1649,7 +1517,7 @@ const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledText",
   componentId: "sc-11ov82j-0"
 })(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -1667,11 +1535,14 @@ const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     let t32;
     $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -1693,7 +1564,7 @@ const StyledBadge = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(17);
+  const $ = reactCompilerRuntime.c(21);
   let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
     const {
@@ -1708,18 +1579,22 @@ const StyledBadge = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
+  $[11] !== children || $[12] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(17);
+  const $ = reactCompilerRuntime.c(27);
   let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
     align,
@@ -1730,9 +1605,19 @@ const StyledFlex = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = styledComponents.keyframes`
@@ -1929,7 +1814,7 @@ const StyledButton = /* @__PURE__ */ styledComponents.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 = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(66);
+  const $ = reactCompilerRuntime.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,
@@ -1961,9 +1846,39 @@ const StyledButton = /* @__PURE__ */ styledComponents.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,
@@ -1971,12 +1886,12 @@ const StyledButton = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
       react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
@@ -1986,15 +1901,15 @@ const StyledButton = /* @__PURE__ */ styledComponents.styled.button.withConfig({
       react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2149,7 +2064,7 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledCard",
   componentId: "sc-osnro2-0"
 })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(42);
+  const $ = reactCompilerRuntime.c(56);
   let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
   $[0] !== props ? ({
     __unstable_checkered: t0,
@@ -2169,13 +2084,209 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
     tone: t3,
     ...restProps
   } = props, $[0] = props, $[1] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]);
-  const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp(border2), t7 = useArrayProp(borderTop2), t8 = useArrayProp(borderRight2), t9 = useArrayProp(borderBottom2), t10 = useArrayProp(borderLeft2), t11 = useArrayProp(radius), t12 = useArrayProp(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
+  const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme;
+  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;
-  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(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];
+  $[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__ */ jsxRuntime.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 $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
+  return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.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 $ = reactCompilerRuntime.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.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], react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+}
+function _temp$8() {
+  return EMPTY_ARRAY;
+}
+function useCustomValidity(ref, customValidity) {
+  const $ = reactCompilerRuntime.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]), react.useEffect(t0, t1);
+}
+const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : resizeObserver.ResizeObserver, _elementSizeObserver = _createElementSizeObserver();
+function _createElementRectValueListener() {
+  return {
+    subscribe(element, subscriber) {
+      const resizeObserver2 = 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 resizeObserver2.observe(element), () => {
+        resizeObserver2.unobserve(element), resizeObserver2.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 $ = reactCompilerRuntime.c(3), [size2, setSize] = react.useState(null);
+  let t0, t1;
+  return $[0] !== element ? (t0 = () => {
+    if (element)
+      return _elementSizeObserver.subscribe(element, setSize);
+  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1), size2;
+}
+function useGlobalKeyDown(onKeyDown) {
+  const $ = reactCompilerRuntime.c(5);
+  let t0;
+  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
+  const handleKeyDown = useEffectEvent.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], react.useEffect(t1, t2);
+}
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  const $ = reactCompilerRuntime.c(4);
+  react.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], react.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 $ = reactCompilerRuntime.c(2), {
+    media
+  } = useTheme_v2();
+  let t0;
+  $[0] !== media ? (t0 = _createMediaStore(media), $[0] = media, $[1] = t0) : t0 = $[1];
+  const store = t0;
+  return react.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;
+}
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2509,7 +2620,7 @@ const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
   displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
 })(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(20);
+  const $ = reactCompilerRuntime.c(22);
   let children, language, restProps, t0, weight;
   $[0] !== props ? ({
     children,
@@ -2518,15 +2629,17 @@ const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
     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__ */ jsxRuntime.jsx("code", { children }), $[6] = children, $[7] = t2) : t2 = $[7];
+  $[8] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[8] = children, $[9] = t2) : t2 = $[9];
   let t3;
-  $[8] !== children || $[9] !== language ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }), $[8] = children, $[9] = language, $[10] = t3) : t3 = $[10];
+  $[10] !== children || $[11] !== language ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }), $[10] = children, $[11] = language, $[12] = t3) : t3 = $[12];
   let t4;
-  $[11] !== t2 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: t2, children: t3 }), $[11] = t2, $[12] = t3, $[13] = t4) : t4 = $[13];
+  $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -2549,23 +2662,25 @@ const StyledContainer = /* @__PURE__ */ styledComponents.styled(Box).withConfig(
   displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
 })(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(9);
+  const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
 })(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(26);
+  const $ = reactCompilerRuntime.c(42);
   let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
   $[0] !== props ? ({
     as,
@@ -2580,9 +2695,25 @@ const StyledGrid = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2648,7 +2779,7 @@ const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(26);
   let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
@@ -2666,11 +2797,14 @@ const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     let t32;
     $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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() {
@@ -2704,7 +2838,7 @@ const StyledInline = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(13);
+  const $ = reactCompilerRuntime.c(15);
   let as, childrenProp, restProps, space;
   $[0] !== props ? ({
     as,
@@ -2714,9 +2848,12 @@ const StyledInline = /* @__PURE__ */ styledComponents.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 = react.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -2743,7 +2880,7 @@ const StyledKBD = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
   displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
 })(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(17);
+  const $ = reactCompilerRuntime.c(19);
   let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
     children,
@@ -2752,13 +2889,15 @@ const StyledKBD = /* @__PURE__ */ styledComponents.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__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = children, $[7] = fontSize2, $[8] = t4) : t4 = $[8];
+  $[8] !== children || $[9] !== fontSize2 ? (t4 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
+  $[11] !== padding || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = {
@@ -3021,18 +3160,21 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function LayerProvider(props) {
-  const $ = reactCompilerRuntime.c(19), {
+  const $ = reactCompilerRuntime.c(21), {
     children,
     zOffset: t0
   } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = react.useContext(LayerContext);
   let t1;
   $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
-  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(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] = react.useState(t2), [size2, setSize] = react.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] = react.useState(t3), [size2, setSize] = react.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 = {
@@ -3048,22 +3190,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]), react.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]), react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
 }
 function _temp2$2(v_0) {
   return v_0 - 1;
@@ -3213,26 +3355,42 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
   displayName: "ItemWrapper",
   componentId: "sc-dlqsj4-1"
 })`position:absolute;left:0;right:0;`, VirtualList = react.forwardRef(function(props, forwardedRef) {
-  const {
-    as = "div",
-    gap = 0,
+  const $ = reactCompilerRuntime.c(44);
+  let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
+  $[0] !== props ? ({
+    as: t0,
+    gap: t1,
     getItemKey,
-    items = [],
+    items: t2,
     onChange,
     renderItem,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = getItemKey, $[2] = onChange, $[3] = renderItem, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = t2) : (getItemKey = $[1], onChange = $[2], renderItem = $[3], restProps = $[4], t0 = $[5], t1 = $[6], t2 = $[7]);
+  const as = t0 === void 0 ? "div" : t0, gap = t1 === void 0 ? 0 : t1;
+  let t3;
+  $[8] !== t2 ? (t3 = t2 === void 0 ? [] : t2, $[8] = t2, $[9] = t3) : t3 = $[9];
+  const items = t3, {
     space
   } = useTheme_v2(), ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
-    if (!wrapperRef.current) return;
+  let t4;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+    if (!wrapperRef.current)
+      return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
-  }, [renderItem]), react.useEffect(() => {
-    if (!ref.current) return;
+  }, $[11] = t5) : t5 = $[11];
+  let t6;
+  $[12] !== renderItem ? (t6 = [renderItem], $[12] = renderItem, $[13] = t6) : t6 = $[13], react.useEffect(t5, t6);
+  let t7, t8;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
+    if (!ref.current)
+      return;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return;
+      if (!(scrollEl instanceof HTMLElement))
+        return;
       const handleScroll = () => {
         setScrollTop(scrollEl.scrollTop);
       };
@@ -3256,9 +3414,10 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
     }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
       window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  react.useEffect(() => {
+  let t10, t9;
+  $[16] !== fromIndex || $[17] !== gap || $[18] !== itemHeight || $[19] !== onChange || $[20] !== scrollHeight || $[21] !== scrollTop || $[22] !== space || $[23] !== toIndex ? (t9 = () => {
     onChange && onChange({
       fromIndex,
       gap: space[gap],
@@ -3267,18 +3426,61 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
       scrollTop,
       toIndex
     });
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
-  const children = react.useMemo(() => !renderItem || items.length === 0 ? null : itemHeight === -1 ? [/* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { children: renderItem(items[0]) }, 0)] : items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-    const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-    return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: {
-      top: itemIndex * (itemHeight + space[gap])
-    }, children: node }, key2);
-  }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({
+  }, t10 = [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex], $[16] = fromIndex, $[17] = gap, $[18] = itemHeight, $[19] = onChange, $[20] = scrollHeight, $[21] = scrollTop, $[22] = space, $[23] = toIndex, $[24] = t10, $[25] = t9) : (t10 = $[24], t9 = $[25]), react.useEffect(t9, t10);
+  let t11;
+  $[26] !== fromIndex || $[27] !== gap || $[28] !== getItemKey || $[29] !== itemHeight || $[30] !== items || $[31] !== renderItem || $[32] !== space || $[33] !== toIndex ? (t11 = {
+    fromIndex,
+    gap,
+    itemHeight,
+    space,
+    toIndex,
+    getItemKey,
+    items,
+    renderItem
+  }, $[26] = fromIndex, $[27] = gap, $[28] = getItemKey, $[29] = itemHeight, $[30] = items, $[31] = renderItem, $[32] = space, $[33] = toIndex, $[34] = t11) : t11 = $[34];
+  const children = useChildren(t11);
+  let t12;
+  $[35] !== height ? (t12 = {
     height
-  }), [height]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  }, $[35] = height, $[36] = t12) : t12 = $[36];
+  let t13;
+  $[37] !== children || $[38] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: t12, children }), $[37] = children, $[38] = t12, $[39] = t13) : t13 = $[39];
+  let t14;
+  return $[40] !== as || $[41] !== restProps || $[42] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: t13 }), $[40] = as, $[41] = restProps, $[42] = t13, $[43] = t14) : t14 = $[43], t14;
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
+function useChildren(t0) {
+  const $ = reactCompilerRuntime.c(21), {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    space,
+    toIndex
+  } = t0;
+  if (!renderItem || items.length === 0)
+    return null;
+  if (itemHeight === -1) {
+    let t12;
+    $[0] !== items[0] || $[1] !== renderItem ? (t12 = renderItem(items[0]), $[0] = items[0], $[1] = renderItem, $[2] = t12) : t12 = $[2];
+    let t2;
+    return $[3] !== t12 ? (t2 = [/* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { children: t12 }, 0)], $[3] = t12, $[4] = t2) : t2 = $[4], t2;
+  }
+  let t1;
+  if ($[5] !== fromIndex || $[6] !== gap || $[7] !== getItemKey || $[8] !== itemHeight || $[9] !== items || $[10] !== renderItem || $[11] !== space || $[12] !== toIndex) {
+    let t2;
+    $[14] !== fromIndex || $[15] !== gap || $[16] !== getItemKey || $[17] !== itemHeight || $[18] !== renderItem || $[19] !== space ? (t2 = (item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+      return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: {
+        top: itemIndex * (itemHeight + space[gap])
+      }, children: node }, key2);
+    }, $[14] = fromIndex, $[15] = gap, $[16] = getItemKey, $[17] = itemHeight, $[18] = renderItem, $[19] = space, $[20] = t2) : t2 = $[20], t1 = items.slice(fromIndex, toIndex).map(t2), $[5] = fromIndex, $[6] = gap, $[7] = getItemKey, $[8] = itemHeight, $[9] = items, $[10] = renderItem, $[11] = space, $[12] = toIndex, $[13] = t1;
+  } else
+    t1 = $[13];
+  return t1;
+}
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
   for (; _scrollEl && !_isScrollable(_scrollEl); )
@@ -3305,9 +3507,14 @@ const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER
 };
 function size(options) {
   const {
-    apply,
+    constrainSize,
     margins,
-    padding = 0
+    matchReferenceWidth,
+    maxWidthRef,
+    padding = 0,
+    referenceWidthRef,
+    setReferenceWidth,
+    widthRef
   } = options;
   return {
     name: "@sanity/ui/size",
@@ -3329,12 +3536,9 @@ function size(options) {
       });
       let maxWidth = 1 / 0, maxHeight = 1 / 0;
       const floatingW = floating.width, floatingH = floating.height;
-      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3]
-      });
+      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom));
+      const availableWidth = maxWidth - margins[1] - margins[3], availableHeight = maxHeight - margins[0] - margins[2], referenceWidth = reference.width - margins[1] - margins[3];
+      referenceWidthRef.current = referenceWidth, setReferenceWidth(referenceWidth), matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : widthRef.current !== void 0 && (elements.floating.style.width = `${widthRef.current}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
       const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
       return floatingW !== targetW || floatingH !== targetH ? {
         reset: {
@@ -3366,7 +3570,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
 })`&:not([hidden]){display:flex;}flex-direction:column;width:max-content;min-width:min-content;will-change:transform;`, MotionFlex = styledComponents.styled(framerMotion.motion.create(Flex)).withConfig({
   displayName: "MotionFlex",
   componentId: "sc-ihg31s-1"
-})`will-change:opacity;`, PopoverCard = react.memo(react.forwardRef(function(props, ref) {
+})`will-change:opacity;`, PopoverCard = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(66);
   let animate, arrow, arrowRef, arrowX, arrowY, children, marginsProp, originX, originY, overflow, padding, placement, radius, restProps, scheme, shadow, strategy, style, tone, width, xProp, yProp;
   $[0] !== props ? ({
@@ -3434,8 +3638,8 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
     t10,
     t11
   ] }), $[52] = placement, $[53] = radius, $[54] = ref, $[55] = rootStyle2, $[56] = scheme, $[57] = shadow, $[58] = t10, $[59] = t11, $[60] = t5, $[61] = t6, $[62] = t7, $[63] = t8, $[64] = tone, $[65] = t12) : t12 = $[65], t12;
-}));
-PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
+});
+PopoverCard.displayName = "ForwardRef(PopoverCard)";
 const ViewportOverlay = () => {
   const $ = reactCompilerRuntime.c(2), {
     zIndex
@@ -3448,104 +3652,125 @@ const ViewportOverlay = () => {
     width: "100vw",
     zIndex
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
-}, Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
-  const {
+}, Popover = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(126), {
     container,
     layer
-  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext.element,
-    children: childProp,
-    constrainSize = !1,
-    content,
-    disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
-    matchReferenceWidth,
-    floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
-    modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onActivate,
-    open,
-    overflow = "hidden",
-    padding: paddingProp,
-    placement: placementProp = "bottom",
-    placementStrategy = "flip",
-    portal,
-    preventOverflow = !0,
-    radius: radiusProp = 3,
-    referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
-    referenceElement,
-    scheme,
-    shadow: shadowProp = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: zOffsetProp = layer.popover.zOffset,
-    updateRef,
-    ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
-  react.useImperativeHandle(forwardedRef, () => ref.current);
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
+  let _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, childProp, content, disabled, matchReferenceWidth, modal, open, paddingProp, portal, referenceElement, restProps, scheme, t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+  if ($[0] !== props) {
+    const {
+      __unstable_margins: t122,
+      animate: t132,
+      arrow: t142,
+      boundaryElement: t152,
+      children: t162,
+      constrainSize: t172,
+      content: t182,
+      disabled: t192,
+      fallbackPlacements: t202,
+      matchReferenceWidth: t212,
+      floatingBoundary: t222,
+      modal: t232,
+      onActivate,
+      open: t242,
+      overflow: t252,
+      padding: t262,
+      placement: t272,
+      placementStrategy: t282,
+      portal: t292,
+      preventOverflow: t302,
+      radius: t312,
+      referenceBoundary: t322,
+      referenceElement: t332,
+      scheme: t342,
+      shadow: t352,
+      tone: t362,
+      width: t372,
+      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 = 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;
+  let t12;
+  $[30] !== paddingProp ? (t12 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t12) : t12 = $[31];
+  const padding = t12;
+  let t13;
+  $[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 = react.useRef(null), arrowRef = react.useRef(null);
+  let t16;
+  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[38] = t16) : t16 = $[38], react.useImperativeHandle(forwardedRef, t16);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
   }), widthRef = react.useRef(width);
-  react.useEffect(() => {
+  let t17, t18;
+  $[39] !== width ? (t17 = () => {
     widthRef.current = width;
-  }, [width]);
-  const maxWidth = calcMaxWidth({
+  }, t18 = [width], $[39] = width, $[40] = t17, $[41] = t18) : (t17 = $[40], t18 = $[41]), react.useEffect(t17, t18);
+  let t19;
+  $[42] !== boundaryWidth || $[43] !== width ? (t19 = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), maxWidthRef = react.useRef(maxWidth);
-  react.useEffect(() => {
+  }), $[42] = boundaryWidth, $[43] = width, $[44] = t19) : t19 = $[44];
+  const maxWidth = t19, maxWidthRef = react.useRef(maxWidth);
+  let t20, t21;
+  $[45] !== maxWidth ? (t20 = () => {
     maxWidthRef.current = maxWidth;
-  }, [maxWidth]);
+  }, t21 = [maxWidth], $[45] = maxWidth, $[46] = t20, $[47] = t21) : (t20 = $[46], t21 = $[47]), react.useEffect(t20, t21);
   const referenceWidthRef = react.useRef(void 0);
-  react.useEffect(() => {
+  let t22, t23;
+  $[48] !== matchReferenceWidth || $[49] !== maxWidth || $[50] !== open || $[51] !== width ? (t22 = () => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement) return;
+    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`);
-  }, [width, matchReferenceWidth, maxWidth, open]);
-  const middleware = react.useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(reactDom$1.autoPlacement({
-      allowedPlacements: [placementProp].concat(fallbackPlacements)
-    })) : ret.push(reactDom$1.flip({
-      boundary: floatingBoundary || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_POPOVER_PADDING,
-      rootBoundary
-    }))), ret.push(reactDom$1.offset({
-      mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
-        availableWidth,
-        availableHeight,
-        elements,
-        referenceWidth: referenceWidth_0
-      }) {
-        referenceWidthRef.current = referenceWidth_0;
-        const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
-        matchReferenceWidth ? elements.floating.style.width = `${referenceWidth_0}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, _maxWidth ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      margins,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(reactDom$1.shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(reactDom$1.hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, placementProp, placementStrategy, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+  }, t23 = [width, matchReferenceWidth, maxWidth, open], $[48] = matchReferenceWidth, $[49] = maxWidth, $[50] = open, $[51] = width, $[52] = t22, $[53] = t23) : (t22 = $[52], t23 = $[53]), react.useEffect(t22, t23);
+  const [referenceWidth_0, setReferenceWidth] = react.useState(void 0);
+  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,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary: "viewport",
+    setReferenceWidth,
+    widthRef
+  }, $[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, $[66] = referenceElement, $[67] = t25) : t25 = $[67];
+  let t26;
+  $[68] !== middleware || $[69] !== placementProp || $[70] !== t25 ? (t26 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate,
+    elements: t25
+  }, $[68] = middleware, $[69] = placementProp, $[70] = t25, $[71] = t26) : t26 = $[71];
+  const {
     x,
     y,
     middlewareData,
@@ -3553,38 +3778,149 @@ const ViewportOverlay = () => {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: referenceElement ? {
-      reference: referenceElement
-    } : void 0
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = react.useCallback((arrowEl) => {
+  } = reactDom$1.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;
+  $[72] === Symbol.for("react.memo_cache_sentinel") ? (t27 = (arrowEl) => {
     arrowRef.current = arrowEl;
-  }, []), setFloating = react.useCallback((node) => {
+  }, $[72] = t27) : t27 = $[72];
+  const setArrow = t27;
+  let t28;
+  $[73] !== refs ? (t28 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = react.useCallback((node_0) => {
-    refs.setReference(node_0);
-    const childRef = getElementRef(childProp);
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = react.useMemo(() => referenceElement ? childProp : childProp ? react.cloneElement(childProp, {
-    ref: setReference
-  }) : null, [childProp, referenceElement, setReference]);
-  if (react.useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), disabled)
-    return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const popover = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
-    modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.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: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content })
-  ] }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+  }, $[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], react.useImperativeHandle(t29, t30);
+  let t31;
+  bb0: {
+    if (referenceElement) {
+      t31 = childProp;
+      break bb0;
+    }
+    if (!childProp) {
+      t31 = null;
+      break bb0;
+    }
+    let t322;
+    $[79] !== childProp || $[80] !== refs.setReference ? (t322 = react.cloneElement(childProp, {
+      ref: refs.setReference
+    }), $[79] = childProp, $[80] = refs.setReference, $[81] = t322) : t322 = $[81], t31 = t322;
+  }
+  const child = t31;
+  let t32, t33;
+  if ($[82] !== update ? (t32 = () => update, t33 = [update], $[82] = update, $[83] = t32, $[84] = t33) : (t32 = $[83], t33 = $[84]), react.useImperativeHandle(updateRef, t32, t33), disabled) {
+    let t342;
+    return $[85] !== childProp ? (t342 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[85] = childProp, $[86] = t342) : t342 = $[86], t342;
+  }
+  let t34;
+  $[87] !== modal ? (t34 = modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}), $[87] = modal, $[88] = t34) : t34 = $[88];
+  const t35 = matchReferenceWidth ? referenceWidth_0 : width;
+  let t36;
+  $[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__ */ jsxRuntime.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;
+  $[112] !== t34 || $[113] !== t36 || $[114] !== zOffset ? (t37 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[120] = animate, $[121] = children, $[122] = t39) : t39 = $[122];
+  let t40;
+  return $[123] !== child || $[124] !== t39 ? (t40 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t39,
     child
-  ] });
-}));
-Popover.displayName = "Memo(ForwardRef(Popover))";
+  ] }), $[123] = child, $[124] = t39, $[125] = t40) : t40 = $[125], t40;
+});
+Popover.displayName = "ForwardRef(Popover)";
+function useMiddleware$1(t0) {
+  const $ = reactCompilerRuntime.c(42), {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+    setReferenceWidth,
+    widthRef
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== maxWidthRef || $[9] !== placementProp || $[10] !== placementStrategy || $[11] !== preventOverflow || $[12] !== referenceBoundary || $[13] !== referenceWidthRef || $[14] !== rootBoundary || $[15] !== setReferenceWidth || $[16] !== widthRef) {
+    if (ret = [], constrainSize || preventOverflow)
+      if (placementStrategy === "autoPlacement") {
+        let t12;
+        $[18] !== fallbackPlacements || $[19] !== placementProp ? (t12 = reactDom$1.autoPlacement({
+          allowedPlacements: [placementProp].concat(fallbackPlacements)
+        }), $[18] = fallbackPlacements, $[19] = placementProp, $[20] = t12) : t12 = $[20], ret.push(t12);
+      } else {
+        const t12 = floatingBoundary || void 0;
+        let t22;
+        $[21] !== fallbackPlacements || $[22] !== rootBoundary || $[23] !== t12 ? (t22 = reactDom$1.flip({
+          boundary: t12,
+          fallbackPlacements,
+          padding: DEFAULT_POPOVER_PADDING,
+          rootBoundary
+        }), $[21] = fallbackPlacements, $[22] = rootBoundary, $[23] = t12, $[24] = t22) : t22 = $[24], ret.push(t22);
+      }
+    let t1;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel") ? (t1 = reactDom$1.offset({
+      mainAxis: DEFAULT_POPOVER_DISTANCE
+    }), $[25] = t1) : t1 = $[25], ret.push(t1), constrainSize || matchReferenceWidth) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[26] !== constrainSize || $[27] !== margins || $[28] !== matchReferenceWidth || $[29] !== maxWidthRef || $[30] !== referenceWidthRef || $[31] !== setReferenceWidth || $[32] !== t22 || $[33] !== widthRef ? (t32 = size({
+        boundaryElement: t22,
+        constrainSize,
+        margins,
+        matchReferenceWidth,
+        maxWidthRef,
+        padding: DEFAULT_POPOVER_PADDING,
+        referenceWidthRef,
+        setReferenceWidth,
+        widthRef
+      }), $[26] = constrainSize, $[27] = margins, $[28] = matchReferenceWidth, $[29] = maxWidthRef, $[30] = referenceWidthRef, $[31] = setReferenceWidth, $[32] = t22, $[33] = widthRef, $[34] = t32) : t32 = $[34], ret.push(t32);
+    }
+    if (preventOverflow) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[35] !== rootBoundary || $[36] !== t22 ? (t32 = reactDom$1.shift({
+        boundary: t22,
+        rootBoundary,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[35] = rootBoundary, $[36] = t22, $[37] = t32) : t32 = $[37], ret.push(t32);
+    }
+    if (arrowProp) {
+      let t22;
+      $[38] !== arrowRef ? (t22 = reactDom$1.arrow({
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[38] = arrowRef, $[39] = t22) : t22 = $[39], ret.push(t22);
+    }
+    animate && ret.push(origin);
+    const t2 = referenceBoundary || void 0;
+    let t3;
+    $[40] !== t2 ? (t3 = reactDom$1.hide({
+      boundary: t2,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    }), $[40] = t2, $[41] = t3) : t3 = $[41], ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = maxWidthRef, $[9] = placementProp, $[10] = placementStrategy, $[11] = preventOverflow, $[12] = referenceBoundary, $[13] = referenceWidthRef, $[14] = rootBoundary, $[15] = setReferenceWidth, $[16] = widthRef, $[17] = ret;
+  } else
+    ret = $[17];
+  return ret;
+}
 function radioBaseStyle() {
   return styledComponents.css`
     position: relative;
@@ -3883,7 +4219,7 @@ const selectStyle = {
   displayName: "IconBox",
   componentId: "sc-5mxno7-2"
 })(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(29);
+  const $ = reactCompilerRuntime.c(37);
   let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
     children,
@@ -3899,20 +4235,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 = react.useRef(null);
   let t4;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
-  const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(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__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = children, $[12] = restProps, $[13] = t10, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8, $[18] = t9, $[19] = t11) : t11 = $[19];
+  $[19] !== children || $[20] !== restProps || $[21] !== t10 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[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__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[20] = t12) : t12 = $[20];
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[28] = t12) : t12 = $[28];
   let t13;
-  $[21] !== fontSize2 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t12 }), $[21] = fontSize2, $[22] = t13) : t13 = $[22];
+  $[29] !== fontSize2 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t12 }), $[29] = fontSize2, $[30] = t13) : t13 = $[30];
   let t14;
-  $[23] !== padding || $[24] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: t13 }), $[23] = padding, $[24] = t13, $[25] = t14) : t14 = $[25];
+  $[31] !== padding || $[32] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: t13 }), $[31] = padding, $[32] = t13, $[33] = t14) : t14 = $[33];
   let t15;
-  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(StyledSelect, { "data-ui": "Select", children: [
+  return $[34] !== t11 || $[35] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.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 = {
@@ -3941,16 +4286,18 @@ const StyledStack = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(10);
+  const $ = reactCompilerRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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() {
@@ -4170,7 +4517,7 @@ const StyledTextArea = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   displayName: "Presentation",
   componentId: "sc-1d6h1o8-3"
 })(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(29);
+  const $ = reactCompilerRuntime.c(35);
   let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
   $[0] !== props ? ({
     border: t0,
@@ -4186,17 +4533,26 @@ const StyledTextArea = /* @__PURE__ */ styledComponents.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 = react.useRef(null), rootTheme = useRootTheme();
   let t5;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], react.useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
-  const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp(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__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[11] = disabled, $[12] = restProps, $[13] = rootTheme.scheme, $[14] = rootTheme.tone, $[15] = t11, $[16] = t8, $[17] = t9, $[18] = weight, $[19] = t12) : t12 = $[19];
-  const t13 = useArrayProp(radius), t14 = border2 ? "" : void 0;
+  $[16] !== disabled || $[17] !== restProps || $[18] !== rootTheme.scheme || $[19] !== rootTheme.tone || $[20] !== t8 || $[21] !== t9 || $[22] !== weight ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[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__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = __unstable_disableFocusRing, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t13, $[24] = t14, $[25] = t15) : t15 = $[25];
+  $[26] !== __unstable_disableFocusRing || $[27] !== rootTheme.scheme || $[28] !== rootTheme.tone || $[29] !== t13 || $[30] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[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__ */ jsxRuntime.jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+  return $[32] !== t12 || $[33] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.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 = {
@@ -4242,7 +4598,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(84);
+  const $ = reactCompilerRuntime.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,
@@ -4264,60 +4620,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 = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = react.useRef(null), rootTheme = useRootTheme();
   let t7;
-  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  $[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__ */ jsxRuntime.jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-    react.isValidElement(IconComponent) && IconComponent,
-    ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.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], react.useImperativeHandle(forwardedRef, t11), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$2;
   let t12;
-  $[29] !== $hasClearButton || $[30] !== IconRightComponent || $[31] !== fontSize2 || $[32] !== padding ? (t12 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-    react.isValidElement(IconRightComponent) && IconRightComponent,
-    ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
-  ] }) }), $[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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconComponent) && IconComponent,
+    ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[48] = clearButton, $[49] = clearButtonBoxPadding, $[50] = clearButtonPadding, $[51] = clearButtonProps, $[52] = customValidity, $[53] = disabled, $[54] = fontSize2, $[55] = handleClearClick, $[56] = radius, $[57] = readOnly, $[58] = t16) : t16 = $[58];
-  const clearButtonNode = t16;
+  $[37] !== $hasClearButton || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== padding ? (t16 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconRightComponent) && IconRightComponent,
+    ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+  ] }) }), $[37] = $hasClearButton, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = padding, $[41] = t16) : t16 = $[41];
   let t17;
-  $[59] !== radius || $[60] !== suffix ? (t17 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[59] = radius, $[60] = suffix, $[61] = 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[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__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -4360,7 +4728,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
 }, MotionCard = styledComponents.styled(framerMotion.motion.create(Card)).withConfig({
   displayName: "MotionCard",
   componentId: "sc-1xn138w-0"
-})`will-change:transform;`, TooltipCard = react.memo(react.forwardRef(function(props, ref) {
+})`will-change:transform;`, TooltipCard = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(48);
   let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
@@ -4410,8 +4778,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     children,
     t9
   ] }), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = rootStyle2, $[40] = scheme, $[41] = shadow, $[42] = t5, $[43] = t6, $[44] = t7, $[45] = t8, $[46] = t9, $[47] = t10) : t10 = $[47], t10;
-}));
-TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
+});
+TooltipCard.displayName = "ForwardRef(TooltipCard)";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
 function TooltipDelayGroupProvider(props) {
   const $ = reactCompilerRuntime.c(9), {
@@ -4438,61 +4806,71 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  const boundaryElementContext = useBoundaryElement(), {
+  const $ = reactCompilerRuntime.c(137), boundaryElementContext = useBoundaryElement(), {
     layer
-  } = useTheme_v2(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext?.element,
+  } = useTheme_v2();
+  let _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
+  $[0] !== props ? ({
+    animate: t0,
+    arrow: t1,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
-    padding = 2,
-    placement: placementProp = "bottom",
+    fallbackPlacements: _fallbackPlacementsProp,
+    padding: t2,
+    placement: t3,
     portal: portalProp,
-    radius = 2,
+    radius: t4,
     scheme,
-    shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    shadow: t5,
+    zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
-    const ret = [];
-    return ret.push(reactDom$1.flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(reactDom$1.offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(reactDom$1.shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+  } = 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;
+  let t6;
+  $[17] !== fallbackPlacementsProp ? (t6 = _getArrayProp(fallbackPlacementsProp), $[17] = fallbackPlacementsProp, $[18] = t6) : t6 = $[18];
+  const fallbackPlacements = t6, ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  let t7;
+  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.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"
+  }, $[20] = animate, $[21] = arrowProp, $[22] = boundaryElement, $[23] = fallbackPlacements, $[24] = t8) : t8 = $[24];
+  const middleware = useMiddleware(t8);
+  let 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: reactDom$1.autoUpdate,
+    elements: t9
+  }, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: {
-      reference: referenceElement
-    }
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+  } = reactDom$1.useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
+  let t11;
+  $[31] !== delayGroupContext ? (t11 = delayGroupContext || {}, $[31] = delayGroupContext, $[32] = t11) : t11 = $[32];
+  const {
     setIsGroupActive,
     setOpenTooltipId
-  } = delayGroupContext || {}, 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, handleIsOpenChange = react.useCallback((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;
@@ -4503,65 +4881,173 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
+  }, $[33] = closeDelay, $[34] = isInsideGroup, $[35] = openDelay, $[36] = setIsGroupActive, $[37] = setIsOpen, $[38] = setOpenTooltipId, $[39] = tooltipId, $[40] = t12) : t12 = $[40];
+  const handleIsOpenChange = t12;
+  let t13;
+  $[41] !== childProp?.props || $[42] !== handleIsOpenChange ? (t13 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
+  }, $[41] = childProp?.props, $[42] = handleIsOpenChange, $[43] = t13) : t13 = $[43];
+  const handleBlur = t13;
+  let t14;
+  $[44] !== childProp?.props || $[45] !== handleIsOpenChange ? (t14 = (e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
+  }, $[44] = childProp?.props, $[45] = handleIsOpenChange, $[46] = t14) : t14 = $[46];
+  const handleClick = t14;
+  let t15;
+  $[47] !== childProp?.props || $[48] !== handleIsOpenChange ? (t15 = (e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
+  }, $[47] = childProp?.props, $[48] = handleIsOpenChange, $[49] = t15) : t15 = $[49];
+  const handleContextMenu = t15;
+  let t16;
+  $[50] !== childProp?.props || $[51] !== handleIsOpenChange ? (t16 = (e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
+  }, $[50] = childProp?.props, $[51] = handleIsOpenChange, $[52] = t16) : t16 = $[52];
+  const handleFocus = t16;
+  let t17;
+  $[53] !== childProp?.props || $[54] !== handleIsOpenChange ? (t17 = (e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
+  }, $[53] = childProp?.props, $[54] = handleIsOpenChange, $[55] = t17) : t17 = $[55];
+  const handleMouseEnter = t17;
+  let t18;
+  $[56] !== childProp?.props || $[57] !== handleIsOpenChange ? (t18 = (e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
+  }, $[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
-  }), react.useEffect(() => {
+  }, $[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);
-  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+  }, t21 = [disabled, handleIsOpenChange, showTooltip], $[64] = disabled, $[65] = handleIsOpenChange, $[66] = showTooltip, $[67] = t20, $[68] = t21) : (t20 = $[67], t21 = $[68]), react.useEffect(t20, t21);
+  let t22, t23;
+  $[69] !== content || $[70] !== handleIsOpenChange || $[71] !== showTooltip ? (t22 = () => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t23 = [content, handleIsOpenChange, showTooltip], $[69] = content, $[70] = handleIsOpenChange, $[71] = showTooltip, $[72] = t22, $[73] = t23) : (t22 = $[72], t23 = $[73]), react.useEffect(t22, t23);
+  let t24, t25;
+  $[74] !== handleIsOpenChange || $[75] !== showTooltip ? (t24 = () => {
+    if (!showTooltip)
+      return;
+    const handleWindowKeyDown = function(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
+    };
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
+  }, t25 = [handleIsOpenChange, showTooltip], $[74] = handleIsOpenChange, $[75] = showTooltip, $[76] = t24, $[77] = t25) : (t24 = $[76], t25 = $[77]), react.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);
-  }, [boundaryElement, portalElement]);
-  const setArrow = react.useCallback((arrowEl) => {
+  }, $[78] = boundaryElement, $[79] = portalElement?.offsetWidth, $[80] = t26) : t26 = $[80];
+  let t27;
+  $[81] !== boundaryElement || $[82] !== portalElement ? (t27 = [boundaryElement, portalElement], $[81] = boundaryElement, $[82] = portalElement, $[83] = t27) : t27 = $[83], react.useLayoutEffect(t26, t27);
+  let t28;
+  $[84] !== update ? (t28 = (arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = react.useCallback((node) => {
+  }, $[84] = update, $[85] = t28) : t28 = $[85];
+  const setArrow = t28;
+  let t29;
+  $[86] !== refs ? (t29 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  }, $[86] = refs, $[87] = t29) : t29 = $[87];
+  const setFloating = t29;
+  let t30;
+  bb0: {
+    if (!childProp) {
+      t30 = null;
+      break bb0;
+    }
+    let t312;
+    $[88] !== childProp || $[89] !== handleBlur || $[90] !== handleClick || $[91] !== handleContextMenu || $[92] !== handleFocus || $[93] !== handleMouseEnter || $[94] !== handleMouseLeave ? (t312 = react.cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement
+    }), $[88] = childProp, $[89] = handleBlur, $[90] = handleClick, $[91] = handleContextMenu, $[92] = handleFocus, $[93] = handleMouseEnter, $[94] = handleMouseLeave, $[95] = t312) : t312 = $[95], t30 = t312;
+  }
+  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]), react.useImperativeHandle(t31, t32, t33), !child) {
+    let t342;
+    return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t342 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[101] = t342) : t342 = $[101], t342;
+  }
+  if (disabled)
+    return child;
+  const t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t35;
+  $[102] !== floatingStyles || $[103] !== t34 ? (t35 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+    maxWidth: t34
+  }, $[102] = floatingStyles, $[103] = t34, $[104] = t35) : t35 = $[104];
+  let 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__ */ jsxRuntime.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;
+  $[121] !== restProps || $[122] !== setFloating || $[123] !== t35 || $[124] !== t36 || $[125] !== zOffset ? (t37 = /* @__PURE__ */ jsxRuntime.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;
+  $[127] !== portalProp || $[128] !== showTooltip || $[129] !== tooltip ? (t38 = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.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;
+  $[131] !== animate || $[132] !== children ? (t39 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
+  let t40;
+  return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t39,
     child
-  ] });
+  ] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
+function useMiddleware(t0) {
+  const $ = reactCompilerRuntime.c(17), {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+    ret = [];
+    const t1 = boundaryElement || void 0;
+    let t2;
+    $[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = reactDom$1.flip({
+      boundary: t1,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    }), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+    let t3;
+    $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = reactDom$1.offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    }), $[11] = t3) : t3 = $[11], ret.push(t3);
+    const t4 = boundaryElement || void 0;
+    let t5;
+    if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = reactDom$1.shift({
+      boundary: t4,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    }), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
+      let t6;
+      $[15] !== arrowRef ? (t6 = reactDom$1.arrow({
+        element: arrowRef,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }), $[15] = arrowRef, $[16] = t6) : t6 = $[16], ret.push(t6);
+    }
+    animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
+  } else
+    ret = $[6];
+  return ret;
+}
 function useCloseOnMouseLeave(t0) {
   const $ = reactCompilerRuntime.c(10), {
     handleIsOpenChange,
@@ -4593,7 +5079,7 @@ const StyledHotkeys = styledComponents.styled.kbd.withConfig({
   displayName: "Key",
   componentId: "sc-b37mge-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(24);
+  const $ = reactCompilerRuntime.c(26);
   let fontSize2, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
     fontSize: fontSize2,
@@ -4603,21 +5089,24 @@ const StyledHotkeys = styledComponents.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__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[9] = t22) : t22 = $[9], t22;
+  }
   let t2;
-  $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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);
@@ -4988,7 +5477,7 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const $ = reactCompilerRuntime.c(79);
+  const $ = reactCompilerRuntime.c(81);
   let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
@@ -5069,32 +5558,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__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+  $[48] !== IconComponent || $[49] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
     react.isValidElement(IconComponent) && IconComponent,
     ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[49] = fontSize2, $[50] = text, $[51] = t27) : t27 = $[51];
+  $[51] !== fontSize2 || $[52] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[52] = t28) : t28 = $[52];
+  $[54] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[54] = t28) : t28 = $[54];
   let t29;
-  $[53] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[53] = fontSize2, $[54] = t29) : t29 = $[54];
+  $[55] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+  $[57] !== padding || $[58] !== space || $[59] !== t26 || $[60] !== t27 || $[61] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(73);
+  const $ = reactCompilerRuntime.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,
@@ -5148,17 +5640,22 @@ const MenuItem = react.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
       react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
@@ -5172,14 +5669,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t21) : t21 = $[58];
   let t22;
-  $[53] !== children || $[54] !== paddingProps ? (t22 = children && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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) {
@@ -5342,7 +5839,6 @@ exports.rgbToHsl = rgbToHsl;
 exports.rgba = rgba;
 exports.screen = screen;
 exports.studioTheme = studioTheme;
-exports.useArrayProp = useArrayProp;
 exports.useBoundaryElement = useBoundaryElement;
 exports.useClickOutsideEvent = useClickOutsideEvent;
 exports.useCustomValidity = useCustomValidity;