@sanity/ui 4.0.0-static.33 → 4.0.0-static.35

package/dist/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 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 { isValidElement, useDebugValue, useSyncExternalStore, createContext, use, useRef, useImperativeHandle, useEffect, useState, cloneElement, useReducer, Children, Fragment as Fragment$1, startTransition, useId, lazy, Suspense, useLayoutEffect, Component } from "react";
 import { box, text, textOverflow, animatedSpinnerIcon, spinner, button, buttonLoadingBox, _arrow, vars, _arrowSvg, _arrowStrokeMask, _arrowStroke, _arrowShape, card, BREAKPOINTS, popoverCard, popover, _selectable, stack, textInput, textInputPrefix, textInputElement, _inputElement, _inputPresentation, textInputSuffix, breadcrumbs, container as container$1, dialogCard, dialogHeader, dialogContent, dialogScrollerShadowTop, dialogScroller, dialogScrollerShadowBottom, dialogFooter, dialog, dialogContainer, kbd, menu, menuDivider, toast, toastLayer, treeItem, label, avatar, avatarArrow, avatarInitials, avatarImage, avatarImageOutline, avatarCounter, avatarStack, badge, checkbox, checkboxInput, checkboxPresentation, code, heading, radio, radioInput, radioPresentation, select, selectPresentation, skeleton, codeSkeleton, headingSkeleton, labelSkeleton, textSkeleton, srOnly, _switch, _switchElement, _switchPresentation, _switchTrack, _switchThumb, textArea, tooltip, root } from "@sanity/ui/css";
 import { isValidElementType } from "react-is";
 import { detectOverflow, useFloating, autoPlacement, flip, offset, shift, arrow, hide, autoUpdate } from "@floating-ui/react-dom";
@@ -119,18 +119,13 @@ function isArray(val) {
 function isRecord(value) {
   return !!(value && typeof value == "object" && !Array.isArray(value));
 }
-function _getArrayProp(val, defaultVal) {
-  return val === void 0 ? defaultVal || EMPTY_ARRAY : Array.isArray(val) ? val : [val];
-}
 function _getResponsiveProp(val, defaultVal) {
   return val === void 0 ? defaultVal || EMPTY_ARRAY : isArray(val) || isRecord(val) ? val : [val];
 }
 function useResponsiveProp(val, defaultVal) {
   const $ = c(3);
   let t0;
-  $[0] !== defaultVal || $[1] !== val ? (t0 = () => [_getResponsiveProp(val, defaultVal), JSON.stringify(val ?? defaultVal)], $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2];
-  const [t1, setCache] = useState(t0), [cachedVal, cachedHash] = t1, hash = JSON.stringify(val ?? defaultVal);
-  return hash !== cachedHash && setCache([_getResponsiveProp(val, defaultVal), hash]), cachedVal;
+  return $[0] !== defaultVal || $[1] !== val ? (t0 = _getResponsiveProp(val, defaultVal), $[0] = defaultVal, $[1] = val, $[2] = t0) : t0 = $[2], t0;
 }
 const DEFAULT_BOX_ELEMENT = "div";
 function Box(props) {
@@ -492,16 +487,7 @@ function createGlobalScopedContext(key2, defaultValue) {
   const symbolMap = globalScope;
   return symbolMap[symbol] = symbolMap[symbol] || createContext(defaultValue), symbolMap[symbol];
 }
-const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v4/boundaryElement", null), DEFAULT_VALUE = {
-  version: 0,
-  element: null
-};
-function useBoundaryElement() {
-  const value = use(BoundaryElementContext);
-  if (value && (!isRecord(value) || value.version !== 0))
-    throw new Error("useBoundaryElement(): the context value is not compatible");
-  return value || DEFAULT_VALUE;
-}
+const BoundaryElementContext = createGlobalScopedContext("@sanity/ui/v4/boundaryElement", null);
 function getElementRef(element) {
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
@@ -520,15 +506,18 @@ function CardProvider(props) {
     scheme,
     unstable_CompatProvider
   }, $[0] = scheme, $[1] = tone, $[2] = unstable_CompatProvider, $[3] = t0) : t0 = $[3];
-  const t1 = t0;
-  let t2;
-  return $[4] !== children || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(CardContext.Provider, { value: t1, children }), $[4] = children, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
+  let t1;
+  return $[4] !== children || $[5] !== t0 ? (t1 = /* @__PURE__ */ jsx(CardContext, { value: t0, children }), $[4] = children, $[5] = t0, $[6] = t1) : t1 = $[6], t1;
 }
 function useCard() {
   const card2 = use(CardContext);
+  return assertCardContext(card2), card2;
+}
+function assertCardContext(card2) {
   if (!card2)
-    throw new Error("useCard(): missing context value");
-  return card2;
+    throw new Error("useCard(): missing context value", {
+      cause: card2
+    });
 }
 const key = "@sanity/ui/v4/portal", elementKey = Symbol.for(`${key}/element`), elementMap = globalScope;
 elementMap[elementKey] = null;
@@ -541,19 +530,23 @@ const defaultContextValue = {
 }, PortalContext = createGlobalScopedContext(key, defaultContextValue);
 function usePortal() {
   const value = use(PortalContext);
+  return assertPortalContext(value), value;
+}
+function assertPortalContext(value) {
   if (!value)
     throw new Error("usePortal(): missing context value");
   if (!isRecord(value) || value.version !== 0)
     throw new Error("usePortal(): the context value is not compatible");
-  return value;
 }
 function Portal(props) {
   const $ = c(6), {
     children,
     __unstable_name: name
-  } = props, card2 = useCard(), portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
+  } = props, portal = usePortal(), portalElement = (name ? portal.elements && portal.elements[name] : portal.element) || portal.elements?.default;
   if (!portalElement)
     return null;
+  const card2 = use(CardContext);
+  assertCardContext(card2);
   let t0;
   $[0] !== card2.scheme || $[1] !== children ? (t0 = /* @__PURE__ */ jsx(CardProvider, { tone: "transparent", scheme: card2.scheme, children }), $[0] = card2.scheme, $[1] = children, $[2] = t0) : t0 = $[2];
   let t1;
