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

package/dist/css.esm.js

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