@learncard/react 2.5.4 → 2.5.5

package/dist/esm/{BoostSmallCard-68be5155.js → BoostSmallCard-e42ec5ed.js}

@@ -34,7 +34,8 @@ const BoostSmallCard = ({
   const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
   const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;
   const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 p-[10px] ${customBodyClass}`;
-  const defaultButtonClass = `small-boost-boost-btn flex shadow-bottom boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;
+  const defaultButtonClass = `cursor-pointer small-boost-boost-btn flex shadow-bottom boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;
+  const innerClickContainerClass = `cursor-pointer boost-small-card inner-click-container z-10`;
   const issueHistoryDisplay = issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 3 ? issueHistory == null ? void 0 : issueHistory.slice(0, 3) : issueHistory;
   const renderIssueHistory = issueHistoryDisplay == null ? void 0 : issueHistoryDisplay.map((issueItem) => {
     return /* @__PURE__ */ React.createElement("div", {
@@ -57,7 +58,7 @@ const BoostSmallCard = ({
     className: "h-full w-full object-cover overflow-hidden",
     src: bgImgSrc
   })), /* @__PURE__ */ React.createElement("div", {
-    className: "boost-small-card inner-click-containe z-10",
+    className: innerClickContainerClass,
     onClick: handleInnerClick
   }, customThumbComponent && customThumbComponent, !customThumbComponent && /* @__PURE__ */ React.createElement("section", {
     className: defaultThumbClass
@@ -76,7 +77,7 @@ const BoostSmallCard = ({
     className: defaultBodyClass
   }, customBodyComponent && customBodyComponent, !customBodyComponent && issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && renderIssueHistory, !customBodyComponent && issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 3 && /* @__PURE__ */ React.createElement("span", {
     className: "small-boost-issue-count ml-[10px] font-semibold"
-  }, "+", (issueHistory == null ? void 0 : issueHistory.length) - 3)), /* @__PURE__ */ React.createElement("section", {
+  }, "+", (issueHistory == null ? void 0 : issueHistory.length) - 3))), /* @__PURE__ */ React.createElement("section", {
     className: "small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full"
   }, customButtonComponent && customButtonComponent, !customButtonComponent && /* @__PURE__ */ React.createElement("div", {
     onClick: buttonOnClick,
@@ -92,7 +93,7 @@ const BoostSmallCard = ({
     checked: checkStatus,
     onClick: onCheckClick,
     className: checkBtnClass
-  }))), arrowOnClick && /* @__PURE__ */ React.createElement("button", {
+  })), arrowOnClick && /* @__PURE__ */ React.createElement("button", {
     type: "button",
     onClick: arrowOnClick,
     className: "arrow-btn-overlay absolute top-[52px] right-[2px]"
@@ -104,4 +105,4 @@ const BoostSmallCard = ({
 };
 
 export { BoostSmallCard as B };
-//# sourceMappingURL=BoostSmallCard-68be5155.js.map
+//# sourceMappingURL=BoostSmallCard-e42ec5ed.js.map

package/dist/esm/BoostSmallCard-e42ec5ed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostSmallCard-e42ec5ed.js","sources":["../../src/components/BoostSmallCard/BoostSmallCard.tsx"],"sourcesContent":["import React from 'react';\nimport { BoostSmallCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CaretRightFilled from '../../assets/images/CaretRightFilled.svg';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport AddAwardLight from '../../assets/images/addawardlight.svg';\n\nexport const BoostSmallCard: React.FC<BoostSmallCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    arrowOnClick,\n    buttonOnClick,\n    customButtonComponent,\n    customBodyClass,\n    customBodyComponent,\n    customThumbComponent,\n    innerOnClick,\n    issueHistory,\n    bgImgSrc,\n}) => {\n    const thumbClass = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-50';\n    const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n    const headerBgColor = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-900';\n    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';\n    const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;\n    const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 p-[10px] ${customBodyClass}`;\n    const defaultButtonClass = `cursor-pointer small-boost-boost-btn flex shadow-bottom boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;\n    const innerClickContainerClass = `cursor-pointer boost-small-card inner-click-container z-10`;\n\n    const issueHistoryDisplay =\n        issueHistory && issueHistory?.length > 3 ? issueHistory?.slice(0, 3) : issueHistory;\n    const renderIssueHistory = issueHistoryDisplay?.map(issueItem => {\n        return (\n            <div\n                key={issueItem?.id}\n                className=\"profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]\"\n            >\n                <img\n                    className=\"h-full w-full object-cover\"\n                    src={issueItem?.thumb || DefaultFace}\n                    alt=\"profile\"\n                />\n            </div>\n        );\n    });\n\n    const handleInnerClick = () => {\n        innerOnClick?.();\n    };\n\n    return (\n        <div\n            className={`flex generic-display-card-simple bg-white flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[280px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {bgImgSrc && (\n                <section className=\"absolute top-[-50px] left-[0px] rounded-b-full overflow-hidden z-0\">\n                    <img className=\"h-full w-full object-cover overflow-hidden\" src={bgImgSrc} />\n                </section>\n            )}\n            <div className={innerClickContainerClass} onClick={handleInnerClick}>\n                {customThumbComponent && customThumbComponent}\n                {!customThumbComponent && (\n                    <section className={defaultThumbClass}>\n                        {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                            <img\n                                className=\"generic-display-card-img h-full w-full  w-[110px] h-[110px] rounded-full object-cover overflow-hidden\"\n                                src={thumbImgSrc ?? ''}\n                                alt=\"Credential Achievement Image\"\n                            />\n                        )}\n                        {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                            <img\n                                className=\"max-w-[110px] w-full h-full p-[0px] object-cover rounded-full\"\n                                src={imgSrc}\n                            />\n                        )}\n                    </section>\n                )}\n\n                <section className={defaultHeaderClass}>\n                    <p className=\"relative z-[100] small-boost-title text-[14px] p-[0px] font-bold text-center line-clamp-2\">\n                        {title}\n                    </p>\n                </section>\n\n                <section className={defaultBodyClass}>\n                    {customBodyComponent && customBodyComponent}\n                    {!customBodyComponent &&\n                        issueHistory &&\n                        issueHistory?.length > 0 &&\n                        renderIssueHistory}\n                    {!customBodyComponent && issueHistory && issueHistory?.length > 3 && (\n                        <span className=\"small-boost-issue-count ml-[10px] font-semibold\">\n                            +{issueHistory?.length - 3}\n                        </span>\n                    )}\n                </section>\n            </div>\n\n            <section className=\"small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full\">\n                {customButtonComponent && customButtonComponent}\n\n                {!customButtonComponent && (\n                    <div onClick={buttonOnClick} className={defaultButtonClass}>\n                        <img className=\"h-[25px] mr-[7px] text-\" src={AddAwardLight} />\n                        <span className=\"font-mouse text-[25px] tracking-wider\">BOOST!</span>\n                    </div>\n                )}\n            </section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onCheckClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n\n            {arrowOnClick && (\n                <button\n                    type=\"button\"\n                    onClick={arrowOnClick}\n                    className=\"arrow-btn-overlay absolute top-[52px] right-[2px]\"\n                >\n                    <img\n                        className=\"h-full w-full object-contai\"\n                        src={CaretRightFilled ?? ''}\n                        alt=\"Right Caret\"\n                    />\n                </button>\n            )}\n        </div>\n    );\n};\n\nexport default BoostSmallCard;\n"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Q as QRCodeSVG } from './index-54ccc558.js';
+import { Q as QRCodeSVG } from './index-aa1098e1.js';
 import CardChip from './card-chip.svg';
 import MasterCardLogo from './master-card-logo.svg';
 
@@ -67,4 +67,4 @@ const LearnCardCreditCardFrontFace = ({
 };
 
 export { LearnCardCreditCardFrontFace as L };
-//# sourceMappingURL=LearnCardCreditCardFrontFace-c221facc.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-cf793917.js.map

package/dist/esm/{LearnCardCreditCardFrontFace-c221facc.js.map → LearnCardCreditCardFrontFace-cf793917.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-c221facc.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":"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"}
+{"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":"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"}

package/dist/esm/{QRCodeCard-d147d009.js → QRCodeCard-c57e2067.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Q as QRCodeSVG } from './index-54ccc558.js';
+import { Q as QRCodeSVG } from './index-aa1098e1.js';
 
 const QRCodeCard = ({
   userHandle,
@@ -33,4 +33,4 @@ const QRCodeCard = ({
 };
 
 export { QRCodeCard as Q };
-//# sourceMappingURL=QRCodeCard-d147d009.js.map
+//# sourceMappingURL=QRCodeCard-c57e2067.js.map

package/dist/esm/{QRCodeCard-d147d009.js.map → QRCodeCard-c57e2067.js.map}

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard-d147d009.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":[],"mappings":";;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACI,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"QRCodeCard-c57e2067.js","sources":["../../src/components/QRCodeCard/QRCodeCard.tsx"],"sourcesContent":["import React from 'react';\nimport { QRCodeSVG } from 'qrcode.react';\n\nimport { QRCodeCardProps } from './types';\n\nexport const QRCodeCard: React.FC<QRCodeCardProps> = ({\n    userHandle,\n    qrCodeValue,\n    className,\n    text = null,\n}) => {\n    let textEl: React.ReactNode | null = null;\n    if (typeof text === 'string') {\n        textEl = (\n            <p className=\"flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]\">\n                {text}\n            </p>\n        );\n    } else {\n        textEl = text;\n    }\n\n    return (\n        <div\n            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}\n        >\n            {qrCodeValue && (\n                <div className=\"flex justify-center items-center w-full relative px-8 mb-5\">\n                    <div className=\"max-w-[90%] w-full h-auto relative\">\n                        <QRCodeSVG\n                            className=\"h-full w-full\"\n                            value={qrCodeValue}\n                            data-testid=\"qrcode-card\"\n                            bgColor=\"transparent\"\n                        />\n                    </div>\n                </div>\n            )}\n\n            {userHandle && (\n                <p\n                    className=\"flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500\"\n                    data-testid=\"qrcode-card-user-handle\"\n                >\n                    {userHandle}\n                </p>\n            )}\n\n            {textEl}\n        </div>\n    );\n};\n\nexport default QRCodeCard;\n"],"names":[],"mappings":";;;AAKO,MAAM,aAAwC,CAAC;AAAA,EAClD,UAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,IAAO,GAAA,IAAA;AACX,CAAM,KAAA;AACF,EAAA,IAAI,MAAiC,GAAA,IAAA,CAAA;AACrC,EAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC1B,IAAA,MAAA,mBACK,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,MAAE,SAAU,EAAA,qFAAA;AAAA,KAAA,EACR,IACL,CAAA,CAAA;AAAA,GAED,MAAA;AACH,IAAS,MAAA,GAAA,IAAA,CAAA;AAAA,GACb;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IACG,SAAU,EAAA,eAAA;AAAA,IACV,KAAO,EAAA,WAAA;AAAA,IACP,aAAY,EAAA,aAAA;AAAA,IACZ,OAAQ,EAAA,aAAA;AAAA,GACZ,CACJ,CACJ,CAGH,EAAA,UAAA,oBACI,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}