@learncard/react 2.8.14 → 2.8.16

package/dist/cjs/BoostGenericCard-6064f7b0.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var React = require('react');
+var index$1 = require('./index-5488badc.js');
+var index = require('./index-08002ab6.js');
+var IDDisplayIcon = require('./IDDisplayIcon-62993df0.js');
+var ThreeDotVertical = require('./ThreeDotVertical-e39ac5df.js');
+var CertDisplayCardSkillsCount = require('./CertDisplayCardSkillsCount-de4a0019.js');
+var CircleCheckButton = require('./CircleCheckButton-82d47ee2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const getDisplayIcon = (displayType) => {
+  switch (displayType) {
+    case "badge" /* Badge */:
+      return IDDisplayIcon.BadgeDisplayIcon;
+    case "certificate" /* Certificate */:
+      return IDDisplayIcon.CertificateDisplayIcon;
+    case "id" /* ID */:
+      return IDDisplayIcon.IDDisplayIcon;
+    case "course" /* Course */:
+      return IDDisplayIcon.CourseDisplayIcon;
+    case "award" /* Award */:
+      return IDDisplayIcon.AwardDisplayIcon;
+    default:
+      return IDDisplayIcon.BadgeDisplayIcon;
+  }
+};
+
+const BoostGenericCard = ({
+  title,
+  customTitle,
+  thumbImgSrc,
+  customThumbClass = "",
+  customHeaderClass = "",
+  type = index$1.WalletCategoryTypes.achievements,
+  className,
+  onCheckClick,
+  showChecked,
+  checkStatus,
+  customThumbComponent,
+  innerOnClick,
+  bgImgSrc,
+  issuerName,
+  customIssuerName,
+  dateDisplay,
+  customDateDisplay,
+  optionsTriggerOnClick,
+  verifierBadge,
+  credential,
+  isInSkillsModal,
+  displayType,
+  linkedCredentialsCount = 0,
+  linkedCredentialsClassName = "",
+  checkBtnClass = ""
+}) => {
+  const thumbClass = index.TYPE_TO_WALLET_DARK_COLOR[type] ? `bg-${index.TYPE_TO_WALLET_DARK_COLOR[type]}` : "bg-grayscale-50";
+  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}`;
+  const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : index.TYPE_TO_IMG_SRC[type];
+  const handleInnerClick = () => innerOnClick == null ? void 0 : innerOnClick();
+  const handleOptionsClick = () => optionsTriggerOnClick == null ? void 0 : optionsTriggerOnClick();
+  const DisplayIcon = getDisplayIcon(displayType);
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[265px] rounded-[20px] overflow-hidden ${className}`
+  }, optionsTriggerOnClick && /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20",
+    onClick: handleOptionsClick
+  }, /* @__PURE__ */ React__default["default"].createElement(ThreeDotVertical.ThreeDotVertical, {
+    className: "h-[20px] w-[20px] text-grayscale-900"
+  })), bgImgSrc && /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0"
+  }, /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "h-full w-full object-cover",
+    src: bgImgSrc
+  })), /* @__PURE__ */ React__default["default"].createElement("button", {
+    type: "button",
+    className: "z-10 flex flex-col flex-grow",
+    onClick: handleInnerClick
+  }, customThumbComponent || /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: defaultThumbClass
+  }, (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) ? /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "w-full h-full rounded-full object-cover",
+    src: thumbImgSrc,
+    alt: "Credential Achievement"
+  }) : /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "max-w-full p-0 object-cover rounded-full",
+    src: imgSrc
+  })), /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: `flex flex-col flex-grow items-center justify-end pt-1 ${linkedCredentialsCount === 0 ? "pb-[20px]" : ""}`
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "px-1 flex flex-col items-center justify-center"
+  }, !customTitle ? /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: `${customHeaderClass} text-[16px] font-medium text-center text-grayscale-900 line-clamp-2`
+  }, title) : customTitle, customIssuerName || /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-[12px] text-grayscale-700 mt-1"
+  }, "by ", /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "font-bold"
+  }, issuerName)), customDateDisplay || /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[12px] text-grayscale-700 mt-1 flex items-center"
+  }, verifierBadge, dateDisplay), isInSkillsModal && /* @__PURE__ */ React__default["default"].createElement(CertDisplayCardSkillsCount.CertDisplayCardSkillsCount, {
+    skills: (credential == null ? void 0 : credential.skills) || [],
+    onClick: handleInnerClick,
+    isInSkillsModal
+  })), linkedCredentialsCount > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`
+  }, /* @__PURE__ */ React__default["default"].createElement(DisplayIcon, {
+    className: "h-[20px] w-[20px] text-grayscale-900"
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "ml-1 text-sm font-semibold text-grayscale-900"
+  }, "+", linkedCredentialsCount, " Linked")))), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "absolute top-[5px] left-[5px]"
+  }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
+    checked: checkStatus,
+    onClick: onCheckClick,
+    className: checkBtnClass
+  })));
+};
+
+exports.BoostGenericCard = BoostGenericCard;
+//# sourceMappingURL=BoostGenericCard-6064f7b0.js.map

package/dist/cjs/BoostGenericCard-6064f7b0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostGenericCard-6064f7b0.js","sources":["../../src/helpers/display.helpers.ts","../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import { LCCategoryEnum } from '../types';\n\nimport { BadgeDisplayIcon } from '../components/svgs/BadgeDisplayIcon';\nimport { CertificateDisplayIcon } from '../components/svgs/CertificateDisplayIcon';\nimport { IDDisplayIcon } from '../components/svgs/IDDisplayIcon';\nimport { CourseDisplayIcon } from '../components/svgs/CourseDisplayIcon';\nimport { AwardDisplayIcon } from '../components/svgs/AwardDisplayIcon';\n\nexport enum DisplayTypeEnum {\n    Badge = 'badge',\n    Certificate = 'certificate',\n    ID = 'id',\n    Course = 'course',\n    Award = 'award',\n}\n\nexport const getDefaultDisplayType = (category: string): DisplayTypeEnum => {\n    if (category === LCCategoryEnum.socialBadge || category === LCCategoryEnum.workHistory) {\n        return DisplayTypeEnum.Badge;\n    }\n\n    if (category === LCCategoryEnum.id || category === LCCategoryEnum.membership) {\n        return DisplayTypeEnum.ID;\n    }\n\n    if (\n        category === LCCategoryEnum.achievement ||\n        category === LCCategoryEnum.accommodations ||\n        category === LCCategoryEnum.accomplishments ||\n        category === LCCategoryEnum.learningHistory\n    ) {\n        return DisplayTypeEnum.Certificate;\n    }\n\n    return DisplayTypeEnum.Badge;\n};\n\nexport const getDisplayIcon = (displayType: DisplayTypeEnum): React.FC<{ className?: string }> => {\n    switch (displayType) {\n        case DisplayTypeEnum.Badge:\n            return BadgeDisplayIcon;\n        case DisplayTypeEnum.Certificate:\n            return CertificateDisplayIcon;\n        case DisplayTypeEnum.ID:\n            return IDDisplayIcon;\n        case DisplayTypeEnum.Course:\n            return CourseDisplayIcon;\n        case DisplayTypeEnum.Award:\n            return AwardDisplayIcon;\n        default:\n            return BadgeDisplayIcon;\n    }\n};\n","import React from 'react';\nimport { BoostGenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { DisplayTypeEnum, getDisplayIcon } from '../../helpers/display.helpers';\nimport { CertDisplayCardSkillsCount } from '../CertificateDisplayCard';\nimport ThreeDotVertical from '../svgs/ThreeDotVertical';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const BoostGenericCard: React.FC<BoostGenericCardProps> = ({\n    title,\n    customTitle,\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    customIssuerName,\n    dateDisplay,\n    customDateDisplay,\n    optionsTriggerOnClick,\n    verifierBadge,\n    credential,\n    isInSkillsModal,\n    displayType,\n    linkedCredentialsCount = 0,\n    linkedCredentialsClassName = '',\n    checkBtnClass = '',\n}) => {\n    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]\n        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`\n        : '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\n    const handleInnerClick = () => innerOnClick?.();\n    const handleOptionsClick = () => optionsTriggerOnClick?.();\n\n    const DisplayIcon = getDisplayIcon(displayType as DisplayTypeEnum);\n\n    return (\n        <div\n            className={`flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[265px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {optionsTriggerOnClick && (\n                <section\n                    className=\"absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20\"\n                    onClick={handleOptionsClick}\n                >\n                    <ThreeDotVertical className=\"h-[20px] w-[20px] text-grayscale-900\" />\n                </section>\n            )}\n\n            {bgImgSrc && (\n                <section className=\"absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0\">\n                    <img className=\"h-full w-full object-cover\" src={bgImgSrc} />\n                </section>\n            )}\n\n            <button\n                type=\"button\"\n                className=\"z-10 flex flex-col flex-grow\"\n                onClick={handleInnerClick}\n            >\n                {/* Thumbnail */}\n                {customThumbComponent || (\n                    <section className={defaultThumbClass}>\n                        {thumbImgSrc?.trim() ? (\n                            <img\n                                className=\"w-full h-full rounded-full object-cover\"\n                                src={thumbImgSrc}\n                                alt=\"Credential Achievement\"\n                            />\n                        ) : (\n                            <img\n                                className=\"max-w-full p-0 object-cover rounded-full\"\n                                src={imgSrc}\n                            />\n                        )}\n                    </section>\n                )}\n\n                {/* Details Section: grows to fill available space */}\n                <section\n                    className={`flex flex-col flex-grow items-center justify-end pt-1 ${\n                        linkedCredentialsCount === 0 ? 'pb-[20px]' : ''\n                    }`}\n                >\n                    <div className=\"px-1 flex flex-col items-center justify-center\">\n                        {/* Title */}\n                        {!customTitle ? (\n                            <p\n                                className={`${customHeaderClass} text-[16px] font-medium text-center text-grayscale-900 line-clamp-2`}\n                            >\n                                {title}\n                            </p>\n                        ) : (\n                            customTitle\n                        )}\n\n                        {/* Issuer */}\n                        {customIssuerName || (\n                            <span className=\"text-[12px] text-grayscale-700 mt-1\">\n                                by <span className=\"font-bold\">{issuerName}</span>\n                            </span>\n                        )}\n\n                        {/* Date & Verifier */}\n                        {customDateDisplay || (\n                            <p className=\"text-[12px] text-grayscale-700 mt-1 flex items-center\">\n                                {verifierBadge}\n                                {dateDisplay}\n                            </p>\n                        )}\n\n                        {/* Skills count if in modal */}\n                        {isInSkillsModal && (\n                            <CertDisplayCardSkillsCount\n                                skills={credential?.skills || []}\n                                onClick={handleInnerClick}\n                                isInSkillsModal={isInSkillsModal}\n                            />\n                        )}\n                    </div>\n\n                    {/* Linked Credentials moved inside details */}\n                    {linkedCredentialsCount > 0 && (\n                        <div\n                            className={`mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`}\n                        >\n                            <DisplayIcon className=\"h-[20px] w-[20px] text-grayscale-900\" />\n                            <span className=\"ml-1 text-sm font-semibold text-grayscale-900\">\n                                +{linkedCredentialsCount} Linked\n                            </span>\n                        </div>\n                    )}\n                </section>\n            </button>\n\n            {/* Optional Check Button overlay */}\n            {showChecked && (\n                <div className=\"absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onCheckClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["BadgeDisplayIcon","CertificateDisplayIcon","IDDisplayIcon","CourseDisplayIcon","AwardDisplayIcon","WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","ThreeDotVertical","CertDisplayCardSkillsCount","CircleCheckButton"],"mappings":"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"}

