@spear-ai/spectral 1.4.1 → 1.4.3

package/dist/InputOTP.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsx as k, jsxs as vt } from "react/jsx-runtime";
+import { jsx as T, jsxs as vt } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -60,66 +60,66 @@ 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 * as n from "react";
+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, 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]);
+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]);
   return t;
-}, Zt = (t, r) => $t(t, Vt(r)), Jt = (t, r) => {
+}, Zt = (t, n) => $t(t, Vt(n)), Jt = (t, n) => {
   var a = {};
-  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]);
+  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]);
   return a;
 };
 function Kt(t) {
-  let r = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
-  return [r, a, u];
+  let n = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
+  return [n, a, u];
 }
 function Qt(t) {
-  let r = n.useRef();
-  return n.useEffect(() => {
-    r.current = t;
-  }), r.current;
+  let n = r.useRef();
+  return r.useEffect(() => {
+    n.current = t;
+  }), n.current;
 }
-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(() => {
+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]);
+  return r.useEffect(() => {
     let f = t.current;
     if (!f || a === "none") return;
-    function x() {
+    function P() {
       let w = window.innerWidth - f.getBoundingClientRect().right;
-      d(w >= Et);
+      d(w >= xt);
     }
-    x();
-    let g = setInterval(x, 1e3);
+    P();
+    let g = setInterval(P, 1e3);
     return () => {
       clearInterval(g);
     };
-  }, [t, a]), n.useEffect(() => {
-    let f = u || document.activeElement === r.current;
+  }, [t, a]), r.useEffect(() => {
+    let f = u || document.activeElement === n.current;
     if (a === "none" || !f) return;
-    let x = setTimeout(R, 0), g = setTimeout(R, 2e3), w = setTimeout(R, 5e3), O = setTimeout(() => {
-      S(!0);
+    let P = setTimeout(R, 0), g = setTimeout(R, 2e3), w = setTimeout(R, 5e3), I = setTimeout(() => {
+      E(!0);
     }, 6e3);
     return () => {
-      clearTimeout(x), clearTimeout(g), clearTimeout(w), clearTimeout(O);
+      clearTimeout(P), clearTimeout(g), clearTimeout(w), clearTimeout(I);
     };
-  }, [r, u, a, R]), { hasPWMBadge: v, willPushPWMBadge: A, PWM_BADGE_SPACE_WIDTH: Xt };
+  }, [n, u, a, R]), { hasPWMBadge: v, willPushPWMBadge: A, PWM_BADGE_SPACE_WIDTH: Xt };
 }
-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 = U.current;
+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] });
+  r.useImperativeHandle(n, () => c.current, []), r.useEffect(() => {
+    let e = c.current, o = U.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() {
@@ -127,24 +127,24 @@ var ee = n.createContext({}), St = n.forwardRef((t, r) => {
         $(null), V(null);
         return;
       }
-      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;
+      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;
       if (F.length !== 0 && i !== null && h !== null) {
-        let Bt = i === h, Ft = i === F.length && F.length < P;
+        let Bt = i === h, Ft = i === F.length && F.length < S;
         if (Bt && !Ft) {
           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) {
+          else if (_ === S) j = _ - 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] < P;
+              let Nt = M[0] === M[1] && M[0] < S;
               N === "backward" && !Nt && (et = -1);
             }
             j = et + _, D = et + _ + 1;
           }
         }
-        j !== -1 && D !== -1 && j !== D && p.current.setSelectionRange(j, D, N);
+        j !== -1 && D !== -1 && j !== D && c.current.setSelectionRange(j, 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];
@@ -160,50 +160,50 @@ var ee = n.createContext({}), St = n.forwardRef((t, r) => {
       o && o.style.setProperty("--root-height", `${e.clientHeight}px`);
     };
     y();
-    let E = new ResizeObserver(y);
-    return E.observe(e), () => {
-      document.removeEventListener("selectionchange", m, { capture: !0 }), E.disconnect();
+    let x = new ResizeObserver(y);
+    return x.observe(e), () => {
+      document.removeEventListener("selectionchange", m, { capture: !0 }), x.disconnect();
     };
   }, []);
-  let [lt, it] = n.useState(!1), [z, Y] = n.useState(!1), [B, $] = n.useState(null), [H, V] = n.useState(null);
-  n.useEffect(() => {
+  let [lt, it] = r.useState(!1), [z, Y] = r.useState(!1), [B, $] = r.useState(null), [H, V] = r.useState(null);
+  r.useEffect(() => {
     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, h = (y = p.current) == null ? void 0 : y.selectionDirection;
-      E !== null && i !== null && ($(E), V(i), Z.current.prev = [E, i, h]);
+      (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]);
     });
-  }, [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) => {
+  }, [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) => {
     let o = e.currentTarget.value.slice(0, s);
     if (o.length > 0 && C && !C.test(o)) {
       e.preventDefault();
       return;
     }
     typeof W == "string" && o.length < W.length && document.dispatchEvent(new Event("selectionchange")), L(o);
-  }, [s, L, W, C]), st = n.useCallback(() => {
+  }, [s, L, W, C]), st = r.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), $(o), V(m);
+    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);
     }
     Y(!0);
