@ammarkhalidfarooq/dashboard-package 0.6.54 → 0.6.56

package/dist/index.cjs.js

@@ -154,6 +154,26 @@ function _objectSpread2(e) {
   }
   return e;
 }
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
 function _regenerator() {
   /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
   var e,
@@ -16101,6 +16121,135 @@ var html2canvas_esm = /*#__PURE__*/Object.freeze({
   default: html2canvas
 });
 
+var _excluded$7 = ["size"];
+var AverageDonationIcon = function AverageDonationIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M9.02,17.2c-.2.05-.27.39.02.47.3.09.57-.12.83-.11,1.39.05,2.62.58,3.91.72,1.65.17,3.28-1.43,4.8-1.99.47-.18,1.22-.48,1.7-.24.28.14.34.49.06.67-1.39.71-2.69,1.95-4.04,2.65-3.6,1.87-8.35-1.58-12.09-.22l-.73-2.8c2.25-.42,4.07-1.82,6.46-1.41.93.16,1.89.98,2.8,1.34.54.22,2.25.55,2.45.85.16.24-.13.54-.33.66-.75.43-2.86-.48-3.76-.6-.57.1-1.57-.13-2.07,0Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M15.66,17.32s0-.27-.12-.43c-.38-.53-1.75-.64-2.41-.89-1.31-.49-2.39-1.59-3.92-1.62,0-1.55,1.08-3.16,2.24-4.13,1.32-1.12.97-.51,2.32-.48.52.01,1.31-.34,1.64-.19.81.36,2.4,2.38,2.74,3.23.29.71.68,2.28.28,2.96-.08.14-2.67,1.66-2.78,1.55ZM12.82,11.75c-1.27.28-.05,2.18.77,2.47.91.32,2.49-1.7,1.52-2.38-.56-.4-.94.12-1.23.13s-.49-.34-1.07-.21Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M15.9,7.09c-.43,1.53-1.01,2.66-2.83,2.16-.66-.18-1.02-1.72-1.43-2.28,1.47-.46,2.77.55,4.26.12Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18.46,6.97c.39.37-1.47,1.17-1.58.67-.09-.4,1.41-.83,1.58-.67Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M16.75,4.78c.18.18-.73,1.62-1.1,1.34-.32-.25.73-1.7,1.1-1.34Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M14.03,4.06c.25.05.3,1.75-.16,1.72-.4-.02-.35-1.82.16-1.72Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M9.4,6.99c.3-.1,1.46.3,1.38.65-.1.46-1.39-.15-1.58-.37-.03-.13.09-.25.2-.29Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M12,6.12c-.34.26-1.44-1.2-.91-1.34.36-.09,1.19,1.13.91,1.34Z"
+      })]
+    })]
+  }));
+};
+var avgDonationAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded$6 = ["size"];
+var ConversionRateIcon = function ConversionRateIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18.15,6.72c.09.75-.16,1.23-.93,1.34l-3.9,4.34-.04,1.32-2.58.89v-2.18l-3.93-4.37c-.77-.11-1.02-.6-.93-1.34h12.31Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M11.38,15.58c4.25-.51,5.64,4.94,2.16,6.64-2.76,1.35-5.78-1.26-4.91-4.21.35-1.18,1.5-2.28,2.75-2.43ZM12.33,16.52c-.17-.17-.51-.16-.67.02-.11.12-.08.3-.15.39-.04.05-.27.15-.36.24-.54.51-.66,1.17-.22,1.8.35.5.68.41,1.17.54.57.15.34,1.02-.26.83-.37-.12-.18-1.07-.88-.82-.54.19-.24.97.03,1.29.15.18.36.24.47.35.16.18.11.5.48.54.5.05.41-.32.6-.54.09-.1.3-.17.44-.32.64-.7.38-1.83-.51-2.14-.3-.11-.79-.03-.87-.39-.11-.53.46-.74.73-.44.15.16.08,1.02.77.71.55-.25.06-1.1-.25-1.39-.1-.09-.31-.18-.36-.24-.07-.09-.07-.31-.16-.41Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M13.9,1.44c2.07-.33,2.87,2.63.92,3.39-2.39.92-3.4-2.99-.92-3.39Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18.15,14.61c.29-.16.44-.74.74-.81.37-.09.66.12.58.51-.03.12-1.26,1.8-1.41,1.93s-.34.18-.53.1c-.12-.05-1.49-1.89-1.51-2.02-.09-.52.29-.67.7-.44l.56.73v-3.12s.17-.26.22-.29c.22-.13.67,0,.67.22v3.19Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M6.73,14.61l.56-.73c.41-.23.79-.07.7.44-.02.13-1.4,1.97-1.51,2.02-.12.06-.26.05-.38,0-.27-.09-1.32-1.71-1.56-2.04-.05-.4.18-.6.58-.51.3.07.45.65.74.81v-3.19c0-.23.45-.36.67-.22.04.03.22.26.22.29v3.12Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M11.46,5.84h-3.35c.41-1.76,2.96-1.77,3.35,0Z"
+      })]
+    })]
+  }));
+};
+var conversionRateAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded$5 = ["size"];
+var NetRaisedIcon = function NetRaisedIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M19.06,8.58s-.05.06-.05.09c-.08.3-.12.64-.19.94-.51,2.31-1.24,4.58-2.76,6.43-2.99,3.66-7.63,3.71-11.68,1.85-.4-.19-1.44-.67-1.73-.95-.51-.5-.15-1.34.53-1.34.3,0,1.3.63,1.65.8,1.88.89,4.06,1.43,6.14,1.02,4.28-.84,5.87-5.18,6.51-9.01l-1.92,2.29c-.63.55-1.57-.08-1.23-.88,1.23-1.46,2.4-3.02,3.67-4.45.26-.29.41-.51.85-.47.34.03.53.27.66.57l2.05,5.4c.28.93-.99,1.44-1.43.56l-1.06-2.85Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M13.64,11.93c.01.07-.03.14-.03.21,0,.22.03.46.03.68.01,1.06,0,2.13,0,3.19-.38.34-.83.57-1.28.8v-4.87h1.29Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M11.74,12.74v4.29c-.33.09-.66.2-.99.25-.08.01-.27.07-.29-.01v-4.52s1.28,0,1.28,0Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M9.87,13.55v3.8c-.42.07-.86,0-1.29-.03v-3.77h1.29Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M15.51,11.13v2.69c-.39.58-.76,1.19-1.29,1.66v-4.35h1.29Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("polygon", {
+        points: "7.97 14.35 7.97 17.25 6.71 16.91 6.71 14.35"
+      }), /*#__PURE__*/jsxRuntime.jsx("polygon", {
+        points: "6.1 15.16 6.1 16.74 4.81 16.19 4.81 15.16"
+      })]
+    })]
+  }));
+};
+var netRaisedAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
 var CARD_BORDER = "1.5px solid #F1F1F5";
 var PANEL_BORDER = "1px solid #f0f0f0";
 var PANEL_SHADOW = "0 4px 24px rgba(0,0,0,0.06)";
