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

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

@@ -1,83 +1,8 @@
-import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
-import { SPACE, SHADOW, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, THEME_COLOR_CARD_TONES, AVATAR_SIZE, THEME_COLOR_STATE_TONES, HUES, TINTS, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_SCHEMES as THEME_COLOR_SCHEMES$1, renderColor } from "@sanity/ui/theme";
-function _resp(prefix, prop) {
-  if (!(prop === void 0 || prop === !1))
-    return Array.isArray(prop) ? prop.map((value, index) => {
-      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));
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
 const BREAKPOINTS = {
+  0: 0,
   1: 360,
   2: 600,
   3: 900,
@@ -85,19 +10,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);
 }
@@ -209,7 +121,7 @@ const varNames = {
       width: "--avatar-focus-ring-width"
     },
     size: "--avatar-size",
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
+    sizes: theme.AVATAR_SIZE.reduce((acc, size) => ({
       ...acc,
       [size]: {
         distance: `--avatar-${size}-distance`,
@@ -350,15 +262,15 @@ const varNames = {
       variant: "tinted"
     }),
     // tone scopes
-    ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    ...theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       tone
     }), acc), {}),
     // scheme scopes
-    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    dark: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       scheme: "dark",
       tone
     }), acc), {}),
-    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
+    light: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCardVarNames({
       scheme: "light",
       tone
     }), acc), {})
