react-credit-cards-library/dist/index.js

A lightweight, customizable React component library for rendering credit card forms with dynamic card issuer detection, input formatting, and responsive design. Built with TypeScript for type safety and flexibility.

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.tsx
var index_exports = {};
__export(index_exports, {
  CreditCard: () => CreditCard_default,
  FOCUSED_FIELDS: () => FOCUSED_FIELDS,
  ISSUERS: () => ISSUERS,
  formatCardNumber: () => formatCardNumber,
  getCardIssuer: () => getCardIssuer
});
module.exports = __toCommonJS(index_exports);

// src/components/CreditCard.tsx
var import_react3 = require("react");
var import_react_intl2 = require("react-intl");

// src/lib/intl.ts
var messages = {
  en: {
    validThru: "VALID THRU",
    namePlaceholder: "YOUR NAME HERE"
  },
  "pt-BR": {
    validThru: "V\xC1LIDO AT\xC9",
    namePlaceholder: "SEU NOME AQUI"
  },
  es: {
    validThru: "V\xC1LIDO HASTA",
    namePlaceholder: "SU NOMBRE AQU\xCD"
  }
};
var intl_default = messages;

// src/utils/get-card-issuer.ts
var CARD_ISSUERS = /* @__PURE__ */ new Map([
  // Benefit cards (more specific prefixes, checked first)
  ["sodexo", /^(606071|603389)/],
  ["vr", /^(637036|627416)/],
  ["ticket_vr", /^603342/],
  ["ticket_va", /^602651/],
  ["alelo", /^(5067|5090|5041|4312|6362|6363)/],
  // Major networks (more generic prefixes)
  ["visa", /^4/],
  ["mastercard", /^(5[1-5]|2[2-7])/],
  ["amex", /^3[47]/],
  ["diners", /^3(?:0[0-5]|[68])/],
  ["elo", /^(401178|438935|457631|504175|627780|636297|636368|650|6516|6550)/],
  ["discover", /^6(?:011|5)/],
  ["jcb", /^(?:2131|1800|35)/]
]);
function getCardIssuer(cardNumber) {
  if (!cardNumber || typeof cardNumber !== "string") {
    return "Unknown";
  }
  const sanitized = cardNumber.replace(/\D/g, "");
  for (const [issuer, pattern] of CARD_ISSUERS) {
    if (pattern.test(sanitized)) {
      return issuer;
    }
  }
  return "Unknown";
}

// src/utils/issuers.ts
var import_fa6 = require("react-icons/fa6");
var import_si = require("react-icons/si");

// src/assets/icons/alelo.logo.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var AleloLogo = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
  "svg",
  {
    width: "62",
    height: "40",
    viewBox: "0 0 62 40",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    "data-testid": "rango-brand-svg",
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M21.4151 6.4677C22.6569 6.77959 23.7461 6.85002 24.8677 6.58326C25.9863 6.31716 27.1203 5.71957 28.4591 4.72401C29.0684 4.27088 30.1218 3.5459 30.3519 3.39185C33.5742 1.25084 37.4519 0 41.6279 0C52.8068 0 61.8647 8.95248 61.8647 19.9984C61.8647 31.0443 52.8068 40 41.6279 40C37.1359 40 32.9908 38.5514 29.6345 36.1068C29.5248 36.0269 29.2289 35.8344 28.9055 35.624L28.8951 35.6173L28.8944 35.6168C28.5125 35.3684 28.0878 35.0921 27.8475 34.9234C26.6912 34.1129 25.5975 33.624 24.3224 33.4811C23.0516 33.3387 21.618 33.5418 19.7843 34.084L19.7815 34.0849L19.7786 34.0858C18.285 34.5783 16.6876 34.8487 15.0249 34.8487C6.72329 34.8487 0 28.1945 0 19.9984C0 11.8022 6.72325 5.15123 15.0249 5.15068C16.8918 5.15068 18.677 5.48825 20.3248 6.10359C20.545 6.18565 21.2537 6.42809 21.4151 6.4677ZM21.4151 6.4677L21.4144 6.46755L21.4151 6.4677ZM21.4151 6.4677L21.4156 6.46782L21.4151 6.4677Z",
          fill: "#008060"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M33.8565 23.8629C33.1887 24.51 32.274 24.9052 31.265 24.8891C30.5727 24.8794 29.9332 24.6745 29.3881 24.3337L28.0334 26.4593C28.9602 27.0363 30.0537 27.3797 31.2257 27.397C32.9402 27.4234 34.4976 26.758 35.6336 25.6612L33.8565 23.8635V23.8629Z",
          fill: "white"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M31.4149 15.1986C28.0083 15.148 25.2031 17.836 25.1513 21.204C25.1317 22.4652 25.5013 23.644 26.15 24.6265L37.3306 19.905C36.701 17.2434 34.3073 15.2434 31.4149 15.1986ZM27.7102 21.678C27.6949 21.5345 27.6845 21.3906 27.6883 21.2417C27.7183 19.2585 29.3712 17.6748 31.3767 17.7055C32.4691 17.7228 33.4395 18.2156 34.0942 18.9802L27.7102 21.6774V21.678Z",
          fill: "white"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M40.8347 12.4508V24.2285L42.9018 25.0756L41.9277 27.3965L39.8807 26.5569C39.4179 26.3622 39.1083 26.0597 38.8738 25.72C38.646 25.3754 38.477 24.8993 38.477 24.2603V12.4508H40.8352H40.8347Z",
          fill: "white"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M22.8422 12.4508V24.2285L24.9082 25.0756L23.9335 27.3965L21.8887 26.5569C21.4265 26.3622 21.1163 26.0597 20.8813 25.72C20.6529 25.3754 20.4839 24.8993 20.4839 24.2603V12.4508H22.8422Z",
          fill: "white"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M51.0079 18.0598C52.8188 18.9193 53.5809 21.0654 52.7103 22.8535L54.9982 23.939C56.4739 20.9031 55.1803 17.2596 52.1085 15.7994C49.7732 14.6902 47.0846 15.1636 45.2797 16.7872L46.9886 18.6432C48.0511 17.6861 49.6347 17.4057 51.0079 18.0598Z",
          fill: "#BDD753"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M47.8597 24.5348C46.0521 23.6753 45.29 21.5291 46.1589 19.7421V19.7411L43.8732 18.6551C42.3959 21.6914 43.6884 25.3355 46.7619 26.7952C49.0972 27.9039 51.7869 27.4299 53.5907 25.8063L51.8812 23.9519C50.8187 24.9074 49.2356 25.1878 47.8597 24.5348Z",
          fill: "white"
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
        "path",
        {
          d: "M18.1573 24.7047V21.2957C18.1573 18.5753 16.3529 16.2744 13.8633 15.4931C13.2757 15.3087 12.6482 15.2067 11.9979 15.2062C11.359 15.2062 10.7436 15.3033 10.1652 15.4801C9.20248 15.7767 8.3379 16.3019 7.64177 16.9905C6.52698 18.0921 5.83794 19.6144 5.8363 21.2957C5.83739 24.6583 8.5952 27.383 11.9979 27.3841H12.0006C12.9846 27.3841 13.9189 27.1522 14.7464 26.7435L13.7494 24.4464C13.2288 24.7295 12.6362 24.8918 11.9974 24.8918C9.98801 24.8885 8.3608 23.28 8.35589 21.2951H8.35698C8.35862 20.6842 8.51398 20.111 8.78436 19.6074C9.27334 18.7036 10.1401 18.0317 11.1764 17.7934C11.4408 17.7325 11.7144 17.6969 11.9963 17.6969C12.5343 17.698 13.0435 17.8166 13.5019 18.0237C14.7584 18.592 15.6339 19.8403 15.6361 21.2946H15.6372C15.6372 21.3976 15.6372 24.6755 15.6383 24.6755C15.6383 25.3134 15.8067 25.7907 16.0346 26.1347C16.269 26.4744 16.5781 26.7774 17.0414 26.9726L18.196 27.425L19.1724 25.1037L18.1562 24.703L18.1573 24.7047Z",
          fill: "white"
        }
      )
    ]
  }
);

