@sanity/ui 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useEffect, createContext, useContext, useSyncExternalStore, useLayoutEffect, forwardRef, useId, useCallback, cloneElement, isValidElement, createElement, Component, memo, useReducer, Children, Fragment as Fragment$1, startTransition } from 'react';
 import ReactIs, { isElement as isElement$1, isFragment, isValidElementType } from 'react-is';
 import styled, { ThemeProvider as ThemeProvider$1, useTheme as useTheme$1, css, keyframes } from 'styled-components';
-import { black as black$1, hues, white as white$1 } from '@sanity/color';
+import { white as white$1, black as black$1, hues } from '@sanity/color';
 import { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
 import Refractor from 'react-refractor';
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate, size as size$2 } from '@floating-ui/react-dom';
@@ -721,7 +721,7 @@ var ResizeObserverController = function () {
   };
   return ResizeObserverController;
 }();
-var ResizeObserver = function () {
+var ResizeObserver$1 = function () {
   function ResizeObserver(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -757,7 +757,7 @@ var ResizeObserver = function () {
   };
   return ResizeObserver;
 }();
-const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver;
+const _ResizeObserver = typeof document !== "undefined" && typeof window !== "undefined" && window.ResizeObserver ? window.ResizeObserver : ResizeObserver$1;
 const _elementSizeObserver = _createElementSizeObserver();
 function _createElementRectValueListener() {
   return {
@@ -874,6 +874,15 @@ function hexToRgb(hex) {
     b: parseInt(hex.slice(5, 7), 16)
   };
 }
+function rgbaToRGBA(rgba) {
+  const values = rgba.replace(/rgba\(|\)/g, "").split(",");
+  return {
+    r: parseInt(values[0]),
+    g: parseInt(values[1]),
+    b: parseInt(values[2]),
+    a: parseFloat(values[3])
+  };
+}
 function rgbToHex(_ref2) {
   let {
     r,
@@ -991,6 +1000,9 @@ function parseColor(color) {
   if (color.startsWith("hsl(")) {
     return hslToRgb(parseHsl(color));
   }
+  if (color.startsWith("rgba(")) {
+    return rgbaToRGBA(color);
+  }
   throw new Error('parseColor: unexpected color format: "'.concat(color, '"'));
 }
 function rgba(color, a) {
@@ -2157,123 +2169,25 @@ function multiply(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
   const hex = rgbToHex(multiply$1(b, s));
+  if (s.a) {
+    return rgba(hex, s.a);
+  }
   return hex;
 }
 function screen(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
   const hex = rgbToHex(screen$1(b, s));
+  if (s.a) {
+    return rgba(hex, s.a);
+  }
   return hex;
 }
-const defaultTints = {
-  light: {
-    text_primary: "900",
-    text_secondary: "600",
-    text_inactive: "500",
-    bg_base: white$1,
-    bg_base_hover: "50",
-    bg_base_active: "100",
-    bg_accent: "500",
-    bg_accent_hover: "600",
-    bg_accent_active: "700",
-    bg_tint: "50",
-    icon_default: "500",
-    icon_inverted: white$1,
-    border_base: "100",
-    border_accent: "500",
-    border_accent_inverted: white$1
-  },
-  dark: {
-    text_primary: "50",
-    text_secondary: "300",
-    text_inactive: "400",
-    bg_base: black$1,
-    bg_base_hover: "900",
-    bg_base_active: "800",
-    bg_accent: "500",
-    bg_accent_hover: "400",
-    bg_accent_active: "300",
-    bg_tint: "900",
-    icon_default: "300",
-    icon_inverted: hues.gray[900],
-    border_base: "800",
-    border_accent: "300",
-    border_accent_inverted: hues.gray[900]
-  }
-};
-const colorTints = {
-  light: {
-    default: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: black$1,
-      border_accent: "600"
-    },
-    primary: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: black$1,
-      border_accent: "600"
-    },
-    positive: {
-      ...defaultTints.light,
-      bg_base_hover: hues.gray[50],
-      bg_base_active: "50",
-      bg_accent: "400",
-      bg_accent_hover: "500",
-      bg_accent_active: "600",
-      border_accent: "400"
-    },
-    transparent: defaultTints.light,
-    caution: defaultTints.light,
-    critical: defaultTints.light
-  },
-  dark: {
-    default: {
-      ...defaultTints.dark,
-      text_primary: white$1,
-      bg_accent: white$1,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
-    },
-    primary: {
-      ...defaultTints.dark,
-      text_primary: white$1,
-      bg_accent: white$1,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
-    },
-    positive: {
-      ...defaultTints.dark,
-      bg_base_hover: hues.gray[900],
-      bg_base_active: "900",
-      bg_accent: "400",
-      bg_accent_hover: "300",
-      bg_accent_active: "200",
-      border_accent: "400"
-    },
-    transparent: defaultTints.dark,
-    caution: defaultTints.dark,
-    critical: defaultTints.dark
-  }
-};
-const getColorValue = (tints, dark, tone, key) => {
-  const value = colorTints[dark ? "dark" : "light"][tone][key];
-  if (typeof value === "string") {
-    return tints[value];
-  }
-  return value;
-};
-const getColorHex = (tints, dark, tone, key) => {
-  return getColorValue(tints, dark, tone, key).hex;
-};
 const tones = {
   default: hues.gray,
   transparent: hues.gray,
-  primary: hues.gray,
-  positive: hues.cyan,
+  primary: hues.blue,
+  positive: hues.green,
   caution: hues.yellow,
   critical: hues.red
 };
@@ -2289,9 +2203,9 @@ const color = createColorTheme({
       const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
       return {
         fg: dark ? white$1.hex : black$1.hex,
-        bg: getColorHex(tones["default"], dark, "default", "bg_base"),
-        border: getColorHex(tones["default"], dark, "default", "border_base"),
-        focusRing: getColorHex(tones["positive"], dark, "positive", "border_accent"),
+        bg: dark ? black$1.hex : white$1.hex,
+        border: tints2[dark ? 800 : 200].hex,
+        focusRing: hues.blue[dark ? 500 : 500].hex,
         shadow: {
           outline: rgba(tints2[500].hex, 0.4),
           umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
@@ -2328,9 +2242,9 @@ const color = createColorTheme({
     const skeletonFrom = tints[dark ? 800 : 200].hex;
     return {
       fg: tints[dark ? 100 : 900].hex,
-      bg: getColorHex(tints, dark, name, "bg_base"),
-      border: getColorHex(tints, dark, name, "border_base"),
-      focusRing: getColorHex(tints, dark, name, "border_accent"),
+      bg: tints[dark ? 950 : 50].hex,
+      border: tints[dark ? 800 : 200].hex,
+      focusRing: tints[500].hex,
       shadow: {
         outline: rgba(tints[500].hex, 0.4),
         umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
@@ -2358,14 +2272,15 @@ const color = createColorTheme({
     let tints = tones[tone === "default" ? name : tone] || defaultTints;
     if (state === "disabled") {
       tints = defaultTints;
-      const bg2 = getColorHex(tones.default, dark, "default", "bg_tint");
+      const bg2 = mix(base.bg, tints[dark ? 800 : 200].hex);
       const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: getColorHex(tones.default, dark, "default", "bg_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
-        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
+        border: mix(base.bg, tints[dark ? 800 : 200].hex),
+        iconColor: "",
+        // Add color
+        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex)
         },
@@ -2386,14 +2301,15 @@ const color = createColorTheme({
       };
     }
     if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_hover");
+      const bg2 = mix(base.bg, tints[dark ? 300 : 600].hex);
       const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
+        border: mix(base.bg, tints[dark ? 300 : 600].hex),
+        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        iconColor: "",
+        // Add color
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2414,14 +2330,15 @@ const color = createColorTheme({
       };
     }
     if (state === "pressed") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_active");
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 600].hex);
+      const bg2 = mix(base.bg, tints[dark ? 200 : 800].hex);
+      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 800].hex);
       return {
-        bg: bg2,
+        bg: mix(base.bg, tints[dark ? 200 : 800].hex),
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
+        iconColor: "",
+        // Add color
+        border: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2450,9 +2367,10 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix2(bg2, tints[dark ? 50 : 950].hex),
-        border: bg2,
-        fg: getColorHex(tints, dark, "default", "bg_base"),
-        iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
+        border: mix(base.bg, tints[dark ? 200 : 800].hex),
+        fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
+        iconColor: "",
+        // Add color
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2472,14 +2390,15 @@ const color = createColorTheme({
         }
       };
     }
-    const bg = getColorHex(tints, dark, tone, "bg_accent");
+    const bg = mix(base.bg, tints[dark ? 400 : 500].hex);
     const skeletonFrom = mix2(bg, tints[dark ? 200 : 800].hex);
     return {
       bg,
       bg2: mix2(bg, tints[dark ? 50 : 950].hex),
-      border: bg,
-      fg: getColorHex(tints, dark, "default", "bg_base"),
-      iconColor: getColorHex(tints, dark, "default", "icon_inverted"),
+      border: mix(base.bg, tints[dark ? 400 : 500].hex),
+      iconColor: "",
+      // Add color
+      fg: mix(base.bg, dark ? black$1.hex : white$1.hex),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex)
       },
@@ -2518,21 +2437,22 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_inactive"),
-        iconColor: getColorHex(tones.default, dark, "default", "border_base"),
+        border: mix(bg2, tints[dark ? 950 : 50].hex),
+        iconColor: "",
+        // Add color
+        fg: mix(bg2, tints[dark ? 800 : 200].hex),
         muted: {
-          fg: getColorHex(tones.default, dark, "default", "text_inactive")
+          fg: mix(bg2, tints[dark ? 900 : 100].hex)
         },
         accent: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(bg2, tints[dark ? 900 : 100].hex)
         },
         link: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(bg2, tints[dark ? 900 : 100].hex)
         },
         code: {
           bg: bg2,
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(bg2, tints[dark ? 900 : 100].hex)
         },
         skeleton: {
           from: rgba(skeletonFrom2, 0.5),
@@ -2541,16 +2461,17 @@ const color = createColorTheme({
       };
     }
     if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, name, "bg_base_hover");
+      const bg2 = mix(base.bg, tints[dark ? 950 : 50].hex);
       const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
         border: mix(bg2, tints[dark ? 900 : 100].hex),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        iconColor: "",
+        // Add color
         muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
           fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
@@ -2560,7 +2481,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2572,16 +2493,17 @@ const color = createColorTheme({
       if (isNeutral) {
         tints = tones.primary;
       }
-      const bg2 = getColorHex(tints, dark, name, "bg_base_active");
-      const skeletonFrom2 = mix(bg2, getColorHex(tints, dark, name, "bg_base_active"));
+      const bg2 = mix(base.bg, tints[dark ? 900 : 100].hex);
+      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, "border_base"),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
+        border: mix(bg2, tints[dark ? 900 : 100].hex),
+        iconColor: "",
+        // Add color
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
         muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
           fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
@@ -2591,7 +2513,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2608,11 +2530,12 @@ const color = createColorTheme({
       return {
         bg: bg2,
         bg2: mix(bg2, tints[dark ? 950 : 50].hex),
-        border: getColorHex(tints, dark, name, "border_base"),
-        fg: getColorHex(tints, dark, tone, "text_primary"),
-        iconColor: getColorHex(tints, dark, name, "icon_default"),
+        border: mix(bg2, tints[dark ? 900 : 100].hex),
+        fg: mix(base.bg, tints[dark ? 200 : 800].hex),
+        iconColor: "",
+        // Add color
         muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         accent: {
           fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
@@ -2622,7 +2545,7 @@ const color = createColorTheme({
         },
         code: {
           bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
+          fg: mix(base.bg, tints[dark ? 400 : 600].hex)
         },
         skeleton: {
           from: skeletonFrom2,
@@ -2635,11 +2558,12 @@ const color = createColorTheme({
     return {
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      border: mix(bg, getColorHex(tints, dark, name, "bg_base")),
-      fg: getColorHex(tints, dark, tone, "text_primary"),
-      iconColor: getColorHex(tints, dark, name, "icon_default"),
+      border: mix(bg, tints[dark ? 900 : 100].hex),
+      fg: mix(base.bg, tints[dark ? 300 : 700].hex),
+      iconColor: "",
+      // Add color
       muted: {
-        fg: getColorHex(tints, dark, tone, "text_secondary")
+        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
       },
       accent: {
         fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
@@ -2649,7 +2573,7 @@ const color = createColorTheme({
       },
       code: {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: getColorHex(tints, dark, tone, "text_secondary")
+        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
       },
       skeleton: {
         from: skeletonFrom,
@@ -2690,11 +2614,12 @@ const color = createColorTheme({
     }
     if (mode === "ghost") {
       return {
-        ...muted,
+        ...solid,
         enabled: {
           ...muted.enabled,
           border: base.border
-        }
+        },
+        disabled: muted.disabled
       };
     }
     return solid;
@@ -2735,8 +2660,9 @@ const color = createColorTheme({
       bg,
       bg2: mix(bg, tints[dark ? 950 : 50].hex),
       fg: base.fg,
-      iconColor: getColorHex(tints, dark, name, "icon_default"),
       border: base.border,
+      iconColor: "",
+      // Add color
       muted: {
         fg: mix(base.bg, tints[dark ? 400 : 600].hex)
       },
@@ -2768,45 +2694,50 @@ const color = createColorTheme({
       const tints = tones.critical;
       return {
         bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        bg2: getColorHex(tints, dark, "critical", "text_secondary"),
+        bg2: "",
+        // Add color
         fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: getColorHex(tints, dark, "critical", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+        border: mix(base.bg, tints[dark ? 800 : 200].hex),
+        placeholder: mix(base.bg, tints[dark ? 600 : 400].hex)
       };
     }
     if (state === "hovered") {
       return {
         bg: base.bg,
-        bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
+        bg2: "",
+        // Add color
         fg: base.fg,
         border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
       };
     }
     if (state === "disabled") {
       return {
-        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
-        bg2: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
+        bg2: "",
+        // Add color
+        fg: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
+        border: mix(base.bg, hues.gray[dark ? 900 : 100].hex),
+        placeholder: mix(base.bg, hues.gray[dark ? 800 : 200].hex)
       };
     }
     if (state === "readOnly") {
       return {
-        bg: getColorHex(tones.default, dark, "default", "bg_tint"),
-        bg2: getColorHex(tones.default, dark, "default", "border_base"),
-        fg: getColorHex(tones.default, dark, "default", "text_secondary"),
-        border: getColorHex(tones.default, dark, "default", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+        bg: mix(base.bg, hues.gray[dark ? 950 : 50].hex),
+        bg2: "",
+        // Add color
+        fg: mix(base.bg, hues.gray[dark ? 200 : 800].hex),
+        border: mix(base.bg, hues.gray[dark ? 800 : 200].hex),
+        placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
       };
     }
     return {
       bg: base.bg,
-      bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
+      bg2: "",
+      // Add color
       fg: base.fg,
       border: base.border,
-      placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+      placeholder: mix(base.bg, hues.gray[dark ? 600 : 400].hex)
     };
   },
   selectable: _ref17 => {
@@ -3121,6 +3052,10 @@ const studioTheme = {
   },
   color,
   container: [320, 640, 960, 1280, 1600, 1920],
+  focusRing: {
+    offset: 1,
+    width: 2
+  },
   fonts,
   media: [360, 600, 900, 1200, 1800, 2400],
   radius: [0, 1, 3, 6, 9, 12, 21],
@@ -3129,9 +3064,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],
@@ -4577,64 +4512,6 @@ 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: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$k || (_b$k = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), 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,
@@ -4653,18 +4530,18 @@ 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,
-    fontSize,
+    fontSize = 1,
     mode = "default",
     padding = 1,
     radius = 2,
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$y, {
+  return /* @__PURE__ */jsx(Root$z, {
     "data-ui": "Badge",
     ...restProps,
     $mode: mode,
@@ -4672,13 +4549,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,
@@ -4692,7 +4570,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),
@@ -4705,16 +4583,16 @@ 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,
@@ -4752,14 +4630,14 @@ function _colorVarsStyle(base, color) {
     "--card-hairline-hard-color": color.border
   };
 }
-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: {
@@ -4819,14 +4697,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: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
+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: var(--card-bg-color);\n  border-radius: inherit;\n  z-index: 1;\n  box-shadow: inherit;\n"])));
 const Button = forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -4875,7 +4753,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,
@@ -4920,12 +4798,12 @@ const Button = forwardRef(function Button2(props, ref) {
     })]
   });
 });
-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)];
 }
@@ -4935,7 +4813,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: var(--card-bg-image);\n    "])), space[3], space[3]));
+  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: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -4956,7 +4834,7 @@ function cardColorStyle(props) {
     width: 0,
     color: "var(--card-border-color)"
   };
-  return css(_c$a || (_c$a = __template$t(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-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  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
+  return css(_c$b || (_c$b = __template$v(["\n    color-scheme: ", ";\n\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-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  "])), dark ? "dark" : "light", _colorVarsStyle(base, card.enabled, $checkered), _colorVarsStyle(base, card.disabled, $checkered), _colorVarsStyle(base, card.pressed, $checkered), _colorVarsStyle(base, card.selected, $checkered), _colorVarsStyle(base, card.hovered, $checkered), _colorVarsStyle(base, card.pressed, $checkered), $focusRing ? focusRingStyle({
     base,
     border,
     focusRing
@@ -4966,7 +4844,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 Card = forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -4991,7 +4869,7 @@ const Card = forwardRef(function Card2(props, ref) {
   return /* @__PURE__ */jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$u, {
+    children: /* @__PURE__ */jsx(Root$v, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -5016,14 +4894,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 {
@@ -5037,7 +4915,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: color.default.enabled.border,
     width: input.border.width
   }), rem(radius[2]), color.default.enabled.bg, color.default.enabled.bg2, focusRingBorderStyle({
@@ -5070,7 +4948,7 @@ function inputElementStyles(props) {
     color: color.default.readOnly.border
   }), color.default.readOnly.fg, color.default.readOnly.bg2);
 }
-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 {
@@ -5090,7 +4968,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,
@@ -5108,12 +4986,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(_ref20) {
   let {
     theme
@@ -5231,9 +5109,9 @@ function codeSyntaxHighlightingStyle(_ref20) {
   };
 }
 function codeBaseStyle() {
-  return css(_a$r || (_a$r = __template$r(["\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    & 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  "])), codeSyntaxHighlightingStyle);
+  return css(_a$t || (_a$t = __template$t(["\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    & 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  "])), codeSyntaxHighlightingStyle);
 }
-const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$t = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -5244,7 +5122,7 @@ const Code = forwardRef(function Code2(props, ref) {
   } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxs(Root$s, {
+  return /* @__PURE__ */jsxs(Root$t, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -5278,14 +5156,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),
@@ -5293,7 +5171,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,
@@ -5308,7 +5186,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,
@@ -5325,28 +5203,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: 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:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\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: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$q(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  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: 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:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\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: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$h || (_b$h = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
 }
-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,
@@ -5360,11 +5238,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,
@@ -5404,7 +5282,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,
@@ -5415,7 +5293,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),
@@ -5424,16 +5302,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: var(--card-bg2-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$q || (_a$q = __template$q(["\n    background: var(--card-bg2-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
-const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$o = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -5442,7 +5320,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),
@@ -5460,6 +5338,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: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$p(["\n      color: var(--card-muted-fg-color);\n    "]))), 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];
@@ -6838,7 +6774,7 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
     ...restProps
   } = props;
@@ -6912,7 +6848,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     onClear,
     padding: paddingProp = 3,
     prefix,
-    radius: radiusProp = 1,
+    radius: radiusProp = 2,
     readOnly,
     space: spaceProp = 3,
     suffix,
@@ -7949,6 +7885,7 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
+const BORDER_OFFSET_X = 12;
 function dialogStyle(_ref24) {
   let {
     theme
@@ -8003,9 +7940,9 @@ const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDial
 const DialogContainer = styled(Container)(_a$b || (_a$b = __template$b(["\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"])));
 const DialogCardRoot = styled(Card)(_b$6 || (_b$6 = __template$b(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  width: 100%;\n  min-height: 0;\n  max-height: 100%;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const DialogLayout = styled(Flex)(_c$2 || (_c$2 = __template$b(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled(Card)(_d$1 || (_d$1 = __template$b(["\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"])));
+const DialogHeader = styled(Box)(_d$1 || (_d$1 = __template$b(["\n  position: relative;\n  z-index: 2;\n\n  &:after {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    bottom: -1px;\n    border-bottom: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && props.$hasScrolledFromTop ? 1 : 0);
 const DialogContent = styled(Box)(_e || (_e = __template$b(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n  border-top: 1px solid var(--card-hairline-soft-color);\n"])));
+const DialogFooter = styled(Box)(_f || (_f = __template$b(["\n  position: relative;\n  z-index: 3;\n\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    left: ", "px;\n    right: ", "px;\n    top: -1px;\n    border-top: 1px solid var(--card-border-color);\n    width: auto;\n    opacity: ", ";\n    transition: opacity 200ms ease-in;\n  }\n"])), BORDER_OFFSET_X, BORDER_OFFSET_X, props => props.$isContentScrollable && !props.$hasScrolledToBottom ? 1 : 0);
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   var _a2;
   const {
@@ -8040,6 +7977,9 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   const labelId = "".concat(id, "_label");
   const showCloseButton = Boolean(onClose) && hideCloseButton === false;
   const showHeader = Boolean(header) || showCloseButton;
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const [hasScrolledFromTop, setHasScrolledFromTop] = useState(false);
+  const [hasScrolledToBottom, setHasScrolledToBottom] = useState(false);
   useEffect(() => {
     if (!autoFocus) return;
     if (forwardedRef.current) {
@@ -8074,6 +8014,22 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
     localContentRef.current = el;
     if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
   }, [contentRef]);
+  const handleContentUpdate = useCallback(() => {
+    if (localContentRef.current) {
+      setIsContentScrollable(localContentRef.current.clientHeight < localContentRef.current.scrollHeight);
+      setHasScrolledFromTop(localContentRef.current.scrollTop > 0);
+      setHasScrolledToBottom(localContentRef.current.scrollTop >= localContentRef.current.scrollHeight - localContentRef.current.clientHeight);
+    }
+  }, []);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(handleContentUpdate);
+    if (localContentRef.current) {
+      resizeObserver.observe(localContentRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, handleContentUpdate]);
   return /* @__PURE__ */jsx(DialogContainer, {
     "data-ui": "DialogCard",
     width,
@@ -8085,33 +8041,38 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
       children: /* @__PURE__ */jsxs(DialogLayout, {
         direction: "column",
         children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledFromTop: hasScrolledFromTop,
+          padding: 3,
           children: /* @__PURE__ */jsxs(Flex, {
+            align: "center",
             children: [/* @__PURE__ */jsx(Box, {
               flex: 1,
-              padding: 4,
+              padding: 3,
               children: header && /* @__PURE__ */jsx(Text, {
                 id: labelId,
-                weight: "semibold",
+                size: 1,
+                weight: "medium",
                 children: header
               })
-            }), showCloseButton && /* @__PURE__ */jsx(Box, {
-              padding: 2,
-              children: /* @__PURE__ */jsx(Button, {
-                "aria-label": "Close dialog",
-                disabled: !onClose,
-                icon: CloseIcon,
-                mode: "bleed",
-                onClick: onClose,
-                padding: 3
-              })
+            }), showCloseButton && /* @__PURE__ */jsx(Button, {
+              "aria-label": "Close dialog",
+              disabled: !onClose,
+              icon: CloseIcon,
+              mode: "bleed",
+              onClick: onClose,
+              padding: 3
             })]
           })
         }), /* @__PURE__ */jsx(DialogContent, {
           flex: 1,
           ref: setContentRef,
           tabIndex: -1,
+          onScroll: handleContentUpdate,
           children
         }), footer && /* @__PURE__ */jsx(DialogFooter, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledToBottom: hasScrolledToBottom,
           children: footer
         })]
       })
@@ -8744,7 +8705,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_b$4 || (_b$4 = __template$7(["\n    ", "\n\n    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\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  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_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    background-color: var(--card-bg-color);\n    color: var(--card-fg-color);\n    outline: none;\n\n    /* &:is(button) */\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  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.disabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.pressed), (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
 }
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8761,7 +8722,7 @@ function MenuGroup(props) {
   const {
     as = "button",
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -8773,6 +8734,9 @@ function MenuGroup(props) {
     ...restProps
   } = props;
   const menu = useMenu();
+  const {
+    scheme
+  } = useRootTheme();
   const {
     activeElement,
     mount,
@@ -8861,34 +8825,31 @@ function MenuGroup(props) {
       "data-selected": !withinMenu && active ? "" : void 0,
       $radius: useArrayProp(radius),
       $tone: tone,
+      $scheme: scheme,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       onMouseEnter: handleMouseEnter,
       ref: setRootElement,
       tabIndex: -1,
       type: as === "button" ? "button" : void 0,
-      children: /* @__PURE__ */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, {})
+        })]
       })
     })
   });
@@ -8898,7 +8859,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     as = "button",
     children,
     disabled,
-    fontSize = 2,
+    fontSize = 1,
     hotkeys,
     icon,
     iconRight,
@@ -8918,6 +8879,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useRootTheme();
   const menu = useMenu();
   const {
     activeElement,
@@ -8958,7 +8922,8 @@ 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,
     onMouseEnter: onItemMouseEnter,
@@ -8967,38 +8932,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,
@@ -9911,5 +9871,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
+export { Autocomplete, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Box, Breadcrumbs, Button, Card, Checkbox, Code, CodeSkeleton, Container, Dialog, DialogContext, DialogProvider, ElementQuery, ErrorBoundary, Flex, Grid, Heading, HeadingSkeleton, Hotkeys, Inline, KBD, Label, LabelSkeleton, Layer, LayerProvider, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Radio, Select, Skeleton, Spinner, SrOnly, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, TextSkeleton, ThemeColorProvider, ThemeProvider, Toast, ToastProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, Tree, TreeItem, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$1 as multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$1 as screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map