@sanity/ui 3.0.11 → 3.0.12-canary.0

package/dist/_chunks-cjs/_visual-editing.js

@@ -3213,26 +3213,42 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
   displayName: "ItemWrapper",
   componentId: "sc-dlqsj4-1"
 })`position:absolute;left:0;right:0;`, VirtualList = react.forwardRef(function(props, forwardedRef) {
-  const {
-    as = "div",
-    gap = 0,
+  const $ = reactCompilerRuntime.c(44);
+  let getItemKey, onChange, renderItem, restProps, t0, t1, t2;
+  $[0] !== props ? ({
+    as: t0,
+    gap: t1,
     getItemKey,
-    items = [],
+    items: t2,
     onChange,
     renderItem,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = getItemKey, $[2] = onChange, $[3] = renderItem, $[4] = restProps, $[5] = t0, $[6] = t1, $[7] = t2) : (getItemKey = $[1], onChange = $[2], renderItem = $[3], restProps = $[4], t0 = $[5], t1 = $[6], t2 = $[7]);
+  const as = t0 === void 0 ? "div" : t0, gap = t1 === void 0 ? 0 : t1;
+  let t3;
+  $[8] !== t2 ? (t3 = t2 === void 0 ? [] : t2, $[8] = t2, $[9] = t3) : t3 = $[9];
+  const items = t3, {
     space
   } = useTheme_v2(), ref = react.useRef(null), wrapperRef = react.useRef(null), [scrollTop, setScrollTop] = react.useState(0), [scrollHeight, setScrollHeight] = react.useState(0), [itemHeight, setItemHeight] = react.useState(-1);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
-    if (!wrapperRef.current) return;
+  let t4;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => ref.current, $[10] = t4) : t4 = $[10], react.useImperativeHandle(forwardedRef, t4);
+  let t5;
+  $[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+    if (!wrapperRef.current)
+      return;
     const firstElement = wrapperRef.current.firstChild;
     firstElement instanceof HTMLElement && setItemHeight(firstElement.offsetHeight);
-  }, [renderItem]), react.useEffect(() => {
-    if (!ref.current) return;
+  }, $[11] = t5) : t5 = $[11];
+  let t6;
+  $[12] !== renderItem ? (t6 = [renderItem], $[12] = renderItem, $[13] = t6) : t6 = $[13], react.useEffect(t5, t6);
+  let t7, t8;
+  $[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => {
+    if (!ref.current)
+      return;
     const scrollEl = findScrollable(ref.current.parentNode);
     if (scrollEl) {
-      if (!(scrollEl instanceof HTMLElement)) return;
+      if (!(scrollEl instanceof HTMLElement))
+        return;
       const handleScroll = () => {
         setScrollTop(scrollEl.scrollTop);
       };
@@ -3256,9 +3272,10 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
     }), window.addEventListener("resize", handleResize), setScrollHeight(window.innerHeight), handleScroll_0(), () => {
       window.removeEventListener("scroll", handleScroll_0), window.removeEventListener("resize", handleResize);
     };
-  }, []);
+  }, t8 = [], $[14] = t7, $[15] = t8) : (t7 = $[14], t8 = $[15]), react.useEffect(t7, t8);
   const len = items.length, height = itemHeight ? len * (itemHeight + space[gap]) - space[gap] : 0, fromIndex = height ? Math.max(Math.floor(scrollTop / height * len) - 2, 0) : 0, toIndex = height ? Math.ceil((scrollTop + scrollHeight) / height * len) + 1 : 0;
