@alfadocs/ui-kit-debug 0.1.8 → 0.2.0

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

@@ -1,20 +1,21 @@
-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 { c as I } from "./index-D2ZczOXr.js";
-import { useTranslation as $ } from "react-i18next";
-import { S as J } from "./spinner-GCcv67vh.js";
-import { A as W } from "./alert-BlOUMkXj.js";
+import { jsx as t, jsxs as m, Fragment as ne } from "react/jsx-runtime";
+import { forwardRef as se, useState as E, useEffect as R, useRef as V, useMemo as j, useImperativeHandle as ae, useId as oe, useCallback as ie } from "react";
+import { c as z } from "./index-D2ZczOXr.js";
+import { useTranslation as q } from "react-i18next";
+import { S as J } from "./spinner-DLaYfLPl.js";
+import { A as W } from "./alert-B1sj8Ss0.js";
 import { loadStripe as de } from "@stripe/stripe-js";
-import { Elements as ce, useStripe as le, useElements as ue, PaymentElement as me, AddressElement as pe } from "@stripe/react-stripe-js";
+import { Elements as ce, useStripe as le, useElements as me, PaymentElement as ue, AddressElement as pe } from "@stripe/react-stripe-js";
+import { u as fe } from "./registry-C9nwlNyL.js";
 function Y() {
   return typeof document < "u" && typeof window < "u";
 }
