@learncard/react 2.7.22 → 2.7.24

package/dist/esm/{MeritBadgeDisplayCard-0fd4c3c7.js → MeritBadgeDisplayCard-ec9d5238.js}

@@ -1,6 +1,6 @@
 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-26578052.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-93170224.js';
+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-b042bf32.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-a5b16a5e.js';
 import { a as LCCategoryEnum } from './index-28917993.js';
 import { V as VerificationStatusEnum } from './types.esm-3a1994d5.js';
 import CaretRightFilled from './CaretRightFilled.svg';
@@ -504,64 +504,81 @@ const MeritBadgeCornerIcon = ({ categoryType, position }) => {
 
 const MeritBadgeRibbon = ({ className = "" }) => {
   return /* @__PURE__ */ React.createElement("svg", {
-    width: "167",
-    height: "131",
-    viewBox: "0 0 167 131",
+    width: "207",
+    height: "170",
+    viewBox: "0 0 207 170",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className
+  }, /* @__PURE__ */ React.createElement("g", {
+    filter: "url(#filter0_d_10755_290433)"
   }, /* @__PURE__ */ React.createElement("circle", {
-    cx: "83.1426",
-    cy: "65.5",
-    r: "64",
+    cx: "102.988",
+    cy: "83",
+    r: "81.5",
     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",
+    d: "M3.94446 50C3.41654 50 2.92748 50.2775 2.65674 50.7307C2.38599 51.1839 2.37343 51.7461 2.62365 52.211L19.4659 83.5L2.62365 114.789C2.37343 115.254 2.386 115.816 2.65674 116.269C2.92748 116.722 3.41654 117 3.94446 117L203.056 117C203.583 117 204.073 116.722 204.343 116.269C204.614 115.816 204.627 115.254 204.376 114.789L187.534 83.5L204.376 52.211C204.627 51.7461 204.614 51.1839 204.343 50.7307C204.073 50.2775 203.583 50 203.056 50L3.94446 50Z",
     fill: "#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"
+    x: "25.3273",
+    y: "5.34741",
+    width: "156.6",
+    height: "156.6",
+    rx: "78.2999",
+    fill: "#FBFBFC"
   }), /* @__PURE__ */ React.createElement("rect", {
-    x: "22.1426",
-    y: "4.5",
-    width: "123",
-    height: "123",
-    rx: "61.5",
+    x: "25.3273",
+    y: "5.34741",
+    width: "156.6",
+    height: "156.6",
+    rx: "78.2999",
     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)"
+    x: "29.8273",
+    y: "9.84741",
+    width: "147.6",
+    height: "147.6",
+    fill: "url(#pattern0_10755_290433)"
+  })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", {
+    id: "filter0_d_10755_290433",
+    x: "0.944458",
+    y: "0",
+    width: "205.111",
+    height: "170",
+    filterUnits: "userSpaceOnUse",
+    colorInterpolationFilters: "sRGB"
+  }, /* @__PURE__ */ React.createElement("feFlood", {
+    floodOpacity: "0",
+    result: "BackgroundImageFix"
+  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
+    in: "SourceAlpha",
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+    result: "hardAlpha"
+  }), /* @__PURE__ */ React.createElement("feOffset", {
+    dy: "4"
+  }), /* @__PURE__ */ React.createElement("feComposite", {
+    in2: "hardAlpha",
+    operator: "out"
+  }), /* @__PURE__ */ React.createElement("feColorMatrix", {
+    type: "matrix",
+    values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+  }), /* @__PURE__ */ React.createElement("feBlend", {
+    mode: "normal",
+    in2: "BackgroundImageFix",
+    result: "effect1_dropShadow_10755_290433"
+  }), /* @__PURE__ */ React.createElement("feBlend", {
+    mode: "normal",
+    in: "SourceGraphic",
+    in2: "effect1_dropShadow_10755_290433",
+    result: "shape"
   }))));
 };
 
