@spear-ai/spectral 1.6.17 → 1.8.0

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

@@ -34,7 +34,6 @@ import "./Icons/KeyboardIcon.js";
 import "./Icons/LabelIcon.js";
 import "./Icons/LassoIcon.js";
 import "./Icons/LineToolIcon.js";
-import "./Icons/LineToolIcon2.js";
 import "./Icons/LiveViewIcon.js";
 import "./Icons/LoaderIcon.js";
 import "./Icons/LocationIcon.js";
@@ -48,6 +47,7 @@ import "./Icons/PanelIconClose.js";
 import "./Icons/PanelIconOpen.js";
 import "./Icons/PlayIcon.js";
 import "./Icons/PlusIcon.js";
+import "./Icons/PolygonIcon.js";
 import "./Icons/ResetIcon.js";
 import "./Icons/ReviewedIcon.js";
 import "./Icons/ScissorsIcon.js";
@@ -77,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();
@@ -92,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 : ""), p = i ?? Ot, B = Xt(p), z = n.useCallback((r) => {
-    f?.(r), Rt(r);
-  }, [f]), C = 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: [(R = c.current) == null ? void 0 : R.selectionStart, (W = c.current) == null ? void 0 : W.selectionEnd, (st = c.current) == null ? void 0 : st.selectionDirection] });
+  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 && c.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 = () => {
@@ -171,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, 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;
+      var r, a, f, S;
       (r = c.current) == null || r.dispatchEvent(new Event("input"));
-      let y = (a = c.current) == null ? void 0 : a.selectionStart, s = (v = c.current) == null ? void 0 : v.selectionEnd, b = (S = c.current) == null ? void 0 : S.selectionDirection;
-      y !== null && s !== null && (q(y), K(s), Q.current.prev = [y, s, b]);
+      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]);
     });
   }, [p, V]), n.useEffect(() => {
-    B !== void 0 && p !== B && B.length < u && p.length === u && j?.(p);
-  }, [u, j, B, p]);
-  let $ = re({ containerRef: Y, inputRef: c, pushPasswordManagerStrategy: T, isFocused: V }), ct = n.useCallback((r) => {
-    let a = r.currentTarget.value.slice(0, u);
-    if (a.length > 0 && C && !C.test(a)) {
+    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 (c.current) {
-      let a = Math.min(c.current.value.length, u - 1), v = c.current.value.length;
-      (r = c.current) == null || r.setSelectionRange(a, v), q(a), K(v);
+      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;
+  }, [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 = c.current) == null ? void 0 : a.selectionStart, U = (v = c.current) == null ? void 0 : v.selectionEnd, x = (b !== U ? p.slice(0, b) + s + p.slice(U) : p.slice(0, b) + s + p.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, p]), 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": p.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: p, ref: c, 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);
+    mt(r), (a = s.onPaste) == null || a.call(s, r);
   }, onChange: ct, onMouseOver: (r) => {
     var a;
-    pt(!0), (a = l.onMouseOver) == null || a.call(l, r);
+    pt(!0), (a = s.onMouseOver) == null || a.call(s, r);
   }, onMouseLeave: (r) => {
     var a;
-    pt(!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);
-  } })), [ct, dt, mt, M, ft, u, L, N, l, C?.source, p]), 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 = p[a] !== void 0 ? p[a] : null, s = p[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, p]), 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) {
@@ -266,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";
@@ -325,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 = ({

package/dist/Kbd.d.ts

@@ -1,12 +1,15 @@
 import { ComponentProps } from 'react';
-export type KbdProps = {
+export type KbdSymbol = 'arrowLeft' | 'arrowRight' | 'arrowUp' | 'arrowDown' | 'command' | 'option' | 'shift' | 'control' | 'return' | 'delete';
+export interface KbdProps {
     className?: string;
-};
-export type KbdGroupProps = {
+    symbol?: KbdSymbol;
+    symbolPosition?: 'start' | 'end';
+}
+export interface KbdGroupProps {
     className?: string;
-};
+}
 export declare const Kbd: {
-    ({ className, ...props }: KbdProps & ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
+    ({ className, symbol, symbolPosition, children, ...props }: KbdProps & ComponentProps<"kbd">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const KbdGroup: {

package/dist/Kbd.js

@@ -1,23 +1,88 @@
 import "./styles/main.css";
-import { jsx as s } from "react/jsx-runtime";
-import { cn as n } from "./utils/twUtils.js";
-const o = ({ className: t, ...e }) => /* @__PURE__ */ s(
-  "kbd",
-  {
-    "data-slot": "kbd",
-    "data-testid": "spectral-kbd",
-    className: n(
-      "bg-kbd-bg text-kbd-text pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-mono text-xs font-medium select-none",
-      "[[data-slot=tooltip-content]_&]:bg-level-three [&_svg:not([class*='size-'])]:size-3",
-      t
-    ),
-    ...e
-  }
-);
-o.displayName = "Kbd";
-const d = ({ className: t, ...e }) => /* @__PURE__ */ s("kbd", { "data-slot": "kbd-group", "data-testid": "spectral-kbd-group", className: n("inline-flex items-center gap-1", t), ...e });
-d.displayName = "KbdGroup";
+import { jsxs as w, jsx as t } from "react/jsx-runtime";
+import { cn as d } from "./utils/twUtils.js";
+const c = {
+  arrowLeft: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M10 5.75L3.75 12L10 18.25M4.5 12H20.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowRight: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M14 5.75L20.25 12L14 18.25M19.5 12H3.75", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowUp: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M5.75 10L12 3.75L18.25 10M12 20.25V4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  arrowDown: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M18 14L12 20L6 14M12 19V4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  command: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M9.25 9.25V6.5C9.25 4.98122 8.01878 3.75 6.5 3.75C4.98122 3.75 3.75 4.98122 3.75 6.5C3.75 8.01878 4.98122 9.25 6.5 9.25H9.25ZM9.25 9.25H14.75M9.25 9.25V14.75M14.75 9.25V6.5C14.75 4.98122 15.9812 3.75 17.5 3.75C19.0188 3.75 20.25 4.98122 20.25 6.5C20.25 8.01878 19.0188 9.25 17.5 9.25H14.75ZM14.75 9.25V14.75M14.75 14.75H9.25M14.75 14.75V17.5C14.75 19.0188 15.9812 20.25 17.5 20.25C19.0188 20.25 20.25 19.0188 20.25 17.5C20.25 15.9812 19.0188 14.75 17.5 14.75H14.75ZM9.25 14.75V17.5C9.25 19.0188 8.01878 20.25 6.5 20.25C4.98122 20.25 3.75 19.0188 3.75 17.5C3.75 15.9812 4.98122 14.75 6.5 14.75H9.25Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square"
+    }
+  ) }),
+  option: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M3.75 4.75H7.40962C7.77384 4.75 8.10925 4.94802 8.2852 5.26692L15.7148 18.7331C15.8907 19.052 16.2262 19.25 16.5904 19.25H20.25M15.75 4.75H20.25", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  shift: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M2.91032 11.5511L11.2848 2.98182C11.6771 2.5804 12.3229 2.5804 12.7152 2.98182L21.0897 11.5511C21.7085 12.1843 21.2599 13.25 20.3745 13.25H17.1316V19.25C17.1316 19.8023 16.6839 20.25 16.1316 20.25H7.86842C7.31614 20.25 6.86842 19.8023 6.86842 19.25V13.25H3.62551C2.74013 13.25 2.2915 12.1843 2.91032 11.5511Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "square",
+      strokeLinejoin: "round"
+    }
+  ) }),
+  control: /* @__PURE__ */ t("svg", { className: "-translate-y-0.5", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t("path", { d: "M8 13.9999L11.6464 10.3535C11.8417 10.1582 12.1583 10.1582 12.3536 10.3535L16 13.9999", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+  return: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20.25 4C19.8358 4 19.5 4.33579 19.5 4.75V14.25C19.5 14.3881 19.3881 14.5 19.25 14.5H5.56066L8.28033 11.7803C8.57322 11.4874 8.57322 11.0126 8.28033 10.7197C7.98744 10.4268 7.51256 10.4268 7.21967 10.7197L3.21967 14.7197C2.92678 15.0126 2.92678 15.4874 3.21967 15.7803L7.21967 19.7803C7.51256 20.0732 7.98744 20.0732 8.28033 19.7803C8.57322 19.4874 8.57322 19.0126 8.28033 18.7197L5.56066 16H19.25C20.2165 16 21 15.2165 21 14.25V4.75C21 4.33579 20.6642 4 20.25 4Z",
+      fill: "currentColor"
+    }
+  ) }),
+  delete: /* @__PURE__ */ t("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ t(
+    "path",
+    {
+      d: "M14.9988 9.75L12.7488 12M12.7488 12L10.4988 14.25M12.7488 12L10.4988 9.75M12.7488 12L14.9988 14.25M6.55509 4.75H20.2488C20.8011 4.75 21.2488 5.19772 21.2488 5.75V18.25C21.2488 18.8023 20.8011 19.25 20.2488 19.25H6.55509C6.2092 19.25 5.88786 19.0712 5.70545 18.7774L1.82614 12.5274C1.62566 12.2044 1.62566 11.7956 1.82614 11.4726L5.70545 5.22264C5.88786 4.92875 6.2092 4.75 6.55509 4.75Z",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) })
+}, p = {
+  arrowLeft: "Left Arrow",
+  arrowRight: "Right Arrow",
+  arrowUp: "Up Arrow",
+  arrowDown: "Down Arrow",
+  command: "Command",
+  option: "Option",
+  shift: "Shift",
+  control: "Control",
+  return: "Return",
+  delete: "Delete"
+}, g = ({ className: r, symbol: e, symbolPosition: n = "start", children: o, ...i }) => {
+  const l = o != null && o !== "", s = e && /* @__PURE__ */ t("span", { "aria-hidden": "true", children: c[e] }), a = !l && e ? p[e] : void 0, h = i["aria-label"] ?? a;
+  return /* @__PURE__ */ w(
+    "kbd",
+    {
+      className: d(
+        "bg-kbd-bg text-kbd-text pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-mono! text-xs font-medium select-none",
+        "in-data-[slot=tooltip-content]:bg-level-three [&_svg:not([class*='size-'])]:size-3",
+        r
+      ),
+      "data-slot": "kbd",
+      "data-testid": "spectral-kbd",
+      ...i,
+      "aria-label": h,
+      children: [
+        n === "start" && s,
+        o,
+        n === "end" && s
+      ]
+    }
+  );
+};
+g.displayName = "Kbd";
+const C = ({ className: r, ...e }) => /* @__PURE__ */ t("kbd", { className: d("inline-flex items-center gap-1", r), "data-slot": "kbd-group", "data-testid": "spectral-kbd-group", ...e });
+C.displayName = "KbdGroup";
 export {
-  o as Kbd,
-  d as KbdGroup
+  g as Kbd,
+  C as KbdGroup
 };

package/dist/Label.d.ts

@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, Ref } from 'react';
-export type LabelProps = ComponentPropsWithoutRef<'label'>;
+export interface LabelProps extends ComponentPropsWithoutRef<'label'> {
+    ref?: Ref<HTMLLabelElement>;
+}
 export declare const Label: {
-    ({ ref, className, ...props }: LabelProps & {
+    ({ className, ref, ...props }: LabelProps & {
         ref?: Ref<HTMLLabelElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Label.js

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