-  react.useEffect(() => {
+  let t10, t9;
+  $[16] !== fromIndex || $[17] !== gap || $[18] !== itemHeight || $[19] !== onChange || $[20] !== scrollHeight || $[21] !== scrollTop || $[22] !== space || $[23] !== toIndex ? (t9 = () => {
     onChange && onChange({
       fromIndex,
       gap: space[gap],
@@ -3267,18 +3284,61 @@ const StyledVirtualList = styledComponents.styled.div.withConfig({
       scrollTop,
       toIndex
     });
-  }, [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex]);
-  const children = react.useMemo(() => !renderItem || items.length === 0 ? null : itemHeight === -1 ? [/* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { children: renderItem(items[0]) }, 0)] : items.slice(fromIndex, toIndex).map((item, _itemIndex) => {
-    const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
-    return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: {
-      top: itemIndex * (itemHeight + space[gap])
-    }, children: node }, key2);
-  }), [fromIndex, gap, getItemKey, itemHeight, items, renderItem, space, toIndex]), wrapperStyle = react.useMemo(() => ({
+  }, t10 = [fromIndex, gap, itemHeight, onChange, scrollHeight, scrollTop, space, toIndex], $[16] = fromIndex, $[17] = gap, $[18] = itemHeight, $[19] = onChange, $[20] = scrollHeight, $[21] = scrollTop, $[22] = space, $[23] = toIndex, $[24] = t10, $[25] = t9) : (t10 = $[24], t9 = $[25]), react.useEffect(t9, t10);
+  let t11;
+  $[26] !== fromIndex || $[27] !== gap || $[28] !== getItemKey || $[29] !== itemHeight || $[30] !== items || $[31] !== renderItem || $[32] !== space || $[33] !== toIndex ? (t11 = {
+    fromIndex,
+    gap,
+    itemHeight,
+    space,
+    toIndex,
+    getItemKey,
+    items,
+    renderItem
+  }, $[26] = fromIndex, $[27] = gap, $[28] = getItemKey, $[29] = itemHeight, $[30] = items, $[31] = renderItem, $[32] = space, $[33] = toIndex, $[34] = t11) : t11 = $[34];
+  const children = useChildren(t11);
+  let t12;
+  $[35] !== height ? (t12 = {
     height
-  }), [height]);
-  return /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: wrapperStyle, children }) });
+  }, $[35] = height, $[36] = t12) : t12 = $[36];
+  let t13;
+  $[37] !== children || $[38] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, style: t12, children }), $[37] = children, $[38] = t12, $[39] = t13) : t13 = $[39];
+  let t14;
+  return $[40] !== as || $[41] !== restProps || $[42] !== t13 ? (t14 = /* @__PURE__ */ jsxRuntime.jsx(StyledVirtualList, { as, "data-ui": "VirtualList", ...restProps, ref, children: t13 }), $[40] = as, $[41] = restProps, $[42] = t13, $[43] = t14) : t14 = $[43], t14;
 });
 VirtualList.displayName = "ForwardRef(VirtualList)";
+function useChildren(t0) {
+  const $ = reactCompilerRuntime.c(21), {
+    fromIndex,
+    gap,
+    getItemKey,
+    itemHeight,
+    items,
+    renderItem,
+    space,
+    toIndex
+  } = t0;
+  if (!renderItem || items.length === 0)
+    return null;
+  if (itemHeight === -1) {
+    let t12;
+    $[0] !== items[0] || $[1] !== renderItem ? (t12 = renderItem(items[0]), $[0] = items[0], $[1] = renderItem, $[2] = t12) : t12 = $[2];
+    let t2;
+    return $[3] !== t12 ? (t2 = [/* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { children: t12 }, 0)], $[3] = t12, $[4] = t2) : t2 = $[4], t2;
+  }
+  let t1;
+  if ($[5] !== fromIndex || $[6] !== gap || $[7] !== getItemKey || $[8] !== itemHeight || $[9] !== items || $[10] !== renderItem || $[11] !== space || $[12] !== toIndex) {
+    let t2;
+    $[14] !== fromIndex || $[15] !== gap || $[16] !== getItemKey || $[17] !== itemHeight || $[18] !== renderItem || $[19] !== space ? (t2 = (item, _itemIndex) => {
+      const itemIndex = fromIndex + _itemIndex, node = renderItem(item), key2 = getItemKey ? getItemKey(item, itemIndex) : itemIndex;
+      return /* @__PURE__ */ jsxRuntime.jsx(ItemWrapper, { style: {
+        top: itemIndex * (itemHeight + space[gap])
+      }, children: node }, key2);
+    }, $[14] = fromIndex, $[15] = gap, $[16] = getItemKey, $[17] = itemHeight, $[18] = renderItem, $[19] = space, $[20] = t2) : t2 = $[20], t1 = items.slice(fromIndex, toIndex).map(t2), $[5] = fromIndex, $[6] = gap, $[7] = getItemKey, $[8] = itemHeight, $[9] = items, $[10] = renderItem, $[11] = space, $[12] = toIndex, $[13] = t1;
+  } else
+    t1 = $[13];
+  return t1;
+}
 function findScrollable(parentNode) {
   let _scrollEl = parentNode;
   for (; _scrollEl && !_isScrollable(_scrollEl); )
@@ -3305,9 +3365,14 @@ const DEFAULT_POPOVER_DISTANCE = 4, DEFAULT_POPOVER_PADDING = 4, DEFAULT_POPOVER
 };
 function size(options) {
   const {
-    apply,
+    constrainSize,
     margins,
-    padding = 0
+    matchReferenceWidth,
+    maxWidthRef,
+    padding = 0,
+    referenceWidthRef,
+    setReferenceWidth,
+    widthRef
   } = options;
   return {
     name: "@sanity/ui/size",
@@ -3329,12 +3394,9 @@ function size(options) {
       });
       let maxWidth = 1 / 0, maxHeight = 1 / 0;
       const floatingW = floating.width, floatingH = floating.height;
-      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom)), apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3]
-      });
+      placement.includes("top") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.top), placement.includes("right") && (maxWidth = floatingW - overflow.right, maxHeight = floatingH - (overflow.top + overflow.bottom)), placement.includes("bottom") && (maxWidth = floatingW - (overflow.left + overflow.right), maxHeight = floatingH - overflow.bottom), placement.includes("left") && (maxWidth = floatingW - overflow.left, maxHeight = floatingH - (overflow.top + overflow.bottom));
+      const availableWidth = maxWidth - margins[1] - margins[3], availableHeight = maxHeight - margins[0] - margins[2], referenceWidth = reference.width - margins[1] - margins[3];
+      referenceWidthRef.current = referenceWidth, setReferenceWidth(referenceWidth), matchReferenceWidth ? elements.floating.style.width = `${referenceWidth}px` : widthRef.current !== void 0 && (elements.floating.style.width = `${widthRef.current}px`), constrainSize && (elements.floating.style.maxWidth = `${Math.min(availableWidth, maxWidthRef.current ?? 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
       const nextDimensions = await platform.getDimensions(elements.floating), targetH = nextDimensions.height, targetW = nextDimensions.width;
       return floatingW !== targetW || floatingH !== targetH ? {
         reset: {
@@ -3449,103 +3511,115 @@ const ViewportOverlay = () => {
     zIndex
   } }), $[0] = zIndex, $[1] = t0) : t0 = $[1], t0;
 }, Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.c(122), {
     container,
     layer
-  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext.element,
-    children: childProp,
-    constrainSize = !1,
-    content,
-    disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
-    matchReferenceWidth,
-    floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
-    modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onActivate,
-    open,
-    overflow = "hidden",
-    padding: paddingProp,
-    placement: placementProp = "bottom",
-    placementStrategy = "flip",
-    portal,
-    preventOverflow = !0,
-    radius: radiusProp = 3,
-    referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
-    referenceElement,
-    scheme,
-    shadow: shadowProp = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: zOffsetProp = layer.popover.zOffset,
-    updateRef,
-    ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
+  let _boundaryElement, _fallbackPlacements, _floatingBoundary, _referenceBoundary, _zOffsetProp, childProp, content, disabled, matchReferenceWidth, modal, open, paddingProp, portal, referenceElement, restProps, scheme, t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9, updateRef;
+  if ($[0] !== props) {
+    const {
+      __unstable_margins: t122,
+      animate: t132,
+      arrow: t142,
+      boundaryElement: t152,
+      children: t162,
+      constrainSize: t172,
+      content: t182,
+      disabled: t192,
+      fallbackPlacements: t202,
+      matchReferenceWidth: t212,
+      floatingBoundary: t222,
+      modal: t232,
+      onActivate,
+      open: t242,
+      overflow: t252,
+      padding: t262,
+      placement: t272,
+      placementStrategy: t282,
+      portal: t292,
+      preventOverflow: t302,
+      radius: t312,
+      referenceBoundary: t322,
+      referenceElement: t332,
+      scheme: t342,
+      shadow: t352,
+      tone: t362,
+      width: t372,
+      zOffset: t38,
+      updateRef: t39,
+      ...t40
+    } = props;
+    t0 = t122, t1 = t132, t2 = t142, _boundaryElement = t152, childProp = t162, t3 = t172, content = t182, disabled = t192, _fallbackPlacements = t202, matchReferenceWidth = t212, _floatingBoundary = t222, modal = t232, open = t242, t4 = t252, paddingProp = t262, t5 = t272, t6 = t282, portal = t292, t7 = t302, t8 = t312, _referenceBoundary = t322, referenceElement = t332, scheme = t342, t9 = t352, t10 = t362, t11 = t372, _zOffsetProp = t38, updateRef = t39, restProps = t40, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacements, $[3] = _floatingBoundary, $[4] = _referenceBoundary, $[5] = _zOffsetProp, $[6] = childProp, $[7] = content, $[8] = disabled, $[9] = matchReferenceWidth, $[10] = modal, $[11] = open, $[12] = paddingProp, $[13] = portal, $[14] = referenceElement, $[15] = restProps, $[16] = scheme, $[17] = t0, $[18] = t1, $[19] = t10, $[20] = t11, $[21] = t2, $[22] = t3, $[23] = t4, $[24] = t5, $[25] = t6, $[26] = t7, $[27] = t8, $[28] = t9, $[29] = updateRef;
+  } else
+    _boundaryElement = $[1], _fallbackPlacements = $[2], _floatingBoundary = $[3], _referenceBoundary = $[4], _zOffsetProp = $[5], childProp = $[6], content = $[7], disabled = $[8], matchReferenceWidth = $[9], modal = $[10], open = $[11], paddingProp = $[12], portal = $[13], referenceElement = $[14], restProps = $[15], scheme = $[16], t0 = $[17], t1 = $[18], t10 = $[19], t11 = $[20], t2 = $[21], t3 = $[22], t4 = $[23], t5 = $[24], t6 = $[25], t7 = $[26], t8 = $[27], t9 = $[28], updateRef = $[29];
+  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, placementStrategy = t6 === void 0 ? "flip" : t6, preventOverflow = t7 === void 0 ? !0 : t7, radiusProp = t8 === void 0 ? 3 : t8, shadowProp = t9 === void 0 ? 3 : t9, tone = t10 === void 0 ? "inherit" : t10, widthProp = t11 === void 0 ? "auto" : t11, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? props.boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? props.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 = react.useRef(null), arrowRef = react.useRef(null);
+  let t12;
+  $[30] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ref.current, $[30] = t12) : t12 = $[30], react.useImperativeHandle(forwardedRef, t12);
+  const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0;
+  let t13;
+  $[31] !== container || $[32] !== mediaIndex || $[33] !== widthArrayProp ? (t13 = calcCurrentWidth({
     container,
     mediaIndex,
     width: widthArrayProp
-  }), widthRef = react.useRef(width);
-  react.useEffect(() => {
+  }), $[31] = container, $[32] = mediaIndex, $[33] = widthArrayProp, $[34] = t13) : t13 = $[34];
+  const width = t13, widthRef = react.useRef(width);
+  let t14, t15;
+  $[35] !== width ? (t14 = () => {
     widthRef.current = width;
-  }, [width]);
-  const maxWidth = calcMaxWidth({
+  }, t15 = [width], $[35] = width, $[36] = t14, $[37] = t15) : (t14 = $[36], t15 = $[37]), react.useEffect(t14, t15);
+  let t16;
+  $[38] !== boundaryWidth || $[39] !== width ? (t16 = calcMaxWidth({
     boundaryWidth,
     currentWidth: width
-  }), maxWidthRef = react.useRef(maxWidth);
-  react.useEffect(() => {
+  }), $[38] = boundaryWidth, $[39] = width, $[40] = t16) : t16 = $[40];
+  const maxWidth = t16, maxWidthRef = react.useRef(maxWidth);
+  let t17, t18;
+  $[41] !== maxWidth ? (t17 = () => {
     maxWidthRef.current = maxWidth;
-  }, [maxWidth]);
+  }, t18 = [maxWidth], $[41] = maxWidth, $[42] = t17, $[43] = t18) : (t17 = $[42], t18 = $[43]), react.useEffect(t17, t18);
   const referenceWidthRef = react.useRef(void 0);
-  react.useEffect(() => {
+  let t19, t20;
+  $[44] !== matchReferenceWidth || $[45] !== maxWidth || $[46] !== open || $[47] !== width ? (t19 = () => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement) return;
+    if (!open || !floatingElement)
+      return;
     const referenceWidth = referenceWidthRef.current;
     matchReferenceWidth ? referenceWidth !== 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 = react.useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && (placementStrategy === "autoPlacement" ? ret.push(reactDom$1.autoPlacement({
-      allowedPlacements: [placementProp].concat(fallbackPlacements)
-    })) : ret.push(reactDom$1.flip({
-      boundary: floatingBoundary || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_POPOVER_PADDING,
-      rootBoundary
-    }))), ret.push(reactDom$1.offset({
-      mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
-        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,
-      margins,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(reactDom$1.shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(reactDom$1.hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, placementProp, placementStrategy, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+  }, t20 = [width, matchReferenceWidth, maxWidth, open], $[44] = matchReferenceWidth, $[45] = maxWidth, $[46] = open, $[47] = width, $[48] = t19, $[49] = t20) : (t19 = $[48], t20 = $[49]), react.useEffect(t19, t20);
+  const [referenceWidth_0, setReferenceWidth] = react.useState(void 0);
+  let t21;
+  $[50] !== animate || $[51] !== arrowProp || $[52] !== constrainSize || $[53] !== fallbackPlacements || $[54] !== floatingBoundary || $[55] !== margins || $[56] !== matchReferenceWidth || $[57] !== placementProp || $[58] !== placementStrategy || $[59] !== preventOverflow || $[60] !== referenceBoundary ? (t21 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary: "viewport",
+    setReferenceWidth,
+    widthRef
+  }, $[50] = animate, $[51] = arrowProp, $[52] = constrainSize, $[53] = fallbackPlacements, $[54] = floatingBoundary, $[55] = margins, $[56] = matchReferenceWidth, $[57] = placementProp, $[58] = placementStrategy, $[59] = preventOverflow, $[60] = referenceBoundary, $[61] = t21) : t21 = $[61];
+  const middleware = useMiddleware$1(t21);
+  let t22;
+  $[62] !== referenceElement ? (t22 = referenceElement ? {
+    reference: referenceElement
+  } : void 0, $[62] = referenceElement, $[63] = t22) : t22 = $[63];
+  let t23;
+  $[64] !== middleware || $[65] !== placementProp || $[66] !== t22 ? (t23 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate,
+    elements: t22
+  }, $[64] = middleware, $[65] = placementProp, $[66] = t22, $[67] = t23) : t23 = $[67];
+  const {
     x,
     y,
     middlewareData,
@@ -3553,38 +3627,149 @@ const ViewportOverlay = () => {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: referenceElement ? {
-      reference: referenceElement
-    } : void 0
-  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setArrow = react.useCallback((arrowEl) => {
+  } = reactDom$1.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;
+  $[68] === Symbol.for("react.memo_cache_sentinel") ? (t24 = (arrowEl) => {
     arrowRef.current = arrowEl;
-  }, []), setFloating = react.useCallback((node) => {
+  }, $[68] = t24) : t24 = $[68];
+  const setArrow = t24;
+  let t25;
+  $[69] !== refs ? (t25 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = react.useCallback((node_0) => {
-    refs.setReference(node_0);
-    const childRef = getElementRef(childProp);
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = react.useMemo(() => referenceElement ? childProp : childProp ? react.cloneElement(childProp, {
-    ref: setReference
-  }) : null, [childProp, referenceElement, setReference]);
-  if (react.useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), disabled)
-    return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const popover = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
-    modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}),
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, 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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+  }, $[69] = refs, $[70] = t25) : t25 = $[70];
+  const setFloating = t25;
+  let t26;
+  $[71] !== childProp ? (t26 = childProp ? getElementRef(childProp) : null, $[71] = childProp, $[72] = t26) : t26 = $[72];
+  let t27;
+  $[73] !== refs.reference.current ? (t27 = () => refs.reference.current, $[73] = refs.reference.current, $[74] = t27) : t27 = $[74], react.useImperativeHandle(t26, t27);
+  let t28;
+  bb0: {
+    if (referenceElement) {
+      t28 = childProp;
+      break bb0;
+    }
+    if (!childProp) {
+      t28 = null;
+      break bb0;
+    }
+    let t292;
+    $[75] !== childProp || $[76] !== refs.setReference ? (t292 = react.cloneElement(childProp, {
+      ref: refs.setReference
+    }), $[75] = childProp, $[76] = refs.setReference, $[77] = t292) : t292 = $[77], t28 = t292;
+  }
+  const child = t28;
+  let t29, t30;
+  if ($[78] !== update ? (t29 = () => update, t30 = [update], $[78] = update, $[79] = t29, $[80] = t30) : (t29 = $[79], t30 = $[80]), react.useImperativeHandle(updateRef, t29, t30), disabled) {
+    let t312;
+    return $[81] !== childProp ? (t312 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[81] = childProp, $[82] = t312) : t312 = $[82], t312;
+  }
+  let t31;
+  $[83] !== modal ? (t31 = modal && /* @__PURE__ */ jsxRuntime.jsx(ViewportOverlay, {}), $[83] = modal, $[84] = t31) : t31 = $[84];
+  const t32 = matchReferenceWidth ? referenceWidth_0 : width;
+  let t33;
+  $[85] !== animate || $[86] !== arrowProp || $[87] !== arrowX || $[88] !== arrowY || $[89] !== content || $[90] !== margins || $[91] !== originX || $[92] !== originY || $[93] !== overflow || $[94] !== padding || $[95] !== placement || $[96] !== radius || $[97] !== referenceHidden || $[98] !== restProps || $[99] !== scheme || $[100] !== setFloating || $[101] !== shadow || $[102] !== strategy || $[103] !== t32 || $[104] !== tone || $[105] !== x || $[106] !== y ? (t33 = /* @__PURE__ */ jsxRuntime.jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, hidden: referenceHidden, overflow, padding, placement, radius, ref: setFloating, scheme, shadow, originX, originY, strategy, tone, width: t32, x, y, children: content }), $[85] = animate, $[86] = arrowProp, $[87] = arrowX, $[88] = arrowY, $[89] = content, $[90] = margins, $[91] = originX, $[92] = originY, $[93] = overflow, $[94] = padding, $[95] = placement, $[96] = radius, $[97] = referenceHidden, $[98] = restProps, $[99] = scheme, $[100] = setFloating, $[101] = shadow, $[102] = strategy, $[103] = t32, $[104] = tone, $[105] = x, $[106] = y, $[107] = t33) : t33 = $[107];
+  let t34;
+  $[108] !== t31 || $[109] !== t33 || $[110] !== zOffset ? (t34 = /* @__PURE__ */ jsxRuntime.jsxs(LayerProvider, { zOffset, children: [
+    t31,
+    t33
+  ] }), $[108] = t31, $[109] = t33, $[110] = zOffset, $[111] = t34) : t34 = $[111];
+  const popover = t34;
+  let t35;
+  $[112] !== open || $[113] !== popover || $[114] !== portal ? (t35 = open && (portal ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: popover }) : popover), $[112] = open, $[113] = popover, $[114] = portal, $[115] = t35) : t35 = $[115];
+  const children = t35;
+  let t36;
+  $[116] !== animate || $[117] !== children ? (t36 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[116] = animate, $[117] = children, $[118] = t36) : t36 = $[118];
+  let t37;
+  return $[119] !== child || $[120] !== t36 ? (t37 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t36,
     child
-  ] });
+  ] }), $[119] = child, $[120] = t36, $[121] = t37) : t37 = $[121], t37;
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
+function useMiddleware$1(t0) {
+  const $ = reactCompilerRuntime.c(42), {
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    maxWidthRef,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+    setReferenceWidth,
+    widthRef
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== constrainSize || $[4] !== fallbackPlacements || $[5] !== floatingBoundary || $[6] !== margins || $[7] !== matchReferenceWidth || $[8] !== maxWidthRef || $[9] !== placementProp || $[10] !== placementStrategy || $[11] !== preventOverflow || $[12] !== referenceBoundary || $[13] !== referenceWidthRef || $[14] !== rootBoundary || $[15] !== setReferenceWidth || $[16] !== widthRef) {
+    if (ret = [], constrainSize || preventOverflow)
+      if (placementStrategy === "autoPlacement") {
+        let t12;
+        $[18] !== fallbackPlacements || $[19] !== placementProp ? (t12 = reactDom$1.autoPlacement({
+          allowedPlacements: [placementProp].concat(fallbackPlacements)
+        }), $[18] = fallbackPlacements, $[19] = placementProp, $[20] = t12) : t12 = $[20], ret.push(t12);
+      } else {
+        const t12 = floatingBoundary || void 0;
+        let t22;
+        $[21] !== fallbackPlacements || $[22] !== rootBoundary || $[23] !== t12 ? (t22 = reactDom$1.flip({
+          boundary: t12,
+          fallbackPlacements,
+          padding: DEFAULT_POPOVER_PADDING,
+          rootBoundary
+        }), $[21] = fallbackPlacements, $[22] = rootBoundary, $[23] = t12, $[24] = t22) : t22 = $[24], ret.push(t22);
+      }
+    let t1;
+    if ($[25] === Symbol.for("react.memo_cache_sentinel") ? (t1 = reactDom$1.offset({
+      mainAxis: DEFAULT_POPOVER_DISTANCE
+    }), $[25] = t1) : t1 = $[25], ret.push(t1), constrainSize || matchReferenceWidth) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[26] !== constrainSize || $[27] !== margins || $[28] !== matchReferenceWidth || $[29] !== maxWidthRef || $[30] !== referenceWidthRef || $[31] !== setReferenceWidth || $[32] !== t22 || $[33] !== widthRef ? (t32 = size({
+        boundaryElement: t22,
+        constrainSize,
+        margins,
+        matchReferenceWidth,
+        maxWidthRef,
+        padding: DEFAULT_POPOVER_PADDING,
+        referenceWidthRef,
+        setReferenceWidth,
+        widthRef
+      }), $[26] = constrainSize, $[27] = margins, $[28] = matchReferenceWidth, $[29] = maxWidthRef, $[30] = referenceWidthRef, $[31] = setReferenceWidth, $[32] = t22, $[33] = widthRef, $[34] = t32) : t32 = $[34], ret.push(t32);
+    }
+    if (preventOverflow) {
+      const t22 = floatingBoundary || void 0;
+      let t32;
+      $[35] !== rootBoundary || $[36] !== t22 ? (t32 = reactDom$1.shift({
+        boundary: t22,
+        rootBoundary,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[35] = rootBoundary, $[36] = t22, $[37] = t32) : t32 = $[37], ret.push(t32);
+    }
+    if (arrowProp) {
+      let t22;
+      $[38] !== arrowRef ? (t22 = reactDom$1.arrow({
+        element: arrowRef,
+        padding: DEFAULT_POPOVER_PADDING
+      }), $[38] = arrowRef, $[39] = t22) : t22 = $[39], ret.push(t22);
+    }
+    animate && ret.push(origin);
+    const t2 = referenceBoundary || void 0;
+    let t3;
+    $[40] !== t2 ? (t3 = reactDom$1.hide({
+      boundary: t2,
+      padding: DEFAULT_POPOVER_PADDING,
+      strategy: "referenceHidden"
+    }), $[40] = t2, $[41] = t3) : t3 = $[41], ret.push(t3), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = constrainSize, $[4] = fallbackPlacements, $[5] = floatingBoundary, $[6] = margins, $[7] = matchReferenceWidth, $[8] = maxWidthRef, $[9] = placementProp, $[10] = placementStrategy, $[11] = preventOverflow, $[12] = referenceBoundary, $[13] = referenceWidthRef, $[14] = rootBoundary, $[15] = setReferenceWidth, $[16] = widthRef, $[17] = ret;
+  } else
+    ret = $[17];
+  return ret;
+}
 function radioBaseStyle() {
   return styledComponents.css`
     position: relative;
@@ -4438,61 +4623,68 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
   displayName: "StyledTooltip",
   componentId: "sc-13f2zvh-0"
 })`pointer-events:none;`, Tooltip = react.forwardRef(function(props, forwardedRef) {
-  const boundaryElementContext = useBoundaryElement(), {
+  const $ = reactCompilerRuntime.c(135), boundaryElementContext = useBoundaryElement(), {
     layer
-  } = useTheme_v2(), {
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext?.element,
+  } = useTheme_v2();
+  let _boundaryElement, _fallbackPlacementsProp, _zOffset, childProp, content, delay, disabled, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5;
+  $[0] !== props ? ({
+    animate: t0,
+    arrow: t1,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
-    padding = 2,
-    placement: placementProp = "bottom",
+    fallbackPlacements: _fallbackPlacementsProp,
+    padding: t2,
+    placement: t3,
     portal: portalProp,
-    radius = 2,
+    radius: t4,
     scheme,
-    shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    shadow: t5,
+    zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
-    const ret = [];
-    return ret.push(reactDom$1.flip({
-      boundary: boundaryElement || void 0,
-      fallbackPlacements,
-      padding: DEFAULT_TOOLTIP_PADDING,
-      rootBoundary
-    })), ret.push(reactDom$1.offset({
-      mainAxis: DEFAULT_TOOLTIP_DISTANCE
-    })), ret.push(reactDom$1.shift({
-      boundary: boundaryElement || void 0,
-      rootBoundary,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
-      padding: DEFAULT_TOOLTIP_PADDING
-    })), animate && ret.push(origin), ret;
-  }, [animate, arrowProp, boundaryElement, fallbackPlacements]), {
+  } = props, $[0] = props, $[1] = _boundaryElement, $[2] = _fallbackPlacementsProp, $[3] = _zOffset, $[4] = childProp, $[5] = content, $[6] = delay, $[7] = disabled, $[8] = portalProp, $[9] = restProps, $[10] = scheme, $[11] = t0, $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t4, $[16] = t5) : (_boundaryElement = $[1], _fallbackPlacementsProp = $[2], _zOffset = $[3], childProp = $[4], content = $[5], delay = $[6], disabled = $[7], portalProp = $[8], restProps = $[9], scheme = $[10], t0 = $[11], t1 = $[12], t2 = $[13], t3 = $[14], t4 = $[15], t5 = $[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 = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  let t6;
+  $[17] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[17] = t6) : t6 = $[17], react.useImperativeHandle(forwardedRef, t6);
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element;
+  let t7;
+  $[18] !== animate || $[19] !== arrowProp || $[20] !== boundaryElement || $[21] !== fallbackPlacements ? (t7 = {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary: "viewport"
+  }, $[18] = animate, $[19] = arrowProp, $[20] = boundaryElement, $[21] = fallbackPlacements, $[22] = t7) : t7 = $[22];
+  const middleware = useMiddleware(t7);
+  let t8;
+  $[23] !== referenceElement ? (t8 = {
+    reference: referenceElement
+  }, $[23] = referenceElement, $[24] = t8) : t8 = $[24];
+  let t9;
+  $[25] !== middleware || $[26] !== placementProp || $[27] !== t8 ? (t9 = {
+    middleware,
+    placement: placementProp,
+    whileElementsMounted: reactDom$1.autoUpdate,
+    elements: t8
+  }, $[25] = middleware, $[26] = placementProp, $[27] = t8, $[28] = t9) : t9 = $[28];
+  const {
     floatingStyles,
     placement,
     middlewareData,
     refs,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.autoUpdate,
-    elements: {
-      reference: referenceElement
-    }
-  }), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), {
+  } = reactDom$1.useFloating(t9), arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, tooltipId = react.useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup();
+  let t10;
+  $[29] !== delayGroupContext ? (t10 = delayGroupContext || {}, $[29] = delayGroupContext, $[30] = t10) : t10 = $[30];
+  const {
     setIsGroupActive,
     setOpenTooltipId
-  } = delayGroupContext || {}, showTooltip = isOpen || delayGroupContext?.openTooltipId === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : delay?.open || 0, closeDelayProp = typeof delay == "number" ? delay : delay?.close || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = react.useCallback((open, immediate) => {
+  } = t10, 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 t11;
+  $[31] !== closeDelay || $[32] !== isInsideGroup || $[33] !== openDelay || $[34] !== setIsGroupActive || $[35] !== setIsOpen || $[36] !== setOpenTooltipId || $[37] !== tooltipId ? (t11 = (open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4503,65 +4695,173 @@ const StyledTooltip = styledComponents.styled(Layer).withConfig({
       }
     else
       setIsOpen(open, immediate ? 0 : open ? openDelay : closeDelay);
-  }, [isInsideGroup, openDelay, setIsGroupActive, setOpenTooltipId, tooltipId, closeDelay, setIsOpen]), handleBlur = react.useCallback((e) => {
+  }, $[31] = closeDelay, $[32] = isInsideGroup, $[33] = openDelay, $[34] = setIsGroupActive, $[35] = setIsOpen, $[36] = setOpenTooltipId, $[37] = tooltipId, $[38] = t11) : t11 = $[38];
+  const handleIsOpenChange = t11;
+  let t12;
+  $[39] !== childProp?.props || $[40] !== handleIsOpenChange ? (t12 = (e) => {
     handleIsOpenChange(!1), childProp?.props?.onBlur?.(e);
-  }, [childProp?.props, handleIsOpenChange]), handleClick = react.useCallback((e_0) => {
+  }, $[39] = childProp?.props, $[40] = handleIsOpenChange, $[41] = t12) : t12 = $[41];
+  const handleBlur = t12;
+  let t13;
+  $[42] !== childProp?.props || $[43] !== handleIsOpenChange ? (t13 = (e_0) => {
     handleIsOpenChange(!1, !0), childProp?.props.onClick?.(e_0);
-  }, [childProp?.props, handleIsOpenChange]), handleContextMenu = react.useCallback((e_1) => {
+  }, $[42] = childProp?.props, $[43] = handleIsOpenChange, $[44] = t13) : t13 = $[44];
+  const handleClick = t13;
+  let t14;
+  $[45] !== childProp?.props || $[46] !== handleIsOpenChange ? (t14 = (e_1) => {
     handleIsOpenChange(!1, !0), childProp?.props.onContextMenu?.(e_1);
-  }, [childProp?.props, handleIsOpenChange]), handleFocus = react.useCallback((e_2) => {
+  }, $[45] = childProp?.props, $[46] = handleIsOpenChange, $[47] = t14) : t14 = $[47];
+  const handleContextMenu = t14;
+  let t15;
+  $[48] !== childProp?.props || $[49] !== handleIsOpenChange ? (t15 = (e_2) => {
     handleIsOpenChange(!0), childProp?.props?.onFocus?.(e_2);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseEnter = react.useCallback((e_3) => {
+  }, $[48] = childProp?.props, $[49] = handleIsOpenChange, $[50] = t15) : t15 = $[50];
+  const handleFocus = t15;
+  let t16;
+  $[51] !== childProp?.props || $[52] !== handleIsOpenChange ? (t16 = (e_3) => {
     handleIsOpenChange(!0), childProp?.props?.onMouseEnter?.(e_3);
-  }, [childProp?.props, handleIsOpenChange]), handleMouseLeave = react.useCallback((e_4) => {
+  }, $[51] = childProp?.props, $[52] = handleIsOpenChange, $[53] = t16) : t16 = $[53];
+  const handleMouseEnter = t16;
+  let t17;
+  $[54] !== childProp?.props || $[55] !== handleIsOpenChange ? (t17 = (e_4) => {
     handleIsOpenChange(!1), childProp?.props?.onMouseLeave?.(e_4);
-  }, [childProp?.props, handleIsOpenChange]);
-  useCloseOnMouseLeave({
+  }, $[54] = childProp?.props, $[55] = handleIsOpenChange, $[56] = t17) : t17 = $[56];
+  const handleMouseLeave = t17;
+  let t18;
+  $[57] !== handleIsOpenChange || $[58] !== isInsideGroup || $[59] !== referenceElement || $[60] !== showTooltip ? (t18 = {
     handleIsOpenChange,
     referenceElement,
     showTooltip,
     isInsideGroup
-  }), react.useEffect(() => {
+  }, $[57] = handleIsOpenChange, $[58] = isInsideGroup, $[59] = referenceElement, $[60] = showTooltip, $[61] = t18) : t18 = $[61], useCloseOnMouseLeave(t18);
+  let t19, t20;
+  $[62] !== disabled || $[63] !== handleIsOpenChange || $[64] !== showTooltip ? (t19 = () => {
     disabled && showTooltip && handleIsOpenChange(!1);
-  }, [disabled, handleIsOpenChange, showTooltip]), react.useEffect(() => {
+  }, t20 = [disabled, handleIsOpenChange, showTooltip], $[62] = disabled, $[63] = handleIsOpenChange, $[64] = showTooltip, $[65] = t19, $[66] = t20) : (t19 = $[65], t20 = $[66]), react.useEffect(t19, t20);
+  let t21, t22;
+  $[67] !== content || $[68] !== handleIsOpenChange || $[69] !== showTooltip ? (t21 = () => {
     !content && showTooltip && handleIsOpenChange(!1);
-  }, [content, handleIsOpenChange, showTooltip]), react.useEffect(() => {
-    if (!showTooltip) return;
-    function handleWindowKeyDown(event) {
+  }, t22 = [content, handleIsOpenChange, showTooltip], $[67] = content, $[68] = handleIsOpenChange, $[69] = showTooltip, $[70] = t21, $[71] = t22) : (t21 = $[70], t22 = $[71]), react.useEffect(t21, t22);
+  let t23, t24;
+  $[72] !== handleIsOpenChange || $[73] !== showTooltip ? (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]), react.useLayoutEffect(() => {
+  }, t24 = [handleIsOpenChange, showTooltip], $[72] = handleIsOpenChange, $[73] = showTooltip, $[74] = t23, $[75] = t24) : (t23 = $[74], t24 = $[75]), react.useEffect(t23, t24);
+  let t25;
+  $[76] !== boundaryElement || $[77] !== portalElement?.offsetWidth ? (t25 = () => {
     const availableWidths = [...boundaryElement ? [boundaryElement.offsetWidth] : [], portalElement?.offsetWidth || document.body.offsetWidth];
     setTooltipMaxWidth(Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2);
-  }, [boundaryElement, portalElement]);
-  const setArrow = react.useCallback((arrowEl) => {
+  }, $[76] = boundaryElement, $[77] = portalElement?.offsetWidth, $[78] = t25) : t25 = $[78];
+  let t26;
+  $[79] !== boundaryElement || $[80] !== portalElement ? (t26 = [boundaryElement, portalElement], $[79] = boundaryElement, $[80] = portalElement, $[81] = t26) : t26 = $[81], react.useLayoutEffect(t25, t26);
+  let t27;
+  $[82] !== update ? (t27 = (arrowEl) => {
     arrowRef.current = arrowEl, update();
-  }, [update]), setFloating = react.useCallback((node) => {
+  }, $[82] = update, $[83] = t27) : t27 = $[83];
+  const setArrow = t27;
+  let t28;
+  $[84] !== refs ? (t28 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), child = react.useMemo(() => childProp ? react.cloneElement(childProp, {
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onClick: handleClick,
-    onContextMenu: handleContextMenu,
-    ref: setReferenceElement
-  }) : null, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave]);
-  if (react.useImperativeHandle(childProp ? getElementRef(childProp) : null, () => referenceElement, [referenceElement]), !child) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  if (disabled) return child;
-  const tooltip = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: {
+  }, $[84] = refs, $[85] = t28) : t28 = $[85];
+  const setFloating = t28;
+  let t29;
+  bb0: {
+    if (!childProp) {
+      t29 = null;
+      break bb0;
+    }
+    let t302;
+    $[86] !== childProp || $[87] !== handleBlur || $[88] !== handleClick || $[89] !== handleContextMenu || $[90] !== handleFocus || $[91] !== handleMouseEnter || $[92] !== handleMouseLeave ? (t302 = react.cloneElement(childProp, {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
+      ref: setReferenceElement
+    }), $[86] = childProp, $[87] = handleBlur, $[88] = handleClick, $[89] = handleContextMenu, $[90] = handleFocus, $[91] = handleMouseEnter, $[92] = handleMouseLeave, $[93] = t302) : t302 = $[93], t29 = t302;
+  }
+  const child = t29;
+  let t30;
+  $[94] !== childProp ? (t30 = childProp ? getElementRef(childProp) : null, $[94] = childProp, $[95] = t30) : t30 = $[95];
+  let t31, t32;
+  if ($[96] !== referenceElement ? (t31 = () => referenceElement, t32 = [referenceElement], $[96] = referenceElement, $[97] = t31, $[98] = t32) : (t31 = $[97], t32 = $[98]), react.useImperativeHandle(t30, t31, t32), !child) {
+    let t332;
+    return $[99] === Symbol.for("react.memo_cache_sentinel") ? (t332 = /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[99] = t332) : t332 = $[99], t332;
+  }
+  if (disabled)
+    return child;
+  const t33 = tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0;
+  let t34;
+  $[100] !== floatingStyles || $[101] !== t33 ? (t34 = {
     ...floatingStyles,
-    maxWidth: tooltipMaxWidth > 0 ? `${tooltipMaxWidth}px` : void 0
-  }, zOffset, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip);
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children,
+    maxWidth: t33
+  }, $[100] = floatingStyles, $[101] = t33, $[102] = t34) : t34 = $[102];
+  let t35;
+  $[103] !== animate || $[104] !== arrowProp || $[105] !== arrowX || $[106] !== arrowY || $[107] !== content || $[108] !== originX || $[109] !== originY || $[110] !== padding || $[111] !== placement || $[112] !== radius || $[113] !== restProps || $[114] !== scheme || $[115] !== setArrow || $[116] !== setFloating || $[117] !== shadow ? (t35 = /* @__PURE__ */ jsxRuntime.jsx(TooltipCard, { ...restProps, animate, arrow: arrowProp, arrowRef: setArrow, arrowX, arrowY, originX, originY, padding, placement, radius, ref: setFloating, scheme, shadow, children: content }), $[103] = animate, $[104] = arrowProp, $[105] = arrowX, $[106] = arrowY, $[107] = content, $[108] = originX, $[109] = originY, $[110] = padding, $[111] = placement, $[112] = radius, $[113] = restProps, $[114] = scheme, $[115] = setArrow, $[116] = setFloating, $[117] = shadow, $[118] = t35) : t35 = $[118];
+  let t36;
+  $[119] !== restProps || $[120] !== setFloating || $[121] !== t34 || $[122] !== t35 || $[123] !== zOffset ? (t36 = /* @__PURE__ */ jsxRuntime.jsx(StyledTooltip, { "data-ui": "Tooltip", ...restProps, ref: setFloating, style: t34, zOffset, children: t35 }), $[119] = restProps, $[120] = setFloating, $[121] = t34, $[122] = t35, $[123] = zOffset, $[124] = t36) : t36 = $[124];
+  const tooltip = t36;
+  let t37;
+  $[125] !== portalProp || $[126] !== showTooltip || $[127] !== tooltip ? (t37 = showTooltip && (portalProp ? /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: typeof portalProp == "string" ? portalProp : void 0, children: tooltip }) : tooltip), $[125] = portalProp, $[126] = showTooltip, $[127] = tooltip, $[128] = t37) : t37 = $[128];
+  const children = t37;
+  let t38;
+  $[129] !== animate || $[130] !== children ? (t38 = animate ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[129] = animate, $[130] = children, $[131] = t38) : t38 = $[131];
+  let t39;
+  return $[132] !== child || $[133] !== t38 ? (t39 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t38,
     child
-  ] });
+  ] }), $[132] = child, $[133] = t38, $[134] = t39) : t39 = $[134], t39;
 });
 Tooltip.displayName = "ForwardRef(Tooltip)";
