@learncard/react 2.6.79 → 2.7.1

package/dist/cjs/{BoostGenericCard-924e41e7.js → BoostGenericCard-a5ca50df.js}

@@ -26,7 +26,8 @@ const BoostGenericCard = ({
   bgImgSrc,
   issuerName,
   dateDisplay,
-  optionsTriggerOnClick
+  optionsTriggerOnClick,
+  verifierBadge
 }) => {
   var _a;
   const thumbClass = (_a = `bg-${index$1.TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
@@ -73,11 +74,13 @@ const BoostGenericCard = ({
     className: "relative z-[100] small-boost-title text-[16px] leading-[130%] px-[0px] font-medium text-center text-grayscale-900 line-clamp-2 max-w-full"
   }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-center small-generic-boost-issuer-name text-[12px] text-grayscale-700 font-bold px-[6px]"
   }, /* @__PURE__ */ React__default["default"].createElement("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), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "line-clamp-1"
+  }, "by ", issuerName)), /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]"
-  }, dateDisplay)), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, dateDisplay), verifierBadge), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "check-btn-overlay absolute top-[5px] left-[5px]"
   }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
     checked: checkStatus,
@@ -87,4 +90,4 @@ const BoostGenericCard = ({
 };
 
 exports.BoostGenericCard = BoostGenericCard;
-//# sourceMappingURL=BoostGenericCard-924e41e7.js.map
+//# sourceMappingURL=BoostGenericCard-a5ca50df.js.map

package/dist/cjs/BoostGenericCard-a5ca50df.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostGenericCard-a5ca50df.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';\nimport ThreeDots from '../../assets/images/DotsThreeOutline.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    optionsTriggerOnClick,\n    verifierBadge,\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    const handleOptionsClick = () => {\n        optionsTriggerOnClick?.();\n    };\n\n    return (\n        <div\n            className={`flex generic-display-card-simple bg-white flex-col shadow-bottom relative $ py-[0px] px-[0px] w-[160px] h-[250px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {optionsTriggerOnClick && (\n                <section\n                    className=\"absolute cursor-pointer shadow-bottom h-[30px] w-[30px] top-[5px] right-[5px] rounded-full overflow-hidden z-20 bg-white flex items-center justify-center\"\n                    onClick={handleOptionsClick}\n                >\n                    <img\n                        alt=\"Menu dropdown icon\"\n                        className=\"h-[20px] w-[20px] object-cover overflow-hidden\"\n                        src={ThreeDots}\n                    />\n                </section>\n            )}\n\n            {bgImgSrc && (\n                <section className=\"absolute top-[-50px] shadow-bottom left-[0px] rounded-b-full overflow-hidden z-0 mt-3\">\n                    <img className=\"h-full w-full object-cover overflow-hidden\" src={bgImgSrc} />\n                </section>\n            )}\n            <button\n                type=\"button\"\n                className=\"boost-small-card inner-click-container z-10\"\n                onClick={handleInnerClick}\n            >\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} items-center`}>\n                    <p className=\"relative z-[100] small-boost-title text-[16px] leading-[130%] px-[0px] font-medium text-center text-grayscale-900 line-clamp-2 max-w-full\">\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                    <div className=\"flex items-center justify-center small-generic-boost-issuer-name text-[12px] text-grayscale-700 font-bold px-[6px]\">\n                        <span className=\"line-clamp-1\">by {issuerName}</span>\n                    </div>\n                    <p className=\"small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]\">\n                        {dateDisplay}\n                    </p>\n                    {verifierBadge}\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            </button>\n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","ThreeDots","CircleCheckButton"],"mappings":"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"}

package/dist/cjs/{CertificateDisplayCard-2283f3de.js → CertificateDisplayCard-811ef7cf.js}

@@ -1,9 +1,12 @@
 'use strict';
 
 var React = require('react');
-var credential_helpers = require('./credential.helpers-adf7af7c.js');
-require('./default-face.jpeg');
-require('react-dom');
+var credential_helpers = require('./credential.helpers-ccf9ea86.js');
+var PuzzlePiece = require('./PuzzlePiece-937c216a.js');
+var index = require('./index-7d94d5ac.js');
+var types_esm = require('./types.esm-2ec4fa7e.js');
+var CaretRightFilled = require('./CaretRightFilled.svg');
+var Lightbox = require('./Lightbox-f19e13d2.js');
 var Athletics = require('./athletics.svg');
 var Business = require('./business.svg');
 var Creative = require('./creative.svg');
@@ -13,19 +16,12 @@ var Medical = require('./medical.svg');
 var Social = require('./social.svg');
 var Stem = require('./stem.svg');
 var Trade = require('./trade.svg');
-var VCVerificationPill = require('./VCVerificationPill-b4b96a9f.js');
-var CaretRightFilled = require('./CaretRightFilled.svg');
-require('./index.es-05e5f438.js');
-require('./vc.check.svg');
-var index = require('./index-7d94d5ac.js');
-var types = require('./types-7f6324ea.js');
-require('./id-sleeve.png');
 var ThreeDots = require('./DotsThreeOutline.svg');
-var Lightbox = require('./Lightbox-f19e13d2.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var CaretRightFilled__default = /*#__PURE__*/_interopDefaultLegacy(CaretRightFilled);
 var Athletics__default = /*#__PURE__*/_interopDefaultLegacy(Athletics);
 var Business__default = /*#__PURE__*/_interopDefaultLegacy(Business);
 var Creative__default = /*#__PURE__*/_interopDefaultLegacy(Creative);
@@ -35,7 +31,6 @@ var Medical__default = /*#__PURE__*/_interopDefaultLegacy(Medical);
 var Social__default = /*#__PURE__*/_interopDefaultLegacy(Social);
 var Stem__default = /*#__PURE__*/_interopDefaultLegacy(Stem);
 var Trade__default = /*#__PURE__*/_interopDefaultLegacy(Trade);
-var CaretRightFilled__default = /*#__PURE__*/_interopDefaultLegacy(CaretRightFilled);
 var ThreeDots__default = /*#__PURE__*/_interopDefaultLegacy(ThreeDots);
 
 const AcuteCheckmark = ({ className = "" }) => {
@@ -410,7 +405,10 @@ const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
     className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
     style: { backgroundColor: bgColorWithOpacity }
   }, text, " ", /* @__PURE__ */ React__default["default"].createElement("button", {
-    onClick: handleClose,
+    onClick: (e) => {
+      e.stopPropagation();
+      handleClose();
+    },
     className: "text-indigo-500 font-[700] select-none"
   }, "Close"));
 };
@@ -448,6 +446,28 @@ const AlignmentsBox = ({ alignment, style }) => {
   }), alignments);
 };
 
