@learncard/react 2.8.61 → 2.9.2

package/dist/esm/{VCDisplayCard2-415128f5.js → VCDisplayCard2-fb8abe89.js}

@@ -1,39 +1,50 @@
 import React, { useRef, useEffect, useState, createContext, Component, Children, cloneElement, useLayoutEffect } from 'react';
-import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-80249524.js';
-import { U as UserProfilePicture } from './UserProfilePicture-ecc82a6c.js';
-import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-5731a09d.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, t as truncateWithEllipsis, V as VERIFIER_STATES$1, a as VerifierStateBadgeAndText, P as PersonBadge, i as VerifiedBadge, U as UnknownVerifierBadge, j as RedFlag } from './VerifierStateBadgeAndText-151db666.js';
-import './index-1fa04a2d.js';
-import { L as Lightbox, X } from './Lightbox-2ae83d79.js';
-import { V as VerificationStatusEnum } from './types.esm-00eeb9f6.js';
-import { A as AlignmentsBox, a as CertificateDisplayCard } from './CertificateDisplayCard-d2a0d0e3.js';
-import { I as IDIcon, Q as QRCodeIcon, A as AwardRibbon } from './QRCodeIcon-e9569804.js';
+import { a as VCVerificationCheckWithSpinner } from './VCVerificationCheck-8b8b7a76.js';
+import { U as UserProfilePicture } from './UserProfilePicture-7b950437.js';
+import { a as getColorForVerificationStatus, j as format$1, h as getNameFromProfile, i as getImageFromProfile, b as getInfoFromCredential, k as getCategoryColor, g as getTotalCountOfSkills, c as categorizeSkills } from './credential.helpers-1b1ff55e.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, t as truncateWithEllipsis, V as VERIFIER_STATES$1, a as VerifierStateBadgeAndText, P as PersonBadge, i as VerifiedBadge, U as UnknownVerifierBadge, j as RedFlag } from './VerifierStateBadgeAndText-490c08dc.js';
+import './index-eae3ca64.js';
+import { L as Lightbox, X } from './Lightbox-f0338a0c.js';
+import { V as VerificationStatusEnum } from './types.esm-8798df50.js';
+import { A as AlignmentsBox, b as CertificateDisplayCard } from './CertificateDisplayCard-0ceeb71a.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-1fb12c2e.js';
+import { P as PuzzlePiece } from './PuzzlePiece-a3d9cc62.js';
 import IDSleeve from './id-sleeve.png';
