@sanity/ui 4.0.0-static.30 → 4.0.0-static.32

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { SpinnerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
-import { useState, isValidElement, useDebugValue, useSyncExternalStore, createContext, 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 { SpinnerIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon, CheckmarkIcon, RemoveIcon } from "@sanity/icons";
+import { useState, isValidElement, useDebugValue, useSyncExternalStore, createContext, use, useRef, useImperativeHandle, useEffect, cloneElement, useReducer, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
 import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, card, BREAKPOINTS, popoverCard, popover, _selectable, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, kbd, menu, menuDivider, toast, toastLayer, treeItem, label, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, tooltip, root } from "@sanity/ui/css";
 import { isValidElementType } from "react-is";
-import { detectOverflow, autoPlacement, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
+import { detectOverflow, useFloating, autoPlacement, flip, offset, shift, arrow, hide, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
@@ -353,77 +353,79 @@ function Spinner(props) {
 }
 const DEFAULT_BUTTON_ELEMENT = "button";
 function Button(props) {
-  const {
-    align = "center",
-    as: Element2 = DEFAULT_BUTTON_ELEMENT,
-    children,
+  const $ = c(88), t0 = props;
+  let Element2, IconComponent, IconRightComponent, align, children, className, disabled, flex, fontSize, gap, gapX, gapY, href, justify, loading, mode, muted, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, radius, rest, selected, text2, textAlign, textOverflow2, textWeight, tone, type, width;
+  if ($[0] !== props.padding || $[1] !== t0) {
+    const {
+      align: t12,
+      as: t22,
+      children: t32,
+      className: t42,
+      disabled: t52,
+      flex: t62,
+      fontSize: t72,
+      gap: _gap,
+      gapX: t82,
+      gapY: t92,
+      icon: t10,
+      iconRight: t11,
+      justify: t122,
+      loading: t13,
+      mode: t14,
+      muted: t15,
+      padding: t16,
+      paddingX: t17,
+      paddingY: t18,
+      paddingTop: t19,
+      paddingBottom: t20,
+      paddingLeft: t21,
+      paddingRight: t222,
+      radius: t23,
+      selected: t24,
+      text: t25,
+      textAlign: t26,
+      textOverflow: t27,
+      textWeight: t28,
+      tone: t29,
+      type: t30,
+      width: t31,
+      ...t322
+    } = t0;
+    children = t32, className = t42, disabled = t52, flex = t62, gapX = t82, gapY = t92, IconComponent = t10, IconRightComponent = t11, loading = t13, paddingX = t17, paddingY = t18, paddingTop = t19, paddingBottom = t20, paddingLeft = t21, paddingRight = t222, selected = t24, text2 = t25, textAlign = t26, width = t31, rest = t322, align = t12 === void 0 ? "center" : t12, Element2 = t22 === void 0 ? DEFAULT_BUTTON_ELEMENT : t22, fontSize = t72 === void 0 ? 1 : t72, justify = t122 === void 0 ? "center" : t122, mode = t14 === void 0 ? "default" : t14, muted = t15 === void 0 ? !1 : t15, padding = t16 === void 0 ? 3 : t16, radius = t23 === void 0 ? 2 : t23, textOverflow2 = t27 === void 0 ? "ellipsis" : t27, textWeight = t28 === void 0 ? "medium" : t28, tone = t29 === void 0 ? "default" : t29, type = t30 === void 0 ? "button" : t30, gap = _gap ?? props.padding ?? 3, href = void 0, "href" in rest && (href = typeof rest.href == "string" ? rest.href : void 0, delete rest.href), $[0] = props.padding, $[1] = t0, $[2] = Element2, $[3] = IconComponent, $[4] = IconRightComponent, $[5] = align, $[6] = children, $[7] = className, $[8] = disabled, $[9] = flex, $[10] = fontSize, $[11] = gap, $[12] = gapX, $[13] = gapY, $[14] = href, $[15] = justify, $[16] = loading, $[17] = mode, $[18] = muted, $[19] = padding, $[20] = paddingBottom, $[21] = paddingLeft, $[22] = paddingRight, $[23] = paddingTop, $[24] = paddingX, $[25] = paddingY, $[26] = radius, $[27] = rest, $[28] = selected, $[29] = text2, $[30] = textAlign, $[31] = textOverflow2, $[32] = textWeight, $[33] = tone, $[34] = type, $[35] = width;
+  } else
+    Element2 = $[2], IconComponent = $[3], IconRightComponent = $[4], align = $[5], children = $[6], className = $[7], disabled = $[8], flex = $[9], fontSize = $[10], gap = $[11], gapX = $[12], gapY = $[13], href = $[14], justify = $[15], loading = $[16], mode = $[17], muted = $[18], padding = $[19], paddingBottom = $[20], paddingLeft = $[21], paddingRight = $[22], paddingTop = $[23], paddingX = $[24], paddingY = $[25], radius = $[26], rest = $[27], selected = $[28], text2 = $[29], textAlign = $[30], textOverflow2 = $[31], textWeight = $[32], tone = $[33], type = $[34], width = $[35];
+  let t1;
+  $[36] !== className || $[37] !== flex || $[38] !== mode || $[39] !== radius || $[40] !== tone || $[41] !== width ? (t1 = button({
     className,
-    disabled,
     flex,
-    fontSize = 1,
-    gap = props.padding ?? 3,
-    gapX,
-    gapY,
-    icon: IconComponent,
-    iconRight: IconRightComponent,
-    justify = "center",
-    loading,
-    mode = "default",
-    muted = !1,
-    padding = 3,
-    paddingX,
-    paddingY,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    radius = 2,
-    selected,
-    text: text2,
-    textAlign,
-    textOverflow: textOverflow2 = "ellipsis",
-    textWeight = "medium",
-    tone = "default",
-    type = "button",
-    width,
-    ...rest
-  } = props;
-  let href;
-  return "href" in rest && (href = typeof rest.href == "string" ? rest.href : href, delete rest.href), /* @__PURE__ */ jsxs(
-    Element2,
-    {
-      "data-ui": "Button",
-      ...rest,
-      className: button({
-        className,
-        flex,
-        mode,
-        radius,
-        tone,
-        width
-      }),
-      "data-disabled": loading || disabled ? "" : props["data-disabled"],
-      "data-selected": selected ? "" : props["data-selected"],
-      disabled: !!(loading || disabled),
-      href: disabled ? void 0 : href,
-      type,
-      children: [
-        !!loading && /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: buttonLoadingBox(), display: "flex", flex: 1, justifyContent: "center", width: "fill", children: /* @__PURE__ */ jsx(Spinner, { size: fontSize }) }),
-        (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Box, { alignItems: align, as: "span", display: "flex", flex: 1, gap, gapX, gapY, justifyContent: justify, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children: [
-          IconComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
-            isValidElement(IconComponent) && IconComponent,
-            isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-          ] }),
-          text2 && /* @__PURE__ */ jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }) }),
-          IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
-            isValidElement(IconRightComponent) && IconRightComponent,
-            isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-          ] })
-        ] }),
-        children && /* @__PURE__ */ jsx(Box, { as: "span", flex: 1, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children })
-      ]
-    }
-  );
+    mode,
+    radius,
+    tone,
+    width
+  }), $[36] = className, $[37] = flex, $[38] = mode, $[39] = radius, $[40] = tone, $[41] = width, $[42] = t1) : t1 = $[42];
+  const t2 = loading || disabled ? "" : props["data-disabled"], t3 = selected ? "" : props["data-selected"], t4 = !!(loading || disabled), t5 = disabled ? void 0 : href;
+  let t6;
+  $[43] !== fontSize || $[44] !== loading ? (t6 = !!loading && /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: buttonLoadingBox(), display: "flex", flex: 1, justifyContent: "center", width: "fill", children: /* @__PURE__ */ jsx(Spinner, { size: fontSize }) }), $[43] = fontSize, $[44] = loading, $[45] = t6) : t6 = $[45];
+  let t7;
+  $[46] !== IconComponent || $[47] !== IconRightComponent || $[48] !== align || $[49] !== fontSize || $[50] !== gap || $[51] !== gapX || $[52] !== gapY || $[53] !== justify || $[54] !== muted || $[55] !== padding || $[56] !== paddingBottom || $[57] !== paddingLeft || $[58] !== paddingRight || $[59] !== paddingTop || $[60] !== paddingX || $[61] !== paddingY || $[62] !== text2 || $[63] !== textAlign || $[64] !== textOverflow2 || $[65] !== textWeight ? (t7 = (IconComponent || text2 || IconRightComponent) && /* @__PURE__ */ jsxs(Box, { alignItems: align, as: "span", display: "flex", flex: 1, gap, gapX, gapY, justifyContent: justify, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children: [
+    IconComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
+      isValidElement(IconComponent) && IconComponent,
+      isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
+    ] }),
+    text2 && /* @__PURE__ */ jsx(Box, { as: "span", maxWidth: "auto", children: /* @__PURE__ */ jsx(Text, { align: textAlign, as: "span", muted, size: fontSize, textOverflow: textOverflow2, weight: textWeight, children: text2 }) }),
+    IconRightComponent && /* @__PURE__ */ jsxs(Text, { as: "span", flex: "none", muted: !0, size: fontSize, children: [
+      isValidElement(IconRightComponent) && IconRightComponent,
+      isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
+    ] })
+  ] }), $[46] = IconComponent, $[47] = IconRightComponent, $[48] = align, $[49] = fontSize, $[50] = gap, $[51] = gapX, $[52] = gapY, $[53] = justify, $[54] = muted, $[55] = padding, $[56] = paddingBottom, $[57] = paddingLeft, $[58] = paddingRight, $[59] = paddingTop, $[60] = paddingX, $[61] = paddingY, $[62] = text2, $[63] = textAlign, $[64] = textOverflow2, $[65] = textWeight, $[66] = t7) : t7 = $[66];
+  let t8;
+  $[67] !== children || $[68] !== padding || $[69] !== paddingBottom || $[70] !== paddingLeft || $[71] !== paddingRight || $[72] !== paddingTop || $[73] !== paddingX || $[74] !== paddingY ? (t8 = children && /* @__PURE__ */ jsx(Box, { as: "span", flex: 1, padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight, children }), $[67] = children, $[68] = padding, $[69] = paddingBottom, $[70] = paddingLeft, $[71] = paddingRight, $[72] = paddingTop, $[73] = paddingX, $[74] = paddingY, $[75] = t8) : t8 = $[75];
+  let t9;
+  return $[76] !== Element2 || $[77] !== rest || $[78] !== t1 || $[79] !== t2 || $[80] !== t3 || $[81] !== t4 || $[82] !== t5 || $[83] !== t6 || $[84] !== t7 || $[85] !== t8 || $[86] !== type ? (t9 = /* @__PURE__ */ jsxs(Element2, { "data-ui": "Button", ...rest, className: t1, "data-disabled": t2, "data-selected": t3, disabled: t4, href: t5, type, children: [
+    t6,
+    t7,
+    t8
+  ] }), $[76] = Element2, $[77] = rest, $[78] = t1, $[79] = t2, $[80] = t3, $[81] = t4, $[82] = t5, $[83] = t6, $[84] = t7, $[85] = t8, $[86] = type, $[87] = t9) : t9 = $[87], t9;
 }
 function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   const $ = c(4);
@@ -437,9 +439,9 @@ function useMatchMedia(mediaQueryString, getServerSnapshot2) {
   return $[2] !== mediaQueryString ? (t1 = () => window.matchMedia(mediaQueryString).matches, $[2] = mediaQueryString, $[3] = t1) : t1 = $[3], useSyncExternalStore(t0, t1, getServerSnapshot2);
 }
 function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$a : t0);
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$c : t0);
 }
