@sanity/ui 2.9.0-canary.6 → 2.9.0

package/dist/index.js

@@ -150,7 +150,7 @@ function responsiveTextFont(props) {
 function useArrayProp(val, defaultVal) {
   const $ = reactCompilerRuntime.c(3);
   let t0;
-  $[0] !== val || $[1] !== defaultVal ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = val, $[1] = defaultVal, $[2] = t0) : t0 = $[2];
+  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getArrayProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
   const [t1, setCache] = react.useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
   return hash !== cachedHash && setCache([_getArrayProp(val, defaultVal), hash]), cachedVal;
 }
@@ -184,7 +184,7 @@ function useClickOutside(listener, t0, boundaryElement) {
       }
   }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
   let t4, t5;
-  return $[7] !== listener || $[8] !== boundaryElement || $[9] !== elements ? (t4 = () => {
+  return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (t4 = () => {
     if (!listener)
       return;
     const handleWindowMouseDown = (evt) => {
@@ -199,12 +199,12 @@ function useClickOutside(listener, t0, boundaryElement) {
     return window.addEventListener("mousedown", handleWindowMouseDown), () => {
       window.removeEventListener("mousedown", handleWindowMouseDown);
     };
-  }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
+  }, t5 = [boundaryElement, listener, elements], $[7] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$6 : t0;
+  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$b : t0;
   let t1;
-  $[0] !== listener || $[1] !== boundaryElement || $[2] !== elementsArg ? (t1 = (evt) => {
+  $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
       return;
     const target = evt.target;
@@ -218,7 +218,7 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
       if (el && (target === el || el.contains(target)))
         return;
     listener(evt);
-  }, $[0] = listener, $[1] = boundaryElement, $[2] = elementsArg, $[3] = t1) : t1 = $[3];
+  }, $[0] = boundaryElement, $[1] = elementsArg, $[2] = listener, $[3] = t1) : t1 = $[3];
   const onEvent = useEffectEvent.useEffectEvent(t1), hasListener = !!listener;
   let t2, t3;
   $[4] !== hasListener || $[5] !== onEvent ? (t2 = () => {
@@ -230,15 +230,15 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
     };
   }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$6() {
+function _temp$b() {
   return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
   const $ = reactCompilerRuntime.c(6);
   let t0;
-  $[0] !== ref.current || $[1] !== customValidity ? (t0 = () => {
+  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
     ref.current?.setCustomValidity(customValidity || "");
-  }, $[0] = ref.current, $[1] = customValidity, $[2] = t0) : t0 = $[2];
+  }, $[0] = customValidity, $[1] = ref.current, $[2] = t0) : t0 = $[2];
   let t1;
   $[3] !== customValidity || $[4] !== ref ? (t1 = [customValidity, ref], $[3] = customValidity, $[4] = ref, $[5] = t1) : t1 = $[5], react.useEffect(t0, t1);
 }
@@ -587,19 +587,20 @@ function useGlobalKeyDown(onKeyDown) {
   return $[0] !== onKeyDown ? (t0 = () => (addEventListener("keydown", onKeyDown), () => removeEventListener("keydown", onKeyDown)), t1 = [onKeyDown], $[0] = onKeyDown, $[1] = t0, $[2] = t1) : (t0 = $[1], t1 = $[2]), react.useEffect(t0, t1);
 }
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
-  const $ = reactCompilerRuntime.c(4);
-  let t0, t1;
-  $[0] !== mediaQueryString ? (t1 = typeof window > "u" ? null : window.matchMedia(mediaQueryString), $[0] = mediaQueryString, $[1] = t1) : t1 = $[1], t0 = t1;
-  const cachedMatchMedia = t0;
-  let t2, t3;
-  $[2] !== cachedMatchMedia ? (t3 = {
-    subscribe: (onStoreChange) => (cachedMatchMedia.addEventListener("change", onStoreChange), () => cachedMatchMedia.removeEventListener("change", onStoreChange)),
-    getSnapshot: () => cachedMatchMedia.matches
-  }, $[2] = cachedMatchMedia, $[3] = t3) : t3 = $[3], t2 = t3;
   const {
     subscribe: subscribe2,
     getSnapshot
-  } = t2;
+  } = react.useMemo(() => {
+    let MEDIA_QUERY_CACHE;
+    const getMatchMedia = () => (MEDIA_QUERY_CACHE || (MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)), MEDIA_QUERY_CACHE);
+    return {
+      subscribe: (onStoreChange) => {
+        const matchMedia = getMatchMedia();
+        return matchMedia.addEventListener("change", onStoreChange), () => matchMedia.removeEventListener("change", onStoreChange);
+      },
+      getSnapshot: () => getMatchMedia().matches
+    };
+  }, [mediaQueryString]);
   return react.useDebugValue(mediaQueryString), react.useSyncExternalStore(subscribe2, getSnapshot, getServerSnapshot2);
 }
 function getGlobalScope() {
@@ -649,9 +650,9 @@ function ThemeProvider(props) {
     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] !== theme$1 || $[10] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }), $[9] = theme$1, $[10] = children, $[11] = t2) : t2 = $[11];
+  $[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] !== themeContext || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = themeContext, $[13] = t2, $[14] = t3) : t3 = $[14], 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() {
@@ -667,7 +668,7 @@ function ThemeColorProvider(props) {
     tone
   } = props, root = useRootTheme(), t0 = scheme || root.scheme;
   let t1;
-  return $[0] !== t0 || $[1] !== root.theme || $[2] !== tone || $[3] !== children ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { scheme: t0, theme: root.theme, tone, children }), $[0] = t0, $[1] = root.theme, $[2] = tone, $[3] = children, $[4] = t1) : t1 = $[4], 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() {
@@ -736,15 +737,15 @@ function useMediaIndex() {
   return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$5 : t0);
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$a : t0);
 }
-function _temp$5() {
+function _temp$a() {
   return !1;
 }
 function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$4 : t0);
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$9 : t0);
 }
-function _temp$4() {
+function _temp$9() {
   return !1;
 }
 function responsiveBorderStyle() {
@@ -1460,7 +1461,7 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
   overflow: clip;
 `, Label = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
-  let t0, t1, childrenProp, textOverflow, align, restProps, accent, weight;
+  let accent, align, childrenProp, restProps, t0, t1, textOverflow, weight;
   $[0] !== props ? ({
     accent,
     align,
@@ -1470,7 +1471,7 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = childrenProp, $[4] = textOverflow, $[5] = align, $[6] = restProps, $[7] = accent, $[8] = weight) : (t0 = $[1], t1 = $[2], childrenProp = $[3], textOverflow = $[4], align = $[5], restProps = $[6], accent = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = accent, $[2] = align, $[3] = childrenProp, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = textOverflow, $[8] = weight) : (accent = $[1], align = $[2], childrenProp = $[3], restProps = $[4], t0 = $[5], t1 = $[6], textOverflow = $[7], weight = $[8]);
   const muted = t0 === void 0 ? !1 : t0, size2 = t1 === void 0 ? 2 : t1;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
@@ -1482,7 +1483,7 @@ const Root$C = styledComponents.styled.div(responsiveLabelFont, responsiveTextAl
   }
   const t2 = useArrayProp(align), t3 = useArrayProp(size2);
   let t4;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t2 || $[16] !== muted || $[17] !== t3 || $[18] !== weight || $[19] !== ref || $[20] !== children ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = restProps, $[14] = accent, $[15] = t2, $[16] = muted, $[17] = t3, $[18] = weight, $[19] = ref, $[20] = children, $[21] = t4) : t4 = $[21], t4;
+  return $[13] !== accent || $[14] !== children || $[15] !== muted || $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== weight ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$C, { "data-ui": "Label", ...restProps, $accent: accent, $align: t2, $muted: muted, $size: t3, $weight: weight, ref, children }), $[13] = accent, $[14] = children, $[15] = muted, $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = weight, $[21] = t4) : t4 = $[21], t4;
 });
 Label.displayName = "ForwardRef(Label)";
 const avatarStyle = {
@@ -1631,8 +1632,8 @@ function avatarStrokeStyle() {
 const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styledComponents.styled.div(avatarStyle.arrow), BgStroke = styledComponents.styled.ellipse(avatarStyle.bgStroke), Stroke = styledComponents.styled.ellipse(avatarStyle.stroke), Initials = styledComponents.styled.div(avatarStyle.initials), InitialsLabel = styledComponents.styled(Label)({
   color: "inherit"
 }), Image = styledComponents.styled.svg(avatarStyle.image), Avatar = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(53);
-  let t0, t1, t2, asProp, animateArrowFrom, arrowPositionProp, src, onImageLoadError, __unstable_hideInnerStroke, initials, restProps, title;
+  const $ = reactCompilerRuntime.c(52);
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
     as: asProp,
@@ -1646,7 +1647,7 @@ const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyl
     status: t1,
     size: t2,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = asProp, $[5] = animateArrowFrom, $[6] = arrowPositionProp, $[7] = src, $[8] = onImageLoadError, $[9] = __unstable_hideInnerStroke, $[10] = initials, $[11] = restProps, $[12] = title) : (t0 = $[1], t1 = $[2], t2 = $[3], asProp = $[4], animateArrowFrom = $[5], arrowPositionProp = $[6], src = $[7], onImageLoadError = $[8], __unstable_hideInnerStroke = $[9], initials = $[10], restProps = $[11], title = $[12]);
+  } = props, $[0] = props, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = asProp, $[5] = initials, $[6] = onImageLoadError, $[7] = restProps, $[8] = src, $[9] = t0, $[10] = t1, $[11] = t2, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], asProp = $[4], initials = $[5], onImageLoadError = $[6], restProps = $[7], src = $[8], t0 = $[9], t1 = $[10], t2 = $[11], title = $[12]);
   const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
     avatar
   } = useTheme_v2(), as = ReactIs__default.default.isValidElementType(asProp) ? asProp : "div", size2 = useArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = react.useId(), [arrowPosition, setArrowPosition] = react.useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = react.useState(!1), imageId = `avatar-image-${elementId}`;
@@ -1667,32 +1668,30 @@ const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyl
   }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
   const handleImageError = t7;
   let t8, t9;
-  if ($[22] !== size2) {
-    let t102;
-    $[24] === Symbol.for("react.memo_cache_sentinel") ? (t102 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[24] = t102) : t102 = $[24], t9 = size2.map(t102), $[22] = size2, $[23] = t9;
-  } else
-    t9 = $[23];
-  t8 = t9;
+  $[22] !== size2 ? (t9 = size2.map(_temp$8), $[22] = size2, $[23] = t9) : t9 = $[23], t8 = t9;
   const initialsSize = t8, t10 = typeof as == "string" ? as : void 0;
   let t11;
-  $[25] !== color ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[25] = color, $[26] = t11) : t11 = $[26];
+  $[24] !== color ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Arrow$1, { children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[24] = color, $[25] = t11) : t11 = $[25];
   let t12;
-  $[27] !== imageFailed || $[28] !== src || $[29] !== _sizeRem || $[30] !== handleImageError || $[31] !== imageId || $[32] !== _radius || $[33] !== __unstable_hideInnerStroke ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+  $[26] !== __unstable_hideInnerStroke || $[27] !== _radius || $[28] !== _sizeRem || $[29] !== handleImageError || $[30] !== imageFailed || $[31] !== imageId || $[32] !== src ? (t12 = !imageFailed && src && /* @__PURE__ */ jsxRuntime.jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsxRuntime.jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
     /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
     !__unstable_hideInnerStroke && /* @__PURE__ */ jsxRuntime.jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
     /* @__PURE__ */ jsxRuntime.jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-  ] }), $[27] = imageFailed, $[28] = src, $[29] = _sizeRem, $[30] = handleImageError, $[31] = imageId, $[32] = _radius, $[33] = __unstable_hideInnerStroke, $[34] = t12) : t12 = $[34];
+  ] }), $[26] = __unstable_hideInnerStroke, $[27] = _radius, $[28] = _sizeRem, $[29] = handleImageError, $[30] = imageFailed, $[31] = imageId, $[32] = src, $[33] = t12) : t12 = $[33];
   let t13;
-  $[35] !== imageFailed || $[36] !== src || $[37] !== initials || $[38] !== initialsSize ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[35] = imageFailed, $[36] = src, $[37] = initials, $[38] = initialsSize, $[39] = t13) : t13 = $[39];
+  $[34] !== imageFailed || $[35] !== initials || $[36] !== initialsSize || $[37] !== src ? (t13 = (imageFailed || !src) && initials && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(Initials, { children: /* @__PURE__ */ jsxRuntime.jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[34] = imageFailed, $[35] = initials, $[36] = initialsSize, $[37] = src, $[38] = t13) : t13 = $[38];
   let t14;
-  return $[40] !== as || $[41] !== t10 || $[42] !== restProps || $[43] !== color || $[44] !== size2 || $[45] !== title || $[46] !== arrowPosition || $[47] !== status || $[48] !== ref || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsxs(Root$B, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+  return $[39] !== arrowPosition || $[40] !== as || $[41] !== color || $[42] !== ref || $[43] !== restProps || $[44] !== size2 || $[45] !== status || $[46] !== t10 || $[47] !== t11 || $[48] !== t12 || $[49] !== t13 || $[50] !== title ? (t14 = /* @__PURE__ */ jsxRuntime.jsxs(Root$B, { as, "data-as": t10, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
     t11,
     t12,
     t13
-  ] }), $[40] = as, $[41] = t10, $[42] = restProps, $[43] = color, $[44] = size2, $[45] = title, $[46] = arrowPosition, $[47] = status, $[48] = ref, $[49] = t11, $[50] = t12, $[51] = t13, $[52] = t14) : t14 = $[52], t14;
+  ] }), $[39] = arrowPosition, $[40] = as, $[41] = color, $[42] = ref, $[43] = restProps, $[44] = size2, $[45] = status, $[46] = t10, $[47] = t11, $[48] = t12, $[49] = t13, $[50] = title, $[51] = t14) : t14 = $[51], t14;
 });
 Avatar.displayName = "ForwardRef(Avatar)";
+function _temp$8(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     avatar,
@@ -1730,24 +1729,22 @@ function _avatarCounterBaseStyle(props) {
   `;
 }
 const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(10), {
+  const $ = reactCompilerRuntime.c(9), {
     count,
     size: t0
   } = props, size2 = useArrayProp(t0 === void 0 ? 1 : t0);
   let t1, t2;
-  if ($[0] !== size2) {
-    let t32;
-    $[2] === Symbol.for("react.memo_cache_sentinel") ? (t32 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[2] = t32) : t32 = $[2], t2 = size2.map(t32), $[0] = size2, $[1] = t2;
-  } else
-    t2 = $[1];
-  t1 = t2;
+  $[0] !== size2 ? (t2 = size2.map(_temp$7), $[0] = size2, $[1] = t2) : t2 = $[1], t1 = t2;
   const fontSize2 = t1;
   let t3;
-  $[3] !== fontSize2 || $[4] !== count ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[3] = fontSize2, $[4] = count, $[5] = t3) : t3 = $[5];
+  $[2] !== count || $[3] !== fontSize2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[2] = count, $[3] = fontSize2, $[4] = t3) : t3 = $[4];
   let t4;
-  return $[6] !== size2 || $[7] !== ref || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[6] = size2, $[7] = ref, $[8] = t3, $[9] = t4) : t4 = $[9], t4;
+  return $[5] !== ref || $[6] !== size2 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[5] = ref, $[6] = size2, $[7] = t3, $[8] = t4) : t4 = $[8], t4;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
+function _temp$7(s) {
+  return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
+}
 const BASE_STYLES = styledComponents.css`
   white-space: nowrap;
 
@@ -1778,13 +1775,13 @@ function responsiveAvatarStackSizeStyle(props) {
 }
 const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(15);
-  let t0, t1, childrenProp, restProps;
+  let childrenProp, restProps, t0, t1;
   $[0] !== props ? ({
     children: childrenProp,
     maxLength: t0,
     size: t1,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = childrenProp, $[4] = restProps) : (t0 = $[1], t1 = $[2], childrenProp = $[3], restProps = $[4]);
+  } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps, $[3] = t0, $[4] = t1) : (childrenProp = $[1], restProps = $[2], t0 = $[3], t1 = $[4]);
   const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Root$z, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
   let t5;
   $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
@@ -1792,16 +1789,16 @@ const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avata
   }) }, String(childIndex)), $[5] = size2, $[6] = t5) : t5 = $[6];
   const t6 = visibleChildren.map(t5);
   let t7;
-  return $[7] !== T0 || $[8] !== restProps || $[9] !== ref || $[10] !== size2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
+  return $[7] !== T0 || $[8] !== ref || $[9] !== restProps || $[10] !== size2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
     t3,
     t4,
     t6
-  ] }), $[7] = T0, $[8] = restProps, $[9] = ref, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
+  ] }), $[7] = T0, $[8] = ref, $[9] = restProps, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(59);
-  let t0, t1, t2, t3, column, columnStart, columnEnd, flex, height, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, row, rowStart, rowEnd, sizing, restProps;
+  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,
@@ -1830,10 +1827,10 @@ const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBo
     rowEnd,
     sizing,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = column, $[6] = columnStart, $[7] = columnEnd, $[8] = flex, $[9] = height, $[10] = marginX, $[11] = marginY, $[12] = marginTop, $[13] = marginRight, $[14] = marginBottom, $[15] = marginLeft, $[16] = overflow, $[17] = paddingX, $[18] = paddingY, $[19] = paddingTop, $[20] = paddingRight, $[21] = paddingBottom, $[22] = paddingLeft, $[23] = row, $[24] = rowStart, $[25] = rowEnd, $[26] = sizing, $[27] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], column = $[5], columnStart = $[6], columnEnd = $[7], flex = $[8], height = $[9], marginX = $[10], marginY = $[11], marginTop = $[12], marginRight = $[13], marginBottom = $[14], marginLeft = $[15], overflow = $[16], paddingX = $[17], paddingY = $[18], paddingTop = $[19], paddingRight = $[20], paddingBottom = $[21], paddingLeft = $[22], row = $[23], rowStart = $[24], rowEnd = $[25], sizing = $[26], restProps = $[27]);
+  } = props, $[0] = props, $[1] = column, $[2] = columnEnd, $[3] = columnStart, $[4] = flex, $[5] = height, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = overflow, $[13] = paddingBottom, $[14] = paddingLeft, $[15] = paddingRight, $[16] = paddingTop, $[17] = paddingX, $[18] = paddingY, $[19] = restProps, $[20] = row, $[21] = rowEnd, $[22] = rowStart, $[23] = sizing, $[24] = t0, $[25] = t1, $[26] = t2, $[27] = t3) : (column = $[1], columnEnd = $[2], columnStart = $[3], flex = $[4], height = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], overflow = $[12], paddingBottom = $[13], paddingLeft = $[14], paddingRight = $[15], paddingTop = $[16], paddingX = $[17], paddingY = $[18], restProps = $[19], row = $[20], rowEnd = $[21], rowStart = $[22], sizing = $[23], t0 = $[24], t1 = $[25], t2 = $[26], t3 = $[27]);
   const asProp = t0 === void 0 ? "div" : t0, display = t1 === void 0 ? "block" : t1, margin = t2 === void 0 ? 0 : t2, padding = t3 === void 0 ? 0 : t3, t4 = typeof asProp == "string" ? asProp : void 0, t5 = useArrayProp(column), t6 = useArrayProp(columnStart), t7 = useArrayProp(columnEnd), t8 = useArrayProp(display), t9 = useArrayProp(flex), t10 = useArrayProp(height), t11 = useArrayProp(margin), t12 = useArrayProp(marginX), t13 = useArrayProp(marginY), t14 = useArrayProp(marginTop), t15 = useArrayProp(marginRight), t16 = useArrayProp(marginBottom), t17 = useArrayProp(marginLeft), t18 = useArrayProp(overflow), t19 = useArrayProp(padding), t20 = useArrayProp(paddingX), t21 = useArrayProp(paddingY), t22 = useArrayProp(paddingTop), t23 = useArrayProp(paddingRight), t24 = useArrayProp(paddingBottom), t25 = useArrayProp(paddingLeft), t26 = useArrayProp(row), t27 = useArrayProp(rowStart), t28 = useArrayProp(rowEnd), t29 = useArrayProp(sizing);
   let t30;
-  return $[28] !== t4 || $[29] !== restProps || $[30] !== t5 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9 || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t15 || $[41] !== t16 || $[42] !== t17 || $[43] !== t18 || $[44] !== t19 || $[45] !== t20 || $[46] !== t21 || $[47] !== t22 || $[48] !== t23 || $[49] !== t24 || $[50] !== t25 || $[51] !== t26 || $[52] !== t27 || $[53] !== t28 || $[54] !== t29 || $[55] !== asProp || $[56] !== ref || $[57] !== props.children ? (t30 = /* @__PURE__ */ jsxRuntime.jsx(Root$y, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[28] = t4, $[29] = restProps, $[30] = t5, $[31] = t6, $[32] = t7, $[33] = t8, $[34] = t9, $[35] = t10, $[36] = t11, $[37] = t12, $[38] = t13, $[39] = t14, $[40] = t15, $[41] = t16, $[42] = t17, $[43] = t18, $[44] = t19, $[45] = t20, $[46] = t21, $[47] = t22, $[48] = t23, $[49] = t24, $[50] = t25, $[51] = t26, $[52] = t27, $[53] = t28, $[54] = t29, $[55] = asProp, $[56] = ref, $[57] = props.children, $[58] = t30) : t30 = $[58], t30;
+  return $[28] !== asProp || $[29] !== props.children || $[30] !== ref || $[31] !== restProps || $[32] !== t10 || $[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t17 || $[40] !== t18 || $[41] !== t19 || $[42] !== t20 || $[43] !== t21 || $[44] !== t22 || $[45] !== t23 || $[46] !== t24 || $[47] !== t25 || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t4 || $[53] !== t5 || $[54] !== t6 || $[55] !== t7 || $[56] !== t8 || $[57] !== t9 ? (t30 = /* @__PURE__ */ jsxRuntime.jsx(Root$y, { "data-as": t4, "data-ui": "Box", ...restProps, $column: t5, $columnStart: t6, $columnEnd: t7, $display: t8, $flex: t9, $height: t10, $margin: t11, $marginX: t12, $marginY: t13, $marginTop: t14, $marginRight: t15, $marginBottom: t16, $marginLeft: t17, $overflow: t18, $padding: t19, $paddingX: t20, $paddingY: t21, $paddingTop: t22, $paddingRight: t23, $paddingBottom: t24, $paddingLeft: t25, $row: t26, $rowStart: t27, $rowEnd: t28, $sizing: t29, as: asProp, ref, children: props.children }), $[28] = asProp, $[29] = props.children, $[30] = ref, $[31] = restProps, $[32] = t10, $[33] = t11, $[34] = t12, $[35] = t13, $[36] = t14, $[37] = t15, $[38] = t16, $[39] = t17, $[40] = t18, $[41] = t19, $[42] = t20, $[43] = t21, $[44] = t22, $[45] = t23, $[46] = t24, $[47] = t25, $[48] = t26, $[49] = t27, $[50] = t28, $[51] = t29, $[52] = t4, $[53] = t5, $[54] = t6, $[55] = t7, $[56] = t8, $[57] = t9, $[58] = t30) : t30 = $[58], t30;
 });
 Box.displayName = "ForwardRef(Box)";
 function textBaseStyle(props) {
@@ -1912,7 +1909,7 @@ const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAli
   overflow: clip;
 `, Text = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
-  let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
+  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
     align,
@@ -1922,7 +1919,7 @@ const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAli
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = childrenProp, $[5] = textOverflow, $[6] = align, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], childrenProp = $[4], textOverflow = $[5], align = $[6], restProps = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
   const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
@@ -1933,7 +1930,7 @@ const Root$x = styledComponents.styled.div(responsiveTextFont, responsiveTextAli
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
   let t6;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t3 || $[16] !== muted || $[17] !== ref || $[18] !== t4 || $[19] !== weight || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = restProps, $[14] = accent, $[15] = t3, $[16] = muted, $[17] = ref, $[18] = t4, $[19] = weight, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$x, { "data-ui": "Text", ...restProps, $accent: accent, $align: t3, $muted: muted, ref, $size: t4, $weight: weight, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
 });
 Text.displayName = "ForwardRef(Text)";
 function badgeStyle(props) {
@@ -1953,7 +1950,7 @@ function badgeStyle(props) {
 }
 const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle), Badge = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
-  let t0, t1, t2, t3, children, restProps;
+  let children, restProps, t0, t1, t2, t3;
   if ($[0] !== props) {
     const {
       children: t42,
@@ -1964,19 +1961,19 @@ const Root$w = styledComponents.styled(Box)(responsiveRadiusStyle, badgeStyle),
       tone: t8,
       ...t9
     } = props;
-    children = t42, t0 = t52, t1 = t62, t2 = t72, t3 = t8, restProps = t9, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = children, $[6] = restProps;
+    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
-    t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], children = $[5], restProps = $[6];
+    children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5], t3 = $[6];
   const fontSize2 = t0 === void 0 ? 1 : t0, padding = t1 === void 0 ? 1 : t1, radius = t2 === void 0 ? "full" : t2, tone = t3 === void 0 ? "default" : t3, t4 = useArrayProp(radius), t5 = useArrayProp(padding);
   let t6;
-  $[7] !== fontSize2 || $[8] !== children ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = fontSize2, $[8] = children, $[9] = t6) : t6 = $[9];
+  $[7] !== children || $[8] !== fontSize2 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children }), $[7] = children, $[8] = fontSize2, $[9] = t6) : t6 = $[9];
   let t7;
-  return $[10] !== restProps || $[11] !== tone || $[12] !== t4 || $[13] !== t5 || $[14] !== ref || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = restProps, $[11] = tone, $[12] = t4, $[13] = t5, $[14] = ref, $[15] = t6, $[16] = t7) : t7 = $[16], t7;
+  return $[10] !== ref || $[11] !== restProps || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== tone ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$w, { "data-ui": "Badge", ...restProps, $tone: tone, $radius: t4, padding: t5, ref, children: t6 }), $[10] = ref, $[11] = restProps, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16], t7;
 });
 Badge.displayName = "ForwardRef(Badge)";
 const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle), Flex = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
-  let t0, align, gap, justify, wrap, restProps, as;
+  let align, as, gap, justify, restProps, t0, wrap;
   $[0] !== props ? ({
     align,
     as,
@@ -1985,10 +1982,10 @@ const Root$v = styledComponents.styled(Box)(flexItemStyle, responsiveFlexStyle),
     justify,
     wrap,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = align, $[3] = gap, $[4] = justify, $[5] = wrap, $[6] = restProps, $[7] = as) : (t0 = $[1], align = $[2], gap = $[3], justify = $[4], wrap = $[5], restProps = $[6], as = $[7]);
+  } = props, $[0] = props, $[1] = align, $[2] = as, $[3] = gap, $[4] = justify, $[5] = restProps, $[6] = t0, $[7] = wrap) : (align = $[1], as = $[2], gap = $[3], justify = $[4], restProps = $[5], t0 = $[6], wrap = $[7]);
   const direction = t0 === void 0 ? "row" : t0, t1 = useArrayProp(align), t2 = useArrayProp(direction), t3 = useArrayProp(gap), t4 = useArrayProp(justify), t5 = useArrayProp(wrap);
   let t6;
