@sanity/ui 4.0.0-static.4 → 4.0.0-static.41

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { SpinnerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
-import { useState, isValidElement, useDebugValue, useSyncExternalStore, createContext, useContext, useRef, useImperativeHandle, useEffect, useMemo, useCallback, cloneElement, useReducer, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
 import { c } from "react/compiler-runtime";
+import { SpinnerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
+import { isValidElement, useDebugValue, useSyncExternalStore, createContext, use, useRef, useImperativeHandle, useEffect, useState, cloneElement, useReducer, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
 import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, card, BREAKPOINTS, popoverCard, popover, _selectable, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, kbd, menu, menuDivider, toast, toastLayer, treeItem, label, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, tooltip, root } from "@sanity/ui/css";
 import { isValidElementType } from "react-is";
-import { detectOverflow, autoPlacement, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { detectOverflow, useFloating, autoPlacement, flip, offset, shift, arrow, hide, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -119,18 +119,13 @@ function isArray(val) {
 function isRecord(value) {
   return !!(value && typeof value == "object" && !Array.isArray(value));
 }
-function _getArrayProp(val, defaultVal) {
-  return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
-}
 function _getResponsiveProp(val, defaultVal) {
   return val === void 0 ? defaultVal || EMPTY_ARRAY : isArray(val) || isRecord(val) ? val : [val];
 }
 function useResponsiveProp(val, defaultVal) {
   const $ = c(3);
   let t0;
-  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
-  const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
-  return hash !== cachedHash && setCache([_getResponsiveProp(val, defaultVal), hash]), cachedVal;
+  return $[0] !== defaultVal || $[1] !== val ? (t0 = _getResponsiveProp(val, defaultVal), $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2], t0;
 }
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
@@ -272,40 +267,54 @@ function Box(props) {
 }
 const DEFAULT_TEXT_ELEMENT = "div";
 function Text(props) {
-  const $ = c(30), t0 = props;
-  let align, children, className, flex, muted, rest, t1, t2, t3, t4, textOverflowProp;
+  const $ = c(44), t0 = props;
+  let align, children, className, flex, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, muted, rest, t1, t2, t3, t4, textOverflowProp;
   $[0] !== t0 ? ({
     align,
     as: t1,
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth: t2,
     muted,
     size: t3,
     textOverflow: textOverflowProp,
     weight: t4,
     ...rest
-  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = muted, $[6] = rest, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], muted = $[5], rest = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], textOverflowProp = $[11]);
+  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = margin, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = muted, $[13] = rest, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], margin = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], muted = $[12], rest = $[13], t1 = $[14], t2 = $[15], t3 = $[16], t4 = $[17], textOverflowProp = $[18]);
   const Element2 = t1 === void 0 ? DEFAULT_TEXT_ELEMENT : t1, maxWidth = t2 === void 0 ? "fill" : t2, size2 = t3 === void 0 ? 2 : t3, weight = t4 === void 0 ? "regular" : t4;
   let t5;
-  $[12] !== align || $[13] !== className || $[14] !== flex || $[15] !== maxWidth || $[16] !== muted || $[17] !== size2 || $[18] !== weight ? (t5 = text({
+  $[19] !== align || $[20] !== className || $[21] !== flex || $[22] !== margin || $[23] !== marginBottom || $[24] !== marginLeft || $[25] !== marginRight || $[26] !== marginTop || $[27] !== marginX || $[28] !== marginY || $[29] !== maxWidth || $[30] !== muted || $[31] !== size2 || $[32] !== weight ? (t5 = text({
     className,
     align,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth,
     muted,
     size: size2,
     weight
-  }), $[12] = align, $[13] = className, $[14] = flex, $[15] = maxWidth, $[16] = muted, $[17] = size2, $[18] = weight, $[19] = t5) : t5 = $[19];
+  }), $[19] = align, $[20] = className, $[21] = flex, $[22] = margin, $[23] = marginBottom, $[24] = marginLeft, $[25] = marginRight, $[26] = marginTop, $[27] = marginX, $[28] = marginY, $[29] = maxWidth, $[30] = muted, $[31] = size2, $[32] = weight, $[33] = t5) : t5 = $[33];
   let t6;
-  $[20] !== textOverflowProp ? (t6 = textOverflow({
+  $[34] !== textOverflowProp ? (t6 = textOverflow({
     textOverflow: textOverflowProp
-  }), $[20] = textOverflowProp, $[21] = t6) : t6 = $[21];
+  }), $[34] = textOverflowProp, $[35] = t6) : t6 = $[35];
   let t7;
-  $[22] !== children || $[23] !== t6 ? (t7 = /* @__PURE__ */ jsx("span", { className: t6, children }), $[22] = children, $[23] = t6, $[24] = t7) : t7 = $[24];
+  $[36] !== children || $[37] !== t6 ? (t7 = /* @__PURE__ */ jsx("span", { className: t6, children }), $[36] = children, $[37] = t6, $[38] = t7) : t7 = $[38];
   let t8;
-  return $[25] !== Element2 || $[26] !== rest || $[27] !== t5 || $[28] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Text", ...rest, className: t5, children: t7 }), $[25] = Element2, $[26] = rest, $[27] = t5, $[28] = t7, $[29] = t8) : t8 = $[29], t8;
+  return $[39] !== Element2 || $[40] !== rest || $[41] !== t5 || $[42] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Text", ...rest, className: t5, children: t7 }), $[39] = Element2, $[40] = rest, $[41] = t5, $[42] = t7, $[43] = t8) : t8 = $[43], t8;
 }
 function AnimatedSpinnerIcon(props) {
   const $ = c(5);
@@ -339,77 +348,79 @@ function Spinner(props) {
 }
 const DEFAULT_BUTTON_ELEMENT = "button";
 function Button(props) {
-  const {
-    align = "center",
-    as: Element2 = DEFAULT_BUTTON_ELEMENT,
-    children,
+  const $ = c(88), t0 = props;
+  let Element2, IconComponent, IconRightComponent, align, children, className, disabled, flex, fontSize, gap, gapX, gapY, href, justify, loading, mode, muted, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, rest, selected, text2, textAlign, textOverflow2, textWeight, tone, type, width;
+  if ($[0] !== props.padding || $[1] !== t0) {
+    const {
+      align: t12,
+      as: t22,
+      children: t32,
+      className: t42,
+      disabled: t52,
+      flex: t62,
+      fontSize: t72,
+      gap: _gap,
+      gapX: t82,
+      gapY: t92,
+      icon: t10,
+      iconRight: t11,
+      justify: t122,
+      loading: t13,
+      mode: t14,
+      muted: t15,
+      padding: t16,
+      paddingX: t17,
+      paddingY: t18,
+      paddingTop: t19,
+      paddingBottom: t20,
+      paddingLeft: t21,
+      paddingRight: t222,
+      radius: t23,
+      selected: t24,
+      text: t25,
+      textAlign: t26,
+      textOverflow: t27,
+      textWeight: t28,
+      tone: t29,
+      type: t30,
+      width: t31,
+      ...t322
+    } = t0;
+    children = t32, className = t42, disabled = t52, flex = t62, gapX = t82, gapY = t92, IconComponent = t10, IconRightComponent = t11, loading = t13, paddingX = t17, paddingY = t18, paddingTop = t19, paddingBottom = t20, paddingLeft = t21, paddingRight = t222, selected = t24, text2 = t25, textAlign = t26, width = t31, rest = t322, align = t12 === void 0 ? "center" : t12, Element2 = t22 === void 0 ? DEFAULT_BUTTON_ELEMENT : t22, fontSize = t72 === void 0 ? 1 : t72, justify = t122 === void 0 ? "center" : t122, mode = t14 === void 0 ? "default" : t14, muted = t15 === void 0 ? !1 : t15, padding = t16 === void 0 ? 3 : t16, radius = t23 === void 0 ? 2 : t23, textOverflow2 = t27 === void 0 ? "ellipsis" : t27, textWeight = t28 === void 0 ? "medium" : t28, tone = t29 === void 0 ? "default" : t29, type = t30 === void 0 ? "button" : t30, gap = _gap ?? props.padding ?? 3, href = void 0, "href" in rest && (href = typeof rest.href == "string" ? rest.href : void 0, delete rest.href), $[0] = props.padding, $[1] = t0, $[2] = Element2, $[3] = IconComponent, $[4] = IconRightComponent, $[5] = align, $[6] = children, $[7] = className, $[8] = disabled, $[9] = flex, $[10] = fontSize, $[11] = gap, $[12] = gapX, $[13] = gapY, $[14] = href, $[15] = justify, $[16] = loading, $[17] = mode, $[18] = muted, $[19] = padding, $[20] = paddingBottom, $[21] = paddingLeft, $[22] = paddingRight, $[23] = paddingTop, $[24] = paddingX, $[25] = paddingY, $[26] = radius, $[27] = rest, $[28] = selected, $[29] = text2, $[30] = textAlign, $[31] = textOverflow2, $[32] = textWeight, $[33] = tone, $[34] = type, $[35] = width;
+  } else
+    Element2 = $[2], IconComponent = $[3], IconRightComponent = $[4], align = $[5], children = $[6], className = $[7], disabled = $[8], flex = $[9], fontSize = $[10], gap = $[11], gapX = $[12], gapY = $[13], href = $[14], justify = $[15], loading = $[16], mode = $[17], muted = $[18], padding = $[19], paddingBottom = $[20], paddingLeft = $[21], paddingRight = $[22], paddingTop = $[23], paddingX = $[24], paddingY = $[25], radius = $[26], rest = $[27], selected = $[28], text2 = $[29], textAlign = $[30], textOverflow2 = $[31], textWeight = $[32], tone = $[33], type = $[34], width = $[35];
+  let t1;
+  $[36] !== className || $[37] !== flex || $[38] !== mode || $[39] !== radius || $[40] !== tone || $[41] !== width ? (t1 = button({
     className,
-    disabled,
     flex,
-    fontSize = 1,
-    gap = props.padding ?? 3,
-    gapX,
-    gapY,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify = "center",
-    loading,
-    mode = "default",
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
-    selected,
-    text: text2,
-    textAlign,
-    textOverflow: textOverflow2 = "ellipsis",
-    textWeight = "medium",
-    tone = "default",
-    type = "button",
-    muted = !1,
-    width,
-    ...rest
-  } = props;
-  let href;
-  return "href" in rest && (href = typeof rest.href == "string" ? rest.href : href, delete rest.href), /* @__PURE__ */ jsxs(
-    Element2,
-    {
-      "data-ui": "Button",
-      ...rest,
-      className: button({
-        className,
-        flex,
-        mode,
-        radius,
-        tone,
-        width
-      }),
-      "data-disabled": loading || disabled ? "" : void 0,
-      "data-selected": selected ? "" : void 0,
-      disabled: !!(loading || disabled),
-      href: disabled ? void 0 : href,
-      type,
-      children: [
-        !!loading && /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: buttonLoadingBox(), display: "flex", flex: 1, justifyContent: "center", width: "fill", children: /* @__PURE__ */ jsx(Spinner, { size: fontSize }) }),
-        (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Box, { alignItems: align, as: "span", display: "flex", flex: 1, gap, gapX, gapY, justifyContent: justify, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children: [
-          IconComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
-            isValidElement(IconComponent) && IconComponent,
-            isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-          ] }),
-          text2 && /* @__PURE__ */ jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }) }),
-          IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
-            isValidElement(IconRightComponent) && IconRightComponent,
-            isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-          ] })
-        ] }),
-        children && /* @__PURE__ */ jsx(Box, { as: "span", flex: 1, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children })
-      ]
-    }
-  );
+    mode,
+    radius,
+    tone,
+    width
+  }), $[36] = className, $[37] = flex, $[38] = mode, $[39] = radius, $[40] = tone, $[41] = width, $[42] = t1) : t1 = $[42];
+  const t2 = loading || disabled ? "" : props["data-disabled"], t3 = selected ? "" : props["data-selected"], t4 = !!(loading || disabled), t5 = disabled ? void 0 : href;
+  let t6;
+  $[43] !== fontSize || $[44] !== loading ? (t6 = !!loading && /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: buttonLoadingBox(), display: "flex", flex: 1, justifyContent: "center", width: "fill", children: /* @__PURE__ */ jsx(Spinner, { size: fontSize }) }), $[43] = fontSize, $[44] = loading, $[45] = t6) : t6 = $[45];
+  let t7;
+  $[46] !== IconComponent || $[47] !== IconRightComponent || $[48] !== align || $[49] !== fontSize || $[50] !== gap || $[51] !== gapX || $[52] !== gapY || $[53] !== justify || $[54] !== muted || $[55] !== padding || $[56] !== paddingBottom || $[57] !== paddingLeft || $[58] !== paddingRight || $[59] !== paddingTop || $[60] !== paddingX || $[61] !== paddingY || $[62] !== text2 || $[63] !== textAlign || $[64] !== textOverflow2 || $[65] !== textWeight ? (t7 = (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Box, { alignItems: align, as: "span", display: "flex", flex: 1, gap, gapX, gapY, justifyContent: justify, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children: [
+    IconComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
+      isValidElement(IconComponent) && IconComponent,
+      isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
+    ] }),
+    text2 && /* @__PURE__ */ jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }) }),
+    IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
+      isValidElement(IconRightComponent) && IconRightComponent,
+      isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
+    ] })
+  ] }), $[46] = IconComponent, $[47] = IconRightComponent, $[48] = align, $[49] = fontSize, $[50] = gap, $[51] = gapX, $[52] = gapY, $[53] = justify, $[54] = muted, $[55] = padding, $[56] = paddingBottom, $[57] = paddingLeft, $[58] = paddingRight, $[59] = paddingTop, $[60] = paddingX, $[61] = paddingY, $[62] = text2, $[63] = textAlign, $[64] = textOverflow2, $[65] = textWeight, $[66] = t7) : t7 = $[66];
+  let t8;
+  $[67] !== children || $[68] !== padding || $[69] !== paddingBottom || $[70] !== paddingLeft || $[71] !== paddingRight || $[72] !== paddingTop || $[73] !== paddingX || $[74] !== paddingY ? (t8 = children && /* @__PURE__ */ jsx(Box, { as: "span", flex: 1, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children }), $[67] = children, $[68] = padding, $[69] = paddingBottom, $[70] = paddingLeft, $[71] = paddingRight, $[72] = paddingTop, $[73] = paddingX, $[74] = paddingY, $[75] = t8) : t8 = $[75];
+  let t9;
+  return $[76] !== Element2 || $[77] !== rest || $[78] !== t1 || $[79] !== t2 || $[80] !== t3 || $[81] !== t4 || $[82] !== t5 || $[83] !== t6 || $[84] !== t7 || $[85] !== t8 || $[86] !== type ? (t9 = /* @__PURE__ */ jsxs(Element2, { "data-ui": "Button", ...rest, className: t1, "data-disabled": t2, "data-selected": t3, disabled: t4, href: t5, type, children: [
+    t6,
+    t7,
+    t8
+  ] }), $[76] = Element2, $[77] = rest, $[78] = t1, $[79] = t2, $[80] = t3, $[81] = t4, $[82] = t5, $[83] = t6, $[84] = t7, $[85] = t8, $[86] = type, $[87] = t9) : t9 = $[87], t9;
 }
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const $ = c(4);
@@ -423,9 +434,9 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
 function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$a : t0);
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$c : t0);
 }