package/dist/cjs/{CertDisplayCardSkillsCount-b1565a79.js → CertDisplayCardSkillsCount-de4a0019.js}

@@ -24,10 +24,10 @@ const CertDisplayCardSkillsCount = ({ skills, onClick, className, isInSkillsModa
   const total = totalSkills + totalSubskills;
   const text = skillsCount === 1 ? "Skill" : "Skills";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `flex items-center justify-center cursor-pointer bg-white rounded-[20px] ${className === "boost-generic" ? "" : "px-4 py-2 mt-8 shadow-bottom"} `,
+    className: `flex w-full items-center justify-center cursor-pointer bg-white rounded-[20px] ${className === "boost-generic" ? "" : "px-4 py-2 mt-4 shadow-bottom"} `,
     onClick
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: `text-violet-500 flex items-center justify-center tracking-[0.75px] font-poppins font-semibold ${className === "boost-generic" ? "text-[12px] mt-[5px]" : "text-xl"}`
+    className: `text-violet-500 flex items-center justify-center tracking-[0.75px] font-poppins font-semibold ${className === "boost-generic" ? "text-[12px] mt-[5px]" : "text-sm"}`
   }, isInSkillsModal ? /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "bg-violet-500 rounded-full flex items-center justify-center mr-[5px] p-1 h-[20px] w-[20px]"
   }, /* @__PURE__ */ React__default["default"].createElement(PuzzlePiece.PuzzlePiece, {
@@ -42,4 +42,4 @@ const CertDisplayCardSkillsCount = ({ skills, onClick, className, isInSkillsModa
 };
 
 exports.CertDisplayCardSkillsCount = CertDisplayCardSkillsCount;
-//# sourceMappingURL=CertDisplayCardSkillsCount-b1565a79.js.map
+//# sourceMappingURL=CertDisplayCardSkillsCount-de4a0019.js.map

package/dist/cjs/CertDisplayCardSkillsCount-de4a0019.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CertDisplayCardSkillsCount-de4a0019.js","sources":["../../src/components/CertificateDisplayCard/CertDisplayCardSkillsCount.tsx"],"sourcesContent":["import React from 'react';\n\nimport PuzzlePiece from '../svgs/PuzzlePiece';\n\nimport { categorizeSkills, getTotalCountOfSkills } from '../../helpers/credential.helpers';\n\n// Copy of VCDisplayCardSkillsCount, necessary to avoid circular dependency\nexport const CertDisplayCardSkillsCount: React.FC<{\n    skills: { category: string; skill: string; subSkills: string[] }[];\n    onClick?: () => void;\n    className?: string;\n    isInSkillsModal?: boolean;\n}> = ({ skills, onClick, className, isInSkillsModal }) => {\n    const skillsCount = getTotalCountOfSkills(skills);\n\n    if (skillsCount === 0) return <></>;\n\n    const skillsMap = categorizeSkills(skills);\n\n    // Calculate total count of skills and subskills\n    const totalSkills: any = Object.values(skillsMap).reduce(\n        (total: any, category: any) => total + category?.length,\n        0\n    );\n    const totalSubskills: any = Object.values(skillsMap).reduce(\n        (total: any, category: any) => total + (category?.totalSubskillsCount || 0),\n        0\n    );\n\n    const total: any = totalSkills + totalSubskills;\n\n    const text: string = skillsCount === 1 ? 'Skill' : 'Skills';\n\n    return (\n        <div\n            className={`flex w-full items-center justify-center cursor-pointer bg-white rounded-[20px] ${\n                className === 'boost-generic' ? '' : 'px-4 py-2 mt-4 shadow-bottom'\n            } `}\n            onClick={onClick}\n        >\n            <div\n                className={`text-violet-500 flex items-center justify-center tracking-[0.75px] font-poppins font-semibold ${\n                    className === 'boost-generic' ? 'text-[12px] mt-[5px]' : 'text-sm'\n                }`}\n            >\n                {isInSkillsModal ? (\n                    <>\n                        <div className=\"bg-violet-500 rounded-full flex items-center justify-center mr-[5px] p-1 h-[20px] w-[20px]\">\n                            <PuzzlePiece className=\"text-white\" fill=\"#fff\" />\n                        </div>\n                        +{total} {text}\n                    </>\n                ) : (\n                    <>\n                        +{total} {text}\n                        <div className=\"bg-violet-500 rounded-full flex items-center justify-center ml-2 p-1 h-[30px] w-[30px]\">\n                            <PuzzlePiece className=\"text-white\" fill=\"#fff\" />\n                        </div>\n                    </>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default CertDisplayCardSkillsCount;\n"],"names":["getTotalCountOfSkills","React","categorizeSkills","total","PuzzlePiece"],"mappings":";;;;;;;;;;AAOO,MAAM,6BAKR,CAAC,EAAE,QAAQ,OAAS,EAAA,SAAA,EAAW,iBAAsB,KAAA;AACtD,EAAM,MAAA,WAAA,GAAcA,yCAAsB,MAAM,CAAA,CAAA;AAEhD,EAAA,IAAI,WAAgB,KAAA,CAAA;AAAG,IAAA,uBAASC,yBAAA,CAAA,aAAA,CAAAA,yBAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAEhC,EAAM,MAAA,SAAA,GAAYC,oCAAiB,MAAM,CAAA,CAAA;AAGzC,EAAA,MAAM,WAAmB,GAAA,MAAA,CAAO,MAAO,CAAA,SAAS,CAAE,CAAA,MAAA;AAAA,IAC9C,CAACC,MAAAA,EAAY,QAAkBA,KAAAA,MAAAA,IAAQ,QAAU,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,MAAA,CAAA;AAAA,IACjD,CAAA;AAAA,GACJ,CAAA;AACA,EAAA,MAAM,cAAsB,GAAA,MAAA,CAAO,MAAO,CAAA,SAAS,CAAE,CAAA,MAAA;AAAA,IACjD,CAACA,MAAAA,EAAY,QAAkBA,KAAAA,MAAAA,IAAAA,CAAS,qCAAU,mBAAuB,KAAA,CAAA,CAAA;AAAA,IACzE,CAAA;AAAA,GACJ,CAAA;AAEA,EAAA,MAAM,QAAa,WAAc,GAAA,cAAA,CAAA;AAEjC,EAAM,MAAA,IAAA,GAAe,WAAgB,KAAA,CAAA,GAAI,OAAU,GAAA,QAAA,CAAA;AAEnD,EAAA,uBACKF,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAW,EAAA,CAAA,+EAAA,EACP,SAAc,KAAA,eAAA,GAAkB,EAAK,GAAA,8BAAA,CAAA,CAAA,CAAA;AAAA,IAEzC,OAAA;AAAA,GAAA,kBAECA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAW,EAAA,CAAA,8FAAA,EACP,SAAc,KAAA,eAAA,GAAkB,sBAAyB,GAAA,SAAA,CAAA,CAAA;AAAA,GAG5D,EAAA,eAAA,qHAEQA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,4FAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAG,uBAAA,EAAA;AAAA,IAAY,SAAU,EAAA,YAAA;AAAA,IAAa,IAAK,EAAA,MAAA;AAAA,GAAO,CACpD,CAAA,EAAM,GACJ,EAAA,KAAA,EAAM,GAAE,EAAA,IACd,CAEA,mBAAAH,yBAAA,CAAA,aAAA,CAAAA,yBAAA,CAAA,QAAA,EAAA,IAAA,EAAE,GACI,EAAA,KAAA,EAAM,GAAE,EAAA,IAAA,kBACTA,yBAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,wFAAA;AAAA,GAAA,kBACVA,yBAAA,CAAA,aAAA,CAAAG,uBAAA,EAAA;AAAA,IAAY,SAAU,EAAA,YAAA;AAAA,IAAa,IAAK,EAAA,MAAA;AAAA,GAAO,CACpD,CACJ,CAER,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/cjs/{CertificateDisplayCard-26aedfb3.js → CertificateDisplayCard-b4987c0a.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-215395cc.js');
 var credential_helpers = require('./credential.helpers-a6eb673d.js');
-var CertDisplayCardSkillsCount = require('./CertDisplayCardSkillsCount-b1565a79.js');
+var CertDisplayCardSkillsCount = require('./CertDisplayCardSkillsCount-de4a0019.js');
 var index = require('./index-5488badc.js');
 var types_esm = require('./types.esm-9e1f15fe.js');
 var CaretRightFilled = require('./CaretRightFilled.svg');
@@ -817,4 +817,4 @@ exports.AlignmentsBox = AlignmentsBox;
 exports.CertificateBackFace = CertificateBackFace;
 exports.CertificateDisplayCard = CertificateDisplayCard;
 exports.CertificateFrontFace = CertificateFrontFace;
-//# sourceMappingURL=CertificateDisplayCard-26aedfb3.js.map
+//# sourceMappingURL=CertificateDisplayCard-b4987c0a.js.map