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

package/dist/css.js

@@ -54,6 +54,9 @@ function margin(props) {
 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));
 }
@@ -1034,70 +1037,70 @@ function buildColorVariantVars(options) {
   }
   return vars2;
 }
-const util$s = {};
-_responsiveRule(util$s, "border", {
+const util$t = {};
+_responsiveRule(util$t, "border", {
   border: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$s, "border-t", {
+_responsiveRule(util$t, "border-t", {
   borderTop: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$s, "border-r", {
+_responsiveRule(util$t, "border-r", {
   borderRight: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$s, "border-b", {
+_responsiveRule(util$t, "border-b", {
   borderBottom: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$s, "border-l", {
+_responsiveRule(util$t, "border-l", {
   borderLeft: `1px solid ${vars.color.border}`
 });
 const borderStyle = {
   layers: {
-    util: util$s
+    util: util$t
   }
-}, util$r = {};
-_responsiveRule(util$r, "block", {
+}, util$s = {};
+_responsiveRule(util$s, "block", {
   "@nest": {
     "&:not([hidden])": {
       display: "block"
     }
   }
 });
-_responsiveRule(util$r, "flex", {
+_responsiveRule(util$s, "flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "flex"
     }
   }
 });
-_responsiveRule(util$r, "grid", {
+_responsiveRule(util$s, "grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "grid"
     }
   }
 });
-_responsiveRule(util$r, "inline-block", {
+_responsiveRule(util$s, "inline-block", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-block"
     }
   }
 });
-_responsiveRule(util$r, "inline-flex", {
+_responsiveRule(util$s, "inline-flex", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-flex"
     }
   }
 });
-_responsiveRule(util$r, "inline-grid", {
+_responsiveRule(util$s, "inline-grid", {
   "@nest": {
     "&:not([hidden])": {
       display: "inline-grid"
     }
   }
 });
-_responsiveRule(util$r, "none", {
+_responsiveRule(util$s, "none", {
   "@nest": {
     "&:not([hidden])": {
       display: "none"
@@ -1106,125 +1109,125 @@ _responsiveRule(util$r, "none", {
 });
 const displayStyle = {
   layers: {
-    util: util$r
+    util: util$s
   }
-}, util$q = {};
-_responsiveRule(util$q, "flex-align-flex-start", {
+}, util$r = {};
+_responsiveRule(util$r, "flex-align-flex-start", {
   alignItems: "flex-start"
 });
-_responsiveRule(util$q, "flex-align-flex-end", {
+_responsiveRule(util$r, "flex-align-flex-end", {
   alignItems: "flex-end"
 });
-_responsiveRule(util$q, "flex-align-center", {
+_responsiveRule(util$r, "flex-align-center", {
   alignItems: "center"
 });
-_responsiveRule(util$q, "flex-align-stretch", {
+_responsiveRule(util$r, "flex-align-stretch", {
   alignItems: "stretch"
 });
-_responsiveRule(util$q, "flex-align-baseline", {
+_responsiveRule(util$r, "flex-align-baseline", {
   alignItems: "baseline"
 });
 const flexAlignStyle = {
   layers: {
-    util: util$q
+    util: util$r
   }
-}, util$p = {};
-_responsiveRule(util$p, "f-row", {
+}, util$q = {};
+_responsiveRule(util$q, "f-row", {
   flexDirection: "row"
 });
-_responsiveRule(util$p, "f-column", {
+_responsiveRule(util$q, "f-column", {
   flexDirection: "column"
 });
 const flexDirectionStyle = {
   layers: {
-    util: util$p
+    util: util$q
   }
-}, util$o = {};
-_responsiveRule(util$o, "flex-justify-flex-start", {
+}, util$p = {};
+_responsiveRule(util$p, "flex-justify-flex-start", {
   justifyContent: "flex-start"
 });
-_responsiveRule(util$o, "flex-justify-flex-end", {
+_responsiveRule(util$p, "flex-justify-flex-end", {
   justifyContent: "flex-end"
 });
-_responsiveRule(util$o, "flex-justify-center", {
+_responsiveRule(util$p, "flex-justify-center", {
   justifyContent: "center"
 });
-_responsiveRule(util$o, "flex-justify-space-between", {
+_responsiveRule(util$p, "flex-justify-space-between", {
   justifyContent: "space-between"
 });
-_responsiveRule(util$o, "flex-justify-space-around", {
+_responsiveRule(util$p, "flex-justify-space-around", {
   justifyContent: "space-around"
 });
-_responsiveRule(util$o, "flex-justify-space-evenly", {
+_responsiveRule(util$p, "flex-justify-space-evenly", {
   justifyContent: "space-evenly"
 });
 const flexJustifyStyle = {
   layers: {
-    util: util$o
+    util: util$p
   }
-}, util$n = {};
-_responsiveRule(util$n, "flex-nowrap", {
+}, util$o = {};
+_responsiveRule(util$o, "flex-nowrap", {
   flexWrap: "nowrap"
 });
-_responsiveRule(util$n, "flex-wrap", {
+_responsiveRule(util$o, "flex-wrap", {
   flexWrap: "wrap"
 });
-_responsiveRule(util$n, "flex-wrap-reverse", {
+_responsiveRule(util$o, "flex-wrap-reverse", {
   flexWrap: "wrap-reverse"
 });
 const flexWrapStyle = {
   layers: {
-    util: util$n
+    util: util$o
   }
-}, util$m = {};
-_responsiveRule(util$m, "f-none", {
+}, util$n = {};
+_responsiveRule(util$n, "f-none", {
   flex: "none"
 });
-_responsiveRule(util$m, "f-auto", {
+_responsiveRule(util$n, "f-auto", {
   flex: "auto"
 });
-_responsiveRule(util$m, "f-initial", {
+_responsiveRule(util$n, "f-initial", {
   flex: "initial"
 });
-_responsiveRule(util$m, "f-1", {
+_responsiveRule(util$n, "f-1", {
   flex: 1
 });
-_responsiveRule(util$m, "f-2", {
+_responsiveRule(util$n, "f-2", {
   flex: 2
 });
-_responsiveRule(util$m, "f-3", {
+_responsiveRule(util$n, "f-3", {
   flex: 3
 });
-_responsiveRule(util$m, "f-4", {
+_responsiveRule(util$n, "f-4", {
   flex: 4
 });
-_responsiveRule(util$m, "f-5", {
+_responsiveRule(util$n, "f-5", {
   flex: 5
 });
-_responsiveRule(util$m, "f-6", {
+_responsiveRule(util$n, "f-6", {
   flex: 6
 });
-_responsiveRule(util$m, "f-7", {
+_responsiveRule(util$n, "f-7", {
   flex: 7
 });
-_responsiveRule(util$m, "f-8", {
+_responsiveRule(util$n, "f-8", {
   flex: 8
 });
-_responsiveRule(util$m, "f-9", {
+_responsiveRule(util$n, "f-9", {
   flex: 9
 });
-_responsiveRule(util$m, "f-10", {
+_responsiveRule(util$n, "f-10", {
   flex: 10
 });
-_responsiveRule(util$m, "f-11", {
+_responsiveRule(util$n, "f-11", {
   flex: 11
 });
-_responsiveRule(util$m, "f-12", {
+_responsiveRule(util$n, "f-12", {
   flex: 12
 });
 const flexStyle = {
   layers: {
-    util: util$m
+    util: util$n
   }
 }, rules$3 = {
   ".font": {
@@ -1302,509 +1305,532 @@ const fontStyle = {
   layers: {
     primitive: rules$3
   }
-}, util$l = {};
+}, util$m = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$l, `g-${space}`, {
+  _responsiveRule(util$m, `g-${space}`, {
     gap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$l, `gx-${space}`, {
+  _responsiveRule(util$m, `gx-${space}`, {
     columnGap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$l, `gy-${space}`, {
+  _responsiveRule(util$m, `gy-${space}`, {
     rowGap: vars.space[space]
   });
 const gapStyle = {
   layers: {
-    util: util$l
+    util: util$m
   }
-}, util$k = {};
-_responsiveRule(util$k, "auto-cols-auto", {
+}, util$l = {};
+_responsiveRule(util$l, "auto-cols-auto", {
   gridAutoColumns: "auto"
 });
-_responsiveRule(util$k, "auto-cols-min", {
+_responsiveRule(util$l, "auto-cols-min", {
   gridAutoColumns: "min-content"
 });
-_responsiveRule(util$k, "auto-cols-max", {
+_responsiveRule(util$l, "auto-cols-max", {
   gridAutoColumns: "max-content"
 });
-_responsiveRule(util$k, "auto-cols-fr", {
+_responsiveRule(util$l, "auto-cols-fr", {
   gridAutoColumns: "minmax(0, 1fr)"
 });
 const gridAutoColumnsStyle = {
   layers: {
-    util: util$k
+    util: util$l
   }
-}, util$j = {};
-_responsiveRule(util$j, "auto-flow-row", {
+}, util$k = {};
+_responsiveRule(util$k, "auto-flow-row", {
   gridAutoFlow: "row"
 });
-_responsiveRule(util$j, "auto-flow-column", {
+_responsiveRule(util$k, "auto-flow-column", {
   gridAutoFlow: "column"
 });
-_responsiveRule(util$j, "auto-flow-row-dense", {
+_responsiveRule(util$k, "auto-flow-row-dense", {
   gridAutoFlow: "row dense"
 });
-_responsiveRule(util$j, "auto-flow-column-dense", {
+_responsiveRule(util$k, "auto-flow-column-dense", {
   gridAutoFlow: "column dense"
 });
 const gridAutoFlowStyle = {
   layers: {
-    util: util$j
+    util: util$k
   }
-}, util$i = {};
-_responsiveRule(util$i, "auto-rows-auto", {
+}, util$j = {};
+_responsiveRule(util$j, "auto-rows-auto", {
   gridAutoRows: "auto"
 });
-_responsiveRule(util$i, "auto-rows-min", {
+_responsiveRule(util$j, "auto-rows-min", {
   gridAutoRows: "min-content"
 });
-_responsiveRule(util$i, "auto-rows-max", {
+_responsiveRule(util$j, "auto-rows-max", {
   gridAutoRows: "max-content"
 });
-_responsiveRule(util$i, "auto-rows-fr", {
+_responsiveRule(util$j, "auto-rows-fr", {
   gridAutoRows: "minmax(0, 1fr)"
 });
 const gridAutoRowsStyle = {
   layers: {
-    util: util$i
+    util: util$j
   }
-}, util$h = {};
-_responsiveRule(util$h, "cols-1", {
+}, util$i = {};
+_responsiveRule(util$i, "cols-1", {
   gridTemplateColumns: "repeat(1, 1fr)"
 });
-_responsiveRule(util$h, "cols-2", {
+_responsiveRule(util$i, "cols-2", {
   gridTemplateColumns: "repeat(2, 1fr)"
 });
-_responsiveRule(util$h, "cols-3", {
+_responsiveRule(util$i, "cols-3", {
   gridTemplateColumns: "repeat(3, 1fr)"
 });
-_responsiveRule(util$h, "cols-4", {
+_responsiveRule(util$i, "cols-4", {
   gridTemplateColumns: "repeat(4, 1fr)"
 });
-_responsiveRule(util$h, "cols-5", {
+_responsiveRule(util$i, "cols-5", {
   gridTemplateColumns: "repeat(5, 1fr)"
 });
-_responsiveRule(util$h, "cols-6", {
+_responsiveRule(util$i, "cols-6", {
   gridTemplateColumns: "repeat(6, 1fr)"
 });
-_responsiveRule(util$h, "cols-7", {
+_responsiveRule(util$i, "cols-7", {
   gridTemplateColumns: "repeat(7, 1fr)"
 });
-_responsiveRule(util$h, "cols-8", {
+_responsiveRule(util$i, "cols-8", {
   gridTemplateColumns: "repeat(8, 1fr)"
 });
-_responsiveRule(util$h, "cols-9", {
+_responsiveRule(util$i, "cols-9", {
   gridTemplateColumns: "repeat(9, 1fr)"
 });
-_responsiveRule(util$h, "cols-10", {
+_responsiveRule(util$i, "cols-10", {
   gridTemplateColumns: "repeat(10, 1fr)"
 });
-_responsiveRule(util$h, "cols-12", {
+_responsiveRule(util$i, "cols-12", {
   gridTemplateColumns: "repeat(12, 1fr)"
 });
 const gridColumnsStyle = {
   layers: {
-    util: util$h
+    util: util$i
   }
-}, util$g = {};
-_responsiveRule(util$g, "rows-1", {
+}, util$h = {};
+_responsiveRule(util$h, "rows-1", {
   gridTemplateRows: "repeat(1, 1fr)"
 });
-_responsiveRule(util$g, "rows-2", {
+_responsiveRule(util$h, "rows-2", {
   gridTemplateRows: "repeat(2, 1fr)"
 });
-_responsiveRule(util$g, "rows-3", {
+_responsiveRule(util$h, "rows-3", {
   gridTemplateRows: "repeat(3, 1fr)"
 });
-_responsiveRule(util$g, "rows-4", {
+_responsiveRule(util$h, "rows-4", {
   gridTemplateRows: "repeat(4, 1fr)"
 });
-_responsiveRule(util$g, "rows-5", {
+_responsiveRule(util$h, "rows-5", {
   gridTemplateRows: "repeat(5, 1fr)"
 });
-_responsiveRule(util$g, "rows-6", {
+_responsiveRule(util$h, "rows-6", {
   gridTemplateRows: "repeat(6, 1fr)"
 });
-_responsiveRule(util$g, "rows-7", {
+_responsiveRule(util$h, "rows-7", {
   gridTemplateRows: "repeat(7, 1fr)"
 });
-_responsiveRule(util$g, "rows-8", {
+_responsiveRule(util$h, "rows-8", {
   gridTemplateRows: "repeat(8, 1fr)"
 });
-_responsiveRule(util$g, "rows-9", {
+_responsiveRule(util$h, "rows-9", {
   gridTemplateRows: "repeat(9, 1fr)"
 });
-_responsiveRule(util$g, "rows-10", {
+_responsiveRule(util$h, "rows-10", {
   gridTemplateRows: "repeat(10, 1fr)"
 });
-_responsiveRule(util$g, "rows-12", {
+_responsiveRule(util$h, "rows-12", {
   gridTemplateRows: "repeat(12, 1fr)"
 });
 const gridRowsStyle = {
   layers: {
-    util: util$g
+    util: util$h
   }
-}, util$f = {};
-_responsiveRule(util$f, "col-auto", {
+}, util$g = {};
+_responsiveRule(util$g, "col-auto", {
   gridColumn: "auto"
 });
-_responsiveRule(util$f, "col-full", {
+_responsiveRule(util$g, "col-full", {
   gridColumn: "1 / -1"
 });
-_responsiveRule(util$f, "col-1", {
+_responsiveRule(util$g, "col-1", {
   gridColumn: "span 1 / span 1"
 });
-_responsiveRule(util$f, "col-2", {
+_responsiveRule(util$g, "col-2", {
   gridColumn: "span 2 / span 2"
 });
-_responsiveRule(util$f, "col-3", {
+_responsiveRule(util$g, "col-3", {
   gridColumn: "span 3 / span 3"
 });
-_responsiveRule(util$f, "col-4", {
+_responsiveRule(util$g, "col-4", {
   gridColumn: "span 4 / span 4"
 });
-_responsiveRule(util$f, "col-5", {
+_responsiveRule(util$g, "col-5", {
   gridColumn: "span 5 / span 5"
 });
-_responsiveRule(util$f, "col-6", {
+_responsiveRule(util$g, "col-6", {
   gridColumn: "span 6 / span 6"
 });
-_responsiveRule(util$f, "col-7", {
+_responsiveRule(util$g, "col-7", {
   gridColumn: "span 7 / span 7"
 });
-_responsiveRule(util$f, "col-8", {
+_responsiveRule(util$g, "col-8", {
   gridColumn: "span 8 / span 8"
 });
-_responsiveRule(util$f, "col-9", {
+_responsiveRule(util$g, "col-9", {
   gridColumn: "span 9 / span 9"
 });
-_responsiveRule(util$f, "col-10", {
+_responsiveRule(util$g, "col-10", {
   gridColumn: "span 10 / span 10"
 });
-_responsiveRule(util$f, "col-12", {
+_responsiveRule(util$g, "col-12", {
   gridColumn: "span 12 / span 12"
 });
 const gridColumnStyle = {
   layers: {
-    util: util$f
+    util: util$g
   }
-}, util$e = {};
-_responsiveRule(util$e, "col-end-auto", {
+}, util$f = {};
+_responsiveRule(util$f, "col-end-auto", {
   gridColumnEnd: "auto"
 });
-_responsiveRule(util$e, "col-end-1", {
+_responsiveRule(util$f, "col-end-1", {
   gridColumnEnd: "1"
 });
-_responsiveRule(util$e, "col-end-2", {
+_responsiveRule(util$f, "col-end-2", {
   gridColumnEnd: "2"
 });
-_responsiveRule(util$e, "col-end-3", {
+_responsiveRule(util$f, "col-end-3", {
   gridColumnEnd: "3"
 });
-_responsiveRule(util$e, "col-end-4", {
+_responsiveRule(util$f, "col-end-4", {
   gridColumnEnd: "4"
 });
-_responsiveRule(util$e, "col-end-5", {
+_responsiveRule(util$f, "col-end-5", {
   gridColumnEnd: "5"
 });
-_responsiveRule(util$e, "col-end-6", {
+_responsiveRule(util$f, "col-end-6", {
   gridColumnEnd: "6"
 });
-_responsiveRule(util$e, "col-end-7", {
+_responsiveRule(util$f, "col-end-7", {
   gridColumnEnd: "7"
 });
-_responsiveRule(util$e, "col-end-8", {
+_responsiveRule(util$f, "col-end-8", {
   gridColumnEnd: "8"
 });
-_responsiveRule(util$e, "col-end-9", {
+_responsiveRule(util$f, "col-end-9", {
   gridColumnEnd: "9"
 });
-_responsiveRule(util$e, "col-end-10", {
+_responsiveRule(util$f, "col-end-10", {
   gridColumnEnd: "10"
 });
-_responsiveRule(util$e, "col-end-11", {
+_responsiveRule(util$f, "col-end-11", {
   gridColumnEnd: "11"
 });
-_responsiveRule(util$e, "col-end-12", {
+_responsiveRule(util$f, "col-end-12", {
   gridColumnEnd: "12"
 });
 const gridColumnEndStyle = {
   layers: {
-    util: util$e
+    util: util$f
   }
-}, util$d = {};
-_responsiveRule(util$d, "col-start-auto", {
+}, util$e = {};
+_responsiveRule(util$e, "col-start-auto", {
   gridColumnStart: "auto"
 });
-_responsiveRule(util$d, "col-start-1", {
+_responsiveRule(util$e, "col-start-1", {
   gridColumnStart: "1"
 });
-_responsiveRule(util$d, "col-start-2", {
+_responsiveRule(util$e, "col-start-2", {
   gridColumnStart: "2"
 });
-_responsiveRule(util$d, "col-start-3", {
+_responsiveRule(util$e, "col-start-3", {
   gridColumnStart: "3"
 });
-_responsiveRule(util$d, "col-start-4", {
+_responsiveRule(util$e, "col-start-4", {
   gridColumnStart: "4"
 });
-_responsiveRule(util$d, "col-start-5", {
+_responsiveRule(util$e, "col-start-5", {
   gridColumnStart: "5"
 });
-_responsiveRule(util$d, "col-start-6", {
+_responsiveRule(util$e, "col-start-6", {
   gridColumnStart: "6"
 });
-_responsiveRule(util$d, "col-start-7", {
+_responsiveRule(util$e, "col-start-7", {
   gridColumnStart: "7"
 });
-_responsiveRule(util$d, "col-start-8", {
+_responsiveRule(util$e, "col-start-8", {
   gridColumnStart: "8"
 });
-_responsiveRule(util$d, "col-start-9", {
+_responsiveRule(util$e, "col-start-9", {
   gridColumnStart: "9"
 });
-_responsiveRule(util$d, "col-start-10", {
+_responsiveRule(util$e, "col-start-10", {
   gridColumnStart: "10"
 });
-_responsiveRule(util$d, "col-start-11", {
+_responsiveRule(util$e, "col-start-11", {
   gridColumnStart: "11"
 });
-_responsiveRule(util$d, "col-start-12", {
+_responsiveRule(util$e, "col-start-12", {
   gridColumnStart: "12"
 });
 const gridColumnStartStyle = {
   layers: {
-    util: util$d
+    util: util$e
   }
-}, util$c = {};
-_responsiveRule(util$c, "row-auto", {
+}, util$d = {};
+_responsiveRule(util$d, "row-auto", {
   gridRow: "auto"
 });
-_responsiveRule(util$c, "row-full", {
+_responsiveRule(util$d, "row-full", {
   gridRow: "1 / -1"
 });
-_responsiveRule(util$c, "row-1", {
+_responsiveRule(util$d, "row-1", {
   gridRow: "span 1 / span 1"
 });
-_responsiveRule(util$c, "row-2", {
+_responsiveRule(util$d, "row-2", {
   gridRow: "span 2 / span 2"
 });
-_responsiveRule(util$c, "row-3", {
+_responsiveRule(util$d, "row-3", {
   gridRow: "span 3 / span 3"
 });
-_responsiveRule(util$c, "row-4", {
+_responsiveRule(util$d, "row-4", {
   gridRow: "span 4 / span 4"
 });
-_responsiveRule(util$c, "row-5", {
+_responsiveRule(util$d, "row-5", {
   gridRow: "span 5 / span 5"
 });
-_responsiveRule(util$c, "row-6", {
+_responsiveRule(util$d, "row-6", {
   gridRow: "span 6 / span 6"
 });
-_responsiveRule(util$c, "row-7", {
+_responsiveRule(util$d, "row-7", {
   gridRow: "span 7 / span 7"
 });
-_responsiveRule(util$c, "row-8", {
+_responsiveRule(util$d, "row-8", {
   gridRow: "span 8 / span 8"
 });
-_responsiveRule(util$c, "row-9", {
+_responsiveRule(util$d, "row-9", {
   gridRow: "span 9 / span 9"
 });
-_responsiveRule(util$c, "row-10", {
+_responsiveRule(util$d, "row-10", {
   gridRow: "span 10 / span 10"
 });
-_responsiveRule(util$c, "row-12", {
+_responsiveRule(util$d, "row-12", {
   gridRow: "span 12 / span 12"
 });
 const gridRowStyle = {
   layers: {
-    util: util$c
+    util: util$d
   }
-}, util$b = {};
-_responsiveRule(util$b, "row-end-auto", {
+}, util$c = {};
+_responsiveRule(util$c, "row-end-auto", {
   gridRowEnd: "auto"
 });
-_responsiveRule(util$b, "row-end-1", {
+_responsiveRule(util$c, "row-end-1", {
   gridRowEnd: "1"
 });
-_responsiveRule(util$b, "row-end-2", {
+_responsiveRule(util$c, "row-end-2", {
   gridRowEnd: "2"
 });
-_responsiveRule(util$b, "row-end-3", {
+_responsiveRule(util$c, "row-end-3", {
   gridRowEnd: "3"
 });
-_responsiveRule(util$b, "row-end-4", {
+_responsiveRule(util$c, "row-end-4", {
   gridRowEnd: "4"
 });
-_responsiveRule(util$b, "row-end-5", {
+_responsiveRule(util$c, "row-end-5", {
   gridRowEnd: "5"
 });
-_responsiveRule(util$b, "row-end-6", {
+_responsiveRule(util$c, "row-end-6", {
   gridRowEnd: "6"
 });
-_responsiveRule(util$b, "row-end-7", {
+_responsiveRule(util$c, "row-end-7", {
   gridRowEnd: "7"
 });
-_responsiveRule(util$b, "row-end-8", {
+_responsiveRule(util$c, "row-end-8", {
   gridRowEnd: "8"
 });
-_responsiveRule(util$b, "row-end-9", {
+_responsiveRule(util$c, "row-end-9", {
   gridRowEnd: "9"
 });
-_responsiveRule(util$b, "row-end-10", {
+_responsiveRule(util$c, "row-end-10", {
   gridRowEnd: "10"
 });
-_responsiveRule(util$b, "row-end-11", {
+_responsiveRule(util$c, "row-end-11", {
   gridRowEnd: "11"
 });
-_responsiveRule(util$b, "row-end-12", {
+_responsiveRule(util$c, "row-end-12", {
   gridRowEnd: "12"
 });
 const gridRowEndStyle = {
   layers: {
-    util: util$b
+    util: util$c
   }
-}, util$a = {};
-_responsiveRule(util$a, "row-start-auto", {
+}, util$b = {};
+_responsiveRule(util$b, "row-start-auto", {
   gridRowStart: "auto"
 });
-_responsiveRule(util$a, "row-start-1", {
+_responsiveRule(util$b, "row-start-1", {
   gridRowStart: "1"
 });
-_responsiveRule(util$a, "row-start-2", {
+_responsiveRule(util$b, "row-start-2", {
   gridRowStart: "2"
 });
-_responsiveRule(util$a, "row-start-3", {
+_responsiveRule(util$b, "row-start-3", {
   gridRowStart: "3"
 });
-_responsiveRule(util$a, "row-start-4", {
+_responsiveRule(util$b, "row-start-4", {
   gridRowStart: "4"
 });
-_responsiveRule(util$a, "row-start-5", {
+_responsiveRule(util$b, "row-start-5", {
   gridRowStart: "5"
 });
-_responsiveRule(util$a, "row-start-6", {
+_responsiveRule(util$b, "row-start-6", {
   gridRowStart: "6"
 });
-_responsiveRule(util$a, "row-start-7", {
+_responsiveRule(util$b, "row-start-7", {
   gridRowStart: "7"
 });
-_responsiveRule(util$a, "row-start-8", {
+_responsiveRule(util$b, "row-start-8", {
   gridRowStart: "8"
 });
-_responsiveRule(util$a, "row-start-9", {
+_responsiveRule(util$b, "row-start-9", {
   gridRowStart: "9"
 });
-_responsiveRule(util$a, "row-start-10", {
+_responsiveRule(util$b, "row-start-10", {
   gridRowStart: "10"
 });
-_responsiveRule(util$a, "row-start-11", {
+_responsiveRule(util$b, "row-start-11", {
   gridRowStart: "11"
 });
-_responsiveRule(util$a, "row-start-12", {
+_responsiveRule(util$b, "row-start-12", {
   gridRowStart: "12"
 });
 const gridRowStartStyle = {
   layers: {
-    util: util$a
+    util: util$b
   }
-}, util$9 = {};
-_responsiveRule(util$9, "h-fill", {
+}, util$a = {};
+_responsiveRule(util$a, "h-fill", {
   height: "100%"
 });
-_responsiveRule(util$9, "h-stretch", {
+_responsiveRule(util$a, "h-stretch", {
   height: "stretch"
 });
 const heightStyle = {
   layers: {
-    util: util$9
+    util: util$a
   }
-}, util$8 = {};
-_responsiveRule(util$8, "inset-0", {
+}, util$9 = {};
+_responsiveRule(util$9, "inset-0", {
   top: 0,
   left: 0,
   right: 0,
   bottom: 0
 });
-_responsiveRule(util$8, "top-0", {
+_responsiveRule(util$9, "top-0", {
   top: 0
 });
-_responsiveRule(util$8, "right-0", {
+_responsiveRule(util$9, "right-0", {
   right: 0
 });
-_responsiveRule(util$8, "bottom-0", {
+_responsiveRule(util$9, "bottom-0", {
   bottom: 0
 });
-_responsiveRule(util$8, "left-0", {
+_responsiveRule(util$9, "left-0", {
   left: 0
 });
 const insetStyle = {
   layers: {
-    util: util$8
+    util: util$9
   }
-}, util$7 = {};
+}, util$8 = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `m-${space}`, {
+  _responsiveRule(util$8, `m-${space}`, {
     margin: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `mx-${space}`, {
+  _responsiveRule(util$8, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `my-${space}`, {
+  _responsiveRule(util$8, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `mt-${space}`, {
+  _responsiveRule(util$8, `mt-${space}`, {
     marginTop: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `mr-${space}`, {
+  _responsiveRule(util$8, `mr-${space}`, {
     marginRight: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `mb-${space}`, {
+  _responsiveRule(util$8, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$7, `ml-${space}`, {
+  _responsiveRule(util$8, `ml-${space}`, {
     marginLeft: vars.space[space]
   });
 const marginStyle = {
   layers: {
-    util: util$7
+    util: util$8
   }
-}, util$6 = {};
-_responsiveRule(util$6, "max-w-0", {
+}, util$7 = {};
+_responsiveRule(util$7, "max-w-0", {
   maxWidth: vars.container[0]
 });
-_responsiveRule(util$6, "max-w-1", {
+_responsiveRule(util$7, "max-w-1", {
   maxWidth: vars.container[1]
 });
-_responsiveRule(util$6, "max-w-2", {
+_responsiveRule(util$7, "max-w-2", {
   maxWidth: vars.container[2]
 });
-_responsiveRule(util$6, "max-w-3", {
+_responsiveRule(util$7, "max-w-3", {
   maxWidth: vars.container[3]
 });
-_responsiveRule(util$6, "max-w-4", {
+_responsiveRule(util$7, "max-w-4", {
   maxWidth: vars.container[4]
 });
-_responsiveRule(util$6, "max-w-5", {
+_responsiveRule(util$7, "max-w-5", {
   maxWidth: vars.container[5]
 });
-_responsiveRule(util$6, "max-w-auto", {
+_responsiveRule(util$7, "max-w-auto", {
   maxWidth: "none"
 });
-_responsiveRule(util$6, "max-w-fill", {
+_responsiveRule(util$7, "max-w-fill", {
   maxWidth: "100%"
 });
 const maxWidthStyle = {
+  layers: {
+    util: util$7
+  }
+}, util$6 = {};
+_responsiveRule(util$6, "min-w-0", {
+  minWidth: "0"
+});
+_responsiveRule(util$6, "min-w-auto", {
+  minWidth: "auto"
+});
+_responsiveRule(util$6, "min-w-full", {
+  minWidth: "100%"
+});
+_responsiveRule(util$6, "min-w-min", {
+  minWidth: "min-content"
+});
+_responsiveRule(util$6, "min-w-max", {
+  minWidth: "max-content"
+});
+_responsiveRule(util$6, "min-w-fit", {
+  minWidth: "fit-content"
+});
+const minWidthStyle = {
   layers: {
     util: util$6
   }
@@ -2652,7 +2678,7 @@ const badgeStyle = {
   }
 }, primitive$k = {
   ".box": {
-    minWidth: 0,
+    // todo: move to aspects
     minHeight: 0,
     "@nest": {
       "&:is(ul), &:is(ol)": {
@@ -2856,7 +2882,7 @@ const buttonStyle = {
     [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
     "@nest": {
-      "&:is(button)": {
+      "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         outline: "none",
@@ -2866,14 +2892,71 @@ const buttonStyle = {
         // @ts-expect-error - TODO: fix
         width: ["-moz-available", "-webkit-fill-available", "fill-available"]
       },
-      "&:is(a)": {
+      "a&": {
         outline: "none",
         textDecoration: "none"
       },
-      "&:is(pre)": {
+      "pre&": {
         font: "inherit",
         whiteSpace: "inherit"
+      },
+      "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],
+        [varNames.color.fg]: vars.color.tinted.default.fg[1],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+      },
+      "a&:not([data-disabled]):active, button&:not([data-disabled]):active": {
+        [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]
+      },
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]': {
+        [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]
+      },
+      "a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]": {
+        [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]
+      },
+      "a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]": {
+        [varNames.color.bg]: vars.color.solid.primary.bg[0],
+        [varNames.color.border]: vars.color.solid.primary.border[1],
+        [varNames.color.fg]: vars.color.solid.primary.fg[0],
+        [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]
       }
+      // '&[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],
+      // },
     }
   }
 };
@@ -3452,21 +3535,15 @@ const labelStyle = {
     outline: "none",
     padding: 0,
     margin: 0,
-    /* Place the input element above the representation element */
+    // place the input element on top of the representation element
     zIndex: 1
   },
   ".switch-presentation": {
     "--switch-bg-color": "var(--color-tinted-default-border-2)",
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
     "--switch-fg-color": "var(--color-tinted-default-bg-0)",
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
     "--switch-thumb-offset": "0",
     "--switch-thumb-size": "calc(var(--input-switch-height) - var(--input-switch-padding) * 2)",
     display: "block",
-    // &:not([hidden]) {
-    //   display: block;
-    // }
     position: "relative",
     width: "var(--input-switch-width)",
     height: "var(--input-switch-height)",
@@ -3475,20 +3552,7 @@ const labelStyle = {
     // Make sure it’s not possible to interact with the presentation element
     pointerEvents: "none",
     "@nest": {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
       ".switch-element:focus + &": {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
         outline: "var(--input-switch-focus-ring-width) solid var(--color-focus-ring)"
       },
       "input:focus:not(:focus-visible) + &": {
@@ -3496,35 +3560,15 @@ const labelStyle = {
       },
       "input:checked + &": {
         "--switch-bg-color": "var(--color-solid-default-bg-0)",
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
         "--switch-fg-color": "var(--color-solid-default-fg-0)"
       },
-      // input:not([data-read-only]):disabled + && {
-      //   --switch-bg-color: ${color.input.default.disabled.border};
-      //   --switch-fg-color: ${color.input.default.disabled.bg};
-      // }
-      // input[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.border};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
-      // input:checked[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.fg};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
       ".switch-element:checked + &": {
         "--switch-thumb-offset": "calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))"
+      },
+      "[data-indeterminate] > .switch-element + &": {
+        "--switch-thumb-offset": "calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))"
       }
     }
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
   },
   ".switch-track": {
     display: "block",
@@ -3535,11 +3579,9 @@ const labelStyle = {
     right: 0,
     bottom: 0,
     borderRadius: "inherit",
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
     transition: "box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
   },
   ".switch-thumb": {
-    // '--switch-thumb-offset': '0',
     display: "block",
     position: "absolute",
     left: "var(--input-switch-padding)",
@@ -3551,40 +3593,6 @@ const labelStyle = {
     boxShadow: "0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)",
     transform: "translate3d(var(--switch-thumb-offset), 0, 0)",
     transition: "transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
   }
 }, switchStyle = {
   layers: {
@@ -3989,6 +3997,7 @@ const textStyle = {
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,
@@ -4114,7 +4123,7 @@ function compileStyleRule(_selector, properties) {
 `), nestedProps)
     for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
       const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
-      css += `${nestedSelector.replace("&", selector)} {
+      css += `${nestedSelector.replace(/&/g, selector)} {
 `, css += compileProperties(nestedProperties), css += `}
 
 `;
@@ -4561,6 +4570,7 @@ function box(props) {
     inset(props),
     margin(props),
     maxWidth(props),
+    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),
@@ -4609,6 +4619,9 @@ function label(props) {
 function popover() {
   return _comp("popover");
 }
+function popoverCard() {
+  return _comp("popover-card");
+}
 function radio() {
   return _comp("radio");
 }
@@ -4723,10 +4736,12 @@ 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;