prometeo-design-system 1.7.6 → 1.8.0

package/dist/OtpInput.es.js

@@ -1,176 +1,178 @@
-import { j as h } from "./jsx-runtime-ByW6EXIE.js";
-import { c as he } from "./cn-B6yFEsav.js";
-import * as t from "react";
-var Re = Object.defineProperty, De = Object.defineProperties, Te = Object.getOwnPropertyDescriptors, K = Object.getOwnPropertySymbols, ve = Object.prototype.hasOwnProperty, ge = Object.prototype.propertyIsEnumerable, me = (n, l, a) => l in n ? Re(n, l, { enumerable: !0, configurable: !0, writable: !0, value: a }) : n[l] = a, Ae = (n, l) => {
-  for (var a in l || (l = {})) ve.call(l, a) && me(n, a, l[a]);
-  if (K) for (var a of K(l)) ge.call(l, a) && me(n, a, l[a]);
-  return n;
-}, Oe = (n, l) => De(n, Te(l)), We = (n, l) => {
+import { j as p } from "./jsx-runtime-ByW6EXIE.js";
+import { Icons as ve } from "./Icons.es.js";
+import { c as L } from "./cn-B6yFEsav.js";
+import * as n from "react";
+import ge from "react";
+var De = Object.defineProperty, Te = Object.defineProperties, Oe = Object.getOwnPropertyDescriptors, te = Object.getOwnPropertySymbols, we = Object.prototype.hasOwnProperty, ye = Object.prototype.propertyIsEnumerable, xe = (t, r, a) => r in t ? De(t, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[r] = a, We = (t, r) => {
+  for (var a in r || (r = {})) we.call(r, a) && xe(t, a, r[a]);
+  if (te) for (var a of te(r)) ye.call(r, a) && xe(t, a, r[a]);
+  return t;
+}, Ae = (t, r) => Te(t, Oe(r)), Be = (t, r) => {
   var a = {};
-  for (var u in n) ve.call(n, u) && l.indexOf(u) < 0 && (a[u] = n[u]);
-  if (n != null && K) for (var u of K(n)) l.indexOf(u) < 0 && ge.call(n, u) && (a[u] = n[u]);
+  for (var u in t) we.call(t, u) && r.indexOf(u) < 0 && (a[u] = t[u]);
+  if (t != null && te) for (var u of te(t)) r.indexOf(u) < 0 && ye.call(t, u) && (a[u] = t[u]);
   return a;
 };
-function Be(n) {
-  let l = setTimeout(n, 0), a = setTimeout(n, 10), u = setTimeout(n, 50);
-  return [l, a, u];
+function _e(t) {
+  let r = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
+  return [r, a, u];
 }
-function Ne(n) {
-  let l = t.useRef();
-  return t.useEffect(() => {
-    l.current = n;
-  }), l.current;
+function Ie(t) {
+  let r = n.useRef();
+  return n.useEffect(() => {
+    r.current = t;
+  }), r.current;
 }
-var Ie = 18, be = 40, _e = `${be}px`, Fe = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
-function He({ containerRef: n, inputRef: l, pushPasswordManagerStrategy: a, isFocused: u }) {
-  let [E, d] = t.useState(!1), [T, y] = t.useState(!1), [k, A] = t.useState(!1), C = t.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && E && T, [E, T, a]), P = t.useCallback(() => {
-    let p = n.current, v = l.current;
-    if (!p || !v || k || a === "none") return;
-    let x = p, j = x.getBoundingClientRect().left + x.offsetWidth, _ = x.getBoundingClientRect().top + x.offsetHeight / 2, i = j - Ie, L = _;
-    document.querySelectorAll(Fe).length === 0 && document.elementFromPoint(i, L) === p || (d(!0), A(!0));
-  }, [n, l, k, a]);
-  return t.useEffect(() => {
-    let p = n.current;
-    if (!p || a === "none") return;
+var Fe = 18, Ee = 40, He = `${Ee}px`, Le = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function $e({ containerRef: t, inputRef: r, pushPasswordManagerStrategy: a, isFocused: u }) {
+  let [C, d] = n.useState(!1), [R, M] = n.useState(!1), [D, W] = n.useState(!1), A = n.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && C && R, [C, R, a]), x = n.useCallback(() => {
+    let f = t.current, v = r.current;
+    if (!f || !v || D || a === "none") return;
+    let m = f, b = m.getBoundingClientRect().left + m.offsetWidth, w = m.getBoundingClientRect().top + m.offsetHeight / 2, o = b - Fe, j = w;
+    document.querySelectorAll(Le).length === 0 && document.elementFromPoint(o, j) === f || (d(!0), W(!0));
+  }, [t, r, D, a]);
+  return n.useEffect(() => {
+    let f = t.current;
+    if (!f || a === "none") return;
     function v() {
-      let j = window.innerWidth - p.getBoundingClientRect().right;
-      y(j >= be);
+      let b = window.innerWidth - f.getBoundingClientRect().right;
+      M(b >= Ee);
     }
     v();
-    let x = setInterval(v, 1e3);
+    let m = setInterval(v, 1e3);
     return () => {
-      clearInterval(x);
+      clearInterval(m);
     };
-  }, [n, a]), t.useEffect(() => {
-    let p = u || document.activeElement === l.current;
-    if (a === "none" || !p) return;
-    let v = setTimeout(P, 0), x = setTimeout(P, 2e3), j = setTimeout(P, 5e3), _ = setTimeout(() => {
-      A(!0);
+  }, [t, a]), n.useEffect(() => {
+    let f = u || document.activeElement === r.current;
+    if (a === "none" || !f) return;
+    let v = setTimeout(x, 0), m = setTimeout(x, 2e3), b = setTimeout(x, 5e3), w = setTimeout(() => {
+      W(!0);
     }, 6e3);
     return () => {
-      clearTimeout(v), clearTimeout(x), clearTimeout(j), clearTimeout(_);
+      clearTimeout(v), clearTimeout(m), clearTimeout(b), clearTimeout(w);
     };
-  }, [l, u, a, P]), { hasPWMBadge: E, willPushPWMBadge: C, PWM_BADGE_SPACE_WIDTH: _e };
+  }, [r, u, a, x]), { hasPWMBadge: C, willPushPWMBadge: A, PWM_BADGE_SPACE_WIDTH: He };
 }
-var Le = t.createContext({}), xe = t.forwardRef((n, l) => {
-  var a = n, { value: u, onChange: E, maxLength: d, textAlign: T = "left", pattern: y, placeholder: k, inputMode: A = "numeric", onComplete: C, pushPasswordManagerStrategy: P = "increase-width", pasteTransformer: p, containerClassName: v, noScriptCSSFallback: x = $e, render: j, children: _ } = a, i = We(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), L, te, ne, re, le;
-  let [we, Ee] = t.useState(typeof i.defaultValue == "string" ? i.defaultValue : ""), s = u ?? we, O = Ne(s), $ = t.useCallback((e) => {
-    E?.(e), Ee(e);
-  }, [E]), S = t.useMemo(() => y ? typeof y == "string" ? new RegExp(y) : y : null, [y]), c = t.useRef(null), Q = t.useRef(null), U = t.useRef({ value: s, onChange: $, isIOS: typeof window < "u" && ((te = (L = window?.CSS) == null ? void 0 : L.supports) == null ? void 0 : te.call(L, "-webkit-touch-callout", "none")) }), Z = t.useRef({ prev: [(ne = c.current) == null ? void 0 : ne.selectionStart, (re = c.current) == null ? void 0 : re.selectionEnd, (le = c.current) == null ? void 0 : le.selectionDirection] });
-  t.useImperativeHandle(l, () => c.current, []), t.useEffect(() => {
-    let e = c.current, r = Q.current;
-    if (!e || !r) return;
-    U.current.value !== e.value && U.current.onChange(e.value), Z.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
-    function m() {
+var ze = n.createContext({}), Se = n.forwardRef((t, r) => {
+  var a = t, { value: u, onChange: C, maxLength: d, textAlign: R = "left", pattern: M, placeholder: D, inputMode: W = "numeric", onComplete: A, pushPasswordManagerStrategy: x = "increase-width", pasteTransformer: f, containerClassName: v, noScriptCSSFallback: m = Ge, render: b, children: w } = a, o = Be(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), j, k, $, V, X;
+  let [ne, q] = n.useState(typeof o.defaultValue == "string" ? o.defaultValue : ""), i = u ?? ne, B = Ie(i), Z = n.useCallback((e) => {
+    C?.(e), q(e);
+  }, [C]), P = n.useMemo(() => M ? typeof M == "string" ? new RegExp(M) : M : null, [M]), c = n.useRef(null), le = n.useRef(null), re = n.useRef({ value: i, onChange: Z, isIOS: typeof window < "u" && ((k = (j = window?.CSS) == null ? void 0 : j.supports) == null ? void 0 : k.call(j, "-webkit-touch-callout", "none")) }), Y = n.useRef({ prev: [($ = c.current) == null ? void 0 : $.selectionStart, (V = c.current) == null ? void 0 : V.selectionEnd, (X = c.current) == null ? void 0 : X.selectionDirection] });
+  n.useImperativeHandle(r, () => c.current, []), n.useEffect(() => {
+    let e = c.current, l = le.current;
+    if (!e || !l) return;
+    re.current.value !== e.value && re.current.onChange(e.value), Y.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
+    function h() {
       if (document.activeElement !== e) {
-        z(null), V(null);
+        K(null), Q(null);
         return;
       }
-      let o = e.selectionStart, f = e.selectionEnd, J = e.selectionDirection, w = e.maxLength, B = e.value, M = Z.current.prev, R = -1, D = -1, N;
-      if (B.length !== 0 && o !== null && f !== null) {
-        let je = o === f, Me = o === B.length && B.length < w;
-        if (je && !Me) {
-          let I = o;
-          if (I === 0) R = 0, D = 1, N = "forward";
-          else if (I === w) R = I - 1, D = I, N = "backward";
-          else if (w > 1 && B.length > 1) {
-            let ee = 0;
-            if (M[0] !== null && M[1] !== null) {
-              N = I < M[1] ? "backward" : "forward";
-              let ke = M[0] === M[1] && M[0] < w;
-              N === "backward" && !ke && (ee = -1);
+      let s = e.selectionStart, g = e.selectionEnd, ee = e.selectionDirection, S = e.maxLength, I = e.value, N = Y.current.prev, T = -1, O = -1, F;
+      if (I.length !== 0 && s !== null && g !== null) {
+        let ke = s === g, Ne = s === I.length && I.length < S;
+        if (ke && !Ne) {
+          let H = s;
+          if (H === 0) T = 0, O = 1, F = "forward";
+          else if (H === S) T = H - 1, O = H, F = "backward";
+          else if (S > 1 && I.length > 1) {
+            let ie = 0;
+            if (N[0] !== null && N[1] !== null) {
+              F = H < N[1] ? "backward" : "forward";
+              let Re = N[0] === N[1] && N[0] < S;
+              F === "backward" && !Re && (ie = -1);
             }
-            R = ee + I, D = ee + I + 1;
+            T = ie + H, O = ie + H + 1;
           }
         }
-        R !== -1 && D !== -1 && R !== D && c.current.setSelectionRange(R, D, N);
+        T !== -1 && O !== -1 && T !== O && c.current.setSelectionRange(T, O, F);
       }
-      let de = R !== -1 ? R : o, pe = D !== -1 ? D : f, Pe = N ?? J;
-      z(de), V(pe), Z.current.prev = [de, pe, Pe];
+      let me = T !== -1 ? T : s, he = O !== -1 ? O : g, Me = F ?? ee;
+      K(me), Q(he), Y.current.prev = [me, he, Me];
     }
-    if (document.addEventListener("selectionchange", m, { capture: !0 }), m(), document.activeElement === e && X(!0), !document.getElementById("input-otp-style")) {
-      let o = document.createElement("style");
-      if (o.id = "input-otp-style", document.head.appendChild(o), o.sheet) {
-        let f = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
-        q(o.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), q(o.sheet, `[data-input-otp]:autofill { ${f} }`), q(o.sheet, `[data-input-otp]:-webkit-autofill { ${f} }`), q(o.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), q(o.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+    if (document.addEventListener("selectionchange", h, { capture: !0 }), h(), document.activeElement === e && ae(!0), !document.getElementById("input-otp-style")) {
+      let s = document.createElement("style");
+      if (s.id = "input-otp-style", document.head.appendChild(s), s.sheet) {
+        let g = "background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;";
+        U(s.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), U(s.sheet, `[data-input-otp]:autofill { ${g} }`), U(s.sheet, `[data-input-otp]:-webkit-autofill { ${g} }`), U(s.sheet, "@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }"), U(s.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
       }
     }
-    let g = () => {
-      r && r.style.setProperty("--root-height", `${e.clientHeight}px`);
+    let y = () => {
+      l && l.style.setProperty("--root-height", `${e.clientHeight}px`);
     };
-    g();
-    let b = new ResizeObserver(g);
-    return b.observe(e), () => {
-      document.removeEventListener("selectionchange", m, { capture: !0 }), b.disconnect();
+    y();
+    let E = new ResizeObserver(y);
+    return E.observe(e), () => {
+      document.removeEventListener("selectionchange", h, { capture: !0 }), E.disconnect();
     };
   }, []);
-  let [ae, oe] = t.useState(!1), [G, X] = t.useState(!1), [W, z] = t.useState(null), [F, V] = t.useState(null);
-  t.useEffect(() => {
-    Be(() => {
-      var e, r, m, g;
+  let [se, ue] = n.useState(!1), [J, ae] = n.useState(!1), [_, K] = n.useState(null), [z, Q] = n.useState(null);
+  n.useEffect(() => {
+    _e(() => {
+      var e, l, h, y;
       (e = c.current) == null || e.dispatchEvent(new Event("input"));
-      let b = (r = c.current) == null ? void 0 : r.selectionStart, o = (m = c.current) == null ? void 0 : m.selectionEnd, f = (g = c.current) == null ? void 0 : g.selectionDirection;
-      b !== null && o !== null && (z(b), V(o), Z.current.prev = [b, o, f]);
+      let E = (l = c.current) == null ? void 0 : l.selectionStart, s = (h = c.current) == null ? void 0 : h.selectionEnd, g = (y = c.current) == null ? void 0 : y.selectionDirection;
+      E !== null && s !== null && (K(E), Q(s), Y.current.prev = [E, s, g]);
     });
-  }, [s, G]), t.useEffect(() => {
-    O !== void 0 && s !== O && O.length < d && s.length === d && C?.(s);
-  }, [d, C, O, s]);
-  let H = He({ containerRef: Q, inputRef: c, pushPasswordManagerStrategy: P, isFocused: G }), ie = t.useCallback((e) => {
-    let r = e.currentTarget.value.slice(0, d);
-    if (r.length > 0 && S && !S.test(r)) {
+  }, [i, J]), n.useEffect(() => {
+    B !== void 0 && i !== B && B.length < d && i.length === d && A?.(i);
+  }, [d, A, B, i]);
+  let G = $e({ containerRef: le, inputRef: c, pushPasswordManagerStrategy: x, isFocused: J }), ce = n.useCallback((e) => {
+    let l = e.currentTarget.value.slice(0, d);
+    if (l.length > 0 && P && !P.test(l)) {
       e.preventDefault();
       return;
     }
-    typeof O == "string" && r.length < O.length && document.dispatchEvent(new Event("selectionchange")), $(r);
-  }, [d, $, O, S]), ue = t.useCallback(() => {
+    typeof B == "string" && l.length < B.length && document.dispatchEvent(new Event("selectionchange")), Z(l);
+  }, [d, Z, B, P]), de = n.useCallback(() => {
     var e;
     if (c.current) {
-      let r = Math.min(c.current.value.length, d - 1), m = c.current.value.length;
-      (e = c.current) == null || e.setSelectionRange(r, m), z(r), V(m);
+      let l = Math.min(c.current.value.length, d - 1), h = c.current.value.length;
+      (e = c.current) == null || e.setSelectionRange(l, h), K(l), Q(h);
     }
-    X(!0);
-  }, [d]), se = t.useCallback((e) => {
-    var r, m;
-    let g = c.current;
-    if (!p && (!U.current.isIOS || !e.clipboardData || !g)) return;
-    let b = e.clipboardData.getData("text/plain"), o = p ? p(b) : b;
+    ae(!0);
+  }, [d]), fe = n.useCallback((e) => {
+    var l, h;
+    let y = c.current;
+    if (!f && (!re.current.isIOS || !e.clipboardData || !y)) return;
+    let E = e.clipboardData.getData("text/plain"), s = f ? f(E) : E;
     e.preventDefault();
-    let f = (r = c.current) == null ? void 0 : r.selectionStart, J = (m = c.current) == null ? void 0 : m.selectionEnd, w = (f !== J ? s.slice(0, f) + o + s.slice(J) : s.slice(0, f) + o + s.slice(f)).slice(0, d);
-    if (w.length > 0 && S && !S.test(w)) return;
-    g.value = w, $(w);
-    let B = Math.min(w.length, d - 1), M = w.length;
-    g.setSelectionRange(B, M), z(B), V(M);
-  }, [d, $, S, s]), Se = t.useMemo(() => ({ position: "relative", cursor: i.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [i.disabled]), ce = t.useMemo(() => ({ position: "absolute", inset: 0, width: H.willPushPWMBadge ? `calc(100% + ${H.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: H.willPushPWMBadge ? `inset(0 ${H.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: T, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [H.PWM_BADGE_SPACE_WIDTH, H.willPushPWMBadge, T]), ye = t.useMemo(() => t.createElement("input", Oe(Ae({ autoComplete: i.autoComplete || "one-time-code" }, i), { "data-input-otp": !0, "data-input-otp-placeholder-shown": s.length === 0 || void 0, "data-input-otp-mss": W, "data-input-otp-mse": F, inputMode: A, pattern: S?.source, "aria-placeholder": k, style: ce, maxLength: d, value: s, ref: c, onPaste: (e) => {
-    var r;
-    se(e), (r = i.onPaste) == null || r.call(i, e);
-  }, onChange: ie, onMouseOver: (e) => {
-    var r;
-    oe(!0), (r = i.onMouseOver) == null || r.call(i, e);
+    let g = (l = c.current) == null ? void 0 : l.selectionStart, ee = (h = c.current) == null ? void 0 : h.selectionEnd, S = (g !== ee ? i.slice(0, g) + s + i.slice(ee) : i.slice(0, g) + s + i.slice(g)).slice(0, d);
+    if (S.length > 0 && P && !P.test(S)) return;
+    y.value = S, Z(S);
+    let I = Math.min(S.length, d - 1), N = S.length;
+    y.setSelectionRange(I, N), K(I), Q(N);
+  }, [d, Z, P, i]), je = n.useMemo(() => ({ position: "relative", cursor: o.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [o.disabled]), pe = n.useMemo(() => ({ position: "absolute", inset: 0, width: G.willPushPWMBadge ? `calc(100% + ${G.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: G.willPushPWMBadge ? `inset(0 ${G.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: R, opacity: "1", color: "transparent", pointerEvents: "all", background: "transparent", caretColor: "transparent", border: "0 solid transparent", outline: "0 solid transparent", boxShadow: "none", lineHeight: "1", letterSpacing: "-.5em", fontSize: "var(--root-height)", fontFamily: "monospace", fontVariantNumeric: "tabular-nums" }), [G.PWM_BADGE_SPACE_WIDTH, G.willPushPWMBadge, R]), Pe = n.useMemo(() => n.createElement("input", Ae(We({ autoComplete: o.autoComplete || "one-time-code" }, o), { "data-input-otp": !0, "data-input-otp-placeholder-shown": i.length === 0 || void 0, "data-input-otp-mss": _, "data-input-otp-mse": z, inputMode: W, pattern: P?.source, "aria-placeholder": D, style: pe, maxLength: d, value: i, ref: c, onPaste: (e) => {
+    var l;
+    fe(e), (l = o.onPaste) == null || l.call(o, e);
+  }, onChange: ce, onMouseOver: (e) => {
+    var l;
+    ue(!0), (l = o.onMouseOver) == null || l.call(o, e);
   }, onMouseLeave: (e) => {
-    var r;
-    oe(!1), (r = i.onMouseLeave) == null || r.call(i, e);
+    var l;
+    ue(!1), (l = o.onMouseLeave) == null || l.call(o, e);
   }, onFocus: (e) => {
-    var r;
-    ue(), (r = i.onFocus) == null || r.call(i, e);
+    var l;
+    de(), (l = o.onFocus) == null || l.call(o, e);
   }, onBlur: (e) => {
-    var r;
-    X(!1), (r = i.onBlur) == null || r.call(i, e);
-  } })), [ie, ue, se, A, ce, d, F, W, i, S?.source, s]), Y = t.useMemo(() => ({ slots: Array.from({ length: d }).map((e, r) => {
-    var m;
-    let g = G && W !== null && F !== null && (W === F && r === W || r >= W && r < F), b = s[r] !== void 0 ? s[r] : null, o = s[0] !== void 0 ? null : (m = k?.[r]) != null ? m : null;
-    return { char: b, placeholderChar: o, isActive: g, hasFakeCaret: g && b === null };
-  }), isFocused: G, isHovering: !i.disabled && ae }), [G, ae, d, F, W, i.disabled, s]), Ce = t.useMemo(() => j ? j(Y) : t.createElement(Le.Provider, { value: Y }, _), [_, Y, j]);
-  return t.createElement(t.Fragment, null, x !== null && t.createElement("noscript", null, t.createElement("style", null, x)), t.createElement("div", { ref: Q, "data-input-otp-container": !0, style: Se, className: v }, Ce, t.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, ye)));
+    var l;
+    ae(!1), (l = o.onBlur) == null || l.call(o, e);
+  } })), [ce, de, fe, W, pe, d, z, _, o, P?.source, i]), oe = n.useMemo(() => ({ slots: Array.from({ length: d }).map((e, l) => {
+    var h;
+    let y = J && _ !== null && z !== null && (_ === z && l === _ || l >= _ && l < z), E = i[l] !== void 0 ? i[l] : null, s = i[0] !== void 0 ? null : (h = D?.[l]) != null ? h : null;
+    return { char: E, placeholderChar: s, isActive: y, hasFakeCaret: y && E === null };
+  }), isFocused: J, isHovering: !o.disabled && se }), [J, se, d, z, _, o.disabled, i]), Ce = n.useMemo(() => b ? b(oe) : n.createElement(ze.Provider, { value: oe }, w), [w, oe, b]);
+  return n.createElement(n.Fragment, null, m !== null && n.createElement("noscript", null, n.createElement("style", null, m)), n.createElement("div", { ref: le, "data-input-otp-container": !0, style: je, className: v }, Ce, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Pe)));
 });
-xe.displayName = "Input";
-function q(n, l) {
+Se.displayName = "Input";
+function U(t, r) {
   try {
-    n.insertRule(l);
+    t.insertRule(r);
   } catch {
-    console.error("input-otp could not insert CSS rule:", l);
+    console.error("input-otp could not insert CSS rule:", r);
   }
 }
-var $e = `
+var Ge = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -190,55 +192,105 @@ var $e = `
     --nojs-fg: white !important;
   }
 }`;
-const Ve = ({
-  value: n = "",
-  onChange: l,
-  onComplete: a,
-  maxLength: u = 6,
-  placeholder: E = "•",
-  disabled: d = !1,
-  className: T,
-  autoFocus: y = !1,
-  pasteTransformer: k,
-  errorComponent: A,
-  hasError: C
-}) => /* @__PURE__ */ h.jsx(
-  xe,
-  {
-    value: n,
-    autoFocus: y,
-    onChange: l,
-    onComplete: a,
-    maxLength: u,
-    disabled: d,
-    pasteTransformer: k,
-    containerClassName: he("group flex items-center has-[:disabled]:opacity-30", T),
-    render: ({ slots: P }) => /* @__PURE__ */ h.jsxs("div", { className: "flex flex-col items-center", children: [
-      /* @__PURE__ */ h.jsxs("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ h.jsx("div", { className: "flex", children: P.slice(0, 3).map((p, v) => /* @__PURE__ */ h.jsx(fe, { ...p, placeholder: E, hasError: C }, v)) }),
-        /* @__PURE__ */ h.jsx("hr", { className: "w-2 h-1 mx-2 border-neutral-default-default" }),
-        /* @__PURE__ */ h.jsx("div", { className: "flex", children: P.slice(3).map((p, v) => /* @__PURE__ */ h.jsx(fe, { ...p, placeholder: E, hasError: C }, v)) })
-      ] }),
-      C && /* @__PURE__ */ h.jsx("span", { className: "text-error-default-default text-xs mt-1", children: A })
-    ] })
-  }
-), fe = (n) => /* @__PURE__ */ h.jsxs(
-  "div",
-  {
-    className: he(
-      "relative w-14 h-14 text-[1.2rem] text-white",
-      "flex items-center justify-center",
-      "transition-all duration-300",
-      "border-2 border-neutral-default-default rounded-md mx-1",
-      { "border-2 border-primary-default-default": n.isActive },
-      n.hasError && "border-error-default-default"
-    ),
-    children: [
-      /* @__PURE__ */ h.jsx("div", { className: "group-has-[input[data-input-otp-placeholder-shown]]:opacity-20", children: n.char ?? n.placeholder }),
-      n.hasFakeCaret && /* @__PURE__ */ h.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ h.jsx("div", { className: "w-3 h-1 rounded-full bg-neutral-default-default animate-pulse" }) })
-    ]
-  }
-);
+const Ke = ({
+  value: t = "",
+  name: r,
+  onChange: a,
+  onComplete: u,
+  onBlur: C,
+  maxLength: d = 6,
+  placeholder: R = "•",
+  disabled: M = !1,
+  className: D,
+  autoFocus: W = !1,
+  pasteTransformer: A,
+  errorComponent: x,
+  hasError: f,
+  helperComponent: v,
+  helperAlignment: m = "left",
+  slotClassName: b,
+  variant: w = "default",
+  hideSlotsMiddleSeparator: o = !1
+}) => {
+  const j = m === "left" ? "justify-start w-full text-left" : m === "center" ? "justify-center" : "justify-end text-right w-full", k = {
+    default: {
+      text: "text-neutral-default-default",
+      icon: null
+    },
+    error: {
+      text: "text-error-default-default",
+      icon: /* @__PURE__ */ p.jsx(ve.Error, { size: 18, className: "text-error-default-default" })
+    },
+    success: {
+      text: "text-success-default-default",
+      icon: /* @__PURE__ */ p.jsx(ve.Check, { size: 18, className: "text-success-default-default" })
+    }
+  };
+  return /* @__PURE__ */ p.jsx(
+    Se,
+    {
+      value: t,
+      name: r,
+      autoFocus: W,
+      onChange: a,
+      onComplete: u,
+      onBlur: C,
+      maxLength: d,
+      disabled: M,
+      pasteTransformer: A,
+      spellCheck: !1,
+      containerClassName: L("group flex items-center has-[:disabled]:opacity-30 w-max justify-center", D),
+      render: ({ slots: $ }) => {
+        const V = Math.floor($.length / 2), X = $.slice(0, V), ne = $.slice(V);
+        return /* @__PURE__ */ p.jsxs("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ p.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: X.map((q, i) => /* @__PURE__ */ p.jsx(be, { ...q, placeholder: R, hasError: f, className: b, variant: w }, i)) }),
+            /* @__PURE__ */ p.jsx("hr", { className: L("w-2 h-1 mx-2 border-neutral-default-default", o && "hidden") }),
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: ne.map((q, i) => /* @__PURE__ */ p.jsx(be, { ...q, placeholder: R, hasError: f, variant: w, className: b }, i)) })
+          ] }),
+          f && x && (typeof x == "string" ? /* @__PURE__ */ p.jsxs("span", { className: L("text-error-default-default text-xs mt-1 flex items-center gap-1", j, k.error.text), children: [
+            k.error.icon,
+            x
+          ] }) : ge.cloneElement(x, { className: L(
+            "text-error-default-default text-xs mt-1",
+            j,
+            k.error.text,
+            x?.props?.className
+          ) })),
+          v && m && (typeof v == "string" ? /* @__PURE__ */ p.jsxs("span", { className: L("text-neutral-medium-default text-xs mt-1 flex items-center gap-1", k[w].text, j), children: [
+            k[w].icon,
+            v
+          ] }) : ge.cloneElement(v, { className: L("text-neutral-medium-default text-xs mt-1", j, k[w].text, v?.props?.className) }))
+        ] });
+      }
+    }
+  );
+}, be = (t) => {
+  const r = {
+    default: "border-neutral-default-default",
+    error: "border-error-default-default",
+    success: "border-success-default-default"
+  };
+  return /* @__PURE__ */ p.jsxs(
+    "div",
+    {
+      className: L(
+        "relative w-14 h-14 text-[1.2rem] text-white",
+        "flex items-center justify-center",
+        "transition-all duration-300",
+        "border-2 border-neutral-default-default rounded-md mx-1",
+        { "border-2 border-primary-default-default": t.isActive },
+        r[t.variant || "default"],
+        t.className,
+        t.hasError && r.error
+      ),
+      children: [
+        /* @__PURE__ */ p.jsx("div", { className: "group-has-[input[data-input-otp-placeholder-shown]]:opacity-20", children: t.char ?? t.placeholder }),
+        t.hasFakeCaret && /* @__PURE__ */ p.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ p.jsx("div", { className: "w-3 h-1 rounded-full bg-neutral-default-default animate-pulse" }) })
+      ]
+    }
+  );
+};
 export {
-  Ve as default
+  Ke as default
 };