@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

package/dist/index.js

@@ -1,6 +1,6 @@
 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 { useState, isValidElement, useDebugValue, useSyncExternalStore, createContext, use, 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 { 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";
@@ -272,40 +272,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);
@@ -355,6 +369,7 @@ function Button(props) {
     justify = "center",
     loading,
     mode = "default",
+    muted = !1,
     padding = 3,
     paddingX,
     paddingY,
@@ -370,7 +385,6 @@ function Button(props) {
     textWeight = "medium",
     tone = "default",
     type = "button",
-    muted = !1,
     width,
     ...rest
   } = props;
@@ -479,7 +493,7 @@ const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v3/boundary
   element: null
 };
 function useBoundaryElement() {
-  const value = useContext(BoundaryElementContext);
+  const value = use(BoundaryElementContext);
   if (value && (!isRecord(value) || value.version !== 0))
     throw new Error("useBoundaryElement(): the context value is not compatible");
   return value || DEFAULT_VALUE;
@@ -496,17 +510,18 @@ 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;
+  }, $[0] = scheme, $[1] = tone, $[2] = unstable_CompatProvider, $[3] = t0) : t0 = $[3];
+  const t1 = t0;
   let t2;
-  return $[4] !== children || $[5] !== t0 ? (t2 = /* @__PURE__ */ jsx(CardContext.Provider, { value: t0, children }), $[4] = children, $[5] = t0, $[6] = t2) : t2 = $[6], t2;
+  return $[4] !== children || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(CardContext.Provider, { value: t1, children }), $[4] = children, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
 }
 function useCard() {
-  const card2 = useContext(CardContext);
+  const card2 = use(CardContext);
   if (!card2)
     throw new Error("useCard(): missing context value");
   return card2;
@@ -521,7 +536,7 @@ const defaultContextValue = {
   }
 }, PortalContext = createGlobalScopedContext(key, defaultContextValue);
 function usePortal() {
-  const value = useContext(PortalContext);
+  const value = use(PortalContext);
   if (!value)
     throw new Error("usePortal(): missing context value");
   if (!isRecord(value) || value.version !== 0)
@@ -551,14 +566,12 @@ function getLayerContext(contextValue) {
 }
 const LayerContext = createGlobalScopedContext("@sanity/ui/v3/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}`);
   }
 }
@@ -665,9 +678,7 @@ function Arrow(props) {
     style,
     ...rest
   } = 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 = [{
+  const Element2 = t1 === void 0 ? DEFAULT_ARROW_ELEMENT : t1, radius = t2 === void 0 ? 0 : t2, center = w / 2, points = [{
     x: 0,
     y: 0
   }, {
@@ -685,44 +696,42 @@ function Arrow(props) {
   }, {
     x: w,
     y: 0
-  }], cmds = getRoundedCommands(points);
-  t3 = compileCommands(cmds);
-  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];
-  const t5 = `${w}px`;
+  }], cmds = getRoundedCommands(points), path = compileCommands(cmds), strokePath = `${path}`, fillPath = `${path} M ${w} -1 M 0 -1 Z`;
+  let t3;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = _arrow(), $[7] = t3) : t3 = $[7];
+  const t4 = `${w}px`;
+  let t5;
+  $[8] !== t4 ? (t5 = assignInlineVars({
+    [vars.arrow.size]: t4
+  }), $[8] = t4, $[9] = t5) : t5 = $[9];
   let t6;
-  $[8] !== t5 ? (t6 = assignInlineVars({
-    [vars.arrow.size]: t5
-  }), $[8] = t5, $[9] = t6) : t6 = $[9];
-  let t7;
-  $[10] !== style || $[11] !== t6 ? (t7 = {
+  $[10] !== style || $[11] !== t5 ? (t6 = {
     ...style,
-    ...t6
-  }, $[10] = style, $[11] = t6, $[12] = t7) : t7 = $[12];
-  let t8;
-  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t8 = _arrowSvg(), $[13] = t8) : t8 = $[13];
-  const t9 = `0 0 ${w} ${w}`;
+    ...t5
+  }, $[10] = style, $[11] = t5, $[12] = t6) : t6 = $[12];
+  let t7;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t7 = _arrowSvg(), $[13] = t7) : t7 = $[13];
+  const t8 = `0 0 ${w} ${w}`;
+  let t9;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t9 = _arrowStrokeMask(), $[14] = t9) : t9 = $[14];
   let t10;
