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

package/dist/css.mjs

@@ -1,6 +1,90 @@
-import { v3_v2 } from "./_chunks-es/v3_v2.mjs";
+import { color } from "@sanity/color";
 import { HUES, TINTS, SPACE, RADIUS, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, 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 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));
+}
 const PREFIX = "s-";
+function scopeClassName(className) {
+  if (className !== void 0)
+    return `${PREFIX}${className.trim()}`;
+}
+function _comp(...classNames) {
+  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
+}
+function textOverflow(props) {
+  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
+}
+function width(props) {
+  return _resp("w", props.width) ?? "";
+}
 function compileRule(selector, props, context) {
   let css = compileProperties$1(selector, props);
   if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
@@ -32,44 +116,22 @@ function compileNestedRules(selector, props, context) {
 function toSnakeCase$1(value) {
   return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
 }
-function compilePalette(config) {
+function compilePalette() {
   const props = {
-    "--l-min": `${config.luminosity.min * 100}%`,
-    "--l-max": `${config.luminosity.max * 100}%`,
-    "--l-range": "calc(var(--l-max) - var(--l-min))",
-    "--c-min": `${config.chroma.min}`,
-    "--c-max": `${config.chroma.max}`,
-    "--c-range": "calc(var(--c-max) - var(--c-min))",
-    ...compileHues(config.hues),
-    "--black": `oklch(
-      calc(var(--l-min) + 0.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-    "--white": `oklch(
-      calc(var(--l-min) + 1.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`
+    ...compileHues(),
+    "--black": color.black.hex,
+    "--white": color.white.hex
   };
   return compileRule(":root", props, {
     keyframes: {},
     media: {}
   });
 }
-function compileHues(hues) {
+function compileHues() {
   const rules2 = {};
-  for (const hue of HUES) {
-    const {
-      c,
-      h
-    } = hues[hue];
-    rules2[`--${hue}-h`] = `${h}`, rules2[`--${hue}-c`] = `${c}`, rules2[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`, rules2[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`;
-    for (const tint of TINTS) {
-      const l_offset = parseFloat((1 - tint / 1e3).toFixed(2)), c_offset_tmp = tint / 500, c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1));
-      rules2[`--${hue}-${tint}`] = ["oklch(", `calc(var(--l-min) + ${l_offset} * var(--l-range)) `, `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `, `var(--${hue}-h)`, ")"].join("");
-    }
-  }
+  for (const hue of HUES)
+    for (const tint of TINTS)
+      rules2[`--${hue}-${tint}`] = color[hue][tint].hex;
   return rules2;
 }
 function _mergeStyles(styles) {
@@ -838,11 +900,11 @@ function buildColorCardVars(props) {
       fg: `var(${prefix.accent.fg})`
     },
     avatar: {
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [color]: {
-          bg: `var(${prefix.avatar[color].bg})`,
-          fg: `var(${prefix.avatar[color].fg})`
+        [color2]: {
+          bg: `var(${prefix.avatar[color2].bg})`,
+          fg: `var(${prefix.avatar[color2].fg})`
         }
       }), {})
     },
@@ -1086,13 +1148,13 @@ _responsiveRule(util$o, "flex-justify-flex-end", {
 _responsiveRule(util$o, "flex-justify-center", {
   justifyContent: "center"
 });
-_responsiveRule(util$o, "flex-justify-between", {
+_responsiveRule(util$o, "flex-justify-space-between", {
   justifyContent: "space-between"
 });
-_responsiveRule(util$o, "flex-justify-around", {
+_responsiveRule(util$o, "flex-justify-space-around", {
   justifyContent: "space-around"
 });
-_responsiveRule(util$o, "flex-justify-evenly", {
+_responsiveRule(util$o, "flex-justify-space-evenly", {
   justifyContent: "space-evenly"
 });
 const flexJustifyStyle = {
@@ -2138,7 +2200,7 @@ const skeletonStyle = {
   layers: {
     component
   }
-}, primitive$o = {
+}, primitive$p = {
   ".arrow": {
     position: "absolute",
     // todo: replace with vars?
@@ -2190,9 +2252,9 @@ const skeletonStyle = {
   }
 }, _arrowStyle = {
   layers: {
-    primitive: primitive$o
+    primitive: primitive$p
   }
-}, primitive$n = {
+}, primitive$o = {
   ".input": {
     position: "relative"
   },
@@ -2296,7 +2358,7 @@ const skeletonStyle = {
 };
 for (const textSize of FONT_TEXT_SIZE) {
   const source = vars.font.text.sizes[textSize];
-  primitive$n[`.input-${textSize}`] = {
+  primitive$o[`.input-${textSize}`] = {
     [varNames.input.fontSize]: source.fontSize,
     [varNames.input.lineHeight]: source.lineHeight,
     [varNames.input.letterSpacing]: source.letterSpacing,
@@ -2305,26 +2367,26 @@ for (const textSize of FONT_TEXT_SIZE) {
   };
 }
 for (const space of SPACE)
-  primitive$n[`.input-p-${space}`] = {
+  primitive$o[`.input-p-${space}`] = {
     [varNames.input.padding]: vars.space[space]
   };
 for (const space of SPACE)
-  primitive$n[`.input-g-${space}`] = {
+  primitive$o[`.input-g-${space}`] = {
     [varNames.input.gap]: vars.space[space]
   };
 const _inputStyle = {
   layers: {
-    primitive: primitive$n
+    primitive: primitive$o
   }
 }, toneMap$2 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
   positive: "positive",
   caution: "caution",
   critical: "critical"
-}, primitive$m = {
+}, primitive$n = {
   ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2389,7 +2451,7 @@ const _inputStyle = {
   }
 }, _selectableStyle = {
   layers: {
-    primitive: primitive$m
+    primitive: primitive$n
   }
 };
 function buildSelectableTones() {
@@ -2431,7 +2493,7 @@ function buildSelectableTones() {
   }
   return rules2;
 }
-const primitive$l = {
+const primitive$m = {
   ".avatar": {
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
@@ -2468,11 +2530,11 @@ const primitive$l = {
         [varNames.color.avatar.bg]: vars.color.border,
         [varNames.color.avatar.fg]: vars.color.bg
       },
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
         ...acc,
-        [`&.${color}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
+        [`&.${color2}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
         }
       }), {})
     }
@@ -2563,15 +2625,15 @@ const primitive$l = {
   }
 };
 for (const size of AVATAR_SIZE)
-  _responsiveRule(primitive$l, `avatar-${size}`, {
+  _responsiveRule(primitive$m, `avatar-${size}`, {
     [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
     [varNames.avatar.size]: vars.avatar.sizes[size].size
   });
 const avatarStyle = {
   layers: {
-    primitive: primitive$l
+    primitive: primitive$m
   }
-}, primitive$k = {
+}, primitive$l = {
   ".badge": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2579,15 +2641,15 @@ const avatarStyle = {
   }
 };
 for (const tone of THEME_COLOR_STATE_TONES)
-  primitive$k[`.badge-${tone}`] = {
+  primitive$l[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
     [varNames.color.fg]: vars.color.tinted[tone].fg[1]
   };
 const badgeStyle = {
   layers: {
-    primitive: primitive$k
+    primitive: primitive$l
   }
-}, primitive$j = {
+}, primitive$k = {
   ".box": {
     minWidth: 0,
     minHeight: 0,
@@ -2609,10 +2671,10 @@ const badgeStyle = {
   }
 }, boxStyle = {
   layers: {
-    primitive: primitive$j
+    primitive: primitive$k
   }
 }, toneMap$1 = {
-  default: "surface",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2623,7 +2685,7 @@ const badgeStyle = {
   default: "solid",
   ghost: "ghost",
   bleed: "tinted"
-}, primitive$i = {
+}, primitive$j = {
   ".button": {
     WebkitFontSmoothing: "inherit",
     appearance: "none",
@@ -2642,6 +2704,8 @@ const badgeStyle = {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
     boxShadow: "var(--button-box-shadow)",
+    alignItems: "center",
+    // 'justifyContent': 'center',
     "@nest": {
       "&::-moz-focus-inner": {
         border: 0,
@@ -2670,7 +2734,7 @@ const badgeStyle = {
 };
 for (const tone of THEME_COLOR_STATE_TONES) {
   const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$i[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
+  primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
@@ -2702,37 +2766,37 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
-  }, primitive$i[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[0],
-    [varNames.color.border]: tinted.border[1],
+  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
+    [varNames.color.bg]: tinted.bg[1],
+    [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
-    "--button-box-shadow": ["inset 0 0 0 var(--button-border-width) var(--color-border)", "inset 0 -1.5px 0 0.5px var(--color-shadow-umbra)"].join(","),
+    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
     "@nest": {
       "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[1],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.bg]: tinted.bg[2],
+        [varNames.color.border]: tinted.border[1],
         [varNames.color.fg]: tinted.fg[1]
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.bg]: tinted.bg[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.bg]: tinted.bg[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
+        [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2]
       }
     }
-  }, primitive$i[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
+  }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
     boxShadow: "none",
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
@@ -2769,11 +2833,11 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 }
 const buttonStyle = {
   layers: {
-    primitive: primitive$i
+    primitive: primitive$j
   }
 }, toneMap = {
-  transparent: "canvas",
-  default: "surface",
+  transparent: "transparent",
+  default: "default",
   neutral: "neutral",
   suggest: "suggest",
   primary: "accent",
@@ -2781,7 +2845,7 @@ const buttonStyle = {
   caution: "caution",
   critical: "critical",
   inherit: void 0
-}, primitive$h = {
+}, primitive$i = {
   ".card": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2820,7 +2884,7 @@ for (const scheme of THEME_COLOR_SCHEMES$1) {
     const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
     _assignToneProps(schemeProps, _varNames, _vars);
   }
-  primitive$h[`.card.${scheme}`] = schemeProps;
+  primitive$i[`.card.${scheme}`] = schemeProps;
 }
 for (const tone of THEME_COLOR_CARD_TONES) {
   const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
@@ -2848,11 +2912,11 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
     "--card-hairline-soft-color": vars.color.tinted.default.border[1],
     "--card-hairline-hard-color": vars.color.tinted.default.border[2]
-  }), primitive$h[`.card.${toneMap[tone]}`] = toneProps;
+  }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
 }
 const cardStyle = {
   layers: {
-    primitive: primitive$h
+    primitive: primitive$i
   }
 };
 function _assignToneProps(toneProps, _varNames, _vars) {
@@ -2928,7 +2992,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
       });
     }
 }
-const primitive$g = {
+const primitive$h = {
   ".checkbox": {
     position: "relative",
     display: "inline-block"
@@ -3058,9 +3122,9 @@ const primitive$g = {
   }
 }, checkboxStyle = {
   layers: {
-    primitive: primitive$g
+    primitive: primitive$h
   }
-}, primitive$f = {
+}, primitive$g = {
   ".code": {
     "--font-weight-regular": "var(--font-code-weight-regular)",
     "--font-weight-medium": "var(--font-code-weight-medium)",
@@ -3096,7 +3160,7 @@ const primitive$g = {
   }
 };
 for (const size of FONT_CODE_SIZE)
-  _responsiveRule(primitive$f, `code-${size}`, {
+  _responsiveRule(primitive$g, `code-${size}`, {
     "--font-size": `var(--font-code-${size}-size)`,
     "--font-line-height": `var(--font-code-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-code-${size}-letter-spacing)`,
@@ -3107,18 +3171,18 @@ for (const size of FONT_CODE_SIZE)
   });
 const codeStyle = {
   layers: {
-    primitive: primitive$f
+    primitive: primitive$g
   }
-}, primitive$e = {
+}, primitive$f = {
   ".container": {
     margin: "0 auto",
     width: "100%"
   }
 }, containerStyle = {
   layers: {
-    primitive: primitive$e
+    primitive: primitive$f
   }
-}, primitive$d = {
+}, primitive$e = {
   ".heading": {
     "--font-weight-regular": "var(--font-heading-weight-regular)",
     "--font-weight-medium": "var(--font-heading-weight-medium)",
@@ -3142,7 +3206,7 @@ const codeStyle = {
   }
 };
 for (const size of FONT_HEADING_SIZE)
-  _responsiveRule(primitive$d, `heading-${size}`, {
+  _responsiveRule(primitive$e, `heading-${size}`, {
     "--font-size": `var(--font-heading-${size}-size)`,
     "--font-line-height": `var(--font-heading-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-heading-${size}-letter-spacing)`,
@@ -3153,9 +3217,9 @@ for (const size of FONT_HEADING_SIZE)
   });
 const headingStyle = {
   layers: {
-    primitive: primitive$d
+    primitive: primitive$e
   }
-}, primitive$c = {
+}, primitive$d = {
   ".kbd": {
     // '--color-bg': 'var(--color-tinted-default-bg-1)',
     // '--color-border': 'var(--color-tinted-default-border-2)',
@@ -3172,9 +3236,9 @@ const headingStyle = {
   }
 }, kbdStyle = {
   layers: {
-    primitive: primitive$c
+    primitive: primitive$d
   }
-}, primitive$b = {
+}, primitive$c = {
   ".label": {
     "--font-weight-regular": "var(--font-label-weight-regular)",
     "--font-weight-medium": "var(--font-label-weight-medium)",
@@ -3199,7 +3263,7 @@ const headingStyle = {
   }
 };
 for (const size of FONT_LABEL_SIZE)
-  _responsiveRule(primitive$b, `label-${size}`, {
+  _responsiveRule(primitive$c, `label-${size}`, {
     "--font-size": `var(--font-label-${size}-size)`,
     "--font-line-height": `var(--font-label-${size}-line-height)`,
     "--font-letter-spacing": `var(--font-label-${size}-letter-spacing)`,
@@ -3210,13 +3274,13 @@ for (const size of FONT_LABEL_SIZE)
   });
 const labelStyle = {
   layers: {
-    primitive: primitive$b
+    primitive: primitive$c
   }
-}, primitive$a = {}, popoverStyle = {
+}, primitive$b = {}, popoverStyle = {
   layers: {
-    primitive: primitive$a
+    primitive: primitive$b
   }
-}, primitive$9 = {
+}, primitive$a = {
   ".radio": {
     position: "relative",
     "@nest": {
@@ -3322,9 +3386,9 @@ const labelStyle = {
   }
 }, radioStyle = {
   layers: {
-    primitive: primitive$9
+    primitive: primitive$a
   }
-}, primitive$8 = {
+}, primitive$9 = {
   ".select": {
     "@nest": {
       "& > select:disabled": {
@@ -3344,7 +3408,7 @@ const labelStyle = {
   }
 }, selectStyle = {
   layers: {
-    primitive: primitive$8
+    primitive: primitive$9
   }
 }, keyframes = {
   "spinner-rotate": {
@@ -3355,13 +3419,21 @@ const labelStyle = {
       transform: "rotate(360deg)"
     }
   }
-}, primitive$7 = {
+}, primitive$8 = {
   ".spinner": {},
   ".animated-spinner-icon": {
     animation: "spinner-rotate 500ms linear infinite"
   }
 }, spinnerStyle = {
   keyframes,
+  layers: {
+    primitive: primitive$8
+  }
+}, primitive$7 = {
+  ".stack": {
+    gridTemplateColumns: "minmax(0, 1fr)"
+  }
+}, stackStyle = {
   layers: {
     primitive: primitive$7
   }
@@ -3947,6 +4019,7 @@ const textStyle = {
   radioStyle,
   selectStyle,
   spinnerStyle,
+  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,
@@ -4086,7 +4159,6 @@ function compileThemeProperties(theme) {
     ...buildRadiusThemeProperties(theme),
     ...buildShadowThemeProperties(theme),
     ...buildSpaceThemeProperties(theme),
-    // ...buildColorPaletteProperties(palette),
     ...buildColorThemeProperties(theme)
   };
 }
@@ -4364,93 +4436,9 @@ function compileTheme(theme) {
 ` : `/* v0 - not supported */
 `;
 }
-function getClassNames(...classNames) {
-  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
-}
-function composeClassNames(...classNames) {
-  return unique(getClassNames(...classNames)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
-}
-function scopeClassName(className) {
-  if (className !== void 0)
-    return `${PREFIX}${className.trim()}`;
-}
-function _comp(...classNames) {
-  return getClassNames(...classNames).map(scopeClassName).join(" ") || void 0;
-}
 function breadcrumbs() {
   return _comp("breadcrumbs");
 }
-function _resp(prefix, prop) {
-  if (!(prop === void 0 || prop === !1))
-    return Array.isArray(prop) ? prop.map((value, index) => {
-      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
-      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-      return index === 0 ? className : `${index}:${className}`;
-    }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-}
-function border(props) {
-  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
-}
-function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
-}
-function flex(props) {
-  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
-}
-function flexItem(props) {
-  return composeClassNames(_resp("f", props.flex));
-}
-function font(props) {
-  return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-align", props.align));
-}
-function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
-}
-function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", props.columns), _resp("rows", props.rows));
-}
-function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
-}
-function height(props) {
-  return composeClassNames(_resp("h", props.height));
-}
-function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
-}
-function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
-}
-function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
-}
-function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
-}
-function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
-}
-function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
-}
-function position(props) {
-  return composeClassNames(_resp("position", props.position));
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
-function textOverflow(props) {
-  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-function width(props) {
-  return _resp("w", props.width) ?? "";
-}
 function dialog() {
   return _comp("dialog", inset({
     inset: 0
@@ -4592,7 +4580,7 @@ function buttonLoadingBox() {
   return "button-loading-box";
 }
 function card(props) {
-  return _comp(props.scheme, toneMap[props.tone ?? "inherit"], "card", props.checkered && "card-checkered", shadow(props));
+  return _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
 }
 function checkbox() {
   return _comp("checkbox");
@@ -4635,6 +4623,9 @@ function spinner() {
 function animatedSpinnerIcon() {
   return _comp("animated-spinner-icon");
 }
+function stack() {
+  return _comp("stack");
+}
 function _switch() {
   return _comp("switch");
 }
@@ -4748,6 +4739,7 @@ export {
   skeleton,
   spinner,
   srOnly,
+  stack,
   text,
   textArea,
   textInput,
@@ -4762,7 +4754,6 @@ export {
   tooltip,
   tooltipCard,
   treeItem,
-  v3_v2,
   varNames,
   vars,
   width