@learncard/react 2.6.7 → 2.6.9

package/dist/esm/Lightbox-de99baca.js

@@ -0,0 +1,53 @@
+import React, { useCallback, createRef } from 'react';
+import { createPortal } from 'react-dom';
+
+const Lightbox = ({ items, currentUrl, setCurrentUrl }) => {
+  const currentItem = items.find((item) => item.url === currentUrl);
+  useCallback(() => {
+    const currentIndex = items.findIndex((item) => item.url === currentUrl);
+    const nextItem = items.at((currentIndex + 1) % items.length);
+    if (nextItem) {
+      setCurrentUrl(nextItem.url);
+    }
+  }, [currentUrl]);
+  useCallback(() => {
+    const currentIndex = items.findIndex((item) => item.url === currentUrl);
+    const previousItem = items.at((currentIndex - 1) % items.length);
+    if (previousItem) {
+      setCurrentUrl(previousItem.url);
+    }
+  }, [currentUrl]);
+  if (!currentUrl || !currentItem) {
+    return null;
+  }
+  const innerRef = createRef();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, createPortal(
+    /* @__PURE__ */ React.createElement("div", {
+      className: "absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]",
+      onClick: (e) => {
+        if (e.target !== innerRef.current) {
+          setCurrentUrl(void 0);
+        }
+      },
+      tabIndex: -1,
+      onKeyDown: (e) => {
+        return;
+      }
+    }, currentItem.type === "photo" && /* @__PURE__ */ React.createElement("img", {
+      className: "cursor-pointer",
+      src: currentUrl,
+      onClick: () => {
+        window.open(currentUrl, "_blank");
+      },
+      ref: innerRef
+    }), currentItem.type === "video" && currentUrl.includes("youtube.com") && /* @__PURE__ */ React.createElement("iframe", {
+      width: "560",
+      height: "315",
+      src: currentUrl.replace("watch?v=", "embed/")
+    })),
+    document.body
+  ));
+};
+
+export { Lightbox as L };
+//# sourceMappingURL=Lightbox-de99baca.js.map

