@sanity/ui 3.0.0-static.16 → 3.0.0-static.18

package/dist/{theme.mjs → theme.cjs}

@@ -1,4 +1,6 @@
-import { COLOR_HUES, COLOR_TINTS } from "@sanity/color";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var color = require("@sanity/color");
 const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
 function createSelectableTones(opts, base, dark, solid, muted) {
   return {
@@ -506,13 +508,13 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
     state,
     tone
   }) => {
-    const color = colors[tone];
+    const color2 = colors[tone];
     return state === "hovered" ? {
-      bg: dark ? color.light : color.dark,
-      bg2: dark ? color.light : color.dark,
-      border: dark ? color.lighter : color.darker,
-      fg: dark ? color.darkest : color.lightest,
-      icon: dark ? color.darkest : color.lightest,
+      bg: dark ? color2.light : color2.dark,
+      bg2: dark ? color2.light : color2.dark,
+      border: dark ? color2.lighter : color2.darker,
+      fg: dark ? color2.darkest : color2.lightest,
+      icon: dark ? color2.darkest : color2.lightest,
       muted: {
         fg: black
       },
@@ -528,11 +530,11 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       },
       skeleton: base.skeleton
     } : {
-      bg: color.base,
-      bg2: color.base,
-      border: dark ? color.light : color.dark,
-      fg: dark ? color.darkest : color.lightest,
-      icon: dark ? color.darkest : color.lightest,
+      bg: color2.base,
+      bg2: color2.base,
+      border: dark ? color2.light : color2.dark,
+      fg: dark ? color2.darkest : color2.lightest,
+      icon: dark ? color2.darkest : color2.lightest,
       muted: {
         fg: black
       },
@@ -555,13 +557,13 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
     state,
     tone
   }) => {
-    const color = colors[tone];
+    const color2 = colors[tone];
     return state === "hovered" ? {
-      bg: dark ? color.darker : color.lighter,
-      bg2: dark ? color.darker : color.lighter,
-      border: dark ? color.lighter : color.darker,
-      fg: dark ? color.lightest : color.darkest,
-      icon: dark ? color.lightest : color.darkest,
+      bg: dark ? color2.darker : color2.lighter,
+      bg2: dark ? color2.darker : color2.lighter,
+      border: dark ? color2.lighter : color2.darker,
+      fg: dark ? color2.lightest : color2.darkest,
+      icon: dark ? color2.lightest : color2.darkest,
       muted: {
         fg: black
       },
@@ -577,11 +579,11 @@ const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
       },
       skeleton: base.skeleton
     } : {
-      bg: dark ? color.darkest : color.lightest,
-      bg2: dark ? color.darkest : color.lightest,
-      border: dark ? color.darker : color.lighter,
-      fg: dark ? color.lighter : color.darker,
-      icon: dark ? color.lighter : color.darker,
+      bg: dark ? color2.darkest : color2.lightest,
+      bg2: dark ? color2.darkest : color2.lightest,
+      border: dark ? color2.darker : color2.lighter,
+      fg: dark ? color2.lighter : color2.darker,
+      icon: dark ? color2.lighter : color2.darker,
       muted: {
         fg: black
       },
@@ -1452,15 +1454,15 @@ const defaultThemeConfig = {
   "positive",
   "caution",
   "critical"
-], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = color.COLOR_HUES;
 function isColorBlendModeValue(str) {
   return THEME_COLOR_BLEND_MODES.includes(str);
 }
 function isColorHueKey(str) {
-  return COLOR_HUES.includes(str);
+  return color.COLOR_HUES.includes(str);
 }
 function isColorTintKey(str) {
-  return COLOR_TINTS.includes(str);
+  return color.COLOR_TINTS.includes(str);
 }
 function isColorButtonMode(str) {
   return THEME_COLOR_BUTTON_MODES.includes(str);
@@ -1468,12 +1470,12 @@ function isColorButtonMode(str) {
 const HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
 function parseColor$1(str) {
   let cursor = 0;
-  const color = getColor();
-  if (!color)
+  const color2 = getColor();
+  if (!color2)
     throw new Error(`Invalid color: ${str}`);
   const opacity = getOpacity(), mix2 = getMixPercentage();
   return {
-    color,
+    color: color2,
     mix: mix2,
     opacity
   };
@@ -1543,10 +1545,14 @@ function parseColor$1(str) {
 }
 function renderColor(token, context) {
   const {
+    bgValue,
     bgVar,
     hue,
     scheme
-  } = context, result = parseColor$1(token[scheme === "dark" ? 0 : 1]), colorVar = result.color.type === "hue" ? `--${result.color.hue ?? hue}-${result.color.tint}` : `--${result.color.type}`;
+  } = context, t = token[scheme === "dark" ? 0 : 1];
+  if (t === "inherit")
+    return bgValue;
+  const result = parseColor$1(t), colorVar = result.color.type === "hue" ? `--${result.color.hue ?? hue}-${result.color.tint}` : `--${result.color.type}`;
   return result.mix !== void 0 ? `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)` : result.opacity !== void 0 ? `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)` : `var(${colorVar})`;
 }
 function buildColor_v3(tokens) {
@@ -1573,21 +1579,27 @@ function buildColorCard_v3(tokens, options) {
   const {
     scheme
   } = options, context = {
-    bgVar: "--color-bg-1",
+    bgVar: "--color-bg",
+    bgValue: "transparent",
     hue: tokens._hue,
     scheme
-  };
+  }, tintedDefaultVariant = buildColorElement_v3(tokens.variant.tinted.default, {
+    bgValue: "transparent",
+    scheme
+  }), bgValue = tintedDefaultVariant.bg[0];
   return {
     _hue: tokens._hue ?? "gray",
     avatar: THEME_COLOR_AVATAR_COLORS.reduce((acc, hue) => {
       const avatarTokens = tokens.avatar[hue];
       return acc[hue] = {
         bg: renderColor(avatarTokens.bg, {
+          bgValue,
           bgVar: "--color-bg-1",
           hue: avatarTokens._hue,
           scheme
         }),
         fg: renderColor(avatarTokens.fg, {
+          bgValue,
           bgVar: "--color-bg-1",
           hue: avatarTokens._hue,
           scheme
@@ -1650,29 +1662,27 @@ function buildColorCard_v3(tokens, options) {
     },
     variant: {
       solid: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
-          ...acc,
-          [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-            scheme
-          })
-        }), {})
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = buildColorElement_v3(tokens.variant.solid[tone], {
+          bgValue,
+          scheme
+        }), acc), {})
       },
       tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
-          ...acc,
-          [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
-            scheme
-          })
-        }), {})
+        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (tone === "default" ? acc[tone] = tintedDefaultVariant : acc[tone] = buildColorElement_v3(tokens.variant.tinted[tone], {
+          bgValue,
+          scheme
+        }), acc), {})
       }
     }
   };
 }
 function buildColorElement_v3(tokens, options) {
   const {
+    bgValue,
     scheme
   } = options, context = {
-    bgVar: "--bg",
+    bgValue,
+    bgVar: "--color-bg",
     hue: tokens._hue,
     scheme
   };
@@ -1764,19 +1774,34 @@ const defaultTokens = {
             }
           },
           primary: {
-            _hue: "blue"
+            _hue: "blue",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
           },
           suggest: {
-            _hue: "purple"
+            _hue: "purple",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
           },
           positive: {
-            _hue: "green"
+            _hue: "green",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
           },
           caution: {
-            _hue: "yellow"
+            _hue: "yellow",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
           },
           critical: {
-            _hue: "red"
+            _hue: "red",
+            bg: {
+              0: ["inherit", "inherit"]
+            }
           }
         },
         solid: {
@@ -1791,7 +1816,7 @@ const defaultTokens = {
             },
             fg: {
               0: ["black", "white"],
-              4: ["600", "400"]
+              4: ["700", "200"]
             }
           },
           default: {
@@ -1852,7 +1877,7 @@ const defaultTokens = {
             },
             border: {
               0: ["800", "100"],
-              4: ["600", "300"]
+              4: ["600", "400"]
             },
             fg: {
               0: ["white", "black"],
@@ -2093,7 +2118,7 @@ function v2_v0(v2, v3) {
   const {
     avatar,
     button,
-    color,
+    color: color2,
     container,
     font: fonts,
     input,
@@ -2110,20 +2135,20 @@ function v2_v0(v2, v3) {
     container,
     color: {
       light: {
-        transparent: themeColor_v2_v0(color.light.transparent),
-        default: themeColor_v2_v0(color.light.default),
-        primary: themeColor_v2_v0(color.light.primary),
-        positive: themeColor_v2_v0(color.light.positive),
-        caution: themeColor_v2_v0(color.light.caution),
-        critical: themeColor_v2_v0(color.light.critical)
+        transparent: themeColor_v2_v0(color2.light.transparent),
+        default: themeColor_v2_v0(color2.light.default),
+        primary: themeColor_v2_v0(color2.light.primary),
+        positive: themeColor_v2_v0(color2.light.positive),
+        caution: themeColor_v2_v0(color2.light.caution),
+        critical: themeColor_v2_v0(color2.light.critical)
       },
       dark: {
-        transparent: themeColor_v2_v0(color.dark.transparent),
-        default: themeColor_v2_v0(color.dark.default),
-        primary: themeColor_v2_v0(color.dark.primary),
-        positive: themeColor_v2_v0(color.dark.positive),
-        caution: themeColor_v2_v0(color.dark.caution),
-        critical: themeColor_v2_v0(color.dark.critical)
+        transparent: themeColor_v2_v0(color2.dark.transparent),
+        default: themeColor_v2_v0(color2.dark.default),
+        primary: themeColor_v2_v0(color2.dark.primary),
+        positive: themeColor_v2_v0(color2.dark.positive),
+        caution: themeColor_v2_v0(color2.dark.caution),
+        critical: themeColor_v2_v0(color2.dark.critical)
       }
     },
     focusRing: input.text.focusRing,
@@ -2196,36 +2221,36 @@ function inputStateThemeColor_v2_v0(t) {
 }
 function themeColor_v3_v2(options) {
   const {
-    color,
+    color: color2,
     dark
   } = options;
   return {
     _blend: "screen",
     _dark: dark,
     ...buildColorState({
-      cardColor: color,
+      cardColor: color2,
       state: "enabled",
       tone: "default",
       variant: "tinted"
     }),
-    backdrop: color.backdrop,
+    backdrop: color2.backdrop,
     button: THEME_COLOR_BUTTON_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color,
+      cardColor: color2,
       state,
       tone,
       variant: mode === "default" ? "solid" : "tinted"
     }), mode === "bleed" && (states[state].border = "transparent"), states), {}), tones2), {}), modes), {}),
