react-credit-cards-library
Version:
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.
674 lines (659 loc) • 38.8 kB
JavaScript
// src/components/CreditCard.tsx
import React8, { useMemo as useMemo3 } from "react";
import { IntlProvider } from "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 = {
sodexo: /^(606071|603389)/,
vr: /^(637036|627416)/,
ticket_vr: /^603342/,
ticket_va: /^602651/,
alelo: /^(5067|5090|5041|4312|6362|6363)/,
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 sanitizedCardNumber = cardNumber.replace(/[^\d]/g, "");
for (const [issuer, pattern] of Object.entries(CARD_ISSUERS)) {
if (pattern.test(sanitizedCardNumber)) {
return issuer;
}
}
return "Unknown";
}
// src/components/CardBack.tsx
import React6, { useMemo } from "react";
import { HiOutlineSignal } from "react-icons/hi2";
// src/utils/formatters.ts
var formatCardNumber = (value, issuer) => {
const cleaned = value.replace(/\D+/g, "");
let formatted = "";
let maxLength = 19;
switch (issuer.toLowerCase()) {
case "jcb":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
break;
case "amex":
formatted = cleaned.padEnd(15, "\u2022").replace(/(\d{4})(\d{6})(\d{5})/, "$1 $2 $3").trim();
maxLength = 17;
break;
case "diners":
formatted = cleaned.padEnd(14, "\u2022").replace(/(\d{4})(\d{6})(\d{4})/, "$1 $2 $3").trim();
maxLength = 16;
break;
case "discover":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
case "sodexo":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
case "vr":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
case "ticket_vr":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
case "ticket_va":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
case "alelo":
formatted = cleaned.padEnd(16, "\u2022").replace(/(\d{4})(?=\d)/g, "$1 ").trim();
maxLength = 19;
break;
default:
formatted = cleaned.padEnd(16, "\u2022").replace(/(.{4})(?=.)/g, "$1 ");
break;
}
return formatted.substring(0, 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").replace(/(\d{3})/, "$1").trim().substring(0, 3);
};
// src/utils/issuers.ts
import { FaCcAmex } from "react-icons/fa6";
import {
SiDinersclub,
SiDiscover,
SiJcb,
SiMastercard,
SiVisa
} from "react-icons/si";
// src/assets/icons/alelo.logo.tsx
import React from "react";
var AleloLogo = () => /* @__PURE__ */ React.createElement("svg", {
width: "62",
height: "40",
viewBox: "0 0 62 40",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
"data-testid": "rango-brand-svg"
}, /* @__PURE__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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__ */ React.createElement("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
import React2 from "react";
var TicketLogo = () => /* @__PURE__ */ React2.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "60",
height: "59",
viewBox: "0 0 60 59",
fill: "none"
}, /* @__PURE__ */ React2.createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "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
import React3 from "react";
var VrLogo = () => /* @__PURE__ */ React3.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "50",
height: "60",
viewBox: "0 0 50 60",
fill: "none"
}, /* @__PURE__ */ React3.createElement("g", {
"clip-path": "url(#clip0_21_2)"
}, /* @__PURE__ */ React3.createElement("path", {
"fill-rule": "evenodd",
"clip-rule": "evenodd",
d: "M0 60H50V48.4758H0V60Z",
fill: "#DB9600"
}), /* @__PURE__ */ React3.createElement("path", {
d: "M50 48.6888H0V0H50V48.6888Z",
fill: "#54923C"
}), /* @__PURE__ */ React3.createElement("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.2176 53.6668 15.0834 53.9622 15.0334 54.3294ZM20.0456 56.8776H19.2215V53.247H18.6217V52.623H19.2263V52.4298C19.2263 51.823 19.3662 51.3532 19.6459 51.0204C19.9257 50.6876 20.3142 50.5216 20.8116 50.5224C21.0449 50.5192 21.2765 50.5612 21.4936 50.646L21.3963 51.2784C21.2335 51.2112 21.0585 51.1783 20.8823 51.1818C20.3213 51.1818 20.0409 51.589 20.0413 52.4034V52.623H21.0952V53.247H20.0456V56.8764V56.8776ZM25.2959 54.918H22.1889C22.201 55.3776 22.3443 55.7296 22.6188 55.974C22.8933 56.2184 23.2486 56.3404 23.6847 56.34C24.1113 56.3487 24.5356 56.2741 24.9332 56.1204L25.0747 56.6916C24.6526 56.8796 24.1539 56.9734 23.5783 56.973C22.9108 56.973 22.3795 56.7768 21.9845 56.3844C21.5895 55.992 21.3916 55.4706 21.3908 54.8202C21.3908 54.1698 21.5809 53.6248 21.961 53.1852C22.3411 52.7456 22.8505 52.5256 23.4894 52.5252C24.0799 52.5252 24.5331 52.7204 24.8491 53.1108C25.1651 53.5012 25.3229 53.9798 25.3225 54.5466C25.3257 54.6701 25.3168 54.7937 25.2959 54.9156V54.918ZM22.1968 54.3294H24.5257C24.5257 53.963 24.4308 53.6676 24.2409 53.4432C24.0511 53.2188 23.78 53.1068 23.4277 53.1072C23.2737 53.1026 23.1205 53.1301 22.9779 53.188C22.8354 53.2459 22.7066 53.3328 22.6 53.4432C22.3812 53.6668 22.2467 53.9622 22.1968 54.3294ZM27.1376 56.8776H26.3147V52.623H27.1376V56.8764V56.8776ZM27.253 51.3324C27.2551 51.4018 27.2427 51.4709 27.2166 51.5353C27.1905 51.5997 27.1513 51.6581 27.1014 51.7068C27.0515 51.7554 26.992 51.7933 26.9267 51.8181C26.8613 51.8429 26.7915 51.854 26.7216 51.8508C26.6518 51.8532 26.5823 51.8411 26.5174 51.8154C26.4526 51.7897 26.3938 51.7509 26.3449 51.7014C26.297 51.6526 26.2595 51.5949 26.2344 51.5315C26.2094 51.4681 26.1974 51.4004 26.1992 51.3324C26.1982 51.2655 26.2109 51.1991 26.2364 51.1373C26.262 51.0754 26.2999 51.0193 26.348 50.9724C26.3983 50.9233 26.4582 50.885 26.524 50.8598C26.5899 50.8347 26.6602 50.8231 26.7307 50.826C26.7999 50.8237 26.8689 50.8355 26.9333 50.8607C26.9978 50.8859 27.0564 50.9239 27.1055 50.9724C27.1535 51.0193 27.1913 51.0754 27.2166 51.1373C27.242 51.1992 27.2544 51.2656 27.253 51.3324ZM31.4943 56.1042L31.6449 56.7192C31.2651 56.8829 30.8552 56.9667 30.4411 56.9652L30.2301 57.3072C30.3993 57.3248 30.5578 57.3979 30.6805 57.5148C30.7347 57.5662 30.7778 57.628 30.807 57.6965C30.8362 57.7651 30.851 57.8388 30.8504 57.9132C30.8557 58.0158 30.8355 58.1181 30.7914 58.211C30.7473 58.304 30.6808 58.3847 30.5977 58.446C30.4296 58.5708 30.1979 58.6334 29.9024 58.6338C29.6879 58.6394 29.4761 58.5845 29.2918 58.4754L29.4242 58.089C29.568 58.1765 29.7337 58.2222 29.9024 58.221C30.1624 58.221 30.2924 58.13 30.2924 57.948C30.2924 57.748 30.0592 57.628 29.5929 57.588L29.9629 56.94C29.3897 56.864 28.9409 56.6296 28.6164 56.2368C28.2919 55.844 28.1297 55.364 28.1297 54.7968C28.1297 54.1316 28.3496 53.5872 28.7893 53.1636C29.2291 52.74 29.8061 52.5286 30.5203 52.5294C30.9085 52.5215 31.2934 52.6026 31.6449 52.7664L31.4683 53.3904C31.1742 53.2449 30.8489 53.1726 30.5203 53.1798C30.0511 53.1798 29.6759 53.3266 29.3945 53.6202C29.1132 53.9138 28.9721 54.2912 28.9713 54.7524C28.9713 55.2208 29.1146 55.5988 29.4012 55.8864C29.6878 56.174 30.0552 56.3176 30.5034 56.3172C30.8453 56.3178 31.1834 56.2458 31.4949 56.106L31.4943 56.1042ZM35.7096 54.3042V55.86C35.7036 56.2014 35.7273 56.5426 35.7804 56.88H35.0276L34.9303 56.3346C34.6078 56.7626 34.1562 56.9766 33.5754 56.9766C33.1683 56.9766 32.8422 56.8566 32.5971 56.6166C32.4789 56.5059 32.3852 56.372 32.322 56.2235C32.2587 56.075 32.2272 55.915 32.2295 55.7538C32.2295 55.2386 32.4552 54.8446 32.9067 54.5718C33.3581 54.299 34.0177 54.162 34.8855 54.1608V54.0816C34.8855 53.7816 34.8027 53.5416 34.6358 53.376C34.469 53.2104 34.2211 53.124 33.8934 53.124C33.4802 53.1172 33.0741 53.2303 32.7247 53.4492L32.5391 52.9128C32.9518 52.6556 33.4446 52.5268 34.0173 52.5264C34.5756 52.5264 34.9974 52.6786 35.2828 52.983C35.5681 53.2874 35.7092 53.7274 35.706 54.303L35.7096 54.3042ZM34.9037 55.4262V54.723C34.2132 54.723 33.7336 54.805 33.4647 54.969C33.1959 55.133 33.0617 55.3586 33.0621 55.6458C33.0621 55.8714 33.1298 56.0472 33.264 56.175C33.3357 56.2401 33.4197 56.2905 33.5111 56.3233C33.6025 56.3562 33.6995 56.3708 33.7967 56.3664C34.0863 56.3739 34.3677 56.2706 34.5826 56.0778C34.7946 55.8866 34.9009 55.6694 34.9013 55.4262H34.9037ZM33.3982 51.9378H32.9823C32.9823 51.6578 33.0334 51.4378 33.1358 51.2778C33.1793 51.203 33.2423 51.1412 33.3181 51.099C33.394 51.0568 33.4799 51.0356 33.5669 51.0378C33.6991 51.0378 33.891 51.1052 34.1425 51.24C34.3196 51.3396 34.4551 51.3888 34.5494 51.3888C34.6884 51.3888 34.7652 51.2634 34.7797 51.0114H35.1878C35.1878 51.5914 34.9863 51.8814 34.5832 51.8814C34.4385 51.8814 34.2525 51.817 34.0252 51.6882C33.848 51.5886 33.7156 51.5388 33.6268 51.5388C33.4937 51.5388 33.4176 51.6702 33.3964 51.9342L33.3982 51.9378ZM41.0404 54.7056C41.05 55.1235 40.9509 55.5368 40.7526 55.9056C40.5678 56.2418 40.2875 56.5168 39.9467 56.6964C39.6029 56.8809 39.2177 56.9762 38.8269 56.9736C38.201 56.9736 37.6842 56.7704 37.2767 56.364C36.8692 55.9576 36.6657 55.4314 36.6661 54.7854C36.6661 54.0966 36.8767 53.5478 37.2979 53.139C37.7191 52.7302 38.2493 52.5262 38.8886 52.527C39.5259 52.527 40.0438 52.7296 40.4424 53.1348C40.8411 53.54 41.0404 54.0638 41.0404 54.7062V54.7056ZM37.5077 54.7584C37.5077 55.224 37.6331 55.6082 37.8838 55.911C37.9946 56.0543 38.1375 56.1701 38.3012 56.2491C38.4649 56.3282 38.6449 56.3683 38.8269 56.3664C39.0126 56.3686 39.1963 56.3286 39.364 56.2495C39.5317 56.1703 39.6789 56.0541 39.7943 55.9098C40.0523 55.605 40.1811 55.2124 40.1806 54.732C40.1806 54.2896 40.0621 53.9122 39.8251 53.5998C39.5881 53.2874 39.2641 53.1316 38.8529 53.1324C38.4366 53.1324 38.1083 53.2868 37.868 53.5956C37.6278 53.9044 37.5069 54.292 37.5053 54.7584H37.5077Z",
fill: "white"
})), /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("clipPath", {
id: "clip0_21_2"
}, /* @__PURE__ */ React3.createElement("rect", {
width: "50",
height: "60",
fill: "white"
}))));
// src/assets/icons/sodexo.logo.tsx
import React4 from "react";
var SodexoLogo = () => /* @__PURE__ */ React4.createElement("svg", {
version: "1.0",
width: "50",
height: "40",
viewBox: "0 0 134 45",
id: "svg6217"
}, /* @__PURE__ */ React4.createElement("defs", {
id: "defs6219"
}), /* @__PURE__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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__ */ React4.createElement("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
import React5 from "react";
var EloLogo = () => /* @__PURE__ */ React5.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 1000 380.9",
style: { enableBackground: "new 0 0 1000 380.9" },
"xml:space": "preserve"
}, /* @__PURE__ */ React5.createElement("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__ */ React5.createElement("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__ */ React5.createElement("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__ */ React5.createElement("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: SiVisa,
mastercard: SiMastercard,
amex: FaCcAmex,
elo: EloLogo,
discover: SiDiscover,
diners: SiDinersclub,
jcb: SiJcb,
sodexo: SodexoLogo,
vr: VrLogo,
ticket_vr: TicketLogo,
ticket_va: TicketLogo,
alelo: AleloLogo,
Unknown: "../assets/icons/unknown.svg"
};
var ISSUER_COLORS = {
visa: "#1A428A",
mastercard: "#EB001B",
amex: "#016FD0",
elo: "#1A428A",
discover: "#FF5F00",
diners: "#004B8D",
jcb: "#009E60",
sodexo: "#FFB300",
vr: "#FF6F00",
ticket_vr: "#FF6F00",
ticket_va: "#FF6F00",
alelo: "#FF6F00",
Unknown: "#80868B"
};
var ISSUER_BG_COLORS = {
visa: "#1A428A0f",
mastercard: "#EB001B0f",
amex: "#016FD00f",
elo: "#1A428A0f",
discover: "#FF5F000f",
diners: "#004B8D0f",
jcb: "#009E600f",
sodexo: "#FFB3000f",
vr: "#FF6F000f",
ticket_vr: "#FF6F000f",
ticket_va: "#FF6F000f",
alelo: "#FF6F000f",
Unknown: "#FFFFFF"
};
// src/components/CardBack.tsx
var getDynamicColor = (baseColor, issuer, richColors) => {
if (richColors && issuer !== "Unknown") {
return ISSUER_COLORS[issuer];
}
return baseColor;
};
var CardBack = ({
cvc,
issuer = "Unknown",
richColors = false,
cardSizes
}) => {
const borderColor = getDynamicColor("#e6e6e6", issuer, richColors);
const containerStyle = useMemo(
() => ({
position: "absolute",
width: cardSizes.width,
height: cardSizes.height,
maxWidth: "320px",
maxHeight: "180px",
backfaceVisibility: "hidden",
backgroundColor: richColors ? ISSUER_BG_COLORS[issuer] : "#FFF",
color: "#000",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
transform: "rotateY(180deg)",
border: "2px solid",
borderColor,
fontFamily: "monospace",
overflow: "hidden"
}),
[richColors, issuer, cardSizes, borderColor]
);
const magneticStripeStyle = useMemo(
() => ({
borderTop: "2px solid",
borderBottom: "2px solid",
borderColor: richColors ? ISSUER_COLORS[issuer] : "#e6e6e6",
height: "40px",
width: "100%",
marginTop: "20px"
}),
[issuer, richColors]
);
const cvcSectionStyle = useMemo(
() => ({
width: "100%",
backgroundColor: "#FFF",
marginTop: "20px",
textAlign: "end",
color: "#000",
fontStyle: "italic",
fontWeight: "semibold",
fontSize: "1rem",
transition: "all 0.2s ease-in-out"
}),
[]
);
return /* @__PURE__ */ React6.createElement("div", {
style: containerStyle
}, /* @__PURE__ */ React6.createElement("div", {
style: magneticStripeStyle
}), /* @__PURE__ */ React6.createElement("div", {
style: cvcSectionStyle
}, /* @__PURE__ */ React6.createElement("span", {
style: {
padding: "10px 15px"
}
}, formatCardCvc(cvc || ""))), /* @__PURE__ */ React6.createElement("div", {
style: {
display: "flex",
justifyContent: "flex-start",
alignItems: "flex-end",
padding: "10px 15px",
flex: 1
}
}, /* @__PURE__ */ React6.createElement(HiOutlineSignal, {
size: 32,
color: getDynamicColor("#808080", issuer, richColors)
})));
};
var CardBack_default = React6.memo(CardBack);
// src/components/CardFront.tsx
import React7, { useMemo as useMemo2 } from "react";
import { FormattedMessage } from "react-intl";
var ChipIcon = ({ color }) => /* @__PURE__ */ React7.createElement("svg", {
xmlns: "",
width: "39",
height: "29",
viewBox: "0 0 39 29",
fill: "none"
}, /* @__PURE__ */ React7.createElement("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.5424C12.1175 17.5154 12.1126 17.4894 12.1103 17.4623C12.1008 17.3502 12.0958 17.2365 12.0958 17.1217V11.1149C12.0958 11.0001 12.1008 10.8863 12.1103 10.7742C12.1126 10.7473 12.1174 10.7211 12.1202 10.6942C12.1298 10.6036 12.1405 10.5138 12.156 10.4252C12.1576 10.4166 12.1599 10.408 12.1614 10.3994C12.1805 10.2939 12.2028 10.1895 12.23 10.087C12.2304 10.087 12.2311 10.0831 12.2315 10.0815C12.2604 9.97341 12.2933 9.86677 12.3306 9.7622C12.3311 9.76012 12.3317 9.75803 12.3322 9.75595C12.7367 8.62463 13.631 7.73356 14.7632 7.331C14.839 7.30396 14.9046 7.25415 14.951 7.18839C14.9974 7.12264 15.0223 7.04414 15.0223 6.96367V0.898939V0.900498ZM23.9967 0.900498H35.2719C36.4895 0.900498 37.4583 1.86852 37.4583 3.08615V9.24235H26.5322C26.0432 8.11821 25.1307 7.22228 23.9967 6.73735V0.900498ZM0.780381 10.0227H11.4436C11.3603 10.3731 11.3155 10.7388 11.3155 11.1163V17.1231C11.3155 17.5007 11.3603 17.8664 11.4436 18.2167H0.780381V10.0227ZM26.7951 10.0227H37.4583V18.2167H26.7951C26.8784 17.8664 26.9232 17.5007 26.9232 17.1231V11.1163C26.9232 10.7388 26.8784 10.3731 26.7951 10.0227ZM0.780381 18.9971H11.7065C12.1955 20.1213 13.1079 21.0171 14.242 21.5021V27.3397H2.96606C1.74842 27.3397 0.780381 26.3717 0.780381 25.154V18.9971ZM26.5322 18.9971H37.4583V25.154C37.4583 26.3717 36.4895 27.3397 35.2719 27.3397H23.9967V21.5021C25.1307 21.0171 26.0432 20.1213 26.5322 18.9971Z",
fill: color
}));
var getTextColor = (isFocused, issuer, richColors) => {
if (isFocused) {
return richColors && issuer !== "Unknown" ? ISSUER_COLORS[issuer] : "#000";
}
return "#808080";
};
var CardFront = ({
number = "",
name = "",
expiry = "",
focus,
richColors = false,
cardSizes
}) => {
const issuer = useMemo2(() => getCardIssuer(number), [number]);
const formattedNumber = useMemo2(
() => formatCardNumber(number, issuer),
[number, issuer]
);
const formattedName = useMemo2(() => formatCardName(name), [name]);
const formattedExpiry = useMemo2(() => formatCardExpiry(expiry), [expiry]);
const numberColor = getTextColor(focus === "number", issuer, richColors);
const nameColor = getTextColor(focus === "name", issuer, richColors);
const expiryColor = getTextColor(focus === "expiry", issuer, richColors);
const logoAndChipColor = richColors ? ISSUER_COLORS[issuer] : "#808080";
const containerStyle = useMemo2(
() => ({
position: "absolute",
backfaceVisibility: "hidden",
backgroundColor: richColors ? ISSUER_BG_COLORS[issuer] : "#FFF",
color: "#000",
borderRadius: "12px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
border: "2px solid",
borderColor: richColors ? ISSUER_COLORS[issuer] : "#e6e6e6",
transition: "all 0.2s ease-in-out",
maxWidth: "320px",
maxHeight: "180px",
fontFamily: "monospace",
width: cardSizes.width,
height: cardSizes.height
}),
[richColors, issuer, cardSizes]
);
const renderIssuerLogo = useMemo2(() => {
if (issuer === "Unknown") {
return /* @__PURE__ */ React7.createElement("div", {
style: { width: "40px", height: "40px" }
});
}
if (typeof ISSUERS_LOGOS[issuer] === "string") {
return /* @__PURE__ */ React7.createElement("img", {
src: ISSUERS_LOGOS[issuer],
alt: issuer,
style: { width: "40px", height: "40px", color: logoAndChipColor }
});
}
const logo = ISSUERS_LOGOS[issuer];
if (React7.isValidElement(logo)) {
return React7.cloneElement(logo);
}
if (typeof logo === "function") {
return React7.createElement(logo, {
size: 40,
color: logoAndChipColor
});
}
return /* @__PURE__ */ React7.createElement("div", {
style: { width: "40px", height: "40px" }
});
}, [issuer, logoAndChipColor]);
return /* @__PURE__ */ React7.createElement("div", {
style: containerStyle
}, /* @__PURE__ */ React7.createElement("div", {
style: {
width: "100%",
display: "flex",
justifyContent: "flex-start",
gap: "5px",
paddingTop: "10px",
paddingLeft: "20px",
maxWidth: "40px"
}
}, renderIssuerLogo), /* @__PURE__ */ React7.createElement("div", {
style: {
display: "flex",
justifyContent: "flex-end",
padding: "0 20px"
}
}, /* @__PURE__ */ React7.createElement(ChipIcon, {
color: logoAndChipColor
})), /* @__PURE__ */ React7.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
gap: "4px",
padding: "0 20px"
}
}, /* @__PURE__ */ React7.createElement("div", {
style: {
fontSize: "1.3rem",
color: numberColor,
textAlign: "start",
transition: "all 0.2s ease-in-out"
}
}, formattedNumber), /* @__PURE__ */ React7.createElement("div", {
style: {
position: "relative",
display: "flex",
justifyContent: "space-between",
alignItems: "flex-end",
overflow: "hidden",
maxWidth: "100%",
gap: "12px",
paddingBottom: "10px"
}
}, /* @__PURE__ */ React7.createElement("div", {
style: {
maxWidth: "70%",
fontSize: "1rem",
color: nameColor,
textAlign: "start",
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
transition: "all 0.2s ease-in-out"
}
}, formattedName || /* @__PURE__ */ React7.createElement(FormattedMessage, {
id: "namePlaceholder",
defaultMessage: "YOUR NAME HERE"
})), /* @__PURE__ */ React7.createElement("div", {
style: {
display: "flex",
flexDirection: "column",
alignItems: "flex-end"
}
}, /* @__PURE__ */ React7.createElement("span", {
style: { fontSize: "0.6rem", color: expiryColor }
}, /* @__PURE__ */ React7.createElement(FormattedMessage, {
id: "validThru",
defaultMessage: "VALID THRU"
})), /* @__PURE__ */ React7.createElement("span", {
style: {
fontSize: "1.1rem",
color: expiryColor,
fontWeight: "semibold",
transition: "all 0.2s ease-in-out"
}
}, formattedExpiry)))));
};
var CardFront_default = React7.memo(CardFront);
// src/components/CreditCard.tsx
var CreditCard = ({
number,
name,
expiry,
cvc,
focus,
locale = "en",
richColors = false,
cardSizes = {
width: "320px",
height: "180px",
maxWidth: "100%"
}
}) => {
const issuer = useMemo3(() => getCardIssuer(number), [number]);
const containerStyle = useMemo3(
() => ({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100%",
perspective: "1000px",
perspectiveOrigin: "center"
}),
[]
);
const cardStyle = useMemo3(
() => ({
position: "relative",
transformStyle: "preserve-3d",
transition: "transform 0.6s",
width: cardSizes.width,
height: cardSizes.height,
maxWidth: cardSizes.maxWidth,
maxHeight: cardSizes.maxHeight,
transform: focus === "cvc" ? "rotateY(180deg)" : "rotateY(0deg)"
}),
[focus, cardSizes]
);
return /* @__PURE__ */ React8.createElement("div", {
style: containerStyle
}, /* @__PURE__ */ React8.createElement("div", {
style: cardStyle
}, /* @__PURE__ */ React8.createElement(IntlProvider, {
locale,
messages: intl_default[locale]
}, /* @__PURE__ */ React8.createElement(CardFront_default, {
number,
name,
expiry,
focus,
richColors,
cardSizes
}), /* @__PURE__ */ React8.createElement(CardBack_default, {
cvc,
issuer,
richColors,
cardSizes
}))));
};
var CreditCard_default = React8.memo(CreditCard);
export {
CreditCard_default as CreditCard,
formatCardNumber,
getCardIssuer
};