-  return $[8] !== restProps || $[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== as || $[15] !== ref ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = restProps, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = as, $[15] = ref, $[16] = t6) : t6 = $[16], t6;
+  return $[8] !== as || $[9] !== ref || $[10] !== restProps || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$v, { "data-ui": "Flex", ...restProps, $align: t1, $direction: t2, $gap: t3, $justify: t4, $wrap: t5, forwardedAs: as, ref }), $[8] = as, $[9] = ref, $[10] = restProps, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 });
 Flex.displayName = "ForwardRef(Flex)";
 const rotate$1 = styledComponents.keyframes`
@@ -2047,10 +2044,18 @@ function _cardColorStyle(base, color, checkered = !1) {
     "--card-badge-default-dot-color": color.badge.default.dot,
     "--card-badge-default-fg-color": color.badge.default.fg,
     "--card-badge-default-icon-color": color.badge.default.icon,
+    "--card-badge-neutral-bg-color": color.badge.neutral.bg,
+    "--card-badge-neutral-dot-color": color.badge.neutral.dot,
+    "--card-badge-neutral-fg-color": color.badge.neutral.fg,
+    "--card-badge-neutral-icon-color": color.badge.neutral.icon,
     "--card-badge-primary-bg-color": color.badge.primary.bg,
     "--card-badge-primary-dot-color": color.badge.primary.dot,
     "--card-badge-primary-fg-color": color.badge.primary.fg,
     "--card-badge-primary-icon-color": color.badge.primary.icon,
+    "--card-badge-suggest-bg-color": color.badge.suggest.bg,
+    "--card-badge-suggest-dot-color": color.badge.suggest.dot,
+    "--card-badge-suggest-fg-color": color.badge.suggest.fg,
+    "--card-badge-suggest-icon-color": color.badge.suggest.icon,
     "--card-badge-positive-bg-color": color.badge.positive.bg,
     "--card-badge-positive-dot-color": color.badge.positive.dot,
     "--card-badge-positive-fg-color": color.badge.positive.fg,
@@ -2186,7 +2191,7 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
   box-shadow: inherit;
 `, Button = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(64);
-  let t0, t1, t2, t3, t4, t5, t6, t7, t8, paddingXProp, paddingYProp, paddingTopProp, paddingBottomProp, paddingLeftProp, paddingRightProp, loading, disabled, selected, IconComponent, text, IconRightComponent, textAlign, children, restProps, width;
+  let IconComponent, IconRightComponent, children, disabled, loading, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingTopProp, paddingXProp, paddingYProp, restProps, selected, t0, t1, t2, t3, t4, t5, t6, t7, t8, text, textAlign, width;
   $[0] !== props ? ({
     children,
     disabled,
@@ -2213,12 +2218,12 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     muted: t8,
     width,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = t7, $[9] = t8, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = paddingTopProp, $[13] = paddingBottomProp, $[14] = paddingLeftProp, $[15] = paddingRightProp, $[16] = loading, $[17] = disabled, $[18] = selected, $[19] = IconComponent, $[20] = text, $[21] = IconRightComponent, $[22] = textAlign, $[23] = children, $[24] = restProps, $[25] = width) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], t7 = $[8], t8 = $[9], paddingXProp = $[10], paddingYProp = $[11], paddingTopProp = $[12], paddingBottomProp = $[13], paddingLeftProp = $[14], paddingRightProp = $[15], loading = $[16], disabled = $[17], selected = $[18], IconComponent = $[19], text = $[20], IconRightComponent = $[21], textAlign = $[22], children = $[23], restProps = $[24], width = $[25]);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = loading, $[6] = paddingBottomProp, $[7] = paddingLeftProp, $[8] = paddingRightProp, $[9] = paddingTopProp, $[10] = paddingXProp, $[11] = paddingYProp, $[12] = restProps, $[13] = selected, $[14] = t0, $[15] = t1, $[16] = t2, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = t6, $[21] = t7, $[22] = t8, $[23] = text, $[24] = textAlign, $[25] = width) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], loading = $[5], paddingBottomProp = $[6], paddingLeftProp = $[7], paddingRightProp = $[8], paddingTopProp = $[9], paddingXProp = $[10], paddingYProp = $[11], restProps = $[12], selected = $[13], t0 = $[14], t1 = $[15], t2 = $[16], t3 = $[17], t4 = $[18], t5 = $[19], t6 = $[20], t7 = $[21], t8 = $[22], text = $[23], textAlign = $[24], width = $[25]);
   const fontSize2 = t0 === void 0 ? 1 : t0, justifyProp = t1 === void 0 ? "center" : t1, mode = t2 === void 0 ? "default" : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, tone = t6 === void 0 ? "default" : t6, type = t7 === void 0 ? "button" : t7, muted = t8 === void 0 ? !1 : t8, {
     button
   } = useTheme_v2(), justify = useArrayProp(justifyProp), padding = useArrayProp(paddingProp), paddingX = useArrayProp(paddingXProp), paddingY = useArrayProp(paddingYProp), paddingTop = useArrayProp(paddingTopProp), paddingBottom = useArrayProp(paddingBottomProp), paddingLeft = useArrayProp(paddingLeftProp), paddingRight = useArrayProp(paddingRightProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp);
   let t9, t10;
-  $[26] !== padding || $[27] !== paddingX || $[28] !== paddingY || $[29] !== paddingTop || $[30] !== paddingBottom || $[31] !== paddingLeft || $[32] !== paddingRight ? (t10 = {
+  $[26] !== padding || $[27] !== paddingBottom || $[28] !== paddingLeft || $[29] !== paddingRight || $[30] !== paddingTop || $[31] !== paddingX || $[32] !== paddingY ? (t10 = {
     padding,
     paddingX,
     paddingY,
@@ -2226,12 +2231,12 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
     paddingBottom,
     paddingLeft,
     paddingRight
-  }, $[26] = padding, $[27] = paddingX, $[28] = paddingY, $[29] = paddingTop, $[30] = paddingBottom, $[31] = paddingLeft, $[32] = paddingRight, $[33] = t10) : t10 = $[33], t9 = t10;
+  }, $[26] = padding, $[27] = paddingBottom, $[28] = paddingLeft, $[29] = paddingRight, $[30] = paddingTop, $[31] = paddingX, $[32] = paddingY, $[33] = t10) : t10 = $[33], t9 = t10;
   const boxProps = t9, t11 = !!(loading || disabled), t12 = selected ? "" : void 0, t13 = !!(loading || disabled);
   let t14;
   $[34] !== loading ? (t14 = !!loading && /* @__PURE__ */ jsxRuntime.jsx(LoadingBox, { children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }), $[34] = loading, $[35] = t14) : t14 = $[35];
   let t15;
-  $[36] !== IconComponent || $[37] !== text || $[38] !== IconRightComponent || $[39] !== fontSize2 || $[40] !== muted || $[41] !== textAlign || $[42] !== button || $[43] !== justify || $[44] !== space || $[45] !== boxProps ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
+  $[36] !== IconComponent || $[37] !== IconRightComponent || $[38] !== boxProps || $[39] !== button || $[40] !== fontSize2 || $[41] !== justify || $[42] !== muted || $[43] !== space || $[44] !== text || $[45] !== textAlign ? (t15 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", justify, gap: space, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
       react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
@@ -2241,15 +2246,15 @@ const Root$t = styledComponents.styled.button(responsiveRadiusStyle, buttonBaseS
       react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
     ] })
-  ] }) }), $[36] = IconComponent, $[37] = text, $[38] = IconRightComponent, $[39] = fontSize2, $[40] = muted, $[41] = textAlign, $[42] = button, $[43] = justify, $[44] = space, $[45] = boxProps, $[46] = t15) : t15 = $[46];
+  ] }) }), $[36] = IconComponent, $[37] = IconRightComponent, $[38] = boxProps, $[39] = button, $[40] = fontSize2, $[41] = justify, $[42] = muted, $[43] = space, $[44] = text, $[45] = textAlign, $[46] = t15) : t15 = $[46];
   let t16;
-  $[47] !== children || $[48] !== boxProps ? (t16 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children }), $[47] = children, $[48] = boxProps, $[49] = t16) : t16 = $[49];
+  $[47] !== boxProps || $[48] !== children ? (t16 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...boxProps, children }), $[47] = boxProps, $[48] = children, $[49] = t16) : t16 = $[49];
   let t17;
-  return $[50] !== restProps || $[51] !== mode || $[52] !== radius || $[53] !== tone || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== ref || $[58] !== type || $[59] !== width || $[60] !== t14 || $[61] !== t15 || $[62] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsxs(Root$t, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t11, "data-selected": t12, disabled: t13, ref, type, $width: width, children: [
+  return $[50] !== mode || $[51] !== radius || $[52] !== ref || $[53] !== restProps || $[54] !== t11 || $[55] !== t12 || $[56] !== t13 || $[57] !== t14 || $[58] !== t15 || $[59] !== t16 || $[60] !== tone || $[61] !== type || $[62] !== width ? (t17 = /* @__PURE__ */ jsxRuntime.jsxs(Root$t, { "data-ui": "Button", ...restProps, $mode: mode, $radius: radius, $tone: tone, "data-disabled": t11, "data-selected": t12, disabled: t13, ref, type, $width: width, children: [
     t14,
     t15,
     t16
-  ] }), $[50] = restProps, $[51] = mode, $[52] = radius, $[53] = tone, $[54] = t11, $[55] = t12, $[56] = t13, $[57] = ref, $[58] = type, $[59] = width, $[60] = t14, $[61] = t15, $[62] = t16, $[63] = t17) : t17 = $[63], t17;
+  ] }), $[50] = mode, $[51] = radius, $[52] = ref, $[53] = restProps, $[54] = t11, $[55] = t12, $[56] = t13, $[57] = t14, $[58] = t15, $[59] = t16, $[60] = tone, $[61] = type, $[62] = width, $[63] = t17) : t17 = $[63], t17;
 });
 Button.displayName = "ForwardRef(Button)";
 function cardStyle(props) {
@@ -2402,7 +2407,7 @@ function cardColorStyle(props) {
 }
 const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle), Card = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(42);
-  let t0, t1, t2, t3, asProp, border2, borderTop2, borderRight2, borderBottom2, borderLeft2, shadow, pressed, selected, restProps, muted, scheme;
+  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,
@@ -2420,12 +2425,12 @@ const Root$s = styledComponents.styled(Box)(responsiveBorderStyle, responsiveRad
     shadow,
     tone: t3,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = asProp, $[6] = border2, $[7] = borderTop2, $[8] = borderRight2, $[9] = borderBottom2, $[10] = borderLeft2, $[11] = shadow, $[12] = pressed, $[13] = selected, $[14] = restProps, $[15] = muted, $[16] = scheme) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], asProp = $[5], border2 = $[6], borderTop2 = $[7], borderRight2 = $[8], borderBottom2 = $[9], borderLeft2 = $[10], shadow = $[11], pressed = $[12], selected = $[13], restProps = $[14], muted = $[15], scheme = $[16]);
+  } = props, $[0] = props, $[1] = asProp, $[2] = border2, $[3] = borderBottom2, $[4] = borderLeft2, $[5] = borderRight2, $[6] = borderTop2, $[7] = muted, $[8] = pressed, $[9] = restProps, $[10] = scheme, $[11] = selected, $[12] = shadow, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3) : (asProp = $[1], border2 = $[2], borderBottom2 = $[3], borderLeft2 = $[4], borderRight2 = $[5], borderTop2 = $[6], muted = $[7], pressed = $[8], restProps = $[9], scheme = $[10], selected = $[11], shadow = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16]);
   const checkered = t0 === void 0 ? !1 : t0, focusRing = t1 === void 0 ? !1 : t1, radius = t2 === void 0 ? 0 : t2, toneProp = t3 === void 0 ? "default" : t3, as = ReactIs.isValidElementType(asProp) ? asProp : "div", rootTheme = useRootTheme(), tone = toneProp === "inherit" ? rootTheme.tone : toneProp, t4 = typeof as == "string" ? as : void 0, t5 = rootTheme.scheme, t6 = useArrayProp(border2), t7 = useArrayProp(borderTop2), t8 = useArrayProp(borderRight2), t9 = useArrayProp(borderBottom2), t10 = useArrayProp(borderLeft2), t11 = useArrayProp(radius), t12 = useArrayProp(shadow), t13 = checkered ? "" : void 0, t14 = pressed ? "" : void 0, t15 = selected ? "" : void 0;
   let t16;
-  $[17] !== t4 || $[18] !== rootTheme.scheme || $[19] !== tone || $[20] !== restProps || $[21] !== t6 || $[22] !== t7 || $[23] !== t8 || $[24] !== t9 || $[25] !== t10 || $[26] !== checkered || $[27] !== focusRing || $[28] !== muted || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 || $[34] !== as || $[35] !== ref || $[36] !== selected ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Root$s, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = t4, $[18] = rootTheme.scheme, $[19] = tone, $[20] = restProps, $[21] = t6, $[22] = t7, $[23] = t8, $[24] = t9, $[25] = t10, $[26] = checkered, $[27] = focusRing, $[28] = muted, $[29] = t11, $[30] = t12, $[31] = t13, $[32] = t14, $[33] = t15, $[34] = as, $[35] = ref, $[36] = selected, $[37] = t16) : t16 = $[37];
+  $[17] !== as || $[18] !== checkered || $[19] !== focusRing || $[20] !== muted || $[21] !== ref || $[22] !== restProps || $[23] !== rootTheme.scheme || $[24] !== selected || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t4 || $[32] !== t6 || $[33] !== t7 || $[34] !== t8 || $[35] !== t9 || $[36] !== tone ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Root$s, { "data-as": t4, "data-scheme": t5, "data-ui": "Card", "data-tone": tone, ...restProps, $border: t6, $borderTop: t7, $borderRight: t8, $borderBottom: t9, $borderLeft: t10, $checkered: checkered, $focusRing: focusRing, $muted: muted, $radius: t11, $shadow: t12, $tone: tone, "data-checkered": t13, "data-pressed": t14, "data-selected": t15, forwardedAs: as, ref, selected }), $[17] = as, $[18] = checkered, $[19] = focusRing, $[20] = muted, $[21] = ref, $[22] = restProps, $[23] = rootTheme.scheme, $[24] = selected, $[25] = t10, $[26] = t11, $[27] = t12, $[28] = t13, $[29] = t14, $[30] = t15, $[31] = t4, $[32] = t6, $[33] = t7, $[34] = t8, $[35] = t9, $[36] = tone, $[37] = t16) : t16 = $[37];
   let t17;
-  return $[38] !== scheme || $[39] !== tone || $[40] !== t16 ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = tone, $[40] = t16, $[41] = t17) : t17 = $[41], t17;
+  return $[38] !== scheme || $[39] !== t16 || $[40] !== tone ? (t17 = /* @__PURE__ */ jsxRuntime.jsx(ThemeColorProvider, { scheme, tone, children: t16 }), $[38] = scheme, $[39] = t16, $[40] = tone, $[41] = t17) : t17 = $[41], t17;
 });
 Card.displayName = "ForwardRef(Card)";
 function checkboxBaseStyles() {
@@ -2568,7 +2573,7 @@ function inputElementStyles(props) {
 }
 const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styledComponents.styled.input(inputElementStyles), Checkbox = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(25);
-  let indeterminate, customValidity, disabled, readOnly, restProps, checked, className, style;
+  let checked, className, customValidity, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
     checked,
     className,
@@ -2578,7 +2583,7 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
     readOnly,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = indeterminate, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = checked, $[7] = className, $[8] = style) : (indeterminate = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], checked = $[6], className = $[7], style = $[8]);
+  } = 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);
@@ -2588,7 +2593,7 @@ const Root$r = styledComponents.styled.div(checkboxBaseStyles), Input$5 = styled
   }, 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] !== t3 || $[14] !== t4 || $[15] !== restProps || $[16] !== checked || $[17] !== t5 || $[18] !== readOnly ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$5, { "data-read-only": t3, "data-error": t4, ...restProps, checked, disabled: t5, type: "checkbox", readOnly, ref }), $[13] = t3, $[14] = t4, $[15] = restProps, $[16] = checked, $[17] = t5, $[18] = readOnly, $[19] = t6) : t6 = $[19];
+  $[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, {}),
@@ -2751,27 +2756,27 @@ function codeBaseStyle() {
 }
 const Root$q = styledComponents.styled.pre(codeBaseStyle, responsiveCodeFontStyle), Code = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(23);
-  let t0, languageProp, children, restProps, weight;
+  let children, languageProp, restProps, t0, weight;
   $[0] !== props ? ({
     children,
     language: languageProp,
     size: t0,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = languageProp, $[3] = children, $[4] = restProps, $[5] = weight) : (t0 = $[1], languageProp = $[2], children = $[3], restProps = $[4], weight = $[5]);
+  } = props, $[0] = props, $[1] = children, $[2] = languageProp, $[3] = restProps, $[4] = t0, $[5] = weight) : (children = $[1], languageProp = $[2], restProps = $[3], t0 = $[4], weight = $[5]);
   const size2 = t0 === void 0 ? 2 : t0, language = typeof languageProp == "string" ? languageProp : void 0;
   let t1;
   $[6] !== language ? (t1 = language ? Refractor__default.default.hasLanguage(language) : !1, $[6] = language, $[7] = t1) : t1 = $[7];
   const registered = t1, t2 = useArrayProp(size2);
   let t3;
-  $[8] !== language || $[9] !== registered || $[10] !== children ? (t3 = !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[8] = language, $[9] = registered, $[10] = children, $[11] = t3) : t3 = $[11];
+  $[8] !== children || $[9] !== language || $[10] !== registered ? (t3 = !(language && registered) && /* @__PURE__ */ jsxRuntime.jsx("code", { children }), $[8] = children, $[9] = language, $[10] = registered, $[11] = t3) : t3 = $[11];
   let t4;
-  $[12] !== language || $[13] !== registered || $[14] !== children ? (t4 = language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) }), $[12] = language, $[13] = registered, $[14] = children, $[15] = t4) : t4 = $[15];
+  $[12] !== children || $[13] !== language || $[14] !== registered ? (t4 = language && registered && /* @__PURE__ */ jsxRuntime.jsx(Refractor__default.default, { inline: !0, language, value: String(children) }), $[12] = children, $[13] = language, $[14] = registered, $[15] = t4) : t4 = $[15];
   let t5;
-  return $[16] !== restProps || $[17] !== t2 || $[18] !== weight || $[19] !== ref || $[20] !== t3 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: t2, $weight: weight, ref, children: [
+  return $[16] !== ref || $[17] !== restProps || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== weight ? (t5 = /* @__PURE__ */ jsxRuntime.jsxs(Root$q, { "data-ui": "Code", ...restProps, $size: t2, $weight: weight, ref, children: [
     t3,
     t4
-  ] }), $[16] = restProps, $[17] = t2, $[18] = weight, $[19] = ref, $[20] = t3, $[21] = t4, $[22] = t5) : t5 = $[22], t5;
+  ] }), $[16] = ref, $[17] = restProps, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = weight, $[22] = t5) : t5 = $[22], t5;
 });
 Code.displayName = "ForwardRef(Code)";
 const BASE_STYLE$1 = {
@@ -2792,20 +2797,20 @@ function responsiveContainerWidthStyle(props) {
 }
 const Root$p = styledComponents.styled(Box)(containerBaseStyle, responsiveContainerWidthStyle), Container = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9);
-  let t0, restProps, as;
+  let as, restProps, t0;
   $[0] !== props ? ({
     as,
     width: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = as) : (t0 = $[1], restProps = $[2], as = $[3]);
+  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = t0) : (as = $[1], restProps = $[2], t0 = $[3]);
   const t1 = useArrayProp(t0 === void 0 ? 2 : t0);
   let t2;
-  return $[4] !== restProps || $[5] !== t1 || $[6] !== as || $[7] !== ref ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = restProps, $[5] = t1, $[6] = as, $[7] = ref, $[8] = t2) : t2 = $[8], t2;
+  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$p, { "data-ui": "Container", ...restProps, $width: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t1, $[8] = t2) : t2 = $[8], t2;
 });
 Container.displayName = "ForwardRef(Container)";
 const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(26);
-  let as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, restProps, children;
+  let as, autoCols, autoFlow, autoRows, children, columns, gap, gapX, gapY, restProps, rows;
   $[0] !== props ? ({
     as,
     autoRows,
@@ -2818,10 +2823,10 @@ const Root$o = styledComponents.styled(Box)(responsiveGridStyle), Grid = react.f
     rows,
     children,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = autoRows, $[3] = autoCols, $[4] = autoFlow, $[5] = columns, $[6] = gap, $[7] = gapX, $[8] = gapY, $[9] = rows, $[10] = restProps, $[11] = children) : (as = $[1], autoRows = $[2], autoCols = $[3], autoFlow = $[4], columns = $[5], gap = $[6], gapX = $[7], gapY = $[8], rows = $[9], restProps = $[10], children = $[11]);
+  } = props, $[0] = props, $[1] = as, $[2] = autoCols, $[3] = autoFlow, $[4] = autoRows, $[5] = children, $[6] = columns, $[7] = gap, $[8] = gapX, $[9] = gapY, $[10] = restProps, $[11] = rows) : (as = $[1], autoCols = $[2], autoFlow = $[3], autoRows = $[4], children = $[5], columns = $[6], gap = $[7], gapX = $[8], gapY = $[9], restProps = $[10], rows = $[11]);
   const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(autoRows), t2 = useArrayProp(autoCols), t3 = useArrayProp(autoFlow), t4 = useArrayProp(columns), t5 = useArrayProp(gap), t6 = useArrayProp(gapX), t7 = useArrayProp(gapY), t8 = useArrayProp(rows);
   let t9;
-  return $[12] !== t0 || $[13] !== restProps || $[14] !== t1 || $[15] !== t2 || $[16] !== t3 || $[17] !== t4 || $[18] !== t5 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8 || $[22] !== as || $[23] !== ref || $[24] !== children ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Root$o, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[12] = t0, $[13] = restProps, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7, $[21] = t8, $[22] = as, $[23] = ref, $[24] = children, $[25] = t9) : t9 = $[25], t9;
+  return $[12] !== as || $[13] !== children || $[14] !== ref || $[15] !== restProps || $[16] !== t0 || $[17] !== t1 || $[18] !== t2 || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(Root$o, { "data-as": t0, "data-ui": "Grid", ...restProps, $autoRows: t1, $autoCols: t2, $autoFlow: t3, $columns: t4, $gap: t5, $gapX: t6, $gapY: t7, $rows: t8, forwardedAs: as, ref, children }), $[12] = as, $[13] = children, $[14] = ref, $[15] = restProps, $[16] = t0, $[17] = t1, $[18] = t2, $[19] = t3, $[20] = t4, $[21] = t5, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25], t9;
 });
 Grid.displayName = "ForwardRef(Grid)";
 function headingBaseStyle(props) {
@@ -2891,7 +2896,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
   overflow: clip;
 `, Heading = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(22);
-  let t0, t1, t2, childrenProp, textOverflow, align, restProps, weight;
+  let align, childrenProp, restProps, t0, t1, t2, textOverflow, weight;
   $[0] !== props ? ({
     accent: t0,
     align,
@@ -2901,7 +2906,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
     textOverflow,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = childrenProp, $[5] = textOverflow, $[6] = align, $[7] = restProps, $[8] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], childrenProp = $[4], textOverflow = $[5], align = $[6], restProps = $[7], weight = $[8]);
+  } = props, $[0] = props, $[1] = align, $[2] = childrenProp, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = textOverflow, $[8] = weight) : (align = $[1], childrenProp = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], textOverflow = $[7], weight = $[8]);
   const accent = t0 === void 0 ? !1 : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 2 : t2;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
@@ -2912,7 +2917,7 @@ const Root$n = styledComponents.styled.div(headingBaseStyle, responsiveTextAlign
   let t5;
   $[11] !== children ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("span", { children }), $[11] = children, $[12] = t5) : t5 = $[12];
   let t6;
-  return $[13] !== restProps || $[14] !== accent || $[15] !== t3 || $[16] !== muted || $[17] !== t4 || $[18] !== weight || $[19] !== ref || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$n, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = restProps, $[14] = accent, $[15] = t3, $[16] = muted, $[17] = t4, $[18] = weight, $[19] = ref, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
+  return $[13] !== accent || $[14] !== muted || $[15] !== ref || $[16] !== restProps || $[17] !== t3 || $[18] !== t4 || $[19] !== t5 || $[20] !== weight ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$n, { "data-ui": "Heading", ...restProps, $accent: accent, $align: t3, $muted: muted, $size: t4, $weight: weight, ref, children: t5 }), $[13] = accent, $[14] = muted, $[15] = ref, $[16] = restProps, $[17] = t3, $[18] = t4, $[19] = t5, $[20] = weight, $[21] = t6) : t6 = $[21], t6;
 });
 Heading.displayName = "ForwardRef(Heading)";
 function inlineBaseStyle() {
@@ -2943,26 +2948,24 @@ function inlineSpaceStyle(props) {
   });
 }
 const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle), Inline = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(13);
-  let childrenProp, space, restProps, as;
+  const $ = reactCompilerRuntime.c(12);
+  let as, childrenProp, restProps, space;
   $[0] !== props ? ({
     as,
     children: childrenProp,
     space,
     ...restProps
-  } = props, $[0] = props, $[1] = childrenProp, $[2] = space, $[3] = restProps, $[4] = as) : (childrenProp = $[1], space = $[2], restProps = $[3], as = $[4]);
+  } = props, $[0] = props, $[1] = as, $[2] = childrenProp, $[3] = restProps, $[4] = space) : (as = $[1], childrenProp = $[2], restProps = $[3], space = $[4]);
   let t0, t1;
-  if ($[5] !== childrenProp) {
-    let t22;
-    $[7] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (child) => child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child }), $[7] = t22) : t22 = $[7], t1 = react.Children.map(childrenProp, t22), $[5] = childrenProp, $[6] = t1;
-  } else
-    t1 = $[6];
-  t0 = t1;
+  $[5] !== childrenProp ? (t1 = react.Children.map(childrenProp, _temp$6), $[5] = childrenProp, $[6] = t1) : t1 = $[6], t0 = t1;
   const children = t0, t2 = useArrayProp(space);
   let t3;
-  return $[8] !== restProps || $[9] !== t2 || $[10] !== as || $[11] !== children ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[8] = restProps, $[9] = t2, $[10] = as, $[11] = children, $[12] = t3) : t3 = $[12], t3;
+  return $[7] !== as || $[8] !== children || $[9] !== restProps || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[7] = as, $[8] = children, $[9] = restProps, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
+function _temp$6(child) {
+  return child && /* @__PURE__ */ jsxRuntime.jsx("div", { children: child });
+}
 function kbdStyle() {
   return styledComponents.css`
     --card-bg-color: var(--card-kbd-bg-color);
@@ -2982,21 +2985,21 @@ function kbdStyle() {
 }
 const Root$l = styledComponents.styled.kbd(responsiveRadiusStyle, kbdStyle), KBD = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(17);
-  let t0, t1, t2, children, restProps;
+  let children, restProps, t0, t1, t2;
   $[0] !== props ? ({
     children,
     fontSize: t0,
     padding: t1,
     radius: t2,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = children, $[5] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], children = $[4], restProps = $[5]);
+  } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0, $[4] = t1, $[5] = t2) : (children = $[1], restProps = $[2], t0 = $[3], t1 = $[4], t2 = $[5]);
   const fontSize2 = t0 === void 0 ? 0 : t0, padding = t1 === void 0 ? 1 : t1, t3 = useArrayProp(t2 === void 0 ? 2 : t2);
   let t4;
