@learncard/react 2.3.18 → 2.3.21

package/dist/cjs/index.js

@@ -6,14 +6,14 @@ var Button = require('./Button-a7af702b.js');
 var CircleIcon = require('./CircleIcon-c71f0a51.js');
 var FlippyCard = require('./FlippyCard-33e03a9e.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-ecb49e43.js');
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-7d383319.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-d5aa0f4e.js');
 var CircleSpinner = require('./CircleSpinner-093cce04.js');
 var MiniVCThumbnail = require('./MiniVCThumbnail-ea29644e.js');
 var Notification = require('./Notification-92b06ed9.js');
 var QRCodeCard = require('./QRCodeCard-9f777402.js');
 var RoundedSquare = require('./RoundedSquare-008821b3.js');
 var SmallAchievementCard = require('./SmallAchievementCard-dc95ef2b.js');
-var VCCard = require('./VCCard-ef452696.js');
+var VCCard = require('./VCCard-55d1b98a.js');
 var VCDisplayBackFace = require('./VCDisplayBackFace-fb1b9350.js');
 var VCDisplayCard = require('./VCDisplayCard-e58bd47e.js');
 var VCThumbnail = require('./VCThumbnail-b45b8244.js');

package/dist/cjs/index15.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VCCard = require('./VCCard-ef452696.js');
+var VCCard = require('./VCCard-55d1b98a.js');
 require('react');
 require('stream');
 require('http');

package/dist/cjs/index5.js

@@ -6,14 +6,14 @@ var Button = require('./Button-a7af702b.js');
 var CircleIcon = require('./CircleIcon-c71f0a51.js');
 var FlippyCard = require('./FlippyCard-33e03a9e.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-ecb49e43.js');
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-7d383319.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-d5aa0f4e.js');
 var CircleSpinner = require('./CircleSpinner-093cce04.js');
 var MiniVCThumbnail = require('./MiniVCThumbnail-ea29644e.js');
 var Notification = require('./Notification-92b06ed9.js');
 var QRCodeCard = require('./QRCodeCard-9f777402.js');
 var RoundedSquare = require('./RoundedSquare-008821b3.js');
 var SmallAchievementCard = require('./SmallAchievementCard-dc95ef2b.js');
-var VCCard = require('./VCCard-ef452696.js');
+var VCCard = require('./VCCard-55d1b98a.js');
 var VCDisplayBackFace = require('./VCDisplayBackFace-fb1b9350.js');
 var VCDisplayCard = require('./VCDisplayCard-e58bd47e.js');
 var VCThumbnail = require('./VCThumbnail-b45b8244.js');

package/dist/cjs/index7.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-7d383319.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-d5aa0f4e.js');
 require('react');
 require('./index-82de573c.js');
 

package/dist/esm/{LearnCardCreditCardFrontFace-269b2847.js → LearnCardCreditCardFrontFace-138a40f5.js}

