@thebuoyant-tsdev/mui-ts-library 3.22.0 → 3.24.1

package/dist/components/color-picker/ColorPicker.js

@@ -1,20 +1,22 @@
-import { clamp as e, hexToRgba as t, hslaToHsva as n, hsvaToHsla as r, hsvaToRgba as i, parseColorString as a, rgbaToHex as o, rgbaToHsva as s } from "./util/colorConversion.util.js";
-import { DEFAULT_COLOR_PICKER_TRANSLATION as c } from "./ColorPicker.types.js";
-import { useEffect as l, useRef as u, useState as d } from "react";
-import { Box as f, IconButton as p, MenuItem as m, Select as ee, TextField as h, Tooltip as te, Typography as ne, useTheme as re } from "@mui/material";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import ie from "@mui/icons-material/Colorize";
+import { muiTsStateClasses as e } from "../../utils/muiTsClasses.js";
+import { colorPickerClasses as t } from "./colorPickerClasses.js";
+import { clamp as n, hexToRgba as r, hslaToHsva as i, hsvaToHsla as a, hsvaToRgba as o, parseColorString as s, rgbaToHex as c, rgbaToHsva as l } from "./util/colorConversion.util.js";
+import { DEFAULT_COLOR_PICKER_TRANSLATION as u } from "./ColorPicker.types.js";
+import { useEffect as d, useRef as f, useState as p } from "react";
+import { Box as m, IconButton as ee, MenuItem as h, Select as te, TextField as g, Tooltip as ne, Typography as re, useTheme as ie } from "@mui/material";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import ae from "@mui/icons-material/Colorize";
 //#region src/components/color-picker/ColorPicker.tsx