-function j(r) {
+function B(r) {
   if (!Y())
     return { theme: "stripe" };
-  const t = r ?? document.documentElement, s = getComputedStyle(t), e = (a) => s.getPropertyValue(a).trim();
+  const n = r ?? document.documentElement, s = getComputedStyle(n), e = (a) => s.getPropertyValue(a).trim();
   return {
-    theme: t.classList.contains("theme-dark") ? "night" : "stripe",
+    theme: n.classList.contains("theme-dark") ? "night" : "stripe",
     variables: {
       colorPrimary: e("--primary"),
       colorBackground: e("--background"),
@@ -68,20 +69,46 @@ function j(r) {
     }
   };
 }
-function fe(r, t) {
+function be(r, n) {
   if (!Y()) return () => {
   };
-  const s = document.documentElement, e = () => r(j(t)), i = new MutationObserver(e);
+  const s = document.documentElement, e = () => r(B(n)), i = new MutationObserver(e);
   i.observe(s, {
     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)"), f = window.matchMedia("(prefers-reduced-motion: reduce)");
+  return a.addEventListener("change", e), f.addEventListener("change", e), () => {
+    i.disconnect(), a.removeEventListener("change", e), f.removeEventListener("change", e);
   };
 }
-const be = /* @__PURE__ */ new Set([
+const ge = {
+  id: "payment-form",
+  capabilities: ["submit"],
+  state: {},
+  actions: {
+    submit: {
+      safety: "destructive",
+      description: "Submit the payment. Charges the configured payment method — irreversible.",
+      invoke: (r) => r.submit()
+    },
+    reset: {
+      safety: "destructive",
+      description: "Reset the form to its initial state. Loses any in-progress input.",
+      invoke: (r) => {
+        r.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "payment-form" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, ye = /* @__PURE__ */ new Set([
   "BIF",
   "CLP",
   "DJF",
@@ -100,8 +127,8 @@ const be = /* @__PURE__ */ new Set([
   "XOF",
   "XPF"
 ]);
-function B(r, t, s) {
-  const e = t.toUpperCase(), i = be.has(e) ? r : r / 100;
+function $(r, n, s) {
+  const e = n.toUpperCase(), i = ye.has(e) ? r : r / 100;
   try {
     return new Intl.NumberFormat(s, {
       style: "currency",
@@ -114,12 +141,12 @@ function B(r, t, s) {
     }).format(i);
   }
 }
-function ge(r) {
+function ve(r) {
   if (r === void 0) return null;
-  const t = r.trim();
-  if (t === "" || typeof window > "u") return null;
+  const n = r.trim();
+  if (n === "" || typeof window > "u") return null;
   try {
-    const s = new URL(t, window.location.href);
+    const s = new URL(n, window.location.href);
     return !(/* @__PURE__ */ new Set(["http:", "https:"])).has(s.protocol) || s.origin !== window.location.origin ? null : s.toString();
   } catch {
     return null;
@@ -128,7 +155,7 @@ function ge(r) {
 function X(r) {
   return r && r.replace(/\d{4,}/g, "****");
 }
-function ve(r) {
+function he(r) {
   switch (r) {
     case "incorrect_number":
     case "invalid_number":
@@ -154,7 +181,7 @@ function ve(r) {
       return "payment.error.generic";
   }
 }
-const ye = I(
+const we = z(
   [
     "ds:payment-form-alfadocs ds:flex ds:flex-col",
     "ds:gap-[var(--spacing-md)]",
@@ -163,14 +190,11 @@ const ye = I(
     "ds:p-[var(--spacing-md)]",
     "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
   ].join(" ")
-), U = I(
+), T = z(
   ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
-), E = I(
-  [
-    "type-label",
-    "ds:text-[var(--foreground)]"
-  ].join(" ")
-), Q = I(
+), _ = z(
+  ["type-label", "ds:text-[var(--foreground)]"].join(" ")
+), Q = z(
   [
     "ds:flex ds:items-baseline ds:justify-between",
     "ds:gap-[var(--spacing-sm)]",
@@ -180,7 +204,7 @@ const ye = I(
     "ds:rounded-[var(--radius-sm)]",
     "ds:text-[var(--foreground)]"
   ].join(" ")
-), ee = I(
+), ee = z(
   [
     "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
     "ds:min-block-size-[var(--min-target-size)]",
@@ -200,156 +224,143 @@ const ye = I(
     "ds:aria-busy:cursor-wait"
   ].join(" ")
 );
-function he(r) {
+function xe(r) {
   const {
-    amount: t,
+    amount: n,
     currency: s,
     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(_);
-  T(() => {
-    M.current = m, l.current = _;
-  }, [m, _]);
+    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]
+  ), 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;
+  }, [f, N]);
   const D = ie(
-    async (f) => {
-      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, {
+    async (p) => {
+      var G, H, O, K;
+      if (p && p.preventDefault(), !k || !S || u) return;
+      h(!0), x(null), d("");
+      const C = ve(a);
+      if (a !== void 0 && C === null) {
+        x("payment.error.invalidReturnUrl"), d(o("payment.error.invalidReturnUrl")), (G = l.current) == null || G.call(l, {
           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 k.confirmPayment({
+          elements: S,
+          confirmParams: C ? { return_url: C } : {},
           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, {
-            code: R,
-            translatedMessage: ne || o(z)
+          const M = g.error.code ?? "generic", I = he(M), te = X(g.error.message ?? "");
+          x(I), d(o(I)), (H = l.current) == null || H.call(l, {
+            code: M,
+            translatedMessage: te || o(I)
           });
           return;
         }
-        g.paymentIntent && ((O = M.current) == null || O.call(M, g.paymentIntent.id));
+        g.paymentIntent && ((O = c.current) == null || O.call(c, 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, {
+        const M = g instanceof Error ? g.message : "", I = X(M);
+        x("payment.error.generic"), d(o("payment.error.generic")), (K = l.current) == null || K.call(l, {
           code: "unexpected",
-          translatedMessage: z || o("payment.error.generic")
+          translatedMessage: I || o("payment.error.generic")
         });
       } finally {
-        w(!1);
+        h(!1);
       }
     },
-    [h, p, c, a, o]
+    [k, S, u, a, o]
   );
-  T(() => {
-    const f = document.getElementById(b);
-    if (!f) return;
-    const x = () => {
+  R(() => {
+    const p = document.getElementById(b);
+    if (!p) return;
+    const C = () => {
       D();
     };
-    return f.addEventListener("payment-form:submit", x), () => f.removeEventListener("payment-form:submit", x);
+    return p.addEventListener("payment-form:submit", C), () => p.removeEventListener("payment-form:submit", C);
   }, [b, D]);
-  const re = !h || !p || !P || c;
-  return /* @__PURE__ */ n(
+  const re = !k || !S || !A || u;
+  return /* @__PURE__ */ t(
     "form",
     {
       id: b,
       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") }),
-          /* @__PURE__ */ n(
-            "span",
-            {
-              className: "type-title-card",
-              "data-testid": "payment-amount",
-              children: B(t, s, e)
-            }
-          )
+      children: /* @__PURE__ */ m("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+        /* @__PURE__ */ m("div", { className: Q(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: o("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: $(n, s, e) })
         ] }),
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ m(
           "label",
           {
-            htmlFor: L,
-            className: U(),
+            htmlFor: F,
+            className: T(),
             "data-testid": "payment-field",
             children: [
-              /* @__PURE__ */ n("span", { className: E(), children: o("payment.fields.card") }),
-              /* @__PURE__ */ n(
-                me,
+              /* @__PURE__ */ t("span", { className: _(), children: o("payment.fields.card") }),
+              /* @__PURE__ */ t(
+                ue,
                 {
-                  id: L,
+                  id: F,
                   options: {
                     layout: { type: "accordion", defaultCollapsed: !1 }
                   },
-                  onChange: (f) => {
-                    C(f.complete === !0), f.complete && (d(null), S(""));
+                  onChange: (p) => {
+                    P(p.complete === !0), p.complete && (x(null), d(""));
                   }
                 }
               )
             ]
           }
         ),
-        i ? /* @__PURE__ */ u(
+        i ? /* @__PURE__ */ m(
           "label",
           {
-            htmlFor: v,
-            className: U(),
+            htmlFor: L,
+            className: T(),
             "data-testid": "payment-address",
             children: [
-              /* @__PURE__ */ n("span", { className: E(), children: o("payment.billingAddress") }),
-              /* @__PURE__ */ n(
-                pe,
-                {
-                  id: v,
-                  options: { mode: "billing" }
-                }
-              )
+              /* @__PURE__ */ t("span", { className: _(), children: o("payment.billingAddress") }),
+              /* @__PURE__ */ t(pe, { id: L, options: { mode: "billing" } })
             ]
           }
         ) : null,
-        A ? /* @__PURE__ */ n(
+        w ? /* @__PURE__ */ t(
           W,
           {
-            id: k,
+            id: v,
             variant: "error",
             live: "polite",
             "data-testid": "payment-error",
-            children: /* @__PURE__ */ n(W.Description, { children: y })
+            children: /* @__PURE__ */ t(W.Description, { children: U })
           }
         ) : null,
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           "button",
           {
             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": w ? v : void 0,
             className: ee(),
             "data-testid": "payment-submit",
-            children: c ? /* @__PURE__ */ u(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", {
-              amount: B(t, s, e)
+            children: u ? /* @__PURE__ */ m(ne, { children: [
+              /* @__PURE__ */ t(J, { size: "sm", label: o("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: o("payment.processing") })
+            ] }) : /* @__PURE__ */ t("span", { children: o("payment.submit", {
+              amount: $(n, s, e)
             }) })
           }
         )
@@ -357,7 +368,7 @@ function he(r) {
     }
   );
 }
-const H = /* @__PURE__ */ new Set([
+const Z = /* @__PURE__ */ new Set([
   "auto",
   "ar",
   "bg",
@@ -409,131 +420,130 @@ const H = /* @__PURE__ */ new Set([
   "zh-HK",
   "zh-TW"
 ]);
-function we(r) {
+function Ne(r) {
   if (!r) return "auto";
-  const t = r === "cn" ? "zh" : r;
-  if (H.has(t))
-    return t;
-  const s = t.split("-")[0];
-  return H.has(s) ? s : "auto";
+  const n = r === "cn" ? "zh" : r;
+  if (Z.has(n))
+    return n;
+  const s = n.split("-")[0];
+  return Z.has(s) ? s : "auto";
 }
-const xe = se(
+const ke = 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
-    );
-    T(() => {
-      if (p !== void 0) {
-        c(p);
+    id: r,
+    clientSecret: n,
+    publishableKey: s,
+    currency: e,
+    amount: i,
+    onSuccess: a,
+    onError: f,
+    billingAddress: N = !1,
+    locale: o,
+    ariaLabel: k,
+    returnUrl: S,
+    stripePromise: y,
+    className: b
+  }, F) => {
+    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = E(y ?? null);
+    R(() => {
+      if (y !== void 0) {
+        h(y);
         return;
       }
-      if (!t) {
-        c(null);
+      if (!s) {
+        h(null);
         return;
       }
-      c(de(t));
-    }, [p, t]);
-    const [w, P] = N(
-      () => j()
+      h(de(s));
+    }, [y, s]);
+    const [A, P] = E(
+      () => B()
     );
-    T(() => (P(j()), fe(P)), []);
-    const C = V(null);
-    ae(
-      b,
+    R(() => (P(B()), be(P)), []);
+    const w = V(null), x = j(
       () => ({
         submit: async () => {
-          var y;
-          const d = (y = C.current) == null ? void 0 : y.querySelector("form");
+          var c;
+          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
           d && d.dispatchEvent(
             new CustomEvent("payment-form:submit", { bubbles: !0 })
           );
         },
         reset: () => {
-          var y;
-          const d = (y = C.current) == null ? void 0 : y.querySelector("form");
+          var c;
+          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
           d instanceof HTMLFormElement && d.reset();
         }
       }),
       []
     );
-    const A = Z(
+    ae(F, () => w.current, []), fe(ge, x, r);
+    const U = j(
       () => ({
-        clientSecret: r,
-        appearance: w,
+        clientSecret: n,
+        appearance: A,
         locale: v
       }),
-      [r, w, v]
+      [n, A, v]
     );
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: C,
-        "aria-label": o,
-        className: [ye(), F].filter(Boolean).join(" "),
+        ref: w,
+        "aria-label": k,
+        className: [we(), b].filter(Boolean).join(" "),
         "data-component": "payment-form",
+        "data-component-id": r,
         "data-testid": "payment-form-root",
-        children: k && r ? /* @__PURE__ */ n(
+        children: u && n ? /* @__PURE__ */ t(
           ce,
           {
-            stripe: k,
-            options: A,
-            children: /* @__PURE__ */ n(
-              he,
+            stripe: u,
+            options: U,
+            children: /* @__PURE__ */ t(
+              xe,
               {
-                amount: e,
-                currency: s,
+                amount: i,
+                currency: e,
                 locale: v,
-                billingAddress: m,
-                returnUrl: h,
-                onSuccess: i,
-                onError: a
+                billingAddress: N,
+                returnUrl: S,
+                onSuccess: a,
+                onError: f
               }
             )
           },
-          r
-        ) : /* @__PURE__ */ n(
-          Ne,
+          n
+        ) : /* @__PURE__ */ t(
+          Se,
           {
-            amount: e,
-            currency: s,
+            amount: i,
+            currency: e,
             locale: v,
-            billingAddress: m
+            billingAddress: N
           }
         )
       }
     );
   }
 );
-xe.displayName = "PaymentForm";
-function Ne(r) {
-  const { amount: t, currency: s, locale: e, billingAddress: i } = r, { t: a } = $();
-  return /* @__PURE__ */ u(
+ke.displayName = "PaymentForm";
+function Se(r) {
+  const { amount: n, currency: s, locale: e, billingAddress: i } = r, { t: a } = q();
+  return /* @__PURE__ */ m(
     "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__ */ n("span", { className: "type-title-card", children: B(t, s, e) })
+        /* @__PURE__ */ m("div", { className: Q(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.amountLabel") }),
+          /* @__PURE__ */ t("span", { className: "type-title-card", children: $(n, s, e) })
         ] }),
-        /* @__PURE__ */ u("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: a("payment.fields.card") }),
-          /* @__PURE__ */ n(
+        /* @__PURE__ */ m("div", { className: T(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.fields.card") }),
+          /* @__PURE__ */ t(
             "div",
             {
               className: "ds:min-block-size-[var(--min-target-size)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
@@ -541,9 +551,9 @@ function Ne(r) {
             }
           )
         ] }),
-        i ? /* @__PURE__ */ u("div", { className: U(), children: [
-          /* @__PURE__ */ n("span", { className: E(), children: a("payment.billingAddress") }),
-          /* @__PURE__ */ n(
+        i ? /* @__PURE__ */ m("div", { className: T(), children: [
+          /* @__PURE__ */ t("span", { className: _(), children: a("payment.billingAddress") }),
+          /* @__PURE__ */ t(
             "div",
             {
               className: "ds:min-block-size-[calc(var(--min-target-size)*2)] ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--muted)]",
@@ -551,7 +561,7 @@ function Ne(r) {
             }
           )
         ] }) : null,
-        /* @__PURE__ */ u(
+        /* @__PURE__ */ m(
           "button",
           {
             type: "button",
@@ -559,8 +569,8 @@ function Ne(r) {
             className: ee(),
             disabled: !0,
             children: [
-              /* @__PURE__ */ n(J, { size: "sm", label: a("payment.processing") }),
-              /* @__PURE__ */ n("span", { children: a("payment.processing") })
+              /* @__PURE__ */ t(J, { size: "sm", label: a("payment.processing") }),
+              /* @__PURE__ */ t("span", { children: a("payment.processing") })
             ]
           }
         )
@@ -569,11 +579,12 @@ function Ne(r) {
   );
 }
 export {
-  xe as P,
-  ye as a,
+  ke as P,
+  we as a,
   X as b,
-  ve as c,
-  B as f,
+  he as c,
+  $ as f,
+  ge as p,
   ee as s
 };
-//# sourceMappingURL=payment-form-hcl-gGrp.js.map
+//# sourceMappingURL=payment-form-C3vT_npe.js.map