@learncard/react 2.3.30 → 2.3.32

package/dist/cjs/{LearnCardCreditCardFrontFace-e8960986.js → LearnCardCreditCardFrontFace-4452fd7a.js}

@@ -19,7 +19,8 @@ const LearnCardCreditCardFrontFace = ({
   showActionButton = false,
   actionButtonText = "Open Card",
   onClick = () => {
-  }
+  },
+  children
 }) => {
   var _a, _b;
   let userImageEl = null;
@@ -70,8 +71,8 @@ const LearnCardCreditCardFrontFace = ({
     src: (_b = MasterCardLogo__default["default"]) != null ? _b : "",
     alt: "mastercard icon",
     className: "absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
-  }))));
+  }))), children);
 };
 
 exports.LearnCardCreditCardFrontFace = LearnCardCreditCardFrontFace;
-//# sourceMappingURL=LearnCardCreditCardFrontFace-e8960986.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-4452fd7a.js.map

package/dist/cjs/LearnCardCreditCardFrontFace-4452fd7a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardFrontFace-4452fd7a.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["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    children,\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            {children}\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":["React","CardChip","QRCodeSVG","MasterCardLogo"],"mappings":"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"}

package/dist/cjs/index.js

@@ -7,7 +7,7 @@ var CircleIcon = require('./CircleIcon-45ef66fd.js');
 var CourseCard = require('./CourseCard-c3c13b2c.js');
 var FlippyCard = require('./FlippyCard-33e03a9e.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-e8960986.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-4452fd7a.js');
 var CircleSpinner = require('./CircleSpinner-093cce04.js');
 var MiniVCThumbnail = require('./MiniVCThumbnail-a78e44f2.js');
 var Notification = require('./Notification-92b06ed9.js');

package/dist/cjs/index6.js

@@ -7,7 +7,7 @@ var CircleIcon = require('./CircleIcon-45ef66fd.js');
 var CourseCard = require('./CourseCard-c3c13b2c.js');
 var FlippyCard = require('./FlippyCard-33e03a9e.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-e8960986.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-4452fd7a.js');
 var CircleSpinner = require('./CircleSpinner-093cce04.js');
 var MiniVCThumbnail = require('./MiniVCThumbnail-a78e44f2.js');
 var Notification = require('./Notification-92b06ed9.js');

package/dist/cjs/index8.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-e8960986.js');
+var LearnCardCreditCardFrontFace = require('./LearnCardCreditCardFrontFace-4452fd7a.js');
 require('react');
 require('./index-82de573c.js');
 require('./card-chip.svg');

package/dist/esm/{LearnCardCreditCardFrontFace-2f2e066d.js → LearnCardCreditCardFrontFace-cf793917.js}

@@ -11,7 +11,8 @@ const LearnCardCreditCardFrontFace = ({
   showActionButton = false,
   actionButtonText = "Open Card",
   onClick = () => {
-  }
+  },
+  children
 }) => {
   var _a, _b;
   let userImageEl = null;
@@ -62,8 +63,8 @@ const LearnCardCreditCardFrontFace = ({
     src: (_b = MasterCardLogo) != null ? _b : "",
     alt: "mastercard icon",
     className: "absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
-  }))));
+  }))), children);
 };
 
 export { LearnCardCreditCardFrontFace as L };
-//# sourceMappingURL=LearnCardCreditCardFrontFace-2f2e066d.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-cf793917.js.map

