@sanity/ui 2.0.0-alpha.3 → 2.0.0-alpha.31

package/dist/index.esm.js

@@ -1,21 +1,15 @@
+export { COLOR_CONFIG_BASE_KEYS, COLOR_CONFIG_BASE_TONES, COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_BASE_TONES, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATES, THEME_COLOR_STATE_TONES, buildTheme, createColorTheme, hexToRgb, hslToRgb, isColorBlendModeValue, isColorButtonMode, isColorConfigBaseKey, isColorConfigBaseTone, isColorConfigBlendKey, isColorConfigStateKey, isColorConfigStateTone, isColorHueKey, isColorOpacityValue, isColorTintKey, isColorTokenValue, isColorValue, multiply, parseColor, parseTokenKey, parseTokenValue, rgbToHex, rgbToHsl, rgba, rgbaToRGBA, screen, studioTheme } from '@sanity/ui/theme';
 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 { SpinnerIcon, CheckmarkIcon, RemoveIcon, SelectIcon, CloseIcon, ChevronDownIcon, ChevronRightIcon, ToggleArrowRightIcon } from '@sanity/icons';
+import { SpinnerIcon, CheckmarkIcon, RemoveIcon, ChevronDownIcon, CloseIcon, 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 = [];
 const EMPTY_RECORD = {};
-const FLOATING_STATIC_SIDES = {
-  top: "bottom",
-  right: "left",
-  bottom: "top",
-  left: "right"
-};
 function _fillCSSObject(keys, value) {
   return keys.reduce((style, key) => {
     style[key] = value;
@@ -811,2402 +805,26 @@ function _createElementSizeObserver() {
         }
       };
     }
-  };
-}
-function useElementSize(element) {
-  const [size, setSize] = useState(null);
-  useEffect(() => {
-    if (!element) return void 0;
-    return _elementSizeObserver.subscribe(element, setSize);
-  }, [element]);
-  return size;
-}
-function useElementRect(element) {
-  const elementSize = useElementSize(element);
-  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
-}
-function useGlobalKeyDown(onKeyDown) {
-  return useEffect(() => {
-    addEventListener("keydown", onKeyDown);
-    return () => removeEventListener("keydown", onKeyDown);
-  }, [onKeyDown]);
-}
-function multiplyChannel(b, s) {
-  return b * s;
-}
-function multiply$1(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)),
-    b: Math.round(clamp$1(multiplyChannel(b.b / 255, s.b / 255) * 255))
-  };
-}
-function clamp$1(num) {
-  return Math.max(Math.min(num, 255), 0);
-}
-function screenChannel(b, s) {
-  return b + s - b * s;
-}
-function screen$1(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)),
-    b: Math.round(clamp(screenChannel(b.b / 255, s.b / 255) * 255))
-  };
-}
-function clamp(num) {
-  return Math.max(Math.min(num, 255), 0);
-}
-function hexToRgb(hex) {
-  if (hex.length === 4) {
-    const hexR = hex.slice(1, 2);
-    const hexG = hex.slice(2, 3);
-    const hexB = hex.slice(3, 4);
-    return {
-      r: parseInt(hexR + hexR, 16),
-      g: parseInt(hexG + hexG, 16),
-      b: parseInt(hexB + hexB, 16)
-    };
-  }
-  return {
-    r: parseInt(hex.slice(1, 3), 16),
-    g: parseInt(hex.slice(3, 5), 16),
-    b: parseInt(hex.slice(5, 7), 16)
-  };
-}
-function rgbToHex(_ref2) {
-  let {
-    r,
-    g,
-    b
-  } = _ref2;
-  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
-function rgbToHsl(_ref3) {
-  let {
-    r,
-    g,
-    b
-  } = _ref3;
-  r /= 255;
-  g /= 255;
-  b /= 255;
-  const cmin = Math.min(r, g, b);
-  const cmax = Math.max(r, g, b);
-  const delta = cmax - cmin;
-  let h = 0;
-  let s = 0;
-  let l = 0;
-  if (delta == 0) h = 0;else if (cmax == r) h = (g - b) / delta % 6;else if (cmax == g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4;
-  h = Math.round(h * 60);
-  if (h < 0) h += 360;
-  l = (cmax + cmin) / 2;
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-  s = +(s * 100).toFixed(1);
-  l = +(l * 100).toFixed(1);
-  return {
-    h,
-    s,
-    l
-  };
-}
-function hslToRgb(hsl) {
-  const s = hsl.s / 100;
-  const l = hsl.l / 100;
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (0 <= hsl.h && hsl.h < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (60 <= hsl.h && hsl.h < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (120 <= hsl.h && hsl.h < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (180 <= hsl.h && hsl.h < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (240 <= hsl.h && hsl.h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else if (300 <= hsl.h && hsl.h < 360) {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  return {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255)
-  };
-}
-const HEX_CHARS = "0123456789ABCDEFabcdef";
-const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
-function isHexChars(str) {
-  for (const c of str) {
-    if (HEX_CHARS.indexOf(c) === -1) {
-      return false;
-    }
-  }
-  return true;
-}
-function isHex(str) {
-  if (str[0] !== "#") return false;
-  if (!(str.length === 4 || str.length === 7)) return false;
-  return isHexChars(str.slice(1));
-}
-function parseHsl(str) {
-  const res = HSL_RE.exec(str);
-  if (!res) {
-    throw new Error('parseHsl: string is not a HSL color: "'.concat(str, '"'));
-  }
-  return {
-    h: parseInt(res[1]),
-    s: parseFloat(res[3]),
-    l: parseFloat(res[5])
-  };
-}
-function parseColor(color) {
-  if (!color) return {
-    r: 0,
-    g: 0,
-    b: 0
-  };
-  if (typeof color !== "string") {
-    throw new Error("parseColor: expected a string");
-  }
-  if (isHex(color)) {
-    return hexToRgb(color);
-  }
-  if (color.startsWith("hsl(")) {
-    return hslToRgb(parseHsl(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 createButtonTones(opts, base, dark, solid, muted, mode) {
-  return {
-    default: opts.button({
-      base,
-      dark,
-      solid: solid.default,
-      muted: muted.default,
-      mode
-    }),
-    primary: opts.button({
-      base,
-      dark,
-      solid: solid.primary,
-      muted: muted.primary,
-      mode
-    }),
-    positive: opts.button({
-      base,
-      dark,
-      solid: solid.positive,
-      muted: muted.positive,
-      mode
-    }),
-    caution: opts.button({
-      base,
-      dark,
-      solid: solid.caution,
-      muted: muted.caution,
-      mode
-    }),
-    critical: opts.button({
-      base,
-      dark,
-      solid: solid.critical,
-      muted: muted.critical,
-      mode
-    })
-  };
-}
-function createButtonModes(opts, base, dark, solid, muted) {
-  return {
-    default: createButtonTones(opts, base, dark, solid, muted, "default"),
-    ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
-    bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
-  };
-}
-function createCardStates(opts, base, dark, name, solid, muted) {
-  return {
-    enabled: opts.card({
-      base,
-      dark,
-      name,
-      state: "enabled",
-      solid,
-      muted
-    }),
-    disabled: opts.card({
-      base,
-      dark,
-      name,
-      state: "disabled",
-      solid,
-      muted
-    }),
-    hovered: opts.card({
-      base,
-      dark,
-      name,
-      state: "hovered",
-      solid,
-      muted
-    }),
-    pressed: opts.card({
-      base,
-      dark,
-      name,
-      state: "pressed",
-      solid,
-      muted
-    }),
-    selected: opts.card({
-      base,
-      dark,
-      name,
-      state: "selected",
-      solid,
-      muted
-    })
-  };
-}
-const black = "hsl(0, 0%, 0%)";
-const white = "hsl(0, 0%, 100%)";
-const colors = {
-  default: {
-    lightest: "hsl(0, 0%, 95%)",
-    lighter: "hsl(0, 0%, 70%)",
-    light: "hsl(0, 0%, 65%)",
-    base: "hsl(0, 0%, 50%)",
-    dark: "hsl(0, 0%, 35%)",
-    darker: "hsl(0, 0%, 20%)",
-    darkest: "hsl(0, 0%, 5%)"
-  },
-  transparent: {
-    lightest: "hsl(240, 100%, 95%)",
-    lighter: "hsl(240, 100%, 70%)",
-    light: "hsl(240, 100%, 65%)",
-    base: "hsl(240, 100%, 50%)",
-    dark: "hsl(240, 100%, 35%)",
-    darker: "hsl(240, 100%, 20%)",
-    darkest: "hsl(240, 100%, 5%)"
-  },
-  primary: {
-    lightest: "hsl(240, 100%, 95%)",
-    lighter: "hsl(240, 100%, 70%)",
-    light: "hsl(240, 100%, 65%)",
-    base: "hsl(240, 100%, 50%)",
-    dark: "hsl(240, 100%, 35%)",
-    darker: "hsl(240, 100%, 20%)",
-    darkest: "hsl(240, 100%, 5%)"
-  },
-  positive: {
-    lightest: "hsl(120, 100%, 95%)",
-    lighter: "hsl(120, 100%, 70%)",
-    light: "hsl(120, 100%, 65%)",
-    base: "hsl(120, 100%, 50%)",
-    dark: "hsl(120, 100%, 35%)",
-    darker: "hsl(120, 100%, 20%)",
-    darkest: "hsl(120, 100%, 5%)"
-  },
-  caution: {
-    lightest: "hsl(60, 100%, 95%)",
-    lighter: "hsl(60, 100%, 70%)",
-    light: "hsl(60, 100%, 65%)",
-    base: "hsl(60, 100%, 50%)",
-    dark: "hsl(60, 100%, 35%)",
-    darker: "hsl(60, 100%, 20%)",
-    darkest: "hsl(60, 100%, 5%)"
-  },
-  critical: {
-    lightest: "hsl(0, 100%, 95%)",
-    lighter: "hsl(0, 100%, 70%)",
-    light: "hsl(0, 100%, 65%)",
-    base: "hsl(0, 100%, 50%)",
-    dark: "hsl(0, 100%, 35%)",
-    darker: "hsl(0, 100%, 20%)",
-    darkest: "hsl(0, 100%, 5%)"
-  }
-};
-const spots = {
-  gray: "hsl(0, 0%, 50%)",
-  red: "hsl(0, 100%, 50%)",
-  orange: "hsl(30, 100%, 50%)",
-  yellow: "hsl(60, 100%, 50%)",
-  green: "hsl(120, 100%, 50%)",
-  cyan: "hsl(180, 100%, 50%)",
-  blue: "hsl(240, 100%, 50%)",
-  purple: "hsl(270, 100%, 50%)",
-  magenta: "hsl(300, 100%, 50%)"
-};
-const tones$1 = {
-  transparent: {
-    bg: [colors.transparent.darkest, colors.transparent.lightest],
-    fg: [colors.transparent.lightest, colors.transparent.darkest],
-    border: [colors.transparent.darker, colors.transparent.lighter],
-    focusRing: [colors.transparent.base, colors.transparent.base]
-  },
-  primary: {
-    bg: [colors.primary.darkest, colors.primary.lightest],
-    fg: [colors.primary.lightest, colors.primary.darkest],
-    border: [colors.primary.darker, colors.primary.lighter],
-    focusRing: [colors.primary.base, colors.primary.base]
-  },
-  positive: {
-    bg: [colors.positive.darkest, colors.positive.lightest],
-    fg: [colors.positive.lightest, colors.positive.darkest],
-    border: [colors.positive.darker, colors.positive.lighter],
-    focusRing: [colors.positive.base, colors.positive.base]
-  },
-  caution: {
-    bg: [colors.caution.darkest, colors.caution.lightest],
-    fg: [colors.caution.lightest, colors.caution.darkest],
-    border: [colors.caution.darker, colors.caution.lighter],
-    focusRing: [colors.caution.base, colors.caution.base]
-  },
-  critical: {
-    bg: [colors.critical.darkest, colors.critical.lightest],
-    fg: [colors.critical.lightest, colors.critical.darkest],
-    border: [colors.critical.darker, colors.critical.lighter],
-    focusRing: [colors.critical.base, colors.critical.base]
-  }
-};
-const defaultOpts = {
-  base: _ref4 => {
-    let {
-      dark,
-      name
-    } = _ref4;
-    if (name === "default") {
-      return {
-        bg: dark ? black : white,
-        fg: dark ? white : black,
-        border: dark ? colors.default.darkest : colors.default.lightest,
-        focusRing: colors.primary.base,
-        shadow: {
-          outline: black,
-          umbra: black,
-          penumbra: black,
-          ambient: black
-        },
-        skeleton: {
-          from: dark ? white : black,
-          to: dark ? white : black
-        }
-      };
-    }
-    return {
-      bg: tones$1[name].bg[dark ? 0 : 1],
-      fg: tones$1[name].fg[dark ? 0 : 1],
-      border: tones$1[name].border[dark ? 0 : 1],
-      focusRing: tones$1[name].focusRing[dark ? 0 : 1],
-      shadow: {
-        outline: black,
-        umbra: black,
-        penumbra: black,
-        ambient: black
-      },
-      skeleton: {
-        from: dark ? white : black,
-        to: dark ? white : black
-      }
-    };
-  },
-  solid: _ref5 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref5;
-    const color = colors[tone];
-    if (state === "hovered") {
-      return {
-        bg: dark ? color.light : color.dark,
-        bg2: dark ? color.light : color.dark,
-        border: dark ? color.lighter : color.darker,
-        fg: dark ? color.darkest : color.lightest,
-        iconColor: dark ? color.darkest : color.lightest,
-        muted: {
-          fg: black
-        },
-        accent: {
-          fg: black
-        },
-        link: {
-          fg: black
-        },
-        code: {
-          bg: black,
-          fg: black
-        },
-        skeleton: base.skeleton
-      };
-    }
-    return {
-      bg: color.base,
-      bg2: color.base,
-      border: dark ? color.light : color.dark,
-      fg: dark ? color.darkest : color.lightest,
-      iconColor: dark ? color.darkest : color.lightest,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  muted: _ref6 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref6;
-    const color = colors[tone];
-    if (state === "hovered") {
-      return {
-        bg: dark ? color.darker : color.lighter,
-        bg2: dark ? color.darker : color.lighter,
-        border: dark ? color.lighter : color.darker,
-        fg: dark ? color.lightest : color.darkest,
-        iconColor: dark ? color.lightest : color.darkest,
-        muted: {
-          fg: black
-        },
-        accent: {
-          fg: black
-        },
-        link: {
-          fg: black
-        },
-        code: {
-          bg: black,
-          fg: black
-        },
-        skeleton: base.skeleton
-      };
-    }
-    return {
-      bg: dark ? color.darkest : color.lightest,
-      bg2: dark ? color.darkest : color.lightest,
-      border: dark ? color.darker : color.lighter,
-      fg: dark ? color.lighter : color.darker,
-      iconColor: dark ? color.lighter : color.darker,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  button: _ref7 => {
-    let {
-      base,
-      mode,
-      muted,
-      solid
-    } = _ref7;
-    if (mode === "bleed") {
-      return {
-        ...muted,
-        enabled: {
-          bg: "transparent",
-          bg2: "transparent",
-          fg: muted.enabled.fg,
-          iconColor: muted.enabled.fg,
-          border: "transparent",
-          muted: {
-            fg: black
-          },
-          accent: {
-            fg: black
-          },
-          link: {
-            fg: black
-          },
-          code: {
-            bg: black,
-            fg: black
-          },
-          skeleton: base.skeleton
-        },
-        hovered: {
-          bg: muted.enabled.bg,
-          bg2: muted.enabled.bg,
-          fg: muted.hovered.fg,
-          iconColor: muted.hovered.fg,
-          border: "transparent",
-          muted: {
-            fg: black
-          },
-          accent: {
-            fg: black
-          },
-          link: {
-            fg: black
-          },
-          code: {
-            bg: black,
-            fg: black
-          },
-          skeleton: base.skeleton
-        }
-      };
-    }
-    if (mode === "ghost") return {
-      ...solid,
-      enabled: muted.enabled
-    };
-    return solid;
-  },
-  card: _ref8 => {
-    let {
-      base
-    } = _ref8;
-    return {
-      bg: black,
-      bg2: black,
-      fg: black,
-      iconColor: black,
-      border: black,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  input: () => {
-    return {
-      bg: black,
-      bg2: black,
-      fg: black,
-      border: black,
-      placeholder: black
-    };
-  },
-  selectable: _ref9 => {
-    let {
-      muted,
-      state,
-      tone
-    } = _ref9;
-    return muted[tone][state];
-  },
-  spot: _ref10 => {
-    let {
-      key
-    } = _ref10;
-    return spots[key];
-  },
-  syntax: () => ({
-    atrule: black,
-    attrName: black,
-    attrValue: black,
-    attribute: black,
-    boolean: black,
-    builtin: black,
-    cdata: black,
-    char: black,
-    class: black,
-    className: black,
-    comment: black,
-    constant: black,
-    deleted: black,
-    doctype: black,
-    entity: black,
-    function: black,
-    hexcode: black,
-    id: black,
-    important: black,
-    inserted: black,
-    keyword: black,
-    number: black,
-    operator: black,
-    prolog: black,
-    property: black,
-    pseudoClass: black,
-    pseudoElement: black,
-    punctuation: black,
-    regex: black,
-    selector: black,
-    string: black,
-    symbol: black,
-    tag: black,
-    unit: black,
-    url: black,
-    variable: black
-  })
-};
-function createInputModes(opts, base, dark, solid, muted) {
-  return {
-    default: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "enabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "disabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "hovered",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "readOnly",
-        solid: solid.default,
-        muted: muted.default
-      })
-    },
-    invalid: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "enabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "disabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "hovered",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "readOnly",
-        solid: solid.default,
-        muted: muted.default
-      })
-    }
-  };
-}
-function createMutedTones(opts, base, dark, name) {
-  return {
-    default: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "selected"
-      })
-    },
-    transparent: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "selected"
-      })
-    },
-    primary: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "selected"
-      })
-    },
-    positive: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "selected"
-      })
-    },
-    caution: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "selected"
-      })
-    },
-    critical: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "selected"
-      })
-    }
-  };
-}
-function createSelectableTones(opts, base, dark, solid, muted) {
-  return {
-    default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
-    primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
-    positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
-    caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
-    critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
-  };
-}
-function _createSelectableStates(opts, base, dark, solid, muted, tone) {
-  return {
-    enabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "enabled",
-      tone
-    }),
-    hovered: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "hovered",
-      tone
-    }),
-    pressed: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "pressed",
-      tone
-    }),
-    selected: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "selected",
-      tone
-    }),
-    disabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "disabled",
-      tone
-    })
-  };
-}
-function createSolidTones(opts, base, dark, name) {
-  return {
-    default: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "selected"
-      })
-    },
-    transparent: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "selected"
-      })
-    },
-    primary: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "selected"
-      })
-    },
-    positive: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "selected"
-      })
-    },
-    caution: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "selected"
-      })
-    },
-    critical: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "selected"
-      })
-    }
-  };
-}
-function createSpot(opts, base, dark) {
-  return {
-    gray: opts.spot({
-      base,
-      dark,
-      key: "gray"
-    }),
-    blue: opts.spot({
-      base,
-      dark,
-      key: "blue"
-    }),
-    purple: opts.spot({
-      base,
-      dark,
-      key: "purple"
-    }),
-    magenta: opts.spot({
-      base,
-      dark,
-      key: "magenta"
-    }),
-    red: opts.spot({
-      base,
-      dark,
-      key: "red"
-    }),
-    orange: opts.spot({
-      base,
-      dark,
-      key: "orange"
-    }),
-    yellow: opts.spot({
-      base,
-      dark,
-      key: "yellow"
-    }),
-    green: opts.spot({
-      base,
-      dark,
-      key: "green"
-    }),
-    cyan: opts.spot({
-      base,
-      dark,
-      key: "cyan"
-    })
-  };
-}
-function createColorTheme() {
-  let partialOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const builders = {
-    ...defaultOpts,
-    ...partialOpts
-  };
-  return {
-    light: _createColorScheme(builders, false),
-    dark: _createColorScheme(builders, true)
-  };
-}
-function _createColorScheme(opts, dark) {
-  return {
-    default: _createColor(opts, dark, "default"),
-    transparent: _createColor(opts, dark, "transparent"),
-    primary: _createColor(opts, dark, "primary"),
-    positive: _createColor(opts, dark, "positive"),
-    caution: _createColor(opts, dark, "caution"),
-    critical: _createColor(opts, dark, "critical")
-  };
-}
-function _createColor(opts, dark, name) {
-  const base = opts.base({
-    dark,
-    name
-  });
-  const solid = createSolidTones(opts, base, dark, name);
-  const muted = createMutedTones(opts, base, dark, name);
-  return {
-    base,
-    button: createButtonModes(opts, base, dark, solid, muted),
-    card: createCardStates(opts, base, dark, name, solid, muted),
-    dark,
-    input: createInputModes(opts, base, dark, solid, muted),
-    selectable: createSelectableTones(opts, base, dark, solid, muted),
-    spot: createSpot(opts, base, dark),
-    syntax: opts.syntax({
-      base,
-      dark
-    }),
-    solid,
-    muted
-  };
-}
-function multiply(bg, fg) {
-  const b = parseColor(bg);
-  const s = parseColor(fg);
-  const hex = rgbToHex(multiply$1(b, s));
-  return hex;
-}
-function screen(bg, fg) {
-  const b = parseColor(bg);
-  const s = parseColor(fg);
-  const hex = rgbToHex(screen$1(b, s));
-  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,
-  caution: hues.yellow,
-  critical: hues.red
-};
-const NEUTRAL_TONES = ["default", "transparent"];
-const color = createColorTheme({
-  base: _ref11 => {
-    let {
-      dark,
-      name
-    } = _ref11;
-    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"),
-        shadow: {
-          outline: rgba(tints2[500].hex, 0.4),
-          umbra: dark ? rgba(tints2[950].hex, 0.4) : rgba(tints2[500].hex, 0.2),
-          penumbra: dark ? rgba(tints2[950].hex, 0.28) : rgba(tints2[500].hex, 0.14),
-          ambient: dark ? rgba(tints2[950].hex, 0.24) : rgba(tints2[500].hex, 0.12)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (name === "transparent") {
-      const tints2 = tones.default;
-      const skeletonFrom2 = tints2[dark ? 800 : 200].hex;
-      return {
-        fg: tints2[dark ? 100 : 900].hex,
-        bg: tints2[dark ? 950 : 50].hex,
-        border: tints2[dark ? 800 : 300].hex,
-        focusRing: hues.blue[500].hex,
-        shadow: {
-          outline: rgba(tints2[500].hex, 0.4),
-          umbra: dark ? rgba(tints2[900].hex, 0.4) : rgba(tints2[500].hex, 0.2),
-          penumbra: dark ? rgba(tints2[900].hex, 0.28) : rgba(tints2[500].hex, 0.14),
-          ambient: dark ? rgba(tints2[900].hex, 0.24) : rgba(tints2[500].hex, 0.12)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    const tints = tones[name] || tones.default;
-    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"),
-      shadow: {
-        outline: rgba(tints[500].hex, 0.4),
-        umbra: dark ? rgba(tints[900].hex, 0.4) : rgba(tints[500].hex, 0.2),
-        penumbra: dark ? rgba(tints[900].hex, 0.28) : rgba(tints[500].hex, 0.14),
-        ambient: dark ? rgba(tints[900].hex, 0.24) : rgba(tints[500].hex, 0.12)
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  solid: _ref12 => {
-    let {
-      base,
-      dark,
-      name,
-      state,
-      tone
-    } = _ref12;
-    const mix = dark ? screen : multiply;
-    const mix2 = dark ? multiply : screen;
-    const defaultTints = tones[name] || tones.default;
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
-    let tints = tones[tone === "default" ? name : tone] || defaultTints;
-    if (state === "disabled") {
-      tints = defaultTints;
-      const bg2 = getColorHex(tones.default, dark, "default", "bg_tint");
-      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"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        accent: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        link: {
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        code: {
-          bg: bg2,
-          fg: mix(base.bg, tints[dark ? 950 : 50].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_hover");
-      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"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "pressed") {
-      const bg2 = getColorHex(tints, dark, tone, "bg_accent_active");
-      const skeletonFrom2 = mix2(bg2, tints[dark ? 200 : 600].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"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        tints = tones.primary;
-      }
-      const bg2 = mix(base.bg, tints[dark ? 200 : 800].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"),
-        muted: {
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        accent: {
-          fg: mix2(bg2, hues.red[dark ? 800 : 200].hex)
-        },
-        link: {
-          fg: mix2(bg2, hues.blue[dark ? 800 : 200].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: mix(base.bg, tints[dark ? 800 : 200].hex)
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    const bg = getColorHex(tints, dark, tone, "bg_accent");
-    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"),
-      muted: {
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex)
-      },
-      accent: {
-        fg: mix2(bg, hues.red[dark ? 900 : 100].hex)
-      },
-      link: {
-        fg: mix2(bg, hues.blue[dark ? 900 : 100].hex)
-      },
-      code: {
-        bg: mix(bg, tints[dark ? 950 : 50].hex),
-        fg: mix(base.bg, tints[dark ? 900 : 100].hex)
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  muted: _ref13 => {
-    let {
-      base,
-      dark,
-      name,
-      state,
-      tone
-    } = _ref13;
-    const mix = dark ? screen : multiply;
-    const defaultTints = tones[name] || tones.default;
-    const isNeutral = NEUTRAL_TONES.includes(name) && NEUTRAL_TONES.includes(tone);
-    let tints = tones[tone === "default" ? name : tone] || defaultTints;
-    if (state === "disabled") {
-      tints = defaultTints;
-      const bg2 = base.bg;
-      const skeletonFrom2 = mix(bg2, tints[dark ? 900 : 100].hex);
-      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"),
-        muted: {
-          fg: getColorHex(tones.default, dark, "default", "text_inactive")
-        },
-        accent: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        link: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        code: {
-          bg: bg2,
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: rgba(skeletonFrom2, 0.5),
-          to: rgba(skeletonFrom2, 0.25)
-        }
-      };
-    }
-    if (state === "hovered") {
-      const bg2 = getColorHex(tints, dark, name, "bg_base_hover");
-      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"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "pressed") {
-      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"));
-      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"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        tints = tones.primary;
-      }
-      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"),
-        muted: {
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        accent: {
-          fg: mix(bg2, hues.red[dark ? 400 : 500].hex)
-        },
-        link: {
-          fg: mix(bg2, hues.blue[dark ? 400 : 600].hex)
-        },
-        code: {
-          bg: mix(bg2, tints[dark ? 950 : 50].hex),
-          fg: getColorHex(tints, dark, tone, "text_secondary")
-        },
-        skeleton: {
-          from: skeletonFrom2,
-          to: rgba(skeletonFrom2, 0.5)
-        }
-      };
-    }
-    const bg = base.bg;
-    const skeletonFrom = mix(bg, tints[dark ? 900 : 100].hex);
-    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"),
-      muted: {
-        fg: getColorHex(tints, dark, tone, "text_secondary")
-      },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
-      },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
-      },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: getColorHex(tints, dark, tone, "text_secondary")
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  button: _ref14 => {
-    let {
-      base,
-      mode,
-      muted,
-      solid
-    } = _ref14;
-    if (mode === "bleed") {
-      return {
-        enabled: {
-          ...muted.enabled,
-          border: muted.enabled.bg
-        },
-        hovered: {
-          ...muted.hovered,
-          border: muted.hovered.bg
-        },
-        pressed: {
-          ...muted.pressed,
-          border: muted.pressed.bg
-        },
-        selected: {
-          ...muted.selected,
-          border: muted.selected.bg
-        },
-        disabled: {
-          ...muted.disabled,
-          border: muted.disabled.bg
-        }
-      };
-    }
-    if (mode === "ghost") {
-      return {
-        ...muted,
-        enabled: {
-          ...muted.enabled,
-          border: base.border
-        }
-      };
-    }
-    return solid;
-  },
-  card: _ref15 => {
-    let {
-      base,
-      dark,
-      muted,
-      name,
-      solid,
-      state
-    } = _ref15;
-    if (state === "hovered") {
-      return muted[name].hovered;
-    }
-    if (state === "disabled") {
-      return muted[name].disabled;
-    }
-    const isNeutral = NEUTRAL_TONES.includes(name);
-    const tints = tones[name] || tones.default;
-    const mix = dark ? screen : multiply;
-    if (state === "pressed") {
-      if (isNeutral) {
-        return muted.primary.pressed;
-      }
-      return muted[name].pressed;
-    }
-    if (state === "selected") {
-      if (isNeutral) {
-        return solid.primary.enabled;
-      }
-      return solid[name].enabled;
-    }
-    const bg = base.bg;
-    const skeletonFrom = mix(base.bg, tints[dark ? 900 : 100].hex);
-    return {
-      bg,
-      bg2: mix(bg, tints[dark ? 950 : 50].hex),
-      fg: base.fg,
-      iconColor: getColorHex(tints, dark, name, "icon_default"),
-      border: base.border,
-      muted: {
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex)
-      },
-      accent: {
-        fg: mix(base.bg, hues.red[dark ? 400 : 500].hex)
-      },
-      link: {
-        fg: mix(base.bg, hues.blue[dark ? 400 : 600].hex)
-      },
-      code: {
-        bg: mix(base.bg, tints[dark ? 950 : 50].hex),
-        fg: tints[dark ? 400 : 600].hex
-      },
-      skeleton: {
-        from: skeletonFrom,
-        to: rgba(skeletonFrom, 0.5)
-      }
-    };
-  },
-  input: _ref16 => {
-    let {
-      base,
-      dark,
-      mode,
-      state
-    } = _ref16;
-    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"),
-        fg: mix(base.bg, tints[dark ? 400 : 600].hex),
-        border: getColorHex(tints, dark, "critical", "border_base"),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    if (state === "hovered") {
-      return {
-        bg: base.bg,
-        bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
-        fg: base.fg,
-        border: mix(base.bg, hues.gray[dark ? 700 : 300].hex),
-        placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-      };
-    }
-    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")
-      };
-    }
-    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")
-      };
-    }
-    return {
-      bg: base.bg,
-      bg2: getColorHex(tones.default, dark, "default", "text_secondary"),
-      fg: base.fg,
-      border: base.border,
-      placeholder: getColorHex(tones.default, !dark, "default", "text_secondary")
-    };
-  },
-  selectable: _ref17 => {
-    let {
-      base,
-      muted,
-      tone,
-      solid,
-      state
-    } = _ref17;
-    if (state === "enabled") {
-      return {
-        ...muted[tone].enabled,
-        bg: base.bg
-      };
-    }
-    if (state === "pressed") {
-      if (tone === "default") {
-        return muted.primary.pressed;
-      }
-      return muted[tone].pressed;
-    }
-    if (state === "selected") {
-      if (tone === "default") {
-        return solid.primary.enabled;
-      }
-      return solid[tone].enabled;
-    }
-    if (state === "disabled") {
-      return {
-        ...muted[tone].disabled,
-        bg: base.bg
-      };
-    }
-    return muted[tone][state];
-  },
-  spot: _ref18 => {
-    let {
-      base,
-      dark,
-      key
-    } = _ref18;
-    const mix = dark ? screen : multiply;
-    return mix(base.bg, hues[key][dark ? 400 : 500].hex);
-  },
-  syntax: _ref19 => {
-    let {
-      base,
-      dark
-    } = _ref19;
-    const mix = dark ? screen : multiply;
-    const mainShade = dark ? 400 : 600;
-    const secondaryShade = dark ? 600 : 400;
-    return {
-      atrule: mix(base.bg, hues.purple[mainShade].hex),
-      attrName: mix(base.bg, hues.green[mainShade].hex),
-      attrValue: mix(base.bg, hues.yellow[mainShade].hex),
-      attribute: mix(base.bg, hues.yellow[mainShade].hex),
-      boolean: mix(base.bg, hues.purple[mainShade].hex),
-      builtin: mix(base.bg, hues.purple[mainShade].hex),
-      cdata: mix(base.bg, hues.yellow[mainShade].hex),
-      char: mix(base.bg, hues.yellow[mainShade].hex),
-      class: mix(base.bg, hues.orange[mainShade].hex),
-      className: mix(base.bg, hues.cyan[mainShade].hex),
-      comment: mix(base.bg, hues.gray[secondaryShade].hex),
-      constant: mix(base.bg, hues.purple[mainShade].hex),
-      deleted: mix(base.bg, hues.red[mainShade].hex),
-      doctype: mix(base.bg, hues.gray[secondaryShade].hex),
-      entity: mix(base.bg, hues.red[mainShade].hex),
-      function: mix(base.bg, hues.green[mainShade].hex),
-      hexcode: mix(base.bg, hues.blue[mainShade].hex),
-      id: mix(base.bg, hues.purple[mainShade].hex),
-      important: mix(base.bg, hues.purple[mainShade].hex),
-      inserted: mix(base.bg, hues.yellow[mainShade].hex),
-      keyword: mix(base.bg, hues.magenta[mainShade].hex),
-      number: mix(base.bg, hues.purple[mainShade].hex),
-      operator: mix(base.bg, hues.magenta[mainShade].hex),
-      prolog: mix(base.bg, hues.gray[secondaryShade].hex),
-      property: mix(base.bg, hues.blue[mainShade].hex),
-      pseudoClass: mix(base.bg, hues.yellow[mainShade].hex),
-      pseudoElement: mix(base.bg, hues.yellow[mainShade].hex),
-      punctuation: mix(base.bg, hues.gray[mainShade].hex),
-      regex: mix(base.bg, hues.blue[mainShade].hex),
-      selector: mix(base.bg, hues.red[mainShade].hex),
-      string: mix(base.bg, hues.yellow[mainShade].hex),
-      symbol: mix(base.bg, hues.purple[mainShade].hex),
-      tag: mix(base.bg, hues.red[mainShade].hex),
-      unit: mix(base.bg, hues.orange[mainShade].hex),
-      url: mix(base.bg, hues.red[mainShade].hex),
-      variable: mix(base.bg, hues.red[mainShade].hex)
-    };
-  }
-});
-const fonts = {
-  code: {
-    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
-    },
-    sizes: [{
-      ascenderHeight: 3,
-      descenderHeight: 3,
-      fontSize: 10,
-      iconSize: 17,
-      lineHeight: 13,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 4,
-      descenderHeight: 4,
-      fontSize: 13,
-      iconSize: 21,
-      lineHeight: 17,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 21,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 19,
-      iconSize: 29,
-      lineHeight: 25,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 22,
-      iconSize: 33,
-      lineHeight: 29,
-      letterSpacing: 0
-    }]
-  },
-  heading: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 700,
-      medium: 800,
-      semibold: 900,
-      bold: 900
-    },
-    sizes: [{
-      ascenderHeight: 4,
-      descenderHeight: 4,
-      fontSize: 12,
-      iconSize: 17,
-      lineHeight: 17,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 21,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 21,
-      iconSize: 33,
-      lineHeight: 27,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 27,
-      iconSize: 41,
-      lineHeight: 33,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 33,
-      iconSize: 49,
-      lineHeight: 39,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 9,
-      descenderHeight: 9,
-      fontSize: 38,
-      iconSize: 53,
-      lineHeight: 45,
-      letterSpacing: 0
-    }]
-  },
-  label: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900
-    },
-    sizes: [{
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 9.8,
-      iconSize: 15,
-      lineHeight: 11,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 11.25,
-      iconSize: 17,
-      lineHeight: 12,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 12.75,
-      iconSize: 19,
-      lineHeight: 13,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 14,
-      iconSize: 21,
-      lineHeight: 14,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 15.5,
-      iconSize: 23,
-      lineHeight: 15,
-      letterSpacing: 0.5
-    }]
-  },
-  text: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
-    },
-    sizes: [{
-      ascenderHeight: 3,
-      descenderHeight: 3,
-      fontSize: 10,
-      iconSize: 17,
-      lineHeight: 13,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 4,
-      descenderHeight: 4,
-      fontSize: 13,
-      iconSize: 21,
-      lineHeight: 17,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 21,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 19,
-      iconSize: 29,
-      lineHeight: 25,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 22,
-      iconSize: 33,
-      lineHeight: 29,
-      letterSpacing: 0
-    }]
-  }
-};
-const studioTheme = {
-  avatar: {
-    sizes: [{
-      distance: -3,
-      size: 25
-    }, {
-      distance: -6,
-      size: 35
-    }, {
-      distance: -9,
-      size: 55
-    }],
-    focusRing: {
-      offset: 1,
-      width: 1
-    }
-  },
-  button: {
-    textWeight: "medium",
-    focusRing: {
-      offset: -1,
-      width: 2
-    }
-  },
-  card: {
-    focusRing: {
-      offset: -1,
-      width: 1
-    }
-  },
-  color,
-  container: [320, 640, 960, 1280, 1600, 1920],
-  focusRing: {
-    offset: 1,
-    width: 2
-  },
-  fonts,
-  media: [360, 600, 900, 1200, 1800, 2400],
-  radius: [0, 1, 3, 6, 9, 12, 21],
-  shadows: [null, {
-    umbra: [0, 0, 0, 0],
-    penumbra: [0, 0, 0, 0],
-    ambient: [0, 0, 0, 0]
-  }, {
-    umbra: [0, 3, 5, -1],
-    penumbra: [0, 6, 10, 0],
-    ambient: [0, 1, 18, 0]
-  }, {
-    umbra: [0, 7, 8, -4],
-    penumbra: [0, 12, 17, 2],
-    ambient: [0, 5, 22, 4]
-  }, {
-    umbra: [0, 9, 11, -5],
-    penumbra: [0, 18, 28, 2],
-    ambient: [0, 7, 34, 6]
-  }, {
-    umbra: [0, 11, 15, -7],
-    penumbra: [0, 24, 38, 3],
-    ambient: [0, 9, 46, 8]
-  }],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    checkbox: {
-      size: 17,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    switch: {
-      width: 21,
-      height: 13,
-      padding: 2,
-      transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out",
-      focusRing: {
-        offset: 1,
-        width: 1
-      }
-    },
-    border: {
-      width: 1
-    },
-    select: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    text: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    }
-  }
-  // styles: {
-  //   button: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  //   card: {
-  //     root: {
-  //       transition: 'background-color 100ms,border-color 100ms,color 100ms',
-  //     },
-  //   },
-  // },
-};
-
+  };
+}
+function useElementSize(element) {
+  const [size, setSize] = useState(null);
+  useEffect(() => {
+    if (!element) return void 0;
+    return _elementSizeObserver.subscribe(element, setSize);
+  }, [element]);
+  return size;
+}
+function useElementRect(element) {
+  const elementSize = useElementSize(element);
+  return (elementSize == null ? void 0 : elementSize._contentRect) || null;
+}
+function useGlobalKeyDown(onKeyDown) {
+  return useEffect(() => {
+    addEventListener("keydown", onKeyDown);
+    return () => removeEventListener("keydown", onKeyDown);
+  }, [onKeyDown]);
+}
 const DEFAULT_THEME_LAYER = {
   dialog: {
     zOffset: 600
@@ -3275,7 +893,7 @@ function ThemeProvider(props) {
   });
 }
 function isRecord(value) {
-  return Boolean(value && typeof value === "object");
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
 }
 function useRootTheme() {
   const value = useContext(ThemeContext);
@@ -3438,20 +1056,22 @@ function useCustomValidity(ref, customValidity) {
     }
   }, [customValidity, ref]);
 }
