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

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

@@ -0,0 +1,92 @@
+import { useGlobalCopyStore as R, useGlobalUiStore as j } from "../../../common/context/hooks/index.es.js";
+import B from "../../../common/components/drawer/Drawer/index.es.js";
+import G from "../../../common/components/Loader/index.es.js";
+import { ConnectMoreAccountsCard as H } from "../ConnectMoreAccountsCard/index.es.js";
+import { useCallback as g, useEffect as h, useRef as K, useState as _ } from "react";
+import { observer as z } from "mobx-react-lite";
+import i from "@mui/material/Stack";
+import { H3 as A, P as M } from "@mxenabled/mxui";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import x from "@mui/material/Box";
+var P = ({ additionalContent: u, connectTitle: k, connectDescription: v, children: C, description: c, drawerTitle: S, isOpen: a, loadConnectAccountsCard: w = !0, onClose: y, stickyComponent: s, title: t, drawerType: E }) => {
+  const { finstrong: L } = R(), { isCopyLoaded: D } = j(), [f, p] = _(!1), e = K(null), l = g(() => {
+    if (e.current) {
+      const n = e.current.scrollTop > 0;
+      p((r) => r !== n ? n : r);
+    }
+  }, []), I = g((n) => {
+    if (e.current && e.current.removeEventListener("scroll", l), n) {
+      let r = n.parentElement;
+      for (; r; ) {
+        const { overflow: m, overflowY: b } = window.getComputedStyle(r);
+        if (m === "auto" || b === "auto" || m === "scroll" || b === "scroll") {
+          e.current = r, r.addEventListener("scroll", l, { passive: !0 });
+          break;
+        }
+        r = r.parentElement;
+      }
+    }
+  }, [l]);
+  return h(() => {
+    a || p(!1);
+  }, [a]), h(() => () => {
+    e.current && e.current.removeEventListener("scroll", l);
+  }, [l]), D ? /* @__PURE__ */ o(B, {
+    isOpen: a,
+    onClose: y,
+    title: S || L.key_indicators,
+    children: /* @__PURE__ */ d(i, {
+      ref: I,
+      sx: {
+        backgroundColor: "background.default",
+        height: "100%"
+      },
+      children: [
+        (t || c) && /* @__PURE__ */ d(i, {
+          sx: {
+            backgroundColor: "background.paper",
+            gap: 8,
+            p: 24,
+            pb: s ? 0 : 24
+          },
+          children: [t && typeof t == "string" ? /* @__PURE__ */ o(A, { children: t }) : t, c && /* @__PURE__ */ o(M, {
+            sx: { lineHeight: "24px" },
+            children: c
+          })]
+        }),
+        s && /* @__PURE__ */ o(x, {
+          sx: {
+            position: "sticky",
+            top: 0,
+            zIndex: 1,
+            "& > *": {
+              borderBottom: f ? "1px solid" : "none",
+              borderColor: f ? "divider" : "transparent"
+            }
+          },
+          children: s
+        }),
+        u && /* @__PURE__ */ o(x, { children: u }),
+        /* @__PURE__ */ d(i, {
+          sx: {
+            bgcolor: "background.default",
+            gap: 24,
+            p: 24
+          },
+          children: [C, w && /* @__PURE__ */ o(H, {
+            description: v,
+            drawerType: E,
+            isDashboard: !0,
+            sx: { backgroundColor: "background.paper" },
+            title: k
+          })]
+        })
+      ]
+    })
+  }) : /* @__PURE__ */ o(G, {});
+}, X = z(P);
+export {
+  X as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsDrawer.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { P, H3 } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Drawer, Loader, useGlobalCopyStore, useGlobalUiStore } from '../../common'\nimport { ConnectMoreAccountsCard } from './ConnectMoreAccountsCard'\n\ninterface KeyIndicatorsDrawerProps {\n  additionalContent?: React.ReactNode\n  connectTitle?: string\n  connectDescription?: string\n  children?: React.ReactNode\n  description?: string\n  drawerTitle?: string\n  isOpen: boolean\n  loadConnectAccountsCard?: boolean\n  onClose: () => void\n  stickyComponent?: React.ReactNode\n  title?: string | React.ReactNode\n  drawerType?: 'connectDrawer' | 'connectionsDrawer'\n}\n\nconst KeyIndicatorsDrawer: React.FC<React.PropsWithChildren<KeyIndicatorsDrawerProps>> = ({\n  additionalContent,\n  connectTitle,\n  connectDescription,\n  children,\n  description,\n  drawerTitle,\n  isOpen,\n  loadConnectAccountsCard = true,\n  onClose,\n  stickyComponent,\n  title,\n  drawerType,\n}: KeyIndicatorsDrawerProps) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  const { isCopyLoaded } = useGlobalUiStore()\n  const [isScrolled, setIsScrolled] = useState(false)\n  const scrollContainerRef = useRef<HTMLElement | null>(null)\n\n  const handleScroll = useCallback(() => {\n    if (scrollContainerRef.current) {\n      const hasScrolled = scrollContainerRef.current.scrollTop > 0\n      setIsScrolled((prev) => (prev !== hasScrolled ? hasScrolled : prev))\n    }\n  }, [])\n\n  const contentCallbackRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      // Clean up previous listener\n      if (scrollContainerRef.current) {\n        scrollContainerRef.current.removeEventListener('scroll', handleScroll)\n      }\n\n      if (node) {\n        // Find the scrollable parent\n        let parent = node.parentElement\n        while (parent) {\n          const { overflow, overflowY } = window.getComputedStyle(parent)\n          if (\n            overflow === 'auto' ||\n            overflowY === 'auto' ||\n            overflow === 'scroll' ||\n            overflowY === 'scroll'\n          ) {\n            scrollContainerRef.current = parent\n            parent.addEventListener('scroll', handleScroll, { passive: true })\n            break\n          }\n          parent = parent.parentElement\n        }\n      }\n    },\n    [handleScroll],\n  )\n\n  useEffect(() => {\n    if (!isOpen) {\n      setIsScrolled(false)\n    }\n  }, [isOpen])\n\n  useEffect(() => {\n    return () => {\n      if (scrollContainerRef.current) {\n        scrollContainerRef.current.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [handleScroll])\n\n  if (!isCopyLoaded) return <Loader />\n\n  return (\n    <Drawer isOpen={isOpen} onClose={onClose} title={drawerTitle || copy.key_indicators}>\n      <Stack\n        ref={contentCallbackRef}\n        sx={{ backgroundColor: 'background.default', height: '100%' }}\n      >\n        {(title || description) && (\n          <Stack\n            sx={{\n              backgroundColor: 'background.paper',\n              gap: 8,\n              p: 24,\n              pb: stickyComponent ? 0 : 24,\n            }}\n          >\n            {title && typeof title === 'string' ? <H3>{title}</H3> : title}\n            {description && <P sx={{ lineHeight: '24px' }}>{description}</P>}\n          </Stack>\n        )}\n\n        {stickyComponent && (\n          <Box\n            sx={{\n              position: 'sticky',\n              top: 0,\n              zIndex: 1,\n              '& > *': {\n                borderBottom: isScrolled ? '1px solid' : 'none',\n                borderColor: isScrolled ? 'divider' : 'transparent',\n              },\n            }}\n          >\n            {stickyComponent}\n          </Box>\n        )}\n        {additionalContent && <Box>{additionalContent}</Box>}\n        <Stack sx={{ bgcolor: 'background.default', gap: 24, p: 24 }}>\n          {children}\n          {loadConnectAccountsCard && (\n            <ConnectMoreAccountsCard\n              description={connectDescription}\n              drawerType={drawerType}\n              isDashboard={true}\n              sx={{ backgroundColor: 'background.paper' }}\n              title={connectTitle}\n            />\n          )}\n        </Stack>\n      </Stack>\n    </Drawer>\n  )\n}\nexport default observer(KeyIndicatorsDrawer)\n"],"mappings":";;;;;;;;;;AAyBA,IAAM,IAAA,CAAoF,EACxF,mBAAA,GACA,cAAA,GACA,oBAAA,GACA,UAAA,GACA,aAAA,GACA,aAAA,GACA,QAAA,GACA,yBAAA,IAA0B,IAC1B,SAAA,GACA,iBAAA,GACA,OAAA,GACA,YAAA,EAAA,MAC8B;AAC9B,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GAEzC,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,CAAC,GAAY,CAAA,IAAiB,EAAS,EAAK,GAC5C,IAAqB,EAA2B,IAAI,GAEpD,IAAe,EAAA,MAAkB;AACrC,QAAI,EAAmB,SAAS;AAC9B,YAAM,IAAc,EAAmB,QAAQ,YAAY;AAC3D,MAAA,EAAA,CAAe,MAAU,MAAS,IAAc,IAAc,CAAK;AAAA,IACrE;AAAA,EACF,GAAG,CAAC,CAAC,GAEC,IAAqB,EAAA,CACxB,MAAgC;AAM/B,QAJI,EAAmB,WACrB,EAAmB,QAAQ,oBAAoB,UAAU,CAAY,GAGnE,GAAM;AAER,UAAI,IAAS,EAAK;AAClB,aAAO,KAAQ;AACb,cAAM,EAAE,UAAA,GAAU,WAAA,EAAA,IAAc,OAAO,iBAAiB,CAAM;AAC9D,YACE,MAAa,UACb,MAAc,UACd,MAAa,YACb,MAAc,UACd;AACA,UAAA,EAAmB,UAAU,GAC7B,EAAO,iBAAiB,UAAU,GAAc,EAAE,SAAS,GAAK,CAAC;AACjE;AAAA,QACF;AACA,QAAA,IAAS,EAAO;AAAA,MAClB;AAAA,IACF;AAAA,EACF,GACA,CAAC,CAAY,CACf;AAgBA,SAdA,EAAA,MAAgB;AACd,IAAK,KACH,EAAc,EAAK;AAAA,EAEvB,GAAG,CAAC,CAAM,CAAC,GAEX,EAAA,MACE,MAAa;AACX,IAAI,EAAmB,WACrB,EAAmB,QAAQ,oBAAoB,UAAU,CAAY;AAAA,EAEzE,GACC,CAAC,CAAY,CAAC,GAEZ,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAgB,QAAA;AAAA,IAAiB,SAAA;AAAA,IAAS,OAAO,KAAe,EAAK;AAAA,cACnE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QAAE,iBAAiB;AAAA,QAAsB,QAAQ;AAAA,MAAO;AAAA,gBAF9D;AAAA,SAII,KAAS,MACT,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,iBAAiB;AAAA,YACjB,KAAK;AAAA,YACL,GAAG;AAAA,YACH,IAAI,IAAkB,IAAI;AAAA,UAC5B;AAAA,oBANF,CAQG,KAAS,OAAO,KAAU,WAAW,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,IAAI,GACxD,KAAe,gBAAA,EAAC,GAAD;AAAA,YAAG,IAAI,EAAE,YAAY,OAAO;AAAA,sBAAI;AAAA,UAAe,CAAA,CAC1D;AAAA;QAGR,KACC,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,UAAU;AAAA,YACV,KAAK;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,cACP,cAAc,IAAa,cAAc;AAAA,cACzC,aAAa,IAAa,YAAY;AAAA,YACxC;AAAA,UACF;AAAA,oBAEC;AAAA,QACE,CAAA;AAAA,QAEN,KAAqB,gBAAA,EAAC,GAAD,EAAA,UAAM,EAAuB,CAAA;AAAA,QACnD,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,SAAS;AAAA,YAAsB,KAAK;AAAA,YAAI,GAAG;AAAA,UAAG;AAAA,oBAA3D,CACG,GACA,KACC,gBAAA,EAAC,GAAD;AAAA,YACE,aAAa;AAAA,YACD,YAAA;AAAA,YACZ,aAAa;AAAA,YACb,IAAI,EAAE,iBAAiB,mBAAmB;AAAA,YAC1C,OAAO;AAAA,UACR,CAAA,CAEE;AAAA;MACF;AAAA;EACD,CAAA,IAnDgB,gBAAA,EAAC,GAAD,CAAS,CAAA;AAqDrC,GACA,IAAe,EAAS,CAAmB"}

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

