@mx-cartographer/experiences 9.0.11 → 9.0.13-alpha.al0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.0.13] - 06-02-2026
+
+- **ADDED** - Back button on Notification Settings views when show_back_button is enabled
+
+## [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

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/settings/index.es.js

@@ -1,7 +1,7 @@
 import { jsxs as c, Fragment as X, jsx as e } from "react/jsx-runtime";
 import m from "react";
 import { observer as C } from "mobx-react-lite";
-import h from "@mui/material/Stack";
+import p from "@mui/material/Stack";
 import ue from "@mui/material/Tab";
 import pe from "@mui/material/Tabs";
 import he from "@mui/material/Alert";
@@ -10,24 +10,24 @@ import { getUnixTime as _e } from "date-fns/getUnixTime";
 import { AdapterDateFns as ge } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { DatePicker as be } from "@mui/x-date-pickers";
 import { LocalizationProvider as ye } from "@mui/x-date-pickers/LocalizationProvider";
-import { useTheme as L, alpha as V } from "@mui/material/styles";
-import W from "@mui/material/Box";
+import { useTheme as L, alpha as W } from "@mui/material/styles";
+import z from "@mui/material/Box";
 import Z from "@mui/material/Button";
 import I from "@mui/material/TextField";
 import { H3 as Y, P as M, Text as x, Icon as B } from "@mxenabled/mxui";
 import { V as xe, a as ve, N as J } from "../NotificationSettings-CW7okUrk.mjs";
-import { A as $t, B as Jt, I as Kt } from "../NotificationSettings-CW7okUrk.mjs";
-import { u as w, i as G, A as E, C as Ce, a as ee, l as j } from "../hooks-97sNJ_lf.mjs";
-import { u as O } from "../useScreenSize-mWpmnh5w.mjs";
+import { A as Jt, B as Kt, I as Yt } from "../NotificationSettings-CW7okUrk.mjs";
+import { u as k, i as G, A as E, C as Ce, a as ee, l as j } from "../hooks-97sNJ_lf.mjs";
+import { u as F } from "../useScreenSize-mWpmnh5w.mjs";
 import { D as $ } from "../Dialog-Bvd2n8hz.mjs";
 import { formatDistanceToNow as te } from "date-fns/formatDistanceToNow";
 import { fromUnixTime as oe } from "date-fns/fromUnixTime";
-import z from "@mui/material/IconButton";
+import O from "@mui/material/IconButton";
 import { DataGridPro as De } from "@mui/x-data-grid-pro";
 import { b as H } from "../Localization-DnoVyBNK.mjs";
-import { H as U } from "../HeaderCell-P8w6CmfO.mjs";
-import we from "@mui/material/Accordion";
-import ke from "@mui/material/AccordionDetails";
+import { H as V } from "../HeaderCell-P8w6CmfO.mjs";
+import ke from "@mui/material/Accordion";
+import we from "@mui/material/AccordionDetails";
 import Se from "@mui/material/AccordionSummary";
 import { L as ie } from "../Loader-CxeBwuPG.mjs";
 import Te from "@mui/material/List";
@@ -38,13 +38,13 @@ import Pe from "@mui/material/ListItem";
 import Re from "@mui/material/ListItemButton";
 import Ne from "@mui/material/ListItemIcon";
 import Me from "@mui/material/ListItemText";
-import { ChevronRight as Le } from "@mxenabled/mx-icons";
-import { D as Be } from "../Drawer-DsnW2o0v.mjs";
+import { ChevronRight as Le, ChevronLeft as Be } from "@mxenabled/mx-icons";
+import { D as He } from "../Drawer-DsnW2o0v.mjs";
 import { u as ne } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
-import { H as He } from "../Help-BMCejaQr.mjs";
+import { H as Oe } from "../Help-BMCejaQr.mjs";
 import { W as q } from "../WidgetContainer-DJnp6t6c.mjs";
