@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

package/dist/finstrong/components/paybillsontime/PayBillsOnTimeStickyComponent/index.es.js

@@ -1,38 +0,0 @@
-import { useFinstrongStore as c, useGlobalCopyStore as p } from "../../../../common/context/hooks/index.es.js";
-import { getSpendingFeeCountState as _ } from "../../../util/finstrongUtils/index.es.js";
-import d from "../../StatusChip/index.es.js";
-import { observer as l } from "mobx-react-lite";
-import n from "@mui/material/Stack";
-import { H2 as m, P as y } from "@mxenabled/mxui";
-import { jsx as r, jsxs as o } from "react/jsx-runtime";
-var f = () => {
-  const { healthScore: t } = c(), { finstrong: i } = p(), { key_indicators_spend: s } = i, { pay_bills_on_time_drawer: e } = s, a = _(t.spending_fee_transaction_count);
-  return /* @__PURE__ */ o(n, {
-    sx: {
-      p: 24,
-      backgroundColor: "background.paper",
-      borderBottom: "1px solid",
-      borderColor: "divider"
-    },
-    children: [/* @__PURE__ */ r(y, {
-      variant: "body2",
-      children: e.pay_bills_on_time_sticky_description
-    }), /* @__PURE__ */ o(n, {
-      direction: "row",
-      sx: {
-        alignItems: "center",
-        justifyContent: "space-between"
-      },
-      children: [/* @__PURE__ */ o(m, { children: [
-        t.spending_fee_transaction_count,
-        " ",
-        e.pay_bills_on_time_sticky_fee_count
-      ] }), /* @__PURE__ */ r(d, { status: a })]
-    })]
-  });
-}, x = l(f);
-export {
-  x as default
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/paybillsontime/PayBillsOnTimeStickyComponent/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/paybillsontime/PayBillsOnTimeStickyComponent.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { H2, P } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore, useFinstrongStore } from '../../../common'\n\nimport { getSpendingFeeCountState } from '../../util/finstrongUtils'\n\nimport StatusChip from '../StatusChip'\n\nconst PayBillsOnTimeStickyComponent = () => {\n  const { healthScore } = useFinstrongStore()\n  const { finstrong: copyContent } = useGlobalCopyStore()\n\n  const { key_indicators_spend: spendCopy } = copyContent\n  const { pay_bills_on_time_drawer: copy } = spendCopy\n\n  const state = getSpendingFeeCountState(healthScore.spending_fee_transaction_count)\n\n  return (\n    <Stack\n      sx={{\n        p: 24,\n        backgroundColor: 'background.paper',\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n      }}\n    >\n      <P variant=\"body2\">{copy.pay_bills_on_time_sticky_description}</P>\n      <Stack direction=\"row\" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>\n        <H2>\n          {healthScore.spending_fee_transaction_count} {copy.pay_bills_on_time_sticky_fee_count}\n        </H2>\n        <StatusChip status={state} />\n      </Stack>\n    </Stack>\n  )\n}\nexport default observer(PayBillsOnTimeStickyComponent)\n"],"mappings":";;;;;;;AAYA,IAAM,IAAA,MAAsC;AAC1C,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAkB,GACpC,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAEhD,EAAE,sBAAsB,EAAA,IAAc,GACtC,EAAE,0BAA0B,EAAA,IAAS,GAErC,IAAQ,EAAyB,EAAY,8BAA8B;AAEjF,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,GAAG;AAAA,MACH,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,cANF,CAQE,gBAAA,EAAC,GAAD;AAAA,MAAG,SAAQ;AAAA,gBAAS,EAAK;AAAA,IAAwC,CAAA,GACjE,gBAAA,EAAC,GAAD;AAAA,MAAO,WAAU;AAAA,MAAM,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,gBAAgB;AAAA,MAAgB;AAAA,gBAAnF,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QACG,EAAY;AAAA,QAA+B;AAAA,QAAE,EAAK;AAAA,MACjD,EAAA,CAAA,GACJ,gBAAA,EAAC,GAAD,EAAY,QAAQ,EAAQ,CAAA,CACvB;AAAA,MACF;AAAA;AAEX,GACA,IAAe,EAAS,CAA6B"}

package/dist/finstrong/components/shared/Accounts/index.es.js

