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

package/dist/css.mjs

@@ -1,7 +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"])
@@ -1065,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 = {
@@ -2117,7 +2200,7 @@ const skeletonStyle = {
   layers: {
     component
   }
-}, primitive$o = {
+}, primitive$p = {
   ".arrow": {
     position: "absolute",
     // todo: replace with vars?
@@ -2169,9 +2252,9 @@ const skeletonStyle = {
   }
 }, _arrowStyle = {
   layers: {
-    primitive: primitive$o
+    primitive: primitive$p
   }
-}, primitive$n = {
+}, primitive$o = {
   ".input": {
     position: "relative"
   },
@@ -2275,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,
@@ -2284,16 +2367,16 @@ 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: "default",
@@ -2303,7 +2386,7 @@ const _inputStyle = {
   positive: "positive",
   caution: "caution",
   critical: "critical"
-}, primitive$m = {
+}, primitive$n = {
   ".selectable": {
     backgroundColor: vars.color.bg,
     color: vars.color.fg,
@@ -2368,7 +2451,7 @@ const _inputStyle = {
   }
 }, _selectableStyle = {
   layers: {
-    primitive: primitive$m
+    primitive: primitive$n
   }
 };
 function buildSelectableTones() {
@@ -2410,7 +2493,7 @@ function buildSelectableTones() {
   }
   return rules2;
 }
-const primitive$l = {
+const primitive$m = {
   ".avatar": {
     backgroundColor: vars.color.avatar.bg,
     position: "relative",
@@ -2542,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,
@@ -2558,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,
@@ -2588,7 +2671,7 @@ const badgeStyle = {
   }
 }, boxStyle = {
   layers: {
-    primitive: primitive$j
+    primitive: primitive$k
   }
 }, toneMap$1 = {
   default: "default",
@@ -2602,7 +2685,7 @@ const badgeStyle = {
   default: "solid",
   ghost: "ghost",
   bleed: "tinted"
-}, primitive$i = {
+}, primitive$j = {
   ".button": {
     WebkitFontSmoothing: "inherit",
     appearance: "none",
@@ -2621,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,
@@ -2649,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],
@@ -2681,27 +2766,27 @@ 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]}`] = {
+  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[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)",
     "@nest": {
       "&:not([data-disabled]):hover": {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[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[3],
-        [varNames.color.border]: tinted.border[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[3],
-        [varNames.color.border]: tinted.border[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)"
       },
@@ -2711,7 +2796,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [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],
@@ -2748,7 +2833,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
 }
 const buttonStyle = {
   layers: {
-    primitive: primitive$i
+    primitive: primitive$j
   }
 }, toneMap = {
   transparent: "transparent",
@@ -2760,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,
@@ -2799,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 = {};
@@ -2827,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) {
@@ -2907,7 +2992,7 @@ function _assignToneProps(toneProps, _varNames, _vars) {
       });
     }
 }
-const primitive$g = {
+const primitive$h = {
   ".checkbox": {
     position: "relative",
     display: "inline-block"
@@ -3037,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)",
@@ -3075,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)`,
@@ -3086,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)",
@@ -3121,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)`,
@@ -3132,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)',
@@ -3151,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)",
@@ -3178,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)`,
@@ -3189,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": {
@@ -3301,9 +3386,9 @@ const labelStyle = {
   }
 }, radioStyle = {
   layers: {
-    primitive: primitive$9
+    primitive: primitive$a
   }
-}, primitive$8 = {
+}, primitive$9 = {
   ".select": {
     "@nest": {
       "& > select:disabled": {
@@ -3323,7 +3408,7 @@ const labelStyle = {
   }
 }, selectStyle = {
   layers: {
-    primitive: primitive$8
+    primitive: primitive$9
   }
 }, keyframes = {
   "spinner-rotate": {
@@ -3334,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
   }
@@ -3926,6 +4019,7 @@ const textStyle = {
   radioStyle,
   selectStyle,
   spinnerStyle,
+  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,
@@ -4342,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).filter(Boolean).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 _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-function width(props) {
-  return _resp("w", props.width) ?? "";
-}
 function dialog() {
   return _comp("dialog", inset({
     inset: 0
@@ -4613,6 +4623,9 @@ function spinner() {
 function animatedSpinnerIcon() {
   return _comp("animated-spinner-icon");
 }
+function stack() {
+  return _comp("stack");
+}
 function _switch() {
   return _comp("switch");
 }
@@ -4726,6 +4739,7 @@ export {
   skeleton,
   spinner,
   srOnly,
+  stack,
   text,
   textArea,
   textInput,
@@ -4740,7 +4754,6 @@ export {
   tooltip,
   tooltipCard,
   treeItem,
-  v3_v2,
   varNames,
   vars,
   width