@alfadocs/ui-kit 0.44.0 → 0.46.0

package/dist/_chunks/payment-form-BzVsG6Ks.js

@@ -1,590 +0,0 @@
-import { jsx as t, jsxs as m, Fragment as ne } from "react/jsx-runtime";
-import { forwardRef as se, useState as C, 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-CCByyvcb.js";
-import { A as W } from "./alert-ywPR59NE.js";
-import { loadStripe as de } from "@stripe/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-nPAVE19X.js";
-function Y() {
-  return typeof document < "u" && typeof window < "u";
-}
-function B(r) {
-  if (!Y())
-    return { theme: "stripe" };
-  const n = r ?? document.documentElement, s = getComputedStyle(n), e = (a) => s.getPropertyValue(a).trim();
-  return {
-    theme: n.classList.contains("theme-dark") ? "night" : "stripe",
-    variables: {
-      colorPrimary: e("--primary"),
-      colorBackground: e("--background"),
-      colorText: e("--foreground"),
-      colorDanger: e("--destructive"),
-      colorTextSecondary: e("--muted-foreground"),
-      colorTextPlaceholder: e("--muted-foreground"),
-      borderRadius: e("--radius-md"),
-      fontFamily: e("--font-sans"),
-      fontSizeBase: e("--font-size-base"),
-      // Stripe multiplies spacingUnit throughout every Element; --spacing-sm
-      // gives readable density. Keep this in sync with the JSDoc above.
-      spacingUnit: e("--spacing-sm")
-    },
-    rules: {
-      ".Input": {
-        backgroundColor: e("--background"),
-        border: `1px solid ${e("--border")}`,
-        color: e("--foreground"),
-        padding: e("--spacing-sm"),
-        transition: `border-color ${e("--animation-duration")} ease-out`
-      },
-      ".Input:focus": {
-        borderColor: e("--primary"),
-        boxShadow: `0 0 0 ${e("--focus-ring-width")} ${e("--ring")}`,
-        outline: "none"
-      },
-      ".Input--invalid": {
-        borderColor: e("--destructive"),
-        color: e("--foreground")
-      },
-      ".Label": {
-        color: e("--foreground"),
-        fontWeight: e("--font-weight-medium"),
-        fontSize: e("--font-size-sm")
-      },
-      ".Error": {
-        color: e("--destructive"),
-        fontSize: e("--font-size-sm")
-      },
-      ".Tab": {
-        border: `1px solid ${e("--border")}`,
-        backgroundColor: e("--background"),
-        color: e("--foreground")
-      },
-      ".Tab--selected": {
-        borderColor: e("--primary"),
-        backgroundColor: e("--background"),
-        color: e("--primary")
-      }
-    }
-  };
-}
-function be(r, n) {
-  if (!Y()) return () => {
-  };
-  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)"), 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 ye = {
-  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."
-    }
-  }
-}, ge = /* @__PURE__ */ new Set([
-  "BIF",
-  "CLP",
-  "DJF",
-  "GNF",
-  "IDR",
-  "JPY",
-  "KMF",
-  "KRW",
-  "MGA",
-  "PYG",
-  "RWF",
-  "UGX",
-  "VND",
-  "VUV",
-  "XAF",
-  "XOF",
-  "XPF"
-]);
-function $(r, n, s) {
-  const e = n.toUpperCase(), i = ge.has(e) ? r : r / 100;
-  try {
-    return new Intl.NumberFormat(s, {
-      style: "currency",
-      currency: e
-    }).format(i);
-  } catch {
-    return new Intl.NumberFormat("en", {
-      style: "currency",
-      currency: e
-    }).format(i);
-  }
-}
-function ve(r) {
-  if (r === void 0) return null;
-  const n = r.trim();
-  if (n === "" || typeof window > "u") return null;
-  try {
-    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;
-  }
-}
-function X(r) {
-  return r && r.replace(/\d{4,}/g, "****");
-}
-function he(r) {
-  switch (r) {
-    case "incorrect_number":
-    case "invalid_number":
-      return "payment.error.cardNumber";
-    case "invalid_expiry_month":
-    case "invalid_expiry_year":
-    case "expired_card":
-      return "payment.error.expiry";
-    case "invalid_cvc":
-    case "incorrect_cvc":
-      return "payment.error.cvc";
-    case "incorrect_zip":
-    case "invalid_zip":
-      return "payment.error.postalCode";
-    case "card_declined":
-    case "do_not_honor":
-    case "generic_decline":
-      return "payment.error.declined";
-    case "network_error":
-    case "api_connection_error":
-      return "payment.error.network";
-    default:
-      return "payment.error.generic";
-  }
-}
-const we = z(
-  [
-    "ds:payment-form-alfadocs ds:flex ds:flex-col",
-    "ds:gap-[var(--spacing-md)]",
-    "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-    "ds:rounded-[var(--radius-md)] ds:border ds:border-[color:var(--card-border)] ds:shadow-[var(--shadow-card)] ds:[.theme-accessible_&]:border-2",
-    "ds:p-[var(--spacing-md)]",
-    "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed"
-  ].join(" ")
-), T = z(
-  ["ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]"].join(" ")
-), E = z(
-  ["type-label", "ds:text-[var(--foreground)]"].join(" ")
-), Q = z(
-  [
-    "ds:flex ds:items-baseline ds:justify-between",
-    "ds:gap-[var(--spacing-sm)]",
-    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
-    "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
-    "ds:bg-[var(--muted)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:text-[var(--foreground)]"
-  ].join(" ")
-), ee = z(
-  [
-    "ds:inline-flex ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)]",
-    "ds:[min-block-size:var(--min-target-size)]",
-    "ds:[min-inline-size:var(--min-target-size)]",
-    "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]",
-    "ds:rounded-[var(--radius-sm)]",
-    "ds:bg-[var(--primary)] ds:text-[var(--primary-foreground)]",
-    "ds:text-[length:var(--font-size-base)] ds:font-medium",
-    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-    "ds:hover:bg-[var(--primary-hover)]",
-    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
-    "ds:focus-visible:outline-solid",
-    "ds:focus-visible:outline-[var(--ring)]",
-    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "ds:forced-colors:focus-visible:outline-[CanvasText]",
-    "ds:aria-disabled:opacity-[var(--opacity-50)] ds:aria-disabled:cursor-not-allowed",
-    "ds:aria-busy:cursor-wait"
-  ].join(" ")
-);
-function xe(r) {
-  const {
-    amount: n,
-    currency: s,
-    locale: e,
-    billingAddress: i,
-    returnUrl: a,
-    onSuccess: f,
-    onError: N
-  } = 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] = C(!1), [A, P] = C(!1), [w, x] = C(null), [U, d] = C(""), c = V(f), l = V(N);
-  R(() => {
-    c.current = f, l.current = N;
-  }, [f, N]);
-  const D = ie(
-    async (p) => {
-      var G, H, O, K;
-      if (p && p.preventDefault(), !k || !S || u) return;
-      h(!0), x(null), d("");
-      const _ = ve(a);
-      if (a !== void 0 && _ === 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")
-        }), h(!1);
-        return;
-      }
-      try {
-        const y = await k.confirmPayment({
-          elements: S,
-          confirmParams: _ ? { return_url: _ } : {},
-          redirect: "if_required"
-        });
-        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;
-        }
-        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")
-        });
-      } finally {
-        h(!1);
-      }
-    },
-    [k, S, u, a, o]
-  );
-  R(() => {
-    const p = document.getElementById(b);
-    if (!p) return;
-    const _ = () => {
-      D();
-    };
-    return p.addEventListener("payment-form:submit", _), () => p.removeEventListener("payment-form:submit", _);
-  }, [b, D]);
-  const re = !k || !S || !A || u;
-  return /* @__PURE__ */ t(
-    "form",
-    {
-      id: b,
-      onSubmit: D,
-      "aria-label": o("payment.ariaLabel"),
-      "aria-busy": u || void 0,
-      noValidate: !0,
-      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: E(), children: o("payment.amountLabel") }),
-          /* @__PURE__ */ t("span", { className: "type-title-card", "data-testid": "payment-amount", children: $(n, s, e) })
-        ] }),
-        /* @__PURE__ */ m(
-          "label",
-          {
-            htmlFor: F,
-            className: T(),
-            "data-testid": "payment-field",
-            children: [
-              /* @__PURE__ */ t("span", { className: E(), children: o("payment.fields.card") }),
-              /* @__PURE__ */ t(
-                ue,
-                {
-                  id: F,
-                  options: {
-                    layout: { type: "accordion", defaultCollapsed: !1 }
-                  },
-                  onChange: (p) => {
-                    P(p.complete === !0), p.complete && (x(null), d(""));
-                  }
-                }
-              )
-            ]
-          }
-        ),
-        i ? /* @__PURE__ */ m(
-          "label",
-          {
-            htmlFor: L,
-            className: T(),
-            "data-testid": "payment-address",
-            children: [
-              /* @__PURE__ */ t("span", { className: E(), children: o("payment.billingAddress") }),
-              /* @__PURE__ */ t(pe, { id: L, options: { mode: "billing" } })
-            ]
-          }
-        ) : null,
-        w ? /* @__PURE__ */ t(
-          W,
-          {
-            id: v,
-            variant: "error",
-            live: "polite",
-            "data-testid": "payment-error",
-            children: /* @__PURE__ */ t(W.Description, { children: U })
-          }
-        ) : null,
-        /* @__PURE__ */ t(
-          "button",
-          {
-            type: "submit",
-            "aria-disabled": re || void 0,
-            "aria-busy": u || void 0,
-            "aria-describedby": w ? v : void 0,
-            className: ee(),
-            "data-testid": "payment-submit",
-            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)
-            }) })
-          }
-        )
-      ] })
-    }
-  );
-}
-const Z = /* @__PURE__ */ new Set([
-  "auto",
-  "ar",
-  "bg",
-  "cs",
-  "da",
-  "de",
-  "el",
-  "en",
-  "en-AU",
-  "en-CA",
-  "en-NZ",
-  "en-GB",
-  "es",
-  "es-ES",
-  "es-419",
-  "et",
-  "fi",
-  "fil",
-  "fr",
-  "fr-CA",
-  "fr-FR",
-  "he",
-  "hu",
-  "hr",
-  "id",
-  "it",
-  "it-IT",
-  "ja",
-  "ko",
-  "lt",
-  "lv",
-  "ms",
-  "mt",
-  "nb",
-  "nl",
-  "no",
-  "pl",
-  "pt",
-  "pt-BR",
-  "ro",
-  "ru",
-  "sk",
-  "sl",
-  "sv",
-  "th",
-  "tr",
-  "vi",
-  "zh",
-  "zh-HK",
-  "zh-TW"
-]);
-function Ne(r) {
-  if (!r) return "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 ke = se(
-  ({
-    id: r,
-    clientSecret: n,
-    publishableKey: s,
-    currency: e,
-    amount: i,
-    onSuccess: a,
-    onError: f,
-    billingAddress: N = !1,
-    locale: o,
-    ariaLabel: k,
-    returnUrl: S,
-    stripePromise: g,
-    className: b
-  }, F) => {
-    const { i18n: L } = q(), v = Ne(o ?? L.language ?? "en"), [u, h] = C(g ?? null);
-    R(() => {
-      if (g !== void 0) {
-        h(g);
-        return;
-      }
-      if (!s) {
-        h(null);
-        return;
-      }
-      h(de(s));
-    }, [g, s]);
-    const [A, P] = C(
-      () => B()
-    );
-    R(() => (P(B()), be(P)), []);
-    const w = V(null), x = j(
-      () => ({
-        submit: async () => {
-          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 c;
-          const d = (c = w.current) == null ? void 0 : c.querySelector("form");
-          d instanceof HTMLFormElement && d.reset();
-        }
-      }),
-      []
-    );
-    ae(F, () => w.current, []), fe(ye, x, r);
-    const U = j(
-      () => ({
-        clientSecret: n,
-        appearance: A,
-        locale: v
-      }),
-      [n, A, v]
-    );
-    return /* @__PURE__ */ t(
-      "div",
-      {
-        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: u && n ? /* @__PURE__ */ t(
-          ce,
-          {
-            stripe: u,
-            options: U,
-            children: /* @__PURE__ */ t(
-              xe,
-              {
-                amount: i,
-                currency: e,
-                locale: v,
-                billingAddress: N,
-                returnUrl: S,
-                onSuccess: a,
-                onError: f
-              }
-            )
-          },
-          n
-        ) : /* @__PURE__ */ t(
-          Se,
-          {
-            amount: i,
-            currency: e,
-            locale: v,
-            billingAddress: N
-          }
-        )
-      }
-    );
-  }
-);
-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__ */ m("div", { className: Q(), children: [
-          /* @__PURE__ */ t("span", { className: E(), children: a("payment.amountLabel") }),
-          /* @__PURE__ */ t("span", { className: "type-title-card", children: $(n, s, e) })
-        ] }),
-        /* @__PURE__ */ m("div", { className: T(), children: [
-          /* @__PURE__ */ t("span", { className: E(), 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)]",
-              "aria-hidden": "true"
-            }
-          )
-        ] }),
-        i ? /* @__PURE__ */ m("div", { className: T(), "data-testid": "payment-address", children: [
-          /* @__PURE__ */ t("span", { className: E(), 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)]",
-              "aria-hidden": "true"
-            }
-          )
-        ] }) : null,
-        /* @__PURE__ */ m(
-          "button",
-          {
-            type: "button",
-            "aria-disabled": "true",
-            className: ee(),
-            disabled: !0,
-            children: [
-              /* @__PURE__ */ t(J, { size: "sm", label: a("payment.processing") }),
-              /* @__PURE__ */ t("span", { children: a("payment.processing") })
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
-export {
-  ke as P,
-  we as a,
-  X as b,
-  he as c,
-  $ as f,
-  ye as p,
-  ee as s
-};
-//# sourceMappingURL=payment-form-BzVsG6Ks.js.map