@test-glide/glide-payment 0.0.1

package/dist/index.cjs.js

@@ -0,0 +1,72 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(n,e={}){const t=document.createElement(n),{className:l,id:r,innerHTML:h,textContent:o,attributes:c,styles:d,dataset:a,children:i,events:m}=e;if(l){const u=Array.isArray(l)?l:l.split(" ");t.classList.add(...u.filter(Boolean))}if(r&&(t.id=r),h&&(t.innerHTML=h),o&&(t.textContent=o),c)for(const[u,s]of Object.entries(c))s&&t.setAttribute(u,s);if(d)for(const[u,s]of Object.entries(d))t.style[u]=s;if(a)for(const[u,s]of Object.entries(a))t.dataset[u]=s;if(i&&t.append(...i.filter(Boolean)),m)for(const[u,s]of Object.entries(m))t.addEventListener(u,s);return t}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);return}for(const l of t){const{styles:r,attributes:h,dataset:o,innerHTML:c,textContent:d,className:a}=e;if(r)for(const[i,m]of Object.entries(r))l.style[i]=m;if(h)for(const[i,m]of Object.entries(h))l.setAttribute(i,m);if(o)for(const[i,m]of Object.entries(o))l.dataset[i]=m;if(c!==void 0&&(l.innerHTML=c),d!==void 0&&(l.textContent=d),a?.add){const i=Array.isArray(a.add)?a.add:[a.add];l.classList.add(...i)}if(a?.remove){const i=Array.isArray(a.remove)?a.remove:[a.remove];l.classList.remove(...i)}a?.toggle&&(Array.isArray(a.toggle)?a.toggle:[a.toggle]).forEach(m=>l.classList.toggle(m))}}const Q=`
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  viewBox="0 0 16 16"
+>
+  <path
+    fill="#000"
+    fill-rule="evenodd"
+    d="M8 2.667a2 2 0 0 0-2 2v2h4v-2a2 2 0 0 0-2-2m3.333 4v-2a3.333 3.333 0 0 0-6.666 0v2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6.666a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M4.667 8.001A.667.667 0 0 0 4 8.667v4c0 .369.298.667.667.667h6.666a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-.667-.666zm2 2.666a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0"
+    clip-rule="evenodd"
+  ></path>
+</svg>  
+`,X=`
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  class="lucide lucide-loader-icon lucide-loader"
+  viewBox="0 0 24 24"
+>
+  <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>  
+`,ee=`<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <path
+    fill="#071B32"
+    d="M9.709 21.493a.44.44 0 0 1-.325-.146l-8.25-9a.533.533 0 0 1 0-.707l8.25-9a.432.432 0 0 1 .648.013.53.53 0 0 1 0 .694l-7.925 8.646 7.925 8.646c.18.195.18.512 0 .707a.44.44 0 0 1-.323.147"
+  ></path>
+  <path
+    fill="#071B32"
+    d="M22.542 12.494H1.459c-.253 0-.459-.224-.459-.5s.206-.5.459-.5h21.083c.253 0 .458.224.458.5s-.205.5-.458.5"
+  ></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:r="button",className:h="",variant:o="primary"})=>{const c=p("span",{className:"button-spinner",innerHTML:X,dataset:{show:"false"}}),d=p("span",{className:"button-label",children:[null],textContent:n}),a=p("button",{className:`custom-button ${o} ${l} ${h}`,attributes:{type:r,...t?{disabled:"true"}:{}},events:{click:e},children:[c,d]}),i=(u=!1)=>{x({element:c},{dataset:{show:String(u)}}),m(u)},m=(u=!1)=>{u?a.setAttribute("disabled","true"):a.removeAttribute("disabled")};return{element:a,setLoading:i,setDisabled:m}},ne=({content:n,position:e="top",delay:t=200,maxWidth:l=250,className:r="",id:h=""})=>{var o=p("div",{className:`tooltip ${e} ${r}`,styles:{maxWidth:`${l}px`},attributes:{role:"tooltip"},dataset:{show:"false"},innerHTML:`
+      <div class="tooltip-content">${n}</div>
+      <div class="tooltip-arrow"></div>
+    `});let c=null;var i=p("span",{className:"tooltip-trigger",innerHTML:k,events:{mouseenter:()=>{t>0?c=window.setTimeout(()=>{o.dataset.show="true",m()},t):(o.dataset.show="true",m())},mouseleave:()=>{c&&clearTimeout(c),o.dataset.show="false"}}});function m(){if(!i||!o)return;const s=i.getBoundingClientRect(),v=o.getBoundingClientRect(),y=8;let w,g;switch(e){case"top":w=s.top-v.height-y,g=s.left+s.width/2-v.width/2;break;case"bottom":w=s.bottom+y,g=s.left+s.width/2-v.width/2;break;case"left":w=s.top+s.height/2-v.height/2,g=s.left-v.width-y;break;case"right":w=s.top+s.height/2-v.height/2,g=s.right+y;break;default:w=s.top-v.height-y,g=s.left+s.width/2-v.width/2}const N=window.innerWidth,C=window.innerHeight;g<0&&(g=y),g+v.width>N&&(g=N-v.width-y),w<0&&(w=y),w+v.height>C&&(w=C-v.height-y),o.style.top=`${w}px`,o.style.left=`${g}px`}return p("div",{className:"tooltip-wrapper",id:`tooltip-${h}`,children:[i,o]})},se=n=>{const e={},t=Object.values(n).every(r=>!r||r.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)e.expiryDate="Expiry date is required";else{const r=n.expiryDate.replace(/\D/g,"");if(r.length<4)e.expiryDate="Enter complete expiry date (MM/YY)";else{const h=parseInt(r.substring(0,2),10),o=parseInt(r.substring(2,4),10);if(isNaN(h)||h<1||h>12)e.expiryDate="Invalid month (must be 01-12)";else if(isNaN(o)||o<0||o>99)e.expiryDate="Invalid year";else{const c=new Date,d=c.getFullYear(),a=c.getMonth()+1,i=Math.floor(d/100)*100,m=i+o,u=i+100+o;let s;m>=d&&m<=d+20?s=m:(u>=d&&u<=d+20,s=u),s<d||s===d&&h<a?e.expiryDate="Card has expired":s>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",{isValid:Object.keys(e).length===0,errors:e,isEmpty:t}};function re(n){const e=parseInt(n,10);if(isNaN(e)||e<0||e>99)return null;const t=new Date().getFullYear(),l=Math.floor(t/100)*100;let r=l+e;return r>=t&&r<=t+20||(r=l+100+e,r>=t&&r<=t+20)?r:l+100+e}function V(n=""){return n.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},expiry:n=>{const e=n.replace(/\//g,"");return e.substring(0,2)+(n.length>2?"/":"")+e.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}};function ae(n,e){return e==="none"?n:oe[e](n)}const $=({label:n,maskType:e,id:t,name:l,type:r="text",placeholder:h="Enter value",tooltip:o="",onChange:c})=>{const d=["card","expiry","phone","cvv","zip"].includes(e)?"numeric":"",a=p("label",{className:"input-label",innerHTML:n,attributes:{for:t}});let i=!1;const u=p("input",{id:t||"input-id",className:"styled-input",attributes:{placeholder:h,type:r,inputMode:d,name:l},events:{input:s,blur:v,keydown:b=>{b.key==="Enter"&&(i=!0)}}});function s(b){const D=e!=="none"?ae(b?.target?.value,e):b?.target?.value;u.value=D,c?.(D)}function v(){i=!0,c?.(u?.value||"")}const y=p("div",{className:"input-loader",innerHTML:'<div class="loader"></div>',dataset:{show:"false"}}),w=o?p("div",{className:"input-right-element",children:[ne({content:o,id:t})]}):null,g=p("div",{className:"input-wrapper",children:[u,y,w]}),N=p("div",{className:"error-message",dataset:{show:"false"},innerHTML:`
+      ${k}
+      <span></span>
+    `});return{element:p("div",{className:"custom-input-group",children:[a,g,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"}})},setError:(b="")=>{x({element:g},{className:b&&i?{add:"input-error"}:{remove:"input-error"}}),x({element:N},{dataset:{show:b&&i?"true":"false"},innerHTML:`
+      ${k}
+      <span>${b||""}</span>
+      `})}}},ie=async(n,e={})=>{const{method:t="GET",headers:l={},body:r=null,...h}=e;try{const o={method:t,headers:{Accept:"*/*","Content-Type":"application/json",...l},...h};r&&["POST","PUT","PATCH","DELETE"].includes(t.toUpperCase())&&(o.body=typeof r=="string"?r:JSON.stringify(r));const c=await fetch(n,o),d=c.headers.get("content-type");let a;if(d?.includes("application/json")?a=await c.json():a=await c.text(),!c.ok){const i=a;throw new Error(i?.message||`HTTP error! status: ${c.status}`)}return{data:a,error:null}}catch(o){return{data:null,error:o instanceof Error?o.message:"An error occurred"}}},le=({title:n="",children:e,onClose:t,showBackBtn:l=!1,showCloseBtn:r=!0})=>{const h=p("button",{className:"back-btn",innerHTML:ee,dataset:{show:String(l)},events:{click:()=>m()}}),o=p("h3",{textContent:n}),c=p("button",{className:"close-btn",innerHTML:"&times;",dataset:{show:String(r)},attributes:{"aria-label":"Close modal"},events:{click:()=>m()}}),d=p("div",{className:"modal-header",children:[h,o,c]}),a=p("div",{className:"modal-content",children:[e]}),i=p("dialog",{className:"custom-modal",children:[d,a],events:{cancel:s=>{s.preventDefault(),m()}}}),m=()=>{i.close(),t?.()};return{element:i,setModalVisibility:s=>{s?i.showModal():i.close()}}},ce=({token:n,endpoint:e,beneficiaryCard:t=!1,isModal:l=!1,onCallback:r=()=>null})=>{const h=t?"Enter Recipient Debit Card Details":"Enter Your Debit Card Details",o=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",a=`add-card-form-wrapper${t?" recipient-form":""}`,i={cardNumber:"",expiryDate:"",cvv:"",zipCode:""},{element:m,setError:u}=$({label:c,placeholder:d,id:"card-number-input",name:"cardNumber",maskType:"card",onChange(f){L("cardNumber",f,u)}}),{element:s,setError:v}=$({label:"Expiration Date",placeholder:"MM/YY",id:"expiry-input",name:"expiryDate",maskType:"expiry",onChange(f){L("expiryDate",f,v)}}),{element:y,setError:w}=$({label:"CVV",placeholder:"3-Digit",type:"number",maskType:"cvv",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)}}),{element:g,setError:N}=$({label:"ZIP Code",placeholder:t?"ZIP Code":"Enter your ZIP Code",id:"zip-input",name:"zipCode",maskType:"zip",onChange(f){L("zipCode",f,N)}}),C=p("div",{className:t?"input-sections":"inputs",children:[m,s,y,g]}),A=p("p",{className:"submit-error",dataset:{show:"false"}}),{element:j,setDisabled:b,setLoading:D}=te({children:"Link Card",type:"submit",disabled:!0}),S=(f="")=>{x({element:A},{dataset:{show:String(!!f)},innerHTML:`
+      ${k}
+      ${f||""}
+      `})},B=(f=!0)=>{b(f),D(f)};function L(f,H,E){i[f]=H;const{isValid:I,errors:T}=se(i);T[f]?E(T[f]):E(""),b(!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());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),S("");const M=await ie(e,{method:"POST",body:{token:n,pan:J,expiry_month:K,expiry_year:U,cvv:V(_),address:{postal_code:V(G)}}});M.error?(console.error("Request failed:",M.error),B(!1),S(M.error),r?.({success:!1,error:M.error})):(console.log("Request success:",M.data),B(!1),r?.({success:!0,data:M.data}))}const Z=()=>p("form",{events:{submit:P},children:[C,O]}),W=()=>p("div",{className:"form-title",innerHTML:`
+    <p>${o}</p>
+
+    <div>
+      ${Q}
+
+      <span>Secured with 256-bit encryption</span>
+    </div>
+    `}),z=()=>p("div",{className:l?"":"non-modal-content",children:[W(),Z()]}),q=l?null:p("div",{className:`${a} non-modal`,children:[p("div",{className:"non-modal-header",innerHTML:`
+        <span></span>
+        <h3>${h}</h3>
+        <span></span>
+      `}),z()]}),{element:Y,setModalVisibility:F}=l?le({title:h,children:z()}):{element:null,setModalVisibility:()=>{}};function R(){Y&&(document.body.appendChild(p("div",{className:a,children:[Y]})),F(!0))}return{renderFormWithModal:R,nonModalForm:q,closeModal:()=>F(!1)}};function de({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:r}){const{renderFormWithModal:h,nonModalForm:o,closeModal:c}=ce({token:n,endpoint:e,beneficiaryCard:t,isModal:l,onCallback:r});return{mount(d){const a="className"in d?document.querySelector(d.className):"id"in d?document.getElementById(d.id):d.element;a&&o&&a.appendChild(o)},open(){h()},destroy(){c()}}}exports.init=de;

package/dist/index.es.js

@@ -0,0 +1,578 @@
+function p(n, e = {}) {
+  const t = document.createElement(n), { className: l, id: r, innerHTML: h, textContent: o, attributes: c, styles: d, dataset: a, children: i, events: m } = e;
+  if (l) {
+    const u = Array.isArray(l) ? l : l.split(" ");
+    t.classList.add(...u.filter(Boolean));
+  }
+  if (r && (t.id = r), h && (t.innerHTML = h), o && (t.textContent = o), c)
+    for (const [u, s] of Object.entries(c))
+      s && t.setAttribute(u, s);
+  if (d)
+    for (const [u, s] of Object.entries(d))
+      t.style[u] = s;
+  if (a)
+    for (const [u, s] of Object.entries(a))
+      t.dataset[u] = s;
+  if (i && t.append(...i.filter(Boolean)), m)
+    for (const [u, s] of Object.entries(m))
+      t.addEventListener(u, s);
+  return t;
+}
+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);
+    return;
+  }
+  for (const l of t) {
+    const { styles: r, attributes: h, dataset: o, innerHTML: c, textContent: d, className: a } = e;
+    if (r)
+      for (const [i, m] of Object.entries(r))
+        l.style[i] = m;
+    if (h)
+      for (const [i, m] of Object.entries(h))
+        l.setAttribute(i, m);
+    if (o)
+      for (const [i, m] of Object.entries(o))
+        l.dataset[i] = m;
+    if (c !== void 0 && (l.innerHTML = c), d !== void 0 && (l.textContent = d), a?.add) {
+      const i = Array.isArray(a.add) ? a.add : [a.add];
+      l.classList.add(...i);
+    }
+    if (a?.remove) {
+      const i = Array.isArray(a.remove) ? a.remove : [a.remove];
+      l.classList.remove(...i);
+    }
+    a?.toggle && (Array.isArray(a.toggle) ? a.toggle : [a.toggle]).forEach((m) => l.classList.toggle(m));
+  }
+}
+const Q = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  viewBox="0 0 16 16"
+>
+  <path
+    fill="#000"
+    fill-rule="evenodd"
+    d="M8 2.667a2 2 0 0 0-2 2v2h4v-2a2 2 0 0 0-2-2m3.333 4v-2a3.333 3.333 0 0 0-6.666 0v2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6.666a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2M4.667 8.001A.667.667 0 0 0 4 8.667v4c0 .369.298.667.667.667h6.666a.667.667 0 0 0 .667-.667v-4a.667.667 0 0 0-.667-.666zm2 2.666a1.333 1.333 0 1 1 2.666 0 1.333 1.333 0 0 1-2.666 0"
+    clip-rule="evenodd"
+  ></path>
+</svg>  
+`, X = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16"
+  height="16"
+  fill="none"
+  stroke="currentColor"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  stroke-width="2"
+  class="lucide lucide-loader-icon lucide-loader"
+  viewBox="0 0 24 24"
+>
+  <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>  
+`, ee = `<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="20"
+  height="20"
+  fill="none"
+  viewBox="0 0 24 24"
+>
+  <path
+    fill="#071B32"
+    d="M9.709 21.493a.44.44 0 0 1-.325-.146l-8.25-9a.533.533 0 0 1 0-.707l8.25-9a.432.432 0 0 1 .648.013.53.53 0 0 1 0 .694l-7.925 8.646 7.925 8.646c.18.195.18.512 0 .707a.44.44 0 0 1-.323.147"
+  ></path>
+  <path
+    fill="#071B32"
+    d="M22.542 12.494H1.459c-.253 0-.459-.224-.459-.5s.206-.5.459-.5h21.083c.253 0 .458.224.458.5s-.205.5-.458.5"
+  ></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: r = "button", className: h = "", variant: o = "primary" }) => {
+  const c = p("span", {
+    className: "button-spinner",
+    innerHTML: X,
+    dataset: { show: "false" }
+  }), d = p("span", {
+    className: "button-label",
+    children: [
+      null
+    ],
+    textContent: n
+  }), a = p("button", {
+    className: `custom-button ${o} ${l} ${h}`,
+    attributes: {
+      type: r,
+      ...t ? { disabled: "true" } : {}
+    },
+    events: {
+      click: e
+    },
+    children: [
+      c,
+      d
+    ]
+  }), i = (u = !1) => {
+    x({ element: c }, {
+      dataset: { show: String(u) }
+    }), m(u);
+  }, m = (u = !1) => {
+    u ? a.setAttribute("disabled", "true") : a.removeAttribute("disabled");
+  };
+  return {
+    element: a,
+    setLoading: i,
+    setDisabled: m
+  };
+}, ne = ({ content: n, position: e = "top", delay: t = 200, maxWidth: l = 250, className: r = "", id: h = "" }) => {
+  var o = p("div", {
+    className: `tooltip ${e} ${r}`,
+    styles: {
+      // top: `${tooltipPosition.top}px`,
+      // left: `${tooltipPosition.left}px`,
+      maxWidth: `${l}px`
+    },
+    attributes: {
+      role: "tooltip"
+    },
+    dataset: { show: "false" },
+    innerHTML: `
+      <div class="tooltip-content">${n}</div>
+      <div class="tooltip-arrow"></div>
+    `
+  });
+  let c = null;
+  var i = p("span", {
+    className: "tooltip-trigger",
+    innerHTML: k,
+    events: {
+      mouseenter: () => {
+        t > 0 ? c = window.setTimeout(() => {
+          o.dataset.show = "true", m();
+        }, t) : (o.dataset.show = "true", m());
+      },
+      mouseleave: () => {
+        c && clearTimeout(c), o.dataset.show = "false";
+      }
+    }
+  });
+  function m() {
+    if (!i || !o) return;
+    const s = i.getBoundingClientRect(), v = o.getBoundingClientRect(), y = 8;
+    let w, g;
+    switch (e) {
+      case "top":
+        w = s.top - v.height - y, g = s.left + s.width / 2 - v.width / 2;
+        break;
+      case "bottom":
+        w = s.bottom + y, g = s.left + s.width / 2 - v.width / 2;
+        break;
+      case "left":
+        w = s.top + s.height / 2 - v.height / 2, g = s.left - v.width - y;
+        break;
+      case "right":
+        w = s.top + s.height / 2 - v.height / 2, g = s.right + y;
+        break;
+      default:
+        w = s.top - v.height - y, g = s.left + s.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), o.style.top = `${w}px`, o.style.left = `${g}px`;
+  }
+  return p("div", {
+    className: "tooltip-wrapper",
+    id: `tooltip-${h}`,
+    children: [
+      i,
+      o
+    ]
+  });
+}, se = (n) => {
+  const e = {}, t = Object.values(n).every(
+    (r) => !r || r.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)
+    e.expiryDate = "Expiry date is required";
+  else {
+    const r = n.expiryDate.replace(/\D/g, "");
+    if (r.length < 4)
+      e.expiryDate = "Enter complete expiry date (MM/YY)";
+    else {
+      const h = parseInt(r.substring(0, 2), 10), o = parseInt(r.substring(2, 4), 10);
+      if (isNaN(h) || h < 1 || h > 12)
+        e.expiryDate = "Invalid month (must be 01-12)";
+      else if (isNaN(o) || o < 0 || o > 99)
+        e.expiryDate = "Invalid year";
+      else {
+        const c = /* @__PURE__ */ new Date(), d = c.getFullYear(), a = c.getMonth() + 1, i = Math.floor(d / 100) * 100, m = i + o, u = i + 100 + o;
+        let s;
+        m >= d && m <= d + 20 ? s = m : (u >= d && u <= d + 20, s = u), s < d || s === d && h < a ? e.expiryDate = "Card has expired" : s > 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", {
+    isValid: Object.keys(e).length === 0,
+    errors: e,
+    isEmpty: t
+  };
+};
+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 r = l + e;
+  return r >= t && r <= t + 20 || (r = l + 100 + e, r >= t && r <= t + 20) ? r : l + 100 + e;
+}
+function V(n = "") {
+  return n.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;
+  },
+  expiry: (n) => {
+    const e = n.replace(/\//g, "");
+    return e.substring(0, 2) + (n.length > 2 ? "/" : "") + e.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;
+  }
+};
+function ae(n, e) {
+  return e === "none" ? n : oe[e](n);
+}
+const $ = ({ label: n, maskType: e, id: t, name: l, type: r = "text", placeholder: h = "Enter value", tooltip: o = "", onChange: c }) => {
+  const d = ["card", "expiry", "phone", "cvv", "zip"].includes(e) ? "numeric" : "", a = p("label", {
+    className: "input-label",
+    innerHTML: n,
+    attributes: {
+      for: t
+    }
+  });
+  let i = !1;
+  const u = p("input", {
+    id: t || "input-id",
+    className: "styled-input",
+    attributes: {
+      placeholder: h,
+      type: r,
+      inputMode: d,
+      name: l
+    },
+    events: {
+      input: s,
+      blur: v,
+      keydown: (b) => {
+        b.key === "Enter" && (i = !0);
+      }
+    }
+  });
+  function s(b) {
+    const D = e !== "none" ? ae(b?.target?.value, e) : b?.target?.value;
+    u.value = D, c?.(D);
+  }
+  function v() {
+    i = !0, c?.(u?.value || "");
+  }
+  const y = p("div", {
+    className: "input-loader",
+    innerHTML: '<div class="loader"></div>',
+    dataset: { show: "false" }
+  }), w = o ? p("div", {
+    className: "input-right-element",
+    children: [
+      ne({ content: o, id: t })
+    ]
+  }) : null, g = p("div", {
+    className: "input-wrapper",
+    children: [
+      u,
+      y,
+      w
+    ]
+  }), N = p("div", {
+    className: "error-message",
+    dataset: { show: "false" },
+    innerHTML: `
+      ${k}
+      <span></span>
+    `
+  });
+  return {
+    element: p("div", {
+      className: "custom-input-group",
+      children: [
+        a,
+        g,
+        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" }
+      });
+    },
+    setError: (b = "") => {
+      x({ element: g }, {
+        className: b && i ? { add: "input-error" } : { remove: "input-error" }
+      }), x({ element: N }, {
+        dataset: { show: b && i ? "true" : "false" },
+        innerHTML: `
+      ${k}
+      <span>${b || ""}</span>
+      `
+      });
+    }
+  };
+}, ie = async (n, e = {}) => {
+  const { method: t = "GET", headers: l = {}, body: r = null, ...h } = e;
+  try {
+    const o = {
+      method: t,
+      headers: {
+        Accept: "*/*",
+        "Content-Type": "application/json",
+        ...l
+      },
+      ...h
+    };
+    r && ["POST", "PUT", "PATCH", "DELETE"].includes(t.toUpperCase()) && (o.body = typeof r == "string" ? r : JSON.stringify(r));
+    const c = await fetch(n, o), d = c.headers.get("content-type");
+    let a;
+    if (d?.includes("application/json") ? a = await c.json() : a = await c.text(), !c.ok) {
+      const i = a;
+      throw new Error(
+        i?.message || `HTTP error! status: ${c.status}`
+      );
+    }
+    return { data: a, error: null };
+  } catch (o) {
+    return { data: null, error: o instanceof Error ? o.message : "An error occurred" };
+  }
+}, le = ({
+  title: n = "",
+  children: e,
+  onClose: t,
+  showBackBtn: l = !1,
+  showCloseBtn: r = !0
+}) => {
+  const h = p("button", {
+    className: "back-btn",
+    innerHTML: ee,
+    dataset: { show: String(l) },
+    events: { click: () => m() }
+  }), o = p("h3", {
+    textContent: n
+  }), c = p("button", {
+    className: "close-btn",
+    innerHTML: "&times;",
+    dataset: { show: String(r) },
+    attributes: { "aria-label": "Close modal" },
+    events: { click: () => m() }
+  }), d = p("div", {
+    className: "modal-header",
+    children: [h, o, c]
+  }), a = p("div", {
+    className: "modal-content",
+    children: [e]
+  }), i = p("dialog", {
+    className: "custom-modal",
+    children: [d, a],
+    events: {
+      cancel: (s) => {
+        s.preventDefault(), m();
+      }
+    }
+  }), m = () => {
+    i.close(), t?.();
+  };
+  return {
+    element: i,
+    setModalVisibility: (s) => {
+      s ? i.showModal() : i.close();
+    }
+  };
+}, ce = ({ token: n, endpoint: e, beneficiaryCard: t = !1, isModal: l = !1, onCallback: r = () => null }) => {
+  const h = t ? "Enter Recipient Debit Card Details" : "Enter Your Debit Card Details", o = 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", a = `add-card-form-wrapper${t ? " recipient-form" : ""}`, i = {
+    cardNumber: "",
+    expiryDate: "",
+    cvv: "",
+    zipCode: ""
+  }, { element: m, setError: u } = $({
+    label: c,
+    placeholder: d,
+    id: "card-number-input",
+    name: "cardNumber",
+    maskType: "card",
+    onChange(f) {
+      L("cardNumber", f, u);
+    }
+  }), { element: s, setError: v } = $({
+    label: "Expiration Date",
+    placeholder: "MM/YY",
+    id: "expiry-input",
+    name: "expiryDate",
+    maskType: "expiry",
+    onChange(f) {
+      L("expiryDate", f, v);
+    }
+  }), { element: y, setError: w } = $({
+    label: "CVV",
+    placeholder: "3-Digit",
+    type: "number",
+    maskType: "cvv",
+    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);
+    }
+  }), { element: g, setError: N } = $({
+    label: "ZIP Code",
+    placeholder: t ? "ZIP Code" : "Enter your ZIP Code",
+    id: "zip-input",
+    name: "zipCode",
+    maskType: "zip",
+    onChange(f) {
+      L("zipCode", f, N);
+    }
+  }), M = p("div", {
+    className: t ? "input-sections" : "inputs",
+    children: [m, s, y, g]
+  }), A = p("p", {
+    className: "submit-error",
+    dataset: { show: "false" }
+    // innerHTML: `//icon`
+  }), { element: j, setDisabled: b, setLoading: D } = te({
+    children: "Link Card",
+    type: "submit",
+    disabled: !0
+  }), z = (f = "") => {
+    x({ element: A }, {
+      dataset: { show: String(!!f) },
+      innerHTML: `
+      ${k}
+      ${f || ""}
+      `
+    });
+  }, B = (f = !0) => {
+    b(f), D(f);
+  };
+  function L(f, H, E) {
+    i[f] = H;
+    const { isValid: I, errors: T } = se(i);
+    T[f] ? E(T[f]) : E(""), b(!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());
+    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, {
+      method: "POST",
+      body: {
+        token: n,
+        pan: J,
+        expiry_month: K,
+        expiry_year: U,
+        cvv: V(_),
+        address: {
+          postal_code: V(G)
+        }
+      }
+    });
+    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 }));
+  }
+  const Z = () => p("form", {
+    events: {
+      submit: P
+    },
+    children: [
+      M,
+      O
+    ]
+  }), W = () => p("div", {
+    className: "form-title",
+    innerHTML: `
+    <p>${o}</p>
+
+    <div>
+      ${Q}
+
+      <span>Secured with 256-bit encryption</span>
+    </div>
+    `
+  }), Y = () => p("div", {
+    className: l ? "" : "non-modal-content",
+    children: [W(), Z()]
+  }), q = l ? null : p("div", {
+    className: `${a} non-modal`,
+    children: [
+      p("div", {
+        className: "non-modal-header",
+        innerHTML: `
+        <span></span>
+        <h3>${h}</h3>
+        <span></span>
+      `
+      }),
+      Y()
+    ]
+  }), { element: F, setModalVisibility: S } = l ? le({ title: h, children: Y() }) : { element: null, setModalVisibility: () => {
+  } };
+  function R() {
+    F && (document.body.appendChild(
+      p("div", {
+        className: a,
+        children: [F]
+      })
+    ), S(!0));
+  }
+  return {
+    renderFormWithModal: R,
+    nonModalForm: q,
+    closeModal: () => S(!1)
+  };
+};
+function de({ token: n, endpoint: e, beneficiaryCard: t, isModal: l, onCallback: r }) {
+  const { renderFormWithModal: h, nonModalForm: o, closeModal: c } = ce({
+    token: n,
+    endpoint: e,
+    beneficiaryCard: t,
+    isModal: l,
+    onCallback: r
+  });
+  return {
+    mount(d) {
+      const a = "className" in d ? document.querySelector(d.className) : "id" in d ? document.getElementById(d.id) : d.element;
+      a && o && a.appendChild(o);
+    },
+    open() {
+      h();
+    },
+    destroy() {
+      c();
+    }
+  };
+}
+export {
+  de as init
+};