-  $[6] !== fontSize2 || $[7] !== children ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = fontSize2, $[7] = children, $[8] = t4) : t4 = $[8];
+  $[6] !== children || $[7] !== fontSize2 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", size: fontSize2, weight: "semibold", children }), $[6] = children, $[7] = fontSize2, $[8] = t4) : t4 = $[8];
   let t5;
   $[9] !== padding || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", padding, children: t4 }), $[9] = padding, $[10] = t4, $[11] = t5) : t5 = $[11];
   let t6;
-  return $[12] !== restProps || $[13] !== t3 || $[14] !== ref || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = restProps, $[13] = t3, $[14] = ref, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
+  return $[12] !== ref || $[13] !== restProps || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$l, { "data-ui": "KBD", ...restProps, $radius: t3, ref, children: t5 }), $[12] = ref, $[13] = restProps, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 });
 KBD.displayName = "ForwardRef(KBD)";
 const origin = {
@@ -3120,13 +3123,13 @@ const Root$k = styledComponents.styled.div(({
   fill: var(--card-bg-color);
 `, Arrow = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(24);
-  let t0, w, h, restProps;
+  let h, restProps, t0, w;
   $[0] !== props ? ({
     width: w,
     height: h,
     radius: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = w, $[3] = h, $[4] = restProps) : (t0 = $[1], w = $[2], h = $[3], restProps = $[4]);
+  } = 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 = [{
@@ -3156,13 +3159,13 @@ const Root$k = styledComponents.styled.div(({
   let t5;
   $[11] !== fillPath ? (t5 = /* @__PURE__ */ jsxRuntime.jsx(ShapePath, { d: fillPath }), $[11] = fillPath, $[12] = t5) : t5 = $[12];
   let t6;
-  $[13] !== w || $[14] !== t1 || $[15] !== t2 || $[16] !== t4 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: w, height: w, viewBox: t1, children: [
+  $[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] = w, $[14] = t1, $[15] = t2, $[16] = t4, $[17] = t5, $[18] = t6) : t6 = $[18];
+  ] }), $[13] = t1, $[14] = t2, $[15] = t4, $[16] = t5, $[17] = w, $[18] = t6) : t6 = $[18];
   let t7;
-  return $[19] !== restProps || $[20] !== w || $[21] !== ref || $[22] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$k, { ...restProps, $w: w, ref, children: t6 }), $[19] = restProps, $[20] = w, $[21] = ref, $[22] = t6, $[23] = t7) : t7 = $[23], t7;
+  return $[19] !== ref || $[20] !== restProps || $[21] !== t6 || $[22] !== w ? (t7 = /* @__PURE__ */ jsxRuntime.jsx(Root$k, { ...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);
@@ -3178,7 +3181,7 @@ function BoundaryElementProvider(props) {
   }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
   const value = t0;
   let t2;
-  return $[2] !== value || $[3] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children }), $[2] = value, $[3] = children, $[4] = t2) : t2 = $[4], t2;
+  return $[2] !== children || $[3] !== value ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t2) : t2 = $[4], t2;
 }
 BoundaryElementProvider.displayName = "BoundaryElementProvider";
 function isRecord(value) {
@@ -3216,12 +3219,12 @@ function findMinBreakpoints(media, width) {
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(18), theme2 = useTheme_v2();
-  let _media, restProps, children;
+  let _media, children, restProps;
   $[0] !== props ? ({
     children,
     media: _media,
     ...restProps
-  } = props, $[0] = props, $[1] = _media, $[2] = restProps, $[3] = children) : (_media = $[1], restProps = $[2], children = $[3]);
+  } = 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), elementSize = useElementSize(element);
   let t0;
   t0 = elementSize?.border.width ?? window.innerWidth;
@@ -3245,7 +3248,7 @@ const ElementQuery = react.forwardRef(function(props, forwardedRef) {
   let t5, t6;
   $[10] !== element ? (t5 = () => element, t6 = [element], $[10] = element, $[11] = t5, $[12] = t6) : (t5 = $[11], t6 = $[12]), react.useImperativeHandle(forwardedRef, t5, t6);
   let t7;
-  return $[13] !== restProps || $[14] !== max || $[15] !== min || $[16] !== children ? (t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[13] = restProps, $[14] = max, $[15] = min, $[16] = children, $[17] = t7) : t7 = $[17], t7;
+  return $[13] !== children || $[14] !== max || $[15] !== min || $[16] !== restProps ? (t7 = /* @__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] = t7) : t7 = $[17], t7;
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
 class ErrorBoundary extends react.Component {
@@ -3391,18 +3394,18 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize((v) => v + 1), () => {
+    }) : setSize(_temp$5), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
         };
         return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize((v_0) => v_0 - 1), parentDispose?.();
+      }) : setSize(_temp2$3), parentDispose?.();
     };
   }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
   const registerChild = t3;
   let t4, t5;
-  $[6] !== parentRegisterChild || $[7] !== level ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = parentRegisterChild, $[7] = level, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), react.useEffect(t4, t5);
+  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), react.useEffect(t4, t5);
   let t6, t7;
   $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t7 = {
     version: 0,
@@ -3414,21 +3417,27 @@ function LayerProvider(props) {
   }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
   const value = t6;
   let t8;
-  return $[16] !== value || $[17] !== children ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[16] = value, $[17] = children, $[18] = t8) : t8 = $[18], t8;
+  return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
+}
+function _temp2$3(v_0) {
+  return v_0 - 1;
+}
+function _temp$5(v) {
+  return v + 1;
 }
 LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({
   position: "relative"
 }), LayerChildren = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(22);
-  let t0, onActivate, onFocus, restProps, children;
+  let children, onActivate, onFocus, restProps, t0;
   $[0] !== props ? ({
     children,
     onActivate,
     onFocus,
     style: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = onActivate, $[3] = onFocus, $[4] = restProps, $[5] = children) : (t0 = $[1], onActivate = $[2], onFocus = $[3], restProps = $[4], children = $[5]);
+  } = 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
@@ -3442,11 +3451,11 @@ const Root$j = styledComponents.styled.div({
     }), isTopLayerRef.current = isTopLayer;
   }, t3 = [isTopLayer, onActivate], $[7] = isTopLayer, $[8] = onActivate, $[9] = t2, $[10] = t3) : (t2 = $[9], t3 = $[10]), react.useEffect(t2, t3);
   let t4;
-  $[11] !== onFocus || $[12] !== isTopLayer ? (t4 = (event) => {
+  $[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);
-  }, $[11] = onFocus, $[12] = isTopLayer, $[13] = t4) : t4 = $[13];
+  }, $[11] = isTopLayer, $[12] = onFocus, $[13] = t4) : t4 = $[13];
   const handleFocus = t4;
   let t5;
   $[14] !== style || $[15] !== zIndex ? (t5 = {
@@ -3454,20 +3463,20 @@ const Root$j = styledComponents.styled.div({
     zIndex
   }, $[14] = style, $[15] = zIndex, $[16] = t5) : t5 = $[16];
   let t6;
-  return $[17] !== restProps || $[18] !== handleFocus || $[19] !== t5 || $[20] !== children ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$j, { ...restProps, "data-ui": "Layer", onFocus: handleFocus, ref, style: t5, children }), $[17] = restProps, $[18] = handleFocus, $[19] = t5, $[20] = children, $[21] = t6) : t6 = $[21], t6;
+  return $[17] !== children || $[18] !== handleFocus || $[19] !== restProps || $[20] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$j, { ...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 $ = reactCompilerRuntime.c(11);
-  let t0, restProps, children;
+  let children, restProps, t0;
   $[0] !== props ? ({
     children,
     zOffset: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = children) : (t0 = $[1], restProps = $[2], children = $[3]);
+  } = 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] !== restProps || $[5] !== ref || $[6] !== children ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(LayerChildren, { ...restProps, ref, children }), $[4] = restProps, $[5] = ref, $[6] = children, $[7] = t1) : t1 = $[7];
+  $[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] !== zOffset || $[9] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: t1 }), $[8] = zOffset, $[9] = t1, $[10] = t2) : t2 = $[10], 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`);
@@ -3504,32 +3513,32 @@ function PortalProvider(props) {
     children,
     element,
     __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1);
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$4, _temp2$2);
   let t0;
   const t1 = boundaryElement || null, t2 = element || fallbackElement;
   let t3;
-  $[0] !== t1 || $[1] !== t2 || $[2] !== elements ? (t3 = {
+  $[0] !== elements || $[1] !== t1 || $[2] !== t2 ? (t3 = {
     version: 0,
     boundaryElement: t1,
     element: t2,
     elements
-  }, $[0] = t1, $[1] = t2, $[2] = elements, $[3] = t3) : t3 = $[3], t0 = t3;
+  }, $[0] = elements, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3], t0 = t3;
   const value = t0;
   let t4;
-  return $[4] !== value || $[5] !== children ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children }), $[4] = value, $[5] = children, $[6] = t4) : t4 = $[6], t4;
+  return $[4] !== children || $[5] !== value ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(PortalContext.Provider, { value, children }), $[4] = children, $[5] = value, $[6] = t4) : t4 = $[6], t4;
 }
-function _temp2$1() {
+function _temp2$2() {
   return null;
 }
-function _temp$3() {
+function _temp$4() {
   return document.body;
 }
 PortalProvider.displayName = "PortalProvider";
 const emptySubscribe = () => () => {
 };
 function useUnique(value) {
-  const [cachedValue, setCachedValue] = react.useState(value);
-  return _isEqual(cachedValue, value) || setCachedValue(value), cachedValue;
+  const valueRef = react.useRef(value);
+  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
 }
 function _isEqual(objA, objB) {
   if (!objA || !objB)
@@ -3550,7 +3559,7 @@ const Root$i = styledComponents.styled.div`
     children
   } = props;
   let t0;
-  return $[0] !== as || $[1] !== ref || $[2] !== children ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "aria-hidden": !0, as, "data-ui": "SrOnly", ref, children }), $[0] = as, $[1] = ref, $[2] = children, $[3] = t0) : t0 = $[3], t0;
+  return $[0] !== as || $[1] !== children || $[2] !== ref ? (t0 = /* @__PURE__ */ jsxRuntime.jsx(Root$i, { "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 Root$h = styledComponents.styled.div`
@@ -3561,7 +3570,7 @@ const Root$h = styledComponents.styled.div`
   right: 0;
 `, VirtualList = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(56);
-  let t0, t1, t2, renderItem, onChange, getItemKey, restProps;
+  let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
   $[0] !== props ? ({
     as: t0,
     gap: t1,
@@ -3570,7 +3579,7 @@ const Root$h = styledComponents.styled.div`
     onChange,
     renderItem,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = renderItem, $[5] = onChange, $[6] = getItemKey, $[7] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], renderItem = $[4], onChange = $[5], getItemKey = $[6], restProps = $[7]);
+  } = 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];
@@ -3624,8 +3633,8 @@ const Root$h = styledComponents.styled.div`
     };
   }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  let t9, t10;
-  $[16] !== onChange || $[17] !== fromIndex || $[18] !== space || $[19] !== gap || $[20] !== itemHeight || $[21] !== scrollHeight || $[22] !== scrollTop || $[23] !== toIndex ? (t9 = () => {
+  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],
@@ -3634,7 +3643,7 @@ const Root$h = styledComponents.styled.div`
       scrollTop,
       toIndex
     });
-  }, t10 = [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex], $[16] = onChange, $[17] = fromIndex, $[18] = space, $[19] = gap, $[20] = itemHeight, $[21] = scrollHeight, $[22] = scrollTop, $[23] = toIndex, $[24] = t9, $[25] = t10) : (t9 = $[24], t10 = $[25]), react.useEffect(t9, t10);
+  }, 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;
   bb0: {
     if (!renderItem || items.length === 0) {
@@ -3650,14 +3659,14 @@ const Root$h = styledComponents.styled.div`
       break bb0;
     }
     let t122;
-    if ($[31] !== items || $[32] !== fromIndex || $[33] !== toIndex || $[34] !== renderItem || $[35] !== getItemKey || $[36] !== itemHeight || $[37] !== space || $[38] !== gap) {
+    if ($[31] !== fromIndex || $[32] !== gap || $[33] !== getItemKey || $[34] !== itemHeight || $[35] !== items || $[36] !== renderItem || $[37] !== space || $[38] !== toIndex) {
       let t132;
-      $[40] !== fromIndex || $[41] !== renderItem || $[42] !== getItemKey || $[43] !== itemHeight || $[44] !== space || $[45] !== gap ? (t132 = (item, _itemIndex) => {
+      $[40] !== fromIndex || $[41] !== gap || $[42] !== getItemKey || $[43] !== itemHeight || $[44] !== renderItem || $[45] !== space ? (t132 = (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);
-      }, $[40] = fromIndex, $[41] = renderItem, $[42] = getItemKey, $[43] = itemHeight, $[44] = space, $[45] = gap, $[46] = t132) : t132 = $[46], t122 = items.slice(fromIndex, toIndex).map(t132), $[31] = items, $[32] = fromIndex, $[33] = toIndex, $[34] = renderItem, $[35] = getItemKey, $[36] = itemHeight, $[37] = space, $[38] = gap, $[39] = t122;
+      }, $[40] = fromIndex, $[41] = gap, $[42] = getItemKey, $[43] = itemHeight, $[44] = renderItem, $[45] = space, $[46] = t132) : t132 = $[46], t122 = items.slice(fromIndex, toIndex).map(t132), $[31] = fromIndex, $[32] = gap, $[33] = getItemKey, $[34] = itemHeight, $[35] = items, $[36] = renderItem, $[37] = space, $[38] = toIndex, $[39] = t122;
     } else
       t122 = $[39];
     t11 = t122;
@@ -3669,7 +3678,7 @@ const Root$h = styledComponents.styled.div`
   }, $[47] = height, $[48] = t13) : t13 = $[48], t12 = t13;
   const wrapperStyle = t12;
   let t14;
-  $[49] !== wrapperStyle || $[50] !== children ? (t14 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[49] = wrapperStyle, $[50] = children, $[51] = t14) : t14 = $[51];
+  $[49] !== children || $[50] !== wrapperStyle ? (t14 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[49] = children, $[50] = wrapperStyle, $[51] = t14) : t14 = $[51];
   let t15;
   return $[52] !== as || $[53] !== restProps || $[54] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Root$h, { as, "data-ui": "VirtualList", ...restProps, ref, children: t14 }), $[52] = as, $[53] = restProps, $[54] = t14, $[55] = t15) : t15 = $[55], t15;
 });
@@ -3757,8 +3766,8 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     will-change: opacity;
   }
 `, PopoverCard = react.memo(react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(58);
-  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, arrowX, arrowY, restProps, padding, children, overflow, arrow, arrowRef, placement, radius, scheme, shadow, tone;
+  const $ = reactCompilerRuntime.c(60);
+  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,
@@ -3778,10 +3787,11 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     strategy,
     style,
     tone,
+    width,
     x: xProp,
     y: yProp,
     ...restProps
-  } = props, $[0] = props, $[1] = marginsProp, $[2] = xProp, $[3] = yProp, $[4] = animate, $[5] = originX, $[6] = originY, $[7] = strategy, $[8] = style, $[9] = arrowX, $[10] = arrowY, $[11] = restProps, $[12] = padding, $[13] = children, $[14] = overflow, $[15] = arrow, $[16] = arrowRef, $[17] = placement, $[18] = radius, $[19] = scheme, $[20] = shadow, $[21] = tone) : (marginsProp = $[1], xProp = $[2], yProp = $[3], animate = $[4], originX = $[5], originY = $[6], strategy = $[7], style = $[8], arrowX = $[9], arrowY = $[10], restProps = $[11], padding = $[12], children = $[13], overflow = $[14], arrow = $[15], arrowRef = $[16], placement = $[17], radius = $[18], scheme = $[19], shadow = $[20], tone = $[21]);
+  } = 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();
@@ -3791,163 +3801,139 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   let t1;
   const t2 = animate ? "transform" : void 0;
   let t3;
-  $[22] !== x || $[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== y || $[27] !== zIndex || $[28] !== t2 || $[29] !== style ? (t3 = {
+  $[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== style || $[27] !== t2 || $[28] !== width || $[29] !== x || $[30] !== y || $[31] !== zIndex ? (t3 = {
     left: x,
     originX,
     originY,
     position: strategy,
     top: y,
+    width,
     zIndex,
     willChange: t2,
     ...style
-  }, $[22] = x, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = y, $[27] = zIndex, $[28] = t2, $[29] = style, $[30] = t3) : t3 = $[30], t1 = t3;
+  }, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = style, $[27] = t2, $[28] = width, $[29] = x, $[30] = y, $[31] = zIndex, $[32] = t3) : t3 = $[32], t1 = t3;
   const rootStyle2 = t1;
   let t4;
   const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
   let t7;
-  $[31] !== t5 || $[32] !== t6 ? (t7 = {
+  $[33] !== t5 || $[34] !== t6 ? (t7 = {
     left: t5,
     top: t6,
     right: void 0,
     bottom: void 0
-  }, $[31] = t5, $[32] = t6, $[33] = t7) : t7 = $[33], t4 = t7;
+  }, $[33] = t5, $[34] = t6, $[35] = t7) : t7 = $[35], t4 = t7;
   const arrowStyle = t4, t8 = restProps;
   let t9;
-  $[34] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[34] = animate, $[35] = t9) : t9 = $[35];
+  $[36] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[36] = animate, $[37] = t9) : t9 = $[37];
   let t10;
-  $[36] !== padding || $[37] !== children ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[36] = padding, $[37] = children, $[38] = t10) : t10 = $[38];
+  $[38] !== children || $[39] !== padding ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = children, $[39] = padding, $[40] = t10) : t10 = $[40];
   let t11;
-  $[39] !== overflow || $[40] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[39] = overflow, $[40] = t10, $[41] = t11) : t11 = $[41];
+  $[41] !== overflow || $[42] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[41] = overflow, $[42] = t10, $[43] = t11) : t11 = $[43];
   let t12;
-  $[42] !== arrow || $[43] !== arrowRef || $[44] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[42] = arrow, $[43] = arrowRef, $[44] = arrowStyle, $[45] = t12) : t12 = $[45];
+  $[44] !== arrow || $[45] !== arrowRef || $[46] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[44] = arrow, $[45] = arrowRef, $[46] = arrowStyle, $[47] = t12) : t12 = $[47];
   let t13;