-function _temp$a() {
+function _temp$c() {
   return !1;
 }
 const origin = {
@@ -488,7 +490,7 @@ function createGlobalScopedContext(key2, defaultValue) {
   const symbolMap = globalScope;
   return symbolMap[symbol] = symbolMap[symbol] || createContext(defaultValue), symbolMap[symbol];
 }
-const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v3/boundaryElement", null), DEFAULT_VALUE = {
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v4/boundaryElement", null), DEFAULT_VALUE = {
   version: 0,
   element: null
 };
@@ -502,7 +504,7 @@ function getElementRef(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
-const CardContext = createGlobalScopedContext("@sanity/ui/v3/card", null);
+const CardContext = createGlobalScopedContext("@sanity/ui/v4/card", null);
 function CardProvider(props) {
   const $ = c(7), {
     children,
@@ -526,7 +528,7 @@ function useCard() {
     throw new Error("useCard(): missing context value");
   return card2;
 }
-const key = "@sanity/ui/v3/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
+const key = "@sanity/ui/v4/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
 elementMap[elementKey] = null;
 const defaultContextValue = {
   version: 0,
@@ -564,7 +566,7 @@ function getLayerContext(contextValue) {
     return contextValue;
   throw new Error("could not get layer context");
 }
-const LayerContext = createGlobalScopedContext("@sanity/ui/v3/layer", null);
+const LayerContext = createGlobalScopedContext("@sanity/ui/v4/layer", null);
 function useLayer() {
   const value = use(LayerContext);
   if (!value)
@@ -591,9 +593,11 @@ const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER
 };
 function size(options) {
   const {
-    apply,
     margins,
-    padding = 0
+    padding = 0,
+    constrainSize,
+    matchReferenceWidth,
+    referenceWidthRef
   } = options;
   return {
     name: "@sanity/ui/size",
@@ -615,12 +619,9 @@ function size(options) {
       });
       let maxWidth = 1 / 0, maxHeight = 1 / 0;
       const floatingW = floating.width, floatingH = floating.height;
-      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3]
-      });
+      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom));
+      const availableWidth = maxWidth - margins[1] - margins[3], availableHeight = maxHeight - margins[0] - margins[2], referenceWidth = reference.width - margins[1] - margins[3];
+      referenceWidthRef.current = referenceWidth, matchReferenceWidth && (elements.floating.style.width = `${referenceWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${availableWidth}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
       const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
       return floatingW !== targetW || floatingH !== targetH ? {
         reset: {
@@ -907,13 +908,13 @@ function LayerProvider(props) {
         [childLevel]: prevLen + 1
       };
       return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize(_temp$9), () => {
+    }) : setSize(_temp$b), () => {
       childLevel !== void 0 ? setChildLayers((state_0) => {
         const nextState_0 = {
           ...state_0
         };
         return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
-      }) : setSize(_temp2$2), parentDispose?.();
+      }) : setSize(_temp2$3), parentDispose?.();
     };
   }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
   const registerChild = t3;
@@ -932,10 +933,10 @@ function LayerProvider(props) {
   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) {
+function _temp2$3(v_0) {
   return v_0 - 1;
 }
-function _temp$9(v) {
+function _temp$b(v) {
   return v + 1;
 }
 const DEFAULT_LAYER_ELEMENT = "div";
@@ -1036,77 +1037,80 @@ function ViewportOverlay() {
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }
 function Popover(props) {
-  const boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    as = DEFAULT_POPOVER_ELEMENT,
-    children: childProp,
-    className,
-    constrainSize = !1,
-    content: content2,
-    disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
+  const $ = c(111), boundaryElementContext = useBoundaryElement(), t0 = props;
+  let _fallbackPlacements, _floatingBoundary, _referenceBoundary, childProp, className, content2, disabled, forwardedRef, matchReferenceWidth, modal, open, padding, portal, referenceElement, rest, scheme, t1, t10, t11, t12, t13, t14, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+  if ($[0] !== t0) {
+    const {
+      __unstable_margins: t152,
+      animate: t162,
+      arrow: t172,
+      as: t182,
+      children: t192,
+      className: t202,
+      constrainSize: t212,
+      content: t222,
+      disabled: t232,
+      fallbackPlacements: t242,
+      matchReferenceWidth: t252,
+      floatingBoundary: t262,
+      modal: t272,
+      onActivate,
+      open: t282,
+      overflow: t292,
+      padding: t302,
+      placement: t312,
+      placementStrategy: t32,
+      portal: t33,
+      preventOverflow: t34,
+      radius: t35,
+      ref: t36,
+      referenceBoundary: t37,
+      referenceElement: t38,
+      scheme: t39,
+      shadow: t40,
+      tone: t41,
+      width: t42,
+      zOffset: t43,
+      updateRef: t44,
+      ...t45
+    } = t0;
+    t1 = t152, t2 = t162, t3 = t172, t4 = t182, childProp = t192, className = t202, t5 = t212, content2 = t222, disabled = t232, _fallbackPlacements = t242, matchReferenceWidth = t252, _floatingBoundary = t262, modal = t272, open = t282, t6 = t292, padding = t302, t7 = t312, t8 = t32, portal = t33, t9 = t34, t10 = t35, forwardedRef = t36, _referenceBoundary = t37, referenceElement = t38, scheme = t39, t11 = t40, t12 = t41, t13 = t42, t14 = t43, updateRef = t44, rest = t45, $[0] = t0, $[1] = _fallbackPlacements, $[2] = _floatingBoundary, $[3] = _referenceBoundary, $[4] = childProp, $[5] = className, $[6] = content2, $[7] = disabled, $[8] = forwardedRef, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = padding, $[13] = portal, $[14] = referenceElement, $[15] = rest, $[16] = scheme, $[17] = t1, $[18] = t10, $[19] = t11, $[20] = t12, $[21] = t13, $[22] = t14, $[23] = t2, $[24] = t3, $[25] = t4, $[26] = t5, $[27] = t6, $[28] = t7, $[29] = t8, $[30] = t9, $[31] = updateRef;
+  } else
+    _fallbackPlacements = $[1], _floatingBoundary = $[2], _referenceBoundary = $[3], childProp = $[4], className = $[5], content2 = $[6], disabled = $[7], forwardedRef = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], padding = $[12], portal = $[13], referenceElement = $[14], rest = $[15], scheme = $[16], t1 = $[17], t10 = $[18], t11 = $[19], t12 = $[20], t13 = $[21], t14 = $[22], t2 = $[23], t3 = $[24], t4 = $[25], t5 = $[26], t6 = $[27], t7 = $[28], t8 = $[29], t9 = $[30], updateRef = $[31];
+  const margins = t1 === void 0 ? DEFAULT_POPOVER_MARGINS : t1, _animate = t2 === void 0 ? !1 : t2, arrowProp = t3 === void 0 ? !1 : t3, as = t4 === void 0 ? DEFAULT_POPOVER_ELEMENT : t4, constrainSize = t5 === void 0 ? !1 : t5, overflow = t6 === void 0 ? "hidden" : t6, placementProp = t7 === void 0 ? "bottom" : t7, placementStrategy = t8 === void 0 ? "flip" : t8, preventOverflow = t9 === void 0 ? !0 : t9, radius = t10 === void 0 ? 3 : t10, shadow = t11 === void 0 ? 3 : t11, tone = t12 === void 0 ? "inherit" : t12, widthProp = t13 === void 0 ? "auto" : t13, zOffsetProp = t14 === void 0 ? Z_OFFSETS.popover : t14, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? boundaryElementContext.element, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, zOffset = useResponsiveProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null);
+  let t15;
+  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t15 = () => ref.current, $[32] = t15) : t15 = $[32], useImperativeHandle(forwardedRef, t15);
+  const referenceWidthRef = useRef(void 0);
+  let t16;
+  $[33] !== animate || $[34] !== arrowProp || $[35] !== constrainSize || $[36] !== fallbackPlacements || $[37] !== floatingBoundary || $[38] !== margins || $[39] !== matchReferenceWidth || $[40] !== placementProp || $[41] !== placementStrategy || $[42] !== preventOverflow || $[43] !== referenceBoundary ? (t16 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
     matchReferenceWidth,
-    floatingBoundary = boundaryElementContext.element,
-    modal,
-    onActivate,
-    open,
-    overflow = "hidden",
-    padding,
-    placement: placementProp = "bottom",
-    placementStrategy = "flip",
-    portal,
-    preventOverflow = !0,
-    radius = 3,
-    ref: forwardedRef,
-    referenceBoundary = boundaryElementContext.element,
-    referenceElement,
-    scheme,
-    shadow = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: zOffsetProp = Z_OFFSETS.popover,
-    updateRef,
-    ...rest
-  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, zOffset = useResponsiveProp(zOffsetProp), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const referenceWidthRef = useRef(void 0), middleware = useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(autoPlacement({
-      allowedPlacements: [placementProp].concat(fallbackPlacements)
-    })) : ret.push(flip({
-      boundary: floatingBoundary || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_POPOVER_PADDING,
-      rootBoundary
-    }))), ret.push(offset({
-      mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
-        availableWidth,
-        availableHeight,
-        elements,
-        referenceWidth
-      }) {
-        referenceWidthRef.current = referenceWidth, matchReferenceWidth && (elements.floating.style.width = `${referenceWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${availableWidth}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      margins,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, placementProp, placementStrategy, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary: "viewport"
+  }, $[33] = animate, $[34] = arrowProp, $[35] = constrainSize, $[36] = fallbackPlacements, $[37] = floatingBoundary, $[38] = margins, $[39] = matchReferenceWidth, $[40] = placementProp, $[41] = placementStrategy, $[42] = preventOverflow, $[43] = referenceBoundary, $[44] = t16) : t16 = $[44];
+  const middleware = useMiddleware$1(t16);
+  let t17;
+  $[45] !== referenceElement ? (t17 = referenceElement ? {
+    reference: referenceElement
+  } : void 0, $[45] = referenceElement, $[46] = t17) : t17 = $[46];
+  let t18;
+  $[47] !== middleware || $[48] !== placementProp || $[49] !== t17 ? (t18 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: t17
+  }, $[47] = middleware, $[48] = placementProp, $[49] = t17, $[50] = t18) : t18 = $[50];
+  const {
     x,
     y,
     middlewareData,
@@ -1114,38 +1118,139 @@ function Popover(props) {
     refs,
     strategy,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-    elements: referenceElement ? {
-      reference: referenceElement
-    } : void 0
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = useCallback((arrowEl) => {
-    arrowRef.current = arrowEl;
-  }, []), setFloating = useCallback((node) => {
+  } = useFloating(t18), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
+  let t19;
+  $[51] !== refs ? (t19 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = useCallback((node_0) => {
-    if (refs.setReference(node_0), !childProp) return;
-    const childRef = getElementRef(childProp);
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = useMemo(() => referenceElement ? childProp : childProp ? cloneElement(childProp, {
-    ref: setReference
-  }) : null, [childProp, referenceElement, setReference]);
-  if (useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), disabled)
-    return childProp || /* @__PURE__ */ jsx(Fragment, {});
-  const node_1 = /* @__PURE__ */ jsxs(Fragment, { children: [
-    modal && /* @__PURE__ */ jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: popover({
-      className
-    }), hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, tone, strategy, x, y, zOffset, children: content2 })
-  ] }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_1 }) }) : node_1);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+  }, $[51] = refs, $[52] = t19) : t19 = $[52];
+  const setFloating = t19;
+  let t20;
+  $[53] !== childProp ? (t20 = childProp ? getElementRef(childProp) : null, $[53] = childProp, $[54] = t20) : t20 = $[54];
+  let t21;
+  $[55] !== refs.reference.current ? (t21 = () => refs.reference.current, $[55] = refs.reference.current, $[56] = t21) : t21 = $[56], useImperativeHandle(t20, t21);
+  let t22;
+  bb0: {
+    if (referenceElement) {
+      t22 = childProp;
+      break bb0;
+    }
+    if (!childProp) {
+      t22 = null;
+      break bb0;
+    }
+    let t232;
+    $[57] !== childProp || $[58] !== refs.setReference ? (t232 = cloneElement(childProp, {
+      ref: refs.setReference
+    }), $[57] = childProp, $[58] = refs.setReference, $[59] = t232) : t232 = $[59], t22 = t232;
+  }
+  const child = t22;
+  let t23, t24;
+  if ($[60] !== update ? (t23 = () => update, t24 = [update], $[60] = update, $[61] = t23, $[62] = t24) : (t23 = $[61], t24 = $[62]), useImperativeHandle(updateRef, t23, t24), disabled) {
+    let t252;
+    return $[63] !== childProp ? (t252 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[63] = childProp, $[64] = t252) : t252 = $[64], t252;
+  }
+  let t25;
+  $[65] !== modal ? (t25 = modal && /* @__PURE__ */ jsx(ViewportOverlay, {}), $[65] = modal, $[66] = t25) : t25 = $[66];
+  let t26;
+  $[67] !== className ? (t26 = popover({
+    className
+  }), $[67] = className, $[68] = t26) : t26 = $[68];
+  let t27;
+  $[69] !== animate || $[70] !== arrowProp || $[71] !== arrowX || $[72] !== arrowY || $[73] !== as || $[74] !== content2 || $[75] !== margins || $[76] !== originX || $[77] !== originY || $[78] !== overflow || $[79] !== padding || $[80] !== placement || $[81] !== radius || $[82] !== referenceHidden || $[83] !== rest || $[84] !== scheme || $[85] !== setFloating || $[86] !== shadow || $[87] !== strategy || $[88] !== t26 || $[89] !== tone || $[90] !== widthProp || $[91] !== x || $[92] !== y || $[93] !== zOffset ? (t27 = /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef, arrowX, arrowY, as, className: t26, hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, tone, strategy, x, y, zOffset, children: content2 }), $[69] = animate, $[70] = arrowProp, $[71] = arrowX, $[72] = arrowY, $[73] = as, $[74] = content2, $[75] = margins, $[76] = originX, $[77] = originY, $[78] = overflow, $[79] = padding, $[80] = placement, $[81] = radius, $[82] = referenceHidden, $[83] = rest, $[84] = scheme, $[85] = setFloating, $[86] = shadow, $[87] = strategy, $[88] = t26, $[89] = tone, $[90] = widthProp, $[91] = x, $[92] = y, $[93] = zOffset, $[94] = t27) : t27 = $[94];
+  let t28;
+  $[95] !== t25 || $[96] !== t27 ? (t28 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t25,
+    t27
+  ] }), $[95] = t25, $[96] = t27, $[97] = t28) : t28 = $[97];
+  const node_0 = t28;
+  let t29;
+  $[98] !== card2 || $[99] !== node_0 || $[100] !== open || $[101] !== portal || $[102] !== scheme || $[103] !== tone ? (t29 = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0), $[98] = card2, $[99] = node_0, $[100] = open, $[101] = portal, $[102] = scheme, $[103] = tone, $[104] = t29) : t29 = $[104];
+  const children = t29;
+  let t30;
+  $[105] !== animate || $[106] !== children ? (t30 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[105] = animate, $[106] = children, $[107] = t30) : t30 = $[107];
+  let t31;
+  return $[108] !== child || $[109] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t30,
     child
