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

package/dist/css.js

@@ -1,94 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
-function _resp(prefix, prop) {
-  if (!(prop === void 0 || prop === !1))
-    return Array.isArray(prop) ? prop.map((value, index) => {
-      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
-      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-      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) {
-  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
-}
-function composeClassNames(...classNames) {
-  return unique(getClassNames(...classNames)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
-}
-function border(props) {
-  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
-}
-function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
-}
-function flex(props) {
-  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
-}
-function flexItem(props) {
-  return composeClassNames(_resp("f", props.flex));
-}
-function font(props) {
-  return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-align", props.align));
-}
-function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
-}
-function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
-}
-function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
-}
-function height(props) {
-  return composeClassNames(_resp("h", props.height));
-}
-function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
-}
-function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
-}
-function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
-}
-function minWidth(props) {
-  return _resp("min-w", props.minWidth) ?? "";
-}
-function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
-}
-function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
-}
-function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
-}
-function position(props) {
-  return composeClassNames(_resp("position", props.position));
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
+var v3_v2 = require("./_chunks-cjs/v3_v2.js"), theme = require("@sanity/ui/theme");
 const 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;
-}
-function textOverflow(props) {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-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"])
@@ -120,22 +33,44 @@ function compileNestedRules(selector, props, context) {
 function toSnakeCase$1(value) {
   return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
 }
-function compilePalette() {
+function compilePalette(config) {
   const props = {
-    ...compileHues(),
-    "--black": color.color.black.hex,
-    "--white": color.color.white.hex
+    "--l-min": `${config.luminosity.min * 100}%`,
+    "--l-max": `${config.luminosity.max * 100}%`,
+    "--l-range": "calc(var(--l-max) - var(--l-min))",
+    "--c-min": `${config.chroma.min}`,
+    "--c-max": `${config.chroma.max}`,
+    "--c-range": "calc(var(--c-max) - var(--c-min))",
+    ...compileHues(config.hues),
+    "--black": `oklch(
+      calc(var(--l-min) + 0.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`,
+    "--white": `oklch(
+      calc(var(--l-min) + 1.0 * var(--l-range))
+      calc(var(--c-min) + 0.0 * var(--gray-c-range))
+      var(--gray-h)
+    )`
   };
   return compileRule(":root", props, {
     keyframes: {},
     media: {}
   });
 }
-function compileHues() {
+function compileHues(hues) {
   const rules2 = {};
-  for (const hue of theme.HUES)
-    for (const tint of theme.TINTS)
-      rules2[`--${hue}-${tint}`] = color.color[hue][tint].hex;
+  for (const hue of theme.HUES) {
+    const {
+      c,
+      h
+    } = hues[hue];
+    rules2[`--${hue}-h`] = `${h}`, rules2[`--${hue}-c`] = `${c}`, rules2[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`, rules2[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`;
+    for (const tint of theme.TINTS) {
+      const l_offset = parseFloat((1 - tint / 1e3).toFixed(2)), c_offset_tmp = tint / 500, c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1));
+      rules2[`--${hue}-${tint}`] = ["oklch(", `calc(var(--l-min) + ${l_offset} * var(--l-range)) `, `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `, `var(--${hue}-h)`, ")"].join("");
+    }
+  }
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -245,48 +180,6 @@ const varNames = {
     backdrop: "--color-backdrop",
     bg: "--color-bg",
     border: "--color-border",
-    code: {
-      bg: "--color-code-bg",
-      fg: "--color-code-fg",
-      token: {
-        atrule: "--color-code-token-atrule",
-        attrName: "--color-code-token-attr-name",
-        attrValue: "--color-code-token-attr-value",
-        attribute: "--color-code-token-attribute",
-        boolean: "--color-code-token-boolean",
-        builtin: "--color-code-token-builtin",
-        cdata: "--color-code-token-cdata",
-        char: "--color-code-token-char",
-        class: "--color-code-token-class",
-        className: "--color-code-token-class-name",
-        comment: "--color-code-token-comment",
-        constant: "--color-code-token-constant",
-        deleted: "--color-code-token-deleted",
-        doctype: "--color-code-token-doctype",
-        entity: "--color-code-token-entity",
-        function: "--color-code-token-function",
-        hexcode: "--color-code-token-hexcode",
-        id: "--color-code-token-id",
-        important: "--color-code-token-important",
-        inserted: "--color-code-token-inserted",
-        keyword: "--color-code-token-keyword",
-        number: "--color-code-token-number",
-        operator: "--color-code-token-operator",
-        prolog: "--color-code-token-prolog",
-        property: "--color-code-token-property",
-        pseudoClass: "--color-code-token-pseudo-class",
-        pseudoElement: "--color-code-token-pseudo-element",
-        punctuation: "--color-code-token-punctuation",
-        regex: "--color-code-token-regex",
-        selector: "--color-code-token-selector",
-        string: "--color-code-token-string",
-        symbol: "--color-code-token-symbol",
-        tag: "--color-code-token-tag",
-        unit: "--color-code-token-unit",
-        url: "--color-code-token-url",
-        variable: "--color-code-token-variable"
-      }
-    },
     fg: "--color-fg",
     focusRing: "--color-focus-ring",
     input: {
@@ -312,6 +205,44 @@ const varNames = {
       from: "--color-skeleton-from",
       to: "--color-skeleton-to"
     },
+    token: {
+      atrule: "--color-token-atrule",
+      attrName: "--color-token-attr-name",
+      attrValue: "--color-token-attr-value",
+      attribute: "--color-token-attribute",
+      boolean: "--color-token-boolean",
+      builtin: "--color-token-builtin",
+      cdata: "--color-token-cdata",
+      char: "--color-token-char",
+      class: "--color-token-class",
+      className: "--color-token-class-name",
+      comment: "--color-token-comment",
+      constant: "--color-token-constant",
+      deleted: "--color-token-deleted",
+      doctype: "--color-token-doctype",
+      entity: "--color-token-entity",
+      function: "--color-token-function",
+      hexcode: "--color-token-hexcode",
+      id: "--color-token-id",
+      important: "--color-token-important",
+      inserted: "--color-token-inserted",
+      keyword: "--color-token-keyword",
+      number: "--color-token-number",
+      operator: "--color-token-operator",
+      prolog: "--color-token-prolog",
+      property: "--color-token-property",
+      pseudoClass: "--color-token-pseudo-class",
+      pseudoElement: "--color-token-pseudo-element",
+      punctuation: "--color-token-punctuation",
+      regex: "--color-token-regex",
+      selector: "--color-token-selector",
+      string: "--color-token-string",
+      symbol: "--color-token-symbol",
+      tag: "--color-token-tag",
+      unit: "--color-token-unit",
+      url: "--color-token-url",
+      variable: "--color-token-variable"
+    },
     solid: buildColorVariantVarNames({
       variant: "solid"
     }),
@@ -434,13 +365,7 @@ const varNames = {
           letterSpacing: `--font-code-${size}-letter-spacing`,
           iconSize: `--font-code-${size}-icon-size`
         }
-      }), {}),
-      weight: {
-        regular: "--font-code-weight-regular",
-        medium: "--font-code-weight-medium",
-        semibold: "--font-code-weight-semibold",
-        bold: "--font-code-weight-bold"
-      }
+      }), {})
     },
     heading: {
       family: "--font-heading-family",
@@ -454,13 +379,7 @@ const varNames = {
           letterSpacing: `--font-heading-${size}-letter-spacing`,
           iconSize: `--font-heading-${size}-icon-size`
         }
-      }), {}),
-      weight: {
-        regular: "--font-heading-weight-regular",
-        medium: "--font-heading-weight-medium",
-        semibold: "--font-heading-weight-semibold",
-        bold: "--font-heading-weight-bold"
-      }
+      }), {})
     },
     label: {
       family: "--font-label-family",
@@ -474,13 +393,7 @@ const varNames = {
           letterSpacing: `--font-label-${size}-letter-spacing`,
           iconSize: `--font-label-${size}-icon-size`
         }
-      }), {}),
-      weight: {
-        regular: "--font-label-weight-regular",
-        medium: "--font-label-weight-medium",
-        semibold: "--font-label-weight-semibold",
-        bold: "--font-label-weight-bold"
-      }
+      }), {})
     },
     text: {
       family: "--font-text-family",
@@ -494,13 +407,7 @@ const varNames = {
           letterSpacing: `--font-text-${size}-letter-spacing`,
           iconSize: `--font-text-${size}-icon-size`
         }
-      }), {}),
-      weight: {
-        regular: "--font-text-weight-regular",
-        medium: "--font-text-weight-medium",
-        semibold: "--font-text-weight-semibold",
-        bold: "--font-text-weight-bold"
-      }
+      }), {})
     }
   },
   input: {
@@ -564,48 +471,6 @@ function buildColorCardVarNames(props) {
       }
     },
     backdrop: `${sourcePrefix}-backdrop`,
