@loczer/storefront-sdk 0.181.0 → 0.182.0

package/dist/components/WhatsAppFloatingButton/WhatsAppFloatingButton.js

@@ -1,44 +1,64 @@
-import { jsx as c, jsxs as n } from "react/jsx-runtime";
-import { useWhatsAppFloatingButton as r } from "./useWhatsAppFloatingButton.js";
-function s({ className: e }) {
-  return /* @__PURE__ */ n(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 48 48",
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      className: e,
-      "aria-hidden": "true",
-      focusable: "false",
-      children: [
-        /* @__PURE__ */ c("path", { fill: "#fff", d: "M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z" }),
-        /* @__PURE__ */ c("path", { fill: "#fff", d: "M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z" }),
-        /* @__PURE__ */ c("path", { fill: "#cfd8dc", d: "M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z" }),
-        /* @__PURE__ */ c("path", { fill: "#40c351", d: "M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z" }),
-        /* @__PURE__ */ c("path", { fill: "#fff", fillRule: "evenodd", d: "M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z", clipRule: "evenodd" })
-      ]
-    }
-  );
+import { useWhatsAppFloatingButton as e } from "./useWhatsAppFloatingButton.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/WhatsAppFloatingButton/WhatsAppFloatingButton.tsx
+function r({ className: e }) {
+	return /* @__PURE__ */ n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 48 48",
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		className: e,
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ t("path", {
+				fill: "#fff",
+				d: "M4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98c-0.001,0,0,0,0,0h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303z"
+			}),
+			/* @__PURE__ */ t("path", {
+				fill: "#fff",
+				d: "M4.868,43.803c-0.132,0-0.26-0.052-0.355-0.148c-0.125-0.127-0.174-0.312-0.127-0.483l2.639-9.636c-1.636-2.906-2.499-6.206-2.497-9.556C4.532,13.238,13.273,4.5,24.014,4.5c5.21,0.002,10.105,2.031,13.784,5.713c3.679,3.683,5.704,8.577,5.702,13.781c-0.004,10.741-8.746,19.48-19.486,19.48c-3.189-0.001-6.344-0.788-9.144-2.277l-9.875,2.589C4.953,43.798,4.911,43.803,4.868,43.803z"
+			}),
+			/* @__PURE__ */ t("path", {
+				fill: "#cfd8dc",
+				d: "M24.014,5c5.079,0.002,9.845,1.979,13.43,5.566c3.584,3.588,5.558,8.356,5.556,13.428c-0.004,10.465-8.522,18.98-18.986,18.98h-0.008c-3.177-0.001-6.3-0.798-9.073-2.311L4.868,43.303l2.694-9.835C5.9,30.59,5.026,27.324,5.027,23.979C5.032,13.514,13.548,5,24.014,5 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974C24.014,42.974,24.014,42.974,24.014,42.974 M24.014,4C24.014,4,24.014,4,24.014,4C12.998,4,4.032,12.962,4.027,23.979c-0.001,3.367,0.849,6.685,2.461,9.622l-2.585,9.439c-0.094,0.345,0.002,0.713,0.254,0.967c0.19,0.192,0.447,0.297,0.711,0.297c0.085,0,0.17-0.011,0.254-0.033l9.687-2.54c2.828,1.468,5.998,2.243,9.197,2.244c11.024,0,19.99-8.963,19.995-19.98c0.002-5.339-2.075-10.359-5.848-14.135C34.378,6.083,29.357,4.002,24.014,4L24.014,4z"
+			}),
+			/* @__PURE__ */ t("path", {
+				fill: "#40c351",
+				d: "M35.176,12.832c-2.98-2.982-6.941-4.625-11.157-4.626c-8.704,0-15.783,7.076-15.787,15.774c-0.001,2.981,0.833,5.883,2.413,8.396l0.376,0.597l-1.595,5.821l5.973-1.566l0.577,0.342c2.422,1.438,5.2,2.198,8.032,2.199h0.006c8.698,0,15.777-7.077,15.78-15.776C39.795,19.778,38.156,15.814,35.176,12.832z"
+			}),
+			/* @__PURE__ */ t("path", {
+				fill: "#fff",
+				fillRule: "evenodd",
+				d: "M19.268,16.045c-0.355-0.79-0.729-0.806-1.068-0.82c-0.277-0.012-0.593-0.011-0.909-0.011c-0.316,0-0.83,0.119-1.265,0.594c-0.435,0.475-1.661,1.622-1.661,3.956c0,2.334,1.7,4.59,1.937,4.906c0.237,0.316,3.282,5.259,8.104,7.161c4.007,1.58,4.823,1.266,5.693,1.187c0.87-0.079,2.807-1.147,3.202-2.255c0.395-1.108,0.395-2.057,0.277-2.255c-0.119-0.198-0.435-0.316-0.909-0.554s-2.807-1.385-3.242-1.543c-0.435-0.158-0.751-0.237-1.068,0.238c-0.316,0.474-1.225,1.543-1.502,1.859c-0.277,0.317-0.554,0.357-1.028,0.119c-0.474-0.238-2.002-0.738-3.815-2.354c-1.41-1.257-2.362-2.81-2.639-3.285c-0.277-0.474-0.03-0.731,0.208-0.968c0.213-0.213,0.474-0.554,0.712-0.831c0.237-0.277,0.316-0.475,0.474-0.791c0.158-0.317,0.079-0.594-0.04-0.831C20.612,19.329,19.69,16.983,19.268,16.045z",
+				clipRule: "evenodd"
+			})
+		]
+	});
 }