@@ -1,102 +0,0 @@
-import I from "../../../../common/utils/AccountDisplayName/index.es.js";
-import { useAppConfig as D, useGlobalCopyStore as h, useGlobalUiStore as B } from "../../../../common/context/hooks/index.es.js";
-import L from "../../../../common/components/drawer/Drawer/index.es.js";
-import { formatCurrency as $ } from "../../../../core/utils/NumberFormatting/index.es.js";
-import k from "../../../../common/components/ConnectDrawer/index.es.js";
-import { getAccountBalanceDetails as O } from "../../../../accounts/utils/AccountFields/index.es.js";
-import S from "../../../../accounts/components/AccountsListCompact/index.es.js";
-import r from "react";
-import { observer as G } from "mobx-react-lite";
-import { InstitutionLogo as M, P as R, Text as _ } from "@mxenabled/mxui";
-import y from "@mui/material/Button";
-import { ChevronRight as T } from "@mxenabled/mx-icons";
-import { Fragment as s, jsx as t, jsxs as o } from "react/jsx-runtime";
-import { useTheme as j } from "@mui/material/styles";
-import a from "@mui/material/Box";
-import z from "@mui/material/Divider";
-import F from "@mui/material/ListItem";
-import N from "@mui/material/ListItemText";
-import P from "@mui/material/ListItemAvatar";
-var W = ({ loadAccounts: i, loadMoreLabel: b }) => {
-  const g = j(), { config: m } = D(), { connect: v, finstrong: l } = h(), { accounts: x } = h(), { selectedAccounts: u } = B(), [C, p] = r.useState(!1), [A, d] = r.useState(!1), n = r.useMemo(() => u.filter((e) => i ? i.includes(e.account_type) : !0), [u, i]), f = r.useMemo(() => n.slice(0, 3), [n]), w = (e) => {
-    const { firstValue: c } = O(e, x, m.display_available_balance_in_accounts);
-    return c;
-  };
-  return n.length >= 1 ? /* @__PURE__ */ o(s, { children: [/* @__PURE__ */ t(a, {
-    sx: {
-      border: `1px solid ${g.palette.divider}`,
-      borderRadius: 2
-    },
-    children: f.map((e, c) => /* @__PURE__ */ o(r.Fragment, { children: [/* @__PURE__ */ o(F, {
-      sx: { px: 24 },
-      children: [
-        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(M, {
-          alt: "MX",
-          institutionGuid: e.institution_guid ?? ""
-        }) }),
-        /* @__PURE__ */ t(N, {
-          primary: `${I(e, { allowNickname: m?.show_account_nicknames_in_master })}
-              ${e.account_number ? ` *${e.account_number}` : ""}`,
-          slotProps: { primary: {
-            noWrap: !0,
-            pr: 4,
-            variant: "body1"
-          } }
-        }),
-        /* @__PURE__ */ t(R, {
-          bold: !0,
-          variant: "body2",
-          children: $(w(e), "0,0.00")
-        })
-      ]
-    }), c < f.length - 1 && /* @__PURE__ */ t(z, { variant: "inset" })] }, e.guid))
-  }), n.length > 3 && /* @__PURE__ */ o(s, { children: [/* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(y, {
-    endIcon: /* @__PURE__ */ t(T, {}),
-    onClick: () => p(!0),
-    size: "small",
-    sx: {
-      my: 0,
-      px: 16,
-      py: 12,
-      width: "100%"
-    },
-    children: /* @__PURE__ */ o(_, {
-      bold: !0,
-      variant: "body1",
-      children: [
-        n.length - 3,
-        " ",
-        b
-      ]
-    })
-  }) }), /* @__PURE__ */ t(L, {
-    isOpen: C,
-    onClose: () => p(!1),
-    title: l.accounts,
-    children: /* @__PURE__ */ t(S, { loadAccounts: i })
-  })] })] }) : /* @__PURE__ */ o(s, { children: [/* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(y, {
-    onClick: () => d(!0),
-    size: "small",
-    sx: {
-      my: 0,
-      px: 16,
-      py: 12,
-      width: "100%"
-    },
-    variant: "contained",
-    children: /* @__PURE__ */ t(_, {
-      bold: !0,
-      variant: "body1",
-      children: l.connect_more_accounts_button
-    })
-  }) }), /* @__PURE__ */ t(k, {
-    onClose: () => d(!1),
-    showConnectWidget: A,
-    title: v.mini_title
-  })] });
-}, at = G(W);
-export {
-  at as default
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/Accounts/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/Accounts.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { InstitutionLogo, P, Text } from '@mxenabled/mxui'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport {\n  ConnectDrawer,\n  Drawer,\n  useAppConfig,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n} from '../../../common'\nimport { type Account, type AccountType } from '../../../core'\n\nimport { getAccountDisplayName } from '../../../common/utils/AccountDisplayName'\nimport { getAccountBalanceDetails } from '../../../accounts'\nimport AccountsListCompact from '../../../accounts/components/AccountsListCompact'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\ninterface AccountsProps {\n  loadAccounts: AccountType[]\n  loadMoreLabel: string\n}\n\nconst Accounts: React.FC<AccountsProps> = ({ loadAccounts, loadMoreLabel }) => {\n  const theme = useTheme()\n  const { config } = useAppConfig()\n  const { connect: connectCopy, finstrong: copy } = useGlobalCopyStore()\n  const { accounts: accountsData } = useGlobalCopyStore()\n  const { selectedAccounts } = useGlobalUiStore()\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isConnectAccountsOpen, setIsConnectAccountsOpen] = React.useState(false)\n\n  const accounts = React.useMemo(\n    () =>\n      selectedAccounts.filter((account) =>\n        loadAccounts ? loadAccounts.includes(account.account_type) : true,\n      ),\n    [selectedAccounts, loadAccounts],\n  )\n\n  const displayedAccounts = React.useMemo(() => accounts.slice(0, 3), [accounts])\n\n  const getAccountBalance = (account: Account) => {\n    const { firstValue: accountBalance } = getAccountBalanceDetails(\n      account,\n      accountsData,\n      config.display_available_balance_in_accounts,\n    )\n    return accountBalance\n  }\n\n  return accounts.length >= 1 ? (\n    <>\n      <Box sx={{ border: `1px solid ${theme.palette.divider}`, borderRadius: 2 }}>\n        {displayedAccounts.map((account, index) => (\n          <React.Fragment key={account.guid}>\n            <ListItem sx={{ px: 24 }}>\n              <ListItemAvatar>\n                <InstitutionLogo alt=\"MX\" institutionGuid={account.institution_guid ?? ''} />\n              </ListItemAvatar>\n              <ListItemText\n                primary={`${getAccountDisplayName(account, {\n                  allowNickname: config?.show_account_nicknames_in_master,\n                })}\n              ${account.account_number ? ` *${account.account_number}` : ''}`}\n                slotProps={{ primary: { noWrap: true, pr: 4, variant: 'body1' } }}\n              />\n              <P bold={true} variant=\"body2\">\n                {formatCurrency(getAccountBalance(account), '0,0.00')}\n              </P>\n            </ListItem>\n            {index < displayedAccounts.length - 1 && <Divider variant=\"inset\" />}\n          </React.Fragment>\n        ))}\n      </Box>\n      {accounts.length > 3 && (\n        <>\n          <Box>\n            <Button\n              endIcon={<ChevronRight />}\n              onClick={() => setIsOpen(true)}\n              size=\"small\"\n              sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n            >\n              <Text bold={true} variant=\"body1\">\n                {accounts.length - 3} {loadMoreLabel}\n              </Text>\n            </Button>\n          </Box>\n          <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)} title={copy.accounts}>\n            <AccountsListCompact loadAccounts={loadAccounts} />\n          </Drawer>\n        </>\n      )}\n    </>\n  ) : (\n    <>\n      <Box>\n        <Button\n          onClick={() => setIsConnectAccountsOpen(true)}\n          size=\"small\"\n          sx={{ my: 0, px: 16, py: 12, width: '100%' }}\n          variant=\"contained\"\n        >\n          <Text bold={true} variant=\"body1\">\n            {copy.connect_more_accounts_button}\n          </Text>\n        </Button>\n      </Box>\n      <ConnectDrawer\n        onClose={() => setIsConnectAccountsOpen(false)}\n        showConnectWidget={isConnectAccountsOpen}\n        title={connectCopy.mini_title}\n      />\n    </>\n  )\n}\n\nexport default observer(Accounts)\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA,IAAM,IAAA,CAAqC,EAAE,cAAA,GAAc,eAAA,EAAA,MAAoB;AAC7E,QAAM,IAAQ,EAAS,GACjB,EAAE,QAAA,EAAA,IAAW,EAAa,GAC1B,EAAE,SAAS,GAAa,WAAW,EAAA,IAAS,EAAmB,GAC/D,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,EAAE,kBAAA,EAAA,IAAqB,EAAiB,GACxC,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAC1C,CAAC,GAAuB,CAAA,IAA4B,EAAM,SAAS,EAAK,GAExE,IAAW,EAAM,QAAA,MAEnB,EAAiB,OAAA,CAAQ,MACvB,IAAe,EAAa,SAAS,EAAQ,YAAY,IAAI,EAC/D,GACF,CAAC,GAAkB,CAAY,CACjC,GAEM,IAAoB,EAAM,QAAA,MAAc,EAAS,MAAM,GAAG,CAAC,GAAG,CAAC,CAAQ,CAAC,GAExE,IAAA,CAAqB,MAAqB;AAC9C,UAAM,EAAE,YAAY,EAAA,IAAmB,EACrC,GACA,GACA,EAAO,qCACT;AACA,WAAO;AAAA,EACT;AAEA,SAAO,EAAS,UAAU,IACxB,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,QAAQ,aAAa,EAAM,QAAQ,OAAA;AAAA,MAAW,cAAc;AAAA,IAAE;AAAA,cACtE,EAAkB,IAAA,CAAK,GAAS,MAC/B,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAU,IAAI,EAAE,IAAI,GAAG;AAAA,gBAAvB;AAAA,QACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAiB,KAAI;AAAA,UAAK,iBAAiB,EAAQ,oBAAoB;AAAA,QAAK,CAAA,EAC9D,CAAA;AAAA,QAChB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS,GAAG,EAAsB,GAAS,EACzC,eAAe,GAAQ,iCACzB,CAAC,CAAA;AAAA,gBACD,EAAQ,iBAAiB,KAAK,EAAQ,cAAA,KAAmB,EAAA;AAAA,UACzD,WAAW,EAAE,SAAS;AAAA,YAAE,QAAQ;AAAA,YAAM,IAAI;AAAA,YAAG,SAAS;AAAA,UAAQ,EAAE;AAAA,QACjE,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UAAG,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACpB,EAAe,EAAkB,CAAO,GAAG,QAAQ;AAAA,QACnD,CAAA;AAAA,MACK;AAAA,QACT,IAAQ,EAAkB,SAAS,KAAK,gBAAA,EAAC,GAAD,EAAS,SAAQ,QAAS,CAAA,CACrD,EAAA,GAjBK,EAAQ,IAiBb,CACjB;AAAA,EACE,CAAA,GACJ,EAAS,SAAS,KACjB,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,IACxB,SAAA,MAAe,EAAU,EAAI;AAAA,IAC7B,MAAK;AAAA,IACL,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,cAE3C,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,SAAQ;AAAA,gBAA1B;AAAA,QACG,EAAS,SAAS;AAAA,QAAE;AAAA,QAAE;AAAA,MACnB;AAAA;EACA,CAAA,EACL,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,IAAgB,QAAA;AAAA,IAAQ,SAAA,MAAe,EAAU,EAAK;AAAA,IAAG,OAAO,EAAK;AAAA,cACnE,gBAAA,EAAC,GAAD,EAAmC,cAAA,EAAe,CAAA;AAAA,EAC5C,CAAA,CACR,EAAA,CAAA,CAEJ,EAAA,CAAA,IAEF,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,IACE,SAAA,MAAe,EAAyB,EAAI;AAAA,IAC5C,MAAK;AAAA,IACL,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,IAC3C,SAAQ;AAAA,cAER,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,SAAQ;AAAA,gBACvB,EAAK;AAAA,IACF,CAAA;AAAA,EACA,CAAA,EACL,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,IACE,SAAA,MAAe,EAAyB,EAAK;AAAA,IAC7C,mBAAmB;AAAA,IACnB,OAAO,EAAY;AAAA,EACpB,CAAA,CACD,EAAA,CAAA;AAEN,GAEA,KAAe,EAAS,CAAQ"}

package/dist/finstrong/components/shared/CustomDoubleBarPlot/index.es.js

@@ -1,48 +0,0 @@
-import r from "react";
-import { jsx as i, jsxs as y } from "react/jsx-runtime";
-import { useTheme as g } from "@mui/material/styles";
-var B = ({ color: a, data: c, series: n, style: e, ...u }) => {
-  const f = g(), t = r.useRef(null), m = r.useRef(null), [l, d] = r.useState(e.width || 0);
-  r.useLayoutEffect(() => {
-    d(e.width || 0);
-  }, [e.width]), r.useLayoutEffect(() => {
-    const o = new ResizeObserver(() => {
-      window.requestAnimationFrame(() => {
-        if (t.current) {
-          const { width: R } = t.current.getBoundingClientRect(), v = R / 2, s = t.current.querySelector("text");
-          s && s.setAttribute("transform", `translate(${v}, -8)`);
-        }
-      });
-    });
-    return t.current && o.observe(t.current), () => {
-      t.current && o.unobserve(t.current);
-    };
-  }, []);
-  const { formattedComparison: x, formattedMain: h } = c[n.index], b = n.type === 0 ? h : x, p = {
-    ...e,
-    transition: "all 0.3s ease-in-out"
-  }, w = `translate(${l / 2}, -5)`;
-  return /* @__PURE__ */ y("g", { children: [/* @__PURE__ */ i("rect", {
-    ...u,
-    fill: a,
-    ref: t,
-    rx: 2,
-    style: p
-  }), /* @__PURE__ */ i("text", {
-    fill: f.palette.text.secondary,
-    fontSize: 9,
-    fontWeight: 400,
-    ref: m,
-    style: { transition: "transform 0.3s ease-in-out" },
-    textAnchor: "middle",
-    transform: w,
-    x: e.x,
-    y: e.y,
-    children: b
-  })] });
-};
-export {
-  B as CustomDoubleBarPlot
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/CustomDoubleBarPlot/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/CustomDoubleBarPlot.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport interface DataSet {\n  comparison: number\n  formattedComparison: string\n  formattedMain: string\n  label: string\n  main: number\n}\n\nexport const CustomDoubleBarPlot = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotProps) => {\n  const theme = useTheme()\n  const rectRef = React.useRef<SVGRectElement>(null)\n  const textRef = React.useRef<SVGTextElement>(null)\n  const [barWidth, setBarWidth] = React.useState((style.width as number) || 0)\n\n  React.useLayoutEffect(() => {\n    setBarWidth((style.width as number) || 0)\n  }, [style.width])\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { formattedComparison, formattedMain } = data[series.index]\n\n  const formattedAmount = series.type === 0 ? formattedMain : formattedComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  const textTransform = `translate(${barWidth / 2}, -5)`\n\n  return (\n    <g>\n      <rect {...restProps} fill={color} ref={rectRef} rx={2} style={rectStyle} />\n      <text\n        fill={theme.palette.text.secondary}\n        fontSize={9}\n        fontWeight={400}\n        ref={textRef}\n        style={{ transition: 'transform 0.3s ease-in-out' }}\n        textAnchor=\"middle\"\n        transform={textTransform}\n        x={style.x}\n        y={style.y}\n      >\n        {formattedAmount}\n      </text>\n    </g>\n  )\n}\n"],"mappings":";;;AA4BA,IAAa,IAAA,CAAuB,EAClC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC2B;AAC9B,QAAM,IAAQ,EAAS,GACjB,IAAU,EAAM,OAAuB,IAAI,GAC3C,IAAU,EAAM,OAAuB,IAAI,GAC3C,CAAC,GAAU,CAAA,IAAe,EAAM,SAAU,EAAM,SAAoB,CAAC;AAE3E,EAAA,EAAM,gBAAA,MAAsB;AAC1B,IAAA,EAAa,EAAM,SAAoB,CAAC;AAAA,EAC1C,GAAG,CAAC,EAAM,KAAK,CAAC,GAEhB,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAkB,EAAO,SAAS,IAAI,IAAgB,GAEtD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAEM,IAAgB,aAAa,IAAW,CAAA;AAE9C,SACE,gBAAA,EAAC,KAAD,EAAA,UAAA,CACE,gBAAA,EAAC,QAAD;AAAA,IAAM,GAAI;AAAA,IAAW,MAAM;AAAA,IAAO,KAAK;AAAA,IAAS,IAAI;AAAA,IAAG,OAAO;AAAA,EAAY,CAAA,GAC1E,gBAAA,EAAC,QAAD;AAAA,IACE,MAAM,EAAM,QAAQ,KAAK;AAAA,IACzB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO,EAAE,YAAY,6BAA6B;AAAA,IAClD,YAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG,EAAM;AAAA,IACT,GAAG,EAAM;AAAA,cAER;AAAA,EACG,CAAA,CACL,EAAA,CAAA;AAEP"}

package/dist/finstrong/components/shared/CustomPieArc/index.es.js

@@ -1,52 +0,0 @@
-import { getFilledArcStartEndAngle as j, getOutterArcStartEndAngle as v } from "../../../util/finstrongUtils/index.es.js";
-import { Fragment as y, jsx as r, jsxs as C } from "react/jsx-runtime";
-import { useTheme as O } from "@mui/material/styles";
-import * as h from "d3";
-var F = ({ dialScoreData: A, dataIndex: a, arcColor: g, arcStartAngle: p, totalAngularSpan: M, centerX: e, centerY: n, arcRadius: o, innerArcRadius: l, outterArcRadius: s, progressEndAngle: m, unitsPerSegment: u, isFinacialStrengthGraph: c }) => {
-  const t = O(), P = [
-    {
-      offset: "13.62%",
-      color: t.palette.chartMono.chartMono2
-    },
-    {
-      offset: "36.67%",
-      color: t.palette.chartMono.chartMono3
-    },
-    {
-      offset: "59.72%",
-      color: t.palette.chartMono.chartMono4
-    },
-    {
-      offset: "83.46%",
-      color: t.palette.chartMono.chartMono5
-    }
-  ], [d, i] = v(A, M, p, a), [x, E] = j(d, i, a, u, m), G = h.arc().innerRadius(l).outerRadius(s).startAngle(d).endAngle(i).padAngle(0.02).cornerRadius(8), S = h.arc().innerRadius(l).outerRadius(s).startAngle(x).endAngle(E).padAngle(0.02).cornerRadius(8);
-  return /* @__PURE__ */ C(y, { children: [
-    /* @__PURE__ */ r("path", {
-      d: G({}),
-      fill: c ? t.palette.divider : g
-    }),
-    c && /* @__PURE__ */ r("path", {
-      d: S({}),
-      fill: "url(#arcGradient)"
-    }),
-    /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r("linearGradient", {
-      gradientTransform: `rotate(5, ${e}, ${n})`,
-      gradientUnits: "userSpaceOnUse",
-      id: "arcGradient",
-      x1: e + o * 0.8 * Math.cos(Math.PI / 1.35),
-      x2: e - o * 0.8 * Math.cos(Math.PI / 1.35),
-      y1: n + o * 0.8 * Math.sin(Math.PI / 1.35),
-      y2: n - o * 0.8 * Math.sin(Math.PI / 1.35),
-      children: P.map((f, I) => /* @__PURE__ */ r("stop", {
-        offset: f.offset,
-        stopColor: f.color
-      }, I))
-    }) })
-  ] });
-};
-export {
-  F as CustomPieArc
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/CustomPieArc/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/CustomPieArc.tsx"],"sourcesContent":["import * as d3 from 'd3'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieValueType } from '@mui/x-charts'\n\nimport { getFilledArcStartEndAngle, getOutterArcStartEndAngle } from '../../util/finstrongUtils'\n\ninterface CustomPieArcProps {\n  dialScoreData: PieValueType[]\n  dataIndex: number\n  arcStartAngle: number\n  totalAngularSpan: number\n  centerX: number\n  centerY: number\n  arcRadius: number\n  arcColor?: string\n  innerArcRadius: number\n  outterArcRadius: number\n  unitsPerSegment: number\n  progressEndAngle: number\n  isFinacialStrengthGraph?: boolean\n}\nexport const CustomPieArc = ({\n  dialScoreData,\n  dataIndex,\n  arcColor,\n  arcStartAngle,\n  totalAngularSpan,\n  centerX,\n  centerY,\n  arcRadius,\n  innerArcRadius,\n  outterArcRadius,\n  progressEndAngle,\n  unitsPerSegment,\n  isFinacialStrengthGraph,\n}: CustomPieArcProps) => {\n  const theme = useTheme()\n  const gradientSteps = [\n    { offset: '13.62%', color: theme.palette.chartMono.chartMono2 },\n    { offset: '36.67%', color: theme.palette.chartMono.chartMono3 },\n    { offset: '59.72%', color: theme.palette.chartMono.chartMono4 },\n    { offset: '83.46%', color: theme.palette.chartMono.chartMono5 },\n  ]\n\n  const [outterArcStartAngle, outterArcEndAngle] = getOutterArcStartEndAngle(\n    dialScoreData,\n    totalAngularSpan,\n    arcStartAngle,\n    dataIndex,\n  )\n\n  const [filledArcStartAngle, filledArcEndAngle] = getFilledArcStartEndAngle(\n    outterArcStartAngle,\n    outterArcEndAngle,\n    dataIndex,\n    unitsPerSegment,\n    progressEndAngle,\n  )\n\n  const outerArcGenerator = d3\n    .arc()\n    .innerRadius(innerArcRadius)\n    .outerRadius(outterArcRadius)\n    .startAngle(outterArcStartAngle)\n    .endAngle(outterArcEndAngle)\n    .padAngle(0.02)\n    .cornerRadius(8)\n\n  const fillArcGenerator = d3\n    .arc()\n    .innerRadius(innerArcRadius)\n    .outerRadius(outterArcRadius)\n    .startAngle(filledArcStartAngle)\n    .endAngle(filledArcEndAngle)\n    .padAngle(0.02)\n    .cornerRadius(8)\n\n  return (\n    <>\n      {/* Background segment */}\n      <path\n        d={outerArcGenerator({} as d3.DefaultArcObject)!}\n        fill={isFinacialStrengthGraph ? theme.palette.divider : arcColor}\n      />\n\n      {/* Progress segment */}\n      {isFinacialStrengthGraph && (\n        <path d={fillArcGenerator({} as d3.DefaultArcObject)!} fill=\"url(#arcGradient)\" />\n      )}\n\n      <defs>\n        <linearGradient\n          gradientTransform={`rotate(5, ${centerX}, ${centerY})`}\n          gradientUnits=\"userSpaceOnUse\"\n          id=\"arcGradient\"\n          x1={centerX + arcRadius * 0.8 * Math.cos(Math.PI / 1.35)}\n          x2={centerX - arcRadius * 0.8 * Math.cos(Math.PI / 1.35)}\n          y1={centerY + arcRadius * 0.8 * Math.sin(Math.PI / 1.35)}\n          y2={centerY - arcRadius * 0.8 * Math.sin(Math.PI / 1.35)}\n        >\n          {gradientSteps.map((eachStep, index) => (\n            <stop key={index} offset={eachStep.offset} stopColor={eachStep.color} />\n          ))}\n        </linearGradient>\n      </defs>\n    </>\n  )\n}\n"],"mappings":";;;;AAuBA,IAAa,IAAA,CAAgB,EAC3B,eAAA,GACA,WAAA,GACA,UAAA,GACA,eAAA,GACA,kBAAA,GACA,SAAA,GACA,SAAA,GACA,WAAA,GACA,gBAAA,GACA,iBAAA,GACA,kBAAA,GACA,iBAAA,GACA,yBAAA,EAAA,MACuB;AACvB,QAAM,IAAQ,EAAS,GACjB,IAAgB;AAAA,IACpB;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,IAC9D;AAAA,MAAE,QAAQ;AAAA,MAAU,OAAO,EAAM,QAAQ,UAAU;AAAA,IAAW;AAAA,EAChE,GAEM,CAAC,GAAqB,CAAA,IAAqB,EAC/C,GACA,GACA,GACA,CACF,GAEM,CAAC,GAAqB,CAAA,IAAqB,EAC/C,GACA,GACA,GACA,GACA,CACF,GAEM,IAAoB,EACvB,IAAI,EACJ,YAAY,CAAc,EAC1B,YAAY,CAAe,EAC3B,WAAW,CAAmB,EAC9B,SAAS,CAAiB,EAC1B,SAAS,IAAI,EACb,aAAa,CAAC,GAEX,IAAmB,EACtB,IAAI,EACJ,YAAY,CAAc,EAC1B,YAAY,CAAe,EAC3B,WAAW,CAAmB,EAC9B,SAAS,CAAiB,EAC1B,SAAS,IAAI,EACb,aAAa,CAAC;AAEjB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IAEE,gBAAA,EAAC,QAAD;AAAA,MACE,GAAG,EAAkB,CAAC,CAAwB;AAAA,MAC9C,MAAM,IAA0B,EAAM,QAAQ,UAAU;AAAA,IACzD,CAAA;AAAA,IAGA,KACC,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAG,EAAiB,CAAC,CAAwB;AAAA,MAAI,MAAK;AAAA,IAAqB,CAAA;AAAA,IAGnF,gBAAA,EAAC,QAAD,EAAA,UACE,gBAAA,EAAC,kBAAD;AAAA,MACE,mBAAmB,aAAa,CAAA,KAAY,CAAA;AAAA,MAC5C,eAAc;AAAA,MACd,IAAG;AAAA,MACH,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,MACvD,IAAI,IAAU,IAAY,MAAM,KAAK,IAAI,KAAK,KAAK,IAAI;AAAA,gBAEtD,EAAc,IAAA,CAAK,GAAU,MAC5B,gBAAA,EAAC,QAAD;AAAA,QAAkB,QAAQ,EAAS;AAAA,QAAQ,WAAW,EAAS;AAAA,MAAQ,GAA5D,CAA4D,CACxE;AAAA,IACa,CAAA,EACZ,CAAA;AAAA,EACN,EAAA,CAAA;AAEN"}

package/dist/finstrong/components/shared/DialScoreCard/index.es.js

@@ -1,186 +0,0 @@
-import { getMarkerXYCoordinates as U, radiansToDegrees as D } from "../../../util/finstrongUtils/index.es.js";
-import { CustomPieArc as H } from "../CustomPieArc/index.es.js";
-import u from "@mui/material/Stack";
-import { P as c } from "@mxenabled/mxui";
-import { ArrowRightAlt as q, TrendingDown as G, TrendingUp as J } from "@mxenabled/mx-icons";
-import { jsx as t, jsxs as k } from "react/jsx-runtime";
-import { useTheme as K } from "@mui/material/styles";
-import p from "@mui/material/Box";
-import { PieChart as N } from "@mui/x-charts/PieChart";
-var nt = ({ arcRadius: x = 100, healthScore: n, size: r = "L", dialScoreData: v, minValue: g = 0, maxValue: A = 100, margin: T, markerColor: j, healthScoreStatus: F, footerCenterContent: s, footerLeftContent: M, footerRightContent: b, isFinacialStrengthGraph: y = !1 }) => {
-  const L = K(), l = -Math.PI / 1.35, $ = Math.PI / 1.35, w = $ - l, R = w / (A - g), P = l + (n - g) * R + 0.02, W = r !== "SM" ? 0.1 : 0.12, d = x, h = x * (1 - W), i = d * 2, e = i / 2, o = i / 2, [f, S] = U((h + d) / 2, P, n !== 25 && n !== 50 && n !== 75 && n !== 100 ? 0 : 0.12), X = n / 25, a = {
-    L: {
-      markerSize: 12,
-      healthScoreFontSize: 64
-    },
-    M: {
-      markerSize: 8,
-      healthScoreFontSize: 48
-    },
-    SM: {
-      markerSize: 3,
-      healthScoreFontSize: 14
-    }
-  }, Y = {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...T
-  }, B = s === 0 ? q : G, I = r !== "SM" ? 3 : 1, E = I * 4, m = a[r].markerSize * 2 + E;
-  return /* @__PURE__ */ k(u, {
-    sx: {
-      width: i,
-      height: r === "SM" ? i - 7 : i,
-      position: "relative",
-      alignSelf: "center",
-      overflow: "visible"
-    },
-    children: [
-      /* @__PURE__ */ t(N, {
-        height: r === "SM" ? i - 7 : i,
-        hideLegend: !0,
-        margin: Y,
-        series: [{
-          data: v,
-          innerRadius: h,
-          outerRadius: d,
-          startAngle: Math.round(D(l)),
-          endAngle: Math.round(D($))
-        }],
-        skipAnimation: !0,
-        slots: { pieArc: (z) => /* @__PURE__ */ t(H, {
-          arcColor: z.color,
-          arcRadius: x,
-          arcStartAngle: l,
-          centerX: e,
-          centerY: o,
-          dataIndex: z.dataIndex,
-          dialScoreData: v,
-          innerArcRadius: h,
-          isFinacialStrengthGraph: y,
-          outterArcRadius: d,
-          progressEndAngle: P,
-          totalAngularSpan: w,
-          unitsPerSegment: X
-        }) },
-        sx: { "& path": { stroke: "none" } },
-        width: i
-      }),
-      n >= g && n <= A && /* @__PURE__ */ t("svg", {
-        height: m,
-        style: {
-          position: "absolute",
-          left: e + f - a[r].markerSize - 5,
-          top: o + S - a[r].markerSize - 5,
-          overflow: "visible"
-        },
-        viewBox: `${e + f - a[r].markerSize - 5} ${o + S - a[r].markerSize - 5} ${m} ${m}`,
-        width: m,
-        children: /* @__PURE__ */ t("circle", {
-          cx: e + f,
-          cy: o + S,
-          fill: L.palette.common.white,
-          r: a[r].markerSize,
-          stroke: y ? "url(#arcGradient)" : j,
-          strokeWidth: I
-        })
-      }),
-      /* @__PURE__ */ t(p, {
-        sx: {
-          position: "absolute",
-          top: `${o}px`,
-          left: `${e}px`,
-          transform: "translate(-50%, -50%)",
-          textAlign: "center"
-        },
-        children: /* @__PURE__ */ k(u, {
-          spacing: 1,
-          sx: {
-            alignItems: "center",
-            justifyContent: "center",
-            gap: r !== "M" ? 10 : 3
-          },
-          children: [/* @__PURE__ */ t(c, {
-            sx: {
-              fontSize: a[r].healthScoreFontSize,
-              lineHeight: r !== "SM" ? "48px" : "100%"
-            },
-            variant: "h1",
-            children: n
-          }), r !== "SM" && /* @__PURE__ */ t(c, {
-            sx: { fontWeight: 600 },
-            variant: r === "L" ? "body1" : "body2",
-            children: F
-          })]
-        })
-      }),
-      s !== void 0 && /* @__PURE__ */ t(p, {
-        sx: {
-          position: "absolute",
-          top: `${o * 2 * 0.83}px`,
-          left: `${e}px`,
-          transform: "translate(-50%, -50%)",
-          textAlign: "center"
-        },
-        children: typeof s == "number" ? /* @__PURE__ */ k(u, {
-          sx: {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: 4,
-            mt: 24
-          },
-          children: [s > 0 ? /* @__PURE__ */ t(J, {
-            size: 16,
-            sx: { color: "success.main" }
-          }) : /* @__PURE__ */ t(B, {
-            size: 16,
-            sx: { color: "text.secondary" }
-          }), /* @__PURE__ */ t(c, {
-            sx: {
-              fontWeight: 600,
-              color: s > 0 ? "success.main" : "text.secondary"
-            },
-            variant: "body1",
-            children: Math.abs(s)
-          })]
-        }) : /* @__PURE__ */ t(c, {
-          sx: { color: "text.secondary" },
-          variant: "subtitle2",
-          children: s
-        })
-      }),
-      M !== void 0 && /* @__PURE__ */ t(p, {
-        sx: {
-          position: "absolute",
-          top: `${o * 2 * 0.83}px`,
-          left: `${e - e / 2}px`,
-          transform: "translate(-50%, -50%)",
-          textAlign: "left"
-        },
-        children: /* @__PURE__ */ t(c, {
-          variant: "body1",
-          children: M
-        })
-      }),
-      b !== void 0 && /* @__PURE__ */ t(p, {
-        sx: {
-          position: "absolute",
-          top: `${o * 2 * 0.83}px`,
-          left: `${e + e / 2}px`,
-          transform: "translate(-50%, -50%)",
-          textAlign: "right"
-        },
-        children: /* @__PURE__ */ t(c, {
-          variant: "body1",
-          children: b
-        })
-      })
-    ]
-  });
-};
-export {
-  nt as DialScoreCard
-};
-
-//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/shared/DialScoreCard/index.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/shared/DialScoreCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport type { PieArcProps, PieValueType } from '@mui/x-charts'\nimport { PieChart } from '@mui/x-charts/PieChart'\n\nimport { P } from '@mxenabled/mxui'\nimport { TrendingDown, TrendingUp, ArrowRightAlt } from '@mxenabled/mx-icons'\n\nimport { getMarkerXYCoordinates, radiansToDegrees } from '../../util/finstrongUtils'\n\nimport { CustomPieArc } from './CustomPieArc'\n\nexport interface DialScoreCardProps {\n  arcRadius: number\n  healthScore: number\n  size: 'L' | 'M' | 'SM'\n  dialScoreData: PieValueType[]\n  minValue?: number\n  maxValue?: number\n  margin?: { top?: number; right?: number; left?: number; bottom?: number }\n  markerColor?: string\n  healthScoreStatus: string\n  footerCenterContent?: string | number\n  footerLeftContent?: number\n  footerRightContent?: number\n  isFinacialStrengthGraph?: boolean\n}\nexport const DialScoreCard = ({\n  arcRadius = 100,\n  healthScore,\n  size = 'L',\n  dialScoreData,\n  minValue = 0,\n  maxValue = 100,\n  margin,\n  markerColor,\n  healthScoreStatus,\n  footerCenterContent,\n  footerLeftContent,\n  footerRightContent,\n  isFinacialStrengthGraph = false,\n}: DialScoreCardProps) => {\n  const theme = useTheme()\n  const arcStartAngle = -Math.PI / 1.35\n  const arcEndAngle = Math.PI / 1.35\n\n  //finding the end angle of the filled(colored) arc i.e progressArc\n  const totalAngularSpan = arcEndAngle - arcStartAngle\n\n  const anglePerUnit = totalAngularSpan / (maxValue - minValue)\n  const progressEndAngleOffset = (healthScore - minValue) * anglePerUnit\n  const progressEndAngle = arcStartAngle + progressEndAngleOffset + 0.02 // Adding a small offset to avoid overlap with the next arc\n\n  const thicknessRatio = size !== 'SM' ? 0.1 : 0.12\n  const outterArcRadius = arcRadius\n  const innerArcRadius = arcRadius * (1 - thicknessRatio)\n\n  const chartDimenesions = outterArcRadius * 2 //width and height of the chart\n  const centerX = chartDimenesions / 2\n  const centerY = chartDimenesions / 2\n  const markerRadius = (innerArcRadius + outterArcRadius) / 2\n  const angleOffset =\n    healthScore !== 25 && healthScore !== 50 && healthScore !== 75 && healthScore !== 100 ? 0 : 0.12 // Adjust the offset based on health score\n\n  const [markerX, markerY] = getMarkerXYCoordinates(markerRadius, progressEndAngle, angleOffset)\n\n  const unitsPerSegment = healthScore / 25\n\n  const sizeMap = {\n    L: { markerSize: 12, healthScoreFontSize: 64 },\n    M: { markerSize: 8, healthScoreFontSize: 48 },\n    SM: { markerSize: 3, healthScoreFontSize: 14 },\n  }\n\n  const chartMargin = {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n    ...margin,\n  }\n  const PercentageIcon = footerCenterContent === 0 ? ArrowRightAlt : TrendingDown\n  const stroke = size !== 'SM' ? 3 : 1\n  const padding = stroke * 4 // enough room for stroke\n  const svgSize = sizeMap[size].markerSize * 2 + padding\n\n  return (\n    <Stack\n      sx={{\n        width: chartDimenesions,\n        height: size === 'SM' ? chartDimenesions - 7 : chartDimenesions,\n        position: 'relative',\n        alignSelf: 'center',\n        overflow: 'visible',\n      }}\n    >\n      <PieChart\n        height={size === 'SM' ? chartDimenesions - 7 : chartDimenesions}\n        hideLegend={true}\n        margin={chartMargin}\n        series={[\n          {\n            data: dialScoreData,\n            innerRadius: innerArcRadius,\n            outerRadius: outterArcRadius,\n            startAngle: Math.round(radiansToDegrees(arcStartAngle)), // Use Math.degrees to convert\n            endAngle: Math.round(radiansToDegrees(arcEndAngle)), // Use Math.degrees to convert\n          },\n        ]}\n        skipAnimation={true}\n        slots={{\n          pieArc: (props: PieArcProps) => (\n            <CustomPieArc\n              arcColor={props.color}\n              arcRadius={arcRadius}\n              arcStartAngle={arcStartAngle}\n              centerX={centerX}\n              centerY={centerY}\n              dataIndex={props.dataIndex}\n              dialScoreData={dialScoreData}\n              innerArcRadius={innerArcRadius}\n              isFinacialStrengthGraph={isFinacialStrengthGraph}\n              outterArcRadius={outterArcRadius}\n              progressEndAngle={progressEndAngle}\n              totalAngularSpan={totalAngularSpan}\n              unitsPerSegment={unitsPerSegment}\n            />\n          ),\n        }}\n        sx={{\n          '& path': {\n            stroke: 'none',\n          },\n        }}\n        width={chartDimenesions}\n      />\n\n      {healthScore >= minValue && healthScore <= maxValue && (\n        <svg\n          height={svgSize}\n          style={{\n            position: 'absolute',\n            left: centerX + markerX - sizeMap[size].markerSize - 5,\n            top: centerY + markerY - sizeMap[size].markerSize - 5,\n            overflow: 'visible',\n          }}\n          viewBox={`${centerX + markerX - sizeMap[size].markerSize - 5} ${centerY + markerY - sizeMap[size].markerSize - 5} ${svgSize} ${svgSize}`}\n          width={svgSize}\n        >\n          <circle\n            cx={centerX + markerX}\n            cy={centerY + markerY}\n            fill={theme.palette.common.white}\n            r={sizeMap[size].markerSize}\n            stroke={isFinacialStrengthGraph ? 'url(#arcGradient)' : markerColor}\n            strokeWidth={stroke}\n          />\n        </svg>\n      )}\n      <Box\n        sx={{\n          position: 'absolute',\n          top: `${centerY}px`,\n          left: `${centerX}px`,\n          transform: 'translate(-50%, -50%)',\n          textAlign: 'center',\n        }}\n      >\n        <Stack\n          spacing={1}\n          sx={{ alignItems: 'center', justifyContent: 'center', gap: size !== 'M' ? 10 : 3 }}\n        >\n          <P\n            sx={{\n              fontSize: sizeMap[size].healthScoreFontSize,\n              lineHeight: size !== 'SM' ? '48px' : '100%',\n            }}\n            variant=\"h1\"\n          >\n            {healthScore}\n          </P>\n          {size !== 'SM' && (\n            <P sx={{ fontWeight: 600 }} variant={size === 'L' ? 'body1' : 'body2'}>\n              {healthScoreStatus}\n            </P>\n          )}\n        </Stack>\n      </Box>\n      {footerCenterContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX}px`,\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'center',\n          }}\n        >\n          {typeof footerCenterContent === 'number' ? (\n            <Stack\n              sx={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 4,\n                mt: 24,\n              }}\n            >\n              {footerCenterContent > 0 ? (\n                <TrendingUp size={16} sx={{ color: 'success.main' }} />\n              ) : (\n                <PercentageIcon size={16} sx={{ color: 'text.secondary' }} />\n              )}\n              <P\n                sx={{\n                  fontWeight: 600,\n                  color: footerCenterContent > 0 ? 'success.main' : 'text.secondary',\n                }}\n                variant=\"body1\"\n              >\n                {Math.abs(footerCenterContent)}\n              </P>\n            </Stack>\n          ) : (\n            <P sx={{ color: 'text.secondary' }} variant={'subtitle2'}>\n              {footerCenterContent}\n            </P>\n          )}\n        </Box>\n      )}\n      {/* Left Footer Content */}\n      {footerLeftContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX - centerX / 2}px`, // shift left from center\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'left',\n          }}\n        >\n          <P variant=\"body1\">{footerLeftContent}</P>\n        </Box>\n      )}\n\n      {/* Right Footer Content */}\n      {footerRightContent !== undefined && (\n        <Box\n          sx={{\n            position: 'absolute',\n            top: `${centerY * 2 * 0.83}px`,\n            left: `${centerX + centerX / 2}px`,\n            transform: 'translate(-50%, -50%)',\n            textAlign: 'right',\n          }}\n        >\n          <P variant=\"body1\">{footerRightContent}</P>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}