@@ -891,18 +884,21 @@ function useMediaIndex() {
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function LayerProvider(props) {
-  const $ = c(19), {
+  const $ = c(21), {
     children,
     zOffset: t0
   } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = use(LayerContext);
   let t1;
   $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
-  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useResponsiveProp(zOffsetProp), maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
+  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1;
   let t2;
-  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
-  const [, setChildLayers] = useState(t2), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  $[2] !== zOffsetProp ? (t2 = _getResponsiveProp(zOffsetProp), $[2] = zOffsetProp, $[3] = t2) : t2 = $[3];
+  const zOffset = t2, maxMediaIndex = Object.values(zOffset).length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + (zOffset[mediaIndex] ?? 0) : zOffset[mediaIndex] ?? 0;
   let t3;
-  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[4] = t3) : t3 = $[4];
+  const [, setChildLayers] = useState(t3), [size2, setSize] = useState(0), isTopLayer = size2 === 0;
+  let t4;
+  $[5] !== parentRegisterChild || $[6] !== setChildLayers ? (t4 = (childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -918,22 +914,22 @@ function LayerProvider(props) {
         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$3), parentDispose?.();
     };
-  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
-  const registerChild = t3;
-  let t4, t5;
-  $[6] !== level || $[7] !== parentRegisterChild ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = level, $[7] = parentRegisterChild, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), useEffect(t4, t5);
-  let t6;
-  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t6 = {
+  }, $[5] = parentRegisterChild, $[6] = setChildLayers, $[7] = t4) : t4 = $[7];
+  const registerChild = t4;
+  let t5, t6;
+  $[8] !== level || $[9] !== parentRegisterChild ? (t5 = () => parentRegisterChild?.(level), t6 = [level, parentRegisterChild], $[8] = level, $[9] = parentRegisterChild, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]), useEffect(t5, t6);
+  let t7;
+  $[12] !== isTopLayer || $[13] !== level || $[14] !== registerChild || $[15] !== size2 || $[16] !== zIndex ? (t7 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t6) : t6 = $[15];
-  const value = t6;
-  let t7;
-  return $[16] !== children || $[17] !== value ? (t7 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children }), $[16] = children, $[17] = value, $[18] = t7) : t7 = $[18], t7;
+  }, $[12] = isTopLayer, $[13] = level, $[14] = registerChild, $[15] = size2, $[16] = zIndex, $[17] = t7) : t7 = $[17];
+  const value = t7;
+  let t8;
+  return $[18] !== children || $[19] !== value ? (t8 = /* @__PURE__ */ jsx(LayerContext, { value, children }), $[18] = children, $[19] = value, $[20] = t8) : t8 = $[20], t8;
 }
 function _temp2$3(v_0) {
   return v_0 - 1;
@@ -1039,7 +1035,7 @@ function ViewportOverlay() {
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }
 function Popover(props) {
-  const $ = c(111), boundaryElementContext = useBoundaryElement(), t0 = props;
+  const $ = c(113), t0 = props;
   let _fallbackPlacements, _floatingBoundary, _referenceBoundary, childProp, className, content2, disabled, forwardedRef, matchReferenceWidth, modal, open, padding, portal, referenceElement, rest, scheme, t1, t10, t11, t12, t13, t14, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
   if ($[0] !== t0) {
     const {
@@ -1079,12 +1075,15 @@ function Popover(props) {
     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);
+  const margins = t1 === void 0 ? DEFAULT_POPOVER_MARGINS : t1, _animate = t2 === void 0 ? !1 : t2, arrowProp = t3 === void 0 ? !1 : t3, as = t4 === void 0 ? DEFAULT_POPOVER_ELEMENT : t4, constrainSize = t5 === void 0 ? !1 : t5, overflow = t6 === void 0 ? "hidden" : t6, placementProp = t7 === void 0 ? "bottom" : t7, placementStrategy = t8 === void 0 ? "flip" : t8, preventOverflow = t9 === void 0 ? !0 : t9, radius = t10 === void 0 ? 3 : t10, shadow = t11 === void 0 ? 3 : t11, tone = t12 === void 0 ? "inherit" : t12, widthProp = t13 === void 0 ? "auto" : t13, zOffsetProp = t14 === void 0 ? Z_OFFSETS.popover : t14, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? use(BoundaryElementContext), referenceBoundary = _referenceBoundary ?? use(BoundaryElementContext), animate = usePrefersReducedMotion() ? !1 : _animate;
   let t15;
-  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t15 = () => ref.current, $[32] = t15) : t15 = $[32], useImperativeHandle(forwardedRef, t15);
-  const referenceWidthRef = useRef(void 0);
+  $[32] !== zOffsetProp ? (t15 = _getResponsiveProp(zOffsetProp), $[32] = zOffsetProp, $[33] = t15) : t15 = $[33];
+  const zOffset = t15, ref = useRef(null), arrowRef = useRef(null);
   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 = {
+  $[34] === Symbol.for("react.memo_cache_sentinel") ? (t16 = () => ref.current, $[34] = t16) : t16 = $[34], useImperativeHandle(forwardedRef, t16);
+  const referenceWidthRef = useRef(void 0);
+  let t17;
+  $[35] !== animate || $[36] !== arrowProp || $[37] !== constrainSize || $[38] !== fallbackPlacements || $[39] !== floatingBoundary || $[40] !== margins || $[41] !== matchReferenceWidth || $[42] !== placementProp || $[43] !== placementStrategy || $[44] !== preventOverflow || $[45] !== referenceBoundary ? (t17 = {
     animate,
     arrowProp,
     arrowRef,
@@ -1099,19 +1098,19 @@ function Popover(props) {
     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];
+  }, $[35] = animate, $[36] = arrowProp, $[37] = constrainSize, $[38] = fallbackPlacements, $[39] = floatingBoundary, $[40] = margins, $[41] = matchReferenceWidth, $[42] = placementProp, $[43] = placementStrategy, $[44] = preventOverflow, $[45] = referenceBoundary, $[46] = t17) : t17 = $[46];
+  const middleware = useMiddleware$1(t17);
   let t18;
-  $[47] !== middleware || $[48] !== placementProp || $[49] !== t17 ? (t18 = {
+  $[47] !== referenceElement ? (t18 = referenceElement ? {
+    reference: referenceElement
+  } : void 0, $[47] = referenceElement, $[48] = t18) : t18 = $[48];
+  let t19;
+  $[49] !== middleware || $[50] !== placementProp || $[51] !== t18 ? (t19 = {
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate,
-    elements: t17
-  }, $[47] = middleware, $[48] = placementProp, $[49] = t17, $[50] = t18) : t18 = $[50];
+    elements: t18
+  }, $[49] = middleware, $[50] = placementProp, $[51] = t18, $[52] = t19) : t19 = $[52];
   const {
     x,
     y,
@@ -1120,61 +1119,71 @@ function Popover(props) {
     refs,
     strategy,
     update
-  } = 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);
-  }, $[51] = refs, $[52] = t19) : t19 = $[52];
-  const setFloating = t19;
+  } = useFloating(t19), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY;
   let t20;
-  $[53] !== childProp ? (t20 = childProp ? getElementRef(childProp) : null, $[53] = childProp, $[54] = t20) : t20 = $[54];
+  $[53] !== refs ? (t20 = (node) => {
+    ref.current = node, refs.setFloating(node);
+  }, $[53] = refs, $[54] = t20) : t20 = $[54];
+  const setFloating = t20;
   let t21;
-  $[55] !== refs.reference.current ? (t21 = () => refs.reference.current, $[55] = refs.reference.current, $[56] = t21) : t21 = $[56], useImperativeHandle(t20, t21);
+  $[55] !== childProp ? (t21 = childProp ? getElementRef(childProp) : null, $[55] = childProp, $[56] = t21) : t21 = $[56];
   let t22;
+  $[57] !== refs.reference.current ? (t22 = () => refs.reference.current, $[57] = refs.reference.current, $[58] = t22) : t22 = $[58], useImperativeHandle(t21, t22);
+  let t23;
   bb0: {
     if (referenceElement) {
-      t22 = childProp;
+      t23 = childProp;
       break bb0;
     }
     if (!childProp) {
-      t22 = null;
+      t23 = null;
       break bb0;
     }
-    let t232;
-    $[57] !== childProp || $[58] !== refs.setReference ? (t232 = cloneElement(childProp, {
+    let t242;
+    $[59] !== childProp || $[60] !== refs.setReference ? (t242 = cloneElement(childProp, {
       ref: refs.setReference
-    }), $[57] = childProp, $[58] = refs.setReference, $[59] = t232) : t232 = $[59], t22 = t232;
+    }), $[59] = childProp, $[60] = refs.setReference, $[61] = t242) : t242 = $[61], t23 = t242;
   }
-  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;
+  const child = t23;
+  let t24, t25;
+  if ($[62] !== update ? (t24 = () => update, t25 = [update], $[62] = update, $[63] = t24, $[64] = t25) : (t24 = $[63], t25 = $[64]), useImperativeHandle(updateRef, t24, t25), disabled) {
+    let t262;
+    return $[65] !== childProp ? (t262 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[65] = childProp, $[66] = t262) : t262 = $[66], t262;
   }
-  let 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];
+  $[67] !== modal ? (t26 = modal && /* @__PURE__ */ jsx(ViewportOverlay, {}), $[67] = modal, $[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];
+  $[69] !== className ? (t27 = popover({
+    className
+  }), $[69] = className, $[70] = t27) : t27 = $[70];
   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;
+  $[71] !== animate || $[72] !== arrowProp || $[73] !== arrowX || $[74] !== arrowY || $[75] !== as || $[76] !== content2 || $[77] !== margins || $[78] !== originX || $[79] !== originY || $[80] !== overflow || $[81] !== padding || $[82] !== placement || $[83] !== radius || $[84] !== referenceHidden || $[85] !== rest || $[86] !== scheme || $[87] !== setFloating || $[88] !== shadow || $[89] !== strategy || $[90] !== t27 || $[91] !== tone || $[92] !== widthProp || $[93] !== x || $[94] !== y || $[95] !== zOffset ? (t28 = /* @__PURE__ */ jsx(PopoverLayer, { ...rest, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef, arrowX, arrowY, as, className: t27, hidden: referenceHidden, maxWidth: widthProp, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, tone, strategy, x, y, zOffset, children: content2 }), $[71] = animate, $[72] = arrowProp, $[73] = arrowX, $[74] = arrowY, $[75] = as, $[76] = content2, $[77] = margins, $[78] = originX, $[79] = originY, $[80] = overflow, $[81] = padding, $[82] = placement, $[83] = radius, $[84] = referenceHidden, $[85] = rest, $[86] = scheme, $[87] = setFloating, $[88] = shadow, $[89] = strategy, $[90] = t27, $[91] = tone, $[92] = widthProp, $[93] = x, $[94] = y, $[95] = zOffset, $[96] = t28) : t28 = $[96];
   let t29;
-  $[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;
+  $[97] !== t26 || $[98] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t26,
+    t28
+  ] }), $[97] = t26, $[98] = t28, $[99] = t29) : t29 = $[99];
+  const node_0 = t29;
+  let children = open ? node_0 : null;
+  if (open && portal) {
+    let resolvedTone = tone;
+    if (tone === "inherit") {
+      const card2 = use(CardContext);
+      assertCardContext(card2), resolvedTone = card2.tone;
+    }
+    const t302 = typeof portal == "string" ? portal : void 0, t312 = scheme ?? "light";
+    let t32;
+    $[100] !== node_0 || $[101] !== resolvedTone || $[102] !== t312 ? (t32 = /* @__PURE__ */ jsx(CardProvider, { tone: resolvedTone, scheme: t312, children: node_0 }), $[100] = node_0, $[101] = resolvedTone, $[102] = t312, $[103] = t32) : t32 = $[103];
+    let t33;
+    $[104] !== t302 || $[105] !== t32 ? (t33 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t302, children: t32 }), $[104] = t302, $[105] = t32, $[106] = t33) : t33 = $[106], children = t33;
+  }
   let t30;
