@sanity/ui 3.0.15-canary.0 → 3.1.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"), 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"), 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");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -207,15 +207,42 @@ function createGlobalScopedContext(key2, defaultValue) {
 }
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
 function ThemeProvider(props) {
-  const parentTheme = react.useContext(ThemeContext), {
+  const $ = reactCompilerRuntime.c(15), parentTheme = react.useContext(ThemeContext), {
     children
-  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default"), 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' });
+  } = 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;
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
@@ -225,19 +252,22 @@ function useRootTheme() {
   return value;
 }
 function ThemeColorProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(5), {
     children,
     scheme,
     tone
-  } = props, root = useRootTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: scheme || root.scheme, theme: root.theme, tone, children });
+  } = 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;
 }
 ThemeColorProvider.displayName = "ThemeColorProvider";
 function useTheme() {
   return styledComponents.useTheme();
 }
 function useTheme_v2() {
-  return theme.getTheme_v2(styledComponents.useTheme());
+  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 responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
@@ -952,18 +982,33 @@ const StyledLabel = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledLabel",
   componentId: "sc-1luap7z-0"
 })(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle), Label = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(26);
+  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
+  $[0] !== props ? ({
     accent,
     align,
     children: childrenProp,
-    muted = !1,
-    size: size2 = 2,
+    muted: t0,
+    size: t1,
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
+  const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
   let children = childrenProp;
-  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 });
+  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;
+  }
+  let t2;
+  $[13] !== align ? (t2 = _getArrayProp(align), $[13] = align, $[14] = t2) : t2 = $[14];
+  let t3;
+  $[15] !== size2 ? (t3 = _getArrayProp(size2), $[15] = size2, $[16] = t3) : t3 = $[16];
+  let t4;
+  return $[17] !== accent || $[18] !== children || $[19] !== muted || $[20] !== ref || $[21] !== restProps || $[22] !== t2 || $[23] !== t3 || $[24] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[17] = accent, $[18] = children, $[19] = muted, $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3, $[24] = weight, $[25] = t4) : t4 = $[25], t4;
 });
 Label.displayName = "ForwardRef(Label)";
 const avatarStyle = {
@@ -1133,44 +1178,62 @@ const StyledAvatar = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "AvatarImage",
   componentId: "sc-1rj7kl0-6"
 })(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(46);
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
+  $[0] !== props ? ({
     __unstable_hideInnerStroke,
     as: asProp,
-    color = "gray",
+    color: t0,
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status = "online",
-    size: sizeProp = 1,
+    status: t1,
+    size: t2,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = restProps, $[8] = src, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], restProps = $[7], src = $[8], t0 = $[9], t1 = $[10], t2 = $[11], title = $[12]);
+  const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
     avatar
   } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = _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;
+  let t3, t4;
+  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
+    if (arrowPosition === arrowPositionProp)
+      return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, [arrowPosition, arrowPositionProp]), react.useEffect(() => {
+  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), react.useEffect(t3, t4);
+  let t5, t6;
+  $[17] !== src ? (t5 = () => {
     src && setImageFailed(!1);
-  }, [src]);
-  const handleImageError = react.useCallback(() => {
+  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), react.useEffect(t5, t6);
+  let t7;
+  $[20] !== onImageLoadError ? (t7 = () => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, [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 }) }) })
-  ] });
+  }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
+  const handleImageError = t7, T0 = StyledAvatar, t8 = typeof as == "string" ? as : void 0, t9 = "Avatar";
+  let t10;
+  $[22] !== color ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[22] = color, $[23] = t10) : t10 = $[23];
+  let t11;
+  $[24] !== __unstable_hideInnerStroke || $[25] !== _radius || $[26] !== _sizeRem || $[27] !== handleImageError || $[28] !== imageFailed || $[29] !== imageId || $[30] !== src ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(AvatarImage, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
+    !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
+  ] }), $[24] = __unstable_hideInnerStroke, $[25] = _radius, $[26] = _sizeRem, $[27] = handleImageError, $[28] = imageFailed, $[29] = imageId, $[30] = src, $[31] = t11) : t11 = $[31];
+  const t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: size2.map(_temp$a), weight: "medium", children: initials }) }) });
+  let t13;
+  return $[32] !== T0 || $[33] !== arrowPosition || $[34] !== as || $[35] !== color || $[36] !== ref || $[37] !== restProps || $[38] !== size2 || $[39] !== status || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t8 || $[44] !== title ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { as, "data-as": t8, "data-ui": t9, ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+    t10,
+    t11,
+    t12
+  ] }), $[32] = T0, $[33] = arrowPosition, $[34] = as, $[35] = color, $[36] = ref, $[37] = restProps, $[38] = size2, $[39] = status, $[40] = t10, $[41] = t11, $[42] = t12, $[43] = t8, $[44] = title, $[45] = t13) : t13 = $[45], t13;
 });
 Avatar.displayName = "ForwardRef(Avatar)";
+function _temp$a(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -1211,13 +1274,25 @@ const StyledAvatarCounter = /* @__PURE__ */ styledComponents.styled.div.withConf
   displayName: "StyledAvatarCounter",
   componentId: "sc-1ydx86y-0"
 })(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(20), {
     count,
-    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 }) });
+    size: t0
+  } = props, sizeProp = t0 === void 0 ? 1 : t0;
+  let T0, T1, t1, t2, t3, t4, t5;
+  if ($[0] !== ref || $[1] !== sizeProp) {
+    const size2 = _getArrayProp(sizeProp);
+    T1 = StyledAvatarCounter, t3 = size2, t4 = "AvatarCounter", t5 = ref, T0 = Label, t1 = "span", t2 = size2.map(_temp$9), $[0] = ref, $[1] = sizeProp, $[2] = T0, $[3] = T1, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5;
+  } else
+    T0 = $[2], T1 = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8];
+  let t6;
+  $[9] !== T0 || $[10] !== count || $[11] !== t1 || $[12] !== t2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(T0, { as: t1, size: t2, weight: "medium", children: count }), $[9] = T0, $[10] = count, $[11] = t1, $[12] = t2, $[13] = t6) : t6 = $[13];
+  let t7;
+  return $[14] !== T1 || $[15] !== t3 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(T1, { $size: t3, "data-ui": t4, ref: t5, children: t6 }), $[14] = T1, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
+function _temp$9(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
 const BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
@@ -1250,34 +1325,51 @@ const StyledAvatarStack = /* @__PURE__ */ styledComponents.styled.div.withConfig
   displayName: "StyledAvatarStack",
   componentId: "sc-cysmbb-0"
 })(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(38);
+  let childrenProp, restProps, t0, t1;
+  $[0] !== props ? ({
     children: childrenProp,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 1,
+    maxLength: t0,
+    size: t1,
     ...restProps
-  } = 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, {
+  } = 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;
+  let T0, t2, t3, t4, t5, t6, t7, t8;
+  if ($[5] !== childrenProp || $[6] !== maxLengthProp || $[7] !== ref || $[8] !== restProps || $[9] !== sizeProp) {
+    const children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0);
+    let t92;
+    $[18] !== sizeProp ? (t92 = _getArrayProp(sizeProp), $[18] = sizeProp, $[19] = t92) : t92 = $[19];
+    const size2 = t92, len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+    T0 = StyledAvatarStack, t2 = "AvatarStack", t3 = restProps, t4 = ref, t5 = size2, $[20] !== len || $[21] !== size2 ? (t6 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), $[20] = len, $[21] = size2, $[22] = t6) : t6 = $[22], $[23] !== extraCount || $[24] !== len || $[25] !== size2 ? (t7 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }), $[23] = extraCount, $[24] = len, $[25] = size2, $[26] = t7) : t7 = $[26];
+    let t10;
+    $[27] !== size2 ? (t10 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
       size: size2
-    }) }, String(childIndex)))
-  ] });
+    }) }, String(childIndex)), $[27] = size2, $[28] = t10) : t10 = $[28], t8 = visibleChildren.map(t10), $[5] = childrenProp, $[6] = maxLengthProp, $[7] = ref, $[8] = restProps, $[9] = sizeProp, $[10] = T0, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8;
+  } else
+    T0 = $[10], t2 = $[11], t3 = $[12], t4 = $[13], t5 = $[14], t6 = $[15], t7 = $[16], t8 = $[17];
+  let t9;
+  return $[29] !== T0 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...t3, ref: t4, $size: t5, children: [
+    t6,
+    t7,
+    t8
+  ] }), $[29] = T0, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = t9) : t9 = $[37], t9;
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledBox",
   componentId: "sc-1hhky9f-0"
 })(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
-  const {
-    as: asProp = "div",
+  const $ = reactCompilerRuntime.c(109);
+  let column, columnEnd, columnStart, flex, height, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, overflow, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, restProps, row, rowEnd, rowStart, sizing, t0, t1, t2, t3;
+  $[0] !== props ? ({
+    as: t0,
     column,
     columnStart,
     columnEnd,
-    display = "block",
+    display: t1,
     flex,
     height,
-    margin = 0,
+    margin: t2,
     marginX,
     marginY,
     marginTop,
@@ -1285,7 +1377,7 @@ const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     marginBottom,
     marginLeft,
     overflow,
-    padding = 0,
+    padding: t3,
     paddingX,
     paddingY,
     paddingTop,
@@ -1297,8 +1389,60 @@ const StyledBox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     rowEnd,
     sizing,
     ...restProps
-  } = 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 });
+  } = 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;
+  let t5;
+  $[28] !== column ? (t5 = _getArrayProp(column), $[28] = column, $[29] = t5) : t5 = $[29];
+  let t6;
+  $[30] !== columnStart ? (t6 = _getArrayProp(columnStart), $[30] = columnStart, $[31] = t6) : t6 = $[31];
+  let t7;
+  $[32] !== columnEnd ? (t7 = _getArrayProp(columnEnd), $[32] = columnEnd, $[33] = t7) : t7 = $[33];
+  let t8;
+  $[34] !== display ? (t8 = _getArrayProp(display), $[34] = display, $[35] = t8) : t8 = $[35];
+  let t9;
+  $[36] !== flex ? (t9 = _getArrayProp(flex), $[36] = flex, $[37] = t9) : t9 = $[37];
+  let t10;
+  $[38] !== height ? (t10 = _getArrayProp(height), $[38] = height, $[39] = t10) : t10 = $[39];
+  let t11;
+  $[40] !== margin ? (t11 = _getArrayProp(margin), $[40] = margin, $[41] = t11) : t11 = $[41];
+  let t12;
+  $[42] !== marginX ? (t12 = _getArrayProp(marginX), $[42] = marginX, $[43] = t12) : t12 = $[43];
+  let t13;
+  $[44] !== marginY ? (t13 = _getArrayProp(marginY), $[44] = marginY, $[45] = t13) : t13 = $[45];
+  let t14;
+  $[46] !== marginTop ? (t14 = _getArrayProp(marginTop), $[46] = marginTop, $[47] = t14) : t14 = $[47];
+  let t15;
+  $[48] !== marginRight ? (t15 = _getArrayProp(marginRight), $[48] = marginRight, $[49] = t15) : t15 = $[49];
+  let t16;
+  $[50] !== marginBottom ? (t16 = _getArrayProp(marginBottom), $[50] = marginBottom, $[51] = t16) : t16 = $[51];
+  let t17;
+  $[52] !== marginLeft ? (t17 = _getArrayProp(marginLeft), $[52] = marginLeft, $[53] = t17) : t17 = $[53];
+  let t18;
+  $[54] !== overflow ? (t18 = _getArrayProp(overflow), $[54] = overflow, $[55] = t18) : t18 = $[55];
+  let t19;
+  $[56] !== padding ? (t19 = _getArrayProp(padding), $[56] = padding, $[57] = t19) : t19 = $[57];
+  let t20;
+  $[58] !== paddingX ? (t20 = _getArrayProp(paddingX), $[58] = paddingX, $[59] = t20) : t20 = $[59];
+  let t21;
+  $[60] !== paddingY ? (t21 = _getArrayProp(paddingY), $[60] = paddingY, $[61] = t21) : t21 = $[61];
+  let t22;
+  $[62] !== paddingTop ? (t22 = _getArrayProp(paddingTop), $[62] = paddingTop, $[63] = t22) : t22 = $[63];
+  let t23;
+  $[64] !== paddingRight ? (t23 = _getArrayProp(paddingRight), $[64] = paddingRight, $[65] = t23) : t23 = $[65];
+  let t24;
+  $[66] !== paddingBottom ? (t24 = _getArrayProp(paddingBottom), $[66] = paddingBottom, $[67] = t24) : t24 = $[67];
+  let t25;
+  $[68] !== paddingLeft ? (t25 = _getArrayProp(paddingLeft), $[68] = paddingLeft, $[69] = t25) : t25 = $[69];
+  let t26;
+  $[70] !== row ? (t26 = _getArrayProp(row), $[70] = row, $[71] = t26) : t26 = $[71];
+  let t27;
+  $[72] !== rowStart ? (t27 = _getArrayProp(rowStart), $[72] = rowStart, $[73] = t27) : t27 = $[73];
+  let t28;
+  $[74] !== rowEnd ? (t28 = _getArrayProp(rowEnd), $[74] = rowEnd, $[75] = t28) : t28 = $[75];
+  let t29;
+  $[76] !== sizing ? (t29 = _getArrayProp(sizing), $[76] = sizing, $[77] = t29) : t29 = $[77];
+  let t30;
+  return $[78] !== asProp || $[79] !== props.children || $[80] !== ref || $[81] !== restProps || $[82] !== t10 || $[83] !== t11 || $[84] !== t12 || $[85] !== t13 || $[86] !== t14 || $[87] !== t15 || $[88] !== t16 || $[89] !== t17 || $[90] !== t18 || $[91] !== t19 || $[92] !== t20 || $[93] !== t21 || $[94] !== t22 || $[95] !== t23 || $[96] !== t24 || $[97] !== t25 || $[98] !== t26 || $[99] !== t27 || $[100] !== t28 || $[101] !== t29 || $[102] !== t4 || $[103] !== t5 || $[104] !== t6 || $[105] !== t7 || $[106] !== t8 || $[107] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.jsx(StyledBox, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[78] = asProp, $[79] = props.children, $[80] = ref, $[81] = restProps, $[82] = t10, $[83] = t11, $[84] = t12, $[85] = t13, $[86] = t14, $[87] = t15, $[88] = t16, $[89] = t17, $[90] = t18, $[91] = t19, $[92] = t20, $[93] = t21, $[94] = t22, $[95] = t23, $[96] = t24, $[97] = t25, $[98] = t26, $[99] = t27, $[100] = t28, $[101] = t29, $[102] = t4, $[103] = t5, $[104] = t6, $[105] = t7, $[106] = t8, $[107] = t9, $[108] = t30) : t30 = $[108], t30;
 });
 Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
