@alfadocs/ui-kit 0.2.0 → 0.2.1

package/dist/_chunks/{message-tray-n8q9ITXI.js → message-tray-BbnAzlLH.js}

@@ -6,8 +6,8 @@ import { useTranslation as W } from "react-i18next";
 import { I as ue } from "./icon-button-C4CGcYuz.js";
 import { B as _ } from "./button-DD_0Xdmr.js";
 import { S as U } from "./separator-CYU_bGFn.js";
-import { S as g } from "./skeleton-CZbwyJAA.js";
-import { M as pe } from "./message-card-ChCX9Iv6.js";
+import { S as f } from "./skeleton-CZbwyJAA.js";
+import { M as pe } from "./message-card-DjvsB_3U.js";
 import { u as ge } from "./registry-C9nwlNyL.js";
 import { M as Y } from "./mail-C8irm52s.js";
 const fe = {
@@ -162,12 +162,12 @@ function R() {
       "aria-hidden": "true",
       className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
       children: [
-        /* @__PURE__ */ s(g, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ s(f, { variant: "circular", size: "sm" }),
         /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ s(g, { variant: "text", size: "md", width: "60%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "80%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "95%" }),
-          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "30%" })
+          /* @__PURE__ */ s(f, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "80%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "95%" }),
+          /* @__PURE__ */ s(f, { variant: "text", size: "sm", width: "30%" })
         ] })
       ]
     }
