@learncard/react 2.5.11 → 2.5.13

package/dist/cjs/BoostGenericCard-315c6b82.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoostGenericCard-315c6b82.js","sources":["../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport {BoostGenericCardProps, 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 BoostGenericCard: React.FC<BoostGenericCardProps> = ({\n    title,\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    customThumbComponent,\n    innerOnClick,\n    bgImgSrc,\n    issuerName,\n    dateDisplay,\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\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-[250px] 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=\"boost-small-card inner-click-containe z-10\" 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-[17px] p-[0px] font-semibold text-center  text-grayscale-900 line-clamp-2\">\n                        {title}\n                    </p>\n                </section>\n\n             \n\n                <section className=\"small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full\">\n               \n                        <span className=\"flex items-center justify-center small-generic-boost-issuer-name line-clamp-1 text-[12px] text-grayscale-700 font-bold px-[6px]\">by {issuerName}</span>\n                        <p className=\"small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]\">{dateDisplay}</p>\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            </div>\n          \n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","CircleCheckButton"],"mappings":"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"}
+{"version":3,"file":"BoostGenericCard-315c6b82.js","sources":["../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { BoostGenericCardProps, 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 BoostGenericCard: React.FC<BoostGenericCardProps> = ({\n    title,\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    customThumbComponent,\n    innerOnClick,\n    bgImgSrc,\n    issuerName,\n    dateDisplay,\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\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-[250px] 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=\"boost-small-card inner-click-containe z-10\" 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-[17px] p-[0px] font-semibold text-center  text-grayscale-900 line-clamp-2\">\n                        {title}\n                    </p>\n                </section>\n\n                <section className=\"small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full\">\n                    <span className=\"flex items-center justify-center small-generic-boost-issuer-name line-clamp-1 text-[12px] text-grayscale-700 font-bold px-[6px]\">\n                        by {issuerName}\n                    </span>\n                    <p className=\"small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]\">\n                        {dateDisplay}\n                    </p>\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            </div>\n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","CircleCheckButton"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-c340a7f0.js');
+var index = require('./index-82de573c.js');
 var CardChip = require('./card-chip.svg');
 var MasterCardLogo = require('./master-card-logo.svg');
 
@@ -75,4 +75,4 @@ const LearnCardCreditCardFrontFace = ({
 };
 
 exports.LearnCardCreditCardFrontFace = LearnCardCreditCardFrontFace;
-//# sourceMappingURL=LearnCardCreditCardFrontFace-4ce0d049.js.map
+//# sourceMappingURL=LearnCardCreditCardFrontFace-4452fd7a.js.map

package/dist/cjs/{LearnCardCreditCardFrontFace-4ce0d049.js.map → LearnCardCreditCardFrontFace-4452fd7a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LearnCardCreditCardFrontFace-4ce0d049.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-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/NotificationBoostCard-3b3bd47d.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var React = require('react');
+var X = require('./X.svg');
+var types = require('./types-c83b33ec.js');
+var notifications = require('./notifications-56c6fc94.js');
+var DefaultFace = require('./default-face.jpeg');
+var Checkmark = require('./Checkmark-f611aa4d.js');
+var ArrowArcLeft = require('./ArrowArcLeft.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
+var DefaultFace__default = /*#__PURE__*/_interopDefaultLegacy(DefaultFace);
+var ArrowArcLeft__default = /*#__PURE__*/_interopDefaultLegacy(ArrowArcLeft);
+
+const NotificationBoostCard = ({
+  title,
+  customThumbComponent,
+  className,
+  thumbImage,
+  notificationType = notifications.NotificationTypeEnum.Achievement,
+  issueDate,
+  issuerInfo,
+  claimStatus = false,
+  loadingState = false,
+  handleButtonClick,
+  handleCancelClick,
+  handleCardClick,
+  showIssuerInfo = true,
+  isArchived
+}) => {
+  var _a, _b;
+  const [isClaimed, setIsClaimed] = React.useState(claimStatus || false);
+  const [isLoading, setIsLoading] = React.useState(loadingState || false);
+  React.useEffect(() => {
+    setIsClaimed(claimStatus);
+  }, [claimStatus]);
+  React.useEffect(() => {
+    setIsLoading(loadingState);
+  }, [loadingState]);
+  const {
+    iconCircleStyles,
+    textStyles,
+    viewButtonStyles,
+    claimedButtonStyles,
+    unclaimedButtonStyles,
+    typeText
+  } = types.NotificationTypeStyles[notificationType];
+  const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
+  let buttonText = "";
+  if (isClaimed) {
+    buttonText = "Claimed";
+  } else if (!isClaimed) {
+    buttonText = "Claim";
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "notification-card-left-side px-[0px] flex"
+  }, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("div", {
+    onClick: handleCardClick,
+    className: `overflow-hidden cursor-pointer w-[90px] h-[90px] rounded-full flex items-start ${iconCircleStyles} notification-card-thumbnail`
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: thumbImage,
+    alt: "Notification Thumb",
+    className: "w-full h-full w-[100px] h-[100px] object-cover"
+  })), customThumbComponent && { customThumbComponent }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col justify-center items-start relative w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "text-left ml-3 flex flex-col items-start justify-start w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+    onClick: handleCardClick,
+    className: "cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
+    "data-testid": "notification-title"
+  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: `font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`,
+    "data-testid": "notification-type"
+  }, typeText, " ", issueDate && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
+    "data-testid": "notification-cred-issue-date"
+  }, "\u2022 ", issueDate)), showIssuerInfo && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "notification-card-issuer-info flex items-center mt-[10px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "h-full w-full object-cover",
+    src: (issuerInfo == null ? void 0 : issuerInfo.image) || DefaultFace__default["default"],
+    alt: "profile"
+  })), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "notification-issuer-info-text flex items-center px-[10px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[13px] text-gray-700 font-medium"
+  }, "From ", (issuerInfo == null ? void 0 : issuerInfo.fullName) || (issuerInfo == null ? void 0 : issuerInfo.displayName)))), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-between mt-3 w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: `notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
+    onClick: handleButtonClick,
+    role: "button",
+    name: "notification-claim-button"
+  }, isClaimed && /* @__PURE__ */ React__default["default"].createElement(Checkmark.Checkmark, {
+    className: "h-[24px] p-0 m-0"
+  }), " ", isLoading ? "Loading..." : buttonText), /* @__PURE__ */ React__default["default"].createElement("button", {
+    onClick: handleCancelClick,
+    className: `rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`,
+    role: "button",
+    name: "notification-view-button"
+  }, !isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_a = X__default["default"]) != null ? _a : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }), isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_b = ArrowArcLeft__default["default"]) != null ? _b : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }))))));
+};
+
+exports.NotificationBoostCard = NotificationBoostCard;
+//# sourceMappingURL=NotificationBoostCard-3b3bd47d.js.map

package/dist/cjs/NotificationBoostCard-3b3bd47d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBoostCard-3b3bd47d.js","sources":["../../src/components/NotificationBoostCard/NotificationBoostCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport X from '../../assets/images/X.svg';\nimport { NotificationBoostCardProps } from './types';\nimport { NotificationTypeStyles } from '../Notification/types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport Checkmark from '../svgs/Checkmark';\nimport ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';\n\nexport const NotificationBoostCard: React.FC<NotificationBoostCardProps> = ({\n    title,\n    customThumbComponent,\n    className,\n    thumbImage,\n    notificationType = NotificationTypeEnum.Achievement,\n    issueDate,\n    issuerInfo,\n    claimStatus = false,\n    loadingState = false,\n    handleButtonClick,\n    handleCancelClick,\n    handleCardClick,\n    showIssuerInfo = true,\n    isArchived,\n}) => {\n    const [isClaimed, setIsClaimed] = useState<boolean>(claimStatus || false);\n    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);\n\n    useEffect(() => {\n        setIsClaimed(claimStatus);\n    }, [claimStatus]);\n\n    useEffect(() => {\n        setIsLoading(loadingState);\n    }, [loadingState]);\n\n    const {\n        iconCircleStyles,\n        textStyles,\n        viewButtonStyles,\n        claimedButtonStyles,\n        unclaimedButtonStyles,\n        typeText,\n    } = NotificationTypeStyles[notificationType];\n\n    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n    let buttonText: string = '';\n\n    if (isClaimed) {\n        buttonText = 'Claimed';\n    } else if (!isClaimed) {\n        buttonText = 'Claim';\n    }\n\n    return (\n        <div\n            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}\n        >\n            <div className=\"notification-card-left-side px-[0px] flex\">\n                {!customThumbComponent && (\n                    <div\n                        onClick={handleCardClick}\n                        className={`overflow-hidden cursor-pointer w-[90px] h-[90px] rounded-full flex items-start ${iconCircleStyles} notification-card-thumbnail`}\n                    >\n                        <img\n                            src={thumbImage}\n                            alt=\"Notification Thumb\"\n                            className=\"w-full h-full w-[100px] h-[100px] object-cover\"\n                        />\n                    </div>\n                )}\n                {customThumbComponent && { customThumbComponent }}\n            </div>\n            <div className=\"flex flex-col justify-center items-start relative w-full\">\n                <div className=\"text-left ml-3 flex flex-col items-start justify-start w-full\">\n                    <h4\n                        onClick={handleCardClick}\n                        className=\"cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title\"\n                        data-testid=\"notification-title\"\n                    >\n                        {title}\n                    </h4>\n                    <p\n                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}\n                        data-testid=\"notification-type\"\n                    >\n                        {typeText}{' '}\n                        {issueDate && (\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        )}\n                    </p>\n\n                    {showIssuerInfo && (\n                        <div className=\"notification-card-issuer-info flex items-center mt-[10px]\">\n                            <div className=\"profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]\">\n                                <img\n                                    className=\"h-full w-full object-cover\"\n                                    src={issuerInfo?.image || DefaultFace}\n                                    alt=\"profile\"\n                                />\n                            </div>\n                            <div className=\"notification-issuer-info-text flex items-center px-[10px]\">\n                                <p className=\"text-[13px] text-gray-700 font-medium\">\n                                    From {issuerInfo?.fullName || issuerInfo?.displayName}\n                                </p>\n                            </div>\n                        </div>\n                    )}\n\n                    <div className=\"flex items-center justify-between mt-3 w-full\">\n                        <button\n                            className={`notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                            onClick={handleButtonClick}\n                            role=\"button\"\n                            name=\"notification-claim-button\"\n                        >\n                            {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                            {isLoading ? 'Loading...' : buttonText}\n                        </button>\n\n                        <button\n                            onClick={handleCancelClick}\n                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}\n                            role=\"button\"\n                            name=\"notification-view-button\"\n                        >\n                            {!isArchived && (\n                                <img src={X ?? ''} alt=\"Cancel\" className=\"notification-card-x\" />\n                            )}\n                            {isArchived && (\n                                <img\n                                    src={ArrowArcLeft ?? ''}\n                                    alt=\"Cancel\"\n                                    className=\"notification-card-x\"\n                                />\n                            )}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default NotificationBoostCard;\n"],"names":["NotificationTypeEnum","useState","useEffect","NotificationTypeStyles","React","DefaultFace","Checkmark","X","ArrowArcLeft"],"mappings":"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"}

