@sanity/ui 0.36.16-next.1 → 0.37.1

package/lib/sanity-ui.js

@@ -3611,8 +3611,8 @@ function responsiveInputPaddingIconRightStyle(props) {
   }));
 }
 
-var _templateObject$E, _templateObject2$n, _templateObject3$e;
-var ROOT_STYLE = styled.css(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n"])));
+var _templateObject$D, _templateObject2$n, _templateObject3$e;
+var ROOT_STYLE = styled.css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
 }
@@ -3713,20 +3713,20 @@ function responsiveShadowStyle(props) {
   });
 }
 
-var _templateObject$D, _templateObject2$m, _templateObject3$d;
+var _templateObject$C, _templateObject2$m, _templateObject3$d;
 function textBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var weights = theme.sanity.fonts.text.weights;
-  return styled.css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteralLoose(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return styled.css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 
 var _excluded$G = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$C;
+var _templateObject$B;
 var Root$E = styled__default["default"].div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
-var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$2 = styled__default["default"].span(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -4027,7 +4027,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(props, ref) {
   }, /*#__PURE__*/React__default["default"].createElement("strong", null, initials)))));
 });
 
-var _templateObject$B;
+var _templateObject$A;
 
 function responsiveAvatarCounterSizeStyle(props) {
   var theme = props.theme;
@@ -4047,7 +4047,7 @@ function responsiveAvatarCounterSizeStyle(props) {
 
 function avatarCounterBaseStyle(props) {
   var theme = props.theme;
-  return styled.css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return styled.css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow: 0 0 0 1px var(--card-bg-color), inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 
 var Root$C = styled__default["default"].div(responsiveAvatarCounterSizeStyle, avatarCounterBaseStyle);
@@ -4082,8 +4082,8 @@ function childrenToElementArray(children) {
 
 var _excluded$E = ["children", "maxLength", "size", "tone"];
 
-var _templateObject$A;
-var BASE_STYLES = styled.css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _templateObject$z;
+var BASE_STYLES = styled.css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 
 function avatarStackStyle() {
   return BASE_STYLES;
@@ -4222,20 +4222,20 @@ var Box = /*#__PURE__*/React.forwardRef(function Box(props, ref) {
   }), props.children);
 });
 
-var _templateObject$z, _templateObject2$l, _templateObject3$c;
+var _templateObject$y, _templateObject2$l, _templateObject3$c;
 function labelBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
   var fonts = theme.sanity.fonts;
-  return styled.css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
+  return styled.css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
 }
 
 var _excluded$C = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$y;
+var _templateObject$x;
 var Root$z = styled__default["default"].div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow$1 = styled__default["default"].span(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -4350,8 +4350,8 @@ var Flex = /*#__PURE__*/React.forwardRef(function Flex(props, ref) {
   }));
 });
 
-var _templateObject$x, _templateObject2$k;
-var rotate$1 = styled.keyframes(_templateObject$x || (_templateObject$x = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+var _templateObject$w, _templateObject2$k;
+var rotate$1 = styled.keyframes(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
 var Root$w = styled__default["default"](Text)(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 /**
  * @public
@@ -4402,13 +4402,13 @@ function _colorVarsStyle(base, color, checkered) {
   };
 }
 
-var _templateObject$w;
+var _templateObject$v;
 /**
  * @internal
  */
 
 function buttonBaseStyles() {
-  return styled.css(_templateObject$w || (_templateObject$w = _taggedTemplateLiteralLoose(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+  return styled.css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
 }
 var buttonTheme = {
   border: {
@@ -4459,9 +4459,9 @@ function buttonColorStyles(props) {
 
 var _excluded$z = ["children", "disabled", "fontSize", "icon", "iconRight", "justify", "loading", "mode", "padding", "paddingX", "paddingY", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "radius", "selected", "space", "text", "textAlign", "tone", "type"];
 
-var _templateObject$v;
+var _templateObject$u;
 var Root$v = styled__default["default"].button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-var LoadingBox = styled__default["default"].div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+var LoadingBox = styled__default["default"].div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 /**
  * @public
  */
@@ -4545,7 +4545,7 @@ var Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   }, boxProps), children));
 });
 
-var _templateObject$u, _templateObject2$j, _templateObject3$b;
+var _templateObject$t, _templateObject2$j, _templateObject3$b;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4553,7 +4553,7 @@ function cardBaseStyle(props) {
   var $checkered = props.$checkered,
       theme = props.theme;
   var space = theme.sanity.space;
-  return styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return styled.css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && styled.css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteralLoose(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _theme$sanity$styles, _theme$sanity$styles$;
@@ -4639,9 +4639,9 @@ var Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
   })));
 });
 
-var _templateObject$t, _templateObject2$i;
+var _templateObject$s, _templateObject2$i;
 function checkboxBaseStyles() {
-  return styled.css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   var theme = props.theme;
@@ -4711,7 +4711,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, forwardedR
   })), /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkIcon, null), /*#__PURE__*/React__default["default"].createElement(icons.RemoveIcon, null)));
 });
 
