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

package/dist/css.js

@@ -1,83 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
-function _resp(prefix, prop) {
-  if (!(prop === void 0 || prop === !1))
-    return Array.isArray(prop) ? prop.map((value, index) => {
-      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
-      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-      return index === 0 ? className : `${index}:${className}`;
-    }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-}
-function _getClassNames(...classNames) {
-  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
-}
-function composeClassNames(...classNames) {
-  return unique(_getClassNames(...classNames)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
-}
-function border(props) {
-  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
-}
-function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
-}
-function flex(props) {
-  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
-}
-function flexItem(props) {
-  return composeClassNames(_resp("f", props.flex));
-}
-function font(props) {
-  return composeClassNames("font", props.weight && `font-${props.weight}`);
-}
-function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
-}
-function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
-}
-function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
-}
-function height(props) {
-  return composeClassNames(_resp("h", props.height));
-}
-function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
-}
-function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
-}
-function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
-}
-function minWidth(props) {
-  return _resp("min-w", props.minWidth) ?? "";
-}
-function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
-}
-function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
-}
-function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
-}
-function position(props) {
-  return composeClassNames(_resp("position", props.position));
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
-function textAlign(props) {
-  return composeClassNames(_resp("text-align", props.textAlign));
-}
+import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
+import { SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, THEME_COLOR_CARD_TONES, AVATAR_SIZE, THEME_COLOR_STATE_TONES, HUES, TINTS, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
 const BREAKPOINTS = {
   1: 360,
   2: 600,
@@ -86,19 +8,6 @@ const BREAKPOINTS = {
   5: 1800,
   6: 2400
 }, PREFIX = "s-";
-function scopeClassName(className) {
-  if (className !== void 0)
-    return `${PREFIX}${className.trim()}`;
-}
-function _comp(...classNames) {
-  return _getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
-}
-function textOverflow(props) {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-function width(props) {
-  return _resp("w", props.width) ?? "";
-}
 function isRecord(value) {
   return value !== null && typeof value == "object" && !Array.isArray(value);
 }
@@ -210,7 +119,7 @@ const varNames = {
       width: "--avatar-focus-ring-width"
     },
     size: "--avatar-size",
-    sizes: theme.AVATAR_SIZE.reduce((acc, size) => ({
+    sizes: AVATAR_SIZE.reduce((acc, size) => ({
       ...acc,
       [size]: {
         distance: `--avatar-${size}-distance`,
@@ -351,15 +260,15 @@ const varNames = {
       variant: "tinted"
     }),
     // tone scopes
-    ...theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       tone
     }), acc), {}),
     // scheme scopes
-    dark: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       scheme: "dark",
       tone
     }), acc), {}),
-    light: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       scheme: "light",
       tone
     }), acc), {})
