@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

package/dist/trends/components/CategoriesList.es.js

@@ -0,0 +1,64 @@
+import { useEvent as v, useGlobalCopyStore as T, useTrendsStore as A } from "../../common/context/hooks.es.js";
+import { useScreenSize as D } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as M } from "../../common/constants/Analytics.es.js";
+import { TRENDS_ANALYTICS_METADATA as _ } from "../constants/TrendsWidget.es.js";
+import { CollapseExpandListItem as b } from "../../common/components/listitems/CollapseExpandListItem.es.js";
+import a from "./CategoriesListItem.es.js";
+import d from "react";
+import { observer as k } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { H3 as N } from "@mxenabled/mxui";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import f from "@mui/material/List";
+import w from "@mui/material/Collapse";
+var J = k(({ availableHeight: n = 0, onCategoryClick: l }) => {
+  const { collapsedCategories: i, visibleCategories: o, setVisibleListLength: L } = A(), { isLargeDesktop: u, isDesktop: C } = D(), { trends: g } = T(), { onEvent: E } = v(), [r, m] = d.useState(!1), x = C || u;
+  d.useEffect(() => {
+    const t = Math.floor(n / 64) - 1, s = o.length + i.length;
+    t !== o.length && (L(x ? Math.max(t, 5) : 5), m(t >= s));
+  }, [n]);
+  const I = () => {
+    m(!r), E(M.TRENDS_CLICK_VIEW_MORE, { ..._ });
+  }, p = o.length + (r ? i.length : 0);
+  return /* @__PURE__ */ h(c, {
+    sx: { width: "100%" },
+    children: [/* @__PURE__ */ e(c, {
+      sx: {
+        pb: 4,
+        pt: 16,
+        px: 16
+      },
+      children: /* @__PURE__ */ e(N, { children: g.categories })
+    }), /* @__PURE__ */ h(f, { children: [
+      o.map((t, s) => /* @__PURE__ */ e(a, {
+        ...t,
+        isLastItem: s === p - 1,
+        onClick: t.transactions.length > 0 ? () => l(t) : void 0,
+        showDivider: !0
+      }, t.guid)),
+      /* @__PURE__ */ e(w, {
+        component: "li",
+        in: r,
+        sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
+        children: /* @__PURE__ */ e(f, { children: i.map((t, s) => {
+          const S = o.length + s;
+          return /* @__PURE__ */ e(a, {
+            ...t,
+            isLastItem: S === p - 1,
+            onClick: t.transactions.length > 0 ? () => l(t) : void 0,
+            showDivider: !0
+          }, t.guid);
+        }) })
+      }),
+      i.length > 0 && /* @__PURE__ */ e(b, {
+        isExpanded: r,
+        onClick: I
+      })
+    ] })]
+  });
+});
+export {
+  J as default
+};
+
+//# sourceMappingURL=CategoriesList.es.js.map

