@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

package/dist/css.mjs

@@ -1,5 +1,5 @@
-import { color } from "@sanity/color";
-import { HUES, TINTS, SPACE, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
+import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
+import { SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, THEME_COLOR_CARD_TONES, AVATAR_SIZE, THEME_COLOR_STATE_TONES, HUES, TINTS, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
 function _resp(prefix, prop) {
   if (!(prop === void 0 || prop === !1))
     return Array.isArray(prop) ? prop.map((value, index) => {
@@ -8,11 +8,11 @@ function _resp(prefix, prop) {
       return index === 0 ? className : `${index}:${className}`;
     }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
 }
-function getClassNames(...classNames) {
+function _getClassNames(...classNames) {
   return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
 }
 function composeClassNames(...classNames) {
-  return unique(getClassNames(...classNames)).join(" ") || void 0;
+  return unique(_getClassNames(...classNames)).join(" ") || void 0;
 }
 function unique(array) {
   return Array.from(new Set(array));
@@ -74,13 +74,20 @@ function radius(props) {
 function shadow(props) {
   return composeClassNames(_resp("shadow", props.shadow));
 }
-const PREFIX = "s-";
+const BREAKPOINTS = {
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400
+}, PREFIX = "s-";
 function scopeClassName(className) {
   if (className !== void 0)
     return `${PREFIX}${className.trim()}`;
 }
 function _comp(...classNames) {
-  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
+  return _getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
 }
 function textOverflow(props) {
   return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
@@ -88,97 +95,108 @@ function textOverflow(props) {
 function width(props) {
   return _resp("w", props.width) ?? "";
 }
-function compileRule(selector, props, context) {
-  let css = compileProperties$1(selector, props);
-  if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
-    for (const name in props["@keyframes"])
-      context.keyframes[name] = props["@keyframes"][name];
-  if (props["@media"])
-    for (const key in props["@media"])
-      context.media[key] || (context.media[key] = {}), context.media[key][selector] = props["@media"][key];
-  return css;
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
 }
-function compileProperties$1(selector, props) {
-  let css = "{";
-  for (const key in props) {
-    if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
-    const value = props[key], valueArr = Array.isArray(value) ? value : [value];
-    for (const v of valueArr)
-      css += toSnakeCase$1(key) + ":" + v + ";";
-  }
-  return css === "{" ? "" : selector + css + "}";
+function isArray(value) {
+  return Array.isArray(value);
 }
-function compileNestedRules(selector, props, context) {
-  if (!props) return "";
-  let css = "";
-  for (const [_selector, _props] of Object.entries(props))
-    css += `
-` + compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context);
-  return css;
+function rem(value) {
+  return value === 0 ? "0" : `${value / 16}rem`;
 }
-function toSnakeCase$1(value) {
-  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+function px(value) {
+  return value === 0 ? "0" : `${value}px`;
 }
-function compilePalette() {
-  const props = {
-    ...compileHues(),
-    "--black": color.black.hex,
-    "--white": color.white.hex
-  };
-  return compileRule(":root", props, {
-    keyframes: {},
-    media: {}
-  });
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
 }
-function compileHues() {
-  const rules2 = {};
-  for (const hue of HUES)
-    for (const tint of TINTS)
-      rules2[`--${hue}-${tint}`] = color[hue][tint].hex;
-  return rules2;
+function _compileStyle(style) {
+  let css = "";
+  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
+    for (const [name, value] of Object.entries(style.keyframes)) {
+      let keyframesCss = `@keyframes ${name} {
+`;
+      for (const [key, props] of Object.entries(value))
+        keyframesCss += `  ${key} {
+`, keyframesCss += compileProperties(props), keyframesCss += `}
+`;
+      keyframesCss += `
 }
-function _mergeStyles(styles) {
-  const keyframes2 = {}, layers = {}, rules2 = {};
-  for (const s of styles)
-    if (s) {
-      Object.assign(keyframes2, s.keyframes);
-      for (const layerName in s.layers)
-        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
-      Object.assign(rules2, s.rules);
+
+`, css += keyframesCss;
     }
-  return {
-    keyframes: keyframes2,
-    layers,
-    rules: rules2
-  };
+  if (style.layers && Object.keys(style.layers).length > 0)
+    for (const [layerName, layerRules] of Object.entries(style.layers))
+      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
+`, css += compileStyleRules(layerRules), css += `}
+
+`);
+  return css;
 }
-function _responsiveRule(rules2, _name, properties) {
-  const name = _name.replace(/\./g, "_");
-  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 360px)": properties
-    }
-  }, rules2[`.2\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 600px)": properties
-    }
-  }, rules2[`.3\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 900px)": properties
-    }
-  }, rules2[`.4\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1200px)": properties
-    }
-  }, rules2[`.5\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1800px)": properties
+function compileStyleRules(rules2) {
+  let css = "";
+  const mediaMap = /* @__PURE__ */ new Map();
+  for (const [selector, properties] of Object.entries(rules2))
+    if (properties) {
+      if (properties["@media"])
+        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
+          const arr = mediaMap.get(mediaQuery) ?? [];
+          arr.push({
+            selector,
+            props: mediaProps
+          }), mediaMap.set(mediaQuery, arr);
+        }
+      css += compileStyleRule(selector, properties);
     }
-  }, rules2[`.6\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 2400px)": properties
+  for (const [mediaQuery, mediaRules] of mediaMap) {
+    css += `@media ${mediaQuery} {
+`;
+    for (const rule of mediaRules)
+      css += compileStyleRule(rule.selector, rule.props);
+    css += `}
+
+`;
+  }
+  return css;
+}
+function compileStyleRule(_selector, properties) {
+  let css = "";
+  const {
+    _prefix = !0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    "@media": _mediaProps,
+    "@nest": nestedProps,
+    ...restProperties
+  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
+  if (Object.entries(restProperties).length && (css += `${selector} {
+`, css += compileProperties(restProperties), css += `}
+
+`), nestedProps)
+    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
+      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
+      css += `${nestedSelector.replace(/&/g, selector)} {
+`, css += compileProperties(nestedProperties), css += `}
+
+`;
     }
-  };
+  return css;
+}
+function compileProperties(props) {
+  let css = "";
+  const propEntries = Object.entries(props);
+  for (const [key, value] of propEntries)
+    if (!key.startsWith("@"))
+      if (isArray(value))
+        for (const item of value)
+          css += `  ${toSnakeCase(key)}: ${item};
+`;
+      else
+        css += `  ${toSnakeCase(key)}: ${value};
+`;
+  return css;
+}
+function toSnakeCase(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
 const varNames = {
   avatar: {
@@ -196,11 +214,22 @@ const varNames = {
       }
     }), {})
   },
+  button: {
+    border: {
+      width: "--button-border-width"
+    },
+    focusRing: {
+      offset: "--button-focus-ring-offset",
+      width: "--button-focus-ring-width"
+    }
+  },
+  card: {
+    shadow: {
+      outline: "--card-shadow-outline"
+    }
+  },
   color: {
     // card scope
-    accent: {
-      fg: "--color-accent-fg"
-    },
     avatar: {
       bg: "--color-avatar-bg",
       fg: "--color-avatar-fg",
@@ -318,99 +347,18 @@ const varNames = {
       variant: "tinted"
     }),
     // tone scopes
-    transparent: buildColorCardVarNames({
-      tone: "transparent"
-    }),
-    default: buildColorCardVarNames({
-      tone: "default"
-    }),
-    neutral: buildColorCardVarNames({
-      tone: "neutral"
-    }),
-    primary: buildColorCardVarNames({
-      tone: "primary"
-    }),
-    suggest: buildColorCardVarNames({
-      tone: "suggest"
-    }),
-    positive: buildColorCardVarNames({
-      tone: "positive"
-    }),
-    caution: buildColorCardVarNames({
-      tone: "caution"
-    }),
-    critical: buildColorCardVarNames({
-      tone: "critical"
-    }),
-    // scheme scope
-    dark: {
-      transparent: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "transparent"
-      }),
-      default: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "default"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      positive: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "positive"
-      }),
-      caution: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "caution"
-      }),
-      critical: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "critical"
-      })
-    },
-    light: {
-      transparent: buildColorCardVarNames({
-        scheme: "light",
-        tone: "transparent"
-      }),
-      default: buildColorCardVarNames({
-        scheme: "light",
-        tone: "default"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "light",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "light",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "light",
-        tone: "suggest"
-      }),
-      positive: buildColorCardVarNames({
-        scheme: "light",
-        tone: "positive"
-      }),
-      caution: buildColorCardVarNames({
-        scheme: "light",
-        tone: "caution"
-      }),
-      critical: buildColorCardVarNames({
-        scheme: "light",
-        tone: "critical"
-      })
-    }
+    ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      tone
+    }), acc), {}),
+    // scheme scopes
+    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      scheme: "dark",
+      tone
+    }), acc), {}),
+    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+      scheme: "light",
+      tone
+    }), acc), {})
   },
   container: {
     0: "--container-0",
@@ -423,6 +371,7 @@ const varNames = {
   font: {
     code: {
       family: "--font-code-family",
+      featureSettings: "--font-code-feature-settings",
       sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -434,7 +383,7 @@ const varNames = {
           iconSize: `--font-code-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-code-weight-regular",
         medium: "--font-code-weight-medium",
         semibold: "--font-code-weight-semibold",
@@ -443,6 +392,7 @@ const varNames = {
     },
     heading: {
       family: "--font-heading-family",
+      featureSettings: "--font-heading-feature-settings",
       sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -454,7 +404,7 @@ const varNames = {
           iconSize: `--font-heading-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-heading-weight-regular",
         medium: "--font-heading-weight-medium",
         semibold: "--font-heading-weight-semibold",
@@ -463,6 +413,7 @@ const varNames = {
     },
     label: {
       family: "--font-label-family",
+      featureSettings: "--font-label-feature-settings",
       sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -474,7 +425,7 @@ const varNames = {
           iconSize: `--font-label-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-label-weight-regular",
         medium: "--font-label-weight-medium",
         semibold: "--font-label-weight-semibold",
@@ -483,6 +434,7 @@ const varNames = {
     },
     text: {
       family: "--font-text-family",
+      featureSettings: "--font-text-feature-settings",
       sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
@@ -494,7 +446,7 @@ const varNames = {
           iconSize: `--font-text-${size}-icon-size`
         }
       }), {}),
-      weight: {
+      weights: {
         regular: "--font-text-weight-regular",
         medium: "--font-text-weight-medium",
         semibold: "--font-text-weight-semibold",
@@ -503,125 +455,176 @@ const varNames = {
     }
   },
   input: {
+    border: {
+      width: "--input-border-width"
+    },
+    checkbox: {
+      focusRing: {
+        offset: "--input-checkbox-focus-ring-offset",
+        width: "--input-checkbox-focus-ring-width"
+      },
+      size: "--input-checkbox-size"
+    },
+    radio: {
+      focusRing: {
+        offset: "--input-radio-focus-ring-offset",
+        width: "--input-radio-focus-ring-width"
+      },
+      markSize: "--input-radio-mark-size",
+      size: "--input-radio-size"
+    },
+    select: {
+      focusRing: {
+        offset: "--input-select-focus-ring-offset",
+        width: "--input-select-focus-ring-width"
+      }
+    },
+    switch: {
+      focusRing: {
+        offset: "--input-switch-focus-ring-offset",
+        width: "--input-switch-focus-ring-width"
+      },
+      height: "--input-switch-height",
+      padding: "--input-switch-padding",
+      transitionDurationMs: "--input-switch-transition-duration-ms",
+      transitionTimingFunction: "--input-switch-transition-timing-function",
+      width: "--input-switch-width"
+    },
+    text: {
+      focusRing: {
+        offset: "--input-text-focus-ring-offset",
+        width: "--input-text-focus-ring-width"
+      }
+    },
     fontSize: "--input-font-size",
     lineHeight: "--input-line-height",
     letterSpacing: "--input-letter-spacing",
     ascenderHeight: "--input-ascender-height",
     descenderHeight: "--input-descender-height",
-    // capHeight: `--input-cap-height`,
     gap: "--input-gap",
     padding: "--input-padding"
   },
   radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+    umbra: `--shadow-${shadow2}-umbra`,
+    penumbra: `--shadow-${shadow2}-penumbra`,
+    ambient: `--shadow-${shadow2}-ambient`
+  }])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
+  // color
+  black: "--black",
+  white: "--white",
+  ...COLOR_HUES.reduce((acc, hue) => {
+    const tints = {};
+    for (const tint of COLOR_TINTS)
+      tints[tint] = `--${hue}-${tint}`;
+    return acc[hue] = tints, acc;
+  }, {})
 };
 function buildColorCardVarNames(props) {
   const {
     scheme,
     tone
-  } = props, sourcePrefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
+  } = props, prefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
   return {
-    accent: {
-      fg: `${sourcePrefix}-accent-fg`
-    },
     avatar: {
       gray: {
-        bg: `${sourcePrefix}-avatar-gray-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
+        bg: `${prefix}-avatar-gray-bg`,
+        fg: `${prefix}-avatar-gray-fg`
       },
       blue: {
-        bg: `${sourcePrefix}-avatar-blue-bg`,
-        fg: `${sourcePrefix}-avatar-blue-fg`
+        bg: `${prefix}-avatar-blue-bg`,
+        fg: `${prefix}-avatar-blue-fg`
       },
       purple: {
-        bg: `${sourcePrefix}-avatar-purple-bg`,
-        fg: `${sourcePrefix}-avatar-purple-fg`
+        bg: `${prefix}-avatar-purple-bg`,
+        fg: `${prefix}-avatar-purple-fg`
       },
       magenta: {
-        bg: `${sourcePrefix}-avatar-magenta-bg`,
-        fg: `${sourcePrefix}-avatar-magenta-fg`
+        bg: `${prefix}-avatar-magenta-bg`,
+        fg: `${prefix}-avatar-magenta-fg`
       },
       red: {
-        bg: `${sourcePrefix}-avatar-red-bg`,
-        fg: `${sourcePrefix}-avatar-red-fg`
+        bg: `${prefix}-avatar-red-bg`,
+        fg: `${prefix}-avatar-red-fg`
       },
       orange: {
-        bg: `${sourcePrefix}-avatar-orange-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
+        bg: `${prefix}-avatar-orange-bg`,
+        fg: `${prefix}-avatar-gray-fg`
       },
       yellow: {
-        bg: `${sourcePrefix}-avatar-yellow-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
+        bg: `${prefix}-avatar-yellow-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
       },
       green: {
-        bg: `${sourcePrefix}-avatar-green-bg`,
-        fg: `${sourcePrefix}-avatar-green-fg`
+        bg: `${prefix}-avatar-green-bg`,
+        fg: `${prefix}-avatar-green-fg`
       },
       cyan: {
-        bg: `${sourcePrefix}-avatar-cyan-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
+        bg: `${prefix}-avatar-cyan-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
       }
     },
-    backdrop: `${sourcePrefix}-backdrop`,
+    backdrop: `${prefix}-backdrop`,
     code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-code-fg`,
+      bg: `${prefix}-code-bg`,
+      fg: `${prefix}-code-fg`,
       token: {
-        atrule: `${sourcePrefix}-code-token-atrule`,
-        attrName: `${sourcePrefix}-code-token-attr-name`,
-        attrValue: `${sourcePrefix}-code-token-attr-value`,
-        attribute: `${sourcePrefix}-code-token-attribute`,
-        boolean: `${sourcePrefix}-code-token-boolean`,
-        builtin: `${sourcePrefix}-code-token-builtin`,
-        cdata: `${sourcePrefix}-code-token-cdata`,
-        char: `${sourcePrefix}-code-token-char`,
-        class: `${sourcePrefix}-code-token-class`,
-        className: `${sourcePrefix}-code-token-class-name`,
-        comment: `${sourcePrefix}-code-token-comment`,
-        constant: `${sourcePrefix}-code-token-constant`,
-        deleted: `${sourcePrefix}-code-token-deleted`,
-        doctype: `${sourcePrefix}-code-token-doctype`,
-        entity: `${sourcePrefix}-code-token-entity`,
-        function: `${sourcePrefix}-code-token-function`,
-        hexcode: `${sourcePrefix}-code-token-hexcode`,
-        id: `${sourcePrefix}-code-token-id`,
-        important: `${sourcePrefix}-code-token-important`,
-        inserted: `${sourcePrefix}-code-token-inserted`,
-        keyword: `${sourcePrefix}-code-token-keyword`,
-        number: `${sourcePrefix}-code-token-number`,
-        operator: `${sourcePrefix}-code-token-operator`,
-        prolog: `${sourcePrefix}-code-token-prolog`,
-        property: `${sourcePrefix}-code-token-property`,
-        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
-        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
-        punctuation: `${sourcePrefix}-code-token-punctuation`,
-        regex: `${sourcePrefix}-code-token-regex`,
-        selector: `${sourcePrefix}-code-token-selector`,
-        string: `${sourcePrefix}-code-token-string`,
-        symbol: `${sourcePrefix}-code-token-symbol`,
-        tag: `${sourcePrefix}-code-token-tag`,
-        unit: `${sourcePrefix}-code-token-unit`,
-        url: `${sourcePrefix}-code-token-url`,
-        variable: `${sourcePrefix}-code-token-variable`
+        atrule: `${prefix}-code-token-atrule`,
+        attrName: `${prefix}-code-token-attr-name`,
+        attrValue: `${prefix}-code-token-attr-value`,
+        attribute: `${prefix}-code-token-attribute`,
+        boolean: `${prefix}-code-token-boolean`,
+        builtin: `${prefix}-code-token-builtin`,
+        cdata: `${prefix}-code-token-cdata`,
+        char: `${prefix}-code-token-char`,
+        class: `${prefix}-code-token-class`,
+        className: `${prefix}-code-token-class-name`,
+        comment: `${prefix}-code-token-comment`,
+        constant: `${prefix}-code-token-constant`,
+        deleted: `${prefix}-code-token-deleted`,
+        doctype: `${prefix}-code-token-doctype`,
+        entity: `${prefix}-code-token-entity`,
+        function: `${prefix}-code-token-function`,
+        hexcode: `${prefix}-code-token-hexcode`,
+        id: `${prefix}-code-token-id`,
+        important: `${prefix}-code-token-important`,
+        inserted: `${prefix}-code-token-inserted`,
+        keyword: `${prefix}-code-token-keyword`,
+        number: `${prefix}-code-token-number`,
+        operator: `${prefix}-code-token-operator`,
+        prolog: `${prefix}-code-token-prolog`,
+        property: `${prefix}-code-token-property`,
+        pseudoClass: `${prefix}-code-token-pseudo-class`,
+        pseudoElement: `${prefix}-code-token-pseudo-element`,
+        punctuation: `${prefix}-code-token-punctuation`,
+        regex: `${prefix}-code-token-regex`,
+        selector: `${prefix}-code-token-selector`,
+        string: `${prefix}-code-token-string`,
+        symbol: `${prefix}-code-token-symbol`,
+        tag: `${prefix}-code-token-tag`,
+        unit: `${prefix}-code-token-unit`,
+        url: `${prefix}-code-token-url`,
+        variable: `${prefix}-code-token-variable`
       }
     },
-    focusRing: `${sourcePrefix}-focus-ring`,
+    focusRing: `${prefix}-focus-ring`,
     link: {
-      fg: `${sourcePrefix}-link-fg`
+      fg: `${prefix}-link-fg`
     },
     muted: {
-      bg: `${sourcePrefix}-muted-bg`,
-      fg: `${sourcePrefix}-muted-fg`
+      bg: `${prefix}-muted-bg`,
+      fg: `${prefix}-muted-fg`
     },
     shadow: {
-      outline: `${sourcePrefix}-shadow-outline`,
-      umbra: `${sourcePrefix}-shadow-umbra`,
-      penumbra: `${sourcePrefix}-shadow-penumbra`,
-      ambient: `${sourcePrefix}-shadow-ambient`
+      outline: `${prefix}-shadow-outline`,
+      umbra: `${prefix}-shadow-umbra`,
+      penumbra: `${prefix}-shadow-penumbra`,
+      ambient: `${prefix}-shadow-ambient`
     },
     skeleton: {
-      from: `${sourcePrefix}-skeleton-from`,
-      to: `${sourcePrefix}-skeleton-to`
+      from: `${prefix}-skeleton-from`,
+      to: `${prefix}-skeleton-to`
     },
     solid: buildColorVariantVarNames({
       scheme,
@@ -640,57 +643,119 @@ function buildColorVariantVarNames(options) {
     scheme,
     tone,
     variant
-  } = options, _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
+  } = options, prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
     bg: {
-      0: `${_prefix}-bg-0`,
-      1: `${_prefix}-bg-1`,
-      2: `${_prefix}-bg-2`,
-      3: `${_prefix}-bg-3`,
-      4: `${_prefix}-bg-4`
+      0: `${prefix}-bg-0`,
+      1: `${prefix}-bg-1`,
+      2: `${prefix}-bg-2`,
+      3: `${prefix}-bg-3`,
+      4: `${prefix}-bg-4`
     },
     border: {
-      0: `${_prefix}-border-0`,
-      1: `${_prefix}-border-1`,
-      2: `${_prefix}-border-2`,
-      3: `${_prefix}-border-3`,
-      4: `${_prefix}-border-4`
+      0: `${prefix}-border-0`,
+      1: `${prefix}-border-1`,
+      2: `${prefix}-border-2`,
+      3: `${prefix}-border-3`,
+      4: `${prefix}-border-4`
     },
     fg: {
-      0: `${_prefix}-fg-0`,
-      1: `${_prefix}-fg-1`,
-      2: `${_prefix}-fg-2`,
-      3: `${_prefix}-fg-3`,
-      4: `${_prefix}-fg-4`
+      0: `${prefix}-fg-0`,
+      1: `${prefix}-fg-1`,
+      2: `${prefix}-fg-2`,
+      3: `${prefix}-fg-3`,
+      4: `${prefix}-fg-4`
     }
   };
   for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
+    const _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
-        0: `${prefix}-bg-0`,
-        1: `${prefix}-bg-1`,
-        2: `${prefix}-bg-2`,
-        3: `${prefix}-bg-3`,
-        4: `${prefix}-bg-4`
+        0: `${_prefix}-bg-0`,
+        1: `${_prefix}-bg-1`,
+        2: `${_prefix}-bg-2`,
+        3: `${_prefix}-bg-3`,
+        4: `${_prefix}-bg-4`
       },
       border: {
-        0: `${prefix}-border-0`,
-        1: `${prefix}-border-1`,
-        2: `${prefix}-border-2`,
-        3: `${prefix}-border-3`,
-        4: `${prefix}-border-4`
+        0: `${_prefix}-border-0`,
+        1: `${_prefix}-border-1`,
+        2: `${_prefix}-border-2`,
+        3: `${_prefix}-border-3`,
+        4: `${_prefix}-border-4`
       },
       fg: {
-        0: `${prefix}-fg-0`,
-        1: `${prefix}-fg-1`,
-        2: `${prefix}-fg-2`,
-        3: `${prefix}-fg-3`,
-        4: `${prefix}-fg-4`
+        0: `${_prefix}-fg-0`,
+        1: `${_prefix}-fg-1`,
+        2: `${_prefix}-fg-2`,
+        3: `${_prefix}-fg-3`,
+        4: `${_prefix}-fg-4`
       }
     };
   }
   return vars2;
 }
+function compilePalette() {
+  return _compileStyle({
+    layers: {
+      theme: {
+        ":root": compilePaletteProperties()
+      }
+    }
+  });
+}
+function compilePaletteProperties() {
+  const rules2 = {
+    [varNames.black]: color.black.hex,
+    [varNames.white]: color.white.hex
+  };
+  for (const hue of HUES)
+    for (const tint of TINTS)
+      rules2[varNames[hue][tint]] = color[hue][tint].hex;
+  return rules2;
+}
+function _mergeStyles(styles) {
+  const keyframes2 = {}, layers = {}, rules2 = {};
+  for (const s of styles)
+    if (s) {
+      Object.assign(keyframes2, s.keyframes);
+      for (const layerName in s.layers)
+        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
+      Object.assign(rules2, s.rules);
+    }
+  return {
+    keyframes: keyframes2,
+    layers,
+    rules: rules2
+  };
+}
+function _responsiveRule(rules2, _name, properties) {
+  const name = _name.replace(/\./g, "_");
+  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 360px)": properties
+    }
+  }, rules2[`.2\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 600px)": properties
+    }
+  }, rules2[`.3\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 900px)": properties
+    }
+  }, rules2[`.4\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1200px)": properties
+    }
+  }, rules2[`.5\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1800px)": properties
+    }
+  }, rules2[`.6\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 2400px)": properties
+    }
+  };
+}
 const darkColorVars = {};
 for (const tone of THEME_COLOR_CARD_TONES)
   darkColorVars[tone] = buildColorCardVars({
@@ -704,9 +769,6 @@ for (const tone of THEME_COLOR_CARD_TONES)
     tone
   });
 const colorVars = {
-  accent: {
-    fg: `var(${varNames.color.accent.fg})`
-  },
   avatar: {
     bg: `var(${varNames.color.avatar.bg})`,
     fg: `var(${varNames.color.avatar.fg})`,
@@ -843,6 +905,11 @@ const colorVars = {
       }
     }), {})
   },
+  card: {
+    shadow: {
+      outline: `var(${varNames.card.shadow.outline})`
+    }
+  },
   color: colorVars,
   container: {
     0: `var(${varNames.container[0]})`,
@@ -867,10 +934,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.code.weight.regular})`,
-        medium: `var(${varNames.font.code.weight.medium})`,
-        semibold: `var(${varNames.font.code.weight.semibold})`,
-        bold: `var(${varNames.font.code.weight.bold})`
+        regular: `var(${varNames.font.code.weights.regular})`,
+        medium: `var(${varNames.font.code.weights.medium})`,
+        semibold: `var(${varNames.font.code.weights.semibold})`,
+        bold: `var(${varNames.font.code.weights.bold})`
       }
     },
     heading: {
@@ -887,10 +954,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.heading.weight.regular})`,
-        medium: `var(${varNames.font.heading.weight.medium})`,
-        semibold: `var(${varNames.font.heading.weight.semibold})`,
-        bold: `var(${varNames.font.heading.weight.bold})`
+        regular: `var(${varNames.font.heading.weights.regular})`,
+        medium: `var(${varNames.font.heading.weights.medium})`,
+        semibold: `var(${varNames.font.heading.weights.semibold})`,
+        bold: `var(${varNames.font.heading.weights.bold})`
       }
     },
     label: {
@@ -907,10 +974,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.label.weight.regular})`,
-        medium: `var(${varNames.font.label.weight.medium})`,
-        semibold: `var(${varNames.font.label.weight.semibold})`,
-        bold: `var(${varNames.font.label.weight.bold})`
+        regular: `var(${varNames.font.label.weights.regular})`,
+        medium: `var(${varNames.font.label.weights.medium})`,
+        semibold: `var(${varNames.font.label.weights.semibold})`,
+        bold: `var(${varNames.font.label.weights.bold})`
       }
     },
     text: {
@@ -927,10 +994,10 @@ const colorVars = {
         }
       }), {}),
       weight: {
-        regular: `var(${varNames.font.text.weight.regular})`,
-        medium: `var(${varNames.font.text.weight.medium})`,
-        semibold: `var(${varNames.font.text.weight.semibold})`,
-        bold: `var(${varNames.font.text.weight.bold})`
+        regular: `var(${varNames.font.text.weights.regular})`,
+        medium: `var(${varNames.font.text.weights.medium})`,
+        semibold: `var(${varNames.font.text.weights.semibold})`,
+        bold: `var(${varNames.font.text.weights.bold})`
       }
     }
   },