+const CertDisplayCardSkillsCount = ({ skills, onClick }) => {
+  const skillsCount = credential_helpers.getTotalCountOfSkills(skills);
+  if (skillsCount === 0)
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
+  const skillsMap = credential_helpers.categorizeSkills(skills);
+  const totalSkills = Object.values(skillsMap).reduce((total2, category) => total2 + (category == null ? void 0 : category.length), 0);
+  const totalSubskills = Object.values(skillsMap).reduce((total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0), 0);
+  const total = totalSkills + totalSubskills;
+  const text = skillsCount === 1 ? "Skill" : "Skills";
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
+    onClick
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
+  }, "+", total, " ", text, " ", /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
+  }, /* @__PURE__ */ React__default["default"].createElement(PuzzlePiece.PuzzlePiece, {
+    className: "text-white",
+    fill: "#fff"
+  }))));
+};
+
 const truncateWithEllipsis = (str, maxLength) => {
   return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
 };
@@ -461,16 +481,16 @@ const VerificationRow = ({ verification }) => {
   const statusColor = credential_helpers.getColorForVerificationStatus(verification.status);
   const getIcon = () => {
     switch (verification.status) {
-      case VCVerificationPill.VerificationStatusEnum.Success:
+      case types_esm.VerificationStatusEnum.Success:
         return /* @__PURE__ */ React__default["default"].createElement(AcuteCheckmark, null);
-      case VCVerificationPill.VerificationStatusEnum.Error:
+      case types_esm.VerificationStatusEnum.Error:
         return /* @__PURE__ */ React__default["default"].createElement(ExclamationPoint, null);
-      case VCVerificationPill.VerificationStatusEnum.Failed:
+      case types_esm.VerificationStatusEnum.Failed:
         return /* @__PURE__ */ React__default["default"].createElement(X, null);
     }
   };
   let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
-  if (verification.status === VCVerificationPill.VerificationStatusEnum.Failed) {
+  if (verification.status === types_esm.VerificationStatusEnum.Failed) {
     primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
   }
   primaryText = capitalize(primaryText);
@@ -499,7 +519,10 @@ const VerificationsBox = ({ verificationItems }) => {
     className: "text-[17px] text-grayscale-900 font-poppins"
   }, "Verifications"), /* @__PURE__ */ React__default["default"].createElement("button", {
     className: "ml-auto",
-    onClick: () => setShowInfo(!showInfo)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowInfo(!showInfo);
+    }
   }, /* @__PURE__ */ React__default["default"].createElement(InfoIcon, {
     color: showInfo ? "#6366F1" : void 0
   }))), showInfo && /* @__PURE__ */ React__default["default"].createElement(InfoBox, {
@@ -531,10 +554,16 @@ const TruncateTextBox = ({
     className: "text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start"
   }, displayText, truncated && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, "...", /* @__PURE__ */ React__default["default"].createElement("button", {
     className: "text-indigo-500 text-[12px]",
-    onClick: () => setShowFullText(true)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(true);
+    }
   }, "Show more")), needsTruncate && showFullText && /* @__PURE__ */ React__default["default"].createElement("button", {
     className: "text-indigo-500 text-[12px]",
-    onClick: () => setShowFullText(false)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(false);
+    }
   }, "Show less")), children);
 };
 