package/dist/cjs/NotificationUserAcceptedBoostCard-423b9320.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var React = require('react');
+var X = require('./X.svg');
+var types = require('./types-e4d9a257.js');
+var notifications = require('./notifications-56c6fc94.js');
+var ArrowArcLeft = require('./ArrowArcLeft.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
+var ArrowArcLeft__default = /*#__PURE__*/_interopDefaultLegacy(ArrowArcLeft);
+
+const NotificationUserAcceptedBoostCard = ({
+  title,
+  customThumbComponent,
+  className,
+  thumbImage,
+  notificationType = notifications.UserNotificationTypeEnum.AcceptedBoost,
+  issueDate,
+  loadingState = false,
+  handleCancelClick,
+  isArchived
+}) => {
+  var _a, _b;
+  const [isLoading, setIsLoading] = React.useState(loadingState || false);
+  React.useEffect(() => {
+    setIsLoading(loadingState);
+  }, [loadingState]);
+  const { textStyles, viewButtonStyles, typeText } = types.UserNotificationTypeStyles[notificationType];
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "notification-card-left-side px-[0px] flex"
+  }, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `overflow-hidden w-[50px] h-[50px] rounded-full flex items-start notification-card-thumbnail`
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: thumbImage,
+    alt: "Notification Thumb",
+    className: "w-full h-full w-[50px] h-[50px] object-cover"
+  })), customThumbComponent && { customThumbComponent }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col justify-center items-start relative w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "text-left ml-3 flex flex-col items-start justify-start w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+    className: "font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
+    "data-testid": "notification-title"
+  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: `font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`,
+    "data-testid": "notification-type"
+  }, typeText, " ", issueDate && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
+    "data-testid": "notification-cred-issue-date"
+  }, typeText && "\u2022", " ", issueDate)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-end w-full mt-3"
+  }, /* @__PURE__ */ React__default["default"].createElement("button", {
+    onClick: handleCancelClick,
+    className: `rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`,
+    role: "button",
+    name: "notification-view-button"
+  }, !isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_a = X__default["default"]) != null ? _a : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }), isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_b = ArrowArcLeft__default["default"]) != null ? _b : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }))))));
+};
+
+exports.NotificationUserAcceptedBoostCard = NotificationUserAcceptedBoostCard;
+//# sourceMappingURL=NotificationUserAcceptedBoostCard-423b9320.js.map