-const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
-  const i = L(), { common: o, settings: n } = w(), { isDesktop: u, isMobile: s, isSmallMobile: a, isTablet: l } = O(t), { config: b } = G(), { updateUser: _ } = E(), { user: d } = Ce(), [p, k] = m.useState({
+const Fe = ({ availableWidth: t, handleOnLeavClick: r }) => {
+  const i = L(), { common: o, settings: n } = k(), { isDesktop: u, isMobile: s, isSmallMobile: a, isTablet: l } = F(t), { config: b } = G(), { updateUser: _ } = E(), { user: d } = Ce(), [h, w] = m.useState({
     first_name: d.first_name,
     last_name: d.last_name,
     email: d.email,
@@ -52,7 +52,7 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
     birthday: d.birthday,
     postal_code: d.postal_code,
     credit_score: d.credit_score
-  }), [v, S] = m.useState(!1), [A, T] = m.useState(!1), g = m.useRef(null), D = p.email && !d.email_is_verified && !v, F = p.phone && !d.phone_is_verified && !v;
+  }), [v, S] = m.useState(!1), [A, T] = m.useState(!1), g = m.useRef(null), D = h.email && !d.email_is_verified && !v, U = h.phone && !d.phone_is_verified && !v;
   m.useEffect(() => {
     if (r) {
       const f = (R) => {
@@ -64,26 +64,26 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
     }
   }, [v]);
   const ae = () => {
-    if (p.birthday) {
-      const f = new Date(p.birthday * 1e3), R = f.getUTCFullYear(), de = f.getUTCMonth(), me = f.getUTCDate();
+    if (h.birthday) {
+      const f = new Date(h.birthday * 1e3), R = f.getUTCFullYear(), de = f.getUTCMonth(), me = f.getUTCDate();
       return new Date(R, de, me);
     }
   }, se = async () => {
-    await _({ ...d, ...p }), S(!1);
+    await _({ ...d, ...h }), S(!1);
   }, le = () => {
     T(!1), r && r();
   }, ce = () => {
     T(!1);
   }, P = (f) => {
     const R = {
-      ...p,
+      ...h,
       ...f
     };
-    k(R), S(JSON.stringify({ ...d, ...R }) !== JSON.stringify(d));
+    w(R), S(JSON.stringify({ ...d, ...R }) !== JSON.stringify(d));
   };
   return /* @__PURE__ */ c(X, { children: [
     /* @__PURE__ */ c(
-      W,
+      z,
       {
         component: "form",
         ref: g,
@@ -99,7 +99,7 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
           /* @__PURE__ */ e(Y, { children: n.personal_details }),
           /* @__PURE__ */ e(M, { variant: "body1", children: n.update_information }),
           /* @__PURE__ */ c(
-            h,
+            p,
             {
               direction: s ? "column" : "row",
               spacing: s ? 44 : 24,
@@ -108,7 +108,7 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
                 /* @__PURE__ */ e(
                   I,
                   {
-                    defaultValue: p.first_name,
+                    defaultValue: h.first_name,
                     label: n.first_name,
                     onChange: (f) => P({ first_name: f.target.value })
                   }
@@ -116,7 +116,7 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
                 /* @__PURE__ */ e(
                   I,
                   {
-                    defaultValue: p.last_name,
+                    defaultValue: h.last_name,
                     label: n.last_name,
                     onChange: (f) => P({ last_name: f.target.value })
                   }
@@ -124,32 +124,32 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
               ]
             }
           ),
-          /* @__PURE__ */ c(h, { direction: s ? "column" : "row", children: [
-            b.display_email_edit_field_in_settings && /* @__PURE__ */ c(h, { sx: { mb: D ? 20 : 44, mr: s ? 0 : 24 }, children: [
+          /* @__PURE__ */ c(p, { direction: s ? "column" : "row", children: [
+            b.display_email_edit_field_in_settings && /* @__PURE__ */ c(p, { sx: { mb: D ? 20 : 44, mr: s ? 0 : 24 }, children: [
               /* @__PURE__ */ e(
                 I,
                 {
-                  defaultValue: p.email,
+                  defaultValue: h.email,
                   label: n.email_address,
                   onChange: (f) => P({ email: f.target.value })
                 }
               ),
               D && /* @__PURE__ */ e(xe, {})
             ] }),
-            b.display_sms_edit_field_in_settings && /* @__PURE__ */ c(h, { sx: { mb: F ? 20 : 44 }, children: [
+            b.display_sms_edit_field_in_settings && /* @__PURE__ */ c(p, { sx: { mb: U ? 20 : 44 }, children: [
               /* @__PURE__ */ e(
                 I,
                 {
-                  defaultValue: p.phone,
+                  defaultValue: h.phone,
                   label: n.mobile_number,
                   onChange: (f) => P({ phone: f.target.value }),
                   type: "tel"
                 }
               ),
-              F && /* @__PURE__ */ e(ve, {})
+              U && /* @__PURE__ */ e(ve, {})
             ] })
           ] }),
-          /* @__PURE__ */ c(h, { direction: s ? "column" : "row", spacing: s ? 44 : 24, sx: { mb: 44 }, children: [
+          /* @__PURE__ */ c(p, { direction: s ? "column" : "row", spacing: s ? 44 : 24, sx: { mb: 44 }, children: [
             /* @__PURE__ */ e(ye, { dateAdapter: ge, children: /* @__PURE__ */ e(
               be,
               {
@@ -159,13 +159,13 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
                   nextIconButton: {
                     sx: {
                       color: "primary.main",
-                      "&:hover": { backgroundColor: V(i.palette.primary.light, 0.1) }
+                      "&:hover": { backgroundColor: W(i.palette.primary.light, 0.1) }
                     }
                   },
                   previousIconButton: {
                     sx: {
                       color: "primary.main",
-                      "&:hover": { backgroundColor: V(i.palette.primary.light, 0.1) }
+                      "&:hover": { backgroundColor: W(i.palette.primary.light, 0.1) }
                     }
                   }
                 },
@@ -173,7 +173,7 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
                   width: "100%",
                   "& .MuiIconButton-edgeEnd": {
                     color: "primary.main",
-                    "&:hover": { backgroundColor: V(i.palette.primary.light, 0.1) }
+                    "&:hover": { backgroundColor: W(i.palette.primary.light, 0.1) }
                   }
                 },
                 value: ae()
@@ -182,17 +182,17 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
             /* @__PURE__ */ e(
               I,
               {
-                defaultValue: p.postal_code,
+                defaultValue: h.postal_code,
                 label: n.zip_code,
                 onChange: (f) => P({ postal_code: f.target.value })
               }
             )
           ] }),
-          /* @__PURE__ */ c(h, { children: [
+          /* @__PURE__ */ c(p, { children: [
             /* @__PURE__ */ e(
               I,
               {
-                defaultValue: p.credit_score,
+                defaultValue: h.credit_score,
                 label: n.credit_score,
                 onChange: (f) => P({ credit_score: Number(f.target.value) }),
                 sx: { mb: 44 }
@@ -225,22 +225,22 @@ const Oe = ({ availableWidth: t, handleOnLeavClick: r }) => {
       }
     )
   ] });
-}, Fe = C(Oe);
+}, Ue = C(Fe);
 var y = /* @__PURE__ */ ((t) => (t.Delete = "delete", t.Edit = "edit", t.Token = "token", t))(y || {});
-const Ue = ({
+const Ve = ({
   devices: t,
   onClickDeviceEdit: r,
   onClickDeviceDelete: i
 }) => {
-  const o = L(), { settings: n } = w(), u = [
+  const o = L(), { settings: n } = k(), u = [
     {
       field: "name",
       headerName: n.mobile_devices_column_name,
-      renderHeader: U,
-      renderCell: (a) => /* @__PURE__ */ c(h, { alignItems: "center", direction: "row", gap: 4, children: [
+      renderHeader: V,
+      renderCell: (a) => /* @__PURE__ */ c(p, { alignItems: "center", direction: "row", gap: 4, children: [
         /* @__PURE__ */ e(x, { variant: "body2", children: a.value }),
         /* @__PURE__ */ e(
-          z,
+          O,
           {
             "aria-label": n.mobile_devices_edit_label,
             color: "secondary",
@@ -256,7 +256,7 @@ const Ue = ({
     {
       field: "device_type",
       headerName: n.mobile_devices_column_type,
-      renderHeader: U,
+      renderHeader: V,
       sortable: !0,
       hideSortIcons: !1,
       flex: 1,
@@ -265,7 +265,7 @@ const Ue = ({
     {
       field: "created_at",
       headerName: n.mobile_devices_column_added,
-      renderHeader: U,
+      renderHeader: V,
       valueFormatter: (a) => te(oe(a), { addSuffix: !0 }),
       sortable: !0,
       hideSortIcons: !1,
@@ -275,9 +275,9 @@ const Ue = ({
     {
       field: "delete",
       headerName: "",
-      renderHeader: U,
-      renderCell: (a) => /* @__PURE__ */ e(h, { mr: 4, children: /* @__PURE__ */ e(
-        z,
+      renderHeader: V,
+      renderCell: (a) => /* @__PURE__ */ e(p, { mr: 4, children: /* @__PURE__ */ e(
+        O,
         {
           "aria-label": n.mobile_devices_delete_label,
           color: "secondary",
@@ -294,7 +294,7 @@ const Ue = ({
     ...a,
     device_type: `${a.make} ${a.model}`
   })), [t]);
-  return /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(z, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
     De,
     {
       columns: u,
@@ -309,7 +309,7 @@ const Ue = ({
       },
       slots: {
         footer: () => /* @__PURE__ */ e(
-          W,
+          z,
           {
             sx: {
               backgroundColor: o.palette.background.default,
@@ -333,7 +333,7 @@ const Ue = ({
         "& .MuiDataGrid-columnHeader .MuiIconButton-root": {
           color: o.palette.primary.main,
           "&:hover": {
-            backgroundColor: V(o.palette.primary.main, 0.1)
+            backgroundColor: W(o.palette.primary.main, 0.1)
           }
         },
         "& .MuiDataGrid-sortIcon": {
@@ -342,17 +342,17 @@ const Ue = ({
       }
     }
   ) });
-}, Ve = ({
+}, We = ({
   devices: t,
   onClickDeviceEdit: r,
   onClickDeviceDelete: i
 }) => {
-  const o = L(), { settings: n } = w(), [u, s] = m.useState(!1), a = (l) => (b, _) => {
+  const o = L(), { settings: n } = k(), [u, s] = m.useState(!1), a = (l) => (b, _) => {
     s(_ ? l : !1);
   };
-  return /* @__PURE__ */ c(h, { mx: -28, sx: { "& .MuiAccordion-root": { mb: 0, mt: 0 } }, children: [
+  return /* @__PURE__ */ c(p, { mx: -28, sx: { "& .MuiAccordion-root": { mb: 0, mt: 0 } }, children: [
     t.map((l) => /* @__PURE__ */ c(
-      we,
+      ke,
       {
         expanded: u === l.guid,
         onChange: a(l.guid),
@@ -367,7 +367,7 @@ const Ue = ({
                 borderBottom: "1px solid",
                 borderColor: o.palette.divider
               },
-              children: /* @__PURE__ */ c(h, { gap: 4, children: [
+              children: /* @__PURE__ */ c(p, { gap: 4, children: [
                 /* @__PURE__ */ e(x, { bold: !0, variant: "body1", children: l.name }),
                 /* @__PURE__ */ e(x, { color: o.palette.text.secondary, variant: "body2", children: `${l.make} ${l.model}` }),
                 /* @__PURE__ */ e(x, { color: o.palette.text.secondary, variant: "body2", children: te(oe(l.created_at), { addSuffix: !0 }) })
@@ -375,12 +375,12 @@ const Ue = ({
             }
           ),
           /* @__PURE__ */ c(
-            ke,
+            we,
             {
               sx: { backgroundColor: o.palette.background.default, p: "0 0 0 24px" },
               children: [
                 /* @__PURE__ */ c(
-                  h,
+                  p,
                   {
                     onClick: () => r(l),
                     sx: {
@@ -394,13 +394,13 @@ const Ue = ({
                       borderColor: o.palette.divider
                     },
                     children: [
-                      /* @__PURE__ */ e(z, { "aria-label": n.mobile_devices_edit_label, color: "secondary", children: /* @__PURE__ */ e(B, { name: "edit" }) }),
+                      /* @__PURE__ */ e(O, { "aria-label": n.mobile_devices_edit_label, color: "secondary", children: /* @__PURE__ */ e(B, { name: "edit" }) }),
                       /* @__PURE__ */ e(x, { variant: "body1", children: n.mobile_devices_edit_label })
                     ]
                   }
                 ),
                 /* @__PURE__ */ c(
-                  h,
+                  p,
                   {
                     onClick: () => i(l),
                     sx: {
@@ -412,7 +412,7 @@ const Ue = ({
                       cursor: "pointer"
                     },
                     children: [
-                      /* @__PURE__ */ e(z, { "aria-label": n.mobile_devices_delete_label, color: "secondary", children: /* @__PURE__ */ e(B, { name: "delete" }) }),
+                      /* @__PURE__ */ e(O, { "aria-label": n.mobile_devices_delete_label, color: "secondary", children: /* @__PURE__ */ e(B, { name: "delete" }) }),
                       /* @__PURE__ */ e(x, { variant: "body1", children: n.mobile_devices_delete_label })
                     ]
                   }
@@ -425,7 +425,7 @@ const Ue = ({
       l.guid
     )),
     /* @__PURE__ */ e(
-      W,
+      z,
       {
         sx: {
           backgroundColor: o.palette.background.default,
@@ -441,16 +441,16 @@ const Ue = ({
       }
     )
   ] });
-}, We = ({
+}, ze = ({
   dialogType: t,
   isOpen: r,
   onClose: i,
   device: o,
   deviceToken: n = ""
 }) => {
-  const u = L(), { common: s, settings: a } = w(), { updateDevice: l, deleteDevice: b, setAlert: _, loadDevices: d } = E(), [p, k] = m.useState("");
+  const u = L(), { common: s, settings: a } = k(), { updateDevice: l, deleteDevice: b, setAlert: _, loadDevices: d } = E(), [h, w] = m.useState("");
   m.useEffect(() => {
-    o && k(o.name);
+    o && w(o.name);
   }, [o, t]);
   const v = () => {
     switch (t) {
@@ -506,7 +506,7 @@ const Ue = ({
     };
   }, T = async () => {
     if (t === y.Token && i(), t === y.Edit && o) {
-      const g = { ...o, name: p };
+      const g = { ...o, name: h };
       (await l(g)).success ? (_(a.mobile_devices_edit_success, "success"), d()) : _(
         H(a.mobile_devices_edit_error, o.name),
         "error"
@@ -533,7 +533,7 @@ const Ue = ({
       secondaryText: t === y.Token ? s.back : s.cancel_button,
       sx: A(),
       children: [
-        t === y.Token && /* @__PURE__ */ c(h, { spacing: 16, sx: { px: 40, textAlign: "center", width: "100%" }, children: [
+        t === y.Token && /* @__PURE__ */ c(p, { spacing: 16, sx: { px: 40, textAlign: "center", width: "100%" }, children: [
           /* @__PURE__ */ e(x, { bold: !0, truncate: !1, variant: "body1", children: a.mobile_devices_access_label }),
           /* @__PURE__ */ e(x, { truncate: !1, variant: "body2", children: a.mobile_devices_access_info_1 }),
           /* @__PURE__ */ e(
@@ -550,19 +550,19 @@ const Ue = ({
           ),
           /* @__PURE__ */ e(x, { truncate: !1, variant: "body2", children: a.mobile_devices_access_info_2 })
         ] }),
-        t === y.Edit && /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(I, { onChange: (g) => k(g.target.value), value: p }) }),
+        t === y.Edit && /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(I, { onChange: (g) => w(g.target.value), value: h }) }),
         t === y.Delete && /* @__PURE__ */ e(M, { children: a.mobile_devices_delete_info })
       ]
     }
   );
-}, ze = C(We), Ge = C(() => {
-  const { isMobile: t } = O(), { settings: r } = w(), { isCopyLoaded: i, isInitialized: o } = ee(), { setAlert: n, devices: u, loadDevices: s, generateDeviceToken: a } = E(), [l, b] = m.useState({ open: !1, type: "" }), [_, d] = m.useState(), [p, k] = m.useState("");
+}, Ge = C(ze), je = C(() => {
+  const { isMobile: t } = F(), { settings: r } = k(), { isCopyLoaded: i, isInitialized: o } = ee(), { setAlert: n, devices: u, loadDevices: s, generateDeviceToken: a } = E(), [l, b] = m.useState({ open: !1, type: "" }), [_, d] = m.useState(), [h, w] = m.useState("");
   m.useEffect(() => {
     o && s();
   }, [o]);
   const v = async () => {
     const g = await a();
-    g ? (k(g), b({ open: !0, type: y.Token })) : n(r.mobile_devices_access_error, "error");
+    g ? (w(g), b({ open: !0, type: y.Token })) : n(r.mobile_devices_access_error, "error");
   }, S = (g) => {
     d(g), b({ open: !0, type: y.Edit });
   }, A = (g) => {
@@ -571,7 +571,7 @@ const Ue = ({
     b({ open: !1, type: "" }), d(void 0);
   };
   return !i || !o ? /* @__PURE__ */ e(ie, {}) : /* @__PURE__ */ c(
-    h,
+    p,
     {
       sx: {
         backgroundColor: "background.paper",
@@ -579,35 +579,35 @@ const Ue = ({
         gap: 24
       },
       children: [
-        /* @__PURE__ */ c(h, { gap: 4, children: [
+        /* @__PURE__ */ c(p, { gap: 4, children: [
           /* @__PURE__ */ e(Y, { children: r.mobile_devices_title }),
           /* @__PURE__ */ e(M, { variant: "body1", children: r.mobile_devices_info })
         ] }),
         t ? /* @__PURE__ */ e(
-          Ve,
+          We,
           {
             devices: u,
             onClickDeviceDelete: A,
             onClickDeviceEdit: S
           }
         ) : /* @__PURE__ */ e(
-          Ue,
+          Ve,
           {
             devices: u,
             onClickDeviceDelete: A,
             onClickDeviceEdit: S
           }
         ),
-        /* @__PURE__ */ c(h, { sx: { alignItems: "center", px: 24, py: 12, gap: 4 }, children: [
+        /* @__PURE__ */ c(p, { sx: { alignItems: "center", px: 24, py: 12, gap: 4 }, children: [
           /* @__PURE__ */ e(x, { bold: !0, variant: "body1", children: r.mobile_devices_access_title }),
           /* @__PURE__ */ e(M, { align: "center", variant: "body2", children: r.mobile_devices_access_description }),
           /* @__PURE__ */ e(Z, { onClick: v, variant: "text", children: r.mobile_devices_access_cta })
         ] }),
         /* @__PURE__ */ e(
-          ze,
+          Ge,
           {
             device: _,
-            deviceToken: p,
+            deviceToken: h,
             dialogType: l.type,
             isOpen: l.open,
             onClose: T
@@ -624,8 +624,8 @@ const Ue = ({
       /* @__PURE__ */ e(Ne, { children: /* @__PURE__ */ e(Le, {}) })
     ] }) });
   }
-), je = C(() => {
-  const { settings: t } = w(), { categories: r } = j(), { selectedRule: i, updateRuleCategory: o } = E(), [n, u] = m.useState(!1), s = () => {
+), $e = C(() => {
+  const { settings: t } = k(), { categories: r } = j(), { selectedRule: i, updateRuleCategory: o } = E(), [n, u] = m.useState(!1), s = () => {
     u(!1);
   }, a = () => {
     u(!0);
@@ -652,8 +652,8 @@ const Ue = ({
       }
     )
   ] });
-}), $e = C(() => {
-  const { common: t, settings: r } = w(), { selectedRule: i, updateRulePayee: o } = E(), n = L(), [u, s] = m.useState(!1), a = i?.description ? i.description : i?.match_description, [l, b] = m.useState(a || ""), _ = () => {
+}), Je = C(() => {
+  const { common: t, settings: r } = k(), { selectedRule: i, updateRulePayee: o } = E(), n = L(), [u, s] = m.useState(!1), a = i?.description ? i.description : i?.match_description, [l, b] = m.useState(a || ""), _ = () => {
     s(!0);
   }, d = async () => {
     l !== a && i && (i.description = l, await o(i), s(!1));
@@ -684,7 +684,7 @@ const Ue = ({
         children: /* @__PURE__ */ e(
           I,
           {
-            onChange: (p) => b(p.target.value),
+            onChange: (h) => b(h.target.value),
             sx: { width: 352 },
             value: l
           }
@@ -692,8 +692,8 @@ const Ue = ({
       }
     )
   ] });
-}), Je = C(({ onClose: t, onDelete: r, isOpen: i }) => {
-  const { common: o, settings: n } = w();
+}), Ke = C(({ onClose: t, onDelete: r, isOpen: i }) => {
+  const { common: o, settings: n } = k();
   return /* @__PURE__ */ e(
     $,
     {
@@ -710,11 +710,11 @@ const Ue = ({
       children: /* @__PURE__ */ e(x, { truncate: !1, variant: "body2", children: n.delete_rule_confirm })
     }
   );
-}), Ke = C(
+}), Ye = C(
   ({ isOpen: t, onClose: r, onDelete: i }) => {
-    const { common: o, settings: n } = w(), [u, s] = m.useState(!1);
+    const { common: o, settings: n } = k(), [u, s] = m.useState(!1);
     return /* @__PURE__ */ c(
-      Be,
+      He,
       {
         hasSecondaryAction: !1,
         isOpen: t,
@@ -727,12 +727,12 @@ const Ue = ({
         title: n.edit_rule,
         children: [
           /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e(x, { bold: !0, variant: "caption", children: n.details }) }),
-          /* @__PURE__ */ e($e, {}),
+          /* @__PURE__ */ e(Je, {}),
           /* @__PURE__ */ e(K, { sx: { ml: 24 } }),
-          /* @__PURE__ */ e(je, {}),
+          /* @__PURE__ */ e($e, {}),
           /* @__PURE__ */ e(K, { sx: { ml: 24 } }),
           /* @__PURE__ */ e(
-            Je,
+            Ke,
             {
               isOpen: u,
               onClose: () => s(!1),
@@ -743,50 +743,50 @@ const Ue = ({
       }
     );
   }
-), Ye = C(({ rule: t }) => {
-  const { categories: r } = j(), { setSelectedGuid: i } = Ee(), { deleteTransactionRule: o, setSelectedRule: n } = E(), { isDesktop: u, isTablet: s } = O(), [a, l] = m.useState(!1), b = () => {
+), qe = C(({ rule: t }) => {
+  const { categories: r } = j(), { setSelectedGuid: i } = Ee(), { deleteTransactionRule: o, setSelectedRule: n } = E(), { isDesktop: u, isTablet: s } = F(), [a, l] = m.useState(!1), b = () => {
     l(!1), i(null), n(void 0);
   }, _ = async () => {
     await o(), b();
   }, d = () => {
     l(!0), n(t);
-  }, p = (k) => r.find((v) => v.guid === k)?.name;
+  }, h = (w) => r.find((v) => v.guid === w)?.name;
   return /* @__PURE__ */ c(m.Fragment, { children: [
     /* @__PURE__ */ e(
       Q,
       {
         onClick: d,
         primaryText: t.description ? t.description : t.match_description,
-        secondaryText: t.category_guid ? p(t.category_guid) : ""
+        secondaryText: t.category_guid ? h(t.category_guid) : ""
       }
     ),
     /* @__PURE__ */ e(K, { sx: { ml: s || u ? 0 : 24 } }),
-    /* @__PURE__ */ e(Ke, { isOpen: a, onClose: b, onDelete: _ })
+    /* @__PURE__ */ e(Ye, { isOpen: a, onClose: b, onDelete: _ })
   ] });
 }), re = C(() => {
-  const { settings: t } = w(), { loadTransactionRules: r, transactionRules: i } = E(), [o, n] = m.useState(!1);
+  const { settings: t } = k(), { loadTransactionRules: r, transactionRules: i } = E(), [o, n] = m.useState(!1);
   return ne({
     widgetName: "TransactionRulesTab",
     isLoaded: o
   }), m.useEffect(() => {
     r().finally(() => n(!0));
-  }, []), /* @__PURE__ */ c(h, { sx: { gap: 24, py: 24 }, children: [
-    /* @__PURE__ */ c(h, { sx: { px: 24 }, children: [
+  }, []), /* @__PURE__ */ c(p, { sx: { gap: 24, py: 24 }, children: [
+    /* @__PURE__ */ c(p, { sx: { px: 24 }, children: [
       /* @__PURE__ */ e(Y, { children: t.transaction_rules_label }),
       /* @__PURE__ */ e(M, { variant: "body1", children: t.transaction_rules_description })
     ] }),
-    /* @__PURE__ */ e(Te, { children: i.map((u, s) => /* @__PURE__ */ e(Ye, { rule: u }, s)) })
+    /* @__PURE__ */ e(Te, { children: i.map((u, s) => /* @__PURE__ */ e(qe, { rule: u }, s)) })
   ] });
-}), qe = C(({ selectedTab: t }) => {
+}), Qe = C(({ selectedTab: t }) => {
   const { alert: r, setAlert: i } = E(), {
     config: { display_user_profile_in_settings: o }
   } = G();
   return /* @__PURE__ */ c(X, { children: [
-    t === N.Profile && /* @__PURE__ */ e(Fe, {}),
-    t === N.Devices && /* @__PURE__ */ e(Ge, {}),
+    t === N.Profile && /* @__PURE__ */ e(Ue, {}),
+    t === N.Devices && /* @__PURE__ */ e(je, {}),
     t === N.Notifications && /* @__PURE__ */ e(J, { showPersonalDetails: !o }),
     t === N.TransactionRules && /* @__PURE__ */ e(re, {}),
-    t === N.Help && /* @__PURE__ */ e(h, { sx: { px: 24 }, children: /* @__PURE__ */ e(He, {}) }),
+    t === N.Help && /* @__PURE__ */ e(p, { sx: { px: 24 }, children: /* @__PURE__ */ e(Oe, {}) }),
     /* @__PURE__ */ e(
       fe,
       {
@@ -810,8 +810,8 @@ const Ue = ({
   ] });
 });
 var N = /* @__PURE__ */ ((t) => (t[t.Profile = 0] = "Profile", t[t.Devices = 1] = "Devices", t[t.Notifications = 2] = "Notifications", t[t.TransactionRules = 3] = "TransactionRules", t[t.Help = 4] = "Help", t))(N || {});
-const Vt = C(({ onBackClick: t, onMenuClick: r, sx: i }) => {
-  const { settings: o } = w(), { isCopyLoaded: n, isInitialized: u } = ee(), { config: s } = G(), { isMobile: a } = O(), { categoriesLoaded: l, loadCategories: b } = j();
+const Wt = C(({ onBackClick: t, onMenuClick: r, sx: i }) => {
+  const { settings: o } = k(), { isCopyLoaded: n, isInitialized: u } = ee(), { config: s } = G(), { isMobile: a } = F(), { categoriesLoaded: l, loadCategories: b } = j();
   ne({
     widgetName: "SettingsWidget",
     isLoaded: u && n
@@ -821,14 +821,14 @@ const Vt = C(({ onBackClick: t, onMenuClick: r, sx: i }) => {
   const {
     display_user_profile_in_settings: _,
     display_mobile_devices_in_settings: d,
-    display_notification_settings_in_settings: p,
-    display_user_transaction_rules_in_settings: k,
+    display_notification_settings_in_settings: h,
+    display_user_transaction_rules_in_settings: w,
     show_help_widget_in_master: v
   } = s, S = [
     { enabled: _, index: 0, label: o?.profile_label },
     { enabled: d, index: 1, label: o?.mobile_devices_label },
-    { enabled: p, index: 2, label: o?.notifications_label },
-    { enabled: k, index: 3, label: o?.transaction_rules_label },
+    { enabled: h, index: 2, label: o?.notifications_label },
+    { enabled: w, index: 3, label: o?.transaction_rules_label },
     { enabled: v, index: 4, label: o?.help_label }
   ], A = S.find((D) => D.enabled), [T, g] = m.useState(A ? A.index : -1);
   return !n || !u ? /* @__PURE__ */ e(ie, {}) : /* @__PURE__ */ e(
@@ -839,11 +839,11 @@ const Vt = C(({ onBackClick: t, onMenuClick: r, sx: i }) => {
       showAccountFilter: !1,
       sx: { height: "calc(100dvh - 24px)", overflow: "auto", ...i },
       title: o.title,
-      children: /* @__PURE__ */ c(h, { mx: a ? 0 : 48, my: 24, children: [
+      children: /* @__PURE__ */ c(p, { mx: a ? 0 : 48, my: 24, children: [
         /* @__PURE__ */ e(
           pe,
           {
-            onChange: (D, F) => g(F),
+            onChange: (D, U) => g(U),
             sx: { bgcolor: "background.paper" },
             textColor: "primary",
             value: T,
@@ -853,30 +853,41 @@ const Vt = C(({ onBackClick: t, onMenuClick: r, sx: i }) => {
             )
           }
         ),
-        /* @__PURE__ */ e(qe, { selectedTab: T })
+        /* @__PURE__ */ e(Qe, { selectedTab: T })
       ] })
     }
   );
-}), Wt = C((t) => {
-  const { clientConfig: r } = G(), i = r?.master?.deep_link_params?.view;
-  return i ? /* @__PURE__ */ e(J, { view: i }) : /* @__PURE__ */ e(q, { ...t, showAccountFilter: !1, children: /* @__PURE__ */ e(h, { my: 24, children: /* @__PURE__ */ e(J, {}) }) });
-}), zt = (t) => {
-  const { isMobile: r } = O(), { categoriesLoaded: i, loadCategories: o } = j();
+}), zt = C((t) => {
+  const { clientConfig: r } = G(), i = r?.master?.deep_link_params?.view, o = r?.master?.show_back_button;
+  return i ? /* @__PURE__ */ c(p, { children: [
+    o && t.onBackClick && /* @__PURE__ */ e(
+      O,
+      {
+        color: "primary",
+        onClick: t.onBackClick,
+        sx: { p: 10, alignSelf: "flex-start" },
+        children: /* @__PURE__ */ e(Be, { size: 24 })
+      }
+    ),
+    /* @__PURE__ */ e(J, { view: i })
+  ] }) : /* @__PURE__ */ e(q, { ...t, showAccountFilter: !1, children: /* @__PURE__ */ e(p, { my: 24, children: /* @__PURE__ */ e(J, {}) }) });
+}), Gt = (t) => {
+  const { isMobile: r } = F(), { categoriesLoaded: i, loadCategories: o } = j();
   return m.useEffect(() => {
     i || o().finally();
-  }), /* @__PURE__ */ e(q, { ...t, showAccountFilter: !1, children: /* @__PURE__ */ e(h, { sx: { mx: r ? 0 : 48, my: 24 }, children: /* @__PURE__ */ e(re, {}) }) });
+  }), /* @__PURE__ */ e(q, { ...t, showAccountFilter: !1, children: /* @__PURE__ */ e(p, { sx: { mx: r ? 0 : 48, my: 24 }, children: /* @__PURE__ */ e(re, {}) }) });
 };
 export {
-  $t as AccountNotificationProfiles,
-  Jt as BudgetNotificationProfiles,
-  Ge as DeviceTab,
-  Kt as InsightsNotificationProfiles,
+  Jt as AccountNotificationProfiles,
+  Kt as BudgetNotificationProfiles,
+  je as DeviceTab,
+  Yt as InsightsNotificationProfiles,
   J as NotificationSettings,
-  Wt as NotificationSettingsWidget,
-  Fe as ProfileTab,
+  zt as NotificationSettingsWidget,
+  Ue as ProfileTab,
   N as SettingsTabs,
-  Vt as SettingsWidget,
-  qe as SettingsWidgetContents,
+  Wt as SettingsWidget,
+  Qe as SettingsWidgetContents,
   re as TransactionRulesTab,
-  zt as TransactionRulesWidget
+  Gt as TransactionRulesWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.0.11",
+  "version": "9.0.13-alpha.al0",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",