-  $[105] !== animate || $[106] !== children ? (t30 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[105] = animate, $[106] = children, $[107] = t30) : t30 = $[107];
+  $[107] !== animate || $[108] !== children ? (t30 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[107] = animate, $[108] = children, $[109] = t30) : t30 = $[109];
   let t31;
-  return $[108] !== child || $[109] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
+  return $[110] !== child || $[111] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Fragment, { children: [
     t30,
     child
-  ] }), $[108] = child, $[109] = t30, $[110] = t31) : t31 = $[110], t31;
+  ] }), $[110] = child, $[111] = t30, $[112] = t31) : t31 = $[112], t31;
 }
 function useMiddleware$1(t0) {
   const $ = c(36), {
@@ -1304,7 +1313,7 @@ function useCustomValidity(ref, customValidity) {
 }
 const DEFAULT_TEXT_INPUT_ELEMENT = "input";
 function TextInput(props) {
-  const $ = c(90), t0 = props;
+  const $ = c(86), t0 = props;
   let IconComponent, IconRightComponent, __unstable_disableFocusRing, className, clearButton, customValidity, flex, forwardedRef, onClear, prefix, readOnly, rest, suffix, t1, t2, t3, t4, t5, t6, t7, t8, width;
   if ($[0] !== t0) {
     const {
@@ -1335,23 +1344,20 @@ function TextInput(props) {
     __unstable_disableFocusRing = t92, t1 = t102, t2 = t112, className = t122, clearButton = t132, t3 = t142, flex = t152, t4 = t162, t5 = t172, IconComponent = t182, IconRightComponent = t192, onClear = t202, t6 = t212, prefix = t222, t7 = t232, readOnly = t242, forwardedRef = t252, suffix = t262, customValidity = t272, t8 = t282, width = t292, rest = t302, $[0] = t0, $[1] = IconComponent, $[2] = IconRightComponent, $[3] = __unstable_disableFocusRing, $[4] = className, $[5] = clearButton, $[6] = customValidity, $[7] = flex, $[8] = forwardedRef, $[9] = onClear, $[10] = prefix, $[11] = readOnly, $[12] = rest, $[13] = suffix, $[14] = t1, $[15] = t2, $[16] = t3, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7, $[21] = t8, $[22] = width;
   } else
     IconComponent = $[1], IconRightComponent = $[2], __unstable_disableFocusRing = $[3], className = $[4], clearButton = $[5], customValidity = $[6], flex = $[7], forwardedRef = $[8], onClear = $[9], prefix = $[10], readOnly = $[11], rest = $[12], suffix = $[13], t1 = $[14], t2 = $[15], t3 = $[16], t4 = $[17], t5 = $[18], t6 = $[19], t7 = $[20], t8 = $[21], width = $[22];
-  const Element2 = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null), responsivePadding = useResponsiveProp(padding), withClearButton = !!clearButton;
+  const Element2 = t1 === void 0 ? DEFAULT_TEXT_INPUT_ELEMENT : t1, border = t2 === void 0 ? !0 : t2, disabled = t3 === void 0 ? !1 : t3, fontSize = t4 === void 0 ? 2 : t4, gap = t5 === void 0 ? 3 : t5, padding = t6 === void 0 ? 3 : t6, radius = t7 === void 0 ? 2 : t7, type = t8 === void 0 ? "text" : t8, ref = useRef(null);
   let t9;
-  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => ref.current, $[23] = t9) : t9 = $[23], useImperativeHandle(forwardedRef, t9), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$a;
+  $[23] !== padding ? (t9 = _getResponsiveProp(padding), $[23] = padding, $[24] = t9) : t9 = $[24];
+  const responsivePadding = t9, withClearButton = !!clearButton;
   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;
+  $[25] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => ref.current, $[25] = t10) : t10 = $[25], useImperativeHandle(forwardedRef, t10), useCustomValidity(ref, customValidity);
+  const handleClearMouseDown = _temp$a;
   let t11;
-  $[26] !== responsivePadding ? (t11 = Object.fromEntries(Object.entries(responsivePadding).map(_temp2$2)), $[26] = responsivePadding, $[27] = t11) : t11 = $[27];
-  const clearButtonBoxPadding = t11;
+  $[26] !== onClear ? (t11 = (event_0) => {
+    event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
+  }, $[26] = onClear, $[27] = t11) : t11 = $[27];
+  const handleClearClick = t11;
   let t12;
-  $[28] !== responsivePadding ? (t12 = Object.fromEntries(Object.entries(responsivePadding).map(_temp3)), $[28] = responsivePadding, $[29] = t12) : t12 = $[29];
-  const clearButtonPadding = t12, clearButtonProps = isRecord(clearButton) ? clearButton : EMPTY_RECORD;
-  let t13;
-  $[30] !== border || $[31] !== className || $[32] !== flex || $[33] !== fontSize || $[34] !== gap || $[35] !== padding || $[36] !== radius || $[37] !== width ? (t13 = textInput({
+  $[28] !== border || $[29] !== className || $[30] !== flex || $[31] !== fontSize || $[32] !== gap || $[33] !== padding || $[34] !== radius || $[35] !== width ? (t12 = textInput({
     className,
     border,
     flex,
@@ -1360,52 +1366,77 @@ function TextInput(props) {
     radius,
     gap,
     width
-  }), $[30] = border, $[31] = className, $[32] = flex, $[33] = fontSize, $[34] = gap, $[35] = padding, $[36] = radius, $[37] = width, $[38] = t13) : t13 = $[38];
-  const t14 = IconComponent ? "" : void 0, t15 = IconRightComponent ? "" : void 0, t16 = customValidity ? "" : void 0, t17 = prefix ? "" : void 0, t18 = !disabled && readOnly ? "" : void 0, t19 = suffix ? "" : void 0;
+  }), $[28] = border, $[29] = className, $[30] = flex, $[31] = fontSize, $[32] = gap, $[33] = padding, $[34] = radius, $[35] = width, $[36] = t12) : t12 = $[36];
+  const t13 = IconComponent ? "" : void 0, t14 = IconRightComponent ? "" : void 0, t15 = customValidity ? "" : void 0, t16 = prefix ? "" : void 0, t17 = !disabled && readOnly ? "" : void 0, t18 = suffix ? "" : void 0;
+  let t19;
+  $[37] !== prefix ? (t19 = prefix && /* @__PURE__ */ jsx("span", { className: textInputPrefix(), children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[37] = prefix, $[38] = t19) : t19 = $[38];
   let t20;
-  $[39] !== prefix ? (t20 = prefix && /* @__PURE__ */ jsx("span", { className: textInputPrefix(), children: /* @__PURE__ */ jsx("span", { children: prefix }) }), $[39] = prefix, $[40] = t20) : t20 = $[40];
+  $[39] === Symbol.for("react.memo_cache_sentinel") ? (t20 = textInputElement(), $[39] = t20) : t20 = $[39];
   let t21;
-  $[41] === Symbol.for("react.memo_cache_sentinel") ? (t21 = textInputElement(), $[41] = t21) : t21 = $[41];
-  let t22;
-  $[42] === Symbol.for("react.memo_cache_sentinel") ? (t22 = _inputElement(), $[42] = t22) : t22 = $[42];
-  const t23 = __unstable_disableFocusRing ? "" : void 0;
+  $[40] === Symbol.for("react.memo_cache_sentinel") ? (t21 = _inputElement(), $[40] = t21) : t21 = $[40];
+  const t22 = __unstable_disableFocusRing ? "" : void 0;
+  let t23;
+  $[41] !== Element2 || $[42] !== disabled || $[43] !== readOnly || $[44] !== rest || $[45] !== t22 || $[46] !== type ? (t23 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t21, "data-no-focus-ring": t22, disabled, readOnly, ref, type }), $[41] = Element2, $[42] = disabled, $[43] = readOnly, $[44] = rest, $[45] = t22, $[46] = type, $[47] = t23) : t23 = $[47];
   let t24;
-  $[43] !== Element2 || $[44] !== disabled || $[45] !== readOnly || $[46] !== rest || $[47] !== t23 || $[48] !== type ? (t24 = /* @__PURE__ */ jsx(Element2, { ...rest, className: t22, "data-no-focus-ring": t23, disabled, readOnly, ref, type }), $[43] = Element2, $[44] = disabled, $[45] = readOnly, $[46] = rest, $[47] = t23, $[48] = type, $[49] = t24) : t24 = $[49];
+  $[48] === Symbol.for("react.memo_cache_sentinel") ? (t24 = _inputPresentation(), $[48] = t24) : t24 = $[48];
   let t25;
-  $[50] === Symbol.for("react.memo_cache_sentinel") ? (t25 = _inputPresentation(), $[50] = t25) : t25 = $[50];
-  let t26;
-  $[51] !== IconComponent || $[52] !== fontSize || $[53] !== padding ? (t26 = IconComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetLeft: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
+  $[49] !== IconComponent || $[50] !== fontSize || $[51] !== padding ? (t25 = IconComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetLeft: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
     isValidElement(IconComponent) && IconComponent,
     isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-  ] }) }), $[51] = IconComponent, $[52] = fontSize, $[53] = padding, $[54] = t26) : t26 = $[54];
