@elcrm/form 0.0.82 → 0.0.84

package/dist/fields/Date.js

@@ -3,21 +3,22 @@ import t from "../core/Field.js";
 import { useFormFieldState as n } from "../hooks/use.js";
 import { isEmptyTextLike as r } from "./visibility.js";
 import i from "../styles/Form.module.js";
-import a from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import { createPortal as l } from "react-dom";
+import { acquireOverlayZIndex as a, releaseOverlayZIndex as o } from "../overlayZ.js";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
 //#region src/lib/fields/Date.tsx
-function u(e) {
+function f(e) {
 	return !!(e == null || typeof e == "string" && r(e) || e instanceof Date && Number.isNaN(e.getTime()));
 }
-function d(e, t, n, r) {
+function p(e, t, n, r) {
 	let i = new Date(e, t - 1, 1);
 	return !(n && new Date(e, t, 0) < n || r && i > r);
 }
-function f(e, t, n) {
+function m(e, t, n) {
 	return !(t && e < t.getFullYear() || n && e > n.getFullYear());
 }
-function p(e, t, n) {
+function h(e, t, n) {
 	let r = e;
 	if (t) {
 		let e = t.getFullYear();
@@ -29,12 +30,12 @@ function p(e, t, n) {
 	}
 	return r;
 }
-function m(e) {
+function g(e) {
 	if (!(e instanceof HTMLElement)) return !1;
 	let t = e.tagName;
 	return t === "INPUT" || t === "TEXTAREA" || t === "SELECT" ? !0 : !!e.isContentEditable;
 }
-function h(e) {
+function _(e) {
 	let t = (e || "").trim();
 	if (!t) return null;
 	let n = t.split(/\s+/)[0].replace(/,/g, "."), r = (e, t, n) => {
@@ -48,15 +49,15 @@ function h(e) {
 	let a = n.replace(/\D/g, "");
 	return a.length === 8 ? r(parseInt(a.slice(4, 8), 10), parseInt(a.slice(2, 4), 10), parseInt(a.slice(0, 2), 10)) || r(parseInt(a.slice(0, 4), 10), parseInt(a.slice(4, 6), 10), parseInt(a.slice(6, 8), 10)) : null;
 }
-function g(e, t, n) {
+function v(e, t, n) {
 	let r = e.getTime();
 	return t && r < t.getTime() && (r = t.getTime()), n && r > n.getTime() && (r = n.getTime()), new Date(r);
 }
-function _(e) {
-	return e.getFullYear() + "-" + S(2, e.getMonth() + 1) + "-" + S(2, e.getDate());
+function y(e) {
+	return e.getFullYear() + "-" + w(2, e.getMonth() + 1) + "-" + w(2, e.getDate());
 }
-function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder: v, disabled: b = !1, onValue: x, max: S, min: w, form: T, icon: E, name: D = "", value: O, after: k = "", before: A = "" }) {
-	let j = a.useCallback((e) => {
+function b({ label: i = "", error: a, hidden: o = !1, className: p, placeholder: m, disabled: h = !1, onValue: b, max: S, min: C, form: w, icon: E, name: D = "", value: O, after: k = "", before: A = "" }) {
+	let j = s.useCallback((e) => {
 		if (e == null || typeof e == "string" && r(e)) return "";
 		if (e instanceof Date) return Number.isNaN(e.getTime()) ? "" : e;
 		if (typeof e == "string" || typeof e == "number") {
@@ -64,7 +65,7 @@ function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder:
 			return Number.isNaN(t.getTime()) ? "" : e;
 		}
 		return "";
-	}, []), { value: M } = n(T, D, O), [N, P] = a.useState(j(M)), F = a.useRef(null), [I, L] = a.useState(null), [R, z] = a.useState(!1), B = a.useCallback(() => {
+	}, []), { value: M } = n(w, D, O), [N, P] = s.useState(j(M)), F = s.useRef(null), [I, L] = s.useState(null), [R, z] = s.useState(!1), B = s.useCallback(() => {
 		let e = F.current;
 		if (!e) return;
 		let t = e.getBoundingClientRect();
@@ -74,7 +75,7 @@ function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder:
 			b: t.bottom
 		});
 	}, []);
-	a.useEffect(() => {
+	s.useEffect(() => {
 		if (!R) return;
 		B();
 		let e = () => {
@@ -83,31 +84,31 @@ function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder:
 		return window.addEventListener("scroll", e, !0), window.addEventListener("resize", e), () => {
 			window.removeEventListener("scroll", e, !0), window.removeEventListener("resize", e);
 		};
-	}, [R, B]), a.useEffect(() => {
+	}, [R, B]), s.useEffect(() => {
 		P(j(M));
 	}, [M, j]);
-	let V = a.useCallback((e) => {
+	let V = s.useCallback((e) => {
 		let t = {
 			value: e,
 			name: D
 		};
-		P(e), T && D && T.setValue(t), x && x !== T?.onValue && x(t);
+		P(e), w && D && w.setValue(t), b && b !== w?.onValue && b(t);
 	}, [
-		T,
+		w,
 		D,
-		x
+		b
 	]);
-	a.useEffect(() => {
-		if (!R || b) return;
+	s.useEffect(() => {
+		if (!R || h) return;
 		let e = "", t = (t) => {
-			let n = h(t);
+			let n = _(t);
 			if (!n) return !1;
-			let r = _(g(n, w, S));
+			let r = y(v(n, C, S));
 			return r === e ? !0 : (e = r, V(r), z(!1), !0);
 		}, n = (e) => {
-			m(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
+			g(e.target) || t(e.clipboardData?.getData("text/plain") ?? "") && (e.preventDefault(), e.stopPropagation());
 		}, r = (e) => {
-			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || m(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
+			(e.ctrlKey || e.metaKey) && (e.key !== "v" && e.key !== "V" || g(e.target) || navigator.clipboard?.readText && (e.preventDefault(), navigator.clipboard.readText().then((e) => {
 				t(e);
 			})));
 		};
@@ -116,13 +117,13 @@ function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder:
 		};
 	}, [
 		R,
-		b,
-		w,
+		h,
+		C,
 		S,
 		V
 	]);
 	let H = (e) => {
-		if (b) return;
+		if (h) return;
 		let t = e.currentTarget.getBoundingClientRect();
 		L({
 			x: t.left,
@@ -130,72 +131,74 @@ function v({ label: i = "", error: d, hidden: f = !1, className: p, placeholder:
 			b: t.bottom
 		}), z(!0);
 	}, U = {};
-	v && (U.placeholder = v);
+	m && (U.placeholder = m);
 	let W = M == null || M === "" || typeof M == "string" && r(M);
-	return f && W ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ c(o, { children: [E ? E() : /* @__PURE__ */ c(t, {
+	return o && W ? /* @__PURE__ */ l(c, {}) : /* @__PURE__ */ u(c, { children: [E ? E() : /* @__PURE__ */ u(t, {
 		type: "date",
 		label: i,
-		error: d,
+		error: a,
 		element_blok: { className: [p || ""] },
 		element_input: {
 			className: [e.w],
-			props: { "data-disabled": b ? "true" : void 0 }
+			props: { "data-disabled": h ? "true" : void 0 }
 		},
 		children: [
-			A ? /* @__PURE__ */ s("span", {
+			A ? /* @__PURE__ */ l("span", {
 				className: e.affix,
 				children: A
 			}) : null,
-			/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ l("div", {
 				ref: F,
 				onClick: H,
 				onKeyDown: (e) => {
 					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), H(e));
 				},
-				tabIndex: b ? -1 : 0,
+				tabIndex: h ? -1 : 0,
 				role: "button",
 				"aria-haspopup": "dialog",
 				"aria-expanded": R,
-				"aria-label": i || v || "Дата",
-				"data-edit": b ? void 0 : "true",
+				"aria-label": i || m || "Дата",
+				"data-edit": h ? void 0 : "true",
 				...U,
-				style: { cursor: b ? "not-allowed" : "pointer" },
-				children: u(N) ? "" : C(N, "dd.mm.yyyy")
+				style: { cursor: h ? "not-allowed" : "pointer" },
+				children: f(N) ? "" : T(N, "dd.mm.yyyy")
 			}),
-			k ? /* @__PURE__ */ s("span", {
+			k ? /* @__PURE__ */ l("span", {
 				className: e.affix,
 				children: k
 			}) : null
 		]
-	}), R && I && l(/* @__PURE__ */ s(y, {
+	}), R && I && d(/* @__PURE__ */ l(x, {
 		position: I,
 		onValue: V,
 		date: N,
 		max: S,
-		min: w,
+		min: C,
 		onOpen: z,
 		className: p
 	}, "elcrm-date-popup"), document.body)] });
 }
-v.displayName = "DateField";
-var y = ({ date: e, onValue: t, position: n, max: r, min: l, className: u, onOpen: m }) => {
-	let h = /* @__PURE__ */ new Date(), g = new Date(e);
-	Number.isNaN(g.getTime()) && (g = /* @__PURE__ */ new Date());
-	let _ = {
-		y: h.getFullYear(),
-		d: h.getDate(),
-		m: h.getMonth() + 1
-	}, v = {
-		y: g.getFullYear(),
-		d: g.getDate(),
-		m: g.getMonth() + 1
-	}, [y, b] = a.useState({
-		y: v.y,
-		m: v.m
-	}), [C, w] = a.useState("days"), [T, E] = a.useState(() => p(v.y - 5, l, r)), D = (e) => {
+b.displayName = "DateField";
+var x = ({ date: e, onValue: t, position: n, max: r, min: d, className: f, onOpen: g }) => {
+	let [_] = s.useState(() => a());
+	s.useEffect(() => () => o(_), [_]);
+	let v = /* @__PURE__ */ new Date(), y = new Date(e);
+	Number.isNaN(y.getTime()) && (y = /* @__PURE__ */ new Date());
+	let b = {
+		y: v.getFullYear(),
+		d: v.getDate(),
+		m: v.getMonth() + 1
+	}, x = {
+		y: y.getFullYear(),
+		d: y.getDate(),
+		m: y.getMonth() + 1
+	}, [S, T] = s.useState({
+		y: x.y,
+		m: x.m
+	}), [E, D] = s.useState("days"), [O, k] = s.useState(() => h(x.y - 5, d, r)), A = (e) => {
 		let t = e.getDay();
 		return t === 0 && (t = 7), t - 1;
-	}, O = [
+	}, j = [
 		"пн",
 		"вт",
 		"ср",
@@ -203,146 +206,148 @@ var y = ({ date: e, onValue: t, position: n, max: r, min: l, className: u, onOpe
 		"пт",
 		"сб",
 		"вс"
-	], k = y.m - 1, A = new Date(y.y, k), j = [];
-	for (let e = 0; e < D(A); e++) j.push(0);
-	for (; A.getMonth() === k;) j.push(A.getDate()), A.setDate(A.getDate() + 1);
-	let M = () => {
-		m(!1);
-	}, N = () => {
-		V(y.m + 1, y.y);
-	}, P = () => {
-		V(y.m - 1, y.y);
-	}, F = () => {
-		C === "days" ? P() : C === "months" ? V(y.m, y.y - 1) : E((e) => p(e - 12, l, r));
+	], M = S.m - 1, N = new Date(S.y, M), P = [];
+	for (let e = 0; e < A(N); e++) P.push(0);
+	for (; N.getMonth() === M;) P.push(N.getDate()), N.setDate(N.getDate() + 1);
+	let F = () => {
+		g(!1);
 	}, I = () => {
-		C === "days" ? N() : C === "months" ? V(y.m, y.y + 1) : E((e) => p(e + 12, l, r));
-	}, L = (e) => {
-		e.stopPropagation(), E(p(y.y - 5, l, r)), w("years");
-	}, R = (e) => {
-		d(y.y, e, l, r) && (b({
-			y: y.y,
+		W(S.m + 1, S.y);
+	}, L = () => {
+		W(S.m - 1, S.y);
+	}, R = () => {
+		E === "days" ? L() : E === "months" ? W(S.m, S.y - 1) : k((e) => h(e - 12, d, r));
+	}, z = () => {
+		E === "days" ? I() : E === "months" ? W(S.m, S.y + 1) : k((e) => h(e + 12, d, r));
+	}, B = (e) => {
+		e.stopPropagation(), k(h(S.y - 5, d, r)), D("years");
+	}, V = (e) => {
+		p(S.y, e, d, r) && (T({
+			y: S.y,
 			m: e
-		}), w("days"));
-	}, z = (e) => {
-		f(e, l, r) && (b({
+		}), D("days"));
+	}, H = (e) => {
+		m(e, d, r) && (T({
 			y: e,
-			m: y.m
-		}), w("days"));
-	}, B = (e) => {
-		t(y.y + "-" + S(2, y.m) + "-" + S(2, e)), M();
-	}, V = (e, t) => {
-		t = e > 12 ? t + 1 : e < 1 ? t - 1 : t, e = e > 12 ? 1 : e < 1 ? 12 : e, b({
+			m: S.m
+		}), D("days"));
+	}, U = (e) => {
+		t(S.y + "-" + w(2, S.m) + "-" + w(2, e)), F();
+	}, W = (e, t) => {
+		t = e > 12 ? t + 1 : e < 1 ? t - 1 : t, e = e > 12 ? 1 : e < 1 ? 12 : e, T({
 			y: t,
 			m: e
 		});
-	}, H = (e) => _.y === y.y && _.m === y.m && _.d === e ? { "data-active": "true" } : {}, U = (e) => v.y === y.y && v.m === y.m && v.d === e ? { "data-current": "true" } : {}, W = (e) => {
+	}, G = (e) => b.y === S.y && b.m === S.m && b.d === e ? { "data-active": "true" } : {}, K = (e) => x.y === S.y && x.m === S.m && x.d === e ? { "data-current": "true" } : {}, q = (e) => {
 		let t = !0;
-		return r && r.getTime() < new Date(y.y, y.m - 1, e).getTime() && (t = !1), l && l.getTime() > new Date(y.y, y.m - 1, e).getTime() && (t = !1), t;
-	}, G = window.innerHeight - n.b < 360 ? Math.max(8, n.y - 360) : n.b;
-	G = Math.min(G, window.innerHeight - 360 - 8), G = Math.max(8, G);
-	let K = window.innerWidth - n.x < 270 ? n.x - 246 : n.x;
-	return K = Math.max(8, Math.min(K, window.innerWidth - 270 - 8)), /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("div", {
+		return r && r.getTime() < new Date(S.y, S.m - 1, e).getTime() && (t = !1), d && d.getTime() > new Date(S.y, S.m - 1, e).getTime() && (t = !1), t;
+	}, J = window.innerHeight - n.b < 360 ? Math.max(8, n.y - 360) : n.b;
+	J = Math.min(J, window.innerHeight - 360 - 8), J = Math.max(8, J);
+	let Y = window.innerWidth - n.x < 270 ? n.x - 246 : n.x;
+	return Y = Math.max(8, Math.min(Y, window.innerWidth - 270 - 8)), /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 		className: i.o,
-		onClick: () => M()
-	}), /* @__PURE__ */ c("div", {
-		className: [i.c, u && u + "-backdrop"].join(" "),
+		style: { zIndex: _ },
+		onClick: () => F()
+	}), /* @__PURE__ */ u("div", {
+		className: [i.c, f && f + "-backdrop"].join(" "),
 		style: {
-			top: G + "px",
-			left: K + "px"
+			top: J + "px",
+			left: Y + "px",
+			zIndex: _ + 1
 		},
 		onClick: (e) => e.stopPropagation(),
 		children: [
-			/* @__PURE__ */ c("s", { children: [
-				/* @__PURE__ */ s("i", {
+			/* @__PURE__ */ u("s", { children: [
+				/* @__PURE__ */ l("i", {
 					onClick: (e) => {
-						e.stopPropagation(), F();
+						e.stopPropagation(), R();
 					},
-					children: /* @__PURE__ */ s("svg", {
+					children: /* @__PURE__ */ l("svg", {
 						width: "16",
 						height: "16",
 						fill: "currentColor",
 						viewBox: "0 0 24 24",
 						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ s("path", { d: "m15.09 4.594-7.646 6.553a1.126 1.126 0 0 0 0 1.708l7.647 6.552c.73.625 1.857.107 1.857-.854V5.447c0-.961-1.127-1.48-1.857-.853Z" })
+						children: /* @__PURE__ */ l("path", { d: "m15.09 4.594-7.646 6.553a1.126 1.126 0 0 0 0 1.708l7.647 6.552c.73.625 1.857.107 1.857-.854V5.447c0-.961-1.127-1.48-1.857-.853Z" })
 					})
 				}),
-				/* @__PURE__ */ c("h2", { children: [/* @__PURE__ */ s("span", {
+				/* @__PURE__ */ u("h2", { children: [/* @__PURE__ */ l("span", {
 					className: i.dateHeaderMonth,
 					onClick: (e) => {
-						e.stopPropagation(), w(C === "years" ? "months" : C === "months" ? "days" : "months");
+						e.stopPropagation(), D(E === "years" ? "months" : E === "months" ? "days" : "months");
 					},
-					title: C === "years" ? "К списку месяцев" : C === "months" ? "К календарю" : "Выбрать месяц",
-					children: x(y.m).name
-				}), /* @__PURE__ */ s("span", {
+					title: E === "years" ? "К списку месяцев" : E === "months" ? "К календарю" : "Выбрать месяц",
+					children: C(S.m).name
+				}), /* @__PURE__ */ l("span", {
 					className: i.dateHeaderYear,
 					onClick: (e) => {
-						e.stopPropagation(), C === "years" ? w("days") : L(e);
+						e.stopPropagation(), E === "years" ? D("days") : B(e);
 					},
-					title: C === "years" ? "К календарю" : "Выбрать год",
-					children: y.y
+					title: E === "years" ? "К календарю" : "Выбрать год",
+					children: S.y
 				})] }),
-				/* @__PURE__ */ s("i", {
+				/* @__PURE__ */ l("i", {
 					onClick: (e) => {
-						e.stopPropagation(), I();
+						e.stopPropagation(), z();
 					},
-					children: /* @__PURE__ */ s("svg", {
+					children: /* @__PURE__ */ l("svg", {
 						width: "16",
 						height: "16",
 						fill: "currentColor",
 						viewBox: "0 0 24 24",
 						xmlns: "http://www.w3.org/2000/svg",
-						children: /* @__PURE__ */ s("path", { d: "m8.91 19.406 7.646-6.552a1.125 1.125 0 0 0 0-1.709L8.91 4.593c-.73-.625-1.857-.107-1.857.854v13.107c0 .96 1.127 1.479 1.857.852Z" })
+						children: /* @__PURE__ */ l("path", { d: "m8.91 19.406 7.646-6.552a1.125 1.125 0 0 0 0-1.709L8.91 4.593c-.73-.625-1.857-.107-1.857.854v13.107c0 .96 1.127 1.479 1.857.852Z" })
 					})
 				})
 			] }),
-			C === "days" && /* @__PURE__ */ c("div", {
+			E === "days" && /* @__PURE__ */ u("div", {
 				"grid-calendar": "",
-				children: [O.map((e, t) => /* @__PURE__ */ s("p", { children: e }, "v" + t)), j.map((e, t) => /* @__PURE__ */ s("span", { children: e !== 0 && W(e) ? /* @__PURE__ */ s("b", {
-					...H(e),
-					...U(e),
-					onClick: () => B(e),
+				children: [j.map((e, t) => /* @__PURE__ */ l("p", { children: e }, "v" + t)), P.map((e, t) => /* @__PURE__ */ l("span", { children: e !== 0 && q(e) ? /* @__PURE__ */ l("b", {
+					...G(e),
+					...K(e),
+					onClick: () => U(e),
 					children: e
-				}) : /* @__PURE__ */ s("p", {
-					...H(e),
-					...U(e),
+				}) : /* @__PURE__ */ l("p", {
+					...G(e),
+					...K(e),
 					children: e === 0 ? "" : e
 				}) }, t))]
 			}),
-			C === "months" && /* @__PURE__ */ s("div", {
+			E === "months" && /* @__PURE__ */ l("div", {
 				"grid-month": "",
 				children: Array.from({ length: 12 }, (e, t) => {
-					let n = t + 1, a = d(y.y, n, l, r), o = _.y === y.y && _.m === n ? { "data-active": "true" } : {}, c = v.y === y.y && v.m === n ? { "data-current": "true" } : {};
-					return /* @__PURE__ */ s("b", {
+					let n = t + 1, a = p(S.y, n, d, r), o = b.y === S.y && b.m === n ? { "data-active": "true" } : {}, s = x.y === S.y && x.m === n ? { "data-current": "true" } : {};
+					return /* @__PURE__ */ l("b", {
 						className: a ? "" : i.dateHeaderDisabled,
 						...o,
-						...c,
-						onClick: () => a && R(n),
-						children: x(n).abc
+						...s,
+						onClick: () => a && V(n),
+						children: C(n).abc
 					}, n);
 				})
 			}),
-			C === "years" && /* @__PURE__ */ s("div", {
+			E === "years" && /* @__PURE__ */ l("div", {
 				"grid-month": "",
 				children: Array.from({ length: 12 }, (e, t) => {
-					let n = T + t, a = f(n, l, r), o = _.y === n ? { "data-active": "true" } : {}, c = v.y === n ? { "data-current": "true" } : {};
-					return /* @__PURE__ */ s("b", {
+					let n = O + t, a = m(n, d, r), o = b.y === n ? { "data-active": "true" } : {}, s = x.y === n ? { "data-current": "true" } : {};
+					return /* @__PURE__ */ l("b", {
 						className: a ? "" : i.dateHeaderDisabled,
 						...o,
-						...c,
-						onClick: () => a && z(n),
+						...s,
+						onClick: () => a && H(n),
 						children: n
 					}, n);
 				})
 			})
 		]
 	})] });
-}, b = {
+}, S = {
 	val: "01",
 	name: "—",
 	names: "—",
 	abc: "—"
 };
-function x(e) {
+function C(e) {
 	let t = typeof e == "number" ? e : new Date(e).getMonth() + 1;
 	return (!Number.isFinite(t) || t < 1 || t > 12) && (t = (/* @__PURE__ */ new Date()).getMonth() + 1), {
 		1: {
@@ -417,14 +422,14 @@ function x(e) {
 			names: "Декабря",
 			abc: "Дек"
 		}
-	}[t] ?? b;
+	}[t] ?? S;
 }
-function S(e, t) {
+function w(e, t) {
 	let n = t + "";
 	for (; n.length < e;) n = "0" + n;
 	return n;
 }
-function C(e, t) {
+function T(e, t) {
 	let n, r;
 	t === void 0 ? (r = String(e), n = /* @__PURE__ */ new Date()) : (r = t, n = new Date(e)), Number.isNaN(n.getTime()) && (n = /* @__PURE__ */ new Date());
 	let i = r, a = {
@@ -442,4 +447,4 @@ function C(e, t) {
 	return i;
 }
 //#endregion
-export { v as default };
+export { b as default };

package/dist/fields/Password.js

@@ -9,8 +9,8 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 function c() {
 	return /* @__PURE__ */ s("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		width: "1.25em",
-		height: "1.25em",
+		width: "20",
+		height: "20",
 		viewBox: "0 0 24 24",
 		fill: "none",
 		stroke: "currentColor",
@@ -28,8 +28,8 @@ function c() {
 function l() {
 	return /* @__PURE__ */ s("svg", {
 		xmlns: "http://www.w3.org/2000/svg",
-		width: "1.25em",
-		height: "1.25em",
+		width: "20",
+		height: "20",
 		viewBox: "0 0 24 24",
 		fill: "none",
 		stroke: "currentColor",
@@ -123,24 +123,12 @@ function u({ value: u, form: d, onValue: f, name: p = "", placeholder: m = "", l
 			}),
 			/* @__PURE__ */ o("button", {
 				type: "button",
+				className: e.affix,
 				tabIndex: v ? -1 : 0,
 				"aria-label": D ? "Скрыть пароль" : "Показать пароль",
 				"aria-pressed": D,
 				disabled: v,
 				onClick: () => !v && O(!D),
-				style: {
-					cursor: v ? "not-allowed" : "pointer",
-					alignSelf: "center",
-					display: "inline-flex",
-					alignItems: "center",
-					justifyContent: "center",
-					padding: 0,
-					margin: 0,
-					border: "none",
-					background: "transparent",
-					color: "var(--field-icon-color, var(--field-placeholder))",
-					font: "inherit"
-				},
 				children: D ? L : I
 			}),
 			x ? /* @__PURE__ */ o("span", {