-  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t10 = _arrowStrokeMask(), $[14] = t10) : t10 = $[14];
+  $[15] !== w ? (t10 = /* @__PURE__ */ jsx("mask", { id: "stroke-mask", children: /* @__PURE__ */ jsx("rect", { className: t9, x: 0, width: w, height: w, fill: "white" }) }), $[15] = w, $[16] = t10) : t10 = $[16];
   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];
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t11 = _arrowStroke(), $[17] = t11) : t11 = $[17];
   let t12;
-  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = _arrowStroke(), $[17] = t12) : t12 = $[17];
+  $[18] !== strokePath ? (t12 = /* @__PURE__ */ jsx("path", { className: t11, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t12) : t12 = $[19];
   let t13;
-  $[18] !== strokePath ? (t13 = /* @__PURE__ */ jsx("path", { className: t12, d: strokePath, mask: "url(#stroke-mask)" }), $[18] = strokePath, $[19] = t13) : t13 = $[19];
+  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t13 = _arrowShape(), $[20] = t13) : t13 = $[20];
   let t14;
-  $[20] === Symbol.for("react.memo_cache_sentinel") ? (t14 = _arrowShape(), $[20] = t14) : t14 = $[20];
+  $[21] !== fillPath ? (t14 = /* @__PURE__ */ jsx("path", { className: t13, d: fillPath }), $[21] = fillPath, $[22] = t14) : t14 = $[22];
   let t15;
-  $[21] !== fillPath ? (t15 = /* @__PURE__ */ jsx("path", { className: t14, d: fillPath }), $[21] = fillPath, $[22] = t15) : t15 = $[22];
+  $[23] !== t10 || $[24] !== t12 || $[25] !== t14 || $[26] !== t8 || $[27] !== w ? (t15 = /* @__PURE__ */ jsxs("svg", { className: t7, width: w, height: w, viewBox: t8, children: [
+    t10,
+    t12,
+    t14
+  ] }), $[23] = t10, $[24] = t12, $[25] = t14, $[26] = t8, $[27] = w, $[28] = t15) : t15 = $[28];
   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: [
-    t11,
-    t13,
-    t15
-  ] }), $[23] = t11, $[24] = t13, $[25] = t15, $[26] = t9, $[27] = w, $[28] = t16) : t16 = $[28];
-  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 $[29] !== Element2 || $[30] !== rest || $[31] !== t15 || $[32] !== t6 ? (t16 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t3, style: t6, children: t15 }), $[29] = Element2, $[30] = rest, $[31] = t15, $[32] = t6, $[33] = t16) : t16 = $[33], t16;
 }
 const DEFAULT_FLEX_ELEMENT = "div";
 function Flex(props) {
@@ -757,7 +766,7 @@ function Card(props) {
     tone: t5,
     ...rest
   } = 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 = useContext(CardContext), tone = toneProp === "inherit" ? parent?.tone : toneProp, scheme = schemeProp === void 0 ? parent?.scheme : schemeProp, t6 = scheme === parent?.scheme ? void 0 : scheme;
+  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;
   $[12] !== className || $[13] !== t6 || $[14] !== tone ? (t7 = card({
     className,
@@ -873,8 +882,8 @@ 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);
 }
@@ -882,7 +891,7 @@ function LayerProvider(props) {
   const $ = c(19), {
     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;
@@ -910,18 +919,18 @@ function LayerProvider(props) {
   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 = {
+  let t6;
+  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t6 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
+  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t6) : t6 = $[15];
   const value = t6;
-  let t8;
-  return $[16] !== children || $[17] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t8) : t8 = $[18], t8;
+  let t7;
+  return $[16] !== children || $[17] !== value ? (t7 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t7) : t7 = $[18], t7;
 }
 function _temp2$2(v_0) {
   return v_0 - 1;
@@ -972,52 +981,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() {
@@ -1187,18 +1189,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(90), 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,
@@ -1207,99 +1207,98 @@ 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];
+    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), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
   let t9;
-  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[22] = t9) : t9 = $[22], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
+  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
   const handleClearMouseDown = _temp$8;
   let t10;
-  $[23] !== onClear ? (t10 = (event_0) => {
+  $[24] !== onClear ? (t10 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
-  }, $[23] = onClear, $[24] = t10) : t10 = $[24];
+  }, $[24] = onClear, $[25] = t10) : t10 = $[25];
   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;
+  let t11;
+  $[26] !== responsivePadding ? (t11 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$1)), $[26] = responsivePadding, $[27] = t11) : t11 = $[27];
   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({
+  let t12;
+  $[28] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp3)), $[28] = responsivePadding, $[29] = t12) : t12 = $[29];
+  const clearButtonPadding = t12, clearButtonProps = isRecord(clearButton) ? clearButton : EMPTY_RECORD;
+  let t13;
+  $[30] !== border || $[31] !== className || $[32] !== flex || $[33] !== fontSize || $[34] !== gap || $[35] !== padding || $[36] !== radius || $[37] !== width ? (t13 = 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;
-  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];
+  }), $[30] = border, $[31] = className, $[32] = flex, $[33] = fontSize, $[34] = gap, $[35] = padding, $[36] = radius, $[37] = width, $[38] = t13) : t13 = $[38];
+  const t14 = IconComponent ? "" : void 0, t15 = IconRightComponent ? "" : void 0, t16 = customValidity ? "" : void 0, t17 = prefix ? "" : void 0, t18 = !disabled && readOnly ? "" : void 0, t19 = suffix ? "" : void 0;
+  let t20;
+  $[39] !== prefix ? (t20 = prefix && /* @__PURE__ */ jsx("span", { className: textInputPrefix(), children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[39] = prefix, $[40] = t20) : t20 = $[40];
+  let t21;
+  $[41] === Symbol.for("react.memo_cache_sentinel") ? (t21 = textInputElement(), $[41] = t21) : t21 = $[41];
+  let t22;
+  $[42] === Symbol.for("react.memo_cache_sentinel") ? (t22 = _inputElement(), $[42] = t22) : t22 = $[42];
+  const t23 = __unstable_disableFocusRing ? "" : void 0;
   let t24;
-  $[39] === Symbol.for("react.memo_cache_sentinel") ? (t24 = textInputElement(), $[39] = t24) : t24 = $[39];
+  $[43] !== Element2 || $[44] !== disabled || $[45] !== readOnly || $[46] !== rest || $[47] !== t23 || $[48] !== type ? (t24 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t22, "data-no-focus-ring": t23, disabled, readOnly, ref, type }), $[43] = Element2, $[44] = disabled, $[45] = readOnly, $[46] = rest, $[47] = t23, $[48] = type, $[49] = t24) : t24 = $[49];
   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: [
+  $[50] === Symbol.for("react.memo_cache_sentinel") ? (t25 = _inputPresentation(), $[50] = t25) : t25 = $[50];
+  let t26;
+  $[51] !== IconComponent || $[52] !== fontSize || $[53] !== padding ? (t26 = 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: [
+  ] }) }), $[51] = IconComponent, $[52] = fontSize, $[53] = padding, $[54] = t26) : t26 = $[54];
+  let t27;
+  $[55] !== IconRightComponent || $[56] !== fontSize || $[57] !== padding || $[58] !== withClearButton ? (t27 = !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];
+  ] }) }), $[55] = IconRightComponent, $[56] = fontSize, $[57] = padding, $[58] = withClearButton, $[59] = t27) : t27 = $[59];
+  let t28;
+  $[60] !== t26 || $[61] !== t27 ? (t28 = /* @__PURE__ */ jsxs("span", { className: t25, children: [
+    t26,
+    t27
+  ] }), $[60] = t26, $[61] = t27, $[62] = t28) : t28 = $[62];
+  let t29;
+  $[63] !== clearButton || $[64] !== clearButtonBoxPadding || $[65] !== clearButtonPadding || $[66] !== clearButtonProps || $[67] !== disabled || $[68] !== fontSize || $[69] !== handleClearClick || $[70] !== radius || $[71] !== readOnly ? (t29 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(Box, { as: "span", insetTop: 0, insetRight: 0, padding: clearButtonBoxPadding, position: "absolute", style: {
+    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 }) }), $[63] = clearButton, $[64] = clearButtonBoxPadding, $[65] = clearButtonPadding, $[66] = clearButtonProps, $[67] = disabled, $[68] = fontSize, $[69] = handleClearClick, $[70] = radius, $[71] = readOnly, $[72] = t29) : t29 = $[72];
+  let t30;
+  $[73] !== t24 || $[74] !== t28 || $[75] !== t29 ? (t30 = /* @__PURE__ */ jsxs("span", { className: t21, children: [
+    t24,
+    t28,
+    t29
+  ] }), $[73] = t24, $[74] = t28, $[75] = t29, $[76] = t30) : t30 = $[76];
   let t31;
