@test-glide/glide-payment 0.0.3 → 0.0.4

package/dist/index.es.js

@@ -1,49 +1,49 @@
-function u(n, e = {}) {
-  const t = document.createElement(n), { className: l, id: a, innerHTML: h, textContent: i, attributes: c, styles: p, dataset: s, children: r, events: m } = e;
-  if (l) {
-    const d = Array.isArray(l) ? l : l.split(" ");
-    t.classList.add(...d.filter(Boolean));
+function u(t, n = {}) {
+  const e = document.createElement(t), { className: a, id: l, innerHTML: m, textContent: c, attributes: o, styles: h, dataset: s, children: r, events: d } = n;
+  if (a) {
+    const p = Array.isArray(a) ? a : a.split(" ");
+    e.classList.add(...p.filter(Boolean));
   }
-  if (a && (t.id = a), h && (t.innerHTML = h), i && (t.textContent = i), c)
-    for (const [d, o] of Object.entries(c))
-      o && t.setAttribute(d, o);
-  if (p)
-    for (const [d, o] of Object.entries(p))
-      t.style[d] = o;
+  if (l && (e.id = l), m && (e.innerHTML = m), c && (e.textContent = c), o)
+    for (const [p, i] of Object.entries(o))
+      i && e.setAttribute(p, i);
+  if (h)
+    for (const [p, i] of Object.entries(h))
+      e.style[p] = i;
   if (s)
-    for (const [d, o] of Object.entries(s))
-      t.dataset[d] = o;
-  if (r && t.append(...r.filter(Boolean)), m)
-    for (const [d, o] of Object.entries(m))
-      t.addEventListener(d, o);
-  return t;
+    for (const [p, i] of Object.entries(s))
+      e.dataset[p] = i;
+  if (r && e.append(...r.filter(Boolean)), d)
+    for (const [p, i] of Object.entries(d))
+      e.addEventListener(p, i);
+  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 l of t) {
-    const { styles: a, attributes: h, dataset: i, innerHTML: c, textContent: p, className: s } = e;
-    if (a)
-      for (const [r, m] of Object.entries(a))
-        l.style[r] = m;
-    if (h)
-      for (const [r, m] of Object.entries(h))
-        l.setAttribute(r, m);
-    if (i)
-      for (const [r, m] of Object.entries(i))
-        l.dataset[r] = m;
-    if (c !== void 0 && (l.innerHTML = c), p !== void 0 && (l.textContent = p), s?.add) {
+  for (const a of e) {
+    const { styles: l, attributes: m, dataset: c, innerHTML: o, textContent: h, className: s } = n;
+    if (l)
+      for (const [r, d] of Object.entries(l))
+        a.style[r] = d;
+    if (m)
+      for (const [r, d] of Object.entries(m))
+        a.setAttribute(r, d);
+    if (c)
+      for (const [r, d] of Object.entries(c))
+        a.dataset[r] = d;
+    if (o !== void 0 && (a.innerHTML = o), h !== void 0 && (a.textContent = h), s?.add) {
       const r = Array.isArray(s.add) ? s.add : [s.add];
-      l.classList.add(...r);
+      a.classList.add(...r);
     }
     if (s?.remove) {
       const r = Array.isArray(s.remove) ? s.remove : [s.remove];
-      l.classList.remove(...r);
+      a.classList.remove(...r);
     }
-    s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((m) => l.classList.toggle(m));
+    s?.toggle && (Array.isArray(s.toggle) ? s.toggle : [s.toggle]).forEach((d) => a.classList.toggle(d));
   }
 }
 const Q = `
@@ -93,211 +93,214 @@ const Q = `
   ></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>  
-`, te = ({ children: n, onClick: e, disabled: t = !1, size: l = "medium", type: a = "button", className: h = "", variant: i = "primary" }) => {
-  const c = u("span", {
+`, te = ({ children: t, onClick: n, disabled: e = !1, size: a = "medium", type: l = "button", className: m = "", variant: c = "primary" }) => {
+  const o = u("span", {
     className: "button-spinner",
     innerHTML: X,
     dataset: { show: "false" }
-  }), p = u("span", {
+  }), h = u("span", {
     className: "button-label",
     children: [
       null
     ],
-    textContent: n
+    textContent: t
   }), s = u("button", {
-    className: `custom-button ${i} ${l} ${h}`,
+    className: `custom-button ${c} ${a} ${m}`,
     attributes: {
-      type: a,
-      ...t ? { disabled: "true" } : {}
+      type: l,
+      ...e ? { disabled: "true" } : {}
     },
     events: {
-      click: e
+      click: n
     },
     children: [
-      c,
-      p
+      o,
+      h
     ]
-  }), r = (d = !1) => {
-    x({ element: c }, {
-      dataset: { show: String(d) }
-    }), m(d);
-  }, m = (d = !1) => {
-    d ? s.setAttribute("disabled", "true") : s.removeAttribute("disabled");
+  }), r = (p = !1) => {
+    x({ element: o }, {
+      dataset: { show: String(p) }
+    }), d(p);
+  }, d = (p = !1) => {
+    p ? s.setAttribute("disabled", "true") : s.removeAttribute("disabled");
   };
   return {
     element: s,
     setLoading: r,
-    setDisabled: m
+    setDisabled: d
   };
-}, ne = ({ content: n, position: e = "top", delay: t = 200, maxWidth: l = 250, className: a = "", id: h = "" }) => {
-  var i = u("div", {
-    className: `tooltip ${e} ${a}`,
+}, ne = ({ content: t, position: n = "top", delay: e = 200, maxWidth: a = 250, className: l = "", id: m = "" }) => {
+  var c = u("div", {
+    className: `tooltip ${n} ${l}`,
     styles: {
       // top: `${tooltipPosition.top}px`,
       // left: `${tooltipPosition.left}px`,
-      maxWidth: `${l}px`
+      maxWidth: `${a}px`
     },
     attributes: {
       role: "tooltip"
     },
     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 o = null;
   var r = u("span", {
     className: "tooltip-trigger",
     innerHTML: k,
     events: {
       mouseenter: () => {
-        t > 0 ? c = window.setTimeout(() => {
-          i.dataset.show = "true", m();
-        }, t) : (i.dataset.show = "true", m());
+        e > 0 ? o = window.setTimeout(() => {
+          c.dataset.show = "true", d();
+        }, e) : (c.dataset.show = "true", d());
       },
       mouseleave: () => {
-        c && clearTimeout(c), i.dataset.show = "false";
+        o && clearTimeout(o), c.dataset.show = "false";
       }
     }
   });
-  function m() {
-    if (!r || !i) return;
-    const o = r.getBoundingClientRect(), v = i.getBoundingClientRect(), y = 8;
-    let w, g;
-    switch (e) {
+  function d() {
+    if (!r || !c) return;
+    const i = r.getBoundingClientRect(), g = c.getBoundingClientRect(), b = 8;
+    let f, y;
+    switch (n) {
       case "top":
-        w = o.top - v.height - y, g = o.left + o.width / 2 - v.width / 2;
+        f = i.top - g.height - b, y = i.left + i.width / 2 - g.width / 2;
         break;
       case "bottom":
-        w = o.bottom + y, g = o.left + o.width / 2 - v.width / 2;
+        f = i.bottom + b, y = i.left + i.width / 2 - g.width / 2;
         break;
       case "left":
-        w = o.top + o.height / 2 - v.height / 2, g = o.left - v.width - y;
+        f = i.top + i.height / 2 - g.height / 2, y = i.left - g.width - b;
         break;
       case "right":
-        w = o.top + o.height / 2 - v.height / 2, g = o.right + y;
+        f = i.top + i.height / 2 - g.height / 2, y = i.right + b;
         break;
       default:
-        w = o.top - v.height - y, g = o.left + o.width / 2 - v.width / 2;
+        f = i.top - g.height - b, y = i.left + i.width / 2 - g.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 + g.width > N && (y = N - g.width - b), f < 0 && (f = b), f + g.height > C && (f = C - g.height - b), c.style.top = `${f}px`, c.style.left = `${y}px`;
   }
   return u("div", {
     className: "tooltip-wrapper",
-    id: `tooltip-${h}`,
+    id: `tooltip-${m}`,
     children: [
       r,
-      i
+      c
     ]
   });
-}, se = (n) => {
-  const e = {}, t = Object.values(n).every(
-    (a) => !a || a.trim() === ""
-  ), l = n.cardNumber?.replace(/\s/g, "");
-  if (l ? /^\d{13,19}$/.test(l) || (e.cardNumber = "Card number must be 13-19 digits") : e.cardNumber = "Card number is required", !n.expiryDate)
+}, se = (t, n = !1) => {
+  const e = {}, a = Object.values(t).every(
+    (o) => !o || o.trim() === ""
+  ), l = t.cardNumber?.replace(/\s/g, "");
+  if (l ? /^\d{13,19}$/.test(l) || (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 a = n.expiryDate.replace(/\D/g, "");
-    if (a.length < 4)
+  else if (t.expiryDate) {
+    const o = t.expiryDate.replace(/\D/g, "");
+    if (o.length < 4)
       e.expiryDate = "Enter complete expiry date (MM/YY)";
     else {
-      const h = parseInt(a.substring(0, 2), 10), i = parseInt(a.substring(2, 4), 10);
+      const h = parseInt(o.substring(0, 2), 10), s = parseInt(o.substring(2, 4), 10);
       if (isNaN(h) || h < 1 || h > 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(), p = c.getFullYear(), s = c.getMonth() + 1, r = Math.floor(p / 100) * 100, m = r + i, d = r + 100 + i;
-        let o;
-        m >= p && m <= p + 20 ? o = m : (d >= p && d <= p + 20, o = d), o < p || o === p && h < s ? e.expiryDate = "Card has expired" : o > p + 20 && (e.expiryDate = "Expiry year is too far in the future");
+        const r = /* @__PURE__ */ new Date(), d = r.getFullYear(), p = r.getMonth() + 1, i = Math.floor(d / 100) * 100, g = i + s, b = i + 100 + s;
+        let f;
+        g >= d && g <= d + 20 ? f = g : (b >= d && b <= d + 20, f = b), f < d || f === d && h < p ? 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 c = t.zipCode.trim();
+  return c && !/^[A-Z0-9\s-]{3,10}$/i.test(c) && (e.zipCode = "Invalid ZIP code format"), {
     isValid: Object.keys(e).length === 0,
     errors: e,
-    isEmpty: t
+    isEmpty: a
   };
 };
-function re(n) {
-  const e = parseInt(n, 10);
-  if (isNaN(e) || e < 0 || e > 99) return null;
-  const t = (/* @__PURE__ */ new Date()).getFullYear(), l = Math.floor(t / 100) * 100;
-  let a = l + e;
-  return a >= t && a <= t + 20 || (a = l + 100 + e, a >= t && a <= t + 20) ? a : l + 100 + e;
+function re(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 l = a + n;
+  return l >= e && l <= e + 20 || (l = a + 100 + n, l >= e && l <= e + 20) ? l : a + 100 + n;
 }
-function V(n = "") {
-  return n.trim().replaceAll(/\s/g, "").replaceAll("-", "");
+function V(t = "") {
+  return t.trim().replaceAll(/\s/g, "").replaceAll("-", "");
 }
-const oe = {
-  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;
+const ae = {
+  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 ae(n, e) {
-  return e === "none" ? n : oe[e](n);
+function oe(t, n) {
+  return n === "none" ? t : ae[n](t);
 }
-const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "text", placeholder: h = "Enter value", tooltip: i = "", onChange: c }) => {
-  const p = ["card", "expiry", "phone", "cvv", "zip"].includes(e) ? "numeric" : "", s = u("label", {
+const $ = ({ label: t, maskType: n, id: e, name: a, type: l = "text", placeholder: m = "Enter value", tooltip: c = "", onChange: o }) => {
+  const h = ["card", "expiry", "phone", "cvv", "zip"].includes(n) ? "numeric" : "", s = u("label", {
     className: "input-label",
-    innerHTML: n,
+    innerHTML: t,
     attributes: {
-      for: t
+      for: e
     }
   });
   let r = !1;
-  const d = u("input", {
-    id: t || "input-id",
+  const p = u("input", {
+    id: e || "input-id",
     className: "styled-input",
     attributes: {
-      placeholder: h,
-      type: a,
-      inputMode: p,
-      name: l
+      placeholder: m,
+      type: l,
+      inputMode: h,
+      name: a
     },
     events: {
-      input: o,
-      blur: v,
-      keydown: (b) => {
-        b.key === "Enter" && (r = !0);
+      input: i,
+      blur: g,
+      keydown: (w) => {
+        w.key === "Enter" && (r = !0);
       }
     }
   });
-  function o(b) {
-    const D = e !== "none" ? ae(b?.target?.value, e) : b?.target?.value;
-    d.value = D, c?.(D);
+  function i(w) {
+    const T = n !== "none" ? oe(w?.target?.value, n) : w?.target?.value;
+    p.value = T, o?.(T);
   }
-  function v() {
-    r = !0, c?.(d?.value || "");
+  function g() {
+    r = !0, o?.(p?.value || "");
   }
-  const y = u("div", {
+  const b = u("div", {
     className: "input-loader",
     innerHTML: '<div class="loader"></div>',
     dataset: { show: "false" }
-  }), w = i ? u("div", {
+  }), f = c ? u("div", {
     className: "input-right-element",
     children: [
-      ne({ content: i, id: t })
+      ne({ content: c, id: e })
     ]
-  }) : null, g = u("div", {
+  }) : null, y = u("div", {
     className: "input-wrapper",
     children: [
-      d,
-      y,
-      w
+      p,
+      b,
+      f
     ]
   }), N = u("div", {
     className: "error-message",
@@ -312,124 +315,124 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "text", placeholde
       className: "custom-input-group",
       children: [
         s,
-        g,
+        y,
         N
       ]
     }),
-    setLoading: (b) => {
-      x({ element: g }, {
-        dataset: { loading: b ? "true" : "false" }
-      }), x({ element: d }, {
-        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: p }, {
+        attributes: { disabled: w ? "true" : "false" }
+      }), x({ element: b }, {
+        dataset: { show: w ? "true" : "false" }
       });
     },
-    setError: (b = "") => {
-      x({ element: g }, {
-        className: b && r ? { add: "input-error" } : { remove: "input-error" }
+    setError: (w = "") => {
+      x({ element: y }, {
+        className: w && r ? { add: "input-error" } : { remove: "input-error" }
       }), x({ element: N }, {
-        dataset: { show: b && r ? "true" : "false" },
+        dataset: { show: w && r ? "true" : "false" },
         innerHTML: `
       ${k}
-      <span>${b || ""}</span>
+      <span>${w || ""}</span>
       `
       });
     }
   };
-}, ie = async (n, e = {}) => {
-  const { method: t = "GET", headers: l = {}, body: a = null, ...h } = e;
+}, ie = async (t, n = {}) => {
+  const { method: e = "GET", headers: a = {}, body: l = null, ...m } = n;
   try {
-    const i = {
-      method: t,
+    const c = {
+      method: e,
       headers: {
         Accept: "*/*",
         "Content-Type": "application/json",
-        ...l
+        ...a
       },
-      ...h
+      ...m
     };
-    a && ["POST", "PUT", "PATCH", "DELETE"].includes(t.toUpperCase()) && (i.body = typeof a == "string" ? a : JSON.stringify(a));
-    const c = await fetch(n, i), p = c.headers.get("content-type");
+    l && ["POST", "PUT", "PATCH", "DELETE"].includes(e.toUpperCase()) && (c.body = typeof l == "string" ? l : JSON.stringify(l));
+    const o = await fetch(t, c), h = o.headers.get("content-type");
     let s;
-    if (p?.includes("application/json") ? s = await c.json() : s = await c.text(), !c.ok) {
+    if (h?.includes("application/json") ? s = await o.json() : s = await o.text(), !o.ok) {
       const r = s;
       throw new Error(
-        r?.message || `HTTP error! status: ${c.status}`
+        r?.message || `HTTP error! status: ${o.status}`
       );
     }
     return { data: s, error: null };
-  } catch (i) {
-    return { data: null, error: i instanceof Error ? i.message : "An error occurred" };
+  } catch (c) {
+    return { data: null, error: c instanceof Error ? c.message : "An error occurred" };
   }
 }, le = ({
-  title: n = "",
-  children: e,
-  onClose: t,
-  showBackBtn: l = !1,
-  showCloseBtn: a = !0
+  title: t = "",
+  children: n,
+  onClose: e,
+  showBackBtn: a = !1,
+  showCloseBtn: l = !0
 }) => {
-  const h = u("button", {
+  const m = u("button", {
     className: "back-btn",
     innerHTML: ee,
-    dataset: { show: String(l) },
-    events: { click: () => m() }
-  }), i = u("h3", {
-    textContent: n
-  }), c = u("button", {
+    dataset: { show: String(a) },
+    events: { click: () => d() }
+  }), c = u("h3", {
+    textContent: t
+  }), o = u("button", {
     className: "close-btn",
     innerHTML: "&times;",
-    dataset: { show: String(a) },
+    dataset: { show: String(l) },
     attributes: { "aria-label": "Close modal" },
-    events: { click: () => m() }
-  }), p = u("div", {
+    events: { click: () => d() }
+  }), h = u("div", {
     className: "modal-header",
-    children: [h, i, c]
+    children: [m, c, o]
   }), s = u("div", {
     className: "modal-content",
-    children: [e]
+    children: [n]
   }), r = u("dialog", {
     className: "custom-modal",
-    children: [p, s],
+    children: [h, s],
     events: {
-      cancel: (o) => {
-        o.preventDefault(), m();
+      cancel: (i) => {
+        i.preventDefault(), d();
       }
     }
-  }), m = () => {
-    r.close(), t?.();
+  }), d = () => {
+    r.close(), e?.();
   };
   return {
     element: r,
-    setModalVisibility: (o) => {
-      o ? r.showModal() : r.close();
+    setModalVisibility: (i) => {
+      i ? r.showModal() : r.close();
     }
   };
-}, ce = ({ token: n, endpoint: e, beneficiaryCard: t = !1, isModal: l = !1, onCallback: a = () => null }) => {
-  const h = 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", p = t ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${t ? " recipient-form" : ""}`, r = {
+}, ce = ({ token: t, endpoint: n, beneficiaryCard: e = !1, isModal: a = !1, onCallback: l = () => null }) => {
+  const m = e ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", c = 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.", o = e ? "Debit Card Number" : "Your Debit Card Number", h = e ? "Enter recipient's card number" : "Enter your card number", s = `add-card-form-wrapper${e ? " recipient-form" : ""}`, r = {
     cardNumber: "",
     expiryDate: "",
     cvv: "",
     zipCode: ""
-  }, { element: m, setError: d } = $({
-    label: c,
-    placeholder: p,
+  }, { element: d, setError: p } = $({
+    label: o,
+    placeholder: h,
     id: "card-number-input",
     name: "cardNumber",
     maskType: "card",
-    onChange(f) {
-      L("cardNumber", f, d);
+    onChange(v) {
+      L("cardNumber", v, p);
     }
-  }), { element: o, setError: v } = $({
+  }), { element: i, setError: g } = $({
     label: "Expiration Date",
     placeholder: "MM/YY",
     id: "expiry-input",
     name: "expiryDate",
     maskType: "expiry",
-    onChange(f) {
-      L("expiryDate", f, v);
+    onChange(v) {
+      L("expiryDate", v, g);
     }
-  }), { element: y, setError: w } = $({
+  }), { element: b, setError: f } = $({
     label: "CVV",
     placeholder: "3-Digit",
     type: "number",
@@ -437,59 +440,59 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "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(v) {
+      L("cvv", v, 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(v) {
+      L("zipCode", v, N);
     }
-  }), M = u("div", {
-    className: t ? "input-sections" : "inputs",
-    children: [m, o, y, g]
+  }), C = u("div", {
+    className: e ? "input-sections" : "inputs",
+    children: [d, i, b, y]
   }), A = u("p", {
     className: "submit-error",
     dataset: { show: "false" }
     // innerHTML: `//icon`
-  }), { element: j, setDisabled: b, setLoading: D } = te({
+  }), { element: S, setDisabled: w, setLoading: T } = te({
     children: "Link Card",
     type: "submit",
     disabled: !0
-  }), z = (f = "") => {
+  }), j = (v = "") => {
     x({ element: A }, {
-      dataset: { show: String(!!f) },
+      dataset: { show: String(!!v) },
       innerHTML: `
       ${k}
-      ${f || ""}
+      ${v || ""}
       `
     });
-  }, B = (f = !0) => {
-    b(f), D(f);
+  }, B = (v = !0) => {
+    w(v), T(v);
   };
-  function L(f, H, E) {
-    r[f] = H;
-    const { isValid: I, errors: T } = se(r);
-    T[f] ? E(T[f]) : E(""), b(!I);
+  function L(v, H, E) {
+    r[v] = H;
+    const { isValid: I, errors: D } = se(r, e);
+    D[v] ? E(D[v]) : E(""), w(!I);
   }
   const O = u("div", {
     className: "submit-button-wrapper",
-    children: [A, j]
+    children: [A, S]
   });
-  async function P(f) {
-    f.preventDefault();
-    const H = new FormData(f.target), E = Object.fromEntries(H.entries());
+  async function P(v) {
+    v.preventDefault();
+    const H = new FormData(v.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 = re(T?.split("/")[1]), J = V(I);
-    B(!0), z("");
-    const C = await ie(e, {
+    const I = E?.cardNumber, D = E?.expiryDate, _ = E?.cvv, G = E?.zipCode, K = Number(D?.split("/")[0]), U = re(D?.split("/")[1]), J = V(I);
+    B(!0), j("");
+    const M = await ie(n, {
       method: "POST",
       body: {
-        token: n,
+        token: t,
         pan: J,
         expiry_month: K,
         expiry_year: U,
@@ -499,20 +502,20 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "text", placeholde
         }
       }
     });
-    C.error ? (console.error("Request failed:", C.error), B(!1), z(C.error), a?.({ success: !1, error: C.error })) : (console.log("Request success:", C.data), B(!1), a?.({ success: !0, data: C.data }));
+    M.error ? (console.error("Request failed:", M.error), B(!1), j(M.error), l?.({ success: !1, error: M.error })) : (console.log("Request success:", M.data), B(!1), l?.({ success: !0, data: M.data }));
   }
   const Z = () => u("form", {
     events: {
       submit: P
     },
     children: [
-      M,
+      C,
       O
     ]
   }), W = () => u("div", {
     className: "form-title",
     innerHTML: `
-    <p>${i}</p>
+    <p>${c}</p>
 
     <div>
       ${Q}
@@ -521,55 +524,55 @@ const $ = ({ label: n, maskType: e, id: t, name: l, type: a = "text", placeholde
     </div>
     `
   }), Y = () => u("div", {
-    className: l ? "" : "non-modal-content",
+    className: a ? "" : "non-modal-content",
     children: [W(), Z()]
-  }), q = l ? null : u("div", {
+  }), R = a ? null : u("div", {
     className: `${s} non-modal`,
     children: [
       u("div", {
         className: "non-modal-header",
         innerHTML: `
         <span></span>
-        <h3>${h}</h3>
+        <h3>${m}</h3>
         <span></span>
       `
       }),
       Y()
     ]
-  }), { element: F, setModalVisibility: S } = l ? le({ title: h, children: Y() }) : { element: null, setModalVisibility: () => {
+  }), { element: z, setModalVisibility: F } = a ? le({ title: m, children: Y() }) : { element: null, setModalVisibility: () => {
   } };
-  function R() {
-    F && (document.body.appendChild(
+  function q() {
+    z && (document.body.appendChild(
       u("div", {
         className: s,
-        children: [F]
+        children: [z]
       })
-    ), S(!0));
+    ), F(!0));
   }
   return {
-    renderFormWithModal: R,
-    nonModalForm: q,
-    closeModal: () => S(!1)
+    renderFormWithModal: q,
+    nonModalForm: R,
+    closeModal: () => F(!1)
   };
 };
-function de({ token: n, endpoint: e, beneficiaryCard: t, isModal: l, onCallback: a, onModalClose: h }) {
-  const { renderFormWithModal: i, nonModalForm: c, closeModal: p } = ce({
-    token: n,
-    endpoint: e,
-    beneficiaryCard: t,
-    isModal: l,
-    onCallback: a
+function de({ token: t, endpoint: n, beneficiaryCard: e, isModal: a, onCallback: l, onModalClose: m }) {
+  const { renderFormWithModal: c, nonModalForm: o, closeModal: h } = ce({
+    token: t,
+    endpoint: n,
+    beneficiaryCard: e,
+    isModal: a,
+    onCallback: l
   });
   return {
     mount(s) {
       const r = "className" in s ? document.querySelector(s.className) : "id" in s ? document.getElementById(s.id) : s.element;
-      r && c && r.appendChild(c);
+      r && o && r.appendChild(o);
     },
     open() {
-      i();
+      c();
     },
     destroy() {
-      p(), h?.();
+      h(), m?.();
     }
   };
 }