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

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

@@ -1,79 +1,6 @@
-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}`, _resp("text-align", props.align));
-}
-function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
-}
-function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
-}
-function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
-}
-function height(props) {
-  return composeClassNames(_resp("h", props.height));
-}
-function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
-}
-function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
-}
-function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
-}
-function minWidth(props) {
-  return _resp("min-w", props.minWidth) ?? "";
-}
-function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
-}
-function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
-}
-function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
-}
-function position(props) {
-  return composeClassNames(_resp("position", props.position));
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
 const BREAKPOINTS = {
   1: 360,
   2: 600,
@@ -82,19 +9,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);
 }
@@ -206,7 +120,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`,
@@ -347,15 +261,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), {})
@@ -372,7 +286,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`,
@@ -393,7 +307,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`,
@@ -414,7 +328,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`,
@@ -435,7 +349,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`,
@@ -504,19 +418,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;
   }, {})
@@ -666,7 +580,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: {
@@ -694,10 +608,10 @@ function buildColorVariantVarNames(options) {
   }
   return vars2;
 }
-function compilePalette() {
+function _compilePalette() {
   return _compileStyle({
     layers: {
-      theme: {
+      palette: {
         ":root": compilePaletteProperties()
       }
     }
@@ -705,23 +619,22 @@ 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) {
   const keyframes2 = {}, layers = {}, rules2 = {};
-  for (const s of styles)
-    if (s) {
-      Object.assign(keyframes2, s.keyframes);
-      for (const layerName in s.layers)
-        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
-      Object.assign(rules2, s.rules);
-    }
+  for (const s of styles) {
+    Object.assign(keyframes2, s.keyframes);
+    for (const layerName in s.layers)
+      layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
+    Object.assign(rules2, s.rules);
+  }
   return {
     keyframes: keyframes2,
     layers,
@@ -757,13 +670,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
@@ -885,7 +798,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
@@ -897,7 +810,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})`,
@@ -922,7 +835,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})`,
@@ -942,7 +855,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})`,
@@ -962,7 +875,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})`,
@@ -982,7 +895,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})`,
@@ -1017,19 +930,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;
   }, {})
@@ -1041,7 +954,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})`,
@@ -1150,7 +1063,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: {
@@ -1178,70 +1091,70 @@ function buildColorVariantVars(options) {
   }
   return vars2;
 }
