@sanity/ui 3.0.13 → 3.0.15-canary.0

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

@@ -1,5 +1,5 @@
 "use strict";
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), reactCompilerRuntime = require("react-compiler-runtime"), react = require("react"), styledComponents = require("styled-components"), ReactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), styledComponents = require("styled-components"), ReactIs = require("react-is"), icons = require("@sanity/icons"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), resizeObserver = require("@juggle/resize-observer"), reactDom = require("react-dom"), useEffectEvent = require("use-effect-event");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -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;
@@ -326,42 +207,15 @@ function createGlobalScopedContext(key2, defaultValue) {
 }
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
 function ThemeProvider(props) {
-  const $ = reactCompilerRuntime.c(15), parentTheme = react.useContext(ThemeContext), {
+  const parentTheme = react.useContext(ThemeContext), {
     children
-  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
-  let t0;
-  bb0: {
-    if (!rootTheme) {
-      t0 = null;
-      break bb0;
-    }
-    let t12;
-    $[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t12 = {
-      version: 0,
-      theme: rootTheme,
-      scheme,
-      tone
-    }, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t12) : t12 = $[3], t0 = t12;
-  }
-  const themeContext = t0;
-  let t1;
-  bb1: {
-    if (!rootTheme) {
-      t1 = null;
-      break bb1;
-    }
-    let t22;
-    $[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = theme.getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
-  }
-  const theme$1 = t1;
-  if (!theme$1) {
-    let t22;
-    return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
-  }
-  let t2;
-  $[9] !== children || $[10] !== theme$1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }), $[9] = children, $[10] = theme$1, $[11] = t2) : t2 = $[11];
-  let t3;
-  return $[12] !== t2 || $[13] !== themeContext ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = t2, $[13] = themeContext, $[14] = t3) : t3 = $[14], t3;
+  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default"), themeContext = react.useMemo(() => rootTheme ? {
+    version: 0,
+    theme: rootTheme,
+    scheme,
+    tone
+  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
+  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
@@ -371,91 +225,19 @@ function useRootTheme() {
   return value;
 }
 function ThemeColorProvider(props) {
-  const $ = reactCompilerRuntime.c(5), {
+  const {
     children,
     scheme,
     tone
-  } = props, root = useRootTheme(), t0 = scheme || root.scheme;
-  let t1;
-  return $[0] !== children || $[1] !== root.theme || $[2] !== t0 || $[3] !== tone ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = children, $[1] = root.theme, $[2] = t0, $[3] = tone, $[4] = t1) : t1 = $[4], t1;
+  } = props, root = useRootTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
 }
 ThemeColorProvider.displayName = "ThemeColorProvider";
 function useTheme() {
   return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  const $ = reactCompilerRuntime.c(2), t0 = styledComponents.useTheme();
-  let t1;
-  return $[0] !== t0 ? (t1 = theme.getTheme_v2(t0), $[0] = t0, $[1] = t1) : t1 = $[1], t1;
-}
-function _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;
+  return theme.getTheme_v2(styledComponents.useTheme());
 }
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -1170,30 +952,18 @@ 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);
-  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
-  $[0] !== props ? ({
+  const {
     accent,
     align,
     children: childrenProp,
-    muted: t0,
-    size: t1,
+    muted = !1,
+    size: size2 = 2,
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
-  const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
+  } = props;
   let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    let t22;
-    $[9] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t22) : t22 = $[10], children = t22;
-  } else {
-    let t22;
-    $[11] !== children ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t22) : t22 = $[12], children = t22;
-  }
-  const t2 = useArrayProp(align), t3 = useArrayProp(size2);
-  let t4;
-  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(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 textOverflow === "ellipsis" ? children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }) : children = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: _getArrayProp(align), $muted: muted, $size: _getArrayProp(size2), $weight: weight, ref, children });
 });
 Label.displayName = "ForwardRef(Label)";
 const avatarStyle = {
@@ -1363,66 +1133,44 @@ 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);
-  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
-  $[0] !== props ? ({
+  const {
     __unstable_hideInnerStroke,
     as: asProp,
-    color: t0,
+    color = "gray",
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status: t1,
-    size: t2,
+    status = "online",
+    size: sizeProp = 1,
     ...restProps
-  } = props, $[0] = props, $[1] = __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, {
+  } = props, {
     avatar
-  } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
-  let t3, t4;
-  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
-    if (arrowPosition === arrowPositionProp)
-      return;
+  } = 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}`;
+  react.useEffect(() => {
+    if (arrowPosition === arrowPositionProp) return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), react.useEffect(t3, t4);
-  let t5, t6;
-  $[17] !== src ? (t5 = () => {
+  }, [arrowPosition, arrowPositionProp]), react.useEffect(() => {
     src && setImageFailed(!1);
-  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), react.useEffect(t5, t6);
-  let t7;
-  $[20] !== onImageLoadError ? (t7 = () => {
+  }, [src]);
+  const handleImageError = react.useCallback(() => {
     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;
-  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];
-  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: [
-    /* @__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];
-  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: [
-    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;
+  }, [onImageLoadError]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatar, { as, "data-as": typeof as == "string" ? as : void 0, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+    /* @__PURE__ */ 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 }) }) }),
+    !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" })
+    ] }),
+    (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), weight: "medium", children: initials }) }) })
+  ] });
 });
 Avatar.displayName = "ForwardRef(Avatar)";
-function _temp$7(s) {
-  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
-}
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -1463,22 +1211,13 @@ 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 {
     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;
+    size: sizeProp = 1
+  } = props, size2 = _getArrayProp(sizeProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledAvatarCounter, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), weight: "medium", children: count }) });
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
-function _temp$6(s) {
-  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
-}
 const BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
@@ -1511,47 +1250,34 @@ 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);
-  let childrenProp, restProps, t0, t1;
-  $[0] !== props ? ({
+  const {
     children: childrenProp,
-    maxLength: t0,
-    size: t1,
+    maxLength: maxLengthProp = 4,
+    size: sizeProp = 1,
     ...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;
+  } = props, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = _getArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledAvatarStack, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
+    len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
+    len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
+    visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
+      size: size2
+    }) }, String(childIndex)))
+  ] });
 });
 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);
-  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,
+  const {
+    as: asProp = "div",
     column,
     columnStart,
     columnEnd,
-    display: t1,
+    display = "block",
     flex,
     height,
-    margin: t2,
+    margin = 0,
     marginX,
     marginY,
     marginTop,
@@ -1559,7 +1285,7 @@ const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     marginBottom,
     marginLeft,
     overflow,
-    padding: t3,
+    padding = 0,
     paddingX,
     paddingY,
     paddingTop,
@@ -1571,10 +1297,8 @@ const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     rowEnd,
     sizing,
     ...restProps
-  } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[27]);
-  const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0, t5 = useArrayProp(column), t6 = useArrayProp(columnStart), t7 = useArrayProp(columnEnd), t8 = useArrayProp(display), t9 = useArrayProp(flex), t10 = useArrayProp(height), t11 = useArrayProp(margin), t12 = useArrayProp(marginX), t13 = useArrayProp(marginY), t14 = useArrayProp(marginTop), t15 = useArrayProp(marginRight), t16 = useArrayProp(marginBottom), t17 = useArrayProp(marginLeft), t18 = useArrayProp(overflow), t19 = useArrayProp(padding), t20 = useArrayProp(paddingX), t21 = useArrayProp(paddingY), t22 = useArrayProp(paddingTop), t23 = useArrayProp(paddingRight), t24 = useArrayProp(paddingBottom), t25 = useArrayProp(paddingLeft), t26 = useArrayProp(row), t27 = useArrayProp(rowStart), t28 = useArrayProp(rowEnd), t29 = useArrayProp(sizing);
-  let t30;
-  return $[28] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.jsx(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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { "data-as": typeof asProp == "string" ? asProp : void 0, "data-ui": "Box", ...restProps, $column: _getArrayProp(column), $columnStart: _getArrayProp(columnStart), $columnEnd: _getArrayProp(columnEnd), $display: _getArrayProp(display), $flex: _getArrayProp(flex), $height: _getArrayProp(height), $margin: _getArrayProp(margin), $marginX: _getArrayProp(marginX), $marginY: _getArrayProp(marginY), $marginTop: _getArrayProp(marginTop), $marginRight: _getArrayProp(marginRight), $marginBottom: _getArrayProp(marginBottom), $marginLeft: _getArrayProp(marginLeft), $overflow: _getArrayProp(overflow), $padding: _getArrayProp(padding), $paddingX: _getArrayProp(paddingX), $paddingY: _getArrayProp(paddingY), $paddingTop: _getArrayProp(paddingTop), $paddingRight: _getArrayProp(paddingRight), $paddingBottom: _getArrayProp(paddingBottom), $paddingLeft: _getArrayProp(paddingLeft), $row: _getArrayProp(row), $rowStart: _getArrayProp(rowStart), $rowEnd: _getArrayProp(rowEnd), $sizing: _getArrayProp(sizing), as: asProp, ref, children: props.children });
 });
 Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
@@ -1649,29 +1373,18 @@ 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);
-  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
-  $[0] !== props ? ({
-    accent: t0,
+  const {
+    accent = !1,
     align,
     children: childrenProp,
-    muted: t1,
-    size: t2,
+    muted = !1,
+    size: size2 = 2,
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
-  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
+  } = props;
   let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    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 t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
-  let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(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 textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children })), /* @__PURE__ */ jsxRuntime.jsx(StyledText, { "data-ui": "Text", ...restProps, $accent: accent, $align: _getArrayProp(align), $muted: muted, ref, $size: _getArrayProp(size2), $weight: weight, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) });
 });
 Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
@@ -1693,46 +1406,33 @@ 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);
-  let children, restProps, t0, t1, t2, t3;
-  if ($[0] !== props) {
-    const {
-      children: t42,
-      fontSize: t52,
-      mode: _deprecated_mode,
-      padding: t62,
-      radius: t72,
-      tone: t8,
-      ...t9
-    } = props;
-    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t8, restProps = t9, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2, $[6] = t3;
-  } else
-    children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5], t3 = $[6];
-  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? "full" : t2, tone = t3 === void 0 ? "default" : t3, t4 = useArrayProp(radius), t5 = useArrayProp(padding);
-  let t6;
-  $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
-  let t7;
-  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(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;
+  const {
+    children,
+    fontSize: fontSize2 = 1,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
+    padding = 1,
+    radius = "full",
+    tone = "default",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: _getArrayProp(radius), padding: _getArrayProp(padding), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }) });
 });
 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);
-  let align, as, gap, justify, restProps, t0, wrap;
-  $[0] !== props ? ({
+  const {
     align,
     as,
-    direction: t0,
+    direction = "row",
     gap,
     justify,
     wrap,
     ...restProps
-  } = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap) : (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]);
-  const direction = t0 === void 0 ? "row" : t0, t1 = useArrayProp(align), t2 = useArrayProp(direction), t3 = useArrayProp(gap), t4 = useArrayProp(justify), t5 = useArrayProp(wrap);
-  let t6;
-  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { "data-ui": "Flex", ...restProps, $align: _getArrayProp(align), $direction: _getArrayProp(direction), $gap: _getArrayProp(gap), $justify: _getArrayProp(justify), $wrap: _getArrayProp(wrap), forwardedAs: as, ref });
 });
 Flex.displayName = "ForwardRef(Flex)";
 const rotate = styledComponents.keyframes`
@@ -1747,11 +1447,7 @@ const rotate = styledComponents.keyframes`
   displayName: "StyledSpinner",
   componentId: "sc-124hnd0-0"
 })`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(4);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}), $[0] = t0) : t0 = $[0];
-  let t1;
-  return $[1] !== props || $[2] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(StyledSpinner, { "data-ui": "Spinner", ...props, ref, children: t0 }), $[1] = props, $[2] = ref, $[3] = t1) : t1 = $[3], t1;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpinner, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
 });
 Spinner.displayName = "ForwardRef(Spinner)";
 function _cardColorStyle(base, color, checkered = !1) {
@@ -1929,41 +1625,37 @@ 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);
-  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 ? ({
+  const {
     children,
     disabled,
-    fontSize: t0,
+    fontSize: fontSize2 = 1,
     icon: IconComponent,
     iconRight: IconRightComponent,
-    justify: t1,
+    justify: justifyProp = "center",
     loading,
-    mode: t2,
-    padding: t3,
+    mode = "default",
+    padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
     paddingTop: paddingTopProp,
     paddingBottom: paddingBottomProp,
     paddingLeft: paddingLeftProp,
     paddingRight: paddingRightProp,
-    radius: t4,
+    radius: radiusProp = 2,
     selected,
-    space: t5,
+    space: spaceProp = 3,
     text,
     textAlign,
     textWeight,
-    tone: t6,
-    type: t7,
-    muted: t8,
+    tone = "default",
+    type = "button",
+    muted = !1,
     width,
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = 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, {
+  } = props, {
     button
-  } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp);
-  let t9;
-  $[27] !== padding || $[28] !== paddingBottom || $[29] !== paddingLeft || $[30] !== paddingRight || $[31] !== paddingTop || $[32] !== paddingX || $[33] !== paddingY ? (t9 = {
+  } = useTheme_v2(), justify = _getArrayProp(justifyProp), padding = _getArrayProp(paddingProp), paddingX = _getArrayProp(paddingXProp), paddingY = _getArrayProp(paddingYProp), paddingTop = _getArrayProp(paddingTopProp), paddingBottom = _getArrayProp(paddingBottomProp), paddingLeft = _getArrayProp(paddingLeftProp), paddingRight = _getArrayProp(paddingRightProp), radius = _getArrayProp(radiusProp), space = _getArrayProp(spaceProp), boxProps = react.useMemo(() => ({
+    // flex: 1,
     padding,
     paddingX,
     paddingY,
@@ -1971,30 +1663,22 @@ 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: [
-    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      react.isValidElement(IconComponent) && IconComponent,
-      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-    ] }),
-    text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, align: textAlign, size: fontSize2, textOverflow: "ellipsis", weight: textWeight ?? button.textWeight, children: text }) }),
-    IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      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;
+  }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": !!(loading || disabled), "data-selected": selected ? "" : void 0, disabled: !!(loading || disabled), ref, type, $width: width, children: [
+    !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
+    (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
+      IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+        react.isValidElement(IconComponent) && IconComponent,
+        ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+      ] }),
+      text && /* @__PURE__ */ jsxRuntime.jsx(Box, { children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, align: textAlign, size: fontSize2, textOverflow: "ellipsis", weight: textWeight ?? button.textWeight, children: text }) }),
+      IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+        react.isValidElement(IconRightComponent) && IconRightComponent,
+        ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+      ] })
+    ] }) }),
+    children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children })
+  ] });
 });
 Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