package/dist/trends/components/CategoriesList.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesList.es.js","names":[],"sources":["../../../src/trends/components/CategoriesList.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Collapse from '@mui/material/Collapse'\n\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  useEvent,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTrendsStore,\n} from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\nimport { CollapseExpandListItem } from '../../common/components/listitems/CollapseExpandListItem'\nimport CategoriesListItem from './CategoriesListItem'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface CategoriesListProps {\n  availableHeight?: number\n  minHeight?: number\n  onCategoryClick: (data: DetailedCategoryWithTransactions) => void\n}\n\nconst CategoriesList: React.FC<CategoriesListProps> = observer(\n  ({ availableHeight = 0, onCategoryClick }) => {\n    const { collapsedCategories, visibleCategories, setVisibleListLength } = useTrendsStore()\n    const { isLargeDesktop, isDesktop } = useScreenSize()\n    const { trends: copy } = useGlobalCopyStore()\n    const { onEvent } = useEvent()\n    const [isExpanded, setIsExpanded] = React.useState(false)\n\n    const isLargeLayout = isDesktop || isLargeDesktop\n\n    React.useEffect(() => {\n      // Divide available height by item height (64px), minus 1 for more/less button\n      const newVisibleListLength = Math.floor(availableHeight / 64) - 1\n      const totalListItems = visibleCategories.length + collapsedCategories.length\n\n      if (newVisibleListLength !== visibleCategories.length) {\n        // Always show at least 5 items on large layout, and 5 items on small layout\n        // Also ignores when availableHeight < 0 on initial render\n        setVisibleListLength(isLargeLayout ? Math.max(newVisibleListLength, 5) : 5)\n        setIsExpanded(newVisibleListLength >= totalListItems)\n      }\n    }, [availableHeight])\n\n    const handleCollapseExpand = () => {\n      setIsExpanded(!isExpanded)\n      onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE, {\n        ...TRENDS_ANALYTICS_METADATA,\n      })\n    }\n\n    const totalCategories = visibleCategories.length + (isExpanded ? collapsedCategories.length : 0)\n    return (\n      <Stack sx={{ width: '100%' }}>\n        <Stack sx={{ pb: 4, pt: 16, px: 16 }}>\n          <H3>{copy.categories}</H3>\n        </Stack>\n        <List>\n          {visibleCategories.map((category, index) => (\n            <CategoriesListItem\n              key={category.guid}\n              {...category}\n              isLastItem={index === totalCategories - 1}\n              onClick={\n                category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n              }\n              showDivider={true}\n            />\n          ))}\n          <Collapse\n            component=\"li\"\n            in={isExpanded}\n            sx={{ '&.MuiCollapse-root .MuiListItemButton-root': { paddingLeft: 24 } }}\n          >\n            <List>\n              {collapsedCategories.map((category, index) => {\n                const adjustedIndex = visibleCategories.length + index\n                return (\n                  <CategoriesListItem\n                    key={category.guid}\n                    {...category}\n                    isLastItem={adjustedIndex === totalCategories - 1}\n                    onClick={\n                      category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n                    }\n                    showDivider={true}\n                  />\n                )\n              })}\n            </List>\n          </Collapse>\n          {collapsedCategories.length > 0 && (\n            <CollapseExpandListItem isExpanded={isExpanded} onClick={handleCollapseExpand} />\n          )}\n        </List>\n      </Stack>\n    )\n  },\n)\n\nexport default CategoriesList\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAM,IAAgD,EAAA,CACnD,EAAE,iBAAA,IAAkB,GAAG,iBAAA,EAAA,MAAsB;AAC5C,QAAM,EAAE,qBAAA,GAAqB,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,EAAe,GAClF,EAAE,gBAAA,GAAgB,WAAA,EAAA,IAAc,EAAc,GAC9C,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAElD,IAAgB,KAAa;AAEnC,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAuB,KAAK,MAAM,IAAkB,EAAE,IAAI,GAC1D,IAAiB,EAAkB,SAAS,EAAoB;AAEtE,IAAI,MAAyB,EAAkB,WAG7C,EAAqB,IAAgB,KAAK,IAAI,GAAsB,CAAC,IAAI,CAAC,GAC1E,EAAc,KAAwB,CAAc;AAAA,EAExD,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAA,MAA6B;AACjC,IAAA,EAAc,CAAC,CAAU,GACzB,EAAQ,EAAiB,wBAAwB,EAC/C,GAAG,EACL,CAAC;AAAA,EACH,GAEM,IAAkB,EAAkB,UAAU,IAAa,EAAoB,SAAS;AAC9F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,OAAO,OAAO;AAAA,cAA3B,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACjC,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,IACpB,CAAA,GACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACG,EAAkB,IAAA,CAAK,GAAU,MAChC,gBAAA,EAAC,GAAD;AAAA,QAEE,GAAI;AAAA,QACJ,YAAY,MAAU,IAAkB;AAAA,QACxC,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,QAEvE,aAAa;AAAA,MACd,GAPM,EAAS,IAOf,CACF;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,EAAE,8CAA8C,EAAE,aAAa,GAAG,EAAE;AAAA,kBAExE,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,GAAU,MAAU;AAC5C,gBAAM,IAAgB,EAAkB,SAAS;AACjD,iBACE,gBAAA,EAAC,GAAD;AAAA,YAEE,GAAI;AAAA,YACJ,YAAY,MAAkB,IAAkB;AAAA,YAChD,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,YAEvE,aAAa;AAAA,UACd,GAPM,EAAS,IAOf;AAAA,QAEL,CAAC,EACG,CAAA;AAAA,MACE,CAAA;AAAA,MACT,EAAoB,SAAS,KAC5B,gBAAA,EAAC,GAAD;AAAA,QAAoC,YAAA;AAAA,QAAY,SAAS;AAAA,MAAuB,CAAA;AAAA,IAE9E,EAAA,CAAA,CACD;AAAA;AAEX,CACF"}

package/dist/trends/components/CategoriesListItem.es.js

@@ -0,0 +1,44 @@
+import { useEvent as h, useGlobalCopyStore as I } from "../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as T } from "../../common/constants/Analytics.es.js";
+import { getCategoryColor as s } from "../../core/utils/CategoryUtil.es.js";
+import { formatCurrency as g } from "../../core/utils/NumberFormatting.es.js";
+import { ListItemRow as v } from "../../common/components/ListItemRow.es.js";
+import { TRENDS_ANALYTICS_METADATA as x } from "../constants/TrendsWidget.es.js";
+import E from "react";
+import { observer as y } from "mobx-react-lite";
+import { CategoryIcon as A } from "@mxenabled/mxui";
+import { ChevronRight as S } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as b } from "react/jsx-runtime";
+import { alpha as d, useTheme as u } from "@mui/material/styles";
+import L from "@mui/material/Divider";
+var V = y(({ totalAmount: a, guid: o, name: r, transactions: e, onClick: m, isLastItem: l = !1, showDivider: p = !0 }) => {
+  const { trends: i } = I(), { onEvent: c } = h(), n = u(), f = `${e.length} ${e.length === 1 ? i.transaction : i.transactions}`, C = () => {
+    m?.(), c(T.TRENDS_CLICK_LIST_ITEM, {
+      ...x,
+      listItem: r
+    });
+  };
+  return /* @__PURE__ */ b(E.Fragment, { children: [/* @__PURE__ */ t(v, {
+    leftIcon: o ? /* @__PURE__ */ t(A, {
+      categoryGuid: o,
+      sx: {
+        bgcolor: d(s(o, n), 0.15),
+        border: `1px solid ${s(o, n)}`,
+        color: "text.primary"
+      }
+    }) : void 0,
+    onClick: C,
+    rightContent: g(Math.abs(a), "0,0.00"),
+    rightIcon: m ? /* @__PURE__ */ t(S, {}) : void 0,
+    subtitle: f,
+    title: r
+  }), p && /* @__PURE__ */ t(L, {
+    component: "li",
+    sx: { ml: l ? 24 : 68 }
+  })] }, o);
+});
+export {
+  V as default
+};
+
+//# sourceMappingURL=CategoriesListItem.es.js.map

package/dist/trends/components/CategoriesListItem.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoriesListItem.es.js","names":[],"sources":["../../../src/trends/components/CategoriesListItem.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Divider from '@mui/material/Divider'\nimport { alpha } from '@mui/material/styles'\nimport { useTheme } from '@mui/material/styles'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\nimport { CategoryIcon } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, ListItemRow, useEvent, useGlobalCopyStore } from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\ninterface CategoriesListItemProps extends DetailedCategoryWithTransactions {\n  onClick?: () => void\n  isLastItem?: boolean\n  showDivider?: boolean\n}\n\nconst CategoriesListItem = observer(\n  ({\n    totalAmount,\n    guid,\n    name,\n    transactions,\n    onClick,\n    isLastItem = false,\n    showDivider = true,\n  }: CategoriesListItemProps) => {\n    const { trends: copy } = useGlobalCopyStore()\n    const { onEvent } = useEvent()\n    const theme = useTheme()\n\n    const transactionCountText = `${transactions.length} ${transactions.length === 1 ? copy.transaction : copy.transactions}`\n\n    const handleClick = () => {\n      onClick?.()\n      onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n        ...TRENDS_ANALYTICS_METADATA,\n        listItem: name,\n      })\n    }\n\n    return (\n      <React.Fragment key={guid}>\n        <ListItemRow\n          leftIcon={\n            guid ? (\n              <CategoryIcon\n                categoryGuid={guid}\n                sx={{\n                  bgcolor: alpha(getCategoryColor(guid, theme), 0.15),\n                  border: `1px solid ${getCategoryColor(guid, theme)}`,\n                  color: 'text.primary',\n                }}\n              />\n            ) : undefined\n          }\n          onClick={handleClick}\n          rightContent={formatCurrency(Math.abs(totalAmount), '0,0.00')}\n          rightIcon={onClick ? <ChevronRight /> : undefined}\n          subtitle={transactionCountText}\n          title={name}\n        />\n        {showDivider && <Divider component=\"li\" sx={{ ml: isLastItem ? 24 : 68 }} />}\n      </React.Fragment>\n    )\n  },\n)\n\nexport default CategoriesListItem\n"],"mappings":";;;;;;;;;;;;;AAsBA,IAAM,IAAqB,EAAA,CACxB,EACC,aAAA,GACA,MAAA,GACA,MAAA,GACA,cAAA,GACA,SAAA,GACA,YAAA,IAAa,IACb,aAAA,IAAc,GAAA,MACe;AAC7B,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAQ,EAAS,GAEjB,IAAuB,GAAG,EAAa,MAAA,IAAU,EAAa,WAAW,IAAI,EAAK,cAAc,EAAK,YAAA,IAErG,IAAA,MAAoB;AACxB,IAAA,IAAU,GACV,EAAQ,EAAiB,wBAAwB;AAAA,MAC/C,GAAG;AAAA,MACH,UAAU;AAAA,IACZ,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,UACE,IACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAc;AAAA,MACd,IAAI;AAAA,QACF,SAAS,EAAM,EAAiB,GAAM,CAAK,GAAG,IAAI;AAAA,QAClD,QAAQ,aAAa,EAAiB,GAAM,CAAK,CAAA;AAAA,QACjD,OAAO;AAAA,MACT;AAAA,IACD,CAAA,IACC;AAAA,IAEN,SAAS;AAAA,IACT,cAAc,EAAe,KAAK,IAAI,CAAW,GAAG,QAAQ;AAAA,IAC5D,WAAW,IAAU,gBAAA,EAAC,GAAD,CAAe,CAAA,IAAI;AAAA,IACxC,UAAU;AAAA,IACV,OAAO;AAAA,EACR,CAAA,GACA,KAAe,gBAAA,EAAC,GAAD;AAAA,IAAS,WAAU;AAAA,IAAK,IAAI,EAAE,IAAI,IAAa,KAAK,GAAG;AAAA,EAAI,CAAA,CAC7D,EAAA,GArBK,CAqBL;AAEpB,CACF"}

package/dist/trends/components/CategoryDetailChart.es.js

@@ -0,0 +1,45 @@
+import { useEvent as a, useTrendsStore as m } from "../../common/context/hooks.es.js";
+import { ANALYTICS_EVENTS as l } from "../../common/constants/Analytics.es.js";
+import { LineChart as u } from "../../common/components/charts/LineChart.es.js";
+import { TRENDS_ANALYTICS_METADATA as h } from "../constants/TrendsWidget.es.js";
+import { observer as n } from "mobx-react-lite";
+import A from "@mui/material/Stack";
+import { jsx as e } from "react/jsx-runtime";
+var f = n(({ chartLabel: r, chartColor: t }) => {
+  const { onEvent: o } = a(), { categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: i } } = m();
+  return /* @__PURE__ */ e(A, {
+    sx: {
+      pt: 12,
+      width: "100%"
+    },
+    children: /* @__PURE__ */ e(u, {
+      baseline: "min",
+      colors: [t],
+      curveType: "bump",
+      customTooltipLabels: i,
+      datasets: [s],
+      height: 265,
+      labels: [r],
+      markStyles: () => ({ stroke: t }),
+      onItemClick: () => {
+        o(l.TRENDS_CLICK_CHART, h);
+      },
+      showArea: !0,
+      showAverage: !0,
+      showAxisHighlight: !0,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    })
+  });
+});
+export {
+  f as default
+};
+
+//# sourceMappingURL=CategoryDetailChart.es.js.map

package/dist/trends/components/CategoryDetailChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryDetailChart.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetailChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { ANALYTICS_EVENTS, useEvent, useTrendsStore } from '../../common'\nimport { LineChart } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\ninterface CategoryDetailChartProps {\n  chartColor: string\n  chartLabel: string\n}\nconst CategoryDetailChart = observer(({ chartLabel, chartColor }: CategoryDetailChartProps) => {\n  const { onEvent } = useEvent()\n  const {\n    categoryDetailsChartData: { monthlyAmounts, tooltipLabels },\n  } = useTrendsStore()\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <Stack sx={{ pt: 12, width: '100%' }}>\n      <LineChart\n        baseline=\"min\"\n        colors={[chartColor]}\n        curveType=\"bump\"\n        customTooltipLabels={tooltipLabels}\n        datasets={[monthlyAmounts]}\n        height={265}\n        labels={[chartLabel]}\n        markStyles={() => ({\n          stroke: chartColor,\n        })}\n        onItemClick={handleItemClick}\n        showArea={true}\n        showAverage={true}\n        showAxisHighlight={true}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        useCustomMark={true}\n        valueFormatterString=\"0,0\"\n      />\n    </Stack>\n  )\n})\nexport default CategoryDetailChart\n"],"mappings":";;;;;;;AAYA,IAAM,IAAsB,EAAA,CAAU,EAAE,YAAA,GAAY,YAAA,EAAA,MAA2C;AAC7F,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EACJ,0BAA0B,EAAE,gBAAA,GAAgB,eAAA,EAAA,EAAA,IAC1C,EAAe;AAMnB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,cACjC,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,QAAQ,CAAC,CAAU;AAAA,MACnB,WAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,UAAU,CAAC,CAAc;AAAA,MACzB,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAU;AAAA,MACnB,YAAA,OAAmB,EACjB,QAAQ,EACV;AAAA,MACA,aAjBA,MAAwB;AAC5B,QAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,MACxE;AAAA,MAgBM,UAAU;AAAA,MACV,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACI,CAAA;AAEX,CAAC"}

package/dist/trends/components/CategoryDetails.es.js

@@ -0,0 +1,104 @@
+import { useAppConfig as I, useGlobalCopyStore as A, useTransactionStore as G, useTrendsStore as R } from "../../common/context/hooks.es.js";
+import { useScreenSize as j } from "../../common/hooks/useScreenSize.es.js";
+import k from "../../common/components/drawer/Drawer.es.js";
+import { getCategoryColor as z } from "../../core/utils/CategoryUtil.es.js";
+import { formatCurrency as M } from "../../core/utils/NumberFormatting.es.js";
+import $ from "../../transactions/components/transactionwidget/actions/ExportCsvAction.es.js";
+import B from "../../transactions/components/shared/TransactionList.es.js";
+import E from "../../transactions/components/shared/TransactionDetails.es.js";
+import F from "./CategoryDetailChart.es.js";
+import d from "react";
+import { observer as O } from "mobx-react-lite";
+import c from "@mui/material/Stack";
+import { CategoryIcon as P, Text as f } from "@mxenabled/mxui";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useTheme as W } from "@mui/material/styles";
+import q from "@mui/material/List";
+import H from "@mui/material/ListItem";
+import J from "@mui/material/ListItemText";
+import K from "@mui/material/ListItemAvatar";
+var dt = O(() => {
+  const h = W(), { is_mobile_webview: u } = I(), { isDesktop: g, isSmallTablet: y, isTablet: b } = j(), { common: C, trends: o } = A(), { selectedCategoryData: e, selectedDateRangeMonthRange: x } = R(), { sortedTransactions: a } = G(), [m, l] = d.useState(null);
+  if (!e) return null;
+  const { guid: r, name: v, is_income: _, totalAmount: S } = e, T = z(r, h), L = _ ? o.income_label : o.spending_label, w = ` ${e.transactions.length === 1 ? o.transaction : o.transactions} (${e.transactions.length})`, s = d.useMemo(() => a.find((n) => n.guid === m), [m, a]), D = a.length > 0 && !u && (g || b && !y), p = (n) => n.category_guid === r || n.top_level_category_guid === r;
+  return /* @__PURE__ */ i(c, {
+    sx: {
+      alignItems: "center",
+      height: "100%"
+    },
+    children: [
+      /* @__PURE__ */ i(c, {
+        sx: {
+          borderRadius: 0,
+          pb: 4,
+          pt: 16,
+          px: 12,
+          width: "100%"
+        },
+        children: [
+          /* @__PURE__ */ t(q, {
+            sx: { px: 12 },
+            children: /* @__PURE__ */ i(H, { children: [
+              /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(P, { categoryGuid: r }) }),
+              /* @__PURE__ */ t(J, {
+                primary: v,
+                secondary: x,
+                slotProps: {
+                  primary: {
+                    component: "div",
+                    variant: "h3",
+                    fontSize: 18,
+                    fontWeight: 700
+                  },
+                  secondary: {
+                    component: "div",
+                    variant: "body2",
+                    fontSize: 13
+                  }
+                }
+              }),
+              /* @__PURE__ */ t(f, {
+                component: "div",
+                variant: "h3",
+                children: M(Math.abs(S), "0,0.00")
+              })
+            ] })
+          }),
+          /* @__PURE__ */ t(F, {
+            chartColor: T,
+            chartLabel: L
+          }),
+          /* @__PURE__ */ i(c, {
+            alignItems: "center",
+            direction: "row",
+            justifyContent: "space-between",
+            sx: { mx: 12 },
+            children: [/* @__PURE__ */ t(f, {
+              bold: !0,
+              variant: "body1",
+              children: w
+            }), D && /* @__PURE__ */ t($, { filter: p })]
+          })
+        ]
+      }),
+      /* @__PURE__ */ t(B, {
+        bgcolor: "transparent",
+        filter: p,
+        height: "calc(100vh - 475px)",
+        onClick: l
+      }),
+      /* @__PURE__ */ t(k, {
+        ariaLabelClose: C.close_aria,
+        isOpen: !!s,
+        onClose: () => l(""),
+        title: o.transaction,
+        children: s && /* @__PURE__ */ t(E, { transaction: s })
+      })
+    ]
+  });
+});
+export {
+  dt as CategoryDetails
+};
+
+//# sourceMappingURL=CategoryDetails.es.js.map

