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

package/dist/index.js

@@ -202,7 +202,7 @@ function useClickOutside(listener, t0, boundaryElement) {
   }, t5 = [boundaryElement, listener, elements], $[7] = listener, $[8] = boundaryElement, $[9] = elements, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), react.useEffect(t4, t5), setElement;
 }
 function useClickOutsideEvent(listener, t0, boundaryElement) {
-  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$5 : t0;
+  const $ = reactCompilerRuntime.c(8), elementsArg = t0 === void 0 ? _temp$6 : t0;
   let t1;
   $[0] !== listener || $[1] !== boundaryElement || $[2] !== elementsArg ? (t1 = (evt) => {
     if (!listener)
@@ -230,7 +230,7 @@ function useClickOutsideEvent(listener, t0, boundaryElement) {
     };
   }, t3 = [hasListener, onEvent], $[4] = hasListener, $[5] = onEvent, $[6] = t2, $[7] = t3) : (t2 = $[6], t3 = $[7]), react.useEffect(t2, t3), react.useDebugValue(listener ? "MouseDown On" : "MouseDown Off");
 }
-function _temp$5() {
+function _temp$6() {
   return EMPTY_ARRAY;
 }
 function useCustomValidity(ref, customValidity) {
@@ -616,18 +616,42 @@ function createGlobalScopedContext(key2, defaultValue) {
 }
 const ThemeContext = createGlobalScopedContext("@sanity/ui/context/theme", null);
 function ThemeProvider(props) {
-  const parentTheme = react.useContext(ThemeContext), {
-    children,
-    scheme = parentTheme?.scheme || "light",
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || "default"
-  } = props, themeContext = react.useMemo(() => rootTheme ? {
-    version: 0,
-    theme: rootTheme,
-    scheme,
-    tone
-  } : null, [rootTheme, scheme, tone]), theme$1 = react.useMemo(() => rootTheme ? theme.getScopedTheme(rootTheme, scheme, tone) : null, [scheme, rootTheme, tone]);
-  return theme$1 ? /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }) }) : /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' });
+  const $ = reactCompilerRuntime.c(15), parentTheme = react.useContext(ThemeContext), {
+    children
+  } = props, scheme = props.scheme ?? (parentTheme?.scheme || "light"), rootTheme = props.theme ?? (parentTheme?.theme || null), tone = props.tone ?? (parentTheme?.tone || "default");
+  let t0;
+  bb0: {
+    if (!rootTheme) {
+      t0 = null;
+      break bb0;
+    }
+    let t12;
+    $[0] !== rootTheme || $[1] !== scheme || $[2] !== tone ? (t12 = {
+      version: 0,
+      theme: rootTheme,
+      scheme,
+      tone
+    }, $[0] = rootTheme, $[1] = scheme, $[2] = tone, $[3] = t12) : t12 = $[3], t0 = t12;
+  }
+  const themeContext = t0;
+  let t1;
+  bb1: {
+    if (!rootTheme) {
+      t1 = null;
+      break bb1;
+    }
+    let t22;
+    $[4] !== rootTheme || $[5] !== scheme || $[6] !== tone ? (t22 = theme.getScopedTheme(rootTheme, scheme, tone), $[4] = rootTheme, $[5] = scheme, $[6] = tone, $[7] = t22) : t22 = $[7], t1 = t22;
+  }
+  const theme$1 = t1;
+  if (!theme$1) {
+    let t22;
+    return $[8] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsxRuntime.jsx("pre", { children: 'ThemeProvider: no "theme" property provided' }), $[8] = t22) : t22 = $[8], t22;
+  }
+  let t2;
+  $[9] !== theme$1 || $[10] !== children ? (t2 = /* @__PURE__ */ jsxRuntime.jsx(styledComponents.ThemeProvider, { theme: theme$1, children }), $[9] = theme$1, $[10] = children, $[11] = t2) : t2 = $[11];
+  let t3;
+  return $[12] !== themeContext || $[13] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: themeContext, children: t2 }), $[12] = themeContext, $[13] = t2, $[14] = t3) : t3 = $[14], t3;
 }
 ThemeProvider.displayName = "ThemeProvider";
 function useRootTheme() {
@@ -712,15 +736,15 @@ function useMediaIndex() {
   return react.useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot);
 }
 function usePrefersDark(t0) {
-  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$4 : t0);
+  return useMatchMedia("(prefers-color-scheme: dark)", t0 === void 0 ? _temp$5 : t0);
 }
-function _temp$4() {
+function _temp$5() {
   return !1;
 }
 function usePrefersReducedMotion(t0) {
-  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$3 : t0);
+  return useMatchMedia("(prefers-reduced-motion: reduce)", t0 === void 0 ? _temp$4 : t0);
 }