-  return $[46] !== t8 || $[47] !== placement || $[48] !== radius || $[49] !== ref || $[50] !== scheme || $[51] !== shadow || $[52] !== rootStyle2 || $[53] !== tone || $[54] !== t9 || $[55] !== t11 || $[56] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, ...t9, children: [
+  return $[48] !== placement || $[49] !== radius || $[50] !== ref || $[51] !== rootStyle2 || $[52] !== scheme || $[53] !== shadow || $[54] !== t11 || $[55] !== t12 || $[56] !== t8 || $[57] !== t9 || $[58] !== tone ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, ...t9, children: [
     t11,
     t12
-  ] }), $[46] = t8, $[47] = placement, $[48] = radius, $[49] = ref, $[50] = scheme, $[51] = shadow, $[52] = rootStyle2, $[53] = tone, $[54] = t9, $[55] = t11, $[56] = t12, $[57] = t13) : t13 = $[57], t13;
+  ] }), $[48] = placement, $[49] = radius, $[50] = ref, $[51] = rootStyle2, $[52] = scheme, $[53] = shadow, $[54] = t11, $[55] = t12, $[56] = t8, $[57] = t9, $[58] = tone, $[59] = t13) : t13 = $[59], t13;
 }));
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(128), {
+  const {
     container,
     layer
-  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
-  let t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, paddingProp, open, matchReferenceWidth, childProp, referenceElement, updateRef, disabled, restProps, scheme, content, portal;
-  if ($[0] !== props) {
-    const {
-      __unstable_margins: t112,
-      animate: t122,
-      arrow: t132,
-      boundaryElement: t142,
-      children: t152,
-      constrainSize: t162,
-      content: t172,
-      disabled: t182,
-      fallbackPlacements: t192,
-      matchReferenceWidth: t202,
-      floatingBoundary: t212,
-      onActivate,
-      open: t222,
-      overflow: t232,
-      padding: t242,
-      placement: t252,
-      portal: t262,
-      preventOverflow: t272,
-      radius: t282,
-      referenceBoundary: t292,
-      referenceElement: t302,
-      scheme: t312,
-      shadow: t322,
-      tone: t332,
-      width: t342,
-      zOffset: t352,
-      updateRef: t362,
-      ...t372
-    } = props;
-    t0 = t112, t1 = t122, t2 = t132, _boundaryElement = t142, childProp = t152, t3 = t162, content = t172, disabled = t182, _fallbackPlacements = t192, matchReferenceWidth = t202, _floatingBoundary = t212, open = t222, t4 = t232, paddingProp = t242, t5 = t252, portal = t262, t6 = t272, t7 = t282, _referenceBoundary = t292, referenceElement = t302, scheme = t312, t8 = t322, t9 = t332, t10 = t342, _zOffsetProp = t352, updateRef = t362, restProps = t372, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = t7, $[9] = t8, $[10] = t9, $[11] = t10, $[12] = _boundaryElement, $[13] = _fallbackPlacements, $[14] = _floatingBoundary, $[15] = _referenceBoundary, $[16] = _zOffsetProp, $[17] = paddingProp, $[18] = open, $[19] = matchReferenceWidth, $[20] = childProp, $[21] = referenceElement, $[22] = updateRef, $[23] = disabled, $[24] = restProps, $[25] = scheme, $[26] = content, $[27] = portal;
-  } else
-    t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], t7 = $[8], t8 = $[9], t9 = $[10], t10 = $[11], _boundaryElement = $[12], _fallbackPlacements = $[13], _floatingBoundary = $[14], _referenceBoundary = $[15], _zOffsetProp = $[16], paddingProp = $[17], open = $[18], matchReferenceWidth = $[19], childProp = $[20], referenceElement = $[21], updateRef = $[22], disabled = $[23], restProps = $[24], scheme = $[25], content = $[26], portal = $[27];
-  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, preventOverflow = t6 === void 0 ? !0 : t6, radiusProp = t7 === void 0 ? 3 : t7, shadowProp = t8 === void 0 ? 3 : t8, tone = t9 === void 0 ? "inherit" : t9, widthProp = t10 === void 0 ? "auto" : t10, boundaryElement = _boundaryElement ?? boundaryElementContext.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), [arrowElement, setArrowElement] = react.useState(null);
-  let t11;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[28] = t11) : t11 = $[28], react.useImperativeHandle(forwardedRef, t11);
-  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0;
-  let t12, t13;
-  $[29] !== open || $[30] !== constrainSize || $[31] !== matchReferenceWidth || $[32] !== container || $[33] !== mediaIndex || $[34] !== widthArrayProp || $[35] !== boundaryWidth ? (t12 = () => {
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
+    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
+    animate: _animate = !1,
+    arrow: arrowProp = !1,
+    boundaryElement = boundaryElementContext.element,
+    children: childProp,
+    constrainSize = !1,
+    content,
+    disabled,
+    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
+    matchReferenceWidth,
+    floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onActivate,
+    open,
+    overflow = "hidden",
+    padding: paddingProp,
+    placement: placementProp = "bottom",
+    portal,
+    preventOverflow = !0,
+    radius: radiusProp = 3,
+    referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    referenceElement,
+    scheme,
+    shadow: shadowProp = 3,
+    tone = "inherit",
+    width: widthProp = "auto",
+    zOffset: zOffsetProp = layer.popover.zOffset,
+    updateRef,
+    ...restProps
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
+    container,
+    mediaIndex,
+    width: widthArrayProp
+  }), widthRef = react.useRef(width);
+  react.useEffect(() => {
+    widthRef.current = width;
+  }, [width]);
+  const maxWidth = calcMaxWidth({
+    boundaryWidth,
+    currentWidth: width
+  }), maxWidthRef = react.useRef(maxWidth);
+  react.useEffect(() => {
+    maxWidthRef.current = maxWidth;
+  }, [maxWidth]);
+  const referenceWidthRef = react.useRef();
+  react.useEffect(() => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement || constrainSize || matchReferenceWidth)
-      return;
-    const currentWidth = calcCurrentWidth({
-      container,
-      mediaIndex,
-      width: widthArrayProp
-    }), maxWidth = calcMaxWidth({
-      boundaryWidth,
-      currentWidth
-    });
-    currentWidth !== void 0 && (floatingElement.style.width = `${currentWidth}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
-  }, t13 = [boundaryWidth, constrainSize, container, matchReferenceWidth, mediaIndex, open, widthArrayProp], $[29] = open, $[30] = constrainSize, $[31] = matchReferenceWidth, $[32] = container, $[33] = mediaIndex, $[34] = widthArrayProp, $[35] = boundaryWidth, $[36] = t12, $[37] = t13) : (t12 = $[36], t13 = $[37]), react.useLayoutEffect(t12, t13);
-  let t14;
-  $[38] !== constrainSize || $[39] !== preventOverflow || $[40] !== floatingBoundary || $[41] !== fallbackPlacements ? (t14 = (constrainSize || preventOverflow) && reactDom$1.flip({
-    boundary: floatingBoundary || void 0,
-    fallbackPlacements,
-    padding: DEFAULT_POPOVER_PADDING,
-    rootBoundary: "viewport"
-  }), $[38] = constrainSize, $[39] = preventOverflow, $[40] = floatingBoundary, $[41] = fallbackPlacements, $[42] = t14) : t14 = $[42];
-  let t15;
-  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t15 = reactDom$1.offset({
-    mainAxis: DEFAULT_POPOVER_DISTANCE
-  }), $[43] = t15) : t15 = $[43];
-  let t16;
-  $[44] !== constrainSize || $[45] !== matchReferenceWidth || $[46] !== container || $[47] !== mediaIndex || $[48] !== widthArrayProp || $[49] !== boundaryWidth || $[50] !== floatingBoundary || $[51] !== margins ? (t16 = (constrainSize || matchReferenceWidth) && size({
-    apply(t172) {
-      const {
+    if (!open || !floatingElement) return;
+    const referenceWidth = referenceWidthRef.current;
+    matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
+  }, [width, matchReferenceWidth, maxWidth, open]);
+  const middleware = react.useMemo(() => {
+    const ret = [];
+    return (constrainSize || preventOverflow) && ret.push(reactDom$1.flip({
+      boundary: floatingBoundary || void 0,
+      fallbackPlacements,
+      padding: DEFAULT_POPOVER_PADDING,
+      rootBoundary
+    })), ret.push(reactDom$1.offset({
+      mainAxis: DEFAULT_POPOVER_DISTANCE
+    })), (constrainSize || matchReferenceWidth) && ret.push(size({
+      apply({
         availableWidth,
         availableHeight,
         elements,
-        referenceWidth
-      } = t172, currentWidth_0 = calcCurrentWidth({
-        container,
-        mediaIndex,
-        width: widthArrayProp
-      }), maxWidth_0 = calcMaxWidth({
-        boundaryWidth,
-        currentWidth: currentWidth_0
-      });
-      matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : currentWidth_0 !== void 0 && (elements.floating.style.width = `${currentWidth_0}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidth_0 ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-    },
-    boundaryElement: floatingBoundary || void 0,
-    constrainSize,
-    margins,
-    matchReferenceWidth,
-    padding: DEFAULT_POPOVER_PADDING
-  }), $[44] = constrainSize, $[45] = matchReferenceWidth, $[46] = container, $[47] = mediaIndex, $[48] = widthArrayProp, $[49] = boundaryWidth, $[50] = floatingBoundary, $[51] = margins, $[52] = t16) : t16 = $[52];
-  let t17;
-  $[53] !== preventOverflow || $[54] !== floatingBoundary ? (t17 = preventOverflow && reactDom$1.shift({
-    boundary: floatingBoundary || void 0,
-    rootBoundary: "viewport",
-    padding: DEFAULT_POPOVER_PADDING
-  }), $[53] = preventOverflow, $[54] = floatingBoundary, $[55] = t17) : t17 = $[55];
-  let t18;
-  $[56] !== arrowProp || $[57] !== arrowElement ? (t18 = arrowProp && reactDom$1.arrow({
-    element: arrowElement,
-    padding: DEFAULT_POPOVER_PADDING
-  }), $[56] = arrowProp, $[57] = arrowElement, $[58] = t18) : t18 = $[58];
-  const t19 = animate && origin, t20 = referenceBoundary || void 0;
-  let t21;
-  $[59] !== t20 ? (t21 = reactDom$1.hide({
-    boundary: t20,
-    padding: DEFAULT_POPOVER_PADDING,
-    strategy: "referenceHidden"
-  }), $[59] = t20, $[60] = t21) : t21 = $[60];
-  let t22;
-  $[61] !== t14 || $[62] !== t16 || $[63] !== t17 || $[64] !== t18 || $[65] !== t19 || $[66] !== t21 ? (t22 = [t14, t15, t16, t17, t18, t19, t21], $[61] = t14, $[62] = t16, $[63] = t17, $[64] = t18, $[65] = t19, $[66] = t21, $[67] = t22) : t22 = $[67];
-  let t23;
-  $[68] !== t22 || $[69] !== placementProp ? (t23 = {
-    middleware: t22,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate
-  }, $[68] = t22, $[69] = placementProp, $[70] = t23) : t23 = $[70];
-  const {
+        referenceWidth: referenceWidth_0
+      }) {
+        referenceWidthRef.current = referenceWidth_0;
+        const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
+        matchReferenceWidth ? elements.floating.style.width = `${referenceWidth_0}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, _maxWidth ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+      },
+      boundaryElement: floatingBoundary || void 0,
+      constrainSize,
+      margins,
+      matchReferenceWidth,
+      padding: DEFAULT_POPOVER_PADDING
+    })), preventOverflow && ret.push(reactDom$1.shift({
+      boundary: floatingBoundary || void 0,
+      rootBoundary,
+      padding: DEFAULT_POPOVER_PADDING
+    })), arrowProp && ret.push(reactDom$1.arrow({
+      element: arrowRef,
+      padding: DEFAULT_POPOVER_PADDING
+    })), animate && ret.push(origin), ret.push(reactDom$1.hide({
+      boundary: referenceBoundary || void 0,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    })), ret;
+  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
     x,
     y,
     middlewareData,
@@ -3955,61 +3941,35 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating(t23), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
-  let t24;
-  $[71] !== refs ? (t24 = (node) => {
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate
+  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = react.useCallback((arrowEl) => {
+    arrowRef.current = arrowEl;
+  }, []), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, $[71] = refs, $[72] = t24) : t24 = $[72];
-  const setFloating = t24, [childElement, setChildElement] = react.useState(null);
-  let t25;
-  $[73] !== refs ? (t25 = (node_0) => {
-    refs.setReference(node_0), setChildElement(node_0);
-  }, $[73] = refs, $[74] = t25) : t25 = $[74];
-  const setReference = t25, t26 = childProp;
-  let t27;
-  $[75] !== t26 ? (t27 = getElementRef$1(t26), $[75] = t26, $[76] = t27) : t27 = $[76];
-  let t28, t29;
-  $[77] !== childElement ? (t28 = () => childElement, t29 = [childElement], $[77] = childElement, $[78] = t28, $[79] = t29) : (t28 = $[78], t29 = $[79]), react.useImperativeHandle(t27, t28, t29);
-  let t30;
-  bb0: {
-    if (!childProp || referenceElement) {
-      t30 = null;
-      break bb0;
-    }
-    let t312;
-    $[80] !== setReference || $[81] !== childProp ? (t312 = react.cloneElement(childProp, {
-      ref: setReference
-    }), $[80] = setReference, $[81] = childProp, $[82] = t312) : t312 = $[82], t30 = t312;
-  }
-  const child = t30;
-  let t31, t32;
-  $[83] !== update ? (t31 = () => update, t32 = [update], $[83] = update, $[84] = t31, $[85] = t32) : (t31 = $[84], t32 = $[85]), react.useImperativeHandle(updateRef, t31, t32);
-  let t33, t34;
-  if ($[86] !== child || $[87] !== refs || $[88] !== referenceElement ? (t33 = () => {
-    child || refs.setReference(referenceElement || null);
-  }, t34 = [referenceElement, refs, child], $[86] = child, $[87] = refs, $[88] = referenceElement, $[89] = t33, $[90] = t34) : (t33 = $[89], t34 = $[90]), react.useEffect(t33, t34), disabled) {
-    let t352;
-    return $[91] !== childProp ? (t352 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[91] = childProp, $[92] = t352) : t352 = $[92], t352;
-  }
-  let t35;
-  $[93] !== restProps || $[94] !== margins || $[95] !== animate || $[96] !== arrowProp || $[97] !== arrowX || $[98] !== arrowY || $[99] !== referenceHidden || $[100] !== overflow || $[101] !== padding || $[102] !== placement || $[103] !== radius || $[104] !== setFloating || $[105] !== scheme || $[106] !== shadow || $[107] !== originX || $[108] !== originY || $[109] !== strategy || $[110] !== tone || $[111] !== x || $[112] !== y || $[113] !== content ? (t35 = /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrowElement, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, x, y, children: content }), $[93] = restProps, $[94] = margins, $[95] = animate, $[96] = arrowProp, $[97] = arrowX, $[98] = arrowY, $[99] = referenceHidden, $[100] = overflow, $[101] = padding, $[102] = placement, $[103] = radius, $[104] = setFloating, $[105] = scheme, $[106] = shadow, $[107] = originX, $[108] = originY, $[109] = strategy, $[110] = tone, $[111] = x, $[112] = y, $[113] = content, $[114] = t35) : t35 = $[114];
-  let t36;
-  $[115] !== zOffset || $[116] !== t35 ? (t36 = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: t35 }), $[115] = zOffset, $[116] = t35, $[117] = t36) : t36 = $[117];
-  const popover = t36;
-  let t37;
-  $[118] !== open || $[119] !== portal || $[120] !== popover ? (t37 = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[118] = open, $[119] = portal, $[120] = popover, $[121] = t37) : t37 = $[121];
-  const children = t37;
-  let t38;
-  $[122] !== animate || $[123] !== children ? (t38 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[122] = animate, $[123] = children, $[124] = t38) : t38 = $[124];
-  let t39;
-  return $[125] !== t38 || $[126] !== child ? (t39 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t38,
+  }, [refs]), setReference = react.useCallback((node_0) => {
+    refs.setReference(node_0);
+    const childRef = getElementRef(childProp);
+    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
+  }, [childProp, refs]), child = react.useMemo(() => referenceElement ? childProp : childProp ? react.cloneElement(childProp, {
+    ref: setReference
+  }) : null, [childProp, referenceElement, setReference]);
+  if (react.useEffect(() => {
+    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
+  }, [update, updateRef]), react.useEffect(() => {
+    referenceElement && refs.setReference(referenceElement);
+  }, [referenceElement, refs]), disabled)
+    return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content }) }), children = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child
-  ] }), $[125] = t38, $[126] = child, $[127] = t39) : t39 = $[127], t39;
+  ] });
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
-function getElementRef$1(element) {
-  if (!element) return null;
+function getElementRef(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
@@ -4129,7 +4089,7 @@ function inputElementStyle(props) {
 }
 const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComponents.styled.input(inputElementStyle), Radio = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(19);
-  let customValidity, disabled, readOnly, restProps, className, style;
+  let className, customValidity, disabled, readOnly, restProps, style;
   $[0] !== props ? ({
     className,
     disabled,
@@ -4137,13 +4097,13 @@ const Root$g = styledComponents.styled.div(radioBaseStyle), Input$4 = styledComp
     customValidity,
     readOnly,
     ...restProps
-  } = props, $[0] = props, $[1] = customValidity, $[2] = disabled, $[3] = readOnly, $[4] = restProps, $[5] = className, $[6] = style) : (customValidity = $[1], disabled = $[2], readOnly = $[3], restProps = $[4], className = $[5], style = $[6]);
+  } = 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] !== t1 || $[9] !== t2 || $[10] !== restProps || $[11] !== t3 || $[12] !== readOnly ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Input$4, { "data-read-only": t1, "data-error": t2, ...restProps, disabled: t3, readOnly, ref, type: "radio" }), $[8] = t1, $[9] = t2, $[10] = restProps, $[11] = t3, $[12] = readOnly, $[13] = t4) : t4 = $[13];
+  $[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;
@@ -4297,7 +4257,7 @@ const selectStyle = {
   iconBox: iconBoxStyle
 }, Root$f = styledComponents.styled.div(selectStyle.root), Input$3 = styledComponents.styled.select(selectStyle.input), IconBox = styledComponents.styled(Box)(selectStyle.iconBox), Select = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(29);
-  let t0, t1, t2, t3, customValidity, disabled, readOnly, restProps, children;
+  let children, customValidity, disabled, readOnly, restProps, t0, t1, t2, t3;
   $[0] !== props ? ({
     children,
     customValidity,
@@ -4308,13 +4268,13 @@ const selectStyle = {
     readOnly,
     space: t3,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = customValidity, $[6] = disabled, $[7] = readOnly, $[8] = restProps, $[9] = children) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], customValidity = $[5], disabled = $[6], readOnly = $[7], restProps = $[8], children = $[9]);
+  } = props, $[0] = props, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = readOnly, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3) : (children = $[1], customValidity = $[2], disabled = $[3], readOnly = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9]);
   const fontSize2 = t0 === void 0 ? 2 : t0, padding = t1 === void 0 ? 3 : t1, radius = t2 === void 0 ? 2 : t2, space = t3 === void 0 ? 3 : t3, ref = react.useRef(null);
   let t4;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4), useCustomValidity(ref, customValidity);
   const t5 = !disabled && readOnly ? "" : void 0, t6 = useArrayProp(fontSize2), t7 = useArrayProp(padding), t8 = useArrayProp(radius), t9 = useArrayProp(space), t10 = disabled || readOnly;
   let t11;
-  $[11] !== t5 || $[12] !== restProps || $[13] !== t6 || $[14] !== t7 || $[15] !== t8 || $[16] !== t9 || $[17] !== t10 || $[18] !== children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = t5, $[12] = restProps, $[13] = t6, $[14] = t7, $[15] = t8, $[16] = t9, $[17] = t10, $[18] = children, $[19] = t11) : t11 = $[19];
+  $[11] !== children || $[12] !== restProps || $[13] !== t10 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Input$3, { "data-read-only": t5, "data-ui": "Select", ...restProps, $fontSize: t6, $padding: t7, $radius: t8, $space: t9, disabled: t10, ref, children }), $[11] = children, $[12] = restProps, $[13] = t10, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8, $[18] = t9, $[19] = t11) : t11 = $[19];
   let t12;
   $[20] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}), $[20] = t12) : t12 = $[20];
   let t13;
@@ -4352,15 +4312,15 @@ function responsiveStackSpaceStyle(props) {
 }
 const Root$e = styledComponents.styled(Box)(stackBaseStyle, responsiveStackSpaceStyle), Stack = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(10);
-  let as, space, restProps;
+  let as, restProps, space;
   $[0] !== props ? ({
     as,
     space,
     ...restProps
-  } = props, $[0] = props, $[1] = as, $[2] = space, $[3] = restProps) : (as = $[1], space = $[2], restProps = $[3]);
+  } = props, $[0] = props, $[1] = as, $[2] = restProps, $[3] = space) : (as = $[1], restProps = $[2], space = $[3]);
   const t0 = typeof as == "string" ? as : void 0, t1 = useArrayProp(space);
   let t2;
-  return $[4] !== t0 || $[5] !== restProps || $[6] !== t1 || $[7] !== as || $[8] !== ref ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$e, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = t0, $[5] = restProps, $[6] = t1, $[7] = as, $[8] = ref, $[9] = t2) : t2 = $[9], t2;
+  return $[4] !== as || $[5] !== ref || $[6] !== restProps || $[7] !== t0 || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Root$e, { "data-as": t0, "data-ui": "Stack", ...restProps, $space: t1, forwardedAs: as, ref }), $[4] = as, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
 });
 Stack.displayName = "ForwardRef(Stack)";
 function switchBaseStyles() {
@@ -4518,7 +4478,7 @@ function switchThumbStyles(props) {
 }
 const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledComponents.styled.input(switchInputStyles), Representation = styledComponents.styled.span(switchRepresentationStyles), Track = styledComponents.styled.span(switchTrackStyles), Thumb = styledComponents.styled.span(switchThumbStyles), Switch = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(26);
-  let indeterminate, disabled, readOnly, checked, restProps, className, style;
+  let checked, className, disabled, indeterminate, readOnly, restProps, style;
   $[0] !== props ? ({
     checked,
     className,
@@ -4527,7 +4487,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
     readOnly,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = indeterminate, $[2] = disabled, $[3] = readOnly, $[4] = checked, $[5] = restProps, $[6] = className, $[7] = style) : (indeterminate = $[1], disabled = $[2], readOnly = $[3], checked = $[4], restProps = $[5], className = $[6], style = $[7]);
+  } = 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);
@@ -4537,7 +4497,7 @@ const Root$d = styledComponents.styled.span(switchBaseStyles), Input$2 = styledC
   }, 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] !== t3 || $[13] !== restProps || $[14] !== t4 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Input$2, { "data-read-only": t3, ...restProps, checked: t4, disabled: t5, type: "checkbox", ref }), $[12] = t3, $[13] = restProps, $[14] = t4, $[15] = t5, $[16] = t6) : t6 = $[16];
+  $[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;
@@ -4559,7 +4519,7 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
   position: relative;
 `, Input$1 = styledComponents.styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle), Presentation$1 = styledComponents.styled.div(responsiveRadiusStyle, textInputRepresentationStyle), TextArea = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(29);
-  let t0, t1, t2, t3, t4, customValidity, restProps, weight, __unstable_disableFocusRing;
+  let __unstable_disableFocusRing, customValidity, restProps, t0, t1, t2, t3, t4, weight;
   $[0] !== props ? ({
     border: t0,
     customValidity,
@@ -4570,16 +4530,16 @@ const Root$c = styledComponents.styled.span(textInputRootStyle), InputRoot$1 = s
     weight,
     __unstable_disableFocusRing,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = customValidity, $[7] = restProps, $[8] = weight, $[9] = __unstable_disableFocusRing) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], customValidity = $[6], restProps = $[7], weight = $[8], __unstable_disableFocusRing = $[9]);
+  } = props, $[0] = props, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = restProps, $[4] = t0, $[5] = t1, $[6] = t2, $[7] = t3, $[8] = t4, $[9] = weight) : (__unstable_disableFocusRing = $[1], customValidity = $[2], restProps = $[3], t0 = $[4], t1 = $[5], t2 = $[6], t3 = $[7], t4 = $[8], weight = $[9]);
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSize2 = t2 === void 0 ? 2 : t2, padding = t3 === void 0 ? 3 : t3, radius = t4 === void 0 ? 2 : t4, ref = react.useRef(null), rootTheme = useRootTheme();
   let t5;
   $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[10] = t5) : t5 = $[10], react.useImperativeHandle(forwardedRef, t5), useCustomValidity(ref, customValidity);
   const t6 = rootTheme.scheme, t7 = rootTheme.tone, t8 = useArrayProp(fontSize2), t9 = useArrayProp(padding), t10 = rootTheme.scheme, t11 = useArrayProp(0);
   let t12;
-  $[11] !== rootTheme.scheme || $[12] !== rootTheme.tone || $[13] !== restProps || $[14] !== t8 || $[15] !== t9 || $[16] !== t11 || $[17] !== weight || $[18] !== disabled ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[11] = rootTheme.scheme, $[12] = rootTheme.tone, $[13] = restProps, $[14] = t8, $[15] = t9, $[16] = t11, $[17] = weight, $[18] = disabled, $[19] = t12) : t12 = $[19];
+  $[11] !== disabled || $[12] !== restProps || $[13] !== rootTheme.scheme || $[14] !== rootTheme.tone || $[15] !== t11 || $[16] !== t8 || $[17] !== t9 || $[18] !== weight ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Input$1, { "data-as": "textarea", "data-scheme": t6, "data-tone": t7, ...restProps, $fontSize: t8, $padding: t9, $scheme: t10, $space: t11, $tone: rootTheme.tone, $weight: weight, disabled, ref }), $[11] = disabled, $[12] = restProps, $[13] = rootTheme.scheme, $[14] = rootTheme.tone, $[15] = t11, $[16] = t8, $[17] = t9, $[18] = weight, $[19] = t12) : t12 = $[19];
   const t13 = useArrayProp(radius), t14 = border2 ? "" : void 0;
   let t15;
-  $[20] !== t13 || $[21] !== __unstable_disableFocusRing || $[22] !== rootTheme.scheme || $[23] !== rootTheme.tone || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = t13, $[21] = __unstable_disableFocusRing, $[22] = rootTheme.scheme, $[23] = rootTheme.tone, $[24] = t14, $[25] = t15) : t15 = $[25];
+  $[20] !== __unstable_disableFocusRing || $[21] !== rootTheme.scheme || $[22] !== rootTheme.tone || $[23] !== t13 || $[24] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsx(Presentation$1, { $radius: t13, $unstableDisableFocusRing: __unstable_disableFocusRing, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t14, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone }), $[20] = __unstable_disableFocusRing, $[21] = rootTheme.scheme, $[22] = rootTheme.tone, $[23] = t13, $[24] = t14, $[25] = t15) : t15 = $[25];
   let t16;
   return $[26] !== t12 || $[27] !== t15 ? (t16 = /* @__PURE__ */ jsxRuntime.jsx(Root$c, { "data-ui": "TextArea", children: /* @__PURE__ */ jsxRuntime.jsxs(InputRoot$1, { children: [
     t12,
@@ -4634,8 +4594,8 @@ const CLEAR_BUTTON_BOX_STYLE = {
     display: "block"
   }
 }), TextInput = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(86);
-  let t0, t1, t2, t3, t4, t5, t6, clearButton, IconComponent, IconRightComponent, suffix, prefix, customValidity, onClear, __unstable_disableFocusRing, readOnly, restProps, weight;
+  const $ = reactCompilerRuntime.c(84);
+  let IconComponent, IconRightComponent, __unstable_disableFocusRing, clearButton, customValidity, onClear, prefix, readOnly, restProps, suffix, t0, t1, t2, t3, t4, t5, t6, weight;
   $[0] !== props ? ({
     __unstable_disableFocusRing,
     border: t0,
@@ -4655,11 +4615,11 @@ const CLEAR_BUTTON_BOX_STYLE = {
     type: t6,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = clearButton, $[9] = IconComponent, $[10] = IconRightComponent, $[11] = suffix, $[12] = prefix, $[13] = customValidity, $[14] = onClear, $[15] = __unstable_disableFocusRing, $[16] = readOnly, $[17] = restProps, $[18] = weight) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], clearButton = $[8], IconComponent = $[9], IconRightComponent = $[10], suffix = $[11], prefix = $[12], customValidity = $[13], onClear = $[14], __unstable_disableFocusRing = $[15], readOnly = $[16], restProps = $[17], weight = $[18]);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = clearButton, $[5] = customValidity, $[6] = onClear, $[7] = prefix, $[8] = readOnly, $[9] = restProps, $[10] = suffix, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = weight) : (IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], clearButton = $[4], customValidity = $[5], onClear = $[6], prefix = $[7], readOnly = $[8], restProps = $[9], suffix = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16], t6 = $[17], weight = $[18]);
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t7;
   $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$2;
+  const handleClearMouseDown = _temp$3;
   let t8;
   $[20] !== onClear ? (t8 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
@@ -4681,55 +4641,51 @@ const CLEAR_BUTTON_BOX_STYLE = {
     ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
   ] }) }), $[29] = $hasClearButton, $[30] = IconRightComponent, $[31] = fontSize2, $[32] = padding, $[33] = t14) : t14 = $[33];
   let t15;
-  $[34] !== $hasPrefix || $[35] !== __unstable_disableFocusRing || $[36] !== $hasSuffix || $[37] !== radius || $[38] !== rootTheme.scheme || $[39] !== rootTheme.tone || $[40] !== t12 || $[41] !== t13 || $[42] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t12, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
+  $[34] !== $hasPrefix || $[35] !== $hasSuffix || $[36] !== __unstable_disableFocusRing || $[37] !== radius || $[38] !== rootTheme.scheme || $[39] !== rootTheme.tone || $[40] !== t12 || $[41] !== t13 || $[42] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(Presentation, { $hasPrefix, $unstableDisableFocusRing: __unstable_disableFocusRing, $hasSuffix, $radius: radius, $scheme: rootTheme.scheme, $tone: rootTheme.tone, "data-border": t12, "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, children: [
     t13,
     t14
-  ] }), $[34] = $hasPrefix, $[35] = __unstable_disableFocusRing, $[36] = $hasSuffix, $[37] = radius, $[38] = rootTheme.scheme, $[39] = rootTheme.tone, $[40] = t12, $[41] = t13, $[42] = t14, $[43] = t15) : t15 = $[43], t11 = t15;
+  ] }), $[34] = $hasPrefix, $[35] = $hasSuffix, $[36] = __unstable_disableFocusRing, $[37] = radius, $[38] = rootTheme.scheme, $[39] = rootTheme.tone, $[40] = t12, $[41] = t13, $[42] = t14, $[43] = t15) : t15 = $[43], t11 = t15;
   const presentationNode = t11;
   let t16, t17;
-  if ($[44] !== padding) {
-    let t182;
-    $[46] === Symbol.for("react.memo_cache_sentinel") ? (t182 = (v) => v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2, $[46] = t182) : t182 = $[46], t17 = padding.map(t182), $[44] = padding, $[45] = t17;
-  } else
-    t17 = $[45];
-  t16 = t17;
+  $[44] !== padding ? (t17 = padding.map(_temp2$1), $[44] = padding, $[45] = t17) : t17 = $[45], t16 = t17;
   const clearButtonBoxPadding = t16;
   let t18, t19;
-  if ($[47] !== padding) {
-    let t202;
-    $[49] === Symbol.for("react.memo_cache_sentinel") ? (t202 = (v_0) => v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1, $[49] = t202) : t202 = $[49], t19 = padding.map(t202), $[47] = padding, $[48] = t19;
-  } else
-    t19 = $[48];
-  t18 = t19;
+  $[46] !== padding ? (t19 = padding.map(_temp3), $[46] = padding, $[47] = t19) : t19 = $[47], t18 = t19;
   const clearButtonPadding = t18;
   let t20;
   t20 = typeof clearButton == "object" ? clearButton : EMPTY_RECORD;
   const clearButtonProps = t20;
   let t21, t22;
-  $[50] !== disabled || $[51] !== readOnly || $[52] !== clearButton || $[53] !== customValidity || $[54] !== fontSize2 || $[55] !== clearButtonPadding || $[56] !== radius || $[57] !== clearButtonProps || $[58] !== handleClearClick || $[59] !== clearButtonBoxPadding ? (t22 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[50] = disabled, $[51] = readOnly, $[52] = clearButton, $[53] = customValidity, $[54] = fontSize2, $[55] = clearButtonPadding, $[56] = radius, $[57] = clearButtonProps, $[58] = handleClearClick, $[59] = clearButtonBoxPadding, $[60] = t22) : t22 = $[60], t21 = t22;
+  $[48] !== clearButton || $[49] !== clearButtonBoxPadding || $[50] !== clearButtonPadding || $[51] !== clearButtonProps || $[52] !== customValidity || $[53] !== disabled || $[54] !== fontSize2 || $[55] !== handleClearClick || $[56] !== radius || $[57] !== readOnly ? (t22 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsxRuntime.jsx(RightCard, { forwardedAs: "span", padding: clearButtonBoxPadding, style: CLEAR_BUTTON_BOX_STYLE, tone: customValidity ? "critical" : "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(TextInputClearButton, { "aria-label": "Clear", "data-qa": "clear-button", fontSize: fontSize2, icon: icons.CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[48] = clearButton, $[49] = clearButtonBoxPadding, $[50] = clearButtonPadding, $[51] = clearButtonProps, $[52] = customValidity, $[53] = disabled, $[54] = fontSize2, $[55] = handleClearClick, $[56] = radius, $[57] = readOnly, $[58] = t22) : t22 = $[58], t21 = t22;
   const clearButtonNode = t21;
   let t23, t24;
-  $[61] !== suffix || $[62] !== radius ? (t24 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[61] = suffix, $[62] = radius, $[63] = t24) : t24 = $[63], t23 = t24;
+  $[59] !== radius || $[60] !== suffix ? (t24 = suffix && /* @__PURE__ */ jsxRuntime.jsx(Suffix, { borderTop: !0, borderRight: !0, borderBottom: !0, radius, sizing: "border", tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: suffix }) }), $[59] = radius, $[60] = suffix, $[61] = t24) : t24 = $[61], t23 = t24;
   const suffixNode = t23, t25 = $hasIconRight || $hasClearButton;
   let t26;
-  $[64] !== rootTheme.scheme || $[65] !== rootTheme.tone || $[66] !== restProps || $[67] !== fontSize2 || $[68] !== $hasIcon || $[69] !== t25 || $[70] !== padding || $[71] !== space || $[72] !== weight || $[73] !== disabled || $[74] !== readOnly || $[75] !== type ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t25, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[64] = rootTheme.scheme, $[65] = rootTheme.tone, $[66] = restProps, $[67] = fontSize2, $[68] = $hasIcon, $[69] = t25, $[70] = padding, $[71] = space, $[72] = weight, $[73] = disabled, $[74] = readOnly, $[75] = type, $[76] = t26) : t26 = $[76];
+  $[62] !== $hasIcon || $[63] !== disabled || $[64] !== fontSize2 || $[65] !== padding || $[66] !== readOnly || $[67] !== restProps || $[68] !== rootTheme.scheme || $[69] !== rootTheme.tone || $[70] !== space || $[71] !== t25 || $[72] !== type || $[73] !== weight ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Input, { "data-as": "input", "data-scheme": rootTheme.scheme, "data-tone": rootTheme.tone, ...restProps, $fontSize: fontSize2, $iconLeft: $hasIcon, $iconRight: t25, $padding: padding, $scheme: rootTheme.scheme, $space: space, $tone: rootTheme.tone, $weight: weight, disabled, readOnly, ref, type }), $[62] = $hasIcon, $[63] = disabled, $[64] = fontSize2, $[65] = padding, $[66] = readOnly, $[67] = restProps, $[68] = rootTheme.scheme, $[69] = rootTheme.tone, $[70] = space, $[71] = t25, $[72] = type, $[73] = weight, $[74] = t26) : t26 = $[74];
   let t27;
-  $[77] !== t26 || $[78] !== presentationNode || $[79] !== clearButtonNode ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
+  $[75] !== clearButtonNode || $[76] !== presentationNode || $[77] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
     t26,
     presentationNode,
     clearButtonNode
