@elcrm/form 0.0.82 → 0.0.84

package/dist/fields/Color.js

@@ -1,19 +1,20 @@
 import e from "../styles/Field.module.js";
 import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
-import r from "../styles/Color.module.js";
-import i from "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { createPortal as c } from "react-dom";
+import { acquireOverlayZIndex as r, releaseOverlayZIndex as i } from "../overlayZ.js";
+import a from "../styles/Color.module.js";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
 //#region src/lib/fields/Color.tsx
-var l = /* @__PURE__ */ "#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E".split(".");
-function u(e, t, n) {
+var d = /* @__PURE__ */ "#FF2D55.#FF3B30.#FF453A.#FF6961.#FF8A80.#C11F3E.#AF52DE.#BF5AF2.#DA8FFF.#5856D6.#5E5CE6.#7D7AFF.#007AFF.#0A84FF.#409CFF.#64D2FF.#70D7FF.#5AC8FA.#32ADE6.#64D2FF.#40C8E0.#00C7BE.#63E6E2.#66D4CF.#34C759.#30D158.#30DB5B.#4CD964.#6DE6A0.#8EEDB3.#A8E10C.#B5F200.#D0FF00.#E4FF66.#F2FF99.#C6FF00.#FFCC00.#FFD60A.#FFEA00.#FFE066.#FFF3A3.#FFEB3B.#FF9500.#FF9F0A.#FFB340.#FFB340.#FFD580.#FF8C00.#A2845E.#AC8E68.#C4A484.#8E8E93.#636366.#48484A.#3A3A3C.#2C2C2E.#1C1C1E".split(".");
+function f(e, t, n) {
 	return Math.min(n, Math.max(t, e));
 }
-function d(e) {
-	return Math.round(u(e, 0, 255)).toString(16).padStart(2, "0").toUpperCase();
+function p(e) {
+	return Math.round(f(e, 0, 255)).toString(16).padStart(2, "0").toUpperCase();
 }
-function f(e, t, n) {
+function m(e, t, n) {
 	let r = (e % 360 + 360) % 360, i = n * t, a = i * (1 - Math.abs(r / 60 % 2 - 1)), o = n - i, s = 0, c = 0, l = 0;
 	return r < 60 ? [s, c, l] = [
 		i,
@@ -45,7 +46,7 @@ function f(e, t, n) {
 		b: (l + o) * 255
 	};
 }
-function p(e, t, n) {
+function h(e, t, n) {
 	let r = e / 255, i = t / 255, a = n / 255, o = Math.max(r, i, a), s = o - Math.min(r, i, a), c = 0;
 	s !== 0 && (c = o === r ? (i - a) / s % 6 : o === i ? (a - r) / s + 2 : (r - i) / s + 4, c *= 60, c < 0 && (c += 360));
 	let l = o === 0 ? 0 : s / o;
@@ -55,7 +56,7 @@ function p(e, t, n) {
 		v: o
 	};
 }
-function m(e) {
+function g(e) {
 	if (typeof e != "string") return null;
 	let t = e.trim();
 	if (!t || (t[0] === "#" && (t = t.slice(1)), ![
@@ -66,99 +67,99 @@ function m(e) {
 	].includes(t.length)) || !/^[0-9a-fA-F]+$/.test(t)) return null;
 	let n = 0, r = 0, i = 0, a = 1;
 	return t.length === 3 || t.length === 4 ? (n = parseInt(t[0] + t[0], 16), r = parseInt(t[1] + t[1], 16), i = parseInt(t[2] + t[2], 16), t.length === 4 && (a = parseInt(t[3] + t[3], 16) / 255)) : (n = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16), t.length === 8 && (a = parseInt(t.slice(6, 8), 16) / 255)), {
-		...p(n, r, i),
+		...h(n, r, i),
 		a
 	};
 }
-function h(e, t) {
-	let { r: n, g: r, b: i } = f(e.h, e.s, e.v), a = `#${d(n)}${d(r)}${d(i)}`;
-	return !t || e.a >= .999 ? a : `${a}${d(e.a * 255)}`;
+function _(e, t) {
+	let { r: n, g: r, b: i } = m(e.h, e.s, e.v), a = `#${p(n)}${p(r)}${p(i)}`;
+	return !t || e.a >= .999 ? a : `${a}${p(e.a * 255)}`;
 }
-function g(e) {
-	let { r: t, g: n, b: r } = f(e.h, e.s, e.v), i = Math.round(t), a = Math.round(n), o = Math.round(r);
+function v(e) {
+	let { r: t, g: n, b: r } = m(e.h, e.s, e.v), i = Math.round(t), a = Math.round(n), o = Math.round(r);
 	return e.a >= .999 ? `rgb(${i}, ${a}, ${o})` : `rgba(${i}, ${a}, ${o}, ${Number(e.a.toFixed(3))})`;
 }
-function _(e) {
-	let { r: t, g: n, b: r } = f(e, 1, 1);
+function y(e) {
+	let { r: t, g: n, b: r } = m(e, 1, 1);
 	return `rgb(${Math.round(t)},${Math.round(n)},${Math.round(r)})`;
 }
-function v(e) {
-	let t = m(e);
-	return t ? h(t, t.a < .999) : e.toUpperCase();
+function b(e) {
+	let t = g(e);
+	return t ? _(t, t.a < .999) : e.toUpperCase();
 }
-function y(e) {
+function x(e) {
 	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : !1;
 }
-function b(e) {
+function S(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	let t = e.tagName;
 	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" ? !0 : !!e.isContentEditable;
 }
-function x(e) {
+function C(e) {
 	let t = (e || "").trim();
 	if (!t) return null;
-	let n = m(t) ?? m(t[0] === "#" ? t : `#${t.replace(/^#/, "")}`);
+	let n = g(t) ?? g(t[0] === "#" ? t : `#${t.replace(/^#/, "")}`);
 	if (n) return n;
 	let r = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/i.exec(t);
 	if (r) {
-		let e = u(Number(r[1]), 0, 255), t = u(Number(r[2]), 0, 255), n = u(Number(r[3]), 0, 255), i = r[4] === void 0 ? 1 : u(Number(r[4]), 0, 1);
+		let e = f(Number(r[1]), 0, 255), t = f(Number(r[2]), 0, 255), n = f(Number(r[3]), 0, 255), i = r[4] === void 0 ? 1 : f(Number(r[4]), 0, 1);
 		return {
-			...p(e, t, n),
+			...h(e, t, n),
 			a: i
 		};
 	}
 	return null;
 }
-function S() {
+function w() {
 	return typeof window < "u" && "EyeDropper" in window;
 }
-var C = {
+var T = {
 	h: 0,
 	s: 1,
 	v: .76,
 	a: 1
 };
-function w({ value: u = "", form: d, onValue: f, onBlur: p, name: g = "", placeholder: _ = "#000000", label: v = "", error: S = "", hidden: w = !1, disabled: E = !1, className: D = "", after: O = "", before: k = "", colors: A, alpha: j = !0 }) {
-	let { value: M } = n(d, g, u), N = typeof M == "string" ? M : M == null ? "" : String(M), [P, F] = i.useState(!1), [I, L] = i.useState(null), [R, z] = i.useState(() => m(N) ?? { ...C }), [B, V] = i.useState(() => h(m(N) ?? C, j)), H = A?.length ? A : l, U = m(N), W = U ?? (y(N) ? m(_) : null), G = U ? h(U, j) : "", K = W ? h(W, j) : "transparent";
-	i.useEffect(() => {
-		let e = m(N);
-		e && (z(e), V(h(e, j)));
+function E({ value: r = "", form: i, onValue: f, onBlur: p, name: m = "", placeholder: h = "#000000", label: v = "", error: y = "", hidden: b = !1, disabled: w = !1, className: E = "", after: O = "", before: k = "", colors: A, alpha: j = !0 }) {
+	let { value: M } = n(i, m, r), N = typeof M == "string" ? M : M == null ? "" : String(M), [P, F] = o.useState(!1), [I, L] = o.useState(null), [R, z] = o.useState(() => g(N) ?? { ...T }), [B, V] = o.useState(() => _(g(N) ?? T, j)), H = A?.length ? A : d, U = g(N), W = U ?? (x(N) ? g(h) : null), G = U ? _(U, j) : "", K = W ? _(W, j) : "transparent";
+	o.useEffect(() => {
+		let e = g(N);
+		e && (z(e), V(_(e, j)));
 	}, [N, j]);
-	let q = i.useCallback((e, t) => {
-		let n = h(e, j), r = {
+	let q = o.useCallback((e, t) => {
+		let n = _(e, j), r = {
 			value: n,
-			name: g || ""
+			name: m || ""
 		};
-		d && g && (t === "live" ? d.onValue(r) : d.setValue(r)), f && f !== d?.onValue && f(r), V(n);
+		i && m && (t === "live" ? i.onValue(r) : i.setValue(r)), f && f !== i?.onValue && f(r), V(n);
 	}, [
 		j,
-		d,
-		g,
+		i,
+		m,
 		f
 	]), J = (e) => {
-		if (E) return;
-		let t = m(N) ?? { ...R };
-		z(t), V(h(t, j)), L(e.getBoundingClientRect()), F(!0);
+		if (w) return;
+		let t = g(N) ?? { ...R };
+		z(t), V(_(t, j)), L(e.getBoundingClientRect()), F(!0);
 	}, Y = () => {
 		F(!1), p?.({
-			value: h(R, j),
-			name: g || ""
+			value: _(R, j),
+			name: m || ""
 		});
 	};
-	i.useEffect(() => {
-		if (!P || E) return;
+	o.useEffect(() => {
+		if (!P || w) return;
 		let e = "", t = (t) => {
-			let n = x(t);
+			let n = C(t);
 			if (!n) return !1;
 			let r = {
 				...n,
 				a: j ? n.a : 1
-			}, i = h(r, j);
+			}, i = _(r, j);
 			return i === e ? !0 : (e = i, z(r), q(r, "commit"), !0);
 		}, n = (e) => {
-			b(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
+			S(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
 		}, r = (e) => {
-			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || b(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
+			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || S(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
 				t(e);
 			})));
 		};
@@ -167,12 +168,12 @@ function w({ value: u = "", form: d, onValue: f, onBlur: p, name: g = "", placeh
 		};
 	}, [
 		P,
-		E,
+		w,
 		j,
 		q
 	]);
 	let X = (e) => {
-		if (!E) {
+		if (!w) {
 			if (!P && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
 				e.preventDefault(), J(e.currentTarget);
 				return;
@@ -180,44 +181,44 @@ function w({ value: u = "", form: d, onValue: f, onBlur: p, name: g = "", placeh
 			P && e.key === "Escape" && (e.preventDefault(), Y());
 		}
 	};
-	return w && y(N) ? null : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(t, {
+	return b && x(N) ? null : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l(t, {
 		type: "color",
 		label: v,
-		error: S,
-		element_blok: { className: [D || ""] },
+		error: y,
+		element_blok: { className: [E || ""] },
 		element_input: {
 			className: [e.w],
-			props: { "data-disabled": E ? "true" : void 0 }
+			props: { "data-disabled": w ? "true" : void 0 }
 		},
 		children: [
-			k ? /* @__PURE__ */ o("span", {
+			k ? /* @__PURE__ */ c("span", {
 				className: e.affix,
 				children: k
 			}) : null,
-			/* @__PURE__ */ s("div", {
-				className: r.trigger,
+			/* @__PURE__ */ l("div", {
+				className: a.trigger,
 				role: "combobox",
-				tabIndex: E ? -1 : 0,
+				tabIndex: w ? -1 : 0,
 				"aria-expanded": P,
 				"aria-haspopup": "dialog",
-				"aria-disabled": E,
+				"aria-disabled": w,
 				"aria-label": v || "Цвет",
 				onClick: (e) => J(e.currentTarget),
 				onKeyDown: X,
-				children: [/* @__PURE__ */ o("span", {
-					className: r.preview,
+				children: [/* @__PURE__ */ c("span", {
+					className: a.preview,
 					style: { "--preview-color": K }
-				}), /* @__PURE__ */ o("span", {
-					className: [r.hexText, G ? "" : r.placeholder].filter(Boolean).join(" "),
-					children: G || _
+				}), /* @__PURE__ */ c("span", {
+					className: [a.hexText, G ? "" : a.placeholder].filter(Boolean).join(" "),
+					children: G || h
 				})]
 			}),
-			O ? /* @__PURE__ */ o("span", {
+			O ? /* @__PURE__ */ c("span", {
 				className: e.affix,
 				children: O
 			}) : null
 		]
-	}), P && c(/* @__PURE__ */ o(T, {
+	}), P && u(/* @__PURE__ */ c(D, {
 		parent: I || void 0,
 		hsva: R,
 		setHsva: z,
@@ -230,132 +231,135 @@ function w({ value: u = "", form: d, onValue: f, onBlur: p, name: g = "", placeh
 		onClose: Y
 	}), document.body)] });
 }
-w.displayName = "ColorField";
-function T({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha: l, palette: d, onLive: f, onCommit: p, onClose: _ }) {
-	if (!e) return null;
-	let y = l ? 340 : 300, b = window.innerHeight - e.bottom < y + 8 ? Math.max(8, e.top - y - 8) : Math.min(window.innerHeight - y - 8, e.bottom + 8), x = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), C = g({
+E.displayName = "ColorField";
+function D({ parent: e, hsva: t, setHsva: n, hexDraft: u, setHexDraft: d, alpha: p, palette: m, onLive: h, onCommit: y, onClose: x }) {
+	let [S] = o.useState(() => r());
+	if (o.useEffect(() => () => i(S), [S]), !e) return null;
+	let C = p ? 340 : 300, T = window.innerHeight - e.bottom < C + 8 ? Math.max(8, e.top - C - 8) : Math.min(window.innerHeight - C - 8, e.bottom + 8), E = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), D = v({
 		...t,
 		a: 1
-	}), w = v(h(t, l)), T = (e, t) => {
-		n(e), t === "live" ? f(e) : p(e);
-	}, k = () => {
-		let e = m(i);
+	}), j = b(_(t, p)), N = (e, t) => {
+		n(e), t === "live" ? h(e) : y(e);
+	}, P = () => {
+		let e = g(u);
 		if (!e) {
-			c(h(t, l));
+			d(_(t, p));
 			return;
 		}
-		T(e, "commit");
-	}, j = (e) => {
-		let n = e.replace(/[^\d]/g, ""), r = u(Number(n || 0), 0, 100);
-		T({
+		N(e, "commit");
+	}, F = (e) => {
+		let n = e.replace(/[^\d]/g, ""), r = f(Number(n || 0), 0, 100);
+		N({
 			...t,
 			a: r / 100
 		}, "commit");
-	}, M = async () => {
-		if (S()) try {
-			let e = window.EyeDropper, n = m((await new e().open()).sRGBHex);
-			n && T({
+	}, I = async () => {
+		if (w()) try {
+			let e = window.EyeDropper, n = g((await new e().open()).sRGBHex);
+			n && N({
 				...n,
 				a: t.a
 			}, "commit");
 		} catch {}
 	};
-	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
-		className: r.o,
-		onClick: _,
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+		className: a.o,
+		style: { zIndex: S },
+		onClick: x,
 		"aria-hidden": !0
-	}), /* @__PURE__ */ s("div", {
-		className: r.panel,
+	}), /* @__PURE__ */ l("div", {
+		className: a.panel,
 		role: "dialog",
 		"aria-label": "Выбор цвета",
 		style: {
-			top: b,
-			left: x,
-			width: 260
+			top: T,
+			left: E,
+			width: 260,
+			zIndex: S + 1
 		},
 		children: [
-			/* @__PURE__ */ o(E, {
+			/* @__PURE__ */ c(O, {
 				hsva: t,
-				onChange: (e, n, r) => T({
+				onChange: (e, n, r) => N({
 					...t,
 					s: e,
 					v: n
 				}, r)
 			}),
-			/* @__PURE__ */ s("div", {
-				className: r.slidersRow,
-				children: [S() ? /* @__PURE__ */ o("button", {
+			/* @__PURE__ */ l("div", {
+				className: a.slidersRow,
+				children: [w() ? /* @__PURE__ */ c("button", {
 					type: "button",
-					className: r.eyedropper,
+					className: a.eyedropper,
 					"aria-label": "Пипетка",
-					onClick: M,
-					children: /* @__PURE__ */ o(A, {})
-				}) : null, /* @__PURE__ */ s("div", {
-					className: r.sliders,
-					children: [/* @__PURE__ */ o(D, {
+					onClick: I,
+					children: /* @__PURE__ */ c(M, {})
+				}) : null, /* @__PURE__ */ l("div", {
+					className: a.sliders,
+					children: [/* @__PURE__ */ c(k, {
 						h: t.h,
-						onChange: (e, n) => T({
+						onChange: (e, n) => N({
 							...t,
 							h: e
 						}, n)
-					}), l ? /* @__PURE__ */ o(O, {
+					}), p ? /* @__PURE__ */ c(A, {
 						a: t.a,
-						color: C,
-						onChange: (e, n) => T({
+						color: D,
+						onChange: (e, n) => N({
 							...t,
 							a: e
 						}, n)
 					}) : null]
 				})]
 			}),
-			/* @__PURE__ */ s("div", {
-				className: r.inputs,
+			/* @__PURE__ */ l("div", {
+				className: a.inputs,
 				children: [
-					/* @__PURE__ */ o("span", {
-						className: r.format,
+					/* @__PURE__ */ c("span", {
+						className: a.format,
 						children: "Hex"
 					}),
-					/* @__PURE__ */ o("input", {
-						className: r.input,
-						value: i.replace(/^#/, ""),
+					/* @__PURE__ */ c("input", {
+						className: a.input,
+						value: u.replace(/^#/, ""),
 						spellCheck: !1,
 						"aria-label": "Hex",
 						onChange: (e) => {
 							let t = e.target.value.replace(/[^0-9a-fA-F]/g, "");
-							c(t ? `#${t}` : "");
+							d(t ? `#${t}` : "");
 						},
-						onBlur: k,
+						onBlur: P,
 						onKeyDown: (e) => {
 							e.key === "Enter" && (e.preventDefault(), e.target.blur());
 						}
 					}),
-					l ? /* @__PURE__ */ o("input", {
-						className: `${r.input} ${r.inputAlpha}`,
+					p ? /* @__PURE__ */ c("input", {
+						className: `${a.input} ${a.inputAlpha}`,
 						value: `${Math.round(t.a * 100)} %`,
 						"aria-label": "Прозрачность",
-						onChange: (e) => j(e.target.value),
+						onChange: (e) => F(e.target.value),
 						onFocus: (e) => e.target.select()
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ o("div", {
-				className: r.palette,
+			/* @__PURE__ */ c("div", {
+				className: a.palette,
 				role: "listbox",
 				"aria-label": "Палитра",
-				children: d.map((e) => {
-					let t = v(e) === w;
-					return /* @__PURE__ */ o("button", {
+				children: m.map((e) => {
+					let t = b(e) === j;
+					return /* @__PURE__ */ c("button", {
 						type: "button",
 						role: "option",
 						"aria-checked": t,
 						"aria-label": e,
-						className: r.swatchBtn,
+						className: a.swatchBtn,
 						style: { "--swatch": e },
 						onClick: () => {
-							let t = m(e);
-							t && T({
+							let t = g(e);
+							t && N({
 								...t,
-								a: l ? t.a : 1
+								a: p ? t.a : 1
 							}, "commit");
 						}
 					}, e);
@@ -364,10 +368,10 @@ function T({ parent: e, hsva: t, setHsva: n, hexDraft: i, setHexDraft: c, alpha:
 		]
 	})] });
 }
-function E({ hsva: e, onChange: t }) {
-	let n = i.useRef(null), a = i.useRef(!1), c = i.useRef(t);
-	c.current = t;
-	let l = (t, r) => {
+function O({ hsva: e, onChange: t }) {
+	let n = o.useRef(null), r = o.useRef(!1), i = o.useRef(t);
+	i.current = t;
+	let s = (t, r) => {
 		let i = n.current;
 		if (!i) return {
 			s: e.s,
@@ -375,42 +379,42 @@ function E({ hsva: e, onChange: t }) {
 		};
 		let a = i.getBoundingClientRect();
 		return {
-			s: u((t - a.left) / a.width, 0, 1),
-			v: u(1 - (r - a.top) / a.height, 0, 1)
+			s: f((t - a.left) / a.width, 0, 1),
+			v: f(1 - (r - a.top) / a.height, 0, 1)
 		};
 	};
-	return i.useEffect(() => {
+	return o.useEffect(() => {
 		let e = (e) => {
-			if (!a.current) return;
-			let { s: t, v: n } = l(e.clientX, e.clientY);
-			c.current(t, n, "live");
+			if (!r.current) return;
+			let { s: t, v: n } = s(e.clientX, e.clientY);
+			i.current(t, n, "live");
 		}, t = (e) => {
-			if (!a.current) return;
-			a.current = !1;
-			let { s: t, v: n } = l(e.clientX, e.clientY);
-			c.current(t, n, "commit");
+			if (!r.current) return;
+			r.current = !1;
+			let { s: t, v: n } = s(e.clientX, e.clientY);
+			i.current(t, n, "commit");
 		};
 		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
 			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
 		};
-	}, []), /* @__PURE__ */ s("div", {
+	}, []), /* @__PURE__ */ l("div", {
 		ref: n,
-		className: r.sv,
-		style: { background: _(e.h) },
+		className: a.sv,
+		style: { background: y(e.h) },
 		onPointerDown: (e) => {
-			a.current = !0;
-			let { s: t, v: n } = l(e.clientX, e.clientY);
-			c.current(t, n, "live");
+			r.current = !0;
+			let { s: t, v: n } = s(e.clientX, e.clientY);
+			i.current(t, n, "live");
 		},
 		children: [
-			/* @__PURE__ */ o("div", { className: r.svWhite }),
-			/* @__PURE__ */ o("div", { className: r.svBlack }),
-			/* @__PURE__ */ o("div", {
-				className: r.handle,
+			/* @__PURE__ */ c("div", { className: a.svWhite }),
+			/* @__PURE__ */ c("div", { className: a.svBlack }),
+			/* @__PURE__ */ c("div", {
+				className: a.handle,
 				style: {
 					left: `${e.s * 100}%`,
 					top: `${(1 - e.v) * 100}%`,
-					background: g({
+					background: v({
 						...e,
 						a: 1
 					})
@@ -419,57 +423,57 @@ function E({ hsva: e, onChange: t }) {
 		]
 	});
 }
-function D({ h: e, onChange: t }) {
-	return /* @__PURE__ */ o(k, {
-		className: `${r.slider} ${r.sliderHue}`,
+function k({ h: e, onChange: t }) {
+	return /* @__PURE__ */ c(j, {
+		className: `${a.slider} ${a.sliderHue}`,
 		ratio: e / 360,
 		onRatio: (e, n) => t(e * 360, n),
-		handleColor: _(e)
+		handleColor: y(e)
 	});
 }
-function O({ a: e, color: t, onChange: n }) {
-	return /* @__PURE__ */ o(k, {
-		className: `${r.slider} ${r.sliderAlpha}`,
+function A({ a: e, color: t, onChange: n }) {
+	return /* @__PURE__ */ c(j, {
+		className: `${a.slider} ${a.sliderAlpha}`,
 		style: { "--alpha-color": t },
 		ratio: e,
 		onRatio: n,
 		handleColor: t
 	});
 }
-function k({ className: e, style: t, ratio: n, onRatio: a, handleColor: s }) {
-	let c = i.useRef(null), l = i.useRef(!1), d = (e, t) => {
-		let n = c.current;
+function j({ className: e, style: t, ratio: n, onRatio: r, handleColor: i }) {
+	let s = o.useRef(null), l = o.useRef(!1), u = (e, t) => {
+		let n = s.current;
 		if (!n) return;
-		let r = n.getBoundingClientRect();
-		a(u((e - r.left) / r.width, 0, 1), t);
+		let i = n.getBoundingClientRect();
+		r(f((e - i.left) / i.width, 0, 1), t);
 	};
-	return i.useEffect(() => {
+	return o.useEffect(() => {
 		let e = (e) => {
-			l.current && d(e.clientX, "live");
+			l.current && u(e.clientX, "live");
 		}, t = (e) => {
-			l.current && (l.current = !1, d(e.clientX, "commit"));
+			l.current && (l.current = !1, u(e.clientX, "commit"));
 		};
 		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
 			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
 		};
-	}, [a]), /* @__PURE__ */ o("div", {
-		ref: c,
+	}, [r]), /* @__PURE__ */ c("div", {
+		ref: s,
 		className: e,
 		style: t,
 		onPointerDown: (e) => {
-			l.current = !0, d(e.clientX, "live");
+			l.current = !0, u(e.clientX, "live");
 		},
-		children: /* @__PURE__ */ o("div", {
-			className: r.sliderHandle,
+		children: /* @__PURE__ */ c("div", {
+			className: a.sliderHandle,
 			style: {
-				left: `${u(n, 0, 1) * 100}%`,
-				background: s
+				left: `${f(n, 0, 1) * 100}%`,
+				background: i
 			}
 		})
 	});
 }
-function A() {
-	return /* @__PURE__ */ s("svg", {
+function M() {
+	return /* @__PURE__ */ l("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 24 24",
@@ -480,12 +484,12 @@ function A() {
 		strokeLinejoin: "round",
 		"aria-hidden": !0,
 		children: [
-			/* @__PURE__ */ o("path", { d: "m2 22 1-1h3l9-9" }),
-			/* @__PURE__ */ o("path", { d: "M3 21v-3l9-9" }),
-			/* @__PURE__ */ o("path", { d: "m15 5 3 3" }),
-			/* @__PURE__ */ o("path", { d: "M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z" })
+			/* @__PURE__ */ c("path", { d: "m2 22 1-1h3l9-9" }),
+			/* @__PURE__ */ c("path", { d: "M3 21v-3l9-9" }),
+			/* @__PURE__ */ c("path", { d: "m15 5 3 3" }),
+			/* @__PURE__ */ c("path", { d: "M17.5 2.5a2.12 2.12 0 0 1 3 3L12 14l-4 1 1-4Z" })
 		]
 	});
 }
 //#endregion
-export { l as DEFAULT_COLOR_PALETTE, w as default };
+export { d as DEFAULT_COLOR_PALETTE, E as default };