@mx-cartographer/experiences 6.26.18-alpha.mega1 → 6.26.18-alpha.mega3

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

@@ -0,0 +1,25 @@
+import { jsx as t } from "react/jsx-runtime";
+import { observer as c } from "mobx-react-lite";
+import { CategoryIcon as f, ChevronRightIcon as p } from "@mxenabled/mxui";
+import { ListItemRow as u } from "../../../common/components/ListItemRow/index.es.js";
+import { useGlobalCopyStore as C } from "../../../common/context/hooks/index.es.js";
+import { formatCurrency as g } from "../../../common/utils/NumberFormatting/index.es.js";
+const b = c(
+  ({ onClick: o, name: i, amount: s, guid: r, transactions: a }) => {
+    const { trends: n } = C(), e = a?.length || 0, m = `${e} ${e === 1 ? n.transaction : n.transactions}`;
+    return /* @__PURE__ */ t(
+      u,
+      {
+        leftIcon: r ? /* @__PURE__ */ t(f, { categoryGuid: r }) : void 0,
+        onClick: o,
+        rightContent: g(s, "0,0.00"),
+        rightIcon: o ? /* @__PURE__ */ t(p, {}) : void 0,
+        subtitle: m,
+        title: i
+      }
+    );
+  }
+);
+export {
+  b as default
+};

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

@@ -0,0 +1,34 @@
+import { jsx as r } from "react/jsx-runtime";
+import { observer as a } from "mobx-react-lite";
+import i from "@mui/material/Stack";
+import { useTrendsStore as l } from "../../../common/context/hooks/index.es.js";
+import { LineChart as c } from "../../../common/components/charts/LineChart/index.es.js";
+const b = a(() => {
+  const { categoryDetailsChartData: o, selectedCategoryData: t } = l(), s = t?.chartLabel ? t.chartLabel : "", e = t?.color;
+  return /* @__PURE__ */ r(i, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ r(
+    c,
+    {
+      baseline: "min",
+      colors: [e],
+      curveType: "bump",
+      datasets: o,
+      height: 265,
+      labels: [s],
+      markStyles: () => ({
+        stroke: e
+      }),
+      showArea: !0,
+      showAverage: !0,
+      showLegend: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0"
+    }
+  ) });
+});
+export {
+  b as default
+};

package/dist/trends/components/CategoryDetailDrawer/index.es.js

@@ -0,0 +1,44 @@
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import { observer as d } from "mobx-react-lite";
+import g from "@mui/material/Stack";
+import { CategoryIcon as f } from "@mxenabled/mxui";
+import { ListItemRow as u } from "../../../common/components/ListItemRow/index.es.js";
+import y from "../TransactionsList/index.es.js";
+import C from "../CategoryDetailChart/index.es.js";
+import { useGlobalCopyStore as h, useTrendsStore as b } from "../../../common/context/hooks/index.es.js";
+import D from "../../../common/components/drawer/Drawer/index.es.js";
+import { formatCurrency as I } from "../../../common/utils/NumberFormatting/index.es.js";
+const v = d(({ onClose: a }) => {
+  const { trends: e } = h(), { selectedCategoryData: o, selectedDateRangeMonthRange: n } = b();
+  if (!o)
+    return null;
+  const { guid: s, name: i, amount: m, transactions: r } = o, c = o.name === "Income" ? e.category_income : e.category_spending, l = () => {
+    a?.();
+  };
+  return /* @__PURE__ */ t(
+    D,
+    {
+      ariaLabelClose: e.close_category_details,
+      isOpen: !0,
+      onClose: l,
+      shouldShowHeaderShadow: !0,
+      title: c,
+      children: /* @__PURE__ */ p(g, { sx: { alignItems: "center", pt: 16 }, children: [
+        /* @__PURE__ */ t(
+          u,
+          {
+            leftIcon: /* @__PURE__ */ t(f, { categoryGuid: s }),
+            rightContent: I(m, "0,0.00"),
+            subtitle: n,
+            title: i
+          }
+        ),
+        /* @__PURE__ */ t(C, {}),
+        r && /* @__PURE__ */ t(y, { transactions: r })
+      ] })
+    }
+  );
+});
+export {
+  v as default
+};

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