-var _templateObject$s;
+var _templateObject$r;
 
 function codeSyntaxHighlightingStyle(_ref) {
   var theme = _ref.theme;
@@ -4829,7 +4829,7 @@ function codeSyntaxHighlightingStyle(_ref) {
 }
 
 function codeBaseStyle() {
-  return styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
+  return styled.css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    color: var(--card-code-fg-color);\n\n    & code {\n      font-family: inherit;\n\n      &.refractor .token {\n        ", "\n      }\n    }\n\n    & a {\n      color: inherit;\n      text-decoration: underline;\n      border-radius: 1px;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), codeSyntaxHighlightingStyle);
 }
 
 var _excluded$w = ["children", "language", "size", "weight"];
@@ -4937,19 +4937,19 @@ var Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {
   }), children);
 });
 
-var _templateObject$r, _templateObject2$h, _templateObject3$a;
+var _templateObject$q, _templateObject2$h, _templateObject3$a;
 function headingBaseStyle(props) {
   var $accent = props.$accent,
       $muted = props.$muted,
       theme = props.theme;
-  return styled.css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return styled.css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow: 0 0 0 1px var(--card-bg-color), 0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && styled.css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
 
 var _excluded$t = ["accent", "align", "children", "muted", "size", "textOverflow", "weight"];
 
-var _templateObject$q;
+var _templateObject$p;
 var Root$p = styled__default["default"].div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-var SpanWithTextOverflow = styled__default["default"].span(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+var SpanWithTextOverflow = styled__default["default"].span(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -5038,10 +5038,10 @@ var Inline = /*#__PURE__*/React.forwardRef(function Inline(props, ref) {
 
 var _excluded$r = ["children", "fontSize", "padding", "radius"];
 
-var _templateObject$p;
+var _templateObject$o;
 
 function kbdStyle() {
-  return styled.css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n    background: var(--card-bg-color);\n    font: inherit;\n    box-shadow: inset 0 0 0 1px var(--card-hairline-hard-color);\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 var Root$n = styled__default["default"].kbd(responsiveRadiusStyle, kbdStyle);
@@ -5333,8 +5333,8 @@ function LayerProvider(props) {
 var _excluded$p = ["children", "style"],
     _excluded2$1 = ["children", "zOffset"];
 
-var _templateObject$o;
-var Root$m = styled__default["default"].div(_templateObject$o || (_templateObject$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$n;
+var Root$m = styled__default["default"].div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var LayerChildren = /*#__PURE__*/React.forwardRef(function LayerChildren(props, ref) {
   var children = props.children,
       _props$style = props.style,
@@ -5476,8 +5476,8 @@ function PortalProvider(props) {
   }, children);
 }
 
-var _templateObject$n;
-var Root$l = styled__default["default"].div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
+var _templateObject$m;
+var Root$l = styled__default["default"].div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n"])));
 /**
  * @public
  */
@@ -5661,8 +5661,8 @@ function _isScrollable(el) {
 
 var _excluded$o = ["as", "gap", "getItemKey", "items", "onChange", "renderItem"];
 
-var _templateObject$m, _templateObject2$g;
-var Root$k = styled__default["default"].div(_templateObject$m || (_templateObject$m = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
+var _templateObject$l, _templateObject2$g;
+var Root$k = styled__default["default"].div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ItemWrapper = styled__default["default"].div(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 /**
  * @beta
@@ -5808,8 +5808,8 @@ var VirtualList = /*#__PURE__*/React.forwardRef(function VirtualList(props, ref)
   }, children));
 });
 
-var _templateObject$l, _templateObject2$f, _templateObject3$9;
-var Root$j = styled__default["default"].div(_templateObject$l || (_templateObject$l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -27px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var _templateObject$k, _templateObject2$f, _templateObject3$9;
+var Root$j = styled__default["default"].div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  pointer-events: none;\n  width: 27px;\n  height: 27px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 13.5px 13.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -27px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 var BorderPath = styled__default["default"].path(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
 var ShapePath = styled__default["default"].path(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(props, ref) {
@@ -5988,10 +5988,10 @@ function usePopoverModifiers(props) {
 
 var _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"];
 
-var _templateObject$k, _templateObject2$e, _templateObject3$8;
+var _templateObject$j, _templateObject2$e, _templateObject3$8;
 var Root$i = styled__default["default"](Layer)(function (_ref) {
   var $preventOverflow = _ref.$preventOverflow;
-  return styled.css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    max-width: calc(100% - 16px);\n\n    & > * {\n      min-height: 0;\n    }\n\n    /* Hide the popover when the reference element is out of bounds */\n    ", "\n  "])), $preventOverflow && styled.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n      &[data-popper-reference-hidden='true'] {\n        display: none;\n      }\n    "]))));
+  return styled.css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n    pointer-events: none;\n    display: flex;\n    flex-direction: column;\n    max-width: calc(100% - 16px);\n\n    & > * {\n      min-height: 0;\n    }\n\n    /* Hide the popover when the reference element is out of bounds */\n    ", "\n  "])), $preventOverflow && styled.css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteralLoose(["\n      &[data-popper-reference-hidden='true'] {\n        display: none;\n      }\n    "]))));
 });
 var PopoverCard = styled__default["default"](Card)(function (_ref2) {
   var $constrainSize = _ref2.$constrainSize;
@@ -6141,9 +6141,9 @@ var Popover = /*#__PURE__*/React.forwardRef(function Popover(props, ref) {
   }, node), !portalProp && node));
 });
 
-var _templateObject$j, _templateObject2$d;
+var _templateObject$i, _templateObject2$d;
 function radioBaseStyle() {
-  return styled.css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
+  return styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n    position: relative;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n\n    &[data-read-only] {\n      outline: 1px solid red;\n    }\n  "])));
 }
 function inputElementStyle(props) {
   var theme = props.theme;
@@ -6198,10 +6198,10 @@ var Radio = /*#__PURE__*/React.forwardRef(function Radio(props, forwardedRef) {
   })), /*#__PURE__*/React__default["default"].createElement("span", null));
 });
 
-var _templateObject$i, _templateObject2$c, _templateObject3$7, _templateObject4$5;
+var _templateObject$h, _templateObject2$c, _templateObject3$7, _templateObject4$5;
 
 function rootStyle() {
-  return styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteralLoose(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 
 function inputBaseStyle(props) {
@@ -6359,11 +6359,11 @@ var Stack = /*#__PURE__*/React.forwardRef(function Stack(props, ref) {
   }));
 });
 
-var _templateObject$h, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7;
+var _templateObject$g, _templateObject2$b, _templateObject3$6, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7;
 /* Root */
 
 function switchBaseStyles() {
-  return styled.css(_templateObject$h || (_templateObject$h = _taggedTemplateLiteralLoose(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return styled.css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 /* Input */
 
@@ -6454,9 +6454,9 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, forwardedRef)
 
 var _excluded$i = ["border", "customValidity", "disabled", "fontSize", "padding", "radius"];
 
-var _templateObject$g;
+var _templateObject$f;
 var Root$d = styled__default["default"].span(textInputRootStyle);
-var InputRoot$1 = styled__default["default"].span(_templateObject$g || (_templateObject$g = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+var InputRoot$1 = styled__default["default"].span(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 var Input$1 = styled__default["default"].textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 var Presentation$1 = styled__default["default"].div(responsiveRadiusStyle, textInputRepresentationStyle);
 /**
@@ -6496,12 +6496,12 @@ var TextArea = /*#__PURE__*/React.forwardRef(function TextArea(props, forwardedR
 
 var _excluded$h = ["border", "clearButton", "disabled", "fontSize", "icon", "iconRight", "onClear", "padding", "prefix", "radius", "readOnly", "space", "suffix", "customValidity", "type"];
 
-var _templateObject$f, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2;
+var _templateObject$e, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$2;
 var CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
 var Root$c = styled__default["default"].span(textInputRootStyle);
-var InputRoot = styled__default["default"].span(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
+var InputRoot = styled__default["default"].span(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 var Prefix = styled__default["default"](Card).attrs({
   forwardedAs: 'span'
 })(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteralLoose(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
@@ -6655,8 +6655,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function TextInput(props, forwarde
   })), presentationNode, clearButtonNode), suffixNode);
 });
 
-var _templateObject$e, _templateObject2$9, _templateObject3$4;
-var Root$b = styled__default["default"].div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -15px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -15px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -15px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -15px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
+var _templateObject$d, _templateObject2$9, _templateObject3$4;
+var Root$b = styled__default["default"].div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  }\n\n  [data-popper-placement^='top'] > div > & {\n    bottom: -15px;\n  }\n\n  [data-popper-placement^='right'] > div > & {\n    left: -15px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-popper-placement^='left'] > div > & {\n    right: -15px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-popper-placement^='bottom'] > div > & {\n    top: -15px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
 var Border = styled__default["default"].path(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-shadow-outline-color);\n"])));
 var Shape = styled__default["default"].path(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n  fill: var(--card-bg-color);\n"])));
 var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, ref) {
@@ -6677,8 +6677,8 @@ var TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(props, re
 
 var _excluded$g = ["allowedAutoPlacements", "boundaryElement", "children", "content", "disabled", "fallbackPlacements", "placement", "portal", "scheme", "zOffset"];
 
-var _templateObject$d;
-var Root$a = styled__default["default"](Layer)(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
+var _templateObject$c;
+var Root$a = styled__default["default"](Layer)(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 /**
  * @public
  */
@@ -6831,12 +6831,12 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
   }, popperNode), !portal && popperNode));
 });
 
-var _templateObject$c, _templateObject2$8, _templateObject3$3, _templateObject4$2, _templateObject5$1;
+var _templateObject$b, _templateObject2$8, _templateObject3$3, _templateObject4$2, _templateObject5$1;
 /**
  * @internal
  */
 
-var Root$9 = styled__default["default"].div(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  /* position: relative; */\n"])));
+var Root$9 = styled__default["default"].div(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  /* position: relative; */\n"])));
 /**
  * @internal
  */
@@ -7441,7 +7441,9 @@ var InnerAutocomplete = /*#__PURE__*/React.forwardRef(function InnerAutocomplete
       return renderPopover({
         content: content,
         hidden: !expanded,
-        inputElement: inputElementRef.current
+        inputElement: inputElementRef.current,
+        onMouseEnter: handlePopoverMouseEnter,
+        onMouseLeave: handlePopoverMouseLeave
       }, setResultsPopoverElement);
     }
 
@@ -7480,8 +7482,8 @@ var InnerAutocomplete = /*#__PURE__*/React.forwardRef(function InnerAutocomplete
 
 var Autocomplete = InnerAutocomplete;
 
-var _templateObject$b, _templateObject2$7;
-var Root$8 = styled__default["default"].ol(_templateObject$b || (_templateObject$b = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+var _templateObject$a, _templateObject2$7;
+var Root$8 = styled__default["default"].ol(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
 var ExpandButton = styled__default["default"](Button)(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  margin: -4px;\n"])));
 
 var _excluded$e = ["children", "maxLength", "separator", "space"];
@@ -7622,9 +7624,9 @@ function useDialog() {
 
 var _excluded$d = ["__unstable_autoFocus", "__unstable_hideCloseButton", "cardRadius", "cardShadow", "children", "contentRef", "footer", "header", "id", "onClickOutside", "onClose", "padding", "portal", "position", "scheme", "width", "zOffset"];
 
-var _templateObject$a, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6;
+var _templateObject$9, _templateObject2$6, _templateObject3$2, _templateObject4$1, _templateObject5, _templateObject6;
 var Root$7 = styled__default["default"](Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
-var DialogContainer = styled__default["default"](Container)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var DialogContainer = styled__default["default"](Container)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 var DialogCardRoot = styled__default["default"](Card)(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n"])));
 var DialogLayout = styled__default["default"](Flex)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
 var DialogHeader = styled__default["default"](Card)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-hairline-soft-color);\n  }\n"])));
@@ -7833,8 +7835,8 @@ function DialogProvider(props) {
 
 var _excluded$c = ["fontSize", "keys", "padding", "radius", "space"];
 
-var _templateObject$9, _templateObject2$5;
-var Root$6 = styled__default["default"].kbd(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+var _templateObject$8, _templateObject2$5;
+var Root$6 = styled__default["default"].kbd(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
 var Key = styled__default["default"](KBD)(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 /**
  * @public
@@ -7870,6 +7872,10 @@ var Hotkeys = /*#__PURE__*/React.forwardRef(function Hotkeys(props, ref) {
   })));
 });
 
+var key$2 = Symbol["for"]('@sanity/ui/context/menu');
+globalScope[key$2] = globalScope[key$2] || /*#__PURE__*/React.createContext(null);
+var MenuContext = globalScope[key$2];
+
 /**
  * @internal
  */
@@ -7945,56 +7951,34 @@ function _sortElements(rootElement, elements) {
   elements.sort(_sort);
 }
 
-var key$2 = Symbol["for"]('@sanity/ui/context/menu');
-globalScope[key$2] = globalScope[key$2] || /*#__PURE__*/React.createContext(null);
-var MenuContext = globalScope[key$2];
-
-var _excluded$b = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"];
-
-var _templateObject$8;
-var Root$5 = styled__default["default"](Box)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteralLoose(["\n  outline: none;\n  overflow: auto;\n"])));
 /**
- * @public
+ * This controller is responsible for controlling UI menu state.
+ *
+ * @internal
  */
 
-var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
-  var children = props.children,
-      onClickOutside = props.onClickOutside,
-      onEscape = props.onEscape,
-      onItemClick = props.onItemClick,
-      onItemSelect = props.onItemSelect,
-      onKeyDown = props.onKeyDown,
+function useMenuController(props) {
+  var onKeyDown = props.onKeyDown,
       originElement = props.originElement,
-      _props$padding = props.padding,
-      padding = _props$padding === void 0 ? 1 : _props$padding,
-      registerElement = props.registerElement,
-      _props$shouldFocus = props.shouldFocus,
-      shouldFocus = _props$shouldFocus === void 0 ? props.focusFirst && 'first' || props.focusLast && 'last' || null : _props$shouldFocus,
-      _props$space = props.space,
-      space = _props$space === void 0 ? 1 : _props$space,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
-
-  var _useLayer = useLayer(),
-      isTopLayer = _useLayer.isTopLayer;
+      shouldFocus = props.shouldFocus;
+  var elementsRef = React.useRef([]);
 
   var _useState = React.useState(null),
       rootElement = _useState[0],
       setRootElement = _useState[1];
 
-  var elementsRef = React.useRef([]);
-
   var _useState2 = React.useState(-1),
       activeIndex = _useState2[0],
-      setActiveIndex = _useState2[1];
+      _setActiveIndex = _useState2[1];
 
-  var activeIndexRef = React.useRef(activeIndex);
   var activeElement = elementsRef.current[activeIndex] || null;
-  var activeElementRef = React.useRef(activeElement);
+  var activeIndexRef = React.useRef(activeIndex);
   var mounted = Boolean(rootElement);
-  var setRef = React.useCallback(function (el) {
-    setRootElement(el);
-    if (typeof ref === 'function') ref(el);else if (ref) ref.current = el;
-  }, [ref]);
+  var setActiveIndex = React.useCallback(function (nextActiveIndex) {
+    _setActiveIndex(nextActiveIndex);
+
+    activeIndexRef.current = nextActiveIndex;
+  }, []);
   var mount = React.useCallback(function (element, selected) {
     if (!element) return function () {
       return undefined;
@@ -8009,7 +7993,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
     if (selected) {
       var selectedIndex = elementsRef.current.indexOf(element);
       setActiveIndex(selectedIndex);
-      activeIndexRef.current = selectedIndex;
     }
 
     return function () {
@@ -8019,7 +8002,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
         elementsRef.current.splice(idx, 1);
       }
     };
-  }, [rootElement]);
+  }, [rootElement, setActiveIndex]);
   var handleKeyDown = React.useCallback(function (event) {
     // Move focus to the element that opened the menu before handling the `Tab` press
     if (event.key === 'Tab') {
@@ -8041,7 +8024,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       if (!el) return;
       var currentIndex = elementsRef.current.indexOf(el);
       setActiveIndex(currentIndex);
-      activeIndexRef.current = currentIndex;
       return;
     } // Move focus to the last focusable menuitem
 
@@ -8058,7 +8040,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       var _currentIndex = elementsRef.current.indexOf(_el);
 
       setActiveIndex(_currentIndex);
-      activeIndexRef.current = _currentIndex;
       return;
     }
 
@@ -8080,7 +8061,6 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       var _currentIndex2 = elementsRef.current.indexOf(_el2);
 
       setActiveIndex(_currentIndex2);
-      activeIndexRef.current = _currentIndex2;
       return;
     }
 
@@ -8102,32 +8082,22 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       var _currentIndex3 = elementsRef.current.indexOf(_el3);
 
       setActiveIndex(_currentIndex3);
-      activeIndexRef.current = _currentIndex3;
       return;
     }
 
     if (onKeyDown) {
       onKeyDown(event);
     }
-  }, [activeIndex, onKeyDown, originElement]);
+  }, [activeIndex, onKeyDown, originElement, setActiveIndex]);
   var handleItemMouseEnter = React.useCallback(function (event) {
     var element = event.currentTarget;
     var currentIndex = elementsRef.current.indexOf(element);
     setActiveIndex(currentIndex);
-    activeIndexRef.current = currentIndex;
-  }, []);
+  }, [setActiveIndex]);
   var handleItemMouseLeave = React.useCallback(function () {
     rootElement == null ? void 0 : rootElement.focus();
     setActiveIndex(-1);
-    activeIndexRef.current = -1;
-  }, [rootElement]); // Trigger `onItemSelect` when active index changes
-
-  React.useEffect(function () {
-    if (onItemSelect) onItemSelect(activeIndex);
-  }, [activeIndex, onItemSelect]);
-  React.useEffect(function () {
-    activeElementRef.current = activeElement;
-  }, [activeElement]); // Set focus on the currently active element
+  }, [rootElement, setActiveIndex]); // Set focus on the currently active element
 
   React.useEffect(function () {
     if (!mounted) return;
@@ -8169,10 +8139,76 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
     return function () {
       window.cancelAnimationFrame(rafId);
     };
-  }, [activeIndex, mounted, shouldFocus]);
+  }, [activeIndex, mounted, setActiveIndex, shouldFocus]);
+  return {
+    activeElement: activeElement,
+    activeIndex: activeIndex,
+    handleItemMouseEnter: handleItemMouseEnter,
+    handleItemMouseLeave: handleItemMouseLeave,
+    handleKeyDown: handleKeyDown,
+    mount: mount,
+    rootElement: rootElement,
+    setRootElement: setRootElement
+  };
+}
+
+var _excluded$b = ["children", "focusFirst", "focusLast", "onClickOutside", "onEscape", "onItemClick", "onItemSelect", "onKeyDown", "originElement", "padding", "registerElement", "shouldFocus", "space"];
+
+var _templateObject$7;
+var Root$5 = styled__default["default"](Box)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  outline: none;\n  overflow: auto;\n"])));
+/**
+ * @public
+ */
+
+var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
+  var children = props.children,
+      onClickOutside = props.onClickOutside,
+      onEscape = props.onEscape,
+      onItemClick = props.onItemClick,
+      onItemSelect = props.onItemSelect,
+      onKeyDown = props.onKeyDown,
+      originElement = props.originElement,
+      _props$padding = props.padding,
+      padding = _props$padding === void 0 ? 1 : _props$padding,
+      registerElement = props.registerElement,
+      _props$shouldFocus = props.shouldFocus,
+      shouldFocus = _props$shouldFocus === void 0 ? props.focusFirst && 'first' || props.focusLast && 'last' || null : _props$shouldFocus,
+      _props$space = props.space,
+      space = _props$space === void 0 ? 1 : _props$space,
+      restProps = _objectWithoutPropertiesLoose(props, _excluded$b);
+
+  var forwardedRef = useForwardedRef(ref);
+
+  var _useLayer = useLayer(),
+      isTopLayer = _useLayer.isTopLayer;
+
+  var _useMenuController = useMenuController({
+    onKeyDown: onKeyDown,
+    originElement: originElement,
+    shouldFocus: shouldFocus
+  }),
+      activeElement = _useMenuController.activeElement,
+      activeIndex = _useMenuController.activeIndex,
+      handleItemMouseEnter = _useMenuController.handleItemMouseEnter,
+      handleItemMouseLeave = _useMenuController.handleItemMouseLeave,
+      handleKeyDown = _useMenuController.handleKeyDown,
+      mount = _useMenuController.mount,
+      rootElement = _useMenuController.rootElement,
+      setRootElement = _useMenuController.setRootElement;
+
+  var handleRefChange = React.useCallback(function (el) {
+    setRootElement(el);
+    forwardedRef.current = el;
+  }, [forwardedRef, setRootElement]); // Trigger `onItemSelect` when active index changes
+
+  React.useEffect(function () {
+    if (onItemSelect) onItemSelect(activeIndex);
+  }, [activeIndex, onItemSelect]); // Close menu when clicking outside
+
   useClickOutside(React.useCallback(function (event) {
     return isTopLayer && onClickOutside && onClickOutside(event);
-  }, [isTopLayer, onClickOutside]), [rootElement]);
+  }, [isTopLayer, onClickOutside]), [rootElement]); // Close menu when pressing Escape
+
   useGlobalKeyDown(React.useCallback(function (event) {
     if (!isTopLayer) return;
 
@@ -8180,7 +8216,8 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       event.stopPropagation();
       if (onEscape) onEscape();
     }
-  }, [isTopLayer, onEscape]));
+  }, [isTopLayer, onEscape])); // Register root element (for nested menus)
+
   React.useEffect(function () {
     if (!rootElement || !registerElement) return;
     return registerElement(rootElement);
@@ -8193,10 +8230,13 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
       mount: mount,
       onClickOutside: onClickOutside,
       onEscape: onEscape,
-      onMouseEnter: handleItemMouseEnter,
-      onMouseLeave: handleItemMouseLeave,
       onItemClick: onItemClick,
-      registerElement: registerElement
+      onItemMouseEnter: handleItemMouseEnter,
+      onItemMouseLeave: handleItemMouseLeave,
+      registerElement: registerElement,
+      // deprecated
+      onMouseEnter: handleItemMouseEnter,
+      onMouseLeave: handleItemMouseLeave
     };
   }, [activeElement, activeIndex, mount, handleItemMouseEnter, handleItemMouseLeave, onClickOutside, onEscape, onItemClick, registerElement]);
   return /*#__PURE__*/React__default["default"].createElement(MenuContext.Provider, {
@@ -8206,7 +8246,7 @@ var Menu = /*#__PURE__*/React.forwardRef(function Menu(props, ref) {
   }, restProps, {
     onKeyDown: handleKeyDown,
     padding: padding,
-    ref: setRef,
+    ref: handleRefChange,
     role: "menu",
     tabIndex: -1
   }), /*#__PURE__*/React__default["default"].createElement(Stack, {
@@ -8394,16 +8434,16 @@ var MenuButton = /*#__PURE__*/React.forwardRef(function MenuButton(props, ref) {
   }), button || /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null));
 });
 
