@spear-ai/spectral 1.3.61 → 1.3.63

package/dist/InputOTP.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsx as P, jsxs as it } from "react/jsx-runtime";
+import { jsx as k, jsxs as vt } from "react/jsx-runtime";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
@@ -31,6 +31,7 @@ import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
+import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
 import { MinusIcon as _t } from "./Icons/MinusIcon.js";
 import "./Icons/OntologyIcon.js";
@@ -48,102 +49,102 @@ import "./Icons/WarningIcon.js";
 import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
-import { useFormFieldId as Ht, ErrorMessage as Gt, getErrorMessageId as $t } from "./utils/formFieldUtils.js";
-import { c as yt } from "./twUtils-CRiPKpXj.js";
+import { useFormFieldId as Ht, ErrorMessage as Gt, getErrorMessageId as Lt } from "./utils/formFieldUtils.js";
+import { cn as gt } from "./utils/twUtils.js";
 import * as n from "react";
-import { createContext as Et, forwardRef as et, Fragment as Lt, useContext as Pt } from "react";
-var zt = Object.defineProperty, Vt = Object.defineProperties, qt = Object.getOwnPropertyDescriptors, tt = Object.getOwnPropertySymbols, St = Object.prototype.hasOwnProperty, xt = Object.prototype.propertyIsEnumerable, wt = (t, r, a) => r in t ? zt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[r] = a, Zt = (t, r) => {
-  for (var a in r || (r = {})) St.call(r, a) && wt(t, a, r[a]);
-  if (tt) for (var a of tt(r)) xt.call(r, a) && wt(t, a, r[a]);
+import { createContext as ht, forwardRef as Q, useContext as bt } from "react";
+var zt = Object.defineProperty, $t = Object.defineProperties, Vt = Object.getOwnPropertyDescriptors, K = Object.getOwnPropertySymbols, wt = Object.prototype.hasOwnProperty, yt = Object.prototype.propertyIsEnumerable, ft = (t, r, a) => r in t ? zt(t, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[r] = a, qt = (t, r) => {
+  for (var a in r || (r = {})) wt.call(r, a) && ft(t, a, r[a]);
+  if (K) for (var a of K(r)) yt.call(r, a) && ft(t, a, r[a]);
   return t;
-}, Jt = (t, r) => Vt(t, qt(r)), Kt = (t, r) => {
+}, Zt = (t, r) => $t(t, Vt(r)), Jt = (t, r) => {
   var a = {};
-  for (var u in t) St.call(t, u) && r.indexOf(u) < 0 && (a[u] = t[u]);
-  if (t != null && tt) for (var u of tt(t)) r.indexOf(u) < 0 && xt.call(t, u) && (a[u] = t[u]);
+  for (var u in t) wt.call(t, u) && r.indexOf(u) < 0 && (a[u] = t[u]);
+  if (t != null && K) for (var u of K(t)) r.indexOf(u) < 0 && yt.call(t, u) && (a[u] = t[u]);
   return a;
 };
-function Qt(t) {
+function Kt(t) {
   let r = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
   return [r, a, u];
 }
-function Ut(t) {
+function Qt(t) {
   let r = n.useRef();
   return n.useEffect(() => {
     r.current = t;
   }), r.current;
 }
-var Xt = 18, Ct = 40, Yt = `${Ct}px`, te = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
-function ee({ containerRef: t, inputRef: r, pushPasswordManagerStrategy: a, isFocused: u }) {
-  let [h, s] = n.useState(!1), [w, d] = n.useState(!1), [R, S] = n.useState(!1), D = n.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && h && w, [h, w, a]), T = n.useCallback(() => {
-    let f = t.current, g = r.current;
-    if (!f || !g || R || a === "none") return;
-    let v = f, x = v.getBoundingClientRect().left + v.offsetWidth, O = v.getBoundingClientRect().top + v.offsetHeight / 2, l = x - Xt, W = O;
-    document.querySelectorAll(te).length === 0 && document.elementFromPoint(l, W) === f || (s(!0), S(!0));
-  }, [t, r, R, a]);
+var Ut = 18, Et = 40, Xt = `${Et}px`, Yt = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function te({ containerRef: t, inputRef: r, pushPasswordManagerStrategy: a, isFocused: u }) {
+  let [v, s] = n.useState(!1), [b, d] = n.useState(!1), [T, S] = n.useState(!1), A = n.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && v && b, [v, b, a]), R = n.useCallback(() => {
+    let f = t.current, x = r.current;
+    if (!f || !x || T || a === "none") return;
+    let g = f, w = g.getBoundingClientRect().left + g.offsetWidth, O = g.getBoundingClientRect().top + g.offsetHeight / 2, l = w - Ut, I = O;
+    document.querySelectorAll(Yt).length === 0 && document.elementFromPoint(l, I) === f || (s(!0), S(!0));
+  }, [t, r, T, a]);
   return n.useEffect(() => {
     let f = t.current;
     if (!f || a === "none") return;
-    function g() {
-      let x = window.innerWidth - f.getBoundingClientRect().right;
-      d(x >= Ct);
+    function x() {
+      let w = window.innerWidth - f.getBoundingClientRect().right;
+      d(w >= Et);
     }
-    g();
-    let v = setInterval(g, 1e3);
+    x();
+    let g = setInterval(x, 1e3);
     return () => {
-      clearInterval(v);
+      clearInterval(g);
     };
   }, [t, a]), n.useEffect(() => {
     let f = u || document.activeElement === r.current;
     if (a === "none" || !f) return;
-    let g = setTimeout(T, 0), v = setTimeout(T, 2e3), x = setTimeout(T, 5e3), O = setTimeout(() => {
+    let x = setTimeout(R, 0), g = setTimeout(R, 2e3), w = setTimeout(R, 5e3), O = setTimeout(() => {
       S(!0);
     }, 6e3);
     return () => {
-      clearTimeout(g), clearTimeout(v), clearTimeout(x), clearTimeout(O);
+      clearTimeout(x), clearTimeout(g), clearTimeout(w), clearTimeout(O);
     };
-  }, [r, u, a, T]), { hasPWMBadge: h, willPushPWMBadge: D, PWM_BADGE_SPACE_WIDTH: Yt };
+  }, [r, u, a, R]), { hasPWMBadge: v, willPushPWMBadge: A, PWM_BADGE_SPACE_WIDTH: Xt };
 }
-var ne = n.createContext({}), Mt = n.forwardRef((t, r) => {
-  var a = t, { value: u, onChange: h, maxLength: s, textAlign: w = "left", pattern: d, placeholder: R, inputMode: S = "numeric", onComplete: D, pushPasswordManagerStrategy: T = "increase-width", pasteTransformer: f, containerClassName: g, noScriptCSSFallback: v = re, render: x, children: O } = a, l = Kt(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), W, Q, U, B, I;
-  let [z, It] = n.useState(typeof l.defaultValue == "string" ? l.defaultValue : ""), c = u ?? z, F = Ut(c), V = n.useCallback((e) => {
-    h?.(e), It(e);
-  }, [h]), M = n.useMemo(() => d ? typeof d == "string" ? new RegExp(d) : d : null, [d]), p = n.useRef(null), nt = n.useRef(null), rt = n.useRef({ value: c, onChange: V, isIOS: typeof window < "u" && ((Q = (W = window?.CSS) == null ? void 0 : W.supports) == null ? void 0 : Q.call(W, "-webkit-touch-callout", "none")) }), X = n.useRef({ prev: [(U = p.current) == null ? void 0 : U.selectionStart, (B = p.current) == null ? void 0 : B.selectionEnd, (I = p.current) == null ? void 0 : I.selectionDirection] });
+var ee = n.createContext({}), St = n.forwardRef((t, r) => {
+  var a = t, { value: u, onChange: v, maxLength: s, textAlign: b = "left", pattern: d, placeholder: T, inputMode: S = "numeric", onComplete: A, pushPasswordManagerStrategy: R = "increase-width", pasteTransformer: f, containerClassName: x, noScriptCSSFallback: g = ne, render: w, children: O } = a, l = Jt(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), I, nt, rt, ot, at;
+  let [Ot, It] = n.useState(typeof l.defaultValue == "string" ? l.defaultValue : ""), c = u ?? Ot, W = Qt(c), L = n.useCallback((e) => {
+    v?.(e), It(e);
+  }, [v]), C = n.useMemo(() => d ? typeof d == "string" ? new RegExp(d) : d : null, [d]), p = n.useRef(null), U = n.useRef(null), X = n.useRef({ value: c, onChange: L, isIOS: typeof window < "u" && ((nt = (I = window?.CSS) == null ? void 0 : I.supports) == null ? void 0 : nt.call(I, "-webkit-touch-callout", "none")) }), Z = n.useRef({ prev: [(rt = p.current) == null ? void 0 : rt.selectionStart, (ot = p.current) == null ? void 0 : ot.selectionEnd, (at = p.current) == null ? void 0 : at.selectionDirection] });
   n.useImperativeHandle(r, () => p.current, []), n.useEffect(() => {
-    let e = p.current, o = nt.current;
+    let e = p.current, o = U.current;
     if (!e || !o) return;
-    rt.current.value !== e.value && rt.current.onChange(e.value), X.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
+    X.current.value !== e.value && X.current.onChange(e.value), Z.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
     function m() {
       if (document.activeElement !== e) {
-        Z(null), J(null);
+        $(null), V(null);
         return;
       }
-      let i = e.selectionStart, b = e.selectionEnd, Y = e.selectionDirection, C = e.maxLength, _ = e.value, k = X.current.prev, A = -1, j = -1, H;
-      if (_.length !== 0 && i !== null && b !== null) {
-        let Bt = i === b, Ft = i === _.length && _.length < C;
+      let i = e.selectionStart, h = e.selectionEnd, J = e.selectionDirection, P = e.maxLength, F = e.value, M = Z.current.prev, j = -1, D = -1, N;
+      if (F.length !== 0 && i !== null && h !== null) {
+        let Bt = i === h, Ft = i === F.length && F.length < P;
         if (Bt && !Ft) {
-          let G = i;
-          if (G === 0) A = 0, j = 1, H = "forward";
-          else if (G === C) A = G - 1, j = G, H = "backward";
-          else if (C > 1 && _.length > 1) {
-            let lt = 0;
-            if (k[0] !== null && k[1] !== null) {
-              H = G < k[1] ? "backward" : "forward";
-              let Nt = k[0] === k[1] && k[0] < C;
-              H === "backward" && !Nt && (lt = -1);
+          let _ = i;
+          if (_ === 0) j = 0, D = 1, N = "forward";
+          else if (_ === P) j = _ - 1, D = _, N = "backward";
+          else if (P > 1 && F.length > 1) {
+            let et = 0;
+            if (M[0] !== null && M[1] !== null) {
+              N = _ < M[1] ? "backward" : "forward";
+              let Nt = M[0] === M[1] && M[0] < P;
+              N === "backward" && !Nt && (et = -1);
             }
-            A = lt + G, j = lt + G + 1;
+            j = et + _, D = et + _ + 1;
           }
         }
-        A !== -1 && j !== -1 && A !== j && p.current.setSelectionRange(A, j, H);
+        j !== -1 && D !== -1 && j !== D && p.current.setSelectionRange(j, D, N);
       }
-      let gt = A !== -1 ? A : i, bt = j !== -1 ? j : b, Wt = H ?? Y;
-      Z(gt), J(bt), X.current.prev = [gt, bt, Wt];
+      let dt = j !== -1 ? j : i, mt = D !== -1 ? D : h, Wt = N ?? J;
+      $(dt), V(mt), Z.current.prev = [dt, mt, Wt];
     }
-    if (document.addEventListener("selectionchange", m, { capture: !0 }), m(), document.activeElement === e && ot(!0), !document.getElementById("input-otp-style")) {
+    if (document.addEventListener("selectionchange", m, { capture: !0 }), m(), document.activeElement === e && Y(!0), !document.getElementById("input-otp-style")) {
       let i = document.createElement("style");
       if (i.id = "input-otp-style", document.head.appendChild(i), i.sheet) {
-        let b = "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;";
-        K(i.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), K(i.sheet, `[data-input-otp]:autofill { ${b} }`), K(i.sheet, `[data-input-otp]:-webkit-autofill { ${b} }`), K(i.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; } }"), K(i.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+        let h = "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(i.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), q(i.sheet, `[data-input-otp]:autofill { ${h} }`), q(i.sheet, `[data-input-otp]:-webkit-autofill { ${h} }`), q(i.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(i.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
       }
     }
     let y = () => {
@@ -155,73 +156,73 @@ var ne = n.createContext({}), Mt = n.forwardRef((t, r) => {
       document.removeEventListener("selectionchange", m, { capture: !0 }), E.disconnect();
     };
   }, []);
-  let [pt, dt] = n.useState(!1), [q, ot] = n.useState(!1), [N, Z] = n.useState(null), [$, J] = n.useState(null);
+  let [lt, it] = n.useState(!1), [z, Y] = n.useState(!1), [B, $] = n.useState(null), [H, V] = n.useState(null);
   n.useEffect(() => {
-    Qt(() => {
+    Kt(() => {
       var e, o, m, y;
       (e = p.current) == null || e.dispatchEvent(new Event("input"));
-      let E = (o = p.current) == null ? void 0 : o.selectionStart, i = (m = p.current) == null ? void 0 : m.selectionEnd, b = (y = p.current) == null ? void 0 : y.selectionDirection;
-      E !== null && i !== null && (Z(E), J(i), X.current.prev = [E, i, b]);
+      let E = (o = p.current) == null ? void 0 : o.selectionStart, i = (m = p.current) == null ? void 0 : m.selectionEnd, h = (y = p.current) == null ? void 0 : y.selectionDirection;
+      E !== null && i !== null && ($(E), V(i), Z.current.prev = [E, i, h]);
     });
-  }, [c, q]), n.useEffect(() => {
-    F !== void 0 && c !== F && F.length < s && c.length === s && D?.(c);
-  }, [s, D, F, c]);
-  let L = ee({ containerRef: nt, inputRef: p, pushPasswordManagerStrategy: T, isFocused: q }), mt = n.useCallback((e) => {
+  }, [c, z]), n.useEffect(() => {
+    W !== void 0 && c !== W && W.length < s && c.length === s && A?.(c);
+  }, [s, A, W, c]);
+  let G = te({ containerRef: U, inputRef: p, pushPasswordManagerStrategy: R, isFocused: z }), ut = n.useCallback((e) => {
     let o = e.currentTarget.value.slice(0, s);
-    if (o.length > 0 && M && !M.test(o)) {
+    if (o.length > 0 && C && !C.test(o)) {
       e.preventDefault();
       return;
     }
-    typeof F == "string" && o.length < F.length && document.dispatchEvent(new Event("selectionchange")), V(o);
-  }, [s, V, F, M]), ft = n.useCallback(() => {
+    typeof W == "string" && o.length < W.length && document.dispatchEvent(new Event("selectionchange")), L(o);
+  }, [s, L, W, C]), st = n.useCallback(() => {
     var e;
     if (p.current) {
       let o = Math.min(p.current.value.length, s - 1), m = p.current.value.length;
-      (e = p.current) == null || e.setSelectionRange(o, m), Z(o), J(m);
+      (e = p.current) == null || e.setSelectionRange(o, m), $(o), V(m);
     }
-    ot(!0);
-  }, [s]), vt = n.useCallback((e) => {
+    Y(!0);
+  }, [s]), ct = n.useCallback((e) => {
     var o, m;
     let y = p.current;
-    if (!f && (!rt.current.isIOS || !e.clipboardData || !y)) return;
+    if (!f && (!X.current.isIOS || !e.clipboardData || !y)) return;
     let E = e.clipboardData.getData("text/plain"), i = f ? f(E) : E;
     e.preventDefault();
-    let b = (o = p.current) == null ? void 0 : o.selectionStart, Y = (m = p.current) == null ? void 0 : m.selectionEnd, C = (b !== Y ? c.slice(0, b) + i + c.slice(Y) : c.slice(0, b) + i + c.slice(b)).slice(0, s);
-    if (C.length > 0 && M && !M.test(C)) return;
-    y.value = C, V(C);
-    let _ = Math.min(C.length, s - 1), k = C.length;
-    y.setSelectionRange(_, k), Z(_), J(k);
-  }, [s, V, M, c]), At = n.useMemo(() => ({ position: "relative", cursor: l.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [l.disabled]), ht = n.useMemo(() => ({ position: "absolute", inset: 0, width: L.willPushPWMBadge ? `calc(100% + ${L.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: L.willPushPWMBadge ? `inset(0 ${L.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: w, 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" }), [L.PWM_BADGE_SPACE_WIDTH, L.willPushPWMBadge, w]), jt = n.useMemo(() => n.createElement("input", Jt(Zt({ autoComplete: l.autoComplete || "one-time-code" }, l), { "data-input-otp": !0, "data-input-otp-placeholder-shown": c.length === 0 || void 0, "data-input-otp-mss": N, "data-input-otp-mse": $, inputMode: S, pattern: M?.source, "aria-placeholder": R, style: ht, maxLength: s, value: c, ref: p, onPaste: (e) => {
+    let h = (o = p.current) == null ? void 0 : o.selectionStart, J = (m = p.current) == null ? void 0 : m.selectionEnd, P = (h !== J ? c.slice(0, h) + i + c.slice(J) : c.slice(0, h) + i + c.slice(h)).slice(0, s);
+    if (P.length > 0 && C && !C.test(P)) return;
+    y.value = P, L(P);
+    let F = Math.min(P.length, s - 1), M = P.length;
+    y.setSelectionRange(F, M), $(F), V(M);
+  }, [s, L, C, c]), jt = n.useMemo(() => ({ position: "relative", cursor: l.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [l.disabled]), pt = 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: b, 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, b]), Dt = n.useMemo(() => n.createElement("input", Zt(qt({ autoComplete: l.autoComplete || "one-time-code" }, l), { "data-input-otp": !0, "data-input-otp-placeholder-shown": c.length === 0 || void 0, "data-input-otp-mss": B, "data-input-otp-mse": H, inputMode: S, pattern: C?.source, "aria-placeholder": T, style: pt, maxLength: s, value: c, ref: p, onPaste: (e) => {
     var o;
-    vt(e), (o = l.onPaste) == null || o.call(l, e);
-  }, onChange: mt, onMouseOver: (e) => {
+    ct(e), (o = l.onPaste) == null || o.call(l, e);
+  }, onChange: ut, onMouseOver: (e) => {
     var o;
-    dt(!0), (o = l.onMouseOver) == null || o.call(l, e);
+    it(!0), (o = l.onMouseOver) == null || o.call(l, e);
   }, onMouseLeave: (e) => {
     var o;
-    dt(!1), (o = l.onMouseLeave) == null || o.call(l, e);
+    it(!1), (o = l.onMouseLeave) == null || o.call(l, e);
   }, onFocus: (e) => {
     var o;
-    ft(), (o = l.onFocus) == null || o.call(l, e);
+    st(), (o = l.onFocus) == null || o.call(l, e);
   }, onBlur: (e) => {
     var o;
-    ot(!1), (o = l.onBlur) == null || o.call(l, e);
-  } })), [mt, ft, vt, S, ht, s, $, N, l, M?.source, c]), at = n.useMemo(() => ({ slots: Array.from({ length: s }).map((e, o) => {
+    Y(!1), (o = l.onBlur) == null || o.call(l, e);
+  } })), [ut, st, ct, S, pt, s, H, B, l, C?.source, c]), tt = n.useMemo(() => ({ slots: Array.from({ length: s }).map((e, o) => {
     var m;
-    let y = q && N !== null && $ !== null && (N === $ && o === N || o >= N && o < $), E = c[o] !== void 0 ? c[o] : null, i = c[0] !== void 0 ? null : (m = R?.[o]) != null ? m : null;
+    let y = z && B !== null && H !== null && (B === H && o === B || o >= B && o < H), E = c[o] !== void 0 ? c[o] : null, i = c[0] !== void 0 ? null : (m = T?.[o]) != null ? m : null;
     return { char: E, placeholderChar: i, isActive: y, hasFakeCaret: y && E === null };
-  }), isFocused: q, isHovering: !l.disabled && pt }), [q, pt, s, $, N, l.disabled, c]), Dt = n.useMemo(() => x ? x(at) : n.createElement(ne.Provider, { value: at }, O), [O, at, x]);
-  return n.createElement(n.Fragment, null, v !== null && n.createElement("noscript", null, n.createElement("style", null, v)), n.createElement("div", { ref: nt, "data-input-otp-container": !0, style: At, className: g }, Dt, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, jt)));
+  }), isFocused: z, isHovering: !l.disabled && lt }), [z, lt, s, H, B, l.disabled, c]), At = n.useMemo(() => w ? w(tt) : n.createElement(ee.Provider, { value: tt }, O), [O, tt, w]);
+  return n.createElement(n.Fragment, null, g !== null && n.createElement("noscript", null, n.createElement("style", null, g)), n.createElement("div", { ref: U, "data-input-otp-container": !0, style: jt, className: x }, At, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Dt)));
 });
-Mt.displayName = "Input";
-function K(t, r) {
+St.displayName = "Input";
+function q(t, r) {
   try {
     t.insertRule(r);
   } catch {
     console.error("input-otp could not insert CSS rule:", r);
   }
 }
-var re = `
+var ne = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -241,42 +242,40 @@ var re = `
     --nojs-fg: white !important;
   }
 }`;
-const kt = Et({}), Rt = Et(null), Tt = () => {
-  const t = Pt(Rt);
+const Pt = ht({}), xt = ht(null), Ct = () => {
+  const t = bt(xt);
   if (!t)
     throw new Error("useRoot must be used within an InputOTP");
   return t;
-}, Ot = et(
+}, Mt = Q(
   ({
     autoFocus: t = !1,
     children: r,
     className: a,
     errorMessage: u,
-    hasError: h,
+    hasError: v,
     id: s,
-    inputMode: w = "numeric",
+    inputMode: b = "numeric",
     maxLength: d,
-    name: R,
+    name: T,
     onChange: S,
-    onComplete: D,
-    value: T,
+    onComplete: A,
+    value: R,
     variant: f = "outlined",
-    groupSize: g,
-    separatorPositions: v,
     ...x
-  }, O) => {
-    const l = Ht(s, R), W = (B) => {
-      const I = B.clipboardData.getData("text/plain").trim();
+  }, g) => {
+    const w = Ht(s, T), O = (l) => {
+      const I = l.clipboardData.getData("text/plain").trim();
       I.length === d && typeof S == "function" && (S(""), setTimeout(() => {
         typeof S == "function" && S(I);
       }, 0));
-    }, Q = v ?? (g ? Array.from({ length: Math.ceil(d / g) - 1 }, (B, I) => (I + 1) * g) : []), U = g !== void 0 || v !== void 0;
-    return /* @__PURE__ */ P(kt.Provider, { value: { hasError: h }, children: /* @__PURE__ */ it("div", { className: "flex w-max flex-col gap-y-1", children: [
-      /* @__PURE__ */ P(
-        Mt,
+    };
+    return /* @__PURE__ */ k(Pt.Provider, { value: { hasError: v }, children: /* @__PURE__ */ vt("div", { className: "flex w-max flex-col gap-y-1", children: [
+      /* @__PURE__ */ k(
+        St,
         {
           autoFocus: t,
-          containerClassName: yt(
+          containerClassName: gt(
             "flex items-center gap-2 has-[:disabled]:opacity-50 disabled:cursor-not-allowed",
             a
           ),
@@ -285,29 +284,26 @@ const kt = Et({}), Rt = Et(null), Tt = () => {
           "data-lpignore": "true",
           "data-protonpass-ignore": "true",
           "data-testid": "input-otp",
-          id: l,
-          inputMode: w,
+          id: w,
+          inputMode: b,
           maxLength: d,
           onChange: S,
-          onComplete: D,
-          onPaste: W,
+          onComplete: A,
+          onPaste: O,
           pushPasswordManagerStrategy: "none",
-          ref: O,
+          ref: g,
           textAlign: "center",
-          value: T,
+          value: R,
           ...x,
-          render: ({ slots: B }) => /* @__PURE__ */ P(Rt.Provider, { value: { slots: B, variant: f }, children: U ? /* @__PURE__ */ P(ut, { children: [...Array(d)].map((I, z) => /* @__PURE__ */ it(Lt, { children: [
-            Q.includes(z) && /* @__PURE__ */ P(ct, {}),
-            /* @__PURE__ */ P(st, { index: z })
-          ] }, z)) }) : r })
+          render: ({ slots: l }) => /* @__PURE__ */ k(xt.Provider, { value: { slots: l, variant: f }, children: r })
         }
       ),
-      h && u && /* @__PURE__ */ P(Gt, { id: $t(l), message: u })
+      v && u && /* @__PURE__ */ k(Gt, { id: Lt(w), message: u })
     ] }) });
   }
 );
-Ot.displayName = "InputOTP";
-const ut = et(({ ...t }, r) => /* @__PURE__ */ P(
+Mt.displayName = "InputOTP";
+const kt = Q(({ ...t }, r) => /* @__PURE__ */ k(
   "div",
   {
     ref: r,
@@ -316,39 +312,39 @@ const ut = et(({ ...t }, r) => /* @__PURE__ */ P(
     "data-testid": "input-otp-group"
   }
 ));
-ut.displayName = "InputOTP.Group";
-const st = et(
+kt.displayName = "InputOTP.Group";
+const Tt = Q(
   ({ index: t, className: r, ...a }, u) => {
-    const { variant: h = "outlined", slots: s = [] } = Tt(), { hasError: w } = Pt(kt), d = s[t] || { char: "", hasFakeCaret: !0, isActive: !1 };
-    return /* @__PURE__ */ it(
+    const { variant: v = "outlined", slots: s = [] } = Ct(), { hasError: b } = bt(Pt), d = s[t] || { char: "", hasFakeCaret: !0, isActive: !1 };
+    return /* @__PURE__ */ vt(
       "div",
       {
         ref: u,
-        className: yt(
+        className: gt(
           "relative z-10 flex h-12 w-10 items-center justify-center rounded-[8px] border-1 transition duration-200 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2",
-          h === "filled" ? "bg-level-one border-level-one" : "border-input-otp-border bg-transparent",
-          !w && "border",
-          w && "border-danger-400 focus-visible:outline-danger-400 border-2",
-          d.isActive && !w && "outline-input-otp-border--focus z-10 outline-2 outline-offset-2",
-          d.isActive && w && "outline-danger-400 outline-2 outline-offset-2",
+          v === "filled" ? "bg-level-one border-level-one" : "border-input-otp-border bg-transparent",
+          !b && "border",
+          b && "border-danger-400 focus-visible:outline-danger-400 border-2",
+          d.isActive && !b && "outline-input-otp-border--focus z-10 outline-2 outline-offset-2",
+          d.isActive && b && "outline-danger-400 outline-2 outline-offset-2",
           r
         ),
         "data-index": t,
         "data-testid": "input-otp-slot",
-        "data-variant": h,
+        "data-variant": v,
         ...a,
         children: [
           d.char,
-          d.hasFakeCaret && /* @__PURE__ */ P("div", { className: "animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ P("div", { className: "bg-input-otp-caret h-8 w-px" }) })
+          d.hasFakeCaret && /* @__PURE__ */ k("div", { className: "animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ k("div", { className: "bg-input-otp-caret h-8 w-px" }) })
         ]
       }
     );
   }
 );
-st.displayName = "InputOTP.Slot";
-const ct = et(({ ...t }, r) => {
-  const { variant: a = "outlined" } = Tt();
-  return /* @__PURE__ */ P("div", { ref: r, role: "separator", ...t, "data-testid": "input-otp-separator", "data-variant": a, children: /* @__PURE__ */ P(
+Tt.displayName = "InputOTP.Slot";
+const Rt = Q(({ ...t }, r) => {
+  const { variant: a = "outlined" } = Ct();
+  return /* @__PURE__ */ k("div", { ref: r, role: "separator", ...t, "data-testid": "input-otp-separator", "data-variant": a, children: /* @__PURE__ */ k(
     _t,
     {
       size: 24,
@@ -356,11 +352,11 @@ const ct = et(({ ...t }, r) => {
     }
   ) });
 });
-ct.displayName = "InputOTP.Separator";
-const en = Object.assign(Ot, {
-  Group: ut,
-  Slot: st,
-  Separator: ct
+Rt.displayName = "InputOTP.Separator";
+const en = Object.assign(Mt, {
+  Group: kt,
+  Slot: Tt,
+  Separator: Rt
 });
 export {
   en as InputOTP

package/dist/Label.d.ts

@@ -1,8 +1,4 @@
-import { LabelHTMLAttributes, Ref } from 'react';
-export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
-    htmlFor: string;
-    className?: string;
-    ref?: Ref<HTMLLabelElement>;
-};
-export declare const Label: import('react').ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+import { ComponentPropsWithoutRef } from 'react';
+export type LabelProps = ComponentPropsWithoutRef<'label'>;
+export declare const Label: import('react').ForwardRefExoticComponent<Omit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
 //# sourceMappingURL=Label.d.ts.map

package/dist/Label.js

@@ -1,24 +1,24 @@
 "use client";
 import "./styles/main.css";
-import { jsx as t } from "react/jsx-runtime";
-import { c as l } from "./twUtils-CRiPKpXj.js";
-import { forwardRef as s } from "react";
-const d = s(({ className: e, htmlFor: a, ...o }, r) => (
+import { jsx as r } from "react/jsx-runtime";
+import { cn as l } from "./utils/twUtils.js";
+import { forwardRef as t } from "react";
+const m = t(({ className: e, ...a }, o) => (
   // eslint-disable-next-line jsx-a11y/label-has-associated-control
-  /* @__PURE__ */ t(
+  /* @__PURE__ */ r(
     "label",
     {
-      htmlFor: a,
-      ref: r,
+      ref: o,
+      "data-slot": "label",
       className: l(
-        "peer-disabled:text-input-text--disabled text-base leading-none peer-disabled:cursor-not-allowed",
+        "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
         e
       ),
-      ...o
+      ...a
     }
   )
 ));
-d.displayName = "Label";
+m.displayName = "Label";
 export {
-  d as Label
+  m as Label
 };