@sanity/ui 2.0.0-alpha.34 → 2.0.0-alpha.36

package/dist/index.esm.js

@@ -1,4 +1,5 @@
-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 { getTheme_v2, getScopedTheme } from '@sanity/ui/theme';
+export { COLOR_CONFIG_BLEND_KEYS, COLOR_CONFIG_CARD_KEYS, COLOR_CONFIG_CARD_TONES, COLOR_CONFIG_STATE_KEYS, COLOR_CONFIG_STATE_TONES, THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, 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, defaultTheme as 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';
@@ -41,23 +42,26 @@ function _getResponsiveSpace(theme, props) {
   if (spaceIndexes.length === 0) {
     return null;
   }
-  return _responsive(theme.sanity.media, spaceIndexes, spaceIndex => _fillCSSObject(props, rem(theme.sanity.space[spaceIndex])));
+  const {
+    media,
+    space
+  } = getTheme_v2(theme);
+  return _responsive(media, spaceIndexes, spaceIndex => _fillCSSObject(props, rem(space[spaceIndex])));
 }
 function responsiveFont(fontKey, props) {
   const {
     $size,
-    $weight,
-    theme
+    $weight
   } = props;
   const {
-    fonts,
+    font,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   const {
     family,
     sizes,
     weights
-  } = fonts[fontKey];
+  } = font[fontKey];
   const fontWeight = $weight && weights[$weight] || weights.regular;
   const defaultSize = sizes[2];
   const base = {
@@ -144,9 +148,9 @@ function responsiveLabelFont(props) {
 }
 function responsiveTextAlignStyle(props) {
   const {
-    theme
-  } = props;
-  return _responsive(theme.sanity.media, props.$align, textAlign => {
+    media
+  } = getTheme_v2(props.theme);
+  return _responsive(media, props.$align, textAlign => {
     return {
       textAlign
     };
@@ -825,17 +829,6 @@ function useGlobalKeyDown(onKeyDown) {
     return () => removeEventListener("keydown", onKeyDown);
   }, [onKeyDown]);
 }
-const DEFAULT_THEME_LAYER = {
-  dialog: {
-    zOffset: 600
-  },
-  popover: {
-    zOffset: 400
-  },
-  tooltip: {
-    zOffset: 200
-  }
-};
 function getGlobalScope() {
   if (typeof globalThis !== "undefined") return globalThis;
   if (typeof window !== "undefined") return window;
@@ -852,57 +845,40 @@ function ThemeProvider(props) {
   const {
     children,
     scheme = (parentTheme == null ? void 0 : parentTheme.scheme) || "light",
-    theme: themeProp = (parentTheme == null ? void 0 : parentTheme.theme) || null,
+    theme: rootTheme = (parentTheme == null ? void 0 : parentTheme.theme) || null,
     tone = (parentTheme == null ? void 0 : parentTheme.tone) || "default"
   } = props;
-  const theme = useMemo(() => {
-    if (!themeProp) return null;
-    const {
-      color: rootColor,
-      layer: rootLayer,
-      ...restTheme
-    } = themeProp;
-    const colorScheme = rootColor[scheme] || rootColor.light;
-    const color = colorScheme[tone] || colorScheme.default;
-    const layer = rootLayer || DEFAULT_THEME_LAYER;
+  const themeContext = useMemo(() => {
+    if (!rootTheme) return null;
     return {
-      sanity: {
-        ...restTheme,
-        color,
-        layer
-      }
+      version: 0,
+      theme: rootTheme,
+      scheme,
+      tone
     };
-  }, [scheme, themeProp, tone]);
-  const value = useMemo(() => themeProp && {
-    version: 0,
-    theme: themeProp,
-    scheme,
-    tone
-  }, [themeProp, scheme, tone]);
+  }, [rootTheme, scheme, tone]);
+  const theme = useMemo(() => {
+    if (!rootTheme) return null;
+    return getScopedTheme(rootTheme, scheme, tone);
+  }, [scheme, rootTheme, tone]);
   if (!theme) {
     return /* @__PURE__ */jsx("pre", {
       children: 'ThemeProvider: no "theme" property provided'
     });
   }
   return /* @__PURE__ */jsx(ThemeContext.Provider, {
-    value,
+    value: themeContext,
     children: /* @__PURE__ */jsx(ThemeProvider$1, {
       theme,
       children
     })
   });
 }
-function isRecord(value) {
-  return Boolean(value && typeof value === "object" && !Array.isArray(value));
-}
 function useRootTheme() {
   const value = useContext(ThemeContext);
   if (!value) {
     throw new Error("useRootTheme(): missing context value");
   }
-  if (!isRecord(value) || value.version !== 0) {
-    throw new Error("useRootTheme(): the context value is not compatible");
-  }
   return value;
 }
 function ThemeColorProvider(props) {
@@ -922,6 +898,9 @@ function ThemeColorProvider(props) {
 function useTheme() {
   return useTheme$1();
 }
+function useTheme_v2() {
+  return getTheme_v2(useTheme$1());
+}
 const MEDIA_STORE_CACHE = /* @__PURE__ */new WeakMap();
 function _getMediaQuery(media, index) {
   if (index === 0) {
@@ -983,10 +962,9 @@ function getServerSnapshot$2() {
   return 0;
 }
 function useMediaIndex() {
-  const theme = useTheme();
   const {
     media
-  } = theme.sanity;
+  } = useTheme_v2();
   let store = MEDIA_STORE_CACHE.get(media);
   if (!store) {
     store = _createMediaStore(media);
@@ -1061,13 +1039,10 @@ function responsiveBorderStyle() {
 }
 function border(props) {
   var _a, _b;
-  const {
-    theme
-  } = props;
   const {
     card,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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 ? {
     "&&": {
@@ -1081,13 +1056,10 @@ function border(props) {
 }
 function borderTop(props) {
   var _a, _b;
-  const {
-    theme
-  } = props;
   const {
     card,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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 ? {
     "&&": {
@@ -1101,13 +1073,10 @@ function borderTop(props) {
 }
 function borderRight(props) {
   var _a, _b;
-  const {
-    theme
-  } = props;
   const {
     card,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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 ? {
     "&&": {
@@ -1121,13 +1090,10 @@ function borderRight(props) {
 }
 function borderBottom(props) {
   var _a, _b;
-  const {
-    theme
-  } = props;
   const {
     card,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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 ? {
     "&&": {
@@ -1141,13 +1107,10 @@ function borderBottom(props) {
 }
 function borderLeft(props) {
   var _a, _b;
-  const {
-    theme
-  } = props;
   const {
     card,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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 ? {
     "&&": {
@@ -1179,12 +1142,9 @@ function responsiveBoxStyle() {
   return [responsiveBoxSizingStyle, responsiveBoxHeightStyle, responsiveBoxOverflowStyle, responsiveBoxDisplayStyle];
 }
 function responsiveBoxDisplayStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$display, display => ({
     "&:not([hidden])": {
       display
@@ -1192,34 +1152,25 @@ function responsiveBoxDisplayStyle(props) {
   }));
 }
 function responsiveBoxSizingStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$sizing, sizing => ({
     boxSizing: BOX_SIZING[sizing]
   }));
 }
 function responsiveBoxHeightStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$height, height => ({
     height: BOX_HEIGHT[height]
   }));
 }
 function responsiveBoxOverflowStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$overflow, overflow => ({
     overflow
   }));
@@ -1233,12 +1184,9 @@ function responsiveFlexStyle() {
   return [BASE_STYLE$3, responsiveFlexAlignStyle, responsiveFlexGapStyle, responsiveFlexWrapStyle, responsiveFlexJustifyStyle, responsiveFlexDirectionStyle];
 }
 function responsiveFlexAlignStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$align, align => {
     return {
       alignItems: align
@@ -1246,24 +1194,18 @@ function responsiveFlexAlignStyle(props) {
   });
 }
 function responsiveFlexGapStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$gap, gap => ({
     gap: gap ? rem(space[gap]) : void 0
   }));
 }
 function responsiveFlexWrapStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$wrap, wrap => {
     return {
       flexWrap: wrap
@@ -1271,12 +1213,9 @@ function responsiveFlexWrapStyle(props) {
   });
 }
 function responsiveFlexJustifyStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$justify, justify => {
     return {
       justifyContent: justify
@@ -1284,12 +1223,9 @@ function responsiveFlexJustifyStyle(props) {
   });
 }
 function responsiveFlexDirectionStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$direction, direction => {
     return {
       flexDirection: direction
@@ -1304,12 +1240,9 @@ function flexItemStyle() {
   return [BASE_STYLE$2, responsiveFlexItemStyle];
 }
 function responsiveFlexItemStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   if (!props.$flex) return EMPTY_ARRAY;
   return _responsive(media, props.$flex, flex => ({
     flex
@@ -1353,92 +1286,68 @@ function responsiveGridStyle() {
   return [GRID_CSS, responsiveGridAutoFlowStyle, responsiveGridAutoRowsStyle, responsiveGridAutoColsStyle, responsiveGridColumnsStyle, responsiveGridRowsStyle, responsiveGridGapStyle, responsiveGridGapXStyle, responsiveGridGapYStyle];
 }
 function responsiveGridAutoFlowStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$autoFlow, autoFlow => ({
     gridAutoFlow: autoFlow
   }));
 }
 function responsiveGridAutoRowsStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$autoRows, autoRows => ({
     gridAutoRows: autoRows && GRID_AUTO_ROWS[autoRows]
   }));
 }
 function responsiveGridAutoColsStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$autoCols, autoCols => ({
     gridAutoColumns: autoCols && GRID_AUTO_COLUMS[autoCols]
   }));
 }
 function responsiveGridColumnsStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$columns, columns => ({
     gridTemplateColumns: columns && "repeat(".concat(columns, ",minmax(0,1fr));")
   }));
 }
 function responsiveGridRowsStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$rows, rows => ({
     gridTemplateRows: rows && "repeat(".concat(rows, ",minmax(0,1fr));")
   }));
 }
 function responsiveGridGapStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$gap, gap => ({
     gridGap: gap ? rem(space[gap]) : void 0
   }));
 }
 function responsiveGridGapXStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$gapX, gapX => ({
     columnGap: gapX ? rem(space[gapX]) : void 0
   }));
 }
 function responsiveGridGapYStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$gapY, gapY => ({
     rowGap: gapY ? rem(space[gapY]) : void 0
   }));
@@ -1455,12 +1364,9 @@ const GRID_ITEM_COLUMN = {
   full: "1 / -1"
 };
 function responsiveGridItemRowStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$row, row => {
     if (typeof row === "number") {
       return {
@@ -1473,34 +1379,25 @@ function responsiveGridItemRowStyle(props) {
   });
 }
 function responsiveGridItemRowStartStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$rowStart, rowStart => ({
     gridRowStart: rowStart
   }));
 }
 function responsiveGridItemRowEndStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$rowEnd, rowEnd => ({
     gridRowEnd: rowEnd
   }));
 }
 function responsiveGridItemColumnStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$column, column => {
     if (typeof column === "number") {
       return {
@@ -1513,23 +1410,17 @@ function responsiveGridItemColumnStyle(props) {
   });
 }
 function responsiveGridItemColumnStartStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$columnStart, columnStart => ({
     gridColumnStart: columnStart
   }));
 }
 function responsiveGridItemColumnEndStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$columnEnd, columnEnd => ({
     gridColumnEnd: columnEnd
   }));
@@ -1540,14 +1431,13 @@ function responsiveInputPaddingStyle(props) {
     $iconLeft,
     $iconRight,
     $padding,
-    $space,
-    theme
+    $space
   } = props;
   const {
-    fonts,
+    font,
     media,
-    space: spaceScale
-  } = theme.sanity;
+    space
+  } = getTheme_v2(props.theme);
   const len = Math.max($padding.length, $space.length, $fontSize.length);
   const _padding = [];
   const _space = [];
@@ -1558,10 +1448,10 @@ function responsiveInputPaddingStyle(props) {
     _space[i] = $space[i] === void 0 ? _space[i - 1] : $space[i];
   }
   return _responsive(media, _padding, (_, i) => {
-    const size = fonts.text.sizes[_fontSize[i]] || fonts.text.sizes[2];
+    const size = font.text.sizes[_fontSize[i]] || font.text.sizes[2];
     const emSize = size.lineHeight - size.ascenderHeight - size.descenderHeight;
-    const p = spaceScale[_padding[i]];
-    const s = spaceScale[_space[i]];
+    const p = space[_padding[i]];
+    const s = space[_space[i]];
     const styles = {
       paddingTop: rem(p - size.ascenderHeight),
       paddingRight: rem(p),
@@ -1591,25 +1481,23 @@ function textInputRootStyle() {
 }
 function textInputBaseStyle(props) {
   const {
-    theme,
     $scheme,
     $tone,
     $weight
   } = props;
-  const font = theme.sanity.fonts.text;
-  const color = theme.sanity.color.input;
-  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);
+  const {
+    color,
+    font
+  } = getTheme_v2(props.theme);
+  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.text.family, $weight && font.text.weights[$weight] || font.text.weights.regular, $scheme, $tone, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.enabled.fg, color.input.default.enabled.placeholder, color.input.default.disabled.fg, color.input.default.disabled.placeholder, color.input.invalid.enabled.fg, color.input.invalid.enabled.placeholder, color.input.default.readOnly.fg, color.input.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
-    theme
-  } = props;
-  const {
-    fonts,
+    font,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$fontSize, sizeIndex => {
-    const size = fonts.text.sizes[sizeIndex] || fonts.text.sizes[2];
+    const size = font.text.sizes[sizeIndex] || font.text.sizes[2];
     return {
       fontSize: rem(size.fontSize),
       lineHeight: size.lineHeight / size.fontSize
@@ -1622,35 +1510,31 @@ function textInputRepresentationStyle(props) {
     $hasSuffix,
     $scheme,
     $tone,
-    $unstableDisableFocusRing,
-    theme
+    $unstableDisableFocusRing
   } = props;
   const {
+    color,
     input
-  } = theme.sanity;
-  const {
-    focusRing
-  } = input.text;
-  const color = theme.sanity.color.input;
-  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,
+  } = getTheme_v2(props.theme);
+  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.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+    color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.invalid.enabled.bg, color.invalid.enabled.fg, focusRingBorderStyle({
-    color: color.invalid.enabled.border,
+  }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
+    color: color.input.invalid.enabled.border,
     width: input.border.width
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     border: {
-      color: color.default.enabled.border,
+      color: color.input.default.enabled.border,
       width: input.border.width
     },
-    focusRing
+    focusRing: input.text.focusRing
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
-    focusRing
-  }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
-    color: color.default.disabled.border,
+    focusRing: input.text.focusRing
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+    color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.default.readOnly.bg, color.default.readOnly.fg, color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
-    color: color.default.hovered.border,
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+    color: color.input.default.hovered.border,
     width: input.border.width
   }));
 }
@@ -1667,13 +1551,10 @@ function responsivePaddingStyle(props) {
   return [_getResponsiveSpace(theme, ["padding"], props.$padding), _getResponsiveSpace(theme, ["paddingLeft", "paddingRight"], props.$paddingX), _getResponsiveSpace(theme, ["paddingTop", "paddingBottom"], props.$paddingY), _getResponsiveSpace(theme, ["paddingTop"], props.$paddingTop), _getResponsiveSpace(theme, ["paddingRight"], props.$paddingRight), _getResponsiveSpace(theme, ["paddingBottom"], props.$paddingBottom), _getResponsiveSpace(theme, ["paddingLeft"], props.$paddingLeft)].filter(Boolean);
 }
 function responsiveRadiusStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     radius
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$radius, value => {
     let borderRadius = 0;
     if (typeof value === "number") {
@@ -1702,15 +1583,12 @@ function shadowStyle(shadow) {
   };
 }
 function responsiveShadowStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     card,
     media,
-    shadows
-  } = theme.sanity;
-  return _responsive(media, props.$shadow, shadow => shadowStyle(shadows[shadow], card.shadow.outline));
+    shadow
+  } = getTheme_v2(props.theme);
+  return _responsive(media, props.$shadow, index => shadowStyle(shadow[index], card.shadow.outline));
 }
 var __freeze$C = Object.freeze;
 var __defProp$D = Object.defineProperty;
@@ -1721,13 +1599,12 @@ var _a$C, _b$m, _c$b;
 function labelBaseStyle(props) {
   const {
     $accent,
-    $muted,
-    theme
+    $muted
   } = props;
   const {
-    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);
+    font
+  } = getTheme_v2(props.theme);
+  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    "]))), font.code.family);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -1817,17 +1694,15 @@ function avatarArrowStyle() {
   };
 }
 function avatarRootStyle(props) {
-  var _a, _b, _c, _d;
   const {
-    $color,
-    theme
+    $color
   } = props;
   const {
-    focusRing
-  } = theme.sanity.avatar;
+    avatar
+  } = getTheme_v2(props.theme);
   return {
-    "--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)",
+    "--avatar-bg-color": "var(--card-avatar-".concat($color, "-bg-color)"),
+    "--avatar-fg-color": "var(--card-avatar-".concat($color, "-fg-color)"),
     backgroundColor: "var(--avatar-bg-color)",
     position: "relative",
     boxSizing: "border-box",
@@ -1855,7 +1730,7 @@ function avatarRootStyle(props) {
       // @ts-expect-error -- TODO wait for CSSObject types to be fixed in `styled-components` itself
       "&:focus": {
         boxShadow: focusRingStyle({
-          focusRing
+          focusRing: avatar.focusRing
         })
       },
       "&:focus:not(:focus-visible)": {
@@ -1865,13 +1740,10 @@ function avatarRootStyle(props) {
   };
 }
 function responsiveAvatarSizeStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     avatar,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size] || avatar.sizes[0];
     return {
@@ -1948,8 +1820,10 @@ const Avatar = forwardRef(function Avatar2(props, ref) {
   } = props;
   const as = ReactIs.isValidElementType(asProp) ? asProp : "div";
   const size = useArrayProp(sizeProp);
-  const theme = useTheme();
-  const avatarSize = theme.sanity.avatar.sizes[size[0]] || theme.sanity.avatar.sizes[0];
+  const {
+    avatar
+  } = useTheme_v2();
+  const avatarSize = avatar.sizes[size[0]] || avatar.sizes[0];
   const _sizeRem = avatarSize.size;
   const _radius = _sizeRem / 2;
   const elementId = useId();
@@ -2048,13 +1922,12 @@ var _a$A, _b$l, _c$a;
 function textBaseStyle(props) {
   const {
     $accent,
-    $muted,
-    theme
+    $muted
   } = 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);
+    font
+  } = getTheme_v2(props.theme);
+  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      & path {\n        vector-effect: non-scaling-stroke !important;\n      }\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    "]))), font.code.family, font.text.weights.bold);
 }
 var __freeze$z = Object.freeze;
 var __defProp$A = Object.defineProperty;
@@ -2102,13 +1975,10 @@ var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
 }));
 var _a$y;
 function _responsiveAvatarCounterSizeStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     avatar,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size];
     if (!avatarSize) return EMPTY_RECORD;
@@ -2121,9 +1991,9 @@ function _responsiveAvatarCounterSizeStyle(props) {
 }
 function _avatarCounterBaseStyle(props) {
   const {
-    theme
-  } = props;
-  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]));
+    space
+  } = getTheme_v2(props.theme);
+  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(space[2]));
 }
 const Root$A = styled.div(_responsiveAvatarCounterSizeStyle, _avatarCounterBaseStyle);
 const AvatarCounter = forwardRef(function AvatarCounter2(props, ref) {
@@ -2160,13 +2030,10 @@ function avatarStackStyle() {
   return BASE_STYLES;
 }
 function responsiveAvatarStackSizeStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     avatar,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$size, size => {
     const avatarSize = avatar.sizes[size];
     if (!avatarSize) return EMPTY_RECORD;
@@ -2279,19 +2146,17 @@ const Box = forwardRef(function Box2(props, ref) {
   });
 });
 function badgeStyle(props) {
-  var _a;
   const {
-    $tone,
-    theme
+    $tone
   } = props;
-  const color = ((_a = theme.sanity.color.badge) == null ? void 0 : _a[$tone]) || theme.sanity.color.muted[$tone].enabled;
   return {
-    "--card-bg-color": color.bg,
-    "--card-fg-color": color.fg,
+    "--card-bg-color": "var(--card-badge-".concat($tone, "-bg-color)"),
+    "--card-fg-color": "var(--card-badge-".concat($tone, "-fg-color)"),
     backgroundColor: "var(--card-bg-color)",
     cursor: "default",
     "&:not([hidden])": {
-      display: "inline-block"
+      display: "inline-block",
+      verticalAlign: "top"
     }
   };
 }
@@ -2303,7 +2168,7 @@ const Badge = forwardRef(function Badge2(props, ref) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     mode: _deprecated_mode,
     padding = 1,
-    radius = 2,
+    radius = "full",
     tone = "default",
     ...restProps
   } = props;
@@ -2364,33 +2229,73 @@ const Spinner = forwardRef(function Spinner2(props, ref) {
     children: /* @__PURE__ */jsx(SpinnerIcon, {})
   });
 });
