@thebuoyant-tsdev/mui-ts-library 3.29.1 → 3.30.0

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

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