@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

package/dist/css.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var v3_v2 = require("./_chunks-cjs/v3_v2.js"), theme = require("@sanity/ui/theme");
+var v3_v2 = require("./_chunks-cjs/v3_v2.js"), color = require("@sanity/color"), theme = require("@sanity/ui/theme");
+const PREFIX = "s-";
 function compileRule(selector, props, context) {
-  let css = compileProperties(selector, props);
+  let css = compileProperties$1(selector, props);
   if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
     for (const name in props["@keyframes"])
       context.keyframes[name] = props["@keyframes"][name];
@@ -11,13 +12,13 @@ function compileRule(selector, props, context) {
       context.media[key] || (context.media[key] = {}), context.media[key][selector] = props["@media"][key];
   return css;
 }
-function compileProperties(selector, props) {
+function compileProperties$1(selector, props) {
   let css = "{";
   for (const key in props) {
     if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
     const value = props[key], valueArr = Array.isArray(value) ? value : [value];
     for (const v of valueArr)
-      css += toSnakeCase(key) + ":" + v + ";";
+      css += toSnakeCase$1(key) + ":" + v + ";";
   }
   return css === "{" ? "" : selector + css + "}";
 }
@@ -26,68 +27,74 @@ function compileNestedRules(selector, props, context) {
   let css = "";
   for (const [_selector, _props] of Object.entries(props))
     css += `
-` + compileRule(_selector.replace(/&/g, selector), _props, context);
+` + compileRule(_selector.replace(/\./g, `.${PREFIX}`).replace(/&/g, selector), _props, context);
   return css;
 }
-function compileMediaQueryRule(query, rules2) {
-  let css = `@media ${query}{`;
-  for (const [selector, props] of Object.entries(rules2))
-    css += `
-  ` + compileProperties(selector, props), props["@nest"] && (css += compileNestedRules(selector, props["@nest"], {
-      keyframes: {},
-      media: {}
-    }));
-  return css + `
-}`;
-}
-function toSnakeCase(value) {
+function toSnakeCase$1(value) {
   return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
 }
-function compilePalette(config) {
+function compilePalette() {
   const props = {
-    "--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)
-    )`
+    ...compileHues(),
+    "--black": color.color.black.hex,
+    "--white": color.color.white.hex
   };
   return compileRule(":root", props, {
     keyframes: {},
     media: {}
   });
 }
-function compileHues(hues) {
+function compileHues() {
   const rules2 = {};
-  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("");
-    }
-  }
+  for (const hue of theme.HUES)
+    for (const tint of theme.TINTS)
+      rules2[`--${hue}-${tint}`] = color.color[hue][tint].hex;
   return rules2;
 }