@@ -2149,11 +1833,9 @@ 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);
-  let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
-  $[0] !== props ? ({
-    __unstable_checkered: t0,
-    __unstable_focusRing: t1,
+  const {
+    __unstable_checkered: checkered = !1,
+    __unstable_focusRing: focusRing = !1,
     as: asProp,
     border: border2,
     borderTop: borderTop2,
@@ -2162,20 +1844,164 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
     borderLeft: borderLeft2,
     muted,
     pressed,
-    radius: t2,
+    radius = 0,
     scheme,
     selected,
     shadow,
-    tone: t3,
+    tone: toneProp = "default",
     ...restProps
-  } = props, $[0] = props, $[1] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]);
-  const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp(border2), t7 = useArrayProp(borderTop2), t8 = useArrayProp(borderRight2), t9 = useArrayProp(borderBottom2), t10 = useArrayProp(borderLeft2), t11 = useArrayProp(radius), t12 = useArrayProp(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
-  let t16;
-  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
-  let t17;
-  return $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
+  } = props, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp;
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { "data-as": typeof as == "string" ? as : void 0, "data-scheme": rootTheme.scheme, "data-ui": "Card", "data-tone": tone, ...restProps, $border: _getArrayProp(border2), $borderTop: _getArrayProp(borderTop2), $borderRight: _getArrayProp(borderRight2), $borderBottom: _getArrayProp(borderBottom2), $borderLeft: _getArrayProp(borderLeft2), $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: _getArrayProp(radius), $shadow: _getArrayProp(shadow), $tone: tone, "data-checkered": checkered ? "" : void 0, "data-pressed": pressed ? "" : void 0, "data-selected": selected ? "" : void 0, forwardedAs: as, ref, selected }) });
 });
 Card.displayName = "ForwardRef(Card)";