@@ -1373,18 +1517,32 @@ const StyledText = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledText",
   componentId: "sc-11ov82j-0"
 })(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle), Text = react.forwardRef(function(props, ref) {
-  const {
-    accent = !1,
+  const $ = reactCompilerRuntime.c(26);
+  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
+  $[0] !== props ? ({
+    accent: t0,
     align,
     children: childrenProp,
-    muted = !1,
-    size: size2 = 2,
+    muted: t1,
+    size: t2,
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
+  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
   let children = childrenProp;
-  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 }) });
+  if (textOverflow === "ellipsis") {
+    let t32;
+    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+  }
+  let t3;
+  $[11] !== align ? (t3 = _getArrayProp(align), $[11] = align, $[12] = t3) : t3 = $[12];
+  let t4;
+  $[13] !== size2 ? (t4 = _getArrayProp(size2), $[13] = size2, $[14] = t4) : t4 = $[14];
+  let t5;
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[15] = children, $[16] = t5) : t5 = $[16];
+  let t6;
+  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledText, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
 Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
@@ -1406,33 +1564,60 @@ const StyledBadge = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledBadge",
   componentId: "sc-5u140l-0"
 })(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
-  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 }) });
+  const $ = reactCompilerRuntime.c(21);
+  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;
+  let t4;
+  $[7] !== radius ? (t4 = _getArrayProp(radius), $[7] = radius, $[8] = t4) : t4 = $[8];
+  let t5;
+  $[9] !== padding ? (t5 = _getArrayProp(padding), $[9] = padding, $[10] = t5) : t5 = $[10];
+  let t6;
+  $[11] !== children || $[12] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[11] = children, $[12] = fontSize2, $[13] = t6) : t6 = $[13];
+  let t7;
+  return $[14] !== ref || $[15] !== restProps || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(StyledBadge, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[14] = ref, $[15] = restProps, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = tone, $[20] = t7) : t7 = $[20], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
 const StyledFlex = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledFlex",
   componentId: "sc-oxesg3-0"
 })(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(27);
+  let align, as, gap, justify, restProps, t0, wrap;
+  $[0] !== props ? ({
     align,
     as,
-    direction = "row",
+    direction: t0,
     gap,
     justify,
     wrap,
     ...restProps
-  } = 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 });
+  } = 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;
+  let t1;
+  $[8] !== align ? (t1 = _getArrayProp(align), $[8] = align, $[9] = t1) : t1 = $[9];
+  let t2;
+  $[10] !== direction ? (t2 = _getArrayProp(direction), $[10] = direction, $[11] = t2) : t2 = $[11];
+  let t3;
+  $[12] !== gap ? (t3 = _getArrayProp(gap), $[12] = gap, $[13] = t3) : t3 = $[13];
+  let t4;
+  $[14] !== justify ? (t4 = _getArrayProp(justify), $[14] = justify, $[15] = t4) : t4 = $[15];
+  let t5;
+  $[16] !== wrap ? (t5 = _getArrayProp(wrap), $[16] = wrap, $[17] = t5) : t5 = $[17];
+  let t6;
+  return $[18] !== as || $[19] !== ref || $[20] !== restProps || $[21] !== t1 || $[22] !== t2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledFlex, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[18] = as, $[19] = ref, $[20] = restProps, $[21] = t1, $[22] = t2, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = t6) : t6 = $[26], t6;
 });
 Flex.displayName = "ForwardRef(Flex)";
 const rotate = styledComponents.keyframes`
@@ -1447,7 +1632,11 @@ const rotate = styledComponents.keyframes`
   displayName: "StyledSpinner",
   componentId: "sc-124hnd0-0"
 })`& > span > svg{animation:${rotate} 500ms linear infinite;}`, Spinner = react.forwardRef(function(props, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSpinner, { "data-ui": "Spinner", ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsx(icons.SpinnerIcon, {}) });
+  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;
 });
 Spinner.displayName = "ForwardRef(Spinner)";
 function _cardColorStyle(base, color, checkered = !1) {
@@ -1625,37 +1814,71 @@ 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 {
+  const $ = reactCompilerRuntime.c(86);
+  let IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, textWeight, width;
+  $[0] !== props ? ({
     children,
     disabled,
-    fontSize: fontSize2 = 1,
+    fontSize: t0,
     icon: IconComponent,
     iconRight: IconRightComponent,
-    justify: justifyProp = "center",
+    justify: t1,
     loading,
-    mode = "default",
-    padding: paddingProp = 3,
+    mode: t2,
+    padding: t3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
     paddingTop: paddingTopProp,
     paddingBottom: paddingBottomProp,
     paddingLeft: paddingLeftProp,
     paddingRight: paddingRightProp,
-    radius: radiusProp = 2,
+    radius: t4,
     selected,
-    space: spaceProp = 3,
+    space: t5,
     text,
     textAlign,
     textWeight,
-    tone = "default",
-    type = "button",
-    muted = !1,
+    tone: t6,
+    type: t7,
+    muted: t8,
     width,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = textWeight, $[26] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], restProps = $[12], selected = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], text = $[23], textAlign = $[24], textWeight = $[25], width = $[26]);
+  const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
     button
-  } = useTheme_v2(), justify = _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,
+  } = useTheme_v2();
+  let t9;
+  $[27] !== justifyProp ? (t9 = _getArrayProp(justifyProp), $[27] = justifyProp, $[28] = t9) : t9 = $[28];
+  const justify = t9;
+  let t10;
+  $[29] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[29] = paddingProp, $[30] = t10) : t10 = $[30];
+  const padding = t10;
+  let t11;
+  $[31] !== paddingXProp ? (t11 = _getArrayProp(paddingXProp), $[31] = paddingXProp, $[32] = t11) : t11 = $[32];
+  const paddingX = t11;
+  let t12;
+  $[33] !== paddingYProp ? (t12 = _getArrayProp(paddingYProp), $[33] = paddingYProp, $[34] = t12) : t12 = $[34];
+  const paddingY = t12;
+  let t13;
+  $[35] !== paddingTopProp ? (t13 = _getArrayProp(paddingTopProp), $[35] = paddingTopProp, $[36] = t13) : t13 = $[36];
+  const paddingTop = t13;
+  let t14;
+  $[37] !== paddingBottomProp ? (t14 = _getArrayProp(paddingBottomProp), $[37] = paddingBottomProp, $[38] = t14) : t14 = $[38];
+  const paddingBottom = t14;
+  let t15;
+  $[39] !== paddingLeftProp ? (t15 = _getArrayProp(paddingLeftProp), $[39] = paddingLeftProp, $[40] = t15) : t15 = $[40];
+  const paddingLeft = t15;
+  let t16;
+  $[41] !== paddingRightProp ? (t16 = _getArrayProp(paddingRightProp), $[41] = paddingRightProp, $[42] = t16) : t16 = $[42];
+  const paddingRight = t16;
+  let t17;
+  $[43] !== radiusProp ? (t17 = _getArrayProp(radiusProp), $[43] = radiusProp, $[44] = t17) : t17 = $[44];
+  const radius = t17;
+  let t18;
+  $[45] !== spaceProp ? (t18 = _getArrayProp(spaceProp), $[45] = spaceProp, $[46] = t18) : t18 = $[46];
+  const space = t18;
+  let t19;
+  $[47] !== padding || $[48] !== paddingBottom || $[49] !== paddingLeft || $[50] !== paddingRight || $[51] !== paddingTop || $[52] !== paddingX || $[53] !== paddingY ? (t19 = {
     padding,
     paddingX,
     paddingY,
@@ -1663,22 +1886,30 @@ const StyledButton = /* @__PURE__ */ styledComponents.styled.button.withConfig({
     paddingBottom,
     paddingLeft,
     paddingRight
-  }), [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 })
-  ] });
+  }, $[47] = padding, $[48] = paddingBottom, $[49] = paddingLeft, $[50] = paddingRight, $[51] = paddingTop, $[52] = paddingX, $[53] = paddingY, $[54] = t19) : t19 = $[54];
+  const boxProps = t19, t20 = !!(loading || disabled), t21 = selected ? "" : void 0, t22 = !!(loading || disabled);
+  let t23;
+  $[55] !== loading ? (t23 = !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }), $[55] = loading, $[56] = t23) : t23 = $[56];
+  let t24;
+  $[57] !== IconComponent || $[58] !== IconRightComponent || $[59] !== boxProps || $[60] !== button || $[61] !== fontSize2 || $[62] !== justify || $[63] !== muted || $[64] !== space || $[65] !== text || $[66] !== textAlign || $[67] !== textWeight ? (t24 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+    ] }),
+    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, {})
+    ] })
+  ] }) }), $[57] = IconComponent, $[58] = IconRightComponent, $[59] = boxProps, $[60] = button, $[61] = fontSize2, $[62] = justify, $[63] = muted, $[64] = space, $[65] = text, $[66] = textAlign, $[67] = textWeight, $[68] = t24) : t24 = $[68];
+  let t25;
+  $[69] !== boxProps || $[70] !== children ? (t25 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children }), $[69] = boxProps, $[70] = children, $[71] = t25) : t25 = $[71];
+  let t26;
+  return $[72] !== mode || $[73] !== radius || $[74] !== ref || $[75] !== restProps || $[76] !== t20 || $[77] !== t21 || $[78] !== t22 || $[79] !== t23 || $[80] !== t24 || $[81] !== t25 || $[82] !== tone || $[83] !== type || $[84] !== width ? (t26 = /* @__PURE__ */ jsxRuntime.jsxs(StyledButton, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t20, "data-selected": t21, disabled: t22, ref, type, $width: width, children: [
+    t23,
+    t24,
+    t25
+  ] }), $[72] = mode, $[73] = radius, $[74] = ref, $[75] = restProps, $[76] = t20, $[77] = t21, $[78] = t22, $[79] = t23, $[80] = t24, $[81] = t25, $[82] = tone, $[83] = type, $[84] = width, $[85] = t26) : t26 = $[85], t26;
 });
 Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
@@ -1833,9 +2064,11 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledCard",
   componentId: "sc-osnro2-0"
 })(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
-  const {
-    __unstable_checkered: checkered = !1,
-    __unstable_focusRing: focusRing = !1,
+  const $ = reactCompilerRuntime.c(56);
+  let asProp, border2, borderBottom2, borderLeft2, borderRight2, borderTop2, muted, pressed, restProps, scheme, selected, shadow, t0, t1, t2, t3;
+  $[0] !== props ? ({
+    __unstable_checkered: t0,
+    __unstable_focusRing: t1,
     as: asProp,
     border: border2,
     borderTop: borderTop2,
@@ -1844,18 +2077,39 @@ const StyledCard = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
     borderLeft: borderLeft2,
     muted,
     pressed,
-    radius = 0,
+    radius: t2,
     scheme,
     selected,
     shadow,
-    tone: toneProp = "default",
+    tone: t3,
     ...restProps
-  } = 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 }) });
+  } = 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;
+  let t6;
+  $[17] !== border2 ? (t6 = _getArrayProp(border2), $[17] = border2, $[18] = t6) : t6 = $[18];
+  let t7;
+  $[19] !== borderTop2 ? (t7 = _getArrayProp(borderTop2), $[19] = borderTop2, $[20] = t7) : t7 = $[20];
+  let t8;
+  $[21] !== borderRight2 ? (t8 = _getArrayProp(borderRight2), $[21] = borderRight2, $[22] = t8) : t8 = $[22];
+  let t9;
+  $[23] !== borderBottom2 ? (t9 = _getArrayProp(borderBottom2), $[23] = borderBottom2, $[24] = t9) : t9 = $[24];
+  let t10;
+  $[25] !== borderLeft2 ? (t10 = _getArrayProp(borderLeft2), $[25] = borderLeft2, $[26] = t10) : t10 = $[26];
+  let t11;
+  $[27] !== radius ? (t11 = _getArrayProp(radius), $[27] = radius, $[28] = t11) : t11 = $[28];
+  let t12;
+  $[29] !== shadow ? (t12 = _getArrayProp(shadow), $[29] = shadow, $[30] = t12) : t12 = $[30];
+  const t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
+  let t16;
+  $[31] !== as || $[32] !== checkered || $[33] !== focusRing || $[34] !== muted || $[35] !== ref || $[36] !== restProps || $[37] !== rootTheme.scheme || $[38] !== selected || $[39] !== t10 || $[40] !== t11 || $[41] !== t12 || $[42] !== t13 || $[43] !== t14 || $[44] !== t15 || $[45] !== t4 || $[46] !== t6 || $[47] !== t7 || $[48] !== t8 || $[49] !== t9 || $[50] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(StyledCard, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[31] = as, $[32] = checkered, $[33] = focusRing, $[34] = muted, $[35] = ref, $[36] = restProps, $[37] = rootTheme.scheme, $[38] = selected, $[39] = t10, $[40] = t11, $[41] = t12, $[42] = t13, $[43] = t14, $[44] = t15, $[45] = t4, $[46] = t6, $[47] = t7, $[48] = t8, $[49] = t9, $[50] = tone, $[51] = t16) : t16 = $[51];
+  let t17;
+  return $[52] !== scheme || $[53] !== t16 || $[54] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[52] = scheme, $[53] = t16, $[54] = tone, $[55] = t17) : t17 = $[55], t17;
 });
 Card.displayName = "ForwardRef(Card)";
