@sanity/ui 2.8.21 → 2.8.23

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;
   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 = () => {
@@ -236,9 +236,9 @@ function _temp$6() {
 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);
 }
@@ -650,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() {
@@ -668,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() {
@@ -1461,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,
@@ -1471,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") {
@@ -1483,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 = {
@@ -1633,7 +1633,7 @@ const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyl
   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;
+  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, asProp, initials, onImageLoadError, restProps, src, t0, t1, t2, title;
   $[0] !== props ? ({
     __unstable_hideInnerStroke,
     as: asProp,
@@ -1647,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}`;
@@ -1678,20 +1678,20 @@ const Root$B = styledComponents.styled.div(responsiveAvatarSizeStyle, avatarStyl
   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];
   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: [
+  $[27] !== __unstable_hideInnerStroke || $[28] !== _radius || $[29] !== _sizeRem || $[30] !== handleImageError || $[31] !== imageFailed || $[32] !== imageId || $[33] !== 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];
+  ] }), $[27] = __unstable_hideInnerStroke, $[28] = _radius, $[29] = _sizeRem, $[30] = handleImageError, $[31] = imageFailed, $[32] = imageId, $[33] = src, $[34] = t12) : t12 = $[34];
   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];
+  $[35] !== imageFailed || $[36] !== initials || $[37] !== initialsSize || $[38] !== 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 }) }) }), $[35] = imageFailed, $[36] = initials, $[37] = initialsSize, $[38] = src, $[39] = t13) : t13 = $[39];
   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 $[40] !== arrowPosition || $[41] !== as || $[42] !== color || $[43] !== ref || $[44] !== restProps || $[45] !== size2 || $[46] !== status || $[47] !== t10 || $[48] !== t11 || $[49] !== t12 || $[50] !== t13 || $[51] !== 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;
+  ] }), $[40] = arrowPosition, $[41] = as, $[42] = color, $[43] = ref, $[44] = restProps, $[45] = size2, $[46] = status, $[47] = t10, $[48] = t11, $[49] = t12, $[50] = t13, $[51] = title, $[52] = t14) : t14 = $[52], t14;
 });
 Avatar.displayName = "ForwardRef(Avatar)";
 function _responsiveAvatarCounterSizeStyle(props) {
@@ -1744,9 +1744,9 @@ const Root$A = styledComponents.styled.div(_responsiveAvatarCounterSizeStyle, _a
   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];
+  $[3] !== count || $[4] !== fontSize2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[3] = count, $[4] = fontSize2, $[5] = t3) : t3 = $[5];
   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 $[6] !== ref || $[7] !== size2 || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: t3 }), $[6] = ref, $[7] = size2, $[8] = t3, $[9] = t4) : t4 = $[9], t4;
 });
 AvatarCounter.displayName = "ForwardRef(AvatarCounter)";
 const BASE_STYLES = styledComponents.css`
@@ -1779,13 +1779,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, {
@@ -1793,16 +1793,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,
@@ -1831,10 +1831,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) {
@@ -1913,7 +1913,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,
@@ -1923,7 +1923,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") {
@@ -1934,7 +1934,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) {
@@ -1954,7 +1954,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,
@@ -1965,19 +1965,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,
@@ -1986,10 +1986,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`
@@ -2187,7 +2187,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,
@@ -2214,12 +2214,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,
@@ -2227,12 +2227,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, {})
@@ -2242,15 +2242,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) {
@@ -2403,7 +2403,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,
@@ -2421,12 +2421,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() {
@@ -2569,7 +2569,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,
@@ -2579,7 +2579,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);
@@ -2589,7 +2589,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, {}),
@@ -2752,27 +2752,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 = {
@@ -2793,20 +2793,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,
@@ -2819,10 +2819,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) {
@@ -2892,7 +2892,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,
@@ -2902,7 +2902,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") {
@@ -2913,7 +2913,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() {
@@ -2945,13 +2945,13 @@ 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;
+  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;
@@ -2961,7 +2961,7 @@ const Root$m = styledComponents.styled(Box)(inlineBaseStyle, inlineSpaceStyle),
   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 $[8] !== as || $[9] !== children || $[10] !== restProps || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(Root$m, { "data-ui": "Inline", ...restProps, $space: t2, forwardedAs: as, ref, children }), $[8] = as, $[9] = children, $[10] = restProps, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
 });
 Inline.displayName = "ForwardRef(Inline)";
 function kbdStyle() {
@@ -2983,21 +2983,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 = {
@@ -3121,13 +3121,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 = [{
@@ -3157,13 +3157,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);
@@ -3179,7 +3179,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) {
@@ -3217,12 +3217,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;
@@ -3246,7 +3246,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 {
@@ -3403,7 +3403,7 @@ function LayerProvider(props) {
   }, $[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,
@@ -3415,21 +3415,21 @@ 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;
 }
 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
@@ -3443,11 +3443,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 = {
@@ -3455,20 +3455,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`);
@@ -3509,15 +3509,15 @@ function PortalProvider(props) {
   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() {
   return null;
@@ -3551,7 +3551,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`
@@ -3562,7 +3562,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,
@@ -3571,7 +3571,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];
@@ -3625,8 +3625,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],
@@ -3635,7 +3635,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) {
@@ -3651,14 +3651,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;
@@ -3670,7 +3670,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;
 });
@@ -3759,7 +3759,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   }
 `, PopoverCard = react.memo(react.forwardRef(function(props, ref) {
   const $ = reactCompilerRuntime.c(60);
-  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, width, arrowX, arrowY, restProps, padding, children, overflow, arrow, arrowRef, placement, radius, scheme, shadow, tone;
+  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,
@@ -3783,7 +3783,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     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] = width, $[10] = arrowX, $[11] = arrowY, $[12] = restProps, $[13] = padding, $[14] = children, $[15] = overflow, $[16] = arrow, $[17] = arrowRef, $[18] = placement, $[19] = radius, $[20] = scheme, $[21] = shadow, $[22] = tone) : (marginsProp = $[1], xProp = $[2], yProp = $[3], animate = $[4], originX = $[5], originY = $[6], strategy = $[7], style = $[8], width = $[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 = $[22]);
+  } = 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();
@@ -3793,7 +3793,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   let t1;
   const t2 = animate ? "transform" : void 0;
   let t3;
-  $[23] !== x || $[24] !== originX || $[25] !== originY || $[26] !== strategy || $[27] !== y || $[28] !== width || $[29] !== zIndex || $[30] !== t2 || $[31] !== 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,
@@ -3803,7 +3803,7 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     zIndex,
     willChange: t2,
     ...style
-  }, $[23] = x, $[24] = originX, $[25] = originY, $[26] = strategy, $[27] = y, $[28] = width, $[29] = zIndex, $[30] = t2, $[31] = style, $[32] = t3) : t3 = $[32], 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;
@@ -3818,16 +3818,16 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
   let t9;
   $[36] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[36] = animate, $[37] = t9) : t9 = $[37];
   let t10;
-  $[38] !== padding || $[39] !== children ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = padding, $[39] = children, $[40] = t10) : t10 = $[40];
+  $[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;
   $[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;
   $[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 $[48] !== t8 || $[49] !== placement || $[50] !== radius || $[51] !== ref || $[52] !== scheme || $[53] !== shadow || $[54] !== rootStyle2 || $[55] !== tone || $[56] !== t9 || $[57] !== t11 || $[58] !== 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
-  ] }), $[48] = t8, $[49] = placement, $[50] = radius, $[51] = ref, $[52] = scheme, $[53] = shadow, $[54] = rootStyle2, $[55] = tone, $[56] = t9, $[57] = t11, $[58] = t12, $[59] = t13) : t13 = $[59], 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) {
@@ -4081,7 +4081,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,
@@ -4089,13 +4089,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;
@@ -4249,7 +4249,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,
@@ -4260,13 +4260,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;
@@ -4304,15 +4304,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() {
@@ -4470,7 +4470,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,
@@ -4479,7 +4479,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);
@@ -4489,7 +4489,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;
@@ -4511,7 +4511,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,
@@ -4522,16 +4522,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,
@@ -4587,7 +4587,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   }
 }), 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;