-function _temp$a() {
+function _temp$c() {
   return !1;
 }
 const origin = {
@@ -469,26 +480,19 @@ function getGlobalScope() {
 const globalScope = getGlobalScope();
 function createGlobalScopedContext(key2, defaultValue) {
   const symbol = Symbol.for(key2);
-  if (typeof document > "u")
-    return createContext(defaultValue);
+  if (typeof document > "u") {
+    const context = createContext(defaultValue);
+    return context.displayName = key2, context;
+  }
   const symbolMap = globalScope;
   return symbolMap[symbol] = symbolMap[symbol] || createContext(defaultValue), symbolMap[symbol];
 }
-const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v3/boundaryElement", null), DEFAULT_VALUE = {
-  version: 0,
-  element: null
-};
-function useBoundaryElement() {
-  const value = useContext(BoundaryElementContext);
-  if (value && (!isRecord(value) || value.version !== 0))
-    throw new Error("useBoundaryElement(): the context value is not compatible");
-  return value || DEFAULT_VALUE;
-}
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v4/boundaryElement", null);
 function getElementRef(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
-const CardContext = createGlobalScopedContext("@sanity/ui/v3/card", null);
+const CardContext = createGlobalScopedContext("@sanity/ui/v4/card", null);
 function CardProvider(props) {
   const $ = c(7), {
     children,
@@ -496,22 +500,26 @@ function CardProvider(props) {
     scheme,
     unstable_CompatProvider
   } = props;
-  let t0, t1;
-  $[0] !== scheme || $[1] !== tone || $[2] !== unstable_CompatProvider ? (t1 = {
+  let t0;
+  $[0] !== scheme || $[1] !== tone || $[2] !== unstable_CompatProvider ? (t0 = {
     tone,
     scheme,
     unstable_CompatProvider
-  }, $[0] = scheme, $[1] = tone, $[2] = unstable_CompatProvider, $[3] = t1) : t1 = $[3], t0 = t1;
-  let t2;
-  return $[4] !== children || $[5] !== t0 ? (t2 = /* @__PURE__ */ jsx(CardContext.Provider, { value: t0, children }), $[4] = children, $[5] = t0, $[6] = t2) : t2 = $[6], t2;
+  }, $[0] = scheme, $[1] = tone, $[2] = unstable_CompatProvider, $[3] = t0) : t0 = $[3];
+  let t1;
+  return $[4] !== children || $[5] !== t0 ? (t1 = /* @__PURE__ */ jsx(CardContext, { value: t0, children }), $[4] = children, $[5] = t0, $[6] = t1) : t1 = $[6], t1;
 }
 function useCard() {
-  const card2 = useContext(CardContext);
+  const card2 = use(CardContext);
+  return assertCardContext(card2), card2;
+}
+function assertCardContext(card2) {
   if (!card2)
-    throw new Error("useCard(): missing context value");
-  return card2;
+    throw new Error("useCard(): missing context value", {
+      cause: card2
+    });
 }
-const key = "@sanity/ui/v3/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
+const key = "@sanity/ui/v4/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
 elementMap[elementKey] = null;
 const defaultContextValue = {
   version: 0,
@@ -521,20 +529,24 @@ const defaultContextValue = {
   }
 }, PortalContext = createGlobalScopedContext(key, defaultContextValue);
 function usePortal() {
-  const value = useContext(PortalContext);
+  const value = use(PortalContext);
+  return assertPortalContext(value), value;
+}
+function assertPortalContext(value) {
   if (!value)
     throw new Error("usePortal(): missing context value");
   if (!isRecord(value) || value.version !== 0)
     throw new Error("usePortal(): the context value is not compatible");
-  return value;
 }
 function Portal(props) {
   const $ = c(6), {
     children,
     __unstable_name: name
-  } = props, card2 = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+  } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
   if (!portalElement)
     return null;
+  const card2 = use(CardContext);
+  assertCardContext(card2);
   let t0;
   $[0] !== card2.scheme || $[1] !== children ? (t0 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: card2.scheme, children }), $[0] = card2.scheme, $[1] = children, $[2] = t0) : t0 = $[2];
   let t1;
@@ -549,16 +561,14 @@ function getLayerContext(contextValue) {
     return contextValue;
   throw new Error("could not get layer context");
 }
-const LayerContext = createGlobalScopedContext("@sanity/ui/v3/layer", null);
+const LayerContext = createGlobalScopedContext("@sanity/ui/v4/layer", null);
 function useLayer() {
-  const $ = c(2), value = useContext(LayerContext);
+  const value = use(LayerContext);
   if (!value)
     throw new Error("useLayer(): missing context value");
   try {
-    let t1;
-    return $[0] !== value ? (t1 = getLayerContext(value), $[0] = value, $[1] = t1) : t1 = $[1], t1;
-  } catch (t0) {
-    const err = t0;
+    return getLayerContext(value);
+  } catch (err) {
     throw err instanceof Error ? new Error(`useLayer(): ${err.message}`) : new Error(`useLayer(): ${err}`);
   }
 }
@@ -578,9 +588,11 @@ const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER
 };
 function size(options) {
   const {
-    apply,
     margins,
-    padding = 0
+    padding = 0,
+    constrainSize,
+    matchReferenceWidth,
+    referenceWidthRef
   } = options;
   return {
     name: "@sanity/ui/size",
@@ -602,12 +614,9 @@ function size(options) {
       });
       let maxWidth = 1 / 0, maxHeight = 1 / 0;
       const floatingW = floating.width, floatingH = floating.height;
-      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3]
-      });
+      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom));
+      const availableWidth = maxWidth - margins[1] - margins[3], availableHeight = maxHeight - margins[0] - margins[2], referenceWidth = reference.width - margins[1] - margins[3];
+      referenceWidthRef.current = referenceWidth, matchReferenceWidth && (elements.floating.style.width = `${referenceWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${availableWidth}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
       const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
       return floatingW !== targetW || floatingH !== targetH ? {
         reset: {
@@ -655,7 +664,7 @@ function compileCommands(cmds) {
 }
 const DEFAULT_ARROW_ELEMENT = "div";
 function Arrow(props) {
-  const $ = c(34), t0 = props;
+  const $ = c(39), t0 = props;
   let h, rest, style, t1, t2, w;
   $[0] !== t0 ? ({
     as: t1,
@@ -667,62 +676,65 @@ function Arrow(props) {
   } = t0, $[0] = t0, $[1] = h, $[2] = rest, $[3] = style, $[4] = t1, $[5] = t2, $[6] = w) : (h = $[1], rest = $[2], style = $[3], t1 = $[4], t2 = $[5], w = $[6]);
   const Element2 = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2;
   let t3;
-  const points = [{
-    x: 0,
-    y: 0
-  }, {
-    x: radius,
-    y: 0,
-    radius
-  }, {
-    x: center,
-    y: h - 1,
-    radius
-  }, {
-    x: w - radius,
-    y: 0,
-    radius
-  }, {
-    x: w,
-    y: 0
-  }], cmds = getRoundedCommands(points);
-  t3 = compileCommands(cmds);
+  if ($[7] !== center || $[8] !== h || $[9] !== radius || $[10] !== w) {
+    const points = [{
+      x: 0,
+      y: 0
+    }, {
+      x: radius,
+      y: 0,
+      radius
+    }, {
+      x: center,
+      y: h - 1,
+      radius
+    }, {
+      x: w - radius,
+      y: 0,
+      radius
+    }, {
+      x: w,
+      y: 0
+    }], cmds = getRoundedCommands(points);
+    t3 = compileCommands(cmds), $[7] = center, $[8] = h, $[9] = radius, $[10] = w, $[11] = t3;
+  } else
+    t3 = $[11];
   const path = t3, strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
   let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[7] = t4) : t4 = $[7];
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t4 = _arrow(), $[12] = t4) : t4 = $[12];
   const t5 = `${w}px`;
   let t6;
-  $[8] !== t5 ? (t6 = assignInlineVars({
+  $[13] !== t5 ? (t6 = assignInlineVars({
     [vars.arrow.size]: t5
-  }), $[8] = t5, $[9] = t6) : t6 = $[9];
+  }), $[13] = t5, $[14] = t6) : t6 = $[14];
   let t7;
-  $[10] !== style || $[11] !== t6 ? (t7 = {
+  $[15] !== style || $[16] !== t6 ? (t7 = {
     ...style,
     ...t6
-  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
+  }, $[15] = style, $[16] = t6, $[17] = t7) : t7 = $[17];
   let t8;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
+  $[18] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[18] = t8) : t8 = $[18];
   const t9 = `0 0 ${w} ${w}`;
   let t10;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  $[19] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[19] = t10) : t10 = $[19];
   let t11;
-  $[15] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t11) : t11 = $[16];
+  $[20] !== w ? (t11 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t10, x: 0, width: w, height: w, fill: "white" }) }), $[20] = w, $[21] = t11) : t11 = $[21];
   let t12;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
+  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[22] = t12) : t12 = $[22];
   let t13;
-  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
+  $[23] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[23] = strokePath, $[24] = t13) : t13 = $[24];
   let t14;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[25] = t14) : t14 = $[25];
   let t15;
-  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
+  $[26] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[26] = fillPath, $[27] = t15) : t15 = $[27];
   let t16;
-  $[23] !== t11 || $[24] !== t13 || $[25] !== t15 || $[26] !== t9 || $[27] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
+  $[28] !== t11 || $[29] !== t13 || $[30] !== t15 || $[31] !== t9 || $[32] !== w ? (t16 = /* @__PURE__ */ jsxs("svg", { className: t8, width: w, height: w, viewBox: t9, children: [
     t11,
     t13,
     t15
-  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
+  ] }), $[28] = t11, $[29] = t13, $[30] = t15, $[31] = t9, $[32] = w, $[33] = t16) : t16 = $[33];
   let t17;
-  return $[29] !== Element2 || $[30] !== rest || $[31] !== t16 || $[32] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t4, style: t7, children: t16 }), $[29] = Element2, $[30] = rest, $[31] = t16, $[32] = t7, $[33] = t17) : t17 = $[33], t17;
+  return $[34] !== Element2 || $[35] !== rest || $[36] !== t16 || $[37] !== t7 ? (t17 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t4, style: t7, children: t16 }), $[34] = Element2, $[35] = rest, $[36] = t16, $[37] = t7, $[38] = t17) : t17 = $[38], t17;
 }
 const DEFAULT_FLEX_ELEMENT = "div";
 function Flex(props) {
@@ -742,14 +754,13 @@ function Flex(props) {
 }
 const DEFAULT_CARD_ELEMENT = "div";
 function Card(props) {
-  const $ = c(38), t0 = props;
-  let className, disabled, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
+  const $ = c(37), t0 = props;
+  let className, pressed, rest, schemeProp, selected, style, t1, t2, t3, t4, t5;
   $[0] !== t0 ? ({
     __unstable_checkered: t1,
     __unstable_focusRing: t2,
     as: t3,
     className,
-    disabled,
     pressed,
     radius: t4,
     scheme: schemeProp,
@@ -757,26 +768,26 @@ function Card(props) {
     style,
     tone: t5,
     ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = pressed, $[4] = rest, $[5] = schemeProp, $[6] = selected, $[7] = style, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5) : (className = $[1], disabled = $[2], pressed = $[3], rest = $[4], schemeProp = $[5], selected = $[6], style = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12]);
-  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = useContext(CardContext), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  } = t0, $[0] = t0, $[1] = className, $[2] = pressed, $[3] = rest, $[4] = schemeProp, $[5] = selected, $[6] = style, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5) : (className = $[1], pressed = $[2], rest = $[3], schemeProp = $[4], selected = $[5], style = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11]);
+  const checkered = t1 === void 0 ? !1 : t1, focusRing = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_CARD_ELEMENT : t3, radius = t4 === void 0 ? 0 : t4, toneProp = t5 === void 0 ? "default" : t5, parent = use(CardContext), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
   let t7;
-  $[13] !== className || $[14] !== t6 || $[15] !== tone ? (t7 = card({
+  $[12] !== className || $[13] !== t6 || $[14] !== tone ? (t7 = card({
     className,
     scheme: t6,
     tone
-  }), $[13] = className, $[14] = t6, $[15] = tone, $[16] = t7) : t7 = $[16];
-  const t8 = checkered ? "" : void 0, t9 = disabled ? "" : void 0, t10 = focusRing ? "" : void 0, t11 = pressed ? "" : void 0, t12 = selected ? "" : void 0;
+  }), $[12] = className, $[13] = t6, $[14] = tone, $[15] = t7) : t7 = $[15];
+  const t8 = checkered ? "" : void 0, t9 = props.disabled ? "" : props["data-disabled"], t10 = focusRing ? "" : props["data-focus-ring"], t11 = pressed ? "" : props["data-pressed"], t12 = selected ? "" : props["data-selected"];
   let t13;
-  $[17] !== as || $[18] !== radius || $[19] !== rest || $[20] !== style || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9 ? (t13 = /* @__PURE__ */ jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[17] = as, $[18] = radius, $[19] = rest, $[20] = style, $[21] = t10, $[22] = t11, $[23] = t12, $[24] = t7, $[25] = t8, $[26] = t9, $[27] = t13) : t13 = $[27];
+  $[16] !== as || $[17] !== radius || $[18] !== rest || $[19] !== style || $[20] !== t10 || $[21] !== t11 || $[22] !== t12 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 ? (t13 = /* @__PURE__ */ jsx(Box, { "data-ui": "Card", ...rest, as, className: t7, "data-checkered": t8, "data-disabled": t9, "data-focus-ring": t10, "data-pressed": t11, "data-selected": t12, radius, style }), $[16] = as, $[17] = radius, $[18] = rest, $[19] = style, $[20] = t10, $[21] = t11, $[22] = t12, $[23] = t7, $[24] = t8, $[25] = t9, $[26] = t13) : t13 = $[26];
   let node = t13;
   if (scheme === parent?.scheme && tone === parent?.tone)
     return node;
   const t14 = scheme ?? "light", t15 = tone ?? "default", t16 = parent?.unstable_CompatProvider;
   let t17;
-  if ($[28] !== node || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[28] = node, $[29] = t14, $[30] = t15, $[31] = t16, $[32] = t17) : t17 = $[32], node = t17, parent?.unstable_CompatProvider) {
+  if ($[27] !== node || $[28] !== t14 || $[29] !== t15 || $[30] !== t16 ? (t17 = /* @__PURE__ */ jsx(CardProvider, { scheme: t14, tone: t15, unstable_CompatProvider: t16, children: node }), $[27] = node, $[28] = t14, $[29] = t15, $[30] = t16, $[31] = t17) : t17 = $[31], node = t17, parent?.unstable_CompatProvider) {
     const CompatProvider = parent.unstable_CompatProvider, t18 = scheme ?? "light", t19 = tone ?? parent.tone;
     let t20;
-    return $[33] !== CompatProvider || $[34] !== node || $[35] !== t18 || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[33] = CompatProvider, $[34] = node, $[35] = t18, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
+    return $[32] !== CompatProvider || $[33] !== node || $[34] !== t18 || $[35] !== t19 ? (t20 = /* @__PURE__ */ jsx(CompatProvider, { scheme: t18, tone: t19, children: node }), $[32] = CompatProvider, $[33] = node, $[34] = t18, $[35] = t19, $[36] = t20) : t20 = $[36], t20;
   }
   return node;
 }
@@ -874,24 +885,27 @@ function getServerSnapshot() {
 }
 function useMediaIndex() {
   const $ = c(1);
-  let t0, t1;
-  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = _createMediaStore(), $[0] = t1) : t1 = $[0], t0 = t1;
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = _createMediaStore(), $[0] = t0) : t0 = $[0];
   const store = t0;
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function LayerProvider(props) {
-  const $ = c(19), {
+  const $ = c(21), {
     children,
     zOffset: t0
-  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = useContext(LayerContext);
+  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = use(LayerContext);
   let t1;
   $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
-  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useResponsiveProp(zOffsetProp), maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
+  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1;
   let t2;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
-  const [, setChildLayers] = useState(t2), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  $[2] !== zOffsetProp ? (t2 = _getResponsiveProp(zOffsetProp), $[2] = zOffsetProp, $[3] = t2) : t2 = $[3];
+  const zOffset = t2, maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
   let t3;
-  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[4] = t3) : t3 = $[4];
+  const [, setChildLayers] = useState(t3), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  let t4;
+  $[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -899,35 +913,35 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$9), () => {
+    }) : setSize(_temp$b), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
         };
         return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize(_temp2$2), parentDispose?.();
+      }) : setSize(_temp2$3), parentDispose?.();
     };
-  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
-  const registerChild = t3;
-  let t4, t5;
-  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), useEffect(t4, t5);
-  let t6, t7;
-  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t7 = {
+  }, $[5] = parentRegisterChild, $[6] = setChildLayers, $[7] = t4) : t4 = $[7];
+  const registerChild = t4;
+  let t5, t6;
+  $[8] !== level || $[9] !== parentRegisterChild ? (t5 = () => parentRegisterChild?.(level), t6 = [level, parentRegisterChild], $[8] = level, $[9] = parentRegisterChild, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), useEffect(t5, t6);
+  let t7;
+  $[12] !== isTopLayer || $[13] !== level || $[14] !== registerChild || $[15] !== size2 || $[16] !== zIndex ? (t7 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
-  const value = t6;
+  }, $[12] = isTopLayer, $[13] = level, $[14] = registerChild, $[15] = size2, $[16] = zIndex, $[17] = t7) : t7 = $[17];
+  const value = t7;
   let t8;
-  return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
+  return $[18] !== children || $[19] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext, { value, children }), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
 }
-function _temp2$2(v_0) {
+function _temp2$3(v_0) {
   return v_0 - 1;
 }
-function _temp$9(v) {
+function _temp$b(v) {
   return v + 1;
 }
 const DEFAULT_LAYER_ELEMENT = "div";
@@ -973,52 +987,45 @@ function PopoverLayer(props) {
     y: yProp,
     ...rest
   } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = marginsProp, $[8] = maxWidth, $[9] = originX, $[10] = originY, $[11] = overflow, $[12] = padding, $[13] = placement, $[14] = radius, $[15] = referenceWidth, $[16] = rest, $[17] = shadow, $[18] = strategy, $[19] = style, $[20] = t0, $[21] = xProp, $[22] = yProp) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], marginsProp = $[7], maxWidth = $[8], originX = $[9], originY = $[10], overflow = $[11], padding = $[12], placement = $[13], radius = $[14], referenceWidth = $[15], rest = $[16], shadow = $[17], strategy = $[18], style = $[19], t0 = $[20], xProp = $[21], yProp = $[22]);
-  const tone = t0 === void 0 ? "inherit" : t0;
-  let t1;
-  t1 = marginsProp || DEFAULT_POPOVER_MARGINS;
-  const margins = t1, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0];
+  const tone = t0 === void 0 ? "inherit" : t0, margins = marginsProp || DEFAULT_POPOVER_MARGINS, x = (xProp ?? 0) + margins[3], y = (yProp ?? 0) + margins[0], t1 = animate ? "transform" : void 0;
   let t2;
-  const t3 = animate ? "transform" : void 0;
-  let t4;
-  $[23] !== originX || $[24] !== originY || $[25] !== referenceWidth || $[26] !== style || $[27] !== t3 || $[28] !== x || $[29] !== y ? (t4 = {
+  $[23] !== originX || $[24] !== originY || $[25] !== referenceWidth || $[26] !== style || $[27] !== t1 || $[28] !== x || $[29] !== y ? (t2 = {
     left: x,
     originX,
     originY,
     top: y,
     width: referenceWidth,
-    willChange: t3,
+    willChange: t1,
     ...style
-  }, $[23] = originX, $[24] = originY, $[25] = referenceWidth, $[26] = style, $[27] = t3, $[28] = x, $[29] = y, $[30] = t4) : t4 = $[30], t2 = t4;
-  const rootStyle = t2;
+  }, $[23] = originX, $[24] = originY, $[25] = referenceWidth, $[26] = style, $[27] = t1, $[28] = x, $[29] = y, $[30] = t2) : t2 = $[30];
+  const rootStyle = t2, t3 = arrowX !== null ? arrowX : void 0, t4 = arrowY !== null ? arrowY : void 0;
   let t5;
-  const t6 = arrowX !== null ? arrowX : void 0, t7 = arrowY !== null ? arrowY : void 0;
-  let t8;
-  $[31] !== t6 || $[32] !== t7 ? (t8 = {
-    left: t6,
-    top: t7,
+  $[31] !== t3 || $[32] !== t4 ? (t5 = {
+    left: t3,
+    top: t4,
     right: void 0,
     bottom: void 0
-  }, $[31] = t6, $[32] = t7, $[33] = t8) : t8 = $[33], t5 = t8;
+  }, $[31] = t3, $[32] = t4, $[33] = t5) : t5 = $[33];
   const arrowStyle = t5;
+  let t6;
+  $[34] === Symbol.for("react.memo_cache_sentinel") ? (t6 = popoverCard(), $[34] = t6) : t6 = $[34];
+  let t7;
+  $[35] !== animate ? (t7 = animate ? ["hidden", "initial"] : void 0, $[35] = animate, $[36] = t7) : t7 = $[36];
+  let t8;
+  $[37] !== animate ? (t8 = animate ? ["visible", "scaleIn"] : void 0, $[37] = animate, $[38] = t8) : t8 = $[38];
   let t9;
-  $[34] === Symbol.for("react.memo_cache_sentinel") ? (t9 = popoverCard(), $[34] = t9) : t9 = $[34];
+  $[39] !== animate ? (t9 = animate ? ["hidden", "scaleOut"] : void 0, $[39] = animate, $[40] = t9) : t9 = $[40];
   let t10;
-  $[35] !== animate ? (t10 = animate ? ["hidden", "initial"] : void 0, $[35] = animate, $[36] = t10) : t10 = $[36];
+  $[41] !== children || $[42] !== padding ? (t10 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[41] = children, $[42] = padding, $[43] = t10) : t10 = $[43];
   let t11;
-  $[37] !== animate ? (t11 = animate ? ["visible", "scaleIn"] : void 0, $[37] = animate, $[38] = t11) : t11 = $[38];
+  $[44] !== maxWidth || $[45] !== overflow || $[46] !== t10 ? (t11 = /* @__PURE__ */ jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t10 }), $[44] = maxWidth, $[45] = overflow, $[46] = t10, $[47] = t11) : t11 = $[47];
   let t12;
-  $[39] !== animate ? (t12 = animate ? ["hidden", "scaleOut"] : void 0, $[39] = animate, $[40] = t12) : t12 = $[40];
+  $[48] !== arrow2 || $[49] !== arrowRef || $[50] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[48] = arrow2, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t12) : t12 = $[51];
   let t13;
-  $[41] !== children || $[42] !== padding ? (t13 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[41] = children, $[42] = padding, $[43] = t13) : t13 = $[43];
-  let t14;
-  $[44] !== maxWidth || $[45] !== overflow || $[46] !== t13 ? (t14 = /* @__PURE__ */ jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, maxWidth, overflow, children: t13 }), $[44] = maxWidth, $[45] = overflow, $[46] = t13, $[47] = t14) : t14 = $[47];
-  let t15;
-  $[48] !== arrow2 || $[49] !== arrowRef || $[50] !== arrowStyle ? (t15 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[48] = arrow2, $[49] = arrowRef, $[50] = arrowStyle, $[51] = t15) : t15 = $[51];
-  let t16;
-  return $[52] !== placement || $[53] !== radius || $[54] !== rest || $[55] !== rootStyle || $[56] !== shadow || $[57] !== strategy || $[58] !== t10 || $[59] !== t11 || $[60] !== t12 || $[61] !== t14 || $[62] !== t15 || $[63] !== tone ? (t16 = /* @__PURE__ */ jsxs(Layer, { className: t9, "data-ui": "Popover", ...rest, as: motion.div, "data-context-tone": tone, "data-placement": placement, flexDirection: "column", display: "flex", position: strategy, radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t10, animate: t11, exit: t12, children: [
-    t14,
-    t15
-  ] }), $[52] = placement, $[53] = radius, $[54] = rest, $[55] = rootStyle, $[56] = shadow, $[57] = strategy, $[58] = t10, $[59] = t11, $[60] = t12, $[61] = t14, $[62] = t15, $[63] = tone, $[64] = t16) : t16 = $[64], t16;
+  return $[52] !== placement || $[53] !== radius || $[54] !== rest || $[55] !== rootStyle || $[56] !== shadow || $[57] !== strategy || $[58] !== t11 || $[59] !== t12 || $[60] !== t7 || $[61] !== t8 || $[62] !== t9 || $[63] !== tone ? (t13 = /* @__PURE__ */ jsxs(Layer, { className: t6, "data-ui": "Popover", ...rest, as: motion.div, "data-context-tone": tone, "data-placement": placement, flexDirection: "column", display: "flex", position: strategy, radius, shadow, sizing: "border", style: rootStyle, tone, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t7, animate: t8, exit: t9, children: [
+    t11,
+    t12
+  ] }), $[52] = placement, $[53] = radius, $[54] = rest, $[55] = rootStyle, $[56] = shadow, $[57] = strategy, $[58] = t11, $[59] = t12, $[60] = t7, $[61] = t8, $[62] = t9, $[63] = tone, $[64] = t13) : t13 = $[64], t13;
 }
 const DEFAULT_POPOVER_ELEMENT = "div";
 function ViewportOverlay() {
@@ -1035,78 +1042,83 @@ function ViewportOverlay() {
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }
 function Popover(props) {
-  const boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    as = DEFAULT_POPOVER_ELEMENT,
-    children: childProp,
-    className,
-    constrainSize = !1,
-    content: content2,
-    disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
+  const $ = c(113), t0 = props;
+  let _fallbackPlacements, _floatingBoundary, _referenceBoundary, childProp, className, content2, disabled, forwardedRef, matchReferenceWidth, modal, open, padding, portal, referenceElement, rest, scheme, t1, t10, t11, t12, t13, t14, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+  if ($[0] !== t0) {
+    const {
+      __unstable_margins: t152,
+      animate: t162,
+      arrow: t172,
+      as: t182,
+      children: t192,
+      className: t202,
+      constrainSize: t212,
+      content: t222,
+      disabled: t232,
+      fallbackPlacements: t242,
+      matchReferenceWidth: t252,
+      floatingBoundary: t262,
+      modal: t272,
+      onActivate,
+      open: t282,
+      overflow: t292,
+      padding: t302,
+      placement: t312,
+      placementStrategy: t32,
+      portal: t33,
+      preventOverflow: t34,
+      radius: t35,
+      ref: t36,
+      referenceBoundary: t37,
+      referenceElement: t38,
+      scheme: t39,
+      shadow: t40,
+      tone: t41,
+      width: t42,
+      zOffset: t43,
+      updateRef: t44,
+      ...t45
+    } = t0;
+    t1 = t152, t2 = t162, t3 = t172, t4 = t182, childProp = t192, className = t202, t5 = t212, content2 = t222, disabled = t232, _fallbackPlacements = t242, matchReferenceWidth = t252, _floatingBoundary = t262, modal = t272, open = t282, t6 = t292, padding = t302, t7 = t312, t8 = t32, portal = t33, t9 = t34, t10 = t35, forwardedRef = t36, _referenceBoundary = t37, referenceElement = t38, scheme = t39, t11 = t40, t12 = t41, t13 = t42, t14 = t43, updateRef = t44, rest = t45, $[0] = t0, $[1] = _fallbackPlacements, $[2] = _floatingBoundary, $[3] = _referenceBoundary, $[4] = childProp, $[5] = className, $[6] = content2, $[7] = disabled, $[8] = forwardedRef, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = padding, $[13] = portal, $[14] = referenceElement, $[15] = rest, $[16] = scheme, $[17] = t1, $[18] = t10, $[19] = t11, $[20] = t12, $[21] = t13, $[22] = t14, $[23] = t2, $[24] = t3, $[25] = t4, $[26] = t5, $[27] = t6, $[28] = t7, $[29] = t8, $[30] = t9, $[31] = updateRef;
+  } else
+    _fallbackPlacements = $[1], _floatingBoundary = $[2], _referenceBoundary = $[3], childProp = $[4], className = $[5], content2 = $[6], disabled = $[7], forwardedRef = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], padding = $[12], portal = $[13], referenceElement = $[14], rest = $[15], scheme = $[16], t1 = $[17], t10 = $[18], t11 = $[19], t12 = $[20], t13 = $[21], t14 = $[22], t2 = $[23], t3 = $[24], t4 = $[25], t5 = $[26], t6 = $[27], t7 = $[28], t8 = $[29], t9 = $[30], updateRef = $[31];
+  const margins = t1 === void 0 ? DEFAULT_POPOVER_MARGINS : t1, _animate = t2 === void 0 ? !1 : t2, arrowProp = t3 === void 0 ? !1 : t3, as = t4 === void 0 ? DEFAULT_POPOVER_ELEMENT : t4, constrainSize = t5 === void 0 ? !1 : t5, overflow = t6 === void 0 ? "hidden" : t6, placementProp = t7 === void 0 ? "bottom" : t7, placementStrategy = t8 === void 0 ? "flip" : t8, preventOverflow = t9 === void 0 ? !0 : t9, radius = t10 === void 0 ? 3 : t10, shadow = t11 === void 0 ? 3 : t11, tone = t12 === void 0 ? "inherit" : t12, widthProp = t13 === void 0 ? "auto" : t13, zOffsetProp = t14 === void 0 ? Z_OFFSETS.popover : t14, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? use(BoundaryElementContext), referenceBoundary = _referenceBoundary ?? use(BoundaryElementContext), animate = usePrefersReducedMotion() ? !1 : _animate;
+  let t15;
+  $[32] !== zOffsetProp ? (t15 = _getResponsiveProp(zOffsetProp), $[32] = zOffsetProp, $[33] = t15) : t15 = $[33];
+  const zOffset = t15, ref = useRef(null), arrowRef = useRef(null);
+  let t16;
+  $[34] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[34] = t16) : t16 = $[34], useImperativeHandle(forwardedRef, t16);
+  const referenceWidthRef = useRef(void 0);
+  let t17;
+  $[35] !== animate || $[36] !== arrowProp || $[37] !== constrainSize || $[38] !== fallbackPlacements || $[39] !== floatingBoundary || $[40] !== margins || $[41] !== matchReferenceWidth || $[42] !== placementProp || $[43] !== placementStrategy || $[44] !== preventOverflow || $[45] !== referenceBoundary ? (t17 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
     matchReferenceWidth,
-    floatingBoundary = boundaryElementContext.element,
-    modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onActivate,
-    open,
-    overflow = "hidden",
-    padding,
-    placement: placementProp = "bottom",
-    placementStrategy = "flip",
-    portal,
-    preventOverflow = !0,
-    radius = 3,
-    ref: forwardedRef,
-    referenceBoundary = boundaryElementContext.element,
-    referenceElement,
-    scheme,
-    shadow = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: zOffsetProp = Z_OFFSETS.popover,
-    updateRef,
-    ...rest
-  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, zOffset = useResponsiveProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const referenceWidthRef = useRef(void 0), middleware = useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(autoPlacement({
-      allowedPlacements: [placementProp].concat(fallbackPlacements)
-    })) : ret.push(flip({
-      boundary: floatingBoundary || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_POPOVER_PADDING,
-      rootBoundary
-    }))), ret.push(offset({
-      mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
-        availableWidth,
-        availableHeight,
-        elements,
-        referenceWidth
-      }) {
-        referenceWidthRef.current = referenceWidth, matchReferenceWidth && (elements.floating.style.width = `${referenceWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${availableWidth}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      margins,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, placementProp, placementStrategy, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary: "viewport"
+  }, $[35] = animate, $[36] = arrowProp, $[37] = constrainSize, $[38] = fallbackPlacements, $[39] = floatingBoundary, $[40] = margins, $[41] = matchReferenceWidth, $[42] = placementProp, $[43] = placementStrategy, $[44] = preventOverflow, $[45] = referenceBoundary, $[46] = t17) : t17 = $[46];
+  const middleware = useMiddleware$1(t17);
+  let t18;
+  $[47] !== referenceElement ? (t18 = referenceElement ? {
+    reference: referenceElement
+  } : void 0, $[47] = referenceElement, $[48] = t18) : t18 = $[48];
+  let t19;
+  $[49] !== middleware || $[50] !== placementProp || $[51] !== t18 ? (t19 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: t18
+  }, $[49] = middleware, $[50] = placementProp, $[51] = t18, $[52] = t19) : t19 = $[52];
+  const {
     x,
     y,
     middlewareData,
@@ -1114,38 +1126,149 @@ function Popover(props) {
     refs,
     strategy,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-    elements: referenceElement ? {
-      reference: referenceElement
-    } : void 0
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = useCallback((arrowEl) => {
-    arrowRef.current = arrowEl;
-  }, []), setFloating = useCallback((node) => {
+  } = useFloating(t19), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
+  let t20;
+  $[53] !== refs ? (t20 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = useCallback((node_0) => {
-    if (refs.setReference(node_0), !childProp) return;
-    const childRef = getElementRef(childProp);
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = useMemo(() => referenceElement ? childProp : childProp ? cloneElement(childProp, {
-    ref: setReference
-  }) : null, [childProp, referenceElement, setReference]);
-  if (useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), disabled)
-    return childProp || /* @__PURE__ */ jsx(Fragment, {});
-  const node_1 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    modal && /* @__PURE__ */ jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: popover({
-      className
-    }), hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, tone, strategy, x, y, zOffset, children: content2 })
-  ] }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+  }, $[53] = refs, $[54] = t20) : t20 = $[54];
+  const setFloating = t20;
+  let t21;
+  $[55] !== childProp ? (t21 = childProp ? getElementRef(childProp) : null, $[55] = childProp, $[56] = t21) : t21 = $[56];
+  let t22;
+  $[57] !== refs.reference.current ? (t22 = () => refs.reference.current, $[57] = refs.reference.current, $[58] = t22) : t22 = $[58], useImperativeHandle(t21, t22);
+  let t23;
+  bb0: {
+    if (referenceElement) {
+      t23 = childProp;
+      break bb0;
+    }
+    if (!childProp) {
+      t23 = null;
+      break bb0;
+    }
+    let t242;
+    $[59] !== childProp || $[60] !== refs.setReference ? (t242 = cloneElement(childProp, {
+      ref: refs.setReference
+    }), $[59] = childProp, $[60] = refs.setReference, $[61] = t242) : t242 = $[61], t23 = t242;
+  }
+  const child = t23;
+  let t24, t25;
+  if ($[62] !== update ? (t24 = () => update, t25 = [update], $[62] = update, $[63] = t24, $[64] = t25) : (t24 = $[63], t25 = $[64]), useImperativeHandle(updateRef, t24, t25), disabled) {
+    let t262;
+    return $[65] !== childProp ? (t262 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[65] = childProp, $[66] = t262) : t262 = $[66], t262;
+  }
+  let t26;
+  $[67] !== modal ? (t26 = modal && /* @__PURE__ */ jsx(ViewportOverlay, {}), $[67] = modal, $[68] = t26) : t26 = $[68];
+  let t27;
+  $[69] !== className ? (t27 = popover({
+    className
+  }), $[69] = className, $[70] = t27) : t27 = $[70];
+  let t28;
+  $[71] !== animate || $[72] !== arrowProp || $[73] !== arrowX || $[74] !== arrowY || $[75] !== as || $[76] !== content2 || $[77] !== margins || $[78] !== originX || $[79] !== originY || $[80] !== overflow || $[81] !== padding || $[82] !== placement || $[83] !== radius || $[84] !== referenceHidden || $[85] !== rest || $[86] !== scheme || $[87] !== setFloating || $[88] !== shadow || $[89] !== strategy || $[90] !== t27 || $[91] !== tone || $[92] !== widthProp || $[93] !== x || $[94] !== y || $[95] !== zOffset ? (t28 = /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef, arrowX, arrowY, as, className: t27, hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, tone, strategy, x, y, zOffset, children: content2 }), $[71] = animate, $[72] = arrowProp, $[73] = arrowX, $[74] = arrowY, $[75] = as, $[76] = content2, $[77] = margins, $[78] = originX, $[79] = originY, $[80] = overflow, $[81] = padding, $[82] = placement, $[83] = radius, $[84] = referenceHidden, $[85] = rest, $[86] = scheme, $[87] = setFloating, $[88] = shadow, $[89] = strategy, $[90] = t27, $[91] = tone, $[92] = widthProp, $[93] = x, $[94] = y, $[95] = zOffset, $[96] = t28) : t28 = $[96];
+  let t29;
+  $[97] !== t26 || $[98] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t26,
+    t28
+  ] }), $[97] = t26, $[98] = t28, $[99] = t29) : t29 = $[99];
+  const node_0 = t29;
+  let children = open ? node_0 : null;
+  if (open && portal) {
+    let resolvedTone = tone;
+    if (tone === "inherit") {
+      const card2 = use(CardContext);
+      assertCardContext(card2), resolvedTone = card2.tone;
+    }
+    const t302 = typeof portal == "string" ? portal : void 0, t312 = scheme ?? "light";
+    let t32;
+    $[100] !== node_0 || $[101] !== resolvedTone || $[102] !== t312 ? (t32 = /* @__PURE__ */ jsx(CardProvider, { tone: resolvedTone, scheme: t312, children: node_0 }), $[100] = node_0, $[101] = resolvedTone, $[102] = t312, $[103] = t32) : t32 = $[103];
+    let t33;
+    $[104] !== t302 || $[105] !== t32 ? (t33 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t302, children: t32 }), $[104] = t302, $[105] = t32, $[106] = t33) : t33 = $[106], children = t33;
+  }
+  let t30;
+  $[107] !== animate || $[108] !== children ? (t30 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[107] = animate, $[108] = children, $[109] = t30) : t30 = $[109];
+  let t31;
+  return $[110] !== child || $[111] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t30,
     child
-  ] });
+  ] }), $[110] = child, $[111] = t30, $[112] = t31) : t31 = $[112], t31;
+}
+function useMiddleware$1(t0) {
+  const $ = c(36), {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== placementProp || $[9] !== placementStrategy || $[10] !== preventOverflow || $[11] !== referenceBoundary || $[12] !== referenceWidthRef || $[13] !== rootBoundary) {
+    if (ret = [], constrainSize || preventOverflow)
+      if (placementStrategy === "autoPlacement") {
+        let t12;
+        $[15] !== fallbackPlacements || $[16] !== placementProp ? (t12 = autoPlacement({
+          allowedPlacements: [placementProp].concat(fallbackPlacements)
+        }), $[15] = fallbackPlacements, $[16] = placementProp, $[17] = t12) : t12 = $[17], ret.push(t12);
+      } else {
+        const t12 = floatingBoundary || void 0;
+        let t22;
+        $[18] !== fallbackPlacements || $[19] !== rootBoundary || $[20] !== t12 ? (t22 = flip({
+          boundary: t12,
+          fallbackPlacements,
+          padding: DEFAULT_POPOVER_PADDING,
+          rootBoundary
+        }), $[18] = fallbackPlacements, $[19] = rootBoundary, $[20] = t12, $[21] = t22) : t22 = $[21], ret.push(t22);
+      }
+    let t1;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel") ? (t1 = offset({
+      mainAxis: DEFAULT_POPOVER_DISTANCE
+    }), $[22] = t1) : t1 = $[22], ret.push(t1), constrainSize || matchReferenceWidth) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[23] !== constrainSize || $[24] !== margins || $[25] !== matchReferenceWidth || $[26] !== referenceWidthRef || $[27] !== t22 ? (t32 = size({
+        boundaryElement: t22,
+        constrainSize,
+        margins,
+        matchReferenceWidth,
+        padding: DEFAULT_POPOVER_PADDING,
+        referenceWidthRef
+      }), $[23] = constrainSize, $[24] = margins, $[25] = matchReferenceWidth, $[26] = referenceWidthRef, $[27] = t22, $[28] = t32) : t32 = $[28], ret.push(t32);
+    }
+    if (preventOverflow) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[29] !== rootBoundary || $[30] !== t22 ? (t32 = shift({
+        boundary: t22,
+        rootBoundary,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[29] = rootBoundary, $[30] = t22, $[31] = t32) : t32 = $[31], ret.push(t32);
+    }
+    if (arrowProp) {
+      let t22;
+      $[32] !== arrowRef ? (t22 = arrow({
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[32] = arrowRef, $[33] = t22) : t22 = $[33], ret.push(t22);
+    }
+    animate && ret.push(origin);
+    const t2 = referenceBoundary || void 0;
+    let t3;
+    $[34] !== t2 ? (t3 = hide({
+      boundary: t2,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    }), $[34] = t2, $[35] = t3) : t3 = $[35], ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = placementProp, $[9] = placementStrategy, $[10] = preventOverflow, $[11] = referenceBoundary, $[12] = referenceWidthRef, $[13] = rootBoundary, $[14] = ret;
+  } else
+    ret = $[14];
+  return ret;
 }
 const DEFAULT_SELECTABLE_ELEMENT = "button";
 function Selectable(props) {
@@ -1166,7 +1289,7 @@ function Selectable(props) {
     radius,
     tone
   }), $[7] = className, $[8] = radius, $[9] = tone, $[10] = t2) : t2 = $[10];
-  const t3 = selected ? "" : void 0;
+  const t3 = selected ? "" : props["data-selected"];
   let t4;
   return $[11] !== as || $[12] !== rest || $[13] !== t2 || $[14] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { ...rest, as, className: t2, "data-selected": t3 }), $[11] = as, $[12] = rest, $[13] = t2, $[14] = t3, $[15] = t4) : t4 = $[15], t4;
 }
@@ -1189,18 +1312,16 @@ function Stack(props) {
   return $[7] !== as || $[8] !== gap || $[9] !== rest || $[10] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { "data-ui": "Stack", ...rest, as, gridAutoRows: "min", className: t2, display: "grid", gap }), $[7] = as, $[8] = gap, $[9] = rest, $[10] = t2, $[11] = t3) : t3 = $[11], t3;
 }
 function useCustomValidity(ref, customValidity) {
-  const $ = c(6);
-  let t0;
-  $[0] !== customValidity || $[1] !== ref.current ? (t0 = () => {
+  const $ = c(4);
+  let t0, t1;
+  $[0] !== customValidity || $[1] !== ref ? (t0 = () => {
     ref.current?.setCustomValidity(customValidity || "");
-  }, $[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], useEffect(t0, t1);
+  }, t1 = [customValidity, ref], $[0] = customValidity, $[1] = ref, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1);
 }
 const DEFAULT_TEXT_INPUT_ELEMENT = "input";
 function TextInput(props) {
-  const $ = c(88), t0 = props;
-  let IconComponent, IconRightComponent, __unstable_disableFocusRing, className, clearButton, customValidity, forwardedRef, onClear, prefix, readOnly, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, width;
+  const $ = c(86), t0 = props;
+  let IconComponent, IconRightComponent, __unstable_disableFocusRing, className, clearButton, customValidity, flex, forwardedRef, onClear, prefix, readOnly, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, width;
   if ($[0] !== t0) {
     const {
       __unstable_disableFocusRing: t92,
@@ -1209,111 +1330,129 @@ function TextInput(props) {
       className: t122,
       clearButton: t132,
       disabled: t142,
-      fontSize: t152,
-      gap: t162,
-      icon: t172,
-      iconRight: t182,
-      onClear: t192,
-      padding: t202,
-      prefix: t212,
-      radius: t222,
-      readOnly: t232,
-      ref: t242,
-      suffix: t252,
-      customValidity: t262,
-      type: t272,
+      flex: t152,
+      fontSize: t162,
+      gap: t172,
+      icon: t182,
+      iconRight: t192,
+      onClear: t202,
+      padding: t212,
+      prefix: t222,
+      radius: t232,
+      readOnly: t242,
+      ref: t252,
+      suffix: t262,
+      customValidity: t272,
+      type: t282,
       weight: _width,
-      width: t282,
-      ...t292
+      width: t292,
+      ...t302
     } = t0;
-    __unstable_disableFocusRing = t92, t1 = t102, t2 = t112, className = t122, clearButton = t132, t3 = t142, t4 = t152, t5 = t162, IconComponent = t172, IconRightComponent = t182, onClear = t192, t6 = t202, prefix = t212, t7 = t222, readOnly = t232, forwardedRef = t242, suffix = t252, customValidity = t262, t8 = t272, width = t282, rest = t292, $[0] = t0, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = className, $[5] = clearButton, $[6] = customValidity, $[7] = forwardedRef, $[8] = onClear, $[9] = prefix, $[10] = readOnly, $[11] = rest, $[12] = suffix, $[13] = t1, $[14] = t2, $[15] = t3, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7, $[20] = t8, $[21] = width;
+    __unstable_disableFocusRing = t92, t1 = t102, t2 = t112, className = t122, clearButton = t132, t3 = t142, flex = t152, t4 = t162, t5 = t172, IconComponent = t182, IconRightComponent = t192, onClear = t202, t6 = t212, prefix = t222, t7 = t232, readOnly = t242, forwardedRef = t252, suffix = t262, customValidity = t272, t8 = t282, width = t292, rest = t302, $[0] = t0, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = className, $[5] = clearButton, $[6] = customValidity, $[7] = flex, $[8] = forwardedRef, $[9] = onClear, $[10] = prefix, $[11] = readOnly, $[12] = rest, $[13] = suffix, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7, $[21] = t8, $[22] = width;
   } else
-    IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], className = $[4], clearButton = $[5], customValidity = $[6], forwardedRef = $[7], onClear = $[8], prefix = $[9], readOnly = $[10], rest = $[11], suffix = $[12], t1 = $[13], t2 = $[14], t3 = $[15], t4 = $[16], t5 = $[17], t6 = $[18], t7 = $[19], t8 = $[20], width = $[21];
-  const Element2 = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
+    IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], className = $[4], clearButton = $[5], customValidity = $[6], flex = $[7], forwardedRef = $[8], onClear = $[9], prefix = $[10], readOnly = $[11], rest = $[12], suffix = $[13], t1 = $[14], t2 = $[15], t3 = $[16], t4 = $[17], t5 = $[18], t6 = $[19], t7 = $[20], t8 = $[21], width = $[22];
+  const Element2 = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null);
   let t9;