-  ] });
+  ] }), $[108] = child, $[109] = t30, $[110] = t31) : t31 = $[110], t31;
+}
+function useMiddleware$1(t0) {
+  const $ = c(36), {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== placementProp || $[9] !== placementStrategy || $[10] !== preventOverflow || $[11] !== referenceBoundary || $[12] !== referenceWidthRef || $[13] !== rootBoundary) {
+    if (ret = [], constrainSize || preventOverflow)
+      if (placementStrategy === "autoPlacement") {
+        let t12;
+        $[15] !== fallbackPlacements || $[16] !== placementProp ? (t12 = autoPlacement({
+          allowedPlacements: [placementProp].concat(fallbackPlacements)
+        }), $[15] = fallbackPlacements, $[16] = placementProp, $[17] = t12) : t12 = $[17], ret.push(t12);
+      } else {
+        const t12 = floatingBoundary || void 0;
+        let t22;
+        $[18] !== fallbackPlacements || $[19] !== rootBoundary || $[20] !== t12 ? (t22 = flip({
+          boundary: t12,
+          fallbackPlacements,
+          padding: DEFAULT_POPOVER_PADDING,
+          rootBoundary
+        }), $[18] = fallbackPlacements, $[19] = rootBoundary, $[20] = t12, $[21] = t22) : t22 = $[21], ret.push(t22);
+      }
+    let t1;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel") ? (t1 = offset({
+      mainAxis: DEFAULT_POPOVER_DISTANCE
+    }), $[22] = t1) : t1 = $[22], ret.push(t1), constrainSize || matchReferenceWidth) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[23] !== constrainSize || $[24] !== margins || $[25] !== matchReferenceWidth || $[26] !== referenceWidthRef || $[27] !== t22 ? (t32 = size({
+        boundaryElement: t22,
+        constrainSize,
+        margins,
+        matchReferenceWidth,
+        padding: DEFAULT_POPOVER_PADDING,
+        referenceWidthRef
+      }), $[23] = constrainSize, $[24] = margins, $[25] = matchReferenceWidth, $[26] = referenceWidthRef, $[27] = t22, $[28] = t32) : t32 = $[28], ret.push(t32);
+    }
+    if (preventOverflow) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[29] !== rootBoundary || $[30] !== t22 ? (t32 = shift({
+        boundary: t22,
+        rootBoundary,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[29] = rootBoundary, $[30] = t22, $[31] = t32) : t32 = $[31], ret.push(t32);
+    }
+    if (arrowProp) {
+      let t22;
+      $[32] !== arrowRef ? (t22 = arrow({
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[32] = arrowRef, $[33] = t22) : t22 = $[33], ret.push(t22);
+    }
+    animate && ret.push(origin);
+    const t2 = referenceBoundary || void 0;
+    let t3;
+    $[34] !== t2 ? (t3 = hide({
+      boundary: t2,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    }), $[34] = t2, $[35] = t3) : t3 = $[35], ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = placementProp, $[9] = placementStrategy, $[10] = preventOverflow, $[11] = referenceBoundary, $[12] = referenceWidthRef, $[13] = rootBoundary, $[14] = ret;
+  } else
+    ret = $[14];
+  return ret;
 }
 const DEFAULT_SELECTABLE_ELEMENT = "button";
 function Selectable(props) {
@@ -1231,14 +1336,14 @@ function TextInput(props) {
   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;
   $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$8;
+  const handleClearMouseDown = _temp$a;
   let t10;
   $[24] !== onClear ? (t10 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
   }, $[24] = onClear, $[25] = t10) : t10 = $[25];
   const handleClearClick = t10;
   let t11;
-  $[26] !== responsivePadding ? (t11 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$1)), $[26] = responsivePadding, $[27] = t11) : t11 = $[27];
+  $[26] !== responsivePadding ? (t11 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$2)), $[26] = responsivePadding, $[27] = t11) : t11 = $[27];
   const clearButtonBoxPadding = t11;
   let t12;
   $[28] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp3)), $[28] = responsivePadding, $[29] = t12) : t12 = $[29];
@@ -1304,11 +1409,11 @@ function _temp3(t0) {
   const [key_0, value_0] = t0;
   return value_0 === 0 ? [key_0, 0] : value_0 === 1 ? [key_0, 0] : value_0 === 2 ? [key_0, 1] : [key_0, typeof value_0 == "number" ? value_0 - 1 : 0];
 }
