@elcrm/form 0.0.76 → 0.0.79

package/dist/fields/Color.js

@@ -0,0 +1,449 @@
+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";
+//#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) {
+	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 f(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,
+		a,
+		0
+	] : r < 120 ? [s, c, l] = [
+		a,
+		i,
+		0
+	] : r < 180 ? [s, c, l] = [
+		0,
+		i,
+		a
+	] : r < 240 ? [s, c, l] = [
+		0,
+		a,
+		i
+	] : r < 300 ? [s, c, l] = [
+		a,
+		0,
+		i
+	] : [s, c, l] = [
+		i,
+		0,
+		a
+	], {
+		r: (s + o) * 255,
+		g: (c + o) * 255,
+		b: (l + o) * 255
+	};
+}
+function p(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;
+	return {
+		h: c,
+		s: l,
+		v: o
+	};
+}
+function m(e) {
+	if (typeof e != "string") return null;
+	let t = e.trim();
+	if (!t || (t[0] === "#" && (t = t.slice(1)), ![
+		3,
+		4,
+		6,
+		8
+	].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),
+		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 g(e) {
+	let { r: t, g: n, b: r } = f(e.h, e.s, e.v);
+	return e.a >= .999 ? `rgb(${t},${n},${r})` : `rgba(${t},${n},${r},${e.a})`;
+}
+function _(e) {
+	let { r: t, g: n, b: r } = f(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 y(e) {
+	return e == null ? !0 : typeof e == "string" ? e.trim() === "" : !1;
+}
+function b() {
+	return typeof window < "u" && "EyeDropper" in window;
+}
+var x = {
+	h: 0,
+	s: 1,
+	v: .76,
+	a: 1
+};
+function S({ value: u = "", form: d, onValue: f, onBlur: p, name: _ = "", placeholder: v = "#000000", label: b = "", error: S = "", hidden: w = !1, disabled: T = !1, className: E = "", after: D = "", before: O = "", colors: k, alpha: A = !0 }) {
+	let { value: j } = n(d, _, u), M = typeof j == "string" ? j : j == null ? "" : String(j), [N, P] = i.useState(!1), [F, I] = i.useState(null), [L, R] = i.useState(() => m(M) ?? { ...x }), [z, B] = i.useState(() => h(m(M) ?? x, A)), V = k?.length ? k : l, H = m(M), U = H ? h(H, A) : "", W = H ? g(H) : "transparent";
+	i.useEffect(() => {
+		if (!N) return;
+		let e = m(M);
+		e && (R(e), B(h(e, A)));
+	}, [
+		M,
+		N,
+		A
+	]);
+	let G = i.useCallback((e, t) => {
+		let n = h(e, A), r = {
+			value: n,
+			name: _ || ""
+		};
+		d && _ && (t === "live" ? d.onValue(r) : d.setValue(r)), f && f !== d?.onValue && f(r), B(n);
+	}, [
+		A,
+		d,
+		_,
+		f
+	]), K = (e) => {
+		if (T) return;
+		let t = m(M) ?? { ...L };
+		R(t), B(h(t, A)), I(e.getBoundingClientRect()), P(!0);
+	}, q = () => {
+		P(!1), p?.({
+			value: h(L, A),
+			name: _ || ""
+		});
+	}, J = (e) => {
+		if (!T) {
+			if (!N && (e.key === "Enter" || e.key === " " || e.key === "ArrowDown")) {
+				e.preventDefault(), K(e.currentTarget);
+				return;
+			}
+			N && e.key === "Escape" && (e.preventDefault(), q());
+		}
+	};
+	return w && y(M) ? null : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s(t, {
+		type: "color",
+		label: b,
+		error: S,
+		element_blok: { className: [E || ""] },
+		element_input: {
+			className: [e.w],
+			props: { "data-disabled": T ? "true" : void 0 }
+		},
+		children: [
+			O ? /* @__PURE__ */ o("span", {
+				className: e.affix,
+				children: O
+			}) : null,
+			/* @__PURE__ */ s("div", {
+				className: r.trigger,
+				role: "combobox",
+				tabIndex: T ? -1 : 0,
+				"aria-expanded": N,
+				"aria-haspopup": "dialog",
+				"aria-disabled": T,
+				"aria-label": b || "Цвет",
+				onClick: (e) => K(e.currentTarget),
+				onKeyDown: J,
+				children: [/* @__PURE__ */ o("span", {
+					className: r.preview,
+					style: { "--preview-color": W }
+				}), /* @__PURE__ */ o("span", {
+					className: [r.hexText, U ? "" : r.placeholder].filter(Boolean).join(" "),
+					children: U || v
+				})]
+			}),
+			D ? /* @__PURE__ */ o("span", {
+				className: e.affix,
+				children: D
+			}) : null
+		]
+	}), N && c(/* @__PURE__ */ o(C, {
+		parent: F || void 0,
+		hsva: L,
+		setHsva: R,
+		hexDraft: z,
+		setHexDraft: B,
+		alpha: A,
+		palette: V,
+		onLive: (e) => G(e, "live"),
+		onCommit: (e) => G(e, "commit"),
+		onClose: q
+	}), document.body)] });
+}
+S.displayName = "ColorField";
+function C({ 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, x = window.innerHeight - e.bottom < y + 8 ? Math.max(8, e.top - y - 8) : Math.min(window.innerHeight - y - 8, e.bottom + 8), S = Math.min(Math.max(8, e.left), window.innerWidth - 260 - 8), C = g({
+		...t,
+		a: 1
+	}), D = v(h(t, l)), k = (e, t) => {
+		n(e), t === "live" ? f(e) : p(e);
+	}, A = () => {
+		let e = m(i);
+		if (!e) {
+			c(h(t, l));
+			return;
+		}
+		k(e, "commit");
+	}, j = (e) => {
+		let n = e.replace(/[^\d]/g, ""), r = u(Number(n || 0), 0, 100);
+		k({
+			...t,
+			a: r / 100
+		}, "commit");
+	}, M = async () => {
+		if (b()) try {
+			let e = window.EyeDropper, n = m((await new e().open()).sRGBHex);
+			n && k({
+				...n,
+				a: t.a
+			}, "commit");
+		} catch {}
+	};
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		className: r.o,
+		onClick: _,
+		"aria-hidden": !0
+	}), /* @__PURE__ */ s("div", {
+		className: r.panel,
+		role: "dialog",
+		"aria-label": "Выбор цвета",
+		style: {
+			top: x,
+			left: S,
+			width: 260
+		},
+		children: [
+			/* @__PURE__ */ o(w, {
+				hsva: t,
+				onChange: (e, n, r) => k({
+					...t,
+					s: e,
+					v: n
+				}, r)
+			}),
+			/* @__PURE__ */ s("div", {
+				className: r.slidersRow,
+				children: [b() ? /* @__PURE__ */ o("button", {
+					type: "button",
+					className: r.eyedropper,
+					"aria-label": "Пипетка",
+					onClick: M,
+					children: /* @__PURE__ */ o(O, {})
+				}) : null, /* @__PURE__ */ s("div", {
+					className: r.sliders,
+					children: [/* @__PURE__ */ o(T, {
+						h: t.h,
+						onChange: (e, n) => k({
+							...t,
+							h: e
+						}, n)
+					}), l ? /* @__PURE__ */ o(E, {
+						a: t.a,
+						color: C,
+						onChange: (e, n) => k({
+							...t,
+							a: e
+						}, n)
+					}) : null]
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				className: r.inputs,
+				children: [
+					/* @__PURE__ */ o("span", {
+						className: r.format,
+						children: "Hex"
+					}),
+					/* @__PURE__ */ o("input", {
+						className: r.input,
+						value: i.replace(/^#/, ""),
+						spellCheck: !1,
+						"aria-label": "Hex",
+						onChange: (e) => {
+							let t = e.target.value.replace(/[^0-9a-fA-F]/g, "");
+							c(t ? `#${t}` : "");
+						},
+						onBlur: A,
+						onKeyDown: (e) => {
+							e.key === "Enter" && (e.preventDefault(), e.target.blur());
+						}
+					}),
+					l ? /* @__PURE__ */ o("input", {
+						className: `${r.input} ${r.inputAlpha}`,
+						value: `${Math.round(t.a * 100)} %`,
+						"aria-label": "Прозрачность",
+						onChange: (e) => j(e.target.value),
+						onFocus: (e) => e.target.select()
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ o("div", {
+				className: r.palette,
+				role: "listbox",
+				"aria-label": "Палитра",
+				children: d.map((e) => {
+					let t = v(e) === D;
+					return /* @__PURE__ */ o("button", {
+						type: "button",
+						role: "option",
+						"aria-checked": t,
+						"aria-label": e,
+						className: r.swatchBtn,
+						style: { "--swatch": e },
+						onClick: () => {
+							let t = m(e);
+							t && k({
+								...t,
+								a: l ? t.a : 1
+							}, "commit");
+						}
+					}, e);
+				})
+			})
+		]
+	})] });
+}
+function w({ hsva: e, onChange: t }) {
+	let n = i.useRef(null), a = i.useRef(!1), c = i.useRef(t);
+	c.current = t;
+	let l = (t, r) => {
+		let i = n.current;
+		if (!i) return {
+			s: e.s,
+			v: e.v
+		};
+		let a = i.getBoundingClientRect();
+		return {
+			s: u((t - a.left) / a.width, 0, 1),
+			v: u(1 - (r - a.top) / a.height, 0, 1)
+		};
+	};
+	return i.useEffect(() => {
+		let e = (e) => {
+			if (!a.current) return;
+			let { s: t, v: n } = l(e.clientX, e.clientY);
+			c.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");
+		};
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t);
+		};
+	}, []), /* @__PURE__ */ s("div", {
+		ref: n,
+		className: r.sv,
+		style: { background: _(e.h) },
+		onPointerDown: (e) => {
+			a.current = !0;
+			let { s: t, v: n } = l(e.clientX, e.clientY);
+			c.current(t, n, "live");
+		},
+		children: [
+			/* @__PURE__ */ o("div", { className: r.svWhite }),
+			/* @__PURE__ */ o("div", { className: r.svBlack }),
+			/* @__PURE__ */ o("div", {
+				className: r.handle,
+				style: {
+					left: `${e.s * 100}%`,
+					top: `${(1 - e.v) * 100}%`,
+					background: g({
+						...e,
+						a: 1
+					})
+				}
+			})
+		]
+	});
+}
+function T({ h: e, onChange: t }) {
+	return /* @__PURE__ */ o(D, {
+		className: `${r.slider} ${r.sliderHue}`,
+		ratio: e / 360,
+		onRatio: (e, n) => t(e * 360, n),
+		handleColor: _(e)
+	});
+}
+function E({ a: e, color: t, onChange: n }) {
+	return /* @__PURE__ */ o(D, {
+		className: `${r.slider} ${r.sliderAlpha}`,
+		style: { "--alpha-color": t },
+		ratio: e,
+		onRatio: n,
+		handleColor: t
+	});
+}
+function D({ 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;
+		if (!n) return;
+		let r = n.getBoundingClientRect();
+		a(u((e - r.left) / r.width, 0, 1), t);
+	};
+	return i.useEffect(() => {
+		let e = (e) => {
+			l.current && d(e.clientX, "live");
+		}, t = (e) => {
+			l.current && (l.current = !1, d(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,
+		className: e,
+		style: t,
+		onPointerDown: (e) => {
+			l.current = !0, d(e.clientX, "live");
+		},
+		children: /* @__PURE__ */ o("div", {
+			className: r.sliderHandle,
+			style: {
+				left: `${u(n, 0, 1) * 100}%`,
+				background: s
+			}
+		})
+	});
+}
+function O() {
+	return /* @__PURE__ */ s("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		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" })
+		]
+	});
+}
+//#endregion
+export { l as DEFAULT_COLOR_PALETTE, S as default };

package/dist/index.d.ts

@@ -14,11 +14,14 @@ export { default as SelectField } from './fields/Select';
 export { default as ModalField } from './fields/Modal';
 export { default as PasswordField } from './fields/Password';
 export { default as CheckField } from './fields/Check';
+export { default as ColorField } from './fields/Color';
+export { DEFAULT_COLOR_PALETTE } from './fields/Color';
 export { useForm, useFormField, useFormFieldState } from './hooks/use';
 export type { TInput, TValue, TPasswordField, TFieldFormBindings, TFieldPresentation, } from './fields/type';
 export type { TRange, TProgress } from './fields/Range';
 export type { TTime } from './fields/Time';
 export type { TCheck } from './fields/Check';
+export type { TColor } from './fields/Color';
 export type { FormValues, UseFormApi, UseFormFieldStateResult, } from './hooks/use';
 export type { EditableFieldTarget, EditableClipboardEvent, } from './events/onEvent';
 export { asEditableClipboard } from './events/onEvent';

package/dist/index.js

@@ -5,7 +5,7 @@
     var el = document.createElement("style");
     el.id = "elcrm-form-base-styles";
     el.setAttribute("data-elcrm", "form");
-    el.textContent = "._l_1to3e_2{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_1to3e_2>dt,._l_1to3e_2>dd{margin:0}._l_1to3e_2[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_1to3e_2[data-field=group] div:last-child{border-bottom:0}._l_1to3e_2 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-style:normal;font-weight:400;display:block}._l_1to3e_2 [placeholder]:focus:before{display:none}._f_1to3e_38{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--control-inner-padding,0 var(--field-side-padding,14px));transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_1to3e_38:hover{border-color:var(--field-border-hover,var(--field-border))}._f_1to3e_38:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:0 0 0 3px var(--field-focus-ring,#0000);background:var(--field-background-focus,var(--field-background))}._f_1to3e_38._e_1to3e_63:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_1to3e_38[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_1to3e_38[data-disabled=true]>*{cursor:not-allowed}._f_1to3e_38>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}._f_1to3e_38>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_1to3e_38>:not(div){color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-items:center;display:inline-flex}._f_1to3e_38>:not(div) svg{width:20px;height:20px}._f_1to3e_38 input::placeholder,._f_1to3e_38 textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._n_1to3e_127 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px))}._w_1to3e_134>div{text-wrap:nowrap;overflow:scroll hidden}._w_1to3e_134>div::-webkit-scrollbar{width:0;height:0}._time_1to3e_144>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_1to3e_144 ._timeInner_1to3e_151{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_1to3e_144._timeAlignCenter_1to3e_162 ._timeInner_1to3e_151{justify-content:center}._time_1to3e_144 ._timeSep_1to3e_165{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_1to3e_144 ._timePart_1to3e_176{box-sizing:border-box;width:1em;min-width:0;color:inherit;font:inherit;line-height:inherit;text-align:left;min-height:var(--field-height);cursor:text;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0}._time_1to3e_144 ._timePart_1to3e_176[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_1to3e_144 ._timePart_1to3e_176:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}._time_1to3e_144 ._timePart_1to3e_176:focus:empty:before{content:none}._time_1to3e_144 ._timePart_1to3e_176:focus-visible{background:0 0}._time_1to3e_144._timeAlignCenter_1to3e_162 ._timePart_1to3e_176{text-align:center}._t_1to3e_144{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:10px}._affix_1to3e_223{color:var(--field-icon-color,var(--field-placeholder));font-size:inherit;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}._g_1to3e_237{flex-direction:column}._range_1to3e_241>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_1to3e_241 ._rangeTrack_1to3e_250{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_1to3e_241 ._rangeTrack_1to3e_250:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000)}._range_1to3e_241 ._rangeTrack_1to3e_250[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_1to3e_241 ._rangeFill_1to3e_271{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_1to3e_241 ._rangeFillFull_1to3e_282{border-radius:999px}._checkbox_1to3e_286>div{min-height:var(--field-height);align-items:flex-start;width:100%;padding:0;line-height:normal;display:flex}._checkControl_1to3e_295{width:100%;min-height:var(--field-height);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:flex-start;gap:12px;margin:0;padding:10px 0;display:flex}._checkControl_1to3e_295:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000);border-radius:calc(var(--field-radius) - 2px)}._checkControl_1to3e_295[aria-disabled=true]{cursor:not-allowed}._checkBox_1to3e_319{border:var(--field-check-box-border,var(--field-border));background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;width:22px;height:22px;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}._checkMark_1to3e_332{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}._checkText_1to3e_341{min-width:0;color:inherit;font-size:var(--control-font-size,14px);flex:auto;padding-top:2px;line-height:1.25}._checkControl_1to3e_295[aria-checked=true] ._checkBox_1to3e_319{background:var(--field-background-active)}._h_1to3e_354{--field-border:0}._h_1to3e_354 div{border:var(--field-check-box-border,--field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);cursor:pointer;flex:none;gap:10px;margin:0;position:relative}._h_1to3e_354 div[aria-checked=true]{background:var(--field-background-active)}._h_1to3e_354 div:after{content:\"\";background:0 0;border-top:none;border-bottom:3px solid #fcfff4;border-left:3px solid #fcfff4;border-right:none;width:9px;height:5px;margin:4px;position:absolute;top:5px;left:4px;transform:rotate(-45deg)}._e_1to3e_63{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_1to3e_393{color:var(--field-error-color);margin-top:6px;font-size:12px;font-style:normal}\n\n._o_14hhr_2{z-index:98;background:0 0;position:fixed;inset:0}._c_14hhr_13{background:var(--select-background);z-index:99;max-height:min(92vh,480px);color:var(--select-color,#333);box-sizing:border-box;border-radius:10px;min-width:259px;margin:0;padding:10px 12px 12px;display:block;position:fixed;overflow:hidden auto;box-shadow:5px 7px 18px #000000a8}._c_14hhr_13 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:34px;gap:2px;display:grid}._c_14hhr_13 [grid-calendar]>p{color:var(--color-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_14hhr_13 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_14hhr_13 b{cursor:pointer;text-align:center;border-radius:5px;padding:8px 5px;font-weight:400;display:block}._c_14hhr_13 b.__active_14hhr_64{background:var(--bg-select-active)}._c_14hhr_13 b:hover{background:var(--bg-select-hover)}._c_14hhr_13 p{color:var(--color-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_14hhr_13 i{text-align:center;cursor:pointer;border-radius:5px;flex:0 30px;padding:9px}._c_14hhr_13 i:hover{background:var(--bg-select-hover)}._c_14hhr_13 i:before{cursor:pointer;display:block}._c_14hhr_13 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_14hhr_13 s h2{text-align:center;min-width:0;color:var(--select-color,#333);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_14hhr_13 ._dateHeaderMonth_14hhr_119,._c_14hhr_13 ._dateHeaderYear_14hhr_119{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_14hhr_13 ._dateHeaderMonth_14hhr_119:hover,._c_14hhr_13 ._dateHeaderYear_14hhr_119:hover{background:var(--bg-select-hover)}._c_14hhr_13 ._dateHeaderDisabled_14hhr_129{cursor:not-allowed;opacity:.45;pointer-events:none}._c_14hhr_13 ._dateHeaderDisabled_14hhr_129[data-active=true],._c_14hhr_13 ._dateHeaderDisabled_14hhr_129[data-current=true]{opacity:.45}._c_14hhr_13 [grid-calendar] b[data-current=true],._c_14hhr_13 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_14hhr_13 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_14hhr_13 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_14hhr_13 [grid-calendar] b[data-active=true][data-current=true],._c_14hhr_13 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_14hhr_13 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:5px;font-weight:600}._c_14hhr_13 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_14hhr_13 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_14hhr_13 span{text-align:center;padding:2px}._c_14hhr_13 span p{color:var(--color-placeholder);padding:8px 5px}._c_14hhr_13 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_14hhr_13 [grid-calendar]>span>b,._c_14hhr_13 [grid-calendar]>span>p{box-sizing:border-box;border-radius:5px;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_14hhr_13 ._as_14hhr_196{cursor:ns-resize}._c_14hhr_13 ._ap_14hhr_199{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;-webkit-user-select:text;user-select:text}[field=password][show] dd,[field=password] dd:before{-webkit-text-security:none}[field=code] div{gap:8px;display:flex}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{cursor:pointer;max-width:35px;padding:0}[field=check] [active]:after{content:\"\";background:#394264;border-radius:5px;width:15px;height:15px;display:block}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;cursor:pointer;position:relative}[field=file] img{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block}[field=file] label{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block;position:absolute}[field=color] dd{border:0;gap:3px;padding:0;display:flex}[field=color] dd s{cursor:pointer;opacity:.6;border:1px solid #dde2e4;border-radius:6px;flex:1}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}\n\n:root{--select-overlay:transparent;--select-height:52px;--select-separator:1px solid #c6c6c8;--select-color:#000;--select-background:#fff;--select-li-hover-bg:#f2f2f7;--select-li-focus-bg:#e5e5ea;--select-li-selected-bg:#e5e5ea;--select-icon:calc(var(--select-height) / 1.5);--select-icon-padding:calc((var(--select-height) - var(--select-icon)) / 2);--select-font-size:17px}._o_12209_20{z-index:98;background:var(--select-overlay);position:fixed;inset:0}._l_12209_30{background:var(--select-background);z-index:99;border-radius:20px;max-height:300px;margin:0;padding:0;display:block;position:fixed;overflow:scroll}._l_12209_30::-webkit-scrollbar{width:0;height:0}._l_12209_30 ul{width:100%;max-height:300px;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_12209_30 li{border-bottom:var(--select-separator);cursor:pointer;color:var(--select-color);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_12209_30 li[aria-selected=true]{background:var(--select-li-selected-bg,var(--select-li-hover-bg))}._l_12209_30 li:hover{background:var(--select-li-hover-bg,#f2f2f7)}._l_12209_30 li[data-focus=true]{background:var(--select-li-focus-bg,#e5e5ea)}._l_12209_30 li:last-child{border-bottom:0}._i_12209_93{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._placeholderValue_12209_103{color:var(--field-placeholder);font-weight:400}._f_12209_108{cursor:pointer}._f_12209_108[aria-disabled=true]{cursor:not-allowed}\n";
+    el.textContent = "._l_1to3e_2{min-width:var(--field-width);gap:var(--field-block-gap,0);flex-direction:column;margin:0;padding:0;display:flex;position:relative}._l_1to3e_2>dt,._l_1to3e_2>dd{margin:0}._l_1to3e_2[data-field=group] div{cursor:pointer;border-bottom:var(--field-border);padding:var(--field-padding);margin:0}._l_1to3e_2[data-field=group] div:last-child{border-bottom:0}._l_1to3e_2 [placeholder]:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-style:normal;font-weight:400;display:block}._l_1to3e_2 [placeholder]:focus:before{display:none}._f_1to3e_38{box-sizing:border-box;align-items:center;gap:var(--field-icon-gap,10px);border:var(--field-border);border-radius:var(--field-radius);background:var(--field-background);color:var(--field-color);padding:var(--control-inner-padding,0 var(--field-side-padding,14px));transition:border-color .16s,box-shadow .16s,background-color .16s,opacity .16s;display:flex;overflow:hidden}._f_1to3e_38:hover{border-color:var(--field-border-hover,var(--field-border))}._f_1to3e_38:focus-within{border-color:var(--field-border-focus,var(--field-border));box-shadow:0 0 0 3px var(--field-focus-ring,#0000);background:var(--field-background-focus,var(--field-background))}._f_1to3e_38._e_1to3e_63:focus-within{background:var(--field-error-background);color:var(--field-error-color)}._f_1to3e_38[data-disabled=true]{background:var(--field-background-disabled,var(--field-background));border-color:var(--field-border-disabled,var(--field-border));color:var(--field-color-disabled,var(--field-placeholder));cursor:not-allowed;opacity:.85}._f_1to3e_38[data-disabled=true]>*{cursor:not-allowed}._f_1to3e_38>div{min-height:var(--field-height);line-height:calc(var(--field-height) - 2px);font-size:var(--control-font-size,14px);text-wrap:pretty;outline:0;flex:1;margin:0;padding:0}._f_1to3e_38>div::selection{background:var(--field-selection-bg,#b3d4fc);color:var(--field-selection-color,inherit)}._f_1to3e_38>:not(div){color:var(--field-icon-color,var(--field-placeholder));flex:none;justify-content:center;align-items:center;display:inline-flex}._f_1to3e_38>:not(div) svg{width:20px;height:20px}._f_1to3e_38 input::placeholder,._f_1to3e_38 textarea::placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 input::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 textarea::-webkit-input-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 input::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._f_1to3e_38 textarea::-moz-placeholder{color:var(--field-placeholder);opacity:1;font-weight:400}._n_1to3e_127 div{min-height:var(--field-note-height);line-height:var(--field-note-line-height);padding-top:var(--field-note-padding,var(--field-note-padding-top,8px));padding-bottom:var(--field-note-padding,var(--field-note-padding-top,8px))}._w_1to3e_134>div{text-wrap:nowrap;overflow:scroll hidden}._w_1to3e_134>div::-webkit-scrollbar{width:0;height:0}._time_1to3e_144>div{text-wrap:nowrap;align-items:center;min-width:0;display:flex;overflow:visible}._time_1to3e_144 ._timeInner_1to3e_151{justify-content:flex-start;align-items:center;gap:4px;width:100%;min-width:0;display:flex}._time_1to3e_144._timeAlignCenter_1to3e_162 ._timeInner_1to3e_151{justify-content:center}._time_1to3e_144 ._timeSep_1to3e_165{opacity:.65;-webkit-user-select:none;user-select:none;flex:none;padding:0 2px;font-weight:500;transform:translateY(-1px)}._time_1to3e_144 ._timePart_1to3e_176{box-sizing:border-box;width:1em;min-width:0;color:inherit;font:inherit;line-height:inherit;text-align:left;min-height:var(--field-height);cursor:text;background:0 0;border:0;border-radius:6px;outline:none;flex:none;margin:0;padding:0}._time_1to3e_144 ._timePart_1to3e_176[contenteditable=false]{cursor:not-allowed;opacity:.7}._time_1to3e_144 ._timePart_1to3e_176:empty:before{content:attr(placeholder);color:var(--field-placeholder);opacity:1;font-weight:400}._time_1to3e_144 ._timePart_1to3e_176:focus:empty:before{content:none}._time_1to3e_144 ._timePart_1to3e_176:focus-visible{background:0 0}._time_1to3e_144._timeAlignCenter_1to3e_162 ._timePart_1to3e_176{text-align:center}._t_1to3e_144{color:var(--field-label-color);font-size:var(--field-label-size);padding-bottom:10px}._affix_1to3e_223{color:var(--field-icon-color,var(--field-placeholder));font-size:inherit;-webkit-user-select:none;user-select:none;flex:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;display:inline-flex}._g_1to3e_237{flex-direction:column}._range_1to3e_241>div{box-sizing:border-box;min-width:0;min-height:var(--field-height);flex:1;align-items:center;line-height:normal;display:flex}._range_1to3e_241 ._rangeTrack_1to3e_250{box-sizing:border-box;width:100%;height:var(--field-range-bar-height,14px);background:var(--field-range-track,#e0e0e0);cursor:pointer;touch-action:none;border-radius:999px;outline:none;flex-shrink:0;position:relative;overflow:hidden}._range_1to3e_241 ._rangeTrack_1to3e_250:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000)}._range_1to3e_241 ._rangeTrack_1to3e_250[data-disabled=true]{cursor:not-allowed;opacity:.55;pointer-events:none}._range_1to3e_241 ._rangeFill_1to3e_271{background:var(--field-range-fill,#00b5ad);pointer-events:none;border-radius:999px 0 0 999px;width:0;min-width:0;height:100%}._range_1to3e_241 ._rangeFillFull_1to3e_282{border-radius:999px}._checkbox_1to3e_286>div{min-height:var(--field-height);align-items:flex-start;width:100%;padding:0;line-height:normal;display:flex}._checkControl_1to3e_295{width:100%;min-height:var(--field-height);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;outline:none;align-items:flex-start;gap:12px;margin:0;padding:10px 0;display:flex}._checkControl_1to3e_295:focus-visible{box-shadow:0 0 0 3px var(--field-focus-ring,#0000);border-radius:calc(var(--field-radius) - 2px)}._checkControl_1to3e_295[aria-disabled=true]{cursor:not-allowed}._checkBox_1to3e_319{border:var(--field-check-box-border,var(--field-border));background:0 0;border-radius:8px;flex:none;justify-content:center;align-items:center;width:22px;height:22px;transition:background-color .16s,border-color .16s,opacity .16s;display:inline-flex}._checkMark_1to3e_332{border-top:none;border-bottom:2px solid #fcfff4;border-left:2px solid #fcfff4;border-right:none;width:11px;height:6px;transform:translateY(-1px)rotate(-45deg)}._checkText_1to3e_341{min-width:0;color:inherit;font-size:var(--control-font-size,14px);flex:auto;padding-top:2px;line-height:1.25}._checkControl_1to3e_295[aria-checked=true] ._checkBox_1to3e_319{background:var(--field-background-active)}._h_1to3e_354{--field-border:0}._h_1to3e_354 div{border:var(--field-check-box-border,--field-border);width:var(--field-height);height:var(--field-height);border-radius:var(--field-radius);background:var(--field-background);cursor:pointer;flex:none;gap:10px;margin:0;position:relative}._h_1to3e_354 div[aria-checked=true]{background:var(--field-background-active)}._h_1to3e_354 div:after{content:\"\";background:0 0;border-top:none;border-bottom:3px solid #fcfff4;border-left:3px solid #fcfff4;border-right:none;width:9px;height:5px;margin:4px;position:absolute;top:5px;left:4px;transform:rotate(-45deg)}._e_1to3e_63{border-color:var(--field-error-border);background:var(--field-error-background);color:var(--field-error-color)}._m_1to3e_393{color:var(--field-error-color);margin-top:6px;font-size:12px;font-style:normal}\n\n._o_14hhr_2{z-index:98;background:0 0;position:fixed;inset:0}._c_14hhr_13{background:var(--select-background);z-index:99;max-height:min(92vh,480px);color:var(--select-color,#333);box-sizing:border-box;border-radius:10px;min-width:259px;margin:0;padding:10px 12px 12px;display:block;position:fixed;overflow:hidden auto;box-shadow:5px 7px 18px #000000a8}._c_14hhr_13 [grid-calendar]{grid-template-columns:repeat(7,1fr);grid-auto-rows:34px;gap:2px;display:grid}._c_14hhr_13 [grid-calendar]>p{color:var(--color-placeholder);box-sizing:border-box;justify-content:center;align-items:center;margin:0;padding:0;font-size:.75rem;font-weight:500;line-height:1;display:flex}._c_14hhr_13 [grid-month]{grid-template-columns:1fr 1fr 1fr 1fr;width:250px;display:grid}._c_14hhr_13 b{cursor:pointer;text-align:center;border-radius:5px;padding:8px 5px;font-weight:400;display:block}._c_14hhr_13 b.__active_14hhr_64{background:var(--bg-select-active)}._c_14hhr_13 b:hover{background:var(--bg-select-hover)}._c_14hhr_13 p{color:var(--color-placeholder);text-align:center;cursor:default;pointer-events:none;padding:0}._c_14hhr_13 i{text-align:center;cursor:pointer;border-radius:5px;flex:0 30px;padding:9px}._c_14hhr_13 i:hover{background:var(--bg-select-hover)}._c_14hhr_13 i:before{cursor:pointer;display:block}._c_14hhr_13 s{align-items:center;gap:4px;padding-bottom:6px;font-style:normal;text-decoration:none;display:flex}._c_14hhr_13 s h2{text-align:center;min-width:0;color:var(--select-color,#333);cursor:default;flex-wrap:nowrap;flex:auto;justify-content:center;align-items:center;gap:8px;margin:0;padding:0;font-size:16px;font-weight:400;line-height:1.25;display:flex}._c_14hhr_13 ._dateHeaderMonth_14hhr_119,._c_14hhr_13 ._dateHeaderYear_14hhr_119{cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:6px;padding:2px 8px}._c_14hhr_13 ._dateHeaderMonth_14hhr_119:hover,._c_14hhr_13 ._dateHeaderYear_14hhr_119:hover{background:var(--bg-select-hover)}._c_14hhr_13 ._dateHeaderDisabled_14hhr_129{cursor:not-allowed;opacity:.45;pointer-events:none}._c_14hhr_13 ._dateHeaderDisabled_14hhr_129[data-active=true],._c_14hhr_13 ._dateHeaderDisabled_14hhr_129[data-current=true]{opacity:.45}._c_14hhr_13 [grid-calendar] b[data-current=true],._c_14hhr_13 [grid-month] b[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);font-weight:600}._c_14hhr_13 [grid-calendar] b[data-active=true]:not([data-current=true]),._c_14hhr_13 [grid-month] b[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px}._c_14hhr_13 [grid-calendar] b[data-active=true][data-current=true],._c_14hhr_13 [grid-month] b[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_14hhr_13 [grid-calendar] p[data-current=true]{background:color-mix(in srgb, var(--field-background-active) 52%, transparent);color:inherit;border-radius:5px;font-weight:600}._c_14hhr_13 [grid-calendar] p[data-active=true]:not([data-current=true]){outline:2px solid var(--field-background-active);outline-offset:-2px;opacity:.85}._c_14hhr_13 [grid-calendar] p[data-active=true][data-current=true]{box-shadow:inset 0 0 0 2px var(--field-background-active)}._c_14hhr_13 span{text-align:center;padding:2px}._c_14hhr_13 span p{color:var(--color-placeholder);padding:8px 5px}._c_14hhr_13 [grid-calendar]>span{box-sizing:border-box;justify-content:stretch;align-items:stretch;min-height:0;padding:0;display:flex}._c_14hhr_13 [grid-calendar]>span>b,._c_14hhr_13 [grid-calendar]>span>p{box-sizing:border-box;border-radius:5px;flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;margin:0;padding:0;display:flex}._c_14hhr_13 ._as_14hhr_196{cursor:ns-resize}._c_14hhr_13 ._ap_14hhr_199{cursor:pointer}[field=password] dd{white-space:nowrap;font-style:unset;-webkit-text-security:disc;-webkit-user-select:text;user-select:text}[field=password][show] dd,[field=password] dd:before{-webkit-text-security:none}[field=code] div{gap:8px;display:flex}[field=select] dd{cursor:pointer}[field] dd:before{pointer-events:none}[field=check] dd{cursor:pointer;max-width:35px;padding:0}[field=check] [active]:after{content:\"\";background:#394264;border-radius:5px;width:15px;height:15px;display:block}[field=file] input{display:none}[field=file] dd{aspect-ratio:16/9;cursor:pointer;position:relative}[field=file] img{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block}[field=file] label{aspect-ratio:16/9;object-fit:contain;cursor:pointer;width:-webkit-fill-available;display:block;position:absolute}[field=color] dd{border:0;gap:3px;padding:0;display:flex}[field=color] dd s{cursor:pointer;opacity:.6;border:1px solid #dde2e4;border-radius:6px;flex:1}[field=color] dd s:hover{opacity:.9}[field=color] dd s[active=true]{opacity:1}\n\n:root{--select-overlay:transparent;--select-height:52px;--select-separator:1px solid #c6c6c8;--select-color:#000;--select-background:#fff;--select-li-hover-bg:#f2f2f7;--select-li-focus-bg:#e5e5ea;--select-li-selected-bg:#e5e5ea;--select-icon:calc(var(--select-height) / 1.5);--select-icon-padding:calc((var(--select-height) - var(--select-icon)) / 2);--select-font-size:17px}._o_12209_20{z-index:98;background:var(--select-overlay);position:fixed;inset:0}._l_12209_30{background:var(--select-background);z-index:99;border-radius:20px;max-height:300px;margin:0;padding:0;display:block;position:fixed;overflow:scroll}._l_12209_30::-webkit-scrollbar{width:0;height:0}._l_12209_30 ul{width:100%;max-height:300px;margin:0;padding:0;list-style:none;display:block;overflow:hidden auto}._l_12209_30 li{border-bottom:var(--select-separator);cursor:pointer;color:var(--select-color);height:var(--select-height);line-height:var(--select-height);font-size:var(--select-font-size);white-space:nowrap;text-overflow:ellipsis;opacity:1;margin:0;padding:0 14px;display:block;overflow:hidden;text-align:left!important;border-left:0!important}._l_12209_30 li[aria-selected=true]{background:var(--select-li-selected-bg,var(--select-li-hover-bg))}._l_12209_30 li:hover{background:var(--select-li-hover-bg,#f2f2f7)}._l_12209_30 li[data-focus=true]{background:var(--select-li-focus-bg,#e5e5ea)}._l_12209_30 li:last-child{border-bottom:0}._i_12209_93{width:var(--select-icon);height:var(--select-icon);color:var(--field-color);right:var(--select-icon-padding);top:var(--select-icon-padding);position:absolute}._placeholderValue_12209_103{color:var(--field-placeholder);font-weight:400}._f_12209_108{cursor:pointer}._f_12209_108[aria-disabled=true]{cursor:not-allowed}\n\n:root{--color-picker-width:260px;--color-picker-radius:16px;--color-picker-pad:10px;--color-picker-swatch:20px;--color-picker-input-radius:5px;--color-picker-handle:14px}._o_1937d_14{z-index:98;background:var(--select-overlay,transparent);position:fixed;inset:0}._panel_1937d_21{z-index:99;box-sizing:border-box;width:var(--color-picker-width);padding:var(--color-picker-pad);background:var(--select-background,#2c2c2e);color:var(--select-color,#fff);border-radius:var(--color-picker-radius);flex-direction:column;gap:8px;display:flex;position:fixed;box-shadow:0 8px 28px #00000059}._sv_1937d_37{aspect-ratio:1/.55;cursor:crosshair;touch-action:none;border-radius:8px;width:100%;max-height:140px;position:relative;overflow:hidden}._svWhite_1937d_48{background:linear-gradient(90deg,#fff,#0000);position:absolute;inset:0}._svBlack_1937d_54{background:linear-gradient(#0000,#000);position:absolute;inset:0}._handle_1937d_60{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;border:2px solid #fff;border-radius:50%;position:absolute;box-shadow:0 0 0 1px #00000059}._slidersRow_1937d_72{align-items:center;gap:8px;display:flex}._eyedropper_1937d_78{border-radius:var(--color-picker-input-radius);background:var(--field-background,#1c1c1e);width:26px;height:26px;color:var(--field-icon-color,#8e8e93);cursor:pointer;border:none;flex:none;justify-content:center;align-items:center;padding:0;display:inline-flex}._eyedropper_1937d_78:hover{color:var(--field-color,#fff)}._sliders_1937d_72{flex-direction:column;flex:1;gap:8px;min-width:0;display:flex}._slider_1937d_72{cursor:pointer;touch-action:none;border-radius:999px;height:10px;position:relative}._sliderHue_1937d_113{background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}._sliderAlpha_1937d_117{background-image:linear-gradient(to right, transparent, var(--alpha-color,#fff)), linear-gradient(45deg, #777 25%, transparent 25%), linear-gradient(-45deg, #777 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #777 75%), linear-gradient(-45deg, transparent 75%, #777 75%);background-color:#bbb;background-position:0 0,0 0,0 4px,4px -4px,-4px 0;background-size:100% 100%,8px 8px,8px 8px,8px 8px,8px 8px}._sliderHandle_1937d_125{width:var(--color-picker-handle);height:var(--color-picker-handle);margin:calc(var(--color-picker-handle) / -2) 0 0 calc(var(--color-picker-handle) / -2);pointer-events:none;box-sizing:border-box;background:0 0;border:2px solid #fff;border-radius:50%;position:absolute;top:50%;box-shadow:0 0 0 1px #00000059}._inputs_1937d_139{align-items:center;gap:6px;display:flex}._format_1937d_145{color:var(--field-placeholder,#8e8e93);flex:none;padding:0 2px;font-size:12px}._input_1937d_139{box-sizing:border-box;border-radius:var(--color-picker-input-radius);background:var(--field-background,#1c1c1e);min-width:0;height:28px;color:var(--field-color,#fff);font:inherit;border:none;outline:none;flex:1;padding:0 8px;font-size:13px}._input_1937d_139:focus{box-shadow:0 0 0 2px var(--field-focus-ring,#fff3)}._inputAlpha_1937d_171{text-align:center;flex:0 0 56px}._palette_1937d_176{grid-template-columns:repeat(8,1fr);place-items:center;gap:4px;padding:0;display:grid}._swatchBtn_1937d_185{width:var(--color-picker-swatch);height:var(--color-picker-swatch);cursor:pointer;background:var(--swatch,#888);border:none;border-radius:50%;padding:0;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}._swatchBtn_1937d_185[aria-checked=true]{z-index:1;box-shadow:inset 0 0 0 1px #00000026, 0 0 0 2px var(--select-background,#2c2c2e), 0 0 0 3px #ffffff59;transform:scale(1.35)}._swatchBtn_1937d_185:disabled{cursor:not-allowed;opacity:.5}._trigger_1937d_210{cursor:pointer;align-items:center;gap:var(--field-icon-gap,10px);min-width:0;height:var(--field-height,44px);flex:1;display:flex}._trigger_1937d_210[aria-disabled=true]{cursor:not-allowed}._preview_1937d_224{background-image:linear-gradient(var(--preview-color,transparent), var(--preview-color,transparent)), linear-gradient(45deg, #c6c6c8 25%, transparent 25%), linear-gradient(-45deg, #c6c6c8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #c6c6c8 75%), linear-gradient(-45deg, transparent 75%, #c6c6c8 75%);background-color:#eee;background-position:0 0,0 0,0 3px,3px -3px,-3px 0;background-size:100% 100%,6px 6px,6px 6px,6px 6px,6px 6px;border-radius:50%;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #00000026}._hexText_1937d_236{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:var(--control-font-size,17px);flex:1;overflow:hidden}._placeholder_1937d_245{color:var(--field-placeholder,#8e8e93);font-weight:400}\n";
     document.head.appendChild(el);
 })();
 
@@ -27,12 +27,13 @@ import g from "./fields/Select.js";
 import _ from "./fields/Modal.js";
 import v from "./fields/Password.js";
 import y from "./fields/Check.js";
-import { Form as b } from "./Form.js";
+import b, { DEFAULT_COLOR_PALETTE as x } from "./fields/Color.js";
+import { Form as S } from "./Form.js";
 //#region src/lib/index.ts
-function x() {
+function C() {
 	return typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof self < "u" ? self : {};
 }
-var S = x();
-S.elcrm ||= {}, Object.assign(S.elcrm, { form: e.version });
+var w = C();
+w.elcrm ||= {}, Object.assign(w.elcrm, { form: e.version });
 //#endregion
-export { y as CheckField, c as DateField, b as Form, s as MaskField, _ as ModalField, o as MoneyField, m as NumberField, h as OptionsField, v as PasswordField, f as PhoneField, i as ProgressField, i as RangeField, g as SelectField, p as StringField, u as TextareaField, l as TimeField, a as asEditableClipboard, t as useForm, n as useFormField, r as useFormFieldState, d as useFormInit };
+export { y as CheckField, b as ColorField, x as DEFAULT_COLOR_PALETTE, c as DateField, S as Form, s as MaskField, _ as ModalField, o as MoneyField, m as NumberField, h as OptionsField, v as PasswordField, f as PhoneField, i as ProgressField, i as RangeField, g as SelectField, p as StringField, u as TextareaField, l as TimeField, a as asEditableClipboard, t as useForm, n as useFormField, r as useFormFieldState, d as useFormInit };