-  ] }), $[77] = t26, $[78] = presentationNode, $[79] = clearButtonNode, $[80] = t27) : t27 = $[80];
+  ] }), $[75] = clearButtonNode, $[76] = presentationNode, $[77] = t26, $[78] = t27) : t27 = $[78];
   let t28;
-  return $[81] !== rootTheme.tone || $[82] !== prefixNode || $[83] !== t27 || $[84] !== suffixNode ? (t28 = /* @__PURE__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
+  return $[79] !== prefixNode || $[80] !== rootTheme.tone || $[81] !== suffixNode || $[82] !== t27 ? (t28 = /* @__PURE__ */ jsxRuntime.jsxs(Root$b, { "data-ui": "TextInput", tone: rootTheme.tone, children: [
     prefixNode,
     t27,
     suffixNode
-  ] }), $[81] = rootTheme.tone, $[82] = prefixNode, $[83] = t27, $[84] = suffixNode, $[85] = t28) : t28 = $[85], t28;
+  ] }), $[79] = prefixNode, $[80] = rootTheme.tone, $[81] = suffixNode, $[82] = t27, $[83] = t28) : t28 = $[83], t28;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
-function _temp$2(event) {
+function _temp$3(event) {
   event.preventDefault(), event.stopPropagation();
 }
+function _temp2$1(v) {
+  return v === 0 ? 0 : v === 1 || v === 2 ? 1 : v - 2;
+}
+function _temp3(v_0) {
+  return v_0 === 0 || v_0 === 1 ? 0 : v_0 === 2 ? 1 : v_0 - 1;
+}
 function useDelayedState(initialState) {
   const $ = reactCompilerRuntime.c(3), [state, setState] = react.useState(initialState), delayedAction = react.useRef();
   let t0;
@@ -4765,7 +4721,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   }
 `, TooltipCard = react.memo(react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(42);
-  let animate, originX, originY, style, arrowX, arrowY, restProps, arrow, arrowRef, placement, padding, radius, scheme, shadow, children;
+  let animate, arrow, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, restProps, scheme, shadow, style;
   $[0] !== props ? ({
     animate,
     arrow,
@@ -4782,16 +4738,16 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
     shadow,
     style,
     ...restProps
-  } = props, $[0] = props, $[1] = animate, $[2] = originX, $[3] = originY, $[4] = style, $[5] = arrowX, $[6] = arrowY, $[7] = restProps, $[8] = arrow, $[9] = arrowRef, $[10] = placement, $[11] = padding, $[12] = radius, $[13] = scheme, $[14] = shadow, $[15] = children) : (animate = $[1], originX = $[2], originY = $[3], style = $[4], arrowX = $[5], arrowY = $[6], restProps = $[7], arrow = $[8], arrowRef = $[9], placement = $[10], padding = $[11], radius = $[12], scheme = $[13], shadow = $[14], children = $[15]);
+  } = 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]);
   let t0;
   const t1 = animate ? "transform" : void 0;
   let t2;
-  $[16] !== originX || $[17] !== originY || $[18] !== t1 || $[19] !== style ? (t2 = {
+  $[16] !== originX || $[17] !== originY || $[18] !== style || $[19] !== t1 ? (t2 = {
     originX,
     originY,
     willChange: t1,
     ...style
-  }, $[16] = originX, $[17] = originY, $[18] = t1, $[19] = style, $[20] = t2) : t2 = $[20], t0 = t2;
+  }, $[16] = originX, $[17] = originY, $[18] = style, $[19] = t1, $[20] = t2) : t2 = $[20], t0 = t2;
   const rootStyle2 = t0;
   let t3;
   const t4 = arrowX !== null ? arrowX : void 0, t5 = arrowY !== null ? arrowY : void 0;
@@ -4808,10 +4764,10 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   let t9;
   $[26] !== arrow || $[27] !== arrowRef || $[28] !== 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 }), $[26] = arrow, $[27] = arrowRef, $[28] = arrowStyle, $[29] = t9) : t9 = $[29];
   let t10;
-  return $[30] !== t7 || $[31] !== placement || $[32] !== padding || $[33] !== radius || $[34] !== ref || $[35] !== scheme || $[36] !== shadow || $[37] !== rootStyle2 || $[38] !== t8 || $[39] !== children || $[40] !== t9 ? (t10 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { "data-ui": "Tooltip__card", ...t7, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, ...t8, children: [
+  return $[30] !== children || $[31] !== padding || $[32] !== placement || $[33] !== radius || $[34] !== ref || $[35] !== rootStyle2 || $[36] !== scheme || $[37] !== shadow || $[38] !== t7 || $[39] !== t8 || $[40] !== t9 ? (t10 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { "data-ui": "Tooltip__card", ...t7, "data-placement": placement, padding, radius, ref, scheme, shadow, style: rootStyle2, ...t8, children: [
     children,
     t9
-  ] }), $[30] = t7, $[31] = placement, $[32] = padding, $[33] = radius, $[34] = ref, $[35] = scheme, $[36] = shadow, $[37] = rootStyle2, $[38] = t8, $[39] = children, $[40] = t9, $[41] = t10) : t10 = $[41], t10;
+  ] }), $[30] = children, $[31] = padding, $[32] = placement, $[33] = radius, $[34] = ref, $[35] = rootStyle2, $[36] = scheme, $[37] = shadow, $[38] = t7, $[39] = t8, $[40] = t9, $[41] = t10) : t10 = $[41], t10;
 }));
 TooltipCard.displayName = "Memo(ForwardRef(TooltipCard))";
 const TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/context/tooltipDelayGroup", null);
@@ -4826,96 +4782,71 @@ function TooltipDelayGroupProvider(props) {
   let t0;
   const t1 = isGroupActive ? 1 : openDelay;
   let t2;
-  $[0] !== isGroupActive || $[1] !== setIsGroupActive || $[2] !== openTooltipId || $[3] !== setOpenTooltipId || $[4] !== t1 || $[5] !== closeDelay ? (t2 = {
+  $[0] !== closeDelay || $[1] !== isGroupActive || $[2] !== openTooltipId || $[3] !== setIsGroupActive || $[4] !== setOpenTooltipId || $[5] !== t1 ? (t2 = {
     isGroupActive,
     setIsGroupActive,
     openTooltipId,
     setOpenTooltipId,
     openDelay: t1,
     closeDelay
-  }, $[0] = isGroupActive, $[1] = setIsGroupActive, $[2] = openTooltipId, $[3] = setOpenTooltipId, $[4] = t1, $[5] = closeDelay, $[6] = t2) : t2 = $[6], t0 = t2;
+  }, $[0] = closeDelay, $[1] = isGroupActive, $[2] = openTooltipId, $[3] = setIsGroupActive, $[4] = setOpenTooltipId, $[5] = t1, $[6] = t2) : t2 = $[6], t0 = t2;
   const value = t0;
   let t3;
-  return $[7] !== value || $[8] !== children ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = value, $[8] = children, $[9] = t3) : t3 = $[9], t3;
+  return $[7] !== children || $[8] !== value ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(TooltipDelayGroupContext.Provider, { value, children }), $[7] = children, $[8] = value, $[9] = t3) : t3 = $[9], t3;
 }
 TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styledComponents.styled(Layer)`
   pointer-events: none;
 `, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(142), boundaryElementContext = useBoundaryElement(), {
+  const boundaryElementContext = useBoundaryElement(), {
     layer
-  } = useTheme_v2();
-  let t0, t1, t2, t3, t4, t5, _boundaryElement, _fallbackPlacementsProp, _zOffset, portalProp, delay, childProp, disabled, content, restProps, scheme;
-  $[0] !== props ? ({
-    animate: t0,
-    arrow: t1,
-    boundaryElement: _boundaryElement,
+  } = useTheme_v2(), {
+    animate: _animate = !1,
+    arrow: arrowProp = !1,
+    boundaryElement = boundaryElementContext?.element,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: _fallbackPlacementsProp,
-    padding: t2,
-    placement: t3,
+    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
+    padding = 2,
+    placement: placementProp = "bottom",
     portal: portalProp,
-    radius: t4,
+    radius = 2,
     scheme,
-    shadow: t5,
-    zOffset: _zOffset,
+    shadow = 2,
+    zOffset = layer.tooltip.zOffset,
     delay,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = _boundaryElement, $[8] = _fallbackPlacementsProp, $[9] = _zOffset, $[10] = portalProp, $[11] = delay, $[12] = childProp, $[13] = disabled, $[14] = content, $[15] = restProps, $[16] = scheme) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], _boundaryElement = $[7], _fallbackPlacementsProp = $[8], _zOffset = $[9], portalProp = $[10], delay = $[11], childProp = $[12], disabled = $[13], content = $[14], restProps = $[15], scheme = $[16]);
-  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), [arrowElement, setArrowElement] = react.useState(null), [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
-  let t6;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[17] = t6) : t6 = $[17], react.useImperativeHandle(forwardedRef, t6);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
-  let t7, ret;
-  if ($[18] !== boundaryElement || $[19] !== fallbackPlacements || $[20] !== arrowProp || $[21] !== arrowElement || $[22] !== animate) {
-    ret = [];
-    const t82 = boundaryElement || void 0;
-    let t92;
-    $[24] !== t82 || $[25] !== fallbackPlacements ? (t92 = reactDom$1.flip({
-      boundary: t82,
+  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  react.useImperativeHandle(forwardedRef, () => ref.current);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
+    const ret = [];
+    return ret.push(reactDom$1.flip({
+      boundary: boundaryElement || void 0,
       fallbackPlacements,
       padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary: "viewport"
-    }), $[24] = t82, $[25] = fallbackPlacements, $[26] = t92) : t92 = $[26], ret.push(t92);
-    let t102;
-    $[27] === Symbol.for("react.memo_cache_sentinel") ? (t102 = reactDom$1.offset({
+      rootBoundary
+    })), ret.push(reactDom$1.offset({
       mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    }), $[27] = t102) : t102 = $[27], ret.push(t102);
-    const t112 = boundaryElement || void 0;
-    let t122;
-    if ($[28] !== t112 ? (t122 = reactDom$1.shift({
-      boundary: t112,
-      rootBoundary: "viewport",
+    })), ret.push(reactDom$1.shift({
+      boundary: boundaryElement || void 0,
+      rootBoundary,
       padding: DEFAULT_TOOLTIP_PADDING
-    }), $[28] = t112, $[29] = t122) : t122 = $[29], ret.push(t122), arrowProp) {
-      let t132;
-      $[30] !== arrowElement ? (t132 = reactDom$1.arrow({
-        element: arrowElement,
-        padding: DEFAULT_TOOLTIP_PADDING
-      }), $[30] = arrowElement, $[31] = t132) : t132 = $[31], ret.push(t132);
-    }
-    animate && ret.push(origin), $[18] = boundaryElement, $[19] = fallbackPlacements, $[20] = arrowProp, $[21] = arrowElement, $[22] = animate, $[23] = ret;
-  } else
-    ret = $[23];
-  t7 = ret;
-  const middleware = t7;
-  let t8;
-  $[32] !== middleware || $[33] !== placementProp ? (t8 = {
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate
-  }, $[32] = middleware, $[33] = placementProp, $[34] = t8) : t8 = $[34];
-  const {
+    })), arrowProp && ret.push(reactDom$1.arrow({
+      element: arrowRef,
+      padding: DEFAULT_TOOLTIP_PADDING
+    })), animate && ret.push(origin), ret;
+  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = reactDom$1.useFloating(t8), 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(), 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 t9;
-  $[35] !== isInsideGroup || $[36] !== openDelay || $[37] !== delayGroupContext || $[38] !== tooltipId || $[39] !== closeDelay || $[40] !== setIsOpen ? (t9 = (open, immediate) => {
+  } = reactDom$1.useFloating({
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate
+  }), 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(), showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback((open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4926,133 +4857,67 @@ const Root$a = styledComponents.styled(Layer)`
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, $[35] = isInsideGroup, $[36] = openDelay, $[37] = delayGroupContext, $[38] = tooltipId, $[39] = closeDelay, $[40] = setIsOpen, $[41] = t9) : t9 = $[41];
-  const handleIsOpenChange = t9;
-  let t10;
-  $[42] !== handleIsOpenChange || $[43] !== childProp ? (t10 = (e) => {
+  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, $[42] = handleIsOpenChange, $[43] = childProp, $[44] = t10) : t10 = $[44];
-  const handleBlur = t10;
-  let t11;
-  $[45] !== handleIsOpenChange || $[46] !== childProp ? (t11 = (e_0) => {
+  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, $[45] = handleIsOpenChange, $[46] = childProp, $[47] = t11) : t11 = $[47];
-  const handleClick = t11;
-  let t12;
-  $[48] !== handleIsOpenChange || $[49] !== childProp ? (t12 = (e_1) => {
+  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, $[48] = handleIsOpenChange, $[49] = childProp, $[50] = t12) : t12 = $[50];
-  const handleContextMenu = t12;
-  let t13;
-  $[51] !== handleIsOpenChange || $[52] !== childProp ? (t13 = (e_2) => {
+  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, $[51] = handleIsOpenChange, $[52] = childProp, $[53] = t13) : t13 = $[53];
-  const handleFocus = t13;
-  let t14;
-  $[54] !== handleIsOpenChange || $[55] !== childProp ? (t14 = (e_3) => {
+  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, $[54] = handleIsOpenChange, $[55] = childProp, $[56] = t14) : t14 = $[56];
-  const handleMouseEnter = t14;
-  let t15;
-  $[57] !== handleIsOpenChange || $[58] !== childProp ? (t15 = (e_4) => {
+  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, $[57] = handleIsOpenChange, $[58] = childProp, $[59] = t15) : t15 = $[59];
-  const handleMouseLeave = t15;
-  let t16;
-  $[60] !== handleIsOpenChange || $[61] !== referenceElement || $[62] !== showTooltip ? (t16 = {
+  }, [childProp?.props, handleIsOpenChange]);
+  useCloseOnMouseLeave({
     handleIsOpenChange,
     referenceElement,
     showTooltip
-  }, $[60] = handleIsOpenChange, $[61] = referenceElement, $[62] = showTooltip, $[63] = t16) : t16 = $[63], useCloseOnMouseLeave(t16);
-  let t17, t18;
-  $[64] !== disabled || $[65] !== showTooltip || $[66] !== handleIsOpenChange ? (t17 = () => {
+  }), react.useEffect(() => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, t18 = [disabled, handleIsOpenChange, showTooltip], $[64] = disabled, $[65] = showTooltip, $[66] = handleIsOpenChange, $[67] = t17, $[68] = t18) : (t17 = $[67], t18 = $[68]), react.useEffect(t17, t18);
-  let t19, t20;
-  $[69] !== content || $[70] !== showTooltip || $[71] !== handleIsOpenChange ? (t19 = () => {
+  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, t20 = [content, handleIsOpenChange, showTooltip], $[69] = content, $[70] = showTooltip, $[71] = handleIsOpenChange, $[72] = t19, $[73] = t20) : (t19 = $[72], t20 = $[73]), react.useEffect(t19, t20);
-  let t21, t22;
-  $[74] !== refs || $[75] !== referenceElement ? (t21 = () => refs.setReference(referenceElement), t22 = [referenceElement, refs], $[74] = refs, $[75] = referenceElement, $[76] = t21, $[77] = t22) : (t21 = $[76], t22 = $[77]), react.useEffect(t21, t22);
-  let t23, t24;
-  $[78] !== showTooltip || $[79] !== handleIsOpenChange ? (t23 = () => {
-    if (!showTooltip)
-      return;
-    const handleWindowKeyDown = function(event) {
+  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), react.useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    };
+    }
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, t24 = [handleIsOpenChange, showTooltip], $[78] = showTooltip, $[79] = handleIsOpenChange, $[80] = t23, $[81] = t24) : (t23 = $[80], t24 = $[81]), react.useEffect(t23, t24);
-  let t25, t26;
-  $[82] !== boundaryElement || $[83] !== portalElement ? (t25 = () => {
+  }, [handleIsOpenChange, showTooltip]), react.useLayoutEffect(() => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, t26 = [boundaryElement, portalElement], $[82] = boundaryElement, $[83] = portalElement, $[84] = t25, $[85] = t26) : (t25 = $[84], t26 = $[85]), react.useLayoutEffect(t25, t26);
-  let t27;
-  $[86] !== update ? (t27 = (arrowEl) => {
-    setArrowElement(arrowEl), update();
-  }, $[86] = update, $[87] = t27) : t27 = $[87];
-  const setArrow = t27;
-  let t28;
-  $[88] !== refs ? (t28 = (node) => {
+  }, [boundaryElement, portalElement]);
+  const setArrow = react.useCallback((arrowEl) => {
+    arrowRef.current = arrowEl, update();
+  }, [update]), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, $[88] = refs, $[89] = t28) : t28 = $[89];
-  const setFloating = t28, childRef = react.useRef(null), [childElement, setChildElement] = react.useState(null), t29 = childProp;
-  let t30;
-  $[90] !== t29 ? (t30 = getElementRef(t29), $[90] = t29, $[91] = t30) : t30 = $[91];
-  let t31, t32;
-  $[92] !== childElement ? (t31 = () => childElement, t32 = [childElement], $[92] = childElement, $[93] = t31, $[94] = t32) : (t31 = $[93], t32 = $[94]), react.useImperativeHandle(t30, t31, t32);
-  let t33;
-  bb0: {
-    if (!childProp) {
-      t33 = null;
-      break bb0;
-    }
-    let t342;
-    $[95] !== handleBlur || $[96] !== handleFocus || $[97] !== handleMouseEnter || $[98] !== handleMouseLeave || $[99] !== handleClick || $[100] !== handleContextMenu || $[101] !== childProp ? (t342 = react.cloneElement(childProp, {
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      ref: setChildElement
-    }), $[95] = handleBlur, $[96] = handleFocus, $[97] = handleMouseEnter, $[98] = handleMouseLeave, $[99] = handleClick, $[100] = handleContextMenu, $[101] = childProp, $[102] = t342) : t342 = $[102], t33 = t342;
-  }
-  const child = t33;
-  let t34, t35;
-  if ($[103] !== child ? (t34 = () => {
+  }, [refs]), childRef = react.useRef(null);
+  react.useImperativeHandle(childProp?.ref, () => childRef.current);
+  const child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onClick: handleClick,
+    onContextMenu: handleContextMenu,
+    ref: childRef
+  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
+  if (react.useEffect(() => {
     if (child)
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
-  }, t35 = [child], $[103] = child, $[104] = t34, $[105] = t35) : (t34 = $[104], t35 = $[105]), react.useEffect(t34, t35), !child) {
-    let t362;
-    return $[106] === Symbol.for("react.memo_cache_sentinel") ? (t362 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[106] = t362) : t362 = $[106], t362;
-  }
-  if (disabled)
-    return child;
-  const t36 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
-  let t37;
-  $[107] !== floatingStyles || $[108] !== t36 ? (t37 = {
+  }, [child]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  if (disabled) return child;
+  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
     ...floatingStyles,
-    maxWidth: t36
-  }, $[107] = floatingStyles, $[108] = t36, $[109] = t37) : t37 = $[109];
-  let t38;
-  $[110] !== restProps || $[111] !== animate || $[112] !== arrowProp || $[113] !== setArrow || $[114] !== arrowX || $[115] !== arrowY || $[116] !== originX || $[117] !== originY || $[118] !== padding || $[119] !== placement || $[120] !== radius || $[121] !== setFloating || $[122] !== scheme || $[123] !== shadow || $[124] !== content ? (t38 = /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[110] = restProps, $[111] = animate, $[112] = arrowProp, $[113] = setArrow, $[114] = arrowX, $[115] = arrowY, $[116] = originX, $[117] = originY, $[118] = padding, $[119] = placement, $[120] = radius, $[121] = setFloating, $[122] = scheme, $[123] = shadow, $[124] = content, $[125] = t38) : t38 = $[125];
-  let t39;
-  $[126] !== restProps || $[127] !== setFloating || $[128] !== t37 || $[129] !== zOffset || $[130] !== t38 ? (t39 = /* @__PURE__ */ jsxRuntime.jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t37, zOffset, children: t38 }), $[126] = restProps, $[127] = setFloating, $[128] = t37, $[129] = zOffset, $[130] = t38, $[131] = t39) : t39 = $[131];
-  const tooltip = t39;
-  let t40;
-  $[132] !== showTooltip || $[133] !== portalProp || $[134] !== tooltip ? (t40 = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[132] = showTooltip, $[133] = portalProp, $[134] = tooltip, $[135] = t40) : t40 = $[135];
-  const children = t40;
-  let t41;
-  $[136] !== animate || $[137] !== children ? (t41 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[136] = animate, $[137] = children, $[138] = t41) : t41 = $[138];
-  let t42;
-  return $[139] !== t41 || $[140] !== child ? (t42 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t41,
+    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
+  }, zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
     child
-  ] }), $[139] = t41, $[140] = child, $[141] = t42) : t42 = $[141], t42;
+  ] });
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave(t0) {
@@ -5062,24 +4927,19 @@ function useCloseOnMouseLeave(t0) {
     showTooltip
   } = t0;
   let t1;
-  $[0] !== referenceElement || $[1] !== handleIsOpenChange ? (t1 = (target, teardown) => {
+  $[0] !== handleIsOpenChange || $[1] !== referenceElement ? (t1 = (target, teardown) => {
     referenceElement && (referenceElement === target || target instanceof Node && referenceElement.contains(target) || (handleIsOpenChange(!1), teardown()));
-  }, $[0] = referenceElement, $[1] = handleIsOpenChange, $[2] = t1) : t1 = $[2];
+  }, $[0] = handleIsOpenChange, $[1] = referenceElement, $[2] = t1) : t1 = $[2];
   const onMouseMove = useEffectEvent.useEffectEvent(t1);
   let t2, t3;
-  $[3] !== showTooltip || $[4] !== onMouseMove ? (t2 = () => {
+  $[3] !== onMouseMove || $[4] !== showTooltip ? (t2 = () => {
     if (!showTooltip)
       return;
     const handleMouseMove = (event) => {
       onMouseMove(event.target, () => window.removeEventListener("mousemove", handleMouseMove));
     };
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
-  }, t3 = [onMouseMove, showTooltip], $[3] = showTooltip, $[4] = onMouseMove, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
-}
-function getElementRef(element) {
-  if (!element) return null;
-  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
-  return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
+  }, t3 = [onMouseMove, showTooltip], $[3] = onMouseMove, $[4] = showTooltip, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), react.useEffect(t2, t3);
 }
 const Root$9 = styledComponents.styled.div`
   line-height: 0;
@@ -5121,7 +4981,7 @@ function AutocompleteOption(props) {
   }, $[3] = handleClick, $[4] = t1) : t1 = $[4];
   const handleKeyDown = t1;
   let t2;
-  return $[5] !== selected || $[6] !== id || $[7] !== handleClick || $[8] !== handleKeyDown || $[9] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-selected": selected, "data-ui": "AutocompleteOption", id, role: "option", onClick: handleClick, onKeyDown: handleKeyDown, children }), $[5] = selected, $[6] = id, $[7] = handleClick, $[8] = handleKeyDown, $[9] = children, $[10] = t2) : t2 = $[10], t2;
+  return $[5] !== children || $[6] !== handleClick || $[7] !== handleKeyDown || $[8] !== id || $[9] !== selected ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-selected": selected, "data-ui": "AutocompleteOption", id, role: "option", onClick: handleClick, onKeyDown: handleKeyDown, children }), $[5] = children, $[6] = handleClick, $[7] = handleKeyDown, $[8] = id, $[9] = selected, $[10] = t2) : t2 = $[10], t2;
 }
 function autocompleteReducer(state, msg2) {
   return msg2.type === "input/change" ? {
@@ -5163,17 +5023,15 @@ function autocompleteReducer(state, msg2) {
   } : state;
 }
 const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = react.forwardRef(function(props, forwardedRef) {
-  const $ = reactCompilerRuntime.c(187);
-  let t0, t1, t2, t3, t4, t5, t6, valueProp, renderOptionProp, filterOptionProp, id, optionsProp, loading, onBlur, onQueryChange, relatedElements, onSelect, onChange, onFocus, openOnFocus, disabled, openButton, readOnly, suffix, restProps, customValidity, icon, prefix, renderPopover;
-  $[0] !== props ? ({
-    border: t0,
+  const {
+    border: border2 = !0,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize: t1,
+    fontSize: fontSize2 = 2,
     icon,
     id,
-    listBox: t2,
+    listBox = EMPTY_RECORD,
     loading,
     onBlur,
     onChange,
@@ -5183,63 +5041,39 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     openButton,
     openOnFocus,
     options: optionsProp,
-    padding: t3,
-    popover: t4,
+    padding: paddingProp = 3,
+    popover = EMPTY_RECORD,
     prefix,
-    radius: t5,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
-    renderValue: t6,
+    renderValue = DEFAULT_RENDER_VALUE,
     suffix,
     value: valueProp,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = valueProp, $[9] = renderOptionProp, $[10] = filterOptionProp, $[11] = id, $[12] = optionsProp, $[13] = loading, $[14] = onBlur, $[15] = onQueryChange, $[16] = relatedElements, $[17] = onSelect, $[18] = onChange, $[19] = onFocus, $[20] = openOnFocus, $[21] = disabled, $[22] = openButton, $[23] = readOnly, $[24] = suffix, $[25] = restProps, $[26] = customValidity, $[27] = icon, $[28] = prefix, $[29] = renderPopover) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], valueProp = $[8], renderOptionProp = $[9], filterOptionProp = $[10], id = $[11], optionsProp = $[12], loading = $[13], onBlur = $[14], onQueryChange = $[15], relatedElements = $[16], onSelect = $[17], onChange = $[18], onFocus = $[19], openOnFocus = $[20], disabled = $[21], openButton = $[22], readOnly = $[23], suffix = $[24], restProps = $[25], customValidity = $[26], icon = $[27], prefix = $[28], renderPopover = $[29]);
-  const border2 = t0 === void 0 ? !0 : t0, fontSize2 = t1 === void 0 ? 2 : t1, listBox = t2 === void 0 ? EMPTY_RECORD : t2, paddingProp = t3 === void 0 ? 3 : t3, popover = t4 === void 0 ? EMPTY_RECORD : t4, radius = t5 === void 0 ? 2 : t5, renderValue = t6 === void 0 ? DEFAULT_RENDER_VALUE : t6, t7 = valueProp || null, t8 = valueProp || null;
-  let t9;
-  $[30] !== t7 || $[31] !== t8 ? (t9 = {
-    activeValue: t7,
+  } = props, [state, dispatch] = react.useReducer(autocompleteReducer, {
+    activeValue: valueProp || null,
     focused: !1,
     listFocused: !1,
     query: null,
-    value: t8
-  }, $[30] = t7, $[31] = t8, $[32] = t9) : t9 = $[32];
-  const [state, dispatch] = react.useReducer(autocompleteReducer, t9), {
+    value: valueProp || null
+  }), {
     activeValue,
     focused,
     listFocused,
     query,
     value
-  } = state;
-  let t10;
-  $[33] !== paddingProp || $[34] !== fontSize2 ? (t10 = (t112) => {
-    const {
-      value: value_0
-    } = t112;
-    return /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) });
-  }, $[33] = paddingProp, $[34] = fontSize2, $[35] = t10) : t10 = $[35];
-  const renderOption = typeof renderOptionProp == "function" ? renderOptionProp : t10, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, [rootElement, setRootElement] = react.useState(null), [resultsPopoverElement, setResultsPopoverElement] = react.useState(null), [inputElement, setInputElement] = react.useState(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), [popoverMouseWithin, setPopoverMouseWithin] = react.useState(!1);
-  let t11, t12;
-  $[36] !== inputElement ? (t11 = () => inputElement, t12 = [inputElement], $[36] = inputElement, $[37] = t11, $[38] = t12) : (t11 = $[37], t12 = $[38]), react.useImperativeHandle(forwardedRef, t11, t12);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp);
-  let t13, t14;
-  $[39] !== value || $[40] !== options ? (t14 = value !== null ? options.find((o) => o.value === value) : void 0, $[39] = value, $[40] = options, $[41] = t14) : t14 = $[41], t13 = t14;
-  const currentOption = t13;
-  let t15, t16;
-  if ($[42] !== query || $[43] !== filterOption || $[44] !== options) {
-    let t172;
-    $[46] !== query || $[47] !== filterOption ? (t172 = (option) => query ? filterOption(query, option) : !0, $[46] = query, $[47] = filterOption, $[48] = t172) : t172 = $[48], t16 = options.filter(t172), $[42] = query, $[43] = filterOption, $[44] = options, $[45] = t16;
-  } else
-    t16 = $[45];
-  t15 = t16;
-  const filteredOptions = t15, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null;
-  let t17;
-  $[49] !== popoverMouseWithin || $[50] !== relatedElements || $[51] !== rootElement || $[52] !== resultsPopoverElement || $[53] !== onQueryChange || $[54] !== onBlur ? (t17 = (event) => {
+  } = state, defaultRenderOption = react.useCallback(({
+    value: value_0
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) }), [fontSize2, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
+  react.useImperativeHandle(forwardedRef, () => inputElementRef.current);
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = react.useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = react.useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = react.useCallback((event) => {
     setTimeout(() => {
-      if (popoverMouseWithin)
+      if (popoverMouseWithinRef.current)
         return;
-      const elements = (relatedElements || []).concat(rootElement ? [rootElement] : [], resultsPopoverElement ? [resultsPopoverElement] : []);
+      const elements = (relatedElements || []).concat(rootElementRef.current ? [rootElementRef.current] : [], resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []);
       let focusInside = !1;
       if (document.activeElement) {
         for (const e of elements)
@@ -5250,32 +5084,22 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       }
       focusInside === !1 && (dispatch({
         type: "root/blur"
-      }), setPopoverMouseWithin(!1), onQueryChange && onQueryChange(null), onBlur && onBlur(event));
+      }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, $[49] = popoverMouseWithin, $[50] = relatedElements, $[51] = rootElement, $[52] = resultsPopoverElement, $[53] = onQueryChange, $[54] = onBlur, $[55] = t17) : t17 = $[55];
-  const handleRootBlur = t17;
-  let t18;
-  $[56] === Symbol.for("react.memo_cache_sentinel") ? (t18 = (event_0) => {
+  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = react.useCallback((event_0) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = listBoxElement?.contains(focusedElement) || !1;
     listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
       type: "root/setListFocused",
       listFocused: listFocused_0
     }));
-  }, $[56] = t18) : t18 = $[56];
-  const handleRootFocus = t18;
-  let t19;
-  $[57] !== onSelect || $[58] !== onChange || $[59] !== onQueryChange || $[60] !== inputElement ? (t19 = (v) => {
+  }, []), handleOptionSelect = react.useCallback((v) => {
     dispatch({
       type: "value/change",
       value: v
-    }), setPopoverMouseWithin(!1), onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElement?.focus();
-  }, $[57] = onSelect, $[58] = onChange, $[59] = onQueryChange, $[60] = inputElement, $[61] = t19) : t19 = $[61];
-  const handleOptionSelect = t19;
-  let t20;
-  $[62] !== filteredOptionsLen || $[63] !== filteredOptions || $[64] !== activeValue || $[65] !== onQueryChange || $[66] !== inputElement ? (t20 = (event_1) => {
+    }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
+  }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = react.useCallback((event_1) => {
     if (event_1.key === "ArrowDown") {
-      if (event_1.preventDefault(), !filteredOptionsLen)
-        return;
+      if (event_1.preventDefault(), !filteredOptionsLen) return;
       const activeOption = filteredOptions.find((o_0) => o_0.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
       nextActiveOption && dispatch({
         type: "root/setActiveValue",
@@ -5285,8 +5109,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       return;
     }
     if (event_1.key === "ArrowUp") {
-      if (event_1.preventDefault(), !filteredOptionsLen)
-        return;
+      if (event_1.preventDefault(), !filteredOptionsLen) return;
       const activeOption_0 = filteredOptions.find((o_1) => o_1.value === activeValue), activeIndex_0 = activeOption_0 ? filteredOptions.indexOf(activeOption_0) : -1, nextActiveOption_0 = filteredOptions[activeIndex_0 === -1 ? filteredOptionsLen - 1 : (filteredOptionsLen + activeIndex_0 - 1) % filteredOptionsLen];
       nextActiveOption_0 && dispatch({
         type: "root/setActiveValue",
@@ -5298,66 +5121,43 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     if (event_1.key === "Escape") {
       dispatch({
         type: "root/escape"
-      }), setPopoverMouseWithin(!1), onQueryChange && onQueryChange(null), inputElement?.focus();
+      }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
       return;
     }
     const target = event_1.target, listEl = listBoxElementRef.current;
     if ((listEl === target || listEl?.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event_1.key)) {
-      inputElement?.focus();
+      inputElementRef.current?.focus();
       return;
     }
-  }, $[62] = filteredOptionsLen, $[63] = filteredOptions, $[64] = activeValue, $[65] = onQueryChange, $[66] = inputElement, $[67] = t20) : t20 = $[67];
-  const handleRootKeyDown = t20;
-  let t21;
-  $[68] !== onQueryChange ? (t21 = (event_2) => {
+  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = react.useCallback((event_2) => {
     const nextQuery = event_2.currentTarget.value;
     dispatch({
       type: "input/change",
       query: nextQuery
     }), onQueryChange && onQueryChange(nextQuery);
-  }, $[68] = onQueryChange, $[69] = t21) : t21 = $[69];
-  const handleInputChange = t21;
-  let t22;
-  $[70] !== value || $[71] !== renderValue || $[72] !== currentOption ? (t22 = () => {
+  }, [onQueryChange]), dispatchOpen = react.useCallback(() => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
     });
-  }, $[70] = value, $[71] = renderValue, $[72] = currentOption, $[73] = t22) : t22 = $[73];
-  const dispatchOpen = t22;
-  let t23;
-  $[74] !== focused || $[75] !== onFocus || $[76] !== openOnFocus || $[77] !== dispatchOpen ? (t23 = (event_3) => {
+  }, [currentOption, renderValue, value]), handleInputFocus = react.useCallback((event_3) => {
     focused || (dispatch({
       type: "input/focus"
     }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
-  }, $[74] = focused, $[75] = onFocus, $[76] = openOnFocus, $[77] = dispatchOpen, $[78] = t23) : t23 = $[78];
-  const handleInputFocus = t23;
-  let t24;
-  $[79] === Symbol.for("react.memo_cache_sentinel") ? (t24 = () => {
-    setPopoverMouseWithin(!0);
-  }, $[79] = t24) : t24 = $[79];
-  const handlePopoverMouseEnter = t24;
-  let t25;
-  $[80] === Symbol.for("react.memo_cache_sentinel") ? (t25 = () => {
-    setPopoverMouseWithin(!1);
-  }, $[80] = t25) : t25 = $[80];
-  const handlePopoverMouseLeave = t25;
-  let t26;
-  $[81] !== onChange || $[82] !== onQueryChange || $[83] !== inputElement ? (t26 = () => {
+  }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = react.useCallback(() => {
+    popoverMouseWithinRef.current = !0;
+  }, []), handlePopoverMouseLeave = react.useCallback(() => {
+    popoverMouseWithinRef.current = !1;
+  }, []), handleClearButtonClick = react.useCallback(() => {
     dispatch({
       type: "root/clear"
-    }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElement?.focus();
-  }, $[81] = onChange, $[82] = onQueryChange, $[83] = inputElement, $[84] = t26) : t26 = $[84];
-  const handleClearButtonClick = t26;
-  let t27;
-  $[85] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => {
+    }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
+  }, [onChange, onQueryChange]), handleClearButtonFocus = react.useCallback(() => {
     dispatch({
       type: "input/focus"
     });
-  }, $[85] = t27) : t27 = $[85];
-  const handleClearButtonFocus = t27;
-  let t28, t29;
-  $[86] !== valueProp ? (t28 = () => {
+  }, []);
+  react.useEffect(() => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
         type: "value/change",
@@ -5369,19 +5169,14 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       type: "value/change",
       value: valueProp || null
     }));
-  }, t29 = [valueProp], $[86] = valueProp, $[87] = t28, $[88] = t29) : (t28 = $[87], t29 = $[88]), react.useEffect(t28, t29);
-  let t30, t31;
-  $[89] !== focused ? (t30 = () => {
+  }, [valueProp]), react.useEffect(() => {
     !focused && valueRef.current && dispatch({
       type: "root/setActiveValue",
       value: valueRef.current
     });
-  }, t31 = [focused], $[89] = focused, $[90] = t30, $[91] = t31) : (t30 = $[90], t31 = $[91]), react.useEffect(t30, t31);
-  let t32, t33;
-  $[92] !== filteredOptions || $[93] !== activeValue ? (t32 = () => {
+  }, [focused]), react.useEffect(() => {
     const listElement = listBoxElementRef.current;
-    if (!listElement)
-      return;
+    if (!listElement) return;
     const activeOption_1 = filteredOptions.find((o_2) => o_2.value === activeValue);
     if (activeOption_1) {
       const activeIndex_1 = filteredOptions.indexOf(activeOption_1), activeItemElement = listElement.childNodes[activeIndex_1];
@@ -5391,123 +5186,35 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
         focusFirstDescendant(activeItemElement);
       }
     }
-  }, t33 = [activeValue, filteredOptions], $[92] = filteredOptions, $[93] = activeValue, $[94] = t32, $[95] = t33) : (t32 = $[94], t33 = $[95]), react.useEffect(t32, t33);
-  let t34;
-  bb0: {
-    if (!loading && !disabled && value) {
-      let t352;
-      $[96] === Symbol.for("react.memo_cache_sentinel") ? (t352 = {
+  }, [activeValue, filteredOptions]);
+  const clearButton = react.useMemo(() => {
+    if (!loading && !disabled && value)
+      return {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
-      }, $[96] = t352) : t352 = $[96], t34 = t352;
-      break bb0;
-    }
-    t34 = void 0;
-  }
-  const clearButton = t34;
-  let t35, t36;
-  if ($[97] !== padding) {
-    let t372;
-    $[99] === Symbol.for("react.memo_cache_sentinel") ? (t372 = (v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2, $[99] = t372) : t372 = $[99], t36 = padding.map(t372), $[97] = padding, $[98] = t36;
-  } else
-    t36 = $[98];
-  t35 = t36;
-  const openButtonBoxPadding = t35;
-  let t37, t38;
-  if ($[100] !== padding) {
-    let t392;
-    $[102] === Symbol.for("react.memo_cache_sentinel") ? (t392 = (v_1) => Math.max(v_1 - 1, 0), $[102] = t392) : t392 = $[102], t38 = padding.map(t392), $[100] = padding, $[101] = t38;
-  } else
-    t38 = $[101];
-  t37 = t38;
-  const openButtonPadding = t37;
-  let t39;
-  t39 = typeof openButton == "object" ? openButton : EMPTY_RECORD;
-  const openButtonProps = t39;
-  let t40;
-  $[103] !== dispatchOpen || $[104] !== openButtonProps || $[105] !== inputElement ? (t40 = (event_4) => {
-    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElement?.focus());
-  }, $[103] = dispatchOpen, $[104] = openButtonProps, $[105] = inputElement, $[106] = t40) : t40 = $[106];
-  const handleOpenClick = t40;
-  let t41, t42;
-  $[107] !== disabled || $[108] !== readOnly || $[109] !== openButton || $[110] !== expanded || $[111] !== fontSize2 || $[112] !== openButtonPadding || $[113] !== openButtonProps || $[114] !== handleOpenClick || $[115] !== openButtonBoxPadding ? (t42 = !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize: fontSize2, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, $[107] = disabled, $[108] = readOnly, $[109] = openButton, $[110] = expanded, $[111] = fontSize2, $[112] = openButtonPadding, $[113] = openButtonProps, $[114] = handleOpenClick, $[115] = openButtonBoxPadding, $[116] = t42) : t42 = $[116], t41 = t42;
-  const openButtonNode = t41;
-  let t43;
-  bb1: {
-    if (query === null) {
-      if (value !== null) {
-        let t442;
-        $[117] !== renderValue || $[118] !== value || $[119] !== currentOption ? (t442 = renderValue(value, currentOption), $[117] = renderValue, $[118] = value, $[119] = currentOption, $[120] = t442) : t442 = $[120], t43 = t442;
-        break bb1;
-      }
-      t43 = "";
-      break bb1;
-    }
-    t43 = query;
-  }
-  const inputValue = t43, t44 = loading && AnimatedSpinnerIcon, t45 = suffix || openButtonNode;
-  let t46;
-  $[121] !== restProps || $[122] !== activeItemId || $[123] !== expanded || $[124] !== listBoxId || $[125] !== border2 || $[126] !== clearButton || $[127] !== customValidity || $[128] !== disabled || $[129] !== fontSize2 || $[130] !== icon || $[131] !== t44 || $[132] !== id || $[133] !== handleInputChange || $[134] !== handleClearButtonClick || $[135] !== handleInputFocus || $[136] !== padding || $[137] !== prefix || $[138] !== radius || $[139] !== readOnly || $[140] !== t45 || $[141] !== inputValue ? (t46 = /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border: border2, clearButton, customValidity, disabled, fontSize: fontSize2, icon, iconRight: t44, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: setInputElement, role: "combobox", spellCheck: !1, suffix: t45, value: inputValue }), $[121] = restProps, $[122] = activeItemId, $[123] = expanded, $[124] = listBoxId, $[125] = border2, $[126] = clearButton, $[127] = customValidity, $[128] = disabled, $[129] = fontSize2, $[130] = icon, $[131] = t44, $[132] = id, $[133] = handleInputChange, $[134] = handleClearButtonClick, $[135] = handleInputFocus, $[136] = padding, $[137] = prefix, $[138] = radius, $[139] = readOnly, $[140] = t45, $[141] = inputValue, $[142] = t46) : t46 = $[142];
-  const input = t46;
-  let t47;
-  $[143] !== listFocused || $[144] !== inputElement ? (t47 = (event_5) => {
-    event_5.key === "Tab" && listFocused && inputElement?.focus();
-  }, $[143] = listFocused, $[144] = inputElement, $[145] = t47) : t47 = $[145];
-  const handleListBoxKeyDown = t47;
-  let t48;
-  bb2: {
-    if (filteredOptions.length === 0) {
-      t48 = null;
-      break bb2;
-    }
-    let t492;
-    if ($[146] !== activeValue || $[147] !== currentOption || $[148] !== id || $[149] !== handleOptionSelect || $[150] !== renderOption || $[151] !== loading || $[152] !== listFocused || $[153] !== filteredOptions) {
-      let t503;
-      $[155] !== activeValue || $[156] !== currentOption || $[157] !== id || $[158] !== handleOptionSelect || $[159] !== renderOption || $[160] !== loading || $[161] !== listFocused ? (t503 = (option_0) => {
-        const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
-        return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
-          disabled: loading,
-          selected: active,
-          tabIndex: listFocused && active ? 0 : -1
-        }) }, option_0.value);
-      }, $[155] = activeValue, $[156] = currentOption, $[157] = id, $[158] = handleOptionSelect, $[159] = renderOption, $[160] = loading, $[161] = listFocused, $[162] = t503) : t503 = $[162], t492 = filteredOptions.map(t503), $[146] = activeValue, $[147] = currentOption, $[148] = id, $[149] = handleOptionSelect, $[150] = renderOption, $[151] = loading, $[152] = listFocused, $[153] = filteredOptions, $[154] = t492;
-    } else
-      t492 = $[154];
-    let t502;
-    $[163] !== listBoxId || $[164] !== t492 ? (t502 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: t492 }), $[163] = listBoxId, $[164] = t492, $[165] = t502) : t502 = $[165];
-    let t51;
-    $[166] !== handleListBoxKeyDown || $[167] !== listBox || $[168] !== t502 ? (t51 = /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: t502 }), $[166] = handleListBoxKeyDown, $[167] = listBox, $[168] = t502, $[169] = t51) : t51 = $[169], t48 = t51;
-  }
-  const content = t48;
-  let t49;
-  bb3: {
-    if (renderPopover) {
-      const t503 = !expanded;
-      let t51;
-      $[170] !== content || $[171] !== t503 || $[172] !== inputElement || $[173] !== resultsPopoverElement || $[174] !== renderPopover ? (t51 = renderPopover({
-        content,
-        hidden: t503,
-        inputElement,
-        onMouseEnter: handlePopoverMouseEnter,
-        onMouseLeave: handlePopoverMouseLeave
-      }, {
-        current: resultsPopoverElement
-      }), $[170] = content, $[171] = t503, $[172] = inputElement, $[173] = resultsPopoverElement, $[174] = renderPopover, $[175] = t51) : t51 = $[175], t49 = t51;
-      break bb3;
-    }
-    if (filteredOptionsLen === 0) {
-      t49 = null;
-      break bb3;
-    }
-    let t502;
-    $[176] !== content || $[177] !== expanded || $[178] !== radius || $[179] !== inputElement || $[180] !== popover ? (t502 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { arrow: !1, constrainSize: !0, content, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: setResultsPopoverElement, referenceElement: inputElement, ...popover }), $[176] = content, $[177] = expanded, $[178] = radius, $[179] = inputElement, $[180] = popover, $[181] = t502) : t502 = $[181], t49 = t502;
-  }
-  const results = t49;
-  let t50;
-  return $[182] !== handleRootBlur || $[183] !== handleRootKeyDown || $[184] !== input || $[185] !== results ? (t50 = /* @__PURE__ */ jsxRuntime.jsxs(Root$9, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: setRootElement, children: [
+      };
+  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = react.useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = react.useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = react.useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = react.useCallback((event_4) => {
+    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
+  }, [openButtonProps, dispatchOpen]), openButtonNode = react.useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize: fontSize2, icon: icons.ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize2, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = react.useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsxRuntime.jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border: border2, clearButton, customValidity, disabled, fontSize: fontSize2, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = react.useCallback((event_5) => {
+    event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
+  }, [listFocused]), content = react.useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
+    const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
+    return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
+      disabled: loading,
+      selected: active,
+      tabIndex: listFocused && active ? 0 : -1
+    }) }, option_0.value);
+  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover({
+    content,
+    hidden: !expanded,
+    inputElement: inputElementRef.current,
+    onMouseEnter: handlePopoverMouseEnter,
+    onMouseLeave: handlePopoverMouseLeave
+  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(Popover, { arrow: !1, constrainSize: !0, content, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root$9, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
     input,
     results
-  ] }), $[182] = handleRootBlur, $[183] = handleRootKeyDown, $[184] = input, $[185] = results, $[186] = t50) : t50 = $[186], t50;
+  ] });
 });
 InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
 const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
@@ -5522,46 +5229,26 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(37);
-  let t0, children, maxLength, restProps, separator;
-  $[0] !== props ? ({
+  const {
     children,
     maxLength,
     separator,
-    space: t0,
+    space: spaceRaw = 2,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = children, $[3] = maxLength, $[4] = restProps, $[5] = separator) : (t0 = $[1], children = $[2], maxLength = $[3], restProps = $[4], separator = $[5]);
-  const space = useArrayProp(t0 === void 0 ? 2 : t0), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null);
-  let t1;
-  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setOpen(!1), $[6] = t1) : t1 = $[6];
-  const collapse = t1;
-  let t2;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!0), $[7] = t2) : t2 = $[7];
-  const expand = t2;
-  let t3;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => [expandElementRef.current, popoverElementRef.current], $[8] = t3) : t3 = $[8], useClickOutsideEvent(collapse, t3);
-  let T0, t4, t5, t6, t7;
-  if ($[9] !== children || $[10] !== maxLength || $[11] !== space || $[12] !== open || $[13] !== restProps || $[14] !== ref || $[15] !== separator) {
-    const rawItems = react.Children.toArray(children).filter(react.isValidElement);
-    let items = rawItems;
+  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
+  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
+  const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
     const len = rawItems.length;
-    if (maxLength && rawItems.length > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2), t83 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), t9 = open ? collapse : expand;
-      let t10;
-      $[21] !== t9 || $[22] !== open ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: t9, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }), $[21] = t9, $[22] = open, $[23] = t10) : t10 = $[23];
-      let t11;
-      $[24] !== t83 || $[25] !== open || $[26] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { constrainSize: !0, content: t83, open, placement: "top", portal: !0, ref: popoverElementRef, children: t10 }, "button"), $[24] = t83, $[25] = open, $[26] = t10, $[27] = t11) : t11 = $[27], items = [...rawItems.slice(0, beforeLength - 1), t11, ...rawItems.slice(len - afterLength)];
-    }
-    T0 = Root$8, t4 = "Breadcrumbs", t5 = restProps, t6 = ref;
-    let t82;
-    $[28] !== space || $[29] !== separator ? (t82 = (item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-      itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
-    ] }, itemIndex), $[28] = space, $[29] = separator, $[30] = t82) : t82 = $[30], t7 = items.map(t82), $[9] = children, $[10] = maxLength, $[11] = space, $[12] = open, $[13] = restProps, $[14] = ref, $[15] = separator, $[16] = T0, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7;
-  } else
-    T0 = $[16], t4 = $[17], t5 = $[18], t6 = $[19], t7 = $[20];
-  let t8;
-  return $[31] !== T0 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(T0, { "data-ui": t4, ...t5, ref: t6, children: t7 }), $[31] = T0, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8) : t8 = $[36], t8;
+    if (maxLength && len > maxLength) {
+      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
+      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsxRuntime.jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: open ? collapse : expand, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }) }, "button"), ...rawItems.slice(len - afterLength)];
+    }
+    return rawItems;
+  }, [collapse, expand, maxLength, open, rawItems, space]);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+    itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
+  ] }, itemIndex)) });
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
 function dialogStyle({
@@ -5692,24 +5379,24 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
     autoFocus && ref.current && focusFirstDescendant(ref.current);
   }, t3 = [autoFocus, ref], $[2] = autoFocus, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), react.useEffect(t2, t3);
   let t4;
-  $[5] !== isTopLayer || $[6] !== onClose || $[7] !== boundaryElement || $[8] !== portalElement ? (t4 = (event) => {
+  $[5] !== boundaryElement || $[6] !== isTopLayer || $[7] !== onClose || $[8] !== portalElement ? (t4 = (event) => {
     if (!isTopLayer || !onClose)
       return;
     const target = document.activeElement;
     target && !isTargetWithinScope(boundaryElement, portalElement, target) || event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), onClose());
-  }, $[5] = isTopLayer, $[6] = onClose, $[7] = boundaryElement, $[8] = portalElement, $[9] = t4) : t4 = $[9], useGlobalKeyDown(t4);
+  }, $[5] = boundaryElement, $[6] = isTopLayer, $[7] = onClose, $[8] = portalElement, $[9] = t4) : t4 = $[9], useGlobalKeyDown(t4);
   let t5;
-  $[10] !== isTopLayer || $[11] !== onClickOutside || $[12] !== boundaryElement || $[13] !== portalElement ? (t5 = isTopLayer && onClickOutside && ((event_0) => {
+  $[10] !== boundaryElement || $[11] !== isTopLayer || $[12] !== onClickOutside || $[13] !== portalElement ? (t5 = isTopLayer && onClickOutside && ((event_0) => {
     const target_0 = event_0.target;
     target_0 && !isTargetWithinScope(boundaryElement, portalElement, target_0) || onClickOutside();
-  }), $[10] = isTopLayer, $[11] = onClickOutside, $[12] = boundaryElement, $[13] = portalElement, $[14] = t5) : t5 = $[14];
+  }), $[10] = boundaryElement, $[11] = isTopLayer, $[12] = onClickOutside, $[13] = portalElement, $[14] = t5) : t5 = $[14];
   let t6;
   $[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => [ref.current], $[15] = t6) : t6 = $[15], useClickOutsideEvent(t5, t6);
   let t7;
-  $[16] !== showHeader || $[17] !== header || $[18] !== labelId || $[19] !== showCloseButton || $[20] !== onClose ? (t7 = showHeader && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", padding: 3, children: [
+  $[16] !== header || $[17] !== labelId || $[18] !== onClose || $[19] !== showCloseButton || $[20] !== showHeader ? (t7 = showHeader && /* @__PURE__ */ jsxRuntime.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", padding: 3, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsxRuntime.jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
     showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: "none", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { "aria-label": "Close dialog", disabled: !onClose, icon: icons.CloseIcon, mode: "bleed", onClick: onClose, padding: 2 }) })
-  ] }) }), $[16] = showHeader, $[17] = header, $[18] = labelId, $[19] = showCloseButton, $[20] = onClose, $[21] = t7) : t7 = $[21];
+  ] }) }), $[16] = header, $[17] = labelId, $[18] = onClose, $[19] = showCloseButton, $[20] = showHeader, $[21] = t7) : t7 = $[21];
   let t8;
   $[22] !== children ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }), $[22] = children, $[23] = t8) : t8 = $[23];
   let t9;
@@ -5723,14 +5410,14 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
   let t11;
   $[30] !== radius || $[31] !== scheme || $[32] !== shadow || $[33] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: t10 }), $[30] = radius, $[31] = scheme, $[32] = shadow, $[33] = t10, $[34] = t11) : t11 = $[34];
   let t12;
-  return $[35] !== width || $[36] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t11 }), $[35] = width, $[36] = t11, $[37] = t12) : t12 = $[37], t12;
+  return $[35] !== t11 || $[36] !== width ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t11 }), $[35] = t11, $[36] = width, $[37] = t12) : t12 = $[37], t12;
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(60), dialog = useDialog(), {
     layer
   } = useTheme_v2();
-  let t0, t1, t2, t3, t4, t5, t6, _positionProp, _zOffsetProp, portalProp, onFocus, id, contentRef, footer, header, onClickOutside, onClose, scheme, children, restProps, onActivate;
+  let _positionProp, _zOffsetProp, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5, t6;
   $[0] !== props ? ({
     __unstable_autoFocus: t0,
     __unstable_hideCloseButton: t1,
@@ -5753,7 +5440,7 @@ const Dialog = react.forwardRef(function(props, ref) {
     zOffset: _zOffsetProp,
     animate: t6,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = _positionProp, $[9] = _zOffsetProp, $[10] = portalProp, $[11] = onFocus, $[12] = id, $[13] = contentRef, $[14] = footer, $[15] = header, $[16] = onClickOutside, $[17] = onClose, $[18] = scheme, $[19] = children, $[20] = restProps, $[21] = onActivate) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], _positionProp = $[8], _zOffsetProp = $[9], portalProp = $[10], onFocus = $[11], id = $[12], contentRef = $[13], footer = $[14], header = $[15], onClickOutside = $[16], onClose = $[17], scheme = $[18], children = $[19], restProps = $[20], onActivate = $[21]);
+  } = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = contentRef, $[5] = footer, $[6] = header, $[7] = id, $[8] = onActivate, $[9] = onClickOutside, $[10] = onClose, $[11] = onFocus, $[12] = portalProp, $[13] = restProps, $[14] = scheme, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], contentRef = $[4], footer = $[5], header = $[6], id = $[7], onActivate = $[8], onClickOutside = $[9], onClose = $[10], onFocus = $[11], portalProp = $[12], restProps = $[13], scheme = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21]);
   const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
   let t7;
   $[22] !== onFocus ? (t7 = (event) => {
@@ -5789,15 +5476,15 @@ const Dialog = react.forwardRef(function(props, ref) {
   let t9;
   $[27] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: preDivRef, tabIndex: 0 }), $[27] = t9) : t9 = $[27];
   let t10;
-  $[28] !== autoFocus || $[29] !== hideCloseButton || $[30] !== contentRef || $[31] !== footer || $[32] !== header || $[33] !== id || $[34] !== onClickOutside || $[35] !== onClose || $[36] !== portalProp || $[37] !== cardRadius || $[38] !== scheme || $[39] !== cardShadow || $[40] !== width || $[41] !== children ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, width, children }), $[28] = autoFocus, $[29] = hideCloseButton, $[30] = contentRef, $[31] = footer, $[32] = header, $[33] = id, $[34] = onClickOutside, $[35] = onClose, $[36] = portalProp, $[37] = cardRadius, $[38] = scheme, $[39] = cardShadow, $[40] = width, $[41] = children, $[42] = t10) : t10 = $[42];
+  $[28] !== autoFocus || $[29] !== cardRadius || $[30] !== cardShadow || $[31] !== children || $[32] !== contentRef || $[33] !== footer || $[34] !== header || $[35] !== hideCloseButton || $[36] !== id || $[37] !== onClickOutside || $[38] !== onClose || $[39] !== portalProp || $[40] !== scheme || $[41] !== width ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, width, children }), $[28] = autoFocus, $[29] = cardRadius, $[30] = cardShadow, $[31] = children, $[32] = contentRef, $[33] = footer, $[34] = header, $[35] = hideCloseButton, $[36] = id, $[37] = onClickOutside, $[38] = onClose, $[39] = portalProp, $[40] = scheme, $[41] = width, $[42] = t10) : t10 = $[42];
   let t11;
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: postDivRef, tabIndex: 0 }), $[43] = t11) : t11 = $[43];
   let t12;
-  $[44] !== restProps || $[45] !== animate || $[46] !== padding || $[47] !== position || $[48] !== labelId || $[49] !== id || $[50] !== onActivate || $[51] !== handleRootClick || $[52] !== handleFocus || $[53] !== ref || $[54] !== zOffset || $[55] !== t10 ? (t12 = /* @__PURE__ */ jsxRuntime.jsxs(Root$7, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
+  $[44] !== animate || $[45] !== handleFocus || $[46] !== handleRootClick || $[47] !== id || $[48] !== labelId || $[49] !== onActivate || $[50] !== padding || $[51] !== position || $[52] !== ref || $[53] !== restProps || $[54] !== t10 || $[55] !== zOffset ? (t12 = /* @__PURE__ */ jsxRuntime.jsxs(Root$7, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
     t9,
     t10,
     t11
-  ] }), $[44] = restProps, $[45] = animate, $[46] = padding, $[47] = position, $[48] = labelId, $[49] = id, $[50] = onActivate, $[51] = handleRootClick, $[52] = handleFocus, $[53] = ref, $[54] = zOffset, $[55] = t10, $[56] = t12) : t12 = $[56];
+  ] }), $[44] = animate, $[45] = handleFocus, $[46] = handleRootClick, $[47] = id, $[48] = labelId, $[49] = onActivate, $[50] = padding, $[51] = position, $[52] = ref, $[53] = restProps, $[54] = t10, $[55] = zOffset, $[56] = t12) : t12 = $[56];
   let t13;
   return $[57] !== portalProp || $[58] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: portalProp, children: t12 }), $[57] = portalProp, $[58] = t12, $[59] = t13) : t13 = $[59], t13;
 });
@@ -5816,7 +5503,7 @@ function DialogProvider(props) {
   }, $[0] = position, $[1] = zOffset, $[2] = t1) : t1 = $[2], t0 = t1;
   const contextValue = t0;
   let t2;
-  return $[3] !== contextValue || $[4] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = contextValue, $[4] = children, $[5] = t2) : t2 = $[5], t2;
+  return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
 }
 DialogProvider.displayName = "DialogProvider";
 const Root$6 = styledComponents.styled.kbd`
@@ -5832,7 +5519,7 @@ const Root$6 = styledComponents.styled.kbd`
   }
 `, Hotkeys = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(24);
-  let t0, keys, fontSize2, padding, radius, restProps;
+  let fontSize2, keys, padding, radius, restProps, t0;
   $[0] !== props ? ({
     fontSize: fontSize2,
     keys,
@@ -5840,22 +5527,22 @@ const Root$6 = styledComponents.styled.kbd`
     radius,
     space: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = keys, $[3] = fontSize2, $[4] = padding, $[5] = radius, $[6] = restProps) : (t0 = $[1], keys = $[2], fontSize2 = $[3], padding = $[4], radius = $[5], restProps = $[6]);
+  } = props, $[0] = props, $[1] = fontSize2, $[2] = keys, $[3] = padding, $[4] = radius, $[5] = restProps, $[6] = t0) : (fontSize2 = $[1], keys = $[2], padding = $[3], radius = $[4], restProps = $[5], t0 = $[6]);
   const space = useArrayProp(t0 === void 0 ? 0.5 : t0);
   if (!keys || keys.length === 0) {
     let t12;
     return $[7] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[7] = t12) : t12 = $[7], t12;
   }
   let t1;
-  if ($[8] !== fontSize2 || $[9] !== padding || $[10] !== radius || $[11] !== keys) {
+  if ($[8] !== fontSize2 || $[9] !== keys || $[10] !== padding || $[11] !== radius) {
     let t22;
-    $[13] !== fontSize2 || $[14] !== padding || $[15] !== radius ? (t22 = (key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[13] = fontSize2, $[14] = padding, $[15] = radius, $[16] = t22) : t22 = $[16], t1 = keys.map(t22), $[8] = fontSize2, $[9] = padding, $[10] = radius, $[11] = keys, $[12] = t1;
+    $[13] !== fontSize2 || $[14] !== padding || $[15] !== radius ? (t22 = (key2, i) => /* @__PURE__ */ jsxRuntime.jsx(Key, { fontSize: fontSize2, padding, radius, children: key2 }, i), $[13] = fontSize2, $[14] = padding, $[15] = radius, $[16] = t22) : t22 = $[16], t1 = keys.map(t22), $[8] = fontSize2, $[9] = keys, $[10] = padding, $[11] = radius, $[12] = t1;
   } else
     t1 = $[12];
   let t2;
   $[17] !== space || $[18] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Inline, { as: "span", space, children: t1 }), $[17] = space, $[18] = t1, $[19] = t2) : t2 = $[19];
   let t3;
-  return $[20] !== restProps || $[21] !== ref || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = restProps, $[21] = ref, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
+  return $[20] !== ref || $[21] !== restProps || $[22] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$6, { "data-ui": "Hotkeys", ...restProps, ref, children: t2 }), $[20] = ref, $[21] = restProps, $[22] = t2, $[23] = t3) : t3 = $[23], t3;
 });
 Hotkeys.displayName = "ForwardRef(Hotkeys)";
 const MenuContext = createGlobalScopedContext("@sanity/ui/context/menu", null);
@@ -5896,28 +5583,16 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const $ = reactCompilerRuntime.c(21), {
+  const {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef
-  } = props;
-  let t0;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
-  const elementsRef = react.useRef(t0), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex);
-  let t1;
-  t1 = elementsRef.current[activeIndex] || null;
-  const activeElement = t1, mounted = !!rootElementRef.current;
-  let t2;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = (nextActiveIndex) => {
+  } = props, elementsRef = react.useRef([]), [activeIndex, _setActiveIndex] = react.useState(-1), activeIndexRef = react.useRef(activeIndex), activeElement = react.useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = react.useCallback((nextActiveIndex) => {
     _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
-  }, $[1] = t2) : t2 = $[1];
-  const setActiveIndex = t2;
-  let t3;
-  $[2] !== rootElementRef.current ? (t3 = (element, selected) => {
-    if (!element)
-      return () => {
-      };
+  }, []), mount = react.useCallback((element, selected) => {
+    if (!element) return () => {
+    };
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
@@ -5926,10 +5601,7 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, $[2] = rootElementRef.current, $[3] = t3) : t3 = $[3];
-  const mount = t3;
-  let t4;
-  $[4] !== originElement || $[5] !== onKeyDown ? (t4 = (event) => {
+  }, [rootElementRef, setActiveIndex]), handleKeyDown = react.useCallback((event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -5937,8 +5609,7 @@ 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;
@@ -5946,8 +5617,7 @@ function useMenuController(props) {
     if (event.key === "End") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
-      if (!el_0)
-        return;
+      if (!el_0) return;
       const currentIndex_0 = elementsRef.current.indexOf(el_0);
       setActiveIndex(currentIndex_0);
       return;
@@ -5955,8 +5625,7 @@ function useMenuController(props) {
     if (event.key === "ArrowUp") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
-      if (focusableLen === 0)
-        return;
+      if (focusableLen === 0) return;
       const focusedElement = elementsRef.current[activeIndexRef.current];
       let focusedIndex = focusableElements_1.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
@@ -5967,8 +5636,7 @@ function useMenuController(props) {
     if (event.key === "ArrowDown") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
-      if (focusableLen_0 === 0)
-        return;
+      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;
@@ -5977,23 +5645,14 @@ function useMenuController(props) {
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, $[4] = originElement, $[5] = onKeyDown, $[6] = t4) : t4 = $[6];
-  const handleKeyDown = t4;
-  let t5;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (event_0) => {
+  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = react.useCallback((event_0) => {
     const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
     setActiveIndex(currentIndex_3);
-  }, $[7] = t5) : t5 = $[7];
-  const handleItemMouseEnter = t5;
-  let t6;
-  $[8] !== rootElementRef.current ? (t6 = () => {
+  }, [setActiveIndex]), handleItemMouseLeave = react.useCallback(() => {
     setActiveIndex(-2), rootElementRef.current?.focus();
-  }, $[8] = rootElementRef.current, $[9] = t6) : t6 = $[9];
-  const handleItemMouseLeave = t6;
-  let t7, t8;
-  $[10] !== mounted || $[11] !== activeIndex || $[12] !== shouldFocus ? (t7 = () => {
-    if (!mounted)
-      return;
+  }, [rootElementRef, setActiveIndex]);
+  return react.useEffect(() => {
+    if (!mounted) return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === "first") {
@@ -6015,23 +5674,21 @@ function useMenuController(props) {
       (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
-  }, t8 = [activeIndex, mounted, setActiveIndex, shouldFocus], $[10] = mounted, $[11] = activeIndex, $[12] = shouldFocus, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), react.useEffect(t7, t8);
-  let t9;
-  return $[15] !== activeElement || $[16] !== activeIndex || $[17] !== handleItemMouseLeave || $[18] !== handleKeyDown || $[19] !== mount ? (t9 = {
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  }, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t9) : t9 = $[20], t9;
+  };
 }
 const Root$5 = styledComponents.styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(50);
-  let t0, t1, _shouldFocus, onKeyDown, originElement, registerElement, onItemSelect, onClickOutside, onEscape, onItemClick, children, restProps;
+  let _shouldFocus, children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1;
   if ($[0] !== props) {
     const {
       children: t22,
@@ -6049,9 +5706,9 @@ const Root$5 = styledComponents.styled(Box)`
       space: t122,
       ...t132
     } = props;
-    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, t1 = t122, restProps = t132, $[0] = props, $[1] = t0, $[2] = t1, $[3] = _shouldFocus, $[4] = onKeyDown, $[5] = originElement, $[6] = registerElement, $[7] = onItemSelect, $[8] = onClickOutside, $[9] = onEscape, $[10] = onItemClick, $[11] = children, $[12] = restProps;
+    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, t1 = t122, restProps = t132, $[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
-    t0 = $[1], t1 = $[2], _shouldFocus = $[3], onKeyDown = $[4], originElement = $[5], registerElement = $[6], onItemSelect = $[7], onClickOutside = $[8], onEscape = $[9], onItemClick = $[10], children = $[11], restProps = $[12];
+    _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);
@@ -6079,9 +5736,9 @@ const Root$5 = styledComponents.styled(Box)`
   }, $[18] = registerElement, $[19] = t4) : t4 = $[19];
   const handleRefChange = t4;
   let t5, t6;
-  $[20] !== onItemSelect || $[21] !== activeIndex ? (t5 = () => {
+  $[20] !== activeIndex || $[21] !== onItemSelect ? (t5 = () => {
     onItemSelect && onItemSelect(activeIndex);
-  }, t6 = [activeIndex, onItemSelect], $[20] = onItemSelect, $[21] = activeIndex, $[22] = t5, $[23] = t6) : (t5 = $[22], t6 = $[23]), react.useEffect(t5, t6);
+  }, 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;
@@ -6089,7 +5746,7 @@ const Root$5 = styledComponents.styled(Box)`
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
   }, $[25] = isTopLayer, $[26] = onEscape, $[27] = t8) : t8 = $[27], useGlobalKeyDown(t8);
   let t9, t10;
