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

package/dist/cashflow/components/CashflowHeading/index.es.js

@@ -0,0 +1,101 @@
+import { buildDynamicCopy as _ } from "../../../core/utils/Localization/index.es.js";
+import { useGlobalCopyStore as B, useGlobalUiStore as G, useRecurringTransactionsStore as z, useWidgetContainerProvider as R } from "../../../common/context/hooks/index.es.js";
+import U from "../../../common/components/drawer/Drawer/index.es.js";
+import j from "../../../common/components/InformationTooltip/index.es.js";
+import { ManageIncome as k } from "../../../recurringtransactions/components/shared/recurringsettings/ManageIncome/index.es.js";
+import { useCashflowUiStore as E } from "../../context/hooks/index.es.js";
+import i from "../CashflowAmountHeading/index.es.js";
+import F from "react";
+import { observer as L } from "mobx-react-lite";
+import x from "@mui/material/Stack";
+import { Icon as M, Text as c } from "@mxenabled/mxui";
+import { isBefore as O } from "date-fns/isBefore";
+import W from "@mui/material/Button";
+import { Fragment as P, jsx as o, jsxs as l } from "react/jsx-runtime";
+import { isAfter as $ } from "date-fns/isAfter";
+import m from "@mui/material/Divider";
+import { isToday as q } from "date-fns/isToday";
+var C = (r, t) => (n) => n.accountGuid && r.includes(n.accountGuid) && (q(n.expectedDate) || $(n.expectedDate, t.start)) && O(n.expectedDate, t.end), J = () => {
+  const { availableWidth: r } = R(), { cashflow: t } = B(), { isDataLoaded: n } = z(), { selectedAccountGuids: d } = G(), { dateRange: u, income: S, selectedCashAccounts: v, selectedCashBalance: y, upcomingExpenses: I, upcomingIncome: w } = E(), [D, p] = F.useState(!1), f = I.filter(C(d, u)), H = w.filter(C(d, u)), h = y, g = f.reduce((a, s) => a + s.amount, 0), b = H.reduce((a, s) => a + s.amount, 0), T = h - g + b, A = n && S.length > 0, e = r < 725;
+  return /* @__PURE__ */ l(x, {
+    sx: {
+      mx: e ? 16 : 0,
+      my: e ? 24 : 42
+    },
+    children: [/* @__PURE__ */ l(x, {
+      border: e ? "1px solid" : "none",
+      borderColor: "neutral.light",
+      borderRadius: 2,
+      flexDirection: e ? "column" : "row",
+      gap: e ? 0 : 24,
+      justifyContent: "center",
+      children: [
+        /* @__PURE__ */ o(i, {
+          amount: h,
+          isMobile: e,
+          label: _(t.cash_and_bank, v.length)
+        }),
+        e && /* @__PURE__ */ o(m, {}),
+        A ? /* @__PURE__ */ l(P, { children: [!e && /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "+"
+        }), /* @__PURE__ */ o(i, {
+          amount: b,
+          isMobile: e,
+          label: t.to_be_received,
+          symbol: e ? "+" : void 0
+        })] }) : /* @__PURE__ */ o(W, {
+          onClick: () => p(!0),
+          startIcon: /* @__PURE__ */ o(M, { name: "add" }),
+          sx: { fontSize: 13 },
+          children: t.add_income
+        }),
+        e ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "-"
+        }),
+        /* @__PURE__ */ o(i, {
+          amount: g,
+          isMobile: e,
+          label: _(t.to_be_paid_out, f.length),
+          symbol: e ? "-" : void 0
+        }),
+        e ? /* @__PURE__ */ o(m, {}) : /* @__PURE__ */ o(c, {
+          sx: {
+            fontSize: 25,
+            lineHeight: 1
+          },
+          children: "="
+        }),
+        /* @__PURE__ */ o(i, {
+          amount: T,
+          isMobile: e,
+          isTotal: e,
+          label: t.remaining_cash,
+          tooltip: /* @__PURE__ */ o(j, {
+            body: t.remaining_income_tooltip_body,
+            title: t.remaining_income_tooltip_title
+          })
+        })
+      ]
+    }), /* @__PURE__ */ o(U, {
+      ariaLabelClose: t.close_manage_income_aria,
+      isOpen: D,
+      onClose: () => p(!1),
+      shouldShowHeaderBorders: !1,
+      title: t.manage_income,
+      children: /* @__PURE__ */ o(k, {})
+    })]
+  });
+}, me = L(J);
+export {
+  me as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/CashflowHeading/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/CashflowHeading.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { isAfter } from 'date-fns/isAfter'\nimport { isBefore } from 'date-fns/isBefore'\nimport { isToday } from 'date-fns/isToday'\n\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  InformationTooltip,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { type Recurrence } from '../../core'\n\nimport { ManageIncome } from '../../recurringtransactions'\n\nimport CashflowAmountHeading from './CashflowAmountHeading'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\n// This filter only includes activities that have an account guid that matches an account guid\n// in the given list of accountGuids and is within the given date range\nconst recurrenceAccountFilter =\n  (accountGuids: string[], dateRange: { start: Date; end: Date }) => (r: Recurrence) =>\n    r.accountGuid &&\n    accountGuids.includes(r.accountGuid) &&\n    (isToday(r.expectedDate) || isAfter(r.expectedDate, dateRange.start)) &&\n    isBefore(r.expectedDate, dateRange.end)\n\nconst CashflowHeading: React.FC = () => {\n  const { availableWidth } = useWidgetContainerProvider()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  const { isDataLoaded } = useRecurringTransactionsStore()\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const {\n    dateRange,\n    income,\n    selectedCashAccounts,\n    selectedCashBalance,\n    upcomingExpenses,\n    upcomingIncome,\n  } = useCashflowUiStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  // Plain derivations: observer tracks the observable reads, so no useMemo is\n  // needed. The account-scoped balance is a store computed (selectedCashBalance).\n  const filteredExpenses = upcomingExpenses.filter(\n    recurrenceAccountFilter(selectedAccountGuids, dateRange),\n  )\n\n  const filteredIncome = upcomingIncome.filter(\n    recurrenceAccountFilter(selectedAccountGuids, dateRange),\n  )\n\n  const cashBalance = selectedCashBalance\n\n  const totalUpcomingExpenses = filteredExpenses.reduce((acc, curr) => acc + curr.amount, 0)\n  const totalUpcomingIncome = filteredIncome.reduce((acc, curr) => acc + curr.amount, 0)\n  const availableToSpend = cashBalance - totalUpcomingExpenses + totalUpcomingIncome\n\n  const hasRecurringIncome = isDataLoaded && income.length > 0\n  const isMobile = availableWidth < 725\n\n  return (\n    <Stack sx={{ mx: isMobile ? 16 : 0, my: isMobile ? 24 : 42 }}>\n      <Stack\n        border={isMobile ? '1px solid' : 'none'}\n        borderColor=\"neutral.light\"\n        borderRadius={2}\n        flexDirection={isMobile ? 'column' : 'row'}\n        gap={isMobile ? 0 : 24}\n        justifyContent=\"center\"\n      >\n        <CashflowAmountHeading\n          amount={cashBalance}\n          isMobile={isMobile}\n          label={buildDynamicCopy(customCopy.cash_and_bank, selectedCashAccounts.length) as string}\n        />\n\n        {isMobile && <Divider />}\n        {hasRecurringIncome ? (\n          <>\n            {!isMobile && <Text sx={{ fontSize: 25, lineHeight: 1 }}>+</Text>}\n            <CashflowAmountHeading\n              amount={totalUpcomingIncome}\n              isMobile={isMobile}\n              label={customCopy.to_be_received}\n              symbol={isMobile ? '+' : undefined}\n            />\n          </>\n        ) : (\n          <Button\n            onClick={() => setIsOpen(true)}\n            startIcon={<Icon name=\"add\" />}\n            sx={{ fontSize: 13 }}\n          >\n            {customCopy.add_income}\n          </Button>\n        )}\n\n        {isMobile ? <Divider /> : <Text sx={{ fontSize: 25, lineHeight: 1 }}>-</Text>}\n\n        <CashflowAmountHeading\n          amount={totalUpcomingExpenses}\n          isMobile={isMobile}\n          label={buildDynamicCopy(customCopy.to_be_paid_out, filteredExpenses.length) as string}\n          symbol={isMobile ? '-' : undefined}\n        />\n\n        {isMobile ? <Divider /> : <Text sx={{ fontSize: 25, lineHeight: 1 }}>=</Text>}\n\n        <CashflowAmountHeading\n          amount={availableToSpend}\n          isMobile={isMobile}\n          isTotal={isMobile}\n          label={customCopy.remaining_cash}\n          tooltip={\n            <InformationTooltip\n              body={customCopy.remaining_income_tooltip_body}\n              title={customCopy.remaining_income_tooltip_title}\n            />\n          }\n        />\n      </Stack>\n\n      <Drawer\n        ariaLabelClose={customCopy.close_manage_income_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        shouldShowHeaderBorders={false}\n        title={customCopy.manage_income}\n      >\n        <ManageIncome />\n      </Drawer>\n    </Stack>\n  )\n}\n\nexport default observer(CashflowHeading)\n"],"mappings":"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"}

package/dist/cashflow/components/CashflowWidgetContent/index.es.js

@@ -0,0 +1,167 @@
+import { buildDynamicCopy as i } from "../../../core/utils/Localization/index.es.js";
+import { useGlobalCopyStore as _, useGlobalUiStore as S, useRecurringTransactionsStore as T, useWidgetContainerProvider as j } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as R } from "../../../common/hooks/useScreenSize/index.es.js";
+import I from "../../../common/components/Loader/index.es.js";
+import k from "../../../common/components/InformationTooltip/index.es.js";
+import { CurrencyText as n } from "../../../common/components/CurrencyText/index.es.js";
+import { useCashflowUiStore as B } from "../../context/hooks/index.es.js";
+import G from "../RemainingCash/index.es.js";
+import { observer as L } from "mobx-react-lite";
+import t from "@mui/material/Stack";
+import { Icon as v, P as c, Text as a } from "@mxenabled/mxui";
+import { Fragment as W, jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import N from "@mui/material/Box";
+import m from "@mui/material/Divider";
+var U = () => {
+  const d = D(), { availableWidth: w } = j(), { isMobile: x } = R(), { selectedAccountGuids: y } = S(), { cashflow: o } = _(), { daysUntilNextIncome: u, expensesTilNextIncome: l, selectedCashAccounts: b, selectedCashBalance: p } = B(), { isDataLoaded: g } = T(), s = l.filter((h) => y.includes(h.accountGuid || "")).reduce((h, C) => h + C.amount, 0), f = p - s;
+  return g ? /* @__PURE__ */ e(N, {
+    className: "mx-cashflow",
+    pl: 16,
+    pr: 16,
+    pt: 16,
+    children: w > 710 ? /* @__PURE__ */ r(t, {
+      border: `1px solid ${d.palette.divider}`,
+      borderRadius: 1,
+      direction: "row",
+      justifyContent: "space-between",
+      px: 24,
+      children: [
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: p,
+            variant: "h2"
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: i(o.total_cash_accounts, b.length)
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          pt: 18,
+          children: /* @__PURE__ */ e(v, { name: "remove" })
+        }),
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: s,
+            variant: "h2"
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: i(o.expenses_due, l.length)
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          pt: 18,
+          children: /* @__PURE__ */ e(v, { name: "equal" })
+        }),
+        /* @__PURE__ */ r(t, {
+          pb: 14,
+          pr: 24,
+          pt: 12,
+          children: [/* @__PURE__ */ e(n, {
+            amount: f,
+            variant: "h2"
+          }), /* @__PURE__ */ r(t, {
+            alignItems: "center",
+            direction: "row",
+            gap: 8,
+            children: [/* @__PURE__ */ e(c, {
+              variant: "caption",
+              whiteSpace: "nowrap",
+              children: o.available_to_spend
+            }), /* @__PURE__ */ e(k, {
+              body: o.tooltip_body,
+              title: o.tooltip_title
+            })]
+          })]
+        }),
+        /* @__PURE__ */ e(t, {
+          borderLeft: `1px solid ${d.palette.divider}`,
+          pb: 12,
+          pl: 24,
+          pt: 12,
+          children: /* @__PURE__ */ r(W, { children: [/* @__PURE__ */ e(a, {
+            variant: "h2",
+            children: i(o.days, u)
+          }), /* @__PURE__ */ e(c, {
+            variant: "caption",
+            whiteSpace: "nowrap",
+            children: o.next_paycheck
+          })] })
+        })
+      ]
+    }) : /* @__PURE__ */ r(t, {
+      border: `1px solid ${d.palette.divider}`,
+      borderRadius: 1,
+      children: [
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: i(o.total_cash_accounts, b.length)
+          }), /* @__PURE__ */ e(n, {
+            amount: p,
+            bold: !0,
+            variant: "caption"
+          })]
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: i(o.expenses_due, l.length)
+          }), /* @__PURE__ */ e(n, {
+            amount: s,
+            bold: !0,
+            symbol: "-",
+            variant: "caption"
+          })]
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ e(t, {
+          alignItems: "center",
+          bgcolor: "background.default",
+          direction: "row",
+          gap: 8,
+          height: 48,
+          justifyContent: "space-between",
+          px: 16,
+          sx: {
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4
+          },
+          children: /* @__PURE__ */ e(G, { remaining: f })
+        }),
+        /* @__PURE__ */ e(m, {}),
+        /* @__PURE__ */ r(t, {
+          direction: "row",
+          justifyContent: "space-between",
+          p: 16,
+          children: [/* @__PURE__ */ e(a, {
+            variant: "body2",
+            children: o.next_paycheck
+          }), /* @__PURE__ */ e(a, {
+            bold: !0,
+            variant: "caption",
+            children: i(o.days, u)
+          })]
+        })
+      ]
+    })
+  }) : /* @__PURE__ */ e(I, { height: x ? 210 : 120 });
+}, Y = L(U);
+export {
+  Y as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/CashflowWidgetContent/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/CashflowWidgetContent.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, P, Text } from '@mxenabled/mxui'\n\nimport {\n  InformationTooltip,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useWidgetContainerProvider,\n} from '../../common'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { CurrencyText } from '../../common'\nimport RemainingCash from './RemainingCash'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nconst CashflowWidgetContent = () => {\n  const theme = useTheme()\n  const { availableWidth } = useWidgetContainerProvider()\n  const { isMobile } = useScreenSize()\n\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const { daysUntilNextIncome, expensesTilNextIncome, selectedCashAccounts, selectedCashBalance } =\n    useCashflowUiStore()\n  const { isDataLoaded } = useRecurringTransactionsStore()\n\n  // Plain derivations: observer tracks the observable reads and re-renders\n  // correctly even when arrays are mutated in place by MobX. The account-scoped\n  // balance is a store computed (selectedCashBalance).\n  const filteredExpenseTotal = expensesTilNextIncome\n    .filter((expense) => selectedAccountGuids.includes(expense.accountGuid || ''))\n    .reduce((acc, curr) => acc + curr.amount, 0)\n\n  const availableToSpend = selectedCashBalance - filteredExpenseTotal\n\n  if (!isDataLoaded) {\n    return <Loader height={isMobile ? 210 : 120} />\n  }\n\n  return (\n    <Box className=\"mx-cashflow\" pl={16} pr={16} pt={16}>\n      {availableWidth > 710 ? (\n        <Stack\n          border={`1px solid ${theme.palette.divider}`}\n          borderRadius={1}\n          direction=\"row\"\n          justifyContent=\"space-between\"\n          px={24}\n        >\n          <Stack pb={14} pt={12}>\n            <CurrencyText amount={selectedCashBalance} variant=\"h2\" />\n            <P variant=\"caption\" whiteSpace=\"nowrap\">\n              {\n                buildDynamicCopy(\n                  customCopy.total_cash_accounts,\n                  selectedCashAccounts.length,\n                ) as string\n              }\n            </P>\n          </Stack>\n\n          <Stack pt={18}>\n            <Icon name=\"remove\" />\n          </Stack>\n\n          <Stack pb={14} pt={12}>\n            <CurrencyText amount={filteredExpenseTotal} variant=\"h2\" />\n            <P variant=\"caption\" whiteSpace=\"nowrap\">\n              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}\n            </P>\n          </Stack>\n\n          <Stack pt={18}>\n            <Icon name=\"equal\" />\n          </Stack>\n\n          <Stack pb={14} pr={24} pt={12}>\n            <CurrencyText amount={availableToSpend} variant=\"h2\" />\n            <Stack alignItems=\"center\" direction=\"row\" gap={8}>\n              <P variant=\"caption\" whiteSpace=\"nowrap\">\n                {customCopy.available_to_spend}\n              </P>\n              <InformationTooltip body={customCopy.tooltip_body} title={customCopy.tooltip_title} />\n            </Stack>\n          </Stack>\n\n          <Stack borderLeft={`1px solid ${theme.palette.divider}`} pb={12} pl={24} pt={12}>\n            <>\n              <Text variant=\"h2\">\n                {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}\n              </Text>\n              <P variant=\"caption\" whiteSpace=\"nowrap\">\n                {customCopy.next_paycheck}\n              </P>\n            </>\n          </Stack>\n        </Stack>\n      ) : (\n        <Stack border={`1px solid ${theme.palette.divider}`} borderRadius={1}>\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  customCopy.total_cash_accounts,\n                  selectedCashAccounts.length,\n                ) as string\n              }\n            </Text>\n            <CurrencyText amount={selectedCashBalance} bold={true} variant=\"caption\" />\n          </Stack>\n\n          <Divider />\n\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">\n              {buildDynamicCopy(customCopy.expenses_due, expensesTilNextIncome.length) as string}\n            </Text>\n            <CurrencyText amount={filteredExpenseTotal} bold={true} symbol=\"-\" variant=\"caption\" />\n          </Stack>\n\n          <Divider />\n\n          <Stack\n            alignItems=\"center\"\n            bgcolor=\"background.default\"\n            direction=\"row\"\n            gap={8}\n            height={48}\n            justifyContent=\"space-between\"\n            px={16}\n            sx={{ borderBottomLeftRadius: 4, borderBottomRightRadius: 4 }}\n          >\n            <RemainingCash remaining={availableToSpend} />\n          </Stack>\n          <Divider />\n          <Stack direction=\"row\" justifyContent=\"space-between\" p={16}>\n            <Text variant=\"body2\">{customCopy.next_paycheck}</Text>\n            <Text bold={true} variant=\"caption\">\n              {buildDynamicCopy(customCopy.days, daysUntilNextIncome) as string}\n            </Text>\n          </Stack>\n        </Stack>\n      )}\n    </Box>\n  )\n}\n\nexport default observer(CashflowWidgetContent)\n"],"mappings":"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"}

package/dist/cashflow/components/DetailsExpenseHeader/index.es.js

@@ -0,0 +1,37 @@
+import { useGlobalCopyStore as n } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as p } from "../../../core/utils/NumberFormatting/index.es.js";
+import { ExpenseType as t } from "../DetailsExpenseRow/index.es.js";
+import "react";
+import { observer as a } from "mobx-react-lite";
+import { Text as i } from "@mxenabled/mxui";
+import { Fragment as l, jsx as s, jsxs as e } from "react/jsx-runtime";
+import f from "@mui/material/Divider";
+import d from "@mui/material/ListSubheader";
+var c = ({ total: m, type: r }) => {
+  const { cashflow: o } = n();
+  return /* @__PURE__ */ e(l, { children: [/* @__PURE__ */ e(d, {
+    sx: {
+      alignItems: "center",
+      backgroundColor: "background.highlight",
+      display: "flex",
+      justifyContent: "space-between",
+      pb: 4,
+      pt: 12,
+      px: 24
+    },
+    children: [/* @__PURE__ */ s(i, {
+      bold: !0,
+      sx: { fontSize: 12 },
+      children: r === t.EXPENSE ? o.expenses : o.income
+    }), /* @__PURE__ */ e(i, {
+      bold: !0,
+      sx: { fontSize: 13 },
+      children: [r === t.EXPENSE ? "-" : "+", p(m, "0,0.00")]
+    })]
+  }), /* @__PURE__ */ s(f, {})] });
+}, j = a(c);
+export {
+  j as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/DetailsExpenseHeader/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/DetailsExpenseHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport ListSubheader from '@mui/material/ListSubheader'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { ExpenseType } from './DetailsExpenseRow'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DetailsExpenseHeaderProps {\n  total: number\n  type: ExpenseType\n}\n\nconst DetailsExpenseHeader: React.FC<DetailsExpenseHeaderProps> = ({ total, type }) => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  return (\n    <>\n      <ListSubheader\n        sx={{\n          alignItems: 'center',\n          backgroundColor: 'background.highlight',\n          display: 'flex',\n          justifyContent: 'space-between',\n          pb: 4,\n          pt: 12,\n          px: 24,\n        }}\n      >\n        <Text bold={true} sx={{ fontSize: 12 }}>\n          {type === ExpenseType.EXPENSE ? customCopy.expenses : customCopy.income}\n        </Text>\n        <Text bold={true} sx={{ fontSize: 13 }}>\n          {type === ExpenseType.EXPENSE ? '-' : '+'}\n          {formatCurrency(total, '0,0.00')}\n        </Text>\n      </ListSubheader>\n      <Divider />\n    </>\n  )\n}\n\nexport default observer(DetailsExpenseHeader)\n"],"mappings":";;;;;;;;;AAiBA,IAAM,IAAA,CAA6D,EAAE,OAAA,GAAO,MAAA,EAAA,MAAW;AACrF,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB;AAEpD,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,cATF,CAWE,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,gBAClC,MAAS,EAAY,UAAU,EAAW,WAAW,EAAW;AAAA,IAC7D,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,gBAArC,CACG,MAAS,EAAY,UAAU,MAAM,KACrC,EAAe,GAAO,QAAQ,CAC3B;AAAA,MACO;AAAA,MACf,gBAAA,EAAC,GAAD,CAAU,CAAA,CACV,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAoB"}