-function _temp2$1(t0) {
+function _temp2$2(t0) {
   const [key2, value] = t0;
   return value === 0 ? [key2, 0] : value === 1 ? [key2, 1] : value === 2 ? [key2, 1] : [key2, typeof value == "number" ? value - 2 : 0];
 }
-function _temp$8(event) {
+function _temp$a(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function AutocompleteOption(props) {
@@ -1375,16 +1480,18 @@ function autocompleteReducer(state, msg) {
 }
 const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_AUTOCOMPLETE_ELEMENT = "input", DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1;
 function Autocomplete(props) {
-  const {
-    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
-    border = !0,
+  const $ = c(181), t0 = props;
+  let customValidity, disabled, filterOptionProp, forwardedRef, icon, id, loading, onBlur, onChange, onFocus, onQueryChange, onSelect, openButton, openOnFocus, optionsProp, prefix, readOnly, relatedElements, renderOptionProp, renderPopover, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, valueProp;
+  $[0] !== t0 ? ({
+    as: t1,
+    border: t2,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 2,
+    fontSize: t3,
     icon,
     id,
-    listBox = EMPTY_RECORD,
+    listBox: t4,
     loading,
     onBlur,
     onChange,
@@ -1394,36 +1501,61 @@ function Autocomplete(props) {
     openButton,
     openOnFocus,
     options: optionsProp,
-    padding: paddingProp = 3,
-    popover: popover2 = EMPTY_RECORD,
+    padding: t5,
+    popover: t6,
     prefix,
-    radius = 2,
+    radius: t7,
     readOnly,
     ref: forwardedRef,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
-    renderValue = DEFAULT_RENDER_VALUE,
+    renderValue: t8,
     suffix,
     value: valueProp,
     ...rest
-  } = props, [state, dispatch] = useReducer(autocompleteReducer, {
-    activeValue: valueProp || null,
+  } = t0, $[0] = t0, $[1] = customValidity, $[2] = disabled, $[3] = filterOptionProp, $[4] = forwardedRef, $[5] = icon, $[6] = id, $[7] = loading, $[8] = onBlur, $[9] = onChange, $[10] = onFocus, $[11] = onQueryChange, $[12] = onSelect, $[13] = openButton, $[14] = openOnFocus, $[15] = optionsProp, $[16] = prefix, $[17] = readOnly, $[18] = relatedElements, $[19] = renderOptionProp, $[20] = renderPopover, $[21] = rest, $[22] = suffix, $[23] = t1, $[24] = t2, $[25] = t3, $[26] = t4, $[27] = t5, $[28] = t6, $[29] = t7, $[30] = t8, $[31] = valueProp) : (customValidity = $[1], disabled = $[2], filterOptionProp = $[3], forwardedRef = $[4], icon = $[5], id = $[6], loading = $[7], onBlur = $[8], onChange = $[9], onFocus = $[10], onQueryChange = $[11], onSelect = $[12], openButton = $[13], openOnFocus = $[14], optionsProp = $[15], prefix = $[16], readOnly = $[17], relatedElements = $[18], renderOptionProp = $[19], renderPopover = $[20], rest = $[21], suffix = $[22], t1 = $[23], t2 = $[24], t3 = $[25], t4 = $[26], t5 = $[27], t6 = $[28], t7 = $[29], t8 = $[30], valueProp = $[31]);
+  const as = t1 === void 0 ? DEFAULT_AUTOCOMPLETE_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, fontSize = t3 === void 0 ? 2 : t3, listBox = t4 === void 0 ? EMPTY_RECORD : t4, paddingProp = t5 === void 0 ? 3 : t5, popover2 = t6 === void 0 ? EMPTY_RECORD : t6, radius = t7 === void 0 ? 2 : t7, renderValue = t8 === void 0 ? DEFAULT_RENDER_VALUE : t8, t9 = valueProp || null, t10 = valueProp || null;
+  let t11;
+  $[32] !== t10 || $[33] !== t9 ? (t11 = {
+    activeValue: t9,
     focused: !1,
     listFocused: !1,
     query: null,
-    value: valueProp || null
-  }), {
+    value: t10
+  }, $[32] = t10, $[33] = t9, $[34] = t11) : t11 = $[34];
+  const [state, dispatch] = useReducer(autocompleteReducer, t11), {
     activeValue,
     focused,
     listFocused,
     query,
     value
-  } = state, defaultRenderOption = useCallback(({
-    value: value_0
-  }) => /* @__PURE__ */ jsx(Selectable, { as: "button", padding: paddingProp, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
-  useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
+  } = state;
+  let t12;
+  $[35] !== fontSize || $[36] !== paddingProp ? (t12 = (t132) => {
+    const {
+      value: value_0
+    } = t132;
+    return /* @__PURE__ */ jsx(Selectable, { as: "button", padding: paddingProp, radius: 2, children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) });
+  }, $[35] = fontSize, $[36] = paddingProp, $[37] = t12) : t12 = $[37];
+  const renderOption = typeof renderOptionProp == "function" ? renderOptionProp : t12, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), [inputElement, setInputElement] = useState(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
+  let t13, t14;
+  $[38] !== inputElement ? (t13 = () => inputElement, t14 = [inputElement], $[38] = inputElement, $[39] = t13, $[40] = t14) : (t13 = $[39], t14 = $[40]), useImperativeHandle(inputElementRef, t13, t14);
+  let t15, t16;
+  $[41] !== inputElement ? (t15 = () => inputElement, t16 = [inputElement], $[41] = inputElement, $[42] = t15, $[43] = t16) : (t15 = $[42], t16 = $[43]), useImperativeHandle(forwardedRef, t15, t16);
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useResponsiveProp(paddingProp);
+  let t17;
+  $[44] !== options || $[45] !== value ? (t17 = value !== null ? options.find((o) => o.value === value) : void 0, $[44] = options, $[45] = value, $[46] = t17) : t17 = $[46];
+  const currentOption = t17;
+  let t18;
+  if ($[47] !== filterOption || $[48] !== options || $[49] !== query) {
+    let t192;
+    $[51] !== filterOption || $[52] !== query ? (t192 = (option) => query ? filterOption(query, option) : !0, $[51] = filterOption, $[52] = query, $[53] = t192) : t192 = $[53], t18 = options.filter(t192), $[47] = filterOption, $[48] = options, $[49] = query, $[50] = t18;
+  } else
+    t18 = $[50];
+  const filteredOptions = t18, filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null;
+  let t19;
+  $[54] !== onBlur || $[55] !== onQueryChange || $[56] !== relatedElements ? (t19 = (event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -1440,20 +1572,30 @@ function Autocomplete(props) {
         type: "root/blur"
       }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = useCallback((event_0) => {
+  }, $[54] = onBlur, $[55] = onQueryChange, $[56] = relatedElements, $[57] = t19) : t19 = $[57];
+  const handleRootBlur = t19;
+  let t20;
+  $[58] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_0) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = listBoxElement?.contains(focusedElement) || !1;
     listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
       type: "root/setListFocused",
       listFocused: listFocused_0
     }));
-  }, []), handleOptionSelect = useCallback((v) => {
+  }, $[58] = t20) : t20 = $[58];
+  const handleRootFocus = t20;
+  let t21;
+  $[59] !== onChange || $[60] !== onQueryChange || $[61] !== onSelect ? (t21 = (v) => {
     dispatch({
       type: "value/change",
       value: v
     }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = useCallback((event_1) => {
+  }, $[59] = onChange, $[60] = onQueryChange, $[61] = onSelect, $[62] = t21) : t21 = $[62];
+  const handleOptionSelect = t21;
+  let t22;
+  $[63] !== activeValue || $[64] !== filteredOptions || $[65] !== filteredOptionsLen || $[66] !== onQueryChange ? (t22 = (event_1) => {
     if (event_1.key === "ArrowDown") {
-      if (event_1.preventDefault(), !filteredOptionsLen) return;
+      if (event_1.preventDefault(), !filteredOptionsLen)
+        return;
       const activeOption = filteredOptions.find((o_0) => o_0.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
       nextActiveOption && dispatch({
         type: "root/setActiveValue",
@@ -1463,7 +1605,8 @@ function Autocomplete(props) {
       return;
     }
     if (event_1.key === "ArrowUp") {
-      if (event_1.preventDefault(), !filteredOptionsLen) return;
+      if (event_1.preventDefault(), !filteredOptionsLen)
+        return;
       const activeOption_0 = filteredOptions.find((o_1) => o_1.value === activeValue), activeIndex_0 = activeOption_0 ? filteredOptions.indexOf(activeOption_0) : -1, nextActiveOption_0 = filteredOptions[activeIndex_0 === -1 ? filteredOptionsLen - 1 : (filteredOptionsLen + activeIndex_0 - 1) % filteredOptionsLen];
       nextActiveOption_0 && dispatch({
         type: "root/setActiveValue",
@@ -1483,35 +1626,58 @@ function Autocomplete(props) {
       inputElementRef.current?.focus();
       return;
     }
-  }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = useCallback((event_2) => {
+  }, $[63] = activeValue, $[64] = filteredOptions, $[65] = filteredOptionsLen, $[66] = onQueryChange, $[67] = t22) : t22 = $[67];
+  const handleRootKeyDown = t22;
+  let t23;
+  $[68] !== onQueryChange ? (t23 = (event_2) => {
     const nextQuery = event_2.currentTarget.value;
     dispatch({
       type: "input/change",
       query: nextQuery
     }), onQueryChange && onQueryChange(nextQuery);
-  }, [onQueryChange]), dispatchOpen = useCallback(() => {
+  }, $[68] = onQueryChange, $[69] = t23) : t23 = $[69];
+  const handleInputChange = t23;
+  let t24;
+  $[70] !== currentOption || $[71] !== renderValue || $[72] !== value ? (t24 = () => {
     dispatch({
       type: "root/open",
       query: value ? renderValue(value, currentOption) : ""
     });
-  }, [currentOption, renderValue, value]), handleInputFocus = useCallback((event_3) => {
+  }, $[70] = currentOption, $[71] = renderValue, $[72] = value, $[73] = t24) : t24 = $[73];
+  const dispatchOpen = t24;
+  let t25;
+  $[74] !== dispatchOpen || $[75] !== focused || $[76] !== onFocus || $[77] !== openOnFocus ? (t25 = (event_3) => {
     focused || (dispatch({
       type: "input/focus"
     }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
-  }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = useCallback(() => {
+  }, $[74] = dispatchOpen, $[75] = focused, $[76] = onFocus, $[77] = openOnFocus, $[78] = t25) : t25 = $[78];
+  const handleInputFocus = t25;
+  let t26;
+  $[79] === Symbol.for("react.memo_cache_sentinel") ? (t26 = () => {
     popoverMouseWithinRef.current = !0;
-  }, []), handlePopoverMouseLeave = useCallback(() => {
+  }, $[79] = t26) : t26 = $[79];
+  const handlePopoverMouseEnter = t26;
+  let t27;
+  $[80] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => {
     popoverMouseWithinRef.current = !1;
-  }, []), handleClearButtonClick = useCallback(() => {
+  }, $[80] = t27) : t27 = $[80];
+  const handlePopoverMouseLeave = t27;
+  let t28;
+  $[81] !== onChange || $[82] !== onQueryChange ? (t28 = () => {
     dispatch({
       type: "root/clear"
     }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
-  }, [onChange, onQueryChange]), handleClearButtonFocus = useCallback(() => {
+  }, $[81] = onChange, $[82] = onQueryChange, $[83] = t28) : t28 = $[83];
+  const handleClearButtonClick = t28;
+  let t29;
+  $[84] === Symbol.for("react.memo_cache_sentinel") ? (t29 = () => {
     dispatch({
       type: "input/focus"
     });
-  }, []);
-  useEffect(() => {
+  }, $[84] = t29) : t29 = $[84];
+  const handleClearButtonFocus = t29;
+  let t30, t31;
+  $[85] !== valueProp ? (t30 = () => {
     if (valueProp !== valuePropRef.current) {
       valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
         type: "value/change",
@@ -1523,14 +1689,19 @@ function Autocomplete(props) {
       type: "value/change",
       value: valueProp || null
     }));
-  }, [valueProp]), useEffect(() => {
+  }, t31 = [valueProp], $[85] = valueProp, $[86] = t30, $[87] = t31) : (t30 = $[86], t31 = $[87]), useEffect(t30, t31);
+  let t32, t33;
+  $[88] !== focused ? (t32 = () => {
     !focused && valueRef.current && dispatch({
       type: "root/setActiveValue",
       value: valueRef.current
     });
-  }, [focused]), useEffect(() => {
+  }, t33 = [focused], $[88] = focused, $[89] = t32, $[90] = t33) : (t32 = $[89], t33 = $[90]), useEffect(t32, t33);
+  let t34, t35;
+  $[91] !== activeValue || $[92] !== filteredOptions ? (t34 = () => {
     const listElement = listBoxElementRef.current;
-    if (!listElement) return;
+    if (!listElement)
+      return;
     const activeOption_1 = filteredOptions.find((o_2) => o_2.value === activeValue);
     if (activeOption_1) {
       const activeIndex_1 = filteredOptions.indexOf(activeOption_1), activeItemElement = listElement.childNodes[activeIndex_1];
@@ -1540,41 +1711,128 @@ function Autocomplete(props) {
         focusFirstDescendant(activeItemElement);
       }
     }
-  }, [activeValue, filteredOptions]);
-  const clearButton = useMemo(() => {
-    if (!loading && !disabled && value)
-      return {
+  }, t35 = [activeValue, filteredOptions], $[91] = activeValue, $[92] = filteredOptions, $[93] = t34, $[94] = t35) : (t34 = $[93], t35 = $[94]), useEffect(t34, t35);
+  let t36;
+  bb0: {
+    if (!loading && !disabled && value) {
+      let t372;
+      $[95] === Symbol.for("react.memo_cache_sentinel") ? (t372 = {
         "aria-label": "Clear",
         onFocus: handleClearButtonFocus
-      };
-  }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(() => Object.fromEntries(Object.entries(padding).map(([key2, value_1]) => value_1 === 0 ? [key2, 0] : value_1 === 1 ? [key2, 1] : value_1 === 2 ? [key2, 1] : [key2, value_1 - 2])), [padding]), openButtonPadding = useMemo(() => Object.values(padding).map((v_0) => Math.max(v_0 - 1, 0)), [padding]), openButtonProps = useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = useCallback((event_4) => {
+      }, $[95] = t372) : t372 = $[95], t36 = t372;
+      break bb0;
+    }
+    t36 = void 0;
+  }
+  const clearButton = t36;
+  let t37;
+  $[96] !== padding ? (t37 = Object.fromEntries(Object.entries(padding).map(_temp$9)), $[96] = padding, $[97] = t37) : t37 = $[97];
+  const openButtonBoxPadding = t37;
+  let t38;
+  $[98] !== padding ? (t38 = Object.values(padding).map(_temp2$1), $[98] = padding, $[99] = t38) : t38 = $[99];
+  const openButtonPadding = t38, openButtonProps = typeof openButton == "object" ? openButton : EMPTY_RECORD;
+  let t39;
+  $[100] !== dispatchOpen || $[101] !== openButtonProps ? (t39 = (event_4) => {
     dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
-  }, [openButtonProps, dispatchOpen]), openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsx(TextInput, { ...rest, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", as, border, clearButton, customValidity, disabled, fontSize, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = useCallback((event_5) => {
+  }, $[100] = dispatchOpen, $[101] = openButtonProps, $[102] = t39) : t39 = $[102];
+  const handleOpenClick = t39;
+  let t40;
+  $[103] !== disabled || $[104] !== expanded || $[105] !== fontSize || $[106] !== handleOpenClick || $[107] !== openButton || $[108] !== openButtonBoxPadding || $[109] !== openButtonPadding || $[110] !== openButtonProps || $[111] !== readOnly ? (t40 = !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, display: "block", fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, $[103] = disabled, $[104] = expanded, $[105] = fontSize, $[106] = handleOpenClick, $[107] = openButton, $[108] = openButtonBoxPadding, $[109] = openButtonPadding, $[110] = openButtonProps, $[111] = readOnly, $[112] = t40) : t40 = $[112];
+  const openButtonNode = t40;
+  let t41;
+  bb1: {
+    if (query === null) {
+      if (value !== null) {
+        let t422;
+        $[113] !== currentOption || $[114] !== renderValue || $[115] !== value ? (t422 = renderValue(value, currentOption), $[113] = currentOption, $[114] = renderValue, $[115] = value, $[116] = t422) : t422 = $[116], t41 = t422;
+        break bb1;
+      }
+      t41 = "";
+      break bb1;
+    }
+    t41 = query;
+  }
+  const inputValue = t41;
+  let t42;
+  $[117] !== listFocused ? (t42 = (event_5) => {
     event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
-  }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", gap: 1, id: listBoxId, ref: listBoxElementRef, role: "listbox", children: filteredOptions.map((option_0) => {
-    const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
-    return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
-      disabled: loading,
-      selected: active,
-      tabIndex: listFocused && active ? 0 : -1
-    }) }, option_0.value);
-  }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = useMemo(() => renderPopover ? renderPopover({
+  }, $[117] = listFocused, $[118] = t42) : t42 = $[118];
+  const handleListBoxKeyDown = t42;
+  let t43;
+  bb2: {
+    if (filteredOptions.length === 0) {
+      t43 = null;
+      break bb2;
+    }
+    let t442;
+    if ($[119] !== activeValue || $[120] !== currentOption || $[121] !== filteredOptions || $[122] !== handleOptionSelect || $[123] !== id || $[124] !== listFocused || $[125] !== loading || $[126] !== renderOption) {
+      let t453;
+      $[128] !== activeValue || $[129] !== currentOption || $[130] !== handleOptionSelect || $[131] !== id || $[132] !== listFocused || $[133] !== loading || $[134] !== renderOption ? (t453 = (option_0) => {
+        const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
+        return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
+          disabled: loading,
+          selected: active,
+          tabIndex: listFocused && active ? 0 : -1
+        }) }, option_0.value);
+      }, $[128] = activeValue, $[129] = currentOption, $[130] = handleOptionSelect, $[131] = id, $[132] = listFocused, $[133] = loading, $[134] = renderOption, $[135] = t453) : t453 = $[135], t442 = filteredOptions.map(t453), $[119] = activeValue, $[120] = currentOption, $[121] = filteredOptions, $[122] = handleOptionSelect, $[123] = id, $[124] = listFocused, $[125] = loading, $[126] = renderOption, $[127] = t442;
+    } else
+      t442 = $[127];
+    let t452;
+    $[136] !== listBoxId || $[137] !== t442 ? (t452 = /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", gap: 1, id: listBoxId, ref: listBoxElementRef, role: "listbox", children: t442 }), $[136] = listBoxId, $[137] = t442, $[138] = t452) : t452 = $[138];
+    let t462;
+    $[139] !== handleListBoxKeyDown || $[140] !== listBox || $[141] !== t452 ? (t462 = /* @__PURE__ */ jsx(Box, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: t452 }), $[139] = handleListBoxKeyDown, $[140] = listBox, $[141] = t452, $[142] = t462) : t462 = $[142], t43 = t462;
+  }
+  const content2 = t43;
+  let t44;
+  bb3: {
+    if (renderPopover) {
+      const t453 = !expanded;
+      let t462;
+      $[143] !== content2 || $[144] !== inputElement || $[145] !== renderPopover || $[146] !== t453 ? (t462 = /* @__PURE__ */ jsx(RenderPopover, { content: content2, hidden: t453, inputElement, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, resultsPopoverElementRef, renderPopover }), $[143] = content2, $[144] = inputElement, $[145] = renderPopover, $[146] = t453, $[147] = t462) : t462 = $[147], t44 = t462;
+      break bb3;
+    }
+    if (filteredOptionsLen === 0) {
+      t44 = null;
+      break bb3;
+    }
+    let t452;
+    $[148] !== content2 || $[149] !== expanded || $[150] !== inputElement || $[151] !== popover2 ? (t452 = /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElement, ...popover2 }), $[148] = content2, $[149] = expanded, $[150] = inputElement, $[151] = popover2, $[152] = t452) : t452 = $[152], t44 = t452;
+  }
+  const results = t44, t45 = loading && AnimatedSpinnerIcon, t46 = suffix || openButtonNode;
+  let t47;
+  $[153] !== activeItemId || $[154] !== as || $[155] !== border || $[156] !== clearButton || $[157] !== customValidity || $[158] !== disabled || $[159] !== expanded || $[160] !== fontSize || $[161] !== handleClearButtonClick || $[162] !== handleInputChange || $[163] !== handleInputFocus || $[164] !== icon || $[165] !== id || $[166] !== inputValue || $[167] !== listBoxId || $[168] !== padding || $[169] !== prefix || $[170] !== radius || $[171] !== readOnly || $[172] !== rest || $[173] !== t45 || $[174] !== t46 ? (t47 = /* @__PURE__ */ jsx(TextInput, { ...rest, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", as, border, clearButton, customValidity, disabled, fontSize, icon, iconRight: t45, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: setInputElement, role: "combobox", spellCheck: !1, suffix: t46, value: inputValue }), $[153] = activeItemId, $[154] = as, $[155] = border, $[156] = clearButton, $[157] = customValidity, $[158] = disabled, $[159] = expanded, $[160] = fontSize, $[161] = handleClearButtonClick, $[162] = handleInputChange, $[163] = handleInputFocus, $[164] = icon, $[165] = id, $[166] = inputValue, $[167] = listBoxId, $[168] = padding, $[169] = prefix, $[170] = radius, $[171] = readOnly, $[172] = rest, $[173] = t45, $[174] = t46, $[175] = t47) : t47 = $[175];
+  let t48;
+  return $[176] !== handleRootBlur || $[177] !== handleRootKeyDown || $[178] !== results || $[179] !== t47 ? (t48 = /* @__PURE__ */ jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
+    t47,
+    results
+  ] }), $[176] = handleRootBlur, $[177] = handleRootKeyDown, $[178] = results, $[179] = t47, $[180] = t48) : t48 = $[180], t48;
+}
+function _temp2$1(v_0) {
+  return Math.max(v_0 - 1, 0);
+}
+function _temp$9(t0) {
+  const [key2, value_1] = t0;
+  return value_1 === 0 ? [key2, 0] : value_1 === 1 ? [key2, 1] : value_1 === 2 ? [key2, 1] : [key2, value_1 - 2];
+}
+function RenderPopover({
+  renderPopover,
+  content: content2,
+  hidden,
+  inputElement,
+  onMouseEnter,
+  onMouseLeave,
+  resultsPopoverElementRef
+}) {
+  return renderPopover({
     content: content2,
-    hidden: !expanded,
-    inputElement: inputElementRef.current,
-    onMouseEnter: handlePopoverMouseEnter,
-    onMouseLeave: handlePopoverMouseLeave
-  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover2 }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover2, renderPopover]);
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
-      input,
-      results
-    ] })
-  );
+    hidden,
+    inputElement,
+    onMouseEnter,
+    onMouseLeave
+  }, resultsPopoverElementRef);
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = c(9), elementsArg = t0 === void 0 ? _temp$7 : t0;
+  const $ = c(9), elementsArg = t0 === void 0 ? _temp$8 : t0;
   let t1;
   $[0] !== boundaryElement || $[1] !== elementsArg || $[2] !== listener ? (t1 = (evt) => {
     if (!listener)
@@ -1604,38 +1862,97 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
   let t3;
   $[7] !== hasListener ? (t3 = [hasListener], $[7] = hasListener, $[8] = t3) : t3 = $[8], useEffect(t2, t3), useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$7() {
+function _temp$8() {
   return EMPTY_ARRAY;
 }
 const DEFAULT_BREADCRUMBS_ELEMENT = "nav";
 function Breadcrumbs(props) {
-  const {
-    as = DEFAULT_BREADCRUMBS_ELEMENT,
+  const $ = c(37), t0 = props;
+  let children, className, expandButtonProps, maxLength, rest, separator, t1, t2, t3, t4;
+  $[0] !== t0 ? ({
+    as: t1,
     children,
     className,
     expandButton: expandButtonProps,
-    gap = 2,
-    gapX,
-    gapY,
+    gap: t2,
+    gapX: t3,
+    gapY: t4,
     maxLength,
     separator,
     ...rest
-  } = props, [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
-  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
-  const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
-    const len = rawItems.length;
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsx(Stack, { as: "ol", gap: gapY, overflow: "auto", children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: open ? collapse : expand, ref: expandElementRef, selected: open }) }, "button"), ...rawItems.slice(len - afterLength)];
-    }
-    return rawItems;
-  }, [collapse, expand, expandButtonProps, gapY, maxLength, open, rawItems]);
-  return /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: breadcrumbs({
+  } = t0, $[0] = t0, $[1] = children, $[2] = className, $[3] = expandButtonProps, $[4] = maxLength, $[5] = rest, $[6] = separator, $[7] = t1, $[8] = t2, $[9] = t3, $[10] = t4) : (children = $[1], className = $[2], expandButtonProps = $[3], maxLength = $[4], rest = $[5], separator = $[6], t1 = $[7], t2 = $[8], t3 = $[9], t4 = $[10]);
+  const as = t1 === void 0 ? DEFAULT_BREADCRUMBS_ELEMENT : t1, gap = t2 === void 0 ? 2 : t2, gapX = t3 === void 0 ? gap : t3, gapY = t4 === void 0 ? gap : t4, [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => setOpen(!1), $[11] = t5) : t5 = $[11];
+  const collapse = t5;
+  let t6;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => setOpen(!0), $[12] = t6) : t6 = $[12];
+  const expand = t6;
+  let t7;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [expandElementRef.current, popoverElementRef.current], $[13] = t7) : t7 = $[13], useClickOutsideEvent(collapse, t7);
+  let t8;
+  $[14] !== children ? (t8 = Children.toArray(children).filter(isValidElement), $[14] = children, $[15] = t8) : t8 = $[15];
+  const rawItems = t8;
+  let t9;
+  $[16] !== expandButtonProps || $[17] !== gapY || $[18] !== maxLength || $[19] !== open || $[20] !== rawItems ? (t9 = {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps
+  }, $[16] = expandButtonProps, $[17] = gapY, $[18] = maxLength, $[19] = open, $[20] = rawItems, $[21] = t9) : t9 = $[21];
+  const items = useItems(t9);
+  let t10;
+  $[22] !== className ? (t10 = breadcrumbs({
     className
-  }), gap, gapX, gapY, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
-    /* @__PURE__ */ jsx(Box, { as: "li", children: item })
-  ] }, itemIndex)) });
+  }), $[22] = className, $[23] = t10) : t10 = $[23];
+  let t11;
+  if ($[24] !== items || $[25] !== separator) {
+    let t122;
+    $[27] !== separator ? (t122 = (item, itemIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
+      /* @__PURE__ */ jsx(Box, { as: "li", children: item })
+    ] }, itemIndex), $[27] = separator, $[28] = t122) : t122 = $[28], t11 = items.map(t122), $[24] = items, $[25] = separator, $[26] = t11;
+  } else
+    t11 = $[26];
+  let t12;
+  return $[29] !== as || $[30] !== gap || $[31] !== gapX || $[32] !== gapY || $[33] !== rest || $[34] !== t10 || $[35] !== t11 ? (t12 = /* @__PURE__ */ jsx(Flex, { as, "data-ui": "Breadcrumbs", ...rest, className: t10, gap, gapX, gapY, children: t11 }), $[29] = as, $[30] = gap, $[31] = gapX, $[32] = gapY, $[33] = rest, $[34] = t10, $[35] = t11, $[36] = t12) : t12 = $[36], t12;
+}
+function useItems(t0) {
+  const $ = c(30), {
+    collapse,
+    expand,
+    expandElementRef,
+    maxLength,
+    open,
+    popoverElementRef,
+    rawItems,
+    gapY,
+    expandButtonProps
+  } = t0, len = rawItems.length;
+  if (maxLength && len > maxLength) {
+    const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
+    let t1;
+    if ($[0] !== afterLength || $[1] !== beforeLength || $[2] !== collapse || $[3] !== expand || $[4] !== expandButtonProps || $[5] !== expandElementRef || $[6] !== gapY || $[7] !== len || $[8] !== open || $[9] !== popoverElementRef || $[10] !== rawItems) {
+      const t2 = rawItems.slice(0, beforeLength - 1);
+      let t3;
+      $[12] !== afterLength || $[13] !== beforeLength || $[14] !== len || $[15] !== rawItems ? (t3 = rawItems.slice(beforeLength - 1, len - afterLength), $[12] = afterLength, $[13] = beforeLength, $[14] = len, $[15] = rawItems, $[16] = t3) : t3 = $[16];
+      let t4;
+      $[17] !== gapY || $[18] !== t3 ? (t4 = /* @__PURE__ */ jsx(Stack, { as: "ol", gap: gapY, overflow: "auto", children: t3 }), $[17] = gapY, $[18] = t3, $[19] = t4) : t4 = $[19];
+      const t5 = open ? collapse : expand;
+      let t6;
+      $[20] !== expandButtonProps || $[21] !== expandElementRef || $[22] !== open || $[23] !== t5 ? (t6 = /* @__PURE__ */ jsx(Button, { mode: "bleed", padding: 0, text: "\u2026", ...expandButtonProps, onClick: t5, ref: expandElementRef, selected: open }), $[20] = expandButtonProps, $[21] = expandElementRef, $[22] = open, $[23] = t5, $[24] = t6) : t6 = $[24];
+      let t7;
+      $[25] !== open || $[26] !== popoverElementRef || $[27] !== t4 || $[28] !== t6 ? (t7 = /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: t4, open, padding: 2, placement: "top", portal: !0, ref: popoverElementRef, children: t6 }, "button"), $[25] = open, $[26] = popoverElementRef, $[27] = t4, $[28] = t6, $[29] = t7) : t7 = $[29], t1 = [...t2, t7, ...rawItems.slice(len - afterLength)], $[0] = afterLength, $[1] = beforeLength, $[2] = collapse, $[3] = expand, $[4] = expandButtonProps, $[5] = expandElementRef, $[6] = gapY, $[7] = len, $[8] = open, $[9] = popoverElementRef, $[10] = rawItems, $[11] = t1;
+    } else
+      t1 = $[11];
+    return t1;
+  }
+  return rawItems;
 }
 const DEFAULT_CONTAINER_ELEMENT = "div";
 function Container(props) {
@@ -1656,18 +1973,18 @@ function Container(props) {
   let t4;
   return $[8] !== as || $[9] !== rest || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { "data-ui": "Container", ...rest, as, className: t3 }), $[8] = as, $[9] = rest, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
 }
