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

package/dist/budgets/BubbleBudgetsMiniWidget.es.js

@@ -4,97 +4,99 @@ import W from "../common/components/drawer/Drawer.es.js";
 import { ANALYTICS_EVENTS as w } from "../common/constants/Analytics.es.js";
 import { formatCurrency as O } from "../core/utils/NumberFormatting.es.js";
 import { getBudgetDifference as R } from "../core/utils/BudgetUtil.es.js";
-import I from "../common/components/MiniWidgetContainer.es.js";
-import j from "../common/components/Loader.es.js";
-import { AddBudgets as k } from "./components/AddBudgets.es.js";
-import { BubbleBudgets as G } from "./components/BubbleBudgets.es.js";
-import t from "react";
-import { observer as H } from "mobx-react-lite";
+import H from "../common/components/MiniWidgetContainer.es.js";
+import I from "../common/components/Loader.es.js";
+import { AddBudgets as j } from "./components/AddBudgets.es.js";
+import { BubbleBudgets as k } from "./components/BubbleBudgets.es.js";
+import o from "react";
+import { observer as G } from "mobx-react-lite";
 import N from "@mui/material/Stack";
 import { Text as h } from "@mxenabled/mxui";
 import { endOfMonth as U } from "date-fns/endOfMonth";
 import { startOfMonth as z } from "date-fns/startOfMonth";
-import { jsx as o, jsxs as f } from "react/jsx-runtime";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
 import { useTheme as K } from "@mui/material/styles";
 import P from "@mui/material/Box";