+  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,
@@ -4607,7 +4607,7 @@ 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);
@@ -4633,10 +4633,10 @@ 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) {
@@ -4658,25 +4658,25 @@ const CLEAR_BUTTON_BOX_STYLE = {
   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;
+  $[50] !== clearButton || $[51] !== clearButtonBoxPadding || $[52] !== clearButtonPadding || $[53] !== clearButtonProps || $[54] !== customValidity || $[55] !== disabled || $[56] !== fontSize2 || $[57] !== handleClearClick || $[58] !== radius || $[59] !== 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 }) }), $[50] = clearButton, $[51] = clearButtonBoxPadding, $[52] = clearButtonPadding, $[53] = clearButtonProps, $[54] = customValidity, $[55] = disabled, $[56] = fontSize2, $[57] = handleClearClick, $[58] = radius, $[59] = readOnly, $[60] = t22) : t22 = $[60], 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;
+  $[61] !== radius || $[62] !== 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 }) }), $[61] = radius, $[62] = suffix, $[63] = t24) : t24 = $[63], 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];
+  $[64] !== $hasIcon || $[65] !== disabled || $[66] !== fontSize2 || $[67] !== padding || $[68] !== readOnly || $[69] !== restProps || $[70] !== rootTheme.scheme || $[71] !== rootTheme.tone || $[72] !== space || $[73] !== t25 || $[74] !== type || $[75] !== 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 }), $[64] = $hasIcon, $[65] = disabled, $[66] = fontSize2, $[67] = padding, $[68] = readOnly, $[69] = restProps, $[70] = rootTheme.scheme, $[71] = rootTheme.tone, $[72] = space, $[73] = t25, $[74] = type, $[75] = weight, $[76] = t26) : t26 = $[76];
   let t27;
