@learncard/react 2.3.56 → 2.3.60

package/dist/cjs/index-63ee021e.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-63ee021e.js","sources":["../../src/types/index.ts"],"sourcesContent":["import { VerificationItem, VC, Profile, CredentialSubject } from '@learncard/types';\nimport React from 'react';\n\nexport enum Icons {\n    coinsIcon,\n    userIcon,\n    trophyIcon,\n    briefcaseIcon,\n    graduationIcon,\n    lightbulbIcon,\n    gradcaplight,\n    trophylight,\n    puzzlelight,\n}\n\nexport enum LCSubtypes {\n    job = 'job',\n    achievement = 'achievement',\n    skill = 'skill',\n    course = 'course',\n    locked = 'locked',\n}\n\nexport enum WalletCategoryTypes {\n    achievements = 'achievements',\n    ids = 'ids',\n    jobHistory = 'jobHistory',\n    currency = 'currency',\n    learningHistory = 'learningHistory',\n    skills = 'skills',\n}\n\nexport type CredentialInfo = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    credentialSubject?: CredentialSubject;\n};\n\nexport type VCDisplayCardProps = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    subjectImageComponent?: React.ReactNode;\n    issuerImageComponent?: React.ReactNode;\n    hideProfileBubbles?: boolean;\n    userImage?: string;\n    className?: string;\n    credentialSubject?: CredentialSubject;\n    onClick?: () => void;\n    loading?: boolean;\n    verification?: VerificationItem[];\n};\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport type SmallAchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    showSkills?: boolean;\n    date?: string;\n    onClick?: () => void;\n};\n\nexport type AchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    claimStatus?: boolean;\n    showSkills?: boolean;\n    skillCount?: number;\n    showChecked?: boolean;\n    checked?: boolean;\n    onCheckClick?: () => void;\n    onClick?: () => void;\n};\n\nexport type CourseCardProps = {\n    status?: string;\n    title?: string;\n    semester?: string;\n    skillCount?: string | number;\n    thumbSrc?: string;\n    jobCount?: string | number;\n    className?: string;\n    hideHeader?: boolean;\n    check?: boolean;\n    achievementCount: string | number;\n    onClick?: () => void;\n};\n\nexport type CourseCardVerticalProps = {\n    title?: string;\n    className?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    claimStatus?: boolean;\n    achievementCount?: number;\n    skillCount?: number;\n    date?: string;\n    checked?: boolean;\n    showChecked?: boolean;\n    onCheckClick?: () => void;\n    onClick?: () => void;\n};\n\nexport type SkillsCardProps = {\n    count?: number;\n    title?: string;\n    level?: string;\n    category?: string;\n    levelCount?: number;\n    skillColor?: string;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport type SkillStat = {\n    name?: string;\n    percent: number | string;\n    className?: string;\n};\n\nexport type SkillsStatsCardProps = {\n    totalCount?: string | number;\n    skills?: SkillStat[];\n    className?: string;\n    onClick?: () => void;\n};\n\nexport type SkillVerticalCardProps = {\n    title: string;\n    completed?: number;\n    total?: number;\n    thumbImg?: string;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport type RoundedPillProps = {\n    statusText?: string;\n    type?: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill | 'locked';\n    onClick?: () => void;\n    showCheckmark?: boolean;\n};\n\nexport type JobQualificationsCount = {\n    fulfilledCount: number;\n    totalRequiredCount: number;\n};\n\nexport type JobQualificationDisplay = {\n    skills?: JobQualificationsCount;\n    achievements?: JobQualificationsCount;\n    courses?: JobQualificationsCount;\n};\n\nexport type JobListCardProps = {\n    title?: string;\n    company?: string;\n    compensation?: string;\n    location?: string;\n    locationRequirement?: string;\n    timeRequirement?: string;\n    qualificationDisplay?: JobQualificationDisplay;\n    percentQualifiedDisplay?: string;\n    postDateDisplay?: string;\n    imgThumb?: string;\n    isBookmarked?: boolean;\n    className?: string;\n    onBookmark?: () => void;\n    onClick?: () => void;\n};\n\nexport type LearnPillProps = {\n    count: number | string;\n    type: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill;\n    className?: string;\n};\n\nexport type CircleCheckButtonProps = {\n    onClick?: () => void;\n    className?: string;\n    bgColor?: string;\n    checked?: boolean;\n};\n\nexport type SkillTabCardProps = {\n    title?: string;\n    description?: string;\n    checked?: boolean;\n    showChecked?: boolean;\n    className?: string;\n    onCheckClicked?: () => void;\n    onClick?: () => void;\n};\n\nexport type JobHistoryCardProps = {\n    title?: string;\n    company?: string;\n    description?: string;\n    dateRange?: string;\n    jobType?: string;\n    className?: string;\n    showArrow?: boolean;\n    onClick?: () => void;\n};\n\nexport type GenericCardProps = {\n    title?: string;\n    className?: string;\n    type?: WalletCategoryTypes;\n    thumbImgSrc?: string;\n    customThumbClass?: string;\n    customHeaderClass?: string;\n    onClick?: () => void;\n};\n"],"names":["Icons","LCSubtypes","WalletCategoryTypes"],"mappings":";;AAGY,IAAA,KAAA,qBAAAA,MAAL,KAAA;AACH,EAAAA,MAAA,CAAA,MAAA,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,GAAA,eAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,gBAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,GAAA,eAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,cAAA,CAAA,GAAA,CAAA,CAAA,GAAA,cAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA,CAAA;AATQ,EAAAA,OAAAA,MAAAA,CAAAA;AAAA,CAAA,EAAA,KAAA,IAAA,EAAA,EAAA;AAYA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACH,EAAAA,YAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,YAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,YAAA,OAAQ,CAAA,GAAA,OAAA,CAAA;AACR,EAAAA,YAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AACT,EAAAA,YAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AALD,EAAAA,OAAAA,WAAAA,CAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA,EAAA;AAQA,IAAA,mBAAA,qBAAAC,oBAAL,KAAA;AACH,EAAAA,qBAAA,cAAe,CAAA,GAAA,cAAA,CAAA;AACf,EAAAA,qBAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,qBAAA,YAAa,CAAA,GAAA,YAAA,CAAA;AACb,EAAAA,qBAAA,UAAW,CAAA,GAAA,UAAA,CAAA;AACX,EAAAA,qBAAA,iBAAkB,CAAA,GAAA,iBAAA,CAAA;AAClB,EAAAA,qBAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AAND,EAAAA,OAAAA,oBAAAA,CAAAA;AAAA,CAAA,EAAA,mBAAA,IAAA,EAAA;;;;;;"}
+{"version":3,"file":"index-63ee021e.js","sources":["../../src/types/index.ts"],"sourcesContent":["import { VerificationItem, VC, Profile, CredentialSubject } from '@learncard/types';\nimport React from 'react';\n\nexport enum Icons {\n    coinsIcon,\n    userIcon,\n    trophyIcon,\n    briefcaseIcon,\n    graduationIcon,\n    lightbulbIcon,\n    gradcaplight,\n    trophylight,\n    puzzlelight,\n}\n\nexport enum LCSubtypes {\n    job = 'job',\n    achievement = 'achievement',\n    skill = 'skill',\n    course = 'course',\n    locked = 'locked',\n}\n\nexport enum WalletCategoryTypes {\n    achievements = 'achievements',\n    ids = 'ids',\n    jobHistory = 'jobHistory',\n    currency = 'currency',\n    learningHistory = 'learningHistory',\n    skills = 'skills',\n}\n\nexport type CredentialInfo = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    credentialSubject?: CredentialSubject;\n};\n\nexport type VCDisplayCardProps = {\n    title?: string;\n    createdAt?: string;\n    issuer?: Profile;\n    issuee?: Profile;\n    subjectImageComponent?: React.ReactNode;\n    issuerImageComponent?: React.ReactNode;\n    hideProfileBubbles?: boolean;\n    userImage?: string;\n    className?: string;\n    credentialSubject?: CredentialSubject;\n    onClick?: () => void;\n    loading?: boolean;\n    verification?: VerificationItem[];\n    handleClick?: () => void;\n    overrideDetailsComponent?: React.ReactNode;\n    overrideCardTitle?: string;\n    overrideCardImageComponent?: React.ReactNode;\n    customHeaderComponent?: React.ReactNode;\n};\n\nexport type RoundedSquareProps = {\n    title?: string;\n    description?: string;\n    iconSrc?: string;\n    count?: string | number;\n    onClick?: () => void;\n    bgColor?: string;\n};\n\nexport type SmallAchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    showSkills?: boolean;\n    date?: string;\n    onClick?: () => void;\n};\n\nexport type AchievementCardProps = {\n    title?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    claimStatus?: boolean;\n    showSkills?: boolean;\n    skillCount?: number;\n    showChecked?: boolean;\n    checked?: boolean;\n    onCheckClick?: () => void;\n    onClick?: () => void;\n};\n\nexport type CourseCardProps = {\n    status?: string;\n    title?: string;\n    semester?: string;\n    skillCount?: string | number;\n    thumbSrc?: string;\n    jobCount?: string | number;\n    className?: string;\n    hideHeader?: boolean;\n    check?: boolean;\n    achievementCount: string | number;\n    onClick?: () => void;\n};\n\nexport type CourseCardVerticalProps = {\n    title?: string;\n    className?: string;\n    thumbImgSrc?: string;\n    showStatus?: boolean;\n    claimStatus?: boolean;\n    achievementCount?: number;\n    skillCount?: number;\n    date?: string;\n    checked?: boolean;\n    showChecked?: boolean;\n    showSubCount?: boolean;\n    onCheckClick?: () => void;\n    onClick?: () => void;\n};\n\nexport type SkillsCardProps = {\n    count?: number;\n    title?: string;\n    level?: string;\n    category?: string;\n    levelCount?: number;\n    skillColor?: string;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport type SkillStat = {\n    name?: string;\n    percent: number | string;\n    className?: string;\n};\n\nexport type SkillsStatsCardProps = {\n    totalCount?: string | number;\n    skills?: SkillStat[];\n    className?: string;\n    onClick?: () => void;\n};\n\nexport type SkillVerticalCardProps = {\n    title: string;\n    completed?: number;\n    total?: number;\n    thumbImg?: string;\n    onClick?: () => void;\n    className?: string;\n};\n\nexport type RoundedPillProps = {\n    statusText?: string;\n    type?: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill | 'locked';\n    onClick?: () => void;\n    showCheckmark?: boolean;\n};\n\nexport type JobQualificationsCount = {\n    fulfilledCount: number;\n    totalRequiredCount: number;\n};\n\nexport type JobQualificationDisplay = {\n    skills?: JobQualificationsCount;\n    achievements?: JobQualificationsCount;\n    courses?: JobQualificationsCount;\n};\n\nexport type JobListCardProps = {\n    title?: string;\n    company?: string;\n    compensation?: string;\n    location?: string;\n    locationRequirement?: string;\n    timeRequirement?: string;\n    qualificationDisplay?: JobQualificationDisplay;\n    percentQualifiedDisplay?: string;\n    postDateDisplay?: string;\n    imgThumb?: string;\n    isBookmarked?: boolean;\n    className?: string;\n    onBookmark?: () => void;\n    onClick?: () => void;\n};\n\nexport type LearnPillProps = {\n    count: number | string;\n    type: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill;\n    className?: string;\n};\n\nexport type CircleCheckButtonProps = {\n    onClick?: () => void;\n    className?: string;\n    bgColor?: string;\n    checked?: boolean;\n};\n\nexport type SkillTabCardProps = {\n    title?: string;\n    description?: string;\n    checked?: boolean;\n    showChecked?: boolean;\n    showStatus?: boolean;\n    className?: string;\n    onCheckClicked?: () => void;\n    onClick?: () => void;\n};\n\nexport type JobHistoryCardProps = {\n    title?: string;\n    company?: string;\n    description?: string;\n    dateRange?: string;\n    jobType?: string;\n    className?: string;\n    showArrow?: boolean;\n    onClick?: () => void;\n};\n\nexport type GenericCardProps = {\n    title?: string;\n    className?: string;\n    type?: WalletCategoryTypes;\n    thumbImgSrc?: string;\n    customThumbClass?: string;\n    customHeaderClass?: string;\n    showChecked?: boolean;\n    checkStatus?: boolean;\n    onClick?: () => void;\n    flipped?: boolean;\n};\n"],"names":["Icons","LCSubtypes","WalletCategoryTypes"],"mappings":";;AAGY,IAAA,KAAA,qBAAAA,MAAL,KAAA;AACH,EAAAA,MAAA,CAAA,MAAA,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,GAAA,eAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,gBAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,eAAA,CAAA,GAAA,CAAA,CAAA,GAAA,eAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,cAAA,CAAA,GAAA,CAAA,CAAA,GAAA,cAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA,CAAA;AACA,EAAAA,MAAA,CAAA,MAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA,CAAA;AATQ,EAAAA,OAAAA,MAAAA,CAAAA;AAAA,CAAA,EAAA,KAAA,IAAA,EAAA,EAAA;AAYA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACH,EAAAA,YAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,YAAA,aAAc,CAAA,GAAA,aAAA,CAAA;AACd,EAAAA,YAAA,OAAQ,CAAA,GAAA,OAAA,CAAA;AACR,EAAAA,YAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AACT,EAAAA,YAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AALD,EAAAA,OAAAA,WAAAA,CAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA,EAAA;AAQA,IAAA,mBAAA,qBAAAC,oBAAL,KAAA;AACH,EAAAA,qBAAA,cAAe,CAAA,GAAA,cAAA,CAAA;AACf,EAAAA,qBAAA,KAAM,CAAA,GAAA,KAAA,CAAA;AACN,EAAAA,qBAAA,YAAa,CAAA,GAAA,YAAA,CAAA;AACb,EAAAA,qBAAA,UAAW,CAAA,GAAA,UAAA,CAAA;AACX,EAAAA,qBAAA,iBAAkB,CAAA,GAAA,iBAAA,CAAA;AAClB,EAAAA,qBAAA,QAAS,CAAA,GAAA,QAAA,CAAA;AAND,EAAAA,OAAAA,oBAAAA,CAAAA;AAAA,CAAA,EAAA,mBAAA,IAAA,EAAA;;;;;;"}

package/dist/cjs/index.js

@@ -7,9 +7,9 @@ var Button = require('./Button-a7af702b.js');
 var CircleCheckButton = require('./CircleCheckButton-97c4f608.js');
 var CircleIcon = require('./CircleIcon-41b3fa88.js');
 var CourseCard = require('./CourseCard-338a32ee.js');
-var CourseVerticalCard = require('./CourseVerticalCard-ba8fc2f7.js');
-var FlippyCard = require('./FlippyCard-33e03a9e.js');
-var GenericCard = require('./GenericCard-c5b70b29.js');
+var CourseVerticalCard = require('./CourseVerticalCard-ef3e7ea6.js');
+var FlippyCard = require('./FlippyCard-2cbe2dbe.js');
+var GenericCard = require('./GenericCard-39248302.js');
 var JobHistoryCard = require('./JobHistoryCard-05a3f98b.js');
 var JobListCard = require('./JobListCard-e2b3c042.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
@@ -22,14 +22,14 @@ var QRCodeCard = require('./QRCodeCard-efaa58e1.js');
 var RoundedPill = require('./RoundedPill-15c0aca9.js');
 var constants = require('./constants-678d0aa9.js');
 var SchoolIDCard = require('./SchoolIDCard-1baf77e8.js');
-var SkillTabCard = require('./SkillTabCard-82f2fae0.js');
+var SkillTabCard = require('./SkillTabCard-2f6e8b78.js');
 var SkillVerticalCard = require('./SkillVerticalCard-3eb3a8e9.js');
 var SkillsCard = require('./SkillsCard-4b6dbb4f.js');
 var SkillsStatsCard = require('./SkillsStatsCard-97a35a88.js');
 var SmallAchievementCard = require('./SmallAchievementCard-c76701ce.js');
-var VCCard = require('./VCCard-5f411418.js');
-var VCDisplayBackFace = require('./VCDisplayBackFace-0ffe0e45.js');
-var VCDisplayCard = require('./VCDisplayCard-dfb9701f.js');
+var VCCard = require('./VCCard-69176b38.js');
+var VCDisplayBackFace = require('./VCDisplayBackFace-30fcbf18.js');
+var VCDisplayCard = require('./VCDisplayCard-1f6d7964.js');
 var VCThumbnail = require('./VCThumbnail-6bf86bb2.js');
 var VCVerificationCheck = require('./VCVerificationCheck-0e495524.js');
 var VCVerificationPill = require('./VCVerificationPill-202e3a97.js');

package/dist/cjs/index10.js

@@ -7,9 +7,9 @@ var Button = require('./Button-a7af702b.js');
 var CircleCheckButton = require('./CircleCheckButton-97c4f608.js');
 var CircleIcon = require('./CircleIcon-41b3fa88.js');
 var CourseCard = require('./CourseCard-338a32ee.js');
-var CourseVerticalCard = require('./CourseVerticalCard-ba8fc2f7.js');
-var FlippyCard = require('./FlippyCard-33e03a9e.js');
-var GenericCard = require('./GenericCard-c5b70b29.js');
+var CourseVerticalCard = require('./CourseVerticalCard-ef3e7ea6.js');
+var FlippyCard = require('./FlippyCard-2cbe2dbe.js');
+var GenericCard = require('./GenericCard-39248302.js');
 var JobHistoryCard = require('./JobHistoryCard-05a3f98b.js');
 var JobListCard = require('./JobListCard-e2b3c042.js');
 var LearnCardCreditCardBackFace = require('./LearnCardCreditCardBackFace-87cc8b9f.js');
@@ -22,14 +22,14 @@ var QRCodeCard = require('./QRCodeCard-efaa58e1.js');
 var RoundedPill = require('./RoundedPill-15c0aca9.js');
 var constants = require('./constants-678d0aa9.js');
 var SchoolIDCard = require('./SchoolIDCard-1baf77e8.js');
-var SkillTabCard = require('./SkillTabCard-82f2fae0.js');
+var SkillTabCard = require('./SkillTabCard-2f6e8b78.js');
 var SkillVerticalCard = require('./SkillVerticalCard-3eb3a8e9.js');
 var SkillsCard = require('./SkillsCard-4b6dbb4f.js');
 var SkillsStatsCard = require('./SkillsStatsCard-97a35a88.js');
 var SmallAchievementCard = require('./SmallAchievementCard-c76701ce.js');
-var VCCard = require('./VCCard-5f411418.js');
-var VCDisplayBackFace = require('./VCDisplayBackFace-0ffe0e45.js');
-var VCDisplayCard = require('./VCDisplayCard-dfb9701f.js');
+var VCCard = require('./VCCard-69176b38.js');
+var VCDisplayBackFace = require('./VCDisplayBackFace-30fcbf18.js');
+var VCDisplayCard = require('./VCDisplayCard-1f6d7964.js');
 var VCThumbnail = require('./VCThumbnail-6bf86bb2.js');
 var VCVerificationCheck = require('./VCVerificationCheck-0e495524.js');
 var VCVerificationPill = require('./VCVerificationPill-202e3a97.js');

package/dist/cjs/index25.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var SkillTabCard = require('./SkillTabCard-82f2fae0.js');
+var SkillTabCard = require('./SkillTabCard-2f6e8b78.js');
 require('react');
 require('./index-63ee021e.js');
 require('./CircleCheckButton-97c4f608.js');

package/dist/cjs/index29.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VCCard = require('./VCCard-5f411418.js');
+var VCCard = require('./VCCard-69176b38.js');
 require('react');
 require('@learncard/core');
-require('./VCDisplayCard-dfb9701f.js');
-require('./FlippyCard-33e03a9e.js');
+require('./VCDisplayCard-1f6d7964.js');
+require('./FlippyCard-2cbe2dbe.js');
 require('./icon.green.fat-arrow.png');
-require('./ArrowArcRight.svg');
 require('./default-face.jpeg');
 require('./VCVerificationCheck-0e495524.js');
 require('./vc.check.svg');
 require('./CircleSpinner-093cce04.js');
-require('./VCDisplayBackFace-0ffe0e45.js');
+require('./VCDisplayBackFace-30fcbf18.js');
 require('./VCVerificationPill-202e3a97.js');
 require('./RedXCircle.svg');
 require('./GreenCheckCircle.svg');
 require('./YellowWarningCircle.svg');
+require('./ArrowArcRight.svg');
 
 
 

package/dist/cjs/index30.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VCDisplayBackFace = require('./VCDisplayBackFace-0ffe0e45.js');
+var VCDisplayBackFace = require('./VCDisplayBackFace-30fcbf18.js');
 require('react');
 require('./VCVerificationCheck-0e495524.js');
 require('./vc.check.svg');

package/dist/cjs/index31.js

@@ -2,20 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VCDisplayCard = require('./VCDisplayCard-dfb9701f.js');
+var VCDisplayCard = require('./VCDisplayCard-1f6d7964.js');
 require('react');
-require('./FlippyCard-33e03a9e.js');
+require('./FlippyCard-2cbe2dbe.js');
 require('./icon.green.fat-arrow.png');
-require('./ArrowArcRight.svg');
 require('./default-face.jpeg');
 require('./VCVerificationCheck-0e495524.js');
 require('./vc.check.svg');
 require('./CircleSpinner-093cce04.js');
-require('./VCDisplayBackFace-0ffe0e45.js');
+require('./VCDisplayBackFace-30fcbf18.js');
 require('./VCVerificationPill-202e3a97.js');
 require('./RedXCircle.svg');
 require('./GreenCheckCircle.svg');
 require('./YellowWarningCircle.svg');
+require('./ArrowArcRight.svg');
 
 
 

package/dist/cjs/index32.js

@@ -2,7 +2,6 @@
 
 require('react');
 require('./icon.green.fat-arrow.png');
-require('./ArrowArcRight.svg');
 require('./default-face.jpeg');
 require('./vc.check.svg');
 

package/dist/cjs/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index32.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/cjs/index7.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var CourseVerticalCard = require('./CourseVerticalCard-ba8fc2f7.js');
+var CourseVerticalCard = require('./CourseVerticalCard-ef3e7ea6.js');
 require('react');
 require('./lhplaceholder.png');
 require('./minitrophy.svg');

package/dist/cjs/index8.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var FlippyCard = require('./FlippyCard-33e03a9e.js');
+var FlippyCard = require('./FlippyCard-2cbe2dbe.js');
 require('react');
 
 

package/dist/cjs/index9.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var GenericCard = require('./GenericCard-c5b70b29.js');
+var GenericCard = require('./GenericCard-39248302.js');
 require('react');
 require('./index-63ee021e.js');
 require('./index-6cab6d37.js');
@@ -15,6 +15,18 @@ require('./walletTrophy.webp');
 require('./minitrophycolored.svg');
 require('./minigradcapcolored.svg');
 require('./minipuzzlecolored.svg');
+require('./CircleCheckButton-97c4f608.js');
+require('./RoundedPill-15c0aca9.js');
+require('./icons-cf98ef88.js');
+require('./coins.svg');
+require('./user.svg');
+require('./trophy.svg');
+require('./briefcase.svg');
+require('./graduation.svg');
+require('./lightbulb.svg');
+require('./minipuzzle.svg');
+require('./minitrophy.svg');
+require('./gradcaplight.svg');
 
 
 

package/dist/cjs/index9.js.map

@@ -1 +1 @@
-{"version":3,"file":"index9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index9.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/{CourseVerticalCard-643f767b.js → CourseVerticalCard-c91c7a7a.js}

@@ -43,6 +43,7 @@ const CourseVerticalCard = ({
   skillCount = 0,
   checked,
   showChecked,
+  showSubCount,
   onCheckClick,
   onClick
 }) => {
@@ -63,7 +64,7 @@ const CourseVerticalCard = ({
     className: "course-card-detail-info flex flex-col justify-between"
   }, /* @__PURE__ */ React.createElement("p", {
     className: "course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]"
-  }, title), /* @__PURE__ */ React.createElement("div", {
+  }, title), showSubCount && /* @__PURE__ */ React.createElement("div", {
     className: "course-card-counts-container flex items-center justify-center my-[5px]"
   }, /* @__PURE__ */ React.createElement(CourseCardStatBubble, {
     type: "achievement",
@@ -84,4 +85,4 @@ const CourseVerticalCard = ({
 };
 
 export { CourseVerticalCard as C };
-//# sourceMappingURL=CourseVerticalCard-643f767b.js.map
+//# sourceMappingURL=CourseVerticalCard-c91c7a7a.js.map

package/dist/esm/CourseVerticalCard-c91c7a7a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CourseVerticalCard-c91c7a7a.js","sources":["../../src/components/CourseVerticalCard/CourseVerticalCard.tsx"],"sourcesContent":["import React from 'react';\nimport { CourseCardVerticalProps } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';\nimport { RoundedPill } from '../RoundedPill';\nimport MiniTrophyIcon from '../../assets/images/minitrophy.svg';\nimport MiniJobIcon from '../../assets/images/minijob.svg';\nimport MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';\nimport { LCSubtypes } from '../../types';\n\nconst TYPE_TO_COURSE_MINI_ICON: any = {\n    ['job']: MiniJobIcon,\n    ['achievement']: MiniTrophyIcon,\n    ['skill']: MiniPuzzleIcon,\n};\n\nconst TYPE_TO_COLOR: any = {\n    ['job']: 'bg-emerald-700',\n    ['achievement']: 'bg-spice-500',\n    ['skill']: 'bg-indigo-500',\n};\n\ntype CourseCardStatBubbleProps = {\n    count: number | string;\n    type: string;\n    className?: string;\n};\n\nconst CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({\n    count = 0,\n    type = LCSubtypes.job,\n    className,\n}) => {\n    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];\n    const bgColor = TYPE_TO_COLOR[type];\n\n    return (\n        <div\n            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}\n        >\n            <img src={imgSrc} className=\"pr-[5px]\" />\n            <span className=\"flex items-center text-sm text-white\">{count}</span>\n        </div>\n    );\n};\n\nexport const CourseVerticalCard: React.FC<CourseCardVerticalProps> = ({\n    className,\n    title,\n    thumbImgSrc,\n    showStatus,\n    claimStatus = false,\n    achievementCount = 0,\n    skillCount = 0,\n    checked,\n    showChecked,\n    showSubCount,\n    onCheckClick,\n    onClick,\n}) => {\n    const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[265px] rounded-[20px] ${className}`}\n        >\n            <section\n                className={`relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`}\n            >\n                <img\n                    src={CourseCardPlaceholder}\n                    className=\"course-card-img h-full w-full object-cover rounded-[20px]\"\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            <div className=\"course-card-detail-info flex flex-col justify-between\">\n                <p className=\"course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]\">\n                    {title}\n                </p>\n                {showSubCount && (\n                    <div className=\"course-card-counts-container flex items-center justify-center my-[5px]\">\n                        <CourseCardStatBubble\n                            type={'achievement'}\n                            count={achievementCount}\n                            className={'mr-[5px]'}\n                        />\n                        <CourseCardStatBubble\n                            type={'skill'}\n                            count={skillCount}\n                            className={'mr-[0px]'}\n                        />\n                    </div>\n                )}\n            </div>\n            {showStatus && (\n                <div className=\"course-card-footer absolute bottom-[6px] left-[5px]\">\n                    <RoundedPill\n                        onClick={onClick}\n                        showCheckmark\n                        type={claimBtnStatusType}\n                        statusText={'Passed'}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default CourseVerticalCard;\n"],"names":["MiniTrophyIcon","MiniPuzzleIcon"],"mappings":"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"}

package/dist/esm/{FlippyCard-682649d7.js → FlippyCard-f4f0b3f8.js}

@@ -1,9 +1,6 @@
-import React, { useState } from 'react';
+import React from 'react';
 
-const FRONT_FACE = "front";
-const BACK_FACE = "back";
-const FlippyCard = ({ children }) => {
-  const [flipState, setFlipState] = useState(FRONT_FACE);
+const FlippyCard = ({ children, flipState }) => {
   if ((children == null ? void 0 : children.length) > 3) {
     console.warn("More than two children passed into Flippy Card! \u{1F633}\u{1F633}\u{1F633} Picking first two...");
   }
@@ -11,20 +8,13 @@ const FlippyCard = ({ children }) => {
     return /* @__PURE__ */ React.createElement(React.Fragment, null);
   const frontCard = children == null ? void 0 : children[0];
   const backCard = (children == null ? void 0 : children[1]) || (children == null ? void 0 : children[0]);
-  const handleClick = () => {
-    if (flipState === FRONT_FACE)
-      setFlipState(BACK_FACE);
-    if (flipState === BACK_FACE)
-      setFlipState(FRONT_FACE);
-  };
-  const flipCardCSSClass = flipState === FRONT_FACE ? "flippy-card" : "flippy-card is-flipped";
+  const flipCardCSSClass = flipState === "front" ? "flippy-card" : "flippy-card is-flipped";
   return /* @__PURE__ */ React.createElement("div", {
     "data-testid": "flippy-card-wrapper",
     className: "flippy-wrapper-container"
   }, /* @__PURE__ */ React.createElement("div", {
     "data-testid": "flippy-card",
-    className: flipCardCSSClass,
-    onClick: handleClick
+    className: flipCardCSSClass
   }, /* @__PURE__ */ React.createElement("section", {
     "data-testid": "flippy-card-front",
     className: "card-face card-face--front"
@@ -35,4 +25,4 @@ const FlippyCard = ({ children }) => {
 };
 
 export { FlippyCard as F };
-//# sourceMappingURL=FlippyCard-682649d7.js.map
+//# sourceMappingURL=FlippyCard-f4f0b3f8.js.map

package/dist/esm/FlippyCard-f4f0b3f8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippyCard-f4f0b3f8.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | undefined | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":[],"mappings":";;AAOO,MAAM,UAAwC,GAAA,CAAC,EAAE,QAAA,EAAU,WAAgB,KAAA;AAC9E,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAA,IAAI,CAAC,QAAA;AAAU,IAAA,uBAAS,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,qBAAA;AAAA,IAAsB,SAAU,EAAA,0BAAA;AAAA,GAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,aAAA;AAAA,IAAc,SAAW,EAAA,gBAAA;AAAA,GAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,mBAAA;AAAA,IAAoB,SAAU,EAAA,4BAAA;AAAA,GAC9C,EAAA,SACL,mBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,kBAAA;AAAA,IAAmB,SAAU,EAAA,2BAAA;AAAA,GAC7C,EAAA,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{GenericCard-ada539c7.js → GenericCard-2aaadb4b.js}

@@ -1,6 +1,7 @@
 import React from 'react';
 import { W as WalletCategoryTypes } from './index-15b828c0.js';
 import { a as TYPE_TO_IMG_SRC, b as TYPE_TO_WALLET_DARK_COLOR } from './index-2ef79548.js';
+import { C as CircleCheckButton } from './CircleCheckButton-a55dfd2a.js';
 
 const GenericCard = ({
   title = "Title Lorem Ipsum",
@@ -10,17 +11,22 @@ const GenericCard = ({
   type = WalletCategoryTypes.achievements,
   className,
   onClick = () => {
-  }
+  },
+  showChecked,
+  checkStatus,
+  flipped
 }) => {
   var _a, _b;
   const thumbClass = (_a = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
   const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;
   const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
   const headerBgColor = (_b = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _b : "bg-grayscale-900";
+  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
   const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;
+  const flippedClass = flipped ? "flex-col-reverse" : "flex-col";
   return /* @__PURE__ */ React.createElement("button", {
     onClick,
-    className: `flex generic-display-card-simple bg-white flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
+    className: `flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`
   }, /* @__PURE__ */ React.createElement("section", {
     className: defaultHeaderClass
   }, /* @__PURE__ */ React.createElement("p", {
@@ -36,8 +42,14 @@ const GenericCard = ({
     src: imgSrc
   })), /* @__PURE__ */ React.createElement("section", {
     className: "generic-card-footer"
-  }));
+  }), showChecked && /* @__PURE__ */ React.createElement("div", {
+    className: "check-btn-overlay absolute top-[5px] left-[5px]"
+  }, /* @__PURE__ */ React.createElement(CircleCheckButton, {
+    checked: checkStatus,
+    onClick,
+    className: checkBtnClass
+  })));
 };
 
 export { GenericCard as G };
-//# sourceMappingURL=GenericCard-ada539c7.js.map
+//# sourceMappingURL=GenericCard-2aaadb4b.js.map

package/dist/esm/GenericCard-2aaadb4b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericCard-2aaadb4b.js","sources":["../../src/components/GenericCard/GenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { GenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const GenericCard: React.FC<GenericCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onClick = () => {},\n    showChecked,\n    checkStatus,\n    flipped,\n}) => {\n    const thumbClass = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-50';\n    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${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 flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;\n    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';\n\n    return (\n        <button\n            onClick={onClick}\n            className={`flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            <section className={defaultHeaderClass}>\n                <p className=\"relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2\">\n                    {title}\n                </p>\n            </section>\n            <section className={defaultThumbClass}>\n                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                    <img\n                        className=\"generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                    <img\n                        className=\"max-w-[130px] w-full h-full p-[10px] object-contain\"\n                        src={imgSrc}\n                    />\n                )}\n            </section>\n\n            <section className=\"generic-card-footer\"></section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </button>\n    );\n};\n\nexport default GenericCard;\n"],"names":[],"mappings":"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"}

package/dist/esm/{SkillTabCard-ade7a48c.js → SkillTabCard-82b97c62.js}

@@ -10,24 +10,27 @@ const SkillTabCard = ({
   showChecked,
   onClick,
   onCheckClicked,
+  showStatus = true,
   className = "skill-tab-card"
 }) => {
+  const buttonClass = checked ? "skill-tab-check-toggle checked" : "skill-tab-check-toggle unchecked";
   return /* @__PURE__ */ React.createElement("div", {
     className: `flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`
   }, showChecked && /* @__PURE__ */ React.createElement(CircleCheckButton, {
     onClick: onCheckClicked,
     checked,
+    className: buttonClass,
     bgColor: "bg-grayscale-200"
   }), /* @__PURE__ */ React.createElement("h4", {
     className: "text-indigo-600 text-[14px] text-center line-clamp-2"
   }, title), /* @__PURE__ */ React.createElement("p", {
     className: "line-clamp-2 text-[12px] text-center"
-  }, description), /* @__PURE__ */ React.createElement(RoundedPill, {
+  }, description), /* @__PURE__ */ React.createElement("div", null, showStatus && /* @__PURE__ */ React.createElement(RoundedPill, {
     type: LCSubtypes.skill,
     statusText: "Earned",
     onClick
-  }));
+  })));
 };
 
 export { SkillTabCard as S };
-//# sourceMappingURL=SkillTabCard-ade7a48c.js.map
+//# sourceMappingURL=SkillTabCard-82b97c62.js.map

package/dist/esm/SkillTabCard-82b97c62.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkillTabCard-82b97c62.js","sources":["../../src/components/SkillTabCard/SkillTabCard.tsx"],"sourcesContent":["import React from 'react';\nimport { RoundedPill } from '../RoundedPill';\nimport { LCSubtypes } from '../../types';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport { SkillTabCardProps } from '../../types';\n\nexport const SkillTabCard: React.FC<SkillTabCardProps> = ({\n    title,\n    description,\n    checked = false,\n    showChecked,\n    onClick,\n    onCheckClicked,\n    showStatus = true,\n    className = 'skill-tab-card',\n}) => {\n    const buttonClass = checked\n        ? 'skill-tab-check-toggle checked'\n        : 'skill-tab-check-toggle unchecked';\n    return (\n        <div\n            className={`flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`}\n        >\n            {showChecked && (\n                <CircleCheckButton\n                    onClick={onCheckClicked}\n                    checked={checked}\n                    className={buttonClass}\n                    bgColor=\"bg-grayscale-200\"\n                />\n            )}\n            <h4 className=\"text-indigo-600 text-[14px] text-center line-clamp-2\">{title}</h4>\n            <p className=\"line-clamp-2 text-[12px] text-center\">{description}</p>\n\n            <div>\n                {showStatus && (\n                    <RoundedPill type={LCSubtypes.skill} statusText={'Earned'} onClick={onClick} />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default SkillTabCard;\n"],"names":[],"mappings":";;;;;AAMO,MAAM,eAA4C,CAAC;AAAA,EACtD,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAU,GAAA,KAAA;AAAA,EACV,WAAA;AAAA,EACA,OAAA;AAAA,EACA,cAAA;AAAA,EACA,UAAa,GAAA,IAAA;AAAA,EACb,SAAY,GAAA,gBAAA;AAChB,CAAM,KAAA;AACF,EAAM,MAAA,WAAA,GAAc,UACd,gCACA,GAAA,kCAAA,CAAA;AACN,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAA6J,0JAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,EAEvK,+BACI,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,IACG,OAAS,EAAA,cAAA;AAAA,IACT,OAAA;AAAA,IACA,SAAW,EAAA,WAAA;AAAA,IACX,OAAQ,EAAA,kBAAA;AAAA,GACZ,mBAEH,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAG,SAAU,EAAA,sDAAA;AAAA,GAAwD,EAAA,KAAM,mBAC3E,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,sCAAA;AAAA,GAAA,EAAwC,WAAY,CAAA,kBAEhE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACI,8BACI,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IAAY,MAAM,UAAW,CAAA,KAAA;AAAA,IAAO,UAAY,EAAA,QAAA;AAAA,IAAU,OAAA;AAAA,GAAkB,CAErF,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{VCCard-fff987be.js → VCCard-3a8f5414.js}

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { initLearnCard } from '@learncard/core';
-import { V as VCDisplayCard } from './VCDisplayCard-b9c4a087.js';
+import { V as VCDisplayCard } from './VCDisplayCard-bce0b106.js';
 
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -44,4 +44,4 @@ const VCCard = ({ credential, issueeOverride, className = "" }) => {
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-fff987be.js.map
+//# sourceMappingURL=VCCard-3a8f5414.js.map

package/dist/esm/{VCCard-fff987be.js.map → VCCard-3a8f5414.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-fff987be.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/core';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({ credential, issueeOverride, className = '' }) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    return (\n        <VCDisplayCard\n            credential={credential}\n            issueeOverride={issueeOverride}\n            className={className}\n            loading={loading}\n            verification={vcVerification}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,SAAgC,CAAC,EAAE,YAAY,cAAgB,EAAA,SAAA,GAAY,IAAS,KAAA;AAC7F,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,KAAA,CAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAc,EAAA,cAAA;AAAA,GAClB,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"VCCard-3a8f5414.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/core';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({ credential, issueeOverride, className = '' }) => {\n    const [loading, setLoading] = useState(true);\n    const [vcVerification, setVCVerification] = useState<VerificationItem[]>([]);\n\n    useEffect(() => {\n        const verify = async () => {\n            const wallet = await initLearnCard();\n            const verification = await wallet.invoke.verifyCredential(credential, {}, true);\n            setVCVerification(verification);\n            setLoading(false);\n        };\n\n        verify();\n    }, [credential]);\n\n    return (\n        <VCDisplayCard\n            credential={credential}\n            issueeOverride={issueeOverride}\n            className={className}\n            loading={loading}\n            verification={vcVerification}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,SAAgC,CAAC,EAAE,YAAY,cAAgB,EAAA,SAAA,GAAY,IAAS,KAAA;AAC7F,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,cAAgB,EAAA,iBAAiB,CAAI,GAAA,QAAA,CAA6B,EAAE,CAAA,CAAA;AAE3E,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,MAAM,SAAS,MAAY,OAAA,CAAA,KAAA,CAAA,EAAA,IAAA,EAAA,aAAA;AACvB,MAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA,CAAA;AACnC,MAAM,MAAA,YAAA,GAAe,MAAM,MAAO,CAAA,MAAA,CAAO,iBAAiB,UAAY,EAAA,IAAI,IAAI,CAAA,CAAA;AAC9E,MAAA,iBAAA,CAAkB,YAAY,CAAA,CAAA;AAC9B,MAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,KACpB,CAAA,CAAA;AAEA,IAAO,MAAA,EAAA,CAAA;AAAA,GACX,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAc,EAAA,cAAA;AAAA,GAClB,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{VCDisplayBackFace-84d93238.js → VCDisplayBackFace-b3aff90b.js}

@@ -27,27 +27,16 @@ const VCDisplayBackFace = ({
   credentialSubject,
   className = "",
   loading,
-  verification = []
+  verification = [],
+  handleClick,
+  overrideDetailsComponent
 }) => {
   var _a, _b, _c, _d;
   const descriptionText = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.description;
   const criteriaText = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
   const issuerUrl = typeof issuer === "object" ? issuer.url : "";
   const issuerName = getNameFromProfile(issuer != null ? issuer : "");
-  return /* @__PURE__ */ React.createElement("div", {
-    className: `flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"
-  }), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-col items-center justify-center z-10 text-left credential-details-container max-w-[100%] relative"
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-row items-start justify-start w-full line-clamp-2"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
-    "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
-  }, "Credential Details")), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info"
-  }, /* @__PURE__ */ React.createElement("div", {
+  const defaultDetails = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     className: "width-full"
   }, /* @__PURE__ */ React.createElement("h6", {
     className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased"
@@ -67,10 +56,26 @@ const VCDisplayBackFace = ({
     className: "max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all"
   }, issuerName)), issuerUrl && /* @__PURE__ */ React.createElement("p", {
     className: "text-indigo-500 font-bold text-xs width-full text-center mt-8"
-  }, issuerUrl)), /* @__PURE__ */ React.createElement("div", {
+  }, issuerUrl));
+  const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"
+  }), /* @__PURE__ */ React.createElement("section", {
+    className: "flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "flex flex-row items-start justify-start w-full line-clamp-2"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
+    "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
+  }, "Credential Details")), /* @__PURE__ */ React.createElement("section", {
+    className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info"
+  }, renderDetails), /* @__PURE__ */ React.createElement("div", {
     className: "w-full mt-2"
   }), /* @__PURE__ */ React.createElement("button", {
-    className: "bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
+    onClick: handleClick,
+    className: "vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full"
   }, /* @__PURE__ */ React.createElement("span", {
     className: "flex justify-center"
   }, /* @__PURE__ */ React.createElement("img", {
@@ -90,4 +95,4 @@ const VCDisplayBackFace = ({
 };
 
 export { VCDisplayBackFace as V, getImageFromProfile as a, getNameFromProfile as g };
-//# sourceMappingURL=VCDisplayBackFace-84d93238.js.map
+//# sourceMappingURL=VCDisplayBackFace-b3aff90b.js.map

package/dist/esm/VCDisplayBackFace-b3aff90b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCDisplayBackFace-b3aff90b.js","sources":["../../src/helpers/credential.helpers.ts","../../src/components/VCDisplayBackFace/VCDisplayBackFace.tsx"],"sourcesContent":["import { Image, Profile } from '@learncard/types';\n\nexport const getImageFromImage = (image: Image): string => {\n    if (typeof image === 'string') return image;\n\n    return image.id ?? '';\n};\n\nexport const getNameFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return profile;\n\n    return profile.name ?? '';\n};\n\nexport const getImageFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return '';\n\n    return getImageFromImage(profile.image ?? '');\n};\n","import React from 'react';\nimport { VCDisplayCardProps } from '../../types';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport VCVerificationPill from '../VCVerificationPill/VCVerificationPill';\nimport FlipArrowRight from '../../assets/images/ArrowArcRight.svg';\nimport { getNameFromProfile } from '../../helpers/credential.helpers';\n\nexport const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({\n    issuer,\n    credentialSubject,\n    className = '',\n    loading,\n    verification = [],\n    handleClick,\n    overrideDetailsComponent,\n}) => {\n    const descriptionText = credentialSubject?.achievement?.description;\n    const criteriaText = credentialSubject?.achievement?.criteria?.narrative;\n    const issuerUrl = typeof issuer === 'object' ? issuer.url : '';\n    const issuerName = getNameFromProfile(issuer ?? '');\n    const defaultDetails = (\n        <>\n            <div className=\"width-full\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                    Description\n                </h6>\n                <p className=\"line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp\">\n                    {descriptionText}\n                </p>\n            </div>\n\n            <div className=\"width-full mt-[10px]\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased\">\n                    Criteria\n                </h6>\n                <p className=\"line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp\">\n                    {criteriaText}\n                </p>\n            </div>\n\n            <div className=\"width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info\">\n                <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                    Issuer\n                </h6>\n                <p className=\"max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all\">\n                    {issuerName}\n                </p>\n            </div>\n\n            {issuerUrl && (\n                <p className=\"text-indigo-500 font-bold text-xs width-full text-center mt-8\">\n                    {issuerUrl}\n                </p>\n            )}\n        </>\n    );\n\n    const renderDetails = overrideDetailsComponent ? overrideDetailsComponent : defaultDetails;\n\n    return (\n        <div\n            className={`z-[9] vc-display-main-card-back flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}\n        >\n            <section className=\"flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]\"></section>\n            <section className=\"flex flex-col items-center justify-center w-full z-10 text-left credential-details-container max-w-[100%] relative\">\n                <section className=\"flex flex-row items-start justify-start w-full line-clamp-2\">\n                    <h3\n                        className=\"text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700\"\n                        data-testid=\"vc-credential-details-title tracking-wide subpixel-antialiased\"\n                    >\n                        Credential Details\n                    </h3>\n                </section>\n\n                <section className=\"flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info\">\n                    {renderDetails}\n                </section>\n\n                <div className=\"w-full mt-2\"></div>\n\n                <button\n                    onClick={handleClick}\n                    className=\"vc-flip-btn bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 shadow-3xl rounded-full\"\n                >\n                    <span className=\"flex justify-center\">\n                        <img\n                            className=\"h-8 w-8 my-0 mx-4 scale-x-[-1]\"\n                            src={FlipArrowRight ?? ''}\n                            alt=\"Flip Card\"\n                        />\n                    </span>\n                </button>\n\n                <section className=\"flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]\">\n                    <VCVerificationCheckWithText loading={loading} />\n                    <section>\n                        {verification.map(item => (\n                            <VCVerificationPill\n                                key={item.check}\n                                status={item.status}\n                                message={item.message}\n                                details={item.details}\n                            />\n                        ))}\n                    </section>\n                </section>\n            </section>\n        </div>\n    );\n};\n\nexport default VCDisplayBackFace;\n"],"names":[],"mappings":"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"}