@learncard/react 2.8.62 → 2.9.2

package/dist/cjs/MiniVCThumbnail-9c510f51.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var React = require('react');
+var VerifiedCheck = require('./verified-check.png');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var VerifiedCheck__default = /*#__PURE__*/_interopDefaultLegacy(VerifiedCheck);
+
+const MiniVCThumbnail = ({
+  title,
+  createdAt,
+  issuerImage,
+  badgeImage,
+  className = "",
+  onClick = () => {
+  }
+}) => {
+  var _a;
+  const titleClasses = !issuerImage ? "w-full text-center" : "w-3/4 text-left";
+  const createdAtClasses = !issuerImage ? "w-full text-center" : "text-left";
+  return /* @__PURE__ */ React__default["default"].createElement(
+    "div",
+    {
+      onClick,
+      className: `flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`,
+      "data-testid": "mini-vc-thumbnail"
+    },
+    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-between mb-3 z-10" }, issuerImage && /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: "flex flex-row justify-center items-center w-1/4 text-center",
+        "data-testid": "mini-vc-thumbnail-issuer"
+      },
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white" }, /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover rounded-full",
+          src: issuerImage,
+          alt: "issuer image"
+        }
+      ))
+    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: `flex flex-col items-start justify-center ${titleClasses}` }, /* @__PURE__ */ React__default["default"].createElement(
+      "h2",
+      {
+        className: "ml-2 text-sm tracking-wide leading-snug line-clamp-2",
+        "data-testid": "mini-vc-thumbnail-title"
+      },
+      title != null ? title : ""
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      "p",
+      {
+        className: `ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`,
+        "data-testid": "mini-vc-thumbnail-createdAt"
+      },
+      createdAt != null ? createdAt : ""
+    ))),
+    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center w-full mt-3" }, badgeImage && /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: "flex item-center justify-center w-full -mt-3",
+        "data-testid": "mini-vc-thumbnail-badge"
+      },
+      /* @__PURE__ */ React__default["default"].createElement("div", { className: "max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10" }, /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          className: "h-full w-full object-cover",
+          src: badgeImage,
+          alt: "badge image"
+        }
+      ))
+    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden" }, /* @__PURE__ */ React__default["default"].createElement(
+      "img",
+      {
+        className: "h-full w-full object-cover",
+        src: (_a = VerifiedCheck__default["default"]) != null ? _a : "",
+        alt: "credential icon"
+      }
+    ))))
+  );
+};
+
+exports.MiniVCThumbnail = MiniVCThumbnail;
+//# sourceMappingURL=MiniVCThumbnail-9c510f51.js.map

package/dist/cjs/{MiniVCThumbnail-a78e44f2.js.map → MiniVCThumbnail-9c510f51.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MiniVCThumbnail-a78e44f2.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":["React","VerifiedCheck"],"mappings":"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"}
+{"version":3,"file":"MiniVCThumbnail-9c510f51.js","sources":["../../src/components/MiniVCThumbnail/MiniVCThumbnail.tsx"],"sourcesContent":["import React from 'react';\n\nimport VerifiedCheck from '../../assets/images/verified-check.png';\n\nimport { MiniVCThumbnailProps } from './types';\n\nexport const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({\n    title,\n    createdAt,\n    issuerImage,\n    badgeImage,\n    className = '',\n    onClick = () => {},\n}) => {\n    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';\n    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}\n            data-testid=\"mini-vc-thumbnail\"\n        >\n            <div className=\"flex flex-row items-center justify-between mb-3 z-10\">\n                {issuerImage && (\n                    <div\n                        className=\"flex flex-row justify-center items-center w-1/4 text-center\"\n                        data-testid=\"mini-vc-thumbnail-issuer\"\n                    >\n                        <div className=\"min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white\">\n                            <img\n                                className=\"h-full w-full object-cover rounded-full\"\n                                src={issuerImage}\n                                alt=\"issuer image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>\n                    <h2\n                        className=\"ml-2 text-sm tracking-wide leading-snug line-clamp-2\"\n                        data-testid=\"mini-vc-thumbnail-title\"\n                    >\n                        {title ?? ''}\n                    </h2>\n                    <p\n                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}\n                        data-testid=\"mini-vc-thumbnail-createdAt\"\n                    >\n                        {createdAt ?? ''}\n                    </p>\n                </div>\n            </div>\n            <div className=\"flex items-center justify-center w-full mt-3\">\n                {badgeImage && (\n                    <div\n                        className=\"flex item-center justify-center w-full -mt-3\"\n                        data-testid=\"mini-vc-thumbnail-badge\"\n                    >\n                        <div className=\"max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10\">\n                            <img\n                                className=\"h-full w-full object-cover\"\n                                src={badgeImage}\n                                alt=\"badge image\"\n                            />\n                        </div>\n                    </div>\n                )}\n                <div className=\"flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden\">\n                    <div className=\"flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden\">\n                        <img\n                            className=\"h-full w-full object-cover\"\n                            src={VerifiedCheck ?? ''}\n                            alt=\"credential icon\"\n                        />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default MiniVCThumbnail;\n"],"names":["React","VerifiedCheck"],"mappings":"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"}

package/dist/cjs/Notification-24d4de25.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var React = require('react');
+var types = require('./types-91d0677b.js');
+var notifications = require('./notifications-56c6fc94.js');
+var Checkmark = require('./Checkmark-74444a78.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Notification = ({
+  title,
+  issuerImage,
+  issueDate,
+  className,
+  notificationType = notifications.NotificationTypeEnum.Achievement,
+  handleViewOnClick = () => {
+  },
+  claimStatus = false,
+  handleClaimOnClick = () => {
+  },
+  loadingState = false
+}) => {
+  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 {
+    IconComponent,
+    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-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`
+    },
+    /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: `absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`
+      },
+      /* @__PURE__ */ React__default["default"].createElement(IconComponent, { className: "h-4/5 text-white" })
+    ),
+    /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col justify-center items-center relative w-11/12" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-row items-center justify-start w-full" }, /* @__PURE__ */ React__default["default"].createElement(
+      "div",
+      {
+        className: `h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full ${iconCircleStyles}`
+      },
+      /* @__PURE__ */ React__default["default"].createElement(
+        "img",
+        {
+          src: issuerImage,
+          alt: "issuer image",
+          className: "w-full h-full object-cover"
+        }
+      )
+    ), /* @__PURE__ */ React__default["default"].createElement("div", { className: "text-left ml-3" }, /* @__PURE__ */ React__default["default"].createElement(
+      "h4",
+      {
+        className: "font-bold tracking-wide line-clamp-1 text-black",
+        "data-testid": "notification-title"
+      },
+      title
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      "p",
+      {
+        className: `font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`,
+        "data-testid": "notification-type"
+      },
+      typeText,
+      " ",
+      /* @__PURE__ */ React__default["default"].createElement(
+        "span",
+        {
+          className: "text-grayscale-600 normal-case font-normal text-sm",
+          "data-testid": "notification-cred-issue-date"
+        },
+        "\u2022 ",
+        issueDate
+      )
+    ))), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex items-center justify-between w-full mt-3" }, /* @__PURE__ */ React__default["default"].createElement(
+      "button",
+      {
+        onClick: handleViewOnClick,
+        className: `flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`,
+        role: "button",
+        name: "notification-view-button"
+      },
+      "View"
+    ), /* @__PURE__ */ React__default["default"].createElement(
+      "button",
+      {
+        className: `flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
+        onClick: handleClaimOnClick,
+        role: "button",
+        name: "notification-claim-button"
+      },
+      isClaimed && /* @__PURE__ */ React__default["default"].createElement(Checkmark.Checkmark, { className: "h-[24px] p-0 m-0" }),
+      " ",
+      isLoading ? "Loading..." : buttonText
+    )))
+  );
+};
+
+exports.Notification = Notification;
+//# sourceMappingURL=Notification-24d4de25.js.map

