@sanity/ui 2.9.0-canary.3 → 2.9.0-canary.5

package/dist/index.js

@@ -3215,16 +3215,37 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
-  const theme2 = useTheme_v2(), {
+  const $ = reactCompilerRuntime.c(18), theme2 = useTheme_v2();
+  let _media, restProps, children;
+  $[0] !== props ? ({
     children,
     media: _media,
     ...restProps
-  } = props, media = _media ?? theme2.media, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
-  const setRef = react.useCallback((el) => {
-    ref.current = el, setElement(el);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max.length ? max.join(" ") : void 0, "data-eq-min": min.length ? min.join(" ") : void 0, ref: setRef, children });
+  } = props, $[0] = props, $[1] = _media, $[2] = restProps, $[3] = children) : (_media = $[1], restProps = $[2], children = $[3]);
+  const media = _media ?? theme2.media, [element, setElement] = react.useState(null), elementSize = useElementSize(element);
+  let t0;
+  t0 = elementSize?.border.width ?? window.innerWidth;
+  const width = t0;
+  let t1, t2;
+  if ($[4] !== media || $[5] !== width) {
+    const eq = findMaxBreakpoints(media, width);
+    t2 = eq.length ? eq.join(" ") : void 0, $[4] = media, $[5] = width, $[6] = t2;
+  } else
+    t2 = $[6];
+  t1 = t2;
+  const max = t1;
+  let t3, t4;
+  if ($[7] !== media || $[8] !== width) {
+    const eq_0 = findMinBreakpoints(media, width);
+    t4 = eq_0.length ? eq_0.join(" ") : void 0, $[7] = media, $[8] = width, $[9] = t4;
+  } else
+    t4 = $[9];
+  t3 = t4;
+  const min = t3;
+  let t5, t6;
+  $[10] !== element ? (t5 = () => element, t6 = [element], $[10] = element, $[11] = t5, $[12] = t6) : (t5 = $[11], t6 = $[12]), react.useImperativeHandle(forwardedRef, t5, t6);
+  let t7;
+  return $[13] !== restProps || $[14] !== max || $[15] !== min || $[16] !== children ? (t7 = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": max, "data-eq-min": min, ref: setElement, children }), $[13] = restProps, $[14] = max, $[15] = min, $[16] = children, $[17] = t7) : t7 = $[17], t7;
 });
 ElementQuery.displayName = "ForwardRef(ElementQuery)";
 class ErrorBoundary extends react.Component {
@@ -3351,10 +3372,18 @@ function _isScrollable(el) {
   return style.overflowX.includes("auto") || style.overflowX.includes("scroll") || style.overflowY.includes("auto") || style.overflowY.includes("scroll");
 }
 function LayerProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(19), {
     children,
-    zOffset: zOffsetProp = 0
-  } = props, parentContextValue = react.useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = react.useState({}), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0, registerChild = react.useCallback((childLevel) => {
+    zOffset: t0
+  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = react.useContext(LayerContext);
+  let t1;
+  $[0] !== parentContextValue ? (t1 = parentContextValue && getLayerContext(parentContextValue), $[0] = parentContextValue, $[1] = t1) : t1 = $[1];
+  const parent = t1, parentRegisterChild = parent?.registerChild, level = (parent?.level ?? 0) + 1, zOffset = useArrayProp(zOffsetProp), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
+  let t2;
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[2] = t2) : t2 = $[2];
+  const [, setChildLayers] = react.useState(t2), [size2, setSize] = react.useState(0), isTopLayer = size2 === 0;
+  let t3;
+  $[3] !== parentRegisterChild || $[4] !== setChildLayers ? (t3 = (childLevel) => {
     const parentDispose = parentRegisterChild?.(childLevel);
     return childLevel !== void 0 ? setChildLayers((state) => {
       const prevLen = state[childLevel] ?? 0, nextState = {
@@ -3367,20 +3396,25 @@ function LayerProvider(props) {
         const nextState_0 = {
           ...state_0
         };
-        return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] -= 1, nextState_0;
+        return nextState_0[childLevel] === 1 ? (delete nextState_0[childLevel], setSize(Object.keys(nextState_0).length)) : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
       }) : setSize((v_0) => v_0 - 1), parentDispose?.();
     };
-  }, [parentRegisterChild]);
-  react.useEffect(() => parentRegisterChild?.(level), [level, parentRegisterChild]);
-  const value = react.useMemo(() => ({
+  }, $[3] = parentRegisterChild, $[4] = setChildLayers, $[5] = t3) : t3 = $[5];
+  const registerChild = t3;
+  let t4, t5;
+  $[6] !== parentRegisterChild || $[7] !== level ? (t4 = () => parentRegisterChild?.(level), t5 = [level, parentRegisterChild], $[6] = parentRegisterChild, $[7] = level, $[8] = t4, $[9] = t5) : (t4 = $[8], t5 = $[9]), react.useEffect(t4, t5);
+  let t6, t7;
+  $[10] !== isTopLayer || $[11] !== level || $[12] !== registerChild || $[13] !== size2 || $[14] !== zIndex ? (t7 = {
     version: 0,
     isTopLayer,
     level,
     registerChild,
     size: size2,
     zIndex
-  }), [isTopLayer, level, registerChild, size2, zIndex]);
-  return /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children });
+  }, $[10] = isTopLayer, $[11] = level, $[12] = registerChild, $[13] = size2, $[14] = zIndex, $[15] = t7) : t7 = $[15], t6 = t7;
+  const value = t6;
+  let t8;
+  return $[16] !== value || $[17] !== children ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(LayerContext.Provider, { value, children }), $[16] = value, $[17] = children, $[18] = t8) : t8 = $[18], t8;
 }
 LayerProvider.displayName = "LayerProvider";
 const Root$j = styledComponents.styled.div({
@@ -3723,8 +3757,8 @@ const MotionCard$1 = styledComponents.styled(framerMotion.motion(Card))`
     will-change: opacity;
   }
 `, PopoverCard = react.memo(react.forwardRef(function(props, ref) {
-  const $ = reactCompilerRuntime.c(60);
-  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, width, arrowX, arrowY, restProps, padding, children, overflow, arrow, arrowRef, placement, radius, scheme, shadow, tone;
+  const $ = reactCompilerRuntime.c(58);
+  let marginsProp, xProp, yProp, animate, originX, originY, strategy, style, arrowX, arrowY, restProps, padding, children, overflow, arrow, arrowRef, placement, radius, scheme, shadow, tone;
   $[0] !== props ? ({
     __unstable_margins: marginsProp,
     animate,
@@ -3744,11 +3778,10 @@ const MotionCard$1 = styledComponents.styled(framerMotion.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] = arrow, $[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], arrow = $[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] = arrow, $[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], arrow = $[15], arrowRef = $[16], placement = $[17], radius = $[18], scheme = $[19], shadow = $[20], tone = $[21]);
   const {
     zIndex
   } = useLayer();
@@ -3758,139 +3791,163 @@ const MotionCard$1 = styledComponents.styled(framerMotion.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__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[38] = padding, $[39] = children, $[40] = t10) : t10 = $[40];
+  $[36] !== padding || $[37] !== children ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(Flex, { direction: "column", flex: 1, padding, children }), $[36] = padding, $[37] = children, $[38] = t10) : t10 = $[38];
   let t11;
-  $[41] !== overflow || $[42] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Flex, { "data-ui": "Popover__wrapper", direction: "column", flex: 1, overflow, children: t10 }), $[39] = overflow, $[40] = t10, $[41] = t11) : t11 = $[41];
   let t12;
-  $[44] !== arrow || $[45] !== arrowRef || $[46] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[44] = arrow, $[45] = arrowRef, $[46] = arrowStyle, $[47] = t12) : t12 = $[47];
+  $[42] !== arrow || $[43] !== arrowRef || $[44] !== arrowStyle ? (t12 = arrow && /* @__PURE__ */ jsxRuntime.jsx(Arrow, { ref: arrowRef, style: arrowStyle, width: DEFAULT_POPOVER_ARROW_WIDTH, height: DEFAULT_POPOVER_ARROW_HEIGHT, radius: DEFAULT_POPOVER_ARROW_RADIUS }), $[42] = arrow, $[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__ */ jsxRuntime.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__ */ jsxRuntime.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 = react.memo(react.forwardRef(function(props, forwardedRef) {
-  const {
+  const $ = reactCompilerRuntime.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 = 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({
-    container,
-    mediaIndex,
-    width: widthArrayProp
-  }), widthRef = react.useRef(width);
-  react.useEffect(() => {
-    widthRef.current = width;
-  }, [width]);
-  const maxWidth = calcMaxWidth({
-    boundaryWidth,
-    currentWidth: width
-  }), maxWidthRef = react.useRef(maxWidth);
-  react.useEffect(() => {
-    maxWidthRef.current = maxWidth;
-  }, [maxWidth]);
-  const referenceWidthRef = react.useRef();
-  react.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 = react.useRef(null), [arrowElement, setArrowElement] = react.useState(null);
+  let t11;
+  $[28] === Symbol.for("react.memo_cache_sentinel") ? (t11 = () => ref.current, $[28] = t11) : t11 = $[28], react.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 = react.useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && 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({
+    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]), react.useLayoutEffect(t12, t13);
+  let t14;
+  $[38] !== constrainSize || $[39] !== preventOverflow || $[40] !== floatingBoundary || $[41] !== fallbackPlacements ? (t14 = (constrainSize || preventOverflow) && reactDom$1.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 = reactDom$1.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(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, 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 && reactDom$1.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 && reactDom$1.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 = reactDom$1.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: reactDom$1.autoUpdate
+  }, $[68] = t22, $[69] = placementProp, $[70] = t23) : t23 = $[70];
+  const {
     x,
     y,
     middlewareData,
@@ -3898,30 +3955,57 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     refs,
     strategy,
     update
-  } = reactDom$1.useFloating({
-    middleware,
-    placement: placementProp,
-    whileElementsMounted: reactDom$1.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, setArrow = react.useCallback((arrowEl) => {
-    arrowRef.current = arrowEl;
-  }, []), setFloating = react.useCallback((node) => {
+  } = 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;
+  $[71] !== refs ? (t24 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), [childElement, setChildElement] = react.useState(null), setReference = react.useCallback((node_0) => {
+  }, $[71] = refs, $[72] = t24) : t24 = $[72];
+  const setFloating = t24, [childElement, setChildElement] = react.useState(null);
+  let t25;
+  $[73] !== refs ? (t25 = (node_0) => {
     refs.setReference(node_0), setChildElement(node_0);
-  }, [refs]);
-  react.useImperativeHandle(getElementRef(childProp), () => childElement, [childElement]);
-  const child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, {
-    ref: setReference
-  }), [childProp, referenceElement, setReference]);
-  if (react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
+  }, $[73] = refs, $[74] = t25) : t25 = $[74];
+  const setReference = t25, t26 = childProp;
+  let t27;
+  $[75] !== t26 ? (t27 = getElementRef(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]), react.useImperativeHandle(t27, t28, t29);
+  let t30;
+  bb0: {
+    if (!childProp || referenceElement) {
+      t30 = null;
+      break bb0;
+    }
+    let t312;
+    $[80] !== setReference || $[81] !== childProp ? (t312 = react.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]), react.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__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,
+  }, t34 = [referenceElement, refs, child], $[86] = child, $[87] = refs, $[88] = referenceElement, $[89] = t33, $[90] = t34) : (t33 = $[89], t34 = $[90]), react.useEffect(t33, t34), disabled) {
+    let t352;
+    return $[91] !== childProp ? (t352 = childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children }) : children, $[122] = animate, $[123] = children, $[124] = t38) : t38 = $[124];
+  let t39;
+  return $[125] !== t38 || $[126] !== child ? (t39 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t38,
     child
-  ] });
+  ] }), $[125] = t38, $[126] = child, $[127] = t39) : t39 = $[127], t39;
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
 function getElementRef(element) {
@@ -5933,8 +6017,8 @@ const Root$5 = styledComponents.styled(Box)`
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuButton = react.forwardRef(function(props, forwardedRef) {
-  const {
-    __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
+  const $ = reactCompilerRuntime.c(62), {
+    __unstable_disableRestoreFocusOnClose: t0,
     boundaryElement: deprecated_boundaryElement,
     button: buttonProp,
     id,
@@ -5943,23 +6027,38 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     onOpen,
     placement: deprecated_placement,
     popoverScheme: deprecated_popoverScheme,
-    portal: deprecated_portal = !0,
+    portal: t1,
     popover,
     popoverRadius: deprecated_popoverRadius,
     preventOverflow: deprecated_preventOverflow
-  } = props, [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), [buttonElement, setButtonElement] = react.useState(null), [menuElements, setChildMenuElements] = react.useState([]), openRef = react.useRef(open);
-  react.useEffect(() => {
+  } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, deprecated_portal = t1 === void 0 ? !0 : t1, [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), [buttonElement, setButtonElement] = react.useState(null);
+  let t2;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[0] = t2) : t2 = $[0];
+  const [menuElements, setChildMenuElements] = react.useState(t2), openRef = react.useRef(open);
+  let t3, t4;
+  $[1] !== onOpen || $[2] !== open ? (t3 = () => {
     onOpen && open && !openRef.current && onOpen();
-  }, [onOpen, open]), react.useEffect(() => {
+  }, t4 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t3, $[4] = t4) : (t3 = $[3], t4 = $[4]), react.useEffect(t3, t4);
+  let t5, t6;
+  $[5] !== onClose || $[6] !== open ? (t5 = () => {
     onClose && !open && openRef.current && onClose();
-  }, [onClose, open]), react.useEffect(() => {
+  }, t6 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t5, $[8] = t6) : (t5 = $[7], t6 = $[8]), react.useEffect(t5, t6);
+  let t7, t8;
+  $[9] !== open ? (t7 = () => {
     openRef.current = open;
-  }, [open]);
-  const handleButtonClick = react.useCallback(() => {
+  }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), react.useEffect(t7, t8);
+  let t9;
+  $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
     setOpen((v) => !v), setShouldFocus(null);
-  }, []), handleMouseDown = react.useCallback((event) => {
+  }, $[12] = t9) : t9 = $[12];
+  const handleButtonClick = t9;
+  let t10;
+  $[13] !== open ? (t10 = (event) => {
     open && event.preventDefault();
-  }, [open]), handleButtonKeyDown = react.useCallback((event_0) => {
+  }, $[13] = open, $[14] = t10) : t10 = $[14];
+  const handleMouseDown = t10;
+  let t11;
+  $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (event_0) => {
     if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
       return;
@@ -5968,7 +6067,10 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
       event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
       return;
     }
-  }, []), handleMenuClickOutside = react.useCallback((event_1) => {
+  }, $[15] = t11) : t11 = $[15];
+  const handleButtonKeyDown = t11;
+  let t12;
+  $[16] !== buttonElement || $[17] !== menuElements ? (t12 = (event_1) => {
     const target = event_1.target;
     if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
       for (const el of menuElements)
@@ -5976,9 +6078,15 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, [buttonElement, menuElements]), handleMenuEscape = react.useCallback(() => {
+  }, $[16] = buttonElement, $[17] = menuElements, $[18] = t12) : t12 = $[18];
+  const handleMenuClickOutside = t12;
+  let t13;
+  $[19] !== disableRestoreFocusOnClose || $[20] !== buttonElement ? (t13 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), handleBlur = react.useCallback((event_2) => {
+  }, $[19] = disableRestoreFocusOnClose, $[20] = buttonElement, $[21] = t13) : t13 = $[21];
+  const handleMenuEscape = t13;
+  let t14;
+  $[22] !== menuElements ? (t14 = (event_2) => {
     const target_0 = event_2.relatedTarget;
     if (target_0 instanceof Node) {
       for (const el_0 of menuElements)
@@ -5986,9 +6094,18 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
           return;
       setOpen(!1);
     }
-  }, [menuElements]), handleItemClick = react.useCallback(() => {
+  }, $[22] = menuElements, $[23] = t14) : t14 = $[23];
+  const handleBlur = t14;
+  let t15;
+  $[24] !== disableRestoreFocusOnClose || $[25] !== buttonElement ? (t15 = () => {
     setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
-  }, [buttonElement, disableRestoreFocusOnClose]), registerElement = react.useCallback((el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), []), menuProps = react.useMemo(() => ({
+  }, $[24] = disableRestoreFocusOnClose, $[25] = buttonElement, $[26] = t15) : t15 = $[26];
+  const handleItemClick = t15;
+  let t16;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t16) : t16 = $[27];
+  const registerElement = t16;
+  let t17;
+  $[28] !== id || $[29] !== handleBlur || $[30] !== handleMenuClickOutside || $[31] !== handleMenuEscape || $[32] !== handleItemClick || $[33] !== buttonElement || $[34] !== shouldFocus || $[35] !== menuProp ? (t17 = menuProp && react.cloneElement(menuProp, {
     "aria-labelledby": id,
     onBlurCapture: handleBlur,
     onClickOutside: handleMenuClickOutside,
@@ -5997,7 +6114,10 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     originElement: buttonElement,
     registerElement,
     shouldFocus
-  }), [buttonElement, handleMenuClickOutside, handleMenuEscape, handleItemClick, id, handleBlur, registerElement, shouldFocus]), menu = menuProp && react.cloneElement(menuProp, menuProps), ref = react.useRef(null), button = react.useMemo(() => buttonProp && react.cloneElement(buttonProp, {
+  }), $[28] = id, $[29] = handleBlur, $[30] = handleMenuClickOutside, $[31] = handleMenuEscape, $[32] = handleItemClick, $[33] = buttonElement, $[34] = shouldFocus, $[35] = menuProp, $[36] = t17) : t17 = $[36];
+  const menu = t17;
+  let t18, t19;
+  $[37] !== buttonProp || $[38] !== open || $[39] !== id || $[40] !== handleMouseDown ? (t19 = buttonProp && react.cloneElement(buttonProp, {
     "data-ui": "MenuButton",
     id,
     onClick: handleButtonClick,
@@ -6005,14 +6125,16 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     onMouseDown: handleMouseDown,
     "aria-haspopup": !0,
     "aria-expanded": open,
-    ref,
+    ref: setButtonElement,
     selected: buttonProp.props.selected ?? open
-  }), [buttonProp, handleButtonClick, handleButtonKeyDown, handleMouseDown, id, open]);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => {
-    if (button)
-      return setButtonElement(ref.current), () => setButtonElement(null);
-  }, [button]);
-  const popoverProps = react.useMemo(() => ({
+  }), $[37] = buttonProp, $[38] = open, $[39] = id, $[40] = handleMouseDown, $[41] = t19) : t19 = $[41], t18 = t19;
+  const button = t18;
+  let t20, t21;
+  $[42] !== buttonElement ? (t20 = () => buttonElement, t21 = [buttonElement], $[42] = buttonElement, $[43] = t20, $[44] = t21) : (t20 = $[43], t21 = $[44]), react.useImperativeHandle(forwardedRef, t20, t21);
+  let t22, t23;
+  $[45] !== popover ? (t23 = popover || {}, $[45] = popover, $[46] = t23) : t23 = $[46];
+  let t24;
+  $[47] !== deprecated_boundaryElement || $[48] !== deprecated_placement || $[49] !== deprecated_portal || $[50] !== deprecated_preventOverflow || $[51] !== deprecated_popoverRadius || $[52] !== deprecated_popoverScheme || $[53] !== t23 ? (t24 = {
     boundaryElement: deprecated_boundaryElement,
     overflow: "auto",
     placement: deprecated_placement,
@@ -6020,9 +6142,13 @@ const MenuButton = react.forwardRef(function(props, forwardedRef) {
     preventOverflow: deprecated_preventOverflow,
     radius: deprecated_popoverRadius,
     scheme: deprecated_popoverScheme,
-    ...popover || {}
-  }), [deprecated_boundaryElement, deprecated_placement, deprecated_popoverRadius, deprecated_popoverScheme, deprecated_portal, deprecated_preventOverflow, popover]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) });
+    ...t23
+  }, $[47] = deprecated_boundaryElement, $[48] = deprecated_placement, $[49] = deprecated_portal, $[50] = deprecated_preventOverflow, $[51] = deprecated_popoverRadius, $[52] = deprecated_popoverScheme, $[53] = t23, $[54] = t24) : t24 = $[54], t22 = t24;
+  const popoverProps = t22;
+  let t25;
+  $[55] !== button ? (t25 = button || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}), $[55] = button, $[56] = t25) : t25 = $[56];
+  let t26;
+  return $[57] !== popoverProps || $[58] !== menu || $[59] !== open || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = popoverProps, $[58] = menu, $[59] = open, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
 const MenuDivider = styledComponents.styled.hr`
@@ -6506,9 +6632,6 @@ const CustomButton = styledComponents.styled(Button)`
   return $[18] !== restProps || $[19] !== t7 || $[20] !== fontSize2 || $[21] !== icon || $[22] !== id || $[23] !== onClick || $[24] !== handleFocus || $[25] !== padding || $[26] !== selected || $[27] !== t8 || $[28] !== label ? (t9 = /* @__PURE__ */ jsxRuntime.jsx(CustomButton, { "data-ui": "Tab", ...restProps, "aria-selected": t7, fontSize: fontSize2, icon, id, mode: "bleed", onClick, onBlur: handleBlur, onFocus: handleFocus, padding, ref, role: "tab", selected, tabIndex: t8, text: label, type: "button" }), $[18] = restProps, $[19] = t7, $[20] = fontSize2, $[21] = icon, $[22] = id, $[23] = onClick, $[24] = handleFocus, $[25] = padding, $[26] = selected, $[27] = t8, $[28] = label, $[29] = t9) : t9 = $[29], t9;
 });
 Tab.displayName = "ForwardRef(Tab)";
-function _isReactElement(node) {
-  return !!node;
-}
 const CustomInline = styledComponents.styled(Inline)`
   & > div {
     display: inline-block;
@@ -6517,19 +6640,32 @@ const CustomInline = styledComponents.styled(Inline)`
     box-sizing: border-box;
   }
 `, TabList = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(15);
+  let childrenProp, restProps;
+  $[0] !== props ? ({
     children: childrenProp,
     ...restProps
-  } = props, [focusedIndex, setFocusedIndex] = react.useState(-1), tabs = react.useMemo(() => childrenProp.filter(_isReactElement), [childrenProp]).map((child, childIndex) => react.cloneElement(child, {
-    focused: focusedIndex === childIndex,
-    key: childIndex,
-    onFocus: () => handleTabFocus(childIndex)
-  })), numTabs = tabs.length, handleTabFocus = react.useCallback((tabIdx) => {
-    setFocusedIndex(tabIdx);
-  }, []), handleKeyDown = react.useCallback((event) => {
+  } = props, $[0] = props, $[1] = childrenProp, $[2] = restProps) : (childrenProp = $[1], restProps = $[2]);
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  let t0;
+  if ($[3] !== childrenProp || $[4] !== focusedIndex) {
+    const children = react.Children.toArray(childrenProp).filter(react.isValidElement);
+    let t12;
+    $[6] !== focusedIndex ? (t12 = (child, childIndex) => react.cloneElement(child, {
+      focused: focusedIndex === childIndex,
+      key: childIndex,
+      onFocus: () => setFocusedIndex(childIndex)
+    }), $[6] = focusedIndex, $[7] = t12) : t12 = $[7], t0 = children.map(t12), $[3] = childrenProp, $[4] = focusedIndex, $[5] = t0;
+  } else
+    t0 = $[5];
+  const tabs = t0, numTabs = tabs.length;
+  let t1;
+  $[8] !== numTabs ? (t1 = (event) => {
     event.key === "ArrowLeft" && setFocusedIndex((prevIndex) => (prevIndex + numTabs - 1) % numTabs), event.key === "ArrowRight" && setFocusedIndex((prevIndex_0) => (prevIndex_0 + 1) % numTabs);
-  }, [numTabs]);
-  return /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs });
+  }, $[8] = numTabs, $[9] = t1) : t1 = $[9];
+  const handleKeyDown = t1;
+  let t2;
+  return $[10] !== restProps || $[11] !== handleKeyDown || $[12] !== ref || $[13] !== tabs ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(CustomInline, { "data-ui": "TabList", ...restProps, onKeyDown: handleKeyDown, ref, role: "tablist", children: tabs }), $[10] = restProps, $[11] = handleKeyDown, $[12] = ref, $[13] = tabs, $[14] = t2) : t2 = $[14], t2;
 });
 TabList.displayName = "ForwardRef(TabList)";
 const TabPanel = react.forwardRef(function(props, ref) {
@@ -6650,7 +6786,12 @@ function _temp() {
   return !0;
 }
 const subscribe = () => () => {
-}, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null), Root$1 = styledComponents.styled(Layer)`
+}, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null);
+let toastId = 0;
+function generateToastId() {
+  return String(toastId++);
+}
+const Root$1 = styledComponents.styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;
@@ -6665,31 +6806,44 @@ const subscribe = () => () => {
   max-width: 420px;
   width: 100%;
 `;
-let toastId = 0;
 function ToastProvider(props) {
-  const {
+  const $ = reactCompilerRuntime.c(24), {
     children,
-    padding = 4,
+    padding: t0,
     paddingX,
     paddingY,
     zOffset
-  } = props, [state, _setState] = react.useState([]), toastsRef = react.useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = react.useMemo(() => ({
-    initial: {
-      opacity: 0,
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
-      y: 32,
-      scale: 0.25,
-      willChange: "transform"
-    },
-    animate: {
-      opacity: [0, 1, 1],
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
-      y: 0,
-      scale: 1
-    },
+  } = props, padding = t0 === void 0 ? 4 : t0;
+  let t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+  const [state, _setState] = react.useState(t1);
+  let t2;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[1] = t2) : t2 = $[1];
+  const toastsRef = react.useRef(t2), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion();
+  let t3, t4, t5;
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {
+    opacity: 0,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    y: 32,
+    scale: 0.25,
+    willChange: "transform"
+  }, t5 = [0, 1, 1], $[2] = t4, $[3] = t5) : (t4 = $[2], t5 = $[3]);
+  let t6, t7;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t6 = {
+    opacity: t5,
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
+    y: 0,
+    scale: 1
+  }, t7 = [1, 1, 0], $[4] = t6, $[5] = t7) : (t6 = $[4], t7 = $[5]);
+  let t8;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t8 = [1, 0, 0], $[6] = t8) : t8 = $[6];
+  let t9;
+  $[7] !== prefersReducedMotion ? (t9 = {
+    initial: t4,
+    animate: t6,
     exit: {
-      opacity: [1, 1, 0],
-      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
+      opacity: t7,
+      [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: t8,
       scale: 0.5,
       transition: prefersReducedMotion ? {
         duration: 0
@@ -6697,10 +6851,13 @@ function ToastProvider(props) {
         duration: 0.2
       }
     }
-  }), [prefersReducedMotion]), value = react.useMemo(() => ({
+  }, $[7] = prefersReducedMotion, $[8] = t9) : t9 = $[8], t3 = t9;
+  const variants = t3;
+  let t10, t11;
+  $[9] === Symbol.for("react.memo_cache_sentinel") ? (t11 = {
     version: 0,
     push: (params) => {
-      const setState = (state_0) => react.startTransition(() => _setState(state_0)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
+      const setState = (state_0) => react.startTransition(() => _setState(state_0)), id = params.id || generateToastId(), duration = params.duration || 5e3, dismiss = () => {
         const timeoutId = toastsRef.current[id]?.timeoutId;
         setState((prevState) => {
           const idx = prevState.findIndex((t) => t.id === id);
@@ -6722,27 +6879,36 @@ function ToastProvider(props) {
         timeoutId: setTimeout(dismiss, duration)
       }, id;
     }
-  }), []);
-  return react.useEffect(() => () => {
+  }, $[9] = t11) : t11 = $[9], t10 = t11;
+  const value = t10;
+  let t12, t13;
+  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => () => {
     for (const {
       timeoutId: timeoutId_0
     } of Object.values(toastsRef.current))
       clearTimeout(timeoutId_0);
     toastsRef.current = {};
-  }, []), /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
-    children,
-    mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map(({
+  }, t13 = [], $[10] = t12, $[11] = t13) : (t12 = $[10], t13 = $[11]), react.useEffect(t12, t13);
+  let t14;
+  $[12] !== mounted || $[13] !== variants || $[14] !== prefersReducedMotion || $[15] !== state || $[16] !== padding || $[17] !== paddingX || $[18] !== paddingY || $[19] !== zOffset ? (t14 = mounted && /* @__PURE__ */ jsxRuntime.jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsxRuntime.jsx(ToastContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: !1, children: state.map((t152) => {
+    const {
       dismiss: dismiss_0,
       id: id_0,
       params: params_0
-    }) => /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { layout: "position", initial: "initial", animate: "animate", exit: "exit", variants, transition: prefersReducedMotion ? {
+    } = t152;
+    return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { layout: "position", initial: "initial", animate: "animate", exit: "exit", variants, transition: prefersReducedMotion ? {
       duration: 0
     } : {
       type: "spring",
       damping: 30,
       stiffness: 400
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration }) }, id_0)) }) }) }) })
-  ] });
+    }, children: /* @__PURE__ */ jsxRuntime.jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration }) }, id_0);
+  }) }) }) }) }), $[12] = mounted, $[13] = variants, $[14] = prefersReducedMotion, $[15] = state, $[16] = padding, $[17] = paddingX, $[18] = paddingY, $[19] = zOffset, $[20] = t14) : t14 = $[20];
+  let t15;
+  return $[21] !== children || $[22] !== t14 ? (t15 = /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
+    children,
+    t14
+  ] }), $[21] = children, $[22] = t14, $[23] = t15) : t15 = $[23], t15;
 }
 ToastProvider.displayName = "ToastProvider";
 function useToast() {
@@ -7079,61 +7245,117 @@ const TreeGroup = react.memo(function(props) {
     transition: transform 100ms;
   }
 `, TreeItem = react.memo(function(props) {
-  const {
+  const $ = reactCompilerRuntime.c(112);
+  let t0, t1, t2, t3, t4, idProp, onClick, IconComponent, children, muted, weight, text, href, linkAs, restProps;
+  $[0] !== props ? ({
     children,
-    expanded: expandedProp = !1,
-    fontSize: fontSize2 = 1,
+    expanded: t0,
+    fontSize: t1,
     href,
     icon: IconComponent,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding = 2,
-    selected = !1,
-    space = 2,
+    padding: t2,
+    selected: t3,
+    space: t4,
     text,
     weight,
     ...restProps
-  } = props, [rootElement, setRootElement] = react.useState(null), treeitemRef = react.useRef(null), tree = useTree(), {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = idProp, $[7] = onClick, $[8] = IconComponent, $[9] = children, $[10] = muted, $[11] = weight, $[12] = text, $[13] = href, $[14] = linkAs, $[15] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], idProp = $[6], onClick = $[7], IconComponent = $[8], children = $[9], muted = $[10], weight = $[11], text = $[12], href = $[13], linkAs = $[14], restProps = $[15]);
+  const expandedProp = t0 === void 0 ? !1 : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 2 : t2, selected = t3 === void 0 ? !1 : t3, space = t4 === void 0 ? 2 : t4, [rootElement, setRootElement] = react.useState(null), treeitemRef = react.useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = react.useId(), id = idProp || _id, itemPath = react.useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1, contextValue = react.useMemo(() => ({
+  } = tree, _id = react.useId(), id = idProp || _id;
+  let t5, t6, t7;
+  if ($[16] !== id || $[17] !== path) {
+    const result = path.concat([id || ""]);
+    t6 = result, t7 = result.join("/"), $[16] = id, $[17] = path, $[18] = t6, $[19] = t7;
+  } else
+    t6 = $[18], t7 = $[19];
+  let t8;
+  $[20] !== t6 || $[21] !== t7 ? (t8 = [t6, t7], $[20] = t6, $[21] = t7, $[22] = t8) : t8 = $[22], t5 = t8;
+  const [itemPath, itemKey] = t5, itemState = tree.state[itemKey], focused = tree.focusedElement === rootElement, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootElement ? 0 : -1;
+  let t9;
+  const t10 = tree.level + 1;
+  let t11;
+  $[23] !== tree || $[24] !== t10 || $[25] !== itemPath ? (t11 = {
     ...tree,
-    level: tree.level + 1,
+    level: t10,
     path: itemPath
-  }), [itemPath, tree]), handleClick = react.useCallback((event) => {
+  }, $[23] = tree, $[24] = t10, $[25] = itemPath, $[26] = t11) : t11 = $[26], t9 = t11;
+  const contextValue = t9;
+  let t12;
+  $[27] !== onClick || $[28] !== setExpanded || $[29] !== itemKey || $[30] !== expanded || $[31] !== setFocusedElement || $[32] !== rootElement ? (t12 = (event) => {
     onClick && onClick(event);
     const target = event.target;
     target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootElement));
-  }, [expanded, itemKey, onClick, rootElement, setExpanded, setFocusedElement]), handleKeyDown = react.useCallback((event_0) => {
+  }, $[27] = onClick, $[28] = setExpanded, $[29] = itemKey, $[30] = expanded, $[31] = setFocusedElement, $[32] = rootElement, $[33] = t12) : t12 = $[33];
+  const handleClick = t12;
+  let t13;
+  $[34] !== focused || $[35] !== rootElement ? (t13 = (event_0) => {
     focused && event_0.key === "Enter" && (treeitemRef.current || rootElement)?.click();
-  }, [focused, rootElement]);
-  react.useEffect(() => {
+  }, $[34] = focused, $[35] = rootElement, $[36] = t13) : t13 = $[36];
+  const handleKeyDown = t13;
+  let t14, t15;
+  $[37] !== rootElement || $[38] !== registerItem || $[39] !== itemPath || $[40] !== expanded || $[41] !== selected ? (t14 = () => {
     if (rootElement)
       return registerItem(rootElement, itemPath.join("/"), expanded, selected);
-  }, [expanded, itemPath, registerItem, rootElement, selected]);
-  const content = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Box, { marginRight: space, style: {
-      visibility: IconComponent || children ? "visible" : "hidden",
-      pointerEvents: "none"
-    }, children: [
-      IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }),
-      !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
-        transform: expanded ? "rotate(90deg)" : void 0
-      } }) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
-  ] });
-  return href ? /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
-    /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
-    /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }) })
-  ] });
+  }, t15 = [expanded, itemPath, registerItem, rootElement, selected], $[37] = rootElement, $[38] = registerItem, $[39] = itemPath, $[40] = expanded, $[41] = selected, $[42] = t14, $[43] = t15) : (t14 = $[42], t15 = $[43]), react.useEffect(t14, t15);
+  const t16 = IconComponent || children ? "visible" : "hidden";
+  let t17;
+  $[44] !== t16 ? (t17 = {
+    visibility: t16,
+    pointerEvents: "none"
+  }, $[44] = t16, $[45] = t17) : t17 = $[45];
+  let t18;
+  $[46] !== IconComponent || $[47] !== muted || $[48] !== fontSize2 || $[49] !== weight ? (t18 = IconComponent && /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {}) }), $[46] = IconComponent, $[47] = muted, $[48] = fontSize2, $[49] = weight, $[50] = t18) : t18 = $[50];
+  let t19;
+  $[51] !== IconComponent || $[52] !== expanded || $[53] !== muted || $[54] !== fontSize2 || $[55] !== weight ? (t19 = !IconComponent && /* @__PURE__ */ jsxRuntime.jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ToggleArrowRightIcon, { style: {
+    transform: expanded ? "rotate(90deg)" : void 0
+  } }) }), $[51] = IconComponent, $[52] = expanded, $[53] = muted, $[54] = fontSize2, $[55] = weight, $[56] = t19) : t19 = $[56];
+  let t20;
+  $[57] !== space || $[58] !== t17 || $[59] !== t18 || $[60] !== t19 ? (t20 = /* @__PURE__ */ jsxRuntime.jsxs(Box, { marginRight: space, style: t17, children: [
+    t18,
+    t19
+  ] }), $[57] = space, $[58] = t17, $[59] = t18, $[60] = t19, $[61] = t20) : t20 = $[61];
+  let t21;
+  $[62] !== muted || $[63] !== fontSize2 || $[64] !== weight || $[65] !== text ? (t21 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) }), $[62] = muted, $[63] = fontSize2, $[64] = weight, $[65] = text, $[66] = t21) : t21 = $[66];
+  let t22;
+  $[67] !== padding || $[68] !== t20 || $[69] !== t21 ? (t22 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { padding, children: [
+    t20,
+    t21
+  ] }), $[67] = padding, $[68] = t20, $[69] = t21, $[70] = t22) : t22 = $[70];
+  const content = t22;
+  if (href) {
+    const t232 = selected ? "" : void 0;
+    let t242;
+    $[71] !== tree.level || $[72] !== expanded || $[73] !== linkAs || $[74] !== href || $[75] !== tabIndex || $[76] !== content ? (t242 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }), $[71] = tree.level, $[72] = expanded, $[73] = linkAs, $[74] = href, $[75] = tabIndex, $[76] = content, $[77] = t242) : t242 = $[77];
+    let t252;
+    $[78] !== children || $[79] !== expanded ? (t252 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { hidden: !expanded, children }), $[78] = children, $[79] = expanded, $[80] = t252) : t252 = $[80];
+    let t262;
+    $[81] !== contextValue || $[82] !== t252 ? (t262 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t252 }), $[81] = contextValue, $[82] = t252, $[83] = t262) : t262 = $[83];
+    let t272;
+    return $[84] !== t232 || $[85] !== id || $[86] !== itemKey || $[87] !== restProps || $[88] !== handleClick || $[89] !== t242 || $[90] !== t262 ? (t272 = /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": t232, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: setRootElement, role: "none", children: [
+      t242,
+      t262
+    ] }), $[84] = t232, $[85] = id, $[86] = itemKey, $[87] = restProps, $[88] = handleClick, $[89] = t242, $[90] = t262, $[91] = t272) : t272 = $[91], t272;
+  }
+  const t23 = selected ? "" : void 0;
+  let t24;
+  $[92] !== tree.level || $[93] !== content ? (t24 = /* @__PURE__ */ jsxRuntime.jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }), $[92] = tree.level, $[93] = content, $[94] = t24) : t24 = $[94];
+  let t25;
+  $[95] !== children || $[96] !== expanded ? (t25 = children && /* @__PURE__ */ jsxRuntime.jsx(TreeGroup, { expanded, children }), $[95] = children, $[96] = expanded, $[97] = t25) : t25 = $[97];
+  let t26;
+  $[98] !== contextValue || $[99] !== t25 ? (t26 = /* @__PURE__ */ jsxRuntime.jsx(TreeContext.Provider, { value: contextValue, children: t25 }), $[98] = contextValue, $[99] = t25, $[100] = t26) : t26 = $[100];
+  let t27;
+  return $[101] !== t23 || $[102] !== id || $[103] !== itemKey || $[104] !== restProps || $[105] !== expanded || $[106] !== handleClick || $[107] !== handleKeyDown || $[108] !== tabIndex || $[109] !== t24 || $[110] !== t26 ? (t27 = /* @__PURE__ */ jsxRuntime.jsxs(Root, { "data-selected": t23, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: setRootElement, role: "treeitem", tabIndex, children: [
+    t24,
+    t26
+  ] }), $[101] = t23, $[102] = id, $[103] = itemKey, $[104] = restProps, $[105] = expanded, $[106] = handleClick, $[107] = handleKeyDown, $[108] = tabIndex, $[109] = t24, $[110] = t26, $[111] = t27) : t27 = $[111], t27;
 });
 TreeItem.displayName = "Memo(TreeItem)";
 exports.Arrow = Arrow;