-function _colorVarsStyle(base, color) {
+function _cardColorStyle(base, color) {
   let checkered = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var _a, _b, _c, _d, _e, _f, _g, _h;
   return {
-    // Base
-    // @todo: rename to "--base-"?
+    // from base
+    "--card-focus-ring-color": base.focusRing,
     "--card-shadow-outline-color": base.shadow.outline,
     "--card-shadow-umbra-color": base.shadow.umbra,
     "--card-shadow-penumbra-color": base.shadow.penumbra,
     "--card-shadow-ambient-color": base.shadow.ambient,
-    "--card-focus-ring-color": base.focusRing,
-    "--card-icon-color": color.icon,
-    // Card
+    // from state
+    "--card-accent-fg-color": color.accent.fg,
+    "--card-avatar-gray-bg-color": color.avatar.gray.bg,
+    "--card-avatar-gray-fg-color": color.avatar.gray.fg,
+    "--card-avatar-blue-bg-color": color.avatar.blue.bg,
+    "--card-avatar-blue-fg-color": color.avatar.blue.fg,
+    "--card-avatar-purple-bg-color": color.avatar.purple.bg,
+    "--card-avatar-purple-fg-color": color.avatar.purple.fg,
+    "--card-avatar-magenta-bg-color": color.avatar.magenta.bg,
+    "--card-avatar-magenta-fg-color": color.avatar.magenta.fg,
+    "--card-avatar-red-bg-color": color.avatar.red.bg,
+    "--card-avatar-red-fg-color": color.avatar.red.fg,
+    "--card-avatar-orange-bg-color": color.avatar.orange.bg,
+    "--card-avatar-orange-fg-color": color.avatar.orange.fg,
+    "--card-avatar-yellow-bg-color": color.avatar.yellow.bg,
+    "--card-avatar-yellow-fg-color": color.avatar.yellow.fg,
+    "--card-avatar-green-bg-color": color.avatar.green.bg,
+    "--card-avatar-green-fg-color": color.avatar.green.fg,
+    "--card-avatar-cyan-bg-color": color.avatar.cyan.bg,
+    "--card-avatar-cyan-fg-color": color.avatar.cyan.fg,
     "--card-bg-color": color.bg,
-    "--card-bg2-color": color.bg2,
-    "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.bg2 || color.bg, " 0% 50%)") : void 0,
-    "--card-fg-color": color.fg,
+    "--card-bg-image": checkered ? "repeating-conic-gradient(".concat(color.bg, " 0% 25%, ").concat(color.muted.bg, " 0% 50%)") : void 0,
     "--card-border-color": color.border,
-    "--card-muted-fg-color": (_a = color.muted) == null ? void 0 : _a.fg,
-    "--card-accent-fg-color": (_b = color.accent) == null ? void 0 : _b.fg,
-    "--card-link-fg-color": (_c = color.link) == null ? void 0 : _c.fg,
-    "--card-code-bg-color": (_d = color.code) == null ? void 0 : _d.bg,
-    "--card-code-fg-color": (_e = color.code) == null ? void 0 : _e.fg,
-    "--card-skeleton-color-from": (_f = color.skeleton) == null ? void 0 : _f.from,
-    "--card-skeleton-color-to": (_g = color.skeleton) == null ? void 0 : _g.to,
-    // @todo: deprecate
-    "--card-link-color": (_h = color.link) == null ? void 0 : _h.fg,
+    "--card-badge-default-bg-color": color.badge.default.bg,
+    "--card-badge-default-dot-color": color.badge.default.dot,
+    "--card-badge-default-fg-color": color.badge.default.fg,
+    "--card-badge-default-icon-color": color.badge.default.icon,
+    "--card-badge-primary-bg-color": color.badge.primary.bg,
+    "--card-badge-primary-dot-color": color.badge.primary.dot,
+    "--card-badge-primary-fg-color": color.badge.primary.fg,
+    "--card-badge-primary-icon-color": color.badge.primary.icon,
+    "--card-badge-positive-bg-color": color.badge.positive.bg,
+    "--card-badge-positive-dot-color": color.badge.positive.dot,
+    "--card-badge-positive-fg-color": color.badge.positive.fg,
+    "--card-badge-positive-icon-color": color.badge.positive.icon,
+    "--card-badge-caution-bg-color": color.badge.caution.bg,
+    "--card-badge-caution-dot-color": color.badge.caution.dot,
+    "--card-badge-caution-fg-color": color.badge.caution.fg,
+    "--card-badge-caution-icon-color": color.badge.caution.icon,
+    "--card-badge-critical-bg-color": color.badge.critical.bg,
+    "--card-badge-critical-dot-color": color.badge.critical.dot,
+    "--card-badge-critical-fg-color": color.badge.critical.fg,
+    "--card-badge-critical-icon-color": color.badge.critical.icon,
+    "--card-code-bg-color": color.code.bg,
+    "--card-code-fg-color": color.code.fg,
+    "--card-fg-color": color.fg,
+    "--card-icon-color": color.icon,
+    "--card-kbd-bg-color": color.kbd.bg,
+    "--card-kbd-border-color": color.kbd.border,
+    "--card-kbd-fg-color": color.kbd.fg,
+    "--card-link-fg-color": color.link.fg,
+    "--card-muted-bg-color": color.muted.bg,
+    "--card-muted-fg-color": color.muted.fg,
+    "--card-skeleton-color-from": color.skeleton.from,
+    "--card-skeleton-color-to": color.skeleton.to,
+    // deprecated variables (kept for legacy)
+    "--card-bg2-color": color.muted.bg,
+    "--card-link-color": color.link.fg,
     "--card-hairline-soft-color": color.border,
     "--card-hairline-hard-color": color.border
   };
@@ -2401,15 +2306,14 @@ var __template$v = (cooked, raw) => __freeze$v(__defProp$w(cooked, "raw", {
   value: __freeze$v(raw || cooked.slice())
 }));
 var _a$v, _b$j;
-function buttonBaseStyles(_ref2) {
-  let {
-    $width,
-    theme
-  } = _ref2;
+function buttonBaseStyles(props) {
+  const {
+    $width
+  } = props;
   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    "]))));
+    style
+  } = getTheme_v2(props.theme);
+  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  "])), style == null ? void 0 : style.button, $width === "fill" && css(_a$v || (_a$v = __template$v(["\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 function combineBoxShadow() {
   for (var _len = arguments.length, boxShadows = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -2418,49 +2322,51 @@ function combineBoxShadow() {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2, _b2;
+  var _a2;
   const {
-    $mode,
-    theme
+    $mode
   } = props;
-  const buttonTheme = theme.sanity.button;
+  const {
+    button,
+    color: baseColor,
+    style
+  } = getTheme_v2(props.theme);
   const shadow = props.$mode === "ghost";
-  const base = theme.sanity.color.base;
-  const mode = theme.sanity.color.button[$mode] || theme.sanity.color.button.default;
+  const mode = baseColor.button[$mode] || baseColor.button.default;
   const color = mode[props.$tone] || mode.default;
   const border = {
-    width: buttonTheme.border.width,
+    width: button.border.width,
     color: "var(--card-border-color)"
   };
   const defaultBoxShadow = void 0;
-  return [_colorVarsStyle(base, color.enabled), {
+  return [_cardColorStyle(baseColor, color.enabled), {
     backgroundColor: "var(--card-bg-color)",
     color: "var(--card-fg-color)",
     boxShadow: focusRingBorderStyle(border),
-    '&:disabled, &[data-disabled="true"]': _colorVarsStyle(base, color.disabled),
+    '&:disabled, &[data-disabled="true"]': _cardColorStyle(baseColor, color.disabled),
     "&:not([data-disabled='true'])": {
       boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0),
       "&:focus": {
         boxShadow: focusRingStyle({
-          base,
+          base: baseColor,
           border: {
             width: 2,
-            color: base.bg
+            color: baseColor.bg
           },
-          focusRing: buttonTheme.focusRing
+          focusRing: button.focusRing
         })
       },
       "&:focus:not(:focus-visible)": {
         boxShadow: combineBoxShadow(focusRingBorderStyle(border), shadow ? defaultBoxShadow : void 0)
       },
       "@media (hover: hover)": {
-        "&:hover": _colorVarsStyle(base, color.hovered),
-        "&:active": _colorVarsStyle(base, color.pressed),
-        "&[data-hovered]": _colorVarsStyle(base, color.hovered)
+        "&:hover": _cardColorStyle(baseColor, color.hovered),
+        "&:active": _cardColorStyle(baseColor, color.pressed),
+        "&[data-hovered]": _cardColorStyle(baseColor, color.hovered)
       },
-      "&[data-selected]": _colorVarsStyle(base, color.pressed)
+      "&[data-selected]": _cardColorStyle(baseColor, color.pressed)
     }
-  }, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b2.root].filter(Boolean);
+  }, (_a2 = style == null ? void 0 : style.button) == null ? void 0 : _a2.root].filter(Boolean);
 }
 var __freeze$u = Object.freeze;
 var __defProp$v = Object.defineProperty;
@@ -2498,6 +2404,9 @@ const Button = forwardRef(function Button2(props, ref) {
     width,
     ...restProps
   } = props;
+  const {
+    button
+  } = useTheme_v2();
   const justify = useArrayProp(justifyProp);
   const padding = useArrayProp(paddingProp);
   const paddingX = useArrayProp(paddingXProp);
@@ -2508,7 +2417,6 @@ const Button = forwardRef(function Button2(props, ref) {
   const paddingRight = useArrayProp(paddingRightProp);
   const radius = useArrayProp(radiusProp);
   const space = useArrayProp(spaceProp);
-  const theme = useTheme();
   const boxProps = useMemo(() => ({
     // flex: 1,
     padding,
@@ -2550,7 +2458,7 @@ const Button = forwardRef(function Button2(props, ref) {
             align: textAlign,
             size: fontSize,
             textOverflow: "ellipsis",
-            weight: theme.sanity.button.textWeight,
+            weight: button.textWeight,
             children: text
           })
         }), iconRight && /* @__PURE__ */jsxs(Text, {
@@ -2576,40 +2484,37 @@ function cardStyle(props) {
 }
 function cardBaseStyle(props) {
   const {
-    $checkered,
-    theme
+    $checkered
   } = props;
-  const space = theme.sanity.space;
+  const {
+    space
+  } = getTheme_v2(props.theme);
   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;
+  var _a2;
   const {
     $checkered,
-    $focusRing,
-    theme
+    $focusRing
   } = props;
   const {
-    focusRing
-  } = theme.sanity.card;
-  const {
-    base,
     card,
-    dark
-  } = theme.sanity.color;
+    color,
+    style
+  } = getTheme_v2(props.theme);
   const border = {
-    width: 0,
+    width: card.border.width,
     color: "var(--card-border-color)"
   };
-  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,
+  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  "])), color._dark ? "dark" : "light", _cardColorStyle(color, color, $checkered), _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({
+    base: color,
     border,
-    focusRing
-  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _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,
+    focusRing: card.focusRing
+  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, _cardColorStyle(color, color.selectable.default.disabled, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), _cardColorStyle(color, color.selectable.default.selected, $checkered), _cardColorStyle(color, color.selectable.default.hovered, $checkered), _cardColorStyle(color, color.selectable.default.pressed, $checkered), $focusRing ? focusRingStyle({
+    base: color,
     border,
-    focusRing
-  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.card) == null ? void 0 : _b2.root);
+    focusRing: card.focusRing
+  }) : void 0, $focusRing ? focusRingBorderStyle(border) : void 0, (_a2 = style == null ? void 0 : style.card) == null ? void 0 : _a2.root);
 }
 const Root$t = styled(Box)(responsiveBorderStyle, responsiveRadiusStyle, responsiveShadowStyle, cardStyle);
 const Card = forwardRef(function Card2(props, ref) {
@@ -2672,48 +2577,45 @@ function checkboxBaseStyles() {
 }
 function inputElementStyles(props) {
   const {
-    theme
-  } = props;
-  const color = theme.sanity.color.input;
-  const {
+    color,
     input,
     radius
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   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.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,
+    color: color.input.default.enabled.border,
     width: input.border.width
-  }), rem(radius[2]), color.default.enabled.bg, color.default.enabled.fg, focusRingBorderStyle({
-    color: color.default.enabled.fg,
+  }), rem(radius[2]), color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+    color: color.input.default.enabled.fg,
     width: input.border.width
-  }), color.default.enabled.bg, focusRingStyle({
+  }), color.input.default.enabled.bg, focusRingStyle({
     focusRing
   }), focusRingStyle({
     focusRing: {
       width: 1,
       offset: 1
     }
-  }), color.invalid.enabled.border, focusRingBorderStyle({
+  }), color.input.invalid.enabled.border, focusRingBorderStyle({
     width: input.border.width,
-    color: color.invalid.enabled.bg2
-  }), color.default.disabled.fg, color.invalid.enabled.bg2, color.default.enabled.bg, focusRingStyle({
+    color: color.input.invalid.enabled.muted.bg
+  }), color.input.default.disabled.fg, color.input.invalid.enabled.muted.bg, color.input.default.enabled.bg, focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.invalid.readOnly.bg2
+      color: color.input.invalid.readOnly.muted.bg
     },
     focusRing: {
       width: 1,
       offset: 1
     }
-  }), color.default.disabled.bg, focusRingBorderStyle({
+  }), color.input.default.disabled.bg, focusRingBorderStyle({
     width: input.border.width,
-    color: color.default.disabled.border
-  }), color.default.disabled.fg, color.default.disabled.bg2, color.default.readOnly.bg, focusRingBorderStyle({
+    color: color.input.default.disabled.border
+  }), color.input.default.disabled.fg, color.input.default.disabled.muted.bg, color.input.default.readOnly.bg, focusRingBorderStyle({
     width: input.border.width,
-    color: color.default.readOnly.border
-  }), color.default.readOnly.fg, color.default.readOnly.bg2);
+    color: color.input.default.readOnly.border
+  }), color.input.default.readOnly.fg, color.input.default.readOnly.muted.bg);
 }
 const Root$s = styled.div(checkboxBaseStyles);
 const Input$5 = styled.input(inputElementStyles);