-  }, [s]), ct = n.useCallback((e) => {
+  }, [s]), pt = r.useCallback((e) => {
     var o, m;
-    let y = p.current;
+    let y = c.current;
     if (!f && (!X.current.isIOS || !e.clipboardData || !y)) return;
-    let E = e.clipboardData.getData("text/plain"), i = f ? f(E) : E;
+    let x = e.clipboardData.getData("text/plain"), i = f ? f(x) : x;
     e.preventDefault();
-    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;
+    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, 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) => {
+  }, [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) => {
     var o;
-    ct(e), (o = l.onPaste) == null || o.call(l, e);
+    pt(e), (o = l.onPaste) == null || o.call(l, e);
   }, onChange: ut, onMouseOver: (e) => {
     var o;
     it(!0), (o = l.onMouseOver) == null || o.call(l, e);
@@ -216,22 +216,22 @@ var ee = n.createContext({}), St = n.forwardRef((t, r) => {
   }, onBlur: (e) => {
     var 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) => {
+  } })), [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), 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: 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)));
+    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)));
 });
-St.displayName = "Input";
-function q(t, r) {
+Et.displayName = "Input";
+function q(t, n) {
   try {
-    t.insertRule(r);
+    t.insertRule(n);
   } catch {
-    console.error("input-otp could not insert CSS rule:", r);
+    console.error("input-otp could not insert CSS rule:", n);
   }
 }
-var ne = `
+var re = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -251,21 +251,21 @@ var ne = `
     --nojs-fg: white !important;
   }
 }`;
-const Pt = ht({}), xt = ht(null), Ct = () => {
-  const t = bt(xt);
+const St = ht({}), Pt = ht(null), Ct = () => {
+  const t = bt(Pt);
   if (!t)
     throw new Error("useRoot must be used within an InputOTP");
   return t;
-}, Mt = Q(({ autoFocus: t = !1, children: r, className: a, errorMessage: u, hasError: v, id: s, inputMode: b = "numeric", maxLength: d, name: T, onChange: S, onComplete: A, value: R, variant: f = "outlined", ...x }, 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);
+}, 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));
   };
-  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,
+  return /* @__PURE__ */ T(St.Provider, { value: { hasError: v }, children: /* @__PURE__ */ vt("div", { className: "flex w-max flex-col gap-y-1", children: [
+    /* @__PURE__ */ T(
+      Et,
       {
         autoFocus: t,
         containerClassName: gt("flex items-center gap-2 has-[:disabled]:opacity-50 disabled:cursor-not-allowed", a),
@@ -273,33 +273,33 @@ const Pt = ht({}), xt = ht(null), Ct = () => {
         "data-dashlane-disabled-on-field": "true",
         "data-lpignore": "true",
         "data-protonpass-ignore": "true",
-        "data-testid": "input-otp",
+        "data-testid": "spectral-input-otp",
         id: w,
         inputMode: b,
         maxLength: d,
-        onChange: S,
+        onChange: E,
         onComplete: A,
-        onPaste: O,
+        onPaste: I,
         pushPasswordManagerStrategy: "none",
         ref: g,
+        role: "textbox",
         textAlign: "center",
         value: R,
-        ...x,
-        render: ({ slots: l }) => /* @__PURE__ */ k(xt.Provider, { value: { slots: l, variant: f }, children: r })
+        ...P,
+        render: ({ slots: l }) => /* @__PURE__ */ T(Pt.Provider, { value: { slots: l, variant: f }, children: n })
       }
     ),
-    v && u && /* @__PURE__ */ k(Gt, { id: Lt(w), message: u })
+    v && u && /* @__PURE__ */ T(Gt, { dataTestId: "spectral-input-otp-error-message", id: Lt(w), message: u })
   ] }) });
 });
 Mt.displayName = "InputOTP";
-const kt = Q(({ ...t }, r) => /* @__PURE__ */ k("div", { ref: r, className: "flex items-center justify-between gap-x-2 justify-center", ...t, "data-testid": "input-otp-group" }));
-kt.displayName = "InputOTP.Group";
-const Tt = Q(({ index: t, className: r, ...a }, u) => {
-  const { variant: v = "outlined", slots: s = [] } = Ct(), { hasError: b } = bt(Pt), d = s[t] || { char: "", hasFakeCaret: !0, isActive: !1 };
+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(
     "div",
     {
-      ref: u,
       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",
@@ -307,30 +307,31 @@ const Tt = Q(({ index: t, className: r, ...a }, u) => {
         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",
-        r
+        n
       ),
       "data-index": t,
-      "data-testid": "input-otp-slot",
+      "data-testid": "spectral-input-otp-slot",
       "data-variant": v,
+      ref: u,
       ...a,
       children: [
         d.char,
-        d.hasFakeCaret && /* @__PURE__ */ k("div", { className: "pointer-events-none absolute inset-0 flex animate-caret-blink items-center justify-center", children: /* @__PURE__ */ k("div", { className: "h-8 w-px bg-input-otp-caret" }) })
+        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" }) })
       ]
     }
   );
 });
-Tt.displayName = "InputOTP.Slot";
-const Rt = Q(({ ...t }, r) => {
+kt.displayName = "InputOTP.Slot";
+const Rt = Q(({ ...t }, n) => {
   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, color: a === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)" }) });
+  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 pn = Object.assign(Mt, {
-  Group: kt,
-  Slot: Tt,
+const pr = Object.assign(Mt, {
+  Group: Tt,
+  Slot: kt,
   Separator: Rt
 });
 export {
-  pn as InputOTP
+  pr as InputOTP
 };

package/dist/MultiSelect/MultiSelectBase.d.ts

@@ -1,32 +1,32 @@
 import { ButtonHTMLAttributes } from 'react';
 export type MultiSelectState = 'default' | 'error' | 'disabled' | 'loading';
 export interface MultiSelectOption {
+    disabled?: boolean;
+    group?: string;
     label: string;
     value: string;
-    group?: string;
-    disabled?: boolean;
 }
 export interface MultiSelectBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange'> {
-    value: string[];
+    clearAllLabel?: string;
+    closeOnSelect?: boolean;
+    emptyMessage?: string;
+    errorMessage?: string;
+    id?: string;
+    label?: string;
+    loadingMessage?: string;
+    maxCount?: number;
+    name?: string;
     onChange: (value: string[]) => void;
     options: MultiSelectOption[];
     placeholder?: string;
-    maxCount?: number;
-    state?: MultiSelectState;
-    errorMessage?: string;
-    emptyMessage?: string;
-    loadingMessage?: string;
     searchPlaceholder?: string;
-    selectAllLabel?: string;
-    clearAllLabel?: string;
-    sortAlphabetically?: boolean;
-    showSelectAll?: boolean;
     showClearAll?: boolean;
     showSearch?: boolean;
-    closeOnSelect?: boolean;
-    name?: string;
-    id?: string;
-    label?: string;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+    sortAlphabetically?: boolean;
+    state?: MultiSelectState;
+    value: string[];
     'aria-label'?: string;
     'aria-describedby'?: string;
 }