// src/assets/icons/ticket.logo.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var TicketLogo = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    width: "60",
    height: "59",
    viewBox: "0 0 60 59",
    fill: "none",
    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      "path",
      {
        fillRule: "evenodd",
        clipRule: "evenodd",
        d: "M52.7876 31.5393H43.859C44.1973 33.4782 46.046 34.2223 47.647 34.2223C48.6615 34.2223 49.5633 33.9967 50.4427 33.5912L50.1948 36.2514C49.2026 36.6571 48.0079 36.815 46.8129 36.815C42.8447 36.815 40.049 34.493 40.049 30.5474C40.049 27.1203 42.5515 24.5501 46.3843 24.5501C50.7131 24.5501 52.8775 27.3007 52.7876 31.5393ZM36.6442 36.5897C36.4638 36.1611 36.1931 35.4624 35.9678 34.7634L35.4492 33.0273C35.1785 32.1032 34.8179 31.7198 33.9384 31.7198H32.4505V36.5897H29.0009V20.6722H32.4505V29.4426H32.8339L36.1029 24.7757H39.9357L36.0803 29.6453H36.2833C37.8164 29.6453 38.2673 30.5022 38.6507 31.7649L39.3046 33.9519C39.5299 34.7634 40.0036 35.9133 40.364 36.5897H36.6442ZM25.5963 33.9519C26.4981 33.9519 27.2422 33.7037 27.8059 33.4333L27.4903 36.2967C26.7688 36.6571 25.754 36.8376 24.8748 36.8376C21.1545 36.8376 18.5846 34.4253 18.5846 30.6601C18.5846 26.9401 21.1096 24.5501 24.8522 24.5501C26.2274 24.5501 27.2873 24.8205 28.3693 25.3165L27.3773 27.9769C26.8587 27.6614 26.1374 27.4135 25.3708 27.4135C23.477 27.4135 22.2369 28.6534 22.2369 30.6601C22.2369 32.6441 23.5445 33.9742 25.5963 33.9519ZM14.0074 23.2649H17.5244V20.6722H14.0074V23.2649ZM14.0074 36.5897H17.5244V24.7757H14.0074V36.5897ZM53.5322 30.2093V22.1827L57.0492 20.7624V25.001H59.4164L58.943 27.6388H57.0041V30.3443C57.0041 32.9723 58.0002 34.8232 59.0563 36.3094C59.5806 34.11 59.8597 31.8156 59.8597 29.4558C59.8594 13.1877 46.6715 0 30.4034 0C17.1947 0 6.01677 8.69414 2.27949 20.6722H13.2404L12.8121 23.8286H8.23517V36.5897H4.49231V23.8286H1.48646C1.13418 25.6503 0.947388 27.5311 0.947388 29.4558C0.947641 45.7241 14.1353 58.9118 30.4037 58.9118C44.2115 58.9118 55.7985 49.4107 58.9881 36.5897H55.5162C54.9074 35.5301 53.5096 33.6135 53.5322 30.2093ZM46.497 26.985C45.009 26.985 44.0622 27.9544 43.7689 29.2396H49.0674C48.887 27.8193 47.895 26.985 46.497 26.985Z",
        fill: "#D52B1E"
      }
    )
  }
);