package/dist/cjs/{Notification-3fe4a359.js.map → Notification-24d4de25.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Notification-3fe4a359.js","sources":["../../src/components/Notification/Notification.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    handleViewOnClick = () => {},\n    claimStatus = false,\n    handleClaimOnClick = () => {},\n    loadingState = false,\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        IconComponent,\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-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div\n                        className={`h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full ${iconCircleStyles}`}\n                    >\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {typeText}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={handleViewOnClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaimOnClick}\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                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":["NotificationTypeEnum","useState","useEffect","NotificationTypeStyles","React","Checkmark"],"mappings":"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"}
+{"version":3,"file":"Notification-24d4de25.js","sources":["../../src/components/Notification/Notification.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    handleViewOnClick = () => {},\n    claimStatus = false,\n    handleClaimOnClick = () => {},\n    loadingState = false,\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        IconComponent,\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-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div\n                        className={`h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full ${iconCircleStyles}`}\n                    >\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {typeText}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={handleViewOnClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaimOnClick}\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                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":["NotificationTypeEnum","useState","useEffect","NotificationTypeStyles","React","Checkmark"],"mappings":"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"}

package/dist/cjs/NotificationBoostCard-abb23722.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var React = require('react');
+var X = require('./X.svg');
+var types = require('./types-91d0677b.js');
+var notifications = require('./notifications-56c6fc94.js');
+var Checkmark = require('./Checkmark-74444a78.js');
+var ArrowArcLeft = require('./ArrowArcLeft.svg');
+var UserProfilePicture = require('./UserProfilePicture-d69fe4f0.js');
+
+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 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(
+      UserProfilePicture.UserProfilePicture,
+      {
+        customContainerClass: `h-full w-full object-cover text-xl ${!(issuerInfo == null ? void 0 : issuerInfo.image) ? "pt-[3px]" : ""}`,
+        user: { image: issuerInfo == null ? void 0 : issuerInfo.image, name: issuerInfo == null ? void 0 : issuerInfo.fullName },
+        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-abb23722.js.map

package/dist/cjs/{NotificationBoostCard-be514ddb.js.map → NotificationBoostCard-abb23722.js.map}

@@ -1 +1 @@
-{"version":3,"file":"NotificationBoostCard-be514ddb.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 Checkmark from '../svgs/Checkmark';\nimport ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';\nimport UserProfilePicture from '../UserProfilePicture/UserProfilePicture';\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                                <UserProfilePicture\n                                    customContainerClass={`h-full w-full object-cover text-xl ${\n                                        !issuerInfo?.image ? 'pt-[3px]' : ''\n                                    }`}\n                                    user={{ image: issuerInfo?.image, name: issuerInfo?.fullName }}\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","UserProfilePicture","Checkmark","X","ArrowArcLeft"],"mappings":"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"}
+{"version":3,"file":"NotificationBoostCard-abb23722.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 Checkmark from '../svgs/Checkmark';\nimport ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';\nimport UserProfilePicture from '../UserProfilePicture/UserProfilePicture';\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                                <UserProfilePicture\n                                    customContainerClass={`h-full w-full object-cover text-xl ${\n                                        !issuerInfo?.image ? 'pt-[3px]' : ''\n                                    }`}\n                                    user={{ image: issuerInfo?.image, name: issuerInfo?.fullName }}\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","UserProfilePicture","Checkmark","ArrowArcLeft"],"mappings":"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"}

package/dist/cjs/NotificationUserAcceptedBoostCard-31d8a89e.js

@@ -0,0 +1,98 @@
+'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-31d8a89e.js.map