-import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-bc462990.js';
+import { a as MeritBadgeDisplayCard } from './MeritBadgeDisplayCard-4b8fe8e4.js';
 
 const RoundedX = ({ className = "" }) => {
-  return /* @__PURE__ */ React.createElement("svg", {
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: "M18.75 5.25L5.25 18.75",
-    stroke: "#18224E",
-    strokeWidth: "4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: "M18.75 18.75L5.25 5.25",
-    stroke: "#18224E",
-    strokeWidth: "4",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M18.75 5.25L5.25 18.75",
+        stroke: "#18224E",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M18.75 18.75L5.25 5.25",
+        stroke: "#18224E",
+        strokeWidth: "4",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
 };
 
 const FitText = ({
@@ -85,27 +96,38 @@ const FitText = ({
       }
     };
   }, [text]);
-  return /* @__PURE__ */ React.createElement("div", {
-    style: { width },
-    className: `text-center ${className}`
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: `text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`,
-    ref: textRef
-  }, text));
+  return /* @__PURE__ */ React.createElement("div", { style: { width }, className: `text-center ${className}` }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`,
+      ref: textRef
+    },
+    text
+  ));
 };
 
 const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
   const bgColorWithOpacity = `${backgroundColor}1F`;
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
-    style: { backgroundColor: bgColorWithOpacity }
-  }, text, " ", /* @__PURE__ */ React.createElement("button", {
-    onClick: (e) => {
-      e.stopPropagation();
-      handleClose();
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
+      style: { backgroundColor: bgColorWithOpacity }
     },
-    className: "text-indigo-500 font-[700] select-none"
-  }, "Close"));
+    text,
+    " ",
+    /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        onClick: (e) => {
+          e.stopPropagation();
+          handleClose();
+        },
+        className: "text-indigo-500 font-[700] select-none"
+      },
+      "Close"
+    )
+  );
 };
 
 const IssueHistoryBox = ({
@@ -113,28 +135,24 @@ const IssueHistoryBox = ({
   customIssueHistoryComponent
 }) => {
   let renderIssueHistory = issueHistory == null ? void 0 : issueHistory.map((issueItem) => {
-    return /* @__PURE__ */ React.createElement("div", {
-      className: "flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full",
-      key: issueItem == null ? void 0 : issueItem.id
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden"
-    }, /* @__PURE__ */ React.createElement(UserProfilePicture, {
-      customContainerClass: `h-full w-full object-cover select-none text-xl ${!(issueItem == null ? void 0 : issueItem.thumb) ? "pt-[2px]" : ""}`,
-      user: { image: issueItem == null ? void 0 : issueItem.thumb, name: issueItem == null ? void 0 : issueItem.name },
-      alt: "profile"
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: "ml-[9px] flex flex-col justify-center"
-    }, /* @__PURE__ */ React.createElement("p", {
-      className: "issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] "
-    }, issueItem == null ? void 0 : issueItem.name), /* @__PURE__ */ React.createElement("p", {
-      className: "issue-item-date font-montserrat  text-[12px] text-grayscale-600 "
-    }, issueItem == null ? void 0 : issueItem.date)));
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full",
+        key: issueItem == null ? void 0 : issueItem.id
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
+        UserProfilePicture,
+        {
+          customContainerClass: `h-full w-full object-cover select-none text-xl ${!(issueItem == null ? void 0 : issueItem.thumb) ? "pt-[2px]" : ""}`,
+          user: { image: issueItem == null ? void 0 : issueItem.thumb, name: issueItem == null ? void 0 : issueItem.name },
+          alt: "profile"
+        }
+      )),
+      /* @__PURE__ */ React.createElement("div", { className: "ml-[9px] flex flex-col justify-center" }, /* @__PURE__ */ React.createElement("p", { className: "issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] " }, issueItem == null ? void 0 : issueItem.name), /* @__PURE__ */ React.createElement("p", { className: "issue-item-date font-montserrat  text-[12px] text-grayscale-600 " }, issueItem == null ? void 0 : issueItem.date))
+    );
   });
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-[20px] leading-[20px] text-grayscale-900"
-  }, "Issue Log"), !customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent);
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Issue Log"), !customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent);
 };
 
 var __async = (__this, __arguments, generator) => {
@@ -157,19 +175,16 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-const defaultGetFileMetadata = (url) => __async(void 0, null, function* () {
+const defaultGetFileMetadata = (url) => __async(null, null, function* () {
   var _a;
   const isFilestack = url.includes("filestack");
-  if (!isFilestack)
-    return;
+  if (!isFilestack) return;
   const urlParams = (_a = url.split(".com/")[1]) == null ? void 0 : _a.split("/");
-  if (!urlParams)
-    return;
+  if (!urlParams) return;
   const handle = urlParams[urlParams.length - 1];
   let fetchFailed = false;
   const data = yield fetch(`https://cdn.filestackcontent.com/${handle}/metadata`).then((res) => res.json()).catch(() => fetchFailed = true);
-  if (fetchFailed)
-    return;
+  if (fetchFailed) return;
   const fileExtension = data.filename.split(".")[1];
   return {
     fileExtension,
@@ -177,19 +192,18 @@ const defaultGetFileMetadata = (url) => __async(void 0, null, function* () {
     numberOfPages: void 0
   };
 });
-const defaultGetVideoMetadata = (url) => __async(void 0, null, function* () {
+const defaultGetVideoMetadata = (url) => __async(null, null, function* () {
   const isYoutube = url.includes("youtube");
-  if (!isYoutube)
-    return;
+  if (!isYoutube) return;
   const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
   let fetchFailed = false;
   const metadata = yield fetch(metadataUrl).then((res) => res.json()).catch(() => fetchFailed = true);
-  if (fetchFailed)
-    return;
+  if (fetchFailed) return;
   return {
     title: metadata.title,
     imageUrl: metadata.thumbnail_url,
     videoLength: ""
+    // TODO figure out how to get this
   };
 });
 const MediaAttachmentsBox = ({
@@ -216,11 +230,11 @@ const MediaAttachmentsBox = ({
     }
   });
   useEffect(() => {
-    const getMetadata = (attachments2) => __async(void 0, null, function* () {
+    const getMetadata = (attachments2) => __async(null, null, function* () {
       const docMetadata = {};
       const videoMetadata2 = {};
       yield Promise.all(
-        attachments2.map((attachment) => __async(void 0, null, function* () {
+        attachments2.map((attachment) => __async(null, null, function* () {
           if (attachment.type === "document") {
             docMetadata[attachment.url] = yield getFileMetadata(attachment.url);
           } else if (attachment.type === "video") {
@@ -244,17 +258,14 @@ const MediaAttachmentsBox = ({
     }
     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"
-  }, enableLightbox && /* @__PURE__ */ React.createElement(Lightbox, {
-    items: lightboxItems,
-    currentUrl: currentLightboxUrl,
-    setCurrentUrl: setCurrentLightboxUrl
-  }), mediaAttachments.map((media, index) => {
+  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" }, enableLightbox && /* @__PURE__ */ React.createElement(
+    Lightbox,
+    {
+      items: lightboxItems,
+      currentUrl: currentLightboxUrl,
+      setCurrentUrl: setCurrentLightboxUrl
+    }
+  ), mediaAttachments.map((media, index) => {
     var _a, _b;
     let innerContent;
     let title = media.title;
@@ -263,51 +274,46 @@ const MediaAttachmentsBox = ({
       title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
       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 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
-        }
-      }, !(metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, {
-        size: "60",
-        className: "m-auto"
-      }), /* @__PURE__ */ React.createElement("div", {
-        className: `absolute ${iconTop ? "top-[10px]" : "bottom-[10px]"} left-[10px] z-10 flex items-center gap-[5px]`
-      }, (metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, null), (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React.createElement("span", {
-        className: "leading-[23px]"
-      }, metadata.videoLength)), baseUrl && /* @__PURE__ */ React.createElement("span", {
-        className: "font-[600]"
-      }, baseUrl), title && /* @__PURE__ */ React.createElement("span", {
-        className: "line-clamp-2"
-      }, title));
+      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 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
+          }
+        },
+        !(metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, { size: "60", className: "m-auto" }),
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: `absolute ${iconTop ? "top-[10px]" : "bottom-[10px]"} left-[10px] z-10 flex items-center gap-[5px]`
+          },
+          (metadata == null ? void 0 : metadata.imageUrl) && /* @__PURE__ */ React.createElement(VideoIcon, null),
+          (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React.createElement("span", { className: "leading-[23px]" }, metadata.videoLength)
+        ),
+        baseUrl && /* @__PURE__ */ React.createElement("span", { className: "font-[600]" }, baseUrl),
+        title && /* @__PURE__ */ React.createElement("span", { className: "line-clamp-2" }, title)
+      );
     } else {
-      innerContent = /* @__PURE__ */ React.createElement("div", {
-        className: "absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center"
-      }, /* @__PURE__ */ React.createElement("img", {
-        className: "rounded-[15px] object-cover h-full w-full",
-        src: media.url
-      }), /* @__PURE__ */ React.createElement(Camera, {
-        className: "absolute bottom-[10px] left-[10px] z-10"
-      }));
+      innerContent = /* @__PURE__ */ React.createElement("div", { className: "absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center" }, /* @__PURE__ */ React.createElement("img", { className: "rounded-[15px] object-cover h-full w-full", src: media.url }), /* @__PURE__ */ React.createElement(Camera, { className: "absolute bottom-[10px] left-[10px] z-10" }));
     }
     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: (e) => {
-          e.stopPropagation();
-          handleMediaAttachmentClick(media.url, media.type);
-        }
-      }, innerContent);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: index,
+          className,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleMediaAttachmentClick(media.url, media.type);
+          }
+        },
+        innerContent
+      );
     }
-    return /* @__PURE__ */ React.createElement("div", {
-      key: index,
-      className
-    }, innerContent);
-  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React.createElement("div", {
-    className: "w-full flex flex-col gap-[5px]"
-  }, documentsAndLinks.map((docOrLink, index) => {
+    return /* @__PURE__ */ React.createElement("div", { key: index, className }, innerContent);
+  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "w-full flex flex-col gap-[5px]" }, documentsAndLinks.map((docOrLink, index) => {
     var _a;
     const metadata = docOrLink.type === "document" ? documentMetadata[docOrLink.url] : void 0;
     const { fileExtension, sizeInBytes, numberOfPages } = metadata != null ? metadata : {};
@@ -315,46 +321,47 @@ const MediaAttachmentsBox = ({
     if (docOrLink.type === "link") {
       baseUrl = getBaseUrl(docOrLink.url);
     }
-    const innerContent = /* @__PURE__ */ React.createElement("div", {
-      className: "flex flex-col gap-[5px]"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "flex gap-[5px] items-center"
-    }, docOrLink.type === "document" && /* @__PURE__ */ React.createElement(GenericDocumentIcon, {
-      className: "shrink-0"
-    }), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(LinkIcon, {
-      className: "shrink-0"
-    }), /* @__PURE__ */ React.createElement("span", {
-      className: "text-grayscale-900 font-[400]"
-    }, (_a = docOrLink.title) != null ? _a : "No title")), docOrLink.type === "document" && metadata && /* @__PURE__ */ React.createElement("a", {
-      href: docOrLink.url,
-      target: "_blank",
-      rel: "noreferrer",
-      className: "text-grayscale-600 font-[600] px-[5px] hover:underline",
-      onClick: (e) => e.stopPropagation()
-    }, fileExtension && /* @__PURE__ */ React.createElement("span", {
-      className: "uppercase"
-    }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React.createElement("a", {
-      href: docOrLink.url,
-      target: "_blank",
-      rel: "noreferrer",
-      className: "text-indigo-500 font-[600] px-[5px] hover:underline",
-      onClick: (e) => e.stopPropagation()
-    }, baseUrl));
+    const innerContent = /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-[5px] items-center" }, docOrLink.type === "document" && /* @__PURE__ */ React.createElement(GenericDocumentIcon, { className: "shrink-0" }), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(LinkIcon, { className: "shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-grayscale-900 font-[400]" }, (_a = docOrLink.title) != null ? _a : "No title")), docOrLink.type === "document" && metadata && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: docOrLink.url,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "text-grayscale-600 font-[600] px-[5px] hover:underline",
+        onClick: (e) => e.stopPropagation()
+      },
+      fileExtension && /* @__PURE__ */ React.createElement("span", { className: "uppercase" }, fileExtension),
+      fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ",
+      numberOfPages && /* @__PURE__ */ React.createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"),
+      numberOfPages && sizeInBytes && " \u2022 ",
+      sizeInBytes && /* @__PURE__ */ React.createElement("span", null, prettyBytes(sizeInBytes))
+    ), docOrLink.type === "link" && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: docOrLink.url,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "text-indigo-500 font-[600] px-[5px] hover:underline",
+        onClick: (e) => e.stopPropagation()
+      },
+      baseUrl
+    ));
     const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
     if (onMediaAttachmentClick) {
-      return /* @__PURE__ */ React.createElement("button", {
-        key: index,
-        className,
-        onClick: (e) => {
-          e.stopPropagation();
-          handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
-        }
-      }, innerContent);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: index,
+          className,
+          onClick: (e) => {
+            e.stopPropagation();
+            handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+          }
+        },
+        innerContent
+      );
     }
-    return /* @__PURE__ */ React.createElement("div", {
-      key: index,
-      className
-    }, innerContent);
+    return /* @__PURE__ */ React.createElement("div", { key: index, className }, innerContent);
   })));
 };
 
@@ -364,57 +371,74 @@ const RibbonEnd = ({
   height = "64"
 }) => {
   const halfHeight = parseInt(height) / 2;
-  return /* @__PURE__ */ React.createElement("svg", {
-    className,
-    width: "30",
-    height,
-    viewBox: `0 0 30 ${height}`,
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    style: { transform: `scaleX(${side === "left" ? "1" : "-1"})` }
-  }, /* @__PURE__ */ React.createElement("g", {
-    filter: "url(#filter0_d_4620_22659)"
-  }, /* @__PURE__ */ React.createElement("path", {
-    d: `M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`,
-    fill: "white"
-  }), /* @__PURE__ */ React.createElement("path", {
-    d: `M3.08593 2.5H27.5V${height}H3.08593L8.80922 ${halfHeight}L8.91926 30L8.80922 29.4812L3.08593 2.5Z`,
-    stroke: "#EEF2FF",
-    strokeWidth: "5"
-  })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", {
-    id: "filter0_d_4620_22659",
-    x: "0",
-    y: "0",
-    width: "30",
-    height,
-    filterUnits: "userSpaceOnUse",
-    colorInterpolationFilters: "sRGB"
-  }, /* @__PURE__ */ React.createElement("feFlood", {
-    floodOpacity: "0",
-    result: "BackgroundImageFix"
-  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
-    in: "SourceAlpha",
-    type: "matrix",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
-    result: "hardAlpha"
-  }), /* @__PURE__ */ React.createElement("feOffset", {
-    dy: "4"
-  }), /* @__PURE__ */ React.createElement("feComposite", {
-    in2: "hardAlpha",
-    operator: "out"
-  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
-    type: "matrix",
-    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
-  }), /* @__PURE__ */ React.createElement("feBlend", {
-    mode: "normal",
-    in2: "BackgroundImageFix",
-    result: "effect1_dropShadow_4620_22659"
-  }), /* @__PURE__ */ React.createElement("feBlend", {
-    mode: "normal",
-    in: "SourceGraphic",
-    in2: "effect1_dropShadow_4620_22659",
-    result: "shape"
-  }))));
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      className,
+      width: "30",
+      height,
+      viewBox: `0 0 30 ${height}`,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: { transform: `scaleX(${side === "left" ? "1" : "-1"})` }
+    },
+    /* @__PURE__ */ React.createElement("g", { filter: "url(#filter0_d_4620_22659)" }, /* @__PURE__ */ React.createElement("path", { d: `M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`, fill: "white" }), /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: `M3.08593 2.5H27.5V${height}H3.08593L8.80922 ${halfHeight}L8.91926 30L8.80922 29.4812L3.08593 2.5Z`,
+        stroke: "#EEF2FF",
+        strokeWidth: "5"
+      }
+    )),
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+      "filter",
+      {
+        id: "filter0_d_4620_22659",
+        x: "0",
+        y: "0",
+        width: "30",
+        height,
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB"
+      },
+      /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+      /* @__PURE__ */ React.createElement(
+        "feColorMatrix",
+        {
+          in: "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }
+      ),
+      /* @__PURE__ */ React.createElement("feOffset", { dy: "4" }),
+      /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "out" }),
+      /* @__PURE__ */ React.createElement(
+        "feColorMatrix",
+        {
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "feBlend",
+        {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_4620_22659"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "feBlend",
+        {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_4620_22659",
+          result: "shape"
+        }
+      )
+    ))
+  );
 };
 
 const TruncateTextBox = ({
@@ -432,25 +456,43 @@ const TruncateTextBox = ({
   const truncated = needsTruncate && !showFullText;
   const displayText = truncated ? text.substring(0, truncateThreshold) : text;
   const defaultStyles = "shadow-bottom px-[15px] py-[20px]";
-  return /* @__PURE__ */ React.createElement("div", {
-    className: `${className} ${defaultStyles} bg-white flex flex-col items-start gap-[10px] rounded-[20px] w-full ${containerClassName}`
-  }, headerText && /* @__PURE__ */ React.createElement("h3", {
-    className: `${headerClassName} text-[20px] leading-[20px] text-grayscale-900`
-  }, headerText), /* @__PURE__ */ React.createElement("p", {
-    className: `text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0 ${textClassName}`
-  }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", " ", /* @__PURE__ */ React.createElement("button", {
-    className: "text-indigo-500 font-[700]",
-    onClick: (e) => {
-      e.stopPropagation();
-      setShowFullText(true);
-    }
-  }, "More")), needsTruncate && showFullText && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement("button", {
-    className: "text-indigo-500 font-[700]",
-    onClick: (e) => {
-      e.stopPropagation();
-      setShowFullText(false);
-    }
-  }, "Close"))), children);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${className} ${defaultStyles} bg-white flex flex-col items-start gap-[10px] rounded-[20px] w-full ${containerClassName}`
+    },
+    headerText && /* @__PURE__ */ React.createElement("h3", { className: `${headerClassName} text-[20px] leading-[20px] text-grayscale-900` }, headerText),
+    /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: `text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0 ${textClassName}`
+      },
+      displayText,
+      truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", " ", /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "text-indigo-500 font-[700]",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowFullText(true);
+          }
+        },
+        "More"
+      )),
+      needsTruncate && showFullText && /* @__PURE__ */ React.createElement(React.Fragment, null, " ", /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          className: "text-indigo-500 font-[700]",
+          onClick: (e) => {
+            e.stopPropagation();
+            setShowFullText(false);
+          }
+        },
+        "Close"
+      ))
+    ),
+    children
+  );
 };
 
 /*! @license Rematrix v0.2.2
@@ -646,7 +688,7 @@ const VerificationRow = ({ verification }) => {
       case VerificationStatusEnum.Error:
         return /* @__PURE__ */ React.createElement(ExclamationPoint, null);
       case VerificationStatusEnum.Failed:
-        return /* @__PURE__ */ React.createElement(X, null);
+        return /* @__PURE__ */ React.createElement(X, { className: "w-[15px] h-[15px]" });
     }
   };
   let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
@@ -655,46 +697,50 @@ const VerificationRow = ({ verification }) => {
   }
   primaryText = capitalize(primaryText);
   const infoText = "";
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none",
-    style: { color: statusColor }
-  }, getIcon(), verification.status, infoText ), showInfo && infoText && /* @__PURE__ */ React.createElement(InfoBox, {
-    text: infoText,
-    handleClose: () => setShowInfo(false),
-    backgroundColor: statusColor
-  }), /* @__PURE__ */ React.createElement("span", {
-    className: "font-[400] text-[14px] leading-[21px] text-grayscale-900"
-  }, primaryText));
+  return /* @__PURE__ */ React.createElement("div", { className: "verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0" }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none",
+      style: { color: statusColor }
+    },
+    getIcon(),
+    verification.status,
+    infoText 
+  ), showInfo && infoText && /* @__PURE__ */ React.createElement(
+    InfoBox,
+    {
+      text: infoText,
+      handleClose: () => setShowInfo(false),
+      backgroundColor: statusColor
+    }
+  ), /* @__PURE__ */ React.createElement("span", { className: "font-[400] text-[14px] leading-[21px] text-grayscale-900" }, primaryText));
 };
 
 const VerificationsBox = ({ verificationItems }) => {
   const [showInfo, setShowInfo] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative"
-  }, /* @__PURE__ */ React.createElement("h3", {
-    className: "text-[20px] leading-[20px] text-grayscale-900"
-  }, "Credential Verifications"), /* @__PURE__ */ React.createElement("button", {
-    className: "absolute top-[17px] right-[17px]",
-    onClick: (e) => {
-      e.stopPropagation();
-      setShowInfo(!showInfo);
+  return /* @__PURE__ */ React.createElement("div", { className: "verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[20px] leading-[20px] text-grayscale-900" }, "Credential Verifications"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "absolute top-[17px] right-[17px]",
+      onClick: (e) => {
+        e.stopPropagation();
+        setShowInfo(!showInfo);
+      }
+    },
+    /* @__PURE__ */ React.createElement(InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
+  ), showInfo && /* @__PURE__ */ React.createElement(
+    InfoBox,
+    {
+      text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
+      handleClose: () => setShowInfo(false)
     }
-  }, /* @__PURE__ */ React.createElement(InfoIcon, {
-    color: showInfo ? "#6366F1" : void 0
-  })), showInfo && /* @__PURE__ */ React.createElement(InfoBox, {
-    text: "Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy.",
-    handleClose: () => setShowInfo(false)
-  }), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, {
-    key: index,
-    verification
-  })));
+  ), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, { key: index, verification })));
 };
 
 const VC2BackFace = ({
   credential,
   verificationItems,
+  // convertTagsToSkills = defaultTagsToSkills,
   getFileMetadata,
   getVideoMetadata,
   onMediaAttachmentClick,
@@ -710,58 +756,66 @@ const VC2BackFace = ({
 }) => {
   var _a, _b, _c, _d;
   const expiration = credential.expirationDate ? format$1(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
-  const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(new Date());
+  const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(/* @__PURE__ */ new Date());
   const achievement = "achievement" in credential.credentialSubject ? credential.credentialSubject.achievement : void 0;
   const criteria = (_a = achievement == null ? void 0 : achievement.criteria) == null ? void 0 : _a.narrative;
   const description = achievement == null ? void 0 : achievement.description;
   const alignment = achievement == null ? void 0 : achievement.alignment;
-  return /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px] pb-[25px]"
-  }, showBackButton && /* @__PURE__ */ React.createElement("div", {
-    className: "w-full"
-  }, /* @__PURE__ */ React.createElement("button", {
-    className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
-    onClick: showFrontFace
-  }, /* @__PURE__ */ React.createElement(LeftArrow, {
-    className: "text-white",
-    size: "25"
-  }), "Details")), customDescription && /* @__PURE__ */ React.createElement(TruncateTextBox, {
-    headerText: "About",
-    text: description,
-    className: "description-box"
-  }, customDescription), !customDescription && (description || expiration) && /* @__PURE__ */ React.createElement(TruncateTextBox, {
-    headerText: "About",
-    text: description,
-    className: "description-box"
-  }, expiration && /* @__PURE__ */ React.createElement("p", {
-    className: "text-grayscale-800 font-poppins font-[600] text-[12px] leading-[18px] mb-0"
-  }, "Expire", isExpired ? "d" : "s", " on ", expiration)), customCriteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
-    headerText: "Criteria",
-    text: description,
-    className: "description-box"
-  }, customCriteria), !customCriteria && criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
-    headerText: "Criteria",
-    text: criteria,
-    className: "criteria-box"
-  }), customLinkedCredentialsComponent && customLinkedCredentialsComponent, ((_c = (_b = credential.skills) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, {
-    skills: (_d = credential.skills) != null ? _d : []
-  })), issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && /* @__PURE__ */ React.createElement(IssueHistoryBox, {
-    issueHistory,
-    customIssueHistoryComponent
-  }), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(MediaAttachmentsBox, {
-    attachments: credential.attachments,
-    getFileMetadata,
-    getVideoMetadata,
-    onMediaAttachmentClick,
-    enableLightbox
-  }), alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, {
-    alignment,
-    style: "boost"
-  }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, {
-    verificationItems
-  })));
+  return /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement("section", { className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px] pb-[25px]" }, showBackButton && /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none",
+      onClick: showFrontFace
+    },
+    /* @__PURE__ */ React.createElement(LeftArrow, { className: "text-white", size: "25" }),
+    "Details"
+  )), customDescription && /* @__PURE__ */ React.createElement(
+    TruncateTextBox,
+    {
+      headerText: "About",
+      text: description,
+      className: "description-box"
+    },
+    customDescription
+  ), !customDescription && (description || expiration) && /* @__PURE__ */ React.createElement(
+    TruncateTextBox,
+    {
+      headerText: "About",
+      text: description,
+      className: "description-box"
+    },
+    expiration && /* @__PURE__ */ React.createElement("p", { className: "text-grayscale-800 font-poppins font-[600] text-[12px] leading-[18px] mb-0" }, "Expire", isExpired ? "d" : "s", " on ", expiration)
+  ), customCriteria && /* @__PURE__ */ React.createElement(
+    TruncateTextBox,
+    {
+      headerText: "Criteria",
+      text: description,
+      className: "description-box"
+    },
+    customCriteria
+  ), !customCriteria && criteria && /* @__PURE__ */ React.createElement(
+    TruncateTextBox,
+    {
+      headerText: "Criteria",
+      text: criteria,
+      className: "criteria-box"
+    }
+  ), customLinkedCredentialsComponent && customLinkedCredentialsComponent, ((_c = (_b = credential.skills) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, { skills: (_d = credential.skills) != null ? _d : [] })), issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && /* @__PURE__ */ React.createElement(
+    IssueHistoryBox,
+    {
+      issueHistory,
+      customIssueHistoryComponent
+    }
+  ), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(
+    MediaAttachmentsBox,
+    {
+      attachments: credential.attachments,
+      getFileMetadata,
+      getVideoMetadata,
+      onMediaAttachmentClick,
+      enableLightbox
+    }
+  ), alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, { alignment, style: "boost" }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, { verificationItems })));
 };
 
 const VC2FrontFaceInfo = ({
@@ -786,13 +840,15 @@ const VC2FrontFaceInfo = ({
     uppercaseDate: false
   });
   const getImageElement = (imageUrl2, alt, overrideComponent, bigText) => {
-    if (overrideComponent)
-      return overrideComponent;
-    return /* @__PURE__ */ React.createElement(UserProfilePicture, {
-      user: { image: imageUrl2, name: issueeName },
-      alt,
-      customContainerClass: `h-full w-full ${bigText ? "!text-4xl" : ""}`
-    });
+    if (overrideComponent) return overrideComponent;
+    return /* @__PURE__ */ React.createElement(
+      UserProfilePicture,
+      {
+        user: { image: imageUrl2, name: issueeName },
+        alt,
+        customContainerClass: `h-full w-full ${bigText ? "!text-4xl" : ""}`
+      }
+    );
   };
   const issueeImageEl = getImageElement(
     issueeImage,
@@ -820,53 +876,31 @@ const VC2FrontFaceInfo = ({
       verifierState = VERIFIER_STATES$1.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("img", {
-    className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
-    src: imageUrl
-  }), 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: "text-[27px] flex flex-col text-center leading-[130%] text-grayscale-900 capitalize"
-  }, issueeName, subjectDID && /* @__PURE__ */ React.createElement("span", {
-    className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] m-0 p-0 normal-case"
-  }, 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-montserrat text-[14px] leading-[20px]"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "created-at text-grayscale-700"
-  }, createdAt), /* @__PURE__ */ React.createElement("span", {
-    className: "issued-by text-grayscale-900 font-[500]"
-  }, "by ", /* @__PURE__ */ React.createElement("strong", {
-    className: "font-[700]"
-  }, issuerName))), /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, {
-    verifierState
-  }))), customBodyContentSlot && customBodyContentSlot)));
+  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(
+    "img",
+    {
+      className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
+      src: imageUrl
+    }
+  ), 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: "text-[27px] flex flex-col text-center leading-[130%] text-grayscale-900 capitalize" }, issueeName, subjectDID && /* @__PURE__ */ React.createElement("span", { className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] m-0 p-0 normal-case" }, 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-montserrat text-[14px] leading-[20px]" }, /* @__PURE__ */ React.createElement("span", { className: "created-at text-grayscale-700" }, createdAt), /* @__PURE__ */ React.createElement("span", { className: "issued-by text-grayscale-900 font-[500]" }, "by ", /* @__PURE__ */ React.createElement("strong", { className: "font-[700]" }, issuerName))), /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, { verifierState }))), customBodyContentSlot && customBodyContentSlot)));
 };
 
 const VCDisplayCardCategoryType = ({
   categoryType = LCCategoryEnum.achievement
 }) => {
   const categoryColor = getCategoryColor(categoryType);
-  return /* @__PURE__ */ React.createElement("span", {
-    className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`
-  }, categoryType);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`
+    },
+    categoryType
+  );
 };
 
 const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   const skillsCount = getTotalCountOfSkills(skills);
-  if (skillsCount === 0)
-    return /* @__PURE__ */ React.createElement(React.Fragment, null);
+  if (skillsCount === 0) return /* @__PURE__ */ React.createElement(React.Fragment, null);
   const skillsMap = categorizeSkills(skills);
   const totalSkills = Object.values(skillsMap).reduce(
     (total2, category) => total2 + (category == null ? void 0 : category.length),
@@ -878,17 +912,14 @@ const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   );
   const total = totalSkills + totalSubskills;
   const text = skillsCount === 1 ? "Skill" : "Skills";
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
-    onClick
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
-  }, "+", total, " ", text, " ", /* @__PURE__ */ React.createElement("div", {
-    className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1"
-  }, /* @__PURE__ */ React.createElement(PuzzlePiece, {
-    className: "text-white",
-    fill: "#fff"
-  }))));
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
+      onClick
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold" }, "+", total, " ", text, " ", /* @__PURE__ */ React.createElement("div", { className: "bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1" }, /* @__PURE__ */ React.createElement(PuzzlePiece, { className: "text-white", fill: "#fff" })))
+  );
 };
 
 const VERIFIER_STATES = {
@@ -930,74 +961,34 @@ const VCIDDisplayFrontFace = ({
   const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
   const achievement = "achievement" in (credential == null ? void 0 : credential.credentialSubject) ? (_a = credential == null ? void 0 : credential.credentialSubject) == null ? void 0 : _a.achievement : void 0;
   const description = achievement == null ? void 0 : achievement.description;
-  return /* @__PURE__ */ React.createElement(h, {
-    className: "w-full",
-    flipKey: isFront
-  }, /* @__PURE__ */ React.createElement(v, {
-    flipId: "face"
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: "vc-front-face w-full flex flex-col items-center gap-[15px]"
-  }, /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "face"
-  }, customThumbComponent && customThumbComponent), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "face"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "text-white w-full flex items-center justify-center font-poppins"
-  }, /* @__PURE__ */ React.createElement(IDIcon, {
-    className: "text-white mr-1"
-  }), " ID")), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "face"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "w-full relative"
-  }, !hideQRCode && /* @__PURE__ */ React.createElement("button", {
-    onClick: (e) => {
-      e.stopPropagation();
-      qrCodeOnClick == null ? void 0 : qrCodeOnClick();
+  return /* @__PURE__ */ React.createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React.createElement(v, { flipId: "face" }, /* @__PURE__ */ React.createElement("section", { className: "vc-front-face w-full flex flex-col items-center gap-[15px]" }, /* @__PURE__ */ React.createElement(v, { inverseFlipId: "face" }, customThumbComponent && customThumbComponent), /* @__PURE__ */ React.createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React.createElement("div", { className: "text-white w-full flex items-center justify-center font-poppins" }, /* @__PURE__ */ React.createElement(IDIcon, { className: "text-white mr-1" }), " ID")), /* @__PURE__ */ React.createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React.createElement("div", { className: "w-full relative" }, !hideQRCode && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: (e) => {
+        e.stopPropagation();
+        qrCodeOnClick == null ? void 0 : qrCodeOnClick();
+      },
+      className: "text-grayscale-900 bg-white rounded-full p-[10px] absolute top-[-10px] right-[45%]"
+    },
+    /* @__PURE__ */ React.createElement(QRCodeIcon, { className: "text-grayscale-900 " })
+  ), /* @__PURE__ */ React.createElement("img", { src: IDSleeve, alt: "id-sleeve", className: "w-full object-cover" }))), /* @__PURE__ */ React.createElement(v, { inverseFlipId: "face" }, /* @__PURE__ */ React.createElement("div", { className: "w-full bg-white relative mt-[-70px] px-6 pb-4 pt-4" }, description && !customIDDescription && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    TruncateTextBox,
+    {
+      text: description,
+      className: "description-box",
+      containerClassName: "!p-0 !shadow-none !text-center !w-full",
+      textClassName: "!font-poppins !text-base !text-grayscale-700 !text-center !w-full",
+      truncateThreshold: 204
+    }
+  )), customIDDescription && customIDDescription, isFront && showDetailsBtn && /* @__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-[25px] w-fit select-none",
+      onClick: () => setIsFront(!isFront)
     },
-    className: "text-grayscale-900 bg-white rounded-full p-[10px] absolute top-[-10px] right-[45%]"
-  }, /* @__PURE__ */ React.createElement(QRCodeIcon, {
-    className: "text-grayscale-900 "
-  })), /* @__PURE__ */ React.createElement("img", {
-    src: IDSleeve,
-    alt: "id-sleeve",
-    className: "w-full object-cover"
-  }))), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "face"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "w-full bg-white relative mt-[-70px] px-6 pb-4 pt-4"
-  }, description && !customIDDescription && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TruncateTextBox, {
-    text: description,
-    className: "description-box",
-    containerClassName: "!p-0 !shadow-none !text-center !w-full",
-    textClassName: "!font-poppins !text-base !text-grayscale-700 !text-center !w-full",
-    truncateThreshold: 204
-  })), customIDDescription && customIDDescription, isFront && showDetailsBtn && /* @__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-[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"
-  }, /* @__PURE__ */ React.createElement(VerifiedBadge, {
-    className: "w-[20px] h-[20px]"
-  }), "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.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")))))));
+    "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" }, /* @__PURE__ */ React.createElement(VerifiedBadge, { className: "w-[20px] h-[20px]" }), "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.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 = ({
@@ -1035,46 +1026,53 @@ const VCIDDisplayCard = ({
     backgroundPosition: "center",
     backgroundAttachment: "fixed"
   };
-  return /* @__PURE__ */ React.createElement(h, {
-    className: "w-full",
-    flipKey: isFront
-  }, /* @__PURE__ */ React.createElement(v, {
-    flipId: "card"
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: `vc-display-card font-mouse flex flex-col items-center border-solid border-white rounded-[30px] z-10 max-w-[400px] relative bg-white shadow-3xl ${isFront ? "" : "min-h-[800px]"}`
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] rounded-b-[30px] overflow-hidden",
-    style: backgroundStyle,
-    role: "button",
-    onClick: () => setIsFront(!isFront)
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-content-scroll-container w-full min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[30px]  scrollbar-hide pt-[20px]"
-  }, isFront && /* @__PURE__ */ React.createElement(VCIDDisplayFrontFace, {
-    isFront: _isFront,
-    setIsFront,
-    showDetailsBtn,
-    customThumbComponent,
-    credential,
-    knownDIDRegistry,
-    qrCodeOnClick,
-    hideQRCode,
-    customIDDescription
-  }), !isFront && /* @__PURE__ */ React.createElement(VC2BackFace, {
-    credential,
-    verificationItems,
-    issueHistory,
-    getFileMetadata,
-    getVideoMetadata,
-    onMediaAttachmentClick,
-    showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
-    showFrontFace: () => setIsFront(true),
-    customDescription,
-    customCriteria,
-    customIssueHistoryComponent,
-    enableLightbox,
-    customSkillsComponent,
-    customLinkedCredentialsComponent
-  }))))));
+  return /* @__PURE__ */ React.createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React.createElement(v, { flipId: "card" }, /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      className: `vc-display-card font-mouse flex flex-col items-center border-solid border-white rounded-[30px] z-10 max-w-[400px] relative bg-white shadow-3xl ${isFront ? "" : "min-h-[800px]"}`
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] rounded-b-[30px] overflow-hidden",
+        style: backgroundStyle,
+        role: "button",
+        onClick: () => setIsFront(!isFront)
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "vc-card-content-scroll-container w-full min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[30px]  scrollbar-hide pt-[20px]" }, isFront && /* @__PURE__ */ React.createElement(
+        VCIDDisplayFrontFace,
+        {
+          isFront: _isFront,
+          setIsFront,
+          showDetailsBtn,
+          customThumbComponent,
+          credential,
+          knownDIDRegistry,
+          qrCodeOnClick,
+          hideQRCode,
+          customIDDescription
+        }
+      ), !isFront && /* @__PURE__ */ React.createElement(
+        VC2BackFace,
+        {
+          credential,
+          verificationItems,
+          issueHistory,
+          getFileMetadata,
+          getVideoMetadata,
+          onMediaAttachmentClick,
+          showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+          showFrontFace: () => setIsFront(true),
+          customDescription,
+          customCriteria,
+          customIssueHistoryComponent,
+          enableLightbox,
+          customSkillsComponent,
+          customLinkedCredentialsComponent
+        }
+      ))
+    )
+  )));
 };
 
 const VCDisplayCard2 = ({
@@ -1087,6 +1085,7 @@ const VCDisplayCard2 = ({
   subjectImageComponent,
   issuerImageComponent,
   verificationInProgress = false,
+  // convertTagsToSkills,
   handleXClick,
   getFileMetadata,
   getVideoMetadata,
@@ -1167,225 +1166,257 @@ const VCDisplayCard2 = ({
   };
   const _title = titleOverride || title;
   if (categoryType === LCCategoryEnum.meritBadge || ((_d = credential == null ? void 0 : credential.display) == null ? void 0 : _d.displayType) === "award") {
-    return /* @__PURE__ */ React.createElement(MeritBadgeDisplayCard, {
-      credential,
-      categoryType,
-      issueeOverride: issuee,
-      issuerOverride: issuer,
-      verificationItems,
-      getFileMetadata,
-      getVideoMetadata,
-      onMediaAttachmentClick,
-      enableLightbox,
-      knownDIDRegistry,
-      handleXClick,
-      subjectImageComponent,
-      issuerImageComponent,
-      customBodyCardComponent,
-      hideIssueDate,
-      onDotsClick,
-      isFrontOverride,
-      setIsFrontOverride,
-      hideNavButtons,
-      showBackButton,
-      showDetailsBtn,
-      formattedDisplayType,
-      customLinkedCredentialsComponent,
-      customBodyContentSlot
-    });
+    return /* @__PURE__ */ React.createElement(
+      MeritBadgeDisplayCard,
+      {
+        credential,
+        categoryType,
+        issueeOverride: issuee,
+        issuerOverride: issuer,
+        verificationItems,
+        getFileMetadata,
+        getVideoMetadata,
+        onMediaAttachmentClick,
+        enableLightbox,
+        knownDIDRegistry,
+        handleXClick,
+        subjectImageComponent,
+        issuerImageComponent,
+        customBodyCardComponent,
+        hideIssueDate,
+        onDotsClick,
+        isFrontOverride,
+        setIsFrontOverride,
+        hideNavButtons,
+        showBackButton,
+        showDetailsBtn,
+        formattedDisplayType,
+        customLinkedCredentialsComponent,
+        customBodyContentSlot
+      }
+    );
   }
   if (((_e = credential == null ? void 0 : credential.display) == null ? void 0 : _e.displayType) === "certificate") {
-    return /* @__PURE__ */ React.createElement(CertificateDisplayCard, {
-      credential,
-      categoryType,
-      issueeOverride: issuee,
-      issuerOverride: issuer,
-      verificationItems,
-      getFileMetadata,
-      getVideoMetadata,
-      onMediaAttachmentClick,
-      enableLightbox,
-      knownDIDRegistry,
-      handleXClick,
-      subjectImageComponent,
-      issuerImageComponent,
-      customBodyCardComponent,
-      hideIssueDate,
-      onDotsClick,
-      isFrontOverride,
-      setIsFrontOverride,
-      hideNavButtons,
-      showBackButton,
-      showDetailsBtn,
-      formattedDisplayType,
-      customLinkedCredentialsComponent,
-      customBodyContentSlot
-    });
+    return /* @__PURE__ */ React.createElement(
+      CertificateDisplayCard,
+      {
+        credential,
+        categoryType,
+        issueeOverride: issuee,
+        issuerOverride: issuer,
+        verificationItems,
+        getFileMetadata,
+        getVideoMetadata,
+        onMediaAttachmentClick,
+        enableLightbox,
+        knownDIDRegistry,
+        handleXClick,
+        subjectImageComponent,
+        issuerImageComponent,
+        customBodyCardComponent,
+        hideIssueDate,
+        onDotsClick,
+        isFrontOverride,
+        setIsFrontOverride,
+        hideNavButtons,
+        showBackButton,
+        showDetailsBtn,
+        formattedDisplayType,
+        customLinkedCredentialsComponent,
+        customBodyContentSlot
+      }
+    );
   } else if (((_f = credential == null ? void 0 : credential.display) == null ? void 0 : _f.displayType) === "id" || categoryType === "ID") {
-    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(VCIDDisplayCard, {
-      credential,
-      verificationItems,
-      getFileMetadata,
-      getVideoMetadata,
-      onMediaAttachmentClick,
-      customThumbComponent,
-      customCriteria,
-      customDescription,
-      customIssueHistoryComponent,
-      issueHistory,
-      enableLightbox,
-      knownDIDRegistry,
-      customSkillsComponent,
-      isFrontOverride,
-      setIsFrontOverride,
-      hideNavButtons,
-      hideQRCode,
-      qrCodeOnClick,
-      showBackButton,
-      showDetailsBtn,
-      customIDDescription,
-      hideGradientBackground,
-      customLinkedCredentialsComponent
-    }));
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+      VCIDDisplayCard,
+      {
+        credential,
+        verificationItems,
+        getFileMetadata,
+        getVideoMetadata,
+        onMediaAttachmentClick,
+        customThumbComponent,
+        customCriteria,
+        customDescription,
+        customIssueHistoryComponent,
+        issueHistory,
+        enableLightbox,
+        knownDIDRegistry,
+        customSkillsComponent,
+        isFrontOverride,
+        setIsFrontOverride,
+        hideNavButtons,
+        hideQRCode,
+        qrCodeOnClick,
+        showBackButton,
+        showDetailsBtn,
+        customIDDescription,
+        hideGradientBackground,
+        customLinkedCredentialsComponent
+      }
+    ));
   }
   const headerClassName = "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] text-center bg-white border-y-[5px] border-[#EEF2FF] w-[calc(100%_+_16px)] rounded-t-[8px] z-50";
   const headerFitTextClassName = "vc-card-header-main-title text-[#18224E] pt-[3px] leading-[80%] text-[32px]";
-  return /* @__PURE__ */ React.createElement(h, {
-    className: "w-full",
-    flipKey: isFront
-  }, /* @__PURE__ */ React.createElement(v, {
-    flipId: "card"
-  }, /* @__PURE__ */ React.createElement("section", {
-    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl",
-    role: "button",
-    onClick: () => setIsFront(!isFront)
-  }, /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__PURE__ */ React.createElement(RibbonEnd, {
-    side: "left",
-    className: "absolute left-[-30px] top-[50px] z-0",
-    height: "75"
-  })), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__PURE__ */ React.createElement(RibbonEnd, {
-    side: "right",
-    className: "absolute right-[-30px] top-[50px] z-0",
-    height: "75"
-  })), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__PURE__ */ React.createElement("h1", {
-    ref: headerRef,
-    className: `${headerClassName} absolute`,
-    style: { wordBreak: "break-word" }
-  }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, {
-    categoryType
-  }), /* @__PURE__ */ React.createElement(FitText, {
-    text: _title != null ? _title : "",
-    maxFontSize: 32,
-    minFontSize: 20,
-    width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
-    className: headerFitTextClassName
-  }))), isFront && handleXClick && /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__PURE__ */ React.createElement("button", {
-    className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
-    onClick: handleXClick
-  }, /* @__PURE__ */ React.createElement(RoundedX, null))), /* @__PURE__ */ React.createElement("div", {
-    className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]"
-  }, /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card",
-    scale: true
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "absolute top-0 left-0 w-full h-full rounded-b-[200px] rounded-t-[30px]",
-    style: backgroundStyle
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] scrollbar-hide pb-[50px] z-50"
-  }, /* @__PURE__ */ React.createElement("h1", {
-    className: `${headerClassName} invisible`,
-    style: { wordBreak: "break-word" }
-  }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, {
-    categoryType
-  }), /* @__PURE__ */ React.createElement(FitText, {
-    text: _title != null ? _title : "",
-    maxFontSize: 32,
-    minFontSize: 20,
-    width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
-    className: headerFitTextClassName
-  })), isFront && /* @__PURE__ */ React.createElement(VC2FrontFaceInfo, {
-    credential,
-    issuee,
-    subjectDID,
-    issuer,
-    title,
-    subjectImageComponent,
-    issuerImageComponent,
-    customBodyCardComponent,
-    customThumbComponent,
-    createdAt: createdAt != null ? createdAt : "",
-    imageUrl,
-    knownDIDRegistry,
-    customBodyContentSlot
-  }), !isFront && /* @__PURE__ */ React.createElement(VC2BackFace, {
-    credential,
-    verificationItems,
-    issueHistory,
-    getFileMetadata,
-    getVideoMetadata,
-    onMediaAttachmentClick,
-    showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
-    showFrontFace: () => setIsFront(true),
-    customDescription,
-    customCriteria,
-    customIssueHistoryComponent,
-    enableLightbox,
-    customSkillsComponent,
-    customLinkedCredentialsComponent
-  }), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, isFront && /* @__PURE__ */ React.createElement(VCDisplayCardSkillsCount, {
-    skills: credential == null ? void 0 : credential.skills,
-    onClick: () => setIsFront(!isFront)
-  })), (!hideNavButtons || showDetailsBtn) && /* @__PURE__ */ React.createElement(React.Fragment, null, isFront && customFrontButton, (isFront && !customFrontButton || isFront && showDetailsBtn) && /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__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",
-    onClick: () => setIsFront(!isFront)
-  }, "Details")), !isFront && /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, /* @__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",
-    onClick: () => setIsFront(!isFront)
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "flex gap-[10px] items-center"
-  }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")))))), /* @__PURE__ */ React.createElement("footer", {
-    className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]"
-  }, /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, customFooterComponent && customFooterComponent), /* @__PURE__ */ React.createElement(v, {
-    inverseFlipId: "card"
-  }, !customFooterComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, worstVerificationStatus === VerificationStatusEnum.Failed ? /* @__PURE__ */ React.createElement("div", {
-    className: "w-[40px]",
-    role: "presentation"
-  }) : /* @__PURE__ */ React.createElement(VCVerificationCheckWithSpinner, {
-    spinnerSize: "40px",
-    size: "32px",
-    loading: verificationInProgress
-  }), /* @__PURE__ */ React.createElement("div", {
-    className: "vc-footer-text font-montserrat flex flex-col items-center justify-center text-[12px] font-[700] leading-[15px] select-none"
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "text-[#4F4F4F]"
-  }, "Verified Credential"), /* @__PURE__ */ React.createElement("span", {
-    className: "vc-footer-status uppercase",
-    style: { color: statusColor }
-  }, worstVerificationStatus)), /* @__PURE__ */ React.createElement("div", {
-    className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
-    style: {
-      backgroundColor: (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _g : "#6366F1"
-    }
-  }, (_h = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _h : /* @__PURE__ */ React.createElement(AwardRibbon, null))))))));
+  return /* @__PURE__ */ React.createElement(h, { className: "w-full", flipKey: isFront }, /* @__PURE__ */ React.createElement(v, { flipId: "card" }, /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl",
+      role: "button",
+      onClick: () => setIsFront(!isFront)
+    },
+    /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement(
+      RibbonEnd,
+      {
+        side: "left",
+        className: "absolute left-[-30px] top-[50px] z-0",
+        height: "75"
+      }
+    )),
+    /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement(
+      RibbonEnd,
+      {
+        side: "right",
+        className: "absolute right-[-30px] top-[50px] z-0",
+        height: "75"
+      }
+    )),
+    /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement(
+      "h1",
+      {
+        ref: headerRef,
+        className: `${headerClassName} absolute`,
+        style: { wordBreak: "break-word" }
+      },
+      customRibbonCategoryComponent && customRibbonCategoryComponent,
+      !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, { categoryType }),
+      /* @__PURE__ */ React.createElement(
+        FitText,
+        {
+          text: _title != null ? _title : "",
+          maxFontSize: 32,
+          minFontSize: 20,
+          width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
+          className: headerFitTextClassName
+        }
+      )
+    )),
+    isFront && handleXClick && /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "vc-card-x-button absolute top-[-25px] bg-white rounded-full h-[50px] w-[50px] flex items-center justify-center z-50",
+        onClick: handleXClick
+      },
+      /* @__PURE__ */ React.createElement(RoundedX, null)
+    )),
+    /* @__PURE__ */ React.createElement("div", { className: "relative vc-card-content-container flex flex-col items-center grow min-h-0 w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]" }, /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card", scale: true }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "absolute top-0 left-0 w-full h-full rounded-b-[200px] rounded-t-[30px]",
+        style: backgroundStyle
+      }
+    )), /* @__PURE__ */ React.createElement("div", { className: "vc-card-content-scroll-container w-full pt-[20px] min-h-full flex flex-col justify-start items-center rounded-t-[30px] rounded-b-[200px] scrollbar-hide pb-[50px] z-50" }, /* @__PURE__ */ React.createElement(
+      "h1",
+      {
+        className: `${headerClassName} invisible`,
+        style: { wordBreak: "break-word" }
+      },
+      customRibbonCategoryComponent && customRibbonCategoryComponent,
+      !customRibbonCategoryComponent && /* @__PURE__ */ React.createElement(VCDisplayCardCategoryType, { categoryType }),
+      /* @__PURE__ */ React.createElement(
+        FitText,
+        {
+          text: _title != null ? _title : "",
+          maxFontSize: 32,
+          minFontSize: 20,
+          width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
+          className: headerFitTextClassName
+        }
+      )
+    ), isFront && /* @__PURE__ */ React.createElement(
+      VC2FrontFaceInfo,
+      {
+        credential,
+        issuee,
+        subjectDID,
+        issuer,
+        title,
+        subjectImageComponent,
+        issuerImageComponent,
+        customBodyCardComponent,
+        customThumbComponent,
+        createdAt: createdAt != null ? createdAt : "",
+        imageUrl,
+        knownDIDRegistry,
+        customBodyContentSlot
+      }
+    ), !isFront && /* @__PURE__ */ React.createElement(
+      VC2BackFace,
+      {
+        credential,
+        verificationItems,
+        issueHistory,
+        getFileMetadata,
+        getVideoMetadata,
+        onMediaAttachmentClick,
+        showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+        showFrontFace: () => setIsFront(true),
+        customDescription,
+        customCriteria,
+        customIssueHistoryComponent,
+        enableLightbox,
+        customSkillsComponent,
+        customLinkedCredentialsComponent
+      }
+    ), /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, isFront && /* @__PURE__ */ React.createElement(
+      VCDisplayCardSkillsCount,
+      {
+        skills: credential == null ? void 0 : credential.skills,
+        onClick: () => setIsFront(!isFront)
+      }
+    )), (!hideNavButtons || showDetailsBtn) && /* @__PURE__ */ React.createElement(React.Fragment, null, isFront && customFrontButton, (isFront && !customFrontButton || isFront && showDetailsBtn) && /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__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",
+        onClick: () => setIsFront(!isFront)
+      },
+      "Details"
+    )), !isFront && /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, /* @__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",
+        onClick: () => setIsFront(!isFront)
+      },
+      /* @__PURE__ */ React.createElement("span", { className: "flex gap-[10px] items-center" }, /* @__PURE__ */ React.createElement(LeftArrow, null), "Back")
+    ))))),
+    /* @__PURE__ */ React.createElement("footer", { className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]" }, /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, customFooterComponent && customFooterComponent), /* @__PURE__ */ React.createElement(v, { inverseFlipId: "card" }, !customFooterComponent && /* @__PURE__ */ React.createElement(React.Fragment, null, worstVerificationStatus === VerificationStatusEnum.Failed ? /* @__PURE__ */ React.createElement("div", { className: "w-[40px]", role: "presentation" }) : /* @__PURE__ */ React.createElement(
+      VCVerificationCheckWithSpinner,
+      {
+        spinnerSize: "40px",
+        size: "32px",
+        loading: verificationInProgress
+      }
+    ), /* @__PURE__ */ React.createElement("div", { className: "vc-footer-text font-montserrat flex flex-col items-center justify-center text-[12px] font-[700] leading-[15px] select-none" }, /* @__PURE__ */ React.createElement("span", { className: "text-[#4F4F4F]" }, "Verified Credential"), /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: "vc-footer-status uppercase",
+        style: { color: statusColor }
+      },
+      worstVerificationStatus
+    )), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
+        style: {
+          backgroundColor: (_g = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _g : "#6366F1"
+        }
+      },
+      (_h = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _h : /* @__PURE__ */ React.createElement(AwardRibbon, null)
+    ))))
+  )));
 };
 
 export { VCDisplayCard2 as V, VCDisplayCardSkillsCount as a, VCIDDisplayCard as b };
-//# sourceMappingURL=VCDisplayCard2-415128f5.js.map
+//# sourceMappingURL=VCDisplayCard2-fb8abe89.js.map