-  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[22] = t9) : t9 = $[22], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$8;
+  $[23] !== padding ? (t9 = _getResponsiveProp(padding), $[23] = padding, $[24] = t9) : t9 = $[24];
+  const responsivePadding = t9, withClearButton = !!clearButton;
   let t10;
-  $[23] !== onClear ? (t10 = (event_0) => {
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => ref.current, $[25] = t10) : t10 = $[25], useImperativeHandle(forwardedRef, t10), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$a;
+  let t11;
+  $[26] !== onClear ? (t11 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
-  }, $[23] = onClear, $[24] = t10) : t10 = $[24];
-  const handleClearClick = t10;
-  let t11, t12;
-  $[25] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$1)), $[25] = responsivePadding, $[26] = t12) : t12 = $[26], t11 = t12;
-  const clearButtonBoxPadding = t11;
-  let t13, t14;
-  $[27] !== responsivePadding ? (t14 = Object.fromEntries(Object.entries(responsivePadding).map(_temp3)), $[27] = responsivePadding, $[28] = t14) : t14 = $[28], t13 = t14;
-  const clearButtonPadding = t13;
-  let t15;
-  t15 = isRecord(clearButton) ? clearButton : EMPTY_RECORD;
-  const clearButtonProps = t15;
-  let t16;
-  $[29] !== border || $[30] !== className || $[31] !== fontSize || $[32] !== gap || $[33] !== padding || $[34] !== radius || $[35] !== width ? (t16 = textInput({
+  }, $[26] = onClear, $[27] = t11) : t11 = $[27];
+  const handleClearClick = t11;
+  let t12;
+  $[28] !== border || $[29] !== className || $[30] !== flex || $[31] !== fontSize || $[32] !== gap || $[33] !== padding || $[34] !== radius || $[35] !== width ? (t12 = textInput({
     className,
     border,
+    flex,
     fontSize,
     padding,
     radius,
     gap,
     width
-  }), $[29] = border, $[30] = className, $[31] = fontSize, $[32] = gap, $[33] = padding, $[34] = radius, $[35] = width, $[36] = t16) : t16 = $[36];
-  const t17 = IconComponent ? "" : void 0, t18 = IconRightComponent ? "" : void 0, t19 = customValidity ? "" : void 0, t20 = prefix ? "" : void 0, t21 = !disabled && readOnly ? "" : void 0, t22 = suffix ? "" : void 0;
+  }), $[28] = border, $[29] = className, $[30] = flex, $[31] = fontSize, $[32] = gap, $[33] = padding, $[34] = radius, $[35] = width, $[36] = t12) : t12 = $[36];
+  const t13 = IconComponent ? "" : void 0, t14 = IconRightComponent ? "" : void 0, t15 = customValidity ? "" : void 0, t16 = prefix ? "" : void 0, t17 = !disabled && readOnly ? "" : void 0, t18 = suffix ? "" : void 0;
+  let t19;
+  $[37] !== prefix ? (t19 = prefix && /* @__PURE__ */ jsx("span", { className: textInputPrefix(), children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[37] = prefix, $[38] = t19) : t19 = $[38];
+  let t20;
+  $[39] === Symbol.for("react.memo_cache_sentinel") ? (t20 = textInputElement(), $[39] = t20) : t20 = $[39];
+  let t21;
+  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t21 = _inputElement(), $[40] = t21) : t21 = $[40];
+  const t22 = __unstable_disableFocusRing ? "" : void 0;
   let t23;
-  $[37] !== prefix ? (t23 = prefix && /* @__PURE__ */ jsx(Box, { className: textInputPrefix(), sizing: "border", children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[37] = prefix, $[38] = t23) : t23 = $[38];
+  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== t22 || $[46] !== type ? (t23 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t21, "data-no-focus-ring": t22, disabled, readOnly, ref, type }), $[41] = Element2, $[42] = disabled, $[43] = readOnly, $[44] = rest, $[45] = t22, $[46] = type, $[47] = t23) : t23 = $[47];
   let t24;
-  $[39] === Symbol.for("react.memo_cache_sentinel") ? (t24 = textInputElement(), $[39] = t24) : t24 = $[39];
+  $[48] === Symbol.for("react.memo_cache_sentinel") ? (t24 = _inputPresentation(), $[48] = t24) : t24 = $[48];
   let t25;
-  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t25 = _inputElement(), $[40] = t25) : t25 = $[40];
-  const t26 = __unstable_disableFocusRing ? "" : void 0;
-  let t27;
-  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== t26 || $[46] !== type ? (t27 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t25, "data-no-focus-ring": t26, disabled, readOnly, ref, type }), $[41] = Element2, $[42] = disabled, $[43] = readOnly, $[44] = rest, $[45] = t26, $[46] = type, $[47] = t27) : t27 = $[47];
-  let t28;
-  $[48] === Symbol.for("react.memo_cache_sentinel") ? (t28 = _inputPresentation(), $[48] = t28) : t28 = $[48];
-  let t29;
-  $[49] !== IconComponent || $[50] !== fontSize || $[51] !== padding ? (t29 = IconComponent && /* @__PURE__ */ jsx(Box, { padding, position: "absolute", insetTop: 0, insetLeft: 0, children: /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
+  $[49] !== IconComponent || $[50] !== fontSize || $[51] !== padding ? (t25 = IconComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetLeft: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }) }), $[49] = IconComponent, $[50] = fontSize, $[51] = padding, $[52] = t29) : t29 = $[52];
-  let t30;
-  $[53] !== IconRightComponent || $[54] !== fontSize || $[55] !== padding || $[56] !== withClearButton ? (t30 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, { padding, position: "absolute", insetTop: 0, insetRight: 0, children: /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
+  ] }) }), $[49] = IconComponent, $[50] = fontSize, $[51] = padding, $[52] = t25) : t25 = $[52];
+  let t26;
+  $[53] !== IconRightComponent || $[54] !== fontSize || $[55] !== padding || $[56] !== withClearButton ? (t26 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetRight: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
     isValidElement(IconRightComponent) && IconRightComponent,
     isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[53] = IconRightComponent, $[54] = fontSize, $[55] = padding, $[56] = withClearButton, $[57] = t30) : t30 = $[57];
+  ] }) }), $[53] = IconRightComponent, $[54] = fontSize, $[55] = padding, $[56] = withClearButton, $[57] = t26) : t26 = $[57];
+  let t27;
+  $[58] !== t25 || $[59] !== t26 ? (t27 = /* @__PURE__ */ jsxs("span", { className: t24, children: [
+    t25,
+    t26
+  ] }), $[58] = t25, $[59] = t26, $[60] = t27) : t27 = $[60];
+  let t28;
+  $[61] !== clearButton || $[62] !== disabled || $[63] !== fontSize || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly || $[67] !== responsivePadding ? (t28 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(ClearButton, { fontSize, radius, clearButtonProps: isRecord(clearButton) ? clearButton : EMPTY_RECORD, handleClearClick, handleClearMouseDown, padding: responsivePadding }), $[61] = clearButton, $[62] = disabled, $[63] = fontSize, $[64] = handleClearClick, $[65] = radius, $[66] = readOnly, $[67] = responsivePadding, $[68] = t28) : t28 = $[68];
+  let t29;
+  $[69] !== t23 || $[70] !== t27 || $[71] !== t28 ? (t29 = /* @__PURE__ */ jsxs("span", { className: t20, children: [
+    t23,
+    t27,
+    t28
+  ] }), $[69] = t23, $[70] = t27, $[71] = t28, $[72] = t29) : t29 = $[72];
+  let t30;
+  $[73] !== suffix ? (t30 = suffix && /* @__PURE__ */ jsx("span", { className: textInputSuffix(), children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[73] = suffix, $[74] = t30) : t30 = $[74];
   let t31;
-  $[58] !== t29 || $[59] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Box, { className: t28, position: "absolute", children: [
+  return $[75] !== t12 || $[76] !== t13 || $[77] !== t14 || $[78] !== t15 || $[79] !== t16 || $[80] !== t17 || $[81] !== t18 || $[82] !== t19 || $[83] !== t29 || $[84] !== t30 ? (t31 = /* @__PURE__ */ jsxs("span", { className: t12, "data-icon-left": t13, "data-icon-right": t14, "data-invalid": t15, "data-prefix": t16, "data-read-only": t17, "data-suffix": t18, "data-ui": "TextInput", children: [
+    t19,
     t29,
     t30
-  ] }), $[58] = t29, $[59] = t30, $[60] = t31) : t31 = $[60];
-  let t32;
-  $[61] !== clearButton || $[62] !== clearButtonBoxPadding || $[63] !== clearButtonPadding || $[64] !== clearButtonProps || $[65] !== disabled || $[66] !== fontSize || $[67] !== handleClearClick || $[68] !== radius || $[69] !== readOnly ? (t32 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(Box, { insetTop: 0, insetRight: 0, padding: clearButtonBoxPadding, position: "absolute", style: {
+  ] }), $[75] = t12, $[76] = t13, $[77] = t14, $[78] = t15, $[79] = t16, $[80] = t17, $[81] = t18, $[82] = t19, $[83] = t29, $[84] = t30, $[85] = t31) : t31 = $[85], t31;
+}
+function _temp$a(event) {
+  event.preventDefault(), event.stopPropagation();
+}
+function ClearButton(t0) {
+  const $ = c(15), {
+    fontSize,
+    radius,
+    clearButtonProps,
+    handleClearClick,
+    handleClearMouseDown,
+    padding
+  } = t0;
+  let t1;
+  $[0] !== padding ? (t1 = Object.fromEntries(Object.entries(padding).map(_temp2$2)), $[0] = padding, $[1] = t1) : t1 = $[1];
+  const clearButtonBoxPadding = t1;
+  let t2;
+  $[2] !== padding ? (t2 = Object.fromEntries(Object.entries(padding).map(_temp3)), $[2] = padding, $[3] = t2) : t2 = $[3];
+  const clearButtonPadding = t2;
+  let t3;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
     zIndex: 2
-  }, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[61] = clearButton, $[62] = clearButtonBoxPadding, $[63] = clearButtonPadding, $[64] = clearButtonProps, $[65] = disabled, $[66] = fontSize, $[67] = handleClearClick, $[68] = radius, $[69] = readOnly, $[70] = t32) : t32 = $[70];
-  let t33;
-  $[71] !== t27 || $[72] !== t31 || $[73] !== t32 ? (t33 = /* @__PURE__ */ jsxs(Box, { className: t24, flex: 1, position: "relative", children: [
-    t27,
-    t31,
-    t32
-  ] }), $[71] = t27, $[72] = t31, $[73] = t32, $[74] = t33) : t33 = $[74];
-  let t34;
-  $[75] !== suffix ? (t34 = suffix && /* @__PURE__ */ jsx(Box, { className: textInputSuffix(), sizing: "border", children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[75] = suffix, $[76] = t34) : t34 = $[76];
-  let t35;
-  return $[77] !== t16 || $[78] !== t17 || $[79] !== t18 || $[80] !== t19 || $[81] !== t20 || $[82] !== t21 || $[83] !== t22 || $[84] !== t23 || $[85] !== t33 || $[86] !== t34 ? (t35 = /* @__PURE__ */ jsxs(Box, { alignItems: "center", className: t16, "data-icon-left": t17, "data-icon-right": t18, "data-invalid": t19, "data-prefix": t20, "data-read-only": t21, "data-suffix": t22, "data-ui": "TextInput", display: "flex", children: [
-    t23,
-    t33,
-    t34
-  ] }), $[77] = t16, $[78] = t17, $[79] = t18, $[80] = t19, $[81] = t20, $[82] = t21, $[83] = t22, $[84] = t23, $[85] = t33, $[86] = t34, $[87] = t35) : t35 = $[87], t35;
+  }, $[4] = t3) : t3 = $[4];
+  let t4;
+  $[5] !== clearButtonPadding || $[6] !== clearButtonProps || $[7] !== fontSize || $[8] !== handleClearClick || $[9] !== handleClearMouseDown || $[10] !== radius ? (t4 = /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }), $[5] = clearButtonPadding, $[6] = clearButtonProps, $[7] = fontSize, $[8] = handleClearClick, $[9] = handleClearMouseDown, $[10] = radius, $[11] = t4) : t4 = $[11];
+  let t5;
+  return $[12] !== clearButtonBoxPadding || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", insetTop: 0, insetRight: 0, padding: clearButtonBoxPadding, position: "absolute", style: t3, children: t4 }), $[12] = clearButtonBoxPadding, $[13] = t4, $[14] = t5) : t5 = $[14], t5;
 }
 function _temp3(t0) {
   const [key_0, value_0] = t0;
   return value_0 === 0 ? [key_0, 0] : value_0 === 1 ? [key_0, 0] : value_0 === 2 ? [key_0, 1] : [key_0, typeof value_0 == "number" ? value_0 - 1 : 0];
 }
-function _temp2$1(t0) {
+function _temp2$2(t0) {
   const [key2, value] = t0;
   return value === 0 ? [key2, 0] : value === 1 ? [key2, 1] : value === 2 ? [key2, 1] : [key2, typeof value == "number" ? value - 2 : 0];
 }
-function _temp$8(event) {
-  event.preventDefault(), event.stopPropagation();
-}
 function AutocompleteOption(props) {
   const $ = c(11), {
     children,
@@ -1378,16 +1517,18 @@ function autocompleteReducer(state, msg) {
 }
 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_AUTOCOMPLETE_ELEMENT = "input", DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
 function Autocomplete(props) {
-  const {
-    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
-    border = !0,
+  const $ = c(181), t0 = props;
+  let customValidity, disabled, filterOptionProp, forwardedRef, icon, id, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, optionsProp, prefix, readOnly, relatedElements, renderOptionProp, renderPopover, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, valueProp;
+  $[0] !== t0 ? ({
+    as: t1,
+    border: t2,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 2,
+    fontSize: t3,
     icon,
     id,
-    listBox = EMPTY_RECORD,
+    listBox: t4,
     loading,
     onBlur,
     onChange,
@@ -1397,36 +1538,61 @@ function Autocomplete(props) {
     openButton,
     openOnFocus,
     options: optionsProp,
-    padding: paddingProp = 3,
-    popover: popover2 = EMPTY_RECORD,
+    padding: t5,
+    popover: t6,
     prefix,
-    radius = 2,
+    radius: t7,
     readOnly,
     ref: forwardedRef,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
-    renderValue = DEFAULT_RENDER_VALUE,
+    renderValue: t8,
     suffix,
     value: valueProp,
     ...rest
-  } = props, [state, dispatch] = useReducer(autocompleteReducer, {
-    activeValue: valueProp || null,
+  } = t0, $[0] = t0, $[1] = customValidity, $[2] = disabled, $[3] = filterOptionProp, $[4] = forwardedRef, $[5] = icon, $[6] = id, $[7] = loading, $[8] = onBlur, $[9] = onChange, $[10] = onFocus, $[11] = onQueryChange, $[12] = onSelect, $[13] = openButton, $[14] = openOnFocus, $[15] = optionsProp, $[16] = prefix, $[17] = readOnly, $[18] = relatedElements, $[19] = renderOptionProp, $[20] = renderPopover, $[21] = rest, $[22] = suffix, $[23] = t1, $[24] = t2, $[25] = t3, $[26] = t4, $[27] = t5, $[28] = t6, $[29] = t7, $[30] = t8, $[31] = valueProp) : (customValidity = $[1], disabled = $[2], filterOptionProp = $[3], forwardedRef = $[4], icon = $[5], id = $[6], loading = $[7], onBlur = $[8], onChange = $[9], onFocus = $[10], onQueryChange = $[11], onSelect = $[12], openButton = $[13], openOnFocus = $[14], optionsProp = $[15], prefix = $[16], readOnly = $[17], relatedElements = $[18], renderOptionProp = $[19], renderPopover = $[20], rest = $[21], suffix = $[22], t1 = $[23], t2 = $[24], t3 = $[25], t4 = $[26], t5 = $[27], t6 = $[28], t7 = $[29], t8 = $[30], valueProp = $[31]);
+  const as = t1 === void 0 ? DEFAULT_AUTOCOMPLETE_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, listBox = t4 === void 0 ? EMPTY_RECORD : t4, paddingProp = t5 === void 0 ? 3 : t5, popover2 = t6 === void 0 ? EMPTY_RECORD : t6, radius = t7 === void 0 ? 2 : t7, renderValue = t8 === void 0 ? DEFAULT_RENDER_VALUE : t8, t9 = valueProp || null, t10 = valueProp || null;
+  let t11;
+  $[32] !== t10 || $[33] !== t9 ? (t11 = {
+    activeValue: t9,
     focused: !1,
     listFocused: !1,
     query: null,
-    value: valueProp || null
-  }), {
+    value: t10
+  }, $[32] = t10, $[33] = t9, $[34] = t11) : t11 = $[34];
+  const [state, dispatch] = useReducer(autocompleteReducer, t11), {
     activeValue,
     focused,
     listFocused,
     query,
     value
-  } = state, defaultRenderOption = useCallback(({
-    value: value_0
-  }) => /* @__PURE__ */ jsx(Selectable, { as: "button", padding: paddingProp, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
-  useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = 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 = useCallback((event) => {
+  } = state;
+  let t12;
+  $[35] !== fontSize || $[36] !== paddingProp ? (t12 = (t132) => {
+    const {
+      value: value_0
+    } = t132;
+    return /* @__PURE__ */ jsx(Selectable, { as: "button", padding: paddingProp, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) });
+  }, $[35] = fontSize, $[36] = paddingProp, $[37] = t12) : t12 = $[37];
+  const renderOption = typeof renderOptionProp == "function" ? renderOptionProp : t12, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), [inputElement, setInputElement] = useState(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
+  let t13, t14;
+  $[38] !== inputElement ? (t13 = () => inputElement, t14 = [inputElement], $[38] = inputElement, $[39] = t13, $[40] = t14) : (t13 = $[39], t14 = $[40]), useImperativeHandle(inputElementRef, t13, t14);
+  let t15, t16;
+  $[41] !== inputElement ? (t15 = () => inputElement, t16 = [inputElement], $[41] = inputElement, $[42] = t15, $[43] = t16) : (t15 = $[42], t16 = $[43]), useImperativeHandle(forwardedRef, t15, t16);
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp);
+  let t17;
+  $[44] !== options || $[45] !== value ? (t17 = value !== null ? options.find((o) => o.value === value) : void 0, $[44] = options, $[45] = value, $[46] = t17) : t17 = $[46];
+  const currentOption = t17;
+  let t18;
+  if ($[47] !== filterOption || $[48] !== options || $[49] !== query) {
+    let t192;
+    $[51] !== filterOption || $[52] !== query ? (t192 = (option) => query ? filterOption(query, option) : !0, $[51] = filterOption, $[52] = query, $[53] = t192) : t192 = $[53], t18 = options.filter(t192), $[47] = filterOption, $[48] = options, $[49] = query, $[50] = t18;
+  } else
+    t18 = $[50];
+  const filteredOptions = t18, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null;
+  let t19;
+  $[54] !== onBlur || $[55] !== onQueryChange || $[56] !== relatedElements ? (t19 = (event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -1443,20 +1609,30 @@ function Autocomplete(props) {
         type: "root/blur"
       }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = useCallback((event_0) => {
+  }, $[54] = onBlur, $[55] = onQueryChange, $[56] = relatedElements, $[57] = t19) : t19 = $[57];
+  const handleRootBlur = t19;
+  let t20;
+  $[58] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (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
     }));
-  }, []), handleOptionSelect = useCallback((v) => {
+  }, $[58] = t20) : t20 = $[58];
+  const handleRootFocus = t20;
+  let t21;
+  $[59] !== onChange || $[60] !== onQueryChange || $[61] !== onSelect ? (t21 = (v) => {
     dispatch({
       type: "value/change",
       value: v
     }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = useCallback((event_1) => {
+  }, $[59] = onChange, $[60] = onQueryChange, $[61] = onSelect, $[62] = t21) : t21 = $[62];
+  const handleOptionSelect = t21;
+  let t22;
+  $[63] !== activeValue || $[64] !== filteredOptions || $[65] !== filteredOptionsLen || $[66] !== onQueryChange ? (t22 = (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",
@@ -1466,7 +1642,8 @@ function Autocomplete(props) {
       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",
@@ -1486,35 +1663,58 @@ function Autocomplete(props) {
       inputElementRef.current?.focus();
       return;
     }
-  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = useCallback((event_2) => {
+  }, $[63] = activeValue, $[64] = filteredOptions, $[65] = filteredOptionsLen, $[66] = onQueryChange, $[67] = t22) : t22 = $[67];
+  const handleRootKeyDown = t22;
+  let t23;
+  $[68] !== onQueryChange ? (t23 = (event_2) => {
     const nextQuery = event_2.currentTarget.value;
     dispatch({
       type: "input/change",
       query: nextQuery
     }), onQueryChange && onQueryChange(nextQuery);
-  }, [onQueryChange]), dispatchOpen = useCallback(() => {
+  }, $[68] = onQueryChange, $[69] = t23) : t23 = $[69];
+  const handleInputChange = t23;
+  let t24;
+  $[70] !== currentOption || $[71] !== renderValue || $[72] !== value ? (t24 = () => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
     });
-  }, [currentOption, renderValue, value]), handleInputFocus = useCallback((event_3) => {
+  }, $[70] = currentOption, $[71] = renderValue, $[72] = value, $[73] = t24) : t24 = $[73];
+  const dispatchOpen = t24;
+  let t25;
+  $[74] !== dispatchOpen || $[75] !== focused || $[76] !== onFocus || $[77] !== openOnFocus ? (t25 = (event_3) => {
     focused || (dispatch({
       type: "input/focus"
     }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
-  }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = useCallback(() => {
+  }, $[74] = dispatchOpen, $[75] = focused, $[76] = onFocus, $[77] = openOnFocus, $[78] = t25) : t25 = $[78];
+  const handleInputFocus = t25;
+  let t26;
+  $[79] === Symbol.for("react.memo_cache_sentinel") ? (t26 = () => {
     popoverMouseWithinRef.current = !0;
-  }, []), handlePopoverMouseLeave = useCallback(() => {
+  }, $[79] = t26) : t26 = $[79];
+  const handlePopoverMouseEnter = t26;
+  let t27;
+  $[80] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => {
     popoverMouseWithinRef.current = !1;
-  }, []), handleClearButtonClick = useCallback(() => {
+  }, $[80] = t27) : t27 = $[80];
+  const handlePopoverMouseLeave = t27;
+  let t28;
+  $[81] !== onChange || $[82] !== onQueryChange ? (t28 = () => {
     dispatch({
       type: "root/clear"
     }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onQueryChange]), handleClearButtonFocus = useCallback(() => {
+  }, $[81] = onChange, $[82] = onQueryChange, $[83] = t28) : t28 = $[83];
+  const handleClearButtonClick = t28;
+  let t29;
+  $[84] === Symbol.for("react.memo_cache_sentinel") ? (t29 = () => {
     dispatch({
       type: "input/focus"
     });
-  }, []);
-  useEffect(() => {
+  }, $[84] = t29) : t29 = $[84];
+  const handleClearButtonFocus = t29;
+  let t30, t31;
+  $[85] !== valueProp ? (t30 = () => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
         type: "value/change",
@@ -1526,14 +1726,19 @@ function Autocomplete(props) {
       type: "value/change",
       value: valueProp || null
     }));
-  }, [valueProp]), useEffect(() => {
+  }, t31 = [valueProp], $[85] = valueProp, $[86] = t30, $[87] = t31) : (t30 = $[86], t31 = $[87]), useEffect(t30, t31);
+  let t32, t33;
+  $[88] !== focused ? (t32 = () => {
     !focused && valueRef.current && dispatch({
       type: "root/setActiveValue",
       value: valueRef.current
     });
-  }, [focused]), useEffect(() => {
+  }, t33 = [focused], $[88] = focused, $[89] = t32, $[90] = t33) : (t32 = $[89], t33 = $[90]), useEffect(t32, t33);
+  let t34, t35;
+  $[91] !== activeValue || $[92] !== filteredOptions ? (t34 = () => {
     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];
@@ -1543,41 +1748,128 @@ function Autocomplete(props) {
         focusFirstDescendant(activeItemElement);
       }
     }
-  }, [activeValue, filteredOptions]);
-  const clearButton = useMemo(() => {
-    if (!loading && !disabled && value)
-      return {
+  }, t35 = [activeValue, filteredOptions], $[91] = activeValue, $[92] = filteredOptions, $[93] = t34, $[94] = t35) : (t34 = $[93], t35 = $[94]), useEffect(t34, t35);
+  let t36;
+  bb0: {
+    if (!loading && !disabled && value) {
+      let t372;
+      $[95] === Symbol.for("react.memo_cache_sentinel") ? (t372 = {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
-      };
-  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(() => Object.fromEntries(Object.entries(padding).map(([key2, value_1]) => value_1 === 0 ? [key2, 0] : value_1 === 1 ? [key2, 1] : value_1 === 2 ? [key2, 1] : [key2, value_1 - 2])), [padding]), openButtonPadding = useMemo(() => Object.values(padding).map((v_0) => Math.max(v_0 - 1, 0)), [padding]), openButtonProps = useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = useCallback((event_4) => {
-    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
-  }, [openButtonProps, dispatchOpen]), openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsx(TextInput, { ...rest, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", as, border, clearButton, customValidity, disabled, fontSize, 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 = useCallback((event_5) => {
-    event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", gap: 1, id: listBoxId, ref: listBoxElementRef, role: "listbox", children: filteredOptions.map((option_0) => {
-    const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
-    return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: 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 = useMemo(() => renderPopover ? renderPopover({
+      }, $[95] = t372) : t372 = $[95], t36 = t372;
+      break bb0;
+    }
+    t36 = void 0;
+  }
+  const clearButton = t36;
+  let t37;
+  $[96] !== padding ? (t37 = Object.fromEntries(Object.entries(padding).map(_temp$9)), $[96] = padding, $[97] = t37) : t37 = $[97];
+  const openButtonBoxPadding = t37;
+  let t38;
+  $[98] !== padding ? (t38 = Object.values(padding).map(_temp2$1), $[98] = padding, $[99] = t38) : t38 = $[99];
+  const openButtonPadding = t38, openButtonProps = typeof openButton == "object" ? openButton : EMPTY_RECORD;
+  let t39;
+  $[100] !== dispatchOpen || $[101] !== openButtonProps ? (t39 = (event_4) => {
+    dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
+  }, $[100] = dispatchOpen, $[101] = openButtonProps, $[102] = t39) : t39 = $[102];
+  const handleOpenClick = t39;
+  let t40;
+  $[103] !== disabled || $[104] !== expanded || $[105] !== fontSize || $[106] !== handleOpenClick || $[107] !== openButton || $[108] !== openButtonBoxPadding || $[109] !== openButtonPadding || $[110] !== openButtonProps || $[111] !== readOnly ? (t40 = !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, $[103] = disabled, $[104] = expanded, $[105] = fontSize, $[106] = handleOpenClick, $[107] = openButton, $[108] = openButtonBoxPadding, $[109] = openButtonPadding, $[110] = openButtonProps, $[111] = readOnly, $[112] = t40) : t40 = $[112];
+  const openButtonNode = t40;
+  let t41;
+  bb1: {
+    if (query === null) {
+      if (value !== null) {
+        let t422;
+        $[113] !== currentOption || $[114] !== renderValue || $[115] !== value ? (t422 = renderValue(value, currentOption), $[113] = currentOption, $[114] = renderValue, $[115] = value, $[116] = t422) : t422 = $[116], t41 = t422;
+        break bb1;
+      }
+      t41 = "";
+      break bb1;
+    }
+    t41 = query;
+  }
+  const inputValue = t41;
+  let t42;
+  $[117] !== listFocused ? (t42 = (event_5) => {
+    event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
+  }, $[117] = listFocused, $[118] = t42) : t42 = $[118];
+  const handleListBoxKeyDown = t42;
+  let t43;
+  bb2: {
+    if (filteredOptions.length === 0) {
+      t43 = null;
+      break bb2;
+    }
+    let t442;
+    if ($[119] !== activeValue || $[120] !== currentOption || $[121] !== filteredOptions || $[122] !== handleOptionSelect || $[123] !== id || $[124] !== listFocused || $[125] !== loading || $[126] !== renderOption) {
+      let t453;
+      $[128] !== activeValue || $[129] !== currentOption || $[130] !== handleOptionSelect || $[131] !== id || $[132] !== listFocused || $[133] !== loading || $[134] !== renderOption ? (t453 = (option_0) => {
+        const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
+        return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
+          disabled: loading,
+          selected: active,
+          tabIndex: listFocused && active ? 0 : -1
+        }) }, option_0.value);
+      }, $[128] = activeValue, $[129] = currentOption, $[130] = handleOptionSelect, $[131] = id, $[132] = listFocused, $[133] = loading, $[134] = renderOption, $[135] = t453) : t453 = $[135], t442 = filteredOptions.map(t453), $[119] = activeValue, $[120] = currentOption, $[121] = filteredOptions, $[122] = handleOptionSelect, $[123] = id, $[124] = listFocused, $[125] = loading, $[126] = renderOption, $[127] = t442;
+    } else
+      t442 = $[127];
+    let t452;
+    $[136] !== listBoxId || $[137] !== t442 ? (t452 = /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", gap: 1, id: listBoxId, ref: listBoxElementRef, role: "listbox", children: t442 }), $[136] = listBoxId, $[137] = t442, $[138] = t452) : t452 = $[138];
+    let t462;
+    $[139] !== handleListBoxKeyDown || $[140] !== listBox || $[141] !== t452 ? (t462 = /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: t452 }), $[139] = handleListBoxKeyDown, $[140] = listBox, $[141] = t452, $[142] = t462) : t462 = $[142], t43 = t462;
+  }
+  const content2 = t43;
+  let t44;
+  bb3: {
+    if (renderPopover) {
+      const t453 = !expanded;
+      let t462;
+      $[143] !== content2 || $[144] !== inputElement || $[145] !== renderPopover || $[146] !== t453 ? (t462 = /* @__PURE__ */ jsx(RenderPopover, { content: content2, hidden: t453, inputElement, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, resultsPopoverElementRef, renderPopover }), $[143] = content2, $[144] = inputElement, $[145] = renderPopover, $[146] = t453, $[147] = t462) : t462 = $[147], t44 = t462;
+      break bb3;
+    }
+    if (filteredOptionsLen === 0) {
+      t44 = null;
+      break bb3;
+    }
+    let t452;
+    $[148] !== content2 || $[149] !== expanded || $[150] !== inputElement || $[151] !== popover2 ? (t452 = /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElement, ...popover2 }), $[148] = content2, $[149] = expanded, $[150] = inputElement, $[151] = popover2, $[152] = t452) : t452 = $[152], t44 = t452;
+  }
+  const results = t44, t45 = loading && AnimatedSpinnerIcon, t46 = suffix || openButtonNode;
+  let t47;
+  $[153] !== activeItemId || $[154] !== as || $[155] !== border || $[156] !== clearButton || $[157] !== customValidity || $[158] !== disabled || $[159] !== expanded || $[160] !== fontSize || $[161] !== handleClearButtonClick || $[162] !== handleInputChange || $[163] !== handleInputFocus || $[164] !== icon || $[165] !== id || $[166] !== inputValue || $[167] !== listBoxId || $[168] !== padding || $[169] !== prefix || $[170] !== radius || $[171] !== readOnly || $[172] !== rest || $[173] !== t45 || $[174] !== t46 ? (t47 = /* @__PURE__ */ jsx(TextInput, { ...rest, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", as, border, clearButton, customValidity, disabled, fontSize, icon, iconRight: t45, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: setInputElement, role: "combobox", spellCheck: !1, suffix: t46, value: inputValue }), $[153] = activeItemId, $[154] = as, $[155] = border, $[156] = clearButton, $[157] = customValidity, $[158] = disabled, $[159] = expanded, $[160] = fontSize, $[161] = handleClearButtonClick, $[162] = handleInputChange, $[163] = handleInputFocus, $[164] = icon, $[165] = id, $[166] = inputValue, $[167] = listBoxId, $[168] = padding, $[169] = prefix, $[170] = radius, $[171] = readOnly, $[172] = rest, $[173] = t45, $[174] = t46, $[175] = t47) : t47 = $[175];
+  let t48;
+  return $[176] !== handleRootBlur || $[177] !== handleRootKeyDown || $[178] !== results || $[179] !== t47 ? (t48 = /* @__PURE__ */ jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
+    t47,
+    results
+  ] }), $[176] = handleRootBlur, $[177] = handleRootKeyDown, $[178] = results, $[179] = t47, $[180] = t48) : t48 = $[180], t48;
+}
+function _temp2$1(v_0) {
+  return Math.max(v_0 - 1, 0);
+}
+function _temp$9(t0) {
+  const [key2, value_1] = t0;
+  return value_1 === 0 ? [key2, 0] : value_1 === 1 ? [key2, 1] : value_1 === 2 ? [key2, 1] : [key2, value_1 - 2];
+}
+function RenderPopover({
+  renderPopover,
+  content: content2,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef
+}) {
+  return renderPopover({
     content: content2,
-    hidden: !expanded,
-    inputElement: inputElementRef.current,
-    onMouseEnter: handlePopoverMouseEnter,
-    onMouseLeave: handlePopoverMouseLeave
-  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover2 }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover2, renderPopover]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
-      input,
-      results
-    ] })
-  );
+    hidden,
+    inputElement,
+    onMouseEnter,
+    onMouseLeave
+  }, resultsPopoverElementRef);
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(9), elementsArg = t0 === void 0 ? _temp$7 : t0;
+  const $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
   let t1;
   $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