+function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundaryElement) {
+  const onEvent = useEffectEvent.useEffectEvent((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);
+  }), hasListener = !!listener;
+  react.useEffect(() => {
+    if (!hasListener) return;
+    const handleEvent = (evt) => onEvent(evt);
+    return document.addEventListener("mousedown", handleEvent), () => {
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, [hasListener]), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+}
+function useCustomValidity(ref, customValidity) {
+  react.useEffect(() => {
+    ref.current?.setCustomValidity(customValidity || "");
+  }, [customValidity, ref]);
+}
+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 [size2, setSize] = react.useState(null);
+  return react.useEffect(() => {
+    if (element)
+      return _elementSizeObserver.subscribe(element, setSize);
+  }, [element]), size2;
+}
+function useGlobalKeyDown(onKeyDown) {
+  const handleKeyDown = useEffectEvent.useEffectEvent((event) => onKeyDown(event));
+  react.useEffect(() => {
+    const handler = (event) => handleKeyDown(event);
+    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
+  }, []);
+}
+function useMatchMedia(mediaQueryString, getServerSnapshot2) {
+  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(react.useCallback((onStoreChange) => {
+    const media = window.matchMedia(mediaQueryString);
+    return media.addEventListener("change", onStoreChange), () => media.removeEventListener("change", onStoreChange);
+  }, [mediaQueryString]), () => window.matchMedia(mediaQueryString).matches, 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 {
+    media
+  } = useTheme_v2(), store = react.useMemo(() => _createMediaStore(media), [media]);
+  return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
+}
+function usePrefersDark(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot2);
+}
+function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
+}
 function checkboxBaseStyles() {
   return styledComponents.css`
     position: relative;
@@ -2321,9 +2147,7 @@ const StyledCheckbox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Input",
   componentId: "sc-1l5mt2l-1"
 })(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(25);
-  let checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
-  $[0] !== props ? ({
+  const {
     checked,
     className,
     disabled,
@@ -2332,27 +2156,16 @@ const StyledCheckbox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     readOnly,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = checked, $[2] = className, $[3] = customValidity, $[4] = disabled, $[5] = indeterminate, $[6] = readOnly, $[7] = restProps, $[8] = style) : (checked = $[1], className = $[2], customValidity = $[3], disabled = $[4], indeterminate = $[5], readOnly = $[6], restProps = $[7], style = $[8]);
-  const ref = react.useRef(null);
-  let t0;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[9] = t0) : t0 = $[9], react.useImperativeHandle(forwardedRef, t0);
-  let t1, t2;
-  $[10] !== indeterminate ? (t1 = () => {
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, t2 = [indeterminate], $[10] = indeterminate, $[11] = t1, $[12] = t2) : (t1 = $[11], t2 = $[12]), react.useEffect(t1, t2), useCustomValidity(ref, customValidity);
-  const t3 = !disabled && readOnly ? "" : void 0, t4 = customValidity ? "" : void 0, t5 = disabled || readOnly;
-  let t6;
-  $[13] !== checked || $[14] !== readOnly || $[15] !== restProps || $[16] !== t3 || $[17] !== t4 || $[18] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$5, { "data-read-only": t3, "data-error": t4, ...restProps, checked, disabled: t5, type: "checkbox", readOnly, ref }), $[13] = checked, $[14] = readOnly, $[15] = restProps, $[16] = t3, $[17] = t4, $[18] = t5, $[19] = t6) : t6 = $[19];
-  let t7;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkIcon, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(icons.RemoveIcon, {})
-  ] }), $[20] = t7) : t7 = $[20];
-  let t8;
-  return $[21] !== className || $[22] !== style || $[23] !== t6 ? (t8 = /* @__PURE__ */ jsxRuntime.jsxs(StyledCheckbox, { className, "data-ui": "Checkbox", style, children: [
-    t6,
-    t7
-  ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8) : t8 = $[24], t8;
+  }, [indeterminate]), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(StyledCheckbox, { className, "data-ui": "Checkbox", style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input$5, { "data-read-only": !disabled && readOnly ? "" : void 0, "data-error": customValidity ? "" : void 0, ...restProps, checked, disabled: disabled || readOnly, type: "checkbox", readOnly, ref }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.CheckmarkIcon, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(icons.RemoveIcon, {})
+    ] })
+  ] });
 });
 Checkbox.displayName = "ForwardRef(Checkbox)";
 function codeSyntaxHighlightingStyle({
@@ -2509,24 +2322,14 @@ 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);
-  let children, language, restProps, t0, weight;
-  $[0] !== props ? ({
+  const {
     children,
     language,
-    size: t0,
+    size: size2 = 2,
     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);
-  let t2;
-  $[6] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[6] = children, $[7] = t2) : t2 = $[7];
-  let t3;
-  $[8] !== children || $[9] !== language ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }), $[8] = children, $[9] = language, $[10] = t3) : t3 = $[10];
-  let t4;
-  $[11] !== t2 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: t2, children: t3 }), $[11] = t2, $[12] = t3, $[13] = t4) : t4 = $[13];
-  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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { "data-ui": "Code", ...restProps, $size: _getArrayProp(size2), $weight: weight, ref, children: /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("code", { children }), children: /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }) }) });
 });
 Code.displayName = "ForwardRef(Code)";
 const BASE_STYLE$1 = {
@@ -2549,25 +2352,19 @@ 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);
-  let as, restProps, t0;
-  $[0] !== props ? ({
+  const {
     as,
-    width: t0,
+    width = 2,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
-  const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
-  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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: _getArrayProp(width), forwardedAs: as, ref });
 });
 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);
-  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
-  $[0] !== props ? ({
+  const {
     as,
     autoRows,
     autoCols,
@@ -2579,10 +2376,8 @@ const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
     rows,
     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);
-  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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledGrid, { "data-as": typeof as == "string" ? as : void 0, "data-ui": "Grid", ...restProps, $autoRows: _getArrayProp(autoRows), $autoCols: _getArrayProp(autoCols), $autoFlow: _getArrayProp(autoFlow), $columns: _getArrayProp(columns), $gap: _getArrayProp(gap), $gapX: _getArrayProp(gapX), $gapY: _getArrayProp(gapY), $rows: _getArrayProp(rows), forwardedAs: as, ref, children });
 });
 Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
@@ -2648,29 +2443,18 @@ 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);
-  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
-  $[0] !== props ? ({
-    accent: t0,
+  const {
+    accent = !1,
     align,
     children: childrenProp,
-    muted: t1,
-    size: t2,
+    muted = !1,
+    size: size2 = 2,
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
-  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
+  } = props;
   let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    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 t5;
-  $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
-  let t6;
-  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(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 textOverflow === "ellipsis" && (children = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children })), /* @__PURE__ */ jsxRuntime.jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: _getArrayProp(align), $muted: muted, $size: _getArrayProp(size2), $weight: weight, ref, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children }) });
 });
 Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
@@ -2704,24 +2488,15 @@ 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);
-  let as, childrenProp, restProps, space;
-  $[0] !== props ? ({
+  const {
     as,
     children: childrenProp,
     space,
     ...restProps
-  } = 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;
-  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;
+  } = props, children = react.useMemo(() => react.Children.map(childrenProp, (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child })), [childrenProp]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: _getArrayProp(space), forwardedAs: as, ref, children });
 });
 Inline.displayName = "ForwardRef(Inline)";
-function _temp$5(child) {
-  return child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child });
-}
 function kbdStyle() {
   return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -2743,22 +2518,14 @@ 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);
-  let children, restProps, t0, t1, t2;
-  $[0] !== props ? ({
+  const {
     children,
-    fontSize: t0,
-    padding: t1,
-    radius: t2,
+    fontSize: fontSize2 = 0,
+    padding = 1,
+    radius = 2,
     ...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);
-  let t4;
-  $[6] !== children || $[7] !== fontSize2 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = children, $[7] = fontSize2, $[8] = t4) : t4 = $[8];
-  let t5;
-  $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
-  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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: _getArrayProp(radius), ref, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }) }) });
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -2886,15 +2653,12 @@ const StyledArrow = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "ShapePath",
   componentId: "sc-12vzy6c-2"
 })`fill:var(--card-bg-color);`, Arrow = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(24);
-  let h, restProps, t0, w;
-  $[0] !== props ? ({
+  const {
     width: w,
     height: h,
-    radius: t0,
+    radius = 0,
     ...restProps
-  } = props, $[0] = props, $[1] = h, $[2] = restProps, $[3] = t0, $[4] = w) : (h = $[1], restProps = $[2], t0 = $[3], w = $[4]);
-  const radius = t0 === void 0 ? 0 : t0, {
+  } = props, {
     card
   } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [{
     x: 0,
@@ -2914,38 +2678,24 @@ const StyledArrow = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   }, {
     x: w,
     y: 0
-  }], cmds = getRoundedCommands(points), path = compileCommands(cmds), strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`, t1 = `0 0 ${w} ${w}`;
-  let t2;
-  $[5] !== strokeWidth || $[6] !== w ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: strokeWidth, width: w, height: w, fill: "white" }) }), $[5] = strokeWidth, $[6] = w, $[7] = t2) : t2 = $[7];
-  const t3 = strokeWidth * 2;
-  let t4;
-  $[8] !== strokePath || $[9] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: t3 }), $[8] = strokePath, $[9] = t3, $[10] = t4) : t4 = $[10];
-  let t5;
-  $[11] !== fillPath ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath }), $[11] = fillPath, $[12] = t5) : t5 = $[12];
-  let t6;
-  $[13] !== t1 || $[14] !== t2 || $[15] !== t4 || $[16] !== t5 || $[17] !== w ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: t1, children: [
-    t2,
-    t4,
-    t5
-  ] }), $[13] = t1, $[14] = t2, $[15] = t4, $[16] = t5, $[17] = w, $[18] = t6) : t6 = $[18];
-  let t7;
-  return $[19] !== ref || $[20] !== restProps || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(StyledArrow, { ...restProps, $w: w, ref, children: t6 }), $[19] = ref, $[20] = restProps, $[21] = t6, $[22] = w, $[23] = t7) : t7 = $[23], t7;
+  }], cmds = getRoundedCommands(points), path = compileCommands(cmds), strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledArrow, { ...restProps, $w: w, ref, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: `0 0 ${w} ${w}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: strokeWidth, width: w, height: w, fill: "white" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(StrokePath, { d: strokePath, mask: "url(#stroke-mask)", strokeWidth: strokeWidth * 2 }),
+    /* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath })
+  ] }) });
 });
 Arrow.displayName = "ForwardRef(Arrow)";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
 function BoundaryElementProvider(props) {
-  const $ = reactCompilerRuntime.c(5), {
+  const {
     children,
     element
-  } = props;
-  let t0;
-  $[0] !== element ? (t0 = {
+  } = props, value = react.useMemo(() => ({
     version: 0,
     element
-  }, $[0] = element, $[1] = t0) : t0 = $[1];
-  const value = t0;
-  let t1;
-  return $[2] !== children || $[3] !== value ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t1) : t1 = $[4], t1;
+  }), [element]);
+  return /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children });
 }
 BoundaryElementProvider.displayName = "BoundaryElementProvider";
 function isRecord(value) {
@@ -2982,32 +2732,18 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(18), theme2 = useTheme_v2();
-  let _media, children, restProps;
-  $[0] !== props ? ({
+  const theme2 = useTheme_v2(), {
     children,
     media: _media,
     ...restProps
-  } = props, $[0] = props, $[1] = _media, $[2] = children, $[3] = restProps) : (_media = $[1], children = $[2], restProps = $[3]);
-  const media = _media ?? theme2.media, [element, setElement] = react.useState(null), width = useElementSize(element)?.border.width ?? window.innerWidth;
-  let t0;
-  if ($[4] !== media || $[5] !== width) {
+  } = props, media = _media ?? theme2.media, [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => {
     const eq = findMaxBreakpoints(media, width);
-    t0 = eq.length ? eq.join(" ") : void 0, $[4] = media, $[5] = width, $[6] = t0;
-  } else
-    t0 = $[6];
-  const max = t0;
-  let t1;
-  if ($[7] !== media || $[8] !== width) {
-    const eq_0 = findMinBreakpoints(media, width);
-    t1 = eq_0.length ? eq_0.join(" ") : void 0, $[7] = media, $[8] = width, $[9] = t1;
-  } else
-    t1 = $[9];
-  const min = t1;
-  let t2, t3;
-  $[10] !== element ? (t2 = () => element, t3 = [element], $[10] = element, $[11] = t2, $[12] = t3) : (t2 = $[11], t3 = $[12]), react.useImperativeHandle(forwardedRef, t2, t3);
-  let t4;
-  return $[13] !== children || $[14] !== max || $[15] !== min || $[16] !== restProps ? (t4 = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[13] = children, $[14] = max, $[15] = min, $[16] = restProps, $[17] = t4) : t4 = $[17], t4;
+    return eq.length ? eq.join(" ") : void 0;
+  }, [media, width]), min = react.useMemo(() => {
+    const eq = findMinBreakpoints(media, width);
+    return eq.length ? eq.join(" ") : void 0;
+  }, [media, width]);
+  return react.useImperativeHandle(forwardedRef, () => element, [element]), /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max, "data-eq-min": min, ref: setElement, children });
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
 function getLayerContext(contextValue) {
@@ -3021,18 +2757,10 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function LayerProvider(props) {
-  const $ = reactCompilerRuntime.c(19), {
+  const {
     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];
-  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;
-  let t3;
-  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
+    zOffset: zOffsetProp = 0
+  } = props, parentContextValue = react.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = _getArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback((childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -3040,47 +2768,34 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$4), () => {
-      childLevel !== void 0 ? setChildLayers((state_0) => {
-        const nextState_0 = {
-          ...state_0
+    }) : setSize((v) => v + 1), () => {
+      childLevel !== void 0 ? setChildLayers((state) => {
+        const nextState = {
+          ...state
         };
-        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?.();
+        return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
+      }) : setSize((v) => v - 1), 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 = {
+  }, [parentRegisterChild, setSize, setChildLayers]);
+  react.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
+  const value = react.useMemo(() => ({
     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;
-}
-function _temp2$2(v_0) {
-  return v_0 - 1;
-}
-function _temp$4(v) {
-  return v + 1;
+  }), [isTopLayer, level, registerChild, size2, zIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
 }
 LayerProvider.displayName = "LayerProvider";
 function useLayer() {
-  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
+  const value = react.useContext(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
-    let t1;
-    return $[0] !== value ? (t1 = getLayerContext(value), $[0] = value, $[1] = t1) : t1 = $[1], t1;
-  } catch (t0) {
-    const err = t0;
+    return getLayerContext(value);
+  } catch (err) {
     throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
   }
 }
@@ -3090,54 +2805,37 @@ const StyledLayer = /* @__PURE__ */ styledComponents.styled.div.withConfig({
 })({
   position: "relative"
 }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(22);
-  let children, onActivate, onFocus, restProps, t0;
-  $[0] !== props ? ({
+  const {
     children,
     onActivate,
     onFocus,
-    style: t0,
+    style = EMPTY_RECORD,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = onActivate, $[3] = onFocus, $[4] = restProps, $[5] = t0) : (children = $[1], onActivate = $[2], onFocus = $[3], restProps = $[4], t0 = $[5]);
-  const style = t0 === void 0 ? EMPTY_RECORD : t0, {
+  } = props, {
     zIndex,
     isTopLayer
   } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
-  let t1;
-  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[6] = t1) : t1 = $[6], react.useImperativeHandle(forwardedRef, t1);
-  let t2, t3;
-  $[7] !== isTopLayer || $[8] !== onActivate ? (t2 = () => {
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({
       activeElement: lastFocusedRef.current
     }), isTopLayerRef.current = isTopLayer;
-  }, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), react.useEffect(t2, t3);
-  let t4;
-  $[11] !== isTopLayer || $[12] !== onFocus ? (t4 = (event) => {
+  }, [isTopLayer, onActivate]);
+  const handleFocus = react.useCallback((event) => {
     onFocus?.(event);
     const rootElement = ref.current, target = document.activeElement;
     !isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
-  }, $[11] = isTopLayer, $[12] = onFocus, $[13] = t4) : t4 = $[13];
-  const handleFocus = t4;
-  let t5;
-  $[14] !== style || $[15] !== zIndex ? (t5 = {
+  }, [isTopLayer, onFocus]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLayer, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: {
     ...style,
     zIndex
-  }, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
-  let t6;
-  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledLayer, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = children, $[18] = handleFocus, $[19] = restProps, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  }, children });
 }), Layer = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(11);
-  let children, restProps, t0;
-  $[0] !== props ? ({
+  const {
     children,
-    zOffset: t0,
+    zOffset = 1,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0) : (children = $[1], restProps = $[2], t0 = $[3]);
-  const zOffset = t0 === void 0 ? 1 : t0;
-  let t1;
-  $[4] !== children || $[5] !== ref || $[6] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }), $[4] = children, $[5] = ref, $[6] = restProps, $[7] = t1) : t1 = $[7];
-  let t2;
-  return $[8] !== t1 || $[9] !== zOffset ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: t1 }), $[8] = t1, $[9] = zOffset, $[10] = t2) : t2 = $[10], t2;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }) });
 });
 Layer.displayName = "ForwardRef(Layer)";
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
@@ -3158,39 +2856,26 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  const $ = reactCompilerRuntime.c(3), {
+  const {
     children,
     __unstable_name: name
   } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
-  if (!portalElement)
-    return null;
-  let t0;
-  return $[0] !== children || $[1] !== portalElement ? (t0 = reactDom.createPortal(children, portalElement), $[0] = children, $[1] = portalElement, $[2] = t0) : t0 = $[2], t0;
+  return portalElement ? reactDom.createPortal(children, portalElement) : null;
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const $ = reactCompilerRuntime.c(7), {
+  const {
     boundaryElement,
     children,
     element,
     __unstable_elements: elements
-  } = props, fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1), t0 = boundaryElement || null, t1 = element || fallbackElement;
-  let t2;
-  $[0] !== elements || $[1] !== t0 || $[2] !== t1 ? (t2 = {
+  } = props, fallbackElement = react.useSyncExternalStore(emptySubscribe, () => document.body, () => null), value = react.useMemo(() => ({
     version: 0,
-    boundaryElement: t0,
-    element: t1,
+    boundaryElement: boundaryElement || null,
+    element: element || fallbackElement,
     elements
-  }, $[0] = elements, $[1] = t0, $[2] = t1, $[3] = t2) : t2 = $[3];
-  const value = t2;
-  let t3;
-  return $[4] !== children || $[5] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t3) : t3 = $[6], t3;
-}
-function _temp2$1() {
-  return null;
-}
-function _temp$3() {
-  return document.body;
+  }), [boundaryElement, element, elements, fallbackElement]);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
 }
 PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
@@ -3198,12 +2883,11 @@ const emptySubscribe = () => () => {
   displayName: "StyledSrOnly",
   componentId: "sc-mubr0c-0"
 })`display:block;width:0;height:0;position:absolute;overflow:hidden;overflow:clip;`, SrOnly = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(4), {
+  const {
     as,
     children
   } = props;
-  let t0;
-  return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(StyledSrOnly, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children }), $[0] = as, $[1] = children, $[2] = ref, $[3] = t0) : t0 = $[3], t0;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledSrOnly, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
 const StyledVirtualList = styledComponents.styled.div.withConfig({
@@ -3213,69 +2897,52 @@ 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 $ = reactCompilerRuntime.c(44);
-  let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
-  $[0] !== props ? ({
-    as: t0,
-    gap: t1,
+  const {
+    as = "div",
+    gap = 0,
     getItemKey,
-    items: t2,
+    items = [],
     onChange,
     renderItem,
     ...restProps
-  } = 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, {
+  } = props, {
     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);
-  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;
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
+    if (!wrapperRef.current) return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
-  }, $[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;
+  }, [renderItem]), react.useEffect(() => {
+    if (!ref.current) return;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement))
-        return;
-      const handleScroll = () => {
+      if (!(scrollEl instanceof HTMLElement)) return;
+      const handleScroll2 = () => {
         setScrollTop(scrollEl.scrollTop);
       };
-      scrollEl.addEventListener("scroll", handleScroll, {
+      scrollEl.addEventListener("scroll", handleScroll2, {
         passive: !0
       });
       const ro = new _ResizeObserver((entries) => {
         setScrollHeight(entries[0].contentRect.height);
       });
-      return ro.observe(scrollEl), handleScroll(), () => {
-        scrollEl.removeEventListener("scroll", handleScroll), ro.unobserve(scrollEl), ro.disconnect();
+      return ro.observe(scrollEl), handleScroll2(), () => {
+        scrollEl.removeEventListener("scroll", handleScroll2), ro.unobserve(scrollEl), ro.disconnect();
       };
     }
-    const handleScroll_0 = () => {
+    const handleScroll = () => {
       setScrollTop(window.scrollY);
     }, handleResize = () => {
       setScrollHeight(window.innerHeight);
     };
-    return window.addEventListener("scroll", handleScroll_0, {
+    return window.addEventListener("scroll", handleScroll, {
       passive: !0
-    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
-      window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
+    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll(), () => {
+      window.removeEventListener("scroll", handleScroll), 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;
-  let t10, t9;
-  $[16] !== fromIndex || $[17] !== gap || $[18] !== itemHeight || $[19] !== onChange || $[20] !== scrollHeight || $[21] !== scrollTop || $[22] !== space || $[23] !== toIndex ? (t9 = () => {
+  react.useEffect(() => {
     onChange && onChange({
       fromIndex,
       gap: space[gap],
@@ -3284,9 +2951,8 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
       scrollTop,
       toIndex
     });
-  }, 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, onChange, scrollHeight, scrollTop, space, toIndex]);
+  const children = useChildren({
     fromIndex,
     gap,
     itemHeight,
@@ -3295,49 +2961,28 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
     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 = {
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: {
     height
-  }, $[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;
+  }, children }) });
 });
 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 useChildren({
+  fromIndex,
+  gap,
+  getItemKey,
+  itemHeight,
+  items,
+  renderItem,
+  space,
+  toIndex
+}) {
+  return !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);
+  });
 }
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
@@ -3429,9 +3074,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
   displayName: "MotionFlex",
   componentId: "sc-ihg31s-1"
 })`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 ? ({
+  const {
     __unstable_margins: marginsProp,
     animate,
     arrow,
@@ -3454,12 +3097,9 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
     x: xProp,
     y: yProp,
     ...restProps
-  } = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = originX, $[9] = originY, $[10] = overflow, $[11] = padding, $[12] = placement, $[13] = radius, $[14] = restProps, $[15] = scheme, $[16] = shadow, $[17] = strategy, $[18] = style, $[19] = tone, $[20] = width, $[21] = xProp, $[22] = yProp) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], originX = $[8], originY = $[9], overflow = $[10], padding = $[11], placement = $[12], radius = $[13], restProps = $[14], scheme = $[15], shadow = $[16], strategy = $[17], style = $[18], tone = $[19], width = $[20], xProp = $[21], yProp = $[22]);
-  const {
+  } = props, {
     zIndex
-  } = useLayer(), margins = marginsProp || DEFAULT_POPOVER_MARGINS, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], t0 = animate ? "transform" : void 0;
-  let t1;
-  $[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== style || $[27] !== t0 || $[28] !== width || $[29] !== x || $[30] !== y || $[31] !== zIndex ? (t1 = {
+  } = useLayer(), margins = react.useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]), x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], rootStyle2 = react.useMemo(() => ({
     left: x,
     originX,
     originY,
@@ -3467,128 +3107,92 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
     top: y,
     width,
     zIndex,
-    willChange: t0,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = style, $[27] = t0, $[28] = width, $[29] = x, $[30] = y, $[31] = zIndex, $[32] = t1) : t1 = $[32];
-  const rootStyle2 = t1, t2 = arrowX !== null ? arrowX : void 0, t3 = arrowY !== null ? arrowY : void 0;
-  let t4;
-  $[33] !== t2 || $[34] !== t3 ? (t4 = {
-    left: t2,
-    top: t3,
+  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]), arrowStyle = react.useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
     right: void 0,
     bottom: void 0
-  }, $[33] = t2, $[34] = t3, $[35] = t4) : t4 = $[35];
-  const arrowStyle = t4, t5 = restProps;
-  let t6;
-  $[36] !== animate ? (t6 = animate ? ["hidden", "initial"] : void 0, $[36] = animate, $[37] = t6) : t6 = $[37];
-  let t7;
-  $[38] !== animate ? (t7 = animate ? ["visible", "scaleIn"] : void 0, $[38] = animate, $[39] = t7) : t7 = $[39];
-  let t8;
-  $[40] !== animate ? (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[40] = animate, $[41] = t8) : t8 = $[41];
-  let t9;
-  $[42] !== children || $[43] !== padding ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[42] = children, $[43] = padding, $[44] = t9) : t9 = $[44];
-  let t10;
-  $[45] !== overflow || $[46] !== t9 ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(MotionFlex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, variants: POPOVER_MOTION_PROPS.children, transition: POPOVER_MOTION_PROPS.transition, children: t9 }), $[45] = overflow, $[46] = t9, $[47] = t10) : t10 = $[47];
-  let t11;
-  $[48] !== arrow || $[49] !== arrowRef || $[50] !== arrowStyle ? (t11 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[48] = arrow, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t11) : t11 = $[51];
-  let t12;
-  return $[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 ? (t12 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard$1, { "data-ui": "Popover", ...t5, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t6, animate: t7, exit: t8, children: [
-    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;
+  }), [arrowX, arrowY]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MotionCard$1, { "data-ui": "Popover", ...restProps, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: animate ? ["hidden", "initial"] : void 0, animate: animate ? ["visible", "scaleIn"] : void 0, exit: animate ? ["hidden", "scaleOut"] : void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(MotionFlex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, variants: POPOVER_MOTION_PROPS.children, transition: POPOVER_MOTION_PROPS.transition, children: /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }) }),
+    arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS })
+  ] });
 });
 PopoverCard.displayName = "ForwardRef(PopoverCard)";
 const ViewportOverlay = () => {
-  const $ = reactCompilerRuntime.c(2), {
+  const {
     zIndex
   } = useLayer();
-  let t0;
-  return $[0] !== zIndex ? (t0 = /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
     height: "100vh",
     inset: 0,
     position: "fixed",
     width: "100vw",
     zIndex
-  } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
+  } });
 }, Popover = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(122), {
+  const {
     container,
     layer
-  } = 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: t38,
-      updateRef: t39,
-      ...t40
-    } = props;
-    t0 = t122, t1 = t132, t2 = t142, _boundaryElement = t152, childProp = t162, t3 = t172, content = t182, disabled = t192, _fallbackPlacements = t202, matchReferenceWidth = t212, _floatingBoundary = t222, modal = t232, open = t242, t4 = t252, paddingProp = t262, t5 = t272, t6 = t282, portal = t292, t7 = t302, t8 = t312, _referenceBoundary = t322, referenceElement = t332, scheme = t342, t9 = t352, t10 = t362, t11 = t372, _zOffsetProp = t38, updateRef = t39, restProps = t40, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
-  } else
-    _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
-  const margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !0 : t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null);
-  let t12;
-  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ref.current, $[30] = t12) : t12 = $[30], react.useImperativeHandle(forwardedRef, t12);
-  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0;
-  let t13;
-  $[31] !== container || $[32] !== mediaIndex || $[33] !== widthArrayProp ? (t13 = calcCurrentWidth({
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
+    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+    animate: _animate = !1,
+    arrow: arrowProp = !1,
+    boundaryElement: _boundaryElement,
+    children: childProp,
+    constrainSize = !1,
+    content,
+    disabled,
+    fallbackPlacements: _fallbackPlacements,
+    matchReferenceWidth,
+    floatingBoundary: _floatingBoundary,
+    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: _referenceBoundary,
+    referenceElement,
+    scheme,
+    shadow: shadowProp = 3,
+    tone = "inherit",
+    width: widthProp = "auto",
+    zOffset: _zOffsetProp,
+    updateRef,
+    ...restProps
+  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = _getArrayProp(paddingProp), radius = _getArrayProp(radiusProp), shadow = _getArrayProp(shadowProp), widthArrayProp = _getArrayProp(widthProp), zOffset = _getArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
-  }), $[31] = container, $[32] = mediaIndex, $[33] = widthArrayProp, $[34] = t13) : t13 = $[34];
-  const width = t13, widthRef = react.useRef(width);
-  let t14, t15;
-  $[35] !== width ? (t14 = () => {
+  }), widthRef = react.useRef(width);
+  react.useEffect(() => {
     widthRef.current = width;
-  }, t15 = [width], $[35] = width, $[36] = t14, $[37] = t15) : (t14 = $[36], t15 = $[37]), react.useEffect(t14, t15);
-  let t16;
-  $[38] !== boundaryWidth || $[39] !== width ? (t16 = calcMaxWidth({
+  }, [width]);
+  const maxWidth = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), $[38] = boundaryWidth, $[39] = width, $[40] = t16) : t16 = $[40];
-  const maxWidth = t16, maxWidthRef = react.useRef(maxWidth);
-  let t17, t18;
-  $[41] !== maxWidth ? (t17 = () => {
+  }), maxWidthRef = react.useRef(maxWidth);
+  react.useEffect(() => {
     maxWidthRef.current = maxWidth;
-  }, t18 = [maxWidth], $[41] = maxWidth, $[42] = t17, $[43] = t18) : (t17 = $[42], t18 = $[43]), react.useEffect(t17, t18);
+  }, [maxWidth]);
   const referenceWidthRef = react.useRef(void 0);
