@mx-cartographer/experiences 7.12.9 → 7.12.11

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [7.12.11] - 03-23-2026
+
+- **FIXED** - ADA replace SpendingList dividers with border
+- **FIXED** - ADA add `aria-hidden` and `role="presentation"` to SpendingList bullets
+- **FIXED** - ADA add `aria-hidden` and `role="presentation"` to SpendingDonut icons
+- **FIXED** - ADA darkened/lightened category color 2px stroke around SpendingDonut areas
+
+## [7.12.10] - 03-23-2026
+
+- **ADDED** - font styling for mrs content tagged copy
+
 ## [7.12.9] - 03-23-2026
 
 - **FIXED** - semantic html in Transactions List

package/dist/{Donut-DSGXraiS.mjs → Donut-CpxJlVvJ.mjs}

@@ -1,19 +1,19 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import b from "react";
-import { selectAll as m, interpolateString as x, arc as I } from "d3";
-import d from "@mui/material/Box";
-import { useTheme as S } from "@mui/material/styles";
-const k = 100, E = 140, _ = 10, v = ({
-  data: u,
-  hoveredId: h,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import A from "react";
+import { selectAll as b, interpolateString as x, arc as I } from "d3";
+import u from "@mui/material/Box";
+import { useTheme as S, darken as m, lighten as E } from "@mui/material/styles";
+const _ = 100, v = 140, B = 10, N = ({
+  data: h,
+  hoveredId: p,
   onClick: a,
   onMouseEnter: s,
   onMouseLeave: l,
   selectedId: i,
   size: t = 300,
-  children: p
+  children: f
 }) => {
-  const f = S();
+  const c = S();
   let r = 0;
   const g = (o, n) => {
     (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a?.(n));
@@ -22,11 +22,11 @@ const k = 100, E = 140, _ = 10, v = ({
   }, D = (o) => {
     l?.(o);
   };
-  return b.useEffect(() => {
-    m(".arc-outer").transition("roll").duration(500).attrTween("transform", () => x("rotate(0)", "rotate(360)"));
-  }, []), /* @__PURE__ */ c(d, { height: t, position: "relative", width: t, children: [
-    /* @__PURE__ */ e(d, { height: "100%", width: "100%", children: p }),
-    /* @__PURE__ */ c(
+  return A.useEffect(() => {
+    b(".arc-outer").transition("roll").duration(500).attrTween("transform", () => x("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ d(u, { height: t, position: "relative", width: t, children: [
+    /* @__PURE__ */ e(u, { height: "100%", width: "100%", children: f }),
+    /* @__PURE__ */ d(
       "svg",
       {
         height: t,
@@ -37,19 +37,19 @@ const k = 100, E = 140, _ = 10, v = ({
           /* @__PURE__ */ e("style", { children: `
             .arc-outer:focus,
             .arc-outer:focus-visible {
-              stroke: ${f.palette.primary.main};
+              stroke: ${c.palette.primary.main};
               stroke-width: 3;
               stroke-opacity: 0.8;
             }
           ` }),
-          /* @__PURE__ */ e("g", { children: u.map((o) => {
+          /* @__PURE__ */ e("g", { children: h.map((o) => {
             const n = r;
             r = r + 2 * Math.PI * (o.value / 100);
-            const w = r, R = I().cornerRadius(4)({
-              innerRadius: k,
-              outerRadius: E + (o.id === i || o.id === h ? _ : 0),
+            const k = r, w = I().cornerRadius(4)({
+              innerRadius: _,
+              outerRadius: v + (o.id === i || o.id === p ? B : 0),
               startAngle: n,
-              endAngle: w,
+              endAngle: k,
               padAngle: 0.025
             });
             return /* @__PURE__ */ e(
@@ -58,15 +58,17 @@ const k = 100, E = 140, _ = 10, v = ({
                 "aria-label": o.label || `Segment ${o.id}`,
                 "aria-pressed": o.id === i,
                 className: "arc-outer",
-                d: R,
+                d: w,
                 fill: o.color,
                 onBlur: () => D(o.id),
                 onClick: () => a?.(o.id),
                 onFocus: () => y(o.id),
-                onKeyDown: (A) => g(A, o.id),
+                onKeyDown: (R) => g(R, o.id),
                 onMouseEnter: () => s?.(o.id),
                 onMouseLeave: () => l?.(o.id),
                 role: "button",
+                stroke: c.palette.mode === "light" ? m(o.color, 0.3) : E(o.color, 0.3),
+                strokeWidth: 2,
                 style: {
                   cursor: "pointer",
                   outline: "none"
@@ -80,7 +82,7 @@ const k = 100, E = 140, _ = 10, v = ({
       }
     )
   ] });
-}, j = v;
+}, K = N;
 export {
-  j as D
+  K as D
 };

package/dist/{SpendingLegend-DHi0vx8B.mjs → SpendingLegend-Bq6aXMNh.mjs}

@@ -1,19 +1,19 @@
 import { b as T } from "./CategoryUtil-BVixr0d5.mjs";
 import { b as p } from "./Category-CevNQ03n.mjs";
-import { jsxs as f, Fragment as w, jsx as m } from "react/jsx-runtime";
+import { jsxs as f, Fragment as N, jsx as d } from "react/jsx-runtime";
 import _ from "react";
-import { observer as N } from "mobx-react-lite";
-import k from "@mui/material/Button";
+import { observer as k } from "mobx-react-lite";
+import S from "@mui/material/Box";
+import M from "@mui/material/Button";
 import h from "@mui/material/Stack";
-import { useTheme as M } from "@mui/material/styles";
-import { CategoryIcon as A, CategoryIconVariants as G, Text as y, P as O } from "@mxenabled/mxui";
-import { D as $ } from "./Donut-DSGXraiS.mjs";
-import { u as j } from "./useAriaLive-MkYebyUR.mjs";
-import { u as R } from "./hooks-BxkfR-Ff.mjs";
-import { u as v } from "./useScreenSize-B6JyS_Lj.mjs";
+import { useTheme as A } from "@mui/material/styles";
+import { CategoryIcon as G, CategoryIconVariants as O, Text as y, P as $ } from "@mxenabled/mxui";
+import { D as j } from "./Donut-CpxJlVvJ.mjs";
+import { u as R } from "./useAriaLive-MkYebyUR.mjs";
+import { u as v } from "./hooks-BxkfR-Ff.mjs";
+import { u as B } from "./useScreenSize-B6JyS_Lj.mjs";
 import { f as x } from "./NumberFormatting-QCaNwbjv.mjs";
-import B from "@mui/material/Box";
-const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
+const D = 5, H = (i, l, g, m) => m.reduce((t, n) => {
   const a = i.find((s) => s.guid === n.category_guid);
   if (!a) return t;
   const o = a.parent_guid ?? a.guid, r = i.find((s) => s.guid === o);
@@ -31,8 +31,8 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
     categoryTotals: [c],
     amount: n.total
   }), t;
-}, []), no = (i, l, g, d) => {
-  const t = H(i, l, g, d), n = t.filter(
+}, []), no = (i, l, g, m) => {
+  const t = H(i, l, g, m), n = t.filter(
     (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
   ).sort((e, s) => s.amount - e.amount), a = n.reduce(
     (e, s) => e + s.amount,
@@ -67,9 +67,9 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
     totalAmount: a
   };
 }, eo = (i, l, g) => {
-  const d = i.filter(
+  const m = i.filter(
     (o) => o.guid === p.INCOME || o.parent_guid === p.INCOME
-  ), t = l.filter((o) => d.some((r) => r.guid === o.category_guid)).sort((o, r) => o.total - r.total).map((o, r) => ({
+  ), t = l.filter((o) => m.some((r) => r.guid === o.category_guid)).sort((o, r) => o.total - r.total).map((o, r) => ({
     guid: o.category_guid,
     name: i.find((c) => c.guid === o.category_guid)?.name,
     color: g[r],
@@ -93,13 +93,13 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
   data: i,
   isIncome: l = !1,
   onSelected: g,
-  onViewTransactions: d,
+  onViewTransactions: m,
   selectedId: t,
   size: n = 150,
   totalLabel: a,
   variant: o = "mini"
 }) => {
-  const { spending: r } = R(), c = M(), { isTablet: e } = v(), { announce: s, ariaLive: C } = j(), u = _.useMemo(
+  const { spending: r } = v(), c = A(), { isTablet: e } = B(), { announce: s, ariaLive: C } = R(), u = _.useMemo(
     () => t ? i.categoryData.find((b) => b.guid === t) : void 0,
     [t]
   );
@@ -109,12 +109,12 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
       s(`${u.name}: ${b}`);
     }
   }, [u, s, o]);
-  const S = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: c.palette.divider, value: 100 }], E = () => {
-    d?.(t);
-  }, I = e ? 32 : 48;
-  return /* @__PURE__ */ f(w, { children: [
+  const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: c.palette.divider, value: 100 }], I = () => {
+    m?.(t);
+  }, w = e ? 32 : 48;
+  return /* @__PURE__ */ f(N, { children: [
     C,
-    /* @__PURE__ */ m($, { data: S, onClick: g, selectedId: t, size: n, children: /* @__PURE__ */ m(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
+    /* @__PURE__ */ d(j, { data: E, onClick: g, selectedId: t, size: n, children: /* @__PURE__ */ d(h, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ f(h, { alignItems: "center", justifyContent: "center", minHeight: n, minWidth: n, children: [
       u && /* @__PURE__ */ f(
         h,
         {
@@ -124,15 +124,15 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
           mt: o === "mini" ? 0 : -16,
           sx: o === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
           children: [
-            /* @__PURE__ */ m(
-              A,
+            /* @__PURE__ */ d(S, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
+              G,
               {
                 categoryGuid: l ? p.INCOME : u.guid,
-                size: o === "mini" ? 24 : I,
-                variant: G.Transparent
+                size: o === "mini" ? 24 : w,
+                variant: O.Transparent
               }
-            ),
-            /* @__PURE__ */ m(
+            ) }),
+            /* @__PURE__ */ d(
               y,
               {
                 color: "secondary",
@@ -144,15 +144,15 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
           ]
         }
       ),
-      !u && o === "full" && /* @__PURE__ */ m(y, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
-      /* @__PURE__ */ m(O, { variant: o === "mini" ? "H2" : "H1", children: u ? x(u.amount, o === "mini" ? "0,0" : "0,0.00") : x(i.totalAmount, o === "mini" ? "0,0" : "0,0.00") }),
-      !u && o === "mini" && /* @__PURE__ */ m(y, { color: "secondary", noWrap: !0, variant: "Tiny", children: a }),
-      o === "full" && /* @__PURE__ */ m(
-        k,
+      !u && o === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
+      /* @__PURE__ */ d($, { variant: o === "mini" ? "H2" : "H1", children: u ? x(u.amount, o === "mini" ? "0,0" : "0,0.00") : x(i.totalAmount, o === "mini" ? "0,0" : "0,0.00") }),
+      !u && o === "mini" && /* @__PURE__ */ d(y, { color: "secondary", noWrap: !0, variant: "Tiny", children: a }),
+      o === "full" && /* @__PURE__ */ d(
+        M,
         {
           "aria-label": `View ${u?.name || ""} Transactions`,
           disabled: i.categoryData.length === 0,
-          onClick: E,
+          onClick: I,
           sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
           variant: "text",
           children: r.view_transactions
@@ -160,11 +160,11 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
       )
     ] }) }) })
   ] });
-}, ro = N(V), ao = ({ data: i, onSelected: l, selectedId: g }) => {
-  const d = (t, n) => {
+}, ro = k(V), ao = ({ data: i, onSelected: l, selectedId: g }) => {
+  const m = (t, n) => {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), l(n));
   };
-  return /* @__PURE__ */ m(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((t) => /* @__PURE__ */ f(
+  return /* @__PURE__ */ d(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((t) => /* @__PURE__ */ f(
     h,
     {
       alignItems: "center",
@@ -173,13 +173,13 @@ const D = 5, H = (i, l, g, d) => d.reduce((t, n) => {
       direction: "row",
       gap: 8,
       onClick: () => l(t.guid),
-      onKeyDown: (n) => d(n, t.guid),
+      onKeyDown: (n) => m(n, t.guid),
       role: "button",
       sx: { cursor: "pointer" },
       tabIndex: 0,
       children: [
-        /* @__PURE__ */ m(B, { borderRadius: 4, height: 8, sx: { backgroundColor: t.color }, width: 8 }),
-        /* @__PURE__ */ m(y, { bold: t.guid === g, variant: "XSmall", children: t.name })
+        /* @__PURE__ */ d(S, { borderRadius: 4, height: 8, sx: { backgroundColor: t.color }, width: 8 }),
+        /* @__PURE__ */ d(y, { bold: t.guid === g, variant: "XSmall", children: t.name })
       ]
     },
     t.guid

package/dist/{ViewMoreMicroCard-DirvUT9O.mjs → ViewMoreMicroCard-BhG9hCoO.mjs}

@@ -536,7 +536,11 @@ const Y = h.createContext(null), lt = ({
                   overflow: "hidden",
                   textOverflow: "ellipsis",
                   WebkitBoxOrient: "vertical",
-                  WebkitLineClamp: k ? 2 : 3
+                  WebkitLineClamp: k ? 2 : 3,
+                  "& .bold-copy": {
+                    fontWeight: "bold",
+                    fontFamily: "inherit"
+                  }
                 },
                 variant: "subtitle2"
               }

package/dist/common/index.es.js

@@ -37,7 +37,7 @@ import { L as Gs } from "../TrendsStore-st6GjDtg.mjs";
 import { A as Ws, B as qs, I as Ys, N as Qs, T as Ks, a as zs } from "../Notification-CMBNDGC-.mjs";
 import { G as Vs } from "../GlobalAccountFilter-B73Pw1hJ.mjs";
 import { S as Zs } from "../StatusBar-BK_uYHAB.mjs";
-import { D as tr } from "../Donut-DSGXraiS.mjs";
+import { D as tr } from "../Donut-CpxJlVvJ.mjs";
 import { D as sr } from "../Dialog-Ck34yr-d.mjs";
 import { jsxs as D, jsx as b } from "react/jsx-runtime";
 import { css as j } from "@mxenabled/cssinjs";

package/dist/finstrong/index.es.js

@@ -51,7 +51,7 @@ import { ChartsXAxis as Zn } from "@mui/x-charts/ChartsXAxis";
 import { ChartsYAxis as Jn } from "@mui/x-charts/ChartsYAxis";
 import { startOfMonth as Tt } from "date-fns/startOfMonth";
 import { endOfMonth as At } from "date-fns/endOfMonth";
-import { g as eo, S as to, b as no } from "../SpendingLegend-DHi0vx8B.mjs";
+import { g as eo, S as to, b as no } from "../SpendingLegend-Bq6aXMNh.mjs";
 import { formatISO as oo } from "date-fns/formatISO";
 import { fromUnixTime as ro } from "date-fns/fromUnixTime";
 import { startOfToday as st } from "date-fns/startOfToday";

package/dist/investments/index.es.js

@@ -22,7 +22,7 @@ import { a as Ue, f as ie } from "../NumberFormatting-QCaNwbjv.mjs";
 import { u as U } from "../useScreenSize-B6JyS_Lj.mjs";
 import ce from "@mui/material/styles/useTheme";
 import { Icon as k } from "@mxenabled/mx-icons";
-import { D as je } from "../Donut-DSGXraiS.mjs";
+import { D as je } from "../Donut-CpxJlVvJ.mjs";
 import { useTheme as ze } from "@mui/material/styles";
 import { f as Oe, A as V } from "../InvestmentUtil-BItV7uEs.mjs";
 import Ve from "@mui/material/ListItemText";

package/dist/microinsights/index.es.js

@@ -1,4 +1,4 @@
-import { A as u, B as s, C as c, a as v, b as C, I as R, M as H, d as M, c as F, N as V, V as k, Z as x } from "../ViewMoreMicroCard-DirvUT9O.mjs";
+import { A as u, B as s, C as c, a as v, b as C, I as R, M as H, d as M, c as F, N as V, V as k, Z as x } from "../ViewMoreMicroCard-BhG9hCoO.mjs";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 const a = ({
   color: i = "currentColor",

package/dist/spending/index.es.js

@@ -1,42 +1,42 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import l from "react";
-import { observer as v } from "mobx-react-lite";
-import { startOfMonth as at } from "date-fns/startOfMonth";
-import { endOfMonth as it } from "date-fns/endOfMonth";
-import L from "@mui/material/Box";
+import { observer as L } from "mobx-react-lite";
+import { startOfMonth as ot } from "date-fns/startOfMonth";
+import { endOfMonth as at } from "date-fns/endOfMonth";
+import w from "@mui/material/Box";
 import C from "@mui/material/Stack";
 import N from "@mui/material/Tab";
-import rt from "@mui/material/Tabs";
-import yt from "@mui/material/styles/useTheme";
-import { g as st, a as lt, S as $, b as Y } from "../SpendingLegend-DHi0vx8B.mjs";
+import it from "@mui/material/Tabs";
+import _t from "@mui/material/styles/useTheme";
+import { g as rt, a as st, S as $, b as X } from "../SpendingLegend-Bq6aXMNh.mjs";
 import { Text as T, Icon as bt } from "@mxenabled/mxui";
 import { f as R } from "../NumberFormatting-QCaNwbjv.mjs";
-import { u as I, l as A, d as ct, b as z, a as V, h as dt, g as Ct } from "../hooks-BxkfR-Ff.mjs";
-import { u as gt } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
-import { L as pt } from "../Loader-D3rjKx72.mjs";
-import { M as St } from "../MiniWidgetContainer-Cu72GNsE.mjs";
-import { startOfToday as q } from "date-fns/startOfToday";
-import Tt from "@mui/material/Button";
-import { useTheme as Mt } from "@mui/material";
-import { e as Dt } from "../exportTransactionsToCSV-CdTF_RqL.mjs";
-import { T as xt } from "../StatusIndicator-BV3oFzxo.mjs";
-import { T as wt } from "../TransactionDetails-Bbt820BH.mjs";
-import Lt from "@mui/material/Collapse";
-import F from "@mui/material/Divider";
-import J from "@mui/material/List";
-import Q from "@mui/material/ListItem";
-import Z from "@mui/material/ListItemButton";
-import { u as vt } from "../useScreenSize-B6JyS_Lj.mjs";
-import { D as tt } from "../Drawer-DV4NTsFg.mjs";
-import { b as w } from "../Category-CevNQ03n.mjs";
-import { parseISO as et } from "date-fns/parseISO";
-import { A as nt } from "../Analytics-BYItVAe-.mjs";
+import { u as I, l as A, d as lt, b as V, a as F, h as dt, g as yt } from "../hooks-BxkfR-Ff.mjs";
+import { u as ct } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
+import { L as gt } from "../Loader-D3rjKx72.mjs";
+import { M as Ct } from "../MiniWidgetContainer-Cu72GNsE.mjs";
+import { startOfToday as Y } from "date-fns/startOfToday";
+import St from "@mui/material/Button";
+import { useTheme as Tt } from "@mui/material";
+import { e as Mt } from "../exportTransactionsToCSV-CdTF_RqL.mjs";
+import { T as Dt } from "../StatusIndicator-BV3oFzxo.mjs";
+import { T as xt } from "../TransactionDetails-Bbt820BH.mjs";
+import vt from "@mui/material/Collapse";
+import wt from "@mui/material/Divider";
+import q from "@mui/material/List";
+import J from "@mui/material/ListItem";
+import Q from "@mui/material/ListItemButton";
+import { u as Lt } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as Z } from "../Drawer-DV4NTsFg.mjs";
+import { b as v } from "../Category-CevNQ03n.mjs";
+import { parseISO as tt } from "date-fns/parseISO";
+import { A as et } from "../Analytics-BYItVAe-.mjs";
 import { W as It } from "../WidgetContainer-B0ncgABX.mjs";
-const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C, { direction: "column", children: [
+const B = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C, { direction: "column", children: [
   /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: d }),
   /* @__PURE__ */ t(T, { variant: "XSmall", children: R(n, o === "mini" ? "0,0" : "0,0.00") })
 ] }), At = () => {
-  const n = yt(), { goals: d, spending: o } = I(), { categories: a, dateRangeCategoryTotals: i } = A(), g = l.useMemo(
+  const n = _t(), { goals: d, spending: o } = I(), { categories: a, dateRangeCategoryTotals: i } = A(), c = l.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -46,24 +46,24 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
       n.palette.chartMono.chartMono6
     ],
     [n]
-  ), [e, r] = l.useState(""), [p, y] = l.useState(0), u = l.useMemo(
-    () => st(a, d, n, i),
+  ), [e, r] = l.useState(""), [g, b] = l.useState(0), u = l.useMemo(
+    () => rt(a, d, n, i),
     [a, i]
   ), m = l.useMemo(
-    () => lt(a, i, g),
-    [a, i, g]
+    () => st(a, i, c),
+    [a, i, c]
   ), M = (f, D) => {
-    y(D), r("");
-  }, b = (f) => {
+    b(D), r("");
+  }, y = (f) => {
     r(e === f ? "" : f);
   };
-  return /* @__PURE__ */ c(L, { width: "100%", children: [
-    /* @__PURE__ */ c(
-      rt,
+  return /* @__PURE__ */ p(w, { width: "100%", children: [
+    /* @__PURE__ */ p(
+      it,
       {
         "aria-label": o.mini_title,
         onChange: M,
-        value: p,
+        value: g,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
@@ -72,14 +72,14 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                O,
+                B,
                 {
                   amount: u.totalAmount,
                   label: o.spend_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: p === 0 ? 0 : -1
+              tabIndex: g === 0 ? 0 : -1
             }
           ),
           /* @__PURE__ */ t(
@@ -88,125 +88,129 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                O,
+                B,
                 {
                   amount: m.totalAmount,
                   label: o.income_tab_title,
                   variant: "mini"
                 }
               ),
-              tabIndex: p === 1 ? 0 : -1
+              tabIndex: g === 1 ? 0 : -1
             }
           )
         ]
       }
     ),
     /* @__PURE__ */ t(
-      L,
+      w,
       {
         "aria-labelledby": "spending-tab",
-        hidden: p !== 0,
+        hidden: g !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ c(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
             $,
             {
               data: u,
-              onSelected: b,
+              onSelected: y,
               selectedId: e,
               totalLabel: o.total_spending
             }
           ),
-          /* @__PURE__ */ t(Y, { data: u, onSelected: b, selectedId: e })
+          /* @__PURE__ */ t(X, { data: u, onSelected: y, selectedId: e })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      L,
+      w,
       {
         "aria-labelledby": "income-tab",
-        hidden: p !== 1,
+        hidden: g !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ c(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
             $,
             {
               data: m,
               isIncome: !0,
-              onSelected: b,
+              onSelected: y,
               selectedId: e,
               totalLabel: o.total_income
             }
           ),
-          /* @__PURE__ */ t(Y, { data: m, onSelected: b, selectedId: e })
+          /* @__PURE__ */ t(X, { data: m, onSelected: y, selectedId: e })
         ] })
       }
     )
   ] });
-}, Et = v(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = ct(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { spending: p } = I(), { isInitialized: y, selectedAccounts: u } = z();
-  return gt({
+}, Et = L(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { dateRangeTotalsLoaded: i, categoriesLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { spending: g } = I(), { isInitialized: b, selectedAccounts: u } = V();
+  return ct({
     widgetName: "SpendingMiniWidget",
     isLoaded: i
   }), l.useEffect(() => {
-    o || a().finally(), g || e().finally();
+    o || a().finally(), c || e().finally();
   }, []), l.useEffect(() => {
     r(
       u,
-      at(/* @__PURE__ */ new Date()),
-      it(/* @__PURE__ */ new Date())
+      ot(/* @__PURE__ */ new Date()),
+      at(/* @__PURE__ */ new Date())
     ).finally();
-  }, [u]), y ? /* @__PURE__ */ t(
-    St,
+  }, [u]), b ? /* @__PURE__ */ t(
+    Ct,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: n,
-      primaryCtaLabel: p.primary_cta,
+      primaryCtaLabel: g.primary_cta,
       sx: { height: "100%", ...d },
-      title: p.mini_title,
+      title: g.mini_title,
       children: /* @__PURE__ */ t(Et, {})
     }
-  ) : /* @__PURE__ */ t(pt, {});
-}, Ce = v(Wt), Rt = ({
+  ) : /* @__PURE__ */ t(gt, {});
+}, Ce = L(Wt), Rt = ({
   data: n,
   onSelected: d,
   selectedId: o = "",
   title: a
 }) => {
-  const { spending: i } = I(), g = n.categoryData.find((e) => e.guid === o);
-  return /* @__PURE__ */ c(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+  const { spending: i } = I(), c = n.categoryData.find((e) => e.guid === o);
+  return /* @__PURE__ */ p(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
     /* @__PURE__ */ t(T, { bold: !0, id: "spending-list-title", sx: { py: 12 }, variant: "h3", children: `${a} ${i.by_category}` }),
-    /* @__PURE__ */ t(F, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(J, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ c(l.Fragment, { children: [
+    /* @__PURE__ */ t(wt, { "aria-hidden": "true" }),
+    /* @__PURE__ */ t(q, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(l.Fragment, { children: [
       /* @__PURE__ */ t(
-        Q,
+        J,
         {
           disableGutters: !0,
           disablePadding: !0,
           sx: {
+            borderBottom: 1,
+            borderColor: "divider",
             minHeight: 44
           },
-          children: /* @__PURE__ */ c(
-            Z,
+          children: /* @__PURE__ */ p(
+            Q,
             {
-              "aria-expanded": g?.guid === e.guid,
+              "aria-expanded": c?.guid === e.guid,
               id: `spending-list-category-${e.guid}`,
               onClick: () => d(e.guid),
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
                 /* @__PURE__ */ t(
-                  L,
+                  w,
                   {
+                    "aria-hidden": "true",
                     borderRadius: 4,
                     flexShrink: 0,
                     height: 8,
+                    role: "presentation",
                     sx: { backgroundColor: e.color, mr: 8 },
                     width: 8
                   }
                 ),
-                /* @__PURE__ */ c(
+                /* @__PURE__ */ p(
                   C,
                   {
                     alignItems: "center",
@@ -224,47 +228,43 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
           )
         }
       ),
-      /* @__PURE__ */ t(F, {}),
-      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(Lt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ c(J, { children: [
-        g?.categoryTotals?.map((r) => /* @__PURE__ */ t(
-          Q,
-          {
-            sx: {
-              pl: 12,
-              py: 0
-            },
-            children: /* @__PURE__ */ t(
-              Z,
-              {
-                id: `spending-list-subcategory-${r.guid}`,
-                onClick: () => d(r.guid, !0),
-                sx: { minHeight: 44, px: 8, py: 0 },
-                children: /* @__PURE__ */ c(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-                  /* @__PURE__ */ c(T, { children: [
-                    r.name,
-                    " "
-                  ] }),
-                  /* @__PURE__ */ t(T, { children: R(r.amount, "0,0.00") })
-                ] })
-              }
-            )
+      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(vt, { in: c?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ t(q, { sx: { borderBottom: 1, borderColor: "divider" }, children: c?.categoryTotals?.map((r) => /* @__PURE__ */ t(
+        J,
+        {
+          sx: {
+            pl: 12,
+            py: 0
           },
-          r.guid
-        )),
-        /* @__PURE__ */ t(F, {})
-      ] }) })
+          children: /* @__PURE__ */ t(
+            Q,
+            {
+              id: `spending-list-subcategory-${r.guid}`,
+              onClick: () => d(r.guid, !0),
+              sx: { minHeight: 44, px: 8, py: 0 },
+              children: /* @__PURE__ */ p(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+                /* @__PURE__ */ p(T, { children: [
+                  r.name,
+                  " "
+                ] }),
+                /* @__PURE__ */ t(T, { children: R(r.amount, "0,0.00") })
+              ] })
+            }
+          )
+        },
+        r.guid
+      )) }) })
     ] }, e.guid)) }),
     /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${R(n.totalAmount, "0,0.00")}` })
   ] });
-}, Nt = v(Rt), $t = ({
+}, Nt = L(Rt), $t = ({
   data: n,
   onSelected: d,
   onViewTransactions: o,
   selectedId: a,
   title: i
 }) => {
-  const { isDesktop: g, isMobile: e } = vt(), { dateRangeTotalsLoading: r } = A(), { spending: p } = I();
-  return /* @__PURE__ */ c(
+  const { isDesktop: c, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = A(), { spending: g } = I();
+  return /* @__PURE__ */ p(
     C,
     {
       alignItems: e ? "center" : "flex-start",
@@ -285,7 +285,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
             onSelected: () => {
             },
             selectedId: "",
-            size: g ? 400 : 300,
+            size: c ? 400 : 300,
             totalLabel: "Loading ...",
             variant: "full"
           }
@@ -299,8 +299,8 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
             },
             onViewTransactions: o,
             selectedId: a,
-            size: g ? 400 : 300,
-            totalLabel: p.total_amount,
+            size: c ? 400 : 300,
+            totalLabel: g.total_amount,
             variant: "full"
           }
         ),
@@ -308,81 +308,81 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
       ]
     }
   );
-}, ot = v($t), Ot = (n) => [
+}, nt = L($t), Bt = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
   n.palette.chartMono.chartMono2,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
-], kt = () => {
-  const n = Mt(), { is_mobile_webview: d } = V(), { clientConfig: o } = V(), { categories: a, dateRangeCategoryTotals: i } = A(), {
-    goals: g,
+], Ot = () => {
+  const n = Tt(), { is_mobile_webview: d } = F(), { clientConfig: o } = F(), { categories: a, dateRangeCategoryTotals: i } = A(), {
+    goals: c,
     spending: e,
     transactions: r
-  } = I(), { displayedDateRange: p, selectedAccountGuids: y } = z(), {
+  } = I(), { displayedDateRange: g, selectedAccountGuids: b } = V(), {
     setFilter: u,
     sortedTransactions: m,
     sortedTransactionsWithSplits: M,
-    tags: b
-  } = dt(), f = o?.master?.deep_link_params?.account_guids, D = o?.master?.deep_link_params?.view, [x, E] = l.useState(""), [_, W] = l.useState(D === "income" ? 1 : 0), [H, P] = l.useState(""), [ut, k] = l.useState(!1), B = l.useMemo(
-    () => st(a, g, n, i),
+    tags: y
+  } = dt(), f = o?.master?.deep_link_params?.account_guids, D = o?.master?.deep_link_params?.view, [x, E] = l.useState(""), [_, W] = l.useState(D === "income" ? 1 : 0), [z, H] = l.useState(""), [pt, O] = l.useState(!1), k = l.useMemo(
+    () => rt(a, c, n, i),
     [a, i]
-  ), K = l.useMemo(
-    () => lt(a, i, Ot(n)),
+  ), P = l.useMemo(
+    () => st(a, i, Bt(n)),
     [a, i]
   ), G = l.useMemo(
-    () => m.find((s) => s.guid === H),
-    [H, m]
-  ), mt = (s, S) => {
+    () => m.find((s) => s.guid === z),
+    [z, m]
+  ), ut = (s, S) => {
     W(S), E("");
-  }, U = (s, S = !1) => {
-    S ? ht(s) : E(x === s || s === "0" ? "" : s);
-  }, ht = (s) => {
+  }, K = (s, S = !1) => {
+    S ? mt(s) : E(x === s || s === "0" ? "" : s);
+  }, mt = (s) => {
     u({
       ...{
-        accounts: f || y,
-        dateRange: p
+        accounts: f || b,
+        dateRange: g
       },
       custom: (h) => x === "other" ? h.top_level_category_guid === s : h.category_guid === s,
       showSplits: !0
-    }), k(!0);
-  }, X = (s) => {
+    }), O(!0);
+  }, U = (s) => {
     const S = {
-      accounts: f || y,
-      dateRange: p
+      accounts: f || b,
+      dateRange: g
     };
     if (_ === 0)
       if (s === "other") {
-        const h = B.categoryData.find((j) => j.guid === "other");
+        const h = k.categoryData.find((j) => j.guid === "other");
         u({
           ...S,
-          custom: (j) => !!h?.categoryTotals?.find((_t) => _t.guid === j.top_level_category_guid)
+          custom: (j) => !!h?.categoryTotals?.find((ft) => ft.guid === j.top_level_category_guid)
         });
       } else
         u({
           ...S,
-          custom: (h) => s ? h.top_level_category_guid === s : h.top_level_category_guid !== w.INCOME && h.category_guid !== w.INCOME && h.top_level_category_guid !== w.INVESTMENTS && h.top_level_category_guid !== w.TRANSFER,
+          custom: (h) => s ? h.top_level_category_guid === s : h.top_level_category_guid !== v.INCOME && h.category_guid !== v.INCOME && h.top_level_category_guid !== v.INVESTMENTS && h.top_level_category_guid !== v.TRANSFER,
           showSplits: !!s
         });
     else
       u({
         ...S,
-        custom: (h) => s ? h.category_guid === s : h.category_guid === w.INCOME || h.top_level_category_guid === w.INCOME
+        custom: (h) => s ? h.category_guid === s : h.category_guid === v.INCOME || h.top_level_category_guid === v.INCOME
       });
-    k(!0);
-  }, ft = () => {
-    Dt(M, b);
+    O(!0);
+  }, ht = () => {
+    Mt(M, y);
   };
-  return /* @__PURE__ */ c(L, { children: [
-    /* @__PURE__ */ c(rt, { onChange: mt, value: _, variant: "fullWidth", children: [
+  return /* @__PURE__ */ p(w, { children: [
+    /* @__PURE__ */ p(it, { onChange: ut, value: _, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
         N,
         {
           label: /* @__PURE__ */ t(
-            O,
+            B,
             {
-              amount: B.totalAmount,
+              amount: k.totalAmount,
               label: e.spend_tab_title
             }
           )
@@ -392,9 +392,9 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
         N,
         {
           label: /* @__PURE__ */ t(
-            O,
+            B,
             {
-              amount: K.totalAmount,
+              amount: P.totalAmount,
               label: e.income_tab_title
             }
           )
@@ -402,65 +402,65 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
       )
     ] }),
     _ === 0 && /* @__PURE__ */ t(
-      ot,
+      nt,
       {
-        data: B,
-        onSelected: U,
-        onViewTransactions: X,
+        data: k,
+        onSelected: K,
+        onViewTransactions: U,
         selectedId: x,
         title: e.spend_tab_title
       }
     ),
     _ === 1 && /* @__PURE__ */ t(
-      ot,
+      nt,
       {
-        data: K,
-        onSelected: U,
-        onViewTransactions: X,
+        data: P,
+        onSelected: K,
+        onViewTransactions: U,
         selectedId: x,
         title: e.income_tab_title
       }
     ),
     /* @__PURE__ */ t(
-      tt,
+      Z,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: ut,
-        onClose: () => k(!1),
+        isOpen: pt,
+        onClose: () => O(!1),
         title: e.transactions_drawer_title,
-        children: /* @__PURE__ */ c(C, { children: [
+        children: /* @__PURE__ */ p(C, { children: [
           !d && m.length > 0 && /* @__PURE__ */ t(C, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
-            Tt,
+            St,
             {
-              onClick: ft,
+              onClick: ht,
               startIcon: /* @__PURE__ */ t(bt, { name: "ios_share" }),
               variant: "text",
               children: r.export_csv_btn
             }
           ) }),
-          /* @__PURE__ */ t(xt, { onClick: P })
+          /* @__PURE__ */ t(Dt, { onClick: H })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      tt,
+      Z,
       {
         ariaLabelClose: e.close_drawer_aria,
         isOpen: !!G,
-        onClose: () => P(""),
+        onClose: () => H(""),
         title: e.transaction_details_drawer_title,
-        children: G && /* @__PURE__ */ t(wt, { transaction: G })
+        children: G && /* @__PURE__ */ t(xt, { transaction: G })
       }
     )
   ] });
-}, Bt = v(kt), Gt = ({ onBackClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = ct(), { categoriesLoaded: i, dateRangeTotalsLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { isTransactionDataLoaded: p, loadTransactionData: y } = dt(), { spending: u } = I(), { displayedDateRange: m, isInitialized: M, setDisplayedDate: b, selectedAccounts: f } = z(), { onEvent: D } = Ct(), { clientConfig: x } = V();
-  gt({
+}, kt = L(Ot), Gt = ({ onBackClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { categoriesLoaded: i, dateRangeTotalsLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { isTransactionDataLoaded: g, loadTransactionData: b } = dt(), { spending: u } = I(), { displayedDateRange: m, isInitialized: M, setDisplayedDate: y, selectedAccounts: f } = V(), { onEvent: D } = yt(), { clientConfig: x } = F();
+  ct({
     widgetName: "SpendingWidget",
-    isLoaded: g
+    isLoaded: c
   }), l.useEffect(() => {
-    const _ = x?.master?.deep_link_params, W = _?.date_range ? [et(_.date_range.from), et(_.date_range.to)] : [at(q()), it(q())];
-    b(W[0], W[1]), o || a().finally(), i || e().finally(), p || y().finally(), D(nt.SPENDING_VIEW);
+    const _ = x?.master?.deep_link_params, W = _?.date_range ? [tt(_.date_range.from), tt(_.date_range.to)] : [ot(Y()), at(Y())];
+    y(W[0], W[1]), o || a().finally(), i || e().finally(), g || b().finally(), D(et.SPENDING_VIEW);
   }, []), l.useEffect(() => {
     M && r(
       f,
@@ -469,20 +469,20 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ c(C,
     ).finally();
   }, [m, M, f]);
   const E = (_) => {
-    b(_[0], _[1]);
+    y(_[0], _[1]);
   };
   return M ? /* @__PURE__ */ t(
     It,
     {
       calendarActions: { onRangeChanged: E },
-      onAccountsFilterClick: () => D(nt.SPENDING_CLICK_FILTER),
+      onAccountsFilterClick: () => D(et.SPENDING_CLICK_FILTER),
       onBackClick: n,
       sx: d,
       title: u.title,
-      children: /* @__PURE__ */ t(L, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
+      children: /* @__PURE__ */ t(w, { width: "100%", children: /* @__PURE__ */ t(kt, {}) })
     }
-  ) : /* @__PURE__ */ t(pt, {});
-}, Se = v(Gt);
+  ) : /* @__PURE__ */ t(gt, {});
+}, Se = L(Gt);
 export {
   Ce as SpendingMiniWidget,
   Se as SpendingWidget

package/dist/trends/index.es.js

@@ -30,7 +30,7 @@ import $t from "@mui/material/ToggleButton";
 import zt from "@mui/material/ToggleButtonGroup";
 import { parseISO as lt } from "date-fns/parseISO";
 import { H as ke } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as G, b as Kt } from "../ViewMoreMicroCard-DirvUT9O.mjs";
+import { T as G, b as Kt } from "../ViewMoreMicroCard-BhG9hCoO.mjs";
 import { useGridApiContext as Yt, useGridRootProps as jt, DataGridPro as Ut } from "@mui/x-data-grid-pro";
 import Xt from "@mui/material/Badge";
 import Zt from "@mui/material/IconButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.12.9",
+  "version": "7.12.11",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",