-  $[28] !== activeElement || $[29] !== activeIndex || $[30] !== mount || $[31] !== onClickOutside || $[32] !== onEscape || $[33] !== onItemClick || $[34] !== handleItemMouseEnter || $[35] !== handleItemMouseLeave || $[36] !== registerElement ? (t10 = {
+  $[28] !== activeElement || $[29] !== activeIndex || $[30] !== handleItemMouseEnter || $[31] !== handleItemMouseLeave || $[32] !== mount || $[33] !== onClickOutside || $[34] !== onEscape || $[35] !== onItemClick || $[36] !== registerElement ? (t10 = {
     version: 0,
     activeElement,
     activeIndex,
@@ -6102,14 +5759,14 @@ const Root$5 = styledComponents.styled(Box)`
     registerElement,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave
-  }, $[28] = activeElement, $[29] = activeIndex, $[30] = mount, $[31] = onClickOutside, $[32] = onEscape, $[33] = onItemClick, $[34] = handleItemMouseEnter, $[35] = handleItemMouseLeave, $[36] = registerElement, $[37] = t10) : t10 = $[37], t9 = t10;
+  }, $[28] = activeElement, $[29] = activeIndex, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t10) : t10 = $[37], t9 = t10;
   const value = t9;
   let t11;
-  $[38] !== space || $[39] !== children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }), $[38] = space, $[39] = children, $[40] = t11) : t11 = $[40];
+  $[38] !== children || $[39] !== space ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }), $[38] = children, $[39] = space, $[40] = t11) : t11 = $[40];
   let t12;
-  $[41] !== restProps || $[42] !== handleKeyDown || $[43] !== padding || $[44] !== handleRefChange || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t11 }), $[41] = restProps, $[42] = handleKeyDown, $[43] = padding, $[44] = handleRefChange, $[45] = t11, $[46] = t12) : t12 = $[46];
+  $[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t11 }), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
   let t13;
-  return $[47] !== value || $[48] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t12 }), $[47] = value, $[48] = t12, $[49] = t13) : t13 = $[49], t13;
+  return $[47] !== t12 || $[48] !== value ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t12 }), $[47] = t12, $[48] = value, $[49] = t13) : t13 = $[49], t13;
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuButton = react.forwardRef(function(props, forwardedRef) {
@@ -6145,7 +5802,7 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), react.useEffect(t7, t8);
   let t9;
   $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
-    setOpen((v) => !v), setShouldFocus(null);
+    setOpen(_temp$2), setShouldFocus(null);
   }, $[12] = t9) : t9 = $[12];
   const handleButtonClick = t9;
   let t10;
@@ -6177,9 +5834,9 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   }, $[16] = buttonElement, $[17] = menuElements, $[18] = t12) : t12 = $[18];
   const handleMenuClickOutside = t12;
   let t13;
-  $[19] !== disableRestoreFocusOnClose || $[20] !== buttonElement ? (t13 = () => {
+  $[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t13 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[19] = disableRestoreFocusOnClose, $[20] = buttonElement, $[21] = t13) : t13 = $[21];
+  }, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t13) : t13 = $[21];
   const handleMenuEscape = t13;
   let t14;
   $[22] !== menuElements ? (t14 = (event_2) => {
@@ -6193,15 +5850,15 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
   }, $[22] = menuElements, $[23] = t14) : t14 = $[23];
   const handleBlur = t14;
   let t15;
-  $[24] !== disableRestoreFocusOnClose || $[25] !== buttonElement ? (t15 = () => {
+  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t15 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, $[24] = disableRestoreFocusOnClose, $[25] = buttonElement, $[26] = t15) : t15 = $[26];
+  }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t15) : t15 = $[26];
   const handleItemClick = t15;
   let t16;
   $[27] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t16) : t16 = $[27];
   const registerElement = t16;
   let t17;
-  $[28] !== id || $[29] !== handleBlur || $[30] !== handleMenuClickOutside || $[31] !== handleMenuEscape || $[32] !== handleItemClick || $[33] !== buttonElement || $[34] !== shouldFocus || $[35] !== menuProp ? (t17 = menuProp && react.cloneElement(menuProp, {
+  $[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t17 = menuProp && react.cloneElement(menuProp, {
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -6210,10 +5867,10 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     originElement: buttonElement,
     registerElement,
     shouldFocus
-  }), $[28] = id, $[29] = handleBlur, $[30] = handleMenuClickOutside, $[31] = handleMenuEscape, $[32] = handleItemClick, $[33] = buttonElement, $[34] = shouldFocus, $[35] = menuProp, $[36] = t17) : t17 = $[36];
+  }), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t17) : t17 = $[36];
   const menu = t17;
   let t18, t19;
-  $[37] !== buttonProp || $[38] !== open || $[39] !== id || $[40] !== handleMouseDown ? (t19 = buttonProp && react.cloneElement(buttonProp, {
+  $[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open ? (t19 = buttonProp && react.cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -6223,14 +5880,14 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     "aria-expanded": open,
     ref: setButtonElement,
     selected: buttonProp.props.selected ?? open
-  }), $[37] = buttonProp, $[38] = open, $[39] = id, $[40] = handleMouseDown, $[41] = t19) : t19 = $[41], t18 = t19;
+  }), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t19) : t19 = $[41], t18 = t19;
   const button = t18;
   let t20, t21;
   $[42] !== buttonElement ? (t20 = () => buttonElement, t21 = [buttonElement], $[42] = buttonElement, $[43] = t20, $[44] = t21) : (t20 = $[43], t21 = $[44]), react.useImperativeHandle(forwardedRef, t20, t21);
   let t22, t23;
   $[45] !== popover ? (t23 = popover || {}, $[45] = popover, $[46] = t23) : t23 = $[46];
   let t24;
-  $[47] !== deprecated_boundaryElement || $[48] !== deprecated_placement || $[49] !== deprecated_portal || $[50] !== deprecated_preventOverflow || $[51] !== deprecated_popoverRadius || $[52] !== deprecated_popoverScheme || $[53] !== t23 ? (t24 = {
+  $[47] !== deprecated_boundaryElement || $[48] !== deprecated_placement || $[49] !== deprecated_popoverRadius || $[50] !== deprecated_popoverScheme || $[51] !== deprecated_portal || $[52] !== deprecated_preventOverflow || $[53] !== t23 ? (t24 = {
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
@@ -6239,14 +5896,17 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     radius: deprecated_popoverRadius,
     scheme: deprecated_popoverScheme,
     ...t23
-  }, $[47] = deprecated_boundaryElement, $[48] = deprecated_placement, $[49] = deprecated_portal, $[50] = deprecated_preventOverflow, $[51] = deprecated_popoverRadius, $[52] = deprecated_popoverScheme, $[53] = t23, $[54] = t24) : t24 = $[54], t22 = t24;
+  }, $[47] = deprecated_boundaryElement, $[48] = deprecated_placement, $[49] = deprecated_popoverRadius, $[50] = deprecated_popoverScheme, $[51] = deprecated_portal, $[52] = deprecated_preventOverflow, $[53] = t23, $[54] = t24) : t24 = $[54], t22 = t24;
   const popoverProps = t22;
   let t25;
   $[55] !== button ? (t25 = button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[55] = button, $[56] = t25) : t25 = $[56];
   let t26;
-  return $[57] !== popoverProps || $[58] !== menu || $[59] !== open || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = popoverProps, $[58] = menu, $[59] = open, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
+  return $[57] !== menu || $[58] !== open || $[59] !== popoverProps || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = menu, $[58] = open, $[59] = popoverProps, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
+function _temp$2(v) {
+  return !v;
+}
 const MenuDivider = styledComponents.styled.hr`
   height: 1px;
   border: 0;
@@ -6366,7 +6026,7 @@ function useMenu() {
 }
 function MenuGroup(props) {
   const $ = reactCompilerRuntime.c(77);
-  let t0, t1, t2, t3, t4, t5, onClick, children, IconComponent, text, restProps, popover;
+  let IconComponent, children, onClick, popover, restProps, t0, t1, t2, t3, t4, t5, text;
   $[0] !== props ? ({
     as: t0,
     children,
@@ -6380,7 +6040,7 @@ function MenuGroup(props) {
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = onClick, $[8] = children, $[9] = IconComponent, $[10] = text, $[11] = restProps, $[12] = popover) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], onClick = $[7], children = $[8], IconComponent = $[9], text = $[10], restProps = $[11], popover = $[12]);
+  } = props, $[0] = props, $[1] = IconComponent, $[2] = children, $[3] = onClick, $[4] = popover, $[5] = restProps, $[6] = t0, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = text) : (IconComponent = $[1], children = $[2], onClick = $[3], popover = $[4], restProps = $[5], t0 = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], text = $[12]);
   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(), {
@@ -6435,7 +6095,7 @@ function MenuGroup(props) {
     return () => cancelAnimationFrame(rafId);
   }, t18 = [shouldFocus], $[32] = shouldFocus, $[33] = t17, $[34] = t18) : (t17 = $[33], t18 = $[34]), react.useEffect(t17, t18);
   let t19;
-  $[35] !== onClickOutside || $[36] !== onEscape || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== registerElement || $[40] !== shouldFocus || $[41] !== children ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[35] = onClickOutside, $[36] = onEscape, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = registerElement, $[40] = shouldFocus, $[41] = children, $[42] = t19) : t19 = $[42];
+  $[35] !== children || $[36] !== handleChildItemClick || $[37] !== handleMenuKeyDown || $[38] !== onClickOutside || $[39] !== onEscape || $[40] !== registerElement || $[41] !== shouldFocus ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[35] = children, $[36] = handleChildItemClick, $[37] = handleMenuKeyDown, $[38] = onClickOutside, $[39] = onEscape, $[40] = registerElement, $[41] = shouldFocus, $[42] = t19) : t19 = $[42];
   const childMenu = t19;
   let t20;
   $[43] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
