@sanity/ui 2.0.1 → 2.0.3

package/dist/theme.esm.js

@@ -1,4 +1,5 @@
 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"),
@@ -52,232 +53,54 @@ function _createSelectableStates(opts, base, dark, solid, muted, 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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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({
@@ -317,6 +140,7 @@ function createButtonTones(opts, base, dark, solid, muted, mode) {
     })
   };
 }
+
 function createButtonModes(opts, base, dark, solid, muted) {
   return {
     default: createButtonTones(opts, base, dark, solid, muted, "default"),
@@ -324,6 +148,7 @@ function createButtonModes(opts, base, dark, solid, muted) {
     bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
   };
 }
+
 function createCardStates(opts, base, dark, name, solid, muted) {
   return {
     enabled: opts.card({
@@ -368,6 +193,7 @@ function createCardStates(opts, base, dark, name, solid, muted) {
     })
   };
 }
+
 const black = "hsl(0, 0%, 0%)";
 const white = "hsl(0, 0%, 100%)";
 const colors = {
@@ -470,11 +296,7 @@ const tones = {
   }
 };
 const defaultOpts = {
-  base: _ref => {
-    let {
-      dark,
-      name
-    } = _ref;
+  base: ({ dark, name }) => {
     if (name === "default") {
       return {
         bg: dark ? black : white,
@@ -510,13 +332,7 @@ const defaultOpts = {
       }
     };
   },
-  solid: _ref2 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref2;
+  solid: ({ base, dark, state, tone }) => {
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -563,13 +379,7 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  muted: _ref3 => {
-    let {
-      base,
-      dark,
-      state,
-      tone
-    } = _ref3;
+  muted: ({ base, dark, state, tone }) => {
     const color = colors[tone];
     if (state === "hovered") {
       return {
@@ -616,13 +426,7 @@ const defaultOpts = {
       skeleton: base.skeleton
     };
   },
-  button: _ref4 => {
-    let {
-      base,
-      mode,
-      muted,
-      solid
-    } = _ref4;
+  button: ({ base, mode, muted, solid }) => {
     if (mode === "bleed") {
       return {
         ...muted,
@@ -670,16 +474,14 @@ const defaultOpts = {
         }
       };
     }
-    if (mode === "ghost") return {
-      ...solid,
-      enabled: muted.enabled
-    };
+    if (mode === "ghost")
+      return {
+        ...solid,
+        enabled: muted.enabled
+      };
     return solid;
   },
-  card: _ref5 => {
-    let {
-      base
-    } = _ref5;
+  card: ({ base }) => {
     return {
       bg: black,
       bg2: black,
@@ -711,18 +513,10 @@ const defaultOpts = {
       placeholder: black
     };
   },
-  selectable: _ref6 => {
-    let {
-      muted,
-      state,
-      tone
-    } = _ref6;
+  selectable: ({ muted, state, tone }) => {
     return muted[tone][state];
   },
-  spot: _ref7 => {
-    let {
-      key
-    } = _ref7;
+  spot: ({ key }) => {
     return spots[key];
   },
   syntax: () => ({
@@ -764,6 +558,7 @@ const defaultOpts = {
     variable: black
   })
 };
+
 function createInputModes(opts, base, dark, solid, muted) {
   return {
     default: {
@@ -836,287 +631,70 @@ function createInputModes(opts, base, dark, solid, muted) {
     }
   };
 }
+
 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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-      })
+      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"
-    })
+    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() {
-  let partialOpts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const builders = {
-    ...defaultOpts,
-    ...partialOpts
-  };
+
+function createColorTheme(partialOpts = {}) {
+  const builders = { ...defaultOpts, ...partialOpts };
   return {
     light: _createColorScheme(builders, false),
     dark: _createColorScheme(builders, true)
@@ -1133,10 +711,7 @@ function _createColorScheme(opts, dark) {
   };
 }
 function _createColor(opts, dark, name) {
-  const base = opts.base({
-    dark,
-    name
-  });
+  const base = opts.base({ dark, name });
   const solid = createSolidTones(opts, base, dark, name);
   const muted = createMutedTones(opts, base, dark, name);
   return {
@@ -1147,94 +722,51 @@ function _createColor(opts, dark, name) {
     input: createInputModes(opts, base, dark, solid, muted),
     selectable: createSelectableTones(opts, base, dark, solid, muted),
     spot: createSpot(opts, base, dark),
-    syntax: opts.syntax({
-      base,
-      dark
-    }),
+    syntax: opts.syntax({ base, dark }),
     solid,
     muted
   };
 }
+
 const BORDER_WIDTH = 1;
 const OUTLINE_WIDTH = 0.5;
 const 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
-    }
+    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
-    }
+    border: { width: BORDER_WIDTH },
+    focusRing: { offset: -1, width: 1 }
   },
   card: {
-    border: {
-      width: BORDER_WIDTH
-    },
-    focusRing: {
-      offset: -1,
-      width: 1
-    },
-    shadow: {
-      outline: OUTLINE_WIDTH
-    }
+    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
-    }
+    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]
-  }],
+  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: {
@@ -1242,18 +774,12 @@ const defaultThemeConfig = {
     },
     checkbox: {
       size: 17,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
+      focusRing: { offset: -1, width: 1 }
     },
     radio: {
       size: 17,
       markSize: 9,
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
+      focusRing: { offset: -1, width: 1 }
     },
     switch: {
       width: 25,
@@ -1261,22 +787,13 @@ const defaultThemeConfig = {
       padding: 5,
       transitionDurationMs: 150,
       transitionTimingFunction: "ease-out",
-      focusRing: {
-        offset: 1,
-        width: 1
-      }
+      focusRing: { offset: 1, width: 1 }
     },
     select: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
+      focusRing: { offset: -1, width: 1 }
     },
     text: {
-      focusRing: {
-        offset: -1,
-        width: 1
-      }
+      focusRing: { offset: -1, width: 1 }
     }
   },
   style: {
@@ -1292,6 +809,7 @@ const defaultThemeConfig = {
     // },
   }
 };
+
 const defaultThemeFonts = {
   code: {
     family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
@@ -1301,42 +819,48 @@ const defaultThemeFonts = {
       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
-    }]
+    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',
@@ -1346,49 +870,56 @@ const defaultThemeFonts = {
       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
-    }]
+    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',
@@ -1398,49 +929,56 @@ const defaultThemeFonts = {
       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
-    }]
+    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',
@@ -1450,49 +988,57 @@ const defaultThemeFonts = {
       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
-    }]
+    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
+      }
+    ]
   }
 };
-const cache$4 = /* @__PURE__ */new WeakMap();
+
+const 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;
+  if (cached_v2)
+    return cached_v2;
   const base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled);
   const color_v2 = {
     _blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
@@ -1680,12 +1226,15 @@ function inputStateThemeColor_v0_v2(state) {
     placeholder: state.placeholder
   };
 }
-const cache$3 = /* @__PURE__ */new WeakMap();
+
+const cache$3 = /* @__PURE__ */ new WeakMap();
 function getTheme_v2(theme) {
   var _a, _b;
-  if ((_a = theme.sanity.v2) == null ? void 0 : _a._resolved) return theme.sanity.v2;
+  if ((_a = theme.sanity.v2) == null ? void 0 : _a._resolved)
+    return theme.sanity.v2;
   const cached_v2 = cache$3.get(theme);
-  if (cached_v2) return cached_v2;
+  if (cached_v2)
+    return cached_v2;
   const v2 = {
     _version: 2,
     _resolved: true,
@@ -1727,17 +1276,22 @@ function getTheme_v2(theme) {
   cache$3.set(theme, v2);
   return v2;
 }
+
 function is_v0(themeProp) {
   return themeProp._version === 0;
 }
+
 function is_v2(themeProp) {
   return themeProp._version === 2;
 }
-const cache$2 = /* @__PURE__ */new WeakMap();
+
+const cache$2 = /* @__PURE__ */ new WeakMap();
 function v0_v2(v0) {
-  if (v0.v2) return v0.v2;
+  if (v0.v2)
+    return v0.v2;
   const cached_v2 = cache$2.get(v0);
-  if (cached_v2) return cached_v2;
+  if (cached_v2)
+    return cached_v2;
   const {
     avatar,
     button,
@@ -1811,10 +1365,12 @@ function v0_v2(v0) {
   cache$2.set(v0, v2);
   return v2;
 }
-const cache$1 = /* @__PURE__ */new WeakMap();
+
+const cache$1 = /* @__PURE__ */ new WeakMap();
 function v2_v0(v2) {
   const cachedTheme = cache$1.get(v2);
-  if (cachedTheme) return cachedTheme;
+  if (cachedTheme)
+    return cachedTheme;
   const {
     avatar,
     button,
@@ -1918,15 +1474,30 @@ function inputStateThemeColor_v2_v0(t) {
     placeholder: t.placeholder
   };
 }
+
 const THEME_COLOR_SCHEMES = ["light", "dark"];
 const THEME_COLOR_BLEND_MODES = ["multiply", "screen"];
-const THEME_COLOR_CARD_TONES = ["transparent", "default", "primary", "positive", "caution", "critical"];
-const THEME_COLOR_STATE_TONES = ["default", "primary", "positive", "caution", "critical"];
+const THEME_COLOR_CARD_TONES = [
+  "transparent",
+  "default",
+  "primary",
+  "positive",
+  "caution",
+  "critical"
+];
+const THEME_COLOR_STATE_TONES = [
+  "default",
+  "primary",
+  "positive",
+  "caution",
+  "critical"
+];
 const THEME_COLOR_STATES = ["enabled", "hovered", "pressed", "selected", "disabled"];
 const THEME_COLOR_BUTTON_MODES = ["default", "ghost", "bleed"];
 const THEME_COLOR_INPUT_MODES = ["default", "invalid"];
 const THEME_COLOR_INPUT_STATES = ["enabled", "hovered", "readOnly", "disabled"];
 const THEME_COLOR_AVATAR_COLORS = COLOR_HUES;
+
 function isColorBlendModeValue(str) {
   return THEME_COLOR_BLEND_MODES.includes(str);
 }
@@ -1939,8 +1510,35 @@ function isColorTintKey(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"];
-const COLOR_CONFIG_CARD_KEYS = [...COLOR_CONFIG_STATE_KEYS, "_hue", "bg", "fg", "border", "focusRing", "shadow/outline", "shadow/umbra", "shadow/penumbra", "shadow/ambient"];
+
+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"
+];
+const COLOR_CONFIG_CARD_KEYS = [
+  ...COLOR_CONFIG_STATE_KEYS,
+  "_hue",
+  "bg",
+  "fg",
+  "border",
+  "focusRing",
+  "shadow/outline",
+  "shadow/umbra",
+  "shadow/penumbra",
+  "shadow/ambient"
+];
 const COLOR_CONFIG_BLEND_KEYS = ["_blend"];
 const COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS];
 const COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES];
@@ -1948,6 +1546,7 @@ const COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES];
 const COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES];
 const COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES];
 const COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+
 function parseTokenKey(str) {
   const segments = str.split("/");
   const segment0 = segments.shift() || "";
@@ -1995,6 +1594,7 @@ function parseTokenKey(str) {
   }
   return void 0;
 }
+
 function isColorMixPercentValue(str) {
   return /^\d+%$/.test(str);
 }
@@ -2095,6 +1695,7 @@ function parseTokenValue(str) {
   }
   return void 0;
 }
