@learncard/react 2.8.62 → 2.9.2

package/dist/cjs/{JobListCard-f74f0302.js.map → JobListCard-c53660e8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"JobListCard-f74f0302.js","sources":["../../src/components/JobListCard/JobListCard.tsx"],"sourcesContent":["import React from 'react';\nimport { JobListCardProps } from '../../types';\nimport { TYPE_TO_MINI_ICON } from '../../constants/';\nimport { LCSubtypes } from '../../types';\n\nconst TYPE_TO_COLOR: any = {\n    course: 'bg-emerald-50',\n    achievement: 'bg-spice-50',\n    skill: 'bg-indigo-50',\n};\n\nconst TYPE_TO_TEXT_COLOR: any = {\n    course: 'text-emerald-700',\n    achievement: 'text-spice-500',\n    skill: 'text-indigo-600',\n};\n\ntype JobListingBubbleProps = {\n    count: number | string | undefined;\n    type: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill;\n    className?: string;\n};\n\nexport const JobListingBubble: React.FC<JobListingBubbleProps> = ({\n    count = 0,\n    type = LCSubtypes.skill,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n    const textColor = TYPE_TO_TEXT_COLOR[type];\n    if (count === 0) return <></>;\n    return (\n        <div\n            className={`job-card-stat-bubble px-[10px] px-[5px] flex-nowrap rounded-[30px] flex ${bgColor} min-w-[48px] min-w-[90px] h-[30px] justify-center items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"mr-[3px]\" />\n            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>\n        </div>\n    );\n};\n\nexport const JobListCard: React.FC<JobListCardProps> = ({\n    company,\n    className = 'job-listing-card',\n    title,\n    compensation,\n    location,\n    locationRequirement,\n    timeRequirement,\n    qualificationDisplay,\n    percentQualifiedDisplay,\n    postDateDisplay,\n    customButtonComponent,\n    imgThumb,\n    isBookmarked,\n    onBookmark,\n    onClick,\n}) => {\n    const courseReqCount = qualificationDisplay?.courses?.totalRequiredCount;\n    const achievementsReqCount = qualificationDisplay?.achievements?.totalRequiredCount;\n    const skillsReqCount = qualificationDisplay?.skills?.totalRequiredCount;\n\n    const courseCountDisplay =\n        courseReqCount &&\n        `${qualificationDisplay?.courses?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.courses?.totalRequiredCount ?? 0\n        }`;\n    const achievementsCountDisplay =\n        achievementsReqCount &&\n        `${qualificationDisplay?.achievements?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.achievements?.totalRequiredCount ?? 0\n        }`;\n    const skillsCountDisplay =\n        skillsReqCount &&\n        `${qualificationDisplay?.skills?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.skills?.totalRequiredCount ?? 0\n        }`;\n\n    const qualifiedText = percentQualifiedDisplay\n        ? `${percentQualifiedDisplay}% Qualified - Apply`\n        : 'Apply';\n\n    let topText = '';\n    if (!compensation && timeRequirement) topText = timeRequirement;\n    if (!timeRequirement && compensation) topText = compensation;\n    if (timeRequirement && compensation) topText = `${compensation} • ${timeRequirement}`;\n\n    let locationText = '';\n    if (!location && locationRequirement) locationText = locationRequirement;\n    if (!locationRequirement && location) locationText = location;\n    if (locationRequirement && location) locationText = `${locationRequirement} • ${location}`;\n\n    const defaultButton = (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            className=\"mt-[10px] bg-cyan-700 py-[15px] px-[2px] rounded-[40px] text-grayscale-50 text-[17px] font-bold\"\n        >\n            {qualifiedText}\n        </button>\n    );\n\n    const buttonComponent = customButtonComponent ? customButtonComponent : defaultButton;\n\n    return (\n        <div\n            className={`flex flex-col justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] min-h-[260px] rounded-[20px] ${className}`}\n        >\n            <div className=\"job-listing-top flex\">\n                <div className=\"flex text-grayscale-500 text-xs uppercase w-full line-clamp-1\">\n                    {topText}\n                </div>\n            </div>\n            <p className=\"text-grayscale-500 text-xs line-clamp-1 flex-shrink-0\">\n                {' '}\n                {postDateDisplay}\n            </p>\n\n            <div className=\"job-listing-center flex mt-[5px]\">\n                {imgThumb && (\n                    <img\n                        className=\"object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]\"\n                        src={imgThumb}\n                    />\n                )}\n\n                <div className=\"job-listing-description flex flex-col\">\n                    <h4 className=\"text-lg font-bold line-clamp-2\">{title}</h4>\n                    <p className=\"text-sm line-clamp-1\">{company}</p>\n                    <span className=\"text-sm line-clamp-1\">{locationText}</span>\n                </div>\n            </div>\n\n            <div className=\"job-listing-qualifications mt-[10px]\">\n                <div className=\"course-card-counts-container flex items-center flex-wrap\">\n                    <JobListingBubble\n                        type={LCSubtypes.course}\n                        count={courseCountDisplay}\n                        className={'mr-[5px] min-w-[100px]'}\n                    />\n\n                    <JobListingBubble\n                        type={LCSubtypes.achievement}\n                        count={achievementsCountDisplay}\n                        className={'mr-[5px] min-w-[100px]'}\n                    />\n\n                    <JobListingBubble\n                        type={LCSubtypes.skill}\n                        count={skillsCountDisplay}\n                        className={'mr-[0px min-w-[100px]]'}\n                    />\n                </div>\n            </div>\n\n            {buttonComponent}\n        </div>\n    );\n};\n\nexport default JobListCard;\n"],"names":["LCSubtypes","TYPE_TO_MINI_ICON","React"],"mappings":"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"}
+{"version":3,"file":"JobListCard-c53660e8.js","sources":["../../src/components/JobListCard/JobListCard.tsx"],"sourcesContent":["import React from 'react';\nimport { JobListCardProps } from '../../types';\nimport { TYPE_TO_MINI_ICON } from '../../constants/';\nimport { LCSubtypes } from '../../types';\n\nconst TYPE_TO_COLOR: any = {\n    course: 'bg-emerald-50',\n    achievement: 'bg-spice-50',\n    skill: 'bg-indigo-50',\n};\n\nconst TYPE_TO_TEXT_COLOR: any = {\n    course: 'text-emerald-700',\n    achievement: 'text-spice-500',\n    skill: 'text-indigo-600',\n};\n\ntype JobListingBubbleProps = {\n    count: number | string | undefined;\n    type: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill;\n    className?: string;\n};\n\nexport const JobListingBubble: React.FC<JobListingBubbleProps> = ({\n    count = 0,\n    type = LCSubtypes.skill,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n    const textColor = TYPE_TO_TEXT_COLOR[type];\n    if (count === 0) return <></>;\n    return (\n        <div\n            className={`job-card-stat-bubble px-[10px] px-[5px] flex-nowrap rounded-[30px] flex ${bgColor} min-w-[48px] min-w-[90px] h-[30px] justify-center items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"mr-[3px]\" />\n            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>\n        </div>\n    );\n};\n\nexport const JobListCard: React.FC<JobListCardProps> = ({\n    company,\n    className = 'job-listing-card',\n    title,\n    compensation,\n    location,\n    locationRequirement,\n    timeRequirement,\n    qualificationDisplay,\n    percentQualifiedDisplay,\n    postDateDisplay,\n    customButtonComponent,\n    imgThumb,\n    isBookmarked,\n    onBookmark,\n    onClick,\n}) => {\n    const courseReqCount = qualificationDisplay?.courses?.totalRequiredCount;\n    const achievementsReqCount = qualificationDisplay?.achievements?.totalRequiredCount;\n    const skillsReqCount = qualificationDisplay?.skills?.totalRequiredCount;\n\n    const courseCountDisplay =\n        courseReqCount &&\n        `${qualificationDisplay?.courses?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.courses?.totalRequiredCount ?? 0\n        }`;\n    const achievementsCountDisplay =\n        achievementsReqCount &&\n        `${qualificationDisplay?.achievements?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.achievements?.totalRequiredCount ?? 0\n        }`;\n    const skillsCountDisplay =\n        skillsReqCount &&\n        `${qualificationDisplay?.skills?.fulfilledCount ?? 0}/${\n            qualificationDisplay?.skills?.totalRequiredCount ?? 0\n        }`;\n\n    const qualifiedText = percentQualifiedDisplay\n        ? `${percentQualifiedDisplay}% Qualified - Apply`\n        : 'Apply';\n\n    let topText = '';\n    if (!compensation && timeRequirement) topText = timeRequirement;\n    if (!timeRequirement && compensation) topText = compensation;\n    if (timeRequirement && compensation) topText = `${compensation} • ${timeRequirement}`;\n\n    let locationText = '';\n    if (!location && locationRequirement) locationText = locationRequirement;\n    if (!locationRequirement && location) locationText = location;\n    if (locationRequirement && location) locationText = `${locationRequirement} • ${location}`;\n\n    const defaultButton = (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            className=\"mt-[10px] bg-cyan-700 py-[15px] px-[2px] rounded-[40px] text-grayscale-50 text-[17px] font-bold\"\n        >\n            {qualifiedText}\n        </button>\n    );\n\n    const buttonComponent = customButtonComponent ? customButtonComponent : defaultButton;\n\n    return (\n        <div\n            className={`flex flex-col justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] min-h-[260px] rounded-[20px] ${className}`}\n        >\n            <div className=\"job-listing-top flex\">\n                <div className=\"flex text-grayscale-500 text-xs uppercase w-full line-clamp-1\">\n                    {topText}\n                </div>\n            </div>\n            <p className=\"text-grayscale-500 text-xs line-clamp-1 flex-shrink-0\">\n                {' '}\n                {postDateDisplay}\n            </p>\n\n            <div className=\"job-listing-center flex mt-[5px]\">\n                {imgThumb && (\n                    <img\n                        className=\"object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]\"\n                        src={imgThumb}\n                    />\n                )}\n\n                <div className=\"job-listing-description flex flex-col\">\n                    <h4 className=\"text-lg font-bold line-clamp-2\">{title}</h4>\n                    <p className=\"text-sm line-clamp-1\">{company}</p>\n                    <span className=\"text-sm line-clamp-1\">{locationText}</span>\n                </div>\n            </div>\n\n            <div className=\"job-listing-qualifications mt-[10px]\">\n                <div className=\"course-card-counts-container flex items-center flex-wrap\">\n                    <JobListingBubble\n                        type={LCSubtypes.course}\n                        count={courseCountDisplay}\n                        className={'mr-[5px] min-w-[100px]'}\n                    />\n\n                    <JobListingBubble\n                        type={LCSubtypes.achievement}\n                        count={achievementsCountDisplay}\n                        className={'mr-[5px] min-w-[100px]'}\n                    />\n\n                    <JobListingBubble\n                        type={LCSubtypes.skill}\n                        count={skillsCountDisplay}\n                        className={'mr-[0px min-w-[100px]]'}\n                    />\n                </div>\n            </div>\n\n            {buttonComponent}\n        </div>\n    );\n};\n\nexport default JobListCard;\n"],"names":["LCSubtypes","TYPE_TO_MINI_ICON","React"],"mappings":"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"}

