@learncard/react 2.8.27 → 2.8.30

package/dist/esm/UserProfilePicture-ecc82a6c.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const UserProfilePicture = ({ customContainerClass, customImageClass, user, alt, children }) => {
+  var _a, _b, _c, _d;
+  const baseColor = "bg-indigo-500";
+  const src = (user == null ? void 0 : user.image) || (user == null ? void 0 : user.profileImage);
+  const letterToDisplay = ((_a = user == null ? void 0 : user.displayName) == null ? void 0 : _a.substring(0, 1)) || ((_b = user == null ? void 0 : user.profileId) == null ? void 0 : _b.substring(0, 1)) || ((_c = user == null ? void 0 : user.name) == null ? void 0 : _c.substring(0, 1)) || ((_d = user == null ? void 0 : user.email) == null ? void 0 : _d.substring(0, 1)) || "#";
+  if (!src) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: `rounded-full flex items-center justify-center font-bold uppercase select-none text-white text-2xl ${customContainerClass} ${baseColor}`
+    }, letterToDisplay, children);
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `relative select-none ${customContainerClass}`
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: `rounded-full ${customImageClass}`,
+    alt: alt || "user",
+    src,
+    referrerPolicy: "no-referrer"
+  }), children);
+};
+
+export { UserProfilePicture as U };
+//# sourceMappingURL=UserProfilePicture-ecc82a6c.js.map