-  let t19, t20;
-  $[44] !== matchReferenceWidth || $[45] !== maxWidth || $[46] !== open || $[47] !== width ? (t19 = () => {
+  react.useEffect(() => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement)
-      return;
-    const referenceWidth = referenceWidthRef.current;
-    matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
-  }, t20 = [width, matchReferenceWidth, maxWidth, open], $[44] = matchReferenceWidth, $[45] = maxWidth, $[46] = open, $[47] = width, $[48] = t19, $[49] = t20) : (t19 = $[48], t20 = $[49]), react.useEffect(t19, t20);
-  const [referenceWidth_0, setReferenceWidth] = react.useState(void 0);
-  let t21;
-  $[50] !== animate || $[51] !== arrowProp || $[52] !== constrainSize || $[53] !== fallbackPlacements || $[54] !== floatingBoundary || $[55] !== margins || $[56] !== matchReferenceWidth || $[57] !== placementProp || $[58] !== placementStrategy || $[59] !== preventOverflow || $[60] !== referenceBoundary ? (t21 = {
+    if (!open || !floatingElement) return;
+    const referenceWidth2 = referenceWidthRef.current;
+    matchReferenceWidth ? referenceWidth2 !== void 0 && (floatingElement.style.width = `${referenceWidth2}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
+  }, [width, matchReferenceWidth, maxWidth, open]);
+  const [referenceWidth, setReferenceWidth] = react.useState(void 0), middleware = useMiddleware$1({
     animate,
     arrowProp,
     arrowRef,
@@ -3603,23 +3207,10 @@ const ViewportOverlay = () => {
     preventOverflow,
     referenceBoundary,
     referenceWidthRef,
-    rootBoundary: "viewport",
+    rootBoundary,
     setReferenceWidth,
     widthRef
-  }, $[50] = animate, $[51] = arrowProp, $[52] = constrainSize, $[53] = fallbackPlacements, $[54] = floatingBoundary, $[55] = margins, $[56] = matchReferenceWidth, $[57] = placementProp, $[58] = placementStrategy, $[59] = preventOverflow, $[60] = referenceBoundary, $[61] = t21) : t21 = $[61];
-  const middleware = useMiddleware$1(t21);
-  let t22;
-  $[62] !== referenceElement ? (t22 = referenceElement ? {
-    reference: referenceElement
-  } : void 0, $[62] = referenceElement, $[63] = t22) : t22 = $[63];
-  let t23;
-  $[64] !== middleware || $[65] !== placementProp || $[66] !== t22 ? (t23 = {
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: t22
-  }, $[64] = middleware, $[65] = placementProp, $[66] = t22, $[67] = t23) : t23 = $[67];
-  const {
+  }), {
     x,
     y,
     middlewareData,
@@ -3627,148 +3218,87 @@ const ViewportOverlay = () => {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating(t23), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
-  let t24;
-  $[68] === Symbol.for("react.memo_cache_sentinel") ? (t24 = (arrowEl) => {
+  } = 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) => {
     arrowRef.current = arrowEl;
-  }, $[68] = t24) : t24 = $[68];
-  const setArrow = t24;
-  let t25;
-  $[69] !== refs ? (t25 = (node) => {
+  }, []), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, $[69] = refs, $[70] = t25) : t25 = $[70];
-  const setFloating = t25;
-  let t26;
-  $[71] !== childProp ? (t26 = childProp ? getElementRef(childProp) : null, $[71] = childProp, $[72] = t26) : t26 = $[72];
-  let t27;
-  $[73] !== refs.reference.current ? (t27 = () => refs.reference.current, $[73] = refs.reference.current, $[74] = t27) : t27 = $[74], react.useImperativeHandle(t26, t27);
-  let t28;
-  bb0: {
-    if (referenceElement) {
-      t28 = childProp;
-      break bb0;
-    }
-    if (!childProp) {
-      t28 = null;
-      break bb0;
-    }
-    let t292;
-    $[75] !== childProp || $[76] !== refs.setReference ? (t292 = react.cloneElement(childProp, {
-      ref: refs.setReference
-    }), $[75] = childProp, $[76] = refs.setReference, $[77] = t292) : t292 = $[77], t28 = t292;
-  }
-  const child = t28;
-  let t29, t30;
-  if ($[78] !== update ? (t29 = () => update, t30 = [update], $[78] = update, $[79] = t29, $[80] = t30) : (t29 = $[79], t30 = $[80]), react.useImperativeHandle(updateRef, t29, t30), disabled) {
-    let t312;
-    return $[81] !== childProp ? (t312 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[81] = childProp, $[82] = t312) : t312 = $[82], t312;
-  }
-  let t31;
-  $[83] !== modal ? (t31 = modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}), $[83] = modal, $[84] = t31) : t31 = $[84];
-  const t32 = matchReferenceWidth ? referenceWidth_0 : width;
-  let t33;
-  $[85] !== animate || $[86] !== arrowProp || $[87] !== arrowX || $[88] !== arrowY || $[89] !== content || $[90] !== margins || $[91] !== originX || $[92] !== originY || $[93] !== overflow || $[94] !== padding || $[95] !== placement || $[96] !== radius || $[97] !== referenceHidden || $[98] !== restProps || $[99] !== scheme || $[100] !== setFloating || $[101] !== shadow || $[102] !== strategy || $[103] !== t32 || $[104] !== tone || $[105] !== x || $[106] !== y ? (t33 = /* @__PURE__ */ 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: t32, x, y, children: content }), $[85] = animate, $[86] = arrowProp, $[87] = arrowX, $[88] = arrowY, $[89] = content, $[90] = margins, $[91] = originX, $[92] = originY, $[93] = overflow, $[94] = padding, $[95] = placement, $[96] = radius, $[97] = referenceHidden, $[98] = restProps, $[99] = scheme, $[100] = setFloating, $[101] = shadow, $[102] = strategy, $[103] = t32, $[104] = tone, $[105] = x, $[106] = y, $[107] = t33) : t33 = $[107];
-  let t34;
-  $[108] !== t31 || $[109] !== t33 || $[110] !== zOffset ? (t34 = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
-    t31,
-    t33
-  ] }), $[108] = t31, $[109] = t33, $[110] = zOffset, $[111] = t34) : t34 = $[111];
-  const popover = t34;
-  let t35;
-  $[112] !== open || $[113] !== popover || $[114] !== portal ? (t35 = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[112] = open, $[113] = popover, $[114] = portal, $[115] = t35) : t35 = $[115];
-  const children = t35;
-  let t36;
-  $[116] !== animate || $[117] !== children ? (t36 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[116] = animate, $[117] = children, $[118] = t36) : t36 = $[118];
-  let t37;
-  return $[119] !== child || $[120] !== t36 ? (t37 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t36,
+  }, [refs]);
+  react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => refs.reference.current);
+  const child = react.useMemo(() => referenceElement ? childProp : childProp ? react.cloneElement(childProp, {
+    ref: refs.setReference
+  }) : null, [childProp, referenceElement, refs.setReference]);
+  if (react.useImperativeHandle(updateRef, () => update, [update]), 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 ? referenceWidth : 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,
     child
-  ] }), $[119] = child, $[120] = t36, $[121] = t37) : t37 = $[121], t37;
+  ] });
 });
 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({
+function useMiddleware$1({
+  animate,
+  arrowProp,
+  arrowRef,
+  constrainSize,
+  fallbackPlacements,
+  floatingBoundary,
+  margins,
+  matchReferenceWidth,
+  maxWidthRef,
+  placementProp,
+  placementStrategy,
+  preventOverflow,
+  referenceBoundary,
+  referenceWidthRef,
+  rootBoundary,
+  setReferenceWidth,
+  widthRef
+}) {
+  return 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
-    }), $[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,
+    })), (constrainSize || matchReferenceWidth) && ret.push(size({
+      boundaryElement: floatingBoundary || void 0,
+      constrainSize,
+      margins,
+      matchReferenceWidth,
+      maxWidthRef,
+      padding: DEFAULT_POPOVER_PADDING,
+      referenceWidthRef,
+      setReferenceWidth,
+      widthRef
+    })), 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"
-    }), $[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;
+    })), ret;
+  }, [animate, arrowProp, arrowRef, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, maxWidthRef, placementProp, placementStrategy, preventOverflow, referenceBoundary, referenceWidthRef, rootBoundary, setReferenceWidth, widthRef]);
 }
 function radioBaseStyle() {
   return styledComponents.css`
@@ -3891,29 +3421,18 @@ const StyledRadio = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Input",
   componentId: "sc-ccrwkf-1"
 })(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(19);
-  let className, customValidity, disabled, readOnly, restProps, style;
-  $[0] !== props ? ({
+  const {
     className,
     disabled,
     style,
     customValidity,
     readOnly,
     ...restProps
-  } = props, $[0] = props, $[1] = className, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = style) : (className = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], style = $[6]);
-  const ref = react.useRef(null);
-  let t0;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[7] = t0) : t0 = $[7], react.useImperativeHandle(forwardedRef, t0), useCustomValidity(ref, customValidity);
-  const t1 = !disabled && readOnly ? "" : void 0, t2 = customValidity ? "" : void 0, t3 = disabled || readOnly;
-  let t4;
-  $[8] !== readOnly || $[9] !== restProps || $[10] !== t1 || $[11] !== t2 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Input$4, { "data-read-only": t1, "data-error": t2, ...restProps, disabled: t3, readOnly, ref, type: "radio" }), $[8] = readOnly, $[9] = restProps, $[10] = t1, $[11] = t2, $[12] = t3, $[13] = t4) : t4 = $[13];
-  let t5;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", {}), $[14] = t5) : t5 = $[14];
-  let t6;
-  return $[15] !== className || $[16] !== style || $[17] !== t4 ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs(StyledRadio, { className, "data-ui": "Radio", style, children: [
-    t4,
-    t5
-  ] }), $[15] = className, $[16] = style, $[17] = t4, $[18] = t6) : t6 = $[18], t6;
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(forwardedRef, () => ref.current), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(StyledRadio, { className, "data-ui": "Radio", style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input$4, { "data-read-only": !disabled && readOnly ? "" : void 0, "data-error": customValidity ? "" : void 0, ...restProps, disabled: disabled || readOnly, readOnly, ref, type: "radio" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", {})
+  ] });
 });
 Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