-function useGlobalKeyDown(onKeyDown) {
-  const $ = c(5);
+function useGlobalKeyDown(onKeyDown, options) {
+  const $ = c(7);
   let t0;
   $[0] !== onKeyDown ? (t0 = (event) => onKeyDown(event), $[0] = onKeyDown, $[1] = t0) : t0 = $[1];
   const handleKeyDown = useEffectEvent(t0);
   let t1;
-  $[2] !== handleKeyDown ? (t1 = () => {
+  $[2] !== handleKeyDown || $[3] !== options ? (t1 = () => {
     const handler = (event_0) => handleKeyDown(event_0);
-    return window.addEventListener("keydown", handler), () => window.removeEventListener("keydown", handler);
-  }, $[2] = handleKeyDown, $[3] = t1) : t1 = $[3];
+    return window.addEventListener("keydown", handler, options), () => window.removeEventListener("keydown", handler, options);
+  }, $[2] = handleKeyDown, $[3] = options, $[4] = t1) : t1 = $[4];
   let t2;
-  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[4] = t2) : t2 = $[4], useEffect(t1, t2);
+  $[5] !== options ? (t2 = [options], $[5] = options, $[6] = t2) : t2 = $[6], useEffect(t1, t2);
 }
 function isTargetWithinScope(boundaryElement, portalElement, target) {
   return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
@@ -1766,7 +2083,7 @@ function DialogCard(props) {
     t19
   ] }), $[55] = as, $[56] = rest, $[57] = t12, $[58] = t18, $[59] = t19, $[60] = t20) : t20 = $[60], t20;
 }