-  let t27;
-  $[55] !== IconRightComponent || $[56] !== fontSize || $[57] !== padding || $[58] !== withClearButton ? (t27 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetRight: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
+  ] }) }), $[49] = IconComponent, $[50] = fontSize, $[51] = padding, $[52] = t25) : t25 = $[52];
+  let t26;
+  $[53] !== IconRightComponent || $[54] !== fontSize || $[55] !== padding || $[56] !== withClearButton ? (t26 = !withClearButton && IconRightComponent && /* @__PURE__ */ jsx(Box, { as: "span", padding, position: "absolute", insetTop: 0, insetRight: 0, children: /* @__PURE__ */ jsxs(Text, { as: "span", size: fontSize, children: [
     isValidElement(IconRightComponent) && IconRightComponent,
     isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-  ] }) }), $[55] = IconRightComponent, $[56] = fontSize, $[57] = padding, $[58] = withClearButton, $[59] = t27) : t27 = $[59];
+  ] }) }), $[53] = IconRightComponent, $[54] = fontSize, $[55] = padding, $[56] = withClearButton, $[57] = t26) : t26 = $[57];
+  let t27;
+  $[58] !== t25 || $[59] !== t26 ? (t27 = /* @__PURE__ */ jsxs("span", { className: t24, children: [
+    t25,
+    t26
+  ] }), $[58] = t25, $[59] = t26, $[60] = t27) : t27 = $[60];
   let t28;
-  $[60] !== t26 || $[61] !== t27 ? (t28 = /* @__PURE__ */ jsxs("span", { className: t25, children: [
-    t26,
-    t27
-  ] }), $[60] = t26, $[61] = t27, $[62] = t28) : t28 = $[62];
+  $[61] !== clearButton || $[62] !== disabled || $[63] !== fontSize || $[64] !== handleClearClick || $[65] !== radius || $[66] !== readOnly || $[67] !== responsivePadding ? (t28 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(ClearButton, { fontSize, radius, clearButtonProps: isRecord(clearButton) ? clearButton : EMPTY_RECORD, handleClearClick, handleClearMouseDown, padding: responsivePadding }), $[61] = clearButton, $[62] = disabled, $[63] = fontSize, $[64] = handleClearClick, $[65] = radius, $[66] = readOnly, $[67] = responsivePadding, $[68] = t28) : t28 = $[68];
   let t29;
-  $[63] !== clearButton || $[64] !== clearButtonBoxPadding || $[65] !== clearButtonPadding || $[66] !== clearButtonProps || $[67] !== disabled || $[68] !== fontSize || $[69] !== handleClearClick || $[70] !== radius || $[71] !== readOnly ? (t29 = !disabled && !readOnly && clearButton && /* @__PURE__ */ jsx(Box, { as: "span", insetTop: 0, insetRight: 0, padding: clearButtonBoxPadding, position: "absolute", style: {
-    zIndex: 2
-  }, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }) }), $[63] = clearButton, $[64] = clearButtonBoxPadding, $[65] = clearButtonPadding, $[66] = clearButtonProps, $[67] = disabled, $[68] = fontSize, $[69] = handleClearClick, $[70] = radius, $[71] = readOnly, $[72] = t29) : t29 = $[72];
+  $[69] !== t23 || $[70] !== t27 || $[71] !== t28 ? (t29 = /* @__PURE__ */ jsxs("span", { className: t20, children: [
+    t23,
+    t27,
+    t28
+  ] }), $[69] = t23, $[70] = t27, $[71] = t28, $[72] = t29) : t29 = $[72];
   let t30;