-function v(t, n) {
-	let r = e(t, 0, 100);
-	return `calc(${n / 2}px + (100% - ${n}px) * ${r / 100})`;
+function y(e, t) {
+	let r = n(e, 0, 100);
+	return `calc(${t / 2}px + (100% - ${t}px) * ${r / 100})`;
 }
-function y(e) {
-	let t = i(e), n = r(e), a = o(t);
+function b(e) {
+	let t = o(e), n = a(e), r = c(t);
 	return {
-		hex: a,
+		hex: r,
 		info: {
-			hex: a,
+			hex: r,
 			rgb: {
 				r: Math.round(t.r),
 				g: Math.round(t.g),
@@ -30,28 +32,28 @@ function y(e) {
 		}
 	};
 }
-function b({ value: t, onCommit: n, min: r, max: i, label: a, disabled: o, size: s, onBlurExtra: c, fullWidth: u }) {
-	let [f, p] = d(String(Math.round(t)));
-	return l(() => {
-		p(String(Math.round(t)));
-	}, [t]), /* @__PURE__ */ g(h, {
+function x({ value: e, onCommit: t, min: r, max: i, label: a, disabled: o, size: s, onBlurExtra: c, fullWidth: l }) {
+	let [u, f] = p(String(Math.round(e)));
+	return d(() => {
+		f(String(Math.round(e)));
+	}, [e]), /* @__PURE__ */ _(g, {
 		size: s,
-		value: f,
+		value: u,
 		disabled: o,
-		onChange: (t) => {
-			let a = t.target.value;
-			p(a);
+		onChange: (e) => {
+			let a = e.target.value;
+			f(a);
 			let o = Number(a);
-			a.trim() !== "" && !Number.isNaN(o) && n(e(o, r, i));
+			a.trim() !== "" && !Number.isNaN(o) && t(n(o, r, i));
 		},
 		onBlur: () => {
-			p(String(Math.round(t))), c?.();
+			f(String(Math.round(e))), c?.();
 		},
 		slotProps: { htmlInput: {
 			"aria-label": a,
 			style: { textAlign: "center" }
 		} },
-		sx: u ? {
+		sx: l ? {
 			flex: 1,
 			minWidth: 0
 		} : {
@@ -60,218 +62,226 @@ function b({ value: t, onCommit: n, min: r, max: i, label: a, disabled: o, size:
 		}
 	});
 }
-function x({ value: o, onChange: x, onChangeCommitted: S, defaultFormat: ae = "hex", onFormatChange: oe, showAlpha: C = !0, showEyeDropper: se = !0, showSliderSection: ce = !0, showInputSection: le = !0, savedColors: w, disabled: T = !1, colorGradientSize: E = "medium", inputSize: D = "medium", width: ue = 280, name: O, translation: de }) {
-	let k = re(), A = {
-		...c,
-		...de
-	}, [j, M] = d(() => {
-		let e = a(o);
-		return e ? s(e) : {
+function oe({ value: c, onChange: oe, onChangeCommitted: S, defaultFormat: se = "hex", format: C, onFormatChange: ce, showAlpha: w = !0, showEyeDropper: le = !0, showSliderSection: ue = !0, showInputSection: de = !0, savedColors: T, disabled: E = !1, colorGradientSize: D = "medium", inputSize: O = "medium", width: fe = 280, name: k, translation: pe }) {
+	let A = ie(), j = {
+		...u,
+		...pe
+	}, [M, N] = p(() => {
+		let e = s(c);
+		return e ? l(e) : {
 			h: 0,
 			s: 0,
 			v: 0,
 			a: 1
 		};
-	}), [N, fe] = d(ae), [pe, P] = d(o);
-	if (pe !== o) {
-		P(o);
-		let e = a(o);
-		e && M(s(e));
+	}), [me, he] = p(se), P = C ?? me, [ge, F] = p(c);
+	if (ge !== c) {
+		F(c);
+		let e = s(c);
+		e && N(l(e));
 	}
-	let { hex: me, info: he } = y(j), F = me.slice(0, 7), [ge, I] = d(F);
-	l(() => {
-		I(F);
-	}, [F]);
-	let L = u(null), R = u(null), z = u(null), B = (e) => {
-		M(e);
-		let t = y(e);
-		P(t.hex), x(t.hex, t.info);
-	}, V = (e) => {
-		if (B(e), S) {
-			let t = y(e);
+	let { hex: _e, info: ve } = b(M), I = _e.slice(0, 7), [ye, L] = p(I);
+	d(() => {
+		L(I);
+	}, [I]);
+	let R = f(null), z = f(null), B = f(null), V = (e) => {
+		N(e);
+		let t = b(e);
+		F(t.hex), oe(t.hex, t.info);
+	}, H = (e) => {
+		if (V(e), S) {
+			let t = b(e);
 			S(t.hex, t.info);
 		}
-	}, H = () => {
+	}, U = () => {
 		if (!S) return;
-		let e = y(j);
+		let e = b(M);
 		S(e.hex, e.info);
-	}, _e = E === "small" ? 130 : 160, U = E === "small" ? 20 : 24, W = E === "small" ? 10 : 12, G = E === "small" ? 13 : 16, K = (t) => {
-		if (T || !L.current) return;
-		let n = L.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width), i = e(t.clientY - n.top, 0, n.height);
-		B({
-			...j,
-			s: r / n.width * 100,
-			v: 100 - i / n.height * 100
+	}, be = D === "small" ? 130 : 160, W = D === "small" ? 20 : 24, G = D === "small" ? 10 : 12, K = D === "small" ? 13 : 16, q = (e) => {
+		if (E || !R.current) return;
+		let t = R.current.getBoundingClientRect(), r = n(e.clientX - t.left, 0, t.width), i = n(e.clientY - t.top, 0, t.height);
+		V({
+			...M,
+			s: r / t.width * 100,
+			v: 100 - i / t.height * 100
 		});
-	}, q = (t) => {
-		if (T || !R.current) return;
-		let n = R.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width);
-		B({
-			...j,
-			h: r / n.width * 360
+	}, J = (e) => {
+		if (E || !z.current) return;
+		let t = z.current.getBoundingClientRect(), r = n(e.clientX - t.left, 0, t.width);
+		V({
+			...M,
+			h: r / t.width * 360
 		});
-	}, J = (t) => {
-		if (T || !z.current) return;
-		let n = z.current.getBoundingClientRect(), r = e(t.clientX - n.left, 0, n.width);
-		B({
-			...j,
-			a: r / n.width
+	}, Y = (e) => {
+		if (E || !B.current) return;
+		let t = B.current.getBoundingClientRect(), r = n(e.clientX - t.left, 0, t.width);
+		V({
+			...M,
+			a: r / t.width
 		});
-	}, Y = typeof window < "u" && !!window.EyeDropper, ve = async () => {
-		if (!(T || !window.EyeDropper)) try {
-			let e = t((await new window.EyeDropper().open()).sRGBHex);
-			e && V(s({
+	}, xe = typeof window < "u" && !!window.EyeDropper, Se = async () => {
+		if (!(E || !window.EyeDropper)) try {
+			let e = r((await new window.EyeDropper().open()).sRGBHex);
+			e && H(l({
 				...e,
-				a: j.a
+				a: M.a
 			}));
 		} catch {}
-	}, ye = (e) => {
-		fe(e), oe?.(e);
-	}, X = i(j), Z = r(j), Q = F, $ = {
+	}, Ce = (e) => {
+		C === void 0 && he(e), ce?.(e);
+	}, X = o(M), Z = a(M), Q = I, $ = {
 		backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
 		backgroundSize: "8px 8px",
 		backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0px"
 	};
-	return /* @__PURE__ */ _(f, {
+	return /* @__PURE__ */ v(m, {
 		sx: {
-			width: ue,
-			opacity: T ? .6 : 1,
+			width: fe,
+			opacity: E ? .6 : 1,
 			display: "flex",
 			flexDirection: "column",
 			gap: 1
 		},
+		className: [t.root, E && e.disabled].filter(Boolean).join(" "),
 		children: [
-			/* @__PURE__ */ g(f, {
-				ref: L,
+			/* @__PURE__ */ _(m, {
+				ref: R,
 				role: "slider",
-				tabIndex: T ? -1 : 0,
-				"aria-label": A.gradientAreaLabel,
-				"aria-valuetext": `${Math.round(j.s)}, ${Math.round(j.v)}`,
+				tabIndex: E ? -1 : 0,
+				"aria-label": j.gradientAreaLabel,
+				"aria-valuetext": `${Math.round(M.s)}, ${Math.round(M.v)}`,
 				onPointerDown: (e) => {
-					e.currentTarget.setPointerCapture?.(e.pointerId), K(e);
+					e.currentTarget.setPointerCapture?.(e.pointerId), q(e);
 				},
 				onPointerMove: (e) => {
-					e.buttons === 1 && K(e);
+					e.buttons === 1 && q(e);
 				},
-				onPointerUp: H,
+				onPointerUp: U,
+				className: t.gradientArea,
 				sx: {
 					position: "relative",
 					width: "100%",
-					height: _e,
-					borderRadius: `${k.shape.borderRadius}px`,
-					border: `1px solid ${k.palette.divider}`,
-					cursor: T ? "default" : "crosshair",
+					height: be,
+					borderRadius: `${A.shape.borderRadius}px`,
+					border: `1px solid ${A.palette.divider}`,
+					cursor: E ? "default" : "crosshair",
 					touchAction: "none",
-					background: `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(${j.h}, 100%, 50%))`
+					background: `linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, hsl(${M.h}, 100%, 50%))`
 				},
-				children: /* @__PURE__ */ g(f, { sx: {
-					position: "absolute",
-					left: v(j.s, G),
-					top: v(100 - j.v, G),
-					width: G,
-					height: G,
-					borderRadius: "50%",
-					border: "2px solid #fff",
-					boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
-					transform: "translate(-50%, -50%)",
-					pointerEvents: "none",
-					backgroundColor: Q
-				} })
+				children: /* @__PURE__ */ _(m, {
+					className: t.gradientThumb,
+					sx: {
+						position: "absolute",
+						left: y(M.s, K),
+						top: y(100 - M.v, K),
+						width: K,
+						height: K,
+						borderRadius: "50%",
+						border: "2px solid #fff",
+						boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
+						transform: "translate(-50%, -50%)",
+						pointerEvents: "none",
+						backgroundColor: Q
+					}
+				})
 			}),
-			ce && /* @__PURE__ */ _(f, {
+			ue && /* @__PURE__ */ v(m, {
 				sx: {
 					display: "flex",
 					gap: 1,
 					alignItems: "center"
 				},
-				children: [se && Y && /* @__PURE__ */ g(te, {
-					title: A.eyeDropperLabel,
-					children: /* @__PURE__ */ g("span", { children: /* @__PURE__ */ g(p, {
+				className: t.sliderSection,
+				children: [le && xe && /* @__PURE__ */ _(ne, {
+					title: j.eyeDropperLabel,
+					children: /* @__PURE__ */ _("span", { children: /* @__PURE__ */ _(ee, {
 						size: "small",
-						onClick: ve,
-						disabled: T,
-						"aria-label": A.eyeDropperLabel,
-						children: /* @__PURE__ */ g(ie, { fontSize: "small" })
+						onClick: Se,
+						disabled: E,
+						"aria-label": j.eyeDropperLabel,
+						children: /* @__PURE__ */ _(ae, { fontSize: "small" })
 					}) })
-				}), /* @__PURE__ */ _(f, {
+				}), /* @__PURE__ */ v(m, {
 					sx: {
 						flex: 1,
 						display: "flex",
 						flexDirection: "column",
 						gap: .75
 					},
-					children: [/* @__PURE__ */ g(f, {
-						ref: R,
+					children: [/* @__PURE__ */ _(m, {
+						ref: z,
 						role: "slider",
-						tabIndex: T ? -1 : 0,
-						"aria-label": A.hueSliderLabel,
+						tabIndex: E ? -1 : 0,
+						"aria-label": j.hueSliderLabel,
 						"aria-valuemin": 0,
 						"aria-valuemax": 360,
-						"aria-valuenow": Math.round(j.h),
+						"aria-valuenow": Math.round(M.h),
 						onPointerDown: (e) => {
-							e.currentTarget.setPointerCapture?.(e.pointerId), q(e);
+							e.currentTarget.setPointerCapture?.(e.pointerId), J(e);
 						},
 						onPointerMove: (e) => {
-							e.buttons === 1 && q(e);
+							e.buttons === 1 && J(e);
 						},
-						onPointerUp: H,
+						onPointerUp: U,
+						className: t.hueSlider,
 						sx: {
 							position: "relative",
 							width: "100%",
-							height: W,
-							borderRadius: W,
-							cursor: T ? "default" : "pointer",
+							height: G,
+							borderRadius: G,
+							cursor: E ? "default" : "pointer",
 							touchAction: "none",
 							background: "linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)"
 						},
-						children: /* @__PURE__ */ g(f, { sx: {
+						children: /* @__PURE__ */ _(m, { sx: {
 							position: "absolute",
-							left: v(j.h / 360 * 100, G),
+							left: y(M.h / 360 * 100, K),
 							top: "50%",
-							width: G,
-							height: G,
+							width: K,
+							height: K,
 							borderRadius: "50%",
 							border: "2px solid #fff",
 							boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
 							transform: "translate(-50%, -50%)",
 							pointerEvents: "none",
-							backgroundColor: `hsl(${j.h}, 100%, 50%)`
+							backgroundColor: `hsl(${M.h}, 100%, 50%)`
 						} })
-					}), C && /* @__PURE__ */ _(f, {
-						ref: z,
+					}), w && /* @__PURE__ */ v(m, {
+						ref: B,
 						role: "slider",
-						tabIndex: T ? -1 : 0,
-						"aria-label": A.alphaFieldLabel,
+						tabIndex: E ? -1 : 0,
+						"aria-label": j.alphaFieldLabel,
 						"aria-valuemin": 0,
 						"aria-valuemax": 100,
-						"aria-valuenow": Math.round(j.a * 100),
+						"aria-valuenow": Math.round(M.a * 100),
 						onPointerDown: (e) => {
-							e.currentTarget.setPointerCapture?.(e.pointerId), J(e);
+							e.currentTarget.setPointerCapture?.(e.pointerId), Y(e);
 						},
 						onPointerMove: (e) => {
-							e.buttons === 1 && J(e);
+							e.buttons === 1 && Y(e);
 						},
-						onPointerUp: H,
+						onPointerUp: U,
+						className: t.alphaSlider,
 						sx: {
 							position: "relative",
 							width: "100%",
-							height: W,
-							borderRadius: W,
-							cursor: T ? "default" : "pointer",
+							height: G,
+							borderRadius: G,
+							cursor: E ? "default" : "pointer",
 							touchAction: "none",
 							...$
 						},
-						children: [/* @__PURE__ */ g(f, { sx: {
+						children: [/* @__PURE__ */ _(m, { sx: {
 							position: "absolute",
 							inset: 0,
-							borderRadius: W,
+							borderRadius: G,
 							background: `linear-gradient(to right, transparent, ${Q})`
-						} }), /* @__PURE__ */ g(f, { sx: {
+						} }), /* @__PURE__ */ _(m, { sx: {
 							position: "absolute",
-							left: v(j.a * 100, G),
+							left: y(M.a * 100, K),
 							top: "50%",
-							width: G,
-							height: G,
+							width: K,
+							height: K,
 							borderRadius: "50%",
 							border: "2px solid #fff",
 							boxShadow: "0 0 0 1px rgba(0,0,0,0.3)",
@@ -282,185 +292,186 @@ function x({ value: o, onChange: x, onChangeCommitted: S, defaultFormat: ae = "h
 					})]
 				})]
 			}),
-			le && /* @__PURE__ */ _(f, {
+			de && /* @__PURE__ */ v(m, {
 				sx: {
 					display: "flex",
 					flexDirection: "column",
 					gap: .75
 				},
+				className: t.inputSection,
 				children: [
-					/* @__PURE__ */ _(f, {
+					/* @__PURE__ */ v(m, {
 						sx: {
 							display: "flex",
 							gap: .75,
 							alignItems: "center"
 						},
 						children: [
-							/* @__PURE__ */ _(ee, {
-								size: D,
-								value: N,
-								"aria-label": A.formatLabel,
-								disabled: T,
-								onChange: (e) => ye(e.target.value),
+							/* @__PURE__ */ v(te, {
+								size: O,
+								value: P,
+								"aria-label": j.formatLabel,
+								disabled: E,
+								onChange: (e) => Ce(e.target.value),
 								sx: {
 									minWidth: 80,
 									flexShrink: 0
 								},
 								children: [
-									/* @__PURE__ */ g(m, {
+									/* @__PURE__ */ _(h, {
 										value: "hex",
 										children: "HEX"
 									}),
-									/* @__PURE__ */ g(m, {
+									/* @__PURE__ */ _(h, {
 										value: "rgb",
 										children: "RGB"
 									}),
-									/* @__PURE__ */ g(m, {
+									/* @__PURE__ */ _(h, {
 										value: "hsl",
 										children: "HSL"
 									})
 								]
 							}),
-							N === "hex" && /* @__PURE__ */ g(h, {
-								size: D,
-								value: ge,
-								disabled: T,
+							P === "hex" && /* @__PURE__ */ _(g, {
+								size: O,
+								value: ye,
+								disabled: E,
 								onChange: (e) => {
-									let n = e.target.value;
-									I(n);
-									let r = t(n);
-									r && B(s({
-										...r,
-										a: j.a
+									let t = e.target.value;
+									L(t);
+									let n = r(t);
+									n && V(l({
+										...n,
+										a: M.a
 									}));
 								},
 								onBlur: () => {
-									I(F), H();
+									L(I), U();
 								},
-								slotProps: { htmlInput: { "aria-label": A.hexFieldLabel } },
+								slotProps: { htmlInput: { "aria-label": j.hexFieldLabel } },
 								sx: {
 									flex: 1,
 									minWidth: 0
 								}
 							}),
-							N !== "hex" && /* @__PURE__ */ g(f, { sx: { flex: 1 } }),
-							C && /* @__PURE__ */ g(b, {
-								label: A.alphaFieldLabel,
-								value: Math.round(j.a * 100),
+							P !== "hex" && /* @__PURE__ */ _(m, { sx: { flex: 1 } }),
+							w && /* @__PURE__ */ _(x, {
+								label: j.alphaFieldLabel,
+								value: Math.round(M.a * 100),
 								min: 0,
 								max: 100,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
-								onCommit: (e) => B({
-									...j,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
+								onCommit: (e) => V({
+									...M,
 									a: e / 100
 								})
 							})
 						]
 					}),
-					N === "rgb" && /* @__PURE__ */ _(f, {
+					P === "rgb" && /* @__PURE__ */ v(m, {
 						sx: {
 							display: "flex",
 							gap: .75
 						},
 						children: [
-							/* @__PURE__ */ g(b, {
-								label: A.redLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.redLabel,
 								value: X.r,
 								min: 0,
 								max: 255,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B(s({
+								onCommit: (e) => V(l({
 									r: e,
 									g: X.g,
 									b: X.b,
-									a: j.a
+									a: M.a
 								}))
 							}),
-							/* @__PURE__ */ g(b, {
-								label: A.greenLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.greenLabel,
 								value: X.g,
 								min: 0,
 								max: 255,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B(s({
+								onCommit: (e) => V(l({
 									r: X.r,
 									g: e,
 									b: X.b,
-									a: j.a
+									a: M.a
 								}))
 							}),
-							/* @__PURE__ */ g(b, {
-								label: A.blueLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.blueLabel,
 								value: X.b,
 								min: 0,
 								max: 255,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B(s({
+								onCommit: (e) => V(l({
 									r: X.r,
 									g: X.g,
 									b: e,
-									a: j.a
+									a: M.a
 								}))
 							})
 						]
 					}),
-					N === "hsl" && /* @__PURE__ */ _(f, {
+					P === "hsl" && /* @__PURE__ */ v(m, {
 						sx: {
 							display: "flex",
 							gap: .75
 						},
 						children: [
-							/* @__PURE__ */ g(b, {
-								label: A.hueFieldLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.hueFieldLabel,
 								value: Z.h,
 								min: 0,
 								max: 360,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B({
-									...j,
+								onCommit: (e) => V({
+									...M,
 									h: e
 								})
 							}),
-							/* @__PURE__ */ g(b, {
-								label: A.saturationFieldLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.saturationFieldLabel,
 								value: Z.s,
 								min: 0,
 								max: 100,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B(n({
+								onCommit: (e) => V(i({
 									h: Z.h,
 									s: e,
 									l: Z.l,
 									a: Z.a
 								}))
 							}),
-							/* @__PURE__ */ g(b, {
-								label: A.lightnessFieldLabel,
+							/* @__PURE__ */ _(x, {
+								label: j.lightnessFieldLabel,
 								value: Z.l,
 								min: 0,
 								max: 100,
-								disabled: T,
-								size: D,
-								onBlurExtra: H,
+								disabled: E,
+								size: O,
+								onBlurExtra: U,
 								fullWidth: !0,
-								onCommit: (e) => B(n({
+								onCommit: (e) => V(i({
 									h: Z.h,
 									s: Z.s,
 									l: e,
@@ -471,56 +482,61 @@ function x({ value: o, onChange: x, onChangeCommitted: S, defaultFormat: ae = "h
 					})
 				]
 			}),
-			w && w.length > 0 && /* @__PURE__ */ _(f, { children: [/* @__PURE__ */ g(ne, {
-				variant: "caption",
-				sx: {
-					color: "text.secondary",
-					display: "block",
-					mb: .5
-				},
-				children: A.savedColorsLabel
-			}), /* @__PURE__ */ g(f, {
-				sx: {
-					display: "flex",
-					flexWrap: "wrap",
-					gap: .75
-				},
-				children: w.map((e, t) => /* @__PURE__ */ g(f, {
-					component: "button",
-					type: "button",
-					disabled: T,
-					"aria-label": e,
-					onClick: () => {
-						let t = a(e);
-						t && V(s(t));
+			T && T.length > 0 && /* @__PURE__ */ v(m, {
+				className: t.savedColors,
+				children: [/* @__PURE__ */ _(re, {
+					variant: "caption",
+					sx: {
+						color: "text.secondary",
+						display: "block",
+						mb: .5
 					},
+					children: j.savedColorsLabel
+				}), /* @__PURE__ */ _(m, {
 					sx: {
-						width: U,
-						height: U,
-						p: 0,
-						borderRadius: .5,
-						border: `1px solid ${k.palette.divider}`,
-						cursor: T ? "default" : "pointer",
-						flexShrink: 0,
-						...$,
-						backgroundSize: "6px 6px",
-						"&:hover": T ? void 0 : { borderColor: k.palette.primary.main }
+						display: "flex",
+						flexWrap: "wrap",
+						gap: .75
 					},
-					children: /* @__PURE__ */ g(f, { sx: {
-						width: "100%",
-						height: "100%",
-						borderRadius: .5,
-						backgroundColor: e
-					} })
-				}, `${e}-${t}`))
-			})] }),
-			O && /* @__PURE__ */ g("input", {
+					className: t.swatchList,
+					children: T.map((e, n) => /* @__PURE__ */ _(m, {
+						component: "button",
+						type: "button",
+						disabled: E,
+						"aria-label": e,
+						onClick: () => {
+							let t = s(e);
+							t && H(l(t));
+						},
+						className: t.swatch,
+						sx: {
+							width: W,
+							height: W,
+							p: 0,
+							borderRadius: .5,
+							border: `1px solid ${A.palette.divider}`,
+							cursor: E ? "default" : "pointer",
+							flexShrink: 0,
+							...$,
+							backgroundSize: "6px 6px",
+							"&:hover": E ? void 0 : { borderColor: A.palette.primary.main }
+						},
+						children: /* @__PURE__ */ _(m, { sx: {
+							width: "100%",
+							height: "100%",
+							borderRadius: .5,
+							backgroundColor: e
+						} })
+					}, `${e}-${n}`))
+				})]
+			}),
+			k && /* @__PURE__ */ _("input", {
 				type: "hidden",
-				name: O,
-				value: he.hex
+				name: k,
+				value: ve.hex
 			})
 		]
 	});
 }
 //#endregion
-export { x as ColorPicker };
+export { oe as ColorPicker };