+
 function isColorConfigBaseTone(str) {
   return COLOR_CONFIG_CARD_TONES.includes(str);
 }
@@ -2120,6 +1721,7 @@ function isColorValue(str) {
 function isColorOpacityValue(str) {
   return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
 }
+
 function compileColorTokenValue(node) {
   let key = "";
   if (node.key === "black" || node.key === "white") {
@@ -2135,22 +1737,17 @@ function compileColorTokenValue(node) {
   }
   return key;
 }
+
 const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
-function resolveColorTokenValue(context) {
-  let value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_COLOR_TOKEN_VALUE;
-  const {
-    hue,
-    scheme
-  } = context;
+function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
+  const { hue, scheme } = context;
   const node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
   if (!node || node.type !== "color") {
     throw new Error("Invalid color token: ".concat(value[0]));
   }
-  return compileColorTokenValue({
-    ...node,
-    hue: node.hue || hue
-  });
+  return compileColorTokenValue({ ...node, hue: node.hue || hue });
 }
+
 const defaultColorTokens = {
   base: {
     "*": {
@@ -2224,24 +1821,16 @@ const defaultColorTokens = {
         fg: ["600", "400"]
       }
     },
-    primary: {
-      _hue: "blue"
-    },
+    primary: { _hue: "blue" },
     positive: {
       _hue: "green",
-      shadow: {
-        outline: ["500/0.4", "500/0.4"]
-      }
+      shadow: { outline: ["500/0.4", "500/0.4"] }
     },
     caution: {
       _hue: "yellow",
-      shadow: {
-        outline: ["600/0.3", "500/0.4"]
-      }
+      shadow: { outline: ["600/0.3", "500/0.4"] }
     },
-    critical: {
-      _hue: "red"
-    }
+    critical: { _hue: "red" }
   },
   button: {
     default: {
@@ -2735,13 +2324,12 @@ const defaultColorTokens = {
     variable: ["red/600", "red/400"]
   }
 };
+
 function isRecord(value) {
   return Boolean(value && typeof value === "object" && !Array.isArray(value));
 }
-function merge() {
-  for (var _len = arguments.length, records = new Array(_len), _key = 0; _key < _len; _key++) {
-    records[_key] = arguments[_key];
-  }
+
+function merge(...records) {
   const _records = records.filter(Boolean);
   if (_records.length === 0) {
     return {};
@@ -2760,6 +2348,7 @@ function _merge(acc, source) {
   }
   return acc;
 }
+
 function resolveColorTokens(inputTokens) {
   const tokens = merge(defaultColorTokens, inputTokens);
   return {
@@ -2785,59 +2374,41 @@ function resolveBaseColorTones(inputTokens, tone) {
     ...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)
+      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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_O = spec.badge) == null ? void 0 : _O["*"],
+        ...(_P = spec.badge) == null ? void 0 : _P.critical
       }
     }
   };
@@ -2865,65 +2436,52 @@ function resolveButtonModeColorTokens(inputTokens, mode, tone) {
 }
 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]);
+  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]
+  );
   const 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)
