@mx-cartographer/experiences 9.4.70 → 9.5.0-alpha.al0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [9.5.0] - 10-09-2026
+
+- **CHANGED** - Date pickers and data grids now use MUI X v8, the same version as mxui, which fixes the empty From and To fields in the small-screen date range picker MEW-4216
+- **CHANGED** - MUI X is now a peer dependency, so the app provides the one copy that experiences and mxui share MEW-4216
+
+## [9.4.71] - 10-09-2026
+
+- **CHANGED** - `DirectDepositVariant` (`DirectDepositBlock/layout.ts`) is now a single `directDepositVariant` const object used both as the runtime value and as the source for the derived `DirectDepositVariant` type, so a variant name only needs to change in one place; `getLayoutConfig`'s keys are computed properties off that object instead of retyped literals (WEC-1875)
+- **FIXED** - `DirectDepositBlockBeats.ts` fixture typed its `insights_payload` per-JSON-literal, which broke `primary_cta` access for the `DirectDepositComplete` variant (no CTA on that beat) with a `TS2339` typecheck error; `insights_payload` is now cast to the real `InsightsPayload` type (matching `TransactionBlockBeats.ts`'s pattern), which already models `primary_cta` as optional (WEC-1875)
+- **CHANGED** - `DirectDepositBlockPayload.json` fixture's `instance_slot.variant` values switched to snake_case (WEC-1875)
+- **CHANGED** - Extracted `ConfettiOverlay` (`src/insights-v2/components/shared/ConfettiOverlay.tsx`) as a shared component, used by both `DirectDepositCard` and `TransferLogoCard` instead of each defining its own (WEC-1875)
+
 ## [9.4.70] - 10-09-2026
 
 - **ADDED** - `PrimaryCTA` / `SecondaryCTA` accept a backend-described `metadata` object (`event`, `action`, `payload`); on press the CTA runner posts that message to the host after the step's handler and effects succeed, so per-insight post messages no longer need frontend code (WEC-1852)

package/README.md

@@ -53,6 +53,8 @@ Install the library using yarn:
 yarn add @mx-cartographer/experiences
 ```
 
+Your app must also install the MUI X packages at the versions listed under `peerDependencies` in `package.json`. experiences, mxui, and your app then share one copy. The data grid packages are needed only for widgets that show a table.
+
 The QA storybook containing the latest Experience changes is [accessible here](https://experiences.kube.qa.internal.mx/?path=/docs/experiences-introduction--docs).
 
 ## Usage

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailEdit.es.js

@@ -11,7 +11,7 @@ import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import { alpha as E } from "@mui/material/styles";
 import V from "@mui/material/TextField";
 import d from "@mui/material/MenuItem";
-import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFns";
 import { DateCalendar as T } from "@mui/x-date-pickers/DateCalendar";
 import _ from "@mui/material/FormControl";
 import B from "@mui/material/InputLabel";
@@ -63,7 +63,7 @@ var $ = ({ field: e, isOpen: h, onClose: b }) => {
             maxDate: w(/* @__PURE__ */ new Date(), 1),
             minDate: /* @__PURE__ */ new Date(),
             onChange: (t) => {
-              a[e.name] && Number(a[e.name]) <= 31 ? o(t.getDate()) : o(t);
+              t && (a[e.name] && Number(a[e.name]) <= 31 ? o(t.getDate()) : o(t));
             },
             sx: {
               "& .MuiPickersDay-today": { color: "primary.lighter" },

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailEdit.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountDetailEdit.es.js","names":[],"sources":["../../../../../src/accounts/components/detailsdrawer/Accounts/AccountDetailEdit.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { addMonths } from 'date-fns/addMonths'\nimport { alpha } from '@mui/material/styles'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport FormControl from '@mui/material/FormControl'\nimport InputLabel from '@mui/material/InputLabel'\nimport { LocalizationProvider } from '@mui/x-date-pickers-pro'\nimport MenuItem from '@mui/material/MenuItem'\nimport Select from '@mui/material/Select'\nimport TextField from '@mui/material/TextField'\n\nimport { CurrencyInput, Dialog, useAccountStore, useGlobalCopyStore } from '../../../../common'\nimport { type AccountField } from '../../../utils/AccountFields'\nimport { useAccountUiStore } from '../../../hooks/useUiStore'\nimport { FieldType } from '../../../constants/Accounts'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\ninterface AccountDetailEditProps {\n  field: AccountField\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst AccountDetailEdit: React.FC<AccountDetailEditProps> = ({ field, isOpen, onClose }) => {\n  const { updateAccount } = useAccountStore()\n  const { selectedAccount: account } = useAccountUiStore()\n  const { accounts: accountsCopy } = useGlobalCopyStore()\n\n  const [editedValue, setEditedValue] = React.useState<any>(account[field.name])\n  const [errorMessage, setErrorMessage] = React.useState('')\n  const [hasValidCurrencyInput, setHasValidCurrencyInput] = React.useState(true)\n\n  const handleClose = () => {\n    setEditedValue('')\n    setErrorMessage('')\n    onClose()\n  }\n\n  const getEditableField = () => {\n    switch (field.type) {\n      case FieldType.Select: {\n        return (\n          <FormControl fullWidth={true}>\n            <InputLabel id={`${field.label}-select-label`}>{field.label}</InputLabel>\n            <Select\n              displayEmpty={true}\n              id={`${field.label}-select`}\n              label={field.label}\n              labelId={`${field.label}-select-label`}\n              onChange={(e) => setEditedValue(e.target.value)}\n              slotProps={{\n                input: {\n                  sx: {\n                    backgroundColor: 'background.paper',\n                  },\n                },\n              }}\n              value={editedValue}\n            >\n              {!editedValue && (\n                <MenuItem disabled={true} value=\"\">\n                  {field.placeholder}\n                </MenuItem>\n              )}\n              {field.options?.map((option) => (\n                <MenuItem key={option.value} value={option.value}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        )\n      }\n\n      case FieldType.Currency: {\n        return (\n          <CurrencyInput\n            amount={(editedValue as string | number) || ''}\n            ariaLabel={field.placeholder}\n            fullWidth={true}\n            label={field.label}\n            placeholder={field.placeholder}\n            setAmount={setEditedValue}\n            setHasValidInput={setHasValidCurrencyInput}\n          />\n        )\n      }\n\n      case FieldType.Date: {\n        return (\n          <LocalizationProvider dateAdapter={AdapterDateFns}>\n            <DateCalendar\n              maxDate={addMonths(new Date(), 1)}\n              minDate={new Date()}\n              onChange={(date: Date) => {\n                if (account[field.name] && Number(account[field.name]) <= 31) {\n                  // gets and sets the day of the month to editedValue\n                  setEditedValue(date.getDate())\n                } else {\n                  // the day of the month was already passed, so we set it directly to state\n                  setEditedValue(date)\n                }\n              }}\n              sx={{\n                '& .MuiPickersDay-today': {\n                  color: 'primary.lighter',\n                },\n                '& .MuiPickersArrowSwitcher-button': {\n                  color: 'primary.lighter',\n                  '&:hover': {\n                    backgroundColor: (theme) => alpha(theme.palette.primary.light, 0.1),\n                  },\n                },\n              }}\n              views={['day']}\n            />\n          </LocalizationProvider>\n        )\n      }\n\n      default: {\n        return (\n          <TextField\n            defaultValue={account[field.name]}\n            error={!!errorMessage}\n            fullWidth={true}\n            helperText={errorMessage}\n            onChange={updateField}\n            placeholder={field.placeholder}\n            slotProps={{\n              htmlInput: {\n                'aria-label': field.placeholder,\n              },\n            }}\n          />\n        )\n      }\n    }\n  }\n\n  const saveField = () => {\n    // prevents any unnecessary api calls\n    if (account[field.name] !== editedValue) {\n      updateAccount({\n        ...account,\n        [field.name]: editedValue,\n      })\n    }\n    handleClose()\n  }\n\n  const updateField = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setEditedValue(e.target.value)\n\n    if (field.validation) {\n      setErrorMessage(field.validation(e.target.value))\n    }\n  }\n\n  return (\n    <Dialog\n      copy={{\n        close_aria: accountsCopy.close_aria,\n        title: buildDynamicCopy(accountsCopy.edit_field, field.label) as string,\n      }}\n      disablePrimaryButton={!!errorMessage || !hasValidCurrencyInput}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onPrimaryAction={saveField}\n      primaryText={accountsCopy.save}\n      sx={{\n        '& .MuiButton-root:focus-visible, & .MuiButton-root:focus': {\n          outline: '2px solid',\n          outlineColor: 'primary.main',\n          outlineOffset: '2px',\n        },\n      }}\n    >\n      {getEditableField()}\n    </Dialog>\n  )\n}\n\nexport default observer(AccountDetailEdit)\n"],"mappings":"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"}
+{"version":3,"file":"AccountDetailEdit.es.js","names":[],"sources":["../../../../../src/accounts/components/detailsdrawer/Accounts/AccountDetailEdit.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { addMonths } from 'date-fns/addMonths'\nimport { alpha } from '@mui/material/styles'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport FormControl from '@mui/material/FormControl'\nimport InputLabel from '@mui/material/InputLabel'\nimport { LocalizationProvider } from '@mui/x-date-pickers-pro'\nimport MenuItem from '@mui/material/MenuItem'\nimport Select from '@mui/material/Select'\nimport TextField from '@mui/material/TextField'\n\nimport { CurrencyInput, Dialog, useAccountStore, useGlobalCopyStore } from '../../../../common'\nimport { type AccountField } from '../../../utils/AccountFields'\nimport { useAccountUiStore } from '../../../hooks/useUiStore'\nimport { FieldType } from '../../../constants/Accounts'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\n\ninterface AccountDetailEditProps {\n  field: AccountField\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst AccountDetailEdit: React.FC<AccountDetailEditProps> = ({ field, isOpen, onClose }) => {\n  const { updateAccount } = useAccountStore()\n  const { selectedAccount: account } = useAccountUiStore()\n  const { accounts: accountsCopy } = useGlobalCopyStore()\n\n  const [editedValue, setEditedValue] = React.useState<any>(account[field.name])\n  const [errorMessage, setErrorMessage] = React.useState('')\n  const [hasValidCurrencyInput, setHasValidCurrencyInput] = React.useState(true)\n\n  const handleClose = () => {\n    setEditedValue('')\n    setErrorMessage('')\n    onClose()\n  }\n\n  const getEditableField = () => {\n    switch (field.type) {\n      case FieldType.Select: {\n        return (\n          <FormControl fullWidth={true}>\n            <InputLabel id={`${field.label}-select-label`}>{field.label}</InputLabel>\n            <Select\n              displayEmpty={true}\n              id={`${field.label}-select`}\n              label={field.label}\n              labelId={`${field.label}-select-label`}\n              onChange={(e) => setEditedValue(e.target.value)}\n              slotProps={{\n                input: {\n                  sx: {\n                    backgroundColor: 'background.paper',\n                  },\n                },\n              }}\n              value={editedValue}\n            >\n              {!editedValue && (\n                <MenuItem disabled={true} value=\"\">\n                  {field.placeholder}\n                </MenuItem>\n              )}\n              {field.options?.map((option) => (\n                <MenuItem key={option.value} value={option.value}>\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        )\n      }\n\n      case FieldType.Currency: {\n        return (\n          <CurrencyInput\n            amount={(editedValue as string | number) || ''}\n            ariaLabel={field.placeholder}\n            fullWidth={true}\n            label={field.label}\n            placeholder={field.placeholder}\n            setAmount={setEditedValue}\n            setHasValidInput={setHasValidCurrencyInput}\n          />\n        )\n      }\n\n      case FieldType.Date: {\n        return (\n          <LocalizationProvider dateAdapter={AdapterDateFns}>\n            <DateCalendar\n              maxDate={addMonths(new Date(), 1)}\n              minDate={new Date()}\n              onChange={(date: Date | null) => {\n                if (!date) return\n                if (account[field.name] && Number(account[field.name]) <= 31) {\n                  // gets and sets the day of the month to editedValue\n                  setEditedValue(date.getDate())\n                } else {\n                  // the day of the month was already passed, so we set it directly to state\n                  setEditedValue(date)\n                }\n              }}\n              sx={{\n                '& .MuiPickersDay-today': {\n                  color: 'primary.lighter',\n                },\n                '& .MuiPickersArrowSwitcher-button': {\n                  color: 'primary.lighter',\n                  '&:hover': {\n                    backgroundColor: (theme) => alpha(theme.palette.primary.light, 0.1),\n                  },\n                },\n              }}\n              views={['day']}\n            />\n          </LocalizationProvider>\n        )\n      }\n\n      default: {\n        return (\n          <TextField\n            defaultValue={account[field.name]}\n            error={!!errorMessage}\n            fullWidth={true}\n            helperText={errorMessage}\n            onChange={updateField}\n            placeholder={field.placeholder}\n            slotProps={{\n              htmlInput: {\n                'aria-label': field.placeholder,\n              },\n            }}\n          />\n        )\n      }\n    }\n  }\n\n  const saveField = () => {\n    // prevents any unnecessary api calls\n    if (account[field.name] !== editedValue) {\n      updateAccount({\n        ...account,\n        [field.name]: editedValue,\n      })\n    }\n    handleClose()\n  }\n\n  const updateField = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setEditedValue(e.target.value)\n\n    if (field.validation) {\n      setErrorMessage(field.validation(e.target.value))\n    }\n  }\n\n  return (\n    <Dialog\n      copy={{\n        close_aria: accountsCopy.close_aria,\n        title: buildDynamicCopy(accountsCopy.edit_field, field.label) as string,\n      }}\n      disablePrimaryButton={!!errorMessage || !hasValidCurrencyInput}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onPrimaryAction={saveField}\n      primaryText={accountsCopy.save}\n      sx={{\n        '& .MuiButton-root:focus-visible, & .MuiButton-root:focus': {\n          outline: '2px solid',\n          outlineColor: 'primary.main',\n          outlineOffset: '2px',\n        },\n      }}\n    >\n      {getEditableField()}\n    </Dialog>\n  )\n}\n\nexport default observer(AccountDetailEdit)\n"],"mappings":"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"}

package/dist/core/types/Insights.d.ts

@@ -253,4 +253,12 @@ export interface InstanceSlot {
      * from `InsightsPayload.instance_slot_data` instead and leave this absent.
      */
     data_series?: InstanceSlotRow[];
+    /** Primary line on the hero card, e.g. "Epic Bank Checking, *1234". */
+    account_name?: string;
+    /** Secondary line beneath the name, e.g. "Checking Account" / "Credit Card". */
+    account_type?: string;
+    /** Status pill label, e.g. "Direct Deposit Not Set Up" / "Interest Rate: 19.99% APR". */
+    status_text?: string;
+    institution_guid?: string;
+    institution_name?: string;
 }

package/dist/debts/components/DebtsTable.es.js

@@ -163,10 +163,10 @@ var oe = ({ sx: _ = {}, debts: d, hoveredDebtGuid: C, onHoverRow: m, onClickRow:
       },
       rows: f,
       slotProps: {
-        baseIconButton: {
+        baseIconButton: { material: {
           color: "secondary",
           sx: { ml: 8 }
-        },
+        } },
         row: {
           onMouseEnter: T,
           onMouseLeave: () => !r && m?.(""),

package/dist/debts/components/DebtsTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebtsTable.es.js","names":[],"sources":["../../../src/debts/components/DebtsTable.tsx"],"sourcesContent":["import React from 'react'\nimport { Stack, useTheme } from '@mui/material'\nimport { DataGridPro, GridColDef, GridSortModel } from '@mui/x-data-grid-pro'\nimport Box from '@mui/material/Box'\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\nimport { DebtChartData } from '../../core/utils/DebtUtils'\nimport { getPriorityValue, priorityComparator } from '../utils/DebtsTable'\nimport { HeaderCell } from '../../trends/components/trendstable/HeaderCell'\nimport { PriorityCell } from './debtstable/PriorityCell'\nimport { AccountCell } from './debtstable/AccountCell'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DebtsTableProps {\n  sx?: any\n  debts: DebtChartData[]\n  hoveredDebtGuid: string\n  onHoverRow: (debtGuid: string) => void\n  onClickRow: () => void\n}\n\nexport const DebtsTable: React.FC<DebtsTableProps> = ({\n  sx = {},\n  debts,\n  hoveredDebtGuid,\n  onHoverRow,\n  onClickRow,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const { debts: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [sortModel, setSortModel] = React.useState<GridSortModel>([\n    { field: 'priority', sort: 'asc' },\n  ])\n\n  const desktopColumns: GridColDef[] = [\n    {\n      field: 'priority',\n      headerName: copy.table_column_priority,\n      renderHeader: HeaderCell,\n      renderCell: PriorityCell,\n      sortComparator: priorityComparator,\n      sortable: true,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 67 : 72,\n      flex: isMobile ? 0.2 : 0.4,\n    },\n    {\n      field: 'account',\n      headerName: copy.table_column_account,\n      renderHeader: HeaderCell,\n      renderCell: AccountCell,\n      sortable: false,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 180 : 225,\n      flex: 1,\n    },\n    {\n      field: 'balance',\n      headerName: copy.table_column_balance,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {formatCurrency(params.value, '0,0')}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 70 : 122,\n      flex: isMobile ? 0.4 : 0.6,\n    },\n    {\n      field: 'interest_rate',\n      headerName: copy.details_interest_rate,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {typeof params.value === 'number' ? `${Number(params.value).toFixed(2)}%` : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'projected_payoff_date',\n      headerName: copy.table_column_payoff_date,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {params.value ? formatDate(params.value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR) : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'monthly_payment',\n      headerName: copy.table_column_amount_due,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {typeof params.value === 'number' ? formatCurrency(params.value, '0,0') : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n  ]\n\n  const mobileColumns: GridColDef[] = [\n    ...desktopColumns.slice(0, 3),\n    {\n      field: 'chevron',\n      headerClassName: 'chevron-header',\n      headerName: '',\n      renderCell: () => (\n        <Stack aria-label={commonCopy.see_details} role=\"button\">\n          <Icon name=\"chevron_right\" />\n        </Stack>\n      ),\n      sortable: false,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'right',\n      headerAlign: 'right',\n      width: 20,\n    },\n  ]\n\n  const rows = React.useMemo(() => {\n    return debts.map((debt, idx) => ({\n      ...debt,\n      id: idx,\n      priority: getPriorityValue(debt),\n    }))\n  }, [debts])\n\n  const handleRowHover = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    const target = event.target as HTMLElement\n    const rowEl = target.closest('[data-id]')\n    const debtIdx = rowEl?.getAttribute('data-id')\n    const hoveredDebt = debts[Number(debtIdx)]\n    onHoverRow?.(hoveredDebt?.guid ?? '')\n  }\n\n  const onMouseEnterRow = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    // Only use hover on non-mobile devices\n    if (!isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const onRowInteraction = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    // For mobile devices, use touch/click to highlight row\n    if (isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const getRowIdByGuid = (guid: string) => {\n    return rows.find((r) => r.guid === guid)?.id\n  }\n\n  return (\n    <Box\n      sx={{\n        height: 'auto',\n        width: '100%',\n        mt: '15px',\n        overflowX: 'auto',\n        overflowY: 'visible',\n        boxShadow: 'none',\n        ...sx,\n      }}\n    >\n      <DataGridPro\n        columns={isMobile ? mobileColumns : desktopColumns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel } }}\n        onRowClick={(params) => {\n          onClickRow()\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_ROW, { account_guid: params.row.guid })\n        }}\n        onSortModelChange={(newModel) => {\n          setSortModel(newModel)\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_SORT)\n        }}\n        rows={rows}\n        slotProps={{\n          baseIconButton: { color: 'secondary', sx: { ml: 8 } },\n          row: {\n            onMouseEnter: onMouseEnterRow,\n            onMouseLeave: () => !isMobile && onHoverRow?.(''),\n            onTouchStart: onRowInteraction,\n            onClick: isMobile ? onRowInteraction : undefined,\n          },\n        }}\n        sortModel={sortModel}\n        sortingOrder={['asc', 'desc']}\n        sx={{\n          '& .chevron-header': { display: 'none' },\n          [`& .MuiDataGrid-row[data-id=\"${getRowIdByGuid(hoveredDebtGuid)}\"]`]: {\n            backgroundColor: theme.palette.mode === 'light' ? '#f8f9fb' : '#1f2329',\n            filter: 'brightness(98%)',\n          },\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"DebtsTable.es.js","names":[],"sources":["../../../src/debts/components/DebtsTable.tsx"],"sourcesContent":["import React from 'react'\nimport { Stack, useTheme } from '@mui/material'\nimport { DataGridPro, GridColDef, GridSortModel } from '@mui/x-data-grid-pro'\nimport Box from '@mui/material/Box'\nimport { Icon, Text } from '@mxenabled/mxui'\n\nimport { ANALYTICS_EVENTS, useEvent, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\nimport { DebtChartData } from '../../core/utils/DebtUtils'\nimport { getPriorityValue, priorityComparator } from '../utils/DebtsTable'\nimport { HeaderCell } from '../../trends/components/trendstable/HeaderCell'\nimport { PriorityCell } from './debtstable/PriorityCell'\nimport { AccountCell } from './debtstable/AccountCell'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\ninterface DebtsTableProps {\n  sx?: any\n  debts: DebtChartData[]\n  hoveredDebtGuid: string\n  onHoverRow: (debtGuid: string) => void\n  onClickRow: () => void\n}\n\nexport const DebtsTable: React.FC<DebtsTableProps> = ({\n  sx = {},\n  debts,\n  hoveredDebtGuid,\n  onHoverRow,\n  onClickRow,\n}) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { isMobile } = useScreenSize()\n  const { debts: copy, common: commonCopy } = useGlobalCopyStore()\n\n  const [sortModel, setSortModel] = React.useState<GridSortModel>([\n    { field: 'priority', sort: 'asc' },\n  ])\n\n  const desktopColumns: GridColDef[] = [\n    {\n      field: 'priority',\n      headerName: copy.table_column_priority,\n      renderHeader: HeaderCell,\n      renderCell: PriorityCell,\n      sortComparator: priorityComparator,\n      sortable: true,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 67 : 72,\n      flex: isMobile ? 0.2 : 0.4,\n    },\n    {\n      field: 'account',\n      headerName: copy.table_column_account,\n      renderHeader: HeaderCell,\n      renderCell: AccountCell,\n      sortable: false,\n      type: 'custom',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 180 : 225,\n      flex: 1,\n    },\n    {\n      field: 'balance',\n      headerName: copy.table_column_balance,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {formatCurrency(params.value, '0,0')}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: isMobile ? 70 : 122,\n      flex: isMobile ? 0.4 : 0.6,\n    },\n    {\n      field: 'interest_rate',\n      headerName: copy.details_interest_rate,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {typeof params.value === 'number' ? `${Number(params.value).toFixed(2)}%` : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'projected_payoff_date',\n      headerName: copy.table_column_payoff_date,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {params.value ? formatDate(params.value, DATE_FORMATS_INTL.MONTH_SHORT_YEAR) : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n    {\n      field: 'monthly_payment',\n      headerName: copy.table_column_amount_due,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text color={theme.palette.text.primary} variant=\"body2\">\n          {typeof params.value === 'number' ? formatCurrency(params.value, '0,0') : '---'}\n        </Text>\n      ),\n      sortable: true,\n      hideSortIcons: isMobile,\n      type: 'number',\n      align: 'left',\n      headerAlign: 'left',\n      minWidth: 122,\n      flex: 0.6,\n    },\n  ]\n\n  const mobileColumns: GridColDef[] = [\n    ...desktopColumns.slice(0, 3),\n    {\n      field: 'chevron',\n      headerClassName: 'chevron-header',\n      headerName: '',\n      renderCell: () => (\n        <Stack aria-label={commonCopy.see_details} role=\"button\">\n          <Icon name=\"chevron_right\" />\n        </Stack>\n      ),\n      sortable: false,\n      hideSortIcons: true,\n      type: 'custom',\n      align: 'right',\n      headerAlign: 'right',\n      width: 20,\n    },\n  ]\n\n  const rows = React.useMemo(() => {\n    return debts.map((debt, idx) => ({\n      ...debt,\n      id: idx,\n      priority: getPriorityValue(debt),\n    }))\n  }, [debts])\n\n  const handleRowHover = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    const target = event.target as HTMLElement\n    const rowEl = target.closest('[data-id]')\n    const debtIdx = rowEl?.getAttribute('data-id')\n    const hoveredDebt = debts[Number(debtIdx)]\n    onHoverRow?.(hoveredDebt?.guid ?? '')\n  }\n\n  const onMouseEnterRow = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n    // Only use hover on non-mobile devices\n    if (!isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const onRowInteraction = (\n    event: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,\n  ) => {\n    // For mobile devices, use touch/click to highlight row\n    if (isMobile) {\n      handleRowHover(event)\n    }\n  }\n\n  const getRowIdByGuid = (guid: string) => {\n    return rows.find((r) => r.guid === guid)?.id\n  }\n\n  return (\n    <Box\n      sx={{\n        height: 'auto',\n        width: '100%',\n        mt: '15px',\n        overflowX: 'auto',\n        overflowY: 'visible',\n        boxShadow: 'none',\n        ...sx,\n      }}\n    >\n      <DataGridPro\n        columns={isMobile ? mobileColumns : desktopColumns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel } }}\n        onRowClick={(params) => {\n          onClickRow()\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_ROW, { account_guid: params.row.guid })\n        }}\n        onSortModelChange={(newModel) => {\n          setSortModel(newModel)\n          onEvent(ANALYTICS_EVENTS.DEBTS_CLICK_TABLE_SORT)\n        }}\n        rows={rows}\n        slotProps={{\n          baseIconButton: { material: { color: 'secondary', sx: { ml: 8 } } },\n          row: {\n            onMouseEnter: onMouseEnterRow,\n            onMouseLeave: () => !isMobile && onHoverRow?.(''),\n            onTouchStart: onRowInteraction,\n            onClick: isMobile ? onRowInteraction : undefined,\n          },\n        }}\n        sortModel={sortModel}\n        sortingOrder={['asc', 'desc']}\n        sx={{\n          '& .chevron-header': { display: 'none' },\n          [`& .MuiDataGrid-row[data-id=\"${getRowIdByGuid(hoveredDebtGuid)}\"]`]: {\n            backgroundColor: theme.palette.mode === 'light' ? '#f8f9fb' : '#1f2329',\n            filter: 'brightness(98%)',\n          },\n        }}\n      />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/finstrong/components/ManageDOB.es.js

@@ -5,7 +5,7 @@ import { observer as b } from "mobx-react-lite";
 import v from "@mui/material/Stack";
 import { jsx as e } from "react/jsx-runtime";
 import { alpha as o, useTheme as D } from "@mui/material/styles";
-import { AdapterDateFns as S } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as S } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as x } from "@mui/x-date-pickers/LocalizationProvider";
 import { StaticDatePicker as w } from "@mui/x-date-pickers";
 var B = ({ isOpen: n, onClose: a }) => {

package/dist/finstrong/components/ManageDOB.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ManageDOB.es.js","names":[],"sources":["../../../src/finstrong/components/ManageDOB.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { alpha, useTheme } from '@mui/material/styles'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { StaticDatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { Drawer, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../common'\n\ninterface ManageDOBProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst ManageDOB = ({ isOpen, onClose }: ManageDOBProps) => {\n  const { finstrong: finstrongCopy } = useGlobalCopyStore()\n  const theme = useTheme()\n  const { updateUser, user } = useUserStore()\n  const { loadPeerScore } = useFinstrongStore()\n  const [selectedDate, setSelectedDate] = React.useState<number | null | undefined>(user.birthday)\n\n  const handleChange = (date: Date | null) => {\n    setSelectedDate(Math.floor(new Date(date!).getTime() / 1000))\n  }\n  const handlePrimaryAction = () => {\n    if (!selectedDate || selectedDate === user.birthday) return\n    updateUser({ ...user, birthday: selectedDate }).finally(() => {\n      loadPeerScore()\n    })\n    onClose()\n  }\n\n  return (\n    <Drawer\n      footerStyles={{ borderTop: 1, borderColor: 'divider', px: 24, py: 16 }}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPrimaryAction={handlePrimaryAction}\n      onSecondaryAction={onClose}\n      title={finstrongCopy.date_of_birth}\n    >\n      <Stack sx={{ bgcolor: 'background.default', height: '100%' }}>\n        <LocalizationProvider dateAdapter={AdapterDateFns}>\n          {/* TODO: Use the existing Calendar component, but update a few things in it */}\n          <StaticDatePicker\n            disableFuture={true}\n            onChange={handleChange}\n            slotProps={{\n              nextIconButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n              previousIconButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n              switchViewButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n            }}\n            slots={{\n              actionBar: () => null,\n              toolbar: () => null,\n            }}\n            sx={{\n              width: '100%',\n              '& .MuiIconButton-edgeEnd': {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            }}\n            value={selectedDate ? new Date(selectedDate * 1000) : new Date()}\n          />\n        </LocalizationProvider>\n      </Stack>\n    </Drawer>\n  )\n}\n\nexport default observer(ManageDOB)\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAA,CAAa,EAAE,QAAA,GAAQ,SAAA,EAAA,MAA8B;AACzD,QAAM,EAAE,WAAW,EAAA,IAAkB,EAAmB,GAClD,IAAQ,EAAS,GACjB,EAAE,YAAA,GAAY,MAAA,EAAA,IAAS,EAAa,GACpC,EAAE,eAAA,EAAA,IAAkB,EAAkB,GACtC,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAoC,EAAK,QAAQ,GAEzF,IAAA,CAAgB,MAAsB;AAC1C,IAAA,EAAgB,KAAK,MAAM,IAAI,KAAK,CAAK,EAAE,QAAQ,IAAI,GAAI,CAAC;AAAA,EAC9D;AASA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc;AAAA,MAAE,WAAW;AAAA,MAAG,aAAa;AAAA,MAAW,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAC7D,QAAA;AAAA,IACC,SAAA;AAAA,IACT,iBAbE,MAA4B;AAChC,MAAI,CAAC,KAAgB,MAAiB,EAAK,aAC3C,EAAW;AAAA,QAAE,GAAG;AAAA,QAAM,UAAU;AAAA,MAAa,CAAC,EAAE,QAAA,MAAc;AAC5D,QAAA,EAAc;AAAA,MAChB,CAAC,GACD,EAAQ;AAAA,IACV;AAAA,IAQI,mBAAmB;AAAA,IACnB,OAAO,EAAc;AAAA,IAErB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,SAAS;AAAA,QAAsB,QAAQ;AAAA,MAAO;AAAA,MACzD,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAsB,aAAa;AAAA,QAEjC,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,eAAe;AAAA,UACf,UAAU;AAAA,UACV,WAAW;AAAA,YACT,gBAAgB,EACd,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,YACA,oBAAoB,EAClB,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,YACA,kBAAkB,EAChB,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,WAAA,MAAiB;AAAA,YACjB,SAAA,MAAe;AAAA,UACjB;AAAA,UACA,IAAI;AAAA,YACF,OAAO;AAAA,YACP,4BAA4B;AAAA,cAC1B,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE;AAAA,UACF;AAAA,UACA,OAAO,IAAe,oBAAI,KAAK,IAAe,GAAI,IAAI,oBAAI,KAAK;AAAA,QAChE,CAAA;AAAA,MACmB,CAAA;AAAA,IACjB,CAAA;AAAA,EACD,CAAA;AAEZ,GAEA,IAAe,EAAS,CAAS"}
+{"version":3,"file":"ManageDOB.es.js","names":[],"sources":["../../../src/finstrong/components/ManageDOB.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { alpha, useTheme } from '@mui/material/styles'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { StaticDatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { Drawer, useFinstrongStore, useGlobalCopyStore, useUserStore } from '../../common'\n\ninterface ManageDOBProps {\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst ManageDOB = ({ isOpen, onClose }: ManageDOBProps) => {\n  const { finstrong: finstrongCopy } = useGlobalCopyStore()\n  const theme = useTheme()\n  const { updateUser, user } = useUserStore()\n  const { loadPeerScore } = useFinstrongStore()\n  const [selectedDate, setSelectedDate] = React.useState<number | null | undefined>(user.birthday)\n\n  const handleChange = (date: Date | null) => {\n    setSelectedDate(Math.floor(new Date(date!).getTime() / 1000))\n  }\n  const handlePrimaryAction = () => {\n    if (!selectedDate || selectedDate === user.birthday) return\n    updateUser({ ...user, birthday: selectedDate }).finally(() => {\n      loadPeerScore()\n    })\n    onClose()\n  }\n\n  return (\n    <Drawer\n      footerStyles={{ borderTop: 1, borderColor: 'divider', px: 24, py: 16 }}\n      isOpen={isOpen}\n      onClose={onClose}\n      onPrimaryAction={handlePrimaryAction}\n      onSecondaryAction={onClose}\n      title={finstrongCopy.date_of_birth}\n    >\n      <Stack sx={{ bgcolor: 'background.default', height: '100%' }}>\n        <LocalizationProvider dateAdapter={AdapterDateFns}>\n          {/* TODO: Use the existing Calendar component, but update a few things in it */}\n          <StaticDatePicker\n            disableFuture={true}\n            onChange={handleChange}\n            slotProps={{\n              nextIconButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n              previousIconButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n              switchViewButton: {\n                sx: {\n                  color: 'primary.main',\n                  '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              },\n            }}\n            slots={{\n              actionBar: () => null,\n              toolbar: () => null,\n            }}\n            sx={{\n              width: '100%',\n              '& .MuiIconButton-edgeEnd': {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            }}\n            value={selectedDate ? new Date(selectedDate * 1000) : new Date()}\n          />\n        </LocalizationProvider>\n      </Stack>\n    </Drawer>\n  )\n}\n\nexport default observer(ManageDOB)\n"],"mappings":";;;;;;;;;;AAiBA,IAAM,IAAA,CAAa,EAAE,QAAA,GAAQ,SAAA,EAAA,MAA8B;AACzD,QAAM,EAAE,WAAW,EAAA,IAAkB,EAAmB,GAClD,IAAQ,EAAS,GACjB,EAAE,YAAA,GAAY,MAAA,EAAA,IAAS,EAAa,GACpC,EAAE,eAAA,EAAA,IAAkB,EAAkB,GACtC,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAoC,EAAK,QAAQ,GAEzF,IAAA,CAAgB,MAAsB;AAC1C,IAAA,EAAgB,KAAK,MAAM,IAAI,KAAK,CAAK,EAAE,QAAQ,IAAI,GAAI,CAAC;AAAA,EAC9D;AASA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc;AAAA,MAAE,WAAW;AAAA,MAAG,aAAa;AAAA,MAAW,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAC7D,QAAA;AAAA,IACC,SAAA;AAAA,IACT,iBAbE,MAA4B;AAChC,MAAI,CAAC,KAAgB,MAAiB,EAAK,aAC3C,EAAW;AAAA,QAAE,GAAG;AAAA,QAAM,UAAU;AAAA,MAAa,CAAC,EAAE,QAAA,MAAc;AAC5D,QAAA,EAAc;AAAA,MAChB,CAAC,GACD,EAAQ;AAAA,IACV;AAAA,IAQI,mBAAmB;AAAA,IACnB,OAAO,EAAc;AAAA,IAErB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,SAAS;AAAA,QAAsB,QAAQ;AAAA,MAAO;AAAA,MACzD,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAsB,aAAa;AAAA,QAEjC,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,eAAe;AAAA,UACf,UAAU;AAAA,UACV,WAAW;AAAA,YACT,gBAAgB,EACd,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,YACA,oBAAoB,EAClB,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,YACA,kBAAkB,EAChB,IAAI;AAAA,cACF,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE,EACF;AAAA,UACF;AAAA,UACA,OAAO;AAAA,YACL,WAAA,MAAiB;AAAA,YACjB,SAAA,MAAe;AAAA,UACjB;AAAA,UACA,IAAI;AAAA,YACF,OAAO;AAAA,YACP,4BAA4B;AAAA,cAC1B,OAAO;AAAA,cACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,YAChE;AAAA,UACF;AAAA,UACA,OAAO,IAAe,oBAAI,KAAK,IAAe,GAAI,IAAI,oBAAI,KAAK;AAAA,QAChE,CAAA;AAAA,MACmB,CAAA;AAAA,IACjB,CAAA;AAAA,EACD,CAAA;AAEZ,GAEA,IAAe,EAAS,CAAS"}

package/dist/finstrong/components/onboarding/OnboardingBirthday.es.js

@@ -3,7 +3,7 @@ import { observer as p } from "mobx-react-lite";
 import { jsx as o } from "react/jsx-runtime";
 import { alpha as e, useTheme as d } from "@mui/material/styles";
 import h from "@mui/material/Box";
-import { AdapterDateFns as s } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as s } from "@mui/x-date-pickers/AdapterDateFns";
 import { DatePicker as c, LocalizationProvider as u } from "@mui/x-date-pickers";
 var g = ({ selectedDate: t, setSelectedDate: a }) => {
   const { finstrong: i } = m(), r = d(), n = (l) => {

package/dist/finstrong/components/onboarding/OnboardingBirthday.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"OnboardingBirthday.es.js","names":[],"sources":["../../../../src/finstrong/components/onboarding/OnboardingBirthday.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\n\nimport { useGlobalCopyStore } from '../../../common'\n\ninterface OnboardingBirthdayProps {\n  selectedDate: number | null | undefined\n  setSelectedDate: (value: number | null | undefined) => void\n}\n\nconst OnboardingBirthday = ({ selectedDate, setSelectedDate }: OnboardingBirthdayProps) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const handleChange = (date: Date | null) => {\n    setSelectedDate(Math.floor(new Date(date!).getTime() / 1000))\n  }\n\n  return (\n    <Box sx={{ p: 24 }}>\n      <LocalizationProvider dateAdapter={AdapterDateFns}>\n        <DatePicker\n          disableFuture={true}\n          label={copy.onboarding_select_date}\n          onChange={handleChange}\n          slotProps={{\n            nextIconButton: {\n              sx: {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            },\n            previousIconButton: {\n              sx: {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            },\n          }}\n          sx={{\n            width: '100%',\n            '& .MuiIconButton-edgeEnd': {\n              color: 'primary.main',\n              '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n            },\n          }}\n          value={selectedDate ? new Date(selectedDate * 1000) : null}\n        />\n      </LocalizationProvider>\n    </Box>\n  )\n}\n\nexport default observer(OnboardingBirthday)\n"],"mappings":";;;;;;;AAcA,IAAM,IAAA,CAAsB,EAAE,cAAA,GAAc,iBAAA,EAAA,MAA+C;AACzF,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,IAAQ,EAAS,GAEjB,IAAA,CAAgB,MAAsB;AAC1C,IAAA,EAAgB,KAAK,MAAM,IAAI,KAAK,CAAK,EAAE,QAAQ,IAAI,GAAI,CAAC;AAAA,EAC9D;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI,EAAE,GAAG,GAAG;AAAA,IACf,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAsB,aAAa;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,eAAe;AAAA,QACf,OAAO,EAAK;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,UACT,gBAAgB,EACd,IAAI;AAAA,YACF,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE,EACF;AAAA,UACA,oBAAoB,EAClB,IAAI;AAAA,YACF,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE,EACF;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF,OAAO;AAAA,UACP,4BAA4B;AAAA,YAC1B,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE;AAAA,QACF;AAAA,QACA,OAAO,IAAe,oBAAI,KAAK,IAAe,GAAI,IAAI;AAAA,MACvD,CAAA;AAAA,IACmB,CAAA;AAAA,EACnB,CAAA;AAET,GAEA,IAAe,EAAS,CAAkB"}
+{"version":3,"file":"OnboardingBirthday.es.js","names":[],"sources":["../../../../src/finstrong/components/onboarding/OnboardingBirthday.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\nimport { DatePicker, LocalizationProvider } from '@mui/x-date-pickers'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\n\nimport { useGlobalCopyStore } from '../../../common'\n\ninterface OnboardingBirthdayProps {\n  selectedDate: number | null | undefined\n  setSelectedDate: (value: number | null | undefined) => void\n}\n\nconst OnboardingBirthday = ({ selectedDate, setSelectedDate }: OnboardingBirthdayProps) => {\n  const { finstrong: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const handleChange = (date: Date | null) => {\n    setSelectedDate(Math.floor(new Date(date!).getTime() / 1000))\n  }\n\n  return (\n    <Box sx={{ p: 24 }}>\n      <LocalizationProvider dateAdapter={AdapterDateFns}>\n        <DatePicker\n          disableFuture={true}\n          label={copy.onboarding_select_date}\n          onChange={handleChange}\n          slotProps={{\n            nextIconButton: {\n              sx: {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            },\n            previousIconButton: {\n              sx: {\n                color: 'primary.main',\n                '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n              },\n            },\n          }}\n          sx={{\n            width: '100%',\n            '& .MuiIconButton-edgeEnd': {\n              color: 'primary.main',\n              '&:hover': { bgcolor: alpha(theme.palette.primary.light, 0.1) },\n            },\n          }}\n          value={selectedDate ? new Date(selectedDate * 1000) : null}\n        />\n      </LocalizationProvider>\n    </Box>\n  )\n}\n\nexport default observer(OnboardingBirthday)\n"],"mappings":";;;;;;;AAcA,IAAM,IAAA,CAAsB,EAAE,cAAA,GAAc,iBAAA,EAAA,MAA+C;AACzF,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,IAAQ,EAAS,GAEjB,IAAA,CAAgB,MAAsB;AAC1C,IAAA,EAAgB,KAAK,MAAM,IAAI,KAAK,CAAK,EAAE,QAAQ,IAAI,GAAI,CAAC;AAAA,EAC9D;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI,EAAE,GAAG,GAAG;AAAA,IACf,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAsB,aAAa;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,eAAe;AAAA,QACf,OAAO,EAAK;AAAA,QACZ,UAAU;AAAA,QACV,WAAW;AAAA,UACT,gBAAgB,EACd,IAAI;AAAA,YACF,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE,EACF;AAAA,UACA,oBAAoB,EAClB,IAAI;AAAA,YACF,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE,EACF;AAAA,QACF;AAAA,QACA,IAAI;AAAA,UACF,OAAO;AAAA,UACP,4BAA4B;AAAA,YAC1B,OAAO;AAAA,YACP,WAAW,EAAE,SAAS,EAAM,EAAM,QAAQ,QAAQ,OAAO,GAAG,EAAE;AAAA,UAChE;AAAA,QACF;AAAA,QACA,OAAO,IAAe,oBAAI,KAAK,IAAe,GAAI,IAAI;AAAA,MACvD,CAAA;AAAA,IACmB,CAAA;AAAA,EACnB,CAAA;AAET,GAEA,IAAe,EAAS,CAAkB"}

package/dist/goals/components/actions/BirthdayAction.es.js

@@ -6,7 +6,7 @@ import { observer as T } from "mobx-react-lite";
 import { jsx as o } from "react/jsx-runtime";
 import { fromUnixTime as s } from "date-fns/fromUnixTime";
 import { getUnixTime as v } from "date-fns/getUnixTime";
-import { AdapterDateFns as x } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as x } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as D } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker as g } from "@mui/x-date-pickers";
 import { isValid as E } from "date-fns/isValid";

package/dist/goals/components/actions/BirthdayAction.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BirthdayAction.es.js","names":[],"sources":["../../../../src/goals/components/actions/BirthdayAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { isValid } from 'date-fns/isValid'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DatePicker, DateValidationError } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { ListItemAction, useGlobalCopyStore, useGoalStore, useUserStore } from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Goal } from '../../../core'\n\ninterface BirthdayActionProps {\n  goal: Goal\n}\n\nexport const BirthdayAction = observer(({ goal }: BirthdayActionProps) => {\n  const { goals: copy } = useGlobalCopyStore()\n  const { user, updateUser } = useUserStore()\n  const { setAlert } = useGoalStore()\n\n  const [birthday, setBirthday] = React.useState<Date | null>(fromUnixTime(user.birthday ?? 0))\n  const [error, setError] = React.useState<DateValidationError>(null)\n\n  const isDisabled = goal.is_complete\n\n  const handleSave = async () => {\n    if (birthday && isValid(birthday)) {\n      await updateUser({ ...user, birthday: getUnixTime(birthday) })\n      setAlert(copy.alert_goal_updated_birthday)\n    }\n  }\n\n  return (\n    <ListItemAction\n      isDisabled={isDisabled}\n      isSaveDisabled={Boolean(error)}\n      label={copy.details_birthday}\n      onSave={handleSave}\n      primaryText={copy.details_birthday}\n      secondaryText={`${formatDate(fromUnixTime(user.birthday ?? 0), DATE_FORMATS_INTL.MONTH_DAY_YEAR)}`}\n      zeroStateText={!goal.guid && !user.birthday ? copy.add_birthday : undefined}\n    >\n      <LocalizationProvider dateAdapter={AdapterDateFns}>\n        <DatePicker\n          label={copy.details_birthday}\n          onChange={setBirthday}\n          onError={(error) => setError(error)}\n          sx={{ width: '100%' }}\n          value={birthday}\n        />\n      </LocalizationProvider>\n    </ListItemAction>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,IAAiB,EAAA,CAAU,EAAE,MAAA,EAAA,MAAgC;AACxE,QAAM,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,MAAA,GAAM,YAAA,EAAA,IAAe,EAAa,GACpC,EAAE,UAAA,EAAA,IAAa,EAAa,GAE5B,CAAC,GAAU,CAAA,IAAe,EAAM,SAAsB,EAAa,EAAK,YAAY,CAAC,CAAC,GACtF,CAAC,GAAO,CAAA,IAAY,EAAM,SAA8B,IAAI,GAE5D,IAAa,EAAK,aAElB,IAAa,YAAY;AAC7B,IAAI,KAAY,EAAQ,CAAQ,MAC9B,MAAM,EAAW;AAAA,MAAE,GAAG;AAAA,MAAM,UAAU,EAAY,CAAQ;AAAA,IAAE,CAAC,GAC7D,EAAS,EAAK,2BAA2B;AAAA,EAE7C;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACc,YAAA;AAAA,IACZ,gBAAgB,EAAQ;AAAA,IACxB,OAAO,EAAK;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa,EAAK;AAAA,IAClB,eAAe,GAAG,EAAW,EAAa,EAAK,YAAY,CAAC,GAAG,EAAkB,cAAc,CAAA;AAAA,IAC/F,eAAe,CAAC,EAAK,QAAQ,CAAC,EAAK,WAAW,EAAK,eAAe;AAAA,IAElE,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAsB,aAAa;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAO,EAAK;AAAA,QACZ,UAAU;AAAA,QACV,SAAA,CAAU,MAAU,EAAS,CAAK;AAAA,QAClC,IAAI,EAAE,OAAO,OAAO;AAAA,QACpB,OAAO;AAAA,MACR,CAAA;AAAA,IACmB,CAAA;AAAA,EACR,CAAA;AAEpB,CAAC"}
+{"version":3,"file":"BirthdayAction.es.js","names":[],"sources":["../../../../src/goals/components/actions/BirthdayAction.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { fromUnixTime } from 'date-fns/fromUnixTime'\nimport { getUnixTime } from 'date-fns/getUnixTime'\nimport { isValid } from 'date-fns/isValid'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { DatePicker, DateValidationError } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { ListItemAction, useGlobalCopyStore, useGoalStore, useUserStore } from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { Goal } from '../../../core'\n\ninterface BirthdayActionProps {\n  goal: Goal\n}\n\nexport const BirthdayAction = observer(({ goal }: BirthdayActionProps) => {\n  const { goals: copy } = useGlobalCopyStore()\n  const { user, updateUser } = useUserStore()\n  const { setAlert } = useGoalStore()\n\n  const [birthday, setBirthday] = React.useState<Date | null>(fromUnixTime(user.birthday ?? 0))\n  const [error, setError] = React.useState<DateValidationError>(null)\n\n  const isDisabled = goal.is_complete\n\n  const handleSave = async () => {\n    if (birthday && isValid(birthday)) {\n      await updateUser({ ...user, birthday: getUnixTime(birthday) })\n      setAlert(copy.alert_goal_updated_birthday)\n    }\n  }\n\n  return (\n    <ListItemAction\n      isDisabled={isDisabled}\n      isSaveDisabled={Boolean(error)}\n      label={copy.details_birthday}\n      onSave={handleSave}\n      primaryText={copy.details_birthday}\n      secondaryText={`${formatDate(fromUnixTime(user.birthday ?? 0), DATE_FORMATS_INTL.MONTH_DAY_YEAR)}`}\n      zeroStateText={!goal.guid && !user.birthday ? copy.add_birthday : undefined}\n    >\n      <LocalizationProvider dateAdapter={AdapterDateFns}>\n        <DatePicker\n          label={copy.details_birthday}\n          onChange={setBirthday}\n          onError={(error) => setError(error)}\n          sx={{ width: '100%' }}\n          value={birthday}\n        />\n      </LocalizationProvider>\n    </ListItemAction>\n  )\n})\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAa,IAAiB,EAAA,CAAU,EAAE,MAAA,EAAA,MAAgC;AACxE,QAAM,EAAE,OAAO,EAAA,IAAS,EAAmB,GACrC,EAAE,MAAA,GAAM,YAAA,EAAA,IAAe,EAAa,GACpC,EAAE,UAAA,EAAA,IAAa,EAAa,GAE5B,CAAC,GAAU,CAAA,IAAe,EAAM,SAAsB,EAAa,EAAK,YAAY,CAAC,CAAC,GACtF,CAAC,GAAO,CAAA,IAAY,EAAM,SAA8B,IAAI,GAE5D,IAAa,EAAK,aAElB,IAAa,YAAY;AAC7B,IAAI,KAAY,EAAQ,CAAQ,MAC9B,MAAM,EAAW;AAAA,MAAE,GAAG;AAAA,MAAM,UAAU,EAAY,CAAQ;AAAA,IAAE,CAAC,GAC7D,EAAS,EAAK,2BAA2B;AAAA,EAE7C;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACc,YAAA;AAAA,IACZ,gBAAgB,EAAQ;AAAA,IACxB,OAAO,EAAK;AAAA,IACZ,QAAQ;AAAA,IACR,aAAa,EAAK;AAAA,IAClB,eAAe,GAAG,EAAW,EAAa,EAAK,YAAY,CAAC,GAAG,EAAkB,cAAc,CAAA;AAAA,IAC/F,eAAe,CAAC,EAAK,QAAQ,CAAC,EAAK,WAAW,EAAK,eAAe;AAAA,IAElE,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAsB,aAAa;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAO,EAAK;AAAA,QACZ,UAAU;AAAA,QACV,SAAA,CAAU,MAAU,EAAS,CAAK;AAAA,QAClC,IAAI,EAAE,OAAO,OAAO;AAAA,QACpB,OAAO;AAAA,MACR,CAAA;AAAA,IACmB,CAAA;AAAA,EACR,CAAA;AAEpB,CAAC"}

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.d.ts

@@ -0,0 +1,16 @@
+import { InsightsPayload } from '../../../../core';
+interface DirectDepositBlockProps {
+    payload: InsightsPayload;
+    beatGuid?: string;
+}
+/**
+ * Direct Deposit component block — the shared hero visual for the Set Up
+ * Direct Deposit, Switch Direct Deposit, and Missing Interest Rate beats.
+ *
+ * The backend picks the design branch via `instance_slot.variant` and carries
+ * the account facts flat on `instance_slot` (V2 contract — no
+ * `instance_slot_data`). Everything variant-specific is flat on the layout
+ * config (`./layout.ts`); `DirectDepositCard` is a variant-agnostic hero.
+ */
+declare const DirectDepositBlock: ({ payload }: DirectDepositBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default DirectDepositBlock;

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js

@@ -0,0 +1,24 @@
+import { DepositLogo as f } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import { directDepositVariant as l, getLayoutConfig as D } from "./layout.es.js";
+import g from "../../../components/DirectDepositCard.es.js";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as _ } from "@mui/material/styles";
+var L = ({ payload: i }) => {
+  const e = _(), { instance_slot: n } = i, { account_name: a, account_type: s, institution_guid: r, institution_name: c, status_text: m, variant: u } = n, t = D(e), p = t[u] ?? t[l.SetUpDirectDeposit];
+  return /* @__PURE__ */ o(g, {
+    ...p,
+    logo: /* @__PURE__ */ o(f, {
+      iconName: "account_balance",
+      institutionName: c ?? "",
+      institutionGuid: r ?? ""
+    }),
+    name: a,
+    statusLabel: m,
+    subtitle: s
+  });
+};
+export {
+  L as default
+};
+
+//# sourceMappingURL=DirectDepositBlock.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectDepositBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/DirectDepositBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport type { InsightsPayload } from '../../../../core'\n\nimport DirectDepositCard from '../../../components/DirectDepositCard'\n\nimport { directDepositVariant, getLayoutConfig, type DirectDepositVariant } from './layout'\nimport DepositLogo from '../../../components/ComponentBlocks/DepositLogo'\n\ninterface DirectDepositBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/**\n * Direct Deposit component block — the shared hero visual for the Set Up\n * Direct Deposit, Switch Direct Deposit, and Missing Interest Rate beats.\n *\n * The backend picks the design branch via `instance_slot.variant` and carries\n * the account facts flat on `instance_slot` (V2 contract — no\n * `instance_slot_data`). Everything variant-specific is flat on the layout\n * config (`./layout.ts`); `DirectDepositCard` is a variant-agnostic hero.\n */\nconst DirectDepositBlock = ({ payload }: DirectDepositBlockProps) => {\n  const theme = useTheme()\n  const { instance_slot } = payload\n  const { account_name, account_type, institution_guid, institution_name, status_text, variant } =\n    instance_slot\n\n  const layoutConfig = getLayoutConfig(theme)\n  // Unknown backend variants degrade to the pending setup styling rather than\n  // crashing (mirrors createVariantBlock's fallback philosophy).\n  const config =\n    layoutConfig[variant as DirectDepositVariant] ??\n    layoutConfig[directDepositVariant.SetUpDirectDeposit]\n\n  return (\n    <DirectDepositCard\n      {...config}\n      logo={\n        <DepositLogo\n          iconName=\"account_balance\"\n          institutionName={institution_name ?? ''}\n          institutionGuid={institution_guid ?? ''}\n        />\n      }\n      name={account_name}\n      statusLabel={status_text}\n      subtitle={account_type}\n    />\n  )\n}\n\nexport default DirectDepositBlock\n"],"mappings":";;;;;AAuBA,IAAM,IAAA,CAAsB,EAAE,SAAA,EAAA,MAAuC;AACnE,QAAM,IAAQ,EAAS,GACjB,EAAE,eAAA,EAAA,IAAkB,GACpB,EAAE,cAAA,GAAc,cAAA,GAAc,kBAAA,GAAkB,kBAAA,GAAkB,aAAA,GAAa,SAAA,EAAA,IACnF,GAEI,IAAe,EAAgB,CAAK,GAGpC,IACJ,EAAa,CAAA,KACb,EAAa,EAAqB,kBAAA;AAEpC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,GAAI;AAAA,IACJ,MACE,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,iBAAiB,KAAoB;AAAA,MACrC,iBAAiB,KAAoB;AAAA,IACtC,CAAA;AAAA,IAEH,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACX,CAAA;AAEL"}

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/index.d.ts

@@ -0,0 +1 @@
+export { default as DirectDepositBlock } from './DirectDepositBlock';

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/layout.d.ts

@@ -0,0 +1,28 @@
+import { Theme } from '@mui/material/styles';
+import { DirectDepositCardStyleProps, DirectDepositPillConfig } from '../../../components/DirectDepositCard';
+/**
+ * Design branches of the Direct Deposit component block (Figma: "Direct
+ * Deposit" — Detailed Primary / Detailed Success / Deposit Completed):
+ *
+ * - `SetUpDirectDeposit`    — pending setup: flat `primary.lighter` slot, neutral pill
+ *   ("Direct Deposit Not Set Up").
+ * - `DirectDepositComplete` — Set Up / Switch Direct Deposit success: celebration wash +
+ *   confetti, solid success pill with a check_circle glyph ("Direct Deposit Complete").
+ * - `MissingInterestRate`   — pending rate: blue gradient slot, primary-tinted pill
+ *   ("Unknown Interest Rate (APR)%").
+ * - `InterestRateAdded`     — rate added: green gradient slot, solid success pill
+ *   ("Interest Rate: 19.99% APR").
+ */
+export declare const directDepositVariant: {
+    readonly SetUpDirectDeposit: "set_up_direct_deposit";
+    readonly DirectDepositComplete: "direct_deposit_complete";
+    readonly MissingInterestRate: "missing_interest_rate";
+    readonly InterestRateAdded: "interest_rate_added";
+};
+export type DirectDepositVariant = (typeof directDepositVariant)[keyof typeof directDepositVariant];
+export declare const NEUTRAL_PILL: DirectDepositPillConfig;
+/**
+ * Per-variant style props for `DirectDepositCard`, keyed by the backend
+ * `instance_slot.variant` (mirrors AccountBlock's `getLayoutConfig`).
+ */
+export declare const getLayoutConfig: (theme: Theme) => Record<DirectDepositVariant, DirectDepositCardStyleProps>;

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/layout.es.js

@@ -0,0 +1,63 @@
+import { WARM_LIME_ACCENT_GRADIENT as o } from "../../../components/celebrationGradients.es.js";
+var e = {
+  SetUpDirectDeposit: "set_up_direct_deposit",
+  DirectDepositComplete: "direct_deposit_complete",
+  MissingInterestRate: "missing_interest_rate",
+  InterestRateAdded: "interest_rate_added"
+}, i = {
+  light: "linear-gradient(180deg, #A0B9F8 0%, #2C64EF 100%)",
+  dark: "linear-gradient(180deg, #1F46A7 0%, #6B92F4 100%)"
+}, l = {
+  light: "linear-gradient(180deg, #94C9B7 0%, #12875E 100%)",
+  dark: "linear-gradient(180deg, #0D5F42 0%, #59AB8E 100%)"
+}, n = {
+  bgcolor: "grey.200",
+  borderColor: "grey.200",
+  labelColor: "text.primary"
+}, d = {
+  bgcolor: "primary.lighter",
+  borderColor: "primary.lighter",
+  labelColor: "text.primary"
+}, t = {
+  bgcolor: "success.main",
+  borderColor: "success.main",
+  labelColor: "success.contrastText"
+}, c = (a) => {
+  const r = a.palette.mode;
+  return {
+    [e.SetUpDirectDeposit]: {
+      bgcolor: "primary.lighter",
+      nameVariant: "body2",
+      pill: n
+    },
+    [e.DirectDepositComplete]: {
+      backgroundImage: o,
+      bgcolor: "background.paper",
+      nameVariant: "body2",
+      pill: {
+        ...t,
+        icon: "check_circle"
+      },
+      showConfetti: !0
+    },
+    [e.MissingInterestRate]: {
+      backgroundImage: i[r],
+      bgcolor: "background.paper",
+      nameVariant: "body1",
+      pill: d
+    },
+    [e.InterestRateAdded]: {
+      backgroundImage: l[r],
+      bgcolor: "background.paper",
+      nameVariant: "body1",
+      pill: t
+    }
+  };
+};
+export {
+  n as NEUTRAL_PILL,
+  e as directDepositVariant,
+  c as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

package/dist/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/layout.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/DirectDepositBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport { WARM_LIME_ACCENT_GRADIENT } from '../../../components/celebrationGradients'\nimport type {\n  DirectDepositCardStyleProps,\n  DirectDepositPillConfig,\n} from '../../../components/DirectDepositCard'\n\n/**\n * Design branches of the Direct Deposit component block (Figma: \"Direct\n * Deposit\" — Detailed Primary / Detailed Success / Deposit Completed):\n *\n * - `SetUpDirectDeposit`    — pending setup: flat `primary.lighter` slot, neutral pill\n *   (\"Direct Deposit Not Set Up\").\n * - `DirectDepositComplete` — Set Up / Switch Direct Deposit success: celebration wash +\n *   confetti, solid success pill with a check_circle glyph (\"Direct Deposit Complete\").\n * - `MissingInterestRate`   — pending rate: blue gradient slot, primary-tinted pill\n *   (\"Unknown Interest Rate (APR)%\").\n * - `InterestRateAdded`     — rate added: green gradient slot, solid success pill\n *   (\"Interest Rate: 19.99% APR\").\n */\nexport const directDepositVariant = {\n  SetUpDirectDeposit: 'set_up_direct_deposit',\n  DirectDepositComplete: 'direct_deposit_complete',\n  MissingInterestRate: 'missing_interest_rate',\n  InterestRateAdded: 'interest_rate_added',\n} as const\n\nexport type DirectDepositVariant = (typeof directDepositVariant)[keyof typeof directDepositVariant]\n\n// Figma slot gradients (opaque, vertical). Light/dark pairs are taken from the\n// light and dark pages of the Missing Interest Rates frame — they are bespoke\n// blends with no theme token, so they stay literal hexes keyed by palette mode.\nconst MISSING_RATE_GRADIENTS = {\n  light: 'linear-gradient(180deg, #A0B9F8 0%, #2C64EF 100%)',\n  dark: 'linear-gradient(180deg, #1F46A7 0%, #6B92F4 100%)',\n} as const\n\nconst RATE_ADDED_GRADIENTS = {\n  light: 'linear-gradient(180deg, #94C9B7 0%, #12875E 100%)',\n  dark: 'linear-gradient(180deg, #0D5F42 0%, #59AB8E 100%)',\n} as const\n\n// Figma light-mode references: neutral pill #ececec, primary-tinted pill\n// #dfe8fd (`primary.lighter`), solid success pill #12875e (`success.main`).\nexport const NEUTRAL_PILL: DirectDepositPillConfig = {\n  bgcolor: 'grey.200',\n  borderColor: 'grey.200',\n  labelColor: 'text.primary',\n}\n\nconst PRIMARY_TINT_PILL: DirectDepositPillConfig = {\n  bgcolor: 'primary.lighter',\n  borderColor: 'primary.lighter',\n  labelColor: 'text.primary',\n}\n\nconst SUCCESS_PILL: DirectDepositPillConfig = {\n  bgcolor: 'success.main',\n  borderColor: 'success.main',\n  labelColor: 'success.contrastText',\n}\n\n/**\n * Per-variant style props for `DirectDepositCard`, keyed by the backend\n * `instance_slot.variant` (mirrors AccountBlock's `getLayoutConfig`).\n */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<DirectDepositVariant, DirectDepositCardStyleProps> => {\n  const mode = theme.palette.mode\n\n  return {\n    [directDepositVariant.SetUpDirectDeposit]: {\n      bgcolor: 'primary.lighter',\n      nameVariant: 'body2',\n      pill: NEUTRAL_PILL,\n    },\n    [directDepositVariant.DirectDepositComplete]: {\n      backgroundImage: WARM_LIME_ACCENT_GRADIENT,\n      bgcolor: 'background.paper',\n      nameVariant: 'body2',\n      // Figma 1941:192796: 16px check_circle inside the complete pill.\n      pill: { ...SUCCESS_PILL, icon: 'check_circle' },\n      showConfetti: true,\n    },\n    [directDepositVariant.MissingInterestRate]: {\n      backgroundImage: MISSING_RATE_GRADIENTS[mode],\n      bgcolor: 'background.paper',\n      nameVariant: 'body1',\n      pill: PRIMARY_TINT_PILL,\n    },\n    [directDepositVariant.InterestRateAdded]: {\n      backgroundImage: RATE_ADDED_GRADIENTS[mode],\n      bgcolor: 'background.paper',\n      nameVariant: 'body1',\n      pill: SUCCESS_PILL,\n    },\n  }\n}\n"],"mappings":";AAqBA,IAAa,IAAuB;AAAA,EAClC,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,qBAAqB;AAAA,EACrB,mBAAmB;AACrB,GAOM,IAAyB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR,GAEM,IAAuB;AAAA,EAC3B,OAAO;AAAA,EACP,MAAM;AACR,GAIa,IAAwC;AAAA,EACnD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAEM,IAA6C;AAAA,EACjD,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAEM,IAAwC;AAAA,EAC5C,SAAS;AAAA,EACT,aAAa;AAAA,EACb,YAAY;AACd,GAMa,IAAA,CACX,MAC8D;AAC9D,QAAM,IAAO,EAAM,QAAQ;AAE3B,SAAO;AAAA,IACJ,CAAA,EAAqB,kBAAA,GAAqB;AAAA,MACzC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,IACC,CAAA,EAAqB,qBAAA,GAAwB;AAAA,MAC5C,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,aAAa;AAAA,MAEb,MAAM;AAAA,QAAE,GAAG;AAAA,QAAc,MAAM;AAAA,MAAe;AAAA,MAC9C,cAAc;AAAA,IAChB;AAAA,IACC,CAAA,EAAqB,mBAAA,GAAsB;AAAA,MAC1C,iBAAiB,EAAuB,CAAA;AAAA,MACxC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,IACC,CAAA,EAAqB,iBAAA,GAAoB;AAAA,MACxC,iBAAiB,EAAqB,CAAA;AAAA,MACtC,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM;AAAA,IACR;AAAA,EACF;AACF"}

package/dist/insights-v2/blocks/ComponentBlocks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './AccountBlock';
 export * from './AccountSwitchBlock';
+export * from './DirectDepositBlock';
 export * from './BudgetBlock';
 export * from './SaveExtraBlock';
 export * from './TransactionBlock';

package/dist/insights-v2/components/AccountHeroCard.d.ts

@@ -7,6 +7,12 @@ interface AccountHeroCardProps {
     name: ReactNode;
     /** Optional secondary line beneath the name, e.g. "Checking Account". */
     subtitle?: ReactNode;
+    /**
+     * Name typography. Figma: Set Up/Switch Direct Deposit use body2 metrics
+     * (13px / lh 16, default); Missing Interest Rate uses body1 (15px / lh 20).
+     * Both render at weight 600.
+     */
+    nameVariant?: 'body1' | 'body2';
     /** Status element beneath the text (e.g. a `<StatusPill>`). */
     status?: ReactNode;
     /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */
@@ -31,5 +37,5 @@ interface AccountHeroCardProps {
  * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit
  * (complete) Content. Scope is the Content section only.
  */
-declare const AccountHeroCard: ({ backdrop, backgroundImage, bgcolor, logo, name, status, subtitle, sx, }: AccountHeroCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccountHeroCard: ({ backdrop, backgroundImage, bgcolor, logo, name, nameVariant, status, subtitle, sx, }: AccountHeroCardProps) => import("react/jsx-runtime").JSX.Element;
 export default AccountHeroCard;

package/dist/insights-v2/components/AccountHeroCard.es.js

@@ -1,22 +1,21 @@
-import { getLogoElevation as h } from "./logoShadow.es.js";
+import { getLogoElevation as m } from "./logoShadow.es.js";
 import r from "@mui/material/Stack";
 import { Text as d } from "@mxenabled/mxui";
 import { jsx as t, jsxs as e } from "react/jsx-runtime";
 import i from "@mui/material/Box";
-var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo: p, name: c, status: a, subtitle: l, sx: x }) => /* @__PURE__ */ e(i, {
+var v = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo: p, name: c, nameVariant: x = "body2", status: a, subtitle: l, sx: h }) => /* @__PURE__ */ e(i, {
   sx: {
     alignItems: "center",
     bgcolor: s,
     ...o && { backgroundImage: o },
     display: "flex",
     flexDirection: "column",
-    overflow: "hidden",
     pb: 16,
     position: "relative",
     pt: 41,
     px: 16,
     width: "100%",
-    ...x
+    ...h
   },
   children: [n && /* @__PURE__ */ t(i, {
     "aria-hidden": !0,
@@ -31,7 +30,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
       alignItems: "center",
       bgcolor: "background.paper",
       borderRadius: "8px",
-      boxShadow: h,
+      boxShadow: m,
       gap: 16,
       pb: 16,
       position: "relative",
@@ -65,7 +64,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
         children: [/* @__PURE__ */ t(d, {
           sx: { fontWeight: 600 },
           truncate: !0,
-          variant: "body2",
+          variant: x,
           children: c
         }), l && /* @__PURE__ */ t(d, {
           color: "text.secondary",
@@ -85,7 +84,7 @@ var w = ({ backdrop: n, backgroundImage: o, bgcolor: s = "primary.lighter", logo
   })]
 });
 export {
-  w as default
+  v as default
 };
 
 //# sourceMappingURL=AccountHeroCard.es.js.map

package/dist/insights-v2/components/AccountHeroCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountHeroCard.es.js","names":[],"sources":["../../../src/insights-v2/components/AccountHeroCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { getLogoElevation } from './logoShadow'\n\n// Figma: the logo overhangs the white card's top edge by 25px and the slot pads\n// 16px above that overhang (so `pt = overhang + 16`).\nconst LOGO_OVERHANG = 25\n\ninterface AccountHeroCardProps {\n  /** Central account/institution logo, rendered overhanging the card's top edge. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Checking, *1234\". */\n  name: ReactNode\n  /** Optional secondary line beneath the name, e.g. \"Checking Account\". */\n  subtitle?: ReactNode\n  /** Status element beneath the text (e.g. a `<StatusPill>`). */\n  status?: ReactNode\n  /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */\n  backdrop?: ReactNode\n  /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,\n   * theme-aware: light-blue in light mode, navy in dark). */\n  bgcolor?: string\n  /**\n   * Optional decorative wash layered over `bgcolor` (e.g. a celebration\n   * gradient). Figma's gradient is ~20% opacity over a white base, so this is a\n   * `backgroundImage` on top of `bgcolor`, not a replacement — pass\n   * `bgcolor=\"background.paper\"` with it for the complete state.\n   */\n  backgroundImage?: string\n  sx?: SxProps\n}\n\n/**\n * A centered account hero: an overhanging institution logo above a white card\n * with a name, optional subtitle, and a status slot, over a tinted (or\n * gradient + confetti) slot.\n *\n * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit\n * (complete) Content. Scope is the Content section only.\n */\nconst AccountHeroCard = ({\n  backdrop,\n  backgroundImage,\n  bgcolor = 'primary.lighter',\n  logo,\n  name,\n  status,\n  subtitle,\n  sx,\n}: AccountHeroCardProps) => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      bgcolor,\n      ...(backgroundImage && { backgroundImage }),\n      display: 'flex',\n      flexDirection: 'column',\n      overflow: 'hidden',\n      pb: 16,\n      position: 'relative',\n      pt: LOGO_OVERHANG + 16,\n      px: 16,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    {backdrop && (\n      <Box aria-hidden={true} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n        {backdrop}\n      </Box>\n    )}\n    <Stack\n      sx={{\n        alignItems: 'center',\n        // Theme-aware card surface (white in light, dark surface in dark) — not\n        // `common.white`, which stays white and breaks dark mode.\n        bgcolor: 'background.paper',\n        borderRadius: '8px',\n        // Figma: soft card drop-shadow (0 2px 8px rgba(0,0,0,0.12)).\n        boxShadow: getLogoElevation,\n        gap: 16,\n        pb: 16,\n        position: 'relative',\n        pt: 36,\n        px: 16,\n        width: '100%',\n        zIndex: 1,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          left: '50%',\n          position: 'absolute',\n          top: -LOGO_OVERHANG,\n          transform: 'translateX(-50%)',\n        }}\n      >\n        {logo}\n      </Box>\n      <Stack sx={{ alignItems: 'center', gap: 12, minWidth: 0, width: '100%' }}>\n        <Stack sx={{ alignItems: 'center', minWidth: 0, width: '100%' }}>\n          {/* Figma name style: body2 metrics (13px / lineHeight 16) at weight\n              600. MXUI `bold` renders 700, so set fontWeight explicitly. */}\n          <Text sx={{ fontWeight: 600 }} truncate={true} variant=\"body2\">\n            {name}\n          </Text>\n          {subtitle && (\n            <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n        {/* Center the status regardless of its own alignment (StatusPill\n            defaults to `alignSelf: flex-start` for left-aligned contexts). */}\n        {status && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>{status}</Box>\n        )}\n      </Stack>\n    </Stack>\n  </Box>\n)\n\nexport default AccountHeroCard\n"],"mappings":";;;;;AA8CA,IAAM,IAAA,CAAmB,EACvB,UAAA,GACA,iBAAA,GACA,SAAA,IAAU,mBACV,MAAA,GACA,MAAA,GACA,QAAA,GACA,UAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAA;AAAA,IACA,GAAI,KAAmB,EAAE,iBAAA,EAAgB;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAdF,UAAA,CAgBG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACrE,UAAA;AAAA,EACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MAGZ,SAAS;AAAA,MACT,cAAc;AAAA,MAEd,WAAW;AAAA,MACX,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAhBF,UAAA,CAkBE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,MAAM;AAAA,QACN,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MAEC,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,UAAU;AAAA,QAAG,OAAO;AAAA,MAAO;AAAA,MAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,UAAU;AAAA,UAAG,OAAO;AAAA,QAAO;AAAA,QAA9D,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,UAAU;AAAA,UAAM,SAAQ;AAAA,UACpD,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,UAAU;AAAA,UAAM,SAAQ;AAAA,UAClD,UAAA;AAAA,QACG,CAAA,CAEH;AAAA,MAGN,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,gBAAgB;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAAI,UAAA;AAAA,MAAY,CAAA,CAEjF;AAAA,IACF,CAAA,CAAA;AAAA,EACJ,CAAA,CAAA"}
+{"version":3,"file":"AccountHeroCard.es.js","names":[],"sources":["../../../src/insights-v2/components/AccountHeroCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { getLogoElevation } from './logoShadow'\n\n// Figma: the logo overhangs the white card's top edge by 25px and the slot pads\n// 16px above that overhang (so `pt = overhang + 16`).\nconst LOGO_OVERHANG = 25\n\ninterface AccountHeroCardProps {\n  /** Central account/institution logo, rendered overhanging the card's top edge. */\n  logo: ReactNode\n  /** Primary line, e.g. \"Epic Bank Checking, *1234\". */\n  name: ReactNode\n  /** Optional secondary line beneath the name, e.g. \"Checking Account\". */\n  subtitle?: ReactNode\n  /**\n   * Name typography. Figma: Set Up/Switch Direct Deposit use body2 metrics\n   * (13px / lh 16, default); Missing Interest Rate uses body1 (15px / lh 20).\n   * Both render at weight 600.\n   */\n  nameVariant?: 'body1' | 'body2'\n  /** Status element beneath the text (e.g. a `<StatusPill>`). */\n  status?: ReactNode\n  /** Decorative backdrop behind the card (e.g. a `<Confetti>` burst). */\n  backdrop?: ReactNode\n  /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,\n   * theme-aware: light-blue in light mode, navy in dark). */\n  bgcolor?: string\n  /**\n   * Optional decorative wash layered over `bgcolor` (e.g. a celebration\n   * gradient). Figma's gradient is ~20% opacity over a white base, so this is a\n   * `backgroundImage` on top of `bgcolor`, not a replacement — pass\n   * `bgcolor=\"background.paper\"` with it for the complete state.\n   */\n  backgroundImage?: string\n  sx?: SxProps\n}\n\n/**\n * A centered account hero: an overhanging institution logo above a white card\n * with a name, optional subtitle, and a status slot, over a tinted (or\n * gradient + confetti) slot.\n *\n * Figma: Set Up Direct Deposit (default + complete) and Switch Direct Deposit\n * (complete) Content. Scope is the Content section only.\n */\nconst AccountHeroCard = ({\n  backdrop,\n  backgroundImage,\n  bgcolor = 'primary.lighter',\n  logo,\n  name,\n  nameVariant = 'body2',\n  status,\n  subtitle,\n  sx,\n}: AccountHeroCardProps) => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      bgcolor,\n      ...(backgroundImage && { backgroundImage }),\n      display: 'flex',\n      flexDirection: 'column',\n      pb: 16,\n      position: 'relative',\n      pt: LOGO_OVERHANG + 16,\n      px: 16,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    {backdrop && (\n      <Box aria-hidden={true} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n        {backdrop}\n      </Box>\n    )}\n    <Stack\n      sx={{\n        alignItems: 'center',\n        // Theme-aware card surface (white in light, dark surface in dark) — not\n        // `common.white`, which stays white and breaks dark mode.\n        bgcolor: 'background.paper',\n        borderRadius: '8px',\n        // Figma: soft card drop-shadow (0 2px 8px rgba(0,0,0,0.12)).\n        boxShadow: getLogoElevation,\n        gap: 16,\n        pb: 16,\n        position: 'relative',\n        pt: 36,\n        px: 16,\n        width: '100%',\n        zIndex: 1,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'flex',\n          left: '50%',\n          position: 'absolute',\n          top: -LOGO_OVERHANG,\n          transform: 'translateX(-50%)',\n        }}\n      >\n        {logo}\n      </Box>\n      <Stack sx={{ alignItems: 'center', gap: 12, minWidth: 0, width: '100%' }}>\n        <Stack sx={{ alignItems: 'center', minWidth: 0, width: '100%' }}>\n          {/* Figma name style: body2 (13/16) or body1 (15/20) metrics at weight\n              600. MXUI `bold` renders 700, so set fontWeight explicitly. */}\n          <Text sx={{ fontWeight: 600 }} truncate={true} variant={nameVariant}>\n            {name}\n          </Text>\n          {subtitle && (\n            <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n              {subtitle}\n            </Text>\n          )}\n        </Stack>\n        {/* Center the status regardless of its own alignment (StatusPill\n            defaults to `alignSelf: flex-start` for left-aligned contexts). */}\n        {status && (\n          <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>{status}</Box>\n        )}\n      </Stack>\n    </Stack>\n  </Box>\n)\n\nexport default AccountHeroCard\n"],"mappings":";;;;;AAoDA,IAAM,IAAA,CAAmB,EACvB,UAAA,GACA,iBAAA,GACA,SAAA,IAAU,mBACV,MAAA,GACA,MAAA,GACA,aAAA,IAAc,SACd,QAAA,GACA,UAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAA;AAAA,IACA,GAAI,KAAmB,EAAE,iBAAA,EAAgB;AAAA,IACzC,SAAS;AAAA,IACT,eAAe;AAAA,IACf,IAAI;AAAA,IACJ,UAAU;AAAA,IACV,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAbF,UAAA,CAeG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACrE,UAAA;AAAA,EACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MAGZ,SAAS;AAAA,MACT,cAAc;AAAA,MAEd,WAAW;AAAA,MACX,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,IACV;AAAA,IAhBF,UAAA,CAkBE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,MAAM;AAAA,QACN,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,MACb;AAAA,MAEC,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,UAAU;AAAA,QAAG,OAAO;AAAA,MAAO;AAAA,MAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,UAAU;AAAA,UAAG,OAAO;AAAA,QAAO;AAAA,QAA9D,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,UAAU;AAAA,UAAM,SAAS;AAAA,UACrD,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAiB,UAAU;AAAA,UAAM,SAAQ;AAAA,UAClD,UAAA;AAAA,QACG,CAAA,CAEH;AAAA,MAGN,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,gBAAgB;AAAA,UAAU,OAAO;AAAA,QAAO;AAAA,QAAI,UAAA;AAAA,MAAY,CAAA,CAEjF;AAAA,IACF,CAAA,CAAA;AAAA,EACJ,CAAA,CAAA"}

package/dist/insights-v2/components/DirectDepositCard.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+export interface DirectDepositPillConfig {
+    /** Pill background color token. */
+    bgcolor: string;
+    /** Pill border color token. */
+    borderColor: string;
+    /** Pill label color token. */
+    labelColor: string;
+    /** Optional mx-icons glyph rendered before the label (e.g. `check_circle`). */
+    icon?: string;
+}
+/**
+ * Style props for the card. Variant-specific values live in the Direct Deposit
+ * block's `layout.ts` (`getLayoutConfig`) — the card itself is variant-agnostic.
+ */
+export interface DirectDepositCardStyleProps {
+    /** Slot surface token behind the white hero card. Default `primary.lighter`. */
+    bgcolor?: string;
+    /** Decorative wash layered over `bgcolor` (celebration/gradient slots). */
+    backgroundImage?: string;
+    /** Confetti burst behind the hero card (complete states). */
+    showConfetti?: boolean;
+    /** Hero name typography. Default `body2` (13/16); rate variants use `body1` (15/20). */
+    nameVariant?: 'body1' | 'body2';
+    /** Status pill color tokens + optional leading glyph. */
+    pill?: DirectDepositPillConfig;
+}
+interface DirectDepositCardProps extends DirectDepositCardStyleProps {
+    /** Institution/account logo, rendered overhanging the hero card's top edge. */
+    logo: ReactNode;
+    /** Primary line, e.g. "Epic Bank Checking, *1234". */
+    name: ReactNode;
+    /** Optional secondary line, e.g. "Checking Account" / "Credit Card". */
+    subtitle?: ReactNode;
+    /** Optional status pill label, e.g. "Direct Deposit Not Set Up". */
+    statusLabel?: ReactNode;
+}
+/**
+ * The basic Direct Deposit hero card: an overhanging logo above a white card
+ * with a name, optional subtitle, and a status pill, over a tinted/gradient
+ * slot with an optional confetti backdrop.
+ *
+ * Purely presentational — it knows nothing about beats or variants. The Direct
+ * Deposit block resolves `instance_slot.variant` to these style props via its
+ * `layout.ts` (`getLayoutConfig`).
+ */
+declare const DirectDepositCard: ({ backgroundImage, bgcolor, logo, name, nameVariant, pill, showConfetti, statusLabel, subtitle, }: DirectDepositCardProps) => import("react/jsx-runtime").JSX.Element;
+export default DirectDepositCard;