// src/assets/icons/vr.logo.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var VrLogo = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    width: "50",
    height: "60",
    viewBox: "0 0 50 60",
    fill: "none",
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { clipPath: "url(#clip0_21_2)", children: [
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          "path",
          {
            fillRule: "evenodd",
            clipRule: "evenodd",
            d: "M0 60H50V48.4758H0V60Z",
            fill: "#DB9600"
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M50 48.6888H0V0H50V48.6888Z", fill: "#54923C" }),
        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
          "path",
          {
            d: "M44.3699 44.1642H33.2241L29.3698 29.7942H32.128C32.6775 29.8458 34.7924 29.0184 34.7882 26.952C34.7809 25.0776 33.0524 25.1172 32.4436 25.092H29.0046L21.5565 44.1642H10.5152L3.06714 24.0042H12.1815L15.7759 34.704L20.0468 18.009H36.3741C40.7877 18.009 44.3699 21.7464 44.3699 26.3562C44.3699 29.4858 42.7194 32.214 40.2792 33.642L44.3699 44.163V44.1642ZM9.64098 56.8764V51.0324C10.1551 50.9404 10.6767 50.8962 11.199 50.9004C11.9907 50.9004 12.5662 51.047 12.9258 51.3402C13.2853 51.6334 13.4655 52.0288 13.4663 52.5264C13.4728 52.8593 13.3663 53.1847 13.164 53.4504C12.9502 53.7238 12.6571 53.9257 12.3242 54.0288C12.7551 54.196 13.0473 54.5974 13.2009 55.233C13.4427 56.2026 13.6021 56.7504 13.6791 56.8764H12.8284C12.7478 56.7384 12.615 56.2696 12.43 55.47C12.3357 55.0544 12.1946 54.76 12.0068 54.5868C11.819 54.4136 11.5547 54.3274 11.2142 54.3282H10.4644V56.8764H9.64098ZM10.4644 51.5964V53.7138H11.2879C11.7011 53.7138 12.0302 53.6138 12.2752 53.4138C12.3949 53.318 12.4903 53.1958 12.554 53.0569C12.6177 52.9181 12.6479 52.7664 12.6422 52.614C12.6422 52.26 12.5243 51.9888 12.2867 51.8028C12.0491 51.6168 11.7069 51.5244 11.2589 51.5244C10.9914 51.5166 10.7239 51.5404 10.462 51.5952L10.4644 51.5964ZM18.1326 54.918H15.0244C15.0364 55.3776 15.1795 55.7296 15.4536 55.974C15.7277 56.2184 16.0834 56.3404 16.5207 56.34C16.9474 56.3488 17.3716 56.2742 17.7693 56.1204L17.9113 56.6916C17.4885 56.8796 16.9897 56.9734 16.4149 56.973C15.7475 56.973 15.216 56.7768 14.8206 56.3844C14.4252 55.992 14.2275 55.4706 14.2275 54.8202C14.2275 54.1698 14.4173 53.6248 14.797 53.1852C15.1767 52.7456 15.6864 52.5256 16.3261 52.5252C16.917 52.5252 17.37 52.7204 17.6852 53.1108C18.0004 53.5012 18.1584 53.9798 18.1592 54.5466C18.1621 54.6701 18.1532 54.7937 18.1326 54.9156V54.918ZM15.0334 54.3294H17.3624C17.3624 53.963 17.2672 53.6676 17.077 53.4432C16.8871 53.2188 16.6151 53.1072 16.2644 53.1072C16.1103 53.1026 15.957 53.1302 15.8144 53.1881C15.6717 53.2459 15.5428 53.3328 15.4361 53.4432C15.2098 53.6906 15.0718 54.0024 15.0334 54.3336V54.3294ZM19.7002 53.163V52.6044H18.7168V56.8764H19.5402V54.9288C19.5174 54.651 19.5592 54.3717 19.6624 54.1128C19.7656 53.854 19.9274 53.6228 20.1348 53.4378L20.4768 52.5252C20.2125 52.5252 19.9463 52.7062 19.7002 53.163ZM23.3234 54.918H20.2157C20.2277 55.3776 20.3707 55.7296 20.6443 55.974C20.9179 56.2184 21.2741 56.3404 21.7114 56.34C22.1381 56.3488 22.5624 56.2742 22.96 56.1204L23.1032 56.6916C22.6793 56.8796 22.1804 56.9734 21.6057 56.973C20.9382 56.973 20.4068 56.7768 20.0113 56.3844C19.6159 55.992 19.4182 55.4706 19.4182 54.8202C19.4182 54.1698 19.608 53.6248 19.9877 53.1852C20.3674 52.7456 20.8771 52.5256 21.5168 52.5252C22.1077 52.5252 22.5607 52.7204 22.8764 53.1108C23.1921 53.5012 23.3496 53.9798 23.3504 54.5466C23.3533 54.6701 23.3444 54.7937 23.3234 54.9156V54.918ZM20.2247 54.3294H22.5531C22.5531 53.963 22.458 53.6676 22.2677 53.4432C22.0775 53.2188 21.8058 53.1072 21.4551 53.1072C21.301 53.1026 21.1478 53.1302 21.0051 53.1881C20.8625 53.2459 20.7335 53.3328 20.6269 53.4432C20.4005 53.6906 20.2625 54.0024 20.2241 54.3336L20.2247 54.3294ZM24.2606 56.8764H23.4372V52.6044H24.2606V56.8764ZM24.2786 51.3696C24.2786 51.2496 24.2306 51.1344 24.1456 51.0492C24.0606 50.964 23.946 50.916 23.8264 50.916C23.7661 50.916 23.7064 50.928 23.6508 50.9513C23.5953 50.9746 23.545 51.0088 23.503 51.0519C23.461 51.095 23.4281 51.1462 23.4064 51.2024C23.3846 51.2586 23.3743 51.3186 23.376 51.379C23.376 51.4397 23.3881 51.4997 23.4116 51.5556C23.4351 51.6115 23.4696 51.6621 23.5129 51.7046C23.5561 51.747 23.6073 51.7807 23.6636 51.8033C23.72 51.8258 23.7803 51.837 23.841 51.837C23.9031 51.8389 23.965 51.8282 24.0226 51.8056C24.0803 51.783 24.1327 51.749 24.1765 51.7057C24.2203 51.6624 24.2549 51.6105 24.2782 51.5531C24.3015 51.4957 24.313 51.434 24.3118 51.372L24.2786 51.3696ZM28.5094 55.8582C28.3474 56.2386 28.0694 56.4282 27.6604 56.4282C27.4072 56.4306 27.1604 56.3514 26.9581 56.2026C26.7526 56.047 26.6005 55.8322 26.5222 55.5876L25.802 56.7648C26.0614 56.8892 26.3428 56.9616 26.6304 56.9772C28.1268 57.0782 28.6454 56.247 29.0502 55.1928L31.0086 49.5684H30.1644L28.8682 53.5644L27.3718 49.5684H26.4662L28.5094 55.8582ZM24.8474 55.2174C24.5738 55.462 24.2177 55.5838 23.779 55.5834C23.5438 55.5834 23.3334 55.524 23.1456 55.3992C22.9578 55.2744 22.8384 55.1 22.779 54.9528C22.779 54.0864 24.8396 54.2322 24.8396 53.3598C24.8396 52.7874 24.3594 52.4022 23.6906 52.4022C23.0218 52.4022 22.5608 52.6722 22.1714 53.1852L22.6006 53.691C22.9042 53.3178 23.2318 53.124 23.6462 53.124C24.0606 53.124 24.2354 53.31 24.2354 53.5308C24.2354 54.105 22.1624 53.7452 22.1624 55.0302C22.1624 55.8024 22.7678 56.3022 23.5718 56.3022C24.0052 56.301 24.4242 56.1482 24.7568 55.8702L24.8474 55.2174ZM28.2626 56.8764V55.4076L27.7082 54.9174L28.7648 53.3838L28.9834 53.1768L29.2844 52.7382H28.3128L27.101 54.5196L26.5958 54.0192V51.0258H25.7724V56.8764H26.5958V55.1016L28.2626 56.8764Z",
            fill: "white"
          }
        )
      ] }),
      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("clipPath", { id: "clip0_21_2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { width: "50", height: "60", fill: "white" }) }) })
    ]
  }
);