-var V = ({ budgetsCopy: n, difference: r, handleAddClick: u, shouldShowZeroState: a }) => {
-  const { availableHeight: e = 0 } = L(), s = t.useRef(null);
-  return t.useEffect(() => {
+var V = ({ budgetsCopy: n, difference: i, handleAddClick: l, shouldShowZeroState: a }) => {
+  const { availableHeight: e = 0 } = L(), s = o.useRef(null);
+  o.useEffect(() => {
     e > 0 && s.current === null && (s.current = e);
-  }, [e]), /* @__PURE__ */ f(N, {
+  }, [e]);
+  const u = o.useMemo(() => {
+    const t = s.current ?? e;
+    return t > 0 ? Math.round(Math.max(120, Math.min(450, t * 0.8))) - 40 : 450;
+  }, [e]);
+  return /* @__PURE__ */ f(N, {
     sx: {
       height: "100%",
       justifyContent: "space-between"
     },
-    children: [/* @__PURE__ */ o(G, {
-      createBudgetOnClick: u,
-      height: t.useMemo(() => {
-        const d = s.current ?? e;
-        return d > 0 ? Math.round(Math.max(120, Math.min(450, d * 0.8))) - 40 : 450;
-      }, [e]),
+    children: [/* @__PURE__ */ r(k, {
+      createBudgetOnClick: l,
+      height: u,
       isMiniWidget: !0,
       shouldShowZeroState: a
     }), !a && /* @__PURE__ */ f(P, {
       ml: 16,
-      children: [/* @__PURE__ */ o(h, {
+      children: [/* @__PURE__ */ r(h, {
         bold: !0,
-        color: r < 0 ? "error.main" : "success.main",
-        children: O(Math.abs(r), "0,0")
-      }), /* @__PURE__ */ o(h, { children: r < 0 ? n.overspent_in_budgets : n.left_in_budgets })]
+        color: i < 0 ? "error.main" : "success.main",
+        children: O(Math.abs(i), "0,0")
+      }), /* @__PURE__ */ r(h, { children: i < 0 ? n.overspent_in_budgets : n.left_in_budgets })]
     })]
   });
 }, Y = (n) => {
-  const r = K(), { onEvent: u } = v(), { detailedBudgets: a, isDataLoaded: e, loadBudgetData: s, setTheme: d } = D(), { budgets: i, common: p } = x(), { isInitialized: m, selectedAccounts: c } = E(), { loadDateRangeCategoryTotals: b, loadMonthlyCategoryTotals: B } = S(), C = R(a), [_, l] = t.useState(!1);
-  t.useEffect(() => {
+  const i = K(), { onEvent: l } = v(), { detailedBudgets: a, isDataLoaded: e, loadBudgetData: s, setTheme: u } = D(), { budgets: t, common: p } = x(), { isInitialized: c, selectedAccounts: m } = E(), { loadDateRangeCategoryTotals: b, loadMonthlyCategoryTotals: B } = S(), C = R(a), [_, d] = o.useState(!1);
+  o.useEffect(() => {
     e || s().finally();
-  }, []), t.useEffect(() => {
-    d(r);
-  }, [r]), t.useEffect(() => {
-    m && !e && (b(c, z(/* @__PURE__ */ new Date()), U(/* @__PURE__ */ new Date())).finally(), B(c).finally());
+  }, []), o.useEffect(() => {
+    u(i);
+  }, [i]), o.useEffect(() => {
+    c && !e && (b(m, z(/* @__PURE__ */ new Date()), U(/* @__PURE__ */ new Date())).finally(), B(m).finally());
   }, [
-    m,
     c,
+    m,
     e
   ]);
   const y = () => {
-    l(!0), u(w.BUDGETS_CLICK_ADD);
+    d(!0), l(w.BUDGETS_CLICK_ADD);
   }, M = () => {
-    l(!1);
-  }, A = () => l(!1);
+    d(!1);
+  }, A = () => d(!1);
   if (T({
     widgetName: "BubbleBudgetsMiniWidget",
     isLoaded: e
-  }), !m || !e) return /* @__PURE__ */ o(j, {});
+  }), !c || !e) return /* @__PURE__ */ r(I, {});
   const g = a.length === 0;
-  return /* @__PURE__ */ f(I, {
+  return /* @__PURE__ */ f(H, {
     contentStyles: {
       height: "calc(100% - 66px)",
       ":last-child": { pb: 0 }
     },
-    primaryCtaLabel: g ? i.get_started_cta : i.details_cta,
-    primaryCtaLabelAria: i.details_cta_aria,
+    primaryCtaLabel: g ? t.get_started_cta : t.details_cta,
+    primaryCtaLabelAria: t.details_cta_aria,
     sx: { height: "100%" },
-    title: i.budgets_title,
+    title: t.budgets_title,
     ...n,
-    children: [/* @__PURE__ */ o(V, {
-      budgetsCopy: i,
+    children: [/* @__PURE__ */ r(V, {
+      budgetsCopy: t,
       difference: C,
       handleAddClick: y,
       shouldShowZeroState: g
-    }), /* @__PURE__ */ o(W, {
+    }), /* @__PURE__ */ r(W, {
       ariaLabelClose: p.close_aria,
       isOpen: _,
-      onClose: () => l(!1),
-      title: i.add_new_title,
-      children: /* @__PURE__ */ o(k, {
+      onClose: () => d(!1),
+      title: t.add_new_title,
+      children: /* @__PURE__ */ r(j, {
         onAddBudget: M,
         onRecalculateBudgets: A
       })
     })]
   });
-}, ce = H(Y);
+}, me = G(Y);
 export {
-  ce as default
+  me as default
 };
 
 //# sourceMappingURL=BubbleBudgetsMiniWidget.es.js.map

package/dist/budgets/BubbleBudgetsMiniWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleBudgetsMiniWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  MiniWidgetContainer,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type BudgetsCopy, type MiniWidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { getBudgetDifference } from '../core/utils/BudgetUtil'\nimport { formatCurrency } from '../core/utils/NumberFormatting'\n\ninterface BubbleBudgetsContentProps {\n  budgetsCopy: BudgetsCopy\n  difference: number\n  handleAddClick: () => void\n  shouldShowZeroState: boolean\n}\n\nconst BubbleBudgetsContent: React.FC<BubbleBudgetsContentProps> = ({\n  budgetsCopy,\n  difference,\n  handleAddClick,\n  shouldShowZeroState,\n}) => {\n  const { availableHeight = 0 } = useWidgetContainerProvider()\n  const initialHeightRef = React.useRef<number | null>(null)\n\n  React.useEffect(() => {\n    if (availableHeight > 0 && initialHeightRef.current === null) {\n      initialHeightRef.current = availableHeight\n    }\n  }, [availableHeight])\n\n  const bubbleHeight = React.useMemo(() => {\n    const baseHeight = initialHeightRef.current ?? availableHeight\n\n    if (baseHeight > 0) return Math.round(Math.max(120, Math.min(450, baseHeight * 0.8))) - 40\n\n    return 450\n  }, [availableHeight])\n\n  return (\n    <Stack sx={{ height: '100%', justifyContent: 'space-between' }}>\n      <BubbleBudgets\n        createBudgetOnClick={handleAddClick}\n        height={bubbleHeight}\n        isMiniWidget={true}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      {!shouldShowZeroState && (\n        <Box ml={16}>\n          <Text bold={true} color={difference < 0 ? 'error.main' : 'success.main'}>\n            {formatCurrency(Math.abs(difference), '0,0')}\n          </Text>\n          <Text>\n            {difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets}\n          </Text>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n\nconst BubbleBudgetsMiniWidget = (props: MiniWidgetProps) => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { detailedBudgets: budgets, isDataLoaded, loadBudgetData, setTheme } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n  const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n  const difference = getBudgetDifference(budgets)\n\n  const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadBudgetData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    setTheme(theme)\n  }, [theme])\n\n  React.useEffect(() => {\n    if (isInitialized && !isDataLoaded) {\n      loadDateRangeCategoryTotals(\n        selectedAccounts,\n        startOfMonth(new Date()),\n        endOfMonth(new Date()),\n      ).finally()\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isInitialized, selectedAccounts, isDataLoaded])\n\n  const handleAddClick = () => {\n    setIsAddOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n  }\n\n  const handleBudgetAdded = () => {\n    setIsAddOpen(false)\n  }\n\n  const handleBudgetsRecalculated = () => setIsAddOpen(false)\n\n  useWidgetLoadTimer({\n    widgetName: 'BubbleBudgetsMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  if (!isInitialized || !isDataLoaded) return <Loader />\n\n  const shouldShowZeroState = budgets.length === 0\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 66px)', ':last-child': { pb: 0 } }}\n      primaryCtaLabel={shouldShowZeroState ? budgetsCopy.get_started_cta : budgetsCopy.details_cta}\n      primaryCtaLabelAria={budgetsCopy.details_cta_aria}\n      sx={{ height: '100%' }}\n      title={budgetsCopy.budgets_title}\n      {...props}\n    >\n      <BubbleBudgetsContent\n        budgetsCopy={budgetsCopy}\n        difference={difference}\n        handleAddClick={handleAddClick}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isAddOpen}\n        onClose={() => setIsAddOpen(false)}\n        title={budgetsCopy.add_new_title}\n      >\n        <AddBudgets\n          onAddBudget={handleBudgetAdded}\n          onRecalculateBudgets={handleBudgetsRecalculated}\n        />\n      </Drawer>\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(BubbleBudgetsMiniWidget)\n"],"mappings":"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"}
+{"version":3,"file":"BubbleBudgetsMiniWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsMiniWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  MiniWidgetContainer,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type BudgetsCopy, type MiniWidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { getBudgetDifference } from '../core/utils/BudgetUtil'\nimport { formatCurrency } from '../core/utils/NumberFormatting'\n\ninterface BubbleBudgetsContentProps {\n  budgetsCopy: BudgetsCopy\n  difference: number\n  handleAddClick: () => void\n  shouldShowZeroState: boolean\n}\n\nconst BubbleBudgetsContent: React.FC<BubbleBudgetsContentProps> = ({\n  budgetsCopy,\n  difference,\n  handleAddClick,\n  shouldShowZeroState,\n}) => {\n  const { availableHeight = 0 } = useWidgetContainerProvider()\n  const initialHeightRef = React.useRef<number | null>(null)\n\n  React.useEffect(() => {\n    if (availableHeight > 0 && initialHeightRef.current === null) {\n      initialHeightRef.current = availableHeight\n    }\n  }, [availableHeight])\n\n  const bubbleHeight = React.useMemo(() => {\n    const baseHeight = initialHeightRef.current ?? availableHeight\n\n    if (baseHeight > 0) return Math.round(Math.max(120, Math.min(450, baseHeight * 0.8))) - 40\n\n    return 450\n  }, [availableHeight])\n\n  return (\n    <Stack sx={{ height: '100%', justifyContent: 'space-between' }}>\n      <BubbleBudgets\n        createBudgetOnClick={handleAddClick}\n        height={bubbleHeight}\n        isMiniWidget={true}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      {!shouldShowZeroState && (\n        <Box ml={16}>\n          <Text bold={true} color={difference < 0 ? 'error.main' : 'success.main'}>\n            {formatCurrency(Math.abs(difference), '0,0')}\n          </Text>\n          <Text>\n            {difference < 0 ? budgetsCopy.overspent_in_budgets : budgetsCopy.left_in_budgets}\n          </Text>\n        </Box>\n      )}\n    </Stack>\n  )\n}\n\nconst BubbleBudgetsMiniWidget = (props: MiniWidgetProps) => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { detailedBudgets: budgets, isDataLoaded, loadBudgetData, setTheme } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isInitialized, selectedAccounts } = useGlobalUiStore()\n  const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n  const difference = getBudgetDifference(budgets)\n\n  const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    if (!isDataLoaded) {\n      loadBudgetData().finally()\n    }\n  }, [])\n\n  React.useEffect(() => {\n    setTheme(theme)\n  }, [theme])\n\n  React.useEffect(() => {\n    if (isInitialized && !isDataLoaded) {\n      loadDateRangeCategoryTotals(\n        selectedAccounts,\n        startOfMonth(new Date()),\n        endOfMonth(new Date()),\n      ).finally()\n      loadMonthlyCategoryTotals(selectedAccounts).finally()\n    }\n  }, [isInitialized, selectedAccounts, isDataLoaded])\n\n  const handleAddClick = () => {\n    setIsAddOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n  }\n\n  const handleBudgetAdded = () => {\n    setIsAddOpen(false)\n  }\n\n  const handleBudgetsRecalculated = () => setIsAddOpen(false)\n\n  useWidgetLoadTimer({\n    widgetName: 'BubbleBudgetsMiniWidget',\n    isLoaded: isDataLoaded,\n  })\n\n  if (!isInitialized || !isDataLoaded) return <Loader />\n\n  const shouldShowZeroState = budgets.length === 0\n\n  return (\n    <MiniWidgetContainer\n      contentStyles={{ height: 'calc(100% - 66px)', ':last-child': { pb: 0 } }}\n      primaryCtaLabel={shouldShowZeroState ? budgetsCopy.get_started_cta : budgetsCopy.details_cta}\n      primaryCtaLabelAria={budgetsCopy.details_cta_aria}\n      sx={{ height: '100%' }}\n      title={budgetsCopy.budgets_title}\n      {...props}\n    >\n      <BubbleBudgetsContent\n        budgetsCopy={budgetsCopy}\n        difference={difference}\n        handleAddClick={handleAddClick}\n        shouldShowZeroState={shouldShowZeroState}\n      />\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isAddOpen}\n        onClose={() => setIsAddOpen(false)}\n        title={budgetsCopy.add_new_title}\n      >\n        <AddBudgets\n          onAddBudget={handleBudgetAdded}\n          onRecalculateBudgets={handleBudgetsRecalculated}\n        />\n      </Drawer>\n    </MiniWidgetContainer>\n  )\n}\n\nexport default observer(BubbleBudgetsMiniWidget)\n"],"mappings":"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"}

package/dist/budgets/BubbleBudgetsWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleBudgetsWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isAfter } from 'date-fns/isAfter'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { DateRange } from '@mui/x-date-pickers-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  useAccountStore,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { WidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { BudgetDetailsDrawer } from './components/BudgetDetailsDrawer'\nimport { BudgetList } from './components/BudgetList'\nimport { Overview } from './components/Overview'\n\nconst BUDGET_LIST_WIDTH = 480\n\nexport const BubbleBudgetsWidget: React.FC<WidgetProps> = observer(\n  ({ onBackClick, onMenuClick, sx }) => {\n    const theme = useTheme()\n    const { onEvent } = useEvent()\n    const { visibleAccounts: accounts } = useAccountStore()\n    const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n    const { isInitialized, selectedAccounts, setDisplayedDate } = useGlobalUiStore()\n    const {\n      alert,\n      dateRange,\n      isDataLoaded,\n      loadBudgetData,\n      setDateRange,\n      setAlert,\n      setTheme,\n      detailedBudgets: budgets,\n    } = useBudgetsStore()\n    const { setDateRange: setRecurringDateRange } = useRecurringTransactionsStore()\n    const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n    const { isSmallTablet, isMobile, isSmallMobile } = useScreenSize()\n    const isColumnWidths = isSmallTablet || isMobile || isSmallMobile\n\n    const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n    useWidgetLoadTimer({\n      widgetName: 'BubbleBudgetsWidget',\n      isLoaded: isDataLoaded,\n    })\n\n    React.useEffect(() => {\n      setTheme(theme)\n      if (!isDataLoaded) {\n        loadBudgetData().finally(() => {\n          onEvent(ANALYTICS_EVENTS.BUDGETS_VIEW)\n        })\n      }\n    }, [])\n\n    React.useEffect(() => {\n      setDateRange({ start: startOfMonth(startOfToday()), end: endOfMonth(startOfToday()) })\n\n      return () => {\n        setDateRange({ start: startOfMonth(startOfToday()), end: endOfMonth(startOfToday()) })\n      }\n    }, [accounts])\n\n    React.useEffect(() => {\n      if (isInitialized) {\n        setDisplayedDate(dateRange.start, dateRange.end)\n        loadDateRangeCategoryTotals(selectedAccounts, dateRange.start, dateRange.end).finally()\n        loadMonthlyCategoryTotals(selectedAccounts).finally()\n        setRecurringDateRange(dateRange)\n      }\n    }, [isInitialized, selectedAccounts, dateRange])\n\n    const onMonthChanged = (dateRange: DateRange<Date>) => {\n      setDateRange({ start: dateRange[0] || new Date(), end: dateRange[1] || new Date() })\n    }\n\n    const handleAccountFilterClick = () => {\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_FILTER)\n    }\n\n    const handleAddClick = () => {\n      setIsAddOpen(true)\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n    }\n\n    const handleBudgetAdded = () => {\n      setIsAddOpen(false)\n    }\n\n    const handleBudgetsRecalculated = () => {\n      setIsAddOpen(false)\n    }\n\n    const shouldDisableNext = isAfter(dateRange.end, startOfMonth(new Date()))\n\n    if (!isInitialized || !isDataLoaded) return <Loader />\n\n    return (\n      <WidgetContainer\n        actions={[\n          {\n            iconName: 'add',\n            label: copy.add_title,\n            onClick: handleAddClick,\n          },\n        ]}\n        calendarActions={{\n          onRangeChanged: onMonthChanged,\n          shouldDisableNext,\n          shouldDisablePicker: true,\n        }}\n        hasDivider={true}\n        onAccountsFilterClick={handleAccountFilterClick}\n        onBackClick={onBackClick}\n        onMenuClick={onMenuClick}\n        sx={sx}\n        title={copy.budgets_title}\n      >\n        <Stack\n          direction={!isColumnWidths ? 'row' : 'column'}\n          height=\"100%\"\n          sx={{ justifyContent: 'center' }}\n          width=\"100%\"\n        >\n          <Stack height={!isColumnWidths ? 'calc(100dvh - 150px)' : 450}>\n            <BubbleBudgets\n              createBudgetOnClick={handleAddClick}\n              height={!isColumnWidths ? 800 : 450}\n              isDraggable={true}\n              shouldShowZeroState={budgets.length === 0}\n              unavailableWidth={!isColumnWidths ? BUDGET_LIST_WIDTH : 0}\n            />\n          </Stack>\n          {budgets.length !== 0 && (\n            <Stack\n              gap={24}\n              height=\"100%\"\n              sx={{ mr: 24, mt: 48 }}\n              width={!isColumnWidths ? BUDGET_LIST_WIDTH : '100%'}\n            >\n              <Overview />\n              <BudgetList />\n            </Stack>\n          )}\n        </Stack>\n\n        <BudgetDetailsDrawer />\n\n        <Drawer\n          ariaLabelClose={commonCopy.close_aria}\n          isOpen={isAddOpen}\n          onClose={() => setIsAddOpen(false)}\n          title={copy.add_new_title}\n        >\n          <AddBudgets\n            onAddBudget={handleBudgetAdded}\n            onRecalculateBudgets={handleBudgetsRecalculated}\n          />\n        </Drawer>\n\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={() => {\n            setAlert('')\n          }}\n          open={Boolean(alert)}\n        >\n          <Alert\n            closeText=\"\"\n            onClose={() => {\n              setAlert('')\n            }}\n            severity={'success'}\n            variant=\"filled\"\n          >\n            {alert}\n          </Alert>\n        </Snackbar>\n      </WidgetContainer>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"BubbleBudgetsWidget.es.js","names":[],"sources":["../../src/budgets/BubbleBudgetsWidget.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { isAfter } from 'date-fns/isAfter'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { startOfToday } from 'date-fns/startOfToday'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { DateRange } from '@mui/x-date-pickers-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  Loader,\n  useAccountStore,\n  useBudgetsStore,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n  useScreenSize,\n  useWidgetLoadTimer,\n  WidgetContainer,\n} from '../common'\nimport { WidgetProps } from '../core'\n\nimport { AddBudgets } from './components/AddBudgets'\nimport { BubbleBudgets } from './components/BubbleBudgets'\nimport { BudgetDetailsDrawer } from './components/BudgetDetailsDrawer'\nimport { BudgetList } from './components/BudgetList'\nimport { Overview } from './components/Overview'\n\nconst BUDGET_LIST_WIDTH = 480\n\nexport const BubbleBudgetsWidget: React.FC<WidgetProps> = observer(\n  ({ onBackClick, onMenuClick, sx }) => {\n    const theme = useTheme()\n    const { onEvent } = useEvent()\n    const { visibleAccounts: accounts } = useAccountStore()\n    const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n    const { isInitialized, selectedAccounts, setDisplayedDate } = useGlobalUiStore()\n    const {\n      alert,\n      dateRange,\n      isDataLoaded,\n      loadBudgetData,\n      setDateRange,\n      setAlert,\n      setTheme,\n      detailedBudgets: budgets,\n    } = useBudgetsStore()\n    const { setDateRange: setRecurringDateRange } = useRecurringTransactionsStore()\n    const { loadDateRangeCategoryTotals, loadMonthlyCategoryTotals } = useCategoryStore()\n    const { isSmallTablet, isMobile, isSmallMobile } = useScreenSize()\n    const isColumnWidths = isSmallTablet || isMobile || isSmallMobile\n\n    const [isAddOpen, setIsAddOpen] = React.useState(false)\n\n    useWidgetLoadTimer({\n      widgetName: 'BubbleBudgetsWidget',\n      isLoaded: isDataLoaded,\n    })\n\n    React.useEffect(() => {\n      setTheme(theme)\n      if (!isDataLoaded) {\n        loadBudgetData().finally(() => {\n          onEvent(ANALYTICS_EVENTS.BUDGETS_VIEW)\n        })\n      }\n    }, [])\n\n    React.useEffect(() => {\n      setDateRange({ start: startOfMonth(startOfToday()), end: endOfMonth(startOfToday()) })\n\n      return () => {\n        setDateRange({ start: startOfMonth(startOfToday()), end: endOfMonth(startOfToday()) })\n      }\n    }, [accounts])\n\n    React.useEffect(() => {\n      if (isInitialized) {\n        setDisplayedDate(dateRange.start, dateRange.end)\n        loadDateRangeCategoryTotals(selectedAccounts, dateRange.start, dateRange.end).finally()\n        loadMonthlyCategoryTotals(selectedAccounts).finally()\n        setRecurringDateRange(dateRange)\n      }\n    }, [isInitialized, selectedAccounts, dateRange])\n\n    const onMonthChanged = (dateRange: DateRange<Date>) => {\n      setDateRange({ start: dateRange[0] || new Date(), end: dateRange[1] || new Date() })\n    }\n\n    const handleAccountFilterClick = () => {\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_FILTER)\n    }\n\n    const handleAddClick = () => {\n      setIsAddOpen(true)\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_ADD)\n    }\n\n    const handleBudgetAdded = () => {\n      setIsAddOpen(false)\n    }\n\n    const handleBudgetsRecalculated = () => {\n      setIsAddOpen(false)\n    }\n\n    const shouldDisableNext = isAfter(dateRange.end, startOfMonth(new Date()))\n\n    if (!isInitialized || !isDataLoaded) return <Loader />\n\n    return (\n      <WidgetContainer\n        actions={[\n          {\n            iconName: 'add',\n            label: copy.add_title,\n            onClick: handleAddClick,\n          },\n        ]}\n        calendarActions={{\n          onRangeChanged: onMonthChanged,\n          shouldDisableNext,\n          shouldDisablePicker: true,\n        }}\n        hasDivider={true}\n        onAccountsFilterClick={handleAccountFilterClick}\n        onBackClick={onBackClick}\n        onMenuClick={onMenuClick}\n        sx={sx}\n        title={copy.budgets_title}\n      >\n        <Stack\n          direction={!isColumnWidths ? 'row' : 'column'}\n          height=\"100%\"\n          sx={{ justifyContent: 'center' }}\n          width=\"100%\"\n        >\n          <Stack height={!isColumnWidths ? 'calc(100dvh - 150px)' : 450}>\n            <BubbleBudgets\n              createBudgetOnClick={handleAddClick}\n              height={!isColumnWidths ? 800 : 450}\n              isDraggable={true}\n              shouldShowZeroState={budgets.length === 0}\n              unavailableWidth={!isColumnWidths ? BUDGET_LIST_WIDTH : 0}\n            />\n          </Stack>\n          {budgets.length !== 0 && (\n            <Stack\n              gap={24}\n              height=\"100%\"\n              sx={{ mr: 24, mt: 48 }}\n              width={!isColumnWidths ? BUDGET_LIST_WIDTH : '100%'}\n            >\n              <Overview />\n              <BudgetList />\n            </Stack>\n          )}\n        </Stack>\n\n        <BudgetDetailsDrawer />\n\n        <Drawer\n          ariaLabelClose={commonCopy.close_aria}\n          isOpen={isAddOpen}\n          onClose={() => setIsAddOpen(false)}\n          title={copy.add_new_title}\n        >\n          <AddBudgets\n            onAddBudget={handleBudgetAdded}\n            onRecalculateBudgets={handleBudgetsRecalculated}\n          />\n        </Drawer>\n\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={() => {\n            setAlert('')\n          }}\n          open={Boolean(alert)}\n        >\n          <Alert\n            closeText=\"\"\n            onClose={() => {\n              setAlert('')\n            }}\n            severity={'success'}\n            variant=\"filled\"\n          >\n            {alert}\n          </Alert>\n        </Snackbar>\n      </WidgetContainer>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/budgets/components/AddBudgets.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddBudgets.es.js","names":[],"sources":["../../../src/budgets/components/AddBudgets.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { useBudgetsStore, useGlobalCopyStore } from '../../common'\nimport { type DetailedCategory } from '../../core'\n\nimport { Header } from './addbudget/Header'\nimport { RecalculateBudgets } from './addbudget/RecalculateBudgets'\nimport { UnbudgetedRow } from './addbudget/UnbudgetedRow'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\ninterface AddBudgetsProps {\n  onAddBudget?: () => void\n  onRecalculateBudgets?: () => void\n}\n\nexport const AddBudgets = observer(({ onAddBudget, onRecalculateBudgets }: AddBudgetsProps) => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { addBudget, setAlert, unbudgetedCategories } = useBudgetsStore()\n\n  const handleOnAddBudget = async (category: DetailedCategory, amount: number) => {\n    await addBudget(category, amount)\n    onAddBudget?.()\n    setAlert(buildDynamicCopy(copy.alert_budget_created, category.name) as string)\n  }\n\n  return (\n    <Stack>\n      <Header />\n\n      <Box bgcolor=\"background.paper\">\n        <List>\n          {unbudgetedCategories.map((category) => (\n            <UnbudgetedRow\n              category={category}\n              key={category.guid}\n              onAddBudget={handleOnAddBudget}\n            />\n          ))}\n        </List>\n      </Box>\n\n      <RecalculateBudgets onRecalculateBudgets={onRecalculateBudgets} />\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAa,EAAA,CAAU,EAAE,aAAA,GAAa,sBAAA,EAAA,MAA4C;AAC7F,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,WAAA,GAAW,UAAA,GAAU,sBAAA,EAAA,IAAyB,EAAgB,GAEhE,IAAoB,OAAO,GAA4B,MAAmB;AAC9E,UAAM,EAAU,GAAU,CAAM,GAChC,IAAc,GACd,EAAS,EAAiB,EAAK,sBAAsB,EAAS,IAAI,CAAW;AAAA,EAC/E;AAEA,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD,CAAS,CAAA;AAAA,IAET,gBAAA,EAAC,GAAD;AAAA,MAAK,SAAQ;AAAA,gBACX,gBAAA,EAAC,GAAD,EAAA,UACG,EAAqB,IAAA,CAAK,MACzB,gBAAA,EAAC,GAAD;AAAA,QACY,UAAA;AAAA,QAEV,aAAa;AAAA,MACd,GAFM,EAAS,IAEf,CACF,EACG,CAAA;AAAA,IACH,CAAA;AAAA,IAEL,gBAAA,EAAC,GAAD,EAA0C,sBAAA,EAAuB,CAAA;AAAA,EAC5D,EAAA,CAAA;AAEX,CAAC"}
+{"version":3,"file":"AddBudgets.es.js","names":[],"sources":["../../../src/budgets/components/AddBudgets.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { useBudgetsStore, useGlobalCopyStore } from '../../common'\nimport { type DetailedCategory } from '../../core'\n\nimport { Header } from './addbudget/Header'\nimport { RecalculateBudgets } from './addbudget/RecalculateBudgets'\nimport { UnbudgetedRow } from './addbudget/UnbudgetedRow'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\ninterface AddBudgetsProps {\n  onAddBudget?: () => void\n  onRecalculateBudgets?: () => void\n}\n\nexport const AddBudgets = observer(({ onAddBudget, onRecalculateBudgets }: AddBudgetsProps) => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { addBudget, setAlert, unbudgetedCategories } = useBudgetsStore()\n\n  const handleOnAddBudget = async (category: DetailedCategory, amount: number) => {\n    await addBudget(category, amount)\n    onAddBudget?.()\n    setAlert(buildDynamicCopy(copy.alert_budget_created, category.name) as string)\n  }\n\n  return (\n    <Stack>\n      <Header />\n\n      <Box bgcolor=\"background.paper\">\n        <List>\n          {unbudgetedCategories.map((category) => (\n            <UnbudgetedRow\n              category={category}\n              key={category.guid}\n              onAddBudget={handleOnAddBudget}\n            />\n          ))}\n        </List>\n      </Box>\n\n      <RecalculateBudgets onRecalculateBudgets={onRecalculateBudgets} />\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;AAmBA,IAAa,IAAa,EAAA,CAAU,EAAE,aAAA,GAAa,sBAAA,EAAA,MAA4C;AAC7F,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,WAAA,GAAW,UAAA,GAAU,sBAAA,EAAA,IAAyB,EAAgB,GAEhE,IAAoB,OAAO,GAA4B,MAAmB;AAC9E,UAAM,EAAU,GAAU,CAAM,GAChC,IAAc,GACd,EAAS,EAAiB,EAAK,sBAAsB,EAAS,IAAI,CAAW;AAAA,EAC/E;AAEA,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD,CAAS,CAAA;AAAA,IAET,gBAAA,EAAC,GAAD;AAAA,MAAK,SAAQ;AAAA,MACX,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAqB,IAAA,CAAK,MACzB,gBAAA,EAAC,GAAD;AAAA,QACY,UAAA;AAAA,QAEV,aAAa;AAAA,MACd,GAFM,EAAS,IAEf,CACF,EACG,CAAA;AAAA,IACH,CAAA;AAAA,IAEL,gBAAA,EAAC,GAAD,EAA0C,sBAAA,EAAuB,CAAA;AAAA,EAC5D,EAAA,CAAA;AAEX,CAAC"}

package/dist/budgets/components/BubbleBudgets.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleBudgets.es.js","names":[],"sources":["../../../src/budgets/components/BubbleBudgets.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport ConnectionsDrawer from '../../accounts/components/ConnectionsDrawer'\nimport BubbleChart from './BubbleChart'\n\nimport {\n  ANALYTICS_EVENTS,\n  useBudgetsStore,\n  useEvent,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useScreenSize,\n  useGlobalCopyStore,\n} from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport { BudgetsEmptyState } from './BudgetsEmptyState'\n\ninterface BubbleBudgetsProps {\n  createBudgetOnClick?: () => void\n  height: number\n  isDraggable?: boolean\n  isMiniWidget?: boolean\n  shouldShowZeroState: boolean\n  unavailableWidth?: number\n}\n\nexport const BubbleBudgets: React.FC<BubbleBudgetsProps> = observer(\n  ({\n    createBudgetOnClick = () => {},\n    height,\n    isDraggable = false,\n    isMiniWidget = false,\n    shouldShowZeroState,\n    unavailableWidth = 24,\n  }) => {\n    const { onEvent } = useEvent()\n    const { setSelectedBudget } = useBudgetsStore()\n    const { isInitialized } = useGlobalUiStore()\n    const { accounts: accountsCopy } = useGlobalCopyStore()\n    const { availableWidth } = useWidgetContainerProvider()\n    const { isMobile } = useScreenSize()\n\n    const [showConnectionsWidget, setShowConnectionsWidget] = React.useState(false)\n\n    const width = React.useMemo(() => {\n      return availableWidth - unavailableWidth\n    }, [availableWidth])\n\n    const handleBubbleClick = (budget: DetailedBudget) => {\n      setSelectedBudget(budget)\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {\n        budget_category: budget.category.name,\n        click_type: 'bubble',\n      })\n    }\n\n    const handleManageConnections = () => {\n      setShowConnectionsWidget(true)\n      onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)\n    }\n\n    return (\n      <Box\n        ml={shouldShowZeroState || isMobile ? 0 : 24}\n        sx={{ alignSelf: 'center', ...(isMiniWidget && { height: '100%' }) }}\n      >\n        {shouldShowZeroState || !isInitialized ? (\n          <BudgetsEmptyState\n            createBudgetOnClick={createBudgetOnClick}\n            isMiniWidget={isMiniWidget}\n            onConnectAccountsClick={handleManageConnections}\n          />\n        ) : (\n          <BubbleChart\n            height={height}\n            isDraggable={isDraggable}\n            onClick={handleBubbleClick}\n            width={width}\n          />\n        )}\n\n        <ConnectionsDrawer\n          onClose={() => setShowConnectionsWidget(false)}\n          showConnectionsWidget={showConnectionsWidget}\n          title={accountsCopy.manage_connections}\n        />\n      </Box>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AA8BA,IAAa,IAA8C,EAAA,CACxD,EACC,qBAAA,IAAA,MAA4B;AAAC,GAC7B,QAAA,GACA,aAAA,IAAc,IACd,cAAA,IAAe,IACf,qBAAA,GACA,kBAAA,IAAmB,GAAA,MACf;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,mBAAA,EAAA,IAAsB,EAAgB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAChD,EAAE,UAAA,EAAA,IAAa,EAAc,GAE7B,CAAC,GAAuB,CAAA,IAA4B,EAAM,SAAS,EAAK,GAExE,IAAQ,EAAM,QAAA,MACX,IAAiB,GACvB,CAAC,CAAc,CAAC,GAEb,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAkB,CAAM,GACxB,EAAQ,EAAiB,+BAA+B;AAAA,MACtD,iBAAiB,EAAO,SAAS;AAAA,MACjC,YAAY;AAAA,IACd,CAAC;AAAA,EACH,GAEM,IAAA,MAAgC;AACpC,IAAA,EAAyB,EAAI,GAC7B,EAAQ,EAAiB,sBAAsB;AAAA,EACjD;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI,KAAuB,IAAW,IAAI;AAAA,IAC1C,IAAI;AAAA,MAAE,WAAW;AAAA,MAAU,GAAI,KAAgB,EAAE,QAAQ,OAAO;AAAA,IAAG;AAAA,cAFrE,CAIG,KAAuB,CAAC,IACvB,gBAAA,EAAC,GAAD;AAAA,MACuB,qBAAA;AAAA,MACP,cAAA;AAAA,MACd,wBAAwB;AAAA,IACzB,CAAA,IAED,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACK,aAAA;AAAA,MACb,SAAS;AAAA,MACF,OAAA;AAAA,IACR,CAAA,GAGH,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe,EAAyB,EAAK;AAAA,MACtB,uBAAA;AAAA,MACvB,OAAO,EAAa;AAAA,IACrB,CAAA,CACE;AAAA;AAET,CACF"}
+{"version":3,"file":"BubbleBudgets.es.js","names":[],"sources":["../../../src/budgets/components/BubbleBudgets.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport ConnectionsDrawer from '../../accounts/components/ConnectionsDrawer'\nimport BubbleChart from './BubbleChart'\n\nimport {\n  ANALYTICS_EVENTS,\n  useBudgetsStore,\n  useEvent,\n  useGlobalUiStore,\n  useWidgetContainerProvider,\n  useScreenSize,\n  useGlobalCopyStore,\n} from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport { BudgetsEmptyState } from './BudgetsEmptyState'\n\ninterface BubbleBudgetsProps {\n  createBudgetOnClick?: () => void\n  height: number\n  isDraggable?: boolean\n  isMiniWidget?: boolean\n  shouldShowZeroState: boolean\n  unavailableWidth?: number\n}\n\nexport const BubbleBudgets: React.FC<BubbleBudgetsProps> = observer(\n  ({\n    createBudgetOnClick = () => {},\n    height,\n    isDraggable = false,\n    isMiniWidget = false,\n    shouldShowZeroState,\n    unavailableWidth = 24,\n  }) => {\n    const { onEvent } = useEvent()\n    const { setSelectedBudget } = useBudgetsStore()\n    const { isInitialized } = useGlobalUiStore()\n    const { accounts: accountsCopy } = useGlobalCopyStore()\n    const { availableWidth } = useWidgetContainerProvider()\n    const { isMobile } = useScreenSize()\n\n    const [showConnectionsWidget, setShowConnectionsWidget] = React.useState(false)\n\n    const width = React.useMemo(() => {\n      return availableWidth - unavailableWidth\n    }, [availableWidth])\n\n    const handleBubbleClick = (budget: DetailedBudget) => {\n      setSelectedBudget(budget)\n      onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {\n        budget_category: budget.category.name,\n        click_type: 'bubble',\n      })\n    }\n\n    const handleManageConnections = () => {\n      setShowConnectionsWidget(true)\n      onEvent(ANALYTICS_EVENTS.ACCOUNTS_CLICK_CONNECT)\n    }\n\n    return (\n      <Box\n        ml={shouldShowZeroState || isMobile ? 0 : 24}\n        sx={{ alignSelf: 'center', ...(isMiniWidget && { height: '100%' }) }}\n      >\n        {shouldShowZeroState || !isInitialized ? (\n          <BudgetsEmptyState\n            createBudgetOnClick={createBudgetOnClick}\n            isMiniWidget={isMiniWidget}\n            onConnectAccountsClick={handleManageConnections}\n          />\n        ) : (\n          <BubbleChart\n            height={height}\n            isDraggable={isDraggable}\n            onClick={handleBubbleClick}\n            width={width}\n          />\n        )}\n\n        <ConnectionsDrawer\n          onClose={() => setShowConnectionsWidget(false)}\n          showConnectionsWidget={showConnectionsWidget}\n          title={accountsCopy.manage_connections}\n        />\n      </Box>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AA8BA,IAAa,IAA8C,EAAA,CACxD,EACC,qBAAA,IAAA,MAA4B;AAAC,GAC7B,QAAA,GACA,aAAA,IAAc,IACd,cAAA,IAAe,IACf,qBAAA,GACA,kBAAA,IAAmB,GAAA,MACf;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,mBAAA,EAAA,IAAsB,EAAgB,GACxC,EAAE,eAAA,EAAA,IAAkB,EAAiB,GACrC,EAAE,UAAU,EAAA,IAAiB,EAAmB,GAChD,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAChD,EAAE,UAAA,EAAA,IAAa,EAAc,GAE7B,CAAC,GAAuB,CAAA,IAA4B,EAAM,SAAS,EAAK,GAExE,IAAQ,EAAM,QAAA,MACX,IAAiB,GACvB,CAAC,CAAc,CAAC,GAEb,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAkB,CAAM,GACxB,EAAQ,EAAiB,+BAA+B;AAAA,MACtD,iBAAiB,EAAO,SAAS;AAAA,MACjC,YAAY;AAAA,IACd,CAAC;AAAA,EACH,GAEM,IAAA,MAAgC;AACpC,IAAA,EAAyB,EAAI,GAC7B,EAAQ,EAAiB,sBAAsB;AAAA,EACjD;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI,KAAuB,IAAW,IAAI;AAAA,IAC1C,IAAI;AAAA,MAAE,WAAW;AAAA,MAAU,GAAI,KAAgB,EAAE,QAAQ,OAAO;AAAA,IAAG;AAAA,IAFrE,UAAA,CAIG,KAAuB,CAAC,IACvB,gBAAA,EAAC,GAAD;AAAA,MACuB,qBAAA;AAAA,MACP,cAAA;AAAA,MACd,wBAAwB;AAAA,IACzB,CAAA,IAED,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACK,aAAA;AAAA,MACb,SAAS;AAAA,MACF,OAAA;AAAA,IACR,CAAA,GAGH,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe,EAAyB,EAAK;AAAA,MACtB,uBAAA;AAAA,MACvB,OAAO,EAAa;AAAA,IACrB,CAAA,CACE;AAAA;AAET,CACF"}

package/dist/budgets/components/BubbleChart.es.js

@@ -4,13 +4,13 @@ import { Bubble as C } from "./bubblechart/Bubble.es.js";
 import t from "react";
 import { observer as M } from "mobx-react-lite";
 import { jsx as d } from "react/jsx-runtime";
-var g = ({ height: o, width: s, isDraggable: i = !1, onClick: p = () => {
+var g = ({ height: o, width: s, isDraggable: f = !1, onClick: p = () => {
 } }) => {
-  const [v, f] = t.useState([]), r = t.useRef(null), b = t.useRef(!1), { detailedBudgets: c } = x(), l = t.useCallback(() => {
-    const e = r.current, u = R(c), m = u.nodes();
+  const [v, l] = t.useState([]), r = t.useRef(null), b = t.useRef(!1), { detailedBudgets: c } = x(), m = t.useCallback(() => {
+    const e = r.current, i = R(c), u = i.nodes();
     if (e) {
       const N = e.nodes(), S = new Map(N.map((n) => [n.guid, n]));
-      m.forEach((n) => {
+      u.forEach((n) => {
         const a = S.get(n.guid);
         a && Object.assign(n, {
           vx: a.vx,
@@ -20,23 +20,23 @@ var g = ({ height: o, width: s, isDraggable: i = !1, onClick: p = () => {
         });
       });
     }
-    r.current = u, b.current = !1, f(m);
+    r.current = i, b.current = !1, l(u);
   }, [c]);
   return t.useEffect(() => {
-    l();
-  }, [l]), t.useEffect(() => () => {
+    m();
+  }, [m]), t.useEffect(() => () => {
     r.current && (r.current.stop(), r.current = null);
   }, []), t.useEffect(() => {
     const e = r.current;
     if (!e) return;
-    const u = y(e.nodes(), c, s > 0 && s < 450 || o > 0 && o < 300, o, s);
-    e.nodes(u), E(e, o, s), i && setTimeout(() => {
+    const i = e.nodes(), u = y(i, c, s > 0 && s < 450 || o > 0 && o < 300, o, s);
+    e.nodes(u), E(e, o, s), f && setTimeout(() => {
       B(e);
-    }, 0), f([...u]);
+    }, 0), l([...u]);
   }, [
     o,
     s,
-    i,
+    f,
     c
   ]), /* @__PURE__ */ d("svg", {
     height: o,
@@ -47,7 +47,7 @@ var g = ({ height: o, width: s, isDraggable: i = !1, onClick: p = () => {
     width: Math.abs(s),
     children: v.map((e) => /* @__PURE__ */ d(C, {
       bubble: e,
-      isDraggable: i,
+      isDraggable: f,
       onClick: p
     }, e.guid))
   });

package/dist/budgets/components/BubbleChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BubbleChart.es.js","names":[],"sources":["../../../src/budgets/components/BubbleChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { SimulationNodeDatum } from 'd3-force'\n\nimport { useBudgetsStore } from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport {\n  computeScaledNodes,\n  enableDrag,\n  resize,\n  simulate,\n  type SimulationType,\n} from '../utils/BubblesSVG'\n\nimport { Bubble } from './bubblechart/Bubble'\n\nexport interface BubbleData extends DetailedBudget, SimulationNodeDatum {\n  radius: number\n}\n\ninterface BubbleChartProps {\n  height: number\n  width: number\n  isDraggable?: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nconst BubbleChart: React.FC<BubbleChartProps> = ({\n  height,\n  width,\n  isDraggable = false,\n  onClick = () => {},\n}) => {\n  const [simulationNodes, setSimulationNodes] = React.useState<BubbleData[]>([])\n\n  const simulationRef = React.useRef<SimulationType | null>(null)\n  const dragEnabledRef = React.useRef<boolean>(false)\n\n  const { detailedBudgets: budgets } = useBudgetsStore()\n\n  const updateSimulation = React.useCallback(() => {\n    const previousSimulation = simulationRef.current\n    const currentSimulation = simulate(budgets)\n    const currentNodes = currentSimulation.nodes()\n\n    if (previousSimulation) {\n      const previousNodes = previousSimulation.nodes()\n      const previousNodesMap = new Map(previousNodes.map((node) => [node.guid, node]))\n\n      currentNodes.forEach((node) => {\n        const previousNode = previousNodesMap.get(node.guid)\n        if (previousNode) {\n          Object.assign(node, {\n            vx: previousNode.vx,\n            vy: previousNode.vy,\n            x: previousNode.x,\n            y: previousNode.y,\n          })\n        }\n      })\n    }\n\n    simulationRef.current = currentSimulation\n    dragEnabledRef.current = false\n    setSimulationNodes(currentNodes)\n  }, [budgets])\n\n  React.useEffect(() => {\n    updateSimulation()\n  }, [updateSimulation])\n\n  React.useEffect(() => {\n    return () => {\n      if (simulationRef.current) {\n        simulationRef.current.stop()\n        simulationRef.current = null\n      }\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const simulation = simulationRef.current\n    if (!simulation) return\n\n    const nodes = simulation.nodes()\n    const isCompact = (width > 0 && width < 450) || (height > 0 && height < 300)\n\n    const updatedNodes = computeScaledNodes(nodes, budgets, isCompact, height, width)\n    simulation.nodes(updatedNodes)\n    resize(simulation, height, width)\n\n    if (isDraggable) {\n      setTimeout(() => {\n        enableDrag(simulation)\n      }, 0)\n    }\n\n    setSimulationNodes([...updatedNodes])\n  }, [height, width, isDraggable, budgets])\n\n  return (\n    <svg\n      height={height}\n      style={{ overflow: 'visible', touchAction: 'manipulation' }}\n      width={Math.abs(width)}\n    >\n      {simulationNodes.map((bubble) => (\n        <Bubble bubble={bubble} isDraggable={isDraggable} key={bubble.guid} onClick={onClick} />\n      ))}\n    </svg>\n  )\n}\n\nexport default observer(BubbleChart)\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA2C,EAC/C,QAAA,GACA,OAAA,GACA,aAAA,IAAc,IACd,SAAA,IAAA,MAAgB;AAAC,EAAA,MACb;AACJ,QAAM,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAuB,CAAC,CAAC,GAEvE,IAAgB,EAAM,OAA8B,IAAI,GACxD,IAAiB,EAAM,OAAgB,EAAK,GAE5C,EAAE,iBAAiB,EAAA,IAAY,EAAgB,GAE/C,IAAmB,EAAM,YAAA,MAAkB;AAC/C,UAAM,IAAqB,EAAc,SACnC,IAAoB,EAAS,CAAO,GACpC,IAAe,EAAkB,MAAM;AAE7C,QAAI,GAAoB;AACtB,YAAM,IAAgB,EAAmB,MAAM,GACzC,IAAmB,IAAI,IAAI,EAAc,IAAA,CAAK,MAAS,CAAC,EAAK,MAAM,CAAI,CAAC,CAAC;AAE/E,MAAA,EAAa,QAAA,CAAS,MAAS;AAC7B,cAAM,IAAe,EAAiB,IAAI,EAAK,IAAI;AACnD,QAAI,KACF,OAAO,OAAO,GAAM;AAAA,UAClB,IAAI,EAAa;AAAA,UACjB,IAAI,EAAa;AAAA,UACjB,GAAG,EAAa;AAAA,UAChB,GAAG,EAAa;AAAA,QAClB,CAAC;AAAA,MAEL,CAAC;AAAA,IACH;AAEA,IAAA,EAAc,UAAU,GACxB,EAAe,UAAU,IACzB,EAAmB,CAAY;AAAA,EACjC,GAAG,CAAC,CAAO,CAAC;AAEZ,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAiB;AAAA,EACnB,GAAG,CAAC,CAAgB,CAAC,GAErB,EAAM,UAAA,MACJ,MAAa;AACX,IAAI,EAAc,YAChB,EAAc,QAAQ,KAAK,GAC3B,EAAc,UAAU;AAAA,EAE5B,GACC,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAa,EAAc;AACjC,QAAI,CAAC,EAAY;AAKjB,UAAM,IAAe,EAHP,EAAW,MAGe,GAAO,GAF5B,IAAQ,KAAK,IAAQ,OAAS,IAAS,KAAK,IAAS,KAEL,GAAQ,CAAK;AAChF,IAAA,EAAW,MAAM,CAAY,GAC7B,EAAO,GAAY,GAAQ,CAAK,GAE5B,KACF,WAAA,MAAiB;AACf,MAAA,EAAW,CAAU;AAAA,IACvB,GAAG,CAAC,GAGN,EAAmB,CAAC,GAAG,CAAY,CAAC;AAAA,EACtC,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAa;AAAA,EAAO,CAAC,GAGtC,gBAAA,EAAC,OAAD;AAAA,IACU,QAAA;AAAA,IACR,OAAO;AAAA,MAAE,UAAU;AAAA,MAAW,aAAa;AAAA,IAAe;AAAA,IAC1D,OAAO,KAAK,IAAI,CAAK;AAAA,cAEpB,EAAgB,IAAA,CAAK,MACpB,gBAAA,EAAC,GAAD;AAAA,MAAgB,QAAA;AAAA,MAAqB,aAAA;AAAA,MAAwC,SAAA;AAAA,IAAU,GAAhC,EAAO,IAAyB,CACxF;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}
+{"version":3,"file":"BubbleChart.es.js","names":[],"sources":["../../../src/budgets/components/BubbleChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { SimulationNodeDatum } from 'd3-force'\n\nimport { useBudgetsStore } from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport {\n  computeScaledNodes,\n  enableDrag,\n  resize,\n  simulate,\n  type SimulationType,\n} from '../utils/BubblesSVG'\n\nimport { Bubble } from './bubblechart/Bubble'\n\nexport interface BubbleData extends DetailedBudget, SimulationNodeDatum {\n  radius: number\n}\n\ninterface BubbleChartProps {\n  height: number\n  width: number\n  isDraggable?: boolean\n  onClick?: (budget: DetailedBudget) => void\n}\n\nconst BubbleChart: React.FC<BubbleChartProps> = ({\n  height,\n  width,\n  isDraggable = false,\n  onClick = () => {},\n}) => {\n  const [simulationNodes, setSimulationNodes] = React.useState<BubbleData[]>([])\n\n  const simulationRef = React.useRef<SimulationType | null>(null)\n  const dragEnabledRef = React.useRef<boolean>(false)\n\n  const { detailedBudgets: budgets } = useBudgetsStore()\n\n  const updateSimulation = React.useCallback(() => {\n    const previousSimulation = simulationRef.current\n    const currentSimulation = simulate(budgets)\n    const currentNodes = currentSimulation.nodes()\n\n    if (previousSimulation) {\n      const previousNodes = previousSimulation.nodes()\n      const previousNodesMap = new Map(previousNodes.map((node) => [node.guid, node]))\n\n      currentNodes.forEach((node) => {\n        const previousNode = previousNodesMap.get(node.guid)\n        if (previousNode) {\n          Object.assign(node, {\n            vx: previousNode.vx,\n            vy: previousNode.vy,\n            x: previousNode.x,\n            y: previousNode.y,\n          })\n        }\n      })\n    }\n\n    simulationRef.current = currentSimulation\n    dragEnabledRef.current = false\n    setSimulationNodes(currentNodes)\n  }, [budgets])\n\n  React.useEffect(() => {\n    updateSimulation()\n  }, [updateSimulation])\n\n  React.useEffect(() => {\n    return () => {\n      if (simulationRef.current) {\n        simulationRef.current.stop()\n        simulationRef.current = null\n      }\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const simulation = simulationRef.current\n    if (!simulation) return\n\n    const nodes = simulation.nodes()\n    const isCompact = (width > 0 && width < 450) || (height > 0 && height < 300)\n\n    const updatedNodes = computeScaledNodes(nodes, budgets, isCompact, height, width)\n    simulation.nodes(updatedNodes)\n    resize(simulation, height, width)\n\n    if (isDraggable) {\n      setTimeout(() => {\n        enableDrag(simulation)\n      }, 0)\n    }\n\n    setSimulationNodes([...updatedNodes])\n  }, [height, width, isDraggable, budgets])\n\n  return (\n    <svg\n      height={height}\n      style={{ overflow: 'visible', touchAction: 'manipulation' }}\n      width={Math.abs(width)}\n    >\n      {simulationNodes.map((bubble) => (\n        <Bubble bubble={bubble} isDraggable={isDraggable} key={bubble.guid} onClick={onClick} />\n      ))}\n    </svg>\n  )\n}\n\nexport default observer(BubbleChart)\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA2C,EAC/C,QAAA,GACA,OAAA,GACA,aAAA,IAAc,IACd,SAAA,IAAA,MAAgB;AAAC,EAAA,MACb;AACJ,QAAM,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAuB,CAAC,CAAC,GAEvE,IAAgB,EAAM,OAA8B,IAAI,GACxD,IAAiB,EAAM,OAAgB,EAAK,GAE5C,EAAE,iBAAiB,EAAA,IAAY,EAAgB,GAE/C,IAAmB,EAAM,YAAA,MAAkB;AAC/C,UAAM,IAAqB,EAAc,SACnC,IAAoB,EAAS,CAAO,GACpC,IAAe,EAAkB,MAAM;AAE7C,QAAI,GAAoB;AACtB,YAAM,IAAgB,EAAmB,MAAM,GACzC,IAAmB,IAAI,IAAI,EAAc,IAAA,CAAK,MAAS,CAAC,EAAK,MAAM,CAAI,CAAC,CAAC;AAE/E,MAAA,EAAa,QAAA,CAAS,MAAS;AAC7B,cAAM,IAAe,EAAiB,IAAI,EAAK,IAAI;AACnD,QAAI,KACF,OAAO,OAAO,GAAM;AAAA,UAClB,IAAI,EAAa;AAAA,UACjB,IAAI,EAAa;AAAA,UACjB,GAAG,EAAa;AAAA,UAChB,GAAG,EAAa;AAAA,QAClB,CAAC;AAAA,MAEL,CAAC;AAAA,IACH;AAEA,IAAA,EAAc,UAAU,GACxB,EAAe,UAAU,IACzB,EAAmB,CAAY;AAAA,EACjC,GAAG,CAAC,CAAO,CAAC;AAEZ,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAiB;AAAA,EACnB,GAAG,CAAC,CAAgB,CAAC,GAErB,EAAM,UAAA,MACJ,MAAa;AACX,IAAI,EAAc,YAChB,EAAc,QAAQ,KAAK,GAC3B,EAAc,UAAU;AAAA,EAE5B,GACC,CAAC,CAAC,GAEL,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAa,EAAc;AACjC,QAAI,CAAC,EAAY;AAEjB,UAAM,IAAQ,EAAW,MAAM,GAGzB,IAAe,EAAmB,GAAO,GAF5B,IAAQ,KAAK,IAAQ,OAAS,IAAS,KAAK,IAAS,KAEL,GAAQ,CAAK;AAChF,IAAA,EAAW,MAAM,CAAY,GAC7B,EAAO,GAAY,GAAQ,CAAK,GAE5B,KACF,WAAA,MAAiB;AACf,MAAA,EAAW,CAAU;AAAA,IACvB,GAAG,CAAC,GAGN,EAAmB,CAAC,GAAG,CAAY,CAAC;AAAA,EACtC,GAAG;AAAA,IAAC;AAAA,IAAQ;AAAA,IAAO;AAAA,IAAa;AAAA,EAAO,CAAC,GAGtC,gBAAA,EAAC,OAAD;AAAA,IACU,QAAA;AAAA,IACR,OAAO;AAAA,MAAE,UAAU;AAAA,MAAW,aAAa;AAAA,IAAe;AAAA,IAC1D,OAAO,KAAK,IAAI,CAAK;AAAA,IAEpB,UAAA,EAAgB,IAAA,CAAK,MACpB,gBAAA,EAAC,GAAD;AAAA,MAAgB,QAAA;AAAA,MAAqB,aAAA;AAAA,MAAwC,SAAA;AAAA,IAAU,GAAhC,EAAO,IAAyB,CACxF;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

package/dist/budgets/components/BudgetDetailsDrawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetDetailsDrawer.es.js","names":[],"sources":["../../../src/budgets/components/BudgetDetailsDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\n\nimport { BudgetDetails } from './budgetdetails/BudgetDetails'\nimport { BudgetAmount } from './shared/BudgetAmount'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const BudgetDetailsDrawer = observer(() => {\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { setFilter } = useTransactionStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedBudget && !selectedSubBudget) {\n      setAmount(`${selectedBudget.amount}`)\n      setIsOpen(true)\n      setFilter({\n        accounts: selectedAccountGuids,\n        dateRange: dateRange,\n        custom: (t: Transaction) =>\n          t.category_guid === selectedBudget.category_guid ||\n          t.top_level_category_guid === selectedBudget.category_guid,\n        showSplits: true,\n      })\n    }\n  }, [selectedBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedBudget) {\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n        percentage: (selectedBudget.category.totalAmount / Number(amount)) * 100,\n      } as Budget)\n      setIsEditOpen(false)\n      setAlert(buildDynamicCopy(copy.alert_budget_updated, selectedBudget.category.name) as string)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedBudget) {\n      await deleteBudget(selectedBudget.guid)\n      setAlert(buildDynamicCopy(copy.alert_budget_deleted, selectedBudget.category.name) as string)\n    }\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setIsOpen(false)\n    // Wait for the close animation before set the selected budget\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n    }, 250)\n  }\n\n  const handleEditClose = () => {\n    setIsEditOpen(false)\n    setAmount(`${selectedBudget?.amount}`)\n  }\n\n  if (!selectedBudget) {\n    return undefined\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        <BudgetDetails budget={selectedBudget} />\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={() => setAlert('')}\n          open={Boolean(alert)}\n        >\n          <Alert closeText=\"\" onClose={() => setAlert('')} severity={'success'} variant=\"filled\">\n            {alert}\n          </Alert>\n        </Snackbar>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isEditOpen}\n        onClose={handleEditClose}\n        onPrimaryAction={handleUpdateBudget}\n        onSecondaryAction={handleEditClose}\n        primaryText={copy.edit_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={selectedBudget.category.name}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n        isOpen={isDeleteOpen}\n        onClose={() => setIsDeleteOpen(false)}\n        onPrimaryAction={handleDeleteBudget}\n        primaryColor=\"error\"\n        primaryText={copy.details_delete_button}\n        secondaryColor=\"secondary\"\n      >\n        <Text variant=\"subtitle1\">\n          {buildDynamicCopy(copy.delete_description, selectedBudget.category.name) as string}\n        </Text>\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"BudgetDetailsDrawer.es.js","names":[],"sources":["../../../src/budgets/components/BudgetDetailsDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\nimport Snackbar from '@mui/material/Snackbar'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport {\n  Dialog,\n  Drawer,\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\n\nimport { BudgetDetails } from './budgetdetails/BudgetDetails'\nimport { BudgetAmount } from './shared/BudgetAmount'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const BudgetDetailsDrawer = observer(() => {\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { setFilter } = useTransactionStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n  const [isEditOpen, setIsEditOpen] = React.useState(false)\n  const [isDeleteOpen, setIsDeleteOpen] = React.useState(false)\n  const [amount, setAmount] = React.useState(``)\n\n  React.useEffect(() => {\n    if (selectedBudget && !selectedSubBudget) {\n      setAmount(`${selectedBudget.amount}`)\n      setIsOpen(true)\n      setFilter({\n        accounts: selectedAccountGuids,\n        dateRange: dateRange,\n        custom: (t: Transaction) =>\n          t.category_guid === selectedBudget.category_guid ||\n          t.top_level_category_guid === selectedBudget.category_guid,\n        showSplits: true,\n      })\n    }\n  }, [selectedBudget])\n\n  const handleUpdateBudget = async () => {\n    if (selectedBudget) {\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n        percentage: (selectedBudget.category.totalAmount / Number(amount)) * 100,\n      } as Budget)\n      setIsEditOpen(false)\n      setAlert(buildDynamicCopy(copy.alert_budget_updated, selectedBudget.category.name) as string)\n    }\n  }\n\n  const handleDeleteBudget = async () => {\n    if (selectedBudget) {\n      await deleteBudget(selectedBudget.guid)\n      setAlert(buildDynamicCopy(copy.alert_budget_deleted, selectedBudget.category.name) as string)\n    }\n    handleClose()\n  }\n\n  const handleClose = () => {\n    setIsOpen(false)\n    // Wait for the close animation before set the selected budget\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n    }, 250)\n  }\n\n  const handleEditClose = () => {\n    setIsEditOpen(false)\n    setAmount(`${selectedBudget?.amount}`)\n  }\n\n  if (!selectedBudget) {\n    return undefined\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setIsEditOpen(true)}\n        onSecondaryAction={() => setIsDeleteOpen(true)}\n        primaryText={copy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={copy.details_delete_button}\n        title={copy.details_title}\n      >\n        <BudgetDetails budget={selectedBudget} />\n        <Snackbar\n          anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n          autoHideDuration={3500}\n          onClose={() => setAlert('')}\n          open={Boolean(alert)}\n        >\n          <Alert closeText=\"\" onClose={() => setAlert('')} severity={'success'} variant=\"filled\">\n            {alert}\n          </Alert>\n        </Snackbar>\n      </Drawer>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.details_edit_title }}\n        disablePrimaryButton={Number(amount) <= 0}\n        isOpen={isEditOpen}\n        onClose={handleEditClose}\n        onPrimaryAction={handleUpdateBudget}\n        onSecondaryAction={handleEditClose}\n        primaryText={copy.edit_save_button}\n      >\n        <BudgetAmount\n          amount={amount}\n          categoryName={selectedBudget.category.name}\n          onAmountChanged={setAmount}\n        />\n      </Dialog>\n\n      <Dialog\n        copy={{ close_aria: commonCopy.close_aria, title: copy.delete_title }}\n        isOpen={isDeleteOpen}\n        onClose={() => setIsDeleteOpen(false)}\n        onPrimaryAction={handleDeleteBudget}\n        primaryColor=\"error\"\n        primaryText={copy.details_delete_button}\n        secondaryColor=\"secondary\"\n      >\n        <Text variant=\"subtitle1\">\n          {buildDynamicCopy(copy.delete_description, selectedBudget.category.name) as string}\n        </Text>\n      </Dialog>\n    </React.Fragment>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/BudgetDetailsDrawerV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetDetailsDrawerV2.es.js","names":[],"sources":["../../../src/budgets/components/BudgetDetailsDrawerV2.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\n\nimport Snackbar from '@mui/material/Snackbar'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon } from '@mxenabled/mxui'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport {\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\nimport { CurrencyDialog, Drawer, Loader } from '../../common/components'\nimport { TransactionList } from '../../transactions'\nimport { type TransactionListProps } from '../../transactions/components/shared/TransactionList'\n\nimport { getRemainingAmountSpentPercentage } from '../../core/utils/BudgetUtil'\n\nimport { BudgetDetailsTopSection } from './shared/BudgetDetailsTopSection'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nenum Action {\n  DELETE = 'delete',\n  EDIT = 'edit',\n}\n\ninterface BudgetDetailsDrawerV2Props {\n  onClose?: () => void\n  onEvent?: (event: string, amount: string) => void\n  onViewHistory?: () => void\n  transactionListProps?: TransactionListProps\n}\n\nconst EVENT_MESSAGES = {\n  CANCEL_DELETE: 'Cancel - Delete',\n  END_SAVE: 'End - Save',\n  END_DELETE: 'End - Delete',\n  START_DELETE: 'Start - Delete',\n}\n\n// V2 implementation of Budget Details Drawer.\n// This will replace BudgetDetailsDrawer\n// after the PFM design is finalized\n// and aligned with Insights.\n\nconst BudgetDetailsDrawerV2 = ({\n  onClose,\n  onEvent,\n  onViewHistory,\n  transactionListProps,\n}: BudgetDetailsDrawerV2Props) => {\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isCopyLoaded, selectedAccountGuids } = useGlobalUiStore()\n  const theme = useTheme()\n  const { setFilter } = useTransactionStore()\n\n  const [amount, setAmount] = React.useState('')\n  const [formAction, setFormAction] = React.useState<Action | null>(null)\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const inProgress = React.useRef(false)\n\n  React.useEffect(() => {\n    if (!selectedBudget || selectedSubBudget) return\n\n    setAmount(`${selectedBudget.amount}`)\n    setFilter({\n      accounts: selectedAccountGuids,\n      dateRange,\n      custom: ({ category_guid, top_level_category_guid }: Transaction) => {\n        const { category_guid: budgetCategoryGuid } = selectedBudget\n        return (\n          category_guid === budgetCategoryGuid || top_level_category_guid === budgetCategoryGuid\n        )\n      },\n    })\n    setIsOpen(true)\n  }, [selectedBudget])\n\n  if (!isCopyLoaded) return <Loader />\n  if (!selectedBudget) return null\n\n  const handleClose = () => {\n    setAmount('')\n    setFormAction(null)\n    setIsOpen(false)\n\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n      onClose?.()\n    }, 250)\n  }\n\n  const handleFormDialogClose = () => {\n    if (formAction === Action.DELETE) onEvent?.(EVENT_MESSAGES.CANCEL_DELETE, amount)\n\n    setAmount(selectedBudget.amount ? `${selectedBudget.amount}` : '')\n    setFormAction(null)\n  }\n\n  const handlePrimaryAction = async () => {\n    if (formAction === Action.EDIT) {\n      if (inProgress.current) return\n      inProgress.current = true\n\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n      } as Budget)\n      onEvent?.(EVENT_MESSAGES.END_SAVE, amount)\n\n      setAlert(\n        buildDynamicCopy(budgetsCopy.alert_budget_updated, selectedBudget.category.name) as string,\n      )\n      setFormAction(null)\n\n      inProgress.current = false\n    }\n\n    if (formAction === Action.DELETE) {\n      await deleteBudget(selectedBudget.guid)\n      onEvent?.(EVENT_MESSAGES.END_DELETE, amount)\n\n      handleClose()\n    }\n  }\n\n  const { remainingAmount, spentPercentage, iconColor } = getRemainingAmountSpentPercentage(\n    selectedBudget.transaction_total ?? 0,\n    selectedBudget.amount ?? 0,\n  )\n\n  const buildCopyWithBold = (copyKey: string, content: React.ReactNode): string => {\n    return buildDynamicCopy(copyKey, <b>{content}</b>) as string\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        footerStyles={{\n          px: 24,\n          py: 16,\n        }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setFormAction(Action.EDIT)}\n        onSecondaryAction={() => {\n          onEvent?.(EVENT_MESSAGES.START_DELETE, amount)\n          setFormAction(Action.DELETE)\n        }}\n        primaryText={budgetsCopy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={budgetsCopy.details_delete_button}\n        sx={{\n          '& .list-wrapper': {\n            pr: 24,\n          },\n        }}\n        title={\n          buildDynamicCopy(budgetsCopy.details_type_title, selectedBudget.category.name) as string\n        }\n      >\n        <BudgetDetailsTopSection\n          amount={selectedBudget.amount}\n          icon={\n            <CategoryIcon\n              categoryGuid={selectedBudget.category.guid}\n              size={44}\n              sx={{\n                bgcolor: alpha(getCategoryColor(selectedBudget.category.guid, theme), 0.15),\n                border: `1px solid ${getCategoryColor(selectedBudget.category.guid, theme)}`,\n                color: 'text.primary',\n              }}\n            />\n          }\n          iconColor={iconColor}\n          onViewHistory={onViewHistory}\n          remainingAmount={remainingAmount}\n          spentPercentage={spentPercentage}\n          startDate={(dateRange.start.getTime() ?? 0) / 1000}\n          totalTransaction={selectedBudget.transaction_total}\n        />\n        <TransactionList {...transactionListProps} />\n        {alert && (\n          <Snackbar\n            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n            autoHideDuration={3500}\n            onClose={() => setAlert('')}\n            open={Boolean(alert)}\n          >\n            <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n              {alert}\n            </Alert>\n          </Snackbar>\n        )}\n      </Drawer>\n      {formAction && (\n        <CurrencyDialog\n          closeAriaLabel={commonCopy.close_aria}\n          content={buildCopyWithBold(\n            budgetsCopy[formAction === Action.EDIT ? 'edit_budget_content' : 'delete_description'],\n            selectedBudget.category.name,\n          )}\n          handleInputChange={(value) => setAmount(value.toString())}\n          handleModalClose={handleFormDialogClose}\n          handlePrimaryAction={handlePrimaryAction}\n          handleSecondaryAction={handleFormDialogClose}\n          inputLabel={formAction === Action.EDIT ? budgetsCopy.details_edit_title : ''}\n          inputValue={amount}\n          isOpen={true}\n          primaryColor={formAction === Action.EDIT ? 'primary' : 'error'}\n          primaryText={\n            budgetsCopy[formAction === Action.EDIT ? 'add_save_button' : 'details_delete_button']\n          }\n          secondaryColor={formAction === Action.EDIT ? 'primary' : 'inherit'}\n          secondaryText={commonCopy.cancel_button}\n          title={budgetsCopy[formAction === Action.EDIT ? 'details_edit_title' : 'delete_title']}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default observer(BudgetDetailsDrawerV2)\n"],"mappings":"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"}
+{"version":3,"file":"BudgetDetailsDrawerV2.es.js","names":[],"sources":["../../../src/budgets/components/BudgetDetailsDrawerV2.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Alert from '@mui/material/Alert'\n\nimport Snackbar from '@mui/material/Snackbar'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon } from '@mxenabled/mxui'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport {\n  useBudgetsStore,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../common'\nimport { type Budget, type Transaction } from '../../core'\nimport { CurrencyDialog, Drawer, Loader } from '../../common/components'\nimport { TransactionList } from '../../transactions'\nimport { type TransactionListProps } from '../../transactions/components/shared/TransactionList'\n\nimport { getRemainingAmountSpentPercentage } from '../../core/utils/BudgetUtil'\n\nimport { BudgetDetailsTopSection } from './shared/BudgetDetailsTopSection'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nenum Action {\n  DELETE = 'delete',\n  EDIT = 'edit',\n}\n\ninterface BudgetDetailsDrawerV2Props {\n  onClose?: () => void\n  onEvent?: (event: string, amount: string) => void\n  onViewHistory?: () => void\n  transactionListProps?: TransactionListProps\n}\n\nconst EVENT_MESSAGES = {\n  CANCEL_DELETE: 'Cancel - Delete',\n  END_SAVE: 'End - Save',\n  END_DELETE: 'End - Delete',\n  START_DELETE: 'Start - Delete',\n}\n\n// V2 implementation of Budget Details Drawer.\n// This will replace BudgetDetailsDrawer\n// after the PFM design is finalized\n// and aligned with Insights.\n\nconst BudgetDetailsDrawerV2 = ({\n  onClose,\n  onEvent,\n  onViewHistory,\n  transactionListProps,\n}: BudgetDetailsDrawerV2Props) => {\n  const {\n    alert,\n    dateRange,\n    deleteBudget,\n    selectedBudget,\n    selectedSubBudget,\n    setAlert,\n    setSelectedBudget,\n    updateBudget,\n  } = useBudgetsStore()\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n  const { isCopyLoaded, selectedAccountGuids } = useGlobalUiStore()\n  const theme = useTheme()\n  const { setFilter } = useTransactionStore()\n\n  const [amount, setAmount] = React.useState('')\n  const [formAction, setFormAction] = React.useState<Action | null>(null)\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const inProgress = React.useRef(false)\n\n  React.useEffect(() => {\n    if (!selectedBudget || selectedSubBudget) return\n\n    setAmount(`${selectedBudget.amount}`)\n    setFilter({\n      accounts: selectedAccountGuids,\n      dateRange,\n      custom: ({ category_guid, top_level_category_guid }: Transaction) => {\n        const { category_guid: budgetCategoryGuid } = selectedBudget\n        return (\n          category_guid === budgetCategoryGuid || top_level_category_guid === budgetCategoryGuid\n        )\n      },\n    })\n    setIsOpen(true)\n  }, [selectedBudget])\n\n  if (!isCopyLoaded) return <Loader />\n  if (!selectedBudget) return null\n\n  const handleClose = () => {\n    setAmount('')\n    setFormAction(null)\n    setIsOpen(false)\n\n    setTimeout(() => {\n      setSelectedBudget(undefined)\n      onClose?.()\n    }, 250)\n  }\n\n  const handleFormDialogClose = () => {\n    if (formAction === Action.DELETE) onEvent?.(EVENT_MESSAGES.CANCEL_DELETE, amount)\n\n    setAmount(selectedBudget.amount ? `${selectedBudget.amount}` : '')\n    setFormAction(null)\n  }\n\n  const handlePrimaryAction = async () => {\n    if (formAction === Action.EDIT) {\n      if (inProgress.current) return\n      inProgress.current = true\n\n      await updateBudget({\n        ...selectedBudget,\n        amount: Number(amount),\n      } as Budget)\n      onEvent?.(EVENT_MESSAGES.END_SAVE, amount)\n\n      setAlert(\n        buildDynamicCopy(budgetsCopy.alert_budget_updated, selectedBudget.category.name) as string,\n      )\n      setFormAction(null)\n\n      inProgress.current = false\n    }\n\n    if (formAction === Action.DELETE) {\n      await deleteBudget(selectedBudget.guid)\n      onEvent?.(EVENT_MESSAGES.END_DELETE, amount)\n\n      handleClose()\n    }\n  }\n\n  const { remainingAmount, spentPercentage, iconColor } = getRemainingAmountSpentPercentage(\n    selectedBudget.transaction_total ?? 0,\n    selectedBudget.amount ?? 0,\n  )\n\n  const buildCopyWithBold = (copyKey: string, content: React.ReactNode): string => {\n    return buildDynamicCopy(copyKey, <b>{content}</b>) as string\n  }\n\n  return (\n    <React.Fragment>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        footerStyles={{\n          px: 24,\n          py: 16,\n        }}\n        isOpen={isOpen}\n        onClose={handleClose}\n        onPrimaryAction={() => setFormAction(Action.EDIT)}\n        onSecondaryAction={() => {\n          onEvent?.(EVENT_MESSAGES.START_DELETE, amount)\n          setFormAction(Action.DELETE)\n        }}\n        primaryText={budgetsCopy.details_edit_button}\n        secondaryColor=\"error\"\n        secondaryText={budgetsCopy.details_delete_button}\n        sx={{\n          '& .list-wrapper': {\n            pr: 24,\n          },\n        }}\n        title={\n          buildDynamicCopy(budgetsCopy.details_type_title, selectedBudget.category.name) as string\n        }\n      >\n        <BudgetDetailsTopSection\n          amount={selectedBudget.amount}\n          icon={\n            <CategoryIcon\n              categoryGuid={selectedBudget.category.guid}\n              size={44}\n              sx={{\n                bgcolor: alpha(getCategoryColor(selectedBudget.category.guid, theme), 0.15),\n                border: `1px solid ${getCategoryColor(selectedBudget.category.guid, theme)}`,\n                color: 'text.primary',\n              }}\n            />\n          }\n          iconColor={iconColor}\n          onViewHistory={onViewHistory}\n          remainingAmount={remainingAmount}\n          spentPercentage={spentPercentage}\n          startDate={(dateRange.start.getTime() ?? 0) / 1000}\n          totalTransaction={selectedBudget.transaction_total}\n        />\n        <TransactionList {...transactionListProps} />\n        {alert && (\n          <Snackbar\n            anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}\n            autoHideDuration={3500}\n            onClose={() => setAlert('')}\n            open={Boolean(alert)}\n          >\n            <Alert closeText=\"\" onClose={() => setAlert('')} severity=\"success\" variant=\"filled\">\n              {alert}\n            </Alert>\n          </Snackbar>\n        )}\n      </Drawer>\n      {formAction && (\n        <CurrencyDialog\n          closeAriaLabel={commonCopy.close_aria}\n          content={buildCopyWithBold(\n            budgetsCopy[formAction === Action.EDIT ? 'edit_budget_content' : 'delete_description'],\n            selectedBudget.category.name,\n          )}\n          handleInputChange={(value) => setAmount(value.toString())}\n          handleModalClose={handleFormDialogClose}\n          handlePrimaryAction={handlePrimaryAction}\n          handleSecondaryAction={handleFormDialogClose}\n          inputLabel={formAction === Action.EDIT ? budgetsCopy.details_edit_title : ''}\n          inputValue={amount}\n          isOpen={true}\n          primaryColor={formAction === Action.EDIT ? 'primary' : 'error'}\n          primaryText={\n            budgetsCopy[formAction === Action.EDIT ? 'add_save_button' : 'details_delete_button']\n          }\n          secondaryColor={formAction === Action.EDIT ? 'primary' : 'inherit'}\n          secondaryText={commonCopy.cancel_button}\n          title={budgetsCopy[formAction === Action.EDIT ? 'details_edit_title' : 'delete_title']}\n        />\n      )}\n    </React.Fragment>\n  )\n}\n\nexport default observer(BudgetDetailsDrawerV2)\n"],"mappings":"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"}

package/dist/budgets/components/BudgetList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BudgetList.es.js","names":[],"sources":["../../../src/budgets/components/BudgetList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport CardHeader from '@mui/material/CardHeader'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useBudgetsStore, useEvent, useGlobalCopyStore } from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport { BudgetRow } from './budgetlist/BudgetRow'\n\nexport const BudgetList = observer(() => {\n  const { onEvent } = useEvent()\n  const { budgets: copy } = useGlobalCopyStore()\n  const { detailedBudgets: budgets, setSelectedBudget } = useBudgetsStore()\n\n  const handleBudgetClick = (budget: DetailedBudget) => {\n    setSelectedBudget(budget)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {\n      budget_category: budget.category.name,\n      click_type: 'list',\n    })\n  }\n\n  return (\n    <Card elevation={2}>\n      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.budget_categories_title}</H3>} />\n      <CardContent sx={{ p: 0, ':last-child': { p: 0 } }}>\n        <List>\n          {budgets.map((budget) => (\n            <React.Fragment key={budget.guid}>\n              <BudgetRow budget={budget} onClick={handleBudgetClick} />\n              <Divider />\n            </React.Fragment>\n          ))}\n        </List>\n      </CardContent>\n    </Card>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,IAAa,EAAA,MAAe;AACvC,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,iBAAiB,GAAS,mBAAA,EAAA,IAAsB,EAAgB,GAElE,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAkB,CAAM,GACxB,EAAQ,EAAiB,+BAA+B;AAAA,MACtD,iBAAiB,EAAO,SAAS;AAAA,MACjC,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,WAAW;AAAA,cAAjB,CACE,gBAAA,EAAC,GAAD;AAAA,MAAY,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,MAAG;AAAA,MAAG,OAAO,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,wBAA4B,CAAA;AAAA,IAAI,CAAA,GACpF,gBAAA,EAAC,GAAD;AAAA,MAAa,IAAI;AAAA,QAAE,GAAG;AAAA,QAAG,eAAe,EAAE,GAAG,EAAE;AAAA,MAAE;AAAA,gBAC/C,gBAAA,EAAC,GAAD,EAAA,UACG,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAmB,QAAA;AAAA,QAAQ,SAAS;AAAA,MAAoB,CAAA,GACxD,gBAAA,EAAC,GAAD,CAAU,CAAA,CACI,EAAA,GAHK,EAAO,IAGZ,CACjB,EACG,CAAA;AAAA,IACK,CAAA,CACT;AAAA;AAEV,CAAC"}
+{"version":3,"file":"BudgetList.es.js","names":[],"sources":["../../../src/budgets/components/BudgetList.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport CardHeader from '@mui/material/CardHeader'\nimport Divider from '@mui/material/Divider'\nimport List from '@mui/material/List'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useBudgetsStore, useEvent, useGlobalCopyStore } from '../../common'\nimport { type DetailedBudget } from '../../core'\n\nimport { BudgetRow } from './budgetlist/BudgetRow'\n\nexport const BudgetList = observer(() => {\n  const { onEvent } = useEvent()\n  const { budgets: copy } = useGlobalCopyStore()\n  const { detailedBudgets: budgets, setSelectedBudget } = useBudgetsStore()\n\n  const handleBudgetClick = (budget: DetailedBudget) => {\n    setSelectedBudget(budget)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {\n      budget_category: budget.category.name,\n      click_type: 'list',\n    })\n  }\n\n  return (\n    <Card elevation={2}>\n      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.budget_categories_title}</H3>} />\n      <CardContent sx={{ p: 0, ':last-child': { p: 0 } }}>\n        <List>\n          {budgets.map((budget) => (\n            <React.Fragment key={budget.guid}>\n              <BudgetRow budget={budget} onClick={handleBudgetClick} />\n              <Divider />\n            </React.Fragment>\n          ))}\n        </List>\n      </CardContent>\n    </Card>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAgBA,IAAa,IAAa,EAAA,MAAe;AACvC,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,iBAAiB,GAAS,mBAAA,EAAA,IAAsB,EAAgB,GAElE,IAAA,CAAqB,MAA2B;AACpD,IAAA,EAAkB,CAAM,GACxB,EAAQ,EAAiB,+BAA+B;AAAA,MACtD,iBAAiB,EAAO,SAAS;AAAA,MACjC,YAAY;AAAA,IACd,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAM,WAAW;AAAA,IAAjB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAY,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,MAAG;AAAA,MAAG,OAAO,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,wBAA4B,CAAA;AAAA,IAAI,CAAA,GACpF,gBAAA,EAAC,GAAD;AAAA,MAAa,IAAI;AAAA,QAAE,GAAG;AAAA,QAAG,eAAe,EAAE,GAAG,EAAE;AAAA,MAAE;AAAA,MAC/C,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAmB,QAAA;AAAA,QAAQ,SAAS;AAAA,MAAoB,CAAA,GACxD,gBAAA,EAAC,GAAD,CAAU,CAAA,CACI,EAAA,GAHK,EAAO,IAGZ,CACjB,EACG,CAAA;AAAA,IACK,CAAA,CACT;AAAA;AAEV,CAAC"}

package/dist/budgets/components/MerchantBudgetDetailsDrawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"MerchantBudgetDetailsDrawer.es.js","names":[],"sources":["../../../src/budgets/components/MerchantBudgetDetailsDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MerchantLogo } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { BudgetDetailsTopSection } from './shared/BudgetDetailsTopSection'\n\nimport { getRemainingAmountSpentPercentage } from '../../core/utils/BudgetUtil'\n\nimport { useGlobalCopyStore, useTransactionStore } from '../../common'\nimport { type Transaction } from '../../core'\nimport { Drawer } from '../../common/components'\nimport type { MerchantBudget } from '../../core/types/Budget'\nimport { TransactionList } from '../../transactions'\nimport { CurrencyDialogAction } from '../../transactions/components/shared/transactiondetails/actions/AddMerchantBudgetAction'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\ninterface MerchantBudgetDetailsDrawerProps {\n  merchantBudget: MerchantBudget\n  transaction: Transaction\n  onClose: () => void\n  isOpen: boolean\n  setCurrencyDialogAction: (action: CurrencyDialogAction) => void\n  renderingToast?: () => React.ReactNode\n}\n\nexport const MerchantBudgetDetailsDrawer = ({\n  merchantBudget,\n  transaction,\n  onClose,\n  isOpen,\n  setCurrencyDialogAction,\n  renderingToast,\n}: MerchantBudgetDetailsDrawerProps) => {\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n\n  const { sortedTransactions } = useTransactionStore()\n\n  const transactionTotal = React.useMemo(() => {\n    return sortedTransactions.reduce((acc, t) => {\n      if (!t.parent_guid) {\n        return acc + t.amount\n      }\n      return acc\n    }, 0)\n  }, [sortedTransactions])\n\n  const { remainingAmount, spentPercentage, iconColor } = getRemainingAmountSpentPercentage(\n    transactionTotal,\n    merchantBudget.amount ?? 0,\n  )\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      footerStyles={{\n        px: 24,\n        py: 16,\n      }}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPrimaryAction={() => setCurrencyDialogAction(CurrencyDialogAction.EDIT)}\n      onSecondaryAction={() => {\n        setCurrencyDialogAction(CurrencyDialogAction.DELETE)\n      }}\n      primaryText={budgetsCopy.details_edit_button}\n      secondaryColor=\"error\"\n      secondaryText={budgetsCopy.details_delete_button}\n      sx={{\n        '& .list-wrapper': {\n          pr: 24,\n        },\n      }}\n      title={\n        buildDynamicCopy(budgetsCopy.details_type_title, merchantBudget.merchant_name) as string\n      }\n    >\n      <BudgetDetailsTopSection\n        amount={merchantBudget.amount}\n        icon={\n          <MerchantLogo\n            categoryGuid={transaction.top_level_category_guid || ''}\n            merchantGuid={transaction.merchant_guid || ''}\n          />\n        }\n        iconColor={iconColor}\n        remainingAmount={remainingAmount}\n        spentPercentage={spentPercentage}\n        startDate={transaction.date}\n        totalTransaction={transactionTotal}\n      />\n      <TransactionList />\n      {renderingToast?.()}\n    </Drawer>\n  )\n}\n\nexport default observer(MerchantBudgetDetailsDrawer)\n"],"mappings":";;;;;;;;;;;AA2BA,IAAa,IAAA,CAA+B,EAC1C,gBAAA,GACA,aAAA,GACA,SAAA,GACA,QAAA,GACA,yBAAA,GACA,gBAAA,EAAA,MACsC;AACtC,QAAM,EAAE,SAAS,GAAa,QAAQ,EAAA,IAAe,EAAmB,GAElE,EAAE,oBAAA,EAAA,IAAuB,EAAoB,GAE7C,IAAmB,EAAM,QAAA,MACtB,EAAmB,OAAA,CAAQ,GAAK,MAChC,EAAE,cAGA,IAFE,IAAM,EAAE,QAGhB,CAAC,GACH,CAAC,CAAkB,CAAC,GAEjB,EAAE,iBAAA,GAAiB,iBAAA,GAAiB,WAAA,EAAA,IAAc,EACtD,GACA,EAAe,UAAU,CAC3B;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,cAAc;AAAA,MACZ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACQ,QAAA;AAAA,IACC,SAAA;AAAA,IACT,iBAAA,MAAuB,EAAwB,EAAqB,IAAI;AAAA,IACxE,mBAAA,MAAyB;AACvB,MAAA,EAAwB,EAAqB,MAAM;AAAA,IACrD;AAAA,IACA,aAAa,EAAY;AAAA,IACzB,gBAAe;AAAA,IACf,eAAe,EAAY;AAAA,IAC3B,IAAI,EACF,mBAAmB,EACjB,IAAI,GACN,EACF;AAAA,IACA,OACE,EAAiB,EAAY,oBAAoB,EAAe,aAAa;AAAA,cArBjF;AAAA,MAwBE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,EAAe;AAAA,QACvB,MACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAc,EAAY,2BAA2B;AAAA,UACrD,cAAc,EAAY,iBAAiB;AAAA,QAC5C,CAAA;AAAA,QAEQ,WAAA;AAAA,QACM,iBAAA;AAAA,QACA,iBAAA;AAAA,QACjB,WAAW,EAAY;AAAA,QACvB,kBAAkB;AAAA,MACnB,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD,CAAkB,CAAA;AAAA,MACjB,IAAiB;AAAA,IACZ;AAAA;AAEZ,GAEA,IAAe,EAAS,CAA2B"}
+{"version":3,"file":"MerchantBudgetDetailsDrawer.es.js","names":[],"sources":["../../../src/budgets/components/MerchantBudgetDetailsDrawer.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MerchantLogo } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { BudgetDetailsTopSection } from './shared/BudgetDetailsTopSection'\n\nimport { getRemainingAmountSpentPercentage } from '../../core/utils/BudgetUtil'\n\nimport { useGlobalCopyStore, useTransactionStore } from '../../common'\nimport { type Transaction } from '../../core'\nimport { Drawer } from '../../common/components'\nimport type { MerchantBudget } from '../../core/types/Budget'\nimport { TransactionList } from '../../transactions'\nimport { CurrencyDialogAction } from '../../transactions/components/shared/transactiondetails/actions/AddMerchantBudgetAction'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\ninterface MerchantBudgetDetailsDrawerProps {\n  merchantBudget: MerchantBudget\n  transaction: Transaction\n  onClose: () => void\n  isOpen: boolean\n  setCurrencyDialogAction: (action: CurrencyDialogAction) => void\n  renderingToast?: () => React.ReactNode\n}\n\nexport const MerchantBudgetDetailsDrawer = ({\n  merchantBudget,\n  transaction,\n  onClose,\n  isOpen,\n  setCurrencyDialogAction,\n  renderingToast,\n}: MerchantBudgetDetailsDrawerProps) => {\n  const { budgets: budgetsCopy, common: commonCopy } = useGlobalCopyStore()\n\n  const { sortedTransactions } = useTransactionStore()\n\n  const transactionTotal = React.useMemo(() => {\n    return sortedTransactions.reduce((acc, t) => {\n      if (!t.parent_guid) {\n        return acc + t.amount\n      }\n      return acc\n    }, 0)\n  }, [sortedTransactions])\n\n  const { remainingAmount, spentPercentage, iconColor } = getRemainingAmountSpentPercentage(\n    transactionTotal,\n    merchantBudget.amount ?? 0,\n  )\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      footerStyles={{\n        px: 24,\n        py: 16,\n      }}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPrimaryAction={() => setCurrencyDialogAction(CurrencyDialogAction.EDIT)}\n      onSecondaryAction={() => {\n        setCurrencyDialogAction(CurrencyDialogAction.DELETE)\n      }}\n      primaryText={budgetsCopy.details_edit_button}\n      secondaryColor=\"error\"\n      secondaryText={budgetsCopy.details_delete_button}\n      sx={{\n        '& .list-wrapper': {\n          pr: 24,\n        },\n      }}\n      title={\n        buildDynamicCopy(budgetsCopy.details_type_title, merchantBudget.merchant_name) as string\n      }\n    >\n      <BudgetDetailsTopSection\n        amount={merchantBudget.amount}\n        icon={\n          <MerchantLogo\n            categoryGuid={transaction.top_level_category_guid || ''}\n            merchantGuid={transaction.merchant_guid || ''}\n          />\n        }\n        iconColor={iconColor}\n        remainingAmount={remainingAmount}\n        spentPercentage={spentPercentage}\n        startDate={transaction.date}\n        totalTransaction={transactionTotal}\n      />\n      <TransactionList />\n      {renderingToast?.()}\n    </Drawer>\n  )\n}\n\nexport default observer(MerchantBudgetDetailsDrawer)\n"],"mappings":";;;;;;;;;;;AA2BA,IAAa,IAAA,CAA+B,EAC1C,gBAAA,GACA,aAAA,GACA,SAAA,GACA,QAAA,GACA,yBAAA,GACA,gBAAA,EAAA,MACsC;AACtC,QAAM,EAAE,SAAS,GAAa,QAAQ,EAAA,IAAe,EAAmB,GAElE,EAAE,oBAAA,EAAA,IAAuB,EAAoB,GAE7C,IAAmB,EAAM,QAAA,MACtB,EAAmB,OAAA,CAAQ,GAAK,MAChC,EAAE,cAGA,IAFE,IAAM,EAAE,QAGhB,CAAC,GACH,CAAC,CAAkB,CAAC,GAEjB,EAAE,iBAAA,GAAiB,iBAAA,GAAiB,WAAA,EAAA,IAAc,EACtD,GACA,EAAe,UAAU,CAC3B;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,cAAc;AAAA,MACZ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IACQ,QAAA;AAAA,IACC,SAAA;AAAA,IACT,iBAAA,MAAuB,EAAwB,EAAqB,IAAI;AAAA,IACxE,mBAAA,MAAyB;AACvB,MAAA,EAAwB,EAAqB,MAAM;AAAA,IACrD;AAAA,IACA,aAAa,EAAY;AAAA,IACzB,gBAAe;AAAA,IACf,eAAe,EAAY;AAAA,IAC3B,IAAI,EACF,mBAAmB,EACjB,IAAI,GACN,EACF;AAAA,IACA,OACE,EAAiB,EAAY,oBAAoB,EAAe,aAAa;AAAA,IArBjF,UAAA;AAAA,MAwBE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,EAAe;AAAA,QACvB,MACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAc,EAAY,2BAA2B;AAAA,UACrD,cAAc,EAAY,iBAAiB;AAAA,QAC5C,CAAA;AAAA,QAEQ,WAAA;AAAA,QACM,iBAAA;AAAA,QACA,iBAAA;AAAA,QACjB,WAAW,EAAY;AAAA,QACvB,kBAAkB;AAAA,MACnB,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD,CAAkB,CAAA;AAAA,MACjB,IAAiB;AAAA,IACZ;AAAA;AAEZ,GAEA,IAAe,EAAS,CAA2B"}

package/dist/budgets/components/Overview.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overview.es.js","names":[],"sources":["../../../src/budgets/components/Overview.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { subDays } from 'date-fns/subDays'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport CardHeader from '@mui/material/CardHeader'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { H3, Icon, Text } from '@mxenabled/mxui'\n\nimport {\n  type StatusBarData,\n  ANALYTICS_EVENTS,\n  Drawer,\n  StatusBar,\n  useBudgetsStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n  useAccountStore,\n  useEvent,\n} from '../../common'\nimport { ManageIncome } from '../../recurringtransactions'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const Overview = observer(() => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { visibleAccounts: accounts } = useAccountStore()\n  const { budgets: copy, common: commonCopy, recurring: recurringCopy } = useGlobalCopyStore()\n  const { incomeCategories, spendCategories } = useCategoryStore()\n  const { detailedBudgets: budgets, totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n  const { setFilter } = useTransactionStore()\n\n  const [isIncomeOpen, setIsIncomeOpen] = React.useState(false)\n\n  const [spentTotal, spendingStatus] = React.useMemo(() => {\n    const spentTotal = spendCategories.reduce((total, current) => total + current.totalAmount, 0)\n    let spendingPercentage = spentTotal / totalBudgeted\n    if (spendingPercentage > 1) spendingPercentage = 1\n    let color = theme.palette.success.main\n    if (spendingPercentage > 0.8 && spendingPercentage < 1) {\n      color = theme.palette.warning.main\n    } else if (spendingPercentage >= 1) {\n      color = theme.palette.error.main\n    }\n\n    const spendingStatus = [\n      {\n        color,\n        percentage: `${spendingPercentage}`,\n      },\n    ] as StatusBarData[]\n    return [spentTotal, spendingStatus]\n  }, [budgets, spendCategories])\n\n  const [incomePaid, incomeStatus] = React.useMemo(() => {\n    const incomePaid = Math.abs(\n      incomeCategories.reduce((total, current) => total + current.totalAmount, 0),\n    )\n    let incomePercentage = incomePaid / incomeTotal\n    if (incomePercentage > 1) incomePercentage = 1\n\n    const incomeStatus = [\n      {\n        color: theme.palette.secondary.main,\n        percentage: `${incomePercentage}`,\n      },\n    ]\n    return [incomePaid, incomeStatus]\n  }, [incomeCategories, incomeTotal])\n\n  const handleOpenIncome = () => {\n    setFilter({\n      accounts: accounts.map((account) => account.guid),\n      dateRange: {\n        start: subDays(new Date(), 90),\n        end: new Date(),\n      },\n    })\n    setIsIncomeOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_EDIT_INCOME)\n  }\n\n  return (\n    <Card elevation={2} sx={{ overflow: 'visible' }}>\n      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.overview_title}</H3>} />\n      <CardContent sx={{ pt: 12, px: 24 }}>\n        <Stack gap={24}>\n          <Stack gap={8}>\n            <Text bold={true} sx={{ mb: 8 }} variant=\"body1\">\n              {copy.spending_title}\n            </Text>\n            <StatusBar data={spendingStatus} height={16} />\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  copy.spending_description,\n                  formatCurrency(spentTotal, '0,0'),\n                  formatCurrency(totalBudgeted, '0,0'),\n                ) as string\n              }\n            </Text>\n          </Stack>\n\n          <Stack gap={8}>\n            <Stack alignItems=\"center\" direction=\"row\" gap={4} mb={-4}>\n              <Text bold={true} variant=\"body1\">\n                {copy.income_title}\n              </Text>\n              <IconButton\n                aria-label={recurringCopy.manage_income}\n                onClick={handleOpenIncome}\n                sx={{ p: 0 }}\n              >\n                <Icon color=\"primary\" name=\"edit\" />\n              </IconButton>\n            </Stack>\n            <StatusBar data={incomeStatus} height={16} />\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  copy.income_description,\n                  formatCurrency(incomePaid, '0,0'),\n                  formatCurrency(incomeTotal, '0,0'),\n                ) as string\n              }\n            </Text>\n          </Stack>\n        </Stack>\n      </CardContent>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isIncomeOpen}\n        onClose={() => setIsIncomeOpen(false)}\n        title={recurringCopy.manage_income}\n      >\n        <ManageIncome forOverview={true} />\n      </Drawer>\n    </Card>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"Overview.es.js","names":[],"sources":["../../../src/budgets/components/Overview.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { subDays } from 'date-fns/subDays'\n\nimport Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport CardHeader from '@mui/material/CardHeader'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { H3, Icon, Text } from '@mxenabled/mxui'\n\nimport {\n  type StatusBarData,\n  ANALYTICS_EVENTS,\n  Drawer,\n  StatusBar,\n  useBudgetsStore,\n  useCategoryStore,\n  useGlobalCopyStore,\n  useRecurringTransactionsStore,\n  useTransactionStore,\n  useAccountStore,\n  useEvent,\n} from '../../common'\nimport { ManageIncome } from '../../recurringtransactions'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../core/utils/Localization'\n\nexport const Overview = observer(() => {\n  const theme = useTheme()\n\n  const { onEvent } = useEvent()\n  const { visibleAccounts: accounts } = useAccountStore()\n  const { budgets: copy, common: commonCopy, recurring: recurringCopy } = useGlobalCopyStore()\n  const { incomeCategories, spendCategories } = useCategoryStore()\n  const { detailedBudgets: budgets, totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n  const { setFilter } = useTransactionStore()\n\n  const [isIncomeOpen, setIsIncomeOpen] = React.useState(false)\n\n  const [spentTotal, spendingStatus] = React.useMemo(() => {\n    const spentTotal = spendCategories.reduce((total, current) => total + current.totalAmount, 0)\n    let spendingPercentage = spentTotal / totalBudgeted\n    if (spendingPercentage > 1) spendingPercentage = 1\n    let color = theme.palette.success.main\n    if (spendingPercentage > 0.8 && spendingPercentage < 1) {\n      color = theme.palette.warning.main\n    } else if (spendingPercentage >= 1) {\n      color = theme.palette.error.main\n    }\n\n    const spendingStatus = [\n      {\n        color,\n        percentage: `${spendingPercentage}`,\n      },\n    ] as StatusBarData[]\n    return [spentTotal, spendingStatus]\n  }, [budgets, spendCategories])\n\n  const [incomePaid, incomeStatus] = React.useMemo(() => {\n    const incomePaid = Math.abs(\n      incomeCategories.reduce((total, current) => total + current.totalAmount, 0),\n    )\n    let incomePercentage = incomePaid / incomeTotal\n    if (incomePercentage > 1) incomePercentage = 1\n\n    const incomeStatus = [\n      {\n        color: theme.palette.secondary.main,\n        percentage: `${incomePercentage}`,\n      },\n    ]\n    return [incomePaid, incomeStatus]\n  }, [incomeCategories, incomeTotal])\n\n  const handleOpenIncome = () => {\n    setFilter({\n      accounts: accounts.map((account) => account.guid),\n      dateRange: {\n        start: subDays(new Date(), 90),\n        end: new Date(),\n      },\n    })\n    setIsIncomeOpen(true)\n    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_EDIT_INCOME)\n  }\n\n  return (\n    <Card elevation={2} sx={{ overflow: 'visible' }}>\n      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.overview_title}</H3>} />\n      <CardContent sx={{ pt: 12, px: 24 }}>\n        <Stack gap={24}>\n          <Stack gap={8}>\n            <Text bold={true} sx={{ mb: 8 }} variant=\"body1\">\n              {copy.spending_title}\n            </Text>\n            <StatusBar data={spendingStatus} height={16} />\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  copy.spending_description,\n                  formatCurrency(spentTotal, '0,0'),\n                  formatCurrency(totalBudgeted, '0,0'),\n                ) as string\n              }\n            </Text>\n          </Stack>\n\n          <Stack gap={8}>\n            <Stack alignItems=\"center\" direction=\"row\" gap={4} mb={-4}>\n              <Text bold={true} variant=\"body1\">\n                {copy.income_title}\n              </Text>\n              <IconButton\n                aria-label={recurringCopy.manage_income}\n                onClick={handleOpenIncome}\n                sx={{ p: 0 }}\n              >\n                <Icon color=\"primary\" name=\"edit\" />\n              </IconButton>\n            </Stack>\n            <StatusBar data={incomeStatus} height={16} />\n            <Text variant=\"body2\">\n              {\n                buildDynamicCopy(\n                  copy.income_description,\n                  formatCurrency(incomePaid, '0,0'),\n                  formatCurrency(incomeTotal, '0,0'),\n                ) as string\n              }\n            </Text>\n          </Stack>\n        </Stack>\n      </CardContent>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isIncomeOpen}\n        onClose={() => setIsIncomeOpen(false)}\n        title={recurringCopy.manage_income}\n      >\n        <ManageIncome forOverview={true} />\n      </Drawer>\n    </Card>\n  )\n})\n"],"mappings":"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"}

package/dist/budgets/components/addbudget/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/Header.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useBudgetsStore, useGlobalCopyStore, useRecurringTransactionsStore } from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport const Header = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n\n  const remaining = incomeTotal - totalBudgeted\n\n  return (\n    <Stack direction=\"row\" justifyContent=\"center\" my={16} spacing={20}>\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(incomeTotal, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.projected_income}\n        </Text>\n      </Stack>\n\n      <Text bold={true} justifyContent=\"center\" variant=\"body1\">\n        {'-'}\n      </Text>\n\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(totalBudgeted, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.budgeted}\n        </Text>\n      </Stack>\n\n      <Text bold={true} justifyContent=\"center\" variant=\"body1\">\n        {'='}\n      </Text>\n\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(remaining, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.remaining}\n        </Text>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AASA,IAAa,IAAS,EAAA,MAAe;AACnC,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,aAAA,EAAA,IAAgB,EAA8B,GAEhD,IAAY,IAAc;AAEhC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAM,gBAAe;AAAA,IAAS,IAAI;AAAA,IAAI,SAAS;AAAA,cAAhE;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,kBAAlB,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAe,GAAa,KAAK;AAAA,QAC9B,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,oBAC7B,EAAK;AAAA,QACF,CAAA,CACD;AAAA;MAEP,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,gBAAe;AAAA,QAAS,SAAQ;AAAA,kBAC/C;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,kBAAlB,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAe,GAAe,KAAK;AAAA,QAChC,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,oBAC7B,EAAK;AAAA,QACF,CAAA,CACD;AAAA;MAEP,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,gBAAe;AAAA,QAAS,SAAQ;AAAA,kBAC/C;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,kBAAlB,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAe,GAAW,KAAK;AAAA,QAC5B,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,oBAC7B,EAAK;AAAA,QACF,CAAA,CACD;AAAA;IACF;AAAA;AAEX,CAAC"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/Header.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useBudgetsStore, useGlobalCopyStore, useRecurringTransactionsStore } from '../../../common'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\n\nexport const Header = observer(() => {\n  const { budgets: copy } = useGlobalCopyStore()\n  const { totalBudgeted } = useBudgetsStore()\n  const { incomeTotal } = useRecurringTransactionsStore()\n\n  const remaining = incomeTotal - totalBudgeted\n\n  return (\n    <Stack direction=\"row\" justifyContent=\"center\" my={16} spacing={20}>\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(incomeTotal, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.projected_income}\n        </Text>\n      </Stack>\n\n      <Text bold={true} justifyContent=\"center\" variant=\"body1\">\n        {'-'}\n      </Text>\n\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(totalBudgeted, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.budgeted}\n        </Text>\n      </Stack>\n\n      <Text bold={true} justifyContent=\"center\" variant=\"body1\">\n        {'='}\n      </Text>\n\n      <Stack alignItems=\"center\">\n        <Text bold={true} variant=\"body1\">\n          {formatCurrency(remaining, '0,0')}\n        </Text>\n        <Text color=\"secondary\" variant=\"body2\">\n          {copy.remaining}\n        </Text>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AASA,IAAa,IAAS,EAAA,MAAe;AACnC,QAAM,EAAE,SAAS,EAAA,IAAS,EAAmB,GACvC,EAAE,eAAA,EAAA,IAAkB,EAAgB,GACpC,EAAE,aAAA,EAAA,IAAgB,EAA8B,GAEhD,IAAY,IAAc;AAEhC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,WAAU;AAAA,IAAM,gBAAe;AAAA,IAAS,IAAI;AAAA,IAAI,SAAS;AAAA,IAAhE,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAlB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAe,GAAa,KAAK;AAAA,QAC9B,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,UAC7B,UAAA,EAAK;AAAA,QACF,CAAA,CACD;AAAA;MAEP,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,gBAAe;AAAA,QAAS,SAAQ;AAAA,QAC/C,UAAA;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAlB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAe,GAAe,KAAK;AAAA,QAChC,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,UAC7B,UAAA,EAAK;AAAA,QACF,CAAA,CACD;AAAA;MAEP,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,gBAAe;AAAA,QAAS,SAAQ;AAAA,QAC/C,UAAA;AAAA,MACG,CAAA;AAAA,MAEN,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAlB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAe,GAAW,KAAK;AAAA,QAC5B,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAY,SAAQ;AAAA,UAC7B,UAAA,EAAK;AAAA,QACF,CAAA,CACD;AAAA;IACF;AAAA;AAEX,CAAC"}

package/dist/budgets/components/addbudget/RecalculateBudgets.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecalculateBudgets.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/RecalculateBudgets.tsx"],"sourcesContent":["import React from 'react'\n\nimport Button from '@mui/material/Button'\nimport List from '@mui/material/List'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Drawer, useBudgetsStore, useCategoryStore, useGlobalCopyStore } from '../../../common'\n\nimport { RecalculateBudgetRow } from './RecalculateBudgetRow'\n\ninterface RecalculateBudgetsProps {\n  onRecalculateBudgets?: () => void\n}\n\nexport const RecalculateBudgets = ({ onRecalculateBudgets }: RecalculateBudgetsProps) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { spendCategories } = useCategoryStore()\n  const { recalculateBudgets, setAlert } = useBudgetsStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const newBudgetCategories = spendCategories.filter((category) => category.totalAverageAmount > 0)\n\n  const handlePrimaryClick = async () => {\n    await recalculateBudgets(newBudgetCategories)\n\n    setIsOpen(false)\n    setAlert(copy.alert_recalculated_budgets)\n    onRecalculateBudgets?.()\n  }\n\n  return (\n    <React.Fragment>\n      <Button onClick={() => setIsOpen(true)} sx={{ mt: 24, mx: 24 }} variant=\"text\">\n        {copy.recalculate_button}\n      </Button>\n\n      <Text sx={{ mx: 24, my: 16, textAlign: 'center' }} variant=\"subtitle1\">\n        {copy.recalculate_help}\n      </Text>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        onPrimaryAction={handlePrimaryClick}\n        title={copy.recalculate_title}\n      >\n        <Stack>\n          <Stack mx={24} my={16}>\n            <Text bold={true} variant=\"body1\">\n              {copy.recalculate_description_top}\n            </Text>\n            <Text variant=\"subtitle2\">{copy.recalculate_description_bottom}</Text>\n          </Stack>\n          <Box bgcolor=\"background.paper\">\n            <List>\n              {newBudgetCategories.map((category) => (\n                <RecalculateBudgetRow category={category} key={category.guid} />\n              ))}\n            </List>\n          </Box>\n        </Stack>\n      </Drawer>\n    </React.Fragment>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,IAAA,CAAsB,EAAE,sBAAA,EAAA,MAAoD;AACvF,QAAM,EAAE,SAAS,GAAM,QAAQ,EAAA,IAAe,EAAmB,GAC3D,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,EAAE,oBAAA,GAAoB,UAAA,EAAA,IAAa,EAAgB,GAEnD,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAE1C,IAAsB,EAAgB,OAAA,CAAQ,MAAa,EAAS,qBAAqB,CAAC,GAE1F,IAAqB,YAAY;AACrC,UAAM,EAAmB,CAAmB,GAE5C,EAAU,EAAK,GACf,EAAS,EAAK,0BAA0B,GACxC,IAAuB;AAAA,EACzB;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,SAAA,MAAe,EAAU,EAAI;AAAA,MAAG,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAAG,SAAQ;AAAA,gBACrE,EAAK;AAAA,IACA,CAAA;AAAA,IAER,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,QAAI,WAAW;AAAA,MAAS;AAAA,MAAG,SAAQ;AAAA,gBACxD,EAAK;AAAA,IACF,CAAA;AAAA,IACN,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MACnB,QAAA;AAAA,MACR,SAAA,MAAe,EAAU,EAAK;AAAA,MAC9B,iBAAiB;AAAA,MACjB,OAAO,EAAK;AAAA,gBAEZ,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,QAAI,IAAI;AAAA,kBAAnB,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,oBACvB,EAAK;AAAA,QACF,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,oBAAa,EAAK;AAAA,QAAqC,CAAA,CAChE;AAAA,UACP,gBAAA,EAAC,GAAD;AAAA,QAAK,SAAQ;AAAA,kBACX,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,MACxB,gBAAA,EAAC,GAAD,EAAgC,UAAA,EAA+B,GAAhB,EAAS,IAAO,CAChE,EACG,CAAA;AAAA,MACH,CAAA,CACA,EAAA,CAAA;AAAA,IACD,CAAA;AAAA,EACM,EAAA,CAAA;AAEpB"}
+{"version":3,"file":"RecalculateBudgets.es.js","names":[],"sources":["../../../../src/budgets/components/addbudget/RecalculateBudgets.tsx"],"sourcesContent":["import React from 'react'\n\nimport Button from '@mui/material/Button'\nimport List from '@mui/material/List'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Drawer, useBudgetsStore, useCategoryStore, useGlobalCopyStore } from '../../../common'\n\nimport { RecalculateBudgetRow } from './RecalculateBudgetRow'\n\ninterface RecalculateBudgetsProps {\n  onRecalculateBudgets?: () => void\n}\n\nexport const RecalculateBudgets = ({ onRecalculateBudgets }: RecalculateBudgetsProps) => {\n  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()\n  const { spendCategories } = useCategoryStore()\n  const { recalculateBudgets, setAlert } = useBudgetsStore()\n\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  const newBudgetCategories = spendCategories.filter((category) => category.totalAverageAmount > 0)\n\n  const handlePrimaryClick = async () => {\n    await recalculateBudgets(newBudgetCategories)\n\n    setIsOpen(false)\n    setAlert(copy.alert_recalculated_budgets)\n    onRecalculateBudgets?.()\n  }\n\n  return (\n    <React.Fragment>\n      <Button onClick={() => setIsOpen(true)} sx={{ mt: 24, mx: 24 }} variant=\"text\">\n        {copy.recalculate_button}\n      </Button>\n\n      <Text sx={{ mx: 24, my: 16, textAlign: 'center' }} variant=\"subtitle1\">\n        {copy.recalculate_help}\n      </Text>\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isOpen}\n        onClose={() => setIsOpen(false)}\n        onPrimaryAction={handlePrimaryClick}\n        title={copy.recalculate_title}\n      >\n        <Stack>\n          <Stack mx={24} my={16}>\n            <Text bold={true} variant=\"body1\">\n              {copy.recalculate_description_top}\n            </Text>\n            <Text variant=\"subtitle2\">{copy.recalculate_description_bottom}</Text>\n          </Stack>\n          <Box bgcolor=\"background.paper\">\n            <List>\n              {newBudgetCategories.map((category) => (\n                <RecalculateBudgetRow category={category} key={category.guid} />\n              ))}\n            </List>\n          </Box>\n        </Stack>\n      </Drawer>\n    </React.Fragment>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,IAAA,CAAsB,EAAE,sBAAA,EAAA,MAAoD;AACvF,QAAM,EAAE,SAAS,GAAM,QAAQ,EAAA,IAAe,EAAmB,GAC3D,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GACvC,EAAE,oBAAA,GAAoB,UAAA,EAAA,IAAa,EAAgB,GAEnD,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,EAAK,GAE1C,IAAsB,EAAgB,OAAA,CAAQ,MAAa,EAAS,qBAAqB,CAAC,GAE1F,IAAqB,YAAY;AACrC,UAAM,EAAmB,CAAmB,GAE5C,EAAU,EAAK,GACf,EAAS,EAAK,0BAA0B,GACxC,IAAuB;AAAA,EACzB;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,SAAA,MAAe,EAAU,EAAI;AAAA,MAAG,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAAG,SAAQ;AAAA,MACrE,UAAA,EAAK;AAAA,IACA,CAAA;AAAA,IAER,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,QAAI,WAAW;AAAA,MAAS;AAAA,MAAG,SAAQ;AAAA,MACxD,UAAA,EAAK;AAAA,IACF,CAAA;AAAA,IACN,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MACnB,QAAA;AAAA,MACR,SAAA,MAAe,EAAU,EAAK;AAAA,MAC9B,iBAAiB;AAAA,MACjB,OAAO,EAAK;AAAA,MAEZ,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,QAAI,IAAI;AAAA,QAAnB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA,EAAK;AAAA,QACF,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAM,SAAQ;AAAA,UAAa,UAAA,EAAK;AAAA,QAAqC,CAAA,CAChE;AAAA,MACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAK,SAAQ;AAAA,QACX,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,MACxB,gBAAA,EAAC,GAAD,EAAgC,UAAA,EAA+B,GAAhB,EAAS,IAAO,CAChE,EACG,CAAA;AAAA,MACH,CAAA,CACA,EAAA,CAAA;AAAA,IACD,CAAA;AAAA,EACM,EAAA,CAAA;AAEpB"}