@learncard/react 2.6.79 → 2.7.0

package/dist/cjs/{CertificateDisplayCard-2283f3de.js → CertificateDisplayCard-74de3c56.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,28 +2939,6 @@ 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",
@@ -2994,6 +3012,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 +3048,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", {
@@ -3153,6 +3173,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,7 +3187,6 @@ exports.RedFlag = RedFlag;
 exports.SelectedSkills = SelectedSkills;
 exports.SkillsBox = SkillsBox;
 exports.UnknownVerifierBadge = UnknownVerifierBadge;
-exports.VCDisplayCardSkillsCount = VCDisplayCardSkillsCount;
 exports.VerifiedBadge = VerifiedBadge;
 exports.VideoIcon = VideoIcon;
 exports.X = X;
@@ -3174,4 +3194,4 @@ exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-2283f3de.js.map
+//# sourceMappingURL=CertificateDisplayCard-74de3c56.js.map