package/dist/cjs/LearnCardCreditCardBackFace-62330eea.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var React = require('react');
+var ContactlessSymbol = require('./contactless-symbol.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ContactlessSymbol__default = /*#__PURE__*/_interopDefaultLegacy(ContactlessSymbol);
+
+const LearnCardCreditCardBackFace = ({
+  className,
+  card,
+  user
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: `flex flex-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`
+      },
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-between items-center w-full px-3 pt-4 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "Please visit LearnCard app or learncard.com for assistance"), /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "854-000-000-24")),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "w-full h-8 bg-white mt-1" }),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-end items-center w-full px-3 mt-1 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "IDEMIA 0 00000 00000 0/00")),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center px-3 pt-2 w-full text-white" }, /* @__PURE__ */ React__default["default"].createElement("div", null, (user == null ? void 0 : user.username) && /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-[10px] font-medium",
+          "data-testid": "credit-card-backface-username"
+        },
+        user == null ? void 0 : user.username
+      ), /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-sm tracking-wider",
+          "data-testid": "credit-card-backface-fullname"
+        },
+        (_a = user == null ? void 0 : user.fullName) != null ? _a : ""
+      ), (card == null ? void 0 : card.cardIssueDate) && /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-[10px] tracking-wider",
+          "data-testid": "credit-card-backface-issueDate"
+        },
+        "MEMBER SINCE ",
+        card == null ? void 0 : card.cardIssueDate
+      )), /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("img", { src: ContactlessSymbol__default["default"], alt: "contactless icon" }))),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center px-3 pt-2 w-full text-white" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-sm tracking-wider",
+          "data-testid": "credit-card-backface-cardNum"
+        },
+        (_b = card == null ? void 0 : card.cardNumber) != null ? _b : ""
+      ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-center" }, /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-[10px] tracking-wider",
+          "data-testid": "credit-card-backface-expDate"
+        },
+        "EXP ",
+        (_c = card == null ? void 0 : card.cardExpirationDate) != null ? _c : ""
+      ), (card == null ? void 0 : card.cardSecurityCode) && /* @__PURE__ */ React__default["default"].createElement(
+        "p",
+        {
+          className: "text-[10px] tracking-wider",
+          "data-testid": "credit-card-backface-secCode"
+        },
+        "SEC ",
+        (_d = card == null ? void 0 : card.cardSecurityCode) != null ? _d : ""
+      ))), /* @__PURE__ */ React__default["default"].createElement("div", null, /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]" }))),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex justify-start items-center w-full px-3 py-2 text-white" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "text-[6px]" }, "Issued by the bank of Tennessee pursuant to license by Mastercard International"))
+    )
+  );
+};
+
+exports.LearnCardCreditCardBackFace = LearnCardCreditCardBackFace;
+//# sourceMappingURL=LearnCardCreditCardBackFace-62330eea.js.map

