@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/{payment-form-hcl-gGrp.js → payment-form-BWaXas8z.js}

@@ -1,5 +1,5 @@
-import { jsx as n, jsxs as u, Fragment as te } from "react/jsx-runtime";
-import { forwardRef as se, useState as N, useEffect as T, useRef as V, useImperativeHandle as ae, useMemo as Z, useId as oe, useCallback as ie } from "react";
+import { jsx as n, jsxs as l, Fragment as te } from "react/jsx-runtime";
+import { forwardRef as se, useState as C, useEffect as T, useRef as V, useImperativeHandle as ae, useMemo as Z, useId as oe, useCallback as ie } from "react";
 import { c as I } from "./index-D2ZczOXr.js";
 import { useTranslation as $ } from "react-i18next";
 import { S as J } from "./spinner-GCcv67vh.js";
@@ -76,9 +76,9 @@ function fe(r, t) {
     attributes: !0,
     attributeFilter: ["class", "dir", "lang"]
   });
-  const a = window.matchMedia("(prefers-color-scheme: dark)"), m = window.matchMedia("(prefers-reduced-motion: reduce)");
-  return a.addEventListener("change", e), m.addEventListener("change", e), () => {
-    i.disconnect(), a.removeEventListener("change", e), m.removeEventListener("change", e);
+  const a = window.matchMedia("(prefers-color-scheme: dark)"), p = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return a.addEventListener("change", e), p.addEventListener("change", e), () => {
+    i.disconnect(), a.removeEventListener("change", e), p.removeEventListener("change", e);
   };
 }
 const be = /* @__PURE__ */ new Set([
@@ -165,7 +165,7 @@ const ye = I(
   ].join(" ")
 ), U = I(
   ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
-), E = I(
+), S = I(
   [
     "type-label",
     "ds:text-[var(--foreground)]"
@@ -207,37 +207,37 @@ function he(r) {
     locale: e,
     billingAddress: i,
     returnUrl: a,
-    onSuccess: m,
-    onError: _
-  } = r, { t: o } = $(), h = le(), p = ue(), F = oe(), b = Z(
-    () => `pay-${F.replace(/[^a-zA-Z0-9-_]/g, "")}`,
-    [F]
-  ), L = `${b}-payment`, v = `${b}-address`, k = `${b}-error`, [c, w] = N(!1), [P, C] = N(!1), [A, d] = N(null), [y, S] = N(""), M = V(m), l = V(_);
+    onSuccess: p,
+    onError: x
+  } = r, { t: o } = $(), N = le(), E = ue(), v = oe(), f = Z(
+    () => `pay-${v.replace(/[^a-zA-Z0-9-_]/g, "")}`,
+    [v]
+  ), F = `${f}-payment`, L = `${f}-address`, y = `${f}-error`, [u, h] = C(!1), [P, A] = C(!1), [_, w] = C(null), [b, d] = C(""), M = V(p), c = V(x);
   T(() => {
-    M.current = m, l.current = _;
-  }, [m, _]);
+    M.current = p, c.current = x;
+  }, [p, x]);
   const D = ie(
-    async (f) => {
+    async (m) => {
       var q, G, O, K;
-      if (f && f.preventDefault(), !h || !p || c) return;
-      w(!0), d(null), S("");
-      const x = ge(a);
-      if (a !== void 0 && x === null) {
-        d("payment.error.invalidReturnUrl"), S(o("payment.error.invalidReturnUrl")), (q = l.current) == null || q.call(l, {
+      if (m && m.preventDefault(), !N || !E || u) return;
+      h(!0), w(null), d("");
+      const k = ge(a);
+      if (a !== void 0 && k === null) {
+        w("payment.error.invalidReturnUrl"), d(o("payment.error.invalidReturnUrl")), (q = c.current) == null || q.call(c, {
           code: "invalid_return_url",
           translatedMessage: o("payment.error.invalidReturnUrl")
-        }), w(!1);
+        }), h(!1);
         return;
       }
       try {
-        const g = await h.confirmPayment({
-          elements: p,
-          confirmParams: x ? { return_url: x } : {},
+        const g = await N.confirmPayment({
+          elements: E,
+          confirmParams: k ? { return_url: k } : {},
           redirect: "if_required"
         });
         if (g.error) {
           const R = g.error.code ?? "generic", z = ve(R), ne = X(g.error.message ?? "");
-          d(z), S(o(z)), (G = l.current) == null || G.call(l, {
+          w(z), d(o(z)), (G = c.current) == null || G.call(c, {
             code: R,
             translatedMessage: ne || o(z)
           });
@@ -246,36 +246,36 @@ function he(r) {
         g.paymentIntent && ((O = M.current) == null || O.call(M, g.paymentIntent.id));
       } catch (g) {
         const R = g instanceof Error ? g.message : "", z = X(R);
-        d("payment.error.generic"), S(o("payment.error.generic")), (K = l.current) == null || K.call(l, {
+        w("payment.error.generic"), d(o("payment.error.generic")), (K = c.current) == null || K.call(c, {
           code: "unexpected",
           translatedMessage: z || o("payment.error.generic")
         });
       } finally {
-        w(!1);
+        h(!1);
       }
     },
-    [h, p, c, a, o]
+    [N, E, u, a, o]
   );
   T(() => {
-    const f = document.getElementById(b);
-    if (!f) return;
-    const x = () => {
+    const m = document.getElementById(f);
+    if (!m) return;
+    const k = () => {
       D();
     };
-    return f.addEventListener("payment-form:submit", x), () => f.removeEventListener("payment-form:submit", x);
-  }, [b, D]);
-  const re = !h || !p || !P || c;
+    return m.addEventListener("payment-form:submit", k), () => m.removeEventListener("payment-form:submit", k);
+  }, [f, D]);
+  const re = !N || !E || !P || u;
   return /* @__PURE__ */ n(
     "form",
     {
-      id: b,
+      id: f,
       onSubmit: D,
       "aria-label": o("payment.ariaLabel"),
-      "aria-busy": c || void 0,
+      "aria-busy": u || void 0,
       noValidate: !0,
-      children: /* @__PURE__ */ u("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
-        /* @__PURE__ */ u("div", { className: Q(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: o("payment.amountLabel") }),
+      children: /* @__PURE__ */ l("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+        /* @__PURE__ */ l("div", { className: Q(), children: [
+          /* @__PURE__ */ n("span", { className: S(), children: o("payment.amountLabel") }),
           /* @__PURE__ */ n(
             "span",
             {
@@ -285,55 +285,55 @@ function he(r) {
             }
           )
         ] }),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ l(
           "label",
           {
-            htmlFor: L,
+            htmlFor: F,
             className: U(),
             "data-testid": "payment-field",
             children: [
-              /* @__PURE__ */ n("span", { className: E(), children: o("payment.fields.card") }),
+              /* @__PURE__ */ n("span", { className: S(), children: o("payment.fields.card") }),
               /* @__PURE__ */ n(
                 me,
                 {
-                  id: L,
+                  id: F,
                   options: {
                     layout: { type: "accordion", defaultCollapsed: !1 }
                   },
-                  onChange: (f) => {
-                    C(f.complete === !0), f.complete && (d(null), S(""));
+                  onChange: (m) => {
+                    A(m.complete === !0), m.complete && (w(null), d(""));
                   }
                 }
               )
             ]
           }
         ),
-        i ? /* @__PURE__ */ u(
+        i ? /* @__PURE__ */ l(
           "label",
           {
-            htmlFor: v,
+            htmlFor: L,
             className: U(),
             "data-testid": "payment-address",
             children: [
-              /* @__PURE__ */ n("span", { className: E(), children: o("payment.billingAddress") }),
+              /* @__PURE__ */ n("span", { className: S(), children: o("payment.billingAddress") }),
               /* @__PURE__ */ n(
                 pe,
                 {
-                  id: v,
+                  id: L,
                   options: { mode: "billing" }
                 }
               )
             ]
           }
         ) : null,
-        A ? /* @__PURE__ */ n(
+        _ ? /* @__PURE__ */ n(
           W,
           {
-            id: k,
+            id: y,
             variant: "error",
             live: "polite",
             "data-testid": "payment-error",
-            children: /* @__PURE__ */ n(W.Description, { children: y })
+            children: /* @__PURE__ */ n(W.Description, { children: b })
           }
         ) : null,
         /* @__PURE__ */ n(
@@ -341,11 +341,11 @@ function he(r) {
           {
             type: "submit",
             "aria-disabled": re || void 0,
-            "aria-busy": c || void 0,
-            "aria-describedby": A ? k : void 0,
+            "aria-busy": u || void 0,
+            "aria-describedby": _ ? y : void 0,
             className: ee(),
             "data-testid": "payment-submit",
-            children: c ? /* @__PURE__ */ u(te, { children: [
+            children: u ? /* @__PURE__ */ l(te, { children: [
               /* @__PURE__ */ n(J, { size: "sm", label: o("payment.processing") }),
               /* @__PURE__ */ n("span", { children: o("payment.processing") })
             ] }) : /* @__PURE__ */ n("span", { children: o("payment.submit", {
@@ -419,98 +419,100 @@ function we(r) {
 }
 const xe = se(
   ({
-    clientSecret: r,
-    publishableKey: t,
-    currency: s,
-    amount: e,
-    onSuccess: i,
-    onError: a,
-    billingAddress: m = !1,
-    locale: _,
-    ariaLabel: o,
-    returnUrl: h,
-    stripePromise: p,
-    className: F
-  }, b) => {
-    const { i18n: L } = $(), v = we(_ ?? L.language ?? "en"), [k, c] = N(
-      p ?? null
+    id: r,
+    clientSecret: t,
+    publishableKey: s,
+    currency: e,
+    amount: i,
+    onSuccess: a,
+    onError: p,
+    billingAddress: x = !1,
+    locale: o,
+    ariaLabel: N,
+    returnUrl: E,
+    stripePromise: v,
+    className: f
+  }, F) => {
+    const { i18n: L } = $(), y = we(o ?? L.language ?? "en"), [u, h] = C(
+      v ?? null
     );
     T(() => {
-      if (p !== void 0) {
-        c(p);
+      if (v !== void 0) {
+        h(v);
         return;
       }
-      if (!t) {
-        c(null);
+      if (!s) {
+        h(null);
         return;
       }
-      c(de(t));
-    }, [p, t]);
-    const [w, P] = N(
+      h(de(s));
+    }, [v, s]);
+    const [P, A] = C(
       () => j()
     );
-    T(() => (P(j()), fe(P)), []);
-    const C = V(null);
+    T(() => (A(j()), fe(A)), []);
+    const _ = V(null);
     ae(
-      b,
+      F,
       () => ({
         submit: async () => {
-          var y;
-          const d = (y = C.current) == null ? void 0 : y.querySelector("form");
-          d && d.dispatchEvent(
+          var d;
+          const b = (d = _.current) == null ? void 0 : d.querySelector("form");
+          b && b.dispatchEvent(
             new CustomEvent("payment-form:submit", { bubbles: !0 })
           );
         },
         reset: () => {
-          var y;
-          const d = (y = C.current) == null ? void 0 : y.querySelector("form");
-          d instanceof HTMLFormElement && d.reset();
+          var d;
+          const b = (d = _.current) == null ? void 0 : d.querySelector("form");
+          b instanceof HTMLFormElement && b.reset();
         }
       }),
       []
     );
-    const A = Z(
+    const w = Z(
       () => ({
-        clientSecret: r,
-        appearance: w,
-        locale: v
+        clientSecret: t,
+        appearance: P,
+        locale: y
       }),
-      [r, w, v]
+      [t, P, y]
     );
     return /* @__PURE__ */ n(
       "div",
       {
-        ref: C,
-        "aria-label": o,
-        className: [ye(), F].filter(Boolean).join(" "),
+        ref: _,
+        "aria-label": N,
+        className: [ye(), f].filter(Boolean).join(" "),
         "data-component": "payment-form",
+        "data-component-id": r,
         "data-testid": "payment-form-root",
-        children: k && r ? /* @__PURE__ */ n(
+        children: u && t ? /* @__PURE__ */ n(
           ce,
           {
-            stripe: k,
-            options: A,
+            stripe: u,
+            options: w,
             children: /* @__PURE__ */ n(
               he,
               {
-                amount: e,
-                currency: s,
-                locale: v,
-                billingAddress: m,
-                returnUrl: h,
-                onSuccess: i,
-                onError: a
+                amount: i,
+                currency: e,
+                locale: y,
+                billingAddress: x,
+                returnUrl: E,
+                onSuccess: a,
+                onError: p
               }
             )
           },
-          r
+          t
         ) : /* @__PURE__ */ n(
           Ne,
           {
-            amount: e,
-            currency: s,
-            locale: v,
-            billingAddress: m
+            amount: i,
+            currency: e,
+            locale: y,
+            billingAddress: x
           }
         )
       }
@@ -520,19 +522,19 @@ const xe = se(
 xe.displayName = "PaymentForm";
 function Ne(r) {
   const { amount: t, currency: s, locale: e, billingAddress: i } = r, { t: a } = $();
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ l(
     "div",
     {
       className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
       "data-testid": "payment-skeleton",
       "aria-busy": "true",
       children: [
-        /* @__PURE__ */ u("div", { className: Q(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: a("payment.amountLabel") }),
+        /* @__PURE__ */ l("div", { className: Q(), children: [
+          /* @__PURE__ */ n("span", { className: S(), children: a("payment.amountLabel") }),
           /* @__PURE__ */ n("span", { className: "type-title-card", children: B(t, s, e) })
         ] }),
-        /* @__PURE__ */ u("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: a("payment.fields.card") }),
+        /* @__PURE__ */ l("div", { className: U(), children: [
+          /* @__PURE__ */ n("span", { className: S(), children: a("payment.fields.card") }),
           /* @__PURE__ */ n(
             "div",
             {
@@ -541,8 +543,8 @@ function Ne(r) {
             }
           )
         ] }),
-        i ? /* @__PURE__ */ u("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: a("payment.billingAddress") }),
+        i ? /* @__PURE__ */ l("div", { className: U(), children: [
+          /* @__PURE__ */ n("span", { className: S(), children: a("payment.billingAddress") }),
           /* @__PURE__ */ n(
             "div",
             {
@@ -551,7 +553,7 @@ function Ne(r) {
             }
           )
         ] }) : null,
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ l(
           "button",
           {
             type: "button",
@@ -576,4 +578,4 @@ export {
   B as f,
   ee as s
 };
-//# sourceMappingURL=payment-form-hcl-gGrp.js.map
+//# sourceMappingURL=payment-form-BWaXas8z.js.map

package/dist/_chunks/{payment-form.agent-BkEnRerR.js → payment-form.agent-kuIfodCj.js}

@@ -17,10 +17,15 @@ const e = {
     }
   },
   domHooks: {
-    root: { attr: "data-component", value: "payment-form" }
+    root: { attr: "data-component", value: "payment-form" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
   }
 };
 export {
   e as p
 };
-//# sourceMappingURL=payment-form.agent-BkEnRerR.js.map
+//# sourceMappingURL=payment-form.agent-kuIfodCj.js.map