@@ -1607,38 +1899,97 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
   let t3;
   $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$7() {
+function _temp$8() {
   return EMPTY_ARRAY;
 }
 const DEFAULT_BREADCRUMBS_ELEMENT = "nav";
 function Breadcrumbs(props) {
-  const {
-    as = DEFAULT_BREADCRUMBS_ELEMENT,
+  const $ = c(37), t0 = props;
+  let children, className, expandButtonProps, maxLength, rest, separator, t1, t2, t3, t4;
+  $[0] !== t0 ? ({
+    as: t1,
     children,
     className,
     expandButton: expandButtonProps,
-    gap = 2,
-    gapX,
-    gapY,
+    gap: t2,
+    gapX: t3,
+    gapY: t4,
     maxLength,
     separator,
     ...rest
-  } = props, [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
-  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
-  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
-    const len = rawItems.length;
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsx(Stack, { as: "ol", gap: gapY, overflow: "auto", children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: open ? collapse : expand, ref: expandElementRef, selected: open }) }, "button"), ...rawItems.slice(len - afterLength)];
-    }
-    return rawItems;
-  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]);
-  return /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: breadcrumbs({
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = expandButtonProps, $[4] = maxLength, $[5] = rest, $[6] = separator, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4) : (children = $[1], className = $[2], expandButtonProps = $[3], maxLength = $[4], rest = $[5], separator = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10]);
+  const as = t1 === void 0 ? DEFAULT_BREADCRUMBS_ELEMENT : t1, gap = t2 === void 0 ? 2 : t2, gapX = t3 === void 0 ? gap : t3, gapY = t4 === void 0 ? gap : t4, [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => setOpen(!1), $[11] = t5) : t5 = $[11];
+  const collapse = t5;
+  let t6;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => setOpen(!0), $[12] = t6) : t6 = $[12];
+  const expand = t6;
+  let t7;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [expandElementRef.current, popoverElementRef.current], $[13] = t7) : t7 = $[13], useClickOutsideEvent(collapse, t7);
+  let t8;
+  $[14] !== children ? (t8 = Children.toArray(children).filter(isValidElement), $[14] = children, $[15] = t8) : t8 = $[15];
+  const rawItems = t8;
+  let t9;
+  $[16] !== expandButtonProps || $[17] !== gapY || $[18] !== maxLength || $[19] !== open || $[20] !== rawItems ? (t9 = {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps
+  }, $[16] = expandButtonProps, $[17] = gapY, $[18] = maxLength, $[19] = open, $[20] = rawItems, $[21] = t9) : t9 = $[21];
+  const items = useItems(t9);
+  let t10;
+  $[22] !== className ? (t10 = breadcrumbs({
     className
-  }), gap, gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
-    /* @__PURE__ */ jsx(Box, { as: "li", children: item })
-  ] }, itemIndex)) });
+  }), $[22] = className, $[23] = t10) : t10 = $[23];
+  let t11;
+  if ($[24] !== items || $[25] !== separator) {
+    let t122;
+    $[27] !== separator ? (t122 = (item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
+      /* @__PURE__ */ jsx(Box, { as: "li", children: item })
+    ] }, itemIndex), $[27] = separator, $[28] = t122) : t122 = $[28], t11 = items.map(t122), $[24] = items, $[25] = separator, $[26] = t11;
+  } else
+    t11 = $[26];
+  let t12;
+  return $[29] !== as || $[30] !== gap || $[31] !== gapX || $[32] !== gapY || $[33] !== rest || $[34] !== t10 || $[35] !== t11 ? (t12 = /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: t10, gap, gapX, gapY, children: t11 }), $[29] = as, $[30] = gap, $[31] = gapX, $[32] = gapY, $[33] = rest, $[34] = t10, $[35] = t11, $[36] = t12) : t12 = $[36], t12;
+}
+function useItems(t0) {
+  const $ = c(30), {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps
+  } = t0, len = rawItems.length;
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
+    let t1;
+    if ($[0] !== afterLength || $[1] !== beforeLength || $[2] !== collapse || $[3] !== expand || $[4] !== expandButtonProps || $[5] !== expandElementRef || $[6] !== gapY || $[7] !== len || $[8] !== open || $[9] !== popoverElementRef || $[10] !== rawItems) {
+      const t2 = rawItems.slice(0, beforeLength - 1);
+      let t3;
+      $[12] !== afterLength || $[13] !== beforeLength || $[14] !== len || $[15] !== rawItems ? (t3 = rawItems.slice(beforeLength - 1, len - afterLength), $[12] = afterLength, $[13] = beforeLength, $[14] = len, $[15] = rawItems, $[16] = t3) : t3 = $[16];
+      let t4;
+      $[17] !== gapY || $[18] !== t3 ? (t4 = /* @__PURE__ */ jsx(Stack, { as: "ol", gap: gapY, overflow: "auto", children: t3 }), $[17] = gapY, $[18] = t3, $[19] = t4) : t4 = $[19];
+      const t5 = open ? collapse : expand;
+      let t6;
+      $[20] !== expandButtonProps || $[21] !== expandElementRef || $[22] !== open || $[23] !== t5 ? (t6 = /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: t5, ref: expandElementRef, selected: open }), $[20] = expandButtonProps, $[21] = expandElementRef, $[22] = open, $[23] = t5, $[24] = t6) : t6 = $[24];
+      let t7;
+      $[25] !== open || $[26] !== popoverElementRef || $[27] !== t4 || $[28] !== t6 ? (t7 = /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: t4, open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: t6 }, "button"), $[25] = open, $[26] = popoverElementRef, $[27] = t4, $[28] = t6, $[29] = t7) : t7 = $[29], t1 = [...t2, t7, ...rawItems.slice(len - afterLength)], $[0] = afterLength, $[1] = beforeLength, $[2] = collapse, $[3] = expand, $[4] = expandButtonProps, $[5] = expandElementRef, $[6] = gapY, $[7] = len, $[8] = open, $[9] = popoverElementRef, $[10] = rawItems, $[11] = t1;
+    } else
+      t1 = $[11];
+    return t1;
+  }
+  return rawItems;
 }
 const DEFAULT_CONTAINER_ELEMENT = "div";
 function Container(props) {
@@ -1659,18 +2010,18 @@ function Container(props) {
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { "data-ui": "Container", ...rest, as, className: t3 }), $[8] = as, $[9] = rest, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
 }
-function useGlobalKeyDown(onKeyDown) {
-  const $ = c(5);
+function useGlobalKeyDown(onKeyDown, options) {
+  const $ = c(7);
   let t0;
   $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
   const handleKeyDown = useEffectEvent(t0);
   let t1;
-  $[2] !== handleKeyDown ? (t1 = () => {
+  $[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
     const handler = (event_0) => handleKeyDown(event_0);
-    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
-  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
+    return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+  }, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
   let t2;
-  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
+  $[5] !== options ? (t2 = [options], $[5] = options, $[6] = t2) : t2 = $[6], useEffect(t1, t2);
 }
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
@@ -1694,9 +2045,9 @@ function DialogCard(props) {
     ref: forwardedRef,
     ...rest
   } = t0, $[0] = t0, $[1] = autoFocus, $[2] = children, $[3] = footer, $[4] = forwardedContentRef, $[5] = forwardedRef, $[6] = header, $[7] = hideCloseButton, $[8] = id, $[9] = onClickOutside, $[10] = onClose, $[11] = portalProp, $[12] = rest, $[13] = t1) : (autoFocus = $[1], children = $[2], footer = $[3], forwardedContentRef = $[4], forwardedRef = $[5], header = $[6], hideCloseButton = $[7], id = $[8], onClickOutside = $[9], onClose = $[10], portalProp = $[11], rest = $[12], t1 = $[13]);
-  const as = t1 === void 0 ? DEFAULT_DIALOG_CARD_ELEMENT : t1, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, ref = useRef(null), contentRef = useRef(null), layer = useLayer(), {
+  const as = t1 === void 0 ? DEFAULT_DIALOG_CARD_ELEMENT : t1, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = use(BoundaryElementContext), ref = useRef(null), contentRef = useRef(null), {
     isTopLayer
-  } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), scrollBottom = scrollHeight - scrollTop;
+  } = useLayer(), labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), scrollBottom = scrollHeight - scrollTop;
   let t2;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[14] = t2) : t2 = $[14], useImperativeHandle(forwardedRef, t2);
   let t3;
@@ -1769,15 +2120,15 @@ function DialogCard(props) {
     t19
   ] }), $[55] = as, $[56] = rest, $[57] = t12, $[58] = t18, $[59] = t19, $[60] = t20) : t20 = $[60], t20;
 }
-const DialogContext = createGlobalScopedContext("@sanity/ui/v3/dialog", {
+const DialogContext = createGlobalScopedContext("@sanity/ui/v4/dialog", {
   version: 0
 });
 function useDialog() {
-  return useContext(DialogContext);
+  return use(DialogContext);
 }
 const DEFAULT_DIALOG_ELEMENT = "div";
 function Dialog(props) {
-  const $ = c(69), context = useDialog(), t0 = props;
+  const $ = c(75), context = useDialog(), t0 = props;
   let _positionProp, _zOffsetProp, children, className, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, tone;
   $[0] !== t0 ? ({
     __unstable_autoFocus: t1,
@@ -1804,9 +2155,18 @@ function Dialog(props) {
     tone,
     ...rest
   } = t0, $[0] = t0, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = className, $[5] = contentRef, $[6] = footer, $[7] = header, $[8] = id, $[9] = onActivate, $[10] = onClickOutside, $[11] = onClose, $[12] = onFocus, $[13] = portalProp, $[14] = rest, $[15] = scheme, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = tone) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], className = $[4], contentRef = $[5], footer = $[6], header = $[7], id = $[8], onActivate = $[9], onClickOutside = $[10], onClose = $[11], onFocus = $[12], portalProp = $[13], rest = $[14], scheme = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], tone = $[23]);
-  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useResponsiveProp(cardRadiusProp), position = useResponsiveProp(positionProp), zOffset = useResponsiveProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = use(BoundaryElementContext);
   let t8;
-  $[24] !== onFocus ? (t8 = (event) => {
+  $[24] !== cardRadiusProp ? (t8 = _getResponsiveProp(cardRadiusProp), $[24] = cardRadiusProp, $[25] = t8) : t8 = $[25];
+  const cardRadius = t8;
+  let t9;
+  $[26] !== positionProp ? (t9 = _getResponsiveProp(positionProp), $[26] = positionProp, $[27] = t9) : t9 = $[27];
+  const position = t9;
+  let t10;
+  $[28] !== zOffsetProp ? (t10 = _getResponsiveProp(zOffsetProp), $[28] = zOffsetProp, $[29] = t10) : t10 = $[29];
+  const zOffset = t10, preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  let t11;
+  $[30] !== onFocus ? (t11 = (event) => {
     onFocus?.(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -1818,10 +2178,10 @@ function Dialog(props) {
       return;
     }
     isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-  }, $[24] = onFocus, $[25] = t8) : t8 = $[25];
-  const handleFocus = t8, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0);
-  let t9;
-  $[26] !== boundaryElement || $[27] !== portalElement ? (t9 = () => {
+  }, $[30] = onFocus, $[31] = t11) : t11 = $[31];
+  const handleFocus = t11, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0);
+  let t12;
+  $[32] !== boundaryElement || $[33] !== portalElement ? (t12 = () => {
     rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement;
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -1834,31 +2194,31 @@ function Dialog(props) {
         target_0.focus();
       }
     }, 0);
-  }, $[26] = boundaryElement, $[27] = portalElement, $[28] = t9) : t9 = $[28];
-  const handleRootClick = t9;
-  let t10;
-  $[29] !== className ? (t10 = dialog({
-    className
-  }), $[29] = className, $[30] = t10) : t10 = $[30];
-  const t11 = animate ? "" : void 0;
-  let t12;
-  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[31] = t12) : t12 = $[31];
+  }, $[32] = boundaryElement, $[33] = portalElement, $[34] = t12) : t12 = $[34];
+  const handleRootClick = t12;
   let t13;
-  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t13 = dialogContainer(), $[32] = t13) : t13 = $[32];
-  let t14;
-  $[33] !== autoFocus || $[34] !== cardRadius || $[35] !== cardShadow || $[36] !== children || $[37] !== contentRef || $[38] !== footer || $[39] !== header || $[40] !== hideCloseButton || $[41] !== id || $[42] !== onClickOutside || $[43] !== onClose || $[44] !== portalProp || $[45] !== scheme || $[46] !== tone || $[47] !== width ? (t14 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, tone, width, children }), $[33] = autoFocus, $[34] = cardRadius, $[35] = cardShadow, $[36] = children, $[37] = contentRef, $[38] = footer, $[39] = header, $[40] = hideCloseButton, $[41] = id, $[42] = onClickOutside, $[43] = onClose, $[44] = portalProp, $[45] = scheme, $[46] = tone, $[47] = width, $[48] = t14) : t14 = $[48];
+  $[35] !== className ? (t13 = dialog({
+    className
+  }), $[35] = className, $[36] = t13) : t13 = $[36];
+  const t14 = animate ? "" : void 0;
   let t15;
-  $[49] !== t14 || $[50] !== width ? (t15 = /* @__PURE__ */ jsx(Container, { alignItems: "center", className: t13, "data-ui": "DialogCard", flexDirection: "column", display: "flex", justifyContent: "center", width, children: t14 }), $[49] = t14, $[50] = width, $[51] = t15) : t15 = $[51];
+  $[37] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[37] = t15) : t15 = $[37];
   let t16;
-  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[52] = t16) : t16 = $[52];
+  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = dialogContainer(), $[38] = t16) : t16 = $[38];
   let t17;
-  $[53] !== handleFocus || $[54] !== handleRootClick || $[55] !== id || $[56] !== labelId || $[57] !== onActivate || $[58] !== padding || $[59] !== position || $[60] !== rest || $[61] !== t10 || $[62] !== t11 || $[63] !== t15 || $[64] !== zOffset ? (t17 = /* @__PURE__ */ jsxs(Layer, { ...rest, "aria-labelledby": labelId, "aria-modal": !0, className: t10, "data-animate": t11, "data-ui": "Dialog", display: "flex", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, padding, position, role: "dialog", zOffset, children: [
-    t12,
-    t15,
-    t16
-  ] }), $[53] = handleFocus, $[54] = handleRootClick, $[55] = id, $[56] = labelId, $[57] = onActivate, $[58] = padding, $[59] = position, $[60] = rest, $[61] = t10, $[62] = t11, $[63] = t15, $[64] = zOffset, $[65] = t17) : t17 = $[65];
+  $[39] !== autoFocus || $[40] !== cardRadius || $[41] !== cardShadow || $[42] !== children || $[43] !== contentRef || $[44] !== footer || $[45] !== header || $[46] !== hideCloseButton || $[47] !== id || $[48] !== onClickOutside || $[49] !== onClose || $[50] !== portalProp || $[51] !== scheme || $[52] !== tone || $[53] !== width ? (t17 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, tone, width, children }), $[39] = autoFocus, $[40] = cardRadius, $[41] = cardShadow, $[42] = children, $[43] = contentRef, $[44] = footer, $[45] = header, $[46] = hideCloseButton, $[47] = id, $[48] = onClickOutside, $[49] = onClose, $[50] = portalProp, $[51] = scheme, $[52] = tone, $[53] = width, $[54] = t17) : t17 = $[54];
   let t18;
-  return $[66] !== portalProp || $[67] !== t17 ? (t18 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t17 }), $[66] = portalProp, $[67] = t17, $[68] = t18) : t18 = $[68], t18;
+  $[55] !== t17 || $[56] !== width ? (t18 = /* @__PURE__ */ jsx(Container, { alignItems: "center", className: t16, "data-ui": "DialogCard", flexDirection: "column", display: "flex", justifyContent: "center", width, children: t17 }), $[55] = t17, $[56] = width, $[57] = t18) : t18 = $[57];
+  let t19;
+  $[58] === Symbol.for("react.memo_cache_sentinel") ? (t19 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[58] = t19) : t19 = $[58];
+  let t20;
+  $[59] !== handleFocus || $[60] !== handleRootClick || $[61] !== id || $[62] !== labelId || $[63] !== onActivate || $[64] !== padding || $[65] !== position || $[66] !== rest || $[67] !== t13 || $[68] !== t14 || $[69] !== t18 || $[70] !== zOffset ? (t20 = /* @__PURE__ */ jsxs(Layer, { ...rest, "aria-labelledby": labelId, "aria-modal": !0, className: t13, "data-animate": t14, "data-ui": "Dialog", display: "flex", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, padding, position, role: "dialog", zOffset, children: [
+    t15,
+    t18,
+    t19
+  ] }), $[59] = handleFocus, $[60] = handleRootClick, $[61] = id, $[62] = labelId, $[63] = onActivate, $[64] = padding, $[65] = position, $[66] = rest, $[67] = t13, $[68] = t14, $[69] = t18, $[70] = zOffset, $[71] = t20) : t20 = $[71];
+  let t21;
+  return $[72] !== portalProp || $[73] !== t20 ? (t21 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t20 }), $[72] = portalProp, $[73] = t20, $[74] = t21) : t21 = $[74], t21;
 }
 function DialogProvider(props) {
   const $ = c(6), {
@@ -1866,15 +2226,15 @@ function DialogProvider(props) {
     position,
     zOffset
   } = props;
-  let t0, t1;
-  $[0] !== position || $[1] !== zOffset ? (t1 = {
+  let t0;
+  $[0] !== position || $[1] !== zOffset ? (t0 = {
     version: 0,
     position,
     zOffset
-  }, $[0] = position, $[1] = zOffset, $[2] = t1) : t1 = $[2], t0 = t1;
+  }, $[0] = position, $[1] = zOffset, $[2] = t0) : t0 = $[2];
   const contextValue = t0;
-  let t2;
-  return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
+  let t1;
+  return $[3] !== children || $[4] !== contextValue ? (t1 = /* @__PURE__ */ jsx(DialogContext, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t1) : t1 = $[5], t1;
 }
 const DEFAULT_KBD_ELEMENT = "kbd";
 function KBD(props) {
@@ -1928,7 +2288,7 @@ function Hotkeys(props) {
   let t4;
   return $[19] !== as || $[20] !== gap || $[21] !== gapX || $[22] !== gapY || $[23] !== rest || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { as, "data-ui": "Hotkeys", ...rest, display: "flex", gap, gapX, gapY, children: t3 }), $[19] = as, $[20] = gap, $[21] = gapX, $[22] = gapY, $[23] = rest, $[24] = t3, $[25] = t4) : t4 = $[25], t4;
 }
-const MenuContext = createGlobalScopedContext("@sanity/ui/v3/menu", null);
+const MenuContext = createGlobalScopedContext("@sanity/ui/v4/menu", null);
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
 }
@@ -1966,16 +2326,24 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const {
+  const $ = c(21), {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef
-  } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
-    _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
-  }, []), mount = useCallback((element, selected) => {
-    if (!element) return () => {
-    };
+  } = props;
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
+  const elementsRef = useRef(t0), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), [activeElement, setActiveElement] = useState(null);
+  let t1;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (nextActiveIndex) => {
+    _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
+  }, $[1] = t1) : t1 = $[1];
+  const setActiveIndex = t1;
+  let t2;
+  $[2] !== rootElementRef ? (t2 = (element, selected) => {
+    if (!element)
+      return _temp$7;
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
@@ -1984,7 +2352,10 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, [rootElementRef, setActiveIndex]), handleKeyDown = useCallback((event) => {
+  }, $[2] = rootElementRef, $[3] = t2) : t2 = $[3];
+  const mount = t2;
+  let t3;
+  $[4] !== onKeyDown || $[5] !== originElement ? (t3 = (event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -1992,7 +2363,8 @@ function useMenuController(props) {
     if (event.key === "Home") {
       event.preventDefault(), event.stopPropagation();
       const el = _getFocusableElements(elementsRef.current)[0];
-      if (!el) return;
+      if (!el)
+        return;
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
       return;
@@ -2000,7 +2372,8 @@ function useMenuController(props) {
     if (event.key === "End") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
-      if (!el_0) return;
+      if (!el_0)
+        return;
       const currentIndex_0 = elementsRef.current.indexOf(el_0);
       setActiveIndex(currentIndex_0);
       return;
@@ -2008,7 +2381,8 @@ function useMenuController(props) {
     if (event.key === "ArrowUp") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
-      if (focusableLen === 0) return;
+      if (focusableLen === 0)
+        return;
       const focusedElement = elementsRef.current[activeIndexRef.current];
       let focusedIndex = focusableElements_1.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
@@ -2019,7 +2393,8 @@ function useMenuController(props) {
     if (event.key === "ArrowDown") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
-      if (focusableLen_0 === 0) return;
+      if (focusableLen_0 === 0)
+        return;
       const focusedElement_0 = elementsRef.current[activeIndexRef.current];
       let focusedIndex_0 = focusableElements_2.indexOf(focusedElement_0);
       focusedIndex_0 = (focusedIndex_0 + 1) % focusableLen_0;
@@ -2028,14 +2403,23 @@ function useMenuController(props) {
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = useCallback((event_0) => {
+  }, $[4] = onKeyDown, $[5] = originElement, $[6] = t3) : t3 = $[6];
+  const handleKeyDown = t3;
+  let t4;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_0) => {
     const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
     setActiveIndex(currentIndex_3);
-  }, [setActiveIndex]), handleItemMouseLeave = useCallback(() => {
+  }, $[7] = t4) : t4 = $[7];
+  const handleItemMouseEnter = t4;
+  let t5;
+  $[8] !== rootElementRef ? (t5 = () => {
     setActiveIndex(-2), rootElementRef.current?.focus();
-  }, [rootElementRef, setActiveIndex]);
-  return useEffect(() => {
-    if (!mounted) return;
+  }, $[8] = rootElementRef, $[9] = t5) : t5 = $[9];
+  const handleItemMouseLeave = t5;
+  let t6, t7;
+  $[10] !== activeIndex || $[11] !== rootElementRef || $[12] !== shouldFocus ? (t6 = () => {
+    if (!rootElementRef.current)
+      return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === "first") {
@@ -2057,18 +2441,22 @@ function useMenuController(props) {
       (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
+  }, t7 = [activeIndex, rootElementRef, setActiveIndex, shouldFocus], $[10] = activeIndex, $[11] = rootElementRef, $[12] = shouldFocus, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), useEffect(t6, t7);
+  let t8;
+  return $[15] !== activeElement || $[16] !== activeIndex || $[17] !== handleItemMouseLeave || $[18] !== handleKeyDown || $[19] !== mount ? (t8 = {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  };
+  }, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t8) : t8 = $[20], t8;
+}
+function _temp$7() {
 }
 const DEFAULT_MENU_ELEMENT = "div";
 function Menu(props) {
-  const $ = c(57), t0 = props;
+  const $ = c(56), t0 = props;
   let _shouldFocus, children, className, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -2123,32 +2511,29 @@ function Menu(props) {
   $[28] !== isTopLayer || $[29] !== onEscape ? (t10 = (event) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
   }, $[28] = isTopLayer, $[29] = onEscape, $[30] = t10) : t10 = $[30], useGlobalKeyDown(t10);
-  let t11, t12;
-  $[31] !== activeElement || $[32] !== activeIndex || $[33] !== handleItemMouseEnter || $[34] !== handleItemMouseLeave || $[35] !== mount || $[36] !== onClickOutside || $[37] !== onEscape || $[38] !== onItemClick || $[39] !== registerElement ? (t12 = {
-    version: 0,
+  let t11;
+  $[31] !== activeElement || $[32] !== handleItemMouseEnter || $[33] !== handleItemMouseLeave || $[34] !== mount || $[35] !== onClickOutside || $[36] !== onEscape || $[37] !== onItemClick || $[38] !== registerElement ? (t11 = {
+    version: 2,
     activeElement,
-    activeIndex,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
-    registerElement,
-    onMouseEnter: handleItemMouseEnter,
-    onMouseLeave: handleItemMouseLeave
-  }, $[31] = activeElement, $[32] = activeIndex, $[33] = handleItemMouseEnter, $[34] = handleItemMouseLeave, $[35] = mount, $[36] = onClickOutside, $[37] = onEscape, $[38] = onItemClick, $[39] = registerElement, $[40] = t12) : t12 = $[40], t11 = t12;
+    registerElement
+  }, $[31] = activeElement, $[32] = handleItemMouseEnter, $[33] = handleItemMouseLeave, $[34] = mount, $[35] = onClickOutside, $[36] = onEscape, $[37] = onItemClick, $[38] = registerElement, $[39] = t11) : t11 = $[39];
   const value = t11;
-  let t13;
-  $[41] !== className ? (t13 = menu({
+  let t12;
+  $[40] !== className ? (t12 = menu({
     className
-  }), $[41] = className, $[42] = t13) : t13 = $[42];
+  }), $[40] = className, $[41] = t12) : t12 = $[41];
+  let t13;
+  $[42] !== children || $[43] !== gap ? (t13 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[42] = children, $[43] = gap, $[44] = t13) : t13 = $[44];
   let t14;
-  $[43] !== children || $[44] !== gap ? (t14 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[43] = children, $[44] = gap, $[45] = t14) : t14 = $[45];
+  $[45] !== as || $[46] !== handleKeyDown || $[47] !== handleRefChange || $[48] !== padding || $[49] !== rest || $[50] !== t12 || $[51] !== t13 ? (t14 = /* @__PURE__ */ jsx(Box, { "data-ui": "Menu", ...rest, as, className: t12, onKeyDown: handleKeyDown, overflow: "auto", outline: "none", padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t13 }), $[45] = as, $[46] = handleKeyDown, $[47] = handleRefChange, $[48] = padding, $[49] = rest, $[50] = t12, $[51] = t13, $[52] = t14) : t14 = $[52];
   let t15;
-  $[46] !== as || $[47] !== handleKeyDown || $[48] !== handleRefChange || $[49] !== padding || $[50] !== rest || $[51] !== t13 || $[52] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { "data-ui": "Menu", ...rest, as, className: t13, onKeyDown: handleKeyDown, overflow: "auto", outline: "none", padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t14 }), $[46] = as, $[47] = handleKeyDown, $[48] = handleRefChange, $[49] = padding, $[50] = rest, $[51] = t13, $[52] = t14, $[53] = t15) : t15 = $[53];
-  let t16;
-  return $[54] !== t15 || $[55] !== value ? (t16 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t15 }), $[54] = t15, $[55] = value, $[56] = t16) : t16 = $[56], t16;
+  return $[53] !== t14 || $[54] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext, { value, children: t14 }), $[53] = t14, $[54] = value, $[55] = t15) : t15 = $[55], t15;
 }
 function MenuButton(props) {
   const $ = c(57), {
@@ -2226,8 +2611,8 @@ function MenuButton(props) {
   }, $[22] = menuElements, $[23] = t13) : t13 = $[23];
   const handleBlur = t13;
   let t14;
-  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t14 = () => {
-    setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
+  $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t14 = (e) => {
+    e.defaultPrevented || (setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus());
   }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t14) : t14 = $[26];
   const handleItemClick = t14;
   let t15;
@@ -2268,18 +2653,18 @@ function MenuButton(props) {
   const button2 = t17;
   let t18, t19;
   $[43] !== buttonElement ? (t18 = () => buttonElement, t19 = [buttonElement], $[43] = buttonElement, $[44] = t18, $[45] = t19) : (t18 = $[44], t19 = $[45]), useImperativeHandle(forwardedRef, t18, t19);
-  let t20, t21;
-  $[46] !== popover2 ? (t21 = popover2 || {}, $[46] = popover2, $[47] = t21) : t21 = $[47];
-  let t22;
-  $[48] !== t21 ? (t22 = {
+  let t20;
+  $[46] !== popover2 ? (t20 = popover2 || {}, $[46] = popover2, $[47] = t20) : t20 = $[47];
+  let t21;
+  $[48] !== t20 ? (t21 = {
     overflow: "auto",
-    ...t21
-  }, $[48] = t21, $[49] = t22) : t22 = $[49], t20 = t22;
-  const popoverProps = t20;
+    ...t20
+  }, $[48] = t20, $[49] = t21) : t21 = $[49];
+  const popoverProps = t21;
+  let t22;
+  $[50] !== button2 ? (t22 = button2 || /* @__PURE__ */ jsx(Fragment, {}), $[50] = button2, $[51] = t22) : t22 = $[51];
   let t23;
-  $[50] !== button2 ? (t23 = button2 || /* @__PURE__ */ jsx(Fragment, {}), $[50] = button2, $[51] = t23) : t23 = $[51];
-  let t24;
-  return $[52] !== menu2 || $[53] !== open || $[54] !== popoverProps || $[55] !== t23 ? (t24 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu2, open, children: t23 }), $[52] = menu2, $[53] = open, $[54] = popoverProps, $[55] = t23, $[56] = t24) : t24 = $[56], t24;
+  return $[52] !== menu2 || $[53] !== open || $[54] !== popoverProps || $[55] !== t22 ? (t23 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu2, open, children: t22 }), $[52] = menu2, $[53] = open, $[54] = popoverProps, $[55] = t22, $[56] = t23) : t23 = $[56], t23;
 }
 function _temp$6(v) {
   return !v;
@@ -2302,10 +2687,10 @@ function MenuDivider(props) {
   return $[6] !== Element2 || $[7] !== rest || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t2 }), $[6] = Element2, $[7] = rest, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
 function useMenu() {
-  const value = useContext(MenuContext);
+  const value = use(MenuContext);
   if (!value)
     throw new Error("useMenu(): missing context value");
-  if (!isRecord(value) || value.version !== 0)
+  if (!isRecord(value) || value.version !== 2)
     throw new Error("useMenu(): the context value is not compatible");
   return value;
 }