+      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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_Y = spec.badge) == null ? void 0 : _Y["*"],
+        ...(_Z = spec.badge) == null ? void 0 : _Z.critical
       }
     }
   };
@@ -2944,12 +2502,14 @@ function resolveInputModeColorTokens(inputTokens, mode) {
 }
 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]);
+  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]
+  );
   const 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
-  };
+  return { ...spec, _hue: hue };
 }
 function resolveSelectableColorTokens(inputTokens) {
   const tokens = {};
@@ -2970,126 +2530,84 @@ function resolveSelectableToneColorTokens(inputTokens, tone) {
 }
 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]);
+  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]
+  );
   const 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)
+      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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+        ...(_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)
+    light: buildColorScheme({ scheme: "light" }, resolvedConfig),
+    dark: buildColorScheme({ scheme: "dark" }, resolvedConfig)
   };
 }
 function buildColorScheme(options, config) {
-  const {
-    scheme
-  } = options;
+  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)
+    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;
+  const { scheme, tone } = options;
   const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone];
   const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
-  const context = {
-    hue,
-    scheme
-  };
+  const context = { hue, scheme };
   const blendMode = (tokens == null ? void 0 : tokens._blend) || ["multiply", "screen"];
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
@@ -3097,18 +2615,12 @@ function buildCardColorTheme(options, config) {
     accent: {
       fg: resolveColorTokenValue(context, (_c = tokens == null ? void 0 : tokens.accent) == null ? void 0 : _c.fg)
     },
-    avatar: buildAvatarColorTheme({
-      scheme
-    }, tokens),
+    avatar: buildAvatarColorTheme({ scheme }, tokens),
     backdrop: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.backdrop),
