@sanity/ui 2.3.6-canary.2 → 2.3.6-canary.3

package/dist/index.compiled.mjs

@@ -1,9 +1,9 @@
 import { buildTheme, createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, getTheme_v2, getScopedTheme } from "@sanity/ui/theme";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { createContext, useContext, forwardRef, useMemo, useId, useState, useEffect, useCallback, Children, isValidElement, cloneElement, useRef, useSyncExternalStore, useImperativeHandle, Component, memo, useReducer, Fragment as Fragment$1, startTransition } from "react";
+import { c } from "react/compiler-runtime";
+import { createContext, useContext, forwardRef, useId, useState, useEffect, Children, isValidElement, cloneElement, useRef, useSyncExternalStore, useImperativeHandle, Component, memo, useMemo, useCallback, useReducer, Fragment as Fragment$1, startTransition } from "react";
 import { isValidElementType } from "react-is";
 import { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, styled, keyframes } from "styled-components";
-import { c } from "react/compiler-runtime";
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, ChevronRightIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
@@ -1117,50 +1117,61 @@ function avatarStrokeStyle() {
 const Root$B = styled.div(responsiveAvatarSizeStyle, avatarStyle.root), Arrow$1 = styled.div(avatarStyle.arrow), BgStroke = styled.ellipse(avatarStyle.bgStroke), Stroke = styled.ellipse(avatarStyle.stroke), Initials = styled.div(avatarStyle.initials), InitialsLabel = styled(Label)({
   color: "inherit"
 }), Image = styled.svg(avatarStyle.image), Avatar = forwardRef(function(props, ref) {
-  const {
+  const $ = c(51);
+  let t0, t1, t2, asProp, animateArrowFrom, arrowPositionProp, src, onImageLoadError, __unstable_hideInnerStroke, initials, restProps, title;
+  $[0] !== props ? ({
     __unstable_hideInnerStroke,
     as: asProp,
-    color = "gray",
+    color: t0,
     src,
     title,
     initials,
     onImageLoadError,
     arrowPosition: arrowPositionProp,
     animateArrowFrom,
-    status = "online",
-    size: sizeProp = 1,
+    status: t1,
+    size: t2,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = asProp, $[5] = animateArrowFrom, $[6] = arrowPositionProp, $[7] = src, $[8] = onImageLoadError, $[9] = __unstable_hideInnerStroke, $[10] = initials, $[11] = restProps, $[12] = title) : (t0 = $[1], t1 = $[2], t2 = $[3], asProp = $[4], animateArrowFrom = $[5], arrowPositionProp = $[6], src = $[7], onImageLoadError = $[8], __unstable_hideInnerStroke = $[9], initials = $[10], restProps = $[11], title = $[12]);
+  const color = t0 === void 0 ? "gray" : t0, status = t1 === void 0 ? "online" : t1, sizeProp = t2 === void 0 ? 1 : t2, {
     avatar
-  } = useTheme_v2(), as = isValidElementType(asProp) ? asProp : "div", size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
-  useEffect(() => {
-    if (arrowPosition === arrowPositionProp) return;
+  } = useTheme_v2(), as = isValidElementType(asProp) ? asProp : "div", size2 = _getArrayProp(sizeProp), _sizeRem = (avatar.sizes[size2[0]] || avatar.sizes[0]).size, _radius = _sizeRem / 2, elementId = useId(), [arrowPosition, setArrowPosition] = useState(animateArrowFrom || arrowPositionProp || "inside"), [imageFailed, setImageFailed] = useState(!1), imageId = `avatar-image-${elementId}`;
+  let t3, t4;
+  $[13] !== arrowPosition || $[14] !== arrowPositionProp ? (t3 = () => {
+    if (arrowPosition === arrowPositionProp)
+      return;
     const raf = requestAnimationFrame(() => setArrowPosition(arrowPositionProp));
     return () => cancelAnimationFrame(raf);
-  }, [arrowPosition, arrowPositionProp]), useEffect(() => {
+  }, t4 = [arrowPosition, arrowPositionProp], $[13] = arrowPosition, $[14] = arrowPositionProp, $[15] = t3, $[16] = t4) : (t3 = $[15], t4 = $[16]), useEffect(t3, t4);
+  let t5, t6;
+  $[17] !== src ? (t5 = () => {
     src && setImageFailed(!1);
-  }, [src]);
-  const handleImageError = useCallback(() => {
+  }, t6 = [src], $[17] = src, $[18] = t5, $[19] = t6) : (t5 = $[18], t6 = $[19]), useEffect(t5, t6);
+  let t7;
+  $[20] !== onImageLoadError ? (t7 = () => {
     setImageFailed(!0), onImageLoadError && onImageLoadError(new Error("Avatar: the image failed to load"));
-  }, [onImageLoadError]), initialsSize = useMemo(() => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), [size2]);
-  return /* @__PURE__ */ jsxs(Root$B, { as, "data-as": typeof as == "string" ? as : void 0, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
-    /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }),
-    !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
-      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx(
-        "image",
-        {
-          href: src,
-          width: "1",
-          height: "1",
-          onError: handleImageError
-        }
-      ) }) }),
-      /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
-      !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
-      /* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
-    ] }),
-    (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) })
-  ] });
+  }, $[20] = onImageLoadError, $[21] = t7) : t7 = $[21];
+  const handleImageError = t7;
+  let t8;
+  $[22] === Symbol.for("react.memo_cache_sentinel") ? (t8 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[22] = t8) : t8 = $[22];
+  const initialsSize = size2.map(t8), t9 = typeof as == "string" ? as : void 0;
+  let t10;
+  $[23] !== color ? (t10 = /* @__PURE__ */ jsx(Arrow$1, { children: /* @__PURE__ */ jsx("svg", { width: "11", height: "7", viewBox: "0 0 11 7", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M6.67948 1.50115L11 7L0 7L4.32052 1.50115C4.92109 0.736796 6.07891 0.736795 6.67948 1.50115Z", fill: color }) }) }), $[23] = color, $[24] = t10) : t10 = $[24];
+  let t11;
+  $[25] !== imageFailed || $[26] !== src || $[27] !== _sizeRem || $[28] !== handleImageError || $[29] !== imageId || $[30] !== _radius || $[31] !== __unstable_hideInnerStroke ? (t11 = !imageFailed && src && /* @__PURE__ */ jsxs(Image, { viewBox: `0 0 ${_sizeRem} ${_sizeRem}`, fill: "none", children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("pattern", { id: imageId, patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx("image", { href: src, width: "1", height: "1", onError: handleImageError }) }) }),
+    /* @__PURE__ */ jsx("circle", { cx: _radius, cy: _radius, r: _radius, fill: `url(#${imageId})` }),
+    !__unstable_hideInnerStroke && /* @__PURE__ */ jsx(BgStroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" }),
+    /* @__PURE__ */ jsx(Stroke, { cx: _radius, cy: _radius, rx: _radius, ry: _radius, vectorEffect: "non-scaling-stroke" })
+  ] }), $[25] = imageFailed, $[26] = src, $[27] = _sizeRem, $[28] = handleImageError, $[29] = imageId, $[30] = _radius, $[31] = __unstable_hideInnerStroke, $[32] = t11) : t11 = $[32];
+  let t12;
+  $[33] !== imageFailed || $[34] !== src || $[35] !== initials || $[36] !== initialsSize ? (t12 = (imageFailed || !src) && initials && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Initials, { children: /* @__PURE__ */ jsx(InitialsLabel, { forwardedAs: "span", size: initialsSize, weight: "medium", children: initials }) }) }), $[33] = imageFailed, $[34] = src, $[35] = initials, $[36] = initialsSize, $[37] = t12) : t12 = $[37];
+  let t13;
+  return $[38] !== as || $[39] !== t9 || $[40] !== restProps || $[41] !== color || $[42] !== size2 || $[43] !== title || $[44] !== arrowPosition || $[45] !== status || $[46] !== ref || $[47] !== t10 || $[48] !== t11 || $[49] !== t12 ? (t13 = /* @__PURE__ */ jsxs(Root$B, { as, "data-as": t9, "data-ui": "Avatar", ...restProps, $color: color, $size: size2, "aria-label": title, "data-arrow-position": arrowPosition, "data-status": status, ref, title, children: [
+    t10,
+    t11,
+    t12
+  ] }), $[38] = as, $[39] = t9, $[40] = restProps, $[41] = color, $[42] = size2, $[43] = title, $[44] = arrowPosition, $[45] = status, $[46] = ref, $[47] = t10, $[48] = t11, $[49] = t12, $[50] = t13) : t13 = $[50], t13;
 });
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
@@ -1199,11 +1210,22 @@ function _avatarCounterBaseStyle(props) {
   `;
 }
 const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle), AvatarCounter = forwardRef(function(props, ref) {
-  const {
+  const $ = c(11), {
     count,
-    size: sizeProp = 1
-  } = props, size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), fontSize2 = useMemo(() => size2.map((s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0), [size2]);
-  return /* @__PURE__ */ jsx(Root$A, { $size: size2, "data-ui": "AvatarCounter", ref, children: /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }) });
+    size: size2
+  } = props, t0 = size2 != null ? size2 : 1;
+  let t1, $size;
+  if ($[0] !== t0) {
+    $size = _getArrayProp(t0);
+    let t22;
+    $[3] === Symbol.for("react.memo_cache_sentinel") ? (t22 = (s) => s === 1 ? 1 : s === 2 ? 3 : s === 3 ? 5 : 0, $[3] = t22) : t22 = $[3], t1 = $size.map(t22), $[0] = t0, $[1] = t1, $[2] = $size;
+  } else
+    t1 = $[1], $size = $[2];
+  const fontSize2 = t1;
+  let t2;
+  $[4] !== fontSize2 || $[5] !== count ? (t2 = /* @__PURE__ */ jsx(Label, { as: "span", size: fontSize2, weight: "medium", children: count }), $[4] = fontSize2, $[5] = count, $[6] = t2) : t2 = $[6];
+  let t3;
+  return $[7] !== $size || $[8] !== ref || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsx(Root$A, { $size, "data-ui": "AvatarCounter", ref, children: t2 }), $[7] = $size, $[8] = ref, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
 }), BASE_STYLES = css`
   white-space: nowrap;
 
@@ -1233,19 +1255,34 @@ function responsiveAvatarStackSizeStyle(props) {
   });
 }
 const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = forwardRef(function(props, ref) {
-  const {
+  const $ = c(31);
+  let t0, t1, childrenProp, restProps;
+  $[0] !== props ? ({
     children: childrenProp,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 1,
+    maxLength: t0,
+    size: t1,
     ...restProps
-  } = props, children = useMemo(() => Children.toArray(childrenProp).filter(isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useMemo(() => _getArrayProp(sizeProp), [sizeProp]), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */ jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
-    len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }),
-    len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
-    visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = childrenProp, $[4] = restProps) : (t0 = $[1], t1 = $[2], childrenProp = $[3], restProps = $[4]);
+  const maxLengthProp = t0 === void 0 ? 4 : t0, sizeProp = t1 === void 0 ? 1 : t1;
+  let T0, t2, t3, t4, t5, t6, t7, t8;
+  if ($[5] !== childrenProp || $[6] !== maxLengthProp || $[7] !== sizeProp || $[8] !== restProps || $[9] !== ref) {
+    const children = Children.toArray(childrenProp).filter(isValidElement), maxLength = Math.max(maxLengthProp, 0);
+    let t92, t10;
+    $[18] !== sizeProp ? (t10 = _getArrayProp(sizeProp), $[18] = sizeProp, $[19] = t10) : t10 = $[19], t92 = t10;
+    const size2 = t92, len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
+    T0 = Root$z, t2 = "AvatarStack", t3 = restProps, t4 = ref, t5 = size2, t6 = len === 0 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: len, size: size2 }) }), t7 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(AvatarCounter, { count: extraCount, size: size2 }) });
+    let t11;
+    $[20] !== size2 ? (t11 = (child, childIndex) => /* @__PURE__ */ jsx("div", { children: cloneElement(child, {
       size: size2
-    }) }, String(childIndex)))
-  ] });
+    }) }, String(childIndex)), $[20] = size2, $[21] = t11) : t11 = $[21], t8 = visibleChildren.map(t11), $[5] = childrenProp, $[6] = maxLengthProp, $[7] = sizeProp, $[8] = restProps, $[9] = ref, $[10] = T0, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5, $[15] = t6, $[16] = t7, $[17] = t8;
+  } else
+    T0 = $[10], t2 = $[11], t3 = $[12], t4 = $[13], t5 = $[14], t6 = $[15], t7 = $[16], t8 = $[17];
+  let t9;
+  return $[22] !== T0 || $[23] !== t2 || $[24] !== t3 || $[25] !== t4 || $[26] !== t5 || $[27] !== t6 || $[28] !== t7 || $[29] !== t8 ? (t9 = /* @__PURE__ */ jsxs(T0, { "data-ui": t2, ...t3, ref: t4, $size: t5, children: [
+    t6,
+    t7,
+    t8
+  ] }), $[22] = T0, $[23] = t2, $[24] = t3, $[25] = t4, $[26] = t5, $[27] = t6, $[28] = t7, $[29] = t8, $[30] = t9) : t9 = $[30], t9;
 }), Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = forwardRef(function(props, ref) {
   const $ = c(109);
   let t0, t1, t2, t3, column, columnStart, columnEnd, flex, height, marginX, marginY, marginTop, marginRight, marginBottom, marginLeft, overflow, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, row, rowStart, rowEnd, sizing, restProps;
@@ -3335,19 +3372,27 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = forwardRef(function(props, forwardedRef) {
-  const theme = useTheme_v2(), {
+  var _a;
+  const $ = c(12), theme = useTheme_v2();
+  let _media, restProps, children;
+  $[0] !== props ? ({
     children,
-    media = theme.media,
+    media: _media,
     ...restProps
-  } = props, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element), width = useMemo(() => {
-    var _a;
-    return (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
-  }, [elementSize]), max = useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = useMemo(() => findMinBreakpoints(media, width), [media, width]);
-  useImperativeHandle(forwardedRef, () => ref.current);
-  const setRef = useCallback((el) => {
+  } = props, $[0] = props, $[1] = _media, $[2] = restProps, $[3] = children) : (_media = $[1], restProps = $[2], children = $[3]);
+  const media = _media != null ? _media : theme.media, ref = useRef(null), [element, setElement] = useState(null), elementSize = useElementSize(element);
+  let t0;
+  t0 = (_a = elementSize == null ? void 0 : elementSize.border.width) != null ? _a : window.innerWidth;
+  const width = t0, max = findMaxBreakpoints(media, width), min = findMinBreakpoints(media, width);
+  let t1;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => ref.current, $[4] = t1) : t1 = $[4], useImperativeHandle(forwardedRef, t1);
+  let t2;
+  $[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = (el) => {
     ref.current = el, setElement(el);
-  }, []);
-  return /* @__PURE__ */ 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 });
+  }, $[5] = t2) : t2 = $[5];
+  const setRef = t2, t3 = max.length ? max.join(" ") : void 0, t4 = min.length ? min.join(" ") : void 0;
+  let t5;
+  return $[6] !== restProps || $[7] !== t3 || $[8] !== t4 || $[9] !== setRef || $[10] !== children ? (t5 = /* @__PURE__ */ jsx("div", { "data-ui": "ElementQuery", ...restProps, "data-eq-max": t3, "data-eq-min": t4, ref: setRef, children }), $[6] = restProps, $[7] = t3, $[8] = t4, $[9] = setRef, $[10] = children, $[11] = t5) : t5 = $[11], t5;
 });
 var __defProp = Object.defineProperty, __defNormalProp = (obj, key2, value) => key2 in obj ? __defProp(obj, key2, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key2] = value, __publicField = (obj, key2, value) => __defNormalProp(obj, key2 + "", value);
 class ErrorBoundary extends Component {
@@ -3477,39 +3522,56 @@ function _isScrollable(el) {
 }
 function LayerProvider(props) {
   var _a;
-  const {
+  const $ = c(22), {
     children,
-    zOffset: zOffsetProp = 0
-  } = props, parentContextValue = useContext(LayerContext), parent = parentContextValue && getLayerContext(parentContextValue), parentRegisterChild = parent == null ? void 0 : parent.registerChild, level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1, zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex], [, setChildLayers] = useState({}), [size2, setSize] = useState(0), isTopLayer = size2 === 0, registerChild = useCallback((childLevel) => {
+    zOffset: t0
+  } = props, zOffsetProp = t0 === void 0 ? 0 : t0, parentContextValue = useContext(LayerContext), parentRegisterChild = useContext(LayerContextRegisterChild), parent = parentContextValue && getLayerContext(parentContextValue), level = ((_a = parent == null ? void 0 : parent.level) != null ? _a : 0) + 1;
+  let t1, t2;
+  $[0] !== zOffsetProp ? (t2 = _getArrayProp(zOffsetProp), $[0] = zOffsetProp, $[1] = t2) : t2 = $[1], t1 = t2;
+  const zOffset = t1, maxMediaIndex = zOffset.length - 1, mediaIndex = Math.min(useMediaIndex(), maxMediaIndex), zIndex = parent ? parent.zIndex + zOffset[mediaIndex] : zOffset[mediaIndex];
+  let t3;
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {}, $[2] = t3) : t3 = $[2];
+  const [childLayers, setChildLayers] = useState(t3);
+  let t4, t5;
+  $[3] !== childLayers ? (t5 = Object.keys(childLayers), $[3] = childLayers, $[4] = t5) : t5 = $[4], t4 = t5.length;
+  const size2 = t4, isTopLayer = size2 === 0;
+  let t6;
+  $[5] !== parentRegisterChild ? (t6 = (childLevel) => {
     const parentDispose = parentRegisterChild == null ? void 0 : parentRegisterChild(childLevel);
-    return childLevel !== void 0 ? setChildLayers((state) => {
+    return setChildLayers((state) => {
       var _a2;
-      const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0, nextState = {
+      const prevLen = (_a2 = state[childLevel]) != null ? _a2 : 0;
+      return {
         ...state,
         [childLevel]: prevLen + 1
       };
-      return setSize(Object.keys(nextState).length), nextState;
-    }) : setSize((v) => v + 1), () => {
-      childLevel !== void 0 ? setChildLayers((state_0) => {
+    }), () => {
+      setChildLayers((state_0) => {
         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;
-      }) : setSize((v_0) => v_0 - 1), parentDispose == null || parentDispose();
+        return nextState_0[childLevel] === 1 ? delete nextState_0[childLevel] : nextState_0[childLevel] = nextState_0[childLevel] - 1, nextState_0;
+      }), parentDispose == null || parentDispose();
     };
-  }, [parentRegisterChild]);
-  useEffect(() => parentRegisterChild == null ? void 0 : parentRegisterChild(level), [level, parentRegisterChild]);
-  const value = useMemo(() => ({
+  }, $[5] = parentRegisterChild, $[6] = t6) : t6 = $[6];
+  const registerChild = t6;
+  let t7, t8;
+  $[7] !== parentRegisterChild || $[8] !== level ? (t7 = () => parentRegisterChild == null ? void 0 : parentRegisterChild(level), t8 = [level, parentRegisterChild], $[7] = parentRegisterChild, $[8] = level, $[9] = t7, $[10] = t8) : (t7 = $[9], t8 = $[10]), useEffect(t7, t8);
+  let t9, t10;
+  $[11] !== isTopLayer || $[12] !== level || $[13] !== size2 || $[14] !== zIndex ? (t10 = {
     version: 0,
     isTopLayer,
     level,
-    registerChild,
     size: size2,
     zIndex
-  }), [isTopLayer, level, registerChild, size2, zIndex]);
-  return /* @__PURE__ */ jsx(LayerContext.Provider, { value, children });
+  }, $[11] = isTopLayer, $[12] = level, $[13] = size2, $[14] = zIndex, $[15] = t10) : t10 = $[15], t9 = t10;
+  const value = t9;
+  let t11;
+  $[16] !== registerChild || $[17] !== children ? (t11 = /* @__PURE__ */ jsx(LayerContextRegisterChild.Provider, { value: registerChild, children }), $[16] = registerChild, $[17] = children, $[18] = t11) : t11 = $[18];
+  let t12;
+  return $[19] !== value || $[20] !== t11 ? (t12 = /* @__PURE__ */ jsx(LayerContext.Provider, { value, children: t11 }), $[19] = value, $[20] = t11, $[21] = t12) : t12 = $[21], t12;
 }
-const Root$j = styled.div({
+const LayerContextRegisterChild = createContext(null), Root$j = styled.div({
   position: "relative"
 }), LayerChildren = forwardRef(function(props, forwardedRef) {
   const $ = c(23);
@@ -3911,42 +3973,61 @@ const MotionCard$1 = styled(motion(Card))`
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(forwardRef(function(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const {
+  var _a, _b, _c2, _d, _e, _f, _g, _h, _i;
+  const $ = c(99), {
     container,
     layer
-  } = useTheme_v2(), boundaryElementContext = useBoundaryElement(), {
-    __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    animate: _animate = !1,
-    arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext.element,
-    children: childProp,
-    constrainSize = !1,
-    content,
-    disabled,
-    fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
-    matchReferenceWidth,
-    floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
-    // 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 = (_d = props.boundaryElement) != null ? _d : boundaryElementContext.element,
-    referenceElement,
-    scheme,
-    shadow: shadowProp = 3,
-    tone = "inherit",
-    width: widthProp = "auto",
-    zOffset: zOffsetProp = layer.popover.zOffset,
-    updateRef,
-    ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border, padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp]), shadow = useMemo(() => _getArrayProp(shadowProp), [shadowProp]), widthArrayProp = useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), ref = useRef(null), arrowRef = useRef(null), rootBoundary = "viewport";
-  useImperativeHandle(forwardedRef, () => ref.current);
+  } = useTheme_v2(), boundaryElementContext = useBoundaryElement();
+  let t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10, _boundaryElement, _referenceBoundary, _floatingBoundary, _fallbackPlacements, _zOffset, paddingProp, open, matchReferenceWidth, updateRef, children, referenceElement, 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,
+      ...t37
+    } = props;
+    t0 = t112, t1 = t122, t2 = t132, _boundaryElement = t142, children = 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, _zOffset = t352, updateRef = t362, restProps = t37, $[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] = _referenceBoundary, $[14] = _floatingBoundary, $[15] = _fallbackPlacements, $[16] = _zOffset, $[17] = paddingProp, $[18] = open, $[19] = matchReferenceWidth, $[20] = updateRef, $[21] = children, $[22] = referenceElement, $[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], _referenceBoundary = $[13], _floatingBoundary = $[14], _fallbackPlacements = $[15], _zOffset = $[16], paddingProp = $[17], open = $[18], matchReferenceWidth = $[19], updateRef = $[20], children = $[21], referenceElement = $[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 != null ? _boundaryElement : boundaryElementContext.element, referenceBoundary = (_a = _referenceBoundary != null ? _referenceBoundary : props.boundaryElement) != null ? _a : boundaryElementContext.element, floatingBoundary = (_b = _floatingBoundary != null ? _floatingBoundary : props.boundaryElement) != null ? _b : boundaryElementContext.element, fallbackPlacements = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS$1[(_c2 = props.placement) != null ? _c2 : "bottom"], zOffsetProp = _zOffset != null ? _zOffset : layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = (_d = useElementSize(boundaryElement)) == null ? void 0 : _d.border;
+  let t11, t12;
+  $[28] !== paddingProp ? (t12 = _getArrayProp(paddingProp), $[28] = paddingProp, $[29] = t12) : t12 = $[29], t11 = t12;
+  const padding = t11;
+  let t13, t14;
+  $[30] !== radiusProp ? (t14 = _getArrayProp(radiusProp), $[30] = radiusProp, $[31] = t14) : t14 = $[31], t13 = t14;
+  const radius = t13;
+  let t15, t16;
+  $[32] !== shadowProp ? (t16 = _getArrayProp(shadowProp), $[32] = shadowProp, $[33] = t16) : t16 = $[33], t15 = t16;
+  const shadow = t15, widthArrayProp = _getArrayProp(widthProp);
+  let t17, t18;
+  $[34] !== zOffsetProp ? (t18 = _getArrayProp(zOffsetProp), $[34] = zOffsetProp, $[35] = t18) : t18 = $[35], t17 = t18;
+  const zOffset = t17, ref = useRef(null), arrowRef = useRef(null);
+  let t19;
+  $[36] === Symbol.for("react.memo_cache_sentinel") ? (t19 = () => ref.current, $[36] = t19) : t19 = $[36], useImperativeHandle(forwardedRef, t19);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0, width = calcCurrentWidth({
     container,
     mediaIndex,
@@ -3965,48 +4046,64 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
   const referenceWidthRef = useRef();
   useEffect(() => {
     const floatingElement = ref.current;
-    if (!open || !floatingElement) return;
+    if (!open || !floatingElement)
+      return;
     const referenceWidth = referenceWidthRef.current;
     matchReferenceWidth ? referenceWidth !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
   }, [width, matchReferenceWidth, maxWidth, open]);
-  const middleware = useMemo(() => {
-    const ret = [];
-    return (constrainSize || preventOverflow) && ret.push(flip({
-      boundary: floatingBoundary || void 0,
+  let t20;
+  const ret = [];
+  if (constrainSize || preventOverflow) {
+    const t212 = floatingBoundary || void 0;
+    let t222;
+    $[37] !== t212 || $[38] !== fallbackPlacements ? (t222 = flip({
+      boundary: t212,
       fallbackPlacements,
       padding: DEFAULT_POPOVER_PADDING,
-      rootBoundary
-    })), ret.push(offset({
-      mainAxis: DEFAULT_POPOVER_DISTANCE
-    })), (constrainSize || matchReferenceWidth) && ret.push(size({
-      apply({
+      rootBoundary: "viewport"
+    }), $[37] = t212, $[38] = fallbackPlacements, $[39] = t222) : t222 = $[39], ret.push(t222);
+  }
+  let t21;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel") ? (t21 = offset({
+    mainAxis: DEFAULT_POPOVER_DISTANCE
+  }), $[40] = t21) : t21 = $[40], ret.push(t21), (constrainSize || matchReferenceWidth) && ret.push(size({
+    apply(t222) {
+      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 != null ? _maxWidth : 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
-      },
-      boundaryElement: floatingBoundary || void 0,
-      constrainSize,
-      margins,
-      matchReferenceWidth,
-      padding: DEFAULT_POPOVER_PADDING
-    })), preventOverflow && ret.push(shift({
-      boundary: floatingBoundary || void 0,
-      rootBoundary,
-      padding: DEFAULT_POPOVER_PADDING
-    })), arrowProp && ret.push(arrow({
-      element: arrowRef,
+      } = t222;
+      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 != null ? _maxWidth : 1 / 0)}px`, elements.floating.style.maxHeight = `${availableHeight}px`);
+    },
+    boundaryElement: floatingBoundary || void 0,
+    constrainSize,
+    margins,
+    matchReferenceWidth,
+    padding: DEFAULT_POPOVER_PADDING
+  })), preventOverflow) {
+    const t222 = floatingBoundary || void 0;
+    let t232;
+    $[41] !== t222 ? (t232 = shift({
+      boundary: t222,
+      rootBoundary: "viewport",
       padding: DEFAULT_POPOVER_PADDING
-    })), animate && ret.push(origin), ret.push(hide({
-      boundary: referenceBoundary || void 0,
-      padding: DEFAULT_POPOVER_PADDING,
-      strategy: "referenceHidden"
-    })), ret;
-  }, [animate, arrowProp, constrainSize, fallbackPlacements, floatingBoundary, margins, matchReferenceWidth, preventOverflow, referenceBoundary]), {
+    }), $[41] = t222, $[42] = t232) : t232 = $[42], ret.push(t232);
+  }
+  arrowProp && ret.push(arrow({
+    element: arrowRef,
+    padding: DEFAULT_POPOVER_PADDING
+  })), animate && ret.push(origin);
+  const t22 = referenceBoundary || void 0;
+  let t23;
+  $[43] !== t22 ? (t23 = hide({
+    boundary: t22,
+    padding: DEFAULT_POPOVER_PADDING,
+    strategy: "referenceHidden"
+  }), $[43] = t22, $[44] = t23) : t23 = $[44], ret.push(t23), t20 = ret;
+  const middleware = t20, {
     x,
     y,
     middlewareData,
@@ -4018,30 +4115,54 @@ const Popover = memo(forwardRef(function(props, forwardedRef) {
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
-  }), referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden, arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x, arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y, originX = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originX, originY = (_j = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _j.originY, setArrow = useCallback((arrowEl) => {
+  }), referenceHidden = (_e = middlewareData.hide) == null ? void 0 : _e.referenceHidden, arrowX = (_f = middlewareData.arrow) == null ? void 0 : _f.x, arrowY = (_g = middlewareData.arrow) == null ? void 0 : _g.y, originX = (_h = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _h.originX, originY = (_i = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _i.originY;
+  let t24;
+  $[45] === Symbol.for("react.memo_cache_sentinel") ? (t24 = (arrowEl) => {
     arrowRef.current = arrowEl;
-  }, []), setFloating = useCallback((node) => {
+  }, $[45] = t24) : t24 = $[45];
+  const setArrow = t24;
+  let t25;
+  $[46] !== refs ? (t25 = (node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = useCallback((node_0) => {
-    refs.setReference(node_0);
-    const childRef = childProp == null ? void 0 : childProp.ref;
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = useMemo(() => !childProp || referenceElement ? null : cloneElement(childProp, {
-    ref: setReference
-  }), [childProp, referenceElement, setReference]);
-  if (useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), useEffect(() => {
-    child || refs.setReference(referenceElement || null);
-  }, [referenceElement, refs, child]), disabled)
-    return childProp || /* @__PURE__ */ jsx(Fragment, {});
-  const popover = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(PopoverCard, { ...restProps, __unstable_margins: margins, animate, arrow: arrowProp, arrowRef: 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 }) });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ConditionalWrapper, { condition: animate, wrapper: (children) => /* @__PURE__ */ jsx(AnimatePresence, { children }), children: open && /* @__PURE__ */ jsx(ConditionalWrapper, { condition: !!portal, wrapper: (children_0) => /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: children_0 }), children: popover }) }),
-    child
-  ] });
+  }, $[46] = refs, $[47] = t25) : t25 = $[47];
+  const setFloating = t25;
+  let t26, t27;
+  $[48] !== update ? (t26 = () => update, t27 = [update], $[48] = update, $[49] = t26, $[50] = t27) : (t26 = $[49], t27 = $[50]), useImperativeHandle(updateRef, t26, t27);
+  let t28, t29;
+  if ($[51] !== children || $[52] !== refs || $[53] !== referenceElement ? (t28 = () => {
+    children || refs.setReference(referenceElement || null);
+  }, t29 = [children, referenceElement, refs], $[51] = children, $[52] = refs, $[53] = referenceElement, $[54] = t28, $[55] = t29) : (t28 = $[54], t29 = $[55]), useEffect(t28, t29), disabled) {
+    let t302;
+    return $[56] !== children ? (t302 = children || /* @__PURE__ */ jsx(Fragment, {}), $[56] = children, $[57] = t302) : t302 = $[57], t302;
+  }
+  let t30;
+  $[58] !== restProps || $[59] !== margins || $[60] !== animate || $[61] !== arrowProp || $[62] !== setArrow || $[63] !== arrowX || $[64] !== arrowY || $[65] !== referenceHidden || $[66] !== overflow || $[67] !== padding || $[68] !== placement || $[69] !== radius || $[70] !== setFloating || $[71] !== scheme || $[72] !== shadow || $[73] !== originX || $[74] !== originY || $[75] !== strategy || $[76] !== tone || $[77] !== x || $[78] !== y || $[79] !== content ? (t30 = /* @__PURE__ */ 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 }), $[58] = restProps, $[59] = margins, $[60] = animate, $[61] = arrowProp, $[62] = setArrow, $[63] = arrowX, $[64] = arrowY, $[65] = referenceHidden, $[66] = overflow, $[67] = padding, $[68] = placement, $[69] = radius, $[70] = setFloating, $[71] = scheme, $[72] = shadow, $[73] = originX, $[74] = originY, $[75] = strategy, $[76] = tone, $[77] = x, $[78] = y, $[79] = content, $[80] = t30) : t30 = $[80];
+  let t31;
+  $[81] !== zOffset || $[82] !== t30 ? (t31 = /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: t30 }), $[81] = zOffset, $[82] = t30, $[83] = t31) : t31 = $[83];
+  const popover = t31;
+  let t32;
+  $[84] === Symbol.for("react.memo_cache_sentinel") ? (t32 = (children_0) => /* @__PURE__ */ jsx(AnimatePresence, { children: children_0 }), $[84] = t32) : t32 = $[84];
+  let t33;
+  $[85] !== open || $[86] !== portal || $[87] !== popover ? (t33 = open && /* @__PURE__ */ jsx(ConditionalWrapper, { condition: !!portal, wrapper: (children_1) => /* @__PURE__ */ jsx(Portal, { __unstable_name: typeof portal == "string" ? portal : void 0, children: children_1 }), children: popover }), $[85] = open, $[86] = portal, $[87] = popover, $[88] = t33) : t33 = $[88];
+  let t34;
+  $[89] !== animate || $[90] !== t33 ? (t34 = /* @__PURE__ */ jsx(ConditionalWrapper, { condition: animate, wrapper: t32, children: t33 }), $[89] = animate, $[90] = t33, $[91] = t34) : t34 = $[91];
+  let t35;
+  $[92] !== children || $[93] !== referenceElement || $[94] !== refs ? (t35 = children && !referenceElement && /* @__PURE__ */ jsx("div", { ref: (node_0) => {
+    logDeprecatedWarning(), refs.setReference(node_0);
+  }, style: {
+    display: "contents"
+  }, children }), $[92] = children, $[93] = referenceElement, $[94] = refs, $[95] = t35) : t35 = $[95];
+  let t36;
+  return $[96] !== t34 || $[97] !== t35 ? (t36 = /* @__PURE__ */ jsxs(Fragment, { children: [
+    t34,
+    t35
+  ] }), $[96] = t34, $[97] = t35, $[98] = t36) : t36 = $[98], t36;
 }));
 Popover.displayName = "Popover";