-  $[58] !== t29 || $[59] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Box, { className: t28, position: "absolute", children: [
-    t29,
-    t30
-  ] }), $[58] = t29, $[59] = t30, $[60] = t31) : t31 = $[60];
+  $[77] !== suffix ? (t31 = suffix && /* @__PURE__ */ jsx("span", { className: textInputSuffix(), children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[77] = suffix, $[78] = t31) : t31 = $[78];
   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: {
-    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;
+  return $[79] !== t13 || $[80] !== t14 || $[81] !== t15 || $[82] !== t16 || $[83] !== t17 || $[84] !== t18 || $[85] !== t19 || $[86] !== t20 || $[87] !== t30 || $[88] !== t31 ? (t32 = /* @__PURE__ */ jsxs("span", { className: t13, "data-icon-left": t14, "data-icon-right": t15, "data-invalid": t16, "data-prefix": t17, "data-read-only": t18, "data-suffix": t19, "data-ui": "TextInput", children: [
+    t20,
+    t30,
+    t31
+  ] }), $[79] = t13, $[80] = t14, $[81] = t15, $[82] = t16, $[83] = t17, $[84] = t18, $[85] = t19, $[86] = t20, $[87] = t30, $[88] = t31, $[89] = t32) : t32 = $[89], t32;
 }
 function _temp3(t0) {
   const [key_0, value_0] = t0;
@@ -1771,7 +1770,7 @@ const DialogContext = createGlobalScopedContext("@sanity/ui/v3/dialog", {
   version: 0
 });
 function useDialog() {
-  return useContext(DialogContext);
+  return use(DialogContext);
 }
 const DEFAULT_DIALOG_ELEMENT = "div";
 function Dialog(props) {
@@ -1864,15 +1863,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.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t1) : t1 = $[5], t1;
 }
 const DEFAULT_KBD_ELEMENT = "kbd";
 function KBD(props) {
@@ -2121,8 +2120,8 @@ 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 = {
+  let t11;
+  $[31] !== activeElement || $[32] !== activeIndex || $[33] !== handleItemMouseEnter || $[34] !== handleItemMouseLeave || $[35] !== mount || $[36] !== onClickOutside || $[37] !== onEscape || $[38] !== onItemClick || $[39] !== registerElement ? (t11 = {
     version: 0,
     activeElement,
     activeIndex,
@@ -2132,21 +2131,19 @@ function Menu(props) {
     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] = activeIndex, $[33] = handleItemMouseEnter, $[34] = handleItemMouseLeave, $[35] = mount, $[36] = onClickOutside, $[37] = onEscape, $[38] = onItemClick, $[39] = registerElement, $[40] = t11) : t11 = $[40];
   const value = t11;
-  let t13;
-  $[41] !== className ? (t13 = menu({
+  let t12;
+  $[41] !== className ? (t12 = menu({
     className
-  }), $[41] = className, $[42] = t13) : t13 = $[42];
+  }), $[41] = className, $[42] = t12) : t12 = $[42];
+  let t13;
+  $[43] !== children || $[44] !== gap ? (t13 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[43] = children, $[44] = gap, $[45] = t13) : t13 = $[45];
   let t14;
-  $[43] !== children || $[44] !== gap ? (t14 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[43] = children, $[44] = gap, $[45] = t14) : t14 = $[45];
+  $[46] !== as || $[47] !== handleKeyDown || $[48] !== handleRefChange || $[49] !== padding || $[50] !== rest || $[51] !== t12 || $[52] !== 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 }), $[46] = as, $[47] = handleKeyDown, $[48] = handleRefChange, $[49] = padding, $[50] = rest, $[51] = t12, $[52] = t13, $[53] = t14) : t14 = $[53];
   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 $[54] !== t14 || $[55] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t14 }), $[54] = t14, $[55] = value, $[56] = t15) : t15 = $[56], t15;
 }
 function MenuButton(props) {
   const $ = c(57), {
@@ -2266,18 +2263,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;
@@ -2300,7 +2297,7 @@ 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)
@@ -2459,8 +2456,8 @@ function MenuItem(props) {
     disabled || (onClick && onClick(event), onItemClick && onItemClick(event));
   }, $[33] = disabled, $[34] = onClick, $[35] = onItemClick, $[36] = t11) : t11 = $[36];
   const handleClick = t11;