@@ -2355,8 +2740,8 @@ function MenuGroup(props) {
   }, $[18] = onClick, $[19] = t9) : t9 = $[19];
   const handleClick = t9;
   let t10;
-  $[20] !== onItemClick ? (t10 = () => {
-    setOpen(!1), onItemClick?.();
+  $[20] !== onItemClick ? (t10 = (e) => {
+    setOpen(!1), onItemClick?.(e);
   }, $[20] = onItemClick, $[21] = t10) : t10 = $[21];
   const handleChildItemClick = t10;
   let t11;
@@ -2415,36 +2800,40 @@ function MenuGroup(props) {
 }
 const DEFAULT_MENU_ITEM_ELEMENT = "button";
 function MenuItem(props) {
-  const $ = c(75), t0 = props;
-  let IconComponent, IconRightComponent, children, disabled, forwardedRef, gapX, gapY, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, pressed, rest, selectedProp, t1, t2, t3, t4, t5, t6, t7, text2;
-  $[0] !== t0 ? ({
-    as: t1,
-    children,
-    disabled,
-    fontSize: t2,
-    gap: t3,
-    gapX,
-    gapY,
-    hotkeys,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    onClick,
-    padding: t4,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingRight,
-    paddingBottom,
-    paddingLeft,
-    pressed,
-    radius: t5,
-    ref: forwardedRef,
-    role: t6,
-    selected: selectedProp,
-    text: text2,
-    tone: t7,
-    ...rest
-  } = t0, $[0] = t0, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = forwardedRef, $[6] = gapX, $[7] = gapY, $[8] = hotkeys, $[9] = onClick, $[10] = paddingBottom, $[11] = paddingLeft, $[12] = paddingRight, $[13] = paddingTop, $[14] = paddingX, $[15] = paddingY, $[16] = pressed, $[17] = rest, $[18] = selectedProp, $[19] = t1, $[20] = t2, $[21] = t3, $[22] = t4, $[23] = t5, $[24] = t6, $[25] = t7, $[26] = text2) : (IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], forwardedRef = $[5], gapX = $[6], gapY = $[7], hotkeys = $[8], onClick = $[9], paddingBottom = $[10], paddingLeft = $[11], paddingRight = $[12], paddingTop = $[13], paddingX = $[14], paddingY = $[15], pressed = $[16], rest = $[17], selectedProp = $[18], t1 = $[19], t2 = $[20], t3 = $[21], t4 = $[22], t5 = $[23], t6 = $[24], t7 = $[25], text2 = $[26]);
+  const $ = c(72), t0 = props;
+  let IconComponent, IconRightComponent, children, disabled, forwardedRef, gapX, gapY, hotkeys, onClick, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, rest, selectedProp, t1, t2, t3, t4, t5, t6, t7, text2;
+  if ($[0] !== t0) {
+    const {
+      as: t82,
+      children: t92,
+      disabled: t102,
+      fontSize: t112,
+      gap: t122,
+      gapX: t132,
+      gapY: t142,
+      hotkeys: t152,
+      icon: t162,
+      iconRight: t172,
+      onClick: t18,
+      padding: t19,
+      paddingX: t20,
+      paddingY: t21,
+      paddingTop: t22,
+      paddingRight: t23,
+      paddingBottom: t24,
+      paddingLeft: t25,
+      pressed,
+      radius: t26,
+      ref: t27,
+      role: t28,
+      selected: t29,
+      text: t30,
+      tone: t31,
+      ...t32
+    } = t0;
+    t1 = t82, children = t92, disabled = t102, t2 = t112, t3 = t122, gapX = t132, gapY = t142, hotkeys = t152, IconComponent = t162, IconRightComponent = t172, onClick = t18, t4 = t19, paddingX = t20, paddingY = t21, paddingTop = t22, paddingRight = t23, paddingBottom = t24, paddingLeft = t25, t5 = t26, forwardedRef = t27, t6 = t28, selectedProp = t29, text2 = t30, t7 = t31, rest = t32, $[0] = t0, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = children, $[4] = disabled, $[5] = forwardedRef, $[6] = gapX, $[7] = gapY, $[8] = hotkeys, $[9] = onClick, $[10] = paddingBottom, $[11] = paddingLeft, $[12] = paddingRight, $[13] = paddingTop, $[14] = paddingX, $[15] = paddingY, $[16] = rest, $[17] = selectedProp, $[18] = t1, $[19] = t2, $[20] = t3, $[21] = t4, $[22] = t5, $[23] = t6, $[24] = t7, $[25] = text2;
+  } else
+    IconComponent = $[1], IconRightComponent = $[2], children = $[3], disabled = $[4], forwardedRef = $[5], gapX = $[6], gapY = $[7], hotkeys = $[8], onClick = $[9], paddingBottom = $[10], paddingLeft = $[11], paddingRight = $[12], paddingTop = $[13], paddingX = $[14], paddingY = $[15], rest = $[16], selectedProp = $[17], t1 = $[18], t2 = $[19], t3 = $[20], t4 = $[21], t5 = $[22], t6 = $[23], t7 = $[24], text2 = $[25];
   const as = t1 === void 0 ? DEFAULT_MENU_ITEM_ELEMENT : t1, fontSize = t2 === void 0 ? 1 : t2, gap = t3 === void 0 ? 3 : t3, padding = t4 === void 0 ? 3 : t4, radius = t5 === void 0 ? 2 : t5, role = t6 === void 0 ? "menuitem" : t6, tone = t7 === void 0 ? "default" : t7, menu2 = useMenu(), {
     activeElement,
     mount,
@@ -2453,16 +2842,16 @@ function MenuItem(props) {
     onItemMouseLeave
   } = menu2, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
   let t8;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[27] = t8) : t8 = $[27], useImperativeHandle(forwardedRef, t8);
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[26] = t8) : t8 = $[26], useImperativeHandle(forwardedRef, t8);
   let t10, t9;
-  $[28] !== mount || $[29] !== rootElement || $[30] !== selectedProp ? (t9 = () => mount(rootElement, selectedProp), t10 = [mount, rootElement, selectedProp], $[28] = mount, $[29] = rootElement, $[30] = selectedProp, $[31] = t10, $[32] = t9) : (t10 = $[31], t9 = $[32]), useEffect(t9, t10);
+  $[27] !== mount || $[28] !== rootElement || $[29] !== selectedProp ? (t9 = () => mount(rootElement, selectedProp), t10 = [mount, rootElement, selectedProp], $[27] = mount, $[28] = rootElement, $[29] = selectedProp, $[30] = t10, $[31] = t9) : (t10 = $[30], t9 = $[31]), useEffect(t9, t10);
   let t11;
-  $[33] !== disabled || $[34] !== onClick || $[35] !== onItemClick ? (t11 = (event) => {
-    disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, $[33] = disabled, $[34] = onClick, $[35] = onItemClick, $[36] = t11) : t11 = $[36];
+  $[32] !== disabled || $[33] !== onClick || $[34] !== onItemClick ? (t11 = (event) => {
+    disabled || (onClick && onClick(event), onItemClick && onItemClick(event));
+  }, $[32] = disabled, $[33] = onClick, $[34] = onItemClick, $[35] = t11) : t11 = $[35];
   const handleClick = t11;
-  let t12, t13;
-  $[37] !== padding || $[38] !== paddingBottom || $[39] !== paddingLeft || $[40] !== paddingRight || $[41] !== paddingTop || $[42] !== paddingX || $[43] !== paddingY ? (t13 = {
+  let t12;
+  $[36] !== padding || $[37] !== paddingBottom || $[38] !== paddingLeft || $[39] !== paddingRight || $[40] !== paddingTop || $[41] !== paddingX || $[42] !== paddingY ? (t12 = {
     padding,
     paddingX,
     paddingY,
@@ -2470,15 +2859,15 @@ function MenuItem(props) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }, $[37] = padding, $[38] = paddingBottom, $[39] = paddingLeft, $[40] = paddingRight, $[41] = paddingTop, $[42] = paddingX, $[43] = paddingY, $[44] = t13) : t13 = $[44], t12 = t13;
+  }, $[36] = padding, $[37] = paddingBottom, $[38] = paddingLeft, $[39] = paddingRight, $[40] = paddingTop, $[41] = paddingX, $[42] = paddingY, $[43] = t12) : t12 = $[43];
   const paddingProps = t12;
-  let t14;
-  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (el) => {
+  let t13;
+  $[44] === Symbol.for("react.memo_cache_sentinel") ? (t13 = (el) => {
     ref.current = el, setRootElement(el);
-  }, $[45] = t14) : t14 = $[45];
-  const setRef = t14, t15 = pressed ? "" : void 0, t16 = active ? "" : void 0, t17 = disabled ? "" : void 0, t18 = as === "button" ? "button" : void 0;
-  let t19;
-  $[46] !== IconComponent || $[47] !== IconRightComponent || $[48] !== fontSize || $[49] !== gap || $[50] !== gapX || $[51] !== gapY || $[52] !== hotkeys || $[53] !== paddingProps || $[54] !== text2 ? (t19 = (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap, gapX, gapY, align: "center", ...paddingProps, children: [
+  }, $[44] = t13) : t13 = $[44];
+  const setRef = t13, t14 = as === "button" ? "button" : void 0;
+  let t15;
+  $[45] !== IconComponent || $[46] !== IconRightComponent || $[47] !== fontSize || $[48] !== gap || $[49] !== gapX || $[50] !== gapY || $[51] !== hotkeys || $[52] !== paddingProps || $[53] !== text2 ? (t15 = (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap, gapX, gapY, align: "center", ...paddingProps, children: [
     IconComponent && /* @__PURE__ */ jsxs(Text, { muted: !0, size: fontSize, children: [
       isValidElement(IconComponent) && IconComponent,
       isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
@@ -2492,14 +2881,14 @@ function MenuItem(props) {
       isValidElement(IconRightComponent) && IconRightComponent,
       isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
     ] })
-  ] }), $[46] = IconComponent, $[47] = IconRightComponent, $[48] = fontSize, $[49] = gap, $[50] = gapX, $[51] = gapY, $[52] = hotkeys, $[53] = paddingProps, $[54] = text2, $[55] = t19) : t19 = $[55];
-  let t20;
-  $[56] !== children || $[57] !== paddingProps ? (t20 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t20) : t20 = $[58];
-  let t21;
-  return $[59] !== as || $[60] !== disabled || $[61] !== handleClick || $[62] !== onItemMouseEnter || $[63] !== onItemMouseLeave || $[64] !== radius || $[65] !== rest || $[66] !== role || $[67] !== t15 || $[68] !== t16 || $[69] !== t17 || $[70] !== t18 || $[71] !== t19 || $[72] !== t20 || $[73] !== tone ? (t21 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...rest, as, "data-pressed": t15, "data-selected": t16, "data-disabled": t17, radius, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role, tabIndex: -1, tone, type: t18, children: [
-    t19,
-    t20
-  ] }), $[59] = as, $[60] = disabled, $[61] = handleClick, $[62] = onItemMouseEnter, $[63] = onItemMouseLeave, $[64] = radius, $[65] = rest, $[66] = role, $[67] = t15, $[68] = t16, $[69] = t17, $[70] = t18, $[71] = t19, $[72] = t20, $[73] = tone, $[74] = t21) : t21 = $[74], t21;
+  ] }), $[45] = IconComponent, $[46] = IconRightComponent, $[47] = fontSize, $[48] = gap, $[49] = gapX, $[50] = gapY, $[51] = hotkeys, $[52] = paddingProps, $[53] = text2, $[54] = t15) : t15 = $[54];
+  let t16;
+  $[55] !== children || $[56] !== paddingProps ? (t16 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[55] = children, $[56] = paddingProps, $[57] = t16) : t16 = $[57];
+  let t17;
+  return $[58] !== active || $[59] !== as || $[60] !== disabled || $[61] !== handleClick || $[62] !== onItemMouseEnter || $[63] !== onItemMouseLeave || $[64] !== radius || $[65] !== rest || $[66] !== role || $[67] !== t14 || $[68] !== t15 || $[69] !== t16 || $[70] !== tone ? (t17 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...rest, as, radius, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role, selected: active, tabIndex: -1, tone, type: t14, children: [
+    t15,
+    t16
+  ] }), $[58] = active, $[59] = as, $[60] = disabled, $[61] = handleClick, $[62] = onItemMouseEnter, $[63] = onItemMouseLeave, $[64] = radius, $[65] = rest, $[66] = role, $[67] = t14, $[68] = t15, $[69] = t16, $[70] = tone, $[71] = t17) : t17 = $[71], t17;
 }
 const DEFAULT_TAB_ELEMENT = "button";
 function Tab(props) {
@@ -2710,7 +3099,7 @@ function _temp$5() {
   return !0;
 }
 const subscribe = () => () => {
-}, ToastContext = createGlobalScopedContext("@sanity/ui/v3/toast", null), DEFAULT_GRID_ELEMENT = "div";
+}, ToastContext = createGlobalScopedContext("@sanity/ui/v4/toast", null), DEFAULT_GRID_ELEMENT = "div";
 function Grid(props) {
   const $ = c(8), t0 = props;
   let children, rest, t1;
@@ -2749,7 +3138,7 @@ function generateToastId() {
   return String(toastId++);
 }
 function ToastProvider(props) {
-  const $ = c(13), {
+  const $ = c(14), {
     children,
     padding,
     paddingX,
@@ -2760,21 +3149,24 @@ function ToastProvider(props) {
   let t1;
   $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
   const [state, setState] = useState(t1), mounted = useMounted();
-  let t2, t3;
-  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
+  let t2;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[1] = t2) : t2 = $[1];
+  const timeoutIdsRef = useRef(t2);
+  let t3;
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
     version: 0,
     push: (params) => {
-      const id = params.id ?? generateToastId(), duration = params.duration ?? 5e3;
-      return startTransition(() => {
+      const id = params.id ?? generateToastId(), duration = params.duration ?? 5e3, existingTimeoutId = timeoutIdsRef.current[id];
+      return existingTimeoutId && (clearTimeout(existingTimeoutId), timeoutIdsRef.current[id] = void 0), startTransition(() => {
         setState((prevState) => {
           if (duration === 0.01)
             return prevState.filter((toast2) => toast2.id !== id);
-          const dismiss = () => {
+          const dismiss = function() {
             startTransition(() => {
-              timeoutId && clearTimeout(timeoutId), setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id));
+              timeoutId && clearTimeout(timeoutId), setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id)), timeoutIdsRef.current[id] = void 0;
             });
-          }, timeoutId = setTimeout(dismiss, duration);
-          return [...prevState.filter((toast_1) => toast_1.id !== id), {
+          }, timeoutId = duration === 1 / 0 ? void 0 : setTimeout(dismiss, duration);
+          return timeoutIdsRef.current[id] = timeoutId, [...prevState.filter((toast_1) => toast_1.id !== id), {
             dismiss,
             id,
             params: {
@@ -2785,15 +3177,15 @@ function ToastProvider(props) {
         });
       }), id;
     }
-  }, $[1] = t3) : t3 = $[1], t2 = t3;
-  const value = t2;
+  }, $[2] = t3) : t3 = $[2];
+  const value = t3;
   let t4;
-  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp$4) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t4) : t4 = $[9];
+  $[3] !== gap || $[4] !== mounted || $[5] !== padding || $[6] !== paddingX || $[7] !== paddingY || $[8] !== state || $[9] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp$4) }) }) }), $[3] = gap, $[4] = mounted, $[5] = padding, $[6] = paddingX, $[7] = paddingY, $[8] = state, $[9] = zOffset, $[10] = t4) : t4 = $[10];
   let t5;
-  return $[10] !== children || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+  return $[11] !== children || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext, { value, children: [
     children,
     t4
-  ] }), $[10] = children, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
+  ] }), $[11] = children, $[12] = t4, $[13] = t5) : t5 = $[13], t5;
 }
 function _temp$4(t0) {
   const {
@@ -2804,7 +3196,7 @@ function _temp$4(t0) {
   return /* @__PURE__ */ 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);
 }
 function useToast() {
-  const value = useContext(ToastContext);
+  const value = use(ToastContext);
   if (!value)
     throw new Error("useToast(): missing context value");
   if (!isRecord(value) || value.version !== 0)
@@ -2865,7 +3257,7 @@ function _focusItemElement(el) {
     firstChild && firstChild instanceof HTMLElement && firstChild.focus();
   }
 }
-const TreeContext = createGlobalScopedContext("@sanity/ui/v3/tree", null), DEFAULT_TREE_ELEMENT = "div";
+const TreeContext = createGlobalScopedContext("@sanity/ui/v4/tree", null), DEFAULT_TREE_ELEMENT = "div";
 function Tree(props) {
   const $ = c(38), t0 = props;
   let children, forwardedRef, onFocus, rest, t1;
@@ -2877,27 +3269,27 @@ function Tree(props) {
     ...rest
   } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = onFocus, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], onFocus = $[3], rest = $[4], t1 = $[5]);
   const gap = t1 === void 0 ? 1 : t1, ref = useRef(null), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement);
-  let t2, t3;
-  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[6] = t3) : t3 = $[6], t2 = t3;
+  let t2;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[6] = t2) : t2 = $[6];
   const path = t2;
+  let t3;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[7] = t3) : t3 = $[7];
+  const [itemElements, setItemElements] = useState(t3);
   let t4;
-  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = [], $[7] = t4) : t4 = $[7];
-  const [itemElements, setItemElements] = useState(t4);
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {}, $[8] = t4) : t4 = $[8];
+  const [state, setState] = useState(t4), stateRef = useRef(state);
   let t5;
-  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t5 = {}, $[8] = t5) : t5 = $[8];
-  const [state, setState] = useState(t5), stateRef = useRef(state);
-  let t6;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[9] = t6) : t6 = $[9], useImperativeHandle(forwardedRef, t6);
-  let t7, t8;
-  $[10] !== focusedElement ? (t7 = () => {
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[9] = t5) : t5 = $[9], useImperativeHandle(forwardedRef, t5);
+  let t6, t7;
+  $[10] !== focusedElement ? (t6 = () => {
     focusedElementRef.current = focusedElement;
-  }, t8 = [focusedElement], $[10] = focusedElement, $[11] = t7, $[12] = t8) : (t7 = $[11], t8 = $[12]), useEffect(t7, t8);
-  let t10, t9;
-  $[13] !== state ? (t9 = () => {
+  }, t7 = [focusedElement], $[10] = focusedElement, $[11] = t6, $[12] = t7) : (t6 = $[11], t7 = $[12]), useEffect(t6, t7);
+  let t8, t9;
+  $[13] !== state ? (t8 = () => {
     stateRef.current = state;
-  }, t10 = [state], $[13] = state, $[14] = t10, $[15] = t9) : (t10 = $[14], t9 = $[15]), useEffect(t9, t10);
-  let t11;
-  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (element, path_0, expanded, selected) => (setState((s) => ({
+  }, t9 = [state], $[13] = state, $[14] = t8, $[15] = t9) : (t8 = $[14], t9 = $[15]), useEffect(t8, t9);
+  let t10;
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (element, path_0, expanded, selected) => (setState((s) => ({
     ...s,
     [path_0]: {
       element,
@@ -2910,10 +3302,10 @@ function Tree(props) {
       };
       return delete newState[path_0], newState;
     });
-  }), $[16] = t11) : t11 = $[16];
-  const registerItem = t11;
-  let t12;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (path_1, expanded_0) => {
+  }), $[16] = t10) : t10 = $[16];
+  const registerItem = t10;
+  let t11;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (path_1, expanded_0) => {
     setState((s_1) => {
       const itemState = s_1[path_1];
       return itemState ? {
@@ -2924,14 +3316,12 @@ function Tree(props) {
         }
       } : s_1;
     });
-  }, $[17] = t12) : t12 = $[17];
-  const setExpanded = t12;
+  }, $[17] = t11) : t11 = $[17];
+  const setExpanded = t11, t12 = focusedElement || itemElements[0] || null;
   let t13;