@@ -16826,7 +16975,8 @@ var OverallSection = function OverallSection(_ref) {
       value: "$".concat(formatNumber(((_apiData$overviewStat5 = apiData === null || apiData === void 0 || (_apiData$overviewStat6 = apiData.overviewStats) === null || _apiData$overviewStat6 === void 0 || (_apiData$overviewStat6 = _apiData$overviewStat6.overview) === null || _apiData$overviewStat6 === void 0 ? void 0 : _apiData$overviewStat6.netRevenue) !== null && _apiData$overviewStat5 !== void 0 ? _apiData$overviewStat5 : 0).toFixed(2))),
       subValue: "".concat(Number((_apiData$overviewStat7 = apiData === null || apiData === void 0 || (_apiData$overviewStat8 = apiData.overviewStats) === null || _apiData$overviewStat8 === void 0 || (_apiData$overviewStat8 = _apiData$overviewStat8.overview.growthPercentage) === null || _apiData$overviewStat8 === void 0 ? void 0 : _apiData$overviewStat8.netRevenue) !== null && _apiData$overviewStat7 !== void 0 ? _apiData$overviewStat7 : 0).toFixed(2), "% vs pp\n        "),
       label: "Net Raised",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.FavoriteOutlined, {}),
+      icon: /*#__PURE__*/jsxRuntime.jsx(NetRaisedIcon, {}),
+      avatarSx: netRaisedAvatarSx,
       money: true,
       error: false,
       warning: false
