npm - @test-glide/glide-payment - Versions diffs - 0.0.1 - Mend

@test-glide/glide-payment 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/index.cjs.js +72 -0
package/dist/index.es.js +578 -0
package/dist/index.umd.js +72 -0
package/dist/native/native.cjs.js +1 -0
package/dist/native/native.es.js +257 -0
package/dist/native/vite.svg +1 -0
package/dist/react/react.cjs.js +72 -0
package/dist/react/react.es.js +608 -0
package/dist/react/style.css +1 -0
package/dist/react/vite.svg +1 -0
package/dist/style.css +1 -0
package/dist/vite.svg +1 -0
package/package.json +51 -0

package/dist/react/react.es.js ADDED Viewed

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

package/dist/react/style.css ADDED Viewed

@@ -0,0 +1 @@

+ .custom-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);font-weight:600;border-radius:3px;outline:none;cursor:pointer;transition:all .2s;border:1px solid transparent;box-sizing:border-box;white-space:nowrap;width:100%}.custom-button .button-spinner{display:flex;align-items:center;animation:spin 1s linear infinite}.custom-button .button-spinner[data-show=false]{display:none}.custom-button .button-spinner svg{display:block}.custom-button .button-label{display:flex;align-items:center}.custom-button.small{height:36px;padding:0 16px;font-size:14px}.custom-button.medium{height:48px;padding:0 24px;font-size:16px}.custom-button.large{height:56px;padding:0 32px;font-size:18px}.custom-button.primary{background-color:var(--bivo-payments-primary, #000);color:var(--bivo-payments-primary-text, #fff);border-color:var(--bivo-payments-primary, #000)}.custom-button.primary:hover:not(.disabled){background-color:var(--bivo-payments-primary-hover, #333);border-color:var(--bivo-payments-primary-hover, #333)}.custom-button.primary:active:not(.disabled){background-color:var(--bivo-payments-primary-active, #1a1a1a);border-color:var(--bivo-payments-primary-active, #1a1a1a)}.custom-button.secondary{background-color:var(--bivo-payments-secondary, #f8f8fa);color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.secondary:hover:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-border-hover, #d1d3d9)}.custom-button.secondary:active:not(.disabled){background-color:var(--bivo-payments-secondary-active, #e3e5e9);border-color:var(--bivo-payments-border-active, #c1c3c9)}.custom-button.outline{background-color:transparent;color:var(--bivo-payments-text, #000);border-color:var(--bivo-payments-border, #e3e5e9)}.custom-button.outline:hover:not(.disabled){background-color:var(--bivo-payments-secondary, #f8f8fa);border-color:var(--bivo-payments-text, #000)}.custom-button.outline:active:not(.disabled){background-color:var(--bivo-payments-secondary-hover, #ececef);border-color:var(--bivo-payments-text, #000)}.custom-button.disabled,.custom-button:disabled{cursor:not-allowed;opacity:.5}.custom-button:focus-visible{outline:2px solid var(--bivo-payments-primary, #000);outline-offset:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.tooltip-trigger{display:inline-flex;cursor:help}.tooltip-wrapper{display:flex;justify-content:center;align-items:center}.tooltip{position:fixed;z-index:9999;background-color:var(--bivo-payments-tooltip-bg, #1a1a1a);color:var(--bivo-payments-tooltip-text, #fff);border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.4;box-shadow:0 2px 8px #00000026;pointer-events:none;animation:tooltipFadeIn .2s ease-in-out forwards;align-items:center}.tooltip .tooltip-content{position:relative;z-index:1}.tooltip .tooltip-arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip.top .tooltip-arrow{bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0 6px;border-color:var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent transparent}.tooltip.bottom .tooltip-arrow{top:-6px;left:50%;transform:translate(-50%);border-width:0 6px 6px 6px;border-color:transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent}.tooltip.left .tooltip-arrow{right:-6px;top:50%;transform:translateY(-50%);border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--bivo-payments-tooltip-bg, #1a1a1a)}.tooltip.right .tooltip-arrow{left:-6px;top:50%;transform:translateY(-50%);border-width:6px 6px 6px 0;border-color:transparent var(--bivo-payments-tooltip-bg, #1a1a1a) transparent transparent}.tooltip[data-show=true]{display:flex}.tooltip[data-show=false]{display:none}@keyframes tooltipFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.custom-input-group{display:flex;flex-direction:column;width:100%;align-items:flex-start}.custom-input-group .input-label{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--bivo-payments-text, #000)}.custom-input-group .input-wrapper{width:100%;display:flex;align-items:center;position:relative;border:1px solid var(--bivo-payments-border, #e3e5e9);border-radius:3px;background-color:var(--bivo-payments-bg, #fff);height:44px;transition:border-color .2s;box-sizing:border-box}.custom-input-group .input-wrapper:focus-within{border-color:var(--bivo-payments-primary, #000)}.custom-input-group .input-wrapper.input-error{border-color:var(--bivo-payments-danger, #eb5757);background-color:var(--bivo-payments-secondary, #f8f8fa)}.custom-input-group .input-wrapper .styled-input{width:100%;padding:0 16px;border:none;background:transparent;font-size:16px;font-family:var(--bivo-payments-font-family, inherit);outline:none;height:100%;color:var(--bivo-payments-text, #000);box-sizing:border-box}.custom-input-group .input-wrapper .styled-input::placeholder{color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6));font-size:14px}.custom-input-group .input-wrapper .styled-input:disabled{cursor:not-allowed;opacity:.6}.custom-input-group .input-wrapper[data-loading=true] .styled-input{cursor:progress;opacity:.8;background:linear-gradient(90deg,#888 40%,var(--bivo-payments-primary, #000000) 50%,#888 60%);background-size:200% auto;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.5s linear infinite}.custom-input-group .input-wrapper[data-loading=true] .input-loader{display:flex;align-items:center;justify-content:center;padding:0 8px;flex-shrink:0}.custom-input-group .input-wrapper[data-loading=true] .input-loader .loader{width:24px;aspect-ratio:2;--_g: no-repeat radial-gradient( circle closest-side, var(--bivo-payments-placeholder, #3c3c4399) 90%, transparent );background:var(--_g) 0% 50%,var(--_g) 50% 50%,var(--_g) 100% 50%;background-size:33.3333333333% 50%;animation:l3 1s infinite linear}@keyframes l3{20%{background-position:0% 0%,50% 50%,100% 50%}40%{background-position:0% 100%,50% 0%,100% 50%}60%{background-position:0% 50%,50% 100%,100% 0%}80%{background-position:0% 50%,50% 50%,100% 100%}}.custom-input-group .input-wrapper[data-loading=true] .input-loader[data-show=false]{display:none}.custom-input-group .input-wrapper .input-right-element{display:flex;align-items:center;justify-content:center;padding-right:12px;flex-shrink:0;color:var(--bivo-payments-placeholder, rgba(60, 60, 67, .6))}.custom-input-group .input-wrapper .input-right-element button,.custom-input-group .input-wrapper .input-right-element a{cursor:pointer;background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center}.custom-input-group .input-wrapper .input-right-element svg{display:block}.custom-input-group .error-message{padding:0;background-color:transparent;display:flex;align-items:center;gap:4px;color:var(--bivo-payments-danger, #eb5757);font-size:12px;margin-top:4px;font-weight:500}.custom-input-group .error-message[data-show=false]{display:none}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield;appearance:textfield}.add-card-form-wrapper .custom-modal{max-width:500px}.add-card-form-wrapper.non-modal{max-width:500px;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.add-card-form-wrapper.non-modal .non-modal-content{padding:12px 20px}.add-card-form-wrapper.non-modal .non-modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.add-card-form-wrapper.non-modal .non-modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn,.add-card-form-wrapper.non-modal .non-modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.add-card-form-wrapper.non-modal .non-modal-header .close-btn:hover,.add-card-form-wrapper.non-modal .non-modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.add-card-form-wrapper.non-modal .non-modal-header .close-btn[data-show=false],.add-card-form-wrapper.non-modal .non-modal-header .back-btn[data-show=false]{visibility:hidden}.add-card-form-wrapper div.form-title{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper div.form-title p{margin:0}.add-card-form-wrapper div.form-title>div{display:flex;align-items:center;gap:4px;font-size:12px}.add-card-form-wrapper form{margin-top:16px;margin-bottom:32px;display:flex;flex-direction:column;gap:40px}.add-card-form-wrapper form div.inputs{display:flex;flex-direction:column;gap:20px}.add-card-form-wrapper form div.inputs .input-wrapper .input-right-element .input-success-icon{color:var(--bivo-payments-success, green)}.add-card-form-wrapper form div.input-row{display:flex;align-items:flex-start;flex-direction:row;gap:16px;margin:0!important}.add-card-form-wrapper form .submit-button-wrapper{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}.add-card-form-wrapper form .submit-button-wrapper p.submit-error{margin:0;font-size:14px;display:flex;gap:6px;align-items:center;color:var(--bivo-payments-danger, #eb5757)}.add-card-form-wrapper form .submit-button-wrapper p.submit-error[data-show=false]{display:hidden}.recipient-form form{margin-bottom:16px}.recipient-form form .input-sections{display:flex;flex-direction:column;gap:16px}.recipient-form form .input-sections p.section-title{font-size:16px;font-weight:500;margin:0}.recipient-form form .input-sections div.section{display:flex;flex-direction:column;gap:20px}.custom-modal{border:none;border-radius:8px;padding:0;min-width:500px;box-shadow:0 10px 25px #0003;background-color:var(--bivo-payments-bg, #ffffff);color:var(--bivo-payments-text, #000);font-family:var(--bivo-payments-font-family, inherit)}.custom-modal[open]{animation:fadeIn .3s ease-out}.custom-modal::backdrop{background-color:var(--bivo-payments-bg-overlay, rgba(0, 0, 0, .35));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.custom-modal .modal-header{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--bivo-payments-border, #ccc);gap:8px;margin-bottom:0}.custom-modal .modal-header h3{margin:0;font-size:14px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn,.custom-modal .modal-header .back-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--bivo-payments-text-secondary, #666);padding:0;line-height:1;height:32px;width:32px;display:grid;place-items:center;visibility:visible}.custom-modal .modal-header .close-btn:hover,.custom-modal .modal-header .back-btn:hover{color:var(--bivo-payments-text, #000)}.custom-modal .modal-header .close-btn[data-show=false],.custom-modal .modal-header .back-btn[data-show=false]{visibility:hidden}.custom-modal .modal-content{padding:12px 20px;color:var(--bivo-payments-text, #000)}.custom-modal .modal-actions{padding:16px 24px;background-color:var(--bivo-payments-bg-secondary, #f9f9f9);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--bivo-payments-secondary, #eee)}.custom-modal .modal-actions button{padding:8px 16px;border-radius:4px;border:none;cursor:pointer;font-weight:500;transition:background .2s}.custom-modal .modal-actions button.btn-secondary{background-color:var(--bivo-payments-secondary, #e0e0e0);color:var(--bivo-payments-secondary-text, #333)}.custom-modal .modal-actions button.btn-secondary:hover{background-color:var(--bivo-payments-secondary-hover, #d5d5d5)}.custom-modal .modal-actions button.btn-primary{background-color:var(--bivo-payments-info, #3b82f6);color:var(--bivo-payments-primary-text, white)}.custom-modal .modal-actions button.btn-primary:hover{background-color:var(--bivo-payments-info-hover, #2563eb)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

package/dist/react/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

package/dist/vite.svg ADDED Viewed

@@ -0,0 +1 @@