-  const t14 = focusedElement || itemElements[0] || null;
-  let t15;
-  $[18] !== gap || $[19] !== state || $[20] !== t14 ? (t15 = {
+  $[18] !== gap || $[19] !== state || $[20] !== t12 ? (t13 = {
     version: 0,
-    focusedElement: t14,
+    focusedElement: t12,
     gap,
     level: 0,
     path,
@@ -2939,10 +3329,10 @@ function Tree(props) {
     setExpanded,
     setFocusedElement,
     state
-  }, $[18] = gap, $[19] = state, $[20] = t14, $[21] = t15) : t15 = $[21], t13 = t15;
+  }, $[18] = gap, $[19] = state, $[20] = t12, $[21] = t13) : t13 = $[21];
   const contextValue = t13;
-  let t16;
-  $[22] !== itemElements ? (t16 = (event) => {
+  let t14;
+  $[22] !== itemElements ? (t14 = (event) => {
     if (focusedElementRef.current) {
       if (event.key === "ArrowDown") {
         event.preventDefault();
@@ -3001,29 +3391,29 @@ function Tree(props) {
         return;
       }
     }
-  }, $[22] = itemElements, $[23] = t16) : t16 = $[23];
-  const handleKeyDown = t16;
-  let t17;
-  $[24] !== onFocus ? (t17 = (event_0) => {
+  }, $[22] = itemElements, $[23] = t14) : t14 = $[23];
+  const handleKeyDown = t14;
+  let t15;
+  $[24] !== onFocus ? (t15 = (event_0) => {
     setFocusedElement(event_0.target), onFocus?.(event_0);
-  }, $[24] = onFocus, $[25] = t17) : t17 = $[25];
-  const handleFocus = t17;
-  let t18;
-  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t18 = () => {
+  }, $[24] = onFocus, $[25] = t15) : t15 = $[25];
+  const handleFocus = t15;
+  let t16;
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => {
     if (!ref.current)
       return;
     const _itemElements = Array.from(ref.current.querySelectorAll('[data-ui="TreeItem"]'));
     setItemElements(_itemElements);
-  }, $[26] = t18) : t18 = $[26];
+  }, $[26] = t16) : t16 = $[26];
+  let t17;
+  $[27] !== children ? (t17 = [children], $[27] = children, $[28] = t17) : t17 = $[28], useEffect(t16, t17);
+  let t18;
+  $[29] !== children || $[30] !== gap || $[31] !== handleFocus || $[32] !== handleKeyDown || $[33] !== rest ? (t18 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "Tree", ...rest, gap, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", children }), $[29] = children, $[30] = gap, $[31] = handleFocus, $[32] = handleKeyDown, $[33] = rest, $[34] = t18) : t18 = $[34];
   let t19;
-  $[27] !== children ? (t19 = [children], $[27] = children, $[28] = t19) : t19 = $[28], useEffect(t18, t19);
-  let t20;
-  $[29] !== children || $[30] !== gap || $[31] !== handleFocus || $[32] !== handleKeyDown || $[33] !== rest ? (t20 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "Tree", ...rest, gap, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", children }), $[29] = children, $[30] = gap, $[31] = handleFocus, $[32] = handleKeyDown, $[33] = rest, $[34] = t20) : t20 = $[34];
-  let t21;
-  return $[35] !== contextValue || $[36] !== t20 ? (t21 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t20 }), $[35] = contextValue, $[36] = t20, $[37] = t21) : t21 = $[37], t21;
+  return $[35] !== contextValue || $[36] !== t18 ? (t19 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t18 }), $[35] = contextValue, $[36] = t18, $[37] = t19) : t19 = $[37], t19;
 }
 function useTree() {
-  const tree = useContext(TreeContext);
+  const tree = use(TreeContext);
   if (!tree)
     throw new Error("Tree: missing context value");
   return tree;
@@ -3041,97 +3431,135 @@ const TreeGroup = function(props) {
   return $[4] !== children || $[5] !== rest || $[6] !== t2 || $[7] !== tree.gap ? (t3 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...rest, hidden: t2, marginTop: tree.gap, role: "group", gap: tree.gap, children }), $[4] = children, $[5] = rest, $[6] = t2, $[7] = tree.gap, $[8] = t3) : t3 = $[8], t3;
 }, DEFAULT_TREE_ITEM_ELEMENT = "a";
 function TreeItem(props) {
-  const {
+  const $ = c(129), t0 = props;
+  let IconComponent, children, className, href, idProp, muted, onClick, rest, t1, t2, t3, t4, t5, t6, t7, text2, weight;
+  $[0] !== t0 ? ({
     children,
     className,
-    expanded: expandedProp = !1,
-    fontSize = 1,
+    expanded: t1,
+    fontSize: t2,
     href,
     icon: IconComponent,
     id: idProp,
-    linkAs = "a",
+    linkAs: t3,
     muted,
     onClick,
-    padding = 2,
-    radius = 2,
-    selected = !1,
-    space = 2,
+    padding: t4,
+    radius: t5,
+    selected: t6,
+    space: t7,
     text: text2,
     weight,
     ...rest
-  } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), {
+  } = t0, $[0] = t0, $[1] = IconComponent, $[2] = children, $[3] = className, $[4] = href, $[5] = idProp, $[6] = muted, $[7] = onClick, $[8] = rest, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = t7, $[16] = text2, $[17] = weight) : (IconComponent = $[1], children = $[2], className = $[3], href = $[4], idProp = $[5], muted = $[6], onClick = $[7], rest = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13], t6 = $[14], t7 = $[15], text2 = $[16], weight = $[17]);
+  const expandedProp = t1 === void 0 ? !1 : t1, fontSize = t2 === void 0 ? 1 : t2, linkAs = t3 === void 0 ? "a" : t3, padding = t4 === void 0 ? 2 : t4, radius = t5 === void 0 ? 2 : t5, selected = t6 === void 0 ? !1 : t6, space = t7 === void 0 ? 2 : t7, [rootElement, setRootElement] = useState(null), treeitemRef = useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, focused = tree.focusedElement && tree.focusedElement === rootRef.current, tabIndex = focused ? 0 : -1, contextValue = useMemo(() => ({
+  } = tree, _id = useId(), id = idProp || _id;
+  let t8, t9;
+  if ($[18] !== id || $[19] !== path) {
+    const itemPath = path.concat([id || ""]);
+    t8 = itemPath, t9 = itemPath.join("/"), $[18] = id, $[19] = path, $[20] = t8, $[21] = t9;
+  } else
+    t8 = $[20], t9 = $[21];
+  let t10;
+  $[22] !== t8 || $[23] !== t9 ? (t10 = [t8, t9], $[22] = t8, $[23] = t9, $[24] = t10) : t10 = $[24];
+  const [itemPath_0, itemKey] = t10, itemState = tree.state[itemKey], expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, focused = tree.focusedElement && tree.focusedElement === rootElement, tabIndex = focused ? 0 : -1, t11 = tree.level + 1;
+  let t12;
+  $[25] !== itemPath_0 || $[26] !== t11 || $[27] !== tree ? (t12 = {
     ...tree,
-    level: tree.level + 1,
-    path: itemPath
-  }), [itemPath, tree]), handleClick = useCallback((event) => {
+    level: t11,
+    path: itemPath_0
+  }, $[25] = itemPath_0, $[26] = t11, $[27] = tree, $[28] = t12) : t12 = $[28];
+  const contextValue = t12;
+  let t13;
+  $[29] !== expanded || $[30] !== itemKey || $[31] !== onClick || $[32] !== rootElement || $[33] !== setExpanded || $[34] !== setFocusedElement ? (t13 = (event) => {
     onClick && onClick(event);
     const target = event.target;
-    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
-  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = useCallback((event_0) => {
-    focused && event_0.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
-  }, [focused]);
-  useEffect(() => {
-    if (rootRef.current)
-      return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
-  }, [expanded, itemPath, registerItem, selected]);
-  const content2 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
-    /* @__PURE__ */ jsxs(Box, { style: {
-      visibility: IconComponent || children ? "visible" : "hidden",
-      pointerEvents: "none"
-    }, children: [
-      IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
-      !IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
-        transform: expanded ? "rotate(90deg)" : void 0
-      } }) })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text2 }) })
-  ] });
-  return href ? /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: treeItem({
-    className
-  }), onClick: handleClick, ref: rootRef, role: "none", children: [
-    /* @__PURE__ */ jsx(
-      Selectable,
-      {
-        "aria-expanded": expanded,
-        as: linkAs,
-        "data-ui": "TreeItem__box",
-        href,
-        radius,
-        ref: treeitemRef,
-        role: "treeitem",
-        selected,
-        tabIndex,
-        style: {
-          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
-        },
-        children: content2
-      }
-    ),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: treeItem({
+    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
+  }, $[29] = expanded, $[30] = itemKey, $[31] = onClick, $[32] = rootElement, $[33] = setExpanded, $[34] = setFocusedElement, $[35] = t13) : t13 = $[35];
+  const handleClick = t13;
+  let t14;
+  $[36] !== focused || $[37] !== rootElement ? (t14 = (event_0) => {
+    focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
+  }, $[36] = focused, $[37] = rootElement, $[38] = t14) : t14 = $[38];
+  const handleKeyDown = t14;
+  let t15, t16;
+  $[39] !== expanded || $[40] !== itemKey || $[41] !== registerItem || $[42] !== rootElement || $[43] !== selected ? (t15 = () => {
+    if (rootElement)
+      return registerItem(rootElement, itemKey, expanded, selected);
+  }, t16 = [expanded, itemKey, registerItem, rootElement, selected], $[39] = expanded, $[40] = itemKey, $[41] = registerItem, $[42] = rootElement, $[43] = selected, $[44] = t15, $[45] = t16) : (t15 = $[44], t16 = $[45]), useEffect(t15, t16);
+  const t17 = IconComponent || children ? "visible" : "hidden";
+  let t18;
+  $[46] !== t17 ? (t18 = {
+    visibility: t17,
+    pointerEvents: "none"
+  }, $[46] = t17, $[47] = t18) : t18 = $[47];
+  let t19;
+  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== muted || $[51] !== weight ? (t19 = IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }), $[48] = IconComponent, $[49] = fontSize, $[50] = muted, $[51] = weight, $[52] = t19) : t19 = $[52];
+  let t20;
+  $[53] !== IconComponent || $[54] !== expanded || $[55] !== fontSize || $[56] !== muted || $[57] !== weight ? (t20 = !IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
+    transform: expanded ? "rotate(90deg)" : void 0
+  } }) }), $[53] = IconComponent, $[54] = expanded, $[55] = fontSize, $[56] = muted, $[57] = weight, $[58] = t20) : t20 = $[58];
+  let t21;
+  $[59] !== t18 || $[60] !== t19 || $[61] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Box, { style: t18, children: [
+    t19,
+    t20
+  ] }), $[59] = t18, $[60] = t19, $[61] = t20, $[62] = t21) : t21 = $[62];
+  let t22;
+  $[63] !== fontSize || $[64] !== muted || $[65] !== text2 || $[66] !== weight ? (t22 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text2 }) }), $[63] = fontSize, $[64] = muted, $[65] = text2, $[66] = weight, $[67] = t22) : t22 = $[67];
+  let t23;
+  $[68] !== padding || $[69] !== space || $[70] !== t21 || $[71] !== t22 ? (t23 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+    t21,
+    t22
+  ] }), $[68] = padding, $[69] = space, $[70] = t21, $[71] = t22, $[72] = t23) : t23 = $[72];
+  const content2 = t23;
+  if (href) {
+    const t242 = selected ? "" : void 0, t252 = rest;
+    let t262;
+    $[73] !== className ? (t262 = treeItem({
+      className
+    }), $[73] = className, $[74] = t262) : t262 = $[74];
+    const t272 = `calc(${vars.space[2]} * ${tree.level})`;
+    let t282;
+    $[75] !== t272 ? (t282 = {
+      paddingLeft: t272
+    }, $[75] = t272, $[76] = t282) : t282 = $[76];
+    let t292;
+    $[77] !== content2 || $[78] !== expanded || $[79] !== href || $[80] !== linkAs || $[81] !== radius || $[82] !== selected || $[83] !== t282 || $[84] !== tabIndex ? (t292 = /* @__PURE__ */ jsx(Selectable, { "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, radius, ref: treeitemRef, role: "treeitem", selected, tabIndex, style: t282, children: content2 }), $[77] = content2, $[78] = expanded, $[79] = href, $[80] = linkAs, $[81] = radius, $[82] = selected, $[83] = t282, $[84] = tabIndex, $[85] = t292) : t292 = $[85];
+    let t302;
+    $[86] !== children || $[87] !== expanded ? (t302 = children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }), $[86] = children, $[87] = expanded, $[88] = t302) : t302 = $[88];
+    let t312;
+    $[89] !== contextValue || $[90] !== t302 ? (t312 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t302 }), $[89] = contextValue, $[90] = t302, $[91] = t312) : t312 = $[91];
+    let t322;
+    return $[92] !== handleClick || $[93] !== id || $[94] !== itemKey || $[95] !== t242 || $[96] !== t252 || $[97] !== t262 || $[98] !== t292 || $[99] !== t312 ? (t322 = /* @__PURE__ */ jsxs(Box, { "data-selected": t242, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...t252, as: "li", className: t262, onClick: handleClick, ref: setRootElement, role: "none", children: [
+      t292,
+      t312
+    ] }), $[92] = handleClick, $[93] = id, $[94] = itemKey, $[95] = t242, $[96] = t252, $[97] = t262, $[98] = t292, $[99] = t312, $[100] = t322) : t322 = $[100], t322;
+  }
+  const t24 = selected ? "" : void 0, t25 = rest;
+  let t26;
+  $[101] !== className ? (t26 = treeItem({
     className
-  }), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
-    /* @__PURE__ */ jsx(
-      Selectable,
-      {
-        as: "button",
-        "data-focused": focused ? "" : void 0,
-        "data-ui": "TreeItem__box",
-        radius,
-        selected,
-        style: {
-          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
-        },
-        children: content2
-      }
-    ),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
-  ] });
+  }), $[101] = className, $[102] = t26) : t26 = $[102];
+  const t27 = focused ? "" : void 0, t28 = `calc(${vars.space[2]} * ${tree.level})`;
+  let t29;
+  $[103] !== t28 ? (t29 = {
+    paddingLeft: t28
+  }, $[103] = t28, $[104] = t29) : t29 = $[104];
+  let t30;
+  $[105] !== content2 || $[106] !== radius || $[107] !== selected || $[108] !== t27 || $[109] !== t29 ? (t30 = /* @__PURE__ */ jsx(Selectable, { as: "button", "data-focused": t27, "data-ui": "TreeItem__box", radius, selected, style: t29, children: content2 }), $[105] = content2, $[106] = radius, $[107] = selected, $[108] = t27, $[109] = t29, $[110] = t30) : t30 = $[110];
+  let t31;
+  $[111] !== children || $[112] !== expanded ? (t31 = children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }), $[111] = children, $[112] = expanded, $[113] = t31) : t31 = $[113];
+  let t32;
+  $[114] !== contextValue || $[115] !== t31 ? (t32 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t31 }), $[114] = contextValue, $[115] = t31, $[116] = t32) : t32 = $[116];
+  let t33;
+  return $[117] !== expanded || $[118] !== handleClick || $[119] !== handleKeyDown || $[120] !== id || $[121] !== itemKey || $[122] !== t24 || $[123] !== t25 || $[124] !== t26 || $[125] !== t30 || $[126] !== t32 || $[127] !== tabIndex ? (t33 = /* @__PURE__ */ jsxs(Box, { "data-selected": t24, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...t25, "aria-expanded": expanded, className: t26, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
+    t30,
+    t32
+  ] }), $[117] = expanded, $[118] = handleClick, $[119] = handleKeyDown, $[120] = id, $[121] = itemKey, $[122] = t24, $[123] = t25, $[124] = t26, $[125] = t30, $[126] = t32, $[127] = tabIndex, $[128] = t33) : t33 = $[128], t33;
 }
 function _isScrollable(el) {
   if (!(el instanceof Element)) return !1;
@@ -3140,7 +3568,7 @@ function _isScrollable(el) {
 }
 const _ResizeObserver = typeof document < "u" && typeof window < "u" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver, DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
 function VirtualList(props) {
-  const $ = c(61), t0 = props;
+  const $ = c(44), t0 = props;
   let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -3204,60 +3632,87 @@ function VirtualList(props) {
   }, t9 = [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex], $[14] = fromIndex, $[15] = gapValue, $[16] = itemHeight, $[17] = onChange, $[18] = scrollHeight, $[19] = scrollTop, $[20] = toIndex, $[21] = t8, $[22] = t9) : (t8 = $[21], t9 = $[22]), useEffect(t8, t9);
   let t10;
   $[23] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => {
-    setItemHeight(-1);
+    startTransition(() => setItemHeight(-1));
   }, $[23] = t10) : t10 = $[23];
   let t11;
   $[24] !== renderItem ? (t11 = [renderItem], $[24] = renderItem, $[25] = t11) : t11 = $[25], useEffect(t10, t11);
   let t12;
-  bb0: {
-    if (!renderItem || items.length === 0) {
-      t12 = null;
-      break bb0;
-    }
-    if (itemHeight === -1) {
-      let t133;
-      $[26] === Symbol.for("react.memo_cache_sentinel") ? (t133 = (el) => el ? setItemHeight(el.offsetHeight) : void 0, $[26] = t133) : t133 = $[26];
-      let t142;
-      $[27] !== items[0] || $[28] !== renderItem ? (t142 = renderItem(items[0]), $[27] = items[0], $[28] = renderItem, $[29] = t142) : t142 = $[29];
-      let t152;
-      $[30] !== t142 ? (t152 = /* @__PURE__ */ jsx(Box, { ref: t133, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t142 }, 0), $[30] = t142, $[31] = t152) : t152 = $[31];
-      let t162;
-      $[32] === Symbol.for("react.memo_cache_sentinel") ? (t162 = (el_0) => el_0 ? setGapValue(el_0.offsetHeight) : void 0, $[32] = t162) : t162 = $[32];
-      const t17 = vars.space[gap];
-      let t18;
-      $[33] !== t17 ? (t18 = /* @__PURE__ */ jsx("div", { ref: t162, style: {
-        height: t17
-      } }), $[33] = t17, $[34] = t18) : t18 = $[34];
-      let t19;
-      $[35] !== t152 || $[36] !== t18 ? (t19 = [/* @__PURE__ */ jsxs(Fragment, { children: [
-        t152,
-        t18
-      ] })], $[35] = t152, $[36] = t18, $[37] = t19) : t19 = $[37], t12 = t19;
-      break bb0;
-    }
-    let t132;
-    if ($[38] !== fromIndex || $[39] !== gapValue || $[40] !== getItemKey || $[41] !== itemHeight || $[42] !== items || $[43] !== renderItem || $[44] !== toIndex) {
-      let t142;
-      $[46] !== fromIndex || $[47] !== gapValue || $[48] !== getItemKey || $[49] !== itemHeight || $[50] !== renderItem ? (t142 = (item, _itemIndex) => {
-        const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-        return /* @__PURE__ */ jsx(Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
-          top: itemIndex * (itemHeight + gapValue)
-        }, children: node }, key2);
-      }, $[46] = fromIndex, $[47] = gapValue, $[48] = getItemKey, $[49] = itemHeight, $[50] = renderItem, $[51] = t142) : t142 = $[51], t132 = items.slice(fromIndex, toIndex).map(t142), $[38] = fromIndex, $[39] = gapValue, $[40] = getItemKey, $[41] = itemHeight, $[42] = items, $[43] = renderItem, $[44] = toIndex, $[45] = t132;
-    } else
-      t132 = $[45];
-    t12 = t132;
-  }
-  const children = t12;
-  let t13, t14;
-  $[52] !== height ? (t14 = {
+  $[26] !== fromIndex || $[27] !== gap || $[28] !== gapValue || $[29] !== getItemKey || $[30] !== itemHeight || $[31] !== items || $[32] !== renderItem || $[33] !== toIndex ? (t12 = {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight
+  }, $[26] = fromIndex, $[27] = gap, $[28] = gapValue, $[29] = getItemKey, $[30] = itemHeight, $[31] = items, $[32] = renderItem, $[33] = toIndex, $[34] = t12) : t12 = $[34];
+  const children = useChildren(t12);
+  let t13;
+  $[35] !== height ? (t13 = {
     height
-  }, $[52] = height, $[53] = t14) : t14 = $[53], t13 = t14;
+  }, $[35] = height, $[36] = t13) : t13 = $[36];
   const wrapperStyle = t13;
+  let t14;
+  $[37] !== children || $[38] !== wrapperStyle ? (t14 = /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[37] = children, $[38] = wrapperStyle, $[39] = t14) : t14 = $[39];
   let t15;
-  $[54] !== children || $[55] !== wrapperStyle ? (t15 = /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[54] = children, $[55] = wrapperStyle, $[56] = t15) : t15 = $[56];
-  let t16;
-  return $[57] !== as || $[58] !== rest || $[59] !== t15 ? (t16 = /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t15 }), $[57] = as, $[58] = rest, $[59] = t15, $[60] = t16) : t16 = $[60], t16;
+  return $[40] !== as || $[41] !== rest || $[42] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t14 }), $[40] = as, $[41] = rest, $[42] = t14, $[43] = t15) : t15 = $[43], t15;
+}
+function useChildren(t0) {
+  const $ = c(32), {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight
+  } = t0;
+  if (!renderItem || items.length === 0)
+    return null;
+  if (itemHeight === -1) {
+    let t12;
+    $[0] !== setItemHeight ? (t12 = (el) => {
+      el && setItemHeight(el.offsetHeight);
+    }, $[0] = setItemHeight, $[1] = t12) : t12 = $[1];
+    let t2;
+    $[2] !== items[0] || $[3] !== renderItem ? (t2 = renderItem(items[0]), $[2] = items[0], $[3] = renderItem, $[4] = t2) : t2 = $[4];
+    let t3;
+    $[5] !== t12 || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { ref: t12, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t2 }, 0), $[5] = t12, $[6] = t2, $[7] = t3) : t3 = $[7];
+    let t4;
+    $[8] !== setGapValue ? (t4 = (el_0) => {
+      el_0 && setGapValue(el_0.offsetHeight);
+    }, $[8] = setGapValue, $[9] = t4) : t4 = $[9];
+    const t5 = vars.space[gap];
+    let t6;
+    $[10] !== t5 ? (t6 = {
+      height: t5
+    }, $[10] = t5, $[11] = t6) : t6 = $[11];
+    let t7;
+    $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { ref: t4, style: t6 }), $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14];
+    let t8;
+    return $[15] !== t3 || $[16] !== t7 ? (t8 = [/* @__PURE__ */ jsxs(Fragment, { children: [
+      t3,
+      t7
+    ] })], $[15] = t3, $[16] = t7, $[17] = t8) : t8 = $[17], t8;
+  }
+  let t1;
+  if ($[18] !== fromIndex || $[19] !== gapValue || $[20] !== getItemKey || $[21] !== itemHeight || $[22] !== items || $[23] !== renderItem || $[24] !== toIndex) {
+    let t2;
+    $[26] !== fromIndex || $[27] !== gapValue || $[28] !== getItemKey || $[29] !== itemHeight || $[30] !== renderItem ? (t2 = (item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+      return /* @__PURE__ */ jsx(Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
+        top: itemIndex * (itemHeight + gapValue)
+      }, children: node }, key2);
+    }, $[26] = fromIndex, $[27] = gapValue, $[28] = getItemKey, $[29] = itemHeight, $[30] = renderItem, $[31] = t2) : t2 = $[31], t1 = items.slice(fromIndex, toIndex).map(t2), $[18] = fromIndex, $[19] = gapValue, $[20] = getItemKey, $[21] = itemHeight, $[22] = items, $[23] = renderItem, $[24] = toIndex, $[25] = t1;
+  } else
+    t1 = $[25];
+  return t1;
 }
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
@@ -3320,43 +3775,59 @@ function _temp$3() {
 }
 const DEFAULT_LABEL_ELEMENT = "div";
 function Label(props) {
-  const $ = c(26);
-  let align, children, className, rest, t0, t1, t2, t3, textOverflowProp;
+  const $ = c(42);
+  let align, children, className, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, rest, t0, t1, t2, t3, textOverflowProp;
   $[0] !== props ? ({
     align,
     as: t0,
     children,
     className,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted: t1,
     size: t2,
     textOverflow: textOverflowProp,
     weight: t3,
     ...rest
-  } = props, $[0] = props, $[1] = align, $[2] = children, $[3] = className, $[4] = rest, $[5] = t0, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], rest = $[4], t0 = $[5], t1 = $[6], t2 = $[7], t3 = $[8], textOverflowProp = $[9]);
+  } = props, $[0] = props, $[1] = align, $[2] = children, $[3] = className, $[4] = margin, $[5] = marginBottom, $[6] = marginLeft, $[7] = marginRight, $[8] = marginTop, $[9] = marginX, $[10] = marginY, $[11] = maxWidth, $[12] = rest, $[13] = t0, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], margin = $[4], marginBottom = $[5], marginLeft = $[6], marginRight = $[7], marginTop = $[8], marginX = $[9], marginY = $[10], maxWidth = $[11], rest = $[12], t0 = $[13], t1 = $[14], t2 = $[15], t3 = $[16], textOverflowProp = $[17]);
   const Element2 = t0 === void 0 ? DEFAULT_LABEL_ELEMENT : t0, muted = t1 === void 0 ? !1 : t1, size2 = t2 === void 0 ? 1 : t2, weight = t3 === void 0 ? "regular" : t3;
   let t4;
-  $[10] !== align || $[11] !== className || $[12] !== muted || $[13] !== size2 || $[14] !== weight ? (t4 = label({
+  $[18] !== align || $[19] !== className || $[20] !== margin || $[21] !== marginBottom || $[22] !== marginLeft || $[23] !== marginRight || $[24] !== marginTop || $[25] !== marginX || $[26] !== marginY || $[27] !== maxWidth || $[28] !== muted || $[29] !== size2 || $[30] !== weight ? (t4 = label({
     className,
     align,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted,
     size: size2,
     weight
-  }), $[10] = align, $[11] = className, $[12] = muted, $[13] = size2, $[14] = weight, $[15] = t4) : t4 = $[15];
+  }), $[18] = align, $[19] = className, $[20] = margin, $[21] = marginBottom, $[22] = marginLeft, $[23] = marginRight, $[24] = marginTop, $[25] = marginX, $[26] = marginY, $[27] = maxWidth, $[28] = muted, $[29] = size2, $[30] = weight, $[31] = t4) : t4 = $[31];
   let t5;
-  $[16] !== textOverflowProp ? (t5 = textOverflow({
+  $[32] !== textOverflowProp ? (t5 = textOverflow({
     textOverflow: textOverflowProp
-  }), $[16] = textOverflowProp, $[17] = t5) : t5 = $[17];
+  }), $[32] = textOverflowProp, $[33] = t5) : t5 = $[33];
   let t6;
-  $[18] !== children || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsx("span", { className: t5, children }), $[18] = children, $[19] = t5, $[20] = t6) : t6 = $[20];
+  $[34] !== children || $[35] !== t5 ? (t6 = /* @__PURE__ */ jsx("span", { className: t5, children }), $[34] = children, $[35] = t5, $[36] = t6) : t6 = $[36];
   let t7;
-  return $[21] !== Element2 || $[22] !== rest || $[23] !== t4 || $[24] !== t6 ? (t7 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Label", ...rest, className: t4, children: t6 }), $[21] = Element2, $[22] = rest, $[23] = t4, $[24] = t6, $[25] = t7) : t7 = $[25], t7;
+  return $[37] !== Element2 || $[38] !== rest || $[39] !== t4 || $[40] !== t6 ? (t7 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Label", ...rest, className: t4, children: t6 }), $[37] = Element2, $[38] = rest, $[39] = t4, $[40] = t6, $[41] = t7) : t7 = $[41], t7;
 }
 const DEFAULT_AVATAR_ELEMENT = "span";
 function Avatar(props) {
-  const $ = c(50), t0 = props;
-  let __unstable_hideInnerStroke, animateArrowFrom, arrowPositionProp, className, initials, onImageLoadError, rest, src, t1, t2, t3, title;
+  const $ = c(52), t0 = props;
+  let animateArrowFrom, arrowPositionProp, className, hideInnerStroke, initials, onImageLoadError, rest, src, t1, t2, t3, title;
   $[0] !== t0 ? ({
-    __unstable_hideInnerStroke,
+    __unstable_hideInnerStroke: hideInnerStroke,
     as: t1,
     className,
     color: t2,
@@ -3368,53 +3839,56 @@ function Avatar(props) {
     animateArrowFrom,
     size: t3,
     ...rest
-  } = t0, $[0] = t0, $[1] = __unstable_hideInnerStroke, $[2] = animateArrowFrom, $[3] = arrowPositionProp, $[4] = className, $[5] = initials, $[6] = onImageLoadError, $[7] = rest, $[8] = src, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = title) : (__unstable_hideInnerStroke = $[1], animateArrowFrom = $[2], arrowPositionProp = $[3], className = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], title = $[12]);
-  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t3 === void 0 ? 1 : t3, size2 = useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
-  let t4, t5;
-  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t4 = () => {
+  } = t0, $[0] = t0, $[1] = animateArrowFrom, $[2] = arrowPositionProp, $[3] = className, $[4] = hideInnerStroke, $[5] = initials, $[6] = onImageLoadError, $[7] = rest, $[8] = src, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = title) : (animateArrowFrom = $[1], arrowPositionProp = $[2], className = $[3], hideInnerStroke = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], title = $[12]);
+  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t3 === void 0 ? 1 : t3;
+  let t4;
+  $[13] !== sizeProp ? (t4 = _getResponsiveProp(sizeProp), $[13] = sizeProp, $[14] = t4) : t4 = $[14];
+  const size2 = t4, [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
+  let t5, t6;
+  $[15] !== arrowPosition || $[16] !== arrowPositionProp ? (t5 = () => {
     if (arrowPosition === arrowPositionProp)
       return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, t5 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t4, $[16] = t5) : (t4 = $[15], t5 = $[16]), useEffect(t4, t5);
-  let t6, t7;
-  $[17] !== src ? (t6 = () => {
+  }, t6 = [arrowPosition, arrowPositionProp], $[15] = arrowPosition, $[16] = arrowPositionProp, $[17] = t5, $[18] = t6) : (t5 = $[17], t6 = $[18]), useEffect(t5, t6);
+  let t7, t8;
+  $[19] !== src ? (t7 = () => {
     src && setImageError(!1);
-  }, t7 = [src], $[17] = src, $[18] = t6, $[19] = t7) : (t6 = $[18], t7 = $[19]), useEffect(t6, t7);
-  let t8;
-  $[20] !== onImageLoadError ? (t8 = () => {
+  }, t8 = [src], $[19] = src, $[20] = t7, $[21] = t8) : (t7 = $[20], t8 = $[21]), useEffect(t7, t8);
+  let t9;
+  $[22] !== onImageLoadError ? (t9 = () => {
     setImageError(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, $[20] = onImageLoadError, $[21] = t8) : t8 = $[21];
-  const handleImageError = t8;
-  let t9, t10;
-  $[22] !== size2 ? (t10 = Object.values(size2).map(_temp$2), $[22] = size2, $[23] = t10) : t10 = $[23], t9 = t10;
-  const initialsSize = t9, t11 = __unstable_hideInnerStroke ? "" : void 0;
+  }, $[22] = onImageLoadError, $[23] = t9) : t9 = $[23];
+  const handleImageError = t9;
+  let t10;
+  $[24] !== size2 ? (t10 = Object.values(size2).map(_temp$2), $[24] = size2, $[25] = t10) : t10 = $[25];
+  const initialsSize = t10, t11 = hideInnerStroke ? "" : void 0;
   let t12;
-  $[24] !== className || $[25] !== color || $[26] !== sizeProp ? (t12 = avatar({
+  $[26] !== className || $[27] !== color || $[28] !== sizeProp ? (t12 = avatar({
     className,
     color,
     size: sizeProp
-  }), $[24] = className, $[25] = color, $[26] = sizeProp, $[27] = t12) : t12 = $[27];
+  }), $[26] = className, $[27] = color, $[28] = sizeProp, $[29] = t12) : t12 = $[29];
   const t13 = imageError ? "" : void 0;
   let t14;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = avatarArrow(), $[28] = t14) : t14 = $[28];
+  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t14 = avatarArrow(), $[30] = t14) : t14 = $[30];
   let t15;
-  $[29] !== color ? (t15 = /* @__PURE__ */ jsx("span", { className: t14, children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ 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 }) }) }), $[29] = color, $[30] = t15) : t15 = $[30];
+  $[31] !== color ? (t15 = /* @__PURE__ */ jsx("span", { className: t14, children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ 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 }) }) }), $[31] = color, $[32] = t15) : t15 = $[32];
   let t16;
-  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t16 = avatarInitials(), $[31] = t16) : t16 = $[31];
+  $[33] === Symbol.for("react.memo_cache_sentinel") ? (t16 = avatarInitials(), $[33] = t16) : t16 = $[33];
   let t17;
-  $[32] !== initials || $[33] !== initialsSize ? (t17 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t16, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[32] = initials, $[33] = initialsSize, $[34] = t17) : t17 = $[34];
+  $[34] !== initials || $[35] !== initialsSize ? (t17 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t16, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[34] = initials, $[35] = initialsSize, $[36] = t17) : t17 = $[36];
   let t18;
-  $[35] !== handleImageError || $[36] !== initials || $[37] !== src ? (t18 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
+  $[37] !== handleImageError || $[38] !== initials || $[39] !== src ? (t18 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
     /* @__PURE__ */ jsx("img", { alt: initials, onError: handleImageError, src }),
     /* @__PURE__ */ jsx("span", { className: avatarImageOutline() })
-  ] }), $[35] = handleImageError, $[36] = initials, $[37] = src, $[38] = t18) : t18 = $[38];
+  ] }), $[37] = handleImageError, $[38] = initials, $[39] = src, $[40] = t18) : t18 = $[40];
   let t19;
-  return $[39] !== Element2 || $[40] !== arrowPosition || $[41] !== rest || $[42] !== t11 || $[43] !== t12 || $[44] !== t13 || $[45] !== t15 || $[46] !== t17 || $[47] !== t18 || $[48] !== title ? (t19 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t11, "data-ui": "Avatar", ...rest, "aria-label": title, className: t12, "data-arrow-position": arrowPosition, "data-image-error": t13, title, children: [
+  return $[41] !== Element2 || $[42] !== arrowPosition || $[43] !== rest || $[44] !== t11 || $[45] !== t12 || $[46] !== t13 || $[47] !== t15 || $[48] !== t17 || $[49] !== t18 || $[50] !== title ? (t19 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t11, "data-ui": "Avatar", ...rest, "aria-label": title, className: t12, "data-arrow-position": arrowPosition, "data-image-error": t13, title, children: [
     t15,
     t17,
     t18
-  ] }), $[39] = Element2, $[40] = arrowPosition, $[41] = rest, $[42] = t11, $[43] = t12, $[44] = t13, $[45] = t15, $[46] = t17, $[47] = t18, $[48] = title, $[49] = t19) : t19 = $[49], t19;
+  ] }), $[41] = Element2, $[42] = arrowPosition, $[43] = rest, $[44] = t11, $[45] = t12, $[46] = t13, $[47] = t15, $[48] = t17, $[49] = t18, $[50] = title, $[51] = t19) : t19 = $[51], t19;
 }
 function _temp$2(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
@@ -3431,25 +3905,25 @@ function AvatarCounter(props) {
     ...rest
   } = t0, $[0] = t0, $[1] = className, $[2] = count, $[3] = rest, $[4] = t1, $[5] = t2) : (className = $[1], count = $[2], rest = $[3], t1 = $[4], t2 = $[5]);
   const as = t1 === void 0 ? DEFAULT_AVATAR_COUNTER_ELEMENT : t1, size2 = useResponsiveProp(t2 === void 0 ? 1 : t2);