@@ -0,0 +1,39 @@
+import { jsxs as T, jsx as s } from "react/jsx-runtime";
+import d from "react";
+import { Text as i } from "@mxenabled/mxui";
+import x from "@mui/material/Box";
+import { useGlobalCopyStore as u, useCategoryStore as S } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as _ } from "../../../common/hooks/useScreenSize/index.es.js";
+import { formatDate as n, DATE_FORMATS_INTL as t } from "../../../common/constants/DateFormats/index.es.js";
+const N = ({ selectedDateRange: o, selectedCategoryGuid: a }) => {
+  const { trends: m } = u(), { isMobile: r, isDesktop: e } = _(), { getCategoryName: l } = S(), c = d.useMemo(() => {
+    const p = n(
+      o.start,
+      r ? t.MONTH_SHORT_YEAR : t.MONTH_YEAR
+    ), f = n(
+      o.end,
+      r ? t.MONTH_SHORT_YEAR : t.MONTH_YEAR
+    );
+    return `${p} - ${f}`;
+  }, [o, r]);
+  return /* @__PURE__ */ T(x, { sx: { mr: 10, minWidth: "60%" }, children: [
+    /* @__PURE__ */ s(
+      i,
+      {
+        display: "block",
+        fontWeight: 700,
+        sx: {
+          whiteSpace: "normal",
+          overflow: "visible",
+          textOverflow: "unset"
+        },
+        variant: e ? "H3" : "Body",
+        children: l(a) || m.sub_title
+      }
+    ),
+    /* @__PURE__ */ s(i, { variant: e ? "Body" : "Small", children: c })
+  ] });
+};
+export {
+  N as default
+};

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

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

package/dist/trends/components/TransactionsList/index.es.js

