@sanity/ui 2.9.0-canary.4 → 2.9.0-canary.6

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
-import { useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useMemo, useCallback, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { useState, useRef, useEffect, useDebugValue, useImperativeHandle, useSyncExternalStore, createContext, useContext, forwardRef, useId, Children, isValidElement, cloneElement, Component, memo, useLayoutEffect, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import ReactIs, { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
@@ -3763,8 +3763,8 @@ const MotionCard$1 = styled(motion(Card))`
     will-change: opacity;
   }
 `, PopoverCard = memo(forwardRef(function(props, ref) {
-  const $ = c(60);
-  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, width, arrowX, arrowY, restProps, padding, children, overflow, arrow2, arrowRef, placement, radius, scheme, shadow, tone;
+  const $ = c(58);
+  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, arrowX, arrowY, restProps, padding, children, overflow, arrow2, arrowRef, placement, radius, scheme, shadow, tone;
   $[0] !== props ? ({
     __unstable_margins: marginsProp,
     animate,
@@ -3784,11 +3784,10 @@ const MotionCard$1 = styled(motion(Card))`
     strategy,
     style,
     tone,
-    width,
     x: xProp,
     y: yProp,
     ...restProps
-  } = props, $[0] = props, $[1] = marginsProp, $[2] = xProp, $[3] = yProp, $[4] = animate, $[5] = originX, $[6] = originY, $[7] = strategy, $[8] = style, $[9] = width, $[10] = arrowX, $[11] = arrowY, $[12] = restProps, $[13] = padding, $[14] = children, $[15] = overflow, $[16] = arrow2, $[17] = arrowRef, $[18] = placement, $[19] = radius, $[20] = scheme, $[21] = shadow, $[22] = tone) : (marginsProp = $[1], xProp = $[2], yProp = $[3], animate = $[4], originX = $[5], originY = $[6], strategy = $[7], style = $[8], width = $[9], arrowX = $[10], arrowY = $[11], restProps = $[12], padding = $[13], children = $[14], overflow = $[15], arrow2 = $[16], arrowRef = $[17], placement = $[18], radius = $[19], scheme = $[20], shadow = $[21], tone = $[22]);
+  } = props, $[0] = props, $[1] = marginsProp, $[2] = xProp, $[3] = yProp, $[4] = animate, $[5] = originX, $[6] = originY, $[7] = strategy, $[8] = style, $[9] = arrowX, $[10] = arrowY, $[11] = restProps, $[12] = padding, $[13] = children, $[14] = overflow, $[15] = arrow2, $[16] = arrowRef, $[17] = placement, $[18] = radius, $[19] = scheme, $[20] = shadow, $[21] = tone) : (marginsProp = $[1], xProp = $[2], yProp = $[3], animate = $[4], originX = $[5], originY = $[6], strategy = $[7], style = $[8], arrowX = $[9], arrowY = $[10], restProps = $[11], padding = $[12], children = $[13], overflow = $[14], arrow2 = $[15], arrowRef = $[16], placement = $[17], radius = $[18], scheme = $[19], shadow = $[20], tone = $[21]);
   const {
     zIndex
   } = useLayer();
@@ -3798,139 +3797,163 @@ const MotionCard$1 = styled(motion(Card))`
   let t1;
   const t2 = animate ? "transform" : void 0;
   let t3;
-  $[23] !== x || $[24] !== originX || $[25] !== originY || $[26] !== strategy || $[27] !== y || $[28] !== width || $[29] !== zIndex || $[30] !== t2 || $[31] !== style ? (t3 = {
+  $[22] !== x || $[23] !== originX || $[24] !== originY || $[25] !== strategy || $[26] !== y || $[27] !== zIndex || $[28] !== t2 || $[29] !== style ? (t3 = {
     left: x,
     originX,
     originY,
     position: strategy,
     top: y,
-    width,
     zIndex,
     willChange: t2,
     ...style
-  }, $[23] = x, $[24] = originX, $[25] = originY, $[26] = strategy, $[27] = y, $[28] = width, $[29] = zIndex, $[30] = t2, $[31] = style, $[32] = t3) : t3 = $[32], t1 = t3;
+  }, $[22] = x, $[23] = originX, $[24] = originY, $[25] = strategy, $[26] = y, $[27] = zIndex, $[28] = t2, $[29] = style, $[30] = t3) : t3 = $[30], t1 = t3;
   const rootStyle2 = t1;
   let t4;
   const t5 = arrowX !== null ? arrowX : void 0, t6 = arrowY !== null ? arrowY : void 0;
   let t7;
-  $[33] !== t5 || $[34] !== t6 ? (t7 = {
+  $[31] !== t5 || $[32] !== t6 ? (t7 = {
     left: t5,
     top: t6,
     right: void 0,
     bottom: void 0
-  }, $[33] = t5, $[34] = t6, $[35] = t7) : t7 = $[35], t4 = t7;
+  }, $[31] = t5, $[32] = t6, $[33] = t7) : t7 = $[33], t4 = t7;
   const arrowStyle = t4, t8 = restProps;
   let t9;
-  $[36] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[36] = animate, $[37] = t9) : t9 = $[37];
+  $[34] !== animate ? (t9 = animate ? POPOVER_MOTION_PROPS : {}, $[34] = animate, $[35] = t9) : t9 = $[35];
   let t10;
-  $[38] !== padding || $[39] !== children ? (t10 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = padding, $[39] = children, $[40] = t10) : t10 = $[40];
+  $[36] !== padding || $[37] !== children ? (t10 = /* @__PURE__ */ jsx(Flex, { direction: "column", flex: 1, padding, children }), $[36] = padding, $[37] = children, $[38] = t10) : t10 = $[38];
   let t11;
-  $[41] !== overflow || $[42] !== t10 ? (t11 = /* @__PURE__ */ jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[41] = overflow, $[42] = t10, $[43] = t11) : t11 = $[43];
+  $[39] !== overflow || $[40] !== t10 ? (t11 = /* @__PURE__ */ jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[39] = overflow, $[40] = t10, $[41] = t11) : t11 = $[41];
   let t12;
-  $[44] !== arrow2 || $[45] !== arrowRef || $[46] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[44] = arrow2, $[45] = arrowRef, $[46] = arrowStyle, $[47] = t12) : t12 = $[47];
+  $[42] !== arrow2 || $[43] !== arrowRef || $[44] !== arrowStyle ? (t12 = arrow2 && /* @__PURE__ */ jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[42] = arrow2, $[43] = arrowRef, $[44] = arrowStyle, $[45] = t12) : t12 = $[45];
   let t13;
-  return $[48] !== t8 || $[49] !== placement || $[50] !== radius || $[51] !== ref || $[52] !== scheme || $[53] !== shadow || $[54] !== rootStyle2 || $[55] !== tone || $[56] !== t9 || $[57] !== t11 || $[58] !== t12 ? (t13 = /* @__PURE__ */ jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, ...t9, children: [
+  return $[46] !== t8 || $[47] !== placement || $[48] !== radius || $[49] !== ref || $[50] !== scheme || $[51] !== shadow || $[52] !== rootStyle2 || $[53] !== tone || $[54] !== t9 || $[55] !== t11 || $[56] !== t12 ? (t13 = /* @__PURE__ */ jsxs(MotionCard$1, { "data-ui": "Popover", ...t8, "data-placement": placement, radius, ref, scheme, shadow, sizing: "border", style: rootStyle2, tone, ...t9, children: [
     t11,
     t12
-  ] }), $[48] = t8, $[49] = placement, $[50] = radius, $[51] = ref, $[52] = scheme, $[53] = shadow, $[54] = rootStyle2, $[55] = tone, $[56] = t9, $[57] = t11, $[58] = t12, $[59] = t13) : t13 = $[59], t13;
+  ] }), $[46] = t8, $[47] = placement, $[48] = radius, $[49] = ref, $[50] = scheme, $[51] = shadow, $[52] = rootStyle2, $[53] = tone, $[54] = t9, $[55] = t11, $[56] = t12, $[57] = t13) : t13 = $[57], t13;
 }));
 PopoverCard.displayName = "Memo(ForwardRef(PopoverCard))";
 const Popover = memo(forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = c(128), {
     container,
     layer
-  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement: _boundaryElement,
-    children: childProp,
-    constrainSize = !1,
-    content,
-    disabled,
-    fallbackPlacements: _fallbackPlacements,
-    matchReferenceWidth,
-    floatingBoundary: _floatingBoundary,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onActivate,
-    open,
-    overflow = "hidden",
-    padding: paddingProp,
-    placement: placementProp = "bottom",
-    portal,
-    preventOverflow = !0,
-    radius: radiusProp = 3,
-    referenceBoundary: _referenceBoundary,
-    referenceElement,
-    scheme,
-    shadow: shadowProp = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: _zOffsetProp,
-    updateRef,
-    ...restProps
-  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), [arrowElement, setArrowElement] = useState(null), rootBoundary = "viewport";
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
-    container,
-    mediaIndex,
-    width: widthArrayProp
-  }), widthRef = useRef(width);
-  useEffect(() => {
-    widthRef.current = width;
-  }, [width]);
-  const maxWidth = calcMaxWidth({
-    boundaryWidth,
-    currentWidth: width
-  }), maxWidthRef = useRef(maxWidth);
-  useEffect(() => {
-    maxWidthRef.current = maxWidth;
-  }, [maxWidth]);
-  const referenceWidthRef = useRef();
-  useLayoutEffect(() => {
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
+  let t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, paddingProp, open, matchReferenceWidth, childProp, referenceElement, updateRef, disabled, restProps, scheme, content, portal;
+  if ($[0] !== props) {
+    const {
+      __unstable_margins: t112,
+      animate: t122,
+      arrow: t132,
+      boundaryElement: t142,
+      children: t152,
+      constrainSize: t162,
+      content: t172,
+      disabled: t182,
+      fallbackPlacements: t192,
+      matchReferenceWidth: t202,
+      floatingBoundary: t212,
+      onActivate,
+      open: t222,
+      overflow: t232,
+      padding: t242,
+      placement: t252,
+      portal: t262,
+      preventOverflow: t272,
+      radius: t282,
+      referenceBoundary: t292,
+      referenceElement: t302,
+      scheme: t312,
+      shadow: t322,
+      tone: t332,
+      width: t342,
+      zOffset: t352,
+      updateRef: t362,
+      ...t372
+    } = props;
+    t0 = t112, t1 = t122, t2 = t132, _boundaryElement = t142, childProp = t152, t3 = t162, content = t172, disabled = t182, _fallbackPlacements = t192, matchReferenceWidth = t202, _floatingBoundary = t212, open = t222, t4 = t232, paddingProp = t242, t5 = t252, portal = t262, t6 = t272, t7 = t282, _referenceBoundary = t292, referenceElement = t302, scheme = t312, t8 = t322, t9 = t332, t10 = t342, _zOffsetProp = t352, updateRef = t362, restProps = t372, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = t7, $[9] = t8, $[10] = t9, $[11] = t10, $[12] = _boundaryElement, $[13] = _fallbackPlacements, $[14] = _floatingBoundary, $[15] = _referenceBoundary, $[16] = _zOffsetProp, $[17] = paddingProp, $[18] = open, $[19] = matchReferenceWidth, $[20] = childProp, $[21] = referenceElement, $[22] = updateRef, $[23] = disabled, $[24] = restProps, $[25] = scheme, $[26] = content, $[27] = portal;
+  } else
+    t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], t7 = $[8], t8 = $[9], t9 = $[10], t10 = $[11], _boundaryElement = $[12], _fallbackPlacements = $[13], _floatingBoundary = $[14], _referenceBoundary = $[15], _zOffsetProp = $[16], paddingProp = $[17], open = $[18], matchReferenceWidth = $[19], childProp = $[20], referenceElement = $[21], updateRef = $[22], disabled = $[23], restProps = $[24], scheme = $[25], content = $[26], portal = $[27];
+  const margins = t0 === void 0 ? DEFAULT_POPOVER_MARGINS : t0, _animate = t1 === void 0 ? !1 : t1, arrowProp = t2 === void 0 ? !1 : t2, constrainSize = t3 === void 0 ? !1 : t3, overflow = t4 === void 0 ? "hidden" : t4, placementProp = t5 === void 0 ? "bottom" : t5, preventOverflow = t6 === void 0 ? !0 : t6, radiusProp = t7 === void 0 ? 3 : t7, shadowProp = t8 === void 0 ? 3 : t8, tone = t9 === void 0 ? "inherit" : t9, widthProp = t10 === void 0 ? "auto" : t10, boundaryElement = _boundaryElement ?? boundaryElementContext.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = useRef(null), [arrowElement, setArrowElement] = useState(null);
+  let t11;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[28] = t11) : t11 = $[28], useImperativeHandle(forwardedRef, t11);
+  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0;
+  let t12, t13;
+  $[29] !== open || $[30] !== constrainSize || $[31] !== matchReferenceWidth || $[32] !== container || $[33] !== mediaIndex || $[34] !== widthArrayProp || $[35] !== boundaryWidth ? (t12 = () => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement) return;
-    const referenceWidth = referenceWidthRef.current;
-    matchReferenceWidth ? referenceWidthRef.current !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
-  }, [width, matchReferenceWidth, maxWidth, open]);
-  const middleware = useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && 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({
+    if (!open || !floatingElement || constrainSize || matchReferenceWidth)
+      return;
+    const currentWidth = calcCurrentWidth({
+      container,
+      mediaIndex,
+      width: widthArrayProp
+    }), maxWidth = calcMaxWidth({
+      boundaryWidth,
+      currentWidth
+    });
+    currentWidth !== void 0 && (floatingElement.style.width = `${currentWidth}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
+  }, t13 = [boundaryWidth, constrainSize, container, matchReferenceWidth, mediaIndex, open, widthArrayProp], $[29] = open, $[30] = constrainSize, $[31] = matchReferenceWidth, $[32] = container, $[33] = mediaIndex, $[34] = widthArrayProp, $[35] = boundaryWidth, $[36] = t12, $[37] = t13) : (t12 = $[36], t13 = $[37]), useLayoutEffect(t12, t13);
+  let t14;
+  $[38] !== constrainSize || $[39] !== preventOverflow || $[40] !== floatingBoundary || $[41] !== fallbackPlacements ? (t14 = (constrainSize || preventOverflow) && flip({
+    boundary: floatingBoundary || void 0,
+    fallbackPlacements,
+    padding: DEFAULT_POPOVER_PADDING,
+    rootBoundary: "viewport"
+  }), $[38] = constrainSize, $[39] = preventOverflow, $[40] = floatingBoundary, $[41] = fallbackPlacements, $[42] = t14) : t14 = $[42];
+  let t15;
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t15 = offset({
+    mainAxis: DEFAULT_POPOVER_DISTANCE
+  }), $[43] = t15) : t15 = $[43];
+  let t16;
+  $[44] !== constrainSize || $[45] !== matchReferenceWidth || $[46] !== container || $[47] !== mediaIndex || $[48] !== widthArrayProp || $[49] !== boundaryWidth || $[50] !== floatingBoundary || $[51] !== margins ? (t16 = (constrainSize || matchReferenceWidth) && size({
+    apply(t172) {
+      const {
         availableWidth,
         availableHeight,
         elements,
-        referenceWidth: referenceWidth_0
-      }) {
-        referenceWidthRef.current = referenceWidth_0;
-        const _currentWidth = widthRef.current, _maxWidth = maxWidthRef.current;
-        matchReferenceWidth ? elements.floating.style.width = `${referenceWidth_0}px` : _currentWidth !== void 0 && (elements.floating.style.width = `${_currentWidth}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, _maxWidth ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      constrainSize,
-      margins,
-      matchReferenceWidth,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowElement,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowElement, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+        referenceWidth
+      } = t172, currentWidth_0 = calcCurrentWidth({
+        container,
+        mediaIndex,
+        width: widthArrayProp
+      }), maxWidth_0 = calcMaxWidth({
+        boundaryWidth,
+        currentWidth: currentWidth_0
+      });
+      matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : currentWidth_0 !== void 0 && (elements.floating.style.width = `${currentWidth_0}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidth_0 ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+    },
+    boundaryElement: floatingBoundary || void 0,
+    constrainSize,
+    margins,
+    matchReferenceWidth,
+    padding: DEFAULT_POPOVER_PADDING
+  }), $[44] = constrainSize, $[45] = matchReferenceWidth, $[46] = container, $[47] = mediaIndex, $[48] = widthArrayProp, $[49] = boundaryWidth, $[50] = floatingBoundary, $[51] = margins, $[52] = t16) : t16 = $[52];
+  let t17;
+  $[53] !== preventOverflow || $[54] !== floatingBoundary ? (t17 = preventOverflow && shift({
+    boundary: floatingBoundary || void 0,
+    rootBoundary: "viewport",
+    padding: DEFAULT_POPOVER_PADDING
+  }), $[53] = preventOverflow, $[54] = floatingBoundary, $[55] = t17) : t17 = $[55];
+  let t18;
+  $[56] !== arrowProp || $[57] !== arrowElement ? (t18 = arrowProp && arrow({
+    element: arrowElement,
+    padding: DEFAULT_POPOVER_PADDING
+  }), $[56] = arrowProp, $[57] = arrowElement, $[58] = t18) : t18 = $[58];
+  const t19 = animate && origin, t20 = referenceBoundary || void 0;
+  let t21;
+  $[59] !== t20 ? (t21 = hide({
+    boundary: t20,
+    padding: DEFAULT_POPOVER_PADDING,
+    strategy: "referenceHidden"
+  }), $[59] = t20, $[60] = t21) : t21 = $[60];
+  let t22;
+  $[61] !== t14 || $[62] !== t16 || $[63] !== t17 || $[64] !== t18 || $[65] !== t19 || $[66] !== t21 ? (t22 = [t14, t15, t16, t17, t18, t19, t21], $[61] = t14, $[62] = t16, $[63] = t17, $[64] = t18, $[65] = t19, $[66] = t21, $[67] = t22) : t22 = $[67];
+  let t23;
+  $[68] !== t22 || $[69] !== placementProp ? (t23 = {
+    middleware: t22,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
+  }, $[68] = t22, $[69] = placementProp, $[70] = t23) : t23 = $[70];
+  const {
     x,
     y,
     middlewareData,
@@ -3938,31 +3961,60 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
     refs,
     strategy,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setFloating = useCallback((node) => {
+  } = useFloating(t23), 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 t24;
+  $[71] !== refs ? (t24 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), [childElement, setChildElement] = useState(null), setReference = useCallback((node_0) => {
+  }, $[71] = refs, $[72] = t24) : t24 = $[72];
+  const setFloating = t24, [childElement, setChildElement] = useState(null);
+  let t25;
+  $[73] !== refs ? (t25 = (node_0) => {
     refs.setReference(node_0), setChildElement(node_0);
-  }, [refs]);
-  useImperativeHandle(getElementRef(childProp), () => childElement, [childElement]);
-  const child = useMemo(() => !childProp || referenceElement ? null : cloneElement(childProp, {
-    ref: setReference
-  }), [childProp, referenceElement, setReference]);
-  if (useImperativeHandle(updateRef, () => update, [update]), useEffect(() => {
+  }, $[73] = refs, $[74] = t25) : t25 = $[74];
+  const setReference = t25, t26 = childProp;
+  let t27;
+  $[75] !== t26 ? (t27 = getElementRef$1(t26), $[75] = t26, $[76] = t27) : t27 = $[76];
+  let t28, t29;
+  $[77] !== childElement ? (t28 = () => childElement, t29 = [childElement], $[77] = childElement, $[78] = t28, $[79] = t29) : (t28 = $[78], t29 = $[79]), useImperativeHandle(t27, t28, t29);
+  let t30;
+  bb0: {
+    if (!childProp || referenceElement) {
+      t30 = null;
+      break bb0;
+    }
+    let t312;
+    $[80] !== setReference || $[81] !== childProp ? (t312 = cloneElement(childProp, {
+      ref: setReference
+    }), $[80] = setReference, $[81] = childProp, $[82] = t312) : t312 = $[82], t30 = t312;
+  }
+  const child = t30;
+  let t31, t32;
+  $[83] !== update ? (t31 = () => update, t32 = [update], $[83] = update, $[84] = t31, $[85] = t32) : (t31 = $[84], t32 = $[85]), useImperativeHandle(updateRef, t31, t32);
+  let t33, t34;
+  if ($[86] !== child || $[87] !== refs || $[88] !== referenceElement ? (t33 = () => {
     child || refs.setReference(referenceElement || null);
-  }, [referenceElement, refs, child]), disabled)
-    return childProp || /* @__PURE__ */ jsx(Fragment, {});
-  const popover = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrowElement, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: matchReferenceWidth ? referenceWidthRef.current : width, x, y, children: content }) }), children = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+  }, t34 = [referenceElement, refs, child], $[86] = child, $[87] = refs, $[88] = referenceElement, $[89] = t33, $[90] = t34) : (t33 = $[89], t34 = $[90]), useEffect(t33, t34), disabled) {
+    let t352;
+    return $[91] !== childProp ? (t352 = childProp || /* @__PURE__ */ jsx(Fragment, {}), $[91] = childProp, $[92] = t352) : t352 = $[92], t352;
+  }
+  let t35;
+  $[93] !== restProps || $[94] !== margins || $[95] !== animate || $[96] !== arrowProp || $[97] !== arrowX || $[98] !== arrowY || $[99] !== referenceHidden || $[100] !== overflow || $[101] !== padding || $[102] !== placement || $[103] !== radius || $[104] !== setFloating || $[105] !== scheme || $[106] !== shadow || $[107] !== originX || $[108] !== originY || $[109] !== strategy || $[110] !== tone || $[111] !== x || $[112] !== y || $[113] !== content ? (t35 = /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrowElement, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, x, y, children: content }), $[93] = restProps, $[94] = margins, $[95] = animate, $[96] = arrowProp, $[97] = arrowX, $[98] = arrowY, $[99] = referenceHidden, $[100] = overflow, $[101] = padding, $[102] = placement, $[103] = radius, $[104] = setFloating, $[105] = scheme, $[106] = shadow, $[107] = originX, $[108] = originY, $[109] = strategy, $[110] = tone, $[111] = x, $[112] = y, $[113] = content, $[114] = t35) : t35 = $[114];
+  let t36;
+  $[115] !== zOffset || $[116] !== t35 ? (t36 = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: t35 }), $[115] = zOffset, $[116] = t35, $[117] = t36) : t36 = $[117];
+  const popover = t36;
+  let t37;
+  $[118] !== open || $[119] !== portal || $[120] !== popover ? (t37 = open && (portal ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[118] = open, $[119] = portal, $[120] = popover, $[121] = t37) : t37 = $[121];
+  const children = t37;
+  let t38;
+  $[122] !== animate || $[123] !== children ? (t38 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[122] = animate, $[123] = children, $[124] = t38) : t38 = $[124];
+  let t39;
+  return $[125] !== t38 || $[126] !== child ? (t39 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t38,
     child
-  ] });
+  ] }), $[125] = t38, $[126] = child, $[127] = t39) : t39 = $[127], t39;
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
-function getElementRef(element) {
+function getElementRef$1(element) {
   if (!element) return null;
   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);
@@ -4796,55 +4848,80 @@ TooltipDelayGroupProvider.displayName = "TooltipDelayGroupProvider";
 const Root$a = styled(Layer)`
   pointer-events: none;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
-  const boundaryElementContext = useBoundaryElement(), {
+  const $ = c(142), boundaryElementContext = useBoundaryElement(), {
     layer
-  } = useTheme_v2(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
+  } = useTheme_v2();
+  let t0, t1, t2, t3, t4, t5, _boundaryElement, _fallbackPlacementsProp, _zOffset, portalProp, delay, childProp, disabled, content, restProps, scheme;
+  $[0] !== props ? ({
+    animate: t0,
+    arrow: t1,
     boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
     fallbackPlacements: _fallbackPlacementsProp,
-    padding = 2,
-    placement: placementProp = "bottom",
+    padding: t2,
+    placement: t3,
     portal: portalProp,
-    radius = 2,
+    radius: t4,
     scheme,
-    shadow = 2,
+    shadow: t5,
     zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), 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,
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = _boundaryElement, $[8] = _fallbackPlacementsProp, $[9] = _zOffset, $[10] = portalProp, $[11] = delay, $[12] = childProp, $[13] = disabled, $[14] = content, $[15] = restProps, $[16] = scheme) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], _boundaryElement = $[7], _fallbackPlacementsProp = $[8], _zOffset = $[9], portalProp = $[10], delay = $[11], childProp = $[12], disabled = $[13], content = $[14], restProps = $[15], scheme = $[16]);
+  const _animate = t0 === void 0 ? !1 : t0, arrowProp = t1 === void 0 ? !1 : t1, padding = t2 === void 0 ? 2 : t2, placementProp = t3 === void 0 ? "bottom" : t3, radius = t4 === void 0 ? 2 : t4, shadow = t5 === void 0 ? 2 : t5, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), [arrowElement, setArrowElement] = useState(null), [tooltipMaxWidth, setTooltipMaxWidth] = useState(0);
+  let t6;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[17] = t6) : t6 = $[17], useImperativeHandle(forwardedRef, t6);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let t7, ret;
+  if ($[18] !== boundaryElement || $[19] !== fallbackPlacements || $[20] !== arrowProp || $[21] !== arrowElement || $[22] !== animate) {
+    ret = [];
+    const t82 = boundaryElement || void 0;
+    let t92;
+    $[24] !== t82 || $[25] !== fallbackPlacements ? (t92 = flip({
+      boundary: t82,
       fallbackPlacements,
       padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(offset({
+      rootBoundary: "viewport"
+    }), $[24] = t82, $[25] = fallbackPlacements, $[26] = t92) : t92 = $[26], ret.push(t92);
+    let t102;
+    $[27] === Symbol.for("react.memo_cache_sentinel") ? (t102 = offset({
       mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
+    }), $[27] = t102) : t102 = $[27], ret.push(t102);
+    const t112 = boundaryElement || void 0;
+    let t122;
+    if ($[28] !== t112 ? (t122 = shift({
+      boundary: t112,
+      rootBoundary: "viewport",
       padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+    }), $[28] = t112, $[29] = t122) : t122 = $[29], ret.push(t122), arrowProp) {
+      let t132;
+      $[30] !== arrowElement ? (t132 = arrow({
+        element: arrowElement,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }), $[30] = arrowElement, $[31] = t132) : t132 = $[31], ret.push(t132);
+    }
+    animate && ret.push(origin), $[18] = boundaryElement, $[19] = fallbackPlacements, $[20] = arrowProp, $[21] = arrowElement, $[22] = animate, $[23] = ret;
+  } else
+    ret = $[23];
+  t7 = ret;
+  const middleware = t7;
+  let t8;
+  $[32] !== middleware || $[33] !== placementProp ? (t8 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: autoUpdate
+  }, $[32] = middleware, $[33] = placementProp, $[34] = t8) : t8 = $[34];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: autoUpdate
-  }), 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(), 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) => {
+  } = useFloating(t8), 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(), 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 t9;
+  $[35] !== isInsideGroup || $[36] !== openDelay || $[37] !== delayGroupContext || $[38] !== tooltipId || $[39] !== closeDelay || $[40] !== setIsOpen ? (t9 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4855,67 +4932,133 @@ const Root$a = styled(Layer)`
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]), handleBlur = useCallback((e) => {
+  }, $[35] = isInsideGroup, $[36] = openDelay, $[37] = delayGroupContext, $[38] = tooltipId, $[39] = closeDelay, $[40] = setIsOpen, $[41] = t9) : t9 = $[41];
+  const handleIsOpenChange = t9;
+  let t10;
+  $[42] !== handleIsOpenChange || $[43] !== childProp ? (t10 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = useCallback((e_0) => {
+  }, $[42] = handleIsOpenChange, $[43] = childProp, $[44] = t10) : t10 = $[44];
+  const handleBlur = t10;
+  let t11;
+  $[45] !== handleIsOpenChange || $[46] !== childProp ? (t11 = (e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = useCallback((e_1) => {
+  }, $[45] = handleIsOpenChange, $[46] = childProp, $[47] = t11) : t11 = $[47];
+  const handleClick = t11;
+  let t12;
+  $[48] !== handleIsOpenChange || $[49] !== childProp ? (t12 = (e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = useCallback((e_2) => {
+  }, $[48] = handleIsOpenChange, $[49] = childProp, $[50] = t12) : t12 = $[50];
+  const handleContextMenu = t12;
+  let t13;
+  $[51] !== handleIsOpenChange || $[52] !== childProp ? (t13 = (e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = useCallback((e_3) => {
+  }, $[51] = handleIsOpenChange, $[52] = childProp, $[53] = t13) : t13 = $[53];
+  const handleFocus = t13;
+  let t14;
+  $[54] !== handleIsOpenChange || $[55] !== childProp ? (t14 = (e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = useCallback((e_4) => {
+  }, $[54] = handleIsOpenChange, $[55] = childProp, $[56] = t14) : t14 = $[56];
+  const handleMouseEnter = t14;
+  let t15;
+  $[57] !== handleIsOpenChange || $[58] !== childProp ? (t15 = (e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
+  }, $[57] = handleIsOpenChange, $[58] = childProp, $[59] = t15) : t15 = $[59];
+  const handleMouseLeave = t15;
+  let t16;
+  $[60] !== handleIsOpenChange || $[61] !== referenceElement || $[62] !== showTooltip ? (t16 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip
-  }), useEffect(() => {
+  }, $[60] = handleIsOpenChange, $[61] = referenceElement, $[62] = showTooltip, $[63] = t16) : t16 = $[63], useCloseOnMouseLeave(t16);
+  let t17, t18;
+  $[64] !== disabled || $[65] !== showTooltip || $[66] !== handleIsOpenChange ? (t17 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), useEffect(() => {
+  }, t18 = [disabled, handleIsOpenChange, showTooltip], $[64] = disabled, $[65] = showTooltip, $[66] = handleIsOpenChange, $[67] = t17, $[68] = t18) : (t17 = $[67], t18 = $[68]), useEffect(t17, t18);
+  let t19, t20;
+  $[69] !== content || $[70] !== showTooltip || $[71] !== handleIsOpenChange ? (t19 = () => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]), useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t20 = [content, handleIsOpenChange, showTooltip], $[69] = content, $[70] = showTooltip, $[71] = handleIsOpenChange, $[72] = t19, $[73] = t20) : (t19 = $[72], t20 = $[73]), useEffect(t19, t20);
+  let t21, t22;
+  $[74] !== refs || $[75] !== referenceElement ? (t21 = () => refs.setReference(referenceElement), t22 = [referenceElement, refs], $[74] = refs, $[75] = referenceElement, $[76] = t21, $[77] = t22) : (t21 = $[76], t22 = $[77]), useEffect(t21, t22);
+  let t23, t24;
+  $[78] !== showTooltip || $[79] !== handleIsOpenChange ? (t23 = () => {
+    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(() => {
+  }, t24 = [handleIsOpenChange, showTooltip], $[78] = showTooltip, $[79] = handleIsOpenChange, $[80] = t23, $[81] = t24) : (t23 = $[80], t24 = $[81]), useEffect(t23, t24);
+  let t25, t26;
+  $[82] !== boundaryElement || $[83] !== portalElement ? (t25 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = useCallback((arrowEl) => {
-    arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = useCallback((node) => {
+  }, t26 = [boundaryElement, portalElement], $[82] = boundaryElement, $[83] = portalElement, $[84] = t25, $[85] = t26) : (t25 = $[84], t26 = $[85]), useLayoutEffect(t25, t26);
+  let t27;
+  $[86] !== update ? (t27 = (arrowEl) => {
+    setArrowElement(arrowEl), update();
+  }, $[86] = update, $[87] = t27) : t27 = $[87];
+  const setArrow = t27;
+  let t28;
+  $[88] !== refs ? (t28 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), childRef = useRef(null);
-  useImperativeHandle(childProp?.ref, () => childRef.current);
-  const child = useMemo(() => childProp ? cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: childRef
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (useEffect(() => {
+  }, $[88] = refs, $[89] = t28) : t28 = $[89];
+  const setFloating = t28, childRef = useRef(null), [childElement, setChildElement] = useState(null), t29 = childProp;
+  let t30;
+  $[90] !== t29 ? (t30 = getElementRef(t29), $[90] = t29, $[91] = t30) : t30 = $[91];
+  let t31, t32;
+  $[92] !== childElement ? (t31 = () => childElement, t32 = [childElement], $[92] = childElement, $[93] = t31, $[94] = t32) : (t31 = $[93], t32 = $[94]), useImperativeHandle(t30, t31, t32);
+  let t33;
+  bb0: {
+    if (!childProp) {
+      t33 = null;
+      break bb0;
+    }
+    let t342;
+    $[95] !== handleBlur || $[96] !== handleFocus || $[97] !== handleMouseEnter || $[98] !== handleMouseLeave || $[99] !== handleClick || $[100] !== handleContextMenu || $[101] !== childProp ? (t342 = cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setChildElement
+    }), $[95] = handleBlur, $[96] = handleFocus, $[97] = handleMouseEnter, $[98] = handleMouseLeave, $[99] = handleClick, $[100] = handleContextMenu, $[101] = childProp, $[102] = t342) : t342 = $[102], t33 = t342;
+  }
+  const child = t33;
+  let t34, t35;
+  if ($[103] !== child ? (t34 = () => {
     if (child)
       return setReferenceElement(childRef.current), () => setReferenceElement(null);
-  }, [child]), !child) return /* @__PURE__ */ jsx(Fragment, {});
-  if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  }, t35 = [child], $[103] = child, $[104] = t34, $[105] = t35) : (t34 = $[104], t35 = $[105]), useEffect(t34, t35), !child) {
+    let t362;
+    return $[106] === Symbol.for("react.memo_cache_sentinel") ? (t362 = /* @__PURE__ */ jsx(Fragment, {}), $[106] = t362) : t362 = $[106], t362;
+  }
+  if (disabled)
+    return child;
+  const t36 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t37;
+  $[107] !== floatingStyles || $[108] !== t36 ? (t37 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, zOffset, children: /* @__PURE__ */ jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }) }), children = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children,
+    maxWidth: t36
+  }, $[107] = floatingStyles, $[108] = t36, $[109] = t37) : t37 = $[109];
+  let t38;
+  $[110] !== restProps || $[111] !== animate || $[112] !== arrowProp || $[113] !== setArrow || $[114] !== arrowX || $[115] !== arrowY || $[116] !== originX || $[117] !== originY || $[118] !== padding || $[119] !== placement || $[120] !== radius || $[121] !== setFloating || $[122] !== scheme || $[123] !== shadow || $[124] !== content ? (t38 = /* @__PURE__ */ jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[110] = restProps, $[111] = animate, $[112] = arrowProp, $[113] = setArrow, $[114] = arrowX, $[115] = arrowY, $[116] = originX, $[117] = originY, $[118] = padding, $[119] = placement, $[120] = radius, $[121] = setFloating, $[122] = scheme, $[123] = shadow, $[124] = content, $[125] = t38) : t38 = $[125];
+  let t39;
+  $[126] !== restProps || $[127] !== setFloating || $[128] !== t37 || $[129] !== zOffset || $[130] !== t38 ? (t39 = /* @__PURE__ */ jsx(Root$a, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t37, zOffset, children: t38 }), $[126] = restProps, $[127] = setFloating, $[128] = t37, $[129] = zOffset, $[130] = t38, $[131] = t39) : t39 = $[131];
+  const tooltip = t39;
+  let t40;
+  $[132] !== showTooltip || $[133] !== portalProp || $[134] !== tooltip ? (t40 = showTooltip && (portalProp ? /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[132] = showTooltip, $[133] = portalProp, $[134] = tooltip, $[135] = t40) : t40 = $[135];
+  const children = t40;
+  let t41;
+  $[136] !== animate || $[137] !== children ? (t41 = animate ? /* @__PURE__ */ jsx(AnimatePresence, { children }) : children, $[136] = animate, $[137] = children, $[138] = t41) : t41 = $[138];
+  let t42;
+  return $[139] !== t41 || $[140] !== child ? (t42 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t41,
     child
-  ] });
+  ] }), $[139] = t41, $[140] = child, $[141] = t42) : t42 = $[141], t42;
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
 function useCloseOnMouseLeave(t0) {
@@ -4939,6 +5082,11 @@ function useCloseOnMouseLeave(t0) {
     return window.addEventListener("mousemove", handleMouseMove), () => window.removeEventListener("mousemove", handleMouseMove);
   }, t3 = [onMouseMove, showTooltip], $[3] = showTooltip, $[4] = onMouseMove, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
 }
+function getElementRef(element) {
+  if (!element) return null;
+  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 Root$9 = styled.div`
   line-height: 0;
 `, ListBox = styled(Box)`