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

package/dist/_chunks-cjs/buildCommand.js

@@ -1,3542 +1,32 @@
 "use strict";
-var fs = require("fs/promises"), path = require("path"), theme = require("@sanity/ui/theme");
+var css = require("@sanity/ui/css"), theme = require("@sanity/ui/theme"), fs = require("fs/promises"), path = require("path");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
 var fs__default = /* @__PURE__ */ _interopDefaultCompat(fs), path__default = /* @__PURE__ */ _interopDefaultCompat(path);
-const breadcrumbsRules = {
-  breadcrumbs: {
-    lineHeight: 0
-  }
-}, dialogRules = {
-  dialog: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    background: "var(--color-backdrop)",
-    "@keyframes": {
-      "dialog-zoom-in": {
-        from: {
-          opacity: 0,
-          transform: "scale(0.95)"
-        },
-        to: {
-          opacity: 1,
-          transform: "scale(1)"
-        }
-      },
-      "dialog-fade-in": {
-        from: {
-          opacity: 0
-        },
-        to: {
-          opacity: 1
-        }
-      }
-    },
-    "@nest": {
-      "&[data-animate]": {
-        animation: "dialog-fade-in 200ms ease-out"
-      },
-      // Animates the dialog card.
-      '&[data-animate] > [data-ui="DialogCard"]': {
-        animation: "dialog-zoom-in 200ms ease-out"
-      }
-    }
-  },
-  "dialog-container": {
-    width: "100%",
-    height: "100%"
-  },
-  "dialog-card-root": {
-    width: "100%",
-    maxHeight: "100%",
-    overflow: ["hidden", "clip"]
-  },
-  "dialog-layout": {
-    width: "100%"
-  },
-  "dialog-header": {
-    zIndex: 2
-  },
-  "dialog-content": {
-    zIndex: 1,
-    outline: "none"
-  },
-  "dialog-footer": {
-    zIndex: 3
-  }
-}, menuRules = {
-  "menu-divider": {
-    height: "1px",
-    border: 0,
-    backgroundColor: "var(--card-border-color)",
-    margin: 0
-  }
-};
-function responsiveRules(className, props) {
-  return {
-    [className]: props,
-    [`_1:${className}`]: {
-      "@media": {
-        "screen and (min-width: 360px)": props
-      }
-    },
-    [`_2:${className}`]: {
-      "@media": {
-        "screen and (min-width: 600px)": props
-      }
-    },
-    [`_3:${className}`]: {
-      "@media": {
-        "screen and (min-width: 900px)": props
-      }
-    },
-    [`_4:${className}`]: {
-      "@media": {
-        "screen and (min-width: 1200px)": props
-      }
-    },
-    [`_5:${className}`]: {
-      "@media": {
-        "screen and (min-width: 1800px)": props
-      }
-    },
-    [`_6:${className}`]: {
-      "@media": {
-        "screen and (min-width: 2400px)": props
-      }
-    }
-  };
-}
-const skeletonRules = {
-  skeleton: {
-    backgroundColor: "var(--card-skeleton-from-color)",
-    backgroundPosition: "100%",
-    backgroundSize: "200% 100%",
-    backgroundAttachment: "fixed",
-    opacity: 0,
-    transition: "opacity 200ms ease-in",
-    "@keyframes": {
-      "skeleton-pulse": {
-        "0%": {
-          backgroundPosition: "100%"
-        },
-        "100%": {
-          backgroundPosition: "-100%"
-        }
-      }
-    },
-    "@nest": {
-      "&[data-animated]": {
-        backgroundImage: `linear-gradient(
-          to right,
-          var(--card-skeleton-from-color),
-          var(--card-skeleton-to-color),
-          var(--card-skeleton-from-color),
-          var(--card-skeleton-from-color),
-          var(--card-skeleton-from-color)
-        )`,
-        animationName: "skeleton-pulse",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        animationDuration: "2000ms"
-      },
-      "&[data-visible]": {
-        opacity: 1
-      }
-    },
-    "@media": {
-      "screen and (prefers-reduced-motion: no-preference)": {
-        backgroundColor: "var(--card-skeleton-from-color)"
-      }
-    }
-  },
-  "font-skeleton": {
-    height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
-  },
-  // ...responsiveRules('text-skeleton-0', {
-  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
-  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
-  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
-  // }),
-  ...theme.FONT_CODE_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`code-skeleton-${size}`, {
-      "--font-skeleton-line-height": `var(--font-code-${size}-line-height)`,
-      "--font-skeleton-ascender-height": `var(--font-code-${size}-ascender-height)`,
-      "--font-skeleton-descender-height": `var(--font-code-${size}-descender-height)`
-    })
-  }), {}),
-  ...theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`heading-skeleton-${size}`, {
-      "--font-skeleton-line-height": `var(--font-heading-${size}-line-height)`,
-      "--font-skeleton-ascender-height": `var(--font-heading-${size}-ascender-height)`,
-      "--font-skeleton-descender-height": `var(--font-heading-${size}-descender-height)`
-    })
-  }), {}),
-  ...theme.FONT_LABEL_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`label-skeleton-${size}`, {
-      "--font-skeleton-line-height": `var(--font-label-${size}-line-height)`,
-      "--font-skeleton-ascender-height": `var(--font-label-${size}-ascender-height)`,
-      "--font-skeleton-descender-height": `var(--font-label-${size}-descender-height)`
-    })
-  }), {}),
-  ...theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`text-skeleton-${size}`, {
-      "--font-skeleton-line-height": `var(--font-text-${size}-line-height)`,
-      "--font-skeleton-ascender-height": `var(--font-text-${size}-ascender-height)`,
-      "--font-skeleton-descender-height": `var(--font-text-${size}-descender-height)`
-    })
-  }), {})
-}, avatarRules = {
-  avatar: {
-    backgroundColor: "var(--avatar-bg-color)",
-    position: "relative",
-    boxSizing: "border-box",
-    userSelect: "none",
-    boxShadow: "0 0 0 1px var(--card-bg-color)",
-    "@nest": {
-      '&[data-status="inactive"]': {
-        opacity: 0.5
-      },
-      "& > svg:not([hidden])": {
-        display: "block"
-      },
-      /* &:is(button) */
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: "inherit",
-        color: "inherit",
-        outline: "none"
-      },
-      '&[data-as="button"]:focus': {
-        // boxShadow: focusRingStyle({focusRing: avatar.focusRing}),
-      },
-      '&[data-as="button"]:focus:not(:focus-visible)': {
-        boxShadow: "none"
-      }
-    }
-  },
-  ...theme.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(theme.SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
-};
-function buildColorCardVarNames(props) {
-  const {
-    scheme,
-    tone
-  } = props, prefix = `--color-${scheme}-${tone}`;
-  return {
-    accent: {
-      fg: `${prefix}-accent-fg`
-    },
-    avatar: {
-      gray: {
-        bg: `${prefix}-avatar-gray-bg`,
-        fg: `${prefix}-avatar-gray-fg`
-      },
-      blue: {
-        bg: `${prefix}-avatar-blue-bg`,
-        fg: `${prefix}-avatar-blue-fg`
-      },
-      purple: {
-        bg: `${prefix}-avatar-purple-bg`,
-        fg: `${prefix}-avatar-purple-fg`
-      },
-      magenta: {
-        bg: `${prefix}-avatar-magenta-bg`,
-        fg: `${prefix}-avatar-magenta-fg`
-      },
-      red: {
-        bg: `${prefix}-avatar-red-bg`,
-        fg: `${prefix}-avatar-red-fg`
-      },
-      orange: {
-        bg: `${prefix}-avatar-orange-bg`,
-        fg: `${prefix}-avatar-gray-fg`
-      },
-      yellow: {
-        bg: `${prefix}-avatar-yellow-bg`,
-        fg: `${prefix}-avatar-yellow-fg`
-      },
-      green: {
-        bg: `${prefix}-avatar-green-bg`,
-        fg: `${prefix}-avatar-green-fg`
-      },
-      cyan: {
-        bg: `${prefix}-avatar-cyan-bg`,
-        fg: `${prefix}-avatar-yellow-fg`
-      }
-    },
-    backdrop: `${prefix}-backdrop`,
-    badge: {
-      default: {
-        bg: `${prefix}-badge-default-bg`,
-        dot: `${prefix}-badge-default-dot`,
-        fg: `${prefix}-badge-default-fg`,
-        icon: `${prefix}-badge-default-icon`
-      },
-      primary: {
-        bg: `${prefix}-badge-primary-bg`,
-        dot: `${prefix}-badge-primary-dot`,
-        fg: `${prefix}-badge-primary-fg`,
-        icon: `${prefix}-badge-primary-icon`
-      },
-      positive: {
-        bg: `${prefix}-badge-positive-bg`,
-        dot: `${prefix}-badge-positive-dot`,
-        fg: `${prefix}-badge-positive-fg`,
-        icon: `${prefix}-badge-positive-icon`
-      },
-      caution: {
-        bg: `${prefix}-badge-caution-bg`,
-        dot: `${prefix}-badge-caution-dot`,
-        fg: `${prefix}-badge-caution-fg`,
-        icon: `${prefix}-badge-caution-icon`
-      },
-      critical: {
-        bg: `${prefix}-badge-critical-bg`,
-        dot: `${prefix}-badge-critical-dot`,
-        fg: `${prefix}-badge-critical-fg`,
-        icon: `${prefix}-badge-critical-icon`
-      }
-    },
-    bg: `${prefix}-bg`,
-    border: `${prefix}-border`,
-    code: {
-      bg: `${prefix}-code-bg`,
-      fg: `${prefix}-code-fg`
-    },
-    fg: `${prefix}-fg`,
-    focusRing: `${prefix}-focus-ring`,
-    icon: `${prefix}-icon`,
-    input: {
-      default: {
-        enabled: buildColorInputStateVarNames({
-          mode: "default",
-          scheme,
-          state: "enabled",
-          tone
-        }),
-        hovered: buildColorInputStateVarNames({
-          mode: "default",
-          scheme,
-          state: "hovered",
-          tone
-        }),
-        readOnly: buildColorInputStateVarNames({
-          mode: "default",
-          scheme,
-          state: "readOnly",
-          tone
-        }),
-        disabled: buildColorInputStateVarNames({
-          mode: "default",
-          scheme,
-          state: "disabled",
-          tone
-        })
-      },
-      invalid: {
-        enabled: buildColorInputStateVarNames({
-          mode: "invalid",
-          scheme,
-          state: "enabled",
-          tone
-        }),
-        hovered: buildColorInputStateVarNames({
-          mode: "invalid",
-          scheme,
-          state: "hovered",
-          tone
-        }),
-        readOnly: buildColorInputStateVarNames({
-          mode: "invalid",
-          scheme,
-          state: "readOnly",
-          tone
-        }),
-        disabled: buildColorInputStateVarNames({
-          mode: "invalid",
-          scheme,
-          state: "disabled",
-          tone
-        })
-      }
-    },
-    kbd: {
-      bg: `${prefix}-kbd-bg`,
-      border: `${prefix}-kbd-border`,
-      fg: `${prefix}-kbd-fg`
-    },
-    link: {
-      fg: `${prefix}-link-fg`
-    },
-    muted: {
-      bg: `${prefix}-muted-bg`,
-      fg: `${prefix}-muted-fg`
-    },
-    skeleton: {
-      from: `${prefix}-skeleton-from`,
-      to: `${prefix}-skeleton-to`
-    },
-    shadow: {
-      outline: `${prefix}-shadow-outline`,
-      umbra: `${prefix}-shadow-umbra`,
-      penumbra: `${prefix}-shadow-penumbra`,
-      ambient: `${prefix}-shadow-ambient`
-    },
-    syntax: {
-      atrule: `${prefix}-syntax-atrule`,
-      attrName: `${prefix}-syntax-attrName`,
-      attrValue: `${prefix}-syntax-attrValue`,
-      attribute: `${prefix}-syntax-attribute`,
-      boolean: `${prefix}-syntax-boolean`,
-      builtin: `${prefix}-syntax-builtin`,
-      cdata: `${prefix}-syntax-cdata`,
-      char: `${prefix}-syntax-char`,
-      class: `${prefix}-syntax-class`,
-      className: `${prefix}-syntax-className`,
-      comment: `${prefix}-syntax-comment`,
-      constant: `${prefix}-syntax-constant`,
-      deleted: `${prefix}-syntax-deleted`,
-      doctype: `${prefix}-syntax-doctype`,
-      entity: `${prefix}-syntax-entity`,
-      function: `${prefix}-syntax-function`,
-      hexcode: `${prefix}-syntax-hexcode`,
-      id: `${prefix}-syntax-id`,
-      important: `${prefix}-syntax-important`,
-      inserted: `${prefix}-syntax-inserted`,
-      keyword: `${prefix}-syntax-keyword`,
-      number: `${prefix}-syntax-number`,
-      operator: `${prefix}-syntax-operator`,
-      prolog: `${prefix}-syntax-prolog`,
-      property: `${prefix}-syntax-property`,
-      pseudoClass: `${prefix}-syntax-pseudoClass`,
-      pseudoElement: `${prefix}-syntax-pseudoElement`,
-      punctuation: `${prefix}-syntax-punctuation`,
-      regex: `${prefix}-syntax-regex`,
-      selector: `${prefix}-syntax-selector`,
-      string: `${prefix}-syntax-string`,
-      symbol: `${prefix}-syntax-symbol`,
-      tag: `${prefix}-syntax-tag`,
-      unit: `${prefix}-syntax-unit`,
-      url: `${prefix}-syntax-url`,
-      variable: `${prefix}-syntax-variable`
-    }
-  };
-}
-function buildColorInputStateVarNames(props) {
-  const {
-    mode,
-    scheme,
-    state,
-    tone
-  } = props, prefix = `--color-${scheme}-${tone}-input-${mode}-${state}`;
-  return {
-    bg: `${prefix}-bg`,
-    border: `${prefix}-border`,
-    fg: `${prefix}-fg`,
-    muted: {
-      bg: `${prefix}-muted-bg`
-    },
-    placeholder: `${prefix}-placeholder`
-  };
-}
-const vars = {
-  color: {
-    dark: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
-      ...acc,
-      [tone]: buildColorCardVars({
-        scheme: "dark",
-        tone
-      })
-    }), {}),
-    light: theme.THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
-      ...acc,
-      [tone]: buildColorCardVars({
-        scheme: "light",
-        tone
-      })
-    }), {}),
-    accent: {
-      fg: "var(--color-accent-fg)"
-    },
-    avatar: {
-      ...theme.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.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.THEME_COLOR_INPUT_MODES.reduce((acc, mode) => ({
-        ...acc,
-        [mode]: {
-          ...theme.THEME_COLOR_INPUT_STATES.reduce((acc2, state) => ({
-            ...acc2,
-            [state]: {
-              bg: "var(--color-bg)",
-              border: "var(--color-border)",
-              fg: "var(--color-fg)",
-              muted: {
-                fg: "var(--color-muted-fg)"
-              },
-              placeholder: "var(--color-placeholder)"
-            }
-          }), {})
-        }
-      }), {})
-    },
-    kbd: {
-      bg: "var(--color-kbd-bg)",
-      border: "var(--color-kbd-border)",
-      fg: "var(--color-kbd-fg)"
-    },
-    link: {
-      fg: "var(--color-link-fg)"
-    },
-    muted: {
-      bg: "var(--color-muted-bg)",
-      fg: "var(--color-muted-fg)"
-    },
-    shadow: {
-      outline: "var(--color-shadow-outline)",
-      umbra: "var(--color-shadow-umbra)",
-      penumbra: "var(--color-shadow-penumbra)",
-      ambient: "var(--color-shadow-ambient)"
-    },
-    skeleton: {
-      from: "var(--color-skeleton-from)",
-      to: "var(--color-skeleton-to)"
-    },
-    syntax: {
-      atrule: "var(--color-syntax-atrule)",
-      attrName: "var(--color-syntax-attrName)",
-      attrValue: "var(--color-syntax-attrValue)",
-      attribute: "var(--color-syntax-attribute)",
-      boolean: "var(--color-syntax-boolean)",
-      builtin: "var(--color-syntax-builtin)",
-      cdata: "var(--color-syntax-cdata)",
-      char: "var(--color-syntax-char)",
-      class: "var(--color-syntax-class)",
-      className: "var(--color-syntax-className)",
-      comment: "var(--color-syntax-comment)",
-      constant: "var(--color-syntax-constant)",
-      deleted: "var(--color-syntax-deleted)",
-      doctype: "var(--color-syntax-doctype)",
-      entity: "var(--color-syntax-entity)",
-      function: "var(--color-syntax-function)",
-      hexcode: "var(--color-syntax-hexcode)",
-      id: "var(--color-syntax-id)",
-      important: "var(--color-syntax-important)",
-      inserted: "var(--color-syntax-inserted)",
-      keyword: "var(--color-syntax-keyword)",
-      number: "var(--color-syntax-number)",
-      operator: "var(--color-syntax-operator)",
-      prolog: "var(--color-syntax-prolog)",
-      property: "var(--color-syntax-property)",
-      pseudoClass: "var(--color-syntax-pseudoClass)",
-      pseudoElement: "var(--color-syntax-pseudoElement)",
-      punctuation: "var(--color-syntax-punctuation)",
-      regex: "var(--color-syntax-regex)",
-      selector: "var(--color-syntax-selector)",
-      string: "var(--color-syntax-string)",
-      symbol: "var(--color-syntax-symbol)",
-      tag: "var(--color-syntax-tag)",
-      unit: "var(--color-syntax-unit)",
-      url: "var(--color-syntax-url)",
-      variable: "var(--color-syntax-variable)"
-    }
-  },
-  font: {
-    code: {
-      family: "var(--font-code-family)",
-      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(--font-code-${size}-size)`,
-          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
-          descenderHeight: `var(--font-code-${size}-descender-height)`,
-          lineHeight: `var(--font-code-${size}-line-height)`,
-          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
-          iconSize: `var(--font-code-${size}-icon-size)`
-        }
-      }), {})
-    },
-    heading: {
-      family: "var(--font-heading-family)",
-      sizes: theme.FONT_HEADING_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(--font-code-${size}-size)`,
-          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
-          descenderHeight: `var(--font-code-${size}-descender-height)`,
-          lineHeight: `var(--font-code-${size}-line-height)`,
-          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
-          iconSize: `var(--font-code-${size}-icon-size)`
-        }
-      }), {})
-    },
-    label: {
-      family: "var(--font-label-family)",
-      sizes: theme.FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(--font-code-${size}-size)`,
-          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
-          descenderHeight: `var(--font-code-${size}-descender-height)`,
-          lineHeight: `var(--font-code-${size}-line-height)`,
-          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
-          iconSize: `var(--font-code-${size}-icon-size)`
-        }
-      }), {})
-    },
-    text: {
-      family: "var(--font-text-family)",
-      sizes: theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(--font-code-${size}-size)`,
-          ascenderHeight: `var(--font-code-${size}-ascender-height)`,
-          descenderHeight: `var(--font-code-${size}-descender-height)`,
-          lineHeight: `var(--font-code-${size}-line-height)`,
-          letterSpacing: `var(--font-code-${size}-letter-spacing)`,
-          iconSize: `var(--font-code-${size}-icon-size)`
-        }
-      }), {})
-    }
-  },
-  space: Object.fromEntries(theme.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.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.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.THEME_COLOR_INPUT_MODES.reduce((acc, mode) => ({
-        ...acc,
-        [mode]: {
-          ...theme.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.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.THEME_COLOR_BUTTON_MODES.reduce((acc, mode) => ({
-    ...acc,
-    [`button-mode-${mode}`]: {
-      "@nest": theme.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.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.THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
-      ...acc,
-      [`--card-badge-${tone}-bg-color`]: `var(--color-badge-${tone}-bg)`,
-      [`--card-badge-${tone}-dot-color`]: `var(--color-badge-${tone}-dot)`,
-      [`--card-badge-${tone}-fg-color`]: `var(--color-badge-${tone}-fg)`,
-      [`--card-badge-${tone}-icon-color`]: `var(--color-badge-${tone}-icon)`
-    }), {}),
-    "--card-bg-color": "var(--color-bg)",
-    "--card-border-color": "var(--color-border)",
-    "--card-code-bg-color": "var(--color-code-bg)",
-    "--card-code-fg-color": "var(--color-code-fg)",
-    "--card-fg-color": "var(--color-fg)",
-    "--card-focus-ring-color": "var(--color-focus-ring)",
-    "--card-icon-color": "var(--color-icon)",
-    "--card-kbd-bg-color": "var(--color-kbd-bg)",
-    "--card-kbd-border-color": "var(--color-kbd-border)",
-    "--card-kbd-fg-color": "var(--color-kbd-fg)",
-    "--card-link-fg-color": "var(--color-link-fg)",
-    "--card-muted-bg-color": "var(--color-muted-bg)",
-    "--card-muted-fg-color": "var(--color-muted-fg)",
-    "--card-shadow-outline-color": "var(--color-shadow-outline)",
-    "--card-shadow-umbra-color": "var(--color-shadow-umbra)",
-    "--card-shadow-penumbra-color": "var(--color-shadow-penumbra)",
-    "--card-shadow-ambient-color": "var(--color-shadow-ambient)",
-    "--card-skeleton-from-color": "var(--color-skeleton-from)",
-    "--card-skeleton-to-color": "var(--color-skeleton-to)",
-    "--card-bg2-color": "var(--color-muted-bg)",
-    "--card-link-color": "var(--color-link-fg)",
-    "--card-hairline-soft-color": "var(--color-border)",
-    "--card-hairline-hard-color": "var(--color-border)",
-    "@nest": {
-      "&[data-checkered]": {
-        "--card-bg-image": "repeating-conic-gradient(var(--color-bg) 0% 25%, var(--color-muted-bg) 0% 50%)",
-        backgroundSize: "var(--space-3) var(--space-3)",
-        backgroundPosition: "50% 50%",
-        backgroundImage: "var(--card-bg-image)"
-      },
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        outline: "none",
-        font: "inherit",
-        textAlign: "inherit",
-        border: 0,
-        width: ["-moz-available", "-webkit-fill-available", "stretch"]
-      },
-      '&[data-as="a"]': {
-        outline: "none",
-        textDecoration: "none"
-      },
-      '&[data-as="pre"]': {
-        font: "inherit"
-      }
-    }
-  }
-}, checkboxRules = {
-  checkbox: {
-    position: "relative",
-    display: "inline-block"
-  },
-  "checkbox-input": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    outline: "none",
-    opacity: 0,
-    zIndex: 1,
-    padding: 0,
-    margin: 0,
-    "@nest": {
-      "& + span": {
-        position: "relative",
-        display: "block",
-        width: "var(--input-checkbox-size)",
-        height: "var(--input-checkbox-size)",
-        boxSizing: "border-box",
-        borderRadius: "var(--radius-2)",
-        lineHeight: 1,
-        backgroundColor: "var(--color-checkbox-bg)",
-        boxShadow: "inset 0 0 0 1px var(--color-checkbox-border)",
-        color: "var(--color-checkbox-fg)",
-        "--color-checkbox-bg": "var(--color-input-default-enabled-bg)",
-        "--color-checkbox-border": "var(--color-input-default-enabled-border)",
-        "--color-checkbox-fg": "var(--color-input-default-enabled-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })},
-      },
-      "& + span > svg": {
-        display: "block",
-        position: "absolute",
-        opacity: 0,
-        height: "100%",
-        width: "100%"
-      },
-      "& + span > svg > path": {
-        vectorEffect: "non-scaling-stroke",
-        strokeWidth: "1.5px !important"
-      },
-      "&:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-default-enabled-fg)",
-        "--color-checkbox-border": "var(--color-input-default-enabled-fg)",
-        "--color-checkbox-fg": "var(--color-input-default-enabled-bg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.fg,
-        //   width: input.border.width,
-        // })},
-      },
-      "&:checked + span > svg:first-child": {
-        opacity: 1
-      },
-      // focus
-      "&:not(:disabled):focus:focus-visible + span": {
-        // box-shadow: ${focusRingStyle({focusRing})},
-      },
-      // focus when checked - uses a different offset
-      "&:not(:disabled):focus:focus-visible&:checked + span": {
-        // box-shadow: ${focusRingStyle({focusRing: {width: 1, offset: 1}})},
-      },
-      "&[data-error] + span": {
-        "--color-checkbox-bg": "var(--color-input-invalid-enabled-border)",
-        "--color-checkbox-border": "var(--color-input-invalid-enabled-bg)",
-        "--color-checkbox-fg": "var(--color-input-invalid-enabled-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.invalid.enabled.muted.bg,
-        // })},
-      },
-      "&[data-error]:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-invalid-enabled-muted-bg)",
-        "--color-checkbox-fg": "var(--color-input-invalid-enabled-bg)"
-      },
-      "&[data-error]:checked:not(:disabled):focus:focus-visible + span": {
-        "--color-checkbox-border": "var(--color-input-invalid-readOnly-muted-bg)"
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.invalid.readOnly.muted.bg},
-        //   focusRing: {width: 1, offset: 1},
-        // })},
-      },
-      "&:disabled + span": {
-        "--color-checkbox-bg": "var(--color-input-default-disabled-bg)",
-        "--color-checkbox-border": "var(--color-input-default-disabled-border)",
-        "--color-checkbox-fg": "var(--color-input-default-disabled-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.disabled.border,
-        // })},
-      },
-      "&:disabled:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-default-disabled-muted-bg)"
-      },
-      "&[data-read-only] + span": {
-        "--color-checkbox-bg": "var(--color-input-default-readOnly-bg)",
-        "--color-checkbox-border": "var(--color-input-default-readOnly-border)",
-        "--color-checkbox-fg": "var(--color-input-default-readOnly-fg)"
-        // box-shadow: ${focusRingBorderStyle({
-        //   width: input.border.width,
-        //   color: color.input.default.readOnly.border,
-        // })},
-      },
-      "&[data-read-only]:checked + span": {
-        "--color-checkbox-bg": "var(--color-input-default-readOnly-muted-bg)"
-      },
-      "&:indeterminate + span > svg:last-child": {
-        opacity: 1
-      }
-    }
-  }
-}, codeRules = {
-  code: {
-    "--font-weight-regular": "var(--font-code-weight-regular)",
-    "--font-weight-medium": "var(--font-code-weight-medium)",
-    "--font-weight-semibold": "var(--font-code-weight-semibold)",
-    "--font-weight-bold": "var(--font-code-weight-bold)",
-    "--font-family": "var(--font-code-family)",
-    color: "var(--color-fg)",
-    "@nest": {
-      "& > code": {
-        font: "inherit"
-      },
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  ...responsiveRules("code-0", {
-    "--font-size": "var(--font-code-0-size)",
-    "--font-line-height": "var(--font-code-0-line-height)",
-    "--font-letter-spacing": "var(--font-code-0-letter-spacing)",
-    "--font-icon-size": "var(--font-code-0-icon-size)",
-    "--font-ascender-height": "var(--font-code-0-ascender-height)",
-    "--font-descender-height": "var(--font-code-0-descender-height)"
-  }),
-  ...responsiveRules("code-1", {
-    "--font-size": "var(--font-code-1-size)",
-    "--font-line-height": "var(--font-code-1-line-height)",
-    "--font-letter-spacing": "var(--font-code-1-letter-spacing)",
-    "--font-icon-size": "var(--font-code-1-icon-size)",
-    "--font-ascender-height": "var(--font-code-1-ascender-height)",
-    "--font-descender-height": "var(--font-code-1-descender-height)"
-  }),
-  ...responsiveRules("code-2", {
-    "--font-size": "var(--font-code-2-size)",
-    "--font-line-height": "var(--font-code-2-line-height)",
-    "--font-letter-spacing": "var(--font-code-2-letter-spacing)",
-    "--font-icon-size": "var(--font-code-2-icon-size)",
-    "--font-ascender-height": "var(--font-code-2-ascender-height)",
-    "--font-descender-height": "var(--font-code-2-descender-height)"
-  }),
-  ...responsiveRules("code-3", {
-    "--font-size": "var(--font-code-3-size)",
-    "--font-line-height": "var(--font-code-3-line-height)",
-    "--font-letter-spacing": "var(--font-code-3-letter-spacing)",
-    "--font-icon-size": "var(--font-code-3-icon-size)",
-    "--font-ascender-height": "var(--font-code-3-ascender-height)",
-    "--font-descender-height": "var(--font-code-3-descender-height)"
-  }),
-  ...responsiveRules("code-4", {
-    "--font-size": "var(--font-code-4-size)",
-    "--font-line-height": "var(--font-code-4-line-height)",
-    "--font-letter-spacing": "var(--font-code-4-letter-spacing)",
-    "--font-icon-size": "var(--font-code-4-icon-size)",
-    "--font-ascender-height": "var(--font-code-4-ascender-height)",
-    "--font-descender-height": "var(--font-code-4-descender-height)"
-  })
-}, containerRules = {
-  container: {
-    margin: "0 auto",
-    width: "100%"
-  }
-}, headingRules = {
-  heading: {
-    "--font-weight-regular": "var(--font-heading-weight-regular)",
-    "--font-weight-medium": "var(--font-heading-weight-medium)",
-    "--font-weight-semibold": "var(--font-heading-weight-semibold)",
-    "--font-weight-bold": "var(--font-heading-weight-bold)",
-    "--font-family": "var(--font-heading-family)",
-    color: "var(--color-fg)",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  "heading-accent": {
-    "--fg-color": "var(--color-accent-fg)"
-  },
-  "heading-muted": {
-    "--fg-color": "var(--color-muted-fg)"
-  },
-  ...responsiveRules("heading-0", {
-    "--font-size": "var(--font-heading-0-size)",
-    "--font-line-height": "var(--font-heading-0-line-height)",
-    "--font-letter-spacing": "var(--font-heading-0-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-0-icon-size)",
-    "--font-ascender-height": "var(--font-heading-0-ascender-height)",
-    "--font-descender-height": "var(--font-heading-0-descender-height)"
-  }),
-  ...responsiveRules("heading-1", {
-    "--font-size": "var(--font-heading-1-size)",
-    "--font-line-height": "var(--font-heading-1-line-height)",
-    "--font-letter-spacing": "var(--font-heading-1-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-1-icon-size)",
-    "--font-ascender-height": "var(--font-heading-1-ascender-height)",
-    "--font-descender-height": "var(--font-heading-1-descender-height)"
-  }),
-  ...responsiveRules("heading-2", {
-    "--font-size": "var(--font-heading-2-size)",
-    "--font-line-height": "var(--font-heading-2-line-height)",
-    "--font-letter-spacing": "var(--font-heading-2-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-2-icon-size)",
-    "--font-ascender-height": "var(--font-heading-2-ascender-height)",
-    "--font-descender-height": "var(--font-heading-2-descender-height)"
-  }),
-  ...responsiveRules("heading-3", {
-    "--font-size": "var(--font-heading-3-size)",
-    "--font-line-height": "var(--font-heading-3-line-height)",
-    "--font-letter-spacing": "var(--font-heading-3-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-3-icon-size)",
-    "--font-ascender-height": "var(--font-label-3-ascender-height)",
-    "--font-descender-height": "var(--font-label-3-descender-height)"
-  }),
-  ...responsiveRules("heading-4", {
-    "--font-size": "var(--font-heading-4-size)",
-    "--font-line-height": "var(--font-heading-4-line-height)",
-    "--font-letter-spacing": "var(--font-heading-4-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-4-icon-size)",
-    "--font-ascender-height": "var(--font-heading-4-ascender-height)",
-    "--font-descender-height": "var(--font-heading-4-descender-height)"
-  }),
-  ...responsiveRules("heading-5", {
-    "--font-size": "var(--font-heading-5-size)",
-    "--font-line-height": "var(--font-heading-5-line-height)",
-    "--font-letter-spacing": "var(--font-heading-5-letter-spacing)",
-    "--font-icon-size": "var(--font-heading-5-icon-size)",
-    "--font-ascender-height": "var(--font-heading-5-ascender-height)",
-    "--font-descender-height": "var(--font-heading-5-descender-height)"
-  })
-}, kbdRules = {
-  kbd: {
-    "--card-bg-color": "var(--card-kbd-bg-color)",
-    "--card-border-color": "var(--card-kbd-border-color)",
-    "--card-fg-color": "var(--card-kbd-fg-color)",
-    boxShadow: "inset 0 0 0 1px var(--card-border-color)",
-    background: "var(--card-bg-color)",
-    font: "inherit",
-    verticalAlign: "top",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-block"
-      }
-    }
-  }
-}, labelRules = {
-  label: {
-    "--font-weight-regular": "var(--font-label-weight-regular)",
-    "--font-weight-medium": "var(--font-label-weight-medium)",
-    "--font-weight-semibold": "var(--font-label-weight-semibold)",
-    "--font-weight-bold": "var(--font-label-weight-bold)",
-    "--font-family": "var(--font-label-family)",
-    color: "var(--color-fg)",
-    textTransform: "uppercase",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  "label-accent": {
-    "--fg-color": "var(--color-accent-fg)"
-  },
-  "label-muted": {
-    "--fg-color": "var(--color-muted-fg)"
-  },
-  ...responsiveRules("label-0", {
-    "--font-size": "var(--font-label-0-size)",
-    "--font-line-height": "var(--font-label-0-line-height)",
-    "--font-letter-spacing": "var(--font-label-0-letter-spacing)",
-    "--font-icon-size": "var(--font-label-0-icon-size)",
-    "--font-ascender-height": "var(--font-label-0-ascender-height)",
-    "--font-descender-height": "var(--font-label-0-descender-height)"
-  }),
-  ...responsiveRules("label-1", {
-    "--font-size": "var(--font-label-1-size)",
-    "--font-line-height": "var(--font-label-1-line-height)",
-    "--font-letter-spacing": "var(--font-label-1-letter-spacing)",
-    "--font-icon-size": "var(--font-label-1-icon-size)",
-    "--font-ascender-height": "var(--font-label-1-ascender-height)",
-    "--font-descender-height": "var(--font-label-1-descender-height)"
-  }),
-  ...responsiveRules("label-2", {
-    "--font-size": "var(--font-label-2-size)",
-    "--font-line-height": "var(--font-label-2-line-height)",
-    "--font-letter-spacing": "var(--font-label-2-letter-spacing)",
-    "--font-icon-size": "var(--font-label-2-icon-size)",
-    "--font-ascender-height": "var(--font-label-2-ascender-height)",
-    "--font-descender-height": "var(--font-label-2-descender-height)"
-  }),
-  ...responsiveRules("label-3", {
-    "--font-size": "var(--font-label-3-size)",
-    "--font-line-height": "var(--font-label-3-line-height)",
-    "--font-letter-spacing": "var(--font-label-3-letter-spacing)",
-    "--font-icon-size": "var(--font-label-3-icon-size)",
-    "--font-ascender-height": "var(--font-label-3-ascender-height)",
-    "--font-descender-height": "var(--font-label-3-descender-height)"
-  }),
-  ...responsiveRules("label-4", {
-    "--font-size": "var(--font-label-4-size)",
-    "--font-line-height": "var(--font-label-4-line-height)",
-    "--font-letter-spacing": "var(--font-label-4-letter-spacing)",
-    "--font-icon-size": "var(--font-label-4-icon-size)",
-    "--font-ascender-height": "var(--font-label-4-ascender-height)",
-    "--font-descender-height": "var(--font-label-4-descender-height)"
-  }),
-  ...responsiveRules("label-5", {
-    "--font-size": "var(--font-label-5-size)",
-    "--font-line-height": "var(--font-label-5-line-height)",
-    "--font-letter-spacing": "var(--font-label-5-letter-spacing)",
-    "--font-icon-size": "var(--font-label-5-icon-size)",
-    "--font-ascender-height": "var(--font-label-5-ascender-height)",
-    "--font-descender-height": "var(--font-label-5-descender-height)"
-  })
-}, popoverRules = {
-  //
-}, radioRules = {
-  //
-}, selectRules = {
-  //
-}, selectableRules = {
-  selectable: {
-    backgroundColor: "inherit",
-    color: "inherit",
-    "@nest": {
-      '&[data-as="button"]': {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        outline: "none",
-        font: "inherit",
-        textAlign: "inherit",
-        border: 0,
-        // width: '-moz-available',
-        // width: '-webkit-fill-available',
-        width: "stretch"
-      },
-      /* &:is(a) */
-      '&[data-as="a"]': {
-        textDecoration: "none"
-      }
-    }
-  }
-}, spinnerRules = {
-  spinner: {},
-  "animated-spinner-icon": {
-    animation: "spinner-rotate 500ms linear infinite",
-    "@keyframes": {
-      "spinner-rotate": {
-        from: {
-          transform: "rotate(0deg)"
-        },
-        to: {
-          transform: "rotate(360deg)"
-        }
-      }
-    }
-  }
-}, switchRules = {
-  switch: {},
-  "switch-input": {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    opacity: 0,
-    height: "100%",
-    width: "100%",
-    outline: "none",
-    padding: 0,
-    margin: 0,
-    /* Place the input element above the representation element */
-    zIndex: 1
-  },
-  "switch-presentation": {
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
-    // --switch-box-shadow: none;
-    // &:not([hidden]) {
-    //   display: block;
-    // }
-    // position: relative;
-    // width: ${rem(input.switch.width)};
-    // height: ${rem(input.switch.height)};
-    // border-radius: ${rem(input.switch.height / 2)};
-    // /* Make sure it’s not possible to interact with the wrapper element */
-    // pointer-events: none;
-    // &:after {
-    //   content: '';
-    //   display: block;
-    //   position: absolute;
-    //   top: 0;
-    //   left: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   z-index: 1;
-    //   box-shadow: var(--switch-box-shadow);
-    //   border-radius: inherit;
-    // }
-    // /* Focus styles */
-    // input:focus + && {
-    //   --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-    // }
-    // input:focus:not(:focus-visible) + && {
-    //   --switch-box-shadow: none;
-    // }
-    // input:checked + && {
-    //   --switch-bg-color: ${color.input.default.enabled.fg};
-    //   --switch-fg-color: ${color.input.default.enabled.bg};
-    // }
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
-    // input:not([data-read-only]):disabled + && {
-    //   --switch-bg-color: ${color.input.default.disabled.border};
-    //   --switch-fg-color: ${color.input.default.disabled.bg};
-    // }
-    // input[data-read-only]:disabled + && {
-    //   --switch-bg-color: ${color.input.default.readOnly.border};
-    //   --switch-fg-color: ${color.input.default.readOnly.bg};
-    // }
-    // input:checked[data-read-only]:disabled + && {
-    //   --switch-bg-color: ${color.input.default.readOnly.fg};
-    //   --switch-fg-color: ${color.input.default.readOnly.bg};
-    // }
-  },
-  "switch-track": {
-    // &:not([hidden]) {
-    //   display: block;
-    // }
-    // background-color: var(--switch-bg-color);
-    // position: absolute;
-    // left: 0;
-    // top: 0;
-    // width: ${rem(input.switch.width)};
-    // height: ${rem(input.switch.height)};
-    // border-radius: ${rem(input.switch.height / 2)};
-  },
-  "switch-thumb": {
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-    //   &:not([hidden]) {
-    //     display: block;
-    //   }
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
-  }
-}, textRules = {
-  text: {
-    "--font-weight-regular": "var(--font-text-weight-regular)",
-    "--font-weight-medium": "var(--font-text-weight-medium)",
-    "--font-weight-semibold": "var(--font-text-weight-semibold)",
-    "--font-weight-bold": "var(--font-text-weight-bold)",
-    "--font-family": "var(--font-text-family)",
-    color: "var(--color-fg)",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  "text-accent": {
-    "--fg-color": "var(--color-accent-fg)"
-  },
-  "text-muted": {
-    "--fg-color": "var(--color-muted-fg)"
-  },
-  ...responsiveRules("text-0", {
-    "--font-size": "var(--font-text-0-size)",
-    "--font-line-height": "var(--font-text-0-line-height)",
-    "--font-letter-spacing": "var(--font-text-0-letter-spacing)",
-    "--font-icon-size": "var(--font-text-0-icon-size)",
-    "--font-ascender-height": "var(--font-text-0-ascender-height)",
-    "--font-descender-height": "var(--font-text-0-descender-height)"
-  }),
-  ...responsiveRules("text-1", {
-    "--font-size": "var(--font-text-1-size)",
-    "--font-line-height": "var(--font-text-1-line-height)",
-    "--font-letter-spacing": "var(--font-text-1-letter-spacing)",
-    "--font-icon-size": "var(--font-text-1-icon-size)",
-    "--font-ascender-height": "var(--font-text-1-ascender-height)",
-    "--font-descender-height": "var(--font-text-1-descender-height)"
-  }),
-  ...responsiveRules("text-2", {
-    "--font-size": "var(--font-text-2-size)",
-    "--font-line-height": "var(--font-text-2-line-height)",
-    "--font-letter-spacing": "var(--font-text-2-letter-spacing)",
-    "--font-icon-size": "var(--font-text-2-icon-size)",
-    "--font-ascender-height": "var(--font-text-2-ascender-height)",
-    "--font-descender-height": "var(--font-text-2-descender-height)"
-  }),
-  ...responsiveRules("text-3", {
-    "--font-size": "var(--font-text-3-size)",
-    "--font-line-height": "var(--font-text-3-line-height)",
-    "--font-letter-spacing": "var(--font-text-3-letter-spacing)",
-    "--font-icon-size": "var(--font-text-3-icon-size)",
-    "--font-ascender-height": "var(--font-text-3-ascender-height)",
-    "--font-descender-height": "var(--font-text-3-descender-height)"
-  }),
-  ...responsiveRules("text-4", {
-    "--font-size": "var(--font-text-4-size)",
-    "--font-line-height": "var(--font-text-4-line-height)",
-    "--font-letter-spacing": "var(--font-text-4-letter-spacing)",
-    "--font-icon-size": "var(--font-text-4-icon-size)",
-    "--font-ascender-height": "var(--font-text-4-ascender-height)",
-    "--font-descender-height": "var(--font-text-4-descender-height)"
-  })
-}, textAreaRules = {
-  //
-}, textInputRules = {
-  "text-input": {
-    "--font-family": vars.font.text.family
-  },
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`text-input-p-${space}`.replace(".", "_"), {
-      "--padding-top": `calc(${vars.space[space]} - var(--font-ascender-height))`,
-      "--padding-right": vars.space[space],
-      "--padding-bottom": `calc(${vars.space[space]} - var(--font-descender-height))`,
-      "--padding-left": vars.space[space]
-    })
-  }), {}),
-  ...theme.FONT_TEXT_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`text-input-${size}`, {
-      "--font-size": vars.font.text.sizes[size].fontSize,
-      "--font-line-height": vars.font.text.sizes[size].lineHeight,
-      "--font-letter-spacing": vars.font.text.sizes[size].letterSpacing,
-      "--font-ascender-height": vars.font.text.sizes[size].ascenderHeight,
-      "--font-descender-height": vars.font.text.sizes[size].descenderHeight
-    })
-  }), {}),
-  "text-input-element": {
-    appearance: "none",
-    background: "none",
-    border: 0,
-    borderRadius: 0,
-    outline: "none",
-    width: "100%",
-    boxSizing: "border-box",
-    fontFamily: "var(--font-family)",
-    fontSize: "var(--font-size)",
-    fontWeight: "var(--font-weight)",
-    lineHeight: "var(--font-line-height)",
-    letterSpacing: "var(--font-letter-spacing)",
-    margin: 0,
-    position: "relative",
-    zIndex: 1,
-    display: "block",
-    color: "var(--input-fg-color)",
-    paddingTop: "var(--padding-top)",
-    paddingRight: "var(--padding-right)",
-    paddingBottom: "var(--padding-bottom)",
-    paddingLeft: "var(--padding-left)",
-    "--input-fg-color": "var(--color-input-default-enabled-fg)",
-    "@nest": {
-      // NOTE: This is a hack to disable Chrome’s autofill styles
-      "&:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active": {
-        WebkitTextFillColor: "var(--input-fg-color) !important",
-        transition: "background-color 5000s",
-        transitionDelay: "86400s"
-        // 24h
-      },
-      /* &:is(textarea) */
-      // '&[data-as="textarea"]': {
-      //   resize: 'none',
-      // },
-      "&::placeholder": {
-        color: "var(--input-placeholder-color)"
-      }
-      // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-      //   /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //   /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   /* enabled */
-      //   &:not(:invalid):not(:disabled):not(:read-only) {
-      //     /* --input-fg-color: ${color.input.default.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.enabled.placeholder}; */
-      //   }
-      //   /* disabled */
-      //   &:not(:invalid):disabled {
-      //     /* --input-fg-color: ${color.input.default.disabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.disabled.placeholder}; */
-      //   }
-      //   /* invalid */
-      //   &:invalid {
-      //     /* --input-fg-color: ${color.input.invalid.enabled.fg}; */
-      //     /* --input-placeholder-color: ${color.input.invalid.enabled.placeholder}; */
-      //   }
-      //   /* readOnly */
-      //   &:read-only {
-      //     /* --input-fg-color: ${color.input.default.readOnly.fg}; */
-      //     /* --input-placeholder-color: ${color.input.default.readOnly.placeholder}; */
-      //   }
-      // }
-    }
-  },
-  "text-input-prefix": {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    "@nest": {
-      "& > span": {
-        display: "block",
-        margin: "-1px"
-      }
-    }
-  },
-  "text-input-suffix": {
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0,
-    "@nest": {
-      "& > span": {
-        display: "block",
-        margin: "-1px"
-      }
-    }
-  },
-  "text-input-presentation": {
-    "--input-box-shadow": "inset 0 0 0 1px var(--input-border-color)",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: "block",
-    pointerEvents: "none",
-    zIndex: 0,
-    backgroundColor: "var(--input-bg-color)",
-    boxShadow: "var(--input-box-shadow)",
-    "--input-border-color": "var(--color-input-default-enabled-border)"
-    // border-top-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-bottom-left-radius: ${$hasPrefix ? 0 : undefined};
-    // border-top-right-radius: ${$hasSuffix ? 0 : undefined};
-    // border-bottom-right-radius: ${$hasSuffix ? 0 : undefined};
-    // &[data-scheme='${$scheme}'][data-tone='${$tone}'] {
-    //   --card-bg-color: ${color.input.default.enabled.bg};
-    //   --card-fg-color: ${color.input.default.enabled.fg};
-    //   /* enabled */
-    //   *:not(:disabled) + &[data-border] {
-    //     --input-box-shadow: ${focusRingBorderStyle({
-    //       color: color.input.default.enabled.border,
-    //       width: input.border.width,
-    //     })};
-    //   }
-    //   /* invalid */
-    //   *:not(:disabled):invalid + & {
-    //     --card-bg-color: ${color.input.invalid.enabled.bg};
-    //     --card-fg-color: ${color.input.invalid.enabled.fg};
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.enabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* focused */
-    //   *:not(:disabled):focus + & {
-    //     &[data-border] {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({
-    //             border: {color: color.input.default.enabled.border, width: input.border.width},
-    //             focusRing: input.text.focusRing,
-    //           })};
-    //     }
-    //     &:not([data-border]) {
-    //       --input-box-shadow: ${$unstableDisableFocusRing
-    //         ? undefined
-    //         : focusRingStyle({focusRing: input.text.focusRing})};
-    //     }
-    //   }
-    //   /* disabled */
-    //   *:not(:invalid):disabled + & {
-    //     --card-bg-color: ${color.input.default.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.default.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.default.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   *:invalid:disabled + & {
-    //     --card-bg-color: ${color.input.invalid.disabled.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.disabled.fg} !important;
-    //     --card-icon-color: ${color.input.invalid.disabled.fg} !important;
-    //     &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.disabled.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    //   /* readOnly */
-    //   *:not(:invalid):read-only + & {
-    //     --card-bg-color: ${color.input.default.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.default.readOnly.fg} !important;
-    //   }
-    //   *:invalid:read-only + & {
-    //     --card-bg-color: ${color.input.invalid.readOnly.bg} !important;
-    //     --card-fg-color: ${color.input.invalid.readOnly.fg} !important;
-    //   }
-    //   /* hovered */
-    //   @media (hover: hover) {
-    //     *:not(:disabled):not(:read-only):not(:invalid):hover + & {
-    //       --card-bg-color: ${color.input.default.hovered.bg};
-    //       --card-fg-color: ${color.input.default.hovered.fg};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):hover + & {
-    //       --card-bg-color: ${color.input.invalid.hovered.bg};
-    //       --card-fg-color: ${color.input.invalid.hovered.fg};
-    //     }
-    //     *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.default.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //     *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {
-    //       --input-box-shadow: ${focusRingBorderStyle({
-    //         color: color.input.invalid.hovered.border,
-    //         width: input.border.width,
-    //       })};
-    //     }
-    //   }
-    // }
-  }
-}, tokenRules = {
-  token: {
-    "@nest": {
-      "&.atrule": {
-        color: vars.color.syntax.atrule
-      },
-      "&.attr-name": {
-        color: vars.color.syntax.attrName
-      },
-      "&.attr-value": {
-        color: vars.color.syntax.attrValue
-      },
-      "&.attribute": {
-        color: vars.color.syntax.attribute
-      },
-      "&.boolean": {
-        color: vars.color.syntax.boolean
-      },
-      "&.builtin": {
-        color: vars.color.syntax.builtin
-      },
-      "&.cdata": {
-        color: vars.color.syntax.cdata
-      },
-      "&.char": {
-        color: vars.color.syntax.char
-      },
-      "&.class": {
-        color: vars.color.syntax.class
-      },
-      "&.class-name": {
-        color: vars.color.syntax.className
-      },
-      "&.comment": {
-        color: vars.color.syntax.comment
-      },
-      "&.constant": {
-        color: vars.color.syntax.constant
-      },
-      "&.deleted": {
-        color: vars.color.syntax.deleted
-      },
-      "&.doctype": {
-        color: vars.color.syntax.doctype
-      },
-      "&.entity": {
-        color: vars.color.syntax.entity
-      },
-      "&.function": {
-        color: vars.color.syntax.function
-      },
-      "&.hexcode": {
-        color: vars.color.syntax.hexcode
-      },
-      "&.id": {
-        color: vars.color.syntax.id
-      },
-      "&.important": {
-        color: vars.color.syntax.important
-      },
-      "&.inserted": {
-        color: vars.color.syntax.inserted
-      },
-      "&.keyword": {
-        color: vars.color.syntax.keyword
-      },
-      "&.number": {
-        color: vars.color.syntax.number
-      },
-      "&.operator": {
-        color: vars.color.syntax.operator
-      },
-      "&.prolog": {
-        color: vars.color.syntax.prolog
-      },
-      "&.property": {
-        color: vars.color.syntax.property
-      },
-      "&.pseudo-class": {
-        color: vars.color.syntax.pseudoClass
-      },
-      "&.pseudo-element": {
-        color: vars.color.syntax.pseudoElement
-      },
-      "&.punctuation": {
-        color: vars.color.syntax.punctuation
-      },
-      "&.regex": {
-        color: vars.color.syntax.regex
-      },
-      "&.selector": {
-        color: vars.color.syntax.selector
-      },
-      "&.string": {
-        color: vars.color.syntax.string
-      },
-      "&.symbol": {
-        color: vars.color.syntax.symbol
-      },
-      "&.tag": {
-        color: vars.color.syntax.tag
-      },
-      "&.unit": {
-        color: vars.color.syntax.unit
-      },
-      "&.url": {
-        color: vars.color.syntax.url
-      },
-      "&.variable": {
-        color: vars.color.syntax.variable
-      }
-    }
-  }
-}, tooltipRules = {
-  tooltip: {
-    pointerEvents: "none"
-  },
-  "tooltip-card": {
-    "@nest": {
-      "&[data-animate] > *": {
-        // opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-        opacity: "var(--motion-content-opacity, 1)",
-        willChange: "opacity"
-      }
-    }
-  }
-}, borderRules = {
-  ...responsiveRules("border", {
-    border: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-t", {
-    borderTop: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-r", {
-    borderRight: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-b", {
-    borderBottom: "1px solid var(--card-border-color)"
-  }),
-  ...responsiveRules("border-l", {
-    borderLeft: "1px solid var(--card-border-color)"
-  })
-}, displayRules = {
-  ...responsiveRules("block", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "block"
-      }
-    }
-  }),
-  ...responsiveRules("inline-block", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-block"
-      }
-    }
-  }),
-  ...responsiveRules("flex", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "flex"
-      }
-    }
-  }),
-  ...responsiveRules("inline-flex", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-flex"
-      }
-    }
-  }),
-  ...responsiveRules("grid", {
-    gridTemplateRows: "auto",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "grid"
-      }
-    }
-  }),
-  ...responsiveRules("grid-flex", {
-    gridTemplateRows: "auto",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "grid-flex"
-      }
-    }
-  }),
-  ...responsiveRules("none", {
-    "@nest": {
-      "&:not([hidden])": {
-        display: "none"
-      }
-    }
-  })
-}, flexRules = {
-  // direction
-  ...responsiveRules("row", {
-    flexDirection: "row"
-  }),
-  ...responsiveRules("column", {
-    flexDirection: "column"
-  }),
-  // align
-  ...responsiveRules("align-flex-start", {
-    alignItems: "flex-start"
-  }),
-  ...responsiveRules("align-flex-end", {
-    alignItems: "end"
-  }),
-  ...responsiveRules("align-center", {
-    alignItems: "center"
-  }),
-  ...responsiveRules("align-stretch", {
-    alignItems: "stretch"
-  }),
-  ...responsiveRules("align-baseline", {
-    alignItems: "baseline"
-  }),
-  // justify
-  ...responsiveRules("justify-flex-start", {
-    justifyContent: "flex-start"
-  }),
-  ...responsiveRules("justify-flex-end", {
-    justifyContent: "flex-end"
-  }),
-  ...responsiveRules("justify-center", {
-    justifyContent: "center"
-  }),
-  ...responsiveRules("justify-between", {
-    justifyContent: "space-between"
-  }),
-  ...responsiveRules("justify-around", {
-    justifyContent: "space-around"
-  }),
-  ...responsiveRules("justify-evenly", {
-    justifyContent: "space-evenly"
-  }),
-  // wrap
-  ...responsiveRules("wrap-nowrap", {
-    flexWrap: "nowrap"
-  }),
-  ...responsiveRules("wrap-wrap", {
-    flexWrap: "wrap"
-  }),
-  ...responsiveRules("wrap-reverse", {
-    flexWrap: "wrap-reverse"
-  })
-}, flexItemRules = {
-  ...responsiveRules("flex-none", {
-    flex: "none"
-  }),
-  ...responsiveRules("flex-1", {
-    flex: 1
-  }),
-  ...responsiveRules("flex-2", {
-    flex: 2
-  }),
-  ...responsiveRules("flex-3", {
-    flex: 3
-  }),
-  ...responsiveRules("flex-4", {
-    flex: 4
-  }),
-  ...responsiveRules("flex-5", {
-    flex: 5
-  })
-}, fontRules = {
-  font: {
-    position: "relative",
-    fontFamily: "var(--font-family)",
-    fontSize: "var(--font-size)",
-    lineHeight: "var(--font-line-height)",
-    letterSpacing: "var(--font-letter-spacing)",
-    fontWeight: "var(--font-weight)",
-    transform: "translateY(var(--font-descender-height))",
-    padding: "1px 0",
-    margin: "0",
-    "--font-cap-height": "calc(var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height))",
-    "--font-icon-offset": "calc((var(--font-cap-height) - var(--font-icon-size)) / 2)",
-    "--font-weight": "var(--font-weight-regular)",
-    "@nest": {
-      "&:before": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
-      },
-      "&:after": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginBottom: "-1px"
-      },
-      "& svg": {
-        // Certain popular CSS libraries changes the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: "inline"
-      },
-      // todo
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
-      "& [data-sanity-icon]": {
-        fontSize: "var(--font-icon-size)",
-        margin: "var(--font-icon-offset)",
-        vectorEffect: "non-scaling-stroke"
-      }
-    }
-  },
-  "font-regular": {
-    "--font-weight": "var(--font-weight-regular)"
-  },
-  "font-medium": {
-    "--font-weight": "var(--font-weight-medium)"
-  },
-  "font-semibold": {
-    "--font-weight": "var(--font-weight-semibold)"
-  },
-  "font-bold": {
-    "--font-weight": "var(--font-weight-bold)"
-  },
-  // align
-  ...responsiveRules("text-align-initial", {
-    textAlign: "initial"
-  }),
-  ...responsiveRules("text-align-left", {
-    textAlign: "left"
-  }),
-  ...responsiveRules("text-align-center", {
-    textAlign: "center"
-  }),
-  ...responsiveRules("text-align-right", {
-    textAlign: "right"
-  }),
-  ...responsiveRules("text-align-justify", {
-    textAlign: "justify"
-  })
-}, gapRules = {
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`g-${space}`.replace(".", "_"), {
-      gap: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gx-${space}`.replace(".", "_"), {
-      columnGap: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gy-${space}`.replace(".", "_"), {
-      rowGap: vars.space[space]
-    })
-  }), {})
-}, gridRules = {
-  // autoCols
-  ...responsiveRules("auto-cols-auto", {
-    gridAutoColumns: "auto"
-  }),
-  ...responsiveRules("auto-cols-min", {
-    gridAutoColumns: "min"
-  }),
-  ...responsiveRules("auto-cols-max", {
-    gridAutoColumns: "max"
-  }),
-  ...responsiveRules("auto-cols-fr", {
-    gridAutoColumns: "fr"
-  }),
-  // autoFlow
-  ...responsiveRules("auto-flow-row", {
-    gridAutoFlow: "row"
-  }),
-  ...responsiveRules("auto-flow-column", {
-    gridAutoFlow: "column"
-  }),
-  ...responsiveRules("auto-flow-row-dense", {
-    gridAutoFlow: "row dense"
-  }),
-  ...responsiveRules("auto-flow-column-dense", {
-    gridAutoFlow: "column dense"
-  }),
-  // autoRows
-  ...responsiveRules("auto-rows-auto", {
-    gridAutoRows: "auto"
-  }),
-  ...responsiveRules("auto-rows-min", {
-    gridAutoRows: "min-content"
-  }),
-  ...responsiveRules("auto-rows-max", {
-    gridAutoRows: "max-content"
-  }),
-  ...responsiveRules("auto-rows-fr", {
-    gridAutoRows: "minmax(0, 1fr)"
-  }),
-  // columns
-  ...responsiveRules("columns-1", {
-    gridTemplateColumns: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("columns-2", {
-    gridTemplateColumns: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("columns-3", {
-    gridTemplateColumns: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("columns-4", {
-    gridTemplateColumns: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("columns-5", {
-    gridTemplateColumns: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("columns-6", {
-    gridTemplateColumns: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("columns-7", {
-    gridTemplateColumns: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("columns-8", {
-    gridTemplateColumns: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("columns-9", {
-    gridTemplateColumns: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("columns-10", {
-    gridTemplateColumns: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("columns-12", {
-    gridTemplateColumns: "repeat(12, 1fr)"
-  }),
-  // rows
-  ...responsiveRules("rows-1", {
-    gridTemplateRows: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("rows-2", {
-    gridTemplateRows: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("rows-3", {
-    gridTemplateRows: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("rows-4", {
-    gridTemplateRows: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("rows-5", {
-    gridTemplateRows: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("rows-6", {
-    gridTemplateRows: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("rows-7", {
-    gridTemplateRows: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("rows-8", {
-    gridTemplateRows: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("rows-9", {
-    gridTemplateRows: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("rows-10", {
-    gridTemplateRows: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("rows-12", {
-    gridTemplateRows: "repeat(12, 1fr)"
-  })
-}, gridItemRules = {
-  // column
-  ...responsiveRules("col-auto", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-full", {
-    gridColumn: "1 / -1"
-  }),
-  ...responsiveRules("col-1", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-2", {
-    gridColumn: "span 2 / span 2"
-  }),
-  ...responsiveRules("col-3", {
-    gridColumn: "span 3 / span 3"
-  }),
-  ...responsiveRules("col-4", {
-    gridColumn: "span 4 / span 4"
-  }),
-  ...responsiveRules("col-5", {
-    gridColumn: "span 5 / span 5"
-  }),
-  ...responsiveRules("col-6", {
-    gridColumn: "span 6 / span 6"
-  }),
-  ...responsiveRules("col-7", {
-    gridColumn: "span 7 / span 7"
-  }),
-  ...responsiveRules("col-8", {
-    gridColumn: "span 8 / span 8"
-  }),
-  ...responsiveRules("col-9", {
-    gridColumn: "span 9 / span 9"
-  }),
-  ...responsiveRules("col-10", {
-    gridColumn: "span 10 / span 10"
-  }),
-  ...responsiveRules("col-11", {
-    gridColumn: "span 11 / span 11"
-  }),
-  ...responsiveRules("col-12", {
-    gridColumn: "span 12 / span 12"
-  }),
-  // columnStart
-  ...responsiveRules("col-start-auto", {
-    gridColumnStart: "auto"
-  }),
-  ...responsiveRules("col-start-1", {
-    gridColumnStart: "1"
-  }),
-  ...responsiveRules("col-start-2", {
-    gridColumnStart: "2"
-  }),
-  ...responsiveRules("col-start-3", {
-    gridColumnStart: "3"
-  }),
-  ...responsiveRules("col-start-4", {
-    gridColumnStart: "4"
-  }),
-  ...responsiveRules("col-start-5", {
-    gridColumnStart: "5"
-  }),
-  ...responsiveRules("col-start-6", {
-    gridColumnStart: "6"
-  }),
-  ...responsiveRules("col-start-7", {
-    gridColumnStart: "7"
-  }),
-  ...responsiveRules("col-start-8", {
-    gridColumnStart: "8"
-  }),
-  ...responsiveRules("col-start-9", {
-    gridColumnStart: "9"
-  }),
-  ...responsiveRules("col-start-10", {
-    gridColumnStart: "10"
-  }),
-  ...responsiveRules("col-start-11", {
-    gridColumnStart: "11"
-  }),
-  ...responsiveRules("col-start-12", {
-    gridColumnStart: "12"
-  }),
-  // columnEnd
-  ...responsiveRules("col-end-auto", {
-    gridColumnEnd: "auto"
-  }),
-  ...responsiveRules("col-end-1", {
-    gridColumnEnd: "1"
-  }),
-  ...responsiveRules("col-end-2", {
-    gridColumnEnd: "2"
-  }),
-  ...responsiveRules("col-end-3", {
-    gridColumnEnd: "3"
-  }),
-  ...responsiveRules("col-end-4", {
-    gridColumnEnd: "4"
-  }),
-  ...responsiveRules("col-end-5", {
-    gridColumnEnd: "5"
-  }),
-  ...responsiveRules("col-end-6", {
-    gridColumnEnd: "6"
-  }),
-  ...responsiveRules("col-end-7", {
-    gridColumnEnd: "7"
-  }),
-  ...responsiveRules("col-end-8", {
-    gridColumnEnd: "8"
-  }),
-  ...responsiveRules("col-end-9", {
-    gridColumnEnd: "9"
-  }),
-  ...responsiveRules("col-end-10", {
-    gridColumnEnd: "10"
-  }),
-  ...responsiveRules("col-end-11", {
-    gridColumnEnd: "11"
-  }),
-  ...responsiveRules("col-end-12", {
-    gridColumnEnd: "12"
-  }),
-  // row
-  ...responsiveRules("row-auto", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-full", {
-    gridRow: "1 / -1"
-  }),
-  ...responsiveRules("row-1", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-2", {
-    gridRow: "span 2 / span 2"
-  }),
-  ...responsiveRules("row-3", {
-    gridRow: "span 3 / span 3"
-  }),
-  ...responsiveRules("row-4", {
-    gridRow: "span 4 / span 4"
-  }),
-  ...responsiveRules("row-5", {
-    gridRow: "span 5 / span 5"
-  }),
-  ...responsiveRules("row-6", {
-    gridRow: "span 6 / span 6"
-  }),
-  ...responsiveRules("row-7", {
-    gridRow: "span 7 / span 7"
-  }),
-  ...responsiveRules("row-8", {
-    gridRow: "span 8 / span 8"
-  }),
-  ...responsiveRules("row-9", {
-    gridRow: "span 9 / span 9"
-  }),
-  ...responsiveRules("row-10", {
-    gridRow: "span 10 / span 10"
-  }),
-  ...responsiveRules("row-11", {
-    gridRow: "span 11 / span 11"
-  }),
-  ...responsiveRules("row-12", {
-    gridRow: "span 12 / span 12"
-  }),
-  // rowStart
-  ...responsiveRules("row-start-auto", {
-    gridRowStart: "auto"
-  }),
-  ...responsiveRules("row-start-1", {
-    gridRowStart: "1"
-  }),
-  ...responsiveRules("row-start-2", {
-    gridRowStart: "2"
-  }),
-  ...responsiveRules("row-start-3", {
-    gridRowStart: "3"
-  }),
-  ...responsiveRules("row-start-4", {
-    gridRowStart: "4"
-  }),
-  ...responsiveRules("row-start-5", {
-    gridRowStart: "5"
-  }),
-  ...responsiveRules("row-start-6", {
-    gridRowStart: "6"
-  }),
-  ...responsiveRules("row-start-7", {
-    gridRowStart: "7"
-  }),
-  ...responsiveRules("row-start-8", {
-    gridRowStart: "8"
-  }),
-  ...responsiveRules("row-start-9", {
-    gridRowStart: "9"
-  }),
-  ...responsiveRules("row-start-10", {
-    gridRowStart: "10"
-  }),
-  ...responsiveRules("row-start-11", {
-    gridRowStart: "11"
-  }),
-  ...responsiveRules("row-start-12", {
-    gridRowStart: "12"
-  }),
-  // rowEnd
-  ...responsiveRules("row-end-auto", {
-    gridRowEnd: "auto"
-  }),
-  ...responsiveRules("row-end-1", {
-    gridRowEnd: "1"
-  }),
-  ...responsiveRules("row-end-2", {
-    gridRowEnd: "2"
-  }),
-  ...responsiveRules("row-end-3", {
-    gridRowEnd: "3"
-  }),
-  ...responsiveRules("row-end-4", {
-    gridRowEnd: "4"
-  }),
-  ...responsiveRules("row-end-5", {
-    gridRowEnd: "5"
-  }),
-  ...responsiveRules("row-end-6", {
-    gridRowEnd: "6"
-  }),
-  ...responsiveRules("row-end-7", {
-    gridRowEnd: "7"
-  }),
-  ...responsiveRules("row-end-8", {
-    gridRowEnd: "8"
-  }),
-  ...responsiveRules("row-end-9", {
-    gridRowEnd: "9"
-  }),
-  ...responsiveRules("row-end-10", {
-    gridRowEnd: "10"
-  }),
-  ...responsiveRules("row-end-11", {
-    gridRowEnd: "11"
-  }),
-  ...responsiveRules("row-end-12", {
-    gridRowEnd: "12"
-  })
-}, heightRules = {
-  ...responsiveRules("h-fill", {
-    height: "100%"
-  }),
-  ...responsiveRules("h-stretch", {
-    height: "stretch"
-  })
-}, marginRules = {
-  // NOTE: order matters
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`m-${space}`.replace(".", "_"), {
-      margin: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mx-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space],
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`my-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space],
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mt-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mr-${space}`.replace(".", "_"), {
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mb-${space}`.replace(".", "_"), {
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`ml-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space]
-    })
-  }), {})
-}, maxWidthRules = {
-  ...responsiveRules("max-w-0", {
-    maxWidth: "var(--container-0)"
-  }),
-  ...responsiveRules("max-w-1", {
-    maxWidth: "var(--container-1)"
-  }),
-  ...responsiveRules("max-w-2", {
-    maxWidth: "var(--container-2)"
-  }),
-  ...responsiveRules("max-w-3", {
-    maxWidth: "var(--container-3)"
-  }),
-  ...responsiveRules("max-w-4", {
-    maxWidth: "var(--container-4)"
-  }),
-  ...responsiveRules("max-w-5", {
-    maxWidth: "var(--container-5)"
-  }),
-  ...responsiveRules("max-w-auto", {
-    maxWidth: "none"
-  }),
-  ...responsiveRules("max-w-fill", {
-    maxWidth: "100%"
-  })
-}, outlineRules = {
-  "outline-none": {
-    outline: "none"
-  }
-}, overflowRules = {
-  ...responsiveRules("overflow-visible", {
-    overflow: "visible"
-  }),
-  ...responsiveRules("overflow-hidden", {
-    overflow: "hidden"
-  }),
-  ...responsiveRules("overflow-scroll", {
-    overflow: "scroll"
-  }),
-  ...responsiveRules("overflow-auto", {
-    overflow: "auto"
-  })
-}, paddingRules = {
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`p-${space}`.replace(".", "_"), {
-      padding: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`px-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space],
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`py-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space],
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pt-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pr-${space}`.replace(".", "_"), {
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pb-${space}`.replace(".", "_"), {
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...theme.SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pl-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space]
-    })
-  }), {})
-}, pointerEventsRules = {
-  "pointer-events-none": {
-    pointerEvents: "none"
-  },
-  "pointer-events-auto": {
-    pointerEvents: "auto"
-  }
-}, positionRules = {
-  ...responsiveRules("pos-absolute", {
-    position: "absolute"
-  }),
-  ...responsiveRules("pos-fixed", {
-    position: "fixed"
-  }),
-  ...responsiveRules("pos-relative", {
-    position: "relative"
-  }),
-  ...responsiveRules("pos-static", {
-    position: "static"
-  }),
-  ...responsiveRules("pos-sticky", {
-    position: "sticky"
-  }),
-  ...responsiveRules("inset-0", {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  })
-}, radiusRules = {
-  ...responsiveRules("r-0", {
-    borderRadius: "var(--radius-0)"
-  }),
-  ...responsiveRules("r-1", {
-    borderRadius: "var(--radius-1)"
-  }),
-  ...responsiveRules("r-2", {
-    borderRadius: "var(--radius-2)"
-  }),
-  ...responsiveRules("r-3", {
-    borderRadius: "var(--radius-3)"
-  }),
-  ...responsiveRules("r-4", {
-    borderRadius: "var(--radius-4)"
-  }),
-  ...responsiveRules("r-5", {
-    borderRadius: "var(--radius-5)"
-  }),
-  ...responsiveRules("r-6", {
-    borderRadius: "var(--radius-6)"
-  }),
-  ...responsiveRules("r-round", {
-    borderRadius: "9999px"
-  })
-}, shadowRules = {
-  ...responsiveRules("shadow-0", {
-    boxShadow: "none"
-  }),
-  ...responsiveRules("shadow-1", {
-    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-1-umbra) var(--color-shadow-umbra)", "var(--shadow-1-penumbra) var(--color-shadow-penumbra)", "var(--shadow-1-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-2", {
-    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-2-umbra) var(--color-shadow-umbra)", "var(--shadow-2-penumbra) var(--color-shadow-penumbra)", "var(--shadow-2-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-3", {
-    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-3-umbra) var(--color-shadow-umbra)", "var(--shadow-3-penumbra) var(--color-shadow-penumbra)", "var(--shadow-3-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-4", {
-    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-4-umbra) var(--color-shadow-umbra)", "var(--shadow-4-penumbra) var(--color-shadow-penumbra)", "var(--shadow-4-ambient) var(--color-shadow-ambient)"].join(", ")
-  }),
-  ...responsiveRules("shadow-5", {
-    boxShadow: ["var(--card-shadow-outline) var(--color-shadow-outline)", "var(--shadow-5-umbra) var(--color-shadow-umbra)", "var(--shadow-5-penumbra) var(--color-shadow-penumbra)", "var(--shadow-5-ambient) var(--color-shadow-ambient)"].join(", ")
-  })
-}, widthRules = {
-  "w-fill": {
-    width: ["-moz-available", "-webkit-fill-available", "stretch"]
-  }
-}, rules = {
-  // styles
-  ...borderRules,
-  ...displayRules,
-  ...flexItemRules,
-  ...flexRules,
-  ...fontRules,
-  ...gapRules,
-  ...gridItemRules,
-  ...gridRules,
-  ...heightRules,
-  ...marginRules,
-  ...outlineRules,
-  ...overflowRules,
-  ...paddingRules,
-  ...pointerEventsRules,
-  ...positionRules,
-  ...radiusRules,
-  ...shadowRules,
-  ...widthRules,
-  // primitives
-  ...avatarRules,
-  ...badgeRules,
-  ...boxRules,
-  ...buttonRules,
-  ...cardRules,
-  ...checkboxRules,
-  ...codeRules,
-  ...containerRules,
-  ...headingRules,
-  ...kbdRules,
-  ...labelRules,
-  ...maxWidthRules,
-  ...popoverRules,
-  ...radioRules,
-  ...selectRules,
-  ...selectableRules,
-  ...spinnerRules,
-  ...switchRules,
-  ...textAreaRules,
-  ...textInputRules,
-  ...textRules,
-  ...tokenRules,
-  ...tooltipRules,
-  // components
-  ...breadcrumbsRules,
-  ...dialogRules,
-  ...menuRules,
-  ...skeletonRules
-};
-function compileRule(selector, props) {
-  return compileProperties(selector, props) + compileNestedRules(selector, props["@nest"]);
-}
-function compileProperties(selector, props) {
-  let css = "{";
-  for (const key in props) {
-    if (key === "@keyframes" || key === "@media" || key === "@nest") continue;
-    const value = props[key], valueArr = Array.isArray(value) ? value : [value];
-    for (const v of valueArr)
-      css += toSnakeCase(key) + ":" + v + ";";
-  }
-  return css.length === 1 ? "" : selector + css + "}";
-}
-function compileNestedRules(selector, props) {
-  if (!props) return "";
-  let css = "";
-  for (const key in props) {
-    const value = props[key];
-    css += `
-` + key.replace(/&/g, selector) + compileProperties(selector, value).substring(selector.length);
-  }
-  return css;
-}
-function compileMediaQueryRule(query, rules2) {
-  let css = `@media ${query}{`;
-  for (const key in rules2)
-    css += `
-  ` + compileRule(`.${key}`.replace(/:/g, "\\:"), rules2[key]);
-  return css + `
-}`;
-}
-function toSnakeCase(value) {
-  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-}
-function compileRules(rules2) {
-  let css = "";
-  const keyframes = {}, mediaQueries = {};
-  for (const [className, props] of Object.entries(rules2)) {
-    const selectorCss = compileRule(`.${className}`.replace(/:/g, "\\:"), props);
-    if (css += selectorCss ? `${selectorCss}
-` : "", props["@keyframes"])
-      for (const name in props["@keyframes"])
-        keyframes[name] = props["@keyframes"][name];
-    if (props["@media"])
-      for (const key in props["@media"])
-        mediaQueries[key] || (mediaQueries[key] = {}), mediaQueries[key][className] = props["@media"][key];
-  }
-  for (const [name, value] of Object.entries(keyframes)) {
-    let keyframesCss = `@keyframes ${name} {
-`;
-    for (const [key, props] of Object.entries(value))
-      keyframesCss += `  ${key}`, keyframesCss += compileRule("", props).replace(/\n/g, `
-    `) + `
-`;
-    keyframesCss += `
-}
-`, css += keyframesCss;
-  }
-  for (const [query, queryRules] of Object.entries(mediaQueries))
-    css += compileMediaQueryRule(query, queryRules) + `
-`;
-  return css.replace(/\n{2,}/g, `
-`).trimStart();
-}
-function compileSystem() {
-  return compileRules(rules);
-}
-function rem(value) {
-  return value === 0 ? "0" : `${value / 16}rem`;
-}
-function px(value) {
-  return value === 0 ? "0" : `${value}px`;
-}
-function toBoxShadow(value) {
-  return value ? value.map((n) => px(n)).join(" ") : "none";
-}
-function countThemeEntries(obj) {
-  let count = 0;
-  if (isArray(obj))
-    for (let i = 0; i < obj.length; i++) {
-      const value = obj[i];
-      isRecord(value) || isArray(value) ? count += countThemeEntries(value) : count++;
-    }
-  else
-    for (const [key, value] of Object.entries(obj))
-      key.startsWith("_") || (isRecord(value) || isArray(value) ? count += countThemeEntries(value) : count++);
-  return count;
-}
-function compileTheme(theme2) {
-  for (const [key, val] of Object.entries(theme2.color.light.default))
-    (isRecord(val) || isArray(val)) && console.log(key, countThemeEntries(val));
-  return [compileRule(":root", {
-    [varNames.avatar.focusRing.offset]: px(theme2.avatar.focusRing.offset),
-    [varNames.avatar.focusRing.width]: px(theme2.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(theme2.avatar.sizes[0].distance),
-    "--avatar-0-size": px(theme2.avatar.sizes[0].size),
-    "--avatar-1-distance": px(theme2.avatar.sizes[1].distance),
-    "--avatar-1-size": px(theme2.avatar.sizes[1].size),
-    "--avatar-2-distance": px(theme2.avatar.sizes[2].distance),
-    "--avatar-2-size": px(theme2.avatar.sizes[2].size),
-    "--avatar-3-distance": px(theme2.avatar.sizes[3].distance),
-    "--avatar-3-size": px(theme2.avatar.sizes[3].size),
-    "--button-border-width": px(theme2.button.border.width),
-    "--button-focus-ring-offset": px(theme2.button.focusRing.offset),
-    "--button-focus-ring-width": px(theme2.button.focusRing.width),
-    "--button-text-weight": `${theme2.button.textWeight}`,
-    "--card-border-width": px(theme2.card.border.width),
-    "--card-focus-ring-offset": px(theme2.card.focusRing.offset),
-    "--card-focus-ring-width": px(theme2.card.focusRing.width),
-    "--card-shadow-outline": `0 0 0 ${px(theme2.card.shadow.outline)}`,
-    "--font-code-family": theme2.font.code.family,
-    "--font-code-weight-regular": `${theme2.font.code.weights.regular}`,
-    "--font-code-weight-medium": `${theme2.font.code.weights.medium}`,
-    "--font-code-weight-semibold": `${theme2.font.code.weights.semibold}`,
-    "--font-code-weight-bold": `${theme2.font.code.weights.bold}`,
-    "--font-code-0-size": rem(theme2.font.code.sizes[0].fontSize),
-    "--font-code-0-line-height": rem(theme2.font.code.sizes[0].lineHeight),
-    "--font-code-0-ascender-height": px(theme2.font.code.sizes[0].ascenderHeight),
-    "--font-code-0-descender-height": px(theme2.font.code.sizes[0].descenderHeight),
-    "--font-code-0-letter-spacing": px(theme2.font.code.sizes[0].letterSpacing),
-    "--font-code-0-icon-size": px(theme2.font.code.sizes[0].iconSize),
-    "--font-code-1-size": rem(theme2.font.code.sizes[1].fontSize),
-    "--font-code-1-line-height": px(theme2.font.code.sizes[1].lineHeight),
-    "--font-code-1-ascender-height": px(theme2.font.code.sizes[1].ascenderHeight),
-    "--font-code-1-descender-height": px(theme2.font.code.sizes[1].descenderHeight),
-    "--font-code-1-letter-spacing": px(theme2.font.code.sizes[1].letterSpacing),
-    "--font-code-1-icon-size": px(theme2.font.code.sizes[1].iconSize),
-    "--font-code-2-size": rem(theme2.font.code.sizes[2].fontSize),
-    "--font-code-2-line-height": rem(theme2.font.code.sizes[2].lineHeight),
-    "--font-code-2-ascender-height": px(theme2.font.code.sizes[2].ascenderHeight),
-    "--font-code-2-descender-height": px(theme2.font.code.sizes[2].descenderHeight),
-    "--font-code-2-letter-spacing": px(theme2.font.code.sizes[2].letterSpacing),
-    "--font-code-2-icon-size": px(theme2.font.code.sizes[2].iconSize),
-    "--font-code-3-size": rem(theme2.font.code.sizes[3].fontSize),
-    "--font-code-3-line-height": rem(theme2.font.code.sizes[3].lineHeight),
-    "--font-code-3-ascender-height": px(theme2.font.code.sizes[3].ascenderHeight),
-    "--font-code-3-descender-height": px(theme2.font.code.sizes[3].descenderHeight),
-    "--font-code-3-letter-spacing": px(theme2.font.code.sizes[3].letterSpacing),
-    "--font-code-3-icon-size": px(theme2.font.code.sizes[3].iconSize),
-    "--font-code-4-size": rem(theme2.font.code.sizes[4].fontSize),
-    "--font-code-4-line-height": rem(theme2.font.code.sizes[4].lineHeight),
-    "--font-code-4-ascender-height": px(theme2.font.code.sizes[4].ascenderHeight),
-    "--font-code-4-descender-height": px(theme2.font.code.sizes[4].descenderHeight),
-    "--font-code-4-letter-spacing": px(theme2.font.code.sizes[4].letterSpacing),
-    "--font-code-4-icon-size": px(theme2.font.code.sizes[4].iconSize),
-    "--font-heading-family": theme2.font.heading.family,
-    "--font-heading-weight-regular": `${theme2.font.heading.weights.regular}`,
-    "--font-heading-weight-medium": `${theme2.font.heading.weights.medium}`,
-    "--font-heading-weight-semibold": `${theme2.font.heading.weights.semibold}`,
-    "--font-heading-weight-bold": `${theme2.font.heading.weights.bold}`,
-    "--font-heading-0-size": rem(theme2.font.heading.sizes[0].fontSize),
-    "--font-heading-0-line-height": rem(theme2.font.heading.sizes[0].lineHeight),
-    "--font-heading-0-ascender-height": px(theme2.font.heading.sizes[0].ascenderHeight),
-    "--font-heading-0-descender-height": px(theme2.font.heading.sizes[0].descenderHeight),
-    "--font-heading-0-letter-spacing": px(theme2.font.heading.sizes[0].letterSpacing),
-    "--font-heading-0-icon-size": px(theme2.font.heading.sizes[0].iconSize),
-    "--font-heading-1-size": rem(theme2.font.heading.sizes[1].fontSize),
-    "--font-heading-1-line-height": rem(theme2.font.heading.sizes[1].lineHeight),
-    "--font-heading-1-ascender-height": px(theme2.font.heading.sizes[1].ascenderHeight),
-    "--font-heading-1-descender-height": px(theme2.font.heading.sizes[1].descenderHeight),
-    "--font-heading-1-letter-spacing": px(theme2.font.heading.sizes[1].letterSpacing),
-    "--font-heading-1-icon-size": px(theme2.font.heading.sizes[1].iconSize),
-    "--font-heading-2-size": rem(theme2.font.heading.sizes[2].fontSize),
-    "--font-heading-2-line-height": rem(theme2.font.heading.sizes[2].lineHeight),
-    "--font-heading-2-ascender-height": px(theme2.font.heading.sizes[2].ascenderHeight),
-    "--font-heading-2-descender-height": px(theme2.font.heading.sizes[2].descenderHeight),
-    "--font-heading-2-letter-spacing": px(theme2.font.heading.sizes[2].letterSpacing),
-    "--font-heading-2-icon-size": px(theme2.font.heading.sizes[2].iconSize),
-    "--font-heading-3-size": rem(theme2.font.heading.sizes[3].fontSize),
-    "--font-heading-3-line-height": rem(theme2.font.heading.sizes[3].lineHeight),
-    "--font-heading-3-ascender-height": px(theme2.font.heading.sizes[3].ascenderHeight),
-    "--font-heading-3-descender-height": px(theme2.font.heading.sizes[3].descenderHeight),
-    "--font-heading-3-letter-spacing": px(theme2.font.heading.sizes[3].letterSpacing),
-    "--font-heading-3-icon-size": px(theme2.font.heading.sizes[3].iconSize),
-    "--font-heading-4-size": rem(theme2.font.heading.sizes[4].fontSize),
-    "--font-heading-4-line-height": rem(theme2.font.heading.sizes[4].lineHeight),
-    "--font-heading-4-ascender-height": px(theme2.font.heading.sizes[4].ascenderHeight),
-    "--font-heading-4-descender-height": px(theme2.font.heading.sizes[4].descenderHeight),
-    "--font-heading-4-letter-spacing": px(theme2.font.heading.sizes[4].letterSpacing),
-    "--font-heading-4-icon-size": px(theme2.font.heading.sizes[4].iconSize),
-    "--font-heading-5-size": rem(theme2.font.heading.sizes[5].fontSize),
-    "--font-heading-5-line-height": rem(theme2.font.heading.sizes[5].lineHeight),
-    "--font-heading-5-ascender-height": px(theme2.font.heading.sizes[5].ascenderHeight),
-    "--font-heading-5-descender-height": px(theme2.font.heading.sizes[5].descenderHeight),
-    "--font-heading-5-letter-spacing": px(theme2.font.heading.sizes[5].letterSpacing),
-    "--font-heading-5-icon-size": px(theme2.font.heading.sizes[5].iconSize),
-    "--font-label-family": theme2.font.label.family,
-    "--font-label-weight-regular": `${theme2.font.label.weights.regular}`,
-    "--font-label-weight-medium": `${theme2.font.label.weights.medium}`,
-    "--font-label-weight-semibold": `${theme2.font.label.weights.semibold}`,
-    "--font-label-weight-bold": `${theme2.font.label.weights.bold}`,
-    "--font-label-0-size": rem(theme2.font.label.sizes[0].fontSize),
-    "--font-label-0-line-height": rem(theme2.font.label.sizes[0].lineHeight),
-    "--font-label-0-ascender-height": px(theme2.font.label.sizes[0].ascenderHeight),
-    "--font-label-0-descender-height": px(theme2.font.label.sizes[0].descenderHeight),
-    "--font-label-0-letter-spacing": px(theme2.font.label.sizes[0].letterSpacing),
-    "--font-label-0-icon-size": px(theme2.font.label.sizes[0].iconSize),
-    "--font-label-1-size": rem(theme2.font.label.sizes[1].fontSize),
-    "--font-label-1-line-height": rem(theme2.font.label.sizes[1].lineHeight),
-    "--font-label-1-ascender-height": px(theme2.font.label.sizes[1].ascenderHeight),
-    "--font-label-1-descender-height": px(theme2.font.label.sizes[1].descenderHeight),
-    "--font-label-1-letter-spacing": px(theme2.font.label.sizes[1].letterSpacing),
-    "--font-label-1-icon-size": px(theme2.font.label.sizes[1].iconSize),
-    "--font-label-2-size": rem(theme2.font.label.sizes[2].fontSize),
-    "--font-label-2-line-height": rem(theme2.font.label.sizes[2].lineHeight),
-    "--font-label-2-ascender-height": px(theme2.font.label.sizes[2].ascenderHeight),
-    "--font-label-2-descender-height": px(theme2.font.label.sizes[2].descenderHeight),
-    "--font-label-2-letter-spacing": px(theme2.font.label.sizes[2].letterSpacing),
-    "--font-label-2-icon-size": px(theme2.font.label.sizes[2].iconSize),
-    "--font-label-3-size": rem(theme2.font.label.sizes[3].fontSize),
-    "--font-label-3-line-height": rem(theme2.font.label.sizes[3].lineHeight),
-    "--font-label-3-ascender-height": px(theme2.font.label.sizes[3].ascenderHeight),
-    "--font-label-3-descender-height": px(theme2.font.label.sizes[3].descenderHeight),
-    "--font-label-3-letter-spacing": px(theme2.font.label.sizes[3].letterSpacing),
-    "--font-label-3-icon-size": px(theme2.font.label.sizes[3].iconSize),
-    "--font-label-4-size": rem(theme2.font.label.sizes[4].fontSize),
-    "--font-label-4-line-height": rem(theme2.font.label.sizes[4].lineHeight),
-    "--font-label-4-ascender-height": px(theme2.font.label.sizes[4].ascenderHeight),
-    "--font-label-4-descender-height": px(theme2.font.label.sizes[4].descenderHeight),
-    "--font-label-4-letter-spacing": px(theme2.font.label.sizes[4].letterSpacing),
-    "--font-label-4-icon-size": px(theme2.font.label.sizes[4].iconSize),
-    "--font-label-5-size": rem(theme2.font.label.sizes[5].fontSize),
-    "--font-label-5-line-height": rem(theme2.font.label.sizes[5].lineHeight),
-    "--font-label-5-ascender-height": px(theme2.font.label.sizes[5].ascenderHeight),
-    "--font-label-5-descender-height": px(theme2.font.label.sizes[5].descenderHeight),
-    "--font-label-5-letter-spacing": px(theme2.font.label.sizes[5].letterSpacing),
-    "--font-label-5-icon-size": px(theme2.font.label.sizes[5].iconSize),
-    "--font-text-family": theme2.font.text.family,
-    "--font-text-weight-regular": `${theme2.font.text.weights.regular}`,
-    "--font-text-weight-medium": `${theme2.font.text.weights.medium}`,
-    "--font-text-weight-semibold": `${theme2.font.text.weights.semibold}`,
-    "--font-text-weight-bold": `${theme2.font.text.weights.bold}`,
-    "--font-text-0-size": rem(theme2.font.text.sizes[0].fontSize),
-    "--font-text-0-line-height": rem(theme2.font.text.sizes[0].lineHeight),
-    "--font-text-0-ascender-height": px(theme2.font.text.sizes[0].ascenderHeight),
-    "--font-text-0-descender-height": px(theme2.font.text.sizes[0].descenderHeight),
-    "--font-text-0-letter-spacing": px(theme2.font.text.sizes[0].letterSpacing),
-    "--font-text-0-icon-size": px(theme2.font.text.sizes[0].iconSize),
-    "--font-text-1-size": rem(theme2.font.text.sizes[1].fontSize),
-    "--font-text-1-line-height": rem(theme2.font.text.sizes[1].lineHeight),
-    "--font-text-1-ascender-height": px(theme2.font.text.sizes[1].ascenderHeight),
-    "--font-text-1-descender-height": px(theme2.font.text.sizes[1].descenderHeight),
-    "--font-text-1-letter-spacing": px(theme2.font.text.sizes[1].letterSpacing),
-    "--font-text-1-icon-size": px(theme2.font.text.sizes[1].iconSize),
-    "--font-text-2-size": rem(theme2.font.text.sizes[2].fontSize),
-    "--font-text-2-line-height": rem(theme2.font.text.sizes[2].lineHeight),
-    "--font-text-2-ascender-height": px(theme2.font.text.sizes[2].ascenderHeight),
-    "--font-text-2-descender-height": px(theme2.font.text.sizes[2].descenderHeight),
-    "--font-text-2-letter-spacing": px(theme2.font.text.sizes[2].letterSpacing),
-    "--font-text-2-icon-size": px(theme2.font.text.sizes[2].iconSize),
-    "--font-text-3-size": rem(theme2.font.text.sizes[3].fontSize),
-    "--font-text-3-line-height": rem(theme2.font.text.sizes[3].lineHeight),
-    "--font-text-3-ascender-height": px(theme2.font.text.sizes[3].ascenderHeight),
-    "--font-text-3-descender-height": px(theme2.font.text.sizes[3].descenderHeight),
-    "--font-text-3-letter-spacing": px(theme2.font.text.sizes[3].letterSpacing),
-    "--font-text-3-icon-size": px(theme2.font.text.sizes[3].iconSize),
-    "--font-text-4-size": rem(theme2.font.text.sizes[4].fontSize),
-    "--font-text-4-line-height": rem(theme2.font.text.sizes[4].lineHeight),
-    "--font-text-4-ascender-height": px(theme2.font.text.sizes[4].ascenderHeight),
-    "--font-text-4-descender-height": px(theme2.font.text.sizes[4].descenderHeight),
-    "--font-text-4-letter-spacing": px(theme2.font.text.sizes[4].letterSpacing),
-    "--font-text-4-icon-size": px(theme2.font.text.sizes[4].iconSize),
-    "--input-border-width": px(theme2.input.border.width),
-    "--input-checkbox-focus-ring-offset": px(theme2.input.checkbox.focusRing.offset),
-    "--input-checkbox-focus-ring-width": px(theme2.input.checkbox.focusRing.width),
-    "--input-checkbox-size": px(theme2.input.checkbox.size),
-    "--input-radio-focus-ring-offset": px(theme2.input.radio.focusRing.offset),
-    "--input-radio-focus-ring-width": px(theme2.input.radio.focusRing.width),
-    "--input-radio-mark-size": px(theme2.input.radio.markSize),
-    "--input-radio-size": px(theme2.input.radio.size),
-    "--input-select-focus-ring-offset": px(theme2.input.select.focusRing.offset),
-    "--input-select-focus-ring-width": px(theme2.input.select.focusRing.width),
-    "--input-switch-focus-ring-offset": px(theme2.input.switch.focusRing.offset),
-    "--input-switch-focus-ring-width": px(theme2.input.switch.focusRing.width),
-    "--input-switch-width": px(theme2.input.switch.width),
-    "--input-switch-height": px(theme2.input.switch.height),
-    "--input-switch-padding": px(theme2.input.switch.padding),
-    "--input-switch-transition-duration-ms": px(theme2.input.switch.transitionDurationMs),
-    "--input-switch-transition-timing-function": theme2.input.switch.transitionTimingFunction,
-    "--input-text-focus-ring-offset": px(theme2.input.text.focusRing.offset),
-    "--input-text-focus-ring-width": px(theme2.input.text.focusRing.width),
-    "--container-0": px(theme2.container[0]),
-    "--container-1": px(theme2.container[1]),
-    "--container-2": px(theme2.container[2]),
-    "--container-3": px(theme2.container[3]),
-    "--container-4": px(theme2.container[4]),
-    "--container-5": px(theme2.container[5]),
-    "--radius-0": px(theme2.radius[0]),
-    "--radius-1": px(theme2.radius[1]),
-    "--radius-2": px(theme2.radius[2]),
-    "--radius-3": px(theme2.radius[3]),
-    "--radius-4": px(theme2.radius[4]),
-    "--radius-5": px(theme2.radius[5]),
-    "--radius-6": px(theme2.radius[6]),
-    [varNames.space[0]]: rem(theme2.space[0]),
-    [varNames.space[0.5]]: `calc(${rem(theme2.space[1])} / 2)`,
-    [varNames.space[1]]: rem(theme2.space[1]),
-    [varNames.space[2]]: rem(theme2.space[2]),
-    [varNames.space[3]]: rem(theme2.space[3]),
-    [varNames.space[4]]: rem(theme2.space[4]),
-    [varNames.space[5]]: rem(theme2.space[5]),
-    [varNames.space[6]]: rem(theme2.space[6]),
-    [varNames.space[7]]: rem(theme2.space[7]),
-    [varNames.space[8]]: rem(theme2.space[8]),
-    [varNames.space[9]]: rem(theme2.space[9]),
-    "--shadow-0-umbra": toBoxShadow(theme2.shadow[0]?.umbra),
-    //`${theme.shadow[0]?.umbra || 'none'}`,
-    "--shadow-0-penumbra": toBoxShadow(theme2.shadow[0]?.penumbra),
-    "--shadow-0-ambient": toBoxShadow(theme2.shadow[0]?.ambient),
-    "--shadow-1-umbra": toBoxShadow(theme2.shadow[1]?.umbra),
-    "--shadow-1-penumbra": toBoxShadow(theme2.shadow[1]?.penumbra),
-    "--shadow-1-ambient": toBoxShadow(theme2.shadow[1]?.ambient),
-    "--shadow-2-umbra": toBoxShadow(theme2.shadow[2]?.umbra),
-    "--shadow-2-penumbra": toBoxShadow(theme2.shadow[2]?.penumbra),
-    "--shadow-2-ambient": toBoxShadow(theme2.shadow[2]?.ambient),
-    "--shadow-3-umbra": toBoxShadow(theme2.shadow[3]?.umbra),
-    "--shadow-3-penumbra": toBoxShadow(theme2.shadow[3]?.penumbra),
-    "--shadow-3-ambient": toBoxShadow(theme2.shadow[3]?.ambient),
-    "--shadow-4-umbra": toBoxShadow(theme2.shadow[4]?.umbra),
-    "--shadow-4-penumbra": toBoxShadow(theme2.shadow[4]?.penumbra),
-    "--shadow-4-ambient": toBoxShadow(theme2.shadow[4]?.ambient),
-    "--shadow-5-umbra": toBoxShadow(theme2.shadow[5]?.umbra),
-    "--shadow-5-penumbra": toBoxShadow(theme2.shadow[5]?.penumbra),
-    "--shadow-5-ambient": toBoxShadow(theme2.shadow[5]?.ambient),
-    ...Object.fromEntries(getThemeEntries(theme2.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(`
-
-`);
+async function buildPalette(outDir) {
+  const css$1 = css.compilePalette(theme.defaultPalette);
+  await fs__default.default.mkdir(outDir, {
+    recursive: !0
+  }), await fs__default.default.writeFile(path__default.default.resolve(outDir, "sanity-palette.css"), css$1, "utf-8"), console.log("- sanity-palette.css");
 }
-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.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.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
+async function buildTheme(outDir) {
+  const css$1 = css.compileTheme({
+    v3: theme.buildTheme_v3()
   });
-}
-function getThemeEntries(obj, path2 = []) {
-  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, [...path2, key])) : entries.push([`--${path2.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, [...path2, key])) : entries.push([`--${path2.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);
-}
-async function buildSystem(outDir) {
-  const css = compileSystem();
   await fs__default.default.mkdir(outDir, {
     recursive: !0
-  }), await fs__default.default.writeFile(path__default.default.resolve(outDir, "system.css"), css, "utf-8"), console.log("- system.css");
+  }), await fs__default.default.writeFile(path__default.default.resolve(outDir, "sanity-theme.css"), css$1, "utf-8"), console.log("- sanity-theme.css");
 }
-async function buildTheme(outDir) {
-  const css = compileTheme(theme.buildTheme().v2);
+async function buildSystem(outDir) {
+  const css$1 = css.compileSystem();
   await fs__default.default.mkdir(outDir, {
     recursive: !0
-  }), await fs__default.default.writeFile(path__default.default.resolve(outDir, "sanity-theme.css"), css, "utf-8"), console.log("- sanity-theme.css");
+  }), await fs__default.default.writeFile(path__default.default.resolve(outDir, "system.css"), css$1, "utf-8"), console.log("- system.css");
 }
 async function buildCommand(options) {
   const cwd = options.cwd ?? process.cwd(), outDir = options.outDir ?? path__default.default.resolve(cwd, "dist");
-  await buildSystem(outDir), await buildTheme(outDir);
+  await buildPalette(outDir), await buildTheme(outDir), await buildSystem(outDir);
 }
 exports.buildCommand = buildCommand;
 //# sourceMappingURL=buildCommand.js.map