-    badge: buildBadgeColorTheme(tokens == null ? void 0 : tokens.badge, {
-      scheme
-    }, config),
+    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),
+    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)
@@ -3116,10 +2628,7 @@ function buildCardColorTheme(options, config) {
     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),
+    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),
@@ -3132,34 +2641,21 @@ function buildCardColorTheme(options, config) {
       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),
+    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)
+    syntax: buildSyntaxColorTheme({ scheme }, config)
   };
 }
 function buildShadowColorTheme(options, config) {
   var _a, _b, _c, _d, _e, _f;
-  const {
-    scheme,
-    tone
-  } = options;
+  const { scheme, tone } = options;
   const tokens = (_b = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.base) == null ? void 0 : _b[tone];
   const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
-  const context = {
-    hue,
-    scheme
-  };
+  const context = { hue, 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),
@@ -3168,59 +2664,24 @@ function buildShadowColorTheme(options, config) {
   };
 }
 function buildAvatarColorTheme(options, stateTokens) {
-  const {
-    scheme
-  } = options;
+  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)
+    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,
-    scheme
-  } = options;
+  const { color, scheme } = options;
   const tokens = (_a = stateTokens == null ? void 0 : stateTokens.avatar) == null ? void 0 : _a[color];
-  const context = {
-    hue: (tokens == null ? void 0 : tokens._hue) || "gray",
-    scheme
-  };
+  const context = { hue: (tokens == null ? void 0 : tokens._hue) || "gray", scheme };
   const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
@@ -3229,44 +2690,21 @@ function _buildAvatarColorTheme(options, stateTokens) {
   };
 }
 function buildBadgeColorTheme(tokens, options, config) {
-  const {
-    scheme
-  } = options;
+  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)
+    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;
+  const { scheme, tone } = options;
   const tokens = parentTokens == null ? void 0 : parentTokens[tone];
   const 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";
-  const context = {
-    hue,
-    scheme
-  };
+  const context = { hue, scheme };
   return {
     bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
     fg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.fg),
