@alfadocs/ui-kit 0.37.0 → 0.39.0

package/dist/_chunks/{message-card-BbRhZkDI.js → message-card-DSPw5ghw.js}

@@ -1,5 +1,5 @@
 import { jsx as a, jsxs as l } from "react/jsx-runtime";
-import { forwardRef as B, useMemo as L, useState as U, useRef as W, useCallback as _ } from "react";
+import { forwardRef as _, useMemo as B, useState as L, useRef as U, useCallback as W } from "react";
 import { c as D } from "./index-D2ZczOXr.js";
 import { useTranslation as E } from "react-i18next";
 import { I as H } from "./icon-button-CKEOrN37.js";
@@ -18,13 +18,14 @@ const J = D(
     "ds:data-[leaving=true]:pointer-events-none",
     "ds:motion-reduce:transition-none",
     "ds:text-start",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
     "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
   ].join(" "),
   {
     variants: {
       variant: {
         compact: "ds:items-start ds:group",
-        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--border)] ds:bg-[color:var(--card)]"
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2 ds:bg-[color:var(--card)]"
       },
       size: {
         sm: "ds:p-[var(--spacing-sm)]",
@@ -71,40 +72,40 @@ const J = D(
 function O(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const Q = B(
+const Q = _(
   ({
     item: e,
     variant: d = "compact",
     size: h = "sm",
     onActivate: r,
-    onDismiss: t,
+    onDismiss: o,
     ctaLabel: c,
     dismissLabel: u,
     leaving: b,
     className: T,
     ...z
   }, K) => {
-    const { t: n, i18n: v } = E(), M = L(() => {
+    const { t: n, i18n: v } = E(), M = B(() => {
       const s = new Date(e.sentAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
         timeStyle: "short"
       }).format(s);
-    }, [e.sentAt, v.language]), f = b !== void 0, [S, V] = U(!1), m = W(null), x = f ? b : S, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = _(
+    }, [e.sentAt, v.language]), f = b !== void 0, [S, V] = L(!1), m = U(null), x = f ? b : S, w = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches, y = W(
       (s) => {
-        if (s == null || s.preventDefault(), s == null || s.stopPropagation(), !t) return;
+        if (s == null || s.preventDefault(), s == null || s.stopPropagation(), !o) return;
         if (f || w) {
-          t(e);
+          o(e);
           return;
         }
         V(!0), m.current && clearTimeout(m.current);
         const g = typeof window < "u" && window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration") || "200ms", N = g.trim().endsWith("ms") ? parseFloat(g) : parseFloat(g) * 1e3;
         m.current = setTimeout(
-          () => t(e),
+          () => o(e),
           Number.isFinite(N) ? N : 200
         );
       },
-      [t, e, f, w]
+      [o, e, f, w]
     ), F = e.read ? "read" : "unread", P = e.read ? "" : n("messageCard.unreadSuffix", ", unread"), I = e.subject ? n("messageCard.subjectFragment", {
       subject: e.subject,
       defaultValue: " — {{subject}}"
@@ -124,8 +125,8 @@ const Q = B(
         children: e.sender.name
       }
     );
-    let o;
-    d === "compact" && p && r ? o = /* @__PURE__ */ a(
+    let t;
+    d === "compact" && p && r ? t = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -136,7 +137,7 @@ const Q = B(
         },
         children: i
       }
-    ) : d === "compact" && r ? o = /* @__PURE__ */ a(
+    ) : d === "compact" && r ? t = /* @__PURE__ */ a(
       "button",
       {
         type: "button",
@@ -145,7 +146,7 @@ const Q = B(
         onClick: () => r(e),
         children: i
       }
-    ) : d === "dashboard" && p && r ? o = /* @__PURE__ */ a(
+    ) : d === "dashboard" && p && r ? t = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
@@ -155,7 +156,7 @@ const Q = B(
         },
         children: i
       }
-    ) : o = i;
+    ) : t = i;
     const R = typeof e.unreadCount == "number" && e.unreadCount > 1;
     return /* @__PURE__ */ l(
       "div",
@@ -191,7 +192,7 @@ const Q = B(
                   className: "ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]"
                 }
               ),
-              d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: o }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: o }),
+              d === "dashboard" ? /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: t }) : /* @__PURE__ */ a("span", { className: "ds:flex-1 ds:min-w-0 type-title-item ds:text-[color:var(--foreground)]", children: t }),
               R ? /* @__PURE__ */ a(
                 "span",
                 {
@@ -245,7 +246,7 @@ const Q = B(
                   )
                 }
               ) : null,