// src/assets/icons/sodexo.logo.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var SodexoLogo = () => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { version: "1.0", width: "50", height: "40", viewBox: "0 0 134 45", id: "svg6217", children: [
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("defs", { id: "defs6219" }),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 62.52625,26.30725 L 61.06375,33.611 C 60.42,36.57225 58.63625,38.5485 54.9925,38.5485 C 50.81,38.5485 49.70625,35.95475 50.62375,32.30475 C 51.9225,27.12725 56.14625,25.58475 62.52625,26.30725 M 69.1125,15.86475 L 64.66625,16.1485 L 63.26,23.29975 C 61.56,23.23975 61.025,23.186 59.02625,23.186 C 52.76875,23.186 47.3075,25.816 45.865,31.986 C 44.565,37.5485 47.725,41.866 54.61625,41.866 C 61.675,41.866 64.74625,38.1835 65.85,33.00475 L 69.1125,15.86475 z",
      id: "path5955",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 20.875,26.61887 C 14.355,26.02512 8.74625,26.56637 8.655,28.78012 C 8.51375,32.10387 19.40125,29.20387 19.19125,35.31887 C 18.885,44.30262 3.74625,42.23637 0,41.09262 L 0.68,38.42637 C 7.13875,39.45137 13.9525,39.53637 14.1025,35.97387 C 14.2625,32.18762 3.33,35.59137 3.58625,29.46012 C 3.7775,24.89262 10.61,22.43012 21.79375,24.07262 L 20.875,26.61887 z",
      id: "path5959",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 38.45513,32.73013 C 37.51388,36.48013 34.54013,38.83513 30.99888,38.83513 C 27.29638,38.83513 25.63013,36.68888 26.62263,32.73013 C 27.56513,28.98013 30.57388,26.46263 34.11388,26.46263 C 37.65138,26.46263 39.39638,28.98013 38.45513,32.73013 M 34.68388,23.39263 C 28.20013,23.39263 22.98763,27.14388 21.70638,32.73013 C 20.42138,38.32013 23.91263,42.07013 30.39388,42.07013 C 36.87513,42.07013 42.08888,38.32013 43.37138,32.73013 C 44.65638,27.14388 41.16638,23.39263 34.68388,23.39263",
      id: "path5963",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 109.599,41.97526 L 103.96275,41.97526 C 100.54525,38.76151 94.0065,31.37776 89.19275,23.56401 L 93.329,23.56401 C 97.90025,29.87151 109.599,41.97526 109.599,41.97526",
      id: "path5967",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 115.5055,5.40625 L 118.098,-5.6843419e-14 L 118.838,5.49625 L 124.1255,3.64625 L 120.4305,8.38375 L 124.438,11.48875 L 119.08925,11.9025 L 118.79425,17.6175 L 115.8205,13.39375 L 111.44925,17.42375 L 113.088,11.745 L 107.933,11.04625 L 112.9505,8.1875 L 110.89175,3.29625 L 115.5055,5.40625 z",
      id: "path5971",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 126.4965,32.78676 C 125.54025,36.59551 122.52025,38.98801 118.924,38.98801 C 115.164,38.98801 113.469,36.80801 114.479,32.78676 C 115.43525,28.97801 118.49025,26.42051 122.08525,26.42051 C 125.68275,26.42051 127.454,28.97801 126.4965,32.78676 M 122.66525,23.29926 C 116.0815,23.29926 110.78775,27.11051 109.48275,32.78676 C 108.179,38.46426 111.72525,42.27426 118.309,42.27426 C 124.894,42.27426 130.189,38.46426 131.4915,32.78676 C 132.7965,27.11051 129.25025,23.29926 122.66525,23.29926",
      id: "path5975",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 84.92138,40.40587 C 95.56638,34.49337 104.81263,25.40712 111.37138,17.55212 C 106.65638,32.30962 95.30638,40.25212 84.92138,40.40587",
      id: "path5979",
      style: {
        fill: "#ed1c24",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  ),
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
    "path",
    {
      d: "M 80.708,26.13137 C 82.74675,26.13137 83.85675,26.87137 83.85675,28.28512 C 83.85675,32.03762 76.5405,31.79012 73.31425,31.13262 C 74.44925,28.32387 77.01175,26.13137 80.708,26.13137 M 88.24175,28.08012 C 88.24175,25.35887 86.073,23.35887 81.15175,23.35887 C 73.1705,23.35887 67.98425,28.54012 67.98425,34.95387 C 67.98425,39.09637 71.423,42.53887 77.70425,42.53887 C 82.03175,42.53887 84.92175,40.40637 84.92175,40.40637 C 79.41425,40.99637 72.6505,40.40637 72.6505,34.51387 C 72.6505,34.28012 72.663,34.04637 72.68175,33.81262 C 80.19675,35.37262 88.24175,33.48512 88.24175,28.08012",
      id: "path5983",
      style: {
        fill: "#2b3797",
        fillOpacity: 1,
        fillRule: "nonzero",
        stroke: "none"
      }
    }
  )
] });