package/dist/cjs/NotificationUserAcceptedBoostCard-423b9320.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationUserAcceptedBoostCard-423b9320.js","sources":["../../src/components/NotificationUserAcceptedBoostCard/NotificationUserAcceptedBoostCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport X from '../../assets/images/X.svg';\nimport { NotificationUserAcceptedBoostCardProps } from './types';\nimport { UserNotificationTypeStyles } from '../NotificationUserCard/types';\n\nimport { UserNotificationTypeEnum } from '../../constants/notifications';\nimport ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';\n\nexport const NotificationUserAcceptedBoostCard: React.FC<\n    NotificationUserAcceptedBoostCardProps\n> = ({\n    title,\n    customThumbComponent,\n    className,\n    thumbImage,\n    notificationType = UserNotificationTypeEnum.AcceptedBoost,\n    issueDate,\n    loadingState = false,\n    handleCancelClick,\n    isArchived,\n}) => {\n    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);\n\n    useEffect(() => {\n        setIsLoading(loadingState);\n    }, [loadingState]);\n\n    const { textStyles, viewButtonStyles, typeText } = UserNotificationTypeStyles[notificationType];\n\n    return (\n        <div\n            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}\n        >\n            <div className=\"notification-card-left-side px-[0px] flex\">\n                {!customThumbComponent && (\n                    <div\n                        className={`overflow-hidden w-[50px] h-[50px] rounded-full flex items-start notification-card-thumbnail`}\n                    >\n                        <img\n                            src={thumbImage}\n                            alt=\"Notification Thumb\"\n                            className=\"w-full h-full w-[50px] h-[50px] object-cover\"\n                        />\n                    </div>\n                )}\n                {customThumbComponent && { customThumbComponent }}\n            </div>\n            <div className=\"flex flex-col justify-center items-start relative w-full\">\n                <div className=\"text-left ml-3 flex flex-col items-start justify-start w-full\">\n                    <h4\n                        className=\"font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title\"\n                        data-testid=\"notification-title\"\n                    >\n                        {title}\n                    </h4>\n                    <p\n                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}\n                        data-testid=\"notification-type\"\n                    >\n                        {typeText}{' '}\n                        {issueDate && (\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                {typeText && '•'} {issueDate}\n                            </span>\n                        )}\n                    </p>\n\n                    <div className=\"flex items-center justify-end w-full mt-3\">\n                        <button\n                            onClick={handleCancelClick}\n                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}\n                            role=\"button\"\n                            name=\"notification-view-button\"\n                        >\n                            {!isArchived && (\n                                <img src={X ?? ''} alt=\"Cancel\" className=\"notification-card-x\" />\n                            )}\n                            {isArchived && (\n                                <img\n                                    src={ArrowArcLeft ?? ''}\n                                    alt=\"Cancel\"\n                                    className=\"notification-card-x\"\n                                />\n                            )}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default NotificationUserAcceptedBoostCard;\n"],"names":["UserNotificationTypeEnum","useState","useEffect","UserNotificationTypeStyles","React","X","ArrowArcLeft"],"mappings":"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"}