-  $[73] !== t24 || $[74] !== t28 || $[75] !== t29 ? (t30 = /* @__PURE__ */ jsxs("span", { className: t21, children: [
-    t24,
-    t28,
-    t29
-  ] }), $[73] = t24, $[74] = t28, $[75] = t29, $[76] = t30) : t30 = $[76];
+  $[73] !== suffix ? (t30 = suffix && /* @__PURE__ */ jsx("span", { className: textInputSuffix(), children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[73] = suffix, $[74] = t30) : t30 = $[74];
   let t31;
-  $[77] !== suffix ? (t31 = suffix && /* @__PURE__ */ jsx("span", { className: textInputSuffix(), children: /* @__PURE__ */ jsx("span", { children: suffix }) }), $[77] = suffix, $[78] = t31) : t31 = $[78];
-  let t32;
-  return $[79] !== t13 || $[80] !== t14 || $[81] !== t15 || $[82] !== t16 || $[83] !== t17 || $[84] !== t18 || $[85] !== t19 || $[86] !== t20 || $[87] !== t30 || $[88] !== t31 ? (t32 = /* @__PURE__ */ jsxs("span", { className: t13, "data-icon-left": t14, "data-icon-right": t15, "data-invalid": t16, "data-prefix": t17, "data-read-only": t18, "data-suffix": t19, "data-ui": "TextInput", children: [
-    t20,
-    t30,
-    t31
-  ] }), $[79] = t13, $[80] = t14, $[81] = t15, $[82] = t16, $[83] = t17, $[84] = t18, $[85] = t19, $[86] = t20, $[87] = t30, $[88] = t31, $[89] = t32) : t32 = $[89], t32;
+  return $[75] !== t12 || $[76] !== t13 || $[77] !== t14 || $[78] !== t15 || $[79] !== t16 || $[80] !== t17 || $[81] !== t18 || $[82] !== t19 || $[83] !== t29 || $[84] !== t30 ? (t31 = /* @__PURE__ */ jsxs("span", { className: t12, "data-icon-left": t13, "data-icon-right": t14, "data-invalid": t15, "data-prefix": t16, "data-read-only": t17, "data-suffix": t18, "data-ui": "TextInput", children: [
+    t19,
+    t29,
+    t30
+  ] }), $[75] = t12, $[76] = t13, $[77] = t14, $[78] = t15, $[79] = t16, $[80] = t17, $[81] = t18, $[82] = t19, $[83] = t29, $[84] = t30, $[85] = t31) : t31 = $[85], t31;
+}
+function _temp$a(event) {
+  event.preventDefault(), event.stopPropagation();
+}
+function ClearButton(t0) {
+  const $ = c(15), {
+    fontSize,
+    radius,
+    clearButtonProps,
+    handleClearClick,
+    handleClearMouseDown,
+    padding
+  } = t0;
+  let t1;
+  $[0] !== padding ? (t1 = Object.fromEntries(Object.entries(padding).map(_temp2$2)), $[0] = padding, $[1] = t1) : t1 = $[1];
+  const clearButtonBoxPadding = t1;
+  let t2;
+  $[2] !== padding ? (t2 = Object.fromEntries(Object.entries(padding).map(_temp3)), $[2] = padding, $[3] = t2) : t2 = $[3];
+  const clearButtonPadding = t2;
+  let t3;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
+    zIndex: 2
+  }, $[4] = t3) : t3 = $[4];
+  let t4;
+  $[5] !== clearButtonPadding || $[6] !== clearButtonProps || $[7] !== fontSize || $[8] !== handleClearClick || $[9] !== handleClearMouseDown || $[10] !== radius ? (t4 = /* @__PURE__ */ jsx(Button, { "aria-label": "Clear", "data-qa": "clear-button", display: "block", fontSize, icon: CloseIcon, mode: "bleed", padding: clearButtonPadding, radius, ...clearButtonProps, onClick: handleClearClick, onMouseDown: handleClearMouseDown }), $[5] = clearButtonPadding, $[6] = clearButtonProps, $[7] = fontSize, $[8] = handleClearClick, $[9] = handleClearMouseDown, $[10] = radius, $[11] = t4) : t4 = $[11];
+  let t5;
+  return $[12] !== clearButtonBoxPadding || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, { as: "span", insetTop: 0, insetRight: 0, padding: clearButtonBoxPadding, position: "absolute", style: t3, children: t4 }), $[12] = clearButtonBoxPadding, $[13] = t4, $[14] = t5) : t5 = $[14], t5;
 }
 function _temp3(t0) {
   const [key_0, value_0] = t0;
@@ -1415,9 +1446,6 @@ 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$a(event) {
-  event.preventDefault(), event.stopPropagation();
-}
 function AutocompleteOption(props) {
   const $ = c(11), {
     children,
@@ -2010,9 +2038,9 @@ function DialogCard(props) {
     ref: forwardedRef,
     ...rest
   } = t0, $[0] = t0, $[1] = autoFocus, $[2] = children, $[3] = footer, $[4] = forwardedContentRef, $[5] = forwardedRef, $[6] = header, $[7] = hideCloseButton, $[8] = id, $[9] = onClickOutside, $[10] = onClose, $[11] = portalProp, $[12] = rest, $[13] = t1) : (autoFocus = $[1], children = $[2], footer = $[3], forwardedContentRef = $[4], forwardedRef = $[5], header = $[6], hideCloseButton = $[7], id = $[8], onClickOutside = $[9], onClose = $[10], portalProp = $[11], rest = $[12], t1 = $[13]);
-  const as = t1 === void 0 ? DEFAULT_DIALOG_CARD_ELEMENT : t1, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, ref = useRef(null), contentRef = useRef(null), layer = useLayer(), {
+  const as = t1 === void 0 ? DEFAULT_DIALOG_CARD_ELEMENT : t1, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = use(BoundaryElementContext), ref = useRef(null), contentRef = useRef(null), {
     isTopLayer
-  } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), scrollBottom = scrollHeight - scrollTop;
+  } = useLayer(), labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton, [scrollTop, setScrollTop] = useState(0), [scrollHeight, setScrollHeight] = useState(0), scrollBottom = scrollHeight - scrollTop;
   let t2;
   $[14] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[14] = t2) : t2 = $[14], useImperativeHandle(forwardedRef, t2);
   let t3;
@@ -2093,7 +2121,7 @@ function useDialog() {
 }
 const DEFAULT_DIALOG_ELEMENT = "div";
 function Dialog(props) {
-  const $ = c(69), context = useDialog(), t0 = props;
+  const $ = c(75), context = useDialog(), t0 = props;
   let _positionProp, _zOffsetProp, children, className, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, tone;
   $[0] !== t0 ? ({
     __unstable_autoFocus: t1,
@@ -2120,9 +2148,18 @@ function Dialog(props) {
     tone,
     ...rest
   } = t0, $[0] = t0, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = className, $[5] = contentRef, $[6] = footer, $[7] = header, $[8] = id, $[9] = onActivate, $[10] = onClickOutside, $[11] = onClose, $[12] = onFocus, $[13] = portalProp, $[14] = rest, $[15] = scheme, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6, $[22] = t7, $[23] = tone) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], className = $[4], contentRef = $[5], footer = $[6], header = $[7], id = $[8], onActivate = $[9], onClickOutside = $[10], onClose = $[11], onFocus = $[12], portalProp = $[13], rest = $[14], scheme = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21], t7 = $[22], tone = $[23]);
-  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useResponsiveProp(cardRadiusProp), position = useResponsiveProp(positionProp), zOffset = useResponsiveProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  const autoFocus = t1 === void 0 ? !0 : t1, hideCloseButton = t2 === void 0 ? !1 : t2, _animate = t3 === void 0 ? !1 : t3, cardRadiusProp = t4 === void 0 ? 4 : t4, padding = t5 === void 0 ? 3 : t5, cardShadow = t6 === void 0 ? 4 : t6, width = t7 === void 0 ? 0 : t7, positionProp = _positionProp ?? context.position ?? "fixed", zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = use(BoundaryElementContext);
   let t8;
-  $[24] !== onFocus ? (t8 = (event) => {
+  $[24] !== cardRadiusProp ? (t8 = _getResponsiveProp(cardRadiusProp), $[24] = cardRadiusProp, $[25] = t8) : t8 = $[25];
+  const cardRadius = t8;
+  let t9;
+  $[26] !== positionProp ? (t9 = _getResponsiveProp(positionProp), $[26] = positionProp, $[27] = t9) : t9 = $[27];
+  const position = t9;
+  let t10;
+  $[28] !== zOffsetProp ? (t10 = _getResponsiveProp(zOffsetProp), $[28] = zOffsetProp, $[29] = t10) : t10 = $[29];
+  const zOffset = t10, preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  let t11;
+  $[30] !== onFocus ? (t11 = (event) => {
     onFocus?.(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -2134,10 +2171,10 @@ function Dialog(props) {
       return;
     }
     isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-  }, $[24] = onFocus, $[25] = t8) : t8 = $[25];
-  const handleFocus = t8, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0);
-  let t9;
-  $[26] !== boundaryElement || $[27] !== portalElement ? (t9 = () => {
+  }, $[30] = onFocus, $[31] = t11) : t11 = $[31];
+  const handleFocus = t11, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0);
+  let t12;
+  $[32] !== boundaryElement || $[33] !== portalElement ? (t12 = () => {
     rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement;
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -2150,31 +2187,31 @@ function Dialog(props) {
         target_0.focus();
       }
     }, 0);
-  }, $[26] = boundaryElement, $[27] = portalElement, $[28] = t9) : t9 = $[28];
-  const handleRootClick = t9;
-  let t10;
-  $[29] !== className ? (t10 = dialog({
-    className
-  }), $[29] = className, $[30] = t10) : t10 = $[30];
-  const t11 = animate ? "" : void 0;
-  let t12;
-  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[31] = t12) : t12 = $[31];
+  }, $[32] = boundaryElement, $[33] = portalElement, $[34] = t12) : t12 = $[34];
+  const handleRootClick = t12;
   let t13;
-  $[32] === Symbol.for("react.memo_cache_sentinel") ? (t13 = dialogContainer(), $[32] = t13) : t13 = $[32];
-  let t14;
-  $[33] !== autoFocus || $[34] !== cardRadius || $[35] !== cardShadow || $[36] !== children || $[37] !== contentRef || $[38] !== footer || $[39] !== header || $[40] !== hideCloseButton || $[41] !== id || $[42] !== onClickOutside || $[43] !== onClose || $[44] !== portalProp || $[45] !== scheme || $[46] !== tone || $[47] !== width ? (t14 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, tone, width, children }), $[33] = autoFocus, $[34] = cardRadius, $[35] = cardShadow, $[36] = children, $[37] = contentRef, $[38] = footer, $[39] = header, $[40] = hideCloseButton, $[41] = id, $[42] = onClickOutside, $[43] = onClose, $[44] = portalProp, $[45] = scheme, $[46] = tone, $[47] = width, $[48] = t14) : t14 = $[48];
+  $[35] !== className ? (t13 = dialog({
+    className
+  }), $[35] = className, $[36] = t13) : t13 = $[36];
+  const t14 = animate ? "" : void 0;
   let t15;
