@sanity/ui 3.3.1 → 3.3.2

package/dist/theme2.js

@@ -0,0 +1,4104 @@
+let _sanity_color = require("@sanity/color");
+function createSelectableTones(opts, base, dark, solid, muted) {
+	return {
+		default: _createSelectableStates(opts, base, dark, solid, muted, "default"),
+		primary: _createSelectableStates(opts, base, dark, solid, muted, "primary"),
+		positive: _createSelectableStates(opts, base, dark, solid, muted, "positive"),
+		caution: _createSelectableStates(opts, base, dark, solid, muted, "caution"),
+		critical: _createSelectableStates(opts, base, dark, solid, muted, "critical")
+	};
+}
+function _createSelectableStates(opts, base, dark, solid, muted, tone) {
+	return {
+		enabled: opts.selectable({
+			base,
+			dark,
+			solid,
+			muted,
+			state: "enabled",
+			tone
+		}),
+		hovered: opts.selectable({
+			base,
+			dark,
+			solid,
+			muted,
+			state: "hovered",
+			tone
+		}),
+		pressed: opts.selectable({
+			base,
+			dark,
+			solid,
+			muted,
+			state: "pressed",
+			tone
+		}),
+		selected: opts.selectable({
+			base,
+			dark,
+			solid,
+			muted,
+			state: "selected",
+			tone
+		}),
+		disabled: opts.selectable({
+			base,
+			dark,
+			solid,
+			muted,
+			state: "disabled",
+			tone
+		})
+	};
+}
+function createSolidTones(opts, base, dark, name) {
+	return {
+		default: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "selected"
+			})
+		},
+		transparent: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "selected"
+			})
+		},
+		primary: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "selected"
+			})
+		},
+		positive: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "selected"
+			})
+		},
+		caution: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "selected"
+			})
+		},
+		critical: {
+			enabled: opts.solid({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.solid({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.solid({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.solid({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.solid({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "selected"
+			})
+		}
+	};
+}
+function createButtonTones(opts, base, dark, solid, muted, mode) {
+	return {
+		default: opts.button({
+			base,
+			dark,
+			solid: solid.default,
+			muted: muted.default,
+			mode
+		}),
+		primary: opts.button({
+			base,
+			dark,
+			solid: solid.primary,
+			muted: muted.primary,
+			mode
+		}),
+		positive: opts.button({
+			base,
+			dark,
+			solid: solid.positive,
+			muted: muted.positive,
+			mode
+		}),
+		caution: opts.button({
+			base,
+			dark,
+			solid: solid.caution,
+			muted: muted.caution,
+			mode
+		}),
+		critical: opts.button({
+			base,
+			dark,
+			solid: solid.critical,
+			muted: muted.critical,
+			mode
+		})
+	};
+}
+function createButtonModes(opts, base, dark, solid, muted) {
+	return {
+		default: createButtonTones(opts, base, dark, solid, muted, "default"),
+		ghost: createButtonTones(opts, base, dark, solid, muted, "ghost"),
+		bleed: createButtonTones(opts, base, dark, solid, muted, "bleed")
+	};
+}
+function createCardStates(opts, base, dark, name, solid, muted) {
+	return {
+		enabled: opts.card({
+			base,
+			dark,
+			name,
+			state: "enabled",
+			solid,
+			muted
+		}),
+		disabled: opts.card({
+			base,
+			dark,
+			name,
+			state: "disabled",
+			solid,
+			muted
+		}),
+		hovered: opts.card({
+			base,
+			dark,
+			name,
+			state: "hovered",
+			solid,
+			muted
+		}),
+		pressed: opts.card({
+			base,
+			dark,
+			name,
+			state: "pressed",
+			solid,
+			muted
+		}),
+		selected: opts.card({
+			base,
+			dark,
+			name,
+			state: "selected",
+			solid,
+			muted
+		})
+	};
+}
+const black = "hsl(0, 0%, 0%)", white = "hsl(0, 0%, 100%)", colors = {
+	default: {
+		lightest: "hsl(0, 0%, 95%)",
+		lighter: "hsl(0, 0%, 70%)",
+		light: "hsl(0, 0%, 65%)",
+		base: "hsl(0, 0%, 50%)",
+		dark: "hsl(0, 0%, 35%)",
+		darker: "hsl(0, 0%, 20%)",
+		darkest: "hsl(0, 0%, 5%)"
+	},
+	transparent: {
+		lightest: "hsl(240, 100%, 95%)",
+		lighter: "hsl(240, 100%, 70%)",
+		light: "hsl(240, 100%, 65%)",
+		base: "hsl(240, 100%, 50%)",
+		dark: "hsl(240, 100%, 35%)",
+		darker: "hsl(240, 100%, 20%)",
+		darkest: "hsl(240, 100%, 5%)"
+	},
+	primary: {
+		lightest: "hsl(240, 100%, 95%)",
+		lighter: "hsl(240, 100%, 70%)",
+		light: "hsl(240, 100%, 65%)",
+		base: "hsl(240, 100%, 50%)",
+		dark: "hsl(240, 100%, 35%)",
+		darker: "hsl(240, 100%, 20%)",
+		darkest: "hsl(240, 100%, 5%)"
+	},
+	positive: {
+		lightest: "hsl(120, 100%, 95%)",
+		lighter: "hsl(120, 100%, 70%)",
+		light: "hsl(120, 100%, 65%)",
+		base: "hsl(120, 100%, 50%)",
+		dark: "hsl(120, 100%, 35%)",
+		darker: "hsl(120, 100%, 20%)",
+		darkest: "hsl(120, 100%, 5%)"
+	},
+	caution: {
+		lightest: "hsl(60, 100%, 95%)",
+		lighter: "hsl(60, 100%, 70%)",
+		light: "hsl(60, 100%, 65%)",
+		base: "hsl(60, 100%, 50%)",
+		dark: "hsl(60, 100%, 35%)",
+		darker: "hsl(60, 100%, 20%)",
+		darkest: "hsl(60, 100%, 5%)"
+	},
+	critical: {
+		lightest: "hsl(0, 100%, 95%)",
+		lighter: "hsl(0, 100%, 70%)",
+		light: "hsl(0, 100%, 65%)",
+		base: "hsl(0, 100%, 50%)",
+		dark: "hsl(0, 100%, 35%)",
+		darker: "hsl(0, 100%, 20%)",
+		darkest: "hsl(0, 100%, 5%)"
+	}
+}, spots = {
+	gray: "hsl(0, 0%, 50%)",
+	red: "hsl(0, 100%, 50%)",
+	orange: "hsl(30, 100%, 50%)",
+	yellow: "hsl(60, 100%, 50%)",
+	green: "hsl(120, 100%, 50%)",
+	cyan: "hsl(180, 100%, 50%)",
+	blue: "hsl(240, 100%, 50%)",
+	purple: "hsl(270, 100%, 50%)",
+	magenta: "hsl(300, 100%, 50%)"
+}, tones = {
+	transparent: {
+		bg: [colors.transparent.darkest, colors.transparent.lightest],
+		fg: [colors.transparent.lightest, colors.transparent.darkest],
+		border: [colors.transparent.darker, colors.transparent.lighter],
+		focusRing: [colors.transparent.base, colors.transparent.base]
+	},
+	primary: {
+		bg: [colors.primary.darkest, colors.primary.lightest],
+		fg: [colors.primary.lightest, colors.primary.darkest],
+		border: [colors.primary.darker, colors.primary.lighter],
+		focusRing: [colors.primary.base, colors.primary.base]
+	},
+	positive: {
+		bg: [colors.positive.darkest, colors.positive.lightest],
+		fg: [colors.positive.lightest, colors.positive.darkest],
+		border: [colors.positive.darker, colors.positive.lighter],
+		focusRing: [colors.positive.base, colors.positive.base]
+	},
+	caution: {
+		bg: [colors.caution.darkest, colors.caution.lightest],
+		fg: [colors.caution.lightest, colors.caution.darkest],
+		border: [colors.caution.darker, colors.caution.lighter],
+		focusRing: [colors.caution.base, colors.caution.base]
+	},
+	critical: {
+		bg: [colors.critical.darkest, colors.critical.lightest],
+		fg: [colors.critical.lightest, colors.critical.darkest],
+		border: [colors.critical.darker, colors.critical.lighter],
+		focusRing: [colors.critical.base, colors.critical.base]
+	}
+}, defaultOpts = {
+	base: ({ dark, name }) => name === "default" ? {
+		bg: dark ? black : white,
+		fg: dark ? white : black,
+		border: dark ? colors.default.darkest : colors.default.lightest,
+		focusRing: colors.primary.base,
+		shadow: {
+			outline: black,
+			umbra: black,
+			penumbra: black,
+			ambient: black
+		},
+		skeleton: {
+			from: dark ? white : black,
+			to: dark ? white : black
+		}
+	} : {
+		bg: tones[name].bg[+!dark],
+		fg: tones[name].fg[+!dark],
+		border: tones[name].border[+!dark],
+		focusRing: tones[name].focusRing[+!dark],
+		shadow: {
+			outline: black,
+			umbra: black,
+			penumbra: black,
+			ambient: black
+		},
+		skeleton: {
+			from: dark ? white : black,
+			to: dark ? white : black
+		}
+	},
+	solid: ({ base, dark, state, tone }) => {
+		let color = colors[tone];
+		return state === "hovered" ? {
+			bg: dark ? color.light : color.dark,
+			bg2: dark ? color.light : color.dark,
+			border: dark ? color.lighter : color.darker,
+			fg: dark ? color.darkest : color.lightest,
+			icon: dark ? color.darkest : color.lightest,
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		} : {
+			bg: color.base,
+			bg2: color.base,
+			border: dark ? color.light : color.dark,
+			fg: dark ? color.darkest : color.lightest,
+			icon: dark ? color.darkest : color.lightest,
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		};
+	},
+	muted: ({ base, dark, state, tone }) => {
+		let color = colors[tone];
+		return state === "hovered" ? {
+			bg: dark ? color.darker : color.lighter,
+			bg2: dark ? color.darker : color.lighter,
+			border: dark ? color.lighter : color.darker,
+			fg: dark ? color.lightest : color.darkest,
+			icon: dark ? color.lightest : color.darkest,
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		} : {
+			bg: dark ? color.darkest : color.lightest,
+			bg2: dark ? color.darkest : color.lightest,
+			border: dark ? color.darker : color.lighter,
+			fg: dark ? color.lighter : color.darker,
+			icon: dark ? color.lighter : color.darker,
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		};
+	},
+	button: ({ base, mode, muted, solid }) => mode === "bleed" ? {
+		...muted,
+		enabled: {
+			bg: "transparent",
+			bg2: "transparent",
+			fg: muted.enabled.fg,
+			icon: muted.enabled.fg,
+			border: "transparent",
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		},
+		hovered: {
+			bg: muted.enabled.bg,
+			bg2: muted.enabled.bg,
+			fg: muted.hovered.fg,
+			icon: muted.hovered.fg,
+			border: "transparent",
+			muted: { fg: black },
+			accent: { fg: black },
+			link: { fg: black },
+			code: {
+				bg: black,
+				fg: black
+			},
+			skeleton: base.skeleton
+		}
+	} : mode === "ghost" ? {
+		...solid,
+		enabled: muted.enabled
+	} : solid,
+	card: ({ base }) => ({
+		bg: black,
+		bg2: black,
+		fg: black,
+		icon: black,
+		border: black,
+		muted: { fg: black },
+		accent: { fg: black },
+		link: { fg: black },
+		code: {
+			bg: black,
+			fg: black
+		},
+		skeleton: base.skeleton
+	}),
+	input: () => ({
+		bg: black,
+		bg2: black,
+		fg: black,
+		border: black,
+		placeholder: black
+	}),
+	selectable: ({ muted, state, tone }) => muted[tone][state],
+	spot: ({ key }) => spots[key],
+	syntax: () => ({
+		atrule: black,
+		attrName: black,
+		attrValue: black,
+		attribute: black,
+		boolean: black,
+		builtin: black,
+		cdata: black,
+		char: black,
+		class: black,
+		className: black,
+		comment: black,
+		constant: black,
+		deleted: black,
+		doctype: black,
+		entity: black,
+		function: black,
+		hexcode: black,
+		id: black,
+		important: black,
+		inserted: black,
+		keyword: black,
+		number: black,
+		operator: black,
+		prolog: black,
+		property: black,
+		pseudoClass: black,
+		pseudoElement: black,
+		punctuation: black,
+		regex: black,
+		selector: black,
+		string: black,
+		symbol: black,
+		tag: black,
+		unit: black,
+		url: black,
+		variable: black
+	})
+};
+function createInputModes(opts, base, dark, solid, muted) {
+	return {
+		default: {
+			enabled: opts.input({
+				base,
+				dark,
+				mode: "default",
+				state: "enabled",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			disabled: opts.input({
+				base,
+				dark,
+				mode: "default",
+				state: "disabled",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			hovered: opts.input({
+				base,
+				dark,
+				mode: "default",
+				state: "hovered",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			readOnly: opts.input({
+				base,
+				dark,
+				mode: "default",
+				state: "readOnly",
+				solid: solid.default,
+				muted: muted.default
+			})
+		},
+		invalid: {
+			enabled: opts.input({
+				base,
+				dark,
+				mode: "invalid",
+				state: "enabled",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			disabled: opts.input({
+				base,
+				dark,
+				mode: "invalid",
+				state: "disabled",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			hovered: opts.input({
+				base,
+				dark,
+				mode: "invalid",
+				state: "hovered",
+				solid: solid.default,
+				muted: muted.default
+			}),
+			readOnly: opts.input({
+				base,
+				dark,
+				mode: "invalid",
+				state: "readOnly",
+				solid: solid.default,
+				muted: muted.default
+			})
+		}
+	};
+}
+function createMutedTones(opts, base, dark, name) {
+	return {
+		default: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "default",
+				name,
+				state: "selected"
+			})
+		},
+		transparent: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "transparent",
+				name,
+				state: "selected"
+			})
+		},
+		primary: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "primary",
+				name,
+				state: "selected"
+			})
+		},
+		positive: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "positive",
+				name,
+				state: "selected"
+			})
+		},
+		caution: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "caution",
+				name,
+				state: "selected"
+			})
+		},
+		critical: {
+			enabled: opts.muted({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "enabled"
+			}),
+			disabled: opts.muted({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "disabled"
+			}),
+			hovered: opts.muted({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "hovered"
+			}),
+			pressed: opts.muted({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "pressed"
+			}),
+			selected: opts.muted({
+				base,
+				dark,
+				tone: "critical",
+				name,
+				state: "selected"
+			})
+		}
+	};
+}
+function createSpot(opts, base, dark) {
+	return {
+		gray: opts.spot({
+			base,
+			dark,
+			key: "gray"
+		}),
+		blue: opts.spot({
+			base,
+			dark,
+			key: "blue"
+		}),
+		purple: opts.spot({
+			base,
+			dark,
+			key: "purple"
+		}),
+		magenta: opts.spot({
+			base,
+			dark,
+			key: "magenta"
+		}),
+		red: opts.spot({
+			base,
+			dark,
+			key: "red"
+		}),
+		orange: opts.spot({
+			base,
+			dark,
+			key: "orange"
+		}),
+		yellow: opts.spot({
+			base,
+			dark,
+			key: "yellow"
+		}),
+		green: opts.spot({
+			base,
+			dark,
+			key: "green"
+		}),
+		cyan: opts.spot({
+			base,
+			dark,
+			key: "cyan"
+		})
+	};
+}
+/**
+* @public
+* @deprecated Use `buildColorTheme` instead.
+*/
+function createColorTheme(partialOpts = {}) {
+	let builders = {
+		...defaultOpts,
+		...partialOpts
+	};
+	return {
+		light: _createColorScheme(builders, !1),
+		dark: _createColorScheme(builders, !0)
+	};
+}
+/**
+* @internal
+*/
+function _createColorScheme(opts, dark) {
+	return {
+		default: _createColor(opts, dark, "default"),
+		transparent: _createColor(opts, dark, "transparent"),
+		primary: _createColor(opts, dark, "primary"),
+		positive: _createColor(opts, dark, "positive"),
+		caution: _createColor(opts, dark, "caution"),
+		critical: _createColor(opts, dark, "critical")
+	};
+}
+/**
+* @internal
+*/
+function _createColor(opts, dark, name) {
+	let base = opts.base({
+		dark,
+		name
+	}), solid = createSolidTones(opts, base, dark, name), muted = createMutedTones(opts, base, dark, name);
+	return {
+		base,
+		button: createButtonModes(opts, base, dark, solid, muted),
+		card: createCardStates(opts, base, dark, name, solid, muted),
+		dark,
+		input: createInputModes(opts, base, dark, solid, muted),
+		selectable: createSelectableTones(opts, base, dark, solid, muted),
+		spot: createSpot(opts, base, dark),
+		syntax: opts.syntax({
+			base,
+			dark
+		}),
+		solid,
+		muted
+	};
+}
+const defaultThemeConfig = {
+	_version: 2,
+	avatar: {
+		sizes: [
+			{
+				distance: -4,
+				size: 19
+			},
+			{
+				distance: -4,
+				size: 25
+			},
+			{
+				distance: -8,
+				size: 33
+			},
+			{
+				distance: -12,
+				size: 49
+			}
+		],
+		focusRing: {
+			offset: 1,
+			width: 1
+		}
+	},
+	button: {
+		textWeight: "medium",
+		border: { width: 1 },
+		focusRing: {
+			offset: -1,
+			width: 1
+		}
+	},
+	card: {
+		border: { width: 1 },
+		focusRing: {
+			offset: -1,
+			width: 1
+		},
+		shadow: { outline: .5 }
+	},
+	container: [
+		320,
+		640,
+		960,
+		1280,
+		1600,
+		1920
+	],
+	media: [
+		360,
+		600,
+		900,
+		1200,
+		1800,
+		2400
+	],
+	layer: {
+		dialog: { zOffset: 600 },
+		popover: { zOffset: 400 },
+		tooltip: { zOffset: 200 }
+	},
+	radius: [
+		0,
+		1,
+		3,
+		6,
+		9,
+		12,
+		21
+	],
+	shadow: [
+		null,
+		{
+			umbra: [
+				0,
+				0,
+				0,
+				0
+			],
+			penumbra: [
+				0,
+				0,
+				0,
+				0
+			],
+			ambient: [
+				0,
+				0,
+				0,
+				0
+			]
+		},
+		{
+			umbra: [
+				0,
+				3,
+				5,
+				-2
+			],
+			penumbra: [
+				0,
+				6,
+				10,
+				0
+			],
+			ambient: [
+				0,
+				1,
+				18,
+				1
+			]
+		},
+		{
+			umbra: [
+				0,
+				7,
+				8,
+				-4
+			],
+			penumbra: [
+				0,
+				12,
+				17,
+				2
+			],
+			ambient: [
+				0,
+				5,
+				22,
+				4
+			]
+		},
+		{
+			umbra: [
+				0,
+				9,
+				11,
+				-5
+			],
+			penumbra: [
+				0,
+				18,
+				28,
+				2
+			],
+			ambient: [
+				0,
+				7,
+				34,
+				6
+			]
+		},
+		{
+			umbra: [
+				0,
+				11,
+				15,
+				-7
+			],
+			penumbra: [
+				0,
+				24,
+				38,
+				3
+			],
+			ambient: [
+				0,
+				9,
+				46,
+				8
+			]
+		}
+	],
+	space: [
+		0,
+		4,
+		8,
+		12,
+		20,
+		32,
+		52,
+		84,
+		136,
+		220
+	],
+	input: {
+		border: { width: 1 },
+		checkbox: {
+			size: 17,
+			focusRing: {
+				offset: -1,
+				width: 1
+			}
+		},
+		radio: {
+			size: 17,
+			markSize: 9,
+			focusRing: {
+				offset: -1,
+				width: 1
+			}
+		},
+		switch: {
+			width: 25,
+			height: 17,
+			padding: 5,
+			transitionDurationMs: 150,
+			transitionTimingFunction: "ease-out",
+			focusRing: {
+				offset: 1,
+				width: 1
+			}
+		},
+		select: { focusRing: {
+			offset: -1,
+			width: 1
+		} },
+		text: { focusRing: {
+			offset: -1,
+			width: 1
+		} }
+	},
+	style: { button: { root: { transition: "background-color 100ms,border-color 100ms,color 100ms" } } }
+}, defaultThemeFonts = {
+	code: {
+		family: "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+		weights: {
+			regular: 400,
+			medium: 500,
+			semibold: 600,
+			bold: 700
+		},
+		sizes: [
+			{
+				ascenderHeight: 4,
+				descenderHeight: 4,
+				fontSize: 10,
+				iconSize: 17,
+				lineHeight: 15,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 5,
+				descenderHeight: 5,
+				fontSize: 13,
+				iconSize: 21,
+				lineHeight: 19,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 6,
+				descenderHeight: 6,
+				fontSize: 16,
+				iconSize: 25,
+				lineHeight: 23,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 7,
+				descenderHeight: 7,
+				fontSize: 19,
+				iconSize: 29,
+				lineHeight: 27,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 8,
+				descenderHeight: 8,
+				fontSize: 22,
+				iconSize: 33,
+				lineHeight: 31,
+				letterSpacing: 0
+			}
+		]
+	},
+	heading: {
+		family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif",
+		weights: {
+			regular: 700,
+			medium: 800,
+			semibold: 900,
+			bold: 900
+		},
+		sizes: [
+			{
+				ascenderHeight: 5,
+				descenderHeight: 5,
+				fontSize: 13,
+				iconSize: 17,
+				lineHeight: 19,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 6,
+				descenderHeight: 6,
+				fontSize: 16,
+				iconSize: 25,
+				lineHeight: 23,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 7,
+				descenderHeight: 7,
+				fontSize: 21,
+				iconSize: 33,
+				lineHeight: 29,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 8,
+				descenderHeight: 8,
+				fontSize: 27,
+				iconSize: 41,
+				lineHeight: 35,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 9.5,
+				descenderHeight: 8.5,
+				fontSize: 33,
+				iconSize: 49,
+				lineHeight: 41,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 10.5,
+				descenderHeight: 9.5,
+				fontSize: 38,
+				iconSize: 53,
+				lineHeight: 47,
+				letterSpacing: 0
+			}
+		]
+	},
+	label: {
+		family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", system-ui, sans-serif",
+		weights: {
+			regular: 600,
+			medium: 700,
+			semibold: 800,
+			bold: 900
+		},
+		sizes: [
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 8.1,
+				iconSize: 13,
+				lineHeight: 10,
+				letterSpacing: .5
+			},
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 9.5,
+				iconSize: 15,
+				lineHeight: 11,
+				letterSpacing: .5
+			},
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 10.8,
+				iconSize: 17,
+				lineHeight: 12,
+				letterSpacing: .5
+			},
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 12.25,
+				iconSize: 19,
+				lineHeight: 13,
+				letterSpacing: .5
+			},
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 13.6,
+				iconSize: 21,
+				lineHeight: 14,
+				letterSpacing: .5
+			},
+			{
+				ascenderHeight: 2,
+				descenderHeight: 2,
+				fontSize: 15,
+				iconSize: 23,
+				lineHeight: 15,
+				letterSpacing: .5
+			}
+		]
+	},
+	text: {
+		family: "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Liberation Sans\", Helvetica, Arial, system-ui, sans-serif",
+		weights: {
+			regular: 400,
+			medium: 500,
+			semibold: 600,
+			bold: 700
+		},
+		sizes: [
+			{
+				ascenderHeight: 4,
+				descenderHeight: 4,
+				fontSize: 10,
+				iconSize: 17,
+				lineHeight: 15,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 5,
+				descenderHeight: 5,
+				fontSize: 13,
+				iconSize: 21,
+				lineHeight: 19,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 6,
+				descenderHeight: 6,
+				fontSize: 15,
+				iconSize: 25,
+				lineHeight: 23,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 7,
+				descenderHeight: 7,
+				fontSize: 18,
+				iconSize: 29,
+				lineHeight: 27,
+				letterSpacing: 0
+			},
+			{
+				ascenderHeight: 8,
+				descenderHeight: 8,
+				fontSize: 21,
+				iconSize: 33,
+				lineHeight: 31,
+				letterSpacing: 0
+			}
+		]
+	}
+}, cache$4 = /* @__PURE__ */ new WeakMap();
+/** @internal */
+function themeColor_v0_v2(color_v0) {
+	let cached_v2 = cache$4.get(color_v0);
+	if (cached_v2) return cached_v2;
+	let base = stateThemeColor_v0_v2(color_v0, color_v0.card.enabled), color_v2 = {
+		_blend: color_v0._blend || (color_v0.dark ? "screen" : "multiply"),
+		_dark: color_v0.dark,
+		accent: base.accent,
+		avatar: base.avatar,
+		backdrop: color_v0.base.shadow.ambient,
+		badge: base.badge,
+		bg: color_v0.base.bg,
+		border: color_v0.base.border,
+		button: {
+			default: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.default),
+			ghost: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.ghost),
+			bleed: stateTonesThemeColor_v0_v2(color_v0, color_v0.button.bleed)
+		},
+		code: base.code,
+		fg: color_v0.base.fg,
+		focusRing: color_v0.base.focusRing,
+		icon: base.muted.fg,
+		input: {
+			default: inputStatesThemeColor_v0_v2(color_v0.input.default),
+			invalid: inputStatesThemeColor_v0_v2(color_v0.input.invalid)
+		},
+		kbd: base.kbd,
+		link: base.link,
+		muted: {
+			...base.muted,
+			bg: color_v0.selectable?.default.enabled.bg2 || color_v0.base.bg
+		},
+		selectable: stateTonesThemeColor_v0_v2(color_v0, color_v0.selectable || color_v0.muted),
+		shadow: color_v0.base.shadow,
+		skeleton: {
+			from: color_v0.skeleton?.from || color_v0.base.border,
+			to: color_v0.skeleton?.to || color_v0.base.border
+		},
+		syntax: color_v0.syntax
+	};
+	return cache$4.set(color_v0, color_v2), color_v2;
+}
+function stateTonesThemeColor_v0_v2(v0, t) {
+	return {
+		default: {
+			enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.default.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
+		},
+		neutral: {
+			enabled: stateThemeColor_v0_v2(v0, t.default.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.default.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.default.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.default.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.default.disabled)
+		},
+		primary: {
+			enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
+		},
+		suggest: {
+			enabled: stateThemeColor_v0_v2(v0, t.primary.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.primary.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.primary.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.primary.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.primary.disabled)
+		},
+		positive: {
+			enabled: stateThemeColor_v0_v2(v0, t.positive.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.positive.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.positive.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.positive.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.positive.disabled)
+		},
+		caution: {
+			enabled: stateThemeColor_v0_v2(v0, t.caution.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.caution.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.caution.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.caution.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.caution.disabled)
+		},
+		critical: {
+			enabled: stateThemeColor_v0_v2(v0, t.critical.enabled),
+			hovered: stateThemeColor_v0_v2(v0, t.critical.hovered),
+			pressed: stateThemeColor_v0_v2(v0, t.critical.pressed),
+			selected: stateThemeColor_v0_v2(v0, t.critical.selected),
+			disabled: stateThemeColor_v0_v2(v0, t.critical.disabled)
+		}
+	};
+}
+function stateThemeColor_v0_v2(v0, state) {
+	return {
+		...state,
+		avatar: {
+			gray: {
+				bg: v0.spot.gray,
+				fg: v0.base.bg
+			},
+			blue: {
+				bg: v0.spot.blue,
+				fg: v0.base.bg
+			},
+			purple: {
+				bg: v0.spot.purple,
+				fg: v0.base.bg
+			},
+			magenta: {
+				bg: v0.spot.magenta,
+				fg: v0.base.bg
+			},
+			red: {
+				bg: v0.spot.red,
+				fg: v0.base.bg
+			},
+			orange: {
+				bg: v0.spot.orange,
+				fg: v0.base.bg
+			},
+			yellow: {
+				bg: v0.spot.yellow,
+				fg: v0.base.bg
+			},
+			green: {
+				bg: v0.spot.green,
+				fg: v0.base.bg
+			},
+			cyan: {
+				bg: v0.spot.cyan,
+				fg: v0.base.bg
+			}
+		},
+		badge: {
+			default: {
+				bg: v0.muted.default.enabled.bg,
+				fg: v0.muted.default.enabled.fg,
+				dot: v0.muted.default.enabled.muted.fg,
+				icon: v0.muted.default.enabled.muted.fg
+			},
+			neutral: {
+				bg: v0.muted.transparent.enabled.bg,
+				fg: v0.muted.transparent.enabled.fg,
+				dot: v0.muted.transparent.enabled.muted.fg,
+				icon: v0.muted.transparent.enabled.muted.fg
+			},
+			primary: {
+				bg: v0.muted.primary.enabled.bg,
+				fg: v0.muted.primary.enabled.fg,
+				dot: v0.muted.primary.enabled.muted.fg,
+				icon: v0.muted.primary.enabled.muted.fg
+			},
+			suggest: {
+				bg: v0.muted.primary.enabled.bg,
+				fg: v0.muted.primary.enabled.fg,
+				dot: v0.muted.primary.enabled.muted.fg,
+				icon: v0.muted.primary.enabled.muted.fg
+			},
+			positive: {
+				bg: v0.muted.positive.enabled.bg,
+				fg: v0.muted.positive.enabled.fg,
+				dot: v0.muted.positive.enabled.muted.fg,
+				icon: v0.muted.positive.enabled.muted.fg
+			},
+			caution: {
+				bg: v0.muted.caution.enabled.bg,
+				fg: v0.muted.caution.enabled.fg,
+				dot: v0.muted.caution.enabled.muted.fg,
+				icon: v0.muted.caution.enabled.muted.fg
+			},
+			critical: {
+				bg: v0.muted.critical.enabled.bg,
+				fg: v0.muted.critical.enabled.fg,
+				dot: v0.muted.critical.enabled.muted.fg,
+				icon: v0.muted.critical.enabled.muted.fg
+			}
+		},
+		kbd: {
+			bg: v0.muted.default.enabled.bg,
+			fg: v0.muted.default.enabled.fg,
+			border: v0.muted.default.enabled.border
+		},
+		muted: {
+			...v0.muted.default.enabled.muted,
+			bg: state.bg2 || state.bg
+		},
+		skeleton: {
+			from: state.skeleton?.from || state.border,
+			to: state.skeleton?.to || state.border
+		}
+	};
+}
+function inputStatesThemeColor_v0_v2(states) {
+	return {
+		enabled: inputStateThemeColor_v0_v2(states.enabled),
+		disabled: inputStateThemeColor_v0_v2(states.disabled),
+		readOnly: inputStateThemeColor_v0_v2(states.readOnly),
+		hovered: inputStateThemeColor_v0_v2(states.hovered)
+	};
+}
+function inputStateThemeColor_v0_v2(state) {
+	return {
+		bg: state.bg,
+		border: state.border,
+		fg: state.fg,
+		muted: { bg: state.bg2 },
+		placeholder: state.placeholder
+	};
+}
+const cache$3 = /* @__PURE__ */ new WeakMap();
+/** @public */
+function getTheme_v2(theme) {
+	if (theme.sanity.v2?._resolved) return theme.sanity.v2;
+	let cached_v2 = cache$3.get(theme);
+	if (cached_v2) return cached_v2;
+	let v2 = {
+		_version: 2,
+		_resolved: !0,
+		avatar: {
+			...defaultThemeConfig.avatar,
+			...theme.sanity.avatar
+		},
+		button: {
+			...defaultThemeConfig.button,
+			...theme.sanity.button
+		},
+		card: defaultThemeConfig.card,
+		color: themeColor_v0_v2(theme.sanity.color),
+		container: theme.sanity.container,
+		font: theme.sanity.fonts,
+		input: {
+			...defaultThemeConfig.input,
+			...theme.sanity.input,
+			checkbox: {
+				...defaultThemeConfig.input.checkbox,
+				...theme.sanity.input.checkbox
+			},
+			radio: {
+				...defaultThemeConfig.input.radio,
+				...theme.sanity.input.radio
+			},
+			switch: {
+				...defaultThemeConfig.input.switch,
+				...theme.sanity.input.switch
+			}
+		},
+		layer: theme.sanity.layer ?? defaultThemeConfig.layer,
+		media: theme.sanity.media,
+		radius: theme.sanity.radius,
+		shadow: theme.sanity.shadows,
+		space: theme.sanity.space,
+		style: theme.sanity.styles
+	};
+	return cache$3.set(theme, v2), v2;
+}
+/** @internal */
+function is_v0(themeProp) {
+	return themeProp._version === 0;
+}
+/** @internal */
+function is_v2(themeProp) {
+	return themeProp._version === 2;
+}
+const cache$2 = /* @__PURE__ */ new WeakMap();
+/** @internal */
+function v0_v2(v0) {
+	if (v0.v2) return v0.v2;
+	let cached_v2 = cache$2.get(v0);
+	if (cached_v2) return cached_v2;
+	let { avatar, button, color, container, focusRing: _unused_focusRing, fonts: font, input, layer, media, radius, shadows: shadow, space, styles: style } = v0, v2 = {
+		_version: 2,
+		avatar: {
+			...defaultThemeConfig.avatar,
+			...avatar
+		},
+		button: {
+			...defaultThemeConfig.button,
+			...button
+		},
+		card: defaultThemeConfig.card,
+		color: {
+			light: {
+				transparent: themeColor_v0_v2(color.light.transparent),
+				default: themeColor_v0_v2(color.light.default),
+				neutral: themeColor_v0_v2(color.light.transparent),
+				primary: themeColor_v0_v2(color.light.primary),
+				suggest: themeColor_v0_v2(color.light.primary),
+				positive: themeColor_v0_v2(color.light.positive),
+				caution: themeColor_v0_v2(color.light.caution),
+				critical: themeColor_v0_v2(color.light.critical)
+			},
+			dark: {
+				transparent: themeColor_v0_v2(color.dark.transparent),
+				default: themeColor_v0_v2(color.dark.default),
+				neutral: themeColor_v0_v2(color.dark.transparent),
+				primary: themeColor_v0_v2(color.dark.primary),
+				suggest: themeColor_v0_v2(color.dark.primary),
+				positive: themeColor_v0_v2(color.dark.positive),
+				caution: themeColor_v0_v2(color.dark.caution),
+				critical: themeColor_v0_v2(color.dark.critical)
+			}
+		},
+		container,
+		font,
+		input: {
+			...defaultThemeConfig.input,
+			...input,
+			checkbox: {
+				...defaultThemeConfig.input.checkbox,
+				...input.checkbox
+			},
+			radio: {
+				...defaultThemeConfig.input.radio,
+				...input.radio
+			},
+			switch: {
+				...defaultThemeConfig.input.switch,
+				...input.switch
+			}
+		},
+		layer: layer ?? defaultThemeConfig.layer,
+		media,
+		radius,
+		shadow,
+		space,
+		style
+	};
+	return cache$2.set(v0, v2), v2;
+}
+/**
+* Defines a lazy, self-replacing property on `obj`.
+*
+* On first access the `factory` is called and the getter is replaced with the
+* computed plain value — subsequent reads have zero overhead.
+*
+* The property is enumerable (visible in `Object.keys` / spread) in both states.
+*
+* @internal
+*/
+function defineLazyProperty(obj, key, factory) {
+	Object.defineProperty(obj, key, {
+		get() {
+			let value = factory();
+			return Object.defineProperty(obj, key, {
+				value,
+				enumerable: !0,
+				writable: !1,
+				configurable: !1
+			}), value;
+		},
+		enumerable: !0,
+		configurable: !0
+	});
+}
+const cache$1 = /* @__PURE__ */ new WeakMap(), V0_TONES = [
+	"transparent",
+	"default",
+	"primary",
+	"positive",
+	"caution",
+	"critical"
+];
+function lazyV0Scheme(schemeKey, color) {
+	let scheme = {};
+	for (let tone of V0_TONES) defineLazyProperty(scheme, tone, () => themeColor_v2_v0(color[schemeKey][tone]));
+	return scheme;
+}
+/** @internal */
+function v2_v0(v2) {
+	let cachedTheme = cache$1.get(v2);
+	if (cachedTheme) return cachedTheme;
+	let { avatar, button, color, container, font: fonts, input, media, radius, shadow: shadows, space, style: styles } = v2, v0Color = {};
+	defineLazyProperty(v0Color, "light", () => lazyV0Scheme("light", color)), defineLazyProperty(v0Color, "dark", () => lazyV0Scheme("dark", color));
+	let theme = {
+		_version: 0,
+		avatar,
+		button,
+		container,
+		color: v0Color,
+		focusRing: input.text.focusRing,
+		fonts,
+		input,
+		media,
+		radius,
+		shadows,
+		space,
+		styles,
+		v2
+	};
+	return cache$1.set(v2, theme), theme;
+}
+function themeColor_v2_v0(color_v2) {
+	return {
+		base: {
+			bg: color_v2.bg,
+			fg: color_v2.fg,
+			border: color_v2.border,
+			focusRing: color_v2.focusRing,
+			shadow: color_v2.shadow
+		},
+		button: color_v2.button,
+		card: color_v2.selectable.default,
+		dark: color_v2._dark,
+		input: {
+			default: inputStatesThemeColor_v2_v0(color_v2.input.default),
+			invalid: inputStatesThemeColor_v2_v0(color_v2.input.invalid)
+		},
+		muted: {
+			...color_v2.button.ghost,
+			transparent: color_v2.button.ghost.default
+		},
+		solid: {
+			...color_v2.button.default,
+			transparent: color_v2.button.default.default
+		},
+		selectable: color_v2.selectable,
+		spot: {
+			gray: color_v2.avatar.gray.bg,
+			blue: color_v2.avatar.blue.bg,
+			purple: color_v2.avatar.purple.bg,
+			magenta: color_v2.avatar.magenta.bg,
+			red: color_v2.avatar.red.bg,
+			orange: color_v2.avatar.orange.bg,
+			yellow: color_v2.avatar.yellow.bg,
+			green: color_v2.avatar.green.bg,
+			cyan: color_v2.avatar.cyan.bg
+		},
+		syntax: color_v2.syntax
+	};
+}
+function inputStatesThemeColor_v2_v0(t) {
+	return {
+		enabled: inputStateThemeColor_v2_v0(t.enabled),
+		disabled: inputStateThemeColor_v2_v0(t.disabled),
+		readOnly: inputStateThemeColor_v2_v0(t.readOnly),
+		hovered: inputStateThemeColor_v2_v0(t.hovered)
+	};
+}
+function inputStateThemeColor_v2_v0(t) {
+	return {
+		bg: t.bg,
+		bg2: t.muted.bg,
+		border: t.border,
+		fg: t.fg,
+		placeholder: t.placeholder
+	};
+}
+/** @public */
+const THEME_COLOR_SCHEMES = ["light", "dark"], THEME_COLOR_BLEND_MODES = ["multiply", "screen"], THEME_COLOR_CARD_TONES = [
+	"transparent",
+	"default",
+	"neutral",
+	"primary",
+	"suggest",
+	"positive",
+	"caution",
+	"critical"
+], THEME_COLOR_STATE_TONES = [
+	"default",
+	"neutral",
+	"primary",
+	"suggest",
+	"positive",
+	"caution",
+	"critical"
+], THEME_COLOR_STATES = [
+	"enabled",
+	"hovered",
+	"pressed",
+	"selected",
+	"disabled"
+], THEME_COLOR_BUTTON_MODES = [
+	"default",
+	"ghost",
+	"bleed"
+], THEME_COLOR_INPUT_MODES = ["default", "invalid"], THEME_COLOR_INPUT_STATES = [
+	"enabled",
+	"hovered",
+	"readOnly",
+	"disabled"
+], THEME_COLOR_AVATAR_COLORS = _sanity_color.COLOR_HUES;
+/** @internal */
+function isColorBlendModeValue(str) {
+	return THEME_COLOR_BLEND_MODES.includes(str);
+}
+/** @internal */
+function isColorHueKey(str) {
+	return _sanity_color.COLOR_HUES.includes(str);
+}
+/** @internal */
+function isColorTintKey(str) {
+	return _sanity_color.COLOR_TINTS.includes(str);
+}
+/** @internal */
+function isColorButtonMode(str) {
+	return THEME_COLOR_BUTTON_MODES.includes(str);
+}
+/** @public */
+const COLOR_CONFIG_STATE_KEYS = [
+	"_hue",
+	"bg",
+	"fg",
+	"border",
+	"focusRing",
+	"muted/fg",
+	"accent/fg",
+	"link/fg",
+	"code/bg",
+	"code/fg",
+	"skeleton/from",
+	"skeleton/to",
+	"status/dot",
+	"status/icon"
+], COLOR_CONFIG_CARD_KEYS = [
+	...COLOR_CONFIG_STATE_KEYS,
+	"_hue",
+	"bg",
+	"fg",
+	"border",
+	"focusRing",
+	"shadow/outline",
+	"shadow/umbra",
+	"shadow/penumbra",
+	"shadow/ambient"
+], COLOR_CONFIG_BLEND_KEYS = ["_blend"], COLOR_CONFIG_AVATAR_COLORS = ["*", ...THEME_COLOR_AVATAR_COLORS], COLOR_CONFIG_CARD_TONES = ["*", ...THEME_COLOR_CARD_TONES], COLOR_CONFIG_STATE_TONES = ["*", ...THEME_COLOR_STATE_TONES], COLOR_CONFIG_STATES = ["*", ...THEME_COLOR_STATES], COLOR_CONFIG_INPUT_MODES = ["*", ...THEME_COLOR_INPUT_MODES], COLOR_CONFIG_INPUT_STATES = ["*", ...THEME_COLOR_INPUT_STATES];
+/** @internal */
+function parseTokenKey(str) {
+	let segments = str.split("/"), segment0 = segments.shift() || "";
+	if (isColorConfigBaseTone(segment0)) {
+		let key = segments.join("/");
+		if (isColorConfigBaseKey(key) || isColorConfigBlendKey(key)) return {
+			type: "base",
+			tone: segment0,
+			key
+		};
+	}
+	if (segment0 === "button") {
+		let segment1 = segments.shift() || "";
+		if (isColorConfigStateTone(segment1)) {
+			let segment2 = segments.shift() || "";
+			if (isColorButtonMode(segment2)) {
+				let key = segments.join("/");
+				if (isColorConfigStateKey(key) || isColorConfigBlendKey(key)) return {
+					type: "button",
+					tone: segment1,
+					mode: segment2,
+					key
+				};
+			}
+		}
+	}
+}
+function isColorMixPercentValue(str) {
+	return /^\d+%$/.test(str);
+}
+/** @internal */
+function parseTokenValue(str) {
+	let segments = str.split("/"), nextSegment = segments.shift() || "", [segment0, segment0mix] = nextSegment.split(" ");
+	if (isColorTintKey(segment0)) {
+		let tint = segment0, segment1 = segments.shift() || "";
+		return isColorMixPercentValue(segment0mix) ? {
+			type: "color",
+			tint,
+			mix: Number(segment0mix.slice(0, -1)) / 100
+		} : isColorOpacityValue(segment1) ? {
+			type: "color",
+			tint,
+			opacity: Number(segment1)
+		} : {
+			type: "color",
+			tint
+		};
+	}
+	if (isColorValue(segment0)) {
+		let key = segment0, segment1 = segments.shift() || "";
+		return isColorMixPercentValue(segment0mix) ? {
+			type: "color",
+			key,
+			mix: Number(segment0mix.slice(0, -1)) / 100
+		} : isColorOpacityValue(segment1) ? {
+			type: "color",
+			key,
+			opacity: Number(segment1)
+		} : {
+			type: "color",
+			key
+		};
+	}
+	if (isColorHueKey(segment0)) {
+		let hue = segment0;
+		nextSegment = segments.shift() || "";
+		let [segment1, segment1mix] = nextSegment.split(" ");
+		if (isColorTintKey(segment1)) {
+			let tint = segment1, segment2 = segments.shift() || "";
+			return isColorMixPercentValue(segment1mix) ? {
+				type: "color",
+				hue,
+				tint,
+				mix: Number(segment1mix.slice(0, -1)) / 100
+			} : isColorOpacityValue(segment2) ? {
+				type: "color",
+				hue,
+				tint,
+				opacity: Number(segment2)
+			} : {
+				type: "color",
+				hue,
+				tint
+			};
+		}
+		return {
+			type: "hue",
+			value: hue
+		};
+	}
+	if (isColorBlendModeValue(segment0)) return {
+		type: "blendMode",
+		value: segment0
+	};
+}
+/** @internal */
+function isColorConfigBaseTone(str) {
+	return COLOR_CONFIG_CARD_TONES.includes(str);
+}
+/** @internal */
+function isColorConfigBaseKey(str) {
+	return COLOR_CONFIG_CARD_KEYS.includes(str);
+}
+/** @internal */
+function isColorConfigStateKey(str) {
+	return COLOR_CONFIG_STATE_KEYS.includes(str);
+}
+/** @internal */
+function isColorConfigStateTone(str) {
+	return COLOR_CONFIG_STATE_TONES.includes(str);
+}
+/** @internal */
+function isColorConfigBlendKey(str) {
+	return COLOR_CONFIG_BLEND_KEYS.includes(str);
+}
+/** @internal */
+function isColorTokenValue(str) {
+	return parseTokenValue(str)?.type === "color" || parseTokenValue(str)?.type === "hue";
+}
+/** @internal */
+function isColorValue(str) {
+	return str === "black" || str === "white";
+}
+/** @internal */
+function isColorOpacityValue(str) {
+	return str === "0" || /^0\.[0-9]+$/.test(str) || str === "1";
+}
+function compileColorTokenValue(node) {
+	let key = "";
+	return key = node.key === "black" || node.key === "white" ? node.key : `${node.hue}/${node.tint}`, node.mix === void 0 ? (node.opacity !== void 0 && (key += `/${node.opacity}`), key) : `${key} ${node.mix * 100}%`;
+}
+const DEFAULT_COLOR_TOKEN_VALUE = ["500", "500"];
+function resolveColorTokenValue(context, value = DEFAULT_COLOR_TOKEN_VALUE) {
+	let { hue, scheme } = context, node = parseTokenValue(value[scheme === "light" ? 0 : 1]);
+	if (!node || node.type !== "color") throw Error(`Invalid color token: ${value[0]}`);
+	return compileColorTokenValue({
+		...node,
+		hue: node.hue || hue
+	});
+}
+const defaultColorTokens = {
+	base: {
+		"*": {
+			_blend: ["multiply", "screen"],
+			accent: { fg: ["purple/600", "purple/400"] },
+			avatar: { "*": {
+				_blend: ["screen", "multiply"],
+				bg: ["500", "400"],
+				fg: ["white", "black"]
+			} },
+			backdrop: ["gray/200/0.5", "black/0.5"],
+			badge: {
+				"*": {
+					bg: ["100", "900"],
+					fg: ["600", "400"],
+					icon: ["500", "500"],
+					dot: ["500", "500"]
+				},
+				positive: {
+					bg: ["200 50%", "900"],
+					fg: ["600", "500"]
+				},
+				caution: {
+					bg: ["200 50%", "900"],
+					fg: ["600", "500"]
+				}
+			},
+			bg: ["50", "950"],
+			border: ["200", "800"],
+			code: {
+				bg: ["50", "950"],
+				fg: ["600", "400"]
+			},
+			fg: ["800", "200"],
+			focusRing: ["blue/500", "blue/500"],
+			icon: ["600", "400"],
+			kbd: {
+				bg: ["white", "black"],
+				fg: ["600", "400"],
+				border: ["200", "800"]
+			},
+			link: { fg: ["blue/600", "blue/300"] },
+			muted: {
+				bg: ["50", "950"],
+				fg: ["700 75%", "300 75%"]
+			},
+			shadow: {
+				outline: ["500/0.3", "500/0.4"],
+				umbra: ["gray/500/0.1", "black/0.2"],
+				penumbra: ["gray/500/0.07", "black/0.14"],
+				ambient: ["gray/500/0.06", "black/0.12"]
+			},
+			skeleton: {
+				from: ["100", "900"],
+				to: ["100 50%", "900 50%"]
+			}
+		},
+		transparent: { bg: ["50", "black"] },
+		default: {
+			bg: ["white", "950"],
+			fg: ["800", "200"],
+			muted: { fg: ["600", "400"] }
+		},
+		primary: { _hue: "blue" },
+		suggest: { _hue: "purple" },
+		positive: {
+			_hue: "green",
+			shadow: { outline: ["500/0.4", "500/0.4"] }
+		},
+		caution: {
+			_hue: "yellow",
+			shadow: { outline: ["600/0.3", "500/0.4"] }
+		},
+		critical: { _hue: "red" }
+	},
+	button: {
+		default: {
+			"*": {
+				"*": {
+					_blend: ["screen", "multiply"],
+					accent: { fg: ["purple/300", "purple/700"] },
+					avatar: { "*": {
+						_blend: ["screen", "multiply"],
+						bg: ["500", "400"],
+						fg: ["white", "black"]
+					} },
+					badge: { "*": {
+						bg: ["900", "100"],
+						fg: ["400", "600"],
+						dot: ["500", "500"],
+						icon: ["500", "500"]
+					} },
+					bg: ["500", "400"],
+					border: ["500/0", "400/0"],
+					code: {
+						bg: ["500 20%", "400 20%"],
+						fg: ["200", "600"]
+					},
+					fg: ["white", "black"],
+					icon: ["100 70%", "900 70%"],
+					kbd: {
+						bg: ["black", "white"],
+						fg: ["200", "600"],
+						border: ["800", "200"]
+					},
+					link: { fg: ["blue/200", "blue/600"] },
+					muted: {
+						bg: ["950", "50"],
+						fg: ["100 70%", "900 70%"]
+					},
+					skeleton: {
+						from: ["900", "100"],
+						to: ["900 50%", "100 50%"]
+					}
+				},
+				hovered: {
+					bg: ["600", "300"],
+					border: ["700/0", "300/0"]
+				},
+				pressed: { bg: ["700", "300"] },
+				selected: { bg: ["700", "300"] },
+				disabled: {
+					_hue: "gray",
+					accent: { fg: ["100 70%", "900 70%"] },
+					avatar: { "*": {
+						_blend: ["screen", "multiply"],
+						bg: ["gray/500", "gray/400"],
+						fg: ["white", "black"]
+					} },
+					badge: { "*": {
+						bg: ["gray/700", "gray/300"],
+						fg: ["white", "black"],
+						dot: ["white", "black"],
+						icon: ["white", "black"]
+					} },
+					bg: ["300", "600"],
+					code: {
+						bg: ["950", "50"],
+						fg: ["300", "600"]
+					},
+					fg: ["300", "600"],
+					muted: {
+						bg: ["950", "50"],
+						fg: ["300", "600"]
+					},
+					kbd: {
+						bg: ["black", "white"],
+						fg: ["white", "black"],
+						border: ["700", "300"]
+					},
+					link: { fg: ["100 70%", "900 70%"] }
+				}
+			},
+			default: {
+				"*": {
+					avatar: { "*": {
+						_blend: ["screen", "multiply"],
+						bg: ["500", "400"],
+						fg: ["white", "black"]
+					} },
+					bg: ["800", "200"],
+					muted: {
+						bg: ["950", "50"],
+						fg: ["400", "600"]
+					}
+				},
+				hovered: { bg: ["900", "100"] },
+				pressed: { bg: ["black", "white"] },
+				selected: { bg: ["black", "white"] }
+			}
+		},
+		ghost: {
+			"*": {
+				"*": {
+					_blend: ["multiply", "screen"],
+					accent: { fg: ["purple/700 60%", "purple/300 70%"] },
+					avatar: { "*": {
+						_blend: ["screen", "multiply"],
+						bg: ["500", "400"],
+						fg: ["white", "black"]
+					} },
+					badge: { "*": {
+						bg: ["100", "900"],
+						fg: ["600", "400"],
+						dot: ["500", "500"],
+						icon: ["500", "500"]
+					} },
+					bg: ["50", "950"],
+					border: ["100", "900"],
+					code: {
+						bg: ["500 10%", "400 10%"],
+						fg: ["700 60%", "400 60%"]
+					},
+					fg: ["600", "400"],
+					icon: ["700 60%", "300 60%"],
+					kbd: {
+						bg: ["white", "black"],
+						fg: ["600", "400"],
+						border: ["200", "800"]
+					},
+					link: { fg: ["blue/700 60%", "blue/300 60%"] },
+					muted: {
+						bg: ["100", "950"],
+						fg: ["700 60%", "300 60%"]
+					},
+					skeleton: {
+						from: ["100", "900"],
+						to: ["100 50%", "900 50%"]
+					}
+				},
+				hovered: {
+					bg: ["100", "900"],
+					fg: ["700", "300"]
+				},
+				pressed: {
+					bg: ["200", "800"],
+					fg: ["800", "200"]
+				},
+				selected: {
+					bg: ["200", "800"],
+					fg: ["800", "200"]
+				},
+				disabled: {
+					_hue: "gray",
+					accent: { fg: ["200", "800"] },
+					avatar: { "*": {
+						_blend: ["screen", "multiply"],
+						bg: ["gray/100", "gray/900"],
+						fg: ["white", "black"]
+					} },
+					badge: { "*": {
+						_hue: "gray",
+						bg: ["50", "950"],
+						fg: ["gray/200", "gray/800"],
+						dot: ["gray/200", "gray/800"],
+						icon: ["gray/200", "gray/800"]
+					} },
+					border: ["100", "900"],
+					code: {
+						bg: ["50", "950"],
+						fg: ["200", "800"]
+					},
+					fg: ["400", "600"],
+					icon: ["300", "700"],
+					muted: { fg: ["300", "700"] },
+					kbd: {
+						bg: ["white", "black"],
+						fg: ["200", "800"],
+						border: ["100", "900"]
+					},
+					link: { fg: ["200", "800"] }
+				}
+			},
+			positive: { "*": { border: ["600 20%", "800"] } },
+			caution: { "*": { border: ["600 20%", "800"] } }
+		},
+		bleed: { "*": {
+			"*": {
+				_blend: ["multiply", "screen"],
+				accent: { fg: ["purple/700 70%", "purple/300 70%"] },
+				avatar: { "*": {
+					_blend: ["screen", "multiply"],
+					bg: ["500", "400"],
+					fg: ["white", "black"]
+				} },
+				badge: { "*": {
+					bg: ["100", "900"],
+					fg: ["600", "400"],
+					dot: ["500", "500"],
+					icon: ["500", "500"]
+				} },
+				bg: ["white", "black"],
+				border: ["white/0", "black/0"],
+				code: {
+					bg: ["50", "950"],
+					fg: ["700 75%", "300 75%"]
+				},
+				fg: ["700", "300"],
+				icon: ["700 75%", "300 75%"],
+				kbd: {
+					bg: ["white", "black"],
+					fg: ["700", "300"],
+					border: ["200", "800"]
+				},
+				link: { fg: ["blue/700 70%", "blue/300 70%"] },
+				muted: {
+					bg: ["100", "950"],
+					fg: ["700 75%", "300 75%"]
+				},
+				skeleton: {
+					from: ["100", "900"],
+					to: ["100 50%", "900 50%"]
+				}
+			},
+			hovered: {
+				bg: ["50", "900"],
+				fg: ["800", "200"],
+				icon: ["800 70%", "300 70%"]
+			},
+			pressed: {
+				bg: ["100", "800"],
+				fg: ["800", "200"],
+				icon: ["800 70%", "200 70%"]
+			},
+			selected: {
+				bg: ["100", "900"],
+				fg: ["800", "200"],
+				icon: ["800 60%", "200 60%"]
+			},
+			disabled: {
+				_hue: "gray",
+				accent: { fg: ["200", "800"] },
+				avatar: { "*": {
+					_blend: ["screen", "multiply"],
+					bg: ["gray/100", "gray/900"],
+					fg: ["white", "black"]
+				} },
+				badge: { "*": {
+					_hue: "gray",
+					bg: ["50", "950"],
+					fg: ["gray/200", "gray/800"],
+					dot: ["gray/200", "gray/800"],
+					icon: ["gray/200", "gray/800"]
+				} },
+				code: {
+					bg: ["50", "950"],
+					fg: ["200", "800"]
+				},
+				fg: ["400", "600"],
+				icon: ["300", "700"],
+				muted: { fg: ["400", "600"] },
+				kbd: {
+					bg: ["white", "black"],
+					fg: ["200", "800"],
+					border: ["100", "900"]
+				},
+				link: { fg: ["200", "800"] }
+			}
+		} }
+	},
+	input: {
+		"*": {
+			"*": {
+				_blend: ["multiply", "screen"],
+				bg: ["white", "black"],
+				border: ["200", "700"],
+				fg: ["black", "200"],
+				muted: { bg: ["50", "950"] },
+				placeholder: ["400", "600"]
+			},
+			hovered: { border: ["300", "700"] },
+			readOnly: {
+				bg: ["50", "950"],
+				border: ["200", "800"],
+				fg: ["800", "200"]
+			},
+			disabled: {
+				bg: ["50", "950"],
+				fg: ["400", "600"],
+				border: ["100", "900"],
+				placeholder: ["200", "800 50%"]
+			}
+		},
+		invalid: { "*": {
+			_hue: "red",
+			bg: ["100", "950"]
+		} }
+	},
+	selectable: {
+		"*": {
+			"*": {
+				_blend: ["multiply", "screen"],
+				accent: { fg: ["purple/700 70%", "purple/300 70%"] },
+				avatar: { "*": {
+					_blend: ["screen", "multiply"],
+					bg: ["500", "400"],
+					fg: ["white", "black"]
+				} },
+				badge: { "*": {
+					bg: ["100", "900"],
+					fg: ["600", "400"],
+					dot: ["500", "500"],
+					icon: ["500", "500"]
+				} },
+				bg: ["white", "black"],
+				border: ["200", "800"],
+				code: {
+					bg: ["50", "950"],
+					fg: ["600", "400"]
+				},
+				fg: ["700", "300"],
+				icon: ["700 75%", "300 75%"],
+				kbd: {
+					bg: ["white", "black"],
+					fg: ["600", "400"],
+					border: ["200", "800"]
+				},
+				link: { fg: ["blue/700 70%", "blue/300 70%"] },
+				muted: {
+					bg: ["50", "950"],
+					fg: ["700 75%", "300 75%"]
+				},
+				skeleton: {
+					from: ["100", "900"],
+					to: ["100 50%", "900 50%"]
+				}
+			},
+			hovered: { bg: ["50", "950"] },
+			pressed: { bg: ["100", "900"] },
+			selected: {
+				_blend: ["screen", "multiply"],
+				accent: { fg: ["purple/300", "purple/700"] },
+				avatar: { "*": {
+					_blend: ["multiply", "screen"],
+					bg: ["white", "black"],
+					fg: ["black", "white"]
+				} },
+				badge: { "*": {
+					bg: ["900", "100"],
+					fg: ["400", "600"],
+					dot: ["500", "500"],
+					icon: ["500", "500"]
+				} },
+				bg: ["500", "400"],
+				border: ["500 20%", "400 20%"],
+				code: {
+					bg: ["500 20%", "400 20%"],
+					fg: ["200", "600"]
+				},
+				fg: ["white", "black"],
+				icon: ["100 70%", "900 70%"],
+				kbd: {
+					bg: ["black", "white"],
+					fg: ["200", "600"],
+					border: ["800", "200"]
+				},
+				link: { fg: ["blue/200", "blue/600"] },
+				muted: {
+					bg: ["500 10%", "400 10%"],
+					fg: ["100 70%", "900 70%"]
+				},
+				skeleton: {
+					from: ["900", "100"],
+					to: ["900 50%", "100 50%"]
+				}
+			},
+			disabled: {
+				_hue: "gray",
+				accent: { fg: ["200", "800"] },
+				avatar: { "*": {
+					_blend: ["screen", "multiply"],
+					bg: ["gray/100", "gray/900"],
+					fg: ["white", "black"]
+				} },
+				badge: { "*": {
+					_hue: "gray",
+					bg: ["50", "950"],
+					fg: ["gray/200", "gray/800"],
+					dot: ["gray/200", "gray/800"],
+					icon: ["gray/200", "gray/800"]
+				} },
+				border: ["100", "900"],
+				code: {
+					bg: ["50", "950"],
+					fg: ["200", "800"]
+				},
+				fg: ["200", "800"],
+				icon: ["200", "800"],
+				kbd: {
+					bg: ["white", "black"],
+					fg: ["200", "800"],
+					border: ["100", "900"]
+				},
+				link: { fg: ["200", "800"] },
+				muted: {
+					bg: ["50 50%", "950 50%"],
+					fg: ["200", "800"]
+				}
+			}
+		},
+		default: { selected: { _hue: "blue" } },
+		critical: { disabled: { bg: ["50 50%", "950 50%"] } }
+	},
+	syntax: {
+		atrule: ["purple/600", "purple/400"],
+		attrName: ["green/600", "green/400"],
+		attrValue: ["yellow/600", "yellow/400"],
+		attribute: ["yellow/600", "yellow/400"],
+		boolean: ["purple/600", "purple/400"],
+		builtin: ["purple/600", "purple/400"],
+		cdata: ["yellow/600", "yellow/400"],
+		char: ["yellow/600", "yellow/400"],
+		class: ["orange/600", "orange/400"],
+		className: ["cyan/600", "cyan/400"],
+		comment: ["gray/400", "gray/600"],
+		constant: ["purple/600", "purple/400"],
+		deleted: ["red/600", "red/400"],
+		entity: ["red/600", "red/400"],
+		function: ["green/600", "green/400"],
+		hexcode: ["blue/600", "blue/400"],
+		id: ["purple/600", "purple/400"],
+		important: ["purple/600", "purple/400"],
+		inserted: ["yellow/600", "yellow/400"],
+		keyword: ["magenta/600", "magenta/400"],
+		number: ["purple/600", "purple/400"],
+		operator: ["magenta/600", "magenta/400"],
+		property: ["blue/600", "blue/400"],
+		pseudoClass: ["yellow/600", "yellow/400"],
+		pseudoElement: ["yellow/600", "yellow/400"],
+		punctuation: ["gray/600", "gray/400"],
+		regex: ["blue/600", "blue/400"],
+		selector: ["red/600", "red/400"],
+		string: ["yellow/600", "yellow/400"],
+		symbol: ["purple/600", "purple/400"],
+		tag: ["red/600", "red/400"],
+		unit: ["orange/600", "orange/400"],
+		url: ["red/600", "red/400"],
+		variable: ["red/600", "red/400"]
+	}
+};
+function isRecord(value) {
+	return !!(value && typeof value == "object" && !Array.isArray(value));
+}
+function merge(...records) {
+	let _records = records.filter(Boolean);
+	return _records.length === 0 ? {} : _records.reduce(_merge, {});
+}
+function _merge(acc, source) {
+	for (let key of Object.keys(source)) {
+		let prevValue = acc[key], nextValue = source[key];
+		isRecord(prevValue) && isRecord(nextValue) ? acc[key] = merge(prevValue, nextValue) : acc[key] = nextValue;
+	}
+	return acc;
+}
+/**
+* Convert a tree of color tokens from a sparse format to a dense format.
+*/
+function resolveColorTokens(inputTokens) {
+	let tokens = merge(defaultColorTokens, inputTokens);
+	return {
+		base: resolveBaseColorTokens(tokens),
+		button: resolveButtonColorTokens(tokens),
+		input: resolveInputColorTokens(tokens),
+		selectable: resolveSelectableColorTokens(tokens),
+		syntax: tokens.syntax
+	};
+}
+function resolveBaseColorTokens(sparseTokens) {
+	let tokens = {};
+	for (let tone of THEME_COLOR_CARD_TONES) tokens[tone] = resolveBaseColorTones(sparseTokens, tone);
+	return tokens;
+}
+function resolveBaseColorTones(inputTokens, tone) {
+	let spec = merge(inputTokens?.base?.["*"], inputTokens?.base?.[tone]), hue = spec._hue || inputTokens?.base?.[tone]?._hue || "gray";
+	return {
+		...spec,
+		_hue: hue,
+		avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
+			...acc,
+			[hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
+		}), {}),
+		badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+			...acc,
+			[tone]: {
+				_hue: inputTokens?.base?.[tone]?._hue || hue,
+				...spec.badge?.["*"],
+				...spec.badge?.[tone]
+			}
+		}), {})
+	};
+}
+function resolveButtonColorTokens(inputTokens) {
+	let tokens = {};
+	for (let mode of THEME_COLOR_BUTTON_MODES) tokens[mode] = resolveButtonToneColorTokens(inputTokens, mode);
+	return tokens;
+}
+function resolveButtonToneColorTokens(inputTokens, mode) {
+	let tokens = {};
+	for (let tone of THEME_COLOR_STATE_TONES) tokens[tone] = resolveButtonModeColorTokens(inputTokens, mode, tone);
+	return tokens;
+}
+function resolveButtonModeColorTokens(inputTokens, mode, tone) {
+	let tokens = {};
+	for (let state of THEME_COLOR_STATES) tokens[state] = resolveButtonStateColorTokens(inputTokens, tone, mode, state);
+	return tokens;
+}
+function resolveButtonStateColorTokens(inputTokens, tone, mode, state) {
+	let spec = merge(inputTokens?.button?.[mode]?.["*"]?.["*"], inputTokens?.button?.[mode]?.[tone]?.["*"], inputTokens?.button?.[mode]?.["*"]?.[state], inputTokens?.button?.[mode]?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+	return {
+		...spec,
+		_hue: hue,
+		avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
+			...acc,
+			[hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
+		}), {}),
+		badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+			...acc,
+			[tone]: {
+				_hue: inputTokens?.base?.[tone]?._hue || hue,
+				...spec.badge?.["*"],
+				...spec.badge?.[tone]
+			}
+		}), {})
+	};
+}
+function resolveInputColorTokens(inputTokens) {
+	let tokens = {};
+	for (let mode of THEME_COLOR_INPUT_MODES) tokens[mode] = resolveInputModeColorTokens(inputTokens, mode);
+	return tokens;
+}
+function resolveInputModeColorTokens(inputTokens, mode) {
+	let states = {};
+	for (let state of THEME_COLOR_INPUT_STATES) states[state] = resolveInputStateColorTokens(inputTokens, mode, state);
+	return states;
+}
+function resolveInputStateColorTokens(inputTokens, mode, state) {
+	let spec = merge(inputTokens?.input?.["*"]?.["*"], inputTokens?.input?.[mode]?.["*"], inputTokens?.input?.["*"]?.[state], inputTokens?.input?.[mode]?.[state]), hue = spec._hue || inputTokens?.input?.[mode]?._hue;
+	return {
+		...spec,
+		_hue: hue
+	};
+}
+function resolveSelectableColorTokens(inputTokens) {
+	let tokens = {};
+	for (let tone of THEME_COLOR_STATE_TONES) tokens[tone] = resolveSelectableToneColorTokens(inputTokens, tone);
+	return tokens;
+}
+function resolveSelectableToneColorTokens(inputTokens, tone) {
+	let states = { _hue: inputTokens?.selectable?.[tone]?._hue || inputTokens?.base?.[tone]?._hue };
+	for (let state of THEME_COLOR_STATES) states[state] = resolveSelectableStateColorTokens(inputTokens, tone, state);
+	return states;
+}
+function resolveSelectableStateColorTokens(inputTokens, tone, state) {
+	let spec = merge(inputTokens?.selectable?.["*"]?.["*"], inputTokens?.selectable?.[tone]?.["*"], inputTokens?.selectable?.["*"]?.[state], inputTokens?.selectable?.[tone]?.[state]), hue = spec._hue || inputTokens?.base?.[tone]?._hue;
+	return {
+		...spec,
+		_hue: hue,
+		avatar: _sanity_color.COLOR_HUES.reduce((acc, hue) => ({
+			...acc,
+			[hue]: merge({ _hue: hue }, spec.avatar?.["*"], spec.avatar?.[hue])
+		}), {}),
+		badge: THEME_COLOR_STATE_TONES.reduce((acc, tone) => ({
+			...acc,
+			[tone]: {
+				_hue: inputTokens?.base?.[tone]?._hue || hue,
+				...spec.badge?.["*"],
+				...spec.badge?.[tone]
+			}
+		}), {})
+	};
+}
+function buildColorTheme(config) {
+	let resolvedConfig = {
+		...config,
+		color: resolveColorTokens(config?.color)
+	}, schemes = {};
+	return defineLazyProperty(schemes, "light", () => buildColorScheme({ scheme: "light" }, resolvedConfig)), defineLazyProperty(schemes, "dark", () => buildColorScheme({ scheme: "dark" }, resolvedConfig)), schemes;
+}
+function buildColorScheme(options, config) {
+	let { scheme } = options, colorScheme = {};
+	for (let tone of THEME_COLOR_CARD_TONES) defineLazyProperty(colorScheme, tone, () => buildCardColorTheme({
+		scheme,
+		tone
+	}, config));
+	return colorScheme;
+}
+function buildCardColorTheme(options, config) {
+	let { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = {
+		hue: tokens?._hue || "gray",
+		scheme
+	};
+	return {
+		_blend: (tokens?._blend || ["multiply", "screen"])[scheme === "light" ? 0 : 1],
+		_dark: scheme === "dark",
+		accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
+		avatar: buildAvatarColorTheme({ scheme }, tokens),
+		backdrop: resolveColorTokenValue(context, tokens?.backdrop),
+		badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		border: resolveColorTokenValue(context, tokens?.border),
+		button: buildButtonColorTheme({
+			scheme,
+			tone
+		}, config),
+		code: {
+			bg: resolveColorTokenValue(context, tokens?.code?.bg),
+			fg: resolveColorTokenValue(context, tokens?.code?.fg)
+		},
+		fg: resolveColorTokenValue(context, tokens?.fg),
+		focusRing: resolveColorTokenValue(context, tokens?.focusRing),
+		icon: resolveColorTokenValue(context, tokens?.icon),
+		input: buildInputColorTheme({
+			scheme,
+			tone
+		}, config),
+		kbd: {
+			bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
+			fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
+			border: resolveColorTokenValue(context, tokens?.kbd?.border)
+		},
+		link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
+		muted: {
+			bg: resolveColorTokenValue(context, tokens?.muted?.bg),
+			fg: resolveColorTokenValue(context, tokens?.muted?.fg)
+		},
+		selectable: buildSelectableColorTheme({
+			scheme,
+			tone
+		}, config),
+		shadow: buildShadowColorTheme({
+			scheme,
+			tone
+		}, config),
+		skeleton: {
+			from: resolveColorTokenValue(context, tokens?.skeleton?.from),
+			to: resolveColorTokenValue(context, tokens?.skeleton?.to)
+		},
+		syntax: buildSyntaxColorTheme({ scheme }, config)
+	};
+}
+function buildShadowColorTheme(options, config) {
+	let { scheme, tone } = options, tokens = config?.color?.base?.[tone], context = {
+		hue: tokens?._hue || "gray",
+		scheme
+	};
+	return {
+		outline: resolveColorTokenValue(context, tokens?.shadow?.outline),
+		umbra: resolveColorTokenValue(context, tokens?.shadow?.umbra),
+		penumbra: resolveColorTokenValue(context, tokens?.shadow?.penumbra),
+		ambient: resolveColorTokenValue(context, tokens?.shadow?.ambient)
+	};
+}
+function buildAvatarColorTheme(options, stateTokens) {
+	let { scheme } = options;
+	return {
+		gray: _buildAvatarColorTheme({
+			color: "gray",
+			scheme
+		}, stateTokens),
+		blue: _buildAvatarColorTheme({
+			color: "blue",
+			scheme
+		}, stateTokens),
+		purple: _buildAvatarColorTheme({
+			color: "purple",
+			scheme
+		}, stateTokens),
+		magenta: _buildAvatarColorTheme({
+			color: "magenta",
+			scheme
+		}, stateTokens),
+		red: _buildAvatarColorTheme({
+			color: "red",
+			scheme
+		}, stateTokens),
+		orange: _buildAvatarColorTheme({
+			color: "orange",
+			scheme
+		}, stateTokens),
+		yellow: _buildAvatarColorTheme({
+			color: "yellow",
+			scheme
+		}, stateTokens),
+		green: _buildAvatarColorTheme({
+			color: "green",
+			scheme
+		}, stateTokens),
+		cyan: _buildAvatarColorTheme({
+			color: "cyan",
+			scheme
+		}, stateTokens)
+	};
+}
+function _buildAvatarColorTheme(options, stateTokens) {
+	let { color, scheme } = options, tokens = stateTokens?.avatar?.[color], context = {
+		hue: tokens?._hue || "gray",
+		scheme
+	};
+	return {
+		_blend: (tokens?._blend || ["screen", "multiply"])[scheme === "light" ? 0 : 1],
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		fg: resolveColorTokenValue(context, tokens?.fg)
+	};
+}
+function buildBadgeColorTheme(tokens, options, config) {
+	let { scheme } = options, colorBadge = {};
+	for (let tone of THEME_COLOR_STATE_TONES) colorBadge[tone] = _buildBadgeColorTheme(tokens, {
+		scheme,
+		tone
+	}, config);
+	return colorBadge;
+}
+function _buildBadgeColorTheme(parentTokens, options, config) {
+	let { scheme, tone } = options, tokens = parentTokens?.[tone], context = {
+		hue: tokens?._hue || config?.color?.base?.[tone]?._hue || "gray",
+		scheme
+	};
+	return {
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		fg: resolveColorTokenValue(context, tokens?.fg),
+		dot: resolveColorTokenValue(context, tokens?.dot),
+		icon: resolveColorTokenValue(context, tokens?.icon)
+	};
+}
+function buildButtonColorTheme(options, config) {
+	let { scheme, tone: cardTone } = options, modes = {};
+	for (let mode of THEME_COLOR_BUTTON_MODES) modes[mode] = buildButtonTonesColorTheme({
+		cardTone,
+		scheme,
+		mode
+	}, config);
+	return modes;
+}
+function buildButtonTonesColorTheme(options, config) {
+	let { cardTone, mode, scheme } = options, tones = {};
+	for (let tone of THEME_COLOR_STATE_TONES) tones[tone] = buildButtonStatesColorTheme({
+		cardTone,
+		mode,
+		scheme,
+		tone
+	}, config);
+	return tones;
+}
+function buildButtonStatesColorTheme(options, config) {
+	let { cardTone, mode, scheme, tone } = options, states = {};
+	for (let state of THEME_COLOR_STATES) states[state] = buildButtonStateColorTheme({
+		cardTone,
+		mode,
+		tone,
+		scheme,
+		state
+	}, config);
+	return states;
+}
+function buildButtonStateColorTheme(options, config) {
+	let { cardTone, mode, tone, scheme, state } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.button?.[mode]?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+		hue,
+		scheme
+	};
+	return {
+		_blend: blendMode[scheme === "light" ? 0 : 1],
+		accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
+		avatar: buildAvatarColorTheme({ scheme }, tokens),
+		badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		border: resolveColorTokenValue(context, tokens?.border),
+		code: {
+			bg: resolveColorTokenValue(context, tokens?.code?.bg),
+			fg: resolveColorTokenValue(context, tokens?.code?.fg)
+		},
+		fg: resolveColorTokenValue(context, tokens?.fg),
+		icon: resolveColorTokenValue(context, tokens?.icon),
+		muted: {
+			bg: resolveColorTokenValue(context, tokens?.muted?.bg),
+			fg: resolveColorTokenValue(context, tokens?.muted?.fg)
+		},
+		kbd: {
+			bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
+			fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
+			border: resolveColorTokenValue(context, tokens?.kbd?.border)
+		},
+		link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
+		skeleton: {
+			from: resolveColorTokenValue(context, tokens?.skeleton?.from),
+			to: resolveColorTokenValue(context, tokens?.skeleton?.to)
+		}
+	};
+}
+function buildInputColorTheme(options, config) {
+	let { scheme, tone } = options;
+	return {
+		default: buildInputStatesColorTheme({
+			mode: "default",
+			scheme,
+			tone
+		}, config),
+		invalid: buildInputStatesColorTheme({
+			mode: "invalid",
+			scheme,
+			tone
+		}, config)
+	};
+}
+function buildInputStatesColorTheme(options, config) {
+	let { mode, scheme, tone } = options;
+	return {
+		enabled: buildInputStateColorTheme({
+			mode,
+			scheme,
+			state: "enabled",
+			cardTone: tone
+		}, config),
+		hovered: buildInputStateColorTheme({
+			mode,
+			scheme,
+			state: "hovered",
+			cardTone: tone
+		}, config),
+		readOnly: buildInputStateColorTheme({
+			mode,
+			scheme,
+			state: "readOnly",
+			cardTone: tone
+		}, config),
+		disabled: buildInputStateColorTheme({
+			mode,
+			scheme,
+			state: "disabled",
+			cardTone: tone
+		}, config)
+	};
+}
+function buildInputStateColorTheme(options, config) {
+	let { cardTone, mode, scheme, state } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.input?.[mode]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+		hue,
+		scheme
+	};
+	return {
+		_blend: blendMode[scheme === "light" ? 0 : 1],
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		border: resolveColorTokenValue(context, tokens?.border),
+		fg: resolveColorTokenValue(context, tokens?.fg),
+		muted: { bg: resolveColorTokenValue(context, tokens?.muted?.bg) },
+		placeholder: resolveColorTokenValue(context, tokens?.placeholder)
+	};
+}
+function buildSelectableColorTheme(options, config) {
+	let { scheme, tone: cardTone } = options, tones = {};
+	for (let tone of THEME_COLOR_STATE_TONES) tones[tone] = buildSelectableStatesColorTheme({
+		cardTone,
+		scheme,
+		tone
+	}, config);
+	return tones;
+}
+function buildSelectableStatesColorTheme(options, config) {
+	let { cardTone, scheme, tone } = options, states = {};
+	for (let state of THEME_COLOR_STATES) states[state] = buildSelectableStateColorTheme({
+		cardTone,
+		tone,
+		scheme,
+		state
+	}, config);
+	return states;
+}
+function buildSelectableStateColorTheme(options, config) {
+	let { cardTone, scheme, state, tone } = options, cardTokens = config?.color?.base?.[cardTone], tokens = config?.color?.selectable?.[tone]?.[state], hue = tokens?._hue || cardTokens?._hue || "gray", blendMode = tokens?._blend || ["screen", "multiply"], context = {
+		hue,
+		scheme
+	};
+	return {
+		_blend: blendMode[scheme === "light" ? 0 : 1],
+		accent: { fg: resolveColorTokenValue(context, tokens?.accent?.fg) },
+		avatar: buildAvatarColorTheme({ scheme }, tokens),
+		badge: buildBadgeColorTheme(tokens?.badge, { scheme }, config),
+		bg: resolveColorTokenValue(context, tokens?.bg),
+		border: resolveColorTokenValue(context, tokens?.border),
+		code: {
+			bg: resolveColorTokenValue(context, tokens?.code?.bg),
+			fg: resolveColorTokenValue(context, tokens?.code?.fg)
+		},
+		fg: resolveColorTokenValue(context, tokens?.fg),
+		icon: resolveColorTokenValue(context, tokens?.icon),
+		muted: {
+			bg: resolveColorTokenValue(context, tokens?.muted?.bg),
+			fg: resolveColorTokenValue(context, tokens?.muted?.fg)
+		},
+		kbd: {
+			bg: resolveColorTokenValue(context, tokens?.kbd?.bg),
+			fg: resolveColorTokenValue(context, tokens?.kbd?.fg),
+			border: resolveColorTokenValue(context, tokens?.kbd?.border)
+		},
+		link: { fg: resolveColorTokenValue(context, tokens?.link?.fg) },
+		skeleton: {
+			from: resolveColorTokenValue(context, tokens?.skeleton?.from),
+			to: resolveColorTokenValue(context, tokens?.skeleton?.to)
+		}
+	};
+}
+function buildSyntaxColorTheme(options, config) {
+	let { scheme } = options, tokens = config?.color?.syntax, context = {
+		hue: "gray",
+		scheme
+	};
+	return {
+		atrule: resolveColorTokenValue(context, tokens?.atrule),
+		attrName: resolveColorTokenValue(context, tokens?.attrName),
+		attrValue: resolveColorTokenValue(context, tokens?.attrValue),
+		attribute: resolveColorTokenValue(context, tokens?.attribute),
+		boolean: resolveColorTokenValue(context, tokens?.boolean),
+		builtin: resolveColorTokenValue(context, tokens?.builtin),
+		cdata: resolveColorTokenValue(context, tokens?.cdata),
+		char: resolveColorTokenValue(context, tokens?.char),
+		class: resolveColorTokenValue(context, tokens?.class),
+		className: resolveColorTokenValue(context, tokens?.className),
+		comment: resolveColorTokenValue(context, tokens?.comment),
+		constant: resolveColorTokenValue(context, tokens?.constant),
+		deleted: resolveColorTokenValue(context, tokens?.deleted),
+		doctype: resolveColorTokenValue(context, tokens?.doctype),
+		entity: resolveColorTokenValue(context, tokens?.entity),
+		function: resolveColorTokenValue(context, tokens?.function),
+		hexcode: resolveColorTokenValue(context, tokens?.hexcode),
+		id: resolveColorTokenValue(context, tokens?.id),
+		important: resolveColorTokenValue(context, tokens?.important),
+		inserted: resolveColorTokenValue(context, tokens?.inserted),
+		keyword: resolveColorTokenValue(context, tokens?.keyword),
+		number: resolveColorTokenValue(context, tokens?.number),
+		operator: resolveColorTokenValue(context, tokens?.operator),
+		prolog: resolveColorTokenValue(context, tokens?.prolog),
+		property: resolveColorTokenValue(context, tokens?.property),
+		pseudoClass: resolveColorTokenValue(context, tokens?.pseudoClass),
+		pseudoElement: resolveColorTokenValue(context, tokens?.pseudoElement),
+		punctuation: resolveColorTokenValue(context, tokens?.punctuation),
+		regex: resolveColorTokenValue(context, tokens?.regex),
+		selector: resolveColorTokenValue(context, tokens?.selector),
+		string: resolveColorTokenValue(context, tokens?.string),
+		symbol: resolveColorTokenValue(context, tokens?.symbol),
+		tag: resolveColorTokenValue(context, tokens?.tag),
+		unit: resolveColorTokenValue(context, tokens?.unit),
+		url: resolveColorTokenValue(context, tokens?.url),
+		variable: resolveColorTokenValue(context, tokens?.variable)
+	};
+}
+const defaultColorPalette = _sanity_color.color;
+function mixChannel(b, s, weight) {
+	return b + (s - b) * weight;
+}
+/**
+* Apply the \`mix\` blend mode
+* @internal
+*/
+function mix(b, s, weight) {
+	return {
+		r: mixChannel(b.r, s.r, weight),
+		g: mixChannel(b.g, s.g, weight),
+		b: mixChannel(b.b, s.b, weight)
+	};
+}
+function multiplyChannel(b, s) {
+	return b * s;
+}
+/**
+* Apply the \`multiply\` blend mode
+* Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
+* @internal
+*/
+function multiply(b, s) {
+	return {
+		r: multiplyChannel(b.r / 255, s.r / 255) * 255,
+		g: multiplyChannel(b.g / 255, s.g / 255) * 255,
+		b: multiplyChannel(b.b / 255, s.b / 255) * 255
+	};
+}
+function screenChannel(b, s) {
+	return b + s - b * s;
+}
+/**
+* Apply the \`screen\` blend mode
+* Source: https://www.w3.org/TR/compositing-1/#blendingscreen
+* @internal
+*/
+function screen(b, s) {
+	return {
+		r: screenChannel(b.r / 255, s.r / 255) * 255,
+		g: screenChannel(b.g / 255, s.g / 255) * 255,
+		b: screenChannel(b.b / 255, s.b / 255) * 255
+	};
+}
+function lerp(x, y, a) {
+	return x * (1 - a) + y * a;
+}
+function invlerp(x, y, a) {
+	return clamp((a - x) / (y - x));
+}
+function clamp(a, min = 0, max = 1) {
+	return Math.min(max, Math.max(min, a));
+}
+function range(x1, y1, x2, y2, a) {
+	return lerp(x2, y2, invlerp(x1, y1, a));
+}
+function round(value) {
+	return Math.round(value);
+}
+/**
+* @internal
+*/
+function hexToRgb(hex) {
+	if (hex.length === 4) {
+		let hexR = hex.slice(1, 2), hexG = hex.slice(2, 3), hexB = hex.slice(3, 4);
+		return {
+			r: parseInt(hexR + hexR, 16),
+			g: parseInt(hexG + hexG, 16),
+			b: parseInt(hexB + hexB, 16)
+		};
+	}
+	return {
+		r: parseInt(hex.slice(1, 3), 16),
+		g: parseInt(hex.slice(3, 5), 16),
+		b: parseInt(hex.slice(5, 7), 16)
+	};
+}
+/**
+* @internal
+*/
+function rgbaToRGBA(rgba) {
+	let values = rgba.replace(/rgba\(|\)/g, "").split(",");
+	return {
+		r: parseInt(values[0]),
+		g: parseInt(values[1]),
+		b: parseInt(values[2]),
+		a: parseFloat(values[3])
+	};
+}
+/**
+* @internal
+*/
+function rgbToHex(color) {
+	let r = round(clamp(Math.round(color.r), 0, 255)), g = round(clamp(Math.round(color.g), 0, 255)), b = round(clamp(Math.round(color.b), 0, 255));
+	return "a" in color ? `rgba(${r},${g},${b},${color.a})` : "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+}
+/**
+* @internal
+* @see https://css-tricks.com/converting-color-spaces-in-javascript/
+*/
+function rgbToHsl({ r, g, b }) {
+	r /= 255, g /= 255, b /= 255;
+	let cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin, h = 0, s = 0, l = 0;
+	return h = delta == 0 ? 0 : cmax == r ? (g - b) / delta % 6 : cmax == g ? (b - r) / delta + 2 : (r - g) / delta + 4, h = Math.round(h * 60), h < 0 && (h += 360), l = (cmax + cmin) / 2, s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)), s = +(s * 100).toFixed(1), l = +(l * 100).toFixed(1), {
+		h,
+		s,
+		l
+	};
+}
+/**
+* @internal
+*/
+function hslToRgb(hsl) {
+	let s = hsl.s / 100, l = hsl.l / 100, c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(hsl.h / 60 % 2 - 1)), m = l - c / 2, r = 0, g = 0, b = 0;
+	return 0 <= hsl.h && hsl.h < 60 ? (r = c, g = x, b = 0) : 60 <= hsl.h && hsl.h < 120 ? (r = x, g = c, b = 0) : 120 <= hsl.h && hsl.h < 180 ? (r = 0, g = c, b = x) : 180 <= hsl.h && hsl.h < 240 ? (r = 0, g = x, b = c) : 240 <= hsl.h && hsl.h < 300 ? (r = x, g = 0, b = c) : 300 <= hsl.h && hsl.h < 360 && (r = c, g = 0, b = x), {
+		r: Math.round((r + m) * 255),
+		g: Math.round((g + m) * 255),
+		b: Math.round((b + m) * 255)
+	};
+}
+const HSL_RE = /hsl\(\s*(\d+)\s*,\s*((\d+(?:\.\d+)?)%)\s*,\s*((\d+(?:\.\d+)?)%)\s*\)/i;
+function isHexChars(str) {
+	for (let c of str) if ("0123456789ABCDEFabcdef".indexOf(c) === -1) return !1;
+	return !0;
+}
+function isHex(str) {
+	return str[0] !== "#" || !(str.length === 4 || str.length === 7) ? !1 : isHexChars(str.slice(1));
+}
+function parseHsl(str) {
+	let res = HSL_RE.exec(str);
+	if (!res) throw Error(`parseHsl: string is not a HSL color: "${str}"`);
+	return {
+		h: parseInt(res[1]),
+		s: parseFloat(res[3]),
+		l: parseFloat(res[5])
+	};
+}
+/**
+* @internal
+*/
+function parseColor(color) {
+	if (!color) return {
+		r: 0,
+		g: 0,
+		b: 0
+	};
+	if (typeof color != "string") throw Error("parseColor: expected a string");
+	if (isHex(color)) return hexToRgb(color);
+	if (color.startsWith("hsl(")) return hslToRgb(parseHsl(color));
+	if (color.startsWith("rgba(")) return rgbaToRGBA(color);
+	throw Error(`parseColor: unexpected color format: "${color}"`);
+}
+/** @internal */
+function getContrastRatio(bg, fg) {
+	let rgb1 = parseColor(bg), rgb2 = parseColor(fg), c1 = rgb_lrgb(rgb1), c2 = rgb_lrgb(rgb2), l1 = lrgb_luminance(c1), l2 = lrgb_luminance(c2);
+	return (Math.max(l1, l2) + .05) / (Math.min(l1, l2) + .05);
+}
+function rgb_lrgb({ r, g, b }) {
+	return [
+		rgb_lrgb1(r / 255),
+		rgb_lrgb1(g / 255),
+		rgb_lrgb1(b / 255)
+	];
+}
+function rgb_lrgb1(v) {
+	return v <= .04045 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+}
+function lrgb_luminance([r, g, b]) {
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/**
+* @internal
+*/
+function rgba(color, a) {
+	let rgb = parseColor(color);
+	return `rgba(${rgb.r},${rgb.g},${rgb.b},${a})`;
+}
+const RGB_RANGE = [0, 255];
+function mixThemeColor(value, options) {
+	let { blendMode } = options, color = parseColor(value), black = parseColor(options.black), white = parseColor(options.white), bg = options.bg ? parseColor(options.bg) : blendMode === "multiply" ? white : black, paletteRange = {
+		r: [black.r, white.r],
+		g: [black.g, white.g],
+		b: [black.b, white.b]
+	}, convertedBgColor = {
+		r: clamp(range(...paletteRange.r, ...RGB_RANGE, bg.r), ...RGB_RANGE),
+		g: clamp(range(...paletteRange.g, ...RGB_RANGE, bg.g), ...RGB_RANGE),
+		b: clamp(range(...paletteRange.b, ...RGB_RANGE, bg.b), ...RGB_RANGE)
+	}, convertedColor = {
+		r: clamp(range(...paletteRange.r, ...RGB_RANGE, color.r), ...RGB_RANGE),
+		g: clamp(range(...paletteRange.g, ...RGB_RANGE, color.g), ...RGB_RANGE),
+		b: clamp(range(...paletteRange.b, ...RGB_RANGE, color.b), ...RGB_RANGE)
+	}, resultColor = blendMode === "multiply" ? multiply(convertedBgColor, convertedColor) : screen(convertedBgColor, convertedColor);
+	return rgbToHex({
+		r: clamp(range(...RGB_RANGE, ...paletteRange.r, resultColor.r), ...paletteRange.r),
+		g: clamp(range(...RGB_RANGE, ...paletteRange.g, resultColor.g), ...paletteRange.g),
+		b: clamp(range(...RGB_RANGE, ...paletteRange.b, resultColor.b), ...paletteRange.b)
+	});
+}
+function renderColorValue(str, options) {
+	let { bg, blendMode, colorPalette } = options;
+	if (bg === "white") throw Error("Cannot blend with white background");
+	let node = parseTokenValue(str);
+	if (!node || node.type !== "color") throw Error(`Invalid color token value: ${str}`);
+	let hex = "";
+	if (node.key === "black" && (hex = renderColorHex(colorPalette.black)), node.key === "white" && (hex = renderColorHex(colorPalette.white)), node.hue && node.tint && (hex = renderColorHex(colorPalette[node.hue][node.tint])), !hex) throw Error(`Invalid color token value: ${str}`);
+	let hexBeforeMix = hex, mixOptions = {
+		blendMode,
+		bg,
+		black: renderColorHex(colorPalette.black),
+		white: renderColorHex(colorPalette.white)
+	};
+	try {
+		hex = mixThemeColor(hex, mixOptions), bg && node.mix !== void 0 && (hex = rgbToHex(mix(hexToRgb(bg), hexToRgb(hex), node.mix)));
+	} catch (err) {
+		throw console.warn("could not blend", hex, mixOptions), err;
+	}
+	return hex === "#aN" && (console.warn(`invalid color token value: ${str}`), hex = hexBeforeMix), node.opacity !== void 0 && (hex = rgba(hex, node.opacity)), hex;
+}
+function renderColorHex(color) {
+	return typeof color == "string" ? color : color.hex;
+}
+function renderThemeColorSchemes(value, config) {
+	let colorPalette = config?.palette ?? defaultColorPalette, schemes = {};
+	return defineLazyProperty(schemes, "light", () => renderThemeColorScheme(colorPalette, value.light)), defineLazyProperty(schemes, "dark", () => renderThemeColorScheme(colorPalette, value.dark)), schemes;
+}
+function renderThemeColorScheme(colorPalette, value) {
+	let renderedDefaultTone = renderThemeColor(value.default, { colorPalette }), bg = renderedDefaultTone.bg;
+	if (bg === "white") throw Error("Cannot blend with white background");
+	let scheme = { default: renderedDefaultTone };
+	for (let tone of THEME_COLOR_CARD_TONES) {
+		if (tone === "default") continue;
+		let opts = tone === "transparent" ? { colorPalette } : {
+			bg,
+			colorPalette
+		};
+		defineLazyProperty(scheme, tone, () => renderThemeColor(value[tone], opts));
+	}
+	return scheme;
+}
+function renderThemeColor(value, options) {
+	let { colorPalette, bg } = options, blendMode = value._blend || "multiply", baseBg = renderColorValue(value.bg, {
+		colorPalette,
+		bg,
+		blendMode
+	}), colorOptions = {
+		colorPalette,
+		bg: baseBg,
+		blendMode
+	}, button = renderThemeColorButton(value.button, {
+		baseBg,
+		blendMode,
+		colorPalette
+	}), selectable = renderThemeColorSelectable(value.selectable, {
+		colorPalette,
+		baseBg,
+		blendMode
+	}), shadow = {
+		outline: renderColorValue(value.shadow.outline, colorOptions),
+		umbra: renderColorValue(value.shadow.umbra, {
+			...colorOptions,
+			bg: void 0,
+			colorPalette: {
+				...colorPalette,
+				black: "#000000"
+			}
+		}),
+		penumbra: renderColorValue(value.shadow.penumbra, {
+			...colorOptions,
+			bg: void 0,
+			colorPalette: {
+				...colorPalette,
+				black: "#000000"
+			}
+		}),
+		ambient: renderColorValue(value.shadow.ambient, {
+			...colorOptions,
+			bg: void 0,
+			colorPalette: {
+				...colorPalette,
+				black: "#000000"
+			}
+		})
+	};
+	return {
+		_blend: blendMode,
+		_dark: value._dark,
+		accent: { fg: renderColorValue(value.accent.fg, colorOptions) },
+		avatar: renderThemeColorAvatar(value.avatar, {
+			baseBg,
+			colorPalette,
+			blendMode
+		}),
+		backdrop: renderColorValue(value.backdrop, colorOptions),
+		badge: renderThemeColorBadge(value.badge, {
+			baseBg,
+			colorPalette,
+			blendMode
+		}),
+		bg: baseBg,
+		border: renderColorValue(value.border, colorOptions),
+		button,
+		code: {
+			bg: renderColorValue(value.code.bg, colorOptions),
+			fg: renderColorValue(value.code.fg, colorOptions)
+		},
+		fg: renderColorValue(value.fg, colorOptions),
+		focusRing: renderColorValue(value.focusRing, colorOptions),
+		icon: renderColorValue(value.icon, colorOptions),
+		input: renderThemeColorInput(value.input, {
+			baseBg,
+			colorPalette,
+			blendMode
+		}),
+		kbd: renderThemeColorKBD(value.kbd, {
+			baseBg,
+			colorPalette,
+			blendMode
+		}),
+		link: { fg: renderColorValue(value.link.fg, colorOptions) },
+		muted: {
+			bg: renderColorValue(value.muted.bg, colorOptions),
+			fg: renderColorValue(value.muted.fg, colorOptions)
+		},
+		shadow,
+		skeleton: {
+			from: renderColorValue(value.skeleton.from, colorOptions),
+			to: renderColorValue(value.skeleton.to, colorOptions)
+		},
+		syntax: renderSyntaxColorTheme(value.syntax, {
+			baseBg,
+			colorPalette,
+			blendMode
+		}),
+		selectable
+	};
+}
+function renderThemeColorKBD(value, options) {
+	let { baseBg, blendMode, colorPalette } = options, rootOptions = {
+		bg: baseBg,
+		blendMode,
+		colorPalette
+	}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+		bg,
+		blendMode,
+		colorPalette
+	};
+	return {
+		bg,
+		fg: renderColorValue(value.fg, colorOptions),
+		border: renderColorValue(value.border, colorOptions)
+	};
+}
+function renderThemeColorAvatar(value, options) {
+	let colorAvatar = {};
+	for (let hue of _sanity_color.COLOR_HUES) colorAvatar[hue] = renderThemeColorAvatarColor(value[hue], options);
+	return colorAvatar;
+}
+function renderThemeColorAvatarColor(value, options) {
+	let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+		bg: baseBg,
+		blendMode: rootBlendMode,
+		colorPalette
+	}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+		bg,
+		blendMode,
+		colorPalette
+	};
+	return {
+		_blend: blendMode,
+		bg,
+		fg: renderColorValue(value.fg, colorOptions)
+	};
+}
+function renderThemeColorBadge(value, options) {
+	let colorBadge = {};
+	for (let tone of THEME_COLOR_STATE_TONES) colorBadge[tone] = renderThemeColorBadgeColor(value[tone], options);
+	return colorBadge;
+}
+function renderThemeColorBadgeColor(value, options) {
+	let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = rootBlendMode, rootOptions = {
+		bg: baseBg,
+		blendMode: rootBlendMode,
+		colorPalette
+	}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+		bg,
+		blendMode,
+		colorPalette
+	};
+	return {
+		bg,
+		dot: renderColorValue(value.dot, colorOptions),
+		fg: renderColorValue(value.fg, colorOptions),
+		icon: renderColorValue(value.icon, colorOptions)
+	};
+}
+function renderThemeColorButton(value, options) {
+	return {
+		default: renderThemeColorButtonTones(value.default, options),
+		ghost: renderThemeColorButtonTones(value.ghost, options),
+		bleed: renderThemeColorButtonTones(value.bleed, options)
+	};
+}
+function renderThemeColorButtonTones(value, options) {
+	let colorButtonMode = {};
+	for (let tone of THEME_COLOR_STATE_TONES) colorButtonMode[tone] = renderThemeColorButtonStates(value[tone], options);
+	return colorButtonMode;
+}
+function renderThemeColorButtonStates(value, options) {
+	return {
+		enabled: renderThemeColorState(value.enabled, options),
+		hovered: renderThemeColorState(value.hovered, options),
+		pressed: renderThemeColorState(value.pressed, options),
+		selected: renderThemeColorState(value.selected, options),
+		disabled: renderThemeColorState(value.disabled, options)
+	};
+}
+function renderThemeColorState(value, options) {
+	let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+		bg: baseBg,
+		blendMode: rootBlendMode,
+		colorPalette
+	}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+		bg,
+		blendMode,
+		colorPalette
+	};
+	return {
+		_blend: blendMode,
+		accent: { fg: renderColorValue(value.accent.fg, colorOptions) },
+		avatar: renderThemeColorAvatar(value.avatar, {
+			baseBg: bg,
+			colorPalette,
+			blendMode
+		}),
+		badge: renderThemeColorBadge(value.badge, {
+			baseBg: bg,
+			colorPalette,
+			blendMode
+		}),
+		bg,
+		border: renderColorValue(value.border, colorOptions),
+		code: {
+			bg: renderColorValue(value.code.bg, colorOptions),
+			fg: renderColorValue(value.code.fg, colorOptions)
+		},
+		fg: renderColorValue(value.fg, colorOptions),
+		icon: renderColorValue(value.icon, colorOptions),
+		link: { fg: renderColorValue(value.link.fg, colorOptions) },
+		muted: {
+			bg: renderColorValue(value.muted.bg, colorOptions),
+			fg: renderColorValue(value.muted.fg, colorOptions)
+		},
+		kbd: {
+			bg: renderColorValue(value.kbd.bg, colorOptions),
+			fg: renderColorValue(value.kbd.fg, colorOptions),
+			border: renderColorValue(value.kbd.border, colorOptions)
+		},
+		skeleton: {
+			from: renderColorValue(value.skeleton?.from, colorOptions),
+			to: renderColorValue(value.skeleton?.to, colorOptions)
+		}
+	};
+}
+function renderThemeColorInput(value, options) {
+	return {
+		default: renderInputStatesColorTheme(value.default, options),
+		invalid: renderInputStatesColorTheme(value.invalid, options)
+	};
+}
+function renderInputStatesColorTheme(value, options) {
+	return {
+		enabled: renderInputStateColorTheme(value.enabled, options),
+		hovered: renderInputStateColorTheme(value.hovered, options),
+		readOnly: renderInputStateColorTheme(value.readOnly, options),
+		disabled: renderInputStateColorTheme(value.disabled, options)
+	};
+}
+function renderInputStateColorTheme(value, options) {
+	let { baseBg, blendMode: rootBlendMode, colorPalette } = options, blendMode = value._blend || "multiply", rootOptions = {
+		colorPalette,
+		bg: baseBg,
+		blendMode: rootBlendMode
+	}, bg = renderColorValue(value.bg, rootOptions), colorOptions = {
+		colorPalette,
+		bg,
+		blendMode
+	};
+	return {
+		_blend: blendMode,
+		bg,
+		border: renderColorValue(value.border, colorOptions),
+		fg: renderColorValue(value.fg, colorOptions),
+		muted: { bg: renderColorValue(value.muted.bg, colorOptions) },
+		placeholder: renderColorValue(value.placeholder, colorOptions)
+	};
+}
+function renderThemeColorSelectable(value, options) {
+	let colorSelectable = {};
+	for (let tone of THEME_COLOR_STATE_TONES) colorSelectable[tone] = renderThemeColorSelectableStates(value[tone], options);
+	return colorSelectable;
+}
+function renderThemeColorSelectableStates(value, options) {
+	return {
+		enabled: renderThemeColorState(value.enabled, options),
+		hovered: renderThemeColorState(value.hovered, options),
+		pressed: renderThemeColorState(value.pressed, options),
+		selected: renderThemeColorState(value.selected, options),
+		disabled: renderThemeColorState(value.disabled, options)
+	};
+}
+function renderSyntaxColorTheme(value, options) {
+	let { colorPalette, baseBg, blendMode } = options, colorOptions = {
+		colorPalette,
+		bg: baseBg,
+		blendMode
+	};
+	return {
+		atrule: renderColorValue(value.atrule, colorOptions),
+		attrName: renderColorValue(value.attrName, colorOptions),
+		attrValue: renderColorValue(value.attrValue, colorOptions),
+		attribute: renderColorValue(value.attribute, colorOptions),
+		boolean: renderColorValue(value.boolean, colorOptions),
+		builtin: renderColorValue(value.builtin, colorOptions),
+		cdata: renderColorValue(value.cdata, colorOptions),
+		char: renderColorValue(value.char, colorOptions),
+		class: renderColorValue(value.class, colorOptions),
+		className: renderColorValue(value.className, colorOptions),
+		comment: renderColorValue(value.comment, colorOptions),
+		constant: renderColorValue(value.constant, colorOptions),
+		deleted: renderColorValue(value.deleted, colorOptions),
+		doctype: renderColorValue(value.doctype, colorOptions),
+		entity: renderColorValue(value.entity, colorOptions),
+		function: renderColorValue(value.function, colorOptions),
+		hexcode: renderColorValue(value.hexcode, colorOptions),
+		id: renderColorValue(value.id, colorOptions),
+		important: renderColorValue(value.important, colorOptions),
+		inserted: renderColorValue(value.inserted, colorOptions),
+		keyword: renderColorValue(value.keyword, colorOptions),
+		number: renderColorValue(value.number, colorOptions),
+		operator: renderColorValue(value.operator, colorOptions),
+		prolog: renderColorValue(value.prolog, colorOptions),
+		property: renderColorValue(value.property, colorOptions),
+		pseudoClass: renderColorValue(value.pseudoClass, colorOptions),
+		pseudoElement: renderColorValue(value.pseudoElement, colorOptions),
+		punctuation: renderColorValue(value.punctuation, colorOptions),
+		regex: renderColorValue(value.regex, colorOptions),
+		selector: renderColorValue(value.selector, colorOptions),
+		string: renderColorValue(value.string, colorOptions),
+		symbol: renderColorValue(value.symbol, colorOptions),
+		tag: renderColorValue(value.tag, colorOptions),
+		unit: renderColorValue(value.unit, colorOptions),
+		url: renderColorValue(value.url, colorOptions),
+		variable: renderColorValue(value.variable, colorOptions)
+	};
+}
+/** @internal */
+function buildTheme(config) {
+	let colorTheme = buildColorTheme(config);
+	return v2_v0({
+		_version: 2,
+		avatar: config?.avatar ?? defaultThemeConfig.avatar,
+		button: config?.button ?? defaultThemeConfig.button,
+		card: config?.card ?? defaultThemeConfig.card,
+		color: renderThemeColorSchemes(colorTheme, config),
+		container: config?.container ?? defaultThemeConfig.container,
+		font: config?.font ?? defaultThemeFonts,
+		input: config?.input ?? defaultThemeConfig.input,
+		layer: config?.layer ?? defaultThemeConfig.layer,
+		media: config?.media ?? defaultThemeConfig.media,
+		radius: config?.radius ?? defaultThemeConfig.radius,
+		shadow: config?.shadow ?? defaultThemeConfig.shadow,
+		space: config?.space ?? defaultThemeConfig.space,
+		style: config?.style ?? defaultThemeConfig.style
+	});
+}
+/**
+* Apply `neutral` and `suggest` if they're not already part of the color object,
+* as this was introduced in v2.9, but is not compatible with v2.0.
+*
+* @param color - The color object to upgrade
+* @returns The upgraded color object. Returns as-is if already upgraded.
+* @internal
+*/
+function themeColor_v0_v2_9(color) {
+	if ("neutral" in color.badge) return color;
+	let colors = color;
+	return {
+		...colors,
+		badge: {
+			...colors.badge,
+			neutral: colors.badge.default,
+			suggest: colors.badge.primary
+		},
+		button: {
+			bleed: {
+				...colors.button.bleed,
+				neutral: colors.button.bleed.default,
+				suggest: colors.button.bleed.primary
+			},
+			default: {
+				...colors.button.default,
+				neutral: colors.button.default.default,
+				suggest: colors.button.default.primary
+			},
+			ghost: {
+				...colors.button.ghost,
+				neutral: colors.button.ghost.default,
+				suggest: colors.button.ghost.primary
+			}
+		},
+		selectable: {
+			...colors.selectable,
+			neutral: colors.selectable.default,
+			suggest: colors.selectable.primary
+		}
+	};
+}
+const cache = /* @__PURE__ */ new Map();
+/** @internal */
+function getScopedTheme(themeProp, scheme, tone) {
+	let cachedTheme = _getCachedTheme(themeProp, scheme, tone);
+	if (cachedTheme) return cachedTheme;
+	let v0 = is_v2(themeProp) ? v2_v0(themeProp) : themeProp, v2 = is_v2(themeProp) ? themeProp : v0_v2(themeProp), layer_v0 = v0.layer || defaultThemeConfig.layer, colorScheme_v2 = v2.color[scheme] || v2.color.light, color_v2_9 = themeColor_v0_v2_9(colorScheme_v2[tone] || colorScheme_v2.default), layer_v2 = v2.layer || defaultThemeConfig.layer, { color: _v0Color, ...v0Rest } = v0, sanity = {
+		...v0Rest,
+		layer: layer_v0,
+		v2: {
+			...v2,
+			_resolved: !0,
+			color: color_v2_9,
+			layer: layer_v2
+		}
+	};
+	defineLazyProperty(sanity, "color", () => {
+		let colorScheme_v0 = v0.color[scheme] || v0.color.light;
+		return colorScheme_v0[tone] || colorScheme_v0.default;
+	});
+	let theme = { sanity };
+	return _setCachedTheme(themeProp, scheme, tone, theme), theme;
+}
+function _getCachedTheme(rootTheme, scheme, tone) {
+	let schemeCache = cache.get(scheme);
+	if (!schemeCache) return;
+	let toneCache = schemeCache.get(tone);
+	if (toneCache) return toneCache.get(rootTheme);
+}
+function _setCachedTheme(rootTheme, scheme, tone, theme) {
+	cache.has(scheme) || cache.set(scheme, /* @__PURE__ */ new Map());
+	let schemeCache = cache.get(scheme);
+	schemeCache.has(tone) || schemeCache.set(tone, /* @__PURE__ */ new WeakMap()), schemeCache.get(tone).set(rootTheme, theme);
+}
+Object.defineProperty(exports, "A", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_STATES;
+	}
+}), Object.defineProperty(exports, "B", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_CARD_TONES;
+	}
+}), Object.defineProperty(exports, "C", {
+	enumerable: !0,
+	get: function() {
+		return parseTokenKey;
+	}
+}), Object.defineProperty(exports, "D", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_CARD_TONES;
+	}
+}), Object.defineProperty(exports, "E", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_CARD_KEYS;
+	}
+}), Object.defineProperty(exports, "F", {
+	enumerable: !0,
+	get: function() {
+		return isColorHueKey;
+	}
+}), Object.defineProperty(exports, "G", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_STATE_TONES;
+	}
+}), Object.defineProperty(exports, "H", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_INPUT_STATES;
+	}
+}), Object.defineProperty(exports, "I", {
+	enumerable: !0,
+	get: function() {
+		return isColorTintKey;
+	}
+}), Object.defineProperty(exports, "J", {
+	enumerable: !0,
+	get: function() {
+		return is_v2;
+	}
+}), Object.defineProperty(exports, "K", {
+	enumerable: !0,
+	get: function() {
+		return v2_v0;
+	}
+}), Object.defineProperty(exports, "L", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_AVATAR_COLORS;
+	}
+}), Object.defineProperty(exports, "M", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_STATE_TONES;
+	}
+}), Object.defineProperty(exports, "N", {
+	enumerable: !0,
+	get: function() {
+		return isColorBlendModeValue;
+	}
+}), Object.defineProperty(exports, "O", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_INPUT_MODES;
+	}
+}), Object.defineProperty(exports, "P", {
+	enumerable: !0,
+	get: function() {
+		return isColorButtonMode;
+	}
+}), Object.defineProperty(exports, "R", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_BLEND_MODES;
+	}
+}), Object.defineProperty(exports, "S", {
+	enumerable: !0,
+	get: function() {
+		return parseTokenValue;
+	}
+}), Object.defineProperty(exports, "T", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_BLEND_KEYS;
+	}
+}), Object.defineProperty(exports, "U", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_SCHEMES;
+	}
+}), Object.defineProperty(exports, "V", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_INPUT_MODES;
+	}
+}), Object.defineProperty(exports, "W", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_STATES;
+	}
+}), Object.defineProperty(exports, "X", {
+	enumerable: !0,
+	get: function() {
+		return getTheme_v2;
+	}
+}), Object.defineProperty(exports, "Y", {
+	enumerable: !0,
+	get: function() {
+		return is_v0;
+	}
+}), Object.defineProperty(exports, "Z", {
+	enumerable: !0,
+	get: function() {
+		return createColorTheme;
+	}
+}), Object.defineProperty(exports, "_", {
+	enumerable: !0,
+	get: function() {
+		return isColorConfigStateKey;
+	}
+}), Object.defineProperty(exports, "a", {
+	enumerable: !0,
+	get: function() {
+		return parseColor;
+	}
+}), Object.defineProperty(exports, "b", {
+	enumerable: !0,
+	get: function() {
+		return isColorTokenValue;
+	}
+}), Object.defineProperty(exports, "c", {
+	enumerable: !0,
+	get: function() {
+		return rgbToHex;
+	}
+}), Object.defineProperty(exports, "d", {
+	enumerable: !0,
+	get: function() {
+		return screen;
+	}
+}), Object.defineProperty(exports, "f", {
+	enumerable: !0,
+	get: function() {
+		return multiply;
+	}
+}), Object.defineProperty(exports, "g", {
+	enumerable: !0,
+	get: function() {
+		return isColorConfigBlendKey;
+	}
+}), Object.defineProperty(exports, "h", {
+	enumerable: !0,
+	get: function() {
+		return isColorConfigBaseTone;
+	}
+}), Object.defineProperty(exports, "i", {
+	enumerable: !0,
+	get: function() {
+		return getContrastRatio;
+	}
+}), Object.defineProperty(exports, "j", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_STATE_KEYS;
+	}
+}), Object.defineProperty(exports, "k", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_INPUT_STATES;
+	}
+}), Object.defineProperty(exports, "l", {
+	enumerable: !0,
+	get: function() {
+		return rgbToHsl;
+	}
+}), Object.defineProperty(exports, "m", {
+	enumerable: !0,
+	get: function() {
+		return isColorConfigBaseKey;
+	}
+}), Object.defineProperty(exports, "n", {
+	enumerable: !0,
+	get: function() {
+		return buildTheme;
+	}
+}), Object.defineProperty(exports, "o", {
+	enumerable: !0,
+	get: function() {
+		return hexToRgb;
+	}
+}), Object.defineProperty(exports, "p", {
+	enumerable: !0,
+	get: function() {
+		return mix;
+	}
+}), Object.defineProperty(exports, "q", {
+	enumerable: !0,
+	get: function() {
+		return v0_v2;
+	}
+}), Object.defineProperty(exports, "r", {
+	enumerable: !0,
+	get: function() {
+		return rgba;
+	}
+}), Object.defineProperty(exports, "s", {
+	enumerable: !0,
+	get: function() {
+		return hslToRgb;
+	}
+}), Object.defineProperty(exports, "t", {
+	enumerable: !0,
+	get: function() {
+		return getScopedTheme;
+	}
+}), Object.defineProperty(exports, "u", {
+	enumerable: !0,
+	get: function() {
+		return rgbaToRGBA;
+	}
+}), Object.defineProperty(exports, "v", {
+	enumerable: !0,
+	get: function() {
+		return isColorConfigStateTone;
+	}
+}), Object.defineProperty(exports, "w", {
+	enumerable: !0,
+	get: function() {
+		return COLOR_CONFIG_AVATAR_COLORS;
+	}
+}), Object.defineProperty(exports, "x", {
+	enumerable: !0,
+	get: function() {
+		return isColorValue;
+	}
+}), Object.defineProperty(exports, "y", {
+	enumerable: !0,
+	get: function() {
+		return isColorOpacityValue;
+	}
+}), Object.defineProperty(exports, "z", {
+	enumerable: !0,
+	get: function() {
+		return THEME_COLOR_BUTTON_MODES;
+	}
+});