@@ -4068,36 +3587,21 @@ const selectStyle = {
   displayName: "IconBox",
   componentId: "sc-5mxno7-2"
 })(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(29);
-  let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
-  $[0] !== props ? ({
+  const {
     children,
     customValidity,
     disabled,
-    fontSize: t0,
-    padding: t1,
-    radius: t2,
+    fontSize: fontSize2 = 2,
+    padding = 3,
+    radius = 2,
     readOnly,
-    space: t3,
+    space = 3,
     ...restProps
-  } = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3) : (children = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9]);
-  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;
-  let t11;
-  $[11] !== children || $[12] !== restProps || $[13] !== t10 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = children, $[12] = restProps, $[13] = t10, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8, $[18] = t9, $[19] = t11) : t11 = $[19];
-  let t12;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[20] = t12) : t12 = $[20];
-  let t13;
-  $[21] !== fontSize2 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t12 }), $[21] = fontSize2, $[22] = t13) : t13 = $[22];
-  let t14;
-  $[23] !== padding || $[24] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: t13 }), $[23] = padding, $[24] = t13, $[25] = t14) : t14 = $[25];
-  let t15;
-  return $[26] !== t11 || $[27] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(StyledSelect, { "data-ui": "Select", children: [
-    t11,
-    t14
-  ] }), $[26] = t11, $[27] = t14, $[28] = t15) : t15 = $[28], t15;
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(forwardedRef, () => ref.current), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsxs(StyledSelect, { "data-ui": "Select", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": !disabled && readOnly ? "" : void 0, "data-ui": "Select", ...restProps, $fontSize: _getArrayProp(fontSize2), $padding: _getArrayProp(padding), $radius: _getArrayProp(radius), $space: _getArrayProp(space), disabled: disabled || readOnly, ref, children }),
+    /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) })
+  ] });
 });
 Select.displayName = "ForwardRef(Select)";
 const BASE_STYLE = {
@@ -4126,16 +3630,12 @@ 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);
-  let as, restProps, space;
-  $[0] !== props ? ({
+  const {
     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);
-  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;
+  } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledStack, { "data-as": typeof as == "string" ? as : void 0, "data-ui": "Stack", ...restProps, $space: _getArrayProp(space), forwardedAs: as, ref });
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
@@ -4307,9 +3807,7 @@ const StyledSwitch = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   displayName: "Thumb",
   componentId: "sc-dw1foe-4"
 })(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(26);
-  let checked, className, disabled, indeterminate, readOnly, restProps, style;
-  $[0] !== props ? ({
+  const {
     checked,
     className,
     disabled,
@@ -4317,29 +3815,16 @@ const StyledSwitch = /* @__PURE__ */ styledComponents.styled.span.withConfig({
     readOnly,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = checked, $[2] = className, $[3] = disabled, $[4] = indeterminate, $[5] = readOnly, $[6] = restProps, $[7] = style) : (checked = $[1], className = $[2], disabled = $[3], indeterminate = $[4], readOnly = $[5], restProps = $[6], style = $[7]);
-  const ref = react.useRef(null);
-  let t0;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[8] = t0) : t0 = $[8], react.useImperativeHandle(forwardedRef, t0);
-  let t1, t2;
-  $[9] !== indeterminate ? (t1 = () => {
+  } = props, ref = react.useRef(null);
+  return react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, t2 = [indeterminate], $[9] = indeterminate, $[10] = t1, $[11] = t2) : (t1 = $[10], t2 = $[11]), react.useEffect(t1, t2);
-  const t3 = !disabled && readOnly ? "" : void 0, t4 = indeterminate !== !0 && checked, t5 = disabled || readOnly;
-  let t6;
-  $[12] !== restProps || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$2, { "data-read-only": t3, ...restProps, checked: t4, disabled: t5, type: "checkbox", ref }), $[12] = restProps, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16];
-  let t7;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Track, {}), $[17] = t7) : t7 = $[17];
-  let t8;
-  $[18] !== checked || $[19] !== indeterminate ? (t8 = /* @__PURE__ */ jsxRuntime.jsxs(Representation, { "aria-hidden": !0, "data-name": "representation", children: [
-    t7,
-    /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
-  ] }), $[18] = checked, $[19] = indeterminate, $[20] = t8) : t8 = $[20];
-  let t9;
-  return $[21] !== className || $[22] !== style || $[23] !== t6 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsxs(StyledSwitch, { className, "data-ui": "Switch", style, children: [
-    t6,
-    t8
-  ] }), $[21] = className, $[22] = style, $[23] = t6, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
+  }, [indeterminate]), /* @__PURE__ */ jsxRuntime.jsxs(StyledSwitch, { className, "data-ui": "Switch", style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input$2, { "data-read-only": !disabled && readOnly ? "" : void 0, ...restProps, checked: indeterminate !== !0 && checked, disabled: disabled || readOnly, type: "checkbox", ref }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Representation, { "aria-hidden": !0, "data-name": "representation", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Track, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(Thumb, { $checked: checked, $indeterminate: indeterminate })
+    ] })
+  ] });
 });
 Switch.displayName = "ForwardRef(Switch)";
 const StyledTextArea = /* @__PURE__ */ styledComponents.styled.span.withConfig({
@@ -4355,33 +3840,21 @@ 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);
-  let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
-  $[0] !== props ? ({
-    border: t0,
+  const {
+    border: border2 = !0,
     customValidity,
-    disabled: t1,
-    fontSize: t2,
-    padding: t3,
-    radius: t4,
+    disabled = !1,
+    fontSize: fontSize2 = 2,
+    padding = 3,
+    radius = 2,
     weight,
     __unstable_disableFocusRing,
     ...restProps
-  } = props, $[0] = props, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = weight) : (__unstable_disableFocusRing = $[1], customValidity = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], weight = $[9]);
-  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);
-  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;
-  let t15;
-  $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = __unstable_disableFocusRing, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t13, $[24] = t14, $[25] = t15) : t15 = $[25];
-  let t16;
-  return $[26] !== t12 || $[27] !== 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;
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme();
+  return react.useImperativeHandle(forwardedRef, () => ref.current), useCustomValidity(ref, customValidity), /* @__PURE__ */ jsxRuntime.jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: _getArrayProp(fontSize2), $padding: _getArrayProp(padding), $scheme: rootTheme.scheme, $space: _getArrayProp(0), $tone: rootTheme.tone, $weight: weight, disabled, ref }),
+    /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: _getArrayProp(radius), $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": border2 ? "" : void 0, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone })
+  ] }) });
 });
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
@@ -4427,107 +3900,61 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(84);
-  let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
-  $[0] !== props ? ({
+  const {
     __unstable_disableFocusRing,
-    border: t0,
+    border: border2 = !0,
     clearButton,
-    disabled: t1,
-    fontSize: t2,
+    disabled = !1,
+    fontSize: fontSizeProp = 2,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
-    padding: t3,
+    padding: paddingProp = 3,
     prefix,
-    radius: t4,
+    radius: radiusProp = 2,
     readOnly,
-    space: t5,
+    space: spaceProp = 3,
     suffix,
     customValidity,
-    type: t6,
+    type = "text",
     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;
-  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;
-  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;
-  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;
-  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];
-  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];
-  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;
-  let t15;
-  $[46] !== padding ? (t15 = padding.map(_temp3), $[46] = padding, $[47] = t15) : t15 = $[47];
-  const clearButtonPadding = t15, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
-  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;
-  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;
-  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];
-  let t20;
-  $[75] !== clearButtonNode || $[76] !== presentationNode || $[77] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
-    t19,
-    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: [
+  } = props, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = _getArrayProp(fontSizeProp), padding = _getArrayProp(paddingProp), radius = _getArrayProp(radiusProp), space = _getArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  react.useImperativeHandle(forwardedRef, () => ref.current), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = react.useCallback((event) => {
+    event.preventDefault(), event.stopPropagation();
+  }, []), handleClearClick = react.useCallback((event) => {
+    event.preventDefault(), event.stopPropagation(), onClear && onClear(), ref.current?.focus();
+  }, [onClear, ref]), prefixNode = react.useMemo(() => prefix && /* @__PURE__ */ jsxRuntime.jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }) }), [prefix, radius]), presentationNode = react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": border2 ? "" : void 0, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+    ] }) }),
+    !$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, {})
+    ] }) })
+  ] }), [__unstable_disableFocusRing, border2, fontSize2, IconComponent, IconRightComponent, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]), clearButtonBoxPadding = react.useMemo(() => padding.map((v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2), [padding]), clearButtonPadding = react.useMemo(() => padding.map((v) => v === 0 || v === 1 ? 0 : v === 2 ? 1 : v - 1), [padding]), clearButtonProps = react.useMemo(() => typeof clearButton == "object" ? clearButton : EMPTY_RECORD, [clearButton]), clearButtonNode = react.useMemo(() => !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 }) }), [clearButton, clearButtonBoxPadding, clearButtonPadding, clearButtonProps, customValidity, disabled, fontSize2, handleClearClick, handleClearMouseDown, radius, readOnly]), suffixNode = react.useMemo(() => suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), [radius, suffix]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
-    t20,
+    /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: $hasIconRight || $hasClearButton, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }),
+      presentationNode,
+      clearButtonNode
+    ] }),
     suffixNode
-  ] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t20, $[83] = t21) : t21 = $[83], t21;
+  ] });
 });
 TextInput.displayName = "ForwardRef(TextInput)";