-const breadcrumbsRules = {
-  breadcrumbs: {
-    lineHeight: 0
-  }
-}, varNames = {
+function _mergeStyles(styles) {
+  const keyframes2 = {}, layers = {}, rules2 = {};
+  for (const s of styles)
+    if (s) {
+      Object.assign(keyframes2, s.keyframes);
+      for (const layerName in s.layers)
+        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
+      Object.assign(rules2, s.rules);
+    }
+  return {
+    keyframes: keyframes2,
+    layers,
+    rules: rules2
+  };
+}
+function _responsiveRule(rules2, _name, properties) {
+  const name = _name.replace(/\./g, "_");
+  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 360px)": properties
+    }
+  }, rules2[`.2\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 600px)": properties
+    }
+  }, rules2[`.3\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 900px)": properties
+    }
+  }, rules2[`.4\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1200px)": properties
+    }
+  }, rules2[`.5\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1800px)": properties
+    }
+  }, rules2[`.6\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 2400px)": properties
+    }
+  };
+}
+const varNames = {
   avatar: {
     distance: "--avatar-distance",
     focusRing: {
@@ -315,6 +322,14 @@ const breadcrumbsRules = {
       })
     }
   },
+  container: {
+    0: "--container-0",
+    1: "--container-1",
+    2: "--container-2",
+    3: "--container-3",
+    4: "--container-4",
+    5: "--container-5"
+  },
   font: {
     code: {
       family: "--font-code-family",
@@ -383,6 +398,7 @@ const breadcrumbsRules = {
     gap: "--input-gap",
     padding: "--input-padding"
   },
+  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
   space: Object.fromEntries(theme.SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
 };
 function buildColorCardVarNames(props) {
@@ -706,6 +722,14 @@ const colorVars = {
     }), {})
   },
   color: colorVars,
+  container: {
+    0: `var(${varNames.container[0]})`,
+    1: `var(${varNames.container[1]})`,
+    2: `var(${varNames.container[2]})`,
+    3: `var(${varNames.container[3]})`,
+    4: `var(${varNames.container[4]})`,
+    5: `var(${varNames.container[5]})`
+  },
   font: {
     code: {
       family: `var(${varNames.font.code.family})`,
@@ -780,6 +804,7 @@ const colorVars = {
       }
     }
   },
+  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
   space: Object.fromEntries(theme.SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
 };
 function buildColorCardVars(props) {
@@ -792,11 +817,11 @@ function buildColorCardVars(props) {
       fg: `var(${prefix.accent.fg})`
     },
     avatar: {
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [color]: {
-          bg: `var(${prefix.avatar[color].bg})`,
-          fg: `var(${prefix.avatar[color].fg})`
+        [color2]: {
+          bg: `var(${prefix.avatar[color2].bg})`,
+          fg: `var(${prefix.avatar[color2].fg})`
         }
       }), {})
     },
@@ -925,36 +950,988 @@ function buildColorVariantVars(options) {
   }
   return vars2;
 }
-const dialogRules = {
-  dialog: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+const util$s = {};
+_responsiveRule(util$s, "border", {
+  border: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$s, "border-t", {
+  borderTop: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$s, "border-r", {
+  borderRight: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$s, "border-b", {
+  borderBottom: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$s, "border-l", {
+  borderLeft: `1px solid ${vars.color.border}`
+});
+const borderStyle = {
+  layers: {
+    util: util$s
+  }
+}, util$r = {};
+_responsiveRule(util$r, "block", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "block"
+    }
+  }
+});
+_responsiveRule(util$r, "flex", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "flex"
+    }
+  }
+});
+_responsiveRule(util$r, "grid", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "grid"
+    }
+  }
+});
+_responsiveRule(util$r, "inline-block", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "inline-block"
+    }
+  }
+});
+_responsiveRule(util$r, "inline-flex", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "inline-flex"
+    }
+  }
+});
+_responsiveRule(util$r, "inline-grid", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "inline-grid"
+    }
+  }
+});
+_responsiveRule(util$r, "none", {
+  "@nest": {
+    "&:not([hidden])": {
+      display: "none"
+    }
+  }
+});
+const displayStyle = {
+  layers: {
+    util: util$r
+  }
+}, util$q = {};
+_responsiveRule(util$q, "flex-align-flex-start", {
+  alignItems: "flex-start"
+});
+_responsiveRule(util$q, "flex-align-flex-end", {
+  alignItems: "flex-end"
+});
+_responsiveRule(util$q, "flex-align-center", {
+  alignItems: "center"
+});
+_responsiveRule(util$q, "flex-align-stretch", {
+  alignItems: "stretch"
+});
+_responsiveRule(util$q, "flex-align-baseline", {
+  alignItems: "baseline"
+});
+const flexAlignStyle = {
+  layers: {
+    util: util$q
+  }
+}, util$p = {};
+_responsiveRule(util$p, "f-row", {
+  flexDirection: "row"
+});
+_responsiveRule(util$p, "f-column", {
+  flexDirection: "column"
+});
+const flexDirectionStyle = {
+  layers: {
+    util: util$p
+  }
+}, util$o = {};
+_responsiveRule(util$o, "flex-justify-flex-start", {
+  justifyContent: "flex-start"
+});
+_responsiveRule(util$o, "flex-justify-flex-end", {
+  justifyContent: "flex-end"
+});
+_responsiveRule(util$o, "flex-justify-center", {
+  justifyContent: "center"
+});
+_responsiveRule(util$o, "flex-justify-between", {
+  justifyContent: "space-between"
+});
+_responsiveRule(util$o, "flex-justify-around", {
+  justifyContent: "space-around"
+});
+_responsiveRule(util$o, "flex-justify-evenly", {
+  justifyContent: "space-evenly"
+});
+const flexJustifyStyle = {
+  layers: {
+    util: util$o
+  }
+}, util$n = {};
+_responsiveRule(util$n, "flex-nowrap", {
+  flexWrap: "nowrap"
+});
+_responsiveRule(util$n, "flex-wrap", {
+  flexWrap: "wrap"
+});
+_responsiveRule(util$n, "flex-wrap-reverse", {
+  flexWrap: "wrap-reverse"
+});
+const flexWrapStyle = {
+  layers: {
+    util: util$n
+  }
+}, util$m = {};
+_responsiveRule(util$m, "f-none", {
+  flex: "none"
+});
+_responsiveRule(util$m, "f-auto", {
+  flex: "auto"
+});
+_responsiveRule(util$m, "f-initial", {
+  flex: "initial"
+});
+_responsiveRule(util$m, "f-1", {
+  flex: 1
+});
+_responsiveRule(util$m, "f-2", {
+  flex: 2
+});
+_responsiveRule(util$m, "f-3", {
+  flex: 3
+});
+_responsiveRule(util$m, "f-4", {
+  flex: 4
+});
+_responsiveRule(util$m, "f-5", {
+  flex: 5
+});
+_responsiveRule(util$m, "f-6", {
+  flex: 6
+});
+_responsiveRule(util$m, "f-7", {
+  flex: 7
+});
+_responsiveRule(util$m, "f-8", {
+  flex: 8
+});
+_responsiveRule(util$m, "f-9", {
+  flex: 9
+});
+_responsiveRule(util$m, "f-10", {
+  flex: 10
+});
+_responsiveRule(util$m, "f-11", {
+  flex: 11
+});
+_responsiveRule(util$m, "f-12", {
+  flex: 12
+});
+const flexStyle = {
+  layers: {
+    util: util$m
+  }
+}, rules$3 = {
+  ".font": {
+    // 'position': 'relative',
+    fontFamily: "var(--font-family)",
+    fontFeatureSettings: "var(--font-feature-settings)",
+    fontSize: "var(--font-size)",
+    lineHeight: "var(--font-line-height)",
+    letterSpacing: "var(--font-letter-spacing)",
+    fontWeight: "var(--font-weight)",
+    transform: "translateY(var(--font-descender-height))",
+    padding: "1px 0",
+    margin: "0",
+    "--font-icon-offset": "calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)",
+    "--font-weight": "var(--font-weight-regular)",
+    "@nest": {
+      "&:before": {
+        content: '""',
+        display: "block",
+        height: 0,
+        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
+      },
+      "&:after": {
+        content: '""',
+        display: "block",
+        height: 0,
+        marginBottom: "-1px"
+      },
+      "& svg": {
+        // Certain popular CSS libraries changes the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: "inline"
+      },
+      // todo
+      // '& svg:not([data-sanity-icon])': {
+      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
+      //   margin: 'var(--custom-icon-offset)',
+      // },
+      "& [data-sanity-icon]": {
+        fontSize: "var(--font-icon-size)",
+        margin: "var(--font-icon-offset)",
+        vectorEffect: "non-scaling-stroke"
+      }
+    }
+  },
+  ".font-regular": {
+    "--font-weight": "var(--font-weight-regular)"
+  },
+  ".font-medium": {
+    "--font-weight": "var(--font-weight-medium)"
+  },
+  ".font-semibold": {
+    "--font-weight": "var(--font-weight-semibold)"
+  },
+  ".font-bold": {
+    "--font-weight": "var(--font-weight-bold)"
+  }
+};
+_responsiveRule(rules$3, "text-align-initial", {
+  textAlign: "initial"
+});
+_responsiveRule(rules$3, "text-align-left", {
+  textAlign: "left"
+});
+_responsiveRule(rules$3, "text-align-center", {
+  textAlign: "center"
+});
+_responsiveRule(rules$3, "text-align-right", {
+  textAlign: "right"
+});
+_responsiveRule(rules$3, "text-align-justify", {
+  textAlign: "justify"
+});
+const fontStyle = {
+  layers: {
+    primitive: rules$3
+  }
+}, util$l = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$l, `g-${space}`, {
+    gap: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$l, `gx-${space}`, {
+    columnGap: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$l, `gy-${space}`, {
+    rowGap: vars.space[space]
+  });
+const gapStyle = {
+  layers: {
+    util: util$l
+  }
+}, util$k = {};
+_responsiveRule(util$k, "auto-cols-auto", {
+  gridAutoColumns: "auto"
+});
+_responsiveRule(util$k, "auto-cols-min", {
+  gridAutoColumns: "min-content"
+});
+_responsiveRule(util$k, "auto-cols-max", {
+  gridAutoColumns: "max-content"
+});
+_responsiveRule(util$k, "auto-cols-fr", {
+  gridAutoColumns: "minmax(0, 1fr)"
+});
+const gridAutoColumnsStyle = {
+  layers: {
+    util: util$k
+  }
+}, util$j = {};
+_responsiveRule(util$j, "auto-flow-row", {
+  gridAutoFlow: "row"
+});
+_responsiveRule(util$j, "auto-flow-column", {
+  gridAutoFlow: "column"
+});
+_responsiveRule(util$j, "auto-flow-row-dense", {
+  gridAutoFlow: "row dense"
+});
+_responsiveRule(util$j, "auto-flow-column-dense", {
+  gridAutoFlow: "column dense"
+});
+const gridAutoFlowStyle = {
+  layers: {
+    util: util$j
+  }
+}, util$i = {};
+_responsiveRule(util$i, "auto-rows-auto", {
+  gridAutoRows: "auto"
+});
+_responsiveRule(util$i, "auto-rows-min", {
+  gridAutoRows: "min-content"
+});
+_responsiveRule(util$i, "auto-rows-max", {
+  gridAutoRows: "max-content"
+});
+_responsiveRule(util$i, "auto-rows-fr", {
+  gridAutoRows: "minmax(0, 1fr)"
+});
+const gridAutoRowsStyle = {
+  layers: {
+    util: util$i
+  }
+}, util$h = {};
+_responsiveRule(util$h, "cols-1", {
+  gridTemplateColumns: "repeat(1, 1fr)"
+});
+_responsiveRule(util$h, "cols-2", {
+  gridTemplateColumns: "repeat(2, 1fr)"
+});
+_responsiveRule(util$h, "cols-3", {
+  gridTemplateColumns: "repeat(3, 1fr)"
+});
+_responsiveRule(util$h, "cols-4", {
+  gridTemplateColumns: "repeat(4, 1fr)"
+});
+_responsiveRule(util$h, "cols-5", {
+  gridTemplateColumns: "repeat(5, 1fr)"
+});
+_responsiveRule(util$h, "cols-6", {
+  gridTemplateColumns: "repeat(6, 1fr)"
+});
+_responsiveRule(util$h, "cols-7", {
+  gridTemplateColumns: "repeat(7, 1fr)"
+});
+_responsiveRule(util$h, "cols-8", {
+  gridTemplateColumns: "repeat(8, 1fr)"
+});
+_responsiveRule(util$h, "cols-9", {
+  gridTemplateColumns: "repeat(9, 1fr)"
+});
+_responsiveRule(util$h, "cols-10", {
+  gridTemplateColumns: "repeat(10, 1fr)"
+});
+_responsiveRule(util$h, "cols-12", {
+  gridTemplateColumns: "repeat(12, 1fr)"
+});
+const gridColumnsStyle = {
+  layers: {
+    util: util$h
+  }
+}, util$g = {};
+_responsiveRule(util$g, "rows-1", {
+  gridTemplateRows: "repeat(1, 1fr)"
+});
+_responsiveRule(util$g, "rows-2", {
+  gridTemplateRows: "repeat(2, 1fr)"
+});
+_responsiveRule(util$g, "rows-3", {
+  gridTemplateRows: "repeat(3, 1fr)"
+});
+_responsiveRule(util$g, "rows-4", {
+  gridTemplateRows: "repeat(4, 1fr)"
+});
+_responsiveRule(util$g, "rows-5", {
+  gridTemplateRows: "repeat(5, 1fr)"
+});
+_responsiveRule(util$g, "rows-6", {
+  gridTemplateRows: "repeat(6, 1fr)"
+});
+_responsiveRule(util$g, "rows-7", {
+  gridTemplateRows: "repeat(7, 1fr)"
+});
+_responsiveRule(util$g, "rows-8", {
+  gridTemplateRows: "repeat(8, 1fr)"
+});
+_responsiveRule(util$g, "rows-9", {
+  gridTemplateRows: "repeat(9, 1fr)"
+});
+_responsiveRule(util$g, "rows-10", {
+  gridTemplateRows: "repeat(10, 1fr)"
+});
+_responsiveRule(util$g, "rows-12", {
+  gridTemplateRows: "repeat(12, 1fr)"
+});
+const gridRowsStyle = {
+  layers: {
+    util: util$g
+  }
+}, util$f = {};
+_responsiveRule(util$f, "col-auto", {
+  gridColumn: "auto"
+});
+_responsiveRule(util$f, "col-full", {
+  gridColumn: "1 / -1"
+});
+_responsiveRule(util$f, "col-1", {
+  gridColumn: "span 1 / span 1"
+});
+_responsiveRule(util$f, "col-2", {
+  gridColumn: "span 2 / span 2"
+});
+_responsiveRule(util$f, "col-3", {
+  gridColumn: "span 3 / span 3"
+});
+_responsiveRule(util$f, "col-4", {
+  gridColumn: "span 4 / span 4"
+});
+_responsiveRule(util$f, "col-5", {
+  gridColumn: "span 5 / span 5"
+});
+_responsiveRule(util$f, "col-6", {
+  gridColumn: "span 6 / span 6"
+});
+_responsiveRule(util$f, "col-7", {
+  gridColumn: "span 7 / span 7"
+});
+_responsiveRule(util$f, "col-8", {
+  gridColumn: "span 8 / span 8"
+});
+_responsiveRule(util$f, "col-9", {
+  gridColumn: "span 9 / span 9"
+});
+_responsiveRule(util$f, "col-10", {
+  gridColumn: "span 10 / span 10"
+});
+_responsiveRule(util$f, "col-12", {
+  gridColumn: "span 12 / span 12"
+});
+const gridColumnStyle = {
+  layers: {
+    util: util$f
+  }
+}, util$e = {};
+_responsiveRule(util$e, "col-end-auto", {
+  gridColumnEnd: "auto"
+});
+_responsiveRule(util$e, "col-end-1", {
+  gridColumnEnd: "1"
+});
+_responsiveRule(util$e, "col-end-2", {
+  gridColumnEnd: "2"
+});
+_responsiveRule(util$e, "col-end-3", {
+  gridColumnEnd: "3"
+});
+_responsiveRule(util$e, "col-end-4", {
+  gridColumnEnd: "4"
+});
+_responsiveRule(util$e, "col-end-5", {
+  gridColumnEnd: "5"
+});
+_responsiveRule(util$e, "col-end-6", {
+  gridColumnEnd: "6"
+});
+_responsiveRule(util$e, "col-end-7", {
+  gridColumnEnd: "7"
+});
+_responsiveRule(util$e, "col-end-8", {
+  gridColumnEnd: "8"
+});
+_responsiveRule(util$e, "col-end-9", {
+  gridColumnEnd: "9"
+});
+_responsiveRule(util$e, "col-end-10", {
+  gridColumnEnd: "10"
+});
+_responsiveRule(util$e, "col-end-11", {
+  gridColumnEnd: "11"
+});
+_responsiveRule(util$e, "col-end-12", {
+  gridColumnEnd: "12"
+});
+const gridColumnEndStyle = {
+  layers: {
+    util: util$e
+  }
+}, util$d = {};
+_responsiveRule(util$d, "col-start-auto", {
+  gridColumnStart: "auto"
+});
+_responsiveRule(util$d, "col-start-1", {
+  gridColumnStart: "1"
+});
+_responsiveRule(util$d, "col-start-2", {
+  gridColumnStart: "2"
+});
+_responsiveRule(util$d, "col-start-3", {
+  gridColumnStart: "3"
+});
+_responsiveRule(util$d, "col-start-4", {
+  gridColumnStart: "4"
+});
+_responsiveRule(util$d, "col-start-5", {
+  gridColumnStart: "5"
+});
+_responsiveRule(util$d, "col-start-6", {
+  gridColumnStart: "6"
+});
+_responsiveRule(util$d, "col-start-7", {
+  gridColumnStart: "7"
+});
+_responsiveRule(util$d, "col-start-8", {
+  gridColumnStart: "8"
+});
+_responsiveRule(util$d, "col-start-9", {
+  gridColumnStart: "9"
+});
+_responsiveRule(util$d, "col-start-10", {
+  gridColumnStart: "10"
+});
+_responsiveRule(util$d, "col-start-11", {
+  gridColumnStart: "11"
+});
+_responsiveRule(util$d, "col-start-12", {
+  gridColumnStart: "12"
+});
+const gridColumnStartStyle = {
+  layers: {
+    util: util$d
+  }
+}, util$c = {};
+_responsiveRule(util$c, "row-auto", {
+  gridRow: "auto"
+});
+_responsiveRule(util$c, "row-full", {
+  gridRow: "1 / -1"
+});
+_responsiveRule(util$c, "row-1", {
+  gridRow: "span 1 / span 1"
+});
+_responsiveRule(util$c, "row-2", {
+  gridRow: "span 2 / span 2"
+});
+_responsiveRule(util$c, "row-3", {
+  gridRow: "span 3 / span 3"
+});
+_responsiveRule(util$c, "row-4", {
+  gridRow: "span 4 / span 4"
+});
+_responsiveRule(util$c, "row-5", {
+  gridRow: "span 5 / span 5"
+});
+_responsiveRule(util$c, "row-6", {
+  gridRow: "span 6 / span 6"
+});
+_responsiveRule(util$c, "row-7", {
+  gridRow: "span 7 / span 7"
+});
+_responsiveRule(util$c, "row-8", {
+  gridRow: "span 8 / span 8"
+});
+_responsiveRule(util$c, "row-9", {
+  gridRow: "span 9 / span 9"
+});
+_responsiveRule(util$c, "row-10", {
+  gridRow: "span 10 / span 10"
+});
+_responsiveRule(util$c, "row-12", {
+  gridRow: "span 12 / span 12"
+});
+const gridRowStyle = {
+  layers: {
+    util: util$c
+  }
+}, util$b = {};
+_responsiveRule(util$b, "row-end-auto", {
+  gridRowEnd: "auto"
+});
+_responsiveRule(util$b, "row-end-1", {
+  gridRowEnd: "1"
+});
+_responsiveRule(util$b, "row-end-2", {
+  gridRowEnd: "2"
+});
+_responsiveRule(util$b, "row-end-3", {
+  gridRowEnd: "3"
+});
+_responsiveRule(util$b, "row-end-4", {
+  gridRowEnd: "4"
+});
+_responsiveRule(util$b, "row-end-5", {
+  gridRowEnd: "5"
+});
+_responsiveRule(util$b, "row-end-6", {
+  gridRowEnd: "6"
+});
+_responsiveRule(util$b, "row-end-7", {
+  gridRowEnd: "7"
+});
+_responsiveRule(util$b, "row-end-8", {
+  gridRowEnd: "8"
+});
+_responsiveRule(util$b, "row-end-9", {
+  gridRowEnd: "9"
+});
+_responsiveRule(util$b, "row-end-10", {
+  gridRowEnd: "10"
+});
+_responsiveRule(util$b, "row-end-11", {
+  gridRowEnd: "11"
+});
+_responsiveRule(util$b, "row-end-12", {
+  gridRowEnd: "12"
+});
+const gridRowEndStyle = {
+  layers: {
+    util: util$b
+  }
+}, util$a = {};
+_responsiveRule(util$a, "row-start-auto", {
+  gridRowStart: "auto"
+});
+_responsiveRule(util$a, "row-start-1", {
+  gridRowStart: "1"
+});
+_responsiveRule(util$a, "row-start-2", {
+  gridRowStart: "2"
+});
+_responsiveRule(util$a, "row-start-3", {
+  gridRowStart: "3"
+});
+_responsiveRule(util$a, "row-start-4", {
+  gridRowStart: "4"
+});
+_responsiveRule(util$a, "row-start-5", {
+  gridRowStart: "5"
+});
+_responsiveRule(util$a, "row-start-6", {
+  gridRowStart: "6"
+});
+_responsiveRule(util$a, "row-start-7", {
+  gridRowStart: "7"
+});
+_responsiveRule(util$a, "row-start-8", {
+  gridRowStart: "8"
+});
+_responsiveRule(util$a, "row-start-9", {
+  gridRowStart: "9"
+});
+_responsiveRule(util$a, "row-start-10", {
+  gridRowStart: "10"
+});
+_responsiveRule(util$a, "row-start-11", {
+  gridRowStart: "11"
+});
+_responsiveRule(util$a, "row-start-12", {
+  gridRowStart: "12"
+});
+const gridRowStartStyle = {
+  layers: {
+    util: util$a
+  }
+}, util$9 = {};
+_responsiveRule(util$9, "h-fill", {
+  height: "100%"
+});
+_responsiveRule(util$9, "h-stretch", {
+  height: "stretch"
+});
+const heightStyle = {
+  layers: {
+    util: util$9
+  }
+}, util$8 = {};
+_responsiveRule(util$8, "inset-0", {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+_responsiveRule(util$8, "top-0", {
+  top: 0
+});
+_responsiveRule(util$8, "right-0", {
+  right: 0
+});
+_responsiveRule(util$8, "bottom-0", {
+  bottom: 0
+});
+_responsiveRule(util$8, "left-0", {
+  left: 0
+});
+const insetStyle = {
+  layers: {
+    util: util$8
+  }
+}, util$7 = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `m-${space}`, {
+    margin: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `mx-${space}`, {
+    marginLeft: vars.space[space],
+    marginRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `my-${space}`, {
+    marginTop: vars.space[space],
+    marginBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `mt-${space}`, {
+    marginTop: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `mr-${space}`, {
+    marginRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `mb-${space}`, {
+    marginBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$7, `ml-${space}`, {
+    marginLeft: vars.space[space]
+  });
+const marginStyle = {
+  layers: {
+    util: util$7
+  }
+}, util$6 = {};
+_responsiveRule(util$6, "max-w-0", {
+  maxWidth: vars.container[0]
+});
+_responsiveRule(util$6, "max-w-1", {
+  maxWidth: vars.container[1]
+});
+_responsiveRule(util$6, "max-w-2", {
+  maxWidth: vars.container[2]
+});
+_responsiveRule(util$6, "max-w-3", {
+  maxWidth: vars.container[3]
+});
+_responsiveRule(util$6, "max-w-4", {
+  maxWidth: vars.container[4]
+});
+_responsiveRule(util$6, "max-w-5", {
+  maxWidth: vars.container[5]
+});
+_responsiveRule(util$6, "max-w-auto", {
+  maxWidth: "none"
+});
+_responsiveRule(util$6, "max-w-fill", {
+  maxWidth: "100%"
+});
+const maxWidthStyle = {
+  layers: {
+    util: util$6
+  }
+}, rules$2 = {
+  ".outline-none": {
+    outline: "none"
+  }
+}, outlineStyle = {
+  layers: {
+    util: rules$2
+  }
+}, util$5 = {};
+_responsiveRule(util$5, "overflow-visible", {
+  overflow: "visible"
+});
+_responsiveRule(util$5, "overflow-hidden", {
+  overflow: "hidden"
+});
+_responsiveRule(util$5, "overflow-scroll", {
+  overflow: "scroll"
+});
+_responsiveRule(util$5, "overflow-auto", {
+  overflow: "auto"
+});
+const overflowStyle = {
+  layers: {
+    util: util$5
+  }
+}, util$4 = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `p-${space}`, {
+    padding: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `px-${space}`, {
+    paddingLeft: vars.space[space],
+    paddingRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `py-${space}`, {
+    paddingTop: vars.space[space],
+    paddingBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `pt-${space}`, {
+    paddingTop: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `pr-${space}`, {
+    paddingRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `pb-${space}`, {
+    paddingBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$4, `pl-${space}`, {
+    paddingLeft: vars.space[space]
+  });
+const paddingStyle = {
+  layers: {
+    util: util$4
+  }
+}, rules$1 = {
+  ".pointer-events-none": {
+    pointerEvents: "none"
+  },
+  ".pointer-events-auto": {
+    pointerEvents: "auto"
+  }
+}, pointerEventsStyle = {
+  layers: {
+    util: rules$1
+  }
+}, util$3 = {};
+_responsiveRule(util$3, "position-absolute", {
+  position: "absolute"
+});
+_responsiveRule(util$3, "position-fixed", {
+  position: "fixed"
+});
+_responsiveRule(util$3, "position-relative", {
+  position: "relative"
+});
+_responsiveRule(util$3, "position-static", {
+  position: "static"
+});
+_responsiveRule(util$3, "position-sticky", {
+  position: "sticky"
+});
+const positionStyle = {
+  layers: {
+    util: util$3
+  }
+}, util$2 = {};
+_responsiveRule(util$2, "r-0", {
+  borderRadius: vars.radius[0]
+});
+_responsiveRule(util$2, "r-1", {
+  borderRadius: vars.radius[1]
+});
+_responsiveRule(util$2, "r-2", {
+  borderRadius: vars.radius[2]
+});
+_responsiveRule(util$2, "r-3", {
+  borderRadius: vars.radius[3]
+});
+_responsiveRule(util$2, "r-4", {
+  borderRadius: vars.radius[4]
+});
+_responsiveRule(util$2, "r-5", {
+  borderRadius: vars.radius[5]
+});
+_responsiveRule(util$2, "r-6", {
+  borderRadius: vars.radius[6]
+});
+_responsiveRule(util$2, "r-full", {
+  borderRadius: "9999px"
+});
+const radiusStyle = {
+  layers: {
+    util: util$2
+  }
+}, util$1 = {};
+_responsiveRule(util$1, "shadow-0", {
+  boxShadow: "none"
+});
+_responsiveRule(util$1, "shadow-1", {
+  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`].join(", ")
+});
+_responsiveRule(util$1, "shadow-2", {
+  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`].join(", ")
+});
+_responsiveRule(util$1, "shadow-3", {
+  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`].join(", ")
+});
+_responsiveRule(util$1, "shadow-4", {
+  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`].join(", ")
+});
+_responsiveRule(util$1, "shadow-5", {
+  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`].join(", ")
+});
+const shadowStyle = {
+  layers: {
+    util: util$1
+  }
+}, rules = {
+  ".text-overflow-ellipsis": {
+    display: "block",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    // @ts-expect-error - TODO: fix this
+    overflow: ["hidden", "clip"]
+  },
+  ".text-overflow-clip": {
+    display: "block",
+    whiteSpace: "nowrap",
+    textOverflow: "clip",
+    // @ts-expect-error - TODO: fix this
+    overflow: ["hidden", "clip"]
+  }
+}, textOverflowStyle = {
+  layers: {
+    util: rules
+  }
+}, util = {};
+_responsiveRule(util, "w-fill", {
+  // @ts-expect-error - TODO: fix this
+  width: ["-moz-available", "-webkit-fill-available", "stretch"]
+});
+const widthStyle = {
+  layers: {
+    util
+  }
+}, component$5 = {
+  ".breadcrumbs": {
+    lineHeight: 0
+  }
+}, breadcrumbsStyle = {
+  layers: {
+    component: component$5
+  }
+}, keyframes$2 = {
+  "dialog-zoom-in": {
+    from: {
+      opacity: 0,
+      transform: "scale(0.95)"
+    },
+    to: {
+      opacity: 1,
+      transform: "scale(1)"
+    }
+  },
+  "dialog-fade-in": {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  }
+}, component$4 = {
+  ".dialog": {
+    // 'top': 0,
+    // 'left': 0,
+    // 'right': 0,
+    // 'bottom': 0,
     alignItems: "center",
     justifyContent: "center",
     outline: "none",
     background: vars.color.backdrop,
-    "@keyframes": {
-      "dialog-zoom-in": {
-        from: {
-          opacity: 0,
-          transform: "scale(0.95)"
-        },
-        to: {
-          opacity: 1,
-          transform: "scale(1)"
-        }
-      },
-      "dialog-fade-in": {
-        from: {
-          opacity: 0
-        },
-        to: {
-          opacity: 1
-        }
-      }
-    },
     "@nest": {
       "&[data-animate]": {
         animation: "dialog-fade-in 200ms ease-out"
@@ -965,76 +1942,59 @@ const dialogRules = {
       }
     }
   },
-  "dialog-container": {
+  ".dialog-container": {
     width: "100%",
     height: "100%"
   },
-  "dialog-card-root": {
+  ".dialog-card-root": {
     width: "100%",
     maxHeight: "100%",
+    // @ts-expect-error - TODO: fix this
     overflow: ["hidden", "clip"]
   },
-  "dialog-layout": {
+  ".dialog-layout": {
     width: "100%"
   },
-  "dialog-header": {
+  ".dialog-header": {
     zIndex: 2
   },
-  "dialog-content": {
+  ".dialog-content": {
     zIndex: 1,
     outline: "none"
   },
-  "dialog-footer": {
+  ".dialog-footer": {
     zIndex: 3
   }
-}, menuRules = {
-  menu: {
+}, dialogStyle = {
+  keyframes: keyframes$2,
+  layers: {
+    component: component$4
+  }
+}, component$3 = {
+  ".menu": {
     outline: "none"
   },
-  "menu-divider": {
+  ".menu-divider": {
     height: "1px",
     border: 0,
     backgroundColor: vars.color.border,
     margin: 0
   }
-};
-function responsiveRules(className, props) {
-  return {
-    [className]: props,
-    [`_1:${className}`]: {
-      "@media": {
-        "screen and (min-width: 360px)": props
-      }
-    },
-    [`_2:${className}`]: {
-      "@media": {
-        "screen and (min-width: 600px)": props
-      }
-    },
-    [`_3:${className}`]: {
-      "@media": {
-        "screen and (min-width: 900px)": props
-      }
-    },
-    [`_4:${className}`]: {
-      "@media": {
-        "screen and (min-width: 1200px)": props
-      }
-    },
-    [`_5:${className}`]: {
-      "@media": {
-        "screen and (min-width: 1800px)": props
-      }
+}, menuStyle = {
+  layers: {
+    component: component$3
+  }
+}, keyframes$1 = {
+  "skeleton-pulse": {
+    "0%": {
+      backgroundPosition: "100%"
     },
-    [`_6:${className}`]: {
-      "@media": {
-        "screen and (min-width: 2400px)": props
-      }
+    "100%": {
+      backgroundPosition: "-100%"
     }
-  };
-}
-const skeletonRules = {
-  skeleton: {
+  }
+}, component$2 = {
+  ".skeleton": {
     "--color-skeleton-from": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
     "--color-skeleton-to": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
     backgroundColor: vars.color.skeleton.from,
@@ -1043,16 +2003,6 @@ const skeletonRules = {
     backgroundAttachment: "fixed",
     opacity: 0,
     transition: "opacity 200ms ease-in",
-    "@keyframes": {
-      "skeleton-pulse": {
-        "0%": {
-          backgroundPosition: "100%"
-        },
-        "100%": {
-          backgroundPosition: "-100%"
-        }
-      }
-    },
     "@nest": {
       "&[data-animated]": {
         backgroundImage: ["linear-gradient(to right", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
@@ -1071,48 +2021,41 @@ const skeletonRules = {
       }
     }
   },
-  "font-skeleton": {
+  ".font-skeleton": {
     height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
-  },
-  // ...responsiveRules('text-skeleton-0', {
-  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
-  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
-  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
-  // }),
-  ...theme.FONT_CODE_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`code-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.code.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.code.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.code.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`heading-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.heading.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.heading.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.heading.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`label-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.label.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.label.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.label.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`text-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.text.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.text.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.text.sizes[size].descenderHeight
-    })
-  }), {})
-}, toastRules = {
-  "toast-layer": {
+  }
+};
+for (const size of theme.FONT_CODE_SIZE)
+  _responsiveRule(component$2, `code-skeleton-${size}`, {
+    "--font-skeleton-line-height": vars.font.code.sizes[size].lineHeight,
+    "--font-skeleton-ascender-height": vars.font.code.sizes[size].ascenderHeight,
+    "--font-skeleton-descender-height": vars.font.code.sizes[size].descenderHeight
+  });
+for (const size of theme.FONT_HEADING_SIZE)
+  _responsiveRule(component$2, `heading-skeleton-${size}`, {
+    "--font-skeleton-line-height": vars.font.heading.sizes[size].lineHeight,
+    "--font-skeleton-ascender-height": vars.font.heading.sizes[size].ascenderHeight,
+    "--font-skeleton-descender-height": vars.font.heading.sizes[size].descenderHeight
+  });
+for (const size of theme.FONT_LABEL_SIZE)
+  _responsiveRule(component$2, `label-skeleton-${size}`, {
+    "--font-skeleton-line-height": vars.font.label.sizes[size].lineHeight,
+    "--font-skeleton-ascender-height": vars.font.label.sizes[size].ascenderHeight,
+    "--font-skeleton-descender-height": vars.font.label.sizes[size].descenderHeight
+  });
+for (const size of theme.FONT_TEXT_SIZE)
+  _responsiveRule(component$2, `text-skeleton-${size}`, {
+    "--font-skeleton-line-height": vars.font.text.sizes[size].lineHeight,
+    "--font-skeleton-ascender-height": vars.font.text.sizes[size].ascenderHeight,
+    "--font-skeleton-descender-height": vars.font.text.sizes[size].descenderHeight
+  });
+const skeletonStyle = {
+  keyframes: keyframes$1,
+  layers: {
+    component: component$2
+  }
+}, component$1 = {
+  ".toast-layer": {
     position: "fixed",
     right: 0,
     bottom: 0,
@@ -1120,12 +2063,62 @@ const skeletonRules = {
     maxWidth: "420px",
     width: "100%"
   },
-  toast: {
+  ".toast": {
     pointerEvents: "all",
+    // @ts-expect-error - TODO: fix this
     overflow: ["hidden", "clip"]
   }
-}, _arrowRules = {
-  arrow: {
+}, toastStyle = {
+  layers: {
+    component: component$1
+  }
+}, component = {
+  ".tree-item": {
+    "@nest": {
+      '&[role="none"] > [role="treeitem"]': {
+        outline: "none",
+        cursor: "default",
+        borderRadius: "3px",
+        backgroundColor: vars.color.bg,
+        // 'var(--card-bg-color)',
+        color: "var(--treeitem-fg-color)"
+      },
+      '&[role="none"] > [role="treeitem"]:focus': {
+        position: "relative"
+      },
+      '&[role="treeitem"]': {
+        outline: "none"
+      },
+      '&[role="treeitem"] > div': {
+        cursor: "default",
+        borderRadius: "3px",
+        backgroundColor: vars.color.bg,
+        // 'var(--card-bg-color)',
+        color: "var(--treeitem-fg-color)"
+      },
+      '&[role="treeitem"]:focus > div': {
+        position: "relative"
+      }
+      // &[role='treeitem'] {
+      //   outline: none;
+      //   & > div {
+      //     cursor: default;
+      //     border-radius: 3px;
+      //     background-color: var(--card-bg-color);
+      //     color: var(--treeitem-fg-color);
+      //   }
+      //   &:focus > div {
+      //     position: relative;
+      //   }
+      // }
+    }
+  }
+}, treeStyle = {
+  layers: {
+    component
+  }
+}, primitive$o = {
+  ".arrow": {
     position: "absolute",
     // todo: replace with vars?
     width: "var(--arrow-size)",
@@ -1168,24 +2161,28 @@ const skeletonRules = {
       }
     }
   },
-  "arrow-stroke": {
+  ".arrow-stroke": {
     stroke: vars.color.shadow.outline
   },
-  "arrow-shape": {
+  ".arrow-shape": {
     fill: vars.color.bg
   }
-}, _inputRules = {
-  input: {
+}, _arrowStyle = {
+  layers: {
+    primitive: primitive$o
+  }
+}, primitive$n = {
+  ".input": {
     position: "relative"
   },
-  "input-b": {
+  ".input-b": {
     "@nest": {
       "& .input-presentation": {
         boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`
       }
     }
   },
-  "input-element": {
+  ".input-element": {
     "--color-input-fg": vars.color.tinted.default.fg[2],
     "--color-input-placeholder": vars.color.tinted.default.border[4],
     WebkitFontSmoothing: "inherit",
@@ -1206,6 +2203,7 @@ const skeletonRules = {
     display: "block",
     boxSizing: "border-box",
     resize: "none",
+    // @ts-expect-error - TODO: fix this
     width: ["-moz-available", "-webkit-fill-available", "stretch"],
     "@nest": {
       ".input[data-icon-left] &": {
@@ -1228,7 +2226,7 @@ const skeletonRules = {
       }
     }
   },
-  "input-presentation": {
+  ".input-presentation": {
     [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
     [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
     [varNames.color.input.border]: vars.color.tinted.default.border[1],
@@ -1277,7 +2275,7 @@ const skeletonRules = {
 };
 for (const textSize of theme.FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[textSize];
-  _inputRules[`input-${textSize}`] = {
+  primitive$n[`.input-${textSize}`] = {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
@@ -1286,23 +2284,27 @@ for (const textSize of theme.FONT_TEXT_SIZE) {
   };
 }
 for (const space of theme.SPACE)
-  Object.assign(_inputRules, responsiveRules(`input-p-${space}`, {
+  primitive$n[`.input-p-${space}`] = {
     [varNames.input.padding]: vars.space[space]
-  }));
+  };
 for (const space of theme.SPACE)
-  Object.assign(_inputRules, responsiveRules(`input-g-${space}`, {
+  primitive$n[`.input-g-${space}`] = {
     [varNames.input.gap]: vars.space[space]
-  }));
-const toneMap$2 = {
-  default: "surface",
+  };
+const _inputStyle = {
+  layers: {
+    primitive: primitive$n
+  }
+}, toneMap$2 = {
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
   positive: "positive",
   caution: "caution",
   critical: "critical"
-}, _selectableRules = {
-  selectable: {
+}, primitive$m = {
+  ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
     "--color-bg": vars.color.tinted.bg[0],
@@ -1316,6 +2318,7 @@ const toneMap$2 = {
         font: "inherit",
         textAlign: "inherit",
         border: 0,
+        // @ts-expect-error - TODO: fix this
         width: ["-moz-available", "-webkit-fill-available", "stretch"]
       },
       /* &:is(a) */
@@ -1363,6 +2366,10 @@ const toneMap$2 = {
       }
     }
   }
+}, _selectableStyle = {
+  layers: {
+    primitive: primitive$m
+  }
 };
 function buildSelectableTones() {
   const rules2 = {};
@@ -1403,8 +2410,8 @@ function buildSelectableTones() {
   }
   return rules2;
 }
-const avatarRules = {
-  avatar: {
+const primitive$l = {
+  ".avatar": {
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
     boxSizing: "border-box",
@@ -1440,23 +2447,16 @@ const avatarRules = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [`&.${color}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
+        [`&.${color2}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
         }
       }), {})
     }
   },
-  ...theme.AVATAR_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`avatar-${size}`, {
-      [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-      [varNames.avatar.size]: vars.avatar.sizes[size].size
-    })
-  }), {}),
-  "avatar-arrow": {
+  ".avatar-arrow": {
     position: "absolute",
     boxSizing: "border-box",
     zIndex: 0,
@@ -1491,7 +2491,7 @@ const avatarRules = {
       }
     }
   },
-  "avatar-image": {
+  ".avatar-image": {
     "@nest": {
       "& > img": {
         display: "block",
@@ -1513,11 +2513,11 @@ const avatarRules = {
       }
     }
   },
-  "avatar-initials": {
+  ".avatar-initials": {
     color: vars.color.avatar.fg,
     borderRadius: vars.avatar.size
   },
-  "avatar-counter": {
+  ".avatar-counter": {
     color: vars.color.fg,
     backgroundColor: vars.color.bg,
     boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(", "),
@@ -1533,28 +2533,41 @@ const avatarRules = {
       }
     }
   },
-  "avatar-stack": {
+  ".avatar-stack": {
     "@nest": {
       "& > div + div": {
         marginLeft: vars.avatar.distance
       }
     }
   }
-}, badgeToneRules = {};
+};
+for (const size of theme.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$l
+  }
+}, primitive$k = {
+  ".badge": {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    verticalAlign: "top"
+  }
+};
 for (const tone of theme.THEME_COLOR_STATE_TONES)
-  badgeToneRules[`badge-${tone}`] = {
-    "--color-bg": `var(--color-tinted-${tone}-bg-4)`,
-    "--color-fg": `var(--color-tinted-${tone}-fg-1)`
+  primitive$k[`.badge-${tone}`] = {
+    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
+    [varNames.color.fg]: vars.color.tinted[tone].fg[1]
   };
-const badgeRules = {
-  badge: {
-    backgroundColor: "var(--color-bg)",
-    color: "var(--color-fg)",
-    verticalAlign: "top"
-  },
-  ...badgeToneRules
-}, boxRules = {
-  box: {
+const badgeStyle = {
+  layers: {
+    primitive: primitive$k
+  }
+}, primitive$j = {
+  ".box": {
     minWidth: 0,
     minHeight: 0,
     "@nest": {
@@ -1562,19 +2575,23 @@ const badgeRules = {
         listStyle: "none"
       },
       "&.muted": {
-        backgroundColor: "var(--color-muted-bg)"
+        backgroundColor: vars.color.muted.bg
       }
     }
   },
   // sizing
-  "box-content": {
+  ".box-content": {
     boxSizing: "content-box"
   },
-  "box-border": {
+  ".box-border": {
     boxSizing: "border-box"
   }
+}, boxStyle = {
+  layers: {
+    primitive: primitive$j
+  }
 }, toneMap$1 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -1585,102 +2602,8 @@ const badgeRules = {
   default: "solid",
   ghost: "ghost",
   bleed: "tinted"
-}, buttonVariantRules = {};
-for (const mode of theme.THEME_COLOR_BUTTON_MODES)
-  for (const tone of theme.THEME_COLOR_STATE_TONES)
-    mode === "default" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      boxShadow: "none",
-      "--color-bg": `var(--color-solid-${tone}-bg-0)`,
-      "--color-border": `var(--color-solid-${tone}-border-1)`,
-      "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-      "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-solid-${tone}-bg-1)`,
-          "--color-border": `var(--color-solid-${tone}-border-2)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-solid-${tone}-bg-2)`,
-          "--color-border": `var(--color-solid-${tone}-border-3)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-solid-${tone}-bg-2)`,
-          "--color-border": `var(--color-solid-${tone}-border-3)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-1)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)",
-          "--color-muted-fg": "var(--color-tinted-default-border-1)"
-        }
-      }
-    }), mode === "bleed" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      boxShadow: "none",
-      "--color-bg": `var(--color-tinted-${tone}-bg-0)`,
-      "--color-border": `var(--color-tinted-${tone}-border-1)`,
-      "--color-fg": `var(--color-tinted-${tone}-fg-2)`,
-      "--color-muted-fg": `var(--color-tinted-${tone}-fg-4)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-1)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-3)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-3)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-0)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)",
-          "--color-muted-fg": "var(--color-tinted-default-border-1)"
-        }
-      }
-    }), mode === "ghost" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      "--color-bg": `var(--color-tinted-${tone}-bg-1)`,
-      "--color-border": `var(--color-tinted-${tone}-border-0)`,
-      "--color-fg": `var(--color-tinted-${tone}-fg-2)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-1)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-3)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-3)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-0)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)"
-        }
-      }
-    });
-const buttonRules = {
-  button: {
+}, primitive$i = {
+  ".button": {
     WebkitFontSmoothing: "inherit",
     appearance: "none",
     font: "inherit",
@@ -1695,9 +2618,9 @@ const buttonRules = {
     textAlign: "left",
     position: "relative",
     verticalAlign: "top",
-    backgroundColor: "var(--color-bg)",
-    color: "var(--color-fg)",
-    boxShadow: "inset 0 0 0 var(--button-border-width) var(--color-border)",
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    boxShadow: "var(--button-box-shadow)",
     "@nest": {
       "&::-moz-focus-inner": {
         border: 0,
@@ -1709,24 +2632,127 @@ const buttonRules = {
       },
       "&:focus:not(:focus-visible)": {
         outline: "none"
-      },
-      ...buttonVariantRules
+      }
     }
   },
-  "button-loading-box": {
+  ".button-loading-box": {
     position: "absolute",
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: "var(--color-bg)",
+    backgroundColor: vars.color.bg,
     borderRadius: "inherit",
     zIndex: 1,
     opacity: 0.8
   }
+};
+for (const tone of theme.THEME_COLOR_STATE_TONES) {
+  const solid = vars.color.solid[tone], tinted = vars.color.tinted[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.fg]: solid.fg[4],
+    "--button-box-shadow": "none",
+    "@nest": {
+      "&:not([data-disabled]):hover": {
+        [varNames.color.bg]: solid.bg[1],
+        [varNames.color.border]: solid.border[2],
+        [varNames.color.fg]: solid.fg[0],
+        [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.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.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.fg]: vars.color.default.tinted.fg[1]
+      }
+    }
+  }, primitive$i[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
+    [varNames.color.bg]: tinted.bg[1],
+    [varNames.color.border]: tinted.border[1],
+    [varNames.color.fg]: tinted.fg[2],
+    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
+    "@nest": {
+      "&:not([data-disabled]):hover": {
+        [varNames.color.bg]: tinted.bg[2],
+        [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[3],
+        [varNames.color.fg]: tinted.fg[1],
+        "--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[3],
+        [varNames.color.fg]: tinted.fg[1],
+        "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
+      },
+      "&[data-disabled]": {
+        [varNames.color.bg]: vars.color.default.tinted.bg[1],
+        [varNames.color.border]: vars.color.default.tinted.border[0],
+        [varNames.color.fg]: vars.color.default.tinted.fg[2]
+      }
+    }
+  }, 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.fg]: tinted.fg[4],
+    "--button-box-shadow": "none",
+    "@nest": {
+      "&:not([data-disabled]):hover": {
+        [varNames.color.bg]: tinted.bg[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.fg]: tinted.fg[1],
+        [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.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.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.fg]: vars.color.default.tinted.fg[1]
+      }
+    }
+  };
+}
+const buttonStyle = {
+  layers: {
+    primitive: primitive$i
+  }
 }, toneMap = {
-  transparent: "canvas",
-  default: "surface",
+  transparent: "transparent",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -1734,8 +2760,8 @@ const buttonRules = {
   caution: "caution",
   critical: "critical",
   inherit: void 0
-}, cardRules = {
-  card: {
+}, primitive$h = {
+  ".card": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
     [varNames.color.bg]: vars.color.tinted.default.bg[0],
@@ -1744,126 +2770,40 @@ const buttonRules = {
     [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
     "@nest": {
-      ...buildCardTonesRules(),
-      "&[data-checkered]": {
-        "--card-bg-image": "repeating-conic-gradient(var(--color-tinted-default-bg-0) 0% 25%, var(--color-tinted-default-bg-1) 0% 50%)",
-        backgroundSize: "var(--space-3) var(--space-3)",
-        backgroundPosition: "50% 50%",
-        backgroundImage: "var(--card-bg-image)"
-      },
-      "&:is(a)": {
-        outline: "none",
-        textDecoration: "none",
-        "@nest": {
-          "&:not(:disabled)": {
-            "@nest": {
-              "&:hover": {
-                "--color-bg": "var(--color-tinted-default-bg-1)",
-                "--color-fg": "var(--color-tinted-default-fg-0)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-2)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-3)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&:active, &[data-pressed]": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              //
-              "&[data-selectable]:focus, &[data-selected]": {
-                "--color-bg": "var(--color-solid-default-bg-1)",
-                "--color-fg": "var(--color-solid-default-fg-1)",
-                "--color-muted-bg": "var(--color-solid-default-bg-0)",
-                "--color-muted-fg": "var(--color-solid-default-fg-3)"
-                // '--color-icon': 'var(--color-solid-default-fg-1)',
-              }
-            }
-          }
-        }
-      },
       "&:is(button)": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         outline: "none",
         font: "inherit",
         textAlign: "inherit",
-        border: 0,
-        width: ["-moz-available", "-webkit-fill-available", "stretch"],
-        cursor: "default",
-        // todo
-        // --card-focus-ring-box-shadow: none;
-        // box-shadow: var(--card-focus-ring-box-shadow);
-        "@nest": {
-          "&:not(:disabled)": {
-            "@nest": {
-              "&:hover": {
-                "--color-bg": "var(--color-tinted-default-bg-1)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-2)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-3)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&:active": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&[data-pressed]": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              // &:focus,
-              "&[data-selectable]:focus, &[data-selected]": {
-                "--color-bg": "var(--color-solid-default-bg-2)",
-                "--color-border": "var(--color-solid-default-border-0)",
-                "--color-fg": "var(--color-solid-default-fg-1)",
-                "--color-muted-bg": "var(--color-solid-default-bg-3)",
-                "--color-muted-fg": "var(--color-solid-default-fg-4)"
-                // '--color-icon': 'var(--color-solid-default-fg-1)',
-              }
-            }
-          },
-          "&:disabled": {
-            "--color-bg": "var(--color-tinted-default-bg-0)",
-            "--color-fg": "var(--color-tinted-default-border-2)",
-            "--color-muted-bg": "var(--color-tinted-default-bg-1)",
-            "--color-muted-fg": "var(--color-tinted-default-border-1)"
-          }
-        }
+        border: "none",
+        // @ts-expect-error - TODO: fix
+        width: ["-moz-available", "-webkit-fill-available", "fill-available"]
+      },
+      "&:is(a)": {
+        outline: "none",
+        textDecoration: "none"
       },
       "&:is(pre)": {
-        font: "inherit"
+        font: "inherit",
+        whiteSpace: "inherit"
       }
-    },
-    ////////////////////////////////////////////////////////////////////////////////////////////////
-    // Legacy `--card` variables
-    ////////////////////////////////////////////////////////////////////////////////////////////////
-    //
-    // '--card-accent-fg-color': 'var(--color-accent-fg)',
-    // ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
-    //   return {
-    //     ...acc,
-    //     [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
-    //     [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`,
-    //   }
-    // }, {} as Properties),
-    // '--card-backdrop-color': 'var(--color-backdrop)',
-    // ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    //   return {
-    //     ...acc,
-    //     [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
-    //     [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
-    //     [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
-    //     [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`,
-    //   }
-    // }, {} as Properties),
+    }
+  }
+};
+for (const scheme of theme.THEME_COLOR_SCHEMES) {
+  const schemeProps = {
+    colorScheme: scheme
+  };
+  for (const tone of theme.THEME_COLOR_CARD_TONES) {
+    const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
+    _assignToneProps(schemeProps, _varNames, _vars);
+  }
+  primitive$h[`.card.${scheme}`] = schemeProps;
+}
+for (const tone of theme.THEME_COLOR_CARD_TONES) {
+  const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
+  _assignToneProps(toneProps, _varNames, _vars), Object.assign(toneProps, {
     "--card-bg-color": vars.color.bg,
     "--card-bg2-color": vars.color.muted.bg,
     "--card-border-color": vars.color.border,
@@ -1878,9 +2818,7 @@ const buttonRules = {
     "--card-link-color": vars.color.link.fg,
     "--card-link-fg-color": vars.color.link.fg,
     "--card-muted-bg-color": vars.color.muted.bg,
-    // 'var(--color-muted-bg)', // vars.color.tinted.default.bg[1],
     "--card-muted-fg-color": vars.color.muted.fg,
-    // vars.color.tinted.default.fg[4],
     "--card-shadow-outline-color": vars.color.shadow.outline,
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
@@ -1889,181 +2827,92 @@ const buttonRules = {
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
     "--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$h
   }
 };
-function buildCardTonesRules() {
-  const rules2 = {};
-  for (const scheme of ["light", "dark"]) {
-    const props = {
-      colorScheme: scheme
-    };
-    for (const cardTone of theme.THEME_COLOR_CARD_TONES) {
-      const source = vars.color[scheme][cardTone], target = varNames.color[cardTone];
-      Object.assign(props, {
-        ...buildCardAvatarColorProperties({
-          source,
-          target
-        }),
-        [target.backdrop]: source.backdrop,
-        [target.focusRing]: source.focusRing,
-        [target.link.fg]: source.link.fg,
-        [target.shadow.outline]: source.shadow.outline,
-        [target.shadow.umbra]: source.shadow.umbra,
-        [target.shadow.penumbra]: source.shadow.penumbra,
-        [target.shadow.ambient]: source.shadow.ambient,
-        [target.token.atrule]: source.token.atrule,
-        [target.token.attrName]: source.token.attrName,
-        [target.token.attrValue]: source.token.attrValue,
-        [target.token.attribute]: source.token.attribute,
-        [target.token.boolean]: source.token.boolean,
-        [target.token.builtin]: source.token.builtin,
-        [target.token.cdata]: source.token.cdata,
-        [target.token.char]: source.token.char,
-        [target.token.class]: source.token.class,
-        [target.token.className]: source.token.className,
-        [target.token.comment]: source.token.comment,
-        [target.token.constant]: source.token.constant,
-        [target.token.deleted]: source.token.deleted,
-        [target.token.doctype]: source.token.doctype,
-        [target.token.entity]: source.token.entity,
-        [target.token.function]: source.token.function,
-        [target.token.hexcode]: source.token.hexcode,
-        [target.token.id]: source.token.id,
-        [target.token.important]: source.token.important,
-        [target.token.inserted]: source.token.inserted,
-        [target.token.keyword]: source.token.keyword,
-        [target.token.number]: source.token.number,
-        [target.token.operator]: source.token.operator,
-        [target.token.prolog]: source.token.prolog,
-        [target.token.property]: source.token.property,
-        [target.token.pseudoClass]: source.token.pseudoClass,
-        [target.token.pseudoElement]: source.token.pseudoElement,
-        [target.token.punctuation]: source.token.punctuation,
-        [target.token.regex]: source.token.regex,
-        [target.token.selector]: source.token.selector,
-        [target.token.string]: source.token.string,
-        [target.token.symbol]: source.token.symbol,
-        [target.token.tag]: source.token.tag,
-        [target.token.unit]: source.token.unit,
-        [target.token.url]: source.token.url,
-        [target.token.variable]: source.token.variable,
-        ...buildCardColorVariantProperties({
-          source: source.solid,
-          target: target.solid
-        }),
-        ...buildCardColorVariantProperties({
-          source: source.tinted,
-          target: target.tinted
-        })
+function _assignToneProps(toneProps, _varNames, _vars) {
+  Object.assign(toneProps, {
+    [_varNames.accent.fg]: _vars.accent.fg
+  });
+  for (const hue of theme.THEME_COLOR_AVATAR_COLORS)
+    toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
+  Object.assign(toneProps, {
+    [_varNames.backdrop]: _vars.backdrop,
+    [_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.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) {
+      const __varNames = _varNames[variant][elementTone], __vars = _vars[variant][elementTone];
+      Object.assign(toneProps, {
+        [__varNames.bg[0]]: __vars.bg[0],
+        [__varNames.bg[1]]: __vars.bg[1],
+        [__varNames.bg[2]]: __vars.bg[2],
+        [__varNames.bg[3]]: __vars.bg[3],
+        [__varNames.bg[4]]: __vars.bg[4],
+        [__varNames.border[0]]: __vars.border[0],
+        [__varNames.border[1]]: __vars.border[1],
+        [__varNames.border[2]]: __vars.border[2],
+        [__varNames.border[3]]: __vars.border[3],
+        [__varNames.border[4]]: __vars.border[4],
+        [__varNames.fg[0]]: __vars.fg[0],
+        [__varNames.fg[1]]: __vars.fg[1],
+        [__varNames.fg[2]]: __vars.fg[2],
+        [__varNames.fg[3]]: __vars.fg[3],
+        [__varNames.fg[4]]: __vars.fg[4]
       });
     }
-    rules2[`&.${scheme}`] = props;
-  }
-  for (const cardTone of theme.THEME_COLOR_CARD_TONES) {
-    const source = vars.color[cardTone], target = varNames.color;
-    rules2[`&.${toneMap[cardTone]}`] = {
-      ...buildCardAvatarColorProperties({
-        source,
-        target
-      }),
-      [target.backdrop]: source.backdrop,
-      [target.focusRing]: source.focusRing,
-      [target.link.fg]: source.link.fg,
-      [target.shadow.outline]: source.shadow.outline,
-      [target.shadow.umbra]: source.shadow.umbra,
-      [target.shadow.penumbra]: source.shadow.penumbra,
-      [target.shadow.ambient]: source.shadow.ambient,
-      [target.token.atrule]: source.token.atrule,
-      [target.token.attrName]: source.token.attrName,
-      [target.token.attrValue]: source.token.attrValue,
-      [target.token.attribute]: source.token.attribute,
-      [target.token.boolean]: source.token.boolean,
-      [target.token.builtin]: source.token.builtin,
-      [target.token.cdata]: source.token.cdata,
-      [target.token.char]: source.token.char,
-      [target.token.class]: source.token.class,
-      [target.token.className]: source.token.className,
-      [target.token.comment]: source.token.comment,
-      [target.token.constant]: source.token.constant,
-      [target.token.deleted]: source.token.deleted,
-      [target.token.doctype]: source.token.doctype,
-      [target.token.entity]: source.token.entity,
-      [target.token.function]: source.token.function,
-      [target.token.hexcode]: source.token.hexcode,
-      [target.token.id]: source.token.id,
-      [target.token.important]: source.token.important,
-      [target.token.inserted]: source.token.inserted,
-      [target.token.keyword]: source.token.keyword,
-      [target.token.number]: source.token.number,
-      [target.token.operator]: source.token.operator,
-      [target.token.prolog]: source.token.prolog,
-      [target.token.property]: source.token.property,
-      [target.token.pseudoClass]: source.token.pseudoClass,
-      [target.token.pseudoElement]: source.token.pseudoElement,
-      [target.token.punctuation]: source.token.punctuation,
-      [target.token.regex]: source.token.regex,
-      [target.token.selector]: source.token.selector,
-      [target.token.string]: source.token.string,
-      [target.token.symbol]: source.token.symbol,
-      [target.token.tag]: source.token.tag,
-      [target.token.unit]: source.token.unit,
-      [target.token.url]: source.token.url,
-      [target.token.variable]: source.token.variable,
-      ...buildCardColorVariantProperties({
-        source: source.solid,
-        target: target.solid
-      }),
-      ...buildCardColorVariantProperties({
-        source: source.tinted,
-        target: target.tinted
-      })
-    };
-  }
-  return rules2;
-}
-function buildCardAvatarColorProperties(options) {
-  const {
-    source,
-    target
-  } = options, props = {};
-  for (const hue of theme.HUES)
-    Object.assign(props, {
-      [target.avatar[hue].bg]: source.avatar[hue].bg,
-      [target.avatar[hue].fg]: source.avatar[hue].fg
-    });
-  return props;
-}
-function buildCardColorVariantProperties(options) {
-  const {
-    source,
-    target
-  } = options, props = {};
-  for (const elementTone of theme.THEME_COLOR_STATE_TONES)
-    Object.assign(props, {
-      [target[elementTone].bg[0]]: source[elementTone].bg[0],
-      [target[elementTone].bg[1]]: source[elementTone].bg[1],
-      [target[elementTone].bg[2]]: source[elementTone].bg[2],
-      [target[elementTone].bg[3]]: source[elementTone].bg[3],
-      [target[elementTone].bg[4]]: source[elementTone].bg[4],
-      [target[elementTone].border[0]]: source[elementTone].border[0],
-      [target[elementTone].border[1]]: source[elementTone].border[1],
-      [target[elementTone].border[2]]: source[elementTone].border[2],
-      [target[elementTone].border[3]]: source[elementTone].border[3],
-      [target[elementTone].border[4]]: source[elementTone].border[4],
-      [target[elementTone].fg[0]]: source[elementTone].fg[0],
-      [target[elementTone].fg[1]]: source[elementTone].fg[1],
-      [target[elementTone].fg[2]]: source[elementTone].fg[2],
-      [target[elementTone].fg[3]]: source[elementTone].fg[3],
-      [target[elementTone].fg[4]]: source[elementTone].fg[4]
-    });
-  return props;
 }
-const checkboxRules = {
-  checkbox: {
+const primitive$g = {
+  ".checkbox": {
     position: "relative",
     display: "inline-block"
   },
-  "checkbox-input": {
+  ".checkbox-input": {
     position: "absolute",
     top: 0,
     left: 0,
@@ -2186,8 +3035,12 @@ const checkboxRules = {
       }
     }
   }
-}, codeRules = {
-  code: {
+}, checkboxStyle = {
+  layers: {
+    primitive: primitive$g
+  }
+}, primitive$f = {
+  ".code": {
     "--font-weight-regular": "var(--font-code-weight-regular)",
     "--font-weight-medium": "var(--font-code-weight-medium)",
     "--font-weight-semibold": "var(--font-code-weight-semibold)",
@@ -2219,59 +3072,33 @@ const checkboxRules = {
         verticalAlign: "baseline"
       }
     }
-  },
-  ...responsiveRules("code-0", {
-    "--font-size": "var(--font-code-0-size)",
-    "--font-line-height": "var(--font-code-0-line-height)",
-    "--font-letter-spacing": "var(--font-code-0-letter-spacing)",
-    "--font-icon-size": "var(--font-code-0-icon-size)",
-    "--font-ascender-height": "var(--font-code-0-ascender-height)",
-    "--font-descender-height": "var(--font-code-0-descender-height)"
-    // '--font-cap-height': 'var(--font-code-0-cap-height)',
-  }),
-  ...responsiveRules("code-1", {
-    "--font-size": "var(--font-code-1-size)",
-    "--font-line-height": "var(--font-code-1-line-height)",
-    "--font-letter-spacing": "var(--font-code-1-letter-spacing)",
-    "--font-icon-size": "var(--font-code-1-icon-size)",
-    "--font-ascender-height": "var(--font-code-1-ascender-height)",
-    "--font-descender-height": "var(--font-code-1-descender-height)"
-    // '--font-cap-height': 'var(--font-code-1-cap-height)',
-  }),
-  ...responsiveRules("code-2", {
-    "--font-size": "var(--font-code-2-size)",
-    "--font-line-height": "var(--font-code-2-line-height)",
-    "--font-letter-spacing": "var(--font-code-2-letter-spacing)",
-    "--font-icon-size": "var(--font-code-2-icon-size)",
-    "--font-ascender-height": "var(--font-code-2-ascender-height)",
-    "--font-descender-height": "var(--font-code-2-descender-height)"
-    // '--font-cap-height': 'var(--font-code-2-cap-height)',
-  }),
-  ...responsiveRules("code-3", {
-    "--font-size": "var(--font-code-3-size)",
-    "--font-line-height": "var(--font-code-3-line-height)",
-    "--font-letter-spacing": "var(--font-code-3-letter-spacing)",
-    "--font-icon-size": "var(--font-code-3-icon-size)",
-    "--font-ascender-height": "var(--font-code-3-ascender-height)",
-    "--font-descender-height": "var(--font-code-3-descender-height)"
-    // '--font-cap-height': 'var(--font-code-3-cap-height)',
-  }),
-  ...responsiveRules("code-4", {
-    "--font-size": "var(--font-code-4-size)",
-    "--font-line-height": "var(--font-code-4-line-height)",
-    "--font-letter-spacing": "var(--font-code-4-letter-spacing)",
-    "--font-icon-size": "var(--font-code-4-icon-size)",
-    "--font-ascender-height": "var(--font-code-4-ascender-height)",
-    "--font-descender-height": "var(--font-code-4-descender-height)"
-    // '--font-cap-height': 'var(--font-code-4-cap-height)',
-  })
-}, containerRules = {
-  container: {
+  }
+};
+for (const size of theme.FONT_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)`,
+    "--font-icon-size": `var(--font-code-${size}-icon-size)`,
+    "--font-ascender-height": `var(--font-code-${size}-ascender-height)`,
+    "--font-descender-height": `var(--font-code-${size}-descender-height)`
+    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
+  });
+const codeStyle = {
+  layers: {
+    primitive: primitive$f
+  }
+}, primitive$e = {
+  ".container": {
     margin: "0 auto",
     width: "100%"
   }
-}, headingRules = {
-  heading: {
+}, containerStyle = {
+  layers: {
+    primitive: primitive$e
+  }
+}, primitive$d = {
+  ".heading": {
     "--font-weight-regular": "var(--font-heading-weight-regular)",
     "--font-weight-medium": "var(--font-heading-weight-medium)",
     "--font-weight-semibold": "var(--font-heading-weight-semibold)",
@@ -2286,68 +3113,29 @@ const checkboxRules = {
       }
     }
   },
-  // 'heading-accent': {
+  // '.heading-accent': {
   //   '--color-fg': 'var(--color-accent-fg)',
   // },
-  "heading-muted": {
+  ".heading-muted": {
     "--color-fg": "var(--color-tinted-default-fg-4)"
-  },
-  ...responsiveRules("heading-0", {
-    "--font-size": "var(--font-heading-0-size)",
-    "--font-line-height": "var(--font-heading-0-line-height)",
-    "--font-letter-spacing": "var(--font-heading-0-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-0-icon-size)",
-    "--font-ascender-height": "var(--font-heading-0-ascender-height)",
-    "--font-descender-height": "var(--font-heading-0-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-0-cap-height)',
-  }),
-  ...responsiveRules("heading-1", {
-    "--font-size": "var(--font-heading-1-size)",
-    "--font-line-height": "var(--font-heading-1-line-height)",
-    "--font-letter-spacing": "var(--font-heading-1-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-1-icon-size)",
-    "--font-ascender-height": "var(--font-heading-1-ascender-height)",
-    "--font-descender-height": "var(--font-heading-1-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-1-cap-height)',
-  }),
-  ...responsiveRules("heading-2", {
-    "--font-size": "var(--font-heading-2-size)",
-    "--font-line-height": "var(--font-heading-2-line-height)",
-    "--font-letter-spacing": "var(--font-heading-2-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-2-icon-size)",
-    "--font-ascender-height": "var(--font-heading-2-ascender-height)",
-    "--font-descender-height": "var(--font-heading-2-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-2-cap-height)',
-  }),
-  ...responsiveRules("heading-3", {
-    "--font-size": "var(--font-heading-3-size)",
-    "--font-line-height": "var(--font-heading-3-line-height)",
-    "--font-letter-spacing": "var(--font-heading-3-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-3-icon-size)",
-    "--font-ascender-height": "var(--font-heading-3-ascender-height)",
-    "--font-descender-height": "var(--font-heading-3-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-3-cap-height)',
-  }),
-  ...responsiveRules("heading-4", {
-    "--font-size": "var(--font-heading-4-size)",
-    "--font-line-height": "var(--font-heading-4-line-height)",
-    "--font-letter-spacing": "var(--font-heading-4-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-4-icon-size)",
-    "--font-ascender-height": "var(--font-heading-4-ascender-height)",
-    "--font-descender-height": "var(--font-heading-4-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-4-cap-height)',
-  }),
-  ...responsiveRules("heading-5", {
-    "--font-size": "var(--font-heading-5-size)",
-    "--font-line-height": "var(--font-heading-5-line-height)",
-    "--font-letter-spacing": "var(--font-heading-5-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-5-icon-size)",
-    "--font-ascender-height": "var(--font-heading-5-ascender-height)",
-    "--font-descender-height": "var(--font-heading-5-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-5-cap-height)',
-  })
-}, kbdRules = {
-  kbd: {
+  }
+};
+for (const size of theme.FONT_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)`,
+    "--font-icon-size": `var(--font-heading-${size}-icon-size)`,
+    "--font-ascender-height": `var(--font-heading-${size}-ascender-height)`,
+    "--font-descender-height": `var(--font-heading-${size}-descender-height)`
+    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
+  });
+const headingStyle = {
+  layers: {
+    primitive: 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)',
@@ -2361,8 +3149,12 @@ const checkboxRules = {
       }
     }
   }
-}, labelRules = {
-  label: {
+}, kbdStyle = {
+  layers: {
+    primitive: primitive$c
+  }
+}, primitive$b = {
+  ".label": {
     "--font-weight-regular": "var(--font-label-weight-regular)",
     "--font-weight-medium": "var(--font-label-weight-medium)",
     "--font-weight-semibold": "var(--font-label-weight-semibold)",
@@ -2378,70 +3170,33 @@ const checkboxRules = {
       }
     }
   },
-  "label-accent": {
+  ".label-accent": {
     "--color-fg": "var(--color-accent-fg)"
   },
-  "label-muted": {
+  ".label-muted": {
     "--color-fg": "var(--color-muted-fg)"
-  },
-  ...responsiveRules("label-0", {
-    "--font-size": "var(--font-label-0-size)",
-    "--font-line-height": "var(--font-label-0-line-height)",
-    "--font-letter-spacing": "var(--font-label-0-letter-spacing)",
-    "--font-icon-size": "var(--font-label-0-icon-size)",
-    "--font-ascender-height": "var(--font-label-0-ascender-height)",
-    "--font-descender-height": "var(--font-label-0-descender-height)"
-    // '--font-cap-height': 'var(--font-label-0-cap-height)',
-  }),
-  ...responsiveRules("label-1", {
-    "--font-size": "var(--font-label-1-size)",
-    "--font-line-height": "var(--font-label-1-line-height)",
-    "--font-letter-spacing": "var(--font-label-1-letter-spacing)",
-    "--font-icon-size": "var(--font-label-1-icon-size)",
-    "--font-ascender-height": "var(--font-label-1-ascender-height)",
-    "--font-descender-height": "var(--font-label-1-descender-height)"
-    // '--font-cap-height': 'var(--font-label-1-cap-height)',
-  }),
-  ...responsiveRules("label-2", {
-    "--font-size": "var(--font-label-2-size)",
-    "--font-line-height": "var(--font-label-2-line-height)",
-    "--font-letter-spacing": "var(--font-label-2-letter-spacing)",
-    "--font-icon-size": "var(--font-label-2-icon-size)",
-    "--font-ascender-height": "var(--font-label-2-ascender-height)",
-    "--font-descender-height": "var(--font-label-2-descender-height)"
-    // '--font-cap-height': 'var(--font-label-2-cap-height)',
-  }),
-  ...responsiveRules("label-3", {
-    "--font-size": "var(--font-label-3-size)",
-    "--font-line-height": "var(--font-label-3-line-height)",
-    "--font-letter-spacing": "var(--font-label-3-letter-spacing)",
-    "--font-icon-size": "var(--font-label-3-icon-size)",
-    "--font-ascender-height": "var(--font-label-3-ascender-height)",
-    "--font-descender-height": "var(--font-label-3-descender-height)"
-    // '--font-cap-height': 'var(--font-label-3-cap-height)',
-  }),
-  ...responsiveRules("label-4", {
-    "--font-size": "var(--font-label-4-size)",
-    "--font-line-height": "var(--font-label-4-line-height)",
-    "--font-letter-spacing": "var(--font-label-4-letter-spacing)",
-    "--font-icon-size": "var(--font-label-4-icon-size)",
-    "--font-ascender-height": "var(--font-label-4-ascender-height)",
-    "--font-descender-height": "var(--font-label-4-descender-height)"
-    // '--font-cap-height': 'var(--font-label-4-cap-height)',
-  }),
-  ...responsiveRules("label-5", {
-    "--font-size": "var(--font-label-5-size)",
-    "--font-line-height": "var(--font-label-5-line-height)",
-    "--font-letter-spacing": "var(--font-label-5-letter-spacing)",
-    "--font-icon-size": "var(--font-label-5-icon-size)",
-    "--font-ascender-height": "var(--font-label-5-ascender-height)",
-    "--font-descender-height": "var(--font-label-5-descender-height)"
-    // '--font-cap-height': 'var(--font-label-5-cap-height)',
-  })
-}, popoverRules = {
-  //
-}, radioRules = {
-  radio: {
+  }
+};
+for (const size of theme.FONT_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)`,
+    "--font-icon-size": `var(--font-label-${size}-icon-size)`,
+    "--font-ascender-height": `var(--font-label-${size}-ascender-height)`,
+    "--font-descender-height": `var(--font-label-${size}-descender-height)`
+    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
+  });
+const labelStyle = {
+  layers: {
+    primitive: primitive$b
+  }
+}, primitive$a = {}, popoverStyle = {
+  layers: {
+    primitive: primitive$a
+  }
+}, primitive$9 = {
+  ".radio": {
     position: "relative",
     "@nest": {
       "&:not([hidden])": {
@@ -2544,15 +3299,19 @@ const checkboxRules = {
       // `
     }
   }
-}, selectRules = {
-  select: {
+}, radioStyle = {
+  layers: {
+    primitive: primitive$9
+  }
+}, primitive$8 = {
+  ".select": {
     "@nest": {
       "& > select:disabled": {
         opacity: 1
       }
     }
   },
-  "select-presentation": {
+  ".select-presentation": {
     "@nest": {
       "& > span": {
         // place icon to the right
@@ -2562,24 +3321,32 @@ const checkboxRules = {
       }
     }
   }
-}, spinnerRules = {
-  spinner: {},
-  "animated-spinner-icon": {
-    animation: "spinner-rotate 500ms linear infinite",
-    "@keyframes": {
-      "spinner-rotate": {
-        from: {
-          transform: "rotate(0deg)"
-        },
-        to: {
-          transform: "rotate(360deg)"
-        }
-      }
+}, selectStyle = {
+  layers: {
+    primitive: primitive$8
+  }
+}, keyframes = {
+  "spinner-rotate": {
+    from: {
+      transform: "rotate(0deg)"
+    },
+    to: {
+      transform: "rotate(360deg)"
     }
   }
-}, switchRules = {
-  switch: {},
-  "switch-element": {
+}, primitive$7 = {
+  ".spinner": {},
+  ".animated-spinner-icon": {
+    animation: "spinner-rotate 500ms linear infinite"
+  }
+}, spinnerStyle = {
+  keyframes,
+  layers: {
+    primitive: primitive$7
+  }
+}, primitive$6 = {
+  ".switch": {},
+  ".switch-element": {
     position: "absolute",
     top: 0,
     right: 0,
@@ -2594,7 +3361,7 @@ const checkboxRules = {
     /* Place the input element above the representation element */
     zIndex: 1
   },
-  "switch-presentation": {
+  ".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)",
@@ -2665,7 +3432,7 @@ const checkboxRules = {
     //   }
     // }
   },
-  "switch-track": {
+  ".switch-track": {
     display: "block",
     backgroundColor: "var(--switch-bg-color)",
     position: "absolute",
@@ -2677,7 +3444,7 @@ const checkboxRules = {
     // 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": {
     // '--switch-thumb-offset': '0',
     display: "block",
     position: "absolute",
@@ -2725,8 +3492,12 @@ const checkboxRules = {
     //   `}
     // `
   }
-}, textRules = {
-  text: {
+}, switchStyle = {
+  layers: {
+    primitive: primitive$6
+  }
+}, primitive$5 = {
+  ".text": {
     "--font-weight-regular": "var(--font-text-weight-regular)",
     "--font-weight-medium": "var(--font-text-weight-medium)",
     "--font-weight-semibold": "var(--font-text-weight-semibold)",
@@ -2750,61 +3521,35 @@ const checkboxRules = {
   // 'text-accent': {
   //   '--color-fg': 'var(--color-accent-fg)',
   // },
-  "text-muted": {
+  ".text-muted": {
     color: "var(--color-muted-fg)"
     // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-  ...responsiveRules("text-0", {
-    "--font-size": "var(--font-text-0-size)",
-    "--font-line-height": "var(--font-text-0-line-height)",
-    "--font-letter-spacing": "var(--font-text-0-letter-spacing)",
-    "--font-icon-size": "var(--font-text-0-icon-size)",
-    "--font-ascender-height": "var(--font-text-0-ascender-height)",
-    "--font-descender-height": "var(--font-text-0-descender-height)"
-    // '--font-cap-height': 'var(--font-text-0-cap-height)',
-  }),
-  ...responsiveRules("text-1", {
-    "--font-size": "var(--font-text-1-size)",
-    "--font-line-height": "var(--font-text-1-line-height)",
-    "--font-letter-spacing": "var(--font-text-1-letter-spacing)",
-    "--font-icon-size": "var(--font-text-1-icon-size)",
-    "--font-ascender-height": "var(--font-text-1-ascender-height)",
-    "--font-descender-height": "var(--font-text-1-descender-height)"
-    // '--font-cap-height': 'var(--font-text-1-cap-height)',
-  }),
-  ...responsiveRules("text-2", {
-    "--font-size": "var(--font-text-2-size)",
-    "--font-line-height": "var(--font-text-2-line-height)",
-    "--font-letter-spacing": "var(--font-text-2-letter-spacing)",
-    "--font-icon-size": "var(--font-text-2-icon-size)",
-    "--font-ascender-height": "var(--font-text-2-ascender-height)",
-    "--font-descender-height": "var(--font-text-2-descender-height)"
-    // '--font-cap-height': 'var(--font-text-2-cap-height)',
-  }),
-  ...responsiveRules("text-3", {
-    "--font-size": "var(--font-text-3-size)",
-    "--font-line-height": "var(--font-text-3-line-height)",
-    "--font-letter-spacing": "var(--font-text-3-letter-spacing)",
-    "--font-icon-size": "var(--font-text-3-icon-size)",
-    "--font-ascender-height": "var(--font-text-3-ascender-height)",
-    "--font-descender-height": "var(--font-text-3-descender-height)"
-    // '--font-cap-height': 'var(--font-text-3-cap-height)',
-  }),
-  ...responsiveRules("text-4", {
-    "--font-size": "var(--font-text-4-size)",
-    "--font-line-height": "var(--font-text-4-line-height)",
-    "--font-letter-spacing": "var(--font-text-4-letter-spacing)",
-    "--font-icon-size": "var(--font-text-4-icon-size)",
-    "--font-ascender-height": "var(--font-text-4-ascender-height)",
-    "--font-descender-height": "var(--font-text-4-descender-height)"
-    // '--font-cap-height': 'var(--font-text-4-cap-height)',
-  })
-}, textAreaRules = {
-  "text-area": {
-    //
   }
-}, textInputRules = {
-  "text-input": {
+};
+for (const size of theme.FONT_TEXT_SIZE)
+  _responsiveRule(primitive$5, `text-${size}`, {
+    "--font-size": `var(--font-text-${size}-size)`,
+    "--font-line-height": `var(--font-text-${size}-line-height)`,
+    "--font-letter-spacing": `var(--font-text-${size}-letter-spacing)`,
+    "--font-icon-size": `var(--font-text-${size}-icon-size)`,
+    "--font-ascender-height": `var(--font-text-${size}-ascender-height)`,
+    "--font-descender-height": `var(--font-text-${size}-descender-height)`
+    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
+  });
+const textStyle = {
+  layers: {
+    primitive: primitive$5
+  }
+}, primitive$4 = {
+  ".text-area": {
+    // todo
+  }
+}, textAreaStyle = {
+  layers: {
+    primitive: primitive$4
+  }
+}, primitive$3 = {
+  ".text-input": {
     "--font-family": vars.font.text.family,
     "@nest": {
       "& > span": {
@@ -2812,7 +3557,7 @@ const checkboxRules = {
       }
     }
   },
-  "text-input-prefix": {
+  ".text-input-prefix": {
     borderTop: "1px solid var(--color-border)",
     borderLeft: "1px solid var(--color-border)",
     borderBottom: "1px solid var(--color-border)",
@@ -2825,7 +3570,7 @@ const checkboxRules = {
       }
     }
   },
-  "text-input-suffix": {
+  ".text-input-suffix": {
     borderTop: "1px solid var(--color-border)",
     borderRight: "1px solid var(--color-border)",
     borderBottom: "1px solid var(--color-border)",
@@ -2838,7 +3583,7 @@ const checkboxRules = {
       }
     }
   },
-  "text-input-presentation": {
+  ".text-input-presentation": {
     // position: 'absolute',
     // top: 0,
     // left: 0,
@@ -2958,8 +3703,13 @@ const checkboxRules = {
     //   }
     // }
   }
-}, tokenRules = {
-  token: {
+}, textInputStyle = {
+  layers: {
+    primitive: primitive$3
+  }
+}, primitive$2 = {
+  ".token": {
+    _prefix: !1,
     "@nest": {
       "&.atrule": {
         color: "var(--color-token-atrule)"
@@ -3074,11 +3824,15 @@ const checkboxRules = {
       }
     }
   }
-}, tooltipRules = {
-  tooltip: {
+}, tokenStyle = {
+  layers: {
+    primitive: primitive$2
+  }
+}, primitive$1 = {
+  ".tooltip": {
     pointerEvents: "none"
   },
-  "tooltip-card": {
+  ".tooltip-card": {
     willChange: "transform",
     "@nest": {
       "&[data-animate] > *": {
@@ -3088,948 +3842,209 @@ const checkboxRules = {
       }
     }
   }
-}, borderRules = {
-  ...responsiveRules("border", {
-    border: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-t", {
-    borderTop: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-r", {
-    borderRight: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-b", {
-    borderBottom: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-l", {
-    borderLeft: "1px solid var(--card-border-color)"
-  })
-}, displayRules = {
-  ...responsiveRules("block", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "block"
-      }
-    }
-  }),
-  ...responsiveRules("inline-block", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-block"
-      }
-    }
-  }),
-  ...responsiveRules("flex", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "flex"
-      }
-    }
-  }),
-  ...responsiveRules("inline-flex", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-flex"
-      }
+}, tooltipStyle = {
+  layers: {
+    primitive: primitive$1
+  }
+}, primitive = {
+  ".sr-only": {
+    display: "block",
+    width: 0,
+    height: 0,
+    position: "absolute",
+    // @ts-expect-error - TODO: fix this
+    overflow: ["hidden", "clip"]
+  }
+}, srOnlyStyle = {
+  layers: {
+    primitive
+  }
+}, systemStyle = _mergeStyles([
+  // NOTE: order matters in CSS
+  {
+    // define order of layers
+    layers: {
+      theme: {},
+      base: {},
+      util: {},
+      primitive: {}
     }
-  }),
-  ...responsiveRules("grid", {
-    gridTemplateRows: "auto",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "grid"
-      }
+  },
+  // aspects
+  borderStyle,
+  displayStyle,
+  flexStyle,
+  flexAlignStyle,
+  flexDirectionStyle,
+  flexJustifyStyle,
+  flexWrapStyle,
+  fontStyle,
+  gapStyle,
+  gridAutoColumnsStyle,
+  gridAutoFlowStyle,
+  gridAutoRowsStyle,
+  gridColumnsStyle,
+  gridRowsStyle,
+  gridColumnStyle,
+  gridColumnStartStyle,
+  gridColumnEndStyle,
+  gridRowStyle,
+  gridRowStartStyle,
+  gridRowEndStyle,
+  heightStyle,
+  insetStyle,
+  marginStyle,
+  maxWidthStyle,
+  outlineStyle,
+  overflowStyle,
+  paddingStyle,
+  pointerEventsStyle,
+  positionStyle,
+  radiusStyle,
+  shadowStyle,
+  textOverflowStyle,
+  widthStyle,
+  // utils
+  srOnlyStyle,
+  // primitives
+  _arrowStyle,
+  _inputStyle,
+  _selectableStyle,
+  avatarStyle,
+  badgeStyle,
+  boxStyle,
+  buttonStyle,
+  cardStyle,
+  checkboxStyle,
+  codeStyle,
+  containerStyle,
+  headingStyle,
+  kbdStyle,
+  labelStyle,
+  maxWidthStyle,
+  popoverStyle,
+  radioStyle,
+  selectStyle,
+  spinnerStyle,
+  switchStyle,
+  textAreaStyle,
+  textInputStyle,
+  textOverflowStyle,
+  textStyle,
+  tokenStyle,
+  tooltipStyle,
+  // components
+  breadcrumbsStyle,
+  dialogStyle,
+  menuStyle,
+  skeletonStyle,
+  toastStyle,
+  treeStyle
+]);
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function rem(value) {
+  return value === 0 ? "0" : `${value / 16}rem`;
+}
+function px(value) {
+  return value === 0 ? "0" : `${value}px`;
+}
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
+}
+function compileStyle(style) {
+  let css = "";
+  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
+    for (const [name, value] of Object.entries(style.keyframes)) {
+      let keyframesCss = `@keyframes ${name} {
+`;
+      for (const [key, props] of Object.entries(value))
+        keyframesCss += `  ${key} {
+`, keyframesCss += compileProperties(props), keyframesCss += `}
+`;
+      keyframesCss += `
+}
+`, css += keyframesCss;
     }
-  }),
-  ...responsiveRules("inline-grid", {
-    gridTemplateRows: "auto",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-grid"
-      }
+  if (style.layers && Object.keys(style.layers).length > 0)
+    for (const [layerName, layerRules] of Object.entries(style.layers))
+      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
+`, css += compileStyleRules(layerRules), css += `}
+
+`);
+  return css;
+}
+function compileStyleRules(rules2) {
+  let css = "";
+  const mediaMap = /* @__PURE__ */ new Map();
+  for (const [selector, properties] of Object.entries(rules2))
+    if (properties) {
+      if (properties["@media"])
+        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
+          const arr = mediaMap.get(mediaQuery) ?? [];
+          arr.push({
+            selector,
+            props: mediaProps
+          }), mediaMap.set(mediaQuery, arr);
+        }
+      css += compileStyleRule(selector, properties);
     }
-  }),
-  ...responsiveRules("none", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "none"
-      }
+  for (const [mediaQuery, mediaRules] of mediaMap) {
+    css += `@media ${mediaQuery} {
+`;
+    for (const rule of mediaRules)
+      css += compileStyleRule(rule.selector, rule.props);
+    css += `}
+
+`;
+  }
+  return css;
+}
+function compileStyleRule(_selector, properties) {
+  let css = "";
+  const {
+    _prefix = !0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    "@media": _mediaProps,
+    "@nest": nestedProps,
+    ...restProperties
+  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
+  if (Object.entries(restProperties).length && (css += `${selector} {
+`, css += compileProperties(restProperties), css += `}
+
+`), nestedProps)
+    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
+      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
+      css += `${nestedSelector.replace("&", selector)} {
+`, css += compileProperties(nestedProperties), css += `}
+
+`;
     }
-  })
-}, flexRules = {
-  // direction
-  ...responsiveRules("row", {
-    flexDirection: "row"
-  }),
-  ...responsiveRules("column", {
-    flexDirection: "column"
-  }),
-  // align
-  ...responsiveRules("align-flex-start", {
-    alignItems: "flex-start"
-  }),
-  ...responsiveRules("align-flex-end", {
-    alignItems: "end"
-  }),
-  ...responsiveRules("align-center", {
-    alignItems: "center"
-  }),
-  ...responsiveRules("align-stretch", {
-    alignItems: "stretch"
-  }),
-  ...responsiveRules("align-baseline", {
-    alignItems: "baseline"
-  }),
-  // justify
-  ...responsiveRules("justify-flex-start", {
-    justifyContent: "flex-start"
-  }),
-  ...responsiveRules("justify-flex-end", {
-    justifyContent: "flex-end"
-  }),
-  ...responsiveRules("justify-center", {
-    justifyContent: "center"
-  }),
-  ...responsiveRules("justify-between", {
-    justifyContent: "space-between"
-  }),
-  ...responsiveRules("justify-around", {
-    justifyContent: "space-around"
-  }),
-  ...responsiveRules("justify-evenly", {
-    justifyContent: "space-evenly"
-  }),
-  // wrap
-  ...responsiveRules("wrap-nowrap", {
-    flexWrap: "nowrap"
-  }),
-  ...responsiveRules("wrap-wrap", {
-    flexWrap: "wrap"
-  }),
-  ...responsiveRules("wrap-reverse", {
-    flexWrap: "wrap-reverse"
-  })
-}, flexItemRules = {
-  ...responsiveRules("flex-none", {
-    flex: "none"
-  }),
-  ...responsiveRules("flex-auto", {
-    flex: "auto"
-  }),
-  ...responsiveRules("flex-1", {
-    flex: 1
-  }),
-  ...responsiveRules("flex-2", {
-    flex: 2
-  }),
-  ...responsiveRules("flex-3", {
-    flex: 3
-  }),
-  ...responsiveRules("flex-4", {
-    flex: 4
-  }),
-  ...responsiveRules("flex-5", {
-    flex: 5
-  })
-}, fontRules = {
-  font: {
-    // 'position': 'relative',
-    fontFamily: "var(--font-family)",
-    fontFeatureSettings: "var(--font-feature-settings)",
-    fontSize: "var(--font-size)",
-    lineHeight: "var(--font-line-height)",
-    letterSpacing: "var(--font-letter-spacing)",
-    fontWeight: "var(--font-weight)",
-    transform: "translateY(var(--font-descender-height))",
-    padding: "1px 0",
-    margin: "0",
-    "--font-icon-offset": "calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)",
-    "--font-weight": "var(--font-weight-regular)",
-    "@nest": {
-      "&:before": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
-      },
-      "&:after": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginBottom: "-1px"
-      },
-      "& svg": {
-        // Certain popular CSS libraries changes the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: "inline"
-      },
-      // todo
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
-      "& [data-sanity-icon]": {
-        fontSize: "var(--font-icon-size)",
-        margin: "var(--font-icon-offset)",
-        vectorEffect: "non-scaling-stroke"
-      }
-    }
-  },
-  "font-regular": {
-    "--font-weight": "var(--font-weight-regular)"
-  },
-  "font-medium": {
-    "--font-weight": "var(--font-weight-medium)"
-  },
-  "font-semibold": {
-    "--font-weight": "var(--font-weight-semibold)"
-  },
-  "font-bold": {
-    "--font-weight": "var(--font-weight-bold)"
-  },
-  // align
-  ...responsiveRules("text-align-initial", {
-    textAlign: "initial"
-  }),
-  ...responsiveRules("text-align-left", {
-    textAlign: "left"
-  }),
-  ...responsiveRules("text-align-center", {
-    textAlign: "center"
-  }),
-  ...responsiveRules("text-align-right", {
-    textAlign: "right"
-  }),
-  ...responsiveRules("text-align-justify", {
-    textAlign: "justify"
-  })
-}, gapRules = {
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`g-${space}`.replace(".", "_"), {
-      gap: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gx-${space}`.replace(".", "_"), {
-      columnGap: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gy-${space}`.replace(".", "_"), {
-      rowGap: vars.space[space]
-    })
-  }), {})
-}, gridRules = {
-  // autoCols
-  ...responsiveRules("auto-cols-auto", {
-    gridAutoColumns: "auto"
-  }),
-  ...responsiveRules("auto-cols-min", {
-    gridAutoColumns: "min"
-  }),
-  ...responsiveRules("auto-cols-max", {
-    gridAutoColumns: "max"
-  }),
-  ...responsiveRules("auto-cols-fr", {
-    gridAutoColumns: "fr"
-  }),
-  // autoFlow
-  ...responsiveRules("auto-flow-row", {
-    gridAutoFlow: "row"
-  }),
-  ...responsiveRules("auto-flow-column", {
-    gridAutoFlow: "column"
-  }),
-  ...responsiveRules("auto-flow-row-dense", {
-    gridAutoFlow: "row dense"
-  }),
-  ...responsiveRules("auto-flow-column-dense", {
-    gridAutoFlow: "column dense"
-  }),
-  // autoRows
-  ...responsiveRules("auto-rows-auto", {
-    gridAutoRows: "auto"
-  }),
-  ...responsiveRules("auto-rows-min", {
-    gridAutoRows: "min-content"
-  }),
-  ...responsiveRules("auto-rows-max", {
-    gridAutoRows: "max-content"
-  }),
-  ...responsiveRules("auto-rows-fr", {
-    gridAutoRows: "minmax(0, 1fr)"
-  }),
-  // columns
-  ...responsiveRules("columns-1", {
-    gridTemplateColumns: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("columns-2", {
-    gridTemplateColumns: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("columns-3", {
-    gridTemplateColumns: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("columns-4", {
-    gridTemplateColumns: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("columns-5", {
-    gridTemplateColumns: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("columns-6", {
-    gridTemplateColumns: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("columns-7", {
-    gridTemplateColumns: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("columns-8", {
-    gridTemplateColumns: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("columns-9", {
-    gridTemplateColumns: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("columns-10", {
-    gridTemplateColumns: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("columns-12", {
-    gridTemplateColumns: "repeat(12, 1fr)"
-  }),
-  // rows
-  ...responsiveRules("rows-1", {
-    gridTemplateRows: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("rows-2", {
-    gridTemplateRows: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("rows-3", {
-    gridTemplateRows: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("rows-4", {
-    gridTemplateRows: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("rows-5", {
-    gridTemplateRows: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("rows-6", {
-    gridTemplateRows: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("rows-7", {
-    gridTemplateRows: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("rows-8", {
-    gridTemplateRows: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("rows-9", {
-    gridTemplateRows: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("rows-10", {
-    gridTemplateRows: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("rows-12", {
-    gridTemplateRows: "repeat(12, 1fr)"
-  })
-}, gridItemRules = {
-  // column
-  ...responsiveRules("col-auto", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-full", {
-    gridColumn: "1 / -1"
-  }),
-  ...responsiveRules("col-1", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-2", {
-    gridColumn: "span 2 / span 2"
-  }),
-  ...responsiveRules("col-3", {
-    gridColumn: "span 3 / span 3"
-  }),
-  ...responsiveRules("col-4", {
-    gridColumn: "span 4 / span 4"
-  }),
-  ...responsiveRules("col-5", {
-    gridColumn: "span 5 / span 5"
-  }),
-  ...responsiveRules("col-6", {
-    gridColumn: "span 6 / span 6"
-  }),
-  ...responsiveRules("col-7", {
-    gridColumn: "span 7 / span 7"
-  }),
-  ...responsiveRules("col-8", {
-    gridColumn: "span 8 / span 8"
-  }),
-  ...responsiveRules("col-9", {
-    gridColumn: "span 9 / span 9"
-  }),
-  ...responsiveRules("col-10", {
-    gridColumn: "span 10 / span 10"
-  }),
-  ...responsiveRules("col-11", {
-    gridColumn: "span 11 / span 11"
-  }),
-  ...responsiveRules("col-12", {
-    gridColumn: "span 12 / span 12"
-  }),
-  // columnStart
-  ...responsiveRules("col-start-auto", {
-    gridColumnStart: "auto"
-  }),
-  ...responsiveRules("col-start-1", {
-    gridColumnStart: "1"
-  }),
-  ...responsiveRules("col-start-2", {
-    gridColumnStart: "2"
-  }),
-  ...responsiveRules("col-start-3", {
-    gridColumnStart: "3"
-  }),
-  ...responsiveRules("col-start-4", {
-    gridColumnStart: "4"
-  }),
-  ...responsiveRules("col-start-5", {
-    gridColumnStart: "5"
-  }),
-  ...responsiveRules("col-start-6", {
-    gridColumnStart: "6"
-  }),
-  ...responsiveRules("col-start-7", {
-    gridColumnStart: "7"
-  }),
-  ...responsiveRules("col-start-8", {
-    gridColumnStart: "8"
-  }),
-  ...responsiveRules("col-start-9", {
-    gridColumnStart: "9"
-  }),
-  ...responsiveRules("col-start-10", {
-    gridColumnStart: "10"
-  }),
-  ...responsiveRules("col-start-11", {
-    gridColumnStart: "11"
-  }),
-  ...responsiveRules("col-start-12", {
-    gridColumnStart: "12"
-  }),
-  // columnEnd
-  ...responsiveRules("col-end-auto", {
-    gridColumnEnd: "auto"
-  }),
-  ...responsiveRules("col-end-1", {
-    gridColumnEnd: "1"
-  }),
-  ...responsiveRules("col-end-2", {
-    gridColumnEnd: "2"
-  }),
-  ...responsiveRules("col-end-3", {
-    gridColumnEnd: "3"
-  }),
-  ...responsiveRules("col-end-4", {
-    gridColumnEnd: "4"
-  }),
-  ...responsiveRules("col-end-5", {
-    gridColumnEnd: "5"
-  }),
-  ...responsiveRules("col-end-6", {
-    gridColumnEnd: "6"
-  }),
-  ...responsiveRules("col-end-7", {
-    gridColumnEnd: "7"
-  }),
-  ...responsiveRules("col-end-8", {
-    gridColumnEnd: "8"
-  }),
-  ...responsiveRules("col-end-9", {
-    gridColumnEnd: "9"
-  }),
-  ...responsiveRules("col-end-10", {
-    gridColumnEnd: "10"
-  }),
-  ...responsiveRules("col-end-11", {
-    gridColumnEnd: "11"
-  }),
-  ...responsiveRules("col-end-12", {
-    gridColumnEnd: "12"
-  }),
-  // row
-  ...responsiveRules("row-auto", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-full", {
-    gridRow: "1 / -1"
-  }),
-  ...responsiveRules("row-1", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-2", {
-    gridRow: "span 2 / span 2"
-  }),
-  ...responsiveRules("row-3", {
-    gridRow: "span 3 / span 3"
-  }),
-  ...responsiveRules("row-4", {
-    gridRow: "span 4 / span 4"
-  }),
-  ...responsiveRules("row-5", {
-    gridRow: "span 5 / span 5"
-  }),
-  ...responsiveRules("row-6", {
-    gridRow: "span 6 / span 6"
-  }),
-  ...responsiveRules("row-7", {
-    gridRow: "span 7 / span 7"
-  }),
-  ...responsiveRules("row-8", {
-    gridRow: "span 8 / span 8"
-  }),
-  ...responsiveRules("row-9", {
-    gridRow: "span 9 / span 9"
-  }),
-  ...responsiveRules("row-10", {
-    gridRow: "span 10 / span 10"
-  }),
-  ...responsiveRules("row-11", {
-    gridRow: "span 11 / span 11"
-  }),
-  ...responsiveRules("row-12", {
-    gridRow: "span 12 / span 12"
-  }),
-  // rowStart
-  ...responsiveRules("row-start-auto", {
-    gridRowStart: "auto"
-  }),
-  ...responsiveRules("row-start-1", {
-    gridRowStart: "1"
-  }),
-  ...responsiveRules("row-start-2", {
-    gridRowStart: "2"
-  }),
-  ...responsiveRules("row-start-3", {
-    gridRowStart: "3"
-  }),
-  ...responsiveRules("row-start-4", {
-    gridRowStart: "4"
-  }),
-  ...responsiveRules("row-start-5", {
-    gridRowStart: "5"
-  }),
-  ...responsiveRules("row-start-6", {
-    gridRowStart: "6"
-  }),
-  ...responsiveRules("row-start-7", {
-    gridRowStart: "7"
-  }),
-  ...responsiveRules("row-start-8", {
-    gridRowStart: "8"
-  }),
-  ...responsiveRules("row-start-9", {
-    gridRowStart: "9"
-  }),
-  ...responsiveRules("row-start-10", {
-    gridRowStart: "10"
-  }),
-  ...responsiveRules("row-start-11", {
-    gridRowStart: "11"
-  }),
-  ...responsiveRules("row-start-12", {
-    gridRowStart: "12"
-  }),
-  // rowEnd
-  ...responsiveRules("row-end-auto", {
-    gridRowEnd: "auto"
-  }),
-  ...responsiveRules("row-end-1", {
-    gridRowEnd: "1"
-  }),
-  ...responsiveRules("row-end-2", {
-    gridRowEnd: "2"
-  }),
-  ...responsiveRules("row-end-3", {
-    gridRowEnd: "3"
-  }),
-  ...responsiveRules("row-end-4", {
-    gridRowEnd: "4"
-  }),
-  ...responsiveRules("row-end-5", {
-    gridRowEnd: "5"
-  }),
-  ...responsiveRules("row-end-6", {
-    gridRowEnd: "6"
-  }),
-  ...responsiveRules("row-end-7", {
-    gridRowEnd: "7"
-  }),
-  ...responsiveRules("row-end-8", {
-    gridRowEnd: "8"
-  }),
-  ...responsiveRules("row-end-9", {
-    gridRowEnd: "9"
-  }),
-  ...responsiveRules("row-end-10", {
-    gridRowEnd: "10"
-  }),
-  ...responsiveRules("row-end-11", {
-    gridRowEnd: "11"
-  }),
-  ...responsiveRules("row-end-12", {
-    gridRowEnd: "12"
-  })
-}, heightRules = {
-  ...responsiveRules("h-fill", {
-    height: "100%"
-  }),
-  ...responsiveRules("h-stretch", {
-    height: "stretch"
-  })
-}, insetRules = {
-  ...responsiveRules("inset-0", {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }),
-  ...responsiveRules("top-0", {
-    top: 0
-  }),
-  ...responsiveRules("right-0", {
-    right: 0
-  }),
-  ...responsiveRules("bottom-0", {
-    bottom: 0
-  }),
-  ...responsiveRules("left-0", {
-    left: 0
-  })
-}, marginRules = {
-  // NOTE: order matters
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`m-${space}`.replace(".", "_"), {
-      margin: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mx-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space],
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`my-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space],
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mt-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mr-${space}`.replace(".", "_"), {
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mb-${space}`.replace(".", "_"), {
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`ml-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space]
-    })
-  }), {})
-}, maxWidthRules = {
-  ...responsiveRules("max-w-0", {
-    maxWidth: "var(--container-0)"
-  }),
-  ...responsiveRules("max-w-1", {
-    maxWidth: "var(--container-1)"
-  }),
-  ...responsiveRules("max-w-2", {
-    maxWidth: "var(--container-2)"
-  }),
-  ...responsiveRules("max-w-3", {
-    maxWidth: "var(--container-3)"
-  }),
-  ...responsiveRules("max-w-4", {
-    maxWidth: "var(--container-4)"
-  }),
-  ...responsiveRules("max-w-5", {
-    maxWidth: "var(--container-5)"
-  }),
-  ...responsiveRules("max-w-auto", {
-    maxWidth: "none"
-  }),
-  ...responsiveRules("max-w-fill", {
-    maxWidth: "100%"
-  })
-}, outlineRules = {
-  "outline-none": {
-    outline: "none"
-  }
-}, overflowRules = {
-  ...responsiveRules("overflow-visible", {
-    overflow: "visible"
-  }),
-  ...responsiveRules("overflow-hidden", {
-    overflow: "hidden"
-  }),
-  ...responsiveRules("overflow-scroll", {
-    overflow: "scroll"
-  }),
-  ...responsiveRules("overflow-auto", {
-    overflow: "auto"
-  })
-}, paddingRules = {
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`p-${space}`.replace(".", "_"), {
-      padding: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`px-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space],
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`py-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space],
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pt-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pr-${space}`.replace(".", "_"), {
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pb-${space}`.replace(".", "_"), {
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pl-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space]
-    })
-  }), {})
-}, pointerEventsRules = {
-  "pointer-events-none": {
-    pointerEvents: "none"
-  },
-  "pointer-events-auto": {
-    pointerEvents: "auto"
-  }
-}, positionRules = {
-  ...responsiveRules("pos-absolute", {
-    position: "absolute"
-  }),
-  ...responsiveRules("pos-fixed", {
-    position: "fixed"
-  }),
-  ...responsiveRules("pos-relative", {
-    position: "relative"
-  }),
-  ...responsiveRules("pos-static", {
-    position: "static"
-  }),
-  ...responsiveRules("pos-sticky", {
-    position: "sticky"
-  })
-}, radiusRules = {
-  ...responsiveRules("r-0", {
-    borderRadius: "var(--radius-0)"
-  }),
-  ...responsiveRules("r-1", {
-    borderRadius: "var(--radius-1)"
-  }),
-  ...responsiveRules("r-2", {
-    borderRadius: "var(--radius-2)"
-  }),
-  ...responsiveRules("r-3", {
-    borderRadius: "var(--radius-3)"
-  }),
-  ...responsiveRules("r-4", {
-    borderRadius: "var(--radius-4)"
-  }),
-  ...responsiveRules("r-5", {
-    borderRadius: "var(--radius-5)"
-  }),
-  ...responsiveRules("r-6", {
-    borderRadius: "var(--radius-6)"
-  }),
-  ...responsiveRules("r-full", {
-    borderRadius: "9999px"
-  })
-}, shadowRules = {
-  ...responsiveRules("shadow-0", {
-    boxShadow: "none"
-  }),
-  ...responsiveRules("shadow-1", {
-    boxShadow: ["var(--shadow-outline) var(--color-shadow-outline)", "var(--shadow-1-umbra) var(--color-shadow-umbra)", "var(--shadow-1-penumbra) var(--color-shadow-penumbra)", "var(--shadow-1-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-2", {
-    boxShadow: ["var(--shadow-outline) var(--color-shadow-outline)", "var(--shadow-2-umbra) var(--color-shadow-umbra)", "var(--shadow-2-penumbra) var(--color-shadow-penumbra)", "var(--shadow-2-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-3", {
-    boxShadow: ["var(--shadow-outline) var(--color-shadow-outline)", "var(--shadow-3-umbra) var(--color-shadow-umbra)", "var(--shadow-3-penumbra) var(--color-shadow-penumbra)", "var(--shadow-3-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-4", {
-    boxShadow: ["var(--shadow-outline) var(--color-shadow-outline)", "var(--shadow-4-umbra) var(--color-shadow-umbra)", "var(--shadow-4-penumbra) var(--color-shadow-penumbra)", "var(--shadow-4-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-5", {
-    boxShadow: ["var(--shadow-outline) var(--color-shadow-outline)", "var(--shadow-5-umbra) var(--color-shadow-umbra)", "var(--shadow-5-penumbra) var(--color-shadow-penumbra)", "var(--shadow-5-ambient) var(--color-shadow-ambient)"].join(", ")
-  })
-}, textOverflowRules = {
-  "text-overflow-ellipsis": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    overflow: ["hidden", "clip"]
-  },
-  "text-overflow-clip": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "clip",
-    overflow: ["hidden", "clip"]
-  }
-}, widthRules = {
-  "w-fill": {
-    width: ["-moz-available", "-webkit-fill-available", "stretch"]
-  }
-}, srOnlyRules = {
-  "sr-only": {
-    display: "block",
-    width: 0,
-    height: 0,
-    position: "absolute",
-    overflow: ["hidden", "clip"]
-  }
-}, rules = {
-  // styles
-  ...borderRules,
-  ...displayRules,
-  ...flexItemRules,
-  ...flexRules,
-  ...fontRules,
-  ...gapRules,
-  ...gridItemRules,
-  ...gridRules,
-  ...heightRules,
-  ...insetRules,
-  ...marginRules,
-  ...outlineRules,
-  ...overflowRules,
-  ...paddingRules,
-  ...pointerEventsRules,
-  ...positionRules,
-  ...radiusRules,
-  ...shadowRules,
-  ...widthRules,
-  // utils
-  ...srOnlyRules,
-  // primitives
-  ..._arrowRules,
-  ..._inputRules,
-  ..._selectableRules,
-  ...avatarRules,
-  ...badgeRules,
-  ...boxRules,
-  ...buttonRules,
-  ...cardRules,
-  ...checkboxRules,
-  ...codeRules,
-  ...containerRules,
-  ...headingRules,
-  ...kbdRules,
-  ...labelRules,
-  ...maxWidthRules,
-  ...popoverRules,
-  ...radioRules,
-  ...selectRules,
-  ...spinnerRules,
-  ...switchRules,
-  ...textAreaRules,
-  ...textInputRules,
-  ...textOverflowRules,
-  ...textRules,
-  ...tokenRules,
-  ...tooltipRules,
-  // components
-  ...breadcrumbsRules,
-  ...dialogRules,
-  ...menuRules,
-  ...skeletonRules,
-  ...toastRules
-};
-function compileRules(rules2) {
+  return css;
+}
+function compileProperties(props) {
   let css = "";
-  const context = {
-    keyframes: {},
-    media: {}
-  };
-  for (const [className, props] of Object.entries(rules2)) {
-    const ruleCss = compileRule(`.${className}`.replace(/:/g, "\\:"), props, context);
-    css += ruleCss ? `${ruleCss}
-` : "";
-  }
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {
+  const propEntries = Object.entries(props);
+  for (const [key, value] of propEntries)
+    if (!key.startsWith("@"))
+      if (isArray(value))
+        for (const item of value)
+          css += `  ${toSnakeCase(key)}: ${item};
 `;
-    for (const [key, props] of Object.entries(value))
-      keyframesCss += `  ${key}`, keyframesCss += compileRule("", props, context).replace(/\n/g, `
-    `) + `
+      else
+        css += `  ${toSnakeCase(key)}: ${value};
 `;
-    keyframesCss += `
+  return css;
 }
-`, css += keyframesCss;
-  }
-  for (const [query, queryRules] of Object.entries(context.media))
-    css += compileMediaQueryRule(query, queryRules) + `
-`;
-  return css.replace(/\n{2,}/g, `
-`).trimStart();
+function toSnakeCase(str) {
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
 }
 function compileSystem() {
-  return compileRules(rules);
-}
-function isRecord(value) {
-  return value !== null && typeof value == "object" && !Array.isArray(value);
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-function rem(value) {
-  return value === 0 ? "0" : `${value / 16}rem`;
-}
-function px(value) {
-  return value === 0 ? "0" : `${value}px`;
-}
-function toBoxShadow(value) {
-  return value ? value.map((n) => px(n)).join(" ") : "none";
+  return compileStyle(systemStyle);
 }
 function compileTheme_v3(theme2) {
   return compileRule(":root", compileThemeProperties(theme2), {
@@ -4050,7 +4065,6 @@ function compileThemeProperties(theme2) {
     ...buildRadiusThemeProperties(theme2),
     ...buildShadowThemeProperties(theme2),
     ...buildSpaceThemeProperties(theme2),
-    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme2)
   };
 }
@@ -4328,140 +4342,60 @@ 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(classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean)).join(" ") || void 0;
+  return unique(getClassNames(...classNames)).join(" ") || void 0;
 }
 function unique(array) {
   return Array.from(new Set(array));
 }
-function breadcrumbs() {
-  return composeClassNames("breadcrumbs");
+function scopeClassName(className) {
+  if (className !== void 0)
+    return `${PREFIX}${className.trim()}`;
 }
-function dialog() {
-  return composeClassNames("dialog");
-}
-function dialogContainer() {
-  return composeClassNames("dialog-container");
-}
-function dialogCardRoot() {
-  return composeClassNames("dialog-card-root");
-}
-function dialogLayout() {
-  return composeClassNames("dialog-layout");
-}
-function dialogHeader() {
-  return composeClassNames("dialog-header");
-}
-function dialogContent() {
-  return composeClassNames("dialog-content");
-}
-function dialogFooter() {
-  return composeClassNames("dialog-footer");
+function _comp(...classNames) {
+  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
 }
-function menu() {
-  return composeClassNames("menu");
-}
-function menuDivider() {
-  return composeClassNames("menu-divider");
+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}`;
+      return index === 0 ? className : `${index}:${className}`;
     }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
 }
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function skeleton(props) {
-  return composeClassNames("skeleton", radius(props));
-}
-function codeSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("code-skeleton", props.size));
-}
-function headingSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
-}
-function labelSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("label-skeleton", props.size));
-}
-function textSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("text-skeleton", props.size));
-}
-function toastLayer() {
-  return composeClassNames("toast-layer");
-}
-function toast() {
-  return composeClassNames("toast");
-}
-function toastLoadingBar() {
-  return composeClassNames("toast-loading-bar");
-}
-function toastLoadingBarProgress() {
-  return composeClassNames("toast-loading-bar-progress");
-}
-function toastLoadingBarMask() {
-  return composeClassNames("toast-loading-bar-mask");
-}
-function treeItem() {
-  return composeClassNames("tree-item");
-}
-function _arrow() {
-  return composeClassNames("arrow");
-}
-function _arrowStroke() {
-  return "arrow-stroke";
-}
-function _arrowShape() {
-  return "arrow-shape";
-}
-const prefixes$2 = {
-  border: "border",
-  borderTop: "border-t",
-  borderRight: "border-r",
-  borderBottom: "border-b",
-  borderLeft: "border-l"
-};
 function border(props) {
-  return composeClassNames(_resp(prefixes$2.border, props.border), _resp(prefixes$2.borderTop, props.borderTop), _resp(prefixes$2.borderRight, props.borderRight), _resp(prefixes$2.borderBottom, props.borderBottom), _resp(prefixes$2.borderLeft, props.borderLeft));
+  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));
 }
-const prefixes$1 = {
-  align: "align",
-  // `flex-align`
-  direction: void 0,
-  // `
-  justify: "justify",
-  // `flex-justify`
-  wrap: "wrap"
-  // `flex-wrap`
-};
 function flex(props) {
-  return composeClassNames(_resp(prefixes$1.align, props.align), _resp(prefixes$1.direction, props.direction), _resp(prefixes$1.justify, props.justify), _resp(prefixes$1.wrap, props.wrap));
+  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("flex", props.flex));
+  return composeClassNames(_resp("f", props.flex));
 }
-const prefixes = {
-  align: "text-align",
-  weight: "font"
-};
 function font(props) {
-  return composeClassNames("font", props.weight && `${prefixes.weight}-${props.weight}`, _resp(prefixes.align, props.align));
+  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-rows", props.autoRows), _resp("auto-flow", props.autoFlow), _resp("columns", props.columns), _resp("rows", props.rows));
+  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));
 }
@@ -4481,136 +4415,233 @@ function pointerEvents(props) {
   return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
 }
 function position(props) {
-  return composeClassNames(_resp("pos", props.position));
+  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}`);
+  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
 }
 function width(props) {
   return _resp("w", props.width) ?? "";
 }
+function dialog() {
+  return _comp("dialog", inset({
+    inset: 0
+  }));
+}
+function dialogContainer() {
+  return _comp("dialog-container");
+}
+function dialogCardRoot() {
+  return _comp("dialog-card-root");
+}
+function dialogLayout() {
+  return _comp("dialog-layout");
+}
+function dialogHeader() {
+  return _comp("dialog-header");
+}
+function dialogContent() {
+  return _comp("dialog-content");
+}
+function dialogFooter() {
+  return _comp("dialog-footer");
+}
+function menu() {
+  return _comp("menu");
+}
+function menuDivider() {
+  return _comp("menu-divider");
+}
+function skeleton(props) {
+  return _comp("skeleton", radius(props));
+}
+function codeSkeleton(props) {
+  return _comp("font-skeleton", _resp("code-skeleton", props.size));
+}
+function headingSkeleton(props) {
+  return _comp("font-skeleton", _resp("heading-skeleton", props.size));
+}
+function labelSkeleton(props) {
+  return _comp("font-skeleton", _resp("label-skeleton", props.size));
+}
+function textSkeleton(props) {
+  return _comp("font-skeleton", _resp("text-skeleton", props.size));
+}
+function toastLayer() {
+  return _comp("toast-layer");
+}
+function toast() {
+  return _comp("toast");
+}
+function toastLoadingBar() {
+  return _comp("toast-loading-bar");
+}
+function toastLoadingBarProgress() {
+  return _comp("toast-loading-bar-progress");
+}
+function toastLoadingBarMask() {
+  return _comp("toast-loading-bar-mask");
+}
+function treeItem() {
+  return _comp("tree-item");
+}
+function _arrow() {
+  return _comp("arrow");
+}
+function _arrowStroke() {
+  return _comp("arrow-stroke");
+}
+function _arrowShape() {
+  return _comp("arrow-shape");
+}
 function _input(props) {
-  return composeClassNames("input", _resp("input", props.fontSize), props.border && "input-b", _resp("input-p", props.padding), _resp("input-g", props.gap), radius(props), width(props));
+  return _comp("input", props.border ? "input-b" : void 0, _resp("input", props.fontSize), _resp("input-p", props.padding), _resp("input-g", props.gap), radius(props), width(props));
 }
 function _inputElement() {
-  return "input-element";
+  return _comp("input-element");
 }
 function _inputPresentation() {
-  return "input-presentation";
+  return _comp("input-presentation");
 }
 function _selectable(props) {
-  return composeClassNames("selectable", toneMap$2[props.tone ?? "default"], radius(props));
+  return _comp("selectable", toneMap$2[props.tone ?? "default"], radius(props));
 }
 function avatar(props) {
-  return composeClassNames("avatar", props.color || "gray", _resp("avatar", props.size));
+  return _comp("avatar", props.color || "gray", _resp("avatar", props.size));
 }
 function avatarArrow() {
-  return composeClassNames("avatar-arrow");
+  return _comp("avatar-arrow");
 }
 function avatarInitials() {
-  return composeClassNames("avatar-initials");
+  return _comp("avatar-initials");
 }
 function avatarImage() {
-  return composeClassNames("avatar-image");
+  return _comp("avatar-image");
 }
 function avatarCounter(props) {
-  return composeClassNames("avatar-counter", _resp("avatar", props.size));
+  return _comp("avatar-counter", _resp("avatar", props.size));
 }
 function avatarStack(props) {
-  return composeClassNames("avatar-stack", _resp("avatar", props.size));
+  return _comp("avatar-stack", _resp("avatar", props.size));
 }
 function badge(props) {
-  return composeClassNames("badge", props.tone && `badge-${props.tone}`, radius(props));
+  return _comp("badge", props.tone && `badge-${props.tone}`, radius(props));
 }
 function box(props) {
-  return composeClassNames("box", props.muted && "muted", border(props), display(props), _resp("h", props.height), _resp("box", props.sizing), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), props.outline && `outline-${props.outline}`, overflow(props), padding(props), pointerEvents(props), position(props), radius(props), width(props));
+  return _comp(
+    "box",
+    props.muted && "muted",
+    // todo: consider this naming
+    _resp("box", props.sizing),
+    border(props),
+    display(props),
+    height(props),
+    flex(props),
+    flexItem(props),
+    grid(props),
+    gridItem(props),
+    gap(props),
+    inset(props),
+    margin(props),
+    maxWidth(props),
+    props.outline && `outline-${props.outline}`,
+    overflow(props),
+    padding(props),
+    pointerEvents(props),
+    position(props),
+    radius(props),
+    width(props)
+  );
 }
 function button(props) {
   const {
     mode,
     tone
   } = props;
-  return composeClassNames("button", variantMap[mode ?? "default"], toneMap$1[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
+  return _comp("button", variantMap[mode ?? "default"], toneMap$1[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
 }
 function buttonLoadingBox() {
   return "button-loading-box";
 }
 function card(props) {
-  return composeClassNames(props.scheme, toneMap[props.tone ?? "inherit"], "card", props.checkered && "card-checkered", box(props), shadow(props));
+  return _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
-  return composeClassNames("checkbox");
+  return _comp("checkbox");
 }
 function checkboxInput() {
-  return composeClassNames("checkbox-input");
+  return _comp("checkbox-input");
 }
 function code(props) {
-  return composeClassNames("code", "block", font(props), _resp("code", props.size));
+  return _comp("code", "block", font(props), _resp("code", props.size));
 }
 function container(props) {
-  return composeClassNames("container", maxWidth({
+  return _comp("container", maxWidth({
     maxWidth: props.width
   }));
 }
 function heading(props) {
-  return composeClassNames("heading", "block", flexItem(props), font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size));
+  return _comp("block", "heading", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size), flexItem(props));
 }
 function kbd(props) {
-  return composeClassNames("kbd", radius(props));
+  return _comp("kbd", radius(props));
 }
 function label(props) {
-  return composeClassNames("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
+  return _comp("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
 }
 function popover() {
-  return composeClassNames("popover");
+  return _comp("popover");
 }
 function radio() {
-  return composeClassNames("radio");
+  return _comp("radio");
 }
 function select(props) {
-  return composeClassNames("select", _input(props));
+  return composeClassNames(_comp("select"), _input(props));
 }
 function selectPresentation() {
-  return composeClassNames("select-presentation", _inputPresentation());
+  return composeClassNames(_comp("select-presentation"), _inputPresentation());
 }
 function spinner() {
-  return composeClassNames("spinner");
+  return _comp("spinner");
 }
 function animatedSpinnerIcon() {
-  return composeClassNames("animated-spinner-icon");
+  return _comp("animated-spinner-icon");
 }
 function _switch() {
-  return composeClassNames("switch");
+  return _comp("switch");
 }
 function _switchElement() {
-  return composeClassNames("switch-element");
+  return _comp("switch-element");
 }
 function _switchPresentation() {
-  return composeClassNames("switch-presentation");
+  return _comp("switch-presentation");
 }
 function _switchThumb() {
-  return composeClassNames("switch-thumb");
+  return _comp("switch-thumb");
 }
 function _switchTrack() {
-  return composeClassNames("switch-track");
+  return _comp("switch-track");
 }
 function text(props) {
-  return composeClassNames("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
+  return _comp("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
 }
 function textArea(props) {
-  return composeClassNames("text-area", _input(props));
+  return composeClassNames(_comp("text-area"), _input(props));
 }
 function textInput(props) {
-  return composeClassNames(_input(props), "text-input");
+  return composeClassNames(_input(props), _comp("text-input"));
 }
 function tooltip() {
-  return composeClassNames("tooltip");
+  return _comp("tooltip");
 }
 function tooltipCard() {
-  return composeClassNames("tooltip-card");
+  return _comp("tooltip-card");
 }
 function srOnly() {
   return composeClassNames("sr-only");
@@ -4663,10 +4694,12 @@ exports.flex = flex;
 exports.flexItem = flexItem;
 exports.font = font;
 exports.gap = gap;
+exports.getClassNames = getClassNames;
 exports.grid = grid;
 exports.gridItem = gridItem;
 exports.heading = heading;
 exports.headingSkeleton = headingSkeleton;
+exports.height = height;
 exports.inset = inset;
 exports.isArray = isArray;
 exports.isRecord = isRecord;
@@ -4686,6 +4719,7 @@ exports.px = px;
 exports.radio = radio;
 exports.radius = radius;
 exports.rem = rem;
+exports.scopeClassName = scopeClassName;
 exports.select = select;
 exports.selectPresentation = selectPresentation;
 exports.shadow = shadow;