@learncard/react 2.6.79 → 2.7.1

package/dist/esm/{BoostGenericCard-09f3bd8a.js → BoostGenericCard-a82dec36.js}

@@ -19,7 +19,8 @@ const BoostGenericCard = ({
   bgImgSrc,
   issuerName,
   dateDisplay,
-  optionsTriggerOnClick
+  optionsTriggerOnClick,
+  verifierBadge
 }) => {
   var _a;
   const thumbClass = (_a = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
@@ -66,11 +67,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.createElement("section", {
     className: "small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex items-center justify-center small-generic-boost-issuer-name text-[12px] text-grayscale-700 font-bold px-[6px]"
   }, /* @__PURE__ */ React.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.createElement("p", {
+    className: "line-clamp-1"
+  }, "by ", issuerName)), /* @__PURE__ */ React.createElement("p", {
     className: "small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]"
-  }, dateDisplay)), showChecked && /* @__PURE__ */ React.createElement("div", {
+  }, dateDisplay), verifierBadge), showChecked && /* @__PURE__ */ React.createElement("div", {
     className: "check-btn-overlay absolute top-[5px] left-[5px]"
   }, /* @__PURE__ */ React.createElement(CircleCheckButton, {
     checked: checkStatus,
@@ -80,4 +83,4 @@ const BoostGenericCard = ({
 };
 
 export { BoostGenericCard as B };
-//# sourceMappingURL=BoostGenericCard-09f3bd8a.js.map
+//# sourceMappingURL=BoostGenericCard-a82dec36.js.map

package/dist/esm/BoostGenericCard-a82dec36.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostGenericCard-a82dec36.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":[],"mappings":";;;;;;AAKY,MAAC,gBAAgB,GAAG,CAAC;AACjC,EAAE,KAAK;AACP,EAAE,WAAW;AACb,EAAE,gBAAgB,GAAG,EAAE;AACvB,EAAE,iBAAiB,GAAG,EAAE;AACxB,EAAE,IAAI,GAAG,mBAAmB,CAAC,YAAY;AACzC,EAAE,SAAS;AACX,EAAE,YAAY;AACd,EAAE,WAAW;AACb,EAAE,WAAW;AACb,EAAE,oBAAoB;AACtB,EAAE,YAAY;AACd,EAAE,QAAQ;AACV,EAAE,UAAU;AACZ,EAAE,WAAW;AACb,EAAE,qBAAqB;AACvB,EAAE,aAAa;AACf,CAAC,KAAK;AACN,EAAK,IAAC,EAAE,CAAK;AACb,EAAE,MAAM,UAAU,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,GAAG,EAAE,GAAG,iBAAiB,CAAC;AACrG,EAAE,MAAM,iBAAiB,GAAG,CAAC,kEAAkE,EAAE,UAAU,CAAC,mEAAmE,EAAE,gBAAgB,CAAC,CAAC,CAAC;AACpM,EAAE,MAAM,MAAM,GAAG,CAAC,WAAW,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,WAAW,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;AAElH,EAAE,MAAM,aAAa,GAAG,WAAW,GAAG,yBAAyB,GAAG,2BAA2B,CAAC;AAC9F,EAAE,MAAM,kBAAkB,GAAG,CAAC,8CAA8C,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAClG,EAAE,MAAM,gBAAgB,GAAG,MAAM;AACjC,IAAI,YAAY,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,YAAY,EAAE,CAAC;AACnD,GAAG,CAAC;AACJ,EAAE,MAAM,kBAAkB,GAAG,MAAM;AACnC,IAAI,qBAAqB,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,qBAAqB,EAAE,CAAC;AACrE,GAAG,CAAC;AACJ,EAAE,uBAAuB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACpD,IAAI,SAAS,EAAE,CAAC,iJAAiJ,EAAE,SAAS,CAAC,CAAC;AAC9K,GAAG,EAAE,qBAAqB,oBAAoB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7E,IAAI,SAAS,EAAE,2JAA2J;AAC1K,IAAI,OAAO,EAAE,kBAAkB;AAC/B,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,GAAG,EAAE,oBAAoB;AAC7B,IAAI,SAAS,EAAE,gDAAgD;AAC/D,IAAI,GAAG,EAAE,SAAS;AAClB,GAAG,CAAC,CAAC,EAAE,QAAQ,oBAAoB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAClE,IAAI,SAAS,EAAE,uFAAuF;AACtG,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,4CAA4C;AAC3D,IAAI,GAAG,EAAE,QAAQ;AACjB,GAAG,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,QAAQ,EAAE;AACrD,IAAI,IAAI,EAAE,QAAQ;AAClB,IAAI,SAAS,EAAE,6CAA6C;AAC5D,IAAI,OAAO,EAAE,gBAAgB;AAC7B,GAAG,EAAE,oBAAoB,IAAI,oBAAoB,EAAE,CAAC,oBAAoB,oBAAoB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC3H,IAAI,SAAS,EAAE,iBAAiB;AAChC,GAAG,EAAE,WAAW,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7H,IAAI,SAAS,EAAE,uGAAuG;AACtH,IAAI,GAAG,EAAE,WAAW,IAAI,IAAI,GAAG,WAAW,GAAG,EAAE;AAC/C,IAAI,GAAG,EAAE,8BAA8B;AACvC,GAAG,CAAC,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,WAAW,IAAI,IAAI,GAAG,KAAK,CAAC,GAAG,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,qBAAqB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AACjI,IAAI,SAAS,EAAE,+DAA+D;AAC9E,IAAI,GAAG,EAAE,MAAM;AACf,GAAG,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AACtD,IAAI,SAAS,EAAE,CAAC,EAAE,kBAAkB,CAAC,aAAa,CAAC;AACnD,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AAC9C,IAAI,SAAS,EAAE,2IAA2I;AAC1J,GAAG,EAAE,KAAK,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,SAAS,EAAE;AAC7D,IAAI,SAAS,EAAE,yGAAyG;AACxH,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAChD,IAAI,SAAS,EAAE,oHAAoH;AACnI,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,MAAM,EAAE;AACjD,IAAI,SAAS,EAAE,cAAc;AAC7B,GAAG,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,kBAAkB,KAAK,CAAC,aAAa,CAAC,GAAG,EAAE;AACnE,IAAI,SAAS,EAAE,wFAAwF;AACvG,GAAG,EAAE,WAAW,CAAC,EAAE,aAAa,CAAC,EAAE,WAAW,oBAAoB,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE;AAC7F,IAAI,SAAS,EAAE,iDAAiD;AAChE,GAAG,kBAAkB,KAAK,CAAC,aAAa,CAAC,iBAAiB,EAAE;AAC5D,IAAI,OAAO,EAAE,WAAW;AACxB,IAAI,OAAO,EAAE,YAAY;AACzB,IAAI,SAAS,EAAE,aAAa;AAC5B,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACR;;;;"}

package/dist/esm/{CertificateDisplayCard-711f2e93.js → CertificateDisplayCard-5fc4318c.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,34 +2922,26 @@ 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",
   unknownVerifier: "Unknown Verifier",
   untrustedVerifier: "Untrusted Verifier"
 };
+const VerifierStateBadgeAndText = ({ verifierState }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex justify-center"
+  }, verifierState === VERIFIER_STATES.selfVerified && /* @__PURE__ */ React.createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React.createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React.createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React.createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React.createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React.createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React.createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React.createElement(RedFlag, null), "Untrusted Verifier"));
+};
+
 const CertificateFrontFace = ({
   isFront,
   credential,
@@ -2977,6 +3009,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 +3045,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", {
@@ -3024,15 +3058,9 @@ const CertificateFrontFace = ({
     className: "font-jacques text-[12px] text-grayscale-800"
   }, "Certified by"), /* @__PURE__ */ React.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.createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React.createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React.createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React.createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React.createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React.createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React.createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React.createElement(RedFlag, null), "Untrusted Verifier"))), categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CertificateCornerIcon, {
+  }, issuerName), /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, {
+    verifierState
+  }))), categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CertificateCornerIcon, {
     categoryType,
     position: "top-left"
   }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, {
@@ -3133,5 +3161,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, VERIFIER_STATES as V, X, CertificateBackFace as a, CertificateDisplayCard as b, CertificateFrontFace as c, VideoIcon as d, Camera as e, capitalize as f, getBaseUrl as g, LeftArrow as h, SkillsBox as i, AlignmentsBox as j, VerifierStateBadgeAndText as k, VerifiedBadge as l, prettyBytes as p, truncateWithEllipsis as t };
+//# sourceMappingURL=CertificateDisplayCard-5fc4318c.js.map