@sanity/ui 2.0.10 → 2.0.11

package/dist/theme.mjs

@@ -0,0 +1,3348 @@
+import { COLOR_HUES, COLOR_TINTS, color } from "@sanity/color";
+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 color2 = colors[tone];
+    return state === "hovered" ? {
+      bg: dark ? color2.light : color2.dark,
+      bg2: dark ? color2.light : color2.dark,
+      border: dark ? color2.lighter : color2.darker,
+      fg: dark ? color2.darkest : color2.lightest,
+      icon: dark ? color2.darkest : color2.lightest,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    } : {
+      bg: color2.base,
+      bg2: color2.base,
+      border: dark ? color2.light : color2.dark,
+      fg: dark ? color2.darkest : color2.lightest,
+      icon: dark ? color2.darkest : color2.lightest,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    };
+  },
+  muted: ({ base, dark, state, tone }) => {
+    const color2 = colors[tone];
+    return state === "hovered" ? {
+      bg: dark ? color2.darker : color2.lighter,
+      bg2: dark ? color2.darker : color2.lighter,
+      border: dark ? color2.lighter : color2.darker,
+      fg: dark ? color2.lightest : color2.darkest,
+      icon: dark ? color2.lightest : color2.darkest,
+      muted: {
+        fg: black
+      },
+      accent: {
+        fg: black
+      },
+      link: {
+        fg: black
+      },
+      code: {
+        bg: black,
+        fg: black
+      },
+      skeleton: base.skeleton
+    } : {
+      bg: dark ? color2.darkest : color2.lightest,
+      bg2: dark ? color2.darkest : color2.lightest,
+      border: dark ? color2.darker : color2.lighter,
+      fg: dark ? color2.lighter : color2.darker,
+      icon: dark ? color2.lighter : color2.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 BORDER_WIDTH = 1, OUTLINE_WIDTH = 0.5, defaultThemeConfig = {
+  _version: 2,
+  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: BORDER_WIDTH },
+    focusRing: { offset: -1, width: 1 }
+  },
+  card: {
+    border: { width: BORDER_WIDTH },
+    focusRing: { offset: -1, width: 1 },
+    shadow: { outline: OUTLINE_WIDTH }
+  },
+  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, 6, 9, 12, 21],
+  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: BORDER_WIDTH
+    },
+    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 }
+    }
+  },
+  style: {
+    button: {
+      root: {
+        transition: "background-color 100ms,border-color 100ms,color 100ms"
+      }
+    }
+    // card: {
+    //   root: {
+    //     transition: 'background-color 100ms,border-color 100ms,color 100ms',
+    //   },
+    // },
+  }
+}, 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',
+    weights: {
+      regular: 700,
+      medium: 800,
+      semibold: 900,
+      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
+      },
+      {
+        ascenderHeight: 8,
+        descenderHeight: 8,
+        fontSize: 27,
+        iconSize: 41,
+        lineHeight: 35,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 9.5,
+        descenderHeight: 8.5,
+        fontSize: 33,
+        iconSize: 49,
+        lineHeight: 41,
+        letterSpacing: 0
+      },
+      {
+        ascenderHeight: 10.5,
+        descenderHeight: 9.5,
+        fontSize: 38,
+        iconSize: 53,
+        lineHeight: 47,
+        letterSpacing: 0
+      }
+    ]
+  },
+  label: {
+    family: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Liberation Sans", system-ui, sans-serif',
+    weights: {
+      regular: 600,
+      medium: 700,
+      semibold: 800,
+      bold: 900
+    },
+    sizes: [
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        fontSize: 8.1,
+        iconSize: 13,
+        lineHeight: 10,
+        letterSpacing: 0.5
+      },
+      {
+        ascenderHeight: 2,
+        descenderHeight: 2,
+        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: 2,
+        descenderHeight: 2,
+        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
+      }
+    ]
+  }
+}, cache$4 = /* @__PURE__ */ new WeakMap();
+function themeColor_v0_v2(color_v0) {
+  var _a, _b, _c;
+  const cached_v2 = cache$4.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: ((_a = color_v0.selectable) == null ? void 0 : _a.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: ((_b = color_v0.skeleton) == null ? void 0 : _b.from) || color_v0.base.border,
+      to: ((_c = color_v0.skeleton) == null ? void 0 : _c.to) || color_v0.base.border
+    },
+    syntax: color_v0.syntax
+  };
+  return cache$4.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)
+    },
+    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)
+    },
+    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) {
+  var _a, _b;
+  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
+      },
+      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
+      },
+      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: ((_a = state.skeleton) == null ? void 0 : _a.from) || state.border,
+      to: ((_b = state.skeleton) == null ? void 0 : _b.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$3 = /* @__PURE__ */ new WeakMap();
+function getTheme_v2(theme) {
+  var _a, _b;
+  if ((_a = theme.sanity.v2) != null && _a._resolved)
+    return theme.sanity.v2;
+  const cached_v2 = cache$3.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: (_b = theme.sanity.layer) != null ? _b : defaultThemeConfig.layer,
+    media: theme.sanity.media,
+    radius: theme.sanity.radius,
+    shadow: theme.sanity.shadows,
+    space: theme.sanity.space,
+    style: theme.sanity.styles
+  };
+  return cache$3.set(theme, v2), v2;
+}
+function is_v0(themeProp) {
+  return themeProp._version === 0;
+}
+function is_v2(themeProp) {
+  return themeProp._version === 2;
+}
+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: color2,
+    container,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    focusRing: _unused_focusRing,
+    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(color2.light.transparent),
+        default: themeColor_v0_v2(color2.light.default),
+        primary: themeColor_v0_v2(color2.light.primary),
+        positive: themeColor_v0_v2(color2.light.positive),
+        caution: themeColor_v0_v2(color2.light.caution),
+        critical: themeColor_v0_v2(color2.light.critical)
+      },
+      dark: {
+        transparent: themeColor_v0_v2(color2.dark.transparent),
+        default: themeColor_v0_v2(color2.dark.default),
+        primary: themeColor_v0_v2(color2.dark.primary),
+        positive: themeColor_v0_v2(color2.dark.positive),
+        caution: themeColor_v0_v2(color2.dark.caution),
+        critical: themeColor_v0_v2(color2.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 != null ? layer : defaultThemeConfig.layer,
+    media,
+    radius,
+    shadow,
+    space,
+    style
+  };
+  return cache$2.set(v0, v2), v2;
+}
+const cache$1 = /* @__PURE__ */ new WeakMap();
+function v2_v0(v2) {
+  const cachedTheme = cache$1.get(v2);
+  if (cachedTheme)
+    return cachedTheme;
+  const {
+    avatar,
+    button,
+    color: color2,
+    container,
+    font: fonts,
+    input,
+    media,
+    radius,
+    shadow: shadows,
+    space,
+    style: styles
+  } = v2;
+  return {
+    _version: 0,
+    avatar,
+    button,
+    container,
+    color: {
+      light: {
+        transparent: themeColor_v2_v0(color2.light.transparent),
+        default: themeColor_v2_v0(color2.light.default),
+        primary: themeColor_v2_v0(color2.light.primary),
+        positive: themeColor_v2_v0(color2.light.positive),
+        caution: themeColor_v2_v0(color2.light.caution),
+        critical: themeColor_v2_v0(color2.light.critical)
+      },
+      dark: {
+        transparent: themeColor_v2_v0(color2.dark.transparent),
+        default: themeColor_v2_v0(color2.dark.default),
+        primary: themeColor_v2_v0(color2.dark.primary),
+        positive: themeColor_v2_v0(color2.dark.positive),
+        caution: themeColor_v2_v0(color2.dark.caution),
+        critical: themeColor_v2_v0(color2.dark.critical)
+      }
+    },
+    focusRing: input.text.focusRing,
+    fonts,
+    input,
+    media,
+    radius,
+    shadows,
+    space,
+    styles,
+    v2
+  };
+}
+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
+  };
+}
+const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "primary",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATE_TONES = [
+  "default",
+  "primary",
+  "positive",
+  "caution",
+  "critical"
+], THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"], THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"], THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+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 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) {
+  var _a, _b;
+  return ((_a = parseTokenValue(str)) == null ? void 0 : _a.type) === "color" || ((_b = parseTokenValue(str)) == null ? void 0 : _b.type) === "hue";
+}
+function isColorValue(str) {
+  return str === "black" || str === "white";
+}
+function isColorOpacityValue(str) {
+  return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function compileColorTokenValue(node) {
+  let key = "";
+  return node.key === "black" || node.key === "white" ? key = node.key : key = `${node.hue}/${node.tint}`, node.mix !== void 0 ? `${key} ${node.mix * 100}%` : (node.opacity !== void 0 && (key += `/${node.opacity}`), key);
+}
+const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
+function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
+  const { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+  if (!node || node.type !== "color")
+    throw new Error(`Invalid color token: ${value[0]}`);
+  return compileColorTokenValue({ ...node, hue: node.hue || hue });
+}
+const defaultColorTokens = {
+  base: {
+    "*": {
+      _blend: ["multiply", "screen"],
+      accent: {
+        fg: ["purple/600", "purple/400"]
+      },
+      avatar: {
+        "*": {
+          _blend: ["screen", "multiply"],
+          bg: ["500", "400"],
+          fg: ["white", "black"]
+        }
+      },
+      backdrop: ["gray/200/0.5", "black/0.5"],
+      badge: {
+        "*": {
+          bg: ["100", "900"],
+          fg: ["600", "400"],
+          icon: ["500", "500"],
+          dot: ["500", "500"]
+        },
+        positive: {
+          bg: ["200 50%", "900"],
+          fg: ["600", "500"]
+        },
+        caution: {
+          bg: ["200 50%", "900"],
+          fg: ["600", "500"]
+        }
+      },
+      bg: ["50", "950"],
+      border: ["200", "800"],
+      code: {
+        bg: ["50", "950"],
+        fg: ["600", "400"]
+      },
+      fg: ["800", "200"],
+      focusRing: ["blue/500", "blue/500"],
+      icon: ["600", "400"],
+      kbd: {
+        bg: ["white", "black"],
+        fg: ["600", "400"],
+        border: ["200", "800"]
+      },
+      link: {
+        fg: ["blue/600", "blue/300"]
+      },
+      muted: {
+        bg: ["50", "950"],
+        fg: ["700 75%", "300 75%"]
+      },
+      shadow: {
+        outline: ["500/0.3", "500/0.4"],
+        umbra: ["gray/500/0.1", "black/0.2"],
+        penumbra: ["gray/500/0.07", "black/0.14"],
+        ambient: ["gray/500/0.06", "black/0.12"]
+      },
+      skeleton: {
+        from: ["100", "900"],
+        to: ["100 50%", "900 50%"]
+      }
+    },
+    transparent: {
+      bg: ["50", "black"]
+    },
+    default: {
+      bg: ["white", "950"],
+      fg: ["800", "200"],
+      muted: {
+        fg: ["600", "400"]
+      }
+    },
+    primary: { _hue: "blue" },
+    positive: {
+      _hue: "green",
+      shadow: { outline: ["500/0.4", "500/0.4"] }
+    },
+    caution: {
+      _hue: "yellow",
+      shadow: { outline: ["600/0.3", "500/0.4"] }
+    },
+    critical: { _hue: "red" }
+  },
+  button: {
+    default: {
+      "*": {
+        "*": {
+          _blend: ["screen", "multiply"],
+          accent: {
+            fg: ["purple/300", "purple/700"]
+          },
+          avatar: {
+            "*": {
+              _blend: ["multiply", "screen"],
+              bg: ["white", "black"],
+              fg: ["black", "white"]
+            }
+          },
+          badge: {
+            "*": {
+              bg: ["900", "100"],
+              fg: ["400", "600"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
+          bg: ["500", "400"],
+          border: ["500/0", "400/0"],
+          code: {
+            bg: ["500 20%", "400 20%"],
+            fg: ["200", "600"]
+          },
+          fg: ["white", "black"],
+          icon: ["100 70%", "900 70%"],
+          kbd: {
+            bg: ["black", "white"],
+            fg: ["200", "600"],
+            border: ["800", "200"]
+          },
+          link: {
+            fg: ["blue/200", "blue/600"]
+          },
+          muted: {
+            bg: ["950", "50"],
+            fg: ["100 70%", "900 70%"]
+          },
+          skeleton: {
+            from: ["900", "100"],
+            to: ["900 50%", "100 50%"]
+          }
+        },
+        hovered: {
+          bg: ["700", "300"],
+          border: ["700/0", "300/0"]
+        },
+        pressed: {
+          bg: ["700", "300"]
+        },
+        selected: {
+          bg: ["700", "300"]
+        },
+        disabled: {
+          _hue: "gray",
+          accent: {
+            fg: ["100 70%", "900 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["gray/700", "gray/300"],
+              fg: ["white", "black"],
+              dot: ["white", "black"],
+              icon: ["white", "black"]
+            }
+          },
+          bg: ["200", "800"],
+          kbd: {
+            bg: ["black", "white"],
+            fg: ["white", "black"],
+            border: ["700", "300"]
+          },
+          link: {
+            fg: ["100 70%", "900 70%"]
+          }
+        }
+      },
+      default: {
+        "*": {
+          bg: ["800", "200"],
+          muted: {
+            bg: ["950", "50"],
+            fg: ["400", "600"]
+          }
+        },
+        hovered: {
+          bg: ["900", "100"]
+        },
+        pressed: {
+          bg: ["black", "white"]
+        },
+        selected: {
+          bg: ["black", "white"]
+        }
+      }
+    },
+    ghost: {
+      "*": {
+        "*": {
+          _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700 60%", "purple/300 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["100", "900"],
+              fg: ["600", "400"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
+          bg: ["50", "950"],
+          border: ["100", "900"],
+          code: {
+            bg: ["500 10%", "400 10%"],
+            fg: ["700 60%", "400 60%"]
+          },
+          fg: ["600", "400"],
+          icon: ["700 60%", "300 60%"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["600", "400"],
+            border: ["200", "800"]
+          },
+          link: {
+            fg: ["blue/700 60%", "blue/300 60%"]
+          },
+          muted: {
+            bg: ["100", "950"],
+            fg: ["700 60%", "300 60%"]
+          },
+          skeleton: {
+            from: ["100", "900"],
+            to: ["100 50%", "900 50%"]
+          }
+        },
+        hovered: {
+          bg: ["100", "900"],
+          fg: ["700", "300"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"]
+        },
+        disabled: {
+          _hue: "gray",
+          accent: {
+            fg: ["200", "800"]
+          },
+          badge: {
+            "*": {
+              _hue: "gray",
+              bg: ["50", "950"],
+              fg: ["gray/200", "gray/800"],
+              dot: ["gray/200", "gray/800"],
+              icon: ["gray/200", "gray/800"]
+            }
+          },
+          border: ["100", "900"],
+          code: {
+            bg: ["50", "950"],
+            fg: ["200", "800"]
+          },
+          fg: ["200", "800"],
+          icon: ["200", "800"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["200", "800"],
+            border: ["100", "900"]
+          },
+          link: {
+            fg: ["200", "800"]
+          },
+          muted: {
+            fg: ["200", "800"]
+          }
+        }
+      },
+      positive: {
+        "*": {
+          border: ["600 20%", "800"]
+        }
+      },
+      caution: {
+        "*": {
+          border: ["600 20%", "800"]
+        }
+      }
+    },
+    bleed: {
+      "*": {
+        "*": {
+          _blend: ["multiply", "screen"],
+          accent: {
+            fg: ["purple/700 70%", "purple/300 70%"]
+          },
+          badge: {
+            "*": {
+              bg: ["100", "900"],
+              fg: ["600", "400"],
+              dot: ["500", "500"],
+              icon: ["500", "500"]
+            }
+          },
+          bg: ["white", "black"],
+          border: ["white/0", "black/0"],
+          code: {
+            bg: ["50", "950"],
+            fg: ["700 75%", "300 75%"]
+          },
+          fg: ["700", "300"],
+          icon: ["700 75%", "300 75%"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["700", "300"],
+            border: ["200", "800"]
+          },
+          link: {
+            fg: ["blue/700 70%", "blue/300 70%"]
+          },
+          muted: {
+            bg: ["100", "950"],
+            fg: ["700 75%", "300 75%"]
+          },
+          skeleton: {
+            from: ["100", "900"],
+            to: ["100 50%", "900 50%"]
+          }
+        },
+        hovered: {
+          bg: ["50", "950"],
+          icon: ["700 70%", "400 70%"]
+        },
+        pressed: {
+          bg: ["100", "900"],
+          fg: ["800", "200"],
+          icon: ["800 70%", "200 70%"]
+        },
+        selected: {
+          bg: ["100", "900"],
+          fg: ["800", "200"],
+          icon: ["800 60%", "200 60%"]
+        },
+        disabled: {
+          _hue: "gray",
+          accent: {
+            fg: ["200", "800"]
+          },
+          badge: {
+            "*": {
+              _hue: "gray",
+              bg: ["50", "950"],
+              fg: ["gray/200", "gray/800"],
+              dot: ["gray/200", "gray/800"],
+              icon: ["gray/200", "gray/800"]
+            }
+          },
+          code: {
+            bg: ["50", "950"],
+            fg: ["200", "800"]
+          },
+          fg: ["200", "800"],
+          icon: ["200", "800"],
+          kbd: {
+            bg: ["white", "black"],
+            fg: ["200", "800"],
+            border: ["100", "900"]
+          },
+          link: {
+            fg: ["200", "800"]
+          },
+          muted: {
+            fg: ["200", "800"]
+          }
+        }
+      }
+    }
+  },
+  input: {
+    "*": {
+      "*": {
+        _blend: ["multiply", "screen"],
+        bg: ["white", "black"],
+        border: ["200", "800"],
+        fg: ["black", "200"],
+        muted: {
+          bg: ["50", "950"]
+        },
+        placeholder: ["400", "600 50%"]
+      },
+      hovered: {
+        border: ["300", "700"]
+      },
+      readOnly: {
+        bg: ["50", "950"],
+        border: ["200", "800"],
+        fg: ["800", "200"]
+      },
+      disabled: {
+        fg: ["200", "800"],
+        border: ["100", "900"]
+      }
+    },
+    invalid: {
+      "*": {
+        _hue: "red",
+        bg: ["100", "950"]
+      }
+    }
+  },
+  selectable: {
+    "*": {
+      "*": {
+        _blend: ["multiply", "screen"],
+        accent: {
+          fg: ["purple/700 70%", "purple/300 70%"]
+        },
+        badge: {
+          "*": {
+            bg: ["100", "900"],
+            fg: ["600", "400"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
+          }
+        },
+        bg: ["white", "black"],
+        border: ["200", "800"],
+        code: {
+          bg: ["50", "950"],
+          fg: ["600", "400"]
+        },
+        fg: ["700", "300"],
+        icon: ["700 75%", "300 75%"],
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["600", "400"],
+          border: ["200", "800"]
+        },
+        link: {
+          fg: ["blue/700 70%", "blue/300 70%"]
+        },
+        muted: {
+          bg: ["100", "950"],
+          fg: ["700 75%", "300 75%"]
+        },
+        skeleton: {
+          from: ["100", "900"],
+          to: ["100 50%", "900 50%"]
+        }
+      },
+      hovered: {
+        bg: ["50", "950"]
+      },
+      pressed: {
+        bg: ["100", "900"]
+      },
+      selected: {
+        _blend: ["screen", "multiply"],
+        accent: {
+          fg: ["purple/300", "purple/700"]
+        },
+        avatar: {
+          "*": {
+            _blend: ["multiply", "screen"],
+            bg: ["white", "black"],
+            fg: ["black", "white"]
+          }
+        },
+        badge: {
+          "*": {
+            bg: ["900", "100"],
+            fg: ["400", "600"],
+            dot: ["500", "500"],
+            icon: ["500", "500"]
+          }
+        },
+        bg: ["500", "400"],
+        border: ["500 20%", "400 20%"],
+        code: {
+          bg: ["500 20%", "400 20%"],
+          fg: ["200", "600"]
+        },
+        fg: ["white", "black"],
+        icon: ["100 70%", "900 70%"],
+        kbd: {
+          bg: ["black", "white"],
+          fg: ["200", "600"],
+          border: ["800", "200"]
+        },
+        link: {
+          fg: ["blue/200", "blue/600"]
+        },
+        muted: {
+          bg: ["950", "50"],
+          fg: ["100 70%", "900 70%"]
+        },
+        skeleton: {
+          from: ["900", "100"],
+          to: ["900 50%", "100 50%"]
+        }
+      },
+      disabled: {
+        _hue: "gray",
+        accent: {
+          fg: ["200", "800"]
+        },
+        badge: {
+          "*": {
+            _hue: "gray",
+            bg: ["50", "950"],
+            fg: ["gray/200", "gray/800"],
+            dot: ["gray/200", "gray/800"],
+            icon: ["gray/200", "gray/800"]
+          }
+        },
+        border: ["100", "900"],
+        code: {
+          bg: ["50", "950"],
+          fg: ["200", "800"]
+        },
+        fg: ["200", "800"],
+        icon: ["200", "800"],
+        kbd: {
+          bg: ["white", "black"],
+          fg: ["200", "800"],
+          border: ["100", "900"]
+        },
+        link: {
+          fg: ["200", "800"]
+        },
+        muted: {
+          fg: ["200", "800"]
+        }
+      }
+    },
+    default: {
+      selected: {
+        _hue: "blue"
+      }
+    },
+    critical: {
+      disabled: {
+        bg: ["50 50%", "950 50%"]
+      }
+    }
+  },
+  syntax: {
+    atrule: ["purple/600", "purple/400"],
+    attrName: ["green/600", "green/400"],
+    attrValue: ["yellow/600", "yellow/400"],
+    attribute: ["yellow/600", "yellow/400"],
+    boolean: ["purple/600", "purple/400"],
+    builtin: ["purple/600", "purple/400"],
+    cdata: ["yellow/600", "yellow/400"],
+    char: ["yellow/600", "yellow/400"],
+    class: ["orange/600", "orange/400"],
+    className: ["cyan/600", "cyan/400"],
+    comment: ["gray/400", "gray/600"],
+    constant: ["purple/600", "purple/400"],
+    deleted: ["red/600", "red/400"],
+    entity: ["red/600", "red/400"],
+    function: ["green/600", "green/400"],
+    hexcode: ["blue/600", "blue/400"],
+    id: ["purple/600", "purple/400"],
+    important: ["purple/600", "purple/400"],
+    inserted: ["yellow/600", "yellow/400"],
+    keyword: ["magenta/600", "magenta/400"],
+    number: ["purple/600", "purple/400"],
+    operator: ["magenta/600", "magenta/400"],
+    property: ["blue/600", "blue/400"],
+    pseudoClass: ["yellow/600", "yellow/400"],
+    pseudoElement: ["yellow/600", "yellow/400"],
+    punctuation: ["gray/600", "gray/400"],
+    regex: ["blue/600", "blue/400"],
+    selector: ["red/600", "red/400"],
+    string: ["yellow/600", "yellow/400"],
+    symbol: ["purple/600", "purple/400"],
+    tag: ["red/600", "red/400"],
+    unit: ["orange/600", "orange/400"],
+    url: ["red/600", "red/400"],
+    variable: ["red/600", "red/400"]
+  }
+};
+function isRecord(value) {
+  return !!(value && typeof value == "object" && !Array.isArray(value));
+}
+function merge(...records) {
+  const _records = records.filter(Boolean);
+  return _records.length === 0 ? {} : _records.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 resolveColorTokens(inputTokens) {
+  const tokens = merge(defaultColorTokens, inputTokens);
+  return {
+    base: resolveBaseColorTokens(tokens),
+    button: resolveButtonColorTokens(tokens),
+    input: resolveInputColorTokens(tokens),
+    selectable: resolveSelectableColorTokens(tokens),
+    syntax: tokens.syntax
+  };
+}
+function resolveBaseColorTokens(sparseTokens) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_CARD_TONES)
+    tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
+  return tokens;
+}
+function resolveBaseColorTones(inputTokens, tone) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
+  const spec = merge((_a = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _a["*"], (_b = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _b[tone]), hue = spec._hue || ((_d = (_c = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue) || "gray";
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: {
+      gray: merge({ _hue: "gray" }, (_e = spec.avatar) == null ? void 0 : _e["*"], (_f = spec.avatar) == null ? void 0 : _f.gray),
+      blue: merge({ _hue: "blue" }, (_g = spec.avatar) == null ? void 0 : _g["*"], (_h = spec.avatar) == null ? void 0 : _h.blue),
+      purple: merge({ _hue: "purple" }, (_i = spec.avatar) == null ? void 0 : _i["*"], (_j = spec.avatar) == null ? void 0 : _j.purple),
+      magenta: merge({ _hue: "magenta" }, (_k = spec.avatar) == null ? void 0 : _k["*"], (_l = spec.avatar) == null ? void 0 : _l.magenta),
+      red: merge({ _hue: "red" }, (_m = spec.avatar) == null ? void 0 : _m["*"], (_n = spec.avatar) == null ? void 0 : _n.red),
+      orange: merge({ _hue: "orange" }, (_o = spec.avatar) == null ? void 0 : _o["*"], (_p = spec.avatar) == null ? void 0 : _p.orange),
+      yellow: merge({ _hue: "yellow" }, (_q = spec.avatar) == null ? void 0 : _q["*"], (_r = spec.avatar) == null ? void 0 : _r.yellow),
+      green: merge({ _hue: "green" }, (_s = spec.avatar) == null ? void 0 : _s["*"], (_t = spec.avatar) == null ? void 0 : _t.green),
+      cyan: merge({ _hue: "cyan" }, (_u = spec.avatar) == null ? void 0 : _u["*"], (_v = spec.avatar) == null ? void 0 : _v.cyan)
+    },
+    badge: {
+      default: {
+        _hue: ((_x = (_w = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _w.default) == null ? void 0 : _x._hue) || hue,
+        ...(_y = spec.badge) == null ? void 0 : _y["*"],
+        ...(_z = spec.badge) == null ? void 0 : _z.default
+      },
+      primary: {
+        _hue: ((_B = (_A = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _A.primary) == null ? void 0 : _B._hue) || hue,
+        ...(_C = spec.badge) == null ? void 0 : _C["*"],
+        ...(_D = spec.badge) == null ? void 0 : _D.primary
+      },
+      positive: {
+        _hue: ((_F = (_E = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _E.positive) == null ? void 0 : _F._hue) || hue,
+        ...(_G = spec.badge) == null ? void 0 : _G["*"],
+        ...(_H = spec.badge) == null ? void 0 : _H.positive
+      },
+      caution: {
+        _hue: ((_J = (_I = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _I.caution) == null ? void 0 : _J._hue) || hue,
+        ...(_K = spec.badge) == null ? void 0 : _K["*"],
+        ...(_L = spec.badge) == null ? void 0 : _L.caution
+      },
+      critical: {
+        _hue: ((_N = (_M = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _M.critical) == null ? void 0 : _N._hue) || hue,
+        ...(_O = spec.badge) == null ? void 0 : _O["*"],
+        ...(_P = spec.badge) == null ? void 0 : _P.critical
+      }
+    }
+  };
+}
+function resolveButtonColorTokens(inputTokens) {
+  const tokens = {};
+  for (const mode of THEME_COLOR_BUTTON_MODES)
+    tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode);
+  return tokens;
+}
+function resolveButtonToneColorTokens(inputTokens, mode) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone);
+  return tokens;
+}
+function resolveButtonModeColorTokens(inputTokens, mode, tone) {
+  const tokens = {};
+  for (const state of THEME_COLOR_STATES)
+    tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state);
+  return tokens;
+}
+function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V, _W, _X, _Y, _Z;
+  const spec = merge(
+    (_c = (_b = (_a = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _a[mode]) == null ? void 0 : _b["*"]) == null ? void 0 : _c["*"],
+    (_f = (_e = (_d = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _d[mode]) == null ? void 0 : _e[tone]) == null ? void 0 : _f["*"],
+    (_i = (_h = (_g = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _g[mode]) == null ? void 0 : _h["*"]) == null ? void 0 : _i[state],
+    (_l = (_k = (_j = inputTokens == null ? void 0 : inputTokens.button) == null ? void 0 : _j[mode]) == null ? void 0 : _k[tone]) == null ? void 0 : _l[state]
+  ), hue = spec._hue || ((_n = (_m = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _m[tone]) == null ? void 0 : _n._hue);
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: {
+      gray: merge({ _hue: "gray" }, (_o = spec.avatar) == null ? void 0 : _o["*"], (_p = spec.avatar) == null ? void 0 : _p.gray),
+      blue: merge({ _hue: "blue" }, (_q = spec.avatar) == null ? void 0 : _q["*"], (_r = spec.avatar) == null ? void 0 : _r.blue),
+      purple: merge({ _hue: "purple" }, (_s = spec.avatar) == null ? void 0 : _s["*"], (_t = spec.avatar) == null ? void 0 : _t.purple),
+      magenta: merge({ _hue: "magenta" }, (_u = spec.avatar) == null ? void 0 : _u["*"], (_v = spec.avatar) == null ? void 0 : _v.magenta),
+      red: merge({ _hue: "red" }, (_w = spec.avatar) == null ? void 0 : _w["*"], (_x = spec.avatar) == null ? void 0 : _x.red),
+      orange: merge({ _hue: "orange" }, (_y = spec.avatar) == null ? void 0 : _y["*"], (_z = spec.avatar) == null ? void 0 : _z.orange),
+      yellow: merge({ _hue: "yellow" }, (_A = spec.avatar) == null ? void 0 : _A["*"], (_B = spec.avatar) == null ? void 0 : _B.yellow),
+      green: merge({ _hue: "green" }, (_C = spec.avatar) == null ? void 0 : _C["*"], (_D = spec.avatar) == null ? void 0 : _D.green),
+      cyan: merge({ _hue: "cyan" }, (_E = spec.avatar) == null ? void 0 : _E["*"], (_F = spec.avatar) == null ? void 0 : _F.cyan)
+    },
+    badge: {
+      default: {
+        _hue: (_H = (_G = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _G.default) == null ? void 0 : _H._hue,
+        ...(_I = spec.badge) == null ? void 0 : _I["*"],
+        ...(_J = spec.badge) == null ? void 0 : _J.default
+      },
+      primary: {
+        _hue: (_L = (_K = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _K.primary) == null ? void 0 : _L._hue,
+        ...(_M = spec.badge) == null ? void 0 : _M["*"],
+        ...(_N = spec.badge) == null ? void 0 : _N.primary
+      },
+      positive: {
+        _hue: (_P = (_O = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _O.positive) == null ? void 0 : _P._hue,
+        ...(_Q = spec.badge) == null ? void 0 : _Q["*"],
+        ...(_R = spec.badge) == null ? void 0 : _R.positive
+      },
+      caution: {
+        _hue: (_T = (_S = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _S.caution) == null ? void 0 : _T._hue,
+        ...(_U = spec.badge) == null ? void 0 : _U["*"],
+        ...(_V = spec.badge) == null ? void 0 : _V.caution
+      },
+      critical: {
+        _hue: (_X = (_W = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _W.critical) == null ? void 0 : _X._hue,
+        ...(_Y = spec.badge) == null ? void 0 : _Y["*"],
+        ...(_Z = spec.badge) == null ? void 0 : _Z.critical
+      }
+    }
+  };
+}
+function resolveInputColorTokens(inputTokens) {
+  const tokens = {};
+  for (const mode of THEME_COLOR_INPUT_MODES)
+    tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
+  return tokens;
+}
+function resolveInputModeColorTokens(inputTokens, mode) {
+  const states = {};
+  for (const state of THEME_COLOR_INPUT_STATES)
+    states[state] = resolveInputStateColorTokens(inputTokens, mode, state);
+  return states;
+}
+function resolveInputStateColorTokens(inputTokens, mode, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const spec = merge(
+    (_b = (_a = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _a["*"]) == null ? void 0 : _b["*"],
+    (_d = (_c = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _c[mode]) == null ? void 0 : _d["*"],
+    (_f = (_e = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _e["*"]) == null ? void 0 : _f[state],
+    (_h = (_g = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _g[mode]) == null ? void 0 : _h[state]
+  ), hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.input) == null ? void 0 : _i[mode]) == null ? void 0 : _j._hue);
+  return { ...spec, _hue: hue };
+}
+function resolveSelectableColorTokens(inputTokens) {
+  const tokens = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone);
+  return tokens;
+}
+function resolveSelectableToneColorTokens(inputTokens, tone) {
+  var _a, _b, _c, _d;
+  const states = {
+    _hue: ((_b = (_a = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _a[tone]) == null ? void 0 : _b._hue) || ((_d = (_c = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _c[tone]) == null ? void 0 : _d._hue)
+  };
+  for (const state of THEME_COLOR_STATES)
+    states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state);
+  return states;
+}
+function resolveSelectableStateColorTokens(inputTokens, tone, state) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P, _Q, _R, _S, _T, _U, _V;
+  const spec = merge(
+    (_b = (_a = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _a["*"]) == null ? void 0 : _b["*"],
+    (_d = (_c = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _c[tone]) == null ? void 0 : _d["*"],
+    (_f = (_e = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _e["*"]) == null ? void 0 : _f[state],
+    (_h = (_g = inputTokens == null ? void 0 : inputTokens.selectable) == null ? void 0 : _g[tone]) == null ? void 0 : _h[state]
+  ), hue = spec._hue || ((_j = (_i = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _i[tone]) == null ? void 0 : _j._hue);
+  return {
+    ...spec,
+    _hue: hue,
+    avatar: {
+      gray: merge({ _hue: "gray" }, (_k = spec.avatar) == null ? void 0 : _k["*"], (_l = spec.avatar) == null ? void 0 : _l.gray),
+      blue: merge({ _hue: "blue" }, (_m = spec.avatar) == null ? void 0 : _m["*"], (_n = spec.avatar) == null ? void 0 : _n.blue),
+      purple: merge({ _hue: "purple" }, (_o = spec.avatar) == null ? void 0 : _o["*"], (_p = spec.avatar) == null ? void 0 : _p.purple),
+      magenta: merge({ _hue: "magenta" }, (_q = spec.avatar) == null ? void 0 : _q["*"], (_r = spec.avatar) == null ? void 0 : _r.magenta),
+      red: merge({ _hue: "red" }, (_s = spec.avatar) == null ? void 0 : _s["*"], (_t = spec.avatar) == null ? void 0 : _t.red),
+      orange: merge({ _hue: "orange" }, (_u = spec.avatar) == null ? void 0 : _u["*"], (_v = spec.avatar) == null ? void 0 : _v.orange),
+      yellow: merge({ _hue: "yellow" }, (_w = spec.avatar) == null ? void 0 : _w["*"], (_x = spec.avatar) == null ? void 0 : _x.yellow),
+      green: merge({ _hue: "green" }, (_y = spec.avatar) == null ? void 0 : _y["*"], (_z = spec.avatar) == null ? void 0 : _z.green),
+      cyan: merge({ _hue: "cyan" }, (_A = spec.avatar) == null ? void 0 : _A["*"], (_B = spec.avatar) == null ? void 0 : _B.cyan)
+    },
+    badge: {
+      default: {
+        _hue: (_D = (_C = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _C.default) == null ? void 0 : _D._hue,
+        ...(_E = spec.badge) == null ? void 0 : _E["*"],
+        ...(_F = spec.badge) == null ? void 0 : _F.default
+      },
+      primary: {
+        _hue: (_H = (_G = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _G.primary) == null ? void 0 : _H._hue,
+        ...(_I = spec.badge) == null ? void 0 : _I["*"],
+        ...(_J = spec.badge) == null ? void 0 : _J.primary
+      },
+      positive: {
+        _hue: (_L = (_K = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _K.positive) == null ? void 0 : _L._hue,
+        ...(_M = spec.badge) == null ? void 0 : _M["*"],
+        ...(_N = spec.badge) == null ? void 0 : _N.positive
+      },
+      caution: {
+        _hue: (_P = (_O = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _O.caution) == null ? void 0 : _P._hue,
+        ...(_Q = spec.badge) == null ? void 0 : _Q["*"],
+        ...(_R = spec.badge) == null ? void 0 : _R.caution
+      },
+      critical: {
+        _hue: (_T = (_S = inputTokens == null ? void 0 : inputTokens.base) == null ? void 0 : _S.critical) == null ? void 0 : _T._hue,
+        ...(_U = spec.badge) == null ? void 0 : _U["*"],
+        ...(_V = spec.badge) == null ? void 0 : _V.critical
+      }
+    }
+  };
+}
+function buildColorTheme(config) {
+  const resolvedConfig = {
+    ...config,
+    color: resolveColorTokens(config == null ? void 0 : config.color)
+  };
+  return {
+    light: buildColorScheme({ scheme: "light" }, resolvedConfig),
+    dark: buildColorScheme({ scheme: "dark" }, resolvedConfig)
+  };
+}
+function buildColorScheme(options, config) {
+  const { scheme } = options;
+  return {
+    transparent: buildCardColorTheme({ scheme, tone: "transparent" }, config),
+    default: buildCardColorTheme({ scheme, tone: "default" }, config),
+    primary: buildCardColorTheme({ scheme, tone: "primary" }, config),
+    positive: buildCardColorTheme({ scheme, tone: "positive" }, config),
+    caution: buildCardColorTheme({ scheme, tone: "caution" }, config),
+    critical: buildCardColorTheme({ scheme, tone: "critical" }, config)
+  };
+}
+function buildCardColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+  const { scheme, tone } = options, tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
+  return {
+    _blend: ((tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
+    _dark: scheme === "dark",
+    accent: {
+      fg: resolveColorTokenValue(context, (_c = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _c.fg)
+    },
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    backdrop: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.backdrop),
+    badge: buildBadgeColorTheme(tokens == null ? void 0 : tokens.badge, { scheme }, config),
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    border: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.border),
+    button: buildButtonColorTheme({ scheme }, config),
+    code: {
+      bg: resolveColorTokenValue(context, (_d = tokens == null ? void 0 : tokens.code) == null ? void 0 : _d.bg),
+      fg: resolveColorTokenValue(context, (_e = tokens == null ? void 0 : tokens.code) == null ? void 0 : _e.fg)
+    },
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
+    focusRing: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.focusRing),
+    icon: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.icon),
+    input: buildInputColorTheme({ scheme, tone }, config),
+    kbd: {
+      bg: resolveColorTokenValue(context, (_f = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _f.bg),
+      fg: resolveColorTokenValue(context, (_g = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _g.fg),
+      border: resolveColorTokenValue(context, (_h = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _h.border)
+    },
+    link: {
+      fg: resolveColorTokenValue(context, (_i = tokens == null ? void 0 : tokens.link) == null ? void 0 : _i.fg)
+    },
+    muted: {
+      bg: resolveColorTokenValue(context, (_j = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _j.bg),
+      fg: resolveColorTokenValue(context, (_k = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _k.fg)
+    },
+    selectable: buildSelectableColorTheme({ scheme }, config),
+    shadow: buildShadowColorTheme({ scheme, tone }, config),
+    skeleton: {
+      from: resolveColorTokenValue(context, (_l = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _l.from),
+      to: resolveColorTokenValue(context, (_m = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _m.to)
+    },
+    syntax: buildSyntaxColorTheme({ scheme }, config)
+  };
+}
+function buildShadowColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f;
+  const { scheme, tone } = options, tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
+  return {
+    outline: resolveColorTokenValue(context, (_c = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _c.outline),
+    umbra: resolveColorTokenValue(context, (_d = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _d.umbra),
+    penumbra: resolveColorTokenValue(context, (_e = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _e.penumbra),
+    ambient: resolveColorTokenValue(context, (_f = tokens == null ? void 0 : tokens.shadow) == null ? void 0 : _f.ambient)
+  };
+}
+function buildAvatarColorTheme(options, stateTokens) {
+  const { scheme } = options;
+  return {
+    gray: _buildAvatarColorTheme({ color: "gray", scheme }, stateTokens),
+    blue: _buildAvatarColorTheme({ color: "blue", scheme }, stateTokens),
+    purple: _buildAvatarColorTheme({ color: "purple", scheme }, stateTokens),
+    magenta: _buildAvatarColorTheme({ color: "magenta", scheme }, stateTokens),
+    red: _buildAvatarColorTheme({ color: "red", scheme }, stateTokens),
+    orange: _buildAvatarColorTheme({ color: "orange", scheme }, stateTokens),
+    yellow: _buildAvatarColorTheme({ color: "yellow", scheme }, stateTokens),
+    green: _buildAvatarColorTheme({ color: "green", scheme }, stateTokens),
+    cyan: _buildAvatarColorTheme({ color: "cyan", scheme }, stateTokens)
+  };
+}
+function _buildAvatarColorTheme(options, stateTokens) {
+  var _a;
+  const { color: color2, scheme } = options, tokens = (_a = stateTokens == null ? void 0 : stateTokens.avatar) == null ? void 0 : _a[color2], context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
+  return {
+    _blend: ((tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg)
+  };
+}
+function buildBadgeColorTheme(tokens, options, config) {
+  const { scheme } = options;
+  return {
+    default: _buildBadgeColorTheme(tokens, { scheme, tone: "default" }, config),
+    primary: _buildBadgeColorTheme(tokens, { scheme, tone: "primary" }, config),
+    positive: _buildBadgeColorTheme(tokens, { scheme, tone: "positive" }, config),
+    caution: _buildBadgeColorTheme(tokens, { scheme, tone: "caution" }, config),
+    critical: _buildBadgeColorTheme(tokens, { scheme, tone: "critical" }, config)
+  };
+}
+function _buildBadgeColorTheme(parentTokens, options, config) {
+  var _a, _b, _c;
+  const { scheme, tone } = options, tokens = parentTokens == null ? void 0 : parentTokens[tone], context = { hue: (tokens == null ? void 0 : tokens._hue) || ((_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone]) == null ? void 0 : _c._hue) || "gray", scheme };
+  return {
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
+    dot: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.dot),
+    icon: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.icon)
+  };
+}
+function buildButtonColorTheme(options, config) {
+  const { scheme } = options, modes = {};
+  for (const mode of THEME_COLOR_BUTTON_MODES)
+    modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
+  return modes;
+}
+function buildButtonTonesColorTheme(options, config) {
+  const { mode, scheme } = options, tones2 = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tones2[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
+  return tones2;
+}
+function buildButtonStatesColorTheme(options, config) {
+  const { mode, scheme, tone } = options, states = {};
+  for (const state of THEME_COLOR_STATES)
+    states[state] = buildButtonStateColorTheme({ mode, tone, scheme, state }, config);
+  return states;
+}
+function buildButtonStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const { mode, tone, scheme, state } = options, tokens = (_d = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.button) == null ? void 0 : _b[mode]) == null ? void 0 : _c[tone]) == null ? void 0 : _d[state], hue = (tokens == null ? void 0 : tokens._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    accent: {
+      fg: resolveColorTokenValue(context, (_e = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _e.fg)
+    },
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    badge: buildBadgeColorTheme(tokens == null ? void 0 : tokens.badge, { scheme }, config),
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    border: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.border),
+    code: {
+      bg: resolveColorTokenValue(context, (_f = tokens == null ? void 0 : tokens.code) == null ? void 0 : _f.bg),
+      fg: resolveColorTokenValue(context, (_g = tokens == null ? void 0 : tokens.code) == null ? void 0 : _g.fg)
+    },
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
+    icon: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.icon),
+    muted: {
+      bg: resolveColorTokenValue(context, (_h = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _h.bg),
+      fg: resolveColorTokenValue(context, (_i = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _i.fg)
+    },
+    kbd: {
+      bg: resolveColorTokenValue(context, (_j = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _j.bg),
+      fg: resolveColorTokenValue(context, (_k = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _k.fg),
+      border: resolveColorTokenValue(context, (_l = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _l.border)
+    },
+    link: {
+      fg: resolveColorTokenValue(context, (_m = tokens == null ? void 0 : tokens.link) == null ? void 0 : _m.fg)
+    },
+    skeleton: {
+      from: resolveColorTokenValue(context, (_n = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _n.from),
+      to: resolveColorTokenValue(context, (_o = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _o.to)
+    }
+  };
+}
+function buildInputColorTheme(options, config) {
+  const { scheme, tone } = options;
+  return {
+    default: buildInputStatesColorTheme({ mode: "default", scheme, tone }, config),
+    invalid: buildInputStatesColorTheme({ mode: "invalid", scheme, tone }, config)
+  };
+}
+function buildInputStatesColorTheme(options, config) {
+  const { mode, scheme, tone } = options;
+  return {
+    enabled: buildInputStateColorTheme({ mode, scheme, state: "enabled", tone }, config),
+    hovered: buildInputStateColorTheme({ mode, scheme, state: "hovered", tone }, config),
+    readOnly: buildInputStateColorTheme({ mode, scheme, state: "readOnly", tone }, config),
+    disabled: buildInputStateColorTheme({ mode, scheme, state: "disabled", tone }, config)
+  };
+}
+function buildInputStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { mode, tone, scheme, state } = options, tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.input) == null ? void 0 : _b[mode]) == null ? void 0 : _c[state], hue = (tokens == null ? void 0 : tokens._hue) || ((_f = (_e = (_d = config == null ? void 0 : config.color) == null ? void 0 : _d.base) == null ? void 0 : _e[tone]) == null ? void 0 : _f._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    border: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.border),
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
+    muted: {
+      bg: resolveColorTokenValue(context, (_g = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _g.bg)
+    },
+    placeholder: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.placeholder)
+  };
+}
+function buildSelectableColorTheme(options, config) {
+  const { scheme } = options, tones2 = {};
+  for (const tone of THEME_COLOR_STATE_TONES)
+    tones2[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
+  return tones2;
+}
+function buildSelectableStatesColorTheme(options, config) {
+  const { scheme, tone } = options, states = {};
+  for (const state of THEME_COLOR_STATES)
+    states[state] = buildSelectableStateColorTheme({ tone, scheme, state }, config);
+  return states;
+}
+function buildSelectableStateColorTheme(options, config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+  const { scheme, state, tone } = options, tokens = (_c = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.selectable) == null ? void 0 : _b[tone]) == null ? void 0 : _c[state], hue = (tokens == null ? void 0 : tokens._hue) || "gray", blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"], context = { hue, scheme };
+  return {
+    _blend: blendMode[scheme === "light" ? 0 : 1],
+    accent: {
+      fg: resolveColorTokenValue(context, (_d = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _d.fg)
+    },
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
+    badge: buildBadgeColorTheme(tokens == null ? void 0 : tokens.badge, { scheme }, config),
+    bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
+    border: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.border),
+    code: {
+      bg: resolveColorTokenValue(context, (_e = tokens == null ? void 0 : tokens.code) == null ? void 0 : _e.bg),
+      fg: resolveColorTokenValue(context, (_f = tokens == null ? void 0 : tokens.code) == null ? void 0 : _f.fg)
+    },
+    fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
+    icon: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.icon),
+    muted: {
+      bg: resolveColorTokenValue(context, (_g = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _g.bg),
+      fg: resolveColorTokenValue(context, (_h = tokens == null ? void 0 : tokens.muted) == null ? void 0 : _h.fg)
+    },
+    kbd: {
+      bg: resolveColorTokenValue(context, (_i = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _i.bg),
+      fg: resolveColorTokenValue(context, (_j = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _j.fg),
+      border: resolveColorTokenValue(context, (_k = tokens == null ? void 0 : tokens.kbd) == null ? void 0 : _k.border)
+    },
+    link: {
+      fg: resolveColorTokenValue(context, (_l = tokens == null ? void 0 : tokens.link) == null ? void 0 : _l.fg)
+    },
+    skeleton: {
+      from: resolveColorTokenValue(context, (_m = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _m.from),
+      to: resolveColorTokenValue(context, (_n = tokens == null ? void 0 : tokens.skeleton) == null ? void 0 : _n.to)
+    }
+  };
+}
+function buildSyntaxColorTheme(options, config) {
+  var _a;
+  const { scheme } = options, tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.syntax, context = { hue: "gray", scheme };
+  return {
+    atrule: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.atrule),
+    attrName: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.attrName),
+    attrValue: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.attrValue),
+    attribute: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.attribute),
+    boolean: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.boolean),
+    builtin: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.builtin),
+    cdata: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.cdata),
+    char: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.char),
+    class: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.class),
+    className: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.className),
+    comment: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.comment),
+    constant: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.constant),
+    deleted: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.deleted),
+    doctype: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.doctype),
+    entity: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.entity),
+    function: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.function),
+    hexcode: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.hexcode),
+    id: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.id),
+    important: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.important),
+    inserted: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.inserted),
+    keyword: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.keyword),
+    number: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.number),
+    operator: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.operator),
+    prolog: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.prolog),
+    property: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.property),
+    pseudoClass: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.pseudoClass),
+    pseudoElement: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.pseudoElement),
+    punctuation: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.punctuation),
+    regex: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.regex),
+    selector: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.selector),
+    string: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.string),
+    symbol: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.symbol),
+    tag: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.tag),
+    unit: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.unit),
+    url: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.url),
+    variable: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.variable)
+  };
+}
+const defaultColorPalette = color;
+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 lerp(x, y, a) {
+  return x * (1 - a) + y * a;
+}
+function invlerp(x, y, a) {
+  return clamp((a - x) / (y - x));
+}
+function clamp(a, min = 0, max = 1) {
+  return Math.min(max, Math.max(min, a));
+}
+function range(x1, y1, x2, y2, a) {
+  return lerp(x2, y2, invlerp(x1, y1, 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(color2) {
+  const r = round(clamp(Math.round(color2.r), 0, 255)), g = round(clamp(Math.round(color2.g), 0, 255)), b = round(clamp(Math.round(color2.b), 0, 255));
+  return "a" in color2 ? `rgba(${r},${g},${b},${color2.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(color2) {
+  if (!color2)
+    return { r: 0, g: 0, b: 0 };
+  if (typeof color2 != "string")
+    throw new Error("parseColor: expected a string");
+  if (isHex(color2))
+    return hexToRgb(color2);
+  if (color2.startsWith("hsl("))
+    return hslToRgb(parseHsl(color2));
+  if (color2.startsWith("rgba("))
+    return rgbaToRGBA(color2);
+  throw new Error(`parseColor: unexpected color format: "${color2}"`);
+}
+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(color2, a) {
+  const rgb = parseColor(color2);
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
+}
+const RGB_RANGE = [0, 255];
+function mixThemeColor(value, options) {
+  const { blendMode } = options, color2 = parseColor(value), black2 = parseColor(options.black), white2 = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white2 : black2, paletteRange = {
+    r: [black2.r, white2.r],
+    g: [black2.g, white2.g],
+    b: [black2.b, white2.b]
+  }, convertedBgColor = {
+    r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
+    g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
+    b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE)
+  }, convertedColor = {
+    r: clamp(range(...paletteRange.r, ...RGB_RANGE, color2.r), ...RGB_RANGE),
+    g: clamp(range(...paletteRange.g, ...RGB_RANGE, color2.g), ...RGB_RANGE),
+    b: clamp(range(...paletteRange.b, ...RGB_RANGE, color2.b), ...RGB_RANGE)
+  }, resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor), v = {
+    r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
+    g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
+    b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b)
+  };
+  return rgbToHex(v);
+}
+function renderColorValue(str, options) {
+  const { bg, blendMode, colorPalette } = options;
+  if (bg === "white")
+    throw new Error("Cannot blend with white background");
+  const node = parseTokenValue(str);
+  if (!node || node.type !== "color")
+    throw new Error(`Invalid color token value: ${str}`);
+  let hex = "";
+  if (node.key === "black" && (hex = renderColorHex(colorPalette.black)), node.key === "white" && (hex = renderColorHex(colorPalette.white)), node.hue && node.tint && (hex = renderColorHex(colorPalette[node.hue][node.tint])), !hex)
+    throw new Error(`Invalid color token value: ${str}`);
+  const hexBeforeMix = hex, mixOptions = {
+    blendMode,
+    bg,
+    black: renderColorHex(colorPalette.black),
+    // opacity: node.opacity,
+    white: renderColorHex(colorPalette.white)
+  };
+  try {
+    if (hex = mixThemeColor(hex, mixOptions), bg && node.mix !== void 0) {
+      const from = hexToRgb(bg), to = hexToRgb(hex);
+      hex = rgbToHex(mix(from, to, node.mix));
+    }
+  } catch (err) {
+    throw console.warn("could not blend", hex, mixOptions), err;
+  }
+  return hex === "#aN" && (console.warn(`invalid color token value: ${str}`), hex = hexBeforeMix), node.opacity !== void 0 && (hex = rgba(hex, node.opacity)), hex;
+}
+function renderColorHex(color2) {
+  return typeof color2 == "string" ? color2 : color2.hex;
+}
+function renderThemeColorSchemes(value, config) {
+  var _a;
+  const colorPalette = (_a = config == null ? void 0 : config.palette) != null ? _a : defaultColorPalette;
+  return {
+    light: renderThemeColorScheme(colorPalette, value.light),
+    dark: renderThemeColorScheme(colorPalette, value.dark)
+  };
+}
+function renderThemeColorScheme(colorPalette, value) {
+  const toneEntries = Object.entries(value), [, transparentTone] = toneEntries.find(([k]) => k === "transparent"), [, defaultTone] = toneEntries.find(([k]) => k === "default"), renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette }), renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette }), bg = renderedDefaultTone.bg;
+  if (bg === "white")
+    throw new Error("Cannot blend with white background");
+  return Object.fromEntries([
+    ["transparent", renderedTransparentTone],
+    ["default", renderedDefaultTone],
+    ...toneEntries.filter(([k]) => k !== "default" && k !== "transparent").map(([k, v]) => [k, renderThemeColor(v, { bg, colorPalette })])
+  ]);
+}
+function renderThemeColor(value, options) {
+  const { colorPalette, bg } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode }), colorOptions = { colorPalette, bg: baseBg, blendMode }, button = renderThemeColorButton(value.button, {
+    baseBg,
+    blendMode,
+    colorPalette
+  }), selectable = renderThemeColorSelectable(value.selectable, {
+    colorPalette,
+    baseBg,
+    blendMode
+  }), shadow = {
+    outline: renderColorValue(value.shadow.outline, colorOptions),
+    umbra: renderColorValue(value.shadow.umbra, {
+      ...colorOptions,
+      bg: void 0,
+      colorPalette: { ...colorPalette, black: "#000000" }
+    }),
+    penumbra: renderColorValue(value.shadow.penumbra, {
+      ...colorOptions,
+      bg: void 0,
+      colorPalette: { ...colorPalette, black: "#000000" }
+    }),
+    ambient: renderColorValue(value.shadow.ambient, {
+      ...colorOptions,
+      bg: void 0,
+      colorPalette: { ...colorPalette, black: "#000000" }
+    })
+  };
+  return {
+    _blend: blendMode,
+    _dark: value._dark,
+    accent: {
+      fg: renderColorValue(value.accent.fg, colorOptions)
+    },
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
+    backdrop: renderColorValue(value.backdrop, colorOptions),
+    badge: renderThemeColorBadge(value.badge, { baseBg, colorPalette, blendMode }),
+    bg: baseBg,
+    border: renderColorValue(value.border, colorOptions),
+    button,
+    code: {
+      bg: renderColorValue(value.code.bg, colorOptions),
+      fg: renderColorValue(value.code.fg, colorOptions)
+    },
+    fg: renderColorValue(value.fg, colorOptions),
+    focusRing: renderColorValue(value.focusRing, colorOptions),
+    icon: renderColorValue(value.icon, colorOptions),
+    input: renderThemeColorInput(value.input, { baseBg, colorPalette, blendMode }),
+    kbd: renderThemeColorKBD(value.kbd, { baseBg, colorPalette, blendMode }),
+    link: {
+      fg: renderColorValue(value.link.fg, colorOptions)
+    },
+    muted: {
+      bg: renderColorValue(value.muted.bg, colorOptions),
+      fg: renderColorValue(value.muted.fg, colorOptions)
+    },
+    shadow,
+    skeleton: {
+      from: renderColorValue(value.skeleton.from, colorOptions),
+      to: renderColorValue(value.skeleton.to, colorOptions)
+    },
+    syntax: renderSyntaxColorTheme(value.syntax, { baseBg, colorPalette, blendMode }),
+    selectable
+  };
+}
+function renderThemeColorKBD(value, options) {
+  const { baseBg, blendMode, colorPalette } = options, rootOptions = {
+    bg: baseBg,
+    blendMode,
+    colorPalette
+  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    bg,
+    fg: renderColorValue(value.fg, colorOptions),
+    border: renderColorValue(value.border, colorOptions)
+  };
+}
+function renderThemeColorAvatar(value, options) {
+  return {
+    gray: renderThemeColorAvatarColor(value.gray, options),
+    blue: renderThemeColorAvatarColor(value.blue, options),
+    purple: renderThemeColorAvatarColor(value.purple, options),
+    magenta: renderThemeColorAvatarColor(value.magenta, options),
+    red: renderThemeColorAvatarColor(value.red, options),
+    orange: renderThemeColorAvatarColor(value.orange, options),
+    yellow: renderThemeColorAvatarColor(value.yellow, options),
+    green: renderThemeColorAvatarColor(value.green, options),
+    cyan: renderThemeColorAvatarColor(value.cyan, options)
+  };
+}
+function renderThemeColorAvatarColor(value, options) {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+    bg: baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    _blend: blendMode,
+    bg,
+    fg: renderColorValue(value.fg, colorOptions)
+  };
+}
+function renderThemeColorBadge(value, options) {
+  return {
+    default: renderThemeColorBadgeColor(value.default, options),
+    primary: renderThemeColorBadgeColor(value.primary, options),
+    positive: renderThemeColorBadgeColor(value.positive, options),
+    caution: renderThemeColorBadgeColor(value.caution, options),
+    critical: renderThemeColorBadgeColor(value.critical, options)
+  };
+}
+function renderThemeColorBadgeColor(value, options) {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
+    bg: baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    bg,
+    dot: renderColorValue(value.dot, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
+    icon: renderColorValue(value.icon, colorOptions)
+  };
+}
+function renderThemeColorButton(value, options) {
+  return {
+    default: renderThemeColorButtonTones(value.default, options),
+    ghost: renderThemeColorButtonTones(value.ghost, options),
+    bleed: renderThemeColorButtonTones(value.bleed, options)
+  };
+}
+function renderThemeColorButtonTones(value, options) {
+  return {
+    default: renderThemeColorButtonStates(value.default, options),
+    primary: renderThemeColorButtonStates(value.primary, options),
+    positive: renderThemeColorButtonStates(value.positive, options),
+    caution: renderThemeColorButtonStates(value.caution, options),
+    critical: renderThemeColorButtonStates(value.critical, options)
+  };
+}
+function renderThemeColorButtonStates(value, options) {
+  return {
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options)
+  };
+}
+function renderThemeColorState(value, options) {
+  var _a, _b;
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+    bg: baseBg,
+    blendMode: rootBlendMode,
+    colorPalette
+  }, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+    bg,
+    blendMode,
+    colorPalette
+  };
+  return {
+    _blend: blendMode,
+    accent: {
+      fg: renderColorValue(value.accent.fg, colorOptions)
+    },
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
+    badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
+    bg,
+    border: renderColorValue(value.border, colorOptions),
+    code: {
+      bg: renderColorValue(value.code.bg, colorOptions),
+      fg: renderColorValue(value.code.fg, colorOptions)
+    },
+    fg: renderColorValue(value.fg, colorOptions),
+    icon: renderColorValue(value.icon, colorOptions),
+    link: {
+      fg: renderColorValue(value.link.fg, colorOptions)
+    },
+    muted: {
+      bg: renderColorValue(value.muted.bg, colorOptions),
+      fg: renderColorValue(value.muted.fg, colorOptions)
+    },
+    kbd: {
+      bg: renderColorValue(value.kbd.bg, colorOptions),
+      fg: renderColorValue(value.kbd.fg, colorOptions),
+      border: renderColorValue(value.kbd.border, colorOptions)
+    },
+    skeleton: {
+      from: renderColorValue((_a = value.skeleton) == null ? void 0 : _a.from, colorOptions),
+      to: renderColorValue((_b = value.skeleton) == null ? void 0 : _b.to, colorOptions)
+    }
+  };
+}
+function renderThemeColorInput(value, options) {
+  return {
+    default: renderInputStatesColorTheme(value.default, options),
+    invalid: renderInputStatesColorTheme(value.invalid, options)
+  };
+}
+function renderInputStatesColorTheme(value, options) {
+  return {
+    enabled: renderInputStateColorTheme(value.enabled, options),
+    hovered: renderInputStateColorTheme(value.hovered, options),
+    readOnly: renderInputStateColorTheme(value.readOnly, options),
+    disabled: renderInputStateColorTheme(value.disabled, options)
+  };
+}
+function renderInputStateColorTheme(value, options) {
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode }, bg = renderColorValue(value.bg, rootOptions), colorOptions = { colorPalette, bg, blendMode };
+  return {
+    _blend: blendMode,
+    bg,
+    border: renderColorValue(value.border, colorOptions),
+    fg: renderColorValue(value.fg, colorOptions),
+    muted: {
+      bg: renderColorValue(value.muted.bg, colorOptions)
+    },
+    placeholder: renderColorValue(value.placeholder, colorOptions)
+  };
+}
+function renderThemeColorSelectable(value, options) {
+  return {
+    default: renderThemeColorSelectableStates(value.default, options),
+    primary: renderThemeColorSelectableStates(value.primary, options),
+    positive: renderThemeColorSelectableStates(value.positive, options),
+    caution: renderThemeColorSelectableStates(value.caution, options),
+    critical: renderThemeColorSelectableStates(value.critical, options)
+  };
+}
+function renderThemeColorSelectableStates(value, options) {
+  return {
+    enabled: renderThemeColorState(value.enabled, options),
+    hovered: renderThemeColorState(value.hovered, options),
+    pressed: renderThemeColorState(value.pressed, options),
+    selected: renderThemeColorState(value.selected, options),
+    disabled: renderThemeColorState(value.disabled, options)
+  };
+}
+function renderSyntaxColorTheme(value, options) {
+  const { colorPalette, baseBg, blendMode } = options, colorOptions = { colorPalette, bg: baseBg, blendMode };
+  return {
+    atrule: renderColorValue(value.atrule, colorOptions),
+    attrName: renderColorValue(value.attrName, colorOptions),
+    attrValue: renderColorValue(value.attrValue, colorOptions),
+    attribute: renderColorValue(value.attribute, colorOptions),
+    boolean: renderColorValue(value.boolean, colorOptions),
+    builtin: renderColorValue(value.builtin, colorOptions),
+    cdata: renderColorValue(value.cdata, colorOptions),
+    char: renderColorValue(value.char, colorOptions),
+    class: renderColorValue(value.class, colorOptions),
+    className: renderColorValue(value.className, colorOptions),
+    comment: renderColorValue(value.comment, colorOptions),
+    constant: renderColorValue(value.constant, colorOptions),
+    deleted: renderColorValue(value.deleted, colorOptions),
+    doctype: renderColorValue(value.doctype, colorOptions),
+    entity: renderColorValue(value.entity, colorOptions),
+    function: renderColorValue(value.function, colorOptions),
+    hexcode: renderColorValue(value.hexcode, colorOptions),
+    id: renderColorValue(value.id, colorOptions),
+    important: renderColorValue(value.important, colorOptions),
+    inserted: renderColorValue(value.inserted, colorOptions),
+    keyword: renderColorValue(value.keyword, colorOptions),
+    number: renderColorValue(value.number, colorOptions),
+    operator: renderColorValue(value.operator, colorOptions),
+    prolog: renderColorValue(value.prolog, colorOptions),
+    property: renderColorValue(value.property, colorOptions),
+    pseudoClass: renderColorValue(value.pseudoClass, colorOptions),
+    pseudoElement: renderColorValue(value.pseudoElement, colorOptions),
+    punctuation: renderColorValue(value.punctuation, colorOptions),
+    regex: renderColorValue(value.regex, colorOptions),
+    selector: renderColorValue(value.selector, colorOptions),
+    string: renderColorValue(value.string, colorOptions),
+    symbol: renderColorValue(value.symbol, colorOptions),
+    tag: renderColorValue(value.tag, colorOptions),
+    unit: renderColorValue(value.unit, colorOptions),
+    url: renderColorValue(value.url, colorOptions),
+    variable: renderColorValue(value.variable, colorOptions)
+  };
+}
+function buildTheme(config) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const colorTheme = buildColorTheme(config), v2 = {
+    _version: 2,
+    avatar: (_a = config == null ? void 0 : config.avatar) != null ? _a : defaultThemeConfig.avatar,
+    button: (_b = config == null ? void 0 : config.button) != null ? _b : defaultThemeConfig.button,
+    card: (_c = config == null ? void 0 : config.card) != null ? _c : defaultThemeConfig.card,
+    // How colors are generated:
+    // 1. Merge custom tokens with default tokens
+    // 2. Generate tree of color keys (gray/500, black, white, etc.)
+    // 3. Apply mixing and render to hex values
+    // render(build(mergeWithDefaults()))
+    color: renderThemeColorSchemes(colorTheme, config),
+    container: (_d = config == null ? void 0 : config.container) != null ? _d : defaultThemeConfig.container,
+    font: (_e = config == null ? void 0 : config.font) != null ? _e : defaultThemeFonts,
+    input: (_f = config == null ? void 0 : config.input) != null ? _f : defaultThemeConfig.input,
+    layer: (_g = config == null ? void 0 : config.layer) != null ? _g : defaultThemeConfig.layer,
+    media: (_h = config == null ? void 0 : config.media) != null ? _h : defaultThemeConfig.media,
+    radius: (_i = config == null ? void 0 : config.radius) != null ? _i : defaultThemeConfig.radius,
+    shadow: (_j = config == null ? void 0 : config.shadow) != null ? _j : defaultThemeConfig.shadow,
+    space: (_k = config == null ? void 0 : config.space) != null ? _k : defaultThemeConfig.space,
+    style: (_l = config == null ? void 0 : config.style) != null ? _l : defaultThemeConfig.style
+  };
+  return v2_v0(v2);
+}
+const cache = /* @__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, layer_v2 = v2.layer || defaultThemeConfig.layer, theme = {
+    sanity: {
+      ...v0,
+      color: color_v0,
+      layer: layer_v0,
+      v2: {
+        ...v2,
+        _resolved: !0,
+        color: color_v2,
+        layer: layer_v2
+      }
+    }
+  };
+  return _setCachedTheme(themeProp, scheme, tone, theme), theme;
+}
+function _getCachedTheme(rootTheme, scheme, tone) {
+  const schemeCache = cache.get(scheme);
+  if (!schemeCache)
+    return;
+  const toneCache = schemeCache.get(tone);
+  if (toneCache)
+    return toneCache.get(rootTheme);
+}
+function _setCachedTheme(rootTheme, scheme, tone, theme) {
+  cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
+  const schemeCache = cache.get(scheme);
+  schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
+}
+export {
+  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,
+  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,
+  buildTheme,
+  createColorTheme,
+  getContrastRatio,
+  getScopedTheme,
+  getTheme_v2,
+  hexToRgb,
+  hslToRgb,
+  isColorBlendModeValue,
+  isColorButtonMode,
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+  isColorHueKey,
+  isColorOpacityValue,
+  isColorTintKey,
+  isColorTokenValue,
+  isColorValue,
+  is_v0,
+  is_v2,
+  mix,
+  multiply,
+  parseColor,
+  parseTokenKey,
+  parseTokenValue,
+  rgbToHex,
+  rgbToHsl,
+  rgba,
+  rgbaToRGBA,
+  screen,
+  v0_v2,
+  v2_v0
+};
+//# sourceMappingURL=theme.mjs.map