@learncard/react 2.6.79 → 2.7.0

package/dist/esm/{CertificateDisplayCard-711f2e93.js → CertificateDisplayCard-b3c93952.js}

@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { g as getColorForVerificationStatus, a as getInfoFromCredential, b as getCategoryDarkColor, c as getCategoryLightColor, d as getCategoryIcon, e as getTotalCountOfSkills, f as categorizeSkills, h as getNameFromProfile, i as getImageFromProfile } from './credential.helpers-20680b00.js';
-import './default-face.jpeg';
-import 'react-dom';
+import { g as getTotalCountOfSkills, c as categorizeSkills, a as getColorForVerificationStatus, b as getInfoFromCredential, d as getCategoryDarkColor, e as getCategoryLightColor, f as getCategoryIcon, h as getNameFromProfile, i as getImageFromProfile } from './credential.helpers-c06a1aa8.js';
+import { P as PuzzlePiece } from './PuzzlePiece-1fb12c2e.js';
+import { a as LCCategoryEnum } from './index-43f63ea7.js';
+import { V as VerificationStatusEnum } from './types.esm-8f6a5623.js';
+import CaretRightFilled from './CaretRightFilled.svg';
+import { L as Lightbox } from './Lightbox-a1aab9ea.js';
 import Athletics from './athletics.svg';
 import Business from './business.svg';
 import Creative from './creative.svg';
@@ -11,15 +14,7 @@ import Medical from './medical.svg';
 import Social from './social.svg';
 import Stem from './stem.svg';
 import Trade from './trade.svg';
-import { a as VerificationStatusEnum } from './VCVerificationPill-2c48beee.js';
-import CaretRightFilled from './CaretRightFilled.svg';
-import './index.es-0cc0c240.js';
-import './vc.check.svg';
-import { a as LCCategoryEnum } from './index-43f63ea7.js';
-import { P as PuzzlePiece } from './types-c31e4bae.js';
-import './id-sleeve.png';
 import ThreeDots from './DotsThreeOutline.svg';
-import { L as Lightbox } from './Lightbox-a1aab9ea.js';
 
 const AcuteCheckmark = ({ className = "" }) => {
   return /* @__PURE__ */ React.createElement("svg", {
@@ -393,7 +388,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.createElement("button", {
-    onClick: handleClose,
+    onClick: (e) => {
+      e.stopPropagation();
+      handleClose();
+    },
     className: "text-indigo-500 font-[700] select-none"
   }, "Close"));
 };
@@ -431,6 +429,28 @@ const AlignmentsBox = ({ alignment, style }) => {
   }), alignments);
 };
 
+const CertDisplayCardSkillsCount = ({ skills, onClick }) => {
+  const skillsCount = getTotalCountOfSkills(skills);
+  if (skillsCount === 0)
+    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  const skillsMap = 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.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.createElement("div", {
+    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
+  }, "+", total, " ", text, " ", /* @__PURE__ */ React.createElement("div", {
+    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
+  }, /* @__PURE__ */ React.createElement(PuzzlePiece, {
+    className: "text-white",
+    fill: "#fff"
+  }))));
+};
+
 const truncateWithEllipsis = (str, maxLength) => {
   return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
 };
@@ -482,7 +502,10 @@ const VerificationsBox = ({ verificationItems }) => {
     className: "text-[17px] text-grayscale-900 font-poppins"
   }, "Verifications"), /* @__PURE__ */ React.createElement("button", {
     className: "ml-auto",
-    onClick: () => setShowInfo(!showInfo)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowInfo(!showInfo);
+    }
   }, /* @__PURE__ */ React.createElement(InfoIcon, {
     color: showInfo ? "#6366F1" : void 0
   }))), showInfo && /* @__PURE__ */ React.createElement(InfoBox, {
@@ -514,10 +537,16 @@ const TruncateTextBox = ({
     className: "text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start"
   }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", /* @__PURE__ */ React.createElement("button", {
     className: "text-indigo-500 text-[12px]",
-    onClick: () => setShowFullText(true)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(true);
+    }
   }, "Show more")), needsTruncate && showFullText && /* @__PURE__ */ React.createElement("button", {
     className: "text-indigo-500 text-[12px]",
-    onClick: () => setShowFullText(false)
+    onClick: (e) => {
+      e.stopPropagation();
+      setShowFullText(false);
+    }
   }, "Show less")), children);
 };
 
