@learncard/react 2.9.29 → 2.10.1

package/dist/esm/{VCDisplayCard-a40c4c7a.js.map → VCDisplayCard-8463d18d.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCDisplayCard-a40c4c7a.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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"}
+{"version":3,"file":"VCDisplayCard-8463d18d.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-f0bf0f87.js → VCDisplayCard2-5003e0c8.js}

@@ -1,17 +1,17 @@
 import React, { useRef, useEffect, useState, createContext, Component, Children, cloneElement, useLayoutEffect } from 'react';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-8b8b7a76.js';
-import { U as UserProfilePicture } from './UserProfilePicture-7e131f5d.js';
-import { a as getColorForVerificationStatus, j as format$1, h as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-bd29e893.js';
-import { g as getBaseUrl, b as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, d as LeftArrow, e as SkillsBox, r as resolveProfileDisplay, i as isAppDidWeb, V as VERIFIER_STATES$1, a as VerifierStateBadgeAndText, P as PersonBadge, h as VerifiedBadge, U as UnknownVerifierBadge, j as RedFlag } from './VerifierStateBadgeAndText-2bddbc91.js';
+import { U as UserProfilePicture } from './UserProfilePicture-50c34186.js';
+import { a as getColorForVerificationStatus, j as format$1, h as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-108b5fb6.js';
+import { d as getBaseUrl, e as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, E as ExclamationPoint, A as AcuteCheckmark, I as InfoIcon, h as LeftArrow, j as SkillsBox, r as resolveProfileDisplay, l as isAppDidWeb, V as VERIFIER_STATES, m as VerifierStateBadgeAndText, P as PersonBadge, n as VerifiedBadge, U as UnknownVerifierBadge, o as RedFlag } from './VerifierStateBadgeAndText-f878973e.js';
 import './index-eae3ca64.js';
 import { L as Lightbox, X } from './Lightbox-f0338a0c.js';
-import { V as VerificationStatusEnum } from './types.esm-e2b75956.js';
-import { A as AlignmentsBox, b as CertificateDisplayCard } from './CertificateDisplayCard-fdc1ea6c.js';
+import { V as VerificationStatusEnum } from './types.esm-aa0345d0.js';
+import { A as AlignmentsBox, b as CertificateDisplayCard } from './CertificateDisplayCard-8f3f43b4.js';
 import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-8eef4f7c.js';
 import { a as LCCategoryEnum } from './index-28917993.js';
 import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
 import IDSleeve from './id-sleeve.png';
-import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-4c768f06.js';
+import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-1b080902.js';
 
 const RoundedX = ({ className = "" }) => {
   return /* @__PURE__ */ React.createElement(
@@ -818,6 +818,34 @@ const VC2BackFace = ({
   ), alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, { alignment, style: "boost" }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, { verificationItems })));
 };
 
+const BadgeThumbnailPlaceholder = () => /* @__PURE__ */ React.createElement(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "w-1/2 h-1/2 text-grayscale-400",
+    "aria-hidden": "true"
+  },
+  /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "9", r: "6", stroke: "currentColor", strokeWidth: "1.75" }),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M8.5 14.5 7 22l5-3 5 3-1.5-7.5",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M12 6.5 13 8.3l2 .3-1.4 1.4.3 2L12 11l-1.9.9.3-2L9 8.6l2-.3L12 6.5Z",
+      fill: "currentColor"
+    }
+  )
+);
 const VC2FrontFaceInfo = ({
   credential,
   issuee,
@@ -831,10 +859,15 @@ const VC2FrontFaceInfo = ({
   customThumbComponent,
   knownDIDRegistry,
   customBodyContentSlot,
-  unknownVerifierTitle
+  unknownVerifierTitle,
+  onVerifierClick
 }) => {
   const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
   const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
+  const [thumbErrored, setThumbErrored] = React.useState(false);
+  React.useEffect(() => {
+    setThumbErrored(false);
+  }, [imageUrl]);
   const issueeDisplay = resolveProfileDisplay(issuee, "");
   const issuerDisplay = resolveProfileDisplay(issuer, "");
   const { credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
@@ -884,31 +917,34 @@ const VC2FrontFaceInfo = ({
   const isAppIssuerDid = isAppDidWeb(issuerDid);
   let verifierState;
   if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
-    verifierState = VERIFIER_STATES$1.selfVerified;
+    verifierState = VERIFIER_STATES.selfVerified;
   } else if (unknownVerifierTitle) {
-    verifierState = VERIFIER_STATES$1.trustedVerifier;
+    verifierState = VERIFIER_STATES.trustedVerifier;
   } else {
     if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "trusted") {
-      verifierState = VERIFIER_STATES$1.trustedVerifier;
+      verifierState = VERIFIER_STATES.trustedVerifier;
     } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "untrusted") {
-      verifierState = VERIFIER_STATES$1.untrustedVerifier;
+      verifierState = VERIFIER_STATES.untrustedVerifier;
     } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "unknown") {
-      verifierState = isAppIssuerDid ? VERIFIER_STATES$1.appIssuer : VERIFIER_STATES$1.unknownVerifier;
+      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
     } else {
-      verifierState = isAppIssuerDid ? VERIFIER_STATES$1.appIssuer : VERIFIER_STATES$1.unknownVerifier;
+      verifierState = isAppIssuerDid ? VERIFIER_STATES.appIssuer : VERIFIER_STATES.unknownVerifier;
     }
   }
-  return /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement("section", { className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]" }, imageUrl && !customThumbComponent && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement("section", { className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]" }, imageUrl && !customThumbComponent && (thumbErrored ? /* @__PURE__ */ React.createElement("div", { className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-grayscale-100 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(BadgeThumbnailPlaceholder, null)) : /* @__PURE__ */ React.createElement(
     "img",
     {
-      className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
-      src: imageUrl
+      className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-white object-cover",
+      src: imageUrl,
+      alt: "credential thumbnail",
+      onError: () => setThumbErrored(true)
     }
-  ), customThumbComponent && customThumbComponent, /* @__PURE__ */ React.createElement("div", { className: "vc-issue-info-box bg-white flex flex-col items-center gap-[5px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full" }, customBodyCardComponent && customBodyCardComponent, !customBodyCardComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { className: "flex flex-col text-center leading-[130%] w-full" }, !issueeDisplay.isMissing && issueeDisplay.isDidValue && /* @__PURE__ */ React.createElement("span", { className: "flex flex-wrap items-baseline justify-center gap-1 text-[17px] leading-normal font-[600] font-poppins max-w-full overflow-hidden text-ellipsis whitespace-nowrap" }, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-500 underline" }, issueeDisplay.displayName)), !issueeDisplay.isMissing && !issueeDisplay.isDidValue && /* @__PURE__ */ React.createElement("span", { className: "font-poppins font-semibold text-[20px] leading-[130%] max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-grayscale-900" }, issueeDisplay.displayName), subjectDID && !issueeDisplay.isDidValue && !issueeDisplay.isLCNetwork && /* @__PURE__ */ React.createElement("span", { className: "text-[12px] text-grayscale-500 leading-[18px] font-poppins font-normal m-0 p-0" }, subjectDID)), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement("div", { className: "vc-issuee-image h-[60px] w-[60px] rounded-full overflow-hidden" }, issueeImageEl), /* @__PURE__ */ React.createElement("div", { className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px]" }, issuerImageEl)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[13px]" }, /* @__PURE__ */ React.createElement("div", { className: "vc-issue-details mt-[10px] flex flex-col items-center font-poppins text-[14px] leading-[20px]" }, /* @__PURE__ */ React.createElement("span", { className: "created-at text-grayscale-700" }, createdAt), !issuerDisplay.isMissing && /* @__PURE__ */ React.createElement("span", { className: "issued-by flex flex-wrap items-baseline justify-center gap-1 max-w-full overflow-hidden text-ellipsis whitespace-nowrap text-[14px]" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-grayscale-900" }, "By"), issuerDisplay.isDidValue ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "flex flex-wrap items-baseline justify-center gap-1 leading-normal font-[600] font-poppins max-w-full overflow-hidden text-ellipsis whitespace-nowrap" }, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-500 underline" }, issuerDisplay.displayName))) : /* @__PURE__ */ React.createElement("strong", { className: "font-bold text-grayscale-900" }, issuerDisplay.displayName))), /* @__PURE__ */ React.createElement(
+  )), customThumbComponent && customThumbComponent, /* @__PURE__ */ React.createElement("div", { className: "vc-issue-info-box bg-white flex flex-col items-center gap-[5px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full" }, customBodyCardComponent && customBodyCardComponent, !customBodyCardComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { className: "flex flex-col text-center leading-[130%] w-full" }, !issueeDisplay.isMissing && issueeDisplay.isDidValue && /* @__PURE__ */ React.createElement("span", { className: "flex flex-wrap items-baseline justify-center gap-x-1 text-[17px] leading-normal font-[600] font-poppins max-w-full break-words" }, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-500 underline" }, issueeDisplay.displayName)), !issueeDisplay.isMissing && !issueeDisplay.isDidValue && /* @__PURE__ */ React.createElement("span", { className: "font-poppins font-semibold text-[20px] leading-[130%] max-w-full line-clamp-2 break-words text-grayscale-900" }, issueeDisplay.displayName), subjectDID && !issueeDisplay.isDidValue && !issueeDisplay.isLCNetwork && /* @__PURE__ */ React.createElement("span", { className: "text-[12px] text-grayscale-500 leading-[18px] font-poppins font-normal m-0 p-0" }, subjectDID)), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement("div", { className: "vc-issuee-image h-[60px] w-[60px] rounded-full overflow-hidden bg-white" }, issueeImageEl), /* @__PURE__ */ React.createElement("div", { className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px] bg-white" }, issuerImageEl)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[13px]" }, /* @__PURE__ */ React.createElement("div", { className: "vc-issue-details mt-[10px] flex flex-col items-center font-poppins text-[14px] leading-[20px]" }, /* @__PURE__ */ React.createElement("span", { className: "created-at text-grayscale-700" }, createdAt), !issuerDisplay.isMissing && /* @__PURE__ */ React.createElement("span", { className: "issued-by max-w-full break-words text-center line-clamp-2 text-[14px]" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-grayscale-900" }, "By"), " ", issuerDisplay.isDidValue ? /* @__PURE__ */ React.createElement("span", { className: "font-[600] font-poppins break-words" }, /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), " ", /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-500 underline" }, issuerDisplay.displayName)) : /* @__PURE__ */ React.createElement("strong", { className: "font-bold text-grayscale-900 break-words" }, issuerDisplay.displayName))), /* @__PURE__ */ React.createElement(
     VerifierStateBadgeAndText,
     {
       verifierState,
-      unknownVerifierTitle
+      unknownVerifierTitle,
+      onClick: (event) => onVerifierClick == null ? void 0 : onVerifierClick(event, verifierState)
     }
   ))), customBodyContentSlot && customBodyContentSlot)));
 };
