@sanity/ui 2.10.0-corel.0 → 3.0.0-static.0

package/dist/css.esm.js

@@ -0,0 +1,3135 @@
+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";
+const breadcrumbsRules = {
+  breadcrumbs: {
+    lineHeight: 0
+  }
+}, dialogRules = {
+  dialog: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    outline: "none",
+    background: "var(--color-backdrop)",
+    "@keyframes": {
+      "dialog-zoom-in": {
+        from: {
+          opacity: 0,
+          transform: "scale(0.95)"
+        },
+        to: {
+          opacity: 1,
+          transform: "scale(1)"
+        }
+      },
+      "dialog-fade-in": {
+        from: {
+          opacity: 0
+        },
+        to: {
+          opacity: 1
+        }
+      }
+    },
+    "@nest": {
+      "&[data-animate]": {
+        animation: "dialog-fade-in 200ms ease-out"
+      },
+      // Animates the dialog card.
+      '&[data-animate] > [data-ui="DialogCard"]': {
+        animation: "dialog-zoom-in 200ms ease-out"
+      }
+    }
+  },
+  "dialog-container": {
+    width: "100%",
+    height: "100%"
+  },
+  "dialog-card-root": {
+    width: "100%",
+    maxHeight: "100%",
+    overflow: ["hidden", "clip"]
+  },
+  "dialog-layout": {
+    width: "100%"
+  },
+  "dialog-header": {
+    zIndex: 2
+  },
+  "dialog-content": {
+    zIndex: 1,
+    outline: "none"
+  },
+  "dialog-footer": {
+    zIndex: 3
+  }
+};
+function responsiveRules(className, props) {
+  return {
+    [className]: props,
+    [`_1:${className}`]: {
+      "@media": { "screen and (min-width: 360px)": props }
+    },
+    [`_2:${className}`]: {
+      "@media": { "screen and (min-width: 600px)": props }
+    },
+    [`_3:${className}`]: {
+      "@media": { "screen and (min-width: 900px)": props }
+    },
+    [`_4:${className}`]: {
+      "@media": { "screen and (min-width: 1200px)": props }
+    },
+    [`_5:${className}`]: {
+      "@media": { "screen and (min-width: 1800px)": props }
+    },
+    [`_6:${className}`]: {
+      "@media": { "screen and (min-width: 2400px)": props }
+    }
+  };
+}
+const avatarRules = {
+  avatar: {
+    backgroundColor: "var(--avatar-bg-color)",
+    position: "relative",
+    boxSizing: "border-box",
+    userSelect: "none",
+    boxShadow: "0 0 0 1px var(--card-bg-color)",
+    "@nest": {
+      '&[data-status="inactive"]': {
+        opacity: 0.5
+      },
+      "& > svg:not([hidden])": {
+        display: "block"
+      },
+      /* &:is(button) */
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: "inherit",
+        appearance: "none",
+        margin: 0,
+        padding: 0,
+        border: 0,
+        font: "inherit",
+        color: "inherit",
+        outline: "none"
+      },
+      '&[data-as="button"]:focus': {
+        // boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
+      },
+      '&[data-as="button"]:focus:not(:focus-visible)': {
+        boxShadow: "none"
+      }
+    }
+  },
+  ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+    ...acc,
+    [`avatar-${color}`]: {
+      "--avatar-bg-color": `var(--card-avatar-${color}-bg-color)`,
+      "--avatar-fg-color": `var(--card-avatar-${color}-fg-color)`
+    }
+  }), {}),
+  "avatar-arrow": {
+    position: "absolute",
+    boxSizing: "border-box",
+    zIndex: 0,
+    opacity: 0,
+    transition: "all 0.2s linear",
+    transform: "rotate(-90deg) translate3d(0, 6px, 0)",
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    "@nest": {
+      "& > svg": {
+        width: "11px",
+        height: "7px",
+        position: "absolute",
+        top: "-5px",
+        left: "50%",
+        transform: "translateX(-6px)"
+      },
+      "& > svg:not([hidden])": {
+        display: "block"
+      },
+      ".arrow-position-inside > &": {
+        transform: "rotate(-90deg) translate3d(0, 6px, 0)",
+        opacity: 0
+      },
+      ".arrow-position-top > &": {
+        opacity: 1,
+        transform: "rotate(0deg)"
+      },
+      ".arrow-position-bottom > &": {
+        opacity: 1,
+        transform: "rotate(-180deg)"
+      }
+    }
+  },
+  ...responsiveRules("avatar-0", {
+    width: "var(--avatar-0-size)",
+    height: "var(--avatar-0-size)",
+    borderRadius: "var(--avatar-0-size)",
+    "@nest": {
+      "& > svg": {
+        width: "var(--avatar-0-size)",
+        height: "var(--avatar-0-size)",
+        borderRadius: "var(--avatar-0-size)"
+      }
+    }
+  }),
+  ...responsiveRules("avatar-1", {
+    width: "var(--avatar-1-size)",
+    height: "var(--avatar-1-size)",
+    borderRadius: "var(--avatar-1-size)",
+    "@nest": {
+      "& > svg": {
+        width: "var(--avatar-1-size)",
+        height: "var(--avatar-1-size)",
+        borderRadius: "var(--avatar-1-size)"
+      }
+    }
+  }),
+  ...responsiveRules("avatar-2", {
+    width: "var(--avatar-2-size)",
+    height: "var(--avatar-2-size)",
+    borderRadius: "var(--avatar-2-size)",
+    "@nest": {
+      "& > svg": {
+        width: "var(--avatar-2-size)",
+        height: "var(--avatar-2-size)",
+        borderRadius: "var(--avatar-2-size)"
+      }
+    }
+  }),
+  ...responsiveRules("avatar-3", {
+    width: "var(--avatar-3-size)",
+    height: "var(--avatar-3-size)",
+    borderRadius: "var(--avatar-3-size)",
+    "@nest": {
+      "& > svg": {
+        width: "var(--avatar-3-size)",
+        height: "var(--avatar-3-size)",
+        borderRadius: "var(--avatar-3-size)"
+      }
+    }
+  }),
+  "avatar-initials": {
+    width: "100%",
+    height: "100%",
+    color: "var(--avatar-fg-color)",
+    alignItems: "center",
+    justifyContent: "center",
+    textTransform: "uppercase",
+    textAlign: "center",
+    borderRadius: "50%",
+    "@nest": {
+      "&:not([hidden])": {
+        display: "flex"
+      }
+    }
+  },
+  "avatar-bg-stroke": {
+    strokeWidth: "4px",
+    stroke: "var(--card-bg-color)"
+  },
+  "avatar-stroke": {
+    strokeWidth: "2px",
+    stroke: "var(--avatar-bg-color)",
+    "@nest": {
+      '[data-status="editing"] &': {
+        strokeDasharray: "2 4",
+        strokeLinecap: "round"
+      }
+    }
+  },
+  "avatar-image": {
+    position: "relative"
+  }
+}, 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" })
+    },
+    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" })
+    },
+    //
+    accent: {
+      fg: "--color-accent-fg"
+    },
+    avatar: {
+      gray: {
+        bg: "--color-avatar-gray-bg",
+        fg: "--color-avatar-gray-fg"
+      },
+      blue: {
+        bg: "--color-avatar-blue-bg",
+        fg: "--color-avatar-blue-fg"
+      },
+      purple: {
+        bg: "--color-avatar-purple-bg",
+        fg: "--color-avatar-purple-fg"
+      },
+      magenta: {
+        bg: "--color-avatar-magenta-bg",
+        fg: "--color-avatar-magenta-fg"
+      },
+      red: {
+        bg: "--color-avatar-red-bg",
+        fg: "--color-avatar-red-fg"
+      },
+      orange: {
+        bg: "--color-avatar-orange-bg",
+        fg: "--color-avatar-orange-fg"
+      },
+      yellow: {
+        bg: "--color-avatar-yellow-bg",
+        fg: "--color-avatar-yellow-fg"
+      },
+      green: {
+        bg: "--color-avatar-green-bg",
+        fg: "--color-avatar-green-fg"
+      },
+      cyan: {
+        bg: "--color-avatar-cyan-bg",
+        fg: "--color-avatar-cyan-fg"
+      }
+    },
+    badge: {
+      bg: "--color-badge-bg",
+      dot: "--color-badge-dot",
+      fg: "--color-badge-fg",
+      icon: "--color-badge-icon",
+      default: {
+        bg: "--color-badge-default-bg",
+        dot: "--color-badge-default-dot",
+        fg: "--color-badge-default-fg",
+        icon: "--color-badge-default-icon"
+      },
+      primary: {
+        bg: "--color-badge-primary-bg",
+        dot: "--color-badge-primary-dot",
+        fg: "--color-badge-primary-fg",
+        icon: "--color-badge-primary-icon"
+      },
+      positive: {
+        bg: "--color-badge-positive-bg",
+        dot: "--color-badge-positive-dot",
+        fg: "--color-badge-positive-fg",
+        icon: "--color-badge-positive-icon"
+      },
+      caution: {
+        bg: "--color-badge-caution-bg",
+        dot: "--color-badge-caution-dot",
+        fg: "--color-badge-caution-fg",
+        icon: "--color-badge-caution-icon"
+      },
+      critical: {
+        bg: "--color-badge-critical-bg",
+        dot: "--color-badge-critical-dot",
+        fg: "--color-badge-critical-fg",
+        icon: "--color-badge-critical-icon"
+      }
+    },
+    bg: "--color-bg",
+    border: "--color-border",
+    code: {
+      bg: "--color-code-bg",
+      fg: "--color-code-fg"
+    },
+    fg: "--color-fg",
+    icon: "--color-icon",
+    kbd: {
+      bg: "--color-kbd-bg",
+      border: "--color-kbd-border",
+      fg: "--color-kbd-fg"
+    },
+    link: {
+      fg: "--color-link-fg"
+    },
+    muted: {
+      bg: "--color-muted-bg",
+      fg: "--color-muted-fg"
+    },
+    shadow: {
+      outline: "--color-shadow-outline",
+      umbra: "--color-shadow-umbra",
+      penumbra: "--color-shadow-penumbra",
+      ambient: "--color-shadow-ambient"
+    },
+    skeleton: {
+      from: "--color-skeleton-from",
+      to: "--color-skeleton-to"
+    },
+    syntax: {
+      atrule: "--color-syntax-atrule",
+      attrName: "--color-syntax-attrName",
+      attrValue: "--color-syntax-attrValue",
+      attribute: "--color-syntax-attribute",
+      boolean: "--color-syntax-boolean",
+      builtin: "--color-syntax-builtin",
+      cdata: "--color-syntax-cdata",
+      char: "--color-syntax-char",
+      class: "--color-syntax-class",
+      className: "--color-syntax-className",
+      comment: "--color-syntax-comment",
+      constant: "--color-syntax-constant",
+      deleted: "--color-syntax-deleted",
+      doctype: "--color-syntax-doctype",
+      entity: "--color-syntax-entity",
+      function: "--color-syntax-function",
+      hexcode: "--color-syntax-hexcode",
+      id: "--color-syntax-id",
+      important: "--color-syntax-important",
+      inserted: "--color-syntax-inserted",
+      keyword: "--color-syntax-keyword",
+      number: "--color-syntax-number",
+      operator: "--color-syntax-operator",
+      prolog: "--color-syntax-prolog",
+      property: "--color-syntax-property",
+      pseudoClass: "--color-syntax-pseudoClass",
+      pseudoElement: "--color-syntax-pseudoElement",
+      punctuation: "--color-syntax-punctuation",
+      regex: "--color-syntax-regex",
+      selector: "--color-syntax-selector",
+      string: "--color-syntax-string",
+      symbol: "--color-syntax-symbol",
+      tag: "--color-syntax-tag",
+      unit: "--color-syntax-unit",
+      url: "--color-syntax-url",
+      variable: "--color-syntax-variable"
+    }
+  },
+  avatar: {
+    focusRing: {
+      offset: "--avatar-focus-ring-offset",
+      width: "--avatar-focus-ring-width"
+    }
+  },
+  space: Object.fromEntries(
+    SPACE.map((space) => [space, `--space-${space}`])
+  )
+};
+function buildColorCardVarNames(props) {
+  const { scheme, tone } = props, prefix = `--color-${scheme}-${tone}`;
+  return {
+    accent: {
+      fg: `${prefix}-accent-fg`
+    },
+    avatar: {
+      gray: {
+        bg: `${prefix}-avatar-gray-bg`,
+        fg: `${prefix}-avatar-gray-fg`
+      },
+      blue: {
+        bg: `${prefix}-avatar-blue-bg`,
+        fg: `${prefix}-avatar-blue-fg`
+      },
+      purple: {
+        bg: `${prefix}-avatar-purple-bg`,
+        fg: `${prefix}-avatar-purple-fg`
+      },
+      magenta: {
+        bg: `${prefix}-avatar-magenta-bg`,
+        fg: `${prefix}-avatar-magenta-fg`
+      },
+      red: {
+        bg: `${prefix}-avatar-red-bg`,
+        fg: `${prefix}-avatar-red-fg`
+      },
+      orange: {
+        bg: `${prefix}-avatar-orange-bg`,
+        fg: `${prefix}-avatar-gray-fg`
+      },
+      yellow: {
+        bg: `${prefix}-avatar-yellow-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
+      },
+      green: {
+        bg: `${prefix}-avatar-green-bg`,
+        fg: `${prefix}-avatar-green-fg`
+      },
+      cyan: {
+        bg: `${prefix}-avatar-cyan-bg`,
+        fg: `${prefix}-avatar-yellow-fg`
+      }
+    },
+    backdrop: `${prefix}-backdrop`,
+    badge: {
+      default: {
+        bg: `${prefix}-badge-default-bg`,
+        dot: `${prefix}-badge-default-dot`,
+        fg: `${prefix}-badge-default-fg`,
+        icon: `${prefix}-badge-default-icon`
+      },
+      primary: {
+        bg: `${prefix}-badge-primary-bg`,
+        dot: `${prefix}-badge-primary-dot`,
+        fg: `${prefix}-badge-primary-fg`,
+        icon: `${prefix}-badge-primary-icon`
+      },
+      positive: {
+        bg: `${prefix}-badge-positive-bg`,
+        dot: `${prefix}-badge-positive-dot`,
+        fg: `${prefix}-badge-positive-fg`,
+        icon: `${prefix}-badge-positive-icon`
+      },
+      caution: {
+        bg: `${prefix}-badge-caution-bg`,
+        dot: `${prefix}-badge-caution-dot`,
+        fg: `${prefix}-badge-caution-fg`,
+        icon: `${prefix}-badge-caution-icon`
+      },
+      critical: {
+        bg: `${prefix}-badge-critical-bg`,
+        dot: `${prefix}-badge-critical-dot`,
+        fg: `${prefix}-badge-critical-fg`,
+        icon: `${prefix}-badge-critical-icon`
+      }
+    },
+    bg: `${prefix}-bg`,
+    border: `${prefix}-border`,
+    code: {
+      bg: `${prefix}-code-bg`,
+      fg: `${prefix}-code-fg`
+    },
+    fg: `${prefix}-fg`,
+    focusRing: `${prefix}-focus-ring`,
+    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 })
+      },
+      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 })
+      }
+    },
+    kbd: {
+      bg: `${prefix}-kbd-bg`,
+      border: `${prefix}-kbd-border`,
+      fg: `${prefix}-kbd-fg`
+    },
+    link: {
+      fg: `${prefix}-link-fg`
+    },
+    muted: {
+      bg: `${prefix}-muted-bg`,
+      fg: `${prefix}-muted-fg`
+    },
+    skeleton: {
+      from: `${prefix}-skeleton-from`,
+      to: `${prefix}-skeleton-to`
+    },
+    shadow: {
+      outline: `${prefix}-shadow-outline`,
+      umbra: `${prefix}-shadow-umbra`,
+      penumbra: `${prefix}-shadow-penumbra`,
+      ambient: `${prefix}-shadow-ambient`
+    },
+    syntax: {
+      atrule: `${prefix}-syntax-atrule`,
+      attrName: `${prefix}-syntax-attrName`,
+      attrValue: `${prefix}-syntax-attrValue`,
+      attribute: `${prefix}-syntax-attribute`,
+      boolean: `${prefix}-syntax-boolean`,
+      builtin: `${prefix}-syntax-builtin`,
+      cdata: `${prefix}-syntax-cdata`,
+      char: `${prefix}-syntax-char`,
+      class: `${prefix}-syntax-class`,
+      className: `${prefix}-syntax-className`,
+      comment: `${prefix}-syntax-comment`,
+      constant: `${prefix}-syntax-constant`,
+      deleted: `${prefix}-syntax-deleted`,
+      doctype: `${prefix}-syntax-doctype`,
+      entity: `${prefix}-syntax-entity`,
+      function: `${prefix}-syntax-function`,
+      hexcode: `${prefix}-syntax-hexcode`,
+      id: `${prefix}-syntax-id`,
+      important: `${prefix}-syntax-important`,
+      inserted: `${prefix}-syntax-inserted`,
+      keyword: `${prefix}-syntax-keyword`,
+      number: `${prefix}-syntax-number`,
+      operator: `${prefix}-syntax-operator`,
+      prolog: `${prefix}-syntax-prolog`,
+      property: `${prefix}-syntax-property`,
+      pseudoClass: `${prefix}-syntax-pseudoClass`,
+      pseudoElement: `${prefix}-syntax-pseudoElement`,
+      punctuation: `${prefix}-syntax-punctuation`,
+      regex: `${prefix}-syntax-regex`,
+      selector: `${prefix}-syntax-selector`,
+      string: `${prefix}-syntax-string`,
+      symbol: `${prefix}-syntax-symbol`,
+      tag: `${prefix}-syntax-tag`,
+      unit: `${prefix}-syntax-unit`,
+      url: `${prefix}-syntax-url`,
+      variable: `${prefix}-syntax-variable`
+    }
+  };
+}
+function buildColorInputStateVarNames(props) {
+  const { mode, scheme, state, tone } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
+  return {
+    bg: `${prefix}-bg`,
+    border: `${prefix}-border`,
+    fg: `${prefix}-fg`,
+    muted: {
+      bg: `${prefix}-muted-bg`
+    },
+    placeholder: `${prefix}-placeholder`
+  };
+}
+const vars = {
+  color: {
+    dark: THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+      ...acc,
+      [tone]: buildColorCardVars({ scheme: "dark", tone })
+    }), {}),
+    light: THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
+      ...acc,
+      [tone]: buildColorCardVars({ scheme: "light", tone })
+    }), {}),
+    accent: {
+      fg: "var(--color-accent-fg)"
+    },
+    avatar: {
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+        ...acc,
+        [color]: {
+          bg: `var(--color-avatar-${color}-bg)`,
+          fg: `var(--color-avatar-${color}-fg)`
+        }
+      }), {})
+    },
+    badge: {
+      bg: "var(--color-badge-bg)",
+      dot: "var(--color-badge-dot)",
+      fg: "var(--color-badge-fg)",
+      icon: "var(--color-badge-icon)",
+      ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+        ...acc,
+        [tone]: {
+          bg: `var(--color-badge-${tone}-bg)`,
+          dot: `var(--color-badge-${tone}-dot)`,
+          fg: `var(--color-badge-${tone}-fg)`,
+          icon: `var(--color-badge-${tone}-icon)`
+        }
+      }), {})
+    },
+    bg: "var(--color-bg)",
+    border: "var(--color-border)",
+    code: {
+      bg: "var(--color-code-bg)",
+      fg: "var(--color-code-fg)"
+    },
+    fg: "var(--color-fg)",
+    icon: "var(--color-icon)",
+    input: {
+      ...THEME_COLOR_INPUT_MODES.reduce((acc, mode) => ({
+        ...acc,
+        [mode]: {
+          ...THEME_COLOR_INPUT_STATES.reduce((acc2, state) => ({
+            ...acc2,
+            [state]: {
+              bg: "var(--color-bg)",
+              border: "var(--color-border)",
+              fg: "var(--color-fg)",
+              muted: {
+                fg: "var(--color-muted-fg)"
+              },
+              placeholder: "var(--color-placeholder)"
+            }
+          }), {})
+        }
+      }), {})
+    },
+    kbd: {
+      bg: "var(--color-kbd-bg)",
+      border: "var(--color-kbd-border)",
+      fg: "var(--color-kbd-fg)"
+    },
+    link: {
+      fg: "var(--color-link-fg)"
+    },
+    muted: {
+      bg: "var(--color-muted-bg)",
+      fg: "var(--color-muted-fg)"
+    },
+    shadow: {
+      outline: "var(--color-shadow-outline)",
+      umbra: "var(--color-shadow-umbra)",
+      penumbra: "var(--color-shadow-penumbra)",
+      ambient: "var(--color-shadow-ambient)"
+    },
+    skeleton: {
+      from: "var(--color-skeleton-from)",
+      to: "var(--color-skeleton-to)"
+    },
+    syntax: {
+      atrule: "var(--color-syntax-atrule)",
+      attrName: "var(--color-syntax-attrName)",
+      attrValue: "var(--color-syntax-attrValue)",
+      attribute: "var(--color-syntax-attribute)",
+      boolean: "var(--color-syntax-boolean)",
+      builtin: "var(--color-syntax-builtin)",
+      cdata: "var(--color-syntax-cdata)",
+      char: "var(--color-syntax-char)",
+      class: "var(--color-syntax-class)",
+      className: "var(--color-syntax-className)",
+      comment: "var(--color-syntax-comment)",
+      constant: "var(--color-syntax-constant)",
+      deleted: "var(--color-syntax-deleted)",
+      doctype: "var(--color-syntax-doctype)",
+      entity: "var(--color-syntax-entity)",
+      function: "var(--color-syntax-function)",
+      hexcode: "var(--color-syntax-hexcode)",
+      id: "var(--color-syntax-id)",
+      important: "var(--color-syntax-important)",
+      inserted: "var(--color-syntax-inserted)",
+      keyword: "var(--color-syntax-keyword)",
+      number: "var(--color-syntax-number)",
+      operator: "var(--color-syntax-operator)",
+      prolog: "var(--color-syntax-prolog)",
+      property: "var(--color-syntax-property)",
+      pseudoClass: "var(--color-syntax-pseudoClass)",
+      pseudoElement: "var(--color-syntax-pseudoElement)",
+      punctuation: "var(--color-syntax-punctuation)",
+      regex: "var(--color-syntax-regex)",
+      selector: "var(--color-syntax-selector)",
+      string: "var(--color-syntax-string)",
+      symbol: "var(--color-syntax-symbol)",
+      tag: "var(--color-syntax-tag)",
+      unit: "var(--color-syntax-unit)",
+      url: "var(--color-syntax-url)",
+      variable: "var(--color-syntax-variable)"
+    }
+  },
+  space: Object.fromEntries(
+    SPACE.map((space) => [space, `var(${varNames.space[space]})`])
+  )
+};
+function buildColorCardVars(props) {
+  const { scheme, tone } = props, prefix = `--color-${scheme}-${tone}`;
+  return {
+    accent: {
+      fg: `var(${prefix}-accent-fg)`
+    },
+    avatar: {
+      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+        ...acc,
+        [color]: {
+          bg: `var(${prefix}-avatar-${color}-bg)`,
+          fg: `var(${prefix}-avatar-${color}-fg)`
+        }
+      }), {})
+    },
+    backdrop: `var(${prefix}-backdrop)`,
+    badge: {
+      ...THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+        ...acc,
+        [tone2]: {
+          bg: `var(${prefix}-badge-${tone2}-bg)`,
+          dot: `var(${prefix}-badge-${tone2}-dot)`,
+          fg: `var(${prefix}-badge-${tone2}-fg)`,
+          icon: `var(${prefix}-badge-${tone2}-icon)`
+        }
+      }), {})
+    },
+    bg: `var(${prefix}-bg)`,
+    border: `var(${prefix}-border)`,
+    code: {
+      bg: `var(${prefix}-code-bg)`,
+      fg: `var(${prefix}-code-fg)`
+    },
+    fg: `var(${prefix}-fg)`,
+    focusRing: `var(${prefix}-focus-ring)`,
+    icon: `var(${prefix}-icon)`,
+    input: {
+      ...THEME_COLOR_INPUT_MODES.reduce((acc, mode) => ({
+        ...acc,
+        [mode]: {
+          ...THEME_COLOR_INPUT_STATES.reduce((acc2, state) => ({
+            ...acc2,
+            [state]: buildColorInputStateVars({ mode, scheme, state, tone })
+          }), {})
+        }
+      }), {})
+    },
+    kbd: {
+      bg: `var(${prefix}-kbd-bg)`,
+      border: `var(${prefix}-kbd-border)`,
+      fg: `var(${prefix}-kbd-fg)`
+    },
+    link: {
+      fg: `var(${prefix}-link-fg)`
+    },
+    muted: {
+      bg: `var(${prefix}-muted-bg)`,
+      fg: `var(${prefix}-muted-fg)`
+    },
+    skeleton: {
+      from: `var(${prefix}-skeleton-from)`,
+      to: `var(${prefix}-skeleton-to)`
+    },
+    shadow: {
+      outline: `var(${prefix}-shadow-outline)`,
+      umbra: `var(${prefix}-shadow-umbra)`,
+      penumbra: `var(${prefix}-shadow-penumbra)`,
+      ambient: `var(${prefix}-shadow-ambient)`
+    },
+    syntax: {
+      atrule: `var(${prefix}-syntax-atrule)`,
+      attrName: `var(${prefix}-syntax-attrName)`,
+      attrValue: `var(${prefix}-syntax-attrValue)`,
+      attribute: `var(${prefix}-syntax-attribute)`,
+      boolean: `var(${prefix}-syntax-boolean)`,
+      builtin: `var(${prefix}-syntax-builtin)`,
+      cdata: `var(${prefix}-syntax-cdata)`,
+      char: `var(${prefix}-syntax-char)`,
+      class: `var(${prefix}-syntax-class)`,
+      className: `var(${prefix}-syntax-className)`,
+      comment: `var(${prefix}-syntax-comment)`,
+      constant: `var(${prefix}-syntax-constant)`,
+      deleted: `var(${prefix}-syntax-deleted)`,
+      doctype: `var(${prefix}-syntax-doctype)`,
+      entity: `var(${prefix}-syntax-entity)`,
+      function: `var(${prefix}-syntax-function)`,
+      hexcode: `var(${prefix}-syntax-hexcode)`,
+      id: `var(${prefix}-syntax-id)`,
+      important: `var(${prefix}-syntax-important)`,
+      inserted: `var(${prefix}-syntax-inserted)`,
+      keyword: `var(${prefix}-syntax-keyword)`,
+      number: `var(${prefix}-syntax-number)`,
+      operator: `var(${prefix}-syntax-operator)`,
+      prolog: `var(${prefix}-syntax-prolog)`,
+      property: `var(${prefix}-syntax-property)`,
+      pseudoClass: `var(${prefix}-syntax-pseudoClass)`,
+      pseudoElement: `var(${prefix}-syntax-pseudoElement)`,
+      punctuation: `var(${prefix}-syntax-punctuation)`,
+      regex: `var(${prefix}-syntax-regex)`,
+      selector: `var(${prefix}-syntax-selector)`,
+      string: `var(${prefix}-syntax-string)`,
+      symbol: `var(${prefix}-syntax-symbol)`,
+      tag: `var(${prefix}-syntax-tag)`,
+      unit: `var(${prefix}-syntax-unit)`,
+      url: `var(${prefix}-syntax-url)`,
+      variable: `var(${prefix}-syntax-variable)`
+    }
+  };
+}
+function buildColorInputStateVars(props) {
+  const { mode, scheme, state, tone } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
+  return {
+    bg: `var(${prefix}-bg)`,
+    border: `var(${prefix}-border)`,
+    fg: `var(${prefix}-fg)`,
+    muted: {
+      bg: `var(${prefix}-muted-bg)`
+    },
+    placeholder: `var(${prefix}-placeholder)`
+  };
+}
+const badgeRules = {
+  badge: {
+    backgroundColor: vars.color.badge.bg,
+    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
+      }
+    }),
+    {}
+  )
+}, boxRules = {
+  box: {
+    minWidth: 0,
+    minHeight: 0,
+    "@nest": {
+      // 'ul.&, ol.&': {
+      '&[data-as="ul"], &[data-as="ol"]': {
+        listStyle: "none"
+      }
+    }
+  },
+  // sizing
+  "box-content": {
+    boxSizing: "content-box"
+  },
+  "box-border": {
+    boxSizing: "border-box"
+  }
+}, buttonRules = {
+  button: {
+    WebkitFontSmoothing: "inherit",
+    appearance: "none",
+    display: "inline-flex",
+    alignItems: "center",
+    font: "inherit",
+    outline: "none",
+    userSelect: "none",
+    textDecoration: "none",
+    border: 0,
+    boxSizing: "border-box",
+    padding: 0,
+    overflow: "hidden",
+    margin: 0,
+    textAlign: "left",
+    position: "relative",
+    verticalAlign: "top",
+    backgroundColor: "var(--card-bg-color)",
+    color: "var(--card-fg-color)"
+  },
+  // variants
+  ...THEME_COLOR_BUTTON_MODES.reduce((acc, mode) => ({
+    ...acc,
+    [`button-mode-${mode}`]: {
+      "@nest": THEME_COLOR_STATE_TONES.reduce((acc2, tone) => ({
+        ...acc2,
+        [`&.button-tone-${tone}`]: {
+          "--card-bg-color": `var(--card-button-${mode}-${tone}-enabled-bg-color, rgba(127, 127, 127, 0.1))`,
+          "--card-fg-color": `var(--card-button-${mode}-${tone}-enabled-fg-color, currentColor)`
+        }
+      }), {})
+    }
+  }), {}),
+  "button-loading-box": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // display: 'flex',
+    // alignItems: 'center',
+    // justifyContent: 'center',
+    backgroundColor: "var(--card-bg-color)",
+    borderRadius: "inherit",
+    zIndex: 1
+    // boxShadow: 'inherit',
+  }
+}, cardRules = {
+  card: {
+    backgroundColor: "var(--card-bg-color)",
+    color: "var(--card-fg-color)",
+    /* deprecated variables (kept for legacy) */
+    "--card-accent-fg-color": "var(--color-accent-fg)",
+    ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
+      ...acc,
+      [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
+      [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`
+    }), {}),
+    "--card-backdrop-color": "var(--color-backdrop)",
+    ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+      ...acc,
+      [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
+      [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
+      [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
+      [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`
+    }), {}),
+    "--card-bg-color": "var(--color-bg)",
+    "--card-border-color": "var(--color-border)",
+    "--card-code-bg-color": "var(--color-code-bg)",
+    "--card-code-fg-color": "var(--color-code-fg)",
+    "--card-fg-color": "var(--color-fg)",
+    "--card-focus-ring-color": "var(--color-focus-ring)",
+    "--card-icon-color": "var(--color-icon)",
+    "--card-kbd-bg-color": "var(--color-kbd-bg)",
+    "--card-kbd-border-color": "var(--color-kbd-border)",
+    "--card-kbd-fg-color": "var(--color-kbd-fg)",
+    "--card-link-fg-color": "var(--color-link-fg)",
+    "--card-muted-bg-color": "var(--color-muted-bg)",
+    "--card-muted-fg-color": "var(--color-muted-fg)",
+    "--card-shadow-outline-color": "var(--color-shadow-outline)",
+    "--card-shadow-umbra-color": "var(--color-shadow-umbra)",
+    "--card-shadow-penumbra-color": "var(--color-shadow-penumbra)",
+    "--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, */
+    "@nest": {
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: "inherit",
+        appearance: "none",
+        outline: "none",
+        font: "inherit",
+        textAlign: "inherit",
+        border: 0,
+        width: ["-moz-available", "-webkit-fill-available", "stretch"]
+      },
+      '&[data-as="a"]': {
+        outline: "none",
+        textDecoration: "none"
+      },
+      '&[data-as="pre"]': {
+        font: "inherit"
+      }
+    }
+  }
+}, checkboxRules = {
+  checkbox: {
+    position: "relative",
+    display: "inline-block"
+  },
+  "checkbox-input": {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    outline: "none",
+    opacity: 0,
+    zIndex: 1,
+    padding: 0,
+    margin: 0,
+    "@nest": {
+      "& + span": {
+        position: "relative",
+        display: "block",
+        width: "var(--input-checkbox-size)",
+        height: "var(--input-checkbox-size)",
+        boxSizing: "border-box",
+        borderRadius: "var(--radius-2)",
+        lineHeight: 1,
+        backgroundColor: "var(--color-checkbox-bg)",
+        boxShadow: "inset 0 0 0 1px var(--color-checkbox-border)",
+        color: "var(--color-checkbox-fg)",
+        "--color-checkbox-bg": "var(--color-input-default-enabled-bg)",
+        "--color-checkbox-border": "var(--color-input-default-enabled-border)",
+        "--color-checkbox-fg": "var(--color-input-default-enabled-fg)"
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.border,
+        //   width: input.border.width,
+        // })},
+      },
+      "& + span > svg": {
+        display: "block",
+        position: "absolute",
+        opacity: 0,
+        height: "100%",
+        width: "100%"
+      },
+      "& + span > svg > path": {
+        vectorEffect: "non-scaling-stroke",
+        strokeWidth: "1.5px !important"
+      },
+      "&:checked + span": {
+        "--color-checkbox-bg": "var(--color-input-default-enabled-fg)",
+        "--color-checkbox-border": "var(--color-input-default-enabled-fg)",
+        "--color-checkbox-fg": "var(--color-input-default-enabled-bg)"
+        // box-shadow: ${focusRingBorderStyle({
+        //   color: color.input.default.enabled.fg,
+        //   width: input.border.width,
+        // })},
+      },
+      "&:checked + span > svg:first-child": {
+        opacity: 1
+      },
+      // focus
+      "&:not(:disabled):focus:focus-visible + span": {
+        // box-shadow: ${focusRingStyle({focusRing})},
+      },
+      // focus when checked - uses a different offset
+      "&:not(:disabled):focus:focus-visible&:checked + span": {
+        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
+      },
+      "&[data-error] + span": {
+        "--color-checkbox-bg": "var(--color-input-invalid-enabled-border)",
+        "--color-checkbox-border": "var(--color-input-invalid-enabled-bg)",
+        "--color-checkbox-fg": "var(--color-input-invalid-enabled-fg)"
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.invalid.enabled.muted.bg,
+        // })},
+      },
+      "&[data-error]:checked + span": {
+        "--color-checkbox-bg": "var(--color-input-invalid-enabled-muted-bg)",
+        "--color-checkbox-fg": "var(--color-input-invalid-enabled-bg)"
+      },
+      "&[data-error]:checked:not(:disabled):focus:focus-visible + span": {
+        "--color-checkbox-border": "var(--color-input-invalid-readOnly-muted-bg)"
+        // box-shadow: ${focusRingStyle({
+        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
+        //   focusRing: {width: 1, offset: 1},
+        // })},
+      },
+      "&:disabled + span": {
+        "--color-checkbox-bg": "var(--color-input-default-disabled-bg)",
+        "--color-checkbox-border": "var(--color-input-default-disabled-border)",
+        "--color-checkbox-fg": "var(--color-input-default-disabled-fg)"
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.disabled.border,
+        // })},
+      },
+      "&:disabled:checked + span": {
+        "--color-checkbox-bg": "var(--color-input-default-disabled-muted-bg)"
+      },
+      "&[data-read-only] + span": {
+        "--color-checkbox-bg": "var(--color-input-default-readOnly-bg)",
+        "--color-checkbox-border": "var(--color-input-default-readOnly-border)",
+        "--color-checkbox-fg": "var(--color-input-default-readOnly-fg)"
+        // box-shadow: ${focusRingBorderStyle({
+        //   width: input.border.width,
+        //   color: color.input.default.readOnly.border,
+        // })},
+      },
+      "&[data-read-only]:checked + span": {
+        "--color-checkbox-bg": "var(--color-input-default-readOnly-muted-bg)"
+      },
+      "&:indeterminate + span > svg:last-child": {
+        opacity: 1
+      }
+    }
+  }
+}, codeRules = {
+  code: {
+    "--font-weight-regular": "var(--font-code-weight-regular)",
+    "--font-weight-medium": "var(--font-code-weight-medium)",
+    "--font-weight-semibold": "var(--font-code-weight-semibold)",
+    "--font-weight-bold": "var(--font-code-weight-bold)",
+    "--font-family": "var(--font-code-family)",
+    color: "var(--color-fg)",
+    "@nest": {
+      "& > code": {
+        font: "inherit"
+      },
+      "& a": {
+        color: "var(--color-link-fg)",
+        textDecoration: "none"
+      }
+    }
+  },
+  ...responsiveRules("code-0", {
+    "--font-size": "var(--font-code-0-size)",
+    "--font-line-height": "var(--font-code-0-line-height)",
+    "--font-letter-spacing": "var(--font-code-0-letter-spacing)",
+    "--font-icon-size": "var(--font-code-0-icon-size)",
+    "--font-ascender-height": "var(--font-code-0-ascender-height)",
+    "--font-descender-height": "var(--font-code-0-descender-height)"
+  }),
+  ...responsiveRules("code-1", {
+    "--font-size": "var(--font-code-1-size)",
+    "--font-line-height": "var(--font-code-1-line-height)",
+    "--font-letter-spacing": "var(--font-code-1-letter-spacing)",
+    "--font-icon-size": "var(--font-code-1-icon-size)",
+    "--font-ascender-height": "var(--font-code-1-ascender-height)",
+    "--font-descender-height": "var(--font-code-1-descender-height)"
+  }),
+  ...responsiveRules("code-2", {
+    "--font-size": "var(--font-code-2-size)",
+    "--font-line-height": "var(--font-code-2-line-height)",
+    "--font-letter-spacing": "var(--font-code-2-letter-spacing)",
+    "--font-icon-size": "var(--font-code-2-icon-size)",
+    "--font-ascender-height": "var(--font-code-2-ascender-height)",
+    "--font-descender-height": "var(--font-code-2-descender-height)"
+  }),
+  ...responsiveRules("code-3", {
+    "--font-size": "var(--font-code-3-size)",
+    "--font-line-height": "var(--font-code-3-line-height)",
+    "--font-letter-spacing": "var(--font-code-3-letter-spacing)",
+    "--font-icon-size": "var(--font-code-3-icon-size)",
+    "--font-ascender-height": "var(--font-code-3-ascender-height)",
+    "--font-descender-height": "var(--font-code-3-descender-height)"
+  }),
+  ...responsiveRules("code-4", {
+    "--font-size": "var(--font-code-4-size)",
+    "--font-line-height": "var(--font-code-4-line-height)",
+    "--font-letter-spacing": "var(--font-code-4-letter-spacing)",
+    "--font-icon-size": "var(--font-code-4-icon-size)",
+    "--font-ascender-height": "var(--font-code-4-ascender-height)",
+    "--font-descender-height": "var(--font-code-4-descender-height)"
+  })
+}, containerRules = {
+  container: {
+    margin: "0 auto",
+    width: "100%"
+  }
+}, headingRules = {
+  heading: {
+    "--font-weight-regular": "var(--font-heading-weight-regular)",
+    "--font-weight-medium": "var(--font-heading-weight-medium)",
+    "--font-weight-semibold": "var(--font-heading-weight-semibold)",
+    "--font-weight-bold": "var(--font-heading-weight-bold)",
+    "--font-family": "var(--font-heading-family)",
+    color: "var(--color-fg)",
+    "@nest": {
+      "& a": {
+        color: "var(--color-link-fg)",
+        textDecoration: "none"
+      }
+    }
+  },
+  "heading-accent": {
+    "--fg-color": "var(--color-accent-fg)"
+  },
+  "heading-muted": {
+    "--fg-color": "var(--color-muted-fg)"
+  },
+  ...responsiveRules("heading-0", {
+    "--font-size": "var(--font-heading-0-size)",
+    "--font-line-height": "var(--font-heading-0-line-height)",
+    "--font-letter-spacing": "var(--font-heading-0-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-0-icon-size)",
+    "--font-ascender-height": "var(--font-heading-0-ascender-height)",
+    "--font-descender-height": "var(--font-heading-0-descender-height)"
+  }),
+  ...responsiveRules("heading-1", {
+    "--font-size": "var(--font-heading-1-size)",
+    "--font-line-height": "var(--font-heading-1-line-height)",
+    "--font-letter-spacing": "var(--font-heading-1-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-1-icon-size)",
+    "--font-ascender-height": "var(--font-heading-1-ascender-height)",
+    "--font-descender-height": "var(--font-heading-1-descender-height)"
+  }),
+  ...responsiveRules("heading-2", {
+    "--font-size": "var(--font-heading-2-size)",
+    "--font-line-height": "var(--font-heading-2-line-height)",
+    "--font-letter-spacing": "var(--font-heading-2-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-2-icon-size)",
+    "--font-ascender-height": "var(--font-heading-2-ascender-height)",
+    "--font-descender-height": "var(--font-heading-2-descender-height)"
+  }),
+  ...responsiveRules("heading-3", {
+    "--font-size": "var(--font-heading-3-size)",
+    "--font-line-height": "var(--font-heading-3-line-height)",
+    "--font-letter-spacing": "var(--font-heading-3-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-3-icon-size)",
+    "--font-ascender-height": "var(--font-label-3-ascender-height)",
+    "--font-descender-height": "var(--font-label-3-descender-height)"
+  }),
+  ...responsiveRules("heading-4", {
+    "--font-size": "var(--font-heading-4-size)",
+    "--font-line-height": "var(--font-heading-4-line-height)",
+    "--font-letter-spacing": "var(--font-heading-4-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-4-icon-size)",
+    "--font-ascender-height": "var(--font-heading-4-ascender-height)",
+    "--font-descender-height": "var(--font-heading-4-descender-height)"
+  }),
+  ...responsiveRules("heading-5", {
+    "--font-size": "var(--font-heading-5-size)",
+    "--font-line-height": "var(--font-heading-5-line-height)",
+    "--font-letter-spacing": "var(--font-heading-5-letter-spacing)",
+    "--font-icon-size": "var(--font-heading-5-icon-size)",
+    "--font-ascender-height": "var(--font-heading-5-ascender-height)",
+    "--font-descender-height": "var(--font-heading-5-descender-height)"
+  })
+}, kbdRules = {
+  kbd: {
+    "--card-bg-color": "var(--card-kbd-bg-color)",
+    "--card-border-color": "var(--card-kbd-border-color)",
+    "--card-fg-color": "var(--card-kbd-fg-color)",
+    boxShadow: "inset 0 0 0 1px var(--card-border-color)",
+    background: "var(--card-bg-color)",
+    font: "inherit",
+    verticalAlign: "top",
+    "@nest": {
+      "&:not([hidden])": {
+        display: "inline-block"
+      }
+    }
+  }
+}, labelRules = {
+  label: {
+    "--font-weight-regular": "var(--font-label-weight-regular)",
+    "--font-weight-medium": "var(--font-label-weight-medium)",
+    "--font-weight-semibold": "var(--font-label-weight-semibold)",
+    "--font-weight-bold": "var(--font-label-weight-bold)",
+    "--font-family": "var(--font-label-family)",
+    color: "var(--color-fg)",
+    textTransform: "uppercase",
+    "@nest": {
+      "& a": {
+        color: "var(--color-link-fg)",
+        textDecoration: "none"
+      }
+    }
+  },
+  "label-accent": {
+    "--fg-color": "var(--color-accent-fg)"
+  },
+  "label-muted": {
+    "--fg-color": "var(--color-muted-fg)"
+  },
+  ...responsiveRules("label-0", {
+    "--font-size": "var(--font-label-0-size)",
+    "--font-line-height": "var(--font-label-0-line-height)",
+    "--font-letter-spacing": "var(--font-label-0-letter-spacing)",
+    "--font-icon-size": "var(--font-label-0-icon-size)",
+    "--font-ascender-height": "var(--font-label-0-ascender-height)",
+    "--font-descender-height": "var(--font-label-0-descender-height)"
+  }),
+  ...responsiveRules("label-1", {
+    "--font-size": "var(--font-label-1-size)",
+    "--font-line-height": "var(--font-label-1-line-height)",
+    "--font-letter-spacing": "var(--font-label-1-letter-spacing)",
+    "--font-icon-size": "var(--font-label-1-icon-size)",
+    "--font-ascender-height": "var(--font-label-1-ascender-height)",
+    "--font-descender-height": "var(--font-label-1-descender-height)"
+  }),
+  ...responsiveRules("label-2", {
+    "--font-size": "var(--font-label-2-size)",
+    "--font-line-height": "var(--font-label-2-line-height)",
+    "--font-letter-spacing": "var(--font-label-2-letter-spacing)",
+    "--font-icon-size": "var(--font-label-2-icon-size)",
+    "--font-ascender-height": "var(--font-label-2-ascender-height)",
+    "--font-descender-height": "var(--font-label-2-descender-height)"
+  }),
+  ...responsiveRules("label-3", {
+    "--font-size": "var(--font-label-3-size)",
+    "--font-line-height": "var(--font-label-3-line-height)",
+    "--font-letter-spacing": "var(--font-label-3-letter-spacing)",
+    "--font-icon-size": "var(--font-label-3-icon-size)",
+    "--font-ascender-height": "var(--font-label-3-ascender-height)",
+    "--font-descender-height": "var(--font-label-3-descender-height)"
+  }),
+  ...responsiveRules("label-4", {
+    "--font-size": "var(--font-label-4-size)",
+    "--font-line-height": "var(--font-label-4-line-height)",
+    "--font-letter-spacing": "var(--font-label-4-letter-spacing)",
+    "--font-icon-size": "var(--font-label-4-icon-size)",
+    "--font-ascender-height": "var(--font-label-4-ascender-height)",
+    "--font-descender-height": "var(--font-label-4-descender-height)"
+  }),
+  ...responsiveRules("label-5", {
+    "--font-size": "var(--font-label-5-size)",
+    "--font-line-height": "var(--font-label-5-line-height)",
+    "--font-letter-spacing": "var(--font-label-5-letter-spacing)",
+    "--font-icon-size": "var(--font-label-5-icon-size)",
+    "--font-ascender-height": "var(--font-label-5-ascender-height)",
+    "--font-descender-height": "var(--font-label-5-descender-height)"
+  })
+}, popoverRules = {
+  //
+}, radioRules = {
+  //
+}, selectRules = {
+  //
+}, selectableRules = {
+  selectable: {
+    backgroundColor: "inherit",
+    color: "inherit",
+    "@nest": {
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: "inherit",
+        appearance: "none",
+        outline: "none",
+        font: "inherit",
+        textAlign: "inherit",
+        border: 0,
+        // width: '-moz-available',
+        // width: '-webkit-fill-available',
+        width: "stretch"
+      },
+      /* &:is(a) */
+      '&[data-as="a"]': {
+        textDecoration: "none"
+      }
+    }
+  }
+}, spinnerRules = {
+  spinner: {
+    "@keyframes": {
+      "spinner-rotate": {
+        from: {
+          transform: "rotate(0deg)"
+        },
+        to: {
+          transform: "rotate(360deg)"
+        }
+      }
+    },
+    "@nest": {
+      "& > span > svg": {
+        animation: "spinner-rotate 500ms linear infinite"
+      }
+    }
+  }
+}, switchRules = {
+  switch: {},
+  "switch-input": {
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    opacity: 0,
+    height: "100%",
+    width: "100%",
+    outline: "none",
+    padding: 0,
+    margin: 0,
+    /* Place the input element above the representation element */
+    zIndex: 1
+  },
+  "switch-presentation": {
+    // --switch-bg-color: ${color.input.default.enabled.border};
+    // --switch-fg-color: ${color.input.default.enabled.bg};
+    // --switch-box-shadow: none;
+    // &:not([hidden]) {
+    //   display: block;
+    // }
+    // position: relative;
+    // width: ${rem(input.switch.width)};
+    // height: ${rem(input.switch.height)};
+    // border-radius: ${rem(input.switch.height / 2)};
+    // /* Make sure it’s not possible to interact with the wrapper element */
+    // pointer-events: none;
+    // &:after {
+    //   content: '';
+    //   display: block;
+    //   position: absolute;
+    //   top: 0;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   z-index: 1;
+    //   box-shadow: var(--switch-box-shadow);
+    //   border-radius: inherit;
+    // }
+    // /* Focus styles */
+    // input:focus + && {
+    //   --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
+    // }
+    // input:focus:not(:focus-visible) + && {
+    //   --switch-box-shadow: none;
+    // }
+    // input:checked + && {
+    //   --switch-bg-color: ${color.input.default.enabled.fg};
+    //   --switch-fg-color: ${color.input.default.enabled.bg};
+    // }
+    // @media (hover: hover) {
+    //   input:not(:disabled):hover + && {
+    //     --switch-bg-color: ${color.input.default.hovered.border};
+    //     --switch-fg-color: ${color.input.default.hovered.bg};
+    //   }
+    //   input:not(:disabled):checked:hover + && {
+    //     --switch-bg-color: ${color.input.default.enabled.fg};
+    //     --switch-fg-color: ${color.input.default.enabled.bg};
+    //   }
+    // }
+    // input:not([data-read-only]):disabled + && {
+    //   --switch-bg-color: ${color.input.default.disabled.border};
+    //   --switch-fg-color: ${color.input.default.disabled.bg};
+    // }
+    // input[data-read-only]:disabled + && {
+    //   --switch-bg-color: ${color.input.default.readOnly.border};
+    //   --switch-fg-color: ${color.input.default.readOnly.bg};
+    // }
+    // input:checked[data-read-only]:disabled + && {
+    //   --switch-bg-color: ${color.input.default.readOnly.fg};
+    //   --switch-fg-color: ${color.input.default.readOnly.bg};
+    // }
+  },
+  "switch-track": {
+    // &:not([hidden]) {
+    //   display: block;
+    // }
+    // background-color: var(--switch-bg-color);
+    // position: absolute;
+    // left: 0;
+    // top: 0;
+    // width: ${rem(input.switch.width)};
+    // height: ${rem(input.switch.height)};
+    // border-radius: ${rem(input.switch.height / 2)};
+  },
+  "switch-thumb": {
+    // const {$indeterminate} = props
+    // const {input} = getTheme_v2(props.theme)
+    // const trackWidth = input.switch.width
+    // const trackHeight = input.switch.height
+    // const trackPadding = input.switch.padding
+    // const size = trackHeight - input.switch.padding * 2
+    // const checkedOffset = trackWidth - trackPadding * 2 - size
+    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+    // const checked = $indeterminate !== true && props.$checked === true
+    // return css`
+    //   &:not([hidden]) {
+    //     display: block;
+    //   }
+    //   position: absolute;
+    //   left: ${rem(trackPadding)};
+    //   top: ${rem(trackPadding)};
+    //   height: ${rem(size)};
+    //   width: ${rem(size)};
+    //   border-radius: ${rem(size / 2)};
+    //   transition-property: transform;
+    //   transition-duration: ${input.switch.transitionDurationMs}ms;
+    //   transition-timing-function: ${input.switch.transitionTimingFunction};
+    //   background: var(--switch-fg-color);
+    //   transform: translate3d(0, 0, 0);
+    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+    //   ${checked &&
+    //   css`
+    //     transform: translate3d(${checkedOffset}px, 0, 0);
+    //   `}
+    //   ${$indeterminate &&
+    //   css`
+    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
+    //   `}
+    // `
+  }
+}, textRules = {
+  text: {
+    "--font-weight-regular": "var(--font-text-weight-regular)",
+    "--font-weight-medium": "var(--font-text-weight-medium)",
+    "--font-weight-semibold": "var(--font-text-weight-semibold)",
+    "--font-weight-bold": "var(--font-text-weight-bold)",
+    "--font-family": "var(--font-text-family)",
+    color: "var(--color-fg)",
+    "@nest": {
+      "& a": {
+        color: "var(--color-link-fg)",
+        textDecoration: "none"
+      }
+    }
+  },
+  "text-accent": {
+    "--fg-color": "var(--color-accent-fg)"
+  },
+  "text-muted": {
+    "--fg-color": "var(--color-muted-fg)"
+  },
+  ...responsiveRules("text-0", {
+    "--font-size": "var(--font-text-0-size)",
+    "--font-line-height": "var(--font-text-0-line-height)",
+    "--font-letter-spacing": "var(--font-text-0-letter-spacing)",
+    "--font-icon-size": "var(--font-text-0-icon-size)",
+    "--font-ascender-height": "var(--font-text-0-ascender-height)",
+    "--font-descender-height": "var(--font-text-0-descender-height)"
+  }),
+  ...responsiveRules("text-1", {
+    "--font-size": "var(--font-text-1-size)",
+    "--font-line-height": "var(--font-text-1-line-height)",
+    "--font-letter-spacing": "var(--font-text-1-letter-spacing)",
+    "--font-icon-size": "var(--font-text-1-icon-size)",
+    "--font-ascender-height": "var(--font-text-1-ascender-height)",
+    "--font-descender-height": "var(--font-text-1-descender-height)"
+  }),
+  ...responsiveRules("text-2", {
+    "--font-size": "var(--font-text-2-size)",
+    "--font-line-height": "var(--font-text-2-line-height)",
+    "--font-letter-spacing": "var(--font-text-2-letter-spacing)",
+    "--font-icon-size": "var(--font-text-2-icon-size)",
+    "--font-ascender-height": "var(--font-text-2-ascender-height)",
+    "--font-descender-height": "var(--font-text-2-descender-height)"
+  }),
+  ...responsiveRules("text-3", {
+    "--font-size": "var(--font-text-3-size)",
+    "--font-line-height": "var(--font-text-3-line-height)",
+    "--font-letter-spacing": "var(--font-text-3-letter-spacing)",
+    "--font-icon-size": "var(--font-text-3-icon-size)",
+    "--font-ascender-height": "var(--font-text-3-ascender-height)",
+    "--font-descender-height": "var(--font-text-3-descender-height)"
+  }),
+  ...responsiveRules("text-4", {
+    "--font-size": "var(--font-text-4-size)",
+    "--font-line-height": "var(--font-text-4-line-height)",
+    "--font-letter-spacing": "var(--font-text-4-letter-spacing)",
+    "--font-icon-size": "var(--font-text-4-icon-size)",
+    "--font-ascender-height": "var(--font-text-4-ascender-height)",
+    "--font-descender-height": "var(--font-text-4-descender-height)"
+  })
+}, textAreaRules = {
+  //
+}, textInputRules = {
+  "text-input": {
+    //
+  },
+  "text-input-wrapper": {
+    "@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}; */
+          //   }
+          // }
+        }
+      }
+    }
+  },
+  "text-input-prefix": {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    "@nest": {
+      "& > span": {
+        display: "block",
+        margin: "-1px"
+      }
+    }
+  },
+  "text-input-suffix": {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    "@nest": {
+      "& > span": {
+        display: "block",
+        margin: "-1px"
+      }
+    }
+  },
+  "text-input-presentation": {
+    "--input-box-shadow": "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "block",
+    pointerEvents: "none",
+    zIndex: 0,
+    backgroundColor: "var(--card-bg-color)",
+    boxShadow: "var(--input-box-shadow)"
+    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
+    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
+    //   --card-bg-color: ${color.input.default.enabled.bg};
+    //   --card-fg-color: ${color.input.default.enabled.fg};
+    //   /* enabled */
+    //   *:not(:disabled) + &[data-border] {
+    //     --input-box-shadow: ${focusRingBorderStyle({
+    //       color: color.input.default.enabled.border,
+    //       width: input.border.width,
+    //     })};
+    //   }
+    //   /* invalid */
+    //   *:not(:disabled):invalid + & {
+    //     --card-bg-color: ${color.input.invalid.enabled.bg};
+    //     --card-fg-color: ${color.input.invalid.enabled.fg};
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.enabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    //   /* focused */
+    //   *:not(:disabled):focus + & {
+    //     &[data-border] {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({
+    //             border: {color: color.input.default.enabled.border, width: input.border.width},
+    //             focusRing: input.text.focusRing,
+    //           })};
+    //     }
+    //     &:not([data-border]) {
+    //       --input-box-shadow: ${$unstableDisableFocusRing
+    //         ? undefined
+    //         : focusRingStyle({focusRing: input.text.focusRing})};
+    //     }
+    //   }
+    //   /* disabled */
+    //   *:not(:invalid):disabled + & {
+    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    //   *:invalid:disabled + & {
+    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
+    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
+    //     &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.disabled.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    //   /* readOnly */
+    //   *:not(:invalid):read-only + & {
+    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
+    //   }
+    //   *:invalid:read-only + & {
+    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
+    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
+    //   }
+    //   /* hovered */
+    //   @media (hover: hover) {
+    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
+    //       --card-bg-color: ${color.input.default.hovered.bg};
+    //       --card-fg-color: ${color.input.default.hovered.fg};
+    //     }
+    //     *:invalid:not(:disabled):not(:read-only):hover + & {
+    //       --card-bg-color: ${color.input.invalid.hovered.bg};
+    //       --card-fg-color: ${color.input.invalid.hovered.fg};
+    //     }
+    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.default.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
+    //       --input-box-shadow: ${focusRingBorderStyle({
+    //         color: color.input.invalid.hovered.border,
+    //         width: input.border.width,
+    //       })};
+    //     }
+    //   }
+    // }
+  }
+}, 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 }
+    }
+  }
+}, tooltipRules = {
+  tooltip: {
+    pointerEvents: "none"
+  },
+  "tooltip-card": {
+    "@nest": {
+      "&[data-animate] > *": {
+        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        opacity: "var(--motion-content-opacity, 1)",
+        willChange: "opacity"
+      }
+    }
+  }
+}, borderRules = {
+  ...responsiveRules("border", {
+    border: "1px solid var(--card-border-color)"
+  }),
+  ...responsiveRules("border-t", {
+    borderTop: "1px solid var(--card-border-color)"
+  }),
+  ...responsiveRules("border-r", {
+    borderRight: "1px solid var(--card-border-color)"
+  }),
+  ...responsiveRules("border-b", {
+    borderBottom: "1px solid var(--card-border-color)"
+  }),
+  ...responsiveRules("border-l", {
+    borderLeft: "1px solid var(--card-border-color)"
+  })
+}, displayRules = {
+  ...responsiveRules("block", {
+    "@nest": {
+      "&:not([hidden])": {
+        display: "block"
+      }
+    }
+  }),
+  ...responsiveRules("inline-block", {
+    "@nest": {
+      "&:not([hidden])": {
+        display: "inline-block"
+      }
+    }
+  }),
+  ...responsiveRules("flex", {
+    "@nest": {
+      "&:not([hidden])": {
+        display: "flex"
+      }
+    }
+  }),
+  ...responsiveRules("inline-flex", {
+    "@nest": {
+      "&:not([hidden])": {
+        display: "inline-flex"
+      }
+    }
+  }),
+  ...responsiveRules("grid", {
+    gridTemplateRows: "auto",
+    "@nest": {
+      "&:not([hidden])": {
+        display: "grid"
+      }
+    }
+  }),
+  ...responsiveRules("grid-flex", {
+    gridTemplateRows: "auto",
+    "@nest": {
+      "&:not([hidden])": {
+        display: "grid-flex"
+      }
+    }
+  }),
+  ...responsiveRules("none", {
+    "@nest": {
+      "&:not([hidden])": {
+        display: "none"
+      }
+    }
+  })
+}, flexRules = {
+  // direction
+  ...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" }),
+  // 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" }),
+  // wrap
+  ...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 })
+}, fontRules = {
+  font: {
+    position: "relative",
+    fontFamily: "var(--font-family)",
+    fontSize: "var(--font-size)",
+    lineHeight: "var(--font-line-height)",
+    letterSpacing: "var(--font-letter-spacing)",
+    fontWeight: "var(--font-weight)",
+    transform: "translateY(var(--font-descender-height))",
+    padding: "1px 0",
+    margin: "0",
+    "--font-cap-height": "calc(var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height))",
+    "--font-icon-offset": "calc((var(--font-cap-height) - var(--font-icon-size)) / 2)",
+    "--font-weight": "var(--font-weight-regular)",
+    "@nest": {
+      "&:before": {
+        content: '""',
+        display: "block",
+        height: 0,
+        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
+      },
+      "&:after": {
+        content: '""',
+        display: "block",
+        height: 0,
+        marginBottom: "-1px"
+      },
+      "& svg": {
+        // Certain popular CSS libraries changes the defaults for SVG display
+        // Make sure SVGs are rendered as inline elements
+        display: "inline"
+      },
+      // todo
+      // '& svg:not([data-sanity-icon])': {
+      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
+      //   margin: 'var(--custom-icon-offset)',
+      // },
+      "& [data-sanity-icon]": {
+        fontSize: "var(--font-icon-size)",
+        margin: "var(--font-icon-offset)",
+        vectorEffect: "non-scaling-stroke"
+      }
+    }
+  },
+  "font-regular": {
+    "--font-weight": "var(--font-weight-regular)"
+  },
+  "font-medium": {
+    "--font-weight": "var(--font-weight-medium)"
+  },
+  "font-semibold": {
+    "--font-weight": "var(--font-weight-semibold)"
+  },
+  "font-bold": {
+    "--font-weight": "var(--font-weight-bold)"
+  }
+}, gapRules = {
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`g-${space}`, {
+      gap: space === 0.5 ? "calc(var(--space-1) / 2)" : vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`gx-${space}`, {
+      columnGap: space === 0.5 ? "calc(var(--space-1) / 2)" : vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`gy-${space}`, {
+      rowGap: space === 0.5 ? "calc(var(--space-1) / 2)" : 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" }),
+  // 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" }),
+  // 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'}),
+  // 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)" })
+}, 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" }),
+  // 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" }),
+  // 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" }),
+  // 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" }),
+  // 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" }),
+  // 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]
+  })
+}), {}), marginYRules = SPACE.reduce((acc, space) => ({
+  ...acc,
+  ...responsiveRules(`my-${space}`, {
+    marginTop: vars.space[space],
+    marginBottom: vars.space[space]
+  })
+}), {}), 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 = {
+  ...responsiveRules("max-w-0", {
+    maxWidth: "var(--container-0)"
+  }),
+  ...responsiveRules("max-w-1", {
+    maxWidth: "var(--container-1)"
+  }),
+  ...responsiveRules("max-w-2", {
+    maxWidth: "var(--container-2)"
+  }),
+  ...responsiveRules("max-w-3", {
+    maxWidth: "var(--container-3)"
+  }),
+  ...responsiveRules("max-w-4", {
+    maxWidth: "var(--container-4)"
+  }),
+  ...responsiveRules("max-w-5", {
+    maxWidth: "var(--container-5)"
+  }),
+  ...responsiveRules("max-w-auto", {
+    maxWidth: "none"
+  }),
+  ...responsiveRules("max-w-fill", {
+    maxWidth: "100%"
+  })
+}, 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]
+  })
+}), {}), 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 = {
+  "pointer-events-none": {
+    pointerEvents: "none"
+  },
+  "pointer-events-auto": {
+    pointerEvents: "auto"
+  }
+}, positionRules = {
+  ...responsiveRules("pos-absolute", {
+    position: "absolute"
+  }),
+  ...responsiveRules("pos-fixed", {
+    position: "fixed"
+  }),
+  ...responsiveRules("pos-relative", {
+    position: "relative"
+  }),
+  ...responsiveRules("pos-static", {
+    position: "static"
+  }),
+  ...responsiveRules("pos-sticky", {
+    position: "sticky"
+  }),
+  ...responsiveRules("inset-0", {
+    top: 0,
+    left: 0,
+    right: 0,
+    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" })
+}, 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(", ")
+  }),
+  ...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(", ")
+  }),
+  ...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(", ")
+  }),
+  ...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(", ")
+  }),
+  ...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(", ")
+  })
+}, widthRules = {
+  "w-fill": {
+    width: ["-moz-available", "-webkit-fill-available", "stretch"]
+  }
+}, rules = {
+  // styless
+  ...displayRules,
+  ...flexRules,
+  ...flexItemRules,
+  ...gridItemRules,
+  ...borderRules,
+  ...paddingRules,
+  ...paddingXRules,
+  ...paddingYRules,
+  ...paddingTopRules,
+  ...paddingRightRules,
+  ...paddingBottomRules,
+  ...paddingLeftRules,
+  ...pointerEventsRules,
+  ...marginRules,
+  ...marginXRules,
+  ...marginYRules,
+  ...marginTopRules,
+  ...marginRightRules,
+  ...marginBottomRules,
+  ...marginLeftRules,
+  ...fontRules,
+  ...gapRules,
+  ...gridRules,
+  ...heightRules,
+  ...overflowRules,
+  ...positionRules,
+  ...radiusRules,
+  ...shadowRules,
+  ...widthRules,
+  // primitives
+  ...avatarRules,
+  ...badgeRules,
+  ...boxRules,
+  ...buttonRules,
+  ...cardRules,
+  ...checkboxRules,
+  ...codeRules,
+  ...containerRules,
+  ...headingRules,
+  ...kbdRules,
+  ...labelRules,
+  ...maxWidthRules,
+  ...popoverRules,
+  ...radioRules,
+  ...selectRules,
+  ...selectableRules,
+  ...spinnerRules,
+  ...switchRules,
+  ...textRules,
+  ...textAreaRules,
+  ...textInputRules,
+  ...tokenRules,
+  ...tooltipRules,
+  // components
+  ...breadcrumbsRules,
+  ...dialogRules
+};
+function compileRule(selector, props) {
+  return compileProperties(selector, props) + compileNestedRules(selector, props["@nest"]);
+}
+function compileProperties(selector, props) {
+  let css = "{";
+  for (const key in props) {
+    if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
+    const value = props[key], valueArr = Array.isArray(value) ? value : [value];
+    for (const v of valueArr)
+      css += toSnakeCase(key) + ":" + v + ";";
+  }
+  return css.length === 1 ? "" : selector + css + "}";
+}
+function compileNestedRules(selector, props) {
+  if (!props) return "";
+  let css = "";
+  for (const key in props) {
+    const value = props[key];
+    css += `
+` + key.replace(/&/g, selector) + compileProperties(selector, value).substring(selector.length);
+  }
+  return css;
+}
+function compileMediaQueryRule(query, rules2) {
+  let css = `@media ${query}{`;
+  for (const key in rules2)
+    css += `
+  ` + compileRule(`.${key}`.replace(/:/g, "\\:"), rules2[key]);
+  return css + `
+}`;
+}
+function toSnakeCase(value) {
+  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+}
+function compileRules(rules2) {
+  let css = "";
+  const keyframes = {}, mediaQueries = {};
+  for (const [className, props] of Object.entries(rules2)) {
+    const selectorCss = compileRule(`.${className}`.replace(/:/g, "\\:"), props);
+    if (css += selectorCss ? `${selectorCss}
+` : "", props["@keyframes"])
+      for (const name in props["@keyframes"])
+        keyframes[name] = props["@keyframes"][name];
+    if (props["@media"])
+      for (const key in props["@media"])
+        mediaQueries[key] || (mediaQueries[key] = {}), mediaQueries[key][className] = props["@media"][key];
+  }
+  for (const [name, value] of Object.entries(keyframes)) {
+    let keyframesCss = `@keyframes ${name} {
+`;
+    for (const [key, props] of Object.entries(value))
+      keyframesCss += `  ${key} {
+`, keyframesCss += compileRule("", props).replace(/\n/g, `
+    `) + `
+`, keyframesCss += `  }
+`;
+    keyframesCss += `}
+`, css += keyframesCss;
+  }
+  for (const [query, queryRules] of Object.entries(mediaQueries))
+    css += compileMediaQueryRule(query, queryRules) + `
+`;
+  return css.replace(/\n{2,}/g, `
+`).trimStart();
+}
+function compileSystem() {
+  return compileRules(rules);
+}
+function rem(value) {
+  return value === 0 ? "0" : `${value / 16}rem`;
+}
+function px(value) {
+  return value === 0 ? "0" : `${value}px`;
+}
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
+}
+function countThemeEntries(obj) {
+  let count = 0;
+  if (isArray(obj))
+    for (let i = 0; i < obj.length; i++) {
+      const value = obj[i];
+      isRecord(value) || isArray(value) ? count += countThemeEntries(value) : count++;
+    }
+  else
+    for (const [key, value] of Object.entries(obj))
+      key.startsWith("_") || (isRecord(value) || isArray(value) ? count += countThemeEntries(value) : count++);
+  return count;
+}
+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(`
+
+`);
+}
+function compileCardCss(props) {
+  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) => ({
+      ...acc,
+      [`--color-avatar-${color}-bg`]: cardVars.avatar[color].bg,
+      [`--color-avatar-${color}-fg`]: cardVars.avatar[color].fg
+    }), {}),
+    "--color-backdrop": cardVars.backdrop,
+    ...THEME_COLOR_STATE_TONES.reduce((acc, tone2) => ({
+      ...acc,
+      [`--color-badge-${tone2}-bg`]: cardVars.badge[tone2].bg,
+      [`--color-badge-${tone2}-dot`]: cardVars.badge[tone2].dot,
+      [`--color-badge-${tone2}-fg`]: cardVars.badge[tone2].fg,
+      [`--color-badge-${tone2}-icon`]: cardVars.badge[tone2].icon
+    }), {}),
+    "--color-bg": cardVars.bg,
+    "--color-border": cardVars.border,
+    // todo: button
+    "--color-code-bg": cardVars.code.bg,
+    "--color-code-fg": cardVars.code.fg,
+    "--color-fg": cardVars.fg,
+    "--color-focus-ring": cardVars.focusRing,
+    "--color-icon": cardVars.icon,
+    "--color-input-default-enabled-bg": cardVars.input.default.enabled.bg,
+    "--color-input-default-enabled-border": cardVars.input.default.enabled.border,
+    "--color-input-default-enabled-fg": cardVars.input.default.enabled.fg,
+    "--color-input-default-enabled-muted-bg": cardVars.input.default.enabled.muted.bg,
+    "--color-input-default-enabled-placeholder": cardVars.input.default.enabled.placeholder,
+    "--color-input-default-hovered-bg": cardVars.input.default.hovered.bg,
+    "--color-input-default-hovered-border": cardVars.input.default.hovered.border,
+    "--color-input-default-hovered-fg": cardVars.input.default.hovered.fg,
+    "--color-input-default-hovered-muted-bg": cardVars.input.default.hovered.muted.bg,
+    "--color-input-default-hovered-placeholder": cardVars.input.default.hovered.placeholder,
+    "--color-input-default-readOnly-bg": cardVars.input.default.readOnly.bg,
+    "--color-input-default-readOnly-border": cardVars.input.default.readOnly.border,
+    "--color-input-default-readOnly-fg": cardVars.input.default.readOnly.fg,
+    "--color-input-default-readOnly-muted-bg": cardVars.input.default.readOnly.muted.bg,
+    "--color-input-default-readOnly-placeholder": cardVars.input.default.readOnly.placeholder,
+    "--color-input-default-disabled-bg": cardVars.input.default.disabled.bg,
+    "--color-input-default-disabled-border": cardVars.input.default.disabled.border,
+    "--color-input-default-disabled-fg": cardVars.input.default.disabled.fg,
+    "--color-input-default-disabled-muted-bg": cardVars.input.default.disabled.muted.bg,
+    "--color-input-default-disabled-placeholder": cardVars.input.default.disabled.placeholder,
+    "--color-input-invalid-enabled-bg": cardVars.input.invalid.enabled.bg,
+    "--color-input-invalid-enabled-border": cardVars.input.invalid.enabled.border,
+    "--color-input-invalid-enabled-fg": cardVars.input.invalid.enabled.fg,
+    "--color-input-invalid-enabled-muted-bg": cardVars.input.invalid.enabled.muted.bg,
+    "--color-input-invalid-enabled-placeholder": cardVars.input.invalid.enabled.placeholder,
+    "--color-input-invalid-hovered-bg": cardVars.input.invalid.hovered.bg,
+    "--color-input-invalid-hovered-border": cardVars.input.invalid.hovered.border,
+    "--color-input-invalid-hovered-fg": cardVars.input.invalid.hovered.fg,
+    "--color-input-invalid-hovered-muted-bg": cardVars.input.invalid.hovered.muted.bg,
+    "--color-input-invalid-hovered-placeholder": cardVars.input.invalid.hovered.placeholder,
+    "--color-input-invalid-readOnly-bg": cardVars.input.invalid.readOnly.bg,
+    "--color-input-invalid-readOnly-border": cardVars.input.invalid.readOnly.border,
+    "--color-input-invalid-readOnly-fg": cardVars.input.invalid.readOnly.fg,
+    "--color-input-invalid-readOnly-muted-bg": cardVars.input.invalid.readOnly.muted.bg,
+    "--color-input-invalid-readOnly-placeholder": cardVars.input.invalid.readOnly.placeholder,
+    "--color-input-invalid-disabled-bg": cardVars.input.invalid.disabled.bg,
+    "--color-input-invalid-disabled-border": cardVars.input.invalid.disabled.border,
+    "--color-input-invalid-disabled-fg": cardVars.input.invalid.disabled.fg,
+    "--color-input-invalid-disabled-muted-bg": cardVars.input.invalid.disabled.muted.bg,
+    "--color-input-invalid-disabled-placeholder": cardVars.input.invalid.disabled.placeholder,
+    "--color-kbd-bg": cardVars.kbd.bg,
+    "--color-kbd-border": cardVars.kbd.border,
+    "--color-kbd-fg": cardVars.kbd.fg,
+    "--color-link-fg": cardVars.link.fg,
+    "--color-muted-bg": cardVars.muted.bg,
+    "--color-muted-fg": cardVars.muted.fg,
+    // todo: selectable
+    "--color-shadow-outline": cardVars.shadow.outline,
+    "--color-shadow-umbra": cardVars.shadow.umbra,
+    "--color-shadow-penumbra": cardVars.shadow.penumbra,
+    "--color-shadow-ambient": cardVars.shadow.outline,
+    "--color-skeleton-from": cardVars.skeleton.from,
+    "--color-skeleton-to": cardVars.skeleton.to,
+    // todo: syntax
+    "--color-syntax-atrule": cardVars.syntax.atrule,
+    "--color-syntax-attrName": cardVars.syntax.attrName,
+    "--color-syntax-attrValue": cardVars.syntax.attrValue,
+    "--color-syntax-attribute": cardVars.syntax.attribute,
+    "--color-syntax-boolean": cardVars.syntax.boolean,
+    "--color-syntax-builtin": cardVars.syntax.builtin,
+    "--color-syntax-cdata": cardVars.syntax.cdata,
+    "--color-syntax-char": cardVars.syntax.char,
+    "--color-syntax-class": cardVars.syntax.class,
+    "--color-syntax-className": cardVars.syntax.className,
+    "--color-syntax-comment": cardVars.syntax.comment,
+    "--color-syntax-constant": cardVars.syntax.constant,
+    "--color-syntax-deleted": cardVars.syntax.deleted,
+    "--color-syntax-doctype": cardVars.syntax.doctype,
+    "--color-syntax-entity": cardVars.syntax.entity,
+    "--color-syntax-function": cardVars.syntax.function,
+    "--color-syntax-hexcode": cardVars.syntax.hexcode,
+    "--color-syntax-id": cardVars.syntax.id,
+    "--color-syntax-important": cardVars.syntax.important,
+    "--color-syntax-inserted": cardVars.syntax.inserted,
+    "--color-syntax-keyword": cardVars.syntax.keyword,
+    "--color-syntax-number": cardVars.syntax.number,
+    "--color-syntax-operator": cardVars.syntax.operator,
+    "--color-syntax-prolog": cardVars.syntax.prolog,
+    "--color-syntax-property": cardVars.syntax.property,
+    "--color-syntax-pseudoClass": cardVars.syntax.pseudoClass,
+    "--color-syntax-pseudoElement": cardVars.syntax.pseudoElement,
+    "--color-syntax-punctuation": cardVars.syntax.punctuation,
+    "--color-syntax-regex": cardVars.syntax.regex,
+    "--color-syntax-selector": cardVars.syntax.selector,
+    "--color-syntax-string": cardVars.syntax.string,
+    "--color-syntax-symbol": cardVars.syntax.symbol,
+    "--color-syntax-tag": cardVars.syntax.tag,
+    "--color-syntax-unit": cardVars.syntax.unit,
+    "--color-syntax-url": cardVars.syntax.url,
+    "--color-syntax-variable": cardVars.syntax.variable
+  });
+}
+function getThemeEntries(obj, path = []) {
+  const entries = [];
+  if (isArray(obj))
+    for (let i = 0; i < obj.length; i++) {
+      const key = String(i), value = obj[i];
+      isRecord(value) || isArray(value) ? entries.push(...getThemeEntries(value, [...path, key])) : entries.push([`--${path.concat(key).join("-")}`, value]);
+    }
+  else
+    for (const [key, value] of Object.entries(obj))
+      key.startsWith("_") || key !== "button" && key !== "selectable" && (isRecord(value) || isArray(value) ? entries.push(...getThemeEntries(value, [...path, key])) : entries.push([`--${path.concat(key).join("-")}`, value]));
+  return entries;
+}
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function composeClassNames(...classNames) {
+  return classNames.filter(Boolean).join(" ");
+}
+function breadcrumbs() {
+  return composeClassNames("breadcrumbs");
+}
+function dialog() {
+  return composeClassNames("dialog");
+}
+function dialogContainer() {
+  return composeClassNames("dialog-container");
+}
+function dialogCardRoot() {
+  return composeClassNames("dialog-card-root");
+}
+function dialogLayout() {
+  return composeClassNames("dialog-layout");
+}
+function dialogHeader() {
+  return composeClassNames("dialog-header");
+}
+function dialogContent() {
+  return composeClassNames("dialog-content");
+}
+function dialogFooter() {
+  return composeClassNames("dialog-footer");
+}
+function treeItem() {
+  return composeClassNames("tree-item");
+}
+function _resp(prefix, prop) {
+  if (prop !== void 0)
+    return Array.isArray(prop) ? prop.map((value, index) => {
+      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+      return index === 0 ? `${className}` : `_${index}:${className}`;
+    }).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
+}
+function avatar(props) {
+  return composeClassNames(
+    "avatar",
+    `avatar-${props.color}`,
+    `avatar-arrow-${props.arrowPosition}`,
+    _resp("avatar", props.size)
+  );
+}
+function avatarArrow() {
+  return composeClassNames("avatar-arrow");
+}
+function avatarInitials() {
+  return composeClassNames("avatar-initials");
+}
+function avatarBgStroke() {
+  return composeClassNames("avatar-bg-stroke");
+}
+function avatarStroke() {
+  return composeClassNames("avatar-stroke");
+}
+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));
+}
+const prefixes$2 = {
+  align: "align",
+  // `flex-align`
+  direction: void 0,
+  // `
+  justify: "justify",
+  // `flex-justify`
+  wrap: "wrap"
+  // `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)
+  );
+}
+function flexItem(props) {
+  return composeClassNames(_resp("flex", props.flex));
+}
+function gap(props) {
+  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
+}
+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)
+  );
+}
+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)
+  );
+}
+function maxWidth(props) {
+  return _resp("max-w", props.maxWidth) ?? "";
+}
+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)
+  );
+}
+function pointerEvents(props) {
+  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
+}
+function position(props) {
+  return composeClassNames(_resp("pos", props.position), _resp("inset", props.inset));
+}
+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)
+  );
+}
+function button(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";
+}
+const prefixes$1 = {
+  border: "border",
+  borderTop: "border-t",
+  borderRight: "border-r",
+  borderBottom: "border-b",
+  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)
+  );
+}
+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}`
+  );
+}
+function checkbox() {
+  return composeClassNames("checkbox");
+}
+function checkboxInput() {
+  return composeClassNames("checkbox-input");
+}
+const prefixes = {
+  weight: "font"
+};
+function font(props) {
+  return composeClassNames("font", _resp(prefixes.weight, props.weight));
+}
+function code(props) {
+  return composeClassNames("code", "block", font(props), _resp("code", props.size));
+}
+function container(props) {
+  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)
+  );
+}
+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)
+  );
+}
+function popover() {
+  return composeClassNames("popover");
+}
+function radio() {
+  return composeClassNames("radio");
+}
+function select() {
+  return composeClassNames("select");
+}
+function selectable(props) {
+  const { tone = "default" } = props;
+  return composeClassNames("selectable", `selectable-tone-${tone}`, radius(props));
+}
+function spinner() {
+  return composeClassNames("spinner");
+}
+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)
+  );
+}
+function textArea() {
+  return composeClassNames("text-area");
+}
+function textInput(props) {
+  return composeClassNames("text-input", _resp("text-input", props.size));
+}
+function tooltip() {
+  return composeClassNames("tooltip");
+}
+function tooltipCard() {
+  return composeClassNames("tooltip-card");
+}
+export {
+  _switch,
+  avatar,
+  avatarArrow,
+  avatarBgStroke,
+  avatarImage,
+  avatarInitials,
+  avatarStroke,
+  badge,
+  box,
+  breadcrumbs,
+  button,
+  buttonLoadingBox,
+  card,
+  checkbox,
+  checkboxInput,
+  code,
+  compileSystem,
+  compileTheme,
+  composeClassNames,
+  container,
+  dialog,
+  dialogCardRoot,
+  dialogContainer,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+  heading,
+  kbd,
+  label,
+  popover,
+  radio,
+  select,
+  selectable,
+  spinner,
+  text,
+  textArea,
+  textInput,
+  tooltip,
+  tooltipCard,
+  treeItem
+};
+//# sourceMappingURL=css.esm.js.map