-              u && t ? /* @__PURE__ */ a(
+              u && o ? /* @__PURE__ */ a(
                 k,
                 {
                   intent: "link",
@@ -257,7 +258,7 @@ const Q = B(
               ) : null
             ] }) : null
           ] }),
-          d === "compact" && t ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
+          d === "compact" && o ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
             H,
             {
               icon: /* @__PURE__ */ a(G, {}),
@@ -277,4 +278,4 @@ export {
   Q as M,
   O as i
 };
-//# sourceMappingURL=message-card-BbRhZkDI.js.map
+//# sourceMappingURL=message-card-DSPw5ghw.js.map

package/dist/_chunks/{message-tray-B762TKuv.js → message-tray-hSQff9u4.js}

@@ -9,7 +9,7 @@ import { I as me } from "./icon-button-CKEOrN37.js";
 import { B as E } from "./button-DD_0Xdmr.js";
 import { S as L } from "./separator-CYU_bGFn.js";
 import { S as f } from "./skeleton-CZbwyJAA.js";
-import { M as pe } from "./message-card-BbRhZkDI.js";
+import { M as pe } from "./message-card-DSPw5ghw.js";
 import { u as ue } from "./registry-nPAVE19X.js";
 import { M as F } from "./mail-C8irm52s.js";
 const ge = {
@@ -110,7 +110,7 @@ const ge = {
   [
     "ds:flex ds:flex-col",
     "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
-    "ds:border ds:border-[color:var(--border)]",
+    "ds:border ds:border-[color:var(--card-border)]",
     "ds:rounded-[var(--radius-md)]",
     "ds:shadow-[var(--shadow-lg)]",
     "ds:z-[var(--z-popover)]",
@@ -412,4 +412,4 @@ export {
   be as M,
   ge as m
 };
-//# sourceMappingURL=message-tray-B762TKuv.js.map
+//# sourceMappingURL=message-tray-hSQff9u4.js.map

package/dist/_chunks/{nl-Dl7lO2t3.js → nl-xOogO4sZ.js}

@@ -1,4 +1,4 @@
-import { o as d, q as n, r, v as s } from "./react-day-picker-DYDdR8Vv.js";
+import { o as d, q as n, r, v as s } from "./react-day-picker-CdtIiKjx.js";
 const m = {
   lessThanXSeconds: {
     one: "minder dan een seconde",
@@ -323,4 +323,4 @@ const m = {
 export {
   S as nl
 };
-//# sourceMappingURL=nl-Dl7lO2t3.js.map
+//# sourceMappingURL=nl-xOogO4sZ.js.map

package/dist/_chunks/{notification-card-DMdO4g54.js → notification-card-CObnGdJu.js}

@@ -23,13 +23,14 @@ const X = D(
     "ds:data-[leaving=true]:pointer-events-none",
     "ds:motion-reduce:transition-none",
     "ds:text-start",
+    "ds:border ds:border-[color:var(--card-border)] ds:[.theme-accessible_&]:border-2",
     "ds:forced-colors:border ds:forced-colors:border-[CanvasText]"
   ].join(" "),
   {
     variants: {
       variant: {
         compact: "ds:items-start",
-        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--border)] ds:shadow-[var(--shadow-md)] ds:bg-[color:var(--card)]"
+        dashboard: "ds:flex-col ds:sm:flex-row ds:items-stretch ds:sm:items-start ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:bg-[color:var(--card)]"
       },
       size: {
         sm: "ds:p-[var(--spacing-sm)]",
@@ -73,15 +74,15 @@ const X = D(
   "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
 ].join(" ");
-function q(e) {
+function _(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const G = M(
+const q = M(
   ({
     item: e,
-    variant: r = "compact",
+    variant: t = "compact",
     size: k = "sm",
-    onActivate: t,
+    onActivate: r,
     onDismiss: d,
     ctaLabel: l,
     dismissLabel: c,
@@ -112,7 +113,7 @@ const G = M(
       time: S,
       unreadSuffix: I,
       defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && q(e.url), i = /* @__PURE__ */ a(
+    }), p = !!e.url && _(e.url), i = /* @__PURE__ */ a(
       "span",
       {
         className: [
@@ -123,33 +124,33 @@ const G = M(
       }
     );
     let o;
-    return r === "compact" && p && t ? o = /* @__PURE__ */ a(
+    return t === "compact" && p && r ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
         "aria-label": x,
         className: C + " ds:contents",
         onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r(e));
         },
         children: i
       }
-    ) : r === "compact" && t ? o = /* @__PURE__ */ a(
+    ) : t === "compact" && r ? o = /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         "aria-label": x,
         className: C + " ds:contents ds:bg-transparent ds:border-0 ds:p-0",
-        onClick: () => t(e),
+        onClick: () => r(e),
         children: i
       }
-    ) : r === "dashboard" && p && t ? o = /* @__PURE__ */ a(
+    ) : t === "dashboard" && p && r ? o = /* @__PURE__ */ a(
       "a",
       {
         href: e.url,
         className: "ds:text-[color:var(--foreground)] ds:no-underline ds:hover:underline ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
         onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r(e));
         },
         children: i
       }
@@ -163,7 +164,7 @@ const G = M(
         "data-read": e.read ? "true" : "false",
         "data-leaving": g ? "true" : void 0,
         "aria-hidden": g || void 0,
-        className: X({ variant: r, size: k, state: F, className: z }),
+        className: X({ variant: t, size: k, state: F, className: z }),
         ...T,
         children: [
           e.icon ? /* @__PURE__ */ a(
@@ -183,7 +184,7 @@ const G = M(
                   className: "ds:inline-block ds:size-1.5 ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--primary)] ds:forced-colors:bg-[Highlight]"
                 }
               ),
-              r === "dashboard" ? (
+              t === "dashboard" ? (
                 // `h3` keeps the dashboard heading ladder continuous:
                 // h1 (page) → h2 (WarningStack + NotificationsPanel) → h3 (notification title).
                 /* @__PURE__ */ a("h3", { className: "ds:m-0 ds:flex-1 ds:min-w-0 type-title-item", children: o })
@@ -199,7 +200,7 @@ const G = M(
                 relativeWindow: 720 * 60 * 1e3
               }
             ),
-            r === "dashboard" && (l || c) ? /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+            t === "dashboard" && (l || c) ? /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-sm)]", children: [
               l && p ? /* @__PURE__ */ a(
                 N,
                 {
@@ -212,7 +213,7 @@ const G = M(
                     {
                       href: e.url,
                       onClick: (s) => {
-                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t == null || t(e));
+                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), r == null || r(e));
                       },
                       children: l
                     }
@@ -231,7 +232,7 @@ const G = M(
               ) : null
             ] }) : null
           ] }),
-          r === "compact" && d ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
+          t === "compact" && d ? /* @__PURE__ */ a("span", { className: "ds:relative ds:z-[1] ds:opacity-0 ds:group-hover:opacity-100 ds:group-focus-within:opacity-100 ds:transition-opacity ds:motion-reduce:transition-none", children: /* @__PURE__ */ a(
             W,
             {
               icon: /* @__PURE__ */ a(H, {}),
@@ -246,9 +247,9 @@ const G = M(
     );
   }
 );
-G.displayName = "NotificationCard";
+q.displayName = "NotificationCard";
 export {
-  G as N,
-  q as i
+  q as N,
+  _ as i
 };
-//# sourceMappingURL=notification-card-DMdO4g54.js.map
+//# sourceMappingURL=notification-card-CObnGdJu.js.map

package/dist/_chunks/{notification-tray-Dl3FTleW.js → notification-tray-BWHDIjgd.js}

@@ -9,7 +9,7 @@ import { I as fe } from "./icon-button-CKEOrN37.js";
 import { B as E } from "./button-DD_0Xdmr.js";
 import { S as q } from "./separator-CYU_bGFn.js";
 import { S as x } from "./skeleton-CZbwyJAA.js";
-import { N as pe } from "./notification-card-DMdO4g54.js";
+import { N as pe } from "./notification-card-CObnGdJu.js";
 import { u as ue } from "./registry-nPAVE19X.js";
 import { c as me } from "./createLucideIcon-CrFbzy84.js";
 /**
@@ -446,4 +446,4 @@ export {
   Te as N,
   ve as n
 };
-//# sourceMappingURL=notification-tray-Dl3FTleW.js.map
+//# sourceMappingURL=notification-tray-BWHDIjgd.js.map

package/dist/_chunks/{otp-input-CDTWT5EK.js → otp-input-CMphfBxZ.js}

@@ -1,12 +1,12 @@
-import { jsxs as x, jsx as A } from "react/jsx-runtime";
-import { forwardRef as ee, useId as te, useRef as R, useState as se, useEffect as re, useCallback as L, useMemo as ae } from "react";
-import { c as N } from "./index-D2ZczOXr.js";
-import { useTranslation as oe } from "react-i18next";
-import { u as ie } from "./use-controllable-state-BiY4xTzM.js";
-import { u as ne } from "./use-web-otp-D_utzp6S.js";
-import { u as ce } from "./form-field-context-B3APVHKx.js";
-import { u as ue } from "./registry-nPAVE19X.js";
-const le = {
+import { jsxs as x, jsx as R } from "react/jsx-runtime";
+import { forwardRef as ee, useId as te, useRef as M, useState as se, useEffect as re, useCallback as N, useMemo as ae, useImperativeHandle as oe } from "react";
+import { c as O } from "./index-D2ZczOXr.js";
+import { useTranslation as ie } from "react-i18next";
+import { u as ne } from "./use-controllable-state-BiY4xTzM.js";
+import { u as ce } from "./use-web-otp-D_utzp6S.js";
+import { u as ue } from "./form-field-context-B3APVHKx.js";
+import { u as le } from "./registry-nPAVE19X.js";
+const de = {
   id: "otp-input",
   capabilities: ["edit_inline", "submit"],
   state: {
@@ -62,7 +62,7 @@ const le = {
       description: "Sourced from the id prop."
     }
   }
-}, de = N("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"), pe = N(
+}, pe = O("ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"), fe = O(
   [
     "ds:w-[var(--min-target-size)] ds:h-[var(--min-target-size)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -83,77 +83,77 @@ const le = {
     defaultVariants: { tone: "default" }
   }
 );
-function M(e) {
+function F(e) {
   return e.replace(/[\u0660-\u0669]/g, (a) => String(a.charCodeAt(0) - 1632)).replace(/[\u06F0-\u06F9]/g, (a) => String(a.charCodeAt(0) - 1776));
 }
 function y(e, a) {
-  return M(e).replace(/\D/g, "").slice(0, a);
+  return F(e).replace(/\D/g, "").slice(0, a);
 }
-function fe(e, a) {
+function me(e, a) {
   const m = y(e, a), l = new Array(a).fill("");
   for (let n = 0; n < m.length; n += 1)
     l[n] = m[n];
   return l;
 }
-const me = ee(
+const ve = ee(
   ({
     length: e = 6,
     value: a,
     defaultValue: m,
     onChange: l,
     onComplete: n,
-    disabled: O,
-    error: S,
+    disabled: S,
+    error: H,
     label: w,
-    id: F,
+    id: K,
     className: $,
     webOtp: j = !1
   }, z) => {
-    const { t: H } = oe(), b = ce(), W = te(), K = w ? W : void 0, [_, C] = ie({
+    const { t: W } = ie(), v = ue(), _ = te(), C = w ? _ : void 0, [q, P] = ne({
       value: a,
       defaultValue: y(m ?? "", e)
-    }), p = y(_ ?? "", e), q = fe(p, e), v = b.disabled || !!O, P = b.invalid || !!S, G = P ? "error" : "default", B = R([]), I = R(p.length === e), d = R(p);
+    }), p = y(q ?? "", e), G = me(p, e), b = v.disabled || !!S, B = v.invalid || !!H, J = B ? "error" : "default", E = M([]), I = M(p.length === e), d = M(p);
     d.current = p;
-    const J = () => {
+    const Q = () => {
       const s = p.length;
       return s >= e ? e - 1 : s;
-    }, [f, h] = se(J);
+    }, [f, h] = se(Q);
     re(() => {
       f >= e && h(e - 1);
     }, [f, e]);
-    const c = L(
+    const c = N(
       (s) => {
         const t = Math.max(0, Math.min(e - 1, s));
         h(t);
-        const r = B.current[t];
+        const r = E.current[t];
         r && (r.focus(), r.select());
       },
       [e]
-    ), u = L(
+    ), u = N(
       (s) => {
         const t = y(s, e);
-        C(t), d.current = t, l == null || l(t), t.length === e ? I.current || (I.current = !0, n == null || n(t)) : I.current = !1;
+        P(t), d.current = t, l == null || l(t), t.length === e ? I.current || (I.current = !0, n == null || n(t)) : I.current = !1;
       },
-      [C, e, l, n]
+      [P, e, l, n]
     );
-    ne({
-      enabled: j && !v,
+    ce({
+      enabled: j && !b,
       onCode: u
     });
-    const Q = (s) => (t) => {
-      const r = t.target.value, o = M(r).replace(/\D/g, ""), i = d.current;
+    const U = (s) => (t) => {
+      const r = t.target.value, o = F(r).replace(/\D/g, ""), i = d.current;
       if (o.length === 0) {
         if (r === "" && s < i.length) {
-          const T = i.slice(0, s) + i.slice(s + 1);
-          u(T);
+          const A = i.slice(0, s) + i.slice(s + 1);
+          u(A);
         }
         return;
       }
-      const g = i.slice(0, s), k = i.slice(s + o.length), V = (g + o + k).slice(0, e);
-      u(V);
-      const D = Math.min(s + o.length, e - 1);
-      c(D);
-    }, U = (s) => (t) => {
+      const g = i.slice(0, s), V = i.slice(s + o.length), D = (g + o + V).slice(0, e);
+      u(D);
+      const T = Math.min(s + o.length, e - 1);
+      c(T);
+    }, X = (s) => (t) => {
       const r = d.current;
       if (t.key === "Backspace") {
         if (r[s]) {
@@ -182,17 +182,17 @@ const me = ee(
         return;
       }
       t.key === "End" && (t.preventDefault(), c(e - 1));
-    }, X = (s) => (t) => {
-      const o = t.clipboardData.getData("text").replace(/\s+/g, ""), i = M(o);
+    }, Y = (s) => (t) => {
+      const o = t.clipboardData.getData("text").replace(/\s+/g, ""), i = F(o);
       if (!/^[0-9]+$/.test(i)) return;
       t.preventDefault();
-      const g = d.current, k = g.slice(0, s), V = g.slice(s + i.length), D = (k + i + V).slice(0, e);
-      u(D);
-      const T = Math.min(s + i.length, e - 1);
-      c(T);
-    }, Y = (s) => (t) => {
+      const g = d.current, V = g.slice(0, s), D = g.slice(s + i.length), T = (V + i + D).slice(0, e);
+      u(T);
+      const A = Math.min(s + i.length, e - 1);
+      c(A);
+    }, Z = (s) => (t) => {
       h(s), t.currentTarget.select();
-    }, E = b.id, Z = ae(
+    }, L = v.id, k = ae(
       () => ({
         getValue: () => d.current,
         setValue: (s) => u(s),
@@ -202,55 +202,54 @@ const me = ee(
       }),
       [u, c, f, e]
     );
-    return ue(le, Z, F), /* @__PURE__ */ x("div", { className: de({ className: $ }), children: [
-      w ? /* @__PURE__ */ A(
+    return le(de, k, K), oe(z, () => k, [k]), /* @__PURE__ */ x("div", { className: pe({ className: $ }), children: [
+      w ? /* @__PURE__ */ R(
         "label",
         {
-          id: K,
-          htmlFor: `${E}-0`,
+          id: C,
+          htmlFor: `${L}-0`,
           className: "type-label ds:text-foreground",
           children: w
         }
       ) : null,
-      /* @__PURE__ */ A(
+      /* @__PURE__ */ R(
         "div",
         {
-          ref: z,
           role: "group",
           dir: "ltr",
-          "aria-labelledby": K,
-          "aria-invalid": P || void 0,
-          "aria-describedby": b.describedBy || void 0,
-          "aria-disabled": v || void 0,
+          "aria-labelledby": C,
+          "aria-invalid": B || void 0,
+          "aria-describedby": v.describedBy || void 0,
+          "aria-disabled": b || void 0,
           "data-component": "otp-input",
-          "data-component-id": F,
+          "data-component-id": K,
           className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
-          children: q.map((s, t) => {
-            const r = !v && t === f;
-            return /* @__PURE__ */ A(
+          children: G.map((s, t) => {
+            const r = !b && t === f;
+            return /* @__PURE__ */ R(
               "input",
               {
                 ref: (o) => {
-                  B.current[t] = o;
+                  E.current[t] = o;
                 },
-                id: `${E}-${t}`,
+                id: `${L}-${t}`,
                 type: "text",
                 inputMode: "numeric",
                 pattern: "[0-9]*",
                 autoComplete: t === 0 ? "one-time-code" : "off",
                 maxLength: 1,
                 value: s,
-                disabled: v,
+                disabled: b,
                 tabIndex: r ? 0 : -1,
-                "aria-label": H("inputs.otp.digitLabel", {
+                "aria-label": W("inputs.otp.digitLabel", {
                   current: t + 1,
                   total: e
                 }),
-                onChange: Q(t),
-                onKeyDown: U(t),
-                onPaste: X(t),
-                onFocus: Y(t),
-                className: pe({ tone: G })
+                onChange: U(t),
+                onKeyDown: X(t),
+                onPaste: Y(t),
+                onFocus: Z(t),
+                className: fe({ tone: J })
               },
               t
             );
@@ -260,8 +259,8 @@ const me = ee(
     ] });
   }
 );
-me.displayName = "OTPInput";
+ve.displayName = "OTPInput";
 export {
-  me as O
+  ve as O
 };
-//# sourceMappingURL=otp-input-CDTWT5EK.js.map
+//# sourceMappingURL=otp-input-CMphfBxZ.js.map