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

package/dist/css.js

@@ -31,7 +31,7 @@ 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));
+  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));
@@ -75,6 +75,9 @@ function radius(props) {
 function shadow(props) {
   return composeClassNames(_resp("shadow", props.shadow));
 }
+function textAlign(props) {
+  return composeClassNames(_resp("text-align", props.textAlign));
+}
 const BREAKPOINTS = {
   1: 360,
   2: 600,
@@ -716,13 +719,12 @@ function compilePaletteProperties() {
 }
 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,
@@ -1179,70 +1181,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"
@@ -1251,125 +1253,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": {
@@ -1426,554 +1428,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 = {};
+}, util$n = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `g-${space}`, {
+  _responsiveRule(util$n, `g-${space}`, {
     gap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gx-${space}`, {
+  _responsiveRule(util$n, `gx-${space}`, {
     columnGap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gy-${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 = {};
+}, util$9 = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `m-${space}`, {
+  _responsiveRule(util$9, `m-${space}`, {
     margin: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mx-${space}`, {
+  _responsiveRule(util$9, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `my-${space}`, {
+  _responsiveRule(util$9, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mt-${space}`, {
+  _responsiveRule(util$9, `mt-${space}`, {
     marginTop: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mr-${space}`, {
+  _responsiveRule(util$9, `mr-${space}`, {
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mb-${space}`, {
+  _responsiveRule(util$9, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$8, `ml-${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": {
@@ -1983,57 +1969,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 = {};
+}, util$5 = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `p-${space}`, {
+  _responsiveRule(util$5, `p-${space}`, {
     padding: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `px-${space}`, {
+  _responsiveRule(util$5, `px-${space}`, {
     paddingLeft: vars.space[space],
     paddingRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `py-${space}`, {
+  _responsiveRule(util$5, `py-${space}`, {
     paddingTop: vars.space[space],
     paddingBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pt-${space}`, {
+  _responsiveRule(util$5, `pt-${space}`, {
     paddingTop: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pr-${space}`, {
+  _responsiveRule(util$5, `pr-${space}`, {
     paddingRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pb-${space}`, {
+  _responsiveRule(util$5, `pb-${space}`, {
     paddingBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pl-${space}`, {
+  _responsiveRule(util$5, `pl-${space}`, {
     paddingLeft: vars.space[space]
   });
 const paddingStyle = {
   layers: {
-    util: util$4
+    util: util$5
   }
 }, rules$1 = {
   ".pointer-events-none": {
@@ -2046,63 +2032,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 = {};
+}, util$2 = {};
 for (const shadow2 of theme.SHADOW)
-  shadow2 === 0 ? _responsiveRule(util$1, "shadow-0", {
+  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
   }
@@ -2517,24 +2523,24 @@ const skeletonStyle = {
     }
   }
 };
-for (const textSize of theme.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 theme.SPACE)
-  primitive$o[`.input-p-${space}`] = {
+  _responsiveRule(primitive$o, `input-p-${space}`, {
     [varNames.input.padding]: vars.space[space]
-  };
+  });
 for (const space of theme.SPACE)
-  primitive$o[`.input-g-${space}`] = {
+  _responsiveRule(primitive$o, `input-g-${space}`, {
     [varNames.input.gap]: vars.space[space]
-  };
+  });
 const _inputStyle = {
   layers: {
     primitive: primitive$o
@@ -2804,7 +2810,10 @@ const badgeStyle = {
     // todo: move to aspects
     minHeight: 0,
     "@nest": {
-      "&:is(ul), &:is(ol)": {
+      "iframe&": {
+        border: "none"
+      },
+      "ul&, ol&": {
         listStyle: "none"
       },
       "&.muted": {
@@ -3795,12 +3804,8 @@ 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 theme.FONT_TEXT_SIZE)
@@ -3860,126 +3865,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
@@ -4180,6 +4066,7 @@ const textStyle = {
   positionStyle,
   radiusStyle,
   shadowStyle,
+  textAlignStyle,
   textOverflowStyle,
   widthStyle,
   // utils
@@ -4671,6 +4558,7 @@ function box(props) {
     pointerEvents(props),
     position(props),
     radius(props),
+    textAlign(props),
     width(props)
   );
 }
@@ -4702,13 +4590,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");
@@ -4750,7 +4642,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));
@@ -4853,6 +4747,7 @@ exports.spinner = spinner;
 exports.srOnly = srOnly;
 exports.stack = stack;
 exports.text = text;
+exports.textAlign = textAlign;
 exports.textArea = textArea;
 exports.textInput = textInput;
 exports.textOverflow = textOverflow;