+function useMiddleware(t0) {
+  const $ = reactCompilerRuntime.c(17), {
+    animate,
+    arrowProp,
+    arrowRef,
+    boundaryElement,
+    fallbackPlacements,
+    rootBoundary
+  } = t0;
+  let ret;
+  if ($[0] !== animate || $[1] !== arrowProp || $[2] !== arrowRef || $[3] !== boundaryElement || $[4] !== fallbackPlacements || $[5] !== rootBoundary) {
+    ret = [];
+    const t1 = boundaryElement || void 0;
+    let t2;
+    $[7] !== fallbackPlacements || $[8] !== rootBoundary || $[9] !== t1 ? (t2 = reactDom$1.flip({
+      boundary: t1,
+      fallbackPlacements,
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
+    }), $[7] = fallbackPlacements, $[8] = rootBoundary, $[9] = t1, $[10] = t2) : t2 = $[10], ret.push(t2);
+    let t3;
+    $[11] === Symbol.for("react.memo_cache_sentinel") ? (t3 = reactDom$1.offset({
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
+    }), $[11] = t3) : t3 = $[11], ret.push(t3);
+    const t4 = boundaryElement || void 0;
+    let t5;
+    if ($[12] !== rootBoundary || $[13] !== t4 ? (t5 = reactDom$1.shift({
+      boundary: t4,
+      rootBoundary,
+      padding: DEFAULT_TOOLTIP_PADDING
+    }), $[12] = rootBoundary, $[13] = t4, $[14] = t5) : t5 = $[14], ret.push(t5), arrowProp) {
+      let t6;
+      $[15] !== arrowRef ? (t6 = reactDom$1.arrow({
+        element: arrowRef,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }), $[15] = arrowRef, $[16] = t6) : t6 = $[16], ret.push(t6);
+    }
+    animate && ret.push(origin), $[0] = animate, $[1] = arrowProp, $[2] = arrowRef, $[3] = boundaryElement, $[4] = fallbackPlacements, $[5] = rootBoundary, $[6] = ret;
+  } else
+    ret = $[6];
+  return ret;
+}
 function useCloseOnMouseLeave(t0) {
   const $ = reactCompilerRuntime.c(10), {
     handleIsOpenChange,