// src/assets/icons/elo.logo.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var EloLogo = () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
  "svg",
  {
    xmlns: "http://www.w3.org/2000/svg",
    viewBox: "0 0 1000 380.9",
    style: { width: "100%", height: "100%" },
    children: [
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        "path",
        {
          d: "M156.1 83.4c11.6-3.8 23.7-5.7 35.9-5.7 54.9 0 100.7 38.2 111.1 88.9l77.7-15.5C363.1 64.9 285.3 0 192.1 0c-21.4 0-41.9 3.4-61.1 9.7l25.1 73.7z",
          style: { fillRule: "evenodd", clipRule: "evenodd", fill: "#ffca05" }
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        "path",
        {
          d: "m65.8 333.3 53.2-58.8c-23.8-20.6-38.7-50.6-38.7-84.1s15-63.5 38.7-84L65.8 47.6C25.5 82.6 0 133.6 0 190.5c0 56.8 25.5 107.9 65.8 142.8",
          style: { fillRule: "evenodd", clipRule: "evenodd", fill: "#00a4df" }
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        "path",
        {
          d: "M303.2 214.3c-10.5 50.7-56.3 88.9-111.1 88.9-12.2 0-24.4-1.9-36-5.7l-25.2 73.8c19.2 6.3 39.8 9.7 61.2 9.7 93.2 0 170.9-64.8 188.8-151l-77.7-15.7z",
          style: { fillRule: "evenodd", clipRule: "evenodd", fill: "#ee4123" }
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        "path",
        {
          d: "m601 253-2.3-1.4c-6.4 10.3-16.2 18.7-28.7 24.1-23.7 10.4-45.7 7.7-61.5-6.2l-1.4 2.2h-.1l-26.9 40.5c6.7 4.7 13.9 8.6 21.4 11.8 29.8 12.4 60.2 11.9 90.2-1.3 21.7-9.4 38.7-23.9 50.4-42.1L601 253zm-84.1-99.9c-25.1 10.8-38 34.4-35.3 62.1l106.2-45.9c-18.3-21.5-42-28.6-70.9-16.2zm-70.5 123.4c-3-5-5.7-10.2-8.1-15.6-12.3-28.6-12.8-58.1-2.5-86.5 11.4-31.1 33.1-55 61.2-67.1 35.3-15.3 74.4-12.3 108.2 7.9 21.5 12.4 36.7 31.5 48.3 58.6 1.5 3.5 2.8 7.2 4 10.3l-211.1 92.4zm285-228.9v225.1l34.9 14.2-19.8 46.4-38.5-16c-8.6-3.8-14.5-9.5-19-16-4.3-6.6-7.4-15.7-7.4-27.9V47.6h49.8zm90.3 167.8c0 18.4 7.8 35.9 21.6 48l-35.7 40.1c-25.2-22.4-39.5-54.5-39.4-88.1 0-33.7 14.4-65.7 39.6-88l35.7 40c-13.9 12.1-21.8 29.6-21.8 48zm63.5 63.9c30.7 0 56.3-21.8 62.3-50.9l52.5 10.8c-10.9 53.6-58.2 94-114.8 93.9-12.6 0-25.2-2.1-37.2-6.1l17.1-51c6.3 2.1 13 3.3 20.1 3.3zm.1-181.5c56.6 0 103.9 40.5 114.7 94.2l-52.5 10.7c-5.9-29.7-32-51.1-62.2-51.1-6.8 0-13.7 1.1-20.1 3.3l-16.9-51c11.9-4.1 24.4-6.1 37-6.1z",
          style: { fillRule: "evenodd", clipRule: "evenodd" }
        }
      )
    ]
  }
);

// src/utils/issuers.ts
var ISSUERS_LOGOS = {
  visa: import_si.SiVisa,
  mastercard: import_si.SiMastercard,
  amex: import_fa6.FaCcAmex,
  elo: EloLogo,
  discover: import_si.SiDiscover,
  diners: import_si.SiDinersclub,
  jcb: import_si.SiJcb,
  sodexo: SodexoLogo,
  vr: VrLogo,
  ticket_vr: TicketLogo,
  ticket_va: TicketLogo,
  alelo: AleloLogo,
  Unknown: null
};
var ISSUER_COLORS = {
  visa: "#1A428A",
  mastercard: "#EB001B",
  amex: "#016FD0",
  elo: "#1A428A",
  discover: "#FF6F00",
  diners: "#004B8D",
  jcb: "#009E60",
  sodexo: "#FFB300",
  vr: "#FF6F00",
  ticket_vr: "#FF6F00",
  ticket_va: "#FF6F00",
  alelo: "#FF6F00",
  Unknown: "#80868B"
};
var ISSUER_GRADIENTS = {
  visa: "linear-gradient(135deg, #0f2044 0%, #1a3a6e 40%, #264d8e 100%)",
  mastercard: "linear-gradient(135deg, #1a0a0e 0%, #5c1520 40%, #8b1a2b 100%)",
  amex: "linear-gradient(135deg, #041e3a 0%, #0a3d6b 40%, #106eb5 100%)",
  elo: "linear-gradient(135deg, #0f1b2e 0%, #1a3461 40%, #1f4b8e 100%)",
  discover: "linear-gradient(135deg, #1a1008 0%, #4d2e0f 40%, #8b5418 100%)",
  diners: "linear-gradient(135deg, #051a30 0%, #0b3460 40%, #15508e 100%)",
  jcb: "linear-gradient(135deg, #041a12 0%, #0d3d2a 40%, #157a4e 100%)",
  sodexo: "linear-gradient(135deg, #1a1400 0%, #4d3d00 40%, #8b6d00 100%)",
  vr: "linear-gradient(135deg, #1a1008 0%, #4d2e0f 40%, #8b5418 100%)",
  ticket_vr: "linear-gradient(135deg, #1a1008 0%, #4d2e0f 40%, #8b5418 100%)",
  ticket_va: "linear-gradient(135deg, #1a1008 0%, #4d2e0f 40%, #8b5418 100%)",
  alelo: "linear-gradient(135deg, #1a1008 0%, #4d2e0f 40%, #8b5418 100%)",
  Unknown: "linear-gradient(135deg, #1a1d21 0%, #2d3238 40%, #3d4450 100%)"
};
var ISSUER_SHADOWS = {
  visa: "0 8px 32px rgba(26, 66, 138, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2)",
  mastercard: "0 8px 32px rgba(235, 0, 27, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  amex: "0 8px 32px rgba(1, 111, 208, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2)",
  elo: "0 8px 32px rgba(26, 66, 138, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2)",
  discover: "0 8px 32px rgba(255, 111, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  diners: "0 8px 32px rgba(0, 75, 141, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2)",
  jcb: "0 8px 32px rgba(0, 158, 96, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  sodexo: "0 8px 32px rgba(255, 179, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  vr: "0 8px 32px rgba(255, 111, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  ticket_vr: "0 8px 32px rgba(255, 111, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  ticket_va: "0 8px 32px rgba(255, 111, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  alelo: "0 8px 32px rgba(255, 111, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2)",
  Unknown: "0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15)"
};

// src/components/CardBack.tsx
var import_react = require("react");
var import_hi2 = require("react-icons/hi2");

// src/utils/formatters.ts
var CARD_FORMATS = {
  amex: {
    digitCount: 15,
    groupPattern: (s) => s.replace(/(.{4})(.{6})(.{5})/, "$1 $2 $3"),
    maxLength: 17
  },
  diners: {
    digitCount: 14,
    groupPattern: (s) => s.replace(/(.{4})(.{6})(.{4})/, "$1 $2 $3"),
    maxLength: 16
  }
};
var DEFAULT_FORMAT = {
  digitCount: 16,
  groupPattern: (s) => s.replace(/(.{4})(?=.)/g, "$1 "),
  maxLength: 19
};
var formatCardNumber = (value, issuer) => {
  const cleaned = value.replace(/\D/g, "");
  const format = CARD_FORMATS[issuer] ?? DEFAULT_FORMAT;
  const padded = cleaned.padEnd(format.digitCount, "\u2022");
  const formatted = format.groupPattern(padded).trim();
  return formatted.substring(0, format.maxLength);
};
var formatCardName = (value) => {
  return value.toUpperCase();
};
var formatCardExpiry = (value) => {
  const formatted = value.replace(/\D/g, "").padEnd(4, "\u2022");
  return `${formatted.slice(0, 2)}/${formatted.slice(2, 4)}`;
};
var formatCardCvc = (value) => {
  return value.replace(/\D/g, "").padEnd(3, "\u2022").substring(0, 3);
};

// src/components/CardBack.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var CardBack = ({
  cvc,
  issuer = "Unknown",
  richColors = false,
  cardSizes
}) => {
  const isDark = richColors;
  const containerStyle = (0, import_react.useMemo)(
    () => ({
      position: "absolute",
      width: cardSizes.width,
      height: cardSizes.height,
      maxWidth: "320px",
      maxHeight: "180px",
      backfaceVisibility: "hidden",
      background: isDark ? ISSUER_GRADIENTS[issuer] : "#fff",
      borderRadius: "14px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "flex-start",
      transform: "rotateY(180deg)",
      border: isDark ? "1px solid rgba(255,255,255,0.08)" : "1px solid #e0e0e0",
      fontFamily: "'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace",
      overflow: "hidden"
    }),
    [isDark, issuer, cardSizes]
  );
  const magneticStripeStyle = (0, import_react.useMemo)(
    () => ({
      width: "100%",
      height: "38px",
      marginTop: "18px",
      background: isDark ? "linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.35) 100%)" : "#2a2a2a"
    }),
    [isDark]
  );
  const signatureStripStyle = (0, import_react.useMemo)(
    () => ({
      display: "flex",
      alignItems: "center",
      justifyContent: "flex-end",
      margin: "14px 20px 0",
      padding: "0 12px",
      height: "28px",
      borderRadius: "4px",
      background: isDark ? "rgba(255,255,255,0.08)" : "#f5f5f5"
    }),
    [isDark]
  );
  const cvcStyle = (0, import_react.useMemo)(
    () => ({
      fontSize: "0.9rem",
      fontWeight: 600,
      fontStyle: "italic",
      letterSpacing: "0.1em",
      color: isDark ? "rgba(255,255,255,0.85)" : "#333",
      transition: "color 0.25s ease"
    }),
    [isDark]
  );
  const signalColor = isDark ? "rgba(255,255,255,0.4)" : ISSUER_COLORS[issuer] !== "#80868B" ? ISSUER_COLORS[issuer] : "#999";
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: containerStyle, children: [
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: magneticStripeStyle }),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: signatureStripStyle, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: cvcStyle, children: formatCardCvc(cvc || "") }) }),
    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
      "div",
      {
        style: {
          display: "flex",
          justifyContent: "flex-start",
          alignItems: "flex-end",
          padding: "0 20px 14px",
          flex: 1
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_hi2.HiOutlineSignal, { size: 28, color: signalColor })
      }
    )
  ] });
};
var CardBack_default = (0, import_react.memo)(CardBack);

