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

package/dist/css.mjs

@@ -1,4713 +0,0 @@
-import { v3_v2 } from "./_chunks-es/v3_v2.mjs";
-import { HUES, TINTS, SPACE, FONT_TEXT_SIZE, FONT_LABEL_SIZE, FONT_HEADING_SIZE, FONT_CODE_SIZE, AVATAR_SIZE, THEME_COLOR_STATE_TONES, THEME_COLOR_CARD_TONES, THEME_COLOR_AVATAR_COLORS, THEME_COLOR_BUTTON_MODES, renderColor } from "@sanity/ui/theme";
-function compileRule(selector, props, context) {
-  let css = compileProperties(selector, props);
-  if (props["@nest"] && (css += compileNestedRules(selector, props["@nest"], context)), props["@keyframes"])
-    for (const name in props["@keyframes"])
-      context.keyframes[name] = props["@keyframes"][name];
-  if (props["@media"])
-    for (const key in props["@media"])
-      context.media[key] || (context.media[key] = {}), context.media[key][selector] = props["@media"][key];
-  return css;
-}
-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 === "{" ? "" : selector + css + "}";
-}
-function compileNestedRules(selector, props, context) {
-  if (!props) return "";
-  let css = "";
-  for (const [_selector, _props] of Object.entries(props))
-    css += `
-` + compileRule(_selector.replace(/&/g, selector), _props, context);
-  return css;
-}
-function compileMediaQueryRule(query, rules2) {
-  let css = `@media ${query}{`;
-  for (const [selector, props] of Object.entries(rules2))
-    css += `
-  ` + compileProperties(selector, props), props["@nest"] && (css += compileNestedRules(selector, props["@nest"], {
-      keyframes: {},
-      media: {}
-    }));
-  return css + `
-}`;
-}
-function toSnakeCase(value) {
-  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-}
-function compilePalette(config) {
-  const props = {
-    "--l-min": `${config.luminosity.min * 100}%`,
-    "--l-max": `${config.luminosity.max * 100}%`,
-    "--l-range": "calc(var(--l-max) - var(--l-min))",
-    "--c-min": `${config.chroma.min}`,
-    "--c-max": `${config.chroma.max}`,
-    "--c-range": "calc(var(--c-max) - var(--c-min))",
-    ...compileHues(config.hues),
-    "--black": `oklch(
-      calc(var(--l-min) + 0.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`,
-    "--white": `oklch(
-      calc(var(--l-min) + 1.0 * var(--l-range))
-      calc(var(--c-min) + 0.0 * var(--gray-c-range))
-      var(--gray-h)
-    )`
-  };
-  return compileRule(":root", props, {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileHues(hues) {
-  const rules2 = {};
-  for (const hue of HUES) {
-    const {
-      c,
-      h
-    } = hues[hue];
-    rules2[`--${hue}-h`] = `${h}`, rules2[`--${hue}-c`] = `${c}`, rules2[`--${hue}-c-max`] = `min(var(--c-max), var(--${hue}-c))`, rules2[`--${hue}-c-range`] = `calc(var(--${hue}-c-max) - var(--c-min))`;
-    for (const tint of TINTS) {
-      const l_offset = parseFloat((1 - tint / 1e3).toFixed(2)), c_offset_tmp = tint / 500, c_offset = parseFloat((c_offset_tmp < 1 ? c_offset_tmp : 2 - c_offset_tmp).toFixed(1));
-      rules2[`--${hue}-${tint}`] = ["oklch(", `calc(var(--l-min) + ${l_offset} * var(--l-range)) `, `calc(var(--c-min) + ${c_offset} * var(--${hue}-c-range)) `, `var(--${hue}-h)`, ")"].join("");
-    }
-  }
-  return rules2;
-}
-const breadcrumbsRules = {
-  breadcrumbs: {
-    lineHeight: 0
-  }
-}, varNames = {
-  avatar: {
-    distance: "--avatar-distance",
-    focusRing: {
-      offset: "--avatar-focus-ring-offset",
-      width: "--avatar-focus-ring-width"
-    },
-    size: "--avatar-size",
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
-      ...acc,
-      [size]: {
-        distance: `--avatar-${size}-distance`,
-        size: `--avatar-${size}-size`
-      }
-    }), {})
-  },
-  color: {
-    // card scope
-    accent: {
-      fg: "--color-accent-fg"
-    },
-    avatar: {
-      bg: "--color-avatar-bg",
-      fg: "--color-avatar-fg",
-      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-gray-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-yellow-fg"
-      }
-    },
-    backdrop: "--color-backdrop",
-    bg: "--color-bg",
-    border: "--color-border",
-    fg: "--color-fg",
-    focusRing: "--color-focus-ring",
-    input: {
-      bg: "--color-input-bg",
-      border: "--color-input-border",
-      fg: "--color-input-fg",
-      placeholder: "--color-input-placeholder"
-    },
-    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"
-    },
-    token: {
-      atrule: "--color-token-atrule",
-      attrName: "--color-token-attr-name",
-      attrValue: "--color-token-attr-value",
-      attribute: "--color-token-attribute",
-      boolean: "--color-token-boolean",
-      builtin: "--color-token-builtin",
-      cdata: "--color-token-cdata",
-      char: "--color-token-char",
-      class: "--color-token-class",
-      className: "--color-token-class-name",
-      comment: "--color-token-comment",
-      constant: "--color-token-constant",
-      deleted: "--color-token-deleted",
-      doctype: "--color-token-doctype",
-      entity: "--color-token-entity",
-      function: "--color-token-function",
-      hexcode: "--color-token-hexcode",
-      id: "--color-token-id",
-      important: "--color-token-important",
-      inserted: "--color-token-inserted",
-      keyword: "--color-token-keyword",
-      number: "--color-token-number",
-      operator: "--color-token-operator",
-      prolog: "--color-token-prolog",
-      property: "--color-token-property",
-      pseudoClass: "--color-token-pseudo-class",
-      pseudoElement: "--color-token-pseudo-element",
-      punctuation: "--color-token-punctuation",
-      regex: "--color-token-regex",
-      selector: "--color-token-selector",
-      string: "--color-token-string",
-      symbol: "--color-token-symbol",
-      tag: "--color-token-tag",
-      unit: "--color-token-unit",
-      url: "--color-token-url",
-      variable: "--color-token-variable"
-    },
-    solid: buildColorVariantVarNames({
-      variant: "solid"
-    }),
-    tinted: buildColorVariantVarNames({
-      variant: "tinted"
-    }),
-    // tone scopes
-    transparent: buildColorCardVarNames({
-      tone: "transparent"
-    }),
-    default: buildColorCardVarNames({
-      tone: "default"
-    }),
-    neutral: buildColorCardVarNames({
-      tone: "neutral"
-    }),
-    primary: buildColorCardVarNames({
-      tone: "primary"
-    }),
-    suggest: buildColorCardVarNames({
-      tone: "suggest"
-    }),
-    positive: buildColorCardVarNames({
-      tone: "positive"
-    }),
-    caution: buildColorCardVarNames({
-      tone: "caution"
-    }),
-    critical: buildColorCardVarNames({
-      tone: "critical"
-    }),
-    // scheme scope
-    dark: {
-      transparent: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "transparent"
-      }),
-      default: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "default"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "dark",
-        tone: "neutral"
-      }),
-      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"
-      }),
-      neutral: buildColorCardVarNames({
-        scheme: "light",
-        tone: "neutral"
-      }),
-      primary: buildColorCardVarNames({
-        scheme: "light",
-        tone: "primary"
-      }),
-      suggest: buildColorCardVarNames({
-        scheme: "light",
-        tone: "suggest"
-      }),
-      positive: buildColorCardVarNames({
-        scheme: "light",
-        tone: "positive"
-      }),
-      caution: buildColorCardVarNames({
-        scheme: "light",
-        tone: "caution"
-      }),
-      critical: buildColorCardVarNames({
-        scheme: "light",
-        tone: "critical"
-      })
-    }
-  },
-  font: {
-    code: {
-      family: "--font-code-family",
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-code-${size}-size`,
-          ascenderHeight: `--font-code-${size}-ascender-height`,
-          descenderHeight: `--font-code-${size}-descender-height`,
-          lineHeight: `--font-code-${size}-line-height`,
-          letterSpacing: `--font-code-${size}-letter-spacing`,
-          iconSize: `--font-code-${size}-icon-size`
-        }
-      }), {})
-    },
-    heading: {
-      family: "--font-heading-family",
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-heading-${size}-size`,
-          ascenderHeight: `--font-heading-${size}-ascender-height`,
-          descenderHeight: `--font-heading-${size}-descender-height`,
-          lineHeight: `--font-heading-${size}-line-height`,
-          letterSpacing: `--font-heading-${size}-letter-spacing`,
-          iconSize: `--font-heading-${size}-icon-size`
-        }
-      }), {})
-    },
-    label: {
-      family: "--font-label-family",
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-label-${size}-size`,
-          ascenderHeight: `--font-label-${size}-ascender-height`,
-          descenderHeight: `--font-label-${size}-descender-height`,
-          lineHeight: `--font-label-${size}-line-height`,
-          letterSpacing: `--font-label-${size}-letter-spacing`,
-          iconSize: `--font-label-${size}-icon-size`
-        }
-      }), {})
-    },
-    text: {
-      family: "--font-text-family",
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `--font-text-${size}-size`,
-          ascenderHeight: `--font-text-${size}-ascender-height`,
-          descenderHeight: `--font-text-${size}-descender-height`,
-          lineHeight: `--font-text-${size}-line-height`,
-          letterSpacing: `--font-text-${size}-letter-spacing`,
-          iconSize: `--font-text-${size}-icon-size`
-        }
-      }), {})
-    }
-  },
-  input: {
-    fontSize: "--input-font-size",
-    lineHeight: "--input-line-height",
-    letterSpacing: "--input-letter-spacing",
-    ascenderHeight: "--input-ascender-height",
-    descenderHeight: "--input-descender-height",
-    // capHeight: `--input-cap-height`,
-    gap: "--input-gap",
-    padding: "--input-padding"
-  },
-  space: Object.fromEntries(SPACE.map((space) => [space, `--space-${String(space).replace(".", "_")}`]))
-};
-function buildColorCardVarNames(props) {
-  const {
-    scheme,
-    tone
-  } = props, sourcePrefix = scheme ? `--color-${scheme}-${tone}` : `--color-${tone}`;
-  return {
-    accent: {
-      fg: `${sourcePrefix}-accent-fg`
-    },
-    avatar: {
-      gray: {
-        bg: `${sourcePrefix}-avatar-gray-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
-      },
-      blue: {
-        bg: `${sourcePrefix}-avatar-blue-bg`,
-        fg: `${sourcePrefix}-avatar-blue-fg`
-      },
-      purple: {
-        bg: `${sourcePrefix}-avatar-purple-bg`,
-        fg: `${sourcePrefix}-avatar-purple-fg`
-      },
-      magenta: {
-        bg: `${sourcePrefix}-avatar-magenta-bg`,
-        fg: `${sourcePrefix}-avatar-magenta-fg`
-      },
-      red: {
-        bg: `${sourcePrefix}-avatar-red-bg`,
-        fg: `${sourcePrefix}-avatar-red-fg`
-      },
-      orange: {
-        bg: `${sourcePrefix}-avatar-orange-bg`,
-        fg: `${sourcePrefix}-avatar-gray-fg`
-      },
-      yellow: {
-        bg: `${sourcePrefix}-avatar-yellow-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
-      },
-      green: {
-        bg: `${sourcePrefix}-avatar-green-bg`,
-        fg: `${sourcePrefix}-avatar-green-fg`
-      },
-      cyan: {
-        bg: `${sourcePrefix}-avatar-cyan-bg`,
-        fg: `${sourcePrefix}-avatar-yellow-fg`
-      }
-    },
-    backdrop: `${sourcePrefix}-backdrop`,
-    focusRing: `${sourcePrefix}-focus-ring`,
-    link: {
-      fg: `${sourcePrefix}-link-fg`
-    },
-    muted: {
-      bg: `${sourcePrefix}-muted-bg`,
-      fg: `${sourcePrefix}-muted-fg`
-    },
-    shadow: {
-      outline: `${sourcePrefix}-shadow-outline`,
-      umbra: `${sourcePrefix}-shadow-umbra`,
-      penumbra: `${sourcePrefix}-shadow-penumbra`,
-      ambient: `${sourcePrefix}-shadow-ambient`
-    },
-    skeleton: {
-      from: `${sourcePrefix}-skeleton-from`,
-      to: `${sourcePrefix}-skeleton-to`
-    },
-    token: {
-      atrule: `${sourcePrefix}-token-atrule`,
-      attrName: `${sourcePrefix}-token-attr-name`,
-      attrValue: `${sourcePrefix}-token-attr-value`,
-      attribute: `${sourcePrefix}-token-attribute`,
-      boolean: `${sourcePrefix}-token-boolean`,
-      builtin: `${sourcePrefix}-token-builtin`,
-      cdata: `${sourcePrefix}-token-cdata`,
-      char: `${sourcePrefix}-token-char`,
-      class: `${sourcePrefix}-token-class`,
-      className: `${sourcePrefix}-token-class-name`,
-      comment: `${sourcePrefix}-token-comment`,
-      constant: `${sourcePrefix}-token-constant`,
-      deleted: `${sourcePrefix}-token-deleted`,
-      doctype: `${sourcePrefix}-token-doctype`,
-      entity: `${sourcePrefix}-token-entity`,
-      function: `${sourcePrefix}-token-function`,
-      hexcode: `${sourcePrefix}-token-hexcode`,
-      id: `${sourcePrefix}-token-id`,
-      important: `${sourcePrefix}-token-important`,
-      inserted: `${sourcePrefix}-token-inserted`,
-      keyword: `${sourcePrefix}-token-keyword`,
-      number: `${sourcePrefix}-token-number`,
-      operator: `${sourcePrefix}-token-operator`,
-      prolog: `${sourcePrefix}-token-prolog`,
-      property: `${sourcePrefix}-token-property`,
-      pseudoClass: `${sourcePrefix}-token-pseudo-class`,
-      pseudoElement: `${sourcePrefix}-token-pseudo-element`,
-      punctuation: `${sourcePrefix}-token-punctuation`,
-      regex: `${sourcePrefix}-token-regex`,
-      selector: `${sourcePrefix}-token-selector`,
-      string: `${sourcePrefix}-token-string`,
-      symbol: `${sourcePrefix}-token-symbol`,
-      tag: `${sourcePrefix}-token-tag`,
-      unit: `${sourcePrefix}-token-unit`,
-      url: `${sourcePrefix}-token-url`,
-      variable: `${sourcePrefix}-token-variable`
-    },
-    solid: buildColorVariantVarNames({
-      scheme,
-      tone,
-      variant: "solid"
-    }),
-    tinted: buildColorVariantVarNames({
-      scheme,
-      tone,
-      variant: "tinted"
-    })
-  };
-}
-function buildColorVariantVarNames(options) {
-  const {
-    scheme,
-    tone,
-    variant
-  } = options, _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
-    bg: {
-      0: `${_prefix}-bg-0`,
-      1: `${_prefix}-bg-1`,
-      2: `${_prefix}-bg-2`,
-      3: `${_prefix}-bg-3`,
-      4: `${_prefix}-bg-4`
-    },
-    border: {
-      0: `${_prefix}-border-0`,
-      1: `${_prefix}-border-1`,
-      2: `${_prefix}-border-2`,
-      3: `${_prefix}-border-3`,
-      4: `${_prefix}-border-4`
-    },
-    fg: {
-      0: `${_prefix}-fg-0`,
-      1: `${_prefix}-fg-1`,
-      2: `${_prefix}-fg-2`,
-      3: `${_prefix}-fg-3`,
-      4: `${_prefix}-fg-4`
-    }
-  };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
-    vars2[elementTone] = {
-      bg: {
-        0: `${prefix}-bg-0`,
-        1: `${prefix}-bg-1`,
-        2: `${prefix}-bg-2`,
-        3: `${prefix}-bg-3`,
-        4: `${prefix}-bg-4`
-      },
-      border: {
-        0: `${prefix}-border-0`,
-        1: `${prefix}-border-1`,
-        2: `${prefix}-border-2`,
-        3: `${prefix}-border-3`,
-        4: `${prefix}-border-4`
-      },
-      fg: {
-        0: `${prefix}-fg-0`,
-        1: `${prefix}-fg-1`,
-        2: `${prefix}-fg-2`,
-        3: `${prefix}-fg-3`,
-        4: `${prefix}-fg-4`
-      }
-    };
-  }
-  return vars2;
-}
-const darkColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
-  darkColorVars[tone] = buildColorCardVars({
-    scheme: "dark",
-    tone
-  });
-const lightColorVars = {};
-for (const tone of THEME_COLOR_CARD_TONES)
-  lightColorVars[tone] = buildColorCardVars({
-    scheme: "light",
-    tone
-  });
-const colorVars = {
-  accent: {
-    fg: `var(${varNames.color.accent.fg})`
-  },
-  avatar: {
-    bg: `var(${varNames.color.avatar.bg})`,
-    fg: `var(${varNames.color.avatar.fg})`,
-    gray: {
-      bg: `var(${varNames.color.avatar.gray.bg})`,
-      fg: `var(${varNames.color.avatar.gray.fg})`
-    },
-    blue: {
-      bg: `var(${varNames.color.avatar.blue.bg})`,
-      fg: `var(${varNames.color.avatar.blue.fg})`
-    },
-    purple: {
-      bg: `var(${varNames.color.avatar.purple.bg})`,
-      fg: `var(${varNames.color.avatar.purple.fg})`
-    },
-    magenta: {
-      bg: `var(${varNames.color.avatar.magenta.bg})`,
-      fg: `var(${varNames.color.avatar.magenta.fg})`
-    },
-    red: {
-      bg: `var(${varNames.color.avatar.red.bg})`,
-      fg: `var(${varNames.color.avatar.red.fg})`
-    },
-    orange: {
-      bg: `var(${varNames.color.avatar.orange.bg})`,
-      fg: `var(${varNames.color.avatar.orange.fg})`
-    },
-    yellow: {
-      bg: `var(${varNames.color.avatar.yellow.bg})`,
-      fg: `var(${varNames.color.avatar.yellow.fg})`
-    },
-    green: {
-      bg: `var(${varNames.color.avatar.green.bg})`,
-      fg: `var(${varNames.color.avatar.green.fg})`
-    },
-    cyan: {
-      bg: `var(${varNames.color.avatar.cyan.bg})`,
-      fg: `var(${varNames.color.avatar.cyan.fg})`
-    }
-  },
-  backdrop: `var(${varNames.color.backdrop})`,
-  bg: `var(${varNames.color.bg})`,
-  border: `var(${varNames.color.border})`,
-  fg: `var(${varNames.color.fg})`,
-  focusRing: `var(${varNames.color.focusRing})`,
-  input: {
-    bg: `var(${varNames.color.input.bg})`,
-    border: `var(${varNames.color.input.border})`,
-    fg: `var(${varNames.color.input.fg})`,
-    placeholder: `var(${varNames.color.input.placeholder})`
-  },
-  link: {
-    fg: `var(${varNames.color.link.fg})`
-  },
-  muted: {
-    bg: `var(${varNames.color.muted.bg})`,
-    fg: `var(${varNames.color.muted.fg})`
-  },
-  shadow: {
-    outline: `var(${varNames.color.shadow.outline})`,
-    umbra: `var(${varNames.color.shadow.umbra})`,
-    penumbra: `var(${varNames.color.shadow.penumbra})`,
-    ambient: `var(${varNames.color.shadow.ambient})`
-  },
-  skeleton: {
-    from: `var(${varNames.color.skeleton.from})`,
-    to: `var(${varNames.color.skeleton.to})`
-  },
-  token: {
-    atrule: `var(${varNames.color.token.atrule})`,
-    attrName: `var(${varNames.color.token.attrName})`,
-    attrValue: `var(${varNames.color.token.attrValue})`,
-    attribute: `var(${varNames.color.token.attribute})`,
-    boolean: `var(${varNames.color.token.boolean})`,
-    builtin: `var(${varNames.color.token.builtin})`,
-    cdata: `var(${varNames.color.token.cdata})`,
-    char: `var(${varNames.color.token.char})`,
-    class: `var(${varNames.color.token.class})`,
-    className: `var(${varNames.color.token.className})`,
-    comment: `var(${varNames.color.token.comment})`,
-    constant: `var(${varNames.color.token.constant})`,
-    deleted: `var(${varNames.color.token.deleted})`,
-    doctype: `var(${varNames.color.token.doctype})`,
-    entity: `var(${varNames.color.token.entity})`,
-    function: `var(${varNames.color.token.function})`,
-    hexcode: `var(${varNames.color.token.hexcode})`,
-    id: `var(${varNames.color.token.id})`,
-    important: `var(${varNames.color.token.important})`,
-    inserted: `var(${varNames.color.token.inserted})`,
-    keyword: `var(${varNames.color.token.keyword})`,
-    number: `var(${varNames.color.token.number})`,
-    operator: `var(${varNames.color.token.operator})`,
-    prolog: `var(${varNames.color.token.prolog})`,
-    property: `var(${varNames.color.token.property})`,
-    pseudoClass: `var(${varNames.color.token.pseudoClass})`,
-    pseudoElement: `var(${varNames.color.token.pseudoElement})`,
-    punctuation: `var(${varNames.color.token.punctuation})`,
-    regex: `var(${varNames.color.token.regex})`,
-    selector: `var(${varNames.color.token.selector})`,
-    string: `var(${varNames.color.token.string})`,
-    symbol: `var(${varNames.color.token.symbol})`,
-    tag: `var(${varNames.color.token.tag})`,
-    unit: `var(${varNames.color.token.unit})`,
-    url: `var(${varNames.color.token.url})`,
-    variable: `var(${varNames.color.token.variable})`
-  },
-  solid: buildColorVariantVars({
-    variant: "solid"
-  }),
-  tinted: buildColorVariantVars({
-    variant: "tinted"
-  }),
-  ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
-    ...acc,
-    [tone]: buildColorCardVars({
-      tone
-    })
-  }), {}),
-  dark: darkColorVars,
-  light: lightColorVars
-}, vars = {
-  avatar: {
-    distance: `var(${varNames.avatar.distance})`,
-    size: `var(${varNames.avatar.size})`,
-    sizes: AVATAR_SIZE.reduce((acc, size) => ({
-      ...acc,
-      [size]: {
-        size: `var(${varNames.avatar.sizes[size].size})`,
-        distance: `var(${varNames.avatar.sizes[size].distance})`
-      }
-    }), {})
-  },
-  color: colorVars,
-  font: {
-    code: {
-      family: `var(${varNames.font.code.family})`,
-      sizes: FONT_CODE_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.code.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.code.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.code.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.code.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.code.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.code.sizes[size].iconSize})`
-        }
-      }), {})
-    },
-    heading: {
-      family: `var(${varNames.font.heading.family})`,
-      sizes: FONT_HEADING_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.heading.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.heading.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.heading.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.heading.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.heading.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.heading.sizes[size].iconSize})`
-        }
-      }), {})
-    },
-    label: {
-      family: `var(${varNames.font.label.family})`,
-      sizes: FONT_LABEL_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.label.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.label.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.label.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.label.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.label.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.label.sizes[size].iconSize})`
-        }
-      }), {})
-    },
-    text: {
-      family: `var(${varNames.font.text.family})`,
-      sizes: FONT_TEXT_SIZE.reduce((acc, size) => ({
-        ...acc,
-        [size]: {
-          fontSize: `var(${varNames.font.text.sizes[size].fontSize})`,
-          ascenderHeight: `var(${varNames.font.text.sizes[size].ascenderHeight})`,
-          descenderHeight: `var(${varNames.font.text.sizes[size].descenderHeight})`,
-          lineHeight: `var(${varNames.font.text.sizes[size].lineHeight})`,
-          letterSpacing: `var(${varNames.font.text.sizes[size].letterSpacing})`,
-          iconSize: `var(${varNames.font.text.sizes[size].iconSize})`
-        }
-      }), {})
-    }
-  },
-  input: {
-    fontSize: "var(--input-font-size)",
-    lineHeight: "var(--input-line-height)",
-    letterSpacing: "var(--input-letter-spacing)",
-    ascenderHeight: "var(--input-ascender-height)",
-    descenderHeight: "var(--input-descender-height)",
-    // capHeight: `var(--input-cap-height)`,
-    gap: "var(--input-gap)",
-    padding: "var(--input-padding)",
-    text: {
-      focusRing: {
-        width: "var(--input-text-focus-ring-width)",
-        offset: "var(--input-text-focus-ring-offset)"
-      }
-    }
-  },
-  space: Object.fromEntries(SPACE.map((space) => [space, `var(${varNames.space[space]})`]))
-};
-function buildColorCardVars(props) {
-  const {
-    scheme,
-    tone
-  } = props, prefix = scheme ? varNames.color[scheme][tone] : varNames.color[tone];
-  return {
-    accent: {
-      fg: `var(${prefix.accent.fg})`
-    },
-    avatar: {
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
-        ...acc,
-        [color]: {
-          bg: `var(${prefix.avatar[color].bg})`,
-          fg: `var(${prefix.avatar[color].fg})`
-        }
-      }), {})
-    },
-    backdrop: `var(${prefix.backdrop})`,
-    focusRing: `var(${prefix.focusRing})`,
-    link: {
-      fg: `var(${prefix.link.fg})`
-    },
-    muted: {
-      bg: `var(${prefix.muted.bg})`,
-      fg: `var(${prefix.muted.fg})`
-    },
-    shadow: {
-      outline: `var(${prefix.shadow.outline})`,
-      umbra: `var(${prefix.shadow.umbra})`,
-      penumbra: `var(${prefix.shadow.penumbra})`,
-      ambient: `var(${prefix.shadow.ambient})`
-    },
-    skeleton: {
-      from: `var(${prefix.skeleton.from})`,
-      to: `var(${prefix.skeleton.to})`
-    },
-    token: {
-      atrule: `var(${prefix.token.atrule})`,
-      attrName: `var(${prefix.token.attrName})`,
-      attrValue: `var(${prefix.token.attrValue})`,
-      attribute: `var(${prefix.token.attribute})`,
-      boolean: `var(${prefix.token.boolean})`,
-      builtin: `var(${prefix.token.builtin})`,
-      cdata: `var(${prefix.token.cdata})`,
-      char: `var(${prefix.token.char})`,
-      class: `var(${prefix.token.class})`,
-      className: `var(${prefix.token.className})`,
-      comment: `var(${prefix.token.comment})`,
-      constant: `var(${prefix.token.constant})`,
-      deleted: `var(${prefix.token.deleted})`,
-      doctype: `var(${prefix.token.doctype})`,
-      entity: `var(${prefix.token.entity})`,
-      function: `var(${prefix.token.function})`,
-      hexcode: `var(${prefix.token.hexcode})`,
-      id: `var(${prefix.token.id})`,
-      important: `var(${prefix.token.important})`,
-      inserted: `var(${prefix.token.inserted})`,
-      keyword: `var(${prefix.token.keyword})`,
-      number: `var(${prefix.token.number})`,
-      operator: `var(${prefix.token.operator})`,
-      prolog: `var(${prefix.token.prolog})`,
-      property: `var(${prefix.token.property})`,
-      pseudoClass: `var(${prefix.token.pseudoClass})`,
-      pseudoElement: `var(${prefix.token.pseudoElement})`,
-      punctuation: `var(${prefix.token.punctuation})`,
-      regex: `var(${prefix.token.regex})`,
-      selector: `var(${prefix.token.selector})`,
-      string: `var(${prefix.token.string})`,
-      symbol: `var(${prefix.token.symbol})`,
-      tag: `var(${prefix.token.tag})`,
-      unit: `var(${prefix.token.unit})`,
-      url: `var(${prefix.token.url})`,
-      variable: `var(${prefix.token.variable})`
-    },
-    solid: buildColorVariantVars({
-      scheme,
-      tone,
-      variant: "solid"
-    }),
-    tinted: buildColorVariantVars({
-      scheme,
-      tone,
-      variant: "tinted"
-    })
-  };
-}
-function buildColorVariantVars(options) {
-  const {
-    scheme,
-    tone,
-    variant
-  } = options, _prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}` : tone ? `--color-${tone}-${variant}` : `--color-${variant}`, vars2 = {
-    bg: {
-      0: `var(${_prefix}-bg-0)`,
-      1: `var(${_prefix}-bg-1)`,
-      2: `var(${_prefix}-bg-2)`,
-      3: `var(${_prefix}-bg-3)`,
-      4: `var(${_prefix}-bg-4)`
-    },
-    border: {
-      0: `var(${_prefix}-border-0)`,
-      1: `var(${_prefix}-border-1)`,
-      2: `var(${_prefix}-border-2)`,
-      3: `var(${_prefix}-border-3)`,
-      4: `var(${_prefix}-border-4)`
-    },
-    fg: {
-      0: `var(${_prefix}-fg-0)`,
-      1: `var(${_prefix}-fg-1)`,
-      2: `var(${_prefix}-fg-2)`,
-      3: `var(${_prefix}-fg-3)`,
-      4: `var(${_prefix}-fg-4)`
-    }
-  };
-  for (const elementTone of THEME_COLOR_STATE_TONES) {
-    const prefix = scheme && tone ? `--color-${scheme}-${tone}-${variant}-${elementTone}` : tone ? `--color-${tone}-${variant}-${elementTone}` : `--color-${variant}-${elementTone}`;
-    vars2[elementTone] = {
-      bg: {
-        0: `var(${prefix}-bg-0)`,
-        1: `var(${prefix}-bg-1)`,
-        2: `var(${prefix}-bg-2)`,
-        3: `var(${prefix}-bg-3)`,
-        4: `var(${prefix}-bg-4)`
-      },
-      border: {
-        0: `var(${prefix}-border-0)`,
-        1: `var(${prefix}-border-1)`,
-        2: `var(${prefix}-border-2)`,
-        3: `var(${prefix}-border-3)`,
-        4: `var(${prefix}-border-4)`
-      },
-      fg: {
-        0: `var(${prefix}-fg-0)`,
-        1: `var(${prefix}-fg-1)`,
-        2: `var(${prefix}-fg-2)`,
-        3: `var(${prefix}-fg-3)`,
-        4: `var(${prefix}-fg-4)`
-      }
-    };
-  }
-  return vars2;
-}
-const dialogRules = {
-  dialog: {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    background: vars.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: {
-    outline: "none"
-  },
-  "menu-divider": {
-    height: "1px",
-    border: 0,
-    backgroundColor: vars.color.border,
-    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: {
-    "--color-skeleton-from": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 5%)`,
-    "--color-skeleton-to": `color-mix(in srgb, transparent, ${vars.color.muted.fg} 10%)`,
-    backgroundColor: vars.color.skeleton.from,
-    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", vars.color.skeleton.from, vars.color.skeleton.to, vars.color.skeleton.from, vars.color.skeleton.from, vars.color.skeleton.from, ")"].join(", "),
-        animationName: "skeleton-pulse",
-        animationTimingFunction: "ease-in-out",
-        animationIterationCount: "infinite",
-        animationDuration: "2000ms"
-      },
-      "&[data-visible]": {
-        opacity: 1
-      }
-    },
-    "@media": {
-      "screen and (prefers-reduced-motion: no-preference)": {
-        backgroundColor: vars.color.skeleton.from
-      }
-    }
-  },
-  "font-skeleton": {
-    height: "calc(var(--font-skeleton-line-height) - var(--font-skeleton-ascender-height) - var(--font-skeleton-descender-height))"
-  },
-  // ...responsiveRules('text-skeleton-0', {
-  //   '--font-skeleton-line-height': 'var(--font-text-0-line-height)',
-  //   '--font-skeleton-ascender-height': 'var(--font-text-0-ascender-height)',
-  //   '--font-skeleton-descender-height': 'var(--font-text-0-descender-height)',
-  // }),
-  ...FONT_CODE_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`code-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.code.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.code.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.code.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...FONT_HEADING_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`heading-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.heading.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.heading.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.heading.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...FONT_LABEL_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`label-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.label.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.label.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.label.sizes[size].descenderHeight
-    })
-  }), {}),
-  ...FONT_TEXT_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`text-skeleton-${size}`, {
-      "--font-skeleton-line-height": vars.font.text.sizes[size].lineHeight,
-      "--font-skeleton-ascender-height": vars.font.text.sizes[size].ascenderHeight,
-      "--font-skeleton-descender-height": vars.font.text.sizes[size].descenderHeight
-    })
-  }), {})
-}, toastRules = {
-  "toast-layer": {
-    position: "fixed",
-    right: 0,
-    bottom: 0,
-    pointerEvents: "none",
-    maxWidth: "420px",
-    width: "100%"
-  },
-  toast: {
-    pointerEvents: "all",
-    overflow: ["hidden", "clip"]
-  }
-}, _arrowRules = {
-  arrow: {
-    position: "absolute",
-    // todo: replace with vars?
-    width: "var(--arrow-size)",
-    height: "var(--arrow-size)",
-    "@nest": {
-      ":empty + &": {
-        display: "none"
-      },
-      "& > svg": {
-        display: "block",
-        transformOrigin: "calc(var(--arrow-size) / 2) calc(var(--arrow-size) / 2)"
-      },
-      // top
-      '[data-placement^="top"] > &': {
-        bottom: "calc(0px - var(--arrow-size))"
-      },
-      '[data-placement^="top"] > & svg': {
-        transform: "rotate(0deg)"
-      },
-      // right
-      '[data-placement^="right"] > &': {
-        left: "calc(0px - var(--arrow-size))"
-      },
-      '[data-placement^="right"] > & svg': {
-        transform: "rotate(90deg)"
-      },
-      // left
-      '[data-placement^="left"] > &': {
-        right: "calc(0px - var(--arrow-size))"
-      },
-      '[data-placement^="left"] > & svg': {
-        transform: "rotate(-90deg)"
-      },
-      // bottom
-      '[data-placement^="bottom"] > &': {
-        top: "calc(0px - var(--arrow-size))"
-      },
-      '[data-placement^="bottom"] > & svg': {
-        transform: "rotate(180deg)"
-      }
-    }
-  },
-  "arrow-stroke": {
-    stroke: vars.color.shadow.outline
-  },
-  "arrow-shape": {
-    fill: vars.color.bg
-  }
-}, _inputRules = {
-  input: {
-    position: "relative"
-  },
-  "input-b": {
-    "@nest": {
-      "& .input-presentation": {
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`
-      }
-    }
-  },
-  "input-element": {
-    "--color-input-fg": vars.color.tinted.default.fg[2],
-    "--color-input-placeholder": vars.color.tinted.default.border[4],
-    WebkitFontSmoothing: "inherit",
-    appearance: "none",
-    border: 0,
-    outline: "none",
-    margin: 0,
-    fontFamily: vars.font.text.family,
-    fontSize: vars.input.fontSize,
-    lineHeight: vars.input.lineHeight,
-    letterSpacing: vars.input.letterSpacing,
-    backgroundColor: "transparent",
-    color: vars.color.input.fg,
-    padding: ["calc(var(--input-padding) - var(--input-ascender-height))", "var(--input-padding)", "calc(var(--input-padding) - var(--input-descender-height))", "var(--input-padding)"].join(" "),
-    borderRadius: "inherit",
-    position: "relative",
-    zIndex: 1,
-    display: "block",
-    boxSizing: "border-box",
-    resize: "none",
-    width: ["-moz-available", "-webkit-fill-available", "stretch"],
-    "@nest": {
-      ".input[data-icon-left] &": {
-        paddingLeft: "calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))"
-      },
-      ".input[data-icon-right] &": {
-        paddingRight: "calc(var(--input-padding) + calc(var(--input-line-height) - var(--input-ascender-height) - var(--input-descender-height)) + var(--input-gap))"
-      },
-      "&::placeholder": {
-        color: vars.color.input.placeholder
-      },
-      "&:hover": {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0]
-      },
-      "&:focus": {
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[0]
-      },
-      "&:disabled": {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[3]
-      }
-    }
-  },
-  "input-presentation": {
-    [varNames.color.input.fg]: vars.color.tinted.default.fg[4],
-    [varNames.color.input.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.input.border]: vars.color.tinted.default.border[1],
-    borderRadius: "inherit",
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    display: "block",
-    pointerEvents: "none",
-    zIndex: 0,
-    "@nest": {
-      ".input[data-prefix] &": {
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-      },
-      ".input[data-suffix] &": {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
-      },
-      ".input-element:placeholder-shown + &": {
-        [varNames.color.input.fg]: vars.color.tinted.default.border[4]
-      },
-      ".input-element:hover + &": {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`
-      },
-      ".input-element:focus + &": {
-        [varNames.color.input.border]: vars.color.tinted.default.border[2],
-        [varNames.color.input.fg]: vars.color.tinted.default.fg[1],
-        boxShadow: `inset 0 0 0 1px ${vars.color.input.border}`,
-        outlineWidth: vars.input.text.focusRing.width,
-        outlineStyle: "solid",
-        outlineColor: vars.color.focusRing,
-        outlineOffset: vars.input.text.focusRing.offset
-      },
-      ".input-element:disabled + &": {
-        [varNames.color.input.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.input.border]: vars.color.tinted.default.border[0],
-        opacity: 1
-      }
-    }
-  }
-};
-for (const textSize of FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize];
-  _inputRules[`input-${textSize}`] = {
-    [varNames.input.fontSize]: source.fontSize,
-    [varNames.input.lineHeight]: source.lineHeight,
-    [varNames.input.letterSpacing]: source.letterSpacing,
-    [varNames.input.ascenderHeight]: source.ascenderHeight,
-    [varNames.input.descenderHeight]: source.descenderHeight
-  };
-}
-for (const space of SPACE)
-  Object.assign(_inputRules, responsiveRules(`input-p-${space}`, {
-    [varNames.input.padding]: vars.space[space]
-  }));
-for (const space of SPACE)
-  Object.assign(_inputRules, responsiveRules(`input-g-${space}`, {
-    [varNames.input.gap]: vars.space[space]
-  }));
-const toneMap$2 = {
-  default: "surface",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
-}, _selectableRules = {
-  selectable: {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    "--color-bg": vars.color.tinted.bg[0],
-    "--color-border": vars.color.tinted.border[2],
-    "--color-fg": vars.color.tinted.fg[2],
-    "@nest": {
-      "&:is(button)": {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        outline: "none",
-        font: "inherit",
-        textAlign: "inherit",
-        border: 0,
-        width: ["-moz-available", "-webkit-fill-available", "stretch"]
-      },
-      /* &:is(a) */
-      "&:is(a)": {
-        outline: "none",
-        textDecoration: "none"
-      },
-      ...buildSelectableTones()
-    },
-    "@media": {
-      "(hover: hover)": {
-        "@nest": {
-          "&:not([data-disabled])": {
-            // cursor: 'pointer',
-          },
-          "&:not([data-disabled]):hover": {
-            "--color-bg": vars.color.tinted.bg[1],
-            "--color-border": vars.color.tinted.border[3],
-            "--color-fg": vars.color.tinted.fg[1],
-            "--color-muted-bg": vars.color.tinted.bg[2],
-            "--color-muted-fg": vars.color.tinted.fg[4]
-          },
-          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]': {
-            "--color-bg": vars.color.tinted.bg[2],
-            "--color-border": vars.color.tinted.border[4],
-            "--color-fg": vars.color.tinted.fg[0],
-            "--color-muted-bg": vars.color.tinted.bg[3],
-            "--color-muted-fg": vars.color.tinted.fg[4]
-          },
-          "&:not([data-disabled]):focus": {
-            "--color-bg": vars.color.solid.bg[0],
-            "--color-border": vars.color.solid.border[1],
-            "--color-fg": vars.color.solid.fg[1],
-            "--color-muted-bg": vars.color.solid.bg[1],
-            "--color-muted-fg": vars.color.solid.fg[3]
-          },
-          "&[data-disabled]": {
-            "--color-bg": vars.color.tinted.bg[0],
-            "--color-border": vars.color.tinted.border[1],
-            "--color-fg": vars.color.tinted.border[4],
-            "--color-muted-bg": vars.color.tinted.bg[1],
-            "--color-muted-fg": vars.color.tinted.border[4]
-          }
-        }
-      }
-    }
-  }
-};
-function buildSelectableTones() {
-  const rules2 = {};
-  for (const tone of THEME_COLOR_STATE_TONES) {
-    const target = varNames.color, source = vars.color;
-    rules2[`&.${toneMap$2[tone]}`] = {
-      [target.tinted.bg[0]]: source.tinted[tone].bg[0],
-      [target.tinted.bg[1]]: source.tinted[tone].bg[1],
-      [target.tinted.bg[2]]: source.tinted[tone].bg[2],
-      [target.tinted.bg[3]]: source.tinted[tone].bg[3],
-      [target.tinted.bg[4]]: source.tinted[tone].bg[4],
-      [target.tinted.border[0]]: source.tinted[tone].border[0],
-      [target.tinted.border[1]]: source.tinted[tone].border[1],
-      [target.tinted.border[2]]: source.tinted[tone].border[2],
-      [target.tinted.border[3]]: source.tinted[tone].border[3],
-      [target.tinted.border[4]]: source.tinted[tone].border[4],
-      [target.tinted.fg[0]]: source.tinted[tone].fg[0],
-      [target.tinted.fg[1]]: source.tinted[tone].fg[1],
-      [target.tinted.fg[2]]: source.tinted[tone].fg[2],
-      [target.tinted.fg[3]]: source.tinted[tone].fg[3],
-      [target.tinted.fg[4]]: source.tinted[tone].fg[4],
-      [target.solid.bg[0]]: source.solid[tone].bg[0],
-      [target.solid.bg[1]]: source.solid[tone].bg[1],
-      [target.solid.bg[2]]: source.solid[tone].bg[2],
-      [target.solid.bg[3]]: source.solid[tone].bg[3],
-      [target.solid.bg[4]]: source.solid[tone].bg[4],
-      [target.solid.border[0]]: source.solid[tone].border[0],
-      [target.solid.border[1]]: source.solid[tone].border[1],
-      [target.solid.border[2]]: source.solid[tone].border[2],
-      [target.solid.border[3]]: source.solid[tone].border[3],
-      [target.solid.border[4]]: source.solid[tone].border[4],
-      [target.solid.fg[0]]: source.solid[tone].fg[0],
-      [target.solid.fg[1]]: source.solid[tone].fg[1],
-      [target.solid.fg[2]]: source.solid[tone].fg[2],
-      [target.solid.fg[3]]: source.solid[tone].fg[3],
-      [target.solid.fg[4]]: source.solid[tone].fg[4]
-    };
-  }
-  return rules2;
-}
-const avatarRules = {
-  avatar: {
-    backgroundColor: vars.color.avatar.bg,
-    position: "relative",
-    boxSizing: "border-box",
-    userSelect: "none",
-    boxShadow: `0 0 0 1px ${vars.color.bg}`,
-    lineHeight: 0,
-    width: vars.avatar.size,
-    height: vars.avatar.size,
-    borderRadius: vars.avatar.size,
-    "@nest": {
-      '&[data-status="inactive"]': {
-        opacity: 0.5
-      },
-      // &:is(button)
-      "&:is(button)": {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        margin: 0,
-        padding: 0,
-        border: 0,
-        font: "inherit",
-        color: "inherit",
-        outline: "none"
-      },
-      "&:is(button):focus": {
-        outline: "var(--avatar-focus-ring-width) solid var(--color-focus-ring)",
-        outlineOffset: "var(--avatar-focus-ring-offset)"
-      },
-      "&:is(button):focus:not(:focus-visible)": {
-        boxShadow: "none"
-      },
-      ":disabled &, [data-disabled] &": {
-        [varNames.color.avatar.bg]: vars.color.border,
-        [varNames.color.avatar.fg]: vars.color.bg
-      },
-      ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => ({
-        ...acc,
-        [`&.${color}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
-        }
-      }), {})
-    }
-  },
-  ...AVATAR_SIZE.reduce((acc, size) => ({
-    ...acc,
-    ...responsiveRules(`avatar-${size}`, {
-      [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-      [varNames.avatar.size]: vars.avatar.sizes[size].size
-    })
-  }), {}),
-  "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": {
-        display: "block",
-        width: "11px",
-        height: "7px",
-        position: "absolute",
-        top: "-5px",
-        left: "50%",
-        transform: "translateX(-6px)"
-      },
-      '[data-arrow-position="inside"] > &': {
-        transform: "rotate(-90deg) translate3d(0, 6px, 0)",
-        opacity: 0
-      },
-      '[data-arrow-position="top"] > &': {
-        opacity: 1,
-        transform: "rotate(0deg)"
-      },
-      '[data-arrow-position="bottom"] > &': {
-        opacity: 1,
-        transform: "rotate(-180deg)"
-      }
-    }
-  },
-  "avatar-image": {
-    "@nest": {
-      "& > img": {
-        display: "block",
-        position: "absolute",
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size
-      },
-      "& > span": {
-        display: "block",
-        position: "absolute",
-        width: vars.avatar.size,
-        height: vars.avatar.size,
-        borderRadius: vars.avatar.size,
-        boxShadow: [`inset 0 0 0 1px ${vars.color.avatar.bg}`, `inset 0 0 0 1.75px ${vars.color.bg}`].join(", ")
-      },
-      "[data-image-error] &": {
-        display: "none"
-      }
-    }
-  },
-  "avatar-initials": {
-    color: vars.color.avatar.fg,
-    borderRadius: vars.avatar.size
-  },
-  "avatar-counter": {
-    color: vars.color.fg,
-    backgroundColor: vars.color.bg,
-    boxShadow: [`0 0 0 1px ${vars.color.bg}`, `inset 0 0 0 1px ${vars.color.border}`].join(", "),
-    userSelect: "none",
-    borderRadius: vars.avatar.size,
-    height: vars.avatar.size,
-    "@nest": {
-      "&&": {
-        minWidth: vars.avatar.size
-      },
-      "[data-hide-inner-stroke] &": {
-        boxShadow: `0 0 0 1px ${vars.color.bg}`
-      }
-    }
-  },
-  "avatar-stack": {
-    "@nest": {
-      "& > div + div": {
-        marginLeft: vars.avatar.distance
-      }
-    }
-  }
-}, badgeToneRules = {};
-for (const tone of THEME_COLOR_STATE_TONES)
-  badgeToneRules[`badge-${tone}`] = {
-    "--color-bg": `var(--color-tinted-${tone}-bg-4)`,
-    "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-  };
-const badgeRules = {
-  badge: {
-    backgroundColor: "var(--color-bg)",
-    color: "var(--color-fg)",
-    verticalAlign: "top"
-  },
-  ...badgeToneRules
-}, boxRules = {
-  box: {
-    minWidth: 0,
-    minHeight: 0,
-    "@nest": {
-      "&:is(ul), &:is(ol)": {
-        listStyle: "none"
-      },
-      "&.muted": {
-        backgroundColor: "var(--color-muted-bg)"
-      }
-    }
-  },
-  // sizing
-  "box-content": {
-    boxSizing: "content-box"
-  },
-  "box-border": {
-    boxSizing: "border-box"
-  }
-}, toneMap$1 = {
-  default: "surface",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
-}, variantMap = {
-  default: "solid",
-  ghost: "ghost",
-  bleed: "tinted"
-}, buttonVariantRules = {};
-for (const mode of THEME_COLOR_BUTTON_MODES)
-  for (const tone of THEME_COLOR_STATE_TONES)
-    mode === "default" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      boxShadow: "none",
-      "--color-bg": `var(--color-solid-${tone}-bg-0)`,
-      "--color-border": `var(--color-solid-${tone}-border-1)`,
-      "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-      "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-solid-${tone}-bg-1)`,
-          "--color-border": `var(--color-solid-${tone}-border-2)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-solid-${tone}-bg-2)`,
-          "--color-border": `var(--color-solid-${tone}-border-3)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-solid-${tone}-bg-2)`,
-          "--color-border": `var(--color-solid-${tone}-border-3)`,
-          "--color-fg": `var(--color-solid-${tone}-fg-0)`,
-          "--color-muted-fg": `var(--color-solid-${tone}-fg-4)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-1)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)",
-          "--color-muted-fg": "var(--color-tinted-default-border-1)"
-        }
-      }
-    }), mode === "bleed" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      boxShadow: "none",
-      "--color-bg": `var(--color-tinted-${tone}-bg-0)`,
-      "--color-border": `var(--color-tinted-${tone}-border-1)`,
-      "--color-fg": `var(--color-tinted-${tone}-fg-2)`,
-      "--color-muted-fg": `var(--color-tinted-${tone}-fg-4)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-1)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-3)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-3)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`,
-          "--color-muted-fg": `var(--color-tinted-${tone}-fg-3)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-0)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)",
-          "--color-muted-fg": "var(--color-tinted-default-border-1)"
-        }
-      }
-    }), mode === "ghost" && (buttonVariantRules[`&.${variantMap[mode]}.${toneMap$1[tone]}`] = {
-      "--color-bg": `var(--color-tinted-${tone}-bg-1)`,
-      "--color-border": `var(--color-tinted-${tone}-border-0)`,
-      "--color-fg": `var(--color-tinted-${tone}-fg-2)`,
-      "@nest": {
-        "&:not([data-disabled]):hover": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-2)`,
-          "--color-border": `var(--color-tinted-${tone}-border-1)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&:not([data-disabled]):active": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-3)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&:not([data-disabled])[data-selected]": {
-          "--color-bg": `var(--color-tinted-${tone}-bg-3)`,
-          "--color-border": `var(--color-tinted-${tone}-border-2)`,
-          "--color-fg": `var(--color-tinted-${tone}-fg-1)`
-        },
-        "&[data-disabled]": {
-          "--color-bg": "var(--color-tinted-default-bg-0)",
-          "--color-border": "var(--color-tinted-default-border-0)",
-          "--color-fg": "var(--color-tinted-default-border-2)"
-        }
-      }
-    });
-const buttonRules = {
-  button: {
-    WebkitFontSmoothing: "inherit",
-    appearance: "none",
-    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(--color-bg)",
-    color: "var(--color-fg)",
-    boxShadow: "inset 0 0 0 var(--button-border-width) var(--color-border)",
-    "@nest": {
-      "&::-moz-focus-inner": {
-        border: 0,
-        padding: 0
-      },
-      "&:focus": {
-        outline: "var(--button-focus-ring-width) solid var(--color-focus-ring)",
-        outlineOffset: "var(--button-focus-ring-offset)"
-      },
-      "&:focus:not(:focus-visible)": {
-        outline: "none"
-      },
-      ...buttonVariantRules
-    }
-  },
-  "button-loading-box": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: "var(--color-bg)",
-    borderRadius: "inherit",
-    zIndex: 1,
-    opacity: 0.8
-  }
-}, toneMap = {
-  transparent: "canvas",
-  default: "surface",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical",
-  inherit: void 0
-}, cardRules = {
-  card: {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    [varNames.color.bg]: vars.color.tinted.default.bg[0],
-    [varNames.color.border]: vars.color.tinted.default.border[1],
-    [varNames.color.fg]: vars.color.tinted.default.fg[0],
-    [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
-    [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
-    "@nest": {
-      ...buildCardTonesRules(),
-      "&[data-checkered]": {
-        "--card-bg-image": "repeating-conic-gradient(var(--color-tinted-default-bg-0) 0% 25%, var(--color-tinted-default-bg-1) 0% 50%)",
-        backgroundSize: "var(--space-3) var(--space-3)",
-        backgroundPosition: "50% 50%",
-        backgroundImage: "var(--card-bg-image)"
-      },
-      "&:is(a)": {
-        outline: "none",
-        textDecoration: "none",
-        "@nest": {
-          "&:not(:disabled)": {
-            "@nest": {
-              "&:hover": {
-                "--color-bg": "var(--color-tinted-default-bg-1)",
-                "--color-fg": "var(--color-tinted-default-fg-0)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-2)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-3)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&:active, &[data-pressed]": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              //
-              "&[data-selectable]:focus, &[data-selected]": {
-                "--color-bg": "var(--color-solid-default-bg-1)",
-                "--color-fg": "var(--color-solid-default-fg-1)",
-                "--color-muted-bg": "var(--color-solid-default-bg-0)",
-                "--color-muted-fg": "var(--color-solid-default-fg-3)"
-                // '--color-icon': 'var(--color-solid-default-fg-1)',
-              }
-            }
-          }
-        }
-      },
-      "&:is(button)": {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        outline: "none",
-        font: "inherit",
-        textAlign: "inherit",
-        border: 0,
-        width: ["-moz-available", "-webkit-fill-available", "stretch"],
-        cursor: "default",
-        // todo
-        // --card-focus-ring-box-shadow: none;
-        // box-shadow: var(--card-focus-ring-box-shadow);
-        "@nest": {
-          "&:not(:disabled)": {
-            "@nest": {
-              "&:hover": {
-                "--color-bg": "var(--color-tinted-default-bg-1)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-2)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-3)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&:active": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              "&[data-pressed]": {
-                "--color-bg": "var(--color-tinted-default-bg-2)",
-                "--color-fg": "var(--color-tinted-default-fg-1)",
-                "--color-muted-bg": "var(--color-tinted-default-bg-3)",
-                "--color-muted-fg": "var(--color-tinted-default-fg-4)"
-                // '--color-icon': 'var(--color-tinted-default-fg-1)',
-              },
-              // &:focus,
-              "&[data-selectable]:focus, &[data-selected]": {
-                "--color-bg": "var(--color-solid-default-bg-2)",
-                "--color-border": "var(--color-solid-default-border-0)",
-                "--color-fg": "var(--color-solid-default-fg-1)",
-                "--color-muted-bg": "var(--color-solid-default-bg-3)",
-                "--color-muted-fg": "var(--color-solid-default-fg-4)"
-                // '--color-icon': 'var(--color-solid-default-fg-1)',
-              }
-            }
-          },
-          "&:disabled": {
-            "--color-bg": "var(--color-tinted-default-bg-0)",
-            "--color-fg": "var(--color-tinted-default-border-2)",
-            "--color-muted-bg": "var(--color-tinted-default-bg-1)",
-            "--color-muted-fg": "var(--color-tinted-default-border-1)"
-          }
-        }
-      },
-      "&:is(pre)": {
-        font: "inherit"
-      }
-    },
-    ////////////////////////////////////////////////////////////////////////////////////////////////
-    // Legacy `--card` variables
-    ////////////////////////////////////////////////////////////////////////////////////////////////
-    //
-    // '--card-accent-fg-color': 'var(--color-accent-fg)',
-    // ...THEME_COLOR_AVATAR_COLORS.reduce((acc, color) => {
-    //   return {
-    //     ...acc,
-    //     [`--card-avatar-${color}-bg-color`]: `var(--color-avatar-${color}-bg)`,
-    //     [`--card-avatar-${color}-fg-color`]: `var(--color-avatar-${color}-fg)`,
-    //   }
-    // }, {} as Properties),
-    // '--card-backdrop-color': 'var(--color-backdrop)',
-    // ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => {
-    //   return {
-    //     ...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)`,
-    //   }
-    // }, {} as Properties),
-    "--card-bg-color": vars.color.bg,
-    "--card-bg2-color": vars.color.muted.bg,
-    "--card-border-color": vars.color.border,
-    "--card-code-bg-color": vars.color.muted.bg,
-    "--card-code-fg-color": vars.color.tinted.default.fg[4],
-    "--card-fg-color": vars.color.fg,
-    "--card-focus-ring-color": vars.color.focusRing,
-    "--card-icon-color": vars.color.fg,
-    "--card-kbd-bg-color": vars.color.muted.bg,
-    "--card-kbd-border-color": vars.color.tinted.default.border[1],
-    "--card-kbd-fg-color": vars.color.muted.fg,
-    "--card-link-color": vars.color.link.fg,
-    "--card-link-fg-color": vars.color.link.fg,
-    "--card-muted-bg-color": vars.color.muted.bg,
-    // 'var(--color-muted-bg)', // vars.color.tinted.default.bg[1],
-    "--card-muted-fg-color": vars.color.muted.fg,
-    // vars.color.tinted.default.fg[4],
-    "--card-shadow-outline-color": vars.color.shadow.outline,
-    "--card-shadow-umbra-color": vars.color.shadow.umbra,
-    "--card-shadow-penumbra-color": vars.color.shadow.penumbra,
-    "--card-shadow-ambient-color": vars.color.shadow.ambient,
-    // '--card-skeleton-from-color': 'var(--color-skeleton-from)',
-    // '--card-skeleton-to-color': 'var(--color-skeleton-to)',
-    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
-    "--card-hairline-hard-color": vars.color.tinted.default.border[2]
-  }
-};
-function buildCardTonesRules() {
-  const rules2 = {};
-  for (const scheme of ["light", "dark"]) {
-    const props = {
-      colorScheme: scheme
-    };
-    for (const cardTone of THEME_COLOR_CARD_TONES) {
-      const source = vars.color[scheme][cardTone], target = varNames.color[cardTone];
-      Object.assign(props, {
-        ...buildCardAvatarColorProperties({
-          source,
-          target
-        }),
-        [target.backdrop]: source.backdrop,
-        [target.focusRing]: source.focusRing,
-        [target.link.fg]: source.link.fg,
-        [target.shadow.outline]: source.shadow.outline,
-        [target.shadow.umbra]: source.shadow.umbra,
-        [target.shadow.penumbra]: source.shadow.penumbra,
-        [target.shadow.ambient]: source.shadow.ambient,
-        [target.token.atrule]: source.token.atrule,
-        [target.token.attrName]: source.token.attrName,
-        [target.token.attrValue]: source.token.attrValue,
-        [target.token.attribute]: source.token.attribute,
-        [target.token.boolean]: source.token.boolean,
-        [target.token.builtin]: source.token.builtin,
-        [target.token.cdata]: source.token.cdata,
-        [target.token.char]: source.token.char,
-        [target.token.class]: source.token.class,
-        [target.token.className]: source.token.className,
-        [target.token.comment]: source.token.comment,
-        [target.token.constant]: source.token.constant,
-        [target.token.deleted]: source.token.deleted,
-        [target.token.doctype]: source.token.doctype,
-        [target.token.entity]: source.token.entity,
-        [target.token.function]: source.token.function,
-        [target.token.hexcode]: source.token.hexcode,
-        [target.token.id]: source.token.id,
-        [target.token.important]: source.token.important,
-        [target.token.inserted]: source.token.inserted,
-        [target.token.keyword]: source.token.keyword,
-        [target.token.number]: source.token.number,
-        [target.token.operator]: source.token.operator,
-        [target.token.prolog]: source.token.prolog,
-        [target.token.property]: source.token.property,
-        [target.token.pseudoClass]: source.token.pseudoClass,
-        [target.token.pseudoElement]: source.token.pseudoElement,
-        [target.token.punctuation]: source.token.punctuation,
-        [target.token.regex]: source.token.regex,
-        [target.token.selector]: source.token.selector,
-        [target.token.string]: source.token.string,
-        [target.token.symbol]: source.token.symbol,
-        [target.token.tag]: source.token.tag,
-        [target.token.unit]: source.token.unit,
-        [target.token.url]: source.token.url,
-        [target.token.variable]: source.token.variable,
-        ...buildCardColorVariantProperties({
-          source: source.solid,
-          target: target.solid
-        }),
-        ...buildCardColorVariantProperties({
-          source: source.tinted,
-          target: target.tinted
-        })
-      });
-    }
-    rules2[`&.${scheme}`] = props;
-  }
-  for (const cardTone of THEME_COLOR_CARD_TONES) {
-    const source = vars.color[cardTone], target = varNames.color;
-    rules2[`&.${toneMap[cardTone]}`] = {
-      ...buildCardAvatarColorProperties({
-        source,
-        target
-      }),
-      [target.backdrop]: source.backdrop,
-      [target.focusRing]: source.focusRing,
-      [target.link.fg]: source.link.fg,
-      [target.shadow.outline]: source.shadow.outline,
-      [target.shadow.umbra]: source.shadow.umbra,
-      [target.shadow.penumbra]: source.shadow.penumbra,
-      [target.shadow.ambient]: source.shadow.ambient,
-      [target.token.atrule]: source.token.atrule,
-      [target.token.attrName]: source.token.attrName,
-      [target.token.attrValue]: source.token.attrValue,
-      [target.token.attribute]: source.token.attribute,
-      [target.token.boolean]: source.token.boolean,
-      [target.token.builtin]: source.token.builtin,
-      [target.token.cdata]: source.token.cdata,
-      [target.token.char]: source.token.char,
-      [target.token.class]: source.token.class,
-      [target.token.className]: source.token.className,
-      [target.token.comment]: source.token.comment,
-      [target.token.constant]: source.token.constant,
-      [target.token.deleted]: source.token.deleted,
-      [target.token.doctype]: source.token.doctype,
-      [target.token.entity]: source.token.entity,
-      [target.token.function]: source.token.function,
-      [target.token.hexcode]: source.token.hexcode,
-      [target.token.id]: source.token.id,
-      [target.token.important]: source.token.important,
-      [target.token.inserted]: source.token.inserted,
-      [target.token.keyword]: source.token.keyword,
-      [target.token.number]: source.token.number,
-      [target.token.operator]: source.token.operator,
-      [target.token.prolog]: source.token.prolog,
-      [target.token.property]: source.token.property,
-      [target.token.pseudoClass]: source.token.pseudoClass,
-      [target.token.pseudoElement]: source.token.pseudoElement,
-      [target.token.punctuation]: source.token.punctuation,
-      [target.token.regex]: source.token.regex,
-      [target.token.selector]: source.token.selector,
-      [target.token.string]: source.token.string,
-      [target.token.symbol]: source.token.symbol,
-      [target.token.tag]: source.token.tag,
-      [target.token.unit]: source.token.unit,
-      [target.token.url]: source.token.url,
-      [target.token.variable]: source.token.variable,
-      ...buildCardColorVariantProperties({
-        source: source.solid,
-        target: target.solid
-      }),
-      ...buildCardColorVariantProperties({
-        source: source.tinted,
-        target: target.tinted
-      })
-    };
-  }
-  return rules2;
-}
-function buildCardAvatarColorProperties(options) {
-  const {
-    source,
-    target
-  } = options, props = {};
-  for (const hue of HUES)
-    Object.assign(props, {
-      [target.avatar[hue].bg]: source.avatar[hue].bg,
-      [target.avatar[hue].fg]: source.avatar[hue].fg
-    });
-  return props;
-}
-function buildCardColorVariantProperties(options) {
-  const {
-    source,
-    target
-  } = options, props = {};
-  for (const elementTone of THEME_COLOR_STATE_TONES)
-    Object.assign(props, {
-      [target[elementTone].bg[0]]: source[elementTone].bg[0],
-      [target[elementTone].bg[1]]: source[elementTone].bg[1],
-      [target[elementTone].bg[2]]: source[elementTone].bg[2],
-      [target[elementTone].bg[3]]: source[elementTone].bg[3],
-      [target[elementTone].bg[4]]: source[elementTone].bg[4],
-      [target[elementTone].border[0]]: source[elementTone].border[0],
-      [target[elementTone].border[1]]: source[elementTone].border[1],
-      [target[elementTone].border[2]]: source[elementTone].border[2],
-      [target[elementTone].border[3]]: source[elementTone].border[3],
-      [target[elementTone].border[4]]: source[elementTone].border[4],
-      [target[elementTone].fg[0]]: source[elementTone].fg[0],
-      [target[elementTone].fg[1]]: source[elementTone].fg[1],
-      [target[elementTone].fg[2]]: source[elementTone].fg[2],
-      [target[elementTone].fg[3]]: source[elementTone].fg[3],
-      [target[elementTone].fg[4]]: source[elementTone].fg[4]
-    });
-  return props;
-}
-const 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)',
-        "--color-checkbox-bg": "var(--color-tinted-default-bg-0)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-1)",
-        "--color-checkbox-fg": "var(--color-tinted-default-fg-0)"
-        // 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"
-      },
-      "&:hover + span": {
-        "--color-checkbox-bg": "var(--color-tinted-default-bg-1)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-fg": "var(--color-tinted-default-fg-0)"
-      },
-      "&:checked + span": {
-        "--color-checkbox-bg": "var(--color-solid-default-bg-0)",
-        "--color-checkbox-border": "var(--color-solid-default-bg-0)",
-        "--color-checkbox-fg": "var(--color-solid-default-fg-0)"
-        // '--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-tinted-default-bg-1)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-0)",
-        "--color-checkbox-fg": "var(--color-tinted-default-border-2)"
-      },
-      "&:checked:disabled + span": {
-        "--color-checkbox-bg": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-border": "var(--color-tinted-default-border-2)",
-        "--color-checkbox-fg": "var(--color-tinted-default-bg-0)"
-      },
-      // '&: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)",
-    "--font-feature-settings": "var(--font-code-feature-settings)",
-    color: "var(--color-code-fg)",
-    "@nest": {
-      "& > code": {
-        fontFamily: "inherit"
-      },
-      // & code {
-      //   font-family: inherit;
-      //   &.refractor .token {
-      //     ${codeSyntaxHighlightingStyle}
-      //   }
-      // }
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none",
-        borderRadius: "1px"
-      },
-      "& svg": {
-        // Some popular CSS libraries change the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: "inline"
-      },
-      "& [data-sanity-icon]": {
-        verticalAlign: "baseline"
-      }
-    }
-  },
-  ...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)"
-    // '--font-cap-height': 'var(--font-code-0-cap-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)"
-    // '--font-cap-height': 'var(--font-code-1-cap-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)"
-    // '--font-cap-height': 'var(--font-code-2-cap-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)"
-    // '--font-cap-height': 'var(--font-code-3-cap-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)"
-    // '--font-cap-height': 'var(--font-code-4-cap-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)",
-    "--font-feature-settings": "var(--font-heading-feature-settings)",
-    color: "var(--color-fg)",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  // 'heading-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-  "heading-muted": {
-    "--color-fg": "var(--color-tinted-default-fg-4)"
-  },
-  ...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)"
-    // '--font-cap-height': 'var(--font-heading-0-cap-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)"
-    // '--font-cap-height': 'var(--font-heading-1-cap-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)"
-    // '--font-cap-height': 'var(--font-heading-2-cap-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-heading-3-ascender-height)",
-    "--font-descender-height": "var(--font-heading-3-descender-height)"
-    // '--font-cap-height': 'var(--font-heading-3-cap-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)"
-    // '--font-cap-height': 'var(--font-heading-4-cap-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)"
-    // '--font-cap-height': 'var(--font-heading-5-cap-height)',
-  })
-}, kbdRules = {
-  kbd: {
-    // '--color-bg': 'var(--color-tinted-default-bg-1)',
-    // '--color-border': 'var(--color-tinted-default-border-2)',
-    // '--color-fg': 'var(--color-tinted-default-fg-3)',
-    boxShadow: "inset 0 0 0 0.5px var(--color-border)",
-    background: "var(--color-muted-bg)",
-    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)",
-    "--font-feature-settings": "var(--font-label-feature-settings)",
-    color: "var(--color-fg)",
-    textTransform: "uppercase",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      }
-    }
-  },
-  "label-accent": {
-    "--color-fg": "var(--color-accent-fg)"
-  },
-  "label-muted": {
-    "--color-fg": "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)"
-    // '--font-cap-height': 'var(--font-label-0-cap-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)"
-    // '--font-cap-height': 'var(--font-label-1-cap-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)"
-    // '--font-cap-height': 'var(--font-label-2-cap-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)"
-    // '--font-cap-height': 'var(--font-label-3-cap-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)"
-    // '--font-cap-height': 'var(--font-label-4-cap-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)"
-    // '--font-cap-height': 'var(--font-label-5-cap-height)',
-  })
-}, popoverRules = {
-  //
-}, radioRules = {
-  radio: {
-    position: "relative",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-block"
-      },
-      "& input": {
-        appearance: "none",
-        position: "absolute",
-        top: "0",
-        left: "0",
-        opacity: "0",
-        height: "100%",
-        width: "100%",
-        outline: "none",
-        zIndex: "1",
-        padding: "0",
-        margin: "0",
-        borderRadius: "9999px",
-        border: "none"
-      },
-      /* enabled */
-      "& > input + span": {
-        display: "block",
-        position: "relative",
-        width: "var(--input-radio-size)",
-        height: "var(--input-radio-size)",
-        borderRadius: "9999px",
-        backgroundColor: "var(--color-input-bg)",
-        boxShadow: "inset 0 0 0 1px var(--color-input-border)",
-        // border-radius: ${rem(input.radio.size / 2)};
-        // background: ${color.input.default.enabled.bg};
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-        "--color-input-fg": "var(--color-tinted-default-fg-0)",
-        "--color-input-bg": "var(--color-tinted-default-bg-0)",
-        "--color-input-border": "var(--color-tinted-default-border-1)"
-      },
-      "& > input + span::after": {
-        content: '""',
-        position: "absolute",
-        top: "calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)",
-        left: "calc((var(--input-radio-size) - var(--input-radio-mark-size)) / 2)",
-        width: "var(--input-radio-mark-size)",
-        height: "var(--input-radio-mark-size)",
-        backgroundColor: "var(--color-input-fg)",
-        borderRadius: "9999px",
-        opacity: 0
-      },
-      /* hovered */
-      "& > input:not(:disabled):hover + span": {
-        "--color-input-bg": "var(--color-tinted-default-bg-1)",
-        "--color-input-border": "var(--color-tinted-default-border-2)"
-      },
-      /* focused */
-      "& > input:not(:disabled):focus + span": {
-        "--color-input-border": "var(--color-tinted-default-border-2)"
-        // box-shadow: ${focusRingStyle({
-        //   border: {width: input.border.width, color: color.input.default.enabled.border},
-        //   focusRing: input.radio.focusRing,
-        // })};
-      },
-      "& > input:not(:disabled):focus:not(:focus-visible) + span": {
-        // box-shadow: ${focusRingBorderStyle({
-        //   color: color.input.default.enabled.border,
-        //   width: input.border.width,
-        // })};
-      },
-      "& > input:checked + span::after": {
-        opacity: 1
-      }
-      //   /* customValidity */
-      //   &[data-error] + span {
-      //     background-color: ${color.input.invalid.enabled.border};
-      //     box-shadow: ${focusRingBorderStyle({
-      //       width: input.border.width,
-      //       color: color.input.invalid.enabled.muted.bg,
-      //     })};
-      //     &::after {
-      //       background: ${color.input.invalid.enabled.muted.bg};
-      //     }
-      //   }
-      //   /* read only */
-      //   &[data-read-only] + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.readOnly.border};
-      //     background: ${color.input.default.readOnly.bg};
-      //     &::after {
-      //       background: ${color.input.default.readOnly.border};
-      //     }
-      //   }
-      //   /* disabled */
-      //   &:not([data-read-only]):disabled + span {
-      //     box-shadow: 0 0 0 1px ${color.input.default.disabled.border};
-      //     background: ${color.input.default.disabled.bg};
-      //     &::after {
-      //       background: ${color.input.default.disabled.border};
-      //     }
-      //   }
-      // `
-    }
-  }
-}, selectRules = {
-  select: {
-    "@nest": {
-      "& > select:disabled": {
-        opacity: 1
-      }
-    }
-  },
-  "select-presentation": {
-    "@nest": {
-      "& > span": {
-        // place icon to the right
-        position: "absolute",
-        top: 0,
-        right: 0
-      }
-    }
-  }
-}, 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-element": {
-    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": "var(--color-tinted-default-border-2)",
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
-    "--switch-fg-color": "var(--color-tinted-default-bg-0)",
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
-    "--switch-thumb-offset": "0",
-    "--switch-thumb-size": "calc(var(--input-switch-height) - var(--input-switch-padding) * 2)",
-    display: "block",
-    // &:not([hidden]) {
-    //   display: block;
-    // }
-    position: "relative",
-    width: "var(--input-switch-width)",
-    height: "var(--input-switch-height)",
-    borderRadius: "calc(var(--input-switch-height) / 2)",
-    outlineOffset: "var(--input-switch-focus-ring-offset)",
-    // Make sure it’s not possible to interact with the presentation element
-    pointerEvents: "none",
-    "@nest": {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
-      ".switch-element:focus + &": {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-        outline: "var(--input-switch-focus-ring-width) solid var(--color-focus-ring)"
-      },
-      "input:focus:not(:focus-visible) + &": {
-        outline: "none"
-      },
-      "input:checked + &": {
-        "--switch-bg-color": "var(--color-solid-default-bg-0)",
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
-        "--switch-fg-color": "var(--color-solid-default-fg-0)"
-      },
-      // 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-element:checked + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))"
-      }
-    }
-    // @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};
-    //   }
-    // }
-  },
-  "switch-track": {
-    display: "block",
-    backgroundColor: "var(--switch-bg-color)",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: "inherit",
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
-    transition: "box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
-  },
-  "switch-thumb": {
-    // '--switch-thumb-offset': '0',
-    display: "block",
-    position: "absolute",
-    left: "var(--input-switch-padding)",
-    top: "var(--input-switch-padding)",
-    width: "var(--switch-thumb-size)",
-    height: "var(--switch-thumb-size)",
-    backgroundColor: "var(--switch-fg-color)",
-    borderRadius: "9999px",
-    boxShadow: "0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)",
-    transform: "translate3d(var(--switch-thumb-offset), 0, 0)",
-    transition: "transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-    // 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`
-    //   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)",
-    "--font-feature-settings": "var(--font-text-feature-settings)",
-    color: "var(--color-fg)",
-    "@nest": {
-      "& a": {
-        color: "var(--color-link-fg)",
-        textDecoration: "none"
-      },
-      "& a:hover": {
-        color: "var(--color-fg)"
-      }
-      // '& svg': {
-      //   color: 'var(--color-icon)',
-      // },
-    }
-  },
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-  "text-muted": {
-    color: "var(--color-muted-fg)"
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  },
-  ...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)"
-    // '--font-cap-height': 'var(--font-text-0-cap-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)"
-    // '--font-cap-height': 'var(--font-text-1-cap-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)"
-    // '--font-cap-height': 'var(--font-text-2-cap-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)"
-    // '--font-cap-height': 'var(--font-text-3-cap-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)"
-    // '--font-cap-height': 'var(--font-text-4-cap-height)',
-  })
-}, textAreaRules = {
-  "text-area": {
-    //
-  }
-}, textInputRules = {
-  "text-input": {
-    "--font-family": vars.font.text.family,
-    "@nest": {
-      "& > span": {
-        borderRadius: "inherit"
-      }
-    }
-  },
-  "text-input-prefix": {
-    borderTop: "1px solid var(--color-border)",
-    borderLeft: "1px solid var(--color-border)",
-    borderBottom: "1px solid var(--color-border)",
-    borderTopRightRadius: "0 !important",
-    borderBottomRightRadius: "0 !important",
-    "@nest": {
-      "& > span": {
-        display: "block",
-        margin: "-1px"
-      }
-    }
-  },
-  "text-input-suffix": {
-    borderTop: "1px solid var(--color-border)",
-    borderRight: "1px solid var(--color-border)",
-    borderBottom: "1px solid var(--color-border)",
-    borderTopLeftRadius: "0 !important",
-    borderBottomLeftRadius: "0 !important",
-    "@nest": {
-      "& > span": {
-        display: "block",
-        margin: "-1px"
-      }
-    }
-  },
-  "text-input-presentation": {
-    // 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)',
-    // '--input-border-color': 'var(--color-tinted-default-border-1)',
-    // '--input-box-shadow': 'inset 0 0 0 1px var(--input-border-color)',
-    // 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};
-    // '@nest': {
-    //   'input:hover + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    //   'input:focus + &': {
-    //     '--input-border-color': 'var(--color-tinted-default-border-2)',
-    //   },
-    // },
-    // &[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: "var(--color-token-atrule)"
-      },
-      "&.attr-name": {
-        color: "var(--color-token-attr-name)"
-      },
-      "&.attr-value": {
-        color: "var(--color-token-attr-value)"
-      },
-      "&.attribute": {
-        color: "var(--color-token-attribute)"
-      },
-      "&.boolean": {
-        color: "var(--color-token-boolean)"
-      },
-      "&.builtin": {
-        color: "var(--color-token-builtin)"
-      },
-      "&.cdata": {
-        color: "var(--color-token-cdata)"
-      },
-      "&.char": {
-        color: "var(--color-token-char)"
-      },
-      "&.class": {
-        color: "var(--color-token-class)"
-      },
-      "&.class-name": {
-        color: "var(--color-token-class-name)"
-      },
-      "&.comment": {
-        color: "var(--color-token-comment)"
-      },
-      "&.constant": {
-        color: "var(--color-token-constant)"
-      },
-      "&.deleted": {
-        color: "var(--color-token-deleted)"
-      },
-      "&.doctype": {
-        color: "var(--color-token-doctype)"
-      },
-      "&.entity": {
-        color: "var(--color-token-entity)"
-      },
-      "&.function": {
-        color: "var(--color-token-function)"
-      },
-      "&.hexcode": {
-        color: "var(--color-token-hexcode)"
-      },
-      "&.id": {
-        color: "var(--color-token-id)"
-      },
-      "&.important": {
-        color: "var(--color-token-important)"
-      },
-      "&.inserted": {
-        color: "var(--color-token-inserted)"
-      },
-      "&.keyword": {
-        color: "var(--color-token-keyword)"
-      },
-      "&.number": {
-        color: "var(--color-token-number)"
-      },
-      "&.operator": {
-        color: "var(--color-token-operator)"
-      },
-      "&.prolog": {
-        color: "var(--color-token-prolog)"
-      },
-      "&.property": {
-        color: "var(--color-token-property)"
-      },
-      "&.pseudo-class": {
-        color: "var(--color-token-pseudo-class)"
-      },
-      "&.pseudo-element": {
-        color: "var(--color-token-pseudo-element)"
-      },
-      "&.punctuation": {
-        color: "var(--color-token-punctuation)"
-      },
-      "&.attr-value &:not(.attr-equals).punctuation": {
-        color: "inherit"
-      },
-      "&.regex": {
-        color: "var(--color-token-regex)"
-      },
-      "&.selector": {
-        color: "var(--color-token-selector)"
-      },
-      "&.string": {
-        color: "var(--color-token-string)"
-      },
-      "&.symbol": {
-        color: "var(--color-token-symbol)"
-      },
-      "&.tag": {
-        color: "var(--color-token-tag)"
-      },
-      "&.unit": {
-        color: "var(--color-token-unit)"
-      },
-      "&.url": {
-        color: "var(--color-token-url)"
-      },
-      "&.variable": {
-        color: "var(--color-token-variable)"
-      }
-    }
-  }
-}, tooltipRules = {
-  tooltip: {
-    pointerEvents: "none"
-  },
-  "tooltip-card": {
-    willChange: "transform",
-    "@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("inline-grid", {
-    gridTemplateRows: "auto",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-grid"
-      }
-    }
-  }),
-  ...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-auto", {
-    flex: "auto"
-  }),
-  ...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)",
-    fontFeatureSettings: "var(--font-feature-settings)",
-    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-icon-offset": "calc(((var(--font-line-height) - var(--font-ascender-height) - var(--font-descender-height)) - var(--font-icon-size)) / 2)",
-    "--font-weight": "var(--font-weight-regular)",
-    "@nest": {
-      "&:before": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginTop: "calc((0px - var(--font-ascender-height) - var(--font-descender-height)) - 1px)"
-      },
-      "&:after": {
-        content: '""',
-        display: "block",
-        height: 0,
-        marginBottom: "-1px"
-      },
-      "& svg": {
-        // Certain popular CSS libraries changes the defaults for SVG display
-        // Make sure SVGs are rendered as inline elements
-        display: "inline"
-      },
-      // todo
-      // '& svg:not([data-sanity-icon])': {
-      //   fontSize: 'calc(var(--custom-icon-size) / 16 * 1rem)',
-      //   margin: 'var(--custom-icon-offset)',
-      // },
-      "& [data-sanity-icon]": {
-        fontSize: "var(--font-icon-size)",
-        margin: "var(--font-icon-offset)",
-        vectorEffect: "non-scaling-stroke"
-      }
-    }
-  },
-  "font-regular": {
-    "--font-weight": "var(--font-weight-regular)"
-  },
-  "font-medium": {
-    "--font-weight": "var(--font-weight-medium)"
-  },
-  "font-semibold": {
-    "--font-weight": "var(--font-weight-semibold)"
-  },
-  "font-bold": {
-    "--font-weight": "var(--font-weight-bold)"
-  },
-  // align
-  ...responsiveRules("text-align-initial", {
-    textAlign: "initial"
-  }),
-  ...responsiveRules("text-align-left", {
-    textAlign: "left"
-  }),
-  ...responsiveRules("text-align-center", {
-    textAlign: "center"
-  }),
-  ...responsiveRules("text-align-right", {
-    textAlign: "right"
-  }),
-  ...responsiveRules("text-align-justify", {
-    textAlign: "justify"
-  })
-}, gapRules = {
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`g-${space}`.replace(".", "_"), {
-      gap: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gx-${space}`.replace(".", "_"), {
-      columnGap: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`gy-${space}`.replace(".", "_"), {
-      rowGap: vars.space[space]
-    })
-  }), {})
-}, gridRules = {
-  // autoCols
-  ...responsiveRules("auto-cols-auto", {
-    gridAutoColumns: "auto"
-  }),
-  ...responsiveRules("auto-cols-min", {
-    gridAutoColumns: "min"
-  }),
-  ...responsiveRules("auto-cols-max", {
-    gridAutoColumns: "max"
-  }),
-  ...responsiveRules("auto-cols-fr", {
-    gridAutoColumns: "fr"
-  }),
-  // autoFlow
-  ...responsiveRules("auto-flow-row", {
-    gridAutoFlow: "row"
-  }),
-  ...responsiveRules("auto-flow-column", {
-    gridAutoFlow: "column"
-  }),
-  ...responsiveRules("auto-flow-row-dense", {
-    gridAutoFlow: "row dense"
-  }),
-  ...responsiveRules("auto-flow-column-dense", {
-    gridAutoFlow: "column dense"
-  }),
-  // autoRows
-  ...responsiveRules("auto-rows-auto", {
-    gridAutoRows: "auto"
-  }),
-  ...responsiveRules("auto-rows-min", {
-    gridAutoRows: "min-content"
-  }),
-  ...responsiveRules("auto-rows-max", {
-    gridAutoRows: "max-content"
-  }),
-  ...responsiveRules("auto-rows-fr", {
-    gridAutoRows: "minmax(0, 1fr)"
-  }),
-  // columns
-  ...responsiveRules("columns-1", {
-    gridTemplateColumns: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("columns-2", {
-    gridTemplateColumns: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("columns-3", {
-    gridTemplateColumns: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("columns-4", {
-    gridTemplateColumns: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("columns-5", {
-    gridTemplateColumns: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("columns-6", {
-    gridTemplateColumns: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("columns-7", {
-    gridTemplateColumns: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("columns-8", {
-    gridTemplateColumns: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("columns-9", {
-    gridTemplateColumns: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("columns-10", {
-    gridTemplateColumns: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("columns-12", {
-    gridTemplateColumns: "repeat(12, 1fr)"
-  }),
-  // rows
-  ...responsiveRules("rows-1", {
-    gridTemplateRows: "repeat(1, 1fr)"
-  }),
-  ...responsiveRules("rows-2", {
-    gridTemplateRows: "repeat(2, 1fr)"
-  }),
-  ...responsiveRules("rows-3", {
-    gridTemplateRows: "repeat(3, 1fr)"
-  }),
-  ...responsiveRules("rows-4", {
-    gridTemplateRows: "repeat(4, 1fr)"
-  }),
-  ...responsiveRules("rows-5", {
-    gridTemplateRows: "repeat(5, 1fr)"
-  }),
-  ...responsiveRules("rows-6", {
-    gridTemplateRows: "repeat(6, 1fr)"
-  }),
-  ...responsiveRules("rows-7", {
-    gridTemplateRows: "repeat(7, 1fr)"
-  }),
-  ...responsiveRules("rows-8", {
-    gridTemplateRows: "repeat(8, 1fr)"
-  }),
-  ...responsiveRules("rows-9", {
-    gridTemplateRows: "repeat(9, 1fr)"
-  }),
-  ...responsiveRules("rows-10", {
-    gridTemplateRows: "repeat(10, 1fr)"
-  }),
-  ...responsiveRules("rows-12", {
-    gridTemplateRows: "repeat(12, 1fr)"
-  })
-}, gridItemRules = {
-  // column
-  ...responsiveRules("col-auto", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-full", {
-    gridColumn: "1 / -1"
-  }),
-  ...responsiveRules("col-1", {
-    gridColumn: "span 1 / span 1"
-  }),
-  ...responsiveRules("col-2", {
-    gridColumn: "span 2 / span 2"
-  }),
-  ...responsiveRules("col-3", {
-    gridColumn: "span 3 / span 3"
-  }),
-  ...responsiveRules("col-4", {
-    gridColumn: "span 4 / span 4"
-  }),
-  ...responsiveRules("col-5", {
-    gridColumn: "span 5 / span 5"
-  }),
-  ...responsiveRules("col-6", {
-    gridColumn: "span 6 / span 6"
-  }),
-  ...responsiveRules("col-7", {
-    gridColumn: "span 7 / span 7"
-  }),
-  ...responsiveRules("col-8", {
-    gridColumn: "span 8 / span 8"
-  }),
-  ...responsiveRules("col-9", {
-    gridColumn: "span 9 / span 9"
-  }),
-  ...responsiveRules("col-10", {
-    gridColumn: "span 10 / span 10"
-  }),
-  ...responsiveRules("col-11", {
-    gridColumn: "span 11 / span 11"
-  }),
-  ...responsiveRules("col-12", {
-    gridColumn: "span 12 / span 12"
-  }),
-  // columnStart
-  ...responsiveRules("col-start-auto", {
-    gridColumnStart: "auto"
-  }),
-  ...responsiveRules("col-start-1", {
-    gridColumnStart: "1"
-  }),
-  ...responsiveRules("col-start-2", {
-    gridColumnStart: "2"
-  }),
-  ...responsiveRules("col-start-3", {
-    gridColumnStart: "3"
-  }),
-  ...responsiveRules("col-start-4", {
-    gridColumnStart: "4"
-  }),
-  ...responsiveRules("col-start-5", {
-    gridColumnStart: "5"
-  }),
-  ...responsiveRules("col-start-6", {
-    gridColumnStart: "6"
-  }),
-  ...responsiveRules("col-start-7", {
-    gridColumnStart: "7"
-  }),
-  ...responsiveRules("col-start-8", {
-    gridColumnStart: "8"
-  }),
-  ...responsiveRules("col-start-9", {
-    gridColumnStart: "9"
-  }),
-  ...responsiveRules("col-start-10", {
-    gridColumnStart: "10"
-  }),
-  ...responsiveRules("col-start-11", {
-    gridColumnStart: "11"
-  }),
-  ...responsiveRules("col-start-12", {
-    gridColumnStart: "12"
-  }),
-  // columnEnd
-  ...responsiveRules("col-end-auto", {
-    gridColumnEnd: "auto"
-  }),
-  ...responsiveRules("col-end-1", {
-    gridColumnEnd: "1"
-  }),
-  ...responsiveRules("col-end-2", {
-    gridColumnEnd: "2"
-  }),
-  ...responsiveRules("col-end-3", {
-    gridColumnEnd: "3"
-  }),
-  ...responsiveRules("col-end-4", {
-    gridColumnEnd: "4"
-  }),
-  ...responsiveRules("col-end-5", {
-    gridColumnEnd: "5"
-  }),
-  ...responsiveRules("col-end-6", {
-    gridColumnEnd: "6"
-  }),
-  ...responsiveRules("col-end-7", {
-    gridColumnEnd: "7"
-  }),
-  ...responsiveRules("col-end-8", {
-    gridColumnEnd: "8"
-  }),
-  ...responsiveRules("col-end-9", {
-    gridColumnEnd: "9"
-  }),
-  ...responsiveRules("col-end-10", {
-    gridColumnEnd: "10"
-  }),
-  ...responsiveRules("col-end-11", {
-    gridColumnEnd: "11"
-  }),
-  ...responsiveRules("col-end-12", {
-    gridColumnEnd: "12"
-  }),
-  // row
-  ...responsiveRules("row-auto", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-full", {
-    gridRow: "1 / -1"
-  }),
-  ...responsiveRules("row-1", {
-    gridRow: "span 1 / span 1"
-  }),
-  ...responsiveRules("row-2", {
-    gridRow: "span 2 / span 2"
-  }),
-  ...responsiveRules("row-3", {
-    gridRow: "span 3 / span 3"
-  }),
-  ...responsiveRules("row-4", {
-    gridRow: "span 4 / span 4"
-  }),
-  ...responsiveRules("row-5", {
-    gridRow: "span 5 / span 5"
-  }),
-  ...responsiveRules("row-6", {
-    gridRow: "span 6 / span 6"
-  }),
-  ...responsiveRules("row-7", {
-    gridRow: "span 7 / span 7"
-  }),
-  ...responsiveRules("row-8", {
-    gridRow: "span 8 / span 8"
-  }),
-  ...responsiveRules("row-9", {
-    gridRow: "span 9 / span 9"
-  }),
-  ...responsiveRules("row-10", {
-    gridRow: "span 10 / span 10"
-  }),
-  ...responsiveRules("row-11", {
-    gridRow: "span 11 / span 11"
-  }),
-  ...responsiveRules("row-12", {
-    gridRow: "span 12 / span 12"
-  }),
-  // rowStart
-  ...responsiveRules("row-start-auto", {
-    gridRowStart: "auto"
-  }),
-  ...responsiveRules("row-start-1", {
-    gridRowStart: "1"
-  }),
-  ...responsiveRules("row-start-2", {
-    gridRowStart: "2"
-  }),
-  ...responsiveRules("row-start-3", {
-    gridRowStart: "3"
-  }),
-  ...responsiveRules("row-start-4", {
-    gridRowStart: "4"
-  }),
-  ...responsiveRules("row-start-5", {
-    gridRowStart: "5"
-  }),
-  ...responsiveRules("row-start-6", {
-    gridRowStart: "6"
-  }),
-  ...responsiveRules("row-start-7", {
-    gridRowStart: "7"
-  }),
-  ...responsiveRules("row-start-8", {
-    gridRowStart: "8"
-  }),
-  ...responsiveRules("row-start-9", {
-    gridRowStart: "9"
-  }),
-  ...responsiveRules("row-start-10", {
-    gridRowStart: "10"
-  }),
-  ...responsiveRules("row-start-11", {
-    gridRowStart: "11"
-  }),
-  ...responsiveRules("row-start-12", {
-    gridRowStart: "12"
-  }),
-  // rowEnd
-  ...responsiveRules("row-end-auto", {
-    gridRowEnd: "auto"
-  }),
-  ...responsiveRules("row-end-1", {
-    gridRowEnd: "1"
-  }),
-  ...responsiveRules("row-end-2", {
-    gridRowEnd: "2"
-  }),
-  ...responsiveRules("row-end-3", {
-    gridRowEnd: "3"
-  }),
-  ...responsiveRules("row-end-4", {
-    gridRowEnd: "4"
-  }),
-  ...responsiveRules("row-end-5", {
-    gridRowEnd: "5"
-  }),
-  ...responsiveRules("row-end-6", {
-    gridRowEnd: "6"
-  }),
-  ...responsiveRules("row-end-7", {
-    gridRowEnd: "7"
-  }),
-  ...responsiveRules("row-end-8", {
-    gridRowEnd: "8"
-  }),
-  ...responsiveRules("row-end-9", {
-    gridRowEnd: "9"
-  }),
-  ...responsiveRules("row-end-10", {
-    gridRowEnd: "10"
-  }),
-  ...responsiveRules("row-end-11", {
-    gridRowEnd: "11"
-  }),
-  ...responsiveRules("row-end-12", {
-    gridRowEnd: "12"
-  })
-}, heightRules = {
-  ...responsiveRules("h-fill", {
-    height: "100%"
-  }),
-  ...responsiveRules("h-stretch", {
-    height: "stretch"
-  })
-}, insetRules = {
-  ...responsiveRules("inset-0", {
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
-  }),
-  ...responsiveRules("top-0", {
-    top: 0
-  }),
-  ...responsiveRules("right-0", {
-    right: 0
-  }),
-  ...responsiveRules("bottom-0", {
-    bottom: 0
-  }),
-  ...responsiveRules("left-0", {
-    left: 0
-  })
-}, marginRules = {
-  // NOTE: order matters
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`m-${space}`.replace(".", "_"), {
-      margin: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mx-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space],
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`my-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space],
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mt-${space}`.replace(".", "_"), {
-      marginTop: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mr-${space}`.replace(".", "_"), {
-      marginRight: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`mb-${space}`.replace(".", "_"), {
-      marginBottom: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`ml-${space}`.replace(".", "_"), {
-      marginLeft: vars.space[space]
-    })
-  }), {})
-}, maxWidthRules = {
-  ...responsiveRules("max-w-0", {
-    maxWidth: "var(--container-0)"
-  }),
-  ...responsiveRules("max-w-1", {
-    maxWidth: "var(--container-1)"
-  }),
-  ...responsiveRules("max-w-2", {
-    maxWidth: "var(--container-2)"
-  }),
-  ...responsiveRules("max-w-3", {
-    maxWidth: "var(--container-3)"
-  }),
-  ...responsiveRules("max-w-4", {
-    maxWidth: "var(--container-4)"
-  }),
-  ...responsiveRules("max-w-5", {
-    maxWidth: "var(--container-5)"
-  }),
-  ...responsiveRules("max-w-auto", {
-    maxWidth: "none"
-  }),
-  ...responsiveRules("max-w-fill", {
-    maxWidth: "100%"
-  })
-}, outlineRules = {
-  "outline-none": {
-    outline: "none"
-  }
-}, overflowRules = {
-  ...responsiveRules("overflow-visible", {
-    overflow: "visible"
-  }),
-  ...responsiveRules("overflow-hidden", {
-    overflow: "hidden"
-  }),
-  ...responsiveRules("overflow-scroll", {
-    overflow: "scroll"
-  }),
-  ...responsiveRules("overflow-auto", {
-    overflow: "auto"
-  })
-}, paddingRules = {
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`p-${space}`.replace(".", "_"), {
-      padding: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`px-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space],
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`py-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space],
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pt-${space}`.replace(".", "_"), {
-      paddingTop: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pr-${space}`.replace(".", "_"), {
-      paddingRight: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pb-${space}`.replace(".", "_"), {
-      paddingBottom: vars.space[space]
-    })
-  }), {}),
-  ...SPACE.reduce((acc, space) => ({
-    ...acc,
-    ...responsiveRules(`pl-${space}`.replace(".", "_"), {
-      paddingLeft: vars.space[space]
-    })
-  }), {})
-}, pointerEventsRules = {
-  "pointer-events-none": {
-    pointerEvents: "none"
-  },
-  "pointer-events-auto": {
-    pointerEvents: "auto"
-  }
-}, positionRules = {
-  ...responsiveRules("pos-absolute", {
-    position: "absolute"
-  }),
-  ...responsiveRules("pos-fixed", {
-    position: "fixed"
-  }),
-  ...responsiveRules("pos-relative", {
-    position: "relative"
-  }),
-  ...responsiveRules("pos-static", {
-    position: "static"
-  }),
-  ...responsiveRules("pos-sticky", {
-    position: "sticky"
-  })
-}, 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-full", {
-    borderRadius: "9999px"
-  })
-}, shadowRules = {
-  ...responsiveRules("shadow-0", {
-    boxShadow: "none"
-  }),
-  ...responsiveRules("shadow-1", {
-    boxShadow: ["var(--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(--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(--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(--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(--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(", ")
-  })
-}, textOverflowRules = {
-  "text-overflow-ellipsis": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    overflow: ["hidden", "clip"]
-  },
-  "text-overflow-clip": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "clip",
-    overflow: ["hidden", "clip"]
-  }
-}, widthRules = {
-  "w-fill": {
-    width: ["-moz-available", "-webkit-fill-available", "stretch"]
-  }
-}, srOnlyRules = {
-  "sr-only": {
-    display: "block",
-    width: 0,
-    height: 0,
-    position: "absolute",
-    overflow: ["hidden", "clip"]
-  }
-}, rules = {
-  // styles
-  ...borderRules,
-  ...displayRules,
-  ...flexItemRules,
-  ...flexRules,
-  ...fontRules,
-  ...gapRules,
-  ...gridItemRules,
-  ...gridRules,
-  ...heightRules,
-  ...insetRules,
-  ...marginRules,
-  ...outlineRules,
-  ...overflowRules,
-  ...paddingRules,
-  ...pointerEventsRules,
-  ...positionRules,
-  ...radiusRules,
-  ...shadowRules,
-  ...widthRules,
-  // utils
-  ...srOnlyRules,
-  // primitives
-  ..._arrowRules,
-  ..._inputRules,
-  ..._selectableRules,
-  ...avatarRules,
-  ...badgeRules,
-  ...boxRules,
-  ...buttonRules,
-  ...cardRules,
-  ...checkboxRules,
-  ...codeRules,
-  ...containerRules,
-  ...headingRules,
-  ...kbdRules,
-  ...labelRules,
-  ...maxWidthRules,
-  ...popoverRules,
-  ...radioRules,
-  ...selectRules,
-  ...spinnerRules,
-  ...switchRules,
-  ...textAreaRules,
-  ...textInputRules,
-  ...textOverflowRules,
-  ...textRules,
-  ...tokenRules,
-  ...tooltipRules,
-  // components
-  ...breadcrumbsRules,
-  ...dialogRules,
-  ...menuRules,
-  ...skeletonRules,
-  ...toastRules
-};
-function compileRules(rules2) {
-  let css = "";
-  const context = {
-    keyframes: {},
-    media: {}
-  };
-  for (const [className, props] of Object.entries(rules2)) {
-    const ruleCss = compileRule(`.${className}`.replace(/:/g, "\\:"), props, context);
-    css += ruleCss ? `${ruleCss}
-` : "";
-  }
-  for (const [name, value] of Object.entries(context.keyframes)) {
-    let keyframesCss = `@keyframes ${name} {
-`;
-    for (const [key, props] of Object.entries(value))
-      keyframesCss += `  ${key}`, keyframesCss += compileRule("", props, context).replace(/\n/g, `
-    `) + `
-`;
-    keyframesCss += `
-}
-`, css += keyframesCss;
-  }
-  for (const [query, queryRules] of Object.entries(context.media))
-    css += compileMediaQueryRule(query, queryRules) + `
-`;
-  return css.replace(/\n{2,}/g, `
-`).trimStart();
-}
-function compileSystem() {
-  return compileRules(rules);
-}
-function isRecord(value) {
-  return value !== null && typeof value == "object" && !Array.isArray(value);
-}
-function isArray(value) {
-  return Array.isArray(value);
-}
-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 compileTheme_v3(theme) {
-  return compileRule(":root", compileThemeProperties(theme), {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileThemeProperties(theme) {
-  return {
-    ...buildAvatarThemeProperties(theme),
-    ...buildButtonThemeProperties(theme),
-    ...buildContainerThemeProperties(theme),
-    ...buildFontCodeThemeProperties(theme),
-    ...buildFontHeadingThemeProperties(theme),
-    ...buildFontLabelThemeProperties(theme),
-    ...buildFontTextThemeProperties(theme),
-    ...buildInputThemeProperties(theme),
-    ...buildRadiusThemeProperties(theme),
-    ...buildShadowThemeProperties(theme),
-    ...buildSpaceThemeProperties(theme),
-    // ...buildColorPaletteProperties(palette),
-    ...buildColorThemeProperties(theme)
-  };
-}
-function buildAvatarThemeProperties(theme) {
-  return {
-    "--avatar-focus-ring-offset": px(theme.avatar.focusRing.offset),
-    "--avatar-focus-ring-width": px(theme.avatar.focusRing.width),
-    "--avatar-0-distance": px(theme.avatar.sizes[0].distance),
-    "--avatar-0-size": px(theme.avatar.sizes[0].size),
-    "--avatar-1-distance": px(theme.avatar.sizes[1].distance),
-    "--avatar-1-size": px(theme.avatar.sizes[1].size),
-    "--avatar-2-distance": px(theme.avatar.sizes[2].distance),
-    "--avatar-2-size": px(theme.avatar.sizes[2].size),
-    "--avatar-3-distance": px(theme.avatar.sizes[3].distance),
-    "--avatar-3-size": px(theme.avatar.sizes[3].size)
-  };
-}
-function buildButtonThemeProperties(theme) {
-  return {
-    "--button-border-width": px(theme.button.border.width),
-    "--button-focus-ring-offset": px(theme.button.focusRing.offset),
-    "--button-focus-ring-width": px(theme.button.focusRing.width)
-    // [`--button-text-weight`]: theme.button.textWeight,
-  };
-}
-function buildContainerThemeProperties(theme) {
-  return {
-    "--container-0": px(theme.container[0]),
-    "--container-1": px(theme.container[1]),
-    "--container-2": px(theme.container[2]),
-    "--container-3": px(theme.container[3]),
-    "--container-4": px(theme.container[4]),
-    "--container-5": px(theme.container[5])
-  };
-}
-function buildFontCodeThemeProperties(theme) {
-  const props = {
-    "--font-code-family": theme.font.code.family,
-    "--font-code-feature-settings": theme.font.code.featureSettings,
-    "--font-code-weight-regular": `${theme.font.code.weights.regular}`,
-    "--font-code-weight-medium": `${theme.font.code.weights.medium}`,
-    "--font-code-weight-semibold": `${theme.font.code.weights.semibold}`,
-    "--font-code-weight-bold": `${theme.font.code.weights.bold}`
-  };
-  for (const size of FONT_CODE_SIZE)
-    props[`--font-code-${size}-size`] = rem(theme.font.code.sizes[size].fontSize), props[`--font-code-${size}-line-height`] = rem(theme.font.code.sizes[size].lineHeight), props[`--font-code-${size}-ascender-height`] = px(theme.font.code.sizes[size].ascenderHeight), props[`--font-code-${size}-descender-height`] = px(theme.font.code.sizes[size].descenderHeight), props[`--font-code-${size}-letter-spacing`] = px(theme.font.code.sizes[size].letterSpacing), props[`--font-code-${size}-icon-size`] = px(theme.font.code.sizes[size].iconSize);
-  return props;
-}
-function buildFontHeadingThemeProperties(theme) {
-  const props = {
-    "--font-heading-family": theme.font.heading.family,
-    "--font-heading-feature-settings": theme.font.heading.featureSettings,
-    "--font-heading-weight-regular": `${theme.font.heading.weights.regular}`,
-    "--font-heading-weight-medium": `${theme.font.heading.weights.medium}`,
-    "--font-heading-weight-semibold": `${theme.font.heading.weights.semibold}`,
-    "--font-heading-weight-bold": `${theme.font.heading.weights.bold}`
-  };
-  for (const size of FONT_HEADING_SIZE)
-    props[`--font-heading-${size}-size`] = rem(theme.font.heading.sizes[size].fontSize), props[`--font-heading-${size}-line-height`] = rem(theme.font.heading.sizes[size].lineHeight), props[`--font-heading-${size}-ascender-height`] = px(theme.font.heading.sizes[size].ascenderHeight), props[`--font-heading-${size}-descender-height`] = px(theme.font.heading.sizes[size].descenderHeight), props[`--font-heading-${size}-letter-spacing`] = px(theme.font.heading.sizes[size].letterSpacing), props[`--font-heading-${size}-icon-size`] = px(theme.font.heading.sizes[size].iconSize);
-  return props;
-}
-function buildFontLabelThemeProperties(theme) {
-  const props = {
-    "--font-label-family": theme.font.label.family,
-    "--font-label-feature-settings": theme.font.label.featureSettings,
-    "--font-label-weight-regular": `${theme.font.label.weights.regular}`,
-    "--font-label-weight-medium": `${theme.font.label.weights.medium}`,
-    "--font-label-weight-semibold": `${theme.font.label.weights.semibold}`,
-    "--font-label-weight-bold": `${theme.font.label.weights.bold}`
-  };
-  for (const size of FONT_LABEL_SIZE)
-    props[`--font-label-${size}-size`] = rem(theme.font.label.sizes[size].fontSize), props[`--font-label-${size}-line-height`] = rem(theme.font.label.sizes[size].lineHeight), props[`--font-label-${size}-ascender-height`] = px(theme.font.label.sizes[size].ascenderHeight), props[`--font-label-${size}-descender-height`] = px(theme.font.label.sizes[size].descenderHeight), props[`--font-label-${size}-letter-spacing`] = px(theme.font.label.sizes[size].letterSpacing), props[`--font-label-${size}-icon-size`] = px(theme.font.label.sizes[size].iconSize);
-  return props;
-}
-function buildFontTextThemeProperties(theme) {
-  const props = {
-    "--font-text-family": theme.font.text.family,
-    "--font-text-feature-settings": theme.font.text.featureSettings,
-    "--font-text-weight-regular": `${theme.font.text.weights.regular}`,
-    "--font-text-weight-medium": `${theme.font.text.weights.medium}`,
-    "--font-text-weight-semibold": `${theme.font.text.weights.semibold}`,
-    "--font-text-weight-bold": `${theme.font.text.weights.bold}`
-  };
-  for (const size of FONT_TEXT_SIZE)
-    props[`--font-text-${size}-size`] = rem(theme.font.text.sizes[size].fontSize), props[`--font-text-${size}-line-height`] = rem(theme.font.text.sizes[size].lineHeight), props[`--font-text-${size}-ascender-height`] = px(theme.font.text.sizes[size].ascenderHeight), props[`--font-text-${size}-descender-height`] = px(theme.font.text.sizes[size].descenderHeight), props[`--font-text-${size}-letter-spacing`] = px(theme.font.text.sizes[size].letterSpacing), props[`--font-text-${size}-icon-size`] = px(theme.font.text.sizes[size].iconSize);
-  return props;
-}
-function buildInputThemeProperties(theme) {
-  return {
-    "--input-border-width": px(theme.input.border.width),
-    "--input-checkbox-focus-ring-offset": px(theme.input.checkbox.focusRing.offset),
-    "--input-checkbox-focus-ring-width": px(theme.input.checkbox.focusRing.width),
-    "--input-checkbox-size": px(theme.input.checkbox.size),
-    "--input-radio-focus-ring-offset": px(theme.input.radio.focusRing.offset),
-    "--input-radio-focus-ring-width": px(theme.input.radio.focusRing.width),
-    "--input-radio-mark-size": px(theme.input.radio.markSize),
-    "--input-radio-size": px(theme.input.radio.size),
-    "--input-select-focus-ring-offset": px(theme.input.select.focusRing.offset),
-    "--input-select-focus-ring-width": px(theme.input.select.focusRing.width),
-    "--input-switch-focus-ring-offset": px(theme.input.switch.focusRing.offset),
-    "--input-switch-focus-ring-width": px(theme.input.switch.focusRing.width),
-    "--input-switch-height": px(theme.input.switch.height),
-    "--input-switch-padding": px(theme.input.switch.padding),
-    "--input-switch-transition-duration-ms": `${theme.input.switch.transitionDurationMs}ms`,
-    "--input-switch-transition-timing-function": theme.input.switch.transitionTimingFunction,
-    "--input-switch-width": px(theme.input.switch.width),
-    "--input-text-focus-ring-offset": px(theme.input.text.focusRing.offset),
-    "--input-text-focus-ring-width": px(theme.input.text.focusRing.width)
-  };
-}
-function buildRadiusThemeProperties(theme) {
-  return {
-    "--radius-0": rem(theme.radius[0]),
-    "--radius-1": rem(theme.radius[1]),
-    "--radius-2": rem(theme.radius[2]),
-    "--radius-3": rem(theme.radius[3]),
-    "--radius-4": rem(theme.radius[4]),
-    "--radius-5": rem(theme.radius[5]),
-    "--radius-6": rem(theme.radius[6])
-  };
-}
-function buildShadowThemeProperties(theme) {
-  return {
-    "--shadow-outline": `0 0 0 ${theme.card.shadow.outline}px`,
-    "--shadow-0-umbra": toBoxShadow(theme.shadow[0]?.umbra),
-    "--shadow-0-penumbra": toBoxShadow(theme.shadow[0]?.penumbra),
-    "--shadow-0-ambient": toBoxShadow(theme.shadow[0]?.ambient),
-    "--shadow-1-umbra": toBoxShadow(theme.shadow[1]?.umbra),
-    "--shadow-1-penumbra": toBoxShadow(theme.shadow[1]?.penumbra),
-    "--shadow-1-ambient": toBoxShadow(theme.shadow[1]?.ambient),
-    "--shadow-2-umbra": toBoxShadow(theme.shadow[2]?.umbra),
-    "--shadow-2-penumbra": toBoxShadow(theme.shadow[2]?.penumbra),
-    "--shadow-2-ambient": toBoxShadow(theme.shadow[2]?.ambient),
-    "--shadow-3-umbra": toBoxShadow(theme.shadow[3]?.umbra),
-    "--shadow-3-penumbra": toBoxShadow(theme.shadow[3]?.penumbra),
-    "--shadow-3-ambient": toBoxShadow(theme.shadow[3]?.ambient),
-    "--shadow-4-umbra": toBoxShadow(theme.shadow[4]?.umbra),
-    "--shadow-4-penumbra": toBoxShadow(theme.shadow[4]?.penumbra),
-    "--shadow-4-ambient": toBoxShadow(theme.shadow[4]?.ambient),
-    "--shadow-5-umbra": toBoxShadow(theme.shadow[5]?.umbra),
-    "--shadow-5-penumbra": toBoxShadow(theme.shadow[5]?.penumbra),
-    "--shadow-5-ambient": toBoxShadow(theme.shadow[5]?.ambient)
-  };
-}
-function buildSpaceThemeProperties(theme) {
-  return {
-    "--space-0": rem(theme.space[0]),
-    "--space-0_5": rem(theme.space[1] / 2),
-    "--space-1": rem(theme.space[1]),
-    "--space-2": rem(theme.space[2]),
-    "--space-3": rem(theme.space[3]),
-    "--space-4": rem(theme.space[4]),
-    "--space-5": rem(theme.space[5]),
-    "--space-6": rem(theme.space[6]),
-    "--space-7": rem(theme.space[7]),
-    "--space-8": rem(theme.space[8]),
-    "--space-9": rem(theme.space[9])
-  };
-}
-const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
-function buildColorThemeProperties(theme) {
-  const props = {};
-  for (const scheme of THEME_COLOR_SCHEMES)
-    for (const cardTone of THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme, {
-        scheme,
-        cardTone
-      })), Object.assign(props, buildColorCardThemeProperties(theme, {
-        scheme,
-        cardTone
-      }));
-      for (const colorVariant of THEME_COLOR_VARIANTS)
-        for (const elementTone of THEME_COLOR_STATE_TONES) {
-          const tokens = theme._tokens.color[cardTone].variant[colorVariant][elementTone], prefix = `--color-${scheme}-${cardTone}-${colorVariant}-${elementTone}`, context = {
-            bgVar: `${prefix}-bg-0`,
-            hue: tokens._hue,
-            scheme
-          };
-          Object.assign(props, {
-            [`${prefix}-bg-0`]: renderColor(tokens.bg[0], context),
-            [`${prefix}-bg-1`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 25%)`,
-            [`${prefix}-bg-2`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 50%)`,
-            [`${prefix}-bg-3`]: `color-mix(in srgb, var(${prefix}-bg-0), var(${prefix}-bg-4) 75%)`,
-            [`${prefix}-bg-4`]: renderColor(tokens.bg[4], context),
-            [`${prefix}-border-0`]: renderColor(tokens.border[0], context),
-            [`${prefix}-border-1`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 25%)`,
-            [`${prefix}-border-2`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 50%)`,
-            [`${prefix}-border-3`]: `color-mix(in srgb, var(${prefix}-border-0), var(${prefix}-border-4) 75%)`,
-            [`${prefix}-border-4`]: renderColor(tokens.border[4], context),
-            [`${prefix}-fg-0`]: renderColor(tokens.fg[0], context),
-            [`${prefix}-fg-1`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 25%)`,
-            [`${prefix}-fg-2`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 50%)`,
-            [`${prefix}-fg-3`]: `color-mix(in srgb, var(${prefix}-fg-0), var(${prefix}-fg-4) 75%)`,
-            [`${prefix}-fg-4`]: renderColor(tokens.fg[4], context)
-          });
-        }
-    }
-  return props;
-}
-function buildColorAvatarThemeProperties(theme, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, props = {};
-  for (const hue of HUES) {
-    const context = {
-      bgVar: `${prefix}-bg-0`,
-      hue: tokens.avatar[hue]._hue ?? hue,
-      scheme
-    };
-    Object.assign(props, {
-      [`${prefix}-avatar-${hue}-bg`]: renderColor(tokens.avatar[hue].bg, context),
-      [`${prefix}-avatar-${hue}-fg`]: renderColor(tokens.avatar[hue].fg, context)
-    });
-  }
-  return props;
-}
-function buildColorCardThemeProperties(theme, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, tokens = theme._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, context = {
-    bgVar: `${prefix}-bg-0`,
-    hue: tokens._hue,
-    scheme
-  };
-  return {
-    [`${prefix}-backdrop`]: renderColor(tokens.backdrop, context),
-    [`${prefix}-focus-ring`]: renderColor(tokens.focusRing, context),
-    [`${prefix}-link-fg`]: renderColor(tokens.link.fg, context),
-    [`${prefix}-shadow-outline`]: renderColor(tokens.shadow.outline, context),
-    [`${prefix}-shadow-umbra`]: renderColor(tokens.shadow.umbra, context),
-    [`${prefix}-shadow-penumbra`]: renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: renderColor(tokens.shadow.ambient, context),
-    [`${prefix}-token-atrule`]: renderColor(tokens.token.atrule, context),
-    [`${prefix}-token-attr-name`]: renderColor(tokens.token.attrName, context),
-    [`${prefix}-token-attr-value`]: renderColor(tokens.token.attrValue, context),
-    [`${prefix}-token-attribute`]: renderColor(tokens.token.attribute, context),
-    [`${prefix}-token-boolean`]: renderColor(tokens.token.boolean, context),
-    [`${prefix}-token-builtin`]: renderColor(tokens.token.builtin, context),
-    [`${prefix}-token-cdata`]: renderColor(tokens.token.cdata, context),
-    [`${prefix}-token-char`]: renderColor(tokens.token.char, context),
-    [`${prefix}-token-class-name`]: renderColor(tokens.token.className, context),
-    [`${prefix}-token-class`]: renderColor(tokens.token.class, context),
-    [`${prefix}-token-comment`]: renderColor(tokens.token.comment, context),
-    [`${prefix}-token-constant`]: renderColor(tokens.token.constant, context),
-    [`${prefix}-token-deleted`]: renderColor(tokens.token.deleted, context),
-    [`${prefix}-token-doctype`]: renderColor(tokens.token.doctype, context),
-    [`${prefix}-token-entity`]: renderColor(tokens.token.entity, context),
-    [`${prefix}-token-function`]: renderColor(tokens.token.function, context),
-    [`${prefix}-token-hexcode`]: renderColor(tokens.token.hexcode, context),
-    [`${prefix}-token-id`]: renderColor(tokens.token.id, context),
-    [`${prefix}-token-important`]: renderColor(tokens.token.important, context),
-    [`${prefix}-token-inserted`]: renderColor(tokens.token.inserted, context),
-    [`${prefix}-token-keyword`]: renderColor(tokens.token.keyword, context),
-    [`${prefix}-token-number`]: renderColor(tokens.token.number, context),
-    [`${prefix}-token-operator`]: renderColor(tokens.token.operator, context),
-    [`${prefix}-token-prolog`]: renderColor(tokens.token.prolog, context),
-    [`${prefix}-token-property`]: renderColor(tokens.token.property, context),
-    [`${prefix}-token-pseudo-class`]: renderColor(tokens.token.pseudoClass, context),
-    [`${prefix}-token-pseudo-eelement`]: renderColor(tokens.token.pseudoElement, context),
-    [`${prefix}-token-punctuation`]: renderColor(tokens.token.punctuation, context),
-    [`${prefix}-token-regex`]: renderColor(tokens.token.regex, context),
-    [`${prefix}-token-selector`]: renderColor(tokens.token.selector, context),
-    [`${prefix}-token-string`]: renderColor(tokens.token.string, context),
-    [`${prefix}-token-symbol`]: renderColor(tokens.token.symbol, context),
-    [`${prefix}-token-tag`]: renderColor(tokens.token.tag, context),
-    [`${prefix}-token-unit`]: renderColor(tokens.token.unit, context),
-    [`${prefix}-token-url`]: renderColor(tokens.token.url, context),
-    [`${prefix}-token-variable`]: renderColor(tokens.token.variable, context)
-  };
-}
-function compileTheme(theme) {
-  return theme.v3 ? compileTheme_v3(theme.v3) : theme.v2 ? `/* v2 - not supported */
-` : `/* v0 - not supported */
-`;
-}
-function composeClassNames(...classNames) {
-  return unique(classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
-}
-function breadcrumbs() {
-  return composeClassNames("breadcrumbs");
-}
-function dialog() {
-  return composeClassNames("dialog");
-}
-function dialogContainer() {
-  return composeClassNames("dialog-container");
-}
-function dialogCardRoot() {
-  return composeClassNames("dialog-card-root");
-}
-function dialogLayout() {
-  return composeClassNames("dialog-layout");
-}
-function dialogHeader() {
-  return composeClassNames("dialog-header");
-}
-function dialogContent() {
-  return composeClassNames("dialog-content");
-}
-function dialogFooter() {
-  return composeClassNames("dialog-footer");
-}
-function menu() {
-  return composeClassNames("menu");
-}
-function menuDivider() {
-  return composeClassNames("menu-divider");
-}
-function _resp(prefix, prop) {
-  if (!(prop === void 0 || prop === !1))
-    return Array.isArray(prop) ? prop.map((value, index) => {
-      if (value === void 0 || typeof prop == "boolean" && prop === !1) return;
-      const className = (typeof value == "boolean" ? [prefix] : [prefix, value]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-      return index === 0 ? `${className}` : `_${index}:${className}`;
-    }).filter(Boolean).join(" ") : (typeof prop == "boolean" ? [prefix] : [prefix, prop]).filter((s) => s === 0 || !!s).join("-").replace(/\./g, "_");
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function skeleton(props) {
-  return composeClassNames("skeleton", radius(props));
-}
-function codeSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("code-skeleton", props.size));
-}
-function headingSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
-}
-function labelSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("label-skeleton", props.size));
-}
-function textSkeleton(props) {
-  return composeClassNames("font-skeleton", _resp("text-skeleton", props.size));
-}
-function toastLayer() {
-  return composeClassNames("toast-layer");
-}
-function toast() {
-  return composeClassNames("toast");
-}
-function toastLoadingBar() {
-  return composeClassNames("toast-loading-bar");
-}
-function toastLoadingBarProgress() {
-  return composeClassNames("toast-loading-bar-progress");
-}
-function toastLoadingBarMask() {
-  return composeClassNames("toast-loading-bar-mask");
-}
-function treeItem() {
-  return composeClassNames("tree-item");
-}
-function _arrow() {
-  return composeClassNames("arrow");
-}
-function _arrowStroke() {
-  return "arrow-stroke";
-}
-function _arrowShape() {
-  return "arrow-shape";
-}
-const prefixes$2 = {
-  border: "border",
-  borderTop: "border-t",
-  borderRight: "border-r",
-  borderBottom: "border-b",
-  borderLeft: "border-l"
-};
-function border(props) {
-  return composeClassNames(_resp(prefixes$2.border, props.border), _resp(prefixes$2.borderTop, props.borderTop), _resp(prefixes$2.borderRight, props.borderRight), _resp(prefixes$2.borderBottom, props.borderBottom), _resp(prefixes$2.borderLeft, props.borderLeft));
-}
-function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
-}
-const prefixes$1 = {
-  align: "align",
-  // `flex-align`
-  direction: void 0,
-  // `
-  justify: "justify",
-  // `flex-justify`
-  wrap: "wrap"
-  // `flex-wrap`
-};
-function flex(props) {
-  return composeClassNames(_resp(prefixes$1.align, props.align), _resp(prefixes$1.direction, props.direction), _resp(prefixes$1.justify, props.justify), _resp(prefixes$1.wrap, props.wrap));
-}
-function flexItem(props) {
-  return composeClassNames(_resp("flex", props.flex));
-}
-const prefixes = {
-  align: "text-align",
-  weight: "font"
-};
-function font(props) {
-  return composeClassNames("font", props.weight && `${prefixes.weight}-${props.weight}`, _resp(prefixes.align, props.align));
-}
-function gap(props) {
-  return composeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
-}
-function grid(props) {
-  return composeClassNames(_resp("auto-cols", props.autoCols), _resp("auto-rows", props.autoRows), _resp("auto-flow", props.autoFlow), _resp("columns", props.columns), _resp("rows", props.rows));
-}
-function gridItem(props) {
-  return composeClassNames(_resp("col", props.column), _resp("col-start", props.columnStart), _resp("col-end", props.columnEnd), _resp("row", props.row), _resp("row-start", props.rowStart), _resp("row-end", props.rowEnd));
-}
-function inset(props) {
-  return composeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
-}
-function margin(props) {
-  return composeClassNames(_resp("m", props.margin), _resp("mx", props.marginX), _resp("my", props.marginY), _resp("mt", props.marginTop), _resp("mr", props.marginRight), _resp("mb", props.marginBottom), _resp("ml", props.marginLeft));
-}
-function maxWidth(props) {
-  return _resp("max-w", props.maxWidth) ?? "";
-}
-function overflow(props) {
-  return composeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
-}
-function padding(props) {
-  return composeClassNames(_resp("p", props.padding), _resp("px", props.paddingX), _resp("py", props.paddingY), _resp("pt", props.paddingTop), _resp("pr", props.paddingRight), _resp("pb", props.paddingBottom), _resp("pl", props.paddingLeft));
-}
-function pointerEvents(props) {
-  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
-}
-function position(props) {
-  return composeClassNames(_resp("pos", props.position));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
-function textOverflow(props) {
-  return composeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-function width(props) {
-  return _resp("w", props.width) ?? "";
-}
-function _input(props) {
-  return composeClassNames("input", _resp("input", props.fontSize), props.border && "input-b", _resp("input-p", props.padding), _resp("input-g", props.gap), radius(props), width(props));
-}
-function _inputElement() {
-  return "input-element";
-}
-function _inputPresentation() {
-  return "input-presentation";
-}
-function _selectable(props) {
-  return composeClassNames("selectable", toneMap$2[props.tone ?? "default"], radius(props));
-}
-function avatar(props) {
-  return composeClassNames("avatar", props.color || "gray", _resp("avatar", props.size));
-}
-function avatarArrow() {
-  return composeClassNames("avatar-arrow");
-}
-function avatarInitials() {
-  return composeClassNames("avatar-initials");
-}
-function avatarImage() {
-  return composeClassNames("avatar-image");
-}
-function avatarCounter(props) {
-  return composeClassNames("avatar-counter", _resp("avatar", props.size));
-}
-function avatarStack(props) {
-  return composeClassNames("avatar-stack", _resp("avatar", props.size));
-}
-function badge(props) {
-  return composeClassNames("badge", props.tone && `badge-${props.tone}`, radius(props));
-}
-function box(props) {
-  return composeClassNames("box", props.muted && "muted", border(props), display(props), _resp("h", props.height), _resp("box", props.sizing), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), props.outline && `outline-${props.outline}`, overflow(props), padding(props), pointerEvents(props), position(props), radius(props), width(props));
-}
-function button(props) {
-  const {
-    mode,
-    tone
-  } = props;
-  return composeClassNames("button", variantMap[mode ?? "default"], toneMap$1[tone ?? "default"], display(props), flexItem(props), radius(props), width(props));
-}
-function buttonLoadingBox() {
-  return "button-loading-box";
-}
-function card(props) {
-  return composeClassNames(props.scheme, toneMap[props.tone ?? "inherit"], "card", props.checkered && "card-checkered", box(props), shadow(props));
-}
-function checkbox() {
-  return composeClassNames("checkbox");
-}
-function checkboxInput() {
-  return composeClassNames("checkbox-input");
-}
-function code(props) {
-  return composeClassNames("code", "block", font(props), _resp("code", props.size));
-}
-function container(props) {
-  return composeClassNames("container", maxWidth({
-    maxWidth: props.width
-  }));
-}
-function heading(props) {
-  return composeClassNames("heading", "block", flexItem(props), font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size));
-}
-function kbd(props) {
-  return composeClassNames("kbd", radius(props));
-}
-function label(props) {
-  return composeClassNames("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
-}
-function popover() {
-  return composeClassNames("popover");
-}
-function radio() {
-  return composeClassNames("radio");
-}
-function select(props) {
-  return composeClassNames("select", _input(props));
-}
-function selectPresentation() {
-  return composeClassNames("select-presentation", _inputPresentation());
-}
-function spinner() {
-  return composeClassNames("spinner");
-}
-function animatedSpinnerIcon() {
-  return composeClassNames("animated-spinner-icon");
-}
-function _switch() {
-  return composeClassNames("switch");
-}
-function _switchElement() {
-  return composeClassNames("switch-element");
-}
-function _switchPresentation() {
-  return composeClassNames("switch-presentation");
-}
-function _switchThumb() {
-  return composeClassNames("switch-thumb");
-}
-function _switchTrack() {
-  return composeClassNames("switch-track");
-}
-function text(props) {
-  return composeClassNames("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
-}
-function textArea(props) {
-  return composeClassNames("text-area", _input(props));
-}
-function textInput(props) {
-  return composeClassNames(_input(props), "text-input");
-}
-function tooltip() {
-  return composeClassNames("tooltip");
-}
-function tooltipCard() {
-  return composeClassNames("tooltip-card");
-}
-function srOnly() {
-  return composeClassNames("sr-only");
-}
-export {
-  _arrow,
-  _arrowShape,
-  _arrowStroke,
-  _input,
-  _inputElement,
-  _inputPresentation,
-  _selectable,
-  _switch,
-  _switchElement,
-  _switchPresentation,
-  _switchThumb,
-  _switchTrack,
-  animatedSpinnerIcon,
-  avatar,
-  avatarArrow,
-  avatarCounter,
-  avatarImage,
-  avatarInitials,
-  avatarStack,
-  badge,
-  border,
-  box,
-  breadcrumbs,
-  button,
-  buttonLoadingBox,
-  card,
-  checkbox,
-  checkboxInput,
-  code,
-  codeSkeleton,
-  compilePalette,
-  compileSystem,
-  compileTheme,
-  composeClassNames,
-  container,
-  dialog,
-  dialogCardRoot,
-  dialogContainer,
-  dialogContent,
-  dialogFooter,
-  dialogHeader,
-  dialogLayout,
-  display,
-  flex,
-  flexItem,
-  font,
-  gap,
-  grid,
-  gridItem,
-  heading,
-  headingSkeleton,
-  inset,
-  isArray,
-  isRecord,
-  kbd,
-  label,
-  labelSkeleton,
-  margin,
-  maxWidth,
-  menu,
-  menuDivider,
-  overflow,
-  padding,
-  pointerEvents,
-  popover,
-  position,
-  px,
-  radio,
-  radius,
-  rem,
-  select,
-  selectPresentation,
-  shadow,
-  skeleton,
-  spinner,
-  srOnly,
-  text,
-  textArea,
-  textInput,
-  textOverflow,
-  textSkeleton,
-  toBoxShadow,
-  toast,
-  toastLayer,
-  toastLoadingBar,
-  toastLoadingBarMask,
-  toastLoadingBarProgress,
-  tooltip,
-  tooltipCard,
-  treeItem,
-  v3_v2,
-  varNames,
-  vars,
-  width
-};
-//# sourceMappingURL=css.mjs.map