-function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundaryElement) {
-  const onEvent = useEffectEvent.useEffectEvent((evt) => {
+function useClickOutsideEvent(listener, t0, boundaryElement) {
+  const $ = reactCompilerRuntime.c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
+  let t1;
+  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
       return;
     const target = evt.target;
@@ -1869,19 +2123,29 @@ function useClickOutsideEvent(listener, elementsArg = () => EMPTY_ARRAY, boundar
       if (el && (target === el || el.contains(target)))
         return;
     listener(evt);
-  }), hasListener = !!listener;
-  react.useEffect(() => {
-    if (!hasListener) return;
-    const handleEvent = (evt) => onEvent(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);
     };
-  }, [hasListener]), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+  }, $[4] = hasListener, $[5] = onEvent, $[6] = t2) : t2 = $[6];
+  let t3;
+  $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
+}
+function _temp$8() {
+  return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
-  react.useEffect(() => {
+  const $ = reactCompilerRuntime.c(4);
+  let t0, t1;
+  $[0] !== customValidity || $[1] !== ref ? (t0 = () => {
     ref.current?.setCustomValidity(customValidity || "");
-  }, [customValidity, ref]);
+  }, 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() {
@@ -1923,24 +2187,36 @@ function _createElementSizeObserver() {
   };
 }
 function useElementSize(element) {
-  const [size2, setSize] = react.useState(null);
-  return react.useEffect(() => {
+  const $ = reactCompilerRuntime.c(3), [size2, setSize] = react.useState(null);
+  let t0, t1;
+  return $[0] !== element ? (t0 = () => {
     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);
-  }, []);
+  }, t1 = [element], $[0] = element, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1), size2;
+}
+function useGlobalKeyDown(onKeyDown, options) {
+  const $ = reactCompilerRuntime.c(7);
+  let t0;
+  $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
+  const handleKeyDown = useEffectEvent.useEffectEvent(t0);
+  let t1;
+  $[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
+    const handler = (event_0) => handleKeyDown(event_0);
+    return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+  }, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
+  let t2;
+  $[5] !== options ? (t2 = [options], $[5] = options, $[6] = t2) : t2 = $[6], react.useEffect(t1, t2);
 }
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(react.useCallback((onStoreChange) => {
+  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);
-  }, [mediaQueryString]), () => window.matchMedia(mediaQueryString).matches, getServerSnapshot2);
+  }, $[0] = mediaQueryString, $[1] = t0) : t0 = $[1];
+  let t1;
+  return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], react.useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
 function _getMediaQuery(media, index) {
   return index === 0 ? `screen and (max-width: ${media[index] - 1}px)` : index === media.length ? `screen and (min-width: ${media[index - 1]}px)` : `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`;
@@ -1991,16 +2267,25 @@ function getServerSnapshot() {
   return 0;
 }
 function useMediaIndex() {
-  const {
+  const $ = reactCompilerRuntime.c(2), {
     media
-  } = useTheme_v2(), store = react.useMemo(() => _createMediaStore(media), [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(getServerSnapshot2 = () => !1) {
-  return useMatchMedia("(prefers-color-scheme: dark)", getServerSnapshot2);
+function usePrefersDark(t0) {
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$7 : t0);
+}
+function _temp$7() {
+  return !1;
+}
+function usePrefersReducedMotion(t0) {
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$6 : t0);
 }
-function usePrefersReducedMotion(getServerSnapshot2 = () => !1) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", getServerSnapshot2);
+function _temp$6() {
+  return !1;
 }
 function checkboxBaseStyles() {
   return styledComponents.css`
@@ -2147,7 +2432,9 @@ const StyledCheckbox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Input",
   componentId: "sc-1l5mt2l-1"
 })(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(25);
+  let checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
+  $[0] !== props ? ({
     checked,
     className,
     disabled,
@@ -2156,16 +2443,27 @@ const StyledCheckbox = /* @__PURE__ */ styledComponents.styled.div.withConfig({
     readOnly,
     style,
     ...restProps
-  } = props, ref = react.useRef(null);
-  return react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
+  } = 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 = () => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [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, {})
-    ] })
-  ] });
+  }, 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;
 });
 Checkbox.displayName = "ForwardRef(Checkbox)";
 function codeSyntaxHighlightingStyle({
@@ -2322,14 +2620,26 @@ const LazyRefractor = react.lazy(() => Promise.resolve().then(function() {
   displayName: "StyledCode",
   componentId: "sc-4dymyn-0"
 })(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(22);
+  let children, language, restProps, t0, weight;
+  $[0] !== props ? ({
     children,
     language,
-    size: size2 = 2,
+    size: t0,
     weight,
     ...restProps
-  } = 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 }) }) });
+  } = props, $[0] = props, $[1] = children, $[2] = language, $[3] = restProps, $[4] = t0, $[5] = weight) : (children = $[1], language = $[2], restProps = $[3], t0 = $[4], weight = $[5]);
+  const size2 = t0 === void 0 ? 2 : t0;
+  let t1;
+  $[6] !== size2 ? (t1 = _getArrayProp(size2), $[6] = size2, $[7] = t1) : t1 = $[7];
+  let t2;
+  $[8] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[8] = children, $[9] = t2) : t2 = $[9];
+  let t3;
+  $[10] !== children || $[11] !== language ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(LazyRefractor, { language, value: children }), $[10] = children, $[11] = language, $[12] = t3) : t3 = $[12];
+  let t4;
+  $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: t2, children: t3 }), $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15];
+  let t5;
+  return $[16] !== ref || $[17] !== restProps || $[18] !== t1 || $[19] !== t4 || $[20] !== weight ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(StyledCode, { "data-ui": "Code", ...restProps, $size: t1, $weight: weight, ref, children: t4 }), $[16] = ref, $[17] = restProps, $[18] = t1, $[19] = t4, $[20] = weight, $[21] = t5) : t5 = $[21], t5;
 });
 Code.displayName = "ForwardRef(Code)";
 const BASE_STYLE$1 = {
@@ -2352,19 +2662,27 @@ const StyledContainer = /* @__PURE__ */ styledComponents.styled(Box).withConfig(
   displayName: "StyledContainer",
   componentId: "sc-wyroop-0"
 })(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(11);
+  let as, restProps, t0;
+  $[0] !== props ? ({
     as,
-    width = 2,
+    width: t0,
     ...restProps
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: _getArrayProp(width), forwardedAs: as, ref });
+  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
+  const width = t0 === void 0 ? 2 : t0;
+  let t1;
+  $[4] !== width ? (t1 = _getArrayProp(width), $[4] = width, $[5] = t1) : t1 = $[5];
+  let t2;
+  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(StyledContainer, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t1, $[10] = t2) : t2 = $[10], t2;
 });
 Container.displayName = "ForwardRef(Container)";
 const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledGrid",
   componentId: "sc-v8t8oz-0"
 })(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(42);
+  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
+  $[0] !== props ? ({
     as,
     autoRows,
     autoCols,
@@ -2376,8 +2694,26 @@ const StyledGrid = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
     rows,
     children,
     ...restProps
-  } = 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 });
+  } = 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;
+  let t1;
+  $[12] !== autoRows ? (t1 = _getArrayProp(autoRows), $[12] = autoRows, $[13] = t1) : t1 = $[13];
+  let t2;
+  $[14] !== autoCols ? (t2 = _getArrayProp(autoCols), $[14] = autoCols, $[15] = t2) : t2 = $[15];
+  let t3;
+  $[16] !== autoFlow ? (t3 = _getArrayProp(autoFlow), $[16] = autoFlow, $[17] = t3) : t3 = $[17];
+  let t4;
+  $[18] !== columns ? (t4 = _getArrayProp(columns), $[18] = columns, $[19] = t4) : t4 = $[19];
+  let t5;
+  $[20] !== gap ? (t5 = _getArrayProp(gap), $[20] = gap, $[21] = t5) : t5 = $[21];
+  let t6;
+  $[22] !== gapX ? (t6 = _getArrayProp(gapX), $[22] = gapX, $[23] = t6) : t6 = $[23];
+  let t7;
+  $[24] !== gapY ? (t7 = _getArrayProp(gapY), $[24] = gapY, $[25] = t7) : t7 = $[25];
+  let t8;
+  $[26] !== rows ? (t8 = _getArrayProp(rows), $[26] = rows, $[27] = t8) : t8 = $[27];
+  let t9;
+  return $[28] !== as || $[29] !== children || $[30] !== ref || $[31] !== restProps || $[32] !== t0 || $[33] !== t1 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(StyledGrid, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[28] = as, $[29] = children, $[30] = ref, $[31] = restProps, $[32] = t0, $[33] = t1, $[34] = t2, $[35] = t3, $[36] = t4, $[37] = t5, $[38] = t6, $[39] = t7, $[40] = t8, $[41] = t9) : t9 = $[41], t9;
 });
 Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
@@ -2443,18 +2779,32 @@ const StyledHeading = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "StyledHeading",
   componentId: "sc-137lwim-0"
 })(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont), Heading = react.forwardRef(function(props, ref) {
-  const {
-    accent = !1,
+  const $ = reactCompilerRuntime.c(26);
+  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
+  $[0] !== props ? ({
+    accent: t0,
     align,
     children: childrenProp,
-    muted = !1,
-    size: size2 = 2,
+    muted: t1,
+    size: t2,
     textOverflow,
     weight,
     ...restProps
-  } = props;
+  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
+  const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
   let children = childrenProp;
-  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 }) });
+  if (textOverflow === "ellipsis") {
+    let t32;
+    $[9] !== children ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(SpanWithTextOverflow, { children }), $[9] = children, $[10] = t32) : t32 = $[10], children = t32;
+  }
+  let t3;
+  $[11] !== align ? (t3 = _getArrayProp(align), $[11] = align, $[12] = t3) : t3 = $[12];
+  let t4;
+  $[13] !== size2 ? (t4 = _getArrayProp(size2), $[13] = size2, $[14] = t4) : t4 = $[14];
+  let t5;
+  $[15] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[15] = children, $[16] = t5) : t5 = $[16];
+  let t6;
+  return $[17] !== accent || $[18] !== muted || $[19] !== ref || $[20] !== restProps || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledHeading, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[17] = accent, $[18] = muted, $[19] = ref, $[20] = restProps, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = weight, $[25] = t6) : t6 = $[25], t6;
 });
 Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
@@ -2488,15 +2838,27 @@ const StyledInline = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledInline",
   componentId: "sc-1pkiy6j-0"
 })(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(15);
+  let as, childrenProp, restProps, space;
+  $[0] !== props ? ({
     as,
     children: childrenProp,
     space,
     ...restProps
-  } = 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 });
+  } = 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;
+  let t1;
+  $[7] !== space ? (t1 = _getArrayProp(space), $[7] = space, $[8] = t1) : t1 = $[8];
+  const t2 = ref;
+  let t3;
+  return $[9] !== as || $[10] !== children || $[11] !== restProps || $[12] !== t1 || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(StyledInline, { "data-ui": "Inline", ...restProps, $space: t1, forwardedAs: as, ref: t2, children }), $[9] = as, $[10] = children, $[11] = restProps, $[12] = t1, $[13] = t2, $[14] = t3) : t3 = $[14], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
+function _temp$5(child) {
+  return child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child });
+}
 function kbdStyle() {
   return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -2518,14 +2880,24 @@ const StyledKBD = /* @__PURE__ */ styledComponents.styled.kbd.withConfig({
   displayName: "StyledKBD",
   componentId: "sc-1w7yd8w-0"
 })(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(19);
+  let children, restProps, t0, t1, t2;
+  $[0] !== props ? ({
     children,
-    fontSize: fontSize2 = 0,
-    padding = 1,
-    radius = 2,
+    fontSize: t0,
+    padding: t1,
+    radius: t2,
     ...restProps
-  } = 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 }) }) });
+  } = 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, radius = t2 === void 0 ? 2 : t2;
+  let t3;
+  $[6] !== radius ? (t3 = _getArrayProp(radius), $[6] = radius, $[7] = t3) : t3 = $[7];
+  let t4;
+  $[8] !== children || $[9] !== fontSize2 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[8] = children, $[9] = fontSize2, $[10] = t4) : t4 = $[10];
+  let t5;
+  $[11] !== padding || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: t4 }), $[11] = padding, $[12] = t4, $[13] = t5) : t5 = $[13];
+  let t6;
+  return $[14] !== ref || $[15] !== restProps || $[16] !== t3 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(StyledKBD, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[14] = ref, $[15] = restProps, $[16] = t3, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -2653,12 +3025,15 @@ 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 {
+  const $ = reactCompilerRuntime.c(24);
+  let h, restProps, t0, w;
+  $[0] !== props ? ({
     width: w,
     height: h,
-    radius = 0,
+    radius: t0,
     ...restProps
-  } = props, {
+  } = 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, {
     card
   } = useTheme_v2(), strokeWidth = card.shadow.outline, center = w / 2, points = [{
     x: 0,
@@ -2678,24 +3053,38 @@ 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`;
-  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 })
-  ] }) });
+  }], 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;
 });
 Arrow.displayName = "ForwardRef(Arrow)";
 const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/context/boundaryElement", null);
 function BoundaryElementProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(5), {
     children,
     element
-  } = props, value = react.useMemo(() => ({
+  } = props;
+  let t0;
+  $[0] !== element ? (t0 = {
     version: 0,
     element
-  }), [element]);
-  return /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children });
+  }, $[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;
 }
 BoundaryElementProvider.displayName = "BoundaryElementProvider";
 function isRecord(value) {
@@ -2732,18 +3121,32 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const theme2 = useTheme_v2(), {
+  const $ = reactCompilerRuntime.c(18), theme2 = useTheme_v2();
+  let _media, children, restProps;
+  $[0] !== props ? ({
     children,
     media: _media,
     ...restProps
-  } = 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(() => {
+  } = 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) {
     const eq = findMaxBreakpoints(media, width);
-    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 });
+    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;
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
 function getLayerContext(contextValue) {
@@ -2757,10 +3160,21 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/context/layer", null);
 function LayerProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(21), {
     children,
-    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) => {
+    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;
+  let t2;
+  $[2] !== zOffsetProp ? (t2 = _getArrayProp(zOffsetProp), $[2] = zOffsetProp, $[3] = t2) : t2 = $[3];
+  const zOffset = t2, maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
+  let t3;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[4] = t3) : t3 = $[4];
+  const [, setChildLayers] = react.useState(t3), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0;
+  let t4;
+  $[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -2768,34 +3182,47 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize((v) => v + 1), () => {
-      childLevel !== void 0 ? setChildLayers((state) => {
-        const nextState = {
-          ...state
+    }) : setSize(_temp$4), () => {
+      childLevel !== void 0 ? setChildLayers((state_0) => {
+        const nextState_0 = {
+          ...state_0
         };
-        return nextState[childLevel] === 1 ? (delete nextState[childLevel], setSize(Object.keys(nextState).length)) : nextState[childLevel] -= 1, nextState;
-      }) : setSize((v) => v - 1), parentDispose?.();
+        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?.();
     };
-  }, [parentRegisterChild, setSize, setChildLayers]);
-  react.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
-  const value = react.useMemo(() => ({
+  }, $[5] = parentRegisterChild, $[6] = setChildLayers, $[7] = t4) : t4 = $[7];
+  const registerChild = t4;
+  let t5, t6;
+  $[8] !== level || $[9] !== parentRegisterChild ? (t5 = () => parentRegisterChild?.(level), t6 = [level, parentRegisterChild], $[8] = level, $[9] = parentRegisterChild, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), react.useEffect(t5, t6);
+  let t7;
+  $[12] !== isTopLayer || $[13] !== level || $[14] !== registerChild || $[15] !== size2 || $[16] !== zIndex ? (t7 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }), [isTopLayer, level, registerChild, size2, zIndex]);
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
+  }, $[12] = isTopLayer, $[13] = level, $[14] = registerChild, $[15] = size2, $[16] = zIndex, $[17] = t7) : t7 = $[17];
+  const value = t7;
+  let t8;
+  return $[18] !== children || $[19] !== value ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
+}
+function _temp2$2(v_0) {
+  return v_0 - 1;
+}
+function _temp$4(v) {
+  return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
 function useLayer() {
-  const value = react.useContext(LayerContext);
+  const $ = reactCompilerRuntime.c(2), value = react.useContext(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
-    return getLayerContext(value);
-  } catch (err) {
+    let t1;
+    return $[0] !== value ? (t1 = getLayerContext(value), $[0] = value, $[1] = t1) : t1 = $[1], t1;
+  } catch (t0) {
+    const err = t0;
     throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
   }
 }
@@ -2805,37 +3232,54 @@ const StyledLayer = /* @__PURE__ */ styledComponents.styled.div.withConfig({
 })({
   position: "relative"
 }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(22);
+  let children, onActivate, onFocus, restProps, t0;
+  $[0] !== props ? ({
     children,
     onActivate,
     onFocus,
-    style = EMPTY_RECORD,
+    style: t0,
     ...restProps
-  } = props, {
+  } = 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, {
     zIndex,
     isTopLayer
   } = useLayer(), lastFocusedRef = react.useRef(null), ref = react.useRef(null), isTopLayerRef = react.useRef(isTopLayer);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
+  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 = () => {
     isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({
       activeElement: lastFocusedRef.current
     }), isTopLayerRef.current = isTopLayer;
-  }, [isTopLayer, onActivate]);
-  const handleFocus = react.useCallback((event) => {
+  }, 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) => {
     onFocus?.(event);
     const rootElement = ref.current, target = document.activeElement;
     !isTopLayer || !rootElement || !target || isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
-  }, [isTopLayer, onFocus]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledLayer, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: {
+  }, $[11] = isTopLayer, $[12] = onFocus, $[13] = t4) : t4 = $[13];
+  const handleFocus = t4;
+  let t5;
+  $[14] !== style || $[15] !== zIndex ? (t5 = {
     ...style,
     zIndex
-  }, children });
+  }, $[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;
 }), Layer = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(11);