// src/components/CardFront.tsx
var import_react2 = require("react");
var import_react_intl = require("react-intl");
var import_jsx_runtime7 = require("react/jsx-runtime");
var ChipIcon = ({ premium }) => {
  const fillColor = premium ? "#c9a84c" : "#b0b0b0";
  const highlightColor = premium ? "#e8d48b" : "#d4d4d4";
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "36",
      height: "28",
      viewBox: "0 0 39 29",
      fill: "none",
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("linearGradient", { id: "chipGrad", x1: "0%", y1: "0%", x2: "100%", y2: "100%", children: [
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("stop", { offset: "0%", stopColor: highlightColor }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("stop", { offset: "45%", stopColor: fillColor }),
          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("stop", { offset: "100%", stopColor: highlightColor })
        ] }) }),
        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
          "path",
          {
            d: "M2.96606 0.120117C1.32959 0.120117 0 1.44969 0 3.08615V9.63254V18.6069V25.154C0 26.7905 1.32959 28.1201 2.96606 28.1201H35.2719C36.9083 28.1201 38.2387 26.7905 38.2387 25.154V18.6069V9.63254V3.08615C38.2387 1.44969 36.9083 0.120117 35.2719 0.120117H23.6065H14.6321H2.96606ZM2.96606 0.900498H14.242V6.73735C13.1079 7.22228 12.1955 8.11821 11.7065 9.24235H0.780381V3.08615C0.780381 1.86852 1.74842 0.900498 2.96606 0.900498ZM15.0223 0.900498H23.2163V6.96523C23.2164 7.0457 23.2413 7.1242 23.2877 7.18995C23.3341 7.25571 23.3997 7.30552 23.4755 7.33256C24.6073 7.735 25.5011 8.62588 25.9058 9.75677C25.9065 9.75912 25.9073 9.76146 25.9081 9.7638C25.9454 9.86837 25.9783 9.975 26.0072 10.0831C26.0076 10.0831 26.0083 10.087 26.0087 10.0886C26.0359 10.1911 26.0582 10.2955 26.0773 10.401C26.0789 10.4096 26.0812 10.4182 26.0827 10.4268C26.0982 10.5154 26.1089 10.6052 26.1185 10.6958C26.1212 10.7227 26.1261 10.7488 26.1284 10.7758C26.1379 10.8879 26.1429 11.0017 26.1429 11.1165V17.1233C26.1429 17.2381 26.1379 17.3518 26.1284 17.4639C26.1261 17.4909 26.1213 17.5171 26.1185 17.544C26.1089 17.6345 26.0982 17.7244 26.0827 17.813C26.0811 17.8215 26.0788 17.8301 26.0773 17.8387C26.0582 17.9442 26.0359 18.0487 26.0087 18.1512C26.0083 18.1512 26.0076 18.1551 26.0072 18.1566C25.9783 18.2648 25.9454 18.3714 25.9081 18.476C25.9076 18.4781 25.907 18.4801 25.9065 18.4822C25.502 19.6135 24.6077 20.5046 23.4755 20.9072C23.3997 20.9342 23.3341 20.984 23.2877 21.0498C23.2413 21.1155 23.2164 21.194 23.2164 21.2745V27.3392H15.0224V21.2745C15.0223 21.194 14.9974 21.1155 14.951 21.0498C14.9046 20.984 14.839 20.9342 14.7632 20.9072C13.6314 20.5047 12.7376 19.6138 12.3329 18.483C12.3327 18.483 12.3325 18.483 12.3322 18.4791C12.3316 18.4775 12.3311 18.4759 12.3306 18.4744C12.2933 18.3698 12.2604 18.2632 12.2315 18.155C12.2311 18.155 12.2304 18.1511 12.23 18.1496C12.2028 18.0471 12.1805 17.9426 12.1614 17.8371C12.1598 17.8285 12.1575 17.8199 12.156 17.8114C12.1405 17.7228 12.1298 17.6329 12.1202 17.544C12.1175 17.5171 12.1126 17.4909 12.1103 17.4639C12.1007 17.3518 12.0958 17.2381 12.0958 17.1233V11.1165C12.0958 11.0017 12.1007 10.8879 12.1103 10.7758C12.1126 10.7488 12.1175 10.7227 12.1202 10.6958C12.1298 10.6052 12.1405 10.5154 12.156 10.4268C12.1575 10.4182 12.1598 10.4096 12.1614 10.401C12.1805 10.2955 12.2028 10.1911 12.23 10.0886C12.2304 10.087 12.2311 10.0831 12.2315 10.0831C12.2604 9.975 12.2933 9.86837 12.3306 9.7638C12.3311 9.76146 12.3316 9.75912 12.3322 9.75677C12.7376 8.62588 13.6314 7.735 14.7632 7.33256C14.839 7.30552 14.9046 7.25571 14.951 7.18995C14.9974 7.1242 15.0223 7.0457 15.0223 6.96523V0.900498ZM23.9967 0.900498H35.2719C36.4895 0.900498 37.4583 1.86852 37.4583 3.08615V9.24235H26.5322C26.0432 8.11821 25.1308 7.22228 23.9967 6.73735V0.900498ZM0.780381 10.0227H11.5956C11.5373 10.2832 11.4935 10.5483 11.4663 10.8181H0.780381V10.0227ZM26.6431 10.0227H37.4583V10.8181H26.7724C26.7452 10.5483 26.7014 10.2832 26.6431 10.0227ZM0.780381 11.5985H11.3291C11.3198 11.7701 11.3154 11.9431 11.3154 12.1173V16.1224C11.3154 16.2966 11.3198 16.4696 11.3291 16.6412H0.780381V11.5985ZM26.9096 11.5985H37.4583V16.6412H26.9096C26.9189 16.4696 26.9233 16.2966 26.9233 16.1224V12.1173C26.9233 11.9431 26.9189 11.7701 26.9096 11.5985ZM0.780381 17.4216H11.4663C11.4935 17.6914 11.5373 17.9565 11.5956 18.217H0.780381V17.4216ZM26.6431 17.4216H37.4583V18.217H26.7724C26.7452 17.9565 26.7014 17.6914 26.6431 17.4216ZM0.780381 18.9974H11.7065C12.1955 20.1215 13.1079 21.0174 14.242 21.5023V27.3392H2.96606C1.74842 27.3392 0.780381 26.3712 0.780381 25.154V18.9974ZM26.5322 18.9974H37.4583V25.154C37.4583 26.3712 36.4895 27.3392 35.2719 27.3392H23.9967V21.5023C25.1308 21.0174 26.0432 20.1215 26.5322 18.9974Z",
            fill: "url(#chipGrad)"
          }
        )
      ]
    }
  );
};
var CardFront = ({
  number = "",
  name = "",
  expiry = "",
  focus,
  richColors = false,
  cardSizes
}) => {
  const issuer = (0, import_react2.useMemo)(() => getCardIssuer(number), [number]);
  const isDark = richColors;
  const formattedNumber = (0, import_react2.useMemo)(
    () => formatCardNumber(number, issuer),
    [number, issuer]
  );
  const formattedName = (0, import_react2.useMemo)(() => formatCardName(name), [name]);
  const formattedExpiry = (0, import_react2.useMemo)(() => formatCardExpiry(expiry), [expiry]);
  const baseTextColor = isDark ? "rgba(255,255,255,0.55)" : "#999";
  const focusedTextColor = isDark ? "#fff" : "#1a1a1a";
  const numberColor = focus === "number" ? focusedTextColor : baseTextColor;
  const nameColor = focus === "name" ? focusedTextColor : baseTextColor;
  const expiryColor = focus === "expiry" ? focusedTextColor : baseTextColor;
  const logoColor = isDark ? "rgba(255,255,255,0.8)" : ISSUER_COLORS[issuer];
  const containerStyle = (0, import_react2.useMemo)(
    () => ({
      position: "absolute",
      backfaceVisibility: "hidden",
      background: isDark ? ISSUER_GRADIENTS[issuer] : "#fff",
      borderRadius: "14px",
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      border: isDark ? "1px solid rgba(255,255,255,0.08)" : "1px solid #e0e0e0",
      transition: "all 0.3s ease",
      maxWidth: "320px",
      maxHeight: "180px",
      fontFamily: "'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace",
      width: cardSizes.width,
      height: cardSizes.height,
      overflow: "hidden"
    }),
    [isDark, issuer, cardSizes]
  );
  const topRowStyle = (0, import_react2.useMemo)(
    () => ({
      display: "flex",
      justifyContent: "space-between",
      alignItems: "center",
      padding: "14px 20px 0"
    }),
    []
  );
  const numberStyle = (0, import_react2.useMemo)(
    () => ({
      fontSize: "1.2rem",
      fontWeight: 500,
      color: numberColor,
      textAlign: "start",
      letterSpacing: "0.12em",
      padding: "0 20px",
      transition: "color 0.25s ease, text-shadow 0.25s ease",
      textShadow: isDark && focus === "number" ? "0 0 8px rgba(255,255,255,0.2)" : "none"
    }),
    [numberColor, isDark, focus]
  );
  const bottomSectionStyle = (0, import_react2.useMemo)(
    () => ({
      display: "flex",
      justifyContent: "space-between",
      alignItems: "flex-end",
      padding: "0 20px 14px",
      gap: "12px"
    }),
    []
  );
  const nameStyle = (0, import_react2.useMemo)(
    () => ({
      maxWidth: "65%",
      fontSize: "0.82rem",
      fontWeight: 500,
      color: nameColor,
      textAlign: "start",
      whiteSpace: "nowrap",
      overflow: "hidden",
      textOverflow: "ellipsis",
      textTransform: "uppercase",
      letterSpacing: "0.06em",
      transition: "color 0.25s ease"
    }),
    [nameColor]
  );
  const expiryLabelStyle = (0, import_react2.useMemo)(
    () => ({
      fontSize: "0.45rem",
      color: isDark ? "rgba(255,255,255,0.35)" : "#bbb",
      textTransform: "uppercase",
      letterSpacing: "0.08em"
    }),
    [isDark]
  );
  const expiryValueStyle = (0, import_react2.useMemo)(
    () => ({
      fontSize: "0.95rem",
      color: expiryColor,
      fontWeight: 600,
      letterSpacing: "0.06em",
      transition: "color 0.25s ease"
    }),
    [expiryColor]
  );
  const renderIssuerLogo = (0, import_react2.useMemo)(() => {
    const logo = ISSUERS_LOGOS[issuer];
    if (!logo) {
      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "36px", height: "36px" } });
    }
    if ((0, import_react2.isValidElement)(logo)) {
      return (0, import_react2.cloneElement)(logo);
    }
    if (typeof logo === "function") {
      return (0, import_react2.createElement)(logo, {
        size: 36,
        color: logoColor
      });
    }
    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { width: "36px", height: "36px" } });
  }, [issuer, logoColor]);
  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: containerStyle, children: [
    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: topRowStyle, children: [
      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { display: "flex", alignItems: "center" }, children: renderIssuerLogo }),
      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChipIcon, { premium: isDark })
    ] }),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: numberStyle, children: formattedNumber }),
    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: bottomSectionStyle, children: [
      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: nameStyle, children: formattedName || /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
        import_react_intl.FormattedMessage,
        {
          id: "namePlaceholder",
          defaultMessage: "YOUR NAME HERE"
        }
      ) }),
      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
        "div",
        {
          style: {
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-end",
            flexShrink: 0
          },
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: expiryLabelStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_intl.FormattedMessage, { id: "validThru", defaultMessage: "VALID THRU" }) }),
            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { style: expiryValueStyle, children: formattedExpiry })
          ]
        }
      )
    ] })
  ] });
};
var CardFront_default = (0, import_react2.memo)(CardFront);

