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

package/dist/index.js

@@ -734,7 +734,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.");
@@ -770,7 +770,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 {
@@ -887,6 +887,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,
@@ -1004,6 +1013,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) {
@@ -2170,123 +2182,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: color$1.white,
-    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: color$1.white,
-    border_base: "100",
-    border_accent: "500",
-    border_accent_inverted: color$1.white
-  },
-  dark: {
-    text_primary: "50",
-    text_secondary: "300",
-    text_inactive: "400",
-    bg_base: color$1.black,
-    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: color$1.hues.gray[900],
-    border_base: "800",
-    border_accent: "300",
-    border_accent_inverted: color$1.hues.gray[900]
-  }
-};
-const colorTints = {
-  light: {
-    default: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: color$1.black,
-      border_accent: "600"
-    },
-    primary: {
-      ...defaultTints.light,
-      bg_accent: "900",
-      bg_accent_hover: "950",
-      bg_accent_active: color$1.black,
-      border_accent: "600"
-    },
-    positive: {
-      ...defaultTints.light,
-      bg_base_hover: color$1.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: color$1.white,
-      bg_accent: color$1.white,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
-    },
-    primary: {
-      ...defaultTints.dark,
-      text_primary: color$1.white,
-      bg_accent: color$1.white,
-      bg_accent_hover: "50",
-      bg_accent_active: "100"
-    },
-    positive: {
-      ...defaultTints.dark,
-      bg_base_hover: color$1.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: color$1.hues.gray,
   transparent: color$1.hues.gray,
-  primary: color$1.hues.gray,
-  positive: color$1.hues.cyan,
+  primary: color$1.hues.blue,
+  positive: color$1.hues.green,
   caution: color$1.hues.yellow,
   critical: color$1.hues.red
 };
@@ -2302,9 +2216,9 @@ const color = createColorTheme({
       const skeletonFrom2 = dark ? tints2[900].hex : tints2[100].hex;
       return {
         fg: dark ? color$1.white.hex : color$1.black.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 ? color$1.black.hex : color$1.white.hex,
+        border: tints2[dark ? 800 : 200].hex,
+        focusRing: color$1.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),
@@ -2341,9 +2255,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),
@@ -2371,14 +2285,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 ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 950 : 50].hex)
         },
@@ -2399,14 +2314,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 ? color$1.black.hex : color$1.white.hex),
+        iconColor: "",
+        // Add color
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2427,14 +2343,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 ? color$1.black.hex : color$1.white.hex),
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2463,9 +2380,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 ? color$1.black.hex : color$1.white.hex),
+        iconColor: "",
+        // Add color
         muted: {
           fg: mix(base.bg, tints[dark ? 800 : 200].hex)
         },
@@ -2485,14 +2403,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 ? color$1.black.hex : color$1.white.hex),
       muted: {
         fg: mix(base.bg, tints[dark ? 900 : 100].hex)
       },
@@ -2531,21 +2450,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),
@@ -2554,16 +2474,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, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2573,7 +2494,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,
@@ -2585,16 +2506,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, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2604,7 +2526,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,
@@ -2621,11 +2543,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, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2635,7 +2558,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,
@@ -2648,11 +2571,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, color$1.hues.red[dark ? 400 : 500].hex)
@@ -2662,7 +2586,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,
@@ -2703,11 +2627,12 @@ const color = createColorTheme({
     }
     if (mode === "ghost") {
       return {
-        ...muted,
+        ...solid,
         enabled: {
           ...muted.enabled,
           border: base.border
-        }
+        },
+        disabled: muted.disabled
       };
     }
     return solid;
@@ -2748,8 +2673,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)
       },
@@ -2781,45 +2707,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, color$1.hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
+        placeholder: mix(base.bg, color$1.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, color$1.hues.gray[dark ? 950 : 50].hex),
+        bg2: "",
+        // Add color
+        fg: mix(base.bg, color$1.hues.gray[dark ? 700 : 300].hex),
+        border: mix(base.bg, color$1.hues.gray[dark ? 900 : 100].hex),
+        placeholder: mix(base.bg, color$1.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, color$1.hues.gray[dark ? 950 : 50].hex),
+        bg2: "",
+        // Add color
+        fg: mix(base.bg, color$1.hues.gray[dark ? 200 : 800].hex),
+        border: mix(base.bg, color$1.hues.gray[dark ? 800 : 200].hex),
+        placeholder: mix(base.bg, color$1.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, color$1.hues.gray[dark ? 600 : 400].hex)
     };
   },
   selectable: _ref17 => {
@@ -3134,6 +3065,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],
@@ -3142,9 +3077,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],
@@ -4590,64 +4525,6 @@ const Box = react.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 styled.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 && styled.css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled__default.default.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 = react.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__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  } else {
-    children = /* @__PURE__ */jsxRuntime.jsx("span", {
-      children
-    });
-  }
-  return /* @__PURE__ */jsxRuntime.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,
@@ -4666,18 +4543,18 @@ function badgeStyle(props) {
     }
   };
 }
