@mx-cartographer/experiences 9.2.4-alpha.al0 → 9.3.0-alpha.bb1

package/dist/finstrong/components/ProfileDrawer/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/ProfileDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { H3, P } from '@mxenabled/mxui'\nimport { AccountBalance, CalendarMonth, CreditCard, Payments } from '@mxenabled/mx-icons'\n\nimport ConnectionsDrawer from '../../accounts/components/ConnectionsDrawer'\nimport {\n  Drawer,\n  useAccountStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n  useUserStore,\n} from '../../common'\nimport { Frequency, RepeatingType } from '../../core'\nimport { RecurringSettings } from '../../recurringtransactions'\n\nimport { buildProfileItem } from '../util/finstrongUtils'\n\nimport { ConnectMoreAccountsCard } from './ConnectMoreAccountsCard'\nimport ManageCreditScore from './ManageCreditScore'\nimport ManageDOB from './ManageDOB'\nimport ProfileList, { Action } from './ProfileList'\nimport ProfileProgressBar from './ProfileProgressBar'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\ninterface ProfileDrawerProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst ProfileDrawer = ({ isOpen, onClose }: ProfileDrawerProps) => {\n  const { visibleFinstrongAccounts: accounts } = useAccountStore()\n  const {\n    accounts: accountsCopy,\n    common: commonCopy,\n    finstrong: finstrongCopy,\n    recurring: recurringCopy,\n  } = useGlobalCopyStore()\n  const { repeatingTransactions } = useRecurringTransactionsStore()\n  const { user } = useUserStore()\n\n  const totalIncomeAmount = repeatingTransactions.reduce((sum, rt) => {\n    const { repeating_transaction_type, transactions, recurrence_type, amount } = rt\n\n    const isIncome =\n      repeating_transaction_type === RepeatingType.Income &&\n      ((transactions && transactions.length > 0) || recurrence_type === Frequency.EveryYear)\n\n    return isIncome ? sum + amount : sum\n  }, 0)\n\n  const [action, setAction] = React.useState<Action | null>(null)\n\n  const profileItemsData = [\n    {\n      dynamicCopy: finstrongCopy.add_profile_item,\n      fallbackLabel: finstrongCopy.monthly_income,\n      icon: <Payments />,\n      key: Action.MonthlyIncome,\n      label: finstrongCopy.monthly_income,\n      value: totalIncomeAmount,\n    },\n    {\n      dynamicCopy: finstrongCopy.add_profile_item,\n      fallbackLabel: finstrongCopy.date_of_birth,\n      icon: <CalendarMonth />,\n      key: Action.DateOfBirth,\n      label: finstrongCopy.date_of_birth,\n      value: user.birthday,\n    },\n    {\n      dynamicCopy: finstrongCopy.add_profile_item,\n      fallbackLabel: finstrongCopy.credit_score,\n      icon: <CreditCard />,\n      key: Action.CreditScore,\n      label: finstrongCopy.credit_score,\n      value: user.credit_score,\n    },\n    {\n      fallbackLabel: finstrongCopy.connect_your_accounts,\n      icon: <AccountBalance />,\n      key: Action.Connections,\n      label: finstrongCopy.connections,\n      value:\n        accounts.length > 0\n          ? (buildDynamicCopy(\n              finstrongCopy.connected_account,\n              String(accounts.length),\n              accounts.length > 1 ? finstrongCopy.accounts : finstrongCopy.account,\n            ) as string)\n          : undefined,\n    },\n  ]\n\n  const list = profileItemsData.map((item) => buildProfileItem(item))\n\n  return (\n    <Drawer isOpen={isOpen} onClose={onClose} title={finstrongCopy.financial_profile}>\n      <Stack sx={{ bgcolor: 'background.default', height: '100%' }}>\n        <Stack sx={{ gap: 20, p: 24 }}>\n          <Stack sx={{ gap: 8 }}>\n            <H3>{finstrongCopy.your_financial_profile}</H3>\n            <P>{finstrongCopy.financial_profile_description}</P>\n          </Stack>\n          <ProfileProgressBar\n            completeCopy={finstrongCopy.complete}\n            value={list.reduce((acc, item) => acc + (item.isComplete ? 1 : 0), 0)}\n          />\n        </Stack>\n        <ProfileList list={list} onClickItem={setAction} />\n        <Box sx={{ p: 24 }}>\n          <ConnectMoreAccountsCard\n            description={\n              finstrongCopy.connect_more_accounts_to_view_more_accurate_financial_picture\n            }\n            drawerType=\"connectDrawer\"\n            isDashboard={true}\n            title={finstrongCopy.dont_see_all_your_accounts}\n            titleDrawer={commonCopy.add_accounts}\n          />\n        </Box>\n      </Stack>\n\n      <Drawer\n        isOpen={action === Action.MonthlyIncome}\n        onClose={() => setAction(null)}\n        shouldShowHeaderBorders={false}\n        title={recurringCopy.action_title}\n      >\n        <RecurringSettings />\n      </Drawer>\n      <ManageDOB isOpen={action === Action.DateOfBirth} onClose={() => setAction(null)} />\n      <ManageCreditScore isOpen={action === Action.CreditScore} onClose={() => setAction(null)} />\n      <ConnectionsDrawer\n        onClose={() => setAction(null)}\n        showConnectionsWidget={action === Action.Connections}\n        title={accountsCopy.manage_connections}\n      />\n    </Drawer>\n  )\n}\nexport default observer(ProfileDrawer)\n"],"mappings":"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"}

package/dist/finstrong/components/ProfileList/index.es.js

