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

package/dist/css.cjs

@@ -0,0 +1,4353 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var theme = require("@sanity/ui/theme"), version = "3.0.0-static.20";
+function _hash(value) {
+  let h = 5381;
+  for (let index = 0, len = value.length; index < len; index++)
+    h = (h << 5) + h + value.charCodeAt(index) >>> 0;
+  return h.toString(36);
+}
+const PREFIX = `s${_hash(version).slice(0, 5)}-`;
+function isRecord(value) {
+  return value !== null && typeof value == "object" && !Array.isArray(value);
+}
+function isArray(value) {
+  return Array.isArray(value);
+}
+function rem$1(value) {
+  return value === 0 ? "0" : `${value / 16}rem`;
+}
+function px$1(value) {
+  return value === 0 ? "0" : `${value}px`;
+}
+function toBoxShadow$1(value) {
+  return value ? value.map((n) => px$1(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 ${layerName} {
+`, css += compileStyleRules(layerRules), css += `}
+
+`);
+  return css;
+}
+function compileStyleRules(rules2) {
+  let css = "";
+  const mediaMap = /* @__PURE__ */ new Map();
+  for (const [selector, properties2] of Object.entries(rules2))
+    if (properties2) {
+      if (properties2["@media"])
+        for (const [mediaQuery, mediaProps] of Object.entries(properties2["@media"])) {
+          const arr = mediaMap.get(mediaQuery) ?? [];
+          arr.push({
+            selector,
+            props: mediaProps
+          }), mediaMap.set(mediaQuery, arr);
+        }
+      css += compileStyleRule(selector, properties2);
+    }
+  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, properties2) {
+  let css = "";
+  const {
+    _prefix = !0,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    "@media": _mediaProps,
+    nest: nestedProps,
+    ...restProperties
+  } = properties2, 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 === "vars") {
+      for (const [k, v] of Object.entries(value))
+        css += `  ${k}: ${v};
+`;
+      continue;
+    }
+    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 _mergeStyles(styles) {
+  const keyframes2 = {}, layers = {}, rules2 = {};
+  for (const s of styles) {
+    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, properties2) {
+  const name = _name.replace(/\./g, "_");
+  rules2[`.${name}`] = properties2, rules2[`.1\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 360px)": properties2
+    }
+  }, rules2[`.2\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 600px)": properties2
+    }
+  }, rules2[`.3\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 900px)": properties2
+    }
+  }, rules2[`.4\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1200px)": properties2
+    }
+  }, rules2[`.5\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 1800px)": properties2
+    }
+  }, rules2[`.6\\:${name}`] = {
+    "@media": {
+      "screen and (min-width: 2400px)": properties2
+    }
+  };
+}
+function _fromEntries(entries) {
+  return Object.fromEntries(entries);
+}
+function buildVarContract(contract, options) {
+  return {
+    vars: buildVars(contract, options),
+    varNames: buildVarNames(contract, options),
+    properties: buildProperties(contract, options)
+  };
+}
+function buildProperties(contract, options) {
+  const _properties = {};
+  function walk(c) {
+    for (const key in c)
+      typeof c[key] == "string" ? _properties[`--${options.prefix}${_hash(`${options.layer}.${c[key]}`)}`] = c[key] : c[key] === null || walk(c[key]);
+  }
+  return walk(contract), Object.freeze(_properties);
+}
+function buildVars(contract, options, path = "") {
+  const _vars = {};
+  for (const key in contract)
+    typeof contract[key] == "string" ? _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)})` : contract[key] === null ? _vars[key] = `var(--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)})` : _vars[key] = buildVars(contract[key], options, [path, key].join("."));
+  return Object.freeze(_vars);
+}
+function buildVarNames(contract, options, path = "") {
+  const _varNames = {};
+  for (const key in contract)
+    typeof contract[key] == "string" ? _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${contract[key]}`)}` : contract[key] === null ? _varNames[key] = `--${options.prefix}${_hash(`${options.layer}.${path}.${key}`)}` : _varNames[key] = buildVarNames(contract[key], options, [path, key].join("."));
+  return Object.freeze(_varNames);
+}
+function resolveTheme(options) {
+  const {
+    theme: theme$1
+  } = options, paletteResult = buildVarContract({
+    palette: {
+      black: theme$1.palette.black.hex,
+      white: theme$1.palette.white.hex,
+      ..._fromEntries(theme.HUES.map((hue) => [hue, _fromEntries(theme.TINTS.map((tint) => [tint, theme$1.palette.hues[hue][tint].hex]))]))
+    }
+  }, {
+    layer: "palette",
+    prefix: "s"
+  }), themeResult = buildVarContract({
+    arrow: {
+      size: null
+    },
+    avatar: {
+      distance: null,
+      size: null,
+      focusRing: {
+        offset: px(theme$1.avatar.focusRing.offset),
+        width: px(theme$1.avatar.focusRing.width)
+      },
+      sizes: _fromEntries(theme.AVATAR_SIZE.map((s) => [s, {
+        distance: rem(theme$1.avatar.sizes[s].distance),
+        size: rem(theme$1.avatar.sizes[s].size)
+      }]))
+    },
+    button: {
+      boxShadow: null,
+      focusRing: {
+        offset: px(theme$1.button.focusRing.offset),
+        width: px(theme$1.button.focusRing.width)
+      },
+      border: {
+        width: px(theme$1.button.border.width)
+      }
+    },
+    card: {
+      shadow: {
+        outline: px(theme$1.card.shadow.outline)
+      }
+    },
+    color: {
+      backdrop: null,
+      bg: null,
+      border: null,
+      code: {
+        bg: null,
+        fg: null,
+        token: {
+          atrule: null,
+          attrName: null,
+          attrValue: null,
+          attribute: null,
+          boolean: null,
+          builtin: null,
+          cdata: null,
+          char: null,
+          class: null,
+          className: null,
+          comment: null,
+          constant: null,
+          deleted: null,
+          doctype: null,
+          entity: null,
+          function: null,
+          hexcode: null,
+          id: null,
+          important: null,
+          inserted: null,
+          keyword: null,
+          number: null,
+          operator: null,
+          prolog: null,
+          property: null,
+          pseudoClass: null,
+          pseudoElement: null,
+          punctuation: null,
+          regex: null,
+          selector: null,
+          string: null,
+          symbol: null,
+          tag: null,
+          unit: null,
+          url: null,
+          variable: null
+        }
+      },
+      fg: null,
+      focusRing: null,
+      link: {
+        fg: null
+      },
+      avatar: {
+        bg: null,
+        fg: null,
+        ..._fromEntries(theme.AVATAR_COLORS.map((c) => [c, {
+          bg: null,
+          fg: null
+        }]))
+      },
+      button: {},
+      input: {
+        checkbox: {
+          bg: null,
+          border: null,
+          fg: null
+        },
+        radio: {
+          bg: null,
+          border: null,
+          fg: null
+        },
+        text: {
+          bg: null,
+          fg: null,
+          border: null,
+          placeholder: null,
+          invalid: {
+            bg: null,
+            border: null,
+            fg: null
+          }
+        },
+        switch: {
+          bg: null,
+          fg: null
+        }
+      },
+      muted: {
+        bg: null,
+        fg: null
+      },
+      shadow: {
+        outline: null,
+        umbra: null,
+        penumbra: null,
+        ambient: null
+      },
+      skeleton: {
+        from: null,
+        to: null
+      },
+      light: _fromEntries(theme.THEME_COLOR_CARD_TONES.map((t) => [t, buildCardContract({
+        theme: theme$1,
+        scheme: "light",
+        tone: t
+      })])),
+      dark: _fromEntries(theme.THEME_COLOR_CARD_TONES.map((t) => [t, buildCardContract({
+        theme: theme$1,
+        scheme: "dark",
+        tone: t
+      })])),
+      // tones
+      ..._fromEntries(theme.THEME_COLOR_CARD_TONES.map((t) => [t, {
+        avatar: {
+          ..._fromEntries(theme.AVATAR_COLORS.map((c) => [c, {
+            bg: null,
+            fg: null
+          }]))
+        },
+        backdrop: null,
+        code: {
+          bg: null,
+          fg: null,
+          token: {
+            atrule: null,
+            attrName: null,
+            attrValue: null,
+            attribute: null,
+            boolean: null,
+            builtin: null,
+            cdata: null,
+            char: null,
+            class: null,
+            className: null,
+            comment: null,
+            constant: null,
+            deleted: null,
+            doctype: null,
+            entity: null,
+            function: null,
+            hexcode: null,
+            id: null,
+            important: null,
+            inserted: null,
+            keyword: null,
+            number: null,
+            operator: null,
+            prolog: null,
+            property: null,
+            pseudoClass: null,
+            pseudoElement: null,
+            punctuation: null,
+            regex: null,
+            selector: null,
+            string: null,
+            symbol: null,
+            tag: null,
+            unit: null,
+            url: null,
+            variable: null
+          }
+        },
+        focusRing: null,
+        link: {
+          fg: null
+        },
+        shadow: {
+          outline: null,
+          umbra: null,
+          penumbra: null,
+          ambient: null
+        },
+        skeleton: {
+          from: null,
+          to: null
+        },
+        ..._fromEntries(theme.COLOR_VARIANTS.map((v) => [v, {
+          bg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          fg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          border: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          ..._fromEntries(theme.THEME_COLOR_STATE_TONES.map((t2) => [t2, {
+            bg: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            },
+            fg: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            },
+            border: {
+              0: null,
+              1: null,
+              2: null,
+              3: null,
+              4: null
+            }
+          }]))
+        }]))
+      }])),
+      ..._fromEntries(theme.COLOR_VARIANTS.map((v) => [v, {
+        bg: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        fg: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        border: {
+          0: null,
+          1: null,
+          2: null,
+          3: null,
+          4: null
+        },
+        ..._fromEntries(theme.THEME_COLOR_STATE_TONES.map((t) => [t, {
+          bg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          fg: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          },
+          border: {
+            0: null,
+            1: null,
+            2: null,
+            3: null,
+            4: null
+          }
+        }]))
+      }]))
+    },
+    container: _fromEntries(theme.CONTAINER_SCALE.map((c) => [c, px(theme$1.container[c])])),
+    font: {
+      family: null,
+      fontSize: null,
+      letterSpacing: null,
+      lineHeight: null,
+      ascenderHeight: null,
+      descenderHeight: null,
+      iconSize: null,
+      featureSettings: null,
+      fontWeight: null,
+      capHeight: null,
+      iconOffset: null,
+      customIconSize: null,
+      customIconOffset: null,
+      code: {
+        family: theme$1.font.code.family,
+        featureSettings: theme$1.font.code.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme$1.font.code.weight.regular),
+          medium: String(theme$1.font.code.weight.medium),
+          semibold: String(theme$1.font.code.weight.semibold),
+          bold: String(theme$1.font.code.weight.bold)
+        },
+        sizes: _fromEntries(theme.FONT_CODE_SIZE.map((s) => [s, {
+          fontSize: rem(theme$1.font.code.sizes[s].fontSize),
+          lineHeight: rem(theme$1.font.code.sizes[s].lineHeight),
+          letterSpacing: rem(theme$1.font.code.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme$1.font.code.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme$1.font.code.sizes[s].descenderHeight),
+          iconSize: rem(theme$1.font.code.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.code.sizes[s].customIconSize)
+        }]))
+      },
+      heading: {
+        family: theme$1.font.heading.family,
+        featureSettings: theme$1.font.heading.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme$1.font.heading.weight.regular),
+          medium: String(theme$1.font.heading.weight.medium),
+          semibold: String(theme$1.font.heading.weight.semibold),
+          bold: String(theme$1.font.heading.weight.bold)
+        },
+        sizes: _fromEntries(theme.FONT_HEADING_SIZE.map((s) => [s, {
+          fontSize: rem(theme$1.font.heading.sizes[s].fontSize),
+          lineHeight: rem(theme$1.font.heading.sizes[s].lineHeight),
+          letterSpacing: rem(theme$1.font.heading.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme$1.font.heading.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme$1.font.heading.sizes[s].descenderHeight),
+          iconSize: rem(theme$1.font.heading.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.heading.sizes[s].customIconSize)
+        }]))
+      },
+      label: {
+        family: theme$1.font.label.family,
+        featureSettings: theme$1.font.label.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme$1.font.label.weight.regular),
+          medium: String(theme$1.font.label.weight.medium),
+          semibold: String(theme$1.font.label.weight.semibold),
+          bold: String(theme$1.font.label.weight.bold)
+        },
+        sizes: _fromEntries(theme.FONT_LABEL_SIZE.map((s) => [s, {
+          fontSize: rem(theme$1.font.label.sizes[s].fontSize),
+          lineHeight: rem(theme$1.font.label.sizes[s].lineHeight),
+          letterSpacing: rem(theme$1.font.label.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme$1.font.label.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme$1.font.label.sizes[s].descenderHeight),
+          iconSize: rem(theme$1.font.label.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.label.sizes[s].customIconSize)
+        }]))
+      },
+      text: {
+        family: theme$1.font.text.family,
+        featureSettings: theme$1.font.text.featureSettings ?? "normal",
+        weight: {
+          regular: String(theme$1.font.text.weight.regular),
+          medium: String(theme$1.font.text.weight.medium),
+          semibold: String(theme$1.font.text.weight.semibold),
+          bold: String(theme$1.font.text.weight.bold)
+        },
+        sizes: _fromEntries(theme.FONT_TEXT_SIZE.map((s) => [s, {
+          fontSize: rem(theme$1.font.text.sizes[s].fontSize),
+          lineHeight: rem(theme$1.font.text.sizes[s].lineHeight),
+          letterSpacing: rem(theme$1.font.text.sizes[s].letterSpacing),
+          ascenderHeight: rem(theme$1.font.text.sizes[s].ascenderHeight),
+          descenderHeight: rem(theme$1.font.text.sizes[s].descenderHeight),
+          iconSize: rem(theme$1.font.text.sizes[s].iconSize),
+          customIconSize: rem(theme$1.font.text.sizes[s].customIconSize)
+        }]))
+      },
+      skeleton: {
+        lineHeight: null,
+        ascenderHeight: null,
+        descenderHeight: null
+      },
+      weight: {
+        regular: null,
+        medium: null,
+        semibold: null,
+        bold: null
+      }
+    },
+    input: {
+      gap: null,
+      descenderHeight: null,
+      ascenderHeight: null,
+      fontSize: null,
+      lineHeight: null,
+      letterSpacing: null,
+      padding: null,
+      border: {
+        width: px(theme$1.input.border.width)
+      },
+      checkbox: {
+        size: px(theme$1.input.checkbox.size),
+        focusRing: {
+          offset: px(theme$1.input.checkbox.focusRing.offset),
+          width: px(theme$1.input.checkbox.focusRing.width)
+        }
+      },
+      radio: {
+        focusRing: {
+          offset: px(theme$1.input.radio.focusRing.offset),
+          width: px(theme$1.input.radio.focusRing.width)
+        },
+        markSize: px(theme$1.input.radio.markSize),
+        size: px(theme$1.input.radio.size)
+      },
+      select: {
+        focusRing: {
+          offset: px(theme$1.input.select.focusRing.offset),
+          width: px(theme$1.input.select.focusRing.width)
+        }
+      },
+      text: {
+        focusRing: {
+          offset: px(theme$1.input.text.focusRing.offset),
+          width: px(theme$1.input.text.focusRing.width)
+        }
+      },
+      switch: {
+        width: px(theme$1.input.switch.width),
+        height: px(theme$1.input.switch.height),
+        focusRing: {
+          offset: px(theme$1.input.switch.focusRing.offset),
+          width: px(theme$1.input.switch.focusRing.width)
+        },
+        padding: px(theme$1.input.switch.padding),
+        thumb: {
+          offset: null,
+          size: null
+        },
+        transitionDurationMs: `${theme$1.input.switch.transitionDurationMs}ms`,
+        transitionTimingFunction: theme$1.input.switch.transitionTimingFunction
+      }
+    },
+    radius: _fromEntries(theme.RADIUS.map((r) => [r, px(theme$1.radius[r])])),
+    shadow: _fromEntries(theme.SHADOW.map((s) => [s, {
+      umbra: toBoxShadow(theme$1.shadow[s]?.umbra),
+      penumbra: toBoxShadow(theme$1.shadow[s]?.penumbra),
+      ambient: toBoxShadow(theme$1.shadow[s]?.ambient)
+    }])),
+    space: _fromEntries(theme.SPACE.map((s) => [s, px(theme$1.space[s])]))
+  }, {
+    layer: "theme",
+    prefix: "s"
+  });
+  return {
+    vars: Object.freeze({
+      ...paletteResult.vars,
+      ...themeResult.vars
+    }),
+    varNames: Object.freeze({
+      ...paletteResult.varNames,
+      ...themeResult.varNames
+    }),
+    properties: Object.freeze({
+      ...paletteResult.properties,
+      ...themeResult.properties
+    })
+  };
+  function renderColor(t, options2) {
+    const {
+      bgValue = "transparent"
+    } = options2, color = theme._parseColorToken(t, options2);
+    if (color.type === "inherit")
+      return bgValue;
+    let value = "#000";
+    return color.type === "color" && (value = paletteResult.vars.palette[color.name]), color.type === "tint" && (value = paletteResult.vars.palette[color.hue][color.tint]), color.opacity < 1 && (value = `color-mix(in srgb, transparent, ${value} ${color.opacity * 100}%)`), color.mix < 1 && (value = `color-mix(in srgb, ${bgValue}, ${value} ${color.mix * 100}%)`), value;
+  }
+  function buildCardContract(options2) {
+    const {
+      theme: theme2,
+      scheme,
+      tone
+    } = options2, card2 = theme2.color[tone], i = scheme === "dark" ? 1 : 0, defaultElement = buildElementContract({
+      card: card2,
+      variant: "tinted",
+      tone: "default",
+      scheme
+    }), bgValue = defaultElement.bg[0], cardOptions = {
+      bgValue,
+      defaultHue: card2._hue
+    };
+    return {
+      avatar: _fromEntries(theme.AVATAR_COLORS.map((c) => [c, {
+        bg: renderColor(card2.avatar[c].bg[i], {
+          defaultHue: c
+        }),
+        fg: renderColor(card2.avatar[c].fg[i], {
+          defaultHue: c
+        })
+      }])),
+      backdrop: renderColor(card2.backdrop[i], cardOptions),
+      code: {
+        bg: renderColor(card2.code.bg[i], cardOptions),
+        fg: renderColor(card2.code.fg[i], cardOptions),
+        token: {
+          atrule: renderColor(card2.code.token.atrule[i], cardOptions),
+          attrName: renderColor(card2.code.token.attrName[i], cardOptions),
+          attrValue: renderColor(card2.code.token.attrValue[i], cardOptions),
+          attribute: renderColor(card2.code.token.attribute[i], cardOptions),
+          boolean: renderColor(card2.code.token.boolean[i], cardOptions),
+          builtin: renderColor(card2.code.token.builtin[i], cardOptions),
+          cdata: renderColor(card2.code.token.cdata[i], cardOptions),
+          char: renderColor(card2.code.token.char[i], cardOptions),
+          class: renderColor(card2.code.token.class[i], cardOptions),
+          className: renderColor(card2.code.token.className[i], cardOptions),
+          comment: renderColor(card2.code.token.comment[i], cardOptions),
+          constant: renderColor(card2.code.token.constant[i], cardOptions),
+          deleted: renderColor(card2.code.token.deleted[i], cardOptions),
+          doctype: renderColor(card2.code.token.doctype[i], cardOptions),
+          entity: renderColor(card2.code.token.entity[i], cardOptions),
+          function: renderColor(card2.code.token.function[i], cardOptions),
+          hexcode: renderColor(card2.code.token.hexcode[i], cardOptions),
+          id: renderColor(card2.code.token.id[i], cardOptions),
+          important: renderColor(card2.code.token.important[i], cardOptions),
+          inserted: renderColor(card2.code.token.inserted[i], cardOptions),
+          keyword: renderColor(card2.code.token.keyword[i], cardOptions),
+          number: renderColor(card2.code.token.number[i], cardOptions),
+          operator: renderColor(card2.code.token.operator[i], cardOptions),
+          prolog: renderColor(card2.code.token.prolog[i], cardOptions),
+          property: renderColor(card2.code.token.property[i], cardOptions),
+          pseudoClass: renderColor(card2.code.token.pseudoClass[i], cardOptions),
+          pseudoElement: renderColor(card2.code.token.pseudoElement[i], cardOptions),
+          punctuation: renderColor(card2.code.token.punctuation[i], cardOptions),
+          regex: renderColor(card2.code.token.regex[i], cardOptions),
+          selector: renderColor(card2.code.token.selector[i], cardOptions),
+          string: renderColor(card2.code.token.string[i], cardOptions),
+          symbol: renderColor(card2.code.token.symbol[i], cardOptions),
+          tag: renderColor(card2.code.token.tag[i], cardOptions),
+          unit: renderColor(card2.code.token.unit[i], cardOptions),
+          url: renderColor(card2.code.token.url[i], cardOptions),
+          variable: renderColor(card2.code.token.variable[i], cardOptions)
+        }
+      },
+      focusRing: renderColor(card2.focusRing[i], cardOptions),
+      link: {
+        fg: renderColor(card2.link.fg[i], cardOptions)
+      },
+      shadow: {
+        outline: renderColor(card2.shadow.outline[i], cardOptions),
+        umbra: renderColor(card2.shadow.umbra[i], cardOptions),
+        penumbra: renderColor(card2.shadow.penumbra[i], cardOptions),
+        ambient: renderColor(card2.shadow.ambient[i], cardOptions)
+      },
+      skeleton: {
+        from: renderColor(card2.skeleton.from[i], cardOptions),
+        to: renderColor(card2.skeleton.to[i], cardOptions)
+      },
+      ..._fromEntries(theme.COLOR_VARIANTS.map((v) => [v, _fromEntries(theme.THEME_COLOR_STATE_TONES.map((e) => [e, v === "tinted" && e === "default" ? defaultElement : buildElementContract({
+        card: card2,
+        variant: v,
+        tone: e,
+        scheme,
+        bgValue
+      })]))]))
+    };
+  }
+  function buildElementContract(options2) {
+    const {
+      bgValue,
+      card: card2,
+      variant: v,
+      tone: e,
+      scheme
+    } = options2, element = card2.variant[v][e], elementOptions = {
+      bgValue,
+      defaultHue: element._hue
+    }, i = scheme === "dark" ? 1 : 0, bg = {
+      0: renderColor(element.bg[0][i], elementOptions),
+      4: renderColor(element.bg[4][i], elementOptions)
+    }, border2 = {
+      0: renderColor(element.border[0][i], elementOptions),
+      4: renderColor(element.border[4][i], elementOptions)
+    }, fg = {
+      0: renderColor(element.fg[0][i], elementOptions),
+      4: renderColor(element.fg[4][i], elementOptions)
+    };
+    return {
+      bg: {
+        0: bg[0],
+        1: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 25%)`,
+        2: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 50%)`,
+        3: `color-mix(in srgb, ${bg[0]}, ${bg[4]} 75%)`,
+        4: bg[4]
+      },
+      border: {
+        0: border2[0],
+        1: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 25%)`,
+        2: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 50%)`,
+        3: `color-mix(in srgb, ${border2[0]}, ${border2[4]} 75%)`,
+        4: border2[4]
+      },
+      fg: {
+        0: fg[0],
+        1: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 25%)`,
+        2: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 50%)`,
+        3: `color-mix(in srgb, ${fg[0]}, ${fg[4]} 75%)`,
+        4: fg[4]
+      }
+    };
+  }
+}
+function px(value) {
+  return `${value}px`;
+}
+function rem(value) {
+  return `${value / 16}rem`;
+}
+function toBoxShadow(value) {
+  return value ? value.map((n) => px(n)).join(" ") : "none";
+}
+const result = resolveTheme({
+  theme: theme.buildTheme_v3()
+}), vars = result.vars, varNames = result.varNames, properties = result.properties, util$w = {};
+_responsiveRule(util$w, "border", {
+  border: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$w, "border-t", {
+  borderTop: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$w, "border-r", {
+  borderRight: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$w, "border-b", {
+  borderBottom: `1px solid ${vars.color.border}`
+});
+_responsiveRule(util$w, "border-l", {
+  borderLeft: `1px solid ${vars.color.border}`
+});
+const borderStyle = {
+  layers: {
+    util: util$w
+  }
+}, util$v = {};
+_responsiveRule(util$v, "box-border", {
+  boxSizing: "border-box"
+});
+_responsiveRule(util$v, "box-content", {
+  boxSizing: "content-box"
+});
+const boxSizingStyle = {
+  layers: {
+    util: util$v
+  }
+}, util$u = {};
+_responsiveRule(util$u, "block", {
+  nest: {
+    "&:not([hidden])": {
+      display: "block"
+    }
+  }
+});
+_responsiveRule(util$u, "flex", {
+  nest: {
+    "&:not([hidden])": {
+      display: "flex"
+    }
+  }
+});
+_responsiveRule(util$u, "grid", {
+  nest: {
+    "&:not([hidden])": {
+      display: "grid"
+    }
+  }
+});
+_responsiveRule(util$u, "inline-block", {
+  nest: {
+    "&:not([hidden])": {
+      display: "inline-block"
+    }
+  }
+});
+_responsiveRule(util$u, "inline-flex", {
+  nest: {
+    "&:not([hidden])": {
+      display: "inline-flex"
+    }
+  }
+});
+_responsiveRule(util$u, "inline-grid", {
+  nest: {
+    "&:not([hidden])": {
+      display: "inline-grid"
+    }
+  }
+});
+_responsiveRule(util$u, "none", {
+  nest: {
+    "&:not([hidden])": {
+      display: "none"
+    }
+  }
+});
+const displayStyle = {
+  layers: {
+    util: util$u
+  }
+}, util$t = {};
+_responsiveRule(util$t, "flex-align-flex-start", {
+  alignItems: "flex-start"
+});
+_responsiveRule(util$t, "flex-align-flex-end", {
+  alignItems: "flex-end"
+});
+_responsiveRule(util$t, "flex-align-center", {
+  alignItems: "center"
+});
+_responsiveRule(util$t, "flex-align-stretch", {
+  alignItems: "stretch"
+});
+_responsiveRule(util$t, "flex-align-baseline", {
+  alignItems: "baseline"
+});
+const flexAlignStyle = {
+  layers: {
+    util: util$t
+  }
+}, util$s = {};
+_responsiveRule(util$s, "f-row", {
+  flexDirection: "row"
+});
+_responsiveRule(util$s, "f-column", {
+  flexDirection: "column"
+});
+const flexDirectionStyle = {
+  layers: {
+    util: util$s
+  }
+}, util$r = {};
+_responsiveRule(util$r, "flex-justify-flex-start", {
+  justifyContent: "flex-start"
+});
+_responsiveRule(util$r, "flex-justify-flex-end", {
+  justifyContent: "flex-end"
+});
+_responsiveRule(util$r, "flex-justify-center", {
+  justifyContent: "center"
+});
+_responsiveRule(util$r, "flex-justify-space-between", {
+  justifyContent: "space-between"
+});
+_responsiveRule(util$r, "flex-justify-space-around", {
+  justifyContent: "space-around"
+});
+_responsiveRule(util$r, "flex-justify-space-evenly", {
+  justifyContent: "space-evenly"
+});
+const flexJustifyStyle = {
+  layers: {
+    util: util$r
+  }
+}, util$q = {};
+_responsiveRule(util$q, "flex-nowrap", {
+  flexWrap: "nowrap"
+});
+_responsiveRule(util$q, "flex-wrap", {
+  flexWrap: "wrap"
+});
+_responsiveRule(util$q, "flex-wrap-reverse", {
+  flexWrap: "wrap-reverse"
+});
+const flexWrapStyle = {
+  layers: {
+    util: util$q
+  }
+}, util$p = {};
+_responsiveRule(util$p, "f-none", {
+  flex: "none"
+});
+_responsiveRule(util$p, "f-auto", {
+  flex: "auto"
+});
+_responsiveRule(util$p, "f-initial", {
+  flex: "initial"
+});
+_responsiveRule(util$p, "f-1", {
+  flex: 1
+});
+_responsiveRule(util$p, "f-2", {
+  flex: 2
+});
+_responsiveRule(util$p, "f-3", {
+  flex: 3
+});
+_responsiveRule(util$p, "f-4", {
+  flex: 4
+});
+_responsiveRule(util$p, "f-5", {
+  flex: 5
+});
+_responsiveRule(util$p, "f-6", {
+  flex: 6
+});
+_responsiveRule(util$p, "f-7", {
+  flex: 7
+});
+_responsiveRule(util$p, "f-8", {
+  flex: 8
+});
+_responsiveRule(util$p, "f-9", {
+  flex: 9
+});
+_responsiveRule(util$p, "f-10", {
+  flex: 10
+});
+_responsiveRule(util$p, "f-11", {
+  flex: 11
+});
+_responsiveRule(util$p, "f-12", {
+  flex: 12
+});
+const flexStyle = {
+  layers: {
+    util: util$p
+  }
+}, primitive$q = {
+  ".font": {
+    fontFamily: vars.font.family,
+    fontFeatureSettings: vars.font.featureSettings,
+    fontSize: vars.font.fontSize,
+    lineHeight: vars.font.lineHeight,
+    letterSpacing: vars.font.letterSpacing,
+    fontWeight: vars.font.fontWeight,
+    transform: `translateY(${vars.font.descenderHeight})`,
+    padding: "1px 0",
+    margin: "0",
+    vars: {
+      [varNames.font.capHeight]: `calc(${vars.font.lineHeight} - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight})`,
+      [varNames.font.iconOffset]: `calc((${vars.font.capHeight} - ${vars.font.iconSize}) / 2)`,
+      [varNames.font.customIconOffset]: `calc((${vars.font.capHeight} - ${vars.font.customIconSize}) / 2)`
+    },
+    nest: {
+      "&:before": {
+        content: '""',
+        display: "block",
+        height: 0,
+        marginTop: `calc((0px - ${vars.font.ascenderHeight} - ${vars.font.descenderHeight}) - 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"
+      },
+      "& svg:not([data-sanity-icon])": {
+        fontSize: vars.font.customIconSize,
+        margin: vars.font.customIconOffset
+      },
+      "& [data-sanity-icon]": {
+        fontSize: vars.font.iconSize,
+        margin: vars.font.iconOffset,
+        vectorEffect: "non-scaling-stroke"
+      }
+    }
+  },
+  ".font-regular": {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.regular
+    }
+  },
+  ".font-medium": {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.medium
+    }
+  },
+  ".font-semibold": {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.semibold
+    }
+  },
+  ".font-bold": {
+    vars: {
+      [varNames.font.fontWeight]: vars.font.weight.bold
+    }
+  }
+}, fontStyle = {
+  layers: {
+    primitive: primitive$q
+  }
+}, util$o = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$o, `g-${space}`, {
+    gap: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$o, `gx-${space}`, {
+    columnGap: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$o, `gy-${space}`, {
+    rowGap: vars.space[space]
+  });
+const gapStyle = {
+  layers: {
+    util: util$o
+  }
+}, util$n = {};
+_responsiveRule(util$n, "auto-cols-auto", {
+  gridAutoColumns: "auto"
+});
+_responsiveRule(util$n, "auto-cols-min", {
+  gridAutoColumns: "min-content"
+});
+_responsiveRule(util$n, "auto-cols-max", {
+  gridAutoColumns: "max-content"
+});
+_responsiveRule(util$n, "auto-cols-fr", {
+  gridAutoColumns: "minmax(0, 1fr)"
+});
+const gridAutoColumnsStyle = {
+  layers: {
+    util: util$n
+  }
+}, util$m = {};
+_responsiveRule(util$m, "auto-flow-row", {
+  gridAutoFlow: "row"
+});
+_responsiveRule(util$m, "auto-flow-column", {
+  gridAutoFlow: "column"
+});
+_responsiveRule(util$m, "auto-flow-row-dense", {
+  gridAutoFlow: "row dense"
+});
+_responsiveRule(util$m, "auto-flow-column-dense", {
+  gridAutoFlow: "column dense"
+});
+const gridAutoFlowStyle = {
+  layers: {
+    util: util$m
+  }
+}, util$l = {};
+_responsiveRule(util$l, "auto-rows-auto", {
+  gridAutoRows: "auto"
+});
+_responsiveRule(util$l, "auto-rows-min", {
+  gridAutoRows: "min-content"
+});
+_responsiveRule(util$l, "auto-rows-max", {
+  gridAutoRows: "max-content"
+});
+_responsiveRule(util$l, "auto-rows-fr", {
+  gridAutoRows: "minmax(0, 1fr)"
+});
+const gridAutoRowsStyle = {
+  layers: {
+    util: util$l
+  }
+}, util$k = {};
+_responsiveRule(util$k, "cols-1", {
+  gridTemplateColumns: "repeat(1, 1fr)"
+});
+_responsiveRule(util$k, "cols-2", {
+  gridTemplateColumns: "repeat(2, 1fr)"
+});
+_responsiveRule(util$k, "cols-3", {
+  gridTemplateColumns: "repeat(3, 1fr)"
+});
+_responsiveRule(util$k, "cols-4", {
+  gridTemplateColumns: "repeat(4, 1fr)"
+});
+_responsiveRule(util$k, "cols-5", {
+  gridTemplateColumns: "repeat(5, 1fr)"
+});
+_responsiveRule(util$k, "cols-6", {
+  gridTemplateColumns: "repeat(6, 1fr)"
+});
+_responsiveRule(util$k, "cols-7", {
+  gridTemplateColumns: "repeat(7, 1fr)"
+});
+_responsiveRule(util$k, "cols-8", {
+  gridTemplateColumns: "repeat(8, 1fr)"
+});
+_responsiveRule(util$k, "cols-9", {
+  gridTemplateColumns: "repeat(9, 1fr)"
+});
+_responsiveRule(util$k, "cols-10", {
+  gridTemplateColumns: "repeat(10, 1fr)"
+});
+_responsiveRule(util$k, "cols-12", {
+  gridTemplateColumns: "repeat(12, 1fr)"
+});
+const gridColumnsStyle = {
+  layers: {
+    util: util$k
+  }
+}, util$j = {};
+_responsiveRule(util$j, "rows-1", {
+  gridTemplateRows: "repeat(1, 1fr)"
+});
+_responsiveRule(util$j, "rows-2", {
+  gridTemplateRows: "repeat(2, 1fr)"
+});
+_responsiveRule(util$j, "rows-3", {
+  gridTemplateRows: "repeat(3, 1fr)"
+});
+_responsiveRule(util$j, "rows-4", {
+  gridTemplateRows: "repeat(4, 1fr)"
+});
+_responsiveRule(util$j, "rows-5", {
+  gridTemplateRows: "repeat(5, 1fr)"
+});
+_responsiveRule(util$j, "rows-6", {
+  gridTemplateRows: "repeat(6, 1fr)"
+});
+_responsiveRule(util$j, "rows-7", {
+  gridTemplateRows: "repeat(7, 1fr)"
+});
+_responsiveRule(util$j, "rows-8", {
+  gridTemplateRows: "repeat(8, 1fr)"
+});
+_responsiveRule(util$j, "rows-9", {
+  gridTemplateRows: "repeat(9, 1fr)"
+});
+_responsiveRule(util$j, "rows-10", {
+  gridTemplateRows: "repeat(10, 1fr)"
+});
+_responsiveRule(util$j, "rows-12", {
+  gridTemplateRows: "repeat(12, 1fr)"
+});
+const gridRowsStyle = {
+  layers: {
+    util: util$j
+  }
+}, util$i = {};
+_responsiveRule(util$i, "col-auto", {
+  gridColumn: "auto"
+});
+_responsiveRule(util$i, "col-full", {
+  gridColumn: "1 / -1"
+});
+_responsiveRule(util$i, "col-1", {
+  gridColumn: "span 1 / span 1"
+});
+_responsiveRule(util$i, "col-2", {
+  gridColumn: "span 2 / span 2"
+});
+_responsiveRule(util$i, "col-3", {
+  gridColumn: "span 3 / span 3"
+});
+_responsiveRule(util$i, "col-4", {
+  gridColumn: "span 4 / span 4"
+});
+_responsiveRule(util$i, "col-5", {
+  gridColumn: "span 5 / span 5"
+});
+_responsiveRule(util$i, "col-6", {
+  gridColumn: "span 6 / span 6"
+});
+_responsiveRule(util$i, "col-7", {
+  gridColumn: "span 7 / span 7"
+});
+_responsiveRule(util$i, "col-8", {
+  gridColumn: "span 8 / span 8"
+});
+_responsiveRule(util$i, "col-9", {
+  gridColumn: "span 9 / span 9"
+});
+_responsiveRule(util$i, "col-10", {
+  gridColumn: "span 10 / span 10"
+});
+_responsiveRule(util$i, "col-12", {
+  gridColumn: "span 12 / span 12"
+});
+const gridColumnStyle = {
+  layers: {
+    util: util$i
+  }
+}, util$h = {};
+_responsiveRule(util$h, "col-end-auto", {
+  gridColumnEnd: "auto"
+});
+_responsiveRule(util$h, "col-end-1", {
+  gridColumnEnd: "1"
+});
+_responsiveRule(util$h, "col-end-2", {
+  gridColumnEnd: "2"
+});
+_responsiveRule(util$h, "col-end-3", {
+  gridColumnEnd: "3"
+});
+_responsiveRule(util$h, "col-end-4", {
+  gridColumnEnd: "4"
+});
+_responsiveRule(util$h, "col-end-5", {
+  gridColumnEnd: "5"
+});
+_responsiveRule(util$h, "col-end-6", {
+  gridColumnEnd: "6"
+});
+_responsiveRule(util$h, "col-end-7", {
+  gridColumnEnd: "7"
+});
+_responsiveRule(util$h, "col-end-8", {
+  gridColumnEnd: "8"
+});
+_responsiveRule(util$h, "col-end-9", {
+  gridColumnEnd: "9"
+});
+_responsiveRule(util$h, "col-end-10", {
+  gridColumnEnd: "10"
+});
+_responsiveRule(util$h, "col-end-11", {
+  gridColumnEnd: "11"
+});
+_responsiveRule(util$h, "col-end-12", {
+  gridColumnEnd: "12"
+});
+const gridColumnEndStyle = {
+  layers: {
+    util: util$h
+  }
+}, util$g = {};
+_responsiveRule(util$g, "col-start-auto", {
+  gridColumnStart: "auto"
+});
+_responsiveRule(util$g, "col-start-1", {
+  gridColumnStart: "1"
+});
+_responsiveRule(util$g, "col-start-2", {
+  gridColumnStart: "2"
+});
+_responsiveRule(util$g, "col-start-3", {
+  gridColumnStart: "3"
+});
+_responsiveRule(util$g, "col-start-4", {
+  gridColumnStart: "4"
+});
+_responsiveRule(util$g, "col-start-5", {
+  gridColumnStart: "5"
+});
+_responsiveRule(util$g, "col-start-6", {
+  gridColumnStart: "6"
+});
+_responsiveRule(util$g, "col-start-7", {
+  gridColumnStart: "7"
+});
+_responsiveRule(util$g, "col-start-8", {
+  gridColumnStart: "8"
+});
+_responsiveRule(util$g, "col-start-9", {
+  gridColumnStart: "9"
+});
+_responsiveRule(util$g, "col-start-10", {
+  gridColumnStart: "10"
+});
+_responsiveRule(util$g, "col-start-11", {
+  gridColumnStart: "11"
+});
+_responsiveRule(util$g, "col-start-12", {
+  gridColumnStart: "12"
+});
+const gridColumnStartStyle = {
+  layers: {
+    util: util$g
+  }
+}, util$f = {};
+_responsiveRule(util$f, "row-auto", {
+  gridRow: "auto"
+});
+_responsiveRule(util$f, "row-full", {
+  gridRow: "1 / -1"
+});
+_responsiveRule(util$f, "row-1", {
+  gridRow: "span 1 / span 1"
+});
+_responsiveRule(util$f, "row-2", {
+  gridRow: "span 2 / span 2"
+});
+_responsiveRule(util$f, "row-3", {
+  gridRow: "span 3 / span 3"
+});
+_responsiveRule(util$f, "row-4", {
+  gridRow: "span 4 / span 4"
+});
+_responsiveRule(util$f, "row-5", {
+  gridRow: "span 5 / span 5"
+});
+_responsiveRule(util$f, "row-6", {
+  gridRow: "span 6 / span 6"
+});
+_responsiveRule(util$f, "row-7", {
+  gridRow: "span 7 / span 7"
+});
+_responsiveRule(util$f, "row-8", {
+  gridRow: "span 8 / span 8"
+});
+_responsiveRule(util$f, "row-9", {
+  gridRow: "span 9 / span 9"
+});
+_responsiveRule(util$f, "row-10", {
+  gridRow: "span 10 / span 10"
+});
+_responsiveRule(util$f, "row-12", {
+  gridRow: "span 12 / span 12"
+});
+const gridRowStyle = {
+  layers: {
+    util: util$f
+  }
+}, util$e = {};
+_responsiveRule(util$e, "row-end-auto", {
+  gridRowEnd: "auto"
+});
+_responsiveRule(util$e, "row-end-1", {
+  gridRowEnd: "1"
+});
+_responsiveRule(util$e, "row-end-2", {
+  gridRowEnd: "2"
+});
+_responsiveRule(util$e, "row-end-3", {
+  gridRowEnd: "3"
+});
+_responsiveRule(util$e, "row-end-4", {
+  gridRowEnd: "4"
+});
+_responsiveRule(util$e, "row-end-5", {
+  gridRowEnd: "5"
+});
+_responsiveRule(util$e, "row-end-6", {
+  gridRowEnd: "6"
+});
+_responsiveRule(util$e, "row-end-7", {
+  gridRowEnd: "7"
+});
+_responsiveRule(util$e, "row-end-8", {
+  gridRowEnd: "8"
+});
+_responsiveRule(util$e, "row-end-9", {
+  gridRowEnd: "9"
+});
+_responsiveRule(util$e, "row-end-10", {
+  gridRowEnd: "10"
+});
+_responsiveRule(util$e, "row-end-11", {
+  gridRowEnd: "11"
+});
+_responsiveRule(util$e, "row-end-12", {
+  gridRowEnd: "12"
+});
+const gridRowEndStyle = {
+  layers: {
+    util: util$e
+  }
+}, util$d = {};
+_responsiveRule(util$d, "row-start-auto", {
+  gridRowStart: "auto"
+});
+_responsiveRule(util$d, "row-start-1", {
+  gridRowStart: "1"
+});
+_responsiveRule(util$d, "row-start-2", {
+  gridRowStart: "2"
+});
+_responsiveRule(util$d, "row-start-3", {
+  gridRowStart: "3"
+});
+_responsiveRule(util$d, "row-start-4", {
+  gridRowStart: "4"
+});
+_responsiveRule(util$d, "row-start-5", {
+  gridRowStart: "5"
+});
+_responsiveRule(util$d, "row-start-6", {
+  gridRowStart: "6"
+});
+_responsiveRule(util$d, "row-start-7", {
+  gridRowStart: "7"
+});
+_responsiveRule(util$d, "row-start-8", {
+  gridRowStart: "8"
+});
+_responsiveRule(util$d, "row-start-9", {
+  gridRowStart: "9"
+});
+_responsiveRule(util$d, "row-start-10", {
+  gridRowStart: "10"
+});
+_responsiveRule(util$d, "row-start-11", {
+  gridRowStart: "11"
+});
+_responsiveRule(util$d, "row-start-12", {
+  gridRowStart: "12"
+});
+const gridRowStartStyle = {
+  layers: {
+    util: util$d
+  }
+}, util$c = {};
+_responsiveRule(util$c, "h-fill", {
+  height: "100%"
+});
+_responsiveRule(util$c, "h-stretch", {
+  height: "stretch"
+});
+const heightStyle = {
+  layers: {
+    util: util$c
+  }
+}, util$b = {};
+_responsiveRule(util$b, "inset-0", {
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
+});
+_responsiveRule(util$b, "top-0", {
+  top: 0
+});
+_responsiveRule(util$b, "right-0", {
+  right: 0
+});
+_responsiveRule(util$b, "bottom-0", {
+  bottom: 0
+});
+_responsiveRule(util$b, "left-0", {
+  left: 0
+});
+const insetStyle = {
+  layers: {
+    util: util$b
+  }
+}, util$a = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$a, `m-${space}`, {
+    margin: vars.space[space]
+  });
+_responsiveRule(util$a, "m-auto", {
+  margin: "auto"
+});
+for (const space of theme.SPACE)
+  _responsiveRule(util$a, `mx-${space}`, {
+    marginLeft: vars.space[space],
+    marginRight: vars.space[space]
+  });
+_responsiveRule(util$a, "mx-auto", {
+  marginLeft: "auto",
+  marginRight: "auto"
+});
+for (const space of theme.SPACE)
+  _responsiveRule(util$a, `my-${space}`, {
+    marginTop: vars.space[space],
+    marginBottom: vars.space[space]
+  });
+_responsiveRule(util$a, "my-auto", {
+  marginTop: "auto",
+  marginBottom: "auto"
+});
+for (const i of theme.SPACE)
+  _responsiveRule(util$a, `mt-${i}`, {
+    marginTop: vars.space[i]
+  });
+_responsiveRule(util$a, "mt-auto", {
+  marginTop: "auto"
+});
+for (const i of theme.SPACE)
+  _responsiveRule(util$a, `mr-${i}`, {
+    marginRight: vars.space[i]
+  });
+_responsiveRule(util$a, "mr-auto", {
+  marginRight: "auto"
+});
+for (const i of theme.SPACE)
+  _responsiveRule(util$a, `mb-${i}`, {
+    marginBottom: vars.space[i]
+  });
+_responsiveRule(util$a, "mb-auto", {
+  marginBottom: "auto"
+});
+for (const i of theme.SPACE)
+  _responsiveRule(util$a, `ml-${i}`, {
+    marginLeft: vars.space[i]
+  });
+_responsiveRule(util$a, "ml-auto", {
+  marginLeft: "auto"
+});
+const marginStyle = {
+  layers: {
+    util: util$a
+  }
+}, util$9 = {};
+_responsiveRule(util$9, "max-w-0", {
+  maxWidth: vars.container[0]
+});
+_responsiveRule(util$9, "max-w-1", {
+  maxWidth: vars.container[1]
+});
+_responsiveRule(util$9, "max-w-2", {
+  maxWidth: vars.container[2]
+});
+_responsiveRule(util$9, "max-w-3", {
+  maxWidth: vars.container[3]
+});
+_responsiveRule(util$9, "max-w-4", {
+  maxWidth: vars.container[4]
+});
+_responsiveRule(util$9, "max-w-5", {
+  maxWidth: vars.container[5]
+});
+_responsiveRule(util$9, "max-w-auto", {
+  maxWidth: "none"
+});
+_responsiveRule(util$9, "max-w-fill", {
+  maxWidth: "100%"
+});
+const maxWidthStyle = {
+  layers: {
+    util: util$9
+  }
+}, util$8 = {};
+_responsiveRule(util$8, "min-h-0", {
+  minHeight: "0"
+});
+_responsiveRule(util$8, "min-h-full", {
+  minHeight: "100%"
+});
+const minHeightStyle = {
+  layers: {
+    util: util$8
+  }
+}, util$7 = {};
+_responsiveRule(util$7, "min-w-0", {
+  minWidth: "0"
+});
+_responsiveRule(util$7, "min-w-auto", {
+  minWidth: "auto"
+});
+_responsiveRule(util$7, "min-w-full", {
+  minWidth: "100%"
+});
+_responsiveRule(util$7, "min-w-min", {
+  minWidth: "min-content"
+});
+_responsiveRule(util$7, "min-w-max", {
+  minWidth: "max-content"
+});
+_responsiveRule(util$7, "min-w-fit", {
+  minWidth: "fit-content"
+});
+const minWidthStyle = {
+  layers: {
+    util: util$7
+  }
+}, rules$2 = {
+  ".outline-none": {
+    outline: "none"
+  }
+}, outlineStyle = {
+  layers: {
+    util: rules$2
+  }
+}, util$6 = {};
+_responsiveRule(util$6, "overflow-visible", {
+  overflow: "visible"
+});
+_responsiveRule(util$6, "overflow-hidden", {
+  overflow: "hidden"
+});
+_responsiveRule(util$6, "overflow-scroll", {
+  overflow: "scroll"
+});
+_responsiveRule(util$6, "overflow-auto", {
+  overflow: "auto"
+});
+const overflowStyle = {
+  layers: {
+    util: util$6
+  }
+}, util$5 = {};
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `p-${space}`, {
+    padding: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `px-${space}`, {
+    paddingLeft: vars.space[space],
+    paddingRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `py-${space}`, {
+    paddingTop: vars.space[space],
+    paddingBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pt-${space}`, {
+    paddingTop: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pr-${space}`, {
+    paddingRight: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pb-${space}`, {
+    paddingBottom: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(util$5, `pl-${space}`, {
+    paddingLeft: vars.space[space]
+  });
+const paddingStyle = {
+  layers: {
+    util: util$5
+  }
+}, rules$1 = {
+  ".pointer-events-none": {
+    pointerEvents: "none"
+  },
+  ".pointer-events-auto": {
+    pointerEvents: "auto"
+  }
+}, pointerEventsStyle = {
+  layers: {
+    util: rules$1
+  }
+}, util$4 = {};
+_responsiveRule(util$4, "position-absolute", {
+  position: "absolute"
+});
+_responsiveRule(util$4, "position-fixed", {
+  position: "fixed"
+});
+_responsiveRule(util$4, "position-relative", {
+  position: "relative"
+});
+_responsiveRule(util$4, "position-static", {
+  position: "static"
+});
+_responsiveRule(util$4, "position-sticky", {
+  position: "sticky"
+});
+const positionStyle = {
+  layers: {
+    util: util$4
+  }
+}, util$3 = {};
+_responsiveRule(util$3, "r-0", {
+  borderRadius: vars.radius[0]
+});
+_responsiveRule(util$3, "r-1", {
+  borderRadius: vars.radius[1]
+});
+_responsiveRule(util$3, "r-2", {
+  borderRadius: vars.radius[2]
+});
+_responsiveRule(util$3, "r-3", {
+  borderRadius: vars.radius[3]
+});
+_responsiveRule(util$3, "r-4", {
+  borderRadius: vars.radius[4]
+});
+_responsiveRule(util$3, "r-5", {
+  borderRadius: vars.radius[5]
+});
+_responsiveRule(util$3, "r-6", {
+  borderRadius: vars.radius[6]
+});
+_responsiveRule(util$3, "r-full", {
+  borderRadius: "9999px"
+});
+const radiusStyle = {
+  layers: {
+    util: util$3
+  }
+}, util$2 = {};
+for (const index of theme.SHADOW)
+  index === 0 ? _responsiveRule(util$2, "shadow-0", {
+    boxShadow: "none"
+  }) : _responsiveRule(util$2, `shadow-${index}`, {
+    boxShadow: [`0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`, `${vars.shadow[index].umbra} ${vars.color.shadow.umbra}`, `${vars.shadow[index].penumbra} ${vars.color.shadow.penumbra}`, `${vars.shadow[index].ambient} ${vars.color.shadow.ambient}`].join(", ")
+  });
+const shadowStyle = {
+  layers: {
+    util: util$2
+  }
+}, util$1 = {};
+_responsiveRule(util$1, "text-align-initial", {
+  textAlign: "initial"
+});
+_responsiveRule(util$1, "text-align-left", {
+  textAlign: "left"
+});
+_responsiveRule(util$1, "text-align-center", {
+  textAlign: "center"
+});
+_responsiveRule(util$1, "text-align-right", {
+  textAlign: "right"
+});
+_responsiveRule(util$1, "text-align-justify", {
+  textAlign: "justify"
+});
+const textAlignStyle = {
+  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_DIALOG_ZOOM_IN = "dialog-zoom-in", KEYFRAMES_DIALOG_FADE_IN = "dialog-fade-in", keyframes$2 = {
+  [KEYFRAMES_DIALOG_ZOOM_IN]: {
+    from: {
+      opacity: 0,
+      transform: "scale(0.95)"
+    },
+    to: {
+      opacity: 1,
+      transform: "scale(1)"
+    }
+  },
+  [KEYFRAMES_DIALOG_FADE_IN]: {
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    }
+  }
+}, component$4 = {
+  ".dialog": {
+    alignItems: "center",
+    justifyContent: "center",
+    outline: "none",
+    background: vars.color.backdrop,
+    nest: {
+      "&[data-animate]": {
+        animation: `${KEYFRAMES_DIALOG_FADE_IN} 200ms ease-out`
+      },
+      '&[data-animate] > [data-ui="DialogCard"]': {
+        animation: `${KEYFRAMES_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_PULSE = "skeleton-pulse", keyframes$1 = {
+  [KEYFRAMES_PULSE]: {
+    "0%": {
+      backgroundPosition: "100%"
+    },
+    "100%": {
+      backgroundPosition: "-100%"
+    }
+  }
+}, component$2 = {
+  ".skeleton": {
+    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: KEYFRAMES_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(${vars.font.skeleton.lineHeight} - ${vars.font.skeleton.ascenderHeight} - ${vars.font.skeleton.descenderHeight})`
+  }
+};
+for (const size of theme.FONT_CODE_SIZE)
+  _responsiveRule(component$2, `code-skeleton-${size}`, {
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.code.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.code.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.code.sizes[size].descenderHeight
+    }
+  });
+for (const size of theme.FONT_HEADING_SIZE)
+  _responsiveRule(component$2, `heading-skeleton-${size}`, {
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.heading.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.heading.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.heading.sizes[size].descenderHeight
+    }
+  });
+for (const size of theme.FONT_LABEL_SIZE)
+  _responsiveRule(component$2, `label-skeleton-${size}`, {
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.label.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.label.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: vars.font.label.sizes[size].descenderHeight
+    }
+  });
+for (const size of theme.FONT_TEXT_SIZE)
+  _responsiveRule(component$2, `text-skeleton-${size}`, {
+    vars: {
+      [varNames.font.skeleton.lineHeight]: vars.font.text.sizes[size].lineHeight,
+      [varNames.font.skeleton.ascenderHeight]: vars.font.text.sizes[size].ascenderHeight,
+      [varNames.font.skeleton.descenderHeight]: 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,
+        color: vars.color.fg
+      },
+      '&[role="none"] > [role="treeitem"]:focus': {
+        position: "relative"
+      },
+      '&[role="treeitem"]': {
+        outline: "none"
+      },
+      '&[role="treeitem"] > div': {
+        cursor: "default",
+        borderRadius: "3px",
+        backgroundColor: vars.color.bg,
+        color: vars.color.fg
+      },
+      '&[role="treeitem"]:focus > div': {
+        position: "relative"
+      }
+    }
+  }
+}, treeStyle = {
+  layers: {
+    component
+  }
+}, primitive$p = {
+  ".arrow": {
+    position: "absolute",
+    width: vars.arrow.size,
+    height: vars.arrow.size,
+    nest: {
+      ":empty + &": {
+        display: "none"
+      },
+      "& > svg": {
+        display: "block",
+        transformOrigin: `calc(${vars.arrow.size} / 2) calc(${vars.arrow.size} / 2)`
+      },
+      // top
+      '[data-placement^="top"] > &': {
+        bottom: `calc(0px - ${vars.arrow.size})`
+      },
+      '[data-placement^="top"] > & svg': {
+        transform: "rotate(0deg)"
+      },
+      // right
+      '[data-placement^="right"] > &': {
+        left: `calc(0px - ${vars.arrow.size})`
+      },
+      '[data-placement^="right"] > & svg': {
+        transform: "rotate(90deg)"
+      },
+      // left
+      '[data-placement^="left"] > &': {
+        right: `calc(0px - ${vars.arrow.size})`
+      },
+      '[data-placement^="left"] > & svg': {
+        transform: "rotate(-90deg)"
+      },
+      // bottom
+      '[data-placement^="bottom"] > &': {
+        top: `calc(0px - ${vars.arrow.size})`
+      },
+      '[data-placement^="bottom"] > & svg': {
+        transform: "rotate(180deg)"
+      }
+    }
+  },
+  ".arrow-stroke-mask": {
+    // @ts-expect-error `y` is not a valid property in 'csstype'
+    y: vars.shadow.outline
+  },
+  ".arrow-stroke": {
+    stroke: vars.color.shadow.outline,
+    strokeWidth: `calc(${vars.card.shadow.outline} * 2)`
+  },
+  ".arrow-shape": {
+    fill: vars.color.bg
+  }
+}, _arrowStyle = {
+  layers: {
+    primitive: primitive$p
+  }
+}, primitive$o = {
+  ".input": {
+    position: "relative"
+  },
+  ".input-element": {
+    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.text.fg,
+    padding: [`calc(${vars.input.padding} - ${vars.input.ascenderHeight})`, vars.input.padding, `calc(${vars.input.padding} - ${vars.input.descenderHeight})`, vars.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: {
+      "&::placeholder": {
+        color: vars.color.input.text.placeholder,
+        opacity: 1
+      },
+      ".input[data-icon-left] &": {
+        paddingLeft: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`
+      },
+      ".input[data-icon-right] &": {
+        paddingRight: `calc(${vars.input.padding} + calc(${vars.input.lineHeight} - ${vars.input.ascenderHeight} - ${vars.input.descenderHeight}) + ${vars.input.gap})`
+      },
+      ".input:not([data-invalid]) &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[4]
+        }
+      },
+      ".input:not([data-invalid]) &:hover": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      ".input:not([data-invalid]) &:focus": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      ".input:not([data-invalid]) &:disabled": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.default.border[1]
+        }
+      },
+      ".input[data-invalid] &": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[2],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2]
+        }
+      },
+      ".input[data-invalid] &:hover": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
+      },
+      ".input[data-invalid] &:focus": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.fg[1]
+        }
+      },
+      ".input[data-invalid] &:disabled": {
+        vars: {
+          [varNames.color.input.text.fg]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.text.placeholder]: vars.color.tinted.critical.border[2]
+        }
+      }
+    }
+  },
+  ".input-presentation": {
+    backgroundColor: vars.color.input.text.bg,
+    borderRadius: "inherit",
+    boxShadow: `inset 0 0 0 1px ${vars.color.input.text.border}`,
+    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
+      },
+      // focus ring
+      ".input .input-element:not([data-no-focus-ring]):focus + &": {
+        outlineWidth: vars.input.text.focusRing.width,
+        outlineStyle: "solid",
+        outlineColor: vars.color.focusRing,
+        outlineOffset: vars.input.text.focusRing.offset
+      },
+      // valid
+      ".input:not([data-invalid]) &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[1]
+        }
+      },
+      ".input:not([data-invalid])[data-read-only] .input-element + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1]
+        }
+      },
+      ".input:not([data-invalid]):not([data-read-only]) .input-element:not(:disabled):hover + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2]
+        }
+      },
+      ".input:not([data-invalid]) .input-element:focus + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.text.fg]: vars.color.tinted.default.fg[1]
+        }
+      },
+      ".input:not([data-invalid]) .input-element:disabled + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.default.border[0],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
+        }
+      },
+      // invalid
+      ".input[data-invalid] &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[1],
+          [varNames.color.muted.fg]: vars.color.tinted.critical.fg[4]
+        }
+      },
+      ".input[data-invalid] .input-element:not(:disabled):hover + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2]
+        }
+      },
+      ".input[data-invalid] .input-element:focus + &": {
+        vars: {
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[2]
+        }
+      },
+      ".input[data-invalid] .input-element:disabled + &": {
+        vars: {
+          [varNames.color.input.text.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.text.border]: vars.color.tinted.critical.border[0]
+        }
+      },
+      ".input:not(.input-b) &": {
+        [varNames.color.input.text.border]: "transparent"
+      }
+    }
+  }
+};
+for (const size of theme.FONT_TEXT_SIZE) {
+  const source = vars.font.text.sizes[size];
+  _responsiveRule(primitive$o, `input-${size}`, {
+    [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)
+  _responsiveRule(primitive$o, `input-p-${space}`, {
+    [varNames.input.padding]: vars.space[space]
+  });
+for (const space of theme.SPACE)
+  _responsiveRule(primitive$o, `input-g-${space}`, {
+    [varNames.input.gap]: vars.space[space]
+  });
+const _inputStyle = {
+  layers: {
+    primitive: primitive$o
+  }
+}, primitive$n = {
+  ".selectable": {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    [varNames.color.bg]: vars.color.tinted.bg[0],
+    [varNames.color.border]: vars.color.tinted.border[2],
+    [varNames.color.fg]: vars.color.tinted.fg[2],
+    nest: {
+      "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"]
+      },
+      "a&": {
+        outline: "none",
+        textDecoration: "none"
+      },
+      ...buildSelectableTones()
+    },
+    "@media": {
+      "(hover: hover)": {
+        nest: {
+          "&:not([data-disabled])": {
+            cursor: "pointer"
+          },
+          "&:not([data-disabled]):hover": {
+            [varNames.color.bg]: vars.color.tinted.bg[1],
+            [varNames.color.border]: vars.color.tinted.border[3],
+            [varNames.color.fg]: vars.color.tinted.fg[1],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[2],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
+          },
+          '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]': {
+            [varNames.color.bg]: vars.color.tinted.bg[2],
+            [varNames.color.border]: vars.color.tinted.border[4],
+            [varNames.color.fg]: vars.color.tinted.fg[0],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[3],
+            [varNames.color.muted.fg]: vars.color.tinted.fg[4]
+          },
+          "&:not([data-disabled]):focus": {
+            [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]
+          },
+          "&[data-disabled]": {
+            [varNames.color.bg]: vars.color.tinted.bg[0],
+            [varNames.color.border]: vars.color.tinted.border[1],
+            [varNames.color.fg]: vars.color.tinted.border[4],
+            [varNames.color.muted.bg]: vars.color.tinted.bg[1],
+            [varNames.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[`&.${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": {
+    [varNames.color.fg]: vars.color.avatar.fg,
+    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: {
+      "button&": {
+        WebkitFontSmoothing: "inherit",
+        appearance: "none",
+        margin: 0,
+        padding: 0,
+        border: 0,
+        font: "inherit",
+        color: "inherit",
+        outline: "none"
+      },
+      "button&:focus": {
+        outline: `${vars.avatar.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.avatar.focusRing.offset
+      },
+      "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.AVATAR_COLORS.reduce((acc, color) => ({
+        ...acc,
+        [`&.${color}`]: {
+          [varNames.color.avatar.bg]: vars.color.avatar[color].bg,
+          [varNames.color.avatar.fg]: vars.color.avatar[color].fg
+        }
+      }), {})
+    }
+  },
+  ".avatar-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": {
+    nest: {
+      "iframe&": {
+        border: "none"
+      },
+      "ul&, ol&": {
+        listStyle: "none"
+      },
+      "&.muted": {
+        backgroundColor: vars.color.muted.bg
+      }
+    }
+  }
+}, boxStyle = {
+  layers: {
+    primitive: primitive$k
+  }
+}, 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: vars.button.boxShadow,
+    alignItems: "center",
+    nest: {
+      "&::-moz-focus-inner": {
+        border: 0,
+        padding: 0
+      },
+      "&:focus": {
+        outline: `${vars.button.focusRing.width} solid ${vars.color.focusRing}`,
+        outlineOffset: vars.button.focusRing.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[data-mode="default"][data-tone="${tone}"]`] = {
+    vars: {
+      [varNames.color.bg]: solid.bg[0],
+      [varNames.color.border]: solid.border[1],
+      [varNames.color.code.bg]: solid.bg[1],
+      [varNames.color.code.fg]: solid.fg[4],
+      [varNames.color.fg]: solid.fg[0],
+      [varNames.color.muted.bg]: solid.bg[1],
+      [varNames.color.muted.fg]: solid.fg[4],
+      [varNames.button.boxShadow]: "none"
+    },
+    nest: {
+      "&:not([data-disabled]):hover": {
+        vars: {
+          [varNames.color.bg]: solid.bg[1],
+          [varNames.color.border]: solid.border[2],
+          [varNames.color.code.bg]: solid.bg[2],
+          [varNames.color.code.fg]: solid.fg[4],
+          [varNames.color.fg]: solid.fg[0],
+          [varNames.color.muted.bg]: solid.bg[2],
+          [varNames.color.muted.fg]: solid.fg[4]
+        }
+      },
+      "&:not([data-disabled]):active": {
+        vars: {
+          [varNames.color.bg]: solid.bg[2],
+          [varNames.color.border]: solid.border[3],
+          [varNames.color.code.bg]: solid.bg[3],
+          [varNames.color.code.fg]: solid.fg[4],
+          [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]": {
+        vars: {
+          [varNames.color.bg]: solid.bg[2],
+          [varNames.color.border]: solid.border[3],
+          [varNames.color.code.bg]: solid.bg[3],
+          [varNames.color.code.fg]: solid.fg[4],
+          [varNames.color.fg]: solid.fg[0],
+          [varNames.color.muted.bg]: solid.bg[3],
+          [varNames.color.muted.fg]: solid.fg[4]
+        }
+      },
+      "&[data-disabled]": {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.border]: vars.color.tinted.default.border[1],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[4]
+        }
+      }
+    }
+  }, primitive$j[`.button[data-mode="ghost"][data-tone="${tone}"]`] = {
+    vars: {
+      [varNames.color.bg]: tinted.bg[1],
+      [varNames.color.border]: tinted.border[1],
+      [varNames.color.fg]: tinted.fg[2],
+      [varNames.color.code.bg]: tinted.bg[2],
+      [varNames.color.code.fg]: tinted.fg[4],
+      [varNames.color.muted.bg]: tinted.bg[2],
+      [varNames.color.muted.fg]: tinted.fg[4],
+      [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+    },
+    nest: {
+      "&:not([data-disabled]):hover": {
+        vars: {
+          [varNames.color.bg]: tinted.bg[2],
+          [varNames.color.border]: tinted.border[2],
+          [varNames.color.code.bg]: tinted.bg[3],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[3],
+          [varNames.color.muted.fg]: tinted.fg[3]
+        }
+      },
+      "&:not([data-disabled]):active": {
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.code.bg]: tinted.bg[4],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[4],
+          [varNames.color.muted.fg]: tinted.fg[3],
+          [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+        }
+      },
+      "&:not([data-disabled])[data-selected]": {
+        vars: {
+          [varNames.color.bg]: tinted.bg[3],
+          [varNames.color.border]: tinted.border[3],
+          [varNames.color.code.bg]: tinted.bg[4],
+          [varNames.color.code.fg]: tinted.fg[3],
+          [varNames.color.fg]: tinted.fg[1],
+          [varNames.color.muted.bg]: tinted.bg[4],
+          [varNames.color.muted.fg]: tinted.fg[3],
+          [varNames.button.boxShadow]: `inset 0 0 0 ${vars.button.border.width} ${vars.color.border}`
+        }
+      },
+      "&[data-disabled]": {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        }
+      }
+    }
+  }, primitive$j[`.button[data-mode="bleed"][data-tone="${tone}"]`] = {
+    boxShadow: "none",
+    vars: {
+      [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],
+      [varNames.button.boxShadow]: "none"
+    },
+    nest: {
+      "&:not([data-disabled]):hover": {
+        vars: {
+          [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": {
+        vars: {
+          [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]": {
+        vars: {
+          [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]": {
+        vars: {
+          [varNames.color.avatar.blue.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.purple.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.magenta.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.red.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.orange.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.yellow.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.green.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.avatar.cyan.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[0],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.fg]: vars.color.tinted.default.border[4],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[3]
+        }
+      }
+    }
+  };
+}
+const buttonStyle = {
+  layers: {
+    primitive: primitive$j
+  }
+};
+function _assign(target, source) {
+  return Object.assign(target, source);
+}
+const primitive$i = {
+  ".card": {
+    backgroundColor: vars.color.bg,
+    color: vars.color.fg,
+    vars: {
+      [varNames.color.bg]: vars.color.tinted.default.bg[0],
+      [varNames.color.border]: vars.color.tinted.default.border[1],
+      [varNames.color.fg]: vars.color.tinted.default.fg[0],
+      [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+      [varNames.color.muted.fg]: vars.color.tinted.default.fg[4]
+    },
+    nest: {
+      "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"
+      },
+      "&[data-checkered]": {
+        backgroundSize: `${vars.space[3]} ${vars.space[3]}`,
+        backgroundPosition: "top left",
+        backgroundImage: `repeating-conic-gradient(${vars.color.bg} 0% 25%, ${vars.color.muted.bg} 0% 50%)`
+      },
+      "a&:not([data-disabled]):hover, button&:not([data-disabled]):hover": {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [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": {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [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"]': {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [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]": {
+        vars: {
+          [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.code.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.code.fg]: vars.color.tinted.default.fg[4],
+          [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]": {
+        vars: {
+          [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.code.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.code.fg]: vars.color.solid.primary.fg[3],
+          [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+          [varNames.color.muted.fg]: vars.color.solid.primary.fg[3]
+        }
+      },
+      "a&[data-disabled], button&[data-disabled]": {
+        vars: {
+          [varNames.color.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.border]: vars.color.tinted.default.border[1],
+          [varNames.color.fg]: vars.color.tinted.default.border[3],
+          [varNames.color.code.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.code.fg]: vars.color.tinted.default.border[2],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.muted.fg]: vars.color.tinted.default.border[2]
+        }
+      }
+    }
+  }
+};
+for (const scheme of theme.THEME_COLOR_SCHEMES) {
+  const customProps = {}, props = {
+    colorScheme: scheme,
+    vars: customProps
+  };
+  for (const tone of theme.THEME_COLOR_CARD_TONES) {
+    const _varNames = varNames.color[tone], _vars = vars.color[scheme][tone];
+    _assignToneProps(customProps, _varNames, _vars);
+  }
+  primitive$i[`.card.${scheme}`] = props;
+}
+for (const tone of theme.THEME_COLOR_CARD_TONES) {
+  const _varNames = varNames.color, _vars = vars.color[tone], customProps = {}, props = {
+    vars: customProps
+  };
+  _assignToneProps(customProps, _varNames, _vars), _assign(customProps, {
+    "--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": vars.color.skeleton.from,
+    "--card-skeleton-to-color": vars.color.skeleton.to
+  }), primitive$i[`.card.${tone}`] = props;
+}
+const cardStyle = {
+  layers: {
+    primitive: primitive$i
+  }
+};
+function _assignToneProps(props, _varNames, _vars) {
+  for (const hue of theme.AVATAR_COLORS)
+    props[_varNames.avatar[hue].bg] = _vars.avatar[hue].bg, props[_varNames.avatar[hue].fg] = _vars.avatar[hue].fg;
+  _assign(props, {
+    [_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,
+    [_varNames.skeleton.from]: _vars.skeleton.from,
+    [_varNames.skeleton.to]: _vars.skeleton.to
+  });
+  for (const variant of theme.COLOR_VARIANTS)
+    for (const elementTone of theme.THEME_COLOR_STATE_TONES) {
+      const __varNames = _varNames[variant][elementTone], __vars = _vars[variant][elementTone];
+      _assign(props, {
+        [__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",
+    nest: {
+      "&:not([hidden])": {
+        display: "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: vars.input.checkbox.size,
+        height: vars.input.checkbox.size,
+        boxSizing: "border-box",
+        borderRadius: vars.radius[2],
+        lineHeight: 1,
+        backgroundColor: vars.color.input.checkbox.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.checkbox.border}`,
+        color: vars.color.input.checkbox.fg,
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      "& + span > svg": {
+        display: "block",
+        position: "absolute",
+        opacity: 0,
+        height: "100%",
+        width: "100%"
+      },
+      "& + span > svg > path": {
+        vectorEffect: "non-scaling-stroke",
+        strokeWidth: "1.5px !important"
+      },
+      // show checkmark when checked
+      "&:checked + span > svg:first-child": {
+        opacity: 1
+      },
+      // show minus when indeterminate
+      "&:indeterminate + span > svg:last-child": {
+        opacity: 1
+      },
+      // checked, not disabled, not invalid
+      "&:checked:not(:disabled):not([data-invalid]) + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.default.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0]
+        }
+      },
+      // not checked, not invalid, hovered
+      "&:not(:checked):not([data-invalid]):hover + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      // not checked, not disabled, invalid
+      "&:not(:checked):not(:disabled)[data-invalid] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[3],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[4]
+        }
+      },
+      // not checked, invalid, hovered
+      "&:not(:checked)[data-invalid]:hover + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.critical.bg[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.critical.border[4],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.critical.fg[1]
+          // [varNames.color.input.checkbox.border]: vars.color.focusRing,
+        }
+      },
+      // checked, not disabled, invalid
+      "&:checked:not(:disabled)[data-invalid] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.solid.critical.bg[0],
+          [varNames.color.input.checkbox.fg]: vars.color.solid.critical.fg[0]
+        }
+      },
+      // not checked, not indeterminate, read only
+      "&:not(:checked):not(:indeterminate)[data-read-only] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.fg[0]
+        }
+      },
+      // checked, read only
+      "&:checked[data-read-only] + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1]
+        }
+      },
+      // not checked, focused
+      "&:not(:checked):focus:focus-visible + span": {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing
+        }
+      },
+      // checked, focused
+      "&:checked:focus:focus-visible + span": {
+        vars: {
+          [varNames.color.input.checkbox.border]: vars.color.focusRing,
+          [varNames.color.input.checkbox.bg]: vars.color.focusRing,
+          [varNames.color.input.checkbox.fg]: vars.color.solid.default.fg[0]
+        }
+      },
+      // not checked, disabled
+      "&:not(:checked):disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2]
+        }
+      },
+      // checked, disabled
+      "&:checked:disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[2],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.bg[0]
+        }
+      },
+      // indeterminate, disabled
+      "&:indeterminate:disabled + span": {
+        vars: {
+          [varNames.color.input.checkbox.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.checkbox.border]: vars.color.tinted.default.border[0],
+          [varNames.color.input.checkbox.fg]: vars.color.tinted.default.border[2]
+        }
+      }
+    }
+  }
+}, checkboxStyle = {
+  layers: {
+    primitive: primitive$h
+  }
+}, primitive$g = {
+  ".code": {
+    vars: {
+      [varNames.font.weight.regular]: vars.font.code.weight.regular,
+      [varNames.font.weight.medium]: vars.font.code.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.code.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.code.weight.bold,
+      [varNames.font.family]: vars.font.code.family,
+      [varNames.font.featureSettings]: vars.font.code.featureSettings
+    },
+    color: vars.color.code.fg,
+    nest: {
+      "& > code": {
+        fontFamily: "inherit"
+      },
+      "& a": {
+        color: vars.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) {
+  const v = vars.font.code.sizes[size];
+  _responsiveRule(primitive$g, `code-${size}`, {
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
+    }
+  });
+}
+const codeStyle = {
+  layers: {
+    primitive: primitive$g
+  }
+}, primitive$f = {
+  ".container": {
+    margin: "0 auto",
+    width: "100%"
+  }
+}, containerStyle = {
+  layers: {
+    primitive: primitive$f
+  }
+}, primitive$e = {
+  ".heading": {
+    vars: {
+      [varNames.font.weight.regular]: vars.font.heading.weight.regular,
+      [varNames.font.weight.medium]: vars.font.heading.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.heading.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.heading.weight.bold,
+      [varNames.font.family]: vars.font.heading.family,
+      [varNames.font.featureSettings]: vars.font.heading.featureSettings
+    },
+    color: vars.color.fg,
+    nest: {
+      "& a": {
+        color: vars.color.link.fg,
+        textDecoration: "none"
+      },
+      "& a:hover": {
+        color: "inherit"
+      }
+    }
+  },
+  ".heading-muted": {
+    vars: {
+      [varNames.color.fg]: vars.color.muted.fg
+    }
+  }
+};
+for (const size of theme.FONT_HEADING_SIZE) {
+  const v = vars.font.heading.sizes[size];
+  _responsiveRule(primitive$e, `heading-${size}`, {
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
+    }
+  });
+}
+const headingStyle = {
+  layers: {
+    primitive: primitive$e
+  }
+}, primitive$d = {
+  ".kbd": {
+    boxShadow: `inset 0 0 0 0.5px ${vars.color.border}`,
+    backgroundColor: vars.color.muted.bg,
+    font: "inherit",
+    verticalAlign: "top",
+    nest: {
+      "&:not([hidden])": {
+        display: "inline-block"
+      }
+    }
+  }
+}, kbdStyle = {
+  layers: {
+    primitive: primitive$d
+  }
+}, primitive$c = {
+  ".label": {
+    vars: {
+      [varNames.font.weight.regular]: vars.font.label.weight.regular,
+      [varNames.font.weight.medium]: vars.font.label.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.label.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.label.weight.bold,
+      [varNames.font.family]: vars.font.label.family,
+      [varNames.font.featureSettings]: vars.font.label.featureSettings
+    },
+    color: vars.color.fg,
+    textTransform: "uppercase",
+    nest: {
+      "& a": {
+        color: vars.color.link.fg,
+        textDecoration: "none"
+      }
+    }
+  },
+  ".label-muted": {
+    [varNames.color.fg]: vars.color.muted.fg
+  }
+};
+for (const size of theme.FONT_LABEL_SIZE) {
+  const k = varNames.font, v = vars.font.label.sizes[size];
+  _responsiveRule(primitive$c, `label-${size}`, {
+    vars: {
+      [k.fontSize]: v.fontSize,
+      [k.lineHeight]: v.lineHeight,
+      [k.letterSpacing]: v.letterSpacing,
+      [k.iconSize]: v.iconSize,
+      [k.ascenderHeight]: v.ascenderHeight,
+      [k.descenderHeight]: v.descenderHeight,
+      [k.customIconSize]: v.customIconSize
+    }
+  });
+}
+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: vars.input.radio.size,
+        height: vars.input.radio.size,
+        borderRadius: "9999px",
+        backgroundColor: vars.color.input.radio.bg,
+        boxShadow: `inset 0 0 0 1px ${vars.color.input.radio.border}`,
+        vars: {
+          [varNames.color.input.radio.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[0],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[1]
+        }
+      },
+      "& > input + span::after": {
+        content: '""',
+        position: "absolute",
+        top: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        left: `calc((${vars.input.radio.size} - ${vars.input.radio.markSize}) / 2)`,
+        width: vars.input.radio.markSize,
+        height: vars.input.radio.markSize,
+        backgroundColor: vars.color.input.radio.fg,
+        borderRadius: "9999px",
+        opacity: 0
+      },
+      // hovered
+      "& > input:not(:disabled):hover + span": {
+        vars: {
+          [varNames.color.input.radio.bg]: vars.color.tinted.default.bg[1],
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2]
+        }
+      },
+      // focused
+      "& > input:not(:disabled):focus + span": {
+        vars: {
+          [varNames.color.input.radio.border]: vars.color.tinted.default.border[2]
+        }
+      },
+      "& > input:checked + span::after": {
+        opacity: 1
+      }
+    }
+  }
+}, 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": {
+    vars: {
+      [varNames.color.input.switch.bg]: vars.color.tinted.default.border[2],
+      [varNames.color.input.switch.fg]: vars.color.tinted.default.bg[0],
+      [varNames.input.switch.thumb.offset]: "0",
+      [varNames.input.switch.thumb.size]: `calc(${vars.input.switch.height} - ${vars.input.switch.padding} * 2)`
+    },
+    display: "block",
+    position: "relative",
+    width: vars.input.switch.width,
+    height: vars.input.switch.height,
+    borderRadius: `calc(${vars.input.switch.height} / 2)`,
+    outlineOffset: vars.input.switch.focusRing.offset,
+    // Make sure it’s not possible to interact with the presentation element
+    pointerEvents: "none",
+    nest: {
+      "input:not(:checked):hover + &": {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.tinted.default.border[4]
+        }
+      },
+      "input:checked + &": {
+        vars: {
+          [varNames.color.input.switch.bg]: vars.color.solid.default.bg[0],
+          [varNames.color.input.switch.fg]: vars.color.solid.default.fg[0],
+          [varNames.input.switch.thumb.offset]: `calc(${vars.input.switch.width} - (${vars.input.switch.padding} * 2) - ${vars.input.switch.thumb.size})`
+        }
+      },
+      "[data-indeterminate] > input + &": {
+        vars: {
+          [varNames.input.switch.thumb.offset]: `calc(${vars.input.switch.width} / 2 - ${vars.input.switch.thumb.size} / 2 - ${vars.input.switch.padding})`
+        }
+      },
+      "input:focus + &": {
+        outline: `${vars.input.switch.focusRing.width} solid ${vars.color.focusRing}`
+      },
+      "input:focus:not(:focus-visible) + &": {
+        outline: "none"
+      }
+    }
+  },
+  ".switch-track": {
+    display: "block",
+    backgroundColor: vars.color.input.switch.bg,
+    position: "absolute",
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: "inherit",
+    transition: `box-shadow, background-color ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`
+  },
+  ".switch-thumb": {
+    display: "block",
+    position: "absolute",
+    left: vars.input.switch.padding,
+    top: vars.input.switch.padding,
+    width: vars.input.switch.thumb.size,
+    height: vars.input.switch.thumb.size,
+    backgroundColor: vars.color.input.switch.fg,
+    borderRadius: "9999px",
+    boxShadow: `0 0 0 0.5px ${vars.color.shadow.umbra}, 0 0.5px 2px 0.5px ${vars.color.shadow.umbra}`,
+    transform: `translate3d(${vars.input.switch.thumb.offset}, 0, 0)`,
+    transition: `transform ${vars.input.switch.transitionDurationMs} ${vars.input.switch.transitionTimingFunction}`
+  }
+}, switchStyle = {
+  layers: {
+    primitive: primitive$6
+  }
+}, primitive$5 = {
+  ".text": {
+    vars: {
+      [varNames.font.family]: vars.font.text.family,
+      [varNames.font.featureSettings]: vars.font.text.featureSettings,
+      [varNames.font.weight.regular]: vars.font.text.weight.regular,
+      [varNames.font.weight.medium]: vars.font.text.weight.medium,
+      [varNames.font.weight.semibold]: vars.font.text.weight.semibold,
+      [varNames.font.weight.bold]: vars.font.text.weight.bold
+    },
+    color: vars.color.fg,
+    nest: {
+      "& a": {
+        color: vars.color.link.fg,
+        textDecoration: "none"
+      },
+      "& a:hover": {
+        color: vars.color.fg
+      },
+      "& code": {
+        fontFamily: vars.font.code.family,
+        color: vars.color.code.fg,
+        backgroundColor: vars.color.code.bg,
+        borderRadius: vars.radius[2]
+      },
+      "& svg": {
+        color: vars.color.muted.fg
+      }
+    }
+  },
+  ".text-muted": {
+    color: vars.color.muted.fg
+  }
+};
+for (const size of theme.FONT_TEXT_SIZE) {
+  const v = vars.font.text.sizes[size];
+  _responsiveRule(primitive$5, `text-${size}`, {
+    vars: {
+      [varNames.font.fontSize]: v.fontSize,
+      [varNames.font.lineHeight]: v.lineHeight,
+      [varNames.font.letterSpacing]: v.letterSpacing,
+      [varNames.font.iconSize]: v.iconSize,
+      [varNames.font.ascenderHeight]: v.ascenderHeight,
+      [varNames.font.descenderHeight]: v.descenderHeight,
+      [varNames.font.customIconSize]: v.customIconSize
+    }
+  });
+}
+const textStyle = {
+  layers: {
+    primitive: primitive$5
+  }
+}, primitive$4 = {
+  ".text-area": {}
+}, textAreaStyle = {
+  layers: {
+    primitive: primitive$4
+  }
+}, primitive$3 = {
+  ".text-input": {},
+  ".text-input-prefix": {
+    borderTop: `1px solid ${vars.color.border}`,
+    borderLeft: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopLeftRadius: "inherit",
+    borderBottomLeftRadius: "inherit",
+    nest: {
+      "& > span": {
+        display: "block",
+        margin: "-1px"
+      }
+    }
+  },
+  ".text-input-element": {
+    borderRadius: "inherit"
+  },
+  ".text-input-suffix": {
+    borderTop: `1px solid ${vars.color.border}`,
+    borderRight: `1px solid ${vars.color.border}`,
+    borderBottom: `1px solid ${vars.color.border}`,
+    borderTopRightRadius: "inherit",
+    borderBottomRightRadius: "inherit",
+    nest: {
+      "& > span": {
+        display: "block",
+        margin: "-1px"
+      }
+    }
+  }
+}, textInputStyle = {
+  layers: {
+    primitive: primitive$3
+  }
+}, primitive$2 = {
+  ".token": {
+    _prefix: !1,
+    nest: {
+      "&.atrule": {
+        color: vars.color.code.token.atrule
+      },
+      "&.attr-name": {
+        color: vars.color.code.token.attrName
+      },
+      "&.attr-value": {
+        color: vars.color.code.token.attrValue
+      },
+      "&.attribute": {
+        color: vars.color.code.token.attribute
+      },
+      "&.boolean": {
+        color: vars.color.code.token.boolean
+      },
+      "&.builtin": {
+        color: vars.color.code.token.builtin
+      },
+      "&.cdata": {
+        color: vars.color.code.token.cdata
+      },
+      "&.char": {
+        color: vars.color.code.token.char
+      },
+      "&.class": {
+        color: vars.color.code.token.class
+      },
+      "&.class-name": {
+        color: vars.color.code.token.className
+      },
+      "&.comment": {
+        color: vars.color.code.token.comment
+      },
+      "&.constant": {
+        color: vars.color.code.token.constant
+      },
+      "&.deleted": {
+        color: vars.color.code.token.deleted
+      },
+      "&.doctype": {
+        color: vars.color.code.token.doctype
+      },
+      "&.entity": {
+        color: vars.color.code.token.entity
+      },
+      "&.function": {
+        color: vars.color.code.token.function
+      },
+      "&.hexcode": {
+        color: vars.color.code.token.hexcode
+      },
+      "&.id": {
+        color: vars.color.code.token.id
+      },
+      "&.important": {
+        color: vars.color.code.token.important
+      },
+      "&.inserted": {
+        color: vars.color.code.token.inserted
+      },
+      "&.keyword": {
+        color: vars.color.code.token.keyword
+      },
+      "&.number": {
+        color: vars.color.code.token.number
+      },
+      "&.operator": {
+        color: vars.color.code.token.operator
+      },
+      "&.prolog": {
+        color: vars.color.code.token.prolog
+      },
+      "&.property": {
+        color: vars.color.code.token.property
+      },
+      "&.pseudo-class": {
+        color: vars.color.code.token.pseudoClass
+      },
+      "&.pseudo-element": {
+        color: vars.color.code.token.pseudoElement
+      },
+      "&.punctuation": {
+        color: vars.color.code.token.punctuation
+      },
+      "&.attr-value &:not(.attr-equals).punctuation": {
+        color: "inherit"
+      },
+      "&.regex": {
+        color: vars.color.code.token.regex
+      },
+      "&.selector": {
+        color: vars.color.code.token.selector
+      },
+      "&.string": {
+        color: vars.color.code.token.string
+      },
+      "&.symbol": {
+        color: vars.color.code.token.symbol
+      },
+      "&.tag": {
+        color: vars.color.code.token.tag
+      },
+      "&.unit": {
+        color: vars.color.code.token.unit
+      },
+      "&.url": {
+        color: vars.color.code.token.url
+      },
+      "&.variable": {
+        color: vars.color.code.token.variable
+      }
+    }
+  }
+}, tokenStyle = {
+  layers: {
+    primitive: primitive$2
+  }
+}, primitive$1 = {
+  ".tooltip": {
+    pointerEvents: "none"
+  }
+}, 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: {
+      palette: {},
+      theme: {},
+      base: {},
+      util: {},
+      primitive: {}
+    }
+  },
+  // aspects
+  borderStyle,
+  boxSizingStyle,
+  displayStyle,
+  flexStyle,
+  flexAlignStyle,
+  flexDirectionStyle,
+  flexJustifyStyle,
+  flexWrapStyle,
+  fontStyle,
+  gapStyle,
+  gridAutoColumnsStyle,
+  gridAutoFlowStyle,
+  gridAutoRowsStyle,
+  gridColumnsStyle,
+  gridRowsStyle,
+  gridColumnStyle,
+  gridColumnStartStyle,
+  gridColumnEndStyle,
+  gridRowStyle,
+  gridRowStartStyle,
+  gridRowEndStyle,
+  heightStyle,
+  insetStyle,
+  marginStyle,
+  maxWidthStyle,
+  minHeightStyle,
+  minWidthStyle,
+  outlineStyle,
+  overflowStyle,
+  paddingStyle,
+  pointerEventsStyle,
+  positionStyle,
+  radiusStyle,
+  shadowStyle,
+  textAlignStyle,
+  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 _compileSystem() {
+  return _compileStyle(_systemStyle);
+}
+function _compileTheme() {
+  return _compileStyle({
+    layers: {
+      theme: {
+        ":root": properties
+      }
+    }
+  });
+}
+function _getClassNames(...classNames) {
+  return classNames.map((n) => typeof n == "string" && n.trim()).filter(Boolean).join(" ").split(" ").filter(Boolean);
+}
+function _composeClassNames(...classNames) {
+  return unique(_getClassNames(...classNames)).join(" ") || void 0;
+}
+function unique(array) {
+  return Array.from(new Set(array));
+}
+const p = PREFIX === "__PREFIX__" ? "s-" : PREFIX;
+function _scopeClassName(className) {
+  if (className !== void 0)
+    return `${p}${className.trim()}`;
+}
+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 _scopeClassNames(...classNames) {
+  return _getClassNames(...classNames).map(_scopeClassName).join(" ") || void 0;
+}
+function border(props) {
+  return _scopeClassNames(_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 boxSizing(props) {
+  return _scopeClassNames(_resp("box", props.boxSizing));
+}
+function display(props) {
+  return _scopeClassNames(_resp(void 0, props.display));
+}
+function flex(props) {
+  return _scopeClassNames(_resp("flex-align", props.align), _resp("f", props.direction), _resp("flex-justify", props.justify), _resp("flex", props.wrap));
+}
+function flexItem(props) {
+  return _scopeClassNames(_resp("f", props.flex));
+}
+function font(props) {
+  return _scopeClassNames("font", props.weight && `font-${props.weight}`);
+}
+function gap(props) {
+  return _scopeClassNames(_resp("g", props.gap), _resp("gx", props.gapX), _resp("gy", props.gapY));
+}
+function grid(props) {
+  return _scopeClassNames(_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 _scopeClassNames(_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 _scopeClassNames(_resp("h", props.height));
+}
+function inset(props) {
+  return _scopeClassNames(_resp("inset", props.inset), _resp("top", props.insetTop), _resp("right", props.insetRight), _resp("bottom", props.insetBottom), _resp("left", props.insetLeft));
+}
+function margin(props) {
+  return _scopeClassNames(_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 _scopeClassNames(_resp("max-w", props.maxWidth) ?? "");
+}
+function minHeight(props) {
+  return _scopeClassNames(_resp("min-h", props.minHeight) ?? "");
+}
+function minWidth(props) {
+  return _scopeClassNames(_resp("min-w", props.minWidth) ?? "");
+}
+function overflow(props) {
+  return _scopeClassNames(_resp("overflow", props.overflow), _resp("overflow-x", props.overflowX), _resp("overflow-y", props.overflowY));
+}
+function padding(props) {
+  return _scopeClassNames(_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 _scopeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`);
+}
+function position(props) {
+  return _scopeClassNames(_resp("position", props.position));
+}
+function radius(props) {
+  return _scopeClassNames(_resp("r", props.radius));
+}
+function shadow(props) {
+  return _scopeClassNames(_resp("shadow", props.shadow));
+}
+function textAlign(props) {
+  return _scopeClassNames(_resp("text-align", props.textAlign));
+}
+function textOverflow(props) {
+  return _scopeClassNames(props.textOverflow && `text-overflow-${props.textOverflow}`);
+}
+function width(props) {
+  return _scopeClassNames(_resp("w", props.width) ?? "");
+}
+function breadcrumbs() {
+  return _scopeClassNames("breadcrumbs");
+}
+function dialog() {
+  return _composeClassNames(_scopeClassNames("dialog"), inset({
+    inset: 0
+  }));
+}
+function dialogContainer() {
+  return _scopeClassNames("dialog-container");
+}
+function dialogCardRoot() {
+  return _scopeClassNames("dialog-card-root");
+}
+function dialogLayout() {
+  return _scopeClassNames("dialog-layout");
+}
+function dialogHeader() {
+  return _scopeClassNames("dialog-header");
+}
+function dialogContent() {
+  return _scopeClassNames("dialog-content");
+}
+function dialogFooter() {
+  return _scopeClassNames("dialog-footer");
+}
+function menu() {
+  return _scopeClassNames("menu");
+}
+function menuDivider() {
+  return _scopeClassNames("menu-divider");
+}
+function skeleton(props) {
+  return _composeClassNames(_scopeClassNames("skeleton"), radius(props));
+}
+function codeSkeleton(props) {
+  return _scopeClassNames("font-skeleton", _resp("code-skeleton", props.size));
+}
+function headingSkeleton(props) {
+  return _scopeClassNames("font-skeleton", _resp("heading-skeleton", props.size));
+}
+function labelSkeleton(props) {
+  return _scopeClassNames("font-skeleton", _resp("label-skeleton", props.size));
+}
+function textSkeleton(props) {
+  return _scopeClassNames("font-skeleton", _resp("text-skeleton", props.size));
+}
+function toastLayer() {
+  return _scopeClassNames("toast-layer");
+}
+function toast() {
+  return _scopeClassNames("toast");
+}
+function toastLoadingBar() {
+  return _scopeClassNames("toast-loading-bar");
+}
+function toastLoadingBarProgress() {
+  return _scopeClassNames("toast-loading-bar-progress");
+}
+function toastLoadingBarMask() {
+  return _scopeClassNames("toast-loading-bar-mask");
+}
+function treeItem() {
+  return _scopeClassNames("tree-item");
+}
+const BREAKPOINTS = {
+  0: 0,
+  1: 360,
+  2: 600,
+  3: 900,
+  4: 1200,
+  5: 1800,
+  6: 2400
+};
+function _arrow() {
+  return _scopeClassNames("arrow");
+}
+function _arrowStroke() {
+  return _scopeClassNames("arrow-stroke");
+}
+function _arrowStrokeMask() {
+  return _scopeClassNames("arrow-stroke-mask");
+}
+function _arrowShape() {
+  return _scopeClassNames("arrow-shape");
+}
+function _input(props) {
+  return _composeClassNames(_scopeClassNames("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 _scopeClassNames("input-element");
+}
+function _inputPresentation() {
+  return _scopeClassNames("input-presentation");
+}
+function _selectable(props) {
+  return _composeClassNames(_scopeClassNames("selectable", props.tone ?? "default"), radius(props));
+}
+function avatar(props) {
+  return _scopeClassNames("avatar", props.color || "gray", _resp("avatar", props.size));
+}
+function avatarArrow() {
+  return _scopeClassNames("avatar-arrow");
+}
+function avatarInitials() {
+  return _scopeClassNames("avatar-initials");
+}
+function avatarImage() {
+  return _scopeClassNames("avatar-image");
+}
+function avatarCounter(props) {
+  return _scopeClassNames("avatar-counter", _resp("avatar", props.size));
+}
+function avatarStack(props) {
+  return _scopeClassNames("avatar-stack", _resp("avatar", props.size));
+}
+function badge(props) {
+  return _composeClassNames(_scopeClassNames("badge", props.tone && `badge-${props.tone}`), radius(props));
+}
+function box(props) {
+  return _composeClassNames(_scopeClassNames("box", props.muted && "muted", props.outline && `outline-${props.outline}`), border(props), boxSizing({
+    boxSizing: props.sizing
+  }), display(props), height(props), flex(props), flexItem(props), grid(props), gridItem(props), gap(props), inset(props), margin(props), maxWidth(props), minHeight(props), minWidth(props), overflow(props), padding(props), pointerEvents(props), position(props), radius(props), textAlign(props), width(props));
+}
+function button(props) {
+  return _composeClassNames(_scopeClassNames("button"), display(props), flexItem(props), radius(props), width(props));
+}
+function buttonLoadingBox() {
+  return _scopeClassNames("button-loading-box");
+}
+function card(props) {
+  return _composeClassNames(_scopeClassNames(props.scheme, props.tone, "card", props.checkered && "card-checkered"), shadow(props));
+}
+function checkbox() {
+  return _scopeClassNames("checkbox");
+}
+function checkboxInput() {
+  return _scopeClassNames("checkbox-input");
+}
+function code(props) {
+  return _composeClassNames(_scopeClassNames("code", "block", _resp("code", props.size)), font(props));
+}
+function container(props) {
+  return _composeClassNames(_scopeClassNames("container"), maxWidth({
+    maxWidth: props.width
+  }));
+}
+function heading(props) {
+  return _composeClassNames(_scopeClassNames("block", "heading", props.muted && "heading-muted", _resp("heading", props.size)), font(props), flexItem(props), textAlign({
+    textAlign: props.align
+  }));
+}
+function kbd(props) {
+  return _composeClassNames(_scopeClassNames("kbd"), radius(props));
+}
+function label(props) {
+  return _composeClassNames(_scopeClassNames("label", "block", props.muted && "label-muted", _resp("label", props.size)), font(props), textAlign({
+    textAlign: props.align
+  }));
+}
+function popover() {
+  return _scopeClassNames("popover");
+}
+function popoverCard() {
+  return _scopeClassNames("popover-card");
+}
+function radio() {
+  return _scopeClassNames("radio");
+}
+function select(props) {
+  return _composeClassNames(_scopeClassNames("select"), _input(props));
+}
+function selectPresentation() {
+  return _composeClassNames(_scopeClassNames("select-presentation"), _inputPresentation());
+}
+function spinner() {
+  return _scopeClassNames("spinner");
+}
+function animatedSpinnerIcon() {
+  return _scopeClassNames("animated-spinner-icon");
+}
+function stack() {
+  return _scopeClassNames("stack");
+}
+function _switch() {
+  return _scopeClassNames("switch");
+}
+function _switchElement() {
+  return _scopeClassNames("switch-element");
+}
+function _switchPresentation() {
+  return _scopeClassNames("switch-presentation");
+}
+function _switchThumb() {
+  return _scopeClassNames("switch-thumb");
+}
+function _switchTrack() {
+  return _scopeClassNames("switch-track");
+}
+function text(props) {
+  return _composeClassNames(_scopeClassNames("text", "block", props.muted && "text-muted", _resp("text", props.size)), flexItem(props), font(props), textAlign({
+    textAlign: props.align
+  }));
+}
+function textArea(props) {
+  return _composeClassNames(_scopeClassNames("text-area"), _input(props));
+}
+function textInput(props) {
+  return _composeClassNames(_scopeClassNames("text-input"), _input(props));
+}
+function textInputPrefix() {
+  return _scopeClassNames("text-input-prefix");
+}
+function textInputElement() {
+  return _scopeClassNames("text-input-element");
+}
+function textInputSuffix() {
+  return _scopeClassNames("text-input-suffix");
+}
+function tooltip() {
+  return _scopeClassNames("tooltip");
+}
+function srOnly() {
+  return _scopeClassNames(_composeClassNames("sr-only"));
+}
+exports.BREAKPOINTS = BREAKPOINTS;
+exports._arrow = _arrow;
+exports._arrowShape = _arrowShape;
+exports._arrowStroke = _arrowStroke;
+exports._arrowStrokeMask = _arrowStrokeMask;
+exports._compileSystem = _compileSystem;
+exports._compileTheme = _compileTheme;
+exports._composeClassNames = _composeClassNames;
+exports._input = _input;
+exports._inputElement = _inputElement;
+exports._inputPresentation = _inputPresentation;
+exports._scopeClassName = _scopeClassName;
+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.boxSizing = boxSizing;
+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.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.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.minHeight = minHeight;
+exports.minWidth = minWidth;
+exports.overflow = overflow;
+exports.padding = padding;
+exports.pointerEvents = pointerEvents;
+exports.popover = popover;
+exports.popoverCard = popoverCard;
+exports.position = position;
+exports.properties = properties;
+exports.px = px$1;
+exports.radio = radio;
+exports.radius = radius;
+exports.rem = rem$1;
+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.textAlign = textAlign;
+exports.textArea = textArea;
+exports.textInput = textInput;
+exports.textInputElement = textInputElement;
+exports.textInputPrefix = textInputPrefix;
+exports.textInputSuffix = textInputSuffix;
+exports.textOverflow = textOverflow;
+exports.textSkeleton = textSkeleton;
+exports.toBoxShadow = toBoxShadow$1;
+exports.toast = toast;
+exports.toastLayer = toastLayer;
+exports.toastLoadingBar = toastLoadingBar;
+exports.toastLoadingBarMask = toastLoadingBarMask;
+exports.toastLoadingBarProgress = toastLoadingBarProgress;
+exports.tooltip = tooltip;
+exports.treeItem = treeItem;
+exports.varNames = varNames;
+exports.vars = vars;
+exports.width = width;
+//# sourceMappingURL=css.cjs.map