package/dist/cjs/{LearnCardCreditCardBackFace-87cc8b9f.js.map → LearnCardCreditCardBackFace-62330eea.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardBackFace-87cc8b9f.js","sources":["../../src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx"],"sourcesContent":["import React from 'react';\n\nimport ContactlessSymbol from '../../assets/images/contactless-symbol.svg';\n\nimport { LearnCardCreditCardBackFaceProps } from './types';\n\nexport const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFaceProps> = ({\n    className,\n    card,\n    user,\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-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"flex justify-between items-center w-full px-3 pt-4 text-white\">\n                    <p className=\"text-[6px]\">\n                        Please visit LearnCard app or learncard.com for assistance\n                    </p>\n                    <p className=\"text-[6px]\">854-000-000-24</p>\n                </div>\n\n                <div className=\"w-full h-8 bg-white mt-1\" />\n\n                <div className=\"flex justify-end items-center w-full px-3 mt-1 text-white\">\n                    <p className=\"text-[6px]\">IDEMIA 0 00000 00000 0/00</p>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div>\n                        {user?.username && (\n                            <p\n                                className=\"text-[10px] font-medium\"\n                                data-testid=\"credit-card-backface-username\"\n                            >\n                                {user?.username}\n                            </p>\n                        )}\n\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-fullname\"\n                        >\n                            {user?.fullName ?? ''}\n                        </p>\n                        {card?.cardIssueDate && (\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-issueDate\"\n                            >\n                                MEMBER SINCE {card?.cardIssueDate}\n                            </p>\n                        )}\n                    </div>\n                    <div>\n                        <img src={ContactlessSymbol} alt=\"contactless icon\" />\n                    </div>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div className=\"flex flex-col\">\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-cardNum\"\n                        >\n                            {card?.cardNumber ?? ''}\n                        </p>\n                        <div className=\"flex flex-row justify-between items-center\">\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-expDate\"\n                            >\n                                EXP {card?.cardExpirationDate ?? ''}\n                            </p>\n                            {card?.cardSecurityCode && (\n                                <p\n                                    className=\"text-[10px] tracking-wider\"\n                                    data-testid=\"credit-card-backface-secCode\"\n                                >\n                                    SEC {card?.cardSecurityCode ?? ''}\n                                </p>\n                            )}\n                        </div>\n                    </div>\n                    <div>\n                        <div className=\"h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]\" />\n                    </div>\n                </div>\n\n                <div className=\"flex justify-start items-center w-full px-3 py-2 text-white\">\n                    <p className=\"text-[6px]\">\n                        Issued by the bank of Tennessee pursuant to license by Mastercard\n                        International\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardBackFace;\n"],"names":["React","ContactlessSymbol"],"mappings":"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"}
+{"version":3,"file":"LearnCardCreditCardBackFace-62330eea.js","sources":["../../src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx"],"sourcesContent":["import React from 'react';\n\nimport ContactlessSymbol from '../../assets/images/contactless-symbol.svg';\n\nimport { LearnCardCreditCardBackFaceProps } from './types';\n\nexport const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFaceProps> = ({\n    className,\n    card,\n    user,\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-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`}\n            >\n                <div className=\"flex justify-between items-center w-full px-3 pt-4 text-white\">\n                    <p className=\"text-[6px]\">\n                        Please visit LearnCard app or learncard.com for assistance\n                    </p>\n                    <p className=\"text-[6px]\">854-000-000-24</p>\n                </div>\n\n                <div className=\"w-full h-8 bg-white mt-1\" />\n\n                <div className=\"flex justify-end items-center w-full px-3 mt-1 text-white\">\n                    <p className=\"text-[6px]\">IDEMIA 0 00000 00000 0/00</p>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div>\n                        {user?.username && (\n                            <p\n                                className=\"text-[10px] font-medium\"\n                                data-testid=\"credit-card-backface-username\"\n                            >\n                                {user?.username}\n                            </p>\n                        )}\n\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-fullname\"\n                        >\n                            {user?.fullName ?? ''}\n                        </p>\n                        {card?.cardIssueDate && (\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-issueDate\"\n                            >\n                                MEMBER SINCE {card?.cardIssueDate}\n                            </p>\n                        )}\n                    </div>\n                    <div>\n                        <img src={ContactlessSymbol} alt=\"contactless icon\" />\n                    </div>\n                </div>\n\n                <div className=\"flex flex-row justify-between items-center px-3 pt-2 w-full text-white\">\n                    <div className=\"flex flex-col\">\n                        <p\n                            className=\"text-sm tracking-wider\"\n                            data-testid=\"credit-card-backface-cardNum\"\n                        >\n                            {card?.cardNumber ?? ''}\n                        </p>\n                        <div className=\"flex flex-row justify-between items-center\">\n                            <p\n                                className=\"text-[10px] tracking-wider\"\n                                data-testid=\"credit-card-backface-expDate\"\n                            >\n                                EXP {card?.cardExpirationDate ?? ''}\n                            </p>\n                            {card?.cardSecurityCode && (\n                                <p\n                                    className=\"text-[10px] tracking-wider\"\n                                    data-testid=\"credit-card-backface-secCode\"\n                                >\n                                    SEC {card?.cardSecurityCode ?? ''}\n                                </p>\n                            )}\n                        </div>\n                    </div>\n                    <div>\n                        <div className=\"h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]\" />\n                    </div>\n                </div>\n\n                <div className=\"flex justify-start items-center w-full px-3 py-2 text-white\">\n                    <p className=\"text-[6px]\">\n                        Issued by the bank of Tennessee pursuant to license by Mastercard\n                        International\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default LearnCardCreditCardBackFace;\n"],"names":["React","ContactlessSymbol"],"mappings":"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"}

package/dist/cjs/LearnCardCreditCardFrontFace-aca1b7bc.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var React = require('react');
+var index = require('./index-ec1d26f1.js');
+var CardChip = require('./card-chip.svg');
+var MasterCardLogo = require('./master-card-logo.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var CardChip__default = /*#__PURE__*/_interopDefaultLegacy(CardChip);
+var MasterCardLogo__default = /*#__PURE__*/_interopDefaultLegacy(MasterCardLogo);
+
+const LearnCardCreditCardFrontFace = ({
+  userImage,
+  userImageComponent = null,
+  qrCodeValue,
+  className,
+  showActionButton = false,
+  actionButtonText = "Open Card",
+  onClick = () => {
+  },
+  children
+}) => {
+  var _a, _b;
+  let userImageEl = null;
+  if (userImage) {
+    userImageEl = /* @__PURE__ */ React__default["default"].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__default["default"].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__default["default"].createElement(
+    "div",
+    {
+      className: `flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        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`
+      },
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble" }),
+      showActionButton && /* @__PURE__ */ React__default["default"].createElement(
+        "button",
+        {
+          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",
+          onClick,
+          "data-testid": "credit-card-frontface-button"
+        },
+        actionButtonText
+      ),
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row justify-between items-start w-full h-full relative" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-1 flex-col" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "pl-8" }, /* @__PURE__ */ React__default["default"].createElement("p", { className: "w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title" }, "LEARNCARD"), /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          src: (_a = CardChip__default["default"]) != null ? _a : "",
+          alt: "card chip",
+          className: "h-[30px] w-[42px]"
+        }
+      )), userImageEl), qrCodeValue && /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "h-auto relative qr-code-container" }, /* @__PURE__ */ React__default["default"].createElement(
+        index.QRCodeSVG,
+        {
+          className: "h-full w-full",
+          value: qrCodeValue,
+          "data-testid": "credit-card-qr-code",
+          bgColor: "transparent"
+        }
+      ))), /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          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-aca1b7bc.js.map