@@ -950,13 +986,6 @@ const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   );
 };
 
-const VERIFIER_STATES = {
-  selfVerified: "Self Issued",
-  trustedVerifier: "Trusted Issuer",
-  unknownVerifier: "Unknown Issuer",
-  appIssuer: "Trusted App",
-  untrustedVerifier: "Untrusted Issuer"
-};
 const VCIDDisplayFrontFace = ({
   isFront,
   setIsFront,
@@ -967,7 +996,8 @@ const VCIDDisplayFrontFace = ({
   hideQRCode = false,
   qrCodeOnClick,
   customIDDescription,
-  unknownVerifierTitle
+  unknownVerifierTitle,
+  onVerifierClick
 }) => {
   var _a;
   const { credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
@@ -1017,11 +1047,29 @@ const VCIDDisplayFrontFace = ({
     "button",
     {
       type: "button",
-      className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[25px] w-fit select-none",
+      className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[24px] py-[8px] rounded-[40px] text-[16px] font-poppins font-medium leading-normal mt-[25px] w-fit select-none",
       onClick: () => setIsFront(!isFront)
     },
     "Details"
-  ), /* @__PURE__ */ React.createElement("div", { className: "w-full flex items-center justify-center mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "h-[2px] w-full bg-gray-200" })), /* @__PURE__ */ React.createElement("div", { className: "w-full flex items-center justify-center mt-2" }, isSelfVerified && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-green-dark flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(PersonBadge, { className: "w-[20px] h-[20px]" }), "Self Issued"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-blue-light flex gap-[3px] items-center text-center" }, /* @__PURE__ */ React.createElement(VerifiedBadge, { className: "w-[20px] h-[20px]" }), unknownVerifierTitle != null ? unknownVerifierTitle : "Trusted Issuer"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-orange-500 flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(UnknownVerifierBadge, { className: "w-[20px] h-[20px]" }), "Unknown Issuer"), verifierState === VERIFIER_STATES.appIssuer && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-cyan-600 flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(UnknownVerifierBadge, { className: "w-[20px] h-[20px]" }), "Trusted App"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(RedFlag, { className: "w-[20px] h-[20px]" }), "Untrusted Issuer")))))));
+  ), /* @__PURE__ */ React.createElement("div", { className: "w-full flex items-center justify-center mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "h-[2px] w-full bg-gray-200" })), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      className: "w-full flex items-center justify-center mt-2 appearance-none bg-transparent p-0",
+      onClick: (event) => {
+        event.stopPropagation();
+        onVerifierClick == null ? void 0 : onVerifierClick(event, verifierState);
+      },
+      onMouseDown: (event) => event.stopPropagation(),
+      "aria-haspopup": "dialog",
+      "aria-label": `Open issuer details for ${unknownVerifierTitle != null ? unknownVerifierTitle : verifierState}`
+    },
+    isSelfVerified && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-green-dark flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(PersonBadge, { className: "w-[20px] h-[20px]" }), "Self Issued"),
+    verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-blue-light flex gap-[3px] items-center text-center" }, /* @__PURE__ */ React.createElement(VerifiedBadge, { className: "w-[20px] h-[20px]" }), unknownVerifierTitle != null ? unknownVerifierTitle : "Trusted Issuer"),
+    verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-orange-500 flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(UnknownVerifierBadge, { className: "w-[20px] h-[20px]" }), "Unknown Issuer"),
+    verifierState === VERIFIER_STATES.appIssuer && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-cyan-600 flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(VerifiedBadge, { className: "w-[20px] h-[20px]" }), "App Issuer"),
+    verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React.createElement("span", { className: "uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center" }, /* @__PURE__ */ React.createElement(RedFlag, { className: "w-[20px] h-[20px]" }), "Untrusted Issuer")
+  ))))));
 };
 
 const VCIDDisplayCard = ({
@@ -1048,7 +1096,8 @@ const VCIDDisplayCard = ({
   customIDDescription,
   hideGradientBackground = false,
   customLinkedCredentialsComponent,
-  unknownVerifierTitle
+  unknownVerifierTitle,
+  onVerifierClick
 }) => {
   const [_isFront, _setIsFront] = useState(isFrontOverride != null ? isFrontOverride : true);
   const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
@@ -1085,7 +1134,8 @@ const VCIDDisplayCard = ({
           qrCodeOnClick,
           hideQRCode,
           customIDDescription,
-          unknownVerifierTitle
+          unknownVerifierTitle,
+          onVerifierClick
         }
       ), !isFront && /* @__PURE__ */ React.createElement(
         VC2BackFace,
@@ -1155,7 +1205,8 @@ const VCDisplayCard2 = ({
   customContentSlot,
   customBodyContentSlot,
   unknownVerifierTitle,
-  hideFrontFaceDetails
+  hideFrontFaceDetails,
+  onVerifierClick
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
@@ -1231,7 +1282,8 @@ const VCDisplayCard2 = ({
         customLinkedCredentialsComponent,
         customBodyContentSlot,
         unknownVerifierTitle,
-        hideFrontFaceDetails
+        hideFrontFaceDetails,
+        onVerifierClick
       }
     );
   }
@@ -1264,7 +1316,8 @@ const VCDisplayCard2 = ({
         customLinkedCredentialsComponent,
         customBodyContentSlot,
         unknownVerifierTitle,
-        hideFrontFaceDetails
+        hideFrontFaceDetails,
+        onVerifierClick
       }
     );
   } else if (((_f = credential == null ? void 0 : credential.display) == null ? void 0 : _f.displayType) === "id" || categoryType === "ID") {
@@ -1294,7 +1347,8 @@ const VCDisplayCard2 = ({
         customIDDescription,
         hideGradientBackground,
         customLinkedCredentialsComponent,
-        unknownVerifierTitle
+        unknownVerifierTitle,
+        onVerifierClick
       }
     ));
   }
@@ -1391,7 +1445,8 @@ const VCDisplayCard2 = ({
         imageUrl,
         knownDIDRegistry,
         customBodyContentSlot,
-        unknownVerifierTitle
+        unknownVerifierTitle,
+        onVerifierClick
       }
     ), !isFront && /* @__PURE__ */ React.createElement(
       VC2BackFace,
@@ -1421,7 +1476,7 @@ const VCDisplayCard2 = ({
       "button",
       {
         type: "button",
-        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
+        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[24px] py-[8px] rounded-[40px] text-[16px] font-poppins font-medium leading-normal mt-[40px] w-fit select-none",
         onClick: () => setIsFront(!isFront)
       },
       "Details"
@@ -1429,7 +1484,7 @@ const VCDisplayCard2 = ({
       "button",
       {
         type: "button",
-        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[30px] py-[8px] rounded-[40px] text-[28px] tracking-[0.75px] uppercase leading-[28px] mt-[40px] w-fit select-none",
+        className: "vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[24px] py-[8px] rounded-[40px] text-[16px] font-poppins font-medium leading-normal mt-[40px] w-fit select-none",
         onClick: () => setIsFront(!isFront)
       },
       /* @__PURE__ */ React.createElement("span", { className: "flex gap-[10px] items-center" }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")
@@ -1462,4 +1517,4 @@ const VCDisplayCard2 = ({
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-f0bf0f87.js.map
+//# sourceMappingURL=VCDisplayCard2-5003e0c8.js.map