@sanity/ui 0.36.16 → 0.37.2

package/lib/sanity-ui.modern.js

@@ -3567,11 +3567,11 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-let _$D = t => t,
-    _t$E,
+let _$C = t => t,
+    _t$D,
     _t2$n,
     _t3$e;
-const ROOT_STYLE = css(_t$E || (_t$E = _$D`
+const ROOT_STYLE = css(_t$D || (_t$D = _$C`
   &:not([hidden]) {
     display: flex;
   }
@@ -3586,7 +3586,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_t2$n || (_t2$n = _$D`
+  return css(_t2$n || (_t2$n = _$C`
     --input-fg-color: ${0};
     --input-placeholder-color: ${0};
 
@@ -3677,7 +3677,7 @@ function textInputRepresentationStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$e || (_t3$e = _$D`
+  return css(_t3$e || (_t3$e = _$C`
     --card-bg-color: ${0};
     --card-fg-color: ${0};
     --input-box-shadow: none;
@@ -3813,8 +3813,8 @@ function responsiveShadowStyle(props) {
   return responsive(media, getResponsiveProp(props.$shadow), shadow => shadowStyle(shadows[shadow]));
 }
 
-let _$C = t => t,
-    _t$D,
+let _$B = t => t,
+    _t$C,
     _t2$m,
     _t3$d;
 function textBaseStyle(props) {
@@ -3826,7 +3826,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_t$D || (_t$D = _$C`
+  return css(_t$C || (_t$C = _$B`
     color: var(--card-fg-color);
 
     ${0}
@@ -3868,19 +3868,19 @@ function textBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$m || (_t2$m = _$C`
+  `), $accent && css(_t2$m || (_t2$m = _$B`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$d || (_t3$d = _$C`
+    `)), $muted && css(_t3$d || (_t3$d = _$B`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family, weights.bold);
 }
 
 const _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$B = t => t,
-    _t$C;
+let _$A = t => t,
+    _t$B;
 const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-const SpanWithTextOverflow$2 = styled.span(_t$C || (_t$C = _$B`
+const SpanWithTextOverflow$2 = styled.span(_t$B || (_t$B = _$A`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4183,8 +4183,8 @@ const Avatar = /*#__PURE__*/forwardRef(function Avatar(props, ref) {
   }, /*#__PURE__*/React.createElement("strong", null, initials)))));
 });
 
-let _$A = t => t,
-    _t$B;
+let _$z = t => t,
+    _t$A;
 
 function responsiveAvatarCounterSizeStyle(props) {
   const {
@@ -4209,7 +4209,7 @@ function avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_t$B || (_t$B = _$A`
+  return css(_t$A || (_t$A = _$z`
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
@@ -4255,9 +4255,9 @@ function childrenToElementArray(children) {
 
 const _excluded$E = ["children", "maxLength", "size", "tone"];
 
-let _$z = t => t,
-    _t$A;
-const BASE_STYLES = css(_t$A || (_t$A = _$z`
+let _$y = t => t,
+    _t$z;
+const BASE_STYLES = css(_t$z || (_t$z = _$y`
   white-space: nowrap;
 
   & > div {
@@ -4403,8 +4403,8 @@ const Box = /*#__PURE__*/forwardRef(function Box(props, ref) {
   }), props.children);
 });
 
-let _$y = t => t,
-    _t$z,
+let _$x = t => t,
+    _t$y,
     _t2$l,
     _t3$c;
 function labelBaseStyle(props) {
@@ -4416,7 +4416,7 @@ function labelBaseStyle(props) {
   const {
     fonts
   } = theme.sanity;
-  return css(_t$z || (_t$z = _$y`
+  return css(_t$y || (_t$y = _$x`
     text-transform: uppercase;
 
     ${0}
@@ -4436,19 +4436,19 @@ function labelBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$l || (_t2$l = _$y`
+  `), $accent && css(_t2$l || (_t2$l = _$x`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$c || (_t3$c = _$y`
+    `)), $muted && css(_t3$c || (_t3$c = _$x`
       color: var(--card-muted-fg-color);
     `)), fonts.code.family);
 }
 
 const _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$x = t => t,
-    _t$y;
+let _$w = t => t,
+    _t$x;
 const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_t$y || (_t$y = _$x`
+const SpanWithTextOverflow$1 = styled.span(_t$x || (_t$x = _$w`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4569,10 +4569,10 @@ const Flex = /*#__PURE__*/forwardRef(function Flex(props, ref) {
   }));
 });
 
-let _$w = t => t,
-    _t$x,
+let _$v = t => t,
+    _t$w,
     _t2$k;
-const rotate$1 = keyframes(_t$x || (_t$x = _$w`
+const rotate$1 = keyframes(_t$w || (_t$w = _$v`
   from {
     transform: rotate(0deg);
   }
@@ -4581,7 +4581,7 @@ const rotate$1 = keyframes(_t$x || (_t$x = _$w`
     transform: rotate(360deg);
   }
 `));
-const Root$w = styled(Text)(_t2$k || (_t2$k = _$w`
+const Root$w = styled(Text)(_t2$k || (_t2$k = _$v`
   & > span > svg {
     animation: ${0} 500ms linear infinite;
   }
@@ -4631,14 +4631,14 @@ function _colorVarsStyle(base, color, checkered = false) {
   };
 }
 
-let _$v = t => t,
-    _t$w;
+let _$u = t => t,
+    _t$v;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return css(_t$w || (_t$w = _$v`
+  return css(_t$v || (_t$v = _$u`
     -webkit-font-smoothing: inherit;
     appearance: none;
     display: inline-flex;
@@ -4722,10 +4722,10 @@ function buttonColorStyles(props) {
 
 const _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-let _$u = t => t,
-    _t$v;
+let _$t = t => t,
+    _t$u;
 const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_t$v || (_t$v = _$u`
+const LoadingBox = styled.div(_t$u || (_t$u = _$t`
   position: absolute;
   top: 0;
   left: 0;
@@ -4815,8 +4815,8 @@ const Button = /*#__PURE__*/forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-let _$t = t => t,
-    _t$u,
+let _$s = t => t,
+    _t$t,
     _t2$j,
     _t3$b;
 function cardStyle(props) {
@@ -4828,7 +4828,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_t$u || (_t$u = _$t`
+  return css(_t$t || (_t$t = _$s`
     ${0}
 
     &[data-as='button'] {
@@ -4851,7 +4851,7 @@ function cardBaseStyle(props) {
     &[data-as='pre'] {
       font: inherit;
     }
-  `), $checkered && css(_t2$j || (_t2$j = _$t`
+  `), $checkered && css(_t2$j || (_t2$j = _$s`
       background-size: ${0}px ${0}px;
       background-position: 50% 50%;
       background-image: var(--card-bg-image);
@@ -4876,7 +4876,7 @@ function cardColorStyle(props) {
     width: 0,
     color: 'var(--card-border-color)'
   };
-  return css(_t3$b || (_t3$b = _$t`
+  return css(_t3$b || (_t3$b = _$s`
     ${0}
 
     background-color: var(--card-bg-color);
@@ -5032,11 +5032,11 @@ const Card = /*#__PURE__*/forwardRef(function Card(props, ref) {
   })));
 });
 
-let _$s = t => t,
-    _t$t,
+let _$r = t => t,
+    _t$s,
     _t2$i;
 function checkboxBaseStyles() {
-  return css(_t$t || (_t$t = _$s`
+  return css(_t$s || (_t$s = _$r`
     position: relative;
     display: inline-block;
   `));
@@ -5051,7 +5051,7 @@ function inputElementStyles(props) {
     input,
     radius
   } = theme.sanity;
-  return css(_t2$i || (_t2$i = _$s`
+  return css(_t2$i || (_t2$i = _$r`
     position: absolute;
     top: 0;
     left: 0;
@@ -5178,8 +5178,8 @@ const Checkbox = /*#__PURE__*/forwardRef(function Checkbox(props, forwardedRef)
   })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(CheckmarkIcon, null), /*#__PURE__*/React.createElement(RemoveIcon, null)));
 });
 
-let _$r = t => t,
-    _t$s;
+let _$q = t => t,
+    _t$r;
 
 function codeSyntaxHighlightingStyle({
   theme
@@ -5298,7 +5298,7 @@ function codeSyntaxHighlightingStyle({
 }
 
 function codeBaseStyle() {
-  return css(_t$s || (_t$s = _$r`
+  return css(_t$r || (_t$r = _$q`
     color: var(--card-code-fg-color);
 
     & code {
@@ -5431,8 +5431,8 @@ const Grid = /*#__PURE__*/forwardRef(function Grid(props, ref) {
   }), children);
 });
 
-let _$q = t => t,
-    _t$r,
+let _$p = t => t,
+    _t$q,
     _t2$h,
     _t3$a;
 function headingBaseStyle(props) {
@@ -5441,7 +5441,7 @@ function headingBaseStyle(props) {
     $muted,
     theme
   } = props;
-  return css(_t$r || (_t$r = _$q`
+  return css(_t$q || (_t$q = _$p`
     ${0}
 
     ${0}
@@ -5475,19 +5475,19 @@ function headingBaseStyle(props) {
     & [data-sanity-icon] {
       vertical-align: baseline;
     }
-  `), $accent && css(_t2$h || (_t2$h = _$q`
+  `), $accent && css(_t2$h || (_t2$h = _$p`
       color: var(--card-accent-fg-color);
-    `)), $muted && css(_t3$a || (_t3$a = _$q`
+    `)), $muted && css(_t3$a || (_t3$a = _$p`
       color: var(--card-muted-fg-color);
     `)), theme.sanity.fonts.code.family);
 }
 
 const _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-let _$p = t => t,
-    _t$q;
+let _$o = t => t,
+    _t$p;
 const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_t$q || (_t$q = _$p`
+const SpanWithTextOverflow = styled.span(_t$p || (_t$p = _$o`
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -5582,11 +5582,11 @@ const Inline = /*#__PURE__*/forwardRef(function Inline(props, ref) {
 
 const _excluded$r = ["children", "fontSize", "padding", "radius"];
 
-let _$o = t => t,
-    _t$p;
+let _$n = t => t,
+    _t$o;
 
 function kbdStyle() {
-  return css(_t$p || (_t$p = _$o`
+  return css(_t$o || (_t$o = _$n`
     background: var(--card-bg-color);
     font: inherit;
     box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);
@@ -5850,9 +5850,9 @@ function LayerProvider(props) {
 const _excluded$p = ["children", "style"],
       _excluded2$1 = ["children", "zOffset"];
 
-let _$n = t => t,
-    _t$o;
-const Root$m = styled.div(_t$o || (_t$o = _$n`
+let _$m = t => t,
+    _t$n;
+const Root$m = styled.div(_t$n || (_t$n = _$m`
   position: relative;
 `));
 const LayerChildren = /*#__PURE__*/forwardRef(function LayerChildren(props, ref) {
@@ -6002,9 +6002,9 @@ function PortalProvider(props) {
   }, children);
 }
 
-let _$m = t => t,
-    _t$n;
-const Root$l = styled.div(_t$n || (_t$n = _$m`
+let _$l = t => t,
+    _t$m;
+const Root$l = styled.div(_t$m || (_t$m = _$l`
   display: block;
   width: 0;
   height: 0;
@@ -6196,13 +6196,13 @@ function _isScrollable(el) {
 
 const _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-let _$l = t => t,
-    _t$m,
+let _$k = t => t,
+    _t$l,
     _t2$g;
-const Root$k = styled.div(_t$m || (_t$m = _$l`
+const Root$k = styled.div(_t$l || (_t$l = _$k`
   position: relative;
 `));
-const ItemWrapper = styled.div(_t2$g || (_t2$g = _$l`
+const ItemWrapper = styled.div(_t2$g || (_t2$g = _$k`
   position: absolute;
   left: 0;
   right: 0;
@@ -6340,11 +6340,11 @@ const VirtualList = /*#__PURE__*/forwardRef(function VirtualList(props, ref) {
   }, children));
 });
 
-let _$k = t => t,
-    _t$l,
+let _$j = t => t,
+    _t$k,
     _t2$f,
     _t3$9;
-const Root$j = styled.div(_t$l || (_t$l = _$k`
+const Root$j = styled.div(_t$k || (_t$k = _$j`
   position: absolute;
   pointer-events: none;
   width: 27px;
@@ -6388,10 +6388,10 @@ const Root$j = styled.div(_t$l || (_t$l = _$k`
     }
   }
 `));
-const BorderPath = styled.path(_t2$f || (_t2$f = _$k`
+const BorderPath = styled.path(_t2$f || (_t2$f = _$j`
   fill: var(--card-shadow-outline-color);
 `));
-const ShapePath = styled.path(_t3$9 || (_t3$9 = _$k`
+const ShapePath = styled.path(_t3$9 || (_t3$9 = _$j`
   fill: var(--card-bg-color);
 `));
 const PopoverArrow = /*#__PURE__*/forwardRef(function PopoverArrow(props, ref) {
@@ -6588,12 +6588,12 @@ function usePopoverModifiers(props) {
 const _excluded$n = ["__unstable_margins", "allowedAutoPlacements", "arrow", "boundaryElement", "children", "content", "constrainSize", "disabled", "fallbackPlacements", "open", "padding", "placement", "portal", "preventOverflow", "radius", "referenceElement", "matchReferenceWidth", "shadow", "scheme", "style", "tether", "tetherOffset", "tone", "width", "zOffset"];
 
 let _2 = t => t,
-    _t$k,
+    _t$j,
     _t2$e,
     _t3$8;
 const Root$i = styled(Layer)(({
   $preventOverflow
-}) => css(_t$k || (_t$k = _2`
+}) => css(_t$j || (_t$j = _2`
     pointer-events: none;
     display: flex;
     flex-direction: column;
@@ -6754,11 +6754,11 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(props, ref) {
   }, node), !portalProp && node));
 });
 
-let _$j = t => t,
-    _t$j,
+let _$i = t => t,
+    _t$i,
     _t2$d;
 function radioBaseStyle() {
-  return css(_t$j || (_t$j = _$j`
+  return css(_t$i || (_t$i = _$i`
     position: relative;
 
     &:not([hidden]) {
@@ -6780,7 +6780,7 @@ function inputElementStyle(props) {
   } = theme.sanity;
   const color = theme.sanity.color.input;
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  return css(_t2$d || (_t2$d = _$j`
+  return css(_t2$d || (_t2$d = _$i`
     appearance: none;
     position: absolute;
     top: 0;
@@ -6898,14 +6898,14 @@ const Radio = /*#__PURE__*/forwardRef(function Radio(props, forwardedRef) {
   })), /*#__PURE__*/React.createElement("span", null));
 });
 
-let _$i = t => t,
-    _t$i,
+let _$h = t => t,
+    _t$h,
     _t2$c,
     _t3$7,
     _t4$5;
 
 function rootStyle() {
-  return css(_t$i || (_t$i = _$i`
+  return css(_t$h || (_t$h = _$h`
     position: relative;
     width: stretch;
 
@@ -6920,7 +6920,7 @@ function inputBaseStyle(props) {
     theme
   } = props;
   const font = theme.sanity.fonts.text;
-  return css(_t2$c || (_t2$c = _$i`
+  return css(_t2$c || (_t2$c = _$h`
     -webkit-font-smoothing: antialiased;
     appearance: none;
     border: 0;
@@ -6945,7 +6945,7 @@ function inputColorStyle(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.input;
-  return css(_t3$7 || (_t3$7 = _$i`
+  return css(_t3$7 || (_t3$7 = _$h`
     /* enabled */
     background-color: ${0};
     color: ${0};
@@ -7026,7 +7026,7 @@ function iconBoxStyle(props) {
     theme
   } = props;
   const color = theme.sanity.color.input;
-  return css(_t4$5 || (_t4$5 = _$i`
+  return css(_t4$5 || (_t4$5 = _$h`
     pointer-events: none;
     position: absolute;
     top: 0;
@@ -7151,8 +7151,8 @@ const Stack = /*#__PURE__*/forwardRef(function Stack(props, ref) {
   }));
 });
 
-let _$h = t => t,
-    _t$h,
+let _$g = t => t,
+    _t$g,
     _t2$b,
     _t3$6,
     _t4$4,
@@ -7162,7 +7162,7 @@ let _$h = t => t,
 /* Root */
 
 function switchBaseStyles() {
-  return css(_t$h || (_t$h = _$h`
+  return css(_t$g || (_t$g = _$g`
     position: relative;
     &:not([hidden]) {
       display: inline-block;
@@ -7173,7 +7173,7 @@ function switchBaseStyles() {
 
 function switchInputStyles() {
   // Visually hide the input element while keeping it interactive
-  return css(_t2$b || (_t2$b = _$h`
+  return css(_t2$b || (_t2$b = _$g`
     position: absolute;
     top: 0;
     right: 0;
@@ -7201,7 +7201,7 @@ function switchRepresentationStyles(props) {
     input
   } = theme.sanity;
   const color = theme.sanity.color.button.default;
-  return css(_t3$6 || (_t3$6 = _$h`
+  return css(_t3$6 || (_t3$6 = _$g`
     --switch-bg-color: ${0};
     --switch-fg-color: ${0};
     --switch-box-shadow: none;
@@ -7273,7 +7273,7 @@ function switchTrackStyles(props) {
   const {
     input
   } = theme.sanity;
-  return css(_t4$4 || (_t4$4 = _$h`
+  return css(_t4$4 || (_t4$4 = _$g`
     &:not([hidden]) {
       display: block;
     }
@@ -7303,7 +7303,7 @@ function switchThumbStyles(props) {
   const checkedOffset = trackWidth - trackPadding * 2 - size;
   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding;
   const checked = $indeterminate !== true && props.$checked === true;
-  return css(_t5$3 || (_t5$3 = _$h`
+  return css(_t5$3 || (_t5$3 = _$g`
     &:not([hidden]) {
       display: block;
     }
@@ -7322,9 +7322,9 @@ function switchThumbStyles(props) {
     ${0}
 
     ${0}
-  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$1 || (_t6$1 = _$h`
+  `), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_t6$1 || (_t6$1 = _$g`
       transform: translate3d(${0}px, 0, 0);
-    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$h`
+    `), checkedOffset), $indeterminate && css(_t7 || (_t7 = _$g`
       transform: translate3d(${0}px, 0, 0);
     `), indeterminateOffset));
 }
@@ -7379,10 +7379,10 @@ const Switch = /*#__PURE__*/forwardRef(function Switch(props, forwardedRef) {
 
 const _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
 
-let _$g = t => t,
-    _t$g;
+let _$f = t => t,
+    _t$f;
 const Root$d = styled.span(textInputRootStyle);
-const InputRoot$1 = styled.span(_t$g || (_t$g = _$g`
+const InputRoot$1 = styled.span(_t$f || (_t$f = _$f`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7424,8 +7424,8 @@ const TextArea = /*#__PURE__*/forwardRef(function TextArea(props, forwardedRef)
 
 const _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
 
-let _$f = t => t,
-    _t$f,
+let _$e = t => t,
+    _t$e,
     _t2$a,
     _t3$5,
     _t4$3,
@@ -7434,7 +7434,7 @@ const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 const Root$c = styled.span(textInputRootStyle);
-const InputRoot = styled.span(_t$f || (_t$f = _$f`
+const InputRoot = styled.span(_t$e || (_t$e = _$e`
   flex: 1;
   min-width: 0;
   display: block;
@@ -7442,7 +7442,7 @@ const InputRoot = styled.span(_t$f || (_t$f = _$f`
 `));
 const Prefix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t2$a || (_t2$a = _$f`
+})(_t2$a || (_t2$a = _$e`
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 
@@ -7453,7 +7453,7 @@ const Prefix = styled(Card).attrs({
 `));
 const Suffix = styled(Card).attrs({
   forwardedAs: 'span'
-})(_t3$5 || (_t3$5 = _$f`
+})(_t3$5 || (_t3$5 = _$e`
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 
@@ -7464,12 +7464,12 @@ const Suffix = styled(Card).attrs({
 `));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
-const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$f`
+const LeftBox = styled(Box)(_t4$3 || (_t4$3 = _$e`
   position: absolute;
   top: 0;
   left: 0;
 `));
-const RightCard = styled(Card)(_t5$2 || (_t5$2 = _$f`
+const RightCard = styled(Card)(_t5$2 || (_t5$2 = _$e`
   background-color: transparent;
   position: absolute;
   top: 0;
@@ -7593,11 +7593,11 @@ const TextInput = /*#__PURE__*/forwardRef(function TextInput(props, forwardedRef
   })), presentationNode, clearButtonNode), suffixNode);
 });
 
-let _$e = t => t,
-    _t$e,
+let _$d = t => t,
+    _t$d,
     _t2$9,
     _t3$4;
-const Root$b = styled.div(_t$e || (_t$e = _$e`
+const Root$b = styled.div(_t$d || (_t$d = _$d`
   position: absolute;
   width: 15px;
   height: 15px;
@@ -7642,10 +7642,10 @@ const Root$b = styled.div(_t$e || (_t$e = _$e`
     }
   }
 `));
-const Border = styled.path(_t2$9 || (_t2$9 = _$e`
+const Border = styled.path(_t2$9 || (_t2$9 = _$d`
   fill: var(--card-shadow-outline-color);
 `));
-const Shape = styled.path(_t3$4 || (_t3$4 = _$e`
+const Shape = styled.path(_t3$4 || (_t3$4 = _$d`
   fill: var(--card-bg-color);
 `));
 const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
@@ -7666,9 +7666,9 @@ const TooltipArrow = /*#__PURE__*/forwardRef(function TooltipArrow(props, ref) {
 
 const _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
 
-let _$d = t => t,
-    _t$d;
-const Root$a = styled(Layer)(_t$d || (_t$d = _$d`
+let _$c = t => t,
+    _t$c;
+const Root$a = styled(Layer)(_t$c || (_t$c = _$c`
   pointer-events: none;
 `));
 /**
@@ -7802,8 +7802,8 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
   }, popperNode), !portal && popperNode));
 });
 
-let _$c = t => t,
-    _t$c,
+let _$b = t => t,
+    _t$b,
     _t2$8,
     _t3$3,
     _t4$2,
@@ -7812,14 +7812,14 @@ let _$c = t => t,
  * @internal
  */
 
-const Root$9 = styled.div(_t$c || (_t$c = _$c`
+const Root$9 = styled.div(_t$b || (_t$b = _$b`
   /* position: relative; */
 `));
 /**
  * @internal
  */
 
-const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$c`
+const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$b`
   & > ul {
     list-style: none;
     padding: 0;
@@ -7830,7 +7830,7 @@ const ListBox = styled(Box)(_t2$8 || (_t2$8 = _$c`
  * @internal
  */
 
-const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$c`
+const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$b`
   & > div {
     overflow: auto;
     -webkit-overflow-scrolling: touch;
@@ -7840,7 +7840,7 @@ const ResultsPopover = styled(Popover)(_t3$3 || (_t3$3 = _$c`
     display: none;
   }
 `));
-const rotate = keyframes(_t4$2 || (_t4$2 = _$c`
+const rotate = keyframes(_t4$2 || (_t4$2 = _$b`
   from {
     transform: rotate(0deg);
   }
@@ -7853,7 +7853,7 @@ const rotate = keyframes(_t4$2 || (_t4$2 = _$c`
  * @internal
  */
 
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_t5$1 || (_t5$1 = _$c`
+const AnimatedSpinnerIcon = styled(SpinnerIcon)(_t5$1 || (_t5$1 = _$b`
   animation: ${0} 500ms linear infinite;
 `), rotate);
 
@@ -8397,7 +8397,9 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
       return renderPopover({
         content,
         hidden: !expanded,
-        inputElement: inputElementRef.current
+        inputElement: inputElementRef.current,
+        onMouseEnter: handlePopoverMouseEnter,
+        onMouseLeave: handlePopoverMouseLeave
       }, setResultsPopoverElement);
     }
 
@@ -8436,10 +8438,10 @@ const InnerAutocomplete = /*#__PURE__*/forwardRef(function InnerAutocomplete(pro
 
 const Autocomplete = InnerAutocomplete;
 
-let _$b = t => t,
-    _t$b,
+let _$a = t => t,
+    _t$a,
     _t2$7;
-const Root$8 = styled.ol(_t$b || (_t$b = _$b`
+const Root$8 = styled.ol(_t$a || (_t$a = _$a`
   margin: 0;
   padding: 0;
   display: flex;
@@ -8448,7 +8450,7 @@ const Root$8 = styled.ol(_t$b || (_t$b = _$b`
   white-space: nowrap;
   line-height: 0;
 `));
-const ExpandButton = styled(Button)(_t2$7 || (_t2$7 = _$b`
+const ExpandButton = styled(Button)(_t2$7 || (_t2$7 = _$a`
   appearance: none;
   margin: -4px;
 `));
@@ -8578,15 +8580,15 @@ function useDialog() {
 
 const _excluded$d = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"];
 
-let _$a = t => t,
-    _t$a,
+let _$9 = t => t,
+    _t$9,
     _t2$6,
     _t3$2,
     _t4$1,
     _t5,
     _t6;
 const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-const DialogContainer = styled(Container)(_t$a || (_t$a = _$a`
+const DialogContainer = styled(Container)(_t$9 || (_t$9 = _$9`
   &:not([hidden]) {
     display: flex;
   }
@@ -8596,7 +8598,7 @@ const DialogContainer = styled(Container)(_t$a || (_t$a = _$a`
   align-items: center;
   justify-content: center;
 `));
-const DialogCardRoot = styled(Card)(_t2$6 || (_t2$6 = _$a`
+const DialogCardRoot = styled(Card)(_t2$6 || (_t2$6 = _$9`
   &:not([hidden]) {
     display: flex;
   }
@@ -8605,12 +8607,12 @@ const DialogCardRoot = styled(Card)(_t2$6 || (_t2$6 = _$a`
   max-height: 100%;
   overflow: hidden;
 `));
-const DialogLayout = styled(Flex)(_t3$2 || (_t3$2 = _$a`
+const DialogLayout = styled(Flex)(_t3$2 || (_t3$2 = _$9`
   flex: 1;
   min-height: 0;
   width: 100%;
 `));
-const DialogHeader = styled(Card)(_t4$1 || (_t4$1 = _$a`
+const DialogHeader = styled(Card)(_t4$1 || (_t4$1 = _$9`
   position: relative;
   z-index: 2;
 
@@ -8624,13 +8626,13 @@ const DialogHeader = styled(Card)(_t4$1 || (_t4$1 = _$a`
     border-bottom: 1px solid var(--card-hairline-soft-color);
   }
 `));
-const DialogContent = styled(Box)(_t5 || (_t5 = _$a`
+const DialogContent = styled(Box)(_t5 || (_t5 = _$9`
   position: relative;
   z-index: 1;
   overflow: auto;
   outline: none;
 `));
-const DialogFooter = styled(Box)(_t6 || (_t6 = _$a`
+const DialogFooter = styled(Box)(_t6 || (_t6 = _$9`
   position: relative;
   z-index: 3;
   border-top: 1px solid var(--card-hairline-soft-color);
@@ -8832,16 +8834,16 @@ function DialogProvider(props) {
 
 const _excluded$c = ["fontSize", "keys", "padding", "radius", "space"];
 
-let _$9 = t => t,
-    _t$9,
+let _$8 = t => t,
+    _t$8,
     _t2$5;
-const Root$6 = styled.kbd(_t$9 || (_t$9 = _$9`
+const Root$6 = styled.kbd(_t$8 || (_t$8 = _$8`
   &:not([hidden]) {
     display: block;
   }
   font: inherit;
 `));
-const Key = styled(KBD)(_t2$5 || (_t2$5 = _$9`
+const Key = styled(KBD)(_t2$5 || (_t2$5 = _$8`
   &:not([hidden]) {
     display: block;
   }
@@ -8879,6 +8881,10 @@ const Hotkeys = /*#__PURE__*/forwardRef(function Hotkeys(props, ref) {
   }, key))));
 });
 
+const key$2 = Symbol.for('@sanity/ui/context/menu');
+globalScope[key$2] = globalScope[key$2] || /*#__PURE__*/createContext(null);
+const MenuContext = globalScope[key$2];
+
 /**
  * @internal
  */
@@ -8953,52 +8959,29 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 
-const key$2 = Symbol.for('@sanity/ui/context/menu');
-globalScope[key$2] = globalScope[key$2] || /*#__PURE__*/createContext(null);
-const MenuContext = globalScope[key$2];
-
-const _excluded$b = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"];
-
-let _$8 = t => t,
-    _t$8;
-const Root$5 = styled(Box)(_t$8 || (_t$8 = _$8`
-  outline: none;
-  overflow: auto;
-`));
 /**
- * @public
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
  */
 
-const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
+function useMenuController(props) {
   const {
-    children,
-    onClickOutside,
-    onEscape,
-    onItemClick,
-    onItemSelect,
     onKeyDown,
     originElement,
-    padding = 1,
-    registerElement,
-    shouldFocus = props.focusFirst && 'first' || props.focusLast && 'last' || null,
-    space = 1
-  } = props,
-        restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
-
-  const {
-    isTopLayer
-  } = useLayer();
-  const [rootElement, setRootElement] = useState(null);
+    shouldFocus
+  } = props;
   const elementsRef = useRef([]);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const activeIndexRef = useRef(activeIndex);
+  const [rootElement, setRootElement] = useState(null);
+  const [activeIndex, _setActiveIndex] = useState(-1);
   const activeElement = elementsRef.current[activeIndex] || null;
-  const activeElementRef = useRef(activeElement);
+  const activeIndexRef = useRef(activeIndex);
   const mounted = Boolean(rootElement);
-  const setRef = useCallback(el => {
-    setRootElement(el);
-    if (typeof ref === 'function') ref(el);else if (ref) ref.current = el;
-  }, [ref]);
+  const setActiveIndex = useCallback(nextActiveIndex => {
+    _setActiveIndex(nextActiveIndex);
+
+    activeIndexRef.current = nextActiveIndex;
+  }, []);
   const mount = useCallback((element, selected) => {
     if (!element) return () => undefined;
 
@@ -9011,7 +8994,6 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
     if (selected) {
       const selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
-      activeIndexRef.current = selectedIndex;
     }
 
     return () => {
@@ -9021,7 +9003,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
         elementsRef.current.splice(idx, 1);
       }
     };
-  }, [rootElement]);
+  }, [rootElement, setActiveIndex]);
   const handleKeyDown = useCallback(event => {
     // Move focus to the element that opened the menu before handling the `Tab` press
     if (event.key === 'Tab') {
@@ -9043,7 +9025,6 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
       if (!el) return;
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
-      activeIndexRef.current = currentIndex;
       return;
     } // Move focus to the last focusable menuitem
 
@@ -9058,7 +9039,6 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
       if (!el) return;
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
-      activeIndexRef.current = currentIndex;
       return;
     }
 
@@ -9076,7 +9056,6 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
       const el = focusableElements[focusedIndex];
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
-      activeIndexRef.current = currentIndex;
       return;
     }
 
@@ -9094,32 +9073,22 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
       const el = focusableElements[focusedIndex];
       const currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
-      activeIndexRef.current = currentIndex;
       return;
     }
 
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [activeIndex, onKeyDown, originElement]);
+  }, [activeIndex, onKeyDown, originElement, setActiveIndex]);
   const handleItemMouseEnter = useCallback(event => {
     const element = event.currentTarget;
     const currentIndex = elementsRef.current.indexOf(element);
     setActiveIndex(currentIndex);
-    activeIndexRef.current = currentIndex;
-  }, []);
+  }, [setActiveIndex]);
   const handleItemMouseLeave = useCallback(() => {
     rootElement == null ? void 0 : rootElement.focus();
     setActiveIndex(-1);
-    activeIndexRef.current = -1;
-  }, [rootElement]); // Trigger `onItemSelect` when active index changes
-
-  useEffect(() => {
-    if (onItemSelect) onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]);
-  useEffect(() => {
-    activeElementRef.current = activeElement;
-  }, [activeElement]); // Set focus on the currently active element
+  }, [rootElement, setActiveIndex]); // Set focus on the currently active element
 
   useEffect(() => {
     if (!mounted) return;
@@ -9160,8 +9129,76 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
     return () => {
       window.cancelAnimationFrame(rafId);
     };
-  }, [activeIndex, mounted, shouldFocus]);
-  useClickOutside(useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]);
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus]);
+  return {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement
+  };
+}
+
+const _excluded$b = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"];
+
+let _$7 = t => t,
+    _t$7;
+const Root$5 = styled(Box)(_t$7 || (_t$7 = _$7`
+  outline: none;
+  overflow: auto;
+`));
+/**
+ * @public
+ */
+
+const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
+  const {
+    children,
+    onClickOutside,
+    onEscape,
+    onItemClick,
+    onItemSelect,
+    onKeyDown,
+    originElement,
+    padding = 1,
+    registerElement,
+    shouldFocus = props.focusFirst && 'first' || props.focusLast && 'last' || null,
+    space = 1
+  } = props,
+        restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+
+  const forwardedRef = useForwardedRef(ref);
+  const {
+    isTopLayer
+  } = useLayer();
+  const {
+    activeElement,
+    activeIndex,
+    handleItemMouseEnter,
+    handleItemMouseLeave,
+    handleKeyDown,
+    mount,
+    rootElement,
+    setRootElement
+  } = useMenuController({
+    onKeyDown,
+    originElement,
+    shouldFocus
+  });
+  const handleRefChange = useCallback(el => {
+    setRootElement(el);
+    forwardedRef.current = el;
+  }, [forwardedRef, setRootElement]); // Trigger `onItemSelect` when active index changes
+
+  useEffect(() => {
+    if (onItemSelect) onItemSelect(activeIndex);
+  }, [activeIndex, onItemSelect]); // Close menu when clicking outside
+
+  useClickOutside(useCallback(event => isTopLayer && onClickOutside && onClickOutside(event), [isTopLayer, onClickOutside]), [rootElement]); // Close menu when pressing Escape
+
   useGlobalKeyDown(useCallback(event => {
     if (!isTopLayer) return;
 
@@ -9169,7 +9206,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
       event.stopPropagation();
       if (onEscape) onEscape();
     }
-  }, [isTopLayer, onEscape]));
+  }, [isTopLayer, onEscape])); // Register root element (for nested menus)
+
   useEffect(() => {
     if (!rootElement || !registerElement) return;
     return registerElement(rootElement);
@@ -9181,10 +9219,13 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
     mount,
     onClickOutside,
     onEscape,
-    onMouseEnter: handleItemMouseEnter,
-    onMouseLeave: handleItemMouseLeave,
     onItemClick,
-    registerElement
+    onItemMouseEnter: handleItemMouseEnter,
+    onItemMouseLeave: handleItemMouseLeave,
+    registerElement,
+    // deprecated
+    onMouseEnter: handleItemMouseEnter,
+    onMouseLeave: handleItemMouseLeave
   }), [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
   return /*#__PURE__*/React.createElement(MenuContext.Provider, {
     value: value
@@ -9193,7 +9234,7 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(props, ref) {
   }, restProps, {
     onKeyDown: handleKeyDown,
     padding: padding,
-    ref: setRef,
+    ref: handleRefChange,
     role: "menu",
     tabIndex: -1
   }), /*#__PURE__*/React.createElement(Stack, {
@@ -9355,24 +9396,24 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(props, ref) {
   }), button || /*#__PURE__*/React.createElement(React.Fragment, null));
 });
 
-let _$7 = t => t,
-    _t$7;
+let _$6 = t => t,
+    _t$6;
 /**
  * @public
  */
 
-const MenuDivider = styled.hr(_t$7 || (_t$7 = _$7`
+const MenuDivider = styled.hr(_t$6 || (_t$6 = _$6`
   height: 1px;
   border: 0;
   background: var(--card-hairline-soft-color);
   margin: 0;
 `));
 
-let _$6 = t => t,
-    _t$6,
+let _$5 = t => t,
+    _t$5,
     _t2$4;
 function selectableBaseStyle() {
-  return css(_t$6 || (_t$6 = _$6`
+  return css(_t$5 || (_t$5 = _$5`
     background-color: inherit;
     color: inherit;
 
@@ -9406,7 +9447,7 @@ function selectableColorStyle(props) {
   } = theme.sanity.color; // @todo: remove use of `muted` here
 
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_t2$4 || (_t2$4 = _$6`
+  return css(_t2$4 || (_t2$4 = _$5`
     ${0}
 
     background-color: var(--card-bg-color);
@@ -9499,21 +9540,7 @@ function useMenu() {
   return value;
 }
 
-const _excluded$a = ["as", "children", "fontSize", "onClick", "padding", "popover", "radius", "text", "tone"];
-
-let _$5 = t => t,
-    _t$5;
-const MOUSE_LEAVE_TIMEOUT = 1000;
-const TextContainer = styled.span(_t$5 || (_t$5 = _$5`
-  &:not([hidden]) {
-    display: flex;
-  }
-
-  & > div:first-child {
-    flex: 1;
-    min-width: 0;
-  }
-`));
+const _excluded$a = ["as", "children", "fontSize", "icon", "onClick", "padding", "popover", "radius", "space", "text", "tone"];
 /**
  * @public
  */
@@ -9523,48 +9550,37 @@ function MenuGroup(props) {
     as = 'button',
     children,
     fontSize,
+    icon,
     onClick,
     padding = 3,
     popover = {},
     radius = 2,
+    space = 3,
     text,
     tone = 'default'
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
 
-  const [open, setOpen] = useState(false);
+  const menu = useMenu();
   const {
     activeElement,
     mount,
     onClickOutside,
     onEscape,
     onItemClick,
-    onMouseEnter,
-    onMouseLeave,
+    onItemMouseEnter = menu.onMouseEnter,
     registerElement
-  } = useMenu();
+  } = menu;
   const [rootElement, setRootElement] = useState(null);
-  const mouseLeaveTimeoutRef = useRef(null);
+  const [open, setOpen] = useState(false);
   const shouldFocusRef = useRef(null);
-  const active = Boolean(activeElement) && activeElement === rootElement; // const selected = active || open
-  // Register the element
-
-  useEffect(() => mount(rootElement), [mount, rootElement]);
+  const active = Boolean(activeElement) && activeElement === rootElement;
+  const [withinMenu, setWithinMenu] = useState(false);
   const handleMouseEnter = useCallback(event => {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current);
-      mouseLeaveTimeoutRef.current = null;
-    }
-
-    onMouseEnter(event);
+    setWithinMenu(false);
+    onItemMouseEnter(event);
     setOpen(true);
-  }, [onMouseEnter]);
-  const handleMouseLeave = useCallback(event => {
-    onMouseLeave(event);
-    mouseLeaveTimeoutRef.current = setTimeout(() => {
-      setOpen(false);
-    }, MOUSE_LEAVE_TIMEOUT);
-  }, [onMouseLeave]);
+  }, [onItemMouseEnter]);
   const handleMenuKeyDown = useCallback(event => {
     if (event.key === 'ArrowLeft') {
       event.stopPropagation();
@@ -9574,17 +9590,6 @@ function MenuGroup(props) {
       });
     }
   }, [rootElement]);
-  const handleMenuMouseEnter = useCallback(() => {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current);
-      mouseLeaveTimeoutRef.current = null;
-    }
-  }, []);
-  const handleMenuMouseLeave = useCallback(() => {
-    mouseLeaveTimeoutRef.current = setTimeout(() => {
-      setOpen(false);
-    }, MOUSE_LEAVE_TIMEOUT);
-  }, []);
   const handleClick = useCallback(event => {
     if (onClick) onClick(event);
     shouldFocusRef.current = 'first';
@@ -9593,25 +9598,27 @@ function MenuGroup(props) {
       shouldFocusRef.current = null;
     });
   }, [onClick]);
-  const handleItemClick = useCallback(() => {
+  const handleChildItemClick = useCallback(() => {
     setOpen(false);
     if (onItemClick) onItemClick();
   }, [onItemClick]);
+  const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), []); // Register the menu item element
+
+  useEffect(() => mount(rootElement), [mount, rootElement]); // Close child menu when a sibling item becomes active
+
   useEffect(() => {
-    return () => {
-      if (mouseLeaveTimeoutRef.current !== null) {
-        clearTimeout(mouseLeaveTimeoutRef.current);
-        mouseLeaveTimeoutRef.current = null;
-      }
-    };
-  }, []);
-  const content = /*#__PURE__*/React.createElement(Menu, {
+    if (!active) setOpen(false);
+  }, [active]); // Update state when child menu is no longer open
+
+  useEffect(() => {
+    if (!open) setWithinMenu(false);
+  }, [open]);
+  const childMenu = /*#__PURE__*/React.createElement(Menu, {
     onClickOutside: onClickOutside,
     onEscape: onEscape,
-    onItemClick: handleItemClick,
+    onItemClick: handleChildItemClick,
     onKeyDown: handleMenuKeyDown,
     onMouseEnter: handleMenuMouseEnter,
-    onMouseLeave: handleMenuMouseLeave,
     registerElement: registerElement,
     shouldFocus: shouldFocusRef.current
   }, children);
@@ -9625,6 +9632,7 @@ function MenuGroup(props) {
     if (event.key === 'ArrowRight') {
       shouldFocusRef.current = 'first';
       setOpen(true);
+      setWithinMenu(true);
       requestAnimationFrame(() => {
         shouldFocusRef.current = null;
       });
@@ -9632,7 +9640,7 @@ function MenuGroup(props) {
     }
   }, []);
   return /*#__PURE__*/React.createElement(Popover, _extends({}, popover, {
-    content: content,
+    content: childMenu,
     "data-ui": "MenuGroup__popover",
     open: open
   }), /*#__PURE__*/React.createElement(Selectable, _extends({
@@ -9640,25 +9648,32 @@ function MenuGroup(props) {
     "data-ui": "MenuGroup",
     forwardedAs: as
   }, restProps, {
-    "aria-pressed": as === 'button' ? !active && open : undefined,
-    "data-pressed": as !== 'button' ? !active && open : undefined,
-    "data-selected": active ? '' : undefined,
+    "aria-pressed": as === 'button' ? withinMenu : undefined,
+    "data-pressed": as !== 'button' ? withinMenu : undefined,
+    "data-selected": !withinMenu && active ? '' : undefined,
     "$radius": radius,
     "$tone": tone,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
     onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
     ref: setRootElement,
     tabIndex: -1,
     type: as === 'button' ? 'button' : undefined
   }), /*#__PURE__*/React.createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React.createElement(TextContainer, null, /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/React.createElement(Flex, null, icon && /*#__PURE__*/React.createElement(Text, {
     size: fontSize
-  }, text), /*#__PURE__*/React.createElement(Text, {
+  }, /*#__PURE__*/isValidElement(icon) && icon, isValidElementType(icon) && /*#__PURE__*/createElement(icon)), /*#__PURE__*/React.createElement(Box, {
+    flex: 1,
+    marginLeft: icon ? space : undefined
+  }, /*#__PURE__*/React.createElement(Text, {
+    size: fontSize,
+    textOverflow: "ellipsis"
+  }, text)), /*#__PURE__*/React.createElement(Box, {
+    marginLeft: space
+  }, /*#__PURE__*/React.createElement(Text, {
     size: fontSize
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, null))))));
+  }, /*#__PURE__*/React.createElement(ChevronRightIcon, null)))))));
 }
 
 const _excluded$9 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"];
@@ -9692,15 +9707,16 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef)
   } = props,
         restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
 
+  const menu = useMenu();
   const {
     activeElement,
     mount,
     onItemClick,
-    onMouseEnter,
-    onMouseLeave
-  } = useMenu();
+    onItemMouseEnter = menu.onMouseEnter,
+    onItemMouseLeave = menu.onMouseLeave
+  } = menu;
   const [rootElement, setRootElement] = useState(null);
-  const selected = Boolean(activeElement) && rootElement === activeElement;
+  const active = Boolean(activeElement) && activeElement === rootElement;
   useEffect(() => mount(rootElement, selectedProp), [mount, rootElement, selectedProp]);
   const ref = useForwardedRef(forwardedRef);
   const handleClick = useCallback(event => {
@@ -9728,14 +9744,14 @@ const MenuItem = /*#__PURE__*/forwardRef(function MenuItem(props, forwardedRef)
   }, restProps, {
     "aria-pressed": as === 'button' && pressed,
     "data-pressed": as !== 'button' && pressed ? '' : undefined,
-    "data-selected": selected ? '' : undefined,
+    "data-selected": active ? '' : undefined,
     "data-disabled": disabled ? '' : undefined,
     "$radius": radius,
     "$tone": tone,
     disabled: disabled,
     onClick: handleClick,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    onMouseEnter: onItemMouseEnter,
+    onMouseLeave: onItemMouseLeave,
     padding: 0,
     ref: setRef,
     role: "menuitem",