@@ -570,9 +587,9 @@ const MeritBadgeImageDisplay = ({
   className = ""
 }) => {
   return /* @__PURE__ */ React.createElement("div", {
-    className: `flex items-center justify-center w-[120px] h-[120px] rounded-full bg-white z-50 ${className}`
+    className: `flex items-center justify-center w-[176px] h-[176px] 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]"
+    className: "relative left-[-0.5px] top-[-1.5px] w-full h-full p-[13px] flex items-center justify-center rounded-full overflow-hidden object-contain z-[2]"
   }, /* @__PURE__ */ React.createElement("img", {
     src: imageUrl,
     alt: "merit badge thumbnail"
@@ -674,14 +691,14 @@ const MeritBadgeFrontFace = ({
   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]"
+    className: "relative p-[13px] mt-[68px] bg-white border-[5px] rounded-[30px] border-soid border-grayscale-200 min-w-[295px] max-w-[300px]"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "w-[calc(100%-26px)] absolute top-[-19px]"
+    className: "w-[calc(100%-26px)] absolute top-[-72px]"
   }, /* @__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]`
+    className: `flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`
   }, /* @__PURE__ */ React.createElement("div", {
     className: "flex flex-col gap-[5px]"
   }, /* @__PURE__ */ React.createElement("div", {
@@ -695,9 +712,9 @@ const MeritBadgeFrontFace = ({
   }, "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"
+    className: "text-grayscale-900 text-center text-[25px] font-jacques"
   }, title), /* @__PURE__ */ React.createElement("div", {
-    className: `${textLightColor} uppercase text-[14px] font-poppins`
+    className: `${textLightColor} uppercase text-[14px] font-notoSans font-[600]`
   }, categoryTitle))), customBodyCardComponent, issueeImageExists && !customBodyCardComponent && /* @__PURE__ */ React.createElement(MeritBadgeProfileImageDisplay, {
     imageUrl: issueeImage,
     imageComponent: subjectImageComponent,
@@ -705,7 +722,7 @@ const MeritBadgeFrontFace = ({
   }), !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"
+    className: "flex flex-col w-full"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "text-[14px] text-grayscale-900 flex flex-col items-center w-full mb-[10px]"
   }, /* @__PURE__ */ React.createElement("span", {
@@ -714,9 +731,13 @@ const MeritBadgeFrontFace = ({
     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, {
+  }, issuerName))), /* @__PURE__ */ React.createElement(MeritBadgeProfileImageDisplay, {
+    imageUrl: issuerImage,
+    imageComponent: issuerImageComponent,
+    className: "w-[calc(100%-26px)] flex justify-center items-center text-sp-purple-base",
+    size: "small",
+    showSeal: true
+  })), categoryType && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, {
     categoryType,
     position: "top-left"
   }), /* @__PURE__ */ React.createElement(MeritBadgeCornerIcon, {
@@ -728,13 +749,12 @@ const MeritBadgeFrontFace = ({
   }), /* @__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", {
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: "absolute bottom-0 w-[calc(100%-26px)] flex justify-center"
+  }, /* @__PURE__ */ React.createElement(VerifierStateBadgeAndText, {
+    verifierState,
+    className: "bg-white px-[5px] pb-[5px]"
+  })), /* @__PURE__ */ React.createElement("span", {
     className: "hidden border-rose-500 text-spice-500 border-spice-500 border-cyan-500 text-cyan-500 border-indigo-500 border-sp-purple-base"
   }));
 };
@@ -819,4 +839,4 @@ const MeritBadgeDisplayCard = ({
 };
 
 export { MeritBadgeBackFace as M, MeritBadgeDisplayCard as a, MeritBadgeFrontFace as b };
-//# sourceMappingURL=MeritBadgeDisplayCard-0fd4c3c7.js.map
+//# sourceMappingURL=MeritBadgeDisplayCard-ec9d5238.js.map