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

package/dist/css.esm.js

@@ -0,0 +1,3794 @@
+import { FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE, THEME_COLOR_AVATAR_COLORS, SPACE, THEME_COLOR_CARD_TONES, THEME_COLOR_STATE_TONES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES, THEME_COLOR_BUTTON_MODES } from "@sanity/ui/theme";
+const breadcrumbsRules = {
+  breadcrumbs: {
+    lineHeight: 0
+  }
+}, 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
+  }
+}, menuRules = {
+  "menu-divider": {
+    height: "1px",
+    border: 0,
+    backgroundColor: "var(--card-border-color)",
+    margin: 0
+  }
+};
+function responsiveRules(className, props) {
+  return {
+    [className]: props,
+    [`_1:${className}`]: {
+      "@media": {
+        "screen and (min-width: 360px)": props
+      }
+    },
+    [`_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 skeletonRules = {
+  skeleton: {
+    backgroundColor: "var(--card-skeleton-from-color)",
+    backgroundPosition: "100%",
+    backgroundSize: "200% 100%",
+    backgroundAttachment: "fixed",
+    opacity: 0,
+    transition: "opacity 200ms ease-in",
+    "@keyframes": {
+      "skeleton-pulse": {
+        "0%": {
+          backgroundPosition: "100%"
+        },
+        "100%": {
+          backgroundPosition: "-100%"
+        }
+      }
+    },
+    "@nest": {
+      "&[data-animated]": {
+        backgroundImage: `linear-gradient(
+          to right,
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-to-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color),
+          var(--card-skeleton-from-color)
+        )`,
+        animationName: "skeleton-pulse",
+        animationTimingFunction: "ease-in-out",
+        animationIterationCount: "infinite",
+        animationDuration: "2000ms"
+      },
+      "&[data-visible]": {
+        opacity: 1
+      }
+    },
+    "@media": {
+      "screen and (prefers-reduced-motion: no-preference)": {
+        backgroundColor: "var(--card-skeleton-from-color)"
+      }
+    }
+  },
+  "font-skeleton": {
+    height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
+  },
+  // ...responsiveRules('text-skeleton-0', {
+  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
+  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
+  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
+  // }),
+  ...FONT_CODE_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`code-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-code-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-code-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-code-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_HEADING_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`heading-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-heading-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-heading-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-heading-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_LABEL_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`label-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-label-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-label-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-label-${size}-descender-height)`
+    })
+  }), {}),
+  ...FONT_TEXT_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`text-skeleton-${size}`, {
+      "--font-skeleton-line-height": `var(--font-text-${size}-line-height)`,
+      "--font-skeleton-ascender-height": `var(--font-text-${size}-ascender-height)`,
+      "--font-skeleton-descender-height": `var(--font-text-${size}-descender-height)`
+    })
+  }), {})
+}, avatarRules = {
+  avatar: {
+    backgroundColor: "var(--avatar-bg-color)",
+    position: "relative",
+    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-${String(space).replace(".", "_")}`]))
+};
+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)"
+    }
+  },
+  font: {
+    code: {
+      family: "var(--font-code-family)",
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    heading: {
+      family: "var(--font-heading-family)",
+      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    label: {
+      family: "var(--font-label-family)",
+      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    },
+    text: {
+      family: "var(--font-text-family)",
+      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
+        ...acc,
+        [size]: {
+          fontSize: `var(--font-code-${size}-size)`,
+          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
+          descenderHeight: `var(--font-code-${size}-descender-height)`,
+          lineHeight: `var(--font-code-${size}-line-height)`,
+          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
+          iconSize: `var(--font-code-${size}-icon-size)`
+        }
+      }), {})
+    }
+  },
+  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
+};
+function buildColorCardVars(props) {
+  const {
+    scheme,
+    tone
+  } = props, prefix = `--color-${scheme}-${tone}`;
+  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-bg2-color": "var(--color-muted-bg)",
+    "--card-link-color": "var(--color-link-fg)",
+    "--card-hairline-soft-color": "var(--color-border)",
+    "--card-hairline-hard-color": "var(--color-border)",
+    "@nest": {
+      "&[data-checkered]": {
+        "--card-bg-image": "repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%)",
+        backgroundSize: "var(--space-3) var(--space-3)",
+        backgroundPosition: "50% 50%",
+        backgroundImage: "var(--card-bg-image)"
+      },
+      '&[data-as="button"]': {
+        WebkitFontSmoothing: "inherit",
+        appearance: "none",
+        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: {},
+  "animated-spinner-icon": {
+    animation: "spinner-rotate 500ms linear infinite",
+    "@keyframes": {
+      "spinner-rotate": {
+        from: {
+          transform: "rotate(0deg)"
+        },
+        to: {
+          transform: "rotate(360deg)"
+        }
+      }
+    }
+  }
+}, 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": {
+    "--font-family": vars.font.text.family
+  },
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`text-input-p-${space}`.replace(".", "_"), {
+      "--padding-top": `calc(${vars.space[space]} - var(--font-ascender-height))`,
+      "--padding-right": vars.space[space],
+      "--padding-bottom": `calc(${vars.space[space]} - var(--font-descender-height))`,
+      "--padding-left": vars.space[space]
+    })
+  }), {}),
+  ...FONT_TEXT_SIZE.reduce((acc, size) => ({
+    ...acc,
+    ...responsiveRules(`text-input-${size}`, {
+      "--font-size": vars.font.text.sizes[size].fontSize,
+      "--font-line-height": vars.font.text.sizes[size].lineHeight,
+      "--font-letter-spacing": vars.font.text.sizes[size].letterSpacing,
+      "--font-ascender-height": vars.font.text.sizes[size].ascenderHeight,
+      "--font-descender-height": vars.font.text.sizes[size].descenderHeight
+    })
+  }), {}),
+  "text-input-element": {
+    appearance: "none",
+    background: "none",
+    border: 0,
+    borderRadius: 0,
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box",
+    fontFamily: "var(--font-family)",
+    fontSize: "var(--font-size)",
+    fontWeight: "var(--font-weight)",
+    lineHeight: "var(--font-line-height)",
+    letterSpacing: "var(--font-letter-spacing)",
+    margin: 0,
+    position: "relative",
+    zIndex: 1,
+    display: "block",
+    color: "var(--input-fg-color)",
+    paddingTop: "var(--padding-top)",
+    paddingRight: "var(--padding-right)",
+    paddingBottom: "var(--padding-bottom)",
+    paddingLeft: "var(--padding-left)",
+    "--input-fg-color": "var(--color-input-default-enabled-fg)",
+    "@nest": {
+      // 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": {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    "@nest": {
+      "& > span": {
+        display: "block",
+        margin: "-1px"
+      }
+    }
+  },
+  "text-input-presentation": {
+    "--input-box-shadow": "inset 0 0 0 1px var(--input-border-color)",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    display: "block",
+    pointerEvents: "none",
+    zIndex: 0,
+    backgroundColor: "var(--input-bg-color)",
+    boxShadow: "var(--input-box-shadow)",
+    "--input-border-color": "var(--color-input-default-enabled-border)"
+    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
+    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
+    // 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)"
+  },
+  // align
+  ...responsiveRules("text-align-initial", {
+    textAlign: "initial"
+  }),
+  ...responsiveRules("text-align-left", {
+    textAlign: "left"
+  }),
+  ...responsiveRules("text-align-center", {
+    textAlign: "center"
+  }),
+  ...responsiveRules("text-align-right", {
+    textAlign: "right"
+  }),
+  ...responsiveRules("text-align-justify", {
+    textAlign: "justify"
+  })
+}, gapRules = {
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`g-${space}`.replace(".", "_"), {
+      gap: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`gx-${space}`.replace(".", "_"), {
+      columnGap: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`gy-${space}`.replace(".", "_"), {
+      rowGap: vars.space[space]
+    })
+  }), {})
+}, gridRules = {
+  // autoCols
+  ...responsiveRules("auto-cols-auto", {
+    gridAutoColumns: "auto"
+  }),
+  ...responsiveRules("auto-cols-min", {
+    gridAutoColumns: "min"
+  }),
+  ...responsiveRules("auto-cols-max", {
+    gridAutoColumns: "max"
+  }),
+  ...responsiveRules("auto-cols-fr", {
+    gridAutoColumns: "fr"
+  }),
+  // 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: "minmax(0, 1fr)"
+  }),
+  // columns
+  ...responsiveRules("columns-1", {
+    gridTemplateColumns: "repeat(1, 1fr)"
+  }),
+  ...responsiveRules("columns-2", {
+    gridTemplateColumns: "repeat(2, 1fr)"
+  }),
+  ...responsiveRules("columns-3", {
+    gridTemplateColumns: "repeat(3, 1fr)"
+  }),
+  ...responsiveRules("columns-4", {
+    gridTemplateColumns: "repeat(4, 1fr)"
+  }),
+  ...responsiveRules("columns-5", {
+    gridTemplateColumns: "repeat(5, 1fr)"
+  }),
+  ...responsiveRules("columns-6", {
+    gridTemplateColumns: "repeat(6, 1fr)"
+  }),
+  ...responsiveRules("columns-7", {
+    gridTemplateColumns: "repeat(7, 1fr)"
+  }),
+  ...responsiveRules("columns-8", {
+    gridTemplateColumns: "repeat(8, 1fr)"
+  }),
+  ...responsiveRules("columns-9", {
+    gridTemplateColumns: "repeat(9, 1fr)"
+  }),
+  ...responsiveRules("columns-10", {
+    gridTemplateColumns: "repeat(10, 1fr)"
+  }),
+  ...responsiveRules("columns-12", {
+    gridTemplateColumns: "repeat(12, 1fr)"
+  }),
+  // rows
+  ...responsiveRules("rows-1", {
+    gridTemplateRows: "repeat(1, 1fr)"
+  }),
+  ...responsiveRules("rows-2", {
+    gridTemplateRows: "repeat(2, 1fr)"
+  }),
+  ...responsiveRules("rows-3", {
+    gridTemplateRows: "repeat(3, 1fr)"
+  }),
+  ...responsiveRules("rows-4", {
+    gridTemplateRows: "repeat(4, 1fr)"
+  }),
+  ...responsiveRules("rows-5", {
+    gridTemplateRows: "repeat(5, 1fr)"
+  }),
+  ...responsiveRules("rows-6", {
+    gridTemplateRows: "repeat(6, 1fr)"
+  }),
+  ...responsiveRules("rows-7", {
+    gridTemplateRows: "repeat(7, 1fr)"
+  }),
+  ...responsiveRules("rows-8", {
+    gridTemplateRows: "repeat(8, 1fr)"
+  }),
+  ...responsiveRules("rows-9", {
+    gridTemplateRows: "repeat(9, 1fr)"
+  }),
+  ...responsiveRules("rows-10", {
+    gridTemplateRows: "repeat(10, 1fr)"
+  }),
+  ...responsiveRules("rows-12", {
+    gridTemplateRows: "repeat(12, 1fr)"
+  })
+}, gridItemRules = {
+  // column
+  ...responsiveRules("col-auto", {
+    gridColumn: "span 1 / span 1"
+  }),
+  ...responsiveRules("col-full", {
+    gridColumn: "1 / -1"
+  }),
+  ...responsiveRules("col-1", {
+    gridColumn: "span 1 / span 1"
+  }),
+  ...responsiveRules("col-2", {
+    gridColumn: "span 2 / span 2"
+  }),
+  ...responsiveRules("col-3", {
+    gridColumn: "span 3 / span 3"
+  }),
+  ...responsiveRules("col-4", {
+    gridColumn: "span 4 / span 4"
+  }),
+  ...responsiveRules("col-5", {
+    gridColumn: "span 5 / span 5"
+  }),
+  ...responsiveRules("col-6", {
+    gridColumn: "span 6 / span 6"
+  }),
+  ...responsiveRules("col-7", {
+    gridColumn: "span 7 / span 7"
+  }),
+  ...responsiveRules("col-8", {
+    gridColumn: "span 8 / span 8"
+  }),
+  ...responsiveRules("col-9", {
+    gridColumn: "span 9 / span 9"
+  }),
+  ...responsiveRules("col-10", {
+    gridColumn: "span 10 / span 10"
+  }),
+  ...responsiveRules("col-11", {
+    gridColumn: "span 11 / span 11"
+  }),
+  ...responsiveRules("col-12", {
+    gridColumn: "span 12 / span 12"
+  }),
+  // 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 = {
+  // NOTE: order matters
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`m-${space}`.replace(".", "_"), {
+      margin: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mx-${space}`.replace(".", "_"), {
+      marginLeft: vars.space[space],
+      marginRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`my-${space}`.replace(".", "_"), {
+      marginTop: vars.space[space],
+      marginBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mt-${space}`.replace(".", "_"), {
+      marginTop: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mr-${space}`.replace(".", "_"), {
+      marginRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`mb-${space}`.replace(".", "_"), {
+      marginBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`ml-${space}`.replace(".", "_"), {
+      marginLeft: vars.space[space]
+    })
+  }), {})
+}, maxWidthRules = {
+  ...responsiveRules("max-w-0", {
+    maxWidth: "var(--container-0)"
+  }),
+  ...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%"
+  })
+}, outlineRules = {
+  "outline-none": {
+    outline: "none"
+  }
+}, overflowRules = {
+  ...responsiveRules("overflow-visible", {
+    overflow: "visible"
+  }),
+  ...responsiveRules("overflow-hidden", {
+    overflow: "hidden"
+  }),
+  ...responsiveRules("overflow-scroll", {
+    overflow: "scroll"
+  }),
+  ...responsiveRules("overflow-auto", {
+    overflow: "auto"
+  })
+}, paddingRules = {
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`p-${space}`.replace(".", "_"), {
+      padding: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`px-${space}`.replace(".", "_"), {
+      paddingLeft: vars.space[space],
+      paddingRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`py-${space}`.replace(".", "_"), {
+      paddingTop: vars.space[space],
+      paddingBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pt-${space}`.replace(".", "_"), {
+      paddingTop: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pr-${space}`.replace(".", "_"), {
+      paddingRight: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pb-${space}`.replace(".", "_"), {
+      paddingBottom: vars.space[space]
+    })
+  }), {}),
+  ...SPACE.reduce((acc, space) => ({
+    ...acc,
+    ...responsiveRules(`pl-${space}`.replace(".", "_"), {
+      paddingLeft: vars.space[space]
+    })
+  }), {})
+}, pointerEventsRules = {
+  "pointer-events-none": {
+    pointerEvents: "none"
+  },
+  "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 = {
+  // styles
+  ...borderRules,
+  ...displayRules,
+  ...flexItemRules,
+  ...flexRules,
+  ...fontRules,
+  ...gapRules,
+  ...gridItemRules,
+  ...gridRules,
+  ...heightRules,
+  ...marginRules,
+  ...outlineRules,
+  ...overflowRules,
+  ...paddingRules,
+  ...pointerEventsRules,
+  ...positionRules,
+  ...radiusRules,
+  ...shadowRules,
+  ...widthRules,
+  // primitives
+  ...avatarRules,
+  ...badgeRules,
+  ...boxRules,
+  ...buttonRules,
+  ...cardRules,
+  ...checkboxRules,
+  ...codeRules,
+  ...containerRules,
+  ...headingRules,
+  ...kbdRules,
+  ...labelRules,
+  ...maxWidthRules,
+  ...popoverRules,
+  ...radioRules,
+  ...selectRules,
+  ...selectableRules,
+  ...spinnerRules,
+  ...switchRules,
+  ...textAreaRules,
+  ...textInputRules,
+  ...textRules,
+  ...tokenRules,
+  ...tooltipRules,
+  // components
+  ...breadcrumbsRules,
+  ...dialogRules,
+  ...menuRules,
+  ...skeletonRules
+};
+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 += `
+}
+`, 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[0.5]]: `calc(${rem(theme.space[1])} / 2)`,
+    [varNames.space[1]]: rem(theme.space[1]),
+    [varNames.space[2]]: rem(theme.space[2]),
+    [varNames.space[3]]: rem(theme.space[3]),
+    [varNames.space[4]]: rem(theme.space[4]),
+    [varNames.space[5]]: rem(theme.space[5]),
+    [varNames.space[6]]: rem(theme.space[6]),
+    [varNames.space[7]]: rem(theme.space[7]),
+    [varNames.space[8]]: rem(theme.space[8]),
+    [varNames.space[9]]: rem(theme.space[9]),
+    "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
+    //`${theme.shadow[0]?.umbra || 'none'}`,
+    "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
+    "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
+    "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
+    "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
+    "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
+    "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
+    "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
+    "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
+    "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
+    "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
+    "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
+    "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
+    "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
+    "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
+    "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
+    "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
+    "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient),
+    ...Object.fromEntries(getThemeEntries(theme.color, ["color"]))
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "transparent"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "default"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "primary"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "positive"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "caution"
+  }), compileCardCss({
+    scheme: "dark",
+    tone: "critical"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "transparent"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "default"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "primary"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "positive"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "caution"
+  }), compileCardCss({
+    scheme: "light",
+    tone: "critical"
+  })].join(`
+
+`);
+}
+function compileCardCss(props) {
+  const {
+    scheme,
+    tone
+  } = props, cardVars = vars.color[scheme][tone];
+  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 menuDivider() {
+  return composeClassNames("menu-divider");
+}
+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 radius(props) {
+  return composeClassNames(_resp("r", props.radius));
+}
+function skeleton(props) {
+  return composeClassNames("skeleton", radius(props));
+}
+function codeSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("code-skeleton", props.size));
+}
+function headingSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
+}
+function labelSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("label-skeleton", props.size));
+}
+function textSkeleton(props) {
+  return composeClassNames("font-skeleton", _resp("text-skeleton", props.size));
+}
+function treeItem() {
+  return composeClassNames("tree-item");
+}
+function avatar(props) {
+  return composeClassNames("avatar", `avatar-${props.color}`, `avatar-arrow-${props.arrowPosition}`, _resp("avatar", props.size));
+}
+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 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 grid(props) {
+  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-rows", props.autoRows), _resp("auto-flow", props.autoFlow), _resp("columns", props.columns), _resp("rows", props.rows));
+}
+function gridItem(props) {
+  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
+}
+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 overflow(props) {
+  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+}
+function padding(props) {
+  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
+}
+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("box", props.sizing), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), margin(props), maxWidth(props), props.outline && `outline-${props.outline}`, overflow(props), padding(props), pointerEvents(props), position(props), width(props));
+}
+function button(props) {
+  const {
+    mode = "default",
+    tone = "default"
+  } = props;
+  return composeClassNames("button", `button-mode-${mode}`, `button-tone-${tone}`, radius(props), width(props));
+}
+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 = {
+  align: "text-align",
+  weight: "font"
+};
+function font(props) {
+  return composeClassNames("font", props.weight && `${prefixes.weight}-${props.weight}`, _resp(prefixes.align, props.align));
+}
+function code(props) {
+  return composeClassNames("code", "block", font(props), _resp("code", props.size));
+}
+function container(props) {
+  return composeClassNames("container", maxWidth({
+    maxWidth: props.width
+  }));
+}
+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 animatedSpinnerIcon() {
+  return composeClassNames("animated-spinner-icon");
+}
+function _switch() {
+  return composeClassNames("switch");
+}
+function text(props) {
+  return composeClassNames("text", "block", font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
+}
+function textArea() {
+  return composeClassNames("text-area");
+}
+function textInput(props) {
+  return composeClassNames("text-input", _resp("text-input", props.size), _resp("text-input-p", props.padding));
+}
+function textInputElement() {
+  return composeClassNames("text-input-element");
+}
+function tooltip() {
+  return composeClassNames("tooltip");
+}
+function tooltipCard() {
+  return composeClassNames("tooltip-card");
+}
+export {
+  _switch,
+  animatedSpinnerIcon,
+  avatar,
+  avatarArrow,
+  avatarBgStroke,
+  avatarImage,
+  avatarInitials,
+  avatarStroke,
+  badge,
+  box,
+  breadcrumbs,
+  button,
+  buttonLoadingBox,
+  card,
+  checkbox,
+  checkboxInput,
+  code,
+  codeSkeleton,
+  compileSystem,
+  compileTheme,
+  composeClassNames,
+  container,
+  dialog,
+  dialogCardRoot,
+  dialogContainer,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogLayout,
+  heading,
+  headingSkeleton,
+  kbd,
+  label,
+  labelSkeleton,
+  menuDivider,
+  popover,
+  radio,
+  select,
+  selectable,
+  skeleton,
+  spinner,
+  text,
+  textArea,
+  textInput,
+  textInputElement,
+  textSkeleton,
+  tooltip,
+  tooltipCard,
+  treeItem
+};
+//# sourceMappingURL=css.esm.js.map