@@ -814,7 +843,10 @@ const MediaAttachmentsBox = ({
         className: "flex bg-grayscale-100 items-center rounded-[15px] w-full"
       }, /* @__PURE__ */ React.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.createElement("div", {
         className: "text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3"
       }, title));
@@ -849,21 +881,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.createElement("span", {
       className: "uppercase"
     }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React.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.createElement("button", {
         key: index,
         className,
-        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
+        onClick: (e) => {
+          e.stopPropagation();
+          handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+        }
       }, innerContent);
     }
     return /* @__PURE__ */ React.createElement("div", {
@@ -2640,7 +2677,8 @@ const TopLevelSkill = ({ skillSelected, skill, handleExpandSubSkills }) => {
   }, title))), (subSkills == null ? void 0 : subSkills.length) > 0 && /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-center rounded-full bg-white mr-4 h-[40px] w-[40px]"
   }, /* @__PURE__ */ React.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"
@@ -2748,7 +2786,9 @@ const CertificateBackFace = ({
     bgColor = "bg-lime-700";
   }
   return /* @__PURE__ */ React.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.createElement("div", {
     className: "w-full"
   }, /* @__PURE__ */ React.createElement("button", {
@@ -2882,28 +2922,6 @@ const CertificateProfileImageDisplay = ({
   }));
 };
 
-const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
-  const skillsCount = getTotalCountOfSkills(skills);
-  if (skillsCount === 0)
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
-  const skillsMap = 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.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.createElement("p", {
-    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
-  }, "+", total, " ", text, " ", /* @__PURE__ */ React.createElement("div", {
-    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
-  }, /* @__PURE__ */ React.createElement(PuzzlePiece, {
-    className: "text-white",
-    fill: "#fff"
-  }))));
-};
-
 const VERIFIER_STATES = {
   selfVerified: "Self Verified",
   trustedVerifier: "Trusted Verifier",
@@ -2977,6 +2995,8 @@ const CertificateFrontFace = ({
   const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
   const issueeImageExists = issueeImage || subjectImageComponent;
   return /* @__PURE__ */ React.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.createElement("div", {
     className: "w-[calc(100%-26px)] absolute top-[-52px]"
@@ -3011,7 +3031,7 @@ const CertificateFrontFace = ({
     className: "flex flex-col gap-[10px] items-center"
   }, description && /* @__PURE__ */ React.createElement("div", {
     className: "text-center text-grayscale-700 text-[12px] font-jacques line-clamp-4"
-  }, description), /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
+  }, description), /* @__PURE__ */ React.createElement(CertDisplayCardSkillsCount, {
     skills: (_b = credential == null ? void 0 : credential.skills) != null ? _b : [],
     onClick: handleViewBackFace
   }), isFront && showDetailsBtn && /* @__PURE__ */ React.createElement("button", {
@@ -3133,5 +3153,5 @@ const CertificateDisplayCard = ({
   }))));
 };
 
-export { AcuteCheckmark as A, CertificateBackFace as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, PersonBadge as P, RedFlag as R, SelectedSkills as S, UnknownVerifierBadge as U, VCDisplayCardSkillsCount as V, X, CertificateDisplayCard as a, CertificateFrontFace as b, VideoIcon as c, Camera as d, capitalize as e, LeftArrow as f, getBaseUrl as g, SkillsBox as h, AlignmentsBox as i, VerifiedBadge as j, prettyBytes as p, truncateWithEllipsis as t };
-//# sourceMappingURL=CertificateDisplayCard-711f2e93.js.map
+export { AcuteCheckmark as A, CertDisplayCardSkillsCount as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, PersonBadge as P, RedFlag as R, SelectedSkills as S, UnknownVerifierBadge as U, VideoIcon as V, X, CertificateBackFace as a, CertificateDisplayCard as b, CertificateFrontFace as c, Camera as d, capitalize as e, LeftArrow as f, getBaseUrl as g, SkillsBox as h, AlignmentsBox as i, VerifiedBadge as j, prettyBytes as p, truncateWithEllipsis as t };
+//# sourceMappingURL=CertificateDisplayCard-b3c93952.js.map