@test-glide/glide-payment 0.0.3 → 0.0.4

package/dist/react/react.es.js

@@ -1,43 +1,43 @@
 import { jsx as Q } from "react/jsx-runtime";
 import { useRef as X, useEffect as ee } from "react";
-function p(n, e = {}) {
-  const t = document.createElement(n), { className: a, id: r, innerHTML: m, textContent: i, attributes: c, styles: d, dataset: s, children: o, events: h } = e;
+function p(t, n = {}) {
+  const e = document.createElement(t), { className: a, id: i, innerHTML: m, textContent: l, attributes: r, styles: u, dataset: s, children: o, events: d } = n;
   if (a) {
-    const u = Array.isArray(a) ? a : a.split(" ");
-    t.classList.add(...u.filter(Boolean));
+    const h = Array.isArray(a) ? a : a.split(" ");
+    e.classList.add(...h.filter(Boolean));
   }
-  if (r && (t.id = r), m && (t.innerHTML = m), i && (t.textContent = i), c)
-    for (const [u, l] of Object.entries(c))
-      l && t.setAttribute(u, l);
-  if (d)
-    for (const [u, l] of Object.entries(d))
-      t.style[u] = l;
+  if (i && (e.id = i), m && (e.innerHTML = m), l && (e.textContent = l), r)
+    for (const [h, c] of Object.entries(r))
+      c && e.setAttribute(h, c);
+  if (u)
+    for (const [h, c] of Object.entries(u))
+      e.style[h] = c;
   if (s)
-    for (const [u, l] of Object.entries(s))
-      t.dataset[u] = l;
-  if (o && t.append(...o.filter(Boolean)), h)
-    for (const [u, l] of Object.entries(h))
-      t.addEventListener(u, l);
-  return t;
+    for (const [h, c] of Object.entries(s))
+      e.dataset[h] = c;
+  if (o && e.append(...o.filter(Boolean)), d)
+    for (const [h, c] of Object.entries(d))
+      e.addEventListener(h, c);
+  return e;
 }
-function x(n, e) {
-  const t = "id" in n ? [document.getElementById(n.id)].filter(Boolean) : "className" in n ? Array.from(document.getElementsByClassName(n.className)) : [n.element];
-  if (!t.length) {
-    console.warn("updateElements: no elements found for", n);
+function x(t, n) {
+  const e = "id" in t ? [document.getElementById(t.id)].filter(Boolean) : "className" in t ? Array.from(document.getElementsByClassName(t.className)) : [t.element];
+  if (!e.length) {
+    console.warn("updateElements: no elements found for", t);
     return;
   }
-  for (const a of t) {
-    const { styles: r, attributes: m, dataset: i, innerHTML: c, textContent: d, className: s } = e;
-    if (r)
-      for (const [o, h] of Object.entries(r))
-        a.style[o] = h;
-    if (m)
-      for (const [o, h] of Object.entries(m))
-        a.setAttribute(o, h);
+  for (const a of e) {
+    const { styles: i, attributes: m, dataset: l, innerHTML: r, textContent: u, className: s } = n;
     if (i)
-      for (const [o, h] of Object.entries(i))
-        a.dataset[o] = h;
-    if (c !== void 0 && (a.innerHTML = c), d !== void 0 && (a.textContent = d), s?.add) {
+      for (const [o, d] of Object.entries(i))
+        a.style[o] = d;
+    if (m)
+      for (const [o, d] of Object.entries(m))
+        a.setAttribute(o, d);
+    if (l)
+      for (const [o, d] of Object.entries(l))
+        a.dataset[o] = d;
+    if (r !== void 0 && (a.innerHTML = r), u !== void 0 && (a.textContent = u), s?.add) {
       const o = Array.isArray(s.add) ? s.add : [s.add];
       a.classList.add(...o);
     }
@@ -45,7 +45,7 @@ function x(n, e) {
       const o = Array.isArray(s.remove) ? s.remove : [s.remove];
       a.classList.remove(...o);
     }
-    s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((h) => a.classList.toggle(h));
+    s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
   }
 }
 const te = `
@@ -78,7 +78,7 @@ const te = `
 >
   <path d="M12 2v4M16.2 7.8l2.9-2.9M18 12h4M16.2 16.2l2.9 2.9M12 18v4M4.9 19.1l2.9-2.9M2 12h4M4.9 4.9l2.9 2.9"></path>
 </svg>  
-`, re = `<svg
+`, se = `<svg
   xmlns="http://www.w3.org/2000/svg"
   width="20"
   height="20"
@@ -95,45 +95,45 @@ const te = `
   ></path>
 </svg>`, k = `
 <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>  
-`, se = ({ children: n, onClick: e, disabled: t = !1, size: a = "medium", type: r = "button", className: m = "", variant: i = "primary" }) => {
-  const c = p("span", {
+`, re = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: i = "button", className: m = "", variant: l = "primary" }) => {
+  const r = p("span", {
     className: "button-spinner",
     innerHTML: ne,
     dataset: { show: "false" }
-  }), d = p("span", {
+  }), u = p("span", {
     className: "button-label",
     children: [
       null
     ],
-    textContent: n
+    textContent: t
   }), s = p("button", {
-    className: `custom-button ${i} ${a} ${m}`,
+    className: `custom-button ${l} ${a} ${m}`,
     attributes: {
-      type: r,
-      ...t ? { disabled: "true" } : {}
+      type: i,
+      ...e ? { disabled: "true" } : {}
     },
     events: {
-      click: e
+      click: n
     },
     children: [
-      c,
-      d
+      r,
+      u
     ]
-  }), o = (u = !1) => {
-    x({ element: c }, {
-      dataset: { show: String(u) }
-    }), h(u);
-  }, h = (u = !1) => {
-    u ? s.setAttribute("disabled", "true") : s.removeAttribute("disabled");
+  }), o = (h = !1) => {
+    x({ element: r }, {
+      dataset: { show: String(h) }
+    }), d(h);
+  }, d = (h = !1) => {
+    h ? s.setAttribute("disabled", "true") : s.removeAttribute("disabled");
   };
   return {
     element: s,
     setLoading: o,
-    setDisabled: h
+    setDisabled: d
   };
-}, oe = ({ content: n, position: e = "top", delay: t = 200, maxWidth: a = 250, className: r = "", id: m = "" }) => {
-  var i = p("div", {
-    className: `tooltip ${e} ${r}`,
+}, oe = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: i = "", id: m = "" }) => {
+  var l = p("div", {
+    className: `tooltip ${n} ${i}`,
     styles: {
       // top: `${tooltipPosition.top}px`,
       // left: `${tooltipPosition.left}px`,
@@ -144,162 +144,165 @@ const te = `
     },
     dataset: { show: "false" },
     innerHTML: `
-      <div class="tooltip-content">${n}</div>
+      <div class="tooltip-content">${t}</div>
       <div class="tooltip-arrow"></div>
     `
   });
-  let c = null;
+  let r = null;
   var o = p("span", {
     className: "tooltip-trigger",
     innerHTML: k,
     events: {
       mouseenter: () => {
-        t > 0 ? c = window.setTimeout(() => {
-          i.dataset.show = "true", h();
-        }, t) : (i.dataset.show = "true", h());
+        e > 0 ? r = window.setTimeout(() => {
+          l.dataset.show = "true", d();
+        }, e) : (l.dataset.show = "true", d());
       },
       mouseleave: () => {
-        c && clearTimeout(c), i.dataset.show = "false";
+        r && clearTimeout(r), l.dataset.show = "false";
       }
     }
   });
-  function h() {
-    if (!o || !i) return;
-    const l = o.getBoundingClientRect(), v = i.getBoundingClientRect(), y = 8;
-    let w, g;
-    switch (e) {
+  function d() {
+    if (!o || !l) return;
+    const c = o.getBoundingClientRect(), v = l.getBoundingClientRect(), b = 8;
+    let f, y;
+    switch (n) {
       case "top":
-        w = l.top - v.height - y, g = l.left + l.width / 2 - v.width / 2;
+        f = c.top - v.height - b, y = c.left + c.width / 2 - v.width / 2;
         break;
       case "bottom":
-        w = l.bottom + y, g = l.left + l.width / 2 - v.width / 2;
+        f = c.bottom + b, y = c.left + c.width / 2 - v.width / 2;
         break;
       case "left":
-        w = l.top + l.height / 2 - v.height / 2, g = l.left - v.width - y;
+        f = c.top + c.height / 2 - v.height / 2, y = c.left - v.width - b;
         break;
       case "right":
-        w = l.top + l.height / 2 - v.height / 2, g = l.right + y;
+        f = c.top + c.height / 2 - v.height / 2, y = c.right + b;
         break;
       default:
-        w = l.top - v.height - y, g = l.left + l.width / 2 - v.width / 2;
+        f = c.top - v.height - b, y = c.left + c.width / 2 - v.width / 2;
     }
-    const N = window.innerWidth, M = window.innerHeight;
-    g < 0 && (g = y), g + v.width > N && (g = N - v.width - y), w < 0 && (w = y), w + v.height > M && (w = M - v.height - y), i.style.top = `${w}px`, i.style.left = `${g}px`;
+    const N = window.innerWidth, C = window.innerHeight;
+    y < 0 && (y = b), y + v.width > N && (y = N - v.width - b), f < 0 && (f = b), f + v.height > C && (f = C - v.height - b), l.style.top = `${f}px`, l.style.left = `${y}px`;
   }
   return p("div", {
     className: "tooltip-wrapper",
     id: `tooltip-${m}`,
     children: [
       o,
-      i
+      l
     ]
   });
-}, ae = (n) => {
-  const e = {}, t = Object.values(n).every(
+}, ae = (t, n = !1) => {
+  const e = {}, a = Object.values(t).every(
     (r) => !r || r.trim() === ""
-  ), a = n.cardNumber?.replace(/\s/g, "");
-  if (a ? /^\d{13,19}$/.test(a) || (e.cardNumber = "Card number must be 13-19 digits") : e.cardNumber = "Card number is required", !n.expiryDate)
+  ), i = t.cardNumber?.replace(/\s/g, "");
+  if (i ? /^\d{13,19}$/.test(i) || (e.cardNumber = "Card number must be 13-19 digits") : e.cardNumber = "Card number is required", !t.expiryDate && !n)
     e.expiryDate = "Expiry date is required";
-  else {
-    const r = n.expiryDate.replace(/\D/g, "");
+  else if (t.expiryDate) {
+    const r = t.expiryDate.replace(/\D/g, "");
     if (r.length < 4)
       e.expiryDate = "Enter complete expiry date (MM/YY)";
     else {
-      const m = parseInt(r.substring(0, 2), 10), i = parseInt(r.substring(2, 4), 10);
-      if (isNaN(m) || m < 1 || m > 12)
+      const u = parseInt(r.substring(0, 2), 10), s = parseInt(r.substring(2, 4), 10);
+      if (isNaN(u) || u < 1 || u > 12)
         e.expiryDate = "Invalid month (must be 01-12)";
-      else if (isNaN(i) || i < 0 || i > 99)
+      else if (isNaN(s) || s < 0 || s > 99)
         e.expiryDate = "Invalid year";
       else {
-        const c = /* @__PURE__ */ new Date(), d = c.getFullYear(), s = c.getMonth() + 1, o = Math.floor(d / 100) * 100, h = o + i, u = o + 100 + i;
-        let l;
-        h >= d && h <= d + 20 ? l = h : (u >= d && u <= d + 20, l = u), l < d || l === d && m < s ? e.expiryDate = "Card has expired" : l > d + 20 && (e.expiryDate = "Expiry year is too far in the future");
+        const o = /* @__PURE__ */ new Date(), d = o.getFullYear(), h = o.getMonth() + 1, c = Math.floor(d / 100) * 100, v = c + s, b = c + 100 + s;
+        let f;
+        v >= d && v <= d + 20 ? f = v : (b >= d && b <= d + 20, f = b), f < d || f === d && u < h ? e.expiryDate = "Card has expired" : f > d + 20 && (e.expiryDate = "Expiry year is too far in the future");
       }
     }
   }
-  return n.cvv?.trim() ? /^\d{3,4}$/.test(n.cvv.trim()) || (e.cvv = "CVV must be 3 or 4 digits") : e.cvv = "CVV is required", n.zipCode?.trim() ? /^[A-Z0-9\s-]{3,10}$/i.test(n.zipCode.trim()) || (e.zipCode = "Invalid ZIP code format") : e.zipCode = "Postal code is required", {
+  const m = t.cvv.trim();
+  m && !/^\d{3,4}$/.test(m) && (e.cvv = "CVV must be 3 or 4 digits");
+  const l = t.zipCode.trim();
+  return l && !/^[A-Z0-9\s-]{3,10}$/i.test(l) && (e.zipCode = "Invalid ZIP code format"), {
     isValid: Object.keys(e).length === 0,
     errors: e,
-    isEmpty: t
+    isEmpty: a
   };
 };
-function ie(n) {
-  const e = parseInt(n, 10);
-  if (isNaN(e) || e < 0 || e > 99) return null;
-  const t = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(t / 100) * 100;
-  let r = a + e;
-  return r >= t && r <= t + 20 || (r = a + 100 + e, r >= t && r <= t + 20) ? r : a + 100 + e;
+function ie(t) {
+  const n = parseInt(t, 10);
+  if (isNaN(n) || n < 0 || n > 99) return null;
+  const e = (/* @__PURE__ */ new Date()).getFullYear(), a = Math.floor(e / 100) * 100;
+  let i = a + n;
+  return i >= e && i <= e + 20 || (i = a + 100 + n, i >= e && i <= e + 20) ? i : a + 100 + n;
 }
-function V(n = "") {
-  return n.trim().replaceAll(/\s/g, "").replaceAll("-", "");
+function V(t = "") {
+  return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
 }
 const le = {
-  card: (n) => n.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
-  phone: (n) => {
-    const e = n.replace(/\D/g, "").substring(0, 10), t = e.match(/^(\d{3})(\d{3})(\d{4})$/);
-    return t ? `(${t[1]}) ${t[2]}-${t[3]}` : e;
+  card: (t) => t.replace(/\s+/g, "").replace(/[^0-9]/gi, "").substring(0, 16).match(/.{1,4}/g)?.join(" ") ?? "",
+  phone: (t) => {
+    const n = t.replace(/\D/g, "").substring(0, 10), e = n.match(/^(\d{3})(\d{3})(\d{4})$/);
+    return e ? `(${e[1]}) ${e[2]}-${e[3]}` : n;
   },
-  expiry: (n) => {
-    const e = n.replace(/\//g, "");
-    return e.substring(0, 2) + (n.length > 2 ? "/" : "") + e.substring(2, 4);
+  expiry: (t) => {
+    const n = t.replace(/[^0-9/]/g, "");
+    return n.length <= 2 ? n : n.includes("/") ? n.substring(0, 5) : n.substring(0, 2) + "/" + n.substring(2, 4);
   },
-  cvv: (n) => n.replace(/\D/g, "").substring(0, 4),
-  zip: (n) => {
-    const e = n.replace(/\D/g, "").substring(0, 9);
-    return e.length > 5 ? `${e.substring(0, 5)}-${e.substring(5)}` : e;
+  cvv: (t) => t.replace(/\D/g, "").substring(0, 4),
+  zip: (t) => {
+    const n = t.replace(/\D/g, "").substring(0, 9);
+    return n.length > 5 ? `${n.substring(0, 5)}-${n.substring(5)}` : n;
   }
 };
-function ce(n, e) {
-  return e === "none" ? n : le[e](n);
+function ce(t, n) {
+  return n === "none" ? t : le[n](t);
 }
-const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholder: m = "Enter value", tooltip: i = "", onChange: c }) => {
-  const d = ["card", "expiry", "phone", "cvv", "zip"].includes(e) ? "numeric" : "", s = p("label", {
+const $ = ({ label: t, maskType: n, id: e, name: a, type: i = "text", placeholder: m = "Enter value", tooltip: l = "", onChange: r }) => {
+  const u = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = p("label", {
     className: "input-label",
-    innerHTML: n,
+    innerHTML: t,
     attributes: {
-      for: t
+      for: e
     }
   });
   let o = !1;
-  const u = p("input", {
-    id: t || "input-id",
+  const h = p("input", {
+    id: e || "input-id",
     className: "styled-input",
     attributes: {
       placeholder: m,
-      type: r,
-      inputMode: d,
+      type: i,
+      inputMode: u,
       name: a
     },
     events: {
-      input: l,
+      input: c,
       blur: v,
-      keydown: (b) => {
-        b.key === "Enter" && (o = !0);
+      keydown: (w) => {
+        w.key === "Enter" && (o = !0);
       }
     }
   });
-  function l(b) {
-    const D = e !== "none" ? ce(b?.target?.value, e) : b?.target?.value;
-    u.value = D, c?.(D);
+  function c(w) {
+    const T = n !== "none" ? ce(w?.target?.value, n) : w?.target?.value;
+    h.value = T, r?.(T);
   }
   function v() {
-    o = !0, c?.(u?.value || "");
+    o = !0, r?.(h?.value || "");
   }
-  const y = p("div", {
+  const b = p("div", {
     className: "input-loader",
     innerHTML: '<div class="loader"></div>',
     dataset: { show: "false" }
-  }), w = i ? p("div", {
+  }), f = l ? p("div", {
     className: "input-right-element",
     children: [
-      oe({ content: i, id: t })
+      oe({ content: l, id: e })
     ]
-  }) : null, g = p("div", {
+  }) : null, y = p("div", {
     className: "input-wrapper",
     children: [
-      u,
-      y,
-      w
+      h,
+      b,
+      f
     ]
   }), N = p("div", {
     className: "error-message",
@@ -314,36 +317,36 @@ const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholde
       className: "custom-input-group",
       children: [
         s,
-        g,
+        y,
         N
       ]
     }),
-    setLoading: (b) => {
-      x({ element: g }, {
-        dataset: { loading: b ? "true" : "false" }
-      }), x({ element: u }, {
-        attributes: { disabled: b ? "true" : "false" }
-      }), x({ element: y }, {
-        dataset: { show: b ? "true" : "false" }
+    setLoading: (w) => {
+      x({ element: y }, {
+        dataset: { loading: w ? "true" : "false" }
+      }), x({ element: h }, {
+        attributes: { disabled: w ? "true" : "false" }
+      }), x({ element: b }, {
+        dataset: { show: w ? "true" : "false" }
       });
     },
-    setError: (b = "") => {
-      x({ element: g }, {
-        className: b && o ? { add: "input-error" } : { remove: "input-error" }
+    setError: (w = "") => {
+      x({ element: y }, {
+        className: w && o ? { add: "input-error" } : { remove: "input-error" }
       }), x({ element: N }, {
-        dataset: { show: b && o ? "true" : "false" },
+        dataset: { show: w && o ? "true" : "false" },
         innerHTML: `
       ${k}
-      <span>${b || ""}</span>
+      <span>${w || ""}</span>
       `
       });
     }
   };
-}, de = async (n, e = {}) => {
-  const { method: t = "GET", headers: a = {}, body: r = null, ...m } = e;
+}, de = async (t, n = {}) => {
+  const { method: e = "GET", headers: a = {}, body: i = null, ...m } = n;
   try {
-    const i = {
-      method: t,
+    const l = {
+      method: e,
       headers: {
         Accept: "*/*",
         "Content-Type": "application/json",
@@ -351,87 +354,87 @@ const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholde
       },
       ...m
     };
-    r && ["POST", "PUT", "PATCH", "DELETE"].includes(t.toUpperCase()) && (i.body = typeof r == "string" ? r : JSON.stringify(r));
-    const c = await fetch(n, i), d = c.headers.get("content-type");
+    i && ["POST", "PUT", "PATCH", "DELETE"].includes(e.toUpperCase()) && (l.body = typeof i == "string" ? i : JSON.stringify(i));
+    const r = await fetch(t, l), u = r.headers.get("content-type");
     let s;
-    if (d?.includes("application/json") ? s = await c.json() : s = await c.text(), !c.ok) {
+    if (u?.includes("application/json") ? s = await r.json() : s = await r.text(), !r.ok) {
       const o = s;
       throw new Error(
-        o?.message || `HTTP error! status: ${c.status}`
+        o?.message || `HTTP error! status: ${r.status}`
       );
     }
     return { data: s, error: null };
-  } catch (i) {
-    return { data: null, error: i instanceof Error ? i.message : "An error occurred" };
+  } catch (l) {
+    return { data: null, error: l instanceof Error ? l.message : "An error occurred" };
   }
 }, ue = ({
-  title: n = "",
-  children: e,
-  onClose: t,
+  title: t = "",
+  children: n,
+  onClose: e,
   showBackBtn: a = !1,
-  showCloseBtn: r = !0
+  showCloseBtn: i = !0
 }) => {
   const m = p("button", {
     className: "back-btn",
-    innerHTML: re,
+    innerHTML: se,
     dataset: { show: String(a) },
-    events: { click: () => h() }
-  }), i = p("h3", {
-    textContent: n
-  }), c = p("button", {
+    events: { click: () => d() }
+  }), l = p("h3", {
+    textContent: t
+  }), r = p("button", {
     className: "close-btn",
     innerHTML: "&times;",
-    dataset: { show: String(r) },
+    dataset: { show: String(i) },
     attributes: { "aria-label": "Close modal" },
-    events: { click: () => h() }
-  }), d = p("div", {
+    events: { click: () => d() }
+  }), u = p("div", {
     className: "modal-header",
-    children: [m, i, c]
+    children: [m, l, r]
   }), s = p("div", {
     className: "modal-content",
-    children: [e]
+    children: [n]
   }), o = p("dialog", {
     className: "custom-modal",
-    children: [d, s],
+    children: [u, s],
     events: {
-      cancel: (l) => {
-        l.preventDefault(), h();
+      cancel: (c) => {
+        c.preventDefault(), d();
       }
     }
-  }), h = () => {
-    o.close(), t?.();
+  }), d = () => {
+    o.close(), e?.();
   };
   return {
     element: o,
-    setModalVisibility: (l) => {
-      l ? o.showModal() : o.close();
+    setModalVisibility: (c) => {
+      c ? o.showModal() : o.close();
     }
   };
-}, pe = ({ token: n, endpoint: e, beneficiaryCard: t = !1, isModal: a = !1, onCallback: r = () => null }) => {
-  const m = t ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", i = t ? "Enter the debit card details of the recipient you're sending funds to." : "Linking an external account allows you to send and receive money to your account.", c = t ? "Debit Card Number" : "Your Debit Card Number", d = t ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${t ? " recipient-form" : ""}`, o = {
+}, pe = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: i = () => null }) => {
+  const m = e ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", l = e ? "Enter the debit card details of the recipient you're sending funds to." : "Linking an external account allows you to send and receive money to your account.", r = e ? "Debit Card Number" : "Your Debit Card Number", u = e ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${e ? " recipient-form" : ""}`, o = {
     cardNumber: "",
     expiryDate: "",
     cvv: "",
     zipCode: ""
-  }, { element: h, setError: u } = $({
-    label: c,
-    placeholder: d,
+  }, { element: d, setError: h } = $({
+    label: r,
+    placeholder: u,
     id: "card-number-input",
     name: "cardNumber",
     maskType: "card",
-    onChange(f) {
-      L("cardNumber", f, u);
+    onChange(g) {
+      L("cardNumber", g, h);
     }
-  }), { element: l, setError: v } = $({
+  }), { element: c, setError: v } = $({
     label: "Expiration Date",
     placeholder: "MM/YY",
     id: "expiry-input",
     name: "expiryDate",
     maskType: "expiry",
-    onChange(f) {
-      L("expiryDate", f, v);
+    onChange(g) {
+      L("expiryDate", g, v);
     }
-  }), { element: y, setError: w } = $({
+  }), { element: b, setError: f } = $({
     label: "CVV",
     placeholder: "3-Digit",
     type: "number",
@@ -439,59 +442,59 @@ const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholde
     id: "cvv-input",
     name: "cvv",
     tooltip: "A CVV is a 3-digit number on your debit card. You can find it on the back side of the card.",
-    onChange(f) {
-      L("cvv", f, w);
+    onChange(g) {
+      L("cvv", g, f);
     }
-  }), { element: g, setError: N } = $({
+  }), { element: y, setError: N } = $({
     label: "ZIP Code",
-    placeholder: t ? "ZIP Code" : "Enter your ZIP Code",
+    placeholder: e ? "ZIP Code" : "Enter your ZIP Code",
     id: "zip-input",
     name: "zipCode",
     maskType: "zip",
-    onChange(f) {
-      L("zipCode", f, N);
+    onChange(g) {
+      L("zipCode", g, N);
     }
-  }), M = p("div", {
-    className: t ? "input-sections" : "inputs",
-    children: [h, l, y, g]
+  }), C = p("div", {
+    className: e ? "input-sections" : "inputs",
+    children: [d, c, b, y]
   }), A = p("p", {
     className: "submit-error",
     dataset: { show: "false" }
     // innerHTML: `//icon`
-  }), { element: j, setDisabled: b, setLoading: D } = se({
+  }), { element: j, setDisabled: w, setLoading: T } = re({
     children: "Link Card",
     type: "submit",
     disabled: !0
-  }), z = (f = "") => {
+  }), S = (g = "") => {
     x({ element: A }, {
-      dataset: { show: String(!!f) },
+      dataset: { show: String(!!g) },
       innerHTML: `
       ${k}
-      ${f || ""}
+      ${g || ""}
       `
     });
-  }, B = (f = !0) => {
-    b(f), D(f);
+  }, B = (g = !0) => {
+    w(g), T(g);
   };
-  function L(f, H, E) {
-    o[f] = H;
-    const { isValid: I, errors: T } = ae(o);
-    T[f] ? E(T[f]) : E(""), b(!I);
+  function L(g, H, E) {
+    o[g] = H;
+    const { isValid: I, errors: D } = ae(o, e);
+    D[g] ? E(D[g]) : E(""), w(!I);
   }
   const O = p("div", {
     className: "submit-button-wrapper",
     children: [A, j]
   });
-  async function P(f) {
-    f.preventDefault();
-    const H = new FormData(f.target), E = Object.fromEntries(H.entries());
+  async function P(g) {
+    g.preventDefault();
+    const H = new FormData(g.target), E = Object.fromEntries(H.entries());
     console.log(E);
-    const I = E?.cardNumber, T = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(T?.split("/")[0]), U = ie(T?.split("/")[1]), J = V(I);
-    B(!0), z("");
-    const C = await de(e, {
+    const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = ie(D?.split("/")[1]), J = V(I);
+    B(!0), S("");
+    const M = await de(n, {
       method: "POST",
       body: {
-        token: n,
+        token: t,
         pan: J,
         expiry_month: K,
         expiry_year: U,
@@ -501,20 +504,20 @@ const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholde
         }
       }
     });
-    C.error ? (console.error("Request failed:", C.error), B(!1), z(C.error), r?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), r?.({ success: !0, data: C.data }));
+    M.error ? (console.error("Request failed:", M.error), B(!1), S(M.error), i?.({ success: !1, error: M.error })) : (console.log("Request success:", M.data), B(!1), i?.({ success: !0, data: M.data }));
   }
   const Z = () => p("form", {
     events: {
       submit: P
     },
     children: [
-      M,
+      C,
       O
     ]
   }), W = () => p("div", {
     className: "form-title",
     innerHTML: `
-    <p>${i}</p>
+    <p>${l}</p>
 
     <div>
       ${te}
@@ -538,72 +541,72 @@ const $ = ({ label: n, maskType: e, id: t, name: a, type: r = "text", placeholde
       }),
       Y()
     ]
-  }), { element: F, setModalVisibility: S } = a ? ue({ title: m, children: Y() }) : { element: null, setModalVisibility: () => {
+  }), { element: z, setModalVisibility: F } = a ? ue({ title: m, children: Y() }) : { element: null, setModalVisibility: () => {
   } };
   function q() {
-    F && (document.body.appendChild(
+    z && (document.body.appendChild(
       p("div", {
         className: s,
-        children: [F]
+        children: [z]
       })
-    ), S(!0));
+    ), F(!0));
   }
   return {
     renderFormWithModal: q,
     nonModalForm: R,
-    closeModal: () => S(!1)
+    closeModal: () => F(!1)
   };
 };
-function me({ token: n, endpoint: e, beneficiaryCard: t, isModal: a, onCallback: r, onModalClose: m }) {
-  const { renderFormWithModal: i, nonModalForm: c, closeModal: d } = pe({
-    token: n,
-    endpoint: e,
-    beneficiaryCard: t,
+function me({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: i, onModalClose: m }) {
+  const { renderFormWithModal: l, nonModalForm: r, closeModal: u } = pe({
+    token: t,
+    endpoint: n,
+    beneficiaryCard: e,
     isModal: a,
-    onCallback: r
+    onCallback: i
   });
   return {
     mount(s) {
       const o = "className" in s ? document.querySelector(s.className) : "id" in s ? document.getElementById(s.id) : s.element;
-      o && c && o.appendChild(c);
+      o && r && o.appendChild(r);
     },
     open() {
-      i();
+      l();
     },
     destroy() {
-      d(), m?.();
+      u(), m?.();
     }
   };
 }
 function ve({
-  token: n,
-  endpoint: e,
-  isModal: t = !1,
+  token: t,
+  endpoint: n,
+  isModal: e = !1,
   beneficiaryCard: a = !1,
-  isOpen: r = !1,
+  isOpen: i = !1,
   onCallback: m = () => null,
-  onClose: i = () => null
+  onClose: l = () => null
 }) {
-  const c = X(null);
+  const r = X(null);
   return ee(() => {
-    let d = me({
-      token: n,
-      endpoint: e,
+    let u = me({
+      token: t,
+      endpoint: n,
       beneficiaryCard: a,
-      isModal: t,
+      isModal: e,
       onCallback: m,
-      onModalClose: i
+      onModalClose: l
     });
-    if (t)
-      r ? d.open() : d.destroy();
+    if (e)
+      i ? u.open() : u.destroy();
     else {
-      if (!c?.current) return;
-      d.mount({ element: c.current });
+      if (!r?.current) return;
+      u.mount({ element: r.current });
     }
     return () => {
-      d.destroy();
+      u.destroy();
     };
-  }, [t, n, e, a, r]), t ? null : /* @__PURE__ */ Q("div", { ref: c });
+  }, [e, t, n, a, i]), e ? null : /* @__PURE__ */ Q("div", { ref: r });
 }
 export {
   ve as AddCard