-function _temp$3() {
+function _temp$4() {
   return !1;
 }
 function responsiveBorderStyle() {
@@ -1753,19 +1777,26 @@ function responsiveAvatarStackSizeStyle(props) {
   });
 }
 const Root$z = styledComponents.styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle), AvatarStack = react.forwardRef(function(props, ref) {
-  const {
+  const $ = reactCompilerRuntime.c(15);
+  let t0, t1, childrenProp, restProps;
+  $[0] !== props ? ({
     children: childrenProp,
-    maxLength: maxLengthProp = 4,
-    size: sizeProp = 1,
+    maxLength: t0,
+    size: t1,
     ...restProps
-  } = props, children = react.useMemo(() => react.Children.toArray(childrenProp).filter(react.isValidElement), [childrenProp]), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */ jsxRuntime.jsxs(Root$z, { "data-ui": "AvatarStack", ...restProps, ref, $size: size2, children: [
-    len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }),
-    len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) }),
-    visibleChildren.map((child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
-      size: size2
-    }) }, String(childIndex)))
-  ] });
+  } = 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, children = react.Children.toArray(childrenProp).filter(react.isValidElement), maxLength = Math.max(maxLengthProp, 0), size2 = useArrayProp(sizeProp), len = children.length, visibleCount = maxLength - 1, extraCount = len - visibleCount, visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children, T0 = Root$z, t2 = "AvatarStack", t3 = len === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: len, size: size2 }) }), t4 = len !== 0 && extraCount > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(AvatarCounter, { count: extraCount, size: size2 }) });
+  let t5;
+  $[5] !== size2 ? (t5 = (child, childIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: react.cloneElement(child, {
+    size: size2
+  }) }, String(childIndex)), $[5] = size2, $[6] = t5) : t5 = $[6];
+  const t6 = visibleChildren.map(t5);
+  let t7;
+  return $[7] !== T0 || $[8] !== restProps || $[9] !== ref || $[10] !== size2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxRuntime.jsxs(T0, { "data-ui": t2, ...restProps, ref, $size: size2, children: [
+    t3,
+    t4,
+    t6
+  ] }), $[7] = T0, $[8] = restProps, $[9] = ref, $[10] = size2, $[11] = t3, $[12] = t4, $[13] = t6, $[14] = t7) : t7 = $[14], t7;
 });
 AvatarStack.displayName = "ForwardRef(AvatarStack)";
 const Root$y = styledComponents.styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle), Box = react.forwardRef(function(props, ref) {
@@ -3186,9 +3217,9 @@ function findMinBreakpoints(media, width) {
 const ElementQuery = react.forwardRef(function(props, forwardedRef) {
   const theme2 = useTheme_v2(), {
     children,
-    media = theme2.media,
+    media: _media,
     ...restProps
-  } = props, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
+  } = props, media = _media ?? theme2.media, ref = react.useRef(null), [element, setElement] = react.useState(null), elementSize = useElementSize(element), width = react.useMemo(() => elementSize?.border.width ?? window.innerWidth, [elementSize]), max = react.useMemo(() => findMaxBreakpoints(media, width), [media, width]), min = react.useMemo(() => findMinBreakpoints(media, width), [media, width]);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const setRef = react.useCallback((el) => {
     ref.current = el, setElement(el);
@@ -3439,7 +3470,7 @@ function PortalProvider(props) {
     children,
     element,
     __unstable_elements: elementsProp
-  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$2, _temp2$1);
+  } = props, elements = useUnique(elementsProp), fallbackElement = react.useSyncExternalStore(emptySubscribe, _temp$3, _temp2$1);
   let t0;
   const t1 = boundaryElement || null, t2 = element || fallbackElement;
   let t3;
@@ -3456,7 +3487,7 @@ function PortalProvider(props) {
 function _temp2$1() {
   return null;
 }
-function _temp$2() {
+function _temp$3() {
   return document.body;
 }
 PortalProvider.displayName = "PortalProvider";
@@ -3772,14 +3803,14 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     constrainSize = !1,
     content,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"],
+    fallbackPlacements: _fallbackPlacements,
     matchReferenceWidth,
-    floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    floatingBoundary: _floatingBoundary,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
     open,
@@ -3789,16 +3820,16 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     portal,
     preventOverflow = !0,
     radius: radiusProp = 3,
-    referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    referenceBoundary: _referenceBoundary,
     referenceElement,
     scheme,
     shadow: shadowProp = 3,
     tone = "inherit",
     width: widthProp = "auto",
-    zOffset: zOffsetProp = layer.popover.zOffset,
+    zOffset: _zOffsetProp,
     updateRef,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
+  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext.element, fallbackPlacements = _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS$1[props.placement ?? "bottom"], floatingBoundary = _floatingBoundary ?? boundaryElement ?? boundaryElementContext.element, referenceBoundary = _referenceBoundary ?? boundaryElement ?? boundaryElementContext.element, zOffsetProp = _zOffsetProp ?? layer.popover.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, boundarySize = useElementSize(boundaryElement)?.border, padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), widthArrayProp = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), ref = react.useRef(null), arrowRef = react.useRef(null), rootBoundary = "viewport";
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const mediaIndex = useMediaIndex(), boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : void 0, width = calcCurrentWidth({
     container,
@@ -3816,11 +3847,11 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     maxWidthRef.current = maxWidth;
   }, [maxWidth]);
   const referenceWidthRef = react.useRef();
-  react.useEffect(() => {
+  react.useLayoutEffect(() => {
     const floatingElement = ref.current;
     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`);
+    matchReferenceWidth ? referenceWidthRef.current !== void 0 && (floatingElement.style.width = `${referenceWidth}px`) : width !== void 0 && (floatingElement.style.width = `${width}px`), typeof maxWidth == "number" && (floatingElement.style.maxWidth = `${maxWidth}px`);
   }, [width, matchReferenceWidth, maxWidth, open]);
   const middleware = react.useMemo(() => {
     const ret = [];
@@ -3875,16 +3906,14 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
     arrowRef.current = arrowEl;
   }, []), setFloating = react.useCallback((node) => {
     ref.current = node, refs.setFloating(node);
-  }, [refs]), setReference = react.useCallback((node_0) => {
-    refs.setReference(node_0);
-    const childRef = getElementRef(childProp);
-    typeof childRef == "function" ? childRef(node_0) : childRef && (childRef.current = node_0);
-  }, [childProp, refs]), child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, {
+  }, [refs]), [childElement, setChildElement] = react.useState(null), setReference = react.useCallback((node_0) => {
+    refs.setReference(node_0), setChildElement(node_0);
+  }, [refs]);
+  react.useImperativeHandle(getElementRef(childProp), () => childElement, [childElement]);
+  const child = react.useMemo(() => !childProp || referenceElement ? null : react.cloneElement(childProp, {
     ref: setReference
   }), [childProp, referenceElement, setReference]);
-  if (react.useEffect(() => {
-    updateRef && (typeof updateRef == "function" ? updateRef(update) : updateRef && (updateRef.current = update));
-  }, [update, updateRef]), react.useEffect(() => {
+  if (react.useImperativeHandle(updateRef, () => update, [update]), react.useEffect(() => {
     child || refs.setReference(referenceElement || null);
   }, [referenceElement, refs, child]), disabled)
     return childProp || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
@@ -3896,6 +3925,7 @@ const Popover = react.memo(react.forwardRef(function(props, forwardedRef) {
 }));
 Popover.displayName = "Memo(ForwardRef(Popover))";
 function getElementRef(element) {
+  if (!element) return null;
   let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
   return mayWarn ? element.ref : (getter = Object.getOwnPropertyDescriptor(element, "ref")?.get, mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning, mayWarn ? element.props.ref : element.props.ref || element.ref);
 }
@@ -4545,7 +4575,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   const border2 = t0 === void 0 ? !0 : t0, disabled = t1 === void 0 ? !1 : t1, fontSizeProp = t2 === void 0 ? 2 : t2, paddingProp = t3 === void 0 ? 3 : t3, radiusProp = t4 === void 0 ? 2 : t4, spaceProp = t5 === void 0 ? 3 : t5, type = t6 === void 0 ? "text" : t6, ref = react.useRef(null), rootTheme = useRootTheme(), fontSize2 = useArrayProp(fontSizeProp), padding = useArrayProp(paddingProp), radius = useArrayProp(radiusProp), space = useArrayProp(spaceProp), $hasClearButton = !!clearButton, $hasIcon = !!IconComponent, $hasIconRight = !!IconRightComponent, $hasSuffix = !!suffix, $hasPrefix = !!prefix;
   let t7;
   $[19] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => ref.current, $[19] = t7) : t7 = $[19], react.useImperativeHandle(forwardedRef, t7), useCustomValidity(ref, customValidity);
-  const handleClearMouseDown = _temp$1;
+  const handleClearMouseDown = _temp$2;
   let t8;
   $[20] !== onClear ? (t8 = (event_0) => {
     event_0.preventDefault(), event_0.stopPropagation(), onClear && onClear(), ref.current?.focus();
@@ -4613,7 +4643,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   ] }), $[81] = rootTheme.tone, $[82] = prefixNode, $[83] = t27, $[84] = suffixNode, $[85] = t28) : t28 = $[85], t28;
 });
 TextInput.displayName = "ForwardRef(TextInput)";
-function _temp$1(event) {
+function _temp$2(event) {
   event.preventDefault(), event.stopPropagation();
 }
 function useDelayedState(initialState) {
@@ -4733,21 +4763,21 @@ const Root$a = styledComponents.styled(Layer)`
   } = useTheme_v2(), {
     animate: _animate = !1,
     arrow: arrowProp = !1,
-    boundaryElement = boundaryElementContext?.element,
+    boundaryElement: _boundaryElement,
     children: childProp,
     content,
     disabled,
-    fallbackPlacements: fallbackPlacementsProp = props.fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"],
+    fallbackPlacements: _fallbackPlacementsProp,
     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 = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
+  } = props, boundaryElement = _boundaryElement ?? boundaryElementContext?.element, fallbackPlacementsProp = _fallbackPlacementsProp ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? "bottom"], zOffset = _zOffset ?? layer.tooltip.zOffset, animate = usePrefersReducedMotion() ? !1 : _animate, fallbackPlacements = useArrayProp(fallbackPlacementsProp), ref = react.useRef(null), [referenceElement, setReferenceElement] = react.useState(null), arrowRef = react.useRef(null), rootBoundary = "viewport", [tooltipMaxWidth, setTooltipMaxWidth] = react.useState(0);
   react.useImperativeHandle(forwardedRef, () => ref.current);
   const portal = usePortal(), portalElement = typeof portalProp == "string" ? portal.elements?.[portalProp] || null : portal.element, middleware = react.useMemo(() => {
     const ret = [];
@@ -5497,13 +5527,15 @@ const Root$7 = styledComponents.styled(Layer)(responsivePaddingStyle, dialogStyl
 });
 DialogCard.displayName = "ForwardRef(DialogCard)";
 const Dialog = react.forwardRef(function(props, ref) {
-  const dialog = useDialog(), {
+  const $ = reactCompilerRuntime.c(60), 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, _positionProp, _zOffsetProp, 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,
@@ -5513,15 +5545,18 @@ const Dialog = react.forwardRef(function(props, ref) {
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 3,
+    padding: t4,
     portal: portalProp,
-    position: positionProp = dialog.position || "fixed",
+    position: _positionProp,
     scheme,
-    width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
-    animate: _animate = !1,
+    width: t5,
+    zOffset: _zOffsetProp,
+    animate: t6,
     ...restProps
-  } = props, animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null), handleFocus = react.useCallback((event) => {
+  } = props, $[0] = props, $[1] = t0, $[2] = t1, $[3] = t2, $[4] = t3, $[5] = t4, $[6] = t5, $[7] = t6, $[8] = _positionProp, $[9] = _zOffsetProp, $[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], _positionProp = $[8], _zOffsetProp = $[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 = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = react.useRef(null), postDivRef = react.useRef(null), cardRef = react.useRef(null), focusedElementRef = react.useRef(null);
+  let t7;
+  $[22] !== onFocus ? (t7 = (event) => {
     onFocus?.(event);
     const target = event.target, cardElement = cardRef.current;
     if (cardElement && target === preDivRef.current) {
@@ -5533,7 +5568,10 @@ const Dialog = react.forwardRef(function(props, ref) {
       return;
     }
     isHTMLElement(event.target) && (focusedElementRef.current = event.target);
-  }, [onFocus]), labelId = `${id}_label`, rootClickTimeoutRef = react.useRef(), handleRootClick = react.useCallback(() => {
+  }, $[22] = onFocus, $[23] = t7) : t7 = $[23];
+  const handleFocus = t7, labelId = `${id}_label`, rootClickTimeoutRef = react.useRef();
+  let t8;
+  $[24] !== boundaryElement || $[25] !== portalElement ? (t8 = () => {
     rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
       const activeElement = document.activeElement;
       if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
@@ -5546,12 +5584,22 @@ const Dialog = react.forwardRef(function(props, ref) {
         target_0.focus();
       }
     }, 0);
-  }, [boundaryElement, portalElement]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: portalProp, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: preDivRef, tabIndex: 0 }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { ref: postDivRef, tabIndex: 0 })
-  ] }) });
+  }, $[24] = boundaryElement, $[25] = portalElement, $[26] = t8) : t8 = $[26];
+  const handleRootClick = t8;
+  let t9;
+  $[27] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: preDivRef, tabIndex: 0 }), $[27] = t9) : t9 = $[27];
+  let t10;
+  $[28] !== autoFocus || $[29] !== hideCloseButton || $[30] !== contentRef || $[31] !== footer || $[32] !== header || $[33] !== id || $[34] !== onClickOutside || $[35] !== onClose || $[36] !== portalProp || $[37] !== cardRadius || $[38] !== scheme || $[39] !== cardShadow || $[40] !== width || $[41] !== children ? (t10 = /* @__PURE__ */ jsxRuntime.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 }), $[28] = autoFocus, $[29] = hideCloseButton, $[30] = contentRef, $[31] = footer, $[32] = header, $[33] = id, $[34] = onClickOutside, $[35] = onClose, $[36] = portalProp, $[37] = cardRadius, $[38] = scheme, $[39] = cardShadow, $[40] = width, $[41] = children, $[42] = t10) : t10 = $[42];
+  let t11;
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsxRuntime.jsx("div", { ref: postDivRef, tabIndex: 0 }), $[43] = t11) : t11 = $[43];
+  let t12;
+  $[44] !== restProps || $[45] !== animate || $[46] !== padding || $[47] !== position || $[48] !== labelId || $[49] !== id || $[50] !== onActivate || $[51] !== handleRootClick || $[52] !== handleFocus || $[53] !== ref || $[54] !== zOffset || $[55] !== t10 ? (t12 = /* @__PURE__ */ jsxRuntime.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: [
+    t9,
+    t10,
+    t11
+  ] }), $[44] = restProps, $[45] = animate, $[46] = padding, $[47] = position, $[48] = labelId, $[49] = id, $[50] = onActivate, $[51] = handleRootClick, $[52] = handleFocus, $[53] = ref, $[54] = zOffset, $[55] = t10, $[56] = t12) : t12 = $[56];
+  let t13;
+  return $[57] !== portalProp || $[58] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(Portal, { __unstable_name: portalProp, children: t12 }), $[57] = portalProp, $[58] = t12, $[59] = t13) : t13 = $[59], t13;
 });
 Dialog.displayName = "ForwardRef(Dialog)";
 function DialogProvider(props) {
@@ -5782,48 +5830,66 @@ const Root$5 = styledComponents.styled(Box)`
   outline: none;
   overflow: auto;
 `, Menu = react.forwardRef(function(props, forwardedRef) {
+  const $ = reactCompilerRuntime.c(50);
+  let t0, t1, _shouldFocus, onKeyDown, originElement, registerElement, onItemSelect, onClickOutside, onEscape, 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] = registerElement, $[7] = onItemSelect, $[8] = onClickOutside, $[9] = onEscape, $[10] = onItemClick, $[11] = children, $[12] = restProps;
+  } else
+    t0 = $[1], t1 = $[2], _shouldFocus = $[3], onKeyDown = $[4], originElement = $[5], registerElement = $[6], onItemSelect = $[7], onClickOutside = $[8], onEscape = $[9], onItemClick = $[10], children = $[11], restProps = $[12];
+  const padding = t0 === void 0 ? 1 : t0, space = t1 === void 0 ? 1 : t1, shouldFocus = _shouldFocus ?? (props.focusFirst && "first" || props.focusLast && "last" || null), ref = react.useRef(null);
+  let t2;
+  $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[13] = t2) : t2 = $[13], react.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 = react.useRef(null);
-  react.useImperativeHandle(forwardedRef, () => ref.current);
+    shouldFocus,
+    rootElementRef: ref
+  }, $[14] = onKeyDown, $[15] = originElement, $[16] = shouldFocus, $[17] = t3) : t3 = $[17];
   const {
-    isTopLayer
-  } = useLayer(), {
     activeElement,
     activeIndex,
     handleItemMouseEnter,
     handleItemMouseLeave,
     handleKeyDown,
     mount
-  } = useMenuController({
-    onKeyDown,
-    originElement,
-    shouldFocus,
-    rootElementRef: ref
-  }), unregisterElementRef = react.useRef(null), handleRefChange = react.useCallback((el) => {
+  } = useMenuController(t3), unregisterElementRef = react.useRef(null);
+  let t4;
+  $[18] !== registerElement ? (t4 = (el) => {
     unregisterElementRef.current && (unregisterElementRef.current(), unregisterElementRef.current = null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-  }, [registerElement]);
-  react.useEffect(() => {
+  }, $[18] = registerElement, $[19] = t4) : t4 = $[19];
+  const handleRefChange = t4;
+  let t5, t6;
+  $[20] !== onItemSelect || $[21] !== activeIndex ? (t5 = () => {
     onItemSelect && onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]), useClickOutsideEvent(isTopLayer && onClickOutside, () => [ref.current]), useGlobalKeyDown(react.useCallback((event) => {
+  }, t6 = [activeIndex, onItemSelect], $[20] = onItemSelect, $[21] = activeIndex, $[22] = t5, $[23] = t6) : (t5 = $[22], t6 = $[23]), react.useEffect(t5, t6);
+  let t7;
+  $[24] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => [ref.current], $[24] = t7) : t7 = $[24], useClickOutsideEvent(isTopLayer && onClickOutside, t7);
+  let t8;
+  $[25] !== isTopLayer || $[26] !== onEscape ? (t8 = (event) => {
     isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-  }, [isTopLayer, onEscape]));
-  const value = react.useMemo(() => ({
+  }, $[25] = isTopLayer, $[26] = onEscape, $[27] = t8) : t8 = $[27], useGlobalKeyDown(t8);
+  let t9, t10;
+  $[28] !== activeElement || $[29] !== activeIndex || $[30] !== mount || $[31] !== onClickOutside || $[32] !== onEscape || $[33] !== onItemClick || $[34] !== handleItemMouseEnter || $[35] !== handleItemMouseLeave || $[36] !== registerElement ? (t10 = {
     version: 0,
     activeElement,
     activeIndex,
@@ -5834,11 +5900,16 @@ const Root$5 = styledComponents.styled(Box)`
     onItemMouseEnter: handleItemMouseEnter,
     onItemMouseLeave: handleItemMouseLeave,
     registerElement,
-    // deprecated
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave
-  }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }) }) });
+  }, $[28] = activeElement, $[29] = activeIndex, $[30] = mount, $[31] = onClickOutside, $[32] = onEscape, $[33] = onItemClick, $[34] = handleItemMouseEnter, $[35] = handleItemMouseLeave, $[36] = registerElement, $[37] = t10) : t10 = $[37], t9 = t10;
+  const value = t9;
+  let t11;
+  $[38] !== space || $[39] !== children ? (t11 = /* @__PURE__ */ jsxRuntime.jsx(Stack, { space, children }), $[38] = space, $[39] = children, $[40] = t11) : t11 = $[40];
+  let t12;
+  $[41] !== restProps || $[42] !== handleKeyDown || $[43] !== padding || $[44] !== handleRefChange || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsxRuntime.jsx(Root$5, { "data-ui": "Menu", ...restProps, onKeyDown: handleKeyDown, padding, ref: handleRefChange, role: "menu", tabIndex: -1, children: t11 }), $[41] = restProps, $[42] = handleKeyDown, $[43] = padding, $[44] = handleRefChange, $[45] = t11, $[46] = t12) : t12 = $[46];
+  let t13;
+  return $[47] !== value || $[48] !== t12 ? (t13 = /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value, children: t12 }), $[47] = value, $[48] = t12, $[49] = t13) : t13 = $[49], t13;
 });
 Menu.displayName = "ForwardRef(Menu)";
 const MenuButton = react.forwardRef(function(props, forwardedRef) {
@@ -6052,20 +6123,23 @@ function useMenu() {
   return value;
 }
 function MenuGroup(props) {
-  const {
-    as = "button",
+  const $ = reactCompilerRuntime.c(77);
+  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 = 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, radius = t3 === void 0 ? 2 : t3, space = t4 === void 0 ? 3 : t4, tone = t5 === void 0 ? "default" : t5, menu = useMenu(), {
     scheme
   } = useRootTheme(), {
     activeElement,
@@ -6073,56 +6147,99 @@ function MenuGroup(props) {
     onClickOutside,
     onEscape,
     onItemClick,
-    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseEnter: _onItemMouseEnter,
     registerElement
-  } = menu, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1), handleMouseEnter = react.useCallback((event) => {
+  } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter, [rootElement, setRootElement] = react.useState(null), [open, setOpen] = react.useState(!1), [shouldFocus, setShouldFocus] = react.useState(null), active = !!activeElement && activeElement === rootElement, [withinMenu, setWithinMenu] = react.useState(!1);
+  let t6;
+  $[13] !== onItemMouseEnter ? (t6 = (event) => {
     setWithinMenu(!1), onItemMouseEnter(event), setOpen(!0);
-  }, [onItemMouseEnter]), handleMenuKeyDown = react.useCallback((event_0) => {
+  }, $[13] = onItemMouseEnter, $[14] = t6) : t6 = $[14];
+  const handleMouseEnter = t6;
+  let t7;
+  $[15] !== rootElement ? (t7 = (event_0) => {
     event_0.key === "ArrowLeft" && (event_0.stopPropagation(), setOpen(!1), requestAnimationFrame(() => {
       rootElement?.focus();
     }));
-  }, [rootElement]), handleClick = react.useCallback((event_1) => {
+  }, $[15] = rootElement, $[16] = t7) : t7 = $[16];
+  const handleMenuKeyDown = t7;
+  let t8;
+  $[17] !== onClick ? (t8 = (event_1) => {
     onClick?.(event_1), setShouldFocus("first"), setOpen(!0);
-  }, [onClick]), handleChildItemClick = react.useCallback(() => {
+  }, $[17] = onClick, $[18] = t8) : t8 = $[18];
+  const handleClick = t8;
+  let t9;
+  $[19] !== onItemClick ? (t9 = () => {
     setOpen(!1), onItemClick?.();
-  }, [onItemClick]), handleMenuMouseEnter = react.useCallback(() => setWithinMenu(!0), []);
-  react.useEffect(() => mount(rootElement), [mount, rootElement]), react.useEffect(() => {
+  }, $[19] = onItemClick, $[20] = t9) : t9 = $[20];
+  const handleChildItemClick = t9;
+  let t10;
+  $[21] === Symbol.for("react.memo_cache_sentinel") ? (t10 = () => setWithinMenu(!0), $[21] = t10) : t10 = $[21];
+  const handleMenuMouseEnter = t10;
+  let t11, t12;
+  $[22] !== mount || $[23] !== rootElement ? (t11 = () => mount(rootElement), t12 = [mount, rootElement], $[22] = mount, $[23] = rootElement, $[24] = t11, $[25] = t12) : (t11 = $[24], t12 = $[25]), react.useEffect(t11, t12);
+  let t13, t14;
+  $[26] !== active ? (t13 = () => {
     active || setOpen(!1);
-  }, [active]), react.useEffect(() => {
+  }, t14 = [active], $[26] = active, $[27] = t13, $[28] = t14) : (t13 = $[27], t14 = $[28]), react.useEffect(t13, t14);
+  let t15, t16;
+  $[29] !== open ? (t15 = () => {
     open || setWithinMenu(!1);
-  }, [open]), react.useEffect(() => {
-    if (!shouldFocus) return;
+  }, t16 = [open], $[29] = open, $[30] = t15, $[31] = t16) : (t15 = $[30], t16 = $[31]), react.useEffect(t15, t16);
+  let t17, t18;
+  $[32] !== shouldFocus ? (t17 = () => {
+    if (!shouldFocus)
+      return;
     const rafId = requestAnimationFrame(() => setShouldFocus(null));
     return () => cancelAnimationFrame(rafId);
-  }, [shouldFocus]);
-  const childMenu = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), handleKeyDown = react.useCallback((event_2) => {
+  }, t18 = [shouldFocus], $[32] = shouldFocus, $[33] = t17, $[34] = t18) : (t17 = $[33], t18 = $[34]), react.useEffect(t17, t18);
+  let t19;
+  $[35] !== onClickOutside || $[36] !== onEscape || $[37] !== handleChildItemClick || $[38] !== handleMenuKeyDown || $[39] !== registerElement || $[40] !== shouldFocus || $[41] !== children ? (t19 = /* @__PURE__ */ jsxRuntime.jsx(Menu, { onClickOutside, onEscape, onItemClick: handleChildItemClick, onKeyDown: handleMenuKeyDown, onMouseEnter: handleMenuMouseEnter, registerElement, shouldFocus, children }), $[35] = onClickOutside, $[36] = onEscape, $[37] = handleChildItemClick, $[38] = handleMenuKeyDown, $[39] = registerElement, $[40] = shouldFocus, $[41] = children, $[42] = t19) : t19 = $[42];
+  const childMenu = t19;
+  let t20;
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t20 = (event_2) => {
     const target = event_2.currentTarget;
     if (document.activeElement === target && event_2.key === "ArrowRight") {
       setShouldFocus("first"), setOpen(!0), setWithinMenu(!0);
       return;
     }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: /* @__PURE__ */ jsxRuntime.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: useArrayProp(radius), $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: as === "button" ? "button" : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
-    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-      react.isValidElement(IconComponent) && IconComponent,
-      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}) })
-  ] }) }) });
+  }, $[43] = t20) : t20 = $[43];
+  const handleKeyDown = t20, t21 = as === "button" ? withinMenu : void 0, t22 = as !== "button" ? withinMenu : void 0, t23 = !withinMenu && active ? "" : void 0, t24 = useArrayProp(radius), t25 = as === "button" ? "button" : void 0;
+  let t26;
+  $[44] !== IconComponent || $[45] !== fontSize2 ? (t26 = IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+    react.isValidElement(IconComponent) && IconComponent,
+    ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
+  ] }), $[44] = IconComponent, $[45] = fontSize2, $[46] = t26) : t26 = $[46];
+  let t27;
+  $[47] !== fontSize2 || $[48] !== text ? (t27 = /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }), $[47] = fontSize2, $[48] = text, $[49] = t27) : t27 = $[49];
+  let t28;
+  $[50] === Symbol.for("react.memo_cache_sentinel") ? (t28 = /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}), $[50] = t28) : t28 = $[50];
+  let t29;
+  $[51] !== fontSize2 ? (t29 = /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, children: t28 }), $[51] = fontSize2, $[52] = t29) : t29 = $[52];
+  let t30;
+  $[53] !== space || $[54] !== padding || $[55] !== t26 || $[56] !== t27 || $[57] !== t29 ? (t30 = /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: space, padding, children: [
+    t26,
+    t27,
+    t29
+  ] }), $[53] = space, $[54] = padding, $[55] = t26, $[56] = t27, $[57] = t29, $[58] = t30) : t30 = $[58];
+  let t31;
+  $[59] !== as || $[60] !== restProps || $[61] !== t21 || $[62] !== t22 || $[63] !== t23 || $[64] !== t24 || $[65] !== tone || $[66] !== scheme || $[67] !== handleClick || $[68] !== handleMouseEnter || $[69] !== t25 || $[70] !== t30 ? (t31 = /* @__PURE__ */ jsxRuntime.jsx(Selectable, { "data-as": as, "data-ui": "MenuGroup", forwardedAs: as, ...restProps, "aria-pressed": t21, "data-pressed": t22, "data-selected": t23, $radius: t24, $tone: tone, $scheme: scheme, onClick: handleClick, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, ref: setRootElement, tabIndex: -1, type: t25, children: t30 }), $[59] = as, $[60] = restProps, $[61] = t21, $[62] = t22, $[63] = t23, $[64] = t24, $[65] = tone, $[66] = scheme, $[67] = handleClick, $[68] = handleMouseEnter, $[69] = t25, $[70] = t30, $[71] = t31) : t31 = $[71];
+  let t32;
+  return $[72] !== popover || $[73] !== childMenu || $[74] !== open || $[75] !== t31 ? (t32 = /* @__PURE__ */ jsxRuntime.jsx(Popover, { ...popover, content: childMenu, "data-ui": "MenuGroup__popover", open, children: t31 }), $[72] = popover, $[73] = childMenu, $[74] = open, $[75] = t31, $[76] = t32) : t32 = $[76], t32;
 }
 MenuGroup.displayName = "MenuGroup";
 const MenuItem = react.forwardRef(function(props, forwardedRef) {
-  const {
-    as = "button",
+  const $ = reactCompilerRuntime.c(74);
+  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,
@@ -6130,25 +6247,33 @@ const MenuItem = react.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] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
-  react.useImperativeHandle(forwardedRef, () => ref.current), react.useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
-  const handleClick = react.useCallback((event) => {
+    onItemMouseEnter: _onItemMouseEnter,
+    onItemMouseLeave: _onItemMouseLeave
+  } = menu, onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter, onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave, [rootElement, setRootElement] = react.useState(null), active = !!activeElement && activeElement === rootElement, ref = react.useRef(null);
+  let t6;
+  $[23] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => ref.current, $[23] = t6) : t6 = $[23], react.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]), react.useEffect(t7, t8);
+  let t9;
+  $[29] !== disabled || $[30] !== onClick || $[31] !== onItemClick ? (t9 = (event) => {
     disabled || (onClick && onClick(event), onItemClick && onItemClick());
-  }, [disabled, onClick, onItemClick]), paddingProps = react.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,
@@ -6156,29 +6281,44 @@ const MenuItem = react.forwardRef(function(props, forwardedRef) {
     paddingRight,
     paddingBottom,
     paddingLeft
-  }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]), hotkeysFontSize = useArrayProp(fontSize2).map((s) => s - 1), setRef = react.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, t12 = useArrayProp(fontSize2);
+  let t13;
+  $[41] !== t12 ? (t13 = t12.map(_temp$1), $[41] = t12, $[42] = t13) : t13 = $[42];
+  const hotkeysFontSize = t13;
+  let t14;
+  $[43] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (el) => {
     ref.current = el, setRootElement(el);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.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: useArrayProp(radius), $padding: useArrayProp(0), $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__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
-      IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-        react.isValidElement(IconComponent) && IconComponent,
-        ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
-      ] }),
-      text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
-      hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
-        marginTop: -4,
-        marginBottom: -4
-      } }),
-      IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
-        react.isValidElement(IconRightComponent) && IconRightComponent,
-        ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
-      ] })
+  }, $[43] = t14) : t14 = $[43];
+  const setRef = t14, t15 = as === "button" && pressed, t16 = as !== "button" && pressed ? "" : void 0, t17 = active ? "" : void 0, t18 = disabled ? "" : void 0, t19 = useArrayProp(radius), t20 = useArrayProp(0), t21 = disabled ? "default" : tone, t22 = as === "button" ? "button" : void 0;
+  let t23;
+  $[44] !== IconComponent || $[45] !== text || $[46] !== IconRightComponent || $[47] !== fontSize2 || $[48] !== hotkeys || $[49] !== hotkeysFontSize || $[50] !== space || $[51] !== paddingProps ? (t23 = (IconComponent || text || IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { as: "span", gap: space, align: "center", ...paddingProps, children: [
+    IconComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconComponent) && IconComponent,
+      ReactIs.isValidElementType(IconComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {})
     ] }),
-    children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children })
-  ] });
+    text && /* @__PURE__ */ jsxRuntime.jsx(Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { size: fontSize2, textOverflow: "ellipsis", weight: "medium", children: text }) }),
+    hotkeys && /* @__PURE__ */ jsxRuntime.jsx(Hotkeys, { fontSize: hotkeysFontSize, keys: hotkeys, style: {
+      marginTop: -4,
+      marginBottom: -4
+    } }),
+    IconRightComponent && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size: fontSize2, children: [
+      react.isValidElement(IconRightComponent) && IconRightComponent,
+      ReactIs.isValidElementType(IconRightComponent) && /* @__PURE__ */ jsxRuntime.jsx(IconRightComponent, {})
+    ] })
+  ] }), $[44] = IconComponent, $[45] = text, $[46] = IconRightComponent, $[47] = fontSize2, $[48] = hotkeys, $[49] = hotkeysFontSize, $[50] = space, $[51] = paddingProps, $[52] = t23) : t23 = $[52];
+  let t24;
+  $[53] !== children || $[54] !== paddingProps ? (t24 = children && /* @__PURE__ */ jsxRuntime.jsx(Box, { as: "span", ...paddingProps, children }), $[53] = children, $[54] = paddingProps, $[55] = t24) : t24 = $[55];
+  let t25;
+  return $[56] !== restProps || $[57] !== t15 || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== as || $[62] !== t19 || $[63] !== t20 || $[64] !== t21 || $[65] !== scheme || $[66] !== disabled || $[67] !== handleClick || $[68] !== onItemMouseEnter || $[69] !== onItemMouseLeave || $[70] !== t22 || $[71] !== t23 || $[72] !== t24 ? (t25 = /* @__PURE__ */ jsxRuntime.jsxs(Selectable, { "data-ui": "MenuItem", ...restProps, "aria-pressed": t15, "data-pressed": t16, "data-selected": t17, "data-disabled": t18, forwardedAs: as, $radius: t19, $padding: t20, $tone: t21, $scheme: scheme, disabled, onClick: handleClick, onMouseEnter: onItemMouseEnter, onMouseLeave: onItemMouseLeave, ref: setRef, role: "menuitem", tabIndex: -1, type: t22, children: [
+    t23,
+    t24
+  ] }), $[56] = restProps, $[57] = t15, $[58] = t16, $[59] = t17, $[60] = t18, $[61] = as, $[62] = t19, $[63] = t20, $[64] = t21, $[65] = scheme, $[66] = disabled, $[67] = handleClick, $[68] = onItemMouseEnter, $[69] = onItemMouseLeave, $[70] = t22, $[71] = t23, $[72] = t24, $[73] = t25) : t25 = $[73], t25;
 });
 MenuItem.displayName = "ForwardRef(MenuItem)";
+function _temp$1(s) {
+  return s - 1;
+}
 const keyframe = styledComponents.keyframes`
   0% {
     background-position: 100%;