@@ -376,7 +285,7 @@ const varNames = {
     code: {
       family: "--font-code-family",
       featureSettings: "--font-code-feature-settings",
-      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-code-${size}-size`,
@@ -397,7 +306,7 @@ const varNames = {
     heading: {
       family: "--font-heading-family",
       featureSettings: "--font-heading-feature-settings",
-      sizes: theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
+      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-heading-${size}-size`,
@@ -418,7 +327,7 @@ const varNames = {
     label: {
       family: "--font-label-family",
       featureSettings: "--font-label-feature-settings",
-      sizes: theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
+      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-label-${size}-size`,
@@ -439,7 +348,7 @@ const varNames = {
     text: {
       family: "--font-text-family",
       featureSettings: "--font-text-feature-settings",
-      sizes: theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
+      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-text-${size}-size`,
@@ -508,19 +417,19 @@ const varNames = {
     gap: "--input-gap",
     padding: "--input-padding"
   },
-  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  shadow: Object.fromEntries(theme.SHADOW.map((shadow2) => [shadow2, {
+  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
     umbra: `--shadow-${shadow2}-umbra`,
     penumbra: `--shadow-${shadow2}-penumbra`,
     ambient: `--shadow-${shadow2}-ambient`
   }])),
-  space: Object.fromEntries(theme.SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
   // color
   black: "--black",
   white: "--white",
-  ...color.COLOR_HUES.reduce((acc, hue) => {
+  ...COLOR_HUES.reduce((acc, hue) => {
     const tints = {};
-    for (const tint of color.COLOR_TINTS)
+    for (const tint of COLOR_TINTS)
       tints[tint] = `--${hue}-${tint}`;
     return acc[hue] = tints, acc;
   }, {})
@@ -670,7 +579,7 @@ function buildColorVariantVarNames(options) {
       4: `${prefix}-fg-4`
     }
   };
-  for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
+  for (const elementTone of THEME_COLOR_STATE_TONES) {
     const _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
@@ -698,10 +607,10 @@ function buildColorVariantVarNames(options) {
   }
   return vars2;
 }
-function compilePalette() {
+function _compilePalette() {
   return _compileStyle({
     layers: {
-      theme: {
+      palette: {
         ":root": compilePaletteProperties()
       }
     }
@@ -709,12 +618,12 @@ function compilePalette() {
 }
 function compilePaletteProperties() {
   const rules2 = {
-    [varNames.black]: color.color.black.hex,
-    [varNames.white]: color.color.white.hex
+    [varNames.black]: color.black.hex,
+    [varNames.white]: color.white.hex
   };
-  for (const hue of theme.HUES)
-    for (const tint of theme.TINTS)
-      rules2[varNames[hue][tint]] = color.color[hue][tint].hex;
+  for (const hue of HUES)
+    for (const tint of TINTS)
+      rules2[varNames[hue][tint]] = color[hue][tint].hex;
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -760,13 +669,13 @@ function _responsiveRule(rules2, _name, properties) {
   };
 }
 const darkColorVars = {};
-for (const tone of theme.THEME_COLOR_CARD_TONES)
+for (const tone of THEME_COLOR_CARD_TONES)
   darkColorVars[tone] = buildColorCardVars({
     scheme: "dark",
     tone
   });
 const lightColorVars = {};
-for (const tone of theme.THEME_COLOR_CARD_TONES)
+for (const tone of THEME_COLOR_CARD_TONES)
   lightColorVars[tone] = buildColorCardVars({
     scheme: "light",
     tone
@@ -888,7 +797,7 @@ const colorVars = {
   tinted: buildColorVariantVars({
     variant: "tinted"
   }),
-  ...theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+  ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
     ...acc,
     [tone]: buildColorCardVars({
       tone
@@ -900,7 +809,7 @@ const colorVars = {
   avatar: {
     distance: `var(${varNames.avatar.distance})`,
     size: `var(${varNames.avatar.size})`,
-    sizes: theme.AVATAR_SIZE.reduce((acc, size) => ({
+    sizes: AVATAR_SIZE.reduce((acc, size) => ({
       ...acc,
       [size]: {
         size: `var(${varNames.avatar.sizes[size].size})`,
@@ -925,7 +834,7 @@ const colorVars = {
   font: {
     code: {
       family: `var(${varNames.font.code.family})`,
-      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.code.sizes[size].fontSize})`,
@@ -945,7 +854,7 @@ const colorVars = {
     },
     heading: {
       family: `var(${varNames.font.heading.family})`,
-      sizes: theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
+      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.heading.sizes[size].fontSize})`,
@@ -965,7 +874,7 @@ const colorVars = {
     },
     label: {
       family: `var(${varNames.font.label.family})`,
-      sizes: theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
+      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.label.sizes[size].fontSize})`,
@@ -985,7 +894,7 @@ const colorVars = {
     },
     text: {
       family: `var(${varNames.font.text.family})`,
-      sizes: theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
+      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.text.sizes[size].fontSize})`,
@@ -1020,19 +929,19 @@ const colorVars = {
       }
     }
   },
-  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  shadow: Object.fromEntries(theme.SHADOW.map((shadow2) => [shadow2, {
+  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
+  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
     umbra: `var(${varNames.shadow[shadow2].umbra})`,
     penumbra: `var(${varNames.shadow[shadow2].penumbra})`,
     ambient: `var(${varNames.shadow[shadow2].ambient})`
   }])),
-  space: Object.fromEntries(theme.SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
+  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
   // color
   black: `var(${varNames.black})`,
   white: `var(${varNames.white})`,
-  ...color.COLOR_HUES.reduce((acc, hue) => {
+  ...COLOR_HUES.reduce((acc, hue) => {
     const tints = {};
-    for (const tint of color.COLOR_TINTS)
+    for (const tint of COLOR_TINTS)
       tints[tint] = `var(--${hue}-${tint})`;
     return acc[hue] = tints, acc;
   }, {})
@@ -1044,7 +953,7 @@ function buildColorCardVars(props) {
   } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
   return {
     avatar: {
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
         [color2]: {
           bg: `var(${prefix.avatar[color2].bg})`,
@@ -1153,7 +1062,7 @@ function buildColorVariantVars(options) {
       4: `var(${_prefix}-fg-4)`
     }
   };
-  for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
+  for (const elementTone of THEME_COLOR_STATE_TONES) {
     const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
@@ -1433,15 +1342,15 @@ const flexStyle = {
     primitive: primitive$q
   }
 }, util$n = {};
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$n, `g-${space}`, {
     gap: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$n, `gx-${space}`, {
     columnGap: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$n, `gy-${space}`, {
     rowGap: vars.space[space]
   });
@@ -1875,33 +1784,33 @@ const insetStyle = {
     util: util$a
   }
 }, util$9 = {};
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `m-${space}`, {
     margin: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `mt-${space}`, {
     marginTop: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `mr-${space}`, {
     marginRight: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$9, `ml-${space}`, {
     marginLeft: vars.space[space]
   });
@@ -1987,33 +1896,33 @@ const overflowStyle = {
     util: util$6
   }
 }, util$5 = {};
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `p-${space}`, {
     padding: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `px-${space}`, {
     paddingLeft: vars.space[space],
     paddingRight: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `py-${space}`, {
     paddingTop: vars.space[space],
     paddingBottom: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `pt-${space}`, {
     paddingTop: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `pr-${space}`, {
     paddingRight: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `pb-${space}`, {
     paddingBottom: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(util$5, `pl-${space}`, {
     paddingLeft: vars.space[space]
   });
@@ -2082,7 +1991,7 @@ const radiusStyle = {
     util: util$3
   }
 }, util$2 = {};
-for (const shadow2 of theme.SHADOW)
+for (const shadow2 of SHADOW)
   shadow2 === 0 ? _responsiveRule(util$2, "shadow-0", {
     boxShadow: "none"
   }) : _responsiveRule(util$2, `shadow-${shadow2}`, {
@@ -2270,25 +2179,25 @@ const widthStyle = {
     height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
   }
 };
-for (const size of theme.FONT_CODE_SIZE)
+for (const size of 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)
+for (const size of 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)
+for (const size of 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)
+for (const size of 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,
@@ -2523,7 +2432,7 @@ const skeletonStyle = {
     }
   }
 };
-for (const size of theme.FONT_TEXT_SIZE) {
+for (const size of FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[size];
   _responsiveRule(primitive$o, `input-${size}`, {
     [varNames.input.fontSize]: source.fontSize,
@@ -2533,11 +2442,11 @@ for (const size of theme.FONT_TEXT_SIZE) {
     [varNames.input.descenderHeight]: source.descenderHeight
   });
 }
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(primitive$o, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space]
   });
-for (const space of theme.SPACE)
+for (const space of SPACE)
   _responsiveRule(primitive$o, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space]
   });
@@ -2615,7 +2524,7 @@ const _inputStyle = {
 };
 function buildSelectableTones() {
   const rules2 = {};
-  for (const tone of theme.THEME_COLOR_STATE_TONES) {
+  for (const tone of THEME_COLOR_STATE_TONES) {
     const target = varNames.color, source = vars.color;
     rules2[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
@@ -2686,7 +2595,7 @@ const primitive$m = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
         [`&.${color2}`]: {
           [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
@@ -2780,7 +2689,7 @@ const primitive$m = {
     }
   }
 };
-for (const size of theme.AVATAR_SIZE)
+for (const size of AVATAR_SIZE)
   _responsiveRule(primitive$m, `avatar-${size}`, {
     [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
     [varNames.avatar.size]: vars.avatar.sizes[size].size
@@ -2796,7 +2705,7 @@ const avatarStyle = {
     verticalAlign: "top"
   }
 };
-for (const tone of theme.THEME_COLOR_STATE_TONES)
+for (const tone of THEME_COLOR_STATE_TONES)
   primitive$l[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
     [varNames.color.fg]: vars.color.tinted[tone].fg[3]
@@ -2832,18 +2741,6 @@ const badgeStyle = {
   layers: {
     primitive: primitive$k
   }
-}, toneMap = {
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
-}, variantMap = {
-  default: "solid",
-  ghost: "ghost",
-  bleed: "tinted"
 }, primitive$j = {
   ".button": {
     WebkitFontSmoothing: "inherit",
@@ -2891,11 +2788,13 @@ const badgeStyle = {
     opacity: 0.8
   }
 };
-for (const tone of theme.THEME_COLOR_STATE_TONES) {
+for (const tone of THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap[tone]}`] = {
+  primitive$j[`.button[data-mode="default"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
+    [varNames.color.code.bg]: solid.bg[1],
+    [varNames.color.code.fg]: solid.fg[4],
     [varNames.color.fg]: solid.fg[0],
     [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
@@ -2904,6 +2803,8 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
       "&:not([data-disabled]):hover": {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
+        [varNames.color.code.bg]: solid.bg[2],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4]
@@ -2911,6 +2812,8 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
@@ -2918,6 +2821,8 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
+        [varNames.color.code.bg]: solid.bg[3],
+        [varNames.color.code.fg]: solid.fg[4],
         [varNames.color.fg]: solid.fg[0],
         [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
@@ -2941,25 +2846,30 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
       }
     }
-  }, primitive$j[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
+  }, primitive$j[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
+    [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.code.bg]: tinted.bg[2],
+    [varNames.color.code.fg]: tinted.fg[4],
     [varNames.color.muted.bg]: tinted.bg[2],
     [varNames.color.muted.fg]: tinted.fg[4],
     "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
     "@nest": {
       "&:not([data-disabled]):hover": {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
+        [varNames.color.border]: tinted.border[2],
+        [varNames.color.code.bg]: tinted.bg[3],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3]
-        // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -2967,7 +2877,9 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[3],
+        [varNames.color.code.bg]: tinted.bg[4],
+        [varNames.color.code.fg]: tinted.fg[3],
         [varNames.color.fg]: tinted.fg[1],
         [varNames.color.muted.bg]: tinted.bg[4],
         [varNames.color.muted.fg]: tinted.fg[3],
@@ -2992,7 +2904,7 @@ for (const tone of theme.THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
       }
     }
-  }, primitive$j[`.button.${variantMap.bleed}.${toneMap[tone]}`] = {
+  }, primitive$j[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
     boxShadow: "none",
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
@@ -3078,6 +2990,11 @@ const buttonStyle = {
         font: "inherit",
         whiteSpace: "inherit"
       },
+      "&[data-checkered]": {
+        backgroundSize: `${vars.space[3]} ${vars.space[3]}`,
+        backgroundPosition: "top left",
+        backgroundImage: `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)`
+      },
       "a&:not([data-disabled]):hover, button&:not([data-disabled]):hover": {
         [varNames.color.bg]: vars.color.tinted.default.bg[1],
         [varNames.color.border]: vars.color.tinted.default.border[3],
@@ -3114,41 +3031,27 @@ const buttonStyle = {
         [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
         [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
       },
-      // '&:not([data-disabled]):focus': {
-      //   '--color-bg': vars.color.solid.bg[0],
-      //   '--color-border': vars.color.solid.border[1],
-      //   '--color-fg': vars.color.solid.fg[1],
-      //   '--color-muted-bg': vars.color.solid.bg[1],
-      //   '--color-muted-fg': vars.color.solid.fg[3],
-      // },
       "a&[data-disabled], button&[data-disabled]": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+        [varNames.color.bg]: vars.color.tinted.default.bg[0],
+        [varNames.color.border]: vars.color.tinted.default.border[1],
+        [varNames.color.fg]: vars.color.tinted.default.border[3],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.muted.fg]: vars.color.tinted.default.border[1]
       }
-      // '&[data-disabled]': {
-      //   '--color-bg': vars.color.tinted.bg[0],
-      //   '--color-border': vars.color.tinted.border[1],
-      //   '--color-fg': vars.color.tinted.border[4],
-      //   '--color-muted-bg': vars.color.tinted.bg[1],
-      //   '--color-muted-fg': vars.color.tinted.border[4],
-      // },
     }
   }
 };
-for (const scheme of theme.THEME_COLOR_SCHEMES) {
+for (const scheme of THEME_COLOR_SCHEMES$1) {
   const schemeProps = {
     colorScheme: scheme
   };
-  for (const tone of theme.THEME_COLOR_CARD_TONES) {
+  for (const tone of THEME_COLOR_CARD_TONES) {
     const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
     _assignToneProps(schemeProps, _varNames, _vars);
   }
   primitive$i[`.card.${scheme}`] = schemeProps;
 }
-for (const tone of theme.THEME_COLOR_CARD_TONES) {
+for (const tone of 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,
@@ -3183,7 +3086,7 @@ const cardStyle = {
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
-  for (const hue of theme.THEME_COLOR_AVATAR_COLORS)
+  for (const hue of THEME_COLOR_AVATAR_COLORS)
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
     [_varNames.backdrop]: _vars.backdrop,
@@ -3233,7 +3136,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     [_varNames.shadow.ambient]: _vars.shadow.ambient
   });
   for (const variant of ["solid", "tinted"])
-    for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
+    for (const elementTone of THEME_COLOR_STATE_TONES) {
       const __varNames = _varNames[variant][elementTone], __vars = _vars[variant][elementTone];
       Object.assign(toneProps, {
         [__varNames.bg[0]]: __vars.bg[0],
@@ -3421,7 +3324,7 @@ const primitive$h = {
     }
   }
 };
-for (const size of theme.FONT_CODE_SIZE)
+for (const size of FONT_CODE_SIZE)
   _responsiveRule(primitive$g, `code-${size}`, {
     "--font-size": `var(--font-code-${size}-size)`,
     "--font-line-height": `var(--font-code-${size}-line-height)`,
@@ -3467,7 +3370,7 @@ const codeStyle = {
     "--color-fg": "var(--color-tinted-default-fg-4)"
   }
 };
-for (const size of theme.FONT_HEADING_SIZE)
+for (const size of FONT_HEADING_SIZE)
   _responsiveRule(primitive$e, `heading-${size}`, {
     "--font-size": `var(--font-heading-${size}-size)`,
     "--font-line-height": `var(--font-heading-${size}-line-height)`,
@@ -3483,11 +3386,8 @@ const headingStyle = {
   }
 }, primitive$d = {
   ".kbd": {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--color-border': 'var(--color-tinted-default-border-2)',
-    // '--color-fg': 'var(--color-tinted-default-fg-3)',
-    boxShadow: "inset 0 0 0 0.5px var(--color-tinted-default-border-3)",
-    background: "var(--color-muted-bg)",
+    boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
+    backgroundColor: vars.color.muted.bg,
     font: "inherit",
     verticalAlign: "top",
     "@nest": {
@@ -3524,7 +3424,7 @@ const headingStyle = {
     "--color-fg": "var(--color-muted-fg)"
   }
 };
-for (const size of theme.FONT_LABEL_SIZE)
+for (const size of FONT_LABEL_SIZE)
   _responsiveRule(primitive$c, `label-${size}`, {
     "--font-size": `var(--font-label-${size}-size)`,
     "--font-line-height": `var(--font-label-${size}-line-height)`,
@@ -3808,7 +3708,7 @@ const labelStyle = {
     color: "var(--color-muted-fg)"
   }
 };
-for (const size of theme.FONT_TEXT_SIZE)
+for (const size of FONT_TEXT_SIZE)
   _responsiveRule(primitive$5, `text-${size}`, {
     "--font-size": `var(--font-text-${size}-size)`,
     "--font-line-height": `var(--font-text-${size}-line-height)`,
@@ -4027,6 +3927,7 @@ const textStyle = {
   {
     // define order of layers
     layers: {
+      palette: {},
       theme: {},
       base: {},
       util: {},
@@ -4107,69 +4008,70 @@ const textStyle = {
   toastStyle,
   treeStyle
 ]);
-function compileSystem() {
+function _compileSystem() {
   return _compileStyle(_systemStyle);
 }
 const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
-function compileTheme_v3(theme2) {
+function _compileTheme_v3(theme) {
   return _compileStyle({
     layers: {
       theme: {
-        ":root": compileThemeProperties(theme2)
+        ":root": compileThemeProperties(theme)
       }
     }
   });
 }
-function compileThemeProperties(theme2) {
+function compileThemeProperties(theme) {
   return {
-    ...buildAvatarThemeProperties(theme2),
-    ...buildButtonThemeProperties(theme2),
-    [varNames.card.shadow.outline]: px(theme2.card.shadow.outline),
-    ...buildColorThemeProperties(theme2),
-    ...buildContainerThemeProperties(theme2),
-    ...buildFontCodeThemeProperties(theme2),
-    ...buildFontHeadingThemeProperties(theme2),
-    ...buildFontLabelThemeProperties(theme2),
-    ...buildFontTextThemeProperties(theme2),
-    ...buildInputThemeProperties(theme2),
-    ...buildRadiusThemeProperties(theme2),
-    ...buildShadowThemeProperties(theme2),
-    ...buildSpaceThemeProperties(theme2)
+    ...buildAvatarThemeProperties(theme),
+    ...buildButtonThemeProperties(theme),
+    // card
+    [varNames.card.shadow.outline]: px(theme.card.shadow.outline),
+    ...buildColorThemeProperties(theme),
+    ...buildContainerThemeProperties(theme),
+    ...buildFontCodeThemeProperties(theme),
+    ...buildFontHeadingThemeProperties(theme),
+    ...buildFontLabelThemeProperties(theme),
+    ...buildFontTextThemeProperties(theme),
+    ...buildInputThemeProperties(theme),
+    ...buildRadiusThemeProperties(theme),
+    ...buildShadowThemeProperties(theme),
+    ...buildSpaceThemeProperties(theme)
   };
 }
-function buildAvatarThemeProperties(theme2) {
+function buildAvatarThemeProperties(theme) {
   return {
-    [varNames.avatar.focusRing.offset]: px(theme2.avatar.focusRing.offset),
-    [varNames.avatar.focusRing.width]: px(theme2.avatar.focusRing.width),
-    [varNames.avatar.sizes[0].distance]: rem(theme2.avatar.sizes[0].distance),
-    [varNames.avatar.sizes[0].size]: rem(theme2.avatar.sizes[0].size),
-    [varNames.avatar.sizes[1].distance]: rem(theme2.avatar.sizes[1].distance),
-    [varNames.avatar.sizes[1].size]: rem(theme2.avatar.sizes[1].size),
-    [varNames.avatar.sizes[2].distance]: rem(theme2.avatar.sizes[2].distance),
-    [varNames.avatar.sizes[2].size]: rem(theme2.avatar.sizes[2].size),
-    [varNames.avatar.sizes[3].distance]: rem(theme2.avatar.sizes[3].distance),
-    [varNames.avatar.sizes[3].size]: rem(theme2.avatar.sizes[3].size)
+    [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
+    [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
+    [varNames.avatar.sizes[0].distance]: rem(theme.avatar.sizes[0].distance),
+    [varNames.avatar.sizes[0].size]: rem(theme.avatar.sizes[0].size),
+    [varNames.avatar.sizes[1].distance]: rem(theme.avatar.sizes[1].distance),
+    [varNames.avatar.sizes[1].size]: rem(theme.avatar.sizes[1].size),
+    [varNames.avatar.sizes[2].distance]: rem(theme.avatar.sizes[2].distance),
+    [varNames.avatar.sizes[2].size]: rem(theme.avatar.sizes[2].size),
+    [varNames.avatar.sizes[3].distance]: rem(theme.avatar.sizes[3].distance),
+    [varNames.avatar.sizes[3].size]: rem(theme.avatar.sizes[3].size)
   };
 }
-function buildButtonThemeProperties(theme2) {
+function buildButtonThemeProperties(theme) {
   return {
-    [varNames.button.border.width]: px(theme2.button.border.width),
-    [varNames.button.focusRing.offset]: px(theme2.button.focusRing.offset),
-    [varNames.button.focusRing.width]: px(theme2.button.focusRing.width)
+    [varNames.button.border.width]: px(theme.button.border.width),
+    [varNames.button.focusRing.offset]: px(theme.button.focusRing.offset),
+    [varNames.button.focusRing.width]: px(theme.button.focusRing.width)
   };
 }
-function buildContainerThemeProperties(theme2) {
+function buildContainerThemeProperties(theme) {
   return {
-    [varNames.container[0]]: rem(theme2.container[0]),
-    [varNames.container[1]]: rem(theme2.container[1]),
-    [varNames.container[2]]: rem(theme2.container[2]),
-    [varNames.container[3]]: rem(theme2.container[3]),
-    [varNames.container[4]]: rem(theme2.container[4]),
-    [varNames.container[5]]: rem(theme2.container[5])
+    [varNames.container[0]]: rem(theme.container[0]),
+    [varNames.container[1]]: rem(theme.container[1]),
+    [varNames.container[2]]: rem(theme.container[2]),
+    [varNames.container[3]]: rem(theme.container[3]),
+    [varNames.container[4]]: rem(theme.container[4]),
+    [varNames.container[5]]: rem(theme.container[5])
   };
 }
-function buildFontCodeThemeProperties(theme$1) {
-  const v = varNames.font.code, t = theme$1.font.code, props = {
+function buildFontCodeThemeProperties(theme) {
+  const v = varNames.font.code, t = theme.font.code, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings || "normal",
     [v.weights.regular]: t.weights.regular,
@@ -4177,14 +4079,14 @@ function buildFontCodeThemeProperties(theme$1) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of theme.FONT_CODE_SIZE) {
-    const _v = varNames.font.code.sizes[size], _t = theme$1.font.code.sizes[size];
+  for (const size of FONT_CODE_SIZE) {
+    const _v = varNames.font.code.sizes[size], _t = theme.font.code.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontHeadingThemeProperties(theme$1) {
-  const v = varNames.font.heading, t = theme$1.font.heading, props = {
+function buildFontHeadingThemeProperties(theme) {
+  const v = varNames.font.heading, t = theme.font.heading, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4192,14 +4094,14 @@ function buildFontHeadingThemeProperties(theme$1) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of theme.FONT_HEADING_SIZE) {
+  for (const size of FONT_HEADING_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontLabelThemeProperties(theme$1) {
-  const v = varNames.font.label, t = theme$1.font.label, props = {
+function buildFontLabelThemeProperties(theme) {
+  const v = varNames.font.label, t = theme.font.label, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4207,14 +4109,14 @@ function buildFontLabelThemeProperties(theme$1) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of theme.FONT_LABEL_SIZE) {
+  for (const size of FONT_LABEL_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontTextThemeProperties(theme$1) {
-  const v = varNames.font.text, t = theme$1.font.text, props = {
+function buildFontTextThemeProperties(theme) {
+  const v = varNames.font.text, t = theme.font.text, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4222,208 +4124,301 @@ function buildFontTextThemeProperties(theme$1) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of theme.FONT_TEXT_SIZE) {
+  for (const size of FONT_TEXT_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildInputThemeProperties(theme2) {
+function buildInputThemeProperties(theme) {
   return {
-    [varNames.input.border.width]: px(theme2.input.border.width),
-    [varNames.input.checkbox.focusRing.offset]: px(theme2.input.checkbox.focusRing.offset),
-    [varNames.input.checkbox.focusRing.width]: px(theme2.input.checkbox.focusRing.width),
-    [varNames.input.checkbox.size]: rem(theme2.input.checkbox.size),
-    [varNames.input.radio.focusRing.offset]: px(theme2.input.radio.focusRing.offset),
-    [varNames.input.radio.focusRing.width]: px(theme2.input.radio.focusRing.width),
-    [varNames.input.radio.markSize]: rem(theme2.input.radio.markSize),
-    [varNames.input.radio.size]: rem(theme2.input.radio.size),
-    [varNames.input.select.focusRing.offset]: px(theme2.input.select.focusRing.offset),
-    [varNames.input.select.focusRing.width]: px(theme2.input.select.focusRing.width),
-    [varNames.input.switch.focusRing.offset]: px(theme2.input.switch.focusRing.offset),
-    [varNames.input.switch.focusRing.width]: px(theme2.input.switch.focusRing.width),
-    [varNames.input.switch.height]: rem(theme2.input.switch.height),
-    [varNames.input.switch.padding]: rem(theme2.input.switch.padding),
-    [varNames.input.switch.transitionDurationMs]: `${theme2.input.switch.transitionDurationMs}ms`,
-    [varNames.input.switch.transitionTimingFunction]: theme2.input.switch.transitionTimingFunction,
-    [varNames.input.switch.width]: rem(theme2.input.switch.width),
-    [varNames.input.text.focusRing.offset]: px(theme2.input.text.focusRing.offset),
-    [varNames.input.text.focusRing.width]: px(theme2.input.text.focusRing.width)
+    [varNames.input.border.width]: px(theme.input.border.width),
+    [varNames.input.checkbox.focusRing.offset]: px(theme.input.checkbox.focusRing.offset),
+    [varNames.input.checkbox.focusRing.width]: px(theme.input.checkbox.focusRing.width),
+    [varNames.input.checkbox.size]: rem(theme.input.checkbox.size),
+    [varNames.input.radio.focusRing.offset]: px(theme.input.radio.focusRing.offset),
+    [varNames.input.radio.focusRing.width]: px(theme.input.radio.focusRing.width),
+    [varNames.input.radio.markSize]: rem(theme.input.radio.markSize),
+    [varNames.input.radio.size]: rem(theme.input.radio.size),
+    [varNames.input.select.focusRing.offset]: px(theme.input.select.focusRing.offset),
+    [varNames.input.select.focusRing.width]: px(theme.input.select.focusRing.width),
+    [varNames.input.switch.focusRing.offset]: px(theme.input.switch.focusRing.offset),
+    [varNames.input.switch.focusRing.width]: px(theme.input.switch.focusRing.width),
+    [varNames.input.switch.height]: rem(theme.input.switch.height),
+    [varNames.input.switch.padding]: rem(theme.input.switch.padding),
+    [varNames.input.switch.transitionDurationMs]: `${theme.input.switch.transitionDurationMs}ms`,
+    [varNames.input.switch.transitionTimingFunction]: theme.input.switch.transitionTimingFunction,
+    [varNames.input.switch.width]: rem(theme.input.switch.width),
+    [varNames.input.text.focusRing.offset]: px(theme.input.text.focusRing.offset),
+    [varNames.input.text.focusRing.width]: px(theme.input.text.focusRing.width)
   };
 }
-function buildRadiusThemeProperties(theme2) {
+function buildRadiusThemeProperties(theme) {
   return {
-    [varNames.radius[0]]: px(theme2.radius[0]),
-    [varNames.radius[1]]: px(theme2.radius[1]),
-    [varNames.radius[2]]: px(theme2.radius[2]),
-    [varNames.radius[3]]: px(theme2.radius[3]),
-    [varNames.radius[4]]: px(theme2.radius[4]),
-    [varNames.radius[5]]: px(theme2.radius[5]),
-    [varNames.radius[6]]: px(theme2.radius[6])
+    [varNames.radius[0]]: px(theme.radius[0]),
+    [varNames.radius[1]]: px(theme.radius[1]),
+    [varNames.radius[2]]: px(theme.radius[2]),
+    [varNames.radius[3]]: px(theme.radius[3]),
+    [varNames.radius[4]]: px(theme.radius[4]),
+    [varNames.radius[5]]: px(theme.radius[5]),
+    [varNames.radius[6]]: px(theme.radius[6])
   };
 }
-function buildShadowThemeProperties(theme2) {
+function buildShadowThemeProperties(theme) {
   return {
-    [varNames.shadow[0].umbra]: toBoxShadow(theme2.shadow[0]?.umbra),
-    [varNames.shadow[0].penumbra]: toBoxShadow(theme2.shadow[0]?.penumbra),
-    [varNames.shadow[0].ambient]: toBoxShadow(theme2.shadow[0]?.ambient),
-    [varNames.shadow[1].umbra]: toBoxShadow(theme2.shadow[1]?.umbra),
-    [varNames.shadow[1].penumbra]: toBoxShadow(theme2.shadow[1]?.penumbra),
-    [varNames.shadow[1].ambient]: toBoxShadow(theme2.shadow[1]?.ambient),
-    [varNames.shadow[2].umbra]: toBoxShadow(theme2.shadow[2]?.umbra),
-    [varNames.shadow[2].penumbra]: toBoxShadow(theme2.shadow[2]?.penumbra),
-    [varNames.shadow[2].ambient]: toBoxShadow(theme2.shadow[2]?.ambient),
-    [varNames.shadow[3].umbra]: toBoxShadow(theme2.shadow[3]?.umbra),
-    [varNames.shadow[3].penumbra]: toBoxShadow(theme2.shadow[3]?.penumbra),
-    [varNames.shadow[3].ambient]: toBoxShadow(theme2.shadow[3]?.ambient),
-    [varNames.shadow[4].umbra]: toBoxShadow(theme2.shadow[4]?.umbra),
-    [varNames.shadow[4].penumbra]: toBoxShadow(theme2.shadow[4]?.penumbra),
-    [varNames.shadow[4].ambient]: toBoxShadow(theme2.shadow[4]?.ambient),
-    [varNames.shadow[5].umbra]: toBoxShadow(theme2.shadow[5]?.umbra),
-    [varNames.shadow[5].penumbra]: toBoxShadow(theme2.shadow[5]?.penumbra),
-    [varNames.shadow[5].ambient]: toBoxShadow(theme2.shadow[5]?.ambient)
+    [varNames.shadow[0].umbra]: toBoxShadow(theme.shadow[0]?.umbra),
+    [varNames.shadow[0].penumbra]: toBoxShadow(theme.shadow[0]?.penumbra),
+    [varNames.shadow[0].ambient]: toBoxShadow(theme.shadow[0]?.ambient),
+    [varNames.shadow[1].umbra]: toBoxShadow(theme.shadow[1]?.umbra),
+    [varNames.shadow[1].penumbra]: toBoxShadow(theme.shadow[1]?.penumbra),
+    [varNames.shadow[1].ambient]: toBoxShadow(theme.shadow[1]?.ambient),
+    [varNames.shadow[2].umbra]: toBoxShadow(theme.shadow[2]?.umbra),
+    [varNames.shadow[2].penumbra]: toBoxShadow(theme.shadow[2]?.penumbra),
+    [varNames.shadow[2].ambient]: toBoxShadow(theme.shadow[2]?.ambient),
+    [varNames.shadow[3].umbra]: toBoxShadow(theme.shadow[3]?.umbra),
+    [varNames.shadow[3].penumbra]: toBoxShadow(theme.shadow[3]?.penumbra),
+    [varNames.shadow[3].ambient]: toBoxShadow(theme.shadow[3]?.ambient),
+    [varNames.shadow[4].umbra]: toBoxShadow(theme.shadow[4]?.umbra),
+    [varNames.shadow[4].penumbra]: toBoxShadow(theme.shadow[4]?.penumbra),
+    [varNames.shadow[4].ambient]: toBoxShadow(theme.shadow[4]?.ambient),
+    [varNames.shadow[5].umbra]: toBoxShadow(theme.shadow[5]?.umbra),
+    [varNames.shadow[5].penumbra]: toBoxShadow(theme.shadow[5]?.penumbra),
+    [varNames.shadow[5].ambient]: toBoxShadow(theme.shadow[5]?.ambient)
   };
 }
-function buildSpaceThemeProperties(theme2) {
+function buildSpaceThemeProperties(theme) {
   return {
-    [varNames.space[0]]: px(theme2.space[0]),
-    [varNames.space[0.5]]: px(theme2.space[1] / 2),
-    [varNames.space[1]]: px(theme2.space[1]),
-    [varNames.space[2]]: px(theme2.space[2]),
-    [varNames.space[3]]: px(theme2.space[3]),
-    [varNames.space[4]]: px(theme2.space[4]),
-    [varNames.space[5]]: px(theme2.space[5]),
-    [varNames.space[6]]: px(theme2.space[6]),
-    [varNames.space[7]]: px(theme2.space[7]),
-    [varNames.space[8]]: px(theme2.space[8]),
-    [varNames.space[9]]: px(theme2.space[9])
+    [varNames.space[0]]: px(theme.space[0]),
+    [varNames.space[0.5]]: px(theme.space[1] / 2),
+    [varNames.space[1]]: px(theme.space[1]),
+    [varNames.space[2]]: px(theme.space[2]),
+    [varNames.space[3]]: px(theme.space[3]),
+    [varNames.space[4]]: px(theme.space[4]),
+    [varNames.space[5]]: px(theme.space[5]),
+    [varNames.space[6]]: px(theme.space[6]),
+    [varNames.space[7]]: px(theme.space[7]),
+    [varNames.space[8]]: px(theme.space[8]),
+    [varNames.space[9]]: px(theme.space[9])
   };
 }
-function buildColorThemeProperties(theme$1) {
+function buildColorThemeProperties(theme) {
   const props = {};
   for (const scheme of THEME_COLOR_SCHEMES)
-    for (const cardTone of theme.THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme$1, {
+    for (const cardTone of THEME_COLOR_CARD_TONES) {
+      Object.assign(props, buildColorAvatarThemeProperties(theme, {
         scheme,
         cardTone
-      })), Object.assign(props, buildColorCardThemeProperties(theme$1, {
+      })), Object.assign(props, buildColorCardThemeProperties(theme, {
         scheme,
         cardTone
       }));
       for (const colorVariant of THEME_COLOR_VARIANTS)
-        for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
-          const v = varNames.color[scheme][cardTone][colorVariant][elementTone], t = theme$1._tokens.color[cardTone].variant[colorVariant][elementTone], context = {
+        for (const elementTone of THEME_COLOR_STATE_TONES) {
+          const v = varNames.color[scheme][cardTone][colorVariant][elementTone], t = theme._tokens.color[cardTone].variant[colorVariant][elementTone], context = {
+            bgValue: "transparent",
             bgVar: v.bg[0],
             hue: t._hue,
             scheme
           };
           Object.assign(props, {
-            [v.bg[0]]: theme.renderColor(t.bg[0], context),
+            [v.bg[0]]: renderColor(t.bg[0], context),
             [v.bg[1]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 25%)`,
             [v.bg[2]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 50%)`,
             [v.bg[3]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 75%)`,
-            [v.bg[4]]: theme.renderColor(t.bg[4], context),
-            [v.border[0]]: theme.renderColor(t.border[0], context),
+            [v.bg[4]]: renderColor(t.bg[4], context),
+            [v.border[0]]: renderColor(t.border[0], context),
             [v.border[1]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 25%)`,
             [v.border[2]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 50%)`,
             [v.border[3]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 75%)`,
-            [v.border[4]]: theme.renderColor(t.border[4], context),
-            [v.fg[0]]: theme.renderColor(t.fg[0], context),
+            [v.border[4]]: renderColor(t.border[4], context),
+            [v.fg[0]]: renderColor(t.fg[0], context),
             [v.fg[1]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 25%)`,
             [v.fg[2]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 50%)`,
             [v.fg[3]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 75%)`,
-            [v.fg[4]]: theme.renderColor(t.fg[4], context)
+            [v.fg[4]]: renderColor(t.fg[4], context)
           });
         }
     }
   return props;
 }
-function buildColorAvatarThemeProperties(theme$1, options) {
+function buildColorAvatarThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme$1._tokens.color[cardTone], props = {};
-  for (const hue of theme.HUES) {
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], props = {};
+  for (const hue of HUES) {
     const context = {
+      bgValue: "transparent",
       bgVar: varNames.color.bg,
       hue: t.avatar[hue]._hue ?? hue,
       scheme
     };
     Object.assign(props, {
-      [v.avatar[hue].bg]: theme.renderColor(t.avatar[hue].bg, context),
-      [v.avatar[hue].fg]: theme.renderColor(t.avatar[hue].fg, context)
+      [v.avatar[hue].bg]: renderColor(t.avatar[hue].bg, context),
+      [v.avatar[hue].fg]: renderColor(t.avatar[hue].fg, context)
     });
   }
   return props;
 }
-function buildColorCardThemeProperties(theme$1, options) {
+function buildColorCardThemeProperties(theme, options) {
   const {
     scheme,
     cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme$1._tokens.color[cardTone], context = {
+  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], context = {
+    bgValue: "transparent",
     bgVar: varNames.color.bg,
     hue: t._hue,
     scheme
   };
   return {
     // backdrop
-    [v.backdrop]: theme.renderColor(t.backdrop, context),
+    [v.backdrop]: renderColor(t.backdrop, context),
     // code
-    [v.code.bg]: theme.renderColor(t.code.bg, context),
-    [v.code.fg]: theme.renderColor(t.code.fg, context),
+    [v.code.bg]: renderColor(t.code.bg, context),
+    [v.code.fg]: renderColor(t.code.fg, context),
     // code / token
-    [v.code.token.atrule]: theme.renderColor(t.code.token.atrule, context),
-    [v.code.token.attrName]: theme.renderColor(t.code.token.attrName, context),
-    [v.code.token.attrValue]: theme.renderColor(t.code.token.attrValue, context),
-    [v.code.token.attribute]: theme.renderColor(t.code.token.attribute, context),
-    [v.code.token.boolean]: theme.renderColor(t.code.token.boolean, context),
-    [v.code.token.builtin]: theme.renderColor(t.code.token.builtin, context),
-    [v.code.token.cdata]: theme.renderColor(t.code.token.cdata, context),
-    [v.code.token.char]: theme.renderColor(t.code.token.char, context),
-    [v.code.token.className]: theme.renderColor(t.code.token.className, context),
-    [v.code.token.class]: theme.renderColor(t.code.token.class, context),
-    [v.code.token.comment]: theme.renderColor(t.code.token.comment, context),
-    [v.code.token.constant]: theme.renderColor(t.code.token.constant, context),
-    [v.code.token.deleted]: theme.renderColor(t.code.token.deleted, context),
-    [v.code.token.doctype]: theme.renderColor(t.code.token.doctype, context),
-    [v.code.token.entity]: theme.renderColor(t.code.token.entity, context),
-    [v.code.token.function]: theme.renderColor(t.code.token.function, context),
-    [v.code.token.hexcode]: theme.renderColor(t.code.token.hexcode, context),
-    [v.code.token.id]: theme.renderColor(t.code.token.id, context),
-    [v.code.token.important]: theme.renderColor(t.code.token.important, context),
-    [v.code.token.inserted]: theme.renderColor(t.code.token.inserted, context),
-    [v.code.token.keyword]: theme.renderColor(t.code.token.keyword, context),
-    [v.code.token.number]: theme.renderColor(t.code.token.number, context),
-    [v.code.token.operator]: theme.renderColor(t.code.token.operator, context),
-    [v.code.token.prolog]: theme.renderColor(t.code.token.prolog, context),
-    [v.code.token.property]: theme.renderColor(t.code.token.property, context),
-    [v.code.token.pseudoClass]: theme.renderColor(t.code.token.pseudoClass, context),
-    [v.code.token.pseudoElement]: theme.renderColor(t.code.token.pseudoElement, context),
-    [v.code.token.punctuation]: theme.renderColor(t.code.token.punctuation, context),
-    [v.code.token.regex]: theme.renderColor(t.code.token.regex, context),
-    [v.code.token.selector]: theme.renderColor(t.code.token.selector, context),
-    [v.code.token.string]: theme.renderColor(t.code.token.string, context),
-    [v.code.token.symbol]: theme.renderColor(t.code.token.symbol, context),
-    [v.code.token.tag]: theme.renderColor(t.code.token.tag, context),
-    [v.code.token.unit]: theme.renderColor(t.code.token.unit, context),
-    [v.code.token.url]: theme.renderColor(t.code.token.url, context),
-    [v.code.token.variable]: theme.renderColor(t.code.token.variable, context),
+    [v.code.token.atrule]: renderColor(t.code.token.atrule, context),
+    [v.code.token.attrName]: renderColor(t.code.token.attrName, context),
+    [v.code.token.attrValue]: renderColor(t.code.token.attrValue, context),
+    [v.code.token.attribute]: renderColor(t.code.token.attribute, context),
+    [v.code.token.boolean]: renderColor(t.code.token.boolean, context),
+    [v.code.token.builtin]: renderColor(t.code.token.builtin, context),
+    [v.code.token.cdata]: renderColor(t.code.token.cdata, context),
+    [v.code.token.char]: renderColor(t.code.token.char, context),
+    [v.code.token.className]: renderColor(t.code.token.className, context),
+    [v.code.token.class]: renderColor(t.code.token.class, context),
+    [v.code.token.comment]: renderColor(t.code.token.comment, context),
+    [v.code.token.constant]: renderColor(t.code.token.constant, context),
+    [v.code.token.deleted]: renderColor(t.code.token.deleted, context),
+    [v.code.token.doctype]: renderColor(t.code.token.doctype, context),
+    [v.code.token.entity]: renderColor(t.code.token.entity, context),
+    [v.code.token.function]: renderColor(t.code.token.function, context),
+    [v.code.token.hexcode]: renderColor(t.code.token.hexcode, context),
+    [v.code.token.id]: renderColor(t.code.token.id, context),
+    [v.code.token.important]: renderColor(t.code.token.important, context),
+    [v.code.token.inserted]: renderColor(t.code.token.inserted, context),
+    [v.code.token.keyword]: renderColor(t.code.token.keyword, context),
+    [v.code.token.number]: renderColor(t.code.token.number, context),
+    [v.code.token.operator]: renderColor(t.code.token.operator, context),
+    [v.code.token.prolog]: renderColor(t.code.token.prolog, context),
+    [v.code.token.property]: renderColor(t.code.token.property, context),
+    [v.code.token.pseudoClass]: renderColor(t.code.token.pseudoClass, context),
+    [v.code.token.pseudoElement]: renderColor(t.code.token.pseudoElement, context),
+    [v.code.token.punctuation]: renderColor(t.code.token.punctuation, context),
+    [v.code.token.regex]: renderColor(t.code.token.regex, context),
+    [v.code.token.selector]: renderColor(t.code.token.selector, context),
+    [v.code.token.string]: renderColor(t.code.token.string, context),
+    [v.code.token.symbol]: renderColor(t.code.token.symbol, context),
+    [v.code.token.tag]: renderColor(t.code.token.tag, context),
+    [v.code.token.unit]: renderColor(t.code.token.unit, context),
+    [v.code.token.url]: renderColor(t.code.token.url, context),
+    [v.code.token.variable]: renderColor(t.code.token.variable, context),
     // focus ring
-    [v.focusRing]: theme.renderColor(t.focusRing, context),
+    [v.focusRing]: renderColor(t.focusRing, context),
     // link
-    [v.link.fg]: theme.renderColor(t.link.fg, context),
+    [v.link.fg]: renderColor(t.link.fg, context),
     // shadow
-    [v.shadow.outline]: theme.renderColor(t.shadow.outline, context),
-    [v.shadow.umbra]: theme.renderColor(t.shadow.umbra, context),
-    [v.shadow.penumbra]: theme.renderColor(t.shadow.penumbra, context),
-    [v.shadow.ambient]: theme.renderColor(t.shadow.ambient, context)
+    [v.shadow.outline]: renderColor(t.shadow.outline, context),
+    [v.shadow.umbra]: renderColor(t.shadow.umbra, context),
+    [v.shadow.penumbra]: renderColor(t.shadow.penumbra, context),
+    [v.shadow.ambient]: renderColor(t.shadow.ambient, context)
   };
 }
-function compileTheme(theme2) {
-  return theme2.v3 ? compileTheme_v3(theme2.v3) : theme2.v2 ? `/* v2 - not supported */
+function _compileTheme(theme) {
+  return theme.v3 ? _compileTheme_v3(theme.v3) : theme.v2 ? `/* v2 - not supported */
 ` : `/* v0 - not supported */
 `;
 }
+function _resp(prefix, prop) {
+  if (!(prop === void 0 || prop === !1))
+    return Array.isArray(prop) ? prop.map((value, index) => {
+      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
+      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+      return index === 0 ? className : `${index}:${className}`;
+    }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+}
+function _getClassNames(...classNames) {
+  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
+}
+function composeClassNames(...classNames) {
+  return unique(_getClassNames(...classNames)).join(" ") || void 0;
+}
+function unique(array) {
+  return Array.from(new Set(array));
+}
+function border(props) {
+  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
+}
+function display(props) {
+  return composeClassNames(_resp(void 0, props.display));
+}
+function flex(props) {
+  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
+}
+function flexItem(props) {
+  return composeClassNames(_resp("f", props.flex));
+}
+function font(props) {
+  return composeClassNames("font", props.weight && `font-${props.weight}`);
+}
+function gap(props) {
+  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
+}
+function grid(props) {
+  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
+}
+function gridItem(props) {
+  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
+}
+function height(props) {
+  return composeClassNames(_resp("h", props.height));
+}
+function inset(props) {
+  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
+}
+function margin(props) {
+  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
+}
+function maxWidth(props) {
+  return _resp("max-w", props.maxWidth) ?? "";
+}
+function minWidth(props) {
+  return _resp("min-w", props.minWidth) ?? "";
+}
+function overflow(props) {
+  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+}
+function padding(props) {
+  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
+}
+function pointerEvents(props) {
+  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
+}
+function position(props) {
+  return composeClassNames(_resp("position", props.position));
+}
+function radius(props) {
+  return composeClassNames(_resp("r", props.radius));
+}
+function shadow(props) {
+  return composeClassNames(_resp("shadow", props.shadow));
+}
+function textAlign(props) {
+  return composeClassNames(_resp("text-align", props.textAlign));
+}
+function scopeClassName(className) {
+  if (className !== void 0)
+    return `${PREFIX}${className.trim()}`;
+}
+function _comp(...classNames) {
+  return _getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
+}
+function textOverflow(props) {
+  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
+}
+function width(props) {
+  return _resp("w", props.width) ?? "";
+}
 function breadcrumbs() {
   return _comp("breadcrumbs");
 }
@@ -4563,11 +4558,7 @@ function box(props) {
   );
 }
 function button(props) {
-  const {
-    mode,
-    tone
-  } = props;
-  return _comp("button", variantMap[mode ?? "default"], toneMap[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
+  return _comp("button", display(props), flexItem(props), radius(props), width(props));
 }
 function buttonLoadingBox() {
   return "button-loading-box";
@@ -4661,107 +4652,109 @@ function tooltipCard() {
 function srOnly() {
   return _comp(composeClassNames("sr-only"));
 }
-exports.BREAKPOINTS = BREAKPOINTS;
-exports.PREFIX = PREFIX;
-exports._arrow = _arrow;
-exports._arrowShape = _arrowShape;
-exports._arrowStroke = _arrowStroke;
-exports._arrowStrokeMask = _arrowStrokeMask;
-exports._getClassNames = _getClassNames;
-exports._input = _input;
-exports._inputElement = _inputElement;
-exports._inputPresentation = _inputPresentation;
-exports._selectable = _selectable;
-exports._switch = _switch;
-exports._switchElement = _switchElement;
-exports._switchPresentation = _switchPresentation;
-exports._switchThumb = _switchThumb;
-exports._switchTrack = _switchTrack;
-exports.animatedSpinnerIcon = animatedSpinnerIcon;
-exports.avatar = avatar;
-exports.avatarArrow = avatarArrow;
-exports.avatarCounter = avatarCounter;
-exports.avatarImage = avatarImage;
-exports.avatarInitials = avatarInitials;
-exports.avatarStack = avatarStack;
-exports.badge = badge;
-exports.border = border;
-exports.box = box;
-exports.breadcrumbs = breadcrumbs;
-exports.button = button;
-exports.buttonLoadingBox = buttonLoadingBox;
-exports.card = card;
-exports.checkbox = checkbox;
-exports.checkboxInput = checkboxInput;
-exports.code = code;
-exports.codeSkeleton = codeSkeleton;
-exports.compilePalette = compilePalette;
-exports.compileSystem = compileSystem;
-exports.compileTheme = compileTheme;
-exports.composeClassNames = composeClassNames;
-exports.container = container;
-exports.dialog = dialog;
-exports.dialogCardRoot = dialogCardRoot;
-exports.dialogContainer = dialogContainer;
-exports.dialogContent = dialogContent;
-exports.dialogFooter = dialogFooter;
-exports.dialogHeader = dialogHeader;
-exports.dialogLayout = dialogLayout;
-exports.display = display;
-exports.flex = flex;
-exports.flexItem = flexItem;
-exports.font = font;
-exports.gap = gap;
-exports.grid = grid;
-exports.gridItem = gridItem;
-exports.heading = heading;
-exports.headingSkeleton = headingSkeleton;
-exports.height = height;
-exports.inset = inset;
-exports.isArray = isArray;
-exports.isRecord = isRecord;
-exports.kbd = kbd;
-exports.label = label;
-exports.labelSkeleton = labelSkeleton;
-exports.margin = margin;
-exports.maxWidth = maxWidth;
-exports.menu = menu;
-exports.menuDivider = menuDivider;
-exports.minWidth = minWidth;
-exports.overflow = overflow;
-exports.padding = padding;
-exports.pointerEvents = pointerEvents;
-exports.popover = popover;
-exports.popoverCard = popoverCard;
-exports.position = position;
-exports.px = px;
-exports.radio = radio;
-exports.radius = radius;
-exports.rem = rem;
-exports.scopeClassName = scopeClassName;
-exports.select = select;
-exports.selectPresentation = selectPresentation;
-exports.shadow = shadow;
-exports.skeleton = skeleton;
-exports.spinner = spinner;
-exports.srOnly = srOnly;
-exports.stack = stack;
-exports.text = text;
-exports.textAlign = textAlign;
-exports.textArea = textArea;
-exports.textInput = textInput;
-exports.textOverflow = textOverflow;
-exports.textSkeleton = textSkeleton;
-exports.toBoxShadow = toBoxShadow;
-exports.toast = toast;
-exports.toastLayer = toastLayer;
-exports.toastLoadingBar = toastLoadingBar;
-exports.toastLoadingBarMask = toastLoadingBarMask;
-exports.toastLoadingBarProgress = toastLoadingBarProgress;
-exports.tooltip = tooltip;
-exports.tooltipCard = tooltipCard;
-exports.treeItem = treeItem;
-exports.varNames = varNames;
-exports.vars = vars;
-exports.width = width;
+export {
+  BREAKPOINTS,
+  PREFIX,
+  _arrow,
+  _arrowShape,
+  _arrowStroke,
+  _arrowStrokeMask,
+  _compilePalette,
+  _compileSystem,
+  _compileTheme,
+  _getClassNames,
+  _input,
+  _inputElement,
+  _inputPresentation,
+  _selectable,
+  _switch,
+  _switchElement,
+  _switchPresentation,
+  _switchThumb,
+  _switchTrack,
+  animatedSpinnerIcon,
+  avatar,
+  avatarArrow,
+  avatarCounter,
+  avatarImage,
+  avatarInitials,
+  avatarStack,
+  badge,
+  border,
+  box,
+  breadcrumbs,
+  button,
+  buttonLoadingBox,
+  card,
+  checkbox,
+  checkboxInput,
+  code,
+  codeSkeleton,
+  composeClassNames,
+  container,
+  dialog,
+  dialogCardRoot,
+  dialogContainer,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+  display,
+  flex,
+  flexItem,
+  font,
+  gap,
+  grid,
+  gridItem,
+  heading,
+  headingSkeleton,
+  height,
+  inset,
+  isArray,
+  isRecord,
+  kbd,
+  label,
+  labelSkeleton,
+  margin,
+  maxWidth,
+  menu,
+  menuDivider,
+  minWidth,
+  overflow,
+  padding,
+  pointerEvents,
+  popover,
+  popoverCard,
+  position,
+  px,
+  radio,
+  radius,
+  rem,
+  scopeClassName,
+  select,
+  selectPresentation,
+  shadow,
+  skeleton,
+  spinner,
+  srOnly,
+  stack,
+  text,
+  textAlign,
+  textArea,
+  textInput,
+  textOverflow,
+  textSkeleton,
+  toBoxShadow,
+  toast,
+  toastLayer,
+  toastLoadingBar,
+  toastLoadingBarMask,
+  toastLoadingBarProgress,
+  tooltip,
+  tooltipCard,
+  treeItem,
+  varNames,
+  vars,
+  width
+};
 //# sourceMappingURL=css.js.map