-  $[49] !== t14 || $[50] !== width ? (t15 = /* @__PURE__ */ jsx(Container, { alignItems: "center", className: t13, "data-ui": "DialogCard", flexDirection: "column", display: "flex", justifyContent: "center", width, children: t14 }), $[49] = t14, $[50] = width, $[51] = t15) : t15 = $[51];
+  $[37] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[37] = t15) : t15 = $[37];
   let t16;
-  $[52] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[52] = t16) : t16 = $[52];
+  $[38] === Symbol.for("react.memo_cache_sentinel") ? (t16 = dialogContainer(), $[38] = t16) : t16 = $[38];
   let t17;
-  $[53] !== handleFocus || $[54] !== handleRootClick || $[55] !== id || $[56] !== labelId || $[57] !== onActivate || $[58] !== padding || $[59] !== position || $[60] !== rest || $[61] !== t10 || $[62] !== t11 || $[63] !== t15 || $[64] !== zOffset ? (t17 = /* @__PURE__ */ jsxs(Layer, { ...rest, "aria-labelledby": labelId, "aria-modal": !0, className: t10, "data-animate": t11, "data-ui": "Dialog", display: "flex", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, padding, position, role: "dialog", zOffset, children: [
-    t12,
-    t15,
-    t16
-  ] }), $[53] = handleFocus, $[54] = handleRootClick, $[55] = id, $[56] = labelId, $[57] = onActivate, $[58] = padding, $[59] = position, $[60] = rest, $[61] = t10, $[62] = t11, $[63] = t15, $[64] = zOffset, $[65] = t17) : t17 = $[65];
+  $[39] !== autoFocus || $[40] !== cardRadius || $[41] !== cardShadow || $[42] !== children || $[43] !== contentRef || $[44] !== footer || $[45] !== header || $[46] !== hideCloseButton || $[47] !== id || $[48] !== onClickOutside || $[49] !== onClose || $[50] !== portalProp || $[51] !== scheme || $[52] !== tone || $[53] !== width ? (t17 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, tone, width, children }), $[39] = autoFocus, $[40] = cardRadius, $[41] = cardShadow, $[42] = children, $[43] = contentRef, $[44] = footer, $[45] = header, $[46] = hideCloseButton, $[47] = id, $[48] = onClickOutside, $[49] = onClose, $[50] = portalProp, $[51] = scheme, $[52] = tone, $[53] = width, $[54] = t17) : t17 = $[54];
   let t18;