@@ -202,10 +202,10 @@ const Te = oe(
     items: t,
     unreadCount: T,
     open: k,
-    onOpenChange: f,
+    onOpenChange: v,
     onItemClick: u,
     onDismiss: p,
-    onMarkRead: v,
+    onMarkRead: y,
     onMarkAllRead: C,
     loading: G = !1,
     maxVisible: J,
@@ -218,12 +218,12 @@ const Te = oe(
     ...D
   }, ee) => {
     var A;
-    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, y = F(
+    const { t: d } = W(), N = k !== void 0, [se, ae] = q(!1), z = N ? k : se, h = F(
       (e) => {
-        N || ae(e), f == null || f(e);
+        N || ae(e), v == null || v(e);
       },
-      [N, f]
-    ), [h, I] = q(
+      [N, v]
+    ), [g, I] = q(
       () => t.map((e) => ({ item: e, leaving: !1 }))
     ), K = F(() => {
       if (typeof window > "u") return 200;
@@ -246,12 +246,12 @@ const Te = oe(
         return o;
       });
     }, [t]), H(() => {
-      if (!h.some((n) => n.leaving)) return;
+      if (!g.some((n) => n.leaving)) return;
       const e = K(), r = setTimeout(() => {
         I((n) => n.filter((o) => !o.leaving));
       }, e);
       return () => clearTimeout(r);
-    }, [h, K]);
+    }, [g, K]);
     const M = m(null), O = m((A = t[0]) == null ? void 0 : A.id);
     H(() => {
       var n;
@@ -279,8 +279,8 @@ const Te = oe(
     P.current = z;
     const ie = le(
       () => ({
-        open: () => y(!0),
-        close: () => y(!1),
+        open: () => h(!0),
+        close: () => h(!1),
         isOpen: () => P.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
         getUnreadCount: () => V.current ?? l.current.filter((e) => !e.read).length,
@@ -290,14 +290,14 @@ const Te = oe(
         },
         markRead: (e) => {
           const r = l.current.find((n) => n.id === e);
-          r && (v == null || v(r));
+          r && (y == null || y(r));
         },
         dismiss: (e) => {
           const r = l.current.find((n) => n.id === e);
           r && (p == null || p(r));
         }
       }),
-      [y, u, v, p]
+      [h, u, y, p]
     ), B = m(null);
     return me(ee, () => B.current, []), ge(fe, ie, a), /* @__PURE__ */ s(
       "div",
@@ -307,7 +307,7 @@ const Te = oe(
         "data-component-id": a,
         className: [ve({ size: w }), $].filter(Boolean).join(" "),
         ...D,
-        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: y, children: [
+        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: h, children: [
           /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
             ue,
             {
@@ -364,14 +364,14 @@ const Te = oe(
                 /* @__PURE__ */ s(
                   "div",
                   {
-                    role: "list",
+                    role: g.length > 0 ? "list" : void 0,
                     "data-max-visible": J,
                     className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
                     children: G ? /* @__PURE__ */ c(L, { children: [
                       /* @__PURE__ */ s(R, {}),
                       /* @__PURE__ */ s(R, {}),
                       /* @__PURE__ */ s(R, {})
-                    ] }) : h.length === 0 ? /* @__PURE__ */ s(be, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                    ] }) : g.length === 0 ? /* @__PURE__ */ s(be, {}) : g.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
                       pe,
                       {
                         item: e,
@@ -411,4 +411,4 @@ export {
   Te as M,
   fe as m
 };
-//# sourceMappingURL=message-tray-n8q9ITXI.js.map
+//# sourceMappingURL=message-tray-BbnAzlLH.js.map

package/dist/_chunks/{notification-card-hBlPN1-c.js → notification-card-uTPEvAQS.js}

@@ -1,12 +1,12 @@
 import { jsx as a, jsxs as n } from "react/jsx-runtime";
 import { forwardRef as M, useMemo as P, useState as R, useRef as B, useCallback as L } from "react";
-import { c as U } from "./index-D2ZczOXr.js";
-import { useTranslation as W } from "react-i18next";
-import { I as E } from "./icon-button-C4CGcYuz.js";
+import { c as D } from "./index-D2ZczOXr.js";
+import { useTranslation as U } from "react-i18next";
+import { I as W } from "./icon-button-C4CGcYuz.js";
 import { B as N } from "./button-DD_0Xdmr.js";
-import { T as H } from "./timestamp-BV2lC-wV.js";
-import { X } from "./x-CCcI3eJp.js";
-const q = U(
+import { T as E } from "./timestamp-BV2lC-wV.js";
+import { X as H } from "./x-CCcI3eJp.js";
+const X = D(
   [
     "ds:relative ds:flex ds:gap-[var(--spacing-sm)]",
     "ds:rounded-[var(--radius-sm)]",
@@ -73,10 +73,10 @@ const q = U(
   "ds:focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
   "ds:forced-colors:focus-visible:after:outline-[CanvasText]"
 ].join(" ");
-function G(e) {
+function q(e) {
   return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(e);
 }
-const J = M(
+const G = M(
   ({
     item: e,
     variant: r = "compact",
@@ -89,7 +89,7 @@ const J = M(
     className: z,
     ...T
   }, K) => {
-    const { t: u, i18n: v } = W(), S = P(() => {
+    const { t: u, i18n: v } = U(), S = P(() => {
       const s = new Date(e.createdAt);
       return Number.isNaN(s.getTime()) ? "" : new Intl.DateTimeFormat(v.language, {
         dateStyle: "medium",
@@ -112,7 +112,7 @@ const J = M(
       time: S,
       unreadSuffix: I,
       defaultValue: "{{title}}, {{time}}{{unreadSuffix}}"
-    }), p = !!e.url && G(e.url), i = /* @__PURE__ */ a(
+    }), p = !!e.url && q(e.url), i = /* @__PURE__ */ a(
       "span",
       {
         className: [
@@ -130,7 +130,7 @@ const J = M(
         "aria-label": x,
         className: C + " ds:contents",
         onClick: (s) => {
-          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t(e);
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
         },
         children: i
       }
@@ -149,7 +149,7 @@ const J = M(
         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 || t(e);
+          s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t(e));
         },
         children: i
       }
@@ -163,7 +163,7 @@ const J = M(
         "data-read": e.read ? "true" : "false",
         "data-leaving": g ? "true" : void 0,
         "aria-hidden": g || void 0,
-        className: q({ variant: r, size: k, state: F, className: z }),
+        className: X({ variant: r, size: k, state: F, className: z }),
         ...T,
         children: [
           e.icon ? /* @__PURE__ */ a(
@@ -191,7 +191,7 @@ const J = M(
             ] }),
             e.description ? /* @__PURE__ */ a("p", { className: "ds:m-0 type-body-sm ds:text-[color:var(--muted-foreground)] ds:[overflow:hidden] ds:[display:-webkit-box] ds:[-webkit-box-orient:vertical] ds:[-webkit-line-clamp:2] ds:break-words", children: e.description }) : null,
             /* @__PURE__ */ a(
-              H,
+              E,
               {
                 value: e.createdAt,
                 shape: "chip",
@@ -212,7 +212,7 @@ const J = M(
                     {
                       href: e.url,
                       onClick: (s) => {
-                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || t == null || t(e);
+                        s.defaultPrevented || s.metaKey || s.ctrlKey || s.shiftKey || (s.preventDefault(), t == null || t(e));
                       },
                       children: l
                     }
@@ -232,9 +232,9 @@ const J = M(
             ] }) : 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(
-            E,
+            W,
             {
-              icon: /* @__PURE__ */ a(X, {}),
+              icon: /* @__PURE__ */ a(H, {}),
               intent: "ghost",
               size: "sm",
               "aria-label": u(
@@ -249,9 +249,9 @@ const J = M(
     );
   }
 );
-J.displayName = "NotificationCard";
+G.displayName = "NotificationCard";
 export {
-  J as N,
-  G as i
+  G as N,
+  q as i
 };
-//# sourceMappingURL=notification-card-hBlPN1-c.js.map
+//# sourceMappingURL=notification-card-uTPEvAQS.js.map

package/dist/_chunks/{notification-tray-C5cnXbl9.js → notification-tray-PGtMqXbP.js}

@@ -1,13 +1,13 @@
-import { jsx as t, jsxs as c, Fragment as E } from "react/jsx-runtime";
-import { forwardRef as de, useState as q, useCallback as F, useLayoutEffect as ce, useEffect as H, useRef as f, useMemo as le, useImperativeHandle as fe } from "react";
+import { jsx as t, jsxs as c, Fragment as q } from "react/jsx-runtime";
+import { forwardRef as de, useState as F, useCallback as H, useLayoutEffect as ce, useEffect as U, useRef as f, useMemo as le, useImperativeHandle as fe } from "react";
 import * as x from "@radix-ui/react-popover";
 import { c as C } from "./index-D2ZczOXr.js";
-import { useTranslation as Y } from "react-i18next";
+import { useTranslation as G } from "react-i18next";
 import { I as ue } from "./icon-button-C4CGcYuz.js";
-import { B as U } from "./button-DD_0Xdmr.js";
-import { S as W } from "./separator-CYU_bGFn.js";
+import { B as W } from "./button-DD_0Xdmr.js";
+import { S as Y } from "./separator-CYU_bGFn.js";
 import { S as N } from "./skeleton-CZbwyJAA.js";
-import { N as pe } from "./notification-card-hBlPN1-c.js";
+import { N as pe } from "./notification-card-uTPEvAQS.js";
 import { u as me } from "./registry-C9nwlNyL.js";
 import { c as ge } from "./createLucideIcon-CrFbzy84.js";
 /**
@@ -25,7 +25,7 @@ const ve = [
       key: "11g9vi"
     }
   ]
-], G = ge("bell", ve), ye = {
+], J = ge("bell", ve), ye = {
   id: "notification-tray",
   capabilities: ["open", "close", "select_single", "dismiss"],
   state: {
@@ -199,7 +199,7 @@ function R() {
   );
 }
 function Te() {
-  const { t: i } = Y();
+  const { t: i } = G();
   return /* @__PURE__ */ c(
     "div",
     {
@@ -212,7 +212,7 @@ function Te() {
           {
             "aria-hidden": "true",
             className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
-            children: /* @__PURE__ */ t(G, {})
+            children: /* @__PURE__ */ t(J, {})
           }
         ),
         /* @__PURE__ */ t("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: i("ui.notificationTray.noNotifications", "No notifications") }),
@@ -230,14 +230,14 @@ const we = de(
     items: a,
     unseenCount: b,
     open: S,
-    onOpenChange: m,
+    onOpenChange: g,
     onItemClick: u,
     onDismiss: p,
-    onMarkRead: g,
+    onMarkRead: v,
     onMarkAllRead: I,
-    loading: J = !1,
+    loading: j = !1,
     maxVisible: M,
-    viewAllLabel: j,
+    viewAllLabel: K,
     onViewAll: Q,
     align: X = "end",
     side: Z = "bottom",
@@ -245,15 +245,15 @@ const we = de(
     className: $,
     ...D
   }, ee) => {
-    var L;
-    const { t: r } = Y(), w = S !== void 0, [te, ie] = q(!1), z = w ? S : te, v = F(
+    var _;
+    const { t: r } = G(), w = S !== void 0, [te, ie] = F(!1), z = w ? S : te, y = H(
       (e) => {
-        w || ie(e), m == null || m(e);
+        w || ie(e), g == null || g(e);
       },
-      [w, m]
-    ), [y, K] = q(
+      [w, g]
+    ), [m, O] = F(
       () => a.map((e) => ({ item: e, leaving: !1 }))
-    ), O = F(() => {
+    ), V = H(() => {
       if (typeof window > "u") return 200;
       const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
       if (!e) return 200;
@@ -261,11 +261,11 @@ const we = de(
       return Number.isFinite(s) ? n.endsWith("ms") ? s : s * 1e3 : 200;
     }, []);
     ce(() => {
-      K((e) => {
+      O((e) => {
         const n = new Set(a.map((o) => o.id)), s = new Set(e.map((o) => o.item.id)), d = e.map((o) => {
           if (n.has(o.item.id)) {
-            const _ = a.find((re) => re.id === o.item.id);
-            return _ ? { item: _, leaving: !1 } : { ...o, leaving: !0 };
+            const E = a.find((re) => re.id === o.item.id);
+            return E ? { item: E, leaving: !1 } : { ...o, leaving: !0 };
           }
           return { ...o, leaving: !0 };
         });
@@ -273,17 +273,17 @@ const we = de(
           s.has(o.id) || d.push({ item: o, leaving: !1 });
         return d;
       });
-    }, [a]), H(() => {
-      if (!y.some((s) => s.leaving)) return;
-      const e = O(), n = setTimeout(() => {
-        K((s) => s.filter((d) => !d.leaving));
+    }, [a]), U(() => {
+      if (!m.some((s) => s.leaving)) return;
+      const e = V(), n = setTimeout(() => {
+        O((s) => s.filter((d) => !d.leaving));
       }, e);
       return () => clearTimeout(n);
-    }, [y, O]);
-    const k = f(null), V = f((L = a[0]) == null ? void 0 : L.id);
-    H(() => {
+    }, [m, V]);
+    const k = f(null), A = f((_ = a[0]) == null ? void 0 : _.id);
+    U(() => {
       var s;
-      const e = (s = a[0]) == null ? void 0 : s.id, n = V.current;
+      const e = (s = a[0]) == null ? void 0 : s.id, n = A.current;
       if (n && e && n !== e && k.current) {
         const d = a[0];
         d && !d.read && (k.current.textContent = r(
@@ -294,7 +294,7 @@ const we = de(
           }
         ));
       }
-      V.current = e;
+      A.current = e;
     }, [a, r]);
     const h = b ?? 0, ae = h > 0 ? r("ui.notificationTray.triggerLabel", {
       count: h,
@@ -307,45 +307,45 @@ const we = de(
       r("ui.notificationTray.badgeCountOverflow", "99+")
     ), se = xe({ size: T }), l = f(a);
     l.current = a;
-    const A = f(b);
-    A.current = b;
-    const B = f(z);
-    B.current = z;
+    const B = f(b);
+    B.current = b;
+    const P = f(z);
+    P.current = z;
     const oe = le(
       () => ({
-        open: () => v(!0),
-        close: () => v(!1),
-        isOpen: () => B.current,
+        open: () => y(!0),
+        close: () => y(!1),
+        isOpen: () => P.current,
         getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
-        getUnreadCount: () => A.current ?? l.current.filter((e) => !e.read).length,
+        getUnreadCount: () => B.current ?? l.current.filter((e) => !e.read).length,
         selectItem: (e) => {
           const n = l.current.find((s) => s.id === e);
           n && (u == null || u(n));
         },
         markRead: (e) => {
           const n = l.current.find((s) => s.id === e);
-          n && (g == null || g(n));
+          n && (v == null || v(n));
         },
         dismiss: (e) => {
           const n = l.current.find((s) => s.id === e);
           n && (p == null || p(n));
         }
       }),
-      [v, u, g, p]
-    ), P = f(null);
-    return fe(ee, () => P.current, []), me(ye, oe, i), /* @__PURE__ */ t(
+      [y, u, v, p]
+    ), L = f(null);
+    return fe(ee, () => L.current, []), me(ye, oe, i), /* @__PURE__ */ t(
       "div",
       {
-        ref: P,
+        ref: L,
         "data-component": "notification-tray",
         "data-component-id": i,
         className: [he({ size: T }), $].filter(Boolean).join(" "),
         ...D,
-        children: /* @__PURE__ */ c(x.Root, { open: z, onOpenChange: v, children: [
+        children: /* @__PURE__ */ c(x.Root, { open: z, onOpenChange: y, children: [
           /* @__PURE__ */ t(x.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
             ue,
             {
-              icon: /* @__PURE__ */ t(G, {}),
+              icon: /* @__PURE__ */ t(J, {}),
               intent: "outline",
               size: T === "sm" ? "sm" : "md",
               "aria-label": ae,
@@ -384,7 +384,7 @@ const we = de(
                 /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
                   /* @__PURE__ */ t("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: r("ui.notificationTray.panelTitle", "Notifications") }),
                   I && a.some((e) => !e.read) ? /* @__PURE__ */ t(
-                    U,
+                    W,
                     {
                       intent: "link",
                       size: "sm",
@@ -394,18 +394,18 @@ const we = de(
                     }
                   ) : null
                 ] }),
-                /* @__PURE__ */ t(W, {}),
+                /* @__PURE__ */ t(Y, {}),
                 /* @__PURE__ */ t(
                   "div",
                   {
-                    role: "list",
+                    role: j || m.length === 0 ? void 0 : "list",
                     "data-max-visible": M,
                     className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--notification-tray-max-block-size,24rem)]",
-                    children: J ? /* @__PURE__ */ c(E, { children: [
+                    children: j ? /* @__PURE__ */ c(q, { children: [
                       /* @__PURE__ */ t(R, {}),
                       /* @__PURE__ */ t(R, {}),
                       /* @__PURE__ */ t(R, {})
-                    ] }) : y.length === 0 ? /* @__PURE__ */ t(Te, {}) : y.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
+                    ] }) : m.length === 0 ? /* @__PURE__ */ t(Te, {}) : m.map(({ item: e, leaving: n }) => /* @__PURE__ */ t(
                       pe,
                       {
                         item: e,
@@ -419,16 +419,16 @@ const we = de(
                     ))
                   }
                 ),
-                j ? /* @__PURE__ */ c(E, { children: [
-                  /* @__PURE__ */ t(W, {}),
+                K ? /* @__PURE__ */ c(q, { children: [
+                  /* @__PURE__ */ t(Y, {}),
                   /* @__PURE__ */ t("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ t(
-                    U,
+                    W,
                     {
                       intent: "link",
                       size: "sm",
                       onClick: Q,
                       className: "ds:w-full ds:justify-center",
-                      children: j
+                      children: K
                     }
                   ) })
                 ] }) : null
@@ -445,4 +445,4 @@ export {
   we as N,
   ye as n
 };
-//# sourceMappingURL=notification-tray-C5cnXbl9.js.map
+//# sourceMappingURL=notification-tray-PGtMqXbP.js.map

package/dist/_chunks/{payment-form-C3vT_npe.js → payment-form-B_BdHwjb.js}

@@ -82,7 +82,7 @@ function be(r, n) {
     i.disconnect(), a.removeEventListener("change", e), f.removeEventListener("change", e);
   };
 }
-const ge = {
+const ye = {
   id: "payment-form",
   capabilities: ["submit"],
   state: {},
@@ -108,7 +108,7 @@ const ge = {
       description: "Sourced from the id prop."
     }
   }
-}, ye = /* @__PURE__ */ new Set([
+}, ge = /* @__PURE__ */ new Set([
   "BIF",
   "CLP",
   "DJF",
@@ -128,7 +128,7 @@ const ge = {
   "XPF"
 ]);
 function $(r, n, s) {
-  const e = n.toUpperCase(), i = ye.has(e) ? r : r / 100;
+  const e = n.toUpperCase(), i = ge.has(e) ? r : r / 100;
   try {
     return new Intl.NumberFormat(s, {
       style: "currency",
@@ -233,9 +233,9 @@ function xe(r) {
     returnUrl: a,
     onSuccess: f,
     onError: N
-  } = r, { t: o } = q(), k = le(), S = me(), y = oe(), b = j(
-    () => `pay-${y.replace(/[^a-zA-Z0-9-_]/g, "")}`,
-    [y]
+  } = r, { t: o } = q(), k = le(), S = me(), g = oe(), b = j(
+    () => `pay-${g.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+    [g]
   ), F = `${b}-payment`, L = `${b}-address`, v = `${b}-error`, [u, h] = E(!1), [A, P] = E(!1), [w, x] = E(null), [U, d] = E(""), c = V(f), l = V(N);
   R(() => {
     c.current = f, l.current = N;
@@ -254,22 +254,22 @@ function xe(r) {
         return;
       }
       try {
-        const g = await k.confirmPayment({
+        const y = await k.confirmPayment({
           elements: S,
           confirmParams: C ? { return_url: C } : {},
           redirect: "if_required"
         });
-        if (g.error) {
-          const M = g.error.code ?? "generic", I = he(M), te = X(g.error.message ?? "");
+        if (y.error) {
+          const M = y.error.code ?? "generic", I = he(M), te = X(y.error.message ?? "");
           x(I), d(o(I)), (H = l.current) == null || H.call(l, {
             code: M,
             translatedMessage: te || o(I)
           });
           return;
         }
-        g.paymentIntent && ((O = c.current) == null || O.call(c, g.paymentIntent.id));
-      } catch (g) {
-        const M = g instanceof Error ? g.message : "", I = X(M);
+        y.paymentIntent && ((O = c.current) == null || O.call(c, y.paymentIntent.id));
+      } catch (y) {
+        const M = y instanceof Error ? y.message : "", I = X(M);
         x("payment.error.generic"), d(o("payment.error.generic")), (K = l.current) == null || K.call(l, {
           code: "unexpected",
           translatedMessage: I || o("payment.error.generic")
@@ -441,13 +441,13 @@ const ke = se(
     locale: o,
     ariaLabel: k,
     returnUrl: S,
-    stripePromise: y,
+    stripePromise: g,
     className: b
   }, F) => {
-    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = E(y ?? null);
+    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = E(g ?? null);
     R(() => {
-      if (y !== void 0) {
-        h(y);
+      if (g !== void 0) {
+        h(g);
         return;
       }
       if (!s) {
@@ -455,7 +455,7 @@ const ke = se(
         return;
       }
       h(de(s));
-    }, [y, s]);
+    }, [g, s]);
     const [A, P] = E(
       () => B()
     );
@@ -477,7 +477,7 @@ const ke = se(
       }),
       []
     );
-    ae(F, () => w.current, []), fe(ge, x, r);
+    ae(F, () => w.current, []), fe(ye, x, r);
     const U = j(
       () => ({
         clientSecret: n,
@@ -551,7 +551,7 @@ function Se(r) {
             }
           )
         ] }),
-        i ? /* @__PURE__ */ m("div", { className: T(), children: [
+        i ? /* @__PURE__ */ m("div", { className: T(), "data-testid": "payment-address", children: [
           /* @__PURE__ */ t("span", { className: _(), children: a("payment.billingAddress") }),
           /* @__PURE__ */ t(
             "div",
@@ -584,7 +584,7 @@ export {
   X as b,
   he as c,
   $ as f,
-  ge as p,
+  ye as p,
   ee as s
 };
-//# sourceMappingURL=payment-form-C3vT_npe.js.map
+//# sourceMappingURL=payment-form-B_BdHwjb.js.map