@@ -3275,76 +2713,43 @@ function _buildBadgeColorTheme(parentTokens, options, config) {
   };
 }
 function buildButtonColorTheme(options, config) {
-  const {
-    scheme
-  } = options;
+  const { scheme } = options;
   const modes = {};
   for (const mode of THEME_COLOR_BUTTON_MODES) {
-    modes[mode] = buildButtonTonesColorTheme({
-      scheme,
-      mode
-    }, config);
+    modes[mode] = buildButtonTonesColorTheme({ scheme, mode }, config);
   }
   return modes;
 }
 function buildButtonTonesColorTheme(options, config) {
-  const {
-    mode,
-    scheme
-  } = options;
+  const { mode, scheme } = options;
   const tones = {};
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildButtonStatesColorTheme({
-      mode,
-      scheme,
-      tone
-    }, config);
+    tones[tone] = buildButtonStatesColorTheme({ mode, scheme, tone }, config);
   }
   return tones;
 }
 function buildButtonStatesColorTheme(options, config) {
-  const {
-    mode,
-    scheme,
-    tone
-  } = options;
+  const { mode, scheme, tone } = options;
   const states = {};
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildButtonStateColorTheme({
-      mode,
-      tone,
-      scheme,
-      state
-    }, config);
+    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;
+  const { mode, tone, scheme, state } = options;
   const 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];
   const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
   const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
-  const context = {
-    hue,
-    scheme
-  };
+  const 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),
+    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: {
@@ -3372,71 +2777,28 @@ function buildButtonStateColorTheme(options, config) {
   };
 }
 function buildInputColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options;
+  const { scheme, tone } = options;
   return {
-    default: buildInputStatesColorTheme({
-      mode: "default",
-      scheme,
-      tone
-    }, config),
-    invalid: buildInputStatesColorTheme({
-      mode: "invalid",
-      scheme,
-      tone
-    }, config)
+    default: buildInputStatesColorTheme({ mode: "default", scheme, tone }, config),
+    invalid: buildInputStatesColorTheme({ mode: "invalid", scheme, tone }, config)
   };
 }
 function buildInputStatesColorTheme(options, config) {
-  const {
-    mode,
-    scheme,
-    tone
-  } = options;
+  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)
+    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;
+  const { mode, tone, scheme, state } = options;
   const 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];
   const 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";
   const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
-  const context = {
-    hue,
-    scheme
-  };
+  const context = { hue, scheme };
   return {
     _blend: blendMode[scheme === "light" ? 0 : 1],
     bg: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.bg),
@@ -3449,58 +2811,35 @@ function buildInputStateColorTheme(options, config) {
   };
 }
 function buildSelectableColorTheme(options, config) {
-  const {
-    scheme
-  } = options;
+  const { scheme } = options;
   const tones = {};
   for (const tone of THEME_COLOR_STATE_TONES) {
-    tones[tone] = buildSelectableStatesColorTheme({
-      scheme,
-      tone
-    }, config);
+    tones[tone] = buildSelectableStatesColorTheme({ scheme, tone }, config);
   }
   return tones;
 }
 function buildSelectableStatesColorTheme(options, config) {
-  const {
-    scheme,
-    tone
-  } = options;
+  const { scheme, tone } = options;
   const states = {};
   for (const state of THEME_COLOR_STATES) {
-    states[state] = buildSelectableStateColorTheme({
-      tone,
-      scheme,
-      state
-    }, config);
+    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;
+  const { scheme, state, tone } = options;
   const 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];
   const hue = (tokens == null ? void 0 : tokens._hue) || "gray";
   const blendMode = (tokens == null ? void 0 : tokens._blend) || ["screen", "multiply"];
-  const context = {
-    hue,
-    scheme
-  };
+  const 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),
+    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: {
@@ -3529,14 +2868,9 @@ function buildSelectableStateColorTheme(options, config) {
 }
 function buildSyntaxColorTheme(options, config) {
   var _a;
-  const {
-    scheme
-  } = options;
+  const { scheme } = options;
   const tokens = (_a = config == null ? void 0 : config.color) == null ? void 0 : _a.syntax;
-  const context = {
-    hue: "gray",
-    scheme
-  };
+  const context = { hue: "gray", scheme };
   return {
     atrule: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.atrule),
     attrName: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.attrName),
@@ -3576,7 +2910,9 @@ function buildSyntaxColorTheme(options, config) {
     variable: resolveColorTokenValue(context, tokens == null ? void 0 : tokens.variable)
   };
 }
+
 const defaultColorPalette = color;
+
 function mixChannel(b, s, weight) {
   const diff = s - b;
   const delta = diff * weight;
@@ -3589,6 +2925,7 @@ function mix(b, s, weight) {
     b: mixChannel(b.b, s.b, weight)
   };
 }
+
 function multiplyChannel(b, s) {
   return b * s;
 }
@@ -3599,6 +2936,7 @@ function multiply(b, s) {
     b: multiplyChannel(b.b / 255, s.b / 255) * 255
   };
 }