@@ -0,0 +1,73 @@
+import { buildDynamicCopy as _ } from "../../../core/utils/Localization/index.es.js";
+import { useFinstrongStore as y, useGlobalCopyStore as S } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as h } from "../../../core/utils/NumberFormatting/index.es.js";
+import { getDaysOfCashOnHandState as l, getEmergencySavingsState as u } from "../../util/finstrongUtils/index.es.js";
+import { KeyIndicatorsTabItemType as d } from "../../constants/index/index.es.js";
+import m from "../KeyIndicatorsTabItem/index.es.js";
+import v from "react";
+import { observer as O } from "mobx-react-lite";
+import I from "@mui/material/Stack";
+import { jsx as g, jsxs as C } from "react/jsx-runtime";
+var F = () => {
+  const { healthScore: s } = y(), { finstrong: c } = S(), { key_indicators_save: t } = c, p = (n) => {
+    const e = l(n), a = {
+      GOOD: t.days_of_cash_good_description,
+      FAIR: t.days_of_cash_fair_description,
+      OFF_TRACK: t.days_of_cash_off_track_description,
+      MISSING: t.days_of_cash_missing_description
+    };
+    return {
+      cardState: e,
+      description: e === "MISSING" ? a[e] : _(a[e], n),
+      title: t.days_of_cash_title
+    };
+  }, f = (n) => {
+    const e = u(n), a = {
+      GOOD: t.emergency_savings_good_description,
+      FAIR: t.emergency_savings_fair_description,
+      OFF_TRACK: t.emergency_savings_off_track_description,
+      MISSING: t.emergency_savings_missing_description
+    };
+    let i;
+    return e === "FAIR" && n !== null ? i = _(a[e], h(n, "0,0.00")) : i = a[e], {
+      cardState: e,
+      description: i,
+      title: t.emergency_savings_title
+    };
+  }, { daysOfCashOnHand: o, emergencySavings: r } = v.useMemo(() => {
+    const n = s.months_of_cash_on_hand !== null ? Math.round(s.months_of_cash_on_hand * 30) : null, e = p(n), a = s.emergency_savings_on_hand !== null ? Math.round(s.emergency_savings_on_hand) : null;
+    return {
+      daysOfCashOnHand: e,
+      emergencySavings: f(a)
+    };
+  }, [
+    s.months_of_cash_on_hand,
+    s.emergency_savings_on_hand,
+    t,
+    c
+  ]);
+  return /* @__PURE__ */ C(I, {
+    direction: "column",
+    gap: 24,
+    sx: {
+      p: 8,
+      pt: 24
+    },
+    children: [/* @__PURE__ */ g(m, {
+      cardState: o.cardState,
+      description: o.description,
+      drawerFor: d.SaveEnoughToLiveOn,
+      title: o.title
+    }), /* @__PURE__ */ g(m, {
+      cardState: r.cardState,
+      description: r.description,
+      drawerFor: d.MaintainEmergencySavings,
+      title: r.title
+    })]
+  });
+}, E = O(F);
+export {
+  E as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsSaveTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useFinstrongStore, useGlobalCopyStore } from '../../common'\nimport { KeyIndicatorsTabItemType } from '../constants'\nimport { getDaysOfCashOnHandState, getEmergencySavingsState } from '../util/finstrongUtils'\n\nimport KeyIndicatorsTabsItem from './KeyIndicatorsTabItem'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst KeyIndicatorsSaveTab: React.FC = () => {\n  const { healthScore } = useFinstrongStore()\n  const { finstrong: copyContent } = useGlobalCopyStore()\n  const { key_indicators_save: saveCopy } = copyContent\n\n  const getDaysOfCashOnHandStatus = (days: number | null) => {\n    const state = getDaysOfCashOnHandState(days)\n\n    const cardStatusMapping = {\n      GOOD: saveCopy.days_of_cash_good_description,\n      FAIR: saveCopy.days_of_cash_fair_description,\n      OFF_TRACK: saveCopy.days_of_cash_off_track_description,\n      MISSING: saveCopy.days_of_cash_missing_description,\n    }\n\n    const description =\n      state === 'MISSING'\n        ? cardStatusMapping[state]\n        : (buildDynamicCopy(cardStatusMapping[state], days) as string)\n\n    return {\n      cardState: state,\n      description,\n      title: saveCopy.days_of_cash_title,\n    }\n  }\n\n  const getEmergencySavingsStatus = (dollars: number | null) => {\n    const state = getEmergencySavingsState(dollars)\n\n    const cardStatusMapping = {\n      GOOD: saveCopy.emergency_savings_good_description,\n      FAIR: saveCopy.emergency_savings_fair_description,\n      OFF_TRACK: saveCopy.emergency_savings_off_track_description,\n      MISSING: saveCopy.emergency_savings_missing_description,\n    }\n\n    let description: string\n\n    if (state === 'FAIR' && dollars !== null) {\n      description = buildDynamicCopy(\n        cardStatusMapping[state],\n        formatCurrency(dollars, '0,0.00'),\n      ) as string\n    } else {\n      description = cardStatusMapping[state]\n    }\n\n    return {\n      cardState: state,\n      description,\n      title: saveCopy.emergency_savings_title,\n    }\n  }\n\n  const { daysOfCashOnHand, emergencySavings } = React.useMemo(() => {\n    const noOfDays =\n      healthScore.months_of_cash_on_hand !== null\n        ? Math.round(healthScore.months_of_cash_on_hand * 30)\n        : null\n    const daysOfCashOnHand = getDaysOfCashOnHandStatus(noOfDays)\n\n    const noOfDollars =\n      healthScore.emergency_savings_on_hand !== null\n        ? Math.round(healthScore.emergency_savings_on_hand)\n        : null\n    const emergencySavings = getEmergencySavingsStatus(noOfDollars)\n\n    return { daysOfCashOnHand, emergencySavings }\n  }, [\n    healthScore.months_of_cash_on_hand,\n    healthScore.emergency_savings_on_hand,\n    saveCopy,\n    copyContent,\n  ])\n\n  return (\n    <Stack direction=\"column\" gap={24} sx={{ p: 8, pt: 24 }}>\n      <KeyIndicatorsTabsItem\n        cardState={daysOfCashOnHand.cardState}\n        description={daysOfCashOnHand.description}\n        drawerFor={KeyIndicatorsTabItemType.SaveEnoughToLiveOn}\n        title={daysOfCashOnHand.title}\n      />\n      <KeyIndicatorsTabsItem\n        cardState={emergencySavings.cardState}\n        description={emergencySavings.description}\n        drawerFor={KeyIndicatorsTabItemType.MaintainEmergencySavings}\n        title={emergencySavings.title}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(KeyIndicatorsSaveTab)\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAA,MAAuC;AAC3C,QAAM,EAAE,aAAA,EAAA,IAAgB,EAAkB,GACpC,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAChD,EAAE,qBAAqB,EAAA,IAAa,GAEpC,IAAA,CAA6B,MAAwB;AACzD,UAAM,IAAQ,EAAyB,CAAI,GAErC,IAAoB;AAAA,MACxB,MAAM,EAAS;AAAA,MACf,MAAM,EAAS;AAAA,MACf,WAAW,EAAS;AAAA,MACpB,SAAS,EAAS;AAAA,IACpB;AAOA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,aANA,MAAU,YACN,EAAkB,CAAA,IACjB,EAAiB,EAAkB,CAAA,GAAQ,CAAI;AAAA,MAKpD,OAAO,EAAS;AAAA,IAClB;AAAA,EACF,GAEM,IAAA,CAA6B,MAA2B;AAC5D,UAAM,IAAQ,EAAyB,CAAO,GAExC,IAAoB;AAAA,MACxB,MAAM,EAAS;AAAA,MACf,MAAM,EAAS;AAAA,MACf,WAAW,EAAS;AAAA,MACpB,SAAS,EAAS;AAAA,IACpB;AAEA,QAAI;AAEJ,WAAI,MAAU,UAAU,MAAY,OAClC,IAAc,EACZ,EAAkB,CAAA,GAClB,EAAe,GAAS,QAAQ,CAClC,IAEA,IAAc,EAAkB,CAAA,GAG3B;AAAA,MACL,WAAW;AAAA,MACX,aAAA;AAAA,MACA,OAAO,EAAS;AAAA,IAClB;AAAA,EACF,GAEM,EAAE,kBAAA,GAAkB,kBAAA,EAAA,IAAqB,EAAM,QAAA,MAAc;AACjE,UAAM,IACJ,EAAY,2BAA2B,OACnC,KAAK,MAAM,EAAY,yBAAyB,EAAE,IAClD,MACA,IAAmB,EAA0B,CAAQ,GAErD,IACJ,EAAY,8BAA8B,OACtC,KAAK,MAAM,EAAY,yBAAyB,IAChD;AAGN,WAAO;AAAA,MAAE,kBAAA;AAAA,MAAkB,kBAFF,EAA0B,CAExB;AAAA,IAAiB;AAAA,EAC9C,GAAG;AAAA,IACD,EAAY;AAAA,IACZ,EAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAS,KAAK;AAAA,IAAI,IAAI;AAAA,MAAE,GAAG;AAAA,MAAG,IAAI;AAAA,IAAG;AAAA,cAAtD,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAiB;AAAA,MAC5B,aAAa,EAAiB;AAAA,MAC9B,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAiB;AAAA,IACzB,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAiB;AAAA,MAC5B,aAAa,EAAiB;AAAA,MAC9B,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAiB;AAAA,IACzB,CAAA,CACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAoB"}

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

@@ -0,0 +1,58 @@
+import { buildDynamicCopy as _ } from "../../../core/utils/Localization/index.es.js";
+import { useFinstrongStore as S, useGlobalCopyStore as u } from "../../../common/context/hooks/index.es.js";
+import { getSpendToIncomeRatioState as l, getSpendingFeeCountStatus as f } from "../../util/finstrongUtils/index.es.js";
+import { KeyIndicatorsTabItemType as c } from "../../constants/index/index.es.js";
+import d from "../KeyIndicatorsTabItem/index.es.js";
+import I from "react";
+import { observer as g } from "mobx-react-lite";
+import y from "@mui/material/Stack";
+import { jsx as p, jsxs as T } from "react/jsx-runtime";
+var F = () => {
+  const { finstrong: a } = u(), { key_indicators_spend: t } = a, { healthScore: o } = S(), m = (e) => {
+    const n = l(e), s = {
+      GOOD: t.ratio_good_description,
+      FAIR: t.ratio_fair_description,
+      OFF_TRACK: t.ratio_off_track_description,
+      MISSING: t.ratio_missing_description
+    };
+    return {
+      cardState: n,
+      description: n === "MISSING" ? s[n] : _(s[n], e),
+      title: t.ratio_card_title
+    };
+  }, { spendToIncomeRatio: r, spendFeeCount: i } = I.useMemo(() => {
+    const e = o.spend_to_income_ratio !== null ? Math.round(o.spend_to_income_ratio * 100) : null;
+    return {
+      spendToIncomeRatio: m(e),
+      spendFeeCount: f(o.spending_fee_transaction_count, t)
+    };
+  }, [
+    o.spend_to_income_ratio,
+    o.spending_fee_transaction_count,
+    t,
+    a
+  ]);
+  return /* @__PURE__ */ T(y, {
+    sx: {
+      gap: 24,
+      p: 8,
+      pt: 24
+    },
+    children: [/* @__PURE__ */ p(d, {
+      cardState: r.cardState,
+      description: r.description,
+      drawerFor: c.SpendLessThanYouMake,
+      title: r.title
+    }), /* @__PURE__ */ p(d, {
+      cardState: i.cardState,
+      description: i.description,
+      drawerFor: c.PayBillsOnTime,
+      title: i.title
+    })]
+  });
+}, O = g(F);
+export {
+  O as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsSpendTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useFinstrongStore, useGlobalCopyStore } from '../../common'\nimport { KeyIndicatorsTabItemType } from '../constants'\nimport { getSpendingFeeCountStatus, getSpendToIncomeRatioState } from '../util/finstrongUtils'\n\nimport KeyIndicatorsTabsItem from './KeyIndicatorsTabItem'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst KeyIndicatorsSpendTab: React.FC = () => {\n  const { finstrong: copyContent } = useGlobalCopyStore()\n  const { key_indicators_spend: spendCopy } = copyContent\n  const { healthScore } = useFinstrongStore()\n\n  const getSpendToIncomeRatioStatus = (ratio: number | null) => {\n    const state = getSpendToIncomeRatioState(ratio)\n\n    const cardStatusMapping = {\n      GOOD: spendCopy.ratio_good_description,\n      FAIR: spendCopy.ratio_fair_description,\n      OFF_TRACK: spendCopy.ratio_off_track_description,\n      MISSING: spendCopy.ratio_missing_description,\n    }\n\n    const description =\n      state === 'MISSING'\n        ? cardStatusMapping[state]\n        : (buildDynamicCopy(cardStatusMapping[state], ratio) as string)\n\n    return {\n      cardState: state,\n      description,\n      title: spendCopy.ratio_card_title,\n    }\n  }\n\n  const { spendToIncomeRatio, spendFeeCount } = React.useMemo(() => {\n    const healthScoreRatio =\n      healthScore.spend_to_income_ratio !== null\n        ? Math.round(healthScore.spend_to_income_ratio * 100)\n        : null\n    const spendToIncomeRatio = getSpendToIncomeRatioStatus(healthScoreRatio)\n    const spendFeeCount = getSpendingFeeCountStatus(\n      healthScore.spending_fee_transaction_count,\n      spendCopy,\n    )\n\n    return { spendToIncomeRatio, spendFeeCount }\n  }, [\n    healthScore.spend_to_income_ratio,\n    healthScore.spending_fee_transaction_count,\n    spendCopy,\n    copyContent,\n  ])\n\n  return (\n    <Stack sx={{ gap: 24, p: 8, pt: 24 }}>\n      <KeyIndicatorsTabsItem\n        cardState={spendToIncomeRatio.cardState}\n        description={spendToIncomeRatio.description}\n        drawerFor={KeyIndicatorsTabItemType.SpendLessThanYouMake}\n        title={spendToIncomeRatio.title}\n      />\n      <KeyIndicatorsTabsItem\n        cardState={spendFeeCount.cardState}\n        description={spendFeeCount.description}\n        drawerFor={KeyIndicatorsTabItemType.PayBillsOnTime}\n        title={spendFeeCount.title}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(KeyIndicatorsSpendTab)\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAwC;AAC5C,QAAM,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAChD,EAAE,sBAAsB,EAAA,IAAc,GACtC,EAAE,aAAA,EAAA,IAAgB,EAAkB,GAEpC,IAAA,CAA+B,MAAyB;AAC5D,UAAM,IAAQ,EAA2B,CAAK,GAExC,IAAoB;AAAA,MACxB,MAAM,EAAU;AAAA,MAChB,MAAM,EAAU;AAAA,MAChB,WAAW,EAAU;AAAA,MACrB,SAAS,EAAU;AAAA,IACrB;AAOA,WAAO;AAAA,MACL,WAAW;AAAA,MACX,aANA,MAAU,YACN,EAAkB,CAAA,IACjB,EAAiB,EAAkB,CAAA,GAAQ,CAAK;AAAA,MAKrD,OAAO,EAAU;AAAA,IACnB;AAAA,EACF,GAEM,EAAE,oBAAA,GAAoB,eAAA,EAAA,IAAkB,EAAM,QAAA,MAAc;AAChE,UAAM,IACJ,EAAY,0BAA0B,OAClC,KAAK,MAAM,EAAY,wBAAwB,GAAG,IAClD;AAON,WAAO;AAAA,MAAE,oBANkB,EAA4B,CAM9C;AAAA,MAAoB,eALP,EACpB,EAAY,gCACZ,CAG2B;AAAA,IAAc;AAAA,EAC7C,GAAG;AAAA,IACD,EAAY;AAAA,IACZ,EAAY;AAAA,IACZ;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,MAAG,IAAI;AAAA,IAAG;AAAA,cAAnC,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAmB;AAAA,MAC9B,aAAa,EAAmB;AAAA,MAChC,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAmB;AAAA,IAC3B,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW,EAAc;AAAA,MACzB,aAAa,EAAc;AAAA,MAC3B,WAAW,EAAyB;AAAA,MACpC,OAAO,EAAc;AAAA,IACtB,CAAA,CACI;AAAA;AAEX,GAEA,IAAe,EAAS,CAAqB"}

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

@@ -0,0 +1,65 @@
+import { useGlobalCopyStore as m } from "../../../common/context/hooks/index.es.js";
+import f from "../StatusChip/index.es.js";
+import u from "../KeyIndicatorsTabItemDrawer/index.es.js";
+import y from "react";
+import n from "@mui/material/Stack";
+import { P as h, Text as x } from "@mxenabled/mxui";
+import { ChevronRight as b } from "@mxenabled/mx-icons";
+import { Fragment as I, jsx as e, jsxs as r } from "react/jsx-runtime";
+var j = ({ drawerFor: a, title: i, description: s, cardState: l = "MISSING" }) => {
+  const { finstrong: c } = m(), [p, o] = y.useState(!1), d = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), o(!0));
+  };
+  return /* @__PURE__ */ r(I, { children: [/* @__PURE__ */ r(n, {
+    "aria-label": `${c.key_indicators_open} ${i}`,
+    onClick: () => o(!0),
+    onKeyDown: d,
+    role: "button",
+    sx: {
+      alignItems: "center",
+      borderRadius: 2,
+      cursor: "pointer",
+      flexDirection: "row",
+      gap: 12,
+      justifyContent: "space-between",
+      outline: "1px solid",
+      outlineColor: "divider",
+      p: 16
+    },
+    tabIndex: 0,
+    children: [/* @__PURE__ */ r(n, {
+      sx: {
+        gap: 8,
+        minWidth: 0
+      },
+      children: [/* @__PURE__ */ r(n, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 8
+        },
+        children: [/* @__PURE__ */ e(x, {
+          sx: { fontWeight: 600 },
+          variant: "body1",
+          children: i
+        }), /* @__PURE__ */ e(f, { status: l })]
+      }), /* @__PURE__ */ e(h, {
+        color: "secondary",
+        variant: "subtitle2",
+        children: s
+      })]
+    }), /* @__PURE__ */ e(b, {
+      color: "secondary",
+      size: 24
+    })]
+  }), /* @__PURE__ */ e(u, {
+    drawerFor: a,
+    isOpen: p,
+    onClose: () => o(!1)
+  })] });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsTabItem.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { P, Text } from '@mxenabled/mxui'\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../common'\nimport type { CardStatus } from '../../common/constants/FinStrong'\n\nimport { KeyIndicatorsTabItemType } from '../constants'\n\nimport KeyIndicatorsTabItemDrawer from './KeyIndicatorsTabItemDrawer'\nimport StatusChip from './StatusChip'\n\ninterface KeyIndicatorsTabsItemProps {\n  drawerFor: KeyIndicatorsTabItemType\n  title: string\n  description: string\n  cardState: keyof typeof CardStatus\n}\n\nconst KeyIndicatorsTabsItem: React.FC<KeyIndicatorsTabsItemProps> = ({\n  drawerFor,\n  title,\n  description,\n  cardState = 'MISSING',\n}) => {\n  const { finstrong: copyContent } = useGlobalCopyStore()\n\n  const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      setIsDrawerOpen(true)\n    }\n  }\n\n  return (\n    <>\n      <Stack\n        aria-label={`${copyContent.key_indicators_open} ${title}`}\n        onClick={() => setIsDrawerOpen(true)}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        sx={{\n          alignItems: 'center',\n          borderRadius: 2,\n          cursor: 'pointer',\n          flexDirection: 'row',\n          gap: 12,\n          justifyContent: 'space-between',\n          outline: '1px solid',\n          outlineColor: 'divider',\n          p: 16,\n        }}\n        tabIndex={0}\n      >\n        <Stack sx={{ gap: 8, minWidth: 0 }}>\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n            <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n              {title}\n            </Text>\n            <StatusChip status={cardState} />\n          </Stack>\n          <P color=\"secondary\" variant=\"subtitle2\">\n            {description}\n          </P>\n        </Stack>\n        <ChevronRight color=\"secondary\" size={24} />\n      </Stack>\n      <KeyIndicatorsTabItemDrawer\n        drawerFor={drawerFor}\n        isOpen={isDrawerOpen}\n        onClose={() => setIsDrawerOpen(false)}\n      />\n    </>\n  )\n}\n\nexport default KeyIndicatorsTabsItem\n"],"mappings":";;;;;;;;AAsBA,IAAM,IAAA,CAA+D,EACnE,WAAA,GACA,OAAA,GACA,aAAA,GACA,WAAA,IAAY,UAAA,MACR;AACJ,QAAM,EAAE,WAAW,EAAA,IAAgB,EAAmB,GAEhD,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAS,EAAK,GAEtD,IAAA,CAAiB,MAA+B;AACpD,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,EAAgB,EAAI;AAAA,EAExB;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY,GAAG,EAAY,mBAAA,IAAuB,CAAA;AAAA,IAClD,SAAA,MAAe,EAAgB,EAAI;AAAA,IACnC,WAAW;AAAA,IACX,MAAK;AAAA,IACL,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,SAAS;AAAA,MACT,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,IACA,UAAU;AAAA,cAhBZ,CAkBE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAG,UAAU;AAAA,MAAE;AAAA,gBAAjC,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,kBAAhE,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,oBACpC;AAAA,QACG,CAAA,GACN,gBAAA,EAAC,GAAD,EAAY,QAAQ,EAAY,CAAA,CAC3B;AAAA,UACP,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAY,SAAQ;AAAA,kBAC1B;AAAA,MACA,CAAA,CACE;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,MAAc,OAAM;AAAA,MAAY,MAAM;AAAA,IAAK,CAAA,CACtC;AAAA,MACP,gBAAA,EAAC,GAAD;AAAA,IACa,WAAA;AAAA,IACX,QAAQ;AAAA,IACR,SAAA,MAAe,EAAgB,EAAK;AAAA,EACrC,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,93 @@
+import { useGlobalCopyStore as i } from "../../../common/context/hooks/index.es.js";
+import c from "../CreditScore/CreditScoreContent/index.es.js";
+import _ from "../CreditScore/CreditScoreHeader/index.es.js";
+import s from "../KeyIndicatorsDrawer/index.es.js";
+import d from "../MaintainingEmergencySavings/MaintainingEmergencySavingsContent/index.es.js";
+import l from "../MaintainingEmergencySavings/MaintainingEmergencySavingsSticky/index.es.js";
+import p from "../paybillsontime/PayBillsOnTimeDrawerComponent/index.es.js";
+import m from "../paybillsontime/PayBillsOnTimeStickyComponent/index.es.js";
+import u from "../SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent/index.es.js";
+import y from "../SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar/index.es.js";
+import f from "../HaveManageableDebt/HaveManageableDebtProgressBar/index.es.js";
+import g from "../HaveManageableDebt/HaveManageableDebtComponent/index.es.js";
+import k from "../SpendLessThanYouMake/SpendLessThanYouMakeProgressBar/index.es.js";
+import w from "../SpendLessThanYouMake/SpendLessThanYouMakeComponent/index.es.js";
+import { observer as v } from "mobx-react-lite";
+import T from "@mui/material/Stack";
+import { jsx as n } from "react/jsx-runtime";
+var b = ({ drawerFor: o, isOpen: r, onClose: a }) => {
+  const { finstrong: e } = i(), t = {
+    spendLessThanYouMake: {
+      title: e.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_title,
+      description: e.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_description,
+      stickyComponent: /* @__PURE__ */ n(k, {}),
+      content: /* @__PURE__ */ n(w, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    payBillsOnTime: {
+      title: e.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_title,
+      description: e.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_description,
+      stickyComponent: /* @__PURE__ */ n(m, {}),
+      content: /* @__PURE__ */ n(p, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    maintainEmergencySavings: {
+      content: /* @__PURE__ */ n(d, {}),
+      description: e.maintain_emergency_savings_description,
+      stickyComponent: /* @__PURE__ */ n(l, {}),
+      title: e.maintain_emergency_savings_title,
+      drawerType: "connectDrawer",
+      connectTitle: e.connect_your_accounts,
+      connectDescription: e.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances
+    },
+    haveManageableDebt: {
+      title: e.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_title,
+      description: e.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_description,
+      stickyComponent: /* @__PURE__ */ n(f, {}),
+      content: /* @__PURE__ */ n(g, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.dont_see_all_your_accounts,
+      connectDescription: e.connect_more_accounts_to_view_more_accurate_financial_picture
+    },
+    haveAGoodCreditScore: {
+      title: /* @__PURE__ */ n(_, {}),
+      description: e.credit_score_description,
+      stickyComponent: null,
+      content: /* @__PURE__ */ n(c, {})
+    },
+    saveEnoughToLiveOn: {
+      title: e.key_indicators_save.drawer_title,
+      description: e.key_indicators_save.drawer_description,
+      stickyComponent: /* @__PURE__ */ n(y, {}),
+      content: /* @__PURE__ */ n(u, {}),
+      drawerType: "connectDrawer",
+      connectTitle: e.dont_see_all_your_accounts,
+      connectDescription: e.connect_more_accounts_to_view_more_accurate_financial_picture
+    }
+  }[o];
+  return /* @__PURE__ */ n(s, {
+    connectDescription: t?.connectDescription,
+    connectTitle: t?.connectTitle,
+    description: t?.description,
+    drawerTitle: e.key_indicators,
+    drawerType: t.drawerType,
+    isOpen: r,
+    loadConnectAccountsCard: !0,
+    onClose: a,
+    stickyComponent: t.stickyComponent,
+    title: t.title,
+    children: /* @__PURE__ */ n(T, {
+      sx: { gap: 16 },
+      children: t.content
+    })
+  });
+}, j = v(b);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsTabItemDrawer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { KeyIndicatorsTabItemType } from '../constants'\n\nimport CreditScoreContent from './CreditScore/CreditScoreContent'\nimport CreditScoreHeader from './CreditScore/CreditScoreHeader'\nimport KeyIndicatorsDrawer from './KeyIndicatorsDrawer'\nimport MaintainingEmergencySavingsContent from './MaintainingEmergencySavings/MaintainingEmergencySavingsContent'\nimport MaintainingEmergencySavingsSticky from './MaintainingEmergencySavings/MaintainingEmergencySavingsSticky'\nimport PayBillsOnTimeDrawerComponent from './paybillsontime/PayBillsOnTimeDrawerComponent'\nimport PayBillsOnTimeStickyComponent from './paybillsontime/PayBillsOnTimeStickyComponent'\nimport SaveEnoughToLiveOnDrawerContent from './SaveEnoughToLiveOn/SaveEnoughToLiveOnDrawerContent'\nimport SaveEnoughToLiveOnProgressBar from './SaveEnoughToLiveOn/SaveEnoughToLiveOnProgressBar'\nimport HaveManageableDebtProgressBar from './HaveManageableDebt/HaveManageableDebtProgressBar'\nimport HaveManageableDebtComponent from './HaveManageableDebt/HaveManageableDebtComponent'\nimport SpendLessThanYouMakeProgressBar from './SpendLessThanYouMake/SpendLessThanYouMakeProgressBar'\nimport SpendLessThanYouMakeComponent from './SpendLessThanYouMake/SpendLessThanYouMakeComponent'\n\ninterface KeyIndicatorsTabItemDrawerProps {\n  drawerFor: KeyIndicatorsTabItemType\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst KeyIndicatorsTabItemDrawer = ({\n  drawerFor,\n  isOpen,\n  onClose,\n}: KeyIndicatorsTabItemDrawerProps) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  //TODO : When the Drawer for key indicators other than Save Enough To Live On are implemented,\n  // add their respective content, titles, descriptions, and sticky components here.\n  const contentMapping: Record<\n    KeyIndicatorsTabItemType,\n    {\n      connectTitle?: string\n      connectDescription?: string\n      title: React.ReactNode\n      description: string\n      stickyComponent: React.ReactNode\n      content: React.ReactNode\n      drawerType?: 'connectDrawer' | 'connectionsDrawer'\n    }\n  > = {\n    spendLessThanYouMake: {\n      title:\n        copy.key_indicators_spend.spend_less_than_you_make_drawer.spend_less_than_you_make_title,\n      description:\n        copy.key_indicators_spend.spend_less_than_you_make_drawer\n          .spend_less_than_you_make_description,\n      stickyComponent: <SpendLessThanYouMakeProgressBar />,\n      content: <SpendLessThanYouMakeComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    payBillsOnTime: {\n      title: copy.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_title,\n      description: copy.key_indicators_spend.pay_bills_on_time_drawer.pay_bills_on_time_description,\n      stickyComponent: <PayBillsOnTimeStickyComponent />,\n      content: <PayBillsOnTimeDrawerComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    maintainEmergencySavings: {\n      content: <MaintainingEmergencySavingsContent />,\n      description: copy.maintain_emergency_savings_description,\n      stickyComponent: <MaintainingEmergencySavingsSticky />,\n      title: copy.maintain_emergency_savings_title,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.connect_your_accounts,\n      connectDescription:\n        copy.connect_more_accounts_to_unlock_a_fuller_understanding_of_your_finances,\n    },\n    haveManageableDebt: {\n      title: copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_title,\n      description:\n        copy.key_indicators_borrow.have_manageable_debt_drawer.have_manageable_debt_description,\n      stickyComponent: <HaveManageableDebtProgressBar />,\n      content: <HaveManageableDebtComponent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.dont_see_all_your_accounts,\n      connectDescription: copy.connect_more_accounts_to_view_more_accurate_financial_picture,\n    },\n    haveAGoodCreditScore: {\n      title: <CreditScoreHeader />,\n      description: copy.credit_score_description,\n      stickyComponent: null,\n      content: <CreditScoreContent />,\n    },\n    saveEnoughToLiveOn: {\n      title: copy.key_indicators_save.drawer_title,\n      description: copy.key_indicators_save.drawer_description,\n      stickyComponent: <SaveEnoughToLiveOnProgressBar />,\n      content: <SaveEnoughToLiveOnDrawerContent />,\n      drawerType: 'connectDrawer',\n      connectTitle: copy.dont_see_all_your_accounts,\n      connectDescription: copy.connect_more_accounts_to_view_more_accurate_financial_picture,\n    },\n  }\n\n  const content = contentMapping[drawerFor]\n  return (\n    <KeyIndicatorsDrawer\n      connectDescription={content?.connectDescription}\n      connectTitle={content?.connectTitle}\n      description={content?.description}\n      drawerTitle={copy.key_indicators}\n      drawerType={content.drawerType}\n      isOpen={isOpen}\n      loadConnectAccountsCard={true}\n      onClose={onClose}\n      stickyComponent={content.stickyComponent}\n      title={content.title}\n    >\n      <Stack sx={{ gap: 16 }}>{content.content}</Stack>\n    </KeyIndicatorsDrawer>\n  )\n}\n\nexport default observer(KeyIndicatorsTabItemDrawer)\n"],"mappings":";;;;;;;;;;;;;;;;;AA2BA,IAAM,IAAA,CAA8B,EAClC,WAAA,GACA,QAAA,GACA,SAAA,EAAA,MACqC;AACrC,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GA4EzC,IAAU;AAAA,IA5Dd,sBAAsB;AAAA,MACpB,OACE,EAAK,qBAAqB,gCAAgC;AAAA,MAC5D,aACE,EAAK,qBAAqB,gCACvB;AAAA,MACL,iBAAiB,gBAAA,EAAC,GAAD,CAAkC,CAAA;AAAA,MACnD,SAAS,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACzC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,EAAK,qBAAqB,yBAAyB;AAAA,MAC1D,aAAa,EAAK,qBAAqB,yBAAyB;AAAA,MAChE,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACzC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,0BAA0B;AAAA,MACxB,SAAS,gBAAA,EAAC,GAAD,CAAqC,CAAA;AAAA,MAC9C,aAAa,EAAK;AAAA,MAClB,iBAAiB,gBAAA,EAAC,GAAD,CAAoC,CAAA;AAAA,MACrD,OAAO,EAAK;AAAA,MACZ,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBACE,EAAK;AAAA,IACT;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAO,EAAK,sBAAsB,4BAA4B;AAAA,MAC9D,aACE,EAAK,sBAAsB,4BAA4B;AAAA,MACzD,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAA8B,CAAA;AAAA,MACvC,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBAAoB,EAAK;AAAA,IAC3B;AAAA,IACA,sBAAsB;AAAA,MACpB,OAAO,gBAAA,EAAC,GAAD,CAAoB,CAAA;AAAA,MAC3B,aAAa,EAAK;AAAA,MAClB,iBAAiB;AAAA,MACjB,SAAS,gBAAA,EAAC,GAAD,CAAqB,CAAA;AAAA,IAChC;AAAA,IACA,oBAAoB;AAAA,MAClB,OAAO,EAAK,oBAAoB;AAAA,MAChC,aAAa,EAAK,oBAAoB;AAAA,MACtC,iBAAiB,gBAAA,EAAC,GAAD,CAAgC,CAAA;AAAA,MACjD,SAAS,gBAAA,EAAC,GAAD,CAAkC,CAAA;AAAA,MAC3C,YAAY;AAAA,MACZ,cAAc,EAAK;AAAA,MACnB,oBAAoB,EAAK;AAAA,IAC3B;AAAA,EAGc,EAAe,CAAA;AAC/B,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,oBAAoB,GAAS;AAAA,IAC7B,cAAc,GAAS;AAAA,IACvB,aAAa,GAAS;AAAA,IACtB,aAAa,EAAK;AAAA,IAClB,YAAY,EAAQ;AAAA,IACZ,QAAA;AAAA,IACR,yBAAyB;AAAA,IAChB,SAAA;AAAA,IACT,iBAAiB,EAAQ;AAAA,IACzB,OAAO,EAAQ;AAAA,cAEf,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,KAAK,GAAG;AAAA,gBAAI,EAAQ;AAAA,IAAe,CAAA;AAAA,EAC7B,CAAA;AAEzB,GAEA,IAAe,EAAS,CAA0B"}

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

@@ -0,0 +1,78 @@
+import { useGlobalCopyStore as l } from "../../../common/context/hooks/index.es.js";
+import i from "../../../common/components/TabContentContainer/index.es.js";
+import d from "../KeyIndicatorsSpendTab/index.es.js";
+import m from "../KeyIndicatorsSaveTab/index.es.js";
+import c from "../KeyIndicatorsBorrowTab/index.es.js";
+import b from "react";
+import { observer as p } from "mobx-react-lite";
+import { ContentCopy as u, CreditCard as f, Savings as v } from "@mxenabled/mx-icons";
+import { Fragment as x, jsx as t, jsxs as r } from "react/jsx-runtime";
+import o from "@mui/material/Tab";
+import y from "@mui/material/Tabs";
+var h = () => {
+  const [e, n] = b.useState(0), { finstrong: a } = l();
+  return /* @__PURE__ */ r(x, { children: [
+    /* @__PURE__ */ r(y, {
+      "aria-label": "Key Indicators",
+      centered: !0,
+      onChange: (_, s) => n(s),
+      selectionFollowsFocus: !0,
+      sx: {
+        mb: 0,
+        "& .MuiTab-root": { minWidth: 0 }
+      },
+      textColor: "primary",
+      value: e,
+      variant: "fullWidth",
+      children: [
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "spend-details-tabpanel-0",
+          icon: /* @__PURE__ */ t(f, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "spend-details-tab-0",
+          label: a.key_indicators_spend.title,
+          sx: { minHeight: 44 }
+        }),
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "save-details-tabpanel-1",
+          icon: /* @__PURE__ */ t(v, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "save-details-tab-1",
+          label: a.key_indicators_save.title,
+          sx: { minHeight: 44 }
+        }),
+        /* @__PURE__ */ t(o, {
+          "aria-controls": "borrow-details-tabpanel-2",
+          icon: /* @__PURE__ */ t(u, { sx: { mr: 8 } }),
+          iconPosition: "start",
+          id: "borrow-details-tab-2",
+          label: a.key_indicators_borrow.title,
+          sx: { minHeight: 44 }
+        })
+      ]
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 0,
+      name: "spend-details",
+      value: e,
+      children: /* @__PURE__ */ t(d, {})
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 1,
+      name: "save-details",
+      value: e,
+      children: /* @__PURE__ */ t(m, {})
+    }),
+    /* @__PURE__ */ t(i, {
+      index: 2,
+      name: "borrow-details",
+      value: e,
+      children: /* @__PURE__ */ t(c, {})
+    })
+  ] });
+}, P = p(h);
+export {
+  P as default
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/finstrong/components/KeyIndicatorsTabsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Tab from '@mui/material/Tab'\nimport Tabs from '@mui/material/Tabs'\n\nimport { CreditCard, ContentCopy, Savings } from '@mxenabled/mx-icons'\n\nimport { TabContentContainer, useGlobalCopyStore } from '../../common'\n\nimport KeyIndicatorsSpendTab from './KeyIndicatorsSpendTab'\nimport KeyIndicatorsSaveTab from './KeyIndicatorsSaveTab'\nimport KeyIndicatorsBorrowTab from './KeyIndicatorsBorrowTab'\n\nconst KeyIndicatorsTabsWidget: React.FC = () => {\n  const [tabValue, setTabValue] = React.useState(0)\n  const { finstrong: copy } = useGlobalCopyStore()\n\n  return (\n    <>\n      <Tabs\n        aria-label={'Key Indicators'}\n        centered={true}\n        onChange={(_, val) => setTabValue(val)}\n        selectionFollowsFocus={true}\n        sx={{\n          mb: 0,\n          '& .MuiTab-root': {\n            minWidth: 0,\n          },\n        }}\n        textColor=\"primary\"\n        value={tabValue}\n        variant=\"fullWidth\"\n      >\n        <Tab\n          aria-controls=\"spend-details-tabpanel-0\"\n          icon={<CreditCard sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"spend-details-tab-0\"\n          label={copy.key_indicators_spend.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n        <Tab\n          aria-controls=\"save-details-tabpanel-1\"\n          icon={<Savings sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"save-details-tab-1\"\n          label={copy.key_indicators_save.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n        <Tab\n          aria-controls=\"borrow-details-tabpanel-2\"\n          icon={<ContentCopy sx={{ mr: 8 }} />}\n          iconPosition=\"start\"\n          id=\"borrow-details-tab-2\"\n          label={copy.key_indicators_borrow.title}\n          sx={{ minHeight: 44 }} // TODO : remove it once the theme is updated\n        />\n      </Tabs>\n\n      <TabContentContainer index={0} name=\"spend-details\" value={tabValue}>\n        <KeyIndicatorsSpendTab />\n      </TabContentContainer>\n\n      <TabContentContainer index={1} name=\"save-details\" value={tabValue}>\n        <KeyIndicatorsSaveTab />\n      </TabContentContainer>\n\n      <TabContentContainer index={2} name=\"borrow-details\" value={tabValue}>\n        <KeyIndicatorsBorrowTab />\n      </TabContentContainer>\n    </>\n  )\n}\n\nexport default observer(KeyIndicatorsTabsWidget)\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,IAAA,MAA0C;AAC9C,QAAM,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,CAAC,GAC1C,EAAE,WAAW,EAAA,IAAS,EAAmB;AAE/C,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,UAAU;AAAA,MACV,UAAA,CAAW,GAAG,MAAQ,EAAY,CAAG;AAAA,MACrC,uBAAuB;AAAA,MACvB,IAAI;AAAA,QACF,IAAI;AAAA,QACJ,kBAAkB,EAChB,UAAU,EACZ;AAAA,MACF;AAAA,MACA,WAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAQ;AAAA,gBAbV;AAAA,QAeE,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAY,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UAClC,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,qBAAqB;AAAA,UACjC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAS,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UAC/B,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,oBAAoB;AAAA,UAChC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAc;AAAA,UACd,MAAM,gBAAA,EAAC,GAAD,EAAa,IAAI,EAAE,IAAI,EAAE,EAAI,CAAA;AAAA,UACnC,cAAa;AAAA,UACb,IAAG;AAAA,UACH,OAAO,EAAK,sBAAsB;AAAA,UAClC,IAAI,EAAE,WAAW,GAAG;AAAA,QACrB,CAAA;AAAA,MACG;AAAA;IAEN,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAgB,OAAO;AAAA,gBACzD,gBAAA,EAAC,GAAD,CAAwB,CAAA;AAAA,IACL,CAAA;AAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAe,OAAO;AAAA,gBACxD,gBAAA,EAAC,GAAD,CAAuB,CAAA;AAAA,IACJ,CAAA;AAAA,IAErB,gBAAA,EAAC,GAAD;AAAA,MAAqB,OAAO;AAAA,MAAG,MAAK;AAAA,MAAiB,OAAO;AAAA,gBAC1D,gBAAA,EAAC,GAAD,CAAyB,CAAA;AAAA,IACN,CAAA;AAAA,EACrB,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAuB"}