-  let t12, t13;
-  $[37] !== padding || $[38] !== paddingBottom || $[39] !== paddingLeft || $[40] !== paddingRight || $[41] !== paddingTop || $[42] !== paddingX || $[43] !== paddingY ? (t13 = {
+  let t12;
+  $[37] !== padding || $[38] !== paddingBottom || $[39] !== paddingLeft || $[40] !== paddingRight || $[41] !== paddingTop || $[42] !== paddingX || $[43] !== paddingY ? (t12 = {
     padding,
     paddingX,
     paddingY,
@@ -2468,15 +2465,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;
+  }, $[37] = padding, $[38] = paddingBottom, $[39] = paddingLeft, $[40] = paddingRight, $[41] = paddingTop, $[42] = paddingX, $[43] = paddingY, $[44] = t12) : t12 = $[44];
   const paddingProps = t12;
-  let t14;
-  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (el) => {
+  let t13;
+  $[45] === 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: [
+  }, $[45] = t13) : t13 = $[45];
+  const setRef = t13, t14 = pressed ? "" : void 0, t15 = disabled ? "" : void 0, t16 = as === "button" ? "button" : void 0;
+  let t17;
+  $[46] !== IconComponent || $[47] !== IconRightComponent || $[48] !== fontSize || $[49] !== gap || $[50] !== gapX || $[51] !== gapY || $[52] !== hotkeys || $[53] !== paddingProps || $[54] !== text2 ? (t17 = (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, {})
@@ -2490,14 +2487,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;
+  ] }), $[46] = IconComponent, $[47] = IconRightComponent, $[48] = fontSize, $[49] = gap, $[50] = gapX, $[51] = gapY, $[52] = hotkeys, $[53] = paddingProps, $[54] = text2, $[55] = t17) : t17 = $[55];
+  let t18;
+  $[56] !== children || $[57] !== paddingProps ? (t18 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[56] = children, $[57] = paddingProps, $[58] = t18) : t18 = $[58];
+  let t19;
+  return $[59] !== active || $[60] !== as || $[61] !== disabled || $[62] !== handleClick || $[63] !== onItemMouseEnter || $[64] !== onItemMouseLeave || $[65] !== radius || $[66] !== rest || $[67] !== role || $[68] !== t14 || $[69] !== t15 || $[70] !== t16 || $[71] !== t17 || $[72] !== t18 || $[73] !== tone ? (t19 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...rest, as, "data-pressed": t14, "data-disabled": t15, radius, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role, selected: active, tabIndex: -1, tone, type: t16, children: [
+    t17,
+    t18
+  ] }), $[59] = active, $[60] = as, $[61] = disabled, $[62] = handleClick, $[63] = onItemMouseEnter, $[64] = onItemMouseLeave, $[65] = radius, $[66] = rest, $[67] = role, $[68] = t14, $[69] = t15, $[70] = t16, $[71] = t17, $[72] = t18, $[73] = tone, $[74] = t19) : t19 = $[74], t19;
 }
 const DEFAULT_TAB_ELEMENT = "button";
 function Tab(props) {
@@ -2758,8 +2755,8 @@ 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 = {
     version: 0,
     push: (params) => {
       const id = params.id ?? generateToastId(), duration = params.duration ?? 5e3;
@@ -2783,15 +2780,15 @@ function ToastProvider(props) {
         });
       }), id;
     }
