@learncard/react 2.6.58 → 2.6.59

package/dist/cjs/VCDisplayCard2-f99e286c.js

@@ -0,0 +1,835 @@
+'use strict';
+
+var React = require('react');
+var index_es = require('./index.es-f433af46.js');
+var VCVerificationCheck = require('./VCVerificationCheck-46fa75d3.js');
+var DefaultFace = require('./default-face.jpeg');
+var credential_helpers = require('./credential.helpers-a3c3d503.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-d93af598.js');
+var Lightbox = require('./Lightbox-f19e13d2.js');
+var VCVerificationPill = require('./VCVerificationPill-d0edd7ae.js');
+var AwardRibbon = require('./AwardRibbon-14ba45fb.js');
+var index = require('./index-7d94d5ac.js');
+require('react-dom');
+require('./athletics.svg');
+require('./business.svg');
+require('./creative.svg');
+require('./digital.svg');
+require('./durable.svg');
+require('./medical.svg');
+require('./social.svg');
+require('./stem.svg');
+require('./trade.svg');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var DefaultFace__default = /*#__PURE__*/_interopDefaultLegacy(DefaultFace);
+
+const LeftArrow = ({ className = "", size = "20" }) => {
+  return /* @__PURE__ */ React__default["default"].createElement("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: "M8.93299 17.942L1.43299 10.442C1.31582 10.3247 1.25 10.1657 1.25 9.99999C1.25 9.83423 1.31582 9.67526 1.43299 9.55802L8.93299 2.05802C9.02041 1.97062 9.13178 1.91111 9.25301 1.887C9.37425 1.8629 9.49991 1.87528 9.61412 1.92258C9.72832 1.96989 9.82593 2.04999 9.89461 2.15277C9.96329 2.25554 9.99995 2.37638 9.99996 2.49999V5.62499H16.25C16.5814 5.62537 16.8991 5.75718 17.1334 5.99152C17.3678 6.22586 17.4996 6.54358 17.5 6.87499V13.125C17.4996 13.4564 17.3678 13.7741 17.1334 14.0085C16.8991 14.2428 16.5814 14.3746 16.25 14.375H9.99996V17.5C9.99995 17.6236 9.96329 17.7444 9.89461 17.8472C9.82593 17.95 9.72832 18.0301 9.61412 18.0774C9.49991 18.1247 9.37425 18.1371 9.25301 18.113C9.13178 18.0889 9.02041 18.0294 8.93299 17.942Z",
+    fill: "currentColor"
+  }));
+};
+
+const RoundedX = ({ className = "" }) => {
+  return /* @__PURE__ */ React__default["default"].createElement("svg", {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: "M18.75 5.25L5.25 18.75",
+    stroke: "#18224E",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: "M18.75 18.75L5.25 5.25",
+    stroke: "#18224E",
+    strokeWidth: "4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+const FitText = ({
+  text,
+  width,
+  className = "",
+  minFontSize = 10,
+  maxFontSize = 100
+}) => {
+  const textRef = React.useRef(null);
+  let animationFrameId = null;
+  const adjustFontSize = () => {
+    var _a;
+    if (textRef.current) {
+      const currentFontSize = parseFloat(window.getComputedStyle(textRef.current).getPropertyValue("font-size"));
+      textRef.current.style.whiteSpace = "nowrap";
+      const parentWidth = (_a = textRef.current.parentNode) == null ? void 0 : _a.clientWidth;
+      const scrollWidth = textRef.current.scrollWidth || textRef.current.offsetWidth;
+      if (scrollWidth === 0) {
+        if (animationFrameId !== null) {
+          cancelAnimationFrame(animationFrameId);
+        }
+        animationFrameId = requestAnimationFrame(adjustFontSize);
+        return;
+      }
+      const newFontSize = Math.min(Math.max(parentWidth / scrollWidth * currentFontSize, minFontSize), maxFontSize);
+      textRef.current.style.fontSize = `${newFontSize}px`;
+      textRef.current.style.whiteSpace = newFontSize === minFontSize ? "normal" : "nowrap";
+    }
+  };
+  const handleResize = () => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+    animationFrameId = requestAnimationFrame(adjustFontSize);
+  };
+  React.useEffect(() => {
+    window.addEventListener("resize", handleResize);
+    adjustFontSize();
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      if (animationFrameId !== null) {
+        cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, [text]);
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    style: { width },
+    className: `text-center ${className}`
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("div", {
+    className: "info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]",
+    style: { backgroundColor: bgColorWithOpacity }
+  }, text, " ", /* @__PURE__ */ React__default["default"].createElement("button", {
+    onClick: handleClose,
+    className: "text-indigo-500 font-[700] select-none"
+  }, "Close"));
+};
+
+const IssueHistoryBox = ({
+  issueHistory,
+  customIssueHistoryComponent
+}) => {
+  let renderIssueHistory = issueHistory == null ? void 0 : issueHistory.map((issueItem) => {
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex items-center issue-log-item border-b-[1px] py-[5px] border-grayscale-200 border-solid w-full",
+      key: issueItem == null ? void 0 : issueItem.id
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden"
+    }, /* @__PURE__ */ React__default["default"].createElement("img", {
+      className: "h-full w-full object-cover select-none",
+      src: (issueItem == null ? void 0 : issueItem.thumb) || DefaultFace__default["default"],
+      alt: "profile"
+    })), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "ml-[9px] flex flex-col justify-center"
+    }, /* @__PURE__ */ React__default["default"].createElement("p", {
+      className: "issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] "
+    }, issueItem == null ? void 0 : issueItem.name), /* @__PURE__ */ React__default["default"].createElement("p", {
+      className: "issue-item-date font-montserrat  text-[12px] text-grayscale-600 "
+    }, issueItem == null ? void 0 : issueItem.date)));
+  });
+  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Issue Log"), !customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent);
+};
+
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const defaultGetFileMetadata = (url) => __async(undefined, null, function* () {
+  var _a;
+  const isFilestack = url.includes("filestack");
+  if (!isFilestack)
+    return;
+  const urlParams = (_a = url.split(".com/")[1]) == null ? void 0 : _a.split("/");
+  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;
+  const fileExtension = data.filename.split(".")[1];
+  return {
+    fileExtension,
+    sizeInBytes: data.size,
+    numberOfPages: void 0
+  };
+});
+const defaultGetVideoMetadata = (url) => __async(undefined, null, function* () {
+  const isYoutube = url.includes("youtube");
+  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;
+  return {
+    title: metadata.title,
+    imageUrl: metadata.thumbnail_url,
+    videoLength: ""
+  };
+});
+const MediaAttachmentsBox = ({
+  attachments,
+  getFileMetadata = defaultGetFileMetadata,
+  getVideoMetadata = defaultGetVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox = false
+}) => {
+  const [documentMetadata, setDocumentMetadata] = React.useState({});
+  const [videoMetadata, setVideoMetadata] = React.useState({});
+  const mediaAttachments = [];
+  const documentsAndLinks = [];
+  attachments.forEach((a) => {
+    switch (a.type) {
+      case "document":
+      case "link":
+        documentsAndLinks.push(a);
+        break;
+      case "photo":
+      case "video":
+        mediaAttachments.push(a);
+        break;
+    }
+  });
+  React.useEffect(() => {
+    const getMetadata = (attachments2) => __async(undefined, null, function* () {
+      const docMetadata = {};
+      const videoMetadata2 = {};
+      yield Promise.all(attachments2.map((attachment) => __async(this, null, function* () {
+        if (attachment.type === "document") {
+          docMetadata[attachment.url] = yield getFileMetadata(attachment.url);
+        } else if (attachment.type === "video") {
+          videoMetadata2[attachment.url] = yield getVideoMetadata(attachment.url);
+        }
+      })));
+      setVideoMetadata(videoMetadata2);
+      setDocumentMetadata(docMetadata);
+    });
+    const videos = attachments.filter((a) => a.type === "video");
+    getMetadata([...documentsAndLinks, ...videos]);
+  }, []);
+  const [currentLightboxUrl, setCurrentLightboxUrl] = React.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__default["default"].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__default["default"].createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Media Attachments"), mediaAttachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex gap-[5px] justify-between flex-wrap w-full"
+  }, enableLightbox && /* @__PURE__ */ React__default["default"].createElement(Lightbox.Lightbox, {
+    items: lightboxItems,
+    currentUrl: currentLightboxUrl,
+    setCurrentUrl: setCurrentLightboxUrl
+  }), mediaAttachments.map((media, index) => {
+    var _a, _b;
+    let innerContent;
+    let title = media.title;
+    if (media.type === "video") {
+      const metadata = videoMetadata[media.url];
+      title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
+      const baseUrl = CertificateDisplayCard.getBaseUrl(media.url);
+      const iconTop = title || baseUrl;
+      innerContent = /* @__PURE__ */ React__default["default"].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__default["default"].createElement(CertificateDisplayCard.VideoIcon, {
+        size: "60",
+        className: "m-auto"
+      }), /* @__PURE__ */ React__default["default"].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__default["default"].createElement(CertificateDisplayCard.VideoIcon, null), (metadata == null ? void 0 : metadata.videoLength) && /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "leading-[23px]"
+      }, metadata.videoLength)), baseUrl && /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "font-[600]"
+      }, baseUrl), title && /* @__PURE__ */ React__default["default"].createElement("span", {
+        className: "line-clamp-2"
+      }, title));
+    } else {
+      innerContent = /* @__PURE__ */ React__default["default"].createElement("div", {
+        className: "absolute top-0 left-0 right-0 bottom-0 h-min"
+      }, /* @__PURE__ */ React__default["default"].createElement("img", {
+        className: "rounded-[15px]",
+        src: media.url
+      }), /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.Camera, {
+        className: "relative bottom-[30px] left-[10px] z-10"
+      }));
+    }
+    const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
+    if (onMediaAttachmentClick || enableLightbox) {
+      return /* @__PURE__ */ React__default["default"].createElement("button", {
+        key: index,
+        className,
+        onClick: () => handleMediaAttachmentClick(media.url, media.type)
+      }, innerContent);
+    }
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      key: index,
+      className
+    }, innerContent);
+  })), documentsAndLinks.length > 0 && /* @__PURE__ */ React__default["default"].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 : {};
+    let baseUrl = "";
+    if (docOrLink.type === "link") {
+      baseUrl = CertificateDisplayCard.getBaseUrl(docOrLink.url);
+    }
+    const innerContent = /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex flex-col gap-[5px]"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex gap-[5px] items-center"
+    }, docOrLink.type === "document" && /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.GenericDocumentIcon, {
+      className: "shrink-0"
+    }), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.LinkIcon, {
+      className: "shrink-0"
+    }), /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "text-grayscale-900 font-[400]"
+    }, (_a = docOrLink.title) != null ? _a : "No title")), docOrLink.type === "document" && metadata && /* @__PURE__ */ React__default["default"].createElement("a", {
+      href: docOrLink.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-grayscale-600 font-[600] px-[5px] hover:underline"
+    }, fileExtension && /* @__PURE__ */ React__default["default"].createElement("span", {
+      className: "uppercase"
+    }, fileExtension), fileExtension && (numberOfPages || sizeInBytes) && " \u2022 ", numberOfPages && /* @__PURE__ */ React__default["default"].createElement("span", null, numberOfPages, " page", numberOfPages === 1 ? "" : "s"), numberOfPages && sizeInBytes && " \u2022 ", sizeInBytes && /* @__PURE__ */ React__default["default"].createElement("span", null, CertificateDisplayCard.prettyBytes(sizeInBytes))), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement("a", {
+      href: docOrLink.url,
+      target: "_blank",
+      rel: "noreferrer",
+      className: "text-indigo-500 font-[600] px-[5px] hover:underline"
+    }, 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__default["default"].createElement("button", {
+        key: index,
+        className,
+        onClick: () => handleMediaAttachmentClick(docOrLink.url, docOrLink.type)
+      }, innerContent);
+    }
+    return /* @__PURE__ */ React__default["default"].createElement("div", {
+      key: index,
+      className
+    }, innerContent);
+  })));
+};
+
+const RibbonEnd = ({
+  side,
+  className = "",
+  height = "64"
+}) => {
+  const halfHeight = parseInt(height) / 2;
+  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("g", {
+    filter: "url(#filter0_d_4620_22659)"
+  }, /* @__PURE__ */ React__default["default"].createElement("path", {
+    d: `M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`,
+    fill: "white"
+  }), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("defs", null, /* @__PURE__ */ React__default["default"].createElement("filter", {
+    id: "filter0_d_4620_22659",
+    x: "0",
+    y: "0",
+    width: "30",
+    height,
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /* @__PURE__ */ React__default["default"].createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("feOffset", {
+    dy: "4"
+  }), /* @__PURE__ */ React__default["default"].createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_4620_22659"
+  }), /* @__PURE__ */ React__default["default"].createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_4620_22659",
+    result: "shape"
+  }))));
+};
+
+const TruncateTextBox = ({
+  headerText,
+  headerClassName = "",
+  text,
+  truncateThreshold = 132,
+  children,
+  className = "truncate-text-box"
+}) => {
+  const needsTruncate = (text == null ? void 0 : text.length) > truncateThreshold;
+  const [showFullText, setShowFullText] = React.useState(false);
+  const truncated = needsTruncate && !showFullText;
+  const displayText = truncated ? text.substring(0, truncateThreshold) : text;
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: `${className} bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full"`
+  }, /* @__PURE__ */ React__default["default"].createElement("h3", {
+    className: `${headerClassName} text-[20px] leading-[20px] text-grayscale-900`
+  }, headerText), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] mb-0"
+  }, displayText, truncated && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, "...", " ", /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "text-indigo-500 font-[700]",
+    onClick: () => setShowFullText(true)
+  }, "More")), needsTruncate && showFullText && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, " ", /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "text-indigo-500 font-[700]",
+    onClick: () => setShowFullText(false)
+  }, "Close"))), children);
+};
+
+const VerificationRow = ({ verification }) => {
+  var _a, _b;
+  const [showInfo, setShowInfo] = React.useState(false);
+  const statusColor = credential_helpers.getColorForVerificationStatus(verification.status);
+  const getIcon = () => {
+    switch (verification.status) {
+      case VCVerificationPill.VerificationStatusEnum.Success:
+        return /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.AcuteCheckmark, null);
+      case VCVerificationPill.VerificationStatusEnum.Error:
+        return /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.ExclamationPoint, null);
+      case VCVerificationPill.VerificationStatusEnum.Failed:
+        return /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.X, null);
+    }
+  };
+  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
+  if (verification.status === VCVerificationPill.VerificationStatusEnum.Failed) {
+    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
+  }
+  primaryText = CertificateDisplayCard.capitalize(primaryText);
+  const infoText = "";
+  return /* @__PURE__ */ React__default["default"].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__default["default"].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__default["default"].createElement(InfoBox, {
+    text: infoText,
+    handleClose: () => setShowInfo(false),
+    backgroundColor: statusColor
+  }), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "font-[400] text-[14px] leading-[21px] text-grayscale-900"
+  }, primaryText));
+};
+
+const VerificationsBox = ({ verificationItems }) => {
+  const [showInfo, setShowInfo] = React.useState(false);
+  return /* @__PURE__ */ React__default["default"].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__default["default"].createElement("h3", {
+    className: "text-[20px] leading-[20px] text-grayscale-900"
+  }, "Credential Verifications"), /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "absolute top-[17px] right-[17px]",
+    onClick: () => setShowInfo(!showInfo)
+  }, /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.InfoIcon, {
+    color: showInfo ? "#6366F1" : void 0
+  })), showInfo && /* @__PURE__ */ React__default["default"].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__default["default"].createElement(VerificationRow, {
+    key: index,
+    verification
+  })));
+};
+
+const VC2BackFace = ({
+  credential,
+  verificationItems,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  issueHistory,
+  showBackButton,
+  showFrontFace,
+  customDescription,
+  customCriteria,
+  customSkillsComponent,
+  customIssueHistoryComponent,
+  enableLightbox
+}) => {
+  var _a, _b, _c, _d;
+  const expiration = credential.expirationDate ? credential_helpers.format(new Date(credential.expirationDate), "MMM dd, yyyy") : void 0;
+  const isExpired = credential.expirationDate && Number(new Date(credential.expirationDate)) < Number(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;
+  return /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "vc-back-face flex flex-col gap-[20px] w-full px-[15px]"
+  }, showBackButton && /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "w-full"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(LeftArrow, {
+    className: "text-white",
+    size: "25"
+  }), "Details")), customDescription && /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
+    headerText: "About",
+    text: description,
+    className: "description-box"
+  }, customDescription), !customDescription && (description || expiration) && /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
+    headerText: "About",
+    text: description,
+    className: "description-box"
+  }, expiration && /* @__PURE__ */ React__default["default"].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__default["default"].createElement(TruncateTextBox, {
+    headerText: "Criteria",
+    text: description,
+    className: "description-box"
+  }, customCriteria), !customCriteria && criteria && /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
+    headerText: "Criteria",
+    text: criteria,
+    className: "criteria-box"
+  }), ((_c = (_b = credential.skills) == null ? void 0 : _b.length) != null ? _c : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.SkillsBox, {
+    skills: (_d = credential.skills) != null ? _d : []
+  })), issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && /* @__PURE__ */ React__default["default"].createElement(IssueHistoryBox, {
+    issueHistory,
+    customIssueHistoryComponent
+  }), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement(MediaAttachmentsBox, {
+    attachments: credential.attachments,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox
+  }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React__default["default"].createElement(VerificationsBox, {
+    verificationItems
+  }));
+};
+
+const VC2FrontFaceInfo = ({
+  issuee,
+  issuer,
+  subjectDID,
+  subjectImageComponent,
+  issuerImageComponent,
+  customBodyCardComponent,
+  createdAt,
+  imageUrl,
+  customThumbComponent
+}) => {
+  const issuerName = CertificateDisplayCard.truncateWithEllipsis(credential_helpers.getNameFromProfile(issuer != null ? issuer : ""), 25);
+  const issueeName = CertificateDisplayCard.truncateWithEllipsis(credential_helpers.getNameFromProfile(issuee != null ? issuee : ""), 25);
+  const issuerImage = credential_helpers.getImageFromProfile(issuer != null ? issuer : "");
+  const issueeImage = credential_helpers.getImageFromProfile(issuee != null ? issuee : "");
+  const getImageElement = (imageUrl2, alt, overrideComponent) => {
+    if (overrideComponent)
+      return overrideComponent;
+    return /* @__PURE__ */ React__default["default"].createElement("img", {
+      className: "h-full w-full object-cover select-none",
+      src: imageUrl2 || DefaultFace__default["default"],
+      alt
+    });
+  };
+  const issueeImageEl = getImageElement(issueeImage, "Issuee image", subjectImageComponent);
+  const issuerImageEl = getImageElement(issuerImage, "Issuer image", issuerImageComponent);
+  return /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]"
+  }, imageUrl && !customThumbComponent && /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "vc-front-image h-[130px] w-[130px] rounded-[10px]",
+    src: imageUrl
+  }), customThumbComponent && customThumbComponent, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
+    className: "text-[27px] flex flex-col text-center leading-[130%] text-grayscale-900 capitalize"
+  }, issueeName, subjectDID && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-[12px] text-grayscale-700 leading-[18px] font-poppins font-[400] m-0 p-0 normal-case"
+  }, subjectDID)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "relative"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-issuee-image h-[60px] w-[60px] rounded-full overflow-hidden"
+  }, issueeImageEl), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px]"
+  }, issuerImageEl)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-issue-details mt-[10px] flex flex-col items-center font-montserrat text-[14px] leading-[20px]"
+  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "created-at text-grayscale-700"
+  }, createdAt), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "issued-by text-grayscale-900 font-[500]"
+  }, "by ", /* @__PURE__ */ React__default["default"].createElement("strong", {
+    className: "font-[700]"
+  }, issuerName))))));
+};
+
+const VCDisplayCardCategoryType = ({
+  categoryType = index.LCCategoryEnum.achievement
+}) => {
+  const categoryColor = credential_helpers.getCategoryColor(categoryType);
+  return /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none text-${categoryColor}`
+  }, categoryType);
+};
+
+const VCDisplayCard2 = ({
+  categoryType,
+  credential,
+  verificationItems,
+  issueeOverride,
+  issuerOverride,
+  subjectDID,
+  subjectImageComponent,
+  issuerImageComponent,
+  verificationInProgress = false,
+  handleXClick,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  bottomRightIcon,
+  customFooterComponent,
+  customBodyCardComponent,
+  customThumbComponent,
+  customCriteria,
+  customDescription,
+  customIssueHistoryComponent,
+  issueHistory,
+  titleOverride,
+  showBackButton = true,
+  enableLightbox,
+  customRibbonCategoryComponent,
+  customFrontButton,
+  trustedAppRegistry,
+  hideIssueDate,
+  onDotsClick,
+  customSkillsComponent
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  console.log("credential", credential);
+  const {
+    title = "",
+    createdAt,
+    issuer: _issuer = "",
+    issuee: _issuee = "",
+    imageUrl
+  } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy");
+  const issuee = issueeOverride || _issuee;
+  const issuer = issuerOverride || _issuer;
+  const [isFront, setIsFront] = React.useState(true);
+  const [headerHeight, setHeaderHeight] = React.useState(100);
+  const [headerWidth, setHeaderWidth] = React.useState(0);
+  const headerRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    setTimeout(() => {
+      var _a2, _b2, _c2, _d2;
+      setHeaderHeight((_b2 = (_a2 = headerRef.current) == null ? void 0 : _a2.clientHeight) != null ? _b2 : 100);
+      setHeaderWidth((_d2 = (_c2 = headerRef.current) == null ? void 0 : _c2.clientWidth) != null ? _d2 : 0);
+    }, 10);
+  });
+  let worstVerificationStatus = verificationItems.reduce((currentWorst, verification) => {
+    switch (currentWorst) {
+      case VCVerificationPill.VerificationStatusEnum.Success:
+        return verification.status;
+      case VCVerificationPill.VerificationStatusEnum.Error:
+        return verification.status === VCVerificationPill.VerificationStatusEnum.Failed ? verification.status : currentWorst;
+      case VCVerificationPill.VerificationStatusEnum.Failed:
+        return currentWorst;
+    }
+  }, VCVerificationPill.VerificationStatusEnum.Success);
+  const statusColor = credential_helpers.getColorForVerificationStatus(worstVerificationStatus);
+  const backgroundStyle = {
+    backgroundColor: (_a = credential == null ? void 0 : credential.display) == null ? void 0 : _a.backgroundColor,
+    backgroundImage: ((_b = credential == null ? void 0 : credential.display) == null ? void 0 : _b.backgroundImage) ? `linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25)), url(${(_c = credential.display) == null ? void 0 : _c.backgroundImage})` : void 0,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundAttachment: "fixed"
+  };
+  const _title = titleOverride || title;
+  if (((_d = credential == null ? void 0 : credential.display) == null ? void 0 : _d.displayType) === "certificate") {
+    return /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.CertificateDisplayCard, {
+      credential,
+      categoryType,
+      issueeOverride: issuee,
+      issuerOverride: issuer,
+      verificationItems,
+      getFileMetadata,
+      getVideoMetadata,
+      onMediaAttachmentClick,
+      enableLightbox,
+      trustedAppRegistry,
+      handleXClick,
+      subjectImageComponent,
+      issuerImageComponent,
+      customBodyCardComponent,
+      hideIssueDate,
+      onDotsClick
+    });
+  }
+  return /* @__PURE__ */ React__default["default"].createElement(index_es.h, {
+    className: "w-full",
+    flipKey: isFront
+  }, /* @__PURE__ */ React__default["default"].createElement(index_es.y, {
+    flipId: "card"
+  }, /* @__PURE__ */ React__default["default"].createElement("section", {
+    className: "vc-display-card font-mouse flex flex-col items-center border-solid border-[5px] border-white rounded-[30px] overflow-visible z-10 min-h-[800px] max-w-[400px] relative bg-white shadow-3xl"
+  }, /* @__PURE__ */ React__default["default"].createElement(RibbonEnd, {
+    side: "left",
+    className: "absolute left-[-30px] top-[50px] z-0",
+    height: "100"
+  }), /* @__PURE__ */ React__default["default"].createElement(RibbonEnd, {
+    side: "right",
+    className: "absolute right-[-30px] top-[50px] z-0",
+    height: "100"
+  }), /* @__PURE__ */ React__default["default"].createElement("h1", {
+    ref: headerRef,
+    className: "vc-card-header px-[20px] pb-[10px] pt-[3px] overflow-visible mt-[40px] absolute text-center bg-white border-y-[5px] border-[#EEF2FF] shadow-bottom w-[calc(100%_+_16px)] rounded-t-[8px] z-50",
+    style: { wordBreak: "break-word" }
+  }, customRibbonCategoryComponent && customRibbonCategoryComponent, !customRibbonCategoryComponent && /* @__PURE__ */ React__default["default"].createElement(VCDisplayCardCategoryType, {
+    categoryType
+  }), /* @__PURE__ */ React__default["default"].createElement(FitText, {
+    text: _title != null ? _title : "",
+    maxFontSize: 32,
+    minFontSize: 20,
+    width: ((headerWidth != null ? headerWidth : 290) - 40).toString(),
+    className: "vc-card-header-main-title text-[#18224E] leading-[100%] text-shadow text-[32px]"
+  })), isFront && handleXClick && /* @__PURE__ */ React__default["default"].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__default["default"].createElement(RoundedX, null)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "relative pt-[114px] vc-card-content-container flex flex-col items-center grow basis-0 min-h-0 h-full w-full rounded-t-[30px] bg-[#353E64] rounded-b-[200px]",
+    style: backgroundStyle
+  }, /* @__PURE__ */ React__default["default"].createElement(index_es.y, {
+    flipId: "scroll-container"
+  }, /* @__PURE__ */ React__default["default"].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] overflow-y-auto scrollbar-hide pb-[50px]"
+  }, isFront && /* @__PURE__ */ React__default["default"].createElement(index_es.y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React__default["default"].createElement(VC2FrontFaceInfo, {
+    issuee,
+    subjectDID,
+    issuer,
+    title,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    customThumbComponent,
+    createdAt: createdAt != null ? createdAt : "",
+    imageUrl
+  })), !isFront && /* @__PURE__ */ React__default["default"].createElement(index_es.y, {
+    flipId: "face"
+  }, /* @__PURE__ */ React__default["default"].createElement(VC2BackFace, {
+    credential,
+    verificationItems,
+    issueHistory,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    showBackButton,
+    showFrontFace: () => setIsFront(true),
+    customDescription,
+    customCriteria,
+    customIssueHistoryComponent,
+    enableLightbox,
+    customSkillsComponent
+  })), /* @__PURE__ */ React__default["default"].createElement(CertificateDisplayCard.VCDisplayCardSkillsCount, {
+    skills: credential == null ? void 0 : credential.skills,
+    onClick: () => setIsFront(!isFront)
+  }), isFront && customFrontButton, isFront && !customFrontButton && /* @__PURE__ */ React__default["default"].createElement(index_es.y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(index_es.y, {
+    flipId: "details-back-button"
+  }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement("span", {
+    className: "flex gap-[10px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(LeftArrow, null), "Back")))))), /* @__PURE__ */ React__default["default"].createElement("footer", {
+    className: "vc-card-footer w-full flex justify-between p-[5px] mt-[5px]"
+  }, customFooterComponent && customFooterComponent, !customFooterComponent && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, worstVerificationStatus === VCVerificationPill.VerificationStatusEnum.Failed ? /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "w-[40px]",
+    role: "presentation"
+  }) : /* @__PURE__ */ React__default["default"].createElement(VCVerificationCheck.VCVerificationCheckWithSpinner, {
+    spinnerSize: "40px",
+    size: "32px",
+    loading: verificationInProgress
+  }), /* @__PURE__ */ React__default["default"].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__default["default"].createElement("span", {
+    className: "text-[#4F4F4F]"
+  }, "Verified Credential"), /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "vc-footer-status uppercase",
+    style: { color: statusColor }
+  }, worstVerificationStatus)), /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "vc-footer-icon rounded-[20px] h-[40px] w-[40px] flex items-center justify-center overflow-hidden",
+    style: { backgroundColor: (_e = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _e : "#6366F1" }
+  }, (_f = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _f : /* @__PURE__ */ React__default["default"].createElement(AwardRibbon.AwardRibbon, null)))))));
+};
+
+exports.VCDisplayCard2 = VCDisplayCard2;
+//# sourceMappingURL=VCDisplayCard2-f99e286c.js.map