@@ -2759,11 +2661,15 @@ var __template$r = (cooked, raw) => __freeze$r(__defProp$s(cooked, "raw", {
   value: __freeze$r(raw || cooked.slice())
 }));
 var _a$r;
-function codeSyntaxHighlightingStyle(_ref3) {
+function codeSyntaxHighlightingStyle(_ref2) {
   let {
     theme
-  } = _ref3;
-  const color = theme.sanity.color.syntax;
+  } = _ref2;
+  const {
+    color: {
+      syntax: color
+    }
+  } = getTheme_v2(theme);
   return {
     "&.atrule": {
       color: color.atrule
@@ -2912,13 +2818,10 @@ function containerBaseStyle() {
   return BASE_STYLE$1;
 }
 function responsiveContainerWidthStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     container,
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$width, val => ({
     maxWidth: val === "auto" ? "none" : rem(container[val])
   }));
@@ -2979,10 +2882,12 @@ var _a$q, _b$g, _c$8;
 function headingBaseStyle(props) {
   const {
     $accent,
-    $muted,
-    theme
+    $muted
   } = props;
-  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);
+  const {
+    font
+  } = getTheme_v2(props.theme);
+  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    "]))), font.code.family);
 }
 var __freeze$p = Object.freeze;
 var __defProp$q = Object.defineProperty;
@@ -3037,14 +2942,15 @@ function inlineBaseStyle() {
 }
 function inlineSpaceStyle(props) {
   const {
-    theme
-  } = props;
-  return _responsive(theme.sanity.media, props.$space, spaceIndex => {
-    const space = rem(theme.sanity.space[spaceIndex]);
+    media,
+    space
+  } = getTheme_v2(props.theme);
+  return _responsive(media, props.$space, spaceIndex => {
+    const _space = rem(spaceIndex === 0.5 ? space[1] / 2 : space[spaceIndex]);
     return {
-      margin: "-".concat(space, " 0 0 -").concat(space),
+      margin: "-".concat(_space, " 0 0 -").concat(_space),
       "& > div": {
-        padding: "".concat(space, " 0 0 ").concat(space)
+        padding: "".concat(_space, " 0 0 ").concat(_space)
       }
     };
   });
@@ -3075,12 +2981,8 @@ var __template$o = (cooked, raw) => __freeze$o(__defProp$p(cooked, "raw", {
   value: __freeze$o(raw || cooked.slice())
 }));
 var _a$o;
-function kbdStyle(props) {
-  const {
-    theme
-  } = props;
-  const color = theme.sanity.color.kbd || theme.sanity.color.base;
-  return css(_a$o || (_a$o = __template$o(["\n    --card-fg-color: ", ";\n    --kbd-box-bg: ", ";\n    --kbd-box-shadow: ", ";\n\n    box-shadow: inset 0 0 0 1px var(--kbd-box-shadow);\n    background: var(--kbd-box-bg);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])), color.fg, color.bg, color.border);
+function kbdStyle() {
+  return css(_a$o || (_a$o = __template$o(["\n    --card-bg-color: var(--card-kbd-bg-color);\n    --card-border-color: var(--card-kbd-border-color);\n    --card-fg-color: var(--card-kbd-fg-color);\n\n    box-shadow: inset 0 0 0 1px var(--card-border-color);\n    background: var(--card-bg-color);\n    font: inherit;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 const Root$m = styled.kbd(responsiveRadiusStyle, kbdStyle);
 const KBD = forwardRef(function KBD2(props, ref) {
@@ -3102,7 +3004,7 @@ const KBD = forwardRef(function KBD2(props, ref) {
       children: /* @__PURE__ */jsx(Text, {
         as: "span",
         size: fontSize,
-        weight: "medium",
+        weight: "semibold",
         children
       })
     })
@@ -3168,10 +3070,10 @@ 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 => {
+const Root$l = styled.div(_ref3 => {
   let {
     $w: w
-  } = _ref4;
+  } = _ref3;
   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"])));
@@ -3183,8 +3085,10 @@ const Arrow = forwardRef(function Arrow2(props, ref) {
     radius = 0,
     ...restProps
   } = props;
-  const theme = useTheme();
-  const strokeWidth = theme.sanity.card.shadow.outline;
+  const {
+    card
+  } = useTheme_v2();
+  const strokeWidth = card.shadow.outline;
   const center = w / 2;
   const points = [{
     x: 0,
@@ -3253,6 +3157,9 @@ function BoundaryElementProvider(props) {
     children
   });
 }
+function isRecord(value) {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
 const DEFAULT_VALUE = {
   version: 0,
   element: null
@@ -3285,10 +3192,10 @@ function findMinBreakpoints(media, width) {
   return ret;
 }
 const ElementQuery = forwardRef(function ElementQuery2(props, ref) {
-  const theme = useTheme();
+  const theme = useTheme_v2();
   const {
     children,
-    media = theme.sanity.media,
+    media = theme.media,
     ...restProps
   } = props;
   const forwardedRef = useForwardedRef(ref);
@@ -3730,7 +3637,7 @@ const VirtualList = forwardRef(function VirtualList2(props, ref) {
   } = props;
   const {
     space
-  } = useTheme().sanity;
+  } = useTheme_v2();
   const forwardedRef = useForwardedRef(ref);
   const wrapperRef = useRef(null);
   const [scrollTop, setScrollTop] = useState(0);
@@ -3923,13 +3830,13 @@ function size(options) {
 }
 function calcCurrentWidth(params) {
   const {
+    container,
     mediaIndex,
-    theme,
     width
   } = params;
   const w = width[mediaIndex];
   const currentWidth = w === void 0 ? width[width.length - 1] : w;
-  return typeof currentWidth === "number" ? theme.sanity.container[currentWidth] : void 0;
+  return typeof currentWidth === "number" ? container[currentWidth] : void 0;
 }
 function calcMaxWidth(params) {
   const {
@@ -4024,8 +3931,11 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
 }));
 PopoverCard.displayName = "PopoverCard";
 const Popover = memo(forwardRef(function Popover2(props, ref) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
-  const theme = useTheme();
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const {
+    container,
+    layer
+  } = useTheme_v2();
   const boundaryElementContext = useBoundaryElement();
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
@@ -4053,11 +3963,11 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     shadow: shadowProp = 3,
     tone = "inherit",
     width: widthProp = "auto",
-    zOffset: zOffsetProp = (_e = theme.sanity.layer) == null ? void 0 : _e.popover.zOffset,
+    zOffset: zOffsetProp = layer.popover.zOffset,
     updateRef,
     ...restProps
   } = props;
-  const boundarySize = (_f = useElementSize(boundaryElement)) == null ? void 0 : _f.border;
+  const boundarySize = (_e = useElementSize(boundaryElement)) == null ? void 0 : _e.border;
   const padding = useArrayProp(paddingProp);
   const radius = useArrayProp(radiusProp);
   const shadow = useArrayProp(shadowProp);
@@ -4069,8 +3979,8 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
   const mediaIndex = useMediaIndex();
   const boundaryWidth = constrainSize || preventOverflow ? boundarySize == null ? void 0 : boundarySize.width : void 0;
   const width = calcCurrentWidth({
+    container,
     mediaIndex,
-    theme,
     width: widthArrayProp
   });
   const widthRef = useRef(width);
@@ -4116,13 +4026,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref5) {
+        apply(_ref4) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref5;
+          } = _ref4;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -4176,9 +4086,9 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
-  const referenceHidden = (_g = middlewareData.hide) == null ? void 0 : _g.referenceHidden;
-  const arrowX = (_h = middlewareData.arrow) == null ? void 0 : _h.x;
-  const arrowY = (_i = middlewareData.arrow) == null ? void 0 : _i.y;
+  const referenceHidden = (_f = middlewareData.hide) == null ? void 0 : _f.referenceHidden;
+  const arrowX = (_g = middlewareData.arrow) == null ? void 0 : _g.x;
+  const arrowY = (_h = middlewareData.arrow) == null ? void 0 : _h.y;
   const setArrow = useCallback(arrowEl => {
     arrowRef.current = arrowEl;
   }, []);
@@ -4262,32 +4172,26 @@ function radioBaseStyle() {
 }
 function inputElementStyle(props) {
   const {
-    theme
-  } = props;
-  const {
+    color,
     input
-  } = theme.sanity;
-  const {
-    focusRing
-  } = input.radio;
-  const color = theme.sanity.color.input;
+  } = getTheme_v2(props.theme);
   const dist = (input.radio.size - input.radio.markSize) / 2;
-  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,
+  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.input.default.enabled.bg, focusRingBorderStyle({
+    color: color.input.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.fg, focusRingStyle({
+  }), rem(dist), rem(dist), rem(input.radio.markSize), rem(input.radio.markSize), rem(input.radio.markSize / 2), color.input.default.enabled.fg, focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.default.enabled.border
+      color: color.input.default.enabled.border
     },
-    focusRing
+    focusRing: input.radio.focusRing
   }), focusRingBorderStyle({
-    color: color.default.enabled.border,
+    color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.invalid.enabled.border, focusRingBorderStyle({
+  }), color.input.invalid.enabled.border, focusRingBorderStyle({
     width: input.border.width,
-    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);
+    color: color.input.invalid.enabled.muted.bg
+  }), color.input.invalid.enabled.muted.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.border, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.disabled.border);
 }
 const Root$g = styled.div(radioBaseStyle);
 const Input$4 = styled.input(inputElementStyle);
@@ -4328,39 +4232,32 @@ function rootStyle() {
 }
 function inputBaseStyle(props) {
   const {
-    theme
-  } = props;
-  const font = theme.sanity.fonts.text;
-  return css(_b$c || (_b$c = __template$j(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.family);
+    font
+  } = getTheme_v2(props.theme);
+  return css(_b$c || (_b$c = __template$j(["\n    -webkit-font-smoothing: antialiased;\n    appearance: none;\n    border: 0;\n    font-family: ", ";\n    color: inherit;\n    width: 100%;\n    outline: none;\n    margin: 0;\n\n    &:disabled {\n      opacity: 1;\n    }\n  "])), font.text.family);
 }
 function inputColorStyle(props) {
   const {
-    theme
-  } = props;
-  const {
+    color,
     input
-  } = theme.sanity;
-  const {
-    focusRing
-  } = input.select;
-  const color = theme.sanity.color.input;
-  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,
+  } = getTheme_v2(props.theme);
+  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.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+    color: color.input.default.enabled.border,
     width: input.border.width
-  }), color.default.hovered.bg, color.default.hovered.fg, focusRingBorderStyle({
-    color: color.default.hovered.border,
+  }), color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+    color: color.input.default.hovered.border,
     width: input.border.width
   }), focusRingStyle({
     border: {
       width: input.border.width,
-      color: color.default.enabled.border
+      color: color.input.default.enabled.border
     },
-    focusRing
-  }), color.default.readOnly.bg, color.default.readOnly.fg, focusRingBorderStyle({
-    color: color.default.readOnly.border,
+    focusRing: input.select.focusRing
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, focusRingBorderStyle({
+    color: color.input.default.readOnly.border,
     width: input.border.width
-  }), color.default.disabled.bg, color.default.disabled.fg, focusRingBorderStyle({
-    color: color.default.disabled.border,
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+    color: color.input.default.disabled.border,
     width: input.border.width
   }));
 }
@@ -4372,23 +4269,22 @@ function textSize(size) {
 }
 function inputTextSizeStyle(props) {
   const {
-    theme,
     $fontSize
   } = props;
   const {
-    sizes
-  } = theme.sanity.fonts.text;
-  return _responsive(theme.sanity.media, $fontSize, sizeIndex => textSize(sizes[sizeIndex] || sizes[2]));
+    font,
+    media
+  } = getTheme_v2(props.theme);
+  return _responsive(media, $fontSize, sizeIndex => textSize(font.text.sizes[sizeIndex] || font.text.sizes[2]));
 }
 function inputStyle() {
   return [responsiveRadiusStyle, inputBaseStyle, inputColorStyle, inputTextSizeStyle, responsiveInputPaddingIconRightStyle];
 }
 function iconBoxStyle(props) {
   const {
-    theme
-  } = props;
-  const color = theme.sanity.color.input;
-  return css(_d$5 || (_d$5 = __template$j(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.default.enabled.fg, color.default.hovered.fg, color.default.disabled.fg, color.default.readOnly.fg);
+    color
+  } = getTheme_v2(props.theme);
+  return css(_d$5 || (_d$5 = __template$j(["\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    right: 0;\n\n    /* enabled */\n    --card-fg-color: ", ";\n\n    /* hover */\n    @media (hover: hover) {\n      select:not(disabled):not(:read-only):hover + && {\n        --card-fg-color: ", ";\n      }\n    }\n\n    /* disabled */\n    select:disabled + && {\n      --card-fg-color: ", ";\n    }\n\n    /* read-only */\n    select[data-read-only] + && {\n      --card-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.fg, color.input.default.hovered.fg, color.input.default.disabled.fg, color.input.default.readOnly.fg);
 }
 const selectStyle = {
   root: rootStyle,
@@ -4448,13 +4344,10 @@ function stackBaseStyle() {
   return BASE_STYLE;
 }
 function responsiveStackSpaceStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media,
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$space, spaceIndex => ({
     gridGap: rem(space[spaceIndex])
   }));
@@ -4489,36 +4382,26 @@ function switchInputStyles() {
 }
 function switchRepresentationStyles(props) {
   const {
-    theme
-  } = props;
-  const {
+    color,
     input
-  } = theme.sanity;
-  const {
-    focusRing
-  } = input.switch;
-  const color = theme.sanity.color.input;
-  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.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);
+  } = getTheme_v2(props.theme);
+  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.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+    focusRing: input.switch.focusRing
+  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
-  const {
-    theme
-  } = props;
   const {
     input
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return css(_d$4 || (_d$4 = __template$i(["\n    &:not([hidden]) {\n      display: block;\n    }\n    background-color: var(--switch-bg-color);\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n  "])), rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2));
 }
 function switchThumbStyles(props) {
   const {
-    $indeterminate,
-    theme
+    $indeterminate
   } = props;
   const {
     input
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   const trackWidth = input.switch.width;
   const trackHeight = input.switch.height;
   const trackPadding = input.switch.padding;
@@ -4812,12 +4695,12 @@ function useDelayedState(initialState) {
   }, []);
   return [state, onStateChange];
 }
-function ConditionalWrapper(_ref6) {
+function ConditionalWrapper(_ref5) {
   let {
     children,
     condition,
     wrapper
-  } = _ref6;
+  } = _ref5;
   if (!condition) {
     return children;
   }
@@ -4878,16 +4761,18 @@ var __template$f = (cooked, raw) => __freeze$f(__defProp$f(cooked, "raw", {
   value: __freeze$f(raw || cooked.slice())
 }));
 var _a$f;
-const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref7 => {
+const Root$a = styled(Layer)(_a$f || (_a$f = __template$f(["\n  pointer-events: none;\n  max-width: ", "px;\n"])), _ref6 => {
   let {
     $maxWidth
-  } = _ref7;
+  } = _ref6;
   return $maxWidth;
 });
 const Tooltip = forwardRef(function Tooltip2(props, ref) {
-  var _a2, _b, _c, _d, _e, _f;
+  var _a2, _b, _c, _d, _e;
   const boundaryElementContext = useBoundaryElement();
-  const theme = useTheme();
+  const {
+    layer
+  } = useTheme_v2();
   const {
     arrow: arrowProp = false,
     boundaryElement = boundaryElementContext == null ? void 0 : boundaryElementContext.element,
@@ -4901,7 +4786,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     radius = 2,
     scheme,
     shadow = 2,
-    zOffset = (_c = theme.sanity.layer) == null ? void 0 : _c.tooltip.zOffset,
+    zOffset = layer.tooltip.zOffset,
     delay,
     animate = false,
     ...restProps
@@ -4912,7 +4797,7 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
   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 portalElement = typeof portalProp === "string" ? ((_c = portal.elements) == null ? void 0 : _c[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;
@@ -4952,8 +4837,8 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
     placement: placementProp,
     whileElementsMounted: autoUpdate
   });
-  const arrowX = (_e = middlewareData.arrow) == null ? void 0 : _e.x;
-  const arrowY = (_f = middlewareData.arrow) == null ? void 0 : _f.y;
+  const arrowX = (_d = middlewareData.arrow) == null ? void 0 : _d.x;
+  const arrowY = (_e = middlewareData.arrow) == null ? void 0 : _e.y;
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -5297,10 +5182,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref8 => {
+  const defaultRenderOption = useCallback(_ref7 => {
     let {
       value: value2
-    } = _ref8;
+    } = _ref7;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -5759,11 +5644,13 @@ 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) {
+function dialogStyle(_ref8) {
   let {
     theme
-  } = _ref9;
-  const color = theme.sanity.color.base;
+  } = _ref8;
+  const {
+    color
+  } = getTheme_v2(theme);
   return {
     "&:not([hidden])": {
       display: "flex"
@@ -5775,16 +5662,13 @@ function dialogStyle(_ref9) {
     alignItems: "center",
     justifyContent: "center",
     outline: "none",
-    background: color.shadow.umbra
+    background: color.backdrop
   };
 }
 function responsiveDialogPositionStyle(props) {
-  const {
-    theme
-  } = props;
   const {
     media
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return _responsive(media, props.$position, position => ({
     "&&": {
       position
@@ -5936,14 +5820,16 @@ const DialogCard = forwardRef(function DialogCard2(props, ref) {
   });
 });
 const Dialog = forwardRef(function Dialog2(props, ref) {
-  var _a2, _b2;
+  var _a2;
   const dialog = useDialog();
-  const theme = useTheme();
+  const {
+    layer
+  } = useTheme_v2();
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
-    cardRadius: cardRadiusProp = 3,
-    cardShadow = 4,
+    cardRadius: cardRadiusProp = 4,
+    cardShadow = 3,
     children,
     contentRef,
     footer,
@@ -5958,12 +5844,12 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     position: positionProp = dialog.position || "fixed",
     scheme,
     width: widthProp = 0,
-    zOffset: zOffsetProp = dialog.zOffset || ((_a2 = theme.sanity.layer) == null ? void 0 : _a2.dialog.zOffset),
+    zOffset: zOffsetProp = dialog.zOffset || layer.dialog.zOffset,
     animate = false,
     ...restProps
   } = props;
   const portal = usePortal();
-  const portalElement = portalProp ? ((_b2 = portal.elements) == null ? void 0 : _b2[portalProp]) || null : portal.element;
+  const portalElement = portalProp ? ((_a2 = portal.elements) == null ? void 0 : _a2[portalProp]) || null : portal.element;
   const boundaryElement = useBoundaryElement().element;
   const cardRadius = useArrayProp(cardRadiusProp);
   const padding = useArrayProp(paddingProp);
@@ -6074,7 +5960,7 @@ var __template$a = (cooked, raw) => __freeze$a(__defProp$a(cooked, "raw", {
   value: __freeze$a(raw || cooked.slice())
 }));
 var _a$a, _b$5;
-const Root$6 = styled.kbd(_a$a || (_a$a = __template$a(["\n  &:not([hidden]) {\n    display: block;\n  }\n  font: inherit;\n"])));
+const Root$6 = styled.kbd(_a$a || (_a$a = __template$a(["\n  font: inherit;\n  padding: 1px;\n\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Key = styled(KBD)(_b$5 || (_b$5 = __template$a(["\n  &:not([hidden]) {\n    display: block;\n  }\n"])));
 const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
   const {
@@ -6082,7 +5968,7 @@ const Hotkeys = forwardRef(function Hotkeys2(props, ref) {
     keys,
     padding,
     radius,
-    space: spaceProp = 1,
+    space: spaceProp = 0.5,
     ...restProps
   } = props;
   const space = useArrayProp(spaceProp);
@@ -6552,18 +6438,16 @@ 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: -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;
+  var _a2;
   const {
-    $tone,
-    theme
+    $tone
   } = props;
   const {
-    base,
-    muted,
-    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            &: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);
+    color,
+    style
+  } = getTheme_v2(props.theme);
+  const tone = color.selectable[$tone];
+  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  "])), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.disabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.disabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.pressed), (_a2 = style == null ? void 0 : style.card) == null ? void 0 : _a2.root);
 }
 const Selectable = styled(Box)(responsiveRadiusStyle, selectableBaseStyle, selectableColorStyle);
 function useMenu() {
@@ -6766,6 +6650,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
     paddingBottom,
     paddingLeft
   }), [padding, paddingX, paddingY, paddingTop, paddingRight, paddingBottom, paddingLeft]);
+  const hotkeysFontSize = useArrayProp(fontSize).map(s => s - 1);
   const setRef = useCallback(el => {
     ref.current = el;
     setRootElement(el);
@@ -6807,7 +6692,7 @@ const MenuItem = forwardRef(function MenuItem2(props, forwardedRef) {
           children: text
         })
       }), hotkeys && /* @__PURE__ */jsx(Hotkeys, {
-        fontSize,
+        fontSize: hotkeysFontSize,
         keys: hotkeys,
         style: {
           marginTop: -4,
@@ -6832,15 +6717,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"])), _ref10 => {
+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"])), _ref9 => {
   let {
     $visible
-  } = _ref10;
+  } = _ref9;
   return $visible ? 1 : 0;
-}, _ref11 => {
+}, _ref10 => {
   let {
     $animated
-  } = _ref11;
+  } = _ref10;
   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);
@@ -6871,18 +6756,18 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref12 => {
-  let {
+const Root$3 = styled(Skeleton)(props => {
+  const {
     $size,
-    $style,
-    theme
-  } = _ref12;
+    $style
+  } = props;
   const {
+    font,
     media
-  } = theme.sanity;
-  const font = theme.sanity.fonts[$style];
+  } = getTheme_v2(props.theme);
+  const fontStyle = font[$style];
   const styles = _responsive(media, $size, sizeIndex => {
-    const fontSize = font.sizes[sizeIndex];
+    const fontSize = fontStyle.sizes[sizeIndex];
     const capHeight = fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight;
     return {
       height: capHeight
@@ -7225,12 +7110,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref13 => {
+            children: state.map(_ref11 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref13;
+              } = _ref11;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,
@@ -7524,26 +7409,20 @@ 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      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 {
-    theme
-  } = props;
   const $tone = "default";
   const {
-    base,
-    muted,
-    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\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));
+    color
+  } = getTheme_v2(props.theme);
+  const tone = color.selectable[$tone];
+  return css(_b || (_b = __template$1(["\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    &[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  "])), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.selected), _cardColorStyle(color, tone.enabled), _cardColorStyle(color, tone.pressed), _cardColorStyle(color, tone.hovered), _cardColorStyle(color, tone.selected));
 }
 function treeItemBoxStyle(props) {
   const {
-    $level,
-    theme
+    $level
   } = props;
   const {
     space
-  } = theme.sanity;
+  } = getTheme_v2(props.theme);
   return css(_c || (_c = __template$1(["\n    padding-left: ", ";\n\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])), rem(space[2] * $level));
 }
 function useTree() {
@@ -7730,5 +7609,5 @@ const TreeItem = memo(function TreeItem2(props) {
     })]
   });
 });
-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 };
+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, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.esm.js.map