package/dist/trends/components/CategoryDetails.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryDetails.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useGlobalCopyStore,\n  useTrendsStore,\n  useTransactionStore,\n  useScreenSize,\n} from '../../common'\nimport { type Transaction } from '../../core'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport { ExportCsvAction, TransactionDetails, TransactionList } from '../../transactions'\n\nimport CategoryDetailChart from './CategoryDetailChart'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\nexport const CategoryDetails = observer(() => {\n  const theme = useTheme()\n  const { is_mobile_webview } = useAppConfig()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const { common: commonCopy, trends: copy } = useGlobalCopyStore()\n  const { selectedCategoryData, selectedDateRangeMonthRange } = useTrendsStore()\n  const { sortedTransactions: transactions } = useTransactionStore()\n\n  const [transactionGuid, setTransactionGuid] = React.useState<string | null>(null)\n\n  if (!selectedCategoryData) {\n    return null\n  }\n\n  const { guid, name, is_income, totalAmount } = selectedCategoryData\n\n  const chartColor = getCategoryColor(guid, theme)\n  const chartLabel = is_income ? copy.income_label : copy.spending_label\n  const transactionCountLabel = ` ${\n    selectedCategoryData.transactions.length === 1 ? copy.transaction : copy.transactions\n  } (${selectedCategoryData.transactions.length})`\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  const categoryFilter = (t: Transaction) =>\n    t.category_guid === guid || t.top_level_category_guid === guid\n\n  return (\n    <Stack sx={{ alignItems: 'center', height: '100%' }}>\n      <Stack sx={{ borderRadius: 0, pb: 4, pt: 16, px: 12, width: '100%' }}>\n        <List sx={{ px: 12 }}>\n          <ListItem>\n            <ListItemAvatar>\n              <CategoryIcon categoryGuid={guid} />\n            </ListItemAvatar>\n            <ListItemText\n              primary={name}\n              secondary={selectedDateRangeMonthRange}\n              slotProps={{\n                primary: { component: 'div', variant: 'h3', fontSize: 18, fontWeight: 700 },\n                secondary: { component: 'div', variant: 'body2', fontSize: 13 },\n              }}\n            />\n            <Text component=\"div\" variant=\"h3\">\n              {formatCurrency(Math.abs(totalAmount), '0,0.00')}\n            </Text>\n          </ListItem>\n        </List>\n\n        <CategoryDetailChart chartColor={chartColor} chartLabel={chartLabel} />\n\n        <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\" sx={{ mx: 12 }}>\n          <Text bold={true} variant=\"body1\">\n            {transactionCountLabel}\n          </Text>\n          {shouldShowExportButton && <ExportCsvAction filter={categoryFilter} />}\n        </Stack>\n      </Stack>\n      <TransactionList\n        bgcolor=\"transparent\"\n        filter={categoryFilter}\n        height=\"calc(100vh - 475px)\"\n        onClick={setTransactionGuid}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(transaction)}\n        onClose={() => setTransactionGuid('')}\n        title={copy.transaction}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA4BA,IAAa,KAAkB,EAAA,MAAe;AAC5C,QAAM,IAAQ,EAAS,GACjB,EAAE,mBAAA,EAAA,IAAsB,EAAa,GACrC,EAAE,WAAA,GAAW,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GACvD,EAAE,QAAQ,GAAY,QAAQ,EAAA,IAAS,EAAmB,GAC1D,EAAE,sBAAA,GAAsB,6BAAA,EAAA,IAAgC,EAAe,GACvE,EAAE,oBAAoB,EAAA,IAAiB,EAAoB,GAE3D,CAAC,GAAiB,CAAA,IAAsB,EAAM,SAAwB,IAAI;AAEhF,MAAI,CAAC,EACH,QAAO;AAGT,QAAM,EAAE,MAAA,GAAM,MAAA,GAAM,WAAA,GAAW,aAAA,EAAA,IAAgB,GAEzC,IAAa,EAAiB,GAAM,CAAK,GACzC,IAAa,IAAY,EAAK,eAAe,EAAK,gBAClD,IAAwB,IAC5B,EAAqB,aAAa,WAAW,IAAI,EAAK,cAAc,EAAK,YAAA,KACtE,EAAqB,aAAa,MAAA,KAEjC,IAAc,EAAM,QAAA,MAClB,EAAa,KAAA,CAAM,MAAM,EAAE,SAAS,CAAe,GACzD,CAAC,GAAiB,CAAY,CAChC,GAEM,IACJ,EAAa,SAAS,KAAK,CAAC,MAAsB,KAAc,KAAY,CAAC,IAEzE,IAAA,CAAkB,MACtB,EAAE,kBAAkB,KAAQ,EAAE,4BAA4B;AAE5D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,QAAQ;AAAA,IAAO;AAAA,cAAlD;AAAA,MACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,cAAc;AAAA,UAAG,IAAI;AAAA,UAAG,IAAI;AAAA,UAAI,IAAI;AAAA,UAAI,OAAO;AAAA,QAAO;AAAA,kBAAnE;AAAA,UACE,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,IAAI,GAAG;AAAA,sBACjB,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,cACE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD,EAAc,cAAc,EAAO,CAAA,EACrB,CAAA;AAAA,cAChB,gBAAA,EAAC,GAAD;AAAA,gBACE,SAAS;AAAA,gBACT,WAAW;AAAA,gBACX,WAAW;AAAA,kBACT,SAAS;AAAA,oBAAE,WAAW;AAAA,oBAAO,SAAS;AAAA,oBAAM,UAAU;AAAA,oBAAI,YAAY;AAAA,kBAAI;AAAA,kBAC1E,WAAW;AAAA,oBAAE,WAAW;AAAA,oBAAO,SAAS;AAAA,oBAAS,UAAU;AAAA,kBAAG;AAAA,gBAChE;AAAA,cACD,CAAA;AAAA,cACD,gBAAA,EAAC,GAAD;AAAA,gBAAM,WAAU;AAAA,gBAAM,SAAQ;AAAA,0BAC3B,EAAe,KAAK,IAAI,CAAW,GAAG,QAAQ;AAAA,cAC3C,CAAA;AAAA,YACE,EAAA,CAAA;AAAA,UACN,CAAA;AAAA,UAEN,gBAAA,EAAC,GAAD;AAAA,YAAiC,YAAA;AAAA,YAAwB,YAAA;AAAA,UAAa,CAAA;AAAA,UAEtE,gBAAA,EAAC,GAAD;AAAA,YAAO,YAAW;AAAA,YAAS,WAAU;AAAA,YAAM,gBAAe;AAAA,YAAgB,IAAI,EAAE,IAAI,GAAG;AAAA,sBAAvF,CACE,gBAAA,EAAC,GAAD;AAAA,cAAM,MAAM;AAAA,cAAM,SAAQ;AAAA,wBACvB;AAAA,YACG,CAAA,GACL,KAA0B,gBAAA,EAAC,GAAD,EAAiB,QAAQ,EAAiB,CAAA,CAChE;AAAA;QACF;AAAA;MACP,gBAAA,EAAC,GAAD;AAAA,QACE,SAAQ;AAAA,QACR,QAAQ;AAAA,QACR,QAAO;AAAA,QACP,SAAS;AAAA,MACV,CAAA;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB,EAAW;AAAA,QAC3B,QAAQ,EAAQ;AAAA,QAChB,SAAA,MAAe,EAAmB,EAAE;AAAA,QACpC,OAAO,EAAK;AAAA,kBAEX,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA;AAAA,MACzD,CAAA;AAAA,IACH;AAAA;AAEX,CAAC"}

package/dist/trends/components/DateRangeText.es.js

@@ -0,0 +1,26 @@
+import { DATE_FORMATS_INTL as r, formatDate as e } from "../../core/constants/DateFormats.es.js";
+import { useCategoryStore as _, useGlobalCopyStore as a } from "../../common/context/hooks.es.js";
+import { useScreenSize as f } from "../../common/hooks/useScreenSize.es.js";
+import O from "react";
+import { H3 as p, Text as x } from "@mxenabled/mxui";
+import { jsx as m, jsxs as H } from "react/jsx-runtime";
+import M from "@mui/material/Box";
+var Y = ({ selectedDateRange: t, selectedCategoryGuid: T }) => {
+  const { trends: i } = a(), { isMobile: o, isDesktop: s } = f(), { getCategoryName: l } = _(), n = O.useMemo(() => `${t.start.getFullYear() === t.end.getFullYear() ? e(t.start, o ? r.MONTH_SHORT : r.MONTH_LONG) : e(t.start, o ? r.MONTH_SHORT_YEAR : r.MONTH_YEAR)} - ${e(t.end, o ? r.MONTH_SHORT_YEAR : r.MONTH_YEAR)}`, [t, o]), u = l(T) || (o ? i.sub_title : i.sub_title_by_category);
+  return /* @__PURE__ */ H(M, { children: [/* @__PURE__ */ m(p, {
+    sx: {
+      fontSize: s ? null : 15,
+      overflow: "visible",
+      textOverflow: "unset"
+    },
+    children: u
+  }), /* @__PURE__ */ m(x, {
+    variant: s ? "subtitle1" : "body2",
+    children: n
+  })] });
+};
+export {
+  Y as default
+};
+
+//# sourceMappingURL=DateRangeText.es.js.map

package/dist/trends/components/DateRangeText.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeText.es.js","names":[],"sources":["../../../src/trends/components/DateRangeText.tsx"],"sourcesContent":["import React from 'react'\nimport { H3, Text } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport { useCategoryStore, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\ninterface DateRangeTextProps {\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategoryGuid: string\n}\n\nconst DateRangeText = ({ selectedDateRange, selectedCategoryGuid }: DateRangeTextProps) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { isMobile, isDesktop } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  // Build date range text for display\n  // e.g. October 2023 - March 2024, or Oct 2023 - Mar 2024\n  const dateRangeText = React.useMemo(() => {\n    const startDate =\n      selectedDateRange.start.getFullYear() === selectedDateRange.end.getFullYear()\n        ? formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT : DATE_FORMATS_INTL.MONTH_LONG,\n          )\n        : formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n          )\n    const endDate = formatDate(\n      selectedDateRange.end,\n      isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n    )\n    return `${startDate} - ${endDate}`\n  }, [selectedDateRange, isMobile])\n\n  const categoryName = getCategoryName(selectedCategoryGuid)\n  const titleText = categoryName || (isMobile ? copy.sub_title : copy.sub_title_by_category)\n\n  return (\n    <Box>\n      <H3\n        sx={{\n          fontSize: !isDesktop ? 15 : null,\n          overflow: 'visible',\n          textOverflow: 'unset',\n        }}\n      >\n        {titleText}\n      </H3>\n\n      <Text variant={isDesktop ? 'subtitle1' : 'body2'}>{dateRangeText}</Text>\n    </Box>\n  )\n}\n\nexport default DateRangeText\n"],"mappings":";;;;;;;AAWA,IAAM,IAAA,CAAiB,EAAE,mBAAA,GAAmB,sBAAA,EAAA,MAA+C;AACzF,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,UAAA,GAAU,WAAA,EAAA,IAAc,EAAc,GACxC,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GAIvC,IAAgB,EAAM,QAAA,MAenB,GAbL,EAAkB,MAAM,YAAY,MAAM,EAAkB,IAAI,YAAY,IACxE,EACE,EAAkB,OAClB,IAAW,EAAkB,cAAc,EAAkB,UAC/D,IACA,EACE,EAAkB,OAClB,IAAW,EAAkB,mBAAmB,EAAkB,UACpE,CAAA,MACU,EACd,EAAkB,KAClB,IAAW,EAAkB,mBAAmB,EAAkB,UAE3C,CAAA,IACxB,CAAC,GAAmB,CAAQ,CAAC,GAG1B,IADe,EAAgB,CACnB,MAAiB,IAAW,EAAK,YAAY,EAAK;AAEpE,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,UAAW,IAAiB,OAAL;AAAA,MACvB,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,cAEC;AAAA,EACC,CAAA,GAEJ,gBAAA,EAAC,GAAD;AAAA,IAAM,SAAS,IAAY,cAAc;AAAA,cAAU;AAAA,EAAoB,CAAA,CACpE,EAAA,CAAA;AAET"}

package/dist/trends/components/SpendingChart.es.js

@@ -0,0 +1,28 @@
+import { useCategoryStore as s, useGlobalCopyStore as n, useWidgetContainerProvider as i } from "../../common/context/hooks.es.js";
+import { LineChart as m } from "../../common/components/charts/LineChart.es.js";
+import { getSpendingData as l } from "../utils/SpendingData.es.js";
+import p from "react";
+import { observer as u } from "mobx-react-lite";
+import { jsx as d } from "react/jsx-runtime";
+import { useTheme as g } from "@mui/material/styles";
+var h = () => {
+  const { monthlyCategoryTotals: e } = s(), { trends: t } = n(), r = g(), { availableHeight: o = 300 } = i(), a = p.useMemo(() => l(e), [e]);
+  return /* @__PURE__ */ d(m, {
+    baseline: "min",
+    colors: [r.palette.primary.main],
+    datasets: [a],
+    height: o,
+    labels: [t.spending_label],
+    showArea: !0,
+    showAverage: !0,
+    showLegend: !0,
+    showMarkLabel: !0,
+    useCustomMark: !0,
+    valueFormatterString: "0,0"
+  });
+}, w = u(h);
+export {
+  w as default
+};
+
+//# sourceMappingURL=SpendingChart.es.js.map

package/dist/trends/components/SpendingChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpendingChart.es.js","names":[],"sources":["../../../src/trends/components/SpendingChart.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { useCategoryStore, useGlobalCopyStore, useWidgetContainerProvider } from '../../common'\nimport { LineChart } from '../../common/components/charts/LineChart'\n\nimport { getSpendingData } from '../utils/SpendingData'\n\nconst SpendingChart = () => {\n  const { monthlyCategoryTotals } = useCategoryStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const theme = useTheme()\n  const { availableHeight = 300 } = useWidgetContainerProvider()\n\n  const data = React.useMemo(() => getSpendingData(monthlyCategoryTotals), [monthlyCategoryTotals])\n\n  return (\n    <LineChart\n      baseline=\"min\"\n      colors={[theme.palette.primary.main]}\n      datasets={[data]}\n      height={availableHeight}\n      labels={[trendsCopy.spending_label]}\n      showArea={true}\n      showAverage={true}\n      showLegend={true}\n      showMarkLabel={true}\n      useCustomMark={true}\n      valueFormatterString=\"0,0\"\n    />\n  )\n}\n\nexport default observer(SpendingChart)\n"],"mappings":";;;;;;;AAUA,IAAM,IAAA,MAAsB;AAC1B,QAAM,EAAE,uBAAA,EAAA,IAA0B,EAAiB,GAC7C,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,IAAQ,EAAS,GACjB,EAAE,iBAAA,IAAkB,IAAA,IAAQ,EAA2B,GAEvD,IAAO,EAAM,QAAA,MAAc,EAAgB,CAAqB,GAAG,CAAC,CAAqB,CAAC;AAEhG,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,UAAS;AAAA,IACT,QAAQ,CAAC,EAAM,QAAQ,QAAQ,IAAI;AAAA,IACnC,UAAU,CAAC,CAAI;AAAA,IACf,QAAQ;AAAA,IACR,QAAQ,CAAC,EAAW,cAAc;AAAA,IAClC,UAAU;AAAA,IACV,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,eAAe;AAAA,IACf,sBAAqB;AAAA,EACtB,CAAA;AAEL,GAEA,IAAe,EAAS,CAAa"}

package/dist/trends/components/TrendsChart.es.js

@@ -0,0 +1,63 @@
+import { useCategoryStore as g, useGlobalCopyStore as p } from "../../common/context/hooks.es.js";
+import { AccountType as c } from "../../core/types/Account.es.js";
+import { INCOME_ACCOUNT_TYPES as u, PAYMENT_ACCOUNT_TYPES as m, SPENDING_ACCOUNT_TYPES as d } from "../../common/constants/Account.es.js";
+import { useAccountUiStore as A } from "../../accounts/hooks/useUiStore.es.js";
+import { LineChart as T } from "../../common/components/charts/LineChart.es.js";
+import { getIncomeTotals as f, getPaymentTotals as C, getSpendingTotals as _ } from "../utils/SpendingData.es.js";
+import { observer as b } from "mobx-react-lite";
+import { jsx as h } from "react/jsx-runtime";
+import { useTheme as S } from "@mui/material/styles";
+var w = (e, t) => [
+  u.includes(t) ? f(e) : [],
+  m.includes(t) ? C(e) : [],
+  d.includes(t) ? _(e) : []
+].filter((o) => o.length > 0), y = (e, t, o) => {
+  const [l, i] = e, s = l, n = i ?? l, r = [];
+  if (s && n && u.includes(t)) {
+    const a = s[s.length - 1].y;
+    r.push({
+      label: o.income_label,
+      amount: a
+    });
+  } else if (m.includes(t)) {
+    const a = s[s.length - 1].y;
+    r.push({
+      label: o.payments_label,
+      amount: a
+    });
+  }
+  if (n && d.includes(t)) {
+    const a = n[n.length - 1].y;
+    r.push({
+      label: o.spending_label,
+      amount: a
+    });
+  }
+  return r;
+}, v = () => {
+  const e = S(), { selectedAccount: t } = A(), { monthlyCategoryTotals: o } = g(), { trends: l } = p(), i = [e.palette.chart?.chart1, e.palette.chart?.chart2], s = w(o, t.account_type), n = y(s, t.account_type, l), r = [c.LOAN, c.MORTGAGE].includes(t.account_type);
+  return /* @__PURE__ */ h("div", {
+    "data-testid": "TrendsChart",
+    children: /* @__PURE__ */ h(T, {
+      colors: i,
+      datasets: s,
+      height: 185,
+      labels: n,
+      showAverage: r,
+      showAxisHighlight: !0,
+      showBars: r,
+      showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      valueFormatterString: "0,0"
+    })
+  });
+}, U = b(v);
+export {
+  U as default
+};
+
+//# sourceMappingURL=TrendsChart.es.js.map

package/dist/trends/components/TrendsChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsChart.es.js","names":[],"sources":["../../../src/trends/components/TrendsChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport { useTheme } from '@mui/material/styles'\n\nimport {\n  useCategoryStore,\n  useGlobalCopyStore,\n  INCOME_ACCOUNT_TYPES,\n  PAYMENT_ACCOUNT_TYPES,\n  SPENDING_ACCOUNT_TYPES,\n} from '../../common'\nimport { AccountType, MonthlyCategoryTotals, TrendsCopy } from '../../core'\n\nimport { useAccountUiStore } from '../../accounts/hooks/useUiStore'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { getIncomeTotals, getPaymentTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (\n  totals: MonthlyCategoryTotals[],\n  accountType: AccountType,\n): LineChartDataset[] => {\n  const incomeData = INCOME_ACCOUNT_TYPES.includes(accountType) ? getIncomeTotals(totals) : []\n  const paymentData = PAYMENT_ACCOUNT_TYPES.includes(accountType) ? getPaymentTotals(totals) : []\n  const spendingData = SPENDING_ACCOUNT_TYPES.includes(accountType) ? getSpendingTotals(totals) : []\n\n  // There should always be 1-2 datasets returned. No account type will have all three categories.\n  return [incomeData, paymentData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], accountType: AccountType, copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits && debits && INCOME_ACCOUNT_TYPES.includes(accountType)) {\n    const lastIncome = credits[credits.length - 1].y\n    labels.push({ label: copy.income_label, amount: lastIncome })\n  } else if (PAYMENT_ACCOUNT_TYPES.includes(accountType)) {\n    const lastPayment = credits[credits.length - 1].y\n    labels.push({ label: copy.payments_label, amount: lastPayment })\n  }\n\n  if (debits && SPENDING_ACCOUNT_TYPES.includes(accountType)) {\n    const lastSpending = debits[debits.length - 1].y\n    labels.push({ label: copy.spending_label, amount: lastSpending })\n  }\n\n  return labels\n}\n\nconst TrendsChart = () => {\n  const theme = useTheme()\n  const { selectedAccount } = useAccountUiStore()\n  const { monthlyCategoryTotals } = useCategoryStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(monthlyCategoryTotals, selectedAccount.account_type)\n  const labels = getLabels(datasets, selectedAccount.account_type, trendsCopy)\n  const isLoan = [AccountType.LOAN, AccountType.MORTGAGE].includes(selectedAccount.account_type)\n\n  return (\n    <div data-testid=\"TrendsChart\">\n      <LineChart\n        colors={colors}\n        datasets={datasets}\n        height={185}\n        labels={labels}\n        showAverage={isLoan}\n        showAxisHighlight={true}\n        showBars={isLoan}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        valueFormatterString=\"0,0\"\n      />\n    </div>\n  )\n}\n\nexport default observer(TrendsChart)\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAA,CACJ,GACA,MAOO;AAAA,EALY,EAAqB,SAAS,CAAW,IAAI,EAAgB,CAAM,IAAI,CAAC;AAAA,EACvE,EAAsB,SAAS,CAAW,IAAI,EAAiB,CAAM,IAAI,CAAC;AAAA,EACzE,EAAuB,SAAS,CAAW,IAAI,EAAkB,CAAM,IAAI,CAAC;AAGpD,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG3E,IAAA,CAAa,GAA8B,GAA0B,MAAqB;AAC9F,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,KAAW,KAAU,EAAqB,SAAS,CAAW,GAAG;AACnE,UAAM,IAAa,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAW,CAAC;AAAA,EAC9D,WAAW,EAAsB,SAAS,CAAW,GAAG;AACtD,UAAM,IAAc,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAChD,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAY,CAAC;AAAA,EACjE;AAEA,MAAI,KAAU,EAAuB,SAAS,CAAW,GAAG;AAC1D,UAAM,IAAe,EAAO,EAAO,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAa,CAAC;AAAA,EAClE;AAEA,SAAO;AACT,GAEM,IAAA,MAAoB;AACxB,QAAM,IAAQ,EAAS,GACjB,EAAE,iBAAA,EAAA,IAAoB,EAAkB,GACxC,EAAE,uBAAA,EAAA,IAA0B,EAAiB,GAC7C,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAE5C,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAuB,EAAgB,YAAY,GAC1E,IAAS,EAAU,GAAU,EAAgB,cAAc,CAAU,GACrE,IAAS,CAAC,EAAY,MAAM,EAAY,QAAQ,EAAE,SAAS,EAAgB,YAAY;AAE7F,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,eAAY;AAAA,cACf,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACE,UAAA;AAAA,MACV,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

package/dist/trends/components/TrendsChartTotals.es.js

@@ -0,0 +1,58 @@
+import { useEvent as w, useGlobalCopyStore as v } from "../../common/context/hooks.es.js";
+import { useScreenSize as x } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as E } from "../../common/constants/Analytics.es.js";
+import { LineChart as H } from "../../common/components/charts/LineChart.es.js";
+import { getIncomeTotals as I, getSpendingTotals as _ } from "../utils/SpendingData.es.js";
+import { TRENDS_ANALYTICS_METADATA as k } from "../constants/TrendsWidget.es.js";
+import m from "react";
+import { observer as D } from "mobx-react-lite";
+import { jsx as L } from "react/jsx-runtime";
+import { useTheme as M } from "@mui/material/styles";
+var N = (t, e) => [I(t, e), _(t, e)].filter((o) => o.length > 0), y = (t, e) => {
+  const [o, c] = t, s = o, l = c ?? o, r = [];
+  if (s) {
+    const a = s.reduce((n, i) => n + i.y, 0);
+    r.push({
+      label: e.income_label,
+      amount: a
+    });
+  }
+  if (l) {
+    const a = l.reduce((n, i) => n + i.y, 0);
+    r.push({
+      label: e.spending_label,
+      amount: a
+    });
+  }
+  return r;
+}, Y = ({ availableHeight: t = 0, minHeight: e = 500, selectedDateRange: o, totals: c }) => {
+  const s = M(), { onEvent: l } = w(), { trends: r } = v(), { isSmallMobile: a, isMobile: n, isSmallTablet: i, isTablet: u } = x(), p = [s.palette.chart?.chart1, s.palette.chart?.chart2], h = N(c, o), T = y(h, r), [d, g] = m.useState(0), b = 458, f = 195, A = 56, C = n || a ? f : i || u ? b : d;
+  return m.useEffect(() => {
+    const S = Math.max(t - A, e);
+    g(S);
+  }, [t]), /* @__PURE__ */ L(H, {
+    baseline: "min",
+    colors: p,
+    curveType: "bump",
+    datasets: h,
+    height: C,
+    labels: T,
+    onItemClick: () => {
+      l(E.TRENDS_CLICK_CHART, k);
+    },
+    showArea: !0,
+    showAxisHighlight: !0,
+    showLegend: !0,
+    showTooltip: !0,
+    showXAxis: !0,
+    showXAxisTicks: !0,
+    showYAxis: !0,
+    showYAxisTicks: !0,
+    valueFormatterString: "0.0a"
+  });
+}, O = D(Y);
+export {
+  O as default
+};
+
+//# sourceMappingURL=TrendsChartTotals.es.js.map

package/dist/trends/components/TrendsChartTotals.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsChartTotals.es.js","names":[],"sources":["../../../src/trends/components/TrendsChartTotals.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport { useTheme } from '@mui/material/styles'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DateRange, MonthlyCategoryTotals, TrendsCopy } from '../../core'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\nimport { getIncomeTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (totals: MonthlyCategoryTotals[], dateRange: DateRange): LineChartDataset[] => {\n  const incomeData = getIncomeTotals(totals, dateRange)\n  const spendingData = getSpendingTotals(totals, dateRange)\n  return [incomeData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits) {\n    const totalIncome = credits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.income_label, amount: totalIncome })\n  }\n\n  if (debits) {\n    const totalSpending = debits.reduce((sum, item) => sum + item.y, 0)\n    labels.push({ label: copy.spending_label, amount: totalSpending })\n  }\n\n  return labels\n}\n\ninterface TrendsChartTotalsProps {\n  availableHeight?: number\n  minHeight?: number\n  selectedDateRange: DateRange\n  totals: MonthlyCategoryTotals[]\n}\n\nconst TrendsChartTotals: React.FC<TrendsChartTotalsProps> = ({\n  availableHeight = 0,\n  minHeight = 500,\n  selectedDateRange,\n  totals,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n  const { isSmallMobile, isMobile, isSmallTablet, isTablet } = useScreenSize()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(totals, selectedDateRange)\n  const labels = getLabels(datasets, trendsCopy)\n\n  const [chartDesktopHeight, setChartDesktopHeight] = React.useState<number>(0)\n  const chartTabletHeight = 458\n  const chartMobileHeight = 195\n  const legendHeight = 56\n\n  // prettier-ignore\n  // eslint-disable-next-line no-nested-ternary\n  const chartHeight = (isMobile || isSmallMobile) ? chartMobileHeight :\n  (isSmallTablet || isTablet) ? chartTabletHeight : chartDesktopHeight;\n\n  // Control responsive chart height based on available height\n  React.useEffect(() => {\n    const newChartHeight = Math.max(availableHeight - legendHeight, minHeight)\n    setChartDesktopHeight(newChartHeight)\n  }, [availableHeight])\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <LineChart\n      baseline=\"min\"\n      colors={colors}\n      curveType=\"bump\"\n      datasets={datasets}\n      height={chartHeight}\n      labels={labels}\n      onItemClick={handleItemClick}\n      showArea={true}\n      showAxisHighlight={true}\n      showLegend={true}\n      showTooltip={true}\n      showXAxis={true}\n      showXAxisTicks={true}\n      showYAxis={true}\n      showYAxisTicks={true}\n      valueFormatterString=\"0.0a\"\n    />\n  )\n}\n\nexport default observer(TrendsChartTotals)\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAA,CAAe,GAAiC,MAG7C,CAFY,EAAgB,GAAQ,CAEnC,GADa,EAAkB,GAAQ,CAC3B,CAAY,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG9D,IAAA,CAAa,GAA8B,MAAqB;AACpE,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,GAAS;AACX,UAAM,IAAc,EAAQ,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AACjE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAY,CAAC;AAAA,EAC/D;AAEA,MAAI,GAAQ;AACV,UAAM,IAAgB,EAAO,OAAA,CAAQ,GAAK,MAAS,IAAM,EAAK,GAAG,CAAC;AAClE,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAc,CAAC;AAAA,EACnE;AAEA,SAAO;AACT,GASM,IAAA,CAAuD,EAC3D,iBAAA,IAAkB,GAClB,WAAA,IAAY,KACZ,mBAAA,GACA,QAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,eAAA,GAAe,UAAA,GAAU,eAAA,GAAe,UAAA,EAAA,IAAa,EAAc,GAErE,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAQ,CAAiB,GAChD,IAAS,EAAU,GAAU,CAAU,GAEvC,CAAC,GAAoB,CAAA,IAAyB,EAAM,SAAiB,CAAC,GACtE,IAAoB,KACpB,IAAoB,KACpB,IAAe,IAIf,IAAe,KAAY,IAAiB,IACjD,KAAiB,IAAY,IAAoB;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,UAAM,IAAiB,KAAK,IAAI,IAAkB,GAAc,CAAS;AACzE,IAAA,EAAsB,CAAc;AAAA,EACtC,GAAG,CAAC,CAAe,CAAC,GAOlB,gBAAA,EAAC,GAAD;AAAA,IACE,UAAS;AAAA,IACD,QAAA;AAAA,IACR,WAAU;AAAA,IACA,UAAA;AAAA,IACV,QAAQ;AAAA,IACA,QAAA;AAAA,IACR,aAZE,MAAwB;AAC5B,MAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,IACxE;AAAA,IAWI,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,sBAAqB;AAAA,EACtB,CAAA;AAEL,GAEA,IAAe,EAAS,CAAiB"}

package/dist/trends/components/TrendsDrawer.es.js

@@ -0,0 +1,38 @@
+import { useEvent as _, useGlobalCopyStore as S, useGlobalUiStore as C, useTransactionStore as E } from "../../common/context/hooks.es.js";
+import v from "../../common/components/drawer/Drawer.es.js";
+import { ANALYTICS_EVENTS as A } from "../../common/constants/Analytics.es.js";
+import D from "../../transactions/components/shared/TransactionList.es.js";
+import N from "../../transactions/components/shared/TransactionDetails.es.js";
+import e from "react";
+import { observer as b } from "mobx-react-lite";
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+var L = { title: "Transaction List" }, h = ({ categoryGuid: o, dateRange: r, isOpen: m, onClose: u }) => {
+  const { onEvent: f } = _(), { selectedAccountGuids: n } = C(), { common: p } = S(), { setFilter: d, sortedTransactions: a } = E(), [i, c] = e.useState(""), s = e.useMemo(() => a.find((t) => t.guid === i), [i, a]);
+  e.useEffect(() => {
+    d({
+      accounts: n,
+      dateRange: r,
+      custom: (t) => o === "" || o === t.category_guid || o === t.top_level_category_guid,
+      showSplits: !!o
+    });
+  }, [
+    n,
+    o,
+    r
+  ]), e.useEffect(() => f(A.TRENDS_VIEW_TRANSACTIONS), []);
+  const T = () => {
+    c(""), u();
+  };
+  return /* @__PURE__ */ w(v, {
+    ariaLabelClose: p.close_aria,
+    isOpen: m,
+    onClose: T,
+    title: L.title,
+    children: [s && /* @__PURE__ */ l(N, { transaction: s }), !s && /* @__PURE__ */ l(D, { onClick: c })]
+  });
+}, B = b(h);
+export {
+  B as default
+};
+
+//# sourceMappingURL=TrendsDrawer.es.js.map

package/dist/trends/components/TrendsDrawer.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsDrawer.es.js","names":[],"sources":["../../../src/trends/components/TrendsDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  useGlobalCopyStore,\n  useEvent,\n  useTransactionStore,\n  useGlobalUiStore,\n} from '../../common'\nimport { Transaction } from '../../core'\nimport { TransactionDetails, TransactionList } from '../../transactions'\n\nconst copy = {\n  title: 'Transaction List',\n}\n\ninterface TrendsDrawerProps {\n  categoryGuid: string\n  dateRange: {\n    start: Date\n    end: Date\n  }\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst TrendsDrawer: React.FC<TrendsDrawerProps> = ({\n  categoryGuid,\n  dateRange,\n  isOpen,\n  onClose,\n}) => {\n  const { onEvent } = useEvent()\n  const { selectedAccountGuids: accounts } = useGlobalUiStore()\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { setFilter, sortedTransactions } = useTransactionStore()\n\n  const [guid, setGuid] = React.useState('')\n  const transaction = React.useMemo(\n    () => sortedTransactions.find((t) => t.guid === guid),\n    [guid, sortedTransactions],\n  )\n\n  React.useEffect(() => {\n    setFilter({\n      accounts,\n      dateRange,\n      custom: (t: Transaction) =>\n        categoryGuid === '' ||\n        categoryGuid === t.category_guid ||\n        categoryGuid === t.top_level_category_guid,\n      showSplits: Boolean(categoryGuid),\n    })\n  }, [accounts, categoryGuid, dateRange])\n\n  React.useEffect(() => onEvent(ANALYTICS_EVENTS.TRENDS_VIEW_TRANSACTIONS), [])\n\n  const handleClose = () => {\n    setGuid('')\n    onClose()\n  }\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={copy.title}\n    >\n      {transaction && <TransactionDetails transaction={transaction} />}\n      {!transaction && <TransactionList onClick={setGuid} />}\n    </Drawer>\n  )\n}\n\nexport default observer(TrendsDrawer)\n"],"mappings":";;;;;;;;AAcA,IAAM,IAAO,EACX,OAAO,mBACT,GAYM,IAAA,CAA6C,EACjD,cAAA,GACA,WAAA,GACA,QAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,sBAAsB,EAAA,IAAa,EAAiB,GACtD,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,WAAA,GAAW,oBAAA,EAAA,IAAuB,EAAoB,GAExD,CAAC,GAAM,CAAA,IAAW,EAAM,SAAS,EAAE,GACnC,IAAc,EAAM,QAAA,MAClB,EAAmB,KAAA,CAAM,MAAM,EAAE,SAAS,CAAI,GACpD,CAAC,GAAM,CAAkB,CAC3B;AAEA,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU;AAAA,MACR,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,CAAS,MACP,MAAiB,MACjB,MAAiB,EAAE,iBACnB,MAAiB,EAAE;AAAA,MACrB,YAAY,EAAQ;AAAA,IACtB,CAAC;AAAA,EACH,GAAG;AAAA,IAAC;AAAA,IAAU;AAAA,IAAc;AAAA,EAAS,CAAC,GAEtC,EAAM,UAAA,MAAgB,EAAQ,EAAiB,wBAAwB,GAAG,CAAC,CAAC;AAE5E,QAAM,IAAA,MAAoB;AACxB,IAAA,EAAQ,EAAE,GACV,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IACnB,QAAA;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAK;AAAA,cAJd,CAMG,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA,GAC9D,CAAC,KAAe,gBAAA,EAAC,GAAD,EAAiB,SAAS,EAAU,CAAA,CAC/C;AAAA;AAEZ,GAEA,IAAe,EAAS,CAAY"}

package/dist/trends/components/TrendsInsights.es.js

@@ -0,0 +1,38 @@
+import { useEvent as S, useGlobalStore as C } from "../../common/context/hooks.es.js";
+import { useScreenSize as T } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as I } from "../../common/constants/Analytics.es.js";
+import { TRENDS_ANALYTICS_METADATA as L } from "../constants/TrendsWidget.es.js";
+import k from "../../microinsights/InsightsMicroWidget.es.js";
+import "react";
+import { observer as v } from "mobx-react-lite";
+import { jsx as r } from "react/jsx-runtime";
+import { Stack as A } from "@mui/material";
+var E = ({ beats: o, onInsightCardClick: t }) => {
+  const { onEvent: s } = S(), { isMobile: i, isDesktop: n, isLargeDesktop: a } = T(), { beatStore: l, endpoint: d, sessionToken: c } = C(), e = n || a, u = e || i ? 1 : 2, h = () => null, m = (p) => {
+    t?.(p), s(I.TRENDS_CLICK_INSIGHT, L);
+  }, g = e ? 200 : 170, f = e ? 170 : 124;
+  return /* @__PURE__ */ r(A, {
+    sx: { height: o.length > 0 ? g : f },
+    children: /* @__PURE__ */ r(k, {
+      areBeatsLoading: l.isLoading,
+      beats: o,
+      cardStyle: "border",
+      endpoint: d,
+      headerSx: { p: 0 },
+      logOutUser: h,
+      onCardClick: m,
+      showCarouselControls: !0,
+      showHeader: e,
+      showIcon: !0,
+      showWithMargin: !1,
+      token: c,
+      userHasFullInsightFeedBeats: !1,
+      visibleCardsCount: u
+    })
+  });
+}, z = v(E);
+export {
+  z as default
+};
+
+//# sourceMappingURL=TrendsInsights.es.js.map

package/dist/trends/components/TrendsInsights.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendsInsights.es.js","names":[],"sources":["../../../src/trends/components/TrendsInsights.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { Stack } from '@mui/material'\n\nimport { Beat } from '../../core/types/Beat'\nimport { ANALYTICS_EVENTS, useEvent, useGlobalStore, useScreenSize } from '../../common'\n\nimport { InsightsMicroWidget } from '../../microinsights'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface TrendsMicroInsightsProps {\n  beats: Beat[]\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsMicroInsights: React.FC<TrendsMicroInsightsProps> = ({ beats, onInsightCardClick }) => {\n  const { onEvent } = useEvent()\n  const { isMobile, isDesktop, isLargeDesktop } = useScreenSize()\n  const { beatStore, endpoint, sessionToken } = useGlobalStore()\n\n  const isLargeLayout = isDesktop || isLargeDesktop\n  const visibleCards = isLargeLayout || isMobile ? 1 : 2\n\n  const handleLogOutUser = () => {\n    return null\n  }\n\n  const handleCardClick = (beat?: Beat) => {\n    onInsightCardClick?.(beat)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_INSIGHT, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const carouselHeight = isLargeLayout ? 200 : 170\n  const zeroStateHeight = isLargeLayout ? 170 : 124\n  const containerHeight = beats.length > 0 ? carouselHeight : zeroStateHeight\n\n  return (\n    <Stack sx={{ height: containerHeight }}>\n      <InsightsMicroWidget\n        areBeatsLoading={beatStore.isLoading}\n        beats={beats}\n        cardStyle=\"border\"\n        endpoint={endpoint}\n        headerSx={{ p: 0 }}\n        logOutUser={handleLogOutUser}\n        onCardClick={handleCardClick}\n        showCarouselControls={true}\n        showHeader={isLargeLayout}\n        showIcon={true}\n        showWithMargin={false}\n        token={sessionToken}\n        userHasFullInsightFeedBeats={false}\n        visibleCardsCount={visibleCards}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(TrendsMicroInsights)\n"],"mappings":";;;;;;;;;AAeA,IAAM,IAAA,CAA2D,EAAE,OAAA,GAAO,oBAAA,EAAA,MAAyB;AACjG,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAA,GAAU,WAAA,GAAW,gBAAA,EAAA,IAAmB,EAAc,GACxD,EAAE,WAAA,GAAW,UAAA,GAAU,cAAA,EAAA,IAAiB,EAAe,GAEvD,IAAgB,KAAa,GAC7B,IAAe,KAAiB,IAAW,IAAI,GAE/C,IAAA,MACG,MAGH,IAAA,CAAmB,MAAgB;AACvC,IAAA,IAAqB,CAAI,GACzB,EAAQ,EAAiB,sBAAsB,CAAyB;AAAA,EAC1E,GAEM,IAAiB,IAAgB,MAAM,KACvC,IAAkB,IAAgB,MAAM;AAG9C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,QAHS,EAAM,SAAS,IAAI,IAAiB,EAGrB;AAAA,cACnC,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAiB,EAAU;AAAA,MACpB,OAAA;AAAA,MACP,WAAU;AAAA,MACA,UAAA;AAAA,MACV,UAAU,EAAE,GAAG,EAAE;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B,mBAAmB;AAAA,IACpB,CAAA;AAAA,EACI,CAAA;AAEX,GAEA,IAAe,EAAS,CAAmB"}