package/dist/cashflow/components/DetailsExpenseRow/index.es.js

@@ -0,0 +1,57 @@
+import { DATE_FORMATS_INTL as i, formatDate as m } from "../../../core/constants/DateFormats/index.es.js";
+import { CurrencyText as n } from "../../../common/components/CurrencyText/index.es.js";
+import "react";
+import { observer as a } from "mobx-react-lite";
+import f from "@mui/material/Stack";
+import { Text as r } from "@mxenabled/mxui";
+import { Fragment as l, jsx as e, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/material/Divider";
+import x from "@mui/material/ListItem";
+var T = /* @__PURE__ */ (function(t) {
+  return t.EXPENSE = "expense", t.INCOME = "income", t;
+})({}), p = ({ recurrence: t }) => /* @__PURE__ */ o(l, { children: [/* @__PURE__ */ o(x, {
+  sx: {
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    px: 24,
+    py: 12
+  },
+  children: [
+    /* @__PURE__ */ o(f, {
+      alignItems: "center",
+      height: 32,
+      width: 32,
+      children: [/* @__PURE__ */ e(r, {
+        bold: !0,
+        sx: { fontSize: 11 },
+        children: m(t.expectedDate, i.MONTH)
+      }), /* @__PURE__ */ e(r, {
+        bold: !0,
+        sx: { fontSize: 11 },
+        children: m(t.expectedDate, i.DAY)
+      })]
+    }),
+    /* @__PURE__ */ e(r, {
+      sx: {
+        flexGrow: 1,
+        fontSize: 13
+      },
+      children: t.name
+    }),
+    /* @__PURE__ */ e(n, {
+      amount: t.amount,
+      bold: !0,
+      sx: {
+        textAlign: "right",
+        fontSize: 13
+      }
+    })
+  ]
+}), /* @__PURE__ */ e(s, {})] }), b = a(p);
+export {
+  T as ExpenseType,
+  b as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/DetailsExpenseRow/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/DetailsExpenseRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Recurrence } from '../../core'\nimport { CurrencyText } from '../../common'\n\nexport enum ExpenseType {\n  EXPENSE = 'expense',\n  INCOME = 'income',\n}\n\ninterface DetailsExpenseRowType {\n  recurrence: Recurrence\n}\n\nconst DetailsExpenseRow: React.FC<DetailsExpenseRowType> = ({ recurrence }) => {\n  return (\n    <>\n      <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 16, px: 24, py: 12 }}>\n        <Stack alignItems=\"center\" height={32} width={32}>\n          <Text bold={true} sx={{ fontSize: 11 }}>\n            {formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.MONTH)}\n          </Text>\n          <Text bold={true} sx={{ fontSize: 11 }}>\n            {formatDate(recurrence.expectedDate, DATE_FORMATS_INTL.DAY)}\n          </Text>\n        </Stack>\n        <Text sx={{ flexGrow: 1, fontSize: 13 }}>{recurrence.name}</Text>\n        <CurrencyText\n          amount={recurrence.amount}\n          bold={true}\n          sx={{ textAlign: 'right', fontSize: 13 }}\n        />\n      </ListItem>\n      <Divider />\n    </>\n  )\n}\n\nexport default observer(DetailsExpenseRow)\n"],"mappings":";;;;;;;;;AAaA,IAAY,IAAL,0BAAA,GAAA;AACL,SAAA,EAAA,UAAA,WACA,EAAA,SAAA;AACF,GAAA,CAAA,CAAA,GAMM,IAAA,CAAsD,EAAE,YAAA,EAAA,MAE1D,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,EAAU,IAAI;AAAA,IAAE,SAAS;AAAA,IAAQ,YAAY;AAAA,IAAU,KAAK;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,YAA/E;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAO,YAAW;AAAA,MAAS,QAAQ;AAAA,MAAI,OAAO;AAAA,gBAA9C,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI,EAAE,UAAU,GAAG;AAAA,kBAClC,EAAW,EAAW,cAAc,EAAkB,KAAK;AAAA,MACxD,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,IAAI,EAAE,UAAU,GAAG;AAAA,kBAClC,EAAW,EAAW,cAAc,EAAkB,GAAG;AAAA,MACtD,CAAA,CACD;AAAA;IACP,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,gBAAI,EAAW;AAAA,IAAW,CAAA;AAAA,IAChE,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAW;AAAA,MACnB,MAAM;AAAA,MACN,IAAI;AAAA,QAAE,WAAW;AAAA,QAAS,UAAU;AAAA,MAAG;AAAA,IACxC,CAAA;AAAA,EACO;IACV,gBAAA,EAAC,GAAD,CAAU,CAAA,CACV,EAAA,CAAA,GAIN,IAAe,EAAS,CAAiB"}