+  let children, restProps, t0;
+  $[0] !== props ? ({
     children,
-    zOffset = 1,
+    zOffset: t0,
     ...restProps
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }) });
+  } = 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;
 });
 Layer.displayName = "ForwardRef(Layer)";
 const key = "@sanity/ui/context/portal", elementKey = Symbol.for(`${key}/element`);
@@ -2856,26 +3300,39 @@ function usePortal() {
   return value;
 }
 function Portal(props) {
-  const {
+  const $ = reactCompilerRuntime.c(3), {
     children,
     __unstable_name: name
   } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
-  return portalElement ? reactDom.createPortal(children, portalElement) : null;
+  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;
 }
 Portal.displayName = "Portal";
 function PortalProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(7), {
     boundaryElement,
     children,
     element,
     __unstable_elements: elements
-  } = props, fallbackElement = react.useSyncExternalStore(emptySubscribe, () => document.body, () => null), value = react.useMemo(() => ({
+  } = props, fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1), t0 = boundaryElement || null, t1 = element || fallbackElement;
+  let t2;
+  $[0] !== elements || $[1] !== t0 || $[2] !== t1 ? (t2 = {
     version: 0,
-    boundaryElement: boundaryElement || null,
-    element: element || fallbackElement,
+    boundaryElement: t0,
+    element: t1,
     elements
-  }), [boundaryElement, element, elements, fallbackElement]);
-  return /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children });
+  }, $[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;
 }
 PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