-  return $[66] !== portalProp || $[67] !== t17 ? (t18 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t17 }), $[66] = portalProp, $[67] = t17, $[68] = t18) : t18 = $[68], t18;
+  $[55] !== t17 || $[56] !== width ? (t18 = /* @__PURE__ */ jsx(Container, { alignItems: "center", className: t16, "data-ui": "DialogCard", flexDirection: "column", display: "flex", justifyContent: "center", width, children: t17 }), $[55] = t17, $[56] = width, $[57] = t18) : t18 = $[57];
+  let t19;
+  $[58] === Symbol.for("react.memo_cache_sentinel") ? (t19 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[58] = t19) : t19 = $[58];
+  let t20;
+  $[59] !== handleFocus || $[60] !== handleRootClick || $[61] !== id || $[62] !== labelId || $[63] !== onActivate || $[64] !== padding || $[65] !== position || $[66] !== rest || $[67] !== t13 || $[68] !== t14 || $[69] !== t18 || $[70] !== zOffset ? (t20 = /* @__PURE__ */ jsxs(Layer, { ...rest, "aria-labelledby": labelId, "aria-modal": !0, className: t13, "data-animate": t14, "data-ui": "Dialog", display: "flex", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, padding, position, role: "dialog", zOffset, children: [
+    t15,
+    t18,
+    t19
+  ] }), $[59] = handleFocus, $[60] = handleRootClick, $[61] = id, $[62] = labelId, $[63] = onActivate, $[64] = padding, $[65] = position, $[66] = rest, $[67] = t13, $[68] = t14, $[69] = t18, $[70] = zOffset, $[71] = t20) : t20 = $[71];
+  let t21;
+  return $[72] !== portalProp || $[73] !== t20 ? (t21 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t20 }), $[72] = portalProp, $[73] = t20, $[74] = t21) : t21 = $[74], t21;
 }
 function DialogProvider(props) {
   const $ = c(6), {
@@ -2190,7 +2227,7 @@ function DialogProvider(props) {
   }, $[0] = position, $[1] = zOffset, $[2] = t0) : t0 = $[2];
   const contextValue = t0;
   let t1;
-  return $[3] !== children || $[4] !== contextValue ? (t1 = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t1) : t1 = $[5], t1;
+  return $[3] !== children || $[4] !== contextValue ? (t1 = /* @__PURE__ */ jsx(DialogContext, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t1) : t1 = $[5], t1;
 }
 const DEFAULT_KBD_ELEMENT = "kbd";
 function KBD(props) {
@@ -2489,7 +2526,7 @@ function Menu(props) {
   let t14;
   $[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 $[53] !== t14 || $[54] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t14 }), $[53] = t14, $[54] = value, $[55] = t15) : t15 = $[55], t15;
+  return $[53] !== t14 || $[54] !== value ? (t15 = /* @__PURE__ */ jsx(MenuContext, { value, children: t14 }), $[53] = t14, $[54] = value, $[55] = t15) : t15 = $[55], t15;
 }
 function MenuButton(props) {
   const $ = c(57), {
@@ -3135,7 +3172,7 @@ function ToastProvider(props) {
   let t3;
   $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t3 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp$4) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t3) : t3 = $[9];
   let t4;
-  return $[10] !== children || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+  return $[10] !== children || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxs(ToastContext, { value, children: [
     children,
     t3
   ] }), $[10] = children, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
@@ -3363,7 +3400,7 @@ function Tree(props) {
   let t18;
   $[29] !== children || $[30] !== gap || $[31] !== handleFocus || $[32] !== handleKeyDown || $[33] !== rest ? (t18 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "Tree", ...rest, gap, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", children }), $[29] = children, $[30] = gap, $[31] = handleFocus, $[32] = handleKeyDown, $[33] = rest, $[34] = t18) : t18 = $[34];
   let t19;
-  return $[35] !== contextValue || $[36] !== t18 ? (t19 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t18 }), $[35] = contextValue, $[36] = t18, $[37] = t19) : t19 = $[37], t19;
+  return $[35] !== contextValue || $[36] !== t18 ? (t19 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t18 }), $[35] = contextValue, $[36] = t18, $[37] = t19) : t19 = $[37], t19;
 }
 function useTree() {
   const tree = use(TreeContext);
@@ -3485,7 +3522,7 @@ function TreeItem(props) {
     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];
+    $[89] !== contextValue || $[90] !== t302 ? (t312 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t302 }), $[89] = contextValue, $[90] = t302, $[91] = t312) : t312 = $[91];
     let t322;
     return $[92] !== handleClick || $[93] !== id || $[94] !== itemKey || $[95] !== t242 || $[96] !== t252 || $[97] !== t262 || $[98] !== t292 || $[99] !== t312 ? (t322 = /* @__PURE__ */ jsxs(Box, { "data-selected": t242, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...t252, as: "li", className: t262, onClick: handleClick, ref: setRootElement, role: "none", children: [
       t292,
@@ -3507,7 +3544,7 @@ function TreeItem(props) {
   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];
+  $[114] !== contextValue || $[115] !== t31 ? (t32 = /* @__PURE__ */ jsx(TreeContext, { value: contextValue, children: t31 }), $[114] = contextValue, $[115] = t31, $[116] = t32) : t32 = $[116];
   let t33;
   return $[117] !== expanded || $[118] !== handleClick || $[119] !== handleKeyDown || $[120] !== id || $[121] !== itemKey || $[122] !== t24 || $[123] !== t25 || $[124] !== t26 || $[125] !== t30 || $[126] !== t32 || $[127] !== tabIndex ? (t33 = /* @__PURE__ */ jsxs(Box, { "data-selected": t24, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...t25, "aria-expanded": expanded, className: t26, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
     t30,
@@ -3777,7 +3814,7 @@ function Label(props) {
 }
 const DEFAULT_AVATAR_ELEMENT = "span";
 function Avatar(props) {
-  const $ = c(50), t0 = props;
+  const $ = c(52), t0 = props;
   let animateArrowFrom, arrowPositionProp, className, hideInnerStroke, initials, onImageLoadError, rest, src, t1, t2, t3, title;
   $[0] !== t0 ? ({
     __unstable_hideInnerStroke: hideInnerStroke,
@@ -3793,52 +3830,55 @@ function Avatar(props) {
     size: t3,
     ...rest
   } = t0, $[0] = t0, $[1] = animateArrowFrom, $[2] = arrowPositionProp, $[3] = className, $[4] = hideInnerStroke, $[5] = initials, $[6] = onImageLoadError, $[7] = rest, $[8] = src, $[9] = t1, $[10] = t2, $[11] = t3, $[12] = title) : (animateArrowFrom = $[1], arrowPositionProp = $[2], className = $[3], hideInnerStroke = $[4], initials = $[5], onImageLoadError = $[6], rest = $[7], src = $[8], t1 = $[9], t2 = $[10], t3 = $[11], title = $[12]);
-  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t3 === void 0 ? 1 : t3, size2 = useResponsiveProp(sizeProp), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
-  let t4, t5;
-  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t4 = () => {
+  const Element2 = t1 === void 0 ? DEFAULT_AVATAR_ELEMENT : t1, color = t2 === void 0 ? "magenta" : t2, sizeProp = t3 === void 0 ? 1 : t3;
+  let t4;
+  $[13] !== sizeProp ? (t4 = _getResponsiveProp(sizeProp), $[13] = sizeProp, $[14] = t4) : t4 = $[14];
+  const size2 = t4, [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageError, setImageError] = useState(!1);
+  let t5, t6;
+  $[15] !== arrowPosition || $[16] !== arrowPositionProp ? (t5 = () => {
     if (arrowPosition === arrowPositionProp)
       return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, t5 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t4, $[16] = t5) : (t4 = $[15], t5 = $[16]), useEffect(t4, t5);
-  let t6, t7;
-  $[17] !== src ? (t6 = () => {
+  }, t6 = [arrowPosition, arrowPositionProp], $[15] = arrowPosition, $[16] = arrowPositionProp, $[17] = t5, $[18] = t6) : (t5 = $[17], t6 = $[18]), useEffect(t5, t6);
+  let t7, t8;
+  $[19] !== src ? (t7 = () => {
     src && setImageError(!1);
-  }, t7 = [src], $[17] = src, $[18] = t6, $[19] = t7) : (t6 = $[18], t7 = $[19]), useEffect(t6, t7);
-  let t8;
-  $[20] !== onImageLoadError ? (t8 = () => {
-    setImageError(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, $[20] = onImageLoadError, $[21] = t8) : t8 = $[21];
-  const handleImageError = t8;
+  }, t8 = [src], $[19] = src, $[20] = t7, $[21] = t8) : (t7 = $[20], t8 = $[21]), useEffect(t7, t8);
   let t9;
-  $[22] !== size2 ? (t9 = Object.values(size2).map(_temp$2), $[22] = size2, $[23] = t9) : t9 = $[23];
-  const initialsSize = t9, t10 = hideInnerStroke ? "" : void 0;
-  let t11;
-  $[24] !== className || $[25] !== color || $[26] !== sizeProp ? (t11 = avatar({
+  $[22] !== onImageLoadError ? (t9 = () => {
+    setImageError(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
+  }, $[22] = onImageLoadError, $[23] = t9) : t9 = $[23];
+  const handleImageError = t9;
+  let t10;
+  $[24] !== size2 ? (t10 = Object.values(size2).map(_temp$2), $[24] = size2, $[25] = t10) : t10 = $[25];
+  const initialsSize = t10, t11 = hideInnerStroke ? "" : void 0;
+  let t12;
+  $[26] !== className || $[27] !== color || $[28] !== sizeProp ? (t12 = avatar({
     className,
     color,
     size: sizeProp
-  }), $[24] = className, $[25] = color, $[26] = sizeProp, $[27] = t11) : t11 = $[27];
-  const t12 = imageError ? "" : void 0;
-  let t13;
-  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t13 = avatarArrow(), $[28] = t13) : t13 = $[28];
+  }), $[26] = className, $[27] = color, $[28] = sizeProp, $[29] = t12) : t12 = $[29];
+  const t13 = imageError ? "" : void 0;
   let t14;
-  $[29] !== color ? (t14 = /* @__PURE__ */ jsx("span", { className: t13, children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[29] = color, $[30] = t14) : t14 = $[30];
+  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t14 = avatarArrow(), $[30] = t14) : t14 = $[30];
   let t15;
-  $[31] === Symbol.for("react.memo_cache_sentinel") ? (t15 = avatarInitials(), $[31] = t15) : t15 = $[31];
+  $[31] !== color ? (t15 = /* @__PURE__ */ jsx("span", { className: t14, children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[31] = color, $[32] = t15) : t15 = $[32];
   let t16;
-  $[32] !== initials || $[33] !== initialsSize ? (t16 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t15, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[32] = initials, $[33] = initialsSize, $[34] = t16) : t16 = $[34];
+  $[33] === Symbol.for("react.memo_cache_sentinel") ? (t16 = avatarInitials(), $[33] = t16) : t16 = $[33];
   let t17;
-  $[35] !== handleImageError || $[36] !== initials || $[37] !== src ? (t17 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
+  $[34] !== initials || $[35] !== initialsSize ? (t17 = /* @__PURE__ */ jsx(Box, { alignItems: "center", as: "span", className: t16, display: "flex", justifyContent: "center", position: "absolute", inset: 0, children: /* @__PURE__ */ jsx(Label, { align: "center", as: "span", size: initialsSize, weight: "medium", children: initials }) }), $[34] = initials, $[35] = initialsSize, $[36] = t17) : t17 = $[36];
+  let t18;
+  $[37] !== handleImageError || $[38] !== initials || $[39] !== src ? (t18 = src && /* @__PURE__ */ jsxs(Box, { className: avatarImage(), inset: 0, position: "absolute", children: [
     /* @__PURE__ */ jsx("img", { alt: initials, onError: handleImageError, src }),
     /* @__PURE__ */ jsx("span", { className: avatarImageOutline() })
-  ] }), $[35] = handleImageError, $[36] = initials, $[37] = src, $[38] = t17) : t17 = $[38];
-  let t18;
-  return $[39] !== Element2 || $[40] !== arrowPosition || $[41] !== rest || $[42] !== t10 || $[43] !== t11 || $[44] !== t12 || $[45] !== t14 || $[46] !== t16 || $[47] !== t17 || $[48] !== title ? (t18 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t10, "data-ui": "Avatar", ...rest, "aria-label": title, className: t11, "data-arrow-position": arrowPosition, "data-image-error": t12, title, children: [
-    t14,
-    t16,
-    t17
-  ] }), $[39] = Element2, $[40] = arrowPosition, $[41] = rest, $[42] = t10, $[43] = t11, $[44] = t12, $[45] = t14, $[46] = t16, $[47] = t17, $[48] = title, $[49] = t18) : t18 = $[49], t18;
+  ] }), $[37] = handleImageError, $[38] = initials, $[39] = src, $[40] = t18) : t18 = $[40];
+  let t19;
+  return $[41] !== Element2 || $[42] !== arrowPosition || $[43] !== rest || $[44] !== t11 || $[45] !== t12 || $[46] !== t13 || $[47] !== t15 || $[48] !== t17 || $[49] !== t18 || $[50] !== title ? (t19 = /* @__PURE__ */ jsxs(Element2, { "data-hide-inner-stroke": t11, "data-ui": "Avatar", ...rest, "aria-label": title, className: t12, "data-arrow-position": arrowPosition, "data-image-error": t13, title, children: [
+    t15,
+    t17,
+    t18
+  ] }), $[41] = Element2, $[42] = arrowPosition, $[43] = rest, $[44] = t11, $[45] = t12, $[46] = t13, $[47] = t15, $[48] = t17, $[49] = t18, $[50] = title, $[51] = t19) : t19 = $[51], t19;
 }
 function _temp$2(s) {
   return s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0;
@@ -4405,9 +4445,6 @@ const DEFAULT_TOOLTIP_ARROW_WIDTH = 15, DEFAULT_TOOLTIP_ARROW_HEIGHT = 6, DEFAUL
   "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
   "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
 }, TooltipDelayGroupContext = createGlobalScopedContext("@sanity/ui/v4/tooltipDelayGroup", null);
-function useTooltipDelayGroup() {
-  return use(TooltipDelayGroupContext);
-}
 function TooltipLayer(props) {
   const $ = c(50);
   let animate, arrow2, arrowRef, arrowX, arrowY, children, originX, originY, padding, placement, radius, rest, scheme, shadow, style, t0;
@@ -4462,7 +4499,7 @@ function TooltipLayer(props) {
 }
 const DEFAULT_TOOLTIP_ELEMENT = "div";
 function Tooltip(props) {
-  const $ = c(143), boundaryElementContext = useBoundaryElement(), t0 = props;
+  const $ = c(143), t0 = props;
   let _boundaryElement, _fallbackPlacements, childProp, className, content2, delay, disabled, forwardedRef, portalProp, rest, scheme, t1, t2, t3, t4, t5, t6, t7, t8, t9;
   $[0] !== t0 ? ({
     animate: t1,
@@ -4486,10 +4523,14 @@ function Tooltip(props) {
     tone: t9,
     ...rest
   } = 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);
+  const _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, as = t3 === void 0 ? DEFAULT_TOOLTIP_ELEMENT : t3, padding = t4 === void 0 ? 2 : t4, placementProp = t5 === void 0 ? "bottom" : t5, radius = t6 === void 0 ? 3 : t6, shadow = t7 === void 0 ? 2 : t7, zOffset = t8 === void 0 ? Z_OFFSETS.tooltip : t8, tone = t9 === void 0 ? "inherit" : t9, boundaryElement = _boundaryElement ?? use(BoundaryElementContext), fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], animate = usePrefersReducedMotion() ? !1 : _animate, ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
   let t10;
   $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => ref.current, $[21] = t10) : t10 = $[21], useImperativeHandle(forwardedRef, t10);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let portalElement = null;
+  if (portalProp) {
+    const portal = use(PortalContext);
+    assertPortalContext(portal), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  }
   let t11;
   $[22] !== animate || $[23] !== arrowProp || $[24] !== boundaryElement || $[25] !== fallbackPlacements ? (t11 = {
     animate,
@@ -4518,7 +4559,7 @@ function Tooltip(props) {
     middlewareData,
     refs,
     update
-  } = 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();
+  } = useFloating(t13), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = use(TooltipDelayGroupContext);
   let t14;
   $[33] !== delayGroupContext ? (t14 = delayGroupContext || {}, $[33] = delayGroupContext, $[34] = t14) : t14 = $[34];
   const {
@@ -4596,10 +4637,10 @@ function Tooltip(props) {
     };
   }, 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 = () => {
+  $[80] !== boundaryElement || $[81] !== portalElement ? (t29 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, $[80] = boundaryElement, $[81] = portalElement?.offsetWidth, $[82] = t29) : t29 = $[82];
+  }, $[80] = boundaryElement, $[81] = portalElement, $[82] = t29) : t29 = $[82];
   let t30;
   $[83] !== boundaryElement || $[84] !== portalElement ? (t30 = [boundaryElement, portalElement], $[83] = boundaryElement, $[84] = portalElement, $[85] = t30) : t30 = $[85], useLayoutEffect(t29, t30);
   let t31;
@@ -4652,16 +4693,26 @@ function Tooltip(props) {
   let t40;
   $[109] !== animate || $[110] !== arrowProp || $[111] !== arrowX || $[112] !== arrowY || $[113] !== as || $[114] !== content2 || $[115] !== originX || $[116] !== originY || $[117] !== padding || $[118] !== placement || $[119] !== radius || $[120] !== rest || $[121] !== scheme || $[122] !== setArrow || $[123] !== setFloating || $[124] !== shadow || $[125] !== t37 || $[126] !== t39 || $[127] !== tone || $[128] !== zOffset ? (t40 = /* @__PURE__ */ jsx(TooltipLayer, { "data-ui": "Tooltip", ...rest, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, as, className: t37, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, style: t39, tone, zOffset, children: content2 }), $[109] = animate, $[110] = arrowProp, $[111] = arrowX, $[112] = arrowY, $[113] = as, $[114] = content2, $[115] = originX, $[116] = originY, $[117] = padding, $[118] = placement, $[119] = radius, $[120] = rest, $[121] = scheme, $[122] = setArrow, $[123] = setFloating, $[124] = shadow, $[125] = t37, $[126] = t39, $[127] = tone, $[128] = zOffset, $[129] = t40) : t40 = $[129];
   const node_0 = t40;
+  let children = showTooltip ? node_0 : null;
+  if (showTooltip && portalProp) {
+    let resolvedTone = tone;
+    if (tone === "inherit") {
+      const card2 = use(CardContext);
+      assertCardContext(card2), resolvedTone = card2.tone;
+    }
+    const t412 = typeof portalProp == "string" ? portalProp : void 0, t422 = scheme ?? "light";
+    let t43;
+    $[130] !== node_0 || $[131] !== resolvedTone || $[132] !== t422 ? (t43 = /* @__PURE__ */ jsx(CardProvider, { tone: resolvedTone, scheme: t422, children: node_0 }), $[130] = node_0, $[131] = resolvedTone, $[132] = t422, $[133] = t43) : t43 = $[133];
+    let t44;
+    $[134] !== t412 || $[135] !== t43 ? (t44 = /* @__PURE__ */ jsx(Portal, { __unstable_name: t412, children: t43 }), $[134] = t412, $[135] = t43, $[136] = t44) : t44 = $[136], children = t44;
+  }
   let t41;
-  $[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;
+  $[137] !== animate || $[138] !== children ? (t41 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[137] = animate, $[138] = children, $[139] = t41) : t41 = $[139];
   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,
+  return $[140] !== child || $[141] !== t41 ? (t42 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t41,
     child
-  ] }), $[140] = child, $[141] = t42, $[142] = t43) : t43 = $[142], t43;
+  ] }), $[140] = child, $[141] = t41, $[142] = t42) : t42 = $[142], t42;
 }
 function useMiddleware(t0) {
   const $ = c(17), {
@@ -4744,21 +4795,26 @@ function TooltipDelayGroupProvider(props) {
   }, $[0] = closeDelay, $[1] = openTooltipId, $[2] = setIsGroupActive, $[3] = setOpenTooltipId, $[4] = t0, $[5] = t1) : t1 = $[5];
   const value = t1;
   let t2;
-  return $[6] !== children || $[7] !== value ? (t2 = /* @__PURE__ */ jsx(TooltipDelayGroupContext.Provider, { value, children }), $[6] = children, $[7] = value, $[8] = t2) : t2 = $[8], t2;
+  return $[6] !== children || $[7] !== value ? (t2 = /* @__PURE__ */ jsx(TooltipDelayGroupContext, { value, children }), $[6] = children, $[7] = value, $[8] = t2) : t2 = $[8], t2;
+}
+function useTooltipDelayGroup() {
+  return use(TooltipDelayGroupContext);
 }
 function BoundaryElementProvider(props) {
-  const $ = c(5), {
+  const $ = c(3), {
     children,
     element
   } = props;
   let t0;
-  $[0] !== element ? (t0 = {
+  return $[0] !== children || $[1] !== element ? (t0 = /* @__PURE__ */ jsx(BoundaryElementContext, { value: element, children }), $[0] = children, $[1] = element, $[2] = t0) : t0 = $[2], t0;
+}
+function useBoundaryElement() {
+  const $ = c(2), element = use(BoundaryElementContext);
+  let t0;
+  return $[0] !== element ? (t0 = {
     version: 0,
     element
-  }, $[0] = element, $[1] = t0) : t0 = $[1];
-  const value = t0;
-  let t1;
-  return $[2] !== children || $[3] !== value ? (t1 = /* @__PURE__ */ jsx(BoundaryElementContext.Provider, { value, children }), $[2] = children, $[3] = value, $[4] = t1) : t1 = $[4], t1;
+  }, $[0] = element, $[1] = t0) : t0 = $[1], t0;
 }
 function findMaxBreakpoints(media2, width) {
   const ret = [];
@@ -5041,7 +5097,6 @@ export {
   VirtualList,
   _ResizeObserver,
   _elementSizeObserver,
-  _getArrayProp,
   _getResponsiveProp,
   _hasFocus,
   _isEnterToClickElement,
@@ -5072,7 +5127,6 @@ export {
   usePortal,
   usePrefersDark,
   usePrefersReducedMotion,
-  useResponsiveProp,
   useToast,
   useTooltipDelayGroup,
   useTree