@learncard/react 2.6.54 → 2.6.56

package/dist/cjs/VCDisplayCard2-487d3d88.js

@@ -1,1075 +0,0 @@
-'use strict';
-
-var React = require('react');
-var VCVerificationCheck = require('./VCVerificationCheck-46fa75d3.js');
-var DefaultFace = require('./default-face.jpeg');
-var credential_helpers = require('./credential.helpers-b8363e2e.js');
-var Lightbox = require('./Lightbox-f19e13d2.js');
-var types_esm = require('./types.esm-d5381f5d.js');
-var AwardRibbon = require('./AwardRibbon-14ba45fb.js');
-var index = require('./index-bee9764e.js');
-
-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 AcuteCheckmark = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "16",
-    height: "11",
-    viewBox: "0 0 16 11",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M0.5 4.26859L5.96103 10.5L15.3 0.5H10.6348L5.96103 6.3205L4.49338 4.06677L0.5 4.26859Z",
-    fill: "#00BA88"
-  }));
-};
-
-const Camera = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "25",
-    height: "24",
-    viewBox: "0 0 25 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M20.7415 5.81958H18.6871C18.0439 5.81958 17.4439 5.49798 17.0887 4.96518L16.2295 3.67398C15.8743 3.14118 15.2743 2.81958 14.6311 2.81958L10.6855 2.81958C10.0423 2.81958 9.44231 3.14118 9.08711 3.67398L8.22791 4.96518C7.87271 5.49798 7.27271 5.81958 6.62951 5.81958H4.57991C3.51911 5.81958 2.65991 6.67878 2.65991 7.73958L2.65991 18.8996C2.65991 19.9604 3.51911 20.8196 4.57991 20.8196L20.7415 20.8196C21.8023 20.8196 22.6615 19.9604 22.6615 18.8996L22.6615 7.73958C22.6615 6.67878 21.8023 5.81958 20.7415 5.81958ZM12.7399 17.738C10.0903 17.738 7.93991 15.5876 7.93991 12.938C7.93991 10.2884 10.0903 8.13798 12.7399 8.13798C15.3895 8.13798 17.5399 10.2884 17.5399 12.938C17.5399 15.5876 15.3895 17.738 12.7399 17.738Z",
-    fill: "white"
-  }));
-};
-
-const ExclamationPoint = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "5",
-    height: "11",
-    viewBox: "0 0 5 11",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M1.1338 6.58451L0.5 0.5H4.30282L3.66901 6.58451H1.1338ZM2.40141 10.5C1.85681 10.5 1.4108 10.3357 1.06338 10.007C0.715963 9.66901 0.542253 9.26995 0.542253 8.80986C0.542253 8.34037 0.715963 7.94601 1.06338 7.62676C1.4108 7.30751 1.85681 7.14789 2.40141 7.14789C2.9554 7.14789 3.40141 7.30751 3.73944 7.62676C4.08685 7.94601 4.26056 8.34037 4.26056 8.80986C4.26056 9.26995 4.08685 9.66901 3.73944 10.007C3.40141 10.3357 2.9554 10.5 2.40141 10.5Z",
-    fill: "#FACC15"
-  }));
-};
-
-const GenericDocumentIcon = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "41",
-    height: "40",
-    viewBox: "0 0 41 40",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M5.5 4.66675C5.5 3.0099 6.84315 1.66675 8.5 1.66675H18.6813C21.3361 1.66675 23.8555 2.83885 25.5655 4.86953L33.3842 14.1542C34.7507 15.7769 35.5 17.8301 35.5 19.9515V35.3334C35.5 36.9903 34.1569 38.3334 32.5 38.3334H8.5C6.84315 38.3334 5.5 36.9903 5.5 35.3334V4.66675Z",
-    fill: "#FF3636"
-  }), /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M22 13V2.5C26 3.5 34.5 14 35.5 18H27C23 18 22 16 22 13Z",
-    fill: "#FF7A7A"
-  }));
-};
-
-const InfoIcon = ({ className = "", color = "#A8ACBD" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "22",
-    height: "21",
-    viewBox: "0 0 22 21",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M11.0003 0.34375C8.99153 0.34375 7.02793 0.939404 5.35774 2.05539C3.68755 3.17137 2.3858 4.75756 1.6171 6.61337C0.848395 8.46918 0.647267 10.5113 1.03915 12.4814C1.43103 14.4515 2.39832 16.2612 3.8187 17.6816C5.23907 19.1019 7.04874 20.0692 9.01886 20.4611C10.989 20.853 13.0311 20.6519 14.8869 19.8832C16.7427 19.1144 18.3289 17.8127 19.4449 16.1425C20.5608 14.4723 21.1565 12.5087 21.1565 10.5C21.1534 7.80735 20.0824 5.22588 18.1784 3.32188C16.2744 1.41789 13.6929 0.346862 11.0003 0.34375V0.34375ZM11.0002 5.03125C11.2319 5.03125 11.4585 5.09998 11.6512 5.22875C11.8439 5.35751 11.9941 5.54054 12.0828 5.75467C12.1715 5.9688 12.1947 6.20443 12.1495 6.43175C12.1043 6.65907 11.9927 6.86788 11.8288 7.03177C11.6649 7.19566 11.4561 7.30727 11.2288 7.35248C11.0015 7.3977 10.7658 7.37449 10.5517 7.2858C10.3376 7.1971 10.1545 7.0469 10.0258 6.85418C9.89701 6.66147 9.82828 6.4349 9.82828 6.20313C9.82828 6.04923 9.85859 5.89685 9.91748 5.75467C9.97637 5.61249 10.0627 5.4833 10.1715 5.37448C10.2803 5.26566 10.4095 5.17934 10.5517 5.12045C10.6939 5.06156 10.8463 5.03125 11.0002 5.03125H11.0002ZM11.7815 15.9688H11.0003C10.8976 15.9688 10.796 15.9486 10.7012 15.9094C10.6064 15.8702 10.5202 15.8126 10.4477 15.7401C10.3751 15.6675 10.3176 15.5814 10.2783 15.4865C10.2391 15.3917 10.2189 15.2901 10.219 15.1875V10.5C10.0118 10.5 9.81309 10.4177 9.66657 10.2712C9.52006 10.1247 9.43775 9.92595 9.43775 9.71875C9.43775 9.51155 9.52006 9.31284 9.66657 9.16632C9.81309 9.01981 10.0118 8.9375 10.219 8.9375H11.0003C11.1029 8.93744 11.2045 8.95761 11.2993 8.99685C11.3941 9.03609 11.4803 9.09363 11.5528 9.16619C11.6254 9.23875 11.6829 9.3249 11.7222 9.41971C11.7614 9.51452 11.7816 9.61614 11.7815 9.71875V14.4063C11.9887 14.4063 12.1874 14.4886 12.3339 14.6351C12.4804 14.7816 12.5628 14.9803 12.5628 15.1875C12.5628 15.3947 12.4804 15.5934 12.3339 15.7399C12.1874 15.8864 11.9887 15.9688 11.7815 15.9688Z",
-    fill: color
-  }));
-};
-
-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 LinkIcon = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "33",
-    height: "32",
-    viewBox: "0 0 33 32",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M16.8117 7.91003L18.2677 6.45403C18.7784 5.94292 19.3847 5.53742 20.0521 5.26071C20.7195 4.98399 21.4348 4.84148 22.1573 4.84131C22.8798 4.84114 23.5953 4.98332 24.2628 5.25973C24.9303 5.53613 25.5368 5.94135 26.0477 6.45222C26.5586 6.9631 26.9638 7.56962 27.2402 8.23714C27.5166 8.90466 27.6588 9.6201 27.6586 10.3426C27.6584 11.0651 27.5159 11.7804 27.2392 12.4478C26.9625 13.1152 26.557 13.7216 26.0459 14.2322L22.5104 17.7677C21.9996 18.2785 21.3933 18.6836 20.726 18.96C20.0587 19.2364 19.3435 19.3787 18.6213 19.3787C17.899 19.3787 17.1838 19.2364 16.5165 18.96C15.8492 18.6836 15.2429 18.2785 14.7322 17.7677",
-    stroke: "#6366F1",
-    strokeWidth: "3",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M16.188 24.0902L14.7322 25.546C14.2216 26.0571 13.6152 26.4626 12.9478 26.7393C12.2804 27.016 11.5651 27.1585 10.8426 27.1587C10.1201 27.1589 9.40466 27.0167 8.73714 26.7403C8.06962 26.4639 7.4631 26.0586 6.95222 25.5478C6.44135 25.0369 6.03613 24.4304 5.75973 23.7629C5.48332 23.0953 5.34114 22.3799 5.34131 21.6574C5.34148 20.9349 5.48399 20.2195 5.76071 19.5521C6.03742 18.8848 6.44292 18.2784 6.95403 17.7678L10.4896 14.2323C11.0003 13.7215 11.6066 13.3164 12.2739 13.04C12.9412 12.7636 13.6564 12.6213 14.3787 12.6213C15.1009 12.6213 15.8161 12.7636 16.4834 13.04C17.1507 13.3164 17.757 13.7215 18.2677 14.2323",
-    stroke: "#6366F1",
-    strokeWidth: "3",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
-};
-
-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 VideoIcon = ({ className = "", size = "25" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: size,
-    height: size,
-    viewBox: "0 0 25 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M6.61304 4.5H12.4051C14.8271 4.5 16.5181 6.16904 16.5181 8.56091V15.4391C16.5181 17.831 14.8271 19.5 12.4051 19.5H6.61304C4.19102 19.5 2.5 17.831 2.5 15.4391V8.56091C2.5 6.16904 4.19102 4.5 6.61304 4.5ZM20.458 6.87898C20.897 6.65563 21.412 6.67898 21.831 6.94294C22.25 7.20589 22.5 7.66274 22.5 8.16223V15.8384C22.5 16.3389 22.25 16.7947 21.831 17.0577C21.602 17.2008 21.346 17.2739 21.088 17.2739C20.873 17.2739 20.658 17.2231 20.457 17.1206L18.976 16.3734C18.428 16.0952 18.088 15.5369 18.088 14.9165V9.08305C18.088 8.46173 18.428 7.90335 18.976 7.62721L20.458 6.87898Z",
-    fill: "white"
-  }));
-};
-
-const X = ({ className = "" }) => {
-  return /* @__PURE__ */ React__default["default"].createElement("svg", {
-    width: "11",
-    height: "11",
-    viewBox: "0 0 11 11",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className
-  }, /* @__PURE__ */ React__default["default"].createElement("path", {
-    d: "M7.47753 10.25C7.20582 9.8045 6.92868 9.37104 6.6461 8.94962C6.37439 8.52218 6.08637 8.09173 5.78206 7.65827C5.49948 8.07969 5.22233 8.50412 4.95062 8.93156C4.67891 9.35298 4.41807 9.78042 4.1681 10.2139L0.5 10.1055C1.15211 9.33492 1.78247 8.57335 2.39111 7.82082C3.01061 7.06828 3.60294 6.3007 4.1681 5.51806C3.5812 4.74747 2.98344 3.98891 2.3748 3.2424C1.77704 2.48986 1.17384 1.73131 0.565211 0.96673L4.38003 0.75C4.77129 1.57478 5.23864 2.3815 5.78206 3.17015C6.01029 2.77883 6.24397 2.38451 6.48307 1.98717C6.73305 1.58983 6.96672 1.17744 7.18409 0.75L10.95 0.912548C10.2979 1.67712 9.67839 2.43267 9.0915 3.17918C8.5046 3.9257 7.92314 4.68124 7.34711 5.44582C7.9014 6.21039 8.46113 6.95691 9.02629 7.68536C9.60231 8.41382 10.1783 9.1513 10.7544 9.89781L7.47753 10.25Z",
-    fill: "#FF2C3C"
-  }));
-};
-
-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);
-};
-
-const BYTE_UNITS = [
-	'B',
-	'kB',
-	'MB',
-	'GB',
-	'TB',
-	'PB',
-	'EB',
-	'ZB',
-	'YB',
-];
-
-const BIBYTE_UNITS = [
-	'B',
-	'kiB',
-	'MiB',
-	'GiB',
-	'TiB',
-	'PiB',
-	'EiB',
-	'ZiB',
-	'YiB',
-];
-
-const BIT_UNITS = [
-	'b',
-	'kbit',
-	'Mbit',
-	'Gbit',
-	'Tbit',
-	'Pbit',
-	'Ebit',
-	'Zbit',
-	'Ybit',
-];
-
-const BIBIT_UNITS = [
-	'b',
-	'kibit',
-	'Mibit',
-	'Gibit',
-	'Tibit',
-	'Pibit',
-	'Eibit',
-	'Zibit',
-	'Yibit',
-];
-
-/*
-Formats the given number using `Number#toLocaleString`.
-- If locale is a string, the value is expected to be a locale-key (for example: `de`).
-- If locale is true, the system default locale is used for translation.
-- If no value for locale is specified, the number is returned unmodified.
-*/
-const toLocaleString = (number, locale, options) => {
-	let result = number;
-	if (typeof locale === 'string' || Array.isArray(locale)) {
-		result = number.toLocaleString(locale, options);
-	} else if (locale === true || options !== undefined) {
-		result = number.toLocaleString(undefined, options);
-	}
-
-	return result;
-};
-
-function prettyBytes(number, options) {
-	if (!Number.isFinite(number)) {
-		throw new TypeError(`Expected a finite number, got ${typeof number}: ${number}`);
-	}
-
-	options = {
-		bits: false,
-		binary: false,
-		...options,
-	};
-
-	const UNITS = options.bits
-		? (options.binary ? BIBIT_UNITS : BIT_UNITS)
-		: (options.binary ? BIBYTE_UNITS : BYTE_UNITS);
-
-	if (options.signed && number === 0) {
-		return ` 0 ${UNITS[0]}`;
-	}
-
-	const isNegative = number < 0;
-	const prefix = isNegative ? '-' : (options.signed ? '+' : '');
-
-	if (isNegative) {
-		number = -number;
-	}
-
-	let localeOptions;
-
-	if (options.minimumFractionDigits !== undefined) {
-		localeOptions = {minimumFractionDigits: options.minimumFractionDigits};
-	}
-
-	if (options.maximumFractionDigits !== undefined) {
-		localeOptions = {maximumFractionDigits: options.maximumFractionDigits, ...localeOptions};
-	}
-
-	if (number < 1) {
-		const numberString = toLocaleString(number, options.locale, localeOptions);
-		return prefix + numberString + ' ' + UNITS[0];
-	}
-
-	const exponent = Math.min(Math.floor(options.binary ? Math.log(number) / Math.log(1024) : Math.log10(number) / 3), UNITS.length - 1);
-	number /= (options.binary ? 1024 : 1000) ** exponent;
-
-	if (!localeOptions) {
-		number = number.toPrecision(3);
-	}
-
-	const numberString = toLocaleString(Number(number), options.locale, localeOptions);
-
-	const unit = UNITS[exponent];
-
-	return prefix + numberString + ' ' + unit;
-}
-
-const getBaseUrl = (url) => {
-  return url.replace(/(https?:\/\/(www\.)?)/, "").split("/")[0];
-};
-
-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 = 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(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(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(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 = 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(GenericDocumentIcon, {
-      className: "shrink-0"
-    }), docOrLink.type === "link" && /* @__PURE__ */ React__default["default"].createElement(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, 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 truncateWithEllipsis = (str, maxLength) => {
-  return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
-};
-const capitalize = (string) => {
-  return string ? string[0].toUpperCase() + string.slice(1) : "";
-};
-
-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 types_esm.VerificationStatusEnum.Success:
-        return /* @__PURE__ */ React__default["default"].createElement(AcuteCheckmark, null);
-      case types_esm.VerificationStatusEnum.Error:
-        return /* @__PURE__ */ React__default["default"].createElement(ExclamationPoint, null);
-      case types_esm.VerificationStatusEnum.Failed:
-        return /* @__PURE__ */ React__default["default"].createElement(X, null);
-    }
-  };
-  let primaryText = verification.check ? `${verification.check}: ${verification.message}` : verification.message;
-  if (verification.status === types_esm.VerificationStatusEnum.Failed) {
-    primaryText = (_b = (_a = verification.message) != null ? _a : verification.details) != null ? _b : "";
-  }
-  primaryText = 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(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,
-  customIssueHistoryComponent,
-  enableLightbox
-}) => {
-  var _a;
-  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"
-  }), 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 = truncateWithEllipsis(credential_helpers.getNameFromProfile(issuer != null ? issuer : ""), 25);
-  const issueeName = 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 getCategoryTextColor = (category = index.LCCategoryEnum.achievement) => {
-  if (category === index.LCCategoryEnum.socialBadge)
-    return "text-cyan-700";
-  if (category === index.LCCategoryEnum.skill)
-    return "text-indigo-600";
-  if (category === index.LCCategoryEnum.achievement)
-    return "text-spice-600";
-  if (category === index.LCCategoryEnum.learningHistory)
-    return "text-emerald-700";
-  if (category === index.LCCategoryEnum.id)
-    return "text-yellow-400";
-  if (category === index.LCCategoryEnum.workHistory)
-    return "text-rose-600";
-  if (category === index.LCCategoryEnum.course)
-    return "text-emerald-700";
-  if (category === index.LCCategoryEnum.job)
-    return "text-rose-600";
-  if (category === index.LCCategoryEnum.currency)
-    return "text-cyan-700";
-  if (category === index.LCCategoryEnum.membership)
-    return "text-teal-500";
-  return "text-spice-600";
-};
-const VCDisplayCardCategoryType = ({
-  categoryType = index.LCCategoryEnum.achievement
-}) => {
-  const categoryColor = getCategoryTextColor(categoryType);
-  return /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: `uppercase font-poppins text-[12px] font-[600] leading-[12px] select-none ${categoryColor}`
-  }, categoryType);
-};
-
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-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
-}) => {
-  var _a, _b, _c, _d, _e;
-  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 types_esm.VerificationStatusEnum.Success:
-        return verification.status;
-      case types_esm.VerificationStatusEnum.Error:
-        return verification.status === types_esm.VerificationStatusEnum.Failed ? verification.status : currentWorst;
-      case types_esm.VerificationStatusEnum.Failed:
-        return currentWorst;
-    }
-  }, types_esm.VerificationStatusEnum.Success);
-  const statusColor = credential_helpers.getColorForVerificationStatus(worstVerificationStatus);
-  const backgroundStyle = {
-    backgroundColor: (_a = credential.display) == null ? void 0 : _a.backgroundColor,
-    backgroundImage: ((_b = 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;
-  return /* @__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 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: "vc-card-background-hider absolute h-[40px] w-full z-20 flex grow rounded-t-[30px] ",
-    style: backgroundStyle
-  }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "vc-card-content-container flex flex-col items-center grow w-full rounded-t-[30px] rounded-b-[20px] overflow-scroll scrollbar-hide"
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "vc-card-content-scroll-container w-full flex flex-col justify-center items-center rounded-b-[200px] bg-[#353E64] pb-[50px]",
-    style: __spreadValues({ paddingTop: "170px" }, backgroundStyle)
-  }, isFront && /* @__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(VC2BackFace, {
-    credential,
-    verificationItems,
-    issueHistory,
-    getFileMetadata,
-    getVideoMetadata,
-    onMediaAttachmentClick,
-    showBackButton,
-    showFrontFace: () => setIsFront(true),
-    customDescription,
-    customCriteria,
-    customIssueHistoryComponent,
-    enableLightbox
-  }), isFront && customFrontButton, isFront && !customFrontButton && /* @__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("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 === types_esm.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: (_d = bottomRightIcon == null ? void 0 : bottomRightIcon.color) != null ? _d : "#6366F1" }
-  }, (_e = bottomRightIcon == null ? void 0 : bottomRightIcon.image) != null ? _e : /* @__PURE__ */ React__default["default"].createElement(AwardRibbon.AwardRibbon, null)))));
-};
-
-exports.VCDisplayCard2 = VCDisplayCard2;
-//# sourceMappingURL=VCDisplayCard2-487d3d88.js.map