@learncard/react 2.8.62 → 2.9.3

package/dist/esm/MeritBadgeDisplayCard-4b8fe8e4.js

@@ -0,0 +1,937 @@
+import React, { useState, useEffect } from 'react';
+import { I as InfoIcon, 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, d as LeftArrow, e as SkillsBox, R as RoundedCorner, f as IssuerSeal, V as VERIFIER_STATES, h as Line, a as VerifierStateBadgeAndText, F as FatArrow } from './VerifierStateBadgeAndText-490c08dc.js';
+import { a as getColorForVerificationStatus, b as getInfoFromCredential, d as getCategoryDarkColor, e as getCategoryLightColor, f as getCategoryIcon, h as getNameFromProfile, i as getImageFromProfile } from './credential.helpers-1b1ff55e.js';
+import { U as UserProfilePicture } from './UserProfilePicture-7b950437.js';
+import { a as LCCategoryEnum } from './index-28917993.js';
+import { V as VerificationStatusEnum } from './types.esm-8798df50.js';
+import { L as Lightbox, X } from './Lightbox-f0338a0c.js';
+import CaretRightFilled from './CaretRightFilled.svg';
+import ThreeDots from './DotsThreeOutline.svg';
+
+const Smiley = ({ className = "" }) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "35",
+      height: "36",
+      viewBox: "0 0 35 36",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    },
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M17.5 30.7008C24.7487 30.7008 30.625 24.8245 30.625 17.5758C30.625 10.3271 24.7487 4.45081 17.5 4.45081C10.2513 4.45081 4.375 10.3271 4.375 17.5758C4.375 24.8245 10.2513 30.7008 17.5 30.7008Z",
+        stroke: "#FBFBFC",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M23.1846 20.8566C22.608 21.8538 21.7792 22.6818 20.7815 23.2575C19.7837 23.8332 18.652 24.1362 17.5001 24.1362C16.3482 24.1363 15.2165 23.8332 14.2187 23.2576C13.2209 22.6819 12.3921 21.8539 11.8156 20.8567",
+        stroke: "#FBFBFC",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M12.5781 16.2086C13.3332 16.2086 13.9453 15.5965 13.9453 14.8414C13.9453 14.0864 13.3332 13.4742 12.5781 13.4742C11.823 13.4742 11.2109 14.0864 11.2109 14.8414C11.2109 15.5965 11.823 16.2086 12.5781 16.2086Z",
+        fill: "#FBFBFC"
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M22.4219 16.2086C23.177 16.2086 23.7891 15.5965 23.7891 14.8414C23.7891 14.0864 23.177 13.4742 22.4219 13.4742C21.6668 13.4742 21.0547 14.0864 21.0547 14.8414C21.0547 15.5965 21.6668 16.2086 22.4219 16.2086Z",
+        fill: "#FBFBFC"
+      }
+    )
+  );
+};
+
+const AlignmentRow = ({
+  url,
+  name,
+  framework
+}) => {
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] font-poppins text-[12px] bg-[#DBEAFE] rounded-[15px] border-b-[1px] border-grayscale-200 border-solid w-full p-[10px] last:border-0" }, /* @__PURE__ */ React.createElement("h1", { className: "text-blue-800 font-semibold uppercase" }, framework), /* @__PURE__ */ React.createElement("button", { className: "flex", onClick: () => window.open(url) }, /* @__PURE__ */ React.createElement("span", { className: "text-left" }, name), /* @__PURE__ */ React.createElement("img", { className: "w-[20px] self-end", src: CaretRightFilled, alt: "right-caret" })));
+};
+
+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();
+        },
+        className: "text-indigo-500 font-[700] select-none"
+      },
+      "Close"
+    )
+  );
+};
+
+const AlignmentsBox = ({ alignment, style }) => {
+  const [showInfo, setShowInfo] = useState(false);
+  const alignmentText = `
+    Alignments in your Open Badge credential link your achievement to established frameworks, standards, or competencies. 
+    Each alignment shows how your boost directly relates to skills, knowledge areas, and professional standards that are recognized in your field.
+    `;
+  const alignments = Array.isArray(alignment) ? alignment.map((object, index) => /* @__PURE__ */ React.createElement(
+    AlignmentRow,
+    {
+      key: index,
+      url: object.targetUrl,
+      name: object.targetName,
+      framework: object.targetFramework
+    }
+  )) : alignment && /* @__PURE__ */ React.createElement(
+    AlignmentRow,
+    {
+      url: alignment.targetUrl,
+      name: alignment.targetName,
+      framework: alignment.targetFramework
+    }
+  );
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement(
+    "h3",
+    {
+      className: style === "MeritBadge" ? "text-[17px] text-grayscale-900 font-poppins" : "text-[22px] font-mouse"
+    },
+    "Alignments"
+  ), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "ml-auto",
+      onClick: (e) => {
+        e.stopPropagation();
+        setShowInfo(!showInfo);
+      }
+    },
+    /* @__PURE__ */ React.createElement(InfoIcon, { color: showInfo ? "#6366F1" : void 0 })
+  )), showInfo && /* @__PURE__ */ React.createElement(InfoBox, { text: alignmentText, handleClose: () => setShowInfo(false) }), alignments);
+};
+
+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(null, null, function* () {
+  var _a;
+  console.log({ url });
+  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 isYoutubeUrl = (url) => {
+  const youtubeUrl = new URL(url);
+  return youtubeUrl.hostname === "www.youtube.com";
+};
+const getYoutubeVideoId = (url) => {
+  const regex = /(?:\?v=|\.com\/embed\/)([^&]+)/;
+  const match = url.match(regex);
+  return match ? match[1] : "";
+};
+const getCoverImageUrl = (youtubeWatchUrl) => {
+  if (!isYoutubeUrl(youtubeWatchUrl)) {
+    return "";
+  }
+  const videoId = getYoutubeVideoId(youtubeWatchUrl);
+  return videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : "";
+};
+const defaultGetVideoMetadata = (url) => __async(null, null, function* () {
+  const isYoutube = isYoutubeUrl(url);
+  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);
+  const coverImageUrl = getCoverImageUrl(url);
+  if (fetchFailed) return { imageUrl: coverImageUrl };
+  return {
+    title: metadata.title,
+    imageUrl: coverImageUrl,
+    videoLength: ""
+    // TODO figure out how to get this
+  };
+});
+const MediaAttachmentsBox = ({
+  attachments,
+  getFileMetadata = defaultGetFileMetadata,
+  getVideoMetadata = defaultGetVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox = false
+}) => {
+  const [documentMetadata, setDocumentMetadata] = useState({});
+  const [videoMetadata, setVideoMetadata] = 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;
+    }
+  });
+  useEffect(() => {
+    const getMetadata = (attachments2) => __async(null, null, function* () {
+      const docMetadata = {};
+      const videoMetadata2 = {};
+      yield Promise.all(
+        attachments2.map((attachment) => __async(null, 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] = useState(void 0);
+  const lightboxItems = mediaAttachments.filter(
+    (a) => a.type === "photo" || a.type === "video"
+  );
+  const handleMediaAttachmentClick = (url, type) => {
+    if (type === "photo" || type === "video") {
+      setCurrentLightboxUrl(url);
+    }
+    onMediaAttachmentClick == null ? void 0 : onMediaAttachmentClick(url, type);
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: "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-[17px] text-grayscale-900 font-poppins" }, "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;
+    if (media.type === "video") {
+      const metadata = videoMetadata[media.url];
+      title = (_a = title || (metadata == null ? void 0 : metadata.title)) != null ? _a : "";
+      getBaseUrl(media.url);
+      innerContent = /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: "bg-cover bg-no-repeat bg-center relative 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] h-full",
+          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 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))
+      );
+    } else {
+      innerContent = /* @__PURE__ */ React.createElement("div", { className: "h-full w-full flex items-center justify-center" }, /* @__PURE__ */ React.createElement("img", { className: "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(
+        "div",
+        {
+          key: index,
+          className: "flex media-attachment-box bg-grayscale-100 items-center rounded-[15px] w-full"
+        },
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            className: "relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0",
+            onClick: (e) => {
+              e.stopPropagation();
+              handleMediaAttachmentClick(media.url, media.type);
+            }
+          },
+          innerContent
+        ),
+        title && /* @__PURE__ */ React.createElement("div", { className: "text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3" }, title)
+      );
+    }
+    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 : {};
+    let baseUrl = "";
+    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("div", { className: "flex flex-col" }, /* @__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-700 font-[500] text-[12px] font-poppins 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-[500] text-[12px] font-poppins 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("div", { key: index, className }, innerContent);
+  })));
+};
+
+const VerificationRow = ({ verification }) => {
+  var _a, _b;
+  const [showInfo, setShowInfo] = useState(false);
+  const statusColor = getColorForVerificationStatus(verification.status);
+  const getIcon = () => {
+    switch (verification.status) {
+      case VerificationStatusEnum.Success:
+        return /* @__PURE__ */ React.createElement(AcuteCheckmark, null);
+      case VerificationStatusEnum.Error:
+        return /* @__PURE__ */ React.createElement(ExclamationPoint, null);
+      case VerificationStatusEnum.Failed:
+        return /* @__PURE__ */ React.createElement(X, { className: "w-[15px] h-[15px]" });
+    }
+  };
+  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
+  if (verification.status === VerificationStatusEnum.Failed) {
+    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
+  }
+  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] 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: "text-[14px] text-grayscale-900 font-poppins" }, primaryText));
+};
+
+const VerificationsBox = ({ verificationItems }) => {
+  const [showInfo, setShowInfo] = useState(false);
+  return /* @__PURE__ */ React.createElement("div", { className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center" }, /* @__PURE__ */ React.createElement("h3", { className: "text-[17px] text-grayscale-900 font-poppins" }, "Verifications"), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "ml-auto",
+      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)
+    }
+  ), verificationItems.map((verification, index) => /* @__PURE__ */ React.createElement(VerificationRow, { key: index, verification })));
+};
+
+const TruncateTextBox = ({
+  headerText,
+  headerClassName = "",
+  text,
+  truncateThreshold = 132,
+  children,
+  className = "truncate-text-box"
+}) => {
+  const needsTruncate = (text == null ? void 0 : text.length) > truncateThreshold;
+  const [showFullText, setShowFullText] = useState(false);
+  const truncated = needsTruncate && !showFullText;
+  const displayText = truncated ? text.substring(0, truncateThreshold) : text;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `${className} w-full bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px]`
+    },
+    /* @__PURE__ */ React.createElement("h3", { className: `${headerClassName} text-[17px] text-grayscale-900 font-poppins` }, headerText),
+    /* @__PURE__ */ React.createElement("p", { className: "text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start" }, displayText, truncated && /* @__PURE__ */ React.createElement(React.Fragment, null, "...", /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "text-indigo-500 text-[12px]",
+        onClick: (e) => {
+          e.stopPropagation();
+          setShowFullText(true);
+        }
+      },
+      "Show more"
+    )), needsTruncate && showFullText && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        className: "text-indigo-500 text-[12px]",
+        onClick: (e) => {
+          e.stopPropagation();
+          setShowFullText(false);
+        }
+      },
+      "Show less"
+    )),
+    children
+  );
+};
+
+const MeritBadgeBackFace = ({
+  credential,
+  categoryType,
+  verificationItems,
+  customSkillsComponent,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox,
+  showBackButton,
+  handleViewFrontFace,
+  customLinkedCredentialsComponent
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { createdAt, credentialSubject } = getInfoFromCredential(credential, "MMM dd, yyyy", {
+    uppercaseDate: false
+  });
+  const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
+  const criteria = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
+  const alignment = (_d = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _d.alignment;
+  const credentialDarkColor = getCategoryDarkColor(categoryType);
+  let bgColor = `bg-${credentialDarkColor}`;
+  if (categoryType === LCCategoryEnum.accommodations) {
+    bgColor = "bg-amber-700";
+  } else if (categoryType === LCCategoryEnum.accomplishments) {
+    bgColor = "bg-lime-700";
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "button",
+      onClick: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace(),
+      className: `flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[400px] ${bgColor}`
+    },
+    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: () => handleViewFrontFace == null ? void 0 : handleViewFrontFace()
+      },
+      /* @__PURE__ */ React.createElement(LeftArrow, { className: "text-white", size: "25" }),
+      "Details"
+    )) : /* @__PURE__ */ React.createElement("h1", { className: "text-white text-center text-[22px] font-jacques" }, "Details"),
+    /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "About", text: description }, /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        className: `text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${description ? "pt-[10px] border-t-[1px] border-solid border-grayscale-200" : ""}`
+      },
+      "Awarded on ",
+      createdAt
+    )),
+    criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, { headerText: "Criteria", text: criteria }),
+    customLinkedCredentialsComponent && customLinkedCredentialsComponent,
+    ((_f = (_e = credential.skills) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.createElement(SkillsBox, { skills: (_g = credential.skills) != null ? _g : [] })),
+    credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(
+      MediaAttachmentsBox,
+      {
+        attachments: credential.attachments,
+        getFileMetadata,
+        getVideoMetadata,
+        onMediaAttachmentClick,
+        enableLightbox
+      }
+    ),
+    alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, { alignment, style: "MeritBadge" }),
+    verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, { verificationItems }),
+    /* @__PURE__ */ React.createElement("span", { className: "hidden bg-amber-700 bg-spice-700 bg-rose-700 bg-yellow-700 bg-teal-700" })
+  );
+};
+
+const MeritBadgeCornerIcon = ({ categoryType, position }) => {
+  const credentialPrimaryColor = getCategoryLightColor(categoryType);
+  const credentialIcon = getCategoryIcon(categoryType, "25");
+  let iconPositionClassName, cornerPositionClassName;
+  switch (position) {
+    case "top-left":
+      iconPositionClassName = "top-[3px] left-[3px] pb-[10px] pr-[10px] pl-[4px] pt-[4px]";
+      cornerPositionClassName = "bottom-[-1px] right-0";
+      break;
+    case "top-right":
+      iconPositionClassName = "top-[3px] right-[3px] pl-[10px] pb-[10px] pr-[4px] pt-[4px]";
+      cornerPositionClassName = "bottom-[-1px] left-0 rotate-90";
+      break;
+    case "bottom-left":
+      iconPositionClassName = "bottom-[3px] left-[3px] pr-[10px] pt-[10px] pl-[4px] pb-[4px]";
+      cornerPositionClassName = "top-0 right-0 rotate-[270deg]";
+      break;
+    case "bottom-right":
+      iconPositionClassName = "bottom-[3px] right-[3px] pl-[10px] pt-[10px] pr-[4px] pb-[4px]";
+      cornerPositionClassName = "top-[-1px] left-0 rotate-180";
+      break;
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `text-${credentialPrimaryColor} rounded-full bg-white absolute ${iconPositionClassName}`
+    },
+    credentialIcon,
+    /* @__PURE__ */ React.createElement(RoundedCorner, { className: `absolute ${cornerPositionClassName}` })
+  );
+};
+
+const MeritBadgeRibbon = ({ className = "", image }) => {
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: "207",
+      height: "170",
+      viewBox: "0 0 207 170",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className
+    },
+    /* @__PURE__ */ React.createElement("g", { filter: "url(#filter0_d_10755_290433)" }, /* @__PURE__ */ React.createElement("circle", { cx: "102.988", cy: "83", r: "81.5", fill: "white", stroke: "white", strokeWidth: "3" }), /* @__PURE__ */ React.createElement(
+      "path",
+      {
+        d: "M3.94446 50C3.41654 50 2.92748 50.2775 2.65674 50.7307C2.38599 51.1839 2.37343 51.7461 2.62365 52.211L19.4659 83.5L2.62365 114.789C2.37343 115.254 2.386 115.816 2.65674 116.269C2.92748 116.722 3.41654 117 3.94446 117L203.056 117C203.583 117 204.073 116.722 204.343 116.269C204.614 115.816 204.627 115.254 204.376 114.789L187.534 83.5L204.376 52.211C204.627 51.7461 204.614 51.1839 204.343 50.7307C204.073 50.2775 203.583 50 203.056 50L3.94446 50Z",
+        fill: "currentColor",
+        stroke: "white",
+        strokeWidth: "3",
+        strokeLinejoin: "round"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        x: "25.3273",
+        y: "5.34741",
+        width: "156.6",
+        height: "156.6",
+        rx: "78.2999",
+        fill: "#FBFBFC"
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "rect",
+      {
+        x: "25.3273",
+        y: "5.34741",
+        width: "156.6",
+        height: "156.6",
+        rx: "78.2999",
+        stroke: "currentColor",
+        strokeWidth: "3"
+      }
+    ), /* @__PURE__ */ React.createElement("rect", { x: "29.8273", y: "9.84741", width: "147.6", height: "147.6", fill: "none" })),
+    /* @__PURE__ */ React.createElement("clipPath", { id: "circleClip" }, /* @__PURE__ */ React.createElement("circle", { cx: "103.5", cy: "84", r: "75" })),
+    /* @__PURE__ */ React.createElement(
+      "image",
+      {
+        xlinkHref: image,
+        x: "28.5",
+        y: "9",
+        width: "150",
+        height: "150",
+        clipPath: "url(#circleClip)"
+      }
+    ),
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement(
+      "filter",
+      {
+        id: "filter0_d_10755_290433",
+        x: "0.944458",
+        y: "0",
+        width: "205.111",
+        height: "170",
+        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.2 0"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "feBlend",
+        {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_10755_290433"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        "feBlend",
+        {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_10755_290433",
+          result: "shape"
+        }
+      )
+    ))
+  );
+};
+
+const MeritBadgeImageDisplay = ({
+  imageUrl,
+  className = ""
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: `flex items-center justify-center w-[176px] h-[176px] rounded-full bg-white z-50 ${className}`
+    },
+    /* @__PURE__ */ React.createElement(MeritBadgeRibbon, { className: "absolute z-[1]", image: imageUrl })
+  );
+};
+
+const MeritBadgeProfileImageDisplay = ({
+  imageUrl,
+  showSeal = false,
+  className = "",
+  imageComponent,
+  size = "big",
+  userName
+}) => {
+  const imageClassName = `${size === "big" ? "h-[60px] w-[60px]" : "h-[39px] w-[39px]"} rounded-full overflow-hidden ${showSeal ? "absolute border-[2px] border-solid border-grayscale-200" : ""}`;
+  return /* @__PURE__ */ React.createElement("div", { className }, showSeal && /* @__PURE__ */ React.createElement("div", { className: "bg-white rounded-full p-[5px]" }, /* @__PURE__ */ React.createElement(IssuerSeal, { size: "58" })), imageComponent && /* @__PURE__ */ React.createElement("div", { className: imageClassName }, imageComponent), !imageComponent && /* @__PURE__ */ React.createElement(
+    UserProfilePicture,
+    {
+      customContainerClass: `${imageClassName} ${!imageUrl ? "pt-[6px]" : ""}`,
+      customImageClass: "h-full w-full object-cover",
+      user: { image: imageUrl, name: userName }
+    }
+  ));
+};
+
+const MeritBadgeFrontFace = ({
+  isFront,
+  credential,
+  categoryType,
+  issuerOverride,
+  issueeOverride,
+  knownDIDRegistry,
+  subjectImageComponent,
+  issuerImageComponent,
+  customBodyCardComponent,
+  hideIssueDate,
+  handleViewBackFace,
+  showDetailsBtn = false,
+  formattedDisplayType,
+  customBodyContentSlot
+}) => {
+  var _a;
+  const {
+    title = "",
+    createdAt,
+    issuer: _issuer = "",
+    issuee: _issuee = "",
+    credentialSubject,
+    imageUrl
+  } = getInfoFromCredential(credential, "MMM dd, yyyy", { uppercaseDate: false });
+  const issuee = issueeOverride || _issuee;
+  const issuer = issuerOverride || _issuer;
+  (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
+  const credentialLightColor = getCategoryLightColor(categoryType);
+  const credentialDarkColor = getCategoryDarkColor(categoryType);
+  let categoryTitle = categoryType;
+  let textLightColor = `text-${credentialLightColor}`;
+  let textDarkColor = `text-${credentialDarkColor}`;
+  let borderColor = `border-${credentialLightColor}`;
+  if (categoryType === LCCategoryEnum.accommodations) {
+    textLightColor = "text-violet-500";
+    textDarkColor = "text-violet-700";
+    borderColor = "border-violet-500";
+  } else if (categoryType === LCCategoryEnum.accomplishments) {
+    textLightColor = "text-yellow-500";
+    textDarkColor = "text-yellow-700";
+    borderColor = "border-yellow-500";
+    categoryTitle = "Portfolio";
+  } else if (categoryType === LCCategoryEnum.learningHistory) {
+    categoryTitle = "Study";
+  } else if (categoryType === LCCategoryEnum.workHistory) {
+    categoryTitle = "Experiences";
+    textLightColor = "text-cyan-500";
+    textDarkColor = "text-cyan-700";
+    borderColor = "border-cyan-500";
+  }
+  const issuerName = getNameFromProfile(issuer != null ? issuer : "");
+  const issueeName = getNameFromProfile(issuee != null ? issuee : "");
+  const issuerImage = getImageFromProfile(issuer != null ? issuer : "");
+  const issueeImage = getImageFromProfile(issuee != null ? issuee : "");
+  const issuerDid = typeof credential.issuer === "string" ? credential.issuer : credential.issuer.id;
+  let verifierState;
+  if ((credentialSubject == null ? void 0 : credentialSubject.id) === issuerDid && issuerDid && issuerDid !== "did:example:123") {
+    verifierState = VERIFIER_STATES.selfVerified;
+  } else {
+    if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "trusted") {
+      verifierState = VERIFIER_STATES.trustedVerifier;
+    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "untrusted") {
+      verifierState = VERIFIER_STATES.untrustedVerifier;
+    } else if ((knownDIDRegistry == null ? void 0 : knownDIDRegistry.source) === "unknown") {
+      verifierState = VERIFIER_STATES.unknownVerifier;
+    } else {
+      verifierState = VERIFIER_STATES.unknownVerifier;
+    }
+  }
+  verifierState === VERIFIER_STATES.selfVerified;
+  const issueeImageExists = issueeImage || subjectImageComponent;
+  return /* @__PURE__ */ React.createElement(
+    "section",
+    {
+      role: "button",
+      onClick: () => handleViewBackFace == null ? void 0 : handleViewBackFace(),
+      className: "relative p-[13px] mt-[68px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200 min-w-[295px]"
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "w-[calc(100%-26px)] absolute top-[-72px]" }, /* @__PURE__ */ React.createElement(
+      MeritBadgeImageDisplay,
+      {
+        imageUrl: imageUrl != null ? imageUrl : "",
+        className: `mx-auto ${textLightColor}`
+      }
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] w-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center text-grayscale-900" }, /* @__PURE__ */ React.createElement("span", { className: "text-[16px] leading-[150%] font-jacques" }, issueeName || /* @__PURE__ */ React.createElement(Line, { width: "60" })), /* @__PURE__ */ React.createElement("span", { className: "text-[14px] leading-[150%] font-jacques" }, "has met the requirements for")), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.createElement("h1", { className: "text-grayscale-900 text-center text-[25px] font-jacques w-full" }, title), /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]`
+        },
+        formattedDisplayType
+      ))),
+      customBodyCardComponent,
+      issueeImageExists && !customBodyCardComponent && /* @__PURE__ */ React.createElement(
+        MeritBadgeProfileImageDisplay,
+        {
+          imageUrl: issueeImage,
+          imageComponent: subjectImageComponent,
+          className: `flex justify-center items-center ${textDarkColor}`
+        }
+      ),
+      !issueeImageExists && !customBodyCardComponent && /* @__PURE__ */ React.createElement("div", { className: "h-[50px] w-[50px] rounded-full bg-grayscale-500 flex items-center justify-center" }, /* @__PURE__ */ React.createElement(Smiley, null)),
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col w-full" }, /* @__PURE__ */ React.createElement("div", { className: "text-[14px] text-grayscale-900 flex flex-col items-center w-full mb-[10px]" }, /* @__PURE__ */ React.createElement("span", { className: "font-jacques flex gap-[5px] items-center w-full overflow-ellipsis whitespace-nowrap overflow-hidden justify-center" }, issueeName === "0 person" ? "Not yet awarded" : /* @__PURE__ */ React.createElement(React.Fragment, null, "Awarded on ", createdAt, " by"))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-[5px] items-center w-full" }, /* @__PURE__ */ React.createElement("span", { className: "mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center overflow-ellipsis whitespace-normal scrollbar-hide" }, issuerName))),
+      /* @__PURE__ */ React.createElement(
+        MeritBadgeProfileImageDisplay,
+        {
+          imageUrl: issuerImage,
+          userName: issuerName,
+          imageComponent: issuerImageComponent,
+          className: `w-[calc(100%-26px)] flex justify-center items-center ${textLightColor}`,
+          size: "small",
+          showSeal: true
+        }
+      ),
+      customBodyContentSlot && customBodyContentSlot,
+      /* @__PURE__ */ React.createElement("div", { className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]` }, categoryTitle)
+    ),
+    categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, { categoryType, position: "top-left" }), /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, { categoryType, position: "top-right" }), /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, { categoryType, position: "bottom-left" }), /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, { categoryType, position: "bottom-right" })),
+    /* @__PURE__ */ React.createElement("div", { className: "absolute bottom-0 w-[calc(100%-26px)] flex justify-center" }, /* @__PURE__ */ React.createElement(
+      VerifierStateBadgeAndText,
+      {
+        verifierState,
+        className: "bg-white px-[5px] pb-[5px]"
+      }
+    )),
+    /* @__PURE__ */ React.createElement("span", { className: "hidden border-rose-500 text-spice-500 border-spice-500 border-cyan-500 text-cyan-500 border-indigo-500 border-sp-purple-base" })
+  );
+};
+
+const MeritBadgeDisplayCard = ({
+  credential,
+  categoryType,
+  verificationItems,
+  issuerOverride,
+  issueeOverride,
+  subjectImageComponent,
+  issuerImageComponent,
+  customBodyCardComponent,
+  knownDIDRegistry,
+  hideIssueDate,
+  customSkillsComponent,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox,
+  handleXClick,
+  onDotsClick,
+  isFrontOverride,
+  setIsFrontOverride,
+  hideNavButtons,
+  showBackButton = false,
+  showDetailsBtn = false,
+  formattedDisplayType,
+  customLinkedCredentialsComponent,
+  customBodyContentSlot
+}) => {
+  const [_isFront, _setIsFront] = useState(isFrontOverride != null ? isFrontOverride : true);
+  const isFront = isFrontOverride != null ? isFrontOverride : _isFront;
+  const setIsFront = setIsFrontOverride != null ? setIsFrontOverride : _setIsFront;
+  return /* @__PURE__ */ React.createElement("section", { className: "w-full flex flex-col gap-[15px] items-center justify-center relative min-w-[220px]" }, /* @__PURE__ */ React.createElement("section", { className: "max-w-[350px] w-full" }, isFront && /* @__PURE__ */ React.createElement(
+    MeritBadgeFrontFace,
+    {
+      credential,
+      categoryType,
+      issuerOverride,
+      issueeOverride,
+      knownDIDRegistry,
+      subjectImageComponent,
+      issuerImageComponent,
+      customBodyCardComponent,
+      hideIssueDate,
+      handleViewBackFace: () => setIsFront(!isFront),
+      isFront,
+      showDetailsBtn,
+      formattedDisplayType,
+      customBodyContentSlot
+    }
+  ), !isFront && /* @__PURE__ */ React.createElement(
+    MeritBadgeBackFace,
+    {
+      credential,
+      categoryType,
+      verificationItems,
+      getFileMetadata,
+      getVideoMetadata,
+      onMediaAttachmentClick,
+      enableLightbox,
+      showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+      handleViewFrontFace: () => setIsFront(!isFront),
+      customLinkedCredentialsComponent
+    }
+  ), onDotsClick && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom",
+      onClick: onDotsClick
+    },
+    /* @__PURE__ */ React.createElement(
+      "img",
+      {
+        alt: "Menu dropdown icon",
+        className: "h-[20px] w-[20px]",
+        src: ThreeDots
+      }
+    )
+  )), !hideNavButtons && /* @__PURE__ */ React.createElement("div", { className: "flex gap-[10px] font-mouse text-[30px] leading-[28px] tracking-[0.75px] relative top-[-10px] left-0 w-full" }, !isFront && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] flex mx-auto justify-center items-center gap-[5px] border-[3px] border-solid border-white",
+      onClick: () => setIsFront(!isFront)
+    },
+    /* @__PURE__ */ React.createElement(FatArrow, { direction: "left" }),
+    " Back"
+  ), handleXClick && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: handleXClick,
+      className: "bg-white text-grayscale-900 rounded-[20px] py-[15px] px-[20px] grow"
+    },
+    "Close"
+  ), isFront && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] mx-auto flex justify-center items-center gap-[5px] border-[3px] border-solid border-white",
+      onClick: () => setIsFront(!isFront)
+    },
+    "Details ",
+    /* @__PURE__ */ React.createElement(FatArrow, { direction: "right" })
+  )));
+};
+
+export { MeritBadgeBackFace as M, MeritBadgeDisplayCard as a, MeritBadgeFrontFace as b };
+//# sourceMappingURL=MeritBadgeDisplayCard-4b8fe8e4.js.map