@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/forms/ColorPicker/ColorPicker.mjs

@@ -1,38 +1,39 @@
-import { en as e } from "../../../i18n/en.mjs";
-import { useControllableState as t } from "../../../hooks/useControllableState.mjs";
-import { useMessages as n } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
-import { cx as r } from "../../../utils/cx.mjs";
-import { VisuallyHidden as i } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import { IconButton as a } from "../../primitives/Button/Button.mjs";
-import { CheckIcon as o, ErrorIcon as s, EyeDropperIcon as c } from "../../primitives/Icon/icons.mjs";
-import { useFieldContext as l, useFieldControl as u } from "../Field/FieldContext.mjs";
-import { Input as d } from "../Input/Input.mjs";
-import { colorsEqual as f, describeColor as p, formatColor as m, getHueName as h, getLuminance as g, hslToHsv as _, hsvToHsl as v, hsvToRgb as y, isValidColor as b, parseColor as x, rgbToHsv as S, toHex as C } from "./colorUtils.mjs";
-import w from "./ColorPicker.module.css.mjs";
-import { useEffect as T, useId as ee, useRef as E, useState as D } from "react";
-import { Fragment as te, jsx as O, jsxs as k } from "react/jsx-runtime";
-//#region src/components/forms/ColorPicker/ColorPicker.tsx
-function ne(e) {
+"use client";
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { cx as t } from "../../../utils/cx.mjs";
+import { IconButton as n } from "../../primitives/Button/Button.mjs";
+import { CheckIcon as r, ErrorIcon as i, EyeDropperIcon as a } from "../../primitives/Icon/icons.mjs";
+import { VisuallyHidden as o } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { useFieldContext as s, useFieldControl as c } from "../Field/FieldContext.mjs";
+import { Input as l } from "../Input/Input.mjs";
+import { colorsEqual as u, describeColor as d, formatColor as f, getHueName as p, getLuminance as m, hslToHsv as h, hsvToHsl as g, hsvToRgb as _, isValidColor as v, parseColor as y, rgbToHsv as b, toHex as x } from "./colorUtils.mjs";
+import S from "./ColorPicker.module.css.mjs";
+import { useMessages as ee } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { en as te } from "../../../i18n/en.mjs";
+import { useEffect as C, useId as ne, useRef as w, useState as T } from "react";
+import { Fragment as re, jsx as E, jsxs as D } from "react/jsx-runtime";
+// src/components/forms/ColorPicker/ColorPicker.tsx
+function O(e) {
 	let { colors: t } = e.colorPicker;
 	return {
 		...e.colorPicker,
-		describeColor: (e) => p(e, t),
-		hueName: (e) => h(e, t)
+		describeColor: (e) => d(e, t),
+		hueName: (e) => p(e, t)
 	};
 }
-var re = ne(e), ie = "#1d4ed8", ae = {
+var ie = O(te), k = "#1d4ed8", ae = {
 	h: 224,
 	s: 87,
 	v: 85,
 	a: 1
 }, oe = {
-	sm: w.sizeSm,
-	md: w.sizeMd,
-	lg: w.sizeLg
+	sm: S.sizeSm,
+	md: S.sizeMd,
+	lg: S.sizeLg
 }, se = {
-	panel: w.panel,
-	plain: w.plain
-}, A = (e, t, n) => Math.min(n, Math.max(t, e)), ce = "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))", j = (e) => m(e, "rgb");
+	panel: S.panel,
+	plain: S.plain
+}, A = (e, t, n) => Math.min(n, Math.max(t, e)), ce = "linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))", j = (e) => f(e, "rgb");
 function le(e, t) {
 	let n = e.shiftKey ? 10 : 1, r = t !== "y", i = t !== "x";
 	switch (e.key) {
@@ -92,21 +93,21 @@ function le(e, t) {
 	}
 }
 function ue() {
-	if (!(typeof window > "u")) return window.EyeDropper;
+	if (typeof window < "u") return window.EyeDropper;
 }
-function de({ value: e, defaultValue: n, onValueChange: r, onValueCommit: i, format: a, alpha: o }) {
-	let [s, c] = t({
-		value: e,
-		defaultValue: n ?? ie,
+function de({ value: t, defaultValue: n, onValueChange: r, onValueCommit: i, format: a, alpha: o }) {
+	let [s, c] = e({
+		value: t,
+		defaultValue: n ?? k,
 		onChange: r
 	}), l = (e) => o ? e : {
 		...e,
 		a: 1
-	}, u = (e) => m(e, a, { alpha: o }), [d, f] = D(() => l(x(s) ?? ae)), [p, h] = D(s), g = E(d), _ = d;
-	if (s !== p) {
+	}, u = (e) => f(e, a, { alpha: o }), [d, p] = T(() => l(y(s) ?? ae)), [m, h] = T(s), g = w(d), _ = d;
+	if (s !== m) {
 		h(s);
-		let e = x(s, d.h);
-		e && u(l(e)) !== u(d) && (_ = l(e), f(_));
+		let e = y(s, d.h);
+		e && u(l(e)) !== u(d) && (_ = l(e), p(_));
 	}
 	return _ = l(_), g.current = _, {
 		hsva: _,
@@ -119,7 +120,7 @@ function de({ value: e, defaultValue: n, onValueChange: r, onValueCommit: i, for
 				v: A(e.v, 0, 100),
 				a: A(e.a, 0, 1)
 			});
-			g.current = t, f(t);
+			g.current = t, p(t);
 			let n = u(t);
 			h(n), c(n);
 		},
@@ -127,25 +128,25 @@ function de({ value: e, defaultValue: n, onValueChange: r, onValueCommit: i, for
 		fmt: u
 	};
 }
-function fe({ label: e, value: t, max: n, valueText: i, trackStyle: a, checkered: o, interactive: s, disabled: c, readOnly: l, ariaProps: u, onChange: d, onCommit: f }) {
-	let p = E(null), m = E(null), [h, g] = D(!1), _ = E(!1), v = (e) => {
-		let r = p.current?.getBoundingClientRect();
-		return !r || r.width <= 0 ? t : A((e - r.left) / r.width, 0, 1) * n;
+function fe({ label: e, value: n, max: r, valueText: i, trackStyle: a, checkered: o, interactive: s, disabled: c, readOnly: l, ariaProps: u, onChange: d, onCommit: f }) {
+	let p = w(null), m = w(null), [h, g] = T(!1), _ = w(!1), v = (e) => {
+		let t = p.current?.getBoundingClientRect();
+		return !t || t.width <= 0 ? n : A((e - t.left) / t.width, 0, 1) * r;
 	}, y = (e) => {
 		s && e.button === 0 && (e.preventDefault(), e.currentTarget.setPointerCapture(e.pointerId), g(!0), m.current?.focus({ preventScroll: !0 }), d(v(e.clientX)));
 	}, b = (e) => {
 		h && d(v(e.clientX));
 	}, x = (e) => {
 		h && (e.currentTarget.hasPointerCapture(e.pointerId) && e.currentTarget.releasePointerCapture(e.pointerId), g(!1), f());
-	}, S = (e) => {
+	}, ee = (e) => {
 		if (!s) return;
-		let r = le(e, "x");
-		r && (e.preventDefault(), _.current = !0, d(r.to === "min" ? 0 : r.to === "max" ? n : A(Math.round(t) + r.dx, 0, n)));
-	}, C = () => {
+		let t = le(e, "x");
+		t && (e.preventDefault(), _.current = !0, d(t.to === "min" ? 0 : t.to === "max" ? r : A(Math.round(n) + t.dx, 0, r)));
+	}, te = () => {
 		_.current && (_.current = !1, f());
-	}, T = Math.round(t);
-	return /* @__PURE__ */ O("div", {
-		className: w.channel,
+	}, C = Math.round(n);
+	return /* @__PURE__ */ E("div", {
+		className: S.channel,
 		"data-dragging": h || void 0,
 		onPointerDown: y,
 		onPointerMove: b,
@@ -154,124 +155,124 @@ function fe({ label: e, value: t, max: n, valueText: i, trackStyle: a, checkered
 		onLostPointerCapture: (e) => {
 			h && x(e);
 		},
-		children: /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ D("div", {
 			ref: p,
-			className: w.rail,
-			children: [/* @__PURE__ */ O("div", {
-				className: r(w.track, o && w.checkered),
+			className: S.rail,
+			children: [/* @__PURE__ */ E("div", {
+				className: t(S.track, o && S.checkered),
 				"aria-hidden": "true",
-				children: /* @__PURE__ */ O("div", {
-					className: w.trackFill,
+				children: /* @__PURE__ */ E("div", {
+					className: S.trackFill,
 					style: a
 				})
-			}), /* @__PURE__ */ O("span", {
+			}), /* @__PURE__ */ E("span", {
 				ref: m,
 				role: "slider",
 				tabIndex: c ? -1 : 0,
-				className: w.thumb,
-				style: { left: `${A(t, 0, n) / n * 100}%` },
+				className: S.thumb,
+				style: { left: `${A(n, 0, r) / r * 100}%` },
 				"aria-label": e,
 				"aria-valuemin": 0,
-				"aria-valuemax": n,
-				"aria-valuenow": T,
+				"aria-valuemax": r,
+				"aria-valuenow": C,
 				"aria-valuetext": i,
 				"aria-orientation": "horizontal",
 				"aria-disabled": c || void 0,
 				"aria-readonly": l || void 0,
 				...u,
 				"aria-required": void 0,
-				onKeyDown: S,
-				onKeyUp: C
+				onKeyDown: ee,
+				onKeyUp: te
 			})]
 		})
 	});
 }
-function pe({ colors: e, current: t, label: n, disabled: r, readOnly: i, ariaProps: a, withAlpha: s, onSelect: c, describe: l }) {
-	let u = E([]), d = e.findIndex((e) => f(e, t)), [p, m] = D(null), h = p ?? (d >= 0 ? d : 0), g = (t) => {
+function pe({ colors: e, current: t, label: n, disabled: i, readOnly: a, ariaProps: o, withAlpha: s, onSelect: c, describe: l }) {
+	let d = w([]), f = e.findIndex((e) => u(e, t)), [p, m] = T(null), h = p ?? (f >= 0 ? f : 0), g = (t) => {
 		let n = (t + e.length) % e.length;
-		m(n), u.current[n]?.focus(), i || c(e[n]);
+		m(n), d.current[n]?.focus(), a || c(e[n]);
 	}, _ = (t) => {
-		if (r) return;
-		let n = u.current.findIndex((e) => e === document.activeElement);
+		if (i) return;
+		let n = d.current.findIndex((e) => e === document.activeElement);
 		if (n === -1) return;
-		let i = null;
-		t.key === "ArrowRight" || t.key === "ArrowDown" ? i = n + 1 : t.key === "ArrowLeft" || t.key === "ArrowUp" ? i = n - 1 : t.key === "Home" ? i = 0 : t.key === "End" && (i = e.length - 1), i !== null && (t.preventDefault(), g(i));
-	}, v = ee();
-	return /* @__PURE__ */ k("div", {
-		className: w.swatchSection,
-		children: [/* @__PURE__ */ O("span", {
+		let r = null;
+		t.key === "ArrowRight" || t.key === "ArrowDown" ? r = n + 1 : t.key === "ArrowLeft" || t.key === "ArrowUp" ? r = n - 1 : t.key === "Home" ? r = 0 : t.key === "End" && (r = e.length - 1), r !== null && (t.preventDefault(), g(r));
+	}, v = ne();
+	return /* @__PURE__ */ D("div", {
+		className: S.swatchSection,
+		children: [/* @__PURE__ */ E("span", {
 			id: v,
-			className: w.swatchCaption,
+			className: S.swatchCaption,
 			children: n
-		}), /* @__PURE__ */ O("div", {
+		}), /* @__PURE__ */ E("div", {
 			role: "radiogroup",
 			"aria-labelledby": v,
-			"aria-readonly": i || void 0,
-			"aria-disabled": r || void 0,
-			...a,
-			className: w.swatches,
+			"aria-readonly": a || void 0,
+			"aria-disabled": i || void 0,
+			...o,
+			className: S.swatches,
 			onKeyDown: _,
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || m(null);
 			},
 			children: e.map((e, t) => {
-				let n = t === d;
-				return /* @__PURE__ */ k("button", {
+				let n = t === f;
+				return /* @__PURE__ */ D("button", {
 					ref: (e) => {
-						u.current[t] = e;
+						d.current[t] = e;
 					},
 					type: "button",
 					role: "radio",
 					"aria-checked": n,
-					"aria-label": `${l(e)}, ${C(e, s)}`,
+					"aria-label": `${l(e)}, ${x(e, s)}`,
 					tabIndex: t === h ? 0 : -1,
-					disabled: r,
-					className: w.swatch,
+					disabled: i,
+					className: S.swatch,
 					"data-checked": n || void 0,
 					onFocus: () => m(t),
 					onClick: () => {
-						i || c(e);
+						a || c(e);
 					},
-					children: [/* @__PURE__ */ O("span", {
-						className: w.swatchColor,
+					children: [/* @__PURE__ */ E("span", {
+						className: S.swatchColor,
 						style: { background: j(e) },
 						"aria-hidden": "true"
-					}), n && /* @__PURE__ */ O("span", {
-						className: w.swatchCheck,
+					}), n && /* @__PURE__ */ E("span", {
+						className: S.swatchCheck,
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ O(o, {
+						children: /* @__PURE__ */ E(r, {
 							size: "xs",
 							strokeWidth: 3
 						})
 					})]
-				}, `${C(e)}-${t}`);
+				}, `${x(e)}-${t}`);
 			})
 		})]
 	});
 }
 function me(e) {
-	let t = n(), { value: o, defaultValue: f, onValueChange: p, onValueCommit: m, format: h = "hex", alpha: g = !1, swatches: _, eyeDropper: v = !0, size: y, disabled: b, readOnly: S, invalid: re, name: ie, labels: ae, variant: me = "panel", swatchesOnly: he = !1, "aria-label": ge, "aria-labelledby": _e, "aria-describedby": ve, className: ye, style: be, ...xe } = e, M = {
-		...ne(t),
+	let r = ee(), { value: u, defaultValue: d, onValueChange: f, onValueCommit: p, format: m = "hex", alpha: h = !1, swatches: g, eyeDropper: _ = !0, size: v, disabled: b, readOnly: te, invalid: ie, name: k, labels: ae, variant: me = "panel", swatchesOnly: he = !1, "aria-label": ge, "aria-labelledby": _e, "aria-describedby": ve, className: ye, style: be, ...xe } = e, M = {
+		...O(r),
 		...ae
-	}, N = l(), P = u({
-		invalid: re,
+	}, N = s(), P = c({
+		invalid: ie,
 		disabled: b,
-		readOnly: S,
-		size: y,
+		readOnly: te,
+		size: v,
 		"aria-describedby": ve
 	}, { nativeRequired: !1 }), { disabled: F, readOnly: I, invalid: Se } = P, Ce = P.size ?? "md", L = !F && !I, R = {
 		...P.ariaProps,
 		"aria-required": void 0
 	}, { hsva: z, hsvaRef: B, str: V, update: H, commit: U, fmt: we } = de({
-		value: o,
-		defaultValue: f,
-		onValueChange: p,
-		onValueCommit: m,
-		format: h,
-		alpha: g
-	}), W = ee(), G = `${W}-input-label`, Te = `${W}-input-error`, Ee = N && !N.isGroup ? N.controlId : `${W}-input`, [De, Oe] = D(!1);
-	T(() => Oe(!!ue()), []);
-	let [ke, Ae] = D(""), je = E(null), K = E(null), q = E(null), [Me, Ne] = D("s"), [J, Pe] = D(!1), Fe = E(!1), Ie = (e, t) => {
+		value: u,
+		defaultValue: d,
+		onValueChange: f,
+		onValueCommit: p,
+		format: m,
+		alpha: h
+	}), W = ne(), G = `${W}-input-label`, Te = `${W}-input-error`, Ee = N && !N.isGroup ? N.controlId : `${W}-input`, [De, Oe] = T(!1);
+	C(() => Oe(!!ue()), []);
+	let [ke, Ae] = T(""), je = w(null), K = w(null), q = w(null), [Me, Ne] = T("s"), [J, Pe] = T(!1), Fe = w(!1), Ie = (e, t) => {
 		let n = je.current?.getBoundingClientRect();
 		if (!n || n.width <= 0 || n.height <= 0) return;
 		let r = A((e - n.left) / n.width, 0, 1) * 100, i = A((n.bottom - t) / n.height, 0, 1) * 100;
@@ -321,13 +322,13 @@ function me(e) {
 		}), U();
 	}, He = () => {
 		Fe.current && (Fe.current = !1, U());
-	}, [Y, X] = D(null), [Ue, Z] = D(!1), We = E(V);
-	T(() => {
+	}, [Y, X] = T(null), [Ue, Z] = T(!1), We = w(V);
+	C(() => {
 		We.current !== V && (We.current = V, Z(!1), X(null));
 	}, [V]);
 	let Q = () => {
 		if (Y === null) return;
-		let e = x(Y, B.current.h);
+		let e = y(Y, B.current.h);
 		if (X(null), !e) {
 			Z(!0);
 			return;
@@ -335,9 +336,9 @@ function me(e) {
 		Z(!1);
 		let t = we(B.current);
 		H(e), we(B.current) !== t && U();
-	}, Ge = E(Q);
-	Ge.current = Q, T(() => () => Ge.current(), []);
-	let Ke = (_ ?? []).map((e) => x(e)).filter((e) => e !== null).map((e) => g ? e : {
+	}, Ge = w(Q);
+	Ge.current = Q, C(() => () => Ge.current(), []);
+	let Ke = (g ?? []).map((e) => y(e)).filter((e) => e !== null).map((e) => h ? e : {
 		...e,
 		a: 1
 	}), qe = (e) => {
@@ -345,12 +346,12 @@ function me(e) {
 	}, Je = async () => {
 		let e = ue();
 		if (e && L) try {
-			let t = await new e().open(), n = x(t.sRGBHex, B.current.h);
+			let t = await new e().open(), n = y(t.sRGBHex, B.current.h);
 			if (!n) return;
 			qe({
 				...n,
 				a: B.current.a
-			}), Ae(M.eyeDropperPicked(`${M.describeColor(n)}, ${C(n, !1)}`));
+			}), Ae(M.eyeDropperPicked(`${M.describeColor(n)}, ${x(n, !1)}`));
 		} catch {}
 	}, Ye = M.describeColor(z), Xe = {
 		...z,
@@ -364,22 +365,22 @@ function me(e) {
 		...be,
 		"--cp-color": j(z)
 	};
-	return /* @__PURE__ */ k("div", {
+	return /* @__PURE__ */ D("div", {
 		...xe,
 		role: "group",
 		"aria-labelledby": $,
 		"aria-label": $ ? void 0 : ge,
-		className: r(w.root, oe[Ce], se[me], ye),
+		className: t(S.root, oe[Ce], se[me], ye),
 		style: $e,
 		"data-disabled": F || void 0,
 		"data-readonly": I || void 0,
 		"data-invalid": Se || void 0,
 		"data-dragging": J || void 0,
 		children: [
-			Qe && /* @__PURE__ */ k(te, { children: [
-				/* @__PURE__ */ O("div", {
+			Qe && /* @__PURE__ */ D(re, { children: [
+				/* @__PURE__ */ E("div", {
 					ref: je,
-					className: w.area,
+					className: S.area,
 					style: { background: `linear-gradient(to top, ${j({
 						h: 0,
 						s: 0,
@@ -398,20 +399,20 @@ function me(e) {
 					onLostPointerCapture: (e) => {
 						J && ze(e);
 					},
-					children: /* @__PURE__ */ O("span", {
+					children: /* @__PURE__ */ E("span", {
 						role: "group",
 						"aria-label": M.area,
 						"aria-roledescription": M.areaRoleDescription,
-						className: r(w.thumb, w.areaThumb),
+						className: t(S.thumb, S.areaThumb),
 						style: {
 							left: `${z.s}%`,
 							top: `${100 - z.v}%`,
 							background: j(Xe)
 						},
-						children: ["s", "v"].map((e) => /* @__PURE__ */ O("input", {
+						children: ["s", "v"].map((e) => /* @__PURE__ */ E("input", {
 							ref: e === "s" ? K : q,
 							type: "range",
-							className: w.axisInput,
+							className: S.axisInput,
 							min: 0,
 							max: 100,
 							step: 1,
@@ -430,15 +431,15 @@ function me(e) {
 						}, e))
 					})
 				}),
-				/* @__PURE__ */ k("div", {
-					className: w.sliderRow,
-					children: [/* @__PURE__ */ O("span", {
-						className: r(w.preview, w.checkered),
+				/* @__PURE__ */ D("div", {
+					className: S.sliderRow,
+					children: [/* @__PURE__ */ E("span", {
+						className: t(S.preview, S.checkered),
 						"aria-hidden": "true",
-						children: /* @__PURE__ */ O("span", { className: w.previewFill })
-					}), /* @__PURE__ */ k("div", {
-						className: w.sliders,
-						children: [/* @__PURE__ */ O(fe, {
+						children: /* @__PURE__ */ E("span", { className: S.previewFill })
+					}), /* @__PURE__ */ D("div", {
+						className: S.sliders,
+						children: [/* @__PURE__ */ E(fe, {
 							label: M.hue,
 							value: z.h,
 							max: 360,
@@ -453,7 +454,7 @@ function me(e) {
 								h: e
 							}),
 							onCommit: U
-						}), g && /* @__PURE__ */ O(fe, {
+						}), h && /* @__PURE__ */ E(fe, {
 							label: M.alpha,
 							value: z.a * 100,
 							max: 100,
@@ -472,26 +473,26 @@ function me(e) {
 						})]
 					})]
 				}),
-				/* @__PURE__ */ k("div", {
-					className: w.inputRow,
+				/* @__PURE__ */ D("div", {
+					className: S.inputRow,
 					children: [
-						v && De && /* @__PURE__ */ O(a, {
+						_ && De && /* @__PURE__ */ E(n, {
 							"aria-label": M.eyeDropper,
 							variant: "ghost",
 							tone: "neutral",
 							size: Ce,
 							disabled: !L,
 							onClick: Je,
-							children: /* @__PURE__ */ O(c, { size: "sm" })
+							children: /* @__PURE__ */ E(a, { size: "sm" })
 						}),
-						/* @__PURE__ */ k("span", {
+						/* @__PURE__ */ D("span", {
 							id: G,
-							className: w.formatTag,
-							children: [/* @__PURE__ */ k(i, { children: [M.input, ", "] }), h.toUpperCase()]
+							className: S.formatTag,
+							children: [/* @__PURE__ */ D(o, { children: [M.input, ", "] }), m.toUpperCase()]
 						}),
-						/* @__PURE__ */ O(d, {
+						/* @__PURE__ */ E(l, {
 							id: Ee,
-							className: w.input,
+							className: S.input,
 							size: Ce,
 							value: Y ?? V,
 							invalid: Se || Ue,
@@ -502,7 +503,7 @@ function me(e) {
 							autoCapitalize: "off",
 							"aria-labelledby": $ ? `${$} ${G}` : G,
 							"aria-describedby": Ue ? Te : void 0,
-							startIcon: /* @__PURE__ */ O("span", { className: r(w.inputSwatch, w.checkered) }),
+							startIcon: /* @__PURE__ */ E("span", { className: t(S.inputSwatch, S.checkered) }),
 							onChange: (e) => {
 								X(e.target.value), Z(!1);
 							},
@@ -513,42 +514,41 @@ function me(e) {
 						})
 					]
 				}),
-				/* @__PURE__ */ O("div", {
-					className: w.message,
+				/* @__PURE__ */ E("div", {
+					className: S.message,
 					"aria-live": "polite",
-					children: Ue && /* @__PURE__ */ k("p", {
+					children: Ue && /* @__PURE__ */ D("p", {
 						id: Te,
-						className: w.error,
-						children: [/* @__PURE__ */ O(s, {
+						className: S.error,
+						children: [/* @__PURE__ */ E(i, {
 							size: "sm",
-							className: w.errorIcon
-						}), /* @__PURE__ */ O("span", { children: M.invalidInput })]
+							className: S.errorIcon
+						}), /* @__PURE__ */ E("span", { children: M.invalidInput })]
 					})
 				})
 			] }),
-			Ke.length > 0 && /* @__PURE__ */ O(pe, {
+			Ke.length > 0 && /* @__PURE__ */ E(pe, {
 				colors: Ke,
 				current: z,
 				label: M.swatches,
 				disabled: F,
 				readOnly: I,
 				ariaProps: he ? R : {},
-				withAlpha: g,
+				withAlpha: h,
 				onSelect: qe,
 				describe: M.describeColor
 			}),
-			/* @__PURE__ */ O(i, {
+			/* @__PURE__ */ E(o, {
 				"aria-live": "polite",
 				children: ke
 			}),
-			ie && /* @__PURE__ */ O("input", {
+			k && /* @__PURE__ */ E("input", {
 				type: "hidden",
-				name: ie,
+				name: k,
 				value: V,
 				disabled: F
 			})
 		]
 	});
 }
-//#endregion
-export { me as ColorPicker, ne as colorPickerLabelsFrom, f as colorsEqual, re as defaultColorPickerLabels, p as describeColor, m as formatColor, h as getHueName, g as getLuminance, _ as hslToHsv, v as hsvToHsl, y as hsvToRgb, b as isValidColor, x as parseColor, S as rgbToHsv, C as toHex };
+export { me as ColorPicker, O as colorPickerLabelsFrom, u as colorsEqual, ie as defaultColorPickerLabels, d as describeColor, f as formatColor, p as getHueName, m as getLuminance, h as hslToHsv, g as hsvToHsl, _ as hsvToRgb, v as isValidColor, y as parseColor, b as rgbToHsv, x as toHex };

package/dist/components/forms/ColorPicker/ColorPicker.module.css.mjs

@@ -1,4 +1,4 @@
-//#region src/components/forms/ColorPicker/ColorPicker.module.css
+// src/components/forms/ColorPicker/ColorPicker.module.css
 var e = "_sizeSm_1fh45_35", t = "_sizeMd_1fh45_55", n = "_sizeLg_1fh45_75", r = "_root_1fh45_103", i = "_panel_1fh45_127", a = "_plain_1fh45_143", o = "_checkered_1fh45_169", s = "_swatch_1fh45_171", c = "_area_1fh45_201", l = "_thumb_1fh45_249", u = "_areaThumb_1fh45_327", d = "_axisInput_1fh45_355", f = "_channel_1fh45_407", p = "_sliderRow_1fh45_435", m = "_preview_1fh45_449", h = "_previewFill_1fh45_469", g = "_sliders_1fh45_485", _ = "_rail_1fh45_523", v = "_track_1fh45_533", y = "_trackFill_1fh45_553", b = "_inputRow_1fh45_583", x = "_formatTag_1fh45_597", S = "_input_1fh45_583", C = "_inputSwatch_1fh45_647", w = "_message_1fh45_687", T = "_error_1fh45_703", E = "_errorIcon_1fh45_727", D = "_swatchSection_1fh45_745", O = "_swatchCaption_1fh45_771", k = "_swatches_1fh45_789", A = "_swatchColor_1fh45_903", j = "_swatchCheck_1fh45_917", M = "_trigger_1fh45_1045", N = "_triggerSm_1fh45_1105", P = "_triggerMd_1fh45_1119", F = "_triggerLg_1fh45_1133", I = "_triggerFullWidth_1fh45_1147", L = "_triggerSwatch_1fh45_1225", R = "_triggerValue_1fh45_1271", z = "_triggerChevron_1fh45_1287", B = {
 	sizeSm: e,
 	sizeMd: t,
@@ -41,5 +41,4 @@ var e = "_sizeSm_1fh45_35", t = "_sizeMd_1fh45_55", n = "_sizeLg_1fh45_75", r =
 	triggerValue: R,
 	triggerChevron: z
 };
-//#endregion
 export { c as area, u as areaThumb, d as axisInput, f as channel, o as checkered, B as default, T as error, E as errorIcon, x as formatTag, S as input, b as inputRow, C as inputSwatch, w as message, i as panel, a as plain, m as preview, h as previewFill, _ as rail, r as root, n as sizeLg, t as sizeMd, e as sizeSm, p as sliderRow, g as sliders, s as swatch, O as swatchCaption, j as swatchCheck, A as swatchColor, D as swatchSection, k as swatches, l as thumb, v as track, y as trackFill, M as trigger, z as triggerChevron, I as triggerFullWidth, F as triggerLg, P as triggerMd, N as triggerSm, L as triggerSwatch, R as triggerValue };

package/dist/components/forms/ColorPicker/colorUtils.mjs

@@ -1,5 +1,5 @@
 import { en as e } from "../../../i18n/en.mjs";
-//#region src/components/forms/ColorPicker/colorUtils.ts
+// src/components/forms/ColorPicker/colorUtils.ts
 var t = (e, t, n) => Math.min(n, Math.max(t, e)), n = (e, t = 0) => {
 	let n = 10 ** t;
 	return Math.round(e * n) / n;
@@ -180,5 +180,4 @@ function w(e) {
 	};
 	return .2126 * o(t) + .7152 * o(n) + .0722 * o(i);
 }
-//#endregion
 export { y as colorsEqual, C as describeColor, v as formatColor, S as getHueName, w as getLuminance, o as hslToHsv, a as hsvToHsl, r as hsvToRgb, h as isValidColor, m as parseColor, i as rgbToHsv, _ as toHex };