-  }, $[1] = t3) : t3 = $[1], t2 = t3;
+  }, $[1] = t2) : t2 = $[1];
   const value = t2;
+  let t3;
+  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t3 = 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] = t3) : t3 = $[9];
   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];
-  let t5;
-  return $[10] !== children || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+  return $[10] !== children || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
-    t4
-  ] }), $[10] = children, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
+    t3
+  ] }), $[10] = children, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
 }
 function _temp$4(t0) {
   const {
@@ -2802,7 +2799,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)
@@ -2875,27 +2872,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,
@@ -2908,10 +2905,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 ? {
@@ -2922,14 +2919,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,
@@ -2937,10 +2932,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();
@@ -2999,29 +2994,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.Provider, { 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;
@@ -3138,32 +3133,21 @@ 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;
-  let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
-  $[0] !== t0 ? ({
-    as: t1,
-    gap: t2,
+  const {
+    as = DEFAULT_VIRTUAL_LIST_ELEMENT,
+    gap = 0,
     getItemKey,
-    items: t3,
+    items = [],
     onChange,
     renderItem,
     ref: forwardedRef,
     ...rest
-  } = t0, $[0] = t0, $[1] = forwardedRef, $[2] = getItemKey, $[3] = onChange, $[4] = renderItem, $[5] = rest, $[6] = t1, $[7] = t2, $[8] = t3) : (forwardedRef = $[1], getItemKey = $[2], onChange = $[3], renderItem = $[4], rest = $[5], t1 = $[6], t2 = $[7], t3 = $[8]);
-  const as = t1 === void 0 ? DEFAULT_VIRTUAL_LIST_ELEMENT : t1, gap = t2 === void 0 ? 0 : t2;
-  let t4;
-  $[9] !== t3 ? (t4 = t3 === void 0 ? [] : t3, $[9] = t3, $[10] = t4) : t4 = $[10];
-  const items = t4, ref = useRef(null), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1), [gapValue, setGapValue] = useState(0);
-  let t5;
-  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[11] = t5) : t5 = $[11], useImperativeHandle(forwardedRef, t5);
-  let t6, t7;
-  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => {
-    if (!ref.current)
-      return;
+  } = props, ref = useRef(null), wrapperRef = useRef(null), [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), [itemHeight, setItemHeight] = useState(-1), [gapValue, setGapValue] = useState(0);
+  useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => {
+    if (!ref.current) return;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement))
-        return;
+      if (!(scrollEl instanceof HTMLElement)) return;
       const handleScroll = () => {
         setScrollTop(scrollEl.scrollTop);
       };
@@ -3187,10 +3171,9 @@ function VirtualList(props) {
     }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
       window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
     };
