@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/dist/css.esm.js

@@ -1,4 +1,4 @@
-import { THEME_COLOR_AVATAR_COLORS, SPACE, THEME_COLOR_CARD_TONES, THEME_COLOR_STATE_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_BUTTON_MODES } from "@sanity/ui/theme";
+import { FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE, THEME_COLOR_AVATAR_COLORS, SPACE, THEME_COLOR_CARD_TONES, THEME_COLOR_STATE_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_BUTTON_MODES } from "@sanity/ui/theme";
 const breadcrumbsRules = {
   breadcrumbs: {
     lineHeight: 0
@@ -65,31 +65,133 @@ const breadcrumbsRules = {
   "dialog-footer": {
     zIndex: 3
   }
+}, menuRules = {
+  "menu-divider": {
+    height: "1px",
+    border: 0,
+    backgroundColor: "var(--card-border-color)",
+    margin: 0
+  }
 };
 function responsiveRules(className, props) {
   return {
     [className]: props,
     [`_1:${className}`]: {
-      "@media": { "screen and (min-width: 360px)": props }
+      "@media": {
+        "screen and (min-width: 360px)": props
+      }
     },
     [`_2:${className}`]: {
-      "@media": { "screen and (min-width: 600px)": props }
+      "@media": {
+        "screen and (min-width: 600px)": props
+      }
     },
     [`_3:${className}`]: {
-      "@media": { "screen and (min-width: 900px)": props }
+      "@media": {
+        "screen and (min-width: 900px)": props
+      }
     },
     [`_4:${className}`]: {
-      "@media": { "screen and (min-width: 1200px)": props }
+      "@media": {
+        "screen and (min-width: 1200px)": props
+      }
     },
     [`_5:${className}`]: {
-      "@media": { "screen and (min-width: 1800px)": props }
+      "@media": {
+        "screen and (min-width: 1800px)": props
+      }
     },
     [`_6:${className}`]: {
-      "@media": { "screen and (min-width: 2400px)": props }
+      "@media": {
+        "screen and (min-width: 2400px)": props
+      }
     }
   };
 }
-const avatarRules = {
+const skeletonRules = {
+  skeleton: {
+    backgroundColor: "var(--card-skeleton-from-color)",
+    backgroundPosition: "100%",
+    backgroundSize: "200% 100%",
+    backgroundAttachment: "fixed",
+    opacity: 0,
+    transition: "opacity 200ms ease-in",
+    "@keyframes": {
+      "skeleton-pulse": {
+        "0%": {
+          backgroundPosition: "100%"
+        },
+        "100%": {
+          backgroundPosition: "-100%"
+        }
+      }
+    },
+    "@nest": {
+      "&[data-animated]": {
+        backgroundImage: `linear-gradient(
+          to right,
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-to-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color)
+        )`,
+        animationName: "skeleton-pulse",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        animationDuration: "2000ms"
+      },
+      "&[data-visible]": {
+        opacity: 1
+      }
+    },
+    "@media": {
+      "screen and (prefers-reduced-motion: no-preference)": {
+        backgroundColor: "var(--card-skeleton-from-color)"
+      }
+    }
+  },
+  "font-skeleton": {
+    height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
+  },
+  // ...responsiveRules('text-skeleton-0', {
+  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
+  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
+  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
+  // }),
+  ...FONT_CODE_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`code-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-code-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-code-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-code-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_HEADING_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`heading-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-heading-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-heading-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-heading-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_LABEL_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`label-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-label-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-label-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-label-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_TEXT_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`text-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-text-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-text-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-text-${size}-descender-height)`
+    })
+  }), {})
+}, avatarRules = {
   avatar: {
     backgroundColor: "var(--avatar-bg-color)",
     position: "relative",
@@ -249,20 +351,56 @@ const avatarRules = {
 }, varNames = {
   color: {
     dark: {
-      transparent: buildColorCardVarNames({ scheme: "dark", tone: "transparent" }),
-      default: buildColorCardVarNames({ scheme: "dark", tone: "default" }),
-      primary: buildColorCardVarNames({ scheme: "dark", tone: "primary" }),
-      positive: buildColorCardVarNames({ scheme: "dark", tone: "positive" }),
-      caution: buildColorCardVarNames({ scheme: "dark", tone: "caution" }),
-      critical: buildColorCardVarNames({ scheme: "dark", tone: "critical" })
+      transparent: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "transparent"
+      }),
+      default: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "default"
+      }),
+      primary: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "primary"
+      }),
+      positive: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "positive"
+      }),
+      caution: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "caution"
+      }),
+      critical: buildColorCardVarNames({
+        scheme: "dark",
+        tone: "critical"
+      })
     },
     light: {
-      transparent: buildColorCardVarNames({ scheme: "light", tone: "transparent" }),
-      default: buildColorCardVarNames({ scheme: "light", tone: "default" }),
-      primary: buildColorCardVarNames({ scheme: "light", tone: "primary" }),
-      positive: buildColorCardVarNames({ scheme: "light", tone: "positive" }),
-      caution: buildColorCardVarNames({ scheme: "light", tone: "caution" }),
-      critical: buildColorCardVarNames({ scheme: "light", tone: "critical" })
+      transparent: buildColorCardVarNames({
+        scheme: "light",
+        tone: "transparent"
+      }),
+      default: buildColorCardVarNames({
+        scheme: "light",
+        tone: "default"
+      }),
+      primary: buildColorCardVarNames({
+        scheme: "light",
+        tone: "primary"
+      }),
+      positive: buildColorCardVarNames({
+        scheme: "light",
+        tone: "positive"
+      }),
+      caution: buildColorCardVarNames({
+        scheme: "light",
+        tone: "caution"
+      }),
+      critical: buildColorCardVarNames({
+        scheme: "light",
+        tone: "critical"
+      })
     },
     //
     accent: {
@@ -417,12 +555,13 @@ const avatarRules = {
       width: "--avatar-focus-ring-width"
     }
   },
-  space: Object.fromEntries(
-    SPACE.map((space) => [space, `--space-${space}`])
-  )
+  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
 };
 function buildColorCardVarNames(props) {
-  const { scheme, tone } = props, prefix = `--color-${scheme}-${tone}`;
+  const {
+    scheme,
+    tone
+  } = props, prefix = `--color-${scheme}-${tone}`;
   return {
     accent: {
       fg: `${prefix}-accent-fg`
@@ -509,16 +648,56 @@ function buildColorCardVarNames(props) {
     icon: `${prefix}-icon`,
     input: {
       default: {
-        enabled: buildColorInputStateVarNames({ mode: "default", scheme, state: "enabled", tone }),
-        hovered: buildColorInputStateVarNames({ mode: "default", scheme, state: "hovered", tone }),
-        readOnly: buildColorInputStateVarNames({ mode: "default", scheme, state: "readOnly", tone }),
-        disabled: buildColorInputStateVarNames({ mode: "default", scheme, state: "disabled", tone })
+        enabled: buildColorInputStateVarNames({
+          mode: "default",
+          scheme,
+          state: "enabled",
+          tone
+        }),
+        hovered: buildColorInputStateVarNames({
+          mode: "default",
+          scheme,
+          state: "hovered",
+          tone
+        }),
+        readOnly: buildColorInputStateVarNames({
+          mode: "default",
+          scheme,
+          state: "readOnly",
+          tone
+        }),
+        disabled: buildColorInputStateVarNames({
+          mode: "default",
+          scheme,
+          state: "disabled",
+          tone
+        })
       },
       invalid: {
-        enabled: buildColorInputStateVarNames({ mode: "invalid", scheme, state: "enabled", tone }),
-        hovered: buildColorInputStateVarNames({ mode: "invalid", scheme, state: "hovered", tone }),
-        readOnly: buildColorInputStateVarNames({ mode: "invalid", scheme, state: "readOnly", tone }),
-        disabled: buildColorInputStateVarNames({ mode: "invalid", scheme, state: "disabled", tone })
+        enabled: buildColorInputStateVarNames({
+          mode: "invalid",
+          scheme,
+          state: "enabled",
+          tone
+        }),
+        hovered: buildColorInputStateVarNames({
+          mode: "invalid",
+          scheme,
+          state: "hovered",
+          tone
+        }),
+        readOnly: buildColorInputStateVarNames({
+          mode: "invalid",
+          scheme,
+          state: "readOnly",
+          tone
+        }),
+        disabled: buildColorInputStateVarNames({
+          mode: "invalid",
+          scheme,
+          state: "disabled",
+          tone
+        })
       }
     },
     kbd: {
@@ -584,7 +763,12 @@ function buildColorCardVarNames(props) {
   };
 }
 function buildColorInputStateVarNames(props) {
-  const { mode, scheme, state, tone } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
+  const {
+    mode,
+    scheme,
+    state,
+    tone
+  } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
   return {
     bg: `${prefix}-bg`,
     border: `${prefix}-border`,
@@ -599,11 +783,17 @@ const vars = {
   color: {
     dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
       ...acc,
-      [tone]: buildColorCardVars({ scheme: "dark", tone })
+      [tone]: buildColorCardVars({
+        scheme: "dark",
+        tone
+      })
     }), {}),
     light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
       ...acc,
-      [tone]: buildColorCardVars({ scheme: "light", tone })
+      [tone]: buildColorCardVars({
+        scheme: "light",
+        tone
+      })
     }), {}),
     accent: {
       fg: "var(--color-accent-fg)"
@@ -720,12 +910,71 @@ const vars = {
       variable: "var(--color-syntax-variable)"
     }
   },
-  space: Object.fromEntries(
-    SPACE.map((space) => [space, `var(${varNames.space[space]})`])
-  )
+  font: {
+    code: {
+      family: "var(--font-code-family)",
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    heading: {
+      family: "var(--font-heading-family)",
+      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    label: {
+      family: "var(--font-label-family)",
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    text: {
+      family: "var(--font-text-family)",
+      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    }
+  },
+  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
 };
 function buildColorCardVars(props) {
-  const { scheme, tone } = props, prefix = `--color-${scheme}-${tone}`;
+  const {
+    scheme,
+    tone
+  } = props, prefix = `--color-${scheme}-${tone}`;
   return {
     accent: {
       fg: `var(${prefix}-accent-fg)`
@@ -766,7 +1015,12 @@ function buildColorCardVars(props) {
         [mode]: {
           ...THEME_COLOR_INPUT_STATES.reduce((acc2, state) => ({
             ...acc2,
-            [state]: buildColorInputStateVars({ mode, scheme, state, tone })
+            [state]: buildColorInputStateVars({
+              mode,
+              scheme,
+              state,
+              tone
+            })
           }), {})
         }
       }), {})
@@ -834,7 +1088,12 @@ function buildColorCardVars(props) {
   };
 }
 function buildColorInputStateVars(props) {
-  const { mode, scheme, state, tone } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
+  const {
+    mode,
+    scheme,
+    state,
+    tone
+  } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
   return {
     bg: `var(${prefix}-bg)`,
     border: `var(${prefix}-border)`,
@@ -851,18 +1110,15 @@ const badgeRules = {
     color: vars.color.badge.fg,
     verticalAlign: "top"
   },
-  ...THEME_COLOR_STATE_TONES.reduce(
-    (acc, tone) => ({
-      ...acc,
-      [`badge-${tone}`]: {
-        [varNames.color.badge.bg]: vars.color.badge[tone].bg,
-        [varNames.color.badge.dot]: vars.color.badge[tone].dot,
-        [varNames.color.badge.fg]: vars.color.badge[tone].fg,
-        [varNames.color.badge.icon]: vars.color.badge[tone].icon
-      }
-    }),
-    {}
-  )
+  ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+    ...acc,
+    [`badge-${tone}`]: {
+      [varNames.color.badge.bg]: vars.color.badge[tone].bg,
+      [varNames.color.badge.dot]: vars.color.badge[tone].dot,
+      [varNames.color.badge.fg]: vars.color.badge[tone].fg,
+      [varNames.color.badge.icon]: vars.color.badge[tone].icon
+    }
+  }), {})
 }, boxRules = {
   box: {
     minWidth: 0,
@@ -967,20 +1223,17 @@ const badgeRules = {
     "--card-shadow-ambient-color": "var(--color-shadow-ambient)",
     "--card-skeleton-from-color": "var(--color-skeleton-from)",
     "--card-skeleton-to-color": "var(--color-skeleton-to)",
-    /*
-          '--card-bg-image': checkered
-            ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-            : undefined,
-    
-          '--card-bg-image': checkered
-            ? `repeating-conic-gradient(${color.bg} 0% 25%, ${color.muted.bg} 0% 50%)`
-            : undefined,
-    
-          '--card-bg2-color': color.muted.bg,
-          '--card-link-color': color.link.fg,
-          '--card-hairline-soft-color': color.border,
-          '--card-hairline-hard-color': color.border, */
+    "--card-bg2-color": "var(--color-muted-bg)",
+    "--card-link-color": "var(--color-link-fg)",
+    "--card-hairline-soft-color": "var(--color-border)",
+    "--card-hairline-hard-color": "var(--color-border)",
     "@nest": {
+      "&[data-checkered]": {
+        "--card-bg-image": "repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%)",
+        backgroundSize: "var(--space-3) var(--space-3)",
+        backgroundPosition: "50% 50%",
+        backgroundImage: "var(--card-bg-image)"
+      },
       '&[data-as="button"]': {
         WebkitFontSmoothing: "inherit",
         appearance: "none",
@@ -1361,7 +1614,9 @@ const badgeRules = {
     }
   }
 }, spinnerRules = {
-  spinner: {
+  spinner: {},
+  "animated-spinner-icon": {
+    animation: "spinner-rotate 500ms linear infinite",
     "@keyframes": {
       "spinner-rotate": {
         from: {
@@ -1371,11 +1626,6 @@ const badgeRules = {
           transform: "rotate(360deg)"
         }
       }
-    },
-    "@nest": {
-      "& > span > svg": {
-        animation: "spinner-rotate 500ms linear infinite"
-      }
     }
   }
 }, switchRules = {
@@ -1567,68 +1817,89 @@ const badgeRules = {
   //
 }, textInputRules = {
   "text-input": {
-    //
+    "--font-family": vars.font.text.family
   },
-  "text-input-wrapper": {
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`text-input-p-${space}`.replace(".", "_"), {
+      "--padding-top": `calc(${vars.space[space]} - var(--font-ascender-height))`,
+      "--padding-right": vars.space[space],
+      "--padding-bottom": `calc(${vars.space[space]} - var(--font-descender-height))`,
+      "--padding-left": vars.space[space]
+    })
+  }), {}),
+  ...FONT_TEXT_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`text-input-${size}`, {
+      "--font-size": vars.font.text.sizes[size].fontSize,
+      "--font-line-height": vars.font.text.sizes[size].lineHeight,
+      "--font-letter-spacing": vars.font.text.sizes[size].letterSpacing,
+      "--font-ascender-height": vars.font.text.sizes[size].ascenderHeight,
+      "--font-descender-height": vars.font.text.sizes[size].descenderHeight
+    })
+  }), {}),
+  "text-input-element": {
+    appearance: "none",
+    background: "none",
+    border: 0,
+    borderRadius: 0,
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    fontFamily: "var(--font-family)",
+    fontSize: "var(--font-size)",
+    fontWeight: "var(--font-weight)",
+    lineHeight: "var(--font-line-height)",
+    letterSpacing: "var(--font-letter-spacing)",
+    margin: 0,
+    position: "relative",
+    zIndex: 1,
+    display: "block",
+    color: "var(--input-fg-color)",
+    paddingTop: "var(--padding-top)",
+    paddingRight: "var(--padding-right)",
+    paddingBottom: "var(--padding-bottom)",
+    paddingLeft: "var(--padding-left)",
+    "--input-fg-color": "var(--color-input-default-enabled-fg)",
     "@nest": {
-      "& > input": {
-        appearance: "none",
-        background: "none",
-        border: 0,
-        borderRadius: 0,
-        outline: "none",
-        width: "100%",
-        boxSizing: "border-box",
-        fontFamily: "var(--font-family)",
-        fontSize: "var(--font-size)",
-        /* font-family: ${font.text.family}, */
-        /* font-weight: ${($weight && font.text.weights[$weight]) || font.text.weights.regular}, */
-        margin: 0,
-        position: "relative",
-        zIndex: 1,
-        display: "block",
-        color: "var(--input-fg-color)",
-        "@nest": {
-          // NOTE: This is a hack to disable Chrome’s autofill styles
-          "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
-            WebkitTextFillColor: "var(--input-fg-color) !important",
-            transition: "background-color 5000s",
-            transitionDelay: "86400s"
-            // 24h
-          }
-          // /* &:is(textarea) */
-          // &[data-as='textarea'] {
-          //   resize: none;
-          // }
-          // &::placeholder {
-          //   color: var(--input-placeholder-color);
-          // }
-          // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-          //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
-          //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-          //   /* enabled */
-          //   &:not(:invalid):not(:disabled):not(:read-only) {
-          //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-          //   }
-          //   /* disabled */
-          //   &:not(:invalid):disabled {
-          //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
-          //   }
-          //   /* invalid */
-          //   &:invalid {
-          //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
-          //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
-          //   }
-          //   /* readOnly */
-          //   &:read-only {
-          //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
-          //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
-          //   }
-          // }
-        }
+      // NOTE: This is a hack to disable Chrome’s autofill styles
+      "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
+        WebkitTextFillColor: "var(--input-fg-color) !important",
+        transition: "background-color 5000s",
+        transitionDelay: "86400s"
+        // 24h
+      },
+      /* &:is(textarea) */
+      // '&[data-as="textarea"]': {
+      //   resize: 'none',
+      // },
+      "&::placeholder": {
+        color: "var(--input-placeholder-color)"
       }
+      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   /* enabled */
+      //   &:not(:invalid):not(:disabled):not(:read-only) {
+      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
+      //   }
+      //   /* disabled */
+      //   &:not(:invalid):disabled {
+      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
+      //   }
+      //   /* invalid */
+      //   &:invalid {
+      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
+      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
+      //   }
+      //   /* readOnly */
+      //   &:read-only {
+      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
+      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
+      //   }
+      // }
     }
   },
   "text-input-prefix": {
@@ -1642,8 +1913,8 @@ const badgeRules = {
     }
   },
   "text-input-suffix": {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
     "@nest": {
       "& > span": {
         display: "block",
@@ -1652,7 +1923,7 @@ const badgeRules = {
     }
   },
   "text-input-presentation": {
-    "--input-box-shadow": "none",
+    "--input-box-shadow": "inset 0 0 0 1px var(--input-border-color)",
     position: "absolute",
     top: 0,
     left: 0,
@@ -1661,8 +1932,9 @@ const badgeRules = {
     display: "block",
     pointerEvents: "none",
     zIndex: 0,
-    backgroundColor: "var(--card-bg-color)",
-    boxShadow: "var(--input-box-shadow)"
+    backgroundColor: "var(--input-bg-color)",
+    boxShadow: "var(--input-box-shadow)",
+    "--input-border-color": "var(--color-input-default-enabled-border)"
     // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
     // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
@@ -1764,42 +2036,114 @@ const badgeRules = {
 }, tokenRules = {
   token: {
     "@nest": {
-      "&.atrule": { color: vars.color.syntax.atrule },
-      "&.attr-name": { color: vars.color.syntax.attrName },
-      "&.attr-value": { color: vars.color.syntax.attrValue },
-      "&.attribute": { color: vars.color.syntax.attribute },
-      "&.boolean": { color: vars.color.syntax.boolean },
-      "&.builtin": { color: vars.color.syntax.builtin },
-      "&.cdata": { color: vars.color.syntax.cdata },
-      "&.char": { color: vars.color.syntax.char },
-      "&.class": { color: vars.color.syntax.class },
-      "&.class-name": { color: vars.color.syntax.className },
-      "&.comment": { color: vars.color.syntax.comment },
-      "&.constant": { color: vars.color.syntax.constant },
-      "&.deleted": { color: vars.color.syntax.deleted },
-      "&.doctype": { color: vars.color.syntax.doctype },
-      "&.entity": { color: vars.color.syntax.entity },
-      "&.function": { color: vars.color.syntax.function },
-      "&.hexcode": { color: vars.color.syntax.hexcode },
-      "&.id": { color: vars.color.syntax.id },
-      "&.important": { color: vars.color.syntax.important },
-      "&.inserted": { color: vars.color.syntax.inserted },
-      "&.keyword": { color: vars.color.syntax.keyword },
-      "&.number": { color: vars.color.syntax.number },
-      "&.operator": { color: vars.color.syntax.operator },
-      "&.prolog": { color: vars.color.syntax.prolog },
-      "&.property": { color: vars.color.syntax.property },
-      "&.pseudo-class": { color: vars.color.syntax.pseudoClass },
-      "&.pseudo-element": { color: vars.color.syntax.pseudoElement },
-      "&.punctuation": { color: vars.color.syntax.punctuation },
-      "&.regex": { color: vars.color.syntax.regex },
-      "&.selector": { color: vars.color.syntax.selector },
-      "&.string": { color: vars.color.syntax.string },
-      "&.symbol": { color: vars.color.syntax.symbol },
-      "&.tag": { color: vars.color.syntax.tag },
-      "&.unit": { color: vars.color.syntax.unit },
-      "&.url": { color: vars.color.syntax.url },
-      "&.variable": { color: vars.color.syntax.variable }
+      "&.atrule": {
+        color: vars.color.syntax.atrule
+      },
+      "&.attr-name": {
+        color: vars.color.syntax.attrName
+      },
+      "&.attr-value": {
+        color: vars.color.syntax.attrValue
+      },
+      "&.attribute": {
+        color: vars.color.syntax.attribute
+      },
+      "&.boolean": {
+        color: vars.color.syntax.boolean
+      },
+      "&.builtin": {
+        color: vars.color.syntax.builtin
+      },
+      "&.cdata": {
+        color: vars.color.syntax.cdata
+      },
+      "&.char": {
+        color: vars.color.syntax.char
+      },
+      "&.class": {
+        color: vars.color.syntax.class
+      },
+      "&.class-name": {
+        color: vars.color.syntax.className
+      },
+      "&.comment": {
+        color: vars.color.syntax.comment
+      },
+      "&.constant": {
+        color: vars.color.syntax.constant
+      },
+      "&.deleted": {
+        color: vars.color.syntax.deleted
+      },
+      "&.doctype": {
+        color: vars.color.syntax.doctype
+      },
+      "&.entity": {
+        color: vars.color.syntax.entity
+      },
+      "&.function": {
+        color: vars.color.syntax.function
+      },
+      "&.hexcode": {
+        color: vars.color.syntax.hexcode
+      },
+      "&.id": {
+        color: vars.color.syntax.id
+      },
+      "&.important": {
+        color: vars.color.syntax.important
+      },
+      "&.inserted": {
+        color: vars.color.syntax.inserted
+      },
+      "&.keyword": {
+        color: vars.color.syntax.keyword
+      },
+      "&.number": {
+        color: vars.color.syntax.number
+      },
+      "&.operator": {
+        color: vars.color.syntax.operator
+      },
+      "&.prolog": {
+        color: vars.color.syntax.prolog
+      },
+      "&.property": {
+        color: vars.color.syntax.property
+      },
+      "&.pseudo-class": {
+        color: vars.color.syntax.pseudoClass
+      },
+      "&.pseudo-element": {
+        color: vars.color.syntax.pseudoElement
+      },
+      "&.punctuation": {
+        color: vars.color.syntax.punctuation
+      },
+      "&.regex": {
+        color: vars.color.syntax.regex
+      },
+      "&.selector": {
+        color: vars.color.syntax.selector
+      },
+      "&.string": {
+        color: vars.color.syntax.string
+      },
+      "&.symbol": {
+        color: vars.color.syntax.symbol
+      },
+      "&.tag": {
+        color: vars.color.syntax.tag
+      },
+      "&.unit": {
+        color: vars.color.syntax.unit
+      },
+      "&.url": {
+        color: vars.color.syntax.url
+      },
+      "&.variable": {
+        color: vars.color.syntax.variable
+      }
     }
   }
 }, tooltipRules = {
@@ -1885,32 +2229,76 @@ const badgeRules = {
   })
 }, flexRules = {
   // direction
-  ...responsiveRules("row", { flexDirection: "row" }),
-  ...responsiveRules("column", { flexDirection: "column" }),
+  ...responsiveRules("row", {
+    flexDirection: "row"
+  }),
+  ...responsiveRules("column", {
+    flexDirection: "column"
+  }),
   // align
-  ...responsiveRules("align-flex-start", { alignItems: "flex-start" }),
-  ...responsiveRules("align-flex-end", { alignItems: "end" }),
-  ...responsiveRules("align-center", { alignItems: "center" }),
-  ...responsiveRules("align-stretch", { alignItems: "stretch" }),
-  ...responsiveRules("align-baseline", { alignItems: "baseline" }),
+  ...responsiveRules("align-flex-start", {
+    alignItems: "flex-start"
+  }),
+  ...responsiveRules("align-flex-end", {
+    alignItems: "end"
+  }),
+  ...responsiveRules("align-center", {
+    alignItems: "center"
+  }),
+  ...responsiveRules("align-stretch", {
+    alignItems: "stretch"
+  }),
+  ...responsiveRules("align-baseline", {
+    alignItems: "baseline"
+  }),
   // justify
-  ...responsiveRules("justify-flex-start", { justifyContent: "flex-start" }),
-  ...responsiveRules("justify-flex-end", { justifyContent: "flex-end" }),
-  ...responsiveRules("justify-center", { justifyContent: "center" }),
-  ...responsiveRules("justify-between", { justifyContent: "space-between" }),
-  ...responsiveRules("justify-around", { justifyContent: "space-around" }),
-  ...responsiveRules("justify-evenly", { justifyContent: "space-evenly" }),
+  ...responsiveRules("justify-flex-start", {
+    justifyContent: "flex-start"
+  }),
+  ...responsiveRules("justify-flex-end", {
+    justifyContent: "flex-end"
+  }),
+  ...responsiveRules("justify-center", {
+    justifyContent: "center"
+  }),
+  ...responsiveRules("justify-between", {
+    justifyContent: "space-between"
+  }),
+  ...responsiveRules("justify-around", {
+    justifyContent: "space-around"
+  }),
+  ...responsiveRules("justify-evenly", {
+    justifyContent: "space-evenly"
+  }),
   // wrap
-  ...responsiveRules("wrap-nowrap", { flexWrap: "nowrap" }),
-  ...responsiveRules("wrap-wrap", { flexWrap: "wrap" }),
-  ...responsiveRules("wrap-reverse", { flexWrap: "wrap-reverse" })
+  ...responsiveRules("wrap-nowrap", {
+    flexWrap: "nowrap"
+  }),
+  ...responsiveRules("wrap-wrap", {
+    flexWrap: "wrap"
+  }),
+  ...responsiveRules("wrap-reverse", {
+    flexWrap: "wrap-reverse"
+  })
 }, flexItemRules = {
-  ...responsiveRules("flex-none", { flex: "none" }),
-  ...responsiveRules("flex-1", { flex: 1 }),
-  ...responsiveRules("flex-2", { flex: 2 }),
-  ...responsiveRules("flex-3", { flex: 3 }),
-  ...responsiveRules("flex-4", { flex: 4 }),
-  ...responsiveRules("flex-5", { flex: 5 })
+  ...responsiveRules("flex-none", {
+    flex: "none"
+  }),
+  ...responsiveRules("flex-1", {
+    flex: 1
+  }),
+  ...responsiveRules("flex-2", {
+    flex: 2
+  }),
+  ...responsiveRules("flex-3", {
+    flex: 3
+  }),
+  ...responsiveRules("flex-4", {
+    flex: 4
+  }),
+  ...responsiveRules("flex-5", {
+    flex: 5
+  })
 }, fontRules = {
   font: {
     position: "relative",
@@ -1966,172 +2354,451 @@ const badgeRules = {
   },
   "font-bold": {
     "--font-weight": "var(--font-weight-bold)"
-  }
+  },
+  // align
+  ...responsiveRules("text-align-initial", {
+    textAlign: "initial"
+  }),
+  ...responsiveRules("text-align-left", {
+    textAlign: "left"
+  }),
+  ...responsiveRules("text-align-center", {
+    textAlign: "center"
+  }),
+  ...responsiveRules("text-align-right", {
+    textAlign: "right"
+  }),
+  ...responsiveRules("text-align-justify", {
+    textAlign: "justify"
+  })
 }, gapRules = {
   ...SPACE.reduce((acc, space) => ({
     ...acc,
-    ...responsiveRules(`g-${space}`, {
-      gap: space === 0.5 ? "calc(var(--space-1) / 2)" : vars.space[space]
+    ...responsiveRules(`g-${space}`.replace(".", "_"), {
+      gap: vars.space[space]
     })
   }), {}),
   ...SPACE.reduce((acc, space) => ({
     ...acc,
-    ...responsiveRules(`gx-${space}`, {
-      columnGap: space === 0.5 ? "calc(var(--space-1) / 2)" : vars.space[space]
+    ...responsiveRules(`gx-${space}`.replace(".", "_"), {
+      columnGap: vars.space[space]
     })
   }), {}),
   ...SPACE.reduce((acc, space) => ({
     ...acc,
-    ...responsiveRules(`gy-${space}`, {
-      rowGap: space === 0.5 ? "calc(var(--space-1) / 2)" : vars.space[space]
+    ...responsiveRules(`gy-${space}`.replace(".", "_"), {
+      rowGap: vars.space[space]
     })
   }), {})
 }, gridRules = {
   // autoCols
-  ...responsiveRules("auto-cols-auto", { gridAutoColumns: "auto" }),
-  ...responsiveRules("auto-cols-min", { gridAutoColumns: "min" }),
-  ...responsiveRules("auto-cols-max", { gridAutoColumns: "max" }),
-  ...responsiveRules("auto-cols-fr", { gridAutoColumns: "fr" }),
+  ...responsiveRules("auto-cols-auto", {
+    gridAutoColumns: "auto"
+  }),
+  ...responsiveRules("auto-cols-min", {
+    gridAutoColumns: "min"
+  }),
+  ...responsiveRules("auto-cols-max", {
+    gridAutoColumns: "max"
+  }),
+  ...responsiveRules("auto-cols-fr", {
+    gridAutoColumns: "fr"
+  }),
   // autoFlow
-  ...responsiveRules("auto-flow-row", { gridAutoFlow: "row" }),
-  ...responsiveRules("auto-flow-column", { gridAutoFlow: "column" }),
-  ...responsiveRules("auto-flow-row-dense", { gridAutoFlow: "row dense" }),
-  ...responsiveRules("auto-flow-column-dense", { gridAutoFlow: "column dense" }),
+  ...responsiveRules("auto-flow-row", {
+    gridAutoFlow: "row"
+  }),
+  ...responsiveRules("auto-flow-column", {
+    gridAutoFlow: "column"
+  }),
+  ...responsiveRules("auto-flow-row-dense", {
+    gridAutoFlow: "row dense"
+  }),
+  ...responsiveRules("auto-flow-column-dense", {
+    gridAutoFlow: "column dense"
+  }),
   // autoRows
-  ...responsiveRules("auto-rows-auto", { gridAutoRows: "auto" }),
-  ...responsiveRules("auto-rows-min", { gridAutoRows: "min-content" }),
-  ...responsiveRules("auto-rows-max", { gridAutoRows: "max-content" }),
-  // ...responsiveRules('auto-rows-fr', {gridAutoRows: 'fr'}),
+  ...responsiveRules("auto-rows-auto", {
+    gridAutoRows: "auto"
+  }),
+  ...responsiveRules("auto-rows-min", {
+    gridAutoRows: "min-content"
+  }),
+  ...responsiveRules("auto-rows-max", {
+    gridAutoRows: "max-content"
+  }),
+  ...responsiveRules("auto-rows-fr", {
+    gridAutoRows: "minmax(0, 1fr)"
+  }),
   // columns
-  ...responsiveRules("columns-1", { gridTemplateColumns: "repeat(1, 1fr)" }),
-  ...responsiveRules("columns-2", { gridTemplateColumns: "repeat(2, 1fr)" }),
-  ...responsiveRules("columns-3", { gridTemplateColumns: "repeat(3, 1fr)" }),
-  ...responsiveRules("columns-4", { gridTemplateColumns: "repeat(4, 1fr)" }),
-  ...responsiveRules("columns-5", { gridTemplateColumns: "repeat(5, 1fr)" }),
-  ...responsiveRules("columns-6", { gridTemplateColumns: "repeat(6, 1fr)" }),
-  ...responsiveRules("columns-7", { gridTemplateColumns: "repeat(7, 1fr)" }),
-  ...responsiveRules("columns-8", { gridTemplateColumns: "repeat(8, 1fr)" }),
-  ...responsiveRules("columns-9", { gridTemplateColumns: "repeat(9, 1fr)" }),
-  ...responsiveRules("columns-10", { gridTemplateColumns: "repeat(10, 1fr)" }),
-  ...responsiveRules("columns-12", { gridTemplateColumns: "repeat(12, 1fr)" })
+  ...responsiveRules("columns-1", {
+    gridTemplateColumns: "repeat(1, 1fr)"
+  }),
+  ...responsiveRules("columns-2", {
+    gridTemplateColumns: "repeat(2, 1fr)"
+  }),
+  ...responsiveRules("columns-3", {
+    gridTemplateColumns: "repeat(3, 1fr)"
+  }),
+  ...responsiveRules("columns-4", {
+    gridTemplateColumns: "repeat(4, 1fr)"
+  }),
+  ...responsiveRules("columns-5", {
+    gridTemplateColumns: "repeat(5, 1fr)"
+  }),
+  ...responsiveRules("columns-6", {
+    gridTemplateColumns: "repeat(6, 1fr)"
+  }),
+  ...responsiveRules("columns-7", {
+    gridTemplateColumns: "repeat(7, 1fr)"
+  }),
+  ...responsiveRules("columns-8", {
+    gridTemplateColumns: "repeat(8, 1fr)"
+  }),
+  ...responsiveRules("columns-9", {
+    gridTemplateColumns: "repeat(9, 1fr)"
+  }),
+  ...responsiveRules("columns-10", {
+    gridTemplateColumns: "repeat(10, 1fr)"
+  }),
+  ...responsiveRules("columns-12", {
+    gridTemplateColumns: "repeat(12, 1fr)"
+  }),
+  // rows
+  ...responsiveRules("rows-1", {
+    gridTemplateRows: "repeat(1, 1fr)"
+  }),
+  ...responsiveRules("rows-2", {
+    gridTemplateRows: "repeat(2, 1fr)"
+  }),
+  ...responsiveRules("rows-3", {
+    gridTemplateRows: "repeat(3, 1fr)"
+  }),
+  ...responsiveRules("rows-4", {
+    gridTemplateRows: "repeat(4, 1fr)"
+  }),
+  ...responsiveRules("rows-5", {
+    gridTemplateRows: "repeat(5, 1fr)"
+  }),
+  ...responsiveRules("rows-6", {
+    gridTemplateRows: "repeat(6, 1fr)"
+  }),
+  ...responsiveRules("rows-7", {
+    gridTemplateRows: "repeat(7, 1fr)"
+  }),
+  ...responsiveRules("rows-8", {
+    gridTemplateRows: "repeat(8, 1fr)"
+  }),
+  ...responsiveRules("rows-9", {
+    gridTemplateRows: "repeat(9, 1fr)"
+  }),
+  ...responsiveRules("rows-10", {
+    gridTemplateRows: "repeat(10, 1fr)"
+  }),
+  ...responsiveRules("rows-12", {
+    gridTemplateRows: "repeat(12, 1fr)"
+  })
 }, gridItemRules = {
   // column
-  ...responsiveRules("col-auto", { gridColumn: "span 1 / span 1" }),
-  ...responsiveRules("col-full", { gridColumn: "1 / -1" }),
-  ...responsiveRules("col-1", { gridColumn: "span 1 / span 1" }),
-  ...responsiveRules("col-2", { gridColumn: "span 2 / span 2" }),
-  ...responsiveRules("col-3", { gridColumn: "span 3 / span 3" }),
-  ...responsiveRules("col-4", { gridColumn: "span 4 / span 4" }),
-  ...responsiveRules("col-5", { gridColumn: "span 5 / span 5" }),
-  ...responsiveRules("col-6", { gridColumn: "span 6 / span 6" }),
-  ...responsiveRules("col-7", { gridColumn: "span 7 / span 7" }),
-  ...responsiveRules("col-8", { gridColumn: "span 8 / span 8" }),
-  ...responsiveRules("col-9", { gridColumn: "span 9 / span 9" }),
-  ...responsiveRules("col-10", { gridColumn: "span 10 / span 10" }),
-  ...responsiveRules("col-11", { gridColumn: "span 11 / span 11" }),
-  ...responsiveRules("col-12", { gridColumn: "span 12 / span 12" }),
+  ...responsiveRules("col-auto", {
+    gridColumn: "span 1 / span 1"
+  }),
+  ...responsiveRules("col-full", {
+    gridColumn: "1 / -1"
+  }),
+  ...responsiveRules("col-1", {
+    gridColumn: "span 1 / span 1"
+  }),
+  ...responsiveRules("col-2", {
+    gridColumn: "span 2 / span 2"
+  }),
+  ...responsiveRules("col-3", {
+    gridColumn: "span 3 / span 3"
+  }),
+  ...responsiveRules("col-4", {
+    gridColumn: "span 4 / span 4"
+  }),
+  ...responsiveRules("col-5", {
+    gridColumn: "span 5 / span 5"
+  }),
+  ...responsiveRules("col-6", {
+    gridColumn: "span 6 / span 6"
+  }),
+  ...responsiveRules("col-7", {
+    gridColumn: "span 7 / span 7"
+  }),
+  ...responsiveRules("col-8", {
+    gridColumn: "span 8 / span 8"
+  }),
+  ...responsiveRules("col-9", {
+    gridColumn: "span 9 / span 9"
+  }),
+  ...responsiveRules("col-10", {
+    gridColumn: "span 10 / span 10"
+  }),
+  ...responsiveRules("col-11", {
+    gridColumn: "span 11 / span 11"
+  }),
+  ...responsiveRules("col-12", {
+    gridColumn: "span 12 / span 12"
+  }),
   // columnStart
-  ...responsiveRules("col-start-auto", { gridColumnStart: "auto" }),
-  ...responsiveRules("col-start-1", { gridColumnStart: "1" }),
-  ...responsiveRules("col-start-2", { gridColumnStart: "2" }),
-  ...responsiveRules("col-start-3", { gridColumnStart: "3" }),
-  ...responsiveRules("col-start-4", { gridColumnStart: "4" }),
-  ...responsiveRules("col-start-5", { gridColumnStart: "5" }),
-  ...responsiveRules("col-start-6", { gridColumnStart: "6" }),
-  ...responsiveRules("col-start-7", { gridColumnStart: "7" }),
-  ...responsiveRules("col-start-8", { gridColumnStart: "8" }),
-  ...responsiveRules("col-start-9", { gridColumnStart: "9" }),
-  ...responsiveRules("col-start-10", { gridColumnStart: "10" }),
-  ...responsiveRules("col-start-11", { gridColumnStart: "11" }),
-  ...responsiveRules("col-start-12", { gridColumnStart: "12" }),
+  ...responsiveRules("col-start-auto", {
+    gridColumnStart: "auto"
+  }),
+  ...responsiveRules("col-start-1", {
+    gridColumnStart: "1"
+  }),
+  ...responsiveRules("col-start-2", {
+    gridColumnStart: "2"
+  }),
+  ...responsiveRules("col-start-3", {
+    gridColumnStart: "3"
+  }),
+  ...responsiveRules("col-start-4", {
+    gridColumnStart: "4"
+  }),
+  ...responsiveRules("col-start-5", {
+    gridColumnStart: "5"
+  }),
+  ...responsiveRules("col-start-6", {
+    gridColumnStart: "6"
+  }),
+  ...responsiveRules("col-start-7", {
+    gridColumnStart: "7"
+  }),
+  ...responsiveRules("col-start-8", {
+    gridColumnStart: "8"
+  }),
+  ...responsiveRules("col-start-9", {
+    gridColumnStart: "9"
+  }),
+  ...responsiveRules("col-start-10", {
+    gridColumnStart: "10"
+  }),
+  ...responsiveRules("col-start-11", {
+    gridColumnStart: "11"
+  }),
+  ...responsiveRules("col-start-12", {
+    gridColumnStart: "12"
+  }),
   // columnEnd
-  ...responsiveRules("col-end-auto", { gridColumnEnd: "auto" }),
-  ...responsiveRules("col-end-1", { gridColumnEnd: "1" }),
-  ...responsiveRules("col-end-2", { gridColumnEnd: "2" }),
-  ...responsiveRules("col-end-3", { gridColumnEnd: "3" }),
-  ...responsiveRules("col-end-4", { gridColumnEnd: "4" }),
-  ...responsiveRules("col-end-5", { gridColumnEnd: "5" }),
-  ...responsiveRules("col-end-6", { gridColumnEnd: "6" }),
-  ...responsiveRules("col-end-7", { gridColumnEnd: "7" }),
-  ...responsiveRules("col-end-8", { gridColumnEnd: "8" }),
-  ...responsiveRules("col-end-9", { gridColumnEnd: "9" }),
-  ...responsiveRules("col-end-10", { gridColumnEnd: "10" }),
-  ...responsiveRules("col-end-11", { gridColumnEnd: "11" }),
-  ...responsiveRules("col-end-12", { gridColumnEnd: "12" }),
+  ...responsiveRules("col-end-auto", {
+    gridColumnEnd: "auto"
+  }),
+  ...responsiveRules("col-end-1", {
+    gridColumnEnd: "1"
+  }),
+  ...responsiveRules("col-end-2", {
+    gridColumnEnd: "2"
+  }),
+  ...responsiveRules("col-end-3", {
+    gridColumnEnd: "3"
+  }),
+  ...responsiveRules("col-end-4", {
+    gridColumnEnd: "4"
+  }),
+  ...responsiveRules("col-end-5", {
+    gridColumnEnd: "5"
+  }),
+  ...responsiveRules("col-end-6", {
+    gridColumnEnd: "6"
+  }),
+  ...responsiveRules("col-end-7", {
+    gridColumnEnd: "7"
+  }),
+  ...responsiveRules("col-end-8", {
+    gridColumnEnd: "8"
+  }),
+  ...responsiveRules("col-end-9", {
+    gridColumnEnd: "9"
+  }),
+  ...responsiveRules("col-end-10", {
+    gridColumnEnd: "10"
+  }),
+  ...responsiveRules("col-end-11", {
+    gridColumnEnd: "11"
+  }),
+  ...responsiveRules("col-end-12", {
+    gridColumnEnd: "12"
+  }),
   // row
-  ...responsiveRules("row-auto", { gridRow: "span 1 / span 1" }),
-  ...responsiveRules("row-full", { gridRow: "1 / -1" }),
-  ...responsiveRules("row-1", { gridRow: "span 1 / span 1" }),
-  ...responsiveRules("row-2", { gridRow: "span 2 / span 2" }),
-  ...responsiveRules("row-3", { gridRow: "span 3 / span 3" }),
-  ...responsiveRules("row-4", { gridRow: "span 4 / span 4" }),
-  ...responsiveRules("row-5", { gridRow: "span 5 / span 5" }),
-  ...responsiveRules("row-6", { gridRow: "span 6 / span 6" }),
-  ...responsiveRules("row-7", { gridRow: "span 7 / span 7" }),
-  ...responsiveRules("row-8", { gridRow: "span 8 / span 8" }),
-  ...responsiveRules("row-9", { gridRow: "span 9 / span 9" }),
-  ...responsiveRules("row-10", { gridRow: "span 10 / span 10" }),
-  ...responsiveRules("row-11", { gridRow: "span 11 / span 11" }),
-  ...responsiveRules("row-12", { gridRow: "span 12 / span 12" }),
+  ...responsiveRules("row-auto", {
+    gridRow: "span 1 / span 1"
+  }),
+  ...responsiveRules("row-full", {
+    gridRow: "1 / -1"
+  }),
+  ...responsiveRules("row-1", {
+    gridRow: "span 1 / span 1"
+  }),
+  ...responsiveRules("row-2", {
+    gridRow: "span 2 / span 2"
+  }),
+  ...responsiveRules("row-3", {
+    gridRow: "span 3 / span 3"
+  }),
+  ...responsiveRules("row-4", {
+    gridRow: "span 4 / span 4"
+  }),
+  ...responsiveRules("row-5", {
+    gridRow: "span 5 / span 5"
+  }),
+  ...responsiveRules("row-6", {
+    gridRow: "span 6 / span 6"
+  }),
+  ...responsiveRules("row-7", {
+    gridRow: "span 7 / span 7"
+  }),
+  ...responsiveRules("row-8", {
+    gridRow: "span 8 / span 8"
+  }),
+  ...responsiveRules("row-9", {
+    gridRow: "span 9 / span 9"
+  }),
+  ...responsiveRules("row-10", {
+    gridRow: "span 10 / span 10"
+  }),
+  ...responsiveRules("row-11", {
+    gridRow: "span 11 / span 11"
+  }),
+  ...responsiveRules("row-12", {
+    gridRow: "span 12 / span 12"
+  }),
   // rowStart
-  ...responsiveRules("row-start-auto", { gridRowStart: "auto" }),
-  ...responsiveRules("row-start-1", { gridRowStart: "1" }),
-  ...responsiveRules("row-start-2", { gridRowStart: "2" }),
-  ...responsiveRules("row-start-3", { gridRowStart: "3" }),
-  ...responsiveRules("row-start-4", { gridRowStart: "4" }),
-  ...responsiveRules("row-start-5", { gridRowStart: "5" }),
-  ...responsiveRules("row-start-6", { gridRowStart: "6" }),
-  ...responsiveRules("row-start-7", { gridRowStart: "7" }),
-  ...responsiveRules("row-start-8", { gridRowStart: "8" }),
-  ...responsiveRules("row-start-9", { gridRowStart: "9" }),
-  ...responsiveRules("row-start-10", { gridRowStart: "10" }),
-  ...responsiveRules("row-start-11", { gridRowStart: "11" }),
-  ...responsiveRules("row-start-12", { gridRowStart: "12" }),
+  ...responsiveRules("row-start-auto", {
+    gridRowStart: "auto"
+  }),
+  ...responsiveRules("row-start-1", {
+    gridRowStart: "1"
+  }),
+  ...responsiveRules("row-start-2", {
+    gridRowStart: "2"
+  }),
+  ...responsiveRules("row-start-3", {
+    gridRowStart: "3"
+  }),
+  ...responsiveRules("row-start-4", {
+    gridRowStart: "4"
+  }),
+  ...responsiveRules("row-start-5", {
+    gridRowStart: "5"
+  }),
+  ...responsiveRules("row-start-6", {
+    gridRowStart: "6"
+  }),
+  ...responsiveRules("row-start-7", {
+    gridRowStart: "7"
+  }),
+  ...responsiveRules("row-start-8", {
+    gridRowStart: "8"
+  }),
+  ...responsiveRules("row-start-9", {
+    gridRowStart: "9"
+  }),
+  ...responsiveRules("row-start-10", {
+    gridRowStart: "10"
+  }),
+  ...responsiveRules("row-start-11", {
+    gridRowStart: "11"
+  }),
+  ...responsiveRules("row-start-12", {
+    gridRowStart: "12"
+  }),
   // rowEnd
-  ...responsiveRules("row-end-auto", { gridRowEnd: "auto" }),
-  ...responsiveRules("row-end-1", { gridRowEnd: "1" }),
-  ...responsiveRules("row-end-2", { gridRowEnd: "2" }),
-  ...responsiveRules("row-end-3", { gridRowEnd: "3" }),
-  ...responsiveRules("row-end-4", { gridRowEnd: "4" }),
-  ...responsiveRules("row-end-5", { gridRowEnd: "5" }),
-  ...responsiveRules("row-end-6", { gridRowEnd: "6" }),
-  ...responsiveRules("row-end-7", { gridRowEnd: "7" }),
-  ...responsiveRules("row-end-8", { gridRowEnd: "8" }),
-  ...responsiveRules("row-end-9", { gridRowEnd: "9" }),
-  ...responsiveRules("row-end-10", { gridRowEnd: "10" }),
-  ...responsiveRules("row-end-11", { gridRowEnd: "11" }),
-  ...responsiveRules("row-end-12", { gridRowEnd: "12" })
-}, heightRules = {
-  ...responsiveRules("h-fill", { height: "100%" }),
-  ...responsiveRules("h-stretch", { height: "stretch" })
-}, marginRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`m-${space}`, { margin: vars.space[space] })
-}), {}), marginXRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`mx-${space}`, {
-    marginLeft: vars.space[space],
-    marginRight: vars.space[space]
+  ...responsiveRules("row-end-auto", {
+    gridRowEnd: "auto"
+  }),
+  ...responsiveRules("row-end-1", {
+    gridRowEnd: "1"
+  }),
+  ...responsiveRules("row-end-2", {
+    gridRowEnd: "2"
+  }),
+  ...responsiveRules("row-end-3", {
+    gridRowEnd: "3"
+  }),
+  ...responsiveRules("row-end-4", {
+    gridRowEnd: "4"
+  }),
+  ...responsiveRules("row-end-5", {
+    gridRowEnd: "5"
+  }),
+  ...responsiveRules("row-end-6", {
+    gridRowEnd: "6"
+  }),
+  ...responsiveRules("row-end-7", {
+    gridRowEnd: "7"
+  }),
+  ...responsiveRules("row-end-8", {
+    gridRowEnd: "8"
+  }),
+  ...responsiveRules("row-end-9", {
+    gridRowEnd: "9"
+  }),
+  ...responsiveRules("row-end-10", {
+    gridRowEnd: "10"
+  }),
+  ...responsiveRules("row-end-11", {
+    gridRowEnd: "11"
+  }),
+  ...responsiveRules("row-end-12", {
+    gridRowEnd: "12"
   })
-}), {}), marginYRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`my-${space}`, {
-    marginTop: vars.space[space],
-    marginBottom: vars.space[space]
+}, heightRules = {
+  ...responsiveRules("h-fill", {
+    height: "100%"
+  }),
+  ...responsiveRules("h-stretch", {
+    height: "stretch"
   })
-}), {}), marginTopRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`mt-${space}`, { marginTop: vars.space[space] })
-}), {}), marginRightRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`mr-${space}`, { marginRight: vars.space[space] })
-}), {}), marginBottomRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`mb-${space}`, { marginBottom: vars.space[space] })
-}), {}), marginLeftRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`ml-${space}`, { marginLeft: vars.space[space] })
-}), {}), maxWidthRules = {
+}, marginRules = {
+  // NOTE: order matters
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`m-${space}`.replace(".", "_"), {
+      margin: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mx-${space}`.replace(".", "_"), {
+      marginLeft: vars.space[space],
+      marginRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`my-${space}`.replace(".", "_"), {
+      marginTop: vars.space[space],
+      marginBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mt-${space}`.replace(".", "_"), {
+      marginTop: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mr-${space}`.replace(".", "_"), {
+      marginRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mb-${space}`.replace(".", "_"), {
+      marginBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`ml-${space}`.replace(".", "_"), {
+      marginLeft: vars.space[space]
+    })
+  }), {})
+}, maxWidthRules = {
   ...responsiveRules("max-w-0", {
     maxWidth: "var(--container-0)"
   }),
@@ -2156,39 +2823,69 @@ const badgeRules = {
   ...responsiveRules("max-w-fill", {
     maxWidth: "100%"
   })
+}, outlineRules = {
+  "outline-none": {
+    outline: "none"
+  }
 }, overflowRules = {
-  ...responsiveRules("overflow-visible", { overflow: "visible" }),
-  ...responsiveRules("overflow-hidden", { overflow: "hidden" }),
-  ...responsiveRules("overflow-scroll", { overflow: "scroll" }),
-  ...responsiveRules("overflow-auto", { overflow: "auto" })
-}, paddingRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`p-${space}`, { padding: vars.space[space] })
-}), {}), paddingXRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`px-${space}`, {
-    paddingLeft: vars.space[space],
-    paddingRight: vars.space[space]
-  })
-}), {}), paddingYRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`py-${space}`, {
-    paddingTop: vars.space[space],
-    paddingBottom: vars.space[space]
+  ...responsiveRules("overflow-visible", {
+    overflow: "visible"
+  }),
+  ...responsiveRules("overflow-hidden", {
+    overflow: "hidden"
+  }),
+  ...responsiveRules("overflow-scroll", {
+    overflow: "scroll"
+  }),
+  ...responsiveRules("overflow-auto", {
+    overflow: "auto"
   })
-}), {}), paddingTopRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`pt-${space}`, { paddingTop: vars.space[space] })
-}), {}), paddingRightRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`pr-${space}`, { paddingRight: vars.space[space] })
-}), {}), paddingBottomRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`pb-${space}`, { paddingBottom: vars.space[space] })
-}), {}), paddingLeftRules = SPACE.reduce((acc, space) => ({
-  ...acc,
-  ...responsiveRules(`pl-${space}`, { paddingLeft: vars.space[space] })
-}), {}), pointerEventsRules = {
+}, paddingRules = {
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`p-${space}`.replace(".", "_"), {
+      padding: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`px-${space}`.replace(".", "_"), {
+      paddingLeft: vars.space[space],
+      paddingRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`py-${space}`.replace(".", "_"), {
+      paddingTop: vars.space[space],
+      paddingBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pt-${space}`.replace(".", "_"), {
+      paddingTop: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pr-${space}`.replace(".", "_"), {
+      paddingRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pb-${space}`.replace(".", "_"), {
+      paddingBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pl-${space}`.replace(".", "_"), {
+      paddingLeft: vars.space[space]
+    })
+  }), {})
+}, pointerEventsRules = {
   "pointer-events-none": {
     pointerEvents: "none"
   },
@@ -2218,89 +2915,69 @@ const badgeRules = {
     bottom: 0
   })
 }, radiusRules = {
-  ...responsiveRules("r-0", { borderRadius: "var(--radius-0)" }),
-  ...responsiveRules("r-1", { borderRadius: "var(--radius-1)" }),
-  ...responsiveRules("r-2", { borderRadius: "var(--radius-2)" }),
-  ...responsiveRules("r-3", { borderRadius: "var(--radius-3)" }),
-  ...responsiveRules("r-4", { borderRadius: "var(--radius-4)" }),
-  ...responsiveRules("r-5", { borderRadius: "var(--radius-5)" }),
-  ...responsiveRules("r-6", { borderRadius: "var(--radius-6)" }),
-  ...responsiveRules("r-round", { borderRadius: "9999px" })
+  ...responsiveRules("r-0", {
+    borderRadius: "var(--radius-0)"
+  }),
+  ...responsiveRules("r-1", {
+    borderRadius: "var(--radius-1)"
+  }),
+  ...responsiveRules("r-2", {
+    borderRadius: "var(--radius-2)"
+  }),
+  ...responsiveRules("r-3", {
+    borderRadius: "var(--radius-3)"
+  }),
+  ...responsiveRules("r-4", {
+    borderRadius: "var(--radius-4)"
+  }),
+  ...responsiveRules("r-5", {
+    borderRadius: "var(--radius-5)"
+  }),
+  ...responsiveRules("r-6", {
+    borderRadius: "var(--radius-6)"
+  }),
+  ...responsiveRules("r-round", {
+    borderRadius: "9999px"
+  })
 }, shadowRules = {
   ...responsiveRules("shadow-0", {
     boxShadow: "none"
   }),
   ...responsiveRules("shadow-1", {
-    boxShadow: [
-      "var(--card-shadow-outline) var(--color-shadow-outline)",
-      "var(--shadow-1-umbra) var(--color-shadow-umbra)",
-      "var(--shadow-1-penumbra) var(--color-shadow-penumbra)",
-      "var(--shadow-1-ambient) var(--color-shadow-ambient)"
-    ].join(", ")
+    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-1-umbra) var(--color-shadow-umbra)", "var(--shadow-1-penumbra) var(--color-shadow-penumbra)", "var(--shadow-1-ambient) var(--color-shadow-ambient)"].join(", ")
   }),
   ...responsiveRules("shadow-2", {
-    boxShadow: [
-      "var(--card-shadow-outline) var(--color-shadow-outline)",
-      "var(--shadow-2-umbra) var(--color-shadow-umbra)",
-      "var(--shadow-2-penumbra) var(--color-shadow-penumbra)",
-      "var(--shadow-2-ambient) var(--color-shadow-ambient)"
-    ].join(", ")
+    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-2-umbra) var(--color-shadow-umbra)", "var(--shadow-2-penumbra) var(--color-shadow-penumbra)", "var(--shadow-2-ambient) var(--color-shadow-ambient)"].join(", ")
   }),
   ...responsiveRules("shadow-3", {
-    boxShadow: [
-      "var(--card-shadow-outline) var(--color-shadow-outline)",
-      "var(--shadow-3-umbra) var(--color-shadow-umbra)",
-      "var(--shadow-3-penumbra) var(--color-shadow-penumbra)",
-      "var(--shadow-3-ambient) var(--color-shadow-ambient)"
-    ].join(", ")
+    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-3-umbra) var(--color-shadow-umbra)", "var(--shadow-3-penumbra) var(--color-shadow-penumbra)", "var(--shadow-3-ambient) var(--color-shadow-ambient)"].join(", ")
   }),
   ...responsiveRules("shadow-4", {
-    boxShadow: [
-      "var(--card-shadow-outline) var(--color-shadow-outline)",
-      "var(--shadow-4-umbra) var(--color-shadow-umbra)",
-      "var(--shadow-4-penumbra) var(--color-shadow-penumbra)",
-      "var(--shadow-4-ambient) var(--color-shadow-ambient)"
-    ].join(", ")
+    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-4-umbra) var(--color-shadow-umbra)", "var(--shadow-4-penumbra) var(--color-shadow-penumbra)", "var(--shadow-4-ambient) var(--color-shadow-ambient)"].join(", ")
   }),
   ...responsiveRules("shadow-5", {
-    boxShadow: [
-      "var(--card-shadow-outline) var(--color-shadow-outline)",
-      "var(--shadow-5-umbra) var(--color-shadow-umbra)",
-      "var(--shadow-5-penumbra) var(--color-shadow-penumbra)",
-      "var(--shadow-5-ambient) var(--color-shadow-ambient)"
-    ].join(", ")
+    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-5-umbra) var(--color-shadow-umbra)", "var(--shadow-5-penumbra) var(--color-shadow-penumbra)", "var(--shadow-5-ambient) var(--color-shadow-ambient)"].join(", ")
   })
 }, widthRules = {
   "w-fill": {
     width: ["-moz-available", "-webkit-fill-available", "stretch"]
   }
 }, rules = {
-  // styless
+  // styles
+  ...borderRules,
   ...displayRules,
-  ...flexRules,
   ...flexItemRules,
-  ...gridItemRules,
-  ...borderRules,
-  ...paddingRules,
-  ...paddingXRules,
-  ...paddingYRules,
-  ...paddingTopRules,
-  ...paddingRightRules,
-  ...paddingBottomRules,
-  ...paddingLeftRules,
-  ...pointerEventsRules,
-  ...marginRules,
-  ...marginXRules,
-  ...marginYRules,
-  ...marginTopRules,
-  ...marginRightRules,
-  ...marginBottomRules,
-  ...marginLeftRules,
+  ...flexRules,
   ...fontRules,
   ...gapRules,
+  ...gridItemRules,
   ...gridRules,
   ...heightRules,
+  ...marginRules,
+  ...outlineRules,
   ...overflowRules,
+  ...paddingRules,
+  ...pointerEventsRules,
   ...positionRules,
   ...radiusRules,
   ...shadowRules,
@@ -2324,14 +3001,16 @@ const badgeRules = {
   ...selectableRules,
   ...spinnerRules,
   ...switchRules,
-  ...textRules,
   ...textAreaRules,
   ...textInputRules,
+  ...textRules,
   ...tokenRules,
   ...tooltipRules,
   // components
   ...breadcrumbsRules,
-  ...dialogRules
+  ...dialogRules,
+  ...menuRules,
+  ...skeletonRules
 };
 function compileRule(selector, props) {
   return compileProperties(selector, props) + compileNestedRules(selector, props["@nest"]);
@@ -2384,12 +3063,11 @@ function compileRules(rules2) {
     let keyframesCss = `@keyframes ${name} {
 `;
     for (const [key, props] of Object.entries(value))
-      keyframesCss += `  ${key} {
-`, keyframesCss += compileRule("", props).replace(/\n/g, `
+      keyframesCss += `  ${key}`, keyframesCss += compileRule("", props).replace(/\n/g, `
     `) + `
-`, keyframesCss += `  }
 `;
-    keyframesCss += `}
+    keyframesCss += `
+}
 `, css += keyframesCss;
   }
   for (const [query, queryRules] of Object.entries(mediaQueries))
@@ -2425,263 +3103,287 @@ function countThemeEntries(obj) {
 function compileTheme(theme) {
   for (const [key, val] of Object.entries(theme.color.light.default))
     (isRecord(val) || isArray(val)) && console.log(key, countThemeEntries(val));
-  return [
-    compileRule(".root", {
-      [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
-      [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
-      // [varNames.avatar.size[0].distance]: px(theme.avatar.size[0].distance),
-      // [varNames.avatar.size[0].size]: px(theme.avatar.size[0].size),
-      "--avatar-0-distance": px(theme.avatar.sizes[0].distance),
-      "--avatar-0-size": px(theme.avatar.sizes[0].size),
-      "--avatar-1-distance": px(theme.avatar.sizes[1].distance),
-      "--avatar-1-size": px(theme.avatar.sizes[1].size),
-      "--avatar-2-distance": px(theme.avatar.sizes[2].distance),
-      "--avatar-2-size": px(theme.avatar.sizes[2].size),
-      "--avatar-3-distance": px(theme.avatar.sizes[3].distance),
-      "--avatar-3-size": px(theme.avatar.sizes[3].size),
-      "--button-border-width": px(theme.button.border.width),
-      "--button-focus-ring-offset": px(theme.button.focusRing.offset),
-      "--button-focus-ring-width": px(theme.button.focusRing.width),
-      "--button-text-weight": `${theme.button.textWeight}`,
-      "--card-border-width": px(theme.card.border.width),
-      "--card-focus-ring-offset": px(theme.card.focusRing.offset),
-      "--card-focus-ring-width": px(theme.card.focusRing.width),
-      "--card-shadow-outline": `0 0 0 ${px(theme.card.shadow.outline)}`,
-      "--font-code-family": theme.font.code.family,
-      "--font-code-weight-regular": `${theme.font.code.weights.regular}`,
-      "--font-code-weight-medium": `${theme.font.code.weights.medium}`,
-      "--font-code-weight-semibold": `${theme.font.code.weights.semibold}`,
-      "--font-code-weight-bold": `${theme.font.code.weights.bold}`,
-      "--font-code-0-size": rem(theme.font.code.sizes[0].fontSize),
-      "--font-code-0-line-height": rem(theme.font.code.sizes[0].lineHeight),
-      "--font-code-0-ascender-height": px(theme.font.code.sizes[0].ascenderHeight),
-      "--font-code-0-descender-height": px(theme.font.code.sizes[0].descenderHeight),
-      "--font-code-0-letter-spacing": px(theme.font.code.sizes[0].letterSpacing),
-      "--font-code-0-icon-size": px(theme.font.code.sizes[0].iconSize),
-      "--font-code-1-size": rem(theme.font.code.sizes[1].fontSize),
-      "--font-code-1-line-height": px(theme.font.code.sizes[1].lineHeight),
-      "--font-code-1-ascender-height": px(theme.font.code.sizes[1].ascenderHeight),
-      "--font-code-1-descender-height": px(theme.font.code.sizes[1].descenderHeight),
-      "--font-code-1-letter-spacing": px(theme.font.code.sizes[1].letterSpacing),
-      "--font-code-1-icon-size": px(theme.font.code.sizes[1].iconSize),
-      "--font-code-2-size": rem(theme.font.code.sizes[2].fontSize),
-      "--font-code-2-line-height": rem(theme.font.code.sizes[2].lineHeight),
-      "--font-code-2-ascender-height": px(theme.font.code.sizes[2].ascenderHeight),
-      "--font-code-2-descender-height": px(theme.font.code.sizes[2].descenderHeight),
-      "--font-code-2-letter-spacing": px(theme.font.code.sizes[2].letterSpacing),
-      "--font-code-2-icon-size": px(theme.font.code.sizes[2].iconSize),
-      "--font-code-3-size": rem(theme.font.code.sizes[3].fontSize),
-      "--font-code-3-line-height": rem(theme.font.code.sizes[3].lineHeight),
-      "--font-code-3-ascender-height": px(theme.font.code.sizes[3].ascenderHeight),
-      "--font-code-3-descender-height": px(theme.font.code.sizes[3].descenderHeight),
-      "--font-code-3-letter-spacing": px(theme.font.code.sizes[3].letterSpacing),
-      "--font-code-3-icon-size": px(theme.font.code.sizes[3].iconSize),
-      "--font-code-4-size": rem(theme.font.code.sizes[4].fontSize),
-      "--font-code-4-line-height": rem(theme.font.code.sizes[4].lineHeight),
-      "--font-code-4-ascender-height": px(theme.font.code.sizes[4].ascenderHeight),
-      "--font-code-4-descender-height": px(theme.font.code.sizes[4].descenderHeight),
-      "--font-code-4-letter-spacing": px(theme.font.code.sizes[4].letterSpacing),
-      "--font-code-4-icon-size": px(theme.font.code.sizes[4].iconSize),
-      "--font-heading-family": theme.font.heading.family,
-      "--font-heading-weight-regular": `${theme.font.heading.weights.regular}`,
-      "--font-heading-weight-medium": `${theme.font.heading.weights.medium}`,
-      "--font-heading-weight-semibold": `${theme.font.heading.weights.semibold}`,
-      "--font-heading-weight-bold": `${theme.font.heading.weights.bold}`,
-      "--font-heading-0-size": rem(theme.font.heading.sizes[0].fontSize),
-      "--font-heading-0-line-height": rem(theme.font.heading.sizes[0].lineHeight),
-      "--font-heading-0-ascender-height": px(theme.font.heading.sizes[0].ascenderHeight),
-      "--font-heading-0-descender-height": px(theme.font.heading.sizes[0].descenderHeight),
-      "--font-heading-0-letter-spacing": px(theme.font.heading.sizes[0].letterSpacing),
-      "--font-heading-0-icon-size": px(theme.font.heading.sizes[0].iconSize),
-      "--font-heading-1-size": rem(theme.font.heading.sizes[1].fontSize),
-      "--font-heading-1-line-height": rem(theme.font.heading.sizes[1].lineHeight),
-      "--font-heading-1-ascender-height": px(theme.font.heading.sizes[1].ascenderHeight),
-      "--font-heading-1-descender-height": px(theme.font.heading.sizes[1].descenderHeight),
-      "--font-heading-1-letter-spacing": px(theme.font.heading.sizes[1].letterSpacing),
-      "--font-heading-1-icon-size": px(theme.font.heading.sizes[1].iconSize),
-      "--font-heading-2-size": rem(theme.font.heading.sizes[2].fontSize),
-      "--font-heading-2-line-height": rem(theme.font.heading.sizes[2].lineHeight),
-      "--font-heading-2-ascender-height": px(theme.font.heading.sizes[2].ascenderHeight),
-      "--font-heading-2-descender-height": px(theme.font.heading.sizes[2].descenderHeight),
-      "--font-heading-2-letter-spacing": px(theme.font.heading.sizes[2].letterSpacing),
-      "--font-heading-2-icon-size": px(theme.font.heading.sizes[2].iconSize),
-      "--font-heading-3-size": rem(theme.font.heading.sizes[3].fontSize),
-      "--font-heading-3-line-height": rem(theme.font.heading.sizes[3].lineHeight),
-      "--font-heading-3-ascender-height": px(theme.font.heading.sizes[3].ascenderHeight),
-      "--font-heading-3-descender-height": px(theme.font.heading.sizes[3].descenderHeight),
-      "--font-heading-3-letter-spacing": px(theme.font.heading.sizes[3].letterSpacing),
-      "--font-heading-3-icon-size": px(theme.font.heading.sizes[3].iconSize),
-      "--font-heading-4-size": rem(theme.font.heading.sizes[4].fontSize),
-      "--font-heading-4-line-height": rem(theme.font.heading.sizes[4].lineHeight),
-      "--font-heading-4-ascender-height": px(theme.font.heading.sizes[4].ascenderHeight),
-      "--font-heading-4-descender-height": px(theme.font.heading.sizes[4].descenderHeight),
-      "--font-heading-4-letter-spacing": px(theme.font.heading.sizes[4].letterSpacing),
-      "--font-heading-4-icon-size": px(theme.font.heading.sizes[4].iconSize),
-      "--font-heading-5-size": rem(theme.font.heading.sizes[5].fontSize),
-      "--font-heading-5-line-height": rem(theme.font.heading.sizes[5].lineHeight),
-      "--font-heading-5-ascender-height": px(theme.font.heading.sizes[5].ascenderHeight),
-      "--font-heading-5-descender-height": px(theme.font.heading.sizes[5].descenderHeight),
-      "--font-heading-5-letter-spacing": px(theme.font.heading.sizes[5].letterSpacing),
-      "--font-heading-5-icon-size": px(theme.font.heading.sizes[5].iconSize),
-      "--font-label-family": theme.font.label.family,
-      "--font-label-weight-regular": `${theme.font.label.weights.regular}`,
-      "--font-label-weight-medium": `${theme.font.label.weights.medium}`,
-      "--font-label-weight-semibold": `${theme.font.label.weights.semibold}`,
-      "--font-label-weight-bold": `${theme.font.label.weights.bold}`,
-      "--font-label-0-size": rem(theme.font.label.sizes[0].fontSize),
-      "--font-label-0-line-height": rem(theme.font.label.sizes[0].lineHeight),
-      "--font-label-0-ascender-height": px(theme.font.label.sizes[0].ascenderHeight),
-      "--font-label-0-descender-height": px(theme.font.label.sizes[0].descenderHeight),
-      "--font-label-0-letter-spacing": px(theme.font.label.sizes[0].letterSpacing),
-      "--font-label-0-icon-size": px(theme.font.label.sizes[0].iconSize),
-      "--font-label-1-size": rem(theme.font.label.sizes[1].fontSize),
-      "--font-label-1-line-height": rem(theme.font.label.sizes[1].lineHeight),
-      "--font-label-1-ascender-height": px(theme.font.label.sizes[1].ascenderHeight),
-      "--font-label-1-descender-height": px(theme.font.label.sizes[1].descenderHeight),
-      "--font-label-1-letter-spacing": px(theme.font.label.sizes[1].letterSpacing),
-      "--font-label-1-icon-size": px(theme.font.label.sizes[1].iconSize),
-      "--font-label-2-size": rem(theme.font.label.sizes[2].fontSize),
-      "--font-label-2-line-height": rem(theme.font.label.sizes[2].lineHeight),
-      "--font-label-2-ascender-height": px(theme.font.label.sizes[2].ascenderHeight),
-      "--font-label-2-descender-height": px(theme.font.label.sizes[2].descenderHeight),
-      "--font-label-2-letter-spacing": px(theme.font.label.sizes[2].letterSpacing),
-      "--font-label-2-icon-size": px(theme.font.label.sizes[2].iconSize),
-      "--font-label-3-size": rem(theme.font.label.sizes[3].fontSize),
-      "--font-label-3-line-height": rem(theme.font.label.sizes[3].lineHeight),
-      "--font-label-3-ascender-height": px(theme.font.label.sizes[3].ascenderHeight),
-      "--font-label-3-descender-height": px(theme.font.label.sizes[3].descenderHeight),
-      "--font-label-3-letter-spacing": px(theme.font.label.sizes[3].letterSpacing),
-      "--font-label-3-icon-size": px(theme.font.label.sizes[3].iconSize),
-      "--font-label-4-size": rem(theme.font.label.sizes[4].fontSize),
-      "--font-label-4-line-height": rem(theme.font.label.sizes[4].lineHeight),
-      "--font-label-4-ascender-height": px(theme.font.label.sizes[4].ascenderHeight),
-      "--font-label-4-descender-height": px(theme.font.label.sizes[4].descenderHeight),
-      "--font-label-4-letter-spacing": px(theme.font.label.sizes[4].letterSpacing),
-      "--font-label-4-icon-size": px(theme.font.label.sizes[4].iconSize),
-      "--font-label-5-size": rem(theme.font.label.sizes[5].fontSize),
-      "--font-label-5-line-height": rem(theme.font.label.sizes[5].lineHeight),
-      "--font-label-5-ascender-height": px(theme.font.label.sizes[5].ascenderHeight),
-      "--font-label-5-descender-height": px(theme.font.label.sizes[5].descenderHeight),
-      "--font-label-5-letter-spacing": px(theme.font.label.sizes[5].letterSpacing),
-      "--font-label-5-icon-size": px(theme.font.label.sizes[5].iconSize),
-      "--font-text-family": theme.font.text.family,
-      "--font-text-weight-regular": `${theme.font.text.weights.regular}`,
-      "--font-text-weight-medium": `${theme.font.text.weights.medium}`,
-      "--font-text-weight-semibold": `${theme.font.text.weights.semibold}`,
-      "--font-text-weight-bold": `${theme.font.text.weights.bold}`,
-      "--font-text-0-size": rem(theme.font.text.sizes[0].fontSize),
-      "--font-text-0-line-height": rem(theme.font.text.sizes[0].lineHeight),
-      "--font-text-0-ascender-height": px(theme.font.text.sizes[0].ascenderHeight),
-      "--font-text-0-descender-height": px(theme.font.text.sizes[0].descenderHeight),
-      "--font-text-0-letter-spacing": px(theme.font.text.sizes[0].letterSpacing),
-      "--font-text-0-icon-size": px(theme.font.text.sizes[0].iconSize),
-      "--font-text-1-size": rem(theme.font.text.sizes[1].fontSize),
-      "--font-text-1-line-height": rem(theme.font.text.sizes[1].lineHeight),
-      "--font-text-1-ascender-height": px(theme.font.text.sizes[1].ascenderHeight),
-      "--font-text-1-descender-height": px(theme.font.text.sizes[1].descenderHeight),
-      "--font-text-1-letter-spacing": px(theme.font.text.sizes[1].letterSpacing),
-      "--font-text-1-icon-size": px(theme.font.text.sizes[1].iconSize),
-      "--font-text-2-size": rem(theme.font.text.sizes[2].fontSize),
-      "--font-text-2-line-height": rem(theme.font.text.sizes[2].lineHeight),
-      "--font-text-2-ascender-height": px(theme.font.text.sizes[2].ascenderHeight),
-      "--font-text-2-descender-height": px(theme.font.text.sizes[2].descenderHeight),
-      "--font-text-2-letter-spacing": px(theme.font.text.sizes[2].letterSpacing),
-      "--font-text-2-icon-size": px(theme.font.text.sizes[2].iconSize),
-      "--font-text-3-size": rem(theme.font.text.sizes[3].fontSize),
-      "--font-text-3-line-height": rem(theme.font.text.sizes[3].lineHeight),
-      "--font-text-3-ascender-height": px(theme.font.text.sizes[3].ascenderHeight),
-      "--font-text-3-descender-height": px(theme.font.text.sizes[3].descenderHeight),
-      "--font-text-3-letter-spacing": px(theme.font.text.sizes[3].letterSpacing),
-      "--font-text-3-icon-size": px(theme.font.text.sizes[3].iconSize),
-      "--font-text-4-size": rem(theme.font.text.sizes[4].fontSize),
-      "--font-text-4-line-height": rem(theme.font.text.sizes[4].lineHeight),
-      "--font-text-4-ascender-height": px(theme.font.text.sizes[4].ascenderHeight),
-      "--font-text-4-descender-height": px(theme.font.text.sizes[4].descenderHeight),
-      "--font-text-4-letter-spacing": px(theme.font.text.sizes[4].letterSpacing),
-      "--font-text-4-icon-size": px(theme.font.text.sizes[4].iconSize),
-      "--input-border-width": px(theme.input.border.width),
-      "--input-checkbox-focus-ring-offset": px(theme.input.checkbox.focusRing.offset),
-      "--input-checkbox-focus-ring-width": px(theme.input.checkbox.focusRing.width),
-      "--input-checkbox-size": px(theme.input.checkbox.size),
-      "--input-radio-focus-ring-offset": px(theme.input.radio.focusRing.offset),
-      "--input-radio-focus-ring-width": px(theme.input.radio.focusRing.width),
-      "--input-radio-mark-size": px(theme.input.radio.markSize),
-      "--input-radio-size": px(theme.input.radio.size),
-      "--input-select-focus-ring-offset": px(theme.input.select.focusRing.offset),
-      "--input-select-focus-ring-width": px(theme.input.select.focusRing.width),
-      "--input-switch-focus-ring-offset": px(theme.input.switch.focusRing.offset),
-      "--input-switch-focus-ring-width": px(theme.input.switch.focusRing.width),
-      "--input-switch-width": px(theme.input.switch.width),
-      "--input-switch-height": px(theme.input.switch.height),
-      "--input-switch-padding": px(theme.input.switch.padding),
-      "--input-switch-transition-duration-ms": px(theme.input.switch.transitionDurationMs),
-      "--input-switch-transition-timing-function": theme.input.switch.transitionTimingFunction,
-      "--input-text-focus-ring-offset": px(theme.input.text.focusRing.offset),
-      "--input-text-focus-ring-width": px(theme.input.text.focusRing.width),
-      "--container-0": px(theme.container[0]),
-      "--container-1": px(theme.container[1]),
-      "--container-2": px(theme.container[2]),
-      "--container-3": px(theme.container[3]),
-      "--container-4": px(theme.container[4]),
-      "--container-5": px(theme.container[5]),
-      "--radius-0": px(theme.radius[0]),
-      "--radius-1": px(theme.radius[1]),
-      "--radius-2": px(theme.radius[2]),
-      "--radius-3": px(theme.radius[3]),
-      "--radius-4": px(theme.radius[4]),
-      "--radius-5": px(theme.radius[5]),
-      "--radius-6": px(theme.radius[6]),
-      [varNames.space[0]]: rem(theme.space[0]),
-      [varNames.space[1]]: rem(theme.space[1]),
-      [varNames.space[2]]: rem(theme.space[2]),
-      [varNames.space[3]]: rem(theme.space[3]),
-      [varNames.space[4]]: rem(theme.space[4]),
-      [varNames.space[5]]: rem(theme.space[5]),
-      [varNames.space[6]]: rem(theme.space[6]),
-      [varNames.space[7]]: rem(theme.space[7]),
-      [varNames.space[8]]: rem(theme.space[8]),
-      [varNames.space[9]]: rem(theme.space[9]),
-      "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
-      //`${theme.shadow[0]?.umbra || 'none'}`,
-      "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
-      "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
-      "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
-      "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
-      "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
-      "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
-      "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
-      "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
-      "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
-      "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
-      "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
-      "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
-      "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
-      "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
-      "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
-      "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
-      "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient),
-      ...Object.fromEntries(
-        getThemeEntries(theme.color, ["color"])
-      )
-    }),
-    compileCardCss({ scheme: "dark", tone: "transparent" }),
-    compileCardCss({ scheme: "dark", tone: "default" }),
-    compileCardCss({ scheme: "dark", tone: "primary" }),
-    compileCardCss({ scheme: "dark", tone: "positive" }),
-    compileCardCss({ scheme: "dark", tone: "caution" }),
-    compileCardCss({ scheme: "dark", tone: "critical" }),
-    compileCardCss({ scheme: "light", tone: "transparent" }),
-    compileCardCss({ scheme: "light", tone: "default" }),
-    compileCardCss({ scheme: "light", tone: "primary" }),
-    compileCardCss({ scheme: "light", tone: "positive" }),
-    compileCardCss({ scheme: "light", tone: "caution" }),
-    compileCardCss({ scheme: "light", tone: "critical" })
-  ].join(`
+  return [compileRule(":root", {
+    [varNames.avatar.focusRing.offset]: px(theme.avatar.focusRing.offset),
+    [varNames.avatar.focusRing.width]: px(theme.avatar.focusRing.width),
+    // [varNames.avatar.size[0].distance]: px(theme.avatar.size[0].distance),
+    // [varNames.avatar.size[0].size]: px(theme.avatar.size[0].size),
+    "--avatar-0-distance": px(theme.avatar.sizes[0].distance),
+    "--avatar-0-size": px(theme.avatar.sizes[0].size),
+    "--avatar-1-distance": px(theme.avatar.sizes[1].distance),
+    "--avatar-1-size": px(theme.avatar.sizes[1].size),
+    "--avatar-2-distance": px(theme.avatar.sizes[2].distance),
+    "--avatar-2-size": px(theme.avatar.sizes[2].size),
+    "--avatar-3-distance": px(theme.avatar.sizes[3].distance),
+    "--avatar-3-size": px(theme.avatar.sizes[3].size),
+    "--button-border-width": px(theme.button.border.width),
+    "--button-focus-ring-offset": px(theme.button.focusRing.offset),
+    "--button-focus-ring-width": px(theme.button.focusRing.width),
+    "--button-text-weight": `${theme.button.textWeight}`,
+    "--card-border-width": px(theme.card.border.width),
+    "--card-focus-ring-offset": px(theme.card.focusRing.offset),
+    "--card-focus-ring-width": px(theme.card.focusRing.width),
+    "--card-shadow-outline": `0 0 0 ${px(theme.card.shadow.outline)}`,
+    "--font-code-family": theme.font.code.family,
+    "--font-code-weight-regular": `${theme.font.code.weights.regular}`,
+    "--font-code-weight-medium": `${theme.font.code.weights.medium}`,
+    "--font-code-weight-semibold": `${theme.font.code.weights.semibold}`,
+    "--font-code-weight-bold": `${theme.font.code.weights.bold}`,
+    "--font-code-0-size": rem(theme.font.code.sizes[0].fontSize),
+    "--font-code-0-line-height": rem(theme.font.code.sizes[0].lineHeight),
+    "--font-code-0-ascender-height": px(theme.font.code.sizes[0].ascenderHeight),
+    "--font-code-0-descender-height": px(theme.font.code.sizes[0].descenderHeight),
+    "--font-code-0-letter-spacing": px(theme.font.code.sizes[0].letterSpacing),
+    "--font-code-0-icon-size": px(theme.font.code.sizes[0].iconSize),
+    "--font-code-1-size": rem(theme.font.code.sizes[1].fontSize),
+    "--font-code-1-line-height": px(theme.font.code.sizes[1].lineHeight),
+    "--font-code-1-ascender-height": px(theme.font.code.sizes[1].ascenderHeight),
+    "--font-code-1-descender-height": px(theme.font.code.sizes[1].descenderHeight),
+    "--font-code-1-letter-spacing": px(theme.font.code.sizes[1].letterSpacing),
+    "--font-code-1-icon-size": px(theme.font.code.sizes[1].iconSize),
+    "--font-code-2-size": rem(theme.font.code.sizes[2].fontSize),
+    "--font-code-2-line-height": rem(theme.font.code.sizes[2].lineHeight),
+    "--font-code-2-ascender-height": px(theme.font.code.sizes[2].ascenderHeight),
+    "--font-code-2-descender-height": px(theme.font.code.sizes[2].descenderHeight),
+    "--font-code-2-letter-spacing": px(theme.font.code.sizes[2].letterSpacing),
+    "--font-code-2-icon-size": px(theme.font.code.sizes[2].iconSize),
+    "--font-code-3-size": rem(theme.font.code.sizes[3].fontSize),
+    "--font-code-3-line-height": rem(theme.font.code.sizes[3].lineHeight),
+    "--font-code-3-ascender-height": px(theme.font.code.sizes[3].ascenderHeight),
+    "--font-code-3-descender-height": px(theme.font.code.sizes[3].descenderHeight),
+    "--font-code-3-letter-spacing": px(theme.font.code.sizes[3].letterSpacing),
+    "--font-code-3-icon-size": px(theme.font.code.sizes[3].iconSize),
+    "--font-code-4-size": rem(theme.font.code.sizes[4].fontSize),
+    "--font-code-4-line-height": rem(theme.font.code.sizes[4].lineHeight),
+    "--font-code-4-ascender-height": px(theme.font.code.sizes[4].ascenderHeight),
+    "--font-code-4-descender-height": px(theme.font.code.sizes[4].descenderHeight),
+    "--font-code-4-letter-spacing": px(theme.font.code.sizes[4].letterSpacing),
+    "--font-code-4-icon-size": px(theme.font.code.sizes[4].iconSize),
+    "--font-heading-family": theme.font.heading.family,
+    "--font-heading-weight-regular": `${theme.font.heading.weights.regular}`,
+    "--font-heading-weight-medium": `${theme.font.heading.weights.medium}`,
+    "--font-heading-weight-semibold": `${theme.font.heading.weights.semibold}`,
+    "--font-heading-weight-bold": `${theme.font.heading.weights.bold}`,
+    "--font-heading-0-size": rem(theme.font.heading.sizes[0].fontSize),
+    "--font-heading-0-line-height": rem(theme.font.heading.sizes[0].lineHeight),
+    "--font-heading-0-ascender-height": px(theme.font.heading.sizes[0].ascenderHeight),
+    "--font-heading-0-descender-height": px(theme.font.heading.sizes[0].descenderHeight),
+    "--font-heading-0-letter-spacing": px(theme.font.heading.sizes[0].letterSpacing),
+    "--font-heading-0-icon-size": px(theme.font.heading.sizes[0].iconSize),
+    "--font-heading-1-size": rem(theme.font.heading.sizes[1].fontSize),
+    "--font-heading-1-line-height": rem(theme.font.heading.sizes[1].lineHeight),
+    "--font-heading-1-ascender-height": px(theme.font.heading.sizes[1].ascenderHeight),
+    "--font-heading-1-descender-height": px(theme.font.heading.sizes[1].descenderHeight),
+    "--font-heading-1-letter-spacing": px(theme.font.heading.sizes[1].letterSpacing),
+    "--font-heading-1-icon-size": px(theme.font.heading.sizes[1].iconSize),
+    "--font-heading-2-size": rem(theme.font.heading.sizes[2].fontSize),
+    "--font-heading-2-line-height": rem(theme.font.heading.sizes[2].lineHeight),
+    "--font-heading-2-ascender-height": px(theme.font.heading.sizes[2].ascenderHeight),
+    "--font-heading-2-descender-height": px(theme.font.heading.sizes[2].descenderHeight),
+    "--font-heading-2-letter-spacing": px(theme.font.heading.sizes[2].letterSpacing),
+    "--font-heading-2-icon-size": px(theme.font.heading.sizes[2].iconSize),
+    "--font-heading-3-size": rem(theme.font.heading.sizes[3].fontSize),
+    "--font-heading-3-line-height": rem(theme.font.heading.sizes[3].lineHeight),
+    "--font-heading-3-ascender-height": px(theme.font.heading.sizes[3].ascenderHeight),
+    "--font-heading-3-descender-height": px(theme.font.heading.sizes[3].descenderHeight),
+    "--font-heading-3-letter-spacing": px(theme.font.heading.sizes[3].letterSpacing),
+    "--font-heading-3-icon-size": px(theme.font.heading.sizes[3].iconSize),
+    "--font-heading-4-size": rem(theme.font.heading.sizes[4].fontSize),
+    "--font-heading-4-line-height": rem(theme.font.heading.sizes[4].lineHeight),
+    "--font-heading-4-ascender-height": px(theme.font.heading.sizes[4].ascenderHeight),
+    "--font-heading-4-descender-height": px(theme.font.heading.sizes[4].descenderHeight),
+    "--font-heading-4-letter-spacing": px(theme.font.heading.sizes[4].letterSpacing),
+    "--font-heading-4-icon-size": px(theme.font.heading.sizes[4].iconSize),
+    "--font-heading-5-size": rem(theme.font.heading.sizes[5].fontSize),
+    "--font-heading-5-line-height": rem(theme.font.heading.sizes[5].lineHeight),
+    "--font-heading-5-ascender-height": px(theme.font.heading.sizes[5].ascenderHeight),
+    "--font-heading-5-descender-height": px(theme.font.heading.sizes[5].descenderHeight),
+    "--font-heading-5-letter-spacing": px(theme.font.heading.sizes[5].letterSpacing),
+    "--font-heading-5-icon-size": px(theme.font.heading.sizes[5].iconSize),
+    "--font-label-family": theme.font.label.family,
+    "--font-label-weight-regular": `${theme.font.label.weights.regular}`,
+    "--font-label-weight-medium": `${theme.font.label.weights.medium}`,
+    "--font-label-weight-semibold": `${theme.font.label.weights.semibold}`,
+    "--font-label-weight-bold": `${theme.font.label.weights.bold}`,
+    "--font-label-0-size": rem(theme.font.label.sizes[0].fontSize),
+    "--font-label-0-line-height": rem(theme.font.label.sizes[0].lineHeight),
+    "--font-label-0-ascender-height": px(theme.font.label.sizes[0].ascenderHeight),
+    "--font-label-0-descender-height": px(theme.font.label.sizes[0].descenderHeight),
+    "--font-label-0-letter-spacing": px(theme.font.label.sizes[0].letterSpacing),
+    "--font-label-0-icon-size": px(theme.font.label.sizes[0].iconSize),
+    "--font-label-1-size": rem(theme.font.label.sizes[1].fontSize),
+    "--font-label-1-line-height": rem(theme.font.label.sizes[1].lineHeight),
+    "--font-label-1-ascender-height": px(theme.font.label.sizes[1].ascenderHeight),
+    "--font-label-1-descender-height": px(theme.font.label.sizes[1].descenderHeight),
+    "--font-label-1-letter-spacing": px(theme.font.label.sizes[1].letterSpacing),
+    "--font-label-1-icon-size": px(theme.font.label.sizes[1].iconSize),
+    "--font-label-2-size": rem(theme.font.label.sizes[2].fontSize),
+    "--font-label-2-line-height": rem(theme.font.label.sizes[2].lineHeight),
+    "--font-label-2-ascender-height": px(theme.font.label.sizes[2].ascenderHeight),
+    "--font-label-2-descender-height": px(theme.font.label.sizes[2].descenderHeight),
+    "--font-label-2-letter-spacing": px(theme.font.label.sizes[2].letterSpacing),
+    "--font-label-2-icon-size": px(theme.font.label.sizes[2].iconSize),
+    "--font-label-3-size": rem(theme.font.label.sizes[3].fontSize),
+    "--font-label-3-line-height": rem(theme.font.label.sizes[3].lineHeight),
+    "--font-label-3-ascender-height": px(theme.font.label.sizes[3].ascenderHeight),
+    "--font-label-3-descender-height": px(theme.font.label.sizes[3].descenderHeight),
+    "--font-label-3-letter-spacing": px(theme.font.label.sizes[3].letterSpacing),
+    "--font-label-3-icon-size": px(theme.font.label.sizes[3].iconSize),
+    "--font-label-4-size": rem(theme.font.label.sizes[4].fontSize),
+    "--font-label-4-line-height": rem(theme.font.label.sizes[4].lineHeight),
+    "--font-label-4-ascender-height": px(theme.font.label.sizes[4].ascenderHeight),
+    "--font-label-4-descender-height": px(theme.font.label.sizes[4].descenderHeight),
+    "--font-label-4-letter-spacing": px(theme.font.label.sizes[4].letterSpacing),
+    "--font-label-4-icon-size": px(theme.font.label.sizes[4].iconSize),
+    "--font-label-5-size": rem(theme.font.label.sizes[5].fontSize),
+    "--font-label-5-line-height": rem(theme.font.label.sizes[5].lineHeight),
+    "--font-label-5-ascender-height": px(theme.font.label.sizes[5].ascenderHeight),
+    "--font-label-5-descender-height": px(theme.font.label.sizes[5].descenderHeight),
+    "--font-label-5-letter-spacing": px(theme.font.label.sizes[5].letterSpacing),
+    "--font-label-5-icon-size": px(theme.font.label.sizes[5].iconSize),
+    "--font-text-family": theme.font.text.family,
+    "--font-text-weight-regular": `${theme.font.text.weights.regular}`,
+    "--font-text-weight-medium": `${theme.font.text.weights.medium}`,
+    "--font-text-weight-semibold": `${theme.font.text.weights.semibold}`,
+    "--font-text-weight-bold": `${theme.font.text.weights.bold}`,
+    "--font-text-0-size": rem(theme.font.text.sizes[0].fontSize),
+    "--font-text-0-line-height": rem(theme.font.text.sizes[0].lineHeight),
+    "--font-text-0-ascender-height": px(theme.font.text.sizes[0].ascenderHeight),
+    "--font-text-0-descender-height": px(theme.font.text.sizes[0].descenderHeight),
+    "--font-text-0-letter-spacing": px(theme.font.text.sizes[0].letterSpacing),
+    "--font-text-0-icon-size": px(theme.font.text.sizes[0].iconSize),
+    "--font-text-1-size": rem(theme.font.text.sizes[1].fontSize),
+    "--font-text-1-line-height": rem(theme.font.text.sizes[1].lineHeight),
+    "--font-text-1-ascender-height": px(theme.font.text.sizes[1].ascenderHeight),
+    "--font-text-1-descender-height": px(theme.font.text.sizes[1].descenderHeight),
+    "--font-text-1-letter-spacing": px(theme.font.text.sizes[1].letterSpacing),
+    "--font-text-1-icon-size": px(theme.font.text.sizes[1].iconSize),
+    "--font-text-2-size": rem(theme.font.text.sizes[2].fontSize),
+    "--font-text-2-line-height": rem(theme.font.text.sizes[2].lineHeight),
+    "--font-text-2-ascender-height": px(theme.font.text.sizes[2].ascenderHeight),
+    "--font-text-2-descender-height": px(theme.font.text.sizes[2].descenderHeight),
+    "--font-text-2-letter-spacing": px(theme.font.text.sizes[2].letterSpacing),
+    "--font-text-2-icon-size": px(theme.font.text.sizes[2].iconSize),
+    "--font-text-3-size": rem(theme.font.text.sizes[3].fontSize),
+    "--font-text-3-line-height": rem(theme.font.text.sizes[3].lineHeight),
+    "--font-text-3-ascender-height": px(theme.font.text.sizes[3].ascenderHeight),
+    "--font-text-3-descender-height": px(theme.font.text.sizes[3].descenderHeight),
+    "--font-text-3-letter-spacing": px(theme.font.text.sizes[3].letterSpacing),
+    "--font-text-3-icon-size": px(theme.font.text.sizes[3].iconSize),
+    "--font-text-4-size": rem(theme.font.text.sizes[4].fontSize),
+    "--font-text-4-line-height": rem(theme.font.text.sizes[4].lineHeight),
+    "--font-text-4-ascender-height": px(theme.font.text.sizes[4].ascenderHeight),
+    "--font-text-4-descender-height": px(theme.font.text.sizes[4].descenderHeight),
+    "--font-text-4-letter-spacing": px(theme.font.text.sizes[4].letterSpacing),
+    "--font-text-4-icon-size": px(theme.font.text.sizes[4].iconSize),
+    "--input-border-width": px(theme.input.border.width),
+    "--input-checkbox-focus-ring-offset": px(theme.input.checkbox.focusRing.offset),
+    "--input-checkbox-focus-ring-width": px(theme.input.checkbox.focusRing.width),
+    "--input-checkbox-size": px(theme.input.checkbox.size),
+    "--input-radio-focus-ring-offset": px(theme.input.radio.focusRing.offset),
+    "--input-radio-focus-ring-width": px(theme.input.radio.focusRing.width),
+    "--input-radio-mark-size": px(theme.input.radio.markSize),
+    "--input-radio-size": px(theme.input.radio.size),
+    "--input-select-focus-ring-offset": px(theme.input.select.focusRing.offset),
+    "--input-select-focus-ring-width": px(theme.input.select.focusRing.width),
+    "--input-switch-focus-ring-offset": px(theme.input.switch.focusRing.offset),
+    "--input-switch-focus-ring-width": px(theme.input.switch.focusRing.width),
+    "--input-switch-width": px(theme.input.switch.width),
+    "--input-switch-height": px(theme.input.switch.height),
+    "--input-switch-padding": px(theme.input.switch.padding),
+    "--input-switch-transition-duration-ms": px(theme.input.switch.transitionDurationMs),
+    "--input-switch-transition-timing-function": theme.input.switch.transitionTimingFunction,
+    "--input-text-focus-ring-offset": px(theme.input.text.focusRing.offset),
+    "--input-text-focus-ring-width": px(theme.input.text.focusRing.width),
+    "--container-0": px(theme.container[0]),
+    "--container-1": px(theme.container[1]),
+    "--container-2": px(theme.container[2]),
+    "--container-3": px(theme.container[3]),
+    "--container-4": px(theme.container[4]),
+    "--container-5": px(theme.container[5]),
+    "--radius-0": px(theme.radius[0]),
+    "--radius-1": px(theme.radius[1]),
+    "--radius-2": px(theme.radius[2]),
+    "--radius-3": px(theme.radius[3]),
+    "--radius-4": px(theme.radius[4]),
+    "--radius-5": px(theme.radius[5]),
+    "--radius-6": px(theme.radius[6]),
+    [varNames.space[0]]: rem(theme.space[0]),
+    [varNames.space[0.5]]: `calc(${rem(theme.space[1])} / 2)`,
+    [varNames.space[1]]: rem(theme.space[1]),
+    [varNames.space[2]]: rem(theme.space[2]),
+    [varNames.space[3]]: rem(theme.space[3]),
+    [varNames.space[4]]: rem(theme.space[4]),
+    [varNames.space[5]]: rem(theme.space[5]),
+    [varNames.space[6]]: rem(theme.space[6]),
+    [varNames.space[7]]: rem(theme.space[7]),
+    [varNames.space[8]]: rem(theme.space[8]),
+    [varNames.space[9]]: rem(theme.space[9]),
+    "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
+    //`${theme.shadow[0]?.umbra || 'none'}`,
+    "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
+    "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
+    "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
+    "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
+    "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
+    "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
+    "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
+    "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
+    "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
+    "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
+    "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
+    "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
+    "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
+    "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
+    "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
+    "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
+    "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient),
+    ...Object.fromEntries(getThemeEntries(theme.color, ["color"]))
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "transparent"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "default"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "primary"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "positive"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "caution"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "critical"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "transparent"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "default"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "primary"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "positive"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "caution"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "critical"
+  })].join(`
 
 `);
 }
 function compileCardCss(props) {
-  const { scheme, tone } = props, cardVars = vars.color[scheme][tone];
+  const {
+    scheme,
+    tone
+  } = props, cardVars = vars.color[scheme][tone];
   return compileRule(`.card[data-scheme="${scheme}"][data-tone="${tone}"]`, {
     "--color-accent-fg": cardVars.accent.fg,
     ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
@@ -2842,8 +3544,8 @@ function dialogContent() {
 function dialogFooter() {
   return composeClassNames("dialog-footer");
 }
-function treeItem() {
-  return composeClassNames("tree-item");
+function menuDivider() {
+  return composeClassNames("menu-divider");
 }
 function _resp(prefix, prop) {
   if (prop !== void 0)
@@ -2852,13 +3554,29 @@ function _resp(prefix, prop) {
       return index === 0 ? `${className}` : `_${index}:${className}`;
     }).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
 }
+function radius(props) {
+  return composeClassNames(_resp("r", props.radius));
+}
+function skeleton(props) {
+  return composeClassNames("skeleton", radius(props));
+}
+function codeSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("code-skeleton", props.size));
+}
+function headingSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
+}
+function labelSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("label-skeleton", props.size));
+}
+function textSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("text-skeleton", props.size));
+}
+function treeItem() {
+  return composeClassNames("tree-item");
+}
 function avatar(props) {
-  return composeClassNames(
-    "avatar",
-    `avatar-${props.color}`,
-    `avatar-arrow-${props.arrowPosition}`,
-    _resp("avatar", props.size)
-  );
+  return composeClassNames("avatar", `avatar-${props.color}`, `avatar-arrow-${props.arrowPosition}`, _resp("avatar", props.size));
 }
 function avatarArrow() {
   return composeClassNames("avatar-arrow");
@@ -2875,9 +3593,6 @@ function avatarStroke() {
 function avatarImage() {
   return composeClassNames("avatar-image");
 }
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
 function badge(props) {
   return composeClassNames("badge", props.tone && `badge-${props.tone}`, radius(props));
 }
@@ -2892,12 +3607,7 @@ const prefixes$2 = {
   // `flex-wrap`
 };
 function flex(props) {
-  return composeClassNames(
-    _resp(prefixes$2.align, props.align),
-    _resp(prefixes$2.direction, props.direction),
-    _resp(prefixes$2.justify, props.justify),
-    _resp(prefixes$2.wrap, props.wrap)
-  );
+  return composeClassNames(_resp(prefixes$2.align, props.align), _resp(prefixes$2.direction, props.direction), _resp(prefixes$2.justify, props.justify), _resp(prefixes$2.wrap, props.wrap));
 }
 function flexItem(props) {
   return composeClassNames(_resp("flex", props.flex));
@@ -2905,40 +3615,23 @@ function flexItem(props) {
 function gap(props) {
   return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
 }
+function grid(props) {
+  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-rows", props.autoRows), _resp("auto-flow", props.autoFlow), _resp("columns", props.columns), _resp("rows", props.rows));
+}
 function gridItem(props) {
-  return composeClassNames(
-    _resp("col", props.column),
-    _resp("col-start", props.columnStart),
-    _resp("col-end", props.columnEnd),
-    _resp("row", props.row),
-    _resp("row-start", props.rowStart),
-    _resp("row-end", props.rowEnd)
-  );
+  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
 }
 function margin(props) {
-  return composeClassNames(
-    _resp("m", props.margin),
-    _resp("mx", props.marginX),
-    _resp("my", props.marginY),
-    _resp("mt", props.marginTop),
-    _resp("mr", props.marginRight),
-    _resp("mb", props.marginBottom),
-    _resp("ml", props.marginLeft)
-  );
+  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
 }
 function maxWidth(props) {
   return _resp("max-w", props.maxWidth) ?? "";
 }
+function overflow(props) {
+  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+}
 function padding(props) {
-  return composeClassNames(
-    _resp("p", props.padding),
-    _resp("px", props.paddingX),
-    _resp("py", props.paddingY),
-    _resp("pt", props.paddingTop),
-    _resp("pr", props.paddingRight),
-    _resp("pb", props.paddingBottom),
-    _resp("pl", props.paddingLeft)
-  );
+  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
 }
 function pointerEvents(props) {
   return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
@@ -2950,33 +3643,14 @@ function width(props) {
   return _resp("w", props.width) ?? "";
 }
 function box(props) {
-  return composeClassNames(
-    "box",
-    _resp(void 0, props.display),
-    _resp("h", props.height),
-    _resp("overflow", props.overflow),
-    _resp("box", props.sizing),
-    flex(props),
-    flexItem(props),
-    gridItem(props),
-    gap(props),
-    margin(props),
-    maxWidth(props),
-    padding(props),
-    pointerEvents(props),
-    position(props),
-    width(props)
-  );
+  return composeClassNames("box", _resp(void 0, props.display), _resp("h", props.height), _resp("box", props.sizing), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), margin(props), maxWidth(props), props.outline && `outline-${props.outline}`, overflow(props), padding(props), pointerEvents(props), position(props), width(props));
 }
 function button(props) {
-  const { mode = "default", tone = "default" } = props;
-  return composeClassNames(
-    "button",
-    `button-mode-${mode}`,
-    `button-tone-${tone}`,
-    radius(props),
-    width(props)
-  );
+  const {
+    mode = "default",
+    tone = "default"
+  } = props;
+  return composeClassNames("button", `button-mode-${mode}`, `button-tone-${tone}`, radius(props), width(props));
 }
 function buttonLoadingBox() {
   return "button-loading-box";
@@ -2989,23 +3663,10 @@ const prefixes$1 = {
   borderLeft: "border-l"
 };
 function border(props) {
-  return composeClassNames(
-    _resp(prefixes$1.border, props.border),
-    _resp(prefixes$1.borderTop, props.borderTop),
-    _resp(prefixes$1.borderRight, props.borderRight),
-    _resp(prefixes$1.borderBottom, props.borderBottom),
-    _resp(prefixes$1.borderLeft, props.borderLeft)
-  );
+  return composeClassNames(_resp(prefixes$1.border, props.border), _resp(prefixes$1.borderTop, props.borderTop), _resp(prefixes$1.borderRight, props.borderRight), _resp(prefixes$1.borderBottom, props.borderBottom), _resp(prefixes$1.borderLeft, props.borderLeft));
 }
 function card(props) {
-  return composeClassNames(
-    "card",
-    props.checkered && "card-checkered",
-    box(props),
-    border(props),
-    radius(props),
-    props.shadow === void 0 ? void 0 : `shadow-${props.shadow}`
-  );
+  return composeClassNames("card", props.checkered && "card-checkered", box(props), border(props), radius(props), props.shadow === void 0 ? void 0 : `shadow-${props.shadow}`);
 }
 function checkbox() {
   return composeClassNames("checkbox");
@@ -3014,39 +3675,28 @@ function checkboxInput() {
   return composeClassNames("checkbox-input");
 }
 const prefixes = {
+  align: "text-align",
   weight: "font"
 };
 function font(props) {
-  return composeClassNames("font", _resp(prefixes.weight, props.weight));
+  return composeClassNames("font", props.weight && `${prefixes.weight}-${props.weight}`, _resp(prefixes.align, props.align));
 }
 function code(props) {
   return composeClassNames("code", "block", font(props), _resp("code", props.size));
 }
 function container(props) {
-  return composeClassNames("container", maxWidth({ maxWidth: props.width }));
+  return composeClassNames("container", maxWidth({
+    maxWidth: props.width
+  }));
 }
 function heading(props) {
-  return composeClassNames(
-    "heading",
-    "block",
-    font(props),
-    props.accent && "heading-accent",
-    props.muted && "heading-muted",
-    _resp("heading", props.size)
-  );
+  return composeClassNames("heading", "block", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size));
 }
 function kbd(props) {
   return composeClassNames("kbd", radius(props));
 }
 function label(props) {
-  return composeClassNames(
-    "label",
-    "block",
-    font(props),
-    props.accent && "label-accent",
-    props.muted && "label-muted",
-    _resp("label", props.size)
-  );
+  return composeClassNames("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
 }
 function popover() {
   return composeClassNames("popover");
@@ -3058,30 +3708,31 @@ function select() {
   return composeClassNames("select");
 }
 function selectable(props) {
-  const { tone = "default" } = props;
+  const {
+    tone = "default"
+  } = props;
   return composeClassNames("selectable", `selectable-tone-${tone}`, radius(props));
 }
 function spinner() {
   return composeClassNames("spinner");
 }
+function animatedSpinnerIcon() {
+  return composeClassNames("animated-spinner-icon");
+}
 function _switch() {
   return composeClassNames("switch");
 }
 function text(props) {
-  return composeClassNames(
-    "text",
-    "block",
-    font(props),
-    props.accent && "text-accent",
-    props.muted && "text-muted",
-    _resp("text", props.size)
-  );
+  return composeClassNames("text", "block", font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
 }
 function textArea() {
   return composeClassNames("text-area");
 }
 function textInput(props) {
-  return composeClassNames("text-input", _resp("text-input", props.size));
+  return composeClassNames("text-input", _resp("text-input", props.size), _resp("text-input-p", props.padding));
+}
+function textInputElement() {
+  return composeClassNames("text-input-element");
 }
 function tooltip() {
   return composeClassNames("tooltip");
@@ -3091,6 +3742,7 @@ function tooltipCard() {
 }
 export {
   _switch,
+  animatedSpinnerIcon,
   avatar,
   avatarArrow,
   avatarBgStroke,
@@ -3106,6 +3758,7 @@ export {
   checkbox,
   checkboxInput,
   code,
+  codeSkeleton,
   compileSystem,
   compileTheme,
   composeClassNames,
@@ -3118,16 +3771,22 @@ export {
   dialogHeader,
   dialogLayout,
   heading,
+  headingSkeleton,
   kbd,
   label,
+  labelSkeleton,
+  menuDivider,
   popover,
   radio,
   select,
   selectable,
+  skeleton,
   spinner,
   text,
   textArea,
   textInput,
+  textInputElement,
+  textSkeleton,
   tooltip,
   tooltipCard,
   treeItem