@@ -831,7 +860,10 @@ const MediaAttachmentsBox = ({
         className: "flex bg-grayscale-100 items-center rounded-[15px] w-full"
       }, /* @__PURE__ */ React__default["default"].createElement("button", {
         className: "h-[80px] w-[80px] rounded-[15px]",
-        onClick: () => handleMediaAttachmentClick(media.url, media.type)
+        onClick: (e) => {
+          e.stopPropagation();
+          handleMediaAttachmentClick(media.url, media.type);
+        }
       }, innerContent), title && /* @__PURE__ */ React__default["default"].createElement("div", {
         className: "text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3"
       }, title));
@@ -866,21 +898,26 @@ const MediaAttachmentsBox = ({
       href: docOrLink.url,
       target: "_blank",
       rel: "noreferrer",
-      className: "text-grayscale-700 font-[500] text-[12px] font-poppins hover:underline"
+      className: "text-grayscale-700 font-[500] text-[12px] font-poppins hover:underline",
+      onClick: (e) => e.stopPropagation()
     }, fileExtension && /* @__PURE__ */ React__default["default"].createElement("span", {
       className: "uppercase"
     }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React__default["default"].createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React__default["default"].createElement("span", null, prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement("a", {
       href: docOrLink.url,
       target: "_blank",
       rel: "noreferrer",
-      className: "text-indigo-500 font-[500] text-[12px] font-poppins hover:underline"
+      className: "text-indigo-500 font-[500] text-[12px] font-poppins hover:underline",
+      onClick: (e) => e.stopPropagation()
     }, baseUrl))));
     const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
     if (onMediaAttachmentClick) {
       return /* @__PURE__ */ React__default["default"].createElement("button", {
         key: index,
         className,
-        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
+        onClick: (e) => {
+          e.stopPropagation();
+          handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+        }
       }, innerContent);
     }
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -2657,7 +2694,8 @@ const TopLevelSkill = ({ skillSelected, skill, handleExpandSubSkills }) => {
   }, title))), (subSkills == null ? void 0 : subSkills.length) > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "flex items-center justify-center rounded-full bg-white mr-4 h-[40px] w-[40px]"
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
-    onClick: () => {
+    onClick: (e) => {
+      e.stopPropagation();
       handleExpandSubSkills == null ? void 0 : handleExpandSubSkills();
     },
     className: "text-black font-bold flex items-center justify-center text-center font-poppins"
@@ -2717,7 +2755,7 @@ const SkillsBox = ({ skills }) => {
     className: "flex items-center justify-start"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "bg-violet-500 rounded-full flex items-center justify-center h-[30px] w-[30px] p-1"
-  }, /* @__PURE__ */ React__default["default"].createElement(types.PuzzlePiece, {
+  }, /* @__PURE__ */ React__default["default"].createElement(PuzzlePiece.PuzzlePiece, {
     className: "text-white",
     fill: "#fff"
   })), " ", /* @__PURE__ */ React__default["default"].createElement("h3", {
@@ -2765,7 +2803,9 @@ const CertificateBackFace = ({
     bgColor = "bg-lime-700";
   }
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[440px] ${bgColor}`
+    role: "button",
+    onClick: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace(),
+    className: `flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[400px] ${bgColor}`
   }, showBackButton ? /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-full"
   }, /* @__PURE__ */ React__default["default"].createElement("button", {
@@ -2899,34 +2939,26 @@ const CertificateProfileImageDisplay = ({
   }));
 };
 
-const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
-  const skillsCount = credential_helpers.getTotalCountOfSkills(skills);
-  if (skillsCount === 0)
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null);
-  const skillsMap = credential_helpers.categorizeSkills(skills);
-  const totalSkills = Object.values(skillsMap).reduce((total2, category) => total2 + (category == null ? void 0 : category.length), 0);
-  const totalSubskills = Object.values(skillsMap).reduce((total2, category) => total2 + ((category == null ? void 0 : category.totalSubskillsCount) || 0), 0);
-  const total = totalSkills + totalSubskills;
-  const text = skillsCount === 1 ? "Skill" : "Skills";
-  return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
-    onClick
-  }, /* @__PURE__ */ React__default["default"].createElement("p", {
-    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
-  }, "+", total, " ", text, " ", /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
-  }, /* @__PURE__ */ React__default["default"].createElement(types.PuzzlePiece, {
-    className: "text-white",
-    fill: "#fff"
-  }))));
-};
-
 const VERIFIER_STATES = {
   selfVerified: "Self Verified",
   trustedVerifier: "Trusted Verifier",
   unknownVerifier: "Unknown Verifier",
   untrustedVerifier: "Untrusted Verifier"
 };
+const VerifierStateBadgeAndText = ({ verifierState }) => {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex justify-center"
+  }, verifierState === VERIFIER_STATES.selfVerified && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(RedFlag, null), "Untrusted Verifier"));
+};
+
 const CertificateFrontFace = ({
   isFront,
   credential,
@@ -2994,6 +3026,8 @@ const CertificateFrontFace = ({
   const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
   const issueeImageExists = issueeImage || subjectImageComponent;
   return /* @__PURE__ */ React__default["default"].createElement("section", {
+    role: "button",
+    onClick: () => handleViewBackFace == null ? void 0 : handleViewBackFace(),
     className: "relative p-[13px] mt-[55px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200 max-w-[300px]"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-[calc(100%-26px)] absolute top-[-52px]"
@@ -3028,7 +3062,7 @@ const CertificateFrontFace = ({
     className: "flex flex-col gap-[10px] items-center"
   }, description && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "text-center text-grayscale-700 text-[12px] font-jacques line-clamp-4"
-  }, description), /* @__PURE__ */ React__default["default"].createElement(VCDisplayCardSkillsCount, {
+  }, description), /* @__PURE__ */ React__default["default"].createElement(CertDisplayCardSkillsCount, {
     skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
     onClick: handleViewBackFace
   }), isFront && showDetailsBtn && /* @__PURE__ */ React__default["default"].createElement("button", {
@@ -3041,15 +3075,9 @@ const CertificateFrontFace = ({
     className: "font-jacques text-[12px] text-grayscale-800"
   }, "Certified by"), /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center overflow-ellipsis whitespace-nowrap overflow-x-hidden overflow-y-visible scrollbar-hide"
-  }, issuerName), isSelfVerified && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(RedFlag, null), "Untrusted Verifier"))), categoryType && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
+  }, issuerName), /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText, {
+    verifierState
+  }))), categoryType && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
     categoryType,
     position: "top-left"
   }), /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
@@ -3153,6 +3181,7 @@ const CertificateDisplayCard = ({
 exports.AcuteCheckmark = AcuteCheckmark;
 exports.AlignmentsBox = AlignmentsBox;
 exports.Camera = Camera;
+exports.CertDisplayCardSkillsCount = CertDisplayCardSkillsCount;
 exports.CertificateBackFace = CertificateBackFace;
 exports.CertificateDisplayCard = CertificateDisplayCard;
 exports.CertificateFrontFace = CertificateFrontFace;
@@ -3166,12 +3195,13 @@ exports.RedFlag = RedFlag;
 exports.SelectedSkills = SelectedSkills;
 exports.SkillsBox = SkillsBox;
 exports.UnknownVerifierBadge = UnknownVerifierBadge;
-exports.VCDisplayCardSkillsCount = VCDisplayCardSkillsCount;
+exports.VERIFIER_STATES = VERIFIER_STATES;
 exports.VerifiedBadge = VerifiedBadge;
+exports.VerifierStateBadgeAndText = VerifierStateBadgeAndText;
 exports.VideoIcon = VideoIcon;
 exports.X = X;
 exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-2283f3de.js.map
+//# sourceMappingURL=CertificateDisplayCard-811ef7cf.js.map