-  $[77] !== t26 || $[78] !== presentationNode || $[79] !== clearButtonNode ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
+  $[77] !== clearButtonNode || $[78] !== presentationNode || $[79] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(InputRoot, { children: [
     t26,
     presentationNode,
     clearButtonNode
-  ] }), $[77] = t26, $[78] = presentationNode, $[79] = clearButtonNode, $[80] = t27) : t27 = $[80];
+  ] }), $[77] = clearButtonNode, $[78] = presentationNode, $[79] = t26, $[80] = t27) : t27 = $[80];
   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 $[81] !== prefixNode || $[82] !== rootTheme.tone || $[83] !== suffixNode || $[84] !== 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;
+  ] }), $[81] = prefixNode, $[82] = rootTheme.tone, $[83] = suffixNode, $[84] = t27, $[85] = t28) : t28 = $[85], t28;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
 function _temp$2(event) {
@@ -4717,7 +4717,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,
@@ -4734,16 +4734,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;
@@ -4760,10 +4760,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);
@@ -4778,17 +4778,17 @@ 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)`
@@ -4923,19 +4923,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);
+  }, 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;
@@ -4977,7 +4977,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" ? {
@@ -5019,17 +5019,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,
@@ -5039,63 +5037,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)
@@ -5106,32 +5080,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",
@@ -5141,8 +5105,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",
@@ -5154,66 +5117,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",
@@ -5225,19 +5165,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];
@@ -5247,123 +5182,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`
@@ -5528,24 +5375,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: "flex-start", 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;
@@ -5559,14 +5406,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,
@@ -5589,7 +5436,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) => {
@@ -5625,15 +5472,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;
 });
@@ -5652,7 +5499,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`
@@ -5668,7 +5515,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,
@@ -5676,22 +5523,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);
@@ -5837,7 +5684,7 @@ const Root$5 = styledComponents.styled(Box)`
   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,
@@ -5855,9 +5702,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);
@@ -5885,9 +5732,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;
@@ -5895,7 +5742,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,
@@ -5908,14 +5755,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) {
@@ -5983,9 +5830,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) => {
@@ -5999,15 +5846,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,
@@ -6016,10 +5863,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,
@@ -6029,14 +5876,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,
@@ -6045,12 +5892,12 @@ 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)";
 const MenuDivider = styledComponents.styled.hr`
@@ -6172,7 +6019,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,
@@ -6186,7 +6033,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(), {
@@ -6241,7 +6088,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) => {
@@ -6264,20 +6111,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,
@@ -6301,7 +6148,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(), {
@@ -6321,7 +6168,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,
@@ -6329,7 +6176,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];
@@ -6340,7 +6187,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, {})
@@ -6354,14 +6201,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) {
@@ -6409,13 +6256,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 = () => {
@@ -6430,7 +6277,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) => {
@@ -6449,57 +6296,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,
@@ -6511,7 +6358,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);
@@ -6531,7 +6378,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)`
@@ -6567,19 +6414,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)`
@@ -6644,7 +6491,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,
@@ -6654,7 +6501,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];
@@ -6666,16 +6513,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() {
@@ -6792,7 +6639,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,
@@ -6805,7 +6652,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,
@@ -6877,13 +6724,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;
@@ -6937,7 +6784,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,
@@ -6947,7 +6794,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) => {
@@ -7026,7 +6873,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;
 }));
@@ -7131,15 +6978,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)`