@ammarkhalidfarooq/dashboard-package 0.6.97 → 0.6.99

package/dist/MetricCard.cjs.js

@@ -134,7 +134,12 @@ var MetricCard = function MetricCard(_ref) {
           width: 30,
           height: 30,
           bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
-          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5",
+          p: 0.625,
+          "& .MuiSvgIcon-root, & svg": {
+            width: "100%",
+            height: "100%"
+          }
         }, avatarSx),
         children: icon
       })]

package/dist/MetricCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.cjs.js","sources":["../src/config/helper.js","../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["export const TREND_UP_COLOR = \"#22C55E\";\r\nexport const TREND_DOWN_COLOR = \"#EF4444\";\r\n\r\nexport function getTrendDirection(valueOrText) {\r\n  const text = String(valueOrText ?? \"\").trim();\r\n  if (text.includes(\"▼\")) return \"down\";\r\n  if (text.includes(\"▲\")) return \"up\";\r\n\r\n  const match = text.match(/-?\\d+(\\.\\d+)?/);\r\n  if (!match) return \"neutral\";\r\n\r\n  const n = Number(match[0]);\r\n  if (n < 0) return \"down\";\r\n  if (n > 0) return \"up\";\r\n  return \"neutral\";\r\n}\r\n\r\nexport function getTrendColor(\r\n  valueOrText,\r\n  { up = TREND_UP_COLOR, down = TREND_DOWN_COLOR, neutral = up } = {}\r\n) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return down;\r\n  if (direction === \"up\") return up;\r\n  return neutral;\r\n}\r\n\r\nexport function getTrendArrow(valueOrText) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return \"▼\";\r\n  if (direction === \"up\") return \"▲\";\r\n  return \"\";\r\n}\r\n\r\nexport function formatCurrency(value) {\r\n  return `$${Number(value ?? 0).toLocaleString(\"en-US\")}`;\r\n}\r\n\r\nexport function formatNumber(num) {\r\n  if (num >= 1_000_000_000) {\r\n    return (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"B\";\r\n  }\r\n\r\n  if (num >= 1_000_000) {\r\n    return (num / 1_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\r\n  }\r\n\r\n  if (num >= 1_000) {\r\n    return (num / 1_000).toFixed(1).replace(/\\.0$/, \"\") + \"K\";\r\n  }\r\n\r\n  return (num ?? 0).toString();\r\n}","import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\nimport { getTrendColor, getTrendDirection } from \"../../../config/helper\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick,\r\n  sx = {},\r\n  titleSx = {},\r\n  valueSx = {},\r\n  captionSx = {},\r\n  avatarSx = {},\r\n}) => {\r\n  const captionText = String(caption ?? \"\");\r\n  const isPercentCaption = captionText.includes(\"%\");\r\n  const trendDirection = isPercentCaption ? getTrendDirection(captionText) : \"neutral\";\r\n  const hasTrendArrow = captionText.includes(\"▼\") || captionText.includes(\"▲\");\r\n  const trendPrefix =\r\n    hasTrendArrow || !isPercentCaption\r\n      ? \"\"\r\n      : trendDirection === \"down\"\r\n        ? \"▼ \"\r\n        : trendDirection === \"up\"\r\n          ? \"▲ \"\r\n          : \"\";\r\n  const captionColor = captionText.includes(\"failed\")\r\n    ? \"#4F46E5\"\r\n    : error\r\n      ? \"#ef4444\"\r\n      : isPercentCaption\r\n        ? getTrendColor(captionText, { up: \"#0B8F61\", down: \"#ef4444\" })\r\n        : \"#0B8F61\";\r\n\r\n  return (\r\n    <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n      ...sx,\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n          ...titleSx,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n          ...avatarSx,\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n        ...valueSx,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n      <Typography\r\n        sx={{\r\n          fontSize: 12,\r\n          fontWeight: 500,\r\n          color: captionColor,\r\n          ...captionSx,\r\n        }}\r\n      >\r\n        {`${trendPrefix}${captionText}`}\r\n      </Typography>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default MetricCard;\r\n"],"names":["TREND_UP_COLOR","TREND_DOWN_COLOR","getTrendDirection","valueOrText","text","String","trim","includes","match","n","Number","getTrendColor","_ref","arguments","length","undefined","_ref$up","up","_ref$down","down","_ref$neutral","neutral","direction","MetricCard","title","value","caption","icon","active","warning","error","onClick","_ref$sx","sx","_ref$titleSx","titleSx","_ref$valueSx","valueSx","_ref$captionSx","captionSx","_ref$avatarSx","avatarSx","captionText","isPercentCaption","trendDirection","hasTrendArrow","trendPrefix","captionColor","_jsxs","Box","_objectSpread","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight"],"mappings":"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"}
+{"version":3,"file":"MetricCard.cjs.js","sources":["../src/config/helper.js","../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["export const TREND_UP_COLOR = \"#22C55E\";\r\nexport const TREND_DOWN_COLOR = \"#EF4444\";\r\n\r\nexport function getTrendDirection(valueOrText) {\r\n  const text = String(valueOrText ?? \"\").trim();\r\n  if (text.includes(\"▼\")) return \"down\";\r\n  if (text.includes(\"▲\")) return \"up\";\r\n\r\n  const match = text.match(/-?\\d+(\\.\\d+)?/);\r\n  if (!match) return \"neutral\";\r\n\r\n  const n = Number(match[0]);\r\n  if (n < 0) return \"down\";\r\n  if (n > 0) return \"up\";\r\n  return \"neutral\";\r\n}\r\n\r\nexport function getTrendColor(\r\n  valueOrText,\r\n  { up = TREND_UP_COLOR, down = TREND_DOWN_COLOR, neutral = up } = {}\r\n) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return down;\r\n  if (direction === \"up\") return up;\r\n  return neutral;\r\n}\r\n\r\nexport function getTrendArrow(valueOrText) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return \"▼\";\r\n  if (direction === \"up\") return \"▲\";\r\n  return \"\";\r\n}\r\n\r\nexport function formatCurrency(value) {\r\n  return `$${Number(value ?? 0).toLocaleString(\"en-US\")}`;\r\n}\r\n\r\nexport function formatNumber(num) {\r\n  if (num >= 1_000_000_000) {\r\n    return (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"B\";\r\n  }\r\n\r\n  if (num >= 1_000_000) {\r\n    return (num / 1_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\r\n  }\r\n\r\n  if (num >= 1_000) {\r\n    return (num / 1_000).toFixed(1).replace(/\\.0$/, \"\") + \"K\";\r\n  }\r\n\r\n  return (num ?? 0).toString();\r\n}","import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\nimport { getTrendColor, getTrendDirection } from \"../../../config/helper\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick,\r\n  sx = {},\r\n  titleSx = {},\r\n  valueSx = {},\r\n  captionSx = {},\r\n  avatarSx = {},\r\n}) => {\r\n  const captionText = String(caption ?? \"\");\r\n  const isPercentCaption = captionText.includes(\"%\");\r\n  const trendDirection = isPercentCaption ? getTrendDirection(captionText) : \"neutral\";\r\n  const hasTrendArrow = captionText.includes(\"▼\") || captionText.includes(\"▲\");\r\n  const trendPrefix =\r\n    hasTrendArrow || !isPercentCaption\r\n      ? \"\"\r\n      : trendDirection === \"down\"\r\n        ? \"▼ \"\r\n        : trendDirection === \"up\"\r\n          ? \"▲ \"\r\n          : \"\";\r\n  const captionColor = captionText.includes(\"failed\")\r\n    ? \"#4F46E5\"\r\n    : error\r\n      ? \"#ef4444\"\r\n      : isPercentCaption\r\n        ? getTrendColor(captionText, { up: \"#0B8F61\", down: \"#ef4444\" })\r\n        : \"#0B8F61\";\r\n\r\n  return (\r\n    <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n      ...sx,\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n          ...titleSx,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n          p: 0.625,\r\n          \"& .MuiSvgIcon-root, & svg\": {\r\n            width: \"100%\",\r\n            height: \"100%\",\r\n          },\r\n          ...avatarSx,\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n        ...valueSx,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n      <Typography\r\n        sx={{\r\n          fontSize: 12,\r\n          fontWeight: 500,\r\n          color: captionColor,\r\n          ...captionSx,\r\n        }}\r\n      >\r\n        {`${trendPrefix}${captionText}`}\r\n      </Typography>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default MetricCard;\r\n"],"names":["TREND_UP_COLOR","TREND_DOWN_COLOR","getTrendDirection","valueOrText","text","String","trim","includes","match","n","Number","getTrendColor","_ref","arguments","length","undefined","_ref$up","up","_ref$down","down","_ref$neutral","neutral","direction","MetricCard","title","value","caption","icon","active","warning","error","onClick","_ref$sx","sx","_ref$titleSx","titleSx","_ref$valueSx","valueSx","_ref$captionSx","captionSx","_ref$avatarSx","avatarSx","captionText","isPercentCaption","trendDirection","hasTrendArrow","trendPrefix","captionColor","_jsxs","Box","_objectSpread","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight"],"mappings":"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"}

