@sanity/ui 3.0.0-static.9 → 3.0.0

package/dist/css.js

@@ -1,4830 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: !0 });
-var color = require("@sanity/color"), theme = require("@sanity/ui/theme");
-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 getClassNames(...classNames) {
-  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ");
-}
-function composeClassNames(...classNames) {
-  return unique(getClassNames(...classNames)).join(" ") || void 0;
-}
-function unique(array) {
-  return Array.from(new Set(array));
-}
-function border(props) {
-  return composeClassNames(_resp("border", props.border), _resp("border-t", props.borderTop), _resp("border-r", props.borderRight), _resp("border-b", props.borderBottom), _resp("border-l", props.borderLeft));
-}
-function display(props) {
-  return composeClassNames(_resp(void 0, props.display));
-}
-function flex(props) {
-  return composeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
-}
-function flexItem(props) {
-  return composeClassNames(_resp("f", props.flex));
-}
-function font(props) {
-  return composeClassNames("font", props.weight && `font-${props.weight}`, _resp("text-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-flow", props.autoFlow), _resp("auto-rows", props.autoRows), _resp("cols", 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 height(props) {
-  return composeClassNames(_resp("h", props.height));
-}
-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 minWidth(props) {
-  return _resp("min-w", props.minWidth) ?? "";
-}
-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("position", props.position));
-}
-function radius(props) {
-  return composeClassNames(_resp("r", props.radius));
-}
-function shadow(props) {
-  return composeClassNames(_resp("shadow", props.shadow));
-}
-const PREFIX = "s-";
-function scopeClassName(className) {
-  if (className !== void 0)
-    return `${PREFIX}${className.trim()}`;
-}
-function _comp(...classNames) {
-  return getClassNames(...classNames).filter(Boolean).map(scopeClassName).join(" ") || void 0;
-}
-function textOverflow(props) {
-  return _comp(props.textOverflow && `text-overflow-${props.textOverflow}`);
-}
-function width(props) {
-  return _resp("w", props.width) ?? "";
-}
-function compileRule(selector, props, context) {
-  let css = compileProperties$1(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$1(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$1(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, `.${PREFIX}`).replace(/&/g, selector), _props, context);
-  return css;
-}
-function toSnakeCase$1(value) {
-  return value.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-}
-function compilePalette() {
-  const props = {
-    ...compileHues(),
-    "--black": color.color.black.hex,
-    "--white": color.color.white.hex
-  };
-  return compileRule(":root", props, {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileHues() {
-  const rules2 = {};
-  for (const hue of theme.HUES)
-    for (const tint of theme.TINTS)
-      rules2[`--${hue}-${tint}`] = color.color[hue][tint].hex;
-  return rules2;
-}
-function _mergeStyles(styles) {
-  const keyframes2 = {}, layers = {}, rules2 = {};
-  for (const s of styles)
-    if (s) {
-      Object.assign(keyframes2, s.keyframes);
-      for (const layerName in s.layers)
-        layers[layerName] || (layers[layerName] = {}), Object.assign(layers[layerName], s.layers[layerName]);
-      Object.assign(rules2, s.rules);
-    }
-  return {
-    keyframes: keyframes2,
-    layers,
-    rules: rules2
-  };
-}
-function _responsiveRule(rules2, _name, properties) {
-  const name = _name.replace(/\./g, "_");
-  rules2[`.${name}`] = properties, rules2[`.1\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 360px)": properties
-    }
-  }, rules2[`.2\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 600px)": properties
-    }
-  }, rules2[`.3\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 900px)": properties
-    }
-  }, rules2[`.4\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1200px)": properties
-    }
-  }, rules2[`.5\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 1800px)": properties
-    }
-  }, rules2[`.6\\:${name}`] = {
-    "@media": {
-      "screen and (min-width: 2400px)": properties
-    }
-  };
-}
-const varNames = {
-  avatar: {
-    distance: "--avatar-distance",
-    focusRing: {
-      offset: "--avatar-focus-ring-offset",
-      width: "--avatar-focus-ring-width"
-    },
-    size: "--avatar-size",
-    sizes: theme.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",
-    code: {
-      bg: "--color-code-bg",
-      fg: "--color-code-fg",
-      token: {
-        atrule: "--color-code-token-atrule",
-        attrName: "--color-code-token-attr-name",
-        attrValue: "--color-code-token-attr-value",
-        attribute: "--color-code-token-attribute",
-        boolean: "--color-code-token-boolean",
-        builtin: "--color-code-token-builtin",
-        cdata: "--color-code-token-cdata",
-        char: "--color-code-token-char",
-        class: "--color-code-token-class",
-        className: "--color-code-token-class-name",
-        comment: "--color-code-token-comment",
-        constant: "--color-code-token-constant",
-        deleted: "--color-code-token-deleted",
-        doctype: "--color-code-token-doctype",
-        entity: "--color-code-token-entity",
-        function: "--color-code-token-function",
-        hexcode: "--color-code-token-hexcode",
-        id: "--color-code-token-id",
-        important: "--color-code-token-important",
-        inserted: "--color-code-token-inserted",
-        keyword: "--color-code-token-keyword",
-        number: "--color-code-token-number",
-        operator: "--color-code-token-operator",
-        prolog: "--color-code-token-prolog",
-        property: "--color-code-token-property",
-        pseudoClass: "--color-code-token-pseudo-class",
-        pseudoElement: "--color-code-token-pseudo-element",
-        punctuation: "--color-code-token-punctuation",
-        regex: "--color-code-token-regex",
-        selector: "--color-code-token-selector",
-        string: "--color-code-token-string",
-        symbol: "--color-code-token-symbol",
-        tag: "--color-code-token-tag",
-        unit: "--color-code-token-unit",
-        url: "--color-code-token-url",
-        variable: "--color-code-token-variable"
-      }
-    },
-    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"
-    },
-    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"
-      })
-    }
-  },
-  container: {
-    0: "--container-0",
-    1: "--container-1",
-    2: "--container-2",
-    3: "--container-3",
-    4: "--container-4",
-    5: "--container-5"
-  },
-  font: {
-    code: {
-      family: "--font-code-family",
-      sizes: theme.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: theme.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: theme.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: theme.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"
-  },
-  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `--radius-${radius2}`])),
-  space: Object.fromEntries(theme.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`,
-    code: {
-      bg: `${sourcePrefix}-code-bg`,
-      fg: `${sourcePrefix}-code-fg`,
-      token: {
-        atrule: `${sourcePrefix}-code-token-atrule`,
-        attrName: `${sourcePrefix}-code-token-attr-name`,
-        attrValue: `${sourcePrefix}-code-token-attr-value`,
-        attribute: `${sourcePrefix}-code-token-attribute`,
-        boolean: `${sourcePrefix}-code-token-boolean`,
-        builtin: `${sourcePrefix}-code-token-builtin`,
-        cdata: `${sourcePrefix}-code-token-cdata`,
-        char: `${sourcePrefix}-code-token-char`,
-        class: `${sourcePrefix}-code-token-class`,
-        className: `${sourcePrefix}-code-token-class-name`,
-        comment: `${sourcePrefix}-code-token-comment`,
-        constant: `${sourcePrefix}-code-token-constant`,
-        deleted: `${sourcePrefix}-code-token-deleted`,
-        doctype: `${sourcePrefix}-code-token-doctype`,
-        entity: `${sourcePrefix}-code-token-entity`,
-        function: `${sourcePrefix}-code-token-function`,
-        hexcode: `${sourcePrefix}-code-token-hexcode`,
-        id: `${sourcePrefix}-code-token-id`,
-        important: `${sourcePrefix}-code-token-important`,
-        inserted: `${sourcePrefix}-code-token-inserted`,
-        keyword: `${sourcePrefix}-code-token-keyword`,
-        number: `${sourcePrefix}-code-token-number`,
-        operator: `${sourcePrefix}-code-token-operator`,
-        prolog: `${sourcePrefix}-code-token-prolog`,
-        property: `${sourcePrefix}-code-token-property`,
-        pseudoClass: `${sourcePrefix}-code-token-pseudo-class`,
-        pseudoElement: `${sourcePrefix}-code-token-pseudo-element`,
-        punctuation: `${sourcePrefix}-code-token-punctuation`,
-        regex: `${sourcePrefix}-code-token-regex`,
-        selector: `${sourcePrefix}-code-token-selector`,
-        string: `${sourcePrefix}-code-token-string`,
-        symbol: `${sourcePrefix}-code-token-symbol`,
-        tag: `${sourcePrefix}-code-token-tag`,
-        unit: `${sourcePrefix}-code-token-unit`,
-        url: `${sourcePrefix}-code-token-url`,
-        variable: `${sourcePrefix}-code-token-variable`
-      }
-    },
-    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`
-    },
-    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.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.THEME_COLOR_CARD_TONES)
-  darkColorVars[tone] = buildColorCardVars({
-    scheme: "dark",
-    tone
-  });
-const lightColorVars = {};
-for (const tone of theme.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})`,
-  code: {
-    bg: `var(${varNames.color.code.bg})`,
-    fg: `var(${varNames.color.code.fg})`,
-    token: {
-      atrule: `var(${varNames.color.code.token.atrule})`,
-      attrName: `var(${varNames.color.code.token.attrName})`,
-      attrValue: `var(${varNames.color.code.token.attrValue})`,
-      attribute: `var(${varNames.color.code.token.attribute})`,
-      boolean: `var(${varNames.color.code.token.boolean})`,
-      builtin: `var(${varNames.color.code.token.builtin})`,
-      cdata: `var(${varNames.color.code.token.cdata})`,
-      char: `var(${varNames.color.code.token.char})`,
-      class: `var(${varNames.color.code.token.class})`,
-      className: `var(${varNames.color.code.token.className})`,
-      comment: `var(${varNames.color.code.token.comment})`,
-      constant: `var(${varNames.color.code.token.constant})`,
-      deleted: `var(${varNames.color.code.token.deleted})`,
-      doctype: `var(${varNames.color.code.token.doctype})`,
-      entity: `var(${varNames.color.code.token.entity})`,
-      function: `var(${varNames.color.code.token.function})`,
-      hexcode: `var(${varNames.color.code.token.hexcode})`,
-      id: `var(${varNames.color.code.token.id})`,
-      important: `var(${varNames.color.code.token.important})`,
-      inserted: `var(${varNames.color.code.token.inserted})`,
-      keyword: `var(${varNames.color.code.token.keyword})`,
-      number: `var(${varNames.color.code.token.number})`,
-      operator: `var(${varNames.color.code.token.operator})`,
-      prolog: `var(${varNames.color.code.token.prolog})`,
-      property: `var(${varNames.color.code.token.property})`,
-      pseudoClass: `var(${varNames.color.code.token.pseudoClass})`,
-      pseudoElement: `var(${varNames.color.code.token.pseudoElement})`,
-      punctuation: `var(${varNames.color.code.token.punctuation})`,
-      regex: `var(${varNames.color.code.token.regex})`,
-      selector: `var(${varNames.color.code.token.selector})`,
-      string: `var(${varNames.color.code.token.string})`,
-      symbol: `var(${varNames.color.code.token.symbol})`,
-      tag: `var(${varNames.color.code.token.tag})`,
-      unit: `var(${varNames.color.code.token.unit})`,
-      url: `var(${varNames.color.code.token.url})`,
-      variable: `var(${varNames.color.code.token.variable})`
-    }
-  },
-  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})`
-  },
-  solid: buildColorVariantVars({
-    variant: "solid"
-  }),
-  tinted: buildColorVariantVars({
-    variant: "tinted"
-  }),
-  ...theme.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: theme.AVATAR_SIZE.reduce((acc, size) => ({
-      ...acc,
-      [size]: {
-        size: `var(${varNames.avatar.sizes[size].size})`,
-        distance: `var(${varNames.avatar.sizes[size].distance})`
-      }
-    }), {})
-  },
-  color: colorVars,
-  container: {
-    0: `var(${varNames.container[0]})`,
-    1: `var(${varNames.container[1]})`,
-    2: `var(${varNames.container[2]})`,
-    3: `var(${varNames.container[3]})`,
-    4: `var(${varNames.container[4]})`,
-    5: `var(${varNames.container[5]})`
-  },
-  font: {
-    code: {
-      family: `var(${varNames.font.code.family})`,
-      sizes: theme.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: theme.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: theme.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: theme.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)"
-      }
-    }
-  },
-  radius: Object.fromEntries(theme.RADIUS.map((radius2) => [radius2, `var(${varNames.radius[radius2]})`])),
-  space: Object.fromEntries(theme.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.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
-        ...acc,
-        [color2]: {
-          bg: `var(${prefix.avatar[color2].bg})`,
-          fg: `var(${prefix.avatar[color2].fg})`
-        }
-      }), {})
-    },
-    backdrop: `var(${prefix.backdrop})`,
-    code: {
-      bg: `var(${prefix.code.bg})`,
-      fg: `var(${prefix.code.fg})`,
-      token: {
-        atrule: `var(${prefix.code.token.atrule})`,
-        attrName: `var(${prefix.code.token.attrName})`,
-        attrValue: `var(${prefix.code.token.attrValue})`,
-        attribute: `var(${prefix.code.token.attribute})`,
-        boolean: `var(${prefix.code.token.boolean})`,
-        builtin: `var(${prefix.code.token.builtin})`,
-        cdata: `var(${prefix.code.token.cdata})`,
-        char: `var(${prefix.code.token.char})`,
-        class: `var(${prefix.code.token.class})`,
-        className: `var(${prefix.code.token.className})`,
-        comment: `var(${prefix.code.token.comment})`,
-        constant: `var(${prefix.code.token.constant})`,
-        deleted: `var(${prefix.code.token.deleted})`,
-        doctype: `var(${prefix.code.token.doctype})`,
-        entity: `var(${prefix.code.token.entity})`,
-        function: `var(${prefix.code.token.function})`,
-        hexcode: `var(${prefix.code.token.hexcode})`,
-        id: `var(${prefix.code.token.id})`,
-        important: `var(${prefix.code.token.important})`,
-        inserted: `var(${prefix.code.token.inserted})`,
-        keyword: `var(${prefix.code.token.keyword})`,
-        number: `var(${prefix.code.token.number})`,
-        operator: `var(${prefix.code.token.operator})`,
-        prolog: `var(${prefix.code.token.prolog})`,
-        property: `var(${prefix.code.token.property})`,
-        pseudoClass: `var(${prefix.code.token.pseudoClass})`,
-        pseudoElement: `var(${prefix.code.token.pseudoElement})`,
-        punctuation: `var(${prefix.code.token.punctuation})`,
-        regex: `var(${prefix.code.token.regex})`,
-        selector: `var(${prefix.code.token.selector})`,
-        string: `var(${prefix.code.token.string})`,
-        symbol: `var(${prefix.code.token.symbol})`,
-        tag: `var(${prefix.code.token.tag})`,
-        unit: `var(${prefix.code.token.unit})`,
-        url: `var(${prefix.code.token.url})`,
-        variable: `var(${prefix.code.token.variable})`
-      }
-    },
-    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})`
-    },
-    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.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 util$t = {};
-_responsiveRule(util$t, "border", {
-  border: `1px solid ${vars.color.border}`
-});
-_responsiveRule(util$t, "border-t", {
-  borderTop: `1px solid ${vars.color.border}`
-});
-_responsiveRule(util$t, "border-r", {
-  borderRight: `1px solid ${vars.color.border}`
-});
-_responsiveRule(util$t, "border-b", {
-  borderBottom: `1px solid ${vars.color.border}`
-});
-_responsiveRule(util$t, "border-l", {
-  borderLeft: `1px solid ${vars.color.border}`
-});
-const borderStyle = {
-  layers: {
-    util: util$t
-  }
-}, util$s = {};
-_responsiveRule(util$s, "block", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "block"
-    }
-  }
-});
-_responsiveRule(util$s, "flex", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "flex"
-    }
-  }
-});
-_responsiveRule(util$s, "grid", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "grid"
-    }
-  }
-});
-_responsiveRule(util$s, "inline-block", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "inline-block"
-    }
-  }
-});
-_responsiveRule(util$s, "inline-flex", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "inline-flex"
-    }
-  }
-});
-_responsiveRule(util$s, "inline-grid", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "inline-grid"
-    }
-  }
-});
-_responsiveRule(util$s, "none", {
-  "@nest": {
-    "&:not([hidden])": {
-      display: "none"
-    }
-  }
-});
-const displayStyle = {
-  layers: {
-    util: util$s
-  }
-}, util$r = {};
-_responsiveRule(util$r, "flex-align-flex-start", {
-  alignItems: "flex-start"
-});
-_responsiveRule(util$r, "flex-align-flex-end", {
-  alignItems: "flex-end"
-});
-_responsiveRule(util$r, "flex-align-center", {
-  alignItems: "center"
-});
-_responsiveRule(util$r, "flex-align-stretch", {
-  alignItems: "stretch"
-});
-_responsiveRule(util$r, "flex-align-baseline", {
-  alignItems: "baseline"
-});
-const flexAlignStyle = {
-  layers: {
-    util: util$r
-  }
-}, util$q = {};
-_responsiveRule(util$q, "f-row", {
-  flexDirection: "row"
-});
-_responsiveRule(util$q, "f-column", {
-  flexDirection: "column"
-});
-const flexDirectionStyle = {
-  layers: {
-    util: util$q
-  }
-}, util$p = {};
-_responsiveRule(util$p, "flex-justify-flex-start", {
-  justifyContent: "flex-start"
-});
-_responsiveRule(util$p, "flex-justify-flex-end", {
-  justifyContent: "flex-end"
-});
-_responsiveRule(util$p, "flex-justify-center", {
-  justifyContent: "center"
-});
-_responsiveRule(util$p, "flex-justify-space-between", {
-  justifyContent: "space-between"
-});
-_responsiveRule(util$p, "flex-justify-space-around", {
-  justifyContent: "space-around"
-});
-_responsiveRule(util$p, "flex-justify-space-evenly", {
-  justifyContent: "space-evenly"
-});
-const flexJustifyStyle = {
-  layers: {
-    util: util$p
-  }
-}, util$o = {};
-_responsiveRule(util$o, "flex-nowrap", {
-  flexWrap: "nowrap"
-});
-_responsiveRule(util$o, "flex-wrap", {
-  flexWrap: "wrap"
-});
-_responsiveRule(util$o, "flex-wrap-reverse", {
-  flexWrap: "wrap-reverse"
-});
-const flexWrapStyle = {
-  layers: {
-    util: util$o
-  }
-}, util$n = {};
-_responsiveRule(util$n, "f-none", {
-  flex: "none"
-});
-_responsiveRule(util$n, "f-auto", {
-  flex: "auto"
-});
-_responsiveRule(util$n, "f-initial", {
-  flex: "initial"
-});
-_responsiveRule(util$n, "f-1", {
-  flex: 1
-});
-_responsiveRule(util$n, "f-2", {
-  flex: 2
-});
-_responsiveRule(util$n, "f-3", {
-  flex: 3
-});
-_responsiveRule(util$n, "f-4", {
-  flex: 4
-});
-_responsiveRule(util$n, "f-5", {
-  flex: 5
-});
-_responsiveRule(util$n, "f-6", {
-  flex: 6
-});
-_responsiveRule(util$n, "f-7", {
-  flex: 7
-});
-_responsiveRule(util$n, "f-8", {
-  flex: 8
-});
-_responsiveRule(util$n, "f-9", {
-  flex: 9
-});
-_responsiveRule(util$n, "f-10", {
-  flex: 10
-});
-_responsiveRule(util$n, "f-11", {
-  flex: 11
-});
-_responsiveRule(util$n, "f-12", {
-  flex: 12
-});
-const flexStyle = {
-  layers: {
-    util: util$n
-  }
-}, rules$3 = {
-  ".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)"
-  }
-};
-_responsiveRule(rules$3, "text-align-initial", {
-  textAlign: "initial"
-});
-_responsiveRule(rules$3, "text-align-left", {
-  textAlign: "left"
-});
-_responsiveRule(rules$3, "text-align-center", {
-  textAlign: "center"
-});
-_responsiveRule(rules$3, "text-align-right", {
-  textAlign: "right"
-});
-_responsiveRule(rules$3, "text-align-justify", {
-  textAlign: "justify"
-});
-const fontStyle = {
-  layers: {
-    primitive: rules$3
-  }
-}, util$m = {};
-for (const space of theme.SPACE)
-  _responsiveRule(util$m, `g-${space}`, {
-    gap: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gx-${space}`, {
-    columnGap: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$m, `gy-${space}`, {
-    rowGap: vars.space[space]
-  });
-const gapStyle = {
-  layers: {
-    util: util$m
-  }
-}, util$l = {};
-_responsiveRule(util$l, "auto-cols-auto", {
-  gridAutoColumns: "auto"
-});
-_responsiveRule(util$l, "auto-cols-min", {
-  gridAutoColumns: "min-content"
-});
-_responsiveRule(util$l, "auto-cols-max", {
-  gridAutoColumns: "max-content"
-});
-_responsiveRule(util$l, "auto-cols-fr", {
-  gridAutoColumns: "minmax(0, 1fr)"
-});
-const gridAutoColumnsStyle = {
-  layers: {
-    util: util$l
-  }
-}, util$k = {};
-_responsiveRule(util$k, "auto-flow-row", {
-  gridAutoFlow: "row"
-});
-_responsiveRule(util$k, "auto-flow-column", {
-  gridAutoFlow: "column"
-});
-_responsiveRule(util$k, "auto-flow-row-dense", {
-  gridAutoFlow: "row dense"
-});
-_responsiveRule(util$k, "auto-flow-column-dense", {
-  gridAutoFlow: "column dense"
-});
-const gridAutoFlowStyle = {
-  layers: {
-    util: util$k
-  }
-}, util$j = {};
-_responsiveRule(util$j, "auto-rows-auto", {
-  gridAutoRows: "auto"
-});
-_responsiveRule(util$j, "auto-rows-min", {
-  gridAutoRows: "min-content"
-});
-_responsiveRule(util$j, "auto-rows-max", {
-  gridAutoRows: "max-content"
-});
-_responsiveRule(util$j, "auto-rows-fr", {
-  gridAutoRows: "minmax(0, 1fr)"
-});
-const gridAutoRowsStyle = {
-  layers: {
-    util: util$j
-  }
-}, util$i = {};
-_responsiveRule(util$i, "cols-1", {
-  gridTemplateColumns: "repeat(1, 1fr)"
-});
-_responsiveRule(util$i, "cols-2", {
-  gridTemplateColumns: "repeat(2, 1fr)"
-});
-_responsiveRule(util$i, "cols-3", {
-  gridTemplateColumns: "repeat(3, 1fr)"
-});
-_responsiveRule(util$i, "cols-4", {
-  gridTemplateColumns: "repeat(4, 1fr)"
-});
-_responsiveRule(util$i, "cols-5", {
-  gridTemplateColumns: "repeat(5, 1fr)"
-});
-_responsiveRule(util$i, "cols-6", {
-  gridTemplateColumns: "repeat(6, 1fr)"
-});
-_responsiveRule(util$i, "cols-7", {
-  gridTemplateColumns: "repeat(7, 1fr)"
-});
-_responsiveRule(util$i, "cols-8", {
-  gridTemplateColumns: "repeat(8, 1fr)"
-});
-_responsiveRule(util$i, "cols-9", {
-  gridTemplateColumns: "repeat(9, 1fr)"
-});
-_responsiveRule(util$i, "cols-10", {
-  gridTemplateColumns: "repeat(10, 1fr)"
-});
-_responsiveRule(util$i, "cols-12", {
-  gridTemplateColumns: "repeat(12, 1fr)"
-});
-const gridColumnsStyle = {
-  layers: {
-    util: util$i
-  }
-}, util$h = {};
-_responsiveRule(util$h, "rows-1", {
-  gridTemplateRows: "repeat(1, 1fr)"
-});
-_responsiveRule(util$h, "rows-2", {
-  gridTemplateRows: "repeat(2, 1fr)"
-});
-_responsiveRule(util$h, "rows-3", {
-  gridTemplateRows: "repeat(3, 1fr)"
-});
-_responsiveRule(util$h, "rows-4", {
-  gridTemplateRows: "repeat(4, 1fr)"
-});
-_responsiveRule(util$h, "rows-5", {
-  gridTemplateRows: "repeat(5, 1fr)"
-});
-_responsiveRule(util$h, "rows-6", {
-  gridTemplateRows: "repeat(6, 1fr)"
-});
-_responsiveRule(util$h, "rows-7", {
-  gridTemplateRows: "repeat(7, 1fr)"
-});
-_responsiveRule(util$h, "rows-8", {
-  gridTemplateRows: "repeat(8, 1fr)"
-});
-_responsiveRule(util$h, "rows-9", {
-  gridTemplateRows: "repeat(9, 1fr)"
-});
-_responsiveRule(util$h, "rows-10", {
-  gridTemplateRows: "repeat(10, 1fr)"
-});
-_responsiveRule(util$h, "rows-12", {
-  gridTemplateRows: "repeat(12, 1fr)"
-});
-const gridRowsStyle = {
-  layers: {
-    util: util$h
-  }
-}, util$g = {};
-_responsiveRule(util$g, "col-auto", {
-  gridColumn: "auto"
-});
-_responsiveRule(util$g, "col-full", {
-  gridColumn: "1 / -1"
-});
-_responsiveRule(util$g, "col-1", {
-  gridColumn: "span 1 / span 1"
-});
-_responsiveRule(util$g, "col-2", {
-  gridColumn: "span 2 / span 2"
-});
-_responsiveRule(util$g, "col-3", {
-  gridColumn: "span 3 / span 3"
-});
-_responsiveRule(util$g, "col-4", {
-  gridColumn: "span 4 / span 4"
-});
-_responsiveRule(util$g, "col-5", {
-  gridColumn: "span 5 / span 5"
-});
-_responsiveRule(util$g, "col-6", {
-  gridColumn: "span 6 / span 6"
-});
-_responsiveRule(util$g, "col-7", {
-  gridColumn: "span 7 / span 7"
-});
-_responsiveRule(util$g, "col-8", {
-  gridColumn: "span 8 / span 8"
-});
-_responsiveRule(util$g, "col-9", {
-  gridColumn: "span 9 / span 9"
-});
-_responsiveRule(util$g, "col-10", {
-  gridColumn: "span 10 / span 10"
-});
-_responsiveRule(util$g, "col-12", {
-  gridColumn: "span 12 / span 12"
-});
-const gridColumnStyle = {
-  layers: {
-    util: util$g
-  }
-}, util$f = {};
-_responsiveRule(util$f, "col-end-auto", {
-  gridColumnEnd: "auto"
-});
-_responsiveRule(util$f, "col-end-1", {
-  gridColumnEnd: "1"
-});
-_responsiveRule(util$f, "col-end-2", {
-  gridColumnEnd: "2"
-});
-_responsiveRule(util$f, "col-end-3", {
-  gridColumnEnd: "3"
-});
-_responsiveRule(util$f, "col-end-4", {
-  gridColumnEnd: "4"
-});
-_responsiveRule(util$f, "col-end-5", {
-  gridColumnEnd: "5"
-});
-_responsiveRule(util$f, "col-end-6", {
-  gridColumnEnd: "6"
-});
-_responsiveRule(util$f, "col-end-7", {
-  gridColumnEnd: "7"
-});
-_responsiveRule(util$f, "col-end-8", {
-  gridColumnEnd: "8"
-});
-_responsiveRule(util$f, "col-end-9", {
-  gridColumnEnd: "9"
-});
-_responsiveRule(util$f, "col-end-10", {
-  gridColumnEnd: "10"
-});
-_responsiveRule(util$f, "col-end-11", {
-  gridColumnEnd: "11"
-});
-_responsiveRule(util$f, "col-end-12", {
-  gridColumnEnd: "12"
-});
-const gridColumnEndStyle = {
-  layers: {
-    util: util$f
-  }
-}, util$e = {};
-_responsiveRule(util$e, "col-start-auto", {
-  gridColumnStart: "auto"
-});
-_responsiveRule(util$e, "col-start-1", {
-  gridColumnStart: "1"
-});
-_responsiveRule(util$e, "col-start-2", {
-  gridColumnStart: "2"
-});
-_responsiveRule(util$e, "col-start-3", {
-  gridColumnStart: "3"
-});
-_responsiveRule(util$e, "col-start-4", {
-  gridColumnStart: "4"
-});
-_responsiveRule(util$e, "col-start-5", {
-  gridColumnStart: "5"
-});
-_responsiveRule(util$e, "col-start-6", {
-  gridColumnStart: "6"
-});
-_responsiveRule(util$e, "col-start-7", {
-  gridColumnStart: "7"
-});
-_responsiveRule(util$e, "col-start-8", {
-  gridColumnStart: "8"
-});
-_responsiveRule(util$e, "col-start-9", {
-  gridColumnStart: "9"
-});
-_responsiveRule(util$e, "col-start-10", {
-  gridColumnStart: "10"
-});
-_responsiveRule(util$e, "col-start-11", {
-  gridColumnStart: "11"
-});
-_responsiveRule(util$e, "col-start-12", {
-  gridColumnStart: "12"
-});
-const gridColumnStartStyle = {
-  layers: {
-    util: util$e
-  }
-}, util$d = {};
-_responsiveRule(util$d, "row-auto", {
-  gridRow: "auto"
-});
-_responsiveRule(util$d, "row-full", {
-  gridRow: "1 / -1"
-});
-_responsiveRule(util$d, "row-1", {
-  gridRow: "span 1 / span 1"
-});
-_responsiveRule(util$d, "row-2", {
-  gridRow: "span 2 / span 2"
-});
-_responsiveRule(util$d, "row-3", {
-  gridRow: "span 3 / span 3"
-});
-_responsiveRule(util$d, "row-4", {
-  gridRow: "span 4 / span 4"
-});
-_responsiveRule(util$d, "row-5", {
-  gridRow: "span 5 / span 5"
-});
-_responsiveRule(util$d, "row-6", {
-  gridRow: "span 6 / span 6"
-});
-_responsiveRule(util$d, "row-7", {
-  gridRow: "span 7 / span 7"
-});
-_responsiveRule(util$d, "row-8", {
-  gridRow: "span 8 / span 8"
-});
-_responsiveRule(util$d, "row-9", {
-  gridRow: "span 9 / span 9"
-});
-_responsiveRule(util$d, "row-10", {
-  gridRow: "span 10 / span 10"
-});
-_responsiveRule(util$d, "row-12", {
-  gridRow: "span 12 / span 12"
-});
-const gridRowStyle = {
-  layers: {
-    util: util$d
-  }
-}, util$c = {};
-_responsiveRule(util$c, "row-end-auto", {
-  gridRowEnd: "auto"
-});
-_responsiveRule(util$c, "row-end-1", {
-  gridRowEnd: "1"
-});
-_responsiveRule(util$c, "row-end-2", {
-  gridRowEnd: "2"
-});
-_responsiveRule(util$c, "row-end-3", {
-  gridRowEnd: "3"
-});
-_responsiveRule(util$c, "row-end-4", {
-  gridRowEnd: "4"
-});
-_responsiveRule(util$c, "row-end-5", {
-  gridRowEnd: "5"
-});
-_responsiveRule(util$c, "row-end-6", {
-  gridRowEnd: "6"
-});
-_responsiveRule(util$c, "row-end-7", {
-  gridRowEnd: "7"
-});
-_responsiveRule(util$c, "row-end-8", {
-  gridRowEnd: "8"
-});
-_responsiveRule(util$c, "row-end-9", {
-  gridRowEnd: "9"
-});
-_responsiveRule(util$c, "row-end-10", {
-  gridRowEnd: "10"
-});
-_responsiveRule(util$c, "row-end-11", {
-  gridRowEnd: "11"
-});
-_responsiveRule(util$c, "row-end-12", {
-  gridRowEnd: "12"
-});
-const gridRowEndStyle = {
-  layers: {
-    util: util$c
-  }
-}, util$b = {};
-_responsiveRule(util$b, "row-start-auto", {
-  gridRowStart: "auto"
-});
-_responsiveRule(util$b, "row-start-1", {
-  gridRowStart: "1"
-});
-_responsiveRule(util$b, "row-start-2", {
-  gridRowStart: "2"
-});
-_responsiveRule(util$b, "row-start-3", {
-  gridRowStart: "3"
-});
-_responsiveRule(util$b, "row-start-4", {
-  gridRowStart: "4"
-});
-_responsiveRule(util$b, "row-start-5", {
-  gridRowStart: "5"
-});
-_responsiveRule(util$b, "row-start-6", {
-  gridRowStart: "6"
-});
-_responsiveRule(util$b, "row-start-7", {
-  gridRowStart: "7"
-});
-_responsiveRule(util$b, "row-start-8", {
-  gridRowStart: "8"
-});
-_responsiveRule(util$b, "row-start-9", {
-  gridRowStart: "9"
-});
-_responsiveRule(util$b, "row-start-10", {
-  gridRowStart: "10"
-});
-_responsiveRule(util$b, "row-start-11", {
-  gridRowStart: "11"
-});
-_responsiveRule(util$b, "row-start-12", {
-  gridRowStart: "12"
-});
-const gridRowStartStyle = {
-  layers: {
-    util: util$b
-  }
-}, util$a = {};
-_responsiveRule(util$a, "h-fill", {
-  height: "100%"
-});
-_responsiveRule(util$a, "h-stretch", {
-  height: "stretch"
-});
-const heightStyle = {
-  layers: {
-    util: util$a
-  }
-}, util$9 = {};
-_responsiveRule(util$9, "inset-0", {
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0
-});
-_responsiveRule(util$9, "top-0", {
-  top: 0
-});
-_responsiveRule(util$9, "right-0", {
-  right: 0
-});
-_responsiveRule(util$9, "bottom-0", {
-  bottom: 0
-});
-_responsiveRule(util$9, "left-0", {
-  left: 0
-});
-const insetStyle = {
-  layers: {
-    util: util$9
-  }
-}, util$8 = {};
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `m-${space}`, {
-    margin: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mx-${space}`, {
-    marginLeft: vars.space[space],
-    marginRight: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `my-${space}`, {
-    marginTop: vars.space[space],
-    marginBottom: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mt-${space}`, {
-    marginTop: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mr-${space}`, {
-    marginRight: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `mb-${space}`, {
-    marginBottom: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$8, `ml-${space}`, {
-    marginLeft: vars.space[space]
-  });
-const marginStyle = {
-  layers: {
-    util: util$8
-  }
-}, util$7 = {};
-_responsiveRule(util$7, "max-w-0", {
-  maxWidth: vars.container[0]
-});
-_responsiveRule(util$7, "max-w-1", {
-  maxWidth: vars.container[1]
-});
-_responsiveRule(util$7, "max-w-2", {
-  maxWidth: vars.container[2]
-});
-_responsiveRule(util$7, "max-w-3", {
-  maxWidth: vars.container[3]
-});
-_responsiveRule(util$7, "max-w-4", {
-  maxWidth: vars.container[4]
-});
-_responsiveRule(util$7, "max-w-5", {
-  maxWidth: vars.container[5]
-});
-_responsiveRule(util$7, "max-w-auto", {
-  maxWidth: "none"
-});
-_responsiveRule(util$7, "max-w-fill", {
-  maxWidth: "100%"
-});
-const maxWidthStyle = {
-  layers: {
-    util: util$7
-  }
-}, util$6 = {};
-_responsiveRule(util$6, "min-w-0", {
-  minWidth: "0"
-});
-_responsiveRule(util$6, "min-w-auto", {
-  minWidth: "auto"
-});
-_responsiveRule(util$6, "min-w-full", {
-  minWidth: "100%"
-});
-_responsiveRule(util$6, "min-w-min", {
-  minWidth: "min-content"
-});
-_responsiveRule(util$6, "min-w-max", {
-  minWidth: "max-content"
-});
-_responsiveRule(util$6, "min-w-fit", {
-  minWidth: "fit-content"
-});
-const minWidthStyle = {
-  layers: {
-    util: util$6
-  }
-}, rules$2 = {
-  ".outline-none": {
-    outline: "none"
-  }
-}, outlineStyle = {
-  layers: {
-    util: rules$2
-  }
-}, util$5 = {};
-_responsiveRule(util$5, "overflow-visible", {
-  overflow: "visible"
-});
-_responsiveRule(util$5, "overflow-hidden", {
-  overflow: "hidden"
-});
-_responsiveRule(util$5, "overflow-scroll", {
-  overflow: "scroll"
-});
-_responsiveRule(util$5, "overflow-auto", {
-  overflow: "auto"
-});
-const overflowStyle = {
-  layers: {
-    util: util$5
-  }
-}, util$4 = {};
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `p-${space}`, {
-    padding: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `px-${space}`, {
-    paddingLeft: vars.space[space],
-    paddingRight: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `py-${space}`, {
-    paddingTop: vars.space[space],
-    paddingBottom: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pt-${space}`, {
-    paddingTop: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pr-${space}`, {
-    paddingRight: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pb-${space}`, {
-    paddingBottom: vars.space[space]
-  });
-for (const space of theme.SPACE)
-  _responsiveRule(util$4, `pl-${space}`, {
-    paddingLeft: vars.space[space]
-  });
-const paddingStyle = {
-  layers: {
-    util: util$4
-  }
-}, rules$1 = {
-  ".pointer-events-none": {
-    pointerEvents: "none"
-  },
-  ".pointer-events-auto": {
-    pointerEvents: "auto"
-  }
-}, pointerEventsStyle = {
-  layers: {
-    util: rules$1
-  }
-}, util$3 = {};
-_responsiveRule(util$3, "position-absolute", {
-  position: "absolute"
-});
-_responsiveRule(util$3, "position-fixed", {
-  position: "fixed"
-});
-_responsiveRule(util$3, "position-relative", {
-  position: "relative"
-});
-_responsiveRule(util$3, "position-static", {
-  position: "static"
-});
-_responsiveRule(util$3, "position-sticky", {
-  position: "sticky"
-});
-const positionStyle = {
-  layers: {
-    util: util$3
-  }
-}, util$2 = {};
-_responsiveRule(util$2, "r-0", {
-  borderRadius: vars.radius[0]
-});
-_responsiveRule(util$2, "r-1", {
-  borderRadius: vars.radius[1]
-});
-_responsiveRule(util$2, "r-2", {
-  borderRadius: vars.radius[2]
-});
-_responsiveRule(util$2, "r-3", {
-  borderRadius: vars.radius[3]
-});
-_responsiveRule(util$2, "r-4", {
-  borderRadius: vars.radius[4]
-});
-_responsiveRule(util$2, "r-5", {
-  borderRadius: vars.radius[5]
-});
-_responsiveRule(util$2, "r-6", {
-  borderRadius: vars.radius[6]
-});
-_responsiveRule(util$2, "r-full", {
-  borderRadius: "9999px"
-});
-const radiusStyle = {
-  layers: {
-    util: util$2
-  }
-}, util$1 = {};
-_responsiveRule(util$1, "shadow-0", {
-  boxShadow: "none"
-});
-_responsiveRule(util$1, "shadow-1", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-2", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-3", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-4", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-_responsiveRule(util$1, "shadow-5", {
-  boxShadow: [`var(--shadow-outline) ${vars.color.shadow.outline}`, `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`, `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`, `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`].join(", ")
-});
-const shadowStyle = {
-  layers: {
-    util: util$1
-  }
-}, rules = {
-  ".text-overflow-ellipsis": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    // @ts-expect-error - TODO: fix this
-    overflow: ["hidden", "clip"]
-  },
-  ".text-overflow-clip": {
-    display: "block",
-    whiteSpace: "nowrap",
-    textOverflow: "clip",
-    // @ts-expect-error - TODO: fix this
-    overflow: ["hidden", "clip"]
-  }
-}, textOverflowStyle = {
-  layers: {
-    util: rules
-  }
-}, util = {};
-_responsiveRule(util, "w-fill", {
-  // @ts-expect-error - TODO: fix this
-  width: ["-moz-available", "-webkit-fill-available", "stretch"]
-});
-const widthStyle = {
-  layers: {
-    util
-  }
-}, component$5 = {
-  ".breadcrumbs": {
-    lineHeight: 0
-  }
-}, breadcrumbsStyle = {
-  layers: {
-    component: component$5
-  }
-}, keyframes$2 = {
-  "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
-    }
-  }
-}, component$4 = {
-  ".dialog": {
-    // 'top': 0,
-    // 'left': 0,
-    // 'right': 0,
-    // 'bottom': 0,
-    alignItems: "center",
-    justifyContent: "center",
-    outline: "none",
-    background: vars.color.backdrop,
-    "@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%",
-    // @ts-expect-error - TODO: fix this
-    overflow: ["hidden", "clip"]
-  },
-  ".dialog-layout": {
-    width: "100%"
-  },
-  ".dialog-header": {
-    zIndex: 2
-  },
-  ".dialog-content": {
-    zIndex: 1,
-    outline: "none"
-  },
-  ".dialog-footer": {
-    zIndex: 3
-  }
-}, dialogStyle = {
-  keyframes: keyframes$2,
-  layers: {
-    component: component$4
-  }
-}, component$3 = {
-  ".menu": {
-    outline: "none"
-  },
-  ".menu-divider": {
-    height: "1px",
-    border: 0,
-    backgroundColor: vars.color.border,
-    margin: 0
-  }
-}, menuStyle = {
-  layers: {
-    component: component$3
-  }
-}, keyframes$1 = {
-  "skeleton-pulse": {
-    "0%": {
-      backgroundPosition: "100%"
-    },
-    "100%": {
-      backgroundPosition: "-100%"
-    }
-  }
-}, component$2 = {
-  ".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",
-    "@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))"
-  }
-};
-for (const size of theme.FONT_CODE_SIZE)
-  _responsiveRule(component$2, `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
-  });
-for (const size of theme.FONT_HEADING_SIZE)
-  _responsiveRule(component$2, `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
-  });
-for (const size of theme.FONT_LABEL_SIZE)
-  _responsiveRule(component$2, `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
-  });
-for (const size of theme.FONT_TEXT_SIZE)
-  _responsiveRule(component$2, `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
-  });
-const skeletonStyle = {
-  keyframes: keyframes$1,
-  layers: {
-    component: component$2
-  }
-}, component$1 = {
-  ".toast-layer": {
-    position: "fixed",
-    right: 0,
-    bottom: 0,
-    pointerEvents: "none",
-    maxWidth: "420px",
-    width: "100%"
-  },
-  ".toast": {
-    pointerEvents: "all",
-    // @ts-expect-error - TODO: fix this
-    overflow: ["hidden", "clip"]
-  }
-}, toastStyle = {
-  layers: {
-    component: component$1
-  }
-}, component = {
-  ".tree-item": {
-    "@nest": {
-      '&[role="none"] > [role="treeitem"]': {
-        outline: "none",
-        cursor: "default",
-        borderRadius: "3px",
-        backgroundColor: vars.color.bg,
-        // 'var(--card-bg-color)',
-        color: "var(--treeitem-fg-color)"
-      },
-      '&[role="none"] > [role="treeitem"]:focus': {
-        position: "relative"
-      },
-      '&[role="treeitem"]': {
-        outline: "none"
-      },
-      '&[role="treeitem"] > div': {
-        cursor: "default",
-        borderRadius: "3px",
-        backgroundColor: vars.color.bg,
-        // 'var(--card-bg-color)',
-        color: "var(--treeitem-fg-color)"
-      },
-      '&[role="treeitem"]:focus > div': {
-        position: "relative"
-      }
-      // &[role='treeitem'] {
-      //   outline: none;
-      //   & > div {
-      //     cursor: default;
-      //     border-radius: 3px;
-      //     background-color: var(--card-bg-color);
-      //     color: var(--treeitem-fg-color);
-      //   }
-      //   &:focus > div {
-      //     position: relative;
-      //   }
-      // }
-    }
-  }
-}, treeStyle = {
-  layers: {
-    component
-  }
-}, primitive$p = {
-  ".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
-  }
-}, _arrowStyle = {
-  layers: {
-    primitive: primitive$p
-  }
-}, primitive$o = {
-  ".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",
-    // @ts-expect-error - TODO: fix this
-    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 theme.FONT_TEXT_SIZE) {
-  const source = vars.font.text.sizes[textSize];
-  primitive$o[`.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 theme.SPACE)
-  primitive$o[`.input-p-${space}`] = {
-    [varNames.input.padding]: vars.space[space]
-  };
-for (const space of theme.SPACE)
-  primitive$o[`.input-g-${space}`] = {
-    [varNames.input.gap]: vars.space[space]
-  };
-const _inputStyle = {
-  layers: {
-    primitive: primitive$o
-  }
-}, toneMap$2 = {
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
-}, primitive$n = {
-  ".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,
-        // @ts-expect-error - TODO: fix this
-        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]
-          }
-        }
-      }
-    }
-  }
-}, _selectableStyle = {
-  layers: {
-    primitive: primitive$n
-  }
-};
-function buildSelectableTones() {
-  const rules2 = {};
-  for (const tone of theme.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 primitive$m = {
-  ".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.THEME_COLOR_AVATAR_COLORS.reduce((acc, color2) => ({
-        ...acc,
-        [`&.${color2}`]: {
-          [varNames.color.avatar.bg]: vars.color.avatar[color2].bg,
-          [varNames.color.avatar.fg]: vars.color.avatar[color2].fg
-        }
-      }), {})
-    }
-  },
-  ".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
-      }
-    }
-  }
-};
-for (const size of theme.AVATAR_SIZE)
-  _responsiveRule(primitive$m, `avatar-${size}`, {
-    [varNames.avatar.distance]: vars.avatar.sizes[size].distance,
-    [varNames.avatar.size]: vars.avatar.sizes[size].size
-  });
-const avatarStyle = {
-  layers: {
-    primitive: primitive$m
-  }
-}, primitive$l = {
-  ".badge": {
-    backgroundColor: vars.color.bg,
-    color: vars.color.fg,
-    verticalAlign: "top"
-  }
-};
-for (const tone of theme.THEME_COLOR_STATE_TONES)
-  primitive$l[`.badge-${tone}`] = {
-    [varNames.color.bg]: vars.color.tinted[tone].bg[4],
-    [varNames.color.fg]: vars.color.tinted[tone].fg[3]
-  };
-const badgeStyle = {
-  layers: {
-    primitive: primitive$l
-  }
-}, primitive$k = {
-  ".box": {
-    // todo: move to aspects
-    minHeight: 0,
-    "@nest": {
-      "&:is(ul), &:is(ol)": {
-        listStyle: "none"
-      },
-      "&.muted": {
-        backgroundColor: vars.color.muted.bg
-      }
-    }
-  },
-  // sizing
-  ".box-content": {
-    boxSizing: "content-box"
-  },
-  ".box-border": {
-    boxSizing: "border-box"
-  }
-}, boxStyle = {
-  layers: {
-    primitive: primitive$k
-  }
-}, toneMap$1 = {
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical"
-}, variantMap = {
-  default: "solid",
-  ghost: "ghost",
-  bleed: "tinted"
-}, primitive$j = {
-  ".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: vars.color.bg,
-    color: vars.color.fg,
-    boxShadow: "var(--button-box-shadow)",
-    alignItems: "center",
-    // 'justifyContent': 'center',
-    "@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"
-      }
-    }
-  },
-  ".button-loading-box": {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: vars.color.bg,
-    borderRadius: "inherit",
-    zIndex: 1,
-    opacity: 0.8
-  }
-};
-for (const tone of theme.THEME_COLOR_STATE_TONES) {
-  const solid = vars.color.solid[tone], tinted = vars.color.tinted[tone];
-  primitive$j[`.button.${variantMap.default}.${toneMap$1[tone]}`] = {
-    [varNames.color.bg]: solid.bg[0],
-    [varNames.color.border]: solid.border[1],
-    [varNames.color.fg]: solid.fg[0],
-    [varNames.color.muted.bg]: solid.bg[1],
-    [varNames.color.muted.fg]: solid.fg[4],
-    "--button-box-shadow": "none",
-    "@nest": {
-      "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: solid.bg[1],
-        [varNames.color.border]: solid.border[2],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[2],
-        [varNames.color.muted.fg]: solid.fg[4]
-      },
-      "&:not([data-disabled]):active": {
-        [varNames.color.bg]: solid.bg[2],
-        [varNames.color.border]: solid.border[3],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
-        [varNames.color.muted.fg]: solid.fg[4]
-      },
-      "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: solid.bg[2],
-        [varNames.color.border]: solid.border[3],
-        [varNames.color.fg]: solid.fg[0],
-        [varNames.color.muted.bg]: solid.bg[3],
-        [varNames.color.muted.fg]: solid.fg[4]
-      },
-      "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
-      }
-    }
-  }, primitive$j[`.button.${variantMap.ghost}.${toneMap$1[tone]}`] = {
-    [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[0],
-    [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[2],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)",
-    "@nest": {
-      "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[1],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
-        // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
-      },
-      "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
-      },
-      "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[4],
-        [varNames.color.muted.fg]: tinted.fg[3],
-        "--button-box-shadow": "inset 0 0 0 var(--button-border-width) var(--color-border)"
-      },
-      "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[2],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
-      }
-    }
-  }, primitive$j[`.button.${variantMap.bleed}.${toneMap$1[tone]}`] = {
-    boxShadow: "none",
-    [varNames.color.bg]: tinted.bg[0],
-    [varNames.color.border]: tinted.border[1],
-    [varNames.color.fg]: tinted.fg[2],
-    [varNames.color.muted.bg]: tinted.bg[1],
-    [varNames.color.muted.fg]: tinted.fg[4],
-    "--button-box-shadow": "none",
-    "@nest": {
-      "&:not([data-disabled]):hover": {
-        [varNames.color.bg]: tinted.bg[1],
-        [varNames.color.border]: tinted.border[2],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[2],
-        [varNames.color.muted.fg]: tinted.fg[3]
-      },
-      "&:not([data-disabled]):active": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
-      },
-      "&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[3],
-        [varNames.color.fg]: tinted.fg[1],
-        [varNames.color.muted.bg]: tinted.bg[3],
-        [varNames.color.muted.fg]: tinted.fg[3]
-      },
-      "&[data-disabled]": {
-        [varNames.color.bg]: vars.color.default.tinted.bg[0],
-        [varNames.color.border]: vars.color.default.tinted.border[0],
-        [varNames.color.fg]: vars.color.default.tinted.fg[2],
-        [varNames.color.muted.bg]: vars.color.default.tinted.bg[1],
-        [varNames.color.muted.fg]: vars.color.default.tinted.fg[1]
-      }
-    }
-  };
-}
-const buttonStyle = {
-  layers: {
-    primitive: primitive$j
-  }
-}, toneMap = {
-  transparent: "transparent",
-  default: "default",
-  neutral: "neutral",
-  suggest: "suggest",
-  primary: "accent",
-  positive: "positive",
-  caution: "caution",
-  critical: "critical",
-  inherit: void 0
-}, primitive$i = {
-  ".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.code.bg]: vars.color.code.bg,
-    [varNames.color.code.fg]: vars.color.code.fg,
-    [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": {
-      "button&": {
-        WebkitFontSmoothing: "inherit",
-        appearance: "none",
-        outline: "none",
-        font: "inherit",
-        textAlign: "inherit",
-        border: "none",
-        // @ts-expect-error - TODO: fix
-        width: ["-moz-available", "-webkit-fill-available", "fill-available"]
-      },
-      "a&": {
-        // border: 'none',
-        outline: "none",
-        textDecoration: "none"
-      },
-      "pre&": {
-        font: "inherit",
-        whiteSpace: "inherit"
-      },
-      "a&:not([data-disabled]):hover, button&:not([data-disabled]):hover": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[1],
-        [varNames.color.border]: vars.color.tinted.default.border[3],
-        [varNames.color.fg]: vars.color.tinted.default.fg[1],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled]):active, button&:not([data-disabled]):active": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      // toggle button
-      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]': {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      },
-      "a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]": {
-        [varNames.color.bg]: vars.color.solid.primary.bg[0],
-        [varNames.color.border]: vars.color.solid.primary.border[1],
-        [varNames.color.fg]: vars.color.solid.primary.fg[0],
-        [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
-        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
-      },
-      // '&: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],
-      // },
-      "a&[data-disabled]), button&[data-disabled]": {
-        [varNames.color.bg]: vars.color.tinted.default.bg[2],
-        [varNames.color.border]: vars.color.tinted.default.border[4],
-        [varNames.color.fg]: vars.color.tinted.default.fg[0],
-        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
-        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
-      }
-      // '&[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],
-      // },
-    }
-  }
-};
-for (const scheme of theme.THEME_COLOR_SCHEMES) {
-  const schemeProps = {
-    colorScheme: scheme
-  };
-  for (const tone of theme.THEME_COLOR_CARD_TONES) {
-    const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
-    _assignToneProps(schemeProps, _varNames, _vars);
-  }
-  primitive$i[`.card.${scheme}`] = schemeProps;
-}
-for (const tone of theme.THEME_COLOR_CARD_TONES) {
-  const _varNames = varNames.color, _vars = vars.color[tone], toneProps = {};
-  _assignToneProps(toneProps, _varNames, _vars), Object.assign(toneProps, {
-    "--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.code.bg,
-    "--card-code-fg-color": vars.color.code.fg,
-    "--card-fg-color": vars.color.fg,
-    "--card-focus-ring-color": vars.color.focusRing,
-    "--card-hairline-soft-color": vars.color.tinted.default.border[1],
-    "--card-hairline-hard-color": vars.color.tinted.default.border[2],
-    "--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,
-    "--card-muted-fg-color": vars.color.muted.fg,
-    "--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)',
-  }), primitive$i[`.card.${toneMap[tone]}`] = toneProps;
-}
-const cardStyle = {
-  layers: {
-    primitive: primitive$i
-  }
-};
-function _assignToneProps(toneProps, _varNames, _vars) {
-  Object.assign(toneProps, {
-    [_varNames.accent.fg]: _vars.accent.fg
-  });
-  for (const hue of theme.THEME_COLOR_AVATAR_COLORS)
-    toneProps[`${_varNames.avatar[hue].bg}`] = _vars.avatar[hue].bg, toneProps[`${_varNames.avatar[hue].fg}`] = _vars.avatar[hue].fg;
-  Object.assign(toneProps, {
-    [_varNames.backdrop]: _vars.backdrop,
-    [_varNames.code.fg]: _vars.code.fg,
-    [_varNames.code.bg]: _vars.code.bg,
-    [_varNames.code.token.atrule]: _vars.code.token.atrule,
-    [_varNames.code.token.attrName]: _vars.code.token.attrName,
-    [_varNames.code.token.attrValue]: _vars.code.token.attrValue,
-    [_varNames.code.token.attribute]: _vars.code.token.attribute,
-    [_varNames.code.token.boolean]: _vars.code.token.boolean,
-    [_varNames.code.token.builtin]: _vars.code.token.builtin,
-    [_varNames.code.token.cdata]: _vars.code.token.cdata,
-    [_varNames.code.token.char]: _vars.code.token.char,
-    [_varNames.code.token.class]: _vars.code.token.class,
-    [_varNames.code.token.className]: _vars.code.token.className,
-    [_varNames.code.token.comment]: _vars.code.token.comment,
-    [_varNames.code.token.constant]: _vars.code.token.constant,
-    [_varNames.code.token.deleted]: _vars.code.token.deleted,
-    [_varNames.code.token.doctype]: _vars.code.token.doctype,
-    [_varNames.code.token.entity]: _vars.code.token.entity,
-    [_varNames.code.token.function]: _vars.code.token.function,
-    [_varNames.code.token.hexcode]: _vars.code.token.hexcode,
-    [_varNames.code.token.id]: _vars.code.token.id,
-    [_varNames.code.token.important]: _vars.code.token.important,
-    [_varNames.code.token.inserted]: _vars.code.token.inserted,
-    [_varNames.code.token.keyword]: _vars.code.token.keyword,
-    [_varNames.code.token.number]: _vars.code.token.number,
-    [_varNames.code.token.operator]: _vars.code.token.operator,
-    [_varNames.code.token.prolog]: _vars.code.token.prolog,
-    [_varNames.code.token.property]: _vars.code.token.property,
-    [_varNames.code.token.pseudoClass]: _vars.code.token.pseudoClass,
-    [_varNames.code.token.pseudoElement]: _vars.code.token.pseudoElement,
-    [_varNames.code.token.punctuation]: _vars.code.token.punctuation,
-    [_varNames.code.token.regex]: _vars.code.token.regex,
-    [_varNames.code.token.selector]: _vars.code.token.selector,
-    [_varNames.code.token.string]: _vars.code.token.string,
-    [_varNames.code.token.symbol]: _vars.code.token.symbol,
-    [_varNames.code.token.tag]: _vars.code.token.tag,
-    [_varNames.code.token.unit]: _vars.code.token.unit,
-    [_varNames.code.token.url]: _vars.code.token.url,
-    [_varNames.code.token.variable]: _vars.code.token.variable,
-    [_varNames.focusRing]: _vars.focusRing,
-    [_varNames.link.fg]: _vars.link.fg,
-    [_varNames.shadow.outline]: _vars.shadow.outline,
-    [_varNames.shadow.umbra]: _vars.shadow.umbra,
-    [_varNames.shadow.penumbra]: _vars.shadow.penumbra,
-    [_varNames.shadow.ambient]: _vars.shadow.ambient
-  });
-  for (const variant of ["solid", "tinted"])
-    for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
-      const __varNames = _varNames[variant][elementTone], __vars = _vars[variant][elementTone];
-      Object.assign(toneProps, {
-        [__varNames.bg[0]]: __vars.bg[0],
-        [__varNames.bg[1]]: __vars.bg[1],
-        [__varNames.bg[2]]: __vars.bg[2],
-        [__varNames.bg[3]]: __vars.bg[3],
-        [__varNames.bg[4]]: __vars.bg[4],
-        [__varNames.border[0]]: __vars.border[0],
-        [__varNames.border[1]]: __vars.border[1],
-        [__varNames.border[2]]: __vars.border[2],
-        [__varNames.border[3]]: __vars.border[3],
-        [__varNames.border[4]]: __vars.border[4],
-        [__varNames.fg[0]]: __vars.fg[0],
-        [__varNames.fg[1]]: __vars.fg[1],
-        [__varNames.fg[2]]: __vars.fg[2],
-        [__varNames.fg[3]]: __vars.fg[3],
-        [__varNames.fg[4]]: __vars.fg[4]
-      });
-    }
-}
-const primitive$h = {
-  ".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
-      }
-    }
-  }
-}, checkboxStyle = {
-  layers: {
-    primitive: primitive$h
-  }
-}, primitive$g = {
-  ".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"
-      }
-    }
-  }
-};
-for (const size of theme.FONT_CODE_SIZE)
-  _responsiveRule(primitive$g, `code-${size}`, {
-    "--font-size": `var(--font-code-${size}-size)`,
-    "--font-line-height": `var(--font-code-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-code-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-code-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-code-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-code-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-code-${size}-cap-height)`,
-  });
-const codeStyle = {
-  layers: {
-    primitive: primitive$g
-  }
-}, primitive$f = {
-  ".container": {
-    margin: "0 auto",
-    width: "100%"
-  }
-}, containerStyle = {
-  layers: {
-    primitive: primitive$f
-  }
-}, primitive$e = {
-  ".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)"
-  }
-};
-for (const size of theme.FONT_HEADING_SIZE)
-  _responsiveRule(primitive$e, `heading-${size}`, {
-    "--font-size": `var(--font-heading-${size}-size)`,
-    "--font-line-height": `var(--font-heading-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-heading-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-heading-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-heading-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-heading-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-heading-${size}-cap-height)`,
-  });
-const headingStyle = {
-  layers: {
-    primitive: primitive$e
-  }
-}, primitive$d = {
-  ".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-tinted-default-border-3)",
-    background: "var(--color-muted-bg)",
-    font: "inherit",
-    verticalAlign: "top",
-    "@nest": {
-      "&:not([hidden])": {
-        display: "inline-block"
-      }
-    }
-  }
-}, kbdStyle = {
-  layers: {
-    primitive: primitive$d
-  }
-}, primitive$c = {
-  ".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)"
-  }
-};
-for (const size of theme.FONT_LABEL_SIZE)
-  _responsiveRule(primitive$c, `label-${size}`, {
-    "--font-size": `var(--font-label-${size}-size)`,
-    "--font-line-height": `var(--font-label-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-label-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-label-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-label-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-label-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-label-${size}-cap-height)`,
-  });
-const labelStyle = {
-  layers: {
-    primitive: primitive$c
-  }
-}, primitive$b = {}, popoverStyle = {
-  layers: {
-    primitive: primitive$b
-  }
-}, primitive$a = {
-  ".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};
-      //     }
-      //   }
-      // `
-    }
-  }
-}, radioStyle = {
-  layers: {
-    primitive: primitive$a
-  }
-}, primitive$9 = {
-  ".select": {
-    "@nest": {
-      "& > select:disabled": {
-        opacity: 1
-      }
-    }
-  },
-  ".select-presentation": {
-    "@nest": {
-      "& > span": {
-        // place icon to the right
-        position: "absolute",
-        top: 0,
-        right: 0
-      }
-    }
-  }
-}, selectStyle = {
-  layers: {
-    primitive: primitive$9
-  }
-}, keyframes = {
-  "spinner-rotate": {
-    from: {
-      transform: "rotate(0deg)"
-    },
-    to: {
-      transform: "rotate(360deg)"
-    }
-  }
-}, primitive$8 = {
-  ".spinner": {},
-  ".animated-spinner-icon": {
-    animation: "spinner-rotate 500ms linear infinite"
-  }
-}, spinnerStyle = {
-  keyframes,
-  layers: {
-    primitive: primitive$8
-  }
-}, primitive$7 = {
-  ".stack": {
-    gridTemplateColumns: "minmax(0, 1fr)"
-  }
-}, stackStyle = {
-  layers: {
-    primitive: primitive$7
-  }
-}, primitive$6 = {
-  ".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 on top of the representation element
-    zIndex: 1
-  },
-  ".switch-presentation": {
-    "--switch-bg-color": "var(--color-tinted-default-border-2)",
-    "--switch-fg-color": "var(--color-tinted-default-bg-0)",
-    "--switch-thumb-offset": "0",
-    "--switch-thumb-size": "calc(var(--input-switch-height) - var(--input-switch-padding) * 2)",
-    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": {
-      ".switch-element:focus + &": {
-        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-fg-color": "var(--color-solid-default-fg-0)"
-      },
-      ".switch-element:checked + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))"
-      },
-      "[data-indeterminate] > .switch-element + &": {
-        "--switch-thumb-offset": "calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))"
-      }
-    }
-  },
-  ".switch-track": {
-    display: "block",
-    backgroundColor: "var(--switch-bg-color)",
-    position: "absolute",
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    borderRadius: "inherit",
-    transition: "box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)"
-  },
-  ".switch-thumb": {
-    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)"
-  }
-}, switchStyle = {
-  layers: {
-    primitive: primitive$6
-  }
-}, primitive$5 = {
-  ".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)"
-      },
-      "& code": {
-        fontFamily: vars.font.code.family,
-        color: "var(--color-code-fg)",
-        backgroundColor: "var(--color-muted-bg)",
-        borderRadius: vars.radius[2]
-      },
-      "& svg": {
-        color: "var(--color-muted-fg)"
-      }
-    }
-  },
-  // 'text-accent': {
-  //   '--color-fg': 'var(--color-accent-fg)',
-  // },
-  ".text-muted": {
-    color: "var(--color-muted-fg)"
-    // '--color-fg': 'var(--color-tinted-default-fg-4)',
-  }
-};
-for (const size of theme.FONT_TEXT_SIZE)
-  _responsiveRule(primitive$5, `text-${size}`, {
-    "--font-size": `var(--font-text-${size}-size)`,
-    "--font-line-height": `var(--font-text-${size}-line-height)`,
-    "--font-letter-spacing": `var(--font-text-${size}-letter-spacing)`,
-    "--font-icon-size": `var(--font-text-${size}-icon-size)`,
-    "--font-ascender-height": `var(--font-text-${size}-ascender-height)`,
-    "--font-descender-height": `var(--font-text-${size}-descender-height)`
-    // '--font-cap-height': `var(--font-text-${size}-cap-height)`,
-  });
-const textStyle = {
-  layers: {
-    primitive: primitive$5
-  }
-}, primitive$4 = {
-  ".text-area": {
-    // todo
-  }
-}, textAreaStyle = {
-  layers: {
-    primitive: primitive$4
-  }
-}, primitive$3 = {
-  ".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,
-    //       })};
-    //     }
-    //   }
-    // }
-  }
-}, textInputStyle = {
-  layers: {
-    primitive: primitive$3
-  }
-}, primitive$2 = {
-  ".token": {
-    _prefix: !1,
-    "@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)"
-      }
-    }
-  }
-}, tokenStyle = {
-  layers: {
-    primitive: primitive$2
-  }
-}, primitive$1 = {
-  ".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"
-      }
-    }
-  }
-}, tooltipStyle = {
-  layers: {
-    primitive: primitive$1
-  }
-}, primitive = {
-  ".sr-only": {
-    display: "block",
-    width: 0,
-    height: 0,
-    position: "absolute",
-    // @ts-expect-error - TODO: fix this
-    overflow: ["hidden", "clip"]
-  }
-}, srOnlyStyle = {
-  layers: {
-    primitive
-  }
-}, systemStyle = _mergeStyles([
-  // NOTE: order matters in CSS
-  {
-    // define order of layers
-    layers: {
-      theme: {},
-      base: {},
-      util: {},
-      primitive: {}
-    }
-  },
-  // aspects
-  borderStyle,
-  displayStyle,
-  flexStyle,
-  flexAlignStyle,
-  flexDirectionStyle,
-  flexJustifyStyle,
-  flexWrapStyle,
-  fontStyle,
-  gapStyle,
-  gridAutoColumnsStyle,
-  gridAutoFlowStyle,
-  gridAutoRowsStyle,
-  gridColumnsStyle,
-  gridRowsStyle,
-  gridColumnStyle,
-  gridColumnStartStyle,
-  gridColumnEndStyle,
-  gridRowStyle,
-  gridRowStartStyle,
-  gridRowEndStyle,
-  heightStyle,
-  insetStyle,
-  marginStyle,
-  maxWidthStyle,
-  minWidthStyle,
-  outlineStyle,
-  overflowStyle,
-  paddingStyle,
-  pointerEventsStyle,
-  positionStyle,
-  radiusStyle,
-  shadowStyle,
-  textOverflowStyle,
-  widthStyle,
-  // utils
-  srOnlyStyle,
-  // primitives
-  _arrowStyle,
-  _inputStyle,
-  _selectableStyle,
-  avatarStyle,
-  badgeStyle,
-  boxStyle,
-  buttonStyle,
-  cardStyle,
-  checkboxStyle,
-  codeStyle,
-  containerStyle,
-  headingStyle,
-  kbdStyle,
-  labelStyle,
-  maxWidthStyle,
-  popoverStyle,
-  radioStyle,
-  selectStyle,
-  spinnerStyle,
-  stackStyle,
-  switchStyle,
-  textAreaStyle,
-  textInputStyle,
-  textOverflowStyle,
-  textStyle,
-  tokenStyle,
-  tooltipStyle,
-  // components
-  breadcrumbsStyle,
-  dialogStyle,
-  menuStyle,
-  skeletonStyle,
-  toastStyle,
-  treeStyle
-]);
-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 compileStyle(style) {
-  let css = "";
-  if (style.rules && (css += compileStyleRules(style.rules)), style.keyframes && Object.keys(style.keyframes).length > 0)
-    for (const [name, value] of Object.entries(style.keyframes)) {
-      let keyframesCss = `@keyframes ${name} {
-`;
-      for (const [key, props] of Object.entries(value))
-        keyframesCss += `  ${key} {
-`, keyframesCss += compileProperties(props), keyframesCss += `}
-`;
-      keyframesCss += `
-}
-`, css += keyframesCss;
-    }
-  if (style.layers && Object.keys(style.layers).length > 0)
-    for (const [layerName, layerRules] of Object.entries(style.layers))
-      Object.keys(layerRules).length > 0 && (css += `@layer ${PREFIX}${layerName} {
-`, css += compileStyleRules(layerRules), css += `}
-
-`);
-  return css;
-}
-function compileStyleRules(rules2) {
-  let css = "";
-  const mediaMap = /* @__PURE__ */ new Map();
-  for (const [selector, properties] of Object.entries(rules2))
-    if (properties) {
-      if (properties["@media"])
-        for (const [mediaQuery, mediaProps] of Object.entries(properties["@media"])) {
-          const arr = mediaMap.get(mediaQuery) ?? [];
-          arr.push({
-            selector,
-            props: mediaProps
-          }), mediaMap.set(mediaQuery, arr);
-        }
-      css += compileStyleRule(selector, properties);
-    }
-  for (const [mediaQuery, mediaRules] of mediaMap) {
-    css += `@media ${mediaQuery} {
-`;
-    for (const rule of mediaRules)
-      css += compileStyleRule(rule.selector, rule.props);
-    css += `}
-
-`;
-  }
-  return css;
-}
-function compileStyleRule(_selector, properties) {
-  let css = "";
-  const {
-    _prefix = !0,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    "@media": _mediaProps,
-    "@nest": nestedProps,
-    ...restProperties
-  } = properties, selector = _prefix ? `${_selector.replace(/\./g, `.${PREFIX}`)}` : _selector;
-  if (Object.entries(restProperties).length && (css += `${selector} {
-`, css += compileProperties(restProperties), css += `}
-
-`), nestedProps)
-    for (const [_nestedSelector, nestedProperties] of Object.entries(nestedProps)) {
-      const nestedSelector = _prefix && (nestedProperties._prefix ?? !0) ? _nestedSelector.replace(/\./g, `.${PREFIX}`) : _nestedSelector;
-      css += `${nestedSelector.replace(/&/g, selector)} {
-`, css += compileProperties(nestedProperties), css += `}
-
-`;
-    }
-  return css;
-}
-function compileProperties(props) {
-  let css = "";
-  const propEntries = Object.entries(props);
-  for (const [key, value] of propEntries)
-    if (!key.startsWith("@"))
-      if (isArray(value))
-        for (const item of value)
-          css += `  ${toSnakeCase(key)}: ${item};
-`;
-      else
-        css += `  ${toSnakeCase(key)}: ${value};
-`;
-  return css;
-}
-function toSnakeCase(str) {
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function compileSystem() {
-  return compileStyle(systemStyle);
-}
-function compileTheme_v3(theme2) {
-  return compileRule(":root", compileThemeProperties(theme2), {
-    keyframes: {},
-    media: {}
-  });
-}
-function compileThemeProperties(theme2) {
-  return {
-    ...buildAvatarThemeProperties(theme2),
-    ...buildButtonThemeProperties(theme2),
-    ...buildContainerThemeProperties(theme2),
-    ...buildFontCodeThemeProperties(theme2),
-    ...buildFontHeadingThemeProperties(theme2),
-    ...buildFontLabelThemeProperties(theme2),
-    ...buildFontTextThemeProperties(theme2),
-    ...buildInputThemeProperties(theme2),
-    ...buildRadiusThemeProperties(theme2),
-    ...buildShadowThemeProperties(theme2),
-    ...buildSpaceThemeProperties(theme2),
-    ...buildColorThemeProperties(theme2)
-  };
-}
-function buildAvatarThemeProperties(theme2) {
-  return {
-    "--avatar-focus-ring-offset": px(theme2.avatar.focusRing.offset),
-    "--avatar-focus-ring-width": px(theme2.avatar.focusRing.width),
-    "--avatar-0-distance": px(theme2.avatar.sizes[0].distance),
-    "--avatar-0-size": px(theme2.avatar.sizes[0].size),
-    "--avatar-1-distance": px(theme2.avatar.sizes[1].distance),
-    "--avatar-1-size": px(theme2.avatar.sizes[1].size),
-    "--avatar-2-distance": px(theme2.avatar.sizes[2].distance),
-    "--avatar-2-size": px(theme2.avatar.sizes[2].size),
-    "--avatar-3-distance": px(theme2.avatar.sizes[3].distance),
-    "--avatar-3-size": px(theme2.avatar.sizes[3].size)
-  };
-}
-function buildButtonThemeProperties(theme2) {
-  return {
-    "--button-border-width": px(theme2.button.border.width),
-    "--button-focus-ring-offset": px(theme2.button.focusRing.offset),
-    "--button-focus-ring-width": px(theme2.button.focusRing.width)
-    // [`--button-text-weight`]: theme.button.textWeight,
-  };
-}
-function buildContainerThemeProperties(theme2) {
-  return {
-    "--container-0": px(theme2.container[0]),
-    "--container-1": px(theme2.container[1]),
-    "--container-2": px(theme2.container[2]),
-    "--container-3": px(theme2.container[3]),
-    "--container-4": px(theme2.container[4]),
-    "--container-5": px(theme2.container[5])
-  };
-}
-function buildFontCodeThemeProperties(theme$1) {
-  const props = {
-    "--font-code-family": theme$1.font.code.family,
-    "--font-code-feature-settings": theme$1.font.code.featureSettings,
-    "--font-code-weight-regular": `${theme$1.font.code.weights.regular}`,
-    "--font-code-weight-medium": `${theme$1.font.code.weights.medium}`,
-    "--font-code-weight-semibold": `${theme$1.font.code.weights.semibold}`,
-    "--font-code-weight-bold": `${theme$1.font.code.weights.bold}`
-  };
-  for (const size of theme.FONT_CODE_SIZE)
-    props[`--font-code-${size}-size`] = rem(theme$1.font.code.sizes[size].fontSize), props[`--font-code-${size}-line-height`] = rem(theme$1.font.code.sizes[size].lineHeight), props[`--font-code-${size}-ascender-height`] = px(theme$1.font.code.sizes[size].ascenderHeight), props[`--font-code-${size}-descender-height`] = px(theme$1.font.code.sizes[size].descenderHeight), props[`--font-code-${size}-letter-spacing`] = px(theme$1.font.code.sizes[size].letterSpacing), props[`--font-code-${size}-icon-size`] = px(theme$1.font.code.sizes[size].iconSize);
-  return props;
-}
-function buildFontHeadingThemeProperties(theme$1) {
-  const props = {
-    "--font-heading-family": theme$1.font.heading.family,
-    "--font-heading-feature-settings": theme$1.font.heading.featureSettings,
-    "--font-heading-weight-regular": `${theme$1.font.heading.weights.regular}`,
-    "--font-heading-weight-medium": `${theme$1.font.heading.weights.medium}`,
-    "--font-heading-weight-semibold": `${theme$1.font.heading.weights.semibold}`,
-    "--font-heading-weight-bold": `${theme$1.font.heading.weights.bold}`
-  };
-  for (const size of theme.FONT_HEADING_SIZE)
-    props[`--font-heading-${size}-size`] = rem(theme$1.font.heading.sizes[size].fontSize), props[`--font-heading-${size}-line-height`] = rem(theme$1.font.heading.sizes[size].lineHeight), props[`--font-heading-${size}-ascender-height`] = px(theme$1.font.heading.sizes[size].ascenderHeight), props[`--font-heading-${size}-descender-height`] = px(theme$1.font.heading.sizes[size].descenderHeight), props[`--font-heading-${size}-letter-spacing`] = px(theme$1.font.heading.sizes[size].letterSpacing), props[`--font-heading-${size}-icon-size`] = px(theme$1.font.heading.sizes[size].iconSize);
-  return props;
-}
-function buildFontLabelThemeProperties(theme$1) {
-  const props = {
-    "--font-label-family": theme$1.font.label.family,
-    "--font-label-feature-settings": theme$1.font.label.featureSettings,
-    "--font-label-weight-regular": `${theme$1.font.label.weights.regular}`,
-    "--font-label-weight-medium": `${theme$1.font.label.weights.medium}`,
-    "--font-label-weight-semibold": `${theme$1.font.label.weights.semibold}`,
-    "--font-label-weight-bold": `${theme$1.font.label.weights.bold}`
-  };
-  for (const size of theme.FONT_LABEL_SIZE)
-    props[`--font-label-${size}-size`] = rem(theme$1.font.label.sizes[size].fontSize), props[`--font-label-${size}-line-height`] = rem(theme$1.font.label.sizes[size].lineHeight), props[`--font-label-${size}-ascender-height`] = px(theme$1.font.label.sizes[size].ascenderHeight), props[`--font-label-${size}-descender-height`] = px(theme$1.font.label.sizes[size].descenderHeight), props[`--font-label-${size}-letter-spacing`] = px(theme$1.font.label.sizes[size].letterSpacing), props[`--font-label-${size}-icon-size`] = px(theme$1.font.label.sizes[size].iconSize);
-  return props;
-}
-function buildFontTextThemeProperties(theme$1) {
-  const props = {
-    "--font-text-family": theme$1.font.text.family,
-    "--font-text-feature-settings": theme$1.font.text.featureSettings,
-    "--font-text-weight-regular": `${theme$1.font.text.weights.regular}`,
-    "--font-text-weight-medium": `${theme$1.font.text.weights.medium}`,
-    "--font-text-weight-semibold": `${theme$1.font.text.weights.semibold}`,
-    "--font-text-weight-bold": `${theme$1.font.text.weights.bold}`
-  };
-  for (const size of theme.FONT_TEXT_SIZE)
-    props[`--font-text-${size}-size`] = rem(theme$1.font.text.sizes[size].fontSize), props[`--font-text-${size}-line-height`] = rem(theme$1.font.text.sizes[size].lineHeight), props[`--font-text-${size}-ascender-height`] = px(theme$1.font.text.sizes[size].ascenderHeight), props[`--font-text-${size}-descender-height`] = px(theme$1.font.text.sizes[size].descenderHeight), props[`--font-text-${size}-letter-spacing`] = px(theme$1.font.text.sizes[size].letterSpacing), props[`--font-text-${size}-icon-size`] = px(theme$1.font.text.sizes[size].iconSize);
-  return props;
-}
-function buildInputThemeProperties(theme2) {
-  return {
-    "--input-border-width": px(theme2.input.border.width),
-    "--input-checkbox-focus-ring-offset": px(theme2.input.checkbox.focusRing.offset),
-    "--input-checkbox-focus-ring-width": px(theme2.input.checkbox.focusRing.width),
-    "--input-checkbox-size": px(theme2.input.checkbox.size),
-    "--input-radio-focus-ring-offset": px(theme2.input.radio.focusRing.offset),
-    "--input-radio-focus-ring-width": px(theme2.input.radio.focusRing.width),
-    "--input-radio-mark-size": px(theme2.input.radio.markSize),
-    "--input-radio-size": px(theme2.input.radio.size),
-    "--input-select-focus-ring-offset": px(theme2.input.select.focusRing.offset),
-    "--input-select-focus-ring-width": px(theme2.input.select.focusRing.width),
-    "--input-switch-focus-ring-offset": px(theme2.input.switch.focusRing.offset),
-    "--input-switch-focus-ring-width": px(theme2.input.switch.focusRing.width),
-    "--input-switch-height": px(theme2.input.switch.height),
-    "--input-switch-padding": px(theme2.input.switch.padding),
-    "--input-switch-transition-duration-ms": `${theme2.input.switch.transitionDurationMs}ms`,
-    "--input-switch-transition-timing-function": theme2.input.switch.transitionTimingFunction,
-    "--input-switch-width": px(theme2.input.switch.width),
-    "--input-text-focus-ring-offset": px(theme2.input.text.focusRing.offset),
-    "--input-text-focus-ring-width": px(theme2.input.text.focusRing.width)
-  };
-}
-function buildRadiusThemeProperties(theme2) {
-  return {
-    "--radius-0": rem(theme2.radius[0]),
-    "--radius-1": rem(theme2.radius[1]),
-    "--radius-2": rem(theme2.radius[2]),
-    "--radius-3": rem(theme2.radius[3]),
-    "--radius-4": rem(theme2.radius[4]),
-    "--radius-5": rem(theme2.radius[5]),
-    "--radius-6": rem(theme2.radius[6])
-  };
-}
-function buildShadowThemeProperties(theme2) {
-  return {
-    "--shadow-outline": `0 0 0 ${theme2.card.shadow.outline}px`,
-    "--shadow-0-umbra": toBoxShadow(theme2.shadow[0]?.umbra),
-    "--shadow-0-penumbra": toBoxShadow(theme2.shadow[0]?.penumbra),
-    "--shadow-0-ambient": toBoxShadow(theme2.shadow[0]?.ambient),
-    "--shadow-1-umbra": toBoxShadow(theme2.shadow[1]?.umbra),
-    "--shadow-1-penumbra": toBoxShadow(theme2.shadow[1]?.penumbra),
-    "--shadow-1-ambient": toBoxShadow(theme2.shadow[1]?.ambient),
-    "--shadow-2-umbra": toBoxShadow(theme2.shadow[2]?.umbra),
-    "--shadow-2-penumbra": toBoxShadow(theme2.shadow[2]?.penumbra),
-    "--shadow-2-ambient": toBoxShadow(theme2.shadow[2]?.ambient),
-    "--shadow-3-umbra": toBoxShadow(theme2.shadow[3]?.umbra),
-    "--shadow-3-penumbra": toBoxShadow(theme2.shadow[3]?.penumbra),
-    "--shadow-3-ambient": toBoxShadow(theme2.shadow[3]?.ambient),
-    "--shadow-4-umbra": toBoxShadow(theme2.shadow[4]?.umbra),
-    "--shadow-4-penumbra": toBoxShadow(theme2.shadow[4]?.penumbra),
-    "--shadow-4-ambient": toBoxShadow(theme2.shadow[4]?.ambient),
-    "--shadow-5-umbra": toBoxShadow(theme2.shadow[5]?.umbra),
-    "--shadow-5-penumbra": toBoxShadow(theme2.shadow[5]?.penumbra),
-    "--shadow-5-ambient": toBoxShadow(theme2.shadow[5]?.ambient)
-  };
-}
-function buildSpaceThemeProperties(theme2) {
-  return {
-    "--space-0": rem(theme2.space[0]),
-    "--space-0_5": rem(theme2.space[1] / 2),
-    "--space-1": rem(theme2.space[1]),
-    "--space-2": rem(theme2.space[2]),
-    "--space-3": rem(theme2.space[3]),
-    "--space-4": rem(theme2.space[4]),
-    "--space-5": rem(theme2.space[5]),
-    "--space-6": rem(theme2.space[6]),
-    "--space-7": rem(theme2.space[7]),
-    "--space-8": rem(theme2.space[8]),
-    "--space-9": rem(theme2.space[9])
-  };
-}
-const THEME_COLOR_SCHEMES = ["dark", "light"], THEME_COLOR_VARIANTS = ["tinted", "solid"];
-function buildColorThemeProperties(theme$1) {
-  const props = {};
-  for (const scheme of THEME_COLOR_SCHEMES)
-    for (const cardTone of theme.THEME_COLOR_CARD_TONES) {
-      Object.assign(props, buildColorAvatarThemeProperties(theme$1, {
-        scheme,
-        cardTone
-      })), Object.assign(props, buildColorCardThemeProperties(theme$1, {
-        scheme,
-        cardTone
-      }));
-      for (const colorVariant of THEME_COLOR_VARIANTS)
-        for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
-          const tokens = theme$1._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`]: theme.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`]: theme.renderColor(tokens.bg[4], context),
-            [`${prefix}-border-0`]: theme.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`]: theme.renderColor(tokens.border[4], context),
-            [`${prefix}-fg-0`]: theme.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`]: theme.renderColor(tokens.fg[4], context)
-          });
-        }
-    }
-  return props;
-}
-function buildColorAvatarThemeProperties(theme$1, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, tokens = theme$1._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, props = {};
-  for (const hue of theme.HUES) {
-    const context = {
-      bgVar: `${prefix}-bg-0`,
-      hue: tokens.avatar[hue]._hue ?? hue,
-      scheme
-    };
-    Object.assign(props, {
-      [`${prefix}-avatar-${hue}-bg`]: theme.renderColor(tokens.avatar[hue].bg, context),
-      [`${prefix}-avatar-${hue}-fg`]: theme.renderColor(tokens.avatar[hue].fg, context)
-    });
-  }
-  return props;
-}
-function buildColorCardThemeProperties(theme$1, options) {
-  const {
-    scheme,
-    cardTone
-  } = options, tokens = theme$1._tokens.color[cardTone], prefix = `--color-${scheme}-${cardTone}`, context = {
-    bgVar: `${prefix}-bg-0`,
-    hue: tokens._hue,
-    scheme
-  };
-  return {
-    // backdrop
-    [`${prefix}-backdrop`]: theme.renderColor(tokens.backdrop, context),
-    // code
-    [`${prefix}-code-bg`]: theme.renderColor(tokens.code.bg, context),
-    [`${prefix}-code-fg`]: theme.renderColor(tokens.code.fg, context),
-    // code / token
-    [`${prefix}-code-token-atrule`]: theme.renderColor(tokens.code.token.atrule, context),
-    [`${prefix}-code-token-attr-name`]: theme.renderColor(tokens.code.token.attrName, context),
-    [`${prefix}-code-token-attr-value`]: theme.renderColor(tokens.code.token.attrValue, context),
-    [`${prefix}-code-token-attribute`]: theme.renderColor(tokens.code.token.attribute, context),
-    [`${prefix}-code-token-boolean`]: theme.renderColor(tokens.code.token.boolean, context),
-    [`${prefix}-code-token-builtin`]: theme.renderColor(tokens.code.token.builtin, context),
-    [`${prefix}-code-token-cdata`]: theme.renderColor(tokens.code.token.cdata, context),
-    [`${prefix}-code-token-char`]: theme.renderColor(tokens.code.token.char, context),
-    [`${prefix}-code-token-class-name`]: theme.renderColor(tokens.code.token.className, context),
-    [`${prefix}-code-token-class`]: theme.renderColor(tokens.code.token.class, context),
-    [`${prefix}-code-token-comment`]: theme.renderColor(tokens.code.token.comment, context),
-    [`${prefix}-code-token-constant`]: theme.renderColor(tokens.code.token.constant, context),
-    [`${prefix}-code-token-deleted`]: theme.renderColor(tokens.code.token.deleted, context),
-    [`${prefix}-code-token-doctype`]: theme.renderColor(tokens.code.token.doctype, context),
-    [`${prefix}-code-token-entity`]: theme.renderColor(tokens.code.token.entity, context),
-    [`${prefix}-code-token-function`]: theme.renderColor(tokens.code.token.function, context),
-    [`${prefix}-code-token-hexcode`]: theme.renderColor(tokens.code.token.hexcode, context),
-    [`${prefix}-code-token-id`]: theme.renderColor(tokens.code.token.id, context),
-    [`${prefix}-code-token-important`]: theme.renderColor(tokens.code.token.important, context),
-    [`${prefix}-code-token-inserted`]: theme.renderColor(tokens.code.token.inserted, context),
-    [`${prefix}-code-token-keyword`]: theme.renderColor(tokens.code.token.keyword, context),
-    [`${prefix}-code-token-number`]: theme.renderColor(tokens.code.token.number, context),
-    [`${prefix}-code-token-operator`]: theme.renderColor(tokens.code.token.operator, context),
-    [`${prefix}-code-token-prolog`]: theme.renderColor(tokens.code.token.prolog, context),
-    [`${prefix}-code-token-property`]: theme.renderColor(tokens.code.token.property, context),
-    [`${prefix}-code-token-pseudo-class`]: theme.renderColor(tokens.code.token.pseudoClass, context),
-    [`${prefix}-code-token-pseudo-eelement`]: theme.renderColor(tokens.code.token.pseudoElement, context),
-    [`${prefix}-code-token-punctuation`]: theme.renderColor(tokens.code.token.punctuation, context),
-    [`${prefix}-code-token-regex`]: theme.renderColor(tokens.code.token.regex, context),
-    [`${prefix}-code-token-selector`]: theme.renderColor(tokens.code.token.selector, context),
-    [`${prefix}-code-token-string`]: theme.renderColor(tokens.code.token.string, context),
-    [`${prefix}-code-token-symbol`]: theme.renderColor(tokens.code.token.symbol, context),
-    [`${prefix}-code-token-tag`]: theme.renderColor(tokens.code.token.tag, context),
-    [`${prefix}-code-token-unit`]: theme.renderColor(tokens.code.token.unit, context),
-    [`${prefix}-code-token-url`]: theme.renderColor(tokens.code.token.url, context),
-    [`${prefix}-code-token-variable`]: theme.renderColor(tokens.code.token.variable, context),
-    // focus ring
-    [`${prefix}-focus-ring`]: theme.renderColor(tokens.focusRing, context),
-    // link
-    [`${prefix}-link-fg`]: theme.renderColor(tokens.link.fg, context),
-    // shadow
-    [`${prefix}-shadow-outline`]: theme.renderColor(tokens.shadow.outline, context),
-    [`${prefix}-shadow-umbra`]: theme.renderColor(tokens.shadow.umbra, context),
-    [`${prefix}-shadow-penumbra`]: theme.renderColor(tokens.shadow.penumbra, context),
-    [`${prefix}-shadow-ambient`]: theme.renderColor(tokens.shadow.ambient, context)
-  };
-}
-function compileTheme(theme2) {
-  return theme2.v3 ? compileTheme_v3(theme2.v3) : theme2.v2 ? `/* v2 - not supported */
-` : `/* v0 - not supported */
-`;
-}
-function breadcrumbs() {
-  return _comp("breadcrumbs");
-}
-function dialog() {
-  return _comp("dialog", inset({
-    inset: 0
-  }));
-}
-function dialogContainer() {
-  return _comp("dialog-container");
-}
-function dialogCardRoot() {
-  return _comp("dialog-card-root");
-}
-function dialogLayout() {
-  return _comp("dialog-layout");
-}
-function dialogHeader() {
-  return _comp("dialog-header");
-}
-function dialogContent() {
-  return _comp("dialog-content");
-}
-function dialogFooter() {
-  return _comp("dialog-footer");
-}
-function menu() {
-  return _comp("menu");
-}
-function menuDivider() {
-  return _comp("menu-divider");
-}
-function skeleton(props) {
-  return _comp("skeleton", radius(props));
-}
-function codeSkeleton(props) {
-  return _comp("font-skeleton", _resp("code-skeleton", props.size));
-}
-function headingSkeleton(props) {
-  return _comp("font-skeleton", _resp("heading-skeleton", props.size));
-}
-function labelSkeleton(props) {
-  return _comp("font-skeleton", _resp("label-skeleton", props.size));
-}
-function textSkeleton(props) {
-  return _comp("font-skeleton", _resp("text-skeleton", props.size));
-}
-function toastLayer() {
-  return _comp("toast-layer");
-}
-function toast() {
-  return _comp("toast");
-}
-function toastLoadingBar() {
-  return _comp("toast-loading-bar");
-}
-function toastLoadingBarProgress() {
-  return _comp("toast-loading-bar-progress");
-}
-function toastLoadingBarMask() {
-  return _comp("toast-loading-bar-mask");
-}
-function treeItem() {
-  return _comp("tree-item");
-}
-function _arrow() {
-  return _comp("arrow");
-}
-function _arrowStroke() {
-  return _comp("arrow-stroke");
-}
-function _arrowShape() {
-  return _comp("arrow-shape");
-}
-function _input(props) {
-  return _comp("input", props.border ? "input-b" : void 0, _resp("input", props.fontSize), _resp("input-p", props.padding), _resp("input-g", props.gap), radius(props), width(props));
-}
-function _inputElement() {
-  return _comp("input-element");
-}
-function _inputPresentation() {
-  return _comp("input-presentation");
-}
-function _selectable(props) {
-  return _comp("selectable", toneMap$2[props.tone ?? "default"], radius(props));
-}
-function avatar(props) {
-  return _comp("avatar", props.color || "gray", _resp("avatar", props.size));
-}
-function avatarArrow() {
-  return _comp("avatar-arrow");
-}
-function avatarInitials() {
-  return _comp("avatar-initials");
-}
-function avatarImage() {
-  return _comp("avatar-image");
-}
-function avatarCounter(props) {
-  return _comp("avatar-counter", _resp("avatar", props.size));
-}
-function avatarStack(props) {
-  return _comp("avatar-stack", _resp("avatar", props.size));
-}
-function badge(props) {
-  return _comp("badge", props.tone && `badge-${props.tone}`, radius(props));
-}
-function box(props) {
-  return _comp(
-    "box",
-    props.muted && "muted",
-    // todo: consider this naming
-    _resp("box", props.sizing),
-    border(props),
-    display(props),
-    height(props),
-    flex(props),
-    flexItem(props),
-    grid(props),
-    gridItem(props),
-    gap(props),
-    inset(props),
-    margin(props),
-    maxWidth(props),
-    minWidth(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 _comp("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 _comp(props.scheme, toneMap[props.tone ?? "default"], "card", props.checkered && "card-checkered", shadow(props));
-}
-function checkbox() {
-  return _comp("checkbox");
-}
-function checkboxInput() {
-  return _comp("checkbox-input");
-}
-function code(props) {
-  return _comp("code", "block", font(props), _resp("code", props.size));
-}
-function container(props) {
-  return _comp("container", maxWidth({
-    maxWidth: props.width
-  }));
-}
-function heading(props) {
-  return _comp("block", "heading", font(props), props.accent && "heading-accent", props.muted && "heading-muted", _resp("heading", props.size), flexItem(props));
-}
-function kbd(props) {
-  return _comp("kbd", radius(props));
-}
-function label(props) {
-  return _comp("label", "block", font(props), props.accent && "label-accent", props.muted && "label-muted", _resp("label", props.size));
-}
-function popover() {
-  return _comp("popover");
-}
-function popoverCard() {
-  return _comp("popover-card");
-}
-function radio() {
-  return _comp("radio");
-}
-function select(props) {
-  return composeClassNames(_comp("select"), _input(props));
-}
-function selectPresentation() {
-  return composeClassNames(_comp("select-presentation"), _inputPresentation());
-}
-function spinner() {
-  return _comp("spinner");
-}
-function animatedSpinnerIcon() {
-  return _comp("animated-spinner-icon");
-}
-function stack() {
-  return _comp("stack");
-}
-function _switch() {
-  return _comp("switch");
-}
-function _switchElement() {
-  return _comp("switch-element");
-}
-function _switchPresentation() {
-  return _comp("switch-presentation");
-}
-function _switchThumb() {
-  return _comp("switch-thumb");
-}
-function _switchTrack() {
-  return _comp("switch-track");
-}
-function text(props) {
-  return _comp("text", "block", flexItem(props), font(props), props.accent && "text-accent", props.muted && "text-muted", _resp("text", props.size));
-}
-function textArea(props) {
-  return composeClassNames(_comp("text-area"), _input(props));
-}
-function textInput(props) {
-  return composeClassNames(_input(props), _comp("text-input"));
-}
-function tooltip() {
-  return _comp("tooltip");
-}
-function tooltipCard() {
-  return _comp("tooltip-card");
-}
-function srOnly() {
-  return composeClassNames("sr-only");
-}
-exports._arrow = _arrow;
-exports._arrowShape = _arrowShape;
-exports._arrowStroke = _arrowStroke;
-exports._input = _input;
-exports._inputElement = _inputElement;
-exports._inputPresentation = _inputPresentation;
-exports._selectable = _selectable;
-exports._switch = _switch;
-exports._switchElement = _switchElement;
-exports._switchPresentation = _switchPresentation;
-exports._switchThumb = _switchThumb;
-exports._switchTrack = _switchTrack;
-exports.animatedSpinnerIcon = animatedSpinnerIcon;
-exports.avatar = avatar;
-exports.avatarArrow = avatarArrow;
-exports.avatarCounter = avatarCounter;
-exports.avatarImage = avatarImage;
-exports.avatarInitials = avatarInitials;
-exports.avatarStack = avatarStack;
-exports.badge = badge;
-exports.border = border;
-exports.box = box;
-exports.breadcrumbs = breadcrumbs;
-exports.button = button;
-exports.buttonLoadingBox = buttonLoadingBox;
-exports.card = card;
-exports.checkbox = checkbox;
-exports.checkboxInput = checkboxInput;
-exports.code = code;
-exports.codeSkeleton = codeSkeleton;
-exports.compilePalette = compilePalette;
-exports.compileSystem = compileSystem;
-exports.compileTheme = compileTheme;
-exports.composeClassNames = composeClassNames;
-exports.container = container;
-exports.dialog = dialog;
-exports.dialogCardRoot = dialogCardRoot;
-exports.dialogContainer = dialogContainer;
-exports.dialogContent = dialogContent;
-exports.dialogFooter = dialogFooter;
-exports.dialogHeader = dialogHeader;
-exports.dialogLayout = dialogLayout;
-exports.display = display;
-exports.flex = flex;
-exports.flexItem = flexItem;
-exports.font = font;
-exports.gap = gap;
-exports.getClassNames = getClassNames;
-exports.grid = grid;
-exports.gridItem = gridItem;
-exports.heading = heading;
-exports.headingSkeleton = headingSkeleton;
-exports.height = height;
-exports.inset = inset;
-exports.isArray = isArray;
-exports.isRecord = isRecord;
-exports.kbd = kbd;
-exports.label = label;
-exports.labelSkeleton = labelSkeleton;
-exports.margin = margin;
-exports.maxWidth = maxWidth;
-exports.menu = menu;
-exports.menuDivider = menuDivider;
-exports.minWidth = minWidth;
-exports.overflow = overflow;
-exports.padding = padding;
-exports.pointerEvents = pointerEvents;
-exports.popover = popover;
-exports.popoverCard = popoverCard;
-exports.position = position;
-exports.px = px;
-exports.radio = radio;
-exports.radius = radius;
-exports.rem = rem;
-exports.scopeClassName = scopeClassName;
-exports.select = select;
-exports.selectPresentation = selectPresentation;
-exports.shadow = shadow;
-exports.skeleton = skeleton;
-exports.spinner = spinner;
-exports.srOnly = srOnly;
-exports.stack = stack;
-exports.text = text;
-exports.textArea = textArea;
-exports.textInput = textInput;
-exports.textOverflow = textOverflow;
-exports.textSkeleton = textSkeleton;
-exports.toBoxShadow = toBoxShadow;
-exports.toast = toast;
-exports.toastLayer = toastLayer;
-exports.toastLoadingBar = toastLoadingBar;
-exports.toastLoadingBarMask = toastLoadingBarMask;
-exports.toastLoadingBarProgress = toastLoadingBarProgress;
-exports.tooltip = tooltip;
-exports.tooltipCard = tooltipCard;
-exports.treeItem = treeItem;
-exports.varNames = varNames;
-exports.vars = vars;
-exports.width = width;
-//# sourceMappingURL=css.js.map