@@ -6458,20 +6118,20 @@ function MenuGroup(props) {
   let t29;
   $[51] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[51] = fontSize2, $[52] = t29) : t29 = $[52];
   let t30;
-  $[53] !== space || $[54] !== padding || $[55] !== t26 || $[56] !== t27 || $[57] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+  $[53] !== padding || $[54] !== space || $[55] !== t26 || $[56] !== t27 || $[57] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
     t26,
     t27,
     t29
-  ] }), $[53] = space, $[54] = padding, $[55] = t26, $[56] = t27, $[57] = t29, $[58] = t30) : t30 = $[58];
+  ] }), $[53] = padding, $[54] = space, $[55] = t26, $[56] = t27, $[57] = t29, $[58] = t30) : t30 = $[58];
   let t31;
-  $[59] !== as || $[60] !== restProps || $[61] !== t21 || $[62] !== t22 || $[63] !== t23 || $[64] !== t24 || $[65] !== tone || $[66] !== scheme || $[67] !== handleClick || $[68] !== handleMouseEnter || $[69] !== t25 || $[70] !== t30 ? (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 }), $[59] = as, $[60] = restProps, $[61] = t21, $[62] = t22, $[63] = t23, $[64] = t24, $[65] = tone, $[66] = scheme, $[67] = handleClick, $[68] = handleMouseEnter, $[69] = t25, $[70] = t30, $[71] = t31) : t31 = $[71];
+  $[59] !== as || $[60] !== handleClick || $[61] !== handleMouseEnter || $[62] !== restProps || $[63] !== scheme || $[64] !== t21 || $[65] !== t22 || $[66] !== t23 || $[67] !== t24 || $[68] !== t25 || $[69] !== t30 || $[70] !== 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 }), $[59] = as, $[60] = handleClick, $[61] = handleMouseEnter, $[62] = restProps, $[63] = scheme, $[64] = t21, $[65] = t22, $[66] = t23, $[67] = t24, $[68] = t25, $[69] = t30, $[70] = tone, $[71] = t31) : t31 = $[71];
   let t32;
-  return $[72] !== popover || $[73] !== childMenu || $[74] !== open || $[75] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[72] = popover, $[73] = childMenu, $[74] = open, $[75] = t31, $[76] = t32) : t32 = $[76], t32;
+  return $[72] !== childMenu || $[73] !== open || $[74] !== popover || $[75] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[72] = childMenu, $[73] = open, $[74] = popover, $[75] = t31, $[76] = t32) : t32 = $[76], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(74);
-  let t0, t1, t2, t3, t4, t5, selectedProp, disabled, onClick, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, pressed, IconComponent, text, IconRightComponent, hotkeys, children, restProps;
+  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,
@@ -6495,7 +6155,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     text,
     tone: t5,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = selectedProp, $[8] = disabled, $[9] = onClick, $[10] = paddingX, $[11] = paddingY, $[12] = paddingTop, $[13] = paddingRight, $[14] = paddingBottom, $[15] = paddingLeft, $[16] = pressed, $[17] = IconComponent, $[18] = text, $[19] = IconRightComponent, $[20] = hotkeys, $[21] = children, $[22] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], selectedProp = $[7], disabled = $[8], onClick = $[9], paddingX = $[10], paddingY = $[11], paddingTop = $[12], paddingRight = $[13], paddingBottom = $[14], paddingLeft = $[15], pressed = $[16], IconComponent = $[17], text = $[18], IconRightComponent = $[19], hotkeys = $[20], children = $[21], restProps = $[22]);
+  } = 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(), {
@@ -6515,7 +6175,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   }, $[29] = disabled, $[30] = onClick, $[31] = onItemClick, $[32] = t9) : t9 = $[32];
   const handleClick = t9;
   let t10, t11;
-  $[33] !== padding || $[34] !== paddingX || $[35] !== paddingY || $[36] !== paddingTop || $[37] !== paddingRight || $[38] !== paddingBottom || $[39] !== paddingLeft ? (t11 = {
+  $[33] !== padding || $[34] !== paddingBottom || $[35] !== paddingLeft || $[36] !== paddingRight || $[37] !== paddingTop || $[38] !== paddingX || $[39] !== paddingY ? (t11 = {
     padding,
     paddingX,
     paddingY,
@@ -6523,7 +6183,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }, $[33] = padding, $[34] = paddingX, $[35] = paddingY, $[36] = paddingTop, $[37] = paddingRight, $[38] = paddingBottom, $[39] = paddingLeft, $[40] = t11) : t11 = $[40], t10 = t11;
+  }, $[33] = padding, $[34] = paddingBottom, $[35] = paddingLeft, $[36] = paddingRight, $[37] = paddingTop, $[38] = paddingX, $[39] = paddingY, $[40] = t11) : t11 = $[40], t10 = t11;
   const paddingProps = t10, t12 = useArrayProp(fontSize2);
   let t13;
   $[41] !== t12 ? (t13 = t12.map(_temp$1), $[41] = t12, $[42] = t13) : t13 = $[42];
