@learncard/react 2.12.2 → 2.12.3

package/dist/cjs/{VCDisplayCard2-78d4cc3f.js → VCDisplayCard2-ae93ccd2.js}

@@ -3,18 +3,18 @@
 var React = require('react');
 var VCVerificationCheck = require('./VCVerificationCheck-92198135.js');
 var UserProfilePicture = require('./UserProfilePicture-80675455.js');
-var credential_helpers = require('./credential.helpers-3d0256cf.js');
-var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-57a7b85f.js');
+var credential_helpers = require('./credential.helpers-65ea507a.js');
+var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-5f10743e.js');
 var i18n = require('./i18n-ddbb18e7.js');
 require('./index-da255c9a.js');
 var Lightbox = require('./Lightbox-e2996736.js');
-var types_esm = require('./types.esm-228757cd.js');
-var CertificateDisplayCard = require('./CertificateDisplayCard-9c1d58da.js');
+var types_esm = require('./types.esm-50b3eecd.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-a036cdc5.js');
 var QRCodeIcon = require('./QRCodeIcon-3021a53b.js');
 var index = require('./index-5488badc.js');
 var PuzzlePiece = require('./PuzzlePiece-e64f4596.js');
 var IDSleeve = require('./id-sleeve.png');
-var MeritBadgeDisplayCard = require('./MeritBadgeDisplayCard-201bf5ad.js');
+var MeritBadgeDisplayCard = require('./MeritBadgeDisplayCard-2e4edd20.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -880,6 +880,18 @@ const BadgeThumbnailPlaceholder = () => /* @__PURE__ */ React__default["default"
     }
   )
 );
