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

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [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)

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/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/investments/components/HoldingTable.es.js

@@ -195,7 +195,7 @@ var O = ({ data: u, editingHoldingId: m, currentEditedCostBasis: x, handleCostBa
       disableRowSelectionOnClick: !0,
       hideFooter: !0,
       rows: u,
-      slotProps: { baseIconButton: { sx: { display: "none" } } }
+      slotProps: { baseIconButton: { material: { sx: { display: "none" } } } }
     })
   });
 };

package/dist/investments/components/HoldingTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoldingTable.es.js","names":[],"sources":["../../../src/investments/components/HoldingTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport Paper from '@mui/material/Paper'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport { useTheme } from '@mui/material/styles'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { HeaderCell } from './HeaderCell'\n\ninterface HoldingDetail {\n  id: string\n  description: string\n  qty: number\n  holding: string\n  costBasis: number\n  rawCostBasis: number\n  totalGainLoss: number\n  gainLossAvailable: boolean\n  gainLossBasis: number\n  marketValue: number\n}\n\ninterface HoldingsTableProps {\n  data: HoldingDetail[]\n  editingHoldingId: string | null\n  currentEditedCostBasis: string\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  handleCostBasisBlur: (id: string) => void\n}\n\nconst HoldingsTable: React.FC<HoldingsTableProps> = ({\n  data,\n  editingHoldingId,\n  currentEditedCostBasis,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  handleCostBasisBlur,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n  const gainDisplayColor = 'success.main'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const gainLossDisplayColor = (value: number, type: string = 'lesserThan') => {\n    if (type === 'greaterThan') {\n      return value >= 0 ? gainDisplayColor : lossDisplayColor\n    }\n    return value <= 0 ? lossDisplayColor : gainDisplayColor\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'qty',\n      headerName: copy.overview.qty_header,\n      sortable: false,\n      width: 48,\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'holding',\n      headerName: copy.overview.holding_header,\n      flex: 1,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Stack sx={{ alignItems: 'center', gap: 16, flexDirection: 'row' }}>\n          <Stack>\n            {/* TODO :InstitutionLogo in future */}\n            <Text sx={{ fontWeight: 700 }}>{params.row.holding}</Text>\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"tiny\">\n              {params.row.description}\n            </Text>\n          </Stack>\n        </Stack>\n      ),\n    },\n    {\n      field: 'costBasis',\n      headerName: copy.overview.cost_basis_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const isCurrentlyEditing = editingHoldingId === params.row.id\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isCurrentlyEditing ? (\n              <TextField\n                autoFocus={true}\n                onBlur={() => handleCostBasisBlur(params.row.id)}\n                onChange={handleCostBasisChange}\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                  handleCostBasisKeyDown(e, params.row.id)\n                }\n                size=\"small\"\n                sx={{\n                  fontSize: 14,\n                  width: 57,\n                  '& .MuiInputBase-input': {\n                    padding: '4px 0',\n                    textAlign: 'center',\n                    fontWeight: 600,\n                    color: 'text.primary',\n                  },\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    border: 'none',\n                  },\n                }}\n                value={currentEditedCostBasis}\n              />\n            ) : (\n              <Text sx={{ fontSize: 14, width: 57 }} variant=\"body2\">\n                {params.row.gainLossAvailable\n                  ? params.value?.toLocaleString('en-US', {\n                      currency: 'USD',\n                      maximumFractionDigits: 2,\n                      minimumFractionDigits: 2,\n                      style: 'currency',\n                    })\n                  : '—'}\n              </Text>\n            )}\n            <IconButton\n              onClick={() => handleCostBasisClick(params.row.id, params.row.rawCostBasis)}\n              sx={{ minWidth: 12, minHeight: 12 }}\n            >\n              <Icon name={'stylus'} size={12} sx={{ color: 'grey.700' }} />\n            </IconButton>\n          </Stack>\n        )\n      },\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'totalGainLoss',\n      headerName: copy.overview.total_gain_loss_header,\n      width: 196,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const gainLossBasis = params.row.gainLossBasis\n        const gainLossPercentage = gainLossBasis\n          ? (params.row.totalGainLoss / gainLossBasis) * 100\n          : 0\n        // No known cost basis — show \"—\" instead of a fabricated 0/100%.\n        if (!params.row.gainLossAvailable) {\n          return (\n            <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n              —\n            </Text>\n          )\n        }\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>\n            {params.value !== 0 && (\n              <Icon\n                name={params.value > 0 ? 'trending_up' : 'trending_down'}\n                size={16}\n                sx={{\n                  color: gainLossDisplayColor(params.value),\n                  mr: 1,\n                  verticalAlign: 'middle',\n                }}\n              />\n            )}\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {gainLossBasis ? `${gainLossPercentage.toFixed(2)}%` : '0.00%'}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n              |\n            </Text>\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {Math.abs(params.value).toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        )\n      },\n      align: 'right',\n      headerAlign: 'right',\n      sortable: false,\n    },\n    {\n      field: 'marketValue',\n      headerName: copy.overview.market_value_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text sx={{ fontWeight: 700 }} variant={'body2'}>\n          {params.value?.toLocaleString('en-US', {\n            currency: 'USD',\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            style: 'currency',\n          })}\n        </Text>\n      ),\n      align: 'right',\n      headerAlign: 'right',\n    },\n  ]\n\n  return (\n    <Paper\n      sx={{\n        boxShadow: 'none',\n        width: '100%',\n      }}\n    >\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        disableRowSelectionOnClick={true}\n        hideFooter={true}\n        rows={data}\n        slotProps={{ baseIconButton: { sx: { display: 'none' } } }}\n      />\n    </Paper>\n  )\n}\n\nexport default HoldingsTable\n"],"mappings":"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"}
+{"version":3,"file":"HoldingTable.es.js","names":[],"sources":["../../../src/investments/components/HoldingTable.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport Paper from '@mui/material/Paper'\nimport IconButton from '@mui/material/IconButton'\nimport TextField from '@mui/material/TextField'\nimport { useTheme } from '@mui/material/styles'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { HeaderCell } from './HeaderCell'\n\ninterface HoldingDetail {\n  id: string\n  description: string\n  qty: number\n  holding: string\n  costBasis: number\n  rawCostBasis: number\n  totalGainLoss: number\n  gainLossAvailable: boolean\n  gainLossBasis: number\n  marketValue: number\n}\n\ninterface HoldingsTableProps {\n  data: HoldingDetail[]\n  editingHoldingId: string | null\n  currentEditedCostBasis: string\n  handleCostBasisClick: (holdingId: string, currentCostBasis: number) => void\n  handleCostBasisChange: (event: React.ChangeEvent<HTMLInputElement>) => void\n  handleCostBasisKeyDown: (event: React.KeyboardEvent<HTMLInputElement>, id: string) => void\n  handleCostBasisBlur: (id: string) => void\n}\n\nconst HoldingsTable: React.FC<HoldingsTableProps> = ({\n  data,\n  editingHoldingId,\n  currentEditedCostBasis,\n  handleCostBasisClick,\n  handleCostBasisChange,\n  handleCostBasisKeyDown,\n  handleCostBasisBlur,\n}) => {\n  const { investments: copy } = useGlobalCopyStore()\n  const theme = useTheme()\n\n  const isDarkMode = theme.palette.mode === 'dark'\n  const gainDisplayColor = 'success.main'\n  const lossDisplayColor = isDarkMode ? 'grey.300' : 'grey.700'\n\n  const gainLossDisplayColor = (value: number, type: string = 'lesserThan') => {\n    if (type === 'greaterThan') {\n      return value >= 0 ? gainDisplayColor : lossDisplayColor\n    }\n    return value <= 0 ? lossDisplayColor : gainDisplayColor\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'qty',\n      headerName: copy.overview.qty_header,\n      sortable: false,\n      width: 48,\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'holding',\n      headerName: copy.overview.holding_header,\n      flex: 1,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Stack sx={{ alignItems: 'center', gap: 16, flexDirection: 'row' }}>\n          <Stack>\n            {/* TODO :InstitutionLogo in future */}\n            <Text sx={{ fontWeight: 700 }}>{params.row.holding}</Text>\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"tiny\">\n              {params.row.description}\n            </Text>\n          </Stack>\n        </Stack>\n      ),\n    },\n    {\n      field: 'costBasis',\n      headerName: copy.overview.cost_basis_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const isCurrentlyEditing = editingHoldingId === params.row.id\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isCurrentlyEditing ? (\n              <TextField\n                autoFocus={true}\n                onBlur={() => handleCostBasisBlur(params.row.id)}\n                onChange={handleCostBasisChange}\n                onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) =>\n                  handleCostBasisKeyDown(e, params.row.id)\n                }\n                size=\"small\"\n                sx={{\n                  fontSize: 14,\n                  width: 57,\n                  '& .MuiInputBase-input': {\n                    padding: '4px 0',\n                    textAlign: 'center',\n                    fontWeight: 600,\n                    color: 'text.primary',\n                  },\n                  '& .MuiOutlinedInput-notchedOutline': {\n                    border: 'none',\n                  },\n                }}\n                value={currentEditedCostBasis}\n              />\n            ) : (\n              <Text sx={{ fontSize: 14, width: 57 }} variant=\"body2\">\n                {params.row.gainLossAvailable\n                  ? params.value?.toLocaleString('en-US', {\n                      currency: 'USD',\n                      maximumFractionDigits: 2,\n                      minimumFractionDigits: 2,\n                      style: 'currency',\n                    })\n                  : '—'}\n              </Text>\n            )}\n            <IconButton\n              onClick={() => handleCostBasisClick(params.row.id, params.row.rawCostBasis)}\n              sx={{ minWidth: 12, minHeight: 12 }}\n            >\n              <Icon name={'stylus'} size={12} sx={{ color: 'grey.700' }} />\n            </IconButton>\n          </Stack>\n        )\n      },\n      align: 'center',\n      headerAlign: 'center',\n    },\n    {\n      field: 'totalGainLoss',\n      headerName: copy.overview.total_gain_loss_header,\n      width: 196,\n      renderHeader: HeaderCell,\n      renderCell: (params) => {\n        const gainLossBasis = params.row.gainLossBasis\n        const gainLossPercentage = gainLossBasis\n          ? (params.row.totalGainLoss / gainLossBasis) * 100\n          : 0\n        // No known cost basis — show \"—\" instead of a fabricated 0/100%.\n        if (!params.row.gainLossAvailable) {\n          return (\n            <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n              —\n            </Text>\n          )\n        }\n        return (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 2 }}>\n            {params.value !== 0 && (\n              <Icon\n                name={params.value > 0 ? 'trending_up' : 'trending_down'}\n                size={16}\n                sx={{\n                  color: gainLossDisplayColor(params.value),\n                  mr: 1,\n                  verticalAlign: 'middle',\n                }}\n              />\n            )}\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {gainLossBasis ? `${gainLossPercentage.toFixed(2)}%` : '0.00%'}\n            </Text>\n            <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n              |\n            </Text>\n            <Text\n              sx={{\n                color: gainLossDisplayColor(params.value),\n                fontWeight: params.value > 0 ? 700 : 400,\n              }}\n              variant=\"body2\"\n            >\n              {Math.abs(params.value).toLocaleString('en-US', {\n                currency: 'USD',\n                maximumFractionDigits: 2,\n                minimumFractionDigits: 2,\n                style: 'currency',\n              })}\n            </Text>\n          </Stack>\n        )\n      },\n      align: 'right',\n      headerAlign: 'right',\n      sortable: false,\n    },\n    {\n      field: 'marketValue',\n      headerName: copy.overview.market_value_header,\n      width: 132,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (\n        <Text sx={{ fontWeight: 700 }} variant={'body2'}>\n          {params.value?.toLocaleString('en-US', {\n            currency: 'USD',\n            maximumFractionDigits: 2,\n            minimumFractionDigits: 2,\n            style: 'currency',\n          })}\n        </Text>\n      ),\n      align: 'right',\n      headerAlign: 'right',\n    },\n  ]\n\n  return (\n    <Paper\n      sx={{\n        boxShadow: 'none',\n        width: '100%',\n      }}\n    >\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        disableRowSelectionOnClick={true}\n        hideFooter={true}\n        rows={data}\n        slotProps={{ baseIconButton: { material: { sx: { display: 'none' } } } }}\n      />\n    </Paper>\n  )\n}\n\nexport default HoldingsTable\n"],"mappings":"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"}

package/dist/recurringtransactions/components/PaymentSchedule.es.js

@@ -9,7 +9,7 @@ import { jsx as t, jsxs as T } from "react/jsx-runtime";
 import { addYears as _ } from "date-fns/addYears";
 import { subDays as Y } from "date-fns/subDays";
 import { setDayOfYear as x } from "date-fns/setDayOfYear";
-import { AdapterDateFns as D } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as D } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as C } from "@mui/x-date-pickers/LocalizationProvider";
 import { getDayOfYear as W } from "date-fns/getDayOfYear";
 import { DatePicker as P } from "@mui/x-date-pickers";

