@learncard/react 2.7.9 → 2.7.11

package/dist/esm/MeritBadgeDisplayCard-3ac56267.js

@@ -0,0 +1,816 @@
+import React, { useState, useEffect } from 'react';
+import { I as InfoIcon, g as getBaseUrl, a as VideoIcon, C as Camera, G as GenericDocumentIcon, L as LinkIcon, p as prettyBytes, c as capitalize, X, E as ExclamationPoint, A as AcuteCheckmark, b as LeftArrow, d as SkillsBox, R as RoundedCorner, e as IssuerSeal, V as VERIFIER_STATES, h as Line, f as Smiley, i as VerifierStateBadgeAndText, F as FatArrow } from './VerifierStateBadgeAndText-86214479.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-3d9244b6.js';
+import { a as LCCategoryEnum } from './index-28917993.js';
+import { V as VerificationStatusEnum } from './types.esm-099d2f24.js';
+import CaretRightFilled from './CaretRightFilled.svg';
+import { L as Lightbox } from './Lightbox-a1aab9ea.js';
+import ThreeDots from './DotsThreeOutline.svg';
+
+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: () => 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(undefined, 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(undefined, 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: ""
+  };
+});
+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(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] = 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 bg-grayscale-100 items-center rounded-[15px] w-full"
+      }, /* @__PURE__ */ React.createElement("button", {
+        className: "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, null);
+    }
+  };
+  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
+}) => {
+  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
+  }), ((_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);
+  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 = "" }) => {
+  return /* @__PURE__ */ React.createElement("svg", {
+    width: "167",
+    height: "131",
+    viewBox: "0 0 167 131",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className
+  }, /* @__PURE__ */ React.createElement("circle", {
+    cx: "83.1426",
+    cy: "65.5",
+    r: "64",
+    fill: "white",
+    stroke: "white",
+    strokeWidth: "3"
+  }), /* @__PURE__ */ React.createElement("path", {
+    d: "M29.3926 3.70096C28.9354 3.437 28.3731 3.43281 27.912 3.68993C27.4509 3.94705 27.159 4.42762 27.1432 4.95531L26.3214 32.5274L2.85421 47.0252C2.40508 47.3026 2.13488 47.7958 2.14274 48.3236C2.15061 48.8515 2.43538 49.3363 2.89258 49.6003L137.608 127.378C138.065 127.642 138.627 127.646 139.088 127.389C139.549 127.132 139.841 126.651 139.857 126.124L140.679 98.5517L164.146 84.0539C164.595 83.7764 164.865 83.2833 164.857 82.7554C164.85 82.2276 164.565 81.7427 164.108 81.4787L29.3926 3.70096Z",
+    fill: "#622599",
+    stroke: "white",
+    strokeWidth: "3",
+    strokeLinejoin: "round"
+  }), /* @__PURE__ */ React.createElement("rect", {
+    x: "22.1426",
+    y: "4.5",
+    width: "123",
+    height: "123",
+    rx: "61.5",
+    fill: "white"
+  }), /* @__PURE__ */ React.createElement("rect", {
+    x: "22.1426",
+    y: "4.5",
+    width: "123",
+    height: "123",
+    rx: "61.5",
+    stroke: "#622599",
+    strokeWidth: "3"
+  }), /* @__PURE__ */ React.createElement("rect", {
+    x: "28.6426",
+    y: "11",
+    width: "110",
+    height: "110",
+    rx: "55",
+    stroke: "#622599",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeDasharray: "5 5"
+  }), /* @__PURE__ */ React.createElement("rect", {
+    x: "33.6426",
+    y: "16",
+    width: "100",
+    height: "100",
+    fill: "url(#pattern0_10101_43072)"
+  }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("pattern", {
+    id: "pattern0_10101_43072",
+    patternContentUnits: "objectBoundingBox",
+    width: "1",
+    height: "1"
+  }, /* @__PURE__ */ React.createElement("use", {
+    xlinkHref: "#image0_10101_43072",
+    transform: "scale(0.00416667)"
+  }))));
+};
+
+const MeritBadgeImageDisplay = ({
+  imageUrl,
+  className = ""
+}) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex items-center justify-center w-[120px] h-[120px] rounded-full bg-white z-50 ${className}`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "relative left-[1px] top-[1px] w-full h-full p-[10px] flex items-center justify-center rounded-full overflow-hidden object-contain z-[2]"
+  }, /* @__PURE__ */ React.createElement("img", {
+    src: imageUrl,
+    alt: "merit badge thumbnail"
+  })), /* @__PURE__ */ React.createElement(MeritBadgeRibbon, {
+    className: "absolute z-[1]"
+  }));
+};
+
+const MeritBadgeProfileImageDisplay = ({
+  imageUrl,
+  showSeal = false,
+  className = "",
+  imageComponent,
+  size = "big"
+}) => {
+  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("img", {
+    className: imageClassName,
+    src: imageUrl
+  }));
+};
+
+const MeritBadgeFrontFace = ({
+  isFront,
+  credential,
+  categoryType,
+  issuerOverride,
+  issueeOverride,
+  trustedAppRegistry,
+  subjectImageComponent,
+  issuerImageComponent,
+  customBodyCardComponent,
+  hideIssueDate,
+  handleViewBackFace,
+  showDetailsBtn = false
+}) => {
+  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-amber-500";
+    textDarkColor = "text-amber-700";
+    borderColor = "border-amber-500";
+  } else if (categoryType === LCCategoryEnum.accomplishments) {
+    textLightColor = "text-lime-500";
+    textDarkColor = "text-lime-700";
+    borderColor = "border-lime-500";
+  } else if (categoryType === LCCategoryEnum.learningHistory) {
+    categoryTitle = "Course";
+  } else if (categoryType === LCCategoryEnum.workHistory) {
+    categoryTitle = "Experiences";
+    textLightColor = "text-blue-500";
+    textDarkColor = "text-blue-700";
+    borderColor = "border-blue-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 {
+    const appRegistryEntry = trustedAppRegistry == null ? void 0 : trustedAppRegistry.find((registryEntry) => registryEntry.did === issuerDid);
+    if (appRegistryEntry) {
+      verifierState = appRegistryEntry.isTrusted ? VERIFIER_STATES.trustedVerifier : VERIFIER_STATES.untrustedVerifier;
+    } 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-[25px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200 max-w-[300px]"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "w-[calc(100%-26px)] absolute top-[-19px]"
+  }, /* @__PURE__ */ React.createElement(MeritBadgeImageDisplay, {
+    imageUrl: imageUrl != null ? imageUrl : "",
+    className: "mx-auto"
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: `flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[50px] border-solid border-[4px] ${borderColor} rounded-[30px]`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-[5px]"
+  }, /* @__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-[20px] font-jacques"
+  }, title), /* @__PURE__ */ React.createElement("div", {
+    className: `${textLightColor} uppercase text-[14px] font-poppins`
+  }, categoryTitle))), 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: "border-t-[2px] border-solid border-sp-purple-base flex flex-col py-[20px] 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(VerifierStateBadgeAndText, {
+    verifierState
+  })))), 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(MeritBadgeProfileImageDisplay, {
+    imageUrl: issuerImage,
+    imageComponent: issuerImageComponent,
+    className: "w-[calc(100%-26px)] absolute bottom-0 flex justify-center items-center text-sp-purple-base",
+    size: "small",
+    showSeal: true
+  }), /* @__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,
+  trustedAppRegistry,
+  hideIssueDate,
+  customSkillsComponent,
+  getFileMetadata,
+  getVideoMetadata,
+  onMediaAttachmentClick,
+  enableLightbox,
+  handleXClick,
+  onDotsClick,
+  isFrontOverride,
+  setIsFrontOverride,
+  hideNavButtons,
+  showBackButton = false,
+  showDetailsBtn = false
+}) => {
+  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] justify-center relative min-w-[220px]"
+  }, /* @__PURE__ */ React.createElement("section", {
+    className: "mx-auto"
+  }, isFront && /* @__PURE__ */ React.createElement(MeritBadgeFrontFace, {
+    credential,
+    categoryType,
+    issuerOverride,
+    issueeOverride,
+    trustedAppRegistry,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    hideIssueDate,
+    handleViewBackFace: () => setIsFront(!isFront),
+    isFront,
+    showDetailsBtn
+  }), !isFront && /* @__PURE__ */ React.createElement(MeritBadgeBackFace, {
+    credential,
+    categoryType,
+    verificationItems,
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox,
+    showBackButton: showBackButton && !hideNavButtons || showDetailsBtn,
+    handleViewFrontFace: () => setIsFront(!isFront)
+  }), 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-3ac56267.js.map