@@ -951,7 +1018,21 @@ const colorVars = {
     }
   },
   radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+    umbra: `var(${varNames.shadow[shadow2].umbra})`,
+    penumbra: `var(${varNames.shadow[shadow2].penumbra})`,
+    ambient: `var(${varNames.shadow[shadow2].ambient})`
+  }])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
+  // color
+  black: `var(${varNames.black})`,
+  white: `var(${varNames.white})`,
+  ...COLOR_HUES.reduce((acc, hue) => {
+    const tints = {};
+    for (const tint of COLOR_TINTS)
+      tints[tint] = `var(--${hue}-${tint})`;
+    return acc[hue] = tints, acc;
+  }, {})
 };
 function buildColorCardVars(props) {
   const {
@@ -959,9 +1040,6 @@ function buildColorCardVars(props) {
     tone
   } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
   return {
-    accent: {
-      fg: `var(${prefix.accent.fg})`
-    },
     avatar: {
       ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
@@ -1292,9 +1370,8 @@ const flexStyle = {
   layers: {
     util: util$n
   }
-}, rules$3 = {
+}, primitive$q = {
   ".font": {
-    // 'position': 'relative',
     fontFamily: "var(--font-family)",
     fontFeatureSettings: "var(--font-feature-settings)",
     fontSize: "var(--font-size)",
@@ -1349,24 +1426,24 @@ const flexStyle = {
     "--font-weight": "var(--font-weight-bold)"
   }
 };
-_responsiveRule(rules$3, "text-align-initial", {
+_responsiveRule(primitive$q, "text-align-initial", {
   textAlign: "initial"
 });
-_responsiveRule(rules$3, "text-align-left", {
+_responsiveRule(primitive$q, "text-align-left", {
   textAlign: "left"
 });
-_responsiveRule(rules$3, "text-align-center", {
+_responsiveRule(primitive$q, "text-align-center", {
   textAlign: "center"
 });
-_responsiveRule(rules$3, "text-align-right", {
+_responsiveRule(primitive$q, "text-align-right", {
   textAlign: "right"
 });
-_responsiveRule(rules$3, "text-align-justify", {
+_responsiveRule(primitive$q, "text-align-justify", {
   textAlign: "justify"
 });
 const fontStyle = {
   layers: {
-    primitive: rules$3
+    primitive: primitive$q
   }
 }, util$m = {};
 for (const space of SPACE)
@@ -2018,24 +2095,12 @@ const radiusStyle = {
     util: util$2
   }
 }, util$1 = {};
-_responsiveRule(util$1, "shadow-0", {
-  boxShadow: "none"
-});
-_responsiveRule(util$1, "shadow-1", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-2", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-3", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-4", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-5", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
+for (const shadow2 of SHADOW)
+  shadow2 === 0 ? _responsiveRule(util$1, "shadow-0", {
+    boxShadow: "none"
+  }) : _responsiveRule(util$1, `shadow-${shadow2}`, {
+    boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[shadow2].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[shadow2].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[shadow2].ambient} ${vars.color.shadow.ambient}`].join(", ")
+  });
 const shadowStyle = {
   layers: {
     util: util$1
@@ -2157,8 +2222,8 @@ const widthStyle = {
   layers: {
     component: component$3
   }
-}, keyframes$1 = {
-  "skeleton-pulse": {
+}, KEYFRAMES_PULSE = "skeleton-pulse", keyframes$1 = {
+  [KEYFRAMES_PULSE]: {
     "0%": {
       backgroundPosition: "100%"
     },
@@ -2168,8 +2233,8 @@ const widthStyle = {
   }
 }, component$2 = {
   ".skeleton": {
-    "--color-skeleton-from": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    "--color-skeleton-to": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
+    [varNames.color.skeleton.from]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
+    [varNames.color.skeleton.to]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
     backgroundColor: vars.color.skeleton.from,
     backgroundPosition: "100%",
     backgroundSize: "200% 100%",
@@ -2179,7 +2244,7 @@ const widthStyle = {
     "@nest": {
       "&[data-animated]": {
         backgroundImage: ["linear-gradient(to right", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
-        animationName: "skeleton-pulse",
+        animationName: KEYFRAMES_PULSE,
         animationTimingFunction: "ease-in-out",
         animationIterationCount: "infinite",
         animationDuration: "2000ms"
@@ -2334,8 +2399,13 @@ const skeletonStyle = {
       }
     }
   },
+  ".arrow-stroke-mask": {
+    // @ts-expect-error `y` is not a valid property in 'csstype'
+    y: vars.shadow.outline
+  },
   ".arrow-stroke": {
-    stroke: vars.color.shadow.outline
+    stroke: vars.color.shadow.outline,
+    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`
   },
   ".arrow-shape": {
     fill: vars.color.bg
@@ -2468,21 +2538,13 @@ const _inputStyle = {
   layers: {
     primitive: primitive$o
   }
-}, toneMap$2 = {
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
 }, primitive$n = {
   ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
-    "--color-bg": vars.color.tinted.bg[0],
-    "--color-border": vars.color.tinted.border[2],
-    "--color-fg": vars.color.tinted.fg[2],
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
     "@nest": {
       "&:is(button)": {
         WebkitFontSmoothing: "inherit",
@@ -2508,32 +2570,32 @@ const _inputStyle = {
             // cursor: 'pointer',
           },
           "&:not([data-disabled]):hover": {
-            "--color-bg": vars.color.tinted.bg[1],
-            "--color-border": vars.color.tinted.border[3],
-            "--color-fg": vars.color.tinted.fg[1],
-            "--color-muted-bg": vars.color.tinted.bg[2],
-            "--color-muted-fg": vars.color.tinted.fg[4]
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
           },
           '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]': {
-            "--color-bg": vars.color.tinted.bg[2],
-            "--color-border": vars.color.tinted.border[4],
-            "--color-fg": vars.color.tinted.fg[0],
-            "--color-muted-bg": vars.color.tinted.bg[3],
-            "--color-muted-fg": vars.color.tinted.fg[4]
+            [varNames.color.bg]: vars.color.tinted.bg[2],
+            [varNames.color.border]: vars.color.tinted.border[4],
+            [varNames.color.fg]: vars.color.tinted.fg[0],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
           },
           "&:not([data-disabled]):focus": {
-            "--color-bg": vars.color.solid.bg[0],
-            "--color-border": vars.color.solid.border[1],
-            "--color-fg": vars.color.solid.fg[1],
-            "--color-muted-bg": vars.color.solid.bg[1],
-            "--color-muted-fg": vars.color.solid.fg[3]
+            [varNames.color.bg]: vars.color.solid.primary.bg[0],
+            [varNames.color.border]: vars.color.solid.primary.border[1],
+            [varNames.color.fg]: vars.color.solid.primary.fg[0],
+            [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+            [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
           },
           "&[data-disabled]": {
-            "--color-bg": vars.color.tinted.bg[0],
-            "--color-border": vars.color.tinted.border[1],
-            "--color-fg": vars.color.tinted.border[4],
-            "--color-muted-bg": vars.color.tinted.bg[1],
-            "--color-muted-fg": vars.color.tinted.border[4]
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.color.muted.fg]: vars.color.tinted.border[4]
           }
         }
       }
@@ -2548,7 +2610,7 @@ function buildSelectableTones() {
   const rules2 = {};
   for (const tone of THEME_COLOR_STATE_TONES) {
     const target = varNames.color, source = vars.color;
-    rules2[`&.${toneMap$2[tone]}`] = {
+    rules2[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
       [target.tinted.bg[1]]: source.tinted[tone].bg[1],
       [target.tinted.bg[2]]: source.tinted[tone].bg[2],
@@ -2585,6 +2647,7 @@ function buildSelectableTones() {
 }
 const primitive$m = {
   ".avatar": {
+    [varNames.color.fg]: vars.color.avatar.fg,
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
     boxSizing: "border-box",
@@ -2595,11 +2658,7 @@ const primitive$m = {
     height: vars.avatar.size,
     borderRadius: vars.avatar.size,
     "@nest": {
-      '&[data-status="inactive"]': {
-        opacity: 0.5
-      },
-      // &:is(button)
-      "&:is(button)": {
+      "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         margin: 0,
@@ -2609,11 +2668,11 @@ const primitive$m = {
         color: "inherit",
         outline: "none"
       },
-      "&:is(button):focus": {
+      "button&:focus": {
         outline: "var(--avatar-focus-ring-width) solid var(--color-focus-ring)",
         outlineOffset: "var(--avatar-focus-ring-offset)"
       },
-      "&:is(button):focus:not(:focus-visible)": {
+      "button&:focus:not(:focus-visible)": {
         boxShadow: "none"
       },
       ":disabled &, [data-disabled] &": {
@@ -2763,7 +2822,7 @@ const badgeStyle = {
   layers: {
     primitive: primitive$k
   }
-}, toneMap$1 = {
+}, toneMap = {
   default: "default",
   neutral: "neutral",
   suggest: "suggest",
@@ -2824,7 +2883,7 @@ const badgeStyle = {
 };
 for (const tone of THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
+  primitive$j[`.button.${variantMap.default}.${toneMap[tone]}`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
@@ -2854,14 +2913,25 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
       }
     }
-  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
+  }, primitive$j[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
     [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
@@ -2894,14 +2964,25 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
-  }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
+  }, primitive$j[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
     boxShadow: "none",
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
@@ -2932,11 +3013,22 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.avatar.gray.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[0],
+        [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.border[4],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
   };
@@ -2945,16 +3037,6 @@ const buttonStyle = {
   layers: {
     primitive: primitive$j
   }
-}, toneMap = {
-  transparent: "transparent",
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical",
-  inherit: void 0
 }, primitive$i = {
   ".card": {
     backgroundColor: vars.color.bg,
@@ -3029,7 +3111,7 @@ const buttonStyle = {
       //   '--color-muted-bg': vars.color.solid.bg[1],
       //   '--color-muted-fg': vars.color.solid.fg[3],
       // },
-      "a&[data-disabled]), button&[data-disabled]": {
+      "a&[data-disabled], button&[data-disabled]": {
         [varNames.color.bg]: vars.color.tinted.default.bg[2],
         [varNames.color.border]: vars.color.tinted.default.border[4],
         [varNames.color.fg]: vars.color.tinted.default.fg[0],
@@ -3080,9 +3162,10 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
     "--card-shadow-ambient-color": vars.color.shadow.ambient
+    // todo
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-  }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
+  }), primitive$i[`.card.${tone}`] = toneProps;
 }
 const cardStyle = {
   layers: {
@@ -3090,9 +3173,6 @@ const cardStyle = {
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
-  Object.assign(toneProps, {
-    [_varNames.accent.fg]: _vars.accent.fg
-  });
   for (const hue of THEME_COLOR_AVATAR_COLORS)
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
@@ -3908,115 +3988,115 @@ const textStyle = {
     _prefix: !1,
     "@nest": {
       "&.atrule": {
-        color: "var(--color-token-atrule)"
+        color: vars.color.code.token.atrule
       },
       "&.attr-name": {
-        color: "var(--color-token-attr-name)"
+        color: vars.color.code.token.attrName
       },
       "&.attr-value": {
-        color: "var(--color-token-attr-value)"
+        color: vars.color.code.token.attrValue
       },
       "&.attribute": {
-        color: "var(--color-token-attribute)"
+        color: vars.color.code.token.attribute
       },
       "&.boolean": {
-        color: "var(--color-token-boolean)"
+        color: vars.color.code.token.boolean
       },
       "&.builtin": {
-        color: "var(--color-token-builtin)"
+        color: vars.color.code.token.builtin
       },
       "&.cdata": {
-        color: "var(--color-token-cdata)"
+        color: vars.color.code.token.cdata
       },
       "&.char": {
-        color: "var(--color-token-char)"
+        color: vars.color.code.token.char
       },
       "&.class": {
-        color: "var(--color-token-class)"
+        color: vars.color.code.token.class
       },
       "&.class-name": {
-        color: "var(--color-token-class-name)"
+        color: vars.color.code.token.className
       },
       "&.comment": {
-        color: "var(--color-token-comment)"
+        color: vars.color.code.token.comment
       },
       "&.constant": {
-        color: "var(--color-token-constant)"
+        color: vars.color.code.token.constant
       },
       "&.deleted": {
-        color: "var(--color-token-deleted)"
+        color: vars.color.code.token.deleted
       },
       "&.doctype": {
-        color: "var(--color-token-doctype)"
+        color: vars.color.code.token.doctype
       },
       "&.entity": {
-        color: "var(--color-token-entity)"
+        color: vars.color.code.token.entity
       },
       "&.function": {
-        color: "var(--color-token-function)"
+        color: vars.color.code.token.function
       },
       "&.hexcode": {
-        color: "var(--color-token-hexcode)"
+        color: vars.color.code.token.hexcode
       },
       "&.id": {
-        color: "var(--color-token-id)"
+        color: vars.color.code.token.id
       },
       "&.important": {
-        color: "var(--color-token-important)"
+        color: vars.color.code.token.important
       },
       "&.inserted": {
-        color: "var(--color-token-inserted)"
+        color: vars.color.code.token.inserted
       },
       "&.keyword": {
-        color: "var(--color-token-keyword)"
+        color: vars.color.code.token.keyword
       },
       "&.number": {
-        color: "var(--color-token-number)"
+        color: vars.color.code.token.number
       },
       "&.operator": {
-        color: "var(--color-token-operator)"
+        color: vars.color.code.token.operator
       },
       "&.prolog": {
-        color: "var(--color-token-prolog)"
+        color: vars.color.code.token.prolog
       },
       "&.property": {
-        color: "var(--color-token-property)"
+        color: vars.color.code.token.property
       },
       "&.pseudo-class": {
-        color: "var(--color-token-pseudo-class)"
+        color: vars.color.code.token.pseudoClass
       },
       "&.pseudo-element": {
-        color: "var(--color-token-pseudo-element)"
+        color: vars.color.code.token.pseudoElement
       },
       "&.punctuation": {
-        color: "var(--color-token-punctuation)"
+        color: vars.color.code.token.punctuation
       },
       "&.attr-value &:not(.attr-equals).punctuation": {
         color: "inherit"
       },
       "&.regex": {
-        color: "var(--color-token-regex)"
+        color: vars.color.code.token.regex
       },
       "&.selector": {
-        color: "var(--color-token-selector)"
+        color: vars.color.code.token.selector
       },
       "&.string": {
-        color: "var(--color-token-string)"
+        color: vars.color.code.token.string
       },
       "&.symbol": {
-        color: "var(--color-token-symbol)"
+        color: vars.color.code.token.symbol
       },
       "&.tag": {
-        color: "var(--color-token-tag)"
+        color: vars.color.code.token.tag
       },
       "&.unit": {
-        color: "var(--color-token-unit)"
+        color: vars.color.code.token.unit
       },
       "&.url": {
-        color: "var(--color-token-url)"
+        color: vars.color.code.token.url
       },
       "&.variable": {
-        color: "var(--color-token-variable)"
+        color: vars.color.code.token.variable
       }
     }
   }
@@ -4055,8 +4135,8 @@ const textStyle = {
   layers: {
     primitive
   }
-}, systemStyle = _mergeStyles([
-  // NOTE: order matters in CSS
+}, _systemStyle = _mergeStyles([
+  // NOTE: Order matters in CSS!
   {
     // define order of layers
     layers: {
@@ -4139,121 +4219,25 @@ const textStyle = {
   toastStyle,
   treeStyle
 ]);
-function isRecord(value) {
-  return value !== null && typeof value == "object" && !Array.isArray(value);
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function rem(value) {
-  return value === 0 ? "0" : `${value / 16}rem`;
-}
-function px(value) {
-  return value === 0 ? "0" : `${value}px`;
-}
-function toBoxShadow(value) {
-  return value ? value.map((n) => px(n)).join(" ") : "none";
-}
-function compileStyle(style) {
-  let css = "";
-  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
-    for (const [name, value] of Object.entries(style.keyframes)) {
-      let keyframesCss = `@keyframes ${name} {
-`;
-      for (const [key, props] of Object.entries(value))
-        keyframesCss += `  ${key} {
-`, keyframesCss += compileProperties(props), keyframesCss += `}
-`;
-      keyframesCss += `
-}
-`, css += keyframesCss;
-    }
-  if (style.layers && Object.keys(style.layers).length > 0)
-    for (const [layerName, layerRules] of Object.entries(style.layers))
-      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
-`, css += compileStyleRules(layerRules), css += `}
-
-`);
-  return css;
-}
-function compileStyleRules(rules2) {
-  let css = "";
-  const mediaMap = /* @__PURE__ */ new Map();
-  for (const [selector, properties] of Object.entries(rules2))
-    if (properties) {
-      if (properties["@media"])
-        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
-          const arr = mediaMap.get(mediaQuery) ?? [];
-          arr.push({
-            selector,
-            props: mediaProps
-          }), mediaMap.set(mediaQuery, arr);
-        }
-      css += compileStyleRule(selector, properties);
-    }
-  for (const [mediaQuery, mediaRules] of mediaMap) {
-    css += `@media ${mediaQuery} {
-`;
-    for (const rule of mediaRules)
-      css += compileStyleRule(rule.selector, rule.props);
-    css += `}
-
-`;
-  }
-  return css;
-}
-function compileStyleRule(_selector, properties) {
-  let css = "";
-  const {
-    _prefix = !0,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    "@media": _mediaProps,
-    "@nest": nestedProps,
-    ...restProperties
-  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
-  if (Object.entries(restProperties).length && (css += `${selector} {
-`, css += compileProperties(restProperties), css += `}
-
-`), nestedProps)
-    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
-      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
-      css += `${nestedSelector.replace(/&/g, selector)} {
-`, css += compileProperties(nestedProperties), css += `}
-
-`;
-    }
-  return css;
-}
-function compileProperties(props) {
-  let css = "";
-  const propEntries = Object.entries(props);
-  for (const [key, value] of propEntries)
-    if (!key.startsWith("@"))
-      if (isArray(value))
-        for (const item of value)
-          css += `  ${toSnakeCase(key)}: ${item};
-`;
-      else
-        css += `  ${toSnakeCase(key)}: ${value};
-`;
-  return css;
-}
-function toSnakeCase(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
 function compileSystem() {
-  return compileStyle(systemStyle);
+  return _compileStyle(_systemStyle);
 }
+const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
 function compileTheme_v3(theme) {
-  return compileRule(":root", compileThemeProperties(theme), {
-    keyframes: {},
-    media: {}
+  return _compileStyle({
+    layers: {
+      theme: {
+        ":root": compileThemeProperties(theme)
+      }
+    }
   });
 }
 function compileThemeProperties(theme) {
   return {
     ...buildAvatarThemeProperties(theme),
     ...buildButtonThemeProperties(theme),
+    [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
+    ...buildColorThemeProperties(theme),
     ...buildContainerThemeProperties(theme),
     ...buildFontCodeThemeProperties(theme),
     ...buildFontHeadingThemeProperties(theme),
@@ -4262,167 +4246,171 @@ function compileThemeProperties(theme) {
     ...buildInputThemeProperties(theme),
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
-    ...buildSpaceThemeProperties(theme),
-    ...buildColorThemeProperties(theme)
+    ...buildSpaceThemeProperties(theme)
   };
 }
 function buildAvatarThemeProperties(theme) {
   return {
-    "--avatar-focus-ring-offset": px(theme.avatar.focusRing.offset),
-    "--avatar-focus-ring-width": px(theme.avatar.focusRing.width),
-    "--avatar-0-distance": px(theme.avatar.sizes[0].distance),
-    "--avatar-0-size": px(theme.avatar.sizes[0].size),
-    "--avatar-1-distance": px(theme.avatar.sizes[1].distance),
-    "--avatar-1-size": px(theme.avatar.sizes[1].size),
-    "--avatar-2-distance": px(theme.avatar.sizes[2].distance),
-    "--avatar-2-size": px(theme.avatar.sizes[2].size),
-    "--avatar-3-distance": px(theme.avatar.sizes[3].distance),
-    "--avatar-3-size": px(theme.avatar.sizes[3].size)
+    [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
+    [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
+    [varNames.avatar.sizes[0].distance]: rem(theme.avatar.sizes[0].distance),
+    [varNames.avatar.sizes[0].size]: rem(theme.avatar.sizes[0].size),
+    [varNames.avatar.sizes[1].distance]: rem(theme.avatar.sizes[1].distance),
+    [varNames.avatar.sizes[1].size]: rem(theme.avatar.sizes[1].size),
+    [varNames.avatar.sizes[2].distance]: rem(theme.avatar.sizes[2].distance),
+    [varNames.avatar.sizes[2].size]: rem(theme.avatar.sizes[2].size),
+    [varNames.avatar.sizes[3].distance]: rem(theme.avatar.sizes[3].distance),
+    [varNames.avatar.sizes[3].size]: rem(theme.avatar.sizes[3].size)
   };
 }
 function buildButtonThemeProperties(theme) {
   return {
-    "--button-border-width": px(theme.button.border.width),
-    "--button-focus-ring-offset": px(theme.button.focusRing.offset),
-    "--button-focus-ring-width": px(theme.button.focusRing.width)
-    // [`--button-text-weight`]: theme.button.textWeight,
+    [varNames.button.border.width]: px(theme.button.border.width),
+    [varNames.button.focusRing.offset]: px(theme.button.focusRing.offset),
+    [varNames.button.focusRing.width]: px(theme.button.focusRing.width)
   };
 }
 function buildContainerThemeProperties(theme) {
   return {
-    "--container-0": px(theme.container[0]),
-    "--container-1": px(theme.container[1]),
-    "--container-2": px(theme.container[2]),
-    "--container-3": px(theme.container[3]),
-    "--container-4": px(theme.container[4]),
-    "--container-5": px(theme.container[5])
+    [varNames.container[0]]: rem(theme.container[0]),
+    [varNames.container[1]]: rem(theme.container[1]),
+    [varNames.container[2]]: rem(theme.container[2]),
+    [varNames.container[3]]: rem(theme.container[3]),
+    [varNames.container[4]]: rem(theme.container[4]),
+    [varNames.container[5]]: rem(theme.container[5])
   };
 }
 function buildFontCodeThemeProperties(theme) {
-  const props = {
-    "--font-code-family": theme.font.code.family,
-    "--font-code-feature-settings": theme.font.code.featureSettings,
-    "--font-code-weight-regular": `${theme.font.code.weights.regular}`,
-    "--font-code-weight-medium": `${theme.font.code.weights.medium}`,
-    "--font-code-weight-semibold": `${theme.font.code.weights.semibold}`,
-    "--font-code-weight-bold": `${theme.font.code.weights.bold}`
+  const v = varNames.font.code, t = theme.font.code, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings || "normal",
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_CODE_SIZE)
-    props[`--font-code-${size}-size`] = rem(theme.font.code.sizes[size].fontSize), props[`--font-code-${size}-line-height`] = rem(theme.font.code.sizes[size].lineHeight), props[`--font-code-${size}-ascender-height`] = px(theme.font.code.sizes[size].ascenderHeight), props[`--font-code-${size}-descender-height`] = px(theme.font.code.sizes[size].descenderHeight), props[`--font-code-${size}-letter-spacing`] = px(theme.font.code.sizes[size].letterSpacing), props[`--font-code-${size}-icon-size`] = px(theme.font.code.sizes[size].iconSize);
+  for (const size of FONT_CODE_SIZE) {
+    const _v = varNames.font.code.sizes[size], _t = theme.font.code.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
+  }
   return props;
 }
 function buildFontHeadingThemeProperties(theme) {
-  const props = {
-    "--font-heading-family": theme.font.heading.family,
-    "--font-heading-feature-settings": theme.font.heading.featureSettings,
-    "--font-heading-weight-regular": `${theme.font.heading.weights.regular}`,
-    "--font-heading-weight-medium": `${theme.font.heading.weights.medium}`,
-    "--font-heading-weight-semibold": `${theme.font.heading.weights.semibold}`,
-    "--font-heading-weight-bold": `${theme.font.heading.weights.bold}`
+  const v = varNames.font.heading, t = theme.font.heading, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_HEADING_SIZE)
-    props[`--font-heading-${size}-size`] = rem(theme.font.heading.sizes[size].fontSize), props[`--font-heading-${size}-line-height`] = rem(theme.font.heading.sizes[size].lineHeight), props[`--font-heading-${size}-ascender-height`] = px(theme.font.heading.sizes[size].ascenderHeight), props[`--font-heading-${size}-descender-height`] = px(theme.font.heading.sizes[size].descenderHeight), props[`--font-heading-${size}-letter-spacing`] = px(theme.font.heading.sizes[size].letterSpacing), props[`--font-heading-${size}-icon-size`] = px(theme.font.heading.sizes[size].iconSize);
+  for (const size of FONT_HEADING_SIZE) {
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
+  }
   return props;
 }
 function buildFontLabelThemeProperties(theme) {
-  const props = {
-    "--font-label-family": theme.font.label.family,
-    "--font-label-feature-settings": theme.font.label.featureSettings,
-    "--font-label-weight-regular": `${theme.font.label.weights.regular}`,
-    "--font-label-weight-medium": `${theme.font.label.weights.medium}`,
-    "--font-label-weight-semibold": `${theme.font.label.weights.semibold}`,
-    "--font-label-weight-bold": `${theme.font.label.weights.bold}`
+  const v = varNames.font.label, t = theme.font.label, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_LABEL_SIZE)
-    props[`--font-label-${size}-size`] = rem(theme.font.label.sizes[size].fontSize), props[`--font-label-${size}-line-height`] = rem(theme.font.label.sizes[size].lineHeight), props[`--font-label-${size}-ascender-height`] = px(theme.font.label.sizes[size].ascenderHeight), props[`--font-label-${size}-descender-height`] = px(theme.font.label.sizes[size].descenderHeight), props[`--font-label-${size}-letter-spacing`] = px(theme.font.label.sizes[size].letterSpacing), props[`--font-label-${size}-icon-size`] = px(theme.font.label.sizes[size].iconSize);
+  for (const size of FONT_LABEL_SIZE) {
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
+  }
   return props;
 }
 function buildFontTextThemeProperties(theme) {
-  const props = {
-    "--font-text-family": theme.font.text.family,
-    "--font-text-feature-settings": theme.font.text.featureSettings,
-    "--font-text-weight-regular": `${theme.font.text.weights.regular}`,
-    "--font-text-weight-medium": `${theme.font.text.weights.medium}`,
-    "--font-text-weight-semibold": `${theme.font.text.weights.semibold}`,
-    "--font-text-weight-bold": `${theme.font.text.weights.bold}`
+  const v = varNames.font.text, t = theme.font.text, props = {
+    [v.family]: t.family,
+    [v.featureSettings]: t.featureSettings,
+    [v.weights.regular]: t.weights.regular,
+    [v.weights.medium]: t.weights.medium,
+    [v.weights.semibold]: t.weights.semibold,
+    [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_TEXT_SIZE)
-    props[`--font-text-${size}-size`] = rem(theme.font.text.sizes[size].fontSize), props[`--font-text-${size}-line-height`] = rem(theme.font.text.sizes[size].lineHeight), props[`--font-text-${size}-ascender-height`] = px(theme.font.text.sizes[size].ascenderHeight), props[`--font-text-${size}-descender-height`] = px(theme.font.text.sizes[size].descenderHeight), props[`--font-text-${size}-letter-spacing`] = px(theme.font.text.sizes[size].letterSpacing), props[`--font-text-${size}-icon-size`] = px(theme.font.text.sizes[size].iconSize);
+  for (const size of FONT_TEXT_SIZE) {
+    const _v = v.sizes[size], _t = t.sizes[size];
+    props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
+  }
   return props;
 }
 function buildInputThemeProperties(theme) {
   return {
-    "--input-border-width": px(theme.input.border.width),
-    "--input-checkbox-focus-ring-offset": px(theme.input.checkbox.focusRing.offset),
-    "--input-checkbox-focus-ring-width": px(theme.input.checkbox.focusRing.width),
-    "--input-checkbox-size": px(theme.input.checkbox.size),
-    "--input-radio-focus-ring-offset": px(theme.input.radio.focusRing.offset),
-    "--input-radio-focus-ring-width": px(theme.input.radio.focusRing.width),
-    "--input-radio-mark-size": px(theme.input.radio.markSize),
-    "--input-radio-size": px(theme.input.radio.size),
-    "--input-select-focus-ring-offset": px(theme.input.select.focusRing.offset),
-    "--input-select-focus-ring-width": px(theme.input.select.focusRing.width),
-    "--input-switch-focus-ring-offset": px(theme.input.switch.focusRing.offset),
-    "--input-switch-focus-ring-width": px(theme.input.switch.focusRing.width),
-    "--input-switch-height": px(theme.input.switch.height),
-    "--input-switch-padding": px(theme.input.switch.padding),
-    "--input-switch-transition-duration-ms": `${theme.input.switch.transitionDurationMs}ms`,
-    "--input-switch-transition-timing-function": theme.input.switch.transitionTimingFunction,
-    "--input-switch-width": px(theme.input.switch.width),
-    "--input-text-focus-ring-offset": px(theme.input.text.focusRing.offset),
-    "--input-text-focus-ring-width": px(theme.input.text.focusRing.width)
+    [varNames.input.border.width]: px(theme.input.border.width),
+    [varNames.input.checkbox.focusRing.offset]: px(theme.input.checkbox.focusRing.offset),
+    [varNames.input.checkbox.focusRing.width]: px(theme.input.checkbox.focusRing.width),
+    [varNames.input.checkbox.size]: rem(theme.input.checkbox.size),
+    [varNames.input.radio.focusRing.offset]: px(theme.input.radio.focusRing.offset),
+    [varNames.input.radio.focusRing.width]: px(theme.input.radio.focusRing.width),
+    [varNames.input.radio.markSize]: rem(theme.input.radio.markSize),
+    [varNames.input.radio.size]: rem(theme.input.radio.size),
+    [varNames.input.select.focusRing.offset]: px(theme.input.select.focusRing.offset),
+    [varNames.input.select.focusRing.width]: px(theme.input.select.focusRing.width),
+    [varNames.input.switch.focusRing.offset]: px(theme.input.switch.focusRing.offset),
+    [varNames.input.switch.focusRing.width]: px(theme.input.switch.focusRing.width),
+    [varNames.input.switch.height]: rem(theme.input.switch.height),
+    [varNames.input.switch.padding]: rem(theme.input.switch.padding),
+    [varNames.input.switch.transitionDurationMs]: `${theme.input.switch.transitionDurationMs}ms`,
+    [varNames.input.switch.transitionTimingFunction]: theme.input.switch.transitionTimingFunction,
+    [varNames.input.switch.width]: rem(theme.input.switch.width),
+    [varNames.input.text.focusRing.offset]: px(theme.input.text.focusRing.offset),
+    [varNames.input.text.focusRing.width]: px(theme.input.text.focusRing.width)
   };
 }
 function buildRadiusThemeProperties(theme) {
   return {
-    "--radius-0": rem(theme.radius[0]),
-    "--radius-1": rem(theme.radius[1]),
-    "--radius-2": rem(theme.radius[2]),
-    "--radius-3": rem(theme.radius[3]),
-    "--radius-4": rem(theme.radius[4]),
-    "--radius-5": rem(theme.radius[5]),
-    "--radius-6": rem(theme.radius[6])
+    [varNames.radius[0]]: px(theme.radius[0]),
+    [varNames.radius[1]]: px(theme.radius[1]),
+    [varNames.radius[2]]: px(theme.radius[2]),
+    [varNames.radius[3]]: px(theme.radius[3]),
+    [varNames.radius[4]]: px(theme.radius[4]),
+    [varNames.radius[5]]: px(theme.radius[5]),
+    [varNames.radius[6]]: px(theme.radius[6])
   };
 }
 function buildShadowThemeProperties(theme) {
   return {
-    "--shadow-outline": `0 0 0 ${theme.card.shadow.outline}px`,
-    "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
-    "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
-    "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
-    "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
-    "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
-    "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
-    "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
-    "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
-    "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
-    "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
-    "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
-    "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
-    "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
-    "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
-    "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
-    "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
-    "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
-    "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient)
+    [varNames.shadow[0].umbra]: toBoxShadow(theme.shadow[0]?.umbra),
+    [varNames.shadow[0].penumbra]: toBoxShadow(theme.shadow[0]?.penumbra),
+    [varNames.shadow[0].ambient]: toBoxShadow(theme.shadow[0]?.ambient),
+    [varNames.shadow[1].umbra]: toBoxShadow(theme.shadow[1]?.umbra),
+    [varNames.shadow[1].penumbra]: toBoxShadow(theme.shadow[1]?.penumbra),
+    [varNames.shadow[1].ambient]: toBoxShadow(theme.shadow[1]?.ambient),
+    [varNames.shadow[2].umbra]: toBoxShadow(theme.shadow[2]?.umbra),
+    [varNames.shadow[2].penumbra]: toBoxShadow(theme.shadow[2]?.penumbra),
+    [varNames.shadow[2].ambient]: toBoxShadow(theme.shadow[2]?.ambient),
+    [varNames.shadow[3].umbra]: toBoxShadow(theme.shadow[3]?.umbra),
+    [varNames.shadow[3].penumbra]: toBoxShadow(theme.shadow[3]?.penumbra),
+    [varNames.shadow[3].ambient]: toBoxShadow(theme.shadow[3]?.ambient),
+    [varNames.shadow[4].umbra]: toBoxShadow(theme.shadow[4]?.umbra),
+    [varNames.shadow[4].penumbra]: toBoxShadow(theme.shadow[4]?.penumbra),
+    [varNames.shadow[4].ambient]: toBoxShadow(theme.shadow[4]?.ambient),
+    [varNames.shadow[5].umbra]: toBoxShadow(theme.shadow[5]?.umbra),
+    [varNames.shadow[5].penumbra]: toBoxShadow(theme.shadow[5]?.penumbra),
+    [varNames.shadow[5].ambient]: toBoxShadow(theme.shadow[5]?.ambient)
   };
 }
 function buildSpaceThemeProperties(theme) {
   return {
-    "--space-0": rem(theme.space[0]),
-    "--space-0_5": rem(theme.space[1] / 2),
-    "--space-1": rem(theme.space[1]),
-    "--space-2": rem(theme.space[2]),
-    "--space-3": rem(theme.space[3]),
-    "--space-4": rem(theme.space[4]),
-    "--space-5": rem(theme.space[5]),
-    "--space-6": rem(theme.space[6]),
-    "--space-7": rem(theme.space[7]),
-    "--space-8": rem(theme.space[8]),
-    "--space-9": rem(theme.space[9])
+    [varNames.space[0]]: px(theme.space[0]),
+    [varNames.space[0.5]]: px(theme.space[1] / 2),
+    [varNames.space[1]]: px(theme.space[1]),
+    [varNames.space[2]]: px(theme.space[2]),
+    [varNames.space[3]]: px(theme.space[3]),
+    [varNames.space[4]]: px(theme.space[4]),
+    [varNames.space[5]]: px(theme.space[5]),
+    [varNames.space[6]]: px(theme.space[6]),
+    [varNames.space[7]]: px(theme.space[7]),
+    [varNames.space[8]]: px(theme.space[8]),
+    [varNames.space[9]]: px(theme.space[9])
   };
 }
-const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
 function buildColorThemeProperties(theme) {
   const props = {};
   for (const scheme of THEME_COLOR_SCHEMES)
@@ -4436,27 +4424,27 @@ function buildColorThemeProperties(theme) {
       }));
       for (const colorVariant of THEME_COLOR_VARIANTS)
         for (const elementTone of THEME_COLOR_STATE_TONES) {
-          const tokens = theme._tokens.color[cardTone].variant[colorVariant][elementTone], prefix = `--color-${scheme}-${cardTone}-${colorVariant}-${elementTone}`, context = {
-            bgVar: `${prefix}-bg-0`,
-            hue: tokens._hue,
+          const v = varNames.color[scheme][cardTone][colorVariant][elementTone], t = theme._tokens.color[cardTone].variant[colorVariant][elementTone], context = {
+            bgVar: v.bg[0],
+            hue: t._hue,
             scheme
           };
           Object.assign(props, {
-            [`${prefix}-bg-0`]: renderColor(tokens.bg[0], context),
-            [`${prefix}-bg-1`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 25%)`,
-            [`${prefix}-bg-2`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 50%)`,
-            [`${prefix}-bg-3`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 75%)`,
-            [`${prefix}-bg-4`]: renderColor(tokens.bg[4], context),
-            [`${prefix}-border-0`]: renderColor(tokens.border[0], context),
-            [`${prefix}-border-1`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 25%)`,
-            [`${prefix}-border-2`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 50%)`,
-            [`${prefix}-border-3`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 75%)`,
-            [`${prefix}-border-4`]: renderColor(tokens.border[4], context),
-            [`${prefix}-fg-0`]: renderColor(tokens.fg[0], context),
-            [`${prefix}-fg-1`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 25%)`,
-            [`${prefix}-fg-2`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 50%)`,
-            [`${prefix}-fg-3`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 75%)`,
-            [`${prefix}-fg-4`]: renderColor(tokens.fg[4], context)
+            [v.bg[0]]: renderColor(t.bg[0], context),
+            [v.bg[1]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 25%)`,
+            [v.bg[2]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 50%)`,
+            [v.bg[3]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 75%)`,
+            [v.bg[4]]: renderColor(t.bg[4], context),
+            [v.border[0]]: renderColor(t.border[0], context),
+            [v.border[1]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 25%)`,
+            [v.border[2]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 50%)`,
+            [v.border[3]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 75%)`,
+            [v.border[4]]: renderColor(t.border[4], context),
+            [v.fg[0]]: renderColor(t.fg[0], context),
+            [v.fg[1]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 25%)`,
+            [v.fg[2]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 50%)`,
+            [v.fg[3]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 75%)`,
+            [v.fg[4]]: renderColor(t.fg[4], context)
           });
         }
     }
@@ -4466,16 +4454,16 @@ function buildColorAvatarThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, props = {};
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], props = {};
   for (const hue of HUES) {
     const context = {
-      bgVar: `${prefix}-bg-0`,
-      hue: tokens.avatar[hue]._hue ?? hue,
+      bgVar: varNames.color.bg,
+      hue: t.avatar[hue]._hue ?? hue,
       scheme
     };
     Object.assign(props, {
-      [`${prefix}-avatar-${hue}-bg`]: renderColor(tokens.avatar[hue].bg, context),
-      [`${prefix}-avatar-${hue}-fg`]: renderColor(tokens.avatar[hue].fg, context)
+      [v.avatar[hue].bg]: renderColor(t.avatar[hue].bg, context),
+      [v.avatar[hue].fg]: renderColor(t.avatar[hue].fg, context)
     });
   }
   return props;
@@ -4484,63 +4472,63 @@ function buildColorCardThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, context = {
-    bgVar: `${prefix}-bg-0`,
-    hue: tokens._hue,
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], context = {
+    bgVar: varNames.color.bg,
+    hue: t._hue,
     scheme
   };
   return {
     // backdrop
-    [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
+    [v.backdrop]: renderColor(t.backdrop, context),
     // code
-    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
+    [v.code.bg]: renderColor(t.code.bg, context),
+    [v.code.fg]: renderColor(t.code.fg, context),
     // code / token
-    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
+    [v.code.token.atrule]: renderColor(t.code.token.atrule, context),
+    [v.code.token.attrName]: renderColor(t.code.token.attrName, context),
+    [v.code.token.attrValue]: renderColor(t.code.token.attrValue, context),
+    [v.code.token.attribute]: renderColor(t.code.token.attribute, context),
+    [v.code.token.boolean]: renderColor(t.code.token.boolean, context),
+    [v.code.token.builtin]: renderColor(t.code.token.builtin, context),
+    [v.code.token.cdata]: renderColor(t.code.token.cdata, context),
+    [v.code.token.char]: renderColor(t.code.token.char, context),
+    [v.code.token.className]: renderColor(t.code.token.className, context),
+    [v.code.token.class]: renderColor(t.code.token.class, context),
+    [v.code.token.comment]: renderColor(t.code.token.comment, context),
+    [v.code.token.constant]: renderColor(t.code.token.constant, context),
+    [v.code.token.deleted]: renderColor(t.code.token.deleted, context),
+    [v.code.token.doctype]: renderColor(t.code.token.doctype, context),
+    [v.code.token.entity]: renderColor(t.code.token.entity, context),
+    [v.code.token.function]: renderColor(t.code.token.function, context),
+    [v.code.token.hexcode]: renderColor(t.code.token.hexcode, context),
+    [v.code.token.id]: renderColor(t.code.token.id, context),
+    [v.code.token.important]: renderColor(t.code.token.important, context),
+    [v.code.token.inserted]: renderColor(t.code.token.inserted, context),
+    [v.code.token.keyword]: renderColor(t.code.token.keyword, context),
+    [v.code.token.number]: renderColor(t.code.token.number, context),
+    [v.code.token.operator]: renderColor(t.code.token.operator, context),
+    [v.code.token.prolog]: renderColor(t.code.token.prolog, context),
+    [v.code.token.property]: renderColor(t.code.token.property, context),
+    [v.code.token.pseudoClass]: renderColor(t.code.token.pseudoClass, context),
+    [v.code.token.pseudoElement]: renderColor(t.code.token.pseudoElement, context),
+    [v.code.token.punctuation]: renderColor(t.code.token.punctuation, context),
+    [v.code.token.regex]: renderColor(t.code.token.regex, context),
+    [v.code.token.selector]: renderColor(t.code.token.selector, context),
+    [v.code.token.string]: renderColor(t.code.token.string, context),
+    [v.code.token.symbol]: renderColor(t.code.token.symbol, context),
+    [v.code.token.tag]: renderColor(t.code.token.tag, context),
+    [v.code.token.unit]: renderColor(t.code.token.unit, context),
+    [v.code.token.url]: renderColor(t.code.token.url, context),
+    [v.code.token.variable]: renderColor(t.code.token.variable, context),
     // focus ring
-    [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
+    [v.focusRing]: renderColor(t.focusRing, context),
     // link
-    [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
+    [v.link.fg]: renderColor(t.link.fg, context),
     // shadow
-    [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
-    [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
-    [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context)
+    [v.shadow.outline]: renderColor(t.shadow.outline, context),
+    [v.shadow.umbra]: renderColor(t.shadow.umbra, context),
+    [v.shadow.penumbra]: renderColor(t.shadow.penumbra, context),
+    [v.shadow.ambient]: renderColor(t.shadow.ambient, context)
   };
 }
 function compileTheme(theme) {
@@ -4619,6 +4607,9 @@ function _arrow() {
 function _arrowStroke() {
   return _comp("arrow-stroke");
 }
+function _arrowStrokeMask() {
+  return _comp("arrow-stroke-mask");
+}
 function _arrowShape() {
   return _comp("arrow-shape");
 }
@@ -4632,7 +4623,7 @@ function _inputPresentation() {
   return _comp("input-presentation");
 }
 function _selectable(props) {
-  return _comp("selectable", toneMap$2[props.tone ?? "default"], radius(props));
+  return _comp("selectable", props.tone ?? "default", radius(props));
 }
 function avatar(props) {
   return _comp("avatar", props.color || "gray", _resp("avatar", props.size));
@@ -4687,13 +4678,13 @@ function button(props) {
     mode,
     tone
   } = props;
-  return _comp("button", variantMap[mode ?? "default"], toneMap$1[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
+  return _comp("button", variantMap[mode ?? "default"], toneMap[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
 }
 function buttonLoadingBox() {
   return "button-loading-box";
 }
 function card(props) {
-  return _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
+  return _comp(props.scheme, props.tone ?? "default", "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
   return _comp("checkbox");
@@ -4776,9 +4767,13 @@ function srOnly() {
   return composeClassNames("sr-only");
 }
 export {
+  BREAKPOINTS,
+  PREFIX,
   _arrow,
   _arrowShape,
   _arrowStroke,
+  _arrowStrokeMask,
+  _getClassNames,
   _input,
   _inputElement,
   _inputPresentation,
@@ -4823,7 +4818,6 @@ export {
   flexItem,
   font,
   gap,
-  getClassNames,
   grid,
   gridItem,
   heading,