@@ -0,0 +1,81 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { observer as b } from "mobx-react-lite";
+import a from "react";
+import { format as y, fromUnixTime as w } from "date-fns";
+import C from "@mui/material/Divider";
+import v from "@mui/material/Link";
+import E from "@mui/material/List";
+import s from "@mui/material/Stack";
+import { Text as L, Icon as S, MerchantLogo as I } from "@mxenabled/mxui";
+import { ListItemRow as M } from "../../../common/components/ListItemRow/index.es.js";
+import _ from "../../../common/components/SubheaderRow/index.es.js";
+import { useAppConfig as T, useGlobalCopyStore as k } from "../../../common/context/hooks/index.es.js";
+import { useScreenSize as D } from "../../../common/hooks/useScreenSize/index.es.js";
+import { formatCurrency as j } from "../../../common/utils/NumberFormatting/index.es.js";
+const P = b(({ transactions: n }) => {
+  const { is_mobile_webview: p } = T(), { trends: m, transactions: c } = k(), { isDesktop: l } = D(), d = ` ${n.length === 1 ? m.transaction : m.transactions} (${n.length})`, f = (() => {
+    const o = /* @__PURE__ */ new Map();
+    return n.forEach((t) => {
+      o.has(t.date) || o.set(t.date, []), o.get(t.date).push(t);
+    }), Array.from(o.entries()).sort(([t], [e]) => e - t).map(([t, e]) => ({ timestamp: t, transactions: e }));
+  })(), h = () => {
+  }, u = n.length > 0 && !p && l;
+  return /* @__PURE__ */ i(s, { sx: { width: "100%" }, children: [
+    /* @__PURE__ */ i(
+      s,
+      {
+        sx: {
+          alignItems: "flex-start",
+          alignSelf: "stretch",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          pb: 12,
+          pt: 16,
+          px: 24
+        },
+        children: [
+          /* @__PURE__ */ r(L, { bold: !0, variant: "body1", children: d }),
+          /* @__PURE__ */ r(s, { sx: { alignItems: "center", gap: 16 }, children: u && /* @__PURE__ */ i(
+            v,
+            {
+              onClick: h,
+              sx: { display: "flex", alignItems: "end", gap: 8 },
+              variant: "body2",
+              children: [
+                /* @__PURE__ */ r(S, { name: "ios_share" }),
+                c.export_csv_btn
+              ]
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(E, { children: f.map(({ timestamp: o, transactions: t }) => /* @__PURE__ */ i(a.Fragment, { children: [
+      /* @__PURE__ */ r(_, { children: y(w(o), "EEEE, MMMM dd") }),
+      t.map((e, g) => {
+        const x = g === t.length - 1;
+        return /* @__PURE__ */ i(a.Fragment, { children: [
+          /* @__PURE__ */ r(
+            M,
+            {
+              leftIcon: /* @__PURE__ */ r(
+                I,
+                {
+                  categoryGuid: e.guid,
+                  merchantGuid: e.merchant_guid ?? ""
+                }
+              ),
+              rightContent: j(e.amount, "0,0.00"),
+              subtitle: e.category,
+              title: e.description
+            }
+          ),
+          /* @__PURE__ */ r(C, { sx: { ml: x ? 0 : 68 } })
+        ] }, e.guid);
+      })
+    ] }, o)) })
+  ] });
+});
+export {
+  P as default
+};

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

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

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as n } from "react/jsx-runtime";
+import s from "react";
+import { observer as I } from "mobx-react-lite";
+import { useTheme as M, Stack as w } from "@mui/material";
+import D from "../../../microinsights/components/insightsmicrowidget/InsightsMicroWidget/index.es.js";
+import { TRENDS_BEAT_TEMPLATES as E } from "../../constants/TrendsInsights/index.es.js";
+import { useScreenSize as H } from "../../../common/hooks/useScreenSize/index.es.js";
+import { useGlobalStore as v, useGlobalUiStore as x, useTrendsStore as y } from "../../../common/context/hooks/index.es.js";
+const z = ({ onInsightCardClick: l }) => {
+  const d = M(), { isMobile: u, isDesktop: c, isLargeDesktop: h } = H(), { beatStore: t, endpoint: m, sessionToken: g } = v(), { isInitialized: o } = x(), { sortedCategoriesList: r } = y(), [i, f] = s.useState(!1), p = d.palette.mode === "dark", e = c || h, C = e || u ? 1 : 2;
+  s.useEffect(() => {
+    o && t.loadBeats().finally(() => f(!0));
+  }, [o]);
+  const a = s.useMemo(() => {
+    if (!i) return [];
+    const B = r.map((b) => b.guid);
+    return t.getFilteredBeats({ categoryGuids: B, templates: E });
+  }, [i, r]), S = () => null, L = e ? 200 : 170, T = e ? 170 : 124, k = a.length > 0 ? L : T;
+  return /* @__PURE__ */ n(w, { sx: { height: k }, children: /* @__PURE__ */ n(
+    D,
+    {
+      areBeatsLoading: t.isLoading,
+      beats: a,
+      endpoint: m,
+      logOutUser: S,
+      onCardClick: l,
+      showBorder: !0,
+      showCTAColocatedWithText: !1,
+      showCarouselControls: !0,
+      showHeader: e,
+      showIcon: !0,
+      showWithMargin: !1,
+      token: g,
+      useDarkMode: p,
+      userHasFullInsightFeedBeats: !1,
+      variant: "outlined",
+      visibleCardsCount: C
+    }
+  ) });
+}, j = I(z);
+export {
+  j as default
+};

package/dist/trends/components/TrendsMicroSpendingIncomeBox/index.es.js

@@ -0,0 +1,96 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import u from "react";
+import W from "@mui/material/Box";
+import r from "@mui/material/Stack";
+import { TrendingUp as P, TrendingDown as R } from "@mxenabled/mx-icons";
+import { P as a, H3 as I } from "@mxenabled/mxui";
+import { useWidgetContainerProvider as j } from "../../../common/context/hooks/index.es.js";
+import { formatPercentage as D, formatCurrency as d } from "../../../common/utils/NumberFormatting/index.es.js";
+const S = 70, k = ({
+  title: w,
+  totalAmount: o,
+  transactionType: i,
+  percentage: t,
+  secondaryLabel: b,
+  shouldDisplayPercentage: m
+}) => {
+  const { availableWidth: f } = j(), p = u.useRef(null), x = u.useRef(null), v = D(Number(Math.abs(t)), {
+    style: "percent",
+    minimumIntegerDigits: 1
+  }), y = f === 288 && d(o, "0,0.00").length > 10 ? d(o, "0,0") : d(o, "0,0.00"), s = i === "spending" ? t > 0 : t >= 0, c = i === "spending" ? "error.main" : "success.main", l = i === "spending" ? "success.main" : "text.secondary", g = p?.current, h = x?.current, C = g && h ? g.scrollWidth > h.clientWidth - S : !1;
+  return /* @__PURE__ */ n(
+    r,
+    {
+      sx: {
+        border: 1,
+        borderColor: "divider",
+        borderRadius: "4px",
+        flex: 1,
+        minWidth: 0,
+        px: 12,
+        py: 8
+      },
+      children: [
+        /* @__PURE__ */ n(
+          r,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ e(a, { color: "text.secondary", variant: "caption", children: w }),
+              m && /* @__PURE__ */ n(r, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
+                s ? /* @__PURE__ */ e(P, { size: 20, sx: { color: c } }) : /* @__PURE__ */ e(R, { size: 20, sx: { color: l } }),
+                /* @__PURE__ */ e(
+                  a,
+                  {
+                    sx: {
+                      color: s ? c : l,
+                      fontWeight: 600
+                    },
+                    variant: "body2",
+                    children: v
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n(
+          r,
+          {
+            ref: x,
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ e(
+                W,
+                {
+                  ref: p,
+                  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+                  children: /* @__PURE__ */ e(I, { children: y })
+                }
+              ),
+              m && f >= 450 && !C && /* @__PURE__ */ e(
+                a,
+                {
+                  color: s ? c : l,
+                  variant: "caption",
+                  children: b
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  k as TrendsMicroSpendingIncomeBox
+};

package/dist/trends/components/TrendsTable/AmountCell/index.es.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "@mui/material/Stack";
+import { CurrencyText as r } from "../../../../common/components/CurrencyText/index.es.js";
+const x = (t) => {
+  const n = t.row[t.field];
+  return /* @__PURE__ */ e(o, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(r, { amount: n, variant: "Small" }) });
+};
+export {
+  x as AmountCell
+};

package/dist/trends/components/TrendsTable/CategoryCell/index.es.js

@@ -0,0 +1,30 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { CategoryIcon as n, Text as l } from "@mxenabled/mxui";
+import m from "@mui/material/Box";
+import t from "@mui/material/Stack";
+import { useGlobalCopyStore as g } from "../../../../common/context/hooks/index.es.js";
+import { CategoryGuidToName as y } from "../../../../common/constants/Category/index.es.js";
+import { buildDynamicCopy as d } from "../../../../common/utils/Localization/index.es.js";
+const p = ({ categoryGuid: r, topLevelCategoryGuid: i }) => {
+  const { categories: a } = g(), e = y[r];
+  return /* @__PURE__ */ c(t, { alignItems: "center", direction: "row", justifyContent: "center", children: [
+    /* @__PURE__ */ o(
+      m,
+      {
+        "aria-label": d(a.category_icon_label_aria, e),
+        role: "img",
+        children: /* @__PURE__ */ o(n, { categoryGuid: i })
+      }
+    ),
+    /* @__PURE__ */ o(l, { sx: { ml: 12, pb: 6 }, variant: "Small", children: e })
+  ] });
+}, _ = (r) => /* @__PURE__ */ o(t, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ o(
+  p,
+  {
+    categoryGuid: r.row.category,
+    topLevelCategoryGuid: r.row.top_level_category_guid
+  }
+) });
+export {
+  _ as CategoryCell
+};

package/dist/trends/components/TrendsTable/HeaderCell/index.es.js

@@ -0,0 +1,6 @@
+import { jsx as r } from "react/jsx-runtime";
+import { Text as o } from "@mxenabled/mxui";
+const l = (e) => /* @__PURE__ */ r(o, { fontWeight: 600, variant: "Small", children: e.colDef.headerName });
+export {
+  l as HeaderCell
+};