@sanity/ui 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/index.esm.js

@@ -2,10 +2,10 @@ 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 { color as color$1, 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';
+import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from '@floating-ui/react-dom';
 import { createPortal } from 'react-dom';
 import { AnimatePresence, motion } from 'framer-motion';
 const EMPTY_ARRAY = [];
@@ -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 {
@@ -831,10 +831,166 @@ function useGlobalKeyDown(onKeyDown) {
     return () => removeEventListener("keydown", onKeyDown);
   }, [onKeyDown]);
 }
+const COLOR_HUES = ["gray", "cyan", "blue", "purple", "magenta", "red", "orange", "yellow", "green"];
+const COLOR_TINTS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+const COLOR_BASE_TONES = ["transparent", "default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const COLOR_STATE_TONES = ["default", "primary",
+// todo: rename to `accent`
+"positive", "caution", "critical"];
+const COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
+const COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
+const COLOR_BLEND_MODES = ["multiply", "screen"];
+const defaultColorTokens = {
+  "*": {
+    _blend: ["multiply", "screen"],
+    bg: ["50", "950"],
+    fg: ["800", "200"],
+    border: ["200", "800"],
+    focusRing: ["cyan/500", "cyan/500"],
+    shadow: {
+      outline: ["500/0.25", "400/0.3"],
+      umbra: ["500/0.1", "black/0.4"],
+      penumbra: ["500/0.07", "black/0.28"],
+      ambient: ["500/0.06", "black/0.24"]
+    },
+    skeleton: {
+      from: ["100", "900"],
+      to: ["100/0.5", "900/0.5"]
+    }
+  },
+  transparent: {
+    bg: ["50", "black"],
+    fg: ["600", "400"]
+  },
+  default: {
+    bg: ["white", "950"],
+    fg: ["black", "200"]
+  },
+  primary: {
+    _hue: "cyan"
+  },
+  positive: {
+    _hue: "cyan"
+  },
+  caution: {
+    _hue: "yellow"
+  },
+  critical: {
+    _hue: "red"
+  },
+  button: {
+    "*": {
+      default: {
+        "*": {
+          _blend: ["screen", "multiply"],
+          bg: ["500", "400"],
+          bg2: ["950", "50"],
+          border: ["500/0", "400/0"],
+          muted: {
+            fg: ["200", "700"]
+          }
+        },
+        hovered: {
+          bg: ["600", "300"],
+          border: ["600/0", "300/0"]
+        },
+        pressed: {
+          bg: ["700", "200"]
+        },
+        selected: {
+          bg: ["700", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          bg: ["200", "900"]
+        }
+      },
+      ghost: {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["white", "black"],
+          bg2: ["50", "950"],
+          fg: ["600", "400"],
+          border: ["200", "800"],
+          muted: {
+            fg: ["600/0.6", "400/0.6"]
+          }
+        },
+        hovered: {
+          bg: ["50", "950"],
+          fg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["200", "900"],
+          border: ["100", "950"]
+        }
+      },
+      bleed: {
+        "*": {
+          _blend: ["multiply", "screen"],
+          bg: ["white", "black"],
+          bg2: ["50", "950"],
+          fg: ["600", "400"],
+          border: ["white/0", "black/0"],
+          muted: {
+            fg: ["600/0.6", "400/0.6"]
+          }
+        },
+        hovered: {
+          bg: ["50", "950"],
+          fg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          fg: ["200", "900"]
+        }
+      }
+    },
+    default: {
+      default: {
+        "*": {
+          bg: ["900", "200"]
+        },
+        hovered: {
+          bg: ["black", "100"]
+        },
+        pressed: {
+          bg: ["900", "200"]
+        },
+        selected: {
+          bg: ["black", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          bg: ["200", "900"]
+        }
+      }
+    }
+  }
+};
 function multiplyChannel(b, s) {
   return b * s;
 }
-function multiply$1(b, s) {
+function multiply$2(b, s) {
   return {
     r: Math.round(clamp$1(multiplyChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp$1(multiplyChannel(b.g / 255, s.g / 255) * 255)),
@@ -847,7 +1003,7 @@ function clamp$1(num) {
 function screenChannel(b, s) {
   return b + s - b * s;
 }
-function screen$1(b, s) {
+function screen$2(b, s) {
   return {
     r: Math.round(clamp(screenChannel(b.r / 255, s.r / 255) * 255)),
     g: Math.round(clamp(screenChannel(b.g / 255, s.g / 255) * 255)),
@@ -874,6 +1030,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,12 +1156,658 @@ 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) {
   const rgb = parseColor(color);
   return "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(a, ")");
 }
+function isColorBlendModeValue(str) {
+  return COLOR_BLEND_MODES.includes(str);
+}
+function isColorHueValue(str) {
+  return COLOR_HUES.includes(str);
+}
+function isColorTintValue(str) {
+  return COLOR_TINTS.includes(str);
+}
+function isColorButtonMode(str) {
+  return COLOR_BUTTON_MODES.includes(str);
+}
+function parseTokenKey(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorConfigBaseTone(segment0)) {
+    const key = segments.join("/");
+    if (isColorConfigBaseKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+    if (isColorConfigBlendKey(key)) {
+      return {
+        type: "base",
+        tone: segment0,
+        key
+      };
+    }
+  }
+  if (segment0 === "button") {
+    const segment1 = segments.shift() || "";
+    if (isColorConfigStateTone(segment1)) {
+      const segment2 = segments.shift() || "";
+      if (isColorButtonMode(segment2)) {
+        const key = segments.join("/");
+        if (isColorConfigStateKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+        if (isColorConfigBlendKey(key)) {
+          return {
+            type: "button",
+            tone: segment1,
+            mode: segment2,
+            key
+          };
+        }
+      }
+    }
+  }
+  return void 0;
+}
+function parseTokenValue(str) {
+  const segments = str.split("/");
+  const segment0 = segments.shift() || "";
+  if (isColorTintValue(segment0)) {
+    const tint = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        tint,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      tint
+    };
+  }
+  if (isColorValue(segment0)) {
+    const key = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorOpacityValue(segment1)) {
+      const opacity = Number(segment1);
+      return {
+        type: "color",
+        key,
+        opacity
+      };
+    }
+    return {
+      type: "color",
+      key
+    };
+  }
+  if (isColorHueValue(segment0)) {
+    const hue = segment0;
+    const segment1 = segments.shift() || "";
+    if (isColorTintValue(segment1)) {
+      const tint = segment1;
+      const segment2 = segments.shift() || "";
+      if (isColorOpacityValue(segment2)) {
+        const opacity = Number(segment2);
+        return {
+          type: "color",
+          key: "".concat(hue, "/").concat(tint),
+          hue,
+          tint,
+          opacity
+        };
+      }
+      return {
+        type: "color",
+        key: "".concat(hue, "/").concat(tint),
+        hue,
+        tint
+      };
+    }
+    return {
+      type: "hue",
+      value: "".concat(hue)
+    };
+  }
+  if (isColorOpacityValue(segment0)) {
+    const opacity = Number(segment0);
+    return {
+      type: "color",
+      opacity
+    };
+  }
+  if (isColorBlendModeValue(segment0)) {
+    const value = segment0;
+    return {
+      type: "blendMode",
+      value
+    };
+  }
+  return void 0;
+}
+const COLOR_CONFIG_BASE_TONES = ["*", ...COLOR_BASE_TONES];
+const COLOR_CONFIG_STATE_TONES = ["*", ...COLOR_STATE_TONES];
+const COLOR_CONFIG_BASE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to"];
+const COLOR_CONFIG_BLEND_KEYS = ["_blend"];
+function isColorConfigBaseTone(str) {
+  return COLOR_CONFIG_BASE_TONES.includes(str);
+}
+function isColorConfigBaseKey(str) {
+  return COLOR_CONFIG_BASE_KEYS.includes(str);
+}
+function isColorConfigStateKey(str) {
+  return COLOR_CONFIG_STATE_KEYS.includes(str);
+}
+function isColorConfigStateTone(str) {
+  return COLOR_CONFIG_STATE_TONES.includes(str);
+}
+function isColorConfigBlendKey(str) {
+  return COLOR_CONFIG_BLEND_KEYS.includes(str);
+}
+function isColorTokenValue(str) {
+  var _a, _b;
+  return ((_a = parseTokenValue(str)) == null ? void 0 : _a.type) === "color" || ((_b = parseTokenValue(str)) == null ? void 0 : _b.type) === "hue";
+}
+function isColorValue(str) {
+  return str === "black" || str === "white";
+}
+function isColorOpacityValue(str) {
+  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function resolveColorTokenValue(context, value) {
+  const {
+    hue,
+    scheme
+  } = context;
+  const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token: ".concat(value[0]));
+  }
+  return compileColorTokenValue({
+    ...node,
+    hue: node.hue || hue
+  });
+}
+function compileColorTokenValue(node) {
+  let key = "";
+  if (node.key === "black" || node.key === "white") {
+    key = node.key;
+  } else {
+    key = "".concat(node.hue, "/").concat(node.tint);
+  }
+  if (node.opacity !== void 0) {
+    key += "/".concat(node.opacity);
+  }
+  return key;
+}
+function multiply$1(bg, fg) {
+  const b = parseColor(bg);
+  const s = parseColor(fg);
+  const hex = rgbToHex(multiply$2(b, s));
+  if (s.a !== void 0) {
+    return rgba(hex, s.a);
+  }
+  return hex;
+}
+function screen$1(bg, fg) {
+  const b = parseColor(bg);
+  const s = parseColor(fg);
+  const hex = rgbToHex(screen$2(b, s));
+  if (s.a !== void 0) {
+    return rgba(hex, s.a);
+  }
+  return hex;
+}
+function resolveColorTokens(sparseTokens) {
+  const denseTokens = {
+    ...sparseTokens
+  };
+  for (const tone of COLOR_BASE_TONES) {
+    denseTokens[tone] = resolveBaseColorTones(sparseTokens, tone);
+  }
+  denseTokens.button = resolveButtonColorTokens(sparseTokens);
+  return denseTokens;
+}
+function resolveBaseColorTones(sparseTokens, tone) {
+  const spec0 = sparseTokens == null ? void 0 : sparseTokens[tone];
+  const spec1 = sparseTokens == null ? void 0 : sparseTokens["*"];
+  return {
+    ...spec1,
+    ...spec0,
+    shadow: {
+      ...(spec1 == null ? void 0 : spec1.shadow),
+      ...(spec0 == null ? void 0 : spec0.shadow)
+    },
+    skeleton: {
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function resolveButtonColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of COLOR_STATE_TONES) {
+    tokens[tone] = resolveButtonToneColorTokens(sparseTokens, tone);
+  }
+  return tokens;
+}
+function resolveButtonToneColorTokens(sparseTokens, tone) {
+  var _a, _b;
+  const tokens = {
+    ...((_a = sparseTokens.button) == null ? void 0 : _a[tone]),
+    ...((_b = sparseTokens.button) == null ? void 0 : _b["*"])
+  };
+  for (const mode of COLOR_BUTTON_MODES) {
+    tokens[mode] = resolveButtonModeColorTokens(sparseTokens, tone, mode);
+  }
+  return tokens;
+}
+function resolveButtonModeColorTokens(sparseTokens, tone, mode) {
+  var _a, _b, _c, _d;
+  const spec0 = (_b = (_a = sparseTokens.button) == null ? void 0 : _a[tone]) == null ? void 0 : _b[mode];
+  const spec1 = (_d = (_c = sparseTokens.button) == null ? void 0 : _c["*"]) == null ? void 0 : _d[mode];
+  const tokens = {
+    ...spec1,
+    ...spec0
+  };
+  for (const state of COLOR_STATES) {
+    tokens[state] = resolveButtonStateColorTokens(sparseTokens, tone, mode, state);
+  }
+  return tokens;
+}
+function resolveButtonStateColorTokens(tokens, tone, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const spec0 = (_c = (_b = (_a = tokens == null ? void 0 : tokens.button) == null ? void 0 : _a[tone]) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state];
+  const spec1 = (_f = (_e = (_d = tokens == null ? void 0 : tokens.button) == null ? void 0 : _d[tone]) == null ? void 0 : _e[mode]) == null ? void 0 : _f["*"];
+  const spec2 = (_i = (_h = (_g = tokens == null ? void 0 : tokens.button) == null ? void 0 : _g["*"]) == null ? void 0 : _h[mode]) == null ? void 0 : _i[state];
+  const spec3 = (_l = (_k = (_j = tokens == null ? void 0 : tokens.button) == null ? void 0 : _j["*"]) == null ? void 0 : _k[mode]) == null ? void 0 : _l["*"];
+  const hue = (spec0 == null ? void 0 : spec0._hue) || (spec1 == null ? void 0 : spec1._hue) || (spec2 == null ? void 0 : spec2._hue) || (spec3 == null ? void 0 : spec3._hue) || ((_n = (_m = tokens == null ? void 0 : tokens.button) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue) || ((_o = tokens == null ? void 0 : tokens[tone]) == null ? void 0 : _o._hue);
+  return {
+    ...spec3,
+    ...spec2,
+    ...spec1,
+    ...spec0,
+    _hue: hue,
+    muted: {
+      ...(spec3 == null ? void 0 : spec3.muted),
+      ...(spec2 == null ? void 0 : spec2.muted),
+      ...(spec1 == null ? void 0 : spec1.muted),
+      ...(spec0 == null ? void 0 : spec0.muted)
+    },
+    accent: {
+      ...(spec3 == null ? void 0 : spec3.accent),
+      ...(spec2 == null ? void 0 : spec2.accent),
+      ...(spec1 == null ? void 0 : spec1.accent),
+      ...(spec0 == null ? void 0 : spec0.accent)
+    },
+    link: {
+      ...(spec3 == null ? void 0 : spec3.link),
+      ...(spec2 == null ? void 0 : spec2.link),
+      ...(spec1 == null ? void 0 : spec1.link),
+      ...(spec0 == null ? void 0 : spec0.link)
+    },
+    code: {
+      ...(spec3 == null ? void 0 : spec3.code),
+      ...(spec2 == null ? void 0 : spec2.code),
+      ...(spec1 == null ? void 0 : spec1.code),
+      ...(spec0 == null ? void 0 : spec0.code)
+    },
+    skeleton: {
+      ...(spec3 == null ? void 0 : spec3.skeleton),
+      ...(spec2 == null ? void 0 : spec2.skeleton),
+      ...(spec1 == null ? void 0 : spec1.skeleton),
+      ...(spec0 == null ? void 0 : spec0.skeleton)
+    }
+  };
+}
+function buildColorTheme(options, config) {
+  var _a, _b;
+  const {
+    scheme
+  } = options;
+  const resolvedConfig = {
+    ...config,
+    color: {
+      ...(config == null ? void 0 : config.color),
+      tokens: resolveColorTokens((_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) != null ? _b : defaultColorTokens)
+    }
+  };
+  return {
+    transparent: buildBaseColorTheme({
+      scheme,
+      tone: "transparent"
+    }, resolvedConfig),
+    default: buildBaseColorTheme({
+      scheme,
+      tone: "default"
+    }, resolvedConfig),
+    primary: buildBaseColorTheme({
+      scheme,
+      tone: "primary"
+    }, resolvedConfig),
+    positive: buildBaseColorTheme({
+      scheme,
+      tone: "positive"
+    }, resolvedConfig),
+    caution: buildBaseColorTheme({
+      scheme,
+      tone: "caution"
+    }, resolvedConfig),
+    critical: buildBaseColorTheme({
+      scheme,
+      tone: "critical"
+    }, resolvedConfig)
+  };
+}
+function buildBaseColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const {
+    scheme,
+    tone
+  } = options;
+  const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) == null ? void 0 : _b[tone];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const context = {
+    hue,
+    scheme
+  };
+  const bg = resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["gray/50", "black"]);
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    dark: scheme === "dark",
+    base: {
+      bg,
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["black", "white"]),
+      border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || ["black", "white"]),
+      focusRing: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.focusRing) || ["black", "white"]),
+      shadow: {
+        outline: resolveColorTokenValue(context, ((_c = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _c.outline) || ["500/0.2", "500/0.2"]),
+        umbra: resolveColorTokenValue(context, ((_d = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _d.umbra) || ["500/0.2", "500/0.2"]),
+        penumbra: resolveColorTokenValue(context, ((_e = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _e.penumbra) || ["500/0.2", "500/0.2"]),
+        ambient: resolveColorTokenValue(context, ((_f = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _f.ambient) || ["500/0.2", "500/0.2"])
+      },
+      skeleton: {
+        from: resolveColorTokenValue(context, ((_g = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _g.from) || ["500/0.2", "500/0.2"]),
+        to: resolveColorTokenValue(context, ((_h = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _h.to) || ["500/0.2", "500/0.2"])
+      }
+    },
+    button: buildButtonColorTheme({
+      scheme
+    }, config)
+  };
+}
+function buildButtonColorTheme(options, config) {
+  const {
+    scheme
+  } = options;
+  const tones = COLOR_STATE_TONES.map(tone => {
+    return {
+      [tone]: buildButtonColorToneTheme({
+        scheme,
+        tone
+      }, config)
+    };
+  });
+  return Object.assign({}, ...tones);
+}
+function buildButtonColorToneTheme(options, config) {
+  const {
+    scheme,
+    tone
+  } = options;
+  const modes = COLOR_BUTTON_MODES.map(mode => {
+    return {
+      [mode]: buildButtonModeColorTheme({
+        mode,
+        scheme,
+        tone
+      }, config)
+    };
+  });
+  return Object.assign({}, ...modes);
+}
+function buildButtonModeColorTheme(options, config) {
+  const {
+    mode,
+    scheme,
+    tone
+  } = options;
+  const states = COLOR_STATES.map(state => {
+    return {
+      [state]: buildButtonStateColorTheme({
+        mode,
+        tone,
+        scheme,
+        state
+      }, config)
+    };
+  });
+  return Object.assign({}, ...states);
+}
+function buildButtonStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e;
+  const {
+    mode,
+    tone,
+    scheme,
+    state
+  } = options;
+  const tokens = (_e = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.tokens) == null ? void 0 : _b.button) == null ? void 0 : _c[tone]) == null ? void 0 : _d[mode]) == null ? void 0 : _e[state];
+  const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
+  const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
+  const context = {
+    hue,
+    scheme
+  };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["500", "400"]),
+    bg2: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg2) || ["500", "400"]),
+    fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["white", "black"]),
+    border: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.border) || ["500", "400"]),
+    muted: {
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
+    },
+    accent: {
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
+    },
+    link: {
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
+    },
+    code: {
+      bg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.bg) || ["500", "400"]),
+      fg: resolveColorTokenValue(context, (tokens == null ? void 0 : tokens.fg) || ["500", "400"])
+    }
+  };
+}
+const defaultColorPalette = {
+  ...color$1,
+  black: "#000000"
+};
+function renderColorTheme(value, config) {
+  var _a, _b;
+  const colorPalette = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.palette) != null ? _b : defaultColorPalette;
+  return {
+    light: renderColorScheme(colorPalette, value.light),
+    dark: renderColorScheme(colorPalette, value.dark)
+  };
+}
+function renderColorScheme(colorPalette, value) {
+  const toneEntries = Object.entries(value);
+  const [, transparentTone] = toneEntries.find(_ref4 => {
+    let [k] = _ref4;
+    return k === "transparent";
+  });
+  const [, defaultTone] = toneEntries.find(_ref5 => {
+    let [k] = _ref5;
+    return k === "default";
+  });
+  const renderedTransparentTone = renderColorBase(colorPalette, transparentTone, transparentTone._blend === "multiply" ? "#ffffff" : "#000000");
+  const renderedDefaultTone = renderColorBase(colorPalette, defaultTone, defaultTone._blend === "multiply" ? "#ffffff" : "#000000");
+  return Object.fromEntries([["transparent", renderedTransparentTone], ["default", renderedDefaultTone], ...toneEntries.filter(_ref6 => {
+    let [k] = _ref6;
+    return k !== "default" && k !== "transparent";
+  }).map(_ref7 => {
+    let [k, v] = _ref7;
+    return [k, renderColorBase(colorPalette, v, renderedDefaultTone.base.bg)];
+  })]);
+}
+function renderColorBase(colorPalette, value, bg) {
+  const nestedBg = renderColorValue(colorPalette, bg, value._blend, value.base.bg);
+  return {
+    _blend: value._blend,
+    dark: value.dark,
+    base: {
+      bg: nestedBg,
+      fg: renderColorValue(colorPalette, nestedBg, value._blend, value.base.fg),
+      border: renderColorValue(colorPalette, nestedBg, value._blend, value.base.border),
+      focusRing: renderColorValue(colorPalette, nestedBg, value._blend, value.base.focusRing),
+      shadow: {
+        outline: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.outline),
+        umbra: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.umbra),
+        penumbra: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.penumbra),
+        ambient: renderColorValue(colorPalette, nestedBg, value._blend, value.base.shadow.ambient)
+      },
+      skeleton: {
+        from: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.from),
+        to: renderColorValue(colorPalette, nestedBg, value._blend, value.base.skeleton.to)
+      }
+    },
+    button: renderButtonColorTheme(colorPalette, nestedBg, value._blend, value.button)
+  };
+}
+function renderButtonColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    default: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.default),
+    primary: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.primary),
+    positive: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.positive),
+    caution: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.caution),
+    critical: renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value.critical)
+  };
+}
+function renderButtonStateColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    default: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.default),
+    ghost: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.ghost),
+    bleed: renderStatesColorTheme(colorPalette, bg, baseBlendMode, value.bleed)
+  };
+}
+function renderStatesColorTheme(colorPalette, bg, baseBlendMode, value) {
+  return {
+    enabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.enabled),
+    hovered: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.hovered),
+    pressed: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.pressed),
+    selected: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.selected),
+    disabled: renderStateColorTheme(colorPalette, bg, baseBlendMode, value.disabled)
+  };
+}
+function renderStateColorTheme(colorPalette, baseBg, rootBlendMode, value) {
+  const blendMode = value._blend;
+  const bg = rootBlendMode === "multiply" && value.bg === "white" ? "#ffffff" : rootBlendMode === "screen" && value.bg === "black" ? "#000000" : renderColorValue(colorPalette, rootBlendMode === "multiply" ? "#ffffff" : "#000000", rootBlendMode, value.bg);
+  const blend = rootBlendMode === "multiply" ? multiply$1 : screen$1;
+  const unmixed = {
+    bg2: renderColorValue(colorPalette, bg, blendMode, value.bg2 || value.bg),
+    fg: renderColorValue(colorPalette, bg, blendMode, value.fg),
+    border: renderColorValue(colorPalette, bg, blendMode, value.border),
+    muted: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.muted.fg)
+    },
+    accent: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.accent.fg)
+    },
+    link: {
+      fg: renderColorValue(colorPalette, bg, blendMode, value.link.fg)
+    },
+    code: {
+      bg: renderColorValue(colorPalette, bg, blendMode, value.code.bg),
+      fg: renderColorValue(colorPalette, bg, blendMode, value.code.fg)
+    }
+  };
+  return {
+    _blend: blendMode,
+    bg: blend(baseBg, bg),
+    bg2: blend(baseBg, unmixed.bg2),
+    fg: blend(baseBg, unmixed.fg),
+    border: blend(baseBg, unmixed.border),
+    muted: {
+      fg: blend(baseBg, unmixed.muted.fg)
+    },
+    accent: {
+      fg: blend(baseBg, unmixed.accent.fg)
+    },
+    link: {
+      fg: blend(baseBg, unmixed.link.fg)
+    },
+    code: {
+      bg: blend(baseBg, unmixed.code.bg),
+      fg: blend(baseBg, unmixed.code.fg)
+    }
+  };
+}
+function renderColorValue(colorPalette, bg, blendMode, str) {
+  const node = parseTokenValue(str);
+  if (!node || node.type !== "color") {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  let hex = "";
+  if (node.key === "black") {
+    hex = renderColorHex(colorPalette.black);
+  }
+  if (node.key === "white") {
+    hex = renderColorHex(colorPalette.white);
+  }
+  if (node.hue && node.tint) {
+    hex = renderColorHex(colorPalette[node.hue][node.tint]);
+  }
+  if (!hex) {
+    throw new Error("Invalid color token value: ".concat(str));
+  }
+  try {
+    hex = blendMode === "multiply" ? multiply$1(bg, hex) : screen$1(bg, hex);
+  } catch (err) {
+    console.log("could not blend", hex);
+  }
+  if (node.opacity !== void 0) {
+    hex = rgba(hex, node.opacity);
+  }
+  return hex;
+}
+function renderColorHex(color) {
+  return typeof color === "string" ? color : color.hex;
+}
+function buildTheme(config) {
+  const color = {
+    light: buildColorTheme({
+      scheme: "light"
+    }, config),
+    dark: buildColorTheme({
+      scheme: "dark"
+    }, config)
+  };
+  return {
+    color: renderColorTheme(color, config)
+  };
+}
 function createButtonTones(opts, base, dark, solid, muted, mode) {
   return {
     default: opts.button({
@@ -1189,11 +2000,11 @@ const tones$1 = {
   }
 };
 const defaultOpts = {
-  base: _ref4 => {
+  base: _ref8 => {
     let {
       dark,
       name
-    } = _ref4;
+    } = _ref8;
     if (name === "default") {
       return {
         bg: dark ? black : white,
@@ -1229,13 +2040,13 @@ const defaultOpts = {
       }
     };
   },
-  solid: _ref5 => {
+  solid: _ref9 => {
     let {
       base,
       dark,
       state,
       tone
-    } = _ref5;
+    } = _ref9;
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -1282,13 +2093,13 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  muted: _ref6 => {
+  muted: _ref10 => {
     let {
       base,
       dark,
       state,
       tone
-    } = _ref6;
+    } = _ref10;
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -1335,13 +2146,13 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  button: _ref7 => {
+  button: _ref11 => {
     let {
       base,
       mode,
       muted,
       solid
-    } = _ref7;
+    } = _ref11;
     if (mode === "bleed") {
       return {
         ...muted,
@@ -1395,10 +2206,10 @@ const defaultOpts = {
     };
     return solid;
   },
-  card: _ref8 => {
+  card: _ref12 => {
     let {
       base
-    } = _ref8;
+    } = _ref12;
     return {
       bg: black,
       bg2: black,
@@ -1430,18 +2241,18 @@ const defaultOpts = {
       placeholder: black
     };
   },
-  selectable: _ref9 => {
+  selectable: _ref13 => {
     let {
       muted,
       state,
       tone
-    } = _ref9;
+    } = _ref13;
     return muted[tone][state];
   },
-  spot: _ref10 => {
+  spot: _ref14 => {
     let {
       key
-    } = _ref10;
+    } = _ref14;
     return spots[key];
   },
   syntax: () => ({
@@ -2156,142 +2967,44 @@ function _createColor(opts, dark, name) {
 function multiply(bg, fg) {
   const b = parseColor(bg);
   const s = parseColor(fg);
-  const hex = rgbToHex(multiply$1(b, s));
+  const hex = rgbToHex(multiply$2(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));
+  const hex = rgbToHex(screen$2(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
 };
 const NEUTRAL_TONES = ["default", "transparent"];
 const color = createColorTheme({
-  base: _ref11 => {
+  base: _ref15 => {
     let {
       dark,
       name
-    } = _ref11;
+    } = _ref15;
     if (name === "default") {
       const tints2 = hues.gray;
       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 +3041,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),
@@ -2343,14 +3056,14 @@ const color = createColorTheme({
       }
     };
   },
-  solid: _ref12 => {
+  solid: _ref16 => {
     let {
       base,
       dark,
       name,
       state,
       tone
-    } = _ref12;
+    } = _ref16;
     const mix = dark ? screen : multiply;
     const mix2 = dark ? multiply : screen;
     const defaultTints = tones[name] || tones.default;
@@ -2358,14 +3071,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 +3100,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 +3129,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 +3166,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 +3189,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)
       },
@@ -2499,14 +3217,14 @@ const color = createColorTheme({
       }
     };
   },
-  muted: _ref13 => {
+  muted: _ref17 => {
     let {
       base,
       dark,
       name,
       state,
       tone
-    } = _ref13;
+    } = _ref17;
     const mix = dark ? screen : multiply;
     const defaultTints = tones[name] || tones.default;
     const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
@@ -2518,21 +3236,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 +3260,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 +3280,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 +3292,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 +3312,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 +3329,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 +3344,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 +3357,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 +3372,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,
@@ -2657,13 +3380,13 @@ const color = createColorTheme({
       }
     };
   },
-  button: _ref14 => {
+  button: _ref18 => {
     let {
       base,
       mode,
       muted,
       solid
-    } = _ref14;
+    } = _ref18;
     if (mode === "bleed") {
       return {
         enabled: {
@@ -2690,16 +3413,17 @@ const color = createColorTheme({
     }
     if (mode === "ghost") {
       return {
-        ...muted,
+        ...solid,
         enabled: {
           ...muted.enabled,
           border: base.border
-        }
+        },
+        disabled: muted.disabled
       };
     }
     return solid;
   },
-  card: _ref15 => {
+  card: _ref19 => {
     let {
       base,
       dark,
@@ -2707,7 +3431,7 @@ const color = createColorTheme({
       name,
       solid,
       state
-    } = _ref15;
+    } = _ref19;
     if (state === "hovered") {
       return muted[name].hovered;
     }
@@ -2735,8 +3459,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)
       },
@@ -2756,67 +3481,72 @@ const color = createColorTheme({
       }
     };
   },
-  input: _ref16 => {
+  input: _ref20 => {
     let {
       base,
       dark,
       mode,
       state
-    } = _ref16;
+    } = _ref20;
     const mix = dark ? screen : multiply;
     if (mode === "invalid") {
       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 => {
+  selectable: _ref21 => {
     let {
       base,
       muted,
       tone,
       solid,
       state
-    } = _ref17;
+    } = _ref21;
     if (state === "enabled") {
       return {
         ...muted[tone].enabled,
@@ -2843,20 +3573,20 @@ const color = createColorTheme({
     }
     return muted[tone][state];
   },
-  spot: _ref18 => {
+  spot: _ref22 => {
     let {
       base,
       dark,
       key
-    } = _ref18;
+    } = _ref22;
     const mix = dark ? screen : multiply;
     return mix(base.bg, hues[key][dark ? 400 : 500].hex);
   },
-  syntax: _ref19 => {
+  syntax: _ref23 => {
     let {
       base,
       dark
-    } = _ref19;
+    } = _ref23;
     const mix = dark ? screen : multiply;
     const mainShade = dark ? 400 : 600;
     const secondaryShade = dark ? 600 : 400;
@@ -3093,16 +3823,16 @@ const studioTheme = {
   avatar: {
     sizes: [{
       distance: -3,
-      size: 25
+      size: 23
     }, {
       distance: -6,
-      size: 35
+      size: 33
     }, {
       distance: -9,
-      size: 55
+      size: 53
     }],
     focusRing: {
-      offset: 1,
+      offset: 0,
       width: 1
     }
   },
@@ -3133,9 +3863,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],
@@ -3952,7 +4682,7 @@ var __defProp$E = Object.defineProperty;
 var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
   value: __freeze$D(raw || cooked.slice())
 }));
-var _a$D, _b$m, _c$d;
+var _a$D, _b$n, _c$d;
 const ROOT_STYLE = css(_a$D || (_a$D = __template$D(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
@@ -3966,7 +4696,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_b$m || (_b$m = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return css(_b$n || (_b$n = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -3990,6 +4720,7 @@ function textInputRepresentationStyle(props) {
     $hasSuffix,
     $scheme,
     $tone,
+    $unstableDisableFocusRing,
     theme
   } = props;
   const {
@@ -4005,13 +4736,13 @@ function textInputRepresentationStyle(props) {
   }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
     color: color.invalid.enabled.border,
     width: input.border.width
-  }), focusRingStyle({
+  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     border: {
       color: color.default.enabled.border,
       width: input.border.width
     },
     focusRing
-  }), focusRingStyle({
+  }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing
   }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
     color: color.default.disabled.border,
@@ -4082,7 +4813,7 @@ var __defProp$D = Object.defineProperty;
 var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
   value: __freeze$C(raw || cooked.slice())
 }));
-var _a$C, _b$l, _c$c;
+var _a$C, _b$m, _c$c;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -4092,7 +4823,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\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    & strong {\n      font-weight: ", ";\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      color: var(--card-icon-color);\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\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    & strong {\n      font-weight: ", ";\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      color: var(--card-icon-color);\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$m || (_b$m = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4274,7 +5005,7 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
@@ -4288,6 +5019,7 @@ const Stroke = styled.ellipse(avatarStyle.stroke);
 const Initials = styled.div(avatarStyle.initials);
 const Avatar = forwardRef(function Avatar2(props, ref) {
   const {
+    __unstable_hideInnerStroke,
     as: asProp,
     color: colorKey = "gray",
     src,
@@ -4370,7 +5102,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         cy: _radius,
         r: _radius,
         fill: "url(#".concat(imageId, ")")
-      }), /* @__PURE__ */jsx(BgStroke, {
+      }), !__unstable_hideInnerStroke && /* @__PURE__ */jsx(BgStroke, {
         cx: _radius,
         cy: _radius,
         rx: _radius,
@@ -4389,9 +5121,8 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         children: /* @__PURE__ */jsx(Text, {
           as: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsx("strong", {
-            children: initials
-          })
+          weight: "medium",
+          children: initials
         })
       })
     })]
@@ -4425,7 +5156,7 @@ function _avatarCounterBaseStyle(props) {
   const {
     theme
   } = props;
-  return css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1.5px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
+  return css(_a$A || (_a$A = __template$A(["\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    user-select: none;\n    color: inherit;\n    color: var(--card-fg-color);\n    background: var(--card-bg-color);\n    box-shadow:\n      0 0 0 1px var(--card-bg-color),\n      inset 0 0 0 1px var(--card-hairline-hard-color);\n    padding: 0 ", ";\n\n    &:not([hidden]) {\n      display: flex;\n    }\n  "])), rem(theme.sanity.space[2]));
 }
 const Root$C = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
@@ -4442,9 +5173,8 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
     children: /* @__PURE__ */jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsx("strong", {
-        children: count
-      })
+      weight: "medium",
+      children: count
     })
   });
 });
@@ -4559,84 +5289,26 @@ const Box = forwardRef(function Box2(props, ref) {
     $height: useArrayProp(height),
     $margin: useArrayProp(margin),
     $marginX: useArrayProp(marginX),
-    $marginY: useArrayProp(marginY),
-    $marginTop: useArrayProp(marginTop),
-    $marginRight: useArrayProp(marginRight),
-    $marginBottom: useArrayProp(marginBottom),
-    $marginLeft: useArrayProp(marginLeft),
-    $overflow: useArrayProp(overflow),
-    $padding: useArrayProp(padding),
-    $paddingX: useArrayProp(paddingX),
-    $paddingY: useArrayProp(paddingY),
-    $paddingTop: useArrayProp(paddingTop),
-    $paddingRight: useArrayProp(paddingRight),
-    $paddingBottom: useArrayProp(paddingBottom),
-    $paddingLeft: useArrayProp(paddingLeft),
-    $row: useArrayProp(row),
-    $rowStart: useArrayProp(rowStart),
-    $rowEnd: useArrayProp(rowEnd),
-    $sizing: useArrayProp(sizing),
-    as: asProp,
-    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,
+    $marginY: useArrayProp(marginY),
+    $marginTop: useArrayProp(marginTop),
+    $marginRight: useArrayProp(marginRight),
+    $marginBottom: useArrayProp(marginBottom),
+    $marginLeft: useArrayProp(marginLeft),
+    $overflow: useArrayProp(overflow),
+    $padding: useArrayProp(padding),
+    $paddingX: useArrayProp(paddingX),
+    $paddingY: useArrayProp(paddingY),
+    $paddingTop: useArrayProp(paddingTop),
+    $paddingRight: useArrayProp(paddingRight),
+    $paddingBottom: useArrayProp(paddingBottom),
+    $paddingLeft: useArrayProp(paddingLeft),
+    $row: useArrayProp(row),
+    $rowStart: useArrayProp(rowStart),
+    $rowEnd: useArrayProp(rowEnd),
+    $sizing: useArrayProp(sizing),
+    as: asProp,
     ref,
-    children
+    children: props.children
   });
 });
 function badgeStyle(props) {
@@ -4657,18 +5329,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,
@@ -4676,13 +5348,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,
@@ -4696,7 +5369,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),
@@ -4709,16 +5382,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$l;
+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$l || (_b$l = __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,
@@ -4756,14 +5429,17 @@ 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;
-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  "])));
+var _a$x, _b$k;
+function buttonBaseStyles(_ref24) {
+  let {
+    $width
+  } = _ref24;
+  return css(_b$k || (_b$k = __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    ", "\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  "])), $width === "fill" && css(_a$x || (_a$x = __template$x(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
   border: {
@@ -4778,7 +5454,7 @@ function combineBoxShadow() {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2, _b;
+  var _a2, _b2;
   const {
     $mode,
     theme
@@ -4821,16 +5497,16 @@ function buttonColorStyles(props) {
       },
       "&[data-selected]": _colorVarsStyle(base, color.pressed)
     }
-  }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
+  }, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b2.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,
@@ -4856,6 +5532,7 @@ const Button = forwardRef(function Button2(props, ref) {
     tone = "default",
     type = "button",
     muted = false,
+    width,
     ...restProps
   } = props;
   const justify = useArrayProp(justifyProp);
@@ -4879,7 +5556,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,
@@ -4890,6 +5567,7 @@ const Button = forwardRef(function Button2(props, ref) {
     disabled: Boolean(loading || disabled),
     ref,
     type,
+    $width: width,
     children: [Boolean(loading) && /* @__PURE__ */jsx(LoadingBox, {
       children: /* @__PURE__ */jsx(Spinner, {})
     }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, {
@@ -4924,12 +5602,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)];
 }
@@ -4939,7 +5617,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: -moz-available;\n      width: -webkit-fill-available;\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;
@@ -4960,7 +5638,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
@@ -4970,7 +5648,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,
@@ -4995,7 +5673,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",
@@ -5020,14 +5698,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 {
@@ -5041,7 +5719,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({
@@ -5074,7 +5752,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 {
@@ -5094,7 +5772,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,
@@ -5112,16 +5790,16 @@ 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;
-function codeSyntaxHighlightingStyle(_ref20) {
+var _a$t;
+function codeSyntaxHighlightingStyle(_ref25) {
   let {
     theme
-  } = _ref20;
+  } = _ref25;
   const color = theme.sanity.color.syntax;
   return {
     "&.atrule": {
@@ -5235,9 +5913,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,
@@ -5248,7 +5926,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),
@@ -5282,14 +5960,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),
@@ -5297,7 +5975,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,
@@ -5312,7 +5990,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,
@@ -5329,28 +6007,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,
@@ -5364,11 +6042,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,
@@ -5408,7 +6086,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,
@@ -5419,7 +6097,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),
@@ -5428,16 +6106,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,
@@ -5446,7 +6124,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),
@@ -5464,6 +6142,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];
@@ -6371,13 +7107,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref21) {
+        apply(_ref26) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref21;
+          } = _ref26;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -6579,7 +7315,7 @@ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
 }));
 var _a$j, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
@@ -6842,7 +7578,7 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
     ...restProps
   } = props;
@@ -6907,6 +7643,7 @@ const TextInputClearButton = styled(Button)({
 });
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
+    __unstable_disableFocusRing,
     border = true,
     clearButton,
     disabled = false,
@@ -6916,7 +7653,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
     onClear,
     padding: paddingProp = 3,
     prefix,
-    radius: radiusProp = 1,
+    radius: radiusProp = 2,
     readOnly,
     space: spaceProp = 3,
     suffix,
@@ -6961,6 +7698,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   }), [prefix, radius]);
   const presentationNode = useMemo(() => /* @__PURE__ */jsxs(Presentation, {
     $hasPrefix,
+    $unstableDisableFocusRing: __unstable_disableFocusRing,
     $hasSuffix,
     $radius: radius,
     $scheme: rootTheme.scheme,
@@ -6981,7 +7719,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
         children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
       })
     })]
-  }), [border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
+  }), [__unstable_disableFocusRing, border, fontSize, icon, iconRight, padding, radius, rootTheme, $hasClearButton, $hasPrefix, $hasSuffix]);
   const clearButtonBoxPadding = useMemo(() => padding.map(v => {
     if (v === 0) return 0;
     if (v === 1) return 1;
@@ -7065,6 +7803,7 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+const DEFAULT_TOOLTIP_PADDING = 4;
 const DEFAULT_FALLBACK_PLACEMENTS = {
   top: ["bottom", "left", "right"],
   "top-start": ["bottom-start", "left-start", "right-start"],
@@ -7148,9 +7887,14 @@ var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
   value: __freeze$e(raw || cooked.slice())
 }));
 var _a$e;
-const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
+const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref27 => {
+  let {
+    $maxWidth
+  } = _ref27;
+  return $maxWidth;
+});
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e, _f;
   const boundaryElementContext = useBoundaryElement();
   const theme = useTheme();
   const {
@@ -7161,7 +7905,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     fallbackPlacements: fallbackPlacementsProp = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS[(_a2 = props.placement) != null ? _a2 : "bottom"],
     padding = 3,
     placement: placementProp = "bottom",
-    portal,
+    portal: portalProp,
     scheme,
     shadow = 2,
     zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
@@ -7173,38 +7917,27 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const [referenceElement, setReferenceElement] = useState(null);
   const arrowRef = useRef(null);
   const rootBoundary = "viewport";
+  const portal = usePortal();
+  const portalElement = typeof portalProp === "string" ? ((_d = portal.elements) == null ? void 0 : _d[portalProp]) || null : portal.element;
+  const tooltipWidth = useMemo(() => {
+    const availableWidths = [...(boundaryElement ? [boundaryElement.offsetWidth] : []), (portalElement == null ? void 0 : portalElement.offsetWidth) || document.body.offsetWidth];
+    return Math.min(...availableWidths) - DEFAULT_TOOLTIP_PADDING * 2;
+  }, [boundaryElement, portalElement == null ? void 0 : portalElement.offsetWidth]);
   const middleware = useMemo(() => {
     const ret = [];
     ret.push(flip({
       boundary: boundaryElement || void 0,
       fallbackPlacements,
-      padding: 4,
-      rootBoundary,
-      mainAxis: false
+      padding: DEFAULT_TOOLTIP_PADDING,
+      rootBoundary
     }));
     ret.push(offset({
       mainAxis: 3
     }));
-    ret.push(size$2({
-      apply(_ref22) {
-        let {
-          availableWidth,
-          availableHeight,
-          elements
-        } = _ref22;
-        Object.assign(elements.floating.style, {
-          maxWidth: "".concat(availableWidth - 4 * 2, "px"),
-          // the padding is `4px`
-          maxHeight: "".concat(availableHeight - 4 * 2, "px")
-          // the padding is `4px`
-        });
-      }
-    }));
-
     ret.push(shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
-      padding: 4
+      padding: DEFAULT_TOOLTIP_PADDING
     }));
     ret.push(arrow({
       element: arrowRef,
@@ -7224,8 +7957,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     whileElementsMounted: autoUpdate
   });
   const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
-  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
+  const arrowX = (_e = middlewareData.arrow) == null ? void 0 : _e.x;
+  const arrowY = (_f = middlewareData.arrow) == null ? void 0 : _f.y;
   const arrowStyle = useMemo(() => {
     const style = {
       left: arrowX !== null ? arrowX : void 0,
@@ -7245,25 +7978,53 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   const closeDelayProp = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const openDelay = isInsideGroup ? delayGroupContext.openDelay : openDelayProp;
   const closeDelay = isInsideGroup ? delayGroupContext.closeDelay : closeDelayProp;
-  const handleIsOpenChange = useCallback(open => {
+  const handleIsOpenChange = useCallback((open, immediate) => {
     if (isInsideGroup) {
       if (open) {
-        delayGroupContext.setIsGroupActive(open, openDelay);
-        delayGroupContext.setOpenTooltipId(tooltipId, openDelay);
+        const groupedOpenDelay = immediate ? 0 : openDelay;
+        delayGroupContext.setIsGroupActive(open, groupedOpenDelay);
+        delayGroupContext.setOpenTooltipId(tooltipId, groupedOpenDelay);
       } else {
         const minimumGroupDeactivateDelay = 200;
         const groupDeactivateDelay = closeDelay > minimumGroupDeactivateDelay ? closeDelay : minimumGroupDeactivateDelay;
         delayGroupContext.setIsGroupActive(open, groupDeactivateDelay);
-        delayGroupContext.setOpenTooltipId(null, closeDelay);
+        delayGroupContext.setOpenTooltipId(null, immediate ? 0 : closeDelay);
       }
     } else {
-      setIsOpen(open, open ? openDelay : closeDelay);
+      const standaloneDelay = immediate ? 0 : open ? openDelay : closeDelay;
+      setIsOpen(open, standaloneDelay);
     }
   }, [isInsideGroup, delayGroupContext, openDelay, tooltipId, closeDelay, setIsOpen]);
-  const handleBlur = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
-  const handleFocus = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseEnter = useCallback(() => handleIsOpenChange(true), [handleIsOpenChange]);
-  const handleMouseLeave = useCallback(() => handleIsOpenChange(false), [handleIsOpenChange]);
+  const handleBlur = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onBlur) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleClick = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false, true);
+    (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onClick) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleContextMenu = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false, true);
+    (_b2 = childProp == null ? void 0 : (_a3 = childProp.props).onContextMenu) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleFocus = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(true);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onFocus) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleMouseEnter = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(true);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseEnter) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
+  const handleMouseLeave = useCallback(e => {
+    var _a3, _b2;
+    handleIsOpenChange(false);
+    (_b2 = (_a3 = childProp == null ? void 0 : childProp.props) == null ? void 0 : _a3.onMouseLeave) == null ? void 0 : _b2.call(_a3, e);
+  }, [childProp == null ? void 0 : childProp.props, handleIsOpenChange]);
   useEffect(() => {
     if (!isOpen) return;
     function handleWindowMouseMove(event) {
@@ -7286,6 +8047,18 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     if (!content) handleIsOpenChange(false);
   }, [content, handleIsOpenChange]);
   useEffect(() => refs.setReference(referenceElement), [referenceElement, refs]);
+  useEffect(() => {
+    if (!showTooltip) return;
+    function handleWindowKeyDown(event) {
+      if (event.key === "Escape") {
+        handleIsOpenChange(false, true);
+      }
+    }
+    window.addEventListener("keydown", handleWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleWindowKeyDown);
+    };
+  }, [handleIsOpenChange, showTooltip]);
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
     update();
@@ -7310,9 +8083,11 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       onFocus: handleFocus,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
+      onClick: handleClick,
+      onContextMenu: handleContextMenu,
       ref: setReference
     });
-  }, [childProp, handleBlur, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
+  }, [childProp, handleBlur, handleClick, handleContextMenu, handleFocus, handleMouseEnter, handleMouseLeave, setReference]);
   if (!child) return /* @__PURE__ */jsx(Fragment, {});
   if (disabled) return child;
   const root = /* @__PURE__ */jsx(Root$a, {
@@ -7321,6 +8096,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     ref: setFloating,
     style: floatingStyles,
     zOffset,
+    $maxWidth: tooltipWidth,
     children: /* @__PURE__ */jsxs(Card, {
       "data-ui": "Tooltip__card",
       "data-placement": placement,
@@ -7336,8 +8112,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   });
   return /* @__PURE__ */jsxs(Fragment, {
     children: [child, showTooltip && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+      children: portalProp ? /* @__PURE__ */jsx(Portal, {
+        __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
         children: root
       }) : root
     })]
@@ -7497,10 +8273,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref28 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref28;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7953,10 +8729,11 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref24) {
+const BORDER_OFFSET_X = 12;
+function dialogStyle(_ref29) {
   let {
     theme
-  } = _ref24;
+  } = _ref29;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8007,9 +8784,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 {
@@ -8044,6 +8821,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) {
@@ -8078,6 +8858,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,
@@ -8089,24 +8885,28 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
       children: /* @__PURE__ */jsxs(DialogLayout, {
         direction: "column",
         children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledFromTop: hasScrolledFromTop,
           children: /* @__PURE__ */jsxs(Flex, {
+            align: "center",
             children: [/* @__PURE__ */jsx(Box, {
               flex: 1,
+              margin: 1,
               padding: 4,
               children: header && /* @__PURE__ */jsx(Text, {
                 id: labelId,
-                weight: "semibold",
+                size: 1,
+                weight: "medium",
                 children: header
               })
             }), showCloseButton && /* @__PURE__ */jsx(Box, {
-              padding: 2,
+              padding: 3,
               children: /* @__PURE__ */jsx(Button, {
                 "aria-label": "Close dialog",
                 disabled: !onClose,
                 icon: CloseIcon,
                 mode: "bleed",
-                onClick: onClose,
-                padding: 3
+                onClick: onClose
               })
             })]
           })
@@ -8114,8 +8914,11 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
           flex: 1,
           ref: setContentRef,
           tabIndex: -1,
+          onScroll: handleContentUpdate,
           children
         }), footer && /* @__PURE__ */jsx(DialogFooter, {
+          $isContentScrollable: isContentScrollable,
+          $hasScrolledToBottom: hasScrolledToBottom,
           children: footer
         })]
       })
@@ -8734,7 +9537,7 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
 }));
 var _a$7, _b$4;
 function selectableBaseStyle() {
-  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a2, _b2;
@@ -8748,7 +9551,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() {
@@ -8765,7 +9568,7 @@ function MenuGroup(props) {
   const {
     as = "button",
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -8777,6 +9580,9 @@ function MenuGroup(props) {
     ...restProps
   } = props;
   const menu = useMenu();
+  const {
+    scheme
+  } = useRootTheme();
   const {
     activeElement,
     mount,
@@ -8865,34 +9671,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, {})
+        })]
       })
     })
   });
@@ -8902,7 +9705,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     as = "button",
     children,
     disabled,
-    fontSize = 2,
+    fontSize = 1,
     hotkeys,
     icon,
     iconRight,
@@ -8922,6 +9725,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useRootTheme();
   const menu = useMenu();
   const {
     activeElement,
@@ -8962,7 +9768,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,
@@ -8971,38 +9778,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,
@@ -9018,15 +9820,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref30 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref30;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref31 => {
   let {
     $animated
-  } = _ref26;
+  } = _ref31;
   return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -9057,12 +9859,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref32 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref32;
   const {
     media
   } = theme.sanity;
@@ -9410,12 +10212,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref33 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref33;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9915,5 +10717,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, COLOR_BASE_TONES, COLOR_BLEND_MODES, COLOR_BUTTON_MODES, COLOR_CONFIG_BASE_KEYS, COLOR_CONFIG_BASE_TONES, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, COLOR_HUES, COLOR_STATES, COLOR_STATE_TONES, COLOR_TINTS, 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, buildTheme, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueValue, isColorOpacityValue, isColorTintValue, isColorTokenValue, isColorValue, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply$2 as multiply, parseColor, parseTokenKey, parseTokenValue, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen$2 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