-  }, t7 = [], $[12] = t6, $[13] = t7) : (t6 = $[12], t7 = $[13]), useEffect(t6, t7);
+  }, []);
   const len = items.length, height = itemHeight ? len * (itemHeight + gapValue) - gapValue : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  let t8, t9;
-  $[14] !== fromIndex || $[15] !== gapValue || $[16] !== itemHeight || $[17] !== onChange || $[18] !== scrollHeight || $[19] !== scrollTop || $[20] !== toIndex ? (t8 = () => {
+  useEffect(() => {
     onChange?.({
       fromIndex,
       gap: gapValue,
@@ -3199,63 +3182,23 @@ function VirtualList(props) {
       scrollTop,
       toIndex
     });
-  }, 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 = () => {
+  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex]), useEffect(() => {
     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 = {
+  }, [renderItem]);
+  const children = useMemo(() => !renderItem || items.length === 0 ? null : itemHeight === -1 ? [/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { ref: (el) => el ? setItemHeight(el.offsetHeight) : void 0, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: renderItem(items[0]) }, 0),
+    /* @__PURE__ */ jsx("div", { ref: (el_0) => el_0 ? setGapValue(el_0.offsetHeight) : void 0, style: {
+      height: vars.space[gap]
+    } })
+  ] })] : items.slice(fromIndex, toIndex).map((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);
+  }), [fromIndex, gap, gapValue, getItemKey, itemHeight, items, renderItem, toIndex]), wrapperStyle = useMemo(() => ({
     height
-  }, $[52] = height, $[53] = t14) : t14 = $[53], t13 = t14;
-  const wrapperStyle = t13;
-  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;
+  }), [height]);
+  return /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
 }
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
@@ -3318,43 +3261,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;
+  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,
@@ -3366,7 +3325,7 @@ 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]);
+  } = 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, size2 = useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
   let t4, t5;
   $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t4 = () => {
@@ -3384,35 +3343,35 @@ function Avatar(props) {
     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;
-  let t12;
-  $[24] !== className || $[25] !== color || $[26] !== sizeProp ? (t12 = avatar({
+  let t9;
+  $[22] !== size2 ? (t9 = Object.values(size2).map(_temp$2), $[22] = size2, $[23] = t9) : t9 = $[23];
+  const initialsSize = t9, t10 = hideInnerStroke ? "" : void 0;
+  let t11;
+  $[24] !== className || $[25] !== color || $[26] !== sizeProp ? (t11 = avatar({
     className,
     color,
     size: sizeProp
-  }), $[24] = className, $[25] = color, $[26] = sizeProp, $[27] = t12) : t12 = $[27];
-  const t13 = imageError ? "" : void 0;
+  }), $[24] = className, $[25] = color, $[26] = sizeProp, $[27] = t11) : t11 = $[27];
+  const t12 = imageError ? "" : void 0;
+  let t13;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t13 = avatarArrow(), $[28] = t13) : t13 = $[28];
   let t14;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t14 = avatarArrow(), $[28] = t14) : t14 = $[28];
