@sanity/ui 3.0.0-static.19 → 3.0.0-static.20

package/dist/css.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), version = "3.0.0-static.19";
+var theme = require("@sanity/ui/theme"), version = "3.0.0-static.20";
 function _hash(value) {
   let h = 5381;
   for (let index = 0, len = value.length; index < len; index++)
@@ -514,15 +514,18 @@ function resolveTheme(options) {
       iconSize: null,
       featureSettings: null,
       fontWeight: null,
+      capHeight: null,
       iconOffset: null,
+      customIconSize: null,
+      customIconOffset: null,
       code: {
         family: theme$1.font.code.family,
         featureSettings: theme$1.font.code.featureSettings ?? "normal",
         weight: {
-          regular: String(theme$1.font.code.weights.regular),
-          medium: String(theme$1.font.code.weights.medium),
-          semibold: String(theme$1.font.code.weights.semibold),
-          bold: String(theme$1.font.code.weights.bold)
+          regular: String(theme$1.font.code.weight.regular),
+          medium: String(theme$1.font.code.weight.medium),
+          semibold: String(theme$1.font.code.weight.semibold),
+          bold: String(theme$1.font.code.weight.bold)
         },
         sizes: _fromEntries(theme.FONT_CODE_SIZE.map((s) => [s, {
           fontSize: rem(theme$1.font.code.sizes[s].fontSize),
@@ -530,17 +533,18 @@ function resolveTheme(options) {
           letterSpacing: rem(theme$1.font.code.sizes[s].letterSpacing),
           ascenderHeight: rem(theme$1.font.code.sizes[s].ascenderHeight),
           descenderHeight: rem(theme$1.font.code.sizes[s].descenderHeight),
-          iconSize: rem(theme$1.font.code.sizes[s].iconSize)
+          iconSize: rem(theme$1.font.code.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.code.sizes[s].customIconSize)
         }]))
       },
       heading: {
         family: theme$1.font.heading.family,
         featureSettings: theme$1.font.heading.featureSettings ?? "normal",
         weight: {
-          regular: String(theme$1.font.heading.weights.regular),
-          medium: String(theme$1.font.heading.weights.medium),
-          semibold: String(theme$1.font.heading.weights.semibold),
-          bold: String(theme$1.font.heading.weights.bold)
+          regular: String(theme$1.font.heading.weight.regular),
+          medium: String(theme$1.font.heading.weight.medium),
+          semibold: String(theme$1.font.heading.weight.semibold),
+          bold: String(theme$1.font.heading.weight.bold)
         },
         sizes: _fromEntries(theme.FONT_HEADING_SIZE.map((s) => [s, {
           fontSize: rem(theme$1.font.heading.sizes[s].fontSize),
@@ -548,17 +552,18 @@ function resolveTheme(options) {
           letterSpacing: rem(theme$1.font.heading.sizes[s].letterSpacing),
           ascenderHeight: rem(theme$1.font.heading.sizes[s].ascenderHeight),
           descenderHeight: rem(theme$1.font.heading.sizes[s].descenderHeight),
-          iconSize: rem(theme$1.font.heading.sizes[s].iconSize)
+          iconSize: rem(theme$1.font.heading.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.heading.sizes[s].customIconSize)
         }]))
       },
       label: {
         family: theme$1.font.label.family,
         featureSettings: theme$1.font.label.featureSettings ?? "normal",
         weight: {
-          regular: String(theme$1.font.label.weights.regular),
-          medium: String(theme$1.font.label.weights.medium),
-          semibold: String(theme$1.font.label.weights.semibold),
-          bold: String(theme$1.font.label.weights.bold)
+          regular: String(theme$1.font.label.weight.regular),
+          medium: String(theme$1.font.label.weight.medium),
+          semibold: String(theme$1.font.label.weight.semibold),
+          bold: String(theme$1.font.label.weight.bold)
         },
         sizes: _fromEntries(theme.FONT_LABEL_SIZE.map((s) => [s, {
           fontSize: rem(theme$1.font.label.sizes[s].fontSize),
@@ -566,17 +571,18 @@ function resolveTheme(options) {
           letterSpacing: rem(theme$1.font.label.sizes[s].letterSpacing),
           ascenderHeight: rem(theme$1.font.label.sizes[s].ascenderHeight),
           descenderHeight: rem(theme$1.font.label.sizes[s].descenderHeight),
-          iconSize: rem(theme$1.font.label.sizes[s].iconSize)
+          iconSize: rem(theme$1.font.label.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.label.sizes[s].customIconSize)
         }]))
       },
       text: {
         family: theme$1.font.text.family,
         featureSettings: theme$1.font.text.featureSettings ?? "normal",
         weight: {
-          regular: String(theme$1.font.text.weights.regular),
-          medium: String(theme$1.font.text.weights.medium),
-          semibold: String(theme$1.font.text.weights.semibold),
-          bold: String(theme$1.font.text.weights.bold)
+          regular: String(theme$1.font.text.weight.regular),
+          medium: String(theme$1.font.text.weight.medium),
+          semibold: String(theme$1.font.text.weight.semibold),
+          bold: String(theme$1.font.text.weight.bold)
         },
         sizes: _fromEntries(theme.FONT_TEXT_SIZE.map((s) => [s, {
           fontSize: rem(theme$1.font.text.sizes[s].fontSize),
@@ -584,7 +590,8 @@ function resolveTheme(options) {
           letterSpacing: rem(theme$1.font.text.sizes[s].letterSpacing),
           ascenderHeight: rem(theme$1.font.text.sizes[s].ascenderHeight),
           descenderHeight: rem(theme$1.font.text.sizes[s].descenderHeight),
-          iconSize: rem(theme$1.font.text.sizes[s].iconSize)
+          iconSize: rem(theme$1.font.text.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.text.sizes[s].customIconSize)
         }]))
       },
       skeleton: {
@@ -692,14 +699,15 @@ function resolveTheme(options) {
       theme: theme2,
       scheme,
       tone
-    } = options2, card2 = theme2.color[tone], cardOptions = {
-      defaultHue: card2._hue
-    }, i = scheme === "dark" ? 1 : 0, defaultElement = buildElementContract({
+    } = options2, card2 = theme2.color[tone], i = scheme === "dark" ? 1 : 0, defaultElement = buildElementContract({
       card: card2,
       variant: "tinted",
       tone: "default",
       scheme
-    });
+    }), bgValue = defaultElement.bg[0], cardOptions = {
+      bgValue,
+      defaultHue: card2._hue
+    };
     return {
       avatar: _fromEntries(theme.AVATAR_COLORS.map((c) => [c, {
         bg: renderColor(card2.avatar[c].bg[i], {
@@ -771,7 +779,7 @@ function resolveTheme(options) {
         variant: v,
         tone: e,
         scheme,
-        bgValue: defaultElement.bg[0]
+        bgValue
       })]))]))
     };
   }
@@ -831,81 +839,81 @@ function toBoxShadow(value) {
 }
 const result = resolveTheme({
   theme: theme.buildTheme_v3()
-}), vars = result.vars, varNames = result.varNames, properties = result.properties, util$v = {};
-_responsiveRule(util$v, "border", {
+}), vars = result.vars, varNames = result.varNames, properties = result.properties, util$w = {};
+_responsiveRule(util$w, "border", {
   border: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$v, "border-t", {
+_responsiveRule(util$w, "border-t", {
   borderTop: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$v, "border-r", {
+_responsiveRule(util$w, "border-r", {
   borderRight: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$v, "border-b", {
+_responsiveRule(util$w, "border-b", {
   borderBottom: `1px solid ${vars.color.border}`
 });
-_responsiveRule(util$v, "border-l", {
+_responsiveRule(util$w, "border-l", {
   borderLeft: `1px solid ${vars.color.border}`
 });
 const borderStyle = {
   layers: {
-    util: util$v
+    util: util$w
   }
-}, util$u = {};
-_responsiveRule(util$u, "box-border", {
+}, util$v = {};
+_responsiveRule(util$v, "box-border", {
   boxSizing: "border-box"
 });
-_responsiveRule(util$u, "box-content", {
+_responsiveRule(util$v, "box-content", {
   boxSizing: "content-box"
 });
 const boxSizingStyle = {
   layers: {
-    util: util$u
+    util: util$v
   }
-}, util$t = {};
-_responsiveRule(util$t, "block", {
+}, util$u = {};
+_responsiveRule(util$u, "block", {
   nest: {
     "&:not([hidden])": {
       display: "block"
     }
   }
 });
-_responsiveRule(util$t, "flex", {
+_responsiveRule(util$u, "flex", {
   nest: {
     "&:not([hidden])": {
       display: "flex"
     }
   }
 });
-_responsiveRule(util$t, "grid", {
+_responsiveRule(util$u, "grid", {
   nest: {
     "&:not([hidden])": {
       display: "grid"
     }
   }
 });
-_responsiveRule(util$t, "inline-block", {
+_responsiveRule(util$u, "inline-block", {
   nest: {
     "&:not([hidden])": {
       display: "inline-block"
     }
   }
 });
-_responsiveRule(util$t, "inline-flex", {
+_responsiveRule(util$u, "inline-flex", {
   nest: {
     "&:not([hidden])": {
       display: "inline-flex"
     }
   }
 });
-_responsiveRule(util$t, "inline-grid", {
+_responsiveRule(util$u, "inline-grid", {
   nest: {
     "&:not([hidden])": {
       display: "inline-grid"
     }
   }
 });
-_responsiveRule(util$t, "none", {
+_responsiveRule(util$u, "none", {
   nest: {
     "&:not([hidden])": {
       display: "none"
@@ -914,125 +922,125 @@ _responsiveRule(util$t, "none", {
 });
 const displayStyle = {
   layers: {
-    util: util$t
+    util: util$u
   }
-}, util$s = {};
-_responsiveRule(util$s, "flex-align-flex-start", {
+}, util$t = {};
+_responsiveRule(util$t, "flex-align-flex-start", {
   alignItems: "flex-start"
 });
-_responsiveRule(util$s, "flex-align-flex-end", {
+_responsiveRule(util$t, "flex-align-flex-end", {
   alignItems: "flex-end"
 });
-_responsiveRule(util$s, "flex-align-center", {
+_responsiveRule(util$t, "flex-align-center", {
   alignItems: "center"
 });
-_responsiveRule(util$s, "flex-align-stretch", {
+_responsiveRule(util$t, "flex-align-stretch", {
   alignItems: "stretch"
 });
-_responsiveRule(util$s, "flex-align-baseline", {
+_responsiveRule(util$t, "flex-align-baseline", {
   alignItems: "baseline"
 });
 const flexAlignStyle = {
   layers: {
-    util: util$s
+    util: util$t
   }
-}, util$r = {};
-_responsiveRule(util$r, "f-row", {
+}, util$s = {};
+_responsiveRule(util$s, "f-row", {
   flexDirection: "row"
 });
-_responsiveRule(util$r, "f-column", {
+_responsiveRule(util$s, "f-column", {
   flexDirection: "column"
 });
 const flexDirectionStyle = {
   layers: {
-    util: util$r
+    util: util$s
   }
-}, util$q = {};
-_responsiveRule(util$q, "flex-justify-flex-start", {
+}, util$r = {};
+_responsiveRule(util$r, "flex-justify-flex-start", {
   justifyContent: "flex-start"
 });
-_responsiveRule(util$q, "flex-justify-flex-end", {
+_responsiveRule(util$r, "flex-justify-flex-end", {
   justifyContent: "flex-end"
 });
-_responsiveRule(util$q, "flex-justify-center", {
+_responsiveRule(util$r, "flex-justify-center", {
   justifyContent: "center"
 });
-_responsiveRule(util$q, "flex-justify-space-between", {
+_responsiveRule(util$r, "flex-justify-space-between", {
   justifyContent: "space-between"
 });
-_responsiveRule(util$q, "flex-justify-space-around", {
+_responsiveRule(util$r, "flex-justify-space-around", {
   justifyContent: "space-around"
 });
-_responsiveRule(util$q, "flex-justify-space-evenly", {
+_responsiveRule(util$r, "flex-justify-space-evenly", {
   justifyContent: "space-evenly"
 });
 const flexJustifyStyle = {
   layers: {
-    util: util$q
+    util: util$r
   }
-}, util$p = {};
-_responsiveRule(util$p, "flex-nowrap", {
+}, util$q = {};
+_responsiveRule(util$q, "flex-nowrap", {
   flexWrap: "nowrap"
 });
-_responsiveRule(util$p, "flex-wrap", {
+_responsiveRule(util$q, "flex-wrap", {
   flexWrap: "wrap"
 });
-_responsiveRule(util$p, "flex-wrap-reverse", {
+_responsiveRule(util$q, "flex-wrap-reverse", {
   flexWrap: "wrap-reverse"
 });
 const flexWrapStyle = {
   layers: {
-    util: util$p
+    util: util$q
   }
-}, util$o = {};
-_responsiveRule(util$o, "f-none", {
+}, util$p = {};
+_responsiveRule(util$p, "f-none", {
   flex: "none"
 });
-_responsiveRule(util$o, "f-auto", {
+_responsiveRule(util$p, "f-auto", {
   flex: "auto"
 });
-_responsiveRule(util$o, "f-initial", {
+_responsiveRule(util$p, "f-initial", {
   flex: "initial"
 });
-_responsiveRule(util$o, "f-1", {
+_responsiveRule(util$p, "f-1", {
   flex: 1
 });
-_responsiveRule(util$o, "f-2", {
+_responsiveRule(util$p, "f-2", {
   flex: 2
 });
-_responsiveRule(util$o, "f-3", {
+_responsiveRule(util$p, "f-3", {
   flex: 3
 });
-_responsiveRule(util$o, "f-4", {
+_responsiveRule(util$p, "f-4", {
   flex: 4
 });
-_responsiveRule(util$o, "f-5", {
+_responsiveRule(util$p, "f-5", {
   flex: 5
 });
-_responsiveRule(util$o, "f-6", {
+_responsiveRule(util$p, "f-6", {
   flex: 6
 });
-_responsiveRule(util$o, "f-7", {
+_responsiveRule(util$p, "f-7", {
   flex: 7
 });
-_responsiveRule(util$o, "f-8", {
+_responsiveRule(util$p, "f-8", {
   flex: 8
 });
-_responsiveRule(util$o, "f-9", {
+_responsiveRule(util$p, "f-9", {
   flex: 9
 });
-_responsiveRule(util$o, "f-10", {
+_responsiveRule(util$p, "f-10", {
   flex: 10
 });
-_responsiveRule(util$o, "f-11", {
+_responsiveRule(util$p, "f-11", {
   flex: 11
 });
-_responsiveRule(util$o, "f-12", {
+_responsiveRule(util$p, "f-12", {
   flex: 12
 });
 const flexStyle = {
   layers: {
-    util: util$o
+    util: util$p
   }
 }, primitive$q = {
   ".font": {
@@ -1046,8 +1054,9 @@ const flexStyle = {
     padding: "1px 0",
     margin: "0",
     vars: {
-      [varNames.font.iconOffset]: `calc(((${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - ${vars.font.iconSize}) / 2)`,
-      [varNames.font.fontWeight]: vars.font.weight.regular
+      [varNames.font.capHeight]: `calc(${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight})`,
+      [varNames.font.iconOffset]: `calc((${vars.font.capHeight} - ${vars.font.iconSize}) / 2)`,
+      [varNames.font.customIconOffset]: `calc((${vars.font.capHeight} - ${vars.font.customIconSize}) / 2)`
     },
     nest: {
       "&:before": {
@@ -1067,11 +1076,10 @@ const flexStyle = {
         // Make sure SVGs are rendered as inline elements
         display: "inline"
       },
-      // TODO
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
+      "& svg:not([data-sanity-icon])": {
+        fontSize: vars.font.customIconSize,
+        margin: vars.font.customIconOffset
+      },
       "& [data-sanity-icon]": {
         fontSize: vars.font.iconSize,
         margin: vars.font.iconOffset,
@@ -1103,509 +1111,543 @@ const flexStyle = {
   layers: {
     primitive: primitive$q
   }
-}, util$n = {};
+}, util$o = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$n, `g-${space}`, {
+  _responsiveRule(util$o, `g-${space}`, {
     gap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$n, `gx-${space}`, {
+  _responsiveRule(util$o, `gx-${space}`, {
     columnGap: vars.space[space]
   });
 for (const space of theme.SPACE)
-  _responsiveRule(util$n, `gy-${space}`, {
+  _responsiveRule(util$o, `gy-${space}`, {
     rowGap: vars.space[space]
   });
 const gapStyle = {
   layers: {
-    util: util$n
+    util: util$o
   }
-}, util$m = {};
-_responsiveRule(util$m, "auto-cols-auto", {
+}, util$n = {};
+_responsiveRule(util$n, "auto-cols-auto", {
   gridAutoColumns: "auto"
 });
-_responsiveRule(util$m, "auto-cols-min", {
+_responsiveRule(util$n, "auto-cols-min", {
   gridAutoColumns: "min-content"
 });
-_responsiveRule(util$m, "auto-cols-max", {
+_responsiveRule(util$n, "auto-cols-max", {
   gridAutoColumns: "max-content"
 });
-_responsiveRule(util$m, "auto-cols-fr", {
+_responsiveRule(util$n, "auto-cols-fr", {
   gridAutoColumns: "minmax(0, 1fr)"
 });
 const gridAutoColumnsStyle = {
   layers: {
-    util: util$m
+    util: util$n
   }
-}, util$l = {};
-_responsiveRule(util$l, "auto-flow-row", {
+}, util$m = {};
+_responsiveRule(util$m, "auto-flow-row", {
   gridAutoFlow: "row"
 });
-_responsiveRule(util$l, "auto-flow-column", {
+_responsiveRule(util$m, "auto-flow-column", {
   gridAutoFlow: "column"
 });
-_responsiveRule(util$l, "auto-flow-row-dense", {
+_responsiveRule(util$m, "auto-flow-row-dense", {
   gridAutoFlow: "row dense"
 });
-_responsiveRule(util$l, "auto-flow-column-dense", {
+_responsiveRule(util$m, "auto-flow-column-dense", {
   gridAutoFlow: "column dense"
 });
 const gridAutoFlowStyle = {
   layers: {
-    util: util$l
+    util: util$m
   }
-}, util$k = {};
-_responsiveRule(util$k, "auto-rows-auto", {
+}, util$l = {};
+_responsiveRule(util$l, "auto-rows-auto", {
   gridAutoRows: "auto"
 });
-_responsiveRule(util$k, "auto-rows-min", {
+_responsiveRule(util$l, "auto-rows-min", {
   gridAutoRows: "min-content"
 });
-_responsiveRule(util$k, "auto-rows-max", {
+_responsiveRule(util$l, "auto-rows-max", {
   gridAutoRows: "max-content"
 });
-_responsiveRule(util$k, "auto-rows-fr", {
+_responsiveRule(util$l, "auto-rows-fr", {
   gridAutoRows: "minmax(0, 1fr)"
 });
 const gridAutoRowsStyle = {
   layers: {
-    util: util$k
+    util: util$l
   }
-}, util$j = {};
-_responsiveRule(util$j, "cols-1", {
+}, util$k = {};
+_responsiveRule(util$k, "cols-1", {
   gridTemplateColumns: "repeat(1, 1fr)"
 });
-_responsiveRule(util$j, "cols-2", {
+_responsiveRule(util$k, "cols-2", {
   gridTemplateColumns: "repeat(2, 1fr)"
 });
-_responsiveRule(util$j, "cols-3", {
+_responsiveRule(util$k, "cols-3", {
   gridTemplateColumns: "repeat(3, 1fr)"
 });
-_responsiveRule(util$j, "cols-4", {
+_responsiveRule(util$k, "cols-4", {
   gridTemplateColumns: "repeat(4, 1fr)"
 });
-_responsiveRule(util$j, "cols-5", {
+_responsiveRule(util$k, "cols-5", {
   gridTemplateColumns: "repeat(5, 1fr)"
 });
-_responsiveRule(util$j, "cols-6", {
+_responsiveRule(util$k, "cols-6", {
   gridTemplateColumns: "repeat(6, 1fr)"
 });
-_responsiveRule(util$j, "cols-7", {
+_responsiveRule(util$k, "cols-7", {
   gridTemplateColumns: "repeat(7, 1fr)"
 });
-_responsiveRule(util$j, "cols-8", {
+_responsiveRule(util$k, "cols-8", {
   gridTemplateColumns: "repeat(8, 1fr)"
 });
-_responsiveRule(util$j, "cols-9", {
+_responsiveRule(util$k, "cols-9", {
   gridTemplateColumns: "repeat(9, 1fr)"
 });
-_responsiveRule(util$j, "cols-10", {
+_responsiveRule(util$k, "cols-10", {
   gridTemplateColumns: "repeat(10, 1fr)"
 });
-_responsiveRule(util$j, "cols-12", {
+_responsiveRule(util$k, "cols-12", {
   gridTemplateColumns: "repeat(12, 1fr)"
 });
 const gridColumnsStyle = {
   layers: {
-    util: util$j
+    util: util$k
   }
-}, util$i = {};
-_responsiveRule(util$i, "rows-1", {
+}, util$j = {};
+_responsiveRule(util$j, "rows-1", {
   gridTemplateRows: "repeat(1, 1fr)"
 });
-_responsiveRule(util$i, "rows-2", {
+_responsiveRule(util$j, "rows-2", {
   gridTemplateRows: "repeat(2, 1fr)"
 });
-_responsiveRule(util$i, "rows-3", {
+_responsiveRule(util$j, "rows-3", {
   gridTemplateRows: "repeat(3, 1fr)"
 });
-_responsiveRule(util$i, "rows-4", {
+_responsiveRule(util$j, "rows-4", {
   gridTemplateRows: "repeat(4, 1fr)"
 });
-_responsiveRule(util$i, "rows-5", {
+_responsiveRule(util$j, "rows-5", {
   gridTemplateRows: "repeat(5, 1fr)"
 });
-_responsiveRule(util$i, "rows-6", {
+_responsiveRule(util$j, "rows-6", {
   gridTemplateRows: "repeat(6, 1fr)"
 });
-_responsiveRule(util$i, "rows-7", {
+_responsiveRule(util$j, "rows-7", {
   gridTemplateRows: "repeat(7, 1fr)"
 });
-_responsiveRule(util$i, "rows-8", {
+_responsiveRule(util$j, "rows-8", {
   gridTemplateRows: "repeat(8, 1fr)"
 });
-_responsiveRule(util$i, "rows-9", {
+_responsiveRule(util$j, "rows-9", {
   gridTemplateRows: "repeat(9, 1fr)"
 });
-_responsiveRule(util$i, "rows-10", {
+_responsiveRule(util$j, "rows-10", {
   gridTemplateRows: "repeat(10, 1fr)"
 });
-_responsiveRule(util$i, "rows-12", {
+_responsiveRule(util$j, "rows-12", {
   gridTemplateRows: "repeat(12, 1fr)"
 });
 const gridRowsStyle = {
   layers: {
-    util: util$i
+    util: util$j
   }
-}, util$h = {};
-_responsiveRule(util$h, "col-auto", {
+}, util$i = {};
+_responsiveRule(util$i, "col-auto", {
   gridColumn: "auto"
 });
-_responsiveRule(util$h, "col-full", {
+_responsiveRule(util$i, "col-full", {
   gridColumn: "1 / -1"
 });
-_responsiveRule(util$h, "col-1", {
+_responsiveRule(util$i, "col-1", {
   gridColumn: "span 1 / span 1"
 });
-_responsiveRule(util$h, "col-2", {
+_responsiveRule(util$i, "col-2", {
   gridColumn: "span 2 / span 2"
 });
-_responsiveRule(util$h, "col-3", {
+_responsiveRule(util$i, "col-3", {
   gridColumn: "span 3 / span 3"
 });
-_responsiveRule(util$h, "col-4", {
+_responsiveRule(util$i, "col-4", {
   gridColumn: "span 4 / span 4"
 });
-_responsiveRule(util$h, "col-5", {
+_responsiveRule(util$i, "col-5", {
   gridColumn: "span 5 / span 5"
 });
-_responsiveRule(util$h, "col-6", {
+_responsiveRule(util$i, "col-6", {
   gridColumn: "span 6 / span 6"
 });
-_responsiveRule(util$h, "col-7", {
+_responsiveRule(util$i, "col-7", {
   gridColumn: "span 7 / span 7"
 });
-_responsiveRule(util$h, "col-8", {
+_responsiveRule(util$i, "col-8", {
   gridColumn: "span 8 / span 8"
 });
-_responsiveRule(util$h, "col-9", {
+_responsiveRule(util$i, "col-9", {
   gridColumn: "span 9 / span 9"
 });
-_responsiveRule(util$h, "col-10", {
+_responsiveRule(util$i, "col-10", {
   gridColumn: "span 10 / span 10"
 });
-_responsiveRule(util$h, "col-12", {
+_responsiveRule(util$i, "col-12", {
   gridColumn: "span 12 / span 12"
 });
 const gridColumnStyle = {
   layers: {
-    util: util$h
+    util: util$i
   }
-}, util$g = {};
-_responsiveRule(util$g, "col-end-auto", {
+}, util$h = {};
+_responsiveRule(util$h, "col-end-auto", {
   gridColumnEnd: "auto"
 });
-_responsiveRule(util$g, "col-end-1", {
+_responsiveRule(util$h, "col-end-1", {
   gridColumnEnd: "1"
 });
-_responsiveRule(util$g, "col-end-2", {
+_responsiveRule(util$h, "col-end-2", {
   gridColumnEnd: "2"
 });
-_responsiveRule(util$g, "col-end-3", {
+_responsiveRule(util$h, "col-end-3", {
   gridColumnEnd: "3"
 });
-_responsiveRule(util$g, "col-end-4", {
+_responsiveRule(util$h, "col-end-4", {
   gridColumnEnd: "4"
 });
-_responsiveRule(util$g, "col-end-5", {
+_responsiveRule(util$h, "col-end-5", {
   gridColumnEnd: "5"
 });
-_responsiveRule(util$g, "col-end-6", {
+_responsiveRule(util$h, "col-end-6", {
   gridColumnEnd: "6"
 });
-_responsiveRule(util$g, "col-end-7", {
+_responsiveRule(util$h, "col-end-7", {
   gridColumnEnd: "7"
 });
-_responsiveRule(util$g, "col-end-8", {
+_responsiveRule(util$h, "col-end-8", {
   gridColumnEnd: "8"
 });
-_responsiveRule(util$g, "col-end-9", {
+_responsiveRule(util$h, "col-end-9", {
   gridColumnEnd: "9"
 });
-_responsiveRule(util$g, "col-end-10", {
+_responsiveRule(util$h, "col-end-10", {
   gridColumnEnd: "10"
 });
-_responsiveRule(util$g, "col-end-11", {
+_responsiveRule(util$h, "col-end-11", {
   gridColumnEnd: "11"
 });
-_responsiveRule(util$g, "col-end-12", {
+_responsiveRule(util$h, "col-end-12", {
   gridColumnEnd: "12"
 });
 const gridColumnEndStyle = {
   layers: {
-    util: util$g
+    util: util$h
   }
-}, util$f = {};
-_responsiveRule(util$f, "col-start-auto", {
+}, util$g = {};
+_responsiveRule(util$g, "col-start-auto", {
   gridColumnStart: "auto"
 });
-_responsiveRule(util$f, "col-start-1", {
+_responsiveRule(util$g, "col-start-1", {
   gridColumnStart: "1"
 });
-_responsiveRule(util$f, "col-start-2", {
+_responsiveRule(util$g, "col-start-2", {
   gridColumnStart: "2"
 });
-_responsiveRule(util$f, "col-start-3", {
+_responsiveRule(util$g, "col-start-3", {
   gridColumnStart: "3"
 });
-_responsiveRule(util$f, "col-start-4", {
+_responsiveRule(util$g, "col-start-4", {
   gridColumnStart: "4"
 });
-_responsiveRule(util$f, "col-start-5", {
+_responsiveRule(util$g, "col-start-5", {
   gridColumnStart: "5"
 });
-_responsiveRule(util$f, "col-start-6", {
+_responsiveRule(util$g, "col-start-6", {
   gridColumnStart: "6"
 });
-_responsiveRule(util$f, "col-start-7", {
+_responsiveRule(util$g, "col-start-7", {
   gridColumnStart: "7"
 });
-_responsiveRule(util$f, "col-start-8", {
+_responsiveRule(util$g, "col-start-8", {
   gridColumnStart: "8"
 });
-_responsiveRule(util$f, "col-start-9", {
+_responsiveRule(util$g, "col-start-9", {
   gridColumnStart: "9"
 });
-_responsiveRule(util$f, "col-start-10", {
+_responsiveRule(util$g, "col-start-10", {
   gridColumnStart: "10"
 });
-_responsiveRule(util$f, "col-start-11", {
+_responsiveRule(util$g, "col-start-11", {
   gridColumnStart: "11"
 });
-_responsiveRule(util$f, "col-start-12", {
+_responsiveRule(util$g, "col-start-12", {
   gridColumnStart: "12"
 });
 const gridColumnStartStyle = {
   layers: {
-    util: util$f
+    util: util$g
   }
-}, util$e = {};
-_responsiveRule(util$e, "row-auto", {
+}, util$f = {};
+_responsiveRule(util$f, "row-auto", {
   gridRow: "auto"
 });
-_responsiveRule(util$e, "row-full", {
+_responsiveRule(util$f, "row-full", {
   gridRow: "1 / -1"
 });
-_responsiveRule(util$e, "row-1", {
+_responsiveRule(util$f, "row-1", {
   gridRow: "span 1 / span 1"
 });
-_responsiveRule(util$e, "row-2", {
+_responsiveRule(util$f, "row-2", {
   gridRow: "span 2 / span 2"
 });
-_responsiveRule(util$e, "row-3", {
+_responsiveRule(util$f, "row-3", {
   gridRow: "span 3 / span 3"
 });
-_responsiveRule(util$e, "row-4", {
+_responsiveRule(util$f, "row-4", {
   gridRow: "span 4 / span 4"
 });
-_responsiveRule(util$e, "row-5", {
+_responsiveRule(util$f, "row-5", {
   gridRow: "span 5 / span 5"
 });
-_responsiveRule(util$e, "row-6", {
+_responsiveRule(util$f, "row-6", {
   gridRow: "span 6 / span 6"
 });
-_responsiveRule(util$e, "row-7", {
+_responsiveRule(util$f, "row-7", {
   gridRow: "span 7 / span 7"
 });
-_responsiveRule(util$e, "row-8", {
+_responsiveRule(util$f, "row-8", {
   gridRow: "span 8 / span 8"
 });
-_responsiveRule(util$e, "row-9", {
+_responsiveRule(util$f, "row-9", {
   gridRow: "span 9 / span 9"
 });
-_responsiveRule(util$e, "row-10", {
+_responsiveRule(util$f, "row-10", {
   gridRow: "span 10 / span 10"
 });
-_responsiveRule(util$e, "row-12", {
+_responsiveRule(util$f, "row-12", {
   gridRow: "span 12 / span 12"
 });
 const gridRowStyle = {
   layers: {
-    util: util$e
+    util: util$f
   }
-}, util$d = {};
-_responsiveRule(util$d, "row-end-auto", {
+}, util$e = {};
+_responsiveRule(util$e, "row-end-auto", {
   gridRowEnd: "auto"
 });
-_responsiveRule(util$d, "row-end-1", {
+_responsiveRule(util$e, "row-end-1", {
   gridRowEnd: "1"
 });
-_responsiveRule(util$d, "row-end-2", {
+_responsiveRule(util$e, "row-end-2", {
   gridRowEnd: "2"
 });
-_responsiveRule(util$d, "row-end-3", {
+_responsiveRule(util$e, "row-end-3", {
   gridRowEnd: "3"
 });
-_responsiveRule(util$d, "row-end-4", {
+_responsiveRule(util$e, "row-end-4", {
   gridRowEnd: "4"
 });
-_responsiveRule(util$d, "row-end-5", {
+_responsiveRule(util$e, "row-end-5", {
   gridRowEnd: "5"
 });
-_responsiveRule(util$d, "row-end-6", {
+_responsiveRule(util$e, "row-end-6", {
   gridRowEnd: "6"
 });
-_responsiveRule(util$d, "row-end-7", {
+_responsiveRule(util$e, "row-end-7", {
   gridRowEnd: "7"
 });
-_responsiveRule(util$d, "row-end-8", {
+_responsiveRule(util$e, "row-end-8", {
   gridRowEnd: "8"
 });
-_responsiveRule(util$d, "row-end-9", {
+_responsiveRule(util$e, "row-end-9", {
   gridRowEnd: "9"
 });
-_responsiveRule(util$d, "row-end-10", {
+_responsiveRule(util$e, "row-end-10", {
   gridRowEnd: "10"
 });
-_responsiveRule(util$d, "row-end-11", {
+_responsiveRule(util$e, "row-end-11", {
   gridRowEnd: "11"
 });
-_responsiveRule(util$d, "row-end-12", {
+_responsiveRule(util$e, "row-end-12", {
   gridRowEnd: "12"
 });
 const gridRowEndStyle = {
   layers: {
-    util: util$d
+    util: util$e
   }
-}, util$c = {};
-_responsiveRule(util$c, "row-start-auto", {
+}, util$d = {};
+_responsiveRule(util$d, "row-start-auto", {
   gridRowStart: "auto"
 });
-_responsiveRule(util$c, "row-start-1", {
+_responsiveRule(util$d, "row-start-1", {
   gridRowStart: "1"
 });
-_responsiveRule(util$c, "row-start-2", {
+_responsiveRule(util$d, "row-start-2", {
   gridRowStart: "2"
 });
-_responsiveRule(util$c, "row-start-3", {
+_responsiveRule(util$d, "row-start-3", {
   gridRowStart: "3"
 });
-_responsiveRule(util$c, "row-start-4", {
+_responsiveRule(util$d, "row-start-4", {
   gridRowStart: "4"
 });
-_responsiveRule(util$c, "row-start-5", {
+_responsiveRule(util$d, "row-start-5", {
   gridRowStart: "5"
 });
-_responsiveRule(util$c, "row-start-6", {
+_responsiveRule(util$d, "row-start-6", {
   gridRowStart: "6"
 });
-_responsiveRule(util$c, "row-start-7", {
+_responsiveRule(util$d, "row-start-7", {
   gridRowStart: "7"
 });
-_responsiveRule(util$c, "row-start-8", {
+_responsiveRule(util$d, "row-start-8", {
   gridRowStart: "8"
 });
-_responsiveRule(util$c, "row-start-9", {
+_responsiveRule(util$d, "row-start-9", {
   gridRowStart: "9"
 });
-_responsiveRule(util$c, "row-start-10", {
+_responsiveRule(util$d, "row-start-10", {
   gridRowStart: "10"
 });
-_responsiveRule(util$c, "row-start-11", {
+_responsiveRule(util$d, "row-start-11", {
   gridRowStart: "11"
 });
-_responsiveRule(util$c, "row-start-12", {
+_responsiveRule(util$d, "row-start-12", {
   gridRowStart: "12"
 });
 const gridRowStartStyle = {
   layers: {
-    util: util$c
+    util: util$d
   }
-}, util$b = {};
-_responsiveRule(util$b, "h-fill", {
+}, util$c = {};
+_responsiveRule(util$c, "h-fill", {
   height: "100%"
 });
-_responsiveRule(util$b, "h-stretch", {
+_responsiveRule(util$c, "h-stretch", {
   height: "stretch"
 });
 const heightStyle = {
   layers: {
-    util: util$b
+    util: util$c
   }
-}, util$a = {};
-_responsiveRule(util$a, "inset-0", {
+}, util$b = {};
+_responsiveRule(util$b, "inset-0", {
   top: 0,
   left: 0,
   right: 0,
   bottom: 0
 });
-_responsiveRule(util$a, "top-0", {
+_responsiveRule(util$b, "top-0", {
   top: 0
 });
-_responsiveRule(util$a, "right-0", {
+_responsiveRule(util$b, "right-0", {
   right: 0
 });
-_responsiveRule(util$a, "bottom-0", {
+_responsiveRule(util$b, "bottom-0", {
   bottom: 0
 });
-_responsiveRule(util$a, "left-0", {
+_responsiveRule(util$b, "left-0", {
   left: 0
 });
 const insetStyle = {
   layers: {
-    util: util$a
+    util: util$b
   }
-}, util$9 = {};
+}, util$a = {};
 for (const space of theme.SPACE)
-  _responsiveRule(util$9, `m-${space}`, {
+  _responsiveRule(util$a, `m-${space}`, {
     margin: vars.space[space]
   });
+_responsiveRule(util$a, "m-auto", {
+  margin: "auto"
+});
 for (const space of theme.SPACE)
-  _responsiveRule(util$9, `mx-${space}`, {
+  _responsiveRule(util$a, `mx-${space}`, {
     marginLeft: vars.space[space],
     marginRight: vars.space[space]
   });
+_responsiveRule(util$a, "mx-auto", {
+  marginLeft: "auto",
+  marginRight: "auto"
+});
 for (const space of theme.SPACE)
-  _responsiveRule(util$9, `my-${space}`, {
+  _responsiveRule(util$a, `my-${space}`, {
     marginTop: vars.space[space],
     marginBottom: vars.space[space]
   });
+_responsiveRule(util$a, "my-auto", {
+  marginTop: "auto",
+  marginBottom: "auto"
+});
 for (const i of theme.SPACE)
-  _responsiveRule(util$9, `mt-${i}`, {
+  _responsiveRule(util$a, `mt-${i}`, {
     marginTop: vars.space[i]
   });
+_responsiveRule(util$a, "mt-auto", {
+  marginTop: "auto"
+});
 for (const i of theme.SPACE)
-  _responsiveRule(util$9, `mr-${i}`, {
+  _responsiveRule(util$a, `mr-${i}`, {
     marginRight: vars.space[i]
   });
+_responsiveRule(util$a, "mr-auto", {
+  marginRight: "auto"
+});
 for (const i of theme.SPACE)
-  _responsiveRule(util$9, `mb-${i}`, {
+  _responsiveRule(util$a, `mb-${i}`, {
     marginBottom: vars.space[i]
   });
+_responsiveRule(util$a, "mb-auto", {
+  marginBottom: "auto"
+});
 for (const i of theme.SPACE)
-  _responsiveRule(util$9, `ml-${i}`, {
+  _responsiveRule(util$a, `ml-${i}`, {
     marginLeft: vars.space[i]
   });
+_responsiveRule(util$a, "ml-auto", {
+  marginLeft: "auto"
+});
 const marginStyle = {
   layers: {
-    util: util$9
+    util: util$a
   }
-}, util$8 = {};
-_responsiveRule(util$8, "max-w-0", {
+}, util$9 = {};
+_responsiveRule(util$9, "max-w-0", {
   maxWidth: vars.container[0]
 });
-_responsiveRule(util$8, "max-w-1", {
+_responsiveRule(util$9, "max-w-1", {
   maxWidth: vars.container[1]
 });
-_responsiveRule(util$8, "max-w-2", {
+_responsiveRule(util$9, "max-w-2", {
   maxWidth: vars.container[2]
 });
-_responsiveRule(util$8, "max-w-3", {
+_responsiveRule(util$9, "max-w-3", {
   maxWidth: vars.container[3]
 });
-_responsiveRule(util$8, "max-w-4", {
+_responsiveRule(util$9, "max-w-4", {
   maxWidth: vars.container[4]
 });
-_responsiveRule(util$8, "max-w-5", {
+_responsiveRule(util$9, "max-w-5", {
   maxWidth: vars.container[5]
 });
-_responsiveRule(util$8, "max-w-auto", {
+_responsiveRule(util$9, "max-w-auto", {
   maxWidth: "none"
 });
-_responsiveRule(util$8, "max-w-fill", {
+_responsiveRule(util$9, "max-w-fill", {
   maxWidth: "100%"
 });
 const maxWidthStyle = {
+  layers: {
+    util: util$9
+  }
+}, util$8 = {};
+_responsiveRule(util$8, "min-h-0", {
+  minHeight: "0"
+});
+_responsiveRule(util$8, "min-h-full", {
+  minHeight: "100%"
+});
+const minHeightStyle = {
   layers: {
     util: util$8
   }
@@ -1906,8 +1948,6 @@ const widthStyle = {
   }
 }, component$2 = {
   ".skeleton": {
-    [varNames.color.skeleton.from]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    [varNames.color.skeleton.to]: `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
     backgroundColor: vars.color.skeleton.from,
     backgroundPosition: "100%",
     backgroundSize: "200% 100%",
@@ -1916,7 +1956,7 @@ const widthStyle = {
     transition: "opacity 200ms ease-in",
     nest: {
       "&[data-animated]": {
-        backgroundImage: ["linear-gradient(to right", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
+        backgroundImage: ["linear-gradient(to right,", `${vars.color.skeleton.from},`, `${vars.color.skeleton.to},`, `${vars.color.skeleton.from},`, `${vars.color.skeleton.from},`, `${vars.color.skeleton.from}`, ")"].join(""),
         animationName: KEYFRAMES_PULSE,
         animationTimingFunction: "ease-in-out",
         animationIterationCount: "infinite",
@@ -2084,13 +2124,6 @@ const skeletonStyle = {
   ".input": {
     position: "relative"
   },
-  ".input-b": {
-    nest: {
-      "& .input-presentation": {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
-      }
-    }
-  },
   ".input-element": {
     WebkitFontSmoothing: "inherit",
     appearance: "none",
@@ -2113,6 +2146,10 @@ const skeletonStyle = {
     // @ts-expect-error - TODO: fix this
     width: ["-moz-available", "-webkit-fill-available", "stretch"],
     nest: {
+      "&::placeholder": {
+        color: vars.color.input.text.placeholder,
+        opacity: 1
+      },
       ".input[data-icon-left] &": {
         paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`
       },
@@ -2125,14 +2162,15 @@ const skeletonStyle = {
           [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[4]
         }
       },
-      ".input:not([data-invalid]) &::placeholder": {
-        color: vars.color.input.text.placeholder
-      },
       ".input:not([data-invalid]) &:hover": {
-        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        }
       },
       ".input:not([data-invalid]) &:focus": {
-        [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        }
       },
       ".input:not([data-invalid]) &:disabled": {
         vars: {
@@ -2143,26 +2181,31 @@ const skeletonStyle = {
       ".input[data-invalid] &": {
         vars: {
           [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
-          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[4]
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2]
         }
       },
-      ".input[data-invalid] &::placeholder": {
-        color: vars.color.input.text.placeholder
-      },
       ".input[data-invalid] &:hover": {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
       },
       ".input[data-invalid] &:focus": {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
       },
       ".input[data-invalid] &:disabled": {
-        [varNames.color.input.text.fg]: vars.color.tinted.critical.border[3]
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2]
+        }
       }
     }
   },
   ".input-presentation": {
     backgroundColor: vars.color.input.text.bg,
     borderRadius: "inherit",
+    boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
     position: "absolute",
     top: 0,
     left: 0,
@@ -2180,20 +2223,16 @@ const skeletonStyle = {
         borderTopRightRadius: 0,
         borderBottomRightRadius: 0
       },
-      ".input-element:focus + &": {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
+      // focus ring
+      ".input .input-element:not([data-no-focus-ring]):focus + &": {
         outlineWidth: vars.input.text.focusRing.width,
         outlineStyle: "solid",
         outlineColor: vars.color.focusRing,
         outlineOffset: vars.input.text.focusRing.offset
       },
-      ".input-element:disabled + &": {
-        opacity: 1
-      },
       // valid
       ".input:not([data-invalid]) &": {
         vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[4],
           [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
           [varNames.color.input.text.border]: vars.color.tinted.default.border[1]
         }
@@ -2203,57 +2242,40 @@ const skeletonStyle = {
           [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1]
         }
       },
-      ".input:not([data-invalid]) .input-element:placeholder-shown + &": {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4]
-        }
-      },
       ".input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &": {
         vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1]
-        },
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2]
+        }
       },
       ".input:not([data-invalid]) .input-element:focus + &": {
         vars: {
           [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
           [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1]
-        },
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`
+        }
       },
       ".input:not([data-invalid]) .input-element:disabled + &": {
         vars: {
           [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
           [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
-          // icon
           [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
         }
       },
       // invalid
       ".input[data-invalid] &": {
         vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[4],
           [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
-          [varNames.color.focusRing]: vars.color.solid.critical.bg[0]
-        }
-      },
-      ".input[data-invalid] .input-element:placeholder-shown + &": {
-        vars: {
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4]
+          [varNames.color.muted.fg]: vars.color.tinted.critical.fg[4]
         }
       },
       ".input[data-invalid] .input-element:not(:disabled):hover + &": {
         vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2]
         }
       },
       ".input[data-invalid] .input-element:focus + &": {
         vars: {
-          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2],
-          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2]
         }
       },
       ".input[data-invalid] .input-element:disabled + &": {
@@ -2261,6 +2283,9 @@ const skeletonStyle = {
           [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
           [varNames.color.input.text.border]: vars.color.tinted.critical.border[0]
         }
+      },
+      ".input:not(.input-b) &": {
+        [varNames.color.input.text.border]: "transparent"
       }
     }
   }
@@ -2295,7 +2320,7 @@ const _inputStyle = {
     [varNames.color.border]: vars.color.tinted.border[2],
     [varNames.color.fg]: vars.color.tinted.fg[2],
     nest: {
-      "&:is(button)": {
+      "button&": {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
         outline: "none",
@@ -2305,8 +2330,7 @@ const _inputStyle = {
         // @ts-expect-error - TODO: fix this
         width: ["-moz-available", "-webkit-fill-available", "stretch"]
       },
-      /* &:is(a) */
-      "&:is(a)": {
+      "a&": {
         outline: "none",
         textDecoration: "none"
       },
@@ -2549,8 +2573,6 @@ const badgeStyle = {
   }
 }, primitive$k = {
   ".box": {
-    // TODO: move to aspects
-    minHeight: 0,
     nest: {
       "iframe&": {
         border: "none"
@@ -3015,7 +3037,9 @@ function _assignToneProps(props, _varNames, _vars) {
     [_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.shadow.ambient]: _vars.shadow.ambient,
+    [_varNames.skeleton.from]: _vars.skeleton.from,
+    [_varNames.skeleton.to]: _vars.skeleton.to
   });
   for (const variant of theme.COLOR_VARIANTS)
     for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
@@ -3235,7 +3259,8 @@ for (const size of theme.FONT_CODE_SIZE) {
       [varNames.font.letterSpacing]: v.letterSpacing,
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
-      [varNames.font.descenderHeight]: v.descenderHeight
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
     }
   });
 }
@@ -3288,7 +3313,8 @@ for (const size of theme.FONT_HEADING_SIZE) {
       [varNames.font.letterSpacing]: v.letterSpacing,
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
-      [varNames.font.descenderHeight]: v.descenderHeight
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
     }
   });
 }
@@ -3344,7 +3370,8 @@ for (const size of theme.FONT_LABEL_SIZE) {
       [k.letterSpacing]: v.letterSpacing,
       [k.iconSize]: v.iconSize,
       [k.ascenderHeight]: v.ascenderHeight,
-      [k.descenderHeight]: v.descenderHeight
+      [k.descenderHeight]: v.descenderHeight,
+      [k.customIconSize]: v.customIconSize
     }
   });
 }
@@ -3604,7 +3631,8 @@ for (const size of theme.FONT_TEXT_SIZE) {
       [varNames.font.letterSpacing]: v.letterSpacing,
       [varNames.font.iconSize]: v.iconSize,
       [varNames.font.ascenderHeight]: v.ascenderHeight,
-      [varNames.font.descenderHeight]: v.descenderHeight
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
     }
   });
 }
@@ -3613,30 +3641,19 @@ const textStyle = {
     primitive: primitive$5
   }
 }, primitive$4 = {
-  ".text-area": {
-    // todo
-  }
+  ".text-area": {}
 }, textAreaStyle = {
   layers: {
     primitive: primitive$4
   }
 }, primitive$3 = {
-  ".text-input": {
-    vars: {
-      [varNames.font.family]: vars.font.text.family
-    },
-    nest: {
-      "& > span": {
-        borderRadius: "inherit"
-      }
-    }
-  },
+  ".text-input": {},
   ".text-input-prefix": {
     borderTop: `1px solid ${vars.color.border}`,
     borderLeft: `1px solid ${vars.color.border}`,
     borderBottom: `1px solid ${vars.color.border}`,
-    borderTopRightRadius: "0 !important",
-    borderBottomRightRadius: "0 !important",
+    borderTopLeftRadius: "inherit",
+    borderBottomLeftRadius: "inherit",
     nest: {
       "& > span": {
         display: "block",
@@ -3644,20 +3661,22 @@ const textStyle = {
       }
     }
   },
+  ".text-input-element": {
+    borderRadius: "inherit"
+  },
   ".text-input-suffix": {
     borderTop: `1px solid ${vars.color.border}`,
     borderRight: `1px solid ${vars.color.border}`,
     borderBottom: `1px solid ${vars.color.border}`,
-    borderTopLeftRadius: "0 !important",
-    borderBottomLeftRadius: "0 !important",
+    borderTopRightRadius: "inherit",
+    borderBottomRightRadius: "inherit",
     nest: {
       "& > span": {
         display: "block",
         margin: "-1px"
       }
     }
-  },
-  ".text-input-presentation": {}
+  }
 }, textInputStyle = {
   layers: {
     primitive: primitive$3
@@ -3786,17 +3805,6 @@ const textStyle = {
 }, primitive$1 = {
   ".tooltip": {
     pointerEvents: "none"
-  },
-  ".tooltip-card": {
-    willChange: "transform",
-    nest: {
-      "&[data-animate] > *": {
-        // TODO
-        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        // opacity: `var(--motion-content-opacity, 1)`,
-        willChange: "opacity"
-      }
-    }
   }
 }, tooltipStyle = {
   layers: {
@@ -3853,6 +3861,7 @@ const textStyle = {
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minHeightStyle,
   minWidthStyle,
   outlineStyle,
   overflowStyle,
@@ -3978,6 +3987,9 @@ function margin(props) {
 function maxWidth(props) {
   return _scopeClassNames(_resp("max-w", props.maxWidth) ?? "");
 }
+function minHeight(props) {
+  return _scopeClassNames(_resp("min-h", props.minHeight) ?? "");
+}
 function minWidth(props) {
   return _scopeClassNames(_resp("min-w", props.minWidth) ?? "");
 }
@@ -4130,7 +4142,7 @@ function badge(props) {
 function box(props) {
   return _composeClassNames(_scopeClassNames("box", props.muted && "muted", props.outline && `outline-${props.outline}`), border(props), boxSizing({
     boxSizing: props.sizing
-  }), display(props), height(props), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), minWidth(props), overflow(props), padding(props), pointerEvents(props), position(props), radius(props), textAlign(props), width(props));
+  }), display(props), height(props), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), minHeight(props), minWidth(props), overflow(props), padding(props), pointerEvents(props), position(props), radius(props), textAlign(props), width(props));
 }
 function button(props) {
   return _composeClassNames(_scopeClassNames("button"), display(props), flexItem(props), radius(props), width(props));
@@ -4218,12 +4230,18 @@ function textArea(props) {
 function textInput(props) {
   return _composeClassNames(_scopeClassNames("text-input"), _input(props));
 }
+function textInputPrefix() {
+  return _scopeClassNames("text-input-prefix");
+}
+function textInputElement() {
+  return _scopeClassNames("text-input-element");
+}
+function textInputSuffix() {
+  return _scopeClassNames("text-input-suffix");
+}
 function tooltip() {
   return _scopeClassNames("tooltip");
 }
-function tooltipCard() {
-  return _scopeClassNames("tooltip-card");
-}
 function srOnly() {
   return _scopeClassNames(_composeClassNames("sr-only"));
 }
@@ -4292,6 +4310,7 @@ exports.margin = margin;
 exports.maxWidth = maxWidth;
 exports.menu = menu;
 exports.menuDivider = menuDivider;
+exports.minHeight = minHeight;
 exports.minWidth = minWidth;
 exports.overflow = overflow;
 exports.padding = padding;
@@ -4315,6 +4334,9 @@ exports.text = text;
 exports.textAlign = textAlign;
 exports.textArea = textArea;
 exports.textInput = textInput;
+exports.textInputElement = textInputElement;
+exports.textInputPrefix = textInputPrefix;
+exports.textInputSuffix = textInputSuffix;
 exports.textOverflow = textOverflow;
 exports.textSkeleton = textSkeleton;
 exports.toBoxShadow = toBoxShadow$1;
@@ -4324,7 +4346,6 @@ exports.toastLoadingBar = toastLoadingBar;
 exports.toastLoadingBarMask = toastLoadingBarMask;
 exports.toastLoadingBarProgress = toastLoadingBarProgress;
 exports.tooltip = tooltip;
-exports.tooltipCard = tooltipCard;
 exports.treeItem = treeItem;
 exports.varNames = varNames;
 exports.vars = vars;