@spear-ai/spectral 1.6.16 → 1.7.0

package/dist/Input.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { usePasswordVisibility as tt, usePrefixWidth as et, useClearOnFocus as rt } from "./Input/InputUtils.js";
+import { usePasswordVisibility as tt, usePrefixWidth as rt, useClearOnFocus as et } from "./Input/InputUtils.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -40,6 +40,7 @@ import "./Icons/LiveViewIcon.js";
 import { LoaderIcon as nt } from "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
+import "./Icons/MeasureIcon.js";
 import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
 import "./Icons/MinusIcon.js";
@@ -51,6 +52,7 @@ import "./Icons/PlusIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
+import "./Icons/SearchIcon.js";
 import "./Icons/SettingsIcon.js";
 import "./Icons/SortAscendingIcon.js";
 import "./Icons/SortAtoZIcon.js";
@@ -75,30 +77,30 @@ const gt = (...a) => (p) => {
     i && (typeof i == "function" ? i(p) : i.current = p);
   });
 }, xt = (a) => ({
+  date: "off",
   email: "email",
+  number: "off",
   password: "current-password",
   tel: "tel",
-  url: "url",
   text: "off",
-  number: "off",
-  date: "off",
+  url: "url",
   "datetime-local": "off"
 })[a] || "off", Ct = ({
-  ref: a,
-  className: p,
-  clearOnFocus: i = !1,
-  disabled: k,
+  className: a,
+  clearOnFocus: p = !1,
+  disabled: i,
   endIcon: b,
   errorMessage: g,
-  id: P,
-  label: r,
-  labelClassName: R,
+  id: k,
+  label: e,
+  labelClassName: P,
   name: x,
   onBlur: C,
   onChange: n,
   onFocus: w,
-  placeholder: V,
+  placeholder: R,
   prefix: l,
+  ref: V,
   required: v,
   showClearButton: $ = !1,
   startIcon: y,
@@ -110,37 +112,37 @@ const gt = (...a) => (p) => {
   "aria-describedby": O,
   ...j
 }) => {
-  const m = ct(P, x), N = `${m}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = mt(k, s), H = dt(s, O, v, N), E = bt(null), T = gt(a, E), { isVisible: u, toggleVisibility: W, inputType: D } = tt(), { prefixWidth: G, prefixRef: J } = et(l), { handleFocus: z } = rt(i, n ? (e) => n(e.target.value) : void 0), K = d(
-    (e) => {
-      C?.(e);
+  const m = ct(k, x), N = `${m}-error`, { isDisabled: F, isLoading: A, isInvalid: B } = mt(i, s), H = dt(s, O, v, N), E = bt(null), T = gt(V, E), { isVisible: u, toggleVisibility: W, inputType: D } = tt(), { prefixWidth: G, prefixRef: J } = rt(l), { handleFocus: z } = et(p, n ? (r) => n(r.target.value) : void 0), K = d(
+    (r) => {
+      C?.(r);
     },
     [C]
   ), Q = d(
-    (e) => {
-      z(e, w);
+    (r) => {
+      z(r, w);
     },
     [z, w]
   ), U = d(
-    (e) => {
-      const o = e.target.value;
+    (r) => {
+      const o = r.target.value;
       n?.(o);
     },
     [n]
   ), X = d(() => {
-    const e = E.current;
-    e && (e.value = "", e.dispatchEvent(new Event("input", { bubbles: !0 })), e.focus());
+    const r = E.current;
+    r && (r.value = "", r.dispatchEvent(new Event("input", { bubbles: !0 })), r.focus());
   }, []), S = $ && I.length > 0, Y = () => {
-    const e = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", o = {
-      password: () => /* @__PURE__ */ t("button", { "aria-controls": m, "aria-label": u ? `Hide ${r || "password"}` : `Show ${r || "password"}`, "aria-pressed": u, className: e, "data-testid": "spectral-input-password-toggle", onClick: W, type: "button", children: u ? /* @__PURE__ */ t(at, { size: 22 }) : /* @__PURE__ */ t(pt, { size: 22 }) }),
-      clear: () => /* @__PURE__ */ t("button", { "aria-label": `Clear ${r || "input"}`, className: e, "data-testid": "spectral-input-clear-button", onClick: X, type: "button", children: /* @__PURE__ */ t(it, { size: 24 }) }),
+    const r = "absolute right-4 top-1/2 -translate-y-1/2 text-input-icon hover:text-input-icon--hover focus:outline-none cursor-pointer", o = {
+      password: () => /* @__PURE__ */ t("button", { "aria-controls": m, "aria-label": u ? `Hide ${e ?? "password"}` : `Show ${e ?? "password"}`, "aria-pressed": u, className: r, "data-testid": "spectral-input-password-toggle", onClick: W, type: "button", children: u ? /* @__PURE__ */ t(at, { size: 22 }) : /* @__PURE__ */ t(pt, { size: 22 }) }),
+      clear: () => /* @__PURE__ */ t("button", { "aria-label": `Clear ${e ?? "input"}`, className: r, "data-testid": "spectral-input-clear-button", onClick: X, type: "button", children: /* @__PURE__ */ t(it, { size: 24 }) }),
       loading: () => /* @__PURE__ */ t("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-loading-icon", children: /* @__PURE__ */ t(nt, { size: 24 }) }),
       error: () => /* @__PURE__ */ t("div", { className: "text-danger-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-error-icon", children: /* @__PURE__ */ t(st, { size: 24 }) }),
       success: () => /* @__PURE__ */ t("div", { className: "text-success-400 absolute top-1/2 right-4 -translate-y-1/2", "data-testid": "spectral-input-success-icon", children: /* @__PURE__ */ t(ot, { size: 24 }) })
     };
     return b ? /* @__PURE__ */ t("div", { className: "text-input-icon absolute top-1/2 right-4 -translate-y-1/2", children: b }) : c === "password" ? o.password() : S ? o.clear() : A ? o.loading() : s === "success" ? o.success() : s === "error" ? o.error() : null;
-  }, Z = () => y || null, _ = h(ut(s, p), "[text-indent:var(--prefix-width)]", S && "pr-10"), q = h("pointer-events-none absolute inset-y-0 left-4 flex items-center text-base text-input-text-prefix opacity-100 peer-disabled:opacity-50");
+  }, Z = () => y || null, _ = h(ut(s, a), "[text-indent:var(--prefix-width)]", S && "pr-10"), q = h("pointer-events-none absolute inset-y-0 left-4 flex items-center text-base text-input-text-prefix opacity-100 peer-disabled:opacity-50");
   return /* @__PURE__ */ f("div", { className: "w-full space-y-1.5", "data-testid": "spectral-input-container", children: [
-    r && /* @__PURE__ */ t(lt, { className: h("mb-2 block", R, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: m, children: r }),
+    e && /* @__PURE__ */ t(lt, { className: h("mb-2 block", P, F && "text-input-text--disabled placeholder:text-input-text-placeholder cursor-not-allowed"), "data-testid": "spectral-input-label", htmlFor: m, children: e }),
     /* @__PURE__ */ f("div", { className: "relative", "data-testid": "spectral-input-wrapper", children: [
       /* @__PURE__ */ f("div", { className: "relative", children: [
         Z(),
@@ -148,7 +150,7 @@ const gt = (...a) => (p) => {
         /* @__PURE__ */ t(
           "input",
           {
-            "aria-label": M || r,
+            "aria-label": M ?? e,
             autoComplete: xt(c),
             className: _,
             "data-state": s,
@@ -159,11 +161,11 @@ const gt = (...a) => (p) => {
             onBlur: K,
             onChange: U,
             onFocus: Q,
-            placeholder: V || r,
+            placeholder: R ?? e,
             ref: T,
             required: v,
             style: ft({
-              "--prefix-width": l ? `${G}px` : "0px"
+              "--prefix-width": l ? `${G}px` : "0"
             }),
             suppressHydrationWarning: L,
             type: c === "password" ? D : c,

package/dist/InputOTP.d.ts

@@ -1,7 +1,7 @@
 import { FormFieldState } from './utils/formFieldUtils';
 import { OTPInput, OTPInputProps } from 'input-otp';
 import { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';
-type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> & {
+export interface InputOTPBaseProps extends Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerStrategy' | 'pasteTransformer' | 'noScriptCSSFallback' | 'placeholder' | 'containerClassName' | 'render' | 'pattern'> {
     onComplete?: (...args: unknown[]) => void;
     className?: string;
     errorMessage?: string | undefined;
@@ -15,21 +15,21 @@ type InputOTPRootProps = Omit<OTPInputProps, 'textAlign' | 'pushPasswordManagerS
     separator?: boolean;
     state?: FormFieldState;
     variant?: 'outlined' | 'filled';
-};
-export type InputOTPProps = InputOTPRootProps & ({
+}
+type InputOTPProps = InputOTPBaseProps & ({
     value: number | string;
     onChange: (newValue: number | string) => void;
 } | {
     value?: never;
     onChange?: never;
 });
-type SlotsProps = {
-    start?: number;
-    count?: number;
+interface SlotsProps {
     className?: string;
-};
+    count?: number;
+    start?: number;
+}
 export declare const InputOTP: {
-    ({ ref, autoFocus, children, className, errorMessage, id, inputMode, maxLength, name, onChange, onComplete, pattern, state, value, variant, ...props }: InputOTPProps & {
+    ({ autoFocus, children, className, errorMessage, id, inputMode, maxLength, name, onChange, onComplete, pattern, ref, state, value, variant, ...props }: InputOTPProps & {
         ref?: Ref<ComponentRef<typeof OTPInput>>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
@@ -41,9 +41,9 @@ export declare const InputOTP: {
         displayName: string;
     };
     Slot: {
-        ({ ref, index, className, ...props }: ComponentPropsWithoutRef<"div"> & {
-            ref?: Ref<ComponentRef<"div">>;
+        ({ className, index, ref, ...props }: ComponentPropsWithoutRef<"div"> & {
             index: number;
+            ref?: Ref<ComponentRef<"div">>;
         }): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };

package/dist/InputOTP.js

@@ -39,6 +39,7 @@ import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
 import "./Icons/LogoutIcon.js";
+import "./Icons/MeasureIcon.js";
 import "./Icons/MessagesIcon.js";
 import "./Icons/MetadataIcon.js";
 import { MinusIcon as Ht } from "./Icons/MinusIcon.js";
@@ -50,6 +51,7 @@ import "./Icons/PlusIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
+import "./Icons/SearchIcon.js";
 import "./Icons/SettingsIcon.js";
 import "./Icons/SortAscendingIcon.js";
 import "./Icons/SortAtoZIcon.js";
@@ -75,13 +77,13 @@ var Vt = Object.defineProperty, qt = Object.defineProperties, Kt = Object.getOwn
   return t;
 }, Jt = (t, e) => qt(t, Kt(e)), Qt = (t, e) => {
   var o = {};
-  for (var i in t) Pt.call(t, i) && e.indexOf(i) < 0 && (o[i] = t[i]);
-  if (t != null && X) for (var i of X(t)) e.indexOf(i) < 0 && xt.call(t, i) && (o[i] = t[i]);
+  for (var l in t) Pt.call(t, l) && e.indexOf(l) < 0 && (o[l] = t[l]);
+  if (t != null && X) for (var l of X(t)) e.indexOf(l) < 0 && xt.call(t, l) && (o[l] = t[l]);
   return o;
 };
 function Ut(t) {
-  let e = setTimeout(t, 0), o = setTimeout(t, 10), i = setTimeout(t, 50);
-  return [e, o, i];
+  let e = setTimeout(t, 0), o = setTimeout(t, 10), l = setTimeout(t, 50);
+  return [e, o, l];
 }
 function Xt(t) {
   let e = n.useRef();
@@ -90,77 +92,77 @@ function Xt(t) {
   }), e.current;
 }
 var Yt = 18, Et = 40, te = `${Et}px`, ee = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
-function re({ containerRef: t, inputRef: e, pushPasswordManagerStrategy: o, isFocused: i }) {
-  let [f, u] = n.useState(!1), [d, m] = n.useState(!1), [O, M] = n.useState(!1), j = n.useMemo(() => o === "none" ? !1 : (o === "increase-width" || o === "experimental-no-flickering") && f && d, [f, d, o]), T = n.useCallback(() => {
-    let g = t.current, E = e.current;
-    if (!g || !E || O || o === "none") return;
-    let h = g, P = h.getBoundingClientRect().left + h.offsetWidth, k = h.getBoundingClientRect().top + h.offsetHeight / 2, l = P - Yt, F = k;
-    document.querySelectorAll(ee).length === 0 && document.elementFromPoint(l, F) === g || (u(!0), M(!0));
-  }, [t, e, O, o]);
+function re({ containerRef: t, inputRef: e, pushPasswordManagerStrategy: o, isFocused: l }) {
+  let [v, i] = n.useState(!1), [d, m] = n.useState(!1), [E, D] = n.useState(!1), j = n.useMemo(() => o === "none" ? !1 : (o === "increase-width" || o === "experimental-no-flickering") && v && d, [v, d, o]), I = n.useCallback(() => {
+    let g = t.current, C = e.current;
+    if (!g || !C || E || o === "none") return;
+    let h = g, P = h.getBoundingClientRect().left + h.offsetWidth, T = h.getBoundingClientRect().top + h.offsetHeight / 2, s = P - Yt, F = T;
+    document.querySelectorAll(ee).length === 0 && document.elementFromPoint(s, F) === g || (i(!0), D(!0));
+  }, [t, e, E, o]);
   return n.useEffect(() => {
     let g = t.current;
     if (!g || o === "none") return;
-    function E() {
+    function C() {
       let P = window.innerWidth - g.getBoundingClientRect().right;
       m(P >= Et);
     }
-    E();
-    let h = setInterval(E, 1e3);
+    C();
+    let h = setInterval(C, 1e3);
     return () => {
       clearInterval(h);
     };
   }, [t, o]), n.useEffect(() => {
-    let g = i || document.activeElement === e.current;
+    let g = l || document.activeElement === e.current;
     if (o === "none" || !g) return;
-    let E = setTimeout(T, 0), h = setTimeout(T, 2e3), P = setTimeout(T, 5e3), k = setTimeout(() => {
-      M(!0);
+    let C = setTimeout(I, 0), h = setTimeout(I, 2e3), P = setTimeout(I, 5e3), T = setTimeout(() => {
+      D(!0);
     }, 6e3);
     return () => {
-      clearTimeout(E), clearTimeout(h), clearTimeout(P), clearTimeout(k);
+      clearTimeout(C), clearTimeout(h), clearTimeout(P), clearTimeout(T);
     };
-  }, [e, i, o, T]), { hasPWMBadge: f, willPushPWMBadge: j, PWM_BADGE_SPACE_WIDTH: te };
+  }, [e, l, o, I]), { hasPWMBadge: v, willPushPWMBadge: j, PWM_BADGE_SPACE_WIDTH: te };
 }
 var ne = n.createContext({}), Ct = n.forwardRef((t, e) => {
-  var o = t, { value: i, onChange: f, maxLength: u, textAlign: d = "left", pattern: m, placeholder: O, inputMode: M = "numeric", onComplete: j, pushPasswordManagerStrategy: T = "increase-width", pasteTransformer: g, containerClassName: E, noScriptCSSFallback: h = oe, render: P, children: k } = o, l = Qt(o, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), F, J, R, W, st;
-  let [Ot, Rt] = n.useState(typeof l.defaultValue == "string" ? l.defaultValue : ""), c = i ?? Ot, B = Xt(c), z = n.useCallback((r) => {
-    f?.(r), Rt(r);
-  }, [f]), C = n.useMemo(() => m ? typeof m == "string" ? new RegExp(m) : m : null, [m]), p = n.useRef(null), Y = n.useRef(null), tt = n.useRef({ value: c, onChange: z, isIOS: typeof window < "u" && ((J = (F = window?.CSS) == null ? void 0 : F.supports) == null ? void 0 : J.call(F, "-webkit-touch-callout", "none")) }), Q = n.useRef({ prev: [(R = p.current) == null ? void 0 : R.selectionStart, (W = p.current) == null ? void 0 : W.selectionEnd, (st = p.current) == null ? void 0 : st.selectionDirection] });
-  n.useImperativeHandle(e, () => p.current, []), n.useEffect(() => {
-    let r = p.current, a = Y.current;
+  var o = t, { value: l, onChange: v, maxLength: i, textAlign: d = "left", pattern: m, placeholder: E, inputMode: D = "numeric", onComplete: j, pushPasswordManagerStrategy: I = "increase-width", pasteTransformer: g, containerClassName: C, noScriptCSSFallback: h = oe, render: P, children: T } = o, s = Qt(o, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), F, J, O, W, st;
+  let [Ot, Rt] = n.useState(typeof s.defaultValue == "string" ? s.defaultValue : ""), p = l ?? Ot, B = Xt(p), z = n.useCallback((r) => {
+    v?.(r), Rt(r);
+  }, [v]), M = n.useMemo(() => m ? typeof m == "string" ? new RegExp(m) : m : null, [m]), c = n.useRef(null), Y = n.useRef(null), tt = n.useRef({ value: p, onChange: z, isIOS: typeof window < "u" && ((J = (F = window?.CSS) == null ? void 0 : F.supports) == null ? void 0 : J.call(F, "-webkit-touch-callout", "none")) }), Q = n.useRef({ prev: [(O = c.current) == null ? void 0 : O.selectionStart, (W = c.current) == null ? void 0 : W.selectionEnd, (st = c.current) == null ? void 0 : st.selectionDirection] });
+  n.useImperativeHandle(e, () => c.current, []), n.useEffect(() => {
+    let r = c.current, a = Y.current;
     if (!r || !a) return;
     tt.current.value !== r.value && tt.current.onChange(r.value), Q.current.prev = [r.selectionStart, r.selectionEnd, r.selectionDirection];
-    function v() {
+    function f() {
       if (document.activeElement !== r) {
         q(null), K(null);
         return;
       }
-      let s = r.selectionStart, b = r.selectionEnd, U = r.selectionDirection, x = r.maxLength, _ = r.value, I = Q.current.prev, A = -1, D = -1, H;
-      if (_.length !== 0 && s !== null && b !== null) {
-        let Wt = s === b, Bt = s === _.length && _.length < x;
+      let u = r.selectionStart, b = r.selectionEnd, U = r.selectionDirection, x = r.maxLength, _ = r.value, k = Q.current.prev, R = -1, A = -1, H;
+      if (_.length !== 0 && u !== null && b !== null) {
+        let Wt = u === b, Bt = u === _.length && _.length < x;
         if (Wt && !Bt) {
-          let G = s;
-          if (G === 0) A = 0, D = 1, H = "forward";
-          else if (G === x) A = G - 1, D = G, H = "backward";
+          let G = u;
+          if (G === 0) R = 0, A = 1, H = "forward";
+          else if (G === x) R = G - 1, A = G, H = "backward";
           else if (x > 1 && _.length > 1) {
             let nt = 0;
-            if (I[0] !== null && I[1] !== null) {
-              H = G < I[1] ? "backward" : "forward";
-              let Nt = I[0] === I[1] && I[0] < x;
+            if (k[0] !== null && k[1] !== null) {
+              H = G < k[1] ? "backward" : "forward";
+              let Nt = k[0] === k[1] && k[0] < x;
               H === "backward" && !Nt && (nt = -1);
             }
-            A = nt + G, D = nt + G + 1;
+            R = nt + G, A = nt + G + 1;
           }
         }
-        A !== -1 && D !== -1 && A !== D && p.current.setSelectionRange(A, D, H);
+        R !== -1 && A !== -1 && R !== A && c.current.setSelectionRange(R, A, H);
       }
-      let vt = A !== -1 ? A : s, gt = D !== -1 ? D : b, Ft = H ?? U;
+      let vt = R !== -1 ? R : u, gt = A !== -1 ? A : b, Ft = H ?? U;
       q(vt), K(gt), Q.current.prev = [vt, gt, Ft];
     }
-    if (document.addEventListener("selectionchange", v, { capture: !0 }), v(), document.activeElement === r && et(!0), !document.getElementById("input-otp-style")) {
-      let s = document.createElement("style");
-      if (s.id = "input-otp-style", document.head.appendChild(s), s.sheet) {
+    if (document.addEventListener("selectionchange", f, { capture: !0 }), f(), document.activeElement === r && et(!0), !document.getElementById("input-otp-style")) {
+      let u = document.createElement("style");
+      if (u.id = "input-otp-style", document.head.appendChild(u), u.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;";
-        Z(s.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), Z(s.sheet, `[data-input-otp]:autofill { ${b} }`), Z(s.sheet, `[data-input-otp]:-webkit-autofill { ${b} }`), Z(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; } }"), Z(s.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+        Z(u.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), Z(u.sheet, `[data-input-otp]:autofill { ${b} }`), Z(u.sheet, `[data-input-otp]:-webkit-autofill { ${b} }`), Z(u.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; } }"), Z(u.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
       }
     }
     let S = () => {
@@ -169,66 +171,66 @@ var ne = n.createContext({}), Ct = n.forwardRef((t, e) => {
     S();
     let y = new ResizeObserver(S);
     return y.observe(r), () => {
-      document.removeEventListener("selectionchange", v, { capture: !0 }), y.disconnect();
+      document.removeEventListener("selectionchange", f, { capture: !0 }), y.disconnect();
     };
   }, []);
-  let [ut, ct] = n.useState(!1), [V, et] = n.useState(!1), [N, q] = n.useState(null), [L, K] = n.useState(null);
+  let [ut, pt] = n.useState(!1), [V, et] = n.useState(!1), [N, q] = n.useState(null), [L, K] = n.useState(null);
   n.useEffect(() => {
     Ut(() => {
-      var r, a, v, S;
-      (r = p.current) == null || r.dispatchEvent(new Event("input"));
-      let y = (a = p.current) == null ? void 0 : a.selectionStart, s = (v = p.current) == null ? void 0 : v.selectionEnd, b = (S = p.current) == null ? void 0 : S.selectionDirection;
-      y !== null && s !== null && (q(y), K(s), Q.current.prev = [y, s, b]);
+      var r, a, f, S;
+      (r = c.current) == null || r.dispatchEvent(new Event("input"));
+      let y = (a = c.current) == null ? void 0 : a.selectionStart, u = (f = c.current) == null ? void 0 : f.selectionEnd, b = (S = c.current) == null ? void 0 : S.selectionDirection;
+      y !== null && u !== null && (q(y), K(u), Q.current.prev = [y, u, b]);
     });
-  }, [c, V]), n.useEffect(() => {
-    B !== void 0 && c !== B && B.length < u && c.length === u && j?.(c);
-  }, [u, j, B, c]);
-  let $ = re({ containerRef: Y, inputRef: p, pushPasswordManagerStrategy: T, isFocused: V }), pt = n.useCallback((r) => {
-    let a = r.currentTarget.value.slice(0, u);
-    if (a.length > 0 && C && !C.test(a)) {
+  }, [p, V]), n.useEffect(() => {
+    B !== void 0 && p !== B && B.length < i && p.length === i && j?.(p);
+  }, [i, j, B, p]);
+  let $ = re({ containerRef: Y, inputRef: c, pushPasswordManagerStrategy: I, isFocused: V }), ct = n.useCallback((r) => {
+    let a = r.currentTarget.value.slice(0, i);
+    if (a.length > 0 && M && !M.test(a)) {
       r.preventDefault();
       return;
     }
     typeof B == "string" && a.length < B.length && document.dispatchEvent(new Event("selectionchange")), z(a);
-  }, [u, z, B, C]), dt = n.useCallback(() => {
+  }, [i, z, B, M]), dt = n.useCallback(() => {
     var r;
-    if (p.current) {
-      let a = Math.min(p.current.value.length, u - 1), v = p.current.value.length;
-      (r = p.current) == null || r.setSelectionRange(a, v), q(a), K(v);
+    if (c.current) {
+      let a = Math.min(c.current.value.length, i - 1), f = c.current.value.length;
+      (r = c.current) == null || r.setSelectionRange(a, f), q(a), K(f);
     }
     et(!0);
-  }, [u]), mt = n.useCallback((r) => {
-    var a, v;
-    let S = p.current;
+  }, [i]), mt = n.useCallback((r) => {
+    var a, f;
+    let S = c.current;
     if (!g && (!tt.current.isIOS || !r.clipboardData || !S)) return;
-    let y = r.clipboardData.getData("text/plain"), s = g ? g(y) : y;
+    let y = r.clipboardData.getData("text/plain"), u = g ? g(y) : y;
     r.preventDefault();
-    let b = (a = p.current) == null ? void 0 : a.selectionStart, U = (v = p.current) == null ? void 0 : v.selectionEnd, x = (b !== U ? c.slice(0, b) + s + c.slice(U) : c.slice(0, b) + s + c.slice(b)).slice(0, u);
-    if (x.length > 0 && C && !C.test(x)) return;
+    let b = (a = c.current) == null ? void 0 : a.selectionStart, U = (f = c.current) == null ? void 0 : f.selectionEnd, x = (b !== U ? p.slice(0, b) + u + p.slice(U) : p.slice(0, b) + u + p.slice(b)).slice(0, i);
+    if (x.length > 0 && M && !M.test(x)) return;
     S.value = x, z(x);
-    let _ = Math.min(x.length, u - 1), I = x.length;
-    S.setSelectionRange(_, I), q(_), K(I);
-  }, [u, z, C, c]), At = n.useMemo(() => ({ position: "relative", cursor: l.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [l.disabled]), ft = n.useMemo(() => ({ position: "absolute", inset: 0, width: $.willPushPWMBadge ? `calc(100% + ${$.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: $.willPushPWMBadge ? `inset(0 ${$.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: d, 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" }), [$.PWM_BADGE_SPACE_WIDTH, $.willPushPWMBadge, d]), Dt = 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": L, inputMode: M, pattern: C?.source, "aria-placeholder": O, style: ft, maxLength: u, value: c, ref: p, onPaste: (r) => {
+    let _ = Math.min(x.length, i - 1), k = x.length;
+    S.setSelectionRange(_, k), q(_), K(k);
+  }, [i, z, M, p]), At = n.useMemo(() => ({ position: "relative", cursor: s.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [s.disabled]), ft = n.useMemo(() => ({ position: "absolute", inset: 0, width: $.willPushPWMBadge ? `calc(100% + ${$.PWM_BADGE_SPACE_WIDTH})` : "100%", clipPath: $.willPushPWMBadge ? `inset(0 ${$.PWM_BADGE_SPACE_WIDTH} 0 0)` : void 0, height: "100%", display: "flex", textAlign: d, 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" }), [$.PWM_BADGE_SPACE_WIDTH, $.willPushPWMBadge, d]), Dt = n.useMemo(() => n.createElement("input", Jt(Zt({ autoComplete: s.autoComplete || "one-time-code" }, s), { "data-input-otp": !0, "data-input-otp-placeholder-shown": p.length === 0 || void 0, "data-input-otp-mss": N, "data-input-otp-mse": L, inputMode: D, pattern: M?.source, "aria-placeholder": E, style: ft, maxLength: i, value: p, ref: c, onPaste: (r) => {
     var a;
-    mt(r), (a = l.onPaste) == null || a.call(l, r);
-  }, onChange: pt, onMouseOver: (r) => {
+    mt(r), (a = s.onPaste) == null || a.call(s, r);
+  }, onChange: ct, onMouseOver: (r) => {
     var a;
-    ct(!0), (a = l.onMouseOver) == null || a.call(l, r);
+    pt(!0), (a = s.onMouseOver) == null || a.call(s, r);
   }, onMouseLeave: (r) => {
     var a;
-    ct(!1), (a = l.onMouseLeave) == null || a.call(l, r);
+    pt(!1), (a = s.onMouseLeave) == null || a.call(s, r);
   }, onFocus: (r) => {
     var a;
-    dt(), (a = l.onFocus) == null || a.call(l, r);
+    dt(), (a = s.onFocus) == null || a.call(s, r);
   }, onBlur: (r) => {
     var a;
-    et(!1), (a = l.onBlur) == null || a.call(l, r);
-  } })), [pt, dt, mt, M, ft, u, L, N, l, C?.source, c]), rt = n.useMemo(() => ({ slots: Array.from({ length: u }).map((r, a) => {
-    var v;
-    let S = V && N !== null && L !== null && (N === L && a === N || a >= N && a < L), y = c[a] !== void 0 ? c[a] : null, s = c[0] !== void 0 ? null : (v = O?.[a]) != null ? v : null;
-    return { char: y, placeholderChar: s, isActive: S, hasFakeCaret: S && y === null };
-  }), isFocused: V, isHovering: !l.disabled && ut }), [V, ut, u, L, N, l.disabled, c]), jt = n.useMemo(() => P ? P(rt) : n.createElement(ne.Provider, { value: rt }, k), [k, rt, P]);
-  return n.createElement(n.Fragment, null, h !== null && n.createElement("noscript", null, n.createElement("style", null, h)), n.createElement("div", { ref: Y, "data-input-otp-container": !0, style: At, className: E }, jt, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Dt)));
+    et(!1), (a = s.onBlur) == null || a.call(s, r);
+  } })), [ct, dt, mt, D, ft, i, L, N, s, M?.source, p]), rt = n.useMemo(() => ({ slots: Array.from({ length: i }).map((r, a) => {
+    var f;
+    let S = V && N !== null && L !== null && (N === L && a === N || a >= N && a < L), y = p[a] !== void 0 ? p[a] : null, u = p[0] !== void 0 ? null : (f = E?.[a]) != null ? f : null;
+    return { char: y, placeholderChar: u, isActive: S, hasFakeCaret: S && y === null };
+  }), isFocused: V, isHovering: !s.disabled && ut }), [V, ut, i, L, N, s.disabled, p]), jt = n.useMemo(() => P ? P(rt) : n.createElement(ne.Provider, { value: rt }, T), [T, rt, P]);
+  return n.createElement(n.Fragment, null, h !== null && n.createElement("noscript", null, n.createElement("style", null, h)), n.createElement("div", { ref: Y, "data-input-otp-container": !0, style: At, className: C }, jt, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Dt)));
 });
 Ct.displayName = "Input";
 function Z(t, e) {
@@ -264,56 +266,56 @@ const Mt = St({}), Tt = St(null), ot = () => {
     throw new Error("useRoot must be used within an InputOTP");
   return t;
 }, kt = ({
-  ref: t,
-  autoFocus: e = !1,
-  children: o,
-  className: i,
-  errorMessage: f,
-  id: u,
-  inputMode: d = "numeric",
-  maxLength: m,
-  name: O,
-  onChange: M,
-  onComplete: j,
-  pattern: T,
+  autoFocus: t = !1,
+  children: e,
+  className: o,
+  errorMessage: l,
+  id: v,
+  inputMode: i = "numeric",
+  maxLength: d,
+  name: m,
+  onChange: E,
+  onComplete: D,
+  pattern: j,
+  ref: I,
   state: g = "default",
-  value: E,
+  value: C,
   variant: h = "outlined",
   ...P
 }) => {
-  const k = Gt(u, O), { isInvalid: l } = Lt(!1, g), F = T !== void 0 ? T : d === "numeric" ? ae : void 0, J = (R) => {
-    let W = R.clipboardData.getData("text/plain").trim().replaceAll("-", "");
-    d === "numeric" && (W = W.replace(/\D/g, "")), W.length === m && typeof M == "function" && M(W);
+  const T = Gt(v, m), { isInvalid: s } = Lt(!1, g), F = j ?? (i === "numeric" ? ae : void 0), J = (O) => {
+    let W = O.clipboardData.getData("text/plain").trim().replaceAll("-", "");
+    i === "numeric" && (W = W.replace(/\D/g, "")), W.length === d && typeof E == "function" && E(W);
   };
-  return /* @__PURE__ */ w(Mt.Provider, { value: { isInvalid: l }, children: /* @__PURE__ */ bt("div", { className: "flex w-max flex-col gap-y-1", children: [
+  return /* @__PURE__ */ w(Mt.Provider, { value: { isInvalid: s }, children: /* @__PURE__ */ bt("div", { className: "flex w-max flex-col gap-y-1", children: [
     /* @__PURE__ */ w(
       Ct,
       {
-        autoFocus: e,
-        containerClassName: wt("flex items-center gap-2 has-[:disabled]:opacity-50 disabled:cursor-not-allowed", i),
+        autoFocus: t,
+        containerClassName: wt("flex items-center gap-2 has-disabled]:opacity-50 disabled:cursor-not-allowed", o),
         "data-1p-ignore": "true",
         "data-dashlane-disabled-on-field": "true",
         "data-lpignore": "true",
         "data-protonpass-ignore": "true",
         "data-testid": "spectral-input-otp",
-        id: k,
-        inputMode: d,
-        maxLength: m,
-        onChange: M,
-        onComplete: j,
+        id: T,
+        inputMode: i,
+        maxLength: d,
+        onChange: E,
+        onComplete: D,
         onPaste: J,
-        pasteTransformer: (R) => R.replaceAll("-", ""),
+        pasteTransformer: (O) => O.replaceAll("-", ""),
         pattern: F,
         pushPasswordManagerStrategy: "none",
-        ref: t,
+        ref: I,
         role: "textbox",
         textAlign: "center",
-        value: E,
+        value: C,
         ...P,
-        render: ({ slots: R }) => /* @__PURE__ */ w(Tt.Provider, { value: { slots: R, variant: h, maxLength: m }, children: o ?? /* @__PURE__ */ w(at, { children: /* @__PURE__ */ w(it, {}) }) })
+        render: ({ slots: O }) => /* @__PURE__ */ w(Tt.Provider, { value: { slots: O, variant: h, maxLength: d }, children: e ?? /* @__PURE__ */ w(at, { children: /* @__PURE__ */ w(it, {}) }) })
       }
     ),
-    l && f && /* @__PURE__ */ w($t, { dataTestId: "spectral-input-otp-error-message", id: zt(k), message: f })
+    s && l && /* @__PURE__ */ w($t, { dataTestId: "spectral-input-otp-error-message", id: zt(T), message: l })
   ] }) });
 };
 kt.displayName = "InputOTP";
@@ -323,40 +325,40 @@ const at = ({
 }) => /* @__PURE__ */ w("div", { className: "flex items-center justify-center gap-x-2", "data-testid": "spectral-input-otp-group", ref: t, ...e });
 at.displayName = "InputOTP.Group";
 const lt = ({
-  ref: t,
+  className: t,
   index: e,
-  className: o,
-  ...i
+  ref: o,
+  ...l
 }) => {
-  const { variant: f = "outlined", slots: u = [] } = ot(), { isInvalid: d } = yt(Mt), m = u[e] || { char: "", hasFakeCaret: !0, isActive: !1 };
+  const { variant: v = "outlined", slots: i = [] } = ot(), { isInvalid: d } = yt(Mt), m = i[e] || { char: "", hasFakeCaret: !0, isActive: !1 };
   return /* @__PURE__ */ bt(
     "div",
     {
       className: wt(
-        "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",
-        f === "filled" ? "bg-level-one border-level-one" : "border-input-otp-border bg-transparent",
+        "relative z-10 flex h-12 w-10 items-center justify-center rounded-[8px] border 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",
         !d && "border",
         d && "border-danger-400 focus-visible:outline-danger-400 border-2",
         m.isActive && !d && "outline-input-otp-border--focus z-10 outline-2 outline-offset-2",
         m.isActive && d && "outline-danger-400 outline-2 outline-offset-2",
-        o
+        t
       ),
       "data-index": e,
       "data-testid": "spectral-input-otp-slot",
-      "data-variant": f,
-      ref: t,
-      ...i,
+      "data-variant": v,
+      ref: o,
+      ...l,
       children: [
         m.char,
-        m.hasFakeCaret && /* @__PURE__ */ w("div", { className: "animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ w("div", { className: "bg-input-otp-caret h-8 w-px" }) })
+        m.hasFakeCaret && /* @__PURE__ */ w("div", { className: "motion-safe:animate-caret-blink pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ w("div", { className: "bg-input-otp-caret h-8 w-px" }) })
       ]
     }
   );
 };
 lt.displayName = "InputOTP.Slot";
 const it = ({ start: t = 0, count: e, className: o }) => {
-  const { maxLength: i = 0 } = ot(), f = e !== void 0 ? t + e : i, u = Array.from({ length: f - t }, (d, m) => t + m);
-  return /* @__PURE__ */ w(_t, { children: u.map((d) => /* @__PURE__ */ w(lt, { index: d, className: o }, d)) });
+  const { maxLength: l = 0 } = ot(), v = e !== void 0 ? t + e : l, i = Array.from({ length: v - t }, (d, m) => t + m);
+  return /* @__PURE__ */ w(_t, { children: i.map((d) => /* @__PURE__ */ w(lt, { index: d, className: o }, d)) });
 };
 it.displayName = "InputOTP.Slots";
 const It = ({
@@ -367,12 +369,12 @@ const It = ({
   return /* @__PURE__ */ w("div", { ref: t, role: "separator", ...e, "data-testid": "spectral-input-otp-separator", "data-variant": o, children: /* @__PURE__ */ w(Ht, { size: 24, color: o === "filled" ? "var(--color-input-otp-filled-separator)" : "var(--color-input-otp-border)" }) });
 };
 It.displayName = "InputOTP.Separator";
-const Sr = Object.assign(kt, {
+const Pr = Object.assign(kt, {
   Group: at,
   Slot: lt,
   Slots: it,
   Separator: It
 });
 export {
-  Sr as InputOTP
+  Pr as InputOTP
 };