@learncard/react 2.7.27 → 2.7.29

package/dist/cjs/{MeritBadgeDisplayCard-b952091c.js → MeritBadgeDisplayCard-5349b7f7.js}

@@ -1,8 +1,8 @@
 'use strict';
 
 var React = require('react');
-var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-e5f83fc7.js');
-var credential_helpers = require('./credential.helpers-39c07250.js');
+var VerifierStateBadgeAndText = require('./VerifierStateBadgeAndText-cbcc3432.js');
+var credential_helpers = require('./credential.helpers-03718a6e.js');
 var index = require('./index-5488badc.js');
 var types_esm = require('./types.esm-41aaa0d4.js');
 var CaretRightFilled = require('./CaretRightFilled.svg');
@@ -483,7 +483,7 @@ const MeritBadgeBackFace = ({
 
 const MeritBadgeCornerIcon = ({ categoryType, position }) => {
   const credentialPrimaryColor = credential_helpers.getCategoryLightColor(categoryType);
-  const credentialIcon = credential_helpers.getCategoryIcon(categoryType);
+  const credentialIcon = credential_helpers.getCategoryIcon(categoryType, "25");
   let iconPositionClassName, cornerPositionClassName;
   switch (position) {
     case "top-left":
@@ -510,7 +510,7 @@ const MeritBadgeCornerIcon = ({ categoryType, position }) => {
   }));
 };
 
-const MeritBadgeRibbon = ({ className = "" }) => {
+const MeritBadgeRibbon = ({ className = "", image }) => {
   return /* @__PURE__ */ React__default["default"].createElement("svg", {
     width: "207",
     height: "170",
@@ -529,7 +529,7 @@ const MeritBadgeRibbon = ({ className = "" }) => {
     strokeWidth: "3"
   }), /* @__PURE__ */ React__default["default"].createElement("path", {
     d: "M3.94446 50C3.41654 50 2.92748 50.2775 2.65674 50.7307C2.38599 51.1839 2.37343 51.7461 2.62365 52.211L19.4659 83.5L2.62365 114.789C2.37343 115.254 2.386 115.816 2.65674 116.269C2.92748 116.722 3.41654 117 3.94446 117L203.056 117C203.583 117 204.073 116.722 204.343 116.269C204.614 115.816 204.627 115.254 204.376 114.789L187.534 83.5L204.376 52.211C204.627 51.7461 204.614 51.1839 204.343 50.7307C204.073 50.2775 203.583 50 203.056 50L3.94446 50Z",
-    fill: "#622599",
+    fill: "currentColor",
     stroke: "white",
     strokeWidth: "3",
     strokeLinejoin: "round"
@@ -546,7 +546,7 @@ const MeritBadgeRibbon = ({ className = "" }) => {
     width: "156.6",
     height: "156.6",
     rx: "78.2999",
-    stroke: "#622599",
+    stroke: "currentColor",
     strokeWidth: "3"
   }), /* @__PURE__ */ React__default["default"].createElement("rect", {
     x: "29.8273",
@@ -554,7 +554,20 @@ const MeritBadgeRibbon = ({ className = "" }) => {
     width: "147.6",
     height: "147.6",
     fill: "url(#pattern0_10755_290433)"
-  })), /* @__PURE__ */ React__default["default"].createElement("defs", null, /* @__PURE__ */ React__default["default"].createElement("filter", {
+  })), /* @__PURE__ */ React__default["default"].createElement("clipPath", {
+    id: "circleClip"
+  }, /* @__PURE__ */ React__default["default"].createElement("circle", {
+    cx: "103.5",
+    cy: "84",
+    r: "75"
+  })), /* @__PURE__ */ React__default["default"].createElement("image", {
+    xlinkHref: image,
+    x: "28.5",
+    y: "9",
+    width: "150",
+    height: "150",
+    clipPath: "url(#circleClip)"
+  }), /* @__PURE__ */ React__default["default"].createElement("defs", null, /* @__PURE__ */ React__default["default"].createElement("filter", {
     id: "filter0_d_10755_290433",
     x: "0.944458",
     y: "0",
@@ -596,13 +609,9 @@ const MeritBadgeImageDisplay = ({
 }) => {
   return /* @__PURE__ */ React__default["default"].createElement("div", {
     className: `flex items-center justify-center w-[176px] h-[176px] rounded-full bg-white z-50 ${className}`
-  }, /* @__PURE__ */ React__default["default"].createElement("div", {
-    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__default["default"].createElement("img", {
-    src: imageUrl,
-    alt: "merit badge thumbnail"
-  })), /* @__PURE__ */ React__default["default"].createElement(MeritBadgeRibbon, {
-    className: "absolute z-[1]"
+  }, /* @__PURE__ */ React__default["default"].createElement(MeritBadgeRibbon, {
+    className: "absolute z-[1]",
+    image: imageUrl
   }));
 };
 
@@ -704,7 +713,7 @@ const MeritBadgeFrontFace = ({
     className: "w-[calc(100%-26px)] absolute top-[-72px]"
   }, /* @__PURE__ */ React__default["default"].createElement(MeritBadgeImageDisplay, {
     imageUrl: imageUrl != null ? imageUrl : "",
-    className: "mx-auto"
+    className: `mx-auto ${textLightColor}`
   })), /* @__PURE__ */ React__default["default"].createElement("div", {
     className: `flex flex-col gap-[15px] items-center px-[20px] pt-[92px] pb-[19px] border-solid border-[4px] ${borderColor} rounded-[30px]`
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -742,7 +751,7 @@ const MeritBadgeFrontFace = ({
   }, issuerName))), /* @__PURE__ */ React__default["default"].createElement(MeritBadgeProfileImageDisplay, {
     imageUrl: issuerImage,
     imageComponent: issuerImageComponent,
-    className: "w-[calc(100%-26px)] flex justify-center items-center text-sp-purple-base",
+    className: `w-[calc(100%-26px)] flex justify-center items-center ${textLightColor}`,
     size: "small",
     showSeal: true
   })), categoryType && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(MeritBadgeCornerIcon, {
@@ -849,4 +858,4 @@ const MeritBadgeDisplayCard = ({
 exports.MeritBadgeBackFace = MeritBadgeBackFace;
 exports.MeritBadgeDisplayCard = MeritBadgeDisplayCard;
 exports.MeritBadgeFrontFace = MeritBadgeFrontFace;
-//# sourceMappingURL=MeritBadgeDisplayCard-b952091c.js.map
+//# sourceMappingURL=MeritBadgeDisplayCard-5349b7f7.js.map