-function _temp$2(event) {
-  event.preventDefault(), event.stopPropagation();
-}
-function _temp2(v) {
-  return v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2;
-}
-function _temp3(v_0) {
-  return v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1;
-}
 function useDelayedState(initialState) {
-  const $ = reactCompilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.useRef(void 0);
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = (nextState, delay) => {
+  const [state, setState] = react.useState(initialState), delayedAction = react.useRef(void 0), onStateChange = react.useCallback((nextState, delay) => {
     const action = () => {
       setState(nextState);
     };
-    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay)
-      return action();
+    if (delayedAction.current && (clearTimeout(delayedAction.current), delayedAction.current = void 0), !delay) return action();
     delayedAction.current = setTimeout(action, delay);
-  }, $[0] = t0) : t0 = $[0];
-  const onStateChange = t0;
-  let t1;
-  return $[1] !== state ? (t1 = [state, onStateChange], $[1] = state, $[2] = t1) : t1 = $[2], t1;
+  }, []);
+  return [state, onStateChange];
 }
 const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAULT_TOOLTIP_ARROW_RADIUS = 2, DEFAULT_TOOLTIP_DISTANCE = 4, DEFAULT_TOOLTIP_PADDING = 4, DEFAULT_FALLBACK_PLACEMENTS = {
   top: ["top-end", "top-start", "bottom", "left", "right"],
@@ -4546,9 +3973,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   displayName: "MotionCard",
   componentId: "sc-1xn138w-0"
 })`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 ? ({
+  const {
     animate,
     arrow,
     arrowRef,
@@ -4564,56 +3989,37 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     shadow,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = animate, $[2] = arrow, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = restProps, $[13] = scheme, $[14] = shadow, $[15] = style) : (animate = $[1], arrow = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], restProps = $[12], scheme = $[13], shadow = $[14], style = $[15]);
-  const t0 = animate ? "transform" : void 0;
-  let t1;
-  $[16] !== originX || $[17] !== originY || $[18] !== style || $[19] !== t0 ? (t1 = {
+  } = props, rootStyle2 = react.useMemo(() => ({
     originX,
     originY,
-    willChange: t0,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }, $[16] = originX, $[17] = originY, $[18] = style, $[19] = t0, $[20] = t1) : t1 = $[20];
-  const rootStyle2 = t1, t2 = arrowX !== null ? arrowX : void 0, t3 = arrowY !== null ? arrowY : void 0;
-  let t4;
-  $[21] !== t2 || $[22] !== t3 ? (t4 = {
-    left: t2,
-    top: t3,
+  }), [animate, originX, originY, style]), arrowStyle = react.useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
     right: void 0,
     bottom: void 0
-  }, $[21] = t2, $[22] = t3, $[23] = t4) : t4 = $[23];
-  const arrowStyle = t4, t5 = restProps;
-  let t6;
-  $[24] !== animate ? (t6 = animate ? ["hidden", "initial"] : void 0, $[24] = animate, $[25] = t6) : t6 = $[25];
-  let t7;
-  $[26] !== animate ? (t7 = animate ? ["visible", "scaleIn"] : void 0, $[26] = animate, $[27] = t7) : t7 = $[27];
-  let t8;
-  $[28] !== animate ? (t8 = animate ? ["hidden", "scaleOut"] : void 0, $[28] = animate, $[29] = t8) : t8 = $[29];
-  let t9;
-  $[30] !== arrow || $[31] !== arrowRef || $[32] !== arrowStyle ? (t9 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[30] = arrow, $[31] = arrowRef, $[32] = arrowStyle, $[33] = t9) : t9 = $[33];
-  let t10;
-  return $[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 ? (t10 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { "data-ui": "Tooltip__card", ...t5, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t6, animate: t7, exit: t8, children: [
+  }), [arrowX, arrowY]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { "data-ui": "Tooltip__card", ...restProps, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: animate ? ["hidden", "initial"] : void 0, animate: animate ? ["visible", "scaleIn"] : void 0, exit: animate ? ["hidden", "scaleOut"] : void 0, children: [
     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;
+    arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS })
+  ] });
 });
 TooltipCard.displayName = "ForwardRef(TooltipCard)";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
 function TooltipDelayGroupProvider(props) {
-  const $ = reactCompilerRuntime.c(9), {
+  const {
     children,
     delay
-  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0, t0 = isGroupActive ? 1 : openDelay;
-  let t1;
-  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t0 ? (t1 = {
+  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0, value = react.useMemo(() => ({
     setIsGroupActive,
     openTooltipId,
     setOpenTooltipId,
-    openDelay: t0,
+    // When the group is active, we want the next tooltip to open immediately.
+    openDelay: isGroupActive ? 1 : openDelay,
     closeDelay
-  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t0, $[5] = t1) : t1 = $[5];
-  const value = t1;
-  let t2;
-  return $[6] !== children || $[7] !== value ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t2) : t2 = $[8], t2;
+  }), [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 function useTooltipDelayGroup() {
@@ -4623,68 +4029,51 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(135), boundaryElementContext = useBoundaryElement(), {
+  const boundaryElementContext = useBoundaryElement(), {
     layer
-  } = 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,
+  } = useTheme_v2(), {
+    animate: _animate = !1,
+    arrow: arrowProp = !1,
     boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
     fallbackPlacements: _fallbackPlacementsProp,
-    padding: t2,
-    placement: t3,
+    padding = 2,
+    placement: placementProp = "bottom",
     portal: portalProp,
-    radius: t4,
+    radius = 2,
     scheme,
-    shadow: t5,
+    shadow = 2,
     zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5) : (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16]);
-  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
-  let t6;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[17] = t6) : t6 = $[17], react.useImperativeHandle(forwardedRef, t6);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
-  let t7;
-  $[18] !== animate || $[19] !== arrowProp || $[20] !== boundaryElement || $[21] !== fallbackPlacements ? (t7 = {
+  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = _getArrayProp(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 = useMiddleware({
     animate,
     arrowProp,
     arrowRef,
     boundaryElement,
     fallbackPlacements,
-    rootBoundary: "viewport"
-  }, $[18] = animate, $[19] = arrowProp, $[20] = boundaryElement, $[21] = fallbackPlacements, $[22] = t7) : t7 = $[22];
-  const middleware = useMiddleware(t7);
-  let t8;
-  $[23] !== referenceElement ? (t8 = {
-    reference: referenceElement
-  }, $[23] = referenceElement, $[24] = t8) : t8 = $[24];
-  let t9;
-  $[25] !== middleware || $[26] !== placementProp || $[27] !== t8 ? (t9 = {
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: t8
-  }, $[25] = middleware, $[26] = placementProp, $[27] = t8, $[28] = t9) : t9 = $[28];
-  const {
+    rootBoundary
+  }), {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = reactDom$1.useFloating(t9), 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 t10;
-  $[29] !== delayGroupContext ? (t10 = delayGroupContext || {}, $[29] = delayGroupContext, $[30] = t10) : t10 = $[30];
-  const {
+  } = 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(), {
     setIsGroupActive,
     setOpenTooltipId
-  } = t10, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  let t11;
-  $[31] !== closeDelay || $[32] !== isInsideGroup || $[33] !== openDelay || $[34] !== setIsGroupActive || $[35] !== setIsOpen || $[36] !== setOpenTooltipId || $[37] !== tooltipId ? (t11 = (open, immediate) => {
+  } = 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) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4695,196 +4084,108 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, $[31] = closeDelay, $[32] = isInsideGroup, $[33] = openDelay, $[34] = setIsGroupActive, $[35] = setIsOpen, $[36] = setOpenTooltipId, $[37] = tooltipId, $[38] = t11) : t11 = $[38];
-  const handleIsOpenChange = t11;
-  let t12;
-  $[39] !== childProp?.props || $[40] !== handleIsOpenChange ? (t12 = (e) => {
+  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, $[39] = childProp?.props, $[40] = handleIsOpenChange, $[41] = t12) : t12 = $[41];
-  const handleBlur = t12;
-  let t13;
-  $[42] !== childProp?.props || $[43] !== handleIsOpenChange ? (t13 = (e_0) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, $[42] = childProp?.props, $[43] = handleIsOpenChange, $[44] = t13) : t13 = $[44];
-  const handleClick = t13;
-  let t14;
-  $[45] !== childProp?.props || $[46] !== handleIsOpenChange ? (t14 = (e_1) => {
-    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, $[45] = childProp?.props, $[46] = handleIsOpenChange, $[47] = t14) : t14 = $[47];
-  const handleContextMenu = t14;
-  let t15;
-  $[48] !== childProp?.props || $[49] !== handleIsOpenChange ? (t15 = (e_2) => {
-    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, $[48] = childProp?.props, $[49] = handleIsOpenChange, $[50] = t15) : t15 = $[50];
-  const handleFocus = t15;
-  let t16;
-  $[51] !== childProp?.props || $[52] !== handleIsOpenChange ? (t16 = (e_3) => {
-    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, $[51] = childProp?.props, $[52] = handleIsOpenChange, $[53] = t16) : t16 = $[53];
-  const handleMouseEnter = t16;
-  let t17;
-  $[54] !== childProp?.props || $[55] !== handleIsOpenChange ? (t17 = (e_4) => {
-    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, $[54] = childProp?.props, $[55] = handleIsOpenChange, $[56] = t17) : t17 = $[56];
-  const handleMouseLeave = t17;
-  let t18;
-  $[57] !== handleIsOpenChange || $[58] !== isInsideGroup || $[59] !== referenceElement || $[60] !== showTooltip ? (t18 = {
+  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e);
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e);
+  }, [childProp?.props, handleIsOpenChange]);
+  useCloseOnMouseLeave({
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }, $[57] = handleIsOpenChange, $[58] = isInsideGroup, $[59] = referenceElement, $[60] = showTooltip, $[61] = t18) : t18 = $[61], useCloseOnMouseLeave(t18);
-  let t19, t20;
-  $[62] !== disabled || $[63] !== handleIsOpenChange || $[64] !== showTooltip ? (t19 = () => {
+  }), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, t20 = [disabled, handleIsOpenChange, showTooltip], $[62] = disabled, $[63] = handleIsOpenChange, $[64] = showTooltip, $[65] = t19, $[66] = t20) : (t19 = $[65], t20 = $[66]), react.useEffect(t19, t20);
-  let t21, t22;
-  $[67] !== content || $[68] !== handleIsOpenChange || $[69] !== showTooltip ? (t21 = () => {
+  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, t22 = [content, handleIsOpenChange, showTooltip], $[67] = content, $[68] = handleIsOpenChange, $[69] = showTooltip, $[70] = t21, $[71] = t22) : (t21 = $[70], t22 = $[71]), react.useEffect(t21, t22);
-  let t23, t24;
-  $[72] !== handleIsOpenChange || $[73] !== showTooltip ? (t23 = () => {
-    if (!showTooltip)
-      return;
-    const handleWindowKeyDown = function(event) {
+  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    };
+    }
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, t24 = [handleIsOpenChange, showTooltip], $[72] = handleIsOpenChange, $[73] = showTooltip, $[74] = t23, $[75] = t24) : (t23 = $[74], t24 = $[75]), react.useEffect(t23, t24);
-  let t25;
-  $[76] !== boundaryElement || $[77] !== portalElement?.offsetWidth ? (t25 = () => {
+  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, $[76] = boundaryElement, $[77] = portalElement?.offsetWidth, $[78] = t25) : t25 = $[78];
-  let t26;
-  $[79] !== boundaryElement || $[80] !== portalElement ? (t26 = [boundaryElement, portalElement], $[79] = boundaryElement, $[80] = portalElement, $[81] = t26) : t26 = $[81], react.useLayoutEffect(t25, t26);
-  let t27;
-  $[82] !== update ? (t27 = (arrowEl) => {
+  }, [boundaryElement, portalElement]);
+  const setArrow = react.useCallback((arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, $[82] = update, $[83] = t27) : t27 = $[83];
-  const setArrow = t27;
-  let t28;
-  $[84] !== refs ? (t28 = (node) => {
+  }, [update]), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, $[84] = refs, $[85] = t28) : t28 = $[85];
-  const setFloating = t28;
-  let t29;
-  bb0: {
-    if (!childProp) {
-      t29 = null;
-      break bb0;
-    }
-    let t302;
-    $[86] !== childProp || $[87] !== handleBlur || $[88] !== handleClick || $[89] !== handleContextMenu || $[90] !== handleFocus || $[91] !== handleMouseEnter || $[92] !== handleMouseLeave ? (t302 = react.cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      ref: setReferenceElement
-    }), $[86] = childProp, $[87] = handleBlur, $[88] = handleClick, $[89] = handleContextMenu, $[90] = handleFocus, $[91] = handleMouseEnter, $[92] = handleMouseLeave, $[93] = t302) : t302 = $[93], t29 = t302;
-  }
-  const child = t29;
-  let t30;
-  $[94] !== childProp ? (t30 = childProp ? getElementRef(childProp) : null, $[94] = childProp, $[95] = t30) : t30 = $[95];
-  let t31, t32;
-  if ($[96] !== referenceElement ? (t31 = () => referenceElement, t32 = [referenceElement], $[96] = referenceElement, $[97] = t31, $[98] = t32) : (t31 = $[97], t32 = $[98]), react.useImperativeHandle(t30, t31, t32), !child) {
-    let t332;
-    return $[99] === Symbol.for("react.memo_cache_sentinel") ? (t332 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[99] = t332) : t332 = $[99], t332;
-  }
-  if (disabled)
-    return child;
-  const t33 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
-  let t34;
-  $[100] !== floatingStyles || $[101] !== t33 ? (t34 = {
+  }, [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: {
     ...floatingStyles,
-    maxWidth: t33
-  }, $[100] = floatingStyles, $[101] = t33, $[102] = t34) : t34 = $[102];
-  let t35;
-  $[103] !== animate || $[104] !== arrowProp || $[105] !== arrowX || $[106] !== arrowY || $[107] !== content || $[108] !== originX || $[109] !== originY || $[110] !== padding || $[111] !== placement || $[112] !== radius || $[113] !== restProps || $[114] !== scheme || $[115] !== setArrow || $[116] !== setFloating || $[117] !== shadow ? (t35 = /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[103] = animate, $[104] = arrowProp, $[105] = arrowX, $[106] = arrowY, $[107] = content, $[108] = originX, $[109] = originY, $[110] = padding, $[111] = placement, $[112] = radius, $[113] = restProps, $[114] = scheme, $[115] = setArrow, $[116] = setFloating, $[117] = shadow, $[118] = t35) : t35 = $[118];
-  let t36;
-  $[119] !== restProps || $[120] !== setFloating || $[121] !== t34 || $[122] !== t35 || $[123] !== zOffset ? (t36 = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t34, zOffset, children: t35 }), $[119] = restProps, $[120] = setFloating, $[121] = t34, $[122] = t35, $[123] = zOffset, $[124] = t36) : t36 = $[124];
-  const tooltip = t36;
-  let t37;
-  $[125] !== portalProp || $[126] !== showTooltip || $[127] !== tooltip ? (t37 = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[125] = portalProp, $[126] = showTooltip, $[127] = tooltip, $[128] = t37) : t37 = $[128];
-  const children = t37;
-  let t38;
-  $[129] !== animate || $[130] !== children ? (t38 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[129] = animate, $[130] = children, $[131] = t38) : t38 = $[131];
-  let t39;
-  return $[132] !== child || $[133] !== t38 ? (t39 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t38,
+    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,
     child
-  ] }), $[132] = child, $[133] = t38, $[134] = t39) : t39 = $[134], t39;
+  ] });
 });
 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,
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  boundaryElement,
+  fallbackPlacements,
+  rootBoundary
+}) {
+  return react.useMemo(() => {
+    const ret = [];
+    return ret.push(reactDom$1.flip({
+      boundary: boundaryElement || void 0,
       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({
+    })), ret.push(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,
+    })), ret.push(reactDom$1.shift({
+      boundary: boundaryElement || void 0,
       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,
-    referenceElement,
-    showTooltip,
-    isInsideGroup
-  } = t0;
-  let t1;
-  $[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
+    })), arrowProp && ret.push(reactDom$1.arrow({
+      element: arrowRef,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), animate && ret.push(origin), ret;
+  }, [animate, arrowProp, arrowRef, boundaryElement, fallbackPlacements, rootBoundary]);
+}
+function useCloseOnMouseLeave({
+  handleIsOpenChange,
+  referenceElement,
+  showTooltip,
+  isInsideGroup
+}) {
+  const onMouseMove = useEffectEvent.useEffectEvent((target, teardown) => {
     referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-  }, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
-  const onMouseMove = useEffectEvent.useEffectEvent(t1);
-  let t2;
-  $[3] !== isInsideGroup || $[4] !== onMouseMove || $[5] !== showTooltip ? (t2 = () => {
-    if (!showTooltip || isInsideGroup)
-      return;
+  });
+  react.useEffect(() => {
+    if (!showTooltip || isInsideGroup) return;
     const handleMouseMove = (event) => {
       onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
     };
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, $[3] = isInsideGroup, $[4] = onMouseMove, $[5] = showTooltip, $[6] = t2) : t2 = $[6];
-  let t3;
-  $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], react.useEffect(t2, t3);
+  }, [isInsideGroup, showTooltip]);
 }
 const StyledHotkeys = styledComponents.styled.kbd.withConfig({
   displayName: "StyledHotkeys",
@@ -4893,31 +4194,15 @@ 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);
-  let fontSize2, keys, padding, radius, restProps, t0;
-  $[0] !== props ? ({
+  const {
     fontSize: fontSize2,
     keys,
     padding,
     radius,
-    space: t0,
+    space: spaceProp = 0.5,
     ...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;
-  }
-  let t1;
-  if ($[8] !== fontSize2 || $[9] !== keys || $[10] !== padding || $[11] !== radius) {
-    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];
-  let t2;
-  $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: t1 }), $[17] = space, $[18] = t1, $[19] = t2) : t2 = $[19];
-  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;
+  } = props, space = _getArrayProp(spaceProp);
+  return !keys || keys.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : /* @__PURE__ */ jsxRuntime.jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: keys.map((key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i)) }) });
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -4958,24 +4243,16 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const $ = reactCompilerRuntime.c(21), {
+  const {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef
-  } = props;
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
-  const elementsRef = react.useRef(t0), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), [activeElement, setActiveElement] = react.useState(null);
-  let t1;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (nextActiveIndex) => {
+  } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), [activeElement, setActiveElement] = react.useState(null), setActiveIndex = react.useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
-  }, $[1] = t1) : t1 = $[1];
-  const setActiveIndex = t1;
-  let t2;
-  $[2] !== rootElementRef ? (t2 = (element, selected) => {
-    if (!element)
-      return _temp$1;
+  }, []), mount = react.useCallback((element, selected) => {
+    if (!element) return () => {
+    };
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
@@ -4984,10 +4261,7 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, $[2] = rootElementRef, $[3] = t2) : t2 = $[3];
-  const mount = t2;
-  let t3;
-  $[4] !== onKeyDown || $[5] !== originElement ? (t3 = (event) => {
+  }, [rootElementRef, setActiveIndex]), handleKeyDown = react.useCallback((event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -4995,77 +4269,64 @@ function useMenuController(props) {
     if (event.key === "Home") {
       event.preventDefault(), event.stopPropagation();
       const el = _getFocusableElements(elementsRef.current)[0];
-      if (!el)
-        return;
+      if (!el) return;
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
       return;
     }
     if (event.key === "End") {
       event.preventDefault(), event.stopPropagation();
-      const focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
-      if (!el_0)
-        return;
-      const currentIndex_0 = elementsRef.current.indexOf(el_0);
-      setActiveIndex(currentIndex_0);
+      const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
+      if (!el) return;
+      const currentIndex = elementsRef.current.indexOf(el);
+      setActiveIndex(currentIndex);
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault(), event.stopPropagation();
-      const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
-      if (focusableLen === 0)
-        return;
+      const focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
+      if (focusableLen === 0) return;
       const focusedElement = elementsRef.current[activeIndexRef.current];
-      let focusedIndex = focusableElements_1.indexOf(focusedElement);
+      let focusedIndex = focusableElements.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
-      const el_1 = focusableElements_1[focusedIndex], currentIndex_1 = elementsRef.current.indexOf(el_1);
-      setActiveIndex(currentIndex_1);
+      const el = focusableElements[focusedIndex], currentIndex = elementsRef.current.indexOf(el);
+      setActiveIndex(currentIndex);
       return;
     }
     if (event.key === "ArrowDown") {
       event.preventDefault(), event.stopPropagation();
-      const focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
-      if (focusableLen_0 === 0)
-        return;
-      const focusedElement_0 = elementsRef.current[activeIndexRef.current];
-      let focusedIndex_0 = focusableElements_2.indexOf(focusedElement_0);
-      focusedIndex_0 = (focusedIndex_0 + 1) % focusableLen_0;
-      const el_2 = focusableElements_2[focusedIndex_0], currentIndex_2 = elementsRef.current.indexOf(el_2);
-      setActiveIndex(currentIndex_2);
+      const focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
+      if (focusableLen === 0) return;
+      const focusedElement = elementsRef.current[activeIndexRef.current];
+      let focusedIndex = focusableElements.indexOf(focusedElement);
+      focusedIndex = (focusedIndex + 1) % focusableLen;
+      const el = focusableElements[focusedIndex], currentIndex = elementsRef.current.indexOf(el);
+      setActiveIndex(currentIndex);
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, $[4] = onKeyDown, $[5] = originElement, $[6] = t3) : t3 = $[6];
-  const handleKeyDown = t3;
-  let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_0) => {
-    const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
-    setActiveIndex(currentIndex_3);
-  }, $[7] = t4) : t4 = $[7];
-  const handleItemMouseEnter = t4;
-  let t5;
-  $[8] !== rootElementRef ? (t5 = () => {
+  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = react.useCallback((event) => {
+    const element = event.currentTarget, currentIndex = elementsRef.current.indexOf(element);
+    setActiveIndex(currentIndex);
+  }, [setActiveIndex]), handleItemMouseLeave = react.useCallback(() => {
     setActiveIndex(-2), rootElementRef.current?.focus();
-  }, $[8] = rootElementRef, $[9] = t5) : t5 = $[9];
-  const handleItemMouseLeave = t5;
-  let t6, t7;
-  $[10] !== activeIndex || $[11] !== rootElementRef || $[12] !== shouldFocus ? (t6 = () => {
-    if (!rootElementRef.current)
-      return;
+  }, [rootElementRef, setActiveIndex]);
+  return react.useEffect(() => {
+    if (!rootElementRef.current) return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === "first") {
-          const el_3 = _getFocusableElements(elementsRef.current)[0];
-          if (el_3) {
-            const currentIndex_4 = elementsRef.current.indexOf(el_3);
-            setActiveIndex(currentIndex_4);
+          const el = _getFocusableElements(elementsRef.current)[0];
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el);
+            setActiveIndex(currentIndex);
           }
         }
         if (shouldFocus === "last") {
-          const focusableElements_4 = _getFocusableElements(elementsRef.current), el_4 = focusableElements_4[focusableElements_4.length - 1];
-          if (el_4) {
-            const currentIndex_5 = elementsRef.current.indexOf(el_4);
-            setActiveIndex(currentIndex_5);
+          const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
+          if (el) {
+            const currentIndex = elementsRef.current.indexOf(el);
+            setActiveIndex(currentIndex);
           }
         }
         return;
@@ -5073,83 +4334,61 @@ function useMenuController(props) {
       (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
-  }, t7 = [activeIndex, rootElementRef, setActiveIndex, shouldFocus], $[10] = activeIndex, $[11] = rootElementRef, $[12] = shouldFocus, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), react.useEffect(t6, t7);
-  let t8;
-  return $[15] !== activeElement || $[16] !== activeIndex || $[17] !== handleItemMouseLeave || $[18] !== handleKeyDown || $[19] !== mount ? (t8 = {
+  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus]), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  }, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t8) : t8 = $[20], t8;
-}
-function _temp$1() {
+  };
 }
 const StyledMenu = styledComponents.styled(Box).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-xt0tnv-0"
 })`outline:none;overflow:auto;`, Menu = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(49);
-  let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
-  if ($[0] !== props) {
-    const {
-      children: t22,
-      focusFirst,
-      focusLast,
-      onClickOutside: t32,
-      onEscape: t42,
-      onItemClick: t52,
-      onItemSelect: t62,
-      onKeyDown: t72,
-      originElement: t82,
-      padding: t92,
-      registerElement: t102,
-      shouldFocus: t112,
-      space: t122,
-      ...t13
-    } = props;
-    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, t1 = t122, restProps = t13, $[0] = props, $[1] = _shouldFocus, $[2] = children, $[3] = onClickOutside, $[4] = onEscape, $[5] = onItemClick, $[6] = onItemSelect, $[7] = onKeyDown, $[8] = originElement, $[9] = registerElement, $[10] = restProps, $[11] = t0, $[12] = t1;
-  } else
-    _shouldFocus = $[1], children = $[2], onClickOutside = $[3], onEscape = $[4], onItemClick = $[5], onItemSelect = $[6], onKeyDown = $[7], originElement = $[8], registerElement = $[9], restProps = $[10], t0 = $[11], t1 = $[12];
-  const padding = t0 === void 0 ? 1 : t0, space = t1 === void 0 ? 1 : t1, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = react.useRef(null);
-  let t2;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[13] = t2) : t2 = $[13], react.useImperativeHandle(forwardedRef, t2);
   const {
-    isTopLayer
-  } = useLayer();
-  let t3;
-  $[14] !== onKeyDown || $[15] !== originElement || $[16] !== shouldFocus ? (t3 = {
+    children,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusFirst,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusLast,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemSelect,
     onKeyDown,
     originElement,
-    shouldFocus,
-    rootElementRef: ref
-  }, $[14] = onKeyDown, $[15] = originElement, $[16] = shouldFocus, $[17] = t3) : t3 = $[17];
+    padding = 1,
+    registerElement,
+    shouldFocus: _shouldFocus,
+    space = 1,
+    ...restProps
+  } = props, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = react.useRef(null);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
   const {
+    isTopLayer
+  } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  } = useMenuController(t3), unregisterElementRef = react.useRef(null);
-  let t4;
-  $[18] !== registerElement ? (t4 = (el) => {
+  } = useMenuController({
+    onKeyDown,
+    originElement,
+    shouldFocus,
+    rootElementRef: ref
+  }), unregisterElementRef = react.useRef(null), handleRefChange = react.useCallback((el) => {
     unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-  }, $[18] = registerElement, $[19] = t4) : t4 = $[19];
-  const handleRefChange = t4;
-  let t5, t6;
-  $[20] !== activeIndex || $[21] !== onItemSelect ? (t5 = () => {
+  }, [registerElement]);
+  react.useEffect(() => {
     onItemSelect && onItemSelect(activeIndex);
-  }, t6 = [activeIndex, onItemSelect], $[20] = activeIndex, $[21] = onItemSelect, $[22] = t5, $[23] = t6) : (t5 = $[22], t6 = $[23]), react.useEffect(t5, t6);
-  let t7;
-  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [ref.current], $[24] = t7) : t7 = $[24], useClickOutsideEvent(isTopLayer && onClickOutside, t7);
-  let t8;
-  $[25] !== isTopLayer || $[26] !== onEscape ? (t8 = (event) => {
+  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(react.useCallback((event) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-  }, $[25] = isTopLayer, $[26] = onEscape, $[27] = t8) : t8 = $[27], useGlobalKeyDown(t8);
-  let t9;
-  $[28] !== activeElement || $[29] !== handleItemMouseEnter || $[30] !== handleItemMouseLeave || $[31] !== mount || $[32] !== onClickOutside || $[33] !== onEscape || $[34] !== onItemClick || $[35] !== registerElement ? (t9 = {
+  }, [isTopLayer, onEscape]));
+  const value = react.useMemo(() => ({
     version: 2,
     activeElement,
     mount,
@@ -5159,14 +4398,8 @@ const StyledMenu = styledComponents.styled(Box).withConfig({
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement
-  }, $[28] = activeElement, $[29] = handleItemMouseEnter, $[30] = handleItemMouseLeave, $[31] = mount, $[32] = onClickOutside, $[33] = onEscape, $[34] = onItemClick, $[35] = registerElement, $[36] = t9) : t9 = $[36];
-  const value = t9;
-  let t10;
-  $[37] !== children || $[38] !== space ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }), $[37] = children, $[38] = space, $[39] = t10) : t10 = $[39];
-  let t11;
-  $[40] !== handleKeyDown || $[41] !== handleRefChange || $[42] !== padding || $[43] !== restProps || $[44] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t10 }), $[40] = handleKeyDown, $[41] = handleRefChange, $[42] = padding, $[43] = restProps, $[44] = t10, $[45] = t11) : t11 = $[45];
-  let t12;
-  return $[46] !== t11 || $[47] !== value ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t11 }), $[46] = t11, $[47] = value, $[48] = t12) : t12 = $[48], t12;
+  }), [activeElement, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(StyledMenu, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }) }) });
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuDivider = styledComponents.styled.hr.withConfig({
@@ -5288,24 +4521,21 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const $ = reactCompilerRuntime.c(79);
-  let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
-  $[0] !== props ? ({
-    as: t0,
+  const {
+    as = "button",
     children,
-    fontSize: t1,
+    fontSize: fontSize2 = 1,
     icon: IconComponent,
     menu: menuProps,
     onClick,
-    padding: t2,
+    padding = 3,
     popover,
-    radius: t3,
-    space: t4,
+    radius = 2,
+    space = 3,
     text,
-    tone: t5,
+    tone = "default",
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = menuProps, $[4] = onClick, $[5] = popover, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = text) : (IconComponent = $[1], children = $[2], menuProps = $[3], onClick = $[4], popover = $[5], restProps = $[6], t0 = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], text = $[13]);
-  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
+  } = props, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
     activeElement,
@@ -5315,97 +4545,54 @@ function MenuGroup(props) {
     onItemClick,
     onItemMouseEnter: _onItemMouseEnter,
     registerElement
-  } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1);
-  let t6;
-  $[14] !== onItemMouseEnter ? (t6 = (event) => {
+  } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback((event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, $[14] = onItemMouseEnter, $[15] = t6) : t6 = $[15];
-  const handleMouseEnter = t6;
-  let t7;
-  $[16] !== rootElement ? (t7 = (event_0) => {
-    event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
+  }, [onItemMouseEnter]), handleMenuKeyDown = react.useCallback((event) => {
+    event.key === "ArrowLeft" && (event.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, $[16] = rootElement, $[17] = t7) : t7 = $[17];
-  const handleMenuKeyDown = t7;
-  let t8;
-  $[18] !== onClick ? (t8 = (event_1) => {
-    onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, $[18] = onClick, $[19] = t8) : t8 = $[19];
-  const handleClick = t8;
-  let t9;
-  $[20] !== onItemClick ? (t9 = () => {
+  }, [rootElement]), handleClick = react.useCallback((event) => {
+    onClick?.(event), setShouldFocus("first"), setOpen(!0);
+  }, [onClick]), handleChildItemClick = react.useCallback(() => {
     setOpen(!1), onItemClick?.();
-  }, $[20] = onItemClick, $[21] = t9) : t9 = $[21];
-  const handleChildItemClick = t9;
-  let t10;
-  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[22] = t10) : t10 = $[22];
-  const handleMenuMouseEnter = t10;
-  let t11, t12;
-  $[23] !== mount || $[24] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[23] = mount, $[24] = rootElement, $[25] = t11, $[26] = t12) : (t11 = $[25], t12 = $[26]), react.useEffect(t11, t12);
-  let t13, t14;
-  $[27] !== active ? (t13 = () => {
+  }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
+  react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
     active || setOpen(!1);
-  }, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14) : (t13 = $[28], t14 = $[29]), react.useEffect(t13, t14);
-  let t15, t16;
-  $[30] !== open ? (t15 = () => {
+  }, [active]), react.useEffect(() => {
     open || setWithinMenu(!1);
-  }, t16 = [open], $[30] = open, $[31] = t15, $[32] = t16) : (t15 = $[31], t16 = $[32]), react.useEffect(t15, t16);
-  let t17, t18;
-  $[33] !== shouldFocus ? (t17 = () => {
-    if (!shouldFocus)
-      return;
+  }, [open]), react.useEffect(() => {
+    if (!shouldFocus) return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, t18 = [shouldFocus], $[33] = shouldFocus, $[34] = t17, $[35] = t18) : (t17 = $[34], t18 = $[35]), react.useEffect(t17, t18);
-  let t19;
-  $[36] !== children || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== menuProps || $[40] !== onClickOutside || $[41] !== onEscape || $[42] !== registerElement || $[43] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[36] = children, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = menuProps, $[40] = onClickOutside, $[41] = onEscape, $[42] = registerElement, $[43] = shouldFocus, $[44] = t19) : t19 = $[44];
-  const childMenu = t19;
-  let t20;
-  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
-    const target = event_2.currentTarget;
-    if (document.activeElement === target && event_2.key === "ArrowRight") {
+  }, [shouldFocus]);
+  const childMenu = /* @__PURE__ */ jsxRuntime.jsx(Menu, { ...menuProps, onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), handleKeyDown = react.useCallback((event) => {
+    const target = event.currentTarget;
+    if (document.activeElement === target && event.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       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;
-  let t26;
-  $[46] !== IconComponent || $[47] !== 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];
-  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];
-  let t28;
-  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[52] = t28) : t28 = $[52];
-  let t29;
-  $[53] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[53] = fontSize2, $[54] = t29) : t29 = $[54];
-  let t30;
-  $[55] !== padding || $[56] !== space || $[57] !== t26 || $[58] !== t27 || $[59] !== 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];
-  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];
-  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 /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": as === "button" ? withinMenu : void 0, "data-pressed": as !== "button" ? withinMenu : void 0, "data-selected": !withinMenu && active ? "" : void 0, $radius: _getArrayProp(radius), $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}) })
+  ] }) }) });
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(73);
-  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,
+  const {
+    as = "button",
     children,
     disabled,
-    fontSize: t1,
+    fontSize: fontSize2 = 1,
     hotkeys,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClick,
-    padding: t2,
+    padding = 3,
     paddingX,
     paddingY,
     paddingTop,
@@ -5413,14 +4600,13 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingBottom,
     paddingLeft,
     pressed,
-    radius: t3,
+    radius = 2,
     selected: selectedProp,
-    space: t4,
+    space = 3,
     text,
-    tone: t5,
+    tone = "default",
     ...restProps
-  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = hotkeys, $[6] = onClick, $[7] = paddingBottom, $[8] = paddingLeft, $[9] = paddingRight, $[10] = paddingTop, $[11] = paddingX, $[12] = paddingY, $[13] = pressed, $[14] = restProps, $[15] = selectedProp, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = text) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], hotkeys = $[5], onClick = $[6], paddingBottom = $[7], paddingLeft = $[8], paddingRight = $[9], paddingTop = $[10], paddingX = $[11], paddingY = $[12], pressed = $[13], restProps = $[14], selectedProp = $[15], t0 = $[16], t1 = $[17], t2 = $[18], t3 = $[19], t4 = $[20], t5 = $[21], text = $[22]);
-  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, {
+  } = props, {
     scheme
   } = useRootTheme(), menu = useMenu(), {
     activeElement,
@@ -5429,17 +4615,10 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     onItemMouseEnter: _onItemMouseEnter,
     onItemMouseLeave: _onItemMouseLeave
   } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onItemMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onItemMouseLeave, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
-  let t6;
-  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[23] = t6) : t6 = $[23], react.useImperativeHandle(forwardedRef, t6);
-  let t7, t8;
-  $[24] !== mount || $[25] !== rootElement || $[26] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [mount, rootElement, selectedProp], $[24] = mount, $[25] = rootElement, $[26] = selectedProp, $[27] = t7, $[28] = t8) : (t7 = $[27], t8 = $[28]), react.useEffect(t7, t8);
-  let t9;
-  $[29] !== disabled || $[30] !== onClick || $[31] !== onItemClick ? (t9 = (event) => {
+  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
+  const handleClick = react.useCallback((event) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, $[29] = disabled, $[30] = onClick, $[31] = onItemClick, $[32] = t9) : t9 = $[32];
-  const handleClick = t9;
-  let t10;
-  $[33] !== padding || $[34] !== paddingBottom || $[35] !== paddingLeft || $[36] !== paddingRight || $[37] !== paddingTop || $[38] !== paddingX || $[39] !== paddingY ? (t10 = {
+  }, [disabled, onClick, onItemClick]), paddingProps = react.useMemo(() => ({
     padding,
     paddingX,
     paddingY,
@@ -5447,114 +4626,71 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingRight,
     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);
-  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) => {
+  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = _getArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((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: [
-    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      react.isValidElement(IconComponent) && IconComponent,
-      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": as !== "button" && pressed ? "" : void 0, "data-selected": active ? "" : void 0, "data-disabled": disabled ? "" : void 0, forwardedAs: as, $radius: _getArrayProp(radius), $padding: _getArrayProp(0), $tone: disabled ? "default" : tone, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: as === "button" ? "button" : void 0, children: [
+    (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, {})
+      ] }),
+      text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+      hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
+        marginTop: -4,
+        marginBottom: -4
+      } }),
+      IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+        react.isValidElement(IconRightComponent) && IconRightComponent,
+        ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+      ] })
     ] }),
-    text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-    hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
-      marginTop: -4,
-      marginBottom: -4
-    } }),
-    IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      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];
-  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;
+    children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children })
+  ] });
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
-function _temp(s) {
-  return s - 1;
-}
 const CustomButton = styledComponents.styled(Button).withConfig({
   displayName: "CustomButton",
   componentId: "sc-1kns779-0"
 })`max-width:100%;`, Tab = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(30);
-  let focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
-  $[0] !== props ? ({
+  const {
     icon,
     id,
     focused,
-    fontSize: t0,
+    fontSize: fontSize2 = 1,
     label,
     onClick,
     onFocus,
-    padding: t1,
+    padding = 2,
     selected,
     ...restProps
-  } = props, $[0] = props, $[1] = focused, $[2] = icon, $[3] = id, $[4] = label, $[5] = onClick, $[6] = onFocus, $[7] = restProps, $[8] = selected, $[9] = t0, $[10] = t1) : (focused = $[1], icon = $[2], id = $[3], label = $[4], onClick = $[5], onFocus = $[6], restProps = $[7], selected = $[8], t0 = $[9], t1 = $[10]);
-  const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 2 : t1, ref = react.useRef(null), focusedRef = react.useRef(!1);
-  let t2;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[11] = t2) : t2 = $[11], react.useImperativeHandle(forwardedRef, t2);
-  let t3;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
+  } = props, ref = react.useRef(null), focusedRef = react.useRef(!1);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const handleBlur = react.useCallback(() => {
     focusedRef.current = !1;
-  }, $[12] = t3) : t3 = $[12];
-  const handleBlur = t3;
-  let t4;
-  $[13] !== onFocus ? (t4 = (event) => {
+  }, []), handleFocus = react.useCallback((event) => {
     focusedRef.current = !0, onFocus && onFocus(event);
-  }, $[13] = onFocus, $[14] = t4) : t4 = $[14];
-  const handleFocus = t4;
-  let t5, t6;
-  $[15] !== focused ? (t5 = () => {
+  }, [onFocus]);
+  return react.useEffect(() => {
     focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
-  }, t6 = [focused], $[15] = focused, $[16] = t5, $[17] = t6) : (t5 = $[16], t6 = $[17]), react.useEffect(t5, t6);
-  const t7 = selected ? "true" : "false", t8 = selected ? 0 : -1;
-  let t9;
-  return $[18] !== fontSize2 || $[19] !== handleFocus || $[20] !== icon || $[21] !== id || $[22] !== label || $[23] !== onClick || $[24] !== padding || $[25] !== restProps || $[26] !== selected || $[27] !== t7 || $[28] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(CustomButton, { "data-ui": "Tab", ...restProps, "aria-selected": t7, fontSize: fontSize2, icon, id, mode: "bleed", onClick, onBlur: handleBlur, onFocus: handleFocus, padding, ref, role: "tab", selected, tabIndex: t8, text: label, type: "button" }), $[18] = fontSize2, $[19] = handleFocus, $[20] = icon, $[21] = id, $[22] = label, $[23] = onClick, $[24] = padding, $[25] = restProps, $[26] = selected, $[27] = t7, $[28] = t8, $[29] = t9) : t9 = $[29], t9;
+  }, [focused]), /* @__PURE__ */ jsxRuntime.jsx(CustomButton, { "data-ui": "Tab", ...restProps, "aria-selected": selected ? "true" : "false", fontSize: fontSize2, icon, id, mode: "bleed", onClick, onBlur: handleBlur, onFocus: handleFocus, padding, ref, role: "tab", selected, tabIndex: selected ? 0 : -1, text: label, type: "button" });
 });
 Tab.displayName = "ForwardRef(Tab)";
 const CustomInline = styledComponents.styled(Inline).withConfig({
   displayName: "CustomInline",
   componentId: "sc-5cm04m-0"
 })`& > div{display:inline-block;vertical-align:middle;max-width:100%;box-sizing:border-box;}`, TabList = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(15);
-  let childrenProp, restProps;
-  $[0] !== props ? ({
+  const {
     children: childrenProp,
     ...restProps
-  } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps) : (childrenProp = $[1], restProps = $[2]);
-  const [focusedIndex, setFocusedIndex] = react.useState(-1);
-  let t0;
-  if ($[3] !== childrenProp || $[4] !== focusedIndex) {
-    const children = react.Children.toArray(childrenProp).filter(react.isValidElement);
-    let t12;
-    $[6] !== focusedIndex ? (t12 = (child, childIndex) => react.cloneElement(child, {
-      focused: focusedIndex === childIndex,
-      key: childIndex,
-      onFocus: () => setFocusedIndex(childIndex)
-    }), $[6] = focusedIndex, $[7] = t12) : t12 = $[7], t0 = children.map(t12), $[3] = childrenProp, $[4] = focusedIndex, $[5] = t0;
-  } else
-    t0 = $[5];
-  const tabs = t0, numTabs = tabs.length;
-  let t1;
-  $[8] !== numTabs ? (t1 = (event) => {
-    event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
-  }, $[8] = numTabs, $[9] = t1) : t1 = $[9];
-  const handleKeyDown = t1;
-  let t2;
-  return $[10] !== handleKeyDown || $[11] !== ref || $[12] !== restProps || $[13] !== tabs ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs }), $[10] = handleKeyDown, $[11] = ref, $[12] = restProps, $[13] = tabs, $[14] = t2) : t2 = $[14], t2;
+  } = props, [focusedIndex, setFocusedIndex] = react.useState(-1), tabs = react.Children.toArray(childrenProp).filter(react.isValidElement).map((child, childIndex) => react.cloneElement(child, {
+    focused: focusedIndex === childIndex,
+    key: childIndex,
+    onFocus: () => setFocusedIndex(childIndex)
+  })), numTabs = tabs.length, handleKeyDown = react.useCallback((event) => {
+    event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex) => (prevIndex + 1) % numTabs);
+  }, [numTabs]);
+  return /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs });
 });
 TabList.displayName = "ForwardRef(TabList)";
 exports.Arrow = Arrow;
@@ -5642,7 +4778,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;