@@ -7,6 +7,7 @@ var MasterCardLogo = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0i
 
 const LearnCardCreditCardFrontFace = ({
   userImage,
+  userImageComponent = null,
   qrCodeValue,
   className,
   showActionButton = false,
@@ -15,6 +16,19 @@ const LearnCardCreditCardFrontFace = ({
   }
 }) => {
   var _a, _b;
+  let userImageEl = null;
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React.createElement("div", {
+      className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4"
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "w-full h-full absolute rounded-full object-cover border-solid border-2 border-white",
+      src: userImage,
+      alt: "user image",
+      "data-testid": "credit-card-frontface-userImg"
+    }));
+  } else if (!userImage && userImageComponent) {
+    userImageEl = userImageComponent;
+  }
   return /* @__PURE__ */ React.createElement("div", {
     className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -37,14 +51,7 @@ const LearnCardCreditCardFrontFace = ({
     src: (_a = CardChip) != null ? _a : "",
     alt: "card chip",
     className: "h-[30px] w-[42px]"
-  })), userImage && /* @__PURE__ */ React.createElement("div", {
-    className: "inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4"
-  }, /* @__PURE__ */ React.createElement("img", {
-    className: "w-full h-full absolute rounded-full object-cover border-solid border-2 border-white",
-    src: userImage,
-    alt: "user image",
-    "data-testid": "credit-card-frontface-userImg"
-  }))), qrCodeValue && /* @__PURE__ */ React.createElement("div", {
+  })), userImageEl), qrCodeValue && /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "h-auto relative qr-code-container"
@@ -61,4 +68,4 @@ const LearnCardCreditCardFrontFace = ({
 };
 
 export { LearnCardCreditCardFrontFace as L };
-//# sourceMappingURL=LearnCardCreditCardFrontFace-269b2847.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-138a40f5.js.map

package/dist/{cjs/LearnCardCreditCardFrontFace-7d383319.js.map → esm/LearnCardCreditCardFrontFace-138a40f5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-7d383319.js","sources":["../../src/assets/images/card-chip.svg","../../src/assets/images/master-card-logo.svg","../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MiAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS4xNyIgeT0iMC41IiB3aWR0aD0iMzkuMzc4NCIgaGVpZ2h0PSIyOC4wNzgiIHJ4PSI0LjUiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl81NDdfMTQ0NikiIGZpbGwtb3BhY2l0eT0iMC4wMyIvPgo8cmVjdCB4PSIxLjE3IiB5PSIwLjUiIHdpZHRoPSIzOS4zNzg0IiBoZWlnaHQ9IjI4LjA3OCIgcng9IjQuNSIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CjxyZWN0IHg9IjEuMTciIHk9IjAuNSIgd2lkdGg9IjM5LjM3ODQiIGhlaWdodD0iMjguMDc4IiByeD0iNC41IiBzdHJva2U9InVybCgjcGFpbnQxX2xpbmVhcl81NDdfMTQ0NikiLz4KPHJlY3QgeD0iMS4xNyIgeT0iMC41IiB3aWR0aD0iMzkuMzc4NCIgaGVpZ2h0PSIyOC4wNzgiIHJ4PSI0LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTAuNjIzNDQ1IDEwLjA2NDFIMTQuMzU0MUMxNS4yMjM1IDcuMzc2MjIgMTcuNjY3OSAxLjgzNzc3IDIwLjQ5MDcgMS4xODY3N0MyMS41MzkxIDEuNTU2NjUgMjMuOTg4NiAyLjg4ODI1IDI1LjQgNS4yNTU1M00wLjYyMzQ0NCAxOS4zODUySDE0LjM1NDFDMTQuMzU0MSAyNC4wMDE0IDE4LjQ0NTIgMjcuMzc0OCAyMC40OTA3IDI4LjQ4NDVDMjMuOTI3MiAyNy4zNiAyNi41NzYyIDIxLjk0OTggMjcuNDcxMSAxOS4zODUySDQxLjA0ODRNNDEuMDQ4NCAxMi4yODM0SDI3LjQ3MTFDMjYuODU3NSAxMS4xMjQ0IDI1Ljk5ODMgOC40NTEzNiAyNy40NzExIDcuMDMwOTkiIHN0cm9rZT0idXJsKCNwYWludDJfbGluZWFyXzU0N18xNDQ2KSIvPgo8cGF0aCBkPSJNMC42MjM0NDUgMTAuMDY0MUgxNC4zNTQxQzE1LjIyMzUgNy4zNzYyMiAxNy42Njc5IDEuODM3NzcgMjAuNDkwNyAxLjE4Njc3QzIxLjUzOTEgMS41NTY2NSAyMy45ODg2IDIuODg4MjUgMjUuNCA1LjI1NTUzTTAuNjIzNDQ0IDE5LjM4NTJIMTQuMzU0MUMxNC4zNTQxIDI0LjAwMTQgMTguNDQ1MiAyNy4zNzQ4IDIwLjQ5MDcgMjguNDg0NUMyMy45MjcyIDI3LjM2IDI2LjU3NjIgMjEuOTQ5OCAyNy40NzExIDE5LjM4NTJINDEuMDQ4NE00MS4wNDg0IDEyLjI4MzRIMjcuNDcxMUMyNi44NTc1IDExLjEyNDQgMjUuOTk4MyA4LjQ1MTM2IDI3LjQ3MTEgNy4wMzA5OSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzU0N18xNDQ2IiB4MT0iMC42Njk5OTgiIHkxPSIwIiB4Mj0iMzcuMDM2OSIgeTI9IjI4Ljg0MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0FCQUJBQiIvPgo8c3RvcCBvZmZzZXQ9IjAuMzEyNSIgc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIwLjYzMDIwOCIgc3RvcC1jb2xvcj0iI0JEQkRCRCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1RTVFNUUiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzU0N18xNDQ2IiB4MT0iMi4xODgzOCIgeTE9IjAuNDc0MDk2IiB4Mj0iNDAuMDI2MyIgeTI9IjI1Ljc0MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzdEN0Q3RCIvPgo8c3RvcCBvZmZzZXQ9IjAuNDk0NzkyIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxQzFDMUMiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyXzU0N18xNDQ2IiB4MT0iMi4xNDM1OCIgeTE9IjEuNjMxODQiIHgyPSIzOC40ODYzIiB5Mj0iMjcuNTEyMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjN0Q3RDdEIi8+CjxzdG9wIG9mZnNldD0iMC40OTQ3OTIiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFDMUMxQyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzOCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjYzOCAyLjQ1Mzg5QzE3LjYyOSAwLjg2MTY1MiAxNS4xNDIxIC0wLjAwMzA5NTUxIDEyLjU4MTEgOC4zMjYzNWUtMDZDOS41NDc3NSA4LjMyNjM1ZS0wNiA2LjYzODYgMS4yMDgxMSA0LjQ5MzY4IDMuMzU4NTNDMi4zNDg3NSA1LjUwODk2IDEuMTQzNzQgOC40MjU1NyAxLjE0Mzc0IDExLjQ2NjdDMS4xNDM3NCAxNC41MDc5IDIuMzQ4NzUgMTcuNDI0NSA0LjQ5MzY4IDE5LjU3NDlDNi42Mzg2IDIxLjcyNTQgOS41NDc3NSAyMi45MzM1IDEyLjU4MTEgMjIuOTMzNUMxNS4xMzk3IDIyLjkzMzYgMTcuNjI0NCAyMi4wNzM2IDE5LjYzOCAyMC40OTFDMTguMjc4OSAxOS40MTcxIDE3LjE4MDYgMTguMDQ4IDE2LjQyNTggMTYuNDg2OEMxNS42NzA5IDE0LjkyNTcgMTUuMjc5MyAxMy4yMTMxIDE1LjI4MDQgMTEuNDc4MkMxNS4yNzc2IDkuNzQxMzQgMTUuNjY4NCA4LjAyNjU1IDE2LjQyMzMgNi40NjMyNUMxNy4xNzgyIDQuODk5OTUgMTguMjc3NCAzLjUyOSAxOS42MzggMi40NTM4OVoiIGZpbGw9IiNBRjAwMTQiLz4KPHBhdGggZD0iTTE4LjQ5NDMgMi40NTM4OUMxNi40ODUyIDAuODYxNjUyIDEzLjk5ODQgLTAuMDAzMDk1NTEgMTEuNDM3NCA4LjMyNjM1ZS0wNkM4LjQwNDAxIDguMzI2MzVlLTA2IDUuNDk0ODcgMS4yMDgxMSAzLjM0OTk0IDMuMzU4NTNDMS4yMDUwMSA1LjUwODk2IDAgOC40MjU1NyAwIDExLjQ2NjdDMCAxNC41MDc5IDEuMjA1MDEgMTcuNDI0NSAzLjM0OTk0IDE5LjU3NDlDNS40OTQ4NyAyMS43MjU0IDguNDA0MDEgMjIuOTMzNSAxMS40Mzc0IDIyLjkzMzVDMTMuOTk2IDIyLjkzMzYgMTYuNDgwNyAyMi4wNzM2IDE4LjQ5NDMgMjAuNDkxQzE3LjEzNTIgMTkuNDE3MSAxNi4wMzY4IDE4LjA0OCAxNS4yODIgMTYuNDg2OEMxNC41MjcyIDE0LjkyNTcgMTQuMTM1NiAxMy4yMTMxIDE0LjEzNjYgMTEuNDc4MkMxNC4xMzM4IDkuNzQxMzQgMTQuNTI0NiA4LjAyNjU1IDE1LjI3OTUgNi40NjMyNUMxNi4wMzQ0IDQuODk5OTUgMTcuMTMzNiAzLjUyOSAxOC40OTQzIDIuNDUzODlaIiBmaWxsPSIjRUIwMDFCIi8+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNTQ3XzE0OTUpIj4KPHBhdGggZD0iTTI1LjU2MjYgMEMyMi45OTg4IDAuMDAwNTgyMjcxIDIwLjUwOTUgMC44NjQ3OCAxOC40OTQzIDIuNDUzODhDMTkuODU1NSAzLjUyNjY0IDIwLjk1NiA0Ljg5NTI0IDIxLjcxMjggNi40NTY0OEMyMi40Njk3IDguMDE3NzMgMjIuODYzMSA5LjczMDg3IDIyLjg2MzQgMTEuNDY2N0MyMi44NjMxIDEzLjIwMjYgMjIuNDY5NyAxNC45MTU3IDIxLjcxMjggMTYuNDc3QzIwLjk1NiAxOC4wMzgyIDE5Ljg1NTUgMTkuNDA2OCAxOC40OTQzIDIwLjQ3OTZDMjAuNTExIDIyLjA2NDYgMjMuMDAwMSAyMi45MjQ3IDI1LjU2MjYgMjIuOTIyQzI4LjU5NiAyMi45MjIgMzEuNTA1MSAyMS43MTM5IDMzLjY1MDEgMTkuNTYzNUMzNS43OTUgMTcuNDEzIDM3IDE0LjQ5NjQgMzcgMTEuNDU1M0MzNi45OTcgOC40MTYwOCAzNS43OTA2IDUuNTAyNDIgMzMuNjQ2IDMuMzU0NDdDMzEuNTAxNCAxLjIwNjUzIDI4LjU5NCAtMS41MTk1OWUtMDYgMjUuNTYyNiAwWiIgZmlsbD0iI0Y3OUUxQiIvPgo8L2c+CjxwYXRoIGQ9Ik0xOC40OTQzIDIuNDU0MTFIMTguNTA2TDE4LjQ5NDMgMi40NDIzOFYyLjQ1NDExWiIgZmlsbD0iI0Y3OUUxQiIvPgo8cGF0aCBkPSJNMTQuMTM2NiAxMS40NjY3QzE0LjEzNTYgMTMuMjAxNiAxNC41MjcyIDE0LjkxNDIgMTUuMjgyIDE2LjQ3NTNDMTYuMDM2OCAxOC4wMzY1IDE3LjEzNTIgMTkuNDA1NiAxOC40OTQzIDIwLjQ3OTVDMTkuODU1NSAxOS40MDY4IDIwLjk1NiAxOC4wMzgyIDIxLjcxMjggMTYuNDc2OUMyMi40Njk3IDE0LjkxNTcgMjIuODYzMSAxMy4yMDI2IDIyLjg2MzQgMTEuNDY2N0MyMi44NjMxIDkuNzMwODQgMjIuNDY5NyA4LjAxNzcgMjEuNzEyOCA2LjQ1NjQ2QzIwLjk1NiA0Ljg5NTIyIDE5Ljg1NTUgMy41MjY2MiAxOC40OTQzIDIuNDUzODZDMTcuMTM1MiAzLjUyNzc3IDE2LjAzNjggNC44OTY4OSAxNS4yODIgNi40NTgwNkMxNC41MjcyIDguMDE5MjQgMTQuMTM1NiA5LjczMTc4IDE0LjEzNjYgMTEuNDY2N1oiIGZpbGw9IiNGRjVGMDAiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF81NDdfMTQ5NSIgeD0iMTguNDk0MyIgeT0iMCIgd2lkdGg9IjE5LjUwNTciIGhlaWdodD0iMjIuOTIxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR4PSIxIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjg5MTY2NyAwIDAgMCAwIDAuNTMwOTQ3IDAgMCAwIDAgMCAwIDAgMCAxIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTQ3XzE0OTUiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTQ3XzE0OTUiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==\"","import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n}) => {\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImage && (\n                            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                                <img\n                                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                                    src={userImage}\n                                    alt=\"user image\"\n                                    data-testid=\"credit-card-frontface-userImg\"\n                                />\n                            </div>\n                        )}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":["React","QRCodeSVG"],"mappings":"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"}
+{"version":3,"file":"LearnCardCreditCardFrontFace-138a40f5.js","sources":["../../src/assets/images/card-chip.svg","../../src/assets/images/master-card-logo.svg","../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDIiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MiAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMS4xNyIgeT0iMC41IiB3aWR0aD0iMzkuMzc4NCIgaGVpZ2h0PSIyOC4wNzgiIHJ4PSI0LjUiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl81NDdfMTQ0NikiIGZpbGwtb3BhY2l0eT0iMC4wMyIvPgo8cmVjdCB4PSIxLjE3IiB5PSIwLjUiIHdpZHRoPSIzOS4zNzg0IiBoZWlnaHQ9IjI4LjA3OCIgcng9IjQuNSIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4zIi8+CjxyZWN0IHg9IjEuMTciIHk9IjAuNSIgd2lkdGg9IjM5LjM3ODQiIGhlaWdodD0iMjguMDc4IiByeD0iNC41IiBzdHJva2U9InVybCgjcGFpbnQxX2xpbmVhcl81NDdfMTQ0NikiLz4KPHJlY3QgeD0iMS4xNyIgeT0iMC41IiB3aWR0aD0iMzkuMzc4NCIgaGVpZ2h0PSIyOC4wNzgiIHJ4PSI0LjUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1vcGFjaXR5PSIwLjgiLz4KPHBhdGggZD0iTTAuNjIzNDQ1IDEwLjA2NDFIMTQuMzU0MUMxNS4yMjM1IDcuMzc2MjIgMTcuNjY3OSAxLjgzNzc3IDIwLjQ5MDcgMS4xODY3N0MyMS41MzkxIDEuNTU2NjUgMjMuOTg4NiAyLjg4ODI1IDI1LjQgNS4yNTU1M00wLjYyMzQ0NCAxOS4zODUySDE0LjM1NDFDMTQuMzU0MSAyNC4wMDE0IDE4LjQ0NTIgMjcuMzc0OCAyMC40OTA3IDI4LjQ4NDVDMjMuOTI3MiAyNy4zNiAyNi41NzYyIDIxLjk0OTggMjcuNDcxMSAxOS4zODUySDQxLjA0ODRNNDEuMDQ4NCAxMi4yODM0SDI3LjQ3MTFDMjYuODU3NSAxMS4xMjQ0IDI1Ljk5ODMgOC40NTEzNiAyNy40NzExIDcuMDMwOTkiIHN0cm9rZT0idXJsKCNwYWludDJfbGluZWFyXzU0N18xNDQ2KSIvPgo8cGF0aCBkPSJNMC42MjM0NDUgMTAuMDY0MUgxNC4zNTQxQzE1LjIyMzUgNy4zNzYyMiAxNy42Njc5IDEuODM3NzcgMjAuNDkwNyAxLjE4Njc3QzIxLjUzOTEgMS41NTY2NSAyMy45ODg2IDIuODg4MjUgMjUuNCA1LjI1NTUzTTAuNjIzNDQ0IDE5LjM4NTJIMTQuMzU0MUMxNC4zNTQxIDI0LjAwMTQgMTguNDQ1MiAyNy4zNzQ4IDIwLjQ5MDcgMjguNDg0NUMyMy45MjcyIDI3LjM2IDI2LjU3NjIgMjEuOTQ5OCAyNy40NzExIDE5LjM4NTJINDEuMDQ4NE00MS4wNDg0IDEyLjI4MzRIMjcuNDcxMUMyNi44NTc1IDExLjEyNDQgMjUuOTk4MyA4LjQ1MTM2IDI3LjQ3MTEgNy4wMzA5OSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuOCIvPgo8ZGVmcz4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDBfbGluZWFyXzU0N18xNDQ2IiB4MT0iMC42Njk5OTgiIHkxPSIwIiB4Mj0iMzcuMDM2OSIgeTI9IjI4Ljg0MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0FCQUJBQiIvPgo8c3RvcCBvZmZzZXQ9IjAuMzEyNSIgc3RvcC1jb2xvcj0id2hpdGUiLz4KPHN0b3Agb2Zmc2V0PSIwLjYzMDIwOCIgc3RvcC1jb2xvcj0iI0JEQkRCRCIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1RTVFNUUiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDFfbGluZWFyXzU0N18xNDQ2IiB4MT0iMi4xODgzOCIgeTE9IjAuNDc0MDk2IiB4Mj0iNDAuMDI2MyIgeTI9IjI1Ljc0MDQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KPHN0b3Agc3RvcC1jb2xvcj0iIzdEN0Q3RCIvPgo8c3RvcCBvZmZzZXQ9IjAuNDk0NzkyIiBzdG9wLWNvbG9yPSJ3aGl0ZSIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMxQzFDMUMiLz4KPC9saW5lYXJHcmFkaWVudD4KPGxpbmVhckdyYWRpZW50IGlkPSJwYWludDJfbGluZWFyXzU0N18xNDQ2IiB4MT0iMi4xNDM1OCIgeTE9IjEuNjMxODQiIHgyPSIzOC40ODYzIiB5Mj0iMjcuNTEyMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjN0Q3RDdEIi8+CjxzdG9wIG9mZnNldD0iMC40OTQ3OTIiIHN0b3AtY29sb3I9IndoaXRlIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzFDMUMxQyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=\"","export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMjMiIHZpZXdCb3g9IjAgMCAzOCAyMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjYzOCAyLjQ1Mzg5QzE3LjYyOSAwLjg2MTY1MiAxNS4xNDIxIC0wLjAwMzA5NTUxIDEyLjU4MTEgOC4zMjYzNWUtMDZDOS41NDc3NSA4LjMyNjM1ZS0wNiA2LjYzODYgMS4yMDgxMSA0LjQ5MzY4IDMuMzU4NTNDMi4zNDg3NSA1LjUwODk2IDEuMTQzNzQgOC40MjU1NyAxLjE0Mzc0IDExLjQ2NjdDMS4xNDM3NCAxNC41MDc5IDIuMzQ4NzUgMTcuNDI0NSA0LjQ5MzY4IDE5LjU3NDlDNi42Mzg2IDIxLjcyNTQgOS41NDc3NSAyMi45MzM1IDEyLjU4MTEgMjIuOTMzNUMxNS4xMzk3IDIyLjkzMzYgMTcuNjI0NCAyMi4wNzM2IDE5LjYzOCAyMC40OTFDMTguMjc4OSAxOS40MTcxIDE3LjE4MDYgMTguMDQ4IDE2LjQyNTggMTYuNDg2OEMxNS42NzA5IDE0LjkyNTcgMTUuMjc5MyAxMy4yMTMxIDE1LjI4MDQgMTEuNDc4MkMxNS4yNzc2IDkuNzQxMzQgMTUuNjY4NCA4LjAyNjU1IDE2LjQyMzMgNi40NjMyNUMxNy4xNzgyIDQuODk5OTUgMTguMjc3NCAzLjUyOSAxOS42MzggMi40NTM4OVoiIGZpbGw9IiNBRjAwMTQiLz4KPHBhdGggZD0iTTE4LjQ5NDMgMi40NTM4OUMxNi40ODUyIDAuODYxNjUyIDEzLjk5ODQgLTAuMDAzMDk1NTEgMTEuNDM3NCA4LjMyNjM1ZS0wNkM4LjQwNDAxIDguMzI2MzVlLTA2IDUuNDk0ODcgMS4yMDgxMSAzLjM0OTk0IDMuMzU4NTNDMS4yMDUwMSA1LjUwODk2IDAgOC40MjU1NyAwIDExLjQ2NjdDMCAxNC41MDc5IDEuMjA1MDEgMTcuNDI0NSAzLjM0OTk0IDE5LjU3NDlDNS40OTQ4NyAyMS43MjU0IDguNDA0MDEgMjIuOTMzNSAxMS40Mzc0IDIyLjkzMzVDMTMuOTk2IDIyLjkzMzYgMTYuNDgwNyAyMi4wNzM2IDE4LjQ5NDMgMjAuNDkxQzE3LjEzNTIgMTkuNDE3MSAxNi4wMzY4IDE4LjA0OCAxNS4yODIgMTYuNDg2OEMxNC41MjcyIDE0LjkyNTcgMTQuMTM1NiAxMy4yMTMxIDE0LjEzNjYgMTEuNDc4MkMxNC4xMzM4IDkuNzQxMzQgMTQuNTI0NiA4LjAyNjU1IDE1LjI3OTUgNi40NjMyNUMxNi4wMzQ0IDQuODk5OTUgMTcuMTMzNiAzLjUyOSAxOC40OTQzIDIuNDUzODlaIiBmaWxsPSIjRUIwMDFCIi8+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfNTQ3XzE0OTUpIj4KPHBhdGggZD0iTTI1LjU2MjYgMEMyMi45OTg4IDAuMDAwNTgyMjcxIDIwLjUwOTUgMC44NjQ3OCAxOC40OTQzIDIuNDUzODhDMTkuODU1NSAzLjUyNjY0IDIwLjk1NiA0Ljg5NTI0IDIxLjcxMjggNi40NTY0OEMyMi40Njk3IDguMDE3NzMgMjIuODYzMSA5LjczMDg3IDIyLjg2MzQgMTEuNDY2N0MyMi44NjMxIDEzLjIwMjYgMjIuNDY5NyAxNC45MTU3IDIxLjcxMjggMTYuNDc3QzIwLjk1NiAxOC4wMzgyIDE5Ljg1NTUgMTkuNDA2OCAxOC40OTQzIDIwLjQ3OTZDMjAuNTExIDIyLjA2NDYgMjMuMDAwMSAyMi45MjQ3IDI1LjU2MjYgMjIuOTIyQzI4LjU5NiAyMi45MjIgMzEuNTA1MSAyMS43MTM5IDMzLjY1MDEgMTkuNTYzNUMzNS43OTUgMTcuNDEzIDM3IDE0LjQ5NjQgMzcgMTEuNDU1M0MzNi45OTcgOC40MTYwOCAzNS43OTA2IDUuNTAyNDIgMzMuNjQ2IDMuMzU0NDdDMzEuNTAxNCAxLjIwNjUzIDI4LjU5NCAtMS41MTk1OWUtMDYgMjUuNTYyNiAwWiIgZmlsbD0iI0Y3OUUxQiIvPgo8L2c+CjxwYXRoIGQ9Ik0xOC40OTQzIDIuNDU0MTFIMTguNTA2TDE4LjQ5NDMgMi40NDIzOFYyLjQ1NDExWiIgZmlsbD0iI0Y3OUUxQiIvPgo8cGF0aCBkPSJNMTQuMTM2NiAxMS40NjY3QzE0LjEzNTYgMTMuMjAxNiAxNC41MjcyIDE0LjkxNDIgMTUuMjgyIDE2LjQ3NTNDMTYuMDM2OCAxOC4wMzY1IDE3LjEzNTIgMTkuNDA1NiAxOC40OTQzIDIwLjQ3OTVDMTkuODU1NSAxOS40MDY4IDIwLjk1NiAxOC4wMzgyIDIxLjcxMjggMTYuNDc2OUMyMi40Njk3IDE0LjkxNTcgMjIuODYzMSAxMy4yMDI2IDIyLjg2MzQgMTEuNDY2N0MyMi44NjMxIDkuNzMwODQgMjIuNDY5NyA4LjAxNzcgMjEuNzEyOCA2LjQ1NjQ2QzIwLjk1NiA0Ljg5NTIyIDE5Ljg1NTUgMy41MjY2MiAxOC40OTQzIDIuNDUzODZDMTcuMTM1MiAzLjUyNzc3IDE2LjAzNjggNC44OTY4OSAxNS4yODIgNi40NTgwNkMxNC41MjcyIDguMDE5MjQgMTQuMTM1NiA5LjczMTc4IDE0LjEzNjYgMTEuNDY2N1oiIGZpbGw9IiNGRjVGMDAiLz4KPGRlZnM+CjxmaWx0ZXIgaWQ9ImZpbHRlcjBfZF81NDdfMTQ5NSIgeD0iMTguNDk0MyIgeT0iMCIgd2lkdGg9IjE5LjUwNTciIGhlaWdodD0iMjIuOTIxOSIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR4PSIxIi8+CjxmZUNvbXBvc2l0ZSBpbjI9ImhhcmRBbHBoYSIgb3BlcmF0b3I9Im91dCIvPgo8ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjg5MTY2NyAwIDAgMCAwIDAuNTMwOTQ3IDAgMCAwIDAgMCAwIDAgMCAxIDAiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbjI9IkJhY2tncm91bmRJbWFnZUZpeCIgcmVzdWx0PSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTQ3XzE0OTUiLz4KPGZlQmxlbmQgbW9kZT0ibm9ybWFsIiBpbj0iU291cmNlR3JhcGhpYyIgaW4yPSJlZmZlY3QxX2Ryb3BTaGFkb3dfNTQ3XzE0OTUiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjwvZGVmcz4KPC9zdmc+Cg==\"","import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { LearnCardCreditCardFrontFaceProps } from './types';\n\nimport CardChip from '../../assets/images/card-chip.svg';\nimport MasterCardLogo from '../../assets/images/master-card-logo.svg';\n\nexport const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({\n    userImage,\n    userImageComponent = null,\n    qrCodeValue,\n    className,\n    showActionButton = false,\n    actionButtonText = 'Open Card',\n    onClick = () => {},\n}) => {\n    let userImageEl: React.ReactNode | null = null;\n\n    if (userImage) {\n        userImageEl = (\n            <div className=\"inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4\">\n                <img\n                    className=\"w-full h-full absolute rounded-full object-cover border-solid border-2 border-white\"\n                    src={userImage}\n                    alt=\"user image\"\n                    data-testid=\"credit-card-frontface-userImg\"\n                />\n            </div>\n        );\n    } else if (!userImage && userImageComponent) {\n        userImageEl = userImageComponent;\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}\n        >\n            <div\n                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble\" />\n                {showActionButton && (\n                    <button\n                        className=\"absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white\"\n                        onClick={onClick}\n                        data-testid=\"credit-card-frontface-button\"\n                    >\n                        {actionButtonText}\n                    </button>\n                )}\n                <div className=\"flex flex-row justify-between items-start w-full h-full relative\">\n                    <div className=\"flex flex-1 flex-col\">\n                        <div className=\"pl-8\">\n                            <p className=\"w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title\">\n                                LEARNCARD\n                            </p>\n                            <img\n                                src={CardChip ?? ''}\n                                alt=\"card chip\"\n                                className=\"h-[30px] w-[42px]\"\n                            />\n                        </div>\n\n                        {userImageEl}\n                    </div>\n\n                    {qrCodeValue && (\n                        <div className=\"flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container\">\n                            <div className=\"h-auto relative qr-code-container\">\n                                {/* <div className=\"qr-code-upper-left-yellow\" />\n                            <div className=\"qr-code-upper-right-pink-square\" />\n                            <div className=\"qr-code-bottom-left-purple-square\" />\n                            <div className=\"qr-code-green-blob\" />\n                            <div className=\"qr-code-green-blob-2\" />\n                            <div className=\"qr-code-blue-blob\" />\n                            <div className=\"qr-code-orange-blob\" /> */}\n                                <QRCodeSVG\n                                    className=\"h-full w-full\"\n                                    value={qrCodeValue}\n                                    data-testid=\"credit-card-qr-code\"\n                                    bgColor=\"transparent\"\n                                    // fgColor=\"#999999\"\n                                />\n                            </div>\n                        </div>\n                    )}\n\n                    <img\n                        src={MasterCardLogo ?? ''}\n                        alt=\"mastercard icon\"\n                        className=\"absolute bottom-[-8px] right-4 learn-card-mastercard-logo\"\n                    />\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":"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"}