+const BadgeThumbnail = ({ imageUrl }) => {
+  const [errored, setErrored] = React__default["default"].useState(false);
+  return errored ? /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-grayscale-100 flex items-center justify-center" }, /* @__PURE__ */ React__default["default"].createElement(BadgeThumbnailPlaceholder, null)) : /* @__PURE__ */ React__default["default"].createElement(
+    "img",
+    {
+      className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-white object-cover",
+      src: imageUrl,
+      alt: "credential thumbnail",
+      onError: () => setErrored(true)
+    }
+  );
+};
 const VC2FrontFaceInfo = ({
   credential,
   issuee,
@@ -899,10 +911,6 @@ const VC2FrontFaceInfo = ({
   const t = i18n.useT();
   const issuerImage = credential_helpers.getImageFromProfile(issuer != null ? issuer : "");
   const issueeImage = credential_helpers.getImageFromProfile(issuee != null ? issuee : "");
-  const [thumbErrored, setThumbErrored] = React__default["default"].useState(false);
-  React__default["default"].useEffect(() => {
-    setThumbErrored(false);
-  }, [imageUrl]);
   const issueeDisplay = VerifierStateBadgeAndText.resolveProfileDisplay(issuee, "");
   const issuerDisplay = VerifierStateBadgeAndText.resolveProfileDisplay(issuer, "");
   const { credentialSubject } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
@@ -966,15 +974,7 @@ const VC2FrontFaceInfo = ({
       verifierState = isAppIssuerDid ? VerifierStateBadgeAndText.VERIFIER_STATES.appIssuer : VerifierStateBadgeAndText.VERIFIER_STATES.unknownVerifier;
     }
   }
-  return /* @__PURE__ */ React__default["default"].createElement(Flipped$3, { inverseFlipId: "card" }, /* @__PURE__ */ React__default["default"].createElement("section", { className: "vc-front-face w-full px-[15px] flex flex-col items-center gap-[15px]" }, imageUrl && !customThumbComponent && (thumbErrored ? /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-grayscale-100 flex items-center justify-center" }, /* @__PURE__ */ React__default["default"].createElement(BadgeThumbnailPlaceholder, null)) : /* @__PURE__ */ React__default["default"].createElement(
-    "img",
-    {
-      className: "vc-front-image h-[130px] w-[130px] rounded-[10px] bg-white object-cover",
-      src: imageUrl,
-      alt: "credential thumbnail",
-      onError: () => setThumbErrored(true)
-    }
-  )), 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: "flex flex-col text-center leading-[130%] w-full" }, !issueeDisplay.isMissing && issueeDisplay.isDidValue && /* @__PURE__ */ React__default["default"].createElement("span", { className: "flex flex-wrap items-baseline justify-center gap-x-1 text-[17px] leading-normal font-[600] font-poppins max-w-full break-words" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-500 underline" }, issueeDisplay.displayName)), !issueeDisplay.isMissing && !issueeDisplay.isDidValue && /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-poppins font-semibold text-[20px] leading-[130%] max-w-full line-clamp-2 break-words text-grayscale-900" }, issueeDisplay.displayName), subjectDID && !issueeDisplay.isDidValue && !issueeDisplay.isLCNetwork && /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-[12px] text-grayscale-500 leading-[18px] font-poppins font-normal m-0 p-0" }, 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 bg-white" }, issueeImageEl), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px] bg-white" }, issuerImageEl)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col gap-[13px]" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issue-details mt-[10px] flex flex-col items-center font-poppins text-[14px] leading-[20px]" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "created-at text-grayscale-700" }, createdAt), !issuerDisplay.isMissing && /* @__PURE__ */ React__default["default"].createElement("span", { className: "issued-by max-w-full break-words text-center line-clamp-2 text-[14px]" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-medium text-grayscale-900" }, t("credential.by")), " ", issuerDisplay.isDidValue ? /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-[600] font-poppins break-words" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), " ", /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-500 underline" }, issuerDisplay.displayName)) : /* @__PURE__ */ React__default["default"].createElement("strong", { className: "font-bold text-grayscale-900 break-words" }, issuerDisplay.displayName))), /* @__PURE__ */ React__default["default"].createElement(
+  return /* @__PURE__ */ React__default["default"].createElement(Flipped$3, { inverseFlipId: "card" }, /* @__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(BadgeThumbnail, { key: imageUrl, 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: "flex flex-col text-center leading-[130%] w-full" }, !issueeDisplay.isMissing && issueeDisplay.isDidValue && /* @__PURE__ */ React__default["default"].createElement("span", { className: "flex flex-wrap items-baseline justify-center gap-x-1 text-[17px] leading-normal font-[600] font-poppins max-w-full break-words" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-500 underline" }, issueeDisplay.displayName)), !issueeDisplay.isMissing && !issueeDisplay.isDidValue && /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-poppins font-semibold text-[20px] leading-[130%] max-w-full line-clamp-2 break-words text-grayscale-900" }, issueeDisplay.displayName), subjectDID && !issueeDisplay.isDidValue && !issueeDisplay.isLCNetwork && /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-[12px] text-grayscale-500 leading-[18px] font-poppins font-normal m-0 p-0" }, 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 bg-white" }, issueeImageEl), /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issuer-image h-[30px] w-[30px] rounded-full overflow-hidden absolute bottom-[-12px] right-[-12px] bg-white" }, issuerImageEl)), /* @__PURE__ */ React__default["default"].createElement("div", { className: "flex flex-col gap-[13px]" }, /* @__PURE__ */ React__default["default"].createElement("div", { className: "vc-issue-details mt-[10px] flex flex-col items-center font-poppins text-[14px] leading-[20px]" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "created-at text-grayscale-700" }, createdAt), !issuerDisplay.isMissing && /* @__PURE__ */ React__default["default"].createElement("span", { className: "issued-by max-w-full break-words text-center line-clamp-2 text-[14px]" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-medium text-grayscale-900" }, t("credential.by")), " ", issuerDisplay.isDidValue ? /* @__PURE__ */ React__default["default"].createElement("span", { className: "font-[600] font-poppins break-words" }, /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-900" }, "Digital ID:"), " ", /* @__PURE__ */ React__default["default"].createElement("span", { className: "text-grayscale-500 underline" }, issuerDisplay.displayName)) : /* @__PURE__ */ React__default["default"].createElement("strong", { className: "font-bold text-grayscale-900 break-words" }, issuerDisplay.displayName))), /* @__PURE__ */ React__default["default"].createElement(
     VerifierStateBadgeAndText.VerifierStateBadgeAndText,
     {
       verifierState,
@@ -1581,4 +1581,4 @@ exports.VCDisplayCard2 = VCDisplayCard2;
 exports.VCDisplayCardSkillsCount = VCDisplayCardSkillsCount;
 exports.VCIDDisplayCard = VCIDDisplayCard;
 exports.getVCDisplayCardVariant = getVCDisplayCardVariant;
-//# sourceMappingURL=VCDisplayCard2-78d4cc3f.js.map
+//# sourceMappingURL=VCDisplayCard2-ae93ccd2.js.map