@@ -6534,7 +6194,7 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
   }, $[43] = t14) : t14 = $[43];
   const setRef = t14, t15 = as === "button" && pressed, t16 = as !== "button" && pressed ? "" : void 0, t17 = active ? "" : void 0, t18 = disabled ? "" : void 0, t19 = useArrayProp(radius), t20 = useArrayProp(0), t21 = disabled ? "default" : tone, t22 = as === "button" ? "button" : void 0;
   let t23;
-  $[44] !== IconComponent || $[45] !== text || $[46] !== IconRightComponent || $[47] !== fontSize2 || $[48] !== hotkeys || $[49] !== hotkeysFontSize || $[50] !== space || $[51] !== paddingProps ? (t23 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+  $[44] !== IconComponent || $[45] !== IconRightComponent || $[46] !== fontSize2 || $[47] !== hotkeys || $[48] !== hotkeysFontSize || $[49] !== paddingProps || $[50] !== space || $[51] !== text ? (t23 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
       react.isValidElement(IconComponent) && IconComponent,
       ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
@@ -6548,14 +6208,14 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
       react.isValidElement(IconRightComponent) && IconRightComponent,
       ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
     ] })
-  ] }), $[44] = IconComponent, $[45] = text, $[46] = IconRightComponent, $[47] = fontSize2, $[48] = hotkeys, $[49] = hotkeysFontSize, $[50] = space, $[51] = paddingProps, $[52] = t23) : t23 = $[52];
+  ] }), $[44] = IconComponent, $[45] = IconRightComponent, $[46] = fontSize2, $[47] = hotkeys, $[48] = hotkeysFontSize, $[49] = paddingProps, $[50] = space, $[51] = text, $[52] = t23) : t23 = $[52];
   let t24;
   $[53] !== children || $[54] !== paddingProps ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[53] = children, $[54] = paddingProps, $[55] = t24) : t24 = $[55];
   let t25;
-  return $[56] !== restProps || $[57] !== t15 || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== as || $[62] !== t19 || $[63] !== t20 || $[64] !== t21 || $[65] !== scheme || $[66] !== disabled || $[67] !== handleClick || $[68] !== onItemMouseEnter || $[69] !== onItemMouseLeave || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": t15, "data-pressed": t16, "data-selected": t17, "data-disabled": t18, forwardedAs: as, $radius: t19, $padding: t20, $tone: t21, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: t22, children: [
+  return $[56] !== as || $[57] !== disabled || $[58] !== handleClick || $[59] !== onItemMouseEnter || $[60] !== onItemMouseLeave || $[61] !== restProps || $[62] !== scheme || $[63] !== t15 || $[64] !== t16 || $[65] !== t17 || $[66] !== t18 || $[67] !== t19 || $[68] !== t20 || $[69] !== t21 || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": t15, "data-pressed": t16, "data-selected": t17, "data-disabled": t18, forwardedAs: as, $radius: t19, $padding: t20, $tone: t21, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: t22, children: [
     t23,
     t24
-  ] }), $[56] = restProps, $[57] = t15, $[58] = t16, $[59] = t17, $[60] = t18, $[61] = as, $[62] = t19, $[63] = t20, $[64] = t21, $[65] = scheme, $[66] = disabled, $[67] = handleClick, $[68] = onItemMouseEnter, $[69] = onItemMouseLeave, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25) : t25 = $[73], t25;
+  ] }), $[56] = as, $[57] = disabled, $[58] = handleClick, $[59] = onItemMouseEnter, $[60] = onItemMouseLeave, $[61] = restProps, $[62] = scheme, $[63] = t15, $[64] = t16, $[65] = t17, $[66] = t18, $[67] = t19, $[68] = t20, $[69] = t21, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25) : t25 = $[73], t25;
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
 function _temp$1(s) {
@@ -6603,13 +6263,13 @@ const keyframe = styledComponents.keyframes`
   }
 `, Root$4 = styledComponents.styled(Box)(responsiveRadiusStyle, skeletonStyle), Skeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(14);
-  let t0, delay, radius, restProps;
+  let delay, radius, restProps, t0;
   $[0] !== props ? ({
     animated: t0,
     delay,
     radius,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = delay, $[3] = radius, $[4] = restProps) : (t0 = $[1], delay = $[2], radius = $[3], restProps = $[4]);
+  } = props, $[0] = props, $[1] = delay, $[2] = radius, $[3] = restProps, $[4] = t0) : (delay = $[1], radius = $[2], restProps = $[3], t0 = $[4]);
   const animated = t0 === void 0 ? !1 : t0, [visible, setVisible] = react.useState(!delay);
   let t1, t2;
   $[5] !== delay ? (t1 = () => {
@@ -6624,7 +6284,7 @@ const keyframe = styledComponents.keyframes`
   }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), react.useEffect(t1, t2);
   const t3 = useArrayProp(radius);
   let t4;
-  return $[8] !== restProps || $[9] !== animated || $[10] !== t3 || $[11] !== visible || $[12] !== ref ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = restProps, $[9] = animated, $[10] = t3, $[11] = visible, $[12] = ref, $[13] = t4) : t4 = $[13], t4;
+  return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$4, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
 });
 Skeleton.displayName = "ForwardRef(Skeleton)";
 const Root$3 = styledComponents.styled(Skeleton)((props) => {
@@ -6643,57 +6303,57 @@ const Root$3 = styledComponents.styled(Skeleton)((props) => {
   });
 }), TextSkeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(7);
-  let t0, restProps;
+  let restProps, t0;
   $[0] !== props ? ({
     size: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
+  } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
 const LabelSkeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(7);
-  let t0, restProps;
+  let restProps, t0;
   $[0] !== props ? ({
     size: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
+  } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
 const HeadingSkeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(7);
-  let t0, restProps;
+  let restProps, t0;
   $[0] !== props ? ({
     size: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
+  } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
 const CodeSkeleton = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(7);
-  let t0, restProps;
+  let restProps, t0;
   $[0] !== props ? ({
     size: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps) : (t0 = $[1], restProps = $[2]);
+  } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
   const $size = useArrayProp(t0 === void 0 ? 2 : t0);
   let t1;
-  return $[3] !== restProps || $[4] !== $size || $[5] !== ref ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = restProps, $[4] = $size, $[5] = ref, $[6] = t1) : t1 = $[6], t1;
+  return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Root$3, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
 });
 CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
 const CustomButton = styledComponents.styled(Button)`
   max-width: 100%;
 `, Tab = react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(30);
-  let t0, t1, onFocus, focused, selected, restProps, icon, id, onClick, label;
+  let focused, icon, id, label, onClick, onFocus, restProps, selected, t0, t1;
   $[0] !== props ? ({
     icon,
     id,
@@ -6705,7 +6365,7 @@ const CustomButton = styledComponents.styled(Button)`
     padding: t1,
     selected,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = onFocus, $[4] = focused, $[5] = selected, $[6] = restProps, $[7] = icon, $[8] = id, $[9] = onClick, $[10] = label) : (t0 = $[1], t1 = $[2], onFocus = $[3], focused = $[4], selected = $[5], restProps = $[6], icon = $[7], id = $[8], onClick = $[9], label = $[10]);
+  } = 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);
@@ -6725,7 +6385,7 @@ const CustomButton = styledComponents.styled(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] !== restProps || $[19] !== t7 || $[20] !== fontSize2 || $[21] !== icon || $[22] !== id || $[23] !== onClick || $[24] !== handleFocus || $[25] !== padding || $[26] !== selected || $[27] !== t8 || $[28] !== label ? (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] = restProps, $[19] = t7, $[20] = fontSize2, $[21] = icon, $[22] = id, $[23] = onClick, $[24] = handleFocus, $[25] = padding, $[26] = selected, $[27] = t8, $[28] = label, $[29] = t9) : t9 = $[29], 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)`
@@ -6761,19 +6421,19 @@ const CustomInline = styledComponents.styled(Inline)`
   }, $[8] = numTabs, $[9] = t1) : t1 = $[9];
   const handleKeyDown = t1;
   let t2;
-  return $[10] !== restProps || $[11] !== handleKeyDown || $[12] !== ref || $[13] !== tabs ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs }), $[10] = restProps, $[11] = handleKeyDown, $[12] = ref, $[13] = tabs, $[14] = t2) : t2 = $[14], 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)";
 const TabPanel = react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(9);
-  let restProps, flex;
+  let flex, restProps;
   $[0] !== props ? ({
     flex,
     ...restProps
-  } = props, $[0] = props, $[1] = restProps, $[2] = flex) : (restProps = $[1], flex = $[2]);
+  } = props, $[0] = props, $[1] = flex, $[2] = restProps) : (flex = $[1], restProps = $[2]);
   const t0 = props.tabIndex === void 0 ? 0 : props.tabIndex;
   let t1;
-  return $[3] !== restProps || $[4] !== flex || $[5] !== ref || $[6] !== t0 || $[7] !== props.children ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "TabPanel", ...restProps, flex, ref, role: "tabpanel", tabIndex: t0, children: props.children }), $[3] = restProps, $[4] = flex, $[5] = ref, $[6] = t0, $[7] = props.children, $[8] = t1) : t1 = $[8], t1;
+  return $[3] !== flex || $[4] !== props.children || $[5] !== ref || $[6] !== restProps || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsxRuntime.jsx(Box, { "data-ui": "TabPanel", ...restProps, flex, ref, role: "tabpanel", tabIndex: t0, children: props.children }), $[3] = flex, $[4] = props.children, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
 });
 TabPanel.displayName = "ForwardRef(TabPanel)";
 const TextBox = styledComponents.styled(Flex)`
@@ -6824,12 +6484,12 @@ const STATUS_CARD_TONE = {
   error: "critical",
   warning: "caution",
   success: "positive",
-  info: "primary"
+  info: "neutral"
 }, BUTTON_TONE = {
   error: "critical",
   warning: "caution",
   success: "positive",
-  info: "primary"
+  info: "neutral"
 }, ROLES = {
   error: "alert",
   warning: "alert",
@@ -6838,7 +6498,7 @@ const STATUS_CARD_TONE = {
 }, Root$2 = styledComponents.styled(Card)(rootStyles);
 function Toast(props) {
   const $ = reactCompilerRuntime.c(30);
-  let t0, status, title, description, closable, onClose, restProps, duration;
+  let closable, description, duration, onClose, restProps, status, t0, title;
   $[0] !== props ? ({
     closable,
     description,
@@ -6848,7 +6508,7 @@ function Toast(props) {
     title,
     status,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = status, $[3] = title, $[4] = description, $[5] = closable, $[6] = onClose, $[7] = restProps, $[8] = duration) : (t0 = $[1], status = $[2], title = $[3], description = $[4], closable = $[5], onClose = $[6], restProps = $[7], duration = $[8]);
+  } = props, $[0] = props, $[1] = closable, $[2] = description, $[3] = duration, $[4] = onClose, $[5] = restProps, $[6] = status, $[7] = t0, $[8] = title) : (closable = $[1], description = $[2], duration = $[3], onClose = $[4], restProps = $[5], status = $[6], t0 = $[7], title = $[8]);
   const radius = t0 === void 0 ? 3 : t0, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
   let t1;
   $[9] !== title ? (t1 = title && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 1, weight: "medium", children: title }), $[9] = title, $[10] = t1) : t1 = $[10];
@@ -6860,16 +6520,16 @@ function Toast(props) {
     t2
   ] }) }), $[13] = t1, $[14] = t2, $[15] = t3) : t3 = $[15];
   let t4;
-  $[16] !== closable || $[17] !== buttonTone || $[18] !== onClose ? (t4 = closable && /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { as: "button", icon: icons.CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
+  $[16] !== buttonTone || $[17] !== closable || $[18] !== onClose ? (t4 = closable && /* @__PURE__ */ jsxRuntime.jsx(Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { as: "button", icon: icons.CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
     verticalAlign: "top"
-  } }) }), $[16] = closable, $[17] = buttonTone, $[18] = onClose, $[19] = t4) : t4 = $[19];
+  } }) }), $[16] = buttonTone, $[17] = closable, $[18] = onClose, $[19] = t4) : t4 = $[19];
   let t5;
   $[20] !== t3 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", children: [
     t3,
     t4
   ] }), $[20] = t3, $[21] = t4, $[22] = t5) : t5 = $[22];
   let t6;
-  return $[23] !== role || $[24] !== restProps || $[25] !== radius || $[26] !== cardTone || $[27] !== duration || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$2, { "data-ui": "Toast", role, ...restProps, marginTop: 3, radius, shadow: 2, tone: cardTone, $duration: duration, children: t5 }), $[23] = role, $[24] = restProps, $[25] = radius, $[26] = cardTone, $[27] = duration, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
+  return $[23] !== cardTone || $[24] !== duration || $[25] !== radius || $[26] !== restProps || $[27] !== role || $[28] !== t5 ? (t6 = /* @__PURE__ */ jsxRuntime.jsx(Root$2, { "data-ui": "Toast", role, ...restProps, marginTop: 3, radius, shadow: 2, tone: cardTone, $duration: duration, children: t5 }), $[23] = cardTone, $[24] = duration, $[25] = radius, $[26] = restProps, $[27] = role, $[28] = t5, $[29] = t6) : t6 = $[29], t6;
 }
 Toast.displayName = "Toast";
 function useMounted() {
@@ -6986,7 +6646,7 @@ function ToastProvider(props) {
     toastsRef.current = {};
   }, t13 = [], $[10] = t12, $[11] = t13) : (t12 = $[10], t13 = $[11]), react.useEffect(t12, t13);
   let t14;
-  $[12] !== mounted || $[13] !== variants || $[14] !== prefersReducedMotion || $[15] !== state || $[16] !== padding || $[17] !== paddingX || $[18] !== paddingY || $[19] !== zOffset ? (t14 = mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map((t152) => {
+  $[12] !== mounted || $[13] !== padding || $[14] !== paddingX || $[15] !== paddingY || $[16] !== prefersReducedMotion || $[17] !== state || $[18] !== variants || $[19] !== zOffset ? (t14 = mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map((t152) => {
     const {
       dismiss: dismiss_0,
       id: id_0,
@@ -6999,7 +6659,7 @@ function ToastProvider(props) {
       damping: 30,
       stiffness: 400
     }, children: /* @__PURE__ */ jsxRuntime.jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration }) }, id_0);
-  }) }) }) }) }), $[12] = mounted, $[13] = variants, $[14] = prefersReducedMotion, $[15] = state, $[16] = padding, $[17] = paddingX, $[18] = paddingY, $[19] = zOffset, $[20] = t14) : t14 = $[20];
+  }) }) }) }) }), $[12] = mounted, $[13] = padding, $[14] = paddingX, $[15] = paddingY, $[16] = prefersReducedMotion, $[17] = state, $[18] = variants, $[19] = zOffset, $[20] = t14) : t14 = $[20];
   let t15;
   return $[21] !== children || $[22] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
     children,
@@ -7071,13 +6731,13 @@ function _focusItemElement(el) {
 }
 const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = react.memo(react.forwardRef(function(props, forwardedRef) {
   const $ = reactCompilerRuntime.c(37);
-  let t0, onFocus, children, restProps;
+  let children, onFocus, restProps, t0;
   $[0] !== props ? ({
     children,
     space: t0,
     onFocus,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = onFocus, $[3] = children, $[4] = restProps) : (t0 = $[1], onFocus = $[2], children = $[3], restProps = $[4]);
+  } = props, $[0] = props, $[1] = children, $[2] = onFocus, $[3] = restProps, $[4] = t0) : (children = $[1], onFocus = $[2], restProps = $[3], t0 = $[4]);
   const space = t0 === void 0 ? 1 : t0, ref = react.useRef(null), [focusedElement, setFocusedElement] = react.useState(null), focusedElementRef = react.useRef(focusedElement);
   let t1, t2;
   $[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[5] = t2) : t2 = $[5], t1 = t2;
@@ -7131,7 +6791,7 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
   let t12;
   const t13 = focusedElement || itemElements[0] || null;
   let t14;
-  $[17] !== t13 || $[18] !== space || $[19] !== state ? (t14 = {
+  $[17] !== space || $[18] !== state || $[19] !== t13 ? (t14 = {
     version: 0,
     focusedElement: t13,
     level: 0,
@@ -7141,7 +6801,7 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
     setFocusedElement,
     space,
     state
-  }, $[17] = t13, $[18] = space, $[19] = state, $[20] = t14) : t14 = $[20], t12 = t14;
+  }, $[17] = space, $[18] = state, $[19] = t13, $[20] = t14) : t14 = $[20], t12 = t14;
   const contextValue = t12;
   let t15;
   $[21] !== itemElements ? (t15 = (event) => {
@@ -7220,7 +6880,7 @@ const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null),
   let t18;
   $[26] !== children ? (t18 = [children], $[26] = children, $[27] = t18) : t18 = $[27], react.useEffect(t17, t18);
   let t19;
-  $[28] !== restProps || $[29] !== handleFocus || $[30] !== handleKeyDown || $[31] !== space || $[32] !== children ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", space, children }), $[28] = restProps, $[29] = handleFocus, $[30] = handleKeyDown, $[31] = space, $[32] = children, $[33] = t19) : t19 = $[33];
+  $[28] !== children || $[29] !== handleFocus || $[30] !== handleKeyDown || $[31] !== restProps || $[32] !== space ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", space, children }), $[28] = children, $[29] = handleFocus, $[30] = handleKeyDown, $[31] = restProps, $[32] = space, $[33] = t19) : t19 = $[33];
   let t20;
   return $[34] !== contextValue || $[35] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t19 }), $[34] = contextValue, $[35] = t19, $[36] = t20) : t20 = $[36], t20;
 }));
@@ -7325,15 +6985,15 @@ function useTree() {
 }
 const TreeGroup = react.memo(function(props) {
   const $ = reactCompilerRuntime.c(9);
-  let t0, restProps, children;
+  let children, restProps, t0;
   $[0] !== props ? ({
     children,
     expanded: t0,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = children) : (t0 = $[1], restProps = $[2], children = $[3]);
+  } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0) : (children = $[1], restProps = $[2], t0 = $[3]);
   const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
   let t2;
-  return $[4] !== restProps || $[5] !== t1 || $[6] !== tree.space || $[7] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = restProps, $[5] = t1, $[6] = tree.space, $[7] = children, $[8] = t2) : t2 = $[8], t2;
+  return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.space ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.space, $[8] = t2) : t2 = $[8], t2;
 }), Root = react.memo(styledComponents.styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styledComponents.styled(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle), ToggleArrowText = styledComponents.styled(Text)`
@@ -7341,117 +7001,61 @@ const TreeGroup = react.memo(function(props) {
     transition: transform 100ms;
   }
 `, TreeItem = react.memo(function(props) {
-  const $ = reactCompilerRuntime.c(112);
-  let t0, t1, t2, t3, t4, idProp, onClick, IconComponent, children, muted, weight, text, href, linkAs, restProps;
-  $[0] !== props ? ({
+  const {
     children,
-    expanded: t0,
-    fontSize: t1,
+    expanded: expandedProp = !1,
+    fontSize: fontSize2 = 1,
     href,
     icon: IconComponent,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding: t2,
-    selected: t3,
-    space: t4,
+    padding = 2,
+    selected = !1,
+    space = 2,
     text,
     weight,
     ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = idProp, $[7] = onClick, $[8] = IconComponent, $[9] = children, $[10] = muted, $[11] = weight, $[12] = text, $[13] = href, $[14] = linkAs, $[15] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], idProp = $[6], onClick = $[7], IconComponent = $[8], children = $[9], muted = $[10], weight = $[11], text = $[12], href = $[13], linkAs = $[14], restProps = $[15]);
-  const expandedProp = t0 === void 0 ? !1 : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 === void 0 ? !1 : t3, space = t4 === void 0 ? 2 : t4, [rootElement, setRootElement] = react.useState(null), treeitemRef = react.useRef(null), tree = useTree(), {
+  } = props, rootRef = react.useRef(null), treeitemRef = react.useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = react.useId(), id = idProp || _id;
-  let t5, t6, t7;
-  if ($[16] !== id || $[17] !== path) {
-    const result = path.concat([id || ""]);
-    t6 = result, t7 = result.join("/"), $[16] = id, $[17] = path, $[18] = t6, $[19] = t7;
-  } else
-    t6 = $[18], t7 = $[19];
-  let t8;
-  $[20] !== t6 || $[21] !== t7 ? (t8 = [t6, t7], $[20] = t6, $[21] = t7, $[22] = t8) : t8 = $[22], t5 = t8;
-  const [itemPath, itemKey] = t5, itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1;
-  let t9;
-  const t10 = tree.level + 1;
-  let t11;
-  $[23] !== tree || $[24] !== t10 || $[25] !== itemPath ? (t11 = {
+  } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = react.useMemo(() => ({
     ...tree,
-    level: t10,
+    level: tree.level + 1,
     path: itemPath
-  }, $[23] = tree, $[24] = t10, $[25] = itemPath, $[26] = t11) : t11 = $[26], t9 = t11;
-  const contextValue = t9;
-  let t12;
-  $[27] !== onClick || $[28] !== setExpanded || $[29] !== itemKey || $[30] !== expanded || $[31] !== setFocusedElement || $[32] !== rootElement ? (t12 = (event) => {
+  }), [itemPath, tree]), handleClick = react.useCallback((event) => {
     onClick && onClick(event);
     const target = event.target;
-    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
-  }, $[27] = onClick, $[28] = setExpanded, $[29] = itemKey, $[30] = expanded, $[31] = setFocusedElement, $[32] = rootElement, $[33] = t12) : t12 = $[33];
-  const handleClick = t12;
-  let t13;
-  $[34] !== focused || $[35] !== rootElement ? (t13 = (event_0) => {
-    focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-  }, $[34] = focused, $[35] = rootElement, $[36] = t13) : t13 = $[36];
-  const handleKeyDown = t13;
-  let t14, t15;
-  $[37] !== rootElement || $[38] !== registerItem || $[39] !== itemPath || $[40] !== expanded || $[41] !== selected ? (t14 = () => {
-    if (rootElement)
-      return registerItem(rootElement, itemPath.join("/"), expanded, selected);
-  }, t15 = [expanded, itemPath, registerItem, rootElement, selected], $[37] = rootElement, $[38] = registerItem, $[39] = itemPath, $[40] = expanded, $[41] = selected, $[42] = t14, $[43] = t15) : (t14 = $[42], t15 = $[43]), react.useEffect(t14, t15);
-  const t16 = IconComponent || children ? "visible" : "hidden";
-  let t17;
-  $[44] !== t16 ? (t17 = {
-    visibility: t16,
-    pointerEvents: "none"
-  }, $[44] = t16, $[45] = t17) : t17 = $[45];
-  let t18;
-  $[46] !== IconComponent || $[47] !== muted || $[48] !== fontSize2 || $[49] !== weight ? (t18 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }), $[46] = IconComponent, $[47] = muted, $[48] = fontSize2, $[49] = weight, $[50] = t18) : t18 = $[50];
-  let t19;
-  $[51] !== IconComponent || $[52] !== expanded || $[53] !== muted || $[54] !== fontSize2 || $[55] !== weight ? (t19 = !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
-    transform: expanded ? "rotate(90deg)" : void 0
-  } }) }), $[51] = IconComponent, $[52] = expanded, $[53] = muted, $[54] = fontSize2, $[55] = weight, $[56] = t19) : t19 = $[56];
-  let t20;
-  $[57] !== space || $[58] !== t17 || $[59] !== t18 || $[60] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { marginRight: space, style: t17, children: [
-    t18,
-    t19
-  ] }), $[57] = space, $[58] = t17, $[59] = t18, $[60] = t19, $[61] = t20) : t20 = $[61];
-  let t21;
-  $[62] !== muted || $[63] !== fontSize2 || $[64] !== weight || $[65] !== text ? (t21 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) }), $[62] = muted, $[63] = fontSize2, $[64] = weight, $[65] = text, $[66] = t21) : t21 = $[66];
-  let t22;
-  $[67] !== padding || $[68] !== t20 || $[69] !== t21 ? (t22 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
-    t20,
-    t21
-  ] }), $[67] = padding, $[68] = t20, $[69] = t21, $[70] = t22) : t22 = $[70];
-  const content = t22;
-  if (href) {
-    const t232 = selected ? "" : void 0;
-    let t242;
-    $[71] !== tree.level || $[72] !== expanded || $[73] !== linkAs || $[74] !== href || $[75] !== tabIndex || $[76] !== content ? (t242 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }), $[71] = tree.level, $[72] = expanded, $[73] = linkAs, $[74] = href, $[75] = tabIndex, $[76] = content, $[77] = t242) : t242 = $[77];
-    let t252;
-    $[78] !== children || $[79] !== expanded ? (t252 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[78] = children, $[79] = expanded, $[80] = t252) : t252 = $[80];
-    let t262;
-    $[81] !== contextValue || $[82] !== t252 ? (t262 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t252 }), $[81] = contextValue, $[82] = t252, $[83] = t262) : t262 = $[83];
-    let t272;
-    return $[84] !== t232 || $[85] !== id || $[86] !== itemKey || $[87] !== restProps || $[88] !== handleClick || $[89] !== t242 || $[90] !== t262 ? (t272 = /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": t232, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
-      t242,
-      t262
-    ] }), $[84] = t232, $[85] = id, $[86] = itemKey, $[87] = restProps, $[88] = handleClick, $[89] = t242, $[90] = t262, $[91] = t272) : t272 = $[91], t272;
-  }
-  const t23 = selected ? "" : void 0;
-  let t24;
-  $[92] !== tree.level || $[93] !== content ? (t24 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }), $[92] = tree.level, $[93] = content, $[94] = t24) : t24 = $[94];
-  let t25;
-  $[95] !== children || $[96] !== expanded ? (t25 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[95] = children, $[96] = expanded, $[97] = t25) : t25 = $[97];
-  let t26;
-  $[98] !== contextValue || $[99] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t25 }), $[98] = contextValue, $[99] = t25, $[100] = t26) : t26 = $[100];
-  let t27;
-  return $[101] !== t23 || $[102] !== id || $[103] !== itemKey || $[104] !== restProps || $[105] !== expanded || $[106] !== handleClick || $[107] !== handleKeyDown || $[108] !== tabIndex || $[109] !== t24 || $[110] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": t23, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
-    t24,
-    t26
-  ] }), $[101] = t23, $[102] = id, $[103] = itemKey, $[104] = restProps, $[105] = expanded, $[106] = handleClick, $[107] = handleKeyDown, $[108] = tabIndex, $[109] = t24, $[110] = t26, $[111] = t27) : t27 = $[111], t27;
+    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
+  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = react.useCallback((event_0) => {
+    focused && event_0.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
+  }, [focused]);
+  react.useEffect(() => {
+    if (rootRef.current)
+      return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
+  }, [expanded, itemPath, registerItem, selected]);
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Box, { marginRight: space, style: {
+      visibility: IconComponent || children ? "visible" : "hidden",
+      pointerEvents: "none"
+    }, children: [
+      IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
+      !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
+        transform: expanded ? "rotate(90deg)" : void 0
+      } }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
+  ] });
+  return href ? /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
+    /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }) })
+  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
+    /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
+  ] });
 });
 TreeItem.displayName = "Memo(TreeItem)";
 exports.Arrow = Arrow;