package/dist/cashflow/components/DetailsFooter/index.es.js

@@ -0,0 +1,21 @@
+import r from "../RemainingCash/index.es.js";
+import { jsx as t } from "react/jsx-runtime";
+import i from "@mui/material/ListItem";
+var m = ({ remaining: o }) => /* @__PURE__ */ t(i, {
+  sx: {
+    alignItems: "center",
+    backgroundColor: "background.highlight",
+    display: "flex",
+    gap: 12,
+    padding: "12px 24px",
+    borderBottomLeftRadius: "3px",
+    borderBottomRightRadius: "3px",
+    minHeight: "auto"
+  },
+  children: /* @__PURE__ */ t(r, { remaining: o })
+});
+export {
+  m as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/DetailsFooter/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/DetailsFooter.tsx"],"sourcesContent":["import ListItem from '@mui/material/ListItem'\n\nimport RemainingCash from './RemainingCash'\n\ninterface DetailsFooterProps {\n  remaining: number\n}\n\nconst DetailsFooter = ({ remaining }: DetailsFooterProps) => {\n  return (\n    <ListItem\n      sx={{\n        alignItems: 'center',\n        backgroundColor: 'background.highlight',\n        display: 'flex',\n        gap: 12,\n        padding: '12px 24px',\n        borderBottomLeftRadius: '3px',\n        borderBottomRightRadius: '3px',\n        minHeight: 'auto',\n      }}\n    >\n      <RemainingCash remaining={remaining} />\n    </ListItem>\n  )\n}\n\nexport default DetailsFooter\n"],"mappings":";;;AAQA,IAAM,IAAA,CAAiB,EAAE,WAAA,EAAA,MAErB,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,KAAK;AAAA,IACL,SAAS;AAAA,IACT,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,IACzB,WAAW;AAAA,EACb;AAAA,YAEA,gBAAA,EAAC,GAAD,EAA0B,WAAA,EAAY,CAAA;AAC9B,CAAA"}

package/dist/cashflow/components/DetailsTab/index.es.js

@@ -0,0 +1,90 @@
+import { DATE_FORMATS_INTL as p, formatDate as u } from "../../../core/constants/DateFormats/index.es.js";
+import { useAppConfig as L, useGlobalCopyStore as S, useWidgetContainerProvider as I } from "../../../common/context/hooks/index.es.js";
+import { getAccountStartingBalance as F } from "../../../core/utils/AccountUtils/index.es.js";
+import N from "../../../accounts/components/AccountListItem/index.es.js";
+import { useCashflowUiStore as R } from "../../context/hooks/index.es.js";
+import j from "../DetailsFooter/index.es.js";
+import f, { ExpenseType as b } from "../DetailsExpenseRow/index.es.js";
+import h from "../DetailsExpenseHeader/index.es.js";
+import { recurrenceFilter as x } from "../../util/Filters/index.es.js";
+import { observer as B } from "mobx-react-lite";
+import m from "@mui/material/Stack";
+import { Text as g } from "@mxenabled/mxui";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { getUnixTime as T } from "date-fns/getUnixTime";
+import G from "@mui/material/Divider";
+import l from "@mui/material/List";
+import _ from "@mui/material/ListItem";
+var M = () => {
+  const { availableWidth: D } = I(), { cashflow: A } = S(), { config: { display_available_balance_in_accounts: E } } = L(), { dateRange: i, selectedCashAccounts: y, upcomingExpenses: C, upcomingIncome: v } = R();
+  return /* @__PURE__ */ n(m, { children: [/* @__PURE__ */ n(m, {
+    direction: D < 400 ? "column" : "row",
+    justifyContent: "space-between",
+    children: [/* @__PURE__ */ e(g, {
+      bold: !0,
+      sx: {
+        fontSize: 15,
+        mb: 12
+      },
+      children: A.accounts_breakdown
+    }), /* @__PURE__ */ n(g, {
+      bold: !0,
+      sx: {
+        fontSize: 15,
+        mb: 12
+      },
+      children: [
+        u(i.start, p.FULL_MONTH_DAY),
+        " -",
+        " ",
+        u(i.end, p.FULL_MONTH_DAY)
+      ]
+    })]
+  }), /* @__PURE__ */ e(m, { children: y.map((r) => {
+    const a = v.filter(x(r, i)).sort((t, o) => T(t.expectedDate) - T(o.expectedDate)), s = C.filter(x(r, i)), c = a.reduce((t, o) => t + o.amount, 0), d = s.reduce((t, o) => t + o.amount, 0), w = F(r, E) + c - d;
+    return /* @__PURE__ */ n(l, {
+      sx: {
+        border: "1px solid",
+        borderColor: "neutral.light",
+        mb: 24,
+        borderRadius: 1
+      },
+      children: [
+        /* @__PURE__ */ e(N, {
+          account: r,
+          listItemProps: {
+            disableGutters: !1,
+            disablePadding: !1,
+            sx: {
+              borderTopRadius: 1,
+              pr: 24
+            }
+          }
+        }),
+        /* @__PURE__ */ e(G, {}),
+        a.length > 0 && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(l, {
+          subheader: /* @__PURE__ */ e(h, {
+            total: c,
+            type: b.INCOME
+          }),
+          sx: { width: "100%" },
+          children: a.map((t) => /* @__PURE__ */ e(f, { recurrence: t }, t.repeatingTransactionGuid))
+        }) }),
+        s.length > 0 && /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(l, {
+          subheader: /* @__PURE__ */ e(h, {
+            total: d,
+            type: b.EXPENSE
+          }),
+          sx: { width: "100%" },
+          children: s.map((t) => /* @__PURE__ */ e(f, { recurrence: t }, t.repeatingTransactionGuid))
+        }) }),
+        /* @__PURE__ */ e(j, { remaining: w })
+      ]
+    }, r.guid);
+  }) })] });
+}, te = B(M);
+export {
+  te as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/DetailsTab/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/DetailsTab.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport AccountListItem from '../../accounts/components/AccountListItem'\nimport DetailsFooter from './DetailsFooter'\nimport DetailsExpenseRow, { ExpenseType } from './DetailsExpenseRow'\nimport DetailsExpenseHeader from './DetailsExpenseHeader'\n\nimport { useAppConfig, useGlobalCopyStore, useWidgetContainerProvider } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport { type Account, type Recurrence } from '../../core'\nimport { useCashflowUiStore } from '../context/hooks'\nimport { recurrenceFilter } from '../util/Filters'\nimport { getAccountStartingBalance } from '../../core/utils/AccountUtils'\n\nconst DetailsTab = () => {\n  const { availableWidth } = useWidgetContainerProvider()\n  const { cashflow: customCopy } = useGlobalCopyStore()\n  const {\n    config: { display_available_balance_in_accounts: useAvailable },\n  } = useAppConfig()\n  const { dateRange, selectedCashAccounts, upcomingExpenses, upcomingIncome } = useCashflowUiStore()\n\n  return (\n    <Stack>\n      <Stack direction={availableWidth < 400 ? 'column' : 'row'} justifyContent=\"space-between\">\n        <Text bold={true} sx={{ fontSize: 15, mb: 12 }}>\n          {customCopy.accounts_breakdown}\n        </Text>\n        <Text bold={true} sx={{ fontSize: 15, mb: 12 }}>\n          {formatDate(dateRange.start, DATE_FORMATS_INTL.FULL_MONTH_DAY)} -{' '}\n          {formatDate(dateRange.end, DATE_FORMATS_INTL.FULL_MONTH_DAY)}\n        </Text>\n      </Stack>\n\n      <Stack>\n        {selectedCashAccounts.map((account: Account) => {\n          const upcomingIncomeByAccount = upcomingIncome\n            .filter(recurrenceFilter(account, dateRange))\n            .sort((a, b) => getUnixTime(a.expectedDate) - getUnixTime(b.expectedDate))\n\n          const projectedExpensesByAccount = upcomingExpenses.filter(\n            recurrenceFilter(account, dateRange),\n          )\n\n          const incomeTotal = upcomingIncomeByAccount.reduce(\n            (acc: number, curr: Recurrence) => acc + curr.amount,\n            0,\n          )\n          const expenseTotal = projectedExpensesByAccount.reduce(\n            (acc, curr) => acc + curr.amount,\n            0,\n          )\n\n          const remainingBalance =\n            getAccountStartingBalance(account, useAvailable) + incomeTotal - expenseTotal\n\n          return (\n            <List\n              key={account.guid}\n              sx={{\n                border: '1px solid',\n                borderColor: 'neutral.light',\n                mb: 24,\n                borderRadius: 1,\n              }}\n            >\n              <AccountListItem\n                account={account}\n                listItemProps={{\n                  disableGutters: false,\n                  disablePadding: false,\n                  sx: { borderTopRadius: 1, pr: 24 },\n                }}\n              />\n              <Divider />\n              {/* Income */}\n              {upcomingIncomeByAccount.length > 0 && (\n                <ListItem>\n                  <List\n                    subheader={\n                      <DetailsExpenseHeader total={incomeTotal} type={ExpenseType.INCOME} />\n                    }\n                    sx={{ width: '100%' }}\n                  >\n                    {upcomingIncomeByAccount.map((r) => (\n                      <DetailsExpenseRow key={r.repeatingTransactionGuid} recurrence={r} />\n                    ))}\n                  </List>\n                </ListItem>\n              )}\n              {/* Expenses */}\n              {projectedExpensesByAccount.length > 0 && (\n                <ListItem>\n                  <List\n                    subheader={\n                      <DetailsExpenseHeader total={expenseTotal} type={ExpenseType.EXPENSE} />\n                    }\n                    sx={{ width: '100%' }}\n                  >\n                    {projectedExpensesByAccount.map((r) => (\n                      <DetailsExpenseRow key={r.repeatingTransactionGuid} recurrence={r} />\n                    ))}\n                  </List>\n                </ListItem>\n              )}\n              {/* Bottom row total */}\n              <DetailsFooter remaining={remainingBalance} />\n            </List>\n          )\n        })}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default observer(DetailsTab)\n"],"mappings":"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"}

package/dist/cashflow/components/RemainingCash/index.es.js

@@ -0,0 +1,35 @@
+import { useGlobalCopyStore as t } from "../../../common/context/hooks/index.es.js";
+import { CurrencyText as i } from "../../../common/components/CurrencyText/index.es.js";
+import { observer as n } from "mobx-react-lite";
+import { Text as a } from "@mxenabled/mxui";
+import { Fragment as s, jsx as o, jsxs as m } from "react/jsx-runtime";
+import u from "@mui/material/Box";
+var f = ({ remaining: r }) => {
+  const { cashflow: e } = t();
+  return /* @__PURE__ */ m(s, { children: [
+    /* @__PURE__ */ o(u, { sx: {
+      borderRadius: "1px",
+      backgroundColor: r < 0 ? "error.main" : r > 0 ? "success.main" : "warning.main",
+      height: 6,
+      width: 6
+    } }),
+    /* @__PURE__ */ o(a, {
+      bold: !0,
+      sx: {
+        flexGrow: 1,
+        fontSize: 12
+      },
+      children: e.remaining_cash
+    }),
+    /* @__PURE__ */ o(i, {
+      amount: r,
+      bold: !0,
+      sx: { fontSize: 12 }
+    })
+  ] });
+}, g = n(f);
+export {
+  g as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/cashflow/components/RemainingCash/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../src/cashflow/components/RemainingCash.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\nimport { CurrencyText } from '../../common'\n\ninterface RemainingCashProps {\n  remaining: number\n}\n\nconst RemainingCash = ({ remaining }: RemainingCashProps) => {\n  const { cashflow: customCopy } = useGlobalCopyStore()\n\n  const getRemainingCashColor = () => {\n    if (remaining < 0) {\n      return 'error.main'\n    }\n    if (remaining > 0) {\n      return 'success.main'\n    }\n    return 'warning.main'\n  }\n\n  return (\n    <>\n      <Box\n        sx={{\n          borderRadius: '1px',\n          backgroundColor: getRemainingCashColor(),\n          height: 6,\n          width: 6,\n        }}\n      />\n      <Text bold={true} sx={{ flexGrow: 1, fontSize: 12 }}>\n        {customCopy.remaining_cash}\n      </Text>\n      <CurrencyText amount={remaining} bold={true} sx={{ fontSize: 12 }} />\n    </>\n  )\n}\n\nexport default observer(RemainingCash)\n"],"mappings":";;;;;;AAaA,IAAM,IAAA,CAAiB,EAAE,WAAA,EAAA,MAAoC;AAC3D,QAAM,EAAE,UAAU,EAAA,IAAe,EAAmB;AAYpD,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,MACF,cAAc;AAAA,MACd,iBAdF,IAAY,IACP,eAEL,IAAY,IACP,iBAEF;AAAA,MASD,QAAQ;AAAA,MACR,OAAO;AAAA,IACT,EACD,CAAA;AAAA,IACD,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,gBAC/C,EAAW;AAAA,IACR,CAAA;AAAA,IACN,gBAAA,EAAC,GAAD;AAAA,MAAc,QAAQ;AAAA,MAAW,MAAM;AAAA,MAAM,IAAI,EAAE,UAAU,GAAG;AAAA,IAAI,CAAA;AAAA,EACpE,EAAA,CAAA;AAEN,GAEA,IAAe,EAAS,CAAa"}