+
 function screenChannel(b, s) {
   return b + s - b * s;
 }
@@ -3609,15 +2947,14 @@ function screen(b, s) {
     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) {
-  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+function clamp(a, min = 0, max = 1) {
   return Math.min(max, Math.max(min, a));
 }
 function range(x1, y1, x2, y2, a) {
@@ -3626,6 +2963,7 @@ function range(x1, y1, x2, y2, a) {
 function round(value) {
   return Math.round(value);
 }
+
 function hexToRgb(hex) {
   if (hex.length === 4) {
     const hexR = hex.slice(1, 2);
@@ -3661,12 +2999,7 @@ function rgbToHex(color) {
   }
   return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
 }
-function rgbToHsl(_ref8) {
-  let {
-    r,
-    g,
-    b
-  } = _ref8;
+function rgbToHsl({ r, g, b }) {
   r /= 255;
   g /= 255;
   b /= 255;
@@ -3676,18 +3009,22 @@ function rgbToHsl(_ref8) {
   let h = 0;
   let s = 0;
   let l = 0;
-  if (delta == 0) h = 0;else if (cmax == r) h = (g - b) / delta % 6;else if (cmax == g) h = (b - r) / delta + 2;else h = (r - g) / delta + 4;
+  if (delta == 0)
+    h = 0;
+  else if (cmax == r)
+    h = (g - b) / delta % 6;
+  else if (cmax == g)
+    h = (b - r) / delta + 2;
+  else
+    h = (r - g) / delta + 4;
   h = Math.round(h * 60);
-  if (h < 0) h += 360;
+  if (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);
-  return {
-    h,
-    s,
-    l
-  };
+  return { h, s, l };
 }
 function hslToRgb(hsl) {
   const s = hsl.s / 100;
@@ -3729,6 +3066,7 @@ function hslToRgb(hsl) {
     b: Math.round((b + m) * 255)
   };
 }
+
 const HEX_CHARS = "0123456789ABCDEFabcdef";
 const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
 function isHexChars(str) {
@@ -3740,8 +3078,10 @@ function isHexChars(str) {
   return true;
 }
 function isHex(str) {
-  if (str[0] !== "#") return false;
-  if (!(str.length === 4 || str.length === 7)) return false;
+  if (str[0] !== "#")
+    return false;
+  if (!(str.length === 4 || str.length === 7))
+    return false;
   return isHexChars(str.slice(1));
 }
 function parseHsl(str) {
@@ -3749,18 +3089,11 @@ function parseHsl(str) {
   if (!res) {
     throw new Error('parseHsl: string is not a HSL color: "'.concat(str, '"'));
   }
-  return {
-    h: parseInt(res[1]),
-    s: parseFloat(res[3]),
-    l: parseFloat(res[5])
-  };
+  return { h: parseInt(res[1]), s: parseFloat(res[3]), l: parseFloat(res[5]) };
 }
 function parseColor(color) {
-  if (!color) return {
-    r: 0,
-    g: 0,
-    b: 0
-  };
+  if (!color)
+    return { r: 0, g: 0, b: 0 };
   if (typeof color !== "string") {
     throw new Error("parseColor: expected a string");
   }
@@ -3775,6 +3108,7 @@ function parseColor(color) {
   }
   throw new Error('parseColor: unexpected color format: "'.concat(color, '"'));
 }
+
 function getContrastRatio(bg, fg) {
   const rgb1 = parseColor(bg);
   const rgb2 = parseColor(fg);
@@ -3784,30 +3118,24 @@ function getContrastRatio(bg, fg) {
   const l2 = lrgb_luminance(c2);
   return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
 }
-function rgb_lrgb(_ref9) {
-  let {
-    r,
-    g,
-    b
-  } = _ref9;
+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(_ref10) {
-  let [r, g, b] = _ref10;
+function lrgb_luminance([r, g, b]) {
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
+
 function rgba(color, a) {
   const rgb = parseColor(color);
   return "rgba(".concat(rgb.r, ",").concat(rgb.g, ",").concat(rgb.b, ",").concat(a, ")");
 }
+
 const RGB_RANGE = [0, 255];
 function mixThemeColor(value, options) {
-  const {
-    blendMode
-  } = options;
+  const { blendMode } = options;
   const color = parseColor(value);
   const black = parseColor(options.black);
   const white = parseColor(options.white);
@@ -3835,12 +3163,9 @@ function mixThemeColor(value, options) {
   };
   return rgbToHex(v);
 }
+
 function renderColorValue(str, options) {
-  const {
-    bg,
-    blendMode,
-    colorPalette
-  } = options;
+  const { bg, blendMode, colorPalette } = options;
   if (bg === "white") {
     throw new Error("Cannot blend with white background");
   }
@@ -3892,6 +3217,7 @@ function renderColorValue(str, options) {
 function renderColorHex(color) {
   return typeof color === "string" ? color : color.hex;
 }
+
 function renderThemeColorSchemes(value, config) {
   var _a;
   const colorPalette = (_a = config == null ? void 0 : config.palette) != null ? _a : defaultColorPalette;
@@ -3902,51 +3228,25 @@ function renderThemeColorSchemes(value, config) {
 }
 function renderThemeColorScheme(colorPalette, value) {
   const toneEntries = Object.entries(value);
-  const [, transparentTone] = toneEntries.find(_ref11 => {
-    let [k] = _ref11;
-    return k === "transparent";
-  });
-  const [, defaultTone] = toneEntries.find(_ref12 => {
-    let [k] = _ref12;
-    return k === "default";
-  });
-  const renderedTransparentTone = renderThemeColor(transparentTone, {
-    colorPalette
-  });
-  const renderedDefaultTone = renderThemeColor(defaultTone, {
-    colorPalette
-  });
+  const [, transparentTone] = toneEntries.find(([k]) => k === "transparent");
+  const [, defaultTone] = toneEntries.find(([k]) => k === "default");
+  const renderedTransparentTone = renderThemeColor(transparentTone, { colorPalette });
+  const renderedDefaultTone = renderThemeColor(defaultTone, { colorPalette });
   const bg = renderedDefaultTone.bg;
   if (bg === "white") {
     throw new Error("Cannot blend with white background");
   }
-  return Object.fromEntries([["transparent", renderedTransparentTone], ["default", renderedDefaultTone], ...toneEntries.filter(_ref13 => {
-    let [k] = _ref13;
-    return k !== "default" && k !== "transparent";
-  }).map(_ref14 => {
-    let [k, v] = _ref14;
-    return [k, renderThemeColor(v, {
-      bg,
-      colorPalette
-    })];
-  })]);
+  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;
+  const { colorPalette, bg } = options;
   const blendMode = value._blend || "multiply";
-  const baseBg = renderColorValue(value.bg, {
-    colorPalette,
-    bg,
-    blendMode
-  });
-  const colorOptions = {
-    colorPalette,
-    bg: baseBg,
-    blendMode
-  };
+  const baseBg = renderColorValue(value.bg, { colorPalette, bg, blendMode });
+  const colorOptions = { colorPalette, bg: baseBg, blendMode };
   const button = renderThemeColorButton(value.button, {
     baseBg,
     blendMode,
@@ -3962,26 +3262,17 @@ function renderThemeColor(value, options) {
     umbra: renderColorValue(value.shadow.umbra, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     }),
     penumbra: renderColorValue(value.shadow.penumbra, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     }),
     ambient: renderColorValue(value.shadow.ambient, {
       ...colorOptions,
       bg: void 0,
-      colorPalette: {
-        ...colorPalette,
-        black: "#000000"
-      }
+      colorPalette: { ...colorPalette, black: "#000000" }
     })
   };
   return {
@@ -3990,17 +3281,9 @@ function renderThemeColor(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
     backdrop: renderColorValue(value.backdrop, colorOptions),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    badge: renderThemeColorBadge(value.badge, { baseBg, colorPalette, blendMode }),
     bg: baseBg,
     border: renderColorValue(value.border, colorOptions),
     button,
@@ -4011,16 +3294,8 @@ function renderThemeColor(value, options) {
     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
-    }),
+    input: renderThemeColorInput(value.input, { baseBg, colorPalette, blendMode }),
+    kbd: renderThemeColorKBD(value.kbd, { baseBg, colorPalette, blendMode }),
     link: {
       fg: renderColorValue(value.link.fg, colorOptions)
     },
@@ -4033,20 +3308,12 @@ function renderThemeColor(value, options) {
       from: renderColorValue(value.skeleton.from, colorOptions),
       to: renderColorValue(value.skeleton.to, colorOptions)
     },
-    syntax: renderSyntaxColorTheme(value.syntax, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
+    syntax: renderSyntaxColorTheme(value.syntax, { baseBg, colorPalette, blendMode }),
     selectable
   };
 }
 function renderThemeColorKBD(value, options) {
-  const {
-    baseBg,
-    blendMode,
-    colorPalette
-  } = options;
+  const { baseBg, blendMode, colorPalette } = options;
   const rootOptions = {
     bg: baseBg,
     blendMode,
@@ -4078,11 +3345,7 @@ function renderThemeColorAvatar(value, options) {
   };
 }
 function renderThemeColorAvatarColor(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options;
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options;
   const blendMode = value._blend || "multiply";
   const rootOptions = {
     bg: baseBg,
@@ -4111,11 +3374,7 @@ function renderThemeColorBadge(value, options) {
   };
 }
 function renderThemeColorBadgeColor(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options;
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options;
   const blendMode = rootBlendMode;
   const rootOptions = {
     bg: baseBg,
@@ -4162,11 +3421,7 @@ function renderThemeColorButtonStates(value, options) {
 }
 function renderThemeColorState(value, options) {
   var _a, _b;
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options;
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options;
   const blendMode = value._blend || "multiply";
   const rootOptions = {
     bg: baseBg,
@@ -4184,16 +3439,8 @@ function renderThemeColorState(value, options) {
     accent: {
       fg: renderColorValue(value.accent.fg, colorOptions)
     },
-    avatar: renderThemeColorAvatar(value.avatar, {
-      baseBg,
-      colorPalette,
-      blendMode
-    }),
-    badge: renderThemeColorBadge(value.badge, {
-      baseBg: bg,
-      colorPalette,
-      blendMode
-    }),
+    avatar: renderThemeColorAvatar(value.avatar, { baseBg, colorPalette, blendMode }),
+    badge: renderThemeColorBadge(value.badge, { baseBg: bg, colorPalette, blendMode }),
     bg,
     border: renderColorValue(value.border, colorOptions),
     code: {
@@ -4235,23 +3482,11 @@ function renderInputStatesColorTheme(value, options) {
   };
 }
 function renderInputStateColorTheme(value, options) {
-  const {
-    baseBg,
-    blendMode: rootBlendMode,
-    colorPalette
-  } = options;
+  const { baseBg, blendMode: rootBlendMode, colorPalette } = options;
   const blendMode = value._blend || "multiply";
-  const rootOptions = {
-    colorPalette,
-    bg: baseBg,
-    blendMode: rootBlendMode
-  };
+  const rootOptions = { colorPalette, bg: baseBg, blendMode: rootBlendMode };
   const bg = renderColorValue(value.bg, rootOptions);
-  const colorOptions = {
-    colorPalette,
-    bg,
-    blendMode
-  };
+  const colorOptions = { colorPalette, bg, blendMode };
   return {
     _blend: blendMode,
     bg,
@@ -4282,16 +3517,8 @@ function renderThemeColorSelectableStates(value, options) {
   };
 }
 function renderSyntaxColorTheme(value, options) {
-  const {
-    colorPalette,
-    baseBg,
-    blendMode
-  } = options;
-  const colorOptions = {
-    colorPalette,
-    bg: baseBg,
-    blendMode
-  };
+  const { colorPalette, baseBg, blendMode } = options;
+  const colorOptions = { colorPalette, bg: baseBg, blendMode };
   return {
     atrule: renderColorValue(value.atrule, colorOptions),
     attrName: renderColorValue(value.attrName, colorOptions),
@@ -4331,6 +3558,7 @@ function renderSyntaxColorTheme(value, options) {
     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);
@@ -4357,10 +3585,12 @@ function buildTheme(config) {
   };
   return v2_v0(v2);
 }
-const cache = /* @__PURE__ */new Map();
+
+const cache = /* @__PURE__ */ new Map();
 function getScopedTheme(themeProp, scheme, tone) {
   const cachedTheme = _getCachedTheme(themeProp, scheme, tone);
-  if (cachedTheme) return cachedTheme;
+  if (cachedTheme)
+    return cachedTheme;
   const v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp;
   const v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp);
   const colorScheme_v0 = v0.color[scheme] || v0.color.light;
@@ -4387,17 +3617,22 @@ function getScopedTheme(themeProp, scheme, tone) {
 }
 function _getCachedTheme(rootTheme, scheme, tone) {
   const schemeCache = cache.get(scheme);
-  if (!schemeCache) return void 0;
+  if (!schemeCache)
+    return void 0;
   const toneCache = schemeCache.get(tone);
-  if (!toneCache) return void 0;
+  if (!toneCache)
+    return void 0;
   return toneCache.get(rootTheme);
 }
 function _setCachedTheme(rootTheme, scheme, tone, theme) {
-  if (!cache.has(scheme)) cache.set(scheme, /* @__PURE__ */new Map());
+  if (!cache.has(scheme))
+    cache.set(scheme, /* @__PURE__ */ new Map());
   const schemeCache = cache.get(scheme);
-  if (!schemeCache.has(tone)) schemeCache.set(tone, /* @__PURE__ */new WeakMap());
+  if (!schemeCache.has(tone))
+    schemeCache.set(tone, /* @__PURE__ */ new WeakMap());
   const toneCache = schemeCache.get(tone);
   toneCache.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.esm.js.map