package/dist/cjs/NotificationUserCard-d4dab06c.js

@@ -0,0 +1,94 @@
+'use strict';
+
+var React = require('react');
+var X = require('./X.svg');
+var types = require('./types-e4d9a257.js');
+var notifications = require('./notifications-56c6fc94.js');
+var Checkmark = require('./Checkmark-f611aa4d.js');
+var ArrowArcLeft = require('./ArrowArcLeft.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var X__default = /*#__PURE__*/_interopDefaultLegacy(X);
+var ArrowArcLeft__default = /*#__PURE__*/_interopDefaultLegacy(ArrowArcLeft);
+
+const NotificationUserCard = ({
+  title,
+  customThumbComponent,
+  className,
+  thumbImage,
+  issueDate,
+  acceptStatus = false,
+  loadingState = false,
+  handleButtonClick,
+  handleCancelClick,
+  isArchived
+}) => {
+  var _a, _b;
+  const [isAccepted, setisAccepted] = React.useState(acceptStatus || false);
+  const [isLoading, setIsLoading] = React.useState(loadingState || false);
+  React.useEffect(() => {
+    setisAccepted(acceptStatus);
+  }, [acceptStatus]);
+  React.useEffect(() => {
+    setIsLoading(loadingState);
+  }, [loadingState]);
+  const { textStyles, viewButtonStyles, claimedButtonStyles, unclaimedButtonStyles, typeText } = types.UserNotificationTypeStyles[notifications.UserNotificationTypeEnum.ConnectionRequest];
+  const claimButtonStyles = isAccepted ? claimedButtonStyles : unclaimedButtonStyles;
+  let buttonText = "";
+  if (isAccepted) {
+    buttonText = "Accepted";
+  } else if (!isAccepted) {
+    buttonText = "Accept";
+  }
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "notification-card-left-side px-[0px] flex"
+  }, !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `overflow-hidden cursor-pointer w-[68px] h-[68px] rounded-full flex items-start notification-card-thumbnail`
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: thumbImage,
+    alt: "Notification Thumb",
+    className: "w-full h-full w-[68px] h-[68px] object-cover"
+  })), customThumbComponent && { customThumbComponent }), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col justify-center items-start relative w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "text-left ml-3 flex flex-col items-start justify-start w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("h4", {
+    className: "cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title",
+    "data-testid": "notification-title"
+  }, title), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: `font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`,
+    "data-testid": "notification-type"
+  }, typeText, " ", issueDate && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date",
+    "data-testid": "notification-cred-issue-date"
+  }, "\u2022 ", issueDate)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-between mt-3 w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: `notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
+    onClick: handleButtonClick,
+    role: "button",
+    name: "notification-claim-button"
+  }, isAccepted && /* @__PURE__ */ React__default["default"].createElement(Checkmark.Checkmark, {
+    className: "h-[24px] p-0 m-0"
+  }), " ", isLoading ? "Loading..." : buttonText), /* @__PURE__ */ React__default["default"].createElement("button", {
+    onClick: handleCancelClick,
+    className: `rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`,
+    role: "button",
+    name: "notification-view-button"
+  }, !isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_a = X__default["default"]) != null ? _a : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }), isArchived && /* @__PURE__ */ React__default["default"].createElement("img", {
+    src: (_b = ArrowArcLeft__default["default"]) != null ? _b : "",
+    alt: "Cancel",
+    className: "notification-card-x"
+  }))))));
+};
+
+exports.NotificationUserCard = NotificationUserCard;
+//# sourceMappingURL=NotificationUserCard-d4dab06c.js.map

package/dist/cjs/NotificationUserCard-d4dab06c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationUserCard-d4dab06c.js","sources":["../../src/components/NotificationUserCard/NotificationUserCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport X from '../../assets/images/X.svg';\nimport { NotificationUserCardProps, UserNotificationTypeStyles } from './types';\n\nimport { UserNotificationTypeEnum } from '../../constants/notifications';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport Checkmark from '../svgs/Checkmark';\nimport ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';\n\nexport const NotificationUserCard: React.FC<NotificationUserCardProps> = ({\n    title,\n    customThumbComponent,\n    className,\n    thumbImage,\n    issueDate,\n    acceptStatus = false,\n    loadingState = false,\n    handleButtonClick,\n    handleCancelClick,\n    isArchived,\n}) => {\n    const [isAccepted, setisAccepted] = useState<boolean>(acceptStatus || false);\n    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);\n\n    useEffect(() => {\n        setisAccepted(acceptStatus);\n    }, [acceptStatus]);\n\n    useEffect(() => {\n        setIsLoading(loadingState);\n    }, [loadingState]);\n\n    const { textStyles, viewButtonStyles, claimedButtonStyles, unclaimedButtonStyles, typeText } =\n        UserNotificationTypeStyles[UserNotificationTypeEnum.ConnectionRequest];\n\n    const claimButtonStyles = isAccepted ? claimedButtonStyles : unclaimedButtonStyles;\n\n    let buttonText: string = '';\n\n    if (isAccepted) {\n        buttonText = 'Accepted';\n    } else if (!isAccepted) {\n        buttonText = 'Accept';\n    }\n\n    return (\n        <div\n            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}\n        >\n            <div className=\"notification-card-left-side px-[0px] flex\">\n                {!customThumbComponent && (\n                    <div\n                        className={`overflow-hidden cursor-pointer w-[68px] h-[68px] rounded-full flex items-start notification-card-thumbnail`}\n                    >\n                        <img\n                            src={thumbImage}\n                            alt=\"Notification Thumb\"\n                            className=\"w-full h-full w-[68px] h-[68px] object-cover\"\n                        />\n                    </div>\n                )}\n                {customThumbComponent && { customThumbComponent }}\n            </div>\n            <div className=\"flex flex-col justify-center items-start relative w-full\">\n                <div className=\"text-left ml-3 flex flex-col items-start justify-start w-full\">\n                    <h4\n                        className=\"cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title\"\n                        data-testid=\"notification-title\"\n                    >\n                        {title}\n                    </h4>\n                    <p\n                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}\n                        data-testid=\"notification-type\"\n                    >\n                        {typeText}{' '}\n                        {issueDate && (\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        )}\n                    </p>\n\n                    <div className=\"flex items-center justify-between mt-3 w-full\">\n                        <button\n                            className={`notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                            onClick={handleButtonClick}\n                            role=\"button\"\n                            name=\"notification-claim-button\"\n                        >\n                            {isAccepted && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                            {isLoading ? 'Loading...' : buttonText}\n                        </button>\n\n                        <button\n                            onClick={handleCancelClick}\n                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}\n                            role=\"button\"\n                            name=\"notification-view-button\"\n                        >\n                            {!isArchived && (\n                                <img src={X ?? ''} alt=\"Cancel\" className=\"notification-card-x\" />\n                            )}\n                            {isArchived && (\n                                <img\n                                    src={ArrowArcLeft ?? ''}\n                                    alt=\"Cancel\"\n                                    className=\"notification-card-x\"\n                                />\n                            )}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default NotificationUserCard;\n"],"names":["useState","useEffect","UserNotificationTypeStyles","UserNotificationTypeEnum","React","Checkmark","X","ArrowArcLeft"],"mappings":"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"}