+let didWarn = !1;
+function logDeprecatedWarning() {
+  didWarn || (console.warn("Popover: Please use the `referenceElement` prop instead of passing a children."), didWarn = !0);
+}
 function radioBaseStyle() {
   return css`
     position: relative;
@@ -4901,29 +5022,29 @@ const Root$a = styled(Layer)`
   $maxWidth
 }) => $maxWidth}px;
 `, Tooltip = forwardRef(function(props, forwardedRef) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f;
   const boundaryElementContext = useBoundaryElement(), {
     layer
   } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"],
+    fallbackPlacements: _fallbackPlacements,
     padding = 2,
     placement: placementProp = "bottom",
     portal: portalProp,
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset: _zOffset,
     delay,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useMemo(() => _getArrayProp(fallbackPlacementsProp), [fallbackPlacementsProp]), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
+  } = props, zOffset = _zOffset != null ? _zOffset : layer.tooltip.zOffset, fallbackPlacementsProp = _fallbackPlacements != null ? _fallbackPlacements : DEFAULT_FALLBACK_PLACEMENTS[(_a = props.placement) != null ? _a : "bottom"], boundaryElement = _boundaryElement != null ? _boundaryElement : boundaryElementContext == null ? void 0 : boundaryElementContext.element, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useMemo(() => _getArrayProp(fallbackPlacementsProp), [fallbackPlacementsProp]), ref = useRef(null), [referenceElement, setReferenceElement] = useState(null), arrowRef = useRef(null), rootBoundary = "viewport";
   useImperativeHandle(forwardedRef, () => ref.current);
-  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_c = portal.elements) == null ? void 0 : _c[portalProp]) || null : portal.element, documentBodyOffsetWidth = useSyncExternalStore(
+  const portal = usePortal(), portalElement = typeof portalProp == "string" ? ((_b = portal.elements) == null ? void 0 : _b[portalProp]) || null : portal.element, documentBodyOffsetWidth = useSyncExternalStore(
     emptySubscribe,
     () => document.body.offsetWidth,
     // We don't actually know what the width of the body is during SSR, so we'll just assume it's 800px or larger
@@ -4958,7 +5079,7 @@ const Root$a = styled(Layer)`
     middleware,
     placement: placementProp,
     whileElementsMounted: autoUpdate