-const Root$y = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
+const Root$z = styled__default.default(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = react.forwardRef(function Badge2(props, ref) {
   const {
     children,
-    fontSize,
+    fontSize = 1,
     mode = "default",
     padding = 1,
     radius = 2,
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$y, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$z, {
     "data-ui": "Badge",
     ...restProps,
     $mode: mode,
@@ -4685,13 +4562,14 @@ const Badge = react.forwardRef(function Badge2(props, ref) {
     $radius: useArrayProp(radius),
     padding: useArrayProp(padding),
     ref,
-    children: /* @__PURE__ */jsxRuntime.jsx(Label, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Text, {
       size: fontSize,
+      weight: "medium",
       children
     })
   });
 });
-const Root$x = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
+const Root$y = styled__default.default(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = react.forwardRef(function Flex2(props, ref) {
   const {
     align,
@@ -4705,7 +4583,7 @@ const Flex = react.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__ */
-    jsxRuntime.jsx(Root$x, {
+    jsxRuntime.jsx(Root$y, {
       "data-ui": "Flex",
       ...restProps,
       $align: useArrayProp(align),
@@ -4718,16 +4596,16 @@ const Flex = react.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 = styled.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__default.default(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 = styled.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__default.default(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = react.forwardRef(function Spinner2(props, ref) {
-  return /* @__PURE__ */jsxRuntime.jsx(Root$w, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$x, {
     "data-ui": "Spinner",
     ...props,
     ref,
@@ -4765,14 +4643,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 styled.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 styled.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: {
@@ -4832,14 +4710,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__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
-const LoadingBox = styled__default.default.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__default.default.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const LoadingBox = styled__default.default.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 = react.forwardRef(function Button2(props, ref) {
   const {
     children,
@@ -4888,7 +4766,7 @@ const Button = react.forwardRef(function Button2(props, ref) {
     paddingLeft,
     paddingRight
   }), [padding, paddingX, paddingY, paddingTop, paddingBottom, paddingLeft, paddingRight]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$v, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$w, {
     "data-ui": "Button",
     ...restProps,
     $mode: mode,
@@ -4933,12 +4811,12 @@ const Button = react.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)];
 }
@@ -4948,7 +4826,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return styled.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 && styled.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 styled.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 && styled.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;
@@ -4969,7 +4847,7 @@ function cardColorStyle(props) {
     width: 0,
     color: "var(--card-border-color)"
   };
-  return styled.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 styled.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
@@ -4979,7 +4857,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__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
+const Root$v = styled__default.default(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = react.forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -5004,7 +4882,7 @@ const Card = react.forwardRef(function Card2(props, ref) {
   return /* @__PURE__ */jsxRuntime.jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsxRuntime.jsx(Root$u, {
+    children: /* @__PURE__ */jsxRuntime.jsx(Root$v, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -5029,14 +4907,14 @@ const Card = react.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 styled.css(_a$s || (_a$s = __template$s(["\n    position: relative;\n    display: inline-block;\n  "])));
+  return styled.css(_a$u || (_a$u = __template$u(["\n    position: relative;\n    display: inline-block;\n  "])));
 }
 function inputElementStyles(props) {
   const {
@@ -5050,7 +4928,7 @@ function inputElementStyles(props) {
   const {
     focusRing
   } = input.checkbox;
-  return styled.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 styled.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({
@@ -5083,7 +4961,7 @@ function inputElementStyles(props) {
     color: color.default.readOnly.border
   }), color.default.readOnly.fg, color.default.readOnly.bg2);
 }
-const Root$t = styled__default.default.div(checkboxBaseStyles);
+const Root$u = styled__default.default.div(checkboxBaseStyles);
 const Input$5 = styled__default.default.input(inputElementStyles);
 const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
   const {
@@ -5103,7 +4981,7 @@ const Checkbox = react.forwardRef(function Checkbox2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$u, {
     className,
     "data-ui": "Checkbox",
     style,
@@ -5121,12 +4999,12 @@ const Checkbox = react.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
@@ -5244,9 +5122,9 @@ function codeSyntaxHighlightingStyle(_ref20) {
   };
 }
 function codeBaseStyle() {
-  return styled.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 styled.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__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$t = styled__default.default.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = react.forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -5257,7 +5135,7 @@ const Code = react.forwardRef(function Code2(props, ref) {
   } = props;
   const language = typeof languageProp === "string" ? languageProp : void 0;
   const registered = language ? Refractor__default.default.hasLanguage(language) : false;
-  return /* @__PURE__ */jsxRuntime.jsxs(Root$s, {
+  return /* @__PURE__ */jsxRuntime.jsxs(Root$t, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -5291,14 +5169,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$r = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Root$s = styled__default.default(Box)(containerBaseStyle, responsiveContainerWidthStyle);
 const Container = react.forwardRef(function Container2(props, ref) {
   const {
     as,
     width = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$r, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$s, {
     "data-ui": "Container",
     ...restProps,
     $width: useArrayProp(width),
@@ -5306,7 +5184,7 @@ const Container = react.forwardRef(function Container2(props, ref) {
     ref
   });
 });
-const Root$q = styled__default.default(Box)(responsiveGridStyle);
+const Root$r = styled__default.default(Box)(responsiveGridStyle);
 const Grid = react.forwardRef(function Grid2(props, ref) {
   const {
     as,
@@ -5321,7 +5199,7 @@ const Grid = react.forwardRef(function Grid2(props, ref) {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$q, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$r, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid",
     ...restProps,
@@ -5338,28 +5216,28 @@ const Grid = react.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 styled.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 && styled.css(_a$q || (_a$q = __template$q(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.css(_b$g || (_b$g = __template$q(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family);
+  return styled.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 && styled.css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
-const SpanWithTextOverflow = styled__default.default.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__default.default.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const SpanWithTextOverflow$1 = styled__default.default.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 = react.forwardRef(function Heading2(props, ref) {
   const {
     accent = false,
@@ -5373,11 +5251,11 @@ const Heading = react.forwardRef(function Heading2(props, ref) {
   } = props;
   let children = childrenProp;
   if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow, {
+    children = /* @__PURE__ */jsxRuntime.jsx(SpanWithTextOverflow$1, {
       children
     });
   }
-  return /* @__PURE__ */jsxRuntime.jsx(Root$p, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$q, {
     "data-ui": "Heading",
     ...restProps,
     $accent: accent,
@@ -5417,7 +5295,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$o = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Root$p = styled__default.default(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = react.forwardRef(function Inline2(props, ref) {
   const {
     as,
@@ -5428,7 +5306,7 @@ const Inline = react.forwardRef(function Inline2(props, ref) {
   const children = react.useMemo(() => childrenToElementArray(childrenProp).filter(Boolean).map((child, idx) => /* @__PURE__ */jsxRuntime.jsx("div", {
     children: child
   }, idx)), [childrenProp]);
-  return /* @__PURE__ */jsxRuntime.jsx(Root$o, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$p, {
     "data-ui": "Inline",
     ...restProps,
     $space: useArrayProp(space),
@@ -5437,16 +5315,16 @@ const Inline = react.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 styled.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 styled.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__default.default.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$o = styled__default.default.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = react.forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -5455,7 +5333,7 @@ const KBD = react.forwardRef(function KBD2(props, ref) {
     radius = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsxRuntime.jsx(Root$n, {
+  return /* @__PURE__ */jsxRuntime.jsx(Root$o, {
     "data-ui": "KBD",
     ...restProps,
     $radius: useArrayProp(radius),
@@ -5473,6 +5351,64 @@ const KBD = react.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 styled.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 && styled.css(_a$p || (_a$p = __template$p(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && styled.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__default.default.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
+const SpanWithTextOverflow = styled__default.default.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 = react.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__ */jsxRuntime.jsx(SpanWithTextOverflow, {
+      children
+    });
+  } else {
+    children = /* @__PURE__ */jsxRuntime.jsx("span", {
+      children
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.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] || react.createContext(null);
 const BoundaryElementContext = globalScope[key$7];
@@ -6851,7 +6787,7 @@ const TextArea = react.forwardRef(function TextArea2(props, forwardedRef) {
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
     ...restProps
   } = props;
@@ -6925,7 +6861,7 @@ const TextInput = react.forwardRef(function TextInput2(props, forwardedRef) {
     onClear,
     padding: paddingProp = 3,
     prefix,
-    radius: radiusProp = 1,
+    radius: radiusProp = 2,
     readOnly,
     space: spaceProp = 3,
     suffix,
@@ -7962,6 +7898,7 @@ const Breadcrumbs = react.forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
+const BORDER_OFFSET_X = 12;
 function dialogStyle(_ref24) {
   let {
     theme
@@ -8016,9 +7953,9 @@ const Root$7 = styled__default.default(Layer)(responsivePaddingStyle, dialogStyl
 const DialogContainer = styled__default.default(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__default.default(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__default.default(Flex)(_c$2 || (_c$2 = __template$b(["\n  flex: 1;\n  min-height: 0;\n  width: 100%;\n"])));
-const DialogHeader = styled__default.default(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__default.default(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__default.default(Box)(_e || (_e = __template$b(["\n  position: relative;\n  z-index: 1;\n  overflow: auto;\n  outline: none;\n"])));
-const DialogFooter = styled__default.default(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__default.default(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 = react.forwardRef(function DialogCard2(props, ref) {
   var _a2;
   const {
@@ -8053,6 +7990,9 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
   const labelId = "".concat(id, "_label");
   const showCloseButton = Boolean(onClose) && hideCloseButton === false;
   const showHeader = Boolean(header) || showCloseButton;
+  const [isContentScrollable, setIsContentScrollable] = react.useState(false);
+  const [hasScrolledFromTop, setHasScrolledFromTop] = react.useState(false);
+  const [hasScrolledToBottom, setHasScrolledToBottom] = react.useState(false);
   react.useEffect(() => {
     if (!autoFocus) return;
     if (forwardedRef.current) {
@@ -8087,6 +8027,22 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
     localContentRef.current = el;
     if (typeof contentRef === "function") contentRef(el);else if (contentRef) contentRef.current = el;
   }, [contentRef]);
+  const handleContentUpdate = react.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);
+    }
+  }, []);
+  react.useEffect(() => {
+    const resizeObserver = new ResizeObserver(handleContentUpdate);
+    if (localContentRef.current) {
+      resizeObserver.observe(localContentRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef, handleContentUpdate]);
   return /* @__PURE__ */jsxRuntime.jsx(DialogContainer, {
     "data-ui": "DialogCard",
     width,
@@ -8098,33 +8054,38 @@ const DialogCard = react.forwardRef(function DialogCard2(props, ref) {
       children: /* @__PURE__ */jsxRuntime.jsxs(DialogLayout, {
         direction: "column",
         children: [showHeader && /* @__PURE__ */jsxRuntime.jsx(DialogHeader, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledFromTop: hasScrolledFromTop,
+          padding: 3,
           children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
+            align: "center",
             children: [/* @__PURE__ */jsxRuntime.jsx(Box, {
               flex: 1,
-              padding: 4,
+              padding: 3,
               children: header && /* @__PURE__ */jsxRuntime.jsx(Text, {
                 id: labelId,
-                weight: "semibold",
+                size: 1,
+                weight: "medium",
                 children: header
               })
-            }), showCloseButton && /* @__PURE__ */jsxRuntime.jsx(Box, {
-              padding: 2,
-              children: /* @__PURE__ */jsxRuntime.jsx(Button, {
-                "aria-label": "Close dialog",
-                disabled: !onClose,
-                icon: icons.CloseIcon,
-                mode: "bleed",
-                onClick: onClose,
-                padding: 3
-              })
+            }), showCloseButton && /* @__PURE__ */jsxRuntime.jsx(Button, {
+              "aria-label": "Close dialog",
+              disabled: !onClose,
+              icon: icons.CloseIcon,
+              mode: "bleed",
+              onClick: onClose,
+              padding: 3
             })]
           })
         }), /* @__PURE__ */jsxRuntime.jsx(DialogContent, {
           flex: 1,
           ref: setContentRef,
           tabIndex: -1,
+          onScroll: handleContentUpdate,
           children
         }), footer && /* @__PURE__ */jsxRuntime.jsx(DialogFooter, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledToBottom: hasScrolledToBottom,
           children: footer
         })]
       })
@@ -8757,7 +8718,7 @@ function selectableColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return styled.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 styled.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__default.default(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -8774,7 +8735,7 @@ function MenuGroup(props) {
   const {
     as = "button",
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -8786,6 +8747,9 @@ function MenuGroup(props) {
     ...restProps
   } = props;
   const menu = useMenu();
+  const {
+    scheme
+  } = useRootTheme();
   const {
     activeElement,
     mount,
@@ -8874,34 +8838,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__ */jsxRuntime.jsx(Box, {
+      children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
+        gap: space,
         padding,
-        children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
-          children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
+        children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
+          size: fontSize,
+          children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
+        }), /* @__PURE__ */jsxRuntime.jsx(Box, {
+          flex: 1,
+          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
             size: fontSize,
-            children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
-          }), /* @__PURE__ */jsxRuntime.jsx(Box, {
-            flex: 1,
-            marginLeft: icon ? space : void 0,
-            children: /* @__PURE__ */jsxRuntime.jsx(Text, {
-              size: fontSize,
-              textOverflow: "ellipsis",
-              children: text
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(Box, {
-            marginLeft: space,
-            children: /* @__PURE__ */jsxRuntime.jsx(Text, {
-              size: fontSize,
-              children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
-            })
-          })]
-        })
+            textOverflow: "ellipsis",
+            weight: "medium",
+            children: text
+          })
+        }), /* @__PURE__ */jsxRuntime.jsx(Text, {
+          size: fontSize,
+          children: /* @__PURE__ */jsxRuntime.jsx(icons.ChevronRightIcon, {})
+        })]
       })
     })
   });
@@ -8911,7 +8872,7 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     as = "button",
     children,
     disabled,
-    fontSize = 2,
+    fontSize = 1,
     hotkeys,
     icon,
     iconRight,
@@ -8931,6 +8892,9 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useRootTheme();
   const menu = useMenu();
   const {
     activeElement,
@@ -8971,7 +8935,8 @@ const MenuItem = react.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,
@@ -8980,38 +8945,33 @@ const MenuItem = react.forwardRef(function MenuItem2(props, forwardedRef) {
     role: "menuitem",
     tabIndex: -1,
     type: as === "button" ? "button" : void 0,
-    children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsx(Box, {
+    children: [(icon || text || iconRight) && /* @__PURE__ */jsxRuntime.jsxs(Flex, {
       as: "span",
+      gap: space,
+      align: "center",
       ...paddingProps,
-      children: /* @__PURE__ */jsxRuntime.jsxs(Flex, {
-        as: "span",
-        children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
-          size: fontSize,
-          children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
-        }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
-          flex: 1,
-          marginLeft: icon ? space : void 0,
-          marginRight: iconRight ? space : void 0,
-          children: /* @__PURE__ */jsxRuntime.jsx(Text, {
-            size: fontSize,
-            textOverflow: "ellipsis",
-            children: text
-          })
-        }), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Box, {
-          marginLeft: space,
-          style: {
-            marginTop: -4,
-            marginBottom: -4
-          },
-          children: /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
-            fontSize,
-            keys: hotkeys
-          })
-        }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
+      children: [icon && /* @__PURE__ */jsxRuntime.jsxs(Text, {
+        size: fontSize,
+        children: [react.isValidElement(icon) && icon, ReactIs.isValidElementType(icon) && react.createElement(icon)]
+      }), text && /* @__PURE__ */jsxRuntime.jsx(Box, {
+        flex: 1,
+        children: /* @__PURE__ */jsxRuntime.jsx(Text, {
           size: fontSize,
-          children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
-        })]
-      })
+          textOverflow: "ellipsis",
+          weight: "medium",
+          children: text
+        })
+      }), hotkeys && /* @__PURE__ */jsxRuntime.jsx(Hotkeys, {
+        fontSize,
+        keys: hotkeys,
+        style: {
+          marginTop: -4,
+          marginBottom: -4
+        }
+      }), iconRight && /* @__PURE__ */jsxRuntime.jsxs(Text, {
+        size: fontSize,
+        children: [react.isValidElement(iconRight) && iconRight, ReactIs.isValidElementType(iconRight) && react.createElement(iconRight)]
+      })]
     }), children && /* @__PURE__ */jsxRuntime.jsx(Box, {
       as: "span",
       ...paddingProps,
@@ -10022,6 +9982,7 @@ exports.responsiveTextFont = responsiveTextFont;
 exports.rgbToHex = rgbToHex;
 exports.rgbToHsl = rgbToHsl;
 exports.rgba = rgba;
+exports.rgbaToRGBA = rgbaToRGBA;
 exports.screen = screen$1;
 exports.studioTheme = studioTheme;
 exports.useArrayProp = useArrayProp;