package/dist/esm/LearnCardCreditCardFrontFace-cf793917.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LearnCardCreditCardFrontFace-cf793917.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["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    children,\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            {children}\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardFrontFace;\n"],"names":[],"mappings":";;;;;AAIY,MAAC,4BAA4B,GAAG,CAAC;AAC7C,EAAE,SAAS;AACX,EAAE,kBAAkB,GAAG,IAAI;AAC3B,EAAE,WAAW;AACb,EAAE,SAAS;AACX,EAAE,gBAAgB,GAAG,KAAK;AAC1B,EAAE,gBAAgB,GAAG,WAAW;AAChC,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,EAAE,QAAQ;AACV,CAAC,KAAK;AACN,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AACb,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC;AACzB,EAAE,IAAI,SAAS,EAAE;AACjB,IAAI,WAAW,mBAAmB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7D,MAAM,SAAS,EAAE,qGAAqG;AACtH,KAAK,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAClD,MAAM,SAAS,EAAE,qFAAqF;AACtG,MAAM,GAAG,EAAE,SAAS;AACpB,MAAM,GAAG,EAAE,YAAY;AACvB,MAAM,aAAa,EAAE,+BAA+B;AACpD,KAAK,CAAC,CAAC,CAAC;AACR,GAAG,MAAM,IAAI,CAAC,SAAS,IAAI,kBAAkB,EAAE;AAC/C,IAAI,WAAW,GAAG,kBAAkB,CAAC;AACrC,GAAG;AACH,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,8DAA8D,EAAE,SAAS,CAAC,CAAC;AAC3F,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,4IAA4I,CAAC;AAC7J,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,wHAAwH;AACvI,GAAG,CAAC,EAAE,gBAAgB,oBAAoB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;AACxE,IAAI,SAAS,EAAE,oMAAoM;AACnN,IAAI,OAAO;AACX,IAAI,aAAa,EAAE,8BAA8B;AACjD,GAAG,EAAE,gBAAgB,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnE,IAAI,SAAS,EAAE,kEAAkE;AACjF,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,sBAAsB;AACrC,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,MAAM;AACrB,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,sFAAsF;AACrG,GAAG,EAAE,WAAW,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC9D,IAAI,GAAG,EAAE,CAAC,EAAE,GAAG,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAC1C,IAAI,GAAG,EAAE,WAAW;AACpB,IAAI,SAAS,EAAE,mBAAmB;AAClC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC/E,IAAI,SAAS,EAAE,sFAAsF;AACrG,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,mCAAmC;AAClD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACpD,IAAI,SAAS,EAAE,eAAe;AAC9B,IAAI,KAAK,EAAE,WAAW;AACtB,IAAI,aAAa,EAAE,qBAAqB;AACxC,IAAI,OAAO,EAAE,aAAa;AAC1B,GAAG,CAAC,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnD,IAAI,GAAG,EAAE,CAAC,EAAE,GAAG,cAAc,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAChD,IAAI,GAAG,EAAE,iBAAiB;AAC1B,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;AAClB;;;;"}

package/dist/esm/index.js

@@ -3,7 +3,7 @@ export { a as CircleIcon, C as CountCircle } from './CircleIcon-7c21af00.js';
 export { C as CourseCard } from './CourseCard-b9e42233.js';
 export { F as FlippyCard } from './FlippyCard-682649d7.js';
 export { L as LearnCardCreditCardBackFace } from './LearnCardCreditCardBackFace-9baa9e6b.js';
-export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-2f2e066d.js';
+export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-cf793917.js';
 export { C as CircleLoadingState } from './CircleSpinner-9b8b1a6b.js';
 export { M as MiniVCThumbnail } from './MiniVCThumbnail-6a07e810.js';
 export { N as Notification, a as NotificationTypeStyles } from './Notification-ddbb3c37.js';

package/dist/esm/index6.js

@@ -3,7 +3,7 @@ export { a as CircleIcon, C as CountCircle } from './CircleIcon-7c21af00.js';
 export { C as CourseCard } from './CourseCard-b9e42233.js';
 export { F as FlippyCard } from './FlippyCard-682649d7.js';
 export { L as LearnCardCreditCardBackFace } from './LearnCardCreditCardBackFace-9baa9e6b.js';
-export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-2f2e066d.js';
+export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-cf793917.js';
 export { C as CircleLoadingState } from './CircleSpinner-9b8b1a6b.js';
 export { M as MiniVCThumbnail } from './MiniVCThumbnail-6a07e810.js';
 export { N as Notification, a as NotificationTypeStyles } from './Notification-ddbb3c37.js';

package/dist/esm/index8.js

@@ -1,4 +1,4 @@
-export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-2f2e066d.js';
+export { L as LearnCardCreditCardFrontFace } from './LearnCardCreditCardFrontFace-cf793917.js';
 import 'react';
 import './index-aa1098e1.js';
 import './card-chip.svg';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@learncard/react",
