@iamfiro/design 0.1.0 → 0.3.1

package/lib/components/ColorPicker/ColorPicker2.js

@@ -0,0 +1,609 @@
+"use client";
+const e = f;
+(function(e, t) {
+	let n = f, r = e();
+	for (;;) try {
+		if (-parseInt(n(317)) / 1 + parseInt(n(351)) / 2 + -parseInt(n(316)) / 3 * (-parseInt(n(377)) / 4) + -parseInt(n(416)) / 5 * (parseInt(n(334)) / 6) + -parseInt(n(371)) / 7 + parseInt(n(315)) / 8 * (parseInt(n(364)) / 9) + parseInt(n(350)) / 10 * (parseInt(n(402)) / 11) == t) break;
+		r.push(r.shift());
+	} catch {
+		r.push(r.shift());
+	}
+})(D, 717638);
+import { Tooltip as t } from "../../primitives/Tooltip2.js";
+import { Text as n } from "../../primitives/Typography2.js";
+import { CopyButton as r } from "../../primitives/CopyButton2.js";
+import { Grid as i, Inline as a, Stack as o } from "../../primitives/Layout2.js";
+import { useControllableState as s } from "../../hooks/useControllableState.js";
+import { Button as c, Input as l, SegmentedControl as u, cx as d } from "../../primitives/index.js";
+function f(e, t) {
+	e -= 313;
+	let n = D(), r = n[e];
+	f.bUTLlU === void 0 && (f.PsfhRc = function(e) {
+		let t = "", n = "";
+		for (let n = 0, r, i, a = 0; i = e.charAt(a++); ~i && (r = n % 4 ? r * 64 + i : i, n++ % 4) && (t += String.fromCharCode(255 & r >> (-2 * n & 6)))) i = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789+/=".indexOf(i);
+		for (let e = 0, r = t.length; e < r; e++) n += "%" + ("00" + t.charCodeAt(e).toString(16)).slice(-2);
+		return decodeURIComponent(n);
+	}, f.iJSamN = {}, f.bUTLlU = !0);
+	let i = n[0];
+	f.QUzddl !== i && (f.iJSamN = {}, f.QUzddl = i);
+	let a = f.iJSamN[e];
+	return a === void 0 ? (r = f.PsfhRc(r), f.iJSamN[e] = r) : r = a, r;
+}
+import { Popover as ee } from "../Popover/Popover2.js";
+import { clamp as p, formatColor as m, formatHex as h, hslToRgb as g, hsvToRgb as _, isLight as v, parseColor as y, parseHex as te, rgbToHsl as ne, rgbToHsv as b } from "./color.js";
+/* empty css            */
+import { CHART_COLOR_PRESETS as x } from "./presets.js";
+import { useLayoutEffect as S, useRef as C, useState as w } from "react";
+import { Check as T, ChevronDown as re, Pipette as E } from "lucide-react";
+function D() {
+	let e = /* @__PURE__ */ "B3bLBG.C2vSzwn0.C2HPzNrlzxK.BgvMDa.C3rHCNq.zgLHBg9N.zhmTy29UDhjVBa.rw5K.zhmTy29SB3iTCgLJA2vYx19JAgvJAW.7lsi66gDkddIGjmYntuP.z2HVC3q.Agv4.y29UDgfPBNm.y29SB3i.zhmTy29SB3iTCgLJA2vYx19MAwvSza.nJe4BKndu1He.AgLKzgvU.Dw5KzwzPBMvK.z2v0uhjVCgvYDhLwywX1zq.66Qf64+ekcuP.zhmTy29SB3iTCgLJA2vYx190AhvTyG.DgvZDa.BgfIzwW.zhmTy29SB3iTCgLJA2vYx190CMfJAYbKCY1JB2XVCI1WAwnRzxjFx3rYywnRls1ODwu.AgvPz2H0.sevy.BwLUBwf4kdaSidfMCIKGnJrWEa.y3vYCMvUDfrHCMDLDa.sfnm.ioYeOo2dNq.Ag9YAxPVBNrHBa.mtuZote1me5fzLz1qG.nZe5mZi0t1rTEKng.C3rYAw5N.AM9PBG.Cg9PBNrLCKLK.sevyioQWKG.DMfYka.DMfSDwu.zhmTy29SB3iTCgLJA2vYx19YywLS.y2fUy2vS.ChjLDMvUDerLzMf1Bhq.zhmTy29SB3iTzMLLBgq.DgfYz2v0.zhmTy29SB3iTCgLJA2vYx19ZD2f0y2HLCW.nJaZmZu2nfrNChjLCq.AhnSka.CM91BMq.rxLLrhjVChbLCG.7lwC6RE8ioYcRoYAQq.y2XPzw50wq.BgvUz3rO.nZC1ndy5ofLiswL1AW.zhmTy29SB3iTCgLJA2vYx19ZD2f0y2G.zg9JDw1LBNrfBgvTzw50.AxndB21WB3nPBMC.67Ai7yIS66Qf64+eia.C2v0ug9PBNrLCKnHChr1CMu.mJeXmtG4wMXzC0rA.iZnIodjMnG.zhmTy29SB3iTCgLJA2vYx190AhvTyIbKCY1JB2XVCI1WAwnRzxjFx3rODw1Ils10CMfJAW.AhnS.CMvSyxrLzfrHCMDLDa.C3bHBG.C2XPy2u.7lge64+ekcuP.Aw5WDxq.AgfUzgXLCNm.7ioj7iobia.BMf0AxzLrxzLBNq.y2XPzw50wa.zgL2.ideWmcuGntaLkq.y3vYCMvUDa.y2vUDgvY.yMv0D2vLBG.zhmTy29SB3iTCgLJA2vY.zhmTy29SB3iTzMLLBgrFx3zHBhvL.A2v5.zhmTy29SB3iTCgLJA2vYx190CMfJAYbKCY1JB2XVCI1WAwnRzxjFx3rYywnRls1HBhbOyq.D2LKDgG.7zMu66M07jEq7isCioYdIsdQS6dRPBtQUla.7iojioYeOo2dNq.nZDnqK1prMm.yNv0Dg9U.CMvWBgfJzq.BwfW.C3rHCNrZv2L0Aa.7yYm656rkddIGjmYntuP.6Rcsio2yLEYlNq.CMDI.zM9JDxm.Dg9mB3DLCKnHC2u.zhmTy29SB3iTCgLJA2vYx19HCMvH.C2XPzgvY.67Ai7yIS66Qf64+e.BgfIzwWTEhm.mte0odvqtw9oAvu.Dg9W.6RIW67o4ioYdIq.zhmTy29SB3iTzMLLBgqTlq.B2zM.C3bSAxq.mUYWQoYBKcdSIQZRNBZSNBtRJzq.DgvYDgLHCNK.67Ai7yIS66Qf64+ekcuP.DhjPBq.Dg9vChbLCKnHC2u.rxnJyxbL.z3jVDxa.sg9Tzq.y2fWDgLVBG.C2vJB25Kyxj5.oeH1tNfNvq.mtjTrgXlrw4.mJu2nJa4ww90wK9h.zhjHz2DPBMC".split(".");
+	return D = function() {
+		return e;
+	}, D();
+}
+import { Fragment as ie, jsx as O, jsxs as k } from "react/jsx-runtime";
+var ae = e(378), A = (e) => {
+	let t = y(e);
+	return t ? b(t) : null;
+}, j = (e, t) => ({
+	...e,
+	h: e.s === 0 || e.v === 0 ? t.h : e.h,
+	s: e.v === 0 ? t.s : e.s
+}), M = (t) => Math[e(366)](t * 100);
+function N({ ref: e, thumbRef: t, disabled: n, onMove: r, onStart: i, onEnd: a, onCancel: o }) {
+	let s = C(!1), [c, l] = w(!1), u = (e) => {
+		let t = f;
+		s[t(392)] = e, l(e);
+	}, d = (t) => {
+		let n = f, i = e[n(392)].getBoundingClientRect();
+		r(p((t[n(389)] - i[n(322)]) / i[n(399)], 0, 1), p((t[n(369)] - i[n(417)]) / i[n(343)], 0, 1));
+	};
+	return {
+		dragging: c,
+		handlers: {
+			onPointerDown: (e) => {
+				let r = f;
+				n || e.button !== 0 || (e[r(360)](), e[r(346)][r(376)](e[r(354)]), u(!0), i(), d(e), t[r(392)]?.[r(410)]({ preventScroll: !0 }));
+			},
+			onPointerMove: (e) => {
+				s[f(392)] && d(e);
+			},
+			onPointerUp: () => {
+				s[f(392)] && (u(!1), a());
+			},
+			onPointerCancel: () => {
+				s[f(392)] && (u(!1), a());
+			}
+		},
+		cancel: () => s[f(392)] ? (u(!1), o(), !0) : !1
+	};
+}
+function P({ display: t, parse: r, onPreview: i, onSettle: a, onRevert: s, onBegin: c, label: u, caption: d, leading: f, disabled: ee, maxLength: p }) {
+	let m = e, [h, g] = w(null), _ = h !== null && r(h) === null, v = () => {
+		g(null), a();
+	}, y = O(l, {
+		size: "sm",
+		value: h ?? t,
+		"aria-label": u,
+		invalid: _,
+		disabled: ee,
+		leading: f,
+		maxLength: p,
+		spellCheck: !1,
+		autoComplete: m(420),
+		wrapperClassName: m(333),
+		onFocus: (e) => {
+			let t = m;
+			c(), e.currentTarget[t(320)]();
+		},
+		onChange: (e) => {
+			let t = m, n = e[t(362)][t(357)];
+			g(n);
+			let a = r(n);
+			a && i(a);
+		},
+		onBlur: v,
+		onKeyDown: (e) => {
+			let t = m;
+			e[t(388)][t(374)] || (e.key === "Enter" ? (e[t(360)](), v()) : e.key === t(427) && h !== null && (e[t(360)](), g(null), s()));
+		}
+	});
+	return d ? k(o, {
+		gap: 1,
+		align: m(393),
+		children: [y, O(n, {
+			variant: m(313),
+			tone: m(423),
+			children: d
+		})]
+	}) : y;
+}
+function F({ css: n, rgb: r, label: i, selected: a, disabled: o, onPick: s }) {
+	let c = e;
+	return O(t, {
+		content: i,
+		children: O(c(403), {
+			type: "button",
+			className: c(372),
+			style: { "--_c": n },
+			"aria-label": i,
+			"aria-pressed": a,
+			disabled: o,
+			"data-light": r && v(r) || void 0,
+			onClick: s,
+			children: O(T, { className: c(327) })
+		})
+	});
+}
+var oe = () => typeof window !== e(336) && e(367) in window ? window[e(367)] : null, se = [
+	{
+		value: e(330),
+		label: "HEX"
+	},
+	{
+		value: e(409),
+		label: "RGB"
+	},
+	{
+		value: e(380),
+		label: e(347)
+	}
+];
+function ce({ value: l, defaultValue: ee = ae, onValueChange: v, onValueCommit: x, alpha: T = !1, format: re, defaultFormat: D = "hex", onFormatChange: ie, presets: ce, presetsLabel: I = e(418), recentColors: ue, defaultRecentColors: de = [], onRecentColorsChange: fe, showRecent: pe = !0, maxRecent: me = 8, eyeDropper: he = !0, copyable: ge = !0, disabled: L, className: _e, style: ve, "aria-label": ye = e(401) }) {
+	let R = e, [z, be] = s(l, ee, v), [B, xe] = s(re, D, ie), [Se, Ce] = s(ue, de, fe), [V, we] = w(() => A(z) ?? A(ae)), [Te, Ee] = w(z);
+	if (z !== Te) {
+		Ee(z);
+		let e = A(z);
+		e && we(j(e, V));
+	}
+	let H = C(V);
+	S(() => {
+		H.current = V;
+	});
+	let U = (e) => h(_(e), T), W = (e) => {
+		let t = f, n = T ? e : {
+			...e,
+			a: 1
+		};
+		H[t(392)] = n, we(n);
+		let r = U(n);
+		Ee(r), r !== z && be(r);
+	}, G = () => x?.(U(H[R(392)])), K = C(V), q = () => {
+		let e = R;
+		K[e(392)] = H[e(392)];
+	}, De = () => {
+		let e = R;
+		U(K[e(392)]) !== U(H[e(392)]) && G(), K[e(392)] = H[e(392)];
+	}, J = () => W(K[R(392)]), Y = _(V), Oe = h({
+		...Y,
+		a: 1
+	}, !1), ke = R(365) + V.h + R(391), Ae = C(null), je = C(null), Me = C(null), Ne = C(null), Pe = C(null), Fe = C(null), Ie = N({
+		ref: Ae,
+		thumbRef: je,
+		disabled: L,
+		onStart: q,
+		onMove: (e, t) => W({
+			...H.current,
+			s: e,
+			v: 1 - t
+		}),
+		onEnd: G,
+		onCancel: J
+	}), Le = N({
+		ref: Me,
+		thumbRef: Ne,
+		disabled: L,
+		onStart: q,
+		onMove: (e) => W({
+			...H[R(392)],
+			h: e * 360
+		}),
+		onEnd: G,
+		onCancel: J
+	}), Re = N({
+		ref: Pe,
+		thumbRef: Fe,
+		disabled: L,
+		onStart: q,
+		onMove: (e) => W({
+			...H.current,
+			a: Math.round(e * 100) / 100
+		}),
+		onEnd: G,
+		onCancel: J
+	}), ze = (e, t) => (n) => {
+		let r = R;
+		if (n[r(397)] === r(427)) {
+			e[r(359)]() && n.preventDefault();
+			return;
+		}
+		if (e[r(318)] || L) return;
+		let i = n[r(321)] ? 10 : 1, a = {
+			ArrowRight: [i, 0],
+			ArrowLeft: [-i, 0],
+			ArrowUp: [0, i],
+			ArrowDown: [0, -i],
+			PageUp: [0, 10],
+			PageDown: [0, -10]
+		}, o;
+		if (n[r(397)] in a) o = t(H.current, ...a[n[r(397)]]);
+		else if (n[r(397)] === r(429) || n[r(397)] === r(326)) o = t(H[r(392)], 0, 0, n.key === r(429) ? r(323) : "end");
+		else return;
+		n[r(360)](), W(o), G();
+	}, Be = ze(Ie, (e, t, n, r) => r ? {
+		...e,
+		s: r === R(323) ? 0 : 1
+	} : {
+		...e,
+		s: p(e.s + t / 100, 0, 1),
+		v: p(e.v + n / 100, 0, 1)
+	}), Ve = ze(Le, (e, t, n, r) => ({
+		...e,
+		h: r ? r === R(323) ? 0 : 360 : p(Math[R(366)](e.h) + t + n, 0, 360)
+	})), He = ze(Re, (e, t, n, r) => ({
+		...e,
+		a: r ? r === "start" ? 0 : 1 : p(Math[R(366)](e.a * 100 + t + n) / 100, 0, 1)
+	})), Ue = ne(Y), X = (e) => j(b(e), H[R(392)]), We = (e) => (t) => {
+		let n = R, r = t[n(425)]()[n(404)](/%$/, "");
+		if (!/^\d+(\.\d+)?$/[n(340)](r)) return null;
+		let i = Number(r);
+		return i >= 0 && i <= e ? i : null;
+	}, Ge = (e, t, n) => {
+		let r = R, i = We(255);
+		return O(P, {
+			display: String(Math[r(366)](Y[e])),
+			parse: (t) => {
+				let n = r, a = i(t);
+				return a === null ? null : X({
+					..._(H[n(392)]),
+					[e]: a
+				});
+			},
+			...Z,
+			label: n,
+			caption: t,
+			maxLength: 3
+		}, e);
+	}, Ke = (e, t, n) => {
+		let r = R, i = We(e === "h" ? 360 : 100), a = e === "h" ? Math.round(V.h) % 360 : Math[r(366)](Ue[e] * 100);
+		return O(P, {
+			display: String(a),
+			parse: (t) => {
+				let n = r, a = i(t);
+				if (a === null) return null;
+				let o = ne(_(H[n(392)])), s = e === "h" ? {
+					...o,
+					h: a
+				} : {
+					...o,
+					[e]: a / 100
+				}, c = b(g(s));
+				return e === "h" ? {
+					...c,
+					h: a % 360
+				} : j(c, H[n(392)]);
+			},
+			...Z,
+			label: n,
+			caption: t,
+			maxLength: 3
+		}, e);
+	}, Z = {
+		onPreview: W,
+		onSettle: De,
+		onRevert: J,
+		onBegin: q,
+		disabled: L
+	}, qe = O(P, {
+		display: Oe[R(383)](1)[R(426)](),
+		parse: (e) => {
+			let t = R, n = te(e);
+			if (!n) return null;
+			let r = e[t(425)]()[t(404)]("#", "")[t(370)], i = r === 4 || r === 8;
+			return {
+				...X(n),
+				a: T && i ? n.a : H[t(392)].a
+			};
+		},
+		...Z,
+		label: R(355),
+		caption: B === "hex" && T ? R(344) : void 0,
+		leading: O("span", {
+			className: "ds-color-picker__hash",
+			children: "#"
+		}),
+		maxLength: 9
+	}), Je = T && O(P, {
+		display: M(V.a) + "%",
+		parse: (e) => {
+			let t = We(100)(e);
+			return t === null ? null : {
+				...H.current,
+				a: t / 100
+			};
+		},
+		...Z,
+		label: R(424),
+		caption: "A",
+		maxLength: 4
+	}), Ye = C(null), Xe = (ce ?? [])[R(405)]((e) => typeof e === R(352) ? { color: e } : e), Q = le(Ye, Xe[R(405)]((e) => e[R(332)])), Ze = (e) => {
+		let t = y(e);
+		t && (q(), W({
+			...X(t),
+			a: T ? t.a : 1
+		}), G());
+	}, Qe = U(V), $ = C(null), $e = (e) => {
+		let t = R;
+		e[t(346)][t(331)](e.relatedTarget) || ($.current = U(H[t(392)]));
+	}, et = (e) => {
+		let t = R;
+		if (e.currentTarget[t(331)](e[t(381)])) return;
+		let n = U(H[t(392)]);
+		$[t(392)] !== null && $[t(392)] !== n && Ce([n, ...Se.filter((e) => e[t(411)]() !== n)][t(383)](0, me)), $[t(392)] = null;
+	}, [tt] = w(() => oe() !== null), nt = async () => {
+		let e = R, t = oe();
+		if (t) try {
+			let { sRGBHex: n } = await new t()[e(319)](), r = y(n);
+			if (!r) return;
+			q(), W({
+				...X(r),
+				a: H[e(392)].a
+			}), G();
+		} catch {}
+	}, rt = m(Y, B, T);
+	return k(o, {
+		ref: Ye,
+		gap: 3,
+		role: R(428),
+		"aria-label": ye,
+		className: d(R(395), _e),
+		style: ve,
+		"data-disabled": L || void 0,
+		onFocus: $e,
+		onBlur: et,
+		children: [
+			O(R(390), {
+				ref: Ae,
+				className: R(412),
+				style: { "--_hue": ke },
+				"data-dragging": Ie[R(318)] || void 0,
+				...Ie[R(386)],
+				children: O(R(390), {
+					ref: je,
+					role: R(413),
+					tabIndex: L ? -1 : 0,
+					"aria-label": "채도와 밝기",
+					"aria-roledescription": R(422),
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": M(V.s),
+					"aria-valuetext": "채도 " + M(V.s) + "%, 밝기 " + M(V.v) + "%",
+					"aria-disabled": L || void 0,
+					className: R(339),
+					style: {
+						left: V.s * 100 + "%",
+						top: (1 - V.v) * 100 + "%",
+						"--_c": Oe
+					},
+					onKeyDown: Be
+				})
+			}),
+			k(a, {
+				gap: 3,
+				wrap: !1,
+				children: [O("span", {
+					className: "ds-color-picker__preview",
+					style: { "--_c": Qe },
+					"aria-hidden": !0
+				}), k(o, {
+					gap: T ? 2 : 0,
+					style: {
+						flex: 1,
+						minWidth: 0
+					},
+					children: [O(R(390), {
+						className: R(342),
+						"data-dragging": Le.dragging || void 0,
+						...Le[R(386)],
+						children: O("div", {
+							ref: Me,
+							className: "ds-color-picker__rail",
+							children: O(R(390), {
+								ref: Ne,
+								role: R(413),
+								tabIndex: L ? -1 : 0,
+								"aria-label": "색상",
+								"aria-orientation": R(349),
+								"aria-valuemin": 0,
+								"aria-valuemax": 360,
+								"aria-valuenow": Math.round(V.h),
+								"aria-valuetext": R(387) + Math[R(366)](V.h) + "도",
+								"aria-disabled": L || void 0,
+								className: R(379),
+								style: {
+									left: V.h / 360 * 100 + "%",
+									"--_c": ke
+								},
+								onKeyDown: Ve
+							})
+						})
+					}), T && O(R(390), {
+						className: R(398),
+						style: { "--_c": Oe },
+						"data-dragging": Re[R(318)] || void 0,
+						...Re.handlers,
+						children: O("div", {
+							ref: Pe,
+							className: R(358),
+							children: O(R(390), {
+								ref: Fe,
+								role: "slider",
+								tabIndex: L ? -1 : 0,
+								"aria-label": R(414),
+								"aria-orientation": R(349),
+								"aria-valuemin": 0,
+								"aria-valuemax": 100,
+								"aria-valuenow": M(V.a),
+								"aria-valuetext": R(375) + M(V.a) + "%",
+								"aria-disabled": L || void 0,
+								className: R(379),
+								style: {
+									left: V.a * 100 + "%",
+									"--_c": Qe
+								},
+								onKeyDown: He
+							})
+						})
+					})]
+				})]
+			}),
+			k(a, {
+				justify: R(394),
+				wrap: !1,
+				children: [O(u, {
+					options: se,
+					value: B,
+					onChange: xe,
+					ariaLabel: R(408)
+				}), k(a, {
+					gap: 1,
+					wrap: !1,
+					children: [he && tt && O(t, {
+						content: R(400),
+						children: O(c, {
+							variant: R(329),
+							size: "sm",
+							iconOnly: !0,
+							icon: O(E, {}),
+							"aria-label": "화면에서 색 고르기",
+							disabled: L,
+							onClick: nt
+						})
+					}), ge && O(r, {
+						value: rt,
+						disabled: L
+					})]
+				})]
+			}),
+			B === R(330) ? T ? k(i, {
+				columns: R(345),
+				gap: 2,
+				align: R(323),
+				children: [qe, Je]
+			}) : qe : k(i, {
+				columns: T ? 4 : 3,
+				gap: 2,
+				align: R(323),
+				children: [B === "rgb" ? [
+					Ge("r", "R", "빨강(0–255)"),
+					Ge("g", "G", R(328)),
+					Ge("b", "B", R(407))
+				] : [
+					Ke("h", "H", "색상(0–360)"),
+					Ke("s", "S", R(384)),
+					Ke("l", "L", R(338))
+				], Je]
+			}),
+			Xe.length > 0 && k(o, {
+				gap: 2,
+				children: [O(n, {
+					variant: R(415),
+					tone: R(314),
+					children: I
+				}), O(R(390), {
+					className: R(363),
+					children: Xe[R(405)]((e, t) => {
+						let n = R, r = Q[t] ? y(Q[t]) : null;
+						return O(F, {
+							css: e.color[n(406)]("--") ? n(356) + e[n(332)] + ")" : e[n(332)],
+							rgb: r,
+							label: e[n(341)] ?? e[n(332)],
+							selected: r !== null && h(r, T) === Qe,
+							disabled: L,
+							onPick: () => Q[t] && Ze(Q[t])
+						}, e[n(332)]);
+					})
+				})]
+			}),
+			pe && Se[R(370)] > 0 && k(o, {
+				gap: 2,
+				children: [O(n, {
+					variant: "label-xs",
+					tone: R(314),
+					children: R(368)
+				}), O(R(390), {
+					className: R(363),
+					children: Se[R(405)]((e) => {
+						let t = R, n = y(e);
+						return O(F, {
+							css: e,
+							rgb: n,
+							label: e[t(426)](),
+							selected: n !== null && h(n, T) === Qe,
+							disabled: L,
+							onPick: () => Ze(e)
+						}, e);
+					})
+				})]
+			})
+		]
+	});
+}
+function le(t, n) {
+	let r = e, i = n.join("|"), [a, o] = w(() => n[r(405)]((e) => e.startsWith("--") ? "" : e));
+	return S(() => {
+		let e = r, n = t[e(392)] ?? document[e(373)], a = getComputedStyle(n), s = i ? i[e(421)]("|")[e(405)]((t) => t[e(406)]("--") ? a[e(337)](t)[e(425)]() : t) : [];
+		o((t) => t[e(353)]("|") === s[e(353)]("|") ? t : s);
+	}, [t, i]), a;
+}
+function I({ value: t, defaultValue: n = ae, onValueChange: r, format: i, defaultFormat: a = "hex", onFormatChange: o, recentColors: c, defaultRecentColors: l = [], onRecentColorsChange: u, open: f, defaultOpen: p = !1, onOpenChange: h, size: g = "md", invalid: _, popoverWidth: v = 264, name: te, id: ne, className: b, disabled: x, alpha: S, "aria-label": C = "색", "aria-labelledby": w, ...T }) {
+	let E = e, [D, A] = s(t, n, r), [j, M] = s(i, a, o), [N, P] = s(c, l, u), [F, oe] = s(f, p, h), se = y(D), le = se ? m(se, j, S) : D, I = j === E(330) ? le[E(426)]() : le;
+	return k(ie, { children: [O(ee, {
+		open: F,
+		onOpenChange: (e) => !x && oe(e),
+		width: v,
+		"aria-label": C + E(348),
+		trigger: k(E(403), {
+			id: ne,
+			type: E(403),
+			"aria-haspopup": E(324),
+			"aria-expanded": F,
+			"aria-label": w ? void 0 : C + ": " + I,
+			"aria-labelledby": w,
+			"aria-invalid": _ || void 0,
+			disabled: x,
+			className: d(E(325), E(361), g !== "md" && E(419) + g, b),
+			"data-open": F || void 0,
+			"data-invalid": _ || void 0,
+			"data-disabled": x || void 0,
+			children: [
+				O("span", {
+					className: "ds-color-field__chip",
+					style: { "--_c": D }
+				}),
+				O(E(382), {
+					className: E(396),
+					children: I
+				}),
+				O(re, { className: "ds-color-field__chevron" })
+			]
+		}),
+		children: O(ce, {
+			...T,
+			value: D,
+			onValueChange: A,
+			alpha: S,
+			format: j,
+			onFormatChange: M,
+			recentColors: N,
+			onRecentColorsChange: P,
+			disabled: x,
+			"aria-label": C + E(348)
+		})
+	}), te && O(E(385), {
+		type: E(335),
+		name: te,
+		value: D
+	})] });
+}
+export { x as CHART_COLOR_PRESETS, I as ColorField, ce as ColorPicker };