@sanity/ui 3.0.0-static.4 → 3.0.0-static.40

package/dist/theme.mjs

@@ -1,2940 +0,0 @@
-import { THEME_COLOR_BLEND_MODES, THEME_COLOR_BUTTON_MODES, THEME_COLOR_CARD_TONES, THEME_COLOR_STATE_TONES, THEME_COLOR_AVATAR_COLORS, v3_v2, THEME_COLOR_STATES, THEME_COLOR_INPUT_MODES, THEME_COLOR_INPUT_STATES } from "./_chunks-es/v3_v2.mjs";
-import { THEME_COLOR_SCHEMES } from "./_chunks-es/v3_v2.mjs";
-import { COLOR_HUES, COLOR_TINTS } from "@sanity/color";
-function isColorBlendModeValue(str) {
-  return THEME_COLOR_BLEND_MODES.includes(str);
-}
-function isColorHueKey(str) {
-  return COLOR_HUES.includes(str);
-}
-function isColorTintKey(str) {
-  return COLOR_TINTS.includes(str);
-}
-function isColorButtonMode(str) {
-  return THEME_COLOR_BUTTON_MODES.includes(str);
-}
-const AVATAR_SIZE = [0, 1, 2, 3], CONTAINER = [0, 1, 2, 3, 4, 5, "auto"], RADIUS = [0, 1, 2, 3, 4, 5, 6, "full"], SPACE = [0, 0.5, 1, 2, 3, 4, 5, 6, 7, 8, 9], FONT_CODE_SIZE = [0, 1, 2, 3, 4], FONT_HEADING_SIZE = [0, 1, 2, 3, 4, 5], FONT_LABEL_SIZE = [0, 1, 2, 3, 4, 5], FONT_TEXT_SIZE = [0, 1, 2, 3, 4], SHADOW = [0, 1, 2, 3, 4, 5];
-function createSelectableTones(opts, base, dark, solid, muted) {
-  return {
-    default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
-    primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
-    positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
-    caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
-    critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
-  };
-}
-function _createSelectableStates(opts, base, dark, solid, muted, tone) {
-  return {
-    enabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "enabled",
-      tone
-    }),
-    hovered: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "hovered",
-      tone
-    }),
-    pressed: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "pressed",
-      tone
-    }),
-    selected: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "selected",
-      tone
-    }),
-    disabled: opts.selectable({
-      base,
-      dark,
-      solid,
-      muted,
-      state: "disabled",
-      tone
-    })
-  };
-}
-function createSolidTones(opts, base, dark, name) {
-  return {
-    default: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "selected"
-      })
-    },
-    transparent: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "selected"
-      })
-    },
-    primary: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "selected"
-      })
-    },
-    positive: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "selected"
-      })
-    },
-    caution: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "selected"
-      })
-    },
-    critical: {
-      enabled: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.solid({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "selected"
-      })
-    }
-  };
-}
-function createButtonTones(opts, base, dark, solid, muted, mode) {
-  return {
-    default: opts.button({
-      base,
-      dark,
-      solid: solid.default,
-      muted: muted.default,
-      mode
-    }),
-    primary: opts.button({
-      base,
-      dark,
-      solid: solid.primary,
-      muted: muted.primary,
-      mode
-    }),
-    positive: opts.button({
-      base,
-      dark,
-      solid: solid.positive,
-      muted: muted.positive,
-      mode
-    }),
-    caution: opts.button({
-      base,
-      dark,
-      solid: solid.caution,
-      muted: muted.caution,
-      mode
-    }),
-    critical: opts.button({
-      base,
-      dark,
-      solid: solid.critical,
-      muted: muted.critical,
-      mode
-    })
-  };
-}
-function createButtonModes(opts, base, dark, solid, muted) {
-  return {
-    default: createButtonTones(opts, base, dark, solid, muted, "default"),
-    ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
-    bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
-  };
-}
-function createCardStates(opts, base, dark, name, solid, muted) {
-  return {
-    enabled: opts.card({
-      base,
-      dark,
-      name,
-      state: "enabled",
-      solid,
-      muted
-    }),
-    disabled: opts.card({
-      base,
-      dark,
-      name,
-      state: "disabled",
-      solid,
-      muted
-    }),
-    hovered: opts.card({
-      base,
-      dark,
-      name,
-      state: "hovered",
-      solid,
-      muted
-    }),
-    pressed: opts.card({
-      base,
-      dark,
-      name,
-      state: "pressed",
-      solid,
-      muted
-    }),
-    selected: opts.card({
-      base,
-      dark,
-      name,
-      state: "selected",
-      solid,
-      muted
-    })
-  };
-}
-const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
-  default: {
-    lightest: "hsl(0, 0%, 95%)",
-    lighter: "hsl(0, 0%, 70%)",
-    light: "hsl(0, 0%, 65%)",
-    base: "hsl(0, 0%, 50%)",
-    dark: "hsl(0, 0%, 35%)",
-    darker: "hsl(0, 0%, 20%)",
-    darkest: "hsl(0, 0%, 5%)"
-  },
-  transparent: {
-    lightest: "hsl(240, 100%, 95%)",
-    lighter: "hsl(240, 100%, 70%)",
-    light: "hsl(240, 100%, 65%)",
-    base: "hsl(240, 100%, 50%)",
-    dark: "hsl(240, 100%, 35%)",
-    darker: "hsl(240, 100%, 20%)",
-    darkest: "hsl(240, 100%, 5%)"
-  },
-  primary: {
-    lightest: "hsl(240, 100%, 95%)",
-    lighter: "hsl(240, 100%, 70%)",
-    light: "hsl(240, 100%, 65%)",
-    base: "hsl(240, 100%, 50%)",
-    dark: "hsl(240, 100%, 35%)",
-    darker: "hsl(240, 100%, 20%)",
-    darkest: "hsl(240, 100%, 5%)"
-  },
-  positive: {
-    lightest: "hsl(120, 100%, 95%)",
-    lighter: "hsl(120, 100%, 70%)",
-    light: "hsl(120, 100%, 65%)",
-    base: "hsl(120, 100%, 50%)",
-    dark: "hsl(120, 100%, 35%)",
-    darker: "hsl(120, 100%, 20%)",
-    darkest: "hsl(120, 100%, 5%)"
-  },
-  caution: {
-    lightest: "hsl(60, 100%, 95%)",
-    lighter: "hsl(60, 100%, 70%)",
-    light: "hsl(60, 100%, 65%)",
-    base: "hsl(60, 100%, 50%)",
-    dark: "hsl(60, 100%, 35%)",
-    darker: "hsl(60, 100%, 20%)",
-    darkest: "hsl(60, 100%, 5%)"
-  },
-  critical: {
-    lightest: "hsl(0, 100%, 95%)",
-    lighter: "hsl(0, 100%, 70%)",
-    light: "hsl(0, 100%, 65%)",
-    base: "hsl(0, 100%, 50%)",
-    dark: "hsl(0, 100%, 35%)",
-    darker: "hsl(0, 100%, 20%)",
-    darkest: "hsl(0, 100%, 5%)"
-  }
-}, spots = {
-  gray: "hsl(0, 0%, 50%)",
-  red: "hsl(0, 100%, 50%)",
-  orange: "hsl(30, 100%, 50%)",
-  yellow: "hsl(60, 100%, 50%)",
-  green: "hsl(120, 100%, 50%)",
-  cyan: "hsl(180, 100%, 50%)",
-  blue: "hsl(240, 100%, 50%)",
-  purple: "hsl(270, 100%, 50%)",
-  magenta: "hsl(300, 100%, 50%)"
-}, tones = {
-  transparent: {
-    bg: [colors.transparent.darkest, colors.transparent.lightest],
-    fg: [colors.transparent.lightest, colors.transparent.darkest],
-    border: [colors.transparent.darker, colors.transparent.lighter],
-    focusRing: [colors.transparent.base, colors.transparent.base]
-  },
-  primary: {
-    bg: [colors.primary.darkest, colors.primary.lightest],
-    fg: [colors.primary.lightest, colors.primary.darkest],
-    border: [colors.primary.darker, colors.primary.lighter],
-    focusRing: [colors.primary.base, colors.primary.base]
-  },
-  positive: {
-    bg: [colors.positive.darkest, colors.positive.lightest],
-    fg: [colors.positive.lightest, colors.positive.darkest],
-    border: [colors.positive.darker, colors.positive.lighter],
-    focusRing: [colors.positive.base, colors.positive.base]
-  },
-  caution: {
-    bg: [colors.caution.darkest, colors.caution.lightest],
-    fg: [colors.caution.lightest, colors.caution.darkest],
-    border: [colors.caution.darker, colors.caution.lighter],
-    focusRing: [colors.caution.base, colors.caution.base]
-  },
-  critical: {
-    bg: [colors.critical.darkest, colors.critical.lightest],
-    fg: [colors.critical.lightest, colors.critical.darkest],
-    border: [colors.critical.darker, colors.critical.lighter],
-    focusRing: [colors.critical.base, colors.critical.base]
-  }
-}, defaultOpts = {
-  base: ({
-    dark,
-    name
-  }) => name === "default" ? {
-    bg: dark ? black : white,
-    fg: dark ? white : black,
-    border: dark ? colors.default.darkest : colors.default.lightest,
-    focusRing: colors.primary.base,
-    shadow: {
-      outline: black,
-      umbra: black,
-      penumbra: black,
-      ambient: black
-    },
-    skeleton: {
-      from: dark ? white : black,
-      to: dark ? white : black
-    }
-  } : {
-    bg: tones[name].bg[dark ? 0 : 1],
-    fg: tones[name].fg[dark ? 0 : 1],
-    border: tones[name].border[dark ? 0 : 1],
-    focusRing: tones[name].focusRing[dark ? 0 : 1],
-    shadow: {
-      outline: black,
-      umbra: black,
-      penumbra: black,
-      ambient: black
-    },
-    skeleton: {
-      from: dark ? white : black,
-      to: dark ? white : black
-    }
-  },
-  solid: ({
-    base,
-    dark,
-    state,
-    tone
-  }) => {
-    const color = colors[tone];
-    return state === "hovered" ? {
-      bg: dark ? color.light : color.dark,
-      bg2: dark ? color.light : color.dark,
-      border: dark ? color.lighter : color.darker,
-      fg: dark ? color.darkest : color.lightest,
-      icon: dark ? color.darkest : color.lightest,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    } : {
-      bg: color.base,
-      bg2: color.base,
-      border: dark ? color.light : color.dark,
-      fg: dark ? color.darkest : color.lightest,
-      icon: dark ? color.darkest : color.lightest,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  muted: ({
-    base,
-    dark,
-    state,
-    tone
-  }) => {
-    const color = colors[tone];
-    return state === "hovered" ? {
-      bg: dark ? color.darker : color.lighter,
-      bg2: dark ? color.darker : color.lighter,
-      border: dark ? color.lighter : color.darker,
-      fg: dark ? color.lightest : color.darkest,
-      icon: dark ? color.lightest : color.darkest,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    } : {
-      bg: dark ? color.darkest : color.lightest,
-      bg2: dark ? color.darkest : color.lightest,
-      border: dark ? color.darker : color.lighter,
-      fg: dark ? color.lighter : color.darker,
-      icon: dark ? color.lighter : color.darker,
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    };
-  },
-  button: ({
-    base,
-    mode,
-    muted,
-    solid
-  }) => mode === "bleed" ? {
-    ...muted,
-    enabled: {
-      bg: "transparent",
-      bg2: "transparent",
-      fg: muted.enabled.fg,
-      icon: muted.enabled.fg,
-      border: "transparent",
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    },
-    hovered: {
-      bg: muted.enabled.bg,
-      bg2: muted.enabled.bg,
-      fg: muted.hovered.fg,
-      icon: muted.hovered.fg,
-      border: "transparent",
-      muted: {
-        fg: black
-      },
-      accent: {
-        fg: black
-      },
-      link: {
-        fg: black
-      },
-      code: {
-        bg: black,
-        fg: black
-      },
-      skeleton: base.skeleton
-    }
-  } : mode === "ghost" ? {
-    ...solid,
-    enabled: muted.enabled
-  } : solid,
-  card: ({
-    base
-  }) => ({
-    bg: black,
-    bg2: black,
-    fg: black,
-    icon: black,
-    border: black,
-    muted: {
-      fg: black
-    },
-    accent: {
-      fg: black
-    },
-    link: {
-      fg: black
-    },
-    code: {
-      bg: black,
-      fg: black
-    },
-    skeleton: base.skeleton
-  }),
-  input: () => ({
-    bg: black,
-    bg2: black,
-    fg: black,
-    border: black,
-    placeholder: black
-  }),
-  selectable: ({
-    muted,
-    state,
-    tone
-  }) => muted[tone][state],
-  spot: ({
-    key
-  }) => spots[key],
-  syntax: () => ({
-    atrule: black,
-    attrName: black,
-    attrValue: black,
-    attribute: black,
-    boolean: black,
-    builtin: black,
-    cdata: black,
-    char: black,
-    class: black,
-    className: black,
-    comment: black,
-    constant: black,
-    deleted: black,
-    doctype: black,
-    entity: black,
-    function: black,
-    hexcode: black,
-    id: black,
-    important: black,
-    inserted: black,
-    keyword: black,
-    number: black,
-    operator: black,
-    prolog: black,
-    property: black,
-    pseudoClass: black,
-    pseudoElement: black,
-    punctuation: black,
-    regex: black,
-    selector: black,
-    string: black,
-    symbol: black,
-    tag: black,
-    unit: black,
-    url: black,
-    variable: black
-  })
-};
-function createInputModes(opts, base, dark, solid, muted) {
-  return {
-    default: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "enabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "disabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "hovered",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: "default",
-        state: "readOnly",
-        solid: solid.default,
-        muted: muted.default
-      })
-    },
-    invalid: {
-      enabled: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "enabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      disabled: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "disabled",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      hovered: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "hovered",
-        solid: solid.default,
-        muted: muted.default
-      }),
-      readOnly: opts.input({
-        base,
-        dark,
-        mode: "invalid",
-        state: "readOnly",
-        solid: solid.default,
-        muted: muted.default
-      })
-    }
-  };
-}
-function createMutedTones(opts, base, dark, name) {
-  return {
-    default: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "default",
-        name,
-        state: "selected"
-      })
-    },
-    transparent: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "transparent",
-        name,
-        state: "selected"
-      })
-    },
-    primary: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "primary",
-        name,
-        state: "selected"
-      })
-    },
-    positive: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "positive",
-        name,
-        state: "selected"
-      })
-    },
-    caution: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "caution",
-        name,
-        state: "selected"
-      })
-    },
-    critical: {
-      enabled: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "enabled"
-      }),
-      disabled: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "disabled"
-      }),
-      hovered: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "hovered"
-      }),
-      pressed: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "pressed"
-      }),
-      selected: opts.muted({
-        base,
-        dark,
-        tone: "critical",
-        name,
-        state: "selected"
-      })
-    }
-  };
-}
-function createSpot(opts, base, dark) {
-  return {
-    gray: opts.spot({
-      base,
-      dark,
-      key: "gray"
-    }),
-    blue: opts.spot({
-      base,
-      dark,
-      key: "blue"
-    }),
-    purple: opts.spot({
-      base,
-      dark,
-      key: "purple"
-    }),
-    magenta: opts.spot({
-      base,
-      dark,
-      key: "magenta"
-    }),
-    red: opts.spot({
-      base,
-      dark,
-      key: "red"
-    }),
-    orange: opts.spot({
-      base,
-      dark,
-      key: "orange"
-    }),
-    yellow: opts.spot({
-      base,
-      dark,
-      key: "yellow"
-    }),
-    green: opts.spot({
-      base,
-      dark,
-      key: "green"
-    }),
-    cyan: opts.spot({
-      base,
-      dark,
-      key: "cyan"
-    })
-  };
-}
-function createColorTheme(partialOpts = {}) {
-  const builders = {
-    ...defaultOpts,
-    ...partialOpts
-  };
-  return {
-    light: _createColorScheme(builders, !1),
-    dark: _createColorScheme(builders, !0)
-  };
-}
-function _createColorScheme(opts, dark) {
-  return {
-    default: _createColor(opts, dark, "default"),
-    transparent: _createColor(opts, dark, "transparent"),
-    primary: _createColor(opts, dark, "primary"),
-    positive: _createColor(opts, dark, "positive"),
-    caution: _createColor(opts, dark, "caution"),
-    critical: _createColor(opts, dark, "critical")
-  };
-}
-function _createColor(opts, dark, name) {
-  const base = opts.base({
-    dark,
-    name
-  }), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
-  return {
-    base,
-    button: createButtonModes(opts, base, dark, solid, muted),
-    card: createCardStates(opts, base, dark, name, solid, muted),
-    dark,
-    input: createInputModes(opts, base, dark, solid, muted),
-    selectable: createSelectableTones(opts, base, dark, solid, muted),
-    spot: createSpot(opts, base, dark),
-    syntax: opts.syntax({
-      base,
-      dark
-    }),
-    solid,
-    muted
-  };
-}
-const defaultThemeConfig = {
-  avatar: {
-    sizes: [{
-      distance: -4,
-      size: 19
-    }, {
-      distance: -4,
-      size: 25
-    }, {
-      distance: -8,
-      size: 33
-    }, {
-      distance: -12,
-      size: 49
-    }],
-    focusRing: {
-      offset: 1,
-      width: 1
-    }
-  },
-  button: {
-    textWeight: "medium",
-    border: {
-      width: 1
-    },
-    focusRing: {
-      offset: -1,
-      width: 1
-    }
-  },
-  card: {
-    border: {
-      width: 1
-    },
-    focusRing: {
-      offset: -1,
-      width: 1
-    },
-    shadow: {
-      outline: 0.5
-    }
-  },
-  container: [320, 640, 960, 1280, 1600, 1920],
-  media: [360, 600, 900, 1200, 1800, 2400],
-  layer: {
-    dialog: {
-      zOffset: 600
-    },
-    popover: {
-      zOffset: 400
-    },
-    tooltip: {
-      zOffset: 200
-    }
-  },
-  radius: [0, 1, 3, 7, 11, 15, 23, 43, 75, 127],
-  shadow: [null, {
-    umbra: [0, 0, 0, 0],
-    penumbra: [0, 0, 0, 0],
-    ambient: [0, 0, 0, 0]
-  }, {
-    umbra: [0, 3, 5, -2],
-    penumbra: [0, 6, 10, 0],
-    ambient: [0, 1, 18, 1]
-  }, {
-    umbra: [0, 7, 8, -4],
-    penumbra: [0, 12, 17, 2],
-    ambient: [0, 5, 22, 4]
-  }, {
-    umbra: [0, 9, 11, -5],
-    penumbra: [0, 18, 28, 2],
-    ambient: [0, 7, 34, 6]
-  }, {
-    umbra: [0, 11, 15, -7],
-    penumbra: [0, 24, 38, 3],
-    ambient: [0, 9, 46, 8]
-  }],
-  space: [0, 4, 8, 12, 20, 32, 52, 84, 136, 220],
-  input: {
-    border: {
-      width: 1
-    },
-    checkbox: {
-      size: 17,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    radio: {
-      size: 17,
-      markSize: 9,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    switch: {
-      width: 25,
-      height: 17,
-      padding: 5,
-      transitionDurationMs: 150,
-      transitionTimingFunction: "ease-out",
-      focusRing: {
-        offset: 1,
-        width: 1
-      }
-    },
-    select: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    },
-    text: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
-    }
-  }
-}, defaultThemeFonts = {
-  code: {
-    family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
-    },
-    sizes: [{
-      ascenderHeight: 4,
-      descenderHeight: 4,
-      fontSize: 10,
-      iconSize: 17,
-      lineHeight: 15,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 13,
-      iconSize: 21,
-      lineHeight: 19,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 23,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 19,
-      iconSize: 29,
-      lineHeight: 27,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 22,
-      iconSize: 33,
-      lineHeight: 31,
-      letterSpacing: 0
-    }]
-  },
-  heading: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    featureSettings: "'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'zero' 1",
-    weights: {
-      regular: 600,
-      medium: 700,
-      semibold: 800,
-      bold: 900
-    },
-    sizes: [{
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 13,
-      iconSize: 17,
-      lineHeight: 19,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 16,
-      iconSize: 25,
-      lineHeight: 23,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 21,
-      iconSize: 33,
-      lineHeight: 29,
-      letterSpacing: -0.25
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 27,
-      iconSize: 41,
-      lineHeight: 35,
-      letterSpacing: -0.5
-    }, {
-      ascenderHeight: 9.5,
-      descenderHeight: 8.5,
-      fontSize: 33,
-      iconSize: 49,
-      lineHeight: 41,
-      letterSpacing: -1
-    }, {
-      ascenderHeight: 10.5,
-      descenderHeight: 9.5,
-      fontSize: 38,
-      iconSize: 53,
-      lineHeight: 47,
-      letterSpacing: -1
-    }]
-  },
-  label: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
-    weights: {
-      regular: 500,
-      medium: 600,
-      semibold: 700,
-      bold: 800
-    },
-    sizes: [{
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 8.1,
-      iconSize: 13,
-      lineHeight: 10,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 1.5,
-      descenderHeight: 2.5,
-      fontSize: 9.5,
-      iconSize: 15,
-      lineHeight: 11,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 10.8,
-      iconSize: 17,
-      lineHeight: 12,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 12.25,
-      iconSize: 19,
-      lineHeight: 13,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 1.5,
-      descenderHeight: 2.5,
-      fontSize: 13.6,
-      iconSize: 21,
-      lineHeight: 14,
-      letterSpacing: 0.5
-    }, {
-      ascenderHeight: 2,
-      descenderHeight: 2,
-      fontSize: 15,
-      iconSize: 23,
-      lineHeight: 15,
-      letterSpacing: 0.5
-    }]
-  },
-  text: {
-    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", Helvetica, Arial, system-ui, sans-serif',
-    weights: {
-      regular: 400,
-      medium: 500,
-      semibold: 600,
-      bold: 700
-    },
-    sizes: [{
-      ascenderHeight: 4,
-      descenderHeight: 4,
-      fontSize: 10,
-      iconSize: 17,
-      lineHeight: 15,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 5,
-      descenderHeight: 5,
-      fontSize: 13,
-      iconSize: 21,
-      lineHeight: 19,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 6,
-      descenderHeight: 6,
-      fontSize: 15,
-      iconSize: 25,
-      lineHeight: 23,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 7,
-      descenderHeight: 7,
-      fontSize: 18,
-      iconSize: 29,
-      lineHeight: 27,
-      letterSpacing: 0
-    }, {
-      ascenderHeight: 8,
-      descenderHeight: 8,
-      fontSize: 21,
-      iconSize: 33,
-      lineHeight: 31,
-      letterSpacing: 0
-    }]
-  }
-}, HUES = ["gray", "blue", "purple", "magenta", "red", "orange", "yellow", "green", "cyan"], TINTS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950], RE_PERCENTAGE = /^([0-9]+)%/, RE_OPACITY = /^(1|0\.[0-9]+)?/;
-function parseColor$1(str) {
-  let cursor = 0;
-  const color = getColor();
-  if (!color)
-    throw new Error(`Invalid color: ${str}`);
-  const opacity = getOpacity(), mix2 = getMixPercentage();
-  return {
-    color,
-    mix: mix2,
-    opacity
-  };
-  function _consume(s) {
-    if (str.startsWith(s, cursor))
-      return cursor += s.length, s;
-  }
-  function _peek() {
-    return str[cursor];
-  }
-  function getColor() {
-    ignoreWhitespace();
-    let v = _consume("black") || _consume("white");
-    if (v)
-      return {
-        type: v
-      };
-    for (const hue of HUES)
-      if (v = _consume(String(hue)), v) {
-        if (_peek() !== "/")
-          throw new Error("Expected slash after hue");
-        cursor += 1;
-        const tint2 = getTint();
-        if (!tint2)
-          throw new Error("Expected tint after hue");
-        return {
-          type: "hue",
-          hue,
-          tint: tint2
-        };
-      }
-    const tint = getTint();
-    if (tint)
-      return {
-        type: "hue",
-        hue: void 0,
-        tint
-      };
-  }
-  function getTint() {
-    ignoreWhitespace();
-    let v = Number(str.slice(cursor, cursor + 3));
-    if (TINTS.includes(v))
-      return cursor += 3, v;
-    if (v = Number(str.slice(cursor, cursor + 2)), TINTS.includes(v))
-      return cursor += 2, v;
-  }
-  function getMixPercentage() {
-    ignoreWhitespace();
-    const match = RE_PERCENTAGE.exec(str.slice(cursor));
-    if (match)
-      return cursor += match[0].length, parseFloat(match[1]);
-  }
-  function getOpacity() {
-    if (ignoreWhitespace(), _peek() === "/") {
-      cursor += 1;
-      const match = RE_OPACITY.exec(str.slice(cursor));
-      if (match)
-        return cursor += match[0].length, parseFloat(match[1]);
-      cursor -= 1;
-    }
-  }
-  function ignoreWhitespace() {
-    for (; _peek() === " "; )
-      cursor++;
-  }
-}
-function renderColor(token, context) {
-  const {
-    bgVar,
-    hue,
-    scheme
-  } = context, result = parseColor$1(token[scheme === "dark" ? 0 : 1]), colorVar = result.color.type === "hue" ? `--${result.color.hue ?? hue}-${result.color.tint}` : `--${result.color.type}`;
-  return result.mix !== void 0 ? `color-mix(in srgb, var(${bgVar}), var(${colorVar}) ${result.mix}%)` : result.opacity !== void 0 ? `color-mix(in srgb, transparent, var(${colorVar}) ${result.opacity * 100}%)` : `var(${colorVar})`;
-}
-function buildColor_v3(tokens) {
-  return {
-    dark: buildColorScheme_v3(tokens, {
-      scheme: "dark"
-    }),
-    light: buildColorScheme_v3(tokens, {
-      scheme: "light"
-    })
-  };
-}
-function buildColorScheme_v3(tokens, options) {
-  const {
-    scheme
-  } = options;
-  return {
-    card: THEME_COLOR_CARD_TONES.reduce((acc, tone) => (acc[tone] = buildColorCard_v3(tokens[tone], {
-      scheme
-    }), acc), {})
-  };
-}
-function buildColorCard_v3(tokens, options) {
-  const {
-    scheme
-  } = options, context = {
-    bgVar: "--color-bg-1",
-    hue: tokens._hue,
-    scheme
-  };
-  return {
-    _hue: tokens._hue ?? "gray",
-    avatar: THEME_COLOR_AVATAR_COLORS.reduce((acc, hue) => {
-      const avatarTokens = tokens.avatar[hue];
-      return acc[hue] = {
-        bg: renderColor(avatarTokens.bg, {
-          bgVar: "--color-bg-1",
-          hue: avatarTokens._hue,
-          scheme
-        }),
-        fg: renderColor(avatarTokens.fg, {
-          bgVar: "--color-bg-1",
-          hue: avatarTokens._hue,
-          scheme
-        })
-      }, acc;
-    }, {}),
-    backdrop: renderColor(tokens.backdrop, context),
-    focusRing: renderColor(tokens.focusRing, context),
-    shadow: {
-      outline: renderColor(tokens.shadow.outline, context),
-      umbra: renderColor(tokens.shadow.umbra, context),
-      penumbra: renderColor(tokens.shadow.penumbra, context),
-      ambient: renderColor(tokens.shadow.ambient, context)
-    },
-    skeleton: {
-      from: renderColor(tokens.skeleton.from, context),
-      to: renderColor(tokens.skeleton.to, context)
-    },
-    token: {
-      atrule: renderColor(tokens.token.atrule, context),
-      attrName: renderColor(tokens.token.attrName, context),
-      attrValue: renderColor(tokens.token.attrValue, context),
-      attribute: renderColor(tokens.token.attribute, context),
-      boolean: renderColor(tokens.token.boolean, context),
-      builtin: renderColor(tokens.token.builtin, context),
-      cdata: renderColor(tokens.token.cdata, context),
-      char: renderColor(tokens.token.char, context),
-      class: renderColor(tokens.token.class, context),
-      className: renderColor(tokens.token.className, context),
-      comment: renderColor(tokens.token.comment, context),
-      constant: renderColor(tokens.token.constant, context),
-      deleted: renderColor(tokens.token.deleted, context),
-      doctype: renderColor(tokens.token.doctype, context),
-      entity: renderColor(tokens.token.entity, context),
-      function: renderColor(tokens.token.function, context),
-      hexcode: renderColor(tokens.token.hexcode, context),
-      id: renderColor(tokens.token.id, context),
-      important: renderColor(tokens.token.important, context),
-      inserted: renderColor(tokens.token.inserted, context),
-      keyword: renderColor(tokens.token.keyword, context),
-      number: renderColor(tokens.token.number, context),
-      operator: renderColor(tokens.token.operator, context),
-      prolog: renderColor(tokens.token.prolog, context),
-      property: renderColor(tokens.token.property, context),
-      pseudoClass: renderColor(tokens.token.pseudoClass, context),
-      pseudoElement: renderColor(tokens.token.pseudoElement, context),
-      punctuation: renderColor(tokens.token.punctuation, context),
-      regex: renderColor(tokens.token.regex, context),
-      selector: renderColor(tokens.token.selector, context),
-      string: renderColor(tokens.token.string, context),
-      symbol: renderColor(tokens.token.symbol, context),
-      tag: renderColor(tokens.token.tag, context),
-      unit: renderColor(tokens.token.unit, context),
-      url: renderColor(tokens.token.url, context),
-      variable: renderColor(tokens.token.variable, context)
-    },
-    variant: {
-      solid: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
-          ...acc,
-          [tone]: buildColorElement_v3(tokens.variant.solid[tone], {
-            scheme
-          })
-        }), {})
-      },
-      tinted: {
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
-          ...acc,
-          [tone]: buildColorElement_v3(tokens.variant.tinted[tone], {
-            scheme
-          })
-        }), {})
-      }
-    }
-  };
-}
-function buildColorElement_v3(tokens, options) {
-  const {
-    scheme
-  } = options, context = {
-    bgVar: "--bg",
-    hue: tokens._hue,
-    scheme
-  };
-  return {
-    _hue: tokens._hue ?? "gray",
-    bg: {
-      0: renderColor(tokens.bg[0], context),
-      4: renderColor(tokens.bg[4], context)
-    },
-    border: {
-      0: renderColor(tokens.border[0], context),
-      4: renderColor(tokens.border[4], context)
-    },
-    fg: {
-      0: renderColor(tokens.fg[0], context),
-      4: renderColor(tokens.fg[4], context)
-    }
-  };
-}
-const defaultTokens = {
-  color: {
-    "*": {
-      // backdrop: ['black/0.2', '200/0.2'],
-      backdrop: ["black/0.5", "gray/100/0.5"],
-      focusRing: ["blue/500", "blue/300"],
-      link: {
-        fg: ["blue/400", "blue/600"]
-      },
-      shadow: {
-        outline: ["500/0.4", "500/0.3"],
-        umbra: ["black/0.2", "500/0.1"],
-        penumbra: ["black/0.14", "500/0.07"],
-        ambient: ["black/0.12", "500/0.06"]
-      },
-      token: {
-        atrule: ["purple/300", "purple/600"],
-        attrName: ["green/300", "green/600"],
-        attrValue: ["yellow/300", "yellow/600"],
-        attribute: ["yellow/300", "yellow/600"],
-        boolean: ["purple/300", "purple/600"],
-        builtin: ["purple/300", "purple/600"],
-        cdata: ["yellow/300", "yellow/600"],
-        char: ["yellow/300", "yellow/600"],
-        class: ["orange/300", "orange/600"],
-        className: ["cyan/300", "cyan/600"],
-        comment: ["gray/600", "gray/300"],
-        constant: ["purple/300", "purple/600"],
-        deleted: ["red/300", "red/600"],
-        entity: ["red/300", "red/600"],
-        function: ["green/300", "green/600"],
-        hexcode: ["blue/300", "blue/600"],
-        id: ["purple/300", "purple/600"],
-        important: ["purple/300", "purple/600"],
-        inserted: ["green/300", "green/600"],
-        keyword: ["magenta/300", "magenta/600"],
-        number: ["purple/300", "purple/600"],
-        operator: ["magenta/300", "magenta/600"],
-        prolog: ["gray/300", "gray/600"],
-        property: ["blue/300", "blue/600"],
-        pseudoClass: ["yellow/300", "yellow/600"],
-        pseudoElement: ["yellow/300", "yellow/600"],
-        punctuation: ["gray/300", "gray/600"],
-        regex: ["blue/300", "blue/600"],
-        selector: ["red/300", "red/600"],
-        string: ["yellow/300", "yellow/600"],
-        symbol: ["purple/300", "purple/600"],
-        tag: ["red/300", "red/600"],
-        unit: ["orange/300", "orange/600"],
-        url: ["red/300", "red/600"],
-        variable: ["red/300", "red/600"]
-      },
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["950", "50"],
-              4: ["800", "100"]
-            },
-            border: {
-              0: ["800", "100"],
-              4: ["600", "300"]
-            },
-            fg: {
-              0: ["100", "900"],
-              4: ["300", "700"]
-            }
-          },
-          primary: {
-            _hue: "blue"
-          },
-          suggest: {
-            _hue: "purple"
-          },
-          positive: {
-            _hue: "green"
-          },
-          caution: {
-            _hue: "yellow"
-          },
-          critical: {
-            _hue: "red"
-          }
-        },
-        solid: {
-          "*": {
-            bg: {
-              0: ["300", "500"],
-              4: ["200", "600"]
-            },
-            border: {
-              0: ["200", "400"],
-              4: ["100", "500"]
-            },
-            fg: {
-              0: ["black", "white"],
-              4: ["600", "400"]
-            }
-          },
-          default: {
-            bg: {
-              0: ["200", "800"],
-              4: ["white", "black"]
-            },
-            border: {
-              0: ["300", "700"],
-              4: ["200", "800"]
-            }
-          },
-          primary: {
-            _hue: "blue"
-          },
-          suggest: {
-            _hue: "purple"
-          },
-          positive: {
-            _hue: "green"
-          },
-          caution: {
-            _hue: "yellow"
-          },
-          critical: {
-            _hue: "red"
-          }
-        }
-      }
-    },
-    transparent: {
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["black", "gray/50"],
-              4: ["800", "300 50%"]
-            },
-            border: {
-              0: ["900", "100"],
-              4: ["700", "300"]
-            },
-            fg: {
-              0: ["100", "black"],
-              4: ["500", "600"]
-            }
-          }
-        }
-      }
-    },
-    default: {
-      variant: {
-        tinted: {
-          "*": {
-            bg: {
-              0: ["gray/950", "white"],
-              4: ["800", "200"]
-            },
-            border: {
-              0: ["800", "100"],
-              4: ["600", "300"]
-            },
-            fg: {
-              0: ["white", "black"],
-              4: ["400", "600"]
-            }
-          }
-        }
-      }
-    },
-    primary: {
-      _hue: "blue"
-    },
-    suggest: {
-      _hue: "purple"
-    },
-    positive: {
-      _hue: "green"
-    },
-    caution: {
-      _hue: "yellow"
-    },
-    critical: {
-      _hue: "red"
-    }
-  }
-};
-function merge(...records) {
-  return records.filter(Boolean).reduce(_merge, {});
-}
-function _merge(acc, source) {
-  for (const key of Object.keys(source)) {
-    const prevValue = acc[key], nextValue = source[key];
-    isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
-  }
-  return acc;
-}
-function isRecord(value) {
-  return value !== null && typeof value == "object" && !Array.isArray(value);
-}
-const defaultElementTokens = {
-  bg: {
-    0: ["950", "50"],
-    4: ["700", "300"]
-  },
-  border: {
-    0: ["700", "300"],
-    4: ["400", "600"]
-  },
-  fg: {
-    0: ["100", "900"],
-    4: ["400", "600"]
-  }
-};
-function resolveTokens(tokens = {}) {
-  return {
-    color: {
-      "*": resolveCardColorTokens(tokens.color?.["*"]),
-      ...THEME_COLOR_CARD_TONES.reduce((acc, tone) => ({
-        ...acc,
-        [tone]: resolveCardColorTokens(merge(tokens.color?.["*"], tokens.color?.[tone]))
-      }), {})
-    }
-  };
-}
-function resolveCardColorTokens(tokens) {
-  return {
-    _hue: tokens?._hue ?? "gray",
-    avatar: {
-      gray: {
-        _hue: tokens?.avatar?.gray?._hue ?? "gray",
-        bg: tokens?.avatar?.gray?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.gray?.fg ?? ["900", "900"]
-      },
-      blue: {
-        _hue: tokens?.avatar?.blue?._hue ?? "blue",
-        bg: tokens?.avatar?.blue?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.blue?.fg ?? ["900", "900"]
-      },
-      purple: {
-        _hue: tokens?.avatar?.purple?._hue ?? "purple",
-        bg: tokens?.avatar?.purple?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.purple?.fg ?? ["900", "900"]
-      },
-      magenta: {
-        _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
-        bg: tokens?.avatar?.magenta?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.magenta?.fg ?? ["900", "900"]
-      },
-      red: {
-        _hue: tokens?.avatar?.red?._hue ?? "red",
-        bg: tokens?.avatar?.red?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.red?.fg ?? ["900", "900"]
-      },
-      orange: {
-        _hue: tokens?.avatar?.orange?._hue ?? "orange",
-        bg: tokens?.avatar?.orange?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.orange?.fg ?? ["900", "900"]
-      },
-      yellow: {
-        _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
-        bg: tokens?.avatar?.yellow?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.yellow?.fg ?? ["900", "900"]
-      },
-      green: {
-        _hue: tokens?.avatar?.green?._hue ?? "green",
-        bg: tokens?.avatar?.green?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.green?.fg ?? ["900", "900"]
-      },
-      cyan: {
-        _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
-        bg: tokens?.avatar?.cyan?.bg ?? ["400", "400"],
-        fg: tokens?.avatar?.cyan?.fg ?? ["900", "900"]
-      }
-    },
-    backdrop: tokens?.backdrop ?? ["900", "100"],
-    focusRing: tokens?.focusRing ?? ["500", "500"],
-    link: {
-      fg: tokens?.link?.fg ?? ["400", "600"]
-    },
-    shadow: {
-      outline: tokens?.shadow?.outline ?? ["500", "500"],
-      umbra: tokens?.shadow?.umbra ?? ["500", "500"],
-      penumbra: tokens?.shadow?.penumbra ?? ["500", "500"],
-      ambient: tokens?.shadow?.ambient ?? ["500", "500"]
-    },
-    skeleton: {
-      from: tokens?.skeleton?.from ?? ["900", "100"],
-      to: tokens?.skeleton?.to ?? ["950", "50"]
-    },
-    token: {
-      atrule: tokens?.token?.atrule ?? ["400", "600"],
-      attribute: tokens?.token?.attribute ?? ["400", "600"],
-      attrName: tokens?.token?.attrName ?? ["400", "600"],
-      attrValue: tokens?.token?.attrValue ?? ["400", "600"],
-      boolean: tokens?.token?.boolean ?? ["400", "600"],
-      builtin: tokens?.token?.builtin ?? ["400", "600"],
-      cdata: tokens?.token?.cdata ?? ["400", "600"],
-      char: tokens?.token?.char ?? ["400", "600"],
-      class: tokens?.token?.class ?? ["400", "600"],
-      className: tokens?.token?.className ?? ["400", "600"],
-      comment: tokens?.token?.comment ?? ["600", "400"],
-      constant: tokens?.token?.constant ?? ["400", "600"],
-      deleted: tokens?.token?.deleted ?? ["400", "600"],
-      doctype: tokens?.token?.doctype ?? ["400", "600"],
-      entity: tokens?.token?.entity ?? ["400", "600"],
-      function: tokens?.token?.function ?? ["400", "600"],
-      hexcode: tokens?.token?.hexcode ?? ["400", "600"],
-      id: tokens?.token?.id ?? ["400", "600"],
-      important: tokens?.token?.important ?? ["400", "600"],
-      inserted: tokens?.token?.inserted ?? ["400", "600"],
-      keyword: tokens?.token?.keyword ?? ["400", "600"],
-      number: tokens?.token?.number ?? ["400", "600"],
-      operator: tokens?.token?.operator ?? ["400", "600"],
-      prolog: tokens?.token?.prolog ?? ["400", "600"],
-      property: tokens?.token?.property ?? ["400", "600"],
-      pseudoClass: tokens?.token?.pseudoClass ?? ["400", "600"],
-      pseudoElement: tokens?.token?.pseudoElement ?? ["400", "600"],
-      punctuation: tokens?.token?.punctuation ?? ["400", "600"],
-      regex: tokens?.token?.regex ?? ["400", "600"],
-      selector: tokens?.token?.selector ?? ["400", "600"],
-      string: tokens?.token?.string ?? ["400", "600"],
-      symbol: tokens?.token?.symbol ?? ["400", "600"],
-      tag: tokens?.token?.tag ?? ["400", "600"],
-      unit: tokens?.token?.unit ?? ["400", "600"],
-      url: tokens?.token?.url ?? ["400", "600"],
-      variable: tokens?.token?.variable ?? ["400", "600"]
-    },
-    variant: {
-      solid: {
-        "*": resolveElementTokens(tokens?.variant?.solid?.["*"]),
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.solid?.["*"], tokens?.variant?.solid?.[tone])), acc), {})
-      },
-      tinted: {
-        "*": resolveElementTokens(tokens?.variant?.tinted?.["*"]),
-        ...THEME_COLOR_STATE_TONES.reduce((acc, tone) => (acc[tone] = resolveElementTokens(merge(tokens, tokens?.variant?.tinted?.["*"], tokens?.variant?.tinted?.[tone])), acc), {})
-      }
-    }
-  };
-}
-function resolveElementTokens(tokens) {
-  return {
-    _hue: tokens?._hue ?? "gray",
-    bg: {
-      0: tokens?.bg?.[0] ?? defaultElementTokens.bg[0],
-      4: tokens?.bg?.[4] ?? defaultElementTokens.bg[4]
-    },
-    border: {
-      0: tokens?.border?.[0] ?? defaultElementTokens.border[0],
-      4: tokens?.border?.[4] ?? defaultElementTokens.border[4]
-    },
-    fg: {
-      0: tokens?.fg?.[0] ?? defaultElementTokens.fg[0],
-      4: tokens?.fg?.[4] ?? defaultElementTokens.fg[4]
-    }
-  };
-}
-function buildTheme_v3(options) {
-  const {
-    v2
-  } = options ?? {}, tokens = resolveTokens(options?.tokens ?? defaultTokens);
-  return {
-    _version: 3,
-    _tokens: tokens,
-    avatar: v2?.avatar ?? defaultThemeConfig.avatar,
-    button: v2?.button ?? defaultThemeConfig.button,
-    card: v2?.card ?? defaultThemeConfig.card,
-    color: buildColor_v3(tokens.color),
-    container: v2?.container ?? defaultThemeConfig.container,
-    font: v2?.font ?? defaultThemeFonts,
-    input: v2?.input ?? defaultThemeConfig.input,
-    layer: v2?.layer ?? defaultThemeConfig.layer,
-    media: v2?.media ?? defaultThemeConfig.media,
-    radius: v2?.radius ?? defaultThemeConfig.radius,
-    shadow: v2?.shadow ?? defaultThemeConfig.shadow,
-    space: v2?.space ?? defaultThemeConfig.space
-  };
-}
-const cache$4 = /* @__PURE__ */ new WeakMap();
-function v2_v0(v2, v3) {
-  const cachedTheme = cache$4.get(v2);
-  if (cachedTheme) return cachedTheme;
-  const {
-    avatar,
-    button,
-    color,
-    container,
-    font: fonts,
-    input,
-    media,
-    radius,
-    shadow: shadows,
-    space,
-    style: styles
-  } = v2;
-  return {
-    _version: 0,
-    avatar,
-    button,
-    container,
-    color: {
-      light: {
-        transparent: themeColor_v2_v0(color.light.transparent),
-        default: themeColor_v2_v0(color.light.default),
-        primary: themeColor_v2_v0(color.light.primary),
-        positive: themeColor_v2_v0(color.light.positive),
-        caution: themeColor_v2_v0(color.light.caution),
-        critical: themeColor_v2_v0(color.light.critical)
-      },
-      dark: {
-        transparent: themeColor_v2_v0(color.dark.transparent),
-        default: themeColor_v2_v0(color.dark.default),
-        primary: themeColor_v2_v0(color.dark.primary),
-        positive: themeColor_v2_v0(color.dark.positive),
-        caution: themeColor_v2_v0(color.dark.caution),
-        critical: themeColor_v2_v0(color.dark.critical)
-      }
-    },
-    focusRing: input.text.focusRing,
-    fonts,
-    input,
-    media,
-    radius,
-    shadows,
-    space,
-    styles,
-    v2,
-    v3
-  };
-}
-function themeColor_v2_v0(color_v2) {
-  return {
-    base: {
-      bg: color_v2.bg,
-      fg: color_v2.fg,
-      border: color_v2.border,
-      focusRing: color_v2.focusRing,
-      shadow: color_v2.shadow
-    },
-    button: color_v2.button,
-    card: color_v2.selectable.default,
-    dark: color_v2._dark,
-    input: {
-      default: inputStatesThemeColor_v2_v0(color_v2.input.default),
-      invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid)
-    },
-    muted: {
-      ...color_v2.button.ghost,
-      transparent: color_v2.button.ghost.default
-    },
-    solid: {
-      ...color_v2.button.default,
-      transparent: color_v2.button.default.default
-    },
-    selectable: color_v2.selectable,
-    spot: {
-      gray: color_v2.avatar.gray.bg,
-      blue: color_v2.avatar.blue.bg,
-      purple: color_v2.avatar.purple.bg,
-      magenta: color_v2.avatar.magenta.bg,
-      red: color_v2.avatar.red.bg,
-      orange: color_v2.avatar.orange.bg,
-      yellow: color_v2.avatar.yellow.bg,
-      green: color_v2.avatar.green.bg,
-      cyan: color_v2.avatar.cyan.bg
-    },
-    syntax: color_v2.syntax
-  };
-}
-function inputStatesThemeColor_v2_v0(t) {
-  return {
-    enabled: inputStateThemeColor_v2_v0(t.enabled),
-    disabled: inputStateThemeColor_v2_v0(t.disabled),
-    readOnly: inputStateThemeColor_v2_v0(t.readOnly),
-    hovered: inputStateThemeColor_v2_v0(t.hovered)
-  };
-}
-function inputStateThemeColor_v2_v0(t) {
-  return {
-    bg: t.bg,
-    bg2: t.muted.bg,
-    border: t.border,
-    fg: t.fg,
-    placeholder: t.placeholder
-  };
-}
-function buildTheme(_config) {
-  const v3 = buildTheme_v3({
-    v2: _config
-  });
-  return v2_v0(v3_v2(v3), v3);
-}
-function mixChannel(b, s, weight) {
-  const delta = (s - b) * weight;
-  return b + delta;
-}
-function mix(b, s, weight) {
-  return {
-    r: mixChannel(b.r, s.r, weight),
-    g: mixChannel(b.g, s.g, weight),
-    b: mixChannel(b.b, s.b, weight)
-  };
-}
-function multiplyChannel(b, s) {
-  return b * s;
-}
-function multiply(b, s) {
-  return {
-    r: multiplyChannel(b.r / 255, s.r / 255) * 255,
-    g: multiplyChannel(b.g / 255, s.g / 255) * 255,
-    b: multiplyChannel(b.b / 255, s.b / 255) * 255
-  };
-}
-function screenChannel(b, s) {
-  return b + s - b * s;
-}
-function screen(b, s) {
-  return {
-    r: screenChannel(b.r / 255, s.r / 255) * 255,
-    g: screenChannel(b.g / 255, s.g / 255) * 255,
-    b: screenChannel(b.b / 255, s.b / 255) * 255
-  };
-}
-function clamp(a, min = 0, max = 1) {
-  return Math.min(max, Math.max(min, a));
-}
-function round(value) {
-  return Math.round(value);
-}
-function hexToRgb(hex) {
-  if (hex.length === 4) {
-    const hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
-    return {
-      r: parseInt(hexR + hexR, 16),
-      g: parseInt(hexG + hexG, 16),
-      b: parseInt(hexB + hexB, 16)
-    };
-  }
-  return {
-    r: parseInt(hex.slice(1, 3), 16),
-    g: parseInt(hex.slice(3, 5), 16),
-    b: parseInt(hex.slice(5, 7), 16)
-  };
-}
-function rgbaToRGBA(rgba2) {
-  const values = rgba2.replace(/rgba\(|\)/g, "").split(",");
-  return {
-    r: parseInt(values[0]),
-    g: parseInt(values[1]),
-    b: parseInt(values[2]),
-    a: parseFloat(values[3])
-  };
-}
-function rgbToHex(color) {
-  const r = round(clamp(Math.round(color.r), 0, 255)), g = round(clamp(Math.round(color.g), 0, 255)), b = round(clamp(Math.round(color.b), 0, 255));
-  return "a" in color ? `rgba(${r},${g},${b},${color.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
-}
-function rgbToHsl({
-  r,
-  g,
-  b
-}) {
-  r /= 255, g /= 255, b /= 255;
-  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
-  let h = 0, s = 0, l = 0;
-  return delta == 0 ? h = 0 : cmax == r ? h = (g - b) / delta % 6 : cmax == g ? h = (b - r) / delta + 2 : h = (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), {
-    h,
-    s,
-    l
-  };
-}
-function hslToRgb(hsl) {
-  const s = hsl.s / 100, l = hsl.l / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1)), m = l - c / 2;
-  let r = 0, g = 0, b = 0;
-  return 0 <= hsl.h && hsl.h < 60 ? (r = c, g = x, b = 0) : 60 <= hsl.h && hsl.h < 120 ? (r = x, g = c, b = 0) : 120 <= hsl.h && hsl.h < 180 ? (r = 0, g = c, b = x) : 180 <= hsl.h && hsl.h < 240 ? (r = 0, g = x, b = c) : 240 <= hsl.h && hsl.h < 300 ? (r = x, g = 0, b = c) : 300 <= hsl.h && hsl.h < 360 && (r = c, g = 0, b = x), {
-    r: Math.round((r + m) * 255),
-    g: Math.round((g + m) * 255),
-    b: Math.round((b + m) * 255)
-  };
-}
-const HEX_CHARS = "0123456789ABCDEFabcdef", HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
-function isHexChars(str) {
-  for (const c of str)
-    if (HEX_CHARS.indexOf(c) === -1)
-      return !1;
-  return !0;
-}
-function isHex(str) {
-  return str[0] !== "#" || !(str.length === 4 || str.length === 7) ? !1 : isHexChars(str.slice(1));
-}
-function parseHsl(str) {
-  const res = HSL_RE.exec(str);
-  if (!res)
-    throw new Error(`parseHsl: string is not a HSL color: "${str}"`);
-  return {
-    h: parseInt(res[1]),
-    s: parseFloat(res[3]),
-    l: parseFloat(res[5])
-  };
-}
-function parseColor(color) {
-  if (!color) return {
-    r: 0,
-    g: 0,
-    b: 0
-  };
-  if (typeof color != "string")
-    throw new Error("parseColor: expected a string");
-  if (isHex(color))
-    return hexToRgb(color);
-  if (color.startsWith("hsl("))
-    return hslToRgb(parseHsl(color));
-  if (color.startsWith("rgba("))
-    return rgbaToRGBA(color);
-  throw new Error(`parseColor: unexpected color format: "${color}"`);
-}
-function getContrastRatio(bg, fg) {
-  const rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
-  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
-}
-function rgb_lrgb({
-  r,
-  g,
-  b
-}) {
-  return [rgb_lrgb1(r / 255), rgb_lrgb1(g / 255), rgb_lrgb1(b / 255)];
-}
-function rgb_lrgb1(v) {
-  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
-}
-function lrgb_luminance([r, g, b]) {
-  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-}
-function rgba(color, a) {
-  if (typeof color == "string" && color.startsWith("var("))
-    return `color-mix(in srgb, transparent, ${color} ${a * 100}%)`;
-  const rgb = parseColor(color);
-  return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
-}
-const COLOR_CONFIG_STATE_KEYS = ["_hue", "bg", "fg", "border", "focusRing", "muted/fg", "accent/fg", "link/fg", "code/bg", "code/fg", "skeleton/from", "skeleton/to", "status/dot", "status/icon"], COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
-function parseTokenKey(str) {
-  const segments = str.split("/"), segment0 = segments.shift() || "";
-  if (isColorConfigBaseTone(segment0)) {
-    const key = segments.join("/");
-    if (isColorConfigBaseKey(key))
-      return {
-        type: "base",
-        tone: segment0,
-        key
-      };
-    if (isColorConfigBlendKey(key))
-      return {
-        type: "base",
-        tone: segment0,
-        key
-      };
-  }
-  if (segment0 === "button") {
-    const segment1 = segments.shift() || "";
-    if (isColorConfigStateTone(segment1)) {
-      const segment2 = segments.shift() || "";
-      if (isColorButtonMode(segment2)) {
-        const key = segments.join("/");
-        if (isColorConfigStateKey(key))
-          return {
-            type: "button",
-            tone: segment1,
-            mode: segment2,
-            key
-          };
-        if (isColorConfigBlendKey(key))
-          return {
-            type: "button",
-            tone: segment1,
-            mode: segment2,
-            key
-          };
-      }
-    }
-  }
-}
-function isColorMixPercentValue(str) {
-  return /^\d+%$/.test(str);
-}
-function parseTokenValue(str) {
-  const segments = str.split("/");
-  let nextSegment = segments.shift() || "";
-  const [segment0, segment0mix] = nextSegment.split(" ");
-  if (isColorTintKey(segment0)) {
-    const tint = segment0, segment1 = segments.shift() || "";
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
-      return {
-        type: "color",
-        tint,
-        mix: mix2
-      };
-    }
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1);
-      return {
-        type: "color",
-        tint,
-        opacity
-      };
-    }
-    return {
-      type: "color",
-      tint
-    };
-  }
-  if (isColorValue(segment0)) {
-    const key = segment0, segment1 = segments.shift() || "";
-    if (isColorMixPercentValue(segment0mix)) {
-      const mix2 = Number(segment0mix.slice(0, -1)) / 100;
-      return {
-        type: "color",
-        key,
-        mix: mix2
-      };
-    }
-    if (isColorOpacityValue(segment1)) {
-      const opacity = Number(segment1);
-      return {
-        type: "color",
-        key,
-        opacity
-      };
-    }
-    return {
-      type: "color",
-      key
-    };
-  }
-  if (isColorHueKey(segment0)) {
-    const hue = segment0;
-    nextSegment = segments.shift() || "";
-    const [segment1, segment1mix] = nextSegment.split(" ");
-    if (isColorTintKey(segment1)) {
-      const tint = segment1, segment2 = segments.shift() || "";
-      if (isColorMixPercentValue(segment1mix)) {
-        const mix2 = Number(segment1mix.slice(0, -1)) / 100;
-        return {
-          type: "color",
-          hue,
-          tint,
-          mix: mix2
-        };
-      }
-      if (isColorOpacityValue(segment2)) {
-        const opacity = Number(segment2);
-        return {
-          type: "color",
-          hue,
-          tint,
-          opacity
-        };
-      }
-      return {
-        type: "color",
-        hue,
-        tint
-      };
-    }
-    return {
-      type: "hue",
-      value: hue
-    };
-  }
-  if (isColorBlendModeValue(segment0))
-    return {
-      type: "blendMode",
-      value: segment0
-    };
-}
-function isColorConfigBaseTone(str) {
-  return COLOR_CONFIG_CARD_TONES.includes(str);
-}
-function isColorConfigBaseKey(str) {
-  return COLOR_CONFIG_CARD_KEYS.includes(str);
-}
-function isColorConfigStateKey(str) {
-  return COLOR_CONFIG_STATE_KEYS.includes(str);
-}
-function isColorConfigStateTone(str) {
-  return COLOR_CONFIG_STATE_TONES.includes(str);
-}
-function isColorConfigBlendKey(str) {
-  return COLOR_CONFIG_BLEND_KEYS.includes(str);
-}
-function isColorTokenValue(str) {
-  return parseTokenValue(str)?.type === "color" || parseTokenValue(str)?.type === "hue";
-}
-function isColorValue(str) {
-  return str === "black" || str === "white";
-}
-function isColorOpacityValue(str) {
-  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
-}
-function is_v2(themeProp) {
-  return themeProp._version === 2;
-}
-function themeColor_v0_v2_9(color) {
-  if ("neutral" in color.badge)
-    return color;
-  const colors2 = color;
-  return {
-    ...colors2,
-    badge: {
-      ...colors2.badge,
-      neutral: colors2.badge.default,
-      suggest: colors2.badge.primary
-    },
-    button: {
-      bleed: {
-        ...colors2.button.bleed,
-        neutral: colors2.button.bleed.default,
-        suggest: colors2.button.bleed.primary
-      },
-      default: {
-        ...colors2.button.default,
-        neutral: colors2.button.default.default,
-        suggest: colors2.button.default.primary
-      },
-      ghost: {
-        ...colors2.button.ghost,
-        neutral: colors2.button.ghost.default,
-        suggest: colors2.button.ghost.primary
-      }
-    },
-    selectable: {
-      ...colors2.selectable,
-      neutral: colors2.selectable.default,
-      suggest: colors2.selectable.primary
-    }
-  };
-}
-const cache$3 = /* @__PURE__ */ new WeakMap();
-function themeColor_v0_v2(color_v0) {
-  const cached_v2 = cache$3.get(color_v0);
-  if (cached_v2) return cached_v2;
-  const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
-    _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
-    _dark: color_v0.dark,
-    accent: base.accent,
-    avatar: base.avatar,
-    backdrop: color_v0.base.shadow.ambient,
-    badge: base.badge,
-    bg: color_v0.base.bg,
-    border: color_v0.base.border,
-    button: {
-      default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
-      ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
-      bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
-    },
-    code: base.code,
-    fg: color_v0.base.fg,
-    focusRing: color_v0.base.focusRing,
-    icon: base.muted.fg,
-    input: {
-      default: inputStatesThemeColor_v0_v2(color_v0.input.default),
-      invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
-    },
-    kbd: base.kbd,
-    link: base.link,
-    muted: {
-      ...base.muted,
-      bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
-    },
-    selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
-    shadow: color_v0.base.shadow,
-    skeleton: {
-      from: color_v0.skeleton?.from || color_v0.base.border,
-      to: color_v0.skeleton?.to || color_v0.base.border
-    },
-    syntax: color_v0.syntax
-  };
-  return cache$3.set(color_v0, color_v2), color_v2;
-}
-function stateTonesThemeColor_v0_v2(v0, t) {
-  return {
-    default: {
-      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.default.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
-    },
-    neutral: {
-      enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.default.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
-    },
-    primary: {
-      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
-    },
-    suggest: {
-      enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.primary.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
-    },
-    positive: {
-      enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.positive.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
-    },
-    caution: {
-      enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.caution.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
-    },
-    critical: {
-      enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
-      hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
-      pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
-      selected: stateThemeColor_v0_v2(v0, t.critical.selected),
-      disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
-    }
-  };
-}
-function stateThemeColor_v0_v2(v0, state) {
-  return {
-    ...state,
-    avatar: {
-      gray: {
-        bg: v0.spot.gray,
-        fg: v0.base.bg
-      },
-      blue: {
-        bg: v0.spot.blue,
-        fg: v0.base.bg
-      },
-      purple: {
-        bg: v0.spot.purple,
-        fg: v0.base.bg
-      },
-      magenta: {
-        bg: v0.spot.magenta,
-        fg: v0.base.bg
-      },
-      red: {
-        bg: v0.spot.red,
-        fg: v0.base.bg
-      },
-      orange: {
-        bg: v0.spot.orange,
-        fg: v0.base.bg
-      },
-      yellow: {
-        bg: v0.spot.yellow,
-        fg: v0.base.bg
-      },
-      green: {
-        bg: v0.spot.green,
-        fg: v0.base.bg
-      },
-      cyan: {
-        bg: v0.spot.cyan,
-        fg: v0.base.bg
-      }
-    },
-    badge: {
-      default: {
-        bg: v0.muted.default.enabled.bg,
-        fg: v0.muted.default.enabled.fg,
-        dot: v0.muted.default.enabled.muted.fg,
-        icon: v0.muted.default.enabled.muted.fg
-      },
-      neutral: {
-        bg: v0.muted.transparent.enabled.bg,
-        fg: v0.muted.transparent.enabled.fg,
-        dot: v0.muted.transparent.enabled.muted.fg,
-        icon: v0.muted.transparent.enabled.muted.fg
-      },
-      primary: {
-        bg: v0.muted.primary.enabled.bg,
-        fg: v0.muted.primary.enabled.fg,
-        dot: v0.muted.primary.enabled.muted.fg,
-        icon: v0.muted.primary.enabled.muted.fg
-      },
-      suggest: {
-        bg: v0.muted.primary.enabled.bg,
-        fg: v0.muted.primary.enabled.fg,
-        dot: v0.muted.primary.enabled.muted.fg,
-        icon: v0.muted.primary.enabled.muted.fg
-      },
-      positive: {
-        bg: v0.muted.positive.enabled.bg,
-        fg: v0.muted.positive.enabled.fg,
-        dot: v0.muted.positive.enabled.muted.fg,
-        icon: v0.muted.positive.enabled.muted.fg
-      },
-      caution: {
-        bg: v0.muted.caution.enabled.bg,
-        fg: v0.muted.caution.enabled.fg,
-        dot: v0.muted.caution.enabled.muted.fg,
-        icon: v0.muted.caution.enabled.muted.fg
-      },
-      critical: {
-        bg: v0.muted.critical.enabled.bg,
-        fg: v0.muted.critical.enabled.fg,
-        dot: v0.muted.critical.enabled.muted.fg,
-        icon: v0.muted.critical.enabled.muted.fg
-      }
-    },
-    kbd: {
-      bg: v0.muted.default.enabled.bg,
-      fg: v0.muted.default.enabled.fg,
-      border: v0.muted.default.enabled.border
-    },
-    muted: {
-      ...v0.muted.default.enabled.muted,
-      bg: state.bg2 || state.bg
-    },
-    skeleton: {
-      from: state.skeleton?.from || state.border,
-      to: state.skeleton?.to || state.border
-    }
-  };
-}
-function inputStatesThemeColor_v0_v2(states) {
-  return {
-    enabled: inputStateThemeColor_v0_v2(states.enabled),
-    disabled: inputStateThemeColor_v0_v2(states.disabled),
-    readOnly: inputStateThemeColor_v0_v2(states.readOnly),
-    hovered: inputStateThemeColor_v0_v2(states.hovered)
-  };
-}
-function inputStateThemeColor_v0_v2(state) {
-  return {
-    bg: state.bg,
-    border: state.border,
-    fg: state.fg,
-    muted: {
-      bg: state.bg2
-    },
-    placeholder: state.placeholder
-  };
-}
-const cache$2 = /* @__PURE__ */ new WeakMap();
-function v0_v2(v0) {
-  if (v0.v2) return v0.v2;
-  const cached_v2 = cache$2.get(v0);
-  if (cached_v2) return cached_v2;
-  const {
-    avatar,
-    button,
-    color,
-    container,
-    fonts: font,
-    input,
-    layer,
-    media,
-    radius,
-    shadows: shadow,
-    space,
-    styles: style
-  } = v0, v2 = {
-    _version: 2,
-    avatar: {
-      ...defaultThemeConfig.avatar,
-      ...avatar
-    },
-    button: {
-      ...defaultThemeConfig.button,
-      ...button
-    },
-    card: defaultThemeConfig.card,
-    color: {
-      light: {
-        transparent: themeColor_v0_v2(color.light.transparent),
-        default: themeColor_v0_v2(color.light.default),
-        neutral: themeColor_v0_v2(color.light.transparent),
-        primary: themeColor_v0_v2(color.light.primary),
-        suggest: themeColor_v0_v2(color.light.primary),
-        positive: themeColor_v0_v2(color.light.positive),
-        caution: themeColor_v0_v2(color.light.caution),
-        critical: themeColor_v0_v2(color.light.critical)
-      },
-      dark: {
-        transparent: themeColor_v0_v2(color.dark.transparent),
-        default: themeColor_v0_v2(color.dark.default),
-        neutral: themeColor_v0_v2(color.dark.transparent),
-        primary: themeColor_v0_v2(color.dark.primary),
-        suggest: themeColor_v0_v2(color.dark.primary),
-        positive: themeColor_v0_v2(color.dark.positive),
-        caution: themeColor_v0_v2(color.dark.caution),
-        critical: themeColor_v0_v2(color.dark.critical)
-      }
-    },
-    container,
-    font,
-    input: {
-      ...defaultThemeConfig.input,
-      ...input,
-      checkbox: {
-        ...defaultThemeConfig.input.checkbox,
-        ...input.checkbox
-      },
-      radio: {
-        ...defaultThemeConfig.input.radio,
-        ...input.radio
-      },
-      switch: {
-        ...defaultThemeConfig.input.switch,
-        ...input.switch
-      }
-    },
-    layer: layer ?? defaultThemeConfig.layer,
-    media,
-    radius,
-    shadow,
-    space,
-    style
-  };
-  return cache$2.set(v0, v2), v2;
-}
-const cache$1 = /* @__PURE__ */ new Map();
-function getScopedTheme(themeProp, scheme, tone) {
-  const cachedTheme = _getCachedTheme(themeProp, scheme, tone);
-  if (cachedTheme) return cachedTheme;
-  const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), colorScheme_v0 = v0.color[scheme] || v0.color.light, color_v0 = colorScheme_v0[tone] || colorScheme_v0.default, layer_v0 = v0.layer || defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2 = colorScheme_v2[tone] || colorScheme_v2.default, color_v2_9 = themeColor_v0_v2_9(color_v2), layer_v2 = v2.layer || defaultThemeConfig.layer, theme = {
-    sanity: {
-      ...v0,
-      color: color_v0,
-      layer: layer_v0,
-      v2: {
-        ...v2,
-        _resolved: !0,
-        color: color_v2_9,
-        layer: layer_v2
-      }
-    }
-  };
-  return _setCachedTheme(themeProp, scheme, tone, theme), theme;
-}
-function _getCachedTheme(rootTheme, scheme, tone) {
-  const schemeCache = cache$1.get(scheme);
-  if (!schemeCache) return;
-  const toneCache = schemeCache.get(tone);
-  if (toneCache)
-    return toneCache.get(rootTheme);
-}
-function _setCachedTheme(rootTheme, scheme, tone, theme) {
-  cache$1.has(scheme) || cache$1.set(scheme, /* @__PURE__ */ new Map());
-  const schemeCache = cache$1.get(scheme);
-  schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
-}
-const cache = /* @__PURE__ */ new WeakMap();
-function getTheme_v2(theme) {
-  if (theme.sanity.v2?._resolved) return theme.sanity.v2;
-  const cached_v2 = cache.get(theme);
-  if (cached_v2) return cached_v2;
-  const v2 = {
-    _version: 2,
-    _resolved: !0,
-    avatar: {
-      ...defaultThemeConfig.avatar,
-      ...theme.sanity.avatar
-    },
-    button: {
-      ...defaultThemeConfig.button,
-      ...theme.sanity.button
-    },
-    card: defaultThemeConfig.card,
-    color: themeColor_v0_v2(theme.sanity.color),
-    container: theme.sanity.container,
-    font: theme.sanity.fonts,
-    input: {
-      ...defaultThemeConfig.input,
-      ...theme.sanity.input,
-      checkbox: {
-        ...defaultThemeConfig.input.checkbox,
-        ...theme.sanity.input.checkbox
-      },
-      radio: {
-        ...defaultThemeConfig.input.radio,
-        ...theme.sanity.input.radio
-      },
-      switch: {
-        ...defaultThemeConfig.input.switch,
-        ...theme.sanity.input.switch
-      }
-    },
-    layer: theme.sanity.layer ?? defaultThemeConfig.layer,
-    media: theme.sanity.media,
-    radius: theme.sanity.radius,
-    shadow: theme.sanity.shadows,
-    space: theme.sanity.space,
-    style: theme.sanity.styles
-  };
-  return cache.set(theme, v2), v2;
-}
-export {
-  AVATAR_SIZE,
-  COLOR_CONFIG_AVATAR_COLORS,
-  COLOR_CONFIG_BLEND_KEYS,
-  COLOR_CONFIG_CARD_KEYS,
-  COLOR_CONFIG_CARD_TONES,
-  COLOR_CONFIG_INPUT_MODES,
-  COLOR_CONFIG_INPUT_STATES,
-  COLOR_CONFIG_STATES,
-  COLOR_CONFIG_STATE_KEYS,
-  COLOR_CONFIG_STATE_TONES,
-  CONTAINER,
-  FONT_CODE_SIZE,
-  FONT_HEADING_SIZE,
-  FONT_LABEL_SIZE,
-  FONT_TEXT_SIZE,
-  HUES,
-  RADIUS,
-  SHADOW,
-  SPACE,
-  THEME_COLOR_AVATAR_COLORS,
-  THEME_COLOR_BLEND_MODES,
-  THEME_COLOR_BUTTON_MODES,
-  THEME_COLOR_CARD_TONES,
-  THEME_COLOR_INPUT_MODES,
-  THEME_COLOR_INPUT_STATES,
-  THEME_COLOR_SCHEMES,
-  THEME_COLOR_STATES,
-  THEME_COLOR_STATE_TONES,
-  TINTS,
-  buildColor_v3,
-  buildTheme,
-  buildTheme_v3,
-  createColorTheme,
-  defaultTokens,
-  getContrastRatio,
-  getScopedTheme,
-  getTheme_v2,
-  hexToRgb,
-  hslToRgb,
-  isColorBlendModeValue,
-  isColorButtonMode,
-  isColorConfigBaseKey,
-  isColorConfigBaseTone,
-  isColorConfigBlendKey,
-  isColorConfigStateKey,
-  isColorConfigStateTone,
-  isColorHueKey,
-  isColorOpacityValue,
-  isColorTintKey,
-  isColorTokenValue,
-  isColorValue,
-  mix,
-  multiply,
-  parseColor,
-  parseTokenKey,
-  parseTokenValue,
-  renderColor,
-  resolveTokens,
-  rgbToHex,
-  rgbToHsl,
-  rgba,
-  rgbaToRGBA,
-  screen
-};
-//# sourceMappingURL=theme.mjs.map