package/dist/MetricCard.es.js

@@ -132,7 +132,12 @@ var MetricCard = function MetricCard(_ref) {
           width: 30,
           height: 30,
           bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
-          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5",
+          p: 0.625,
+          "& .MuiSvgIcon-root, & svg": {
+            width: "100%",
+            height: "100%"
+          }
         }, avatarSx),
         children: icon
       })]

package/dist/MetricCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricCard.es.js","sources":["../src/config/helper.js","../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["export const TREND_UP_COLOR = \"#22C55E\";\r\nexport const TREND_DOWN_COLOR = \"#EF4444\";\r\n\r\nexport function getTrendDirection(valueOrText) {\r\n  const text = String(valueOrText ?? \"\").trim();\r\n  if (text.includes(\"▼\")) return \"down\";\r\n  if (text.includes(\"▲\")) return \"up\";\r\n\r\n  const match = text.match(/-?\\d+(\\.\\d+)?/);\r\n  if (!match) return \"neutral\";\r\n\r\n  const n = Number(match[0]);\r\n  if (n < 0) return \"down\";\r\n  if (n > 0) return \"up\";\r\n  return \"neutral\";\r\n}\r\n\r\nexport function getTrendColor(\r\n  valueOrText,\r\n  { up = TREND_UP_COLOR, down = TREND_DOWN_COLOR, neutral = up } = {}\r\n) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return down;\r\n  if (direction === \"up\") return up;\r\n  return neutral;\r\n}\r\n\r\nexport function getTrendArrow(valueOrText) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return \"▼\";\r\n  if (direction === \"up\") return \"▲\";\r\n  return \"\";\r\n}\r\n\r\nexport function formatCurrency(value) {\r\n  return `$${Number(value ?? 0).toLocaleString(\"en-US\")}`;\r\n}\r\n\r\nexport function formatNumber(num) {\r\n  if (num >= 1_000_000_000) {\r\n    return (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"B\";\r\n  }\r\n\r\n  if (num >= 1_000_000) {\r\n    return (num / 1_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\r\n  }\r\n\r\n  if (num >= 1_000) {\r\n    return (num / 1_000).toFixed(1).replace(/\\.0$/, \"\") + \"K\";\r\n  }\r\n\r\n  return (num ?? 0).toString();\r\n}","import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\nimport { getTrendColor, getTrendDirection } from \"../../../config/helper\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick,\r\n  sx = {},\r\n  titleSx = {},\r\n  valueSx = {},\r\n  captionSx = {},\r\n  avatarSx = {},\r\n}) => {\r\n  const captionText = String(caption ?? \"\");\r\n  const isPercentCaption = captionText.includes(\"%\");\r\n  const trendDirection = isPercentCaption ? getTrendDirection(captionText) : \"neutral\";\r\n  const hasTrendArrow = captionText.includes(\"▼\") || captionText.includes(\"▲\");\r\n  const trendPrefix =\r\n    hasTrendArrow || !isPercentCaption\r\n      ? \"\"\r\n      : trendDirection === \"down\"\r\n        ? \"▼ \"\r\n        : trendDirection === \"up\"\r\n          ? \"▲ \"\r\n          : \"\";\r\n  const captionColor = captionText.includes(\"failed\")\r\n    ? \"#4F46E5\"\r\n    : error\r\n      ? \"#ef4444\"\r\n      : isPercentCaption\r\n        ? getTrendColor(captionText, { up: \"#0B8F61\", down: \"#ef4444\" })\r\n        : \"#0B8F61\";\r\n\r\n  return (\r\n    <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n      ...sx,\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n          ...titleSx,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n          ...avatarSx,\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n        ...valueSx,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n      <Typography\r\n        sx={{\r\n          fontSize: 12,\r\n          fontWeight: 500,\r\n          color: captionColor,\r\n          ...captionSx,\r\n        }}\r\n      >\r\n        {`${trendPrefix}${captionText}`}\r\n      </Typography>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default MetricCard;\r\n"],"names":["TREND_UP_COLOR","TREND_DOWN_COLOR","getTrendDirection","valueOrText","text","String","trim","includes","match","n","Number","getTrendColor","_ref","arguments","length","undefined","_ref$up","up","_ref$down","down","_ref$neutral","neutral","direction","MetricCard","title","value","caption","icon","active","warning","error","onClick","_ref$sx","sx","_ref$titleSx","titleSx","_ref$valueSx","valueSx","_ref$captionSx","captionSx","_ref$avatarSx","avatarSx","captionText","isPercentCaption","trendDirection","hasTrendArrow","trendPrefix","captionColor","_jsxs","Box","_objectSpread","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight"],"mappings":"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"}
+{"version":3,"file":"MetricCard.es.js","sources":["../src/config/helper.js","../src/components/advanced/MetricCard/index.jsx"],"sourcesContent":["export const TREND_UP_COLOR = \"#22C55E\";\r\nexport const TREND_DOWN_COLOR = \"#EF4444\";\r\n\r\nexport function getTrendDirection(valueOrText) {\r\n  const text = String(valueOrText ?? \"\").trim();\r\n  if (text.includes(\"▼\")) return \"down\";\r\n  if (text.includes(\"▲\")) return \"up\";\r\n\r\n  const match = text.match(/-?\\d+(\\.\\d+)?/);\r\n  if (!match) return \"neutral\";\r\n\r\n  const n = Number(match[0]);\r\n  if (n < 0) return \"down\";\r\n  if (n > 0) return \"up\";\r\n  return \"neutral\";\r\n}\r\n\r\nexport function getTrendColor(\r\n  valueOrText,\r\n  { up = TREND_UP_COLOR, down = TREND_DOWN_COLOR, neutral = up } = {}\r\n) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return down;\r\n  if (direction === \"up\") return up;\r\n  return neutral;\r\n}\r\n\r\nexport function getTrendArrow(valueOrText) {\r\n  const direction = getTrendDirection(valueOrText);\r\n  if (direction === \"down\") return \"▼\";\r\n  if (direction === \"up\") return \"▲\";\r\n  return \"\";\r\n}\r\n\r\nexport function formatCurrency(value) {\r\n  return `$${Number(value ?? 0).toLocaleString(\"en-US\")}`;\r\n}\r\n\r\nexport function formatNumber(num) {\r\n  if (num >= 1_000_000_000) {\r\n    return (num / 1_000_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"B\";\r\n  }\r\n\r\n  if (num >= 1_000_000) {\r\n    return (num / 1_000_000).toFixed(1).replace(/\\.0$/, \"\") + \"M\";\r\n  }\r\n\r\n  if (num >= 1_000) {\r\n    return (num / 1_000).toFixed(1).replace(/\\.0$/, \"\") + \"K\";\r\n  }\r\n\r\n  return (num ?? 0).toString();\r\n}","import { Avatar, Box, Stack, Typography } from \"@mui/material\";\r\nimport { getTrendColor, getTrendDirection } from \"../../../config/helper\";\r\n\r\n\r\nconst MetricCard = ({\r\n  title,\r\n  value,\r\n  caption,\r\n  icon,\r\n  active,\r\n  warning,\r\n  error,\r\n  onClick,\r\n  sx = {},\r\n  titleSx = {},\r\n  valueSx = {},\r\n  captionSx = {},\r\n  avatarSx = {},\r\n}) => {\r\n  const captionText = String(caption ?? \"\");\r\n  const isPercentCaption = captionText.includes(\"%\");\r\n  const trendDirection = isPercentCaption ? getTrendDirection(captionText) : \"neutral\";\r\n  const hasTrendArrow = captionText.includes(\"▼\") || captionText.includes(\"▲\");\r\n  const trendPrefix =\r\n    hasTrendArrow || !isPercentCaption\r\n      ? \"\"\r\n      : trendDirection === \"down\"\r\n        ? \"▼ \"\r\n        : trendDirection === \"up\"\r\n          ? \"▲ \"\r\n          : \"\";\r\n  const captionColor = captionText.includes(\"failed\")\r\n    ? \"#4F46E5\"\r\n    : error\r\n      ? \"#ef4444\"\r\n      : isPercentCaption\r\n        ? getTrendColor(captionText, { up: \"#0B8F61\", down: \"#ef4444\" })\r\n        : \"#0B8F61\";\r\n\r\n  return (\r\n    <Box\r\n    sx={{\r\n      bgcolor: \"#fff\",\r\n      border: `1.5px solid ${active ? \"#4F46E5\" : warning ? \"#F3B33D\" : error ? \"#ef4444\" : \"#F1F1F5\"}`,\r\n      borderRadius: \"16px\",\r\n      p: { xs: 1.75, md: 2 },\r\n      paddingTop: \"10px !important\", paddingBottom: \"10px !important\",\r\n      height: 92,\r\n      boxShadow: \"0 14px 30px rgba(21, 26, 45, 0.06)\",\r\n      ...sx,\r\n    }}\r\n    onClick={onClick}\r\n  >\r\n    <Stack\r\n      direction=\"row\"\r\n      justifyContent=\"space-between\"\r\n      alignItems=\"center\"\r\n    >\r\n      <Typography\r\n        sx={{\r\n          color: active ? \"#818CF8\" : \"#999EAA\",\r\n          fontSize: 13,\r\n          fontWeight: 500,\r\n          letterSpacing: 0,\r\n          ...titleSx,\r\n        }}\r\n      >\r\n        {title}\r\n      </Typography>\r\n      <Avatar\r\n        sx={{\r\n          width: 30,\r\n          height: 30,\r\n          bgcolor: warning ? \"#FFF3CF\" : error ? \"#fee2e2\" : \"#EEF2FF\",\r\n          color: warning ? \"#B45309\" : error ? \"#ef4444\" : \"#4F46E5\",\r\n          p: 0.625,\r\n          \"& .MuiSvgIcon-root, & svg\": {\r\n            width: \"100%\",\r\n            height: \"100%\",\r\n          },\r\n          ...avatarSx,\r\n        }}\r\n      >\r\n        {icon}\r\n      </Avatar>\r\n    </Stack>\r\n    <Typography\r\n      sx={{\r\n        fontSize: 22,\r\n        fontWeight: 700,\r\n        color: active ? \"#4F46E5\" : \"#050509\",\r\n        lineHeight: 1.15,\r\n        ...valueSx,\r\n      }}\r\n    >\r\n      {value}\r\n    </Typography>\r\n      <Typography\r\n        sx={{\r\n          fontSize: 12,\r\n          fontWeight: 500,\r\n          color: captionColor,\r\n          ...captionSx,\r\n        }}\r\n      >\r\n        {`${trendPrefix}${captionText}`}\r\n      </Typography>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport default MetricCard;\r\n"],"names":["TREND_UP_COLOR","TREND_DOWN_COLOR","getTrendDirection","valueOrText","text","String","trim","includes","match","n","Number","getTrendColor","_ref","arguments","length","undefined","_ref$up","up","_ref$down","down","_ref$neutral","neutral","direction","MetricCard","title","value","caption","icon","active","warning","error","onClick","_ref$sx","sx","_ref$titleSx","titleSx","_ref$valueSx","valueSx","_ref$captionSx","captionSx","_ref$avatarSx","avatarSx","captionText","isPercentCaption","trendDirection","hasTrendArrow","trendPrefix","captionColor","_jsxs","Box","_objectSpread","bgcolor","border","concat","borderRadius","p","xs","md","paddingTop","paddingBottom","height","boxShadow","children","Stack","justifyContent","alignItems","_jsx","Typography","color","fontSize","fontWeight","letterSpacing","Avatar","width","lineHeight"],"mappings":"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"}