@@ -16844,7 +16994,8 @@ var OverallSection = function OverallSection(_ref) {
       value: "$".concat(formatNumber(((_apiData$overviewStat10 = apiData === null || apiData === void 0 || (_apiData$overviewStat11 = apiData.overviewStats) === null || _apiData$overviewStat11 === void 0 || (_apiData$overviewStat11 = _apiData$overviewStat11.overview) === null || _apiData$overviewStat11 === void 0 ? void 0 : _apiData$overviewStat11.overallAVGDonations) !== null && _apiData$overviewStat10 !== void 0 ? _apiData$overviewStat10 : 0).toFixed(2))),
       subValue: "".concat(Number((_apiData$overviewStat12 = apiData === null || apiData === void 0 || (_apiData$overviewStat13 = apiData.overviewStats) === null || _apiData$overviewStat13 === void 0 || (_apiData$overviewStat13 = _apiData$overviewStat13.overview.growthPercentage) === null || _apiData$overviewStat13 === void 0 ? void 0 : _apiData$overviewStat13.overallAVGDonations) !== null && _apiData$overviewStat12 !== void 0 ? _apiData$overviewStat12 : 0).toFixed(2), "% vs pp\n        "),
       label: "Average Donation Amount",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+      avatarSx: avgDonationAvatarSx,
       money: true,
       error: false,
       warning: false
@@ -16862,7 +17013,8 @@ var OverallSection = function OverallSection(_ref) {
       value: "".concat(formatNumber(((_apiData$overviewStat14 = apiData === null || apiData === void 0 || (_apiData$overviewStat15 = apiData.overviewStats) === null || _apiData$overviewStat15 === void 0 || (_apiData$overviewStat15 = _apiData$overviewStat15.overview) === null || _apiData$overviewStat15 === void 0 ? void 0 : _apiData$overviewStat15.conversionRate) !== null && _apiData$overviewStat14 !== void 0 ? _apiData$overviewStat14 : 0).toFixed(2)), "%"),
       subValue: "".concat(((_apiData$overviewStat16 = apiData === null || apiData === void 0 || (_apiData$overviewStat17 = apiData.overviewStats) === null || _apiData$overviewStat17 === void 0 || (_apiData$overviewStat17 = _apiData$overviewStat17.overview) === null || _apiData$overviewStat17 === void 0 || (_apiData$overviewStat17 = _apiData$overviewStat17.growthPercentage) === null || _apiData$overviewStat17 === void 0 ? void 0 : _apiData$overviewStat17.conversionRate) !== null && _apiData$overviewStat16 !== void 0 ? _apiData$overviewStat16 : 0).toFixed(2), "%") || "0%",
       label: "Conversion Rate",
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+      icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+      avatarSx: conversionRateAvatarSx,
       money: false,
       error: false,
       warning: false
@@ -16904,6 +17056,7 @@ var OverallSection = function OverallSection(_ref) {
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      avatarSx: metricInfo[title].avatarSx,
       error: metricInfo[title].error,
       active: activeMetric === title,
       onClick: function onClick() {
@@ -17297,7 +17450,8 @@ var PaidSection = function PaidSection(_ref) {
       subValue: "12% vs last month",
       chartLabel: "Conversion Rate",
       data: [2.8, 3.0, 2.9, 3.4, 3.2, 3.1, 3.1],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+      icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+      avatarSx: conversionRateAvatarSx,
       money: false,
       error: false,
       warning: false
@@ -17307,7 +17461,8 @@ var PaidSection = function PaidSection(_ref) {
       subValue: "12% vs last month",
       chartLabel: "Average Donation",
       data: [120, 135, 125, 140, 130, 128, 130.58],
-      icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+      icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+      avatarSx: avgDonationAvatarSx,
       money: true,
       error: false,
       warning: false
@@ -17321,6 +17476,7 @@ var PaidSection = function PaidSection(_ref) {
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      avatarSx: metricInfo[title].avatarSx,
       error: metricInfo[title].error,
       active: activeMetric === title,
       onClick: function onClick() {
@@ -17640,7 +17796,8 @@ var OrganicSection = function OrganicSection(_ref) {
           subValue: "8.4% vs pp",
           data: [2.5, 2.7, 2.6, 3.1, 3.0, 2.9, 3.1],
           categories: fallbackCategories,
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+          avatarSx: conversionRateAvatarSx,
           money: false,
           warning: false,
           error: false
@@ -17660,7 +17817,8 @@ var OrganicSection = function OrganicSection(_ref) {
           subValue: "18% vs pp",
           data: [110, 125, 120, 135, 130, 128, 130.58],
           categories: fallbackCategories,
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+          avatarSx: avgDonationAvatarSx,
           money: true,
           warning: false,
           error: false
@@ -17713,7 +17871,8 @@ var OrganicSection = function OrganicSection(_ref) {
         subValue: growthCaption("conversionRate"),
         data: conversionSeries.data,
         categories: conversionSeries.categories,
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+        avatarSx: conversionRateAvatarSx,
         money: false,
         warning: false,
         error: false
@@ -17733,7 +17892,8 @@ var OrganicSection = function OrganicSection(_ref) {
         subValue: growthCaption("overallAVGDonations"),
         data: avgDonationSeries.data,
         categories: avgDonationSeries.categories,
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.PaidOutlined, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(AverageDonationIcon, {}),
+        avatarSx: avgDonationAvatarSx,
         money: true,
         warning: false,
         error: false
@@ -17822,6 +17982,7 @@ var OrganicSection = function OrganicSection(_ref) {
       value: metricInfo[title].money ? metricInfo[title].value : metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      avatarSx: metricInfo[title].avatarSx,
       error: metricInfo[title].error,
       active: activeMetric === title,
       onClick: function onClick() {
@@ -18253,6 +18414,185 @@ var EmailTrendCard = function EmailTrendCard(_ref) {
   });
 };
 
+var _excluded$4 = ["size"];
+var ClicksIcon = function ClicksIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      fill: "#4e47e5",
+      d: "M8.67,3.89c1.47.96,5.13,4.83,6.65,6.32,2.68,2.62,2.05,3.43-1.42,4.38.14,1.83,3.51,5.26.32,5.86-2.26.42-2.08-3.82-3.14-4.46-.37-.22-3.44,2.15-4.06-.03l.2-11.77c.17-.93.83-.7,1.45-.29Z"
+    })]
+  }));
+};
+var clicksAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded$3 = ["size"];
+var CtrIcon = function CtrIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$3);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M11.91,6.57c.47,1.76-1.75,2.91-2.89,1.49-.78-.97-.19-2.54,1.05-2.69.83-.1,1.62.39,1.84,1.2Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M12.26,15.63c-2.34.25-1.72,3.91.62,3.27,1.89-.51,1.36-3.48-.62-3.27Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M20.62,14.28c-.13-.16-.13-.36-.01-.53.23-.33.77-.67,1-.99.02-.02.04-.03.03-.07l-4.07-1.39-1.19-.4.43,1.25,1.39,4.01,1.05-1.04c.16-.1.36-.1.51.03l1.53,1.53c.2-.39.38-.79.52-1.2l-1.19-1.19Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21.4,13.6c-.16.14-.33.29-.42.41l.98.99c.81-2.7.44-5.67-1.01-8.2C16.12-1.62,3.46.71,1.78,10.16c-1.6,9.03,8.56,15.57,16.07,10.41.21-.15.41-.31.62-.46,1.09-.75,2.23-2.45,2.23-2.45.13-.19.25-.38.36-.58l-1.57-1.57-1.49,1.46-2.36-6.81,6.36,2.17.06.23c.03.1.05.29-.11.47-.15.2-.35.38-.56.56ZM10,4.49c3.33-.31,3.59,4.59.45,4.79-3.15.21-3.44-4.51-.45-4.79ZM12.92,19.45c-3.39.65-3.97-4.52-.66-4.76,3.02-.22,3.5,4.22.66,4.76ZM17.19,6.58l-9.73,9.73c-.44.37-.99-.16-.64-.61l9.76-9.76c.05-.05.13-.08.19-.09.45-.07.68.4.42.73Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21.81,15.47c-.15.41-.32.81-.52,1.2l-1.53-1.53c-.15-.12-.35-.13-.51-.03l-1.05,1.04-1.39-4.01-.43-1.25,1.19.4,4.07,1.39s-.01.05-.03.07c-.23.33-.77.67-1,.99-.12.17-.12.37.01.53l1.19,1.19Z"
+      })]
+    })]
+  }));
+};
+var ctrAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded$2 = ["size"];
+var RevenuePerClickIcon = function RevenuePerClickIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21.48,13.53l-.86-.82s.02-.02.04-.03c.26-.24.42-.39.5-.51.13-.12.15-.25.15-.34,0-.21-.16-.33-.22-.38l-.07-.05-1.82-.48c0-.42.03-.33-.21-1.09-1.71-5.45-8.56-7.09-12.51-2.93-1.82,1.92-2.47,4.91-1.61,7.41,2,5.78,9.55,6.82,13.1,1.91l1.53,1.55c.06.06.02.12,0,.18-.12.24-.81.92-1.04,1.13C10.09,26.66-2.15,16.26,3.64,6.91,8.65-1.2,21.22,2.08,21.56,11.51c0,.18.04,1.93-.09,2.02Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M17.85,10.56c-.29-1.26-.98-2.44-2.07-3.35-3.42-2.86-8.76-1.08-9.82,3.23-1.25,5.07,3.93,9.24,8.61,7,.45-.19,1.3-.9,1.64-1.2l-1.8-6.59,3.43.91ZM12.45,15.04v1.58h-1.24v-1.55c-.65-.27-1.4-.37-1.98-.82l.61-1.27c.55.42,2.18,1.06,2.77.61.26-.2.16-.56-.07-.74-.33-.26-1.37-.46-1.83-.64-.85-.35-1.3-.82-1.22-1.8.08-1.01.84-1.53,1.72-1.85v-1.41h1.24v1.44c.6.13,1.16.37,1.72.62l-.62,1.23c-.5-.32-2.02-.91-2.43-.34-.61.84,1.64,1.15,2.13,1.37,1.9.87,1.21,3.45-.79,3.57Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21.86,15.21l-1.89,1.89-2.14-2.12c-.13-.02-1.03,1.02-1.23,1.16l-.06-.23-1.55-5.67,2.94.78,1.29.34,1.61.43c.11.09.05.07,0,.14-.06.09-.28.3-.51.51-.29.27-.59.56-.58.64l2.12,2.14Z"
+      })]
+    })]
+  }));
+};
+var revenuePerClickAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded$1 = ["size"];
+var RevenuePerEmailIcon = function RevenuePerEmailIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M19.63,6.12l-.02.11c-.17.15-.33.3-.5.45h-1.93v.94c-.74.14-1.38.52-1.79,1.08-.4.53-.56,1.18-.46,1.86-.93.87-1.86,1.74-2.81,2.6-.16.14-.46.45-.62.55-.19.12-.39.09-.55-.05L3.47,6.23l-.05-.11h16.21Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M19.64,17.88H3.43s-.07-.05-.04-.07c1.66-1.79,3.3-3.61,5-5.38l.1.03c.48.47.94.97,1.42,1.43.27.25.59.62.95.72.42.12.86.02,1.2-.25.74-.57,1.41-1.43,2.14-1.99.04-.03.08-.07.13-.08.05,0,.47.43.55.51.02.02.03.04.05.05-.07.03-.13.07-.18.13-.11.14-.14.32-.11.66.02.18.05.36.06.43.25,1.14,1.14,1.96,2.46,2.28v.97h1.94v-.14c.07.08.14.16.22.24.05.06.35.37.36.39.02.04-.03.07-.04.07Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M20.34,6.76v1.4c-.29-.21-.63-.37-1-.48l1-.92Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M19.51,16.3c.3-.08.58-.21.83-.37v1.23l-.83-.86Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M2.74,6.83l5.03,4.93c-1.62,1.81-3.3,3.59-4.95,5.38-.02.04-.07-.03-.07-.04V6.83Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M21.14,12.94c-.16-.48-.45-.78-.8-1.01-.48-.3-1.07-.45-1.62-.67v-2.14c.71.1,1.13.64,1.15,1.34h1.22c0-.74-.28-1.36-.75-1.79-.36-.33-.82-.56-1.35-.66-.09-.02-.18-.03-.27-.04v-.9h-1.15v.9c-1.27.1-2.31,1-2.28,2.25,0,.15.02.3.05.45.04.19.11.36.21.51.41.66,1.27.97,2.02,1.14v2.5c-.78-.15-1.35-.79-1.34-1.6h-1.12c-.14,0-.03.65,0,.77.27,1.21,1.31,1.85,2.47,2.05v.9h1.15v-.9c.16,0,.32-.02.48-.06.42-.09.82-.27,1.15-.52.74-.57,1.14-1.49.8-2.51ZM17.56,11.04c-.61-.08-.96-.4-1.05-.75-.13-.49.23-1.06,1.05-1.17v1.92ZM18.72,14.88v-2.3c1.76.3,1.79,2.09,0,2.3Z"
+      })]
+    })]
+  }));
+};
+var revenuePerEmailAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
+var _excluded = ["size"];
+var UniqueClicksIcon = function UniqueClicksIcon(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 30 : _ref$size,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", _objectSpread2(_objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: size,
+    height: size,
+    "aria-hidden": "true"
+  }, props), {}, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "12",
+      fill: "#f1f3ff"
+    }), /*#__PURE__*/jsxRuntime.jsxs("g", {
+      fill: "#4e47e5",
+      children: [/*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M16.11,16.86c.11.39.24.81.41,1.19-.1.02-.22.03-.35.04-3.82.27-7.97-.21-11.82,0-1.71.02-1.24-1.41-.85-2.5.54-1.56,1.73-3.12,3.14-3.98.17-.1.96-.53,1.1-.55.28-.05.52.19.78.28,1.07.36,1.9.45,3.01.15.11-.03.3-.11.49-.19l-.07,3.92.02.08c.22.76.76,1.19,1.53,1.19.67,0,1.4-.33,1.93-.57.09-.04.2-.09.29-.13.03.05.06.12.1.21.1.24.19.54.29.86Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M12.95,4.19c-.19.04-.36.13-.49.27-.16.17-.27.4-.33.71v.05s-.09,4.98-.09,4.98c-.39.19-.84.33-1.35.38-5.23.5-5.62-7.26-.6-7.49,1.26-.06,2.22.4,2.86,1.11Z"
+      }), /*#__PURE__*/jsxRuntime.jsx("path", {
+        d: "M18.28,14.01c.12,1.54,2.94,4.41.27,4.91-.77.14-1.2-.36-1.5-1.04-.44-1-.6-2.39-1.13-2.71-.31-.19-2.88,1.8-3.41-.03l.07-4.07.02-1.23.08-4.56c.1-.52.37-.61.7-.51.16.05.34.15.52.26,1.23.81,4.3,4.05,5.58,5.3,2.25,2.2,1.72,2.87-1.19,3.67Z"
+      })]
+    })]
+  }));
+};
+var uniqueClicksAvatarSx = {
+  width: 30,
+  height: 30,
+  bgcolor: "transparent"
+};
+
 var formatGrowth = function formatGrowth(value, dateName) {
   return "".concat(Number(value !== null && value !== void 0 ? value : 0).toFixed(2), "% vs pp");
 };