-const BORDER_VALUE = "1px solid var(--card-border-color)";
 function responsiveBorderStyle() {
   return [border, borderTop, borderRight, borderBottom, borderLeft];
 }
 function border(props) {
+  var _a, _b;
   const {
     theme
   } = props;
   const {
+    card,
     media
   } = theme.sanity;
+  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
   return _responsive(media, props.$border, value => value ? {
     "&&": {
-      border: BORDER_VALUE
+      border: borderStyle
     }
   } : {
     "&&": {
@@ -3460,15 +1080,18 @@ function border(props) {
   });
 }
 function borderTop(props) {
+  var _a, _b;
   const {
     theme
   } = props;
   const {
+    card,
     media
   } = theme.sanity;
+  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
   return _responsive(media, props.$borderTop, value => value ? {
     "&&": {
-      borderTop: BORDER_VALUE
+      borderTop: borderStyle
     }
   } : {
     "&&": {
@@ -3477,15 +1100,18 @@ function borderTop(props) {
   });
 }
 function borderRight(props) {
+  var _a, _b;
   const {
     theme
   } = props;
   const {
+    card,
     media
   } = theme.sanity;
+  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
   return _responsive(media, props.$borderRight, value => value ? {
     "&&": {
-      borderRight: BORDER_VALUE
+      borderRight: borderStyle
     }
   } : {
     "&&": {
@@ -3494,15 +1120,18 @@ function borderRight(props) {
   });
 }
 function borderBottom(props) {
+  var _a, _b;
   const {
     theme
   } = props;
   const {
+    card,
     media
   } = theme.sanity;
+  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
   return _responsive(media, props.$borderBottom, value => value ? {
     "&&": {
-      borderBottom: BORDER_VALUE
+      borderBottom: borderStyle
     }
   } : {
     "&&": {
@@ -3511,15 +1140,18 @@ function borderBottom(props) {
   });
 }
 function borderLeft(props) {
+  var _a, _b;
   const {
     theme
   } = props;
   const {
+    card,
     media
   } = theme.sanity;
+  const borderStyle = "".concat((_b = (_a = card.border) == null ? void 0 : _a.width) != null ? _b : 1, "px solid var(--card-border-color)");
   return _responsive(media, props.$borderLeft, value => value ? {
     "&&": {
-      borderLeft: BORDER_VALUE
+      borderLeft: borderStyle
     }
   } : {
     "&&": {
@@ -3952,7 +1584,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$c;
 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 +1598,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 +1622,7 @@ function textInputRepresentationStyle(props) {
     $hasSuffix,
     $scheme,
     $tone,
+    $unstableDisableFocusRing,
     theme
   } = props;
   const {
@@ -3999,19 +1632,19 @@ function textInputRepresentationStyle(props) {
     focusRing
   } = input.text;
   const color = theme.sanity.color.input;
-  return css(_c$d || (_c$d = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$c || (_c$c = __template$D(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), 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,
@@ -4058,8 +1691,9 @@ function toBoxShadow(shadow, color) {
   return "".concat(shadow.map(rem).join(" "), " ").concat(color);
 }
 function shadowStyle(shadow) {
+  let outlineWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
   if (!shadow) return EMPTY_RECORD;
-  const outline = "0 0 0 ".concat(rem(1), " var(--card-shadow-outline-color)");
+  const outline = "0 0 0 ".concat(rem(outlineWidth), " var(--card-shadow-outline-color)");
   const umbra = toBoxShadow(shadow.umbra, "var(--card-shadow-umbra-color)");
   const penumbra = toBoxShadow(shadow.penumbra, "var(--card-shadow-penumbra-color)");
   const ambient = toBoxShadow(shadow.ambient, "var(--card-shadow-ambient-color)");
@@ -4072,27 +1706,28 @@ function responsiveShadowStyle(props) {
     theme
   } = props;
   const {
+    card,
     media,
     shadows
   } = theme.sanity;
-  return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow]));
+  return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow], card.shadow.outline));
 }
 var __freeze$C = Object.freeze;
 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;
-function textBaseStyle(props) {
+var _a$C, _b$m, _c$b;
+function labelBaseStyle(props) {
   const {
     $accent,
     $muted,
     theme
   } = 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);
+    fonts
+  } = theme.sanity;
+  return css(_c$b || (_c$b = __template$C(["\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$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    "]))), fonts.code.family);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4100,11 +1735,11 @@ var __template$B = (cooked, raw) => __freeze$B(__defProp$C(cooked, "raw", {
   value: __freeze$B(raw || cooked.slice())
 }));
 var _a$B;
-const Root$E = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const Root$D = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
 const SpanWithTextOverflow$2 = styled.span(_a$B || (_a$B = __template$B(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const Text = forwardRef(function Text2(props, ref) {
+const Label = forwardRef(function Label2(props, ref) {
   const {
-    accent = false,
+    accent,
     align,
     children: childrenProp,
     muted = false,
@@ -4118,19 +1753,21 @@ const Text = forwardRef(function Text2(props, ref) {
     children = /* @__PURE__ */jsx(SpanWithTextOverflow$2, {
       children
     });
+  } else {
+    children = /* @__PURE__ */jsx("span", {
+      children
+    });
   }
-  return /* @__PURE__ */jsx(Root$E, {
-    "data-ui": "Text",
+  return /* @__PURE__ */jsx(Root$D, {
+    "data-ui": "Label",
     ...restProps,
     $accent: accent,
     $align: useArrayProp(align),
     $muted: muted,
-    ref,
     $size: useArrayProp(size),
     $weight: weight,
-    children: /* @__PURE__ */jsx("span", {
-      children
-    })
+    ref,
+    children
   });
 });
 const avatarStyle = {
@@ -4138,7 +1775,8 @@ const avatarStyle = {
   arrow: avatarArrowStyle,
   bgStroke: avatarBgStrokeStyle,
   stroke: avatarStrokeStyle,
-  initials: avatarInitialsStyle
+  initials: avatarInitialsStyle,
+  image: avatarImageStyle
 };
 function avatarArrowStyle() {
   return {
@@ -4179,6 +1817,7 @@ function avatarArrowStyle() {
   };
 }
 function avatarRootStyle(props) {
+  var _a, _b, _c, _d;
   const {
     $color,
     theme
@@ -4187,7 +1826,9 @@ function avatarRootStyle(props) {
     focusRing
   } = theme.sanity.avatar;
   return {
-    backgroundColor: $color,
+    "--avatar-bg-color": ((_b = (_a = theme.sanity.color.avatar) == null ? void 0 : _a[$color]) == null ? void 0 : _b.bg) || theme.sanity.color.spot[$color],
+    "--avatar-fg-color": ((_d = (_c = theme.sanity.color.avatar) == null ? void 0 : _c[$color]) == null ? void 0 : _d.fg) || "var(--card-bg-color)",
+    backgroundColor: "var(--avatar-bg-color)",
     position: "relative",
     boxSizing: "border-box",
     userSelect: "none",
@@ -4245,17 +1886,16 @@ function responsiveAvatarSizeStyle(props) {
     };
   });
 }
-function avatarInitialsStyle(props) {
-  const {
-    theme
-  } = props;
-  const {
-    base
-  } = theme.sanity.color;
+function avatarImageStyle() {
+  return {
+    position: "relative"
+  };
+}
+function avatarInitialsStyle() {
   return {
     width: "100%",
     height: "100%",
-    color: base.fg,
+    color: "var(--avatar-fg-color)",
     alignItems: "center",
     justifyContent: "center",
     textTransform: "uppercase",
@@ -4274,22 +1914,28 @@ function avatarBgStrokeStyle() {
 }
 function avatarStrokeStyle() {
   return {
-    strokeWidth: "3px",
+    strokeWidth: "2px",
+    stroke: "var(--avatar-bg-color)",
     '[data-status="editing"] &': {
       strokeDasharray: "2 4",
       strokeLinecap: "round"
     }
   };
 }
-const Root$D = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
-const Arrow = styled.div(avatarStyle.arrow);
+const Root$C = styled.div(responsiveAvatarSizeStyle, avatarStyle.root);
+const Arrow$1 = styled.div(avatarStyle.arrow);
 const BgStroke = styled.ellipse(avatarStyle.bgStroke);
 const Stroke = styled.ellipse(avatarStyle.stroke);
 const Initials = styled.div(avatarStyle.initials);
+const InitialsLabel = styled(Label)({
+  color: "inherit"
+});
+const Image = styled.svg(avatarStyle.image);
 const Avatar = forwardRef(function Avatar2(props, ref) {
   const {
+    __unstable_hideInnerStroke,
     as: asProp,
-    color: colorKey = "gray",
+    color = "gray",
     src,
     title,
     initials,
@@ -4303,7 +1949,6 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
   const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
   const size = useArrayProp(sizeProp);
   const theme = useTheme();
-  const color = theme.sanity.color.spot[colorKey] || theme.sanity.color.spot.gray;
   const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
@@ -4325,20 +1970,20 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
       onImageLoadError(new Error("Avatar: the image failed to load"));
     }
   }, [onImageLoadError]);
-  const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsxs(Root$D, {
+  const initialsSize = useMemo(() => size.map(s => s === 0 ? 0 : s * 2), [size]);
+  return /* @__PURE__ */jsxs(Root$C, {
     as,
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Avatar",
     ...restProps,
-    $size: size,
     $color: color,
+    $size: size,
     "aria-label": title,
     "data-arrow-position": arrowPosition,
     "data-status": status,
     ref,
     title,
-    children: [/* @__PURE__ */jsx(Arrow, {
+    children: [/* @__PURE__ */jsx(Arrow$1, {
       children: /* @__PURE__ */jsx("svg", {
         width: "11",
         height: "7",
@@ -4349,7 +1994,7 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
           fill: color
         })
       })
-    }), !imageFailed && src && /* @__PURE__ */jsxs("svg", {
+    }), !imageFailed && src && /* @__PURE__ */jsxs(Image, {
       viewBox: "0 0 ".concat(_sizeRem, " ").concat(_sizeRem),
       fill: "none",
       children: [/* @__PURE__ */jsx("defs", {
@@ -4370,7 +2015,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,
@@ -4381,17 +2026,14 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
         cy: _radius,
         rx: _radius,
         ry: _radius,
-        stroke: color,
         vectorEffect: "non-scaling-stroke"
       })]
     }), (imageFailed || !src) && initials && /* @__PURE__ */jsx(Fragment, {
       children: /* @__PURE__ */jsx(Initials, {
-        children: /* @__PURE__ */jsx(Text, {
-          as: "span",
+        children: /* @__PURE__ */jsx(InitialsLabel, {
+          forwardedAs: "span",
           size: initialsSize,
-          children: /* @__PURE__ */jsx("strong", {
-            children: initials
-          })
+          children: initials
         })
       })
     })]
@@ -4402,7 +2044,63 @@ var __defProp$B = Object.defineProperty;
 var __template$A = (cooked, raw) => __freeze$A(__defProp$B(cooked, "raw", {
   value: __freeze$A(raw || cooked.slice())
 }));
-var _a$A;
+var _a$A, _b$l, _c$a;
+function textBaseStyle(props) {
+  const {
+    $accent,
+    $muted,
+    theme
+  } = props;
+  const {
+    weights
+  } = theme.sanity.fonts.text;
+  return css(_c$a || (_c$a = __template$A(["\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$A || (_a$A = __template$A(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$A(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+}
+var __freeze$z = Object.freeze;
+var __defProp$A = Object.defineProperty;
+var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
+  value: __freeze$z(raw || cooked.slice())
+}));
+var _a$z;
+const Root$B = styled.div(responsiveTextFont, responsiveTextAlignStyle, textBaseStyle);
+const SpanWithTextOverflow$1 = styled.span(_a$z || (_a$z = __template$z(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
+const Text = forwardRef(function Text2(props, ref) {
+  const {
+    accent = false,
+    align,
+    children: childrenProp,
+    muted = false,
+    size = 2,
+    textOverflow,
+    weight,
+    ...restProps
+  } = props;
+  let children = childrenProp;
+  if (textOverflow === "ellipsis") {
+    children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
+      children
+    });
+  }
+  return /* @__PURE__ */jsx(Root$B, {
+    "data-ui": "Text",
+    ...restProps,
+    $accent: accent,
+    $align: useArrayProp(align),
+    $muted: muted,
+    ref,
+    $size: useArrayProp(size),
+    $weight: weight,
+    children: /* @__PURE__ */jsx("span", {
+      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;
 function _responsiveAvatarCounterSizeStyle(props) {
   const {
     theme
@@ -4425,9 +2123,9 @@ 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$y || (_a$y = __template$y(["\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 Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
   const {
     count,
@@ -4435,16 +2133,15 @@ const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
   } = props;
   const size = useArrayProp(sizeProp);
   const counterSize = useMemo(() => size.map(s => s === 0 ? 0 : s + 1), [size]);
-  return /* @__PURE__ */jsx(Root$C, {
+  return /* @__PURE__ */jsx(Root$A, {
     $size: size,
     "data-ui": "AvatarCounter",
     ref,
     children: /* @__PURE__ */jsx(Text, {
       as: "span",
       size: counterSize,
-      children: /* @__PURE__ */jsx("strong", {
-        children: count
-      })
+      weight: "medium",
+      children: count
     })
   });
 });
@@ -4452,13 +2149,13 @@ function childrenToElementArray(children) {
   const childrenArray = Array.isArray(children) ? children : [children];
   return childrenArray.filter(node => isElement$1(node) || isFragment(node) || typeof node === "string");
 }
-var __freeze$z = Object.freeze;
-var __defProp$A = Object.defineProperty;
-var __template$z = (cooked, raw) => __freeze$z(__defProp$A(cooked, "raw", {
-  value: __freeze$z(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$z;
-const BASE_STYLES = css(_a$z || (_a$z = __template$z(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
+var _a$x;
+const BASE_STYLES = css(_a$x || (_a$x = __template$x(["\n  white-space: nowrap;\n\n  & > div {\n    vertical-align: top;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  }\n"])));
 function avatarStackStyle() {
   return BASE_STYLES;
 }
@@ -4480,7 +2177,7 @@ function responsiveAvatarStackSizeStyle(props) {
     };
   });
 }
-const Root$B = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
+const Root$z = styled.div(responsiveAvatarStackSizeStyle, avatarStackStyle);
 const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const {
     children: childrenProp,
@@ -4495,7 +2192,7 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
   const visibleCount = maxLength - 1;
   const extraCount = len - visibleCount;
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children;
-  return /* @__PURE__ */jsxs(Root$B, {
+  return /* @__PURE__ */jsxs(Root$z, {
     "data-ui": "AvatarStack",
     ...restProps,
     ref,
@@ -4516,7 +2213,7 @@ const AvatarStack = forwardRef(function AvatarStack2(props, ref) {
     }, String(childIndex)))]
   });
 });
-const Root$A = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
+const Root$y = styled.div(boxStyle, flexItemStyle, responsiveBoxStyle, responsiveGridItemStyle, responsiveMarginStyle, responsivePaddingStyle);
 const Box = forwardRef(function Box2(props, ref) {
   const {
     as: asProp = "div",
@@ -4547,7 +2244,7 @@ const Box = forwardRef(function Box2(props, ref) {
     sizing,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$A, {
+  return /* @__PURE__ */jsx(Root$y, {
     "data-as": typeof asProp === "string" ? asProp : void 0,
     "data-ui": "Box",
     ...restProps,
@@ -4581,108 +2278,50 @@ const Box = forwardRef(function Box2(props, ref) {
     children: props.children
   });
 });
-var __freeze$y = Object.freeze;
-var __defProp$z = Object.defineProperty;
-var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
-  value: __freeze$y(raw || cooked.slice())
-}));
-var _a$y, _b$k, _c$b;
-function labelBaseStyle(props) {
-  const {
-    $accent,
-    $muted,
-    theme
-  } = props;
-  const {
-    fonts
-  } = theme.sanity;
-  return css(_c$b || (_c$b = __template$y(["\n    text-transform: uppercase;\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$y || (_a$y = __template$y(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$k || (_b$k = __template$y(["\n      color: var(--card-muted-fg-color);\n    "]))), fonts.code.family);
-}
-var __freeze$x = Object.freeze;
-var __defProp$y = Object.defineProperty;
-var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
-  value: __freeze$x(raw || cooked.slice())
-}));
-var _a$x;
-const Root$z = styled.div(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle);
-const SpanWithTextOverflow$1 = styled.span(_a$x || (_a$x = __template$x(["\n  display: block;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  overflow: clip;\n"])));
-const Label = forwardRef(function Label2(props, ref) {
-  const {
-    accent,
-    align,
-    children: childrenProp,
-    muted = false,
-    size = 2,
-    textOverflow,
-    weight,
-    ...restProps
-  } = props;
-  let children = childrenProp;
-  if (textOverflow === "ellipsis") {
-    children = /* @__PURE__ */jsx(SpanWithTextOverflow$1, {
-      children
-    });
-  } else {
-    children = /* @__PURE__ */jsx("span", {
-      children
-    });
-  }
-  return /* @__PURE__ */jsx(Root$z, {
-    "data-ui": "Label",
-    ...restProps,
-    $accent: accent,
-    $align: useArrayProp(align),
-    $muted: muted,
-    $size: useArrayProp(size),
-    $weight: weight,
-    ref,
-    children
-  });
-});
 function badgeStyle(props) {
+  var _a;
   const {
-    $mode,
     $tone,
     theme
   } = props;
-  const palette = theme.sanity.color[$mode === "outline" ? "muted" : "solid"];
-  const color = palette[$tone] || palette.default;
+  const color = ((_a = theme.sanity.color.badge) == null ? void 0 : _a[$tone]) || theme.sanity.color.muted[$tone].enabled;
   return {
-    backgroundColor: color.enabled.bg,
-    color: color.enabled.fg,
-    boxShadow: "inset 0 0 0 1px ".concat(color.enabled.border),
+    "--card-bg-color": color.bg,
+    "--card-fg-color": color.fg,
+    backgroundColor: "var(--card-bg-color)",
     cursor: "default",
     "&:not([hidden])": {
       display: "inline-block"
     }
   };
 }
-const Root$y = styled(Box)(responsiveRadiusStyle, badgeStyle);
+const Root$x = styled(Box)(responsiveRadiusStyle, badgeStyle);
 const Badge = forwardRef(function Badge2(props, ref) {
   const {
     children,
-    fontSize,
-    mode = "default",
+    fontSize = 1,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    mode: _deprecated_mode,
     padding = 1,
     radius = 2,
     tone = "default",
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$y, {
+  return /* @__PURE__ */jsx(Root$x, {
     "data-ui": "Badge",
     ...restProps,
-    $mode: mode,
     $tone: tone,
     $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$w = styled(Box)(flexItemStyle, responsiveFlexStyle);
 const Flex = forwardRef(function Flex2(props, ref) {
   const {
     align,
@@ -4696,7 +2335,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$w, {
       "data-ui": "Flex",
       ...restProps,
       $align: useArrayProp(align),
@@ -4714,11 +2353,11 @@ var __defProp$x = Object.defineProperty;
 var __template$w = (cooked, raw) => __freeze$w(__defProp$x(cooked, "raw", {
   value: __freeze$w(raw || cooked.slice())
 }));
-var _a$w, _b$j;
+var _a$w, _b$k;
 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);
+const Root$v = styled(Text)(_b$k || (_b$k = __template$w(["\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$v, {
     "data-ui": "Spinner",
     ...props,
     ref,
@@ -4736,7 +2375,7 @@ function _colorVarsStyle(base, color) {
     "--card-shadow-penumbra-color": base.shadow.penumbra,
     "--card-shadow-ambient-color": base.shadow.ambient,
     "--card-focus-ring-color": base.focusRing,
-    "--card-icon-color": color.iconColor,
+    "--card-icon-color": color.icon,
     // Card
     "--card-bg-color": color.bg,
     "--card-bg2-color": color.bg2,
@@ -4761,16 +2400,17 @@ var __defProp$w = Object.defineProperty;
 var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
   value: __freeze$v(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$v, _b$j;
+function buttonBaseStyles(_ref2) {
+  let {
+    $width,
+    theme
+  } = _ref2;
+  const {
+    styles
+  } = theme.sanity;
+  return css(_b$j || (_b$j = __template$v(["\n    ", ";\n\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    vertical-align: top;\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  "])), styles == null ? void 0 : styles.button, $width === "fill" && css(_a$v || (_a$v = __template$v(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
-const buttonTheme = {
-  border: {
-    width: 1
-  }
-};
-const defaultBoxShadow = "0px 2px 0px 0px rgba(112, 128, 155, 0.19);";
 function combineBoxShadow() {
   for (var _len = arguments.length, boxShadows = new Array(_len), _key = 0; _key < _len; _key++) {
     boxShadows[_key] = arguments[_key];
@@ -4778,15 +2418,13 @@ function combineBoxShadow() {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2, _b;
+  var _a2, _b2;
   const {
     $mode,
     theme
   } = props;
-  const {
-    focusRing
-  } = theme.sanity.button;
-  const shadow = props.$mode !== "bleed";
+  const buttonTheme = theme.sanity.button;
+  const shadow = props.$mode === "ghost";
   const base = theme.sanity.color.base;
   const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default;
   const color = mode[props.$tone] || mode.default;
@@ -4794,6 +2432,7 @@ function buttonColorStyles(props) {
     width: buttonTheme.border.width,
     color: "var(--card-border-color)"
   };
+  const defaultBoxShadow = void 0;
   return [_colorVarsStyle(base, color.enabled), {
     backgroundColor: "var(--card-bg-color)",
     color: "var(--card-fg-color)",
@@ -4808,7 +2447,7 @@ function buttonColorStyles(props) {
             width: 2,
             color: base.bg
           },
-          focusRing
+          focusRing: buttonTheme.focusRing
         })
       },
       "&:focus:not(:focus-visible)": {
@@ -4821,7 +2460,7 @@ 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;
@@ -4829,7 +2468,7 @@ var __template$u = (cooked, raw) => __freeze$u(__defProp$v(cooked, "raw", {
   value: __freeze$u(raw || cooked.slice())
 }));
 var _a$u;
-const Root$v = styled.button(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles);
+const Root$u = 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"])));
 const Button = forwardRef(function Button2(props, ref) {
   const {
@@ -4840,7 +2479,7 @@ const Button = forwardRef(function Button2(props, ref) {
     iconRight,
     justify: justifyProp = "center",
     loading,
-    mode = "default",
+    mode = "ghost",
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -4856,6 +2495,7 @@ const Button = forwardRef(function Button2(props, ref) {
     tone = "default",
     type = "button",
     muted = false,
+    width,
     ...restProps
   } = props;
   const justify = useArrayProp(justifyProp);
@@ -4879,7 +2519,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$u, {
     "data-ui": "Button",
     ...restProps,
     $mode: mode,
@@ -4890,6 +2530,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, {
@@ -4929,7 +2570,7 @@ var __defProp$u = Object.defineProperty;
 var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
   value: __freeze$t(raw || cooked.slice())
 }));
-var _a$t, _b$i, _c$a;
+var _a$t, _b$i, _c$9;
 function cardStyle(props) {
   return [cardBaseStyle(props), cardColorStyle(props)];
 }
@@ -4939,7 +2580,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$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: -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$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]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -4960,7 +2601,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$9 || (_c$9 = __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({
     base,
     border,
     focusRing
@@ -4970,7 +2611,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$t = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = forwardRef(function Card2(props, ref) {
   const {
     __unstable_checkered: checkered = false,
@@ -4995,7 +2636,7 @@ const Card = forwardRef(function Card2(props, ref) {
   return /* @__PURE__ */jsx(ThemeColorProvider, {
     scheme,
     tone,
-    children: /* @__PURE__ */jsx(Root$u, {
+    children: /* @__PURE__ */jsx(Root$t, {
       "data-as": typeof as === "string" ? as : void 0,
       "data-scheme": rootTheme.scheme,
       "data-ui": "Card",
@@ -5041,11 +2682,11 @@ 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$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.5px !important;\n        }\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({
-    color: color.default.enabled.bg2,
+  }), rem(radius[2]), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+    color: color.default.enabled.fg,
     width: input.border.width
   }), color.default.enabled.bg, focusRingStyle({
     focusRing
@@ -5074,7 +2715,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$s = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
 const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
   const {
@@ -5094,7 +2735,7 @@ const Checkbox = forwardRef(function Checkbox2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$t, {
+  return /* @__PURE__ */jsxs(Root$s, {
     className,
     "data-ui": "Checkbox",
     style,
@@ -5118,10 +2759,10 @@ var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
   value: __freeze$r(raw || cooked.slice())
 }));
 var _a$r;
-function codeSyntaxHighlightingStyle(_ref20) {
+function codeSyntaxHighlightingStyle(_ref3) {
   let {
     theme
-  } = _ref20;
+  } = _ref3;
   const color = theme.sanity.color.syntax;
   return {
     "&.atrule": {
@@ -5237,7 +2878,7 @@ 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);
 }
-const Root$s = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
+const Root$r = styled.pre(codeBaseStyle, responsiveCodeFontStyle);
 const Code = forwardRef(function Code2(props, ref) {
   const {
     children,
@@ -5248,7 +2889,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$r, {
     "data-ui": "Code",
     ...restProps,
     $size: useArrayProp(size),
@@ -5282,14 +2923,14 @@ function responsiveContainerWidthStyle(props) {
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
 }
-const Root$r = styled(Box)(containerBaseStyle, responsiveContainerWidthStyle);
+const Root$q = 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$q, {
     "data-ui": "Container",
     ...restProps,
     $width: useArrayProp(width),
@@ -5297,7 +2938,7 @@ const Container = forwardRef(function Container2(props, ref) {
     ref
   });
 });
-const Root$q = styled(Box)(responsiveGridStyle);
+const Root$p = styled(Box)(responsiveGridStyle);
 const Grid = forwardRef(function Grid2(props, ref) {
   const {
     as,
@@ -5312,7 +2953,7 @@ const Grid = forwardRef(function Grid2(props, ref) {
     children,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$q, {
+  return /* @__PURE__ */jsx(Root$p, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Grid",
     ...restProps,
@@ -5334,14 +2975,14 @@ var __defProp$r = Object.defineProperty;
 var __template$q = (cooked, raw) => __freeze$q(__defProp$r(cooked, "raw", {
   value: __freeze$q(raw || cooked.slice())
 }));
-var _a$q, _b$g, _c$9;
+var _a$q, _b$g, _c$8;
 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$8 || (_c$8 = __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);
 }
 var __freeze$p = Object.freeze;
 var __defProp$q = Object.defineProperty;
@@ -5349,7 +2990,7 @@ var __template$p = (cooked, raw) => __freeze$p(__defProp$q(cooked, "raw", {
   value: __freeze$p(raw || cooked.slice())
 }));
 var _a$p;
-const Root$p = styled.div(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont);
+const Root$o = 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"])));
 const Heading = forwardRef(function Heading2(props, ref) {
   const {
@@ -5368,7 +3009,7 @@ const Heading = forwardRef(function Heading2(props, ref) {
       children
     });
   }
-  return /* @__PURE__ */jsx(Root$p, {
+  return /* @__PURE__ */jsx(Root$o, {
     "data-ui": "Heading",
     ...restProps,
     $accent: accent,
@@ -5408,7 +3049,7 @@ function inlineSpaceStyle(props) {
     };
   });
 }
-const Root$o = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
+const Root$n = styled(Box)(inlineBaseStyle, inlineSpaceStyle);
 const Inline = forwardRef(function Inline2(props, ref) {
   const {
     as,
@@ -5419,7 +3060,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$n, {
     "data-ui": "Inline",
     ...restProps,
     $space: useArrayProp(space),
@@ -5437,7 +3078,7 @@ var _a$o;
 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  "])));
 }
-const Root$n = styled.kbd(responsiveRadiusStyle, kbdStyle);
+const Root$m = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
   const {
     children,
@@ -5446,21 +3087,149 @@ const KBD = forwardRef(function KBD2(props, ref) {
     radius = 2,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$n, {
-    "data-ui": "KBD",
+  return /* @__PURE__ */jsx(Root$m, {
+    "data-ui": "KBD",
+    ...restProps,
+    $radius: useArrayProp(radius),
+    ref,
+    children: /* @__PURE__ */jsx(Box, {
+      as: "span",
+      padding,
+      children: /* @__PURE__ */jsx(Text, {
+        as: "span",
+        muted: true,
+        size: fontSize,
+        weight: "medium",
+        children
+      })
+    })
+  });
+});
+function moveTowardsLength(movingPoint, targetPoint, amount) {
+  const width = targetPoint.x - movingPoint.x;
+  const height = targetPoint.y - movingPoint.y;
+  const distance = Math.sqrt(width * width + height * height);
+  return moveTowardsFractional(movingPoint, targetPoint, Math.min(1, amount / distance));
+}
+function moveTowardsFractional(movingPoint, targetPoint, fraction) {
+  return {
+    x: movingPoint.x + (targetPoint.x - movingPoint.x) * fraction,
+    y: movingPoint.y + (targetPoint.y - movingPoint.y) * fraction
+  };
+}
+function getRoundedCommands(points) {
+  const len = points.length;
+  const cmds = [];
+  for (let i = 0; i < len; i += 1) {
+    const point = points[i];
+    const prevPoint = points[i - 1];
+    const nextPoint = points[i + 1];
+    if (prevPoint && point.radius) {
+      const curveStart = moveTowardsLength(point, prevPoint, point.radius);
+      const curveEnd = moveTowardsLength(point, nextPoint, point.radius);
+      const startControl = moveTowardsFractional(curveStart, point, 0.5);
+      const endControl = moveTowardsFractional(point, curveEnd, 0.5);
+      cmds.push({
+        type: "point",
+        ...curveStart
+      });
+      cmds.push({
+        type: "curve",
+        curveEnd,
+        startControl,
+        endControl
+      });
+    } else {
+      cmds.push({
+        type: "point",
+        ...point
+      });
+    }
+  }
+  return cmds;
+}
+function compileCommands(cmds) {
+  return cmds.map((n, idx) => {
+    if (n.type === "point") {
+      return "".concat(idx === 0 ? "M" : "L", " ").concat(n.x, " ").concat(n.y);
+    }
+    if (n.type === "curve") {
+      return "C ".concat(n.startControl.x, " ").concat(n.startControl.y, " ").concat(n.endControl.x, " ").concat(n.endControl.y, " ").concat(n.curveEnd.x, " ").concat(n.curveEnd.y);
+    }
+    return "";
+  }).join(" ");
+}
+var __freeze$n = Object.freeze;
+var __defProp$o = Object.defineProperty;
+var __template$n = (cooked, raw) => __freeze$n(__defProp$o(cooked, "raw", {
+  value: __freeze$n(raw || cooked.slice())
+}));
+var _a$n, _b$f, _c$7;
+const Root$l = styled.div(_ref4 => {
+  let {
+    $w: w
+  } = _ref4;
+  return css(_a$n || (_a$n = __template$n(["\n    position: absolute;\n    width: ", "px;\n    height: ", "px;\n\n    :empty + & {\n      display: none;\n    }\n\n    & > svg {\n      display: block;\n      line-height: 0;\n      transform-origin: ", "px ", "px;\n    }\n\n    [data-placement^='top'] > & {\n      bottom: -", "px;\n\n      & > svg {\n        transform: rotate(0);\n      }\n    }\n\n    [data-placement^='right'] > & {\n      left: -", "px;\n\n      & > svg {\n        transform: rotate(90deg);\n      }\n    }\n\n    [data-placement^='left'] > & {\n      right: -", "px;\n\n      & > svg {\n        transform: rotate(-90deg);\n      }\n    }\n\n    [data-placement^='bottom'] > & {\n      top: -", "px;\n\n      & > svg {\n        transform: rotate(180deg);\n      }\n    }\n  "])), w, w, w / 2, w / 2, w, w, w, w);
+});
+const StrokePath = styled.path(_b$f || (_b$f = __template$n(["\n  stroke: var(--card-shadow-outline-color);\n"])));
+const ShapePath = styled.path(_c$7 || (_c$7 = __template$n(["\n  fill: var(--card-bg-color);\n"])));
+const Arrow = forwardRef(function Arrow2(props, ref) {
+  const {
+    width: w,
+    height: h,
+    radius = 0,
+    ...restProps
+  } = props;
+  const theme = useTheme();
+  const strokeWidth = theme.sanity.card.shadow.outline;
+  const center = w / 2;
+  const points = [{
+    x: 0,
+    y: 0
+  }, {
+    x: radius,
+    y: 0,
+    radius
+  }, {
+    x: center,
+    y: h - 1,
+    radius
+  }, {
+    x: w - radius,
+    y: 0,
+    radius
+  }, {
+    x: w,
+    y: 0
+  }];
+  const cmds = getRoundedCommands(points);
+  const path = compileCommands(cmds);
+  const strokePath = "".concat(path);
+  const fillPath = "".concat(path, " M ").concat(w, " -1 M 0 -1 Z");
+  return /* @__PURE__ */jsx(Root$l, {
     ...restProps,
-    $radius: useArrayProp(radius),
+    $w: w,
     ref,
-    children: /* @__PURE__ */jsx(Box, {
-      as: "span",
-      padding,
-      children: /* @__PURE__ */jsx(Text, {
-        as: "span",
-        muted: true,
-        size: fontSize,
-        weight: "medium",
-        children
-      })
+    children: /* @__PURE__ */jsxs("svg", {
+      width: w,
+      height: w,
+      viewBox: "0 0 ".concat(w, " ").concat(w),
+      children: [/* @__PURE__ */jsx("mask", {
+        id: "stroke-mask",
+        children: /* @__PURE__ */jsx("rect", {
+          x: 0,
+          y: strokeWidth,
+          width: w,
+          height: w,
+          fill: "white"
+        })
+      }), /* @__PURE__ */jsx(StrokePath, {
+        d: strokePath,
+        mask: "url(#stroke-mask)",
+        strokeWidth: strokeWidth * 2
+      }), /* @__PURE__ */jsx(ShapePath, {
+        d: fillPath
+      })]
     })
   });
 });
@@ -5541,8 +3310,8 @@ const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
     children
   });
 });
-var __defProp$o = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$o(obj, key, {
+var __defProp$n = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp$n(obj, key, {
   enumerable: true,
   configurable: true,
   writable: true,
@@ -5771,7 +3540,7 @@ function LayerProvider(props) {
     children
   });
 }
-const Root$m = styled.div({
+const Root$k = styled.div({
   position: "relative"
 });
 const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
@@ -5807,7 +3576,7 @@ const LayerChildren = forwardRef(function LayerChildren2(props, ref) {
       lastFocusedRef.current = target;
     }
   }, [forwardedRef, isTopLayer, onFocus]);
-  return /* @__PURE__ */jsx(Root$m, {
+  return /* @__PURE__ */jsx(Root$k, {
     ...restProps,
     "data-ui": "Layer",
     onFocus: handleFocus,
@@ -5918,19 +3687,19 @@ function PortalProvider(props) {
     children
   });
 }
-var __freeze$n = Object.freeze;
-var __defProp$n = Object.defineProperty;
-var __template$n = (cooked, raw) => __freeze$n(__defProp$n(cooked, "raw", {
-  value: __freeze$n(raw || cooked.slice())
+var __freeze$m = Object.freeze;
+var __defProp$m = Object.defineProperty;
+var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
+  value: __freeze$m(raw || cooked.slice())
 }));
-var _a$n;
-const Root$l = styled.div(_a$n || (_a$n = __template$n(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
+var _a$m;
+const Root$j = styled.div(_a$m || (_a$m = __template$m(["\n  display: block;\n  width: 0;\n  height: 0;\n  position: absolute;\n  overflow: hidden;\n  overflow: clip;\n"])));
 const SrOnly = forwardRef(function SrOnly2(props, ref) {
   const {
     as,
     children
   } = props;
-  return /* @__PURE__ */jsx(Root$l, {
+  return /* @__PURE__ */jsx(Root$j, {
     "aria-hidden": true,
     as,
     "data-ui": "SrOnly",
@@ -5938,14 +3707,14 @@ const SrOnly = forwardRef(function SrOnly2(props, ref) {
     children
   });
 });
-var __freeze$m = Object.freeze;
-var __defProp$m = Object.defineProperty;
-var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
-  value: __freeze$m(raw || cooked.slice())
+var __freeze$l = Object.freeze;
+var __defProp$l = Object.defineProperty;
+var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
+  value: __freeze$l(raw || cooked.slice())
 }));
-var _a$m, _b$f;
-const Root$k = styled.div(_a$m || (_a$m = __template$m(["\n  position: relative;\n"])));
-const ItemWrapper = styled.div(_b$f || (_b$f = __template$m(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
+var _a$l, _b$e;
+const Root$i = styled.div(_a$l || (_a$l = __template$l(["\n  position: relative;\n"])));
+const ItemWrapper = styled.div(_b$e || (_b$e = __template$l(["\n  position: absolute;\n  left: 0;\n  right: 0;\n"])));
 const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const {
     as = "div",
@@ -6051,7 +3820,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
   const wrapperStyle = useMemo(() => ({
     height
   }), [height]);
-  return /* @__PURE__ */jsx(Root$k, {
+  return /* @__PURE__ */jsx(Root$i, {
     as,
     "data-ui": "VirtualList",
     ...restProps,
@@ -6065,8 +3834,9 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
 });
 const DEFAULT_POPOVER_DISTANCE = 4;
 const DEFAULT_POPOVER_PADDING = 4;
-const DEFAULT_POPOVER_ARROW_WIDTH = 27;
-const DEFAULT_POPOVER_ARROW_HEIGHT = 11;
+const DEFAULT_POPOVER_ARROW_WIDTH = 19;
+const DEFAULT_POPOVER_ARROW_HEIGHT = 8;
+const DEFAULT_POPOVER_ARROW_RADIUS = 2;
 const DEFAULT_POPOVER_MARGINS = [0, 0, 0, 0];
 const DEFAULT_FALLBACK_PLACEMENTS$1 = {
   top: ["bottom", "left", "right"],
@@ -6168,35 +3938,7 @@ function calcMaxWidth(params) {
   }
   return Math.min(currentWidth != null ? currentWidth : Infinity, (boundaryWidth || Infinity) - DEFAULT_POPOVER_PADDING * 2);
 }
-var __freeze$l = Object.freeze;
-var __defProp$l = Object.defineProperty;
-var __template$l = (cooked, raw) => __freeze$l(__defProp$l(cooked, "raw", {
-  value: __freeze$l(raw || cooked.slice())
-}));
-var _a$l, _b$e, _c$8;
-const Root$j = styled.div(_a$l || (_a$l = __template$l(["\n  position: absolute;\n  pointer-events: none;\n  width: ", "px;\n  height: ", "px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: ", "px ", "px;\n  }\n\n  [data-placement^='top'] > & {\n    bottom: -", "px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -", "px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -", "px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -", "px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])), DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH / 2, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH, DEFAULT_POPOVER_ARROW_WIDTH);
-const BorderPath = styled.path(_b$e || (_b$e = __template$l(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const ShapePath = styled.path(_c$8 || (_c$8 = __template$l(["\n  fill: var(--card-bg-color);\n"])));
-const PopoverArrow = forwardRef(function PopoverArrow2(props, ref) {
-  return /* @__PURE__ */jsx(Root$j, {
-    "data-ui": "Popover__arrow",
-    ...props,
-    ref,
-    children: /* @__PURE__ */jsxs("svg", {
-      width: DEFAULT_POPOVER_ARROW_WIDTH,
-      height: DEFAULT_POPOVER_ARROW_HEIGHT,
-      viewBox: "0 0 27 11",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      children: [/* @__PURE__ */jsx(BorderPath, {
-        d: "M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z"
-      }), /* @__PURE__ */jsx(ShapePath, {
-        d: "M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
-      })]
-    })
-  });
-});
-const Root$i = styled(Card)({
+const Root$h = styled(Card)({
   "&:not([hidden])": {
     display: "flex"
   },
@@ -6240,18 +3982,13 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     zIndex,
     ...style
   }), [strategy, style, width, x, y, zIndex]);
-  const staticSide = placement && FLOATING_STATIC_SIDES[placement.split("-")[0]];
-  const arrowStyle = useMemo(() => {
-    const style2 = {
-      left: arrowX !== null ? arrowX : void 0,
-      top: arrowY !== null ? arrowY : void 0,
-      right: void 0,
-      bottom: void 0
-    };
-    if (staticSide) style2[staticSide] = 0 - DEFAULT_POPOVER_ARROW_WIDTH;
-    return style2;
-  }, [arrowX, arrowY, staticSide]);
-  return /* @__PURE__ */jsxs(Root$i, {
+  const arrowStyle = useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
+    right: void 0,
+    bottom: void 0
+  }), [arrowX, arrowY]);
+  return /* @__PURE__ */jsxs(Root$h, {
     "data-ui": "Popover",
     ...restProps,
     "data-placement": placement,
@@ -6273,9 +4010,12 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
         padding,
         children
       })
-    }), arrow && /* @__PURE__ */jsx(PopoverArrow, {
+    }), arrow && /* @__PURE__ */jsx(Arrow, {
       ref: arrowRef,
-      style: arrowStyle
+      style: arrowStyle,
+      width: DEFAULT_POPOVER_ARROW_WIDTH,
+      height: DEFAULT_POPOVER_ARROW_HEIGHT,
+      radius: DEFAULT_POPOVER_ARROW_RADIUS
     })]
   });
 }));
@@ -6286,7 +4026,7 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const boundaryElementContext = useBoundaryElement();
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
-    arrow: arrowProp = true,
+    arrow: arrowProp = false,
     boundaryElement = boundaryElementContext.element,
     children: childProp,
     constrainSize = false,
@@ -6295,6 +4035,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     fallbackPlacements = (_b = props.fallbackPlacements) != null ? _b : DEFAULT_FALLBACK_PLACEMENTS$1[(_a = props.placement) != null ? _a : "bottom"],
     matchReferenceWidth,
     floatingBoundary = (_c = props.boundaryElement) != null ? _c : boundaryElementContext.element,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onActivate,
     open,
     overflow = "hidden",
     padding: paddingProp,
@@ -6367,17 +4109,17 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
       }));
     }
     ret.push(offset({
-      mainAxis: arrowProp ? DEFAULT_POPOVER_DISTANCE : 0
+      mainAxis: DEFAULT_POPOVER_DISTANCE
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref21) {
+        apply(_ref5) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref21;
+          } = _ref5;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -6530,7 +4272,7 @@ function inputElementStyle(props) {
   return css(_b$d || (_b$d = __template$k(["\n    appearance: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0;\n    height: 100%;\n    width: 100%;\n    outline: none;\n    z-index: 1;\n    padding: 0;\n    margin: 0;\n    border-radius: ", ";\n    border: none;\n\n    /* enabled */\n    & + span {\n      display: block;\n      position: relative;\n      height: ", ";\n      width: ", ";\n      border-radius: ", ";\n      background: ", ";\n      box-shadow: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        top: ", ";\n        left: ", ";\n        height: ", ";\n        width: ", ";\n        border-radius: ", ";\n        background: ", ";\n        opacity: 0;\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus + span {\n      box-shadow: ", ";\n    }\n\n    &:not(:disabled):focus:not(:focus-visible) + span {\n      box-shadow: ", ";\n    }\n\n    &:checked + span::after {\n      opacity: 1;\n    }\n\n    /* customValidity */\n    &[data-error] + span {\n      background-color: ", ";\n      box-shadow: ", ";\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* read only */\n    &[data-read-only] + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled + span {\n      box-shadow: 0 0 0 1px ", ";\n      background: ", ";\n\n      &::after {\n        background: ", ";\n      }\n    }\n  "])), rem(input.radio.size / 2), rem(input.radio.size), rem(input.radio.size), rem(input.radio.size / 2), color.default.enabled.bg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
-  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.bg2, focusRingStyle({
+  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.default.enabled.fg, focusRingStyle({
     border: {
       width: input.border.width,
       color: color.default.enabled.border
@@ -6544,7 +4286,7 @@ function inputElementStyle(props) {
     color: color.invalid.enabled.bg2
   }), color.invalid.enabled.bg2, color.default.readOnly.border, color.default.readOnly.bg, color.default.readOnly.border, color.default.disabled.border, color.default.disabled.bg, color.default.disabled.border);
 }
-const Root$h = styled.div(radioBaseStyle);
+const Root$g = styled.div(radioBaseStyle);
 const Input$4 = styled.input(inputElementStyle);
 const Radio = forwardRef(function Radio2(props, forwardedRef) {
   const {
@@ -6557,7 +4299,7 @@ const Radio = forwardRef(function Radio2(props, forwardedRef) {
   } = props;
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsxs(Root$h, {
+  return /* @__PURE__ */jsxs(Root$g, {
     className,
     "data-ui": "Radio",
     style,
@@ -6577,9 +4319,9 @@ var __defProp$j = Object.defineProperty;
 var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
   value: __freeze$j(raw || cooked.slice())
 }));
-var _a$j, _b$c, _c$7, _d$5;
+var _a$j, _b$c, _c$6, _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 {
@@ -6599,7 +4341,7 @@ function inputColorStyle(props) {
     focusRing
   } = input.select;
   const color = theme.sanity.color.input;
-  return css(_c$7 || (_c$7 = __template$j(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$6 || (_c$6 = __template$j(["\n    /* enabled */\n    background-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n\n    /* hovered */\n    @media (hover: hover) {\n      &:not(:disabled):hover {\n        background-color: ", ";\n        color: ", ";\n        box-shadow: ", ";\n      }\n    }\n\n    /* focused */\n    &:not(:disabled):focus {\n      box-shadow: ", ";\n    }\n\n    /* read-only */\n    &[data-read-only] {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n\n    /* disabled */\n    &:not([data-read-only]):disabled {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: ", ";\n    }\n  "])), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
     color: color.default.enabled.border,
     width: input.border.width
   }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
@@ -6650,7 +4392,7 @@ const selectStyle = {
   input: inputStyle,
   iconBox: iconBoxStyle
 };
-const Root$g = styled.div(selectStyle.root);
+const Root$f = styled.div(selectStyle.root);
 const Input$3 = styled.select(selectStyle.input);
 const IconBox = styled(Box)(selectStyle.iconBox);
 const Select = forwardRef(function Select2(props, forwardedRef) {
@@ -6667,7 +4409,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
   } = props;
   const ref = useForwardedRef(forwardedRef);
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsxs(Root$g, {
+  return /* @__PURE__ */jsxs(Root$f, {
     "data-ui": "Select",
     children: [/* @__PURE__ */jsx(Input$3, {
       "data-read-only": !disabled && readOnly ? "" : void 0,
@@ -6684,7 +4426,7 @@ const Select = forwardRef(function Select2(props, forwardedRef) {
       padding,
       children: /* @__PURE__ */jsx(Text, {
         size: fontSize,
-        children: /* @__PURE__ */jsx(SelectIcon, {})
+        children: /* @__PURE__ */jsx(ChevronDownIcon, {})
       })
     })]
   });
@@ -6714,14 +4456,14 @@ function responsiveStackSpaceStyle(props) {
     gridGap: rem(space[spaceIndex])
   }));
 }
-const Root$f = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
+const Root$e = styled(Box)(stackBaseStyle, responsiveStackSpaceStyle);
 const Stack = forwardRef(function Stack2(props, ref) {
   const {
     as,
     space,
     ...restProps
   } = props;
-  return /* @__PURE__ */jsx(Root$f, {
+  return /* @__PURE__ */jsx(Root$e, {
     "data-as": typeof as === "string" ? as : void 0,
     "data-ui": "Stack",
     ...restProps,
@@ -6735,7 +4477,7 @@ var __defProp$i = Object.defineProperty;
 var __template$i = (cooked, raw) => __freeze$i(__defProp$i(cooked, "raw", {
   value: __freeze$i(raw || cooked.slice())
 }));
-var _a$i, _b$b, _c$6, _d$4, _e$2, _f$2, _g;
+var _a$i, _b$b, _c$5, _d$4, _e$2, _f$2, _g;
 function switchBaseStyles() {
   return css(_a$i || (_a$i = __template$i(["\n    position: relative;\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
@@ -6753,9 +4495,9 @@ function switchRepresentationStyles(props) {
     focusRing
   } = input.switch;
   const color = theme.sanity.color.input;
-  return css(_c$6 || (_c$6 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: var(--card-focus-ring-color);\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: var(--card-focus-ring-color);\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.border, color.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_c$5 || (_c$5 = __template$i(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.default.enabled.border, color.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing
-  }), color.default.enabled.bg, color.default.hovered.border, color.default.hovered.bg, color.default.enabled.bg, color.default.disabled.border, color.default.disabled.bg, color.default.readOnly.border, color.default.readOnly.bg);
+  }), color.default.enabled.fg, color.default.enabled.bg, color.default.hovered.border, color.default.hovered.bg, color.default.enabled.fg, color.default.enabled.bg, color.default.disabled.border, color.default.disabled.bg, color.default.readOnly.border, color.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
   const {
@@ -6783,7 +4525,7 @@ function switchThumbStyles(props) {
   const checked = $indeterminate !== true && props.$checked === true;
   return css(_g || (_g = __template$i(["\n    &:not([hidden]) {\n      display: block;\n    }\n    position: absolute;\n    left: ", ";\n    top: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: ", ";\n    transition-property: transform;\n    transition-duration: ", "ms;\n    transition-timing-function: ", ";\n    background: var(--switch-fg-color);\n    transform: translate3d(0, 0, 0);\n    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);\n\n    ", "\n\n    ", "\n  "])), rem(trackPadding), rem(trackPadding), rem(size), rem(size), rem(size / 2), input.switch.transitionDurationMs, input.switch.transitionTimingFunction, checked && css(_e$2 || (_e$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), checkedOffset), $indeterminate && css(_f$2 || (_f$2 = __template$i(["\n      transform: translate3d(", "px, 0, 0);\n    "])), indeterminateOffset));
 }
-const Root$e = styled.span(switchBaseStyles);
+const Root$d = styled.span(switchBaseStyles);
 const Input$2 = styled.input(switchInputStyles);
 const Representation = styled.span(switchRepresentationStyles);
 const Track = styled.span(switchTrackStyles);
@@ -6804,7 +4546,7 @@ const Switch = forwardRef(function Switch2(props, forwardedRef) {
       ref.current.indeterminate = indeterminate || false;
     }
   }, [indeterminate, ref]);
-  return /* @__PURE__ */jsxs(Root$e, {
+  return /* @__PURE__ */jsxs(Root$d, {
     className,
     "data-ui": "Switch",
     style,
@@ -6831,7 +4573,7 @@ var __template$h = (cooked, raw) => __freeze$h(__defProp$h(cooked, "raw", {
   value: __freeze$h(raw || cooked.slice())
 }));
 var _a$h;
-const Root$d = styled.span(textInputRootStyle);
+const Root$c = styled.span(textInputRootStyle);
 const InputRoot$1 = styled.span(_a$h || (_a$h = __template$h(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
 const Input$1 = styled.textarea(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation$1 = styled.div(responsiveRadiusStyle, textInputRepresentationStyle);
@@ -6842,14 +4584,14 @@ const TextArea = forwardRef(function TextArea2(props, forwardedRef) {
     disabled = false,
     fontSize = 2,
     padding = 3,
-    radius = 1,
+    radius = 2,
     weight,
     ...restProps
   } = props;
   const ref = useForwardedRef(forwardedRef);
   const rootTheme = useRootTheme();
   useCustomValidity(ref, customValidity);
-  return /* @__PURE__ */jsx(Root$d, {
+  return /* @__PURE__ */jsx(Root$c, {
     "data-ui": "TextArea",
     children: /* @__PURE__ */jsxs(InputRoot$1, {
       children: [/* @__PURE__ */jsx(Input$1, {
@@ -6881,11 +4623,11 @@ var __defProp$g = Object.defineProperty;
 var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
-var _a$g, _b$a, _c$5, _d$3, _e$1, _f$1;
+var _a$g, _b$a, _c$4, _d$3, _e$1, _f$1;
 const CLEAR_BUTTON_BOX_STYLE = {
   zIndex: 2
 };
-const Root$c = styled(Card).attrs({
+const Root$b = styled(Card).attrs({
   forwardedAs: "span"
 })(textInputRootStyle);
 const InputRoot = styled.span(_a$g || (_a$g = __template$g(["\n  flex: 1;\n  min-width: 0;\n  display: block;\n  position: relative;\n"])));
@@ -6894,7 +4636,7 @@ const Prefix = styled(Card).attrs({
 })(_b$a || (_b$a = __template$g(["\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Suffix = styled(Card).attrs({
   forwardedAs: "span"
-})(_c$5 || (_c$5 = __template$g(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
+})(_c$4 || (_c$4 = __template$g(["\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n\n  & > span {\n    display: block;\n    margin: -1px;\n  }\n"])));
 const Input = styled.input(responsiveInputPaddingStyle, textInputBaseStyle, textInputFontSizeStyle);
 const Presentation = styled.span(responsiveRadiusStyle, textInputRepresentationStyle);
 const LeftBox = styled(Box)(_d$3 || (_d$3 = __template$g(["\n  position: absolute;\n  top: 0;\n  left: 0;\n"])));
@@ -6907,6 +4649,7 @@ const TextInputClearButton = styled(Button)({
 });
 const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
   const {
+    __unstable_disableFocusRing,
     border = true,
     clearButton,
     disabled = false,
@@ -6916,7 +4659,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 +4704,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 +4725,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;
@@ -7024,7 +4768,7 @@ const TextInput = forwardRef(function TextInput2(props, forwardedRef) {
       children: suffix
     })
   }), [radius, suffix]);
-  return /* @__PURE__ */jsxs(Root$c, {
+  return /* @__PURE__ */jsxs(Root$b, {
     "data-ui": "TextInput",
     tone: rootTheme.tone,
     children: [prefixNode, /* @__PURE__ */jsxs(InputRoot, {
@@ -7065,49 +4809,36 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
+function ConditionalWrapper(_ref6) {
+  let {
+    children,
+    condition,
+    wrapper
+  } = _ref6;
+  if (!condition) {
+    return children;
+  }
+  return wrapper(children);
+}
+const DEFAULT_TOOLTIP_ARROW_WIDTH = 15;
+const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6;
+const DEFAULT_TOOLTIP_ARROW_RADIUS = 2;
+const DEFAULT_TOOLTIP_DISTANCE = 4;
+const DEFAULT_TOOLTIP_PADDING = 4;
 const DEFAULT_FALLBACK_PLACEMENTS = {
-  top: ["bottom", "left", "right"],
-  "top-start": ["bottom-start", "left-start", "right-start"],
-  "top-end": ["bottom-end", "left-end", "right-end"],
-  bottom: ["top", "left", "right"],
-  "bottom-start": ["top-start", "left-start", "right-start"],
-  "bottom-end": ["top-end", "left-end", "right-end"],
-  left: ["right", "top", "bottom"],
-  "left-start": ["right-start", "top-start", "bottom-start"],
-  "left-end": ["right-end", "top-end", "bottom-end"],
-  right: ["left", "top", "bottom"],
-  "right-start": ["left-start", "top-start", "bottom-start"],
-  "right-end": ["left-end", "top-end", "bottom-end"]
+  top: ["top-end", "top-start", "bottom", "left", "right"],
+  "top-start": ["top", "top-end", "bottom-start", "left-start", "right-start"],
+  "top-end": ["top", "top-start", "bottom-end", "left-end", "right-end"],
+  bottom: ["bottom-end", "bottom-start", "top", "left", "right"],
+  "bottom-start": ["bottom", "bottom-end", "top-start", "left-start", "right-start"],
+  "bottom-end": ["bottom", "bottom-start", "top-end", "left-end", "right-end"],
+  left: ["left-end", "left-start", "right", "top", "bottom"],
+  "left-start": ["left", "left-end", "right-start", "top-start", "bottom-start"],
+  "left-end": ["left", "left-start", "right-end", "top-end", "bottom-end"],
+  right: ["right-end", "right-start", "left", "top", "bottom"],
+  "right-start": ["right", "right-end", "left-start", "top-start", "bottom-start"],
+  "right-end": ["right", "right-start", "left-end", "top-end", "bottom-end"]
 };
-var __freeze$f = Object.freeze;
-var __defProp$f = Object.defineProperty;
-var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
-  value: __freeze$f(raw || cooked.slice())
-}));
-var _a$f, _b$9, _c$4;
-const Root$b = styled.div(_a$f || (_a$f = __template$f(["\n  position: absolute;\n  pointer-events: none;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    display: block;\n    transform-origin: 7.5px 7.5px;\n  }\n\n  /* position: absolute;\n  width: 15px;\n  height: 15px;\n  fill: none;\n\n  :empty + & {\n    display: none;\n  }\n\n  & > svg {\n    &:not([hidden]) {\n      display: block;\n    }\n    transform-origin: 7.5px 7.5px;\n  } */\n\n  [data-placement^='top'] > & {\n    bottom: -27px;\n  }\n\n  [data-placement^='right'] > & {\n    left: -27px;\n\n    & > svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  [data-placement^='left'] > & {\n    right: -27px;\n\n    & > svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-placement^='bottom'] > & {\n    top: -27px;\n\n    & > svg {\n      transform: rotate(180deg);\n    }\n  }\n"])));
-const Border = styled.path(_b$9 || (_b$9 = __template$f(["\n  fill: var(--card-shadow-outline-color);\n"])));
-const Shape = styled.path(_c$4 || (_c$4 = __template$f(["\n  fill: var(--card-bg-color);\n"])));
-const TooltipArrow = forwardRef(function TooltipArrow2(props, ref) {
-  const {
-    ...restProps
-  } = props;
-  return /* @__PURE__ */jsx(Root$b, {
-    "data-ui": "Tooltip__arrow",
-    ...restProps,
-    ref,
-    children: /* @__PURE__ */jsxs("svg", {
-      width: "15",
-      height: "15",
-      viewBox: "0 0 15 15",
-      children: [/* @__PURE__ */jsx(Border, {
-        d: "M11.5266 1C11.032 1.32802 10.5837 1.73105 10.1995 2.20057L9.04792 3.6081C8.24771 4.58614 6.7523 4.58614 5.95209 3.6081L4.80047 2.20057C4.41632 1.73105 3.96796 1.32802 3.47341 1H0.156727C1.65639 1 3.07687 1.67313 4.02651 2.83381L5.17813 4.24134C6.37844 5.70839 8.62156 5.70839 9.82187 4.24134L10.9735 2.83381C11.9231 1.67313 13.3436 1 14.8433 1H11.5266Z"
-      }), /* @__PURE__ */jsx(Shape, {
-        d: "M0.156725 0C1.95632 0 3.66089 0.80776 4.80047 2.20057L5.95209 3.6081C6.75229 4.58614 8.24771 4.58614 9.04791 3.6081L10.1995 2.20057C11.3391 0.80776 13.0437 0 14.8433 0H15H0H0.156725Z"
-      })]
-    })
-  });
-});
 const key$4 = Symbol.for("@sanity/ui/context/tooltipDelayGroup");
 globalScope[key$4] = globalScope[key$4] || createContext(null);
 const TooltipDelayGroupContext = globalScope[key$4];
@@ -7122,10 +4853,6 @@ function TooltipDelayGroupProvider(props) {
   } = props;
   const [isGroupActive, setIsGroupActive] = useDelayedState(false);
   const [openTooltipId, setOpenTooltipId] = useDelayedState(null);
-  const isInsideContext = useTooltipDelayGroup();
-  if (isInsideContext) {
-    throw new Error("TooltipDelayGroupProvider cannot be nested inside another TooltipDelayGroupProvider");
-  }
   const openDelay = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.open) || 0;
   const closeDelay = typeof delay === "number" ? delay : (delay == null ? void 0 : delay.close) || 0;
   const value = useMemo(() => ({
@@ -7142,18 +4869,24 @@ function TooltipDelayGroupProvider(props) {
     children
   });
 }
-var __freeze$e = Object.freeze;
-var __defProp$e = Object.defineProperty;
-var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
-  value: __freeze$e(raw || cooked.slice())
+var __freeze$f = Object.freeze;
+var __defProp$f = Object.defineProperty;
+var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
+  value: __freeze$f(raw || cooked.slice())
 }));
-var _a$e;
-const Root$a = styled(Layer)(_a$e || (_a$e = __template$e(["\n  pointer-events: none;\n"])));
+var _a$f;
+const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref7 => {
+  let {
+    $maxWidth
+  } = _ref7;
+  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 {
+    arrow: arrowProp = false,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
     children: childProp,
     content,
@@ -7161,11 +4894,13 @@ 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,
+    radius = 2,
     scheme,
     shadow = 2,
     zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
     delay,
+    animate = false,
     ...restProps
   } = props;
   const fallbackPlacements = useArrayProp(fallbackPlacementsProp);
@@ -7173,45 +4908,36 @@ 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`
-        });
-      }
+      mainAxis: DEFAULT_TOOLTIP_DISTANCE
     }));
-
     ret.push(shift({
       boundary: boundaryElement || void 0,
       rootBoundary,
-      padding: 4
-    }));
-    ret.push(arrow({
-      element: arrowRef,
-      padding: 2
+      padding: DEFAULT_TOOLTIP_PADDING
     }));
+    if (arrowProp) {
+      ret.push(arrow({
+        element: arrowRef,
+        padding: DEFAULT_TOOLTIP_PADDING
+      }));
+    }
     return ret;
-  }, [boundaryElement, fallbackPlacements]);
+  }, [arrowProp, boundaryElement, fallbackPlacements]);
   const {
     floatingStyles,
     placement,
@@ -7223,19 +4949,14 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     placement: placementProp,
     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 arrowStyle = useMemo(() => {
-    const style = {
-      left: arrowX !== null ? arrowX : void 0,
-      top: arrowY !== null ? arrowY : void 0,
-      right: void 0,
-      bottom: void 0
-    };
-    if (staticSide) style[staticSide] = -15;
-    return style;
-  }, [arrowX, arrowY, staticSide]);
+  const arrowX = (_e = middlewareData.arrow) == null ? void 0 : _e.x;
+  const arrowY = (_f = middlewareData.arrow) == null ? void 0 : _f.y;
+  const arrowStyle = useMemo(() => ({
+    left: arrowX !== null ? arrowX : void 0,
+    top: arrowY !== null ? arrowY : void 0,
+    right: void 0,
+    bottom: void 0
+  }), [arrowX, arrowY]);
   const tooltipId = useId();
   const [isOpen, setIsOpen] = useDelayedState(false);
   const delayGroupContext = useTooltipDelayGroup();
@@ -7245,27 +4966,55 @@ 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;
+    if (!showTooltip) return;
     function handleWindowMouseMove(event) {
       if (!referenceElement) return;
       const isHoveringReference = referenceElement === event.target || event.target instanceof Node && referenceElement.contains(event.target);
@@ -7278,14 +5027,26 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     return () => {
       window.removeEventListener("mousemove", handleWindowMouseMove);
     };
-  }, [isOpen, referenceElement, handleIsOpenChange]);
+  }, [showTooltip, referenceElement, handleIsOpenChange]);
   useEffect(() => {
-    if (disabled) handleIsOpenChange(false);
-  }, [disabled, handleIsOpenChange]);
+    if (disabled && showTooltip) handleIsOpenChange(false);
+  }, [disabled, handleIsOpenChange, showTooltip]);
   useEffect(() => {
-    if (!content) handleIsOpenChange(false);
-  }, [content, handleIsOpenChange]);
+    if (!content && showTooltip) handleIsOpenChange(false);
+  }, [content, handleIsOpenChange, showTooltip]);
   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 +5071,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,38 +5084,72 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     ref: setFloating,
     style: floatingStyles,
     zOffset,
-    children: /* @__PURE__ */jsxs(Card, {
-      "data-ui": "Tooltip__card",
-      "data-placement": placement,
-      padding,
-      radius: 3,
-      scheme,
-      shadow,
-      children: [content, /* @__PURE__ */jsx(TooltipArrow, {
-        ref: setArrow,
-        style: arrowStyle
-      })]
+    $maxWidth: tooltipWidth,
+    children: /* @__PURE__ */jsx(ConditionalWrapper, {
+      condition: animate,
+      wrapper: children => /* @__PURE__ */jsx(motion.div, {
+        initial: {
+          opacity: 0.5,
+          scale: 0.95
+        },
+        animate: {
+          opacity: 1,
+          scale: 1
+        },
+        exit: {
+          opacity: 0,
+          scale: 0.95
+        },
+        transition: {
+          duration: 0.3,
+          type: "spring"
+        },
+        children
+      }),
+      children: /* @__PURE__ */jsxs(Card, {
+        "data-ui": "Tooltip__card",
+        "data-placement": placement,
+        padding,
+        radius,
+        scheme,
+        shadow,
+        children: [content, arrowProp && /* @__PURE__ */jsx(Arrow, {
+          ref: setArrow,
+          style: arrowStyle,
+          width: DEFAULT_TOOLTIP_ARROW_WIDTH,
+          height: DEFAULT_TOOLTIP_ARROW_HEIGHT,
+          radius: DEFAULT_TOOLTIP_ARROW_RADIUS
+        })]
+      })
     })
   });
   return /* @__PURE__ */jsxs(Fragment, {
-    children: [child, showTooltip && /* @__PURE__ */jsx(Fragment, {
-      children: portal ? /* @__PURE__ */jsx(Portal, {
-        __unstable_name: typeof portal === "string" ? portal : void 0,
+    children: [child, /* @__PURE__ */jsx(ConditionalWrapper, {
+      condition: animate,
+      wrapper: children => /* @__PURE__ */jsx(AnimatePresence, {
+        children
+      }),
+      children: showTooltip && /* @__PURE__ */jsx(ConditionalWrapper, {
+        condition: !!portalProp,
+        wrapper: children => /* @__PURE__ */jsx(Portal, {
+          __unstable_name: typeof portalProp === "string" ? portalProp : void 0,
+          children
+        }),
         children: root
-      }) : root
+      })
     })]
   });
 });
-var __freeze$d = Object.freeze;
-var __defProp$d = Object.defineProperty;
-var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
-  value: __freeze$d(raw || cooked.slice())
+var __freeze$e = Object.freeze;
+var __defProp$e = Object.defineProperty;
+var __template$e = (cooked, raw) => __freeze$e(__defProp$e(cooked, "raw", {
+  value: __freeze$e(raw || cooked.slice())
 }));
-var _a$d, _b$8, _c$3, _d$2;
-const Root$9 = styled.div(_a$d || (_a$d = __template$d(["\n  line-height: 0;\n"])));
-const ListBox = styled(Box)(_b$8 || (_b$8 = __template$d(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-const rotate = keyframes(_c$3 || (_c$3 = __template$d(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const AnimatedSpinnerIcon = styled(SpinnerIcon)(_d$2 || (_d$2 = __template$d(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
+var _a$e, _b$9, _c$3, _d$2;
+const Root$9 = styled.div(_a$e || (_a$e = __template$e(["\n  line-height: 0;\n"])));
+const ListBox = styled(Box)(_b$9 || (_b$9 = __template$e(["\n  & > ul {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+const rotate = keyframes(_c$3 || (_c$3 = __template$e(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
+const AnimatedSpinnerIcon = styled(SpinnerIcon)(_d$2 || (_d$2 = __template$e(["\n  animation: ", " 500ms linear infinite;\n"])), rotate);
 function AutocompleteOption(props) {
   const {
     children,
@@ -7473,7 +5270,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     padding: paddingProp = 3,
     popover = EMPTY_RECORD,
     prefix,
-    radius = 3,
+    radius = 2,
     readOnly,
     relatedElements,
     renderOption: renderOptionProp,
@@ -7497,10 +5294,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref8 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref8;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7876,14 +5673,14 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
   });
 });
 const Autocomplete = InnerAutocomplete;
-var __freeze$c = Object.freeze;
-var __defProp$c = Object.defineProperty;
-var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
-  value: __freeze$c(raw || cooked.slice())
+var __freeze$d = Object.freeze;
+var __defProp$d = Object.defineProperty;
+var __template$d = (cooked, raw) => __freeze$d(__defProp$d(cooked, "raw", {
+  value: __freeze$d(raw || cooked.slice())
 }));
-var _a$c, _b$7;
-const Root$8 = styled.ol(_a$c || (_a$c = __template$c(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
-const ExpandButton = styled(Button)(_b$7 || (_b$7 = __template$c(["\n  appearance: none;\n  margin: -4px;\n"])));
+var _a$d, _b$8;
+const Root$8 = styled.ol(_a$d || (_a$d = __template$d(["\n  margin: 0;\n  padding: 0;\n  display: flex;\n  list-style: none;\n  align-items: center;\n  white-space: nowrap;\n  line-height: 0;\n"])));
+const ExpandButton = styled(Button)(_b$8 || (_b$8 = __template$d(["\n  appearance: none;\n  margin: -4px;\n"])));
 const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   const {
     children,
@@ -7953,10 +5750,16 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
     }, itemIndex))
   });
 });
-function dialogStyle(_ref24) {
+var __freeze$c = Object.freeze;
+var __defProp$c = Object.defineProperty;
+var __template$c = (cooked, raw) => __freeze$c(__defProp$c(cooked, "raw", {
+  value: __freeze$c(raw || cooked.slice())
+}));
+var _a$c, _b$7;
+function dialogStyle(_ref9) {
   let {
     theme
-  } = _ref24;
+  } = _ref9;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -7985,6 +5788,10 @@ function responsiveDialogPositionStyle(props) {
     }
   }));
 }
+function animationDialogStyle(props) {
+  if (!props.animate) return css(_a$c || (_a$c = __template$c([""])));
+  return css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
+}
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
 globalScope[key$3] = globalScope[key$3] || createContext({
   version: 0
@@ -8003,13 +5810,13 @@ function isTargetWithinScope(boundaryElement, portalElement, target) {
   if (!boundaryElement || !portalElement) return true;
   return containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
 }
-const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle);
+const Root$7 = styled(Layer)(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle);
 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"])));
 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"])));
 const DialogCard = forwardRef(function DialogCard2(props, ref) {
   var _a2;
   const {
@@ -8090,23 +5897,26 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
         direction: "column",
         children: [showHeader && /* @__PURE__ */jsx(DialogHeader, {
           children: /* @__PURE__ */jsxs(Flex, {
+            align: "center",
+            padding: 3,
             children: [/* @__PURE__ */jsx(Box, {
               flex: 1,
-              padding: 4,
+              padding: 2,
               children: header && /* @__PURE__ */jsx(Text, {
                 id: labelId,
-                weight: "semibold",
+                size: 1,
+                weight: "medium",
                 children: header
               })
             }), showCloseButton && /* @__PURE__ */jsx(Box, {
-              padding: 2,
+              flex: "none",
               children: /* @__PURE__ */jsx(Button, {
                 "aria-label": "Close dialog",
                 disabled: !onClose,
                 icon: CloseIcon,
                 mode: "bleed",
                 onClick: onClose,
-                padding: 3
+                padding: 2
               })
             })]
           })
@@ -8140,12 +5950,13 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 4,
+    padding: paddingProp = 3,
     portal: portalProp,
     position: positionProp = dialog.position || "fixed",
     scheme,
     width: widthProp = 0,
     zOffset: zOffsetProp = dialog.zOffset || ((_a2 = theme.sanity.layer) == null ? void 0 : _a2.dialog.zOffset),
+    animate = false,
     ...restProps
   } = props;
   const portal = usePortal();
@@ -8211,6 +6022,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
+      animate,
       children: [/* @__PURE__ */jsx("div", {
         ref: preDivRef,
         tabIndex: 0
@@ -8734,7 +6546,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 +6560,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 +6577,7 @@ function MenuGroup(props) {
   const {
     as = "button",
     children,
-    fontSize,
+    fontSize = 1,
     icon,
     onClick,
     padding = 3,
@@ -8777,6 +6589,9 @@ function MenuGroup(props) {
     ...restProps
   } = props;
   const menu = useMenu();
+  const {
+    scheme
+  } = useRootTheme();
   const {
     activeElement,
     mount,
@@ -8865,34 +6680,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 +6714,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     as = "button",
     children,
     disabled,
-    fontSize = 2,
+    fontSize = 1,
     hotkeys,
     icon,
     iconRight,
@@ -8922,6 +6734,9 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     tone = "default",
     ...restProps
   } = props;
+  const {
+    scheme
+  } = useRootTheme();
   const menu = useMenu();
   const {
     activeElement,
@@ -8962,7 +6777,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 +6787,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 +6829,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"])), _ref10 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref10;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref11 => {
   let {
     $animated
-  } = _ref26;
+  } = _ref11;
   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 +6868,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref12 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref12;
   const {
     media
   } = theme.sanity;
@@ -9180,7 +6991,6 @@ const Tab = forwardRef(function Tab2(props, forwardedRef) {
     onBlur: handleBlur,
     onFocus: handleFocus,
     padding,
-    radius: "full",
     ref: setRef,
     role: "tab",
     selected,
@@ -9272,6 +7082,7 @@ function Toast(props) {
     closable,
     description,
     onClose,
+    radius = 3,
     title,
     status,
     ...restProps
@@ -9283,7 +7094,7 @@ function Toast(props) {
     role,
     ...restProps,
     marginTop: 3,
-    radius: 2,
+    radius,
     shadow: 2,
     tone: cardTone,
     children: /* @__PURE__ */jsxs(Flex, {
@@ -9294,7 +7105,8 @@ function Toast(props) {
         children: /* @__PURE__ */jsxs(Stack, {
           space: 3,
           children: [title && /* @__PURE__ */jsx(Text, {
-            weight: "semibold",
+            size: 1,
+            weight: "medium",
             children: title
           }), description && /* @__PURE__ */jsx(Text, {
             muted: true,
@@ -9410,12 +7222,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref13 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref13;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -9706,7 +7518,7 @@ var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", {
 }));
 var _a$1, _b, _c;
 function treeItemRootStyle() {
-  return css(_a$1 || (_a$1 = __template$1(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
+  return css(_a$1 || (_a$1 = __template$1(["\n    &[role='none'] > [role='treeitem'] {\n      outline: none;\n      cursor: default;\n      border-radius: 3px;\n\n      background-color: var(--card-bg-color);\n      color: var(--treeitem-fg-color);\n\n      &:focus {\n        position: relative;\n      }\n    }\n\n    &[role='treeitem'] {\n      outline: none;\n\n      & > div {\n        cursor: default;\n        border-radius: 3px;\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &:focus > div {\n        position: relative;\n      }\n    }\n  "])));
 }
 function treeItemRootColorStyle(props) {
   const {
@@ -9719,7 +7531,7 @@ function treeItemRootColorStyle(props) {
     selectable
   } = theme.sanity.color;
   const tone = selectable ? selectable[$tone] || selectable.default : muted[$tone] || muted.default;
-  return css(_b || (_b = __template$1(['\n    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */\n    &[role=\'none\'] {\n      & > [role=\'treeitem\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--treeitem-fg-color);\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", '\n        }\n      }\n    }\n\n    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */\n    &[role=\'treeitem\'] {\n      & > [data-ui=\'TreeItem__box\'] {\n        ', "\n\n        background-color: var(--card-bg-color);\n        color: var(--card-fg-color);\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
+  return css(_b || (_b = __template$1(['\n    /* <div role="none"><a data-ui="TreeItem__box" role="treeitem" tabIndex="0"></div> */\n    &[role=\'none\'] {\n      & > [role=\'treeitem\'] {\n        ', "\n      }\n\n      &[data-selected] > [role='treeitem'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]) > [role='treeitem']:not(:focus):hover {\n          ", "\n        }\n\n        & > [role='treeitem']:focus {\n          ", '\n        }\n      }\n    }\n\n    /* <div role="treeitem" tabIndex="0"><div data-ui="TreeItem__box"></div> */\n    &[role=\'treeitem\'] {\n      & > [data-ui=\'TreeItem__box\'] {\n        ', "\n      }\n\n      &[data-selected] > [data-ui='TreeItem__box'] {\n        ", "\n      }\n\n      @media (hover: hover) {\n        &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {\n          ", "\n        }\n\n        &:focus > [data-ui='TreeItem__box'] {\n          ", "\n        }\n      }\n    }\n  "])), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected), _colorVarsStyle(base, tone.enabled), _colorVarsStyle(base, tone.pressed), _colorVarsStyle(base, tone.hovered), _colorVarsStyle(base, tone.selected));
 }
 function treeItemBoxStyle(props) {
   const {
@@ -9771,14 +7583,14 @@ const TreeItem = memo(function TreeItem2(props) {
   const {
     children,
     expanded: expandedProp = false,
-    fontSize,
+    fontSize = 1,
     href,
     icon,
     id: idProp,
     linkAs,
     muted,
     onClick,
-    padding = 3,
+    padding = 2,
     selected = false,
     space = 2,
     text,
@@ -9915,5 +7727,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 { Arrow, 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, focusFirstDescendant, focusLastDescendant, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, useArrayProp, useBoundaryElement, useClickOutside, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map