-  let t3, t4;
-  $[6] !== size2 ? (t4 = Object.values(size2).map(_temp$1), $[6] = size2, $[7] = t4) : t4 = $[7], t3 = t4;
+  let t3;
+  $[6] !== size2 ? (t3 = Object.values(size2).map(_temp$1), $[6] = size2, $[7] = t3) : t3 = $[7];
   const labelSize = t3;
-  let t5;
-  $[8] !== className || $[9] !== size2 ? (t5 = avatarCounter({
+  let t4;
+  $[8] !== className || $[9] !== size2 ? (t4 = avatarCounter({
     className,
     size: size2
-  }), $[8] = className, $[9] = size2, $[10] = t5) : t5 = $[10];
+  }), $[8] = className, $[9] = size2, $[10] = t4) : t4 = $[10];
+  let t5;
+  $[11] !== count || $[12] !== labelSize ? (t5 = /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: labelSize, weight: "medium", children: count }), $[11] = count, $[12] = labelSize, $[13] = t5) : t5 = $[13];
   let t6;
-  $[11] !== count || $[12] !== labelSize ? (t6 = /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: labelSize, weight: "medium", children: count }), $[11] = count, $[12] = labelSize, $[13] = t6) : t6 = $[13];
-  let t7;
-  return $[14] !== as || $[15] !== rest || $[16] !== t5 || $[17] !== t6 ? (t7 = /* @__PURE__ */ jsx(Box, { "data-ui": "AvatarCounter", ...rest, alignItems: "center", as, className: t5, display: "flex", flex: "none", justifyContent: "center", paddingX: 2, sizing: "border", children: t6 }), $[14] = as, $[15] = rest, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18], t7;
+  return $[14] !== as || $[15] !== rest || $[16] !== t4 || $[17] !== t5 ? (t6 = /* @__PURE__ */ jsx(Box, { "data-ui": "AvatarCounter", ...rest, alignItems: "center", as, className: t4, display: "flex", flex: "none", justifyContent: "center", paddingX: 2, sizing: "border", children: t5 }), $[14] = as, $[15] = rest, $[16] = t4, $[17] = t5, $[18] = t6) : t6 = $[18], t6;
 }
 function _temp$1(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
 }
 const DEFAULT_AVATAR_STACK_ELEMENT = "span";
 function AvatarStack(props) {
-  const $ = c(20), t0 = props;
+  const $ = c(27), t0 = props;
   let childrenProp, className, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -3465,18 +3939,22 @@ function AvatarStack(props) {
     className,
     size: size2
   }), $[7] = className, $[8] = size2, $[9] = t6) : t6 = $[9];
-  const t7 = "flex", t8 = "flex-start", t9 = len === 0 && /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }), t10 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 });
+  const t7 = "flex", t8 = "flex-start";
+  let t9;
+  $[10] !== len || $[11] !== size2 ? (t9 = len === 0 && /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }), $[10] = len, $[11] = size2, $[12] = t9) : t9 = $[12];
+  let t10;
+  $[13] !== extraCount || $[14] !== len || $[15] !== size2 ? (t10 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }), $[13] = extraCount, $[14] = len, $[15] = size2, $[16] = t10) : t10 = $[16];
   let t11;
-  $[10] !== size2 ? (t11 = (child, childIndex) => /* @__PURE__ */ jsx(Fragment$1, { children: cloneElement(child, {
+  $[17] !== size2 ? (t11 = (child, childIndex) => /* @__PURE__ */ jsx(Fragment$1, { children: cloneElement(child, {
     size: size2
-  }) }, String(childIndex)), $[10] = size2, $[11] = t11) : t11 = $[11];
+  }) }, String(childIndex)), $[17] = size2, $[18] = t11) : t11 = $[18];
   const t12 = visibleChildren.map(t11);
   let t13;
-  return $[12] !== T0 || $[13] !== as || $[14] !== rest || $[15] !== t10 || $[16] !== t12 || $[17] !== t6 || $[18] !== t9 ? (t13 = /* @__PURE__ */ jsxs(T0, { "data-ui": t4, ...rest, alignItems: t5, as, className: t6, display: t7, justifyContent: t8, children: [
+  return $[19] !== T0 || $[20] !== as || $[21] !== rest || $[22] !== t10 || $[23] !== t12 || $[24] !== t6 || $[25] !== t9 ? (t13 = /* @__PURE__ */ jsxs(T0, { "data-ui": t4, ...rest, alignItems: t5, as, className: t6, display: t7, justifyContent: t8, children: [
     t9,
     t10,
     t12
-  ] }), $[12] = T0, $[13] = as, $[14] = rest, $[15] = t10, $[16] = t12, $[17] = t6, $[18] = t9, $[19] = t13) : t13 = $[19], t13;
+  ] }), $[19] = T0, $[20] = as, $[21] = rest, $[22] = t10, $[23] = t12, $[24] = t6, $[25] = t9, $[26] = t13) : t13 = $[26], t13;
 }
 const DEFAULT_BADGE_ELEMENT = "span";
 function Badge(props) {
@@ -3546,69 +4024,101 @@ function Checkbox(props) {
     t11
   ] }), $[25] = style, $[26] = t10, $[27] = t5, $[28] = t12) : t12 = $[28], t12;
 }
-const LazyRefractor = lazy(() => import("./_chunks-es/refractor.js")), DEFAULT_CODE_ELEMENT = "pre";
+const LazyRefractor = lazy(() => import("./_chunks-es/Refractor.js")), DEFAULT_CODE_ELEMENT = "pre";
 function Code(props) {
-  const $ = c(25), t0 = props;
-  let children, className, languageProp, rest, t1, t2, t3;
+  const $ = c(41), t0 = props;
+  let children, className, languageProp, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
     children,
     className,
     language: languageProp,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     size: t2,
     weight: t3,
     ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = languageProp, $[4] = rest, $[5] = t1, $[6] = t2, $[7] = t3) : (children = $[1], className = $[2], languageProp = $[3], rest = $[4], t1 = $[5], t2 = $[6], t3 = $[7]);
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = languageProp, $[4] = margin, $[5] = marginBottom, $[6] = marginLeft, $[7] = marginRight, $[8] = marginTop, $[9] = marginX, $[10] = marginY, $[11] = maxWidth, $[12] = rest, $[13] = t1, $[14] = t2, $[15] = t3) : (children = $[1], className = $[2], languageProp = $[3], margin = $[4], marginBottom = $[5], marginLeft = $[6], marginRight = $[7], marginTop = $[8], marginX = $[9], marginY = $[10], maxWidth = $[11], rest = $[12], t1 = $[13], t2 = $[14], t3 = $[15]);
   const Element2 = t1 === void 0 ? DEFAULT_CODE_ELEMENT : t1, size2 = t2 === void 0 ? 2 : t2, weight = t3 === void 0 ? "regular" : t3, language = typeof languageProp == "string" ? languageProp : void 0;
   let t4;
-  $[8] !== className || $[9] !== size2 || $[10] !== weight ? (t4 = code({
+  $[16] !== className || $[17] !== margin || $[18] !== marginBottom || $[19] !== marginLeft || $[20] !== marginRight || $[21] !== marginTop || $[22] !== marginX || $[23] !== marginY || $[24] !== maxWidth || $[25] !== size2 || $[26] !== weight ? (t4 = code({
     className,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     size: size2,
     weight
-  }), $[8] = className, $[9] = size2, $[10] = weight, $[11] = t4) : t4 = $[11];
+  }), $[16] = className, $[17] = margin, $[18] = marginBottom, $[19] = marginLeft, $[20] = marginRight, $[21] = marginTop, $[22] = marginX, $[23] = marginY, $[24] = maxWidth, $[25] = size2, $[26] = weight, $[27] = t4) : t4 = $[27];
   let t5;
-  $[12] !== children ? (t5 = /* @__PURE__ */ jsx("code", { children }), $[12] = children, $[13] = t5) : t5 = $[13];
+  $[28] !== children ? (t5 = /* @__PURE__ */ jsx("code", { children }), $[28] = children, $[29] = t5) : t5 = $[29];
   let t6;
-  $[14] !== children || $[15] !== language ? (t6 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[14] = children, $[15] = language, $[16] = t6) : t6 = $[16];
+  $[30] !== children || $[31] !== language ? (t6 = /* @__PURE__ */ jsx(LazyRefractor, { language, value: children }), $[30] = children, $[31] = language, $[32] = t6) : t6 = $[32];
   let t7;
-  $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsx(Suspense, { fallback: t5, children: t6 }), $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19];
+  $[33] !== t5 || $[34] !== t6 ? (t7 = /* @__PURE__ */ jsx(Suspense, { fallback: t5, children: t6 }), $[33] = t5, $[34] = t6, $[35] = t7) : t7 = $[35];
   let t8;
-  return $[20] !== Element2 || $[21] !== rest || $[22] !== t4 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Code", ...rest, className: t4, children: t7 }), $[20] = Element2, $[21] = rest, $[22] = t4, $[23] = t7, $[24] = t8) : t8 = $[24], t8;
+  return $[36] !== Element2 || $[37] !== rest || $[38] !== t4 || $[39] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Code", ...rest, className: t4, children: t7 }), $[36] = Element2, $[37] = rest, $[38] = t4, $[39] = t7, $[40] = t8) : t8 = $[40], t8;
 }
 const DEFAULT_HEADING_ELEMENT = "div";
 function Heading(props) {
-  const $ = c(28), t0 = props;
-  let align, children, className, flex, rest, t1, t2, t3, t4, textOverflowProp;
+  const $ = c(44), t0 = props;
+  let align, children, className, flex, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxWidth, rest, t1, t2, t3, t4, textOverflowProp;
   $[0] !== t0 ? ({
     align,
     as: t1,
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted: t2,
     size: t3,
     textOverflow: textOverflowProp,
     weight: t4,
     ...rest
-  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], textOverflowProp = $[10]);
+  } = t0, $[0] = t0, $[1] = align, $[2] = children, $[3] = className, $[4] = flex, $[5] = margin, $[6] = marginBottom, $[7] = marginLeft, $[8] = marginRight, $[9] = marginTop, $[10] = marginX, $[11] = marginY, $[12] = maxWidth, $[13] = rest, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = textOverflowProp) : (align = $[1], children = $[2], className = $[3], flex = $[4], margin = $[5], marginBottom = $[6], marginLeft = $[7], marginRight = $[8], marginTop = $[9], marginX = $[10], marginY = $[11], maxWidth = $[12], rest = $[13], t1 = $[14], t2 = $[15], t3 = $[16], t4 = $[17], textOverflowProp = $[18]);
   const Element2 = t1 === void 0 ? DEFAULT_HEADING_ELEMENT : t1, muted = t2 === void 0 ? !1 : t2, size2 = t3 === void 0 ? 2 : t3, weight = t4 === void 0 ? "regular" : t4;
   let t5;
-  $[11] !== align || $[12] !== className || $[13] !== flex || $[14] !== muted || $[15] !== size2 || $[16] !== weight ? (t5 = heading({
+  $[19] !== align || $[20] !== className || $[21] !== flex || $[22] !== margin || $[23] !== marginBottom || $[24] !== marginLeft || $[25] !== marginRight || $[26] !== marginTop || $[27] !== marginX || $[28] !== marginY || $[29] !== maxWidth || $[30] !== muted || $[31] !== size2 || $[32] !== weight ? (t5 = heading({
     className,
     align,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     muted,
     size: size2,
     weight
-  }), $[11] = align, $[12] = className, $[13] = flex, $[14] = muted, $[15] = size2, $[16] = weight, $[17] = t5) : t5 = $[17];
+  }), $[19] = align, $[20] = className, $[21] = flex, $[22] = margin, $[23] = marginBottom, $[24] = marginLeft, $[25] = marginRight, $[26] = marginTop, $[27] = marginX, $[28] = marginY, $[29] = maxWidth, $[30] = muted, $[31] = size2, $[32] = weight, $[33] = t5) : t5 = $[33];
   let t6;
-  $[18] !== textOverflowProp ? (t6 = textOverflow({
+  $[34] !== textOverflowProp ? (t6 = textOverflow({
     textOverflow: textOverflowProp
-  }), $[18] = textOverflowProp, $[19] = t6) : t6 = $[19];
+  }), $[34] = textOverflowProp, $[35] = t6) : t6 = $[35];
   let t7;
-  $[20] !== children || $[21] !== t6 ? (t7 = /* @__PURE__ */ jsx("span", { className: t6, children }), $[20] = children, $[21] = t6, $[22] = t7) : t7 = $[22];
+  $[36] !== children || $[37] !== t6 ? (t7 = /* @__PURE__ */ jsx("span", { className: t6, children }), $[36] = children, $[37] = t6, $[38] = t7) : t7 = $[38];
   let t8;
-  return $[23] !== Element2 || $[24] !== rest || $[25] !== t5 || $[26] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Heading", ...rest, className: t5, children: t7 }), $[23] = Element2, $[24] = rest, $[25] = t5, $[26] = t7, $[27] = t8) : t8 = $[27], t8;
+  return $[39] !== Element2 || $[40] !== rest || $[41] !== t5 || $[42] !== t7 ? (t8 = /* @__PURE__ */ jsx(Element2, { "data-ui": "Heading", ...rest, className: t5, children: t7 }), $[39] = Element2, $[40] = rest, $[41] = t5, $[42] = t7, $[43] = t8) : t8 = $[43], t8;
 }
 const DEFAULT_INLINE_ELEMENT = "div";
 function Inline(props) {
@@ -3653,90 +4163,89 @@ function Radio(props) {
   let t9;
   $[20] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx("span", { className: radioPresentation() }), $[20] = t9) : t9 = $[20];
   let t10;
-  return $[21] !== style || $[22] !== t3 || $[23] !== t8 ? (t10 = /* @__PURE__ */ jsxs("div", { className: t3, "data-ui": "Radio", style, children: [
+  return $[21] !== style || $[22] !== t3 || $[23] !== t8 ? (t10 = /* @__PURE__ */ jsxs("span", { className: t3, "data-ui": "Radio", style, children: [
     t8,
     t9
   ] }), $[21] = style, $[22] = t3, $[23] = t8, $[24] = t10) : t10 = $[24], t10;
 }
 const DEFAULT_SELECT_ELEMENT = "select";
 function Select(props) {
-  const $ = c(37), t0 = props;
-  let children, customValidity, disabled, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6;
+  const $ = c(41), t0 = props;
+  let children, customValidity, disabled, flex, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
   $[0] !== t0 ? ({
     as: t1,
     border: t2,
     children,
     customValidity,
     disabled,
+    flex,
     fontSize: t3,
     gap: t4,
     padding: t5,
     radius: t6,
     readOnly,
     ref: forwardedRef,
+    width: t7,
     ...rest
-  } = t0, $[0] = t0, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = forwardedRef, $[5] = readOnly, $[6] = rest, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4, $[11] = t5, $[12] = t6) : (children = $[1], customValidity = $[2], disabled = $[3], forwardedRef = $[4], readOnly = $[5], rest = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10], t5 = $[11], t6 = $[12]);
-  const Element2 = t1 === void 0 ? DEFAULT_SELECT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, gap = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 1 : t6, ref = useRef(null);
-  let t7;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[13] = t7) : t7 = $[13], useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
+  } = t0, $[0] = t0, $[1] = children, $[2] = customValidity, $[3] = disabled, $[4] = flex, $[5] = forwardedRef, $[6] = readOnly, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = t6, $[14] = t7) : (children = $[1], customValidity = $[2], disabled = $[3], flex = $[4], forwardedRef = $[5], readOnly = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], t6 = $[13], t7 = $[14]);
+  const Element2 = t1 === void 0 ? DEFAULT_SELECT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, gap = t4 === void 0 ? 2 : t4, padding = t5 === void 0 ? 3 : t5, radius = t6 === void 0 ? 1 : t6, width = t7 === void 0 ? "fill" : t7, ref = useRef(null);
   let t8;
-  $[14] !== border || $[15] !== fontSize || $[16] !== gap || $[17] !== padding || $[18] !== radius ? (t8 = select({
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[15] = t8) : t8 = $[15], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
+  let t9;
+  $[16] !== border || $[17] !== flex || $[18] !== fontSize || $[19] !== gap || $[20] !== padding || $[21] !== radius || $[22] !== width ? (t9 = select({
     border,
     fontSize,
+    flex,
     gap,
     padding,
-    radius
-  }), $[14] = border, $[15] = fontSize, $[16] = gap, $[17] = padding, $[18] = radius, $[19] = t8) : t8 = $[19];
-  let t9;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t9 = _inputElement(), $[20] = t9) : t9 = $[20];
-  const t10 = disabled || readOnly;
-  let t11;
-  $[21] !== Element2 || $[22] !== children || $[23] !== rest || $[24] !== t10 ? (t11 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t9, disabled: t10, ref, children }), $[21] = Element2, $[22] = children, $[23] = rest, $[24] = t10, $[25] = t11) : t11 = $[25];
+    radius,
+    width
+  }), $[16] = border, $[17] = flex, $[18] = fontSize, $[19] = gap, $[20] = padding, $[21] = radius, $[22] = width, $[23] = t9) : t9 = $[23];
+  let t10;
+  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _inputElement(), $[24] = t10) : t10 = $[24];
+  const t11 = disabled || readOnly;
   let t12;
-  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t12 = selectPresentation(), $[26] = t12) : t12 = $[26];
+  $[25] !== Element2 || $[26] !== children || $[27] !== rest || $[28] !== t11 ? (t12 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t10, disabled: t11, ref, children }), $[25] = Element2, $[26] = children, $[27] = rest, $[28] = t11, $[29] = t12) : t12 = $[29];
   let t13;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[27] = t13) : t13 = $[27];
+  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t13 = selectPresentation(), $[30] = t13) : t13 = $[30];
   let t14;
-  $[28] !== fontSize ? (t14 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t13 }), $[28] = fontSize, $[29] = t14) : t14 = $[29];
+  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(ChevronDownIcon, {}), $[31] = t14) : t14 = $[31];
   let t15;
-  $[30] !== padding || $[31] !== t14 ? (t15 = /* @__PURE__ */ jsx("span", { className: t12, children: /* @__PURE__ */ jsx(Box, { as: "span", display: "inline-block", padding, children: t14 }) }), $[30] = padding, $[31] = t14, $[32] = t15) : t15 = $[32];
+  $[32] !== fontSize ? (t15 = /* @__PURE__ */ jsx(Text, { size: fontSize, children: t14 }), $[32] = fontSize, $[33] = t15) : t15 = $[33];
   let t16;
-  return $[33] !== t11 || $[34] !== t15 || $[35] !== t8 ? (t16 = /* @__PURE__ */ jsxs("div", { "data-ui": "Select", className: t8, "data-icon-right": "", children: [
-    t11,
-    t15
-  ] }), $[33] = t11, $[34] = t15, $[35] = t8, $[36] = t16) : t16 = $[36], t16;
+  $[34] !== padding || $[35] !== t15 ? (t16 = /* @__PURE__ */ jsx("span", { className: t13, children: /* @__PURE__ */ jsx(Box, { as: "span", display: "inline-block", padding, children: t15 }) }), $[34] = padding, $[35] = t15, $[36] = t16) : t16 = $[36];
+  let t17;
+  return $[37] !== t12 || $[38] !== t16 || $[39] !== t9 ? (t17 = /* @__PURE__ */ jsxs("span", { "data-ui": "Select", className: t9, "data-icon-right": "", children: [
+    t12,
+    t16
+  ] }), $[37] = t12, $[38] = t16, $[39] = t9, $[40] = t17) : t17 = $[40], t17;
 }
 const DEFAULT_SKELETON_ELEMENT = "div";
 function Skeleton(props) {
-  const $ = c(18), t0 = props;
-  let className, delay, rest, t1, t2;
-  $[0] !== t0 ? ({
-    as: t1,
-    animated: t2,
+  const $ = c(9), {
+    as: t0,
+    animated: t1,
     className,
     delay,
     ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = delay, $[3] = rest, $[4] = t1, $[5] = t2) : (className = $[1], delay = $[2], rest = $[3], t1 = $[4], t2 = $[5]);
-  const As = t1 === void 0 ? DEFAULT_SKELETON_ELEMENT : t1, animated = t2 === void 0 ? !1 : t2, [visible, setVisible] = useState(!delay);
-  let t3, t4;
-  $[6] !== delay ? (t3 = () => {
+  } = props, As = t0 === void 0 ? DEFAULT_SKELETON_ELEMENT : t0, animated = t1 === void 0 ? !1 : t1, [visible, setVisible] = useState(!delay);
+  let t2, t3;
+  $[0] !== delay ? (t2 = () => {
     if (!delay)
-      return setVisible(!0);
+      return;
     const timeout = setTimeout(() => {
       setVisible(!0);
     }, delay);
     return () => {
       clearTimeout(timeout);
     };
-  }, t4 = [delay], $[6] = delay, $[7] = t3, $[8] = t4) : (t3 = $[7], t4 = $[8]), useEffect(t3, t4);
-  let t5;
-  $[9] !== className || $[10] !== rest ? (t5 = skeleton({
+  }, t3 = [delay], $[0] = delay, $[1] = t2, $[2] = t3) : (t2 = $[1], t3 = $[2]), useEffect(t2, t3);
+  const t4 = "Skeleton", t5 = skeleton({
     className,
     ...rest
-  }), $[9] = className, $[10] = rest, $[11] = t5) : t5 = $[11];
-  const t6 = animated ? "" : void 0, t7 = visible ? "" : void 0;
+  }), t6 = animated ? "" : void 0, t7 = !delay || visible ? "" : void 0;
   let t8;
-  return $[12] !== As || $[13] !== rest || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 ? (t8 = /* @__PURE__ */ jsx(As, { "data-ui": "Skeleton", ...rest, className: t5, "data-animated": t6, "data-visible": t7 }), $[12] = As, $[13] = rest, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8) : t8 = $[17], t8;
+  return $[3] !== As || $[4] !== rest || $[5] !== t5 || $[6] !== t6 || $[7] !== t7 ? (t8 = /* @__PURE__ */ jsx(As, { "data-ui": t4, ...rest, className: t5, "data-animated": t6, "data-visible": t7 }), $[3] = As, $[4] = rest, $[5] = t5, $[6] = t6, $[7] = t7, $[8] = t8) : t8 = $[8], t8;
 }
 const DEFAULT_CODE_SKELETON_ELEMENT = "div";
 function CodeSkeleton(props) {
@@ -3830,8 +4339,8 @@ function SrOnly(props) {
 }
 const DEFAULT_SWITCH_ELEMENT = "input";
 function Switch(props) {
-  const $ = c(26), t0 = props;
-  let className, disabled, forwardedRef, indeterminate, readOnly, rest, style, t1;
+  const $ = c(24), t0 = props;
+  let className, disabled, forwardedRef, indeterminate, readOnly, rest, t1;
   $[0] !== t0 ? ({
     as: t1,
     className,
@@ -3839,78 +4348,83 @@ function Switch(props) {
     indeterminate,
     readOnly,
     ref: forwardedRef,
-    style,
     ...rest
-  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = forwardedRef, $[4] = indeterminate, $[5] = readOnly, $[6] = rest, $[7] = style, $[8] = t1) : (className = $[1], disabled = $[2], forwardedRef = $[3], indeterminate = $[4], readOnly = $[5], rest = $[6], style = $[7], t1 = $[8]);
+  } = t0, $[0] = t0, $[1] = className, $[2] = disabled, $[3] = forwardedRef, $[4] = indeterminate, $[5] = readOnly, $[6] = rest, $[7] = t1) : (className = $[1], disabled = $[2], forwardedRef = $[3], indeterminate = $[4], readOnly = $[5], rest = $[6], t1 = $[7]);
   const Element2 = t1 === void 0 ? DEFAULT_SWITCH_ELEMENT : t1, ref = useRef(null);
   let t2;
-  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], useImperativeHandle(forwardedRef, t2);
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[8] = t2) : t2 = $[8], useImperativeHandle(forwardedRef, t2);
   let t3, t4;
-  $[10] !== indeterminate ? (t3 = () => {
+  $[9] !== indeterminate ? (t3 = () => {
     ref.current && (ref.current.indeterminate = indeterminate || !1);
-  }, t4 = [indeterminate], $[10] = indeterminate, $[11] = t3, $[12] = t4) : (t3 = $[11], t4 = $[12]), useEffect(t3, t4);
+  }, t4 = [indeterminate], $[9] = indeterminate, $[10] = t3, $[11] = t4) : (t3 = $[10], t4 = $[11]), useEffect(t3, t4);
   let t5;
-  $[13] !== className ? (t5 = _switch({
+  $[12] !== className ? (t5 = _switch({
     className
-  }), $[13] = className, $[14] = t5) : t5 = $[14];
+  }), $[12] = className, $[13] = t5) : t5 = $[13];
   let t6;
-  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = _switchElement(), $[15] = t6) : t6 = $[15];
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t6 = _switchElement(), $[14] = t6) : t6 = $[14];
   const t7 = !disabled && readOnly ? "" : void 0, t8 = disabled || readOnly;
   let t9;
-  $[16] !== Element2 || $[17] !== rest || $[18] !== t7 || $[19] !== t8 ? (t9 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t6, "data-read-only": t7, disabled: t8, type: "checkbox", ref }), $[16] = Element2, $[17] = rest, $[18] = t7, $[19] = t8, $[20] = t9) : t9 = $[20];
+  $[15] !== Element2 || $[16] !== rest || $[17] !== t7 || $[18] !== t8 ? (t9 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t6, "data-read-only": t7, disabled: t8, type: "checkbox", ref }), $[15] = Element2, $[16] = rest, $[17] = t7, $[18] = t8, $[19] = t9) : t9 = $[19];
   let t10;
-  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = /* @__PURE__ */ jsxs("span", { "aria-hidden": !0, className: _switchPresentation(), children: [
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t10 = /* @__PURE__ */ jsxs("span", { "aria-hidden": !0, className: _switchPresentation(), children: [
     /* @__PURE__ */ jsx("span", { className: _switchTrack() }),
     /* @__PURE__ */ jsx("span", { className: _switchThumb() })
-  ] }), $[21] = t10) : t10 = $[21];
+  ] }), $[20] = t10) : t10 = $[20];
   let t11;
-  return $[22] !== style || $[23] !== t5 || $[24] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Box, { className: t5, "data-ui": "Switch", display: "block", position: "relative", style, children: [
+  return $[21] !== t5 || $[22] !== t9 ? (t11 = /* @__PURE__ */ jsxs("span", { className: t5, "data-ui": "Switch", children: [
     t9,
     t10
-  ] }), $[22] = style, $[23] = t5, $[24] = t9, $[25] = t11) : t11 = $[25], t11;
+  ] }), $[21] = t5, $[22] = t9, $[23] = t11) : t11 = $[23], t11;
 }
 const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
 function TextArea(props) {
-  const $ = c(33), t0 = props;
-  let __unstable_disableFocusRing, customValidity, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6, t7;
+  const $ = c(39), t0 = props;
+  let __unstable_disableFocusRing, className, customValidity, flex, forwardedRef, readOnly, rest, t1, t2, t3, t4, t5, t6, t7, width;
   $[0] !== t0 ? ({
     __unstable_disableFocusRing,
     as: t1,
     border: t2,
+    className,
     customValidity,
     disabled: t3,
+    flex,
     fontSize: t4,
     gap: t5,
     padding: t6,
     radius: t7,
     readOnly,
     ref: forwardedRef,
+    width,
     ...rest
-  } = t0, $[0] = t0, $[1] = __unstable_disableFocusRing, $[2] = customValidity, $[3] = forwardedRef, $[4] = readOnly, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3, $[9] = t4, $[10] = t5, $[11] = t6, $[12] = t7) : (__unstable_disableFocusRing = $[1], customValidity = $[2], forwardedRef = $[3], readOnly = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8], t4 = $[9], t5 = $[10], t6 = $[11], t7 = $[12]);
+  } = t0, $[0] = t0, $[1] = __unstable_disableFocusRing, $[2] = className, $[3] = customValidity, $[4] = flex, $[5] = forwardedRef, $[6] = readOnly, $[7] = rest, $[8] = t1, $[9] = t2, $[10] = t3, $[11] = t4, $[12] = t5, $[13] = t6, $[14] = t7, $[15] = width) : (__unstable_disableFocusRing = $[1], className = $[2], customValidity = $[3], flex = $[4], forwardedRef = $[5], readOnly = $[6], rest = $[7], t1 = $[8], t2 = $[9], t3 = $[10], t4 = $[11], t5 = $[12], t6 = $[13], t7 = $[14], width = $[15]);
   const Element2 = t1 === void 0 ? DEFAULT_TEXT_AREA_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, ref = useRef(null);
   let t8;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[13] = t8) : t8 = $[13], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
+  $[16] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => ref.current, $[16] = t8) : t8 = $[16], useImperativeHandle(forwardedRef, t8), useCustomValidity(ref, customValidity);
   let t9;
-  $[14] !== border || $[15] !== fontSize || $[16] !== gap || $[17] !== padding || $[18] !== radius ? (t9 = textArea({
+  $[17] !== border || $[18] !== className || $[19] !== flex || $[20] !== fontSize || $[21] !== gap || $[22] !== padding || $[23] !== radius || $[24] !== width ? (t9 = textArea({
+    className,
     border,
+    flex,
     fontSize,
+    gap,
     padding,
     radius,
-    gap
-  }), $[14] = border, $[15] = fontSize, $[16] = gap, $[17] = padding, $[18] = radius, $[19] = t9) : t9 = $[19];
+    width
+  }), $[17] = border, $[18] = className, $[19] = flex, $[20] = fontSize, $[21] = gap, $[22] = padding, $[23] = radius, $[24] = width, $[25] = t9) : t9 = $[25];
   const t10 = customValidity ? "" : void 0, t11 = !disabled && readOnly ? "" : void 0;
   let t12;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _inputElement(), $[20] = t12) : t12 = $[20];
