@learncard/react 2.12.11 → 3.0.1

package/dist/esm/{AchievementCard-d0cf882f.js → AchievementCard-c8df0ca4.js}

@@ -2,8 +2,8 @@ import React from 'react';
 import { b as TYPE_TO_MINI_ICON } from './index-e3586083.js';
 import { L as LCSubtypes } from './index-8be2f857.js';
 import { T as Trophy } from './Trophy-fc7fdec4.js';
-import { C as CircleCheckButton } from './CircleCheckButton-50702ec6.js';
-import { R as RoundedPill } from './RoundedPill-8e97b9e3.js';
+import { C as CircleCheckButton } from './CircleCheckButton-cb929fad.js';
+import { R as RoundedPill } from './RoundedPill-ef06f4b8.js';
 
 const AchievementCard = ({
   title = "Title Lorem Ipsum",
@@ -78,4 +78,4 @@ const AchievementCard = ({
 };
 
 export { AchievementCard as A };
-//# sourceMappingURL=AchievementCard-d0cf882f.js.map
+//# sourceMappingURL=AchievementCard-c8df0ca4.js.map

package/dist/esm/{AchievementCard-d0cf882f.js.map → AchievementCard-c8df0ca4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AchievementCard-d0cf882f.js","sources":["../../src/components/AchievementCard/AchievementCard.tsx"],"sourcesContent":["import React from 'react';\nimport { AchievementCardProps } from '../../types';\nimport { RoundedPill } from '../RoundedPill';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport { Trophy } from '../svgs';\nimport { TYPE_TO_MINI_ICON } from '../../constants';\nimport { LCSubtypes } from '../../types';\n\nexport const AchievementCard: React.FC<AchievementCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    claimStatus,\n    showSkills = true,\n    showChecked,\n    checked,\n    skillCount,\n    showStatus = true,\n    onCheckClick,\n    onClick = () => {},\n}) => {\n    const thumbClass = thumbImgSrc ? 'bg-grayscale-50' : 'bg-indigo-200';\n\n    const claimBtnStatusType = claimStatus ? LCSubtypes.achievement : LCSubtypes.locked;\n    const skillIconSrc = TYPE_TO_MINI_ICON[LCSubtypes.skill];\n    const skillCountTxt = skillCount && skillCount > 1 ? 'Skills' : 'Skill';\n    const showSkillCounter = showSkills && skillCount !== 0;\n\n    return (\n        <div\n            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] rounded-square-card-container`}\n        >\n            <section\n                className={`relative flex h-[120px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                {thumbImgSrc && (\n                    <img\n                        className=\"h-full w-full object-cover rounded-[20px]\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc === '') && (\n                    <Trophy\n                        className=\"achievement-placeholder-trophy flex p-[15px]\"\n                        color=\"#ffffff\"\n                    />\n                )}\n\n                {showSkills && showSkillCounter && (\n                    <div className=\"absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[10px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 \">\n                        <img\n                            src={skillIconSrc}\n                            className=\"flex items-center justify-center mr-[4px]\"\n                        />\n                        +{skillCount} {skillCountTxt}\n                    </div>\n                )}\n\n                {showChecked && (\n                    <CircleCheckButton\n                        checked={checked}\n                        onClick={onCheckClick}\n                        className=\"absolute top-[5px] left-[5px]\"\n                    />\n                )}\n            </section>\n\n            <section className=\"achievement-title w-full flex justify-center line-clamp-2\">\n                <p className=\"text-[14px] text-grayscale-900 font-bold mt-[10px] text-center\">\n                    {title}\n                </p>\n            </section>\n\n            <section className=\"achievement-card-footer absolute bottom-[6px] left-[5px]\">\n                {showStatus && (\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Claimed'}\n                    />\n                )}\n            </section>\n        </div>\n    );\n};\n\nexport default AchievementCard;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,kBAAkD,CAAC;AAAA,EAC5D,KAAQ,GAAA,mBAAA;AAAA,EACR,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,WAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,YAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAC;AACrB,CAAM,KAAA;AACF,EAAM,MAAA,UAAA,GAAa,cAAc,iBAAoB,GAAA,eAAA,CAAA;AAErD,EAAA,MAAM,kBAAqB,GAAA,WAAA,GAAc,UAAW,CAAA,WAAA,GAAc,UAAW,CAAA,MAAA,CAAA;AAC7E,EAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AACvD,EAAA,MAAM,aAAgB,GAAA,UAAA,IAAc,UAAa,GAAA,CAAA,GAAI,QAAW,GAAA,OAAA,CAAA;AAChE,EAAM,MAAA,gBAAA,GAAmB,cAAc,UAAe,KAAA,CAAA,CAAA;AAEtD,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAW,EAAA,CAAA,2IAAA,CAAA;AAAA,KAAA;AAAA,oBAEX,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACG,SAAA,EAAW,2BAA2B,UAAU,CAAA,2DAAA,CAAA;AAAA,OAAA;AAAA,MAE/C,WACG,oBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAU,EAAA,2CAAA;AAAA,UACV,KAAK,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,EAAA;AAAA,UACpB,GAAI,EAAA,8BAAA;AAAA,SAAA;AAAA,OACR;AAAA,MAEF,CAAA,CAAC,WAAe,IAAA,WAAA,KAAgB,EAC9B,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACG,SAAU,EAAA,8CAAA;AAAA,UACV,KAAM,EAAA,SAAA;AAAA,SAAA;AAAA,OACV;AAAA,MAGH,UAAc,IAAA,gBAAA,oBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAU,oLACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,GAAK,EAAA,YAAA;AAAA,UACL,SAAU,EAAA,2CAAA;AAAA,SAAA;AAAA,OACZ,EAAA,GAAA,EACA,UAAW,EAAA,GAAA,EAAE,aACnB,CAAA;AAAA,MAGH,WACG,oBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACG,OAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,SAAU,EAAA,+BAAA;AAAA,SAAA;AAAA,OACd;AAAA,KAER;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,aAAQ,SAAU,EAAA,2DAAA,EAAA,sCACd,GAAE,EAAA,EAAA,SAAA,EAAU,gEACR,EAAA,EAAA,KACL,CACJ,CAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,SAAU,EAAA,0DAAA,EAAA,EACd,UACG,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACG,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,IAAM,EAAA,kBAAA;AAAA,QACN,UAAY,EAAA,SAAA;AAAA,OAAA;AAAA,KAGxB,CAAA;AAAA,GACJ,CAAA;AAER;;;;"}
+{"version":3,"file":"AchievementCard-c8df0ca4.js","sources":["../../src/components/AchievementCard/AchievementCard.tsx"],"sourcesContent":["import React from 'react';\nimport { AchievementCardProps } from '../../types';\nimport { RoundedPill } from '../RoundedPill';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport { Trophy } from '../svgs';\nimport { TYPE_TO_MINI_ICON } from '../../constants';\nimport { LCSubtypes } from '../../types';\n\nexport const AchievementCard: React.FC<AchievementCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    claimStatus,\n    showSkills = true,\n    showChecked,\n    checked,\n    skillCount,\n    showStatus = true,\n    onCheckClick,\n    onClick = () => {},\n}) => {\n    const thumbClass = thumbImgSrc ? 'bg-grayscale-50' : 'bg-indigo-200';\n\n    const claimBtnStatusType = claimStatus ? LCSubtypes.achievement : LCSubtypes.locked;\n    const skillIconSrc = TYPE_TO_MINI_ICON[LCSubtypes.skill];\n    const skillCountTxt = skillCount && skillCount > 1 ? 'Skills' : 'Skill';\n    const showSkillCounter = showSkills && skillCount !== 0;\n\n    return (\n        <div\n            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] rounded-square-card-container`}\n        >\n            <section\n                className={`relative flex h-[120px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                {thumbImgSrc && (\n                    <img\n                        className=\"h-full w-full object-cover rounded-[20px]\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc === '') && (\n                    <Trophy\n                        className=\"achievement-placeholder-trophy flex p-[15px]\"\n                        color=\"#ffffff\"\n                    />\n                )}\n\n                {showSkills && showSkillCounter && (\n                    <div className=\"absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[10px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 \">\n                        <img\n                            src={skillIconSrc}\n                            className=\"flex items-center justify-center mr-[4px]\"\n                        />\n                        +{skillCount} {skillCountTxt}\n                    </div>\n                )}\n\n                {showChecked && (\n                    <CircleCheckButton\n                        checked={checked}\n                        onClick={onCheckClick}\n                        className=\"absolute top-[5px] left-[5px]\"\n                    />\n                )}\n            </section>\n\n            <section className=\"achievement-title w-full flex justify-center line-clamp-2\">\n                <p className=\"text-[14px] text-grayscale-900 font-bold mt-[10px] text-center\">\n                    {title}\n                </p>\n            </section>\n\n            <section className=\"achievement-card-footer absolute bottom-[6px] left-[5px]\">\n                {showStatus && (\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Claimed'}\n                    />\n                )}\n            </section>\n        </div>\n    );\n};\n\nexport default AchievementCard;\n"],"names":[],"mappings":";;;;;;;AAQO,MAAM,kBAAkD,CAAC;AAAA,EAC5D,KAAQ,GAAA,mBAAA;AAAA,EACR,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,WAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,YAAA;AAAA,EACA,UAAU,MAAM;AAAA,GAAC;AACrB,CAAM,KAAA;AACF,EAAM,MAAA,UAAA,GAAa,cAAc,iBAAoB,GAAA,eAAA,CAAA;AAErD,EAAA,MAAM,kBAAqB,GAAA,WAAA,GAAc,UAAW,CAAA,WAAA,GAAc,UAAW,CAAA,MAAA,CAAA;AAC7E,EAAM,MAAA,YAAA,GAAe,iBAAkB,CAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AACvD,EAAA,MAAM,aAAgB,GAAA,UAAA,IAAc,UAAa,GAAA,CAAA,GAAI,QAAW,GAAA,OAAA,CAAA;AAChE,EAAM,MAAA,gBAAA,GAAmB,cAAc,UAAe,KAAA,CAAA,CAAA;AAEtD,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAW,EAAA,CAAA,2IAAA,CAAA;AAAA,KAAA;AAAA,oBAEX,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACG,SAAA,EAAW,2BAA2B,UAAU,CAAA,2DAAA,CAAA;AAAA,OAAA;AAAA,MAE/C,WACG,oBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAU,EAAA,2CAAA;AAAA,UACV,KAAK,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,EAAA;AAAA,UACpB,GAAI,EAAA,8BAAA;AAAA,SAAA;AAAA,OACR;AAAA,MAEF,CAAA,CAAC,WAAe,IAAA,WAAA,KAAgB,EAC9B,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACG,SAAU,EAAA,8CAAA;AAAA,UACV,KAAM,EAAA,SAAA;AAAA,SAAA;AAAA,OACV;AAAA,MAGH,UAAc,IAAA,gBAAA,oBACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,WAAU,oLACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,GAAK,EAAA,YAAA;AAAA,UACL,SAAU,EAAA,2CAAA;AAAA,SAAA;AAAA,OACZ,EAAA,GAAA,EACA,UAAW,EAAA,GAAA,EAAE,aACnB,CAAA;AAAA,MAGH,WACG,oBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACG,OAAA;AAAA,UACA,OAAS,EAAA,YAAA;AAAA,UACT,SAAU,EAAA,+BAAA;AAAA,SAAA;AAAA,OACd;AAAA,KAER;AAAA,oBAEA,KAAA,CAAA,aAAA,CAAC,aAAQ,SAAU,EAAA,2DAAA,EAAA,sCACd,GAAE,EAAA,EAAA,SAAA,EAAU,gEACR,EAAA,EAAA,KACL,CACJ,CAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,SAAU,EAAA,0DAAA,EAAA,EACd,UACG,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACG,OAAA;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,IAAM,EAAA,kBAAA;AAAA,QACN,UAAY,EAAA,SAAA;AAAA,OAAA;AAAA,KAGxB,CAAA;AAAA,GACJ,CAAA;AAER;;;;"}

package/dist/esm/{BoostGenericCard-3481b47c.js → BoostGenericCard-dd2b515a.js}

@@ -2,12 +2,12 @@ import React from 'react';
 import { W as WalletCategoryTypes } from './index-8be2f857.js';
 import { T as TYPE_TO_IMG_SRC, a as TYPE_TO_WALLET_DARK_COLOR } from './index-e3586083.js';
 import { B as BadgeDisplayIcon, A as AwardDisplayIcon, a as CourseDisplayIcon, I as IDDisplayIcon, C as CertificateDisplayIcon } from './IDDisplayIcon-f6993140.js';
-import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
-import { c as categorizeSkills } from './credential.helpers-30adeb2d.js';
+import { P as PuzzlePiece } from './PuzzlePiece-9c313d93.js';
+import { c as categorizeSkills } from './credential.helpers-4c72d304.js';
 import { T as ThreeDotVertical } from './ThreeDotVertical-ccbbc8ef.js';
 import { B as BadgeThumbnailImg } from './BadgeThumbnailImg-7d436367.js';
-import { u as useT } from './i18n-35209bfa.js';
-import { C as CircleCheckButton } from './CircleCheckButton-50702ec6.js';
+import { u as useT } from './i18n-b142d48e.js';
+import { C as CircleCheckButton } from './CircleCheckButton-cb929fad.js';
 
 const AlignmentSkillsCount = ({
   credential,
@@ -168,7 +168,7 @@ const BoostGenericCard = ({
       "button",
       {
         type: "button",
-        className: "boost-generic-card-button z-10 flex flex-col flex-grow rounded-[20px]",
+        className: "boost-generic-card-button z-10 flex flex-col grow rounded-[20px]",
         onClick: handleInnerClick
       },
       /* @__PURE__ */ React.createElement("div", { style: __spreadProps(__spreadValues({}, inactiveMediaStyle), { width: "100%" }) }, customThumbComponent || /* @__PURE__ */ React.createElement("section", { className: defaultThumbClass }, (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) ? /* @__PURE__ */ React.createElement(
@@ -188,7 +188,7 @@ const BoostGenericCard = ({
       /* @__PURE__ */ React.createElement(
         "section",
         {
-          className: `flex flex-col flex-grow items-center justify-end pt-1 w-full ${linkedCredentialsCount === 0 ? "pb-[20px]" : ""}`
+          className: `flex flex-col grow items-center justify-end pt-1 w-full ${linkedCredentialsCount === 0 ? "pb-[20px]" : ""}`
         },
         /* @__PURE__ */ React.createElement("div", { className: "px-1 flex flex-col items-center justify-center w-full" }, !customTitle ? /* @__PURE__ */ React.createElement(
           "p",
@@ -203,7 +203,7 @@ const BoostGenericCard = ({
             title
           },
           title
-        ) : customTitle, /* @__PURE__ */ React.createElement("div", { className: "mt-1 w-full px-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: "line-clamp-2 break-words text-[12px] leading-snug text-grayscale-700" }, verifierBadge && /* @__PURE__ */ React.createElement("span", { className: "mr-1 inline-block align-middle" }, verifierBadge), customIssuerName || /* @__PURE__ */ React.createElement("span", { className: "font-bold", style: inactiveTextStyle }, issuerName))), customDateDisplay || /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-grayscale-700 mt-1" }, dateDisplay), isInSkillsModal && credential && /* @__PURE__ */ React.createElement(
+        ) : customTitle, /* @__PURE__ */ React.createElement("div", { className: "mt-1 w-full px-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: "line-clamp-2 wrap-break-word text-[12px] leading-snug text-grayscale-700" }, verifierBadge && /* @__PURE__ */ React.createElement("span", { className: "mr-1 inline-block align-middle" }, verifierBadge), customIssuerName || /* @__PURE__ */ React.createElement("span", { className: "font-bold", style: inactiveTextStyle }, issuerName))), customDateDisplay || /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-grayscale-700 mt-1" }, dateDisplay), isInSkillsModal && credential && /* @__PURE__ */ React.createElement(
           AlignmentSkillsCount,
           {
             credential,
@@ -233,4 +233,4 @@ const BoostGenericCard = ({
 };
 
 export { BoostGenericCard as B, getLifecycleTreatment as g };
-//# sourceMappingURL=BoostGenericCard-3481b47c.js.map
+//# sourceMappingURL=BoostGenericCard-dd2b515a.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoostGenericCard-dd2b515a.js","sources":["../../src/components/BoostGenericCard/AlignmentSkillsCount.tsx","../../src/helpers/display.helpers.ts","../../src/helpers/lifecycle.helpers.ts","../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport PuzzlePiece from '../svgs/PuzzlePiece';\nimport { VC } from '@learncard/types';\nimport { categorizeSkills } from '../../helpers/credential.helpers';\n\ntype AlignmentSkillsCountProps = {\n    credential?: VC;\n    onClick?: () => void;\n    className?: string;\n};\n\nconst AlignmentSkillsCount: React.FC<AlignmentSkillsCountProps> = ({\n    credential,\n    onClick,\n    className = '',\n}) => {\n    if (!credential) return <></>;\n\n    const achievement = (credential?.credentialSubject as any)?.achievement;\n    let alignmentCount = achievement?.alignment?.length || 0;\n\n    if (alignmentCount === 0 && credential.skills?.length > 0) {\n        // fallback to legacy skills field if present and no alignments\n        const skillsMap = categorizeSkills(credential.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        alignmentCount = total;\n    }\n\n    return (\n        <div\n            role={onClick ? ('button' as const) : undefined}\n            onClick={onClick}\n            className={`px-[10px] py-[2px] flex gap-[3px] items-center rounded-[5px] overflow-hidden bg-violet-100 ${className}`}\n        >\n            <PuzzlePiece className=\"w-[20px] h-[20px] text-grayscale-800\" version=\"filled\" />\n            <p className=\"text-[12px] text-grayscale-800 font-poppins font-[600]\">\n                {`${alignmentCount} Skill${alignmentCount !== 1 ? 's' : ''}`}\n            </p>\n        </div>\n    );\n};\n\nexport default AlignmentSkillsCount;\n","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.qualifications ||\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 type { CSSProperties } from 'react';\n\nexport type CredentialLifecycleStatus = 'active' | 'revoked' | 'suspended';\n\nexport type LifecycleTreatment = {\n    /** True when the credential is revoked or suspended. */\n    isInactive: boolean;\n    /** Inline filter for media (images / thumbnails); `undefined` when active.\n     *  Inline style (not a Tailwind class) so it applies regardless of whether the\n     *  consumer app's Tailwind scans this package or generates the utility. */\n    mediaStyle: CSSProperties | undefined;\n    /** Inline style for de-emphasizing text; `undefined` when active. */\n    textStyle: CSSProperties | undefined;\n    /** Pill background color for the status chip (only meaningful when `isInactive`). */\n    pillBg: string;\n};\n\nconst REVOKED_COLOR = '#DC2626'; // red-600\nconst SUSPENDED_COLOR = '#D97706'; // amber-600\n\n/**\n * Shared visual treatment for a revoked/suspended credential, used by both the\n * grid card (`BoostGenericCard`) and the list row (`BoostListItem`) so the two\n * views stay in sync. Values are inert (`isInactive: false`, `undefined` styles)\n * for active credentials.\n */\nexport const getLifecycleTreatment = (\n    status: CredentialLifecycleStatus = 'active'\n): LifecycleTreatment => {\n    const isInactive = status === 'revoked' || status === 'suspended';\n\n    return {\n        isInactive,\n        mediaStyle: isInactive ? { filter: 'grayscale(1) brightness(0.9)' } : undefined,\n        textStyle: isInactive ? { filter: 'grayscale(1)', opacity: 0.6 } : undefined,\n        pillBg: status === 'suspended' ? SUSPENDED_COLOR : REVOKED_COLOR,\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 AlignmentSkillsCount from './AlignmentSkillsCount';\nimport ThreeDotVertical from '../svgs/ThreeDotVertical';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';\nimport { getLifecycleTreatment } from '../../helpers/lifecycle.helpers';\nimport { useT } from '../../i18n';\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    lifecycleStatus = 'active',\n}) => {\n    const t = useT();\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    // Shared revoked/suspended treatment (see getLifecycleTreatment). Inline styles are\n    // used (not Tailwind classes) because the consumer app's Tailwind doesn't scan this\n    // package and it ships no utility CSS, so utility classes here have no backing rule.\n    const {\n        isInactive,\n        mediaStyle: inactiveMediaStyle,\n        textStyle: inactiveTextStyle,\n        pillBg,\n    } = getLifecycleTreatment(lifecycleStatus);\n    const pillLabel = t(`credential.lifecycle.${lifecycleStatus}`);\n    const pillLeft = showChecked ? 'left-[44px]' : 'left-[8px]';\n\n    return (\n        <div\n            className={`boost-generic-card-wrapper flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[285px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {isInactive && (\n                <span\n                    className={`absolute top-[8px] ${pillLeft} z-20 rounded-full px-[9px] py-[3px] text-[10px] font-extrabold uppercase tracking-wide text-white`}\n                    style={{ backgroundColor: pillBg }}\n                >\n                    {pillLabel}\n                </span>\n            )}\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\n                    className=\"absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0\"\n                    style={inactiveMediaStyle}\n                >\n                    <img className=\"h-full w-full object-cover\" src={bgImgSrc} />\n                </section>\n            )}\n\n            <button\n                type=\"button\"\n                className=\"boost-generic-card-button z-10 flex flex-col grow rounded-[20px]\"\n                onClick={handleInnerClick}\n            >\n                {/* Thumbnail — filter on the wrapper so it desaturates a\n                    customThumbComponent too, not just the default thumb section.\n                    The explicit width is load-bearing on iOS 18 WebKit: a bare block\n                    child of a <button> flex container is laid out shrink-to-fit there\n                    (UA align-items: flex-start per the HTML spec), so without it the\n                    badge collapses to its 116px circle and the header artwork stops\n                    running under the options button. iOS 26+/desktop engines compute\n                    align-items: normal and stretch, which masks the bug (LC-2066).\n                    width is spread last so nothing can ever override it. */}\n                <div style={{ ...inactiveMediaStyle, width: '100%' }}>\n                    {customThumbComponent || (\n                        <section className={defaultThumbClass}>\n                            {thumbImgSrc?.trim() ? (\n                                <BadgeThumbnailImg\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                </div>\n\n                {/* Details Section: grows to fill available space */}\n                <section\n                    className={`flex flex-col grow items-center justify-end pt-1 w-full ${\n                        linkedCredentialsCount === 0 ? 'pb-[20px]' : ''\n                    }`}\n                >\n                    <div className=\"px-1 flex flex-col items-center justify-center w-full\">\n                        {/* Title - dynamically size based on length */}\n                        {!customTitle ? (\n                            <p\n                                className={`\n                                ${customHeaderClass}\n                                font-medium text-center text-grayscale-900 line-clamp-2\n                                h-[50px] flex items-center justify-center\n                                ${\n                                    (title?.length ?? 0) > 35\n                                        ? 'text-[13px] leading-tight'\n                                        : 'text-[16px]'\n                                }\n                            `}\n                                style={inactiveTextStyle}\n                                title={title}\n                            >\n                                {title}\n                            </p>\n                        ) : (\n                            customTitle\n                        )}\n\n                        {/* Verifier & Issuer */}\n                        <div className=\"mt-1 w-full px-4 text-center\">\n                            <span className=\"line-clamp-2 wrap-break-word text-[12px] leading-snug text-grayscale-700\">\n                                {verifierBadge && (\n                                    <span className=\"mr-1 inline-block align-middle\">\n                                        {verifierBadge}\n                                    </span>\n                                )}\n                                {customIssuerName || (\n                                    <span className=\"font-bold\" style={inactiveTextStyle}>\n                                        {issuerName}\n                                    </span>\n                                )}\n                            </span>\n                        </div>\n\n                        {/* Date */}\n                        {customDateDisplay || (\n                            <span className=\"text-[11px] text-grayscale-700 mt-1\">\n                                {dateDisplay}\n                            </span>\n                        )}\n\n                        {/* Skills count if in modal */}\n                        {isInSkillsModal && credential && (\n                            <AlignmentSkillsCount\n                                credential={credential}\n                                onClick={handleInnerClick}\n                                className=\"mt-[16px]\"\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] z-20\">\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":["total"],"mappings":"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"}

package/dist/esm/{BoostSmallCard-3f5d83b9.js → BoostSmallCard-538e22e7.js}

@@ -6,7 +6,7 @@ import { U as UserProfilePicture } from './UserProfilePicture-4a00d151.js';
 import { B as BadgeThumbnailImg } from './BadgeThumbnailImg-7d436367.js';
 import { W as WalletCategoryTypes } from './index-8be2f857.js';
 import { a as TYPE_TO_WALLET_DARK_COLOR, T as TYPE_TO_IMG_SRC } from './index-e3586083.js';
-import { C as CircleCheckButton } from './CircleCheckButton-50702ec6.js';
+import { C as CircleCheckButton } from './CircleCheckButton-cb929fad.js';
 
 const getDarkBGColor = (type) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
@@ -82,7 +82,7 @@ const BoostSmallCard = ({
       "div",
       {
         key: issueItem == null ? void 0 : issueItem.id,
-        className: "profile-thumb-img border-[1px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+        className: "profile-thumb-img border border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
       },
       /* @__PURE__ */ React.createElement(
         UserProfilePicture,
@@ -157,4 +157,4 @@ const BoostSmallCard = ({
 };
 
 export { BoostSmallCard as B };
-//# sourceMappingURL=BoostSmallCard-3f5d83b9.js.map
+//# sourceMappingURL=BoostSmallCard-538e22e7.js.map

package/dist/esm/BoostSmallCard-538e22e7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostSmallCard-538e22e7.js","sources":["../../src/helpers/color.helpers.ts","../../src/components/BoostSmallCard/BoostSmallCard.tsx"],"sourcesContent":["import { WalletCategoryTypes } from '../types';\n\nexport const getDarkBGColor = (type: WalletCategoryTypes) => {\n    if (!type) return '';\n\n    if (type === WalletCategoryTypes?.achievements) {\n        return 'bg-orange-500';\n    } else if (type === WalletCategoryTypes.qualifications) {\n        return 'bg-orange-700';\n    } else if (type === WalletCategoryTypes?.learningHistory) {\n        return 'bg-emerald-500';\n    } else if (type === WalletCategoryTypes?.skills) {\n        return 'bg-violet-500';\n    } else if (type === WalletCategoryTypes?.jobHistory) {\n        return 'bg-blue-500';\n    } else if (type === WalletCategoryTypes?.socialBadge) {\n        return 'bg-cyan-500';\n    } else if (type === WalletCategoryTypes?.relationships) {\n        return 'bg-pink-500';\n    } else if (type === WalletCategoryTypes?.accommodations) {\n        return 'bg-amber-500';\n    } else if (type === WalletCategoryTypes?.accomplishments) {\n        return 'bg-lime-500';\n    } else if (type === WalletCategoryTypes?.events) {\n        return 'bg-fuchsia-500';\n    } else if (type === WalletCategoryTypes?.membership) {\n        return 'bg-teal-500';\n    } else if (type === WalletCategoryTypes?.goals) {\n        return 'bg-rose-500';\n    } else if (type === WalletCategoryTypes?.ids) {\n        return 'bg-yellow-500';\n    } else if (type === WalletCategoryTypes?.currency) {\n        return 'bg-cyan-500';\n    }\n\n    return 'bg-grayscale-900';\n};\n","import React from 'react';\n\nimport CaretRightFilled from '../../assets/images/CaretRightFilled.svg';\nimport AddAwardLight from '../../assets/images/addawardlight.svg';\nimport ThreeDotVertical from '../svgs/ThreeDotVertical';\nimport UserProfilePicture from '../UserProfilePicture/UserProfilePicture';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';\n\nimport { BoostSmallCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { getDarkBGColor } from '../../helpers/color.helpers';\n\nexport const BoostSmallCard: React.FC<BoostSmallCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    customTitle,\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    arrowOnClick,\n    buttonOnClick,\n    customButtonComponent,\n    customBodyClass,\n    customBodyComponent,\n    customThumbComponent,\n    customDraftComponent,\n    innerOnClick,\n    issueHistory,\n    bgImgSrc,\n    optionsTriggerOnClick,\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    const headerBgColor = getDarkBGColor(type);\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    const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 py-[5px] px-[10px] ${customBodyClass}`;\n    const defaultButtonClass = `cursor-pointer small-boost-boost-btn flex boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;\n    const innerClickContainerClass = `relative cursor-pointer boost-small-card inner-click-container z-10`;\n\n    const issueHistoryDisplay =\n        issueHistory && issueHistory?.length > 3 ? issueHistory?.slice(0, 3) : issueHistory;\n    const renderIssueHistory = issueHistoryDisplay?.map(issueItem => {\n        return (\n            <div\n                key={issueItem?.id}\n                className=\"profile-thumb-img border border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]\"\n            >\n                <UserProfilePicture\n                    customContainerClass={`h-full w-full object-cover ${\n                        !issueItem?.thumb ? 'pt-[8px]' : ''\n                    }`}\n                    user={{ image: issueItem?.thumb, name: issueItem?.name }}\n                    alt=\"profile\"\n                />\n            </div>\n        );\n    });\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-[280px] 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/70 flex items-center justify-center\"\n                    onClick={handleOptionsClick}\n                >\n                    <ThreeDotVertical className=\"h-[20px] w-[20px] z-50 text-grayscale-900\" />\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\n            <div className={innerClickContainerClass} onClick={handleInnerClick}>\n                {customThumbComponent}\n                {!customThumbComponent && (\n                    <section className={defaultThumbClass}>\n                        {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                            <BadgeThumbnailImg\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                {customTitle && customTitle}\n                {!customTitle && (\n                    <section className={defaultHeaderClass}>\n                        <p className=\"relative z-[100] small-boost-title text-[16px] leading-[130%] p-[0px] font-medium text-center line-clamp-2\">\n                            {title}\n                        </p>\n                    </section>\n                )}\n\n                <section className={defaultBodyClass}>\n                    {customBodyComponent && customBodyComponent}\n                    {!customBodyComponent &&\n                        issueHistory &&\n                        issueHistory?.length > 0 &&\n                        renderIssueHistory}\n                    {!customBodyComponent && issueHistory && issueHistory?.length > 3 && (\n                        <span className=\"small-boost-issue-count ml-[10px] font-semibold\">\n                            +{issueHistory?.length - 3}\n                        </span>\n                    )}\n                </section>\n            </div>\n\n            <section className=\"small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full\">\n                {customButtonComponent && customButtonComponent}\n\n                {!customButtonComponent && (\n                    <div className=\"flex w-full flex-col items-center justify-center\">\n                        {customDraftComponent && customDraftComponent}\n                        <div onClick={buttonOnClick} className={defaultButtonClass}>\n                            <img className=\"h-[25px] mr-[7px] text-\" src={AddAwardLight} />\n                            <span className=\"font-mouse text-[25px] tracking-wider\">BOOST</span>\n                        </div>\n                    </div>\n                )}\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\n            {arrowOnClick && (\n                <button\n                    type=\"button\"\n                    onClick={arrowOnClick}\n                    className=\"arrow-btn-overlay absolute top-[52px] right-[2px]\"\n                >\n                    <img\n                        className=\"h-full w-full object-contai\"\n                        src={CaretRightFilled ?? ''}\n                        alt=\"Right Caret\"\n                    />\n                </button>\n            )}\n        </div>\n    );\n};\n\nexport default BoostSmallCard;\n"],"names":[],"mappings":";;;;;;;;;;AAEa,MAAA,cAAA,GAAiB,CAAC,IAA8B,KAAA;AAF7D,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAGI,EAAI,IAAA,CAAC,MAAa,OAAA,EAAA,CAAA;AAElB,EAAI,IAAA,IAAA,MAAA,CAAS,gDAAqB,YAAc,CAAA,EAAA;AAC5C,IAAO,OAAA,eAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,KAAA,mBAAA,CAAoB,cAAgB,EAAA;AACpD,IAAO,OAAA,eAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,eAAiB,CAAA,EAAA;AACtD,IAAO,OAAA,gBAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,MAAQ,CAAA,EAAA;AAC7C,IAAO,OAAA,eAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,UAAY,CAAA,EAAA;AACjD,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,WAAa,CAAA,EAAA;AAClD,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,aAAe,CAAA,EAAA;AACpD,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,cAAgB,CAAA,EAAA;AACrD,IAAO,OAAA,cAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,eAAiB,CAAA,EAAA;AACtD,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,MAAQ,CAAA,EAAA;AAC7C,IAAO,OAAA,gBAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,UAAY,CAAA,EAAA;AACjD,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,KAAO,CAAA,EAAA;AAC5C,IAAO,OAAA,aAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,GAAK,CAAA,EAAA;AAC1C,IAAO,OAAA,eAAA,CAAA;AAAA,GACX,MAAA,IAAW,IAAS,MAAA,CAAA,EAAA,GAAA,mBAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAqB,QAAU,CAAA,EAAA;AAC/C,IAAO,OAAA,aAAA,CAAA;AAAA,GACX;AAEA,EAAO,OAAA,kBAAA,CAAA;AACX,CAAA;;ACvBO,MAAM,iBAAgD,CAAC;AAAA,EAC1D,KAAQ,GAAA,mBAAA;AAAA,EACR,WAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAmB,GAAA,EAAA;AAAA,EACnB,iBAAoB,GAAA,EAAA;AAAA,EACpB,OAAO,mBAAoB,CAAA,YAAA;AAAA,EAC3B,SAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,qBAAA;AAAA,EACA,eAAA;AAAA,EACA,mBAAA;AAAA,EACA,oBAAA;AAAA,EACA,oBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA;AACJ,CAAM,KAAA;AAnCN,EAAA,IAAA,EAAA,CAAA;AAoCI,EAAM,MAAA,UAAA,GAAa,0BAA0B,IAAI,CAAA,GAC3C,MAAM,yBAA0B,CAAA,IAAI,CAAC,CACrC,CAAA,GAAA,iBAAA,CAAA;AACN,EAAA,MAAM,iBAAoB,GAAA,CAAA,kEAAA,EAAqE,UAAU,CAAA,mEAAA,EAAsE,gBAAgB,CAAA,CAAA,CAAA;AAC/L,EAAA,MAAM,UAAS,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,IAAA,EAAA,MAAW,EAAK,GAAA,WAAA,GAAc,gBAAgB,IAAI,CAAA,CAAA;AAC9E,EAAM,MAAA,aAAA,GAAgB,eAAe,IAAI,CAAA,CAAA;AACzC,EAAM,MAAA,aAAA,GAAgB,cAAc,yBAA4B,GAAA,2BAAA,CAAA;AAChE,EAAM,MAAA,kBAAA,GAAqB,iDAAiD,iBAAiB,CAAA,CAAA,CAAA;AAC7F,EAAM,MAAA,gBAAA,GAAmB,yIAAyI,eAAe,CAAA,CAAA,CAAA;AACjL,EAAM,MAAA,kBAAA,GAAqB,2IAA2I,aAAa,CAAA,CAAA,CAAA;AACnL,EAAA,MAAM,wBAA2B,GAAA,CAAA,mEAAA,CAAA,CAAA;AAEjC,EAAM,MAAA,mBAAA,GACF,iBAAgB,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,MAAA,IAAS,IAAI,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAM,GAAG,CAAK,CAAA,GAAA,YAAA,CAAA;AAC3E,EAAM,MAAA,kBAAA,GAAqB,mBAAqB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,CAAA,GAAA,CAAI,CAAa,SAAA,KAAA;AAC7D,IACI,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,KAAK,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,EAAA;AAAA,QAChB,SAAU,EAAA,8HAAA;AAAA,OAAA;AAAA,sBAEV,KAAA,CAAA,aAAA;AAAA,QAAC,kBAAA;AAAA,QAAA;AAAA,UACG,sBAAsB,CAClB,2BAAA,EAAA,EAAC,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,GAAQ,aAAa,EACrC,CAAA,CAAA;AAAA,UACA,MAAM,EAAE,KAAA,EAAO,uCAAW,KAAO,EAAA,IAAA,EAAM,uCAAW,IAAK,EAAA;AAAA,UACvD,GAAI,EAAA,SAAA;AAAA,SAAA;AAAA,OACR;AAAA,KACJ,CAAA;AAAA,GAER,CAAA,CAAA;AAEA,EAAA,MAAM,mBAAmB,MAAM;AAC3B,IAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,EAAA,CAAA;AAAA,GACJ,CAAA;AAEA,EAAA,MAAM,qBAAqB,MAAM;AAC7B,IAAA,qBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,qBAAA,EAAA,CAAA;AAAA,GACJ,CAAA;AAEA,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAW,oJAAoJ,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,IAEvK,qBACG,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,8JAAA;AAAA,QACV,OAAS,EAAA,kBAAA;AAAA,OAAA;AAAA,sBAET,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,SAAA,EAAU,2CAA4C,EAAA,CAAA;AAAA,KAC5E;AAAA,IAGH,QAAA,oBACI,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,SAAU,EAAA,wFAAA,EAAA,kBACd,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,4CAAA,EAA6C,GAAK,EAAA,QAAA,EAAU,CAC/E,CAAA;AAAA,wCAGH,KAAI,EAAA,EAAA,SAAA,EAAW,wBAA0B,EAAA,OAAA,EAAS,oBAC9C,oBACA,EAAA,CAAC,oBACE,oBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,SAAW,EAAA,iBAAA,EAAA,EACf,WAAe,IAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,YAAW,EACpC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,uGAAA;AAAA,QACV,KAAK,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,EAAA;AAAA,QACpB,GAAI,EAAA,8BAAA;AAAA,OAAA;AAAA,KAGV,EAAA,CAAA,CAAC,WAAe,IAAA,CAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,YAAW,EACtC,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACG,SAAU,EAAA,gEAAA;AAAA,QACV,GAAK,EAAA,MAAA;AAAA,OAAA;AAAA,KAGjB,GAGH,WAAe,IAAA,WAAA,EACf,CAAC,WACE,oBAAA,KAAA,CAAA,aAAA,CAAC,aAAQ,SAAW,EAAA,kBAAA,EAAA,sCACf,GAAE,EAAA,EAAA,SAAA,EAAU,gHACR,KACL,CACJ,mBAGH,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,WAAW,gBACf,EAAA,EAAA,mBAAA,IAAuB,qBACvB,CAAC,mBAAA,IACE,iBACA,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,MAAA,IAAS,KACvB,kBACH,EAAA,CAAC,uBAAuB,YAAgB,IAAA,CAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,UAAS,CAC5D,oBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAU,EAAA,iDAAA,EAAA,EAAkD,MAC5D,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,MAAA,IAAS,CAC7B,CAER,CACJ,CAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAQ,SAAU,EAAA,wFAAA,EAAA,EACd,yBAAyB,qBAEzB,EAAA,CAAC,qBACE,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAU,EAAA,kDAAA,EAAA,EACV,oBAAwB,IAAA,oBAAA,sCACxB,KAAI,EAAA,EAAA,OAAA,EAAS,aAAe,EAAA,SAAA,EAAW,kBACpC,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,2BAA0B,GAAK,EAAA,aAAA,EAAe,CAC7D,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAK,SAAU,EAAA,uCAAA,EAAA,EAAwC,OAAK,CACjE,CACJ,CAER,CAAA;AAAA,IACC,WACG,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iDACX,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,iBAAA;AAAA,MAAA;AAAA,QACG,OAAS,EAAA,WAAA;AAAA,QACT,OAAS,EAAA,YAAA;AAAA,QACT,SAAW,EAAA,aAAA;AAAA,OAAA;AAAA,KAEnB,CAAA;AAAA,IAGH,YACG,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACG,IAAK,EAAA,QAAA;AAAA,QACL,OAAS,EAAA,YAAA;AAAA,QACT,SAAU,EAAA,mDAAA;AAAA,OAAA;AAAA,sBAEV,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACG,SAAU,EAAA,6BAAA;AAAA,UACV,MAAK,EAAoB,GAAA,gBAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,UACzB,GAAI,EAAA,aAAA;AAAA,SAAA;AAAA,OACR;AAAA,KACJ;AAAA,GAER,CAAA;AAER;;;;"}

package/dist/esm/{Button-70eedbf6.js → Button-866044a8.js}

@@ -6,11 +6,11 @@ const Button = ({ text, onClick, className = "" }) => {
     {
       type: "button",
       onClick,
-      className: `p-4 border rounded text-gray-700 ${className}`
+      className: `p-4 border rounded-sm text-gray-700 ${className}`
     },
     text
   );
 };
 
 export { Button as B };
-//# sourceMappingURL=Button-70eedbf6.js.map
+//# sourceMappingURL=Button-866044a8.js.map

package/dist/esm/Button-866044a8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-866044a8.js","sources":["../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { MouseEventHandler } from 'react';\n\nexport type ButtonProps = {\n    text?: string;\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    className?: string;\n};\n\nexport const Button: React.FC<ButtonProps> = ({ text, onClick, className = '' }) => {\n    return (\n        <button\n            type=\"button\"\n            onClick={onClick}\n            className={`p-4 border rounded-sm text-gray-700 ${className}`}\n        >\n            {text}\n        </button>\n    );\n};\n\nexport default Button;\n"],"names":[],"mappings":";;AAQO,MAAM,SAAgC,CAAC,EAAE,MAAM,OAAS,EAAA,SAAA,GAAY,IAAS,KAAA;AAChF,EACI,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACG,IAAK,EAAA,QAAA;AAAA,MACL,OAAA;AAAA,MACA,SAAA,EAAW,uCAAuC,SAAS,CAAA,CAAA;AAAA,KAAA;AAAA,IAE1D,IAAA;AAAA,GACL,CAAA;AAER;;;;"}

package/dist/esm/{CertificateDisplayCard-fbd123d1.js → CertificateDisplayCard-46c13c49.js}

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { I as InfoIcon, c as capitalize, E as ExclamationPoint, A as AcuteCheckmark, d as getBaseUrl, e as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, h as LeftArrow, j as SkillsBox, R as RoundedCorner, k as IssuerSeal, r as resolveProfileDisplay, V as VERIFIER_STATES, l as VerifierStateBadgeAndText, F as FatArrow } from './VerifierStateBadgeAndText-f2bbd9fd.js';
-import { g as getTotalCountOfSkills, c as categorizeSkills, a as getColorForVerificationStatus, b as getInfoFromCredential, d as getCategoryDarkColor, e as getCategoryLightColor, f as getCategoryIcon, h as getImageFromProfile } from './credential.helpers-30adeb2d.js';
-import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
+import { u as useT } from './i18n-b142d48e.js';
+import { I as InfoIcon, c as capitalize, E as ExclamationPoint, A as AcuteCheckmark, d as getBaseUrl, e as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, h as LeftArrow, j as SkillsBox, R as RoundedCorner, k as IssuerSeal, r as resolveProfileDisplay, V as VERIFIER_STATES, l as VerifierStateBadgeAndText, F as FatArrow } from './VerifierStateBadgeAndText-1588afeb.js';
+import { g as getTotalCountOfSkills, c as categorizeSkills, a as getColorForVerificationStatus, b as getInfoFromCredential, d as getCategoryDarkColor, e as getCategoryLightColor, f as getCategoryIcon, h as getImageFromProfile } from './credential.helpers-4c72d304.js';
+import { P as PuzzlePiece } from './PuzzlePiece-9c313d93.js';
 import { U as UserProfilePicture } from './UserProfilePicture-4a00d151.js';
 import { isAppDidWeb } from '@learncard/helpers';
 import { a as LCCategoryEnum } from './index-8be2f857.js';
-import { V as VerificationStatusEnum } from './types.esm-9d538f63.js';
-import { u as useT } from './i18n-35209bfa.js';
+import { V as VerificationStatusEnum } from './types.esm-a70402df.js';
 import { X, L as Lightbox } from './Lightbox-11f4888d.js';
 import ThreeDots from './DotsThreeOutline.svg';
 
@@ -196,7 +196,7 @@ const VerificationRow = ({ verification }) => {
   }
   primaryText = capitalize(primaryText);
   const infoText = "";
-  return /* @__PURE__ */ React.createElement("div", { className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0" }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "verification-row flex flex-col gap-[5px] font-poppins border-b border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0" }, /* @__PURE__ */ React.createElement(
     "span",
     {
       className: "font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none",
@@ -440,7 +440,7 @@ const MediaAttachmentsBox = ({
         /* @__PURE__ */ React.createElement(
           "button",
           {
-            className: "relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0",
+            className: "relative h-[80px] w-[80px] rounded-[15px] overflow-hidden shrink-0",
             onClick: (e) => {
               e.stopPropagation();
               handleMediaAttachmentClick(media.url, media.type);
@@ -518,8 +518,10 @@ const CertificateBackFace = ({
   customLinkedCredentialsComponent
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
+  const t = useT();
   const { createdAt, credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
-    uppercaseDate: false
+    uppercaseDate: false,
+    dateType: "awarded"
   });
   const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
   const criteria = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
@@ -547,13 +549,12 @@ const CertificateBackFace = ({
       /* @__PURE__ */ React.createElement(LeftArrow, { className: "text-white", size: "25" }),
       "Details"
     )) : /* @__PURE__ */ React.createElement("h1", { className: "text-white text-center text-[22px] font-jacques" }, "Details"),
-    /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "About", text: description }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "About", text: description }, createdAt && /* @__PURE__ */ React.createElement(
       "span",
       {
-        className: `text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${description ? "pt-[10px] border-t-[1px] border-solid border-grayscale-200" : ""}`
+        className: `text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${description ? "pt-[10px] border-t border-solid border-grayscale-200" : ""}`
       },
-      "Awarded on ",
-      createdAt
+      t("credential.awardedOn", { date: createdAt })
     )),
     criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "Criteria", text: criteria }),
     customLinkedCredentialsComponent && customLinkedCredentialsComponent,
@@ -592,7 +593,7 @@ const CertificateCornerIcon = ({
       break;
     case "bottom-left":
       iconPositionClassName = "bottom-0 left-0";
-      cornerPositionClassName = "top-0 right-0 rotate-[270deg]";
+      cornerPositionClassName = "top-0 right-0 rotate-270";
       break;
     case "bottom-right":
       iconPositionClassName = "bottom-0 right-0";
@@ -723,7 +724,7 @@ const CertificateProfileImageDisplay = ({
   avatarFingerprintColor,
   avatarFallbackVariant = "initial"
 }) => {
-  const imageClassName = "h-[50px] w-[50px] rounded-full overflow-hidden border-[2px] border-solid border-grayscale-200";
+  const imageClassName = "h-[50px] w-[50px] rounded-full overflow-hidden border-2 border-solid border-grayscale-200";
   const fingerprintClassName = isIssuer ? "h-[38px] w-[38px]" : "h-[36px] w-[36px]";
   const silhouetteClassName = "h-[38px] w-[38px]";
   const profileImage = imageComponent ? /* @__PURE__ */ React.createElement("div", { className: imageClassName }, imageComponent) : /* @__PURE__ */ React.createElement(
@@ -763,6 +764,7 @@ const CertificateFrontFace = ({
   onVerifierClick
 }) => {
   var _a, _b, _c;
+  const t = useT();
   const {
     title = "",
     createdAt,
@@ -770,7 +772,10 @@ const CertificateFrontFace = ({
     issuee: _issuee = "",
     credentialSubject,
     imageUrl
-  } = getInfoFromCredential(credential, "MMM dd, yyyy", { uppercaseDate: false });
+  } = getInfoFromCredential(credential, "MMM dd, yyyy", {
+    uppercaseDate: false,
+    dateType: "awarded"
+  });
   const issuee = issueeOverride || _issuee;
   const issuer = issuerOverride || _issuer;
   const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
@@ -841,12 +846,12 @@ const CertificateFrontFace = ({
     /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: `flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-[4px] ${borderColor} rounded-[30px]`
+        className: `flex flex-col gap-[15px] items-center px-[20px] pt-[55px] pb-[20px] border-solid border-4 ${borderColor} rounded-[30px]`
       },
       /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] items-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-grayscale-900 text-center text-[20px] font-jacques" }, title), /* @__PURE__ */ React.createElement(
         "div",
         {
-          className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]`
+          className: `${textLightColor} uppercase text-[14px] font-notoSans font-semibold`
         },
         formattedDisplayType
       )),
@@ -867,7 +872,7 @@ const CertificateFrontFace = ({
       /* @__PURE__ */ React.createElement("div", { className: "text-[14px] text-grayscale-800 flex flex-col items-center w-full" }, /* @__PURE__ */ React.createElement("span", { className: "font-jacques flex gap-[5px] items-center w-full justify-center text-center break-all" }, issueeName === "0 person" ? "Not yet awarded" : /* @__PURE__ */ React.createElement(React.Fragment, null, !hideAwardedTo && (issueeDisplay.isDidValue ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-baseline gap-1" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900 font-semibold" }, "Digital ID:"), " ", /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-600" }, issueeName))) : (
         // <>{issueeName || <Line width="60" />}</>
         /* @__PURE__ */ React.createElement(React.Fragment, null, issueeName)
-      )))), !hideIssueDate && /* @__PURE__ */ React.createElement("span", { className: "font-jacques" }, "Awarded on ", createdAt)),
+      )))), !hideIssueDate && createdAt && /* @__PURE__ */ React.createElement("span", { className: "font-jacques" }, t("credential.awardedOn", { date: createdAt }))),
       /* @__PURE__ */ React.createElement("div", { 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(
         CertDisplayCardSkillsCount,
         {
@@ -895,7 +900,7 @@ const CertificateFrontFace = ({
           avatarFingerprintColor: issuerDisplay.avatarFingerprintColor,
           avatarFallbackVariant: issuerDisplay.isDidValue ? "fingerprint" : "initial"
         }
-      ), /* @__PURE__ */ React.createElement("span", { className: "font-jacques text-[12px] text-grayscale-800" }, "Certified by"), issuerDisplay.isDidValue ? /* @__PURE__ */ React.createElement("span", { className: "mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b-[1px] border-solid border-grayscale-200 w-full text-center line-clamp-2 break-words scrollbar-hide" }, /* @__PURE__ */ React.createElement("span", { className: "font-[600]" }, issuerDisplay.isDidValue ? "Digital ID: " : ""), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-600" }, issuerName)) : /* @__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 line-clamp-2 break-words scrollbar-hide" }, issuerName), /* @__PURE__ */ React.createElement(
+      ), /* @__PURE__ */ React.createElement("span", { className: "font-jacques text-[12px] text-grayscale-800" }, "Certified by"), issuerDisplay.isDidValue ? /* @__PURE__ */ React.createElement("span", { className: "mb-[3px] pt-[3px] text-grayscale-900 text-[14px] leading-[90%] font-jacques tracking-[0.25px] border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, issuerDisplay.isDidValue ? "Digital ID: " : ""), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-600" }, issuerName)) : /* @__PURE__ */ React.createElement("span", { className: "mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b border-solid border-grayscale-200 w-full text-center line-clamp-2 wrap-break-word scrollbar-hide" }, issuerName), /* @__PURE__ */ React.createElement(
         VerifierStateBadgeAndText,
         {
           verifierState,
@@ -904,7 +909,13 @@ const CertificateFrontFace = ({
         }
       )),
       customBodyContentSlot && customBodyContentSlot,
-      /* @__PURE__ */ React.createElement("div", { className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]` }, categoryTitle)
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${textLightColor} uppercase text-[14px] font-notoSans font-semibold`
+        },
+        categoryTitle
+      )
     ),
     categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "top-left" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "top-right" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "bottom-left" }), /* @__PURE__ */ React.createElement(CertificateCornerIcon, { categoryType, position: "bottom-right" })),
     /* @__PURE__ */ React.createElement("span", { className: "hidden border-rose-500 text-spice-500 border-spice-500 border-cyan-500 text-cyan-500 border-indigo-500" }),
@@ -1024,4 +1035,4 @@ const CertificateDisplayCard = ({
 };
 
 export { AlignmentsBox as A, CertDisplayCardSkillsCount as C, CertificateBackFace as a, CertificateDisplayCard as b, CertificateFrontFace as c };
-//# sourceMappingURL=CertificateDisplayCard-fbd123d1.js.map
+//# sourceMappingURL=CertificateDisplayCard-46c13c49.js.map