package/dist/index.cjs.js

@@ -1338,7 +1338,12 @@ var MetricCard$1 = function MetricCard(_ref) {
           width: 30,
           height: 30,
           bgcolor: warning ? "#FFF3CF" : error ? "#fee2e2" : "#EEF2FF",
-          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5"
+          color: warning ? "#B45309" : error ? "#ef4444" : "#4F46E5",
+          p: 0.625,
+          "& .MuiSvgIcon-root, & svg": {
+            width: "100%",
+            height: "100%"
+          }
         }, avatarSx),
         children: icon
       })]
@@ -1721,7 +1726,7 @@ var THEME = {
   trendUpBg: "#D1FAE5",
   trendUpText: "#059669"
 };
-var BULLET = " · ";
+var BULLET = " - ";
 
 // ─── Number helpers ───────────────────────────────────────────────────────────
 var d$ = function d$(v) {
@@ -3393,7 +3398,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref34, ref) {
   var heroTrendText = revenueTrendText;
   var heroDetailText = [passThrough, "".concat(formatNumber(totalDonors), " donors"), "$".concat(formatNumber(Number(avgDonation).toFixed(2)), " avg"), "".concat(formatNumber(totalVisits), " visits")].join(BULLET);
   var formatMetricDetail = function formatMetricDetail(detail) {
-    return String(detail !== null && detail !== void 0 ? detail : "").replace(/\s-\s/g, BULLET);
+    return String(detail !== null && detail !== void 0 ? detail : "").replace(/\s·\s/g, BULLET).replace(/\s-\s/g, BULLET);
   };
   var formatRoasTrend = function formatRoasTrend(trend) {
     return String(trend !== null && trend !== void 0 ? trend : "").replace(/x$/, "×");
@@ -3482,7 +3487,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref34, ref) {
               title: "Total Donors",
               value: ((_metricByTitle$Total = metricByTitle["Total Donors"]) === null || _metricByTitle$Total === void 0 ? void 0 : _metricByTitle$Total.value) || "".concat(formatNumber(totalDonors)),
               trend: ((_metricByTitle$Total2 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total2 === void 0 ? void 0 : _metricByTitle$Total2.trend) || formatTrend((_growth$totalDonation = growth === null || growth === void 0 ? void 0 : growth.totalDonations) !== null && _growth$totalDonation !== void 0 ? _growth$totalDonation : 0),
-              detail: formatMetricDetail(((_metricByTitle$Total3 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total3 === void 0 ? void 0 : _metricByTitle$Total3.detail) || "".concat(formatNumber(newDonors), " new \xB7 ").concat(formatNumber(returningDonors), " returning"))
+              detail: formatMetricDetail(((_metricByTitle$Total3 = metricByTitle["Total Donors"]) === null || _metricByTitle$Total3 === void 0 ? void 0 : _metricByTitle$Total3.detail) || "".concat(formatNumber(newDonors), " new").concat(BULLET).concat(formatNumber(returningDonors), " returning"))
             }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
               title: "Avg Donation",
               value: kpi$(avgDonation),
@@ -3499,7 +3504,7 @@ var ExportPdfLayout = /*#__PURE__*/React.forwardRef(function (_ref34, ref) {
               title: "ROAS",
               value: kpiRoas((_apiData$roasCard = apiData === null || apiData === void 0 ? void 0 : apiData.roasCard) !== null && _apiData$roasCard !== void 0 ? _apiData$roasCard : 0),
               trend: formatRoasTrend(((_metricByTitle$ROAS = metricByTitle.ROAS) === null || _metricByTitle$ROAS === void 0 ? void 0 : _metricByTitle$ROAS.trend) || formatTrend((_apiData$roasCardPrev = apiData === null || apiData === void 0 ? void 0 : apiData.roasCardPrev) !== null && _apiData$roasCardPrev !== void 0 ? _apiData$roasCardPrev : 0, "x")),
-              detail: formatMetricDetail(((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$Compact((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 0), " spend \xB7 ").concat(d$Compact((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 0), " attrib."))
+              detail: formatMetricDetail(((_metricByTitle$ROAS2 = metricByTitle.ROAS) === null || _metricByTitle$ROAS2 === void 0 ? void 0 : _metricByTitle$ROAS2.detail) || "".concat(d$Compact((_apiData$adSpend = apiData === null || apiData === void 0 ? void 0 : apiData.adSpend) !== null && _apiData$adSpend !== void 0 ? _apiData$adSpend : 0), " spend").concat(BULLET).concat(d$Compact((_apiData$attributedRe = apiData === null || apiData === void 0 ? void 0 : apiData.attributedRevenue) !== null && _apiData$attributedRe !== void 0 ? _apiData$attributedRe : 0), " attrib."))
             }), /*#__PURE__*/jsxRuntime.jsx(MetricGridCard, {
               title: "Conversion",
               value: kpiPct(convRate),