-    focusRing: color.focusRing,
-    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color.variant.tinted.default), states), {}), modes), {}),
+    focusRing: color2.focusRing,
+    input: THEME_COLOR_INPUT_MODES.reduce((modes, mode) => (modes[mode] = THEME_COLOR_INPUT_STATES.reduce((states, state) => (states[state] = buildInputState(color2.variant.tinted.default), states), {}), modes), {}),
     selectable: THEME_COLOR_STATE_TONES.reduce((tones2, tone) => (tones2[tone] = THEME_COLOR_STATES.reduce((states, state) => (states[state] = buildColorState({
-      cardColor: color,
+      cardColor: color2,
       // cardVars: vars,
       state,
       tone,
       variant: "tinted"
     }), states), {}), tones2), {}),
-    shadow: color.shadow,
-    syntax: color.code.token
+    shadow: color2.shadow,
+    syntax: color2.code.token
   };
 }
 const stateShades = {
@@ -2264,37 +2289,37 @@ function buildColorState(options) {
     state,
     tone,
     variant
-  } = options, color = cardColor.variant[variant][tone], shades = stateShades[state];
+  } = options, color2 = cardColor.variant[variant][tone], shades = stateShades[state];
   return {
     accent: {
-      fg: color.fg[4]
+      fg: color2.fg[4]
     },
     avatar: cardColor.avatar,
     badge: THEME_COLOR_STATE_TONES.reduce((tones2, tone2) => (tones2[tone2] = {
-      bg: mix$1(color.bg, 1),
-      fg: mix$1(color.fg, 1),
-      dot: mix$1(color.fg, 3),
-      icon: mix$1(color.fg, 3)
+      bg: mix$1(color2.bg, 1),
+      fg: mix$1(color2.fg, 1),
+      dot: mix$1(color2.fg, 3),
+      icon: mix$1(color2.fg, 3)
     }, tones2), {}),
-    bg: mix$1(color.bg, shades.bg[0]),
-    border: mix$1(color.border, shades.border[0]),
-    fg: mix$1(color.fg, shades.fg[0]),
+    bg: mix$1(color2.bg, shades.bg[0]),
+    border: mix$1(color2.border, shades.border[0]),
+    fg: mix$1(color2.fg, shades.fg[0]),
     code: {
-      bg: mix$1(color.bg, shades.bg[1]),
-      fg: mix$1(color.fg, shades.fg[2])
+      bg: mix$1(color2.bg, shades.bg[1]),
+      fg: mix$1(color2.fg, shades.fg[2])
     },
-    icon: mix$1(color.fg, shades.fg[2]),
+    icon: mix$1(color2.fg, shades.fg[2]),
     kbd: {
-      bg: mix$1(color.bg, 0),
-      fg: mix$1(color.fg, 0),
-      border: mix$1(color.bg, 0)
+      bg: mix$1(color2.bg, 0),
+      fg: mix$1(color2.fg, 0),
+      border: mix$1(color2.bg, 0)
     },
     link: {
-      fg: mix$1(color.fg, shades.fg[2])
+      fg: mix$1(color2.fg, shades.fg[2])
     },
     muted: {
-      bg: mix$1(color.bg, shades.bg[1]),
-      fg: mix$1(color.fg, shades.fg[2])
+      bg: mix$1(color2.bg, shades.bg[1]),
+      fg: mix$1(color2.fg, shades.fg[2])
     },
     skeleton: cardColor.skeleton
   };
