prometeo-design-system 2.5.1 → 2.5.3

package/dist/Icons.es.js

@@ -1,6 +1,6 @@
 import { j as h } from "./jsx-runtime-DKDX3adD.js";
 import { memo as v } from "react";
-const l = (t) => v(t), w = l(({
+const l = (t) => v(t), o = l(({
   size: t = 24,
   className: r,
   ...q
@@ -16,7 +16,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480q0 17 11.5 28.5T480-440Zm0-160q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm320 440H160q-33 0-56.5-23.5T80-240v-160q33 0 56.5-23.5T160-480q0-33-23.5-56.5T80-560v-160q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v160q-33 0-56.5 23.5T800-480q0 33 23.5 56.5T880-400v160q0 33-23.5 56.5T800-160Zm0-80v-102q-37-22-58.5-58.5T720-480q0-43 21.5-79.5T800-618v-102H160v102q37 22 58.5 58.5T240-480q0 43-21.5 79.5T160-342v102h640ZM480-480Z" })
   }
-)), o = l(({
+)), w = l(({
   size: t = 24,
   className: r,
   ...q
@@ -32,7 +32,7 @@ const l = (t) => v(t), w = l(({
     ...q,
     children: /* @__PURE__ */ h.jsx("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm0-160q17 0 28.5-11.5T520-480q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480q0 17 11.5 28.5T480-440Zm0-160q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm320 440H160q-33 0-56.5-23.5T80-240v-160q33 0 56.5-23.5T160-480q0-33-23.5-56.5T80-560v-160q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v160q-33 0-56.5 23.5T800-480q0 33 23.5 56.5T880-400v160q0 33-23.5 56.5T800-160Z" })
   }
-)), T = l(({
+)), s = l(({
   size: t = 24,
   className: r,
   ...q
@@ -48,7 +48,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z" })
   }
-)), s = l(({
+)), T = l(({
   size: t = 24,
   className: r,
   ...q
@@ -144,7 +144,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z" })
   }
-)), Z = l(({
+)), c = l(({
   size: t = 24,
   className: r,
   ...q
@@ -160,7 +160,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M400-240 160-480l240-240 56 58-142 142h486v80H314l142 142-56 58Z" })
   }
-)), c = l(({
+)), Z = l(({
   size: t = 24,
   className: r,
   ...q
@@ -304,7 +304,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M400-240v-80h160v80H400ZM240-440v-80h480v80H240ZM120-640v-80h720v80H120Z" })
   }
-)), f = l(({
+)), L = l(({
   size: t = 24,
   className: r,
   ...q
@@ -320,7 +320,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
   }
-)), H = l(({
+)), f = l(({
   size: t = 24,
   className: r,
   ...q
@@ -336,7 +336,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "m668-380 152-130 120 10-176 153 52 227-102-62-46-198Zm-94-292-42-98 46-110 92 217-96-9ZM294-287l126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM173-120l65-281L20-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-340Z" })
   }
-)), L = l(({
+)), H = l(({
   size: t = 24,
   className: r,
   ...q
@@ -400,7 +400,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M440-320v-326L336-542l-56-58 200-200 200 200-56 58-104-104v326h-80ZM240-160q-33 0-56.5-23.5T160-240v-120h80v120h480v-120h80v120q0 33-23.5 56.5T720-160H240Z" })
   }
-)), E = l(({
+)), V = l(({
   size: t = 24,
   className: r,
   ...q
@@ -416,7 +416,7 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z" })
   }
-)), V = l(({
+)), E = l(({
   size: t = 24,
   className: r,
   ...q
@@ -599,17 +599,33 @@ const l = (t) => v(t), w = l(({
     className: r,
     children: /* @__PURE__ */ h.jsx("path", { d: "M3.5 21V17.5714H20.5V21H3.5ZM6.475 15L10.9375 3H13.0625L17.525 15H15.485L14.4225 11.9143H9.62L8.515 15H6.475ZM10.215 10.2H13.785L12.0425 5.22857H11.9575L10.215 10.2Z", fill: "currentColor" })
   }
-)), z = {
-  Ticket: w,
-  Home: T,
-  Boards: s,
+)), z = l(({
+  size: t = 24,
+  className: r,
+  ...q
+}) => /* @__PURE__ */ h.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: t,
+    height: t,
+    viewBox: "0 -960 960 960",
+    fill: "currentColor",
+    ...q,
+    className: r,
+    children: /* @__PURE__ */ h.jsx("path", { d: "M286.5 -253.875L180 -360.375L222 -402.375L285.75 -338.625L413.25 -466.125L455.25 -423.375L286.5 -253.875ZM286.5 -493.875L180 -600.375L222 -642.375L285.75 -578.625L413.25 -706.125L455.25 -663.375L286.5 -493.875ZM510 -313.875V-373.875H780V-313.875H510ZM510 -553.875V-613.875H780V-553.875H510Z", fill: "currentColor", transform: "translate(480,-480) scale(1.45) translate(-480,480)" })
+  }
+)), t0 = {
+  Ticket: o,
+  Home: s,
+  Boards: T,
   Notifications: n,
   Help: e,
   Settings: i,
   CrevronLeft: x,
   CrevronRight: g,
-  ArrowLeft: Z,
-  Shared: c,
+  ArrowLeft: c,
+  Shared: Z,
   ChevronDown: m,
   Collapse: d,
   Calendar: C,
@@ -618,14 +634,14 @@ const l = (t) => v(t), w = l(({
   Logout: j,
   ArrowUpDown: a,
   Filter: M,
-  Search: f,
-  Stars: H,
-  MoreVert: L,
+  Search: L,
+  Stars: f,
+  MoreVert: H,
   Add: B,
   Edit: k,
   Upload: y,
-  Copy: E,
-  FaLock: V,
+  Copy: V,
+  FaLock: E,
   AccountCircle: A,
   UserAdd: F,
   AttachFile: S,
@@ -637,7 +653,7 @@ const l = (t) => v(t), w = l(({
   Check: N,
   Info: O,
   Error: P,
-  TicketFilled: o,
+  TicketFilled: w,
   UploadCloud: R,
   Clock: $,
   Pause: G,
@@ -646,10 +662,11 @@ const l = (t) => v(t), w = l(({
   Sort: Q,
   Cancel: W,
   CheckCircle: X,
-  FormatColorText: Y
+  FormatColorText: Y,
+  CheckList: z
 };
-for (const [t, r] of Object.entries(z))
+for (const [t, r] of Object.entries(t0))
   r.displayName = `${t}_Icon`;
 export {
-  z as Icons
+  t0 as Icons
 };

package/dist/{Input-Bhd0bmVq.js → Input-PNwH7rb6.js}

@@ -113,7 +113,7 @@ const h = {
   const x = {
     small: {
       container: "text-sm",
-      input: "h-10 px-3 text-sm",
+      input: "h-10 px-3 text-[1rem]",
       label: "text-xs peer-focus:text-xs peer-placeholder-shown:text-sm",
       icon: "w-4 h-4 right-3"
     },

package/dist/Input.es.js

@@ -1,4 +1,4 @@
-import { I as f } from "./Input-Bhd0bmVq.js";
+import { I as f } from "./Input-PNwH7rb6.js";
 export {
   f as default
 };

package/dist/OtpInput.es.js

@@ -1,178 +1,178 @@
 import { j as p } from "./jsx-runtime-DKDX3adD.js";
-import { Icons as ve } from "./Icons.es.js";
-import { c as L } from "./cn-B6yFEsav.js";
+import { Icons as ge } from "./Icons.es.js";
+import { c as $ } from "./cn-B6yFEsav.js";
 import * as n from "react";
-import ge from "react";
-var De = Object.defineProperty, Te = Object.defineProperties, Oe = Object.getOwnPropertyDescriptors, te = Object.getOwnPropertySymbols, we = Object.prototype.hasOwnProperty, ye = Object.prototype.propertyIsEnumerable, xe = (t, r, a) => r in t ? De(t, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : t[r] = a, We = (t, r) => {
-  for (var a in r || (r = {})) we.call(r, a) && xe(t, a, r[a]);
-  if (te) for (var a of te(r)) ye.call(r, a) && xe(t, a, r[a]);
+import xe, { memo as De } from "react";
+var Oe = Object.defineProperty, Te = Object.defineProperties, We = Object.getOwnPropertyDescriptors, ee = Object.getOwnPropertySymbols, we = Object.prototype.hasOwnProperty, ye = Object.prototype.propertyIsEnumerable, be = (t, a, r) => a in t ? Oe(t, a, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[a] = r, Ae = (t, a) => {
+  for (var r in a || (a = {})) we.call(a, r) && be(t, r, a[r]);
+  if (ee) for (var r of ee(a)) ye.call(a, r) && be(t, r, a[r]);
   return t;
-}, Ae = (t, r) => Te(t, Oe(r)), Be = (t, r) => {
-  var a = {};
-  for (var u in t) we.call(t, u) && r.indexOf(u) < 0 && (a[u] = t[u]);
-  if (t != null && te) for (var u of te(t)) r.indexOf(u) < 0 && ye.call(t, u) && (a[u] = t[u]);
-  return a;
+}, Be = (t, a) => Te(t, We(a)), _e = (t, a) => {
+  var r = {};
+  for (var u in t) we.call(t, u) && a.indexOf(u) < 0 && (r[u] = t[u]);
+  if (t != null && ee) for (var u of ee(t)) a.indexOf(u) < 0 && ye.call(t, u) && (r[u] = t[u]);
+  return r;
 };
-function _e(t) {
-  let r = setTimeout(t, 0), a = setTimeout(t, 10), u = setTimeout(t, 50);
-  return [r, a, u];
-}
 function Ie(t) {
-  let r = n.useRef();
+  let a = setTimeout(t, 0), r = setTimeout(t, 10), u = setTimeout(t, 50);
+  return [a, r, u];
+}
+function Fe(t) {
+  let a = n.useRef();
   return n.useEffect(() => {
-    r.current = t;
-  }), r.current;
+    a.current = t;
+  }), a.current;
 }
-var Fe = 18, Ee = 40, He = `${Ee}px`, Le = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
-function $e({ containerRef: t, inputRef: r, pushPasswordManagerStrategy: a, isFocused: u }) {
-  let [C, d] = n.useState(!1), [R, M] = n.useState(!1), [D, W] = n.useState(!1), A = n.useMemo(() => a === "none" ? !1 : (a === "increase-width" || a === "experimental-no-flickering") && C && R, [C, R, a]), x = n.useCallback(() => {
-    let f = t.current, v = r.current;
-    if (!f || !v || D || a === "none") return;
-    let m = f, b = m.getBoundingClientRect().left + m.offsetWidth, w = m.getBoundingClientRect().top + m.offsetHeight / 2, o = b - Fe, j = w;
-    document.querySelectorAll(Le).length === 0 && document.elementFromPoint(o, j) === f || (d(!0), W(!0));
-  }, [t, r, D, a]);
+var He = 18, Se = 40, Le = `${Se}px`, $e = ["[data-lastpass-icon-root]", "com-1password-button", "[data-dashlanecreated]", '[style$="2147483647 !important;"]'].join(",");
+function ze({ containerRef: t, inputRef: a, pushPasswordManagerStrategy: r, isFocused: u }) {
+  let [M, d] = n.useState(!1), [D, k] = n.useState(!1), [O, B] = n.useState(!1), _ = n.useMemo(() => r === "none" ? !1 : (r === "increase-width" || r === "experimental-no-flickering") && M && D, [M, D, r]), x = n.useCallback(() => {
+    let f = t.current, v = a.current;
+    if (!f || !v || O || r === "none") return;
+    let m = f, b = m.getBoundingClientRect().left + m.offsetWidth, w = m.getBoundingClientRect().top + m.offsetHeight / 2, o = b - He, P = w;
+    document.querySelectorAll($e).length === 0 && document.elementFromPoint(o, P) === f || (d(!0), B(!0));
+  }, [t, a, O, r]);
   return n.useEffect(() => {
     let f = t.current;
-    if (!f || a === "none") return;
+    if (!f || r === "none") return;
     function v() {
       let b = window.innerWidth - f.getBoundingClientRect().right;
-      M(b >= Ee);
+      k(b >= Se);
     }
     v();
     let m = setInterval(v, 1e3);
     return () => {
       clearInterval(m);
     };
-  }, [t, a]), n.useEffect(() => {
-    let f = u || document.activeElement === r.current;
-    if (a === "none" || !f) return;
+  }, [t, r]), n.useEffect(() => {
+    let f = u || document.activeElement === a.current;
+    if (r === "none" || !f) return;
     let v = setTimeout(x, 0), m = setTimeout(x, 2e3), b = setTimeout(x, 5e3), w = setTimeout(() => {
-      W(!0);
+      B(!0);
     }, 6e3);
     return () => {
       clearTimeout(v), clearTimeout(m), clearTimeout(b), clearTimeout(w);
     };
-  }, [r, u, a, x]), { hasPWMBadge: C, willPushPWMBadge: A, PWM_BADGE_SPACE_WIDTH: He };
+  }, [a, u, r, x]), { hasPWMBadge: M, willPushPWMBadge: _, PWM_BADGE_SPACE_WIDTH: Le };
 }
-var ze = n.createContext({}), Se = n.forwardRef((t, r) => {
-  var a = t, { value: u, onChange: C, maxLength: d, textAlign: R = "left", pattern: M, placeholder: D, inputMode: W = "numeric", onComplete: A, pushPasswordManagerStrategy: x = "increase-width", pasteTransformer: f, containerClassName: v, noScriptCSSFallback: m = Ge, render: b, children: w } = a, o = Be(a, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), j, k, $, V, X;
-  let [ne, q] = n.useState(typeof o.defaultValue == "string" ? o.defaultValue : ""), i = u ?? ne, B = Ie(i), Z = n.useCallback((e) => {
-    C?.(e), q(e);
-  }, [C]), P = n.useMemo(() => M ? typeof M == "string" ? new RegExp(M) : M : null, [M]), c = n.useRef(null), le = n.useRef(null), re = n.useRef({ value: i, onChange: Z, isIOS: typeof window < "u" && ((k = (j = window?.CSS) == null ? void 0 : j.supports) == null ? void 0 : k.call(j, "-webkit-touch-callout", "none")) }), Y = n.useRef({ prev: [($ = c.current) == null ? void 0 : $.selectionStart, (V = c.current) == null ? void 0 : V.selectionEnd, (X = c.current) == null ? void 0 : X.selectionDirection] });
-  n.useImperativeHandle(r, () => c.current, []), n.useEffect(() => {
+var Ge = n.createContext({}), Ee = n.forwardRef((t, a) => {
+  var r = t, { value: u, onChange: M, maxLength: d, textAlign: D = "left", pattern: k, placeholder: O, inputMode: B = "numeric", onComplete: _, pushPasswordManagerStrategy: x = "increase-width", pasteTransformer: f, containerClassName: v, noScriptCSSFallback: m = Ve, render: b, children: w } = r, o = _e(r, ["value", "onChange", "maxLength", "textAlign", "pattern", "placeholder", "inputMode", "onComplete", "pushPasswordManagerStrategy", "pasteTransformer", "containerClassName", "noScriptCSSFallback", "render", "children"]), P, N, U, T, V;
+  let [te, ne] = n.useState(typeof o.defaultValue == "string" ? o.defaultValue : ""), i = u ?? te, E = Fe(i), q = n.useCallback((e) => {
+    M?.(e), ne(e);
+  }, [M]), C = n.useMemo(() => k ? typeof k == "string" ? new RegExp(k) : k : null, [k]), c = n.useRef(null), le = n.useRef(null), ae = n.useRef({ value: i, onChange: q, isIOS: typeof window < "u" && ((N = (P = window?.CSS) == null ? void 0 : P.supports) == null ? void 0 : N.call(P, "-webkit-touch-callout", "none")) }), X = n.useRef({ prev: [(U = c.current) == null ? void 0 : U.selectionStart, (T = c.current) == null ? void 0 : T.selectionEnd, (V = c.current) == null ? void 0 : V.selectionDirection] });
+  n.useImperativeHandle(a, () => c.current, []), n.useEffect(() => {
     let e = c.current, l = le.current;
     if (!e || !l) return;
-    re.current.value !== e.value && re.current.onChange(e.value), Y.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
+    ae.current.value !== e.value && ae.current.onChange(e.value), X.current.prev = [e.selectionStart, e.selectionEnd, e.selectionDirection];
     function h() {
       if (document.activeElement !== e) {
-        K(null), Q(null);
+        J(null), K(null);
         return;
       }
-      let s = e.selectionStart, g = e.selectionEnd, ee = e.selectionDirection, S = e.maxLength, I = e.value, N = Y.current.prev, T = -1, O = -1, F;
-      if (I.length !== 0 && s !== null && g !== null) {
-        let ke = s === g, Ne = s === I.length && I.length < S;
+      let s = e.selectionStart, g = e.selectionEnd, Y = e.selectionDirection, j = e.maxLength, F = e.value, R = X.current.prev, W = -1, A = -1, H;
+      if (F.length !== 0 && s !== null && g !== null) {
+        let ke = s === g, Ne = s === F.length && F.length < j;
         if (ke && !Ne) {
-          let H = s;
-          if (H === 0) T = 0, O = 1, F = "forward";
-          else if (H === S) T = H - 1, O = H, F = "backward";
-          else if (S > 1 && I.length > 1) {
+          let L = s;
+          if (L === 0) W = 0, A = 1, H = "forward";
+          else if (L === j) W = L - 1, A = L, H = "backward";
+          else if (j > 1 && F.length > 1) {
             let ie = 0;
-            if (N[0] !== null && N[1] !== null) {
-              F = H < N[1] ? "backward" : "forward";
-              let Re = N[0] === N[1] && N[0] < S;
-              F === "backward" && !Re && (ie = -1);
+            if (R[0] !== null && R[1] !== null) {
+              H = L < R[1] ? "backward" : "forward";
+              let Re = R[0] === R[1] && R[0] < j;
+              H === "backward" && !Re && (ie = -1);
             }
-            T = ie + H, O = ie + H + 1;
+            W = ie + L, A = ie + L + 1;
           }
         }
-        T !== -1 && O !== -1 && T !== O && c.current.setSelectionRange(T, O, F);
+        W !== -1 && A !== -1 && W !== A && c.current.setSelectionRange(W, A, H);
       }
-      let me = T !== -1 ? T : s, he = O !== -1 ? O : g, Me = F ?? ee;
-      K(me), Q(he), Y.current.prev = [me, he, Me];
+      let he = W !== -1 ? W : s, ve = A !== -1 ? A : g, Me = H ?? Y;
+      J(he), K(ve), X.current.prev = [he, ve, Me];
     }
-    if (document.addEventListener("selectionchange", h, { capture: !0 }), h(), document.activeElement === e && ae(!0), !document.getElementById("input-otp-style")) {
+    if (document.addEventListener("selectionchange", h, { capture: !0 }), h(), document.activeElement === e && re(!0), !document.getElementById("input-otp-style")) {
       let s = document.createElement("style");
       if (s.id = "input-otp-style", document.head.appendChild(s), s.sheet) {
         let g = "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;";
-        U(s.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), U(s.sheet, `[data-input-otp]:autofill { ${g} }`), U(s.sheet, `[data-input-otp]:-webkit-autofill { ${g} }`), U(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; } }"), U(s.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
+        Q(s.sheet, "[data-input-otp]::selection { background: transparent !important; color: transparent !important; }"), Q(s.sheet, `[data-input-otp]:autofill { ${g} }`), Q(s.sheet, `[data-input-otp]:-webkit-autofill { ${g} }`), Q(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; } }"), Q(s.sheet, "[data-input-otp] + * { pointer-events: all !important; }");
       }
     }
     let y = () => {
       l && l.style.setProperty("--root-height", `${e.clientHeight}px`);
     };
     y();
-    let E = new ResizeObserver(y);
-    return E.observe(e), () => {
-      document.removeEventListener("selectionchange", h, { capture: !0 }), E.disconnect();
+    let S = new ResizeObserver(y);
+    return S.observe(e), () => {
+      document.removeEventListener("selectionchange", h, { capture: !0 }), S.disconnect();
     };
   }, []);
-  let [se, ue] = n.useState(!1), [J, ae] = n.useState(!1), [_, K] = n.useState(null), [z, Q] = n.useState(null);
+  let [ue, ce] = n.useState(!1), [Z, re] = n.useState(!1), [I, J] = n.useState(null), [z, K] = n.useState(null);
   n.useEffect(() => {
-    _e(() => {
+    Ie(() => {
       var e, l, h, y;
       (e = c.current) == null || e.dispatchEvent(new Event("input"));
-      let E = (l = c.current) == null ? void 0 : l.selectionStart, s = (h = c.current) == null ? void 0 : h.selectionEnd, g = (y = c.current) == null ? void 0 : y.selectionDirection;
-      E !== null && s !== null && (K(E), Q(s), Y.current.prev = [E, s, g]);
+      let S = (l = c.current) == null ? void 0 : l.selectionStart, s = (h = c.current) == null ? void 0 : h.selectionEnd, g = (y = c.current) == null ? void 0 : y.selectionDirection;
+      S !== null && s !== null && (J(S), K(s), X.current.prev = [S, s, g]);
     });
-  }, [i, J]), n.useEffect(() => {
-    B !== void 0 && i !== B && B.length < d && i.length === d && A?.(i);
-  }, [d, A, B, i]);
-  let G = $e({ containerRef: le, inputRef: c, pushPasswordManagerStrategy: x, isFocused: J }), ce = n.useCallback((e) => {
+  }, [i, Z]), n.useEffect(() => {
+    E !== void 0 && i !== E && E.length < d && i.length === d && _?.(i);
+  }, [d, _, E, i]);
+  let G = ze({ containerRef: le, inputRef: c, pushPasswordManagerStrategy: x, isFocused: Z }), de = n.useCallback((e) => {
     let l = e.currentTarget.value.slice(0, d);
-    if (l.length > 0 && P && !P.test(l)) {
+    if (l.length > 0 && C && !C.test(l)) {
       e.preventDefault();
       return;
     }
-    typeof B == "string" && l.length < B.length && document.dispatchEvent(new Event("selectionchange")), Z(l);
-  }, [d, Z, B, P]), de = n.useCallback(() => {
+    typeof E == "string" && l.length < E.length && document.dispatchEvent(new Event("selectionchange")), q(l);
+  }, [d, q, E, C]), fe = n.useCallback(() => {
     var e;
     if (c.current) {
       let l = Math.min(c.current.value.length, d - 1), h = c.current.value.length;
-      (e = c.current) == null || e.setSelectionRange(l, h), K(l), Q(h);
+      (e = c.current) == null || e.setSelectionRange(l, h), J(l), K(h);
     }
-    ae(!0);
-  }, [d]), fe = n.useCallback((e) => {
+    re(!0);
+  }, [d]), pe = n.useCallback((e) => {
     var l, h;
     let y = c.current;
-    if (!f && (!re.current.isIOS || !e.clipboardData || !y)) return;
-    let E = e.clipboardData.getData("text/plain"), s = f ? f(E) : E;
+    if (!f && (!ae.current.isIOS || !e.clipboardData || !y)) return;
+    let S = e.clipboardData.getData("text/plain"), s = f ? f(S) : S;
     e.preventDefault();
-    let g = (l = c.current) == null ? void 0 : l.selectionStart, ee = (h = c.current) == null ? void 0 : h.selectionEnd, S = (g !== ee ? i.slice(0, g) + s + i.slice(ee) : i.slice(0, g) + s + i.slice(g)).slice(0, d);
-    if (S.length > 0 && P && !P.test(S)) return;
-    y.value = S, Z(S);
-    let I = Math.min(S.length, d - 1), N = S.length;
-    y.setSelectionRange(I, N), K(I), Q(N);
-  }, [d, Z, P, i]), je = n.useMemo(() => ({ position: "relative", cursor: o.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [o.disabled]), pe = 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: R, 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, R]), Pe = n.useMemo(() => n.createElement("input", Ae(We({ autoComplete: o.autoComplete || "one-time-code" }, o), { "data-input-otp": !0, "data-input-otp-placeholder-shown": i.length === 0 || void 0, "data-input-otp-mss": _, "data-input-otp-mse": z, inputMode: W, pattern: P?.source, "aria-placeholder": D, style: pe, maxLength: d, value: i, ref: c, onPaste: (e) => {
+    let g = (l = c.current) == null ? void 0 : l.selectionStart, Y = (h = c.current) == null ? void 0 : h.selectionEnd, j = (g !== Y ? i.slice(0, g) + s + i.slice(Y) : i.slice(0, g) + s + i.slice(g)).slice(0, d);
+    if (j.length > 0 && C && !C.test(j)) return;
+    y.value = j, q(j);
+    let F = Math.min(j.length, d - 1), R = j.length;
+    y.setSelectionRange(F, R), J(F), K(R);
+  }, [d, q, C, i]), je = n.useMemo(() => ({ position: "relative", cursor: o.disabled ? "default" : "text", userSelect: "none", WebkitUserSelect: "none", pointerEvents: "none" }), [o.disabled]), me = 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: 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" }), [G.PWM_BADGE_SPACE_WIDTH, G.willPushPWMBadge, D]), Pe = n.useMemo(() => n.createElement("input", Be(Ae({ autoComplete: o.autoComplete || "one-time-code" }, o), { "data-input-otp": !0, "data-input-otp-placeholder-shown": i.length === 0 || void 0, "data-input-otp-mss": I, "data-input-otp-mse": z, inputMode: B, pattern: C?.source, "aria-placeholder": O, style: me, maxLength: d, value: i, ref: c, onPaste: (e) => {
     var l;
-    fe(e), (l = o.onPaste) == null || l.call(o, e);
-  }, onChange: ce, onMouseOver: (e) => {
+    pe(e), (l = o.onPaste) == null || l.call(o, e);
+  }, onChange: de, onMouseOver: (e) => {
     var l;
-    ue(!0), (l = o.onMouseOver) == null || l.call(o, e);
+    ce(!0), (l = o.onMouseOver) == null || l.call(o, e);
   }, onMouseLeave: (e) => {
     var l;
-    ue(!1), (l = o.onMouseLeave) == null || l.call(o, e);
+    ce(!1), (l = o.onMouseLeave) == null || l.call(o, e);
   }, onFocus: (e) => {
     var l;
-    de(), (l = o.onFocus) == null || l.call(o, e);
+    fe(), (l = o.onFocus) == null || l.call(o, e);
   }, onBlur: (e) => {
     var l;
-    ae(!1), (l = o.onBlur) == null || l.call(o, e);
-  } })), [ce, de, fe, W, pe, d, z, _, o, P?.source, i]), oe = n.useMemo(() => ({ slots: Array.from({ length: d }).map((e, l) => {
+    re(!1), (l = o.onBlur) == null || l.call(o, e);
+  } })), [de, fe, pe, B, me, d, z, I, o, C?.source, i]), oe = n.useMemo(() => ({ slots: Array.from({ length: d }).map((e, l) => {
     var h;
-    let y = J && _ !== null && z !== null && (_ === z && l === _ || l >= _ && l < z), E = i[l] !== void 0 ? i[l] : null, s = i[0] !== void 0 ? null : (h = D?.[l]) != null ? h : null;
-    return { char: E, placeholderChar: s, isActive: y, hasFakeCaret: y && E === null };
-  }), isFocused: J, isHovering: !o.disabled && se }), [J, se, d, z, _, o.disabled, i]), Ce = n.useMemo(() => b ? b(oe) : n.createElement(ze.Provider, { value: oe }, w), [w, oe, b]);
+    let y = Z && I !== null && z !== null && (I === z && l === I || l >= I && l < z), S = i[l] !== void 0 ? i[l] : null, s = i[0] !== void 0 ? null : (h = O?.[l]) != null ? h : null;
+    return { char: S, placeholderChar: s, isActive: y, hasFakeCaret: y && S === null };
+  }), isFocused: Z, isHovering: !o.disabled && ue }), [Z, ue, d, z, I, o.disabled, i]), Ce = n.useMemo(() => b ? b(oe) : n.createElement(Ge.Provider, { value: oe }, w), [w, oe, b]);
   return n.createElement(n.Fragment, null, m !== null && n.createElement("noscript", null, n.createElement("style", null, m)), n.createElement("div", { ref: le, "data-input-otp-container": !0, style: je, className: v }, Ce, n.createElement("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" } }, Pe)));
 });
-Se.displayName = "Input";
-function U(t, r) {
+Ee.displayName = "Input";
+function Q(t, a) {
   try {
-    t.insertRule(r);
+    t.insertRule(a);
   } catch {
-    console.error("input-otp could not insert CSS rule:", r);
+    console.error("input-otp could not insert CSS rule:", a);
   }
 }
-var Ge = `
+var Ve = `
 [data-input-otp] {
   --nojs-bg: white !important;
   --nojs-fg: black !important;
@@ -192,18 +192,18 @@ var Ge = `
     --nojs-fg: white !important;
   }
 }`;
-const Ke = ({
+const qe = ({
   value: t = "",
-  name: r,
-  onChange: a,
+  name: a,
+  onChange: r,
   onComplete: u,
-  onBlur: C,
+  onBlur: M,
   maxLength: d = 6,
-  placeholder: R = "•",
-  disabled: M = !1,
-  className: D,
-  autoFocus: W = !1,
-  pasteTransformer: A,
+  placeholder: D = "•",
+  disabled: k = !1,
+  className: O,
+  autoFocus: B = !1,
+  pasteTransformer: _,
   errorComponent: x,
   hasError: f,
   helperComponent: v,
@@ -212,61 +212,65 @@ const Ke = ({
   variant: w = "default",
   hideSlotsMiddleSeparator: o = !1
 }) => {
-  const j = m === "left" ? "justify-start w-full text-left" : m === "center" ? "justify-center" : "justify-end text-right w-full", k = {
+  const P = m === "left" ? "justify-start w-full text-left" : m === "center" ? "justify-center" : "justify-end text-right w-full", N = {
     default: {
       text: "text-neutral-default-default",
       icon: null
     },
     error: {
       text: "text-error-default-default",
-      icon: /* @__PURE__ */ p.jsx(ve.Error, { size: 18, className: "text-error-default-default" })
+      icon: /* @__PURE__ */ p.jsx(ge.Error, { size: 18, className: "text-error-default-default" })
     },
     success: {
       text: "text-success-default-default",
-      icon: /* @__PURE__ */ p.jsx(ve.Check, { size: 18, className: "text-success-default-default" })
+      icon: /* @__PURE__ */ p.jsx(ge.Check, { size: 18, className: "text-success-default-default" })
     }
+  }, U = (T) => {
+    r?.(T, a);
   };
   return /* @__PURE__ */ p.jsx(
-    Se,
+    Ee,
     {
       value: t,
-      name: r,
-      autoFocus: W,
-      onChange: a,
+      name: a,
+      autoFocus: B,
+      onChange: U,
       onComplete: u,
-      onBlur: C,
+      onBlur: M,
       maxLength: d,
-      disabled: M,
-      pasteTransformer: A,
+      disabled: k,
+      pasteTransformer: _,
       spellCheck: !1,
-      containerClassName: L("group flex items-center has-[:disabled]:opacity-30 w-max justify-center", D),
-      render: ({ slots: $ }) => {
-        const V = Math.floor($.length / 2), X = $.slice(0, V), ne = $.slice(V);
+      containerClassName: $("group flex items-center has-[:disabled]:opacity-30 w-max justify-center", O),
+      render: ({ slots: T }) => {
+        const V = Math.floor(T.length / 2), te = T.slice(0, V), ne = T.slice(V);
         return /* @__PURE__ */ p.jsxs("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ p.jsxs("div", { className: "flex items-center", children: [
-            /* @__PURE__ */ p.jsx("div", { className: "flex", children: X.map((q, i) => /* @__PURE__ */ p.jsx(be, { ...q, placeholder: R, hasError: f, className: b, variant: w }, i)) }),
-            /* @__PURE__ */ p.jsx("hr", { className: L("w-2 h-1 mx-2 border-neutral-default-default", o && "hidden") }),
-            /* @__PURE__ */ p.jsx("div", { className: "flex", children: ne.map((q, i) => /* @__PURE__ */ p.jsx(be, { ...q, placeholder: R, hasError: f, variant: w, className: b }, i)) })
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: te.map((i, E) => /* @__PURE__ */ p.jsx(se, { ...i, placeholder: D, hasError: f, className: b, variant: w }, E)) }),
+            /* @__PURE__ */ p.jsx("hr", { className: $("w-2 h-1 mx-2 border-neutral-default-default", o && "hidden") }),
+            /* @__PURE__ */ p.jsx("div", { className: "flex", children: ne.map((i, E) => /* @__PURE__ */ p.jsx(se, { ...i, placeholder: D, hasError: f, variant: w, className: b }, E)) })
           ] }),
-          f && x && (typeof x == "string" ? /* @__PURE__ */ p.jsxs("span", { className: L("text-error-default-default text-xs mt-1 flex items-center gap-1", j, k.error.text), children: [
-            k.error.icon,
+          f && x && (typeof x == "string" ? /* @__PURE__ */ p.jsxs("span", { className: $("text-error-default-default text-xs mt-1 flex items-center gap-1", P, N.error.text), children: [
+            N.error.icon,
             x
-          ] }) : ge.cloneElement(x, { className: L(
+          ] }) : xe.cloneElement(x, { className: $(
             "text-error-default-default text-xs mt-1",
-            j,
-            k.error.text,
+            P,
+            N.error.text,
             x?.props?.className
           ) })),
-          v && m && (typeof v == "string" ? /* @__PURE__ */ p.jsxs("span", { className: L("text-neutral-medium-default text-xs mt-1 flex items-center gap-1", k[w].text, j), children: [
-            k[w].icon,
+          v && m && (typeof v == "string" ? /* @__PURE__ */ p.jsxs("span", { className: $("text-neutral-medium-default text-xs mt-1 flex items-center gap-1", N[w].text, P), children: [
+            N[w].icon,
             v
-          ] }) : ge.cloneElement(v, { className: L("text-neutral-medium-default text-xs mt-1", j, k[w].text, v?.props?.className) }))
+          ] }) : xe.cloneElement(v, { className: $("text-neutral-medium-default text-xs mt-1", P, N[w].text, v?.props?.className) }))
         ] });
       }
     }
   );
-}, be = (t) => {
-  const r = {
+};
+qe.displayName = "OtpInput";
+const Ze = (t) => {
+  const a = {
     default: "border-neutral-default-default",
     error: "border-error-default-default",
     success: "border-success-default-default"
@@ -274,15 +278,15 @@ const Ke = ({
   return /* @__PURE__ */ p.jsxs(
     "div",
     {
-      className: L(
-        "relative w-14 h-14 text-[1.2rem] text-white",
+      className: $(
+        "relative w-12 h-12 md:w-14 md:h-14 text-[1rem] md:text-[1.2rem] text-white",
         "flex items-center justify-center",
         "transition-all duration-300",
         "border-2 border-neutral-default-default rounded-md mx-1",
         { "border-2 border-primary-default-default": t.isActive },
-        r[t.variant || "default"],
+        a[t.variant || "default"],
         t.className,
-        t.hasError && r.error
+        t.hasError && a.error
       ),
       children: [
         /* @__PURE__ */ p.jsx("div", { className: "group-has-[input[data-input-otp-placeholder-shown]]:opacity-20", children: t.char ?? t.placeholder }),
@@ -290,7 +294,8 @@ const Ke = ({
       ]
     }
   );
-};
+}, se = De(Ze);
+se.displayName = "Slot";
 export {
-  Ke as default
+  qe as default
 };