@mx-cartographer/experiences 9.0.10 → 9.0.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.0.12] - 06-02-2026
+
+- **FIXED** - Debts widget briefly displaying zero percent interest rates before account data finished loading
+
+## [9.0.11] - 06-01-2026
+
+- **ADDED** - Spending chart accessibility description for screen readers
+
 ## [9.0.10] - 05-27-2026
 
 - **UPDATED** - Adds Tab indexes to the BubbleWeek component to make it accessable to screen readers.

package/dist/SpendingLegend-CxvNOg3c.mjs

@@ -0,0 +1,203 @@
+import { g as D } from "./TransactionUtils-BphBJBbU.mjs";
+import { C as p } from "./Category-DEKZGLYe.mjs";
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import S from "react";
+import { observer as N } from "mobx-react-lite";
+import T from "@mui/material/Box";
+import k from "@mui/material/Button";
+import h from "@mui/material/Stack";
+import { useTheme as A } from "@mui/material/styles";
+import { CategoryIcon as M, CategoryIconVariants as G, Text as y, P as O } from "@mxenabled/mxui";
+import { f as b } from "./NumberFormatting--XMeeBfr.mjs";
+import { D as $ } from "./Donut-SzzfZDHF.mjs";
+import { u as j } from "./useAriaLive-MkYebyUR.mjs";
+import { u as v } from "./hooks-97sNJ_lf.mjs";
+import { u as R } from "./useScreenSize-mWpmnh5w.mjs";
+const _ = 5, V = (i, g, s, c) => c.reduce((o, n) => {
+  const a = i.find((u) => u.guid === n.category_guid);
+  if (!a) return o;
+  const t = a.parent_guid ?? a.guid, r = i.find((u) => u.guid === t);
+  if (!r || n.total <= 0) return o;
+  const m = {
+    guid: a.guid,
+    name: a.guid === t ? `${g.parent_category_totals_label_general} ${a.name}` : a.name,
+    color: D(r.guid, s),
+    amount: n.total
+  }, e = o.find((u) => u.guid === t);
+  return e ? (e.amount += n.total, e.categoryTotals?.push(m)) : o.push({
+    guid: t,
+    name: r.name,
+    color: D(r.guid, s),
+    categoryTotals: [m],
+    amount: n.total
+  }), o;
+}, []), ot = (i, g, s, c) => {
+  const n = V(i, g, s, c).filter(
+    (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
+  ).sort((e, u) => u.amount - e.amount), a = n.reduce(
+    (e, u) => e + u.amount,
+    0
+  ), t = n.length > _ ? _ : n.length, r = n.slice(0, t), m = r.map((e) => ({
+    id: e.guid,
+    color: D(e.guid, s),
+    label: e.name,
+    value: e.amount / a * 100
+  }));
+  if (n.length > 5) {
+    const e = n.slice(_), u = e.reduce(
+      (C, l) => C + l.amount,
+      0
+    );
+    r.push({
+      guid: "other",
+      color: s.palette.categories.others || "",
+      name: g.saving_goal_other,
+      categoryTotals: e,
+      amount: u
+    }), m.push({
+      id: "other",
+      color: s.palette.categories.others || "",
+      label: g.saving_goal_other,
+      value: u / a * 100
+    });
+  }
+  return {
+    categoryData: r,
+    donutData: m,
+    totalAmount: a
+  };
+}, nt = (i, g, s) => {
+  const c = i.filter(
+    (t) => t.guid === p.INCOME || t.parent_guid === p.INCOME
+  ), o = g.filter((t) => c.some((r) => r.guid === t.category_guid)).sort((t, r) => t.total - r.total).map((t, r) => ({
+    guid: t.category_guid,
+    name: i.find((m) => m.guid === t.category_guid)?.name,
+    color: s[r % s.length],
+    categoryTotals: [],
+    amount: Math.abs(t.total)
+  })), n = o.reduce(
+    (t, r) => t + r.amount,
+    0
+  ), a = o.map((t) => ({
+    id: t.guid,
+    color: t.color,
+    label: t.name,
+    value: t.amount / n * 100
+  }));
+  return {
+    categoryData: o,
+    donutData: a,
+    totalAmount: n
+  };
+}, B = ({
+  data: i,
+  isIncome: g = !1,
+  onSelected: s,
+  onViewTransactions: c,
+  selectedId: o,
+  size: n = 150,
+  totalLabel: a,
+  variant: t = "mini"
+}) => {
+  const { spending: r } = v(), m = A(), { isTablet: e } = R(), { announce: u, ariaLive: C } = j(), l = S.useMemo(
+    () => o ? i.categoryData.find((x) => x.guid === o) : void 0,
+    [o]
+  );
+  S.useEffect(() => {
+    if (l) {
+      const x = b(l.amount, t === "mini" ? "0,0" : "0,0.00");
+      u(`${l.name}: ${x}`);
+    }
+  }, [l, u, t]);
+  const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: m.palette.divider, value: 100 }], w = () => {
+    c?.(o);
+  }, I = e ? 32 : 48;
+  return /* @__PURE__ */ f(
+    T,
+    {
+      "aria-label": r.chart_description,
+      height: n,
+      position: "relative",
+      role: "group",
+      width: n,
+      children: [
+        C,
+        /* @__PURE__ */ d($, { data: E, onClick: s, selectedId: o, 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: [
+          l && /* @__PURE__ */ f(
+            h,
+            {
+              alignItems: "center",
+              gap: t === "mini" ? 0 : 8,
+              mb: t === "mini" ? 0 : 8,
+              mt: t === "mini" ? 0 : -16,
+              sx: t === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
+              children: [
+                /* @__PURE__ */ d(T, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
+                  M,
+                  {
+                    categoryGuid: g ? p.INCOME : l.guid,
+                    size: t === "mini" ? 24 : I,
+                    variant: G.Transparent
+                  }
+                ) }),
+                /* @__PURE__ */ d(
+                  y,
+                  {
+                    color: "text.secondary",
+                    noWrap: !0,
+                    variant: t === "mini" ? "tiny" : "body1",
+                    children: l ? l.name : a
+                  }
+                )
+              ]
+            }
+          ),
+          !l && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: a }),
+          /* @__PURE__ */ d(O, { variant: t === "mini" ? "h2" : "h1", children: l ? b(l.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
+          !l && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: a }),
+          t === "full" && /* @__PURE__ */ d(
+            k,
+            {
+              "aria-label": `View ${l?.name || ""} Transactions`,
+              disabled: i.categoryData.length === 0,
+              onClick: w,
+              sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
+              variant: "text",
+              children: r.view_transactions
+            }
+          )
+        ] }) }) })
+      ]
+    }
+  );
+}, et = N(B), rt = ({ data: i, onSelected: g, selectedId: s }) => {
+  const c = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), g(n));
+  };
+  return /* @__PURE__ */ d(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((o) => /* @__PURE__ */ f(
+    h,
+    {
+      alignItems: "center",
+      "aria-label": o.name,
+      "aria-pressed": o.guid === s,
+      direction: "row",
+      gap: 8,
+      onClick: () => g(o.guid),
+      onKeyDown: (n) => c(n, o.guid),
+      role: "button",
+      sx: { cursor: "pointer", touchAction: "manipulation" },
+      tabIndex: 0,
+      children: [
+        /* @__PURE__ */ d(T, { borderRadius: 4, height: 8, sx: { backgroundColor: o.color }, width: 8 }),
+        /* @__PURE__ */ d(y, { bold: o.guid === s, variant: "caption", children: o.name })
+      ]
+    },
+    o.guid
+  )) });
+};
+export {
+  et as S,
+  nt as a,
+  rt as b,
+  ot as g
+};

