@spear-ai/spectral 1.4.25 → 1.4.27

package/dist/InputOTP.js

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

package/dist/Label.d.ts

@@ -1,4 +1,9 @@
-import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithoutRef, Ref } 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>>;
+export declare const Label: {
+    ({ ref, className, ...props }: LabelProps & {
+        ref?: Ref<HTMLLabelElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=Label.d.ts.map

package/dist/Label.js

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

package/dist/MultiSelect/MultiSelectBase.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, Ref } from 'react';
 export type MultiSelectState = 'default' | 'error' | 'disabled' | 'loading';
 export interface MultiSelectOption {
     disabled?: boolean;
@@ -30,5 +30,10 @@ export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButt
     'aria-label'?: string;
     'aria-describedby'?: string;
 }
-export declare const MultiSelectBase: import('react').ForwardRefExoticComponent<MultiSelectBaseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const MultiSelectBase: {
+    ({ ref, className, clearAllLabel, closeOnSelect, emptyMessage, errorMessage, id, label, loadingMessage, maxCount, name, onChange, options, placeholder, searchPlaceholder, selectAllLabel, showClearAll, showSearch, showSelectAll, sortAlphabetically, state, value, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, ...props }: MultiSelectBaseProps & {
+        ref?: Ref<HTMLButtonElement>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 //# sourceMappingURL=MultiSelectBase.d.ts.map