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

package/dist/css.mjs

@@ -53,6 +53,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));
 }
@@ -241,6 +244,48 @@ const varNames = {
     backdrop: "--color-backdrop",
     bg: "--color-bg",
     border: "--color-border",
+    code: {
+      bg: "--color-code-bg",
+      fg: "--color-code-fg",
+      token: {
+        atrule: "--color-code-token-atrule",
+        attrName: "--color-code-token-attr-name",
+        attrValue: "--color-code-token-attr-value",
+        attribute: "--color-code-token-attribute",
+        boolean: "--color-code-token-boolean",
+        builtin: "--color-code-token-builtin",
+        cdata: "--color-code-token-cdata",
+        char: "--color-code-token-char",
+        class: "--color-code-token-class",
+        className: "--color-code-token-class-name",
+        comment: "--color-code-token-comment",
+        constant: "--color-code-token-constant",
+        deleted: "--color-code-token-deleted",
+        doctype: "--color-code-token-doctype",
+        entity: "--color-code-token-entity",
+        function: "--color-code-token-function",
+        hexcode: "--color-code-token-hexcode",
+        id: "--color-code-token-id",
+        important: "--color-code-token-important",
+        inserted: "--color-code-token-inserted",
+        keyword: "--color-code-token-keyword",
+        number: "--color-code-token-number",
+        operator: "--color-code-token-operator",
+        prolog: "--color-code-token-prolog",
+        property: "--color-code-token-property",
+        pseudoClass: "--color-code-token-pseudo-class",
+        pseudoElement: "--color-code-token-pseudo-element",
+        punctuation: "--color-code-token-punctuation",
+        regex: "--color-code-token-regex",
+        selector: "--color-code-token-selector",
+        string: "--color-code-token-string",
+        symbol: "--color-code-token-symbol",
+        tag: "--color-code-token-tag",
+        unit: "--color-code-token-unit",
+        url: "--color-code-token-url",
+        variable: "--color-code-token-variable"
+      }
+    },
     fg: "--color-fg",
     focusRing: "--color-focus-ring",
     input: {
@@ -266,44 +311,6 @@ const varNames = {
       from: "--color-skeleton-from",
       to: "--color-skeleton-to"
     },
-    token: {
-      atrule: "--color-token-atrule",
-      attrName: "--color-token-attr-name",
-      attrValue: "--color-token-attr-value",
-      attribute: "--color-token-attribute",
-      boolean: "--color-token-boolean",
-      builtin: "--color-token-builtin",
-      cdata: "--color-token-cdata",
-      char: "--color-token-char",
-      class: "--color-token-class",
-      className: "--color-token-class-name",
-      comment: "--color-token-comment",
-      constant: "--color-token-constant",
-      deleted: "--color-token-deleted",
-      doctype: "--color-token-doctype",
-      entity: "--color-token-entity",
-      function: "--color-token-function",
-      hexcode: "--color-token-hexcode",
-      id: "--color-token-id",
-      important: "--color-token-important",
-      inserted: "--color-token-inserted",
-      keyword: "--color-token-keyword",
-      number: "--color-token-number",
-      operator: "--color-token-operator",
-      prolog: "--color-token-prolog",
-      property: "--color-token-property",
-      pseudoClass: "--color-token-pseudo-class",
-      pseudoElement: "--color-token-pseudo-element",
-      punctuation: "--color-token-punctuation",
-      regex: "--color-token-regex",
-      selector: "--color-token-selector",
-      string: "--color-token-string",
-      symbol: "--color-token-symbol",
-      tag: "--color-token-tag",
-      unit: "--color-token-unit",
-      url: "--color-token-url",
-      variable: "--color-token-variable"
-    },
     solid: buildColorVariantVarNames({
       variant: "solid"
     }),
@@ -532,6 +539,48 @@ function buildColorCardVarNames(props) {
       }
     },
     backdrop: `${sourcePrefix}-backdrop`,
+    code: {
+      bg: `${sourcePrefix}-code-bg`,
+      fg: `${sourcePrefix}-code-fg`,
+      token: {
+        atrule: `${sourcePrefix}-code-token-atrule`,
+        attrName: `${sourcePrefix}-code-token-attr-name`,
+        attrValue: `${sourcePrefix}-code-token-attr-value`,
+        attribute: `${sourcePrefix}-code-token-attribute`,
+        boolean: `${sourcePrefix}-code-token-boolean`,
+        builtin: `${sourcePrefix}-code-token-builtin`,
+        cdata: `${sourcePrefix}-code-token-cdata`,
+        char: `${sourcePrefix}-code-token-char`,
+        class: `${sourcePrefix}-code-token-class`,
+        className: `${sourcePrefix}-code-token-class-name`,
+        comment: `${sourcePrefix}-code-token-comment`,
+        constant: `${sourcePrefix}-code-token-constant`,
+        deleted: `${sourcePrefix}-code-token-deleted`,
+        doctype: `${sourcePrefix}-code-token-doctype`,
+        entity: `${sourcePrefix}-code-token-entity`,
+        function: `${sourcePrefix}-code-token-function`,
+        hexcode: `${sourcePrefix}-code-token-hexcode`,
+        id: `${sourcePrefix}-code-token-id`,
+        important: `${sourcePrefix}-code-token-important`,
+        inserted: `${sourcePrefix}-code-token-inserted`,
+        keyword: `${sourcePrefix}-code-token-keyword`,
+        number: `${sourcePrefix}-code-token-number`,
+        operator: `${sourcePrefix}-code-token-operator`,
+        prolog: `${sourcePrefix}-code-token-prolog`,
+        property: `${sourcePrefix}-code-token-property`,
+        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
+        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
+        punctuation: `${sourcePrefix}-code-token-punctuation`,
+        regex: `${sourcePrefix}-code-token-regex`,
+        selector: `${sourcePrefix}-code-token-selector`,
+        string: `${sourcePrefix}-code-token-string`,
+        symbol: `${sourcePrefix}-code-token-symbol`,
+        tag: `${sourcePrefix}-code-token-tag`,
+        unit: `${sourcePrefix}-code-token-unit`,
+        url: `${sourcePrefix}-code-token-url`,
+        variable: `${sourcePrefix}-code-token-variable`
+      }
+    },
     focusRing: `${sourcePrefix}-focus-ring`,
     link: {
       fg: `${sourcePrefix}-link-fg`
@@ -550,44 +599,6 @@ function buildColorCardVarNames(props) {
       from: `${sourcePrefix}-skeleton-from`,
       to: `${sourcePrefix}-skeleton-to`
     },
-    token: {
-      atrule: `${sourcePrefix}-token-atrule`,
-      attrName: `${sourcePrefix}-token-attr-name`,
-      attrValue: `${sourcePrefix}-token-attr-value`,
-      attribute: `${sourcePrefix}-token-attribute`,
-      boolean: `${sourcePrefix}-token-boolean`,
-      builtin: `${sourcePrefix}-token-builtin`,
-      cdata: `${sourcePrefix}-token-cdata`,
-      char: `${sourcePrefix}-token-char`,
-      class: `${sourcePrefix}-token-class`,
-      className: `${sourcePrefix}-token-class-name`,
-      comment: `${sourcePrefix}-token-comment`,
-      constant: `${sourcePrefix}-token-constant`,
-      deleted: `${sourcePrefix}-token-deleted`,
-      doctype: `${sourcePrefix}-token-doctype`,
-      entity: `${sourcePrefix}-token-entity`,
-      function: `${sourcePrefix}-token-function`,
-      hexcode: `${sourcePrefix}-token-hexcode`,
-      id: `${sourcePrefix}-token-id`,
-      important: `${sourcePrefix}-token-important`,
-      inserted: `${sourcePrefix}-token-inserted`,
-      keyword: `${sourcePrefix}-token-keyword`,
-      number: `${sourcePrefix}-token-number`,
-      operator: `${sourcePrefix}-token-operator`,
-      prolog: `${sourcePrefix}-token-prolog`,
-      property: `${sourcePrefix}-token-property`,
-      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
-      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
-      punctuation: `${sourcePrefix}-token-punctuation`,
-      regex: `${sourcePrefix}-token-regex`,
-      selector: `${sourcePrefix}-token-selector`,
-      string: `${sourcePrefix}-token-string`,
-      symbol: `${sourcePrefix}-token-symbol`,
-      tag: `${sourcePrefix}-token-tag`,
-      unit: `${sourcePrefix}-token-unit`,
-      url: `${sourcePrefix}-token-url`,
-      variable: `${sourcePrefix}-token-variable`
-    },
     solid: buildColorVariantVarNames({
       scheme,
       tone,
@@ -715,6 +726,48 @@ const colorVars = {
   backdrop: `var(${varNames.color.backdrop})`,
   bg: `var(${varNames.color.bg})`,
   border: `var(${varNames.color.border})`,
+  code: {
+    bg: `var(${varNames.color.code.bg})`,
+    fg: `var(${varNames.color.code.fg})`,
+    token: {
+      atrule: `var(${varNames.color.code.token.atrule})`,
+      attrName: `var(${varNames.color.code.token.attrName})`,
+      attrValue: `var(${varNames.color.code.token.attrValue})`,
+      attribute: `var(${varNames.color.code.token.attribute})`,
+      boolean: `var(${varNames.color.code.token.boolean})`,
+      builtin: `var(${varNames.color.code.token.builtin})`,
+      cdata: `var(${varNames.color.code.token.cdata})`,
+      char: `var(${varNames.color.code.token.char})`,
+      class: `var(${varNames.color.code.token.class})`,
+      className: `var(${varNames.color.code.token.className})`,
+      comment: `var(${varNames.color.code.token.comment})`,
+      constant: `var(${varNames.color.code.token.constant})`,
+      deleted: `var(${varNames.color.code.token.deleted})`,
+      doctype: `var(${varNames.color.code.token.doctype})`,
+      entity: `var(${varNames.color.code.token.entity})`,
+      function: `var(${varNames.color.code.token.function})`,
+      hexcode: `var(${varNames.color.code.token.hexcode})`,
+      id: `var(${varNames.color.code.token.id})`,
+      important: `var(${varNames.color.code.token.important})`,
+      inserted: `var(${varNames.color.code.token.inserted})`,
+      keyword: `var(${varNames.color.code.token.keyword})`,
+      number: `var(${varNames.color.code.token.number})`,
+      operator: `var(${varNames.color.code.token.operator})`,
+      prolog: `var(${varNames.color.code.token.prolog})`,
+      property: `var(${varNames.color.code.token.property})`,
+      pseudoClass: `var(${varNames.color.code.token.pseudoClass})`,
+      pseudoElement: `var(${varNames.color.code.token.pseudoElement})`,
+      punctuation: `var(${varNames.color.code.token.punctuation})`,
+      regex: `var(${varNames.color.code.token.regex})`,
+      selector: `var(${varNames.color.code.token.selector})`,
+      string: `var(${varNames.color.code.token.string})`,
+      symbol: `var(${varNames.color.code.token.symbol})`,
+      tag: `var(${varNames.color.code.token.tag})`,
+      unit: `var(${varNames.color.code.token.unit})`,
+      url: `var(${varNames.color.code.token.url})`,
+      variable: `var(${varNames.color.code.token.variable})`
+    }
+  },
   fg: `var(${varNames.color.fg})`,
   focusRing: `var(${varNames.color.focusRing})`,
   input: {
@@ -740,44 +793,6 @@ const colorVars = {
     from: `var(${varNames.color.skeleton.from})`,
     to: `var(${varNames.color.skeleton.to})`
   },
-  token: {
-    atrule: `var(${varNames.color.token.atrule})`,
-    attrName: `var(${varNames.color.token.attrName})`,
-    attrValue: `var(${varNames.color.token.attrValue})`,
-    attribute: `var(${varNames.color.token.attribute})`,
-    boolean: `var(${varNames.color.token.boolean})`,
-    builtin: `var(${varNames.color.token.builtin})`,
-    cdata: `var(${varNames.color.token.cdata})`,
-    char: `var(${varNames.color.token.char})`,
-    class: `var(${varNames.color.token.class})`,
-    className: `var(${varNames.color.token.className})`,
-    comment: `var(${varNames.color.token.comment})`,
-    constant: `var(${varNames.color.token.constant})`,
-    deleted: `var(${varNames.color.token.deleted})`,
-    doctype: `var(${varNames.color.token.doctype})`,
-    entity: `var(${varNames.color.token.entity})`,
-    function: `var(${varNames.color.token.function})`,
-    hexcode: `var(${varNames.color.token.hexcode})`,
-    id: `var(${varNames.color.token.id})`,
-    important: `var(${varNames.color.token.important})`,
-    inserted: `var(${varNames.color.token.inserted})`,
-    keyword: `var(${varNames.color.token.keyword})`,
-    number: `var(${varNames.color.token.number})`,
-    operator: `var(${varNames.color.token.operator})`,
-    prolog: `var(${varNames.color.token.prolog})`,
-    property: `var(${varNames.color.token.property})`,
-    pseudoClass: `var(${varNames.color.token.pseudoClass})`,
-    pseudoElement: `var(${varNames.color.token.pseudoElement})`,
-    punctuation: `var(${varNames.color.token.punctuation})`,
-    regex: `var(${varNames.color.token.regex})`,
-    selector: `var(${varNames.color.token.selector})`,
-    string: `var(${varNames.color.token.string})`,
-    symbol: `var(${varNames.color.token.symbol})`,
-    tag: `var(${varNames.color.token.tag})`,
-    unit: `var(${varNames.color.token.unit})`,
-    url: `var(${varNames.color.token.url})`,
-    variable: `var(${varNames.color.token.variable})`
-  },
   solid: buildColorVariantVars({
     variant: "solid"
   }),
@@ -909,6 +924,48 @@ function buildColorCardVars(props) {
       }), {})
     },
     backdrop: `var(${prefix.backdrop})`,
+    code: {
+      bg: `var(${prefix.code.bg})`,
+      fg: `var(${prefix.code.fg})`,
+      token: {
+        atrule: `var(${prefix.code.token.atrule})`,
+        attrName: `var(${prefix.code.token.attrName})`,
+        attrValue: `var(${prefix.code.token.attrValue})`,
+        attribute: `var(${prefix.code.token.attribute})`,
+        boolean: `var(${prefix.code.token.boolean})`,
+        builtin: `var(${prefix.code.token.builtin})`,
+        cdata: `var(${prefix.code.token.cdata})`,
+        char: `var(${prefix.code.token.char})`,
+        class: `var(${prefix.code.token.class})`,
+        className: `var(${prefix.code.token.className})`,
+        comment: `var(${prefix.code.token.comment})`,
+        constant: `var(${prefix.code.token.constant})`,
+        deleted: `var(${prefix.code.token.deleted})`,
+        doctype: `var(${prefix.code.token.doctype})`,
+        entity: `var(${prefix.code.token.entity})`,
+        function: `var(${prefix.code.token.function})`,
+        hexcode: `var(${prefix.code.token.hexcode})`,
+        id: `var(${prefix.code.token.id})`,
+        important: `var(${prefix.code.token.important})`,
+        inserted: `var(${prefix.code.token.inserted})`,
+        keyword: `var(${prefix.code.token.keyword})`,
+        number: `var(${prefix.code.token.number})`,
+        operator: `var(${prefix.code.token.operator})`,
+        prolog: `var(${prefix.code.token.prolog})`,
+        property: `var(${prefix.code.token.property})`,
+        pseudoClass: `var(${prefix.code.token.pseudoClass})`,
+        pseudoElement: `var(${prefix.code.token.pseudoElement})`,
+        punctuation: `var(${prefix.code.token.punctuation})`,
+        regex: `var(${prefix.code.token.regex})`,
+        selector: `var(${prefix.code.token.selector})`,
+        string: `var(${prefix.code.token.string})`,
+        symbol: `var(${prefix.code.token.symbol})`,
+        tag: `var(${prefix.code.token.tag})`,
+        unit: `var(${prefix.code.token.unit})`,
+        url: `var(${prefix.code.token.url})`,
+        variable: `var(${prefix.code.token.variable})`
+      }
+    },
     focusRing: `var(${prefix.focusRing})`,
     link: {
       fg: `var(${prefix.link.fg})`
@@ -927,44 +984,6 @@ function buildColorCardVars(props) {
       from: `var(${prefix.skeleton.from})`,
       to: `var(${prefix.skeleton.to})`
     },
-    token: {
-      atrule: `var(${prefix.token.atrule})`,
-      attrName: `var(${prefix.token.attrName})`,
-      attrValue: `var(${prefix.token.attrValue})`,
-      attribute: `var(${prefix.token.attribute})`,
-      boolean: `var(${prefix.token.boolean})`,
-      builtin: `var(${prefix.token.builtin})`,
-      cdata: `var(${prefix.token.cdata})`,
-      char: `var(${prefix.token.char})`,
-      class: `var(${prefix.token.class})`,
-      className: `var(${prefix.token.className})`,
-      comment: `var(${prefix.token.comment})`,
-      constant: `var(${prefix.token.constant})`,
-      deleted: `var(${prefix.token.deleted})`,
-      doctype: `var(${prefix.token.doctype})`,
-      entity: `var(${prefix.token.entity})`,
-      function: `var(${prefix.token.function})`,
-      hexcode: `var(${prefix.token.hexcode})`,
-      id: `var(${prefix.token.id})`,
-      important: `var(${prefix.token.important})`,
-      inserted: `var(${prefix.token.inserted})`,
-      keyword: `var(${prefix.token.keyword})`,
-      number: `var(${prefix.token.number})`,
-      operator: `var(${prefix.token.operator})`,
-      prolog: `var(${prefix.token.prolog})`,
-      property: `var(${prefix.token.property})`,
-      pseudoClass: `var(${prefix.token.pseudoClass})`,
-      pseudoElement: `var(${prefix.token.pseudoElement})`,
-      punctuation: `var(${prefix.token.punctuation})`,
-      regex: `var(${prefix.token.regex})`,
-      selector: `var(${prefix.token.selector})`,
-      string: `var(${prefix.token.string})`,
-      symbol: `var(${prefix.token.symbol})`,
-      tag: `var(${prefix.token.tag})`,
-      unit: `var(${prefix.token.unit})`,
-      url: `var(${prefix.token.url})`,
-      variable: `var(${prefix.token.variable})`
-    },
     solid: buildColorVariantVars({
       scheme,
       tone,
@@ -1033,70 +1052,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"
@@ -1105,125 +1124,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": {
@@ -1301,509 +1320,532 @@ const fontStyle = {
   layers: {
     primitive: rules$3
   }
-}, util$l = {};
+}, util$m = {};
 for (const space of SPACE)
-  _responsiveRule(util$l, `g-${space}`, {
+  _responsiveRule(util$m, `g-${space}`, {
     gap: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$l, `gx-${space}`, {
+  _responsiveRule(util$m, `gx-${space}`, {
     columnGap: vars.space[space]
   });
 for (const space of 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 SPACE)
-  _responsiveRule(util$7, `m-${space}`, {
+  _responsiveRule(util$8, `m-${space}`, {
     margin: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$7, `mx-${space}`, {
+  _responsiveRule(util$8, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$7, `my-${space}`, {
+  _responsiveRule(util$8, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$7, `mt-${space}`, {
+  _responsiveRule(util$8, `mt-${space}`, {
     marginTop: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$7, `mr-${space}`, {
+  _responsiveRule(util$8, `mr-${space}`, {
     marginRight: vars.space[space]
   });
 for (const space of SPACE)
-  _responsiveRule(util$7, `mb-${space}`, {
+  _responsiveRule(util$8, `mb-${space}`, {
     marginBottom: vars.space[space]
   });
 for (const space of 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
   }
@@ -2643,7 +2685,7 @@ const avatarStyle = {
 for (const tone of THEME_COLOR_STATE_TONES)
   primitive$l[`.badge-${tone}`] = {
     [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[1]
+    [varNames.color.fg]: vars.color.tinted[tone].fg[3]
   };
 const badgeStyle = {
   layers: {
@@ -2651,7 +2693,7 @@ const badgeStyle = {
   }
 }, primitive$k = {
   ".box": {
-    minWidth: 0,
+    // todo: move to aspects
     minHeight: 0,
     "@nest": {
       "&:is(ul), &:is(ol)": {
@@ -2738,6 +2780,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: solid.bg[0],
     [varNames.color.border]: solid.border[1],
     [varNames.color.fg]: solid.fg[0],
+    [varNames.color.muted.bg]: solid.bg[1],
     [varNames.color.muted.fg]: solid.fg[4],
     "--button-box-shadow": "none",
     "@nest": {
@@ -2745,24 +2788,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: solid.bg[1],
         [varNames.color.border]: solid.border[2],
         [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.bg]: solid.bg[2],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: solid.bg[2],
         [varNames.color.border]: solid.border[3],
         [varNames.color.fg]: solid.fg[0],
+        [varNames.color.muted.bg]: solid.bg[3],
         [varNames.color.muted.fg]: solid.fg[4]
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
@@ -2770,30 +2817,40 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: tinted.bg[1],
     [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.muted.bg]: tinted.bg[2],
+    [varNames.color.muted.fg]: tinted.fg[4],
     "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
     "@nest": {
       "&:not([data-disabled]):hover": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[1],
-        [varNames.color.fg]: tinted.fg[1]
+        [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[3],
+        [varNames.color.muted.fg]: tinted.fg[3]
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: tinted.bg[3],
         [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[4],
+        [varNames.color.muted.fg]: tinted.fg[3],
         "--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[2],
         [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[4],
+        [varNames.color.muted.fg]: tinted.fg[3],
         "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2]
+        [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
+        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
   }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
@@ -2801,6 +2858,7 @@ for (const tone of THEME_COLOR_STATE_TONES) {
     [varNames.color.bg]: tinted.bg[0],
     [varNames.color.border]: tinted.border[1],
     [varNames.color.fg]: tinted.fg[2],
+    [varNames.color.muted.bg]: tinted.bg[1],
     [varNames.color.muted.fg]: tinted.fg[4],
     "--button-box-shadow": "none",
     "@nest": {
@@ -2808,24 +2866,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
         [varNames.color.bg]: tinted.bg[1],
         [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[2],
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&:not([data-disabled]):active": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&:not([data-disabled])[data-selected]": {
         [varNames.color.bg]: tinted.bg[2],
         [varNames.color.border]: tinted.border[3],
         [varNames.color.fg]: tinted.fg[1],
+        [varNames.color.muted.bg]: tinted.bg[3],
         [varNames.color.muted.fg]: tinted.fg[3]
       },
       "&[data-disabled]": {
         [varNames.color.bg]: vars.color.default.tinted.bg[0],
         [varNames.color.border]: vars.color.default.tinted.border[0],
         [varNames.color.fg]: vars.color.default.tinted.fg[2],
+        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
         [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
       }
     }
@@ -2851,11 +2913,13 @@ const buttonStyle = {
     color: vars.color.fg,
     [varNames.color.bg]: vars.color.tinted.default.bg[0],
     [varNames.color.border]: vars.color.tinted.default.border[1],
+    [varNames.color.code.bg]: vars.color.code.bg,
+    [varNames.color.code.fg]: vars.color.code.fg,
     [varNames.color.fg]: vars.color.tinted.default.fg[0],
     [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",
@@ -2865,14 +2929,72 @@ const buttonStyle = {
         // @ts-expect-error - TODO: fix
         width: ["-moz-available", "-webkit-fill-available", "fill-available"]
       },
-      "&:is(a)": {
+      "a&": {
+        // border: 'none',
         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],
+      // },
     }
   }
 };
@@ -2892,10 +3014,12 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     "--card-bg-color": vars.color.bg,
     "--card-bg2-color": vars.color.muted.bg,
     "--card-border-color": vars.color.border,
-    "--card-code-bg-color": vars.color.muted.bg,
-    "--card-code-fg-color": vars.color.tinted.default.fg[4],
+    "--card-code-bg-color": vars.color.code.bg,
+    "--card-code-fg-color": vars.color.code.fg,
     "--card-fg-color": vars.color.fg,
     "--card-focus-ring-color": vars.color.focusRing,
+    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
+    "--card-hairline-hard-color": vars.color.tinted.default.border[2],
     "--card-icon-color": vars.color.fg,
     "--card-kbd-bg-color": vars.color.muted.bg,
     "--card-kbd-border-color": vars.color.tinted.default.border[1],
@@ -2907,11 +3031,9 @@ for (const tone of THEME_COLOR_CARD_TONES) {
     "--card-shadow-outline-color": vars.color.shadow.outline,
     "--card-shadow-umbra-color": vars.color.shadow.umbra,
     "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
-    "--card-shadow-ambient-color": vars.color.shadow.ambient,
+    "--card-shadow-ambient-color": vars.color.shadow.ambient
     // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
     // '--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$i[`.card.${toneMap[tone]}`] = toneProps;
 }
 const cardStyle = {
@@ -2927,48 +3049,50 @@ function _assignToneProps(toneProps, _varNames, _vars) {
     toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
   Object.assign(toneProps, {
     [_varNames.backdrop]: _vars.backdrop,
+    [_varNames.code.fg]: _vars.code.fg,
+    [_varNames.code.bg]: _vars.code.bg,
+    [_varNames.code.token.atrule]: _vars.code.token.atrule,
+    [_varNames.code.token.attrName]: _vars.code.token.attrName,
+    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
+    [_varNames.code.token.attribute]: _vars.code.token.attribute,
+    [_varNames.code.token.boolean]: _vars.code.token.boolean,
+    [_varNames.code.token.builtin]: _vars.code.token.builtin,
+    [_varNames.code.token.cdata]: _vars.code.token.cdata,
+    [_varNames.code.token.char]: _vars.code.token.char,
+    [_varNames.code.token.class]: _vars.code.token.class,
+    [_varNames.code.token.className]: _vars.code.token.className,
+    [_varNames.code.token.comment]: _vars.code.token.comment,
+    [_varNames.code.token.constant]: _vars.code.token.constant,
+    [_varNames.code.token.deleted]: _vars.code.token.deleted,
+    [_varNames.code.token.doctype]: _vars.code.token.doctype,
+    [_varNames.code.token.entity]: _vars.code.token.entity,
+    [_varNames.code.token.function]: _vars.code.token.function,
+    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
+    [_varNames.code.token.id]: _vars.code.token.id,
+    [_varNames.code.token.important]: _vars.code.token.important,
+    [_varNames.code.token.inserted]: _vars.code.token.inserted,
+    [_varNames.code.token.keyword]: _vars.code.token.keyword,
+    [_varNames.code.token.number]: _vars.code.token.number,
+    [_varNames.code.token.operator]: _vars.code.token.operator,
+    [_varNames.code.token.prolog]: _vars.code.token.prolog,
+    [_varNames.code.token.property]: _vars.code.token.property,
+    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
+    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
+    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
+    [_varNames.code.token.regex]: _vars.code.token.regex,
+    [_varNames.code.token.selector]: _vars.code.token.selector,
+    [_varNames.code.token.string]: _vars.code.token.string,
+    [_varNames.code.token.symbol]: _vars.code.token.symbol,
+    [_varNames.code.token.tag]: _vars.code.token.tag,
+    [_varNames.code.token.unit]: _vars.code.token.unit,
+    [_varNames.code.token.url]: _vars.code.token.url,
+    [_varNames.code.token.variable]: _vars.code.token.variable,
     [_varNames.focusRing]: _vars.focusRing,
     [_varNames.link.fg]: _vars.link.fg,
     [_varNames.shadow.outline]: _vars.shadow.outline,
     [_varNames.shadow.umbra]: _vars.shadow.umbra,
     [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
-    [_varNames.shadow.ambient]: _vars.shadow.ambient,
-    [_varNames.token.atrule]: _vars.token.atrule,
-    [_varNames.token.attrName]: _vars.token.attrName,
-    [_varNames.token.attrValue]: _vars.token.attrValue,
-    [_varNames.token.attribute]: _vars.token.attribute,
-    [_varNames.token.boolean]: _vars.token.boolean,
-    [_varNames.token.builtin]: _vars.token.builtin,
-    [_varNames.token.cdata]: _vars.token.cdata,
-    [_varNames.token.char]: _vars.token.char,
-    [_varNames.token.class]: _vars.token.class,
-    [_varNames.token.className]: _vars.token.className,
-    [_varNames.token.comment]: _vars.token.comment,
-    [_varNames.token.constant]: _vars.token.constant,
-    [_varNames.token.deleted]: _vars.token.deleted,
-    [_varNames.token.doctype]: _vars.token.doctype,
-    [_varNames.token.entity]: _vars.token.entity,
-    [_varNames.token.function]: _vars.token.function,
-    [_varNames.token.hexcode]: _vars.token.hexcode,
-    [_varNames.token.id]: _vars.token.id,
-    [_varNames.token.important]: _vars.token.important,
-    [_varNames.token.inserted]: _vars.token.inserted,
-    [_varNames.token.keyword]: _vars.token.keyword,
-    [_varNames.token.number]: _vars.token.number,
-    [_varNames.token.operator]: _vars.token.operator,
-    [_varNames.token.prolog]: _vars.token.prolog,
-    [_varNames.token.property]: _vars.token.property,
-    [_varNames.token.pseudoClass]: _vars.token.pseudoClass,
-    [_varNames.token.pseudoElement]: _vars.token.pseudoElement,
-    [_varNames.token.punctuation]: _vars.token.punctuation,
-    [_varNames.token.regex]: _vars.token.regex,
-    [_varNames.token.selector]: _vars.token.selector,
-    [_varNames.token.string]: _vars.token.string,
-    [_varNames.token.symbol]: _vars.token.symbol,
-    [_varNames.token.tag]: _vars.token.tag,
-    [_varNames.token.unit]: _vars.token.unit,
-    [_varNames.token.url]: _vars.token.url,
-    [_varNames.token.variable]: _vars.token.variable
+    [_varNames.shadow.ambient]: _vars.shadow.ambient
   });
   for (const variant of ["solid", "tinted"])
     for (const elementTone of THEME_COLOR_STATE_TONES) {
@@ -3224,7 +3348,7 @@ const headingStyle = {
     // '--color-bg': 'var(--color-tinted-default-bg-1)',
     // '--color-border': 'var(--color-tinted-default-border-2)',
     // '--color-fg': 'var(--color-tinted-default-fg-3)',
-    boxShadow: "inset 0 0 0 0.5px var(--color-border)",
+    boxShadow: "inset 0 0 0 0.5px var(--color-tinted-default-border-3)",
     background: "var(--color-muted-bg)",
     font: "inherit",
     verticalAlign: "top",
@@ -3451,21 +3575,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)",
@@ -3474,20 +3592,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) + &": {
@@ -3495,35 +3600,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",
@@ -3534,11 +3619,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)",
@@ -3550,40 +3633,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: {
@@ -3605,10 +3654,16 @@ const labelStyle = {
       },
       "& a:hover": {
         color: "var(--color-fg)"
+      },
+      "& code": {
+        fontFamily: vars.font.code.family,
+        color: "var(--color-code-fg)",
+        backgroundColor: "var(--color-muted-bg)",
+        borderRadius: vars.radius[2]
+      },
+      "& svg": {
+        color: "var(--color-muted-fg)"
       }
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
     }
   },
   // 'text-accent': {
@@ -3988,6 +4043,7 @@ const textStyle = {
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,
@@ -4113,7 +4169,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 += `}
 
 `;
@@ -4386,49 +4442,57 @@ function buildColorCardThemeProperties(theme, options) {
     scheme
   };
   return {
+    // backdrop
     [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
+    // code
+    [`${prefix}-code-bg`]: renderColor(tokens.code.bg, context),
+    [`${prefix}-code-fg`]: renderColor(tokens.code.fg, context),
+    // code / token
+    [`${prefix}-code-token-atrule`]: renderColor(tokens.code.token.atrule, context),
+    [`${prefix}-code-token-attr-name`]: renderColor(tokens.code.token.attrName, context),
+    [`${prefix}-code-token-attr-value`]: renderColor(tokens.code.token.attrValue, context),
+    [`${prefix}-code-token-attribute`]: renderColor(tokens.code.token.attribute, context),
+    [`${prefix}-code-token-boolean`]: renderColor(tokens.code.token.boolean, context),
+    [`${prefix}-code-token-builtin`]: renderColor(tokens.code.token.builtin, context),
+    [`${prefix}-code-token-cdata`]: renderColor(tokens.code.token.cdata, context),
+    [`${prefix}-code-token-char`]: renderColor(tokens.code.token.char, context),
+    [`${prefix}-code-token-class-name`]: renderColor(tokens.code.token.className, context),
+    [`${prefix}-code-token-class`]: renderColor(tokens.code.token.class, context),
+    [`${prefix}-code-token-comment`]: renderColor(tokens.code.token.comment, context),
+    [`${prefix}-code-token-constant`]: renderColor(tokens.code.token.constant, context),
+    [`${prefix}-code-token-deleted`]: renderColor(tokens.code.token.deleted, context),
+    [`${prefix}-code-token-doctype`]: renderColor(tokens.code.token.doctype, context),
+    [`${prefix}-code-token-entity`]: renderColor(tokens.code.token.entity, context),
+    [`${prefix}-code-token-function`]: renderColor(tokens.code.token.function, context),
+    [`${prefix}-code-token-hexcode`]: renderColor(tokens.code.token.hexcode, context),
+    [`${prefix}-code-token-id`]: renderColor(tokens.code.token.id, context),
+    [`${prefix}-code-token-important`]: renderColor(tokens.code.token.important, context),
+    [`${prefix}-code-token-inserted`]: renderColor(tokens.code.token.inserted, context),
+    [`${prefix}-code-token-keyword`]: renderColor(tokens.code.token.keyword, context),
+    [`${prefix}-code-token-number`]: renderColor(tokens.code.token.number, context),
+    [`${prefix}-code-token-operator`]: renderColor(tokens.code.token.operator, context),
+    [`${prefix}-code-token-prolog`]: renderColor(tokens.code.token.prolog, context),
+    [`${prefix}-code-token-property`]: renderColor(tokens.code.token.property, context),
+    [`${prefix}-code-token-pseudo-class`]: renderColor(tokens.code.token.pseudoClass, context),
+    [`${prefix}-code-token-pseudo-eelement`]: renderColor(tokens.code.token.pseudoElement, context),
+    [`${prefix}-code-token-punctuation`]: renderColor(tokens.code.token.punctuation, context),
+    [`${prefix}-code-token-regex`]: renderColor(tokens.code.token.regex, context),
+    [`${prefix}-code-token-selector`]: renderColor(tokens.code.token.selector, context),
+    [`${prefix}-code-token-string`]: renderColor(tokens.code.token.string, context),
+    [`${prefix}-code-token-symbol`]: renderColor(tokens.code.token.symbol, context),
+    [`${prefix}-code-token-tag`]: renderColor(tokens.code.token.tag, context),
+    [`${prefix}-code-token-unit`]: renderColor(tokens.code.token.unit, context),
+    [`${prefix}-code-token-url`]: renderColor(tokens.code.token.url, context),
+    [`${prefix}-code-token-variable`]: renderColor(tokens.code.token.variable, context),
+    // focus ring
     [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
+    // link
     [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
+    // shadow
     [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
     [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
     [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
-    [`${prefix}-token-atrule`]: renderColor(tokens.token.atrule, context),
-    [`${prefix}-token-attr-name`]: renderColor(tokens.token.attrName, context),
-    [`${prefix}-token-attr-value`]: renderColor(tokens.token.attrValue, context),
-    [`${prefix}-token-attribute`]: renderColor(tokens.token.attribute, context),
-    [`${prefix}-token-boolean`]: renderColor(tokens.token.boolean, context),
-    [`${prefix}-token-builtin`]: renderColor(tokens.token.builtin, context),
-    [`${prefix}-token-cdata`]: renderColor(tokens.token.cdata, context),
-    [`${prefix}-token-char`]: renderColor(tokens.token.char, context),
-    [`${prefix}-token-class-name`]: renderColor(tokens.token.className, context),
-    [`${prefix}-token-class`]: renderColor(tokens.token.class, context),
-    [`${prefix}-token-comment`]: renderColor(tokens.token.comment, context),
-    [`${prefix}-token-constant`]: renderColor(tokens.token.constant, context),
-    [`${prefix}-token-deleted`]: renderColor(tokens.token.deleted, context),
-    [`${prefix}-token-doctype`]: renderColor(tokens.token.doctype, context),
-    [`${prefix}-token-entity`]: renderColor(tokens.token.entity, context),
-    [`${prefix}-token-function`]: renderColor(tokens.token.function, context),
-    [`${prefix}-token-hexcode`]: renderColor(tokens.token.hexcode, context),
-    [`${prefix}-token-id`]: renderColor(tokens.token.id, context),
-    [`${prefix}-token-important`]: renderColor(tokens.token.important, context),
-    [`${prefix}-token-inserted`]: renderColor(tokens.token.inserted, context),
-    [`${prefix}-token-keyword`]: renderColor(tokens.token.keyword, context),
-    [`${prefix}-token-number`]: renderColor(tokens.token.number, context),
-    [`${prefix}-token-operator`]: renderColor(tokens.token.operator, context),
-    [`${prefix}-token-prolog`]: renderColor(tokens.token.prolog, context),
-    [`${prefix}-token-property`]: renderColor(tokens.token.property, context),
-    [`${prefix}-token-pseudo-class`]: renderColor(tokens.token.pseudoClass, context),
-    [`${prefix}-token-pseudo-eelement`]: renderColor(tokens.token.pseudoElement, context),
-    [`${prefix}-token-punctuation`]: renderColor(tokens.token.punctuation, context),
-    [`${prefix}-token-regex`]: renderColor(tokens.token.regex, context),
-    [`${prefix}-token-selector`]: renderColor(tokens.token.selector, context),
-    [`${prefix}-token-string`]: renderColor(tokens.token.string, context),
-    [`${prefix}-token-symbol`]: renderColor(tokens.token.symbol, context),
-    [`${prefix}-token-tag`]: renderColor(tokens.token.tag, context),
-    [`${prefix}-token-unit`]: renderColor(tokens.token.unit, context),
-    [`${prefix}-token-url`]: renderColor(tokens.token.url, context),
-    [`${prefix}-token-variable`]: renderColor(tokens.token.variable, context)
+    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context)
   };
 }
 function compileTheme(theme) {
@@ -4560,6 +4624,7 @@ function box(props) {
     inset(props),
     margin(props),
     maxWidth(props),
+    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),
@@ -4608,6 +4673,9 @@ function label(props) {
 function popover() {
   return _comp("popover");
 }
+function popoverCard() {
+  return _comp("popover-card");
+}
 function radio() {
   return _comp("radio");
 }
@@ -4723,10 +4791,12 @@ export {
   maxWidth,
   menu,
   menuDivider,
+  minWidth,
   overflow,
   padding,
   pointerEvents,
   popover,
+  popoverCard,
   position,
   px,
   radio,