package/dist/recurringtransactions/components/PaymentSchedule.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentSchedule.es.js","names":[],"sources":["../../../src/recurringtransactions/components/PaymentSchedule.tsx"],"sourcesContent":["import React from 'react'\nimport { addYears } from 'date-fns/addYears'\nimport { getDayOfYear } from 'date-fns/getDayOfYear'\nimport { setDayOfYear } from 'date-fns/setDayOfYear'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Stack from '@mui/material/Stack'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { Select, useGlobalCopyStore } from '../../common'\nimport { Frequency } from '../../core'\nimport { formatOrdinal } from '../../core/utils/NumberFormatting'\n\ninterface PaymentScheduleProps {\n  frequency: Frequency\n  firstDay: number\n  secondDay?: number\n  onFrequencyChange: (frequency: Frequency) => void\n  onFirstDayChange: (day: number) => void\n  onSecondDayChange: (day: number) => void\n}\n\nexport const PaymentSchedule = ({\n  frequency,\n  firstDay,\n  secondDay,\n  onFrequencyChange,\n  onFirstDayChange,\n  onSecondDayChange,\n}: PaymentScheduleProps) => {\n  const { recurring: copy } = useGlobalCopyStore()\n\n  const frequencies = React.useMemo(\n    () => [\n      { id: Frequency.EveryWeek, label: copy.frequency_every_week },\n      { id: Frequency.EveryOtherWeek, label: copy.frequency_every_other_week },\n      { id: Frequency.TwiceAMonth, label: copy.frequency_twice_a_month },\n      { id: Frequency.EveryMonth, label: copy.frequency_every_month },\n      { id: Frequency.EveryOtherMonth, label: copy.frequency_every_other_month },\n      { id: Frequency.EveryQuarter, label: copy.frequency_every_quarter },\n      { id: Frequency.EveryOtherQuarter, label: copy.frequency_every_other_quarter },\n      { id: Frequency.EveryYear, label: copy.frequency_every_year },\n    ],\n    [copy],\n  )\n\n  const daysOfWeek = [\n    { id: 0, label: copy.weekday_sunday },\n    { id: 1, label: copy.weekday_monday },\n    { id: 2, label: copy.weekday_tuesday },\n    { id: 3, label: copy.weekday_wednesday },\n    { id: 4, label: copy.weekday_thursday },\n    { id: 5, label: copy.weekday_friday },\n    { id: 6, label: copy.weekday_saturday },\n  ]\n\n  const daysOfMonth = [...Array(31).keys()].map((day) => ({\n    id: day + 1,\n    label: formatOrdinal(day + 1),\n  }))\n  daysOfMonth[30].label += ` (${copy.last_day_of_month})`\n\n  const beginDaysOfMonth = daysOfMonth.slice(0, 15)\n  const endDaysOfMonth = daysOfMonth.slice(14)\n\n  const weeklyType = frequency === Frequency.EveryWeek || frequency === Frequency.EveryOtherWeek\n  const monthlyType =\n    frequency === Frequency.TwiceAMonth ||\n    frequency === Frequency.EveryMonth ||\n    frequency === Frequency.EveryOtherMonth ||\n    frequency === Frequency.EveryQuarter ||\n    frequency === Frequency.EveryOtherQuarter\n\n  const tempDayOfYear = setDayOfYear(startOfToday(), firstDay)\n  const dayOfYear = tempDayOfYear < startOfToday() ? addYears(tempDayOfYear, 1) : tempDayOfYear\n\n  const handleYearlyChange = (date: Date | null) => {\n    if (date) {\n      onFirstDayChange(getDayOfYear(date))\n    }\n  }\n\n  return (\n    <Stack gap={24} sx={{ m: 24 }}>\n      <Select\n        label={copy.frequency}\n        onChange={onFrequencyChange}\n        options={frequencies}\n        value={frequency}\n      />\n      {weeklyType && (\n        <Select\n          label={copy.day_of_the_week}\n          onChange={onFirstDayChange}\n          options={daysOfWeek}\n          value={firstDay}\n        />\n      )}\n      {monthlyType && (\n        <Select\n          label={\n            frequency === Frequency.TwiceAMonth\n              ? copy.first_day_of_the_month\n              : copy.day_of_the_month\n          }\n          onChange={onFirstDayChange}\n          options={frequency === Frequency.TwiceAMonth ? beginDaysOfMonth : daysOfMonth}\n          value={firstDay}\n        />\n      )}\n      {frequency === Frequency.TwiceAMonth && (\n        <Select\n          label={copy.second_day_of_the_month}\n          onChange={onSecondDayChange}\n          options={endDaysOfMonth}\n          value={secondDay ?? ''}\n        />\n      )}\n      {frequency === Frequency.EveryYear && (\n        <LocalizationProvider dateAdapter={AdapterDateFns}>\n          <DatePicker\n            disablePast={true}\n            label={copy.next_payment_date}\n            maxDate={subDays(addYears(startOfToday(), 1), 1)}\n            minDate={startOfToday()}\n            onChange={handleYearlyChange}\n            value={dayOfYear}\n          />\n        </LocalizationProvider>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"PaymentSchedule.es.js","names":[],"sources":["../../../src/recurringtransactions/components/PaymentSchedule.tsx"],"sourcesContent":["import React from 'react'\nimport { addYears } from 'date-fns/addYears'\nimport { getDayOfYear } from 'date-fns/getDayOfYear'\nimport { setDayOfYear } from 'date-fns/setDayOfYear'\nimport { startOfToday } from 'date-fns/startOfToday'\nimport { subDays } from 'date-fns/subDays'\n\nimport Stack from '@mui/material/Stack'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { Select, useGlobalCopyStore } from '../../common'\nimport { Frequency } from '../../core'\nimport { formatOrdinal } from '../../core/utils/NumberFormatting'\n\ninterface PaymentScheduleProps {\n  frequency: Frequency\n  firstDay: number\n  secondDay?: number\n  onFrequencyChange: (frequency: Frequency) => void\n  onFirstDayChange: (day: number) => void\n  onSecondDayChange: (day: number) => void\n}\n\nexport const PaymentSchedule = ({\n  frequency,\n  firstDay,\n  secondDay,\n  onFrequencyChange,\n  onFirstDayChange,\n  onSecondDayChange,\n}: PaymentScheduleProps) => {\n  const { recurring: copy } = useGlobalCopyStore()\n\n  const frequencies = React.useMemo(\n    () => [\n      { id: Frequency.EveryWeek, label: copy.frequency_every_week },\n      { id: Frequency.EveryOtherWeek, label: copy.frequency_every_other_week },\n      { id: Frequency.TwiceAMonth, label: copy.frequency_twice_a_month },\n      { id: Frequency.EveryMonth, label: copy.frequency_every_month },\n      { id: Frequency.EveryOtherMonth, label: copy.frequency_every_other_month },\n      { id: Frequency.EveryQuarter, label: copy.frequency_every_quarter },\n      { id: Frequency.EveryOtherQuarter, label: copy.frequency_every_other_quarter },\n      { id: Frequency.EveryYear, label: copy.frequency_every_year },\n    ],\n    [copy],\n  )\n\n  const daysOfWeek = [\n    { id: 0, label: copy.weekday_sunday },\n    { id: 1, label: copy.weekday_monday },\n    { id: 2, label: copy.weekday_tuesday },\n    { id: 3, label: copy.weekday_wednesday },\n    { id: 4, label: copy.weekday_thursday },\n    { id: 5, label: copy.weekday_friday },\n    { id: 6, label: copy.weekday_saturday },\n  ]\n\n  const daysOfMonth = [...Array(31).keys()].map((day) => ({\n    id: day + 1,\n    label: formatOrdinal(day + 1),\n  }))\n  daysOfMonth[30].label += ` (${copy.last_day_of_month})`\n\n  const beginDaysOfMonth = daysOfMonth.slice(0, 15)\n  const endDaysOfMonth = daysOfMonth.slice(14)\n\n  const weeklyType = frequency === Frequency.EveryWeek || frequency === Frequency.EveryOtherWeek\n  const monthlyType =\n    frequency === Frequency.TwiceAMonth ||\n    frequency === Frequency.EveryMonth ||\n    frequency === Frequency.EveryOtherMonth ||\n    frequency === Frequency.EveryQuarter ||\n    frequency === Frequency.EveryOtherQuarter\n\n  const tempDayOfYear = setDayOfYear(startOfToday(), firstDay)\n  const dayOfYear = tempDayOfYear < startOfToday() ? addYears(tempDayOfYear, 1) : tempDayOfYear\n\n  const handleYearlyChange = (date: Date | null) => {\n    if (date) {\n      onFirstDayChange(getDayOfYear(date))\n    }\n  }\n\n  return (\n    <Stack gap={24} sx={{ m: 24 }}>\n      <Select\n        label={copy.frequency}\n        onChange={onFrequencyChange}\n        options={frequencies}\n        value={frequency}\n      />\n      {weeklyType && (\n        <Select\n          label={copy.day_of_the_week}\n          onChange={onFirstDayChange}\n          options={daysOfWeek}\n          value={firstDay}\n        />\n      )}\n      {monthlyType && (\n        <Select\n          label={\n            frequency === Frequency.TwiceAMonth\n              ? copy.first_day_of_the_month\n              : copy.day_of_the_month\n          }\n          onChange={onFirstDayChange}\n          options={frequency === Frequency.TwiceAMonth ? beginDaysOfMonth : daysOfMonth}\n          value={firstDay}\n        />\n      )}\n      {frequency === Frequency.TwiceAMonth && (\n        <Select\n          label={copy.second_day_of_the_month}\n          onChange={onSecondDayChange}\n          options={endDaysOfMonth}\n          value={secondDay ?? ''}\n        />\n      )}\n      {frequency === Frequency.EveryYear && (\n        <LocalizationProvider dateAdapter={AdapterDateFns}>\n          <DatePicker\n            disablePast={true}\n            label={copy.next_payment_date}\n            maxDate={subDays(addYears(startOfToday(), 1), 1)}\n            minDate={startOfToday()}\n            onChange={handleYearlyChange}\n            value={dayOfYear}\n          />\n        </LocalizationProvider>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/recurringtransactions/components/recurrencecalendar/RecurrenceCalendar.es.js

@@ -12,7 +12,7 @@ import { endOfMonth as x } from "date-fns/endOfMonth";
 import { startOfMonth as l } from "date-fns/startOfMonth";
 import { jsx as o, jsxs as H } from "react/jsx-runtime";
 import { useTheme as _ } from "@mui/material/styles";
-import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as k } from "@mui/x-date-pickers/AdapterDateFns";
 import { DateCalendar as w } from "@mui/x-date-pickers/DateCalendar";
 import { LocalizationProvider as F } from "@mui/x-date-pickers/LocalizationProvider";
 import { getWeeksInMonth as c } from "date-fns/getWeeksInMonth";

package/dist/recurringtransactions/components/recurrencecalendar/RecurrenceCalendar.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurrenceCalendar.es.js","names":[],"sources":["../../../../src/recurringtransactions/components/recurrencecalendar/RecurrenceCalendar.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { getWeeksInMonth } from 'date-fns/getWeeksInMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { Locale } from 'date-fns'\nimport { enCA } from 'date-fns/locale/en-CA'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { es } from 'date-fns/locale/es'\nimport { fr } from 'date-fns/locale/fr'\nimport { frCA } from 'date-fns/locale/fr-CA'\n\nimport { Text } from '@mxenabled/mxui'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport {\n  ANALYTICS_EVENTS,\n  TOUCH_TARGET,\n  useEvent,\n  useRecurringTransactionsStore,\n  useGlobalCopyStore,\n} from '../../../common'\nimport { getLocale, LOCALES } from '../../../core'\n\nimport { RecurrenceDay } from './RecurrenceDay'\nimport { Legend } from './Legend'\n\nconst HEADER_HEIGHT = 58\n\nconst getDateFnsLocale = () => {\n  const locale = getLocale()\n  const localeMap: Record<string, Locale> = {\n    [LOCALES.EN_US]: enUS,\n    [LOCALES.EN_CA]: enCA,\n    [LOCALES.FR]: fr,\n    [LOCALES.FR_CA]: frCA,\n    [LOCALES.ES]: es,\n  }\n  return localeMap[locale] || enUS\n}\n\nexport const RecurrenceCalendar = observer(() => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { recurring: copy } = useGlobalCopyStore()\n  const { selectedDay, setDateRange } = useRecurringTransactionsStore()\n  const [calendarHeight, setCalendarHeight] = React.useState(\n    getWeeksInMonth(new Date()) * TOUCH_TARGET + HEADER_HEIGHT,\n  )\n\n  const handleMonthChange = (date: Date) => {\n    setCalendarHeight(getWeeksInMonth(date) * TOUCH_TARGET + HEADER_HEIGHT)\n    setDateRange({\n      start: startOfMonth(date),\n      end: endOfMonth(date),\n    })\n    handleDateChange(date)\n    onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT)\n  }\n\n  const handleDateChange = (date: Date | null) => {\n    if (!date) return\n\n    requestAnimationFrame(() => {\n      const recurrenceList = document.getElementById('recurrence-list')\n      recurrenceList?.setAttribute('tabindex', '-1')\n      recurrenceList?.focus()\n    })\n  }\n\n  const calendar = (\n    <DateCalendar\n      minDate={startOfMonth(new Date())}\n      onChange={handleDateChange}\n      onMonthChange={handleMonthChange}\n      showDaysOutsideCurrentMonth={true}\n      slots={{\n        day: RecurrenceDay,\n      }}\n      sx={{\n        '& .MuiPickersArrowSwitcher-button': {\n          color: 'primary.main',\n          '&:disabled': {\n            color: 'action.disabled',\n          },\n        },\n        '& .MuiButtonBase-root.MuiPickersDay-root': {\n          borderRadius: '4px',\n          '&:focus, &:hover': {\n            borderRadius: '4px',\n          },\n        },\n        '& .MuiPickersCalendarHeader-root': {\n          mt: 0,\n          pl: 16,\n          pr: 8,\n        },\n        '& .MuiPickersCalendarHeader-label': {\n          fontFamily: theme.typography.body1.fontFamily,\n          fontSize: theme.typography.body1.fontSize,\n          fontWeight: 600,\n        },\n        '& .MuiDayCalendar-slideTransition': {\n          minHeight: calendarHeight,\n        },\n        '&.MuiDateCalendar-root': {\n          minHeight: calendarHeight + TOUCH_TARGET,\n        },\n        '& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel': {\n          height: TOUCH_TARGET,\n          width: TOUCH_TARGET,\n          margin: 0,\n        },\n        '& .MuiDayCalendar-weekDayLabel': {\n          fontFamily: theme.typography.h3.fontFamily,\n          fontSize: theme.typography.body2.fontSize,\n        },\n        '& .MuiPickersDay-dayOutsideMonth': {\n          color: 'text.secondary',\n        },\n        textTransform: 'capitalize',\n      }}\n      value={selectedDay}\n      views={['day']}\n    />\n  )\n\n  return (\n    <Stack aria-labelledby=\"calendar-label\" justifyContent=\"center\" role=\"group\">\n      <LocalizationProvider adapterLocale={getDateFnsLocale()} dateAdapter={AdapterDateFns}>\n        {/*NOTE: This seems odd, but because the DateCalendar cannot go from a controlled\n         /*      calendar to an un-controlled calendar, we have to create 2 different instances\n         /*      when there a selectedDay and when selectedDay is undefined */}\n        {selectedDay && calendar}\n        {!selectedDay && calendar}\n\n        <Text id=\"calendar-label\" sx={{ alignSelf: 'center' }} variant=\"body2\">\n          {copy.calendar_tooltip}\n        </Text>\n        <Legend />\n      </LocalizationProvider>\n    </Stack>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"RecurrenceCalendar.es.js","names":[],"sources":["../../../../src/recurringtransactions/components/recurrencecalendar/RecurrenceCalendar.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { getWeeksInMonth } from 'date-fns/getWeeksInMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\nimport { Locale } from 'date-fns'\nimport { enCA } from 'date-fns/locale/en-CA'\nimport { enUS } from 'date-fns/locale/en-US'\nimport { es } from 'date-fns/locale/es'\nimport { fr } from 'date-fns/locale/fr'\nimport { frCA } from 'date-fns/locale/fr-CA'\n\nimport { Text } from '@mxenabled/mxui'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport {\n  ANALYTICS_EVENTS,\n  TOUCH_TARGET,\n  useEvent,\n  useRecurringTransactionsStore,\n  useGlobalCopyStore,\n} from '../../../common'\nimport { getLocale, LOCALES } from '../../../core'\n\nimport { RecurrenceDay } from './RecurrenceDay'\nimport { Legend } from './Legend'\n\nconst HEADER_HEIGHT = 58\n\nconst getDateFnsLocale = () => {\n  const locale = getLocale()\n  const localeMap: Record<string, Locale> = {\n    [LOCALES.EN_US]: enUS,\n    [LOCALES.EN_CA]: enCA,\n    [LOCALES.FR]: fr,\n    [LOCALES.FR_CA]: frCA,\n    [LOCALES.ES]: es,\n  }\n  return localeMap[locale] || enUS\n}\n\nexport const RecurrenceCalendar = observer(() => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const { recurring: copy } = useGlobalCopyStore()\n  const { selectedDay, setDateRange } = useRecurringTransactionsStore()\n  const [calendarHeight, setCalendarHeight] = React.useState(\n    getWeeksInMonth(new Date()) * TOUCH_TARGET + HEADER_HEIGHT,\n  )\n\n  const handleMonthChange = (date: Date) => {\n    setCalendarHeight(getWeeksInMonth(date) * TOUCH_TARGET + HEADER_HEIGHT)\n    setDateRange({\n      start: startOfMonth(date),\n      end: endOfMonth(date),\n    })\n    handleDateChange(date)\n    onEvent(ANALYTICS_EVENTS.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT)\n  }\n\n  const handleDateChange = (date: Date | null) => {\n    if (!date) return\n\n    requestAnimationFrame(() => {\n      const recurrenceList = document.getElementById('recurrence-list')\n      recurrenceList?.setAttribute('tabindex', '-1')\n      recurrenceList?.focus()\n    })\n  }\n\n  const calendar = (\n    <DateCalendar\n      minDate={startOfMonth(new Date())}\n      onChange={handleDateChange}\n      onMonthChange={handleMonthChange}\n      showDaysOutsideCurrentMonth={true}\n      slots={{\n        day: RecurrenceDay,\n      }}\n      sx={{\n        '& .MuiPickersArrowSwitcher-button': {\n          color: 'primary.main',\n          '&:disabled': {\n            color: 'action.disabled',\n          },\n        },\n        '& .MuiButtonBase-root.MuiPickersDay-root': {\n          borderRadius: '4px',\n          '&:focus, &:hover': {\n            borderRadius: '4px',\n          },\n        },\n        '& .MuiPickersCalendarHeader-root': {\n          mt: 0,\n          pl: 16,\n          pr: 8,\n        },\n        '& .MuiPickersCalendarHeader-label': {\n          fontFamily: theme.typography.body1.fontFamily,\n          fontSize: theme.typography.body1.fontSize,\n          fontWeight: 600,\n        },\n        '& .MuiDayCalendar-slideTransition': {\n          minHeight: calendarHeight,\n        },\n        '&.MuiDateCalendar-root': {\n          minHeight: calendarHeight + TOUCH_TARGET,\n        },\n        '& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel': {\n          height: TOUCH_TARGET,\n          width: TOUCH_TARGET,\n          margin: 0,\n        },\n        '& .MuiDayCalendar-weekDayLabel': {\n          fontFamily: theme.typography.h3.fontFamily,\n          fontSize: theme.typography.body2.fontSize,\n        },\n        '& .MuiPickersDay-dayOutsideMonth': {\n          color: 'text.secondary',\n        },\n        textTransform: 'capitalize',\n      }}\n      value={selectedDay}\n      views={['day']}\n    />\n  )\n\n  return (\n    <Stack aria-labelledby=\"calendar-label\" justifyContent=\"center\" role=\"group\">\n      <LocalizationProvider adapterLocale={getDateFnsLocale()} dateAdapter={AdapterDateFns}>\n        {/*NOTE: This seems odd, but because the DateCalendar cannot go from a controlled\n         /*      calendar to an un-controlled calendar, we have to create 2 different instances\n         /*      when there a selectedDay and when selectedDay is undefined */}\n        {selectedDay && calendar}\n        {!selectedDay && calendar}\n\n        <Text id=\"calendar-label\" sx={{ alignSelf: 'center' }} variant=\"body2\">\n          {copy.calendar_tooltip}\n        </Text>\n        <Legend />\n      </LocalizationProvider>\n    </Stack>\n  )\n})\n"],"mappings":"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"}

package/dist/recurringtransactions/components/recurrencecalendar/RecurrenceDay.d.ts

@@ -1,4 +1,4 @@
 import { PickersDayProps } from '@mui/x-date-pickers/PickersDay';
-export declare const RecurrenceDay: (({ day, outsideCurrentMonth, ...other }: PickersDayProps<Date>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const RecurrenceDay: (({ day, outsideCurrentMonth, ...other }: PickersDayProps) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };

package/dist/recurringtransactions/components/recurrencecalendar/RecurrenceDay.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"RecurrenceDay.es.js","names":[],"sources":["../../../../src/recurringtransactions/components/recurrencecalendar/RecurrenceDay.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { isSameDay } from 'date-fns/isSameDay'\n\nimport Badge from '@mui/material/Badge'\nimport { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'\n\nimport {\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { RecurrenceStatus, RecurrenceType } from '../../../core'\n\nimport { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from '../RecurrenceBadges'\n\nexport const RecurrenceDay = observer(\n  ({ day, outsideCurrentMonth, ...other }: PickersDayProps<Date>) => {\n    const { recurring: copy } = useGlobalCopyStore()\n    const { selectedAccountGuids } = useGlobalUiStore()\n    const { recurrences, setSelectedDay } = useRecurringTransactionsStore()\n\n    const filteredRecurrences = React.useMemo(\n      () =>\n        recurrences.filter((recurrence) => selectedAccountGuids.includes(recurrence.accountGuid)),\n      [selectedAccountGuids, recurrences],\n    )\n\n    const dayRecurrences = filteredRecurrences.filter((a) =>\n      isSameDay(a.occurredOnDate || a.expectedDate, day),\n    )\n    const hasUpcoming = dayRecurrences.some(\n      (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Upcoming,\n    )\n    const hasMissed = dayRecurrences.some(\n      (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Missed,\n    )\n    const hasPaid = dayRecurrences.some(\n      (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Paid,\n    )\n    const hasIncome = dayRecurrences.some((a) => a.type === RecurrenceType.Income)\n\n    const totalBadges =\n      (hasUpcoming ? 1 : 0) + (hasMissed ? 1 : 0) + (hasPaid ? 1 : 0) + (hasIncome ? 1 : 0)\n\n    const statusParts = [\n      hasPaid && copy.paid,\n      hasMissed && copy.missed,\n      hasUpcoming && copy.upcoming,\n      hasIncome && copy.income,\n    ].filter(Boolean) as string[]\n\n    const ariaLabel =\n      statusParts.length > 0\n        ? `${formatDate(day, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}, ${statusParts.join(', ')}`\n        : formatDate(day, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n\n    return (\n      <Badge\n        badgeContent={\n          dayRecurrences.length > 0 && (\n            <>\n              {hasMissed && <MissedBadge isOffset={true} />}\n              {hasPaid && <PaidBadge isOffset={true} />}\n              {hasUpcoming && <UpcomingExpenseBadge isOffset={true} />}\n              {hasIncome && <IncomeBadge isOffset={true} />}\n            </>\n          )\n        }\n        overlap=\"circular\"\n        sx={{\n          '& .MuiBadge-badge': {\n            padding: 0,\n            marginRight: `${(totalBadges - 1) * 6 + 1}px`,\n            flexWrap: 'nowrap',\n          },\n        }}\n      >\n        <PickersDay\n          aria-label={ariaLabel}\n          day={day}\n          onClick={() => setSelectedDay(day)}\n          outsideCurrentMonth={outsideCurrentMonth}\n          sx={{\n            '&.MuiPickersDay-root': {\n              ...(outsideCurrentMonth && {\n                color: 'text.disabled',\n              }),\n              ...(other.today && {\n                color: 'primary.main',\n              }),\n            },\n          }}\n          {...other}\n        />\n      </Badge>\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,IAAgB,EAAA,CAC1B,EAAE,KAAA,GAAK,qBAAA,GAAqB,GAAG,EAAA,MAAmC;AACjE,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EAAE,sBAAA,EAAA,IAAyB,EAAiB,GAC5C,EAAE,aAAA,GAAa,gBAAA,EAAA,IAAmB,EAA8B,GAQhE,IANsB,EAAM,QAAA,MAE9B,EAAY,OAAA,CAAQ,MAAe,EAAqB,SAAS,EAAW,WAAW,CAAC,GAC1F,CAAC,GAAsB,CAAW,CAGb,EAAoB,OAAA,CAAQ,MACjD,EAAU,EAAE,kBAAkB,EAAE,cAAc,CAAG,CACnD,GACM,IAAc,EAAe,KAAA,CAChC,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,QAC3E,GACM,IAAY,EAAe,KAAA,CAC9B,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,MAC3E,GACM,IAAU,EAAe,KAAA,CAC5B,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,IAC3E,GACM,IAAY,EAAe,KAAA,CAAM,MAAM,EAAE,SAAS,EAAe,MAAM,GAEvE,KACH,IAAc,IAAI,MAAM,IAAY,IAAI,MAAM,IAAU,IAAI,MAAM,IAAY,IAAI,IAE/E,IAAc;AAAA,IAClB,KAAW,EAAK;AAAA,IAChB,KAAa,EAAK;AAAA,IAClB,KAAe,EAAK;AAAA,IACpB,KAAa,EAAK;AAAA,EACpB,EAAE,OAAO,OAAO,GAEV,IACJ,EAAY,SAAS,IACjB,GAAG,EAAW,GAAK,EAAkB,cAAc,CAAA,KAAM,EAAY,KAAK,IAAI,CAAA,KAC9E,EAAW,GAAK,EAAkB,cAAc;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cACE,EAAe,SAAS,KACtB,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,MACG,KAAa,gBAAA,EAAC,GAAD,EAAa,UAAU,GAAO,CAAA;AAAA,MAC3C,KAAW,gBAAA,EAAC,GAAD,EAAW,UAAU,GAAO,CAAA;AAAA,MACvC,KAAe,gBAAA,EAAC,GAAD,EAAsB,UAAU,GAAO,CAAA;AAAA,MACtD,KAAa,gBAAA,EAAC,GAAD,EAAa,UAAU,GAAO,CAAA;AAAA,IAC5C,EAAA,CAAA;AAAA,IAGN,SAAQ;AAAA,IACR,IAAI,EACF,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,aAAa,IAAI,IAAc,KAAK,IAAI,CAAA;AAAA,MACxC,UAAU;AAAA,IACZ,EACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACP,KAAA;AAAA,MACL,SAAA,MAAe,EAAe,CAAG;AAAA,MACZ,qBAAA;AAAA,MACrB,IAAI,EACF,wBAAwB;AAAA,QACtB,GAAI,KAAuB,EACzB,OAAO,gBACT;AAAA,QACA,GAAI,EAAM,SAAS,EACjB,OAAO,eACT;AAAA,MACF,EACF;AAAA,MACA,GAAI;AAAA,IACL,CAAA;AAAA,EACI,CAAA;AAEX,CACF"}
+{"version":3,"file":"RecurrenceDay.es.js","names":[],"sources":["../../../../src/recurringtransactions/components/recurrencecalendar/RecurrenceDay.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { isSameDay } from 'date-fns/isSameDay'\n\nimport Badge from '@mui/material/Badge'\nimport { PickersDay, PickersDayProps } from '@mui/x-date-pickers/PickersDay'\n\nimport {\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useRecurringTransactionsStore,\n} from '../../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\nimport { RecurrenceStatus, RecurrenceType } from '../../../core'\n\nimport { IncomeBadge, MissedBadge, PaidBadge, UpcomingExpenseBadge } from '../RecurrenceBadges'\n\nexport const RecurrenceDay = observer(({ day, outsideCurrentMonth, ...other }: PickersDayProps) => {\n  const { recurring: copy } = useGlobalCopyStore()\n  const { selectedAccountGuids } = useGlobalUiStore()\n  const { recurrences, setSelectedDay } = useRecurringTransactionsStore()\n\n  const filteredRecurrences = React.useMemo(\n    () => recurrences.filter((recurrence) => selectedAccountGuids.includes(recurrence.accountGuid)),\n    [selectedAccountGuids, recurrences],\n  )\n\n  const dayRecurrences = filteredRecurrences.filter((a) =>\n    isSameDay(a.occurredOnDate || a.expectedDate, day),\n  )\n  const hasUpcoming = dayRecurrences.some(\n    (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Upcoming,\n  )\n  const hasMissed = dayRecurrences.some(\n    (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Missed,\n  )\n  const hasPaid = dayRecurrences.some(\n    (a) => a.type !== RecurrenceType.Income && a.status === RecurrenceStatus.Paid,\n  )\n  const hasIncome = dayRecurrences.some((a) => a.type === RecurrenceType.Income)\n\n  const totalBadges =\n    (hasUpcoming ? 1 : 0) + (hasMissed ? 1 : 0) + (hasPaid ? 1 : 0) + (hasIncome ? 1 : 0)\n\n  const statusParts = [\n    hasPaid && copy.paid,\n    hasMissed && copy.missed,\n    hasUpcoming && copy.upcoming,\n    hasIncome && copy.income,\n  ].filter(Boolean) as string[]\n\n  const ariaLabel =\n    statusParts.length > 0\n      ? `${formatDate(day, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}, ${statusParts.join(', ')}`\n      : formatDate(day, DATE_FORMATS_INTL.MONTH_DAY_YEAR)\n\n  return (\n    <Badge\n      badgeContent={\n        dayRecurrences.length > 0 && (\n          <>\n            {hasMissed && <MissedBadge isOffset={true} />}\n            {hasPaid && <PaidBadge isOffset={true} />}\n            {hasUpcoming && <UpcomingExpenseBadge isOffset={true} />}\n            {hasIncome && <IncomeBadge isOffset={true} />}\n          </>\n        )\n      }\n      overlap=\"circular\"\n      sx={{\n        '& .MuiBadge-badge': {\n          padding: 0,\n          marginRight: `${(totalBadges - 1) * 6 + 1}px`,\n          flexWrap: 'nowrap',\n        },\n      }}\n    >\n      <PickersDay\n        aria-label={ariaLabel}\n        day={day}\n        onClick={() => setSelectedDay(day)}\n        outsideCurrentMonth={outsideCurrentMonth}\n        sx={{\n          '&.MuiPickersDay-root': {\n            ...(outsideCurrentMonth && {\n              color: 'text.disabled',\n            }),\n            ...(other.today && {\n              color: 'primary.main',\n            }),\n          },\n        }}\n        {...other}\n      />\n    </Badge>\n  )\n})\n"],"mappings":";;;;;;;;;;AAiBA,IAAa,IAAgB,EAAA,CAAU,EAAE,KAAA,GAAK,qBAAA,GAAqB,GAAG,EAAA,MAA6B;AACjG,QAAM,EAAE,WAAW,EAAA,IAAS,EAAmB,GACzC,EAAE,sBAAA,EAAA,IAAyB,EAAiB,GAC5C,EAAE,aAAA,GAAa,gBAAA,EAAA,IAAmB,EAA8B,GAOhE,IALsB,EAAM,QAAA,MAC1B,EAAY,OAAA,CAAQ,MAAe,EAAqB,SAAS,EAAW,WAAW,CAAC,GAC9F,CAAC,GAAsB,CAAW,CAGb,EAAoB,OAAA,CAAQ,MACjD,EAAU,EAAE,kBAAkB,EAAE,cAAc,CAAG,CACnD,GACM,IAAc,EAAe,KAAA,CAChC,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,QAC3E,GACM,IAAY,EAAe,KAAA,CAC9B,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,MAC3E,GACM,IAAU,EAAe,KAAA,CAC5B,MAAM,EAAE,SAAS,EAAe,UAAU,EAAE,WAAW,EAAiB,IAC3E,GACM,IAAY,EAAe,KAAA,CAAM,MAAM,EAAE,SAAS,EAAe,MAAM,GAEvE,KACH,IAAc,IAAI,MAAM,IAAY,IAAI,MAAM,IAAU,IAAI,MAAM,IAAY,IAAI,IAE/E,IAAc;AAAA,IAClB,KAAW,EAAK;AAAA,IAChB,KAAa,EAAK;AAAA,IAClB,KAAe,EAAK;AAAA,IACpB,KAAa,EAAK;AAAA,EACpB,EAAE,OAAO,OAAO,GAEV,IACJ,EAAY,SAAS,IACjB,GAAG,EAAW,GAAK,EAAkB,cAAc,CAAA,KAAM,EAAY,KAAK,IAAI,CAAA,KAC9E,EAAW,GAAK,EAAkB,cAAc;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cACE,EAAe,SAAS,KACtB,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,MACG,KAAa,gBAAA,EAAC,GAAD,EAAa,UAAU,GAAO,CAAA;AAAA,MAC3C,KAAW,gBAAA,EAAC,GAAD,EAAW,UAAU,GAAO,CAAA;AAAA,MACvC,KAAe,gBAAA,EAAC,GAAD,EAAsB,UAAU,GAAO,CAAA;AAAA,MACtD,KAAa,gBAAA,EAAC,GAAD,EAAa,UAAU,GAAO,CAAA;AAAA,IAC5C,EAAA,CAAA;AAAA,IAGN,SAAQ;AAAA,IACR,IAAI,EACF,qBAAqB;AAAA,MACnB,SAAS;AAAA,MACT,aAAa,IAAI,IAAc,KAAK,IAAI,CAAA;AAAA,MACxC,UAAU;AAAA,IACZ,EACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACP,KAAA;AAAA,MACL,SAAA,MAAe,EAAe,CAAG;AAAA,MACZ,qBAAA;AAAA,MACrB,IAAI,EACF,wBAAwB;AAAA,QACtB,GAAI,KAAuB,EACzB,OAAO,gBACT;AAAA,QACA,GAAI,EAAM,SAAS,EACjB,OAAO,eACT;AAAA,MACF,EACF;AAAA,MACA,GAAI;AAAA,IACL,CAAA;AAAA,EACI,CAAA;AAEX,CAAC"}

package/dist/settings/components/notifications/AccountProfileListItem.es.js

@@ -13,12 +13,12 @@ import { endOfMonth as L } from "date-fns/endOfMonth";
 import { startOfMonth as M } from "date-fns/startOfMonth";
 import { ChevronRight as R } from "@mxenabled/mx-icons";
 import { jsx as o, jsxs as B } from "react/jsx-runtime";
-import { AdapterDateFns as N } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as N } from "@mui/x-date-pickers/AdapterDateFns";
 import { DateCalendar as j } from "@mui/x-date-pickers/DateCalendar";
 import { LocalizationProvider as z } from "@mui/x-date-pickers/LocalizationProvider";
-var nt = S(({ onProfileUpdated: r, profile: t }) => {
-  const { common: m, recurring: d, settings: n } = C(), { updateAccount: y } = A(), e = t.notification_type === P.DebtPaymentReminder, [_, c] = i.useState(!1), [s, l] = i.useState(t.threshold || 0), [u, p] = i.useState(t.account?.day_payment_is_due || 0), h = t.account?.name || t.account?.feed_name || "", b = t.account?.day_payment_is_due ? D(n.notification_debt_payment_date, v(t.account?.day_payment_is_due)) : n.notification_debt_payment_zero_state, f = e ? b : T(t.threshold ?? 0, "0,0"), g = async () => {
-    e && t.account ? await y({
+var et = S(({ onProfileUpdated: r, profile: t }) => {
+  const { common: m, recurring: d, settings: e } = C(), { updateAccount: y } = A(), n = t.notification_type === P.DebtPaymentReminder, [_, c] = i.useState(!1), [s, l] = i.useState(t.threshold || 0), [u, p] = i.useState(t.account?.day_payment_is_due || 0), h = t.account?.name || t.account?.feed_name || "", b = t.account?.day_payment_is_due ? D(e.notification_debt_payment_date, v(t.account?.day_payment_is_due)) : e.notification_debt_payment_zero_state, f = n ? b : T(t.threshold ?? 0, "0,0"), g = async () => {
+    n && t.account ? await y({
       ...t.account,
       day_payment_is_due: u
     }) : r({
@@ -41,24 +41,24 @@ var nt = S(({ onProfileUpdated: r, profile: t }) => {
       is_enabled: !t.is_enabled
     }),
     primaryText: h,
-    secondaryText: t.is_enabled ? f : n.notification_disabled
+    secondaryText: t.is_enabled ? f : e.notification_disabled
   }), /* @__PURE__ */ o(x, {
     copy: {
-      title: e ? d.day_of_the_month : n.notification_threshold_label,
+      title: n ? d.day_of_the_month : e.notification_threshold_label,
       close_aria: m.close_aria
     },
-    disablePrimaryButton: e && u === 0,
+    disablePrimaryButton: n && u === 0,
     isOpen: _,
     onClose: () => c(!1),
     onPrimaryAction: g,
     primaryText: m.save_button,
-    children: e ? /* @__PURE__ */ o(z, {
+    children: n ? /* @__PURE__ */ o(z, {
       dateAdapter: N,
       children: /* @__PURE__ */ o(j, {
         maxDate: L(/* @__PURE__ */ new Date()),
         minDate: M(/* @__PURE__ */ new Date()),
         onChange: (a) => {
-          p(a.getDate());
+          a && p(a.getDate());
         },
         slots: {
           leftArrowIcon: () => null,
@@ -78,7 +78,7 @@ var nt = S(({ onProfileUpdated: r, profile: t }) => {
   })] });
 });
 export {
-  nt as AccountProfileListItem
+  et as AccountProfileListItem
 };
 
 //# sourceMappingURL=AccountProfileListItem.es.js.map

package/dist/settings/components/notifications/AccountProfileListItem.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountProfileListItem.es.js","names":[],"sources":["../../../../src/settings/components/notifications/AccountProfileListItem.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Stack from '@mui/material/Stack'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { InstitutionLogo } from '@mxenabled/mxui'\n\nimport {\n  CurrencyInput,\n  Dialog,\n  ToggleButtonListItem,\n  useAccountStore,\n  useGlobalCopyStore,\n} from '../../../common'\nimport { AccountNotificationTypes, DetailedNotificationProfile } from '../../../core'\nimport { formatCurrency, formatOrdinal } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface AccountProfileListItemProps {\n  onProfileUpdated: (profile: DetailedNotificationProfile) => void\n  profile: DetailedNotificationProfile\n}\n\nexport const AccountProfileListItem = observer(\n  ({ onProfileUpdated, profile }: AccountProfileListItemProps) => {\n    const { common: commonCopy, recurring: recurringCopy, settings: copy } = useGlobalCopyStore()\n    const { updateAccount } = useAccountStore()\n\n    const isPaymentReminder =\n      profile.notification_type === AccountNotificationTypes.DebtPaymentReminder\n\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [amount, setAmount] = React.useState<number>(profile.threshold || 0)\n    const [paymentDay, setPaymentDay] = React.useState<number>(\n      profile.account?.day_payment_is_due || 0,\n    )\n\n    const accountName = profile.account?.name || profile.account?.feed_name || ''\n    const accountPaymentDate = profile.account?.day_payment_is_due\n      ? (buildDynamicCopy(\n          copy.notification_debt_payment_date,\n          formatOrdinal(profile.account?.day_payment_is_due),\n        ) as string)\n      : copy.notification_debt_payment_zero_state\n\n    const secondaryText = isPaymentReminder\n      ? accountPaymentDate\n      : formatCurrency(profile.threshold ?? 0, '0,0')\n\n    const handleUpdateProfile = async () => {\n      if (isPaymentReminder && profile.account) {\n        await updateAccount({ ...profile.account, day_payment_is_due: paymentDay })\n      } else {\n        onProfileUpdated({ ...profile, threshold: amount })\n      }\n    }\n\n    return (\n      <Stack>\n        <ToggleButtonListItem\n          avatar={\n            profile.account?.institution_guid ? (\n              <InstitutionLogo\n                alt={profile.label}\n                institutionGuid={profile.account?.institution_guid}\n              />\n            ) : undefined\n          }\n          endIcon={<ChevronRight />}\n          isChecked={profile.is_enabled}\n          isDisabled={!profile.is_enabled}\n          isPrimaryTextBold={true}\n          onClick={() => setIsOpen(true)}\n          onToggle={() =>\n            onProfileUpdated({\n              ...profile,\n              is_enabled: !profile.is_enabled,\n            })\n          }\n          primaryText={accountName}\n          secondaryText={!profile.is_enabled ? copy.notification_disabled : secondaryText}\n        />\n\n        <Dialog\n          copy={{\n            title: isPaymentReminder\n              ? recurringCopy.day_of_the_month\n              : copy.notification_threshold_label,\n            close_aria: commonCopy.close_aria,\n          }}\n          disablePrimaryButton={isPaymentReminder && paymentDay === 0}\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          onPrimaryAction={handleUpdateProfile}\n          primaryText={commonCopy.save_button}\n        >\n          {isPaymentReminder ? (\n            <LocalizationProvider dateAdapter={AdapterDateFns}>\n              <DateCalendar\n                maxDate={endOfMonth(new Date())}\n                minDate={startOfMonth(new Date())}\n                onChange={(date: Date) => {\n                  setPaymentDay(date.getDate())\n                }}\n                slots={{\n                  // Hides the arrows\n                  leftArrowIcon: () => null,\n                  rightArrowIcon: () => null,\n                }}\n                sx={{\n                  // TODO: Needs to be updated in MXUI\n                  '& .MuiPickersDay-today': {\n                    color: 'primary.main',\n                  },\n                }}\n                views={['day']}\n              />\n            </LocalizationProvider>\n          ) : (\n            <CurrencyInput\n              amount={amount}\n              autoFocus={true}\n              fullWidth={true}\n              minAmount={0}\n              setAmount={(value) => setAmount(Number(value) || 0)}\n              sx={{ '.MuiTypography-body1': { p: 0 } }}\n            />\n          )}\n        </Dialog>\n      </Stack>\n    )\n  },\n)\n"],"mappings":"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"}
+{"version":3,"file":"AccountProfileListItem.es.js","names":[],"sources":["../../../../src/settings/components/notifications/AccountProfileListItem.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { endOfMonth } from 'date-fns/endOfMonth'\nimport { startOfMonth } from 'date-fns/startOfMonth'\n\nimport Stack from '@mui/material/Stack'\nimport { DateCalendar } from '@mui/x-date-pickers/DateCalendar'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { InstitutionLogo } from '@mxenabled/mxui'\n\nimport {\n  CurrencyInput,\n  Dialog,\n  ToggleButtonListItem,\n  useAccountStore,\n  useGlobalCopyStore,\n} from '../../../common'\nimport { AccountNotificationTypes, DetailedNotificationProfile } from '../../../core'\nimport { formatCurrency, formatOrdinal } from '../../../core/utils/NumberFormatting'\nimport { buildDynamicCopy } from '../../../core/utils/Localization'\n\ninterface AccountProfileListItemProps {\n  onProfileUpdated: (profile: DetailedNotificationProfile) => void\n  profile: DetailedNotificationProfile\n}\n\nexport const AccountProfileListItem = observer(\n  ({ onProfileUpdated, profile }: AccountProfileListItemProps) => {\n    const { common: commonCopy, recurring: recurringCopy, settings: copy } = useGlobalCopyStore()\n    const { updateAccount } = useAccountStore()\n\n    const isPaymentReminder =\n      profile.notification_type === AccountNotificationTypes.DebtPaymentReminder\n\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [amount, setAmount] = React.useState<number>(profile.threshold || 0)\n    const [paymentDay, setPaymentDay] = React.useState<number>(\n      profile.account?.day_payment_is_due || 0,\n    )\n\n    const accountName = profile.account?.name || profile.account?.feed_name || ''\n    const accountPaymentDate = profile.account?.day_payment_is_due\n      ? (buildDynamicCopy(\n          copy.notification_debt_payment_date,\n          formatOrdinal(profile.account?.day_payment_is_due),\n        ) as string)\n      : copy.notification_debt_payment_zero_state\n\n    const secondaryText = isPaymentReminder\n      ? accountPaymentDate\n      : formatCurrency(profile.threshold ?? 0, '0,0')\n\n    const handleUpdateProfile = async () => {\n      if (isPaymentReminder && profile.account) {\n        await updateAccount({ ...profile.account, day_payment_is_due: paymentDay })\n      } else {\n        onProfileUpdated({ ...profile, threshold: amount })\n      }\n    }\n\n    return (\n      <Stack>\n        <ToggleButtonListItem\n          avatar={\n            profile.account?.institution_guid ? (\n              <InstitutionLogo\n                alt={profile.label}\n                institutionGuid={profile.account?.institution_guid}\n              />\n            ) : undefined\n          }\n          endIcon={<ChevronRight />}\n          isChecked={profile.is_enabled}\n          isDisabled={!profile.is_enabled}\n          isPrimaryTextBold={true}\n          onClick={() => setIsOpen(true)}\n          onToggle={() =>\n            onProfileUpdated({\n              ...profile,\n              is_enabled: !profile.is_enabled,\n            })\n          }\n          primaryText={accountName}\n          secondaryText={!profile.is_enabled ? copy.notification_disabled : secondaryText}\n        />\n\n        <Dialog\n          copy={{\n            title: isPaymentReminder\n              ? recurringCopy.day_of_the_month\n              : copy.notification_threshold_label,\n            close_aria: commonCopy.close_aria,\n          }}\n          disablePrimaryButton={isPaymentReminder && paymentDay === 0}\n          isOpen={isOpen}\n          onClose={() => setIsOpen(false)}\n          onPrimaryAction={handleUpdateProfile}\n          primaryText={commonCopy.save_button}\n        >\n          {isPaymentReminder ? (\n            <LocalizationProvider dateAdapter={AdapterDateFns}>\n              <DateCalendar\n                maxDate={endOfMonth(new Date())}\n                minDate={startOfMonth(new Date())}\n                onChange={(date: Date | null) => {\n                  if (date) setPaymentDay(date.getDate())\n                }}\n                slots={{\n                  // Hides the arrows\n                  leftArrowIcon: () => null,\n                  rightArrowIcon: () => null,\n                }}\n                sx={{\n                  // TODO: Needs to be updated in MXUI\n                  '& .MuiPickersDay-today': {\n                    color: 'primary.main',\n                  },\n                }}\n                views={['day']}\n              />\n            </LocalizationProvider>\n          ) : (\n            <CurrencyInput\n              amount={amount}\n              autoFocus={true}\n              fullWidth={true}\n              minAmount={0}\n              setAmount={(value) => setAmount(Number(value) || 0)}\n              sx={{ '.MuiTypography-body1': { p: 0 } }}\n            />\n          )}\n        </Dialog>\n      </Stack>\n    )\n  },\n)\n"],"mappings":"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"}

package/dist/settings/components/profile/ProfileTab.es.js

@@ -1,4 +1,4 @@
-import { useAppConfig as F, useGlobalCopyStore as B, useSettingsStore as M, useUserStore as R } from "../../../common/context/hooks.es.js";
+import { useAppConfig as E, useGlobalCopyStore as B, useSettingsStore as M, useUserStore as R } from "../../../common/context/hooks.es.js";
 import { useScreenSize as I } from "../../../common/hooks/useScreenSize.es.js";
 import L from "../../../common/components/dialog/Dialog.es.js";
 import z from "./actions/ResetPasswordAction.es.js";
@@ -14,11 +14,11 @@ import { alpha as b, useTheme as K } from "@mui/material/styles";
 import Y from "@mui/material/Box";
 import { getUnixTime as q } from "date-fns/getUnixTime";
 import d from "@mui/material/TextField";
-import { AdapterDateFns as Q } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as Q } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as W } from "@mui/x-date-pickers/LocalizationProvider";
 import { DatePicker as X } from "@mui/x-date-pickers";
-var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
-  const u = K(), { common: w, settings: o } = B(), { isMobile: m } = I(C), { config: h } = F(), { updateUser: S } = M(), { user: r } = R(), [a, U] = p.useState({
+var Z = ({ availableWidth: C, handleOnLeaveClick: u }) => {
+  const f = K(), { common: w, settings: o } = B(), { isMobile: m } = I(C), { config: h } = E(), { updateUser: S } = M(), { user: r } = R(), [a, T] = p.useState({
     first_name: r.first_name,
     last_name: r.last_name,
     email: r.email,
@@ -26,9 +26,9 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
     birthday: r.birthday,
     postal_code: r.postal_code,
     credit_score: r.credit_score
-  }), [c, y] = p.useState(!1), [T, g] = p.useState(!1), _ = p.useRef(null), v = a.email && !r.email_is_verified && !c, x = a.phone && !r.phone_is_verified && !c;
+  }), [c, y] = p.useState(!1), [U, g] = p.useState(!1), _ = p.useRef(null), v = a.email && !r.email_is_verified && !c, x = a.phone && !r.phone_is_verified && !c;
   p.useEffect(() => {
-    if (f) {
+    if (u) {
       const e = (s) => {
         _.current && !_.current.contains(s.target) && c && g(!0);
       };
@@ -37,26 +37,26 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
       };
     }
   }, [c]);
-  const V = () => {
+  const P = () => {
     if (a.birthday) {
-      const e = /* @__PURE__ */ new Date(a.birthday * 1e3), s = e.getUTCFullYear(), A = e.getUTCMonth(), E = e.getUTCDate();
-      return new Date(s, A, E);
+      const e = /* @__PURE__ */ new Date(a.birthday * 1e3), s = e.getUTCFullYear(), F = e.getUTCMonth(), A = e.getUTCDate();
+      return new Date(s, F, A);
     }
-  }, D = async () => {
+  }, V = async () => {
     await S({
       ...r,
       ...a
     }), y(!1);
-  }, P = () => {
-    g(!1), f && f();
   }, k = () => {
+    g(!1), u && u();
+  }, D = () => {
     g(!1);
   }, n = (e) => {
     const s = {
       ...a,
       ...e
     };
-    U(s), y(JSON.stringify({
+    T(s), y(JSON.stringify({
       ...r,
       ...s
     }) !== JSON.stringify(r));
@@ -67,7 +67,7 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
     sx: {
       backgroundColor: "background.paper",
       p: 24,
-      "& .MuiTextField-root": { flex: 1 }
+      "& .MuiTextField-root, & .MuiPickersTextField-root": { flex: 1 }
     },
     children: [
       /* @__PURE__ */ t(J, { children: o.personal_details }),
@@ -130,21 +130,21 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
             slotProps: {
               nextIconButton: { sx: {
                 color: "primary.main",
-                "&:hover": { backgroundColor: b(u.palette.primary.light, 0.1) }
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
               } },
               previousIconButton: { sx: {
                 color: "primary.main",
-                "&:hover": { backgroundColor: b(u.palette.primary.light, 0.1) }
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
               } }
             },
             sx: {
               width: "100%",
               "& .MuiIconButton-edgeEnd": {
                 color: "primary.main",
-                "&:hover": { backgroundColor: b(u.palette.primary.light, 0.1) }
+                "&:hover": { backgroundColor: b(f.palette.primary.light, 0.1) }
               }
             },
-            value: V()
+            value: P()
           })
         }), /* @__PURE__ */ t(d, {
           defaultValue: a.postal_code,
@@ -161,7 +161,7 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
         h.display_password_options_in_settings && /* @__PURE__ */ t(z, {}),
         /* @__PURE__ */ t($, {
           disabled: !c,
-          onClick: D,
+          onClick: V,
           sx: { width: m ? "100%" : 124 },
           variant: "contained",
           children: w.save_button
@@ -170,9 +170,9 @@ var Z = ({ availableWidth: C, handleOnLeaveClick: f }) => {
     ]
   }), /* @__PURE__ */ t(L, {
     copy: { title: o.discard_changes },
-    isOpen: T,
-    onClose: k,
-    onSecondaryAction: P,
+    isOpen: U,
+    onClose: D,
+    onSecondaryAction: k,
     primaryText: o.keep_editing,
     secondaryText: o.leave,
     children: o.discard_changes_message

package/dist/settings/components/profile/ProfileTab.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileTab.es.js","names":[],"sources":["../../../../src/settings/components/profile/ProfileTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { alpha, useTheme } from '@mui/material/styles'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { H3, P } from '@mxenabled/mxui'\n\nimport {\n  useAppConfig,\n  useGlobalCopyStore,\n  useScreenSize,\n  useSettingsStore,\n  useUserStore,\n  Dialog,\n} from '../../../common'\nimport { type EditableUser } from '../../../core'\nimport ResetPasswordAction from './actions/ResetPasswordAction'\nimport VerifyEmailAction from './actions/VerifyEmailAction'\nimport VerifyPhoneAction from './actions/VerifyPhoneAction'\n\ninterface ProfileFormProps {\n  availableWidth?: number\n  handleOnLeaveClick?: () => void\n}\n\ntype UserInput = {\n  [U in keyof EditableUser]: EditableUser[U]\n}\n\nconst ProfileForm: React.FC<ProfileFormProps> = ({ availableWidth, handleOnLeaveClick }) => {\n  const theme = useTheme()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { isMobile } = useScreenSize(availableWidth)\n  const { config } = useAppConfig()\n  const { updateUser } = useSettingsStore()\n  const { user } = useUserStore()\n\n  const [modifiedUser, setModifiedUser] = React.useState<EditableUser>({\n    first_name: user.first_name,\n    last_name: user.last_name,\n    email: user.email,\n    phone: user.phone,\n    birthday: user.birthday,\n    postal_code: user.postal_code,\n    credit_score: user.credit_score,\n  })\n  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)\n  const [showLeaveDialog, setShowLeaveDialog] = React.useState(false)\n  const boxRef = React.useRef<HTMLDivElement>(null)\n\n  const showVerifyEmail = modifiedUser.email && !user.email_is_verified && !hasUnsavedChanges\n  const showVerifyPhone = modifiedUser.phone && !user.phone_is_verified && !hasUnsavedChanges\n\n  React.useEffect(() => {\n    if (handleOnLeaveClick) {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (boxRef.current && !boxRef.current.contains(event.target as Node) && hasUnsavedChanges) {\n          setShowLeaveDialog(true)\n        }\n      }\n\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside)\n      }\n    }\n    return undefined\n  }, [hasUnsavedChanges])\n\n  // eslint-disable-next-line consistent-return\n  const formatReadableBirthday = () => {\n    if (modifiedUser.birthday) {\n      const utc = new Date(modifiedUser.birthday * 1000)\n      const year = utc.getUTCFullYear()\n      const month = utc.getUTCMonth()\n      const day = utc.getUTCDate()\n      return new Date(year, month, day)\n    }\n  }\n\n  const handleSave = async () => {\n    await updateUser({ ...user, ...modifiedUser })\n    setHasUnsavedChanges(false)\n  }\n\n  const handleLeaveDialog = () => {\n    setShowLeaveDialog(false)\n\n    if (handleOnLeaveClick) {\n      handleOnLeaveClick()\n    }\n  }\n\n  const handleKeepEditing = () => {\n    setShowLeaveDialog(false)\n  }\n\n  const handleInput = (update: UserInput) => {\n    const changedUser = {\n      ...modifiedUser,\n      ...update,\n    }\n    setModifiedUser(changedUser)\n    setHasUnsavedChanges(JSON.stringify({ ...user, ...changedUser }) !== JSON.stringify(user))\n  }\n\n  return (\n    <>\n      <Box\n        component=\"form\"\n        ref={boxRef}\n        sx={{\n          backgroundColor: 'background.paper',\n          p: 24,\n          '& .MuiTextField-root': {\n            flex: 1,\n          },\n        }}\n      >\n        <H3>{settingsCopy.personal_details}</H3>\n        <P variant=\"body1\">{settingsCopy.update_information}</P>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={24} sx={{ mb: 24, pt: 24 }}>\n          <TextField\n            defaultValue={modifiedUser.first_name}\n            label={settingsCopy.first_name}\n            onChange={(e) => handleInput({ first_name: e.target.value })}\n          />\n          <TextField\n            defaultValue={modifiedUser.last_name}\n            label={settingsCopy.last_name}\n            onChange={(e) => handleInput({ last_name: e.target.value })}\n          />\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'}>\n          {config.display_email_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, mb: showVerifyEmail ? 20 : 24, mr: isMobile ? 0 : 24 }}>\n              <TextField\n                defaultValue={modifiedUser.email}\n                label={settingsCopy.email_address}\n                onChange={(e) => handleInput({ email: e.target.value })}\n              />\n              {showVerifyEmail && <VerifyEmailAction />}\n            </Stack>\n          )}\n          {config.display_sms_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, mb: showVerifyPhone ? 20 : 24 }}>\n              <TextField\n                defaultValue={modifiedUser.phone}\n                label={settingsCopy.mobile_number}\n                onChange={(e) => handleInput({ phone: e.target.value })}\n                type=\"tel\"\n              />\n              {showVerifyPhone && <VerifyPhoneAction />}\n            </Stack>\n          )}\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={24} sx={{ mb: 24 }}>\n          <LocalizationProvider dateAdapter={AdapterDateFns}>\n            <DatePicker\n              label={settingsCopy.birthdate}\n              onChange={(value) => handleInput({ birthday: getUnixTime(value as Date) })}\n              slotProps={{\n                nextIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n                previousIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n              }}\n              sx={{\n                width: '100%',\n                '& .MuiIconButton-edgeEnd': {\n                  color: 'primary.main',\n                  '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              }}\n              value={formatReadableBirthday()}\n            />\n          </LocalizationProvider>\n          <TextField\n            defaultValue={modifiedUser.postal_code}\n            label={settingsCopy.zip_code}\n            onChange={(e) => handleInput({ postal_code: e.target.value })}\n          />\n        </Stack>\n        <Stack>\n          <TextField\n            defaultValue={modifiedUser.credit_score}\n            label={settingsCopy.credit_score}\n            onChange={(e) => handleInput({ credit_score: Number(e.target.value) })}\n          />\n          {config.display_password_options_in_settings && <ResetPasswordAction />}\n          <Button\n            disabled={!hasUnsavedChanges}\n            onClick={handleSave}\n            sx={{ width: isMobile ? '100%' : 124 }}\n            variant=\"contained\"\n          >\n            {commonCopy.save_button}\n          </Button>\n        </Stack>\n      </Box>\n      <Dialog\n        copy={{ title: settingsCopy.discard_changes }}\n        isOpen={showLeaveDialog}\n        onClose={handleKeepEditing}\n        onSecondaryAction={handleLeaveDialog}\n        primaryText={settingsCopy.keep_editing}\n        secondaryText={settingsCopy.leave}\n      >\n        {settingsCopy.discard_changes_message}\n      </Dialog>\n    </>\n  )\n}\n\nexport default observer(ProfileForm)\n"],"mappings":"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"}
+{"version":3,"file":"ProfileTab.es.js","names":[],"sources":["../../../../src/settings/components/profile/ProfileTab.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { getUnixTime } from 'date-fns/getUnixTime'\n\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { DatePicker } from '@mui/x-date-pickers'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\n\nimport { alpha, useTheme } from '@mui/material/styles'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { H3, P } from '@mxenabled/mxui'\n\nimport {\n  useAppConfig,\n  useGlobalCopyStore,\n  useScreenSize,\n  useSettingsStore,\n  useUserStore,\n  Dialog,\n} from '../../../common'\nimport { type EditableUser } from '../../../core'\nimport ResetPasswordAction from './actions/ResetPasswordAction'\nimport VerifyEmailAction from './actions/VerifyEmailAction'\nimport VerifyPhoneAction from './actions/VerifyPhoneAction'\n\ninterface ProfileFormProps {\n  availableWidth?: number\n  handleOnLeaveClick?: () => void\n}\n\ntype UserInput = {\n  [U in keyof EditableUser]: EditableUser[U]\n}\n\nconst ProfileForm: React.FC<ProfileFormProps> = ({ availableWidth, handleOnLeaveClick }) => {\n  const theme = useTheme()\n  const { common: commonCopy, settings: settingsCopy } = useGlobalCopyStore()\n  const { isMobile } = useScreenSize(availableWidth)\n  const { config } = useAppConfig()\n  const { updateUser } = useSettingsStore()\n  const { user } = useUserStore()\n\n  const [modifiedUser, setModifiedUser] = React.useState<EditableUser>({\n    first_name: user.first_name,\n    last_name: user.last_name,\n    email: user.email,\n    phone: user.phone,\n    birthday: user.birthday,\n    postal_code: user.postal_code,\n    credit_score: user.credit_score,\n  })\n  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false)\n  const [showLeaveDialog, setShowLeaveDialog] = React.useState(false)\n  const boxRef = React.useRef<HTMLDivElement>(null)\n\n  const showVerifyEmail = modifiedUser.email && !user.email_is_verified && !hasUnsavedChanges\n  const showVerifyPhone = modifiedUser.phone && !user.phone_is_verified && !hasUnsavedChanges\n\n  React.useEffect(() => {\n    if (handleOnLeaveClick) {\n      const handleClickOutside = (event: MouseEvent) => {\n        if (boxRef.current && !boxRef.current.contains(event.target as Node) && hasUnsavedChanges) {\n          setShowLeaveDialog(true)\n        }\n      }\n\n      document.addEventListener('mousedown', handleClickOutside)\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside)\n      }\n    }\n    return undefined\n  }, [hasUnsavedChanges])\n\n  // eslint-disable-next-line consistent-return\n  const formatReadableBirthday = () => {\n    if (modifiedUser.birthday) {\n      const utc = new Date(modifiedUser.birthday * 1000)\n      const year = utc.getUTCFullYear()\n      const month = utc.getUTCMonth()\n      const day = utc.getUTCDate()\n      return new Date(year, month, day)\n    }\n  }\n\n  const handleSave = async () => {\n    await updateUser({ ...user, ...modifiedUser })\n    setHasUnsavedChanges(false)\n  }\n\n  const handleLeaveDialog = () => {\n    setShowLeaveDialog(false)\n\n    if (handleOnLeaveClick) {\n      handleOnLeaveClick()\n    }\n  }\n\n  const handleKeepEditing = () => {\n    setShowLeaveDialog(false)\n  }\n\n  const handleInput = (update: UserInput) => {\n    const changedUser = {\n      ...modifiedUser,\n      ...update,\n    }\n    setModifiedUser(changedUser)\n    setHasUnsavedChanges(JSON.stringify({ ...user, ...changedUser }) !== JSON.stringify(user))\n  }\n\n  return (\n    <>\n      <Box\n        component=\"form\"\n        ref={boxRef}\n        sx={{\n          backgroundColor: 'background.paper',\n          p: 24,\n          '& .MuiTextField-root, & .MuiPickersTextField-root': {\n            flex: 1,\n          },\n        }}\n      >\n        <H3>{settingsCopy.personal_details}</H3>\n        <P variant=\"body1\">{settingsCopy.update_information}</P>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={24} sx={{ mb: 24, pt: 24 }}>\n          <TextField\n            defaultValue={modifiedUser.first_name}\n            label={settingsCopy.first_name}\n            onChange={(e) => handleInput({ first_name: e.target.value })}\n          />\n          <TextField\n            defaultValue={modifiedUser.last_name}\n            label={settingsCopy.last_name}\n            onChange={(e) => handleInput({ last_name: e.target.value })}\n          />\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'}>\n          {config.display_email_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, mb: showVerifyEmail ? 20 : 24, mr: isMobile ? 0 : 24 }}>\n              <TextField\n                defaultValue={modifiedUser.email}\n                label={settingsCopy.email_address}\n                onChange={(e) => handleInput({ email: e.target.value })}\n              />\n              {showVerifyEmail && <VerifyEmailAction />}\n            </Stack>\n          )}\n          {config.display_sms_edit_field_in_settings && (\n            <Stack sx={{ flex: 1, mb: showVerifyPhone ? 20 : 24 }}>\n              <TextField\n                defaultValue={modifiedUser.phone}\n                label={settingsCopy.mobile_number}\n                onChange={(e) => handleInput({ phone: e.target.value })}\n                type=\"tel\"\n              />\n              {showVerifyPhone && <VerifyPhoneAction />}\n            </Stack>\n          )}\n        </Stack>\n        <Stack direction={isMobile ? 'column' : 'row'} spacing={24} sx={{ mb: 24 }}>\n          <LocalizationProvider dateAdapter={AdapterDateFns}>\n            <DatePicker\n              label={settingsCopy.birthdate}\n              onChange={(value) => handleInput({ birthday: getUnixTime(value as Date) })}\n              slotProps={{\n                nextIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n                previousIconButton: {\n                  sx: {\n                    color: 'primary.main',\n                    '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                  },\n                },\n              }}\n              sx={{\n                width: '100%',\n                '& .MuiIconButton-edgeEnd': {\n                  color: 'primary.main',\n                  '&:hover': { backgroundColor: alpha(theme.palette.primary.light, 0.1) },\n                },\n              }}\n              value={formatReadableBirthday()}\n            />\n          </LocalizationProvider>\n          <TextField\n            defaultValue={modifiedUser.postal_code}\n            label={settingsCopy.zip_code}\n            onChange={(e) => handleInput({ postal_code: e.target.value })}\n          />\n        </Stack>\n        <Stack>\n          <TextField\n            defaultValue={modifiedUser.credit_score}\n            label={settingsCopy.credit_score}\n            onChange={(e) => handleInput({ credit_score: Number(e.target.value) })}\n          />\n          {config.display_password_options_in_settings && <ResetPasswordAction />}\n          <Button\n            disabled={!hasUnsavedChanges}\n            onClick={handleSave}\n            sx={{ width: isMobile ? '100%' : 124 }}\n            variant=\"contained\"\n          >\n            {commonCopy.save_button}\n          </Button>\n        </Stack>\n      </Box>\n      <Dialog\n        copy={{ title: settingsCopy.discard_changes }}\n        isOpen={showLeaveDialog}\n        onClose={handleKeepEditing}\n        onSecondaryAction={handleLeaveDialog}\n        primaryText={settingsCopy.keep_editing}\n        secondaryText={settingsCopy.leave}\n      >\n        {settingsCopy.discard_changes_message}\n      </Dialog>\n    </>\n  )\n}\n\nexport default observer(ProfileForm)\n"],"mappings":"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"}

package/dist/transactions/components/shared/TransactionTable.es.js

@@ -103,10 +103,10 @@ var F = ({ height: i = "100dvh", onCategoryClick: s, onRowClick: c }) => {
       onCellClick: n,
       onCellKeyDown: h,
       rows: g,
-      slotProps: { baseIconButton: {
+      slotProps: { baseIconButton: { material: {
         color: "secondary",
         sx: { ml: 8 }
-      } },
+      } } },
       sx: {
         "& .split-row": { bgcolor: "background.default" },
         "& .excluded-row": {

package/dist/transactions/components/shared/TransactionTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionTable.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionTable.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Paper from '@mui/material/Paper'\nimport { DataGridPro, GridCellParams, GridColDef } from '@mui/x-data-grid-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\n\nimport {\n  AccountCell,\n  AmountCell,\n  CategoryCell,\n  DateCell,\n  FlagCell,\n  HeaderCell,\n  PayeeCell,\n} from './transactiontable/cells'\n\ninterface TransactionTableProps {\n  height?: number | string\n  onCategoryClick?: (guid: string) => void\n  onRowClick?: (guid: string) => void\n}\n\nconst TransactionTable: React.FC<TransactionTableProps> = ({\n  height = '100dvh',\n  onCategoryClick,\n  onRowClick,\n}) => {\n  const { onEvent } = useEvent()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { isLoading, sortedTransactions } = useTransactionStore()\n  const { clearExpandedSplits, toggleSplit } = useTransactionsUiStore()\n\n  React.useEffect(() => {\n    return () => clearExpandedSplits()\n  }, [])\n\n  const rows = React.useMemo(\n    () =>\n      sortedTransactions.map((transaction) => ({\n        id: transaction.guid,\n        isHovering: false,\n        ...transaction,\n      })),\n    [sortedTransactions],\n  )\n\n  const handleCellClick = ({ row: { id, guid, has_been_split }, field }: GridCellParams) => {\n    if (has_been_split) return toggleSplit(id)\n\n    if (field === 'category') {\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_TABLE_CLICK_CATEGORY, { guid })\n      return onCategoryClick?.(guid)\n    }\n\n    return onRowClick?.(guid)\n  }\n\n  const handleCellKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => {\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    handleCellClick(params)\n  }\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'flag',\n      headerName: '',\n      minWidth: 32,\n      width: 32,\n      sortable: false,\n      renderCell: (params) => <FlagCell {...params} />,\n      renderHeader: () => <span aria-label={copy.transaction_status} />,\n    },\n    {\n      field: 'date',\n      headerName: copy.date_title,\n      width: 103,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <DateCell {...params} />),\n      sortingOrder: ['desc', 'asc'],\n    },\n    {\n      cellClassName: 'vertical-align-center',\n      field: 'payee',\n      headerName: copy.payee_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <PayeeCell {...params} excludedText={copy.is_excluded} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'category',\n      headerName: copy.category_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <CategoryCell {...params} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'account',\n      headerName: copy.account_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <AccountCell {...params} />),\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'amount',\n      headerName: copy.amount_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: AmountCell,\n      align: 'right',\n      headerAlign: 'right',\n      sortingOrder: ['asc', 'desc'],\n    },\n  ]\n\n  return (\n    <Paper sx={{ height: height, px: 24, width: '100%', boxShadow: 'none' }}>\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        getCellClassName={(params) => {\n          if (params.row.parent_guid) return 'split-row'\n          if (params.row.is_hidden) return 'excluded-row'\n          return ''\n        }}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel: [{ field: 'date', sort: 'desc' }] } }}\n        loading={isLoading}\n        onCellClick={handleCellClick}\n        onCellKeyDown={handleCellKeyDown}\n        rows={rows}\n        slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n        sx={{\n          '& .split-row': {\n            bgcolor: 'background.default',\n          },\n          '& .excluded-row': {\n            bgcolor: 'grey.50',\n            color: 'text.secondary',\n          },\n        }}\n      />\n    </Paper>\n  )\n}\n\nexport default observer(TransactionTable)\n"],"mappings":"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"}
+{"version":3,"file":"TransactionTable.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionTable.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport Paper from '@mui/material/Paper'\nimport { DataGridPro, GridCellParams, GridColDef } from '@mui/x-data-grid-pro'\n\nimport {\n  ANALYTICS_EVENTS,\n  Loader,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useTransactionStore,\n} from '../../../common'\n\nimport { useTransactionsUiStore } from '../../context/hooks'\n\nimport {\n  AccountCell,\n  AmountCell,\n  CategoryCell,\n  DateCell,\n  FlagCell,\n  HeaderCell,\n  PayeeCell,\n} from './transactiontable/cells'\n\ninterface TransactionTableProps {\n  height?: number | string\n  onCategoryClick?: (guid: string) => void\n  onRowClick?: (guid: string) => void\n}\n\nconst TransactionTable: React.FC<TransactionTableProps> = ({\n  height = '100dvh',\n  onCategoryClick,\n  onRowClick,\n}) => {\n  const { onEvent } = useEvent()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { isLoading, sortedTransactions } = useTransactionStore()\n  const { clearExpandedSplits, toggleSplit } = useTransactionsUiStore()\n\n  React.useEffect(() => {\n    return () => clearExpandedSplits()\n  }, [])\n\n  const rows = React.useMemo(\n    () =>\n      sortedTransactions.map((transaction) => ({\n        id: transaction.guid,\n        isHovering: false,\n        ...transaction,\n      })),\n    [sortedTransactions],\n  )\n\n  const handleCellClick = ({ row: { id, guid, has_been_split }, field }: GridCellParams) => {\n    if (has_been_split) return toggleSplit(id)\n\n    if (field === 'category') {\n      onEvent(ANALYTICS_EVENTS.TRANSACTIONS_TABLE_CLICK_CATEGORY, { guid })\n      return onCategoryClick?.(guid)\n    }\n\n    return onRowClick?.(guid)\n  }\n\n  const handleCellKeyDown = (params: GridCellParams, event: React.KeyboardEvent) => {\n    if (event.key !== 'Enter' && event.key !== ' ') return\n    handleCellClick(params)\n  }\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  const columns: GridColDef[] = [\n    {\n      field: 'flag',\n      headerName: '',\n      minWidth: 32,\n      width: 32,\n      sortable: false,\n      renderCell: (params) => <FlagCell {...params} />,\n      renderHeader: () => <span aria-label={copy.transaction_status} />,\n    },\n    {\n      field: 'date',\n      headerName: copy.date_title,\n      width: 103,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <DateCell {...params} />),\n      sortingOrder: ['desc', 'asc'],\n    },\n    {\n      cellClassName: 'vertical-align-center',\n      field: 'payee',\n      headerName: copy.payee_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <PayeeCell {...params} excludedText={copy.is_excluded} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'category',\n      headerName: copy.category_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: (params) => <CategoryCell {...params} />,\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'account',\n      headerName: copy.account_title,\n      flex: 0.33,\n      renderHeader: HeaderCell,\n      renderCell: (params) => (params.row.parent_guid ? null : <AccountCell {...params} />),\n      sortingOrder: ['asc', 'desc'],\n    },\n    {\n      field: 'amount',\n      headerName: copy.amount_title,\n      flex: 0.25,\n      renderHeader: HeaderCell,\n      renderCell: AmountCell,\n      align: 'right',\n      headerAlign: 'right',\n      sortingOrder: ['asc', 'desc'],\n    },\n  ]\n\n  return (\n    <Paper sx={{ height: height, px: 24, width: '100%', boxShadow: 'none' }}>\n      <DataGridPro\n        columns={columns}\n        disableColumnFilter={true}\n        disableColumnMenu={true}\n        getCellClassName={(params) => {\n          if (params.row.parent_guid) return 'split-row'\n          if (params.row.is_hidden) return 'excluded-row'\n          return ''\n        }}\n        hideFooter={true}\n        initialState={{ sorting: { sortModel: [{ field: 'date', sort: 'desc' }] } }}\n        loading={isLoading}\n        onCellClick={handleCellClick}\n        onCellKeyDown={handleCellKeyDown}\n        rows={rows}\n        slotProps={{ baseIconButton: { material: { color: 'secondary', sx: { ml: 8 } } } }}\n        sx={{\n          '& .split-row': {\n            bgcolor: 'background.default',\n          },\n          '& .excluded-row': {\n            bgcolor: 'grey.50',\n            color: 'text.secondary',\n          },\n        }}\n      />\n    </Paper>\n  )\n}\n\nexport default observer(TransactionTable)\n"],"mappings":"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"}

package/dist/transactions/components/shared/transactiondetails/actions/DateAction.es.js

@@ -17,7 +17,7 @@ import M from "@mui/material/ListItemAvatar";
 import R from "@mui/material/ListItemButton";
 import w from "@mui/material/ListItemIcon";
 import B from "@mui/material/ListItemText";
-import { AdapterDateFns as F } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as F } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider as K } from "@mui/x-date-pickers/LocalizationProvider";
 import { StaticDatePicker as Y } from "@mui/x-date-pickers/StaticDatePicker";
 var dt = ({ transaction: e }) => {

package/dist/transactions/components/shared/transactiondetails/actions/DateAction.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/DateAction.tsx"],"sourcesContent":["import React from 'react'\n\nimport Avatar from '@mui/material/Avatar'\nimport Stack from '@mui/material/Stack'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../../common'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../../core/constants'\nimport { fromUnixUTC, toUnixUTC } from '../../../../../core/utils/DateUtil'\nimport type { Transaction } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\n\ninterface DateActionProps {\n  transaction: Transaction\n}\n\nconst DateAction: React.FC<DateActionProps> = ({ transaction }) => {\n  const { onEvent } = useEvent()\n  const { updateTransaction } = useTransactionStore()\n  const { updateManualTransaction } = useTransactionsUiStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<number>(transaction.date)\n\n  const handleDateSelected = (selectedDate: Date | null) => {\n    if (selectedDate) setDate(toUnixUTC(selectedDate))\n  }\n\n  const handleSave = async () => {\n    if (transaction.is_manual && !transaction.guid) {\n      updateManualTransaction({ ...transaction, date })\n      setOpen(false)\n      return\n    }\n\n    await updateTransaction({ ...transaction, date })\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })\n    setOpen(false)\n  }\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem className=\"mx-txn-date-action\" disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.date_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.FULL_MONTH_DAY_YEAR)}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={open}\n        onClose={() => setOpen(false)}\n        onPrimaryAction={handleSave}\n        primaryText={commonCopy.save_button}\n        secondaryText={commonCopy.cancel_button}\n        title={copy.date_edit_title}\n      >\n        <Stack alignItems=\"center\" mt={40}>\n          <LocalizationProvider\n            dateAdapter={AdapterDateFns}\n            localeText={{\n              nextMonth: copy.date_next_aria,\n              previousMonth: copy.date_prev_aria,\n              todayButtonLabel: commonCopy.date_range_picker.today,\n            }}\n          >\n            <StaticDatePicker\n              displayStaticWrapperAs=\"desktop\"\n              onChange={handleDateSelected}\n              slotProps={{ actionBar: { actions: ['today'] } }}\n              value={fromUnixUTC(date)}\n              views={['day']}\n            />\n          </LocalizationProvider>\n        </Stack>\n      </Drawer>\n    </ListItem>\n  )\n}\n\nexport default DateAction\n"],"mappings":"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"}
+{"version":3,"file":"DateAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/DateAction.tsx"],"sourcesContent":["import React from 'react'\n\nimport Avatar from '@mui/material/Avatar'\nimport Stack from '@mui/material/Stack'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'\nimport { StaticDatePicker } from '@mui/x-date-pickers/StaticDatePicker'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  useEvent,\n  useGlobalCopyStore,\n  useTransactionStore,\n} from '../../../../../common'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../../core/constants'\nimport { fromUnixUTC, toUnixUTC } from '../../../../../core/utils/DateUtil'\nimport type { Transaction } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\n\ninterface DateActionProps {\n  transaction: Transaction\n}\n\nconst DateAction: React.FC<DateActionProps> = ({ transaction }) => {\n  const { onEvent } = useEvent()\n  const { updateTransaction } = useTransactionStore()\n  const { updateManualTransaction } = useTransactionsUiStore()\n  const { common: commonCopy, transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n  const [open, setOpen] = React.useState(false)\n  const [date, setDate] = React.useState<number>(transaction.date)\n\n  const handleDateSelected = (selectedDate: Date | null) => {\n    if (selectedDate) setDate(toUnixUTC(selectedDate))\n  }\n\n  const handleSave = async () => {\n    if (transaction.is_manual && !transaction.guid) {\n      updateManualTransaction({ ...transaction, date })\n      setOpen(false)\n      return\n    }\n\n    await updateTransaction({ ...transaction, date })\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: transaction.guid })\n    setOpen(false)\n  }\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem className=\"mx-txn-date-action\" disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_DATE_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <Icon name=\"calendar_month\" sx={{ color: 'text.primary' }} />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.date_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {formatDate(fromUnixUTC(transaction.date), DATE_FORMATS_INTL.FULL_MONTH_DAY_YEAR)}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={open}\n        onClose={() => setOpen(false)}\n        onPrimaryAction={handleSave}\n        primaryText={commonCopy.save_button}\n        secondaryText={commonCopy.cancel_button}\n        title={copy.date_edit_title}\n      >\n        <Stack alignItems=\"center\" mt={40}>\n          <LocalizationProvider\n            dateAdapter={AdapterDateFns}\n            localeText={{\n              nextMonth: copy.date_next_aria,\n              previousMonth: copy.date_prev_aria,\n              todayButtonLabel: commonCopy.date_range_picker.today,\n            }}\n          >\n            <StaticDatePicker\n              displayStaticWrapperAs=\"desktop\"\n              onChange={handleDateSelected}\n              slotProps={{ actionBar: { actions: ['today'] } }}\n              value={fromUnixUTC(date)}\n              views={['day']}\n            />\n          </LocalizationProvider>\n        </Stack>\n      </Drawer>\n    </ListItem>\n  )\n}\n\nexport default DateAction\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoCA,IAAM,KAAA,CAAyC,EAAE,aAAA,EAAA,MAAkB;AACjE,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,mBAAA,EAAA,IAAsB,EAAoB,GAC5C,EAAE,yBAAA,EAAA,IAA4B,EAAuB,GACrD,EAAE,QAAQ,GAAY,cAAc,EAAA,IAAS,EAAmB,GAEhE,IAAQ,EAAS,GACjB,CAAC,GAAM,CAAA,IAAW,EAAM,SAAS,EAAK,GACtC,CAAC,GAAM,CAAA,IAAW,EAAM,SAAiB,EAAY,IAAI,GAEzD,IAAA,CAAsB,MAA8B;AACxD,IAAI,KAAc,EAAQ,EAAU,CAAY,CAAC;AAAA,EACnD,GAEM,IAAa,YAAY;AAC7B,QAAI,EAAY,aAAa,CAAC,EAAY,MAAM;AAC9C,MAAA,EAAwB;AAAA,QAAE,GAAG;AAAA,QAAa,MAAA;AAAA,MAAK,CAAC,GAChD,EAAQ,EAAK;AACb;AAAA,IACF;AAEA,UAAM,EAAkB;AAAA,MAAE,GAAG;AAAA,MAAa,MAAA;AAAA,IAAK,CAAC,GAChD,EAAQ,EAAiB,gCAAgC,EAAE,kBAAkB,EAAY,KAAK,CAAC,GAC/F,EAAQ,EAAK;AAAA,EACf,GAEM,IAAU,EAAM,QAAQ,SAAS,SAAS,aAAa;AAE7D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAU,WAAU;AAAA,IAAqB,gBAAgB;AAAA,IAAM,gBAAgB;AAAA,IAA/E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,SAAA,MAAe;AACb,QAAA,EAAQ,EAAgB,yBAAyB,GACjD,EAAQ,EAAI;AAAA,MACd;AAAA,MAJF,UAAA;AAAA,QAME,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAQ,IAAI,EAAE,SAAS,EAAQ;AAAA,UAAG,SAAQ;AAAA,UACxC,UAAA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAK;AAAA,YAAiB,IAAI,EAAE,OAAO,eAAe;AAAA,UAAI,CAAA;AAAA,QACtD,CAAA,EACM,CAAA;AAAA,QAChB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS,EAAK;AAAA,UACd,WACE,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,IAAI,EAAE,OAAO,eAAe;AAAA,YAAG,SAAQ;AAAA,YACtD,UAAA,EAAW,EAAY,EAAY,IAAI,GAAG,EAAkB,mBAAmB;AAAA,UAC5E,CAAA;AAAA,UAER,WAAW,EAAE,SAAS;AAAA,YAAE,SAAS;AAAA,YAAW,UAAU;AAAA,YAAI,YAAY;AAAA,UAAS,EAAE;AAAA,QAClF,CAAA;AAAA,QACD,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAK;AAAA,UAAgB,IAAI,EAAE,OAAO,eAAe;AAAA,QAAI,CAAA,EAC/C,CAAA;AAAA,MACA;AAAA,IAEhB,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAgB,EAAW;AAAA,MAC3B,QAAQ;AAAA,MACR,SAAA,MAAe,EAAQ,EAAK;AAAA,MAC5B,iBAAiB;AAAA,MACjB,aAAa,EAAW;AAAA,MACxB,eAAe,EAAW;AAAA,MAC1B,OAAO,EAAK;AAAA,MAEZ,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAO,YAAW;AAAA,QAAS,IAAI;AAAA,QAC7B,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,aAAa;AAAA,UACb,YAAY;AAAA,YACV,WAAW,EAAK;AAAA,YAChB,eAAe,EAAK;AAAA,YACpB,kBAAkB,EAAW,kBAAkB;AAAA,UACjD;AAAA,UAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,YACE,wBAAuB;AAAA,YACvB,UAAU;AAAA,YACV,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,OAAO,EAAE,EAAE;AAAA,YAC/C,OAAO,EAAY,CAAI;AAAA,YACvB,OAAO,CAAC,KAAK;AAAA,UACd,CAAA;AAAA,QACmB,CAAA;AAAA,MACjB,CAAA;AAAA,IACD,CAAA,CACA;AAAA;AAEd"}

package/dist/trends/components/trendstable/AccessibleSortIcon.d.ts

@@ -1,13 +1,6 @@
 import { default as React } from 'react';
-import { GridSortDirection } from '@mui/x-data-grid-pro';
-interface AccessibleSortIconProps {
-    field: string;
-    direction: GridSortDirection;
-    index: number | undefined;
-    sortingOrder: readonly GridSortDirection[];
-    disabled?: boolean;
-    className?: string;
-}
+import { GridSlotProps } from '@mui/x-data-grid-pro';
+type AccessibleSortIconProps = GridSlotProps['columnHeaderSortIcon'];
 declare function AccessibleSortIconRaw({ direction, index, sortingOrder, disabled, className, field, }: AccessibleSortIconProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const AccessibleSortIcon: React.MemoExoticComponent<typeof AccessibleSortIconRaw>;
 export {};

package/dist/trends/components/trendstable/AccessibleSortIcon.es.js

@@ -1,49 +1,48 @@
-import b from "react";
+import I from "react";
 import { jsx as n } from "react/jsx-runtime";
 import { styled as g } from "@mui/material/styles";
-import B from "@mui/material/IconButton";
-import S from "@mui/material/Badge";
-import { useGridApiContext as h, useGridRootProps as y } from "@mui/x-data-grid-pro";
-var C = g("div")({
+import B from "@mui/material/Badge";
+import { useGridApiContext as S, useGridRootProps as h } from "@mui/x-data-grid-pro";
+var y = g("div")({
   display: "flex",
   visibility: "hidden",
   width: 0
 });
-function v({ direction: t, index: s, sortingOrder: m, disabled: f, className: l, field: c }) {
-  const p = h(), e = y();
-  let o = null;
+function C({ direction: e, index: r, sortingOrder: m, disabled: f, className: l, field: c }) {
+  const p = S(), o = h();
+  let t = null;
   const a = {};
-  if (t === "asc" ? o = e.slots.columnSortedAscendingIcon : t === "desc" ? o = e.slots.columnSortedDescendingIcon : (o = e.slots.columnUnsortedIcon ?? null, a.sortingOrder = m), !o) return null;
+  if (e === "asc" ? t = o.slots.columnSortedAscendingIcon : e === "desc" ? t = o.slots.columnSortedDescendingIcon : (t = o.slots.columnUnsortedIcon ?? null, a.sortingOrder = m), !t) return null;
   const i = p.current.getColumn(c)?.headerName ?? c;
-  let r = "";
-  t === "asc" ? r = ", sorted ascending" : t === "desc" && (r = ", sorted descending");
-  const d = `Sort by ${i}${["Total", "Category"].includes(i) ? "" : " category totals"}${r}`, I = /* @__PURE__ */ n(o, {
+  let s = "";
+  e === "asc" ? s = ", sorted ascending" : e === "desc" && (s = ", sorted descending");
+  const d = `Sort by ${i}${["Total", "Category"].includes(i) ? "" : " category totals"}${s}`, b = /* @__PURE__ */ n(t, {
     className: "MuiDataGrid-sortIcon",
     fontSize: "small",
     ...a
-  }), u = /* @__PURE__ */ n(B, {
+  }), u = /* @__PURE__ */ n(o.slots.baseIconButton, {
     disabled: f,
     size: "small",
     tabIndex: -1,
-    ...e.slotProps?.baseIconButton,
+    ...o.slotProps?.baseIconButton,
     "aria-label": d,
     className: `MuiDataGrid-sortButton${l ? ` ${l}` : ""}`,
     title: d,
-    children: I
+    children: b
   });
-  return /* @__PURE__ */ n(C, {
+  return /* @__PURE__ */ n(y, {
     className: "MuiDataGrid-iconButtonContainer",
-    children: s != null ? /* @__PURE__ */ n(S, {
-      badgeContent: s,
+    children: r != null ? /* @__PURE__ */ n(B, {
+      badgeContent: r,
       color: "default",
       overlap: "circular",
       children: u
     }) : u
   });
 }
-var P = b.memo(v);
+var D = I.memo(C);
 export {
-  P as AccessibleSortIcon
+  D as AccessibleSortIcon
 };
 
 //# sourceMappingURL=AccessibleSortIcon.es.js.map

package/dist/trends/components/trendstable/AccessibleSortIcon.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessibleSortIcon.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/AccessibleSortIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport Badge from '@mui/material/Badge'\nimport IconButton from '@mui/material/IconButton'\nimport { useGridApiContext, useGridRootProps } from '@mui/x-data-grid-pro'\nimport type { GridSortDirection } from '@mui/x-data-grid-pro'\n\nimport { styled } from '@mui/material/styles'\n\nconst IconButtonContainer = styled('div')({\n  display: 'flex',\n  visibility: 'hidden',\n  width: 0,\n})\n\ninterface AccessibleSortIconProps {\n  field: string\n  direction: GridSortDirection\n  index: number | undefined\n  sortingOrder: readonly GridSortDirection[]\n  disabled?: boolean\n  className?: string\n}\n\nfunction AccessibleSortIconRaw({\n  direction,\n  index,\n  sortingOrder,\n  disabled,\n  className,\n  field,\n}: AccessibleSortIconProps) {\n  const apiRef = useGridApiContext()\n  const rootProps = useGridRootProps()\n\n  let Icon: React.JSXElementConstructor<any> | null = null\n  const iconProps: Record<string, unknown> = {}\n\n  if (direction === 'asc') {\n    Icon = rootProps.slots.columnSortedAscendingIcon\n  } else if (direction === 'desc') {\n    Icon = rootProps.slots.columnSortedDescendingIcon\n  } else {\n    Icon = rootProps.slots.columnUnsortedIcon ?? null\n    iconProps.sortingOrder = sortingOrder\n  }\n\n  if (!Icon) return null\n\n  const column = apiRef.current.getColumn(field)\n  const columnName = column?.headerName ?? field\n\n  let sortStateLabel = ''\n  if (direction === 'asc') sortStateLabel = ', sorted ascending'\n  else if (direction === 'desc') sortStateLabel = ', sorted descending'\n\n  const sortTypeLabel = !['Total', 'Category'].includes(columnName) ? ' category totals' : ''\n  const ariaLabel = `Sort by ${columnName}${sortTypeLabel}${sortStateLabel}`\n\n  const iconElement = <Icon className=\"MuiDataGrid-sortIcon\" fontSize=\"small\" {...iconProps} />\n\n  const iconButton = (\n    <IconButton\n      disabled={disabled}\n      size=\"small\"\n      tabIndex={-1}\n      {...(rootProps.slotProps?.baseIconButton as Record<string, unknown>)}\n      aria-label={ariaLabel}\n      className={`MuiDataGrid-sortButton${className ? ` ${className}` : ''}`}\n      title={ariaLabel}\n    >\n      {iconElement}\n    </IconButton>\n  )\n\n  return (\n    <IconButtonContainer className=\"MuiDataGrid-iconButtonContainer\">\n      {index != null ? (\n        <Badge badgeContent={index} color=\"default\" overlap=\"circular\">\n          {iconButton}\n        </Badge>\n      ) : (\n        iconButton\n      )}\n    </IconButtonContainer>\n  )\n}\n\nexport const AccessibleSortIcon = React.memo(AccessibleSortIconRaw)\n"],"mappings":";;;;;;AASA,IAAM,IAAsB,EAAO,KAAK,EAAE;AAAA,EACxC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACT,CAAC;AAWD,SAAS,EAAsB,EAC7B,WAAA,GACA,OAAA,GACA,cAAA,GACA,UAAA,GACA,WAAA,GACA,OAAA,EAAA,GAC0B;AAC1B,QAAM,IAAS,EAAkB,GAC3B,IAAY,EAAiB;AAEnC,MAAI,IAAgD;AACpD,QAAM,IAAqC,CAAC;AAW5C,MATI,MAAc,QAChB,IAAO,EAAU,MAAM,4BACd,MAAc,SACvB,IAAO,EAAU,MAAM,8BAEvB,IAAO,EAAU,MAAM,sBAAsB,MAC7C,EAAU,eAAe,IAGvB,CAAC,EAAM,QAAO;AAGlB,QAAM,IADS,EAAO,QAAQ,UAAU,CACrB,GAAQ,cAAc;AAEzC,MAAI,IAAiB;AACrB,EAAI,MAAc,QAAO,IAAiB,uBACjC,MAAc,WAAQ,IAAiB;AAGhD,QAAM,IAAY,WAAW,CAAA,GADN,CAAC,SAAS,UAAU,EAAE,SAAS,CAAU,IAAyB,KAArB,kBAAqB,GAC/B,CAAA,IAEpD,IAAc,gBAAA,EAAC,GAAD;AAAA,IAAM,WAAU;AAAA,IAAuB,UAAS;AAAA,IAAQ,GAAI;AAAA,EAAY,CAAA,GAEtF,IACJ,gBAAA,EAAC,GAAD;AAAA,IACY,UAAA;AAAA,IACV,MAAK;AAAA,IACL,UAAU;AAAA,IACV,GAAK,EAAU,WAAW;AAAA,IAC1B,cAAY;AAAA,IACZ,WAAW,yBAAyB,IAAY,IAAI,CAAA,KAAc,EAAA;AAAA,IAClE,OAAO;AAAA,IAEN,UAAA;AAAA,EACS,CAAA;AAGd,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,WAAU;AAAA,IAC5B,UAAA,KAAS,OACR,gBAAA,EAAC,GAAD;AAAA,MAAO,cAAc;AAAA,MAAO,OAAM;AAAA,MAAU,SAAQ;AAAA,MACjD,UAAA;AAAA,IACI,CAAA,IAEP;AAAA,EAEiB,CAAA;AAEzB;AAEA,IAAa,IAAqB,EAAM,KAAK,CAAqB"}
+{"version":3,"file":"AccessibleSortIcon.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/AccessibleSortIcon.tsx"],"sourcesContent":["import React from 'react'\n\nimport Badge from '@mui/material/Badge'\nimport { useGridApiContext, useGridRootProps } from '@mui/x-data-grid-pro'\nimport type { GridSlotProps } from '@mui/x-data-grid-pro'\n\nimport { styled } from '@mui/material/styles'\n\nconst IconButtonContainer = styled('div')({\n  display: 'flex',\n  visibility: 'hidden',\n  width: 0,\n})\n\ntype AccessibleSortIconProps = GridSlotProps['columnHeaderSortIcon']\n\nfunction AccessibleSortIconRaw({\n  direction,\n  index,\n  sortingOrder,\n  disabled,\n  className,\n  field,\n}: AccessibleSortIconProps) {\n  const apiRef = useGridApiContext()\n  const rootProps = useGridRootProps()\n\n  let Icon: React.JSXElementConstructor<any> | null = null\n  const iconProps: Record<string, unknown> = {}\n\n  if (direction === 'asc') {\n    Icon = rootProps.slots.columnSortedAscendingIcon\n  } else if (direction === 'desc') {\n    Icon = rootProps.slots.columnSortedDescendingIcon\n  } else {\n    Icon = rootProps.slots.columnUnsortedIcon ?? null\n    iconProps.sortingOrder = sortingOrder\n  }\n\n  if (!Icon) return null\n\n  const column = apiRef.current.getColumn(field)\n  const columnName = column?.headerName ?? field\n\n  let sortStateLabel = ''\n  if (direction === 'asc') sortStateLabel = ', sorted ascending'\n  else if (direction === 'desc') sortStateLabel = ', sorted descending'\n\n  const sortTypeLabel = !['Total', 'Category'].includes(columnName) ? ' category totals' : ''\n  const ariaLabel = `Sort by ${columnName}${sortTypeLabel}${sortStateLabel}`\n\n  const iconElement = <Icon className=\"MuiDataGrid-sortIcon\" fontSize=\"small\" {...iconProps} />\n\n  const iconButton = (\n    <rootProps.slots.baseIconButton\n      disabled={disabled}\n      size=\"small\"\n      tabIndex={-1}\n      {...rootProps.slotProps?.baseIconButton}\n      aria-label={ariaLabel}\n      className={`MuiDataGrid-sortButton${className ? ` ${className}` : ''}`}\n      title={ariaLabel}\n    >\n      {iconElement}\n    </rootProps.slots.baseIconButton>\n  )\n\n  return (\n    <IconButtonContainer className=\"MuiDataGrid-iconButtonContainer\">\n      {index != null ? (\n        <Badge badgeContent={index} color=\"default\" overlap=\"circular\">\n          {iconButton}\n        </Badge>\n      ) : (\n        iconButton\n      )}\n    </IconButtonContainer>\n  )\n}\n\nexport const AccessibleSortIcon = React.memo(AccessibleSortIconRaw)\n"],"mappings":";;;;;AAQA,IAAM,IAAsB,EAAO,KAAK,EAAE;AAAA,EACxC,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,OAAO;AACT,CAAC;AAID,SAAS,EAAsB,EAC7B,WAAA,GACA,OAAA,GACA,cAAA,GACA,UAAA,GACA,WAAA,GACA,OAAA,EAAA,GAC0B;AAC1B,QAAM,IAAS,EAAkB,GAC3B,IAAY,EAAiB;AAEnC,MAAI,IAAgD;AACpD,QAAM,IAAqC,CAAC;AAW5C,MATI,MAAc,QAChB,IAAO,EAAU,MAAM,4BACd,MAAc,SACvB,IAAO,EAAU,MAAM,8BAEvB,IAAO,EAAU,MAAM,sBAAsB,MAC7C,EAAU,eAAe,IAGvB,CAAC,EAAM,QAAO;AAGlB,QAAM,IADS,EAAO,QAAQ,UAAU,CACrB,GAAQ,cAAc;AAEzC,MAAI,IAAiB;AACrB,EAAI,MAAc,QAAO,IAAiB,uBACjC,MAAc,WAAQ,IAAiB;AAGhD,QAAM,IAAY,WAAW,CAAA,GADN,CAAC,SAAS,UAAU,EAAE,SAAS,CAAU,IAAyB,KAArB,kBAAqB,GAC/B,CAAA,IAEpD,IAAc,gBAAA,EAAC,GAAD;AAAA,IAAM,WAAU;AAAA,IAAuB,UAAS;AAAA,IAAQ,GAAI;AAAA,EAAY,CAAA,GAEtF,IACJ,gBAAA,EAAC,EAAU,MAAM,gBAAjB;AAAA,IACY,UAAA;AAAA,IACV,MAAK;AAAA,IACL,UAAU;AAAA,IACV,GAAI,EAAU,WAAW;AAAA,IACzB,cAAY;AAAA,IACZ,WAAW,yBAAyB,IAAY,IAAI,CAAA,KAAc,EAAA;AAAA,IAClE,OAAO;AAAA,IAEN,UAAA;AAAA,EAC6B,CAAA;AAGlC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,WAAU;AAAA,IAC5B,UAAA,KAAS,OACR,gBAAA,EAAC,GAAD;AAAA,MAAO,cAAc;AAAA,MAAO,OAAM;AAAA,MAAU,SAAQ;AAAA,MACjD,UAAA;AAAA,IACI,CAAA,IAEP;AAAA,EAEiB,CAAA;AAEzB;AAEA,IAAa,IAAqB,EAAM,KAAK,CAAqB"}

package/dist/trends/components/trendstable/TrendsTable.es.js

@@ -33,10 +33,10 @@ var S = () => /* @__PURE__ */ d(p, {}), t = (r) => r.id !== "total" && !r.isPare
     pinnedRows: { bottom: n && a.length > 0 ? [n] : [] },
     rowHeight: 64,
     rows: a,
-    slotProps: { baseIconButton: {
+    slotProps: { baseIconButton: { material: {
       color: "secondary",
       sx: { ml: 8 }
-    } },
+    } } },
     slots: {
       columnHeaderSortIcon: y,
       noRowsOverlay: S

package/dist/trends/components/trendstable/TrendsTable.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent, ZeroState } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\n// The grid's default no-rows overlay is a bare \"No rows\". Render the same shared\n// zero state the app's other empty lists use instead. Wrapped because the\n// slot's prop type doesn't match ZeroState's; positioning is handled by the\n// grid's own overlay wrapper.\nconst TrendsTableNoRowsOverlay = () => <ZeroState />\n\ninterface TrendsTableProps {\n  columns: GridColDef[]\n  onRowClick?: (category: string) => void\n  rows: TrendsTableRow[]\n  totalRow?: TrendsTableRow\n}\n\n// The pinned total row and the synthetic \"General [Parent]\" row (isParent: true,\n// only present in a drilled-in table) are summaries, not navigation destinations.\nconst isRowNavigable = (row: TrendsTableRow) => row.id !== 'total' && !row.isParent\n\nexport const TrendsTable = ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const isLightMode = theme.palette.mode === 'light'\n  const isRowInteractive = Boolean(onRowClick)\n\n  // Shared by pointer and keyboard activation; non-navigable rows are dropped so\n  // neither path acts on them.\n  const activateRow = (row: TrendsTableRow) => {\n    if (!isRowNavigable(row)) return\n    onRowClick?.(row.category_guid)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n      ...TRENDS_ANALYTICS_METADATA,\n      // Fall back to the row's display name for user-created categories, which\n      // are absent from the static default-category map.\n      listItem: CategoryGuidToName[row.category_guid] ?? row.category,\n      // A top-level row (guid is its own top level) drills down; a sub-category\n      // row opens the drawer.\n      destination: row.top_level_category_guid === row.category_guid ? 'drill_down' : 'drawer',\n    })\n  }\n\n  return (\n    <DataGridPro\n      // autoHeight sizes the grid to its content instead of measuring a flex\n      // parent. The parent is an overflow:auto Stack with no fixed height, so the\n      // default virtualized layout makes x-data-grid's useGridDimensions loop on\n      // its own ResizeObserver measurement (a feedback loop that spikes to React's\n      // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n      // sizing removes the measurement feedback and is correct for this unbounded,\n      // page-scrolling table.\n      autoHeight={true}\n      columns={columns}\n      disableColumnFilter={true}\n      disableColumnMenu={true}\n      getRowClassName={(params) => (isRowNavigable(params.row) ? '' : 'trends-row-static')}\n      hideFooter={true}\n      initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n      onCellKeyDown={(params, event) => {\n        // Rows are reachable only by grid cell navigation, so Enter/Space on a\n        // cell is the keyboard equivalent of clicking the row. Guard before\n        // preventDefault so a non-navigable row keeps the grid's native key\n        // handling instead of being swallowed with no action. Space would\n        // otherwise scroll the grid.\n        if (event.key !== 'Enter' && event.key !== ' ') return\n        if (!isRowNavigable(params.row)) return\n        event.preventDefault()\n        activateRow(params.row)\n      }}\n      onRowClick={(r) => activateRow(r.row)}\n      pinnedRows={{\n        // A pinned \"Total $0.00\" is meaningless with no rows above it, and while it\n        // is present the grid suppresses the no-rows overlay entirely. Drop it so the\n        // empty table shows the zero state instead.\n        bottom: totalRow && rows.length > 0 ? [totalRow] : [],\n      }}\n      rowHeight={64}\n      rows={rows}\n      slotProps={{ baseIconButton: { color: 'secondary', sx: { ml: 8 } } }}\n      slots={{\n        columnHeaderSortIcon: AccessibleSortIcon,\n        noRowsOverlay: TrendsTableNoRowsOverlay,\n      }}\n      sortingOrder={['asc', 'desc']}\n      sx={{\n        borderColor: 'divider',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderRadius: 2,\n        '& .MuiDataGrid-columnHeaders': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n          borderBottom: 'none',\n        },\n        '& .trends-table-header': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n        },\n        '& .MuiDataGrid-row': { cursor: isRowInteractive ? 'pointer' : 'default' },\n        // getRowClassName stamps trends-row-static on every non-navigable row,\n        // including the pinned total row.\n        '& .trends-row-static': { cursor: 'default' },\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAiC,gBAAA,EAAC,GAAD,CAAY,CAAA,GAW7C,IAAA,CAAkB,MAAwB,EAAI,OAAO,WAAW,CAAC,EAAI,UAE9D,IAAA,CAAe,EAAE,SAAA,GAAS,YAAA,GAAY,MAAA,GAAM,UAAA,EAAA,MAAiC;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAc,EAAM,QAAQ,SAAS,SACrC,IAAmB,EAAQ,GAI3B,IAAA,CAAe,MAAwB;AAC3C,IAAK,EAAe,CAAG,MACvB,IAAa,EAAI,aAAa,GAC9B,EAAQ,EAAiB,wBAAwB;AAAA,MAC/C,GAAG;AAAA,MAGH,UAAU,EAAmB,EAAI,aAAA,KAAkB,EAAI;AAAA,MAGvD,aAAa,EAAI,4BAA4B,EAAI,gBAAgB,eAAe;AAAA,IAClF,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAQE,YAAY;AAAA,IACH,SAAA;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,iBAAA,CAAkB,MAAY,EAAe,EAAO,GAAG,IAAI,KAAK;AAAA,IAChE,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,WAAW,CAAC;AAAA,MAAE,OAAO;AAAA,MAAY,MAAM;AAAA,IAAM,CAAC,EAAE,EAAE;AAAA,IAC7E,eAAA,CAAgB,GAAQ,MAAU;AAMhC,MAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OACtC,EAAe,EAAO,GAAG,MAC9B,EAAM,eAAe,GACrB,EAAY,EAAO,GAAG;AAAA,IACxB;AAAA,IACA,YAAA,CAAa,MAAM,EAAY,EAAE,GAAG;AAAA,IACpC,YAAY,EAIV,QAAQ,KAAY,EAAK,SAAS,IAAI,CAAC,CAAQ,IAAI,CAAC,EACtD;AAAA,IACA,WAAW;AAAA,IACL,MAAA;AAAA,IACN,WAAW,EAAE,gBAAgB;AAAA,MAAE,OAAO;AAAA,MAAa,IAAI,EAAE,IAAI,EAAE;AAAA,IAAE,EAAE;AAAA,IACnE,OAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,eAAe;AAAA,IACjB;AAAA,IACA,cAAc,CAAC,OAAO,MAAM;AAAA,IAC5B,IAAI;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gCAAgC;AAAA,QAC9B,SAAS,IAAc,eAAe;AAAA,QACtC,cAAc;AAAA,MAChB;AAAA,MACA,0BAA0B,EACxB,SAAS,IAAc,eAAe,cACxC;AAAA,MACA,sBAAsB,EAAE,QAAQ,IAAmB,YAAY,UAAU;AAAA,MAGzE,wBAAwB,EAAE,QAAQ,UAAU;AAAA,IAC9C;AAAA,EACD,CAAA;AAEL"}
+{"version":3,"file":"TrendsTable.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/TrendsTable.tsx"],"sourcesContent":["import { ANALYTICS_EVENTS, useEvent, ZeroState } from '../../../common'\nimport { CategoryGuidToName } from '../../../core/constants'\nimport { TRENDS_ANALYTICS_METADATA } from '../../constants/TrendsWidget'\nimport { DataGridPro, GridColDef } from '@mui/x-data-grid-pro'\nimport { useTheme } from '@mui/material/styles'\nimport { TrendsTableRow } from '../../utils/TrendsTable'\nimport { AccessibleSortIcon } from './AccessibleSortIcon'\n\n// The grid's default no-rows overlay is a bare \"No rows\". Render the same shared\n// zero state the app's other empty lists use instead. Wrapped because the\n// slot's prop type doesn't match ZeroState's; positioning is handled by the\n// grid's own overlay wrapper.\nconst TrendsTableNoRowsOverlay = () => <ZeroState />\n\ninterface TrendsTableProps {\n  columns: GridColDef[]\n  onRowClick?: (category: string) => void\n  rows: TrendsTableRow[]\n  totalRow?: TrendsTableRow\n}\n\n// The pinned total row and the synthetic \"General [Parent]\" row (isParent: true,\n// only present in a drilled-in table) are summaries, not navigation destinations.\nconst isRowNavigable = (row: TrendsTableRow) => row.id !== 'total' && !row.isParent\n\nexport const TrendsTable = ({ columns, onRowClick, rows, totalRow }: TrendsTableProps) => {\n  const theme = useTheme()\n  const { onEvent } = useEvent()\n  const isLightMode = theme.palette.mode === 'light'\n  const isRowInteractive = Boolean(onRowClick)\n\n  // Shared by pointer and keyboard activation; non-navigable rows are dropped so\n  // neither path acts on them.\n  const activateRow = (row: TrendsTableRow) => {\n    if (!isRowNavigable(row)) return\n    onRowClick?.(row.category_guid)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_LIST_ITEM, {\n      ...TRENDS_ANALYTICS_METADATA,\n      // Fall back to the row's display name for user-created categories, which\n      // are absent from the static default-category map.\n      listItem: CategoryGuidToName[row.category_guid] ?? row.category,\n      // A top-level row (guid is its own top level) drills down; a sub-category\n      // row opens the drawer.\n      destination: row.top_level_category_guid === row.category_guid ? 'drill_down' : 'drawer',\n    })\n  }\n\n  return (\n    <DataGridPro\n      // autoHeight sizes the grid to its content instead of measuring a flex\n      // parent. The parent is an overflow:auto Stack with no fixed height, so the\n      // default virtualized layout makes x-data-grid's useGridDimensions loop on\n      // its own ResizeObserver measurement (a feedback loop that spikes to React's\n      // \"Maximum update depth exceeded\" under a starved CI worker in jsdom). Content\n      // sizing removes the measurement feedback and is correct for this unbounded,\n      // page-scrolling table.\n      autoHeight={true}\n      columns={columns}\n      disableColumnFilter={true}\n      disableColumnMenu={true}\n      getRowClassName={(params) => (isRowNavigable(params.row) ? '' : 'trends-row-static')}\n      hideFooter={true}\n      initialState={{ sorting: { sortModel: [{ field: 'category', sort: 'asc' }] } }}\n      onCellKeyDown={(params, event) => {\n        // Rows are reachable only by grid cell navigation, so Enter/Space on a\n        // cell is the keyboard equivalent of clicking the row. Guard before\n        // preventDefault so a non-navigable row keeps the grid's native key\n        // handling instead of being swallowed with no action. Space would\n        // otherwise scroll the grid.\n        if (event.key !== 'Enter' && event.key !== ' ') return\n        if (!isRowNavigable(params.row)) return\n        event.preventDefault()\n        activateRow(params.row)\n      }}\n      onRowClick={(r) => activateRow(r.row)}\n      pinnedRows={{\n        // A pinned \"Total $0.00\" is meaningless with no rows above it, and while it\n        // is present the grid suppresses the no-rows overlay entirely. Drop it so the\n        // empty table shows the zero state instead.\n        bottom: totalRow && rows.length > 0 ? [totalRow] : [],\n      }}\n      rowHeight={64}\n      rows={rows}\n      slotProps={{ baseIconButton: { material: { color: 'secondary', sx: { ml: 8 } } } }}\n      slots={{\n        columnHeaderSortIcon: AccessibleSortIcon,\n        noRowsOverlay: TrendsTableNoRowsOverlay,\n      }}\n      sortingOrder={['asc', 'desc']}\n      sx={{\n        borderColor: 'divider',\n        borderWidth: 1,\n        borderStyle: 'solid',\n        borderRadius: 2,\n        '& .MuiDataGrid-columnHeaders': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n          borderBottom: 'none',\n        },\n        '& .trends-table-header': {\n          bgcolor: isLightMode ? 'neutral.50' : 'neutral.800',\n        },\n        '& .MuiDataGrid-row': { cursor: isRowInteractive ? 'pointer' : 'default' },\n        // getRowClassName stamps trends-row-static on every non-navigable row,\n        // including the pinned total row.\n        '& .trends-row-static': { cursor: 'default' },\n      }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAA,MAAiC,gBAAA,EAAC,GAAD,CAAY,CAAA,GAW7C,IAAA,CAAkB,MAAwB,EAAI,OAAO,WAAW,CAAC,EAAI,UAE9D,IAAA,CAAe,EAAE,SAAA,GAAS,YAAA,GAAY,MAAA,GAAM,UAAA,EAAA,MAAiC;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,IAAc,EAAM,QAAQ,SAAS,SACrC,IAAmB,EAAQ,GAI3B,IAAA,CAAe,MAAwB;AAC3C,IAAK,EAAe,CAAG,MACvB,IAAa,EAAI,aAAa,GAC9B,EAAQ,EAAiB,wBAAwB;AAAA,MAC/C,GAAG;AAAA,MAGH,UAAU,EAAmB,EAAI,aAAA,KAAkB,EAAI;AAAA,MAGvD,aAAa,EAAI,4BAA4B,EAAI,gBAAgB,eAAe;AAAA,IAClF,CAAC;AAAA,EACH;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAQE,YAAY;AAAA,IACH,SAAA;AAAA,IACT,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,iBAAA,CAAkB,MAAY,EAAe,EAAO,GAAG,IAAI,KAAK;AAAA,IAChE,YAAY;AAAA,IACZ,cAAc,EAAE,SAAS,EAAE,WAAW,CAAC;AAAA,MAAE,OAAO;AAAA,MAAY,MAAM;AAAA,IAAM,CAAC,EAAE,EAAE;AAAA,IAC7E,eAAA,CAAgB,GAAQ,MAAU;AAMhC,MAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,OACtC,EAAe,EAAO,GAAG,MAC9B,EAAM,eAAe,GACrB,EAAY,EAAO,GAAG;AAAA,IACxB;AAAA,IACA,YAAA,CAAa,MAAM,EAAY,EAAE,GAAG;AAAA,IACpC,YAAY,EAIV,QAAQ,KAAY,EAAK,SAAS,IAAI,CAAC,CAAQ,IAAI,CAAC,EACtD;AAAA,IACA,WAAW;AAAA,IACL,MAAA;AAAA,IACN,WAAW,EAAE,gBAAgB,EAAE,UAAU;AAAA,MAAE,OAAO;AAAA,MAAa,IAAI,EAAE,IAAI,EAAE;AAAA,IAAE,EAAE,EAAE;AAAA,IACjF,OAAO;AAAA,MACL,sBAAsB;AAAA,MACtB,eAAe;AAAA,IACjB;AAAA,IACA,cAAc,CAAC,OAAO,MAAM;AAAA,IAC5B,IAAI;AAAA,MACF,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,MACb,cAAc;AAAA,MACd,gCAAgC;AAAA,QAC9B,SAAS,IAAc,eAAe;AAAA,QACtC,cAAc;AAAA,MAChB;AAAA,MACA,0BAA0B,EACxB,SAAS,IAAc,eAAe,cACxC;AAAA,MACA,sBAAsB,EAAE,QAAQ,IAAmB,YAAY,UAAU;AAAA,MAGzE,wBAAwB,EAAE,QAAQ,UAAU;AAAA,IAC9C;AAAA,EACD,CAAA;AAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.4.71",
+  "version": "9.5.0-alpha.al0",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",
@@ -193,6 +193,7 @@
     "build": "tsc && vite build && yarn verify:exports",
     "build-storybook": "storybook build -o compiled_docs",
     "verify:exports": "node scripts/verify-exports.mjs",
+    "verify:mui-x": "test \"$(yarn info -AR --name-only | grep -cE '@mui/x-(date-pickers|data-grid)(-pro)?@')\" = 4",
     "dev": "storybook dev -p 8106",
     "lint": "oxlint src",
     "lint:fix": "oxlint --fix src",
@@ -214,13 +215,9 @@
     "@mui/material": "7.3.11",
     "@mui/system": "7.3.11",
     "@mui/x-charts": "^8.29.2",
-    "@mui/x-data-grid": "7.29.13",
-    "@mui/x-data-grid-pro": "^7.29.13",
-    "@mui/x-date-pickers": "^7.29.4",
-    "@mui/x-date-pickers-pro": "^7.29.4",
     "@mxenabled/cssinjs": "^0.6.0",
     "@mxenabled/mx-icons": "^2.3.0",
-    "@mxenabled/mxui": "^2.11.1",
+    "@mxenabled/mxui": "^2.12.1",
     "@mxenabled/web-widget-sdk": "^0.0.15",
     "@tanstack/react-virtual": "^3.14.9",
     "bowser": "^2.14.1",
@@ -240,6 +237,10 @@
   "devDependencies": {
     "@babel/core": "^7.29.7",
     "@datadog/browser-rum": "7.12.0",
+    "@mui/x-data-grid": "^8.29.3",
+    "@mui/x-data-grid-pro": "^8.29.3",
+    "@mui/x-date-pickers": "^8.29.4",
+    "@mui/x-date-pickers-pro": "^8.29.4",
     "@storybook/addon-a11y": "^10.5.5",
     "@storybook/addon-docs": "^10.5.5",
     "@storybook/addon-links": "^10.5.5",
@@ -285,6 +286,10 @@
   "peerDependencies": {
     "@datadog/browser-rum": "^7",
     "@mui/material": "^7",
+    "@mui/x-data-grid": "^8.29.3",
+    "@mui/x-data-grid-pro": "^8.29.3",
+    "@mui/x-date-pickers": "^8.29.4",
+    "@mui/x-date-pickers-pro": "^8.29.4",
     "@mxenabled/mxui": "^2",
     "d3": "^7",
     "date-fns": "^3 || ^4",
@@ -313,6 +318,12 @@
   "peerDependenciesMeta": {
     "@datadog/browser-rum": {
       "optional": true
+    },
+    "@mui/x-data-grid": {
+      "optional": true
+    },
+    "@mui/x-data-grid-pro": {
+      "optional": true
     }
   }
 }