+  $[26] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _inputElement(), $[26] = t12) : t12 = $[26];
   const t13 = __unstable_disableFocusRing ? "" : void 0;
   let t14;
-  $[21] !== Element2 || $[22] !== disabled || $[23] !== readOnly || $[24] !== rest || $[25] !== t13 ? (t14 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t12, "data-no-focus-ring": t13, disabled, readOnly, ref }), $[21] = Element2, $[22] = disabled, $[23] = readOnly, $[24] = rest, $[25] = t13, $[26] = t14) : t14 = $[26];
+  $[27] !== Element2 || $[28] !== disabled || $[29] !== readOnly || $[30] !== rest || $[31] !== t13 ? (t14 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t12, "data-no-focus-ring": t13, disabled, readOnly, ref }), $[27] = Element2, $[28] = disabled, $[29] = readOnly, $[30] = rest, $[31] = t13, $[32] = t14) : t14 = $[32];
   let t15;
-  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx("span", { className: _inputPresentation() }), $[27] = t15) : t15 = $[27];
+  $[33] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx("span", { className: _inputPresentation() }), $[33] = t15) : t15 = $[33];
   let t16;
-  return $[28] !== t10 || $[29] !== t11 || $[30] !== t14 || $[31] !== t9 ? (t16 = /* @__PURE__ */ jsxs("span", { className: t9, "data-invalid": t10, "data-read-only": t11, "data-ui": "TextArea", children: [
+  return $[34] !== t10 || $[35] !== t11 || $[36] !== t14 || $[37] !== t9 ? (t16 = /* @__PURE__ */ jsxs("span", { className: t9, "data-invalid": t10, "data-read-only": t11, "data-ui": "TextArea", children: [
     t14,
     t15
-  ] }), $[28] = t10, $[29] = t11, $[30] = t14, $[31] = t9, $[32] = t16) : t16 = $[32], t16;
+  ] }), $[34] = t10, $[35] = t11, $[36] = t14, $[37] = t9, $[38] = t16) : t16 = $[38], t16;
 }
 function useDelayedState(initialState) {
   const $ = c(3), [state, setState] = useState(initialState), delayedAction = useRef(void 0);
@@ -3940,29 +4454,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/v3/tooltipDelayGroup", null);
-function TooltipDelayGroupProvider(props) {
-  const $ = c(9), {
-    children,
-    delay
-  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0;
-  let t0;
-  const t1 = isGroupActive ? 1 : openDelay;
-  let t2;
-  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t1 ? (t2 = {
-    setIsGroupActive,
-    openTooltipId,
-    setOpenTooltipId,
-    openDelay: t1,
-    closeDelay
-  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t1, $[5] = t2) : t2 = $[5], t0 = t2;
-  const value = t0;
-  let t3;
-  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
-}
-function useTooltipDelayGroup() {
-  return useContext(TooltipDelayGroupContext);
-}
+}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/v4/tooltipDelayGroup", null);
 function TooltipLayer(props) {
   const $ = c(50);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
@@ -3984,101 +4476,108 @@ function TooltipLayer(props) {
     tone: t0,
     ...rest
   } = props, $[0] = props, $[1] = animate, $[2] = arrow2, $[3] = arrowRef, $[4] = arrowX, $[5] = arrowY, $[6] = children, $[7] = originX, $[8] = originY, $[9] = padding, $[10] = placement, $[11] = radius, $[12] = rest, $[13] = scheme, $[14] = shadow, $[15] = style, $[16] = t0) : (animate = $[1], arrow2 = $[2], arrowRef = $[3], arrowX = $[4], arrowY = $[5], children = $[6], originX = $[7], originY = $[8], padding = $[9], placement = $[10], radius = $[11], rest = $[12], scheme = $[13], shadow = $[14], style = $[15], t0 = $[16]);
-  const tone = t0 === void 0 ? "inherit" : t0;
-  let t1;
-  const t2 = animate ? "transform" : void 0;
-  let t3;
-  $[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t2 ? (t3 = {
+  const tone = t0 === void 0 ? "inherit" : t0, t1 = animate ? "transform" : void 0;
+  let t2;
+  $[17] !== originX || $[18] !== originY || $[19] !== style || $[20] !== t1 ? (t2 = {
     originX,
     originY,
-    willChange: t2,
+    willChange: t1,
     ...style
-  }, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t2, $[21] = t3) : t3 = $[21], t1 = t3;
-  const rootStyle = t1;
-  let t4;
-  const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
-  let t7;
-  $[22] !== t5 || $[23] !== t6 ? (t7 = {
-    left: t5,
-    top: t6,
+  }, $[17] = originX, $[18] = originY, $[19] = style, $[20] = t1, $[21] = t2) : t2 = $[21];
+  const rootStyle = t2, t3 = arrowX !== null ? arrowX : void 0, t4 = arrowY !== null ? arrowY : void 0;
+  let t5;
+  $[22] !== t3 || $[23] !== t4 ? (t5 = {
+    left: t3,
+    top: t4,
     right: void 0,
     bottom: void 0
-  }, $[22] = t5, $[23] = t6, $[24] = t7) : t7 = $[24], t4 = t7;
-  const arrowStyle = t4, t8 = animate ? "" : void 0;
+  }, $[22] = t3, $[23] = t4, $[24] = t5) : t5 = $[24];
+  const arrowStyle = t5, t6 = animate ? "" : void 0;
+  let t7;
+  $[25] !== animate ? (t7 = animate ? ["hidden", "initial"] : void 0, $[25] = animate, $[26] = t7) : t7 = $[26];
+  let t8;
+  $[27] !== animate ? (t8 = animate ? ["visible", "scaleIn"] : void 0, $[27] = animate, $[28] = t8) : t8 = $[28];
   let t9;
-  $[25] !== animate ? (t9 = animate ? ["hidden", "initial"] : void 0, $[25] = animate, $[26] = t9) : t9 = $[26];
+  $[29] !== animate ? (t9 = animate ? ["hidden", "scaleOut"] : void 0, $[29] = animate, $[30] = t9) : t9 = $[30];
   let t10;
-  $[27] !== animate ? (t10 = animate ? ["visible", "scaleIn"] : void 0, $[27] = animate, $[28] = t10) : t10 = $[28];
+  $[31] !== arrow2 || $[32] !== arrowRef || $[33] !== arrowStyle ? (t10 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow2, $[32] = arrowRef, $[33] = arrowStyle, $[34] = t10) : t10 = $[34];
   let t11;
-  $[29] !== animate ? (t11 = animate ? ["hidden", "scaleOut"] : void 0, $[29] = animate, $[30] = t11) : t11 = $[30];
-  let t12;
-  $[31] !== arrow2 || $[32] !== arrowRef || $[33] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_TOOLTIP_ARROW_WIDTH, height: DEFAULT_TOOLTIP_ARROW_HEIGHT, radius: DEFAULT_TOOLTIP_ARROW_RADIUS }), $[31] = arrow2, $[32] = arrowRef, $[33] = arrowStyle, $[34] = t12) : t12 = $[34];
-  let t13;
-  return $[35] !== children || $[36] !== padding || $[37] !== placement || $[38] !== radius || $[39] !== rest || $[40] !== rootStyle || $[41] !== scheme || $[42] !== shadow || $[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t8 || $[47] !== t9 || $[48] !== tone ? (t13 = /* @__PURE__ */ jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: motion.div, "data-animate": t8, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t9, animate: t10, exit: t11, tone, children: [
+  return $[35] !== children || $[36] !== padding || $[37] !== placement || $[38] !== radius || $[39] !== rest || $[40] !== rootStyle || $[41] !== scheme || $[42] !== shadow || $[43] !== t10 || $[44] !== t6 || $[45] !== t7 || $[46] !== t8 || $[47] !== t9 || $[48] !== tone ? (t11 = /* @__PURE__ */ jsxs(Layer, { "data-ui": "Tooltip__layer", ...rest, as: motion.div, "data-animate": t6, "data-placement": placement, padding, radius, scheme, shadow, style: rootStyle, variants: POPOVER_MOTION_PROPS.card, transition: POPOVER_MOTION_PROPS.transition, initial: t7, animate: t8, exit: t9, tone, children: [
     children,
-    t12
-  ] }), $[35] = children, $[36] = padding, $[37] = placement, $[38] = radius, $[39] = rest, $[40] = rootStyle, $[41] = scheme, $[42] = shadow, $[43] = t10, $[44] = t11, $[45] = t12, $[46] = t8, $[47] = t9, $[48] = tone, $[49] = t13) : t13 = $[49], t13;
+    t10
+  ] }), $[35] = children, $[36] = padding, $[37] = placement, $[38] = radius, $[39] = rest, $[40] = rootStyle, $[41] = scheme, $[42] = shadow, $[43] = t10, $[44] = t6, $[45] = t7, $[46] = t8, $[47] = t9, $[48] = tone, $[49] = t11) : t11 = $[49], t11;
 }
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
-  const boundaryElementContext = useBoundaryElement(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    as = DEFAULT_TOOLTIP_ELEMENT,
-    boundaryElement = boundaryElementContext?.element,
+  const $ = c(143), t0 = props;
+  let _boundaryElement, _fallbackPlacements, childProp, className, content2, delay, disabled, forwardedRef, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, t8, t9;
+  $[0] !== t0 ? ({
+    animate: t1,
+    arrow: t2,
+    as: t3,
+    boundaryElement: _boundaryElement,
     children: childProp,
     className,
     content: content2,
     delay,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
-    padding = 2,
-    placement: placementProp = "bottom",
+    fallbackPlacements: _fallbackPlacements,
+    padding: t4,
+    placement: t5,
     portal: portalProp,
-    radius = 3,
+    radius: t6,
     ref: forwardedRef,
     scheme,
-    shadow = 2,
-    zOffset = Z_OFFSETS.tooltip,
-    tone = "inherit",
+    shadow: t7,
+    zOffset: t8,
+    tone: t9,
     ...rest
-  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
-    const ret = [];
-    return ret.push(flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+  } = t0, $[0] = t0, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = childProp, $[4] = className, $[5] = content2, $[6] = delay, $[7] = disabled, $[8] = forwardedRef, $[9] = portalProp, $[10] = rest, $[11] = scheme, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = t7, $[19] = t8, $[20] = t9) : (_boundaryElement = $[1], _fallbackPlacements = $[2], childProp = $[3], className = $[4], content2 = $[5], delay = $[6], disabled = $[7], forwardedRef = $[8], portalProp = $[9], rest = $[10], scheme = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16], t6 = $[17], t7 = $[18], t8 = $[19], t9 = $[20]);
+  const _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_TOOLTIP_ELEMENT : t3, padding = t4 === void 0 ? 2 : t4, placementProp = t5 === void 0 ? "bottom" : t5, radius = t6 === void 0 ? 3 : t6, shadow = t7 === void 0 ? 2 : t7, zOffset = t8 === void 0 ? Z_OFFSETS.tooltip : t8, tone = t9 === void 0 ? "inherit" : t9, boundaryElement = _boundaryElement ?? use(BoundaryElementContext), fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => ref.current, $[21] = t10) : t10 = $[21], useImperativeHandle(forwardedRef, t10);
+  let portalElement = null;
+  if (portalProp) {
+    const portal = use(PortalContext);
+    assertPortalContext(portal), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  }
+  let t11;
+  $[22] !== animate || $[23] !== arrowProp || $[24] !== boundaryElement || $[25] !== fallbackPlacements ? (t11 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary: "viewport"
+  }, $[22] = animate, $[23] = arrowProp, $[24] = boundaryElement, $[25] = fallbackPlacements, $[26] = t11) : t11 = $[26];
+  const middleware = useMiddleware(t11);
+  let t12;
+  $[27] !== referenceElement ? (t12 = {
+    reference: referenceElement
+  }, $[27] = referenceElement, $[28] = t12) : t12 = $[28];
+  let t13;
+  $[29] !== middleware || $[30] !== placementProp || $[31] !== t12 ? (t13 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: t12,
+    transform: !1
+  }, $[29] = middleware, $[30] = placementProp, $[31] = t12, $[32] = t13) : t13 = $[32];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-    elements: {
-      reference: referenceElement
-    },
-    transform: !1
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+  } = useFloating(t13), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = use(TooltipDelayGroupContext);
+  let t14;
+  $[33] !== delayGroupContext ? (t14 = delayGroupContext || {}, $[33] = delayGroupContext, $[34] = t14) : t14 = $[34];
+  const {
     setIsGroupActive,
     setOpenTooltipId
-  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
+  } = t14, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
+  let t15;
+  $[35] !== closeDelay || $[36] !== isInsideGroup || $[37] !== openDelay || $[38] !== setIsGroupActive || $[39] !== setIsOpen || $[40] !== setOpenTooltipId || $[41] !== tooltipId ? (t15 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4089,65 +4588,183 @@ function Tooltip(props) {
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
+  }, $[35] = closeDelay, $[36] = isInsideGroup, $[37] = openDelay, $[38] = setIsGroupActive, $[39] = setIsOpen, $[40] = setOpenTooltipId, $[41] = tooltipId, $[42] = t15) : t15 = $[42];
+  const handleIsOpenChange = t15;
+  let t16;
+  $[43] !== childProp?.props || $[44] !== handleIsOpenChange ? (t16 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
+  }, $[43] = childProp?.props, $[44] = handleIsOpenChange, $[45] = t16) : t16 = $[45];
+  const handleBlur = t16;
+  let t17;
+  $[46] !== childProp?.props || $[47] !== handleIsOpenChange ? (t17 = (e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
+  }, $[46] = childProp?.props, $[47] = handleIsOpenChange, $[48] = t17) : t17 = $[48];
+  const handleClick = t17;
+  let t18;
+  $[49] !== childProp?.props || $[50] !== handleIsOpenChange ? (t18 = (e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
+  }, $[49] = childProp?.props, $[50] = handleIsOpenChange, $[51] = t18) : t18 = $[51];
+  const handleContextMenu = t18;
+  let t19;
+  $[52] !== childProp?.props || $[53] !== handleIsOpenChange ? (t19 = (e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
+  }, $[52] = childProp?.props, $[53] = handleIsOpenChange, $[54] = t19) : t19 = $[54];
+  const handleFocus = t19;
+  let t20;
+  $[55] !== childProp?.props || $[56] !== handleIsOpenChange ? (t20 = (e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
+  }, $[55] = childProp?.props, $[56] = handleIsOpenChange, $[57] = t20) : t20 = $[57];
+  const handleMouseEnter = t20;
+  let t21;
+  $[58] !== childProp?.props || $[59] !== handleIsOpenChange ? (t21 = (e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
+  }, $[58] = childProp?.props, $[59] = handleIsOpenChange, $[60] = t21) : t21 = $[60];
+  const handleMouseLeave = t21;
+  let t22;
+  $[61] !== handleIsOpenChange || $[62] !== isInsideGroup || $[63] !== referenceElement || $[64] !== showTooltip ? (t22 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }), useEffect(() => {
+  }, $[61] = handleIsOpenChange, $[62] = isInsideGroup, $[63] = referenceElement, $[64] = showTooltip, $[65] = t22) : t22 = $[65], useCloseOnMouseLeave(t22);
+  let t23, t24;
+  $[66] !== disabled || $[67] !== handleIsOpenChange || $[68] !== showTooltip ? (t23 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
+  }, t24 = [disabled, handleIsOpenChange, showTooltip], $[66] = disabled, $[67] = handleIsOpenChange, $[68] = showTooltip, $[69] = t23, $[70] = t24) : (t23 = $[69], t24 = $[70]), useEffect(t23, t24);
+  let t25, t26;
+  $[71] !== content2 || $[72] !== handleIsOpenChange || $[73] !== showTooltip ? (t25 = () => {
     !content2 && showTooltip && handleIsOpenChange(!1);
-  }, [content2, handleIsOpenChange, showTooltip]), useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t26 = [content2, handleIsOpenChange, showTooltip], $[71] = content2, $[72] = handleIsOpenChange, $[73] = showTooltip, $[74] = t25, $[75] = t26) : (t25 = $[74], t26 = $[75]), useEffect(t25, t26);
+  let t27, t28;
+  $[76] !== handleIsOpenChange || $[77] !== showTooltip ? (t27 = () => {
+    if (!showTooltip)
+      return;
+    const handleWindowKeyDown = function(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
+    };
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
+  }, t28 = [handleIsOpenChange, showTooltip], $[76] = handleIsOpenChange, $[77] = showTooltip, $[78] = t27, $[79] = t28) : (t27 = $[78], t28 = $[79]), useEffect(t27, t28);
+  let t29;
+  $[80] !== boundaryElement || $[81] !== portalElement ? (t29 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = useCallback((arrowEl) => {
+  }, $[80] = boundaryElement, $[81] = portalElement, $[82] = t29) : t29 = $[82];
+  let t30;
+  $[83] !== boundaryElement || $[84] !== portalElement ? (t30 = [boundaryElement, portalElement], $[83] = boundaryElement, $[84] = portalElement, $[85] = t30) : t30 = $[85], useLayoutEffect(t29, t30);
+  let t31;
+  $[86] !== update ? (t31 = (arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = useCallback((node) => {
+  }, $[86] = update, $[87] = t31) : t31 = $[87];
+  const setArrow = t31;
+  let t32;
+  $[88] !== refs ? (t32 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
-  if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: tooltip({
+  }, $[88] = refs, $[89] = t32) : t32 = $[89];
+  const setFloating = t32;
+  let t33;
+  bb0: {
+    if (!childProp) {
+      t33 = null;
+      break bb0;
+    }
+    let t342;
+    $[90] !== childProp || $[91] !== handleBlur || $[92] !== handleClick || $[93] !== handleContextMenu || $[94] !== handleFocus || $[95] !== handleMouseEnter || $[96] !== handleMouseLeave ? (t342 = cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement
+    }), $[90] = childProp, $[91] = handleBlur, $[92] = handleClick, $[93] = handleContextMenu, $[94] = handleFocus, $[95] = handleMouseEnter, $[96] = handleMouseLeave, $[97] = t342) : t342 = $[97], t33 = t342;
+  }
+  const child = t33;
+  let t34;
+  $[98] !== childProp ? (t34 = childProp ? getElementRef(childProp) : null, $[98] = childProp, $[99] = t34) : t34 = $[99];
+  let t35, t36;
+  if ($[100] !== referenceElement ? (t35 = () => referenceElement, t36 = [referenceElement], $[100] = referenceElement, $[101] = t35, $[102] = t36) : (t35 = $[101], t36 = $[102]), useImperativeHandle(t34, t35, t36), !child) {
+    let t372;
+    return $[103] === Symbol.for("react.memo_cache_sentinel") ? (t372 = /* @__PURE__ */ jsx(Fragment, {}), $[103] = t372) : t372 = $[103], t372;
+  }
+  if (disabled)
+    return child;
+  let t37;
+  $[104] !== className ? (t37 = tooltip({
     className
-  }), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
+  }), $[104] = className, $[105] = t37) : t37 = $[105];
+  const t38 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t39;
+  $[106] !== floatingStyles || $[107] !== t38 ? (t39 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, tone, zOffset, children: content2 }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+    maxWidth: t38
+  }, $[106] = floatingStyles, $[107] = t38, $[108] = t39) : t39 = $[108];
+  let t40;
+  $[109] !== animate || $[110] !== arrowProp || $[111] !== arrowX || $[112] !== arrowY || $[113] !== as || $[114] !== content2 || $[115] !== originX || $[116] !== originY || $[117] !== padding || $[118] !== placement || $[119] !== radius || $[120] !== rest || $[121] !== scheme || $[122] !== setArrow || $[123] !== setFloating || $[124] !== shadow || $[125] !== t37 || $[126] !== t39 || $[127] !== tone || $[128] !== zOffset ? (t40 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: t37, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: t39, tone, zOffset, children: content2 }), $[109] = animate, $[110] = arrowProp, $[111] = arrowX, $[112] = arrowY, $[113] = as, $[114] = content2, $[115] = originX, $[116] = originY, $[117] = padding, $[118] = placement, $[119] = radius, $[120] = rest, $[121] = scheme, $[122] = setArrow, $[123] = setFloating, $[124] = shadow, $[125] = t37, $[126] = t39, $[127] = tone, $[128] = zOffset, $[129] = t40) : t40 = $[129];
+  const node_0 = t40;
+  let children = showTooltip ? node_0 : null;
+  if (showTooltip && portalProp) {
+    let resolvedTone = tone;
+    if (tone === "inherit") {
+      const card2 = use(CardContext);
+      assertCardContext(card2), resolvedTone = card2.tone;
+    }
+    const t412 = typeof portalProp == "string" ? portalProp : void 0, t422 = scheme ?? "light";
+    let t43;
+    $[130] !== node_0 || $[131] !== resolvedTone || $[132] !== t422 ? (t43 = /* @__PURE__ */ jsx(CardProvider, { tone: resolvedTone, scheme: t422, children: node_0 }), $[130] = node_0, $[131] = resolvedTone, $[132] = t422, $[133] = t43) : t43 = $[133];
+    let t44;
+    $[134] !== t412 || $[135] !== t43 ? (t44 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t412, children: t43 }), $[134] = t412, $[135] = t43, $[136] = t44) : t44 = $[136], children = t44;
+  }
+  let t41;
+  $[137] !== animate || $[138] !== children ? (t41 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[137] = animate, $[138] = children, $[139] = t41) : t41 = $[139];
+  let t42;
+  return $[140] !== child || $[141] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t41,
     child
-  ] });
+  ] }), $[140] = child, $[141] = t41, $[142] = t42) : t42 = $[142], t42;
+}
+function useMiddleware(t0) {
+  const $ = c(17), {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+    ret = [];
+    const t1 = boundaryElement || void 0;
+    let t2;
+    $[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = flip({
+      boundary: t1,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    }), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+    let t3;
+    $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    }), $[11] = t3) : t3 = $[11], ret.push(t3);
+    const t4 = boundaryElement || void 0;
+    let t5;
+    if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = shift({
+      boundary: t4,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    }), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
+      let t6;
+      $[15] !== arrowRef ? (t6 = arrow({
+        element: arrowRef,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }), $[15] = arrowRef, $[16] = t6) : t6 = $[16], ret.push(t6);
+    }
+    animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
+  } else
+    ret = $[6];
+  return ret;
 }
 function useCloseOnMouseLeave(t0) {
   const $ = c(10), {
@@ -4173,19 +4790,41 @@ function useCloseOnMouseLeave(t0) {
   let t3;
   $[7] !== isInsideGroup || $[8] !== showTooltip ? (t3 = [isInsideGroup, showTooltip], $[7] = isInsideGroup, $[8] = showTooltip, $[9] = t3) : t3 = $[9], useEffect(t2, t3);
 }
+function TooltipDelayGroupProvider(props) {
+  const $ = c(9), {
+    children,
+    delay
+  } = props, [isGroupActive, setIsGroupActive] = useDelayedState(!1), [openTooltipId, setOpenTooltipId] = useDelayedState(null), openDelay = typeof delay == "number" ? delay : delay?.open || 0, closeDelay = typeof delay == "number" ? delay : delay?.close || 0, t0 = isGroupActive ? 1 : openDelay;
+  let t1;
+  $[0] !== closeDelay || $[1] !== openTooltipId || $[2] !== setIsGroupActive || $[3] !== setOpenTooltipId || $[4] !== t0 ? (t1 = {
+    setIsGroupActive,
+    openTooltipId,
+    setOpenTooltipId,
+    openDelay: t0,
+    closeDelay
+  }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t0, $[5] = t1) : t1 = $[5];
+  const value = t1;
+  let t2;
+  return $[6] !== children || $[7] !== value ? (t2 = /* @__PURE__ */ jsx(TooltipDelayGroupContext, { value, children }), $[6] = children, $[7] = value, $[8] = t2) : t2 = $[8], t2;
+}
+function useTooltipDelayGroup() {
+  return use(TooltipDelayGroupContext);
+}
 function BoundaryElementProvider(props) {
-  const $ = c(5), {
+  const $ = c(3), {
     children,
     element
   } = props;
-  let t0, t1;
-  $[0] !== element ? (t1 = {
+  let t0;
+  return $[0] !== children || $[1] !== element ? (t0 = /* @__PURE__ */ jsx(BoundaryElementContext, { value: element, children }), $[0] = children, $[1] = element, $[2] = t0) : t0 = $[2], t0;
+}
+function useBoundaryElement() {
+  const $ = c(2), element = use(BoundaryElementContext);
+  let t0;
+  return $[0] !== element ? (t0 = {
     version: 0,
     element
-  }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
-  const value = t0;
-  let t2;
-  return $[2] !== children || $[3] !== value ? (t2 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t2) : t2 = $[4], t2;
+  }, $[0] = element, $[1] = t0) : t0 = $[1], t0;
 }
 function findMaxBreakpoints(media2, width) {
   const ret = [];
@@ -4210,30 +4849,25 @@ function ElementQuery(props) {
     ref: forwardedRef,
     ...rest
   } = t0, $[0] = t0, $[1] = children, $[2] = forwardedRef, $[3] = mediaProp, $[4] = rest, $[5] = t1) : (children = $[1], forwardedRef = $[2], mediaProp = $[3], rest = $[4], t1 = $[5]);
-  const Element2 = t1 === void 0 ? DEFAULT_ELEMENT_QUERY_ELEMENT : t1, breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS, [element, setElement] = useState(null), elementSize = useElementSize(element);
+  const Element2 = t1 === void 0 ? DEFAULT_ELEMENT_QUERY_ELEMENT : t1, breakpoints = mediaProp ?? DEFAULT_BREAKPOINTS, [element, setElement] = useState(null), width = useElementSize(element)?.border.width ?? window.innerWidth;
   let t2;
-  t2 = elementSize?.border.width ?? window.innerWidth;
-  const width = t2;
-  let t3, t4;
   if ($[6] !== breakpoints || $[7] !== width) {
     const eq = findMaxBreakpoints(breakpoints, width);
-    t4 = eq.length ? eq.join(" ") : void 0, $[6] = breakpoints, $[7] = width, $[8] = t4;
+    t2 = eq.length ? eq.join(" ") : void 0, $[6] = breakpoints, $[7] = width, $[8] = t2;
   } else
-    t4 = $[8];
-  t3 = t4;
-  const max = t3;
-  let t5, t6;
+    t2 = $[8];
+  const max = t2;
+  let t3;
   if ($[9] !== breakpoints || $[10] !== width) {
     const eq_0 = findMinBreakpoints(breakpoints, width);
-    t6 = eq_0.length ? eq_0.join(" ") : void 0, $[9] = breakpoints, $[10] = width, $[11] = t6;
+    t3 = eq_0.length ? eq_0.join(" ") : void 0, $[9] = breakpoints, $[10] = width, $[11] = t3;
   } else
-    t6 = $[11];
-  t5 = t6;
-  const min = t5;
-  let t7, t8;
-  $[12] !== element ? (t7 = () => element, t8 = [element], $[12] = element, $[13] = t7, $[14] = t8) : (t7 = $[13], t8 = $[14]), useImperativeHandle(forwardedRef, t7, t8);
-  let t9;
-  return $[15] !== Element2 || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t9 = /* @__PURE__ */ jsx(Element2, { "data-ui": "ElementQuery", ...rest, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[15] = Element2, $[16] = children, $[17] = max, $[18] = min, $[19] = rest, $[20] = t9) : t9 = $[20], t9;
+    t3 = $[11];
+  const min = t3;
+  let t4, t5;
+  $[12] !== element ? (t4 = () => element, t5 = [element], $[12] = element, $[13] = t4, $[14] = t5) : (t4 = $[13], t5 = $[14]), useImperativeHandle(forwardedRef, t4, t5);
+  let t6;
+  return $[15] !== Element2 || $[16] !== children || $[17] !== max || $[18] !== min || $[19] !== rest ? (t6 = /* @__PURE__ */ jsx(Element2, { "data-ui": "ElementQuery", ...rest, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[15] = Element2, $[16] = children, $[17] = max, $[18] = min, $[19] = rest, $[20] = t6) : t6 = $[20], t6;
 }
 class ErrorBoundary extends Component {
   state = {
@@ -4266,39 +4900,27 @@ function PortalProvider(props) {
   const $ = c(9), {
     children,
     element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), parentPortal = useContext(PortalContext);
+    __unstable_elements: elements
+  } = props, parentPortal = use(PortalContext);
   let t0;
   $[0] !== elements || $[1] !== parentPortal ? (t0 = () => elements?.default ?? (parentPortal.element || document.body), $[0] = elements, $[1] = parentPortal, $[2] = t0) : t0 = $[2];
-  const fallbackElement = useSyncExternalStore(emptySubscribe, t0, _temp);
-  let t1;
-  const t2 = element || fallbackElement;
-  let t3;
-  $[3] !== elements || $[4] !== t2 ? (t3 = {
+  const fallbackElement = useSyncExternalStore(emptySubscribe, t0, _temp), t1 = element || fallbackElement;
+  let t2;
+  $[3] !== elements || $[4] !== t1 ? (t2 = {
     version: 0,
     boundaryElement: null,
-    element: t2,
+    element: t1,
     elements
-  }, $[3] = elements, $[4] = t2, $[5] = t3) : t3 = $[5], t1 = t3;
-  const value = t1;
-  let t4;
-  return $[6] !== children || $[7] !== value ? (t4 = /* @__PURE__ */ jsx(PortalContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t4) : t4 = $[8], t4;
+  }, $[3] = elements, $[4] = t1, $[5] = t2) : t2 = $[5];
+  const value = t2;
+  let t3;
+  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsx(PortalContext, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
 }
 function _temp() {
   return null;
 }
 const emptySubscribe = () => () => {
 };
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function RootProvider(props) {
   const $ = c(10), {
     boundaryElement: t0,
@@ -4485,7 +5107,6 @@ export {
   VirtualList,
   _ResizeObserver,
   _elementSizeObserver,
-  _getArrayProp,
   _getResponsiveProp,
   _hasFocus,
   _isEnterToClickElement,
@@ -4516,7 +5137,6 @@ export {
   usePortal,
   usePrefersDark,
   usePrefersReducedMotion,
-  useResponsiveProp,
   useToast,
   useTooltipDelayGroup,
   useTree