@@ -0,0 +1,65 @@
+import a from "react";
+import { Text as i } from "@mxenabled/mxui";
+import { ChevronRight as m } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as e } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import l from "@mui/material/Divider";
+import s from "@mui/material/List";
+import p from "@mui/material/ListItem";
+import f from "@mui/material/ListItemButton";
+import h from "@mui/material/ListItemText";
+import x from "@mui/material/Avatar";
+import y from "@mui/material/ListItemAvatar";
+var j = /* @__PURE__ */ (function(o) {
+  return o.Connections = "connections", o.CreditScore = "credit_score", o.DateOfBirth = "date_of_birth", o.MonthlyIncome = "monthly_income", o;
+})({}), D = ({ list: o, onClickItem: n }) => /* @__PURE__ */ r(d, {
+  sx: { bgcolor: "background.paper" },
+  children: /* @__PURE__ */ r(s, {
+    sx: { "& .MuiListItemSecondaryAction-root": {
+      color: "text.primary",
+      pr: 24
+    } },
+    children: o.map((t, c) => /* @__PURE__ */ e(a.Fragment, { children: [/* @__PURE__ */ r(p, {
+      secondaryAction: /* @__PURE__ */ r(m, {}),
+      children: /* @__PURE__ */ e(f, {
+        onClick: () => n(t.key),
+        children: [/* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(x, {
+          sx: {
+            bgcolor: "primary.main",
+            ...!t.isComplete && {
+              bgcolor: "transparent",
+              borderColor: "action.active",
+              borderStyle: "solid",
+              borderWidth: 1,
+              color: "action.active"
+            }
+          },
+          children: t.icon
+        }) }), /* @__PURE__ */ r(h, {
+          primary: /* @__PURE__ */ r(i, {
+            sx: { color: "text.secondary" },
+            variant: "caption",
+            children: t.primaryText
+          }),
+          secondary: /* @__PURE__ */ r(i, {
+            sx: {
+              color: "text.primary",
+              fontWeight: 600
+            },
+            variant: "body1",
+            children: t.secondaryText
+          })
+        })]
+      })
+    }), /* @__PURE__ */ r(l, { sx: {
+      color: "divider",
+      ml: c === o.length - 1 ? 0 : 68
+    } })] }, t.key))
+  })
+});
+export {
+  j as Action,
+  D as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/ProfileList/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/ProfileList.tsx"],"sourcesContent":["import React from 'react'\n\nimport Avatar from '@mui/material/Avatar'\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemText from '@mui/material/ListItemText'\n\nimport { Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nexport enum Action {\n  Connections = 'connections',\n  CreditScore = 'credit_score',\n  DateOfBirth = 'date_of_birth',\n  MonthlyIncome = 'monthly_income',\n}\n\ninterface ProfileListItem {\n  icon: React.ReactNode\n  isComplete: boolean\n  key: Action\n  primaryText: string\n  secondaryText: string\n}\n\ninterface ProfileListProps {\n  list: ProfileListItem[]\n  onClickItem: (action: Action) => void\n}\n\nconst ProfileList = ({ list, onClickItem }: ProfileListProps) => (\n  <Box sx={{ bgcolor: 'background.paper' }}>\n    <List\n      sx={{\n        '& .MuiListItemSecondaryAction-root': {\n          color: 'text.primary',\n          pr: 24,\n        },\n      }}\n    >\n      {list.map((item, i) => (\n        <React.Fragment key={item.key}>\n          <ListItem secondaryAction={<ChevronRight />}>\n            <ListItemButton onClick={() => onClickItem(item.key)}>\n              <ListItemAvatar>\n                <Avatar\n                  sx={{\n                    bgcolor: 'primary.main',\n                    ...(!item.isComplete && {\n                      bgcolor: 'transparent',\n                      borderColor: 'action.active',\n                      borderStyle: 'solid',\n                      borderWidth: 1,\n                      color: 'action.active',\n                    }),\n                  }}\n                >\n                  {item.icon}\n                </Avatar>\n              </ListItemAvatar>\n              <ListItemText\n                primary={\n                  <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                    {item.primaryText}\n                  </Text>\n                }\n                secondary={\n                  <Text sx={{ color: 'text.primary', fontWeight: 600 }} variant=\"body1\">\n                    {item.secondaryText}\n                  </Text>\n                }\n              />\n            </ListItemButton>\n          </ListItem>\n          <Divider sx={{ color: 'divider', ml: i === list.length - 1 ? 0 : 68 }} />\n        </React.Fragment>\n      ))}\n    </List>\n  </Box>\n)\n\nexport default ProfileList\n"],"mappings":";;;;;;;;;;;;AAcA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,cAAA,eACA,EAAA,cAAA,gBACA,EAAA,cAAA,iBACA,EAAA,gBAAA;AACF,GAAA,CAAA,CAAA,GAeM,IAAA,CAAe,EAAE,MAAA,GAAM,aAAA,EAAA,MAC3B,gBAAA,EAAC,GAAD;AAAA,EAAK,IAAI,EAAE,SAAS,mBAAmB;AAAA,YACrC,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI,EACF,sCAAsC;AAAA,MACpC,OAAO;AAAA,MACP,IAAI;AAAA,IACN,EACF;AAAA,cAEC,EAAK,IAAA,CAAK,GAAM,MACf,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAU,iBAAiB,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,gBACxC,gBAAA,EAAC,GAAD;AAAA,QAAgB,SAAA,MAAe,EAAY,EAAK,GAAG;AAAA,kBAAnD,CACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,SAAS;AAAA,YACT,GAAI,CAAC,EAAK,cAAc;AAAA,cACtB,SAAS;AAAA,cACT,aAAa;AAAA,cACb,aAAa;AAAA,cACb,aAAa;AAAA,cACb,OAAO;AAAA,YACT;AAAA,UACF;AAAA,oBAEC,EAAK;AAAA,QACA,CAAA,EACM,CAAA,GAChB,gBAAA,EAAC,GAAD;AAAA,UACE,SACE,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,YAAG,SAAQ;AAAA,sBAC5C,EAAK;AAAA,UACF,CAAA;AAAA,UAER,WACE,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI;AAAA,cAAE,OAAO;AAAA,cAAgB,YAAY;AAAA,YAAI;AAAA,YAAG,SAAQ;AAAA,sBAC3D,EAAK;AAAA,UACF,CAAA;AAAA,QAET,CAAA,CACa;AAAA;IACR,CAAA,GACV,gBAAA,EAAC,GAAD,EAAS,IAAI;AAAA,MAAE,OAAO;AAAA,MAAW,IAAI,MAAM,EAAK,SAAS,IAAI,IAAI;AAAA,IAAG,EAAI,CAAA,CAC1D,EAAA,GAlCK,EAAK,GAkCV,CACjB;AAAA,EACG,CAAA;AACH,CAAA"}

package/dist/finstrong/components/ProfileProgressBar/index.es.js

@@ -0,0 +1,32 @@
+import t from "@mui/material/Stack";
+import { Text as m } from "@mxenabled/mxui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+var c = ({ value: r, completeCopy: e }) => /* @__PURE__ */ a(t, {
+  sx: { gap: 8 },
+  children: [/* @__PURE__ */ i(t, {
+    sx: {
+      flexDirection: "row",
+      gap: 4
+    },
+    children: Array.from({ length: 4 }).map((x, o) => /* @__PURE__ */ i(s, { sx: {
+      bgcolor: o < r ? "primary.main" : "neutral.light",
+      borderRadius: "24px",
+      height: 4,
+      width: "100%"
+    } }, o))
+  }), /* @__PURE__ */ a(m, {
+    sx: { color: "text.secondary" },
+    variant: "body2",
+    children: [
+      r / 4 * 100,
+      "% ",
+      e
+    ]
+  })]
+});
+export {
+  c as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/ProfileProgressBar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/ProfileProgressBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface ProfileProgressBarProps {\n  completeCopy: string\n  value: number\n}\n\nconst ProfileProgressBar = ({ value, completeCopy }: ProfileProgressBarProps) => (\n  <Stack sx={{ gap: 8 }}>\n    <Stack sx={{ flexDirection: 'row', gap: 4 }}>\n      {Array.from({ length: 4 }).map((_, i) => (\n        <Box\n          key={i}\n          sx={{\n            bgcolor: i < value ? 'primary.main' : 'neutral.light',\n            borderRadius: '24px',\n            height: 4,\n            width: '100%',\n          }}\n        />\n      ))}\n    </Stack>\n    <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n      {(value / 4) * 100}% {completeCopy}\n    </Text>\n  </Stack>\n)\n\nexport default ProfileProgressBar\n"],"mappings":";;;;AAUA,IAAM,IAAA,CAAsB,EAAE,OAAA,GAAO,cAAA,EAAA,MACnC,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI,EAAE,KAAK,EAAE;AAAA,YAApB,CACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,eAAe;AAAA,MAAO,KAAK;AAAA,IAAE;AAAA,cACvC,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAA,CAAK,GAAG,MACjC,gBAAA,EAAC,GAAD,EAEE,IAAI;AAAA,MACF,SAAS,IAAI,IAAQ,iBAAiB;AAAA,MACtC,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,OAAO;AAAA,IACT,EACD,GAPM,CAON,CACF;AAAA,EACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,IAAG,SAAQ;AAAA,cAA/C;AAAA,MACI,IAAQ,IAAK;AAAA,MAAI;AAAA,MAAG;AAAA,IAClB;AAAA,IACD"}

package/dist/finstrong/components/ProgressBar/index.es.js

@@ -0,0 +1,53 @@
+import m from "../../../common/components/charts/StatusBar/index.es.js";
+import d from "../StatusChip/index.es.js";
+import "react";
+import { observer as C } from "mobx-react-lite";
+import o from "@mui/material/Stack";
+import { H2 as f, Text as h } from "@mxenabled/mxui";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var j = C(({ label: s, value: i, status: t, bottomComponent: c, statusBarData: n = [] }) => {
+  const p = {
+    GOOD: { progressBarColor: "primary.main" },
+    FAIR: { progressBarColor: "warning.main" },
+    OFF_TRACK: { progressBarColor: "error.main" },
+    MISSING: { progressBarColor: "text.secondary" }
+  }[t], l = n.map((r, g) => n.length === 2 ? {
+    color: g === 0 ? "primary.main" : r.color || p?.progressBarColor,
+    percentage: r.percentage
+  } : {
+    color: r.color || p?.progressBarColor,
+    percentage: r.percentage
+  });
+  return /* @__PURE__ */ a(o, {
+    sx: {
+      backgroundColor: "background.paper",
+      gap: 8,
+      p: 24,
+      borderBottom: "1px solid",
+      borderColor: "divider"
+    },
+    children: [/* @__PURE__ */ a(o, {
+      sx: { gap: 2 },
+      children: [/* @__PURE__ */ e(h, {
+        variant: "body2",
+        children: s
+      }), /* @__PURE__ */ a(o, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 12,
+          justifyContent: "space-between"
+        },
+        children: [/* @__PURE__ */ e(f, { children: i }), /* @__PURE__ */ e(d, { status: t })]
+      })]
+    }), /* @__PURE__ */ a(o, { children: [/* @__PURE__ */ e(m, {
+      data: l,
+      height: 16
+    }), c] })]
+  });
+});
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/ProgressBar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/ProgressBar.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { H2, Text } from '@mxenabled/mxui'\n\nimport StatusBar from '../../common/components/charts/StatusBar'\n\nimport StatusChip from './StatusChip'\n\nexport type ProgressBarStatus = 'GOOD' | 'FAIR' | 'OFF_TRACK' | 'MISSING'\n\ninterface StatusBarDataItem {\n  percentage: string\n  color?: string\n}\n\nexport interface ProgressBarProps {\n  label: string\n  value: string\n  status: ProgressBarStatus\n  bottomComponent: React.ReactNode\n  statusBarData: StatusBarDataItem[]\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = observer(\n  ({ label, value, status, bottomComponent, statusBarData = [] }) => {\n    const cardStateStyles = {\n      GOOD: {\n        progressBarColor: 'primary.main',\n      },\n      FAIR: {\n        progressBarColor: 'warning.main',\n      },\n      OFF_TRACK: {\n        progressBarColor: 'error.main',\n      },\n      MISSING: {\n        progressBarColor: 'text.secondary',\n      },\n    }[status]\n\n    const statusBarColorData = statusBarData.map((item, index) => {\n      if (statusBarData.length === 2) {\n        return {\n          color: index === 0 ? 'primary.main' : item.color || cardStateStyles?.progressBarColor,\n          percentage: item.percentage,\n        }\n      }\n\n      return {\n        color: item.color || cardStateStyles?.progressBarColor,\n        percentage: item.percentage,\n      }\n    })\n\n    return (\n      <Stack\n        sx={{\n          backgroundColor: 'background.paper',\n          gap: 8,\n          p: 24,\n          borderBottom: '1px solid',\n          borderColor: 'divider',\n        }}\n      >\n        <Stack sx={{ gap: 2 }}>\n          <Text variant=\"body2\">{label}</Text>\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gap: 12,\n              justifyContent: 'space-between',\n            }}\n          >\n            <H2>{value}</H2>\n            <StatusChip status={status} />\n          </Stack>\n        </Stack>\n\n        <Stack>\n          <StatusBar data={statusBarColorData} height={16} />\n          {bottomComponent}\n        </Stack>\n      </Stack>\n    )\n  },\n)\n\nexport default ProgressBar\n"],"mappings":";;;;;;;AA0BA,IAAM,IAA0C,EAAA,CAC7C,EAAE,OAAA,GAAO,OAAA,GAAO,QAAA,GAAQ,iBAAA,GAAiB,eAAA,IAAgB,CAAC,EAAA,MAAQ;AACjE,QAAM,IAAkB;AAAA,IACtB,MAAM,EACJ,kBAAkB,eACpB;AAAA,IACA,MAAM,EACJ,kBAAkB,eACpB;AAAA,IACA,WAAW,EACT,kBAAkB,aACpB;AAAA,IACA,SAAS,EACP,kBAAkB,iBACpB;AAAA,EACF,EAAE,CAAA,GAEI,IAAqB,EAAc,IAAA,CAAK,GAAM,MAC9C,EAAc,WAAW,IACpB;AAAA,IACL,OAAO,MAAU,IAAI,iBAAiB,EAAK,SAAS,GAAiB;AAAA,IACrE,YAAY,EAAK;AAAA,EACnB,IAGK;AAAA,IACL,OAAO,EAAK,SAAS,GAAiB;AAAA,IACtC,YAAY,EAAK;AAAA,EACnB,CACD;AAED,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,iBAAiB;AAAA,MACjB,KAAK;AAAA,MACL,GAAG;AAAA,MACH,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,cAPF,CASE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,KAAK,EAAE;AAAA,gBAApB,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,kBAAS;AAAA,MAAY,CAAA,GACnC,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,eAAe;AAAA,UACf,KAAK;AAAA,UACL,gBAAgB;AAAA,QAClB;AAAA,kBANF,CAQE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACf,gBAAA,EAAC,GAAD,EAAoB,QAAA,EAAS,CAAA,CACxB;AAAA,QACF;AAAA,QAEP,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAW,MAAM;AAAA,MAAoB,QAAQ;AAAA,IAAK,CAAA,GACjD,CACI,EAAA,CAAA,CACF;AAAA;AAEX,CACF"}

package/dist/finstrong/components/SaveEnoughToLiveOn/AvailableTabContent/index.es.js

@@ -0,0 +1,27 @@
+import { useAccountStore as e, useGlobalCopyStore as c } from "../../../../common/context/hooks/index.es.js";
+import { AccountType as a } from "../../../../core/types/Account/index.es.js";
+import n from "../../shared/Accounts/index.es.js";
+import l from "../../shared/TotalCard/index.es.js";
+import "react";
+import { observer as s } from "mobx-react-lite";
+import i from "@mui/material/Stack";
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+var p = () => {
+  const { savingsAndCheckingAccountsBalance: r } = e(), { finstrong: o } = c();
+  return /* @__PURE__ */ m(i, {
+    gap: 16,
+    sx: { p: 16 },
+    children: [/* @__PURE__ */ t(l, {
+      balance: r,
+      title: o.key_indicators_save.drawer_available_balance
+    }), /* @__PURE__ */ t(n, {
+      loadAccounts: [a.SAVINGS, a.CHECKING],
+      loadMoreLabel: o.more_accounts
+    })]
+  });
+}, g = s(p);
+export {
+  g as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/SaveEnoughToLiveOn/AvailableTabContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/SaveEnoughToLiveOn/AvailableTabContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useAccountStore, useGlobalCopyStore } from '../../../common'\nimport { AccountType } from '../../../core'\n\nimport TotalCard from '../shared/TotalCard'\nimport Accounts from '../shared/Accounts'\n\nconst AvailableTabContent: React.FC = () => {\n  const { savingsAndCheckingAccountsBalance } = useAccountStore()\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack gap={16} sx={{ p: 16 }}>\n      <TotalCard\n        balance={savingsAndCheckingAccountsBalance}\n        title={copy.key_indicators_save.drawer_available_balance}\n      />\n      <Accounts\n        loadAccounts={[AccountType.SAVINGS, AccountType.CHECKING]}\n        loadMoreLabel={copy.more_accounts}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(AvailableTabContent)\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAA,MAAsC;AAC1C,QAAM,EAAE,mCAAA,EAAA,IAAsC,EAAgB,GACxD,EAAE,WAAW,EAAA,IAAS,EAAmB;AAE/C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAI,IAAI,EAAE,GAAG,GAAG;AAAA,cAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS;AAAA,MACT,OAAO,EAAK,oBAAoB;AAAA,IACjC,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc,CAAC,EAAY,SAAS,EAAY,QAAQ;AAAA,MACxD,eAAe,EAAK;AAAA,IACrB,CAAA,CACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAmB"}

package/dist/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent/index.es.js

@@ -0,0 +1,51 @@
+import { useGlobalCopyStore as s } from "../../../../common/context/hooks/index.es.js";
+import n from "../../../../common/components/TabContentContainer/index.es.js";
+import d from "../../shared/LineGraph/index.es.js";
+import m from "../AvailableTabContent/index.es.js";
+import p from "../SpendingTabContent/index.es.js";
+import v from "react";
+import { observer as b } from "mobx-react-lite";
+import { Fragment as u, jsx as e, jsxs as t } from "react/jsx-runtime";
+import i from "@mui/material/Tab";
+import c from "@mui/material/Tabs";
+import f from "@mui/material/Card";
+var _ = () => {
+  const [a, o] = v.useState(0), { finstrong: r } = s();
+  return /* @__PURE__ */ t(u, { children: [/* @__PURE__ */ t(f, { children: [
+    /* @__PURE__ */ t(c, {
+      "aria-label": r.key_indicators_save.drawer_title,
+      centered: !0,
+      onChange: (h, l) => o(l),
+      selectionFollowsFocus: !0,
+      sx: { mb: 0 },
+      value: a,
+      variant: "fullWidth",
+      children: [/* @__PURE__ */ e(i, {
+        "aria-controls": "available-details-tabpanel-0",
+        label: r.key_indicators_save.drawer_available,
+        sx: { minHeight: 44 }
+      }), /* @__PURE__ */ e(i, {
+        "aria-controls": "spending-details-tabpanel-1",
+        label: r.key_indicators_save.drawer_spending,
+        sx: { minHeight: 44 }
+      })]
+    }),
+    /* @__PURE__ */ e(n, {
+      index: 0,
+      name: "available-details",
+      value: a,
+      children: /* @__PURE__ */ e(m, {})
+    }),
+    /* @__PURE__ */ e(n, {
+      index: 1,
+      name: "spending-details",
+      value: a,
+      children: /* @__PURE__ */ e(p, {})
+    })
+  ] }), /* @__PURE__ */ e(d, { chartFor: "savingsOverTime" })] });
+}, j = b(_);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { useGlobalCopyStore, TabContentContainer } from '../../../common'\n\nimport AvailableTabContent from './AvailableTabContent'\nimport LineGraph from '../shared/LineGraph'\nimport SpendingTabContent from './SpendingTabContent'\n\nconst SaveEnoughToLiveOnDrawerContent: React.FC = () => {\n  const [tabValue, setTabValue] = React.useState(0)\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  return (\n    <>\n      <Card>\n        <Tabs\n          aria-label={copy.key_indicators_save.drawer_title}\n          centered={true}\n          onChange={(_, val) => setTabValue(val)}\n          selectionFollowsFocus={true}\n          sx={{ mb: 0 }}\n          value={tabValue}\n          variant=\"fullWidth\"\n        >\n          <Tab\n            aria-controls=\"available-details-tabpanel-0\"\n            label={copy.key_indicators_save.drawer_available}\n            sx={{ minHeight: 44 }}\n          />\n          <Tab\n            aria-controls=\"spending-details-tabpanel-1\"\n            label={copy.key_indicators_save.drawer_spending}\n            sx={{ minHeight: 44 }}\n          />\n        </Tabs>\n\n        <TabContentContainer index={0} name=\"available-details\" value={tabValue}>\n          <AvailableTabContent />\n        </TabContentContainer>\n\n        <TabContentContainer index={1} name=\"spending-details\" value={tabValue}>\n          <SpendingTabContent />\n        </TabContentContainer>\n      </Card>\n      <LineGraph chartFor=\"savingsOverTime\" />\n    </>\n  )\n}\n\nexport default observer(SaveEnoughToLiveOnDrawerContent)\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,IAAA,MAAkD;AACtD,QAAM,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,CAAC,GAC1C,EAAE,WAAW,EAAA,IAAS,EAAmB;AAE/C,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAK,oBAAoB;AAAA,MACrC,UAAU;AAAA,MACV,UAAA,CAAW,GAAG,MAAQ,EAAY,CAAG;AAAA,MACrC,uBAAuB;AAAA,MACvB,IAAI,EAAE,IAAI,EAAE;AAAA,MACZ,OAAO;AAAA,MACP,SAAQ;AAAA,gBAPV,CASE,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,OAAO,EAAK,oBAAoB;AAAA,QAChC,IAAI,EAAE,WAAW,GAAG;AAAA,MACrB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QACE,iBAAc;AAAA,QACd,OAAO,EAAK,oBAAoB;AAAA,QAChC,IAAI,EAAE,WAAW,GAAG;AAAA,MACrB,CAAA,CACG;AAAA;IAEN,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAoB,OAAO;AAAA,gBAC7D,gBAAA,EAAC,GAAD,CAAsB,CAAA;AAAA,IACH,CAAA;AAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAmB,OAAO;AAAA,gBAC5D,gBAAA,EAAC,GAAD,CAAqB,CAAA;AAAA,IACF,CAAA;AAAA,EACjB,EAAA,CAAA,GACN,gBAAA,EAAC,GAAD,EAAW,UAAS,kBAAmB,CAAA,CACvC,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAA+B"}

package/dist/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar/index.es.js

@@ -0,0 +1,56 @@
+import { buildDynamicCopy as p } from "../../../../core/utils/Localization/index.es.js";
+import { useFinstrongStore as l, useGlobalCopyStore as d } from "../../../../common/context/hooks/index.es.js";
+import { getDaysOfCashOnHandState as f } from "../../../util/finstrongUtils/index.es.js";
+import g from "../../ProgressBar/index.es.js";
+import { observer as u } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { Text as v } from "@mxenabled/mxui";
+import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+import M from "@mui/material/Divider";
+var y = () => {
+  const { finstrong: t } = d(), { healthScore: n } = l(), o = n.months_of_cash_on_hand, i = f(o ? o * 30 : null), c = 183 / 6, e = Math.floor(o), m = Math.round((o - e) * c), h = o / 6 * 100;
+  return /* @__PURE__ */ r(g, {
+    bottomComponent: /* @__PURE__ */ r(s, {
+      sx: {
+        flexDirection: "row",
+        height: 24,
+        justifyContent: "space-between",
+        mt: 2,
+        px: 1
+      },
+      children: [
+        "0 Mo",
+        "1 Mo",
+        "2 Mo",
+        "3 Mo",
+        "4 Mo",
+        "5 Mo",
+        "6 Mo"
+      ].map((a) => /* @__PURE__ */ _(s, {
+        sx: {
+          alignItems: "center",
+          height: 24
+        },
+        children: [/* @__PURE__ */ r(M, {
+          orientation: "vertical",
+          sx: {
+            borderWidth: 1,
+            height: 8
+          }
+        }), /* @__PURE__ */ r(v, {
+          variant: "caption",
+          children: a
+        })]
+      }, a))
+    }),
+    label: t.key_indicators_save.drawer_progress_bar_label,
+    status: i,
+    statusBarData: [{ percentage: `${h}%` }],
+    value: p(t.key_indicators_save.drawer_progress_bar_value, e, m)
+  });
+}, j = u(y);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useFinstrongStore, useGlobalCopyStore } from '../../../common'\nimport ProgressBar from '../ProgressBar'\nimport { getDaysOfCashOnHandState } from '../../util/finstrongUtils'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\nconst SaveEnoughToLiveOnProgressBar = () => {\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  const { healthScore } = useFinstrongStore()\n  const noOfMonths = healthScore.months_of_cash_on_hand\n  const cardStatus = getDaysOfCashOnHandState(noOfMonths ? noOfMonths * 30 : null) // Convert months to days for state calculation\n\n  // Using 183 days as an approximate 6-month period\n  const avgDaysPerMonth = 183 / 6\n  const months = Math.floor(noOfMonths)\n  const days = Math.round((noOfMonths - months) * avgDaysPerMonth)\n  const percentage = (noOfMonths / 6) * 100\n  const monthsToDisplay = ['0 Mo', '1 Mo', '2 Mo', '3 Mo', '4 Mo', '5 Mo', '6 Mo']\n\n  return (\n    <ProgressBar\n      bottomComponent={\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            height: 24,\n            justifyContent: 'space-between',\n            mt: 2,\n            px: 1,\n          }}\n        >\n          {monthsToDisplay.map((label) => (\n            <Stack\n              key={label}\n              sx={{\n                alignItems: 'center',\n                height: 24,\n              }}\n            >\n              <Divider\n                orientation=\"vertical\"\n                sx={{\n                  borderWidth: 1,\n                  height: 8,\n                }}\n              />\n              <Text variant=\"caption\">{label}</Text>\n            </Stack>\n          ))}\n        </Stack>\n      }\n      label={copy.key_indicators_save.drawer_progress_bar_label}\n      status={cardStatus}\n      statusBarData={[\n        {\n          percentage: `${percentage}%`,\n        },\n      ]}\n      value={\n        buildDynamicCopy(copy.key_indicators_save.drawer_progress_bar_value, months, days) as string\n      }\n    />\n  )\n}\n\nexport default observer(SaveEnoughToLiveOnProgressBar)\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAsC;AAC1C,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,EAAE,aAAA,EAAA,IAAgB,EAAkB,GACpC,IAAa,EAAY,wBACzB,IAAa,EAAyB,IAAa,IAAa,KAAK,IAAI,GAGzE,IAAkB,MAAM,GACxB,IAAS,KAAK,MAAM,CAAU,GAC9B,IAAO,KAAK,OAAO,IAAa,KAAU,CAAe,GACzD,IAAc,IAAa,IAAK;AAGtC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,iBACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,gBAEC;AAAA,QAdgB;AAAA,QAAQ;AAAA,QAAQ;AAAA,QAAQ;AAAA,QAAQ;AAAA,QAAQ;AAAA,QAAQ;AAAA,MAchE,EAAgB,IAAA,CAAK,MACpB,gBAAA,EAAC,GAAD;AAAA,QAEE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,QAAQ;AAAA,QACV;AAAA,kBALF,CAOE,gBAAA,EAAC,GAAD;AAAA,UACE,aAAY;AAAA,UACZ,IAAI;AAAA,YACF,aAAa;AAAA,YACb,QAAQ;AAAA,UACV;AAAA,QACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAW;AAAA,QAAY,CAAA,CAChC;AAAA,SAdA,CAcA,CACR;AAAA,IACI,CAAA;AAAA,IAET,OAAO,EAAK,oBAAoB;AAAA,IAChC,QAAQ;AAAA,IACR,eAAe,CACb,EACE,YAAY,GAAG,CAAA,IACjB,CACF;AAAA,IACA,OACE,EAAiB,EAAK,oBAAoB,2BAA2B,GAAQ,CAAI;AAAA,EAEpF,CAAA;AAEL,GAEA,IAAe,EAAS,CAA6B"}

package/dist/finstrong/components/SaveEnoughToLiveOn/SpendingTabContent/index.es.js

@@ -0,0 +1,34 @@
+import { useFinstrongStore as l, useGlobalCopyStore as f } from "../../../../common/context/hooks/index.es.js";
+import S from "../../../../common/components/Loader/index.es.js";
+import u from "../../shared/TotalCard/index.es.js";
+import b from "../../shared/Transactions/index.es.js";
+import a from "react";
+import { observer as y } from "mobx-react-lite";
+import T from "@mui/material/Stack";
+import { jsx as r, jsxs as _ } from "react/jsx-runtime";
+var g = () => {
+  const { finstrong: e } = f(), { isSpendingInitialized: t, healthScore: s, allTransactions: n, loadSpendTransactions: i, loadDebtSpend: p } = l();
+  a.useEffect(() => {
+    t || (i().finally(), p().finally());
+  }, [t]);
+  const d = a.useMemo(() => {
+    const c = n.spend.map((o) => o.transaction), m = n.debtSpend.map((o) => o.transaction);
+    return [...c, ...m];
+  }, [n.spend, n.debtSpend]);
+  return t ? /* @__PURE__ */ _(T, {
+    gap: 16,
+    sx: { p: 16 },
+    children: [/* @__PURE__ */ r(u, {
+      balance: s.ninety_day_spend / 90,
+      title: e.key_indicators_save.drawer_daily_spend
+    }), /* @__PURE__ */ r(b, {
+      amountColor: "text.primary",
+      transactions: d
+    })]
+  }) : /* @__PURE__ */ r(S, {});
+}, D = y(g);
+export {
+  D as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/SaveEnoughToLiveOn/SpendingTabContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/finstrong/components/SaveEnoughToLiveOn/SpendingTabContent.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Loader, useFinstrongStore, useGlobalCopyStore } from '../../../common'\n\nimport TotalCard from '../shared/TotalCard'\nimport Transactions from '../shared/Transactions'\n\nconst SpendingTabContent: React.FC = () => {\n  const { finstrong: copy } = useGlobalCopyStore()\n  const {\n    isSpendingInitialized,\n    healthScore,\n    allTransactions,\n    loadSpendTransactions,\n    loadDebtSpend,\n  } = useFinstrongStore()\n\n  React.useEffect(() => {\n    if (!isSpendingInitialized) {\n      loadSpendTransactions().finally()\n      loadDebtSpend().finally()\n    }\n  }, [isSpendingInitialized])\n\n  const transactions = React.useMemo(() => {\n    const spendTransactions = allTransactions.spend.map((item) => item.transaction)\n    const debtSpendTransactions = allTransactions.debtSpend.map((item) => item.transaction)\n    return [...spendTransactions, ...debtSpendTransactions]\n  }, [allTransactions.spend, allTransactions.debtSpend])\n\n  if (!isSpendingInitialized) return <Loader />\n\n  return (\n    <Stack gap={16} sx={{ p: 16 }}>\n      <TotalCard\n        balance={healthScore.ninety_day_spend / 90}\n        title={copy.key_indicators_save.drawer_daily_spend}\n      />\n      <Transactions amountColor=\"text.primary\" transactions={transactions} />\n    </Stack>\n  )\n}\n\nexport default observer(SpendingTabContent)\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAA,MAAqC;AACzC,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EACJ,uBAAA,GACA,aAAA,GACA,iBAAA,GACA,uBAAA,GACA,eAAA,EAAA,IACE,EAAkB;AAEtB,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAK,MACH,EAAsB,EAAE,QAAQ,GAChC,EAAc,EAAE,QAAQ;AAAA,EAE5B,GAAG,CAAC,CAAqB,CAAC;AAE1B,QAAM,IAAe,EAAM,QAAA,MAAc;AACvC,UAAM,IAAoB,EAAgB,MAAM,IAAA,CAAK,MAAS,EAAK,WAAW,GACxE,IAAwB,EAAgB,UAAU,IAAA,CAAK,MAAS,EAAK,WAAW;AACtF,WAAO,CAAC,GAAG,GAAmB,GAAG,CAAqB;AAAA,EACxD,GAAG,CAAC,EAAgB,OAAO,EAAgB,SAAS,CAAC;AAErD,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAO,KAAK;AAAA,IAAI,IAAI,EAAE,GAAG,GAAG;AAAA,cAA5B,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAY,mBAAmB;AAAA,MACxC,OAAO,EAAK,oBAAoB;AAAA,IACjC,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAc,aAAY;AAAA,MAA6B,cAAA;AAAA,IAAe,CAAA,CACjE;AAAA,OAT0B,gBAAA,EAAC,GAAD,CAAS,CAAA;AAW9C,GAEA,IAAe,EAAS,CAAkB"}

package/dist/finstrong/components/ScoreHistoryDrawer/index.es.js

@@ -0,0 +1,90 @@
+import { useFinstrongStore as C, useGlobalCopyStore as b, useGlobalUiStore as v } from "../../../common/context/hooks/index.es.js";
+import x from "../../../common/components/Loader/index.es.js";
+import { LineChart as _ } from "../../../common/components/charts/LineChart/index.es.js";
+import { calculateFinstrongScoreStatus as y } from "../../util/finstrongUtils/index.es.js";
+import { FinancialStrengthGraph as k } from "../FinancialStrengthGraph/index.es.js";
+import w from "../KeyIndicatorsDrawer/index.es.js";
+import A from "../shared/ScoreHistoryTimeline/index.es.js";
+import { observer as D } from "mobx-react-lite";
+import e from "@mui/material/Stack";
+import { P as s } from "@mxenabled/mxui";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { useTheme as G } from "@mui/material/styles";
+var H = ({ isOpen: l, onClose: c }) => {
+  const t = G(), { finstrong: o } = b(), { isCopyLoaded: p, isInitialized: h } = v(), { augmentedChartData: d, healthScore: a, healthScoreChangeReports: m, peerScore: u } = C();
+  if (!p || !h) return /* @__PURE__ */ r(x, {});
+  const i = y(a.health_score || 0, o), g = m.slice().reverse();
+  return /* @__PURE__ */ r(w, {
+    additionalContent: /* @__PURE__ */ r(e, {
+      sx: {
+        backgroundColor: "background.paper",
+        borderBottom: "1px solid",
+        borderColor: "divider"
+      },
+      children: /* @__PURE__ */ r(_, {
+        axisColor: t.palette.divider,
+        baseline: "min",
+        colors: [t.palette.primary.main],
+        curveType: "natural",
+        datasets: [d],
+        height: 160,
+        isGraphClippingXAxis: !0,
+        labels: [o.key_indicators_label],
+        margin: {
+          top: 24,
+          bottom: 6,
+          right: 24,
+          left: -17
+        },
+        peerAverage: Math.round(u?.average_health_score?.average_health_score || 0),
+        showArea: !0,
+        showAverage: !0,
+        title: o.peer_average,
+        useCustomMark: !0
+      })
+    }),
+    drawerTitle: o.score_history,
+    isOpen: l,
+    loadConnectAccountsCard: !1,
+    onClose: c,
+    stickyComponent: /* @__PURE__ */ r(e, {
+      sx: {
+        backgroundColor: "background.paper",
+        pb: 11,
+        pt: 8,
+        px: 24
+      },
+      children: /* @__PURE__ */ n(e, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 16
+        },
+        children: [/* @__PURE__ */ r(k, {
+          arcRadius: 24,
+          healthScore: a?.health_score,
+          margin: { top: 9 },
+          size: "SM"
+        }), /* @__PURE__ */ n(e, {
+          sx: { gap: 4 },
+          children: [/* @__PURE__ */ r(s, {
+            variant: "h3",
+            children: i.status
+          }), /* @__PURE__ */ r(s, {
+            variant: "caption",
+            children: i.description
+          })]
+        })]
+      })
+    }),
+    children: /* @__PURE__ */ r(e, {
+      sx: { gap: 16 },
+      children: g.map((f, S) => /* @__PURE__ */ r(A, { report: f }, S))
+    })
+  });
+}, X = D(H);
+export {
+  X as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/finstrong/components/ScoreHistoryDrawer/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/ScoreHistoryDrawer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { Loader, useFinstrongStore, useGlobalCopyStore, useGlobalUiStore } from '../../common'\nimport { LineChart } from '../../common/components/charts/LineChart'\n\nimport { calculateFinstrongScoreStatus } from '../util/finstrongUtils'\n\nimport { FinancialStrengthGraph } from './FinancialStrengthGraph'\nimport KeyIndicatorsDrawer from './KeyIndicatorsDrawer'\nimport ScoreHistoryTimeline from './shared/ScoreHistoryTimeline'\n\ninterface ScoreHistoryDrawerProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst ScoreHistoryDrawer = ({ isOpen, onClose }: ScoreHistoryDrawerProps) => {\n  const theme = useTheme()\n  const { finstrong: copy } = useGlobalCopyStore()\n  const { isCopyLoaded, isInitialized } = useGlobalUiStore()\n  const { augmentedChartData, healthScore, healthScoreChangeReports, peerScore } =\n    useFinstrongStore()\n\n  if (!isCopyLoaded || !isInitialized) return <Loader />\n\n  const healthScoreStatus = calculateFinstrongScoreStatus(healthScore.health_score || 0, copy)\n  const sortedHealthScoreChangeReports = healthScoreChangeReports.slice().reverse()\n\n  return (\n    <KeyIndicatorsDrawer\n      additionalContent={\n        <Stack\n          sx={{\n            backgroundColor: 'background.paper',\n            borderBottom: '1px solid',\n            borderColor: 'divider',\n          }}\n        >\n          <LineChart\n            axisColor={theme.palette.divider}\n            baseline=\"min\"\n            colors={[theme.palette.primary.main]}\n            curveType=\"natural\"\n            datasets={[augmentedChartData]}\n            height={160}\n            isGraphClippingXAxis={true}\n            labels={[copy.key_indicators_label]}\n            margin={{ top: 24, bottom: 6, right: 24, left: -17 }}\n            peerAverage={Math.round(peerScore?.average_health_score?.average_health_score || 0)}\n            showArea={true}\n            showAverage={true}\n            title={copy.peer_average}\n            useCustomMark={true}\n          />\n        </Stack>\n      }\n      drawerTitle={copy.score_history}\n      isOpen={isOpen}\n      loadConnectAccountsCard={false}\n      onClose={onClose}\n      stickyComponent={\n        <Stack\n          sx={{\n            backgroundColor: 'background.paper',\n            pb: 11,\n            pt: 8,\n            px: 24,\n          }}\n        >\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 16 }}>\n            <FinancialStrengthGraph\n              arcRadius={24}\n              healthScore={healthScore?.health_score}\n              margin={{ top: 9 }}\n              size=\"SM\"\n            />\n\n            <Stack sx={{ gap: 4 }}>\n              <P variant=\"h3\">{healthScoreStatus.status}</P>\n              <P variant=\"caption\">{healthScoreStatus.description}</P>\n            </Stack>\n          </Stack>\n        </Stack>\n      }\n    >\n      <Stack sx={{ gap: 16 }}>\n        {sortedHealthScoreChangeReports.map((report, index) => (\n          <ScoreHistoryTimeline key={index} report={report} />\n        ))}\n      </Stack>\n    </KeyIndicatorsDrawer>\n  )\n}\n\nexport default observer(ScoreHistoryDrawer)\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAM,IAAA,CAAsB,EAAE,QAAA,GAAQ,SAAA,EAAA,MAAuC;AAC3E,QAAM,IAAQ,EAAS,GACjB,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EAAE,cAAA,GAAc,eAAA,EAAA,IAAkB,EAAiB,GACnD,EAAE,oBAAA,GAAoB,aAAA,GAAa,0BAAA,GAA0B,WAAA,EAAA,IACjE,EAAkB;AAEpB,MAAI,CAAC,KAAgB,CAAC,EAAe,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAErD,QAAM,IAAoB,EAA8B,EAAY,gBAAgB,GAAG,CAAI,GACrF,IAAiC,EAAyB,MAAM,EAAE,QAAQ;AAEhF,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,mBACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,aAAa;AAAA,MACf;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QACE,WAAW,EAAM,QAAQ;AAAA,QACzB,UAAS;AAAA,QACT,QAAQ,CAAC,EAAM,QAAQ,QAAQ,IAAI;AAAA,QACnC,WAAU;AAAA,QACV,UAAU,CAAC,CAAkB;AAAA,QAC7B,QAAQ;AAAA,QACR,sBAAsB;AAAA,QACtB,QAAQ,CAAC,EAAK,oBAAoB;AAAA,QAClC,QAAQ;AAAA,UAAE,KAAK;AAAA,UAAI,QAAQ;AAAA,UAAG,OAAO;AAAA,UAAI,MAAM;AAAA,QAAI;AAAA,QACnD,aAAa,KAAK,MAAM,GAAW,sBAAsB,wBAAwB,CAAC;AAAA,QAClF,UAAU;AAAA,QACV,aAAa;AAAA,QACb,OAAO,EAAK;AAAA,QACZ,eAAe;AAAA,MAChB,CAAA;AAAA,IACI,CAAA;AAAA,IAET,aAAa,EAAK;AAAA,IACV,QAAA;AAAA,IACR,yBAAyB;AAAA,IAChB,SAAA;AAAA,IACT,iBACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,iBAAiB;AAAA,QACjB,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,QAAG;AAAA,kBAAjE,CACE,gBAAA,EAAC,GAAD;AAAA,UACE,WAAW;AAAA,UACX,aAAa,GAAa;AAAA,UAC1B,QAAQ,EAAE,KAAK,EAAE;AAAA,UACjB,MAAK;AAAA,QACN,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,KAAK,EAAE;AAAA,oBAApB,CACE,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,sBAAM,EAAkB;AAAA,UAAU,CAAA,GAC7C,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,sBAAW,EAAkB;AAAA,UAAe,CAAA,CAClD;AAAA,UACF;AAAA;IACF,CAAA;AAAA,cAGT,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,KAAK,GAAG;AAAA,gBAClB,EAA+B,IAAA,CAAK,GAAQ,MAC3C,gBAAA,EAAC,GAAD,EAA0C,QAAA,EAAS,GAAxB,CAAwB,CACpD;AAAA,IACI,CAAA;AAAA,EACY,CAAA;AAEzB,GAEA,IAAe,EAAS,CAAkB"}

package/dist/finstrong/components/ScoreRubricDrawer/index.es.js

@@ -0,0 +1,118 @@
+import { useGlobalCopyStore as c, useGlobalUiStore as m } from "../../../common/context/hooks/index.es.js";
+import h from "../../../common/components/drawer/Drawer/index.es.js";
+import _ from "../../../common/components/Loader/index.es.js";
+import f from "../HealthChart/index.es.js";
+import { observer as x } from "mobx-react-lite";
+import t from "@mui/material/Stack";
+import { H3 as y, P as u, Text as n } from "@mxenabled/mxui";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import g from "@mui/material/Box";
+import a from "@mui/material/List";
+import o from "@mui/material/ListItem";
+import s from "@mui/material/ListItemText";
+var b = ({ isOpen: l, onClose: d }) => {
+  const { finstrong: i } = c(), { isCopyLoaded: p } = m();
+  return p ? /* @__PURE__ */ e(h, {
+    isOpen: l,
+    onClose: d,
+    title: i.score_rubric,
+    children: /* @__PURE__ */ r(t, {
+      sx: {
+        bgcolor: "background.default",
+        gap: 36,
+        height: "100%",
+        p: 24
+      },
+      children: [
+        /* @__PURE__ */ r(t, {
+          sx: { gap: 20 },
+          children: [/* @__PURE__ */ r(t, {
+            sx: { gap: 8 },
+            children: [/* @__PURE__ */ e(y, { children: i.your_path_to_financial_freedom }), /* @__PURE__ */ e(u, {
+              variant: "subtitle1",
+              children: i.finstrong_freedom_description
+            })]
+          }), /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(f, { copy: i }) })]
+        }),
+        /* @__PURE__ */ r(t, {
+          sx: { gap: 12 },
+          children: [/* @__PURE__ */ e(n, {
+            sx: { fontWeight: 600 },
+            variant: "body1",
+            children: i.how_do_we_do_this
+          }), /* @__PURE__ */ r(a, {
+            component: "ol",
+            sx: {
+              listStyleType: "decimal",
+              pl: 20,
+              pr: 16,
+              "& li": { "::marker": { fontWeight: 600 } },
+              "& .MuiListItemText-secondary": {
+                fontSize: 15,
+                lineHeight: "24px",
+                pt: 4
+              }
+            },
+            children: [/* @__PURE__ */ e(o, {
+              sx: { display: "list-item" },
+              children: /* @__PURE__ */ e(s, {
+                primary: i.understand_your_habits,
+                secondary: i.understand_your_habits_description
+              })
+            }), /* @__PURE__ */ e(o, {
+              sx: {
+                display: "list-item",
+                pt: 16
+              },
+              children: /* @__PURE__ */ e(s, {
+                primary: i.see_whats_possible,
+                secondary: i.see_whats_possible_description
+              })
+            })]
+          })]
+        }),
+        /* @__PURE__ */ r(t, {
+          sx: { gap: 4 },
+          children: [/* @__PURE__ */ e(n, {
+            sx: {
+              fontWeight: 600,
+              pb: 4
+            },
+            variant: "body1",
+            children: i.we_ask_questions
+          }), /* @__PURE__ */ r(a, {
+            component: "ol",
+            sx: {
+              listStyleType: "initial",
+              pl: 20,
+              pr: 16,
+              "& li": {
+                minHeight: "max-content",
+                "::marker": {
+                  color: "text.secondary",
+                  fontWeight: 600
+                }
+              },
+              "& .MuiListItemText-secondary": {
+                fontSize: 15,
+                lineHeight: "24px"
+              }
+            },
+            children: [/* @__PURE__ */ e(o, {
+              sx: { display: "list-item" },
+              children: /* @__PURE__ */ e(s, { secondary: i.we_ask_questions_description_1 })
+            }), /* @__PURE__ */ e(o, {
+              sx: { display: "list-item" },
+              children: /* @__PURE__ */ e(s, { secondary: i.we_ask_questions_description_2 })
+            })]
+          })]
+        })
+      ]
+    })
+  }) : /* @__PURE__ */ e(_, {});
+}, j = x(b);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map