-const DialogContext = createGlobalScopedContext("@sanity/ui/v3/dialog", {
+const DialogContext = createGlobalScopedContext("@sanity/ui/v4/dialog", {
   version: 0
 });
 function useDialog() {
@@ -1925,7 +2242,7 @@ function Hotkeys(props) {
   let t4;
   return $[19] !== as || $[20] !== gap || $[21] !== gapX || $[22] !== gapY || $[23] !== rest || $[24] !== t3 ? (t4 = /* @__PURE__ */ jsx(Box, { as, "data-ui": "Hotkeys", ...rest, display: "flex", gap, gapX, gapY, children: t3 }), $[19] = as, $[20] = gap, $[21] = gapX, $[22] = gapY, $[23] = rest, $[24] = t3, $[25] = t4) : t4 = $[25], t4;
 }
-const MenuContext = createGlobalScopedContext("@sanity/ui/v3/menu", null);
+const MenuContext = createGlobalScopedContext("@sanity/ui/v4/menu", null);
 function _isFocusable(element) {
   return isHTMLAnchorElement(element) && element.getAttribute("data-disabled") !== "true" || isHTMLButtonElement(element) && !element.disabled;
 }
@@ -1963,16 +2280,24 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 function useMenuController(props) {
-  const {
+  const $ = c(21), {
     onKeyDown,
     originElement,
     shouldFocus,
     rootElementRef
-  } = props, elementsRef = useRef([]), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), activeElement = useMemo(() => elementsRef.current[activeIndex] || null, [activeIndex]), mounted = !!rootElementRef.current, setActiveIndex = useCallback((nextActiveIndex) => {
-    _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex;
-  }, []), mount = useCallback((element, selected) => {
-    if (!element) return () => {
-    };
+  } = props;
+  let t0;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = [], $[0] = t0) : t0 = $[0];
+  const elementsRef = useRef(t0), [activeIndex, _setActiveIndex] = useState(-1), activeIndexRef = useRef(activeIndex), [activeElement, setActiveElement] = useState(null);
+  let t1;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = (nextActiveIndex) => {
+    _setActiveIndex(nextActiveIndex), activeIndexRef.current = nextActiveIndex, setActiveElement(elementsRef.current[nextActiveIndex] || null);
+  }, $[1] = t1) : t1 = $[1];
+  const setActiveIndex = t1;
+  let t2;
+  $[2] !== rootElementRef ? (t2 = (element, selected) => {
+    if (!element)
+      return _temp$7;
     if (elementsRef.current.indexOf(element) === -1 && (elementsRef.current.push(element), _sortElements(rootElementRef.current, elementsRef.current)), selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
@@ -1981,7 +2306,10 @@ function useMenuController(props) {
       const idx = elementsRef.current.indexOf(element);
       idx > -1 && elementsRef.current.splice(idx, 1);
     };
-  }, [rootElementRef, setActiveIndex]), handleKeyDown = useCallback((event) => {
+  }, $[2] = rootElementRef, $[3] = t2) : t2 = $[3];
+  const mount = t2;
+  let t3;
+  $[4] !== onKeyDown || $[5] !== originElement ? (t3 = (event) => {
     if (event.key === "Tab") {
       originElement && originElement.focus();
       return;
@@ -1989,7 +2317,8 @@ function useMenuController(props) {
     if (event.key === "Home") {
       event.preventDefault(), event.stopPropagation();
       const el = _getFocusableElements(elementsRef.current)[0];
-      if (!el) return;
+      if (!el)
+        return;
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
       return;
@@ -1997,7 +2326,8 @@ function useMenuController(props) {
     if (event.key === "End") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_0 = _getFocusableElements(elementsRef.current), el_0 = focusableElements_0[focusableElements_0.length - 1];
-      if (!el_0) return;
+      if (!el_0)
+        return;
       const currentIndex_0 = elementsRef.current.indexOf(el_0);
       setActiveIndex(currentIndex_0);
       return;
@@ -2005,7 +2335,8 @@ function useMenuController(props) {
     if (event.key === "ArrowUp") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_1 = _getFocusableElements(elementsRef.current), focusableLen = focusableElements_1.length;
-      if (focusableLen === 0) return;
+      if (focusableLen === 0)
+        return;
       const focusedElement = elementsRef.current[activeIndexRef.current];
       let focusedIndex = focusableElements_1.indexOf(focusedElement);
       focusedIndex = (focusedIndex - 1 + focusableLen) % focusableLen;
@@ -2016,7 +2347,8 @@ function useMenuController(props) {
     if (event.key === "ArrowDown") {
       event.preventDefault(), event.stopPropagation();
       const focusableElements_2 = _getFocusableElements(elementsRef.current), focusableLen_0 = focusableElements_2.length;
-      if (focusableLen_0 === 0) return;
+      if (focusableLen_0 === 0)
+        return;
       const focusedElement_0 = elementsRef.current[activeIndexRef.current];
       let focusedIndex_0 = focusableElements_2.indexOf(focusedElement_0);
       focusedIndex_0 = (focusedIndex_0 + 1) % focusableLen_0;
@@ -2025,14 +2357,23 @@ function useMenuController(props) {
       return;
     }
     onKeyDown && onKeyDown(event);
-  }, [onKeyDown, originElement, setActiveIndex]), handleItemMouseEnter = useCallback((event_0) => {
+  }, $[4] = onKeyDown, $[5] = originElement, $[6] = t3) : t3 = $[6];
+  const handleKeyDown = t3;
+  let t4;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_0) => {
     const element_0 = event_0.currentTarget, currentIndex_3 = elementsRef.current.indexOf(element_0);
     setActiveIndex(currentIndex_3);
-  }, [setActiveIndex]), handleItemMouseLeave = useCallback(() => {
+  }, $[7] = t4) : t4 = $[7];
+  const handleItemMouseEnter = t4;
+  let t5;
+  $[8] !== rootElementRef ? (t5 = () => {
     setActiveIndex(-2), rootElementRef.current?.focus();
-  }, [rootElementRef, setActiveIndex]);
-  return useEffect(() => {
-    if (!mounted) return;
+  }, $[8] = rootElementRef, $[9] = t5) : t5 = $[9];
+  const handleItemMouseLeave = t5;
+  let t6, t7;
+  $[10] !== activeIndex || $[11] !== rootElementRef || $[12] !== shouldFocus ? (t6 = () => {
+    if (!rootElementRef.current)
+      return;
     const rafId = requestAnimationFrame(() => {
       if (activeIndex === -1) {
         if (shouldFocus === "first") {
@@ -2054,18 +2395,22 @@ function useMenuController(props) {
       (elementsRef.current[activeIndex] || null)?.focus();
     });
     return () => cancelAnimationFrame(rafId);
-  }, [activeIndex, mounted, setActiveIndex, shouldFocus]), {
+  }, t7 = [activeIndex, rootElementRef, setActiveIndex, shouldFocus], $[10] = activeIndex, $[11] = rootElementRef, $[12] = shouldFocus, $[13] = t6, $[14] = t7) : (t6 = $[13], t7 = $[14]), useEffect(t6, t7);
+  let t8;
+  return $[15] !== activeElement || $[16] !== activeIndex || $[17] !== handleItemMouseLeave || $[18] !== handleKeyDown || $[19] !== mount ? (t8 = {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  };
+  }, $[15] = activeElement, $[16] = activeIndex, $[17] = handleItemMouseLeave, $[18] = handleKeyDown, $[19] = mount, $[20] = t8) : t8 = $[20], t8;
+}
+function _temp$7() {
 }
 const DEFAULT_MENU_ELEMENT = "div";
 function Menu(props) {
-  const $ = c(57), t0 = props;
+  const $ = c(56), t0 = props;
   let _shouldFocus, children, className, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, rest, t1, t2, t3;
   $[0] !== t0 ? ({
     as: t1,
@@ -2121,10 +2466,9 @@ function Menu(props) {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
   }, $[28] = isTopLayer, $[29] = onEscape, $[30] = t10) : t10 = $[30], useGlobalKeyDown(t10);
   let t11;
-  $[31] !== activeElement || $[32] !== activeIndex || $[33] !== handleItemMouseEnter || $[34] !== handleItemMouseLeave || $[35] !== mount || $[36] !== onClickOutside || $[37] !== onEscape || $[38] !== onItemClick || $[39] !== registerElement ? (t11 = {
-    version: 0,
+  $[31] !== activeElement || $[32] !== handleItemMouseEnter || $[33] !== handleItemMouseLeave || $[34] !== mount || $[35] !== onClickOutside || $[36] !== onEscape || $[37] !== onItemClick || $[38] !== registerElement ? (t11 = {
+    version: 2,
     activeElement,
-    activeIndex,
     mount,
     onClickOutside,
     onEscape,
@@ -2132,18 +2476,18 @@ function Menu(props) {
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement
-  }, $[31] = activeElement, $[32] = activeIndex, $[33] = handleItemMouseEnter, $[34] = handleItemMouseLeave, $[35] = mount, $[36] = onClickOutside, $[37] = onEscape, $[38] = onItemClick, $[39] = registerElement, $[40] = t11) : t11 = $[40];
+  }, $[31] = activeElement, $[32] = handleItemMouseEnter, $[33] = handleItemMouseLeave, $[34] = mount, $[35] = onClickOutside, $[36] = onEscape, $[37] = onItemClick, $[38] = registerElement, $[39] = t11) : t11 = $[39];
   const value = t11;
   let t12;
-  $[41] !== className ? (t12 = menu({
+  $[40] !== className ? (t12 = menu({
     className
-  }), $[41] = className, $[42] = t12) : t12 = $[42];
+  }), $[40] = className, $[41] = t12) : t12 = $[41];
   let t13;
-  $[43] !== children || $[44] !== gap ? (t13 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[43] = children, $[44] = gap, $[45] = t13) : t13 = $[45];
+  $[42] !== children || $[43] !== gap ? (t13 = /* @__PURE__ */ jsx(Stack, { gap, children }), $[42] = children, $[43] = gap, $[44] = t13) : t13 = $[44];
   let t14;
-  $[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];
+  $[45] !== as || $[46] !== handleKeyDown || $[47] !== handleRefChange || $[48] !== padding || $[49] !== rest || $[50] !== t12 || $[51] !== t13 ? (t14 = /* @__PURE__ */ jsx(Box, { "data-ui": "Menu", ...rest, as, className: t12, onKeyDown: handleKeyDown, overflow: "auto", outline: "none", padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t13 }), $[45] = as, $[46] = handleKeyDown, $[47] = handleRefChange, $[48] = padding, $[49] = rest, $[50] = t12, $[51] = t13, $[52] = t14) : t14 = $[52];
   let t15;
-  return $[54] !== t14 || $[55] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t14 }), $[54] = t14, $[55] = value, $[56] = t15) : t15 = $[56], t15;
+  return $[53] !== t14 || $[54] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t14 }), $[53] = t14, $[54] = value, $[55] = t15) : t15 = $[55], t15;
 }
 function MenuButton(props) {
   const $ = c(57), {
@@ -2300,7 +2644,7 @@ function useMenu() {
   const value = use(MenuContext);
   if (!value)
     throw new Error("useMenu(): missing context value");
-  if (!isRecord(value) || value.version !== 0)
+  if (!isRecord(value) || value.version !== 2)
     throw new Error("useMenu(): the context value is not compatible");
   return value;
 }
@@ -2709,7 +3053,7 @@ function _temp$5() {
   return !0;
 }
 const subscribe = () => () => {
-}, ToastContext = createGlobalScopedContext("@sanity/ui/v3/toast", null), DEFAULT_GRID_ELEMENT = "div";
+}, ToastContext = createGlobalScopedContext("@sanity/ui/v4/toast", null), DEFAULT_GRID_ELEMENT = "div";
 function Grid(props) {
   const $ = c(8), t0 = props;
   let children, rest, t1;
@@ -2864,7 +3208,7 @@ function _focusItemElement(el) {
     firstChild && firstChild instanceof HTMLElement && firstChild.focus();
   }
 }
-const TreeContext = createGlobalScopedContext("@sanity/ui/v3/tree", null), DEFAULT_TREE_ELEMENT = "div";
+const TreeContext = createGlobalScopedContext("@sanity/ui/v4/tree", null), DEFAULT_TREE_ELEMENT = "div";
 function Tree(props) {
   const $ = c(38), t0 = props;
   let children, forwardedRef, onFocus, rest, t1;
@@ -3038,97 +3382,135 @@ const TreeGroup = function(props) {
   return $[4] !== children || $[5] !== rest || $[6] !== t2 || $[7] !== tree.gap ? (t3 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...rest, hidden: t2, marginTop: tree.gap, role: "group", gap: tree.gap, children }), $[4] = children, $[5] = rest, $[6] = t2, $[7] = tree.gap, $[8] = t3) : t3 = $[8], t3;
 }, DEFAULT_TREE_ITEM_ELEMENT = "a";
 function TreeItem(props) {
-  const {
+  const $ = c(129), t0 = props;
+  let IconComponent, children, className, href, idProp, muted, onClick, rest, t1, t2, t3, t4, t5, t6, t7, text2, weight;
+  $[0] !== t0 ? ({
     children,
     className,
-    expanded: expandedProp = !1,
-    fontSize = 1,
+    expanded: t1,
+    fontSize: t2,
     href,
     icon: IconComponent,
     id: idProp,
-    linkAs = "a",
+    linkAs: t3,
     muted,
     onClick,
-    padding = 2,
-    radius = 2,
-    selected = !1,
-    space = 2,
+    padding: t4,
+    radius: t5,
+    selected: t6,
+    space: t7,
     text: text2,
     weight,
     ...rest
-  } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), {
+  } = t0, $[0] = t0, $[1] = IconComponent, $[2] = children, $[3] = className, $[4] = href, $[5] = idProp, $[6] = muted, $[7] = onClick, $[8] = rest, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = t4, $[13] = t5, $[14] = t6, $[15] = t7, $[16] = text2, $[17] = weight) : (IconComponent = $[1], children = $[2], className = $[3], href = $[4], idProp = $[5], muted = $[6], onClick = $[7], rest = $[8], t1 = $[9], t2 = $[10], t3 = $[11], t4 = $[12], t5 = $[13], t6 = $[14], t7 = $[15], text2 = $[16], weight = $[17]);
+  const expandedProp = t1 === void 0 ? !1 : t1, fontSize = t2 === void 0 ? 1 : t2, linkAs = t3 === void 0 ? "a" : t3, padding = t4 === void 0 ? 2 : t4, radius = t5 === void 0 ? 2 : t5, selected = t6 === void 0 ? !1 : t6, space = t7 === void 0 ? 2 : t7, [rootElement, setRootElement] = useState(null), treeitemRef = useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, focused = tree.focusedElement && tree.focusedElement === rootRef.current, tabIndex = focused ? 0 : -1, contextValue = useMemo(() => ({
+  } = tree, _id = useId(), id = idProp || _id;
+  let t8, t9;
+  if ($[18] !== id || $[19] !== path) {
+    const itemPath = path.concat([id || ""]);
+    t8 = itemPath, t9 = itemPath.join("/"), $[18] = id, $[19] = path, $[20] = t8, $[21] = t9;
+  } else
+    t8 = $[20], t9 = $[21];
+  let t10;
+  $[22] !== t8 || $[23] !== t9 ? (t10 = [t8, t9], $[22] = t8, $[23] = t9, $[24] = t10) : t10 = $[24];
+  const [itemPath_0, itemKey] = t10, itemState = tree.state[itemKey], expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, focused = tree.focusedElement && tree.focusedElement === rootElement, tabIndex = focused ? 0 : -1, t11 = tree.level + 1;
+  let t12;
+  $[25] !== itemPath_0 || $[26] !== t11 || $[27] !== tree ? (t12 = {
     ...tree,
-    level: tree.level + 1,
-    path: itemPath
-  }), [itemPath, tree]), handleClick = useCallback((event) => {
+    level: t11,
+    path: itemPath_0
+  }, $[25] = itemPath_0, $[26] = t11, $[27] = tree, $[28] = t12) : t12 = $[28];
+  const contextValue = t12;
+  let t13;
+  $[29] !== expanded || $[30] !== itemKey || $[31] !== onClick || $[32] !== rootElement || $[33] !== setExpanded || $[34] !== setFocusedElement ? (t13 = (event) => {
     onClick && onClick(event);
     const target = event.target;
-    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
-  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = useCallback((event_0) => {
-    focused && event_0.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
-  }, [focused]);
-  useEffect(() => {
-    if (rootRef.current)
-      return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
-  }, [expanded, itemPath, registerItem, selected]);
-  const content2 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
-    /* @__PURE__ */ jsxs(Box, { style: {
-      visibility: IconComponent || children ? "visible" : "hidden",
-      pointerEvents: "none"
-    }, children: [
-      IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
-      !IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
-        transform: expanded ? "rotate(90deg)" : void 0
-      } }) })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text2 }) })
-  ] });
-  return href ? /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...rest, as: "li", className: treeItem({
-    className
-  }), onClick: handleClick, ref: rootRef, role: "none", children: [
-    /* @__PURE__ */ jsx(
-      Selectable,
-      {
-        "aria-expanded": expanded,
-        as: linkAs,
-        "data-ui": "TreeItem__box",
-        href,
-        radius,
-        ref: treeitemRef,
-        role: "treeitem",
-        selected,
-        tabIndex,
-        style: {
-          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
-        },
-        children: content2
-      }
-    ),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxs(Box, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...rest, "aria-expanded": expanded, className: treeItem({
+    target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
+  }, $[29] = expanded, $[30] = itemKey, $[31] = onClick, $[32] = rootElement, $[33] = setExpanded, $[34] = setFocusedElement, $[35] = t13) : t13 = $[35];
+  const handleClick = t13;
+  let t14;
+  $[36] !== focused || $[37] !== rootElement ? (t14 = (event_0) => {
+    focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
+  }, $[36] = focused, $[37] = rootElement, $[38] = t14) : t14 = $[38];
+  const handleKeyDown = t14;
+  let t15, t16;
+  $[39] !== expanded || $[40] !== itemKey || $[41] !== registerItem || $[42] !== rootElement || $[43] !== selected ? (t15 = () => {
+    if (rootElement)
+      return registerItem(rootElement, itemKey, expanded, selected);
+  }, t16 = [expanded, itemKey, registerItem, rootElement, selected], $[39] = expanded, $[40] = itemKey, $[41] = registerItem, $[42] = rootElement, $[43] = selected, $[44] = t15, $[45] = t16) : (t15 = $[44], t16 = $[45]), useEffect(t15, t16);
+  const t17 = IconComponent || children ? "visible" : "hidden";
+  let t18;
+  $[46] !== t17 ? (t18 = {
+    visibility: t17,
+    pointerEvents: "none"
+  }, $[46] = t17, $[47] = t18) : t18 = $[47];
+  let t19;
+  $[48] !== IconComponent || $[49] !== fontSize || $[50] !== muted || $[51] !== weight ? (t19 = IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }), $[48] = IconComponent, $[49] = fontSize, $[50] = muted, $[51] = weight, $[52] = t19) : t19 = $[52];
+  let t20;
+  $[53] !== IconComponent || $[54] !== expanded || $[55] !== fontSize || $[56] !== muted || $[57] !== weight ? (t20 = !IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
+    transform: expanded ? "rotate(90deg)" : void 0
+  } }) }), $[53] = IconComponent, $[54] = expanded, $[55] = fontSize, $[56] = muted, $[57] = weight, $[58] = t20) : t20 = $[58];
+  let t21;
+  $[59] !== t18 || $[60] !== t19 || $[61] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Box, { style: t18, children: [
+    t19,
+    t20
+  ] }), $[59] = t18, $[60] = t19, $[61] = t20, $[62] = t21) : t21 = $[62];
+  let t22;
+  $[63] !== fontSize || $[64] !== muted || $[65] !== text2 || $[66] !== weight ? (t22 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text2 }) }), $[63] = fontSize, $[64] = muted, $[65] = text2, $[66] = weight, $[67] = t22) : t22 = $[67];
+  let t23;
+  $[68] !== padding || $[69] !== space || $[70] !== t21 || $[71] !== t22 ? (t23 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+    t21,
+    t22
+  ] }), $[68] = padding, $[69] = space, $[70] = t21, $[71] = t22, $[72] = t23) : t23 = $[72];
+  const content2 = t23;
+  if (href) {
+    const t242 = selected ? "" : void 0, t252 = rest;
+    let t262;
+    $[73] !== className ? (t262 = treeItem({
+      className
+    }), $[73] = className, $[74] = t262) : t262 = $[74];
+    const t272 = `calc(${vars.space[2]} * ${tree.level})`;
+    let t282;
+    $[75] !== t272 ? (t282 = {
+      paddingLeft: t272
+    }, $[75] = t272, $[76] = t282) : t282 = $[76];
+    let t292;
+    $[77] !== content2 || $[78] !== expanded || $[79] !== href || $[80] !== linkAs || $[81] !== radius || $[82] !== selected || $[83] !== t282 || $[84] !== tabIndex ? (t292 = /* @__PURE__ */ jsx(Selectable, { "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, radius, ref: treeitemRef, role: "treeitem", selected, tabIndex, style: t282, children: content2 }), $[77] = content2, $[78] = expanded, $[79] = href, $[80] = linkAs, $[81] = radius, $[82] = selected, $[83] = t282, $[84] = tabIndex, $[85] = t292) : t292 = $[85];
+    let t302;
+    $[86] !== children || $[87] !== expanded ? (t302 = children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }), $[86] = children, $[87] = expanded, $[88] = t302) : t302 = $[88];
+    let t312;
+    $[89] !== contextValue || $[90] !== t302 ? (t312 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t302 }), $[89] = contextValue, $[90] = t302, $[91] = t312) : t312 = $[91];
+    let t322;
+    return $[92] !== handleClick || $[93] !== id || $[94] !== itemKey || $[95] !== t242 || $[96] !== t252 || $[97] !== t262 || $[98] !== t292 || $[99] !== t312 ? (t322 = /* @__PURE__ */ jsxs(Box, { "data-selected": t242, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...t252, as: "li", className: t262, onClick: handleClick, ref: setRootElement, role: "none", children: [
+      t292,
+      t312
+    ] }), $[92] = handleClick, $[93] = id, $[94] = itemKey, $[95] = t242, $[96] = t252, $[97] = t262, $[98] = t292, $[99] = t312, $[100] = t322) : t322 = $[100], t322;
+  }
+  const t24 = selected ? "" : void 0, t25 = rest;
+  let t26;
+  $[101] !== className ? (t26 = treeItem({
     className
-  }), onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
-    /* @__PURE__ */ jsx(
-      Selectable,
-      {
-        as: "button",
-        "data-focused": focused ? "" : void 0,
-        "data-ui": "TreeItem__box",
-        radius,
-        selected,
-        style: {
-          paddingLeft: `calc(${vars.space[2]} * ${tree.level})`
-        },
-        children: content2
-      }
-    ),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
-  ] });
+  }), $[101] = className, $[102] = t26) : t26 = $[102];
+  const t27 = focused ? "" : void 0, t28 = `calc(${vars.space[2]} * ${tree.level})`;
+  let t29;
+  $[103] !== t28 ? (t29 = {
+    paddingLeft: t28
+  }, $[103] = t28, $[104] = t29) : t29 = $[104];
+  let t30;
+  $[105] !== content2 || $[106] !== radius || $[107] !== selected || $[108] !== t27 || $[109] !== t29 ? (t30 = /* @__PURE__ */ jsx(Selectable, { as: "button", "data-focused": t27, "data-ui": "TreeItem__box", radius, selected, style: t29, children: content2 }), $[105] = content2, $[106] = radius, $[107] = selected, $[108] = t27, $[109] = t29, $[110] = t30) : t30 = $[110];
+  let t31;
+  $[111] !== children || $[112] !== expanded ? (t31 = children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }), $[111] = children, $[112] = expanded, $[113] = t31) : t31 = $[113];
+  let t32;
+  $[114] !== contextValue || $[115] !== t31 ? (t32 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t31 }), $[114] = contextValue, $[115] = t31, $[116] = t32) : t32 = $[116];
+  let t33;
+  return $[117] !== expanded || $[118] !== handleClick || $[119] !== handleKeyDown || $[120] !== id || $[121] !== itemKey || $[122] !== t24 || $[123] !== t25 || $[124] !== t26 || $[125] !== t30 || $[126] !== t32 || $[127] !== tabIndex ? (t33 = /* @__PURE__ */ jsxs(Box, { "data-selected": t24, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...t25, "aria-expanded": expanded, className: t26, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
+    t30,
+    t32
+  ] }), $[117] = expanded, $[118] = handleClick, $[119] = handleKeyDown, $[120] = id, $[121] = itemKey, $[122] = t24, $[123] = t25, $[124] = t26, $[125] = t30, $[126] = t32, $[127] = tabIndex, $[128] = t33) : t33 = $[128], t33;
 }
 function _isScrollable(el) {
   if (!(el instanceof Element)) return !1;
@@ -3137,21 +3519,32 @@ 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 {
-    as = DEFAULT_VIRTUAL_LIST_ELEMENT,
-    gap = 0,
+  const $ = c(44), t0 = props;
+  let forwardedRef, getItemKey, onChange, renderItem, rest, t1, t2, t3;
+  $[0] !== t0 ? ({
+    as: t1,
+    gap: t2,
     getItemKey,
-    items = [],
+    items: t3,
     onChange,
     renderItem,
     ref: forwardedRef,
     ...rest
-  } = 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;
+  } = 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;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return;
+      if (!(scrollEl instanceof HTMLElement))
+        return;
       const handleScroll = () => {
         setScrollTop(scrollEl.scrollTop);
       };
@@ -3175,9 +3568,10 @@ 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;
-  useEffect(() => {
+  let t8, t9;
+  $[14] !== fromIndex || $[15] !== gapValue || $[16] !== itemHeight || $[17] !== onChange || $[18] !== scrollHeight || $[19] !== scrollTop || $[20] !== toIndex ? (t8 = () => {
     onChange?.({
       fromIndex,
       gap: gapValue,
@@ -3186,23 +3580,90 @@ function VirtualList(props) {
       scrollTop,
       toIndex
     });
-  }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex]), useEffect(() => {
-    setItemHeight(-1);
-  }, [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(() => ({
+  }, 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 = () => {
+    startTransition(() => setItemHeight(-1));
+  }, $[23] = t10) : t10 = $[23];
+  let t11;
+  $[24] !== renderItem ? (t11 = [renderItem], $[24] = renderItem, $[25] = t11) : t11 = $[25], useEffect(t10, t11);
+  let t12;
+  $[26] !== fromIndex || $[27] !== gap || $[28] !== gapValue || $[29] !== getItemKey || $[30] !== itemHeight || $[31] !== items || $[32] !== renderItem || $[33] !== toIndex ? (t12 = {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight
+  }, $[26] = fromIndex, $[27] = gap, $[28] = gapValue, $[29] = getItemKey, $[30] = itemHeight, $[31] = items, $[32] = renderItem, $[33] = toIndex, $[34] = t12) : t12 = $[34];
+  const children = useChildren(t12);
+  let t13;
+  $[35] !== height ? (t13 = {
     height
-  }), [height]);
-  return /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  }, $[35] = height, $[36] = t13) : t13 = $[36];
+  const wrapperStyle = t13;
+  let t14;
+  $[37] !== children || $[38] !== wrapperStyle ? (t14 = /* @__PURE__ */ jsx("div", { ref: wrapperRef, style: wrapperStyle, children }), $[37] = children, $[38] = wrapperStyle, $[39] = t14) : t14 = $[39];
+  let t15;
+  return $[40] !== as || $[41] !== rest || $[42] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, { "data-ui": "VirtualList", ...rest, as, position: "relative", ref, children: t14 }), $[40] = as, $[41] = rest, $[42] = t14, $[43] = t15) : t15 = $[43], t15;
+}
+function useChildren(t0) {
+  const $ = c(32), {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    toIndex,
+    gapValue,
+    setGapValue,
+    setItemHeight
+  } = t0;
+  if (!renderItem || items.length === 0)
+    return null;
+  if (itemHeight === -1) {
+    let t12;
+    $[0] !== setItemHeight ? (t12 = (el) => {
+      el && setItemHeight(el.offsetHeight);
+    }, $[0] = setItemHeight, $[1] = t12) : t12 = $[1];
+    let t2;
+    $[2] !== items[0] || $[3] !== renderItem ? (t2 = renderItem(items[0]), $[2] = items[0], $[3] = renderItem, $[4] = t2) : t2 = $[4];
+    let t3;
+    $[5] !== t12 || $[6] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, { ref: t12, insetTop: 0, insetLeft: 0, insetRight: 0, position: "absolute", children: t2 }, 0), $[5] = t12, $[6] = t2, $[7] = t3) : t3 = $[7];
+    let t4;
+    $[8] !== setGapValue ? (t4 = (el_0) => {
+      el_0 && setGapValue(el_0.offsetHeight);
+    }, $[8] = setGapValue, $[9] = t4) : t4 = $[9];
+    const t5 = vars.space[gap];
+    let t6;
+    $[10] !== t5 ? (t6 = {
+      height: t5
+    }, $[10] = t5, $[11] = t6) : t6 = $[11];
+    let t7;
+    $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsx("div", { ref: t4, style: t6 }), $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14];
+    let t8;
+    return $[15] !== t3 || $[16] !== t7 ? (t8 = [/* @__PURE__ */ jsxs(Fragment, { children: [
+      t3,
+      t7
+    ] })], $[15] = t3, $[16] = t7, $[17] = t8) : t8 = $[17], t8;
+  }
+  let t1;
+  if ($[18] !== fromIndex || $[19] !== gapValue || $[20] !== getItemKey || $[21] !== itemHeight || $[22] !== items || $[23] !== renderItem || $[24] !== toIndex) {
+    let t2;
+    $[26] !== fromIndex || $[27] !== gapValue || $[28] !== getItemKey || $[29] !== itemHeight || $[30] !== renderItem ? (t2 = (item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+      return /* @__PURE__ */ jsx(Box, { insetLeft: 0, insetRight: 0, position: "absolute", style: {
+        top: itemIndex * (itemHeight + gapValue)
+      }, children: node }, key2);
+    }, $[26] = fromIndex, $[27] = gapValue, $[28] = getItemKey, $[29] = itemHeight, $[30] = renderItem, $[31] = t2) : t2 = $[31], t1 = items.slice(fromIndex, toIndex).map(t2), $[18] = fromIndex, $[19] = gapValue, $[20] = getItemKey, $[21] = itemHeight, $[22] = items, $[23] = renderItem, $[24] = toIndex, $[25] = t1;
+  } else
+    t1 = $[25];
+  return t1;
 }
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
@@ -3719,7 +4180,7 @@ function Skeleton(props) {
   let t2, t3;
   $[0] !== delay ? (t2 = () => {
     if (!delay)
-      return setVisible(!0);
+      return;
     const timeout = setTimeout(() => {
       setVisible(!0);
     }, delay);
@@ -3730,7 +4191,7 @@ function Skeleton(props) {
   const t4 = "Skeleton", t5 = skeleton({
     className,
     ...rest
-  }), t6 = animated ? "" : void 0, t7 = visible ? "" : void 0;
+  }), t6 = animated ? "" : void 0, t7 = !delay || visible ? "" : void 0;
   let 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;
 }
@@ -3941,7 +4402,7 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   right: ["right-end", "right-start", "left", "top", "bottom"],
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
-}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/v3/tooltipDelayGroup", null);
+}, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/v4/tooltipDelayGroup", null);
 function useTooltipDelayGroup() {
   return use(TooltipDelayGroupContext);
 }