-  "version": "2.3.30",
+  "version": "2.3.32",
   "description": "",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -58,7 +58,7 @@
     "typescript": "^4.5.4"
   },
   "dependencies": {
-    "@learncard/core": "6.1.0",
+    "@learncard/core": "6.2.0",
     "date-fns": "^2.28.0",
     "qrcode.react": "^3.0.2",
     "react": "^18.2.0",

package/dist/cjs/LearnCardCreditCardFrontFace-e8960986.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-e8960986.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["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":["React","CardChip","QRCodeSVG","MasterCardLogo"],"mappings":";;;;;;;;;;;;;AAIY,MAAC,4BAA4B,GAAG,CAAC;AAC7C,EAAE,SAAS;AACX,EAAE,kBAAkB,GAAG,IAAI;AAC3B,EAAE,WAAW;AACb,EAAE,SAAS;AACX,EAAE,gBAAgB,GAAG,KAAK;AAC1B,EAAE,gBAAgB,GAAG,WAAW;AAChC,EAAE,OAAO,GAAG,MAAM;AAClB,GAAG;AACH,CAAC,KAAK;AACN,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AACb,EAAE,IAAI,WAAW,GAAG,IAAI,CAAC;AACzB,EAAE,IAAI,SAAS,EAAE;AACjB,IAAI,WAAW,mBAAmBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7D,MAAM,SAAS,EAAE,qGAAqG;AACtH,KAAK,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAClD,MAAM,SAAS,EAAE,qFAAqF;AACtG,MAAM,GAAG,EAAE,SAAS;AACpB,MAAM,GAAG,EAAE,YAAY;AACvB,MAAM,aAAa,EAAE,+BAA+B;AACpD,KAAK,CAAC,CAAC,CAAC;AACR,GAAG,MAAM,IAAI,CAAC,SAAS,IAAI,kBAAkB,EAAE;AAC/C,IAAI,WAAW,GAAG,kBAAkB,CAAC;AACrC,GAAG;AACH,EAAE,uBAAuBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,8DAA8D,EAAE,SAAS,CAAC,CAAC;AAC3F,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,CAAC,4IAA4I,CAAC;AAC7J,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,wHAAwH;AACvI,GAAG,CAAC,EAAE,gBAAgB,oBAAoBA,yBAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;AACxE,IAAI,SAAS,EAAE,oMAAoM;AACnN,IAAI,OAAO;AACX,IAAI,aAAa,EAAE,8BAA8B;AACjD,GAAG,EAAE,gBAAgB,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnE,IAAI,SAAS,EAAE,kEAAkE;AACjF,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,sBAAsB;AACrC,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,MAAM;AACrB,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,sFAAsF;AACrG,GAAG,EAAE,WAAW,CAAC,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC9D,IAAI,GAAG,EAAE,CAAC,EAAE,GAAGC,4BAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAC1C,IAAI,GAAG,EAAE,WAAW;AACpB,IAAI,SAAS,EAAE,mBAAmB;AAClC,GAAG,CAAC,CAAC,EAAE,WAAW,CAAC,EAAE,WAAW,oBAAoBD,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC/E,IAAI,SAAS,EAAE,sFAAsF;AACrG,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,mCAAmC;AAClD,GAAG,kBAAkBA,yBAAK,CAAC,aAAa,CAACE,eAAS,EAAE;AACpD,IAAI,SAAS,EAAE,eAAe;AAC9B,IAAI,KAAK,EAAE,WAAW;AACtB,IAAI,aAAa,EAAE,qBAAqB;AACxC,IAAI,OAAO,EAAE,aAAa;AAC1B,GAAG,CAAC,CAAC,CAAC,kBAAkBF,yBAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACnD,IAAI,GAAG,EAAE,CAAC,EAAE,GAAGG,kCAAc,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE;AAChD,IAAI,GAAG,EAAE,iBAAiB;AAC1B,IAAI,SAAS,EAAE,2DAA2D;AAC1E,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACR;;;;"}

package/dist/esm/LearnCardCreditCardFrontFace-2f2e066d.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-2f2e066d.js","sources":["../../src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx"],"sourcesContent":["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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"}