@packyoung98/vcolor 0.0.0 → 0.0.2

package/dist/vcolor.js

@@ -1,1447 +0,0 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, openBlock as p, readonly as m, ref as h, renderList as g, toDisplayString as _, unref as v, useModel as y, vModelText as ee, vShow as b, watch as x, withDirectives as S, withKeys as C } from "vue";
-//#region src/utils/convert.ts
-function w(e) {
-	return (e % 360 + 360) % 360;
-}
-function T(e, t, n) {
-	return Math.min(n, Math.max(t, e));
-}
-function E({ h: e, s: t, v: n, a: r }) {
-	e = w(e), t = T(t, 0, 100) / 100, n = T(n, 0, 100) / 100;
-	let i = n * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i, s = 0, c = 0, l = 0;
-	return e < 60 ? [s, c, l] = [
-		i,
-		a,
-		0
-	] : e < 120 ? [s, c, l] = [
-		a,
-		i,
-		0
-	] : e < 180 ? [s, c, l] = [
-		0,
-		i,
-		a
-	] : e < 240 ? [s, c, l] = [
-		0,
-		a,
-		i
-	] : e < 300 ? [s, c, l] = [
-		a,
-		0,
-		i
-	] : [s, c, l] = [
-		i,
-		0,
-		a
-	], {
-		r: Math.round((s + o) * 255),
-		g: Math.round((c + o) * 255),
-		b: Math.round((l + o) * 255),
-		a: r
-	};
-}
-function D({ r: e, g: t, b: n, a: r }) {
-	e /= 255, t /= 255, n /= 255;
-	let i = Math.max(e, t, n), a = i - Math.min(e, t, n), o = 0;
-	a !== 0 && (o = i === e ? (t - n) / a % 6 : i === t ? (n - e) / a + 2 : (e - t) / a + 4, o = w(o * 60));
-	let s = i === 0 ? 0 : a / i, c = i;
-	return {
-		h: o,
-		s: s * 100,
-		v: c * 100,
-		a: r
-	};
-}
-function O({ r: e, g: t, b: n, a: r }) {
-	e /= 255, t /= 255, n /= 255;
-	let i = Math.max(e, t, n), a = Math.min(e, t, n), o = i - a, s = 0;
-	o !== 0 && (s = i === e ? (t - n) / o % 6 : i === t ? (n - e) / o + 2 : (e - t) / o + 4, s = w(s * 60));
-	let c = (i + a) / 2, l = o === 0 ? 0 : o / (1 - Math.abs(2 * c - 1));
-	return {
-		h: s,
-		s: l * 100,
-		l: c * 100,
-		a: r
-	};
-}
-function k({ h: e, s: t, l: n, a: r }) {
-	e = w(e), t = T(t, 0, 100) / 100, n = T(n, 0, 100) / 100;
-	let i = (1 - Math.abs(2 * n - 1)) * t, a = i * (1 - Math.abs(e / 60 % 2 - 1)), o = n - i / 2, s = 0, c = 0, l = 0;
-	return e < 60 ? [s, c, l] = [
-		i,
-		a,
-		0
-	] : e < 120 ? [s, c, l] = [
-		a,
-		i,
-		0
-	] : e < 180 ? [s, c, l] = [
-		0,
-		i,
-		a
-	] : e < 240 ? [s, c, l] = [
-		0,
-		a,
-		i
-	] : e < 300 ? [s, c, l] = [
-		a,
-		0,
-		i
-	] : [s, c, l] = [
-		i,
-		0,
-		a
-	], {
-		r: Math.round((s + o) * 255),
-		g: Math.round((c + o) * 255),
-		b: Math.round((l + o) * 255),
-		a: r
-	};
-}
-function A({ r: e, g: t, b: n, a: r }) {
-	let i = (e) => T(Math.round(e), 0, 255).toString(16).padStart(2, "0"), a = `#${i(e)}${i(t)}${i(n)}`;
-	return r < 1 && (a += i(Math.round(r * 255))), a.toUpperCase();
-}
-function j(e) {
-	let t = e.trim().replace(/^#/, "");
-	(t.length === 3 || t.length === 4) && (t = t.split("").map((e) => e + e).join(""));
-	let n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), a = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
-	return {
-		r: Number.isNaN(n) ? 0 : n,
-		g: Number.isNaN(r) ? 0 : r,
-		b: Number.isNaN(i) ? 0 : i,
-		a: Number.isNaN(a) ? 1 : a
-	};
-}
-//#endregion
-//#region src/composables/useColor.ts
-function M(e = "#000000") {
-	let n = h(D(j(e))), r = t(() => E(n.value)), i = t(() => O(r.value)), a = t(() => A(r.value));
-	function o(e) {
-		n.value = { ...e };
-	}
-	function s(e) {
-		n.value = D(e);
-	}
-	function c(e) {
-		n.value = D(k(e));
-	}
-	function l(e) {
-		n.value = D(j(e));
-	}
-	function u(e) {
-		n.value = {
-			...n.value,
-			h: e
-		};
-	}
-	function d(e, t) {
-		n.value = {
-			...n.value,
-			s: e,
-			v: t
-		};
-	}
-	function f(e) {
-		n.value = {
-			...n.value,
-			a: e
-		};
-	}
-	return {
-		hsva: n,
-		rgba: r,
-		hsla: i,
-		hex: a,
-		setFromHsva: o,
-		setFromRgba: s,
-		setFromHsla: c,
-		setFromHex: l,
-		setHue: u,
-		setSaturation: d,
-		setAlpha: f
-	};
-}
-//#endregion
-//#region src/utils/format.ts
-function N(e, t, n = !1) {
-	let r = n ? 1 : e.a, i = E({
-		...e,
-		a: r
-	});
-	if (t === "rgb") return i;
-	if (t === "hsl") {
-		let e = O(i);
-		return {
-			h: Math.round(e.h),
-			s: Math.round(e.s),
-			l: Math.round(e.l),
-			a: e.a
-		};
-	}
-	return A(i);
-}
-//#endregion
-//#region src/composables/usePicker.ts
-function P(e, t) {
-	t != null && (typeof t == "string" ? e.setFromHex(t) : "v" in t ? e.setFromHsva(t) : "l" in t ? e.setFromHsla(t) : e.setFromRgba(t));
-}
-function F(e, t, n, r) {
-	let i = M(typeof e.value == "string" ? e.value : "#FF5733");
-	P(i, e.value);
-	function a() {
-		return N(i.hsva.value, n(), r());
-	}
-	x(e, (e) => {
-		JSON.stringify(e) !== JSON.stringify(a()) && P(i, e);
-	});
-	function o() {
-		let n = a();
-		e.value = n, t("input", n);
-	}
-	function s() {
-		let n = a();
-		e.value = n, t("change", n);
-	}
-	return {
-		...i,
-		output: a,
-		input: o,
-		change: s
-	};
-}
-//#endregion
-//#region src/composables/useEyeDropper.ts
-function I() {
-	let e = h(typeof window < "u" && "EyeDropper" in window), t = h("");
-	async function n() {
-		if (!e.value || !window.EyeDropper) return null;
-		try {
-			let e = await new window.EyeDropper().open();
-			return t.value = e.sRGBHex, e.sRGBHex;
-		} catch {
-			return null;
-		}
-	}
-	return {
-		isSupported: e,
-		sRGBHex: t,
-		open: n
-	};
-}
-//#endregion
-//#region src/composables/useDrag.ts
-function L(e) {
-	return Math.min(1, Math.max(0, e));
-}
-function R(e, t) {
-	let n = h(null);
-	function r(t) {
-		let r = n.value;
-		if (!r) return;
-		let i = r.getBoundingClientRect();
-		e(L((t.clientX - i.left) / i.width), L((t.clientY - i.top) / i.height));
-	}
-	function i() {
-		window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", i), t?.();
-	}
-	function a(e) {
-		e.preventDefault(), n.value?.focus?.(), r(e), window.addEventListener("pointermove", r), window.addEventListener("pointerup", i);
-	}
-	return f(i), {
-		target: n,
-		down: a
-	};
-}
-//#endregion
-//#region src/components/primitives/Saturation.vue?vue&type=script&setup=true&lang.ts
-var te = ["aria-valuetext"], z = /* @__PURE__ */ s({
-	__name: "Saturation",
-	props: {
-		hue: {},
-		saturation: {},
-		value: {}
-	},
-	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = e, o = n, s = t(() => `hsl(${r.hue}, 100%, 50%)`), c = t(() => `${r.saturation}%`), l = t(() => `${100 - r.value}%`), { down: u } = R((e, t) => o("input", {
-			s: Math.round(e * 100),
-			v: Math.round((1 - t) * 100)
-		}), () => o("change"));
-		function f(e) {
-			let t = r.saturation, n = r.value;
-			switch (e.key) {
-				case "ArrowLeft":
-					--t;
-					break;
-				case "ArrowRight":
-					t += 1;
-					break;
-				case "ArrowUp":
-					n += 1;
-					break;
-				case "ArrowDown":
-					--n;
-					break;
-				default: return;
-			}
-			e.preventDefault(), o("input", {
-				s: Math.min(100, Math.max(0, t)),
-				v: Math.min(100, Math.max(0, n))
-			}), o("change");
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-saturation",
-			ref: "target",
-			style: d({ background: s.value }),
-			onPointerdown: n[0] ||= (...e) => v(u) && v(u)(...e),
-			onKeydown: f,
-			tabindex: "0",
-			role: "slider",
-			"aria-label": "채도/명도 (saturation/value)",
-			"aria-valuetext": `S ${Math.round(e.saturation)}, V ${Math.round(e.value)}`
-		}, [
-			n[1] ||= a("div", { class: "vc-saturation__white" }, null, -1),
-			n[2] ||= a("div", { class: "vc-saturation__black" }, null, -1),
-			a("div", {
-				class: "vc-saturation__pointer",
-				style: d({
-					left: c.value,
-					top: l.value
-				})
-			}, null, 4)
-		], 44, te));
-	}
-}), ne = ["aria-valuenow"], B = /* @__PURE__ */ s({
-	__name: "Hue",
-	props: { hue: {} },
-	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = e, o = n, s = t(() => `${r.hue / 360 * 100}%`), { down: c } = R((e) => o("input", Math.round(e * 360)), () => o("change"));
-		function l(e) {
-			let t = r.hue;
-			switch (e.key) {
-				case "ArrowLeft":
-				case "ArrowDown":
-					--t;
-					break;
-				case "ArrowRight":
-				case "ArrowUp":
-					t += 1;
-					break;
-				case "PageDown":
-					t -= 10;
-					break;
-				case "PageUp":
-					t += 10;
-					break;
-				case "Home":
-					t = 0;
-					break;
-				case "End":
-					t = 360;
-					break;
-				default: return;
-			}
-			e.preventDefault(), o("input", Math.min(360, Math.max(0, t))), o("change");
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-hue",
-			ref: "target",
-			onPointerdown: n[0] ||= (...e) => v(c) && v(c)(...e),
-			onKeydown: l,
-			tabindex: "0",
-			role: "slider",
-			"aria-label": "색조 (hue)",
-			"aria-valuemin": 0,
-			"aria-valuemax": 360,
-			"aria-valuenow": Math.round(e.hue)
-		}, [a("div", {
-			class: "vc-hue__pointer",
-			style: d({ left: s.value })
-		}, null, 4)], 40, ne));
-	}
-}), re = ["aria-valuenow"], ie = { class: "vc-alpha__track" }, V = /* @__PURE__ */ s({
-	__name: "Alpha",
-	props: { rgba: {} },
-	emits: ["input", "change"],
-	setup(e, { emit: n }) {
-		let r = e, o = n, s = t(() => {
-			let { r: e, g: t, b: n } = r.rgba;
-			return `linear-gradient(to right, rgba(${e},${t},${n},0), rgba(${e},${t},${n},1))`;
-		}), c = t(() => `${r.rgba.a * 100}%`), { down: l } = R((e) => o("input", Math.round(e * 100) / 100), () => o("change"));
-		function u(e) {
-			let t = r.rgba.a;
-			switch (e.key) {
-				case "ArrowLeft":
-				case "ArrowDown":
-					t -= .05;
-					break;
-				case "ArrowRight":
-				case "ArrowUp":
-					t += .05;
-					break;
-				case "Home":
-					t = 0;
-					break;
-				case "End":
-					t = 1;
-					break;
-				default: return;
-			}
-			e.preventDefault(), t = Math.min(1, Math.max(0, Math.round(t * 100) / 100)), o("input", t), o("change");
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-alpha",
-			ref: "target",
-			onPointerdown: n[0] ||= (...e) => v(l) && v(l)(...e),
-			onKeydown: u,
-			tabindex: "0",
-			role: "slider",
-			"aria-label": "투명도 (alpha)",
-			"aria-valuemin": 0,
-			"aria-valuemax": 1,
-			"aria-valuenow": e.rgba.a
-		}, [a("div", ie, [n[1] ||= a("div", { class: "vc-alpha__checker" }, null, -1), a("div", {
-			class: "vc-alpha__grad",
-			style: d({ background: s.value })
-		}, null, 4)]), a("div", {
-			class: "vc-alpha__pointer",
-			style: d({ left: c.value })
-		}, null, 4)], 40, re));
-	}
-}), ae = { class: "vc-input" }, oe = ["value"], se = { class: "vc-input__label" }, H = /* @__PURE__ */ s({
-	__name: "EditableInput",
-	props: {
-		label: {},
-		modelValue: {}
-	},
-	emits: ["update:modelValue", "change"],
-	setup(e, { emit: t }) {
-		let n = e, r = t, o = h(String(n.modelValue)), s = h(!1);
-		x(() => n.modelValue, (e) => {
-			s.value || (o.value = String(e));
-		});
-		function c(e) {
-			o.value = e.target.value;
-		}
-		function u() {
-			s.value = !0;
-		}
-		async function d() {
-			s.value = !1, r("update:modelValue", o.value), r("change"), await l(), o.value = String(n.modelValue);
-		}
-		function f(e) {
-			e.target.blur();
-		}
-		return (t, n) => (p(), i("label", ae, [a("input", {
-			class: "vc-input__field",
-			value: o.value,
-			onInput: c,
-			onFocus: u,
-			onBlur: d,
-			onKeyup: C(f, ["enter"])
-		}, null, 40, oe), a("span", se, _(e.label), 1)]));
-	}
-}), U = { class: "vc-chrome__body" }, W = { class: "vc-chrome__sliders" }, G = { class: "vc-chrome__fields" }, K = { class: "vc-input vc-input--wide" }, ce = {
-	key: 3,
-	class: "vc-chrome__switch"
-}, le = { class: "vc-chrome__mode" }, ue = /* @__PURE__ */ s({
-	__name: "ChromePicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 240px)" },
-		inputFormats: { default: () => [
-			"hex",
-			"rgb",
-			"hsl"
-		] }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(s, { emit: c }) {
-		let l = y(s, "modelValue"), u = s, f = F(l, c, () => u.format, () => u.disableAlpha), m = I();
-		async function g() {
-			let e = await m.open();
-			e && (f.setFromHex(e), f.input(), f.change());
-		}
-		let b = h(u.inputFormats.includes(u.format) ? u.format : u.inputFormats[0] ?? "hex"), w = t(() => u.inputFormats.length > 1);
-		function T(e) {
-			let t = u.inputFormats;
-			b.value = t[(t.indexOf(b.value) + e + t.length) % t.length];
-		}
-		let E = h(f.hex.value), D = h(!1);
-		x(() => f.hex.value, (e) => {
-			D.value || (E.value = e);
-		});
-		function O() {
-			D.value = !1;
-			let e = E.value.trim().replace(/[^0-9a-fA-F]/g, "").slice(0, 8);
-			f.setFromHex("#" + e), f.input(), E.value = f.hex.value;
-		}
-		function k(e, t) {
-			return Math.max(0, Math.min(t, Math.round(+e || 0)));
-		}
-		function A(e, t) {
-			f.setFromRgba({
-				...f.rgba.value,
-				[e]: k(t, 255)
-			}), f.input();
-		}
-		function j(e, t) {
-			f.setFromHsla({
-				...f.hsla.value,
-				[e]: k(t, e === "h" ? 360 : 100)
-			}), f.input();
-		}
-		function M(e) {
-			f.setAlpha(Math.max(0, Math.min(1, +e || 0))), f.input();
-		}
-		let N = t(() => Math.round(f.rgba.value.a * 100) / 100), P = t(() => ({
-			h: Math.round(f.hsla.value.h),
-			s: Math.round(f.hsla.value.s),
-			l: Math.round(f.hsla.value.l)
-		})), L = t(() => ({ background: f.hex.value }));
-		return (t, c) => (p(), i("div", {
-			class: "vc-chrome",
-			style: d({ width: s.width })
-		}, [
-			o(z, {
-				hue: v(f).hsva.value.h,
-				saturation: v(f).hsva.value.s,
-				value: v(f).hsva.value.v,
-				onInput: c[0] ||= (e) => {
-					v(f).setSaturation(e.s, e.v), v(f).input();
-				},
-				onChange: c[1] ||= (e) => v(f).change()
-			}, null, 8, [
-				"hue",
-				"saturation",
-				"value"
-			]),
-			a("div", U, [
-				a("div", {
-					class: "vc-chrome__preview",
-					style: d(L.value)
-				}, null, 4),
-				v(m).isSupported ? (p(), i("button", {
-					key: 0,
-					type: "button",
-					class: "vc-chrome__eyedropper",
-					"aria-label": "스포이드로 화면 색 추출",
-					title: "스포이드",
-					onClick: g
-				}, [...c[16] ||= [a("svg", {
-					width: "16",
-					height: "16",
-					viewBox: "0 0 24 24",
-					fill: "none",
-					stroke: "currentColor",
-					"stroke-width": "2",
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round"
-				}, [a("path", { d: "M11 7l6 6" }), a("path", { d: "M4 16l11.7 -11.7a2.41 2.41 0 0 1 3.4 3.4l-11.7 11.7l-4 1l1 -4z" })], -1)]])) : r("", !0),
-				a("div", W, [o(B, {
-					hue: v(f).hsva.value.h,
-					onInput: c[2] ||= (e) => {
-						v(f).setHue(e), v(f).input();
-					},
-					onChange: c[3] ||= (e) => v(f).change()
-				}, null, 8, ["hue"]), s.disableAlpha ? r("", !0) : (p(), n(V, {
-					key: 0,
-					rgba: v(f).rgba.value,
-					onInput: c[4] ||= (e) => {
-						v(f).setAlpha(e), v(f).input();
-					},
-					onChange: c[5] ||= (e) => v(f).change()
-				}, null, 8, ["rgba"]))])
-			]),
-			a("div", G, [b.value === "hex" ? (p(), i(e, { key: 0 }, [a("label", K, [S(a("input", {
-				class: "vc-input__field",
-				"onUpdate:modelValue": c[6] ||= (e) => E.value = e,
-				onFocus: c[7] ||= (e) => D.value = !0,
-				onChange: O,
-				onKeyup: C(O, ["enter"])
-			}, null, 544), [[ee, E.value]]), c[17] ||= a("span", { class: "vc-input__label" }, "hex", -1)]), s.disableAlpha ? r("", !0) : (p(), n(H, {
-				key: 0,
-				label: "a",
-				modelValue: N.value,
-				"onUpdate:modelValue": M
-			}, null, 8, ["modelValue"]))], 64)) : b.value === "rgb" ? (p(), i(e, { key: 1 }, [
-				o(H, {
-					label: "r",
-					modelValue: v(f).rgba.value.r,
-					"onUpdate:modelValue": c[8] ||= (e) => A("r", e)
-				}, null, 8, ["modelValue"]),
-				o(H, {
-					label: "g",
-					modelValue: v(f).rgba.value.g,
-					"onUpdate:modelValue": c[9] ||= (e) => A("g", e)
-				}, null, 8, ["modelValue"]),
-				o(H, {
-					label: "b",
-					modelValue: v(f).rgba.value.b,
-					"onUpdate:modelValue": c[10] ||= (e) => A("b", e)
-				}, null, 8, ["modelValue"]),
-				s.disableAlpha ? r("", !0) : (p(), n(H, {
-					key: 0,
-					label: "a",
-					modelValue: N.value,
-					"onUpdate:modelValue": M
-				}, null, 8, ["modelValue"]))
-			], 64)) : (p(), i(e, { key: 2 }, [
-				o(H, {
-					label: "h",
-					modelValue: P.value.h,
-					"onUpdate:modelValue": c[11] ||= (e) => j("h", e)
-				}, null, 8, ["modelValue"]),
-				o(H, {
-					label: "s",
-					modelValue: P.value.s,
-					"onUpdate:modelValue": c[12] ||= (e) => j("s", e)
-				}, null, 8, ["modelValue"]),
-				o(H, {
-					label: "l",
-					modelValue: P.value.l,
-					"onUpdate:modelValue": c[13] ||= (e) => j("l", e)
-				}, null, 8, ["modelValue"]),
-				s.disableAlpha ? r("", !0) : (p(), n(H, {
-					key: 0,
-					label: "a",
-					modelValue: N.value,
-					"onUpdate:modelValue": M
-				}, null, 8, ["modelValue"]))
-			], 64)), w.value ? (p(), i("div", ce, [a("button", {
-				type: "button",
-				class: "vc-chrome__chev",
-				"aria-label": "이전 포맷",
-				onClick: c[14] ||= (e) => T(-1)
-			}, " ▲ "), a("button", {
-				type: "button",
-				class: "vc-chrome__chev",
-				"aria-label": "다음 포맷",
-				onClick: c[15] ||= (e) => T(1)
-			}, " ▼ ")])) : r("", !0)]),
-			a("div", le, _(b.value.toUpperCase()), 1)
-		], 4));
-	}
-}), q = [
-	"#D0021B",
-	"#F5A623",
-	"#F8E71C",
-	"#8B572A",
-	"#7ED321",
-	"#417505",
-	"#BD10E0",
-	"#9013FE",
-	"#4A90E2",
-	"#50E3C2",
-	"#B8E986",
-	"#000000",
-	"#4A4A4A",
-	"#9B9B9B",
-	"#FFFFFF"
-], de = [
-	"#F44336",
-	"#E91E63",
-	"#9C27B0",
-	"#673AB7",
-	"#3F51B5",
-	"#2196F3",
-	"#03A9F4",
-	"#00BCD4",
-	"#009688",
-	"#4CAF50",
-	"#8BC34A",
-	"#CDDC39",
-	"#FFEB3B",
-	"#FFC107",
-	"#FF9800",
-	"#FF5722",
-	"#795548",
-	"#607D8B"
-], J = [
-	"#4D4D4D",
-	"#999999",
-	"#FFFFFF",
-	"#F44E3B",
-	"#FE9200",
-	"#FCDC00",
-	"#DBDF00",
-	"#A4DD00",
-	"#68CCCA",
-	"#73D8FF",
-	"#AEA1FF",
-	"#FDA1FF",
-	"#333333",
-	"#808080",
-	"#CCCCCC",
-	"#D33115",
-	"#E27300",
-	"#FCC400",
-	"#B0BC00",
-	"#68BC00",
-	"#16A5A5",
-	"#009CE0",
-	"#7B64FF",
-	"#FA28FF"
-], Y = [
-	"#FF6900",
-	"#FCB900",
-	"#7BDCB5",
-	"#00D084",
-	"#8ED1FC",
-	"#0693E3",
-	"#ABB8C3",
-	"#EB144C",
-	"#F78DA7",
-	"#9900EF"
-], X = Array.from({ length: 15 }, (e, t) => {
-	let n = Math.round(t / 14 * 255).toString(16).padStart(2, "0");
-	return `#${n}${n}${n}`.toUpperCase();
-}), Z = [
-	[
-		"#FFEBEE",
-		"#FFCDD2",
-		"#E57373",
-		"#F44336",
-		"#D32F2F",
-		"#B71C1C"
-	],
-	[
-		"#F3E5F5",
-		"#CE93D8",
-		"#AB47BC",
-		"#9C27B0",
-		"#7B1FA2",
-		"#4A148C"
-	],
-	[
-		"#E3F2FD",
-		"#90CAF9",
-		"#42A5F5",
-		"#2196F3",
-		"#1976D2",
-		"#0D47A1"
-	],
-	[
-		"#E0F2F1",
-		"#80CBC4",
-		"#26A69A",
-		"#009688",
-		"#00796B",
-		"#004D40"
-	],
-	[
-		"#E8F5E9",
-		"#A5D6A7",
-		"#66BB6A",
-		"#4CAF50",
-		"#388E3C",
-		"#1B5E20"
-	],
-	[
-		"#FFFDE7",
-		"#FFF59D",
-		"#FFEE58",
-		"#FFEB3B",
-		"#FBC02D",
-		"#F57F17"
-	],
-	[
-		"#FFF3E0",
-		"#FFCC80",
-		"#FFA726",
-		"#FF9800",
-		"#F57C00",
-		"#E65100"
-	],
-	[
-		"#EFEBE9",
-		"#BCAAA4",
-		"#8D6E63",
-		"#795548",
-		"#5D4037",
-		"#3E2723"
-	]
-], fe = ["aria-label"], Q = /* @__PURE__ */ s({
-	__name: "Swatch",
-	props: {
-		color: {},
-		active: { type: Boolean }
-	},
-	emits: ["select"],
-	setup(e, { emit: t }) {
-		let n = t;
-		return (t, r) => (p(), i("button", {
-			class: u(["vc-swatch", { "is-active": e.active }]),
-			style: d({ background: e.color }),
-			type: "button",
-			"aria-label": e.color,
-			onClick: r[0] ||= (t) => n("select", e.color)
-		}, null, 14, fe));
-	}
-}), pe = { class: "vc-sketch__controls" }, me = { class: "vc-sketch__sliders" }, he = { class: "vc-sketch__field" }, ge = { class: "vc-sketch__presets" }, _e = /* @__PURE__ */ s({
-	__name: "SketchPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		presetColors: { default: () => q },
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(s, { emit: c }) {
-		let l = y(s, "modelValue"), u = s, f = F(l, c, () => u.format, () => u.disableAlpha), m = t(() => ({ background: f.hex.value }));
-		function h(e) {
-			f.setFromHex(e), f.input(), f.change();
-		}
-		function _(e) {
-			f.setFromHex(e), f.input();
-		}
-		return (t, c) => (p(), i("div", {
-			class: "vc-sketch",
-			style: d({ width: s.width })
-		}, [
-			o(z, {
-				hue: v(f).hsva.value.h,
-				saturation: v(f).hsva.value.s,
-				value: v(f).hsva.value.v,
-				onInput: c[0] ||= (e) => {
-					v(f).setSaturation(e.s, e.v), v(f).input();
-				},
-				onChange: c[1] ||= (e) => v(f).change()
-			}, null, 8, [
-				"hue",
-				"saturation",
-				"value"
-			]),
-			a("div", pe, [a("div", me, [o(B, {
-				hue: v(f).hsva.value.h,
-				onInput: c[2] ||= (e) => {
-					v(f).setHue(e), v(f).input();
-				},
-				onChange: c[3] ||= (e) => v(f).change()
-			}, null, 8, ["hue"]), s.disableAlpha ? r("", !0) : (p(), n(V, {
-				key: 0,
-				rgba: v(f).rgba.value,
-				onInput: c[4] ||= (e) => {
-					v(f).setAlpha(e), v(f).input();
-				},
-				onChange: c[5] ||= (e) => v(f).change()
-			}, null, 8, ["rgba"]))]), a("div", {
-				class: "vc-sketch__preview",
-				style: d(m.value)
-			}, null, 4)]),
-			a("div", he, [o(H, {
-				label: "hex",
-				modelValue: v(f).hex.value,
-				"onUpdate:modelValue": _
-			}, null, 8, ["modelValue"])]),
-			a("div", ge, [(p(!0), i(e, null, g(s.presetColors, (e) => (p(), n(Q, {
-				key: e,
-				color: e,
-				onSelect: h
-			}, null, 8, ["color"]))), 128))])
-		], 4));
-	}
-}), ve = { class: "vc-ps__main" }, ye = { class: "vc-ps__hue" }, be = { class: "vc-ps__side" }, xe = { class: "vc-ps__compare" }, Se = /* @__PURE__ */ s({
-	__name: "PhotoshopPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 280px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c([
-		"change",
-		"input",
-		"ok",
-		"cancel"
-	], ["update:modelValue"]),
-	setup(e, { emit: n }) {
-		let r = y(e, "modelValue"), s = e, c = n, l = F(r, c, () => s.format, () => s.disableAlpha), u = h(A({
-			...l.rgba.value,
-			a: 1
-		})), f = t(() => l.hex.value);
-		function m() {
-			c("ok", l.output()), u.value = l.hex.value;
-		}
-		function g() {
-			l.setFromHex(u.value), l.input(), c("cancel");
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-ps",
-			style: d({ width: e.width })
-		}, [a("div", ve, [o(z, {
-			class: "vc-ps__sat",
-			hue: v(l).hsva.value.h,
-			saturation: v(l).hsva.value.s,
-			value: v(l).hsva.value.v,
-			onInput: n[0] ||= (e) => {
-				v(l).setSaturation(e.s, e.v), v(l).input();
-			},
-			onChange: n[1] ||= (e) => v(l).change()
-		}, null, 8, [
-			"hue",
-			"saturation",
-			"value"
-		]), a("div", ye, [o(B, {
-			hue: v(l).hsva.value.h,
-			onInput: n[2] ||= (e) => {
-				v(l).setHue(e), v(l).input();
-			},
-			onChange: n[3] ||= (e) => v(l).change()
-		}, null, 8, ["hue"])])]), a("div", be, [
-			a("div", xe, [a("div", {
-				class: "vc-ps__swatch",
-				style: d({ background: f.value })
-			}, [...n[4] ||= [a("span", null, "new", -1)]], 4), a("div", {
-				class: "vc-ps__swatch",
-				style: d({ background: u.value })
-			}, [...n[5] ||= [a("span", null, "current", -1)]], 4)]),
-			a("button", {
-				type: "button",
-				class: "vc-ps__btn vc-ps__btn--ok",
-				onClick: m
-			}, " OK "),
-			a("button", {
-				type: "button",
-				class: "vc-ps__btn",
-				onClick: g
-			}, "Cancel")
-		])], 4));
-	}
-}), Ce = { class: "vc-compact__grid" }, we = { class: "vc-compact__field" }, Te = /* @__PURE__ */ s({
-	__name: "CompactPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		presetColors: { default: () => J },
-		columns: {},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(r, { emit: s }) {
-		let c = y(r, "modelValue"), l = r, u = F(c, s, () => l.format, () => !0), f = t(() => Array.isArray(l.presetColors[0]) ? l.presetColors.flat() : l.presetColors);
-		function m(e) {
-			u.setFromHex(e), u.input(), u.change();
-		}
-		function h(e) {
-			u.setFromHex(e), u.input();
-		}
-		return (t, s) => (p(), i("div", {
-			class: "vc-compact",
-			style: d({
-				width: r.width,
-				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
-			})
-		}, [a("div", Ce, [(p(!0), i(e, null, g(f.value, (e) => (p(), n(Q, {
-			key: e,
-			color: e,
-			active: e.toUpperCase() === v(u).hex.value.toUpperCase(),
-			onSelect: m
-		}, null, 8, ["color", "active"]))), 128))]), a("div", we, [a("div", {
-			class: "vc-compact__preview",
-			style: d({ background: v(u).hex.value })
-		}, null, 4), o(H, {
-			label: "hex",
-			modelValue: v(u).hex.value,
-			"onUpdate:modelValue": h
-		}, null, 8, ["modelValue"])])], 4));
-	}
-}), Ee = /* @__PURE__ */ s({
-	__name: "GrayscalePicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		presetColors: { default: () => X },
-		columns: {},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(r, { emit: a }) {
-		let o = y(r, "modelValue"), s = r, c = F(o, a, () => s.format, () => !0), l = t(() => Array.isArray(s.presetColors[0]) ? s.presetColors.flat() : s.presetColors);
-		function u(e) {
-			c.setFromHex(e), c.input(), c.change();
-		}
-		return (t, a) => (p(), i("div", {
-			class: "vc-gray",
-			style: d({
-				width: r.width,
-				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
-			})
-		}, [(p(!0), i(e, null, g(l.value, (e) => (p(), n(Q, {
-			key: e,
-			color: e,
-			active: e.toUpperCase() === v(c).hex.value.toUpperCase(),
-			onSelect: u
-		}, null, 8, ["color", "active"]))), 128))], 4));
-	}
-}), De = { class: "vc-material__rgb" }, Oe = /* @__PURE__ */ s({
-	__name: "MaterialPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(e, { emit: t }) {
-		let n = y(e, "modelValue"), r = e, s = F(n, t, () => r.format, () => !0);
-		function c(e) {
-			s.setFromHex(e), s.input();
-		}
-		function l(e) {
-			return Math.max(0, Math.min(255, Math.round(+e || 0)));
-		}
-		function u(e, t) {
-			s.setFromRgba({
-				...s.rgba.value,
-				[e]: l(t)
-			}), s.input();
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-material",
-			style: d({
-				width: e.width,
-				borderTopColor: v(s).hex.value
-			})
-		}, [o(H, {
-			class: "vc-material__hex",
-			label: "hex",
-			modelValue: v(s).hex.value,
-			"onUpdate:modelValue": c
-		}, null, 8, ["modelValue"]), a("div", De, [
-			o(H, {
-				label: "r",
-				modelValue: v(s).rgba.value.r,
-				"onUpdate:modelValue": n[0] ||= (e) => u("r", e)
-			}, null, 8, ["modelValue"]),
-			o(H, {
-				label: "g",
-				modelValue: v(s).rgba.value.g,
-				"onUpdate:modelValue": n[1] ||= (e) => u("g", e)
-			}, null, 8, ["modelValue"]),
-			o(H, {
-				label: "b",
-				modelValue: v(s).rgba.value.b,
-				"onUpdate:modelValue": n[2] ||= (e) => u("b", e)
-			}, null, 8, ["modelValue"])
-		])], 4));
-	}
-}), ke = { class: "vc-twitter__swatches" }, Ae = { class: "vc-twitter__field" }, je = /* @__PURE__ */ s({
-	__name: "TwitterPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		presetColors: { default: () => Y },
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(r, { emit: s }) {
-		let c = y(r, "modelValue"), l = r, u = F(c, s, () => l.format, () => !0), f = t(() => Array.isArray(l.presetColors[0]) ? l.presetColors.flat() : l.presetColors);
-		function m(e) {
-			u.setFromHex(e), u.input(), u.change();
-		}
-		function h(e) {
-			u.setFromHex(e), u.input();
-		}
-		return (t, s) => (p(), i("div", {
-			class: "vc-twitter",
-			style: d({ width: r.width })
-		}, [a("div", ke, [(p(!0), i(e, null, g(f.value, (e) => (p(), n(Q, {
-			key: e,
-			color: e,
-			onSelect: m
-		}, null, 8, ["color"]))), 128))]), a("div", Ae, [s[1] ||= a("span", { class: "vc-twitter__hash" }, "#", -1), o(H, {
-			label: "",
-			modelValue: v(u).hex.value.replace("#", ""),
-			"onUpdate:modelValue": s[0] ||= (e) => h("#" + e)
-		}, null, 8, ["modelValue"])])], 4));
-	}
-}), Me = {
-	key: 1,
-	class: "vc-swatches__grid"
-}, Ne = /* @__PURE__ */ s({
-	__name: "SwatchesPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		presetColors: { default: () => Z },
-		columns: {},
-		width: { default: "var(--vc-width, 260px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(r, { emit: a }) {
-		let o = y(r, "modelValue"), s = r, c = F(o, a, () => s.format, () => !0), l = t(() => Array.isArray(s.presetColors[0])), u = t(() => l.value ? s.presetColors : []);
-		function f(e) {
-			c.setFromHex(e), c.input(), c.change();
-		}
-		function m(e) {
-			return e.toUpperCase() === c.hex.value.toUpperCase();
-		}
-		return (t, a) => (p(), i("div", {
-			class: "vc-swatches",
-			style: d({
-				width: r.width,
-				...r.columns == null ? {} : { "--vc-swatch-columns": r.columns }
-			})
-		}, [l.value ? (p(!0), i(e, { key: 0 }, g(u.value, (t, r) => (p(), i("div", {
-			key: r,
-			class: "vc-swatches__row"
-		}, [(p(!0), i(e, null, g(t, (e) => (p(), n(Q, {
-			key: e,
-			color: e,
-			active: m(e),
-			onSelect: f
-		}, null, 8, ["color", "active"]))), 128))]))), 128)) : (p(), i("div", Me, [(p(!0), i(e, null, g(r.presetColors, (e) => (p(), n(Q, {
-			key: e,
-			color: e,
-			active: m(e),
-			onSelect: f
-		}, null, 8, ["color", "active"]))), 128))]))], 4));
-	}
-}), Pe = /* @__PURE__ */ s({
-	__name: "HueSlider",
-	props: /*@__PURE__*/ c({ width: { default: "var(--vc-width, 240px)" } }, {
-		modelValue: { default: 0 },
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(e, { emit: t }) {
-		let n = y(e, "modelValue"), r = e, a = t;
-		function s(e) {
-			n.value = e, a("input", e);
-		}
-		function c() {
-			a("change", n.value ?? 0);
-		}
-		return (e, t) => (p(), i("div", {
-			class: "vc-hue-slider",
-			style: d({ width: r.width })
-		}, [o(B, {
-			hue: n.value ?? 0,
-			onInput: s,
-			onChange: c
-		}, null, 8, ["hue"])], 4));
-	}
-}), Fe = { class: "vc-slider__row" }, Ie = { class: "vc-slider__row" }, Le = ["value"], Re = {
-	key: 0,
-	class: "vc-slider__row"
-}, ze = /* @__PURE__ */ s({
-	__name: "SliderPicker",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(e, { emit: t }) {
-		let n = y(e, "modelValue"), s = e, c = F(n, t, () => s.format, () => s.disableAlpha);
-		function l(e) {
-			let t = +e.target.value;
-			c.setFromHsla({
-				...c.hsla.value,
-				l: t
-			}), c.input();
-		}
-		return (t, n) => (p(), i("div", {
-			class: "vc-slider",
-			style: d({ width: e.width })
-		}, [
-			a("div", Fe, [n[5] ||= a("span", { class: "vc-slider__label" }, "H", -1), o(B, {
-				hue: v(c).hsva.value.h,
-				onInput: n[0] ||= (e) => {
-					v(c).setHue(e), v(c).input();
-				},
-				onChange: n[1] ||= (e) => v(c).change()
-			}, null, 8, ["hue"])]),
-			a("div", Ie, [n[6] ||= a("span", { class: "vc-slider__label" }, "L", -1), a("input", {
-				class: "vc-slider__range",
-				type: "range",
-				min: "0",
-				max: "100",
-				value: v(c).hsla.value.l,
-				onInput: l,
-				onChange: n[2] ||= (e) => v(c).change()
-			}, null, 40, Le)]),
-			e.disableAlpha ? r("", !0) : (p(), i("div", Re, [n[7] ||= a("span", { class: "vc-slider__label" }, "A", -1), o(V, {
-				rgba: v(c).rgba.value,
-				onInput: n[3] ||= (e) => {
-					v(c).setAlpha(e), v(c).input();
-				},
-				onChange: n[4] ||= (e) => v(c).change()
-			}, null, 8, ["rgba"])]))
-		], 4));
-	}
-}), Be = { class: "vc-sliders__label" }, Ve = [
-	"max",
-	"step",
-	"value",
-	"onInput"
-], $ = { class: "vc-sliders__value" }, He = /* @__PURE__ */ s({
-	__name: "RGBASliders",
-	props: /*@__PURE__*/ c({
-		format: { default: "rgb" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(t, { emit: n }) {
-		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
-			{
-				key: "r",
-				max: 255,
-				step: 1
-			},
-			{
-				key: "g",
-				max: 255,
-				step: 1
-			},
-			{
-				key: "b",
-				max: 255,
-				step: 1
-			},
-			{
-				key: "a",
-				max: 1,
-				step: .01
-			}
-		];
-		function l(e) {
-			return s.rgba.value[e];
-		}
-		function u(e, t) {
-			let n = +t.target.value;
-			s.setFromRgba({
-				...s.rgba.value,
-				[e]: n
-			}), s.input();
-		}
-		return (n, r) => (p(), i("div", {
-			class: "vc-sliders",
-			style: d({ width: t.width })
-		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
-			class: "vc-sliders__row",
-			key: e.key
-		}, [
-			a("span", Be, _(e.key.toUpperCase()), 1),
-			a("input", {
-				class: "vc-sliders__range",
-				type: "range",
-				min: 0,
-				max: e.max,
-				step: e.step,
-				value: l(e.key),
-				onInput: (t) => u(e.key, t),
-				onChange: r[0] ||= (e) => v(s).change()
-			}, null, 40, Ve),
-			a("span", $, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
-		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
-	}
-}), Ue = { class: "vc-sliders__label" }, We = [
-	"max",
-	"step",
-	"value",
-	"onInput"
-], Ge = { class: "vc-sliders__value" }, Ke = /* @__PURE__ */ s({
-	__name: "HSVSliders",
-	props: /*@__PURE__*/ c({
-		format: { default: "hex" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(t, { emit: n }) {
-		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
-			{
-				key: "h",
-				max: 360,
-				step: 1
-			},
-			{
-				key: "s",
-				max: 100,
-				step: 1
-			},
-			{
-				key: "v",
-				max: 100,
-				step: 1
-			},
-			{
-				key: "a",
-				max: 1,
-				step: .01
-			}
-		];
-		function l(e) {
-			return s.hsva.value[e];
-		}
-		function u(e, t) {
-			let n = +t.target.value;
-			s.setFromHsva({
-				...s.hsva.value,
-				[e]: n
-			}), s.input();
-		}
-		return (n, r) => (p(), i("div", {
-			class: "vc-sliders",
-			style: d({ width: t.width })
-		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
-			class: "vc-sliders__row",
-			key: e.key
-		}, [
-			a("span", Ue, _(e.key.toUpperCase()), 1),
-			a("input", {
-				class: "vc-sliders__range",
-				type: "range",
-				min: 0,
-				max: e.max,
-				step: e.step,
-				value: l(e.key),
-				onInput: (t) => u(e.key, t),
-				onChange: r[0] ||= (e) => v(s).change()
-			}, null, 40, We),
-			a("span", Ge, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
-		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
-	}
-}), qe = { class: "vc-sliders__label" }, Je = [
-	"max",
-	"step",
-	"value",
-	"onInput"
-], Ye = { class: "vc-sliders__value" }, Xe = /* @__PURE__ */ s({
-	__name: "HSLSliders",
-	props: /*@__PURE__*/ c({
-		format: { default: "hsl" },
-		disableAlpha: {
-			type: Boolean,
-			default: !1
-		},
-		width: { default: "var(--vc-width, 240px)" }
-	}, {
-		modelValue: {},
-		modelModifiers: {}
-	}),
-	emits: /*@__PURE__*/ c(["change", "input"], ["update:modelValue"]),
-	setup(t, { emit: n }) {
-		let r = y(t, "modelValue"), o = t, s = F(r, n, () => o.format, () => o.disableAlpha), c = [
-			{
-				key: "h",
-				max: 360,
-				step: 1
-			},
-			{
-				key: "s",
-				max: 100,
-				step: 1
-			},
-			{
-				key: "l",
-				max: 100,
-				step: 1
-			},
-			{
-				key: "a",
-				max: 1,
-				step: .01
-			}
-		];
-		function l(e) {
-			return s.hsla.value[e];
-		}
-		function u(e, t) {
-			let n = +t.target.value;
-			s.setFromHsla({
-				...s.hsla.value,
-				[e]: n
-			}), s.input();
-		}
-		return (n, r) => (p(), i("div", {
-			class: "vc-sliders",
-			style: d({ width: t.width })
-		}, [(p(), i(e, null, g(c, (e) => S(a("div", {
-			class: "vc-sliders__row",
-			key: e.key
-		}, [
-			a("span", qe, _(e.key.toUpperCase()), 1),
-			a("input", {
-				class: "vc-sliders__range",
-				type: "range",
-				min: 0,
-				max: e.max,
-				step: e.step,
-				value: l(e.key),
-				onInput: (t) => u(e.key, t),
-				onChange: r[0] ||= (e) => v(s).change()
-			}, null, 40, Je),
-			a("span", Ye, _(e.key === "a" ? l(e.key).toFixed(2) : Math.round(l(e.key))), 1)
-		]), [[b, e.key !== "a" || !t.disableAlpha]])), 64))], 4));
-	}
-});
-//#endregion
-//#region src/composables/useColorHistory.ts
-function Ze(e = 8) {
-	let t = h([]);
-	function n(n) {
-		let r = n.toUpperCase();
-		t.value = [r, ...t.value.filter((e) => e !== r)].slice(0, e);
-	}
-	function r() {
-		t.value = [];
-	}
-	return {
-		history: m(t),
-		add: n,
-		clear: r
-	};
-}
-//#endregion
-export { V as Alpha, J as COMPACT_PRESETS, ue as ChromePicker, Te as CompactPicker, q as DEFAULT_PRESETS, H as EditableInput, X as GRAYSCALE_PRESETS, Ee as GrayscalePicker, Xe as HSLSliders, Ke as HSVSliders, B as Hue, Pe as HueSlider, Z as MATERIAL_GRID, de as MATERIAL_PRESETS, Oe as MaterialPicker, Se as PhotoshopPicker, He as RGBASliders, z as Saturation, _e as SketchPicker, ze as SliderPicker, Q as Swatch, Ne as SwatchesPicker, Y as TWITTER_PRESETS, je as TwitterPicker, j as hexToRgb, k as hslToRgb, E as hsvToRgb, A as rgbToHex, O as rgbToHsl, D as rgbToHsv, M as useColor, Ze as useColorHistory, R as useDrag, I as useEyeDropper };