@@ -3999,64 +4460,71 @@ function TooltipLayer(props) {
 }
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
-  const boundaryElementContext = useBoundaryElement(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    as = DEFAULT_TOOLTIP_ELEMENT,
-    boundaryElement = boundaryElementContext?.element,
+  const $ = c(143), boundaryElementContext = useBoundaryElement(), t0 = props;
+  let _boundaryElement, _fallbackPlacements, childProp, className, content2, delay, disabled, forwardedRef, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, t8, t9;
+  $[0] !== t0 ? ({
+    animate: t1,
+    arrow: t2,
+    as: t3,
+    boundaryElement: _boundaryElement,
     children: childProp,
     className,
     content: content2,
     delay,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
-    padding = 2,
-    placement: placementProp = "bottom",
+    fallbackPlacements: _fallbackPlacements,
+    padding: t4,
+    placement: t5,
     portal: portalProp,
-    radius = 3,
+    radius: t6,
     ref: forwardedRef,
     scheme,
-    shadow = 2,
-    zOffset = Z_OFFSETS.tooltip,
-    tone = "inherit",
+    shadow: t7,
+    zOffset: t8,
+    tone: t9,
     ...rest
-  } = props, card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = useMemo(() => {
-    const ret = [];
-    return ret.push(flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+  } = t0, $[0] = t0, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = childProp, $[4] = className, $[5] = content2, $[6] = delay, $[7] = disabled, $[8] = forwardedRef, $[9] = portalProp, $[10] = rest, $[11] = scheme, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5, $[17] = t6, $[18] = t7, $[19] = t8, $[20] = t9) : (_boundaryElement = $[1], _fallbackPlacements = $[2], childProp = $[3], className = $[4], content2 = $[5], delay = $[6], disabled = $[7], forwardedRef = $[8], portalProp = $[9], rest = $[10], scheme = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[16], t6 = $[17], t7 = $[18], t8 = $[19], t9 = $[20]);
+  const _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_TOOLTIP_ELEMENT : t3, padding = t4 === void 0 ? 2 : t4, placementProp = t5 === void 0 ? "bottom" : t5, radius = t6 === void 0 ? 3 : t6, shadow = t7 === void 0 ? 2 : t7, zOffset = t8 === void 0 ? Z_OFFSETS.tooltip : t8, tone = t9 === void 0 ? "inherit" : t9, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], card2 = useCard(), animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => ref.current, $[21] = t10) : t10 = $[21], useImperativeHandle(forwardedRef, t10);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let t11;
+  $[22] !== animate || $[23] !== arrowProp || $[24] !== boundaryElement || $[25] !== fallbackPlacements ? (t11 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary: "viewport"
+  }, $[22] = animate, $[23] = arrowProp, $[24] = boundaryElement, $[25] = fallbackPlacements, $[26] = t11) : t11 = $[26];
+  const middleware = useMiddleware(t11);
+  let t12;
+  $[27] !== referenceElement ? (t12 = {
+    reference: referenceElement
+  }, $[27] = referenceElement, $[28] = t12) : t12 = $[28];
+  let t13;
+  $[29] !== middleware || $[30] !== placementProp || $[31] !== t12 ? (t13 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate,
+    elements: t12,
+    transform: !1
+  }, $[29] = middleware, $[30] = placementProp, $[31] = t12, $[32] = t13) : t13 = $[32];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate,
-    elements: {
-      reference: referenceElement
-    },
-    transform: !1
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+  } = useFloating(t13), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
+  let t14;
+  $[33] !== delayGroupContext ? (t14 = delayGroupContext || {}, $[33] = delayGroupContext, $[34] = t14) : t14 = $[34];
+  const {
     setIsGroupActive,
     setOpenTooltipId
-  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
+  } = t14, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
+  let t15;
+  $[35] !== closeDelay || $[36] !== isInsideGroup || $[37] !== openDelay || $[38] !== setIsGroupActive || $[39] !== setIsOpen || $[40] !== setOpenTooltipId || $[41] !== tooltipId ? (t15 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4067,65 +4535,173 @@ function Tooltip(props) {
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
+  }, $[35] = closeDelay, $[36] = isInsideGroup, $[37] = openDelay, $[38] = setIsGroupActive, $[39] = setIsOpen, $[40] = setOpenTooltipId, $[41] = tooltipId, $[42] = t15) : t15 = $[42];
+  const handleIsOpenChange = t15;
+  let t16;
+  $[43] !== childProp?.props || $[44] !== handleIsOpenChange ? (t16 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
+  }, $[43] = childProp?.props, $[44] = handleIsOpenChange, $[45] = t16) : t16 = $[45];
+  const handleBlur = t16;
+  let t17;
+  $[46] !== childProp?.props || $[47] !== handleIsOpenChange ? (t17 = (e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
+  }, $[46] = childProp?.props, $[47] = handleIsOpenChange, $[48] = t17) : t17 = $[48];
+  const handleClick = t17;
+  let t18;
+  $[49] !== childProp?.props || $[50] !== handleIsOpenChange ? (t18 = (e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
+  }, $[49] = childProp?.props, $[50] = handleIsOpenChange, $[51] = t18) : t18 = $[51];
+  const handleContextMenu = t18;
+  let t19;
+  $[52] !== childProp?.props || $[53] !== handleIsOpenChange ? (t19 = (e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
+  }, $[52] = childProp?.props, $[53] = handleIsOpenChange, $[54] = t19) : t19 = $[54];
+  const handleFocus = t19;
+  let t20;
+  $[55] !== childProp?.props || $[56] !== handleIsOpenChange ? (t20 = (e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
+  }, $[55] = childProp?.props, $[56] = handleIsOpenChange, $[57] = t20) : t20 = $[57];
+  const handleMouseEnter = t20;
+  let t21;
+  $[58] !== childProp?.props || $[59] !== handleIsOpenChange ? (t21 = (e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
+  }, $[58] = childProp?.props, $[59] = handleIsOpenChange, $[60] = t21) : t21 = $[60];
+  const handleMouseLeave = t21;
+  let t22;
+  $[61] !== handleIsOpenChange || $[62] !== isInsideGroup || $[63] !== referenceElement || $[64] !== showTooltip ? (t22 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }), useEffect(() => {
+  }, $[61] = handleIsOpenChange, $[62] = isInsideGroup, $[63] = referenceElement, $[64] = showTooltip, $[65] = t22) : t22 = $[65], useCloseOnMouseLeave(t22);
+  let t23, t24;
+  $[66] !== disabled || $[67] !== handleIsOpenChange || $[68] !== showTooltip ? (t23 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
+  }, t24 = [disabled, handleIsOpenChange, showTooltip], $[66] = disabled, $[67] = handleIsOpenChange, $[68] = showTooltip, $[69] = t23, $[70] = t24) : (t23 = $[69], t24 = $[70]), useEffect(t23, t24);
+  let t25, t26;
+  $[71] !== content2 || $[72] !== handleIsOpenChange || $[73] !== showTooltip ? (t25 = () => {
     !content2 && showTooltip && handleIsOpenChange(!1);
-  }, [content2, handleIsOpenChange, showTooltip]), useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t26 = [content2, handleIsOpenChange, showTooltip], $[71] = content2, $[72] = handleIsOpenChange, $[73] = showTooltip, $[74] = t25, $[75] = t26) : (t25 = $[74], t26 = $[75]), useEffect(t25, t26);
+  let t27, t28;
+  $[76] !== handleIsOpenChange || $[77] !== showTooltip ? (t27 = () => {
+    if (!showTooltip)
+      return;
+    const handleWindowKeyDown = function(event) {
       event.key === "Escape" && handleIsOpenChange(!1, !0);
-    }
+    };
     return window.addEventListener("keydown", handleWindowKeyDown), () => {
       window.removeEventListener("keydown", handleWindowKeyDown);
     };
-  }, [handleIsOpenChange, showTooltip]), useLayoutEffect(() => {
+  }, t28 = [handleIsOpenChange, showTooltip], $[76] = handleIsOpenChange, $[77] = showTooltip, $[78] = t27, $[79] = t28) : (t27 = $[78], t28 = $[79]), useEffect(t27, t28);
+  let t29;
+  $[80] !== boundaryElement || $[81] !== portalElement?.offsetWidth ? (t29 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = useCallback((arrowEl) => {
+  }, $[80] = boundaryElement, $[81] = portalElement?.offsetWidth, $[82] = t29) : t29 = $[82];
+  let t30;
+  $[83] !== boundaryElement || $[84] !== portalElement ? (t30 = [boundaryElement, portalElement], $[83] = boundaryElement, $[84] = portalElement, $[85] = t30) : t30 = $[85], useLayoutEffect(t29, t30);
+  let t31;
+  $[86] !== update ? (t31 = (arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = useCallback((node) => {
+  }, $[86] = update, $[87] = t31) : t31 = $[87];
+  const setArrow = t31;
+  let t32;
+  $[88] !== refs ? (t32 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), child = useMemo(() => childProp ? cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsx(Fragment, {});
-  if (disabled) return child;
-  const node_0 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: tooltip({
+  }, $[88] = refs, $[89] = t32) : t32 = $[89];
+  const setFloating = t32;
+  let t33;
+  bb0: {
+    if (!childProp) {
+      t33 = null;
+      break bb0;
+    }
+    let t342;
+    $[90] !== childProp || $[91] !== handleBlur || $[92] !== handleClick || $[93] !== handleContextMenu || $[94] !== handleFocus || $[95] !== handleMouseEnter || $[96] !== handleMouseLeave ? (t342 = cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement
+    }), $[90] = childProp, $[91] = handleBlur, $[92] = handleClick, $[93] = handleContextMenu, $[94] = handleFocus, $[95] = handleMouseEnter, $[96] = handleMouseLeave, $[97] = t342) : t342 = $[97], t33 = t342;
+  }
+  const child = t33;
+  let t34;
+  $[98] !== childProp ? (t34 = childProp ? getElementRef(childProp) : null, $[98] = childProp, $[99] = t34) : t34 = $[99];
+  let t35, t36;
+  if ($[100] !== referenceElement ? (t35 = () => referenceElement, t36 = [referenceElement], $[100] = referenceElement, $[101] = t35, $[102] = t36) : (t35 = $[101], t36 = $[102]), useImperativeHandle(t34, t35, t36), !child) {
+    let t372;
+    return $[103] === Symbol.for("react.memo_cache_sentinel") ? (t372 = /* @__PURE__ */ jsx(Fragment, {}), $[103] = t372) : t372 = $[103], t372;
+  }
+  if (disabled)
+    return child;
+  let t37;
+  $[104] !== className ? (t37 = tooltip({
     className
-  }), originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: {
+  }), $[104] = className, $[105] = t37) : t37 = $[105];
+  const t38 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t39;
+  $[106] !== floatingStyles || $[107] !== t38 ? (t39 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, tone, zOffset, children: content2 }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+    maxWidth: t38
+  }, $[106] = floatingStyles, $[107] = t38, $[108] = t39) : t39 = $[108];
+  let t40;
+  $[109] !== animate || $[110] !== arrowProp || $[111] !== arrowX || $[112] !== arrowY || $[113] !== as || $[114] !== content2 || $[115] !== originX || $[116] !== originY || $[117] !== padding || $[118] !== placement || $[119] !== radius || $[120] !== rest || $[121] !== scheme || $[122] !== setArrow || $[123] !== setFloating || $[124] !== shadow || $[125] !== t37 || $[126] !== t39 || $[127] !== tone || $[128] !== zOffset ? (t40 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: t37, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: t39, tone, zOffset, children: content2 }), $[109] = animate, $[110] = arrowProp, $[111] = arrowX, $[112] = arrowY, $[113] = as, $[114] = content2, $[115] = originX, $[116] = originY, $[117] = padding, $[118] = placement, $[119] = radius, $[120] = rest, $[121] = scheme, $[122] = setArrow, $[123] = setFloating, $[124] = shadow, $[125] = t37, $[126] = t39, $[127] = tone, $[128] = zOffset, $[129] = t40) : t40 = $[129];
+  const node_0 = t40;
+  let t41;
+  $[130] !== card2 || $[131] !== node_0 || $[132] !== portalProp || $[133] !== scheme || $[134] !== showTooltip || $[135] !== tone ? (t41 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: /* @__PURE__ */ jsx(CardProvider, { tone: tone === "inherit" ? card2.tone : tone, scheme: scheme ?? "light", children: node_0 }) }) : node_0), $[130] = card2, $[131] = node_0, $[132] = portalProp, $[133] = scheme, $[134] = showTooltip, $[135] = tone, $[136] = t41) : t41 = $[136];
+  const children = t41;
+  let t42;
+  $[137] !== animate || $[138] !== children ? (t42 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[137] = animate, $[138] = children, $[139] = t42) : t42 = $[139];
+  let t43;
+  return $[140] !== child || $[141] !== t42 ? (t43 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t42,
     child
-  ] });
+  ] }), $[140] = child, $[141] = t42, $[142] = t43) : t43 = $[142], t43;
+}
+function useMiddleware(t0) {
+  const $ = c(17), {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+    ret = [];
+    const t1 = boundaryElement || void 0;
+    let t2;
+    $[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = flip({
+      boundary: t1,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    }), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+    let t3;
+    $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    }), $[11] = t3) : t3 = $[11], ret.push(t3);
+    const t4 = boundaryElement || void 0;
+    let t5;
+    if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = shift({
+      boundary: t4,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    }), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
+      let t6;
+      $[15] !== arrowRef ? (t6 = arrow({
+        element: arrowRef,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }), $[15] = arrowRef, $[16] = t6) : t6 = $[16], ret.push(t6);
+    }
+    animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
+  } else
+    ret = $[6];
+  return ret;
 }
 function useCloseOnMouseLeave(t0) {
   const $ = c(10), {
@@ -4256,8 +4832,8 @@ function PortalProvider(props) {
   const $ = c(9), {
     children,
     element,
-    __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), parentPortal = use(PortalContext);
+    __unstable_elements: elements
+  } = props, parentPortal = use(PortalContext);
   let t0;
   $[0] !== elements || $[1] !== parentPortal ? (t0 = () => elements?.default ?? (parentPortal.element || document.body), $[0] = elements, $[1] = parentPortal, $[2] = t0) : t0 = $[2];
   const fallbackElement = useSyncExternalStore(emptySubscribe, t0, _temp), t1 = element || fallbackElement;
@@ -4270,23 +4846,13 @@ function PortalProvider(props) {
   }, $[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;
+  return $[6] !== children || $[7] !== value ? (t3 = /* @__PURE__ */ jsx(PortalContext, { value, children }), $[6] = children, $[7] = value, $[8] = t3) : t3 = $[8], t3;
 }
 function _temp() {
   return null;
 }
 const emptySubscribe = () => () => {
 };
-function useUnique(value) {
-  const valueRef = useRef(value);
-  return _isEqual(valueRef.current, value) || (valueRef.current = value), valueRef.current;
-}
-function _isEqual(objA, objB) {
-  if (!objA || !objB)
-    return objA === objB;
-  const keysA = Object.keys(objA), keysB = Object.keys(objB);
-  return keysA.length !== keysB.length ? !1 : keysA.every((key2) => objA[key2] === objB[key2]);
-}
 function RootProvider(props) {
   const $ = c(10), {
     boundaryElement: t0,