@@ -2479,9 +2504,9 @@ function rgbaToRGBA(rgba2) {
     a: parseFloat(values[3])
   };
 }
-function rgbToHex(color) {
-  const r = round(clamp(Math.round(color.r), 0, 255)), g = round(clamp(Math.round(color.g), 0, 255)), b = round(clamp(Math.round(color.b), 0, 255));
-  return "a" in color ? `rgba(${r},${g},${b},${color.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+function rgbToHex(color2) {
+  const r = round(clamp(Math.round(color2.r), 0, 255)), g = round(clamp(Math.round(color2.g), 0, 255)), b = round(clamp(Math.round(color2.b), 0, 255));
+  return "a" in color2 ? `rgba(${r},${g},${b},${color2.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
 function rgbToHsl({
   r,
@@ -2526,21 +2551,21 @@ function parseHsl(str) {
     l: parseFloat(res[5])
   };
 }
-function parseColor(color) {
-  if (!color) return {
+function parseColor(color2) {
+  if (!color2) return {
     r: 0,
     g: 0,
     b: 0
   };
-  if (typeof color != "string")
+  if (typeof color2 != "string")
     throw new Error("parseColor: expected a string");
-  if (isHex(color))
-    return hexToRgb(color);
-  if (color.startsWith("hsl("))
-    return hslToRgb(parseHsl(color));
-  if (color.startsWith("rgba("))
-    return rgbaToRGBA(color);
-  throw new Error(`parseColor: unexpected color format: "${color}"`);
+  if (isHex(color2))
+    return hexToRgb(color2);
+  if (color2.startsWith("hsl("))
+    return hslToRgb(parseHsl(color2));
+  if (color2.startsWith("rgba("))
+    return rgbaToRGBA(color2);
+  throw new Error(`parseColor: unexpected color format: "${color2}"`);
 }
 function getContrastRatio(bg, fg) {
   const rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
@@ -2559,10 +2584,10 @@ function rgb_lrgb1(v) {
 function lrgb_luminance([r, g, b]) {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
-function rgba(color, a) {
-  if (typeof color == "string" && color.startsWith("var("))
-    return `color-mix(in srgb, transparent, ${color} ${a * 100}%)`;
-  const rgb = parseColor(color);
+function rgba(color2, a) {
+  if (typeof color2 == "string" && color2.startsWith("var("))
+    return `color-mix(in srgb, transparent, ${color2} ${a * 100}%)`;
+  const rgb = parseColor(color2);
   return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
 }
 const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
@@ -2728,10 +2753,10 @@ function isColorOpacityValue(str) {
 function is_v2(themeProp) {
   return themeProp._version === 2;
 }
-function themeColor_v0_v2_9(color) {
-  if ("neutral" in color.badge)
-    return color;
-  const colors2 = color;
+function themeColor_v0_v2_9(color2) {
+  if ("neutral" in color2.badge)
+    return color2;
+  const colors2 = color2;
   return {
     ...colors2,
     badge: {
@@ -2985,7 +3010,7 @@ function v0_v2(v0) {
   const {
     avatar,
     button,
-    color,
+    color: color2,
     container,
     fonts: font,
     input,
@@ -3008,24 +3033,24 @@ function v0_v2(v0) {
     card: defaultThemeConfig.card,
     color: {
       light: {
-        transparent: themeColor_v0_v2(color.light.transparent),
-        default: themeColor_v0_v2(color.light.default),
-        neutral: themeColor_v0_v2(color.light.transparent),
-        primary: themeColor_v0_v2(color.light.primary),
-        suggest: themeColor_v0_v2(color.light.primary),
-        positive: themeColor_v0_v2(color.light.positive),
-        caution: themeColor_v0_v2(color.light.caution),
-        critical: themeColor_v0_v2(color.light.critical)
+        transparent: themeColor_v0_v2(color2.light.transparent),
+        default: themeColor_v0_v2(color2.light.default),
+        neutral: themeColor_v0_v2(color2.light.transparent),
+        primary: themeColor_v0_v2(color2.light.primary),
+        suggest: themeColor_v0_v2(color2.light.primary),
+        positive: themeColor_v0_v2(color2.light.positive),
+        caution: themeColor_v0_v2(color2.light.caution),
+        critical: themeColor_v0_v2(color2.light.critical)
       },
       dark: {
-        transparent: themeColor_v0_v2(color.dark.transparent),
-        default: themeColor_v0_v2(color.dark.default),
-        neutral: themeColor_v0_v2(color.dark.transparent),
-        primary: themeColor_v0_v2(color.dark.primary),
-        suggest: themeColor_v0_v2(color.dark.primary),
-        positive: themeColor_v0_v2(color.dark.positive),
-        caution: themeColor_v0_v2(color.dark.caution),
-        critical: themeColor_v0_v2(color.dark.critical)
+        transparent: themeColor_v0_v2(color2.dark.transparent),
+        default: themeColor_v0_v2(color2.dark.default),
+        neutral: themeColor_v0_v2(color2.dark.transparent),
+        primary: themeColor_v0_v2(color2.dark.primary),
+        suggest: themeColor_v0_v2(color2.dark.primary),
+        positive: themeColor_v0_v2(color2.dark.positive),
+        caution: themeColor_v0_v2(color2.dark.caution),
+        critical: themeColor_v0_v2(color2.dark.critical)
       }
     },
     container,
@@ -3131,69 +3156,67 @@ function getTheme_v2(theme) {
   };
   return cache.set(theme, v2), v2;
 }
-export {
-  AVATAR_SIZE,
-  COLOR_CONFIG_AVATAR_COLORS,
-  COLOR_CONFIG_BLEND_KEYS,
-  COLOR_CONFIG_CARD_KEYS,
-  COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_INPUT_MODES,
-  COLOR_CONFIG_INPUT_STATES,
-  COLOR_CONFIG_STATES,
-  COLOR_CONFIG_STATE_KEYS,
-  COLOR_CONFIG_STATE_TONES,
-  CONTAINER,
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  HUES,
-  RADIUS,
-  SHADOW,
-  SPACE,
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_BLEND_MODES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  TINTS,
-  buildColor_v3,
-  buildTheme,
-  buildTheme_v3,
-  createColorTheme,
-  defaultTokens,
-  getContrastRatio,
-  getScopedTheme,
-  getTheme_v2,
-  hexToRgb,
-  hslToRgb,
-  isColorBlendModeValue,
-  isColorButtonMode,
-  isColorConfigBaseKey,
-  isColorConfigBaseTone,
-  isColorConfigBlendKey,
-  isColorConfigStateKey,
-  isColorConfigStateTone,
-  isColorHueKey,
-  isColorOpacityValue,
-  isColorTintKey,
-  isColorTokenValue,
-  isColorValue,
-  mix,
-  multiply,
-  parseColor,
-  parseTokenKey,
-  parseTokenValue,
-  renderColor,
-  resolveTokens,
-  rgbToHex,
-  rgbToHsl,
-  rgba,
-  rgbaToRGBA,
-  screen
-};
-//# sourceMappingURL=theme.mjs.map
+exports.AVATAR_SIZE = AVATAR_SIZE;
+exports.COLOR_CONFIG_AVATAR_COLORS = COLOR_CONFIG_AVATAR_COLORS;
+exports.COLOR_CONFIG_BLEND_KEYS = COLOR_CONFIG_BLEND_KEYS;
+exports.COLOR_CONFIG_CARD_KEYS = COLOR_CONFIG_CARD_KEYS;
+exports.COLOR_CONFIG_CARD_TONES = COLOR_CONFIG_CARD_TONES;
+exports.COLOR_CONFIG_INPUT_MODES = COLOR_CONFIG_INPUT_MODES;
+exports.COLOR_CONFIG_INPUT_STATES = COLOR_CONFIG_INPUT_STATES;
+exports.COLOR_CONFIG_STATES = COLOR_CONFIG_STATES;
+exports.COLOR_CONFIG_STATE_KEYS = COLOR_CONFIG_STATE_KEYS;
+exports.COLOR_CONFIG_STATE_TONES = COLOR_CONFIG_STATE_TONES;
+exports.CONTAINER = CONTAINER;
+exports.FONT_CODE_SIZE = FONT_CODE_SIZE;
+exports.FONT_HEADING_SIZE = FONT_HEADING_SIZE;
+exports.FONT_LABEL_SIZE = FONT_LABEL_SIZE;
+exports.FONT_TEXT_SIZE = FONT_TEXT_SIZE;
+exports.HUES = HUES;
+exports.RADIUS = RADIUS;
+exports.SHADOW = SHADOW;
+exports.SPACE = SPACE;
+exports.THEME_COLOR_AVATAR_COLORS = THEME_COLOR_AVATAR_COLORS;
+exports.THEME_COLOR_BLEND_MODES = THEME_COLOR_BLEND_MODES;
+exports.THEME_COLOR_BUTTON_MODES = THEME_COLOR_BUTTON_MODES;
+exports.THEME_COLOR_CARD_TONES = THEME_COLOR_CARD_TONES;
+exports.THEME_COLOR_INPUT_MODES = THEME_COLOR_INPUT_MODES;
+exports.THEME_COLOR_INPUT_STATES = THEME_COLOR_INPUT_STATES;
+exports.THEME_COLOR_SCHEMES = THEME_COLOR_SCHEMES;
+exports.THEME_COLOR_STATES = THEME_COLOR_STATES;
+exports.THEME_COLOR_STATE_TONES = THEME_COLOR_STATE_TONES;
+exports.TINTS = TINTS;
+exports.buildColor_v3 = buildColor_v3;
+exports.buildTheme = buildTheme;
+exports.buildTheme_v3 = buildTheme_v3;
+exports.createColorTheme = createColorTheme;
+exports.defaultTokens = defaultTokens;
+exports.getContrastRatio = getContrastRatio;
+exports.getScopedTheme = getScopedTheme;
+exports.getTheme_v2 = getTheme_v2;
+exports.hexToRgb = hexToRgb;
+exports.hslToRgb = hslToRgb;
+exports.isColorBlendModeValue = isColorBlendModeValue;
+exports.isColorButtonMode = isColorButtonMode;
+exports.isColorConfigBaseKey = isColorConfigBaseKey;
+exports.isColorConfigBaseTone = isColorConfigBaseTone;
+exports.isColorConfigBlendKey = isColorConfigBlendKey;
+exports.isColorConfigStateKey = isColorConfigStateKey;
+exports.isColorConfigStateTone = isColorConfigStateTone;
+exports.isColorHueKey = isColorHueKey;
+exports.isColorOpacityValue = isColorOpacityValue;
+exports.isColorTintKey = isColorTintKey;
+exports.isColorTokenValue = isColorTokenValue;
+exports.isColorValue = isColorValue;
+exports.mix = mix;
+exports.multiply = multiply;
+exports.parseColor = parseColor;
+exports.parseTokenKey = parseTokenKey;
+exports.parseTokenValue = parseTokenValue;
+exports.renderColor = renderColor;
+exports.resolveTokens = resolveTokens;
+exports.rgbToHex = rgbToHex;
+exports.rgbToHsl = rgbToHsl;
+exports.rgba = rgba;
+exports.rgbaToRGBA = rgbaToRGBA;
+exports.screen = screen;
+//# sourceMappingURL=theme.cjs.map