@@ -375,7 +287,7 @@ const varNames = {
     code: {
       family: "--font-code-family",
       featureSettings: "--font-code-feature-settings",
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-code-${size}-size`,
@@ -396,7 +308,7 @@ const varNames = {
     heading: {
       family: "--font-heading-family",
       featureSettings: "--font-heading-feature-settings",
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-heading-${size}-size`,
@@ -417,7 +329,7 @@ const varNames = {
     label: {
       family: "--font-label-family",
       featureSettings: "--font-label-feature-settings",
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-label-${size}-size`,
@@ -438,7 +350,7 @@ const varNames = {
     text: {
       family: "--font-text-family",
       featureSettings: "--font-text-feature-settings",
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `--font-text-${size}-size`,
@@ -507,19 +419,19 @@ const varNames = {
     gap: "--input-gap",
     padding: "--input-padding"
   },
-  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
+  shadow: Object.fromEntries(theme.SHADOW.map((shadow2) => [shadow2, {
     umbra: `--shadow-${shadow2}-umbra`,
     penumbra: `--shadow-${shadow2}-penumbra`,
     ambient: `--shadow-${shadow2}-ambient`
   }])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
+  space: Object.fromEntries(theme.SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`])),
   // color
   black: "--black",
   white: "--white",
-  ...COLOR_HUES.reduce((acc, hue) => {
+  ...color.COLOR_HUES.reduce((acc, hue) => {
     const tints = {};
-    for (const tint of COLOR_TINTS)
+    for (const tint of color.COLOR_TINTS)
       tints[tint] = `--${hue}-${tint}`;
     return acc[hue] = tints, acc;
   }, {})
@@ -669,7 +581,7 @@ function buildColorVariantVarNames(options) {
       4: `${prefix}-fg-4`
     }
   };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
+  for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
     const _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
@@ -697,10 +609,10 @@ function buildColorVariantVarNames(options) {
   }
   return vars2;
 }
-function compilePalette() {
+function _compilePalette() {
   return _compileStyle({
     layers: {
-      theme: {
+      palette: {
         ":root": compilePaletteProperties()
       }
     }
@@ -708,12 +620,12 @@ function compilePalette() {
 }
 function compilePaletteProperties() {
   const rules2 = {
-    [varNames.black]: color.black.hex,
-    [varNames.white]: color.white.hex
+    [varNames.black]: color.color.black.hex,
+    [varNames.white]: color.color.white.hex
   };
-  for (const hue of HUES)
-    for (const tint of TINTS)
-      rules2[varNames[hue][tint]] = color[hue][tint].hex;
+  for (const hue of theme.HUES)
+    for (const tint of theme.TINTS)
+      rules2[varNames[hue][tint]] = color.color[hue][tint].hex;
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -759,13 +671,13 @@ function _responsiveRule(rules2, _name, properties) {
   };
 }
 const darkColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
+for (const tone of theme.THEME_COLOR_CARD_TONES)
   darkColorVars[tone] = buildColorCardVars({
     scheme: "dark",
     tone
   });
 const lightColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
+for (const tone of theme.THEME_COLOR_CARD_TONES)
   lightColorVars[tone] = buildColorCardVars({
     scheme: "light",
     tone
@@ -887,7 +799,7 @@ const colorVars = {
   tinted: buildColorVariantVars({
     variant: "tinted"
   }),
-  ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+  ...theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
     ...acc,
     [tone]: buildColorCardVars({
       tone
@@ -899,7 +811,7 @@ const colorVars = {
   avatar: {
     distance: `var(${varNames.avatar.distance})`,
     size: `var(${varNames.avatar.size})`,
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
+    sizes: theme.AVATAR_SIZE.reduce((acc, size) => ({
       ...acc,
       [size]: {
         size: `var(${varNames.avatar.sizes[size].size})`,
@@ -924,7 +836,7 @@ const colorVars = {
   font: {
     code: {
       family: `var(${varNames.font.code.family})`,
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.code.sizes[size].fontSize})`,
@@ -944,7 +856,7 @@ const colorVars = {
     },
     heading: {
       family: `var(${varNames.font.heading.family})`,
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.heading.sizes[size].fontSize})`,
@@ -964,7 +876,7 @@ const colorVars = {
     },
     label: {
       family: `var(${varNames.font.label.family})`,
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.label.sizes[size].fontSize})`,
@@ -984,7 +896,7 @@ const colorVars = {
     },
     text: {
       family: `var(${varNames.font.text.family})`,
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
+      sizes: theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
         ...acc,
         [size]: {
           fontSize: `var(${varNames.font.text.sizes[size].fontSize})`,
@@ -1019,19 +931,19 @@ const colorVars = {
       }
     }
   },
-  radius: Object.fromEntries(RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  shadow: Object.fromEntries(SHADOW.map((shadow2) => [shadow2, {
+  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
+  shadow: Object.fromEntries(theme.SHADOW.map((shadow2) => [shadow2, {
     umbra: `var(${varNames.shadow[shadow2].umbra})`,
     penumbra: `var(${varNames.shadow[shadow2].penumbra})`,
     ambient: `var(${varNames.shadow[shadow2].ambient})`
   }])),
-  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
+  space: Object.fromEntries(theme.SPACE.map((space) => [space, `var(${varNames.space[space]})`])),
   // color
   black: `var(${varNames.black})`,
   white: `var(${varNames.white})`,
-  ...COLOR_HUES.reduce((acc, hue) => {
+  ...color.COLOR_HUES.reduce((acc, hue) => {
     const tints = {};
-    for (const tint of COLOR_TINTS)
+    for (const tint of color.COLOR_TINTS)
       tints[tint] = `var(--${hue}-${tint})`;
     return acc[hue] = tints, acc;
   }, {})
@@ -1043,7 +955,7 @@ function buildColorCardVars(props) {
   } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
   return {
     avatar: {
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
         [color2]: {
           bg: `var(${prefix.avatar[color2].bg})`,
@@ -1152,7 +1064,7 @@ function buildColorVariantVars(options) {
       4: `var(${_prefix}-fg-4)`
     }
   };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
+  for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
     const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
     vars2[elementTone] = {
       bg: {
@@ -1432,15 +1344,15 @@ const flexStyle = {
     primitive: primitive$q
   }
 }, util$n = {};
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$n, `g-${space}`, {
     gap: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$n, `gx-${space}`, {
     columnGap: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$n, `gy-${space}`, {
     rowGap: vars.space[space]
   });
@@ -1874,33 +1786,33 @@ const insetStyle = {
     util: util$a
   }
 }, util$9 = {};
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `m-${space}`, {
     margin: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `mt-${space}`, {
     marginTop: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `mr-${space}`, {
     marginRight: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$9, `ml-${space}`, {
     marginLeft: vars.space[space]
   });
@@ -1986,33 +1898,33 @@ const overflowStyle = {
     util: util$6
   }
 }, util$5 = {};
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `p-${space}`, {
     padding: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `px-${space}`, {
     paddingLeft: vars.space[space],
     paddingRight: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `py-${space}`, {
     paddingTop: vars.space[space],
     paddingBottom: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `pt-${space}`, {
     paddingTop: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `pr-${space}`, {
     paddingRight: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `pb-${space}`, {
     paddingBottom: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(util$5, `pl-${space}`, {
     paddingLeft: vars.space[space]
   });
@@ -2081,7 +1993,7 @@ const radiusStyle = {
     util: util$3
   }
 }, util$2 = {};
-for (const shadow2 of SHADOW)
+for (const shadow2 of theme.SHADOW)
   shadow2 === 0 ? _responsiveRule(util$2, "shadow-0", {
     boxShadow: "none"
   }) : _responsiveRule(util$2, `shadow-${shadow2}`, {
@@ -2269,25 +2181,25 @@ const widthStyle = {
     height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
   }
 };
-for (const size of FONT_CODE_SIZE)
+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 FONT_HEADING_SIZE)
+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 FONT_LABEL_SIZE)
+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 FONT_TEXT_SIZE)
+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,
@@ -2522,7 +2434,7 @@ const skeletonStyle = {
     }
   }
 };
-for (const size of FONT_TEXT_SIZE) {
+for (const size of theme.FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[size];
   _responsiveRule(primitive$o, `input-${size}`, {
     [varNames.input.fontSize]: source.fontSize,
@@ -2532,11 +2444,11 @@ for (const size of FONT_TEXT_SIZE) {
     [varNames.input.descenderHeight]: source.descenderHeight
   });
 }
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(primitive$o, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space]
   });
-for (const space of SPACE)
+for (const space of theme.SPACE)
   _responsiveRule(primitive$o, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space]
   });
@@ -2614,7 +2526,7 @@ const _inputStyle = {
 };
 function buildSelectableTones() {
   const rules2 = {};
-  for (const tone of THEME_COLOR_STATE_TONES) {
+  for (const tone of theme.THEME_COLOR_STATE_TONES) {
     const target = varNames.color, source = vars.color;
     rules2[`&.${tone}`] = {
       [target.tinted.bg[0]]: source.tinted[tone].bg[0],
@@ -2685,7 +2597,7 @@ const primitive$m = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
+      ...theme.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
         [`&.${color2}`]: {
           [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
@@ -2779,7 +2691,7 @@ const primitive$m = {
     }
   }
 };
-for (const size of AVATAR_SIZE)
+for (const size of theme.AVATAR_SIZE)
   _responsiveRule(primitive$m, `avatar-${size}`, {
     [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
     [varNames.avatar.size]: vars.avatar.sizes[size].size
@@ -2795,7 +2707,7 @@ const avatarStyle = {
     verticalAlign: "top"
   }
 };
-for (const tone of THEME_COLOR_STATE_TONES)
+for (const tone of theme.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]
@@ -2831,18 +2743,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",
@@ -2890,11 +2790,13 @@ const badgeStyle = {
     opacity: 0.8
   }
 };
-for (const tone of THEME_COLOR_STATE_TONES) {
+for (const tone of theme.THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap[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],
@@ -2903,6 +2805,8 @@ for (const tone of 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]
@@ -2910,6 +2814,8 @@ for (const tone of 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]
@@ -2917,6 +2823,8 @@ for (const tone of 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]
@@ -2940,25 +2848,30 @@ for (const tone of 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],
@@ -2966,7 +2879,9 @@ for (const tone of 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],
@@ -2991,7 +2906,7 @@ for (const tone of 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],
@@ -3077,6 +2992,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],
@@ -3113,41 +3033,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_COLOR_SCHEMES$1) {
+for (const scheme of theme.THEME_COLOR_SCHEMES) {
   const schemeProps = {
     colorScheme: scheme
   };
-  for (const tone of THEME_COLOR_CARD_TONES) {
+  for (const tone of theme.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_COLOR_CARD_TONES) {
+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,
@@ -3182,7 +3088,7 @@ const cardStyle = {
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
-  for (const hue of THEME_COLOR_AVATAR_COLORS)
+  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,
@@ -3232,7 +3138,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     [_varNames.shadow.ambient]: _vars.shadow.ambient
   });
   for (const variant of ["solid", "tinted"])
-    for (const elementTone of THEME_COLOR_STATE_TONES) {
+    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],
@@ -3420,7 +3326,7 @@ const primitive$h = {
     }
   }
 };
-for (const size of FONT_CODE_SIZE)
+for (const size of theme.FONT_CODE_SIZE)
   _responsiveRule(primitive$g, `code-${size}`, {
     "--font-size": `var(--font-code-${size}-size)`,
     "--font-line-height": `var(--font-code-${size}-line-height)`,
@@ -3466,7 +3372,7 @@ const codeStyle = {
     "--color-fg": "var(--color-tinted-default-fg-4)"
   }
 };
-for (const size of FONT_HEADING_SIZE)
+for (const size of theme.FONT_HEADING_SIZE)
   _responsiveRule(primitive$e, `heading-${size}`, {
     "--font-size": `var(--font-heading-${size}-size)`,
     "--font-line-height": `var(--font-heading-${size}-line-height)`,
@@ -3482,11 +3388,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": {
@@ -3523,7 +3426,7 @@ const headingStyle = {
     "--color-fg": "var(--color-muted-fg)"
   }
 };
-for (const size of FONT_LABEL_SIZE)
+for (const size of theme.FONT_LABEL_SIZE)
   _responsiveRule(primitive$c, `label-${size}`, {
     "--font-size": `var(--font-label-${size}-size)`,
     "--font-line-height": `var(--font-label-${size}-line-height)`,
@@ -3807,7 +3710,7 @@ const labelStyle = {
     color: "var(--color-muted-fg)"
   }
 };
-for (const size of FONT_TEXT_SIZE)
+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)`,
@@ -4026,6 +3929,7 @@ const textStyle = {
   {
     // define order of layers
     layers: {
+      palette: {},
       theme: {},
       base: {},
       util: {},
@@ -4106,69 +4010,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(theme) {
+function _compileTheme_v3(theme2) {
   return _compileStyle({
     layers: {
       theme: {
-        ":root": compileThemeProperties(theme)
+        ":root": compileThemeProperties(theme2)
       }
     }
   });
 }
-function compileThemeProperties(theme) {
+function compileThemeProperties(theme2) {
   return {
-    ...buildAvatarThemeProperties(theme),
-    ...buildButtonThemeProperties(theme),
-    [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)
+    ...buildAvatarThemeProperties(theme2),
+    ...buildButtonThemeProperties(theme2),
+    // card
+    [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)
   };
 }
-function buildAvatarThemeProperties(theme) {
+function buildAvatarThemeProperties(theme2) {
   return {
-    [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)
+    [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)
   };
 }
-function buildButtonThemeProperties(theme) {
+function buildButtonThemeProperties(theme2) {
   return {
-    [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)
+    [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)
   };
 }
-function buildContainerThemeProperties(theme) {
+function buildContainerThemeProperties(theme2) {
   return {
-    [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])
+    [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])
   };
 }
-function buildFontCodeThemeProperties(theme) {
-  const v = varNames.font.code, t = theme.font.code, props = {
+function buildFontCodeThemeProperties(theme$1) {
+  const v = varNames.font.code, t = theme$1.font.code, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings || "normal",
     [v.weights.regular]: t.weights.regular,
@@ -4176,14 +4081,14 @@ function buildFontCodeThemeProperties(theme) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_CODE_SIZE) {
-    const _v = varNames.font.code.sizes[size], _t = theme.font.code.sizes[size];
+  for (const size of theme.FONT_CODE_SIZE) {
+    const _v = varNames.font.code.sizes[size], _t = theme$1.font.code.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontHeadingThemeProperties(theme) {
-  const v = varNames.font.heading, t = theme.font.heading, props = {
+function buildFontHeadingThemeProperties(theme$1) {
+  const v = varNames.font.heading, t = theme$1.font.heading, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4191,14 +4096,14 @@ function buildFontHeadingThemeProperties(theme) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_HEADING_SIZE) {
+  for (const size of theme.FONT_HEADING_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontLabelThemeProperties(theme) {
-  const v = varNames.font.label, t = theme.font.label, props = {
+function buildFontLabelThemeProperties(theme$1) {
+  const v = varNames.font.label, t = theme$1.font.label, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4206,14 +4111,14 @@ function buildFontLabelThemeProperties(theme) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_LABEL_SIZE) {
+  for (const size of theme.FONT_LABEL_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildFontTextThemeProperties(theme) {
-  const v = varNames.font.text, t = theme.font.text, props = {
+function buildFontTextThemeProperties(theme$1) {
+  const v = varNames.font.text, t = theme$1.font.text, props = {
     [v.family]: t.family,
     [v.featureSettings]: t.featureSettings,
     [v.weights.regular]: t.weights.regular,
@@ -4221,208 +4126,301 @@ function buildFontTextThemeProperties(theme) {
     [v.weights.semibold]: t.weights.semibold,
     [v.weights.bold]: t.weights.bold
   };
-  for (const size of FONT_TEXT_SIZE) {
+  for (const size of theme.FONT_TEXT_SIZE) {
     const _v = v.sizes[size], _t = t.sizes[size];
     props[_v.fontSize] = rem(_t.fontSize), props[_v.lineHeight] = rem(_t.lineHeight), props[_v.ascenderHeight] = rem(_t.ascenderHeight), props[_v.descenderHeight] = rem(_t.descenderHeight), props[_v.letterSpacing] = rem(_t.letterSpacing), props[_v.iconSize] = rem(_t.iconSize);
   }
   return props;
 }
-function buildInputThemeProperties(theme) {
+function buildInputThemeProperties(theme2) {
   return {
-    [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)
+    [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)
   };
 }
-function buildRadiusThemeProperties(theme) {
+function buildRadiusThemeProperties(theme2) {
   return {
-    [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])
+    [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])
   };
 }
-function buildShadowThemeProperties(theme) {
+function buildShadowThemeProperties(theme2) {
   return {
-    [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)
+    [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)
   };
 }
-function buildSpaceThemeProperties(theme) {
+function buildSpaceThemeProperties(theme2) {
   return {
-    [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])
+    [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])
   };
 }
-function buildColorThemeProperties(theme) {
+function buildColorThemeProperties(theme$1) {
   const props = {};
   for (const scheme of THEME_COLOR_SCHEMES)
-    for (const cardTone of THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme, {
+    for (const cardTone of theme.THEME_COLOR_CARD_TONES) {
+      Object.assign(props, buildColorAvatarThemeProperties(theme$1, {
         scheme,
         cardTone
-      })), Object.assign(props, buildColorCardThemeProperties(theme, {
+      })), Object.assign(props, buildColorCardThemeProperties(theme$1, {
         scheme,
         cardTone
       }));
       for (const colorVariant of THEME_COLOR_VARIANTS)
-        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 = {
+        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 = {
+            bgValue: "transparent",
             bgVar: v.bg[0],
             hue: t._hue,
             scheme
           };
           Object.assign(props, {
-            [v.bg[0]]: renderColor(t.bg[0], context),
+            [v.bg[0]]: theme.renderColor(t.bg[0], context),
             [v.bg[1]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 25%)`,
             [v.bg[2]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 50%)`,
             [v.bg[3]]: `color-mix(in srgb, var(${v.bg[0]}), var(${v.bg[4]}) 75%)`,
-            [v.bg[4]]: renderColor(t.bg[4], context),
-            [v.border[0]]: renderColor(t.border[0], context),
+            [v.bg[4]]: theme.renderColor(t.bg[4], context),
+            [v.border[0]]: theme.renderColor(t.border[0], context),
             [v.border[1]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 25%)`,
             [v.border[2]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 50%)`,
             [v.border[3]]: `color-mix(in srgb, var(${v.border[0]}), var(${v.border[4]}) 75%)`,
-            [v.border[4]]: renderColor(t.border[4], context),
-            [v.fg[0]]: renderColor(t.fg[0], context),
+            [v.border[4]]: theme.renderColor(t.border[4], context),
+            [v.fg[0]]: theme.renderColor(t.fg[0], context),
             [v.fg[1]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 25%)`,
             [v.fg[2]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 50%)`,
             [v.fg[3]]: `color-mix(in srgb, var(${v.fg[0]}), var(${v.fg[4]}) 75%)`,
-            [v.fg[4]]: renderColor(t.fg[4], context)
+            [v.fg[4]]: theme.renderColor(t.fg[4], context)
           });
         }
     }
   return props;
 }
-function buildColorAvatarThemeProperties(theme, options) {
+function buildColorAvatarThemeProperties(theme$1, options) {
   const {
     scheme,
     cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], props = {};
-  for (const hue of HUES) {
+  } = options, v = varNames.color[scheme][cardTone], t = theme$1._tokens.color[cardTone], props = {};
+  for (const hue of theme.HUES) {
     const context = {
+      bgValue: "transparent",
       bgVar: varNames.color.bg,
       hue: t.avatar[hue]._hue ?? hue,
       scheme
     };
     Object.assign(props, {
-      [v.avatar[hue].bg]: renderColor(t.avatar[hue].bg, context),
-      [v.avatar[hue].fg]: renderColor(t.avatar[hue].fg, context)
+      [v.avatar[hue].bg]: theme.renderColor(t.avatar[hue].bg, context),
+      [v.avatar[hue].fg]: theme.renderColor(t.avatar[hue].fg, context)
     });
   }
   return props;
 }
-function buildColorCardThemeProperties(theme, options) {
+function buildColorCardThemeProperties(theme$1, options) {
   const {
     scheme,
     cardTone
-  } = options, v = varNames.color[scheme][cardTone], t = theme._tokens.color[cardTone], context = {
+  } = options, v = varNames.color[scheme][cardTone], t = theme$1._tokens.color[cardTone], context = {
+    bgValue: "transparent",
     bgVar: varNames.color.bg,
     hue: t._hue,
     scheme
   };
   return {
     // backdrop
-    [v.backdrop]: renderColor(t.backdrop, context),
+    [v.backdrop]: theme.renderColor(t.backdrop, context),
     // code
-    [v.code.bg]: renderColor(t.code.bg, context),
-    [v.code.fg]: renderColor(t.code.fg, context),
+    [v.code.bg]: theme.renderColor(t.code.bg, context),
+    [v.code.fg]: theme.renderColor(t.code.fg, context),
     // code / token
-    [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),
+    [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),
     // focus ring
-    [v.focusRing]: renderColor(t.focusRing, context),
+    [v.focusRing]: theme.renderColor(t.focusRing, context),
     // link
-    [v.link.fg]: renderColor(t.link.fg, context),
+    [v.link.fg]: theme.renderColor(t.link.fg, context),
     // shadow
-    [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)
+    [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)
   };
 }
-function compileTheme(theme) {
-  return theme.v3 ? compileTheme_v3(theme.v3) : theme.v2 ? `/* v2 - not supported */
+function _compileTheme(theme2) {
+  return theme2.v3 ? _compileTheme_v3(theme2.v3) : theme2.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");
 }
@@ -4562,11 +4560,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";
@@ -4660,109 +4654,107 @@ function tooltipCard() {
 function srOnly() {
   return _comp(composeClassNames("sr-only"));
 }
-export {
-  BREAKPOINTS,
-  PREFIX,
-  _arrow,
-  _arrowShape,
-  _arrowStroke,
-  _arrowStrokeMask,
-  _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,
-  compilePalette,
-  compileSystem,
-  compileTheme,
-  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.mjs.map
+exports.BREAKPOINTS = BREAKPOINTS;
+exports.PREFIX = PREFIX;
+exports._arrow = _arrow;
+exports._arrowShape = _arrowShape;
+exports._arrowStroke = _arrowStroke;
+exports._arrowStrokeMask = _arrowStrokeMask;
+exports._compilePalette = _compilePalette;
+exports._compileSystem = _compileSystem;
+exports._compileTheme = _compileTheme;
+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.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;
+//# sourceMappingURL=css.cjs.map