@@ -2883,11 +3340,12 @@ 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 {
+  const $ = reactCompilerRuntime.c(4), {
     as,
     children
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledSrOnly, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children });
+  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;
 });
 SrOnly.displayName = "ForwardRef(SrOnly)";
 const StyledVirtualList = styledComponents.styled.div.withConfig({
@@ -2897,52 +3355,69 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
   displayName: "ItemWrapper",
   componentId: "sc-dlqsj4-1"
 })`position:absolute;left:0;right:0;`, VirtualList = react.forwardRef(function(props, forwardedRef) {
-  const {
-    as = "div",
-    gap = 0,
+  const $ = reactCompilerRuntime.c(44);
+  let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
+  $[0] !== props ? ({
+    as: t0,
+    gap: t1,
     getItemKey,
-    items = [],
+    items: t2,
     onChange,
     renderItem,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = getItemKey, $[2] = onChange, $[3] = renderItem, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = t2) : (getItemKey = $[1], onChange = $[2], renderItem = $[3], restProps = $[4], t0 = $[5], t1 = $[6], t2 = $[7]);
+  const as = t0 === void 0 ? "div" : t0, gap = t1 === void 0 ? 0 : t1;
+  let t3;
+  $[8] !== t2 ? (t3 = t2 === void 0 ? [] : t2, $[8] = t2, $[9] = t3) : t3 = $[9];
+  const items = t3, {
     space
   } = useTheme_v2(), ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
-    if (!wrapperRef.current) return;
+  let t4;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+    if (!wrapperRef.current)
+      return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
-  }, [renderItem]), react.useEffect(() => {
-    if (!ref.current) return;
+  }, $[11] = t5) : t5 = $[11];
+  let t6;
+  $[12] !== renderItem ? (t6 = [renderItem], $[12] = renderItem, $[13] = t6) : t6 = $[13], react.useEffect(t5, t6);
+  let t7, t8;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
+    if (!ref.current)
+      return;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return;
-      const handleScroll2 = () => {
+      if (!(scrollEl instanceof HTMLElement))
+        return;
+      const handleScroll = () => {
         setScrollTop(scrollEl.scrollTop);
       };
-      scrollEl.addEventListener("scroll", handleScroll2, {
+      scrollEl.addEventListener("scroll", handleScroll, {
         passive: !0
       });
       const ro = new _ResizeObserver((entries) => {
         setScrollHeight(entries[0].contentRect.height);
       });
-      return ro.observe(scrollEl), handleScroll2(), () => {
-        scrollEl.removeEventListener("scroll", handleScroll2), ro.unobserve(scrollEl), ro.disconnect();
+      return ro.observe(scrollEl), handleScroll(), () => {
+        scrollEl.removeEventListener("scroll", handleScroll), ro.unobserve(scrollEl), ro.disconnect();
       };
     }
-    const handleScroll = () => {
+    const handleScroll_0 = () => {
       setScrollTop(window.scrollY);
     }, handleResize = () => {
       setScrollHeight(window.innerHeight);
     };
-    return window.addEventListener("scroll", handleScroll, {
+    return window.addEventListener("scroll", handleScroll_0, {
       passive: !0
-    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll(), () => {
-      window.removeEventListener("scroll", handleScroll), window.removeEventListener("resize", handleResize);
+    }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
+      window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  react.useEffect(() => {
+  let t10, t9;
+  $[16] !== fromIndex || $[17] !== gap || $[18] !== itemHeight || $[19] !== onChange || $[20] !== scrollHeight || $[21] !== scrollTop || $[22] !== space || $[23] !== toIndex ? (t9 = () => {
     onChange && onChange({
       fromIndex,
       gap: space[gap],
@@ -2951,8 +3426,9 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
       scrollTop,
       toIndex
     });
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
-  const children = useChildren({
+  }, 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,
@@ -2961,28 +3437,49 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
     getItemKey,
     items,
     renderItem
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: {
+  }, $[26] = fromIndex, $[27] = gap, $[28] = getItemKey, $[29] = itemHeight, $[30] = items, $[31] = renderItem, $[32] = space, $[33] = toIndex, $[34] = t11) : t11 = $[34];
+  const children = useChildren(t11);
+  let t12;
+  $[35] !== height ? (t12 = {
     height
-  }, children }) });
+  }, $[35] = height, $[36] = t12) : t12 = $[36];
+  let t13;
+  $[37] !== children || $[38] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: t12, children }), $[37] = children, $[38] = t12, $[39] = t13) : t13 = $[39];
+  let t14;
+  return $[40] !== as || $[41] !== restProps || $[42] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: t13 }), $[40] = as, $[41] = restProps, $[42] = t13, $[43] = t14) : t14 = $[43], t14;
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
-function useChildren({
-  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 useChildren(t0) {
+  const $ = reactCompilerRuntime.c(21), {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    space,
+    toIndex
+  } = t0;
+  if (!renderItem || items.length === 0)
+    return null;
+  if (itemHeight === -1) {
+    let t12;
+    $[0] !== items[0] || $[1] !== renderItem ? (t12 = renderItem(items[0]), $[0] = items[0], $[1] = renderItem, $[2] = t12) : t12 = $[2];
+    let t2;
+    return $[3] !== t12 ? (t2 = [/* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { children: t12 }, 0)], $[3] = t12, $[4] = t2) : t2 = $[4], t2;
+  }
+  let t1;
+  if ($[5] !== fromIndex || $[6] !== gap || $[7] !== getItemKey || $[8] !== itemHeight || $[9] !== items || $[10] !== renderItem || $[11] !== space || $[12] !== toIndex) {
+    let t2;
+    $[14] !== fromIndex || $[15] !== gap || $[16] !== getItemKey || $[17] !== itemHeight || $[18] !== renderItem || $[19] !== space ? (t2 = (item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+      return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: {
+        top: itemIndex * (itemHeight + space[gap])
+      }, children: node }, key2);
+    }, $[14] = fromIndex, $[15] = gap, $[16] = getItemKey, $[17] = itemHeight, $[18] = renderItem, $[19] = space, $[20] = t2) : t2 = $[20], t1 = items.slice(fromIndex, toIndex).map(t2), $[5] = fromIndex, $[6] = gap, $[7] = getItemKey, $[8] = itemHeight, $[9] = items, $[10] = renderItem, $[11] = space, $[12] = toIndex, $[13] = t1;
+  } else
+    t1 = $[13];
+  return t1;
 }
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
@@ -3074,7 +3571,9 @@ 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 {
+  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 ? ({
     __unstable_margins: marginsProp,
     animate,
     arrow,
@@ -3097,9 +3596,12 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
     x: xProp,
     y: yProp,
     ...restProps
-  } = props, {
+  } = 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 {
     zIndex
-  } = useLayer(), margins = react.useMemo(() => marginsProp || DEFAULT_POPOVER_MARGINS, [marginsProp]), x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], rootStyle2 = react.useMemo(() => ({
+  } = 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 = {
     left: x,
     originX,
     originY,
@@ -3107,92 +3609,137 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion.create(Card)).w
     top: y,
     width,
     zIndex,
-    willChange: animate ? "transform" : void 0,
+    willChange: t0,
     ...style
-  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]), arrowStyle = react.useMemo(() => ({
-    left: arrowX !== null ? arrowX : void 0,
-    top: arrowY !== null ? arrowY : void 0,
+  }, $[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,
     right: void 0,
     bottom: void 0
-  }), [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 })
-  ] });
+  }, $[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;
 });
 PopoverCard.displayName = "ForwardRef(PopoverCard)";
 const ViewportOverlay = () => {
-  const {
+  const $ = reactCompilerRuntime.c(2), {
     zIndex
   } = useLayer();
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+  let t0;
+  return $[0] !== zIndex ? (t0 = /* @__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 {
+  const $ = reactCompilerRuntime.c(126), {
     container,
     layer
-  } = 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);
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
+  let _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, childProp, content, disabled, matchReferenceWidth, modal, open, paddingProp, portal, referenceElement, restProps, scheme, t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+  if ($[0] !== props) {
+    const {
+      __unstable_margins: t122,
+      animate: t132,
+      arrow: t142,
+      boundaryElement: t152,
+      children: t162,
+      constrainSize: t172,
+      content: t182,
+      disabled: t192,
+      fallbackPlacements: t202,
+      matchReferenceWidth: t212,
+      floatingBoundary: t222,
+      modal: t232,
+      onActivate,
+      open: t242,
+      overflow: t252,
+      padding: t262,
+      placement: t272,
+      placementStrategy: t282,
+      portal: t292,
+      preventOverflow: t302,
+      radius: t312,
+      referenceBoundary: t322,
+      referenceElement: t332,
+      scheme: t342,
+      shadow: t352,
+      tone: t362,
+      width: t372,
+      zOffset: t382,
+      updateRef: t392,
+      ...t402
+    } = props;
+    t0 = t122, t1 = t132, t2 = t142, _boundaryElement = t152, childProp = t162, t3 = t172, content = t182, disabled = t192, _fallbackPlacements = t202, matchReferenceWidth = t212, _floatingBoundary = t222, modal = t232, open = t242, t4 = t252, paddingProp = t262, t5 = t272, t6 = t282, portal = t292, t7 = t302, t8 = t312, _referenceBoundary = t322, referenceElement = t332, scheme = t342, t9 = t352, t10 = t362, t11 = t372, _zOffsetProp = t382, updateRef = t392, restProps = t402, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
+  } else
+    _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
+  const margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !0 : t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border;
+  let t12;
+  $[30] !== paddingProp ? (t12 = _getArrayProp(paddingProp), $[30] = paddingProp, $[31] = t12) : t12 = $[31];
+  const padding = t12;
+  let t13;
+  $[32] !== radiusProp ? (t13 = _getArrayProp(radiusProp), $[32] = radiusProp, $[33] = t13) : t13 = $[33];
+  const radius = t13;
+  let t14;
+  $[34] !== shadowProp ? (t14 = _getArrayProp(shadowProp), $[34] = shadowProp, $[35] = t14) : t14 = $[35];
+  const shadow = t14, widthArrayProp = _getArrayProp(widthProp);
+  let t15;
+  $[36] !== zOffsetProp ? (t15 = _getArrayProp(zOffsetProp), $[36] = zOffsetProp, $[37] = t15) : t15 = $[37];
+  const zOffset = t15, ref = react.useRef(null), arrowRef = react.useRef(null);
+  let t16;
+  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[38] = t16) : t16 = $[38], react.useImperativeHandle(forwardedRef, t16);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
   }), widthRef = react.useRef(width);
-  react.useEffect(() => {
+  let t17, t18;
+  $[39] !== width ? (t17 = () => {
     widthRef.current = width;
-  }, [width]);
-  const maxWidth = calcMaxWidth({
+  }, t18 = [width], $[39] = width, $[40] = t17, $[41] = t18) : (t17 = $[40], t18 = $[41]), react.useEffect(t17, t18);
+  let t19;
+  $[42] !== boundaryWidth || $[43] !== width ? (t19 = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), maxWidthRef = react.useRef(maxWidth);
-  react.useEffect(() => {
+  }), $[42] = boundaryWidth, $[43] = width, $[44] = t19) : t19 = $[44];
+  const maxWidth = t19, maxWidthRef = react.useRef(maxWidth);
+  let t20, t21;
+  $[45] !== maxWidth ? (t20 = () => {
     maxWidthRef.current = maxWidth;
-  }, [maxWidth]);
+  }, t21 = [maxWidth], $[45] = maxWidth, $[46] = t20, $[47] = t21) : (t20 = $[46], t21 = $[47]), react.useEffect(t20, t21);
   const referenceWidthRef = react.useRef(void 0);
-  react.useEffect(() => {
+  let t22, t23;
+  $[48] !== matchReferenceWidth || $[49] !== maxWidth || $[50] !== open || $[51] !== width ? (t22 = () => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement) return;
-    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({
+    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`);
+  }, t23 = [width, matchReferenceWidth, maxWidth, open], $[48] = matchReferenceWidth, $[49] = maxWidth, $[50] = open, $[51] = width, $[52] = t22, $[53] = t23) : (t22 = $[52], t23 = $[53]), react.useEffect(t22, t23);
+  const [referenceWidth_0, setReferenceWidth] = react.useState(void 0);
+  let t24;
+  $[54] !== animate || $[55] !== arrowProp || $[56] !== constrainSize || $[57] !== fallbackPlacements || $[58] !== floatingBoundary || $[59] !== margins || $[60] !== matchReferenceWidth || $[61] !== placementProp || $[62] !== placementStrategy || $[63] !== preventOverflow || $[64] !== referenceBoundary ? (t24 = {
     animate,
     arrowProp,
     arrowRef,
@@ -3207,10 +3754,23 @@ const ViewportOverlay = () => {
     preventOverflow,
     referenceBoundary,
     referenceWidthRef,
-    rootBoundary,
+    rootBoundary: "viewport",
     setReferenceWidth,
     widthRef
-  }), {
+  }, $[54] = animate, $[55] = arrowProp, $[56] = constrainSize, $[57] = fallbackPlacements, $[58] = floatingBoundary, $[59] = margins, $[60] = matchReferenceWidth, $[61] = placementProp, $[62] = placementStrategy, $[63] = preventOverflow, $[64] = referenceBoundary, $[65] = t24) : t24 = $[65];
+  const middleware = useMiddleware$1(t24);
+  let t25;
+  $[66] !== referenceElement ? (t25 = referenceElement ? {
+    reference: referenceElement
+  } : void 0, $[66] = referenceElement, $[67] = t25) : t25 = $[67];
+  let t26;
+  $[68] !== middleware || $[69] !== placementProp || $[70] !== t25 ? (t26 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate,
+    elements: t25
+  }, $[68] = middleware, $[69] = placementProp, $[70] = t25, $[71] = t26) : t26 = $[71];
+  const {
     x,
     y,
     middlewareData,
@@ -3218,87 +3778,148 @@ const ViewportOverlay = () => {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: referenceElement ? {
-      reference: referenceElement
-    } : void 0
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = react.useCallback((arrowEl) => {
+  } = reactDom$1.useFloating(t26), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
+  let t27;
+  $[72] === Symbol.for("react.memo_cache_sentinel") ? (t27 = (arrowEl) => {
     arrowRef.current = arrowEl;
-  }, []), setFloating = react.useCallback((node) => {
+  }, $[72] = t27) : t27 = $[72];
+  const setArrow = t27;
+  let t28;
+  $[73] !== refs ? (t28 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]);
-  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,
+  }, $[73] = refs, $[74] = t28) : t28 = $[74];
+  const setFloating = t28;
+  let t29;
+  $[75] !== childProp ? (t29 = childProp ? getElementRef(childProp) : null, $[75] = childProp, $[76] = t29) : t29 = $[76];
+  let t30;
+  $[77] !== refs.reference.current ? (t30 = () => refs.reference.current, $[77] = refs.reference.current, $[78] = t30) : t30 = $[78], react.useImperativeHandle(t29, t30);
+  let t31;
+  bb0: {
+    if (referenceElement) {
+      t31 = childProp;
+      break bb0;
+    }
+    if (!childProp) {
+      t31 = null;
+      break bb0;
+    }
+    let t322;
+    $[79] !== childProp || $[80] !== refs.setReference ? (t322 = react.cloneElement(childProp, {
+      ref: refs.setReference
+    }), $[79] = childProp, $[80] = refs.setReference, $[81] = t322) : t322 = $[81], t31 = t322;
+  }
+  const child = t31;
+  let t32, t33;
+  if ($[82] !== update ? (t32 = () => update, t33 = [update], $[82] = update, $[83] = t32, $[84] = t33) : (t32 = $[83], t33 = $[84]), react.useImperativeHandle(updateRef, t32, t33), disabled) {
+    let t342;
+    return $[85] !== childProp ? (t342 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[85] = childProp, $[86] = t342) : t342 = $[86], t342;
+  }
+  let t34;
+  $[87] !== modal ? (t34 = modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}), $[87] = modal, $[88] = t34) : t34 = $[88];
+  const t35 = matchReferenceWidth ? referenceWidth_0 : width;
+  let t36;
+  $[89] !== animate || $[90] !== arrowProp || $[91] !== arrowX || $[92] !== arrowY || $[93] !== content || $[94] !== margins || $[95] !== originX || $[96] !== originY || $[97] !== overflow || $[98] !== padding || $[99] !== placement || $[100] !== radius || $[101] !== referenceHidden || $[102] !== restProps || $[103] !== scheme || $[104] !== setFloating || $[105] !== shadow || $[106] !== strategy || $[107] !== t35 || $[108] !== tone || $[109] !== x || $[110] !== y ? (t36 = /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: t35, x, y, children: content }), $[89] = animate, $[90] = arrowProp, $[91] = arrowX, $[92] = arrowY, $[93] = content, $[94] = margins, $[95] = originX, $[96] = originY, $[97] = overflow, $[98] = padding, $[99] = placement, $[100] = radius, $[101] = referenceHidden, $[102] = restProps, $[103] = scheme, $[104] = setFloating, $[105] = shadow, $[106] = strategy, $[107] = t35, $[108] = tone, $[109] = x, $[110] = y, $[111] = t36) : t36 = $[111];
+  let t37;
+  $[112] !== t34 || $[113] !== t36 || $[114] !== zOffset ? (t37 = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
+    t34,
+    t36
+  ] }), $[112] = t34, $[113] = t36, $[114] = zOffset, $[115] = t37) : t37 = $[115];
+  const popover = t37;
+  let t38;
+  $[116] !== open || $[117] !== popover || $[118] !== portal ? (t38 = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[116] = open, $[117] = popover, $[118] = portal, $[119] = t38) : t38 = $[119];
+  const children = t38;
+  let t39;
+  $[120] !== animate || $[121] !== children ? (t39 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[120] = animate, $[121] = children, $[122] = t39) : t39 = $[122];
+  let t40;
+  return $[123] !== child || $[124] !== t39 ? (t40 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t39,
     child
-  ] });
+  ] }), $[123] = child, $[124] = t39, $[125] = t40) : t40 = $[125], t40;
 });
 Popover.displayName = "ForwardRef(Popover)";
-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({
+function useMiddleware$1(t0) {
+  const $ = reactCompilerRuntime.c(42), {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+    setReferenceWidth,
+    widthRef
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== maxWidthRef || $[9] !== placementProp || $[10] !== placementStrategy || $[11] !== preventOverflow || $[12] !== referenceBoundary || $[13] !== referenceWidthRef || $[14] !== rootBoundary || $[15] !== setReferenceWidth || $[16] !== widthRef) {
+    if (ret = [], constrainSize || preventOverflow)
+      if (placementStrategy === "autoPlacement") {
+        let t12;
+        $[18] !== fallbackPlacements || $[19] !== placementProp ? (t12 = reactDom$1.autoPlacement({
+          allowedPlacements: [placementProp].concat(fallbackPlacements)
+        }), $[18] = fallbackPlacements, $[19] = placementProp, $[20] = t12) : t12 = $[20], ret.push(t12);
+      } else {
+        const t12 = floatingBoundary || void 0;
+        let t22;
+        $[21] !== fallbackPlacements || $[22] !== rootBoundary || $[23] !== t12 ? (t22 = reactDom$1.flip({
+          boundary: t12,
+          fallbackPlacements,
+          padding: DEFAULT_POPOVER_PADDING,
+          rootBoundary
+        }), $[21] = fallbackPlacements, $[22] = rootBoundary, $[23] = t12, $[24] = t22) : t22 = $[24], ret.push(t22);
+      }
+    let t1;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel") ? (t1 = reactDom$1.offset({
       mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (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,
+    }), $[25] = t1) : t1 = $[25], ret.push(t1), constrainSize || matchReferenceWidth) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[26] !== constrainSize || $[27] !== margins || $[28] !== matchReferenceWidth || $[29] !== maxWidthRef || $[30] !== referenceWidthRef || $[31] !== setReferenceWidth || $[32] !== t22 || $[33] !== widthRef ? (t32 = size({
+        boundaryElement: t22,
+        constrainSize,
+        margins,
+        matchReferenceWidth,
+        maxWidthRef,
+        padding: DEFAULT_POPOVER_PADDING,
+        referenceWidthRef,
+        setReferenceWidth,
+        widthRef
+      }), $[26] = constrainSize, $[27] = margins, $[28] = matchReferenceWidth, $[29] = maxWidthRef, $[30] = referenceWidthRef, $[31] = setReferenceWidth, $[32] = t22, $[33] = widthRef, $[34] = t32) : t32 = $[34], ret.push(t32);
+    }
+    if (preventOverflow) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[35] !== rootBoundary || $[36] !== t22 ? (t32 = reactDom$1.shift({
+        boundary: t22,
+        rootBoundary,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[35] = rootBoundary, $[36] = t22, $[37] = t32) : t32 = $[37], ret.push(t32);
+    }
+    if (arrowProp) {
+      let t22;
+      $[38] !== arrowRef ? (t22 = reactDom$1.arrow({
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[38] = arrowRef, $[39] = t22) : t22 = $[39], ret.push(t22);
+    }
+    animate && ret.push(origin);
+    const t2 = referenceBoundary || void 0;
+    let t3;
+    $[40] !== t2 ? (t3 = reactDom$1.hide({
+      boundary: t2,
       padding: DEFAULT_POPOVER_PADDING,
       strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, arrowRef, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, maxWidthRef, placementProp, placementStrategy, preventOverflow, referenceBoundary, referenceWidthRef, rootBoundary, setReferenceWidth, widthRef]);
+    }), $[40] = t2, $[41] = t3) : t3 = $[41], ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = maxWidthRef, $[9] = placementProp, $[10] = placementStrategy, $[11] = preventOverflow, $[12] = referenceBoundary, $[13] = referenceWidthRef, $[14] = rootBoundary, $[15] = setReferenceWidth, $[16] = widthRef, $[17] = ret;
+  } else
+    ret = $[17];
+  return ret;
 }
 function radioBaseStyle() {
   return styledComponents.css`
@@ -3421,18 +4042,29 @@ const StyledRadio = /* @__PURE__ */ styledComponents.styled.div.withConfig({
   displayName: "Input",
   componentId: "sc-ccrwkf-1"
 })(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(19);
+  let className, customValidity, disabled, readOnly, restProps, style;
+  $[0] !== props ? ({
     className,
     disabled,
     style,
     customValidity,
     readOnly,
     ...restProps
-  } = 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", {})
-  ] });
+  } = 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;
 });
 Radio.displayName = "ForwardRef(Radio)";
 function rootStyle() {
@@ -3587,21 +4219,45 @@ const selectStyle = {
   displayName: "IconBox",
   componentId: "sc-5mxno7-2"
 })(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(37);
+  let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
+  $[0] !== props ? ({
     children,
     customValidity,
     disabled,
-    fontSize: fontSize2 = 2,
-    padding = 3,
-    radius = 2,
+    fontSize: t0,
+    padding: t1,
+    radius: t2,
     readOnly,
-    space = 3,
+    space: t3,
     ...restProps
-  } = 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, {}) }) })
-  ] });
+  } = 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;
+  let t6;
+  $[11] !== fontSize2 ? (t6 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t6) : t6 = $[12];
+  let t7;
+  $[13] !== padding ? (t7 = _getArrayProp(padding), $[13] = padding, $[14] = t7) : t7 = $[14];
+  let t8;
+  $[15] !== radius ? (t8 = _getArrayProp(radius), $[15] = radius, $[16] = t8) : t8 = $[16];
+  let t9;
+  $[17] !== space ? (t9 = _getArrayProp(space), $[17] = space, $[18] = t9) : t9 = $[18];
+  const t10 = disabled || readOnly;
+  let t11;
+  $[19] !== children || $[20] !== restProps || $[21] !== t10 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[19] = children, $[20] = restProps, $[21] = t10, $[22] = t5, $[23] = t6, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t11) : t11 = $[27];
+  let t12;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[28] = t12) : t12 = $[28];
+  let t13;
+  $[29] !== fontSize2 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t12 }), $[29] = fontSize2, $[30] = t13) : t13 = $[30];
+  let t14;
+  $[31] !== padding || $[32] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(IconBox, { padding, children: t13 }), $[31] = padding, $[32] = t13, $[33] = t14) : t14 = $[33];
+  let t15;
+  return $[34] !== t11 || $[35] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(StyledSelect, { "data-ui": "Select", children: [
+    t11,
+    t14
+  ] }), $[34] = t11, $[35] = t14, $[36] = t15) : t15 = $[36], t15;
 });
 Select.displayName = "ForwardRef(Select)";
 const BASE_STYLE = {
@@ -3630,12 +4286,18 @@ const StyledStack = /* @__PURE__ */ styledComponents.styled(Box).withConfig({
   displayName: "StyledStack",
   componentId: "sc-8dpfq2-0"
 })(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(12);
+  let as, restProps, space;
+  $[0] !== props ? ({
     as,
     space,
     ...restProps
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledStack, { "data-as": typeof as == "string" ? as : void 0, "data-ui": "Stack", ...restProps, $space: _getArrayProp(space), forwardedAs: as, ref });
+  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = space) : (as = $[1], restProps = $[2], space = $[3]);
+  const t0 = typeof as == "string" ? as : void 0;
+  let t1;
+  $[4] !== space ? (t1 = _getArrayProp(space), $[4] = space, $[5] = t1) : t1 = $[5];
+  let t2;
+  return $[6] !== as || $[7] !== ref || $[8] !== restProps || $[9] !== t0 || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(StyledStack, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[6] = as, $[7] = ref, $[8] = restProps, $[9] = t0, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
@@ -3807,7 +4469,9 @@ const StyledSwitch = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   displayName: "Thumb",
   componentId: "sc-dw1foe-4"
 })(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(26);
+  let checked, className, disabled, indeterminate, readOnly, restProps, style;
+  $[0] !== props ? ({
     checked,
     className,
     disabled,
@@ -3815,16 +4479,29 @@ const StyledSwitch = /* @__PURE__ */ styledComponents.styled.span.withConfig({
     readOnly,
     style,
     ...restProps
-  } = props, ref = react.useRef(null);
-  return react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
+  } = 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 = () => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, [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 })
-    ] })
-  ] });
+  }, 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;
 });
 Switch.displayName = "ForwardRef(Switch)";
 const StyledTextArea = /* @__PURE__ */ styledComponents.styled.span.withConfig({
@@ -3840,21 +4517,42 @@ const StyledTextArea = /* @__PURE__ */ styledComponents.styled.span.withConfig({
   displayName: "Presentation",
   componentId: "sc-1d6h1o8-3"
 })(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
-  const {
-    border: border2 = !0,
+  const $ = reactCompilerRuntime.c(35);
+  let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
+  $[0] !== props ? ({
+    border: t0,
     customValidity,
-    disabled = !1,
-    fontSize: fontSize2 = 2,
-    padding = 3,
-    radius = 2,
+    disabled: t1,
+    fontSize: t2,
+    padding: t3,
+    radius: t4,
     weight,
     __unstable_disableFocusRing,
     ...restProps
-  } = 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 })
-  ] }) });
+  } = 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;
+  let t8;
+  $[11] !== fontSize2 ? (t8 = _getArrayProp(fontSize2), $[11] = fontSize2, $[12] = t8) : t8 = $[12];
+  let t9;
+  $[13] !== padding ? (t9 = _getArrayProp(padding), $[13] = padding, $[14] = t9) : t9 = $[14];
+  const t10 = rootTheme.scheme;
+  let t11;
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = _getArrayProp(0), $[15] = t11) : t11 = $[15];
+  let t12;
+  $[16] !== disabled || $[17] !== restProps || $[18] !== rootTheme.scheme || $[19] !== rootTheme.tone || $[20] !== t8 || $[21] !== t9 || $[22] !== weight ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[16] = disabled, $[17] = restProps, $[18] = rootTheme.scheme, $[19] = rootTheme.tone, $[20] = t8, $[21] = t9, $[22] = weight, $[23] = t12) : t12 = $[23];
+  let t13;
+  $[24] !== radius ? (t13 = _getArrayProp(radius), $[24] = radius, $[25] = t13) : t13 = $[25];
+  const t14 = border2 ? "" : void 0;
+  let t15;
+  $[26] !== __unstable_disableFocusRing || $[27] !== rootTheme.scheme || $[28] !== rootTheme.tone || $[29] !== t13 || $[30] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[26] = __unstable_disableFocusRing, $[27] = rootTheme.scheme, $[28] = rootTheme.tone, $[29] = t13, $[30] = t14, $[31] = t15) : t15 = $[31];
+  let t16;
+  return $[32] !== t12 || $[33] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(StyledTextArea, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
+    t12,
+    t15
+  ] }) }), $[32] = t12, $[33] = t15, $[34] = t16) : t16 = $[34], t16;
 });
 TextArea.displayName = "ForwardRef(TextArea)";
 const CLEAR_BUTTON_BOX_STYLE = {
@@ -3900,61 +4598,119 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(92);
+  let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
+  $[0] !== props ? ({
     __unstable_disableFocusRing,
-    border: border2 = !0,
+    border: t0,
     clearButton,
-    disabled = !1,
-    fontSize: fontSizeProp = 2,
+    disabled: t1,
+    fontSize: t2,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
-    padding: paddingProp = 3,
+    padding: t3,
     prefix,
-    radius: radiusProp = 2,
+    radius: t4,
     readOnly,
-    space: spaceProp = 3,
+    space: t5,
     suffix,
     customValidity,
-    type = "text",
+    type: t6,
     weight,
     ...restProps
-  } = 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: [
+  } = 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();
+  let t7;
+  $[19] !== fontSizeProp ? (t7 = _getArrayProp(fontSizeProp), $[19] = fontSizeProp, $[20] = t7) : t7 = $[20];
+  const fontSize2 = t7;
+  let t8;
+  $[21] !== paddingProp ? (t8 = _getArrayProp(paddingProp), $[21] = paddingProp, $[22] = t8) : t8 = $[22];
+  const padding = t8;
+  let t9;
+  $[23] !== radiusProp ? (t9 = _getArrayProp(radiusProp), $[23] = radiusProp, $[24] = t9) : t9 = $[24];
+  const radius = t9;
+  let t10;
+  $[25] !== spaceProp ? (t10 = _getArrayProp(spaceProp), $[25] = spaceProp, $[26] = t10) : t10 = $[26];
+  const space = t10, $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
+  let t11;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[27] = t11) : t11 = $[27], react.useImperativeHandle(forwardedRef, t11), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$2;
+  let t12;
+  $[28] !== onClear ? (t12 = (event_0) => {
+    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
+  }, $[28] = onClear, $[29] = t12) : t12 = $[29];
+  const handleClearClick = t12;
+  let t13;
+  $[30] !== prefix || $[31] !== radius ? (t13 = prefix && /* @__PURE__ */ jsxRuntime.jsx(Prefix, { borderTop: !0, borderLeft: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: prefix }) }), $[30] = prefix, $[31] = radius, $[32] = t13) : t13 = $[32];
+  const prefixNode = t13, t14 = border2 ? "" : void 0;
+  let t15;
+  $[33] !== IconComponent || $[34] !== fontSize2 || $[35] !== padding ? (t15 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(LeftBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconComponent) && IconComponent,
+    ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+  ] }) }), $[33] = IconComponent, $[34] = fontSize2, $[35] = padding, $[36] = t15) : t15 = $[36];
+  let t16;
+  $[37] !== $hasClearButton || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== padding ? (t16 = !$hasClearButton && IconRightComponent && /* @__PURE__ */ jsxRuntime.jsx(RightBox, { padding, children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconRightComponent) && IconRightComponent,
+    ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+  ] }) }), $[37] = $hasClearButton, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = padding, $[41] = t16) : t16 = $[41];
+  let t17;
+  $[42] !== $hasPrefix || $[43] !== $hasSuffix || $[44] !== __unstable_disableFocusRing || $[45] !== radius || $[46] !== rootTheme.scheme || $[47] !== rootTheme.tone || $[48] !== t14 || $[49] !== t15 || $[50] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+    t15,
+    t16
+  ] }), $[42] = $hasPrefix, $[43] = $hasSuffix, $[44] = __unstable_disableFocusRing, $[45] = radius, $[46] = rootTheme.scheme, $[47] = rootTheme.tone, $[48] = t14, $[49] = t15, $[50] = t16, $[51] = t17) : t17 = $[51];
+  const presentationNode = t17;
+  let t18;
+  $[52] !== padding ? (t18 = padding.map(_temp2), $[52] = padding, $[53] = t18) : t18 = $[53];
+  const clearButtonBoxPadding = t18;
+  let t19;
+  $[54] !== padding ? (t19 = padding.map(_temp3), $[54] = padding, $[55] = t19) : t19 = $[55];
+  const clearButtonPadding = t19, clearButtonProps = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
+  let t20;
+  $[56] !== clearButton || $[57] !== clearButtonBoxPadding || $[58] !== clearButtonPadding || $[59] !== clearButtonProps || $[60] !== customValidity || $[61] !== disabled || $[62] !== fontSize2 || $[63] !== handleClearClick || $[64] !== radius || $[65] !== readOnly ? (t20 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[56] = clearButton, $[57] = clearButtonBoxPadding, $[58] = clearButtonPadding, $[59] = clearButtonProps, $[60] = customValidity, $[61] = disabled, $[62] = fontSize2, $[63] = handleClearClick, $[64] = radius, $[65] = readOnly, $[66] = t20) : t20 = $[66];
+  const clearButtonNode = t20;
+  let t21;
+  $[67] !== radius || $[68] !== suffix ? (t21 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[67] = radius, $[68] = suffix, $[69] = t21) : t21 = $[69];
+  const suffixNode = t21, t22 = $hasIconRight || $hasClearButton;
+  let t23;
+  $[70] !== $hasIcon || $[71] !== disabled || $[72] !== fontSize2 || $[73] !== padding || $[74] !== readOnly || $[75] !== restProps || $[76] !== rootTheme.scheme || $[77] !== rootTheme.tone || $[78] !== space || $[79] !== t22 || $[80] !== type || $[81] !== weight ? (t23 = /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t22, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[70] = $hasIcon, $[71] = disabled, $[72] = fontSize2, $[73] = padding, $[74] = readOnly, $[75] = restProps, $[76] = rootTheme.scheme, $[77] = rootTheme.tone, $[78] = space, $[79] = t22, $[80] = type, $[81] = weight, $[82] = t23) : t23 = $[82];
+  let t24;
+  $[83] !== clearButtonNode || $[84] !== presentationNode || $[85] !== t23 ? (t24 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
+    t23,
+    presentationNode,
+    clearButtonNode
+  ] }), $[83] = clearButtonNode, $[84] = presentationNode, $[85] = t23, $[86] = t24) : t24 = $[86];
+  let t25;
+  return $[87] !== prefixNode || $[88] !== rootTheme.tone || $[89] !== suffixNode || $[90] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(StyledTextInput, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
-    /* @__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
-    ] }),
+    t24,
     suffixNode
-  ] });
+  ] }), $[87] = prefixNode, $[88] = rootTheme.tone, $[89] = suffixNode, $[90] = t24, $[91] = t25) : t25 = $[91], t25;
 });
 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 [state, setState] = react.useState(initialState), delayedAction = react.useRef(void 0), onStateChange = react.useCallback((nextState, delay) => {
+  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 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);
-  }, []);
-  return [state, onStateChange];
+  }, $[0] = t0) : t0 = $[0];
+  const onStateChange = t0;
+  let t1;
+  return $[1] !== state ? (t1 = [state, onStateChange], $[1] = state, $[2] = t1) : t1 = $[2], t1;
 }
 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"],
@@ -3973,7 +4729,9 @@ 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 {
+  const $ = reactCompilerRuntime.c(48);
+  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
+  $[0] !== props ? ({
     animate,
     arrow,
     arrowRef,
@@ -3989,37 +4747,56 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     shadow,
     style,
     ...restProps
-  } = props, rootStyle2 = react.useMemo(() => ({
+  } = 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 = {
     originX,
     originY,
-    willChange: animate ? "transform" : void 0,
+    willChange: t0,
     ...style
-  }), [animate, originX, originY, style]), arrowStyle = react.useMemo(() => ({
-    left: arrowX !== null ? arrowX : void 0,
-    top: arrowY !== null ? arrowY : void 0,
+  }, $[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,
     right: void 0,
     bottom: void 0
-  }), [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: [
+  }, $[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: [
     children,
-    arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS })
-  ] });
+    t9
+  ] }), $[34] = children, $[35] = padding, $[36] = placement, $[37] = radius, $[38] = ref, $[39] = rootStyle2, $[40] = scheme, $[41] = shadow, $[42] = t5, $[43] = t6, $[44] = t7, $[45] = t8, $[46] = t9, $[47] = t10) : t10 = $[47], t10;
 });
 TooltipCard.displayName = "ForwardRef(TooltipCard)";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
 function TooltipDelayGroupProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(9), {
     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, value = react.useMemo(() => ({
+  } = 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 = {
     setIsGroupActive,
     openTooltipId,
     setOpenTooltipId,
-    // When the group is active, we want the next tooltip to open immediately.
-    openDelay: isGroupActive ? 1 : openDelay,
+    openDelay: t0,
     closeDelay
-  }), [closeDelay, isGroupActive, openDelay, openTooltipId, setIsGroupActive, setOpenTooltipId]);
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children });
+  }, $[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;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 function useTooltipDelayGroup() {
@@ -4029,51 +4806,71 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  const boundaryElementContext = useBoundaryElement(), {
+  const $ = reactCompilerRuntime.c(137), boundaryElementContext = useBoundaryElement(), {
     layer
-  } = useTheme_v2(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
+  } = useTheme_v2();
+  let _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
+  $[0] !== props ? ({
+    animate: t0,
+    arrow: t1,
     boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
     fallbackPlacements: _fallbackPlacementsProp,
-    padding = 2,
-    placement: placementProp = "bottom",
+    padding: t2,
+    placement: t3,
     portal: portalProp,
-    radius = 2,
+    radius: t4,
     scheme,
-    shadow = 2,
+    shadow: t5,
     zOffset: _zOffset,
     delay,
     ...restProps
-  } = 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({
+  } = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5) : (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16]);
+  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate;
+  let t6;
+  $[17] !== fallbackPlacementsProp ? (t6 = _getArrayProp(fallbackPlacementsProp), $[17] = fallbackPlacementsProp, $[18] = t6) : t6 = $[18];
+  const fallbackPlacements = t6, ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  let t7;
+  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let t8;
+  $[20] !== animate || $[21] !== arrowProp || $[22] !== boundaryElement || $[23] !== fallbackPlacements ? (t8 = {
     animate,
     arrowProp,
     arrowRef,
     boundaryElement,
     fallbackPlacements,
-    rootBoundary
-  }), {
+    rootBoundary: "viewport"
+  }, $[20] = animate, $[21] = arrowProp, $[22] = boundaryElement, $[23] = fallbackPlacements, $[24] = t8) : t8 = $[24];
+  const middleware = useMiddleware(t8);
+  let t9;
+  $[25] !== referenceElement ? (t9 = {
+    reference: referenceElement
+  }, $[25] = referenceElement, $[26] = t9) : t9 = $[26];
+  let t10;
+  $[27] !== middleware || $[28] !== placementProp || $[29] !== t9 ? (t10 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate,
+    elements: t9
+  }, $[27] = middleware, $[28] = placementProp, $[29] = t9, $[30] = t10) : t10 = $[30];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: {
-      reference: referenceElement
-    }
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+  } = reactDom$1.useFloating(t10), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
+  let t11;
+  $[31] !== delayGroupContext ? (t11 = delayGroupContext || {}, $[31] = delayGroupContext, $[32] = t11) : t11 = $[32];
+  const {
     setIsGroupActive,
     setOpenTooltipId
-  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback((open, immediate) => {
+  } = t11, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
+  let t12;
+  $[33] !== closeDelay || $[34] !== isInsideGroup || $[35] !== openDelay || $[36] !== setIsGroupActive || $[37] !== setIsOpen || $[38] !== setOpenTooltipId || $[39] !== tooltipId ? (t12 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4084,108 +4881,196 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
+  }, $[33] = closeDelay, $[34] = isInsideGroup, $[35] = openDelay, $[36] = setIsGroupActive, $[37] = setIsOpen, $[38] = setOpenTooltipId, $[39] = tooltipId, $[40] = t12) : t12 = $[40];
+  const handleIsOpenChange = t12;
+  let t13;
+  $[41] !== childProp?.props || $[42] !== handleIsOpenChange ? (t13 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e) => {
-    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({
+  }, $[41] = childProp?.props, $[42] = handleIsOpenChange, $[43] = t13) : t13 = $[43];
+  const handleBlur = t13;
+  let t14;
+  $[44] !== childProp?.props || $[45] !== handleIsOpenChange ? (t14 = (e_0) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
+  }, $[44] = childProp?.props, $[45] = handleIsOpenChange, $[46] = t14) : t14 = $[46];
+  const handleClick = t14;
+  let t15;
+  $[47] !== childProp?.props || $[48] !== handleIsOpenChange ? (t15 = (e_1) => {
+    handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
+  }, $[47] = childProp?.props, $[48] = handleIsOpenChange, $[49] = t15) : t15 = $[49];
+  const handleContextMenu = t15;
+  let t16;
+  $[50] !== childProp?.props || $[51] !== handleIsOpenChange ? (t16 = (e_2) => {
+    handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
+  }, $[50] = childProp?.props, $[51] = handleIsOpenChange, $[52] = t16) : t16 = $[52];
+  const handleFocus = t16;
+  let t17;
+  $[53] !== childProp?.props || $[54] !== handleIsOpenChange ? (t17 = (e_3) => {
+    handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
+  }, $[53] = childProp?.props, $[54] = handleIsOpenChange, $[55] = t17) : t17 = $[55];
+  const handleMouseEnter = t17;
+  let t18;
+  $[56] !== childProp?.props || $[57] !== handleIsOpenChange ? (t18 = (e_4) => {
+    handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
+  }, $[56] = childProp?.props, $[57] = handleIsOpenChange, $[58] = t18) : t18 = $[58];
+  const handleMouseLeave = t18;
+  let t19;
+  $[59] !== handleIsOpenChange || $[60] !== isInsideGroup || $[61] !== referenceElement || $[62] !== showTooltip ? (t19 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }), react.useEffect(() => {
+  }, $[59] = handleIsOpenChange, $[60] = isInsideGroup, $[61] = referenceElement, $[62] = showTooltip, $[63] = t19) : t19 = $[63], useCloseOnMouseLeave(t19);
+  let t20, t21;
+  $[64] !== disabled || $[65] !== handleIsOpenChange || $[66] !== showTooltip ? (t20 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+  }, t21 = [disabled, handleIsOpenChange, showTooltip], $[64] = disabled, $[65] = handleIsOpenChange, $[66] = showTooltip, $[67] = t20, $[68] = t21) : (t20 = $[67], t21 = $[68]), react.useEffect(t20, t21);
+  let t22, t23;
+  $[69] !== content || $[70] !== handleIsOpenChange || $[71] !== showTooltip ? (t22 = () => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t23 = [content, handleIsOpenChange, showTooltip], $[69] = content, $[70] = handleIsOpenChange, $[71] = showTooltip, $[72] = t22, $[73] = t23) : (t22 = $[72], t23 = $[73]), react.useEffect(t22, t23);
+  let t24, t25;
+  $[74] !== handleIsOpenChange || $[75] !== showTooltip ? (t24 = () => {
+    if (!showTooltip)
+      return;
+    const handleWindowKeyDown = function(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
+    };
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
+  }, t25 = [handleIsOpenChange, showTooltip], $[74] = handleIsOpenChange, $[75] = showTooltip, $[76] = t24, $[77] = t25) : (t24 = $[76], t25 = $[77]), react.useEffect(t24, t25);
+  let t26;
+  $[78] !== boundaryElement || $[79] !== portalElement?.offsetWidth ? (t26 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = react.useCallback((arrowEl) => {
+  }, $[78] = boundaryElement, $[79] = portalElement?.offsetWidth, $[80] = t26) : t26 = $[80];
+  let t27;
+  $[81] !== boundaryElement || $[82] !== portalElement ? (t27 = [boundaryElement, portalElement], $[81] = boundaryElement, $[82] = portalElement, $[83] = t27) : t27 = $[83], react.useLayoutEffect(t26, t27);
+  let t28;
+  $[84] !== update ? (t28 = (arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = react.useCallback((node) => {
+  }, $[84] = update, $[85] = t28) : t28 = $[85];
+  const setArrow = t28;
+  let t29;
+  $[86] !== refs ? (t29 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  }, $[86] = refs, $[87] = t29) : t29 = $[87];
+  const setFloating = t29;
+  let t30;
+  bb0: {
+    if (!childProp) {
+      t30 = null;
+      break bb0;
+    }
+    let t312;
+    $[88] !== childProp || $[89] !== handleBlur || $[90] !== handleClick || $[91] !== handleContextMenu || $[92] !== handleFocus || $[93] !== handleMouseEnter || $[94] !== handleMouseLeave ? (t312 = react.cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement
+    }), $[88] = childProp, $[89] = handleBlur, $[90] = handleClick, $[91] = handleContextMenu, $[92] = handleFocus, $[93] = handleMouseEnter, $[94] = handleMouseLeave, $[95] = t312) : t312 = $[95], t30 = t312;
+  }
+  const child = t30;
+  let t31;
+  $[96] !== childProp ? (t31 = childProp ? getElementRef(childProp) : null, $[96] = childProp, $[97] = t31) : t31 = $[97];
+  let t32, t33;
+  if ($[98] !== referenceElement ? (t32 = () => referenceElement, t33 = [referenceElement], $[98] = referenceElement, $[99] = t32, $[100] = t33) : (t32 = $[99], t33 = $[100]), react.useImperativeHandle(t31, t32, t33), !child) {
+    let t342;
+    return $[101] === Symbol.for("react.memo_cache_sentinel") ? (t342 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[101] = t342) : t342 = $[101], t342;
+  }
+  if (disabled)
+    return child;
+  const t34 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t35;
+  $[102] !== floatingStyles || $[103] !== t34 ? (t35 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+    maxWidth: t34
+  }, $[102] = floatingStyles, $[103] = t34, $[104] = t35) : t35 = $[104];
+  let t36;
+  $[105] !== animate || $[106] !== arrowProp || $[107] !== arrowX || $[108] !== arrowY || $[109] !== content || $[110] !== originX || $[111] !== originY || $[112] !== padding || $[113] !== placement || $[114] !== radius || $[115] !== restProps || $[116] !== scheme || $[117] !== setArrow || $[118] !== setFloating || $[119] !== shadow ? (t36 = /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[105] = animate, $[106] = arrowProp, $[107] = arrowX, $[108] = arrowY, $[109] = content, $[110] = originX, $[111] = originY, $[112] = padding, $[113] = placement, $[114] = radius, $[115] = restProps, $[116] = scheme, $[117] = setArrow, $[118] = setFloating, $[119] = shadow, $[120] = t36) : t36 = $[120];
+  let t37;
+  $[121] !== restProps || $[122] !== setFloating || $[123] !== t35 || $[124] !== t36 || $[125] !== zOffset ? (t37 = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t35, zOffset, children: t36 }), $[121] = restProps, $[122] = setFloating, $[123] = t35, $[124] = t36, $[125] = zOffset, $[126] = t37) : t37 = $[126];
+  const tooltip = t37;
+  let t38;
+  $[127] !== portalProp || $[128] !== showTooltip || $[129] !== tooltip ? (t38 = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[127] = portalProp, $[128] = showTooltip, $[129] = tooltip, $[130] = t38) : t38 = $[130];
+  const children = t38;
+  let t39;
+  $[131] !== animate || $[132] !== children ? (t39 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[131] = animate, $[132] = children, $[133] = t39) : t39 = $[133];
+  let t40;
+  return $[134] !== child || $[135] !== t39 ? (t40 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t39,
     child
-  ] });
+  ] }), $[134] = child, $[135] = t39, $[136] = t40) : t40 = $[136], t40;
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
-function useMiddleware({
-  animate,
-  arrowProp,
-  arrowRef,
-  boundaryElement,
-  fallbackPlacements,
-  rootBoundary
-}) {
-  return react.useMemo(() => {
-    const ret = [];
-    return ret.push(reactDom$1.flip({
-      boundary: boundaryElement || void 0,
+function useMiddleware(t0) {
+  const $ = reactCompilerRuntime.c(17), {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+    ret = [];
+    const t1 = boundaryElement || void 0;
+    let t2;
+    $[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = reactDom$1.flip({
+      boundary: t1,
       fallbackPlacements,
       padding: DEFAULT_TOOLTIP_PADDING,
       rootBoundary
-    })), ret.push(reactDom$1.offset({
+    }), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+    let t3;
+    $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = reactDom$1.offset({
       mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(reactDom$1.shift({
-      boundary: boundaryElement || void 0,
+    }), $[11] = t3) : t3 = $[11], ret.push(t3);
+    const t4 = boundaryElement || void 0;
+    let t5;
+    if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = reactDom$1.shift({
+      boundary: t4,
       rootBoundary,
       padding: DEFAULT_TOOLTIP_PADDING
-    })), 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) => {
+    }), $[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) => {
     referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-  });
-  react.useEffect(() => {
-    if (!showTooltip || isInsideGroup) return;
+  }, $[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;
     const handleMouseMove = (event) => {
       onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
     };
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, [isInsideGroup, showTooltip]);
+  }, $[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);
 }
 const StyledHotkeys = styledComponents.styled.kbd.withConfig({
   displayName: "StyledHotkeys",
@@ -4194,15 +5079,34 @@ const StyledHotkeys = styledComponents.styled.kbd.withConfig({
   displayName: "Key",
   componentId: "sc-b37mge-1"
 })`&:not([hidden]){display:block;}`, Hotkeys = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(26);
+  let fontSize2, keys, padding, radius, restProps, t0;
+  $[0] !== props ? ({
     fontSize: fontSize2,
     keys,
     padding,
     radius,
-    space: spaceProp = 0.5,
+    space: t0,
     ...restProps
-  } = 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)) }) });
+  } = 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 spaceProp = t0 === void 0 ? 0.5 : t0;
+  let t1;
+  $[7] !== spaceProp ? (t1 = _getArrayProp(spaceProp), $[7] = spaceProp, $[8] = t1) : t1 = $[8];
+  const space = t1;
+  if (!keys || keys.length === 0) {
+    let t22;
+    return $[9] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[9] = t22) : t22 = $[9], t22;
+  }
+  let t2;
+  if ($[10] !== fontSize2 || $[11] !== keys || $[12] !== padding || $[13] !== radius) {
+    let t32;
+    $[15] !== fontSize2 || $[16] !== padding || $[17] !== radius ? (t32 = (key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[15] = fontSize2, $[16] = padding, $[17] = radius, $[18] = t32) : t32 = $[18], t2 = keys.map(t32), $[10] = fontSize2, $[11] = keys, $[12] = padding, $[13] = radius, $[14] = t2;
+  } else
+    t2 = $[14];
+  let t3;
+  $[19] !== space || $[20] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: t2 }), $[19] = space, $[20] = t2, $[21] = t3) : t3 = $[21];
+  let t4;
+  return $[22] !== ref || $[23] !== restProps || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(StyledHotkeys, { "data-ui": "Hotkeys", ...restProps, ref, children: t3 }), $[22] = ref, $[23] = restProps, $[24] = t3, $[25] = t4) : t4 = $[25], t4;
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -4243,16 +5147,24 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const {
+  const $ = reactCompilerRuntime.c(21), {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef
-  } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), [activeElement, setActiveElement] = react.useState(null), setActiveIndex = react.useCallback((nextActiveIndex) => {
+  } = 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) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
-  }, []), mount = react.useCallback((element, selected) => {
-    if (!element) return () => {
-    };
+  }, $[1] = t1) : t1 = $[1];
+  const setActiveIndex = t1;
+  let t2;
+  $[2] !== rootElementRef ? (t2 = (element, selected) => {
+    if (!element)
+      return _temp$1;
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
@@ -4261,7 +5173,10 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, [rootElementRef, setActiveIndex]), handleKeyDown = react.useCallback((event) => {
+  }, $[2] = rootElementRef, $[3] = t2) : t2 = $[3];
+  const mount = t2;
+  let t3;
+  $[4] !== onKeyDown || $[5] !== originElement ? (t3 = (event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -4269,64 +5184,77 @@ 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 = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
-      if (!el) return;
-      const currentIndex = elementsRef.current.indexOf(el);
-      setActiveIndex(currentIndex);
+      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);
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault(), event.stopPropagation();
-      const focusableElements = _getFocusableElements(elementsRef.current), focusableLen = focusableElements.length;
-      if (focusableLen === 0) return;
+      const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
+      if (focusableLen === 0)
+        return;
       const focusedElement = elementsRef.current[activeIndexRef.current];
-      let focusedIndex = focusableElements.indexOf(focusedElement);
+      let focusedIndex = focusableElements_1.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
-      const el = focusableElements[focusedIndex], currentIndex = elementsRef.current.indexOf(el);
-      setActiveIndex(currentIndex);
+      const el_1 = focusableElements_1[focusedIndex], currentIndex_1 = elementsRef.current.indexOf(el_1);
+      setActiveIndex(currentIndex_1);
       return;
     }
     if (event.key === "ArrowDown") {
       event.preventDefault(), event.stopPropagation();
-      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);
+      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);
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = react.useCallback((event) => {
-    const element = event.currentTarget, currentIndex = elementsRef.current.indexOf(element);
-    setActiveIndex(currentIndex);
-  }, [setActiveIndex]), handleItemMouseLeave = react.useCallback(() => {
+  }, $[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 = () => {
     setActiveIndex(-2), rootElementRef.current?.focus();
-  }, [rootElementRef, setActiveIndex]);
-  return react.useEffect(() => {
-    if (!rootElementRef.current) return;
+  }, $[8] = rootElementRef, $[9] = t5) : t5 = $[9];
+  const handleItemMouseLeave = t5;
+  let t6, t7;
+  $[10] !== activeIndex || $[11] !== rootElementRef || $[12] !== shouldFocus ? (t6 = () => {
+    if (!rootElementRef.current)
+      return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === "first") {
-          const el = _getFocusableElements(elementsRef.current)[0];
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex);
+          const el_3 = _getFocusableElements(elementsRef.current)[0];
+          if (el_3) {
+            const currentIndex_4 = elementsRef.current.indexOf(el_3);
+            setActiveIndex(currentIndex_4);
           }
         }
         if (shouldFocus === "last") {
-          const focusableElements = _getFocusableElements(elementsRef.current), el = focusableElements[focusableElements.length - 1];
-          if (el) {
-            const currentIndex = elementsRef.current.indexOf(el);
-            setActiveIndex(currentIndex);
+          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);
           }
         }
         return;
@@ -4334,61 +5262,83 @@ function useMenuController(props) {
       (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
-  }, [activeIndex, rootElementRef, setActiveIndex, shouldFocus]), {
+  }, 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 = {
     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 {
-    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,
+    isTopLayer
+  } = useLayer();
+  let t3;
+  $[14] !== onKeyDown || $[15] !== originElement || $[16] !== shouldFocus ? (t3 = {
     onKeyDown,
     originElement,
-    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);
+    shouldFocus,
+    rootElementRef: ref
+  }, $[14] = onKeyDown, $[15] = originElement, $[16] = shouldFocus, $[17] = t3) : t3 = $[17];
   const {
-    isTopLayer
-  } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  } = useMenuController({
-    onKeyDown,
-    originElement,
-    shouldFocus,
-    rootElementRef: ref
-  }), unregisterElementRef = react.useRef(null), handleRefChange = react.useCallback((el) => {
+  } = useMenuController(t3), unregisterElementRef = react.useRef(null);
+  let t4;
+  $[18] !== registerElement ? (t4 = (el) => {
     unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-  }, [registerElement]);
-  react.useEffect(() => {
+  }, $[18] = registerElement, $[19] = t4) : t4 = $[19];
+  const handleRefChange = t4;
+  let t5, t6;
+  $[20] !== activeIndex || $[21] !== onItemSelect ? (t5 = () => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(react.useCallback((event) => {
+  }, 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) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-  }, [isTopLayer, onEscape]));
-  const value = react.useMemo(() => ({
+  }, $[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 = {
     version: 2,
     activeElement,
     mount,
@@ -4398,8 +5348,14 @@ const StyledMenu = styledComponents.styled(Box).withConfig({
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement
-  }), [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 }) }) });
+  }, $[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;
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuDivider = styledComponents.styled.hr.withConfig({
@@ -4521,21 +5477,24 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const {
-    as = "button",
+  const $ = reactCompilerRuntime.c(81);
+  let IconComponent, children, menuProps, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
+  $[0] !== props ? ({
+    as: t0,
     children,
-    fontSize: fontSize2 = 1,
+    fontSize: t1,
     icon: IconComponent,
     menu: menuProps,
     onClick,
-    padding = 3,
+    padding: t2,
     popover,
-    radius = 2,
-    space = 3,
+    radius: t3,
+    space: t4,
     text,
-    tone = "default",
+    tone: t5,
     ...restProps
-  } = props, menu = useMenu(), {
+  } = 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(), {
     scheme
   } = useRootTheme(), {
     activeElement,
@@ -4545,54 +5504,100 @@ 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), handleMouseEnter = react.useCallback((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);
+  let t6;
+  $[14] !== onItemMouseEnter ? (t6 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, [onItemMouseEnter]), handleMenuKeyDown = react.useCallback((event) => {
-    event.key === "ArrowLeft" && (event.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
+  }, $[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(() => {
       rootElement?.focus();
     }));
-  }, [rootElement]), handleClick = react.useCallback((event) => {
-    onClick?.(event), setShouldFocus("first"), setOpen(!0);
-  }, [onClick]), handleChildItemClick = react.useCallback(() => {
+  }, $[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 = () => {
     setOpen(!1), onItemClick?.();
-  }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
-  react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
+  }, $[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 = () => {
     active || setOpen(!1);
-  }, [active]), react.useEffect(() => {
+  }, t14 = [active], $[27] = active, $[28] = t13, $[29] = t14) : (t13 = $[28], t14 = $[29]), react.useEffect(t13, t14);
+  let t15, t16;
+  $[30] !== open ? (t15 = () => {
     open || setWithinMenu(!1);
-  }, [open]), react.useEffect(() => {
-    if (!shouldFocus) return;
+  }, 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;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, [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") {
+  }, 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") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
-  }, []);
-  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, {}) })
-  ] }) }) });
+  }, $[45] = t20) : t20 = $[45];
+  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0;
+  let t24;
+  $[46] !== radius ? (t24 = _getArrayProp(radius), $[46] = radius, $[47] = t24) : t24 = $[47];
+  const t25 = as === "button" ? "button" : void 0;
+  let t26;
+  $[48] !== IconComponent || $[49] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconComponent) && IconComponent,
+    ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+  ] }), $[48] = IconComponent, $[49] = fontSize2, $[50] = t26) : t26 = $[50];
+  let t27;
+  $[51] !== fontSize2 || $[52] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[51] = fontSize2, $[52] = text, $[53] = t27) : t27 = $[53];
+  let t28;
+  $[54] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[54] = t28) : t28 = $[54];
+  let t29;
+  $[55] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[55] = fontSize2, $[56] = t29) : t29 = $[56];
+  let t30;
+  $[57] !== padding || $[58] !== space || $[59] !== t26 || $[60] !== t27 || $[61] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+    t26,
+    t27,
+    t29
+  ] }), $[57] = padding, $[58] = space, $[59] = t26, $[60] = t27, $[61] = t29, $[62] = t30) : t30 = $[62];
+  let t31;
+  $[63] !== as || $[64] !== handleClick || $[65] !== handleMouseEnter || $[66] !== restProps || $[67] !== scheme || $[68] !== t21 || $[69] !== t22 || $[70] !== t23 || $[71] !== t24 || $[72] !== t25 || $[73] !== t30 || $[74] !== tone ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[63] = as, $[64] = handleClick, $[65] = handleMouseEnter, $[66] = restProps, $[67] = scheme, $[68] = t21, $[69] = t22, $[70] = t23, $[71] = t24, $[72] = t25, $[73] = t30, $[74] = tone, $[75] = t31) : t31 = $[75];
+  let t32;
+  return $[76] !== childMenu || $[77] !== open || $[78] !== popover || $[79] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[76] = childMenu, $[77] = open, $[78] = popover, $[79] = t31, $[80] = t32) : t32 = $[80], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
-  const {
-    as = "button",
+  const $ = reactCompilerRuntime.c(75);
+  let IconComponent, IconRightComponent, children, disabled, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, restProps, selectedProp, t0, t1, t2, t3, t4, t5, text;
+  $[0] !== props ? ({
+    as: t0,
     children,
     disabled,
-    fontSize: fontSize2 = 1,
+    fontSize: t1,
     hotkeys,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClick,
-    padding = 3,
+    padding: t2,
     paddingX,
     paddingY,
     paddingTop,
@@ -4600,13 +5605,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingBottom,
     paddingLeft,
     pressed,
-    radius = 2,
+    radius: t3,
     selected: selectedProp,
-    space = 3,
+    space: t4,
     text,
-    tone = "default",
+    tone: t5,
     ...restProps
-  } = props, {
+  } = 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, {
     scheme
   } = useRootTheme(), menu = useMenu(), {
     activeElement,
@@ -4615,10 +5621,17 @@ 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);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const handleClick = react.useCallback((event) => {
+  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) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, [disabled, onClick, onItemClick]), paddingProps = react.useMemo(() => ({
+  }, $[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 = {
     padding,
     paddingX,
     paddingY,
@@ -4626,71 +5639,119 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = _getArrayProp(fontSize2).map((s) => s - 1), setRef = react.useCallback((el) => {
+  }, $[33] = padding, $[34] = paddingBottom, $[35] = paddingLeft, $[36] = paddingRight, $[37] = paddingTop, $[38] = paddingX, $[39] = paddingY, $[40] = t10) : t10 = $[40];
+  const paddingProps = t10;
+  let t11;
+  $[41] !== fontSize2 ? (t11 = _getArrayProp(fontSize2).map(_temp), $[41] = fontSize2, $[42] = t11) : t11 = $[42];
+  const hotkeysFontSize = t11;
+  let t12;
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (el) => {
     ref.current = el, setRootElement(el);
-  }, []);
-  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, {})
-      ] })
+  }, $[43] = t12) : t12 = $[43];
+  const setRef = t12, t13 = as !== "button" && pressed ? "" : void 0, t14 = active ? "" : void 0, t15 = disabled ? "" : void 0;
+  let t16;
+  $[44] !== radius ? (t16 = _getArrayProp(radius), $[44] = radius, $[45] = t16) : t16 = $[45];
+  let t17;
+  $[46] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[46] = t17) : t17 = $[46];
+  const t18 = disabled ? "default" : tone, t19 = as === "button" ? "button" : void 0;
+  let t20;
+  $[47] !== IconComponent || $[48] !== IconRightComponent || $[49] !== fontSize2 || $[50] !== hotkeys || $[51] !== hotkeysFontSize || $[52] !== paddingProps || $[53] !== space || $[54] !== text ? (t20 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children })
-  ] });
+    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, {})
+    ] })
+  ] }), $[47] = IconComponent, $[48] = IconRightComponent, $[49] = fontSize2, $[50] = hotkeys, $[51] = hotkeysFontSize, $[52] = paddingProps, $[53] = space, $[54] = text, $[55] = t20) : t20 = $[55];
+  let t21;
+  $[56] !== children || $[57] !== paddingProps ? (t21 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t21) : t21 = $[58];
+  let t22;
+  return $[59] !== as || $[60] !== disabled || $[61] !== handleClick || $[62] !== onItemMouseEnter || $[63] !== onItemMouseLeave || $[64] !== restProps || $[65] !== scheme || $[66] !== t13 || $[67] !== t14 || $[68] !== t15 || $[69] !== t16 || $[70] !== t18 || $[71] !== t19 || $[72] !== t20 || $[73] !== t21 ? (t22 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", role: "menuitem", ...restProps, "data-pressed": t13, "data-selected": t14, "data-disabled": t15, forwardedAs: as, $radius: t16, $padding: t17, $tone: t18, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, tabIndex: -1, type: t19, children: [
+    t20,
+    t21
+  ] }), $[59] = as, $[60] = disabled, $[61] = handleClick, $[62] = onItemMouseEnter, $[63] = onItemMouseLeave, $[64] = restProps, $[65] = scheme, $[66] = t13, $[67] = t14, $[68] = t15, $[69] = t16, $[70] = t18, $[71] = t19, $[72] = t20, $[73] = t21, $[74] = t22) : t22 = $[74], t22;
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
+function _temp(s) {
+  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 {
+  const $ = reactCompilerRuntime.c(30);
+  let focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
+  $[0] !== props ? ({
     icon,
     id,
     focused,
-    fontSize: fontSize2 = 1,
+    fontSize: t0,
     label,
     onClick,
     onFocus,
-    padding = 2,
+    padding: t1,
     selected,
     ...restProps
-  } = props, ref = react.useRef(null), focusedRef = react.useRef(!1);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const handleBlur = react.useCallback(() => {
+  } = 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 = () => {
     focusedRef.current = !1;
-  }, []), handleFocus = react.useCallback((event) => {
+  }, $[12] = t3) : t3 = $[12];
+  const handleBlur = t3;
+  let t4;
+  $[13] !== onFocus ? (t4 = (event) => {
     focusedRef.current = !0, onFocus && onFocus(event);
-  }, [onFocus]);
-  return react.useEffect(() => {
+  }, $[13] = onFocus, $[14] = t4) : t4 = $[14];
+  const handleFocus = t4;
+  let t5, t6;
+  $[15] !== focused ? (t5 = () => {
     focused && !focusedRef.current && (ref.current && ref.current.focus(), focusedRef.current = !0);
-  }, [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" });
+  }, 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;
 });
 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 {
+  const $ = reactCompilerRuntime.c(15);
+  let childrenProp, restProps;
+  $[0] !== props ? ({
     children: childrenProp,
     ...restProps
-  } = 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 });
+  } = 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;
 });
 TabList.displayName = "ForwardRef(TabList)";
 exports.Arrow = Arrow;