// src/components/CreditCard.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var CreditCard = ({
  number,
  name,
  expiry,
  cvc,
  focus,
  locale = "en",
  richColors = false,
  cardSizes = {
    width: "320px",
    height: "180px",
    maxWidth: "100%"
  }
}) => {
  const issuer = (0, import_react3.useMemo)(() => getCardIssuer(number), [number]);
  const containerStyle = (0, import_react3.useMemo)(
    () => ({
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      width: "100%",
      height: "100%",
      perspective: "1000px",
      perspectiveOrigin: "center"
    }),
    []
  );
  const cardStyle = (0, import_react3.useMemo)(
    () => ({
      position: "relative",
      transformStyle: "preserve-3d",
      transition: "transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1)",
      width: cardSizes.width,
      height: cardSizes.height,
      maxWidth: cardSizes.maxWidth,
      maxHeight: cardSizes.maxHeight,
      transform: focus === "cvc" ? "rotateY(180deg)" : "rotateY(0deg)",
      boxShadow: richColors ? ISSUER_SHADOWS[issuer] : "0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04)",
      borderRadius: "14px"
    }),
    [focus, cardSizes, richColors, issuer]
  );
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: containerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: cardStyle, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_intl2.IntlProvider, { locale, messages: intl_default[locale], children: [
    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      CardFront_default,
      {
        number,
        name,
        expiry,
        focus,
        richColors,
        cardSizes
      }
    ),
    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
      CardBack_default,
      {
        cvc,
        issuer,
        richColors,
        cardSizes
      }
    )
  ] }) }) });
};
var CreditCard_default = (0, import_react3.memo)(CreditCard);

// src/types/issuers.ts
var ISSUERS = [
  "visa",
  "mastercard",
  "amex",
  "diners",
  "elo",
  "discover",
  "jcb",
  "sodexo",
  "vr",
  "ticket_vr",
  "ticket_va",
  "alelo",
  "Unknown"
];
var FOCUSED_FIELDS = ["number", "name", "expiry", "cvc", ""];
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  CreditCard,
  FOCUSED_FIELDS,
  ISSUERS,
  formatCardNumber,
  getCardIssuer
});