package/dist/cjs/{LearnCardCreditCardFrontFace-39eeb89a.js.map → LearnCardCreditCardFrontFace-aca1b7bc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-39eeb89a.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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"}
+{"version":3,"file":"LearnCardCreditCardFrontFace-aca1b7bc.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/{LearnPill-d80ba2e6.js → LearnPill-da2d2a8e.js}

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var index = require('./index-5488badc.js');
-var index$1 = require('./index-08002ab6.js');
+var index$1 = require('./index-ba659c28.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,15 +26,15 @@ const LearnPill = ({
   const imgSrc = index$1.TYPE_TO_MINI_ICON[type];
   const bgColor = TYPE_TO_COLOR[type];
   const textColor = TYPE_TO_TEXT_COLOR[type];
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`
-  }, /* @__PURE__ */ React__default["default"].createElement("img", {
-    src: imgSrc,
-    className: "mr-[5px]"
-  }), /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: `flex items-center text-sm ${textColor} font-bold`
-  }, count));
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      className: `course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`
+    },
+    /* @__PURE__ */ React__default["default"].createElement("img", { src: imgSrc, className: "mr-[5px]" }),
+    /* @__PURE__ */ React__default["default"].createElement("span", { className: `flex items-center text-sm ${textColor} font-bold` }, count)
+  );
 };
 
 exports.LearnPill = LearnPill;
-//# sourceMappingURL=LearnPill-d80ba2e6.js.map
+//# sourceMappingURL=LearnPill-da2d2a8e.js.map

package/dist/cjs/{LearnPill-d80ba2e6.js.map → LearnPill-da2d2a8e.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnPill-d80ba2e6.js","sources":["../../src/components/LearnPill/LearnPill.tsx"],"sourcesContent":["import React from 'react';\nimport { LearnPillProps, LCSubtypes } from '../../types';\nimport { TYPE_TO_MINI_ICON } from '../../constants/';\n\nconst TYPE_TO_COLOR: any = {\n    [LCSubtypes.course]: 'bg-emerald-50',\n    [LCSubtypes.achievement]: 'bg-spice-50',\n    [LCSubtypes.skill]: 'bg-indigo-50',\n};\n\nconst TYPE_TO_TEXT_COLOR: any = {\n    [LCSubtypes.course]: 'text-emerald-700',\n    [LCSubtypes.achievement]: 'text-spice-500',\n    [LCSubtypes.skill]: 'text-indigo-600',\n};\n\nexport const LearnPill: React.FC<LearnPillProps> = ({\n    count = 0,\n    type = LCSubtypes.course,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n    const textColor = TYPE_TO_TEXT_COLOR[type];\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"mr-[5px]\" />\n            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>\n        </div>\n    );\n};\n\nexport default LearnPill;\n"],"names":["LCSubtypes","TYPE_TO_MINI_ICON","React"],"mappings":";;;;;;;;;;AAIA,MAAM,aAAqB,GAAA;AAAA,EACvB,CAACA,iBAAW,MAAS,GAAA,eAAA;AAAA,EACrB,CAACA,iBAAW,WAAc,GAAA,aAAA;AAAA,EAC1B,CAACA,iBAAW,KAAQ,GAAA,cAAA;AACxB,CAAA,CAAA;AAEA,MAAM,kBAA0B,GAAA;AAAA,EAC5B,CAACA,iBAAW,MAAS,GAAA,kBAAA;AAAA,EACrB,CAACA,iBAAW,WAAc,GAAA,gBAAA;AAAA,EAC1B,CAACA,iBAAW,KAAQ,GAAA,iBAAA;AACxB,CAAA,CAAA;AAEO,MAAM,YAAsC,CAAC;AAAA,EAChD,KAAQ,GAAA,CAAA;AAAA,EACR,OAAOA,gBAAW,CAAA,MAAA;AAAA,EAClB,SAAA;AACJ,CAAM,KAAA;AACF,EAAA,MAAM,SAASC,yBAAkB,CAAA,IAAA,CAAA,CAAA;AACjC,EAAA,MAAM,UAAU,aAAc,CAAA,IAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAY,kBAAmB,CAAA,IAAA,CAAA,CAAA;AACrC,EAAA,uBACKC,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAA,EAAW,yDAAyD,OAA4D,CAAA,kDAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,kBAE/HA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,GAAK,EAAA,MAAA;AAAA,IAAQ,SAAU,EAAA,UAAA;AAAA,GAAW,mBACtCA,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,CAA6B,0BAAA,EAAA,SAAA,CAAA,UAAA,CAAA;AAAA,GAAA,EAAwB,KAAM,CAChF,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"LearnPill-da2d2a8e.js","sources":["../../src/components/LearnPill/LearnPill.tsx"],"sourcesContent":["import React from 'react';\nimport { LearnPillProps, LCSubtypes } from '../../types';\nimport { TYPE_TO_MINI_ICON } from '../../constants/';\n\nconst TYPE_TO_COLOR: any = {\n    [LCSubtypes.course]: 'bg-emerald-50',\n    [LCSubtypes.achievement]: 'bg-spice-50',\n    [LCSubtypes.skill]: 'bg-indigo-50',\n};\n\nconst TYPE_TO_TEXT_COLOR: any = {\n    [LCSubtypes.course]: 'text-emerald-700',\n    [LCSubtypes.achievement]: 'text-spice-500',\n    [LCSubtypes.skill]: 'text-indigo-600',\n};\n\nexport const LearnPill: React.FC<LearnPillProps> = ({\n    count = 0,\n    type = LCSubtypes.course,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n    const textColor = TYPE_TO_TEXT_COLOR[type];\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"mr-[5px]\" />\n            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>\n        </div>\n    );\n};\n\nexport default LearnPill;\n"],"names":["LCSubtypes","TYPE_TO_MINI_ICON","React"],"mappings":";;;;;;;;;;AAIA,MAAM,aAAqB,GAAA;AAAA,EACvB,CAACA,gBAAW,CAAA,MAAM,GAAG,eAAA;AAAA,EACrB,CAACA,gBAAW,CAAA,WAAW,GAAG,aAAA;AAAA,EAC1B,CAACA,gBAAW,CAAA,KAAK,GAAG,cAAA;AACxB,CAAA,CAAA;AAEA,MAAM,kBAA0B,GAAA;AAAA,EAC5B,CAACA,gBAAW,CAAA,MAAM,GAAG,kBAAA;AAAA,EACrB,CAACA,gBAAW,CAAA,WAAW,GAAG,gBAAA;AAAA,EAC1B,CAACA,gBAAW,CAAA,KAAK,GAAG,iBAAA;AACxB,CAAA,CAAA;AAEO,MAAM,YAAsC,CAAC;AAAA,EAChD,KAAQ,GAAA,CAAA;AAAA,EACR,OAAOA,gBAAW,CAAA,MAAA;AAAA,EAClB,SAAA;AACJ,CAAM,KAAA;AACF,EAAM,MAAA,MAAA,GAASC,0BAAkB,IAAI,CAAA,CAAA;AACrC,EAAM,MAAA,OAAA,GAAU,cAAc,IAAI,CAAA,CAAA;AAClC,EAAM,MAAA,SAAA,GAAY,mBAAmB,IAAI,CAAA,CAAA;AACzC,EACI,uBAAAC,yBAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAW,EAAA,CAAA,sDAAA,EAAyD,OAAO,CAAA,kDAAA,EAAqD,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,oBAExIA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,MAAA,EAAQ,WAAU,UAAW,EAAA,CAAA;AAAA,4DACtC,MAAK,EAAA,EAAA,SAAA,EAAW,CAA6B,0BAAA,EAAA,SAAS,gBAAe,KAAM,CAAA;AAAA,GAChF,CAAA;AAER;;;;"}

package/dist/cjs/{Lightbox-9aeb2f7b.js → Lightbox-d72e19ba.js}

@@ -8,25 +8,36 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const X = ({ className = "", strokeWidth = "2" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    viewBox: "0 0 32 32",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className,
-    "aria-label": "X"
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M25 7L7 25",
-    stroke: "currentColor",
-    strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M25 25L7 7",
-    stroke: "currentColor",
-    strokeWidth,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "svg",
+    {
+      viewBox: "0 0 32 32",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-label": "X"
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      "path",
+      {
+        d: "M25 7L7 25",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React__default["default"].createElement(
+      "path",
+      {
+        d: "M25 25L7 7",
+        stroke: "currentColor",
+        strokeWidth,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
 };
 
 var __async$1 = (__this, __arguments, generator) => {
@@ -49,7 +60,7 @@ var __async$1 = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const getVideoMetadata = (url) => __async$1(void 0, null, function* () {
+const getVideoMetadata = (url) => __async$1(null, null, function* () {
   var _a, _b, _c;
   try {
     const parsed = new URL(url);
@@ -65,8 +76,7 @@ const getVideoMetadata = (url) => __async$1(void 0, null, function* () {
         let thumb = `https://img.youtube.com/vi/${id}/maxresdefault.jpg`;
         try {
           const res = yield fetch(thumb, { method: "HEAD" });
-          if (!res.ok)
-            thumb = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
+          if (!res.ok) thumb = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
         } catch (e) {
           thumb = `https://img.youtube.com/vi/${id}/hqdefault.jpg`;
         }
@@ -186,19 +196,16 @@ const Lightbox = ({
   const goToNextItem = React.useCallback(() => {
     const currentIndex = items.findIndex((item) => item.url === currentUrl);
     const nextItem = items.at((currentIndex + 1) % items.length);
-    if (nextItem)
-      setCurrentUrl(nextItem.url);
+    if (nextItem) setCurrentUrl(nextItem.url);
   }, [currentUrl, items, setCurrentUrl]);
   const goToPreviousItem = React.useCallback(() => {
     const currentIndex = items.findIndex((item) => item.url === currentUrl);
     const previousItem = items.at((currentIndex - 1 + items.length) % items.length);
-    if (previousItem)
-      setCurrentUrl(previousItem.url);
+    if (previousItem) setCurrentUrl(previousItem.url);
   }, [currentUrl, items, setCurrentUrl]);
   React.useEffect(() => {
     const keydownListener = (e) => {
-      if (!currentUrl || !currentItem)
-        return;
+      if (!currentUrl || !currentItem) return;
       if (e.key === "Escape") {
         e.preventDefault();
         setCurrentUrl(void 0);
@@ -216,7 +223,7 @@ const Lightbox = ({
     return () => window.removeEventListener("keydown", keydownListener);
   }, [currentUrl, currentItem, goToNextItem, goToPreviousItem, setCurrentUrl]);
   React.useEffect(() => {
-    const fetchMetadata = () => __async(void 0, null, function* () {
+    const fetchMetadata = () => __async(null, null, function* () {
       if ((currentItem == null ? void 0 : currentItem.type) === "video") {
         const metadata = yield getVideoMetadata(currentItem.url);
         setVideoMetadata(metadata);
@@ -226,40 +233,45 @@ const Lightbox = ({
     });
     fetchMetadata();
   }, [currentItem]);
-  if (!currentUrl || !currentItem)
-    return null;
+  if (!currentUrl || !currentItem) return null;
   return reactDom.createPortal(
-    /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]",
-      onClick: (e) => {
-        if (e.target !== innerRef.current) {
-          setCurrentUrl(void 0);
+    /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: "absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]",
+        onClick: (e) => {
+          if (e.target !== innerRef.current) {
+            setCurrentUrl(void 0);
+          }
         }
-      }
-    }, showCloseButton && /* @__PURE__ */ React__default["default"].createElement("button", {
-      onClick: () => setCurrentUrl(void 0)
-    }, /* @__PURE__ */ React__default["default"].createElement(X, {
-      className: "absolute w-[30px] h-[30px] top-[20px] right-[20px] cursor-pointer text-white z-[999999]"
-    })), currentItem.type === "photo" && /* @__PURE__ */ React__default["default"].createElement("img", {
-      className: "cursor-pointer max-w-[90vw] max-h-[90vh]",
-      src: currentUrl,
-      onClick: () => enableImageClick && window.open(currentUrl, "_blank"),
-      ref: innerRef,
-      alt: ""
-    }), currentItem.type === "video" && (videoMetadata == null ? void 0 : videoMetadata.embedUrl) && /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "relative w-[90vw] max-w-[800px] aspect-video"
-    }, /* @__PURE__ */ React__default["default"].createElement("iframe", {
-      src: videoMetadata.embedUrl,
-      className: "absolute top-0 left-0 w-full h-full rounded-md",
-      title: "Video player",
-      frameBorder: "0",
-      allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
-      allowFullScreen: true
-    }))),
+      },
+      showCloseButton && /* @__PURE__ */ React__default["default"].createElement("button", { onClick: () => setCurrentUrl(void 0) }, /* @__PURE__ */ React__default["default"].createElement(X, { className: "absolute w-[30px] h-[30px] top-[20px] right-[20px] cursor-pointer text-white z-[999999]" })),
+      currentItem.type === "photo" && /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          className: "cursor-pointer max-w-[90vw] max-h-[90vh]",
+          src: currentUrl,
+          onClick: () => enableImageClick && window.open(currentUrl, "_blank"),
+          ref: innerRef,
+          alt: ""
+        }
+      ),
+      currentItem.type === "video" && (videoMetadata == null ? void 0 : videoMetadata.embedUrl) && /* @__PURE__ */ React__default["default"].createElement("div", { className: "relative w-[90vw] max-w-[800px] aspect-video" }, /* @__PURE__ */ React__default["default"].createElement(
+        "iframe",
+        {
+          src: videoMetadata.embedUrl,
+          className: "absolute top-0 left-0 w-full h-full rounded-md",
+          title: "Video player",
+          frameBorder: "0",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true
+        }
+      ))
+    ),
     document.body
   );
 };
 
 exports.Lightbox = Lightbox;
 exports.X = X;
-//# sourceMappingURL=Lightbox-9aeb2f7b.js.map
+//# sourceMappingURL=Lightbox-d72e19ba.js.map