-  }), arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x, arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y, originX = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originX, originY = (_g = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _g.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
+  }), arrowX = (_c = middlewareData.arrow) == null ? void 0 : _c.x, arrowY = (_d = middlewareData.arrow) == null ? void 0 : _d.y, originX = (_e = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _e.originX, originY = (_f = middlewareData["@sanity/ui/origin"]) == null ? void 0 : _f.originY, tooltipId = useId(), [isOpen, setIsOpen] = useDelayedState(!1), delayGroupContext = useTooltipDelayGroup(), showTooltip = isOpen || (delayGroupContext == null ? void 0 : delayGroupContext.openTooltipId) === tooltipId, isInsideGroup = delayGroupContext !== null, openDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.open) || 0, closeDelayProp = typeof delay == "number" ? delay : (delay == null ? void 0 : delay.close) || 0, openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp, closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp, handleIsOpenChange = useCallback((open, immediate) => {
     if (isInsideGroup)
       if (open) {
         const groupedOpenDelay = immediate ? 0 : openDelay;
@@ -4990,9 +5111,9 @@ const Root$a = styled(Layer)`
   }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
   useEffect(() => {
     if (!showTooltip) return;
-    function handleWindowMouseMove(event) {
+    const handleWindowMouseMove = (event) => {
       referenceElement && (referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target) || (handleIsOpenChange(!1), window.removeEventListener("mousemove", handleWindowMouseMove)));
-    }
+    };
     return window.addEventListener("mousemove", handleWindowMouseMove), () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
@@ -5160,7 +5281,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     value: value_0
   }) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", children: value_0 }) }), [fontSize2, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
   useImperativeHandle(forwardedRef, () => inputElementRef.current);
-  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
+  const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = _getArrayProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = (event) => {
     setTimeout(() => {
       if (popoverMouseWithinRef.current)
         return;
@@ -5177,13 +5298,13 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
         type: "root/blur"
       }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
     }, 0);
-  }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = useCallback((event_0) => {
+  }, handleRootFocus = (event_0) => {
     const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = (listBoxElement == null ? void 0 : listBoxElement.contains(focusedElement)) || !1;
     listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
       type: "root/setListFocused",
       listFocused: listFocused_0
     }));
-  }, []), handleOptionSelect = useCallback((v) => {
+  }, handleOptionSelect = useCallback((v) => {
     var _a;
     dispatch({
       type: "value/change",
@@ -5525,13 +5646,15 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
   return $[47] !== width || $[48] !== t18 ? (t19 = /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t18 }), $[47] = width, $[48] = t18, $[49] = t19) : t19 = $[49], t19;
 }), Dialog = forwardRef(function(props, ref) {
   var _a;
-  const dialog = useDialog(), {
+  const $ = c(75), dialog = useDialog(), {
     layer
-  } = useTheme_v2(), {
-    __unstable_autoFocus: autoFocus = !0,
-    __unstable_hideCloseButton: hideCloseButton = !1,
-    cardRadius: cardRadiusProp = 4,
-    cardShadow = 3,
+  } = useTheme_v2();
+  let t0, t1, t2, t3, t4, t5, t6, _position, _zOffset, portalProp, onFocus, id, contentRef, footer, header, onClickOutside, onClose, scheme, children, restProps, onActivate;
+  $[0] !== props ? ({
+    __unstable_autoFocus: t0,
+    __unstable_hideCloseButton: t1,
+    cardRadius: t2,
+    cardShadow: t3,
     children,
     contentRef,
     footer,
@@ -5541,15 +5664,33 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 3,
+    padding: t4,
     portal: portalProp,
-    position: positionProp = dialog.position || "fixed",
+    position: _position,
     scheme,
-    width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
-    animate: _animate = !1,
+    width: t5,
+    zOffset: _zOffset,
+    animate: t6,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useMemo(() => _getArrayProp(cardRadiusProp), [cardRadiusProp]), padding = useMemo(() => _getArrayProp(paddingProp), [paddingProp]), position = useMemo(() => _getArrayProp(positionProp), [positionProp]), width = useMemo(() => _getArrayProp(widthProp), [widthProp]), zOffset = useMemo(() => _getArrayProp(zOffsetProp), [zOffsetProp]), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null), handleFocus = useCallback((event) => {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = _position, $[9] = _zOffset, $[10] = portalProp, $[11] = onFocus, $[12] = id, $[13] = contentRef, $[14] = footer, $[15] = header, $[16] = onClickOutside, $[17] = onClose, $[18] = scheme, $[19] = children, $[20] = restProps, $[21] = onActivate) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], t6 = $[7], _position = $[8], _zOffset = $[9], portalProp = $[10], onFocus = $[11], id = $[12], contentRef = $[13], footer = $[14], header = $[15], onClickOutside = $[16], onClose = $[17], scheme = $[18], children = $[19], restProps = $[20], onActivate = $[21]);
+  const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _position != null ? _position : dialog.position || "fixed", zOffsetProp = _zOffset != null ? _zOffset : dialog.zOffset || layer.dialog.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? ((_a = portal.elements) == null ? void 0 : _a[portalProp]) || null : portal.element, boundaryElement = useBoundaryElement().element;
+  let t7, t8;
+  $[22] !== cardRadiusProp ? (t8 = _getArrayProp(cardRadiusProp), $[22] = cardRadiusProp, $[23] = t8) : t8 = $[23], t7 = t8;
+  const cardRadius = t7;
+  let t9, t10;
+  $[24] !== paddingProp ? (t10 = _getArrayProp(paddingProp), $[24] = paddingProp, $[25] = t10) : t10 = $[25], t9 = t10;
+  const padding = t9;
+  let t11, t12;
+  $[26] !== positionProp ? (t12 = _getArrayProp(positionProp), $[26] = positionProp, $[27] = t12) : t12 = $[27], t11 = t12;
+  const position = t11;
+  let t13, t14;
+  $[28] !== widthProp ? (t14 = _getArrayProp(widthProp), $[28] = widthProp, $[29] = t14) : t14 = $[29], t13 = t14;
+  const width = t13;
+  let t15, t16;
+  $[30] !== zOffsetProp ? (t16 = _getArrayProp(zOffsetProp), $[30] = zOffsetProp, $[31] = t16) : t16 = $[31], t15 = t16;
+  const zOffset = t15, preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
+  let t17;
+  $[32] !== onFocus ? (t17 = (event) => {
     onFocus == null || onFocus(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -5561,7 +5702,10 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
       return;
     }
     isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-  }, [onFocus]), labelId = `${id}_label`, rootClickTimeoutRef = useRef(), handleRootClick = useCallback(() => {
+  }, $[32] = onFocus, $[33] = t17) : t17 = $[33];
+  const handleFocus = t17, labelId = `${id}_label`, rootClickTimeoutRef = useRef();
+  let t18;
+  $[34] !== boundaryElement || $[35] !== portalElement ? (t18 = () => {
     rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement;
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -5574,12 +5718,22 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
         target_0.focus();
       }
     }, 0);
-  }, [boundaryElement, portalElement]);
-  return /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: /* @__PURE__ */ jsxs(Root$7, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
-    /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }),
-    /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, width, children }),
-    /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 })
-  ] }) });
+  }, $[34] = boundaryElement, $[35] = portalElement, $[36] = t18) : t18 = $[36];
+  const handleRootClick = t18;
+  let t19;
+  $[37] !== preDivRef ? (t19 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[37] = preDivRef, $[38] = t19) : t19 = $[38];
+  let t20;
+  $[39] !== autoFocus || $[40] !== hideCloseButton || $[41] !== contentRef || $[42] !== footer || $[43] !== header || $[44] !== id || $[45] !== onClickOutside || $[46] !== onClose || $[47] !== portalProp || $[48] !== cardRadius || $[49] !== cardRef || $[50] !== scheme || $[51] !== cardShadow || $[52] !== width || $[53] !== children ? (t20 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, width, children }), $[39] = autoFocus, $[40] = hideCloseButton, $[41] = contentRef, $[42] = footer, $[43] = header, $[44] = id, $[45] = onClickOutside, $[46] = onClose, $[47] = portalProp, $[48] = cardRadius, $[49] = cardRef, $[50] = scheme, $[51] = cardShadow, $[52] = width, $[53] = children, $[54] = t20) : t20 = $[54];
+  let t21;
+  $[55] !== postDivRef ? (t21 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[55] = postDivRef, $[56] = t21) : t21 = $[56];
+  let t22;
+  $[57] !== restProps || $[58] !== animate || $[59] !== padding || $[60] !== position || $[61] !== labelId || $[62] !== id || $[63] !== onActivate || $[64] !== handleRootClick || $[65] !== handleFocus || $[66] !== ref || $[67] !== zOffset || $[68] !== t19 || $[69] !== t20 || $[70] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Root$7, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
+    t19,
+    t20,
+    t21
+  ] }), $[57] = restProps, $[58] = animate, $[59] = padding, $[60] = position, $[61] = labelId, $[62] = id, $[63] = onActivate, $[64] = handleRootClick, $[65] = handleFocus, $[66] = ref, $[67] = zOffset, $[68] = t19, $[69] = t20, $[70] = t21, $[71] = t22) : t22 = $[71];
+  let t23;
+  return $[72] !== portalProp || $[73] !== t22 ? (t23 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t22 }), $[72] = portalProp, $[73] = t22, $[74] = t23) : t23 = $[74], t23;
 });
 function DialogProvider(props) {
   const $ = c(6), {
@@ -5813,28 +5967,41 @@ const Root$5 = styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = forwardRef(function(props, forwardedRef) {
+  const $ = c(58);
+  let t0, t1, _shouldFocus, onKeyDown, originElement, onItemSelect, onClickOutside, onEscape, registerElement, onItemClick, children, restProps;
+  if ($[0] !== props) {
+    const {
+      children: t22,
+      focusFirst,
+      focusLast,
+      onClickOutside: t32,
+      onEscape: t42,
+      onItemClick: t52,
+      onItemSelect: t62,
+      onKeyDown: t72,
+      originElement: t82,
+      padding: t92,
+      registerElement: t102,
+      shouldFocus: t112,
+      space: t122,
+      ...t132
+    } = props;
+    children = t22, onClickOutside = t32, onEscape = t42, onItemClick = t52, onItemSelect = t62, onKeyDown = t72, originElement = t82, t0 = t92, registerElement = t102, _shouldFocus = t112, t1 = t122, restProps = t132, $[0] = props, $[1] = t0, $[2] = t1, $[3] = _shouldFocus, $[4] = onKeyDown, $[5] = originElement, $[6] = onItemSelect, $[7] = onClickOutside, $[8] = onEscape, $[9] = registerElement, $[10] = onItemClick, $[11] = children, $[12] = restProps;
+  } else
+    t0 = $[1], t1 = $[2], _shouldFocus = $[3], onKeyDown = $[4], originElement = $[5], onItemSelect = $[6], onClickOutside = $[7], onEscape = $[8], registerElement = $[9], onItemClick = $[10], children = $[11], restProps = $[12];
+  const padding = t0 === void 0 ? 1 : t0, space = t1 === void 0 ? 1 : t1, shouldFocus = _shouldFocus != null ? _shouldFocus : props.focusFirst && "first" || props.focusLast && "last" || null, ref = useRef(null);
+  let t2;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[13] = t2) : t2 = $[13], useImperativeHandle(forwardedRef, t2);
   const {
-    children,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusFirst,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    focusLast,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
+    isTopLayer
+  } = useLayer();
+  let t3;
+  $[14] !== onKeyDown || $[15] !== originElement || $[16] !== shouldFocus ? (t3 = {
     onKeyDown,
     originElement,
-    padding = 1,
-    registerElement,
-    shouldFocus = props.focusFirst && "first" || props.focusLast && "last" || null,
-    space = 1,
-    ...restProps
-  } = props, ref = useRef(null);
-  useImperativeHandle(forwardedRef, () => ref.current);
+    shouldFocus
+  }, $[14] = onKeyDown, $[15] = originElement, $[16] = shouldFocus, $[17] = t3) : t3 = $[17];
   const {
-    isTopLayer
-  } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
@@ -5843,22 +6010,31 @@ const Root$5 = styled(Box)`
     mount,
     rootElement,
     setRootElement
-  } = useMenuController({
-    onKeyDown,
-    originElement,
-    shouldFocus
-  }), handleRefChange = useCallback((el) => {
+  } = useMenuController(t3);
+  let t4;
+  $[18] !== setRootElement ? (t4 = (el) => {
     setRootElement(el), ref.current = el;
-  }, [setRootElement]);
-  useEffect(() => {
+  }, $[18] = setRootElement, $[19] = t4) : t4 = $[19];
+  const handleRefChange = t4;
+  let t5, t6;
+  $[20] !== onItemSelect || $[21] !== activeIndex ? (t5 = () => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutside(useCallback((event) => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]), useGlobalKeyDown(useCallback((event_0) => {
+  }, t6 = [activeIndex, onItemSelect], $[20] = onItemSelect, $[21] = activeIndex, $[22] = t5, $[23] = t6) : (t5 = $[22], t6 = $[23]), useEffect(t5, t6);
+  let t7;
+  $[24] !== isTopLayer || $[25] !== onClickOutside ? (t7 = (event) => isTopLayer && onClickOutside && onClickOutside(event), $[24] = isTopLayer, $[25] = onClickOutside, $[26] = t7) : t7 = $[26];
+  let t8;
+  $[27] !== rootElement ? (t8 = [rootElement], $[27] = rootElement, $[28] = t8) : t8 = $[28], useClickOutside(t7, t8);
+  let t9;
+  $[29] !== isTopLayer || $[30] !== onEscape ? (t9 = (event_0) => {
     isTopLayer && event_0.key === "Escape" && (event_0.stopPropagation(), onEscape && onEscape());
-  }, [isTopLayer, onEscape])), useEffect(() => {
+  }, $[29] = isTopLayer, $[30] = onEscape, $[31] = t9) : t9 = $[31], useGlobalKeyDown(t9);
+  let t10, t11;
+  $[32] !== rootElement || $[33] !== registerElement ? (t10 = () => {
     if (!(!rootElement || !registerElement))
       return registerElement(rootElement);
-  }, [registerElement, rootElement]);
-  const value = useMemo(() => ({
+  }, t11 = [registerElement, rootElement], $[32] = rootElement, $[33] = registerElement, $[34] = t10, $[35] = t11) : (t10 = $[34], t11 = $[35]), useEffect(t10, t11);
+  let t12, t13;
+  $[36] !== activeElement || $[37] !== activeIndex || $[38] !== mount || $[39] !== onClickOutside || $[40] !== onEscape || $[41] !== onItemClick || $[42] !== handleItemMouseEnter || $[43] !== handleItemMouseLeave || $[44] !== registerElement ? (t13 = {
     version: 0,
     activeElement,
     activeIndex,
@@ -5869,11 +6045,16 @@ const Root$5 = styled(Box)`
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement,
-    // deprecated
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave
-  }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
-  return /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { space, children }) }) });
+  }, $[36] = activeElement, $[37] = activeIndex, $[38] = mount, $[39] = onClickOutside, $[40] = onEscape, $[41] = onItemClick, $[42] = handleItemMouseEnter, $[43] = handleItemMouseLeave, $[44] = registerElement, $[45] = t13) : t13 = $[45], t12 = t13;
+  const value = t12;
+  let t14;
+  $[46] !== space || $[47] !== children ? (t14 = /* @__PURE__ */ jsx(Stack, { space, children }), $[46] = space, $[47] = children, $[48] = t14) : t14 = $[48];
+  let t15;
+  $[49] !== restProps || $[50] !== handleKeyDown || $[51] !== padding || $[52] !== handleRefChange || $[53] !== t14 ? (t15 = /* @__PURE__ */ jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t14 }), $[49] = restProps, $[50] = handleKeyDown, $[51] = padding, $[52] = handleRefChange, $[53] = t14, $[54] = t15) : t15 = $[54];
+  let t16;
+  return $[55] !== value || $[56] !== t15 ? (t16 = /* @__PURE__ */ jsx(MenuContext.Provider, { value, children: t15 }), $[55] = value, $[56] = t15, $[57] = t16) : t16 = $[57], t16;
 }), MenuButton = forwardRef(function(props, forwardedRef) {
   const {
     __unstable_disableRestoreFocusOnClose: disableRestoreFocusOnClose = !1,
@@ -6087,20 +6268,23 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const {
-    as = "button",
+  const $ = c(76);
+  let t0, t1, t2, t3, t4, t5, onClick, children, IconComponent, text, restProps, popover;
+  $[0] !== props ? ({
+    as: t0,
     children,
-    fontSize: fontSize2 = 1,
+    fontSize: t1,
     icon: IconComponent,
     onClick,
-    padding = 3,
+    padding: t2,
     popover,
-    radius: radiusProp = 2,
-    space = 3,
+    radius: t3,
+    space: t4,
     text,
-    tone = "default",
+    tone: t5,
     ...restProps
-  } = props, menu = useMenu(), {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = onClick, $[8] = children, $[9] = IconComponent, $[10] = text, $[11] = restProps, $[12] = popover) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], onClick = $[7], children = $[8], IconComponent = $[9], text = $[10], restProps = $[11], popover = $[12]);
+  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radiusProp = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
     activeElement,
@@ -6108,27 +6292,54 @@ function MenuGroup(props) {
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1), radius = useMemo(() => _getArrayProp(radiusProp), [radiusProp]), handleMouseEnter = useCallback((event) => {
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, [rootElement, setRootElement] = useState(null), [open, setOpen] = useState(!1), shouldFocusRef = useRef(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = useState(!1);
+  let t6, t7;
+  $[13] !== radiusProp ? (t7 = _getArrayProp(radiusProp), $[13] = radiusProp, $[14] = t7) : t7 = $[14], t6 = t7;
+  const radius = t6;
+  let t8;
+  $[15] !== onItemMouseEnter ? (t8 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, [onItemMouseEnter]), handleMenuKeyDown = useCallback((event_0) => {
+  }, $[15] = onItemMouseEnter, $[16] = t8) : t8 = $[16];
+  const handleMouseEnter = t8;
+  let t9;
+  $[17] !== rootElement ? (t9 = (event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement == null || rootElement.focus();
     }));
-  }, [rootElement]), handleClick = useCallback((event_1) => {
+  }, $[17] = rootElement, $[18] = t9) : t9 = $[18];
+  const handleMenuKeyDown = t9;
+  let t10;
+  $[19] !== onClick ? (t10 = (event_1) => {
     onClick && onClick(event_1), shouldFocusRef.current = "first", setOpen(!0), requestAnimationFrame(() => {
       shouldFocusRef.current = null;
     });
-  }, [onClick]), handleChildItemClick = useCallback(() => {
+  }, $[19] = onClick, $[20] = t10) : t10 = $[20];
+  const handleClick = t10;
+  let t11;
+  $[21] !== onItemClick ? (t11 = () => {
     setOpen(!1), onItemClick && onItemClick();
-  }, [onItemClick]), handleMenuMouseEnter = useCallback(() => setWithinMenu(!0), []);
-  useEffect(() => mount(rootElement), [mount, rootElement]), useEffect(() => {
+  }, $[21] = onItemClick, $[22] = t11) : t11 = $[22];
+  const handleChildItemClick = t11;
+  let t12;
+  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => setWithinMenu(!0), $[23] = t12) : t12 = $[23];
+  const handleMenuMouseEnter = t12;
+  let t13, t14;
+  $[24] !== mount || $[25] !== rootElement ? (t13 = () => mount(rootElement), t14 = [mount, rootElement], $[24] = mount, $[25] = rootElement, $[26] = t13, $[27] = t14) : (t13 = $[26], t14 = $[27]), useEffect(t13, t14);
+  let t15, t16;
+  $[28] !== active ? (t15 = () => {
     active || setOpen(!1);
-  }, [active]), useEffect(() => {
+  }, t16 = [active], $[28] = active, $[29] = t15, $[30] = t16) : (t15 = $[29], t16 = $[30]), useEffect(t15, t16);
+  let t17, t18;
+  $[31] !== open ? (t17 = () => {
     open || setWithinMenu(!1);
-  }, [open]);
-  const childMenu = /* @__PURE__ */ jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus: shouldFocusRef.current, children }), handleKeyDown = useCallback((event_2) => {
+  }, t18 = [open], $[31] = open, $[32] = t17, $[33] = t18) : (t17 = $[32], t18 = $[33]), useEffect(t17, t18);
+  let t19;
+  $[34] !== onClickOutside || $[35] !== onEscape || $[36] !== handleChildItemClick || $[37] !== handleMenuKeyDown || $[38] !== registerElement || $[39] !== children ? (t19 = /* @__PURE__ */ jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus: shouldFocusRef.current, children }), $[34] = onClickOutside, $[35] = onEscape, $[36] = handleChildItemClick, $[37] = handleMenuKeyDown, $[38] = registerElement, $[39] = children, $[40] = t19) : t19 = $[40];
+  const childMenu = t19;
+  let t20;
+  $[41] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       shouldFocusRef.current = "first", setOpen(!0), setWithinMenu(!0), requestAnimationFrame(() => {
@@ -6136,27 +6347,43 @@ function MenuGroup(props) {
       });
       return;
     }
-  }, []);
-  return /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": as === "button" ? withinMenu : void 0, "data-pressed": as !== "button" ? withinMenu : void 0, "data-selected": !withinMenu && active ? "" : void 0, $radius: radius, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
-    IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-      isValidElement(IconComponent) && IconComponent,
-      isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-    ] }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-    /* @__PURE__ */ jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) })
-  ] }) }) });
+  }, $[41] = t20) : t20 = $[41];
+  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = as === "button" ? "button" : void 0;
+  let t25;
+  $[42] !== IconComponent || $[43] !== fontSize2 ? (t25 = IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+    isValidElement(IconComponent) && IconComponent,
+    isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
+  ] }), $[42] = IconComponent, $[43] = fontSize2, $[44] = t25) : t25 = $[44];
+  let t26;
+  $[45] !== fontSize2 || $[46] !== text ? (t26 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[45] = fontSize2, $[46] = text, $[47] = t26) : t26 = $[47];
+  let t27;
+  $[48] === Symbol.for("react.memo_cache_sentinel") ? (t27 = /* @__PURE__ */ jsx(ChevronRightIcon, {}), $[48] = t27) : t27 = $[48];
+  let t28;
+  $[49] !== fontSize2 ? (t28 = /* @__PURE__ */ jsx(Text, { size: fontSize2, children: t27 }), $[49] = fontSize2, $[50] = t28) : t28 = $[50];
+  let t29;
+  $[51] !== space || $[52] !== padding || $[53] !== t25 || $[54] !== t26 || $[55] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Flex, { gap: space, padding, children: [
+    t25,
+    t26,
+    t28
+  ] }), $[51] = space, $[52] = padding, $[53] = t25, $[54] = t26, $[55] = t28, $[56] = t29) : t29 = $[56];
+  let t30;
+  $[57] !== as || $[58] !== restProps || $[59] !== t21 || $[60] !== t22 || $[61] !== t23 || $[62] !== radius || $[63] !== tone || $[64] !== scheme || $[65] !== handleClick || $[66] !== handleKeyDown || $[67] !== handleMouseEnter || $[68] !== t24 || $[69] !== t29 ? (t30 = /* @__PURE__ */ jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: radius, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t24, children: t29 }), $[57] = as, $[58] = restProps, $[59] = t21, $[60] = t22, $[61] = t23, $[62] = radius, $[63] = tone, $[64] = scheme, $[65] = handleClick, $[66] = handleKeyDown, $[67] = handleMouseEnter, $[68] = t24, $[69] = t29, $[70] = t30) : t30 = $[70];
+  let t31;
+  return $[71] !== popover || $[72] !== childMenu || $[73] !== open || $[74] !== t30 ? (t31 = /* @__PURE__ */ jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t30 }), $[71] = popover, $[72] = childMenu, $[73] = open, $[74] = t30, $[75] = t31) : t31 = $[75], t31;
 }
 const MenuItem = forwardRef(function(props, forwardedRef) {
-  const {
-    as = "button",
+  const $ = c(78);
+  let t0, t1, t2, t3, t4, t5, selectedProp, disabled, onClick, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft, pressed, IconComponent, text, IconRightComponent, hotkeys, children, restProps;
+  $[0] !== props ? ({
+    as: t0,
     children,
     disabled,
-    fontSize: fontSize2 = 1,
+    fontSize: t1,
     hotkeys,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClick,
-    padding = 3,
+    padding: t2,
     paddingX,
     paddingY,
     paddingTop,
@@ -6164,25 +6391,33 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     paddingBottom,
     paddingLeft,
     pressed,
-    radius = 2,
+    radius: t3,
     selected: selectedProp,
-    space = 3,
+    space: t4,
     text,
-    tone = "default",
+    tone: t5,
     ...restProps
-  } = props, {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = selectedProp, $[8] = disabled, $[9] = onClick, $[10] = paddingX, $[11] = paddingY, $[12] = paddingTop, $[13] = paddingRight, $[14] = paddingBottom, $[15] = paddingLeft, $[16] = pressed, $[17] = IconComponent, $[18] = text, $[19] = IconRightComponent, $[20] = hotkeys, $[21] = children, $[22] = restProps) : (t0 = $[1], t1 = $[2], t2 = $[3], t3 = $[4], t4 = $[5], t5 = $[6], selectedProp = $[7], disabled = $[8], onClick = $[9], paddingX = $[10], paddingY = $[11], paddingTop = $[12], paddingRight = $[13], paddingBottom = $[14], paddingLeft = $[15], pressed = $[16], IconComponent = $[17], text = $[18], IconRightComponent = $[19], hotkeys = $[20], children = $[21], restProps = $[22]);
+  const as = t0 === void 0 ? "button" : t0, fontSize2 = t1 === void 0 ? 1 : t1, padding = t2 === void 0 ? 3 : t2, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, {
     scheme
   } = useRootTheme(), menu = useMenu(), {
     activeElement,
     mount,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
-    onItemMouseLeave = menu.onMouseLeave
-  } = menu, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
-  useImperativeHandle(forwardedRef, () => ref.current), useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const handleClick = useCallback((event) => {
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave
+  } = menu, onItemMouseEnter = _onItemMouseEnter != null ? _onItemMouseEnter : menu.onMouseEnter, onItemMouseLeave = _onItemMouseLeave != null ? _onItemMouseLeave : menu.onMouseLeave, [rootElement, setRootElement] = useState(null), active = !!activeElement && activeElement === rootElement, ref = useRef(null);
+  let t6;
+  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[23] = t6) : t6 = $[23], useImperativeHandle(forwardedRef, t6);
+  let t7, t8;
+  $[24] !== mount || $[25] !== rootElement || $[26] !== selectedProp ? (t7 = () => mount(rootElement, selectedProp), t8 = [mount, rootElement, selectedProp], $[24] = mount, $[25] = rootElement, $[26] = selectedProp, $[27] = t7, $[28] = t8) : (t7 = $[27], t8 = $[28]), useEffect(t7, t8);
+  let t9;
+  $[29] !== disabled || $[30] !== onClick || $[31] !== onItemClick ? (t9 = (event) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, [disabled, onClick, onItemClick]), paddingProps = useMemo(() => ({
+  }, $[29] = disabled, $[30] = onClick, $[31] = onItemClick, $[32] = t9) : t9 = $[32];
+  const handleClick = t9;
+  let t10, t11;
+  $[33] !== padding || $[34] !== paddingX || $[35] !== paddingY || $[36] !== paddingTop || $[37] !== paddingRight || $[38] !== paddingBottom || $[39] !== paddingLeft ? (t11 = {
     padding,
     paddingX,
     paddingY,
@@ -6190,27 +6425,50 @@ const MenuItem = forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useMemo(() => _getArrayProp(fontSize2).map((s) => s - 1), [fontSize2]), $radius = useMemo(() => _getArrayProp(radius), [radius]), $padding = useMemo(() => _getArrayProp(0), []), setRef = useCallback((el) => {
+  }, $[33] = padding, $[34] = paddingX, $[35] = paddingY, $[36] = paddingTop, $[37] = paddingRight, $[38] = paddingBottom, $[39] = paddingLeft, $[40] = t11) : t11 = $[40], t10 = t11;
+  const paddingProps = t10;
+  let t12, t13;
+  if ($[41] !== fontSize2) {
+    let t142;
+    $[43] === Symbol.for("react.memo_cache_sentinel") ? (t142 = (s) => s - 1, $[43] = t142) : t142 = $[43], t13 = _getArrayProp(fontSize2).map(t142), $[41] = fontSize2, $[42] = t13;
+  } else
+    t13 = $[42];
+  t12 = t13;
+  const hotkeysFontSize = t12;
+  let t14, t15;
+  $[44] !== radius ? (t15 = _getArrayProp(radius), $[44] = radius, $[45] = t15) : t15 = $[45], t14 = t15;
+  const $radius = t14;
+  let t16, t17;
+  $[46] === Symbol.for("react.memo_cache_sentinel") ? (t17 = _getArrayProp(0), $[46] = t17) : t17 = $[46], t16 = t17;
+  const $padding = t16;
+  let t18;
+  $[47] === Symbol.for("react.memo_cache_sentinel") ? (t18 = (el) => {
     ref.current = el, setRootElement(el);
-  }, []);
-  return /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": as === "button" && pressed, "data-pressed": as !== "button" && pressed ? "" : void 0, "data-selected": active ? "" : void 0, "data-disabled": disabled ? "" : void 0, forwardedAs: as, $radius, $padding, $tone: disabled ? "default" : tone, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: as === "button" ? "button" : void 0, children: [
-    (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
-      IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-        isValidElement(IconComponent) && IconComponent,
-        isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
-      ] }),
-      text && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-      hotkeys && /* @__PURE__ */ jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
-        marginTop: -4,
-        marginBottom: -4
-      } }),
-      IconRightComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
-        isValidElement(IconRightComponent) && IconRightComponent,
-        isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
-      ] })
+  }, $[47] = t18) : t18 = $[47];
+  const setRef = t18, t19 = as === "button" && pressed, t20 = as !== "button" && pressed ? "" : void 0, t21 = active ? "" : void 0, t22 = disabled ? "" : void 0, t23 = disabled ? "default" : tone, t24 = as === "button" ? "button" : void 0;
+  let t25;
+  $[48] !== IconComponent || $[49] !== text || $[50] !== IconRightComponent || $[51] !== fontSize2 || $[52] !== hotkeys || $[53] !== hotkeysFontSize || $[54] !== space || $[55] !== paddingProps ? (t25 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+    IconComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+      isValidElement(IconComponent) && IconComponent,
+      isValidElementType(IconComponent) && /* @__PURE__ */ jsx(IconComponent, {})
     ] }),
-    children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children })
-  ] });
+    text && /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+    hotkeys && /* @__PURE__ */ jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
+      marginTop: -4,
+      marginBottom: -4
+    } }),
+    IconRightComponent && /* @__PURE__ */ jsxs(Text, { size: fontSize2, children: [
+      isValidElement(IconRightComponent) && IconRightComponent,
+      isValidElementType(IconRightComponent) && /* @__PURE__ */ jsx(IconRightComponent, {})
+    ] })
+  ] }), $[48] = IconComponent, $[49] = text, $[50] = IconRightComponent, $[51] = fontSize2, $[52] = hotkeys, $[53] = hotkeysFontSize, $[54] = space, $[55] = paddingProps, $[56] = t25) : t25 = $[56];
+  let t26;
+  $[57] !== children || $[58] !== paddingProps ? (t26 = children && /* @__PURE__ */ jsx(Box, { as: "span", ...paddingProps, children }), $[57] = children, $[58] = paddingProps, $[59] = t26) : t26 = $[59];
+  let t27;
+  return $[60] !== restProps || $[61] !== t19 || $[62] !== t20 || $[63] !== t21 || $[64] !== t22 || $[65] !== as || $[66] !== $radius || $[67] !== t23 || $[68] !== scheme || $[69] !== disabled || $[70] !== handleClick || $[71] !== onItemMouseEnter || $[72] !== onItemMouseLeave || $[73] !== setRef || $[74] !== t24 || $[75] !== t25 || $[76] !== t26 ? (t27 = /* @__PURE__ */ jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": t19, "data-pressed": t20, "data-selected": t21, "data-disabled": t22, forwardedAs: as, $radius, $padding, $tone: t23, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: t24, children: [
+    t25,
+    t26
+  ] }), $[60] = restProps, $[61] = t19, $[62] = t20, $[63] = t21, $[64] = t22, $[65] = as, $[66] = $radius, $[67] = t23, $[68] = scheme, $[69] = disabled, $[70] = handleClick, $[71] = onItemMouseEnter, $[72] = onItemMouseLeave, $[73] = setRef, $[74] = t24, $[75] = t25, $[76] = t26, $[77] = t27) : t27 = $[77], t27;
 }), keyframe = keyframes`
   0% {
     background-position: 100%;
@@ -6494,15 +6752,86 @@ const subscribe = () => () => {
   max-width: 420px;
   width: 100%;
 `;
-let toastId = 0;
 function ToastProvider(props) {
-  const {
+  const $ = c(22), {
     children,
-    padding = 4,
+    padding: t0,
     paddingX,
     paddingY,
     zOffset
-  } = props, [state, _setState] = useState([]), toastsRef = useRef({}), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion(), variants = useMemo(() => ({
+  } = props, padding = t0 === void 0 ? 4 : t0;
+  let t1;
+  $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+  const [state, _setState] = useState(t1);
+  let t2;
+  $[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {}, $[1] = t2) : t2 = $[1];
+  const toastsRef = useRef(t2), mounted = useMounted(), prefersReducedMotion = usePrefersReducedMotion();
+  let t3, t4;
+  $[2] !== prefersReducedMotion ? (t4 = getVariants(prefersReducedMotion), $[2] = prefersReducedMotion, $[3] = t4) : t4 = $[3], t3 = t4;
+  const variants = t3;
+  let t5, t6;
+  $[4] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (params) => {
+    const setState = (state_0) => startTransition(() => _setState(state_0)), id = params.id || crypto.randomUUID(), duration = params.duration || 5e3, dismiss = () => {
+      var _a;
+      const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
+      setState((prevState) => {
+        const idx = prevState.findIndex((t) => t.id === id);
+        if (idx > -1) {
+          const toasts = prevState.slice(0);
+          return toasts.splice(idx, 1), toasts;
+        }
+        return prevState;
+      }), timeoutId !== void 0 && (clearTimeout(timeoutId), delete toastsRef.current[id]);
+    };
+    return setState((prevState_0) => prevState_0.filter((t_0) => t_0.id !== id).concat([{
+      dismiss,
+      id,
+      params: {
+        ...params,
+        duration
+      }
+    }])), toastsRef.current[id] && (clearTimeout(toastsRef.current[id].timeoutId), delete toastsRef.current[id]), toastsRef.current[id] = {
+      timeoutId: setTimeout(dismiss, duration)
+    }, id;
+  }, $[4] = t6) : t6 = $[4];
+  const push = t6;
+  let t7;
+  $[5] !== push ? (t7 = {
+    version: 0,
+    push
+  }, $[5] = push, $[6] = t7) : t7 = $[6], t5 = t7;
+  const value = t5;
+  let t8, t9;
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => () => {
+    for (const {
+      timeoutId: timeoutId_0
+    } of Object.values(toastsRef.current))
+      clearTimeout(timeoutId_0);
+    toastsRef.current = {};
+  }, t9 = [], $[7] = t8, $[8] = t9) : (t8 = $[7], t9 = $[8]), useEffect(t8, t9);
+  let t10;
+  $[9] !== mounted || $[10] !== variants || $[11] !== prefersReducedMotion || $[12] !== state || $[13] !== padding || $[14] !== paddingX || $[15] !== paddingY || $[16] !== zOffset ? (t10 = mounted && /* @__PURE__ */ jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map((t112) => {
+    const {
+      dismiss: dismiss_0,
+      id: id_0,
+      params: params_0
+    } = t112;
+    return /* @__PURE__ */ jsx(motion.div, { layout: "position", initial: "initial", animate: "animate", exit: "exit", variants, transition: prefersReducedMotion ? {
+      duration: 0
+    } : {
+      type: "spring",
+      damping: 30,
+      stiffness: 400
+    }, children: /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title }) }, id_0);
+  }) }) }) }) }), $[9] = mounted, $[10] = variants, $[11] = prefersReducedMotion, $[12] = state, $[13] = padding, $[14] = paddingX, $[15] = paddingY, $[16] = zOffset, $[17] = t10) : t10 = $[17];
+  let t11;
+  return $[18] !== value || $[19] !== children || $[20] !== t10 ? (t11 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
+    children,
+    t10
+  ] }), $[18] = value, $[19] = children, $[20] = t10, $[21] = t11) : t11 = $[21], t11;
+}
+function getVariants(prefersReducedMotion) {
+  return {
     initial: {
       opacity: 0,
       [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
@@ -6520,59 +6849,11 @@ function ToastProvider(props) {
       opacity: [1, 1, 0],
       [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
       scale: 0.5,
-      transition: prefersReducedMotion ? {
-        duration: 0
-      } : {
-        duration: 0.2
+      transition: {
+        duration: prefersReducedMotion ? 0 : 0.2
       }
     }
-  }), [prefersReducedMotion]), value = useMemo(() => ({
-    version: 0,
-    push: (params) => {
-      const setState = (state_0) => startTransition(() => _setState(state_0)), id = params.id || String(toastId++), duration = params.duration || 5e3, dismiss = () => {
-        var _a;
-        const timeoutId = (_a = toastsRef.current[id]) == null ? void 0 : _a.timeoutId;
-        setState((prevState) => {
-          const idx = prevState.findIndex((t) => t.id === id);
-          if (idx > -1) {
-            const toasts = prevState.slice(0);
-            return toasts.splice(idx, 1), toasts;
-          }
-          return prevState;
-        }), timeoutId !== void 0 && (clearTimeout(timeoutId), delete toastsRef.current[id]);
-      };
-      return setState((prevState_0) => prevState_0.filter((t_0) => t_0.id !== id).concat([{
-        dismiss,
-        id,
-        params: {
-          ...params,
-          duration
-        }
-      }])), toastsRef.current[id] && (clearTimeout(toastsRef.current[id].timeoutId), delete toastsRef.current[id]), toastsRef.current[id] = {
-        timeoutId: setTimeout(dismiss, duration)
-      }, id;
-    }
-  }), []);
-  return useEffect(() => () => {
-    for (const {
-      timeoutId: timeoutId_0
-    } of Object.values(toastsRef.current))
-      clearTimeout(timeoutId_0);
-    toastsRef.current = {};
-  }, []), /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
-    children,
-    mounted && /* @__PURE__ */ jsx(Root$1, { "data-ui": "ToastProvider", zOffset, children: /* @__PURE__ */ jsx(ToastContainer, { children: /* @__PURE__ */ jsx(Box, { padding, paddingX, paddingY, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, children: state.map(({
-      dismiss: dismiss_0,
-      id: id_0,
-      params: params_0
-    }) => /* @__PURE__ */ jsx(motion.div, { layout: "position", initial: "initial", animate: "animate", exit: "exit", variants, transition: prefersReducedMotion ? {
-      duration: 0
-    } : {
-      type: "spring",
-      damping: 30,
-      stiffness: 400
-    }, children: /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title }) }, id_0)) }) }) }) })
-  ] });
+  };
 }
 function useToast() {
   const value = useContext(ToastContext);
@@ -6795,6 +7076,24 @@ const key = Symbol.for("@sanity/ui/context/tree"), TreeContext = createGlobalSco
   return $[35] !== contextValue || $[36] !== t19 ? (t20 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t19 }), $[35] = contextValue, $[36] = t19, $[37] = t20) : t20 = $[37], t20;
 }));
 Tree.displayName = "Tree";
+function useTree() {
+  const tree = useContext(TreeContext);
+  if (!tree)
+    throw new Error("Tree: missing context value");
+  return tree;
+}
+const TreeGroup = memo(function(props) {
+  const $ = c(9);
+  let t0, restProps, children;
+  $[0] !== props ? ({
+    children,
+    expanded: t0,
+    ...restProps
+  } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = children) : (t0 = $[1], restProps = $[2], children = $[3]);
+  const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
+  let t2;
+  return $[4] !== restProps || $[5] !== t1 || $[6] !== tree.space || $[7] !== children ? (t2 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = restProps, $[5] = t1, $[6] = tree.space, $[7] = children, $[8] = t2) : t2 = $[8], t2;
+});
 function treeItemRootStyle() {
   return css`
     &[role='none'] > [role='treeitem'] {
@@ -6887,88 +7186,124 @@ function treeItemBoxStyle(props) {
     }
   `;
 }
-function useTree() {
-  const tree = useContext(TreeContext);
-  if (!tree)
-    throw new Error("Tree: missing context value");
-  return tree;
-}
-const TreeGroup = memo(function(props) {
-  const $ = c(9);
-  let t0, restProps, children;
-  $[0] !== props ? ({
-    children,
-    expanded: t0,
-    ...restProps
-  } = props, $[0] = props, $[1] = t0, $[2] = restProps, $[3] = children) : (t0 = $[1], restProps = $[2], children = $[3]);
-  const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
-  let t2;
-  return $[4] !== restProps || $[5] !== t1 || $[6] !== tree.space || $[7] !== children ? (t2 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = restProps, $[5] = t1, $[6] = tree.space, $[7] = children, $[8] = t2) : t2 = $[8], t2;
-}), Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled(Box).attrs({
+const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = styled(Box).attrs({
   forwardedAs: "a"
 })(treeItemBoxStyle), ToggleArrowText = styled(Text)`
   & > svg {
     transition: transform 100ms;
   }
 `, TreeItem = memo(function(props) {
-  const {
+  const $ = c(108);
+  let t0, t1, t2, t3, t4, idProp, onClick, IconComponent, children, muted, text, weight, 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, rootRef = useRef(null), treeitemRef = 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] = text, $[12] = weight, $[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], text = $[11], weight = $[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, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), {
     path,
     registerItem,
     setExpanded,
     setFocusedElement
-  } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(() => ({
+  } = tree, _id = useId(), id = idProp || _id;
+  let t5;
+  const t6 = id || "";
+  let t7;
+  $[16] !== path || $[17] !== t6 ? (t7 = [...path, t6], $[16] = path, $[17] = t6, $[18] = t7) : t7 = $[18], t5 = t7;
+  const itemPath = t5, itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = (itemState == null ? void 0 : itemState.expanded) === void 0 ? expandedProp : (itemState == null ? void 0 : itemState.expanded) || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1;
+  let t8;
+  const t9 = tree.level + 1;
+  let t10;
+  $[19] !== tree || $[20] !== t9 || $[21] !== itemPath ? (t10 = {
     ...tree,
-    level: tree.level + 1,
+    level: t9,
     path: itemPath
-  }), [itemPath, tree]), handleClick = useCallback((event) => {
-    onClick && onClick(event);
+  }, $[19] = tree, $[20] = t9, $[21] = itemPath, $[22] = t10) : t10 = $[22], t8 = t10;
+  const contextValue = t8;
+  let t11;
+  $[23] !== onClick || $[24] !== setExpanded || $[25] !== itemKey || $[26] !== expanded || $[27] !== setFocusedElement ? (t11 = (event) => {
+    onClick == null || 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(rootRef.current));
-  }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = useCallback((event_0) => {
+  }, $[23] = onClick, $[24] = setExpanded, $[25] = itemKey, $[26] = expanded, $[27] = setFocusedElement, $[28] = t11) : t11 = $[28];
+  const handleClick = t11;
+  let t12;
+  $[29] !== focused ? (t12 = (event_0) => {
     if (focused && event_0.key === "Enter") {
       const el = treeitemRef.current || rootRef.current;
       el == null || el.click();
     }
-  }, [focused]);
-  useEffect(() => {
+  }, $[29] = focused, $[30] = t12) : t12 = $[30];
+  const handleKeyDown = t12;
+  let t13, t14;
+  $[31] !== registerItem || $[32] !== itemPath || $[33] !== expanded || $[34] !== selected ? (t13 = () => {
     if (rootRef.current)
       return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
-  }, [expanded, itemPath, registerItem, selected]);
-  const content = /* @__PURE__ */ jsxs(Flex, { padding, children: [
-    /* @__PURE__ */ jsxs(Box, { marginRight: space, style: {
-      visibility: IconComponent || children ? "visible" : "hidden",
-      pointerEvents: "none"
-    }, children: [
-      IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
-      !IconComponent && /* @__PURE__ */ jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
-        transform: expanded ? "rotate(90deg)" : void 0
-      } }) })
-    ] }),
-    /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) })
-  ] });
-  return href ? /* @__PURE__ */ jsxs(Root, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
-    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
-  ] }) : /* @__PURE__ */ 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: rootRef, role: "treeitem", tabIndex, children: [
-    /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }),
-    /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
-  ] });
+  }, t14 = [expanded, itemPath, registerItem, selected], $[31] = registerItem, $[32] = itemPath, $[33] = expanded, $[34] = selected, $[35] = t13, $[36] = t14) : (t13 = $[35], t14 = $[36]), useEffect(t13, t14);
+  let t15;
+  const t16 = IconComponent || children ? "visible" : "hidden";
+  let t17;
+  $[37] !== t16 ? (t17 = {
+    visibility: t16,
+    pointerEvents: "none"
+  }, $[37] = t16, $[38] = t17) : t17 = $[38];
+  let t18;
+  $[39] !== IconComponent || $[40] !== muted || $[41] !== fontSize2 || $[42] !== weight ? (t18 = IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }), $[39] = IconComponent, $[40] = muted, $[41] = fontSize2, $[42] = weight, $[43] = t18) : t18 = $[43];
+  let t19;
+  $[44] !== IconComponent || $[45] !== expanded || $[46] !== muted || $[47] !== fontSize2 || $[48] !== weight ? (t19 = !IconComponent && /* @__PURE__ */ jsx(ToggleArrowText, { muted, size: fontSize2, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
+    transform: expanded ? "rotate(90deg)" : void 0
+  } }) }), $[44] = IconComponent, $[45] = expanded, $[46] = muted, $[47] = fontSize2, $[48] = weight, $[49] = t19) : t19 = $[49];
+  let t20;
+  $[50] !== space || $[51] !== t17 || $[52] !== t18 || $[53] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Box, { marginRight: space, style: t17, children: [
+    t18,
+    t19
+  ] }), $[50] = space, $[51] = t17, $[52] = t18, $[53] = t19, $[54] = t20) : t20 = $[54];
+  let t21;
+  $[55] !== muted || $[56] !== fontSize2 || $[57] !== weight || $[58] !== text ? (t21 = /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize2, textOverflow: "ellipsis", weight, children: text }) }), $[55] = muted, $[56] = fontSize2, $[57] = weight, $[58] = text, $[59] = t21) : t21 = $[59];
+  let t22;
+  $[60] !== padding || $[61] !== t20 || $[62] !== t21 ? (t22 = /* @__PURE__ */ jsxs(Flex, { padding, children: [
+    t20,
+    t21
+  ] }), $[60] = padding, $[61] = t20, $[62] = t21, $[63] = t22) : t22 = $[63], t15 = t22;
+  const content = t15;
+  if (href) {
+    const t232 = selected ? "" : void 0;
+    let t242;
+    $[64] !== tree.level || $[65] !== expanded || $[66] !== linkAs || $[67] !== href || $[68] !== treeitemRef || $[69] !== tabIndex || $[70] !== content ? (t242 = /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content }), $[64] = tree.level, $[65] = expanded, $[66] = linkAs, $[67] = href, $[68] = treeitemRef, $[69] = tabIndex, $[70] = content, $[71] = t242) : t242 = $[71];
+    let t252;
+    $[72] !== children || $[73] !== expanded ? (t252 = children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }), $[72] = children, $[73] = expanded, $[74] = t252) : t252 = $[74];
+    let t262;
+    $[75] !== contextValue || $[76] !== t252 ? (t262 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t252 }), $[75] = contextValue, $[76] = t252, $[77] = t262) : t262 = $[77];
+    let t272;
+    return $[78] !== t232 || $[79] !== id || $[80] !== itemKey || $[81] !== restProps || $[82] !== handleClick || $[83] !== rootRef || $[84] !== t242 || $[85] !== t262 ? (t272 = /* @__PURE__ */ jsxs(Root, { "data-selected": t232, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
+      t242,
+      t262
+    ] }), $[78] = t232, $[79] = id, $[80] = itemKey, $[81] = restProps, $[82] = handleClick, $[83] = rootRef, $[84] = t242, $[85] = t262, $[86] = t272) : t272 = $[86], t272;
+  }
+  const t23 = selected ? "" : void 0;
+  let t24;
+  $[87] !== tree.level || $[88] !== content ? (t24 = /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content }), $[87] = tree.level, $[88] = content, $[89] = t24) : t24 = $[89];
+  let t25;
+  $[90] !== children || $[91] !== expanded ? (t25 = children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }), $[90] = children, $[91] = expanded, $[92] = t25) : t25 = $[92];
+  let t26;
+  $[93] !== contextValue || $[94] !== t25 ? (t26 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t25 }), $[93] = contextValue, $[94] = t25, $[95] = t26) : t26 = $[95];
+  let t27;
+  return $[96] !== t23 || $[97] !== id || $[98] !== itemKey || $[99] !== restProps || $[100] !== expanded || $[101] !== handleClick || $[102] !== handleKeyDown || $[103] !== rootRef || $[104] !== tabIndex || $[105] !== t24 || $[106] !== t26 ? (t27 = /* @__PURE__ */ 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: rootRef, role: "treeitem", tabIndex, children: [
+    t24,
+    t26
+  ] }), $[96] = t23, $[97] = id, $[98] = itemKey, $[99] = restProps, $[100] = expanded, $[101] = handleClick, $[102] = handleKeyDown, $[103] = rootRef, $[104] = tabIndex, $[105] = t24, $[106] = t26, $[107] = t27) : t27 = $[107], t27;
 });
 export {
   Arrow,