-    code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-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`
-      }
-    },
     focusRing: `${sourcePrefix}-focus-ring`,
     link: {
       fg: `${sourcePrefix}-link-fg`
@@ -624,6 +489,44 @@ function buildColorCardVarNames(props) {
       from: `${sourcePrefix}-skeleton-from`,
       to: `${sourcePrefix}-skeleton-to`
     },
+    token: {
+      atrule: `${sourcePrefix}-token-atrule`,
+      attrName: `${sourcePrefix}-token-attr-name`,
+      attrValue: `${sourcePrefix}-token-attr-value`,
+      attribute: `${sourcePrefix}-token-attribute`,
+      boolean: `${sourcePrefix}-token-boolean`,
+      builtin: `${sourcePrefix}-token-builtin`,
+      cdata: `${sourcePrefix}-token-cdata`,
+      char: `${sourcePrefix}-token-char`,
+      class: `${sourcePrefix}-token-class`,
+      className: `${sourcePrefix}-token-class-name`,
+      comment: `${sourcePrefix}-token-comment`,
+      constant: `${sourcePrefix}-token-constant`,
+      deleted: `${sourcePrefix}-token-deleted`,
+      doctype: `${sourcePrefix}-token-doctype`,
+      entity: `${sourcePrefix}-token-entity`,
+      function: `${sourcePrefix}-token-function`,
+      hexcode: `${sourcePrefix}-token-hexcode`,
+      id: `${sourcePrefix}-token-id`,
+      important: `${sourcePrefix}-token-important`,
+      inserted: `${sourcePrefix}-token-inserted`,
+      keyword: `${sourcePrefix}-token-keyword`,
+      number: `${sourcePrefix}-token-number`,
+      operator: `${sourcePrefix}-token-operator`,
+      prolog: `${sourcePrefix}-token-prolog`,
+      property: `${sourcePrefix}-token-property`,
+      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
+      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
+      punctuation: `${sourcePrefix}-token-punctuation`,
+      regex: `${sourcePrefix}-token-regex`,
+      selector: `${sourcePrefix}-token-selector`,
+      string: `${sourcePrefix}-token-string`,
+      symbol: `${sourcePrefix}-token-symbol`,
+      tag: `${sourcePrefix}-token-tag`,
+      unit: `${sourcePrefix}-token-unit`,
+      url: `${sourcePrefix}-token-url`,
+      variable: `${sourcePrefix}-token-variable`
+    },
     solid: buildColorVariantVarNames({
       scheme,
       tone,
@@ -751,48 +654,6 @@ const colorVars = {
   backdrop: `var(${varNames.color.backdrop})`,
   bg: `var(${varNames.color.bg})`,
   border: `var(${varNames.color.border})`,
-  code: {
-    bg: `var(${varNames.color.code.bg})`,
-    fg: `var(${varNames.color.code.fg})`,
-    token: {
-      atrule: `var(${varNames.color.code.token.atrule})`,
-      attrName: `var(${varNames.color.code.token.attrName})`,
-      attrValue: `var(${varNames.color.code.token.attrValue})`,
-      attribute: `var(${varNames.color.code.token.attribute})`,
-      boolean: `var(${varNames.color.code.token.boolean})`,
-      builtin: `var(${varNames.color.code.token.builtin})`,
-      cdata: `var(${varNames.color.code.token.cdata})`,
-      char: `var(${varNames.color.code.token.char})`,
-      class: `var(${varNames.color.code.token.class})`,
-      className: `var(${varNames.color.code.token.className})`,
-      comment: `var(${varNames.color.code.token.comment})`,
-      constant: `var(${varNames.color.code.token.constant})`,
-      deleted: `var(${varNames.color.code.token.deleted})`,
-      doctype: `var(${varNames.color.code.token.doctype})`,
-      entity: `var(${varNames.color.code.token.entity})`,
-      function: `var(${varNames.color.code.token.function})`,
-      hexcode: `var(${varNames.color.code.token.hexcode})`,
-      id: `var(${varNames.color.code.token.id})`,
-      important: `var(${varNames.color.code.token.important})`,
-      inserted: `var(${varNames.color.code.token.inserted})`,
-      keyword: `var(${varNames.color.code.token.keyword})`,
-      number: `var(${varNames.color.code.token.number})`,
-      operator: `var(${varNames.color.code.token.operator})`,
-      prolog: `var(${varNames.color.code.token.prolog})`,
-      property: `var(${varNames.color.code.token.property})`,
-      pseudoClass: `var(${varNames.color.code.token.pseudoClass})`,
-      pseudoElement: `var(${varNames.color.code.token.pseudoElement})`,
-      punctuation: `var(${varNames.color.code.token.punctuation})`,
-      regex: `var(${varNames.color.code.token.regex})`,
-      selector: `var(${varNames.color.code.token.selector})`,
-      string: `var(${varNames.color.code.token.string})`,
-      symbol: `var(${varNames.color.code.token.symbol})`,
-      tag: `var(${varNames.color.code.token.tag})`,
-      unit: `var(${varNames.color.code.token.unit})`,
-      url: `var(${varNames.color.code.token.url})`,
-      variable: `var(${varNames.color.code.token.variable})`
-    }
-  },
   fg: `var(${varNames.color.fg})`,
   focusRing: `var(${varNames.color.focusRing})`,
   input: {
@@ -818,6 +679,44 @@ const colorVars = {
     from: `var(${varNames.color.skeleton.from})`,
     to: `var(${varNames.color.skeleton.to})`
   },
+  token: {
+    atrule: `var(${varNames.color.token.atrule})`,
+    attrName: `var(${varNames.color.token.attrName})`,
+    attrValue: `var(${varNames.color.token.attrValue})`,
+    attribute: `var(${varNames.color.token.attribute})`,
+    boolean: `var(${varNames.color.token.boolean})`,
+    builtin: `var(${varNames.color.token.builtin})`,
+    cdata: `var(${varNames.color.token.cdata})`,
+    char: `var(${varNames.color.token.char})`,
+    class: `var(${varNames.color.token.class})`,
+    className: `var(${varNames.color.token.className})`,
+    comment: `var(${varNames.color.token.comment})`,
+    constant: `var(${varNames.color.token.constant})`,
+    deleted: `var(${varNames.color.token.deleted})`,
+    doctype: `var(${varNames.color.token.doctype})`,
+    entity: `var(${varNames.color.token.entity})`,
+    function: `var(${varNames.color.token.function})`,
+    hexcode: `var(${varNames.color.token.hexcode})`,
+    id: `var(${varNames.color.token.id})`,
+    important: `var(${varNames.color.token.important})`,
+    inserted: `var(${varNames.color.token.inserted})`,
+    keyword: `var(${varNames.color.token.keyword})`,
+    number: `var(${varNames.color.token.number})`,
+    operator: `var(${varNames.color.token.operator})`,
+    prolog: `var(${varNames.color.token.prolog})`,
+    property: `var(${varNames.color.token.property})`,
+    pseudoClass: `var(${varNames.color.token.pseudoClass})`,
+    pseudoElement: `var(${varNames.color.token.pseudoElement})`,
+    punctuation: `var(${varNames.color.token.punctuation})`,
+    regex: `var(${varNames.color.token.regex})`,
+    selector: `var(${varNames.color.token.selector})`,
+    string: `var(${varNames.color.token.string})`,
+    symbol: `var(${varNames.color.token.symbol})`,
+    tag: `var(${varNames.color.token.tag})`,
+    unit: `var(${varNames.color.token.unit})`,
+    url: `var(${varNames.color.token.url})`,
+    variable: `var(${varNames.color.token.variable})`
+  },
   solid: buildColorVariantVars({
     variant: "solid"
   }),
@@ -866,13 +765,7 @@ const colorVars = {
           letterSpacing: `var(${varNames.font.code.sizes[size].letterSpacing})`,
           iconSize: `var(${varNames.font.code.sizes[size].iconSize})`
         }
-      }), {}),
-      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})`
-      }
+      }), {})
     },
     heading: {
       family: `var(${varNames.font.heading.family})`,
@@ -886,13 +779,7 @@ const colorVars = {
           letterSpacing: `var(${varNames.font.heading.sizes[size].letterSpacing})`,
           iconSize: `var(${varNames.font.heading.sizes[size].iconSize})`
         }
-      }), {}),
-      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})`
-      }
+      }), {})
     },
     label: {
       family: `var(${varNames.font.label.family})`,
@@ -906,13 +793,7 @@ const colorVars = {
           letterSpacing: `var(${varNames.font.label.sizes[size].letterSpacing})`,
           iconSize: `var(${varNames.font.label.sizes[size].iconSize})`
         }
-      }), {}),
-      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})`
-      }
+      }), {})
     },
     text: {
       family: `var(${varNames.font.text.family})`,
@@ -926,13 +807,7 @@ const colorVars = {
           letterSpacing: `var(${varNames.font.text.sizes[size].letterSpacing})`,
           iconSize: `var(${varNames.font.text.sizes[size].iconSize})`
         }
-      }), {}),
-      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})`
-      }
+      }), {})
     }
   },
   input: {
@@ -964,57 +839,15 @@ function buildColorCardVars(props) {
       fg: `var(${prefix.accent.fg})`
     },
     avatar: {
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
         ...acc,
-        [color2]: {
-          bg: `var(${prefix.avatar[color2].bg})`,
-          fg: `var(${prefix.avatar[color2].fg})`
+        [color]: {
+          bg: `var(${prefix.avatar[color].bg})`,
+          fg: `var(${prefix.avatar[color].fg})`
         }
       }), {})
     },
     backdrop: `var(${prefix.backdrop})`,
-    code: {
-      bg: `var(${prefix.code.bg})`,
-      fg: `var(${prefix.code.fg})`,
-      token: {
-        atrule: `var(${prefix.code.token.atrule})`,
-        attrName: `var(${prefix.code.token.attrName})`,
-        attrValue: `var(${prefix.code.token.attrValue})`,
-        attribute: `var(${prefix.code.token.attribute})`,
-        boolean: `var(${prefix.code.token.boolean})`,
-        builtin: `var(${prefix.code.token.builtin})`,
-        cdata: `var(${prefix.code.token.cdata})`,
-        char: `var(${prefix.code.token.char})`,
-        class: `var(${prefix.code.token.class})`,
-        className: `var(${prefix.code.token.className})`,
-        comment: `var(${prefix.code.token.comment})`,
-        constant: `var(${prefix.code.token.constant})`,
-        deleted: `var(${prefix.code.token.deleted})`,
-        doctype: `var(${prefix.code.token.doctype})`,
-        entity: `var(${prefix.code.token.entity})`,
-        function: `var(${prefix.code.token.function})`,
-        hexcode: `var(${prefix.code.token.hexcode})`,
-        id: `var(${prefix.code.token.id})`,
-        important: `var(${prefix.code.token.important})`,
-        inserted: `var(${prefix.code.token.inserted})`,
-        keyword: `var(${prefix.code.token.keyword})`,
-        number: `var(${prefix.code.token.number})`,
-        operator: `var(${prefix.code.token.operator})`,
-        prolog: `var(${prefix.code.token.prolog})`,
-        property: `var(${prefix.code.token.property})`,
-        pseudoClass: `var(${prefix.code.token.pseudoClass})`,
-        pseudoElement: `var(${prefix.code.token.pseudoElement})`,
-        punctuation: `var(${prefix.code.token.punctuation})`,
-        regex: `var(${prefix.code.token.regex})`,
-        selector: `var(${prefix.code.token.selector})`,
-        string: `var(${prefix.code.token.string})`,
-        symbol: `var(${prefix.code.token.symbol})`,
-        tag: `var(${prefix.code.token.tag})`,
-        unit: `var(${prefix.code.token.unit})`,
-        url: `var(${prefix.code.token.url})`,
-        variable: `var(${prefix.code.token.variable})`
-      }
-    },
     focusRing: `var(${prefix.focusRing})`,
     link: {
       fg: `var(${prefix.link.fg})`
@@ -1033,6 +866,44 @@ function buildColorCardVars(props) {
       from: `var(${prefix.skeleton.from})`,
       to: `var(${prefix.skeleton.to})`
     },
+    token: {
+      atrule: `var(${prefix.token.atrule})`,
+      attrName: `var(${prefix.token.attrName})`,
+      attrValue: `var(${prefix.token.attrValue})`,
+      attribute: `var(${prefix.token.attribute})`,
+      boolean: `var(${prefix.token.boolean})`,
+      builtin: `var(${prefix.token.builtin})`,
+      cdata: `var(${prefix.token.cdata})`,
+      char: `var(${prefix.token.char})`,
+      class: `var(${prefix.token.class})`,
+      className: `var(${prefix.token.className})`,
+      comment: `var(${prefix.token.comment})`,
+      constant: `var(${prefix.token.constant})`,
+      deleted: `var(${prefix.token.deleted})`,
+      doctype: `var(${prefix.token.doctype})`,
+      entity: `var(${prefix.token.entity})`,
+      function: `var(${prefix.token.function})`,
+      hexcode: `var(${prefix.token.hexcode})`,
+      id: `var(${prefix.token.id})`,
+      important: `var(${prefix.token.important})`,
+      inserted: `var(${prefix.token.inserted})`,
+      keyword: `var(${prefix.token.keyword})`,
+      number: `var(${prefix.token.number})`,
+      operator: `var(${prefix.token.operator})`,
+      prolog: `var(${prefix.token.prolog})`,
+      property: `var(${prefix.token.property})`,
+      pseudoClass: `var(${prefix.token.pseudoClass})`,
+      pseudoElement: `var(${prefix.token.pseudoElement})`,
+      punctuation: `var(${prefix.token.punctuation})`,
+      regex: `var(${prefix.token.regex})`,
+      selector: `var(${prefix.token.selector})`,
+      string: `var(${prefix.token.string})`,
+      symbol: `var(${prefix.token.symbol})`,
+      tag: `var(${prefix.token.tag})`,
+      unit: `var(${prefix.token.unit})`,
+      url: `var(${prefix.token.url})`,
+      variable: `var(${prefix.token.variable})`
+    },
     solid: buildColorVariantVars({
       scheme,
       tone,
@@ -1101,70 +972,70 @@ function buildColorVariantVars(options) {
   }
   return vars2;
 }
-const util$t = {};
-_responsiveRule(util$t, "border", {
+const util$s = {};
+_responsiveRule(util$s, "border", {
   border: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-t", {
+_responsiveRule(util$s, "border-t", {
   borderTop: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-r", {
+_responsiveRule(util$s, "border-r", {
   borderRight: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-b", {
+_responsiveRule(util$s, "border-b", {
   borderBottom: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-l", {
+_responsiveRule(util$s, "border-l", {
   borderLeft: `1px solid ${vars.color.border}`
 });
 const borderStyle = {
   layers: {
-    util: util$t
+    util: util$s
   }
-}, util$s = {};
-_responsiveRule(util$s, "block", {
+}, util$r = {};
+_responsiveRule(util$r, "block", {
   "@nest": {
     "&:not([hidden])": {
       display: "block"
     }
   }
 });
-_responsiveRule(util$s, "flex", {
+_responsiveRule(util$r, "flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "flex"
     }
   }
 });
-_responsiveRule(util$s, "grid", {
+_responsiveRule(util$r, "grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "grid"
     }
   }
 });
-_responsiveRule(util$s, "inline-block", {
+_responsiveRule(util$r, "inline-block", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-block"
     }
   }
 });
-_responsiveRule(util$s, "inline-flex", {
+_responsiveRule(util$r, "inline-flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-flex"
     }
   }
 });
-_responsiveRule(util$s, "inline-grid", {
+_responsiveRule(util$r, "inline-grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-grid"
     }
   }
 });
-_responsiveRule(util$s, "none", {
+_responsiveRule(util$r, "none", {
   "@nest": {
     "&:not([hidden])": {
       display: "none"
@@ -1173,125 +1044,125 @@ _responsiveRule(util$s, "none", {
 });
 const displayStyle = {
   layers: {
-    util: util$s
+    util: util$r
   }
-}, util$r = {};
-_responsiveRule(util$r, "flex-align-flex-start", {
+}, util$q = {};
+_responsiveRule(util$q, "flex-align-flex-start", {
   alignItems: "flex-start"
 });
-_responsiveRule(util$r, "flex-align-flex-end", {
+_responsiveRule(util$q, "flex-align-flex-end", {
   alignItems: "flex-end"
 });
-_responsiveRule(util$r, "flex-align-center", {
+_responsiveRule(util$q, "flex-align-center", {
   alignItems: "center"
 });
-_responsiveRule(util$r, "flex-align-stretch", {
+_responsiveRule(util$q, "flex-align-stretch", {
   alignItems: "stretch"
 });
-_responsiveRule(util$r, "flex-align-baseline", {
+_responsiveRule(util$q, "flex-align-baseline", {
   alignItems: "baseline"
 });
 const flexAlignStyle = {
   layers: {
-    util: util$r
+    util: util$q
   }
-}, util$q = {};
-_responsiveRule(util$q, "f-row", {
+}, util$p = {};
+_responsiveRule(util$p, "f-row", {
   flexDirection: "row"
 });
-_responsiveRule(util$q, "f-column", {
+_responsiveRule(util$p, "f-column", {
   flexDirection: "column"
 });
 const flexDirectionStyle = {
   layers: {
-    util: util$q
+    util: util$p
   }
-}, util$p = {};
-_responsiveRule(util$p, "flex-justify-flex-start", {
+}, util$o = {};
+_responsiveRule(util$o, "flex-justify-flex-start", {
   justifyContent: "flex-start"
 });
-_responsiveRule(util$p, "flex-justify-flex-end", {
+_responsiveRule(util$o, "flex-justify-flex-end", {
   justifyContent: "flex-end"
 });
-_responsiveRule(util$p, "flex-justify-center", {
+_responsiveRule(util$o, "flex-justify-center", {
   justifyContent: "center"
 });
-_responsiveRule(util$p, "flex-justify-space-between", {
+_responsiveRule(util$o, "flex-justify-between", {
   justifyContent: "space-between"
 });
-_responsiveRule(util$p, "flex-justify-space-around", {
+_responsiveRule(util$o, "flex-justify-around", {
   justifyContent: "space-around"
 });
-_responsiveRule(util$p, "flex-justify-space-evenly", {
+_responsiveRule(util$o, "flex-justify-evenly", {
   justifyContent: "space-evenly"
 });
 const flexJustifyStyle = {
   layers: {
-    util: util$p
+    util: util$o
   }
-}, util$o = {};
-_responsiveRule(util$o, "flex-nowrap", {
+}, util$n = {};
+_responsiveRule(util$n, "flex-nowrap", {
   flexWrap: "nowrap"
 });
-_responsiveRule(util$o, "flex-wrap", {
+_responsiveRule(util$n, "flex-wrap", {
   flexWrap: "wrap"
 });
-_responsiveRule(util$o, "flex-wrap-reverse", {
+_responsiveRule(util$n, "flex-wrap-reverse", {
   flexWrap: "wrap-reverse"
 });
 const flexWrapStyle = {
   layers: {
-    util: util$o
+    util: util$n
   }
-}, util$n = {};
-_responsiveRule(util$n, "f-none", {
+}, util$m = {};
+_responsiveRule(util$m, "f-none", {
   flex: "none"
 });
-_responsiveRule(util$n, "f-auto", {
+_responsiveRule(util$m, "f-auto", {
   flex: "auto"
 });
-_responsiveRule(util$n, "f-initial", {
+_responsiveRule(util$m, "f-initial", {
   flex: "initial"
 });
-_responsiveRule(util$n, "f-1", {
+_responsiveRule(util$m, "f-1", {
   flex: 1
 });
-_responsiveRule(util$n, "f-2", {
+_responsiveRule(util$m, "f-2", {
   flex: 2
 });
-_responsiveRule(util$n, "f-3", {
+_responsiveRule(util$m, "f-3", {
   flex: 3
 });
-_responsiveRule(util$n, "f-4", {
+_responsiveRule(util$m, "f-4", {
   flex: 4
 });
-_responsiveRule(util$n, "f-5", {
+_responsiveRule(util$m, "f-5", {
   flex: 5
 });
-_responsiveRule(util$n, "f-6", {
+_responsiveRule(util$m, "f-6", {
   flex: 6
 });
-_responsiveRule(util$n, "f-7", {
+_responsiveRule(util$m, "f-7", {
   flex: 7
 });
-_responsiveRule(util$n, "f-8", {
+_responsiveRule(util$m, "f-8", {
   flex: 8
 });
-_responsiveRule(util$n, "f-9", {
+_responsiveRule(util$m, "f-9", {
   flex: 9
 });
-_responsiveRule(util$n, "f-10", {
+_responsiveRule(util$m, "f-10", {
   flex: 10
 });
-_responsiveRule(util$n, "f-11", {
+_responsiveRule(util$m, "f-11", {
   flex: 11
 });
-_responsiveRule(util$n, "f-12", {
+_responsiveRule(util$m, "f-12", {
   flex: 12
 });
 const flexStyle = {
   layers: {
-    util: util$n
+    util: util$m
   }
 }, rules$3 = {
   ".font": {
@@ -1369,532 +1240,509 @@ const fontStyle = {
   layers: {
     primitive: rules$3
   }
-}, util$m = {};
+}, util$l = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `g-${space}`, {
+  _responsiveRule(util$l, `g-${space}`, {
     gap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gx-${space}`, {
+  _responsiveRule(util$l, `gx-${space}`, {
     columnGap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gy-${space}`, {
+  _responsiveRule(util$l, `gy-${space}`, {
     rowGap: vars.space[space]
   });
 const gapStyle = {
   layers: {
-    util: util$m
+    util: util$l
   }
-}, util$l = {};
-_responsiveRule(util$l, "auto-cols-auto", {
+}, util$k = {};
+_responsiveRule(util$k, "auto-cols-auto", {
   gridAutoColumns: "auto"
 });
-_responsiveRule(util$l, "auto-cols-min", {
+_responsiveRule(util$k, "auto-cols-min", {
   gridAutoColumns: "min-content"
 });
-_responsiveRule(util$l, "auto-cols-max", {
+_responsiveRule(util$k, "auto-cols-max", {
   gridAutoColumns: "max-content"
 });
-_responsiveRule(util$l, "auto-cols-fr", {
+_responsiveRule(util$k, "auto-cols-fr", {
   gridAutoColumns: "minmax(0, 1fr)"
 });
 const gridAutoColumnsStyle = {
   layers: {
-    util: util$l
+    util: util$k
   }
-}, util$k = {};
-_responsiveRule(util$k, "auto-flow-row", {
+}, util$j = {};
+_responsiveRule(util$j, "auto-flow-row", {
   gridAutoFlow: "row"
 });
-_responsiveRule(util$k, "auto-flow-column", {
+_responsiveRule(util$j, "auto-flow-column", {
   gridAutoFlow: "column"
 });
-_responsiveRule(util$k, "auto-flow-row-dense", {
+_responsiveRule(util$j, "auto-flow-row-dense", {
   gridAutoFlow: "row dense"
 });
-_responsiveRule(util$k, "auto-flow-column-dense", {
+_responsiveRule(util$j, "auto-flow-column-dense", {
   gridAutoFlow: "column dense"
 });
 const gridAutoFlowStyle = {
   layers: {
-    util: util$k
+    util: util$j
   }
-}, util$j = {};
-_responsiveRule(util$j, "auto-rows-auto", {
+}, util$i = {};
+_responsiveRule(util$i, "auto-rows-auto", {
   gridAutoRows: "auto"
 });
-_responsiveRule(util$j, "auto-rows-min", {
+_responsiveRule(util$i, "auto-rows-min", {
   gridAutoRows: "min-content"
 });
-_responsiveRule(util$j, "auto-rows-max", {
+_responsiveRule(util$i, "auto-rows-max", {
   gridAutoRows: "max-content"
 });
-_responsiveRule(util$j, "auto-rows-fr", {
+_responsiveRule(util$i, "auto-rows-fr", {
   gridAutoRows: "minmax(0, 1fr)"
 });
 const gridAutoRowsStyle = {
   layers: {
-    util: util$j
+    util: util$i
   }
-}, util$i = {};
-_responsiveRule(util$i, "cols-1", {
+}, util$h = {};
+_responsiveRule(util$h, "cols-1", {
   gridTemplateColumns: "repeat(1, 1fr)"
 });
-_responsiveRule(util$i, "cols-2", {
+_responsiveRule(util$h, "cols-2", {
   gridTemplateColumns: "repeat(2, 1fr)"
 });
-_responsiveRule(util$i, "cols-3", {
+_responsiveRule(util$h, "cols-3", {
   gridTemplateColumns: "repeat(3, 1fr)"
 });
-_responsiveRule(util$i, "cols-4", {
+_responsiveRule(util$h, "cols-4", {
   gridTemplateColumns: "repeat(4, 1fr)"
 });
-_responsiveRule(util$i, "cols-5", {
+_responsiveRule(util$h, "cols-5", {
   gridTemplateColumns: "repeat(5, 1fr)"
 });
-_responsiveRule(util$i, "cols-6", {
+_responsiveRule(util$h, "cols-6", {
   gridTemplateColumns: "repeat(6, 1fr)"
 });
-_responsiveRule(util$i, "cols-7", {
+_responsiveRule(util$h, "cols-7", {
   gridTemplateColumns: "repeat(7, 1fr)"
 });
-_responsiveRule(util$i, "cols-8", {
+_responsiveRule(util$h, "cols-8", {
   gridTemplateColumns: "repeat(8, 1fr)"
 });
-_responsiveRule(util$i, "cols-9", {
+_responsiveRule(util$h, "cols-9", {
   gridTemplateColumns: "repeat(9, 1fr)"
 });
-_responsiveRule(util$i, "cols-10", {
+_responsiveRule(util$h, "cols-10", {
   gridTemplateColumns: "repeat(10, 1fr)"
 });
-_responsiveRule(util$i, "cols-12", {
+_responsiveRule(util$h, "cols-12", {
   gridTemplateColumns: "repeat(12, 1fr)"
 });
 const gridColumnsStyle = {
   layers: {
-    util: util$i
+    util: util$h
   }
-}, util$h = {};
-_responsiveRule(util$h, "rows-1", {
+}, util$g = {};
+_responsiveRule(util$g, "rows-1", {
   gridTemplateRows: "repeat(1, 1fr)"
 });
-_responsiveRule(util$h, "rows-2", {
+_responsiveRule(util$g, "rows-2", {
   gridTemplateRows: "repeat(2, 1fr)"
 });
-_responsiveRule(util$h, "rows-3", {
+_responsiveRule(util$g, "rows-3", {
   gridTemplateRows: "repeat(3, 1fr)"
 });
-_responsiveRule(util$h, "rows-4", {
+_responsiveRule(util$g, "rows-4", {
   gridTemplateRows: "repeat(4, 1fr)"
 });
-_responsiveRule(util$h, "rows-5", {
+_responsiveRule(util$g, "rows-5", {
   gridTemplateRows: "repeat(5, 1fr)"
 });
-_responsiveRule(util$h, "rows-6", {
+_responsiveRule(util$g, "rows-6", {
   gridTemplateRows: "repeat(6, 1fr)"
 });
-_responsiveRule(util$h, "rows-7", {
+_responsiveRule(util$g, "rows-7", {
   gridTemplateRows: "repeat(7, 1fr)"
 });
-_responsiveRule(util$h, "rows-8", {
+_responsiveRule(util$g, "rows-8", {
   gridTemplateRows: "repeat(8, 1fr)"
 });
-_responsiveRule(util$h, "rows-9", {
+_responsiveRule(util$g, "rows-9", {
   gridTemplateRows: "repeat(9, 1fr)"
 });
-_responsiveRule(util$h, "rows-10", {
+_responsiveRule(util$g, "rows-10", {
   gridTemplateRows: "repeat(10, 1fr)"
 });
-_responsiveRule(util$h, "rows-12", {
+_responsiveRule(util$g, "rows-12", {
   gridTemplateRows: "repeat(12, 1fr)"
 });
 const gridRowsStyle = {
   layers: {
-    util: util$h
+    util: util$g
   }
-}, util$g = {};
-_responsiveRule(util$g, "col-auto", {
+}, util$f = {};
+_responsiveRule(util$f, "col-auto", {
   gridColumn: "auto"
 });
-_responsiveRule(util$g, "col-full", {
+_responsiveRule(util$f, "col-full", {
   gridColumn: "1 / -1"
 });
-_responsiveRule(util$g, "col-1", {
+_responsiveRule(util$f, "col-1", {
   gridColumn: "span 1 / span 1"
 });
-_responsiveRule(util$g, "col-2", {
+_responsiveRule(util$f, "col-2", {
   gridColumn: "span 2 / span 2"
 });
-_responsiveRule(util$g, "col-3", {
+_responsiveRule(util$f, "col-3", {
   gridColumn: "span 3 / span 3"
 });
-_responsiveRule(util$g, "col-4", {
+_responsiveRule(util$f, "col-4", {
   gridColumn: "span 4 / span 4"
 });
-_responsiveRule(util$g, "col-5", {
+_responsiveRule(util$f, "col-5", {
   gridColumn: "span 5 / span 5"
 });
-_responsiveRule(util$g, "col-6", {
+_responsiveRule(util$f, "col-6", {
   gridColumn: "span 6 / span 6"
 });
-_responsiveRule(util$g, "col-7", {
+_responsiveRule(util$f, "col-7", {
   gridColumn: "span 7 / span 7"
 });
-_responsiveRule(util$g, "col-8", {
+_responsiveRule(util$f, "col-8", {
   gridColumn: "span 8 / span 8"
 });
-_responsiveRule(util$g, "col-9", {
+_responsiveRule(util$f, "col-9", {
   gridColumn: "span 9 / span 9"
 });
-_responsiveRule(util$g, "col-10", {
+_responsiveRule(util$f, "col-10", {
   gridColumn: "span 10 / span 10"
 });
-_responsiveRule(util$g, "col-12", {
+_responsiveRule(util$f, "col-12", {
   gridColumn: "span 12 / span 12"
 });
 const gridColumnStyle = {
   layers: {
-    util: util$g
+    util: util$f
   }
-}, util$f = {};
-_responsiveRule(util$f, "col-end-auto", {
+}, util$e = {};
+_responsiveRule(util$e, "col-end-auto", {
   gridColumnEnd: "auto"
 });
-_responsiveRule(util$f, "col-end-1", {
+_responsiveRule(util$e, "col-end-1", {
   gridColumnEnd: "1"
 });
-_responsiveRule(util$f, "col-end-2", {
+_responsiveRule(util$e, "col-end-2", {
   gridColumnEnd: "2"
 });
-_responsiveRule(util$f, "col-end-3", {
+_responsiveRule(util$e, "col-end-3", {
   gridColumnEnd: "3"
 });
-_responsiveRule(util$f, "col-end-4", {
+_responsiveRule(util$e, "col-end-4", {
   gridColumnEnd: "4"
 });
-_responsiveRule(util$f, "col-end-5", {
+_responsiveRule(util$e, "col-end-5", {
   gridColumnEnd: "5"
 });
-_responsiveRule(util$f, "col-end-6", {
+_responsiveRule(util$e, "col-end-6", {
   gridColumnEnd: "6"
 });
-_responsiveRule(util$f, "col-end-7", {
+_responsiveRule(util$e, "col-end-7", {
   gridColumnEnd: "7"
 });
-_responsiveRule(util$f, "col-end-8", {
+_responsiveRule(util$e, "col-end-8", {
   gridColumnEnd: "8"
 });
-_responsiveRule(util$f, "col-end-9", {
+_responsiveRule(util$e, "col-end-9", {
   gridColumnEnd: "9"
 });
-_responsiveRule(util$f, "col-end-10", {
+_responsiveRule(util$e, "col-end-10", {
   gridColumnEnd: "10"
 });
-_responsiveRule(util$f, "col-end-11", {
+_responsiveRule(util$e, "col-end-11", {
   gridColumnEnd: "11"
 });
-_responsiveRule(util$f, "col-end-12", {
+_responsiveRule(util$e, "col-end-12", {
   gridColumnEnd: "12"
 });
 const gridColumnEndStyle = {
   layers: {
-    util: util$f
+    util: util$e
   }
-}, util$e = {};
-_responsiveRule(util$e, "col-start-auto", {
+}, util$d = {};
+_responsiveRule(util$d, "col-start-auto", {
   gridColumnStart: "auto"
 });
-_responsiveRule(util$e, "col-start-1", {
+_responsiveRule(util$d, "col-start-1", {
   gridColumnStart: "1"
 });
-_responsiveRule(util$e, "col-start-2", {
+_responsiveRule(util$d, "col-start-2", {
   gridColumnStart: "2"
 });
-_responsiveRule(util$e, "col-start-3", {
+_responsiveRule(util$d, "col-start-3", {
   gridColumnStart: "3"
 });
-_responsiveRule(util$e, "col-start-4", {
+_responsiveRule(util$d, "col-start-4", {
   gridColumnStart: "4"
 });
-_responsiveRule(util$e, "col-start-5", {
+_responsiveRule(util$d, "col-start-5", {
   gridColumnStart: "5"
 });
-_responsiveRule(util$e, "col-start-6", {
+_responsiveRule(util$d, "col-start-6", {
   gridColumnStart: "6"
 });
-_responsiveRule(util$e, "col-start-7", {
+_responsiveRule(util$d, "col-start-7", {
   gridColumnStart: "7"
 });
-_responsiveRule(util$e, "col-start-8", {
+_responsiveRule(util$d, "col-start-8", {
   gridColumnStart: "8"
 });
-_responsiveRule(util$e, "col-start-9", {
+_responsiveRule(util$d, "col-start-9", {
   gridColumnStart: "9"
 });
-_responsiveRule(util$e, "col-start-10", {
+_responsiveRule(util$d, "col-start-10", {
   gridColumnStart: "10"
 });
-_responsiveRule(util$e, "col-start-11", {
+_responsiveRule(util$d, "col-start-11", {
   gridColumnStart: "11"
 });
-_responsiveRule(util$e, "col-start-12", {
+_responsiveRule(util$d, "col-start-12", {
   gridColumnStart: "12"
 });
 const gridColumnStartStyle = {
   layers: {
-    util: util$e
+    util: util$d
   }
-}, util$d = {};
-_responsiveRule(util$d, "row-auto", {
+}, util$c = {};
+_responsiveRule(util$c, "row-auto", {
   gridRow: "auto"
 });
-_responsiveRule(util$d, "row-full", {
+_responsiveRule(util$c, "row-full", {
   gridRow: "1 / -1"
 });
-_responsiveRule(util$d, "row-1", {
+_responsiveRule(util$c, "row-1", {
   gridRow: "span 1 / span 1"
 });
-_responsiveRule(util$d, "row-2", {
+_responsiveRule(util$c, "row-2", {
   gridRow: "span 2 / span 2"
 });
-_responsiveRule(util$d, "row-3", {
+_responsiveRule(util$c, "row-3", {
   gridRow: "span 3 / span 3"
 });
-_responsiveRule(util$d, "row-4", {
+_responsiveRule(util$c, "row-4", {
   gridRow: "span 4 / span 4"
 });
-_responsiveRule(util$d, "row-5", {
+_responsiveRule(util$c, "row-5", {
   gridRow: "span 5 / span 5"
 });
-_responsiveRule(util$d, "row-6", {
+_responsiveRule(util$c, "row-6", {
   gridRow: "span 6 / span 6"
 });
-_responsiveRule(util$d, "row-7", {
+_responsiveRule(util$c, "row-7", {
   gridRow: "span 7 / span 7"
 });
-_responsiveRule(util$d, "row-8", {
+_responsiveRule(util$c, "row-8", {
   gridRow: "span 8 / span 8"
 });
-_responsiveRule(util$d, "row-9", {
+_responsiveRule(util$c, "row-9", {
   gridRow: "span 9 / span 9"
 });
-_responsiveRule(util$d, "row-10", {
+_responsiveRule(util$c, "row-10", {
   gridRow: "span 10 / span 10"
 });
-_responsiveRule(util$d, "row-12", {
+_responsiveRule(util$c, "row-12", {
   gridRow: "span 12 / span 12"
 });
 const gridRowStyle = {
   layers: {
-    util: util$d
+    util: util$c
   }
-}, util$c = {};
-_responsiveRule(util$c, "row-end-auto", {
+}, util$b = {};
+_responsiveRule(util$b, "row-end-auto", {
   gridRowEnd: "auto"
 });
-_responsiveRule(util$c, "row-end-1", {
+_responsiveRule(util$b, "row-end-1", {
   gridRowEnd: "1"
 });
-_responsiveRule(util$c, "row-end-2", {
+_responsiveRule(util$b, "row-end-2", {
   gridRowEnd: "2"
 });
-_responsiveRule(util$c, "row-end-3", {
+_responsiveRule(util$b, "row-end-3", {
   gridRowEnd: "3"
 });
-_responsiveRule(util$c, "row-end-4", {
+_responsiveRule(util$b, "row-end-4", {
   gridRowEnd: "4"
 });
-_responsiveRule(util$c, "row-end-5", {
+_responsiveRule(util$b, "row-end-5", {
   gridRowEnd: "5"
 });
-_responsiveRule(util$c, "row-end-6", {
+_responsiveRule(util$b, "row-end-6", {
   gridRowEnd: "6"
 });
-_responsiveRule(util$c, "row-end-7", {
+_responsiveRule(util$b, "row-end-7", {
   gridRowEnd: "7"
 });
-_responsiveRule(util$c, "row-end-8", {
+_responsiveRule(util$b, "row-end-8", {
   gridRowEnd: "8"
 });
-_responsiveRule(util$c, "row-end-9", {
+_responsiveRule(util$b, "row-end-9", {
   gridRowEnd: "9"
 });
-_responsiveRule(util$c, "row-end-10", {
+_responsiveRule(util$b, "row-end-10", {
   gridRowEnd: "10"
 });
-_responsiveRule(util$c, "row-end-11", {
+_responsiveRule(util$b, "row-end-11", {
   gridRowEnd: "11"
 });
-_responsiveRule(util$c, "row-end-12", {
+_responsiveRule(util$b, "row-end-12", {
   gridRowEnd: "12"
 });
 const gridRowEndStyle = {
   layers: {
-    util: util$c
+    util: util$b
   }
-}, util$b = {};
-_responsiveRule(util$b, "row-start-auto", {
+}, util$a = {};
+_responsiveRule(util$a, "row-start-auto", {
   gridRowStart: "auto"
 });
-_responsiveRule(util$b, "row-start-1", {
+_responsiveRule(util$a, "row-start-1", {
   gridRowStart: "1"
 });
-_responsiveRule(util$b, "row-start-2", {
+_responsiveRule(util$a, "row-start-2", {
   gridRowStart: "2"
 });
-_responsiveRule(util$b, "row-start-3", {
+_responsiveRule(util$a, "row-start-3", {
   gridRowStart: "3"
 });
-_responsiveRule(util$b, "row-start-4", {
+_responsiveRule(util$a, "row-start-4", {
   gridRowStart: "4"
 });
-_responsiveRule(util$b, "row-start-5", {
+_responsiveRule(util$a, "row-start-5", {
   gridRowStart: "5"
 });
-_responsiveRule(util$b, "row-start-6", {
+_responsiveRule(util$a, "row-start-6", {
   gridRowStart: "6"
 });
-_responsiveRule(util$b, "row-start-7", {
+_responsiveRule(util$a, "row-start-7", {
   gridRowStart: "7"
 });
-_responsiveRule(util$b, "row-start-8", {
+_responsiveRule(util$a, "row-start-8", {
   gridRowStart: "8"
 });
-_responsiveRule(util$b, "row-start-9", {
+_responsiveRule(util$a, "row-start-9", {
   gridRowStart: "9"
 });
-_responsiveRule(util$b, "row-start-10", {
+_responsiveRule(util$a, "row-start-10", {
   gridRowStart: "10"
 });
-_responsiveRule(util$b, "row-start-11", {
+_responsiveRule(util$a, "row-start-11", {
   gridRowStart: "11"
 });
-_responsiveRule(util$b, "row-start-12", {
+_responsiveRule(util$a, "row-start-12", {
   gridRowStart: "12"
 });
 const gridRowStartStyle = {
   layers: {
-    util: util$b
+    util: util$a
   }
-}, util$a = {};
-_responsiveRule(util$a, "h-fill", {
+}, util$9 = {};
+_responsiveRule(util$9, "h-fill", {
   height: "100%"
 });
-_responsiveRule(util$a, "h-stretch", {
+_responsiveRule(util$9, "h-stretch", {
   height: "stretch"
 });
 const heightStyle = {
   layers: {
-    util: util$a
+    util: util$9
   }
-}, util$9 = {};
-_responsiveRule(util$9, "inset-0", {
+}, util$8 = {};
+_responsiveRule(util$8, "inset-0", {
   top: 0,
   left: 0,
   right: 0,
   bottom: 0
 });
-_responsiveRule(util$9, "top-0", {
+_responsiveRule(util$8, "top-0", {
   top: 0
 });
-_responsiveRule(util$9, "right-0", {
+_responsiveRule(util$8, "right-0", {
   right: 0
 });
-_responsiveRule(util$9, "bottom-0", {
+_responsiveRule(util$8, "bottom-0", {
   bottom: 0
 });
-_responsiveRule(util$9, "left-0", {
+_responsiveRule(util$8, "left-0", {
   left: 0
 });
 const insetStyle = {
   layers: {
-    util: util$9
+    util: util$8
   }
-}, util$8 = {};
+}, util$7 = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `m-${space}`, {
+  _responsiveRule(util$7, `m-${space}`, {
     margin: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mx-${space}`, {
+  _responsiveRule(util$7, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `my-${space}`, {
+  _responsiveRule(util$7, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mt-${space}`, {
+  _responsiveRule(util$7, `mt-${space}`, {
     marginTop: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mr-${space}`, {
+  _responsiveRule(util$7, `mr-${space}`, {
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mb-${space}`, {
+  _responsiveRule(util$7, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `ml-${space}`, {
+  _responsiveRule(util$7, `ml-${space}`, {
     marginLeft: vars.space[space]
   });
 const marginStyle = {
   layers: {
-    util: util$8
+    util: util$7
   }
-}, util$7 = {};
-_responsiveRule(util$7, "max-w-0", {
+}, util$6 = {};
+_responsiveRule(util$6, "max-w-0", {
   maxWidth: vars.container[0]
 });
-_responsiveRule(util$7, "max-w-1", {
+_responsiveRule(util$6, "max-w-1", {
   maxWidth: vars.container[1]
 });
-_responsiveRule(util$7, "max-w-2", {
+_responsiveRule(util$6, "max-w-2", {
   maxWidth: vars.container[2]
 });
-_responsiveRule(util$7, "max-w-3", {
+_responsiveRule(util$6, "max-w-3", {
   maxWidth: vars.container[3]
 });
-_responsiveRule(util$7, "max-w-4", {
+_responsiveRule(util$6, "max-w-4", {
   maxWidth: vars.container[4]
 });
-_responsiveRule(util$7, "max-w-5", {
+_responsiveRule(util$6, "max-w-5", {
   maxWidth: vars.container[5]
 });
-_responsiveRule(util$7, "max-w-auto", {
+_responsiveRule(util$6, "max-w-auto", {
   maxWidth: "none"
 });
-_responsiveRule(util$7, "max-w-fill", {
+_responsiveRule(util$6, "max-w-fill", {
   maxWidth: "100%"
 });
 const maxWidthStyle = {
-  layers: {
-    util: util$7
-  }
-}, util$6 = {};
-_responsiveRule(util$6, "min-w-0", {
-  minWidth: "0"
-});
-_responsiveRule(util$6, "min-w-auto", {
-  minWidth: "auto"
-});
-_responsiveRule(util$6, "min-w-full", {
-  minWidth: "100%"
-});
-_responsiveRule(util$6, "min-w-min", {
-  minWidth: "min-content"
-});
-_responsiveRule(util$6, "min-w-max", {
-  minWidth: "max-content"
-});
-_responsiveRule(util$6, "min-w-fit", {
-  minWidth: "fit-content"
-});
-const minWidthStyle = {
   layers: {
     util: util$6
   }
@@ -2291,7 +2139,7 @@ const skeletonStyle = {
   layers: {
     component
   }
-}, primitive$p = {
+}, primitive$o = {
   ".arrow": {
     position: "absolute",
     // todo: replace with vars?
@@ -2343,9 +2191,9 @@ const skeletonStyle = {
   }
 }, _arrowStyle = {
   layers: {
-    primitive: primitive$p
+    primitive: primitive$o
   }
-}, primitive$o = {
+}, primitive$n = {
   ".input": {
     position: "relative"
   },
@@ -2449,7 +2297,7 @@ const skeletonStyle = {
 };
 for (const textSize of theme.FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[textSize];
-  primitive$o[`.input-${textSize}`] = {
+  primitive$n[`.input-${textSize}`] = {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
@@ -2458,26 +2306,26 @@ for (const textSize of theme.FONT_TEXT_SIZE) {
   };
 }
 for (const space of theme.SPACE)
-  primitive$o[`.input-p-${space}`] = {
+  primitive$n[`.input-p-${space}`] = {
     [varNames.input.padding]: vars.space[space]
   };
 for (const space of theme.SPACE)
-  primitive$o[`.input-g-${space}`] = {
+  primitive$n[`.input-g-${space}`] = {
     [varNames.input.gap]: vars.space[space]
   };
 const _inputStyle = {
   layers: {
-    primitive: primitive$o
+    primitive: primitive$n
   }
 }, toneMap$2 = {
-  default: "default",
+  default: "surface",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
   positive: "positive",
   caution: "caution",
   critical: "critical"
-}, primitive$n = {
+}, primitive$m = {
   ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2542,7 +2390,7 @@ const _inputStyle = {
   }
 }, _selectableStyle = {
   layers: {
-    primitive: primitive$n
+    primitive: primitive$m
   }
 };
 function buildSelectableTones() {
@@ -2584,7 +2432,7 @@ function buildSelectableTones() {
   }
   return rules2;
 }
-const primitive$m = {
+const primitive$l = {
   ".avatar": {
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
@@ -2621,11 +2469,11 @@ const primitive$m = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
         ...acc,
-        [`&.${color2}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
+        [`&.${color}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
         }
       }), {})
     }
@@ -2716,15 +2564,15 @@ const primitive$m = {
   }
 };
 for (const size of theme.AVATAR_SIZE)
-  _responsiveRule(primitive$m, `avatar-${size}`, {
+  _responsiveRule(primitive$l, `avatar-${size}`, {
     [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
     [varNames.avatar.size]: vars.avatar.sizes[size].size
   });
 const avatarStyle = {
   layers: {
-    primitive: primitive$m
+    primitive: primitive$l
   }
-}, primitive$l = {
+}, primitive$k = {
   ".badge": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2732,17 +2580,17 @@ const avatarStyle = {
   }
 };
 for (const tone of theme.THEME_COLOR_STATE_TONES)
-  primitive$l[`.badge-${tone}`] = {
+  primitive$k[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3]
+    [varNames.color.fg]: vars.color.tinted[tone].fg[1]
   };
 const badgeStyle = {
   layers: {
-    primitive: primitive$l
+    primitive: primitive$k
   }
-}, primitive$k = {
+}, primitive$j = {
   ".box": {
-    // todo: move to aspects
+    minWidth: 0,
     minHeight: 0,
     "@nest": {
       "&:is(ul), &:is(ol)": {
@@ -2762,10 +2610,10 @@ const badgeStyle = {
   }
 }, boxStyle = {
   layers: {
-    primitive: primitive$k
+    primitive: primitive$j
   }
 }, toneMap$1 = {
-  default: "default",
+  default: "surface",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2776,7 +2624,7 @@ const badgeStyle = {
   default: "solid",
   ghost: "ghost",
   bleed: "tinted"
-}, primitive$j = {
+}, primitive$i = {
   ".button": {
     WebkitFontSmoothing: "inherit",
     appearance: "none",
@@ -2795,8 +2643,6 @@ const badgeStyle = {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
     boxShadow: "var(--button-box-shadow)",
-    alignItems: "center",
-    // 'justifyContent': 'center',
     "@nest": {
       "&::-moz-focus-inner": {
         border: 0,
@@ -2825,11 +2671,10 @@ const badgeStyle = {
 };
 for (const tone of theme.THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
+  primitive$i[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
-    [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
     "--button-box-shadow": "none",
     "@nest": {
@@ -2837,77 +2682,62 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
         [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]
       }
     }
-  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
+  }, primitive$i[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
+    [varNames.color.bg]: tinted.bg[0],
+    [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[2],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
+    "--button-box-shadow": ["inset 0 0 0 var(--button-border-width) var(--color-border)", "inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)"].join(","),
     "@nest": {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
+        [varNames.color.bg]: tinted.bg[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.fg]: tinted.fg[1]
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
         "--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.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[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
+        [varNames.color.fg]: vars.color.default.tinted.fg[2]
       }
     }
-  }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
+  }, primitive$i[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
     boxShadow: "none",
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[1],
     [varNames.color.muted.fg]: tinted.fg[4],
     "--button-box-shadow": "none",
     "@nest": {
@@ -2915,28 +2745,24 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[1],
         [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[2],
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
         [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]
       }
     }
@@ -2944,11 +2770,11 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
 }
 const buttonStyle = {
   layers: {
-    primitive: primitive$j
+    primitive: primitive$i
   }
 }, toneMap = {
-  transparent: "transparent",
-  default: "default",
+  transparent: "canvas",
+  default: "surface",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2956,19 +2782,17 @@ const buttonStyle = {
   caution: "caution",
   critical: "critical",
   inherit: void 0
-}, primitive$i = {
+}, primitive$h = {
   ".card": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
     [varNames.color.bg]: vars.color.tinted.default.bg[0],
     [varNames.color.border]: vars.color.tinted.default.border[1],
-    [varNames.color.code.bg]: vars.color.code.bg,
-    [varNames.color.code.fg]: vars.color.code.fg,
     [varNames.color.fg]: vars.color.tinted.default.fg[0],
     [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
     "@nest": {
-      "button&": {
+      "&:is(button)": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         outline: "none",
@@ -2978,72 +2802,14 @@ const buttonStyle = {
         // @ts-expect-error - TODO: fix
         width: ["-moz-available", "-webkit-fill-available", "fill-available"]
       },
-      "a&": {
-        // border: 'none',
+      "&:is(a)": {
         outline: "none",
         textDecoration: "none"
       },
-      "pre&": {
+      "&:is(pre)": {
         font: "inherit",
         whiteSpace: "inherit"
-      },
-      "a&:not([data-disabled]):hover, button&:not([data-disabled]):hover": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.border]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.fg[1],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled]):active, button&:not([data-disabled]):active": {
-        [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],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      // toggle button
-      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]': {
-        [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],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]": {
-        [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],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]": {
-        [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]
-      },
-      // '&: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],
-      // },
-      "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],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
       }
-      // '&[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],
-      // },
     }
   }
 };
@@ -3055,7 +2821,7 @@ for (const scheme of theme.THEME_COLOR_SCHEMES) {
     const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
     _assignToneProps(schemeProps, _varNames, _vars);
   }
-  primitive$i[`.card.${scheme}`] = schemeProps;
+  primitive$h[`.card.${scheme}`] = schemeProps;
 }
 for (const tone of theme.THEME_COLOR_CARD_TONES) {
   const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
@@ -3063,12 +2829,10 @@ for (const tone of theme.THEME_COLOR_CARD_TONES) {
     "--card-bg-color": vars.color.bg,
     "--card-bg2-color": vars.color.muted.bg,
     "--card-border-color": vars.color.border,
-    "--card-code-bg-color": vars.color.code.bg,
-    "--card-code-fg-color": vars.color.code.fg,
+    "--card-code-bg-color": vars.color.muted.bg,
+    "--card-code-fg-color": vars.color.tinted.default.fg[4],
     "--card-fg-color": vars.color.fg,
     "--card-focus-ring-color": vars.color.focusRing,
-    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
-    "--card-hairline-hard-color": vars.color.tinted.default.border[2],
     "--card-icon-color": vars.color.fg,
     "--card-kbd-bg-color": vars.color.muted.bg,
     "--card-kbd-border-color": vars.color.tinted.default.border[1],
@@ -3080,14 +2844,16 @@ for (const tone of theme.THEME_COLOR_CARD_TONES) {
     "--card-shadow-outline-color": vars.color.shadow.outline,
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
-    "--card-shadow-ambient-color": vars.color.shadow.ambient
+    "--card-shadow-ambient-color": vars.color.shadow.ambient,
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-  }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
+    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
+    "--card-hairline-hard-color": vars.color.tinted.default.border[2]
+  }), primitive$h[`.card.${toneMap[tone]}`] = toneProps;
 }
 const cardStyle = {
   layers: {
-    primitive: primitive$i
+    primitive: primitive$h
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
@@ -3098,50 +2864,48 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
     [_varNames.backdrop]: _vars.backdrop,
-    [_varNames.code.fg]: _vars.code.fg,
-    [_varNames.code.bg]: _vars.code.bg,
-    [_varNames.code.token.atrule]: _vars.code.token.atrule,
-    [_varNames.code.token.attrName]: _vars.code.token.attrName,
-    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
-    [_varNames.code.token.attribute]: _vars.code.token.attribute,
-    [_varNames.code.token.boolean]: _vars.code.token.boolean,
-    [_varNames.code.token.builtin]: _vars.code.token.builtin,
-    [_varNames.code.token.cdata]: _vars.code.token.cdata,
-    [_varNames.code.token.char]: _vars.code.token.char,
-    [_varNames.code.token.class]: _vars.code.token.class,
-    [_varNames.code.token.className]: _vars.code.token.className,
-    [_varNames.code.token.comment]: _vars.code.token.comment,
-    [_varNames.code.token.constant]: _vars.code.token.constant,
-    [_varNames.code.token.deleted]: _vars.code.token.deleted,
-    [_varNames.code.token.doctype]: _vars.code.token.doctype,
-    [_varNames.code.token.entity]: _vars.code.token.entity,
-    [_varNames.code.token.function]: _vars.code.token.function,
-    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
-    [_varNames.code.token.id]: _vars.code.token.id,
-    [_varNames.code.token.important]: _vars.code.token.important,
-    [_varNames.code.token.inserted]: _vars.code.token.inserted,
-    [_varNames.code.token.keyword]: _vars.code.token.keyword,
-    [_varNames.code.token.number]: _vars.code.token.number,
-    [_varNames.code.token.operator]: _vars.code.token.operator,
-    [_varNames.code.token.prolog]: _vars.code.token.prolog,
-    [_varNames.code.token.property]: _vars.code.token.property,
-    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
-    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
-    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
-    [_varNames.code.token.regex]: _vars.code.token.regex,
-    [_varNames.code.token.selector]: _vars.code.token.selector,
-    [_varNames.code.token.string]: _vars.code.token.string,
-    [_varNames.code.token.symbol]: _vars.code.token.symbol,
-    [_varNames.code.token.tag]: _vars.code.token.tag,
-    [_varNames.code.token.unit]: _vars.code.token.unit,
-    [_varNames.code.token.url]: _vars.code.token.url,
-    [_varNames.code.token.variable]: _vars.code.token.variable,
     [_varNames.focusRing]: _vars.focusRing,
     [_varNames.link.fg]: _vars.link.fg,
     [_varNames.shadow.outline]: _vars.shadow.outline,
     [_varNames.shadow.umbra]: _vars.shadow.umbra,
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
-    [_varNames.shadow.ambient]: _vars.shadow.ambient
+    [_varNames.shadow.ambient]: _vars.shadow.ambient,
+    [_varNames.token.atrule]: _vars.token.atrule,
+    [_varNames.token.attrName]: _vars.token.attrName,
+    [_varNames.token.attrValue]: _vars.token.attrValue,
+    [_varNames.token.attribute]: _vars.token.attribute,
+    [_varNames.token.boolean]: _vars.token.boolean,
+    [_varNames.token.builtin]: _vars.token.builtin,
+    [_varNames.token.cdata]: _vars.token.cdata,
+    [_varNames.token.char]: _vars.token.char,
+    [_varNames.token.class]: _vars.token.class,
+    [_varNames.token.className]: _vars.token.className,
+    [_varNames.token.comment]: _vars.token.comment,
+    [_varNames.token.constant]: _vars.token.constant,
+    [_varNames.token.deleted]: _vars.token.deleted,
+    [_varNames.token.doctype]: _vars.token.doctype,
+    [_varNames.token.entity]: _vars.token.entity,
+    [_varNames.token.function]: _vars.token.function,
+    [_varNames.token.hexcode]: _vars.token.hexcode,
+    [_varNames.token.id]: _vars.token.id,
+    [_varNames.token.important]: _vars.token.important,
+    [_varNames.token.inserted]: _vars.token.inserted,
+    [_varNames.token.keyword]: _vars.token.keyword,
+    [_varNames.token.number]: _vars.token.number,
+    [_varNames.token.operator]: _vars.token.operator,
+    [_varNames.token.prolog]: _vars.token.prolog,
+    [_varNames.token.property]: _vars.token.property,
+    [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
+    [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
+    [_varNames.token.punctuation]: _vars.token.punctuation,
+    [_varNames.token.regex]: _vars.token.regex,
+    [_varNames.token.selector]: _vars.token.selector,
+    [_varNames.token.string]: _vars.token.string,
+    [_varNames.token.symbol]: _vars.token.symbol,
+    [_varNames.token.tag]: _vars.token.tag,
+    [_varNames.token.unit]: _vars.token.unit,
+    [_varNames.token.url]: _vars.token.url,
+    [_varNames.token.variable]: _vars.token.variable
   });
   for (const variant of ["solid", "tinted"])
     for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
@@ -3165,7 +2929,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
       });
     }
 }
-const primitive$h = {
+const primitive$g = {
   ".checkbox": {
     position: "relative",
     display: "inline-block"
@@ -3295,9 +3059,9 @@ const primitive$h = {
   }
 }, checkboxStyle = {
   layers: {
-    primitive: primitive$h
+    primitive: primitive$g
   }
-}, primitive$g = {
+}, primitive$f = {
   ".code": {
     "--font-weight-regular": "var(--font-code-weight-regular)",
     "--font-weight-medium": "var(--font-code-weight-medium)",
@@ -3333,7 +3097,7 @@ const primitive$h = {
   }
 };
 for (const size of theme.FONT_CODE_SIZE)
-  _responsiveRule(primitive$g, `code-${size}`, {
+  _responsiveRule(primitive$f, `code-${size}`, {
     "--font-size": `var(--font-code-${size}-size)`,
     "--font-line-height": `var(--font-code-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-code-${size}-letter-spacing)`,
@@ -3344,18 +3108,18 @@ for (const size of theme.FONT_CODE_SIZE)
   });
 const codeStyle = {
   layers: {
-    primitive: primitive$g
+    primitive: primitive$f
   }
-}, primitive$f = {
+}, primitive$e = {
   ".container": {
     margin: "0 auto",
     width: "100%"
   }
 }, containerStyle = {
   layers: {
-    primitive: primitive$f
+    primitive: primitive$e
   }
-}, primitive$e = {
+}, primitive$d = {
   ".heading": {
     "--font-weight-regular": "var(--font-heading-weight-regular)",
     "--font-weight-medium": "var(--font-heading-weight-medium)",
@@ -3379,7 +3143,7 @@ const codeStyle = {
   }
 };
 for (const size of theme.FONT_HEADING_SIZE)
-  _responsiveRule(primitive$e, `heading-${size}`, {
+  _responsiveRule(primitive$d, `heading-${size}`, {
     "--font-size": `var(--font-heading-${size}-size)`,
     "--font-line-height": `var(--font-heading-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-heading-${size}-letter-spacing)`,
@@ -3390,14 +3154,14 @@ for (const size of theme.FONT_HEADING_SIZE)
   });
 const headingStyle = {
   layers: {
-    primitive: primitive$e
+    primitive: primitive$d
   }
-}, primitive$d = {
+}, primitive$c = {
   ".kbd": {
     // '--color-bg': 'var(--color-tinted-default-bg-1)',
     // '--color-border': 'var(--color-tinted-default-border-2)',
     // '--color-fg': 'var(--color-tinted-default-fg-3)',
-    boxShadow: "inset 0 0 0 0.5px var(--color-tinted-default-border-3)",
+    boxShadow: "inset 0 0 0 0.5px var(--color-border)",
     background: "var(--color-muted-bg)",
     font: "inherit",
     verticalAlign: "top",
@@ -3409,9 +3173,9 @@ const headingStyle = {
   }
 }, kbdStyle = {
   layers: {
-    primitive: primitive$d
+    primitive: primitive$c
   }
-}, primitive$c = {
+}, primitive$b = {
   ".label": {
     "--font-weight-regular": "var(--font-label-weight-regular)",
     "--font-weight-medium": "var(--font-label-weight-medium)",
@@ -3436,7 +3200,7 @@ const headingStyle = {
   }
 };
 for (const size of theme.FONT_LABEL_SIZE)
-  _responsiveRule(primitive$c, `label-${size}`, {
+  _responsiveRule(primitive$b, `label-${size}`, {
     "--font-size": `var(--font-label-${size}-size)`,
     "--font-line-height": `var(--font-label-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-label-${size}-letter-spacing)`,
@@ -3447,13 +3211,13 @@ for (const size of theme.FONT_LABEL_SIZE)
   });
 const labelStyle = {
   layers: {
-    primitive: primitive$c
+    primitive: primitive$b
   }
-}, primitive$b = {}, popoverStyle = {
+}, primitive$a = {}, popoverStyle = {
   layers: {
-    primitive: primitive$b
+    primitive: primitive$a
   }
-}, primitive$a = {
+}, primitive$9 = {
   ".radio": {
     position: "relative",
     "@nest": {
@@ -3559,9 +3323,9 @@ const labelStyle = {
   }
 }, radioStyle = {
   layers: {
-    primitive: primitive$a
+    primitive: primitive$9
   }
-}, primitive$9 = {
+}, primitive$8 = {
   ".select": {
     "@nest": {
       "& > select:disabled": {
@@ -3581,7 +3345,7 @@ const labelStyle = {
   }
 }, selectStyle = {
   layers: {
-    primitive: primitive$9
+    primitive: primitive$8
   }
 }, keyframes = {
   "spinner-rotate": {
@@ -3592,21 +3356,13 @@ const labelStyle = {
       transform: "rotate(360deg)"
     }
   }
-}, primitive$8 = {
+}, primitive$7 = {
   ".spinner": {},
   ".animated-spinner-icon": {
     animation: "spinner-rotate 500ms linear infinite"
   }
 }, spinnerStyle = {
   keyframes,
-  layers: {
-    primitive: primitive$8
-  }
-}, primitive$7 = {
-  ".stack": {
-    gridTemplateColumns: "minmax(0, 1fr)"
-  }
-}, stackStyle = {
   layers: {
     primitive: primitive$7
   }
@@ -3624,15 +3380,21 @@ const labelStyle = {
     outline: "none",
     padding: 0,
     margin: 0,
-    // place the input element on top of the representation element
+    /* Place the input element above the representation element */
     zIndex: 1
   },
   ".switch-presentation": {
     "--switch-bg-color": "var(--color-tinted-default-border-2)",
+    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
     "--switch-fg-color": "var(--color-tinted-default-bg-0)",
+    // --switch-bg-color: ${color.input.default.enabled.border};
+    // --switch-fg-color: ${color.input.default.enabled.bg};
     "--switch-thumb-offset": "0",
     "--switch-thumb-size": "calc(var(--input-switch-height) - var(--input-switch-padding) * 2)",
     display: "block",
+    // &:not([hidden]) {
+    //   display: block;
+    // }
     position: "relative",
     width: "var(--input-switch-width)",
     height: "var(--input-switch-height)",
@@ -3641,7 +3403,20 @@ const labelStyle = {
     // Make sure it’s not possible to interact with the presentation element
     pointerEvents: "none",
     "@nest": {
+      // '&::after': {
+      //   content: '""',
+      //   display: 'block',
+      //   position: 'absolute',
+      //   top: 0,
+      //   left: 0,
+      //   right: 0,
+      //   bottom: 0,
+      //   zIndex: 1,
+      //   // boxShadow: 'var(--switch-box-shadow)',
+      //   borderRadius: 'inherit',
+      // },
       ".switch-element:focus + &": {
+        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
         outline: "var(--input-switch-focus-ring-width) solid var(--color-focus-ring)"
       },
       "input:focus:not(:focus-visible) + &": {
@@ -3649,15 +3424,35 @@ const labelStyle = {
       },
       "input:checked + &": {
         "--switch-bg-color": "var(--color-solid-default-bg-0)",
+        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
         "--switch-fg-color": "var(--color-solid-default-fg-0)"
       },
+      // input:not([data-read-only]):disabled + && {
+      //   --switch-bg-color: ${color.input.default.disabled.border};
+      //   --switch-fg-color: ${color.input.default.disabled.bg};
+      // }
+      // input[data-read-only]:disabled + && {
+      //   --switch-bg-color: ${color.input.default.readOnly.border};
+      //   --switch-fg-color: ${color.input.default.readOnly.bg};
+      // }
+      // input:checked[data-read-only]:disabled + && {
+      //   --switch-bg-color: ${color.input.default.readOnly.fg};
+      //   --switch-fg-color: ${color.input.default.readOnly.bg};
+      // }
       ".switch-element:checked + &": {
         "--switch-thumb-offset": "calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))"
-      },
-      "[data-indeterminate] > .switch-element + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))"
       }
     }
+    // @media (hover: hover) {
+    //   input:not(:disabled):hover + && {
+    //     --switch-bg-color: ${color.input.default.hovered.border};
+    //     --switch-fg-color: ${color.input.default.hovered.bg};
+    //   }
+    //   input:not(:disabled):checked:hover + && {
+    //     --switch-bg-color: ${color.input.default.enabled.fg};
+    //     --switch-fg-color: ${color.input.default.enabled.bg};
+    //   }
+    // }
   },
   ".switch-track": {
     display: "block",
@@ -3668,9 +3463,11 @@ const labelStyle = {
     right: 0,
     bottom: 0,
     borderRadius: "inherit",
+    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
     transition: "box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
   },
   ".switch-thumb": {
+    // '--switch-thumb-offset': '0',
     display: "block",
     position: "absolute",
     left: "var(--input-switch-padding)",
@@ -3682,6 +3479,40 @@ const labelStyle = {
     boxShadow: "0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)",
     transform: "translate3d(var(--switch-thumb-offset), 0, 0)",
     transition: "transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
+    //     transition-property: transform;
+    // transition-duration: ${input.switch.transitionDurationMs}ms;
+    // transition-timing-function: ${input.switch.transitionTimingFunction};
+    // const {$indeterminate} = props
+    // const {input} = getTheme_v2(props.theme)
+    // const trackWidth = input.switch.width
+    // const trackHeight = input.switch.height
+    // const trackPadding = input.switch.padding
+    // const size = trackHeight - input.switch.padding * 2
+    // const checkedOffset = trackWidth - trackPadding * 2 - size
+    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+    // const checked = $indeterminate !== true && props.$checked === true
+    // return css`
+    //   position: absolute;
+    //   left: ${rem(trackPadding)};
+    //   top: ${rem(trackPadding)};
+    //   height: ${rem(size)};
+    //   width: ${rem(size)};
+    //   border-radius: ${rem(size / 2)};
+    //   transition-property: transform;
+    //   transition-duration: ${input.switch.transitionDurationMs}ms;
+    //   transition-timing-function: ${input.switch.transitionTimingFunction};
+    //   background: var(--switch-fg-color);
+    //   transform: translate3d(0, 0, 0);
+    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+    //   ${checked &&
+    //   css`
+    //     transform: translate3d(${checkedOffset}px, 0, 0);
+    //   `}
+    //   ${$indeterminate &&
+    //   css`
+    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
+    //   `}
+    // `
   }
 }, switchStyle = {
   layers: {
@@ -3703,16 +3534,10 @@ const labelStyle = {
       },
       "& a:hover": {
         color: "var(--color-fg)"
-      },
-      "& code": {
-        fontFamily: vars.font.code.family,
-        color: "var(--color-code-fg)",
-        backgroundColor: "var(--color-muted-bg)",
-        borderRadius: vars.radius[2]
-      },
-      "& svg": {
-        color: "var(--color-muted-fg)"
       }
+      // '& svg': {
+      //   color: 'var(--color-icon)',
+      // },
     }
   },
   // 'text-accent': {
@@ -4092,7 +3917,6 @@ const textStyle = {
   insetStyle,
   marginStyle,
   maxWidthStyle,
-  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,
@@ -4124,7 +3948,6 @@ const textStyle = {
   radioStyle,
   selectStyle,
   spinnerStyle,
-  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,
@@ -4218,7 +4041,7 @@ function compileStyleRule(_selector, properties) {
 `), 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 += `${nestedSelector.replace("&", selector)} {
 `, css += compileProperties(nestedProperties), css += `}
 
 `;
@@ -4264,6 +4087,7 @@ function compileThemeProperties(theme2) {
     ...buildRadiusThemeProperties(theme2),
     ...buildShadowThemeProperties(theme2),
     ...buildSpaceThemeProperties(theme2),
+    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme2)
   };
 }
@@ -4491,57 +4315,49 @@ function buildColorCardThemeProperties(theme$1, options) {
     scheme
   };
   return {
-    // backdrop
     [`${prefix}-backdrop`]: theme.renderColor(tokens.backdrop, context),
-    // code
-    [`${prefix}-code-bg`]: theme.renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: theme.renderColor(tokens.code.fg, context),
-    // code / token
-    [`${prefix}-code-token-atrule`]: theme.renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: theme.renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: theme.renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: theme.renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: theme.renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: theme.renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: theme.renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: theme.renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: theme.renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: theme.renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: theme.renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: theme.renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: theme.renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: theme.renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: theme.renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: theme.renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: theme.renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: theme.renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: theme.renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: theme.renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: theme.renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: theme.renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: theme.renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: theme.renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: theme.renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: theme.renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: theme.renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: theme.renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: theme.renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: theme.renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: theme.renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: theme.renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: theme.renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: theme.renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: theme.renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: theme.renderColor(tokens.code.token.variable, context),
-    // focus ring
     [`${prefix}-focus-ring`]: theme.renderColor(tokens.focusRing, context),
-    // link
     [`${prefix}-link-fg`]: theme.renderColor(tokens.link.fg, context),
-    // shadow
     [`${prefix}-shadow-outline`]: theme.renderColor(tokens.shadow.outline, context),
     [`${prefix}-shadow-umbra`]: theme.renderColor(tokens.shadow.umbra, context),
     [`${prefix}-shadow-penumbra`]: theme.renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: theme.renderColor(tokens.shadow.ambient, context)
+    [`${prefix}-shadow-ambient`]: theme.renderColor(tokens.shadow.ambient, context),
+    [`${prefix}-token-atrule`]: theme.renderColor(tokens.token.atrule, context),
+    [`${prefix}-token-attr-name`]: theme.renderColor(tokens.token.attrName, context),
+    [`${prefix}-token-attr-value`]: theme.renderColor(tokens.token.attrValue, context),
+    [`${prefix}-token-attribute`]: theme.renderColor(tokens.token.attribute, context),
+    [`${prefix}-token-boolean`]: theme.renderColor(tokens.token.boolean, context),
+    [`${prefix}-token-builtin`]: theme.renderColor(tokens.token.builtin, context),
+    [`${prefix}-token-cdata`]: theme.renderColor(tokens.token.cdata, context),
+    [`${prefix}-token-char`]: theme.renderColor(tokens.token.char, context),
+    [`${prefix}-token-class-name`]: theme.renderColor(tokens.token.className, context),
+    [`${prefix}-token-class`]: theme.renderColor(tokens.token.class, context),
+    [`${prefix}-token-comment`]: theme.renderColor(tokens.token.comment, context),
+    [`${prefix}-token-constant`]: theme.renderColor(tokens.token.constant, context),
+    [`${prefix}-token-deleted`]: theme.renderColor(tokens.token.deleted, context),
+    [`${prefix}-token-doctype`]: theme.renderColor(tokens.token.doctype, context),
+    [`${prefix}-token-entity`]: theme.renderColor(tokens.token.entity, context),
+    [`${prefix}-token-function`]: theme.renderColor(tokens.token.function, context),
+    [`${prefix}-token-hexcode`]: theme.renderColor(tokens.token.hexcode, context),
+    [`${prefix}-token-id`]: theme.renderColor(tokens.token.id, context),
+    [`${prefix}-token-important`]: theme.renderColor(tokens.token.important, context),
+    [`${prefix}-token-inserted`]: theme.renderColor(tokens.token.inserted, context),
+    [`${prefix}-token-keyword`]: theme.renderColor(tokens.token.keyword, context),
+    [`${prefix}-token-number`]: theme.renderColor(tokens.token.number, context),
+    [`${prefix}-token-operator`]: theme.renderColor(tokens.token.operator, context),
+    [`${prefix}-token-prolog`]: theme.renderColor(tokens.token.prolog, context),
+    [`${prefix}-token-property`]: theme.renderColor(tokens.token.property, context),
+    [`${prefix}-token-pseudo-class`]: theme.renderColor(tokens.token.pseudoClass, context),
+    [`${prefix}-token-pseudo-eelement`]: theme.renderColor(tokens.token.pseudoElement, context),
+    [`${prefix}-token-punctuation`]: theme.renderColor(tokens.token.punctuation, context),
+    [`${prefix}-token-regex`]: theme.renderColor(tokens.token.regex, context),
+    [`${prefix}-token-selector`]: theme.renderColor(tokens.token.selector, context),
+    [`${prefix}-token-string`]: theme.renderColor(tokens.token.string, context),
+    [`${prefix}-token-symbol`]: theme.renderColor(tokens.token.symbol, context),
+    [`${prefix}-token-tag`]: theme.renderColor(tokens.token.tag, context),
+    [`${prefix}-token-unit`]: theme.renderColor(tokens.token.unit, context),
+    [`${prefix}-token-url`]: theme.renderColor(tokens.token.url, context),
+    [`${prefix}-token-variable`]: theme.renderColor(tokens.token.variable, context)
   };
 }
 function compileTheme(theme2) {
@@ -4549,9 +4365,93 @@ function compileTheme(theme2) {
 ` : `/* v0 - not supported */
 `;
 }
+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;
+}
+function unique(array) {
+  return Array.from(new Set(array));
+}
+function scopeClassName(className) {
+  if (className !== void 0)
+    return `${PREFIX}${className.trim()}`;
+}
+function _comp(...classNames) {
+  return getClassNames(...classNames).map(scopeClassName).join(" ") || void 0;
+}
 function breadcrumbs() {
   return _comp("breadcrumbs");
 }
+function _resp(prefix, prop) {
+  if (!(prop === void 0 || prop === !1))
+    return Array.isArray(prop) ? prop.map((value, index) => {
+      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
+      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+      return index === 0 ? className : `${index}:${className}`;
+    }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+}
+function border(props) {
+  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
+}
+function display(props) {
+  return composeClassNames(_resp(void 0, props.display));
+}
+function flex(props) {
+  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
+}
+function flexItem(props) {
+  return composeClassNames(_resp("f", props.flex));
+}
+function font(props) {
+  return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-align", props.align));
+}
+function gap(props) {
+  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
+}
+function grid(props) {
+  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
+}
+function gridItem(props) {
+  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
+}
+function height(props) {
+  return composeClassNames(_resp("h", props.height));
+}
+function inset(props) {
+  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
+}
+function margin(props) {
+  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
+}
+function maxWidth(props) {
+  return _resp("max-w", props.maxWidth) ?? "";
+}
+function overflow(props) {
+  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+}
+function padding(props) {
+  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
+}
+function pointerEvents(props) {
+  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
+}
+function position(props) {
+  return composeClassNames(_resp("position", props.position));
+}
+function radius(props) {
+  return composeClassNames(_resp("r", props.radius));
+}
+function shadow(props) {
+  return composeClassNames(_resp("shadow", props.shadow));
+}
+function textOverflow(props) {
+  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
+}
+function width(props) {
+  return _resp("w", props.width) ?? "";
+}
 function dialog() {
   return _comp("dialog", inset({
     inset: 0
@@ -4673,7 +4573,6 @@ function box(props) {
     inset(props),
     margin(props),
     maxWidth(props),
-    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),
@@ -4694,7 +4593,7 @@ 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, toneMap[props.tone ?? "inherit"], "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
   return _comp("checkbox");
@@ -4722,9 +4621,6 @@ function label(props) {
 function popover() {
   return _comp("popover");
 }
-function popoverCard() {
-  return _comp("popover-card");
-}
 function radio() {
   return _comp("radio");
 }
@@ -4740,9 +4636,6 @@ function spinner() {
 function animatedSpinnerIcon() {
   return _comp("animated-spinner-icon");
 }
-function stack() {
-  return _comp("stack");
-}
 function _switch() {
   return _comp("switch");
 }
@@ -4776,6 +4669,7 @@ function tooltipCard() {
 function srOnly() {
   return composeClassNames("sr-only");
 }
+exports.v3_v2 = v3_v2.v3_v2;
 exports._arrow = _arrow;
 exports._arrowShape = _arrowShape;
 exports._arrowStroke = _arrowStroke;
@@ -4839,12 +4733,10 @@ exports.margin = margin;
 exports.maxWidth = maxWidth;
 exports.menu = menu;
 exports.menuDivider = menuDivider;
-exports.minWidth = minWidth;
 exports.overflow = overflow;
 exports.padding = padding;
 exports.pointerEvents = pointerEvents;
 exports.popover = popover;
-exports.popoverCard = popoverCard;
 exports.position = position;
 exports.px = px;
 exports.radio = radio;
@@ -4857,7 +4749,6 @@ exports.shadow = shadow;
 exports.skeleton = skeleton;
 exports.spinner = spinner;
 exports.srOnly = srOnly;
-exports.stack = stack;
 exports.text = text;
 exports.textArea = textArea;
 exports.textInput = textInput;