@sanity/ui 2.0.0-alpha.6 → 2.0.0-alpha.7

package/dist/index.esm.js

@@ -1090,22 +1090,22 @@ const defaultTints = {
     "base-shadow-outline-color": {
       type: "colorWithOpacity",
       tint: "500",
-      opacity: 0.4
+      opacity: 0.2
     },
     "base-shadow-umbra-color": {
       type: "colorWithOpacity",
       tint: "500",
-      opacity: 0.2
+      opacity: 0.1
     },
     "base-shadow-penumbra-color": {
       type: "colorWithOpacity",
       tint: "500",
-      opacity: 0.14
+      opacity: 0.07
     },
     "base-shadow-ambient-color": {
       type: "colorWithOpacity",
       tint: "500",
-      opacity: 0.12
+      opacity: 0.06
     },
     "skeleton-from": "100",
     "skeleton-to": {
@@ -1650,9 +1650,9 @@ const studioTheme = {
     penumbra: [0, 0, 0, 0],
     ambient: [0, 0, 0, 0]
   }, {
-    umbra: [0, 3, 5, -1],
+    umbra: [0, 3, 5, -2],
     penumbra: [0, 6, 10, 0],
-    ambient: [0, 1, 18, 0]
+    ambient: [0, 1, 18, 1]
   }, {
     umbra: [0, 7, 8, -4],
     penumbra: [0, 12, 17, 2],
@@ -3179,73 +3179,14 @@ const Box = forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
-  value: __freeze$y(raw || cooked.slice())
-}));
-var _a$y, _b$k, _c$b;
-function labelBaseStyle(props) {
-  const {
-    $accent,
-    $muted,
-    theme
-  } = props;
-  const {
-    fonts
-  } = theme.sanity;
-  return css(_c$b || (_c$b = __template$y(["\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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$y || (_a$y = __template$y(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$k || (_b$k = __template$y(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), fonts.code.family);
-}
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
-  value: __freeze$x(raw || cooked.slice())
-}));
-var _a$x;
-const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_a$x || (_a$x = __template$x(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const Label = forwardRef(function Label2(props, ref) {
-  const {
-    accent,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  } else {
-    children = /* @__PURE__ */jsx("span", {
-      children
-    });
-  }
-  return /* @__PURE__ */jsx(Root$z, {
-    "data-ui": "Label",
-    ...restProps,
-    $accent: accent,
-    $align: useArrayProp(align),
-    $muted: muted,
-    $size: useArrayProp(size),
-    $weight: weight,
-    ref,
-    children
-  });
-});
 function badgeStyle(props) {
   const {
     $mode,
     $tone
   } = props;
   return {
-    // backgroundColor: color.enabled.bg,
     backgroundColor: $mode === "outline" ? cssVars[$tone]["bg-base"] : cssVars[$tone]["bg-tint"],
-    color: cssVars[$tone]["text-secondary"],
+    [mutableCardVariables["fg-color"]]: cssVars[$tone]["text-secondary"],
     boxShadow: $mode === "outline" ? "inset 0 0 0 1px ".concat(cssVars[$tone]["border-base"]) : void 0,
     cursor: "default",
     "&:not([hidden])": {
@@ -3253,7 +3194,7 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
+const Root$z = styled(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = forwardRef(function Badge2(props, ref) {
   const {
     children,
@@ -3264,7 +3205,7 @@ const Badge = forwardRef(function Badge2(props, ref) {
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$y, {
+  return /* @__PURE__ */jsx(Root$z, {
     "data-ui": "Badge",
     ...restProps,
     $mode: mode,
@@ -3272,13 +3213,14 @@ const Badge = forwardRef(function Badge2(props, ref) {
     $radius: useArrayProp(radius),
     padding: useArrayProp(padding),
     ref,
-    children: /* @__PURE__ */jsx(Label, {
+    children: /* @__PURE__ */jsx(Text, {
       size: fontSize,
+      weight: "medium",
       children
     })
   });
 });
-const Root$x = styled(Box)(flexItemStyle, responsiveFlexStyle);
+const Root$y = styled(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = forwardRef(function Flex2(props, ref) {
   const {
     align,
@@ -3292,7 +3234,7 @@ const Flex = forwardRef(function Flex2(props, ref) {
   return (
     // @ts-expect-error -- some dollar prefixed typings aren't inferred correctly https://github.com/styled-components/styled-components/issues/4062
     /* @__PURE__ */
-    jsx(Root$x, {
+    jsx(Root$y, {
       "data-ui": "Flex",
       ...restProps,
       $align: useArrayProp(align),
@@ -3305,30 +3247,30 @@ const Flex = forwardRef(function Flex2(props, ref) {
     })
   );
 });
-var __freeze$w = Object.freeze;
-var __defProp$x = Object.defineProperty;
-var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
-  value: __freeze$w(raw || cooked.slice())
+var __freeze$y = Object.freeze;
+var __defProp$z = Object.defineProperty;
+var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
+  value: __freeze$y(raw || cooked.slice())
 }));
-var _a$w, _b$j;
-const rotate$1 = keyframes(_a$w || (_a$w = __template$w(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$w = styled(Text)(_b$j || (_b$j = __template$w(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+var _a$y, _b$k;
+const rotate$1 = keyframes(_a$y || (_a$y = __template$y(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const Root$x = styled(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsx(Root$w, {
+  return /* @__PURE__ */jsx(Root$x, {
     "data-ui": "Spinner",
     ...props,
     ref,
     children: /* @__PURE__ */jsx(SpinnerIcon, {})
   });
 });
-var __freeze$v = Object.freeze;
-var __defProp$w = Object.defineProperty;
-var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
-  value: __freeze$v(raw || cooked.slice())
+var __freeze$x = Object.freeze;
+var __defProp$y = Object.defineProperty;
+var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
+  value: __freeze$x(raw || cooked.slice())
 }));
-var _a$v;
+var _a$x;
 function buttonBaseStyles() {
-  return css(_a$v || (_a$v = __template$v(["\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 css(_a$x || (_a$x = __template$x(["\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  "])));
 }
 const buttonTheme = {
   border: {
@@ -3424,14 +3366,14 @@ function buttonColorStyles(props) {
     }
   }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
 }
-var __freeze$u = Object.freeze;
-var __defProp$v = Object.defineProperty;
-var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
-  value: __freeze$u(raw || cooked.slice())
+var __freeze$w = Object.freeze;
+var __defProp$x = Object.defineProperty;
+var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
+  value: __freeze$w(raw || cooked.slice())
 }));
-var _a$u;
-const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled.div(_a$u || (_a$u = __template$u(["\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: ", ";\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])), cssVars.mutable["bg-color"]);
+var _a$w;
+const Root$w = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const LoadingBox = styled.div(_a$w || (_a$w = __template$w(["\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: ", ";\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])), cssVars.mutable["bg-color"]);
 const Button = forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -3480,7 +3422,7 @@ const Button = forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxs(Root$v, {
+  return /* @__PURE__ */jsxs(Root$w, {
     "data-ui": "Button",
     ...restProps,
     $mode: mode,
@@ -3532,8 +3474,8 @@ function _colorVarStyleDisabled() {
     [getToneCssVar("default", "text-accent")]: cssVars.default["text-secondary"],
     [getToneCssVar("default", "text-code")]: cssVars.default["text-secondary"],
     [getToneCssVar("default", "text-primary")]: cssVars.default["text-secondary"],
-    [mutableCardVariables["fg-color"]]: cssVars.primary["text-inactive"],
-    [mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-inactive"],
+    [mutableCardVariables["fg-color"]]: cssVars.primary["text-secondary"],
+    [mutableCardVariables["muted-fg-color"]]: cssVars.primary["text-secondary"],
     [mutableCardVariables["icon-color"]]: cssVars.primary["border-base"],
     [mutableCardVariables["accent-color"]]: cssVars.primary["base-bg-card"],
     [mutableCardVariables["bg-color"]]: cssVars.primary["bg-tint"],
@@ -3551,7 +3493,8 @@ function _colorVarStyleSelected() {
 }
 function _colorVarStyleHover() {
   return {
-    [mutableCardVariables["bg-color"]]: cssVars.default["bg-base-hover"]
+    [mutableCardVariables["bg-color"]]: cssVars.default["bg-base-hover"],
+    [getToneCssVar("default", "bg-tint")]: cssVars.default["bg-base-active"]
   };
 }
 function _colorVarStyleActive() {
@@ -3559,10 +3502,10 @@ function _colorVarStyleActive() {
     [mutableCardVariables["bg-color"]]: cssVars.default["bg-base-active"]
   };
 }
-function _selectableVarStyle() {
+function _selectableVarStyle(tone) {
   return {
     [mutableCardVariables["bg-color"]]: "inherit",
-    [mutableCardVariables["fg-color"]]: cssVars.default["text-secondary"]
+    [mutableCardVariables["fg-color"]]: tone === "default" ? cssVars.default["text-primary"] : cssVars.default["text-secondary"]
   };
 }
 function _selectableVarStyleDisabled() {
@@ -3571,12 +3514,12 @@ function _selectableVarStyleDisabled() {
     [mutableCardVariables["bg-color"]]: void 0
   };
 }
-var __freeze$t = Object.freeze;
-var __defProp$u = Object.defineProperty;
-var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
-  value: __freeze$t(raw || cooked.slice())
+var __freeze$v = Object.freeze;
+var __defProp$w = Object.defineProperty;
+var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
+  value: __freeze$v(raw || cooked.slice())
 }));
-var _a$t, _b$i, _c$a;
+var _a$v, _b$j, _c$b;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -3586,7 +3529,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_b$i || (_b$i = __template$t(["\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 && css(_a$t || (_a$t = __template$t(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: ", ";\n    "])), space[3], space[3], cssVars.mutable["bg-image"]));
+  return css(_b$j || (_b$j = __template$v(["\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 && css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: ", ";\n    "])), space[3], space[3], cssVars.mutable["bg-image"]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -3605,7 +3548,7 @@ function cardColorStyle(props) {
     width: 0,
     color: cssVars.positive["border-accent"]
   };
-  return css(_c$a || (_c$a = __template$t(["\n    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */\n    ", "\n    color-scheme: ", ";\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), $updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone), $scheme === "dark" ? "dark" : "light", $checkered && "--card-bg-image: repeating-conic-gradient(".concat(cssVars.default["base-bg-card"], " 0% 25%, ").concat(cssVars.default["bg-tint"], " 0% 50%)"), cssVars.mutable["bg-color"], cssVars.default["text-primary"], _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
+  return css(_c$b || (_c$b = __template$v(["\n    /* A new css vars context is created, allowing for override of the default tone and changing the scheme */\n    ", "\n    color-scheme: ", ";\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n\n    /* &:is(button) */\n    &[data-as='button'] {\n      --card-focus-ring-box-shadow: none;\n\n      cursor: default;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      cursor: pointer;\n      box-shadow: var(--card-focus-ring-box-shadow);\n\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-pressed]):not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n\n        &:focus {\n          --card-focus-ring-box-shadow: ", ";\n        }\n\n        &:focus:not(:focus-visible) {\n          --card-focus-ring-box-shadow: ", ";\n        }\n      }\n    }\n\n    ", "\n  "])), $updateCssVars && createCssVars($scheme, theme.sanity.color.tones, $tone), $scheme === "dark" ? "dark" : "light", $checkered && "--card-bg-image: repeating-conic-gradient(".concat(cssVars.default["base-bg-card"], " 0% 25%, ").concat(cssVars.default["bg-tint"], " 0% 50%)"), cssVars.mutable["bg-color"], cssVars.default["text-primary"], _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
     border,
     focusRing
   }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _colorVarStyleDisabled($checkered), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), $focusRing ? focusRingStyle({
@@ -3613,7 +3556,7 @@ function cardColorStyle(props) {
     focusRing
   }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
-const Root$u = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Root$v = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Wrapper = _ref5 => {
   let {
     shouldAddContext,
@@ -3658,7 +3601,7 @@ const Card = forwardRef(function Card2(props, ref) {
     shouldAddContext,
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$u, {
+    children: /* @__PURE__ */jsx(Root$v, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": scheme,
       "data-ui": "Card",
@@ -3685,14 +3628,14 @@ const Card = forwardRef(function Card2(props, ref) {
     })
   });
 });
-var __freeze$s = Object.freeze;
-var __defProp$t = Object.defineProperty;
-var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
-  value: __freeze$s(raw || cooked.slice())
+var __freeze$u = Object.freeze;
+var __defProp$v = Object.defineProperty;
+var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
+  value: __freeze$u(raw || cooked.slice())
 }));
-var _a$s, _b$h;
+var _a$u, _b$i;
 function checkboxBaseStyles() {
-  return css(_a$s || (_a$s = __template$s(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return css(_a$u || (_a$u = __template$u(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -3705,7 +3648,7 @@ function inputElementStyles(props) {
   const {
     focusRing
   } = input.checkbox;
-  return css(_b$h || (_b$h = __template$s(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.2 !important;\n        }\n      }\n    }\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
+  return css(_b$i || (_b$i = __template$u(["\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    opacity: 0;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n\n    & + span {\n      position: relative;\n      display: block;\n      height: ", ";\n      width: ", ";\n      box-sizing: border-box;\n      box-shadow: ", ";\n      border-radius: ", ";\n      line-height: 1;\n      background-color: ", ";\n\n      & > svg {\n        display: block;\n        position: absolute;\n        opacity: 0;\n        height: 100%;\n        width: 100%;\n\n        & > path {\n          vector-effect: non-scaling-stroke;\n          stroke-width: 1.2 !important;\n        }\n      }\n    }\n    &:checked + span {\n      background: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    /* focus */\n    &:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    /* focus when checked - uses a different offset */\n    &:not(:disabled):focus:focus-visible&:checked + span {\n      box-shadow: ", ";\n    }\n\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked + span {\n      background-color: ", ";\n      color: ", ";\n    }\n    &[data-error]&:checked&:not(:disabled):focus:focus-visible + span {\n      box-shadow: ", ";\n    }\n\n    &:disabled + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n    &:disabled&:checked + span {\n      background-color: ", ";\n    }\n\n    &[data-read-only] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      color: ", ";\n    }\n\n    &[data-read-only]&:checked + span {\n      background-color: ", ";\n    }\n\n    &:checked + span > svg:first-child {\n      opacity: 1;\n    }\n    &:indeterminate + span > svg:last-child {\n      opacity: 1;\n    }\n  "])), rem(input.checkbox.size), rem(input.checkbox.size), focusRingBorderStyle({
     color: cssVars.default["border-base"],
     width: input.border.width
   }), rem(radius[2]), cssVars.default["bg-base"], cssVars.default["text-secondary"], focusRingBorderStyle({
@@ -3738,7 +3681,7 @@ function inputElementStyles(props) {
     color: cssVars.default["border-base"]
   }), cssVars.default["text-secondary"], cssVars.default["border-base"]);
 }
-const Root$t = styled.div(checkboxBaseStyles);
+const Root$u = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
   const {
@@ -3758,7 +3701,7 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$t, {
+  return /* @__PURE__ */jsxs(Root$u, {
     className,
     "data-ui": "Checkbox",
     style,
@@ -3776,12 +3719,12 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
     })]
   });
 });
-var __freeze$r = Object.freeze;
-var __defProp$s = Object.defineProperty;
-var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
-  value: __freeze$r(raw || cooked.slice())
+var __freeze$t = Object.freeze;
+var __defProp$u = Object.defineProperty;
+var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
+  value: __freeze$t(raw || cooked.slice())
 }));
-var _a$r;
+var _a$t;
 function codeSyntaxHighlightingStyle(scheme) {
   const dark = scheme === "dark";
   const mainShade = dark ? 400 : 600;
@@ -3898,9 +3841,9 @@ function codeSyntaxHighlightingStyle(scheme) {
   };
 }
 function codeBaseStyle(props) {
-  return css(_a$r || (_a$r = __template$r(["\n    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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), cssVars.default["text-code"], codeSyntaxHighlightingStyle(props.$scheme));
+  return css(_a$t || (_a$t = __template$t(["\n    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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), cssVars.default["text-code"], codeSyntaxHighlightingStyle(props.$scheme));
 }
-const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$t = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -3914,7 +3857,7 @@ const Code = forwardRef(function Code2(props, ref) {
   const {
     scheme
   } = useToneContext();
-  return /* @__PURE__ */jsxs(Root$s, {
+  return /* @__PURE__ */jsxs(Root$t, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -3949,14 +3892,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Root$s = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 const Container = forwardRef(function Container2(props, ref) {
   const {
     as,
     width = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$r, {
+  return /* @__PURE__ */jsx(Root$s, {
     "data-ui": "Container",
     ...restProps,
     $width: useArrayProp(width),
@@ -3964,7 +3907,7 @@ const Container = forwardRef(function Container2(props, ref) {
     ref
   });
 });
-const Root$q = styled(Box)(responsiveGridStyle);
+const Root$r = styled(Box)(responsiveGridStyle);
 const Grid = forwardRef(function Grid2(props, ref) {
   const {
     as,
@@ -3979,7 +3922,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$q, {
+  return /* @__PURE__ */jsx(Root$r, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid",
     ...restProps,
@@ -3996,28 +3939,28 @@ const Grid = forwardRef(function Grid2(props, ref) {
     children
   });
 });
-var __freeze$q = Object.freeze;
-var __defProp$r = Object.defineProperty;
-var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
-  value: __freeze$q(raw || cooked.slice())
+var __freeze$s = Object.freeze;
+var __defProp$t = Object.defineProperty;
+var __template$s = (cooked, raw) => __freeze$s(__defProp$t(cooked, "raw", {
+  value: __freeze$s(raw || cooked.slice())
 }));
-var _a$q, _b$g, _c$9;
+var _a$s, _b$h, _c$a;
 function headingBaseStyle(props) {
   const {
     $accent,
     $muted,
     theme
   } = props;
-  return css(_c$9 || (_c$9 = __template$q(["\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: ", ";\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 3px ", ";\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$q || (_a$q = __template$q(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$g || (_b$g = __template$q(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), theme.sanity.fonts.code.family, cssVars.default["text-link"], cssVars.mutable["bg-color"], cssVars.positive["border-accent"]);
+  return css(_c$a || (_c$a = __template$s(["\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: ", ";\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px ", ",\n          0 0 0 3px ", ";\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$h || (_b$h = __template$s(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), theme.sanity.fonts.code.family, cssVars.default["text-link"], cssVars.mutable["bg-color"], cssVars.positive["border-accent"]);
 }
-var __freeze$p = Object.freeze;
-var __defProp$q = Object.defineProperty;
-var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
-  value: __freeze$p(raw || cooked.slice())
+var __freeze$r = Object.freeze;
+var __defProp$s = Object.defineProperty;
+var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
+  value: __freeze$r(raw || cooked.slice())
 }));
-var _a$p;
-const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled.span(_a$p || (_a$p = __template$p(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$r;
+const Root$q = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const SpanWithTextOverflow$1 = styled.span(_a$r || (_a$r = __template$r(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const Heading = forwardRef(function Heading2(props, ref) {
   const {
     accent = false,
@@ -4031,11 +3974,11 @@ const Heading = forwardRef(function Heading2(props, ref) {
   } = props;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow, {
+    children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$p, {
+  return /* @__PURE__ */jsx(Root$q, {
     "data-ui": "Heading",
     ...restProps,
     $accent: accent,
@@ -4075,7 +4018,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Root$p = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = forwardRef(function Inline2(props, ref) {
   const {
     as,
@@ -4086,7 +4029,7 @@ const Inline = forwardRef(function Inline2(props, ref) {
   const children = useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsx(Root$o, {
+  return /* @__PURE__ */jsx(Root$p, {
     "data-ui": "Inline",
     ...restProps,
     $space: useArrayProp(space),
@@ -4095,16 +4038,16 @@ const Inline = forwardRef(function Inline2(props, ref) {
     children
   });
 });
-var __freeze$o = Object.freeze;
-var __defProp$p = Object.defineProperty;
-var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
-  value: __freeze$o(raw || cooked.slice())
+var __freeze$q = Object.freeze;
+var __defProp$r = Object.defineProperty;
+var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
+  value: __freeze$q(raw || cooked.slice())
 }));
-var _a$o;
+var _a$q;
 function kbdStyle() {
-  return css(_a$o || (_a$o = __template$o(["\n    background: ", ";\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])), cssVars.default["bg-tint"]);
+  return css(_a$q || (_a$q = __template$q(["\n    background: ", ";\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])), cssVars.default["bg-tint"]);
 }
-const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$o = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -4113,7 +4056,7 @@ const KBD = forwardRef(function KBD2(props, ref) {
     radius = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$n, {
+  return /* @__PURE__ */jsx(Root$o, {
     "data-ui": "KBD",
     ...restProps,
     $radius: useArrayProp(radius),
@@ -4131,6 +4074,64 @@ const KBD = forwardRef(function KBD2(props, ref) {
     })
   });
 });
+var __freeze$p = Object.freeze;
+var __defProp$q = Object.defineProperty;
+var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
+  value: __freeze$p(raw || cooked.slice())
+}));
+var _a$p, _b$g, _c$9;
+function labelBaseStyle(props) {
+  const {
+    $accent,
+    $muted,
+    theme
+  } = props;
+  const {
+    fonts
+  } = theme.sanity;
+  return css(_c$9 || (_c$9 = __template$p(["\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    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$p || (_a$p = __template$p(["\n      color: ", "};\n    "])), cssVars.default["text-accent"]), $muted && css(_b$g || (_b$g = __template$p(["\n      color: ", ";\n    "])), cssVars.mutable["muted-fg-color"]), fonts.code.family);
+}
+var __freeze$o = Object.freeze;
+var __defProp$p = Object.defineProperty;
+var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
+  value: __freeze$o(raw || cooked.slice())
+}));
+var _a$o;
+const Root$n = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
+const SpanWithTextOverflow = styled.span(_a$o || (_a$o = __template$o(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const Label = forwardRef(function Label2(props, ref) {
+  const {
+    accent,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    children = /* @__PURE__ */jsx(SpanWithTextOverflow, {
+      children
+    });
+  } else {
+    children = /* @__PURE__ */jsx("span", {
+      children
+    });
+  }
+  return /* @__PURE__ */jsx(Root$n, {
+    "data-ui": "Label",
+    ...restProps,
+    $accent: accent,
+    $align: useArrayProp(align),
+    $muted: muted,
+    $size: useArrayProp(size),
+    $weight: weight,
+    ref,
+    children
+  });
+});
 const key$7 = Symbol.for("@sanity/ui/context/boundaryElement");
 globalScope[key$7] = globalScope[key$7] || createContext(null);
 const BoundaryElementContext = globalScope[key$7];
@@ -7422,7 +7423,7 @@ function selectableColorStyle(props) {
     $tone,
     $scheme
   } = props;
-  return css(_b$4 || (_b$4 = __template$7(["\n    ", "\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n\n    /* &:is(button) - Looks like a button in default mode */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), $tone !== "default" && createCssVars($scheme, theme.sanity.color.tones, $tone), _selectableVarStyle(), cssVars.mutable["bg-color"], cssVars[$tone]["text-secondary"], _selectableVarStyleDisabled(), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), _selectableVarStyleDisabled(), _colorVarStyleActive(), _colorVarStyleSelected(), _colorVarStyleHover(), _colorVarStyleActive(), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
+  return css(_b$4 || (_b$4 = __template$7(["\n    ", "\n    ", "\n\n    background-color: ", ";\n    color: ", ";\n    outline: none;\n\n    /* &:is(button) - Looks like a button in default mode */\n    &[data-as='button'] {\n      &:disabled {\n        ", "\n      }\n\n      &:not(:disabled) {\n        &[aria-pressed='true'] {\n          ", "\n        }\n\n        &[data-selected],\n        &[aria-selected='true'] > & {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      &[data-disabled] {\n        ", "\n      }\n\n      &:not([data-disabled]) {\n        &[data-pressed] {\n          ", "\n        }\n\n        &[data-selected] {\n          ", "\n        }\n\n        @media (hover: hover) {\n          &:not([data-selected]) {\n            &[data-hovered],\n            &:hover {\n              ", "\n            }\n            &:active {\n              ", "\n            }\n          }\n        }\n      }\n    }\n\n    ", "\n  "])), $tone !== "default" && createCssVars($scheme, theme.sanity.color.tones, $tone), _selectableVarStyle($tone), cssVars.mutable["bg-color"], cssVars[$tone]["text-secondary"], _selectableVarStyleDisabled(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _selectableVarStyleDisabled(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), _colorVarStyleHover(), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -7439,7 +7440,7 @@ function MenuGroup(props) {
   const {
     as = "button",
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -7549,28 +7550,24 @@ function MenuGroup(props) {
       ref: setRootElement,
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
-      children: /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsxs(Flex, {
+        gap: space,
         padding,
-        children: /* @__PURE__ */jsxs(Flex, {
-          children: [icon && /* @__PURE__ */jsxs(Text, {
+        children: [icon && /* @__PURE__ */jsxs(Text, {
+          size: fontSize,
+          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+        }), /* @__PURE__ */jsx(Box, {
+          flex: 1,
+          children: /* @__PURE__ */jsx(Text, {
             size: fontSize,
-            children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-          }), /* @__PURE__ */jsx(Box, {
-            flex: 1,
-            marginLeft: icon ? space : void 0,
-            children: /* @__PURE__ */jsx(Text, {
-              size: fontSize,
-              textOverflow: "ellipsis",
-              children: text
-            })
-          }), /* @__PURE__ */jsx(Box, {
-            marginLeft: space,
-            children: /* @__PURE__ */jsx(Text, {
-              size: fontSize,
-              children: /* @__PURE__ */jsx(ChevronRightIcon, {})
-            })
-          })]
-        })
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: text
+          })
+        }), /* @__PURE__ */jsx(Text, {
+          size: fontSize,
+          children: /* @__PURE__ */jsx(ChevronRightIcon, {})
+        })]
       })
     })
   });
@@ -7643,7 +7640,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     forwardedAs: as,
     $radius: useArrayProp(radius),
     $padding: useArrayProp(0),
-    $tone: tone,
+    $tone: disabled ? "default" : tone,
     $scheme: scheme,
     disabled,
     onClick: handleClick,
@@ -7653,38 +7650,33 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     role: "menuitem",
     tabIndex: -1,
     type: as === "button" ? "button" : void 0,
-    children: [(icon || text || iconRight) && /* @__PURE__ */jsx(Box, {
+    children: [(icon || text || iconRight) && /* @__PURE__ */jsxs(Flex, {
       as: "span",
+      gap: space,
+      align: "center",
       ...paddingProps,
-      children: /* @__PURE__ */jsxs(Flex, {
-        as: "span",
-        children: [icon && /* @__PURE__ */jsxs(Text, {
-          size: fontSize,
-          children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-        }), text && /* @__PURE__ */jsx(Box, {
-          flex: 1,
-          marginLeft: icon ? space : void 0,
-          marginRight: iconRight ? space : void 0,
-          children: /* @__PURE__ */jsx(Text, {
-            size: fontSize,
-            textOverflow: "ellipsis",
-            children: text
-          })
-        }), hotkeys && /* @__PURE__ */jsx(Box, {
-          marginLeft: space,
-          style: {
-            marginTop: -4,
-            marginBottom: -4
-          },
-          children: /* @__PURE__ */jsx(Hotkeys, {
-            fontSize,
-            keys: hotkeys
-          })
-        }), iconRight && /* @__PURE__ */jsxs(Text, {
+      children: [icon && /* @__PURE__ */jsxs(Text, {
+        size: fontSize,
+        children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
+      }), text && /* @__PURE__ */jsx(Box, {
+        flex: 1,
+        children: /* @__PURE__ */jsx(Text, {
           size: fontSize,
-          children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
-        })]
-      })
+          textOverflow: "ellipsis",
+          weight: "medium",
+          children: text
+        })
+      }), hotkeys && /* @__PURE__ */jsx(Hotkeys, {
+        fontSize,
+        keys: hotkeys,
+        style: {
+          marginTop: -4,
+          marginBottom: -4
+        }
+      }), iconRight && /* @__PURE__ */jsxs(Text, {
+        size: fontSize,
+        children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
+      })]
     }), children && /* @__PURE__ */jsx(Box, {
       as: "span",
       ...paddingProps,