-const d = (e) => {
-  const { href: l, containerRef: t, bubbleRef: o, onLinkClick: i } = r(e);
-  return typeof window > "u" || !l ? null : /* @__PURE__ */ c("div", { ref: t, className: "fixed bottom-4 right-4 z-50 pointer-events-none select-none", children: /* @__PURE__ */ c("div", { ref: o, className: "pointer-events-auto", style: { touchAction: "none" }, children: /* @__PURE__ */ n(
-    "a",
-    {
-      href: l,
-      target: "_blank",
-      rel: "nofollow noopener noreferrer",
-      className: "group inline-flex h-14 w-14 md:h-12 md:w-12 items-center justify-center rounded-full bg-[#25D366] hover:bg-[#1DA851] shadow-lg ring-1 ring-[#1DA851] transition-colors p-1",
-      "aria-label": "WhatsApp",
-      onClick: i,
-      children: [
-        /* @__PURE__ */ c(s, { className: "h-9 w-9 md:h-8 md:w-8" }),
-        /* @__PURE__ */ c("span", { className: "sr-only", children: "WhatsApp" })
-      ]
-    }
-  ) }) });
-};
-export {
-  d as WhatsAppFloatingButton
+var i = (i) => {
+	let { href: a, containerRef: o, bubbleRef: s, onLinkClick: c } = e(i);
+	return typeof window > "u" || !a ? null : /* @__PURE__ */ t("div", {
+		ref: o,
+		className: "fixed bottom-4 right-4 z-50 pointer-events-none select-none",
+		children: /* @__PURE__ */ t("div", {
+			ref: s,
+			className: "pointer-events-auto",
+			style: { touchAction: "none" },
+			children: /* @__PURE__ */ n("a", {
+				href: a,
+				target: "_blank",
+				rel: "nofollow noopener noreferrer",
+				className: "group inline-flex h-14 w-14 md:h-12 md:w-12 items-center justify-center rounded-full bg-[#25D366] hover:bg-[#1DA851] shadow-lg ring-1 ring-[#1DA851] transition-colors p-1",
+				"aria-label": "WhatsApp",
+				onClick: c,
+				children: [/* @__PURE__ */ t(r, { className: "h-9 w-9 md:h-8 md:w-8" }), /* @__PURE__ */ t("span", {
+					className: "sr-only",
+					children: "WhatsApp"
+				})]
+			})
+		})
+	});
 };
+//#endregion
+export { i as WhatsAppFloatingButton };

package/dist/components/WhatsAppFloatingButton/index.js

@@ -1,6 +1,3 @@
-import { WhatsAppFloatingButton as p } from "./WhatsAppFloatingButton.js";
-import { useWhatsAppFloatingButton as n } from "./useWhatsAppFloatingButton.js";
-export {
-  p as WhatsAppFloatingButton,
-  n as useWhatsAppFloatingButton
-};
+import { useWhatsAppFloatingButton as e } from "./useWhatsAppFloatingButton.js";
+import { WhatsAppFloatingButton as t } from "./WhatsAppFloatingButton.js";
+export { t as WhatsAppFloatingButton, e as useWhatsAppFloatingButton };

package/dist/components/WhatsAppFloatingButton/useWhatsAppFloatingButton.js

@@ -1,74 +1,85 @@
-import { useRef as i, useEffect as N, useCallback as q } from "react";
-import H from "interactjs";
-const W = (C = {}) => {
-  const { href: B } = C, D = B, $ = i(null), b = i(null), x = i(!1), y = i(!1), e = i({ x: 0, y: 0 }), d = i(null), s = i(null);
-  N(() => {
-    const r = b.current;
-    if (!r) return;
-    const m = r.getBoundingClientRect();
-    d.current = {
-      left: m.left,
-      top: m.top,
-      width: m.width,
-      height: m.height
-    };
-    const p = 8, M = () => {
-      if (!d.current) return e.current;
-      const { left: t, top: n, width: c, height: g } = d.current, o = p - t, w = p - n, u = window.innerWidth - p - c - t, a = window.innerHeight - p - g - n, l = Math.min(Math.max(e.current.x, o), u), f = Math.min(Math.max(e.current.y, w), a);
-      return e.current = { x: l, y: f }, { x: l, y: f, minX: o, minY: w, maxX: u, maxY: a };
-    }, h = () => {
-      const { x: t, y: n } = M();
-      r.style.transform = `translate3d(${t}px, ${n}px, 0)`;
-    }, R = () => {
-      s.current != null && (cancelAnimationFrame(s.current), s.current = null), y.current = !1;
-    }, z = typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, E = (t, n) => {
-      if (z) {
-        h();
-        return;
-      }
-      let c = performance.now();
-      y.current = !0;
-      const g = 0.92, o = 0.7, w = 20, u = (a) => {
-        const l = (a - c) / 1e3;
-        c = a, e.current.x += t * l, e.current.y += n * l;
-        const { minX: f, minY: F, maxX: X, maxY: Y } = M();
-        if (e.current.x <= f + 1e-3 && t < 0 ? (e.current.x = f, t = -t * o) : e.current.x >= X - 1e-3 && t > 0 && (e.current.x = X, t = -t * o), e.current.y <= F + 1e-3 && n < 0 ? (e.current.y = F, n = -n * o) : e.current.y >= Y - 1e-3 && n > 0 && (e.current.y = Y, n = -n * o), t *= g, n *= g, r.style.transform = `translate3d(${e.current.x}px, ${e.current.y}px, 0)`, Math.hypot(t, n) < w) {
-          R();
-          return;
-        }
-        s.current = requestAnimationFrame(u);
-      };
-      s.current = requestAnimationFrame(u);
-    }, L = H(r).draggable({ inertia: !1 }).styleCursor(!1).on("dragstart", () => {
-      R(), x.current = !0;
-    }).on("dragmove", (t) => {
-      e.current.x += t.dx, e.current.y += t.dy, h();
-    }).on("dragend", (t) => {
-      const n = Number.isFinite(t.velocityX) ? t.velocityX : 0, c = Number.isFinite(t.velocityY) ? t.velocityY : 0;
-      x.current = !1, Math.hypot(n, c) >= 10 && E(n, c);
-    }), A = () => {
-      const t = r.getBoundingClientRect();
-      d.current = {
-        left: t.left - e.current.x,
-        top: t.top - e.current.y,
-        width: t.width,
-        height: t.height
-      }, h();
-    };
-    return window.addEventListener("resize", A), h(), () => {
-      L.unset(), R(), window.removeEventListener("resize", A);
-    };
-  }, []);
-  const k = q((r) => {
-    (x.current || y.current) && (r.preventDefault(), r.stopPropagation());
-  }, []);
-  return {
-    href: D,
-    containerRef: $,
-    bubbleRef: b,
-    onLinkClick: k
-  };
-};
-export {
-  W as useWhatsAppFloatingButton
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+import r from "interactjs";
+//#region src/components/WhatsAppFloatingButton/useWhatsAppFloatingButton.ts
+var i = (i = {}) => {
+	let { href: a } = i, o = a, s = n(null), c = n(null), l = n(!1), u = n(!1), d = n({
+		x: 0,
+		y: 0
+	}), f = n(null), p = n(null);
+	return t(() => {
+		let e = c.current;
+		if (!e) return;
+		let t = e.getBoundingClientRect();
+		f.current = {
+			left: t.left,
+			top: t.top,
+			width: t.width,
+			height: t.height
+		};
+		let n = () => {
+			if (!f.current) return d.current;
+			let { left: e, top: t, width: n, height: r } = f.current, i = 8 - e, a = 8 - t, o = window.innerWidth - 8 - n - e, s = window.innerHeight - 8 - r - t, c = Math.min(Math.max(d.current.x, i), o), l = Math.min(Math.max(d.current.y, a), s);
+			return d.current = {
+				x: c,
+				y: l
+			}, {
+				x: c,
+				y: l,
+				minX: i,
+				minY: a,
+				maxX: o,
+				maxY: s
+			};
+		}, i = () => {
+			let { x: t, y: r } = n();
+			e.style.transform = `translate3d(${t}px, ${r}px, 0)`;
+		}, a = () => {
+			p.current != null && (cancelAnimationFrame(p.current), p.current = null), u.current = !1;
+		}, o = typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches, s = (t, r) => {
+			if (o) {
+				i();
+				return;
+			}
+			let s = performance.now();
+			u.current = !0;
+			let c = .92, l = .7, f = (i) => {
+				let o = (i - s) / 1e3;
+				s = i, d.current.x += t * o, d.current.y += r * o;
+				let { minX: u, minY: m, maxX: h, maxY: g } = n();
+				if (d.current.x <= u + .001 && t < 0 ? (d.current.x = u, t = -t * l) : d.current.x >= h - .001 && t > 0 && (d.current.x = h, t = -t * l), d.current.y <= m + .001 && r < 0 ? (d.current.y = m, r = -r * l) : d.current.y >= g - .001 && r > 0 && (d.current.y = g, r = -r * l), t *= c, r *= c, e.style.transform = `translate3d(${d.current.x}px, ${d.current.y}px, 0)`, Math.hypot(t, r) < 20) {
+					a();
+					return;
+				}
+				p.current = requestAnimationFrame(f);
+			};
+			p.current = requestAnimationFrame(f);
+		}, m = r(e).draggable({ inertia: !1 }).styleCursor(!1).on("dragstart", () => {
+			a(), l.current = !0;
+		}).on("dragmove", (e) => {
+			d.current.x += e.dx, d.current.y += e.dy, i();
+		}).on("dragend", (e) => {
+			let t = Number.isFinite(e.velocityX) ? e.velocityX : 0, n = Number.isFinite(e.velocityY) ? e.velocityY : 0;
+			l.current = !1, Math.hypot(t, n) >= 10 && s(t, n);
+		}), h = () => {
+			let t = e.getBoundingClientRect();
+			f.current = {
+				left: t.left - d.current.x,
+				top: t.top - d.current.y,
+				width: t.width,
+				height: t.height
+			}, i();
+		};
+		return window.addEventListener("resize", h), i(), () => {
+			m.unset(), a(), window.removeEventListener("resize", h);
+		};
+	}, []), {
+		href: o,
+		containerRef: s,
+		bubbleRef: c,
+		onLinkClick: e((e) => {
+			(l.current || u.current) && (e.preventDefault(), e.stopPropagation());
+		}, [])
+	};
 };
+//#endregion
+export { i as useWhatsAppFloatingButton };

package/dist/components/payment/MollieCardFieldsForm.js

@@ -1,136 +1,186 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { useState as N, useRef as M, useEffect as R } from "react";
-import { Spinner as H } from "../../chunks/ui/dist/Spinner/index-SbbUxcsT.js";
-import { CreditCard as j } from "lucide-react";
-import { useTranslation as z } from "react-i18next";
-import { getMollieCardStyles as T } from "../../lib/mollieComponentStyles.js";
-import { Button as I } from "../../ui/button.js";
-import { Label as _ } from "../../ui/label.js";
-const $ = "https://js.mollie.com/v1/mollie.js";
-let v = null;
-const P = async () => {
-  if (typeof window > "u")
-    throw new Error("Mollie is not available in this environment.");
-  const o = window.Mollie;
-  return typeof o == "function" ? o : (v || (v = new Promise((s, d) => {
-    const f = document.querySelector(`script[src="${$}"]`), p = () => {
-      const r = window.Mollie;
-      if (typeof r == "function") {
-        s(r);
-        return;
-      }
-      d(new Error("Mollie.js did not expose a Mollie factory."));
-    };
-    if (f) {
-      f.addEventListener("load", p, { once: !0 }), f.addEventListener("error", () => d(new Error("Failed to load Mollie.js.")), { once: !0 });
-      return;
-    }
-    const a = document.createElement("script");
-    a.src = $, a.async = !0, a.addEventListener("load", p, { once: !0 }), a.addEventListener("error", () => d(new Error("Failed to load Mollie.js.")), { once: !0 }), document.body.appendChild(a);
-  }).catch((s) => {
-    throw v = null, s;
-  })), v);
-}, q = (o) => o.toLowerCase().startsWith("fr") ? "fr_FR" : "en_US";
-function V({
-  profileId: o,
-  testmode: s,
-  disabled: d = !1,
-  submitLabel: f,
-  submittingLabel: p,
-  onSubmit: a
-}) {
-  const { t: r, i18n: w } = z(), [D, x] = N(!0), [b, C] = N(!1), [k, l] = N(null), t = M({
-    cardHolder: `mollie-card-holder-${Math.random().toString(36).slice(2, 10)}`,
-    cardNumber: `mollie-card-number-${Math.random().toString(36).slice(2, 10)}`,
-    expiryDate: `mollie-expiry-date-${Math.random().toString(36).slice(2, 10)}`,
-    verificationCode: `mollie-verification-code-${Math.random().toString(36).slice(2, 10)}`
-  }), m = M(null), g = M([]);
-  return R(() => {
-    let u = !1;
-    return x(!0), l(null), m.current = null, (async () => {
-      try {
-        const n = await P();
-        if (u) return;
-        const i = n(o, {
-          locale: q(w.language),
-          testmode: s
-        }), h = T(), y = "", S = i.createComponent("cardHolder", {
-          styles: h,
-          label: y
-        }), E = i.createComponent("cardNumber", {
-          styles: h,
-          label: y
-        }), F = i.createComponent("expiryDate", {
-          styles: h,
-          label: y
-        }), L = i.createComponent("verificationCode", {
-          styles: h,
-          label: y
-        });
-        S.mount(`#${t.current.cardHolder}`), E.mount(`#${t.current.cardNumber}`), F.mount(`#${t.current.expiryDate}`), L.mount(`#${t.current.verificationCode}`), m.current = i, g.current = [S, E, F, L];
-      } catch (n) {
-        if (u) return;
-        l(n instanceof Error ? n.message : r("secure_payment_link.errors.payment_failed"));
-      } finally {
-        u || x(!1);
-      }
-    })(), () => {
-      u = !0;
-      for (const n of g.current)
-        n.unmount?.();
-      g.current = [], m.current = null;
-    };
-  }, [w.language, o, r, s]), /* @__PURE__ */ c("form", { onSubmit: async (u) => {
-    if (u.preventDefault(), !d) {
-      if (!m.current) {
-        l(r("secure_payment_link.errors.mollie_not_ready"));
-        return;
-      }
-      C(!0), l(null);
-      try {
-        const n = await m.current.createToken();
-        if (n.error?.message) {
-          l(n.error.message);
-          return;
-        }
-        const i = typeof n.token == "string" ? n.token.trim() : "";
-        if (!i) {
-          l(r("secure_payment_link.errors.payment_failed"));
-          return;
-        }
-        await a(i);
-      } catch (n) {
-        l(n instanceof Error ? n.message : r("secure_payment_link.errors.payment_failed"));
-      } finally {
-        C(!1);
-      }
-    }
-  }, className: "grid gap-3", children: [
-    /* @__PURE__ */ c("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(_, { htmlFor: t.current.cardHolder, children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.form.cardholder_name_label") }) }),
-      /* @__PURE__ */ e("div", { className: "min-h-11", children: /* @__PURE__ */ e("div", { id: t.current.cardHolder, className: "min-h-11" }) })
-    ] }),
-    /* @__PURE__ */ c("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ e(_, { htmlFor: t.current.cardNumber, children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.form.card_number_label") }) }),
-      /* @__PURE__ */ e("div", { className: "min-h-11", children: /* @__PURE__ */ e("div", { id: t.current.cardNumber, className: "min-h-11" }) })
-    ] }),
-    /* @__PURE__ */ c("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-      /* @__PURE__ */ c("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ e(_, { htmlFor: t.current.expiryDate, children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.form.card_expiry_label") }) }),
-        /* @__PURE__ */ e("div", { className: "min-h-11", children: /* @__PURE__ */ e("div", { id: t.current.expiryDate, className: "min-h-11" }) })
-      ] }),
-      /* @__PURE__ */ c("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ e(_, { htmlFor: t.current.verificationCode, children: /* @__PURE__ */ e("span", { children: r("secure_payment_link.form.card_cvc_label") }) }),
-        /* @__PURE__ */ e("div", { className: "min-h-11", children: /* @__PURE__ */ e("div", { id: t.current.verificationCode, className: "min-h-11" }) })
-      ] })
-    ] }),
-    k ? /* @__PURE__ */ e("p", { className: "text-sm text-destructive", children: /* @__PURE__ */ e("span", { children: k }) }) : null,
-    /* @__PURE__ */ c(I, { type: "submit", disabled: d || b || D || !m.current, className: "h-11 gap-2", children: [
-      b ? /* @__PURE__ */ e(H, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" }),
-      /* @__PURE__ */ e("span", { children: b ? p ?? r("secure_payment_link.form.submitting_button") : f ?? r("secure_payment_link.form.submit_button") })
-    ] })
-  ] });
+import { Button as e } from "../../ui/button.js";
+import { Label as t } from "../../ui/label.js";
+import { Spinner as n } from "../../chunks/ui/dist/Spinner/index-Dyk_LLEz.js";
+import { getMollieCardStyles as r } from "../../lib/mollieComponentStyles.js";
+import { useEffect as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useTranslation as l } from "react-i18next";
+import { CreditCard as u } from "lucide-react";
+//#region src/components/payment/MollieCardFieldsForm.tsx
+var d = "https://js.mollie.com/v1/mollie.js", f = null, p = async () => {
+	if (typeof window > "u") throw Error("Mollie is not available in this environment.");
+	let e = window.Mollie;
+	return typeof e == "function" ? e : (f ||= new Promise((e, t) => {
+		let n = document.querySelector(`script[src="${d}"]`), r = () => {
+			let n = window.Mollie;
+			if (typeof n == "function") {
+				e(n);
+				return;
+			}
+			t(/* @__PURE__ */ Error("Mollie.js did not expose a Mollie factory."));
+		};
+		if (n) {
+			n.addEventListener("load", r, { once: !0 }), n.addEventListener("error", () => t(/* @__PURE__ */ Error("Failed to load Mollie.js.")), { once: !0 });
+			return;
+		}
+		let i = document.createElement("script");
+		i.src = d, i.async = !0, i.addEventListener("load", r, { once: !0 }), i.addEventListener("error", () => t(/* @__PURE__ */ Error("Failed to load Mollie.js.")), { once: !0 }), document.body.appendChild(i);
+	}).catch((e) => {
+		throw f = null, e;
+	}), f);
+}, m = (e) => e.toLowerCase().startsWith("fr") ? "fr_FR" : "en_US";
+function h({ profileId: d, testmode: f, disabled: h = !1, submitLabel: g, submittingLabel: _, onSubmit: v }) {
+	let { t: y, i18n: b } = l(), [x, S] = o(!0), [C, w] = o(!1), [T, E] = o(null), D = a({
+		cardHolder: `mollie-card-holder-${Math.random().toString(36).slice(2, 10)}`,
+		cardNumber: `mollie-card-number-${Math.random().toString(36).slice(2, 10)}`,
+		expiryDate: `mollie-expiry-date-${Math.random().toString(36).slice(2, 10)}`,
+		verificationCode: `mollie-verification-code-${Math.random().toString(36).slice(2, 10)}`
+	}), O = a(null), k = a([]);
+	return i(() => {
+		let e = !1;
+		return S(!0), E(null), O.current = null, (async () => {
+			try {
+				let t = await p();
+				if (e) return;
+				let n = t(d, {
+					locale: m(b.language),
+					testmode: f
+				}), i = r(), a = n.createComponent("cardHolder", {
+					styles: i,
+					label: ""
+				}), o = n.createComponent("cardNumber", {
+					styles: i,
+					label: ""
+				}), s = n.createComponent("expiryDate", {
+					styles: i,
+					label: ""
+				}), c = n.createComponent("verificationCode", {
+					styles: i,
+					label: ""
+				});
+				a.mount(`#${D.current.cardHolder}`), o.mount(`#${D.current.cardNumber}`), s.mount(`#${D.current.expiryDate}`), c.mount(`#${D.current.verificationCode}`), O.current = n, k.current = [
+					a,
+					o,
+					s,
+					c
+				];
+			} catch (t) {
+				if (e) return;
+				E(t instanceof Error ? t.message : y("secure_payment_link.errors.payment_failed"));
+			} finally {
+				e || S(!1);
+			}
+		})(), () => {
+			e = !0;
+			for (let e of k.current) e.unmount?.();
+			k.current = [], O.current = null;
+		};
+	}, [
+		b.language,
+		d,
+		y,
+		f
+	]), /* @__PURE__ */ c("form", {
+		onSubmit: async (e) => {
+			if (e.preventDefault(), !h) {
+				if (!O.current) {
+					E(y("secure_payment_link.errors.mollie_not_ready"));
+					return;
+				}
+				w(!0), E(null);
+				try {
+					let e = await O.current.createToken();
+					if (e.error?.message) {
+						E(e.error.message);
+						return;
+					}
+					let t = typeof e.token == "string" ? e.token.trim() : "";
+					if (!t) {
+						E(y("secure_payment_link.errors.payment_failed"));
+						return;
+					}
+					await v(t);
+				} catch (e) {
+					E(e instanceof Error ? e.message : y("secure_payment_link.errors.payment_failed"));
+				} finally {
+					w(!1);
+				}
+			}
+		},
+		className: "grid gap-3",
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ s(t, {
+					htmlFor: D.current.cardHolder,
+					children: /* @__PURE__ */ s("span", { children: y("secure_payment_link.form.cardholder_name_label") })
+				}), /* @__PURE__ */ s("div", {
+					className: "min-h-11",
+					children: /* @__PURE__ */ s("div", {
+						id: D.current.cardHolder,
+						className: "min-h-11"
+					})
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "space-y-1",
+				children: [/* @__PURE__ */ s(t, {
+					htmlFor: D.current.cardNumber,
+					children: /* @__PURE__ */ s("span", { children: y("secure_payment_link.form.card_number_label") })
+				}), /* @__PURE__ */ s("div", {
+					className: "min-h-11",
+					children: /* @__PURE__ */ s("div", {
+						id: D.current.cardNumber,
+						className: "min-h-11"
+					})
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "grid gap-3 sm:grid-cols-2",
+				children: [/* @__PURE__ */ c("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ s(t, {
+						htmlFor: D.current.expiryDate,
+						children: /* @__PURE__ */ s("span", { children: y("secure_payment_link.form.card_expiry_label") })
+					}), /* @__PURE__ */ s("div", {
+						className: "min-h-11",
+						children: /* @__PURE__ */ s("div", {
+							id: D.current.expiryDate,
+							className: "min-h-11"
+						})
+					})]
+				}), /* @__PURE__ */ c("div", {
+					className: "space-y-1",
+					children: [/* @__PURE__ */ s(t, {
+						htmlFor: D.current.verificationCode,
+						children: /* @__PURE__ */ s("span", { children: y("secure_payment_link.form.card_cvc_label") })
+					}), /* @__PURE__ */ s("div", {
+						className: "min-h-11",
+						children: /* @__PURE__ */ s("div", {
+							id: D.current.verificationCode,
+							className: "min-h-11"
+						})
+					})]
+				})]
+			}),
+			T ? /* @__PURE__ */ s("p", {
+				className: "text-sm text-destructive",
+				children: /* @__PURE__ */ s("span", { children: T })
+			}) : null,
+			/* @__PURE__ */ c(e, {
+				type: "submit",
+				disabled: h || C || x || !O.current,
+				className: "h-11 gap-2",
+				children: [C ? /* @__PURE__ */ s(n, {
+					className: "size-4",
+					"aria-hidden": "true"
+				}) : /* @__PURE__ */ s(u, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ s("span", { children: C ? _ ?? y("secure_payment_link.form.submitting_button") : g ?? y("secure_payment_link.form.submit_button") })]
+			})
+		]
+	});
 }
-export {
-  V as MollieCardFieldsForm
-};
+//#endregion
+export { h as MollieCardFieldsForm };