package/dist/core/types/localization/SpendingCopy.d.ts

@@ -1,5 +1,6 @@
 export interface SpendingCopy {
     by_category: string;
+    chart_description: string;
     close_drawer_aria: string;
     income_tab_title: string;
     mini_title: string;

package/dist/debts/index.es.js

@@ -5,7 +5,7 @@ import y from "@mui/material/Stack";
 import { useTheme as j, Card as ge, Stack as u, Box as W } from "@mui/material";
 import { Text as i, P as xe, H3 as Be, InstitutionLogo as Pe, Icon as ne } from "@mxenabled/mxui";
 import { intervalToDuration as Re, formatDuration as Le } from "date-fns";
-import { s as Fe, D as F, t as $e, b as Oe } from "../DebtUtils-i4pI2Uoe.mjs";
+import { s as Fe, D as $, t as $e, b as Oe } from "../DebtUtils-i4pI2Uoe.mjs";
 import { f as I, a as We } from "../NumberFormatting--XMeeBfr.mjs";
 import { f as J, D as Q } from "../DateFormats-HudZ3Bjs.mjs";
 import { G as Ge, q as ee, u as w, k as V, f as k, c as te, i as He, a as ze } from "../hooks-97sNJ_lf.mjs";
@@ -56,7 +56,7 @@ function ht(r, n, o = 0) {
     let m = !1;
     for (const [v, x] of t.entries()) {
       if (x.balance <= 0.01 || x.is_impossible) continue;
-      const L = (x.interest_rate ?? 0) / 100 / 12, N = x.balance * L;
+      const F = (x.interest_rate ?? 0) / 100 / 12, N = x.balance * F;
       let A = x.monthly_payment ?? 0;
       v === 0 && o && (A += o), x.balance += N;
       const E = Math.min(x.balance, A + s);
@@ -525,10 +525,10 @@ const De = ({
   }), x = v.reduce(
     (p, g) => p + (g.dataset[0]?.y ?? 0),
     0
-  ), $ = m.map((p, g) => {
+  ), L = m.map((p, g) => {
     const D = g / (m.length - 1), M = x * (1 - D);
     return { x: p, y: M };
-  }), L = Math.ceil(x / 100) * 100, N = m, A = v.map((p, g) => {
+  }), F = Math.ceil(x / 100) * 100, N = m, A = v.map((p, g) => {
     const D = 1 - g / v.length * 0.5, M = gt(ft, D);
     return {
       id: `debt-${g}`,
@@ -546,7 +546,7 @@ const De = ({
   A.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: $.map((p) => p.y),
+    data: L.map((p) => p.y),
     color: c.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -632,7 +632,7 @@ const De = ({
           yAxis: [
             {
               min: 0,
-              max: L,
+              max: F,
               disableTicks: !0,
               valueFormatter: (p) => I(p, "0a")
             }
@@ -1148,7 +1148,7 @@ const Wt = (r) => {
       minWidth: 122,
       flex: 0.6
     }
-  ], $ = [
+  ], L = [
     ...x.slice(0, 3),
     {
       field: "chevron",
@@ -1162,7 +1162,7 @@ const Wt = (r) => {
       headerAlign: "right",
       width: 20
     }
-  ], L = f.useMemo(() => n.map((_, p) => ({
+  ], F = f.useMemo(() => n.map((_, p) => ({
     ..._,
     id: p,
     priority: Ot(_)
@@ -1173,7 +1173,7 @@ const Wt = (r) => {
     c || N(_);
   }, E = (_) => {
     c && N(_);
-  }, Y = (_) => L.find((p) => p.guid === _)?.id;
+  }, Y = (_) => F.find((p) => p.guid === _)?.id;
   return /* @__PURE__ */ e(
     le,
     {
@@ -1189,7 +1189,7 @@ const Wt = (r) => {
       children: /* @__PURE__ */ e(
         ot,
         {
-          columns: c ? $ : x,
+          columns: c ? L : x,
           disableColumnFilter: !0,
           disableColumnMenu: !0,
           hideFooter: !0,
@@ -1200,7 +1200,7 @@ const Wt = (r) => {
           onSortModelChange: (_) => {
             v(_), d(S.DEBTS_CLICK_TABLE_SORT);
           },
-          rows: L,
+          rows: F,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
@@ -1259,19 +1259,19 @@ const Wt = (r) => {
 }, Vt = C(({ buttonEl: r, onClose: n }) => {
   const { onEvent: o } = k(), { debts: t } = w(), { selectedDebtPriority: a, setSelectedDebtPriority: s } = P(), d = !!r, c = [
     {
-      priority: F.FASTEST_PAYOFF_FIRST,
+      priority: $.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
     },
     {
-      priority: F.HIGHEST_INTEREST,
+      priority: $.HIGHEST_INTEREST,
       text: t.priority_sort_highest_interest
     },
     {
-      priority: F.LOWEST_BALANCE,
+      priority: $.LOWEST_BALANCE,
       text: t.priority_sort_lowest_balance
     },
     {
-      priority: F.HIGHEST_BALANCE,
+      priority: $.HIGHEST_BALANCE,
       text: t.priority_sort_highest_balance
     }
   ], b = (h) => {
@@ -1325,10 +1325,10 @@ const Wt = (r) => {
   }, b = () => {
     d(null);
   }, h = !!s, m = f.useMemo(() => ({
-    [F.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
-    [F.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
-    [F.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
-    [F.LOWEST_BALANCE]: t.priority_sort_lowest_balance
+    [$.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
+    [$.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
+    [$.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
+    [$.LOWEST_BALANCE]: t.priority_sort_lowest_balance
   })[a] ?? t.priority_sort_lowest_balance, [a]);
   return /* @__PURE__ */ l(u, { children: [
     /* @__PURE__ */ e(
@@ -1362,21 +1362,21 @@ const Wt = (r) => {
   const { isDesktop: t, isMobile: a } = ae(), { connect: s, debts: d } = w(), { onEvent: c } = k(), {
     config: { show_connections_widget_in_master: b }
   } = He(), { isInitialized: h } = ze(), { setSelectedAccount: m } = Ve(), { selectedDebtPriority: v, setSelectedDebtChartData: x } = P(), {
-    isAccountDataLoaded: $,
-    loadAccountData: L,
+    isAccountDataLoaded: L,
+    loadAccountData: F,
     detailedAccounts: N,
     visibleDebtAccounts: A
   } = te(), { isAllGoalDataLoaded: E, loadGoalData: Y, monthlyCashFlowProfile: _ } = V(), { debts: p } = ee(), [g, D] = f.useState(!1), [M, B] = f.useState(!1), [K, ce] = f.useState(!1), [U, Se] = f.useState(""), [Ae, de] = f.useState(!1);
   st({
     widgetName: "DebtsWidget",
-    isLoaded: E
+    isLoaded: L && E
   });
   const q = f.useMemo(() => {
     const O = _?.extra_payment ?? 0;
     return $e(p, v, O);
   }, [p, v, _]);
   f.useEffect(() => {
-    $ || L().finally(), c(S.DEBTS_VIEW);
+    L || F().finally(), c(S.DEBTS_VIEW);
   }, []), f.useEffect(() => {
     h && Y().finally();
   }, [h]);
@@ -1388,7 +1388,7 @@ const Wt = (r) => {
   }, Ie = () => {
     B(!0), c(S.DEBTS_CLICK_PAYDOWN);
   };
-  if (!h || !E)
+  if (!h || !L || !E)
     return /* @__PURE__ */ e(ct, {});
   const Me = N.length === 0, ke = A.length === 0, Ne = p.length === 0, X = Me || ke || Ne, Z = Oe(
     d,

package/dist/finstrong/index.es.js

@@ -58,7 +58,7 @@ import { ChartsXAxis as Qn } from "@mui/x-charts/ChartsXAxis";
 import { ChartsYAxis as Zn } from "@mui/x-charts/ChartsYAxis";
 import { startOfMonth as It } from "date-fns/startOfMonth";
 import { endOfMonth as At } from "date-fns/endOfMonth";
-import { g as Jn, S as eo, b as to } from "../SpendingLegend-Bn3DzGyK.mjs";
+import { g as Jn, S as eo, b as to } from "../SpendingLegend-CxvNOg3c.mjs";
 import { formatISO as no } from "date-fns/formatISO";
 import { fromUnixTime as oo } from "date-fns/fromUnixTime";
 import { subDays as ro } from "date-fns/subDays";

package/dist/spending/index.es.js

@@ -8,7 +8,7 @@ import y from "@mui/material/Stack";
 import $ from "@mui/material/Tab";
 import rt from "@mui/material/Tabs";
 import { useTheme as _t } from "@mui/material/styles";
-import { g as st, a as lt, S as B, b as q } from "../SpendingLegend-Bn3DzGyK.mjs";
+import { g as st, a as lt, S as B, b as q } from "../SpendingLegend-CxvNOg3c.mjs";
 import { Text as T, Icon as bt } from "@mxenabled/mxui";
 import { f as k } from "../NumberFormatting--XMeeBfr.mjs";
 import { u as A, l as R, c as ct, a as P, i as H, g as dt, f as yt } from "../hooks-97sNJ_lf.mjs";

package/package.json

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

package/dist/SpendingLegend-Bn3DzGyK.mjs

@@ -1,193 +0,0 @@
-import { g as _ } from "./TransactionUtils-BphBJBbU.mjs";
-import { C as p } from "./Category-DEKZGLYe.mjs";
-import { jsxs as f, Fragment as N, jsx as d } from "react/jsx-runtime";
-import T from "react";
-import { observer as k } from "mobx-react-lite";
-import S from "@mui/material/Box";
-import A from "@mui/material/Button";
-import h from "@mui/material/Stack";
-import { useTheme as M } from "@mui/material/styles";
-import { CategoryIcon as G, CategoryIconVariants as O, Text as y, P as $ } from "@mxenabled/mxui";
-import { f as b } from "./NumberFormatting--XMeeBfr.mjs";
-import { D as j } from "./Donut-SzzfZDHF.mjs";
-import { u as R } from "./useAriaLive-MkYebyUR.mjs";
-import { u as v } from "./hooks-97sNJ_lf.mjs";
-import { u as V } from "./useScreenSize-mWpmnh5w.mjs";
-const D = 5, B = (i, l, s, m) => m.reduce((o, n) => {
-  const r = i.find((u) => u.guid === n.category_guid);
-  if (!r) return o;
-  const t = r.parent_guid ?? r.guid, a = i.find((u) => u.guid === t);
-  if (!a || n.total <= 0) return o;
-  const c = {
-    guid: r.guid,
-    name: r.guid === t ? `${l.parent_category_totals_label_general} ${r.name}` : r.name,
-    color: _(a.guid, s),
-    amount: n.total
-  }, e = o.find((u) => u.guid === t);
-  return e ? (e.amount += n.total, e.categoryTotals?.push(c)) : o.push({
-    guid: t,
-    name: a.name,
-    color: _(a.guid, s),
-    categoryTotals: [c],
-    amount: n.total
-  }), o;
-}, []), nt = (i, l, s, m) => {
-  const n = B(i, l, s, m).filter(
-    (e) => e.guid !== p.INCOME && e.guid !== p.INVESTMENTS && e.guid !== p.TRANSFER && e.amount > 0
-  ).sort((e, u) => u.amount - e.amount), r = n.reduce(
-    (e, u) => e + u.amount,
-    0
-  ), t = n.length > D ? D : n.length, a = n.slice(0, t), c = a.map((e) => ({
-    id: e.guid,
-    color: _(e.guid, s),
-    label: e.name,
-    value: e.amount / r * 100
-  }));
-  if (n.length > 5) {
-    const e = n.slice(D), u = e.reduce(
-      (C, g) => C + g.amount,
-      0
-    );
-    a.push({
-      guid: "other",
-      color: s.palette.categories.others || "",
-      name: l.saving_goal_other,
-      categoryTotals: e,
-      amount: u
-    }), c.push({
-      id: "other",
-      color: s.palette.categories.others || "",
-      label: l.saving_goal_other,
-      value: u / r * 100
-    });
-  }
-  return {
-    categoryData: a,
-    donutData: c,
-    totalAmount: r
-  };
-}, et = (i, l, s) => {
-  const m = i.filter(
-    (t) => t.guid === p.INCOME || t.parent_guid === p.INCOME
-  ), o = l.filter((t) => m.some((a) => a.guid === t.category_guid)).sort((t, a) => t.total - a.total).map((t, a) => ({
-    guid: t.category_guid,
-    name: i.find((c) => c.guid === t.category_guid)?.name,
-    color: s[a % s.length],
-    categoryTotals: [],
-    amount: Math.abs(t.total)
-  })), n = o.reduce(
-    (t, a) => t + a.amount,
-    0
-  ), r = o.map((t) => ({
-    id: t.guid,
-    color: t.color,
-    label: t.name,
-    value: t.amount / n * 100
-  }));
-  return {
-    categoryData: o,
-    donutData: r,
-    totalAmount: n
-  };
-}, P = ({
-  data: i,
-  isIncome: l = !1,
-  onSelected: s,
-  onViewTransactions: m,
-  selectedId: o,
-  size: n = 150,
-  totalLabel: r,
-  variant: t = "mini"
-}) => {
-  const { spending: a } = v(), c = M(), { isTablet: e } = V(), { announce: u, ariaLive: C } = R(), g = T.useMemo(
-    () => o ? i.categoryData.find((x) => x.guid === o) : void 0,
-    [o]
-  );
-  T.useEffect(() => {
-    if (g) {
-      const x = b(g.amount, t === "mini" ? "0,0" : "0,0.00");
-      u(`${g.name}: ${x}`);
-    }
-  }, [g, u, t]);
-  const E = i.donutData.length > 0 ? i.donutData : [{ id: "0", color: c.palette.divider, value: 100 }], I = () => {
-    m?.(o);
-  }, w = e ? 32 : 48;
-  return /* @__PURE__ */ f(N, { children: [
-    C,
-    /* @__PURE__ */ d(j, { data: E, onClick: s, selectedId: o, 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: [
-      g && /* @__PURE__ */ f(
-        h,
-        {
-          alignItems: "center",
-          gap: t === "mini" ? 0 : 8,
-          mb: t === "mini" ? 0 : 8,
-          mt: t === "mini" ? 0 : -16,
-          sx: t === "mini" ? { gap: 0, mb: 0 } : { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } },
-          children: [
-            /* @__PURE__ */ d(S, { "aria-hidden": "true", role: "presentation", children: /* @__PURE__ */ d(
-              G,
-              {
-                categoryGuid: l ? p.INCOME : g.guid,
-                size: t === "mini" ? 24 : w,
-                variant: O.Transparent
-              }
-            ) }),
-            /* @__PURE__ */ d(
-              y,
-              {
-                color: "text.secondary",
-                noWrap: !0,
-                variant: t === "mini" ? "tiny" : "body1",
-                children: g ? g.name : r
-              }
-            )
-          ]
-        }
-      ),
-      !g && t === "full" && /* @__PURE__ */ d(y, { bold: !0, color: "text.secondary", sx: { mb: { xs: 4, xl: 8 } }, children: r }),
-      /* @__PURE__ */ d($, { variant: t === "mini" ? "h2" : "h1", children: g ? b(g.amount, t === "mini" ? "0,0" : "0,0.00") : b(i.totalAmount, t === "mini" ? "0,0" : "0,0.00") }),
-      !g && t === "mini" && /* @__PURE__ */ d(y, { color: "text.secondary", noWrap: !0, variant: "tiny", children: r }),
-      t === "full" && /* @__PURE__ */ d(
-        A,
-        {
-          "aria-label": `View ${g?.name || ""} Transactions`,
-          disabled: i.categoryData.length === 0,
-          onClick: I,
-          sx: { mt: { xl: 4, xs: 0 }, zIndex: 1 },
-          variant: "text",
-          children: a.view_transactions
-        }
-      )
-    ] }) }) })
-  ] });
-}, at = k(P), rt = ({ data: i, onSelected: l, selectedId: s }) => {
-  const m = (o, n) => {
-    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), l(n));
-  };
-  return /* @__PURE__ */ d(h, { gap: 8, height: "100%", justifyContent: "center", my: "auto", children: i.categoryData.map((o) => /* @__PURE__ */ f(
-    h,
-    {
-      alignItems: "center",
-      "aria-label": o.name,
-      "aria-pressed": o.guid === s,
-      direction: "row",
-      gap: 8,
-      onClick: () => l(o.guid),
-      onKeyDown: (n) => m(n, o.guid),
-      role: "button",
-      sx: { cursor: "pointer", touchAction: "manipulation" },
-      tabIndex: 0,
-      children: [
-        /* @__PURE__ */ d(S, { borderRadius: 4, height: 8, sx: { backgroundColor: o.color }, width: 8 }),
-        /* @__PURE__ */ d(y, { bold: o.guid === s, variant: "caption", children: o.name })
-      ]
-    },
-    o.guid
-  )) });
-};
-export {
-  at as S,
-  et as a,
-  rt as b,
-  nt as g
-};