+  $[29] !== color ? (t14 = /* @__PURE__ */ jsx("span", { className: t13, 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] = 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] === Symbol.for("react.memo_cache_sentinel") ? (t15 = avatarInitials(), $[31] = t15) : t15 = $[31];
   let t16;
-  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t16 = avatarInitials(), $[31] = t16) : t16 = $[31];
+  $[32] !== initials || $[33] !== initialsSize ? (t16 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t15, 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] = t16) : t16 = $[34];
   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];
-  let t18;
-  $[35] !== handleImageError || $[36] !== initials || $[37] !== src ? (t18 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
+  $[35] !== handleImageError || $[36] !== initials || $[37] !== src ? (t17 = 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];
-  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: [
-    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;
+  ] }), $[35] = handleImageError, $[36] = initials, $[37] = src, $[38] = t17) : t17 = $[38];
+  let t18;
+  return $[39] !== Element2 || $[40] !== arrowPosition || $[41] !== rest || $[42] !== t10 || $[43] !== t11 || $[44] !== t12 || $[45] !== t14 || $[46] !== t16 || $[47] !== t17 || $[48] !== title ? (t18 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t10, "data-ui": "Avatar", ...rest, "aria-label": title, className: t11, "data-arrow-position": arrowPosition, "data-image-error": t12, title, children: [
+    t14,
+    t16,
+    t17
+  ] }), $[39] = Element2, $[40] = arrowPosition, $[41] = rest, $[42] = t10, $[43] = t11, $[44] = t12, $[45] = t14, $[46] = t16, $[47] = t17, $[48] = title, $[49] = t18) : t18 = $[49], t18;
 }
 function _temp$2(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
@@ -3429,25 +3388,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,
@@ -3463,18 +3422,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) {
@@ -3544,69 +3507,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) {
@@ -3651,73 +3646,74 @@ 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);
     const timeout = setTimeout(() => {
@@ -3726,15 +3722,13 @@ function Skeleton(props) {
     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 = 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) {
@@ -3828,8 +3822,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,
@@ -3837,78 +3831,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);
@@ -3939,27 +3938,8 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   "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);
+  return use(TooltipDelayGroupContext);
 }
 function TooltipLayer(props) {
   const $ = c(50);
@@ -3982,40 +3962,36 @@ 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) {
@@ -4171,19 +4147,36 @@ 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.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t2) : t2 = $[8], t2;
+}
 function BoundaryElementProvider(props) {
   const $ = c(5), {
     children,
     element
   } = props;
-  let t0, t1;
-  $[0] !== element ? (t1 = {
+  let t0;
+  $[0] !== element ? (t0 = {
     version: 0,
     element
-  }, $[0] = element, $[1] = t1) : t1 = $[1], t0 = t1;
+  }, $[0] = element, $[1] = t0) : t0 = $[1];
   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;
+  let t1;
+  return $[2] !== children || $[3] !== value ? (t1 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t1) : t1 = $[4], t1;
 }
 function findMaxBreakpoints(media2, width) {
   const ret = [];
@@ -4208,30 +4201,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 = {
@@ -4265,22 +4253,20 @@ function PortalProvider(props) {
     children,
     element,
     __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), parentPortal = useContext(PortalContext);
+  } = props, elements = useUnique(elementsProp), 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.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
 }
 function _temp() {
   return null;