@mx-cartographer/experiences 9.0.0-alpha.mega1 → 9.0.0

package/README.md

@@ -1,18 +1,201 @@
-- [Getting Started](#getting-started)
-- [Merging and Publishing](#merging-and-publishing)
-- [React Library Application Template](#react-library-application-template)
+# @mx-cartographer/experiences
+
+@mx-cartographer/experiences is a React-based library of financial experience widgets designed for seamless integration within the MX ecosystem. It provides a robust collection of modular widgets (e.g., Accounts, Budgets, Cashflow) built on top of Material UI (MUI) [^MUI_VER] and the MXUI design system [^MXUI_VER], powered by MobX [^MOBX_VER] for scalable state management.
+
+## Documentation
 
+- [Architecture Overview](docs/ARCHITECTURE.md)
+- [Widget Catalog](docs/WIDGETS.md)
+- [State Management](docs/STATE_MANAGEMENT.md)
+- [API and Data](docs/API_AND_DATA.md)
+- [Styling and Theming](docs/STYLING_AND_THEMING.md)
+- [Testing](docs/TESTING.md)
 
-## Getting started
-In order to run the project you will need to make sure that you have yarn installed. It must be higher than 1.22 in order to do that you must have corepack enabled. Do not just run "npm i" to install dependencies, all packages must be installed with yarn.
+## Tech Stack
 
-1. Install [yarn](https://yarnpkg.com/getting-started/install)
-1. From the project root dir, run `yarn` or `yarn install` to install dependencies
-1. To start the project run `yarn dev`
-1. The storybook project should automatically run in your local browser
-1. The QA storybook containing the latest Experience changes is [accessible here](https://experiences.kube.qa.internal.mx/?path=/docs/experiences-introduction--docs)
+The library is built using a modern React stack, leveraging industry-standard tools for building performant and accessible UI components.
 
-## Publishing alpha versions
+| Component | Technology | Description |
+| :--- | :--- | :--- |
+| **Framework** | [React](https://reactjs.org/) | Core library for building declarative UI components. |
+| **Language** | [TypeScript](https://www.typescriptlang.org/) | Provides static typing for improved maintainability and developer experience. |
+| **Styling** | [Material UI (MUI)](https://mui.com/) | Base UI component framework and styling system. |
+| **Design System** | [@mxenabled/mxui](https://mx.atlassian.net/wiki) | MX-themed overrides and consistent UI primitives. |
+| **State Management** | [MobX](https://mobx.js.org/) | Scalable and observable state management for complex widget interactions. |
+| **Data Visualization** | [D3.js](https://d3js.org/) | Powering complex charts and interactive data representations. |
+| **Build Tool** | [Vite](https://vitejs.dev/) | Next-generation frontend tooling for fast builds and development. |
+| **Testing** | [Vitest](https://vitest.dev/) | Modern testing framework compatible with the Vite ecosystem. |
+| **Documentation** | [Storybook](https://storybook.js.org/) | Component-driven development environment and live documentation. |
+
+## Table of Contents
+- [Getting Started](#getting-started)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Architecture](#architecture)
+- [Project Structure](#project-structure)
+- [Testing](#testing)
+- [Contributing](#contributing)
+- [Support](#support)
+
+## Getting Started
+
+### Prerequisites
+- **Node.js**: v18.0.0 or higher
+- **Yarn**: 4.11.0 [^YARN_VER]
+- **React**: 18.3.1 [^REACT_VER]
+- **MobX**: 6.13.6 [^MOBX_VER]
+
+### Installation
+
+Install the library using yarn:
+
+```bash
+yarn add @mx-cartographer/experiences
+```
+
+The QA storybook containing the latest Experience changes is [accessible here](https://experiences.kube.qa.internal.mx/?path=/docs/experiences-introduction--docs).
+
+## Usage
+
+### Integrating a Widget
+To use an experience widget, import it from its feature-specific entry point. Most widgets are designed to automatically wrap themselves in a `WidgetContainer` for consistent layout.
+
+```tsx
+import React from 'react';
+import { AccountsWidget } from '@mx-cartographer/experiences/accounts';
+
+const MyDashboard = () => {
+  return (
+    <div style={{ height: '600px', width: '100%' }}>
+      <AccountsWidget 
+        onBackClick={() => console.log('User clicked back')} 
+      />
+    </div>
+  );
+};
+```
+
+### Common Configuration
+Widgets often accept `sx` props for styling and specific callbacks for navigation or analytics.
+
+```tsx
+import { BudgetsWidget } from '@mx-cartographer/experiences/budgets';
+
+<BudgetsWidget 
+  sx={{ m: 2, borderRadius: '8px' }}
+  onBudgetClick={(budgetId) => navigate(`/budgets/${budgetId}`)}
+/>
+```
+
+## Architecture
+
+The project follows a modular architecture where feature widgets leverage shared infrastructure and a unified design system.
+
+```mermaid
+graph TB
+    subgraph "Consumer Application"
+        App[React Application]
+    end
+
+    subgraph "@mx-cartographer/experiences"
+        subgraph "Common Infrastructure (src/common)"
+            WC[WidgetContainer]
+            GP[WidgetContainerProvider]
+            GS[GlobalUiStore / GlobalCopyStore]
+            API[WidgetApi / Fetch]
+        end
+
+        subgraph "Experience Widgets (src/[feature])"
+            AW[AccountsWidget]
+            BW[BudgetsWidget]
+            CW[CashflowWidget]
+        end
+
+        subgraph "State Management"
+            MX[MobX]
+        end
+
+        subgraph "UI Foundation"
+            MUI[Material UI]
+            MXUI[@mxenabled/mxui]
+        end
+    end
+
+    App --> AW
+    App --> BW
+    AW --> WC
+    BW --> WC
+    WC --> GP
+    AW --> GS
+    AW --> API
+    GS --> MX
+    AW --> MXUI
+    MXUI --> MUI
+```
+
+### Key Design Patterns
+- **Container Pattern**: Widgets are wrapped in `WidgetContainer` [^1] to provide consistent headers, action buttons, and navigation.
+- **Context-Driven Layout**: The `WidgetContainerProvider` [^2] calculates container dimensions to enable internal responsive rendering logic.
+- **State Isolation**: Each feature (e.g., Budgets, Accounts) maintains its own MobX store, while sharing global state through `GlobalUiStore` and `GlobalCopyStore` [^3].
+- **Responsive Primitives**: All components use the `useScreenSize` hook [^4] for consistent behavior across mobile, tablet, and desktop viewports.
+
+## Project Structure
+
+The codebase is organized by feature, with a shared `common` directory for cross-cutting concerns and a `core` directory for centralized types and constants.
+
+```mermaid
+graph TD
+    src["src/"]
+    src --> core["core/ (Centralized TypeScript types and constants)"]
+    src --> common["common/ (Shared components, hooks, stores, and API utilities)"]
+    src --> accounts["accounts/ (Accounts summary, details, and connection management)"]
+    src --> budgets["budgets/ (Budget tracking, bubble charts, and categorization)"]
+    src --> cashflow["cashflow/ (Cashflow forecasting and event management)"]
+    src --> dashboard["dashboard/ (Aggregate view of multiple experience widgets)"]
+    src --> debts["debts/ (Debt tracking and payoff visualization)"]
+    src --> finstrong["finstrong/ (Financial health scoring and reporting)"]
+    src --> goals["goals/ (Savings goal setting, tracking, and progress visualization)"]
+    src --> networth["networth/ (Asset and liability tracking with historical trends)"]
+    src --> spending["spending/ (Categorized spending analysis)"]
+    src --> transactions["transactions/ (Detailed transaction history and rules)"]
+    src --> trends["trends/ (Longitudinal spending and income analysis)"]
+```
+
+## Testing
+
+The library uses `Vitest` [^5] and `@testing-library/react` [^6] for comprehensive unit and integration testing.
+
+```bash
+# Run all tests
+yarn test
+
+# Run tests with interactive UI and coverage reporting
+yarn testui
+
+# Run tests in headless mode (CI)
+yarn citest
+```
+
+Verification logic and test setups are maintained in [src/common/__tests__](src/common/__tests__) and [vitest.setup.insights.tsx](vitest.setup.insights.tsx).
+
+## Contributing
+
+1. **Local Development**: Preview widgets in isolation using Storybook.
+   ```bash
+   yarn storybook
+   ```
+2. **Linting**: Maintain code quality and standards.
+   ```bash
+   yarn lint
+   ```
+3. **Building**: Generate production-ready artifacts.
+   ```bash
+   yarn build
+   ```
+
+<!-- Commented this out to prevent exposing internal operations in the npm registry -->
+
+<!-- ## Publishing alpha versions
 1. Bump the version in package.json using the format `major.minor.patch-alpha.<yourinitials><n>` See [the version history](https://www.npmjs.com/package/@mx-cartographer/experiences?activeTab=versions) for examples.
 1. Run `npm publish --tag alpha`.
 
@@ -21,39 +204,25 @@ In order to run the project you will need to make sure that you have yarn instal
 1. Update CHANGELOG.md and include the version to publish using the standard `major.minor.patch`. If there are breaking changes, we bump the major, new feature we bump minor and bug fixes or minor changes, we bump patch.
 1. Request a MR review by commenting `shipit --review`
 1. Once the MR is approved, comment `shipit --publish-version=major|minor|patch`.
-2. Shipit will bump the version in package.json, merge and publish the package to npm.
-
-
-## React Library Application Template
-
-This template is used to create projects in the Cartographer group
-
-### Create a Cartographer group project from the template
-
-1. Go to the [Cartographer group](https://gitlab.mx.com/mx/money-experiences/moneymap/cartographer) and click "New Project"
-1. Click "Create from Template"
-1. Open the "Groups" tab
-1. Click "Use Template" in the React Library Application row
-1. Enter the project name and ensure that the visitibliy is set to internal. Add a description if needed
-1. Click "Create project" and you've created your project
-
-### Next steps:
-
-#### Protect the Master branch
-
-Note: A maintainer or owner will need to do this part
-
-1. Open Settings > Repository for the repo
-1. Expand the "Selected branches" section
-1. For the master branch, set the "Allowed to merge" option to "Developers + Maintainers" and the "Allowed to push" option to "No one"
-
-#### Merge Request Approvals
-
-1. Open Settings > General for the repo
-1. Expand the "Merge request approvals section"
-1. Change approvals required to 1
-
-#### Issue board
-
-Under Issues > Boards, create a new board to track issues for that specific repo. Copy the labels/lists from the scoped issue board in the Cartographer group to create this one. The labels will be the same, but the new issue board will only shows issues created for this specific repo.
-
+2. Shipit will bump the version in package.json, merge and publish the package to npm. -->
+
+## Support
+
+For technical assistance or internal inquiries:
+- **Team**: MX Cartographer
+- **Docs**: [MX Developer Portal](https://mx.atlassian.net/wiki)
+- **Slack**: https://mx.enterprise.slack.com/archives/C08M61HSWRF #web-experiences-dev-all
+
+## Copyright (c) 2026 MX Technologies, Inc. All Rights Reserved.
+
+[^1]: [src/common/components/WidgetContainer.tsx:55](src/common/components/WidgetContainer.tsx#L55)
+[^2]: [src/common/context/WidgetContainerProvider.tsx:10](src/common/context/WidgetContainerProvider.tsx#L10)
+[^3]: [src/common/context/GlobalStoreProvider.tsx:10](src/common/context/GlobalStoreProvider.tsx#L10)
+[^4]: [src/common/hooks/useScreenSize.tsx:4](src/common/hooks/useScreenSize.tsx#L4)
+[^5]: [package.json:267](package.json#L267)
+[^6]: [package.json:160](package.json#L160)
+[^MUI_VER]: [package.json:188](package.json#L188)
+[^MXUI_VER]: [package.json:196](package.json#L196)
+[^MOBX_VER]: [package.json:202](package.json#L202)
+[^REACT_VER]: [package.json:206](package.json#L206)
+[^YARN_VER]: [package.json:284](package.json#L284)

package/dist/{Account-CMjOp7S2.mjs → Account-BaJmiJAG.mjs}

@@ -109,10 +109,10 @@ export {
   U as S,
   M as a,
   G as b,
-  C as c,
-  N as d,
-  A as e,
-  H as f,
+  A as c,
+  H as d,
+  C as e,
+  N as f,
   R as g,
   T as h
 };

package/dist/{Account-BIKn4XEZ.mjs → Account-BxHMlV9R.mjs}

@@ -1,4 +1,4 @@
-import { A as C } from "./Account-CMjOp7S2.mjs";
+import { A as C } from "./Account-BaJmiJAG.mjs";
 const I = [
   C.ANY,
   C.CASH,

package/dist/AccountDetailsHeader-DIysk_4w.mjs

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+import { observer as _ } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { H3 as x, InstitutionLogo as D, Text as d, H2 as N } from "@mxenabled/mxui";
+import { f as P } from "./NumberFormatting--XMeeBfr.mjs";
+import p from "react";
+import { G, d as f, l as O, f as R, a as v, u as w } from "./hooks-BaO_gOI6.mjs";
+import { g as L } from "./AccountFields-mwJ8NXsX.mjs";
+import { A as i } from "./Account-BaJmiJAG.mjs";
+import H from "@mui/material/Card";
+import M from "@mui/material/CardContent";
+import U from "@mui/material/CardHeader";
+import { L as Y } from "./Loader-CxeBwuPG.mjs";
+import { I as j, P as z, S as k } from "./Account-BxHMlV9R.mjs";
+import { u as B } from "./useAccountDisplayName-CFa_MrS6.mjs";
+const C = () => {
+  if (!p.useContext(G))
+    throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
+  return f().uiStore;
+}, F = (o, e) => {
+  const c = [i.LOAN, i.MORTGAGE, i.PROPERTY].includes(
+    o
+  ), n = [
+    i.CREDIT_CARD,
+    i.LINE_OF_CREDIT,
+    i.PREPAID,
+    i.CHECKING_LINE_OF_CREDIT
+  ].includes(o);
+  return c ? { title: e.label_payments, description: e.chart_title_payments } : n ? { title: e.label_payments_spend, description: e.chart_title_payments_spend } : { title: e.label_income_spend, description: e.chart_title_income_spend };
+}, V = ({
+  sx: o,
+  ChartComponent: e,
+  header: c
+}) => {
+  const { loadMonthlyCategoryTotals: n } = O(), { isInitialized: l } = R(), { selectedAccount: a } = C(), [u, m] = p.useState(!1);
+  return p.useEffect(() => {
+    l && n([a]).finally(() => {
+      m(!0);
+    });
+  }, [l, a]), !l || !u ? /* @__PURE__ */ t(Y, {}) : /* @__PURE__ */ r(
+    H,
+    {
+      sx: {
+        "& .MuiCardContent-root:last-child": {
+          pb: 0
+        },
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ t(U, { sx: { pb: 0 }, title: /* @__PURE__ */ t(x, { sx: { pb: 4 }, children: c }) }),
+        /* @__PURE__ */ t(M, { sx: { p: 0 }, children: e ? /* @__PURE__ */ t(e, {}) : null })
+      ]
+    }
+  );
+}, W = _(V), $ = ({
+  customDetailsChart: o,
+  ChartComponent: e
+}) => {
+  const { institutions: c } = f(), { selectedAccount: n } = C(), { config: l } = v(), { accounts: a } = w(), { firstSubtitle: u, firstValue: m, hasAvailableBalance: b, secondSubtitle: h, secondValue: A } = L(n, a, l.display_available_balance_in_accounts), y = c.find(
+    (T) => T.guid === n?.institution_guid
+  ), g = [
+    ...j,
+    ...z,
+    ...k
+  ].includes(n.account_type), E = B(n), { title: S, description: I } = F(n.account_type, a);
+  return /* @__PURE__ */ r(s, { bgcolor: "background.default", p: 24, children: [
+    /* @__PURE__ */ r(s, { gap: 12, children: [
+      /* @__PURE__ */ t(
+        D,
+        {
+          alt: a.institution_logo_alt,
+          institutionGuid: n.institution_guid || "",
+          size: 64
+        }
+      ),
+      /* @__PURE__ */ t(d, { variant: "body2", children: y?.name })
+    ] }),
+    /* @__PURE__ */ r(s, { gap: 8, mb: 24, mt: 4, children: [
+      /* @__PURE__ */ t(N, { children: E }),
+      /* @__PURE__ */ r(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(d, { bold: b, variant: "body1", children: u }),
+        /* @__PURE__ */ t(d, { bold: !0, variant: "body1", children: P(m, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ r(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(d, { variant: "body2", children: h }),
+        /* @__PURE__ */ t(d, { variant: "body2", children: A })
+      ] })
+    ] }),
+    g && /* @__PURE__ */ t(s, { "aria-label": I, role: "img", children: o || /* @__PURE__ */ t(W, { ChartComponent: e, header: S }) })
+  ] });
+}, lt = _($);
+export {
+  lt as A,
+  C as u
+};

package/dist/AccountFields-mwJ8NXsX.mjs

@@ -0,0 +1,141 @@
+import { jsx as p } from "react/jsx-runtime";
+import { Text as h, Icon as b } from "@mxenabled/mxui";
+import { A as d, a as F, P as T, b as A } from "./Account-BaJmiJAG.mjs";
+import { i as D, u as g, a as O, b as C, c as N } from "./AccountUtils-T5_Odvos.mjs";
+import { F as m } from "./Accounts-CseLC3lL.mjs";
+import { f } from "./DateUtil-Bhq59ZVg.mjs";
+import { f as s, i as o, a as S, b as I } from "./NumberFormatting--XMeeBfr.mjs";
+import { b as i } from "./Localization-DnoVyBNK.mjs";
+import { f as c, D as y } from "./DateFormats-HudZ3Bjs.mjs";
+const Y = (l, e) => {
+  const n = [
+    {
+      event: "account_details_click_account_name",
+      label: e.account_name,
+      name: "user_name",
+      placeholder: i(e.enter_value, e.account_name),
+      type: m.Input,
+      validation: (a) => a ? "" : i(e.field_is_required, e.account_name),
+      valueFormatter: (a) => a
+    }
+  ];
+  if (D(l)) {
+    n.unshift({
+      label: e.account_balance,
+      name: "balance",
+      placeholder: i(e.enter_value, e.account_balance),
+      type: m.Currency,
+      valueFormatter: (t) => s(t, "0,0.00")
+    });
+    const a = Object.keys(d).filter((t) => Number(t)).map((t) => ({
+      label: e.account_types[t],
+      value: Number(t),
+      icon: /* @__PURE__ */ p(b, { name: F[t] })
+    }));
+    n.push({
+      label: e.account_type,
+      name: "account_type",
+      options: a,
+      placeholder: i(e.select_value, e.account_type),
+      type: m.Select,
+      valueFormatter: (t) => a.find((r) => r.value === t)?.label
+    });
+  }
+  if (l.account_type === d.PROPERTY) {
+    const a = Object.keys(T).filter((t) => Number(t)).map((t) => ({
+      label: e.property_types[t],
+      value: Number(t),
+      icon: /* @__PURE__ */ p(b, { name: A[t] })
+    }));
+    n.push({
+      label: e.property_type,
+      name: "property_type",
+      options: a,
+      placeholder: i(e.select_value, e.property_type),
+      type: m.Select,
+      valueFormatter: (t) => a.find((r) => r.value === t)?.label
+    });
+  }
+  if (g(l)) {
+    let a = e.interest_rate, t = "interest_rate";
+    l.is_manual || (typeof l.apr == "number" && (a = e.apr, t = "apr"), typeof l.apy == "number" && (a = e.apy, t = "apy")), n.push({
+      event: "account_details_click_interest_rate",
+      label: a,
+      name: t,
+      placeholder: i(e.enter_value, a),
+      type: m.Input,
+      validation: (r) => o(r) ? "" : e.error_amount_is_invalid,
+      valueFormatter: (r) => o(r) ? S(r / 100) : r
+    });
+  }
+  return O(l) && (n.push({
+    label: e.minimum_payment,
+    name: "minimum_payment",
+    placeholder: i(e.enter_value, e.minimum_payment),
+    type: m.Currency,
+    valueFormatter: (a) => s(a, "0,0.00")
+  }), l.payment_due_at ? n.push({
+    label: e.next_payment,
+    name: "payment_due_at",
+    type: m.Date,
+    valueFormatter: (a) => {
+      const t = typeof a == "number" ? f(a) : a;
+      return c(t, y.MED_MONTH_SHORT_DAY_FULL_YEAR);
+    }
+  }) : n.push({
+    label: e.day_payment_due,
+    name: "day_payment_is_due",
+    placeholder: i(e.enter_value, e.day_payment_due),
+    type: m.Date,
+    valueFormatter: (a) => i(
+      e.day_of_every_month,
+      I(a <= 31 ? a : new Date(a).getDate())
+    )
+  })), C(l) && n.push({
+    label: e.credit_limit,
+    name: "credit_limit",
+    placeholder: i(e.enter_value, e.credit_limit),
+    type: m.Currency,
+    valueFormatter: (a) => s(a, "0,0.00")
+  }), N(l) && n.push({
+    label: e.original_balance,
+    minAmount: 1,
+    name: "original_balance",
+    placeholder: i(e.enter_value, e.original_balance),
+    type: m.Currency,
+    valueFormatter: (a) => s(a, "0,0.00")
+  }), n;
+}, L = (l, e, n) => {
+  let a = "", t = null, r = null, _ = null, u = !1;
+  switch (l.account_type) {
+    case 1:
+    case 2: {
+      l.available_balance && n ? (a = e.available_balance, t = l.available_balance, r = l.available_balance ? e.current_balance : null, _ = s(l.balance, "0,0.00"), u = !0) : (a = e.current_balance, t = l.balance);
+      break;
+    }
+    default:
+      if (a = e.current_balance, t = l.balance, l.minimum_payment && l.payment_due_at) {
+        const v = f(l.payment_due_at);
+        r = /* @__PURE__ */ p(h, { component: "strong", variant: "caption", children: i(
+          e.payment_due_on,
+          s(l.minimum_payment, "0,0.00"),
+          c(v, y.FULL_MONTH_DAY)
+        ) });
+      } else l.credit_limit && (r = e.available_credit, _ = s(l.credit_limit - (l?.balance ?? 0), "0,0.00"));
+  }
+  return {
+    firstSubtitle: a,
+    firstValue: t,
+    secondSubtitle: r,
+    secondValue: _,
+    hasAvailableBalance: u
+  };
+}, j = (l, e, n) => l.reduce((t, r) => {
+  const u = L(r, e, n).firstValue || 0;
+  return t + u;
+}, 0);
+export {
+  Y as a,
+  j as b,
+  L as g
+};

package/dist/AccountListItem-BDXHs4tV.mjs

@@ -0,0 +1,94 @@
+import { jsx as e, jsxs as o, Fragment as c } from "react/jsx-runtime";
+import { observer as _ } from "mobx-react-lite";
+import I from "@mui/material/Badge";
+import m from "@mui/material/Box";
+import v from "@mui/material/ListItem";
+import C from "@mui/material/ListItemAvatar";
+import S from "@mui/material/ListItemButton";
+import A from "@mui/material/ListItemText";
+import { useTheme as L } from "@mui/material/styles";
+import { InstitutionLogo as B, Text as r } from "@mxenabled/mxui";
+import { Error as j } from "@mxenabled/mx-icons";
+import { I as T } from "./IconBacking-DgT8DCeh.mjs";
+import { f as $ } from "./NumberFormatting--XMeeBfr.mjs";
+import { g as k } from "./AccountFields-mwJ8NXsX.mjs";
+import { u as E } from "./useAccountDisplayName-CFa_MrS6.mjs";
+import { a as M, u as w } from "./hooks-BaO_gOI6.mjs";
+import { C as d } from "./Account-BaJmiJAG.mjs";
+const z = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2
+}, D = ({ size: t = 20 }) => /* @__PURE__ */ e(T, { size: t, children: /* @__PURE__ */ e(j, { color: "error", filled: !0, sx: { fontSize: t, ...z } }) }), G = ({
+  account: t,
+  onRowClick: n,
+  listItemProps: s,
+  shouldShowConnectionStatus: p = !1
+}) => {
+  const u = L(), f = E(t), { config: g } = M(), { accounts: i } = w(), { firstSubtitle: h, firstValue: b, secondSubtitle: x, secondValue: y } = k(
+    t,
+    i,
+    g.display_available_balance_in_accounts
+  );
+  let a;
+  (t.connectionStatus === d.Error || t.connectionStatus === d.RequiresMfa) && (a = /* @__PURE__ */ e(D, { size: 16 }));
+  const l = /* @__PURE__ */ o(c, { children: [
+    /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(
+      I,
+      {
+        badgeContent: p ? a : void 0,
+        sx: {
+          "& .MuiBadge-badge": {
+            right: -1
+          }
+        },
+        children: /* @__PURE__ */ e(B, { alt: "MX", institutionGuid: t.institution_guid || "" })
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      A,
+      {
+        disableTypography: !0,
+        primary: /* @__PURE__ */ o(
+          r,
+          {
+            bold: !0,
+            color: t.is_hidden ? u.palette.text.secondary : void 0,
+            variant: "body1",
+            children: [
+              `${f} ${t.account_number ? `*${t.account_number}` : ""}`,
+              " ",
+              t.is_hidden && !t.is_closed && i.is_hidden,
+              t.is_closed && i.is_closed
+            ]
+          }
+        ),
+        secondary: /* @__PURE__ */ o(c, { children: [
+          /* @__PURE__ */ o(m, { sx: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ e(r, { variant: "caption", children: h }),
+            /* @__PURE__ */ e(r, { bold: !0, variant: "body2", children: $(b, "0,0.00") })
+          ] }),
+          /* @__PURE__ */ o(m, { sx: { alignItems: "center", display: "flex", justifyContent: "space-between" }, children: [
+            /* @__PURE__ */ e(r, { variant: "caption", children: x }),
+            /* @__PURE__ */ e(r, { ml: "auto", variant: "caption", children: y })
+          ] })
+        ] })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ e(
+    v,
+    {
+      ...s,
+      sx: {
+        backgroundColor: "background.paper",
+        color: t.is_closed ? "grey.700" : "",
+        ...s?.sx
+      },
+      children: n ? /* @__PURE__ */ e(S, { alignItems: "flex-start", onClick: n, sx: { px: 24 }, children: l }) : l
+    }
+  );
+}, et = _(G);
+export {
+  et as A
+};

package/dist/AccountUtils-T5_Odvos.mjs

@@ -0,0 +1,27 @@
+import { A as e, C as u, E as p, e as y, M as d } from "./Account-BaJmiJAG.mjs";
+const m = (t) => t && (t.account_type === e.CREDIT_CARD || t.account_type === e.LOAN || t.account_type === e.MORTGAGE || t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CHECKING_LINE_OF_CREDIT), I = (t) => t.is_manual || !t.guid, f = (t) => t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CREDIT_CARD || t.account_type === e.CHECKING_LINE_OF_CREDIT, R = (t) => t.account_type === e.SAVINGS || t.account_type === e.CHECKING || t.account_type === e.LINE_OF_CREDIT || t.account_type === e.CREDIT_CARD || t.account_type === e.LOAN || t.account_type === e.MORTGAGE, A = (t) => t.account_type === e.LOAN || t.account_type === e.MORTGAGE, N = (t, n, s, _, a) => t.filter((i) => !(i.member_is_managed_by_user && _)).filter((i) => !(!i.member_is_managed_by_user && a)).sort(C).map((i) => {
+  const r = n.find((c) => c.guid === i.institution_guid), o = s.find((c) => c.guid === i.member_guid);
+  return E(i, r, o);
+}), E = (t, n, s) => {
+  let _ = u.Connected;
+  s && (p.includes(s.connection_status) ? _ = u.Error : y.includes(s.connection_status) ? _ = u.Processing : d.includes(s.connection_status) && (_ = u.RequiresMfa));
+  const a = [
+    t.user_name || t.feed_name || "",
+    t.account_number ? `*${t.account_number}` : ""
+  ].join(" ").trim();
+  return {
+    ...t,
+    connectionStatus: _,
+    displayName: a,
+    institution: n,
+    member: s
+  };
+}, C = (t, n) => t.account_type > n.account_type ? 1 : t.account_type < n.account_type ? -1 : (t.name || "") > (n.name || "") ? 1 : (t.name || "") < (n.name || "") ? -1 : 0;
+export {
+  m as a,
+  f as b,
+  A as c,
+  N as d,
+  I as i,
+  R as u
+};

package/dist/Accounts-CseLC3lL.mjs

@@ -0,0 +1,5 @@
+var a = /* @__PURE__ */ ((r) => (r.Loading = "loading", r.Error = "error", r))(a || {}), t = /* @__PURE__ */ ((r) => (r.Currency = "currency", r.Date = "date", r.Input = "input", r.Select = "select", r))(t || {});
+export {
+  t as F,
+  a as M
+};