-const util$t = {};
-_responsiveRule(util$t, "border", {
+const util$u = {};
+_responsiveRule(util$u, "border", {
   border: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-t", {
+_responsiveRule(util$u, "border-t", {
   borderTop: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-r", {
+_responsiveRule(util$u, "border-r", {
   borderRight: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-b", {
+_responsiveRule(util$u, "border-b", {
   borderBottom: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$t, "border-l", {
+_responsiveRule(util$u, "border-l", {
   borderLeft: `1px solid ${vars.color.border}`
 });
 const borderStyle = {
   layers: {
-    util: util$t
+    util: util$u
   }
-}, util$s = {};
-_responsiveRule(util$s, "block", {
+}, util$t = {};
+_responsiveRule(util$t, "block", {
   "@nest": {
     "&:not([hidden])": {
       display: "block"
     }
   }
 });
-_responsiveRule(util$s, "flex", {
+_responsiveRule(util$t, "flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "flex"
     }
   }
 });
-_responsiveRule(util$s, "grid", {
+_responsiveRule(util$t, "grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "grid"
     }
   }
 });
-_responsiveRule(util$s, "inline-block", {
+_responsiveRule(util$t, "inline-block", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-block"
     }
   }
 });
-_responsiveRule(util$s, "inline-flex", {
+_responsiveRule(util$t, "inline-flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-flex"
     }
   }
 });
-_responsiveRule(util$s, "inline-grid", {
+_responsiveRule(util$t, "inline-grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-grid"
     }
   }
 });
-_responsiveRule(util$s, "none", {
+_responsiveRule(util$t, "none", {
   "@nest": {
     "&:not([hidden])": {
       display: "none"
@@ -1250,125 +1163,125 @@ _responsiveRule(util$s, "none", {
 });
 const displayStyle = {
   layers: {
-    util: util$s
+    util: util$t
   }
-}, util$r = {};
-_responsiveRule(util$r, "flex-align-flex-start", {
+}, util$s = {};
+_responsiveRule(util$s, "flex-align-flex-start", {
   alignItems: "flex-start"
 });
-_responsiveRule(util$r, "flex-align-flex-end", {
+_responsiveRule(util$s, "flex-align-flex-end", {
   alignItems: "flex-end"
 });
-_responsiveRule(util$r, "flex-align-center", {
+_responsiveRule(util$s, "flex-align-center", {
   alignItems: "center"
 });
-_responsiveRule(util$r, "flex-align-stretch", {
+_responsiveRule(util$s, "flex-align-stretch", {
   alignItems: "stretch"
 });
-_responsiveRule(util$r, "flex-align-baseline", {
+_responsiveRule(util$s, "flex-align-baseline", {
   alignItems: "baseline"
 });
 const flexAlignStyle = {
   layers: {
-    util: util$r
+    util: util$s
   }
-}, util$q = {};
-_responsiveRule(util$q, "f-row", {
+}, util$r = {};
+_responsiveRule(util$r, "f-row", {
   flexDirection: "row"
 });
-_responsiveRule(util$q, "f-column", {
+_responsiveRule(util$r, "f-column", {
   flexDirection: "column"
 });
 const flexDirectionStyle = {
   layers: {
-    util: util$q
+    util: util$r
   }
-}, util$p = {};
-_responsiveRule(util$p, "flex-justify-flex-start", {
+}, util$q = {};
+_responsiveRule(util$q, "flex-justify-flex-start", {
   justifyContent: "flex-start"
 });
-_responsiveRule(util$p, "flex-justify-flex-end", {
+_responsiveRule(util$q, "flex-justify-flex-end", {
   justifyContent: "flex-end"
 });
-_responsiveRule(util$p, "flex-justify-center", {
+_responsiveRule(util$q, "flex-justify-center", {
   justifyContent: "center"
 });
-_responsiveRule(util$p, "flex-justify-space-between", {
+_responsiveRule(util$q, "flex-justify-space-between", {
   justifyContent: "space-between"
 });
-_responsiveRule(util$p, "flex-justify-space-around", {
+_responsiveRule(util$q, "flex-justify-space-around", {
   justifyContent: "space-around"
 });
-_responsiveRule(util$p, "flex-justify-space-evenly", {
+_responsiveRule(util$q, "flex-justify-space-evenly", {
   justifyContent: "space-evenly"
 });
 const flexJustifyStyle = {
   layers: {
-    util: util$p
+    util: util$q
   }
-}, util$o = {};
-_responsiveRule(util$o, "flex-nowrap", {
+}, util$p = {};
+_responsiveRule(util$p, "flex-nowrap", {
   flexWrap: "nowrap"
 });
-_responsiveRule(util$o, "flex-wrap", {
+_responsiveRule(util$p, "flex-wrap", {
   flexWrap: "wrap"
 });
-_responsiveRule(util$o, "flex-wrap-reverse", {
+_responsiveRule(util$p, "flex-wrap-reverse", {
   flexWrap: "wrap-reverse"
 });
 const flexWrapStyle = {
   layers: {
-    util: util$o
+    util: util$p
   }
-}, util$n = {};
-_responsiveRule(util$n, "f-none", {
+}, util$o = {};
+_responsiveRule(util$o, "f-none", {
   flex: "none"
 });
-_responsiveRule(util$n, "f-auto", {
+_responsiveRule(util$o, "f-auto", {
   flex: "auto"
 });
-_responsiveRule(util$n, "f-initial", {
+_responsiveRule(util$o, "f-initial", {
   flex: "initial"
 });
-_responsiveRule(util$n, "f-1", {
+_responsiveRule(util$o, "f-1", {
   flex: 1
 });
-_responsiveRule(util$n, "f-2", {
+_responsiveRule(util$o, "f-2", {
   flex: 2
 });
-_responsiveRule(util$n, "f-3", {
+_responsiveRule(util$o, "f-3", {
   flex: 3
 });
-_responsiveRule(util$n, "f-4", {
+_responsiveRule(util$o, "f-4", {
   flex: 4
 });
-_responsiveRule(util$n, "f-5", {
+_responsiveRule(util$o, "f-5", {
   flex: 5
 });
-_responsiveRule(util$n, "f-6", {
+_responsiveRule(util$o, "f-6", {
   flex: 6
 });
-_responsiveRule(util$n, "f-7", {
+_responsiveRule(util$o, "f-7", {
   flex: 7
 });
-_responsiveRule(util$n, "f-8", {
+_responsiveRule(util$o, "f-8", {
   flex: 8
 });
-_responsiveRule(util$n, "f-9", {
+_responsiveRule(util$o, "f-9", {
   flex: 9
 });
-_responsiveRule(util$n, "f-10", {
+_responsiveRule(util$o, "f-10", {
   flex: 10
 });
-_responsiveRule(util$n, "f-11", {
+_responsiveRule(util$o, "f-11", {
   flex: 11
 });
-_responsiveRule(util$n, "f-12", {
+_responsiveRule(util$o, "f-12", {
   flex: 12
 });
 const flexStyle = {
   layers: {
-    util: util$n
+    util: util$o
   }
 }, primitive$q = {
   ".font": {
@@ -1425,554 +1338,538 @@ const flexStyle = {
   ".font-bold": {
     "--font-weight": "var(--font-weight-bold)"
   }
-};
-_responsiveRule(primitive$q, "text-align-initial", {
-  textAlign: "initial"
-});
-_responsiveRule(primitive$q, "text-align-left", {
-  textAlign: "left"
-});
-_responsiveRule(primitive$q, "text-align-center", {
-  textAlign: "center"
-});
-_responsiveRule(primitive$q, "text-align-right", {
-  textAlign: "right"
-});
-_responsiveRule(primitive$q, "text-align-justify", {
-  textAlign: "justify"
-});
-const fontStyle = {
+}, fontStyle = {
   layers: {
     primitive: primitive$q
   }
-}, util$m = {};
-for (const space of SPACE)
-  _responsiveRule(util$m, `g-${space}`, {
+}, util$n = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$n, `g-${space}`, {
     gap: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$m, `gx-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$n, `gx-${space}`, {
     columnGap: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$m, `gy-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$n, `gy-${space}`, {
     rowGap: vars.space[space]
   });
 const gapStyle = {
   layers: {
-    util: util$m
+    util: util$n
   }
-}, util$l = {};
-_responsiveRule(util$l, "auto-cols-auto", {
+}, util$m = {};
+_responsiveRule(util$m, "auto-cols-auto", {
   gridAutoColumns: "auto"
 });
-_responsiveRule(util$l, "auto-cols-min", {
+_responsiveRule(util$m, "auto-cols-min", {
   gridAutoColumns: "min-content"
 });
-_responsiveRule(util$l, "auto-cols-max", {
+_responsiveRule(util$m, "auto-cols-max", {
   gridAutoColumns: "max-content"
 });
-_responsiveRule(util$l, "auto-cols-fr", {
+_responsiveRule(util$m, "auto-cols-fr", {
   gridAutoColumns: "minmax(0, 1fr)"
 });
 const gridAutoColumnsStyle = {
   layers: {
-    util: util$l
+    util: util$m
   }
-}, util$k = {};
-_responsiveRule(util$k, "auto-flow-row", {
+}, util$l = {};
+_responsiveRule(util$l, "auto-flow-row", {
   gridAutoFlow: "row"
 });
-_responsiveRule(util$k, "auto-flow-column", {
+_responsiveRule(util$l, "auto-flow-column", {
   gridAutoFlow: "column"
 });
-_responsiveRule(util$k, "auto-flow-row-dense", {
+_responsiveRule(util$l, "auto-flow-row-dense", {
   gridAutoFlow: "row dense"
 });
-_responsiveRule(util$k, "auto-flow-column-dense", {
+_responsiveRule(util$l, "auto-flow-column-dense", {
   gridAutoFlow: "column dense"
 });
 const gridAutoFlowStyle = {
   layers: {
-    util: util$k
+    util: util$l
   }
-}, util$j = {};
-_responsiveRule(util$j, "auto-rows-auto", {
+}, util$k = {};
+_responsiveRule(util$k, "auto-rows-auto", {
   gridAutoRows: "auto"
 });
-_responsiveRule(util$j, "auto-rows-min", {
+_responsiveRule(util$k, "auto-rows-min", {
   gridAutoRows: "min-content"
 });
-_responsiveRule(util$j, "auto-rows-max", {
+_responsiveRule(util$k, "auto-rows-max", {
   gridAutoRows: "max-content"
 });
-_responsiveRule(util$j, "auto-rows-fr", {
+_responsiveRule(util$k, "auto-rows-fr", {
   gridAutoRows: "minmax(0, 1fr)"
 });
 const gridAutoRowsStyle = {
   layers: {
-    util: util$j
+    util: util$k
   }
-}, util$i = {};
-_responsiveRule(util$i, "cols-1", {
+}, util$j = {};
+_responsiveRule(util$j, "cols-1", {
   gridTemplateColumns: "repeat(1, 1fr)"
 });
-_responsiveRule(util$i, "cols-2", {
+_responsiveRule(util$j, "cols-2", {
   gridTemplateColumns: "repeat(2, 1fr)"
 });
-_responsiveRule(util$i, "cols-3", {
+_responsiveRule(util$j, "cols-3", {
   gridTemplateColumns: "repeat(3, 1fr)"
 });
-_responsiveRule(util$i, "cols-4", {
+_responsiveRule(util$j, "cols-4", {
   gridTemplateColumns: "repeat(4, 1fr)"
 });
-_responsiveRule(util$i, "cols-5", {
+_responsiveRule(util$j, "cols-5", {
   gridTemplateColumns: "repeat(5, 1fr)"
 });
-_responsiveRule(util$i, "cols-6", {
+_responsiveRule(util$j, "cols-6", {
   gridTemplateColumns: "repeat(6, 1fr)"
 });
-_responsiveRule(util$i, "cols-7", {
+_responsiveRule(util$j, "cols-7", {
   gridTemplateColumns: "repeat(7, 1fr)"
 });
-_responsiveRule(util$i, "cols-8", {
+_responsiveRule(util$j, "cols-8", {
   gridTemplateColumns: "repeat(8, 1fr)"
 });
-_responsiveRule(util$i, "cols-9", {
+_responsiveRule(util$j, "cols-9", {
   gridTemplateColumns: "repeat(9, 1fr)"
 });
-_responsiveRule(util$i, "cols-10", {
+_responsiveRule(util$j, "cols-10", {
   gridTemplateColumns: "repeat(10, 1fr)"
 });
-_responsiveRule(util$i, "cols-12", {
+_responsiveRule(util$j, "cols-12", {
   gridTemplateColumns: "repeat(12, 1fr)"
 });
 const gridColumnsStyle = {
   layers: {
-    util: util$i
+    util: util$j
   }
-}, util$h = {};
-_responsiveRule(util$h, "rows-1", {
+}, util$i = {};
+_responsiveRule(util$i, "rows-1", {
   gridTemplateRows: "repeat(1, 1fr)"
 });
-_responsiveRule(util$h, "rows-2", {
+_responsiveRule(util$i, "rows-2", {
   gridTemplateRows: "repeat(2, 1fr)"
 });
-_responsiveRule(util$h, "rows-3", {
+_responsiveRule(util$i, "rows-3", {
   gridTemplateRows: "repeat(3, 1fr)"
 });
-_responsiveRule(util$h, "rows-4", {
+_responsiveRule(util$i, "rows-4", {
   gridTemplateRows: "repeat(4, 1fr)"
 });
-_responsiveRule(util$h, "rows-5", {
+_responsiveRule(util$i, "rows-5", {
   gridTemplateRows: "repeat(5, 1fr)"
 });
-_responsiveRule(util$h, "rows-6", {
+_responsiveRule(util$i, "rows-6", {
   gridTemplateRows: "repeat(6, 1fr)"
 });
-_responsiveRule(util$h, "rows-7", {
+_responsiveRule(util$i, "rows-7", {
   gridTemplateRows: "repeat(7, 1fr)"
 });
-_responsiveRule(util$h, "rows-8", {
+_responsiveRule(util$i, "rows-8", {
   gridTemplateRows: "repeat(8, 1fr)"
 });
-_responsiveRule(util$h, "rows-9", {
+_responsiveRule(util$i, "rows-9", {
   gridTemplateRows: "repeat(9, 1fr)"
 });
-_responsiveRule(util$h, "rows-10", {
+_responsiveRule(util$i, "rows-10", {
   gridTemplateRows: "repeat(10, 1fr)"
 });
-_responsiveRule(util$h, "rows-12", {
+_responsiveRule(util$i, "rows-12", {
   gridTemplateRows: "repeat(12, 1fr)"
 });
 const gridRowsStyle = {
   layers: {
-    util: util$h
+    util: util$i
   }
-}, util$g = {};
-_responsiveRule(util$g, "col-auto", {
+}, util$h = {};
+_responsiveRule(util$h, "col-auto", {
   gridColumn: "auto"
 });
-_responsiveRule(util$g, "col-full", {
+_responsiveRule(util$h, "col-full", {
   gridColumn: "1 / -1"
 });
-_responsiveRule(util$g, "col-1", {
+_responsiveRule(util$h, "col-1", {
   gridColumn: "span 1 / span 1"
 });
-_responsiveRule(util$g, "col-2", {
+_responsiveRule(util$h, "col-2", {
   gridColumn: "span 2 / span 2"
 });
-_responsiveRule(util$g, "col-3", {
+_responsiveRule(util$h, "col-3", {
   gridColumn: "span 3 / span 3"
 });
-_responsiveRule(util$g, "col-4", {
+_responsiveRule(util$h, "col-4", {
   gridColumn: "span 4 / span 4"
 });
-_responsiveRule(util$g, "col-5", {
+_responsiveRule(util$h, "col-5", {
   gridColumn: "span 5 / span 5"
 });
-_responsiveRule(util$g, "col-6", {
+_responsiveRule(util$h, "col-6", {
   gridColumn: "span 6 / span 6"
 });
-_responsiveRule(util$g, "col-7", {
+_responsiveRule(util$h, "col-7", {
   gridColumn: "span 7 / span 7"
 });
-_responsiveRule(util$g, "col-8", {
+_responsiveRule(util$h, "col-8", {
   gridColumn: "span 8 / span 8"
 });
-_responsiveRule(util$g, "col-9", {
+_responsiveRule(util$h, "col-9", {
   gridColumn: "span 9 / span 9"
 });
-_responsiveRule(util$g, "col-10", {
+_responsiveRule(util$h, "col-10", {
   gridColumn: "span 10 / span 10"
 });
-_responsiveRule(util$g, "col-12", {
+_responsiveRule(util$h, "col-12", {
   gridColumn: "span 12 / span 12"
 });
 const gridColumnStyle = {
   layers: {
-    util: util$g
+    util: util$h
   }
-}, util$f = {};
-_responsiveRule(util$f, "col-end-auto", {
+}, util$g = {};
+_responsiveRule(util$g, "col-end-auto", {
   gridColumnEnd: "auto"
 });
-_responsiveRule(util$f, "col-end-1", {
+_responsiveRule(util$g, "col-end-1", {
   gridColumnEnd: "1"
 });
-_responsiveRule(util$f, "col-end-2", {
+_responsiveRule(util$g, "col-end-2", {
   gridColumnEnd: "2"
 });
-_responsiveRule(util$f, "col-end-3", {
+_responsiveRule(util$g, "col-end-3", {
   gridColumnEnd: "3"
 });
-_responsiveRule(util$f, "col-end-4", {
+_responsiveRule(util$g, "col-end-4", {
   gridColumnEnd: "4"
 });
-_responsiveRule(util$f, "col-end-5", {
+_responsiveRule(util$g, "col-end-5", {
   gridColumnEnd: "5"
 });
-_responsiveRule(util$f, "col-end-6", {
+_responsiveRule(util$g, "col-end-6", {
   gridColumnEnd: "6"
 });
-_responsiveRule(util$f, "col-end-7", {
+_responsiveRule(util$g, "col-end-7", {
   gridColumnEnd: "7"
 });
-_responsiveRule(util$f, "col-end-8", {
+_responsiveRule(util$g, "col-end-8", {
   gridColumnEnd: "8"
 });
-_responsiveRule(util$f, "col-end-9", {
+_responsiveRule(util$g, "col-end-9", {
   gridColumnEnd: "9"
 });
-_responsiveRule(util$f, "col-end-10", {
+_responsiveRule(util$g, "col-end-10", {
   gridColumnEnd: "10"
 });
-_responsiveRule(util$f, "col-end-11", {
+_responsiveRule(util$g, "col-end-11", {
   gridColumnEnd: "11"
 });
-_responsiveRule(util$f, "col-end-12", {
+_responsiveRule(util$g, "col-end-12", {
   gridColumnEnd: "12"
 });
 const gridColumnEndStyle = {
   layers: {
-    util: util$f
+    util: util$g
   }
-}, util$e = {};
-_responsiveRule(util$e, "col-start-auto", {
+}, util$f = {};
+_responsiveRule(util$f, "col-start-auto", {
   gridColumnStart: "auto"
 });
-_responsiveRule(util$e, "col-start-1", {
+_responsiveRule(util$f, "col-start-1", {
   gridColumnStart: "1"
 });
-_responsiveRule(util$e, "col-start-2", {
+_responsiveRule(util$f, "col-start-2", {
   gridColumnStart: "2"
 });
-_responsiveRule(util$e, "col-start-3", {
+_responsiveRule(util$f, "col-start-3", {
   gridColumnStart: "3"
 });
-_responsiveRule(util$e, "col-start-4", {
+_responsiveRule(util$f, "col-start-4", {
   gridColumnStart: "4"
 });
-_responsiveRule(util$e, "col-start-5", {
+_responsiveRule(util$f, "col-start-5", {
   gridColumnStart: "5"
 });
-_responsiveRule(util$e, "col-start-6", {
+_responsiveRule(util$f, "col-start-6", {
   gridColumnStart: "6"
 });
-_responsiveRule(util$e, "col-start-7", {
+_responsiveRule(util$f, "col-start-7", {
   gridColumnStart: "7"
 });
-_responsiveRule(util$e, "col-start-8", {
+_responsiveRule(util$f, "col-start-8", {
   gridColumnStart: "8"
 });
-_responsiveRule(util$e, "col-start-9", {
+_responsiveRule(util$f, "col-start-9", {
   gridColumnStart: "9"
 });
-_responsiveRule(util$e, "col-start-10", {
+_responsiveRule(util$f, "col-start-10", {
   gridColumnStart: "10"
 });
-_responsiveRule(util$e, "col-start-11", {
+_responsiveRule(util$f, "col-start-11", {
   gridColumnStart: "11"
 });
-_responsiveRule(util$e, "col-start-12", {
+_responsiveRule(util$f, "col-start-12", {
   gridColumnStart: "12"
 });
 const gridColumnStartStyle = {
   layers: {
-    util: util$e
+    util: util$f
   }
-}, util$d = {};
-_responsiveRule(util$d, "row-auto", {
+}, util$e = {};
+_responsiveRule(util$e, "row-auto", {
   gridRow: "auto"
 });
-_responsiveRule(util$d, "row-full", {
+_responsiveRule(util$e, "row-full", {
   gridRow: "1 / -1"
 });
-_responsiveRule(util$d, "row-1", {
+_responsiveRule(util$e, "row-1", {
   gridRow: "span 1 / span 1"
 });
-_responsiveRule(util$d, "row-2", {
+_responsiveRule(util$e, "row-2", {
   gridRow: "span 2 / span 2"
 });
-_responsiveRule(util$d, "row-3", {
+_responsiveRule(util$e, "row-3", {
   gridRow: "span 3 / span 3"
 });
-_responsiveRule(util$d, "row-4", {
+_responsiveRule(util$e, "row-4", {
   gridRow: "span 4 / span 4"
 });
-_responsiveRule(util$d, "row-5", {
+_responsiveRule(util$e, "row-5", {
   gridRow: "span 5 / span 5"
 });
-_responsiveRule(util$d, "row-6", {
+_responsiveRule(util$e, "row-6", {
   gridRow: "span 6 / span 6"
 });
-_responsiveRule(util$d, "row-7", {
+_responsiveRule(util$e, "row-7", {
   gridRow: "span 7 / span 7"
 });
-_responsiveRule(util$d, "row-8", {
+_responsiveRule(util$e, "row-8", {
   gridRow: "span 8 / span 8"
 });
-_responsiveRule(util$d, "row-9", {
+_responsiveRule(util$e, "row-9", {
   gridRow: "span 9 / span 9"
 });
-_responsiveRule(util$d, "row-10", {
+_responsiveRule(util$e, "row-10", {
   gridRow: "span 10 / span 10"
 });
-_responsiveRule(util$d, "row-12", {
+_responsiveRule(util$e, "row-12", {
   gridRow: "span 12 / span 12"
 });
 const gridRowStyle = {
   layers: {
-    util: util$d
+    util: util$e
   }
-}, util$c = {};
-_responsiveRule(util$c, "row-end-auto", {
+}, util$d = {};
+_responsiveRule(util$d, "row-end-auto", {
   gridRowEnd: "auto"
 });
-_responsiveRule(util$c, "row-end-1", {
+_responsiveRule(util$d, "row-end-1", {
   gridRowEnd: "1"
 });
-_responsiveRule(util$c, "row-end-2", {
+_responsiveRule(util$d, "row-end-2", {
   gridRowEnd: "2"
 });
-_responsiveRule(util$c, "row-end-3", {
+_responsiveRule(util$d, "row-end-3", {
   gridRowEnd: "3"
 });
-_responsiveRule(util$c, "row-end-4", {
+_responsiveRule(util$d, "row-end-4", {
   gridRowEnd: "4"
 });
-_responsiveRule(util$c, "row-end-5", {
+_responsiveRule(util$d, "row-end-5", {
   gridRowEnd: "5"
 });
-_responsiveRule(util$c, "row-end-6", {
+_responsiveRule(util$d, "row-end-6", {
   gridRowEnd: "6"
 });
-_responsiveRule(util$c, "row-end-7", {
+_responsiveRule(util$d, "row-end-7", {
   gridRowEnd: "7"
 });
-_responsiveRule(util$c, "row-end-8", {
+_responsiveRule(util$d, "row-end-8", {
   gridRowEnd: "8"
 });
-_responsiveRule(util$c, "row-end-9", {
+_responsiveRule(util$d, "row-end-9", {
   gridRowEnd: "9"
 });
-_responsiveRule(util$c, "row-end-10", {
+_responsiveRule(util$d, "row-end-10", {
   gridRowEnd: "10"
 });
-_responsiveRule(util$c, "row-end-11", {
+_responsiveRule(util$d, "row-end-11", {
   gridRowEnd: "11"
 });
-_responsiveRule(util$c, "row-end-12", {
+_responsiveRule(util$d, "row-end-12", {
   gridRowEnd: "12"
 });
 const gridRowEndStyle = {
   layers: {
-    util: util$c
+    util: util$d
   }
-}, util$b = {};
-_responsiveRule(util$b, "row-start-auto", {
+}, util$c = {};
+_responsiveRule(util$c, "row-start-auto", {
   gridRowStart: "auto"
 });
-_responsiveRule(util$b, "row-start-1", {
+_responsiveRule(util$c, "row-start-1", {
   gridRowStart: "1"
 });
-_responsiveRule(util$b, "row-start-2", {
+_responsiveRule(util$c, "row-start-2", {
   gridRowStart: "2"
 });
-_responsiveRule(util$b, "row-start-3", {
+_responsiveRule(util$c, "row-start-3", {
   gridRowStart: "3"
 });
-_responsiveRule(util$b, "row-start-4", {
+_responsiveRule(util$c, "row-start-4", {
   gridRowStart: "4"
 });
-_responsiveRule(util$b, "row-start-5", {
+_responsiveRule(util$c, "row-start-5", {
   gridRowStart: "5"
 });
-_responsiveRule(util$b, "row-start-6", {
+_responsiveRule(util$c, "row-start-6", {
   gridRowStart: "6"
 });
-_responsiveRule(util$b, "row-start-7", {
+_responsiveRule(util$c, "row-start-7", {
   gridRowStart: "7"
 });
-_responsiveRule(util$b, "row-start-8", {
+_responsiveRule(util$c, "row-start-8", {
   gridRowStart: "8"
 });
-_responsiveRule(util$b, "row-start-9", {
+_responsiveRule(util$c, "row-start-9", {
   gridRowStart: "9"
 });
-_responsiveRule(util$b, "row-start-10", {
+_responsiveRule(util$c, "row-start-10", {
   gridRowStart: "10"
 });
-_responsiveRule(util$b, "row-start-11", {
+_responsiveRule(util$c, "row-start-11", {
   gridRowStart: "11"
 });
-_responsiveRule(util$b, "row-start-12", {
+_responsiveRule(util$c, "row-start-12", {
   gridRowStart: "12"
 });
 const gridRowStartStyle = {
   layers: {
-    util: util$b
+    util: util$c
   }
-}, util$a = {};
-_responsiveRule(util$a, "h-fill", {
+}, util$b = {};
+_responsiveRule(util$b, "h-fill", {
   height: "100%"
 });
-_responsiveRule(util$a, "h-stretch", {
+_responsiveRule(util$b, "h-stretch", {
   height: "stretch"
 });
 const heightStyle = {
   layers: {
-    util: util$a
+    util: util$b
   }
-}, util$9 = {};
-_responsiveRule(util$9, "inset-0", {
+}, util$a = {};
+_responsiveRule(util$a, "inset-0", {
   top: 0,
   left: 0,
   right: 0,
   bottom: 0
 });
-_responsiveRule(util$9, "top-0", {
+_responsiveRule(util$a, "top-0", {
   top: 0
 });
-_responsiveRule(util$9, "right-0", {
+_responsiveRule(util$a, "right-0", {
   right: 0
 });
-_responsiveRule(util$9, "bottom-0", {
+_responsiveRule(util$a, "bottom-0", {
   bottom: 0
 });
-_responsiveRule(util$9, "left-0", {
+_responsiveRule(util$a, "left-0", {
   left: 0
 });
 const insetStyle = {
   layers: {
-    util: util$9
+    util: util$a
   }
-}, util$8 = {};
-for (const space of SPACE)
-  _responsiveRule(util$8, `m-${space}`, {
+}, util$9 = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$9, `m-${space}`, {
     margin: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$8, `mx-${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)
-  _responsiveRule(util$8, `my-${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)
-  _responsiveRule(util$8, `mt-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$9, `mt-${space}`, {
     marginTop: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$8, `mr-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$9, `mr-${space}`, {
     marginRight: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$8, `mb-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$9, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$8, `ml-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$9, `ml-${space}`, {
     marginLeft: vars.space[space]
   });
 const marginStyle = {
   layers: {
-    util: util$8
+    util: util$9
   }
-}, util$7 = {};
-_responsiveRule(util$7, "max-w-0", {
+}, util$8 = {};
+_responsiveRule(util$8, "max-w-0", {
   maxWidth: vars.container[0]
 });
-_responsiveRule(util$7, "max-w-1", {
+_responsiveRule(util$8, "max-w-1", {
   maxWidth: vars.container[1]
 });
-_responsiveRule(util$7, "max-w-2", {
+_responsiveRule(util$8, "max-w-2", {
   maxWidth: vars.container[2]
 });
-_responsiveRule(util$7, "max-w-3", {
+_responsiveRule(util$8, "max-w-3", {
   maxWidth: vars.container[3]
 });
-_responsiveRule(util$7, "max-w-4", {
+_responsiveRule(util$8, "max-w-4", {
   maxWidth: vars.container[4]
 });
-_responsiveRule(util$7, "max-w-5", {
+_responsiveRule(util$8, "max-w-5", {
   maxWidth: vars.container[5]
 });
-_responsiveRule(util$7, "max-w-auto", {
+_responsiveRule(util$8, "max-w-auto", {
   maxWidth: "none"
 });
-_responsiveRule(util$7, "max-w-fill", {
+_responsiveRule(util$8, "max-w-fill", {
   maxWidth: "100%"
 });
 const maxWidthStyle = {
   layers: {
-    util: util$7
+    util: util$8
   }
-}, util$6 = {};
-_responsiveRule(util$6, "min-w-0", {
+}, util$7 = {};
+_responsiveRule(util$7, "min-w-0", {
   minWidth: "0"
 });
-_responsiveRule(util$6, "min-w-auto", {
+_responsiveRule(util$7, "min-w-auto", {
   minWidth: "auto"
 });
-_responsiveRule(util$6, "min-w-full", {
+_responsiveRule(util$7, "min-w-full", {
   minWidth: "100%"
 });
-_responsiveRule(util$6, "min-w-min", {
+_responsiveRule(util$7, "min-w-min", {
   minWidth: "min-content"
 });
-_responsiveRule(util$6, "min-w-max", {
+_responsiveRule(util$7, "min-w-max", {
   minWidth: "max-content"
 });
-_responsiveRule(util$6, "min-w-fit", {
+_responsiveRule(util$7, "min-w-fit", {
   minWidth: "fit-content"
 });
 const minWidthStyle = {
   layers: {
-    util: util$6
+    util: util$7
   }
 }, rules$2 = {
   ".outline-none": {
@@ -1982,57 +1879,57 @@ const minWidthStyle = {
   layers: {
     util: rules$2
   }
-}, util$5 = {};
-_responsiveRule(util$5, "overflow-visible", {
+}, util$6 = {};
+_responsiveRule(util$6, "overflow-visible", {
   overflow: "visible"
 });
-_responsiveRule(util$5, "overflow-hidden", {
+_responsiveRule(util$6, "overflow-hidden", {
   overflow: "hidden"
 });
-_responsiveRule(util$5, "overflow-scroll", {
+_responsiveRule(util$6, "overflow-scroll", {
   overflow: "scroll"
 });
-_responsiveRule(util$5, "overflow-auto", {
+_responsiveRule(util$6, "overflow-auto", {
   overflow: "auto"
 });
 const overflowStyle = {
   layers: {
-    util: util$5
+    util: util$6
   }
-}, util$4 = {};
-for (const space of SPACE)
-  _responsiveRule(util$4, `p-${space}`, {
+}, util$5 = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `p-${space}`, {
     padding: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$4, `px-${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)
-  _responsiveRule(util$4, `py-${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)
-  _responsiveRule(util$4, `pt-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pt-${space}`, {
     paddingTop: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$4, `pr-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pr-${space}`, {
     paddingRight: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$4, `pb-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pb-${space}`, {
     paddingBottom: vars.space[space]
   });
-for (const space of SPACE)
-  _responsiveRule(util$4, `pl-${space}`, {
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pl-${space}`, {
     paddingLeft: vars.space[space]
   });
 const paddingStyle = {
   layers: {
-    util: util$4
+    util: util$5
   }
 }, rules$1 = {
   ".pointer-events-none": {
@@ -2045,63 +1942,83 @@ const paddingStyle = {
   layers: {
     util: rules$1
   }
-}, util$3 = {};
-_responsiveRule(util$3, "position-absolute", {
+}, util$4 = {};
+_responsiveRule(util$4, "position-absolute", {
   position: "absolute"
 });
-_responsiveRule(util$3, "position-fixed", {
+_responsiveRule(util$4, "position-fixed", {
   position: "fixed"
 });
-_responsiveRule(util$3, "position-relative", {
+_responsiveRule(util$4, "position-relative", {
   position: "relative"
 });
-_responsiveRule(util$3, "position-static", {
+_responsiveRule(util$4, "position-static", {
   position: "static"
 });
-_responsiveRule(util$3, "position-sticky", {
+_responsiveRule(util$4, "position-sticky", {
   position: "sticky"
 });
 const positionStyle = {
   layers: {
-    util: util$3
+    util: util$4
   }
-}, util$2 = {};
-_responsiveRule(util$2, "r-0", {
+}, util$3 = {};
+_responsiveRule(util$3, "r-0", {
   borderRadius: vars.radius[0]
 });
-_responsiveRule(util$2, "r-1", {
+_responsiveRule(util$3, "r-1", {
   borderRadius: vars.radius[1]
 });
-_responsiveRule(util$2, "r-2", {
+_responsiveRule(util$3, "r-2", {
   borderRadius: vars.radius[2]
 });
-_responsiveRule(util$2, "r-3", {
+_responsiveRule(util$3, "r-3", {
   borderRadius: vars.radius[3]
 });
-_responsiveRule(util$2, "r-4", {
+_responsiveRule(util$3, "r-4", {
   borderRadius: vars.radius[4]
 });
-_responsiveRule(util$2, "r-5", {
+_responsiveRule(util$3, "r-5", {
   borderRadius: vars.radius[5]
 });
-_responsiveRule(util$2, "r-6", {
+_responsiveRule(util$3, "r-6", {
   borderRadius: vars.radius[6]
 });
-_responsiveRule(util$2, "r-full", {
+_responsiveRule(util$3, "r-full", {
   borderRadius: "9999px"
 });
 const radiusStyle = {
   layers: {
-    util: util$2
+    util: util$3
   }
-}, util$1 = {};
-for (const shadow2 of SHADOW)
-  shadow2 === 0 ? _responsiveRule(util$1, "shadow-0", {
+}, util$2 = {};
+for (const shadow2 of theme.SHADOW)
+  shadow2 === 0 ? _responsiveRule(util$2, "shadow-0", {
     boxShadow: "none"
-  }) : _responsiveRule(util$1, `shadow-${shadow2}`, {
+  }) : _responsiveRule(util$2, `shadow-${shadow2}`, {
     boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[shadow2].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[shadow2].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[shadow2].ambient} ${vars.color.shadow.ambient}`].join(", ")
   });
 const shadowStyle = {
+  layers: {
+    util: util$2
+  }
+}, util$1 = {};
+_responsiveRule(util$1, "text-align-initial", {
+  textAlign: "initial"
+});
+_responsiveRule(util$1, "text-align-left", {
+  textAlign: "left"
+});
+_responsiveRule(util$1, "text-align-center", {
+  textAlign: "center"
+});
+_responsiveRule(util$1, "text-align-right", {
+  textAlign: "right"
+});
+_responsiveRule(util$1, "text-align-justify", {
+  textAlign: "justify"
+});
+const textAlignStyle = {
   layers: {
     util: util$1
   }
@@ -2263,25 +2180,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,
@@ -2516,24 +2433,24 @@ const skeletonStyle = {
     }
   }
 };
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize];
-  primitive$o[`.input-${textSize}`] = {
+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,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
     [varNames.input.ascenderHeight]: source.ascenderHeight,
     [varNames.input.descenderHeight]: source.descenderHeight
-  };
+  });
 }
-for (const space of SPACE)
-  primitive$o[`.input-p-${space}`] = {
+for (const space of theme.SPACE)
+  _responsiveRule(primitive$o, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space]
-  };
-for (const space of SPACE)
-  primitive$o[`.input-g-${space}`] = {
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(primitive$o, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space]
-  };
+  });
 const _inputStyle = {
   layers: {
     primitive: primitive$o
@@ -2608,7 +2525,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],
@@ -2679,7 +2596,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,
@@ -2773,7 +2690,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
@@ -2789,7 +2706,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]
@@ -2803,7 +2720,10 @@ const badgeStyle = {
     // todo: move to aspects
     minHeight: 0,
     "@nest": {
-      "&:is(ul), &:is(ol)": {
+      "iframe&": {
+        border: "none"
+      },
+      "ul&, ol&": {
         listStyle: "none"
       },
       "&.muted": {
@@ -2822,18 +2742,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",
@@ -2881,11 +2789,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],
@@ -2894,6 +2804,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]
@@ -2901,6 +2813,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]
@@ -2908,6 +2822,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]
@@ -2931,25 +2847,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],
@@ -2957,7 +2878,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],
@@ -2982,7 +2905,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],
@@ -3068,6 +2991,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],
@@ -3104,41 +3032,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,
@@ -3173,7 +3087,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,
@@ -3223,7 +3137,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],
@@ -3411,7 +3325,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)`,
@@ -3457,7 +3371,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)`,
@@ -3473,11 +3387,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": {
@@ -3514,7 +3425,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)`,
@@ -3794,15 +3705,11 @@ const labelStyle = {
       }
     }
   },
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
   ".text-muted": {
     color: "var(--color-muted-fg)"
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
   }
 };
-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)`,
@@ -3859,126 +3766,7 @@ const textStyle = {
       }
     }
   },
-  ".text-input-presentation": {
-    // position: 'absolute',
-    // top: 0,
-    // left: 0,
-    // right: 0,
-    // bottom: 0,
-    // display: 'block',
-    // pointerEvents: 'none',
-    // zIndex: 0,
-    // backgroundColor: 'var(--input-bg-color)',
-    // 'boxShadow': 'var(--input-box-shadow)',
-    // '--input-border-color': 'var(--color-input-default-enabled-border)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  }
+  ".text-input-presentation": {}
 }, textInputStyle = {
   layers: {
     primitive: primitive$3
@@ -4140,6 +3928,7 @@ const textStyle = {
   {
     // define order of layers
     layers: {
+      palette: {},
       theme: {},
       base: {},
       util: {},
@@ -4179,6 +3968,7 @@ const textStyle = {
   positionStyle,
   radiusStyle,
   shadowStyle,
+  textAlignStyle,
   textOverflowStyle,
   widthStyle,
   // utils
@@ -4219,69 +4009,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,
@@ -4289,14 +4080,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,
@@ -4304,14 +4095,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,
@@ -4319,14 +4110,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,
@@ -4334,208 +4125,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");
 }
@@ -4670,15 +4554,12 @@ function box(props) {
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(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";
@@ -4701,13 +4582,17 @@ function container(props) {
   }));
 }
 function heading(props) {
-  return _comp("block", "heading", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size), flexItem(props));
+  return _comp("block", "heading", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size), flexItem(props), textAlign({
+    textAlign: props.align
+  }));
 }
 function kbd(props) {
   return _comp("kbd", radius(props));
 }
 function label(props) {
-  return _comp("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
+  return _comp("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size), textAlign({
+    textAlign: props.align
+  }));
 }
 function popover() {
   return _comp("popover");
@@ -4749,7 +4634,9 @@ function _switchTrack() {
   return _comp("switch-track");
 }
 function text(props) {
-  return _comp("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
+  return _comp("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size), textAlign({
+    textAlign: props.align
+  }));
 }
 function textArea(props) {
   return composeClassNames(_comp("text-area"), _input(props));
@@ -4766,108 +4653,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,
-  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