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

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({
@@ -3829,7 +3863,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     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";
+  } = 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), [arrowElement, setArrowElement] = react.useState(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
@@ -3883,14 +3917,14 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
       rootBoundary,
       padding: DEFAULT_POPOVER_PADDING
     })), arrowProp && ret.push(reactDom$1.arrow({
-      element: arrowRef,
+      element: arrowElement,
       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]), {
+  }, [animate, arrowElement, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
     x,
     y,
     middlewareData,
@@ -3902,9 +3936,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     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) => {
+  }), referenceHidden = middlewareData.hide?.referenceHidden, arrowX = middlewareData.arrow?.x, arrowY = middlewareData.arrow?.y, originX = middlewareData["@sanity/ui/origin"]?.originX, originY = middlewareData["@sanity/ui/origin"]?.originY, setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
   }, [refs]), [childElement, setChildElement] = react.useState(null), setReference = react.useCallback((node_0) => {
     refs.setReference(node_0), setChildElement(node_0);
@@ -3917,7 +3949,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     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);
+  const popover = /* @__PURE__ */ jsxRuntime.jsx(LayerProvider, { zOffset, children: /* @__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, 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,
     child
@@ -5342,26 +5374,46 @@ const Autocomplete = InnerAutocomplete, Root$8 = styledComponents.styled.ol`
   appearance: none;
   margin: -4px;
 `, Breadcrumbs = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(37);
+  let t0, children, maxLength, restProps, separator;
+  $[0] !== props ? ({
     children,
     maxLength,
     separator,
-    space: spaceRaw = 2,
+    space: t0,
     ...restProps
-  } = props, space = useArrayProp(spaceRaw), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null), collapse = react.useCallback(() => setOpen(!1), []), expand = react.useCallback(() => setOpen(!0), []);
-  useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
-  const rawItems = react.useMemo(() => react.Children.toArray(children).filter(react.isValidElement), [children]), items = react.useMemo(() => {
+  } = props, $[0] = props, $[1] = t0, $[2] = children, $[3] = maxLength, $[4] = restProps, $[5] = separator) : (t0 = $[1], children = $[2], maxLength = $[3], restProps = $[4], separator = $[5]);
+  const space = useArrayProp(t0 === void 0 ? 2 : t0), [open, setOpen] = react.useState(!1), expandElementRef = react.useRef(null), popoverElementRef = react.useRef(null);
+  let t1;
+  $[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setOpen(!1), $[6] = t1) : t1 = $[6];
+  const collapse = t1;
+  let t2;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => setOpen(!0), $[7] = t2) : t2 = $[7];
+  const expand = t2;
+  let t3;
+  $[8] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => [expandElementRef.current, popoverElementRef.current], $[8] = t3) : t3 = $[8], useClickOutsideEvent(collapse, t3);
+  let T0, t4, t5, t6, t7;
+  if ($[9] !== children || $[10] !== maxLength || $[11] !== space || $[12] !== open || $[13] !== restProps || $[14] !== ref || $[15] !== separator) {
+    const rawItems = react.Children.toArray(children).filter(react.isValidElement);
+    let items = rawItems;
     const len = rawItems.length;
-    if (maxLength && len > maxLength) {
-      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
-      return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsxRuntime.jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: open ? collapse : expand, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }) }, "button"), ...rawItems.slice(len - afterLength)];
-    }
-    return rawItems;
-  }, [collapse, expand, maxLength, open, rawItems, space]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Root$8, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
-  ] }, itemIndex)) });
+    if (maxLength && rawItems.length > maxLength) {
+      const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2), t83 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), t9 = open ? collapse : expand;
+      let t10;
+      $[21] !== t9 || $[22] !== open ? (t10 = /* @__PURE__ */ jsxRuntime.jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: t9, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }), $[21] = t9, $[22] = open, $[23] = t10) : t10 = $[23];
+      let t11;
+      $[24] !== t83 || $[25] !== open || $[26] !== t10 ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { constrainSize: !0, content: t83, open, placement: "top", portal: !0, ref: popoverElementRef, children: t10 }, "button"), $[24] = t83, $[25] = open, $[26] = t10, $[27] = t11) : t11 = $[27], items = [...rawItems.slice(0, beforeLength - 1), t11, ...rawItems.slice(len - afterLength)];
+    }
+    T0 = Root$8, t4 = "Breadcrumbs", t5 = restProps, t6 = ref;
+    let t82;
+    $[28] !== space || $[29] !== separator ? (t82 = (item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      itemIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsxRuntime.jsx(Text, { muted: !0, children: "/" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "li", children: item })
+    ] }, itemIndex), $[28] = space, $[29] = separator, $[30] = t82) : t82 = $[30], t7 = items.map(t82), $[9] = children, $[10] = maxLength, $[11] = space, $[12] = open, $[13] = restProps, $[14] = ref, $[15] = separator, $[16] = T0, $[17] = t4, $[18] = t5, $[19] = t6, $[20] = t7;
+  } else
+    T0 = $[16], t4 = $[17], t5 = $[18], t6 = $[19], t7 = $[20];
+  let t8;
+  return $[31] !== T0 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 ? (t8 = /* @__PURE__ */ jsxRuntime.jsx(T0, { "data-ui": t4, ...t5, ref: t6, children: t7 }), $[31] = T0, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8) : t8 = $[36], t8;
 });
 Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
 function dialogStyle({
@@ -5913,8 +5965,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,
@@ -5923,23 +5975,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;
@@ -5948,7 +6015,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)
@@ -5956,9 +6026,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)
@@ -5966,9 +6042,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,
@@ -5977,7 +6062,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,
@@ -5985,14 +6073,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,
@@ -6000,9 +6090,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`
@@ -6486,9 +6580,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;
@@ -6497,19 +6588,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) {
@@ -6630,7 +6734,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;
@@ -6645,31 +6754,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
@@ -6677,10 +6799,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);
@@ -6702,27 +6827,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() {
@@ -7059,61 +7193,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;