@@ -18345,7 +18685,8 @@ var EmailSection = function EmailSection(_ref) {
         "Conversion rate": {
           value: "3.2%",
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+          avatarSx: conversionRateAvatarSx,
           money: false,
           error: false,
           warning: false
@@ -18353,7 +18694,8 @@ var EmailSection = function EmailSection(_ref) {
         CTR: {
           value: "8.1%",
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(CtrIcon, {}),
+          avatarSx: ctrAvatarSx,
           money: false,
           error: false,
           warning: false
@@ -18361,7 +18703,8 @@ var EmailSection = function EmailSection(_ref) {
         "Revenue per email": {
           value: "$".concat(formatNumber(2.45)),
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(RevenuePerEmailIcon, {}),
+          avatarSx: revenuePerEmailAvatarSx,
           money: true,
           error: false,
           warning: false
@@ -18377,7 +18720,8 @@ var EmailSection = function EmailSection(_ref) {
         Clicks: {
           value: "1,612",
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(ClicksIcon, {}),
+          avatarSx: clicksAvatarSx,
           money: false,
           error: false,
           warning: false
@@ -18385,7 +18729,8 @@ var EmailSection = function EmailSection(_ref) {
         "Unique Clicks": {
           value: formatNumber(1148),
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(UniqueClicksIcon, {}),
+          avatarSx: uniqueClicksAvatarSx,
           money: false,
           error: false,
           warning: false
@@ -18401,7 +18746,8 @@ var EmailSection = function EmailSection(_ref) {
         "Revenue per Click": {
           value: "$".concat(formatNumber(30.35)),
           subValue: "12% vs pp",
-          icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+          icon: /*#__PURE__*/jsxRuntime.jsx(RevenuePerClickIcon, {}),
+          avatarSx: revenuePerClickAvatarSx,
           money: true,
           error: false,
           warning: false
@@ -18428,7 +18774,8 @@ var EmailSection = function EmailSection(_ref) {
       "Conversion rate": {
         value: "".concat(Number((_overview$conversionR = overview.conversionRate) !== null && _overview$conversionR !== void 0 ? _overview$conversionR : 0).toFixed(2), "%"),
         subValue: growthCaption("conversionRate"),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.Adjust, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(ConversionRateIcon, {}),
+        avatarSx: conversionRateAvatarSx,
         money: false,
         error: false,
         warning: false
@@ -18436,7 +18783,8 @@ var EmailSection = function EmailSection(_ref) {
       CTR: {
         value: "".concat(Number((_overview$ctr = overview.ctr) !== null && _overview$ctr !== void 0 ? _overview$ctr : 0).toFixed(2), "%"),
         subValue: growthCaption("ctr"),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NotInterested, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(CtrIcon, {}),
+        avatarSx: ctrAvatarSx,
         money: false,
         error: false,
         warning: false
@@ -18444,7 +18792,8 @@ var EmailSection = function EmailSection(_ref) {
       "Revenue per email": {
         value: "$".concat(formatNumber((_overview$revenuePerE = overview.revenuePerEmail) !== null && _overview$revenuePerE !== void 0 ? _overview$revenuePerE : 0)),
         subValue: growthCaption("revenuePerEmail"),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.IndeterminateCheckBoxOutlined, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(RevenuePerEmailIcon, {}),
+        avatarSx: revenuePerEmailAvatarSx,
         money: true,
         error: false,
         warning: false
@@ -18460,7 +18809,8 @@ var EmailSection = function EmailSection(_ref) {
       Clicks: {
         value: formatNumber((_deliverability$total = deliverability.totalClicks) !== null && _deliverability$total !== void 0 ? _deliverability$total : 0),
         subValue: growthCaption("totalClicks", deliverabilityGrowth),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(ClicksIcon, {}),
+        avatarSx: clicksAvatarSx,
         money: false,
         error: false,
         warning: false
@@ -18468,7 +18818,8 @@ var EmailSection = function EmailSection(_ref) {
       "Unique Clicks": {
         value: formatNumber((_deliverability$uniqu = deliverability.uniqueClicks) !== null && _deliverability$uniqu !== void 0 ? _deliverability$uniqu : 0),
         subValue: growthCaption("uniqueClicks", deliverabilityGrowth),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.NearMe, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(UniqueClicksIcon, {}),
+        avatarSx: uniqueClicksAvatarSx,
         money: false,
         error: false,
         warning: false
@@ -18484,7 +18835,8 @@ var EmailSection = function EmailSection(_ref) {
       "Revenue per Click": {
         value: "$".concat(formatNumber((_deliverability$reven = deliverability.revenuePerClick) !== null && _deliverability$reven !== void 0 ? _deliverability$reven : 0)),
         subValue: growthCaption("revenuePerClick", deliverabilityGrowth),
-        icon: /*#__PURE__*/jsxRuntime.jsx(iconsMaterial.HighlightOff, {}),
+        icon: /*#__PURE__*/jsxRuntime.jsx(RevenuePerClickIcon, {}),
+        avatarSx: revenuePerClickAvatarSx,
         money: true,
         error: false,
         warning: false
@@ -18536,6 +18888,7 @@ var EmailSection = function EmailSection(_ref) {
       value: metricInfo[title].value,
       caption: metricInfo[title].subValue,
       icon: metricInfo[title].icon,
+      avatarSx: metricInfo[title].avatarSx,
       error: metricInfo[title].error,
       active: activeMetric === title,
       onClick: function onClick() {