package/dist/esm/Lightbox-de99baca.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Lightbox-de99baca.js","sources":["../../src/components/Lightbox/Lightbox.tsx"],"sourcesContent":["import React, { createRef, useCallback } from 'react';\nimport { createPortal } from 'react-dom';\n\nexport type LightboxItemType = 'photo' | 'video';\n\nexport type LightboxItem = {\n    url: string;\n    type: LightboxItemType;\n};\n\nexport type LightboxImage = LightboxItem & {\n    type: 'photo';\n    alt?: string;\n};\n\nexport type LightboxVideo = LightboxItem & {\n    type: 'video';\n};\n\nexport type LightboxProps = {\n    items: LightboxItem[];\n    currentUrl: string | undefined;\n    setCurrentUrl: (url: string | undefined) => void;\n};\n\nexport const Lightbox: React.FC<LightboxProps> = ({ items, currentUrl, setCurrentUrl }) => {\n    const currentItem = items.find(item => item.url === currentUrl);\n    const goToNextItem = useCallback(() => {\n        const currentIndex = items.findIndex(item => item.url === currentUrl);\n        const nextItem = items.at((currentIndex + 1) % items.length);\n\n        if (nextItem) {\n            setCurrentUrl(nextItem.url);\n        }\n    }, [currentUrl]);\n    const goToPreviousItem = useCallback(() => {\n        const currentIndex = items.findIndex(item => item.url === currentUrl);\n        const previousItem = items.at((currentIndex - 1) % items.length);\n\n        if (previousItem) {\n            setCurrentUrl(previousItem.url);\n        }\n    }, [currentUrl]);\n\n    if (!currentUrl || !currentItem) {\n        return null;\n    }\n\n    const innerRef = createRef<HTMLImageElement>();\n\n    return (\n        <>\n            {createPortal(\n                <div\n                    className=\"absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]\"\n                    onClick={e => {\n                        if (e.target !== innerRef.current) {\n                            setCurrentUrl(undefined);\n                        }\n                    }}\n                    tabIndex={-1}\n                    onKeyDown={e => {\n                        return; // This doesn't trigger for some reason, so it's disabled for now.\n                        if (e.key === 'Escape') {\n                            setCurrentUrl(undefined);\n                        }\n\n                        if (e.key === 'ArrowRight') {\n                            console.log('next');\n                            goToNextItem();\n                        }\n\n                        if (e.key === 'ArrowLeft') {\n                            console.log('prev');\n                            goToPreviousItem();\n                        }\n                    }}\n                >\n                    {currentItem.type === 'photo' && (\n                        <img\n                            className=\"cursor-pointer\"\n                            src={currentUrl}\n                            onClick={() => {\n                                window.open(currentUrl, '_blank');\n                            }}\n                            ref={innerRef}\n                        />\n                    )}\n                    {currentItem.type === 'video' && currentUrl.includes('youtube.com') && (\n                        <iframe\n                            width=\"560\"\n                            height=\"315\"\n                            src={currentUrl.replace('watch?v=', 'embed/')}\n                        />\n                    )}\n                </div>,\n                document.body\n            )}\n        </>\n    );\n};\n"],"names":[],"mappings":";;;AAyBO,MAAM,WAAoC,CAAC,EAAE,KAAO,EAAA,UAAA,EAAY,eAAoB,KAAA;AACvF,EAAA,MAAM,cAAc,KAAM,CAAA,IAAA,CAAK,CAAQ,IAAA,KAAA,IAAA,CAAK,QAAQ,UAAU,CAAA,CAAA;AAC9D,EAAqB,YAAY,MAAM;AACnC,IAAA,MAAM,eAAe,KAAM,CAAA,SAAA,CAAU,CAAQ,IAAA,KAAA,IAAA,CAAK,QAAQ,UAAU,CAAA,CAAA;AACpE,IAAA,MAAM,WAAW,KAAM,CAAA,EAAA,CAAA,CAAI,YAAe,GAAA,CAAA,IAAK,MAAM,MAAM,CAAA,CAAA;AAE3D,IAAA,IAAI,QAAU,EAAA;AACV,MAAA,aAAA,CAAc,SAAS,GAAG,CAAA,CAAA;AAAA,KAC9B;AAAA,GACJ,EAAG,CAAC,UAAU,CAAC,EAAA;AACf,EAAyB,YAAY,MAAM;AACvC,IAAA,MAAM,eAAe,KAAM,CAAA,SAAA,CAAU,CAAQ,IAAA,KAAA,IAAA,CAAK,QAAQ,UAAU,CAAA,CAAA;AACpE,IAAA,MAAM,eAAe,KAAM,CAAA,EAAA,CAAA,CAAI,YAAe,GAAA,CAAA,IAAK,MAAM,MAAM,CAAA,CAAA;AAE/D,IAAA,IAAI,YAAc,EAAA;AACd,MAAA,aAAA,CAAc,aAAa,GAAG,CAAA,CAAA;AAAA,KAClC;AAAA,GACJ,EAAG,CAAC,UAAU,CAAC,EAAA;AAEf,EAAI,IAAA,CAAC,UAAc,IAAA,CAAC,WAAa,EAAA;AAC7B,IAAO,OAAA,IAAA,CAAA;AAAA,GACX;AAEA,EAAA,MAAM,WAAW,SAA4B,EAAA,CAAA;AAE7C,EAAA,uBAES,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,YAAA;AAAA,oBACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACG,SAAU,EAAA,qHAAA;AAAA,MACV,SAAS,CAAK,CAAA,KAAA;AACV,QAAI,IAAA,CAAA,CAAE,MAAW,KAAA,QAAA,CAAS,OAAS,EAAA;AAC/B,UAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,SAC3B;AAAA,OACJ;AAAA,MACA,QAAU,EAAA,CAAA,CAAA;AAAA,MACV,WAAW,CAAK,CAAA,KAAA;AACZ,QAAA,OAAA;AAaA,OACJ;AAAA,KAEC,EAAA,WAAA,CAAY,IAAS,KAAA,OAAA,oBACjB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,MACG,SAAU,EAAA,gBAAA;AAAA,MACV,GAAK,EAAA,UAAA;AAAA,MACL,SAAS,MAAM;AACX,QAAO,MAAA,CAAA,IAAA,CAAK,YAAY,QAAQ,CAAA,CAAA;AAAA,OACpC;AAAA,MACA,GAAK,EAAA,QAAA;AAAA,KACT,CAAA,EAEH,YAAY,IAAS,KAAA,OAAA,IAAW,WAAW,QAAS,CAAA,aAAa,qBAC7D,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MACG,KAAM,EAAA,KAAA;AAAA,MACN,MAAO,EAAA,KAAA;AAAA,MACP,GAAK,EAAA,UAAA,CAAW,OAAQ,CAAA,UAAA,EAAY,QAAQ,CAAA;AAAA,KAChD,CAER,CAAA;AAAA,IACA,QAAS,CAAA,IAAA;AAAA,GAEjB,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{VCCard-d7e4f9e8.js → VCCard-67827b2a.js}

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { initLearnCard } from '@learncard/init';
-import { V as VCDisplayCard } from './VCDisplayCard-3c332d86.js';
-import { V as VCDisplayCard2 } from './VCDisplayCard2-553a4124.js';
+import { V as VCDisplayCard } from './VCDisplayCard-45555392.js';
+import { V as VCDisplayCard2 } from './VCDisplayCard2-081f4ffa.js';
 
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
@@ -70,4 +70,4 @@ const VCCard = ({
 };
 
 export { VCCard as V };
-//# sourceMappingURL=VCCard-d7e4f9e8.js.map
+//# sourceMappingURL=VCCard-67827b2a.js.map

package/dist/esm/{VCCard-d7e4f9e8.js.map → VCCard-67827b2a.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCCard-d7e4f9e8.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    MediaMetadata,\n    VideoMetadata,\n    CredentialIconType,\n} from '../VCDisplayCard2';\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-67827b2a.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    MediaMetadata,\n    VideoMetadata,\n    CredentialIconType,\n} from '../VCDisplayCard2';\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-ba831d15.js → VCDisplayBackFace-4c132537.js}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { b as VCVerificationCheckWithText } from './VCVerificationCheck-80249524.js';
-import { a as VCVerificationPill } from './VCVerificationPill-2552e3ff.js';
+import { a as VCVerificationPill } from './VCVerificationPill-f4734545.js';
 import FlipArrowRight from './ArrowArcRight.svg';
-import { g as getNameFromProfile } from './credential.helpers-fc5676e9.js';
+import { g as getNameFromProfile } from './credential.helpers-3572f72c.js';
 
 const VCDisplayBackFace = ({
   issuer,
@@ -77,4 +77,4 @@ const VCDisplayBackFace = ({
 };
 
 export { VCDisplayBackFace as V };
-//# sourceMappingURL=VCDisplayBackFace-ba831d15.js.map
+//# sourceMappingURL=VCDisplayBackFace-4c132537.js.map

package/dist/esm/{VCDisplayBackFace-ba831d15.js.map → VCDisplayBackFace-4c132537.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCDisplayBackFace-ba831d15.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":";;;;;;AAOO,MAAM,oBAAkD,CAAC;AAAA,EAC5D,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,SAAY,GAAA,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,eAAe,EAAC;AAAA,EAChB,WAAA;AAAA,EACA,wBAAA;AACJ,CAAM,KAAA;AAfN,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAgBI,EAAM,MAAA,eAAA,GAAA,CAAkB,EAAmB,GAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,WAAA,KAAnB,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,CAAA;AACxD,EAAA,MAAM,YAAe,GAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAmB,WAAnB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAgC,aAAhC,IAA0C,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAA,CAAA;AAC/D,EAAA,MAAM,SAAY,GAAA,OAAO,MAAW,KAAA,QAAA,GAAW,OAAO,GAAM,GAAA,EAAA,CAAA;AAC5D,EAAM,MAAA,UAAA,GAAa,kBAAmB,CAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAU,EAAE,CAAA,CAAA;AAClD,EAAM,MAAA,cAAA,6EAEG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,YAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAG,SAAU,EAAA,iGAAA;AAAA,GAAkG,EAAA,aAEhH,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,gFAAA;AAAA,GACR,EAAA,eACL,CACJ,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,sBAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAG,SAAU,EAAA,kGAAA;AAAA,GAAmG,EAAA,UAEjH,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,gFAAA;AAAA,GACR,EAAA,YACL,CACJ,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,uEAAA;AAAA,GAAA,kBACV,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAG,SAAU,EAAA,iGAAA;AAAA,GAAkG,EAAA,QAEhH,mBACC,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,kHAAA;AAAA,GAAA,EACR,UACL,CACJ,CAEC,EAAA,SAAA,oBACI,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AAAA,IAAE,SAAU,EAAA,+DAAA;AAAA,GAAA,EACR,SACL,CAER,CAAA,CAAA;AAGJ,EAAM,MAAA,aAAA,GAAgB,2BAA2B,wBAA2B,GAAA,cAAA,CAAA;AAE5E,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,WAAW,CAAoO,iOAAA,EAAA,SAAA,CAAA,CAAA;AAAA,GAAA,kBAE9O,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,uHAAA;AAAA,GAAwH,mBAC1I,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,oHAAA;AAAA,GAAA,kBACd,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,6DAAA;AAAA,GAAA,kBACd,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACG,SAAU,EAAA,6EAAA;AAAA,IACV,aAAY,EAAA,gEAAA;AAAA,GACf,EAAA,oBAED,CACJ,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,sEAAA;AAAA,GACd,EAAA,aACL,mBAEC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAU,EAAA,aAAA;AAAA,GAAc,mBAE5B,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACG,OAAS,EAAA,WAAA;AAAA,IACT,SAAU,EAAA,oGAAA;AAAA,GAAA,kBAET,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAU,EAAA,qBAAA;AAAA,GAAA,kBACX,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IACG,SAAU,EAAA,gCAAA;AAAA,IACV,MAAK,EAAkB,GAAA,cAAA,KAAA,IAAA,GAAA,EAAA,GAAA,EAAA;AAAA,IACvB,GAAI,EAAA,WAAA;AAAA,GACR,CACJ,CACJ,CAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,SAAU,EAAA,uGAAA;AAAA,GAAA,kBACd,KAAA,CAAA,aAAA,CAAA,2BAAA,EAAA;AAAA,IAA4B,OAAA;AAAA,GAAkB,mBAC9C,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EACI,YAAa,CAAA,GAAA,CAAI,0BACb,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IACG,KAAK,IAAK,CAAA,KAAA;AAAA,IACV,QAAQ,IAAK,CAAA,MAAA;AAAA,IACb,SAAS,IAAK,CAAA,OAAA;AAAA,IACd,SAAS,IAAK,CAAA,OAAA;AAAA,GAClB,CACH,CACL,CACJ,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}
+{"version":3,"file":"VCDisplayBackFace-4c132537.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-3c332d86.js → VCDisplayCard-45555392.js}

@@ -3,8 +3,8 @@ import { F as FlippyCard } from './FlippyCard-a2de5cf1.js';
 import FatArrow from './icon.green.fat-arrow.png';
 import DefaultFace from './default-face.jpeg';
 import { b as VCVerificationCheckWithText } from './VCVerificationCheck-80249524.js';
-import { g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-fc5676e9.js';
-import { V as VCDisplayBackFace } from './VCDisplayBackFace-ba831d15.js';
+import { g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-3572f72c.js';
+import { V as VCDisplayBackFace } from './VCDisplayBackFace-4c132537.js';
 
 const VCDisplayFrontFace = ({
   title,
@@ -180,4 +180,4 @@ const VCDisplayCard = ({
 };
 
 export { VCDisplayCard as V };
-//# sourceMappingURL=VCDisplayCard-3c332d86.js.map
+//# sourceMappingURL=VCDisplayCard-45555392.js.map

package/dist/esm/{VCDisplayCard-3c332d86.js.map → VCDisplayCard-45555392.js.map}

@@ -1 +1 @@
-{"version":3,"file":"VCDisplayCard-3c332d86.js","sources":["../../src/components/VCDisplayFrontFace/VCDisplayFrontFace.tsx","../../src/components/VCDisplayCard/VCDisplayCard.tsx"],"sourcesContent":["import React from 'react';\nimport { VCDisplayCardProps } from '../../types';\nimport FatArrow from '../../assets/images/icon.green.fat-arrow.png';\nimport FlipArrowRight from '../../assets/images/ArrowArcRight.svg';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport { getImageFromProfile, getNameFromProfile } from '../../helpers/credential.helpers';\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    const issuerNameAbr = issuerName?.slice(0, 1) ?? '';\n\n    let issueeImageEl: React.ReactNode | null = null;\n    const issuerImgExists = issuerImage && issuerImage !== '';\n    const issueeImgExists = issueeImage && issueeImage !== '';\n    if (issueeImgExists) {\n        issueeImageEl = (\n            <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\">\n                <img\n                    className=\"h-full w-full object-cover\"\n                    src={issueeImage || DefaultFace}\n                    alt=\"Issuee image\"\n                />\n            </div>\n        );\n    } else if (!issueeImgExists && subjectImageComponent) {\n        issueeImageEl = subjectImageComponent;\n    }\n\n    let issuerImageEl: React.ReactNode | null = null;\n\n    if (issuerImgExists) {\n        issuerImageEl = (\n            <img className=\"w-4/6 h-4/6 object-cover\" src={issuerImage} alt=\"Issuer image\" />\n        );\n    } else {\n        issuerImageEl = (\n            <div className=\"flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl\">\n                {issuerNameAbr}\n            </div>\n        );\n    }\n\n    if (issuerImageComponent) {\n        issuerImageEl = issuerImageComponent;\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-45555392.js","sources":["../../src/components/VCDisplayFrontFace/VCDisplayFrontFace.tsx","../../src/components/VCDisplayCard/VCDisplayCard.tsx"],"sourcesContent":["import React from 'react';\nimport { VCDisplayCardProps } from '../../types';\nimport FatArrow from '../../assets/images/icon.green.fat-arrow.png';\nimport FlipArrowRight from '../../assets/images/ArrowArcRight.svg';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport { getImageFromProfile, getNameFromProfile } from '../../helpers/credential.helpers';\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    const issuerNameAbr = issuerName?.slice(0, 1) ?? '';\n\n    let issueeImageEl: React.ReactNode | null = null;\n    const issuerImgExists = issuerImage && issuerImage !== '';\n    const issueeImgExists = issueeImage && issueeImage !== '';\n    if (issueeImgExists) {\n        issueeImageEl = (\n            <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\">\n                <img\n                    className=\"h-full w-full object-cover\"\n                    src={issueeImage || DefaultFace}\n                    alt=\"Issuee image\"\n                />\n            </div>\n        );\n    } else if (!issueeImgExists && subjectImageComponent) {\n        issueeImageEl = subjectImageComponent;\n    }\n\n    let issuerImageEl: React.ReactNode | null = null;\n\n    if (issuerImgExists) {\n        issuerImageEl = (\n            <img className=\"w-4/6 h-4/6 object-cover\" src={issuerImage} alt=\"Issuer image\" />\n        );\n    } else {\n        issuerImageEl = (\n            <div className=\"flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl\">\n                {issuerNameAbr}\n            </div>\n        );\n    }\n\n    if (issuerImageComponent) {\n        issuerImageEl = issuerImageComponent;\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-553a4124.js → VCDisplayCard2-081f4ffa.js}

@@ -1,9 +1,10 @@
 import React, { useRef, useLayoutEffect, useState, useEffect } from 'react';
 import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
 import DefaultFace from './default-face.jpeg';
-import { c as getColorForVerificationStatus, f as format, g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-fc5676e9.js';
+import { c as getColorForVerificationStatus, f as format, g as getNameFromProfile, a as getImageFromProfile, b as getInfoFromCredential } from './credential.helpers-3572f72c.js';
 import './index-e1f279c6.js';
-import { V as VerificationStatusEnum } from './types.esm-cc97ca0c.js';
+import { L as Lightbox } from './Lightbox-de99baca.js';
+import { V as VerificationStatusEnum } from './types.esm-d135a91a.js';
 import { A as AwardRibbon } from './AwardRibbon-3e682281.js';
 import { a as LCCategoryEnum } from './index-7103ad3c.js';
 
@@ -428,7 +429,8 @@ const MediaAttachmentsBox = ({
   attachments,
   getFileMetadata = defaultGetFileMetadata,
   getVideoMetadata = defaultGetVideoMetadata,
-  onMediaAttachmentClick
+  onMediaAttachmentClick,
+  enableLightbox = false
 }) => {
   const [documentMetadata, setDocumentMetadata] = useState({});
   const [videoMetadata, setVideoMetadata] = useState({});
@@ -465,13 +467,27 @@ const MediaAttachmentsBox = ({
     const videos = attachments.filter((a) => a.type === "video");
     getMetadata([...documentsAndLinks, ...videos]);
   }, []);
+  const [currentLightboxUrl, setCurrentLightboxUrl] = useState(void 0);
+  const lightboxItems = mediaAttachments.filter(
+    (a) => a.type === "photo" || a.type === "video"
+  );
+  const handleMediaAttachmentClick = (url, type) => {
+    if (type === "photo" || type === "video") {
+      setCurrentLightboxUrl(url);
+    }
+    onMediaAttachmentClick == null ? void 0 : onMediaAttachmentClick(url, type);
+  };
   return /* @__PURE__ */ React.createElement("div", {
     className: "media-attachments-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full"
   }, /* @__PURE__ */ React.createElement("h3", {
     className: "text-[20px] leading-[20px] text-grayscale-900"
   }, "Media Attachments"), mediaAttachments.length > 0 && /* @__PURE__ */ React.createElement("div", {
     className: "flex gap-[5px] justify-between flex-wrap w-full"
-  }, mediaAttachments.map((media, index) => {
+  }, enableLightbox && /* @__PURE__ */ React.createElement(Lightbox, {
+    items: lightboxItems,
+    currentUrl: currentLightboxUrl,
+    setCurrentUrl: setCurrentLightboxUrl
+  }), mediaAttachments.map((media, index) => {
     var _a, _b;
     let innerContent;
     let title = media.title;
@@ -481,7 +497,7 @@ const MediaAttachmentsBox = ({
       const baseUrl = getBaseUrl(media.url);
       const iconTop = title || baseUrl;
       innerContent = /* @__PURE__ */ React.createElement("div", {
-        className: "absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600",
+        className: "absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px]",
         style: {
           backgroundImage: (metadata == null ? void 0 : metadata.imageUrl) ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${(_b = metadata == null ? void 0 : metadata.imageUrl) != null ? _b : ""})` : void 0
         }
@@ -498,19 +514,21 @@ const MediaAttachmentsBox = ({
         className: "line-clamp-2"
       }, title));
     } else {
-      innerContent = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("img", {
-        className: "absolute top-0 left-0 right-0 bottom-0",
+      innerContent = /* @__PURE__ */ React.createElement("div", {
+        className: "absolute top-0 left-0 right-0 bottom-0 h-min"
+      }, /* @__PURE__ */ React.createElement("img", {
+        className: "rounded-[15px]",
         src: media.url
       }), /* @__PURE__ */ React.createElement(Camera, {
-        className: "absolute bottom-[10px] left-[10px] z-10"
+        className: "relative bottom-[30px] left-[10px] z-10"
       }));
     }
-    const className = `media-attachment ${media.type} w-[49%] pt-[49%] rounded-[15px] overflow-hidden relative`;
-    if (onMediaAttachmentClick) {
+    const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
+    if (onMediaAttachmentClick || enableLightbox) {
       return /* @__PURE__ */ React.createElement("button", {
         key: index,
         className,
-        onClick: () => onMediaAttachmentClick(media.url)
+        onClick: () => handleMediaAttachmentClick(media.url, media.type)
       }, innerContent);
     }
     return /* @__PURE__ */ React.createElement("div", {
@@ -549,7 +567,7 @@ const MediaAttachmentsBox = ({
       return /* @__PURE__ */ React.createElement("button", {
         key: index,
         className,
-        onClick: () => onMediaAttachmentClick(docOrLink.url)
+        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
       }, innerContent);
     }
     return /* @__PURE__ */ React.createElement("div", {
@@ -715,7 +733,8 @@ const VC2BackFace = ({
   issueHistory,
   showBackButton,
   showFrontFace,
-  customIssueHistoryComponent
+  customIssueHistoryComponent,
+  enableLightbox
 }) => {
   var _a;
   const expiration = credential.expirationDate ? format(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
@@ -750,7 +769,8 @@ const VC2BackFace = ({
     attachments: credential.attachments,
     getFileMetadata,
     getVideoMetadata,
-    onMediaAttachmentClick
+    onMediaAttachmentClick,
+    enableLightbox
   }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, {
     verificationItems
   }));
@@ -881,7 +901,8 @@ const VCDisplayCard2 = ({
   customIssueHistoryComponent,
   issueHistory,
   titleOverride,
-  showBackButton = true
+  showBackButton = true,
+  enableLightbox
 }) => {
   var _a, _b, _c, _d, _e;
   const {
@@ -977,7 +998,8 @@ const VCDisplayCard2 = ({
     onMediaAttachmentClick,
     showBackButton,
     showFrontFace: () => setIsFront(true),
-    customIssueHistoryComponent
+    customIssueHistoryComponent,
+    enableLightbox
   }), /* @__PURE__ */ React.createElement("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",
@@ -1007,4 +1029,4 @@ const VCDisplayCard2 = ({
 };
 
 export { VCDisplayCard2 as V };
-//# sourceMappingURL=VCDisplayCard2-553a4124.js.map
+//# sourceMappingURL=VCDisplayCard2-081f4ffa.js.map