-var _templateObject$7;
+var _templateObject$6;
 /**
  * @public
  */
 
-var MenuDivider = styled__default["default"].hr(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteralLoose(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
+var MenuDivider = styled__default["default"].hr(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n  height: 1px;\n  border: 0;\n  background: var(--card-hairline-soft-color);\n  margin: 0;\n"])));
 
-var _templateObject$6, _templateObject2$4;
+var _templateObject$5, _templateObject2$4;
 function selectableBaseStyle() {
-  return styled.css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteralLoose(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return styled.css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _theme$sanity$styles, _theme$sanity$styles$;
@@ -8442,11 +8482,7 @@ function useMenu() {
   return value;
 }
 
-var _excluded$a = ["as", "children", "fontSize", "onClick", "padding", "popover", "radius", "text", "tone"];
-
-var _templateObject$5;
-var MOUSE_LEAVE_TIMEOUT = 1000;
-var TextContainer = styled__default["default"].span(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteralLoose(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  & > div:first-child {\n    flex: 1;\n    min-width: 0;\n  }\n"])));
+var _excluded$a = ["as", "children", "fontSize", "icon", "onClick", "padding", "popover", "radius", "space", "text", "tone"];
 /**
  * @public
  */
@@ -8456,6 +8492,7 @@ function MenuGroup(props) {
       as = _props$as === void 0 ? 'button' : _props$as,
       children = props.children,
       fontSize = props.fontSize,
+      icon = props.icon,
       onClick = props.onClick,
       _props$padding = props.padding,
       padding = _props$padding === void 0 ? 3 : _props$padding,
@@ -8463,52 +8500,43 @@ function MenuGroup(props) {
       popover = _props$popover === void 0 ? {} : _props$popover,
       _props$radius = props.radius,
       radius = _props$radius === void 0 ? 2 : _props$radius,
+      _props$space = props.space,
+      space = _props$space === void 0 ? 3 : _props$space,
       text = props.text,
       _props$tone = props.tone,
       tone = _props$tone === void 0 ? 'default' : _props$tone,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$a);
 
-  var _useState = React.useState(false),
-      open = _useState[0],
-      setOpen = _useState[1];
+  var menu = useMenu();
+  var activeElement = menu.activeElement,
+      mount = menu.mount,
+      onClickOutside = menu.onClickOutside,
+      onEscape = menu.onEscape,
+      onItemClick = menu.onItemClick,
+      _menu$onItemMouseEnte = menu.onItemMouseEnter,
+      onItemMouseEnter = _menu$onItemMouseEnte === void 0 ? menu.onMouseEnter : _menu$onItemMouseEnte,
+      registerElement = menu.registerElement;
 
-  var _useMenu = useMenu(),
-      activeElement = _useMenu.activeElement,
-      mount = _useMenu.mount,
-      onClickOutside = _useMenu.onClickOutside,
-      onEscape = _useMenu.onEscape,
-      onItemClick = _useMenu.onItemClick,
-      onMouseEnter = _useMenu.onMouseEnter,
-      onMouseLeave = _useMenu.onMouseLeave,
-      registerElement = _useMenu.registerElement;
+  var _useState = React.useState(null),
+      rootElement = _useState[0],
+      setRootElement = _useState[1];
 
-  var _useState2 = React.useState(null),
-      rootElement = _useState2[0],
-      setRootElement = _useState2[1];
+  var _useState2 = React.useState(false),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-  var mouseLeaveTimeoutRef = React.useRef(null);
   var shouldFocusRef = React.useRef(null);
-  var active = Boolean(activeElement) && activeElement === rootElement; // const selected = active || open
-  // Register the element
+  var active = Boolean(activeElement) && activeElement === rootElement;
 
-  React.useEffect(function () {
-    return mount(rootElement);
-  }, [mount, rootElement]);
-  var handleMouseEnter = React.useCallback(function (event) {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current);
-      mouseLeaveTimeoutRef.current = null;
-    }
+  var _useState3 = React.useState(false),
+      withinMenu = _useState3[0],
+      setWithinMenu = _useState3[1];
 
-    onMouseEnter(event);
+  var handleMouseEnter = React.useCallback(function (event) {
+    setWithinMenu(false);
+    onItemMouseEnter(event);
     setOpen(true);
-  }, [onMouseEnter]);
-  var handleMouseLeave = React.useCallback(function (event) {
-    onMouseLeave(event);
-    mouseLeaveTimeoutRef.current = setTimeout(function () {
-      setOpen(false);
-    }, MOUSE_LEAVE_TIMEOUT);
-  }, [onMouseLeave]);
+  }, [onItemMouseEnter]);
   var handleMenuKeyDown = React.useCallback(function (event) {
     if (event.key === 'ArrowLeft') {
       event.stopPropagation();
@@ -8518,17 +8546,6 @@ function MenuGroup(props) {
       });
     }
   }, [rootElement]);
-  var handleMenuMouseEnter = React.useCallback(function () {
-    if (mouseLeaveTimeoutRef.current) {
-      clearTimeout(mouseLeaveTimeoutRef.current);
-      mouseLeaveTimeoutRef.current = null;
-    }
-  }, []);
-  var handleMenuMouseLeave = React.useCallback(function () {
-    mouseLeaveTimeoutRef.current = setTimeout(function () {
-      setOpen(false);
-    }, MOUSE_LEAVE_TIMEOUT);
-  }, []);
   var handleClick = React.useCallback(function (event) {
     if (onClick) onClick(event);
     shouldFocusRef.current = 'first';
@@ -8537,25 +8554,31 @@ function MenuGroup(props) {
       shouldFocusRef.current = null;
     });
   }, [onClick]);
-  var handleItemClick = React.useCallback(function () {
+  var handleChildItemClick = React.useCallback(function () {
     setOpen(false);
     if (onItemClick) onItemClick();
   }, [onItemClick]);
+  var handleMenuMouseEnter = React.useCallback(function () {
+    return setWithinMenu(true);
+  }, []); // Register the menu item element
+
   React.useEffect(function () {
-    return function () {
-      if (mouseLeaveTimeoutRef.current !== null) {
-        clearTimeout(mouseLeaveTimeoutRef.current);
-        mouseLeaveTimeoutRef.current = null;
-      }
-    };
-  }, []);
-  var content = /*#__PURE__*/React__default["default"].createElement(Menu, {
+    return mount(rootElement);
+  }, [mount, rootElement]); // Close child menu when a sibling item becomes active
+
+  React.useEffect(function () {
+    if (!active) setOpen(false);
+  }, [active]); // Update state when child menu is no longer open
+
+  React.useEffect(function () {
+    if (!open) setWithinMenu(false);
+  }, [open]);
+  var childMenu = /*#__PURE__*/React__default["default"].createElement(Menu, {
     onClickOutside: onClickOutside,
     onEscape: onEscape,
-    onItemClick: handleItemClick,
+    onItemClick: handleChildItemClick,
     onKeyDown: handleMenuKeyDown,
     onMouseEnter: handleMenuMouseEnter,
-    onMouseLeave: handleMenuMouseLeave,
     registerElement: registerElement,
     shouldFocus: shouldFocusRef.current
   }, children);
@@ -8569,6 +8592,7 @@ function MenuGroup(props) {
     if (event.key === 'ArrowRight') {
       shouldFocusRef.current = 'first';
       setOpen(true);
+      setWithinMenu(true);
       requestAnimationFrame(function () {
         shouldFocusRef.current = null;
       });
@@ -8576,7 +8600,7 @@ function MenuGroup(props) {
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(Popover, _extends({}, popover, {
-    content: content,
+    content: childMenu,
     "data-ui": "MenuGroup__popover",
     open: open
   }), /*#__PURE__*/React__default["default"].createElement(Selectable, _extends({
@@ -8584,25 +8608,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__default["default"].createElement(Box, {
     padding: padding
-  }, /*#__PURE__*/React__default["default"].createElement(TextContainer, null, /*#__PURE__*/React__default["default"].createElement(Text, {
+  }, /*#__PURE__*/React__default["default"].createElement(Flex, null, icon && /*#__PURE__*/React__default["default"].createElement(Text, {
     size: fontSize
-  }, text), /*#__PURE__*/React__default["default"].createElement(Text, {
+  }, /*#__PURE__*/React.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && /*#__PURE__*/React.createElement(icon)), /*#__PURE__*/React__default["default"].createElement(Box, {
+    flex: 1,
+    marginLeft: icon ? space : undefined
+  }, /*#__PURE__*/React__default["default"].createElement(Text, {
+    size: fontSize,
+    textOverflow: "ellipsis"
+  }, text)), /*#__PURE__*/React__default["default"].createElement(Box, {
+    marginLeft: space
+  }, /*#__PURE__*/React__default["default"].createElement(Text, {
     size: fontSize
-  }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightIcon, null))))));
+  }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronRightIcon, null)))))));
 }
 
 var _excluded$9 = ["as", "children", "disabled", "fontSize", "hotkeys", "icon", "iconRight", "onClick", "padding", "paddingX", "paddingY", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "pressed", "radius", "selected", "space", "text", "tone"];
@@ -8640,18 +8671,20 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedR
       tone = _props$tone === void 0 ? 'default' : _props$tone,
       restProps = _objectWithoutPropertiesLoose(props, _excluded$9);
 
-  var _useMenu = useMenu(),
-      activeElement = _useMenu.activeElement,
-      mount = _useMenu.mount,
-      onItemClick = _useMenu.onItemClick,
-      onMouseEnter = _useMenu.onMouseEnter,
-      onMouseLeave = _useMenu.onMouseLeave;
+  var menu = useMenu();
+  var activeElement = menu.activeElement,
+      mount = menu.mount,
+      onItemClick = menu.onItemClick,
+      _menu$onItemMouseEnte = menu.onItemMouseEnter,
+      onItemMouseEnter = _menu$onItemMouseEnte === void 0 ? menu.onMouseEnter : _menu$onItemMouseEnte,
+      _menu$onItemMouseLeav = menu.onItemMouseLeave,
+      onItemMouseLeave = _menu$onItemMouseLeav === void 0 ? menu.onMouseLeave : _menu$onItemMouseLeav;
 
   var _useState = React.useState(null),
       rootElement = _useState[0],
       setRootElement = _useState[1];
 
-  var selected = Boolean(activeElement) && rootElement === activeElement;
+  var active = Boolean(activeElement) && activeElement === rootElement;
   React.useEffect(function () {
     return mount(rootElement, selectedProp);
   }, [mount, rootElement, selectedProp]);
@@ -8683,14 +8716,14 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(props, forwardedR
   }, 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",