package/dist/cjs/{QRCodeCard-b60c0500.js → QRCodeCard-efaa58e1.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index = require('./index-c340a7f0.js');
+var index = require('./index-82de573c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -39,4 +39,4 @@ const QRCodeCard = ({
 };
 
 exports.QRCodeCard = QRCodeCard;
-//# sourceMappingURL=QRCodeCard-b60c0500.js.map
+//# sourceMappingURL=QRCodeCard-efaa58e1.js.map

package/dist/cjs/{QRCodeCard-b60c0500.js.map → QRCodeCard-efaa58e1.js.map}

@@ -1 +1 @@
-{"version":3,"file":"QRCodeCard-b60c0500.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":["React","QRCodeSVG"],"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,mBACKA,yBAAA,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,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACIA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAC,eAAA,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,oBACID,yBAAA,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-efaa58e1.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":["React","QRCodeSVG"],"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,mBACKA,yBAAA,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,uBACKA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgI,6HAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAE1I,+BACIA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4DAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,oCAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAC,eAAA,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,oBACID,yBAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IACG,SAAU,EAAA,8FAAA;AAAA,IACV,aAAY,EAAA,yBAAA;AAAA,GAEX,EAAA,UACL,GAGH,MACL,CAAA,CAAA;AAER;;;;"}