package/dist/esm/UserProfilePicture-ecc82a6c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserProfilePicture-ecc82a6c.js","sources":["../../src/components/UserProfilePicture/UserProfilePicture.tsx"],"sourcesContent":["import React from 'react';\n\n// Copied / Adapted from learn-card-base\nexport const UserProfilePicture: React.FC<{\n    customContainerClass?: string;\n    customImageClass?: string;\n    user?: any;\n    alt?: string;\n    children?: React.ReactNode | null;\n}> = ({ customContainerClass, customImageClass, user, alt, children }) => {\n    const baseColor = 'bg-indigo-500';\n    const src = user?.image || user?.profileImage;\n    const letterToDisplay =\n        user?.displayName?.substring(0, 1) ||\n        user?.profileId?.substring(0, 1) ||\n        user?.name?.substring(0, 1) ||\n        user?.email?.substring(0, 1) ||\n        '#';\n\n    if (!src) {\n        return (\n            <div\n                className={`rounded-full flex items-center justify-center font-bold uppercase select-none text-white text-2xl ${customContainerClass} ${baseColor}`}\n            >\n                {letterToDisplay}\n                {children}\n            </div>\n        );\n    }\n\n    return (\n        <div className={`relative select-none ${customContainerClass}`}>\n            <img\n                className={`rounded-full ${customImageClass}`}\n                alt={alt || 'user'}\n                src={src}\n                referrerPolicy=\"no-referrer\"\n            />\n            {children}\n        </div>\n    );\n};\n\nexport default UserProfilePicture;\n"],"names":[],"mappings":";;AAGa,MAAA,kBAAA,GAMR,CAAC,EAAE,oBAAA,EAAsB,kBAAkB,IAAM,EAAA,GAAA,EAAK,UAAe,KAAA;AAT1E,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAUI,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAM,MAAA,GAAA,GAAA,CAAM,IAAM,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,KAAA,MAAS,IAAM,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,YAAA,CAAA,CAAA;AACjC,EAAM,MAAA,eAAA,GAAA,CAAA,CACF,EAAM,GAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,WAAA,KAAN,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAU,GAAG,CAChC,CAAA,MAAA,CAAA,EAAA,GAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAM,SAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAiB,SAAU,CAAA,CAAA,EAAG,SAC9B,EAAM,GAAA,IAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,IAAA,CAAA,IAAA,KAAN,IAAY,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAU,CAAG,EAAA,CAAA,CAAA,CAAA,KAAA,CACzB,kCAAM,KAAN,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAa,SAAU,CAAA,CAAA,EAAG,CAC1B,CAAA,CAAA,IAAA,GAAA,CAAA;AAEJ,EAAA,IAAI,CAAC,GAAK,EAAA;AACN,IAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACG,SAAA,EAAW,qGAAqG,oBAAwB,CAAA,CAAA,EAAA,SAAA,CAAA,CAAA;AAAA,KAAA,EAEvI,iBACA,QACL,CAAA,CAAA;AAAA,GAER;AAEA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,CAAwB,qBAAA,EAAA,oBAAA,CAAA,CAAA;AAAA,GAAA,kBACnC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAgB,aAAA,EAAA,gBAAA,CAAA,CAAA;AAAA,IAC3B,KAAK,GAAO,IAAA,MAAA;AAAA,IACZ,GAAA;AAAA,IACA,cAAe,EAAA,aAAA;AAAA,GACnB,GACC,QACL,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{VCCard-d7474d15.js → VCCard-c81227a8.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { initLearnCard } from '@learncard/init';
-import { V as VCDisplayCard } from './VCDisplayCard-ce283667.js';
-import { V as VCDisplayCard2 } from './VCDisplayCard2-26fb27c2.js';
+import { V as VCDisplayCard } from './VCDisplayCard-3e08535e.js';
+import { V as VCDisplayCard2 } from './VCDisplayCard2-b66bf7cf.js';
 
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -70,4 +70,4 @@ const VCCard = ({
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-d7474d15.js.map
+//# sourceMappingURL=VCCard-c81227a8.js.map

package/dist/esm/{VCCard-d7474d15.js.map → VCCard-c81227a8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-d7474d15.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\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    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAAgC,CAAC;AAAA,EAC1C,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAY,GAAA,EAAA;AAAA,EACZ,OAAU,GAAA,GAAA;AAAA,EACV,qBAAA;AAAA,EAEA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AACJ,CAAM,KAAA;AACF,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,IAAI,YAAY,GAAK,EAAA;AACjB,IAAA,uBACK,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MACG,UAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAc,EAAA,cAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAER;AACA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,sBAAwB,EAAA,OAAA;AAAA,IACxB,iBAAmB,EAAA,cAAA;AAAA,IACnB,qBAAA;AAAA,IAEA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,sBAAA;AAAA,IACA,eAAA;AAAA,GACJ,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"VCCard-c81227a8.js","sources":["../../src/components/VCCard/VCCard.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { initLearnCard } from '@learncard/init';\nimport { VC, Profile, VerificationItem } from '@learncard/types';\n\nimport { VCDisplayCard } from '../VCDisplayCard';\nimport {\n    VCDisplayCard2,\n    CredentialIconType,\n} from '../VCDisplayCard2';\n\nimport { MediaMetadata, VideoMetadata } from '../../types';\n\nexport type VCCardProps = {\n    credential: VC;\n    issueeOverride?: Profile;\n    className?: string;\n    version?: '1' | '2';\n\n    /* Only used for version 2 */\n    subjectImageComponent?: React.ReactNode;\n    // convertTagsToSkills?: (tags: string[]) => { [skill: string]: string[] };\n    handleXClick?: () => void;\n    getFileMetadata?: (url: string) => MediaMetadata;\n    getVideoMetadata?: (url: string) => VideoMetadata;\n    onMediaAttachmentClick?: (url: string) => void;\n    bottomRightIcon?: CredentialIconType;\n};\n\nexport const VCCard: React.FC<VCCardProps> = ({\n    credential,\n    issueeOverride,\n    className = '',\n    version = '1',\n    subjectImageComponent,\n    // convertTagsToSkills,\n    handleXClick,\n    getFileMetadata,\n    getVideoMetadata,\n    onMediaAttachmentClick,\n    bottomRightIcon,\n}) => {\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    if (version === '1') {\n        return (\n            <VCDisplayCard\n                credential={credential}\n                issueeOverride={issueeOverride}\n                className={className}\n                loading={loading}\n                verification={vcVerification}\n            />\n        );\n    }\n    return (\n        <VCDisplayCard2\n            credential={credential}\n            issueeOverride={issueeOverride}\n            verificationInProgress={loading}\n            verificationItems={vcVerification}\n            subjectImageComponent={subjectImageComponent}\n            // convertTagsToSkills={convertTagsToSkills}\n            handleXClick={handleXClick}\n            getFileMetadata={getFileMetadata}\n            getVideoMetadata={getVideoMetadata}\n            onMediaAttachmentClick={onMediaAttachmentClick}\n            bottomRightIcon={bottomRightIcon}\n        />\n    );\n};\n\nexport default VCCard;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4BO,MAAM,SAAgC,CAAC;AAAA,EAC1C,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAY,GAAA,EAAA;AAAA,EACZ,OAAU,GAAA,GAAA;AAAA,EACV,qBAAA;AAAA,EAEA,YAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,sBAAA;AAAA,EACA,eAAA;AACJ,CAAM,KAAA;AACF,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,IAAI,YAAY,GAAK,EAAA;AACjB,IAAA,uBACK,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,MACG,UAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAc,EAAA,cAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAER;AACA,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACG,UAAA;AAAA,IACA,cAAA;AAAA,IACA,sBAAwB,EAAA,OAAA;AAAA,IACxB,iBAAmB,EAAA,cAAA;AAAA,IACnB,qBAAA;AAAA,IAEA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,gBAAA;AAAA,IACA,sBAAA;AAAA,IACA,eAAA;AAAA,GACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{VCDisplayBackFace-293436a0.js → VCDisplayBackFace-32a7ca50.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { b as VCVerificationCheckWithText } from './VCVerificationCheck-80249524.js';
-import { a as VCVerificationPill } from './VCVerificationPill-4b3a7f95.js';
+import { a as VCVerificationPill } from './VCVerificationPill-647127f6.js';
 import FlipArrowRight from './ArrowArcRight.svg';
-import { h as getNameFromProfile } from './credential.helpers-62c6ea1b.js';
+import { h as getNameFromProfile } from './credential.helpers-595c791f.js';
 
 const VCDisplayBackFace = ({
   issuer,
@@ -77,4 +77,4 @@ const VCDisplayBackFace = ({
 };
 
 export { VCDisplayBackFace as V };
-//# sourceMappingURL=VCDisplayBackFace-293436a0.js.map
+//# sourceMappingURL=VCDisplayBackFace-32a7ca50.js.map

package/dist/esm/{VCDisplayBackFace-293436a0.js.map → VCDisplayBackFace-32a7ca50.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCDisplayBackFace-293436a0.js","sources":["../../src/components/VCDisplayBackFace/VCDisplayBackFace.tsx"],"sourcesContent":["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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"}
+{"version":3,"file":"VCDisplayBackFace-32a7ca50.js","sources":["../../src/components/VCDisplayBackFace/VCDisplayBackFace.tsx"],"sourcesContent":["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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"}

package/dist/esm/{VCDisplayCard-ce283667.js → VCDisplayCard-3e08535e.js}

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import { F as FlippyCard } from './FlippyCard-a2de5cf1.js';
 import FatArrow from './icon.green.fat-arrow.png';
-import DefaultFace from './default-face.jpeg';
+import { U as UserProfilePicture } from './UserProfilePicture-ecc82a6c.js';
 import { b as VCVerificationCheckWithText } from './VCVerificationCheck-80249524.js';
-import { h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-62c6ea1b.js';
-import { V as VCDisplayBackFace } from './VCDisplayBackFace-293436a0.js';
+import { h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-595c791f.js';
+import { V as VCDisplayBackFace } from './VCDisplayBackFace-32a7ca50.js';
 
 const VCDisplayFrontFace = ({
   title,
@@ -22,41 +22,31 @@ const VCDisplayFrontFace = ({
   overrideCardTitle,
   customHeaderComponent
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const credentialAchievementImage = ((_b = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.image) == null ? void 0 : _b.id) || ((_c = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _c.image);
   const issuerName = getNameFromProfile(issuer != null ? issuer : "");
   const issueeName = getNameFromProfile(issuee != null ? issuee : "");
   const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
   const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
-  const issuerNameAbr = (_d = issuerName == null ? void 0 : issuerName.slice(0, 1)) != null ? _d : "";
   let issueeImageEl = null;
-  const issuerImgExists = issuerImage && issuerImage !== "";
-  const issueeImgExists = issueeImage && issueeImage !== "";
-  if (issueeImgExists) {
-    issueeImageEl = /* @__PURE__ */ React.createElement("div", {
-      className: "flex flex-row items-center justify-center h-full w-full rounded-full border-solid border-4 border-white overflow-hidden bg-white"
-    }, /* @__PURE__ */ React.createElement("img", {
-      className: "h-full w-full object-cover",
-      src: issueeImage || DefaultFace,
-      alt: "Issuee image"
-    }));
-  } else if (!issueeImgExists && subjectImageComponent) {
+  if (subjectImageComponent) {
     issueeImageEl = subjectImageComponent;
-  }
-  let issuerImageEl = null;
-  if (issuerImgExists) {
-    issuerImageEl = /* @__PURE__ */ React.createElement("img", {
-      className: "w-4/6 h-4/6 object-cover",
-      src: issuerImage,
-      alt: "Issuer image"
-    });
   } else {
-    issuerImageEl = /* @__PURE__ */ React.createElement("div", {
-      className: "flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl"
-    }, issuerNameAbr);
+    issueeImageEl = /* @__PURE__ */ React.createElement(UserProfilePicture, {
+      customContainerClass: `object-cover h-full w-full text-4xl ${!issueeImage ? "pt-[8px]" : ""}`,
+      user: { image: issueeImage, name: issueeName },
+      alt: "Issuee image"
+    });
   }
+  let issuerImageEl = null;
   if (issuerImageComponent) {
     issuerImageEl = issuerImageComponent;
+  } else {
+    issuerImageEl = /* @__PURE__ */ React.createElement(UserProfilePicture, {
+      customContainerClass: `object-cover h-full w-full text-4xl ${!issuerImage ? "pt-[8px]" : ""}`,
+      user: { image: issuerImage, name: issuerName },
+      alt: "Issuer image"
+    });
   }
   const credImg = credentialAchievementImage ? /* @__PURE__ */ React.createElement("img", {
     className: "h-full w-full object-cover",
@@ -86,7 +76,7 @@ const VCDisplayFrontFace = ({
     className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white"
   }, issuerImageEl), /* @__PURE__ */ React.createElement("img", {
     className: "h-8 w-8 my-0 mx-4",
-    src: (_e = FatArrow) != null ? _e : "",
+    src: (_d = FatArrow) != null ? _d : "",
     alt: "fat arrow icon"
   }), /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white"
@@ -180,4 +170,4 @@ const VCDisplayCard = ({
 };
 
 export { VCDisplayCard as V };
-//# sourceMappingURL=VCDisplayCard-ce283667.js.map
+//# sourceMappingURL=VCDisplayCard-3e08535e.js.map

package/dist/esm/VCDisplayCard-3e08535e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCDisplayCard-3e08535e.js","sources":["../../src/components/VCDisplayFrontFace/VCDisplayFrontFace.tsx","../../src/components/VCDisplayCard/VCDisplayCard.tsx"],"sourcesContent":["import React from 'react';\nimport FatArrow from '../../assets/images/icon.green.fat-arrow.png';\nimport UserProfilePicture from '../UserProfilePicture/UserProfilePicture';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport { getImageFromProfile, getNameFromProfile } from '../../helpers/credential.helpers';\n\nimport { VCDisplayCardProps } from '../../types';\n\nconst VCDisplayFrontFace: React.FC<VCDisplayCardProps> = ({\n    title,\n    createdAt,\n    issuer,\n    issuee,\n    subjectImageComponent,\n    issuerImageComponent,\n    hideProfileBubbles = false,\n    credentialSubject,\n    className = '',\n    loading,\n    handleClick,\n    overrideCardImageComponent,\n    overrideCardTitle,\n    customHeaderComponent,\n}) => {\n    const credentialAchievementImage =\n        credentialSubject?.achievement?.image?.id || credentialSubject?.achievement?.image;\n    const issuerName = getNameFromProfile(issuer ?? '');\n    const issueeName = getNameFromProfile(issuee ?? '');\n    const issuerImage = getImageFromProfile(issuer ?? '');\n    const issueeImage = getImageFromProfile(issuee ?? '');\n\n    let issueeImageEl: React.ReactNode | null = null;\n    if (subjectImageComponent) {\n        issueeImageEl = subjectImageComponent;\n    } else {\n        issueeImageEl = (\n            <UserProfilePicture\n                customContainerClass={`object-cover h-full w-full text-4xl ${\n                    !issueeImage ? 'pt-[8px]' : ''\n                }`}\n                user={{ image: issueeImage, name: issueeName }}\n                alt=\"Issuee image\"\n            />\n        );\n    }\n\n    let issuerImageEl: React.ReactNode | null = null;\n\n    if (issuerImageComponent) {\n        issuerImageEl = issuerImageComponent;\n    } else {\n        issuerImageEl = (\n            <UserProfilePicture\n                customContainerClass={`object-cover h-full w-full text-4xl ${\n                    !issuerImage ? 'pt-[8px]' : ''\n                }`}\n                user={{ image: issuerImage, name: issuerName }}\n                alt=\"Issuer image\"\n            />\n        );\n    }\n\n    const credImg = credentialAchievementImage ? (\n        <img\n            className=\"h-full w-full object-cover\"\n            src={credentialAchievementImage ?? ''}\n            alt=\"Credential Achievement Image\"\n        />\n    ) : (\n        <></>\n    );\n\n    const renderCardImg = overrideCardImageComponent ? overrideCardImageComponent : credImg;\n    const cardTitle = overrideCardTitle ? overrideCardTitle : title;\n\n    return (\n        <div\n            className={`z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}\n        >\n            <section className=\"bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]\"></section>\n            <section className=\"flex flex-col items-center justify-center z-10 text-center credential-thumb-img\">\n                <section className=\"max-w-[100px] max-h-[100px]\">{renderCardImg}</section>\n\n                <section className=\"flex flex-row  w-full line-clamp-2\">\n                    <div className=\"flex flex-row w-full line-clamp-2 py-4 vc-flippy-card-title-front \">\n                        <h3\n                            className=\"vc-thumbnail-title w-full text-2xl line-clamp-2 tracking-wide leading-snug text-center vc-display-title text-gray-900 font-medium\"\n                            data-testid=\"vc-thumbnail-title\"\n                        >\n                            {cardTitle ?? ''}\n                        </h3>\n                    </div>\n\n                    {customHeaderComponent && customHeaderComponent}\n                </section>\n\n                <section className=\"flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs\">\n                    {!hideProfileBubbles && (\n                        <>\n                            <div className=\"flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white\">\n                                {issuerImageEl}\n                            </div>\n                            <img\n                                className=\"h-8 w-8 my-0 mx-4\"\n                                src={FatArrow ?? ''}\n                                alt=\"fat arrow icon\"\n                            />\n                            <div className=\"flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white\">\n                                {issueeImageEl}\n                            </div>\n                        </>\n                    )}\n                </section>\n\n                <div className=\"w-full mt-2 vc-card-issued-to-info\">\n                    <p\n                        className=\"text-sm font-light text-center line-clamp-2 vc-display-issue-details text-gray-900\"\n                        data-testid=\"vc-thumbnail-createdAt\"\n                    >\n                        Issued to <span className=\"font-bold text-gray-900\">{issueeName}</span> on{' '}\n                        {createdAt ?? ''} by{' '}\n                        <span className=\"font-bold text-gray-900\"> {issuerName}</span>\n                    </p>\n                </div>\n\n                <button\n                    onClick={handleClick}\n                    className=\"cursor-alias bg-white my-3 border-0 text-indigo-500 font-semibold py-2 px-4 sl\"\n                >\n                    <span className=\"flex justify-center\">\n                        <p className=\"flex items-center\">View Details</p>\n                    </span>\n                </button>\n            </section>\n\n            <div className=\"flex items-center justify-center w-full\">\n                <VCVerificationCheckWithText loading={loading} />\n            </div>\n        </div>\n    );\n};\n\nexport default VCDisplayFrontFace;\n","import React, { useState } from 'react';\nimport { AchievementCredential, VC, Profile, VerificationItem } from '@learncard/types';\n\nimport FlippyCard from '../FlippyCard/FlippyCard';\nimport VCDisplayFrontFace from '../VCDisplayFrontFace/VCDisplayFrontFace';\nimport VCDisplayBackFace from '../VCDisplayBackFace/VCDisplayBackFace';\n\nimport { getInfoFromCredential } from '../../helpers/credential.helpers';\n\nconst FRONT_FACE = 'front';\nconst BACK_FACE = 'back';\n\nexport type VCDisplayCardPropsReal = {\n    credential: VC | AchievementCredential;\n    issueeOverride?: Profile;\n    issuerOverride?: Profile;\n    className?: string;\n    hideProfileBubbles?: boolean;\n    loading?: boolean;\n    verification?: VerificationItem[];\n    subjectImageComponent?: React.ReactNode;\n    issuerImageComponent?: React.ReactNode;\n    overrideDetailsComponent?: React.ReactNode;\n    overrideCardTitle?: string;\n    overrideCardImageComponent?: React.ReactNode;\n    customHeaderComponent?: React.ReactNode;\n};\n\nexport const VCDisplayCard: React.FC<VCDisplayCardPropsReal> = ({\n    credential,\n    issueeOverride,\n    issuerOverride,\n    className = '',\n    loading = false,\n    verification = [],\n    hideProfileBubbles = false,\n    subjectImageComponent,\n    issuerImageComponent,\n    overrideDetailsComponent,\n    overrideCardTitle,\n    overrideCardImageComponent,\n    customHeaderComponent,\n}) => {\n    const [flipState, setFlipState] = useState(FRONT_FACE);\n    const {\n        title,\n        createdAt,\n        issuer: _issuer,\n        issuee: _issuee,\n        credentialSubject,\n    } = getInfoFromCredential(credential);\n    const issuee = issueeOverride || _issuee;\n    const issuer = issuerOverride || _issuer;\n\n    const handleFlip = () => {\n        if (flipState === FRONT_FACE) {\n            setFlipState(BACK_FACE);\n        }\n        if (flipState === BACK_FACE) {\n            setFlipState(FRONT_FACE);\n        }\n    };\n\n    return (\n        <FlippyCard flipState={flipState}>\n            <VCDisplayFrontFace\n                title={title}\n                credentialSubject={credentialSubject}\n                customHeaderComponent={customHeaderComponent}\n                issuer={issuer}\n                issuee={issuee}\n                subjectImageComponent={subjectImageComponent}\n                issuerImageComponent={issuerImageComponent}\n                overrideCardImageComponent={overrideCardImageComponent}\n                overrideCardTitle={overrideCardTitle}\n                hideProfileBubbles={hideProfileBubbles}\n                createdAt={createdAt}\n                className={className}\n                loading={loading}\n                handleClick={handleFlip}\n            />\n            <VCDisplayBackFace\n                title={title}\n                credentialSubject={credentialSubject}\n                overrideDetailsComponent={overrideDetailsComponent}\n                issuer={issuer}\n                issuee={issuee}\n                createdAt={createdAt}\n                className={className}\n                loading={loading}\n                verification={verification}\n                handleClick={handleFlip}\n            />\n        </FlippyCard>\n    );\n};\n\nexport default VCDisplayCard;\n"],"names":[],"mappings":"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"}

package/dist/esm/{VCDisplayCard2-26fb27c2.js → VCDisplayCard2-b66bf7cf.js}

@@ -1,17 +1,18 @@
 import React, { useRef, useEffect, useState, createContext, Component, Children, cloneElement, useLayoutEffect } from 'react';
+import './index-4fa491c1.js';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
-import DefaultFace from './default-face.jpeg';
-import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-62c6ea1b.js';
-import { g as getBaseUrl, b as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, d as LeftArrow, e as SkillsBox, t as truncateWithEllipsis, V as VERIFIER_STATES$1, a as VerifierStateBadgeAndText, P as PersonBadge, j as VerifiedBadge, U as UnknownVerifierBadge, k as RedFlag } from './VerifierStateBadgeAndText-3883f38b.js';
+import { U as UserProfilePicture } from './UserProfilePicture-ecc82a6c.js';
+import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-595c791f.js';
+import { g as getBaseUrl, b as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, d as LeftArrow, e as SkillsBox, t as truncateWithEllipsis, V as VERIFIER_STATES$1, a as VerifierStateBadgeAndText, P as PersonBadge, i as VerifiedBadge, U as UnknownVerifierBadge, j as RedFlag } from './VerifierStateBadgeAndText-c74e1fe4.js';
 import './index-1fa04a2d.js';
 import { L as Lightbox } from './Lightbox-8a43ba52.js';
-import { V as VerificationStatusEnum } from './types.esm-870fa29e.js';
-import { A as AlignmentsBox, a as CertificateDisplayCard } from './CertificateDisplayCard-502cdb0e.js';
+import { V as VerificationStatusEnum } from './types.esm-e58d276a.js';
+import { A as AlignmentsBox, a as CertificateDisplayCard } from './CertificateDisplayCard-6e09e459.js';
 import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-e9569804.js';
 import { a as LCCategoryEnum } from './index-28917993.js';
 import { P as PuzzlePiece } from './PuzzlePiece-1fb12c2e.js';
 import IDSleeve from './id-sleeve.png';
-import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-bc9899b7.js';
+import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-ad2d6f2a.js';
 
 const RoundedX = ({ className = "" }) => {
   return /* @__PURE__ */ React.createElement("svg", {
@@ -114,13 +115,13 @@ const IssueHistoryBox = ({
 }) => {
   let renderIssueHistory = issueHistory == null ? void 0 : issueHistory.map((issueItem) => {
     return /* @__PURE__ */ React.createElement("div", {
-      className: "flex items-center issue-log-item border-b-[1px] py-[5px] border-grayscale-200 border-solid w-full",
+      className: "flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full",
       key: issueItem == null ? void 0 : issueItem.id
     }, /* @__PURE__ */ React.createElement("div", {
       className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden"
-    }, /* @__PURE__ */ React.createElement("img", {
-      className: "h-full w-full object-cover select-none",
-      src: (issueItem == null ? void 0 : issueItem.thumb) || DefaultFace,
+    }, /* @__PURE__ */ React.createElement(UserProfilePicture, {
+      customContainerClass: `h-full w-full object-cover select-none text-xl ${!(issueItem == null ? void 0 : issueItem.thumb) ? "pt-[2px]" : ""}`,
+      user: { image: issueItem == null ? void 0 : issueItem.thumb, name: issueItem == null ? void 0 : issueItem.name },
       alt: "profile"
     })), /* @__PURE__ */ React.createElement("div", {
       className: "ml-[9px] flex flex-col justify-center"
@@ -784,19 +785,20 @@ const VC2FrontFaceInfo = ({
   const { credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
     uppercaseDate: false
   });
-  const getImageElement = (imageUrl2, alt, overrideComponent) => {
+  const getImageElement = (imageUrl2, alt, overrideComponent, bigText) => {
     if (overrideComponent)
       return overrideComponent;
-    return /* @__PURE__ */ React.createElement("img", {
-      className: "h-full w-full object-cover select-none",
-      src: imageUrl2 || DefaultFace,
-      alt
+    return /* @__PURE__ */ React.createElement(UserProfilePicture, {
+      user: { image: imageUrl2, name: issueeName },
+      alt,
+      customContainerClass: `h-full w-full ${bigText ? "!text-4xl" : ""}`
     });
   };
   const issueeImageEl = getImageElement(
     issueeImage,
     "Issuee image",
-    subjectImageComponent
+    subjectImageComponent,
+    true
   );
   const issuerImageEl = getImageElement(
     issuerImage,
@@ -1381,4 +1383,4 @@ const VCDisplayCard2 = ({
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-26fb27c2.js.map
+//# sourceMappingURL=VCDisplayCard2-b66bf7cf.js.map