@mx-cartographer/experiences 9.3.0-alpha.bb2 → 9.3.0

package/dist/trends/TrendsWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsWidget.es.js","names":[],"sources":["../../src/trends/TrendsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  ConnectDrawer,\n  Drawer,\n  EmptyState,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useAppConfig,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type Beat, type DetailedCategoryWithTransactions, Transaction, WidgetProps } from '../core'\n\nimport DateRangeText from './components/DateRangeText'\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport CategoriesList from './components/CategoriesList'\nimport InsightsCarousel from './components/TrendsInsights'\nimport { CategoryDetails } from './components/CategoryDetails'\nimport TrendsChartTotals from './components/TrendsChartTotals'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\nimport { TRENDS_BEAT_TEMPLATES } from './constants/TrendsInsights'\nimport { buildEmptyStateProps } from './utils/TrendsWidget'\n\ninterface TrendsWidgetProps extends WidgetProps {\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsWidget: React.FC<TrendsWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  onInsightCardClick,\n  sx,\n}) => {\n  const { onEvent } = useEvent()\n  const { config } = useAppConfig()\n  const { isDesktop, isLargeDesktop, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    loadDateRangeCategoryTotals,\n    loadMonthlyCategoryTotals,\n    monthlyCategoryTotals,\n    monthlyTotalsLoaded,\n  } = useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData, setFilter } = useTransactionStore()\n  const { selectedCategoryData, selectedDateRange, setSelectedCategoryData, setSelectedDateRange } =\n    useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy, connect: connectCopy } = useGlobalCopyStore()\n  const { beatStore } = useGlobalStore()\n  const insightsEnabled = useInsightsEnabled()\n\n  // allows clients to disable insights in trends while still enabling insights\n  const showInsights = insightsEnabled && config.show_insights_widget_in_master\n  const isLargeLayout = isDesktop || isLargeDesktop\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [isBeatsLoaded, setIsBeatsLoaded] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const insightsPadding = isLargeLayout ? 56 : 0\n  const availableChartHeight = viewportHeight - 208 // unavailable height on desktop\n  const availableListHeight = viewportHeight - (showInsights ? 550 + insightsPadding : 266)\n\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n  const hasAggregation = config.show_connections_widget_in_master\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsWidget',\n    isLoaded: isWidgetInitialized,\n  })\n  const filteredBeats = React.useMemo(() => {\n    if (!isBeatsLoaded) return []\n    return beatStore.getFilteredBeats({ templates: TRENDS_BEAT_TEMPLATES })\n  }, [isBeatsLoaded])\n\n  React.useEffect(() => {\n    // Setup resize listener for responsive chart and list heights\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      beatStore.loadBeats().finally(() => setIsBeatsLoaded(true))\n      loadDateRangeCategoryTotals(selectedAccounts, selectedDateRange.start, selectedDateRange.end)\n        .then(() => {\n          loadMonthlyCategoryTotals(\n            selectedAccounts,\n            selectedDateRange.start,\n            selectedDateRange.end,\n          ).finally()\n        })\n        .finally(() => {\n          setIsWidgetInitialized(true)\n          onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n            ...TRENDS_ANALYTICS_METADATA,\n            time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n          })\n        })\n    }\n  }, [isInitialized, isAccountDataLoaded, selectedAccounts, selectedDateRange])\n\n  React.useEffect(() => {\n    // if monthlyCategoryTotals has data, filter transactions\n    if (monthlyCategoryTotals.length !== 0) {\n      const transactionFilter = {\n        accounts: selectedAccountGuids,\n        dateRange: { start: selectedDateRange.start, end: selectedDateRange.end },\n      }\n\n      // this filter sets sortedTransactions in the transaction store\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          Boolean(\n            monthlyCategoryTotals.find(\n              (cat) =>\n                cat.top_level_category_guid === t.top_level_category_guid ||\n                cat.category_guid === t.category_guid,\n            ),\n          ),\n      })\n    }\n  }, [monthlyCategoryTotals])\n\n  const handleDetailOpen = (selected: DetailedCategoryWithTransactions) => {\n    setSelectedCategoryData(selected)\n  }\n\n  const handleDetailClose = () => {\n    setSelectedCategoryData(null)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_BACK, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const handleEmptyStateClick = () => {\n    setShowConnectWidget(true)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CONNECT_ACCOUNTS)\n  }\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      toggleView: newValue,\n    })\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = (selectedAccountGuids?: string[]) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER, {\n      ...TRENDS_ANALYTICS_METADATA,\n      filterValue: selectedAccountGuids,\n    })\n  }\n\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n\n  const onViewAllCategories = () => {\n    setSelectedCategory('')\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_ALL_CATEGORIES, TRENDS_ANALYTICS_METADATA)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized || !monthlyTotalsLoaded)\n    return <Loader />\n\n  const isEmptyTrendsState = accounts.length === 0 || monthlyCategoryTotals.length === 0\n\n  const emptyStateProps = buildEmptyStateProps(copy, hasAggregation, handleEmptyStateClick)\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        sx={{\n          px: isMobile ? 0 : 48,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ px: isMobile ? 16 : 0, py: 16 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ pb: 8 }} width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={onViewAllCategories} sx={{ p: 0, pr: 5 }}>\n                <ArrowBack />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n        </Stack>\n\n        {isEmptyTrendsState && (\n          <EmptyState\n            header={emptyStateProps.header}\n            icon=\"multiline_chart\"\n            onClick={emptyStateProps.onClickHandler}\n            primaryButton={emptyStateProps.primaryButton}\n            subText={emptyStateProps.description}\n            sx={{ height: availableChartHeight, maxWidth: 432 }}\n          />\n        )}\n        {!isEmptyTrendsState && (\n          <Stack flexDirection={isLargeLayout ? 'row' : 'column'} gap={isLargeLayout ? 48 : 16}>\n            {selectedTab === 'Chart' && (\n              <>\n                <Box sx={{ width: isLargeLayout ? '68%' : '100%' }}>\n                  <TrendsChartTotals\n                    availableHeight={availableChartHeight}\n                    minHeight={450}\n                    selectedDateRange={selectedDateRange}\n                    totals={monthlyCategoryTotals}\n                  />\n                </Box>\n                <Stack gap={16} sx={{ width: isLargeLayout ? '32%' : '100%' }}>\n                  {/* Only show insights enabled and there are beats to show */}\n                  {showInsights && isBeatsLoaded && filteredBeats.length > 0 && (\n                    <InsightsCarousel\n                      beats={filteredBeats}\n                      onInsightCardClick={onInsightCardClick}\n                    />\n                  )}\n                  <CategoriesList\n                    availableHeight={availableListHeight}\n                    onCategoryClick={handleDetailOpen}\n                  />\n                </Stack>\n              </>\n            )}\n            {selectedTab === 'Table' && (\n              <Box sx={{ width: '100%' }}>\n                <TrendsTableContainer\n                  height=\"unset\"\n                  onClickRow={onClickRow}\n                  selectedCategory={selectedCategory}\n                  selectedDateRange={selectedDateRange}\n                />\n              </Box>\n            )}\n          </Stack>\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_category_details}\n          isOpen={Boolean(selectedCategoryData)}\n          onClose={handleDetailClose}\n          shouldShowHeaderShadow={true}\n          title={selectedCategoryData?.is_income ? copy.category_income : copy.category_spending}\n        >\n          {selectedCategoryData && <CategoryDetails />}\n        </Drawer>\n      </Stack>\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsWidget)\n"],"mappings":"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"}
+{"version":3,"file":"TrendsWidget.es.js","names":[],"sources":["../../src/trends/TrendsWidget.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\nimport { addSeconds } from 'date-fns/addSeconds'\nimport { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths'\n\nimport { DateRange } from '@mui/x-date-pickers-pro'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Stack from '@mui/material/Stack'\n\nimport { ArrowBack } from '@mxenabled/mx-icons'\n\nimport {\n  ANALYTICS_EVENTS,\n  ConnectDrawer,\n  Drawer,\n  EmptyState,\n  Loader,\n  WidgetContainer,\n  useAccountStore,\n  useAppConfig,\n  useCategoryStore,\n  useEvent,\n  useGlobalCopyStore,\n  useGlobalStore,\n  useGlobalUiStore,\n  useInsightsEnabled,\n  useScreenSize,\n  useTransactionStore,\n  useTrendsStore,\n  useWidgetLoadTimer,\n} from '../common'\nimport { type Beat, type DetailedCategoryWithTransactions, Transaction, WidgetProps } from '../core'\n\nimport DateRangeText from './components/DateRangeText'\nimport TrendsViewToggle, { type TrendsTabValue } from './components/TrendsViewToggle'\nimport TrendsTableContainer from './components/TrendsTableContainer'\nimport CategoriesList from './components/CategoriesList'\nimport InsightsCarousel from './components/TrendsInsights'\nimport { CategoryDetails } from './components/CategoryDetails'\nimport TrendsChartTotals from './components/TrendsChartTotals'\nimport { TRENDS_ANALYTICS_METADATA } from './constants/TrendsWidget'\nimport { TRENDS_BEAT_TEMPLATES } from './constants/TrendsInsights'\nimport { buildEmptyStateProps } from './utils/TrendsWidget'\n\ninterface TrendsWidgetProps extends WidgetProps {\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsWidget: React.FC<TrendsWidgetProps> = ({\n  onBackClick,\n  onMenuClick,\n  onInsightCardClick,\n  sx,\n}) => {\n  const { onEvent } = useEvent()\n  const { config } = useAppConfig()\n  const { isDesktop, isLargeDesktop, isMobile } = useScreenSize()\n  const { isAccountDataLoaded, loadAccountData, visibleAccounts: accounts } = useAccountStore()\n  const {\n    categoriesLoaded,\n    loadCategories,\n    monthlyCategoryTotals,\n    monthlyTotalsLoaded,\n    reloadCategoryTotals,\n  } = useCategoryStore()\n  const { isTransactionDataLoaded, loadTransactionData, setFilter } = useTransactionStore()\n  const { selectedCategoryData, selectedDateRange, setSelectedCategoryData, setSelectedDateRange } =\n    useTrendsStore()\n  const { isInitialized, selectedAccounts, selectedAccountGuids } = useGlobalUiStore()\n  const { trends: copy, connect: connectCopy } = useGlobalCopyStore()\n  const { beatStore } = useGlobalStore()\n  const insightsEnabled = useInsightsEnabled()\n\n  // allows clients to disable insights in trends while still enabling insights\n  const showInsights = insightsEnabled && config.show_insights_widget_in_master\n  const isLargeLayout = isDesktop || isLargeDesktop\n\n  const [isWidgetInitialized, setIsWidgetInitialized] = React.useState(false)\n  const [isBeatsLoaded, setIsBeatsLoaded] = React.useState(false)\n  const [selectedTab, setSelectedTab] = React.useState<TrendsTabValue>('Chart')\n  const [selectedCategory, setSelectedCategory] = React.useState('')\n\n  // Control responsive chart height based on available widget iframe viewport height\n  const [viewportHeight, setViewportHeight] = React.useState(window.innerHeight)\n  const insightsPadding = isLargeLayout ? 56 : 0\n  const availableChartHeight = viewportHeight - 208 // unavailable height on desktop\n  const availableListHeight = viewportHeight - (showInsights ? 550 + insightsPadding : 266)\n\n  const [showConnectWidget, setShowConnectWidget] = React.useState(false)\n  const hasAggregation = config.show_connections_widget_in_master\n\n  useWidgetLoadTimer({\n    widgetName: 'TrendsWidget',\n    isLoaded: isWidgetInitialized,\n  })\n  const filteredBeats = React.useMemo(() => {\n    if (!isBeatsLoaded) return []\n    return beatStore.getFilteredBeats({ templates: TRENDS_BEAT_TEMPLATES })\n  }, [isBeatsLoaded])\n\n  React.useEffect(() => {\n    // Setup resize listener for responsive chart and list heights\n    const handleResize = () => setViewportHeight(window.innerHeight)\n    window.addEventListener('resize', handleResize)\n\n    if (!isAccountDataLoaded) {\n      loadAccountData().finally()\n    }\n    if (!categoriesLoaded) {\n      loadCategories().finally()\n    }\n    if (!isTransactionDataLoaded) {\n      loadTransactionData().finally()\n    }\n\n    return () => window.removeEventListener('resize', handleResize)\n  }, [])\n\n  // Initialize monthlyCategoryTotals, and reload on account or date range change.\n  // Depends on primitives rather than `selectedAccounts` / `selectedDateRange`,\n  // whose object identities change even when the values do not. (MEW-3910)\n  //\n  // Both totals are loaded in parallel rather than chaining monthly inside the\n  // date-range `.then()`. Chaining defers the monthly request until the first\n  // resolves, so a slow superseded range would claim the newest monthly request\n  // token and write stale data over the current range. (MEW-3910)\n  React.useEffect(() => {\n    if (isInitialized && isAccountDataLoaded) {\n      beatStore.loadBeats().finally(() => setIsBeatsLoaded(true))\n      reloadCategoryTotals(\n        selectedAccounts,\n        selectedDateRange.start,\n        selectedDateRange.end,\n      ).finally(() => {\n        setIsWidgetInitialized(true)\n        onEvent(ANALYTICS_EVENTS.TRENDS_LOAD_WIDGET, {\n          ...TRENDS_ANALYTICS_METADATA,\n          time_period: `${differenceInCalendarMonths(selectedDateRange.end, selectedDateRange.start)}M`,\n        })\n      })\n    }\n  }, [\n    isInitialized,\n    isAccountDataLoaded,\n    selectedAccountGuids.join(','),\n    selectedDateRange.start.getTime(),\n    selectedDateRange.end.getTime(),\n  ])\n  React.useEffect(() => {\n    // if monthlyCategoryTotals has data, filter transactions\n    if (monthlyCategoryTotals.length !== 0) {\n      const transactionFilter = {\n        accounts: selectedAccountGuids,\n        dateRange: { start: selectedDateRange.start, end: selectedDateRange.end },\n      }\n\n      // this filter sets sortedTransactions in the transaction store\n      setFilter({\n        ...transactionFilter,\n        custom: (t: Transaction) =>\n          Boolean(\n            monthlyCategoryTotals.find(\n              (cat) =>\n                cat.top_level_category_guid === t.top_level_category_guid ||\n                cat.category_guid === t.category_guid,\n            ),\n          ),\n      })\n    }\n  }, [monthlyCategoryTotals])\n\n  const handleDetailOpen = (selected: DetailedCategoryWithTransactions) => {\n    setSelectedCategoryData(selected)\n  }\n\n  const handleDetailClose = () => {\n    setSelectedCategoryData(null)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_BACK, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const handleEmptyStateClick = () => {\n    setShowConnectWidget(true)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CONNECT_ACCOUNTS)\n  }\n\n  const onTabChange = (_event: React.SyntheticEvent, newValue: TrendsTabValue) => {\n    setSelectedTab(newValue ?? selectedTab)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TOGGLE_VIEW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      toggleView: newValue,\n    })\n  }\n\n  const onRangeChanged = (dateRange: DateRange<Date>) => {\n    const startDate = addSeconds(dateRange?.[0] as Date, 1)\n    const endDate = dateRange?.[1] as Date\n    const months = differenceInCalendarMonths(endDate, startDate)\n\n    setSelectedDateRange({ start: startDate, end: endDate })\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_TIME_WINDOW, {\n      ...TRENDS_ANALYTICS_METADATA,\n      time_period: months + 'M',\n    })\n  }\n\n  const onAccountsFilterClick = (selectedAccountGuids?: string[]) => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_FILTER, {\n      ...TRENDS_ANALYTICS_METADATA,\n      filterValue: selectedAccountGuids,\n    })\n  }\n\n  const onClickRow = (guid: string) => {\n    setSelectedCategory(guid)\n  }\n\n  const onViewAllCategories = () => {\n    setSelectedCategory('')\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_ALL_CATEGORIES, TRENDS_ANALYTICS_METADATA)\n  }\n\n  if (!isInitialized || !isAccountDataLoaded || !isWidgetInitialized || !monthlyTotalsLoaded)\n    return <Loader />\n\n  const isEmptyTrendsState = accounts.length === 0 || monthlyCategoryTotals.length === 0\n\n  const emptyStateProps = buildEmptyStateProps(copy, hasAggregation, handleEmptyStateClick)\n\n  return (\n    <WidgetContainer\n      calendarActions={{ onRangeChanged }}\n      dateRange={selectedDateRange}\n      dateRangeVariant={isMobile ? 'timeframetabs' : 'timeframebuttons'}\n      onAccountsFilterClick={onAccountsFilterClick}\n      onBackClick={onBackClick}\n      onMenuClick={onMenuClick}\n      sx={sx}\n      title={copy.title}\n    >\n      <Stack\n        sx={{\n          px: isMobile ? 0 : 48,\n        }}\n      >\n        <Stack\n          flexDirection=\"row\"\n          justifyContent=\"space-between\"\n          sx={{ px: isMobile ? 16 : 0, py: 16 }}\n        >\n          <DateRangeText\n            selectedCategoryGuid={selectedCategory}\n            selectedDateRange={selectedDateRange}\n          />\n          <TrendsViewToggle onTabChange={onTabChange} selectedTab={selectedTab} />\n        </Stack>\n        <Stack alignItems=\"center\" flexDirection=\"row\" sx={{ pb: 8 }} width=\"100%\">\n          <Box flexGrow={1}>\n            {selectedCategory && (\n              <Button onClick={onViewAllCategories} sx={{ p: 0, pr: 5 }}>\n                <ArrowBack />\n                {copy.all_categories}\n              </Button>\n            )}\n          </Box>\n        </Stack>\n\n        {isEmptyTrendsState && (\n          <EmptyState\n            header={emptyStateProps.header}\n            icon=\"multiline_chart\"\n            onClick={emptyStateProps.onClickHandler}\n            primaryButton={emptyStateProps.primaryButton}\n            subText={emptyStateProps.description}\n            sx={{ height: availableChartHeight, maxWidth: 432 }}\n          />\n        )}\n        {!isEmptyTrendsState && (\n          <Stack flexDirection={isLargeLayout ? 'row' : 'column'} gap={isLargeLayout ? 48 : 16}>\n            {selectedTab === 'Chart' && (\n              <>\n                <Box sx={{ width: isLargeLayout ? '68%' : '100%' }}>\n                  <TrendsChartTotals\n                    availableHeight={availableChartHeight}\n                    minHeight={450}\n                    selectedDateRange={selectedDateRange}\n                    totals={monthlyCategoryTotals}\n                  />\n                </Box>\n                <Stack gap={16} sx={{ width: isLargeLayout ? '32%' : '100%' }}>\n                  {/* Only show insights enabled and there are beats to show */}\n                  {showInsights && isBeatsLoaded && filteredBeats.length > 0 && (\n                    <InsightsCarousel\n                      beats={filteredBeats}\n                      onInsightCardClick={onInsightCardClick}\n                    />\n                  )}\n                  <CategoriesList\n                    availableHeight={availableListHeight}\n                    onCategoryClick={handleDetailOpen}\n                  />\n                </Stack>\n              </>\n            )}\n            {selectedTab === 'Table' && (\n              <Box sx={{ width: '100%' }}>\n                <TrendsTableContainer\n                  height=\"unset\"\n                  onClickRow={onClickRow}\n                  selectedCategory={selectedCategory}\n                  selectedDateRange={selectedDateRange}\n                />\n              </Box>\n            )}\n          </Stack>\n        )}\n        <Drawer\n          ariaLabelClose={copy.close_category_details}\n          isOpen={Boolean(selectedCategoryData)}\n          onClose={handleDetailClose}\n          shouldShowHeaderShadow={true}\n          title={selectedCategoryData?.is_income ? copy.category_income : copy.category_spending}\n        >\n          {selectedCategoryData && <CategoryDetails />}\n        </Drawer>\n      </Stack>\n\n      <ConnectDrawer\n        onClose={() => setShowConnectWidget(false)}\n        showConnectWidget={showConnectWidget}\n        title={connectCopy.mini_title}\n      />\n    </WidgetContainer>\n  )\n}\n\nexport default observer(TrendsWidget)\n"],"mappings":"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"}

package/dist/trends/ZeroStateMicroWidget.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZeroStateMicroWidget.es.js","names":[],"sources":["../../src/trends/ZeroStateMicroWidget.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { MultilineChart } from '@mxenabled/mx-icons'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore } from '../common'\n\nexport const ZeroStateMicroWidget = observer(() => {\n  const { trends: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack sx={{ alignItems: 'start', flexDirection: 'row', gap: 12 }}>\n      <MultilineChart size={32} />\n      <Stack>\n        <P fontWeight={600} variant=\"body1\">\n          {copy.zero_state_content_header}\n        </P>\n        <P color=\"text.secondary\" variant=\"subtitle2\">\n          {copy.zero_state_content_description}\n        </P>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,IAAuB,EAAA,MAAe;AACjD,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAE5C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAS,eAAe;AAAA,MAAO,KAAK;AAAA,IAAG;AAAA,cAAhE,CACE,gBAAA,EAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,GAC3B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAG,YAAY;AAAA,MAAK,SAAQ;AAAA,gBACzB,EAAK;AAAA,IACL,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,MAAG,OAAM;AAAA,MAAiB,SAAQ;AAAA,gBAC/B,EAAK;AAAA,IACL,CAAA,CACE,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}
+{"version":3,"file":"ZeroStateMicroWidget.es.js","names":[],"sources":["../../src/trends/ZeroStateMicroWidget.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { MultilineChart } from '@mxenabled/mx-icons'\n\nimport { P } from '@mxenabled/mxui'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore } from '../common'\n\nexport const ZeroStateMicroWidget = observer(() => {\n  const { trends: copy } = useGlobalCopyStore()\n\n  return (\n    <Stack sx={{ alignItems: 'start', flexDirection: 'row', gap: 12 }}>\n      <MultilineChart size={32} />\n      <Stack>\n        <P fontWeight={600} variant=\"body1\">\n          {copy.zero_state_content_header}\n        </P>\n        <P color=\"text.secondary\" variant=\"subtitle2\">\n          {copy.zero_state_content_description}\n        </P>\n      </Stack>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;;AAUA,IAAa,IAAuB,EAAA,MAAe;AACjD,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAE5C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAS,eAAe;AAAA,MAAO,KAAK;AAAA,IAAG;AAAA,IAAhE,UAAA,CACE,gBAAA,EAAC,GAAD,EAAgB,MAAM,GAAK,CAAA,GAC3B,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAG,YAAY;AAAA,MAAK,SAAQ;AAAA,MACzB,UAAA,EAAK;AAAA,IACL,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,MAAG,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAC/B,UAAA,EAAK;AAAA,IACL,CAAA,CACE,EAAA,CAAA,CACF;AAAA;AAEX,CAAC"}

package/dist/trends/components/CategoriesList.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoriesList.es.js","names":[],"sources":["../../../src/trends/components/CategoriesList.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Collapse from '@mui/material/Collapse'\n\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  useEvent,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTrendsStore,\n} from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\nimport { CollapseExpandListItem } from '../../common/components/listitems/CollapseExpandListItem'\nimport CategoriesListItem from './CategoriesListItem'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface CategoriesListProps {\n  availableHeight?: number\n  minHeight?: number\n  onCategoryClick: (data: DetailedCategoryWithTransactions) => void\n}\n\nconst CategoriesList: React.FC<CategoriesListProps> = observer(\n  ({ availableHeight = 0, onCategoryClick }) => {\n    const { collapsedCategories, visibleCategories, setVisibleListLength } = useTrendsStore()\n    const { isLargeDesktop, isDesktop } = useScreenSize()\n    const { trends: copy } = useGlobalCopyStore()\n    const { onEvent } = useEvent()\n    const [isExpanded, setIsExpanded] = React.useState(false)\n\n    const isLargeLayout = isDesktop || isLargeDesktop\n\n    React.useEffect(() => {\n      // Divide available height by item height (64px), minus 1 for more/less button\n      const newVisibleListLength = Math.floor(availableHeight / 64) - 1\n      const totalListItems = visibleCategories.length + collapsedCategories.length\n\n      if (newVisibleListLength !== visibleCategories.length) {\n        // Always show at least 5 items on large layout, and 5 items on small layout\n        // Also ignores when availableHeight < 0 on initial render\n        setVisibleListLength(isLargeLayout ? Math.max(newVisibleListLength, 5) : 5)\n        setIsExpanded(newVisibleListLength >= totalListItems)\n      }\n    }, [availableHeight])\n\n    const handleCollapseExpand = () => {\n      setIsExpanded(!isExpanded)\n      onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE, {\n        ...TRENDS_ANALYTICS_METADATA,\n      })\n    }\n\n    const totalCategories = visibleCategories.length + (isExpanded ? collapsedCategories.length : 0)\n    return (\n      <Stack sx={{ width: '100%' }}>\n        <Stack sx={{ pb: 4, pt: 16, px: 16 }}>\n          <H3>{copy.categories}</H3>\n        </Stack>\n        <List>\n          {visibleCategories.map((category, index) => (\n            <CategoriesListItem\n              key={category.guid}\n              {...category}\n              isLastItem={index === totalCategories - 1}\n              onClick={\n                category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n              }\n              showDivider={true}\n            />\n          ))}\n          <Collapse\n            component=\"li\"\n            in={isExpanded}\n            sx={{ '&.MuiCollapse-root .MuiListItemButton-root': { paddingLeft: 24 } }}\n          >\n            <List>\n              {collapsedCategories.map((category, index) => {\n                const adjustedIndex = visibleCategories.length + index\n                return (\n                  <CategoriesListItem\n                    key={category.guid}\n                    {...category}\n                    isLastItem={adjustedIndex === totalCategories - 1}\n                    onClick={\n                      category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n                    }\n                    showDivider={true}\n                  />\n                )\n              })}\n            </List>\n          </Collapse>\n          {collapsedCategories.length > 0 && (\n            <CollapseExpandListItem isExpanded={isExpanded} onClick={handleCollapseExpand} />\n          )}\n        </List>\n      </Stack>\n    )\n  },\n)\n\nexport default CategoriesList\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAM,IAAgD,EAAA,CACnD,EAAE,iBAAA,IAAkB,GAAG,iBAAA,EAAA,MAAsB;AAC5C,QAAM,EAAE,qBAAA,GAAqB,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,EAAe,GAClF,EAAE,gBAAA,GAAgB,WAAA,EAAA,IAAc,EAAc,GAC9C,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAElD,IAAgB,KAAa;AAEnC,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAuB,KAAK,MAAM,IAAkB,EAAE,IAAI,GAC1D,IAAiB,EAAkB,SAAS,EAAoB;AAEtE,IAAI,MAAyB,EAAkB,WAG7C,EAAqB,IAAgB,KAAK,IAAI,GAAsB,CAAC,IAAI,CAAC,GAC1E,EAAc,KAAwB,CAAc;AAAA,EAExD,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAA,MAA6B;AACjC,IAAA,EAAc,CAAC,CAAU,GACzB,EAAQ,EAAiB,wBAAwB,EAC/C,GAAG,EACL,CAAC;AAAA,EACH,GAEM,IAAkB,EAAkB,UAAU,IAAa,EAAoB,SAAS;AAC9F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,OAAO,OAAO;AAAA,cAA3B,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,gBACjC,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,IACpB,CAAA,GACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACG,EAAkB,IAAA,CAAK,GAAU,MAChC,gBAAA,EAAC,GAAD;AAAA,QAEE,GAAI;AAAA,QACJ,YAAY,MAAU,IAAkB;AAAA,QACxC,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,QAEvE,aAAa;AAAA,MACd,GAPM,EAAS,IAOf,CACF;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,EAAE,8CAA8C,EAAE,aAAa,GAAG,EAAE;AAAA,kBAExE,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,GAAU,MAAU;AAC5C,gBAAM,IAAgB,EAAkB,SAAS;AACjD,iBACE,gBAAA,EAAC,GAAD;AAAA,YAEE,GAAI;AAAA,YACJ,YAAY,MAAkB,IAAkB;AAAA,YAChD,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,YAEvE,aAAa;AAAA,UACd,GAPM,EAAS,IAOf;AAAA,QAEL,CAAC,EACG,CAAA;AAAA,MACE,CAAA;AAAA,MACT,EAAoB,SAAS,KAC5B,gBAAA,EAAC,GAAD;AAAA,QAAoC,YAAA;AAAA,QAAY,SAAS;AAAA,MAAuB,CAAA;AAAA,IAE9E,EAAA,CAAA,CACD;AAAA;AAEX,CACF"}
+{"version":3,"file":"CategoriesList.es.js","names":[],"sources":["../../../src/trends/components/CategoriesList.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport React from 'react'\n\nimport Collapse from '@mui/material/Collapse'\n\nimport List from '@mui/material/List'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport {\n  ANALYTICS_EVENTS,\n  useEvent,\n  useGlobalCopyStore,\n  useScreenSize,\n  useTrendsStore,\n} from '../../common'\nimport { type DetailedCategoryWithTransactions } from '../../core'\nimport { CollapseExpandListItem } from '../../common/components/listitems/CollapseExpandListItem'\nimport CategoriesListItem from './CategoriesListItem'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface CategoriesListProps {\n  availableHeight?: number\n  minHeight?: number\n  onCategoryClick: (data: DetailedCategoryWithTransactions) => void\n}\n\nconst CategoriesList: React.FC<CategoriesListProps> = observer(\n  ({ availableHeight = 0, onCategoryClick }) => {\n    const { collapsedCategories, visibleCategories, setVisibleListLength } = useTrendsStore()\n    const { isLargeDesktop, isDesktop } = useScreenSize()\n    const { trends: copy } = useGlobalCopyStore()\n    const { onEvent } = useEvent()\n    const [isExpanded, setIsExpanded] = React.useState(false)\n\n    const isLargeLayout = isDesktop || isLargeDesktop\n\n    React.useEffect(() => {\n      // Divide available height by item height (64px), minus 1 for more/less button\n      const newVisibleListLength = Math.floor(availableHeight / 64) - 1\n      const totalListItems = visibleCategories.length + collapsedCategories.length\n\n      if (newVisibleListLength !== visibleCategories.length) {\n        // Always show at least 5 items on large layout, and 5 items on small layout\n        // Also ignores when availableHeight < 0 on initial render\n        setVisibleListLength(isLargeLayout ? Math.max(newVisibleListLength, 5) : 5)\n        setIsExpanded(newVisibleListLength >= totalListItems)\n      }\n    }, [availableHeight])\n\n    const handleCollapseExpand = () => {\n      setIsExpanded(!isExpanded)\n      onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_VIEW_MORE, {\n        ...TRENDS_ANALYTICS_METADATA,\n      })\n    }\n\n    const totalCategories = visibleCategories.length + (isExpanded ? collapsedCategories.length : 0)\n    return (\n      <Stack sx={{ width: '100%' }}>\n        <Stack sx={{ pb: 4, pt: 16, px: 16 }}>\n          <H3>{copy.categories}</H3>\n        </Stack>\n        <List>\n          {visibleCategories.map((category, index) => (\n            <CategoriesListItem\n              key={category.guid}\n              {...category}\n              isLastItem={index === totalCategories - 1}\n              onClick={\n                category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n              }\n              showDivider={true}\n            />\n          ))}\n          <Collapse\n            component=\"li\"\n            in={isExpanded}\n            sx={{ '&.MuiCollapse-root .MuiListItemButton-root': { paddingLeft: 24 } }}\n          >\n            <List>\n              {collapsedCategories.map((category, index) => {\n                const adjustedIndex = visibleCategories.length + index\n                return (\n                  <CategoriesListItem\n                    key={category.guid}\n                    {...category}\n                    isLastItem={adjustedIndex === totalCategories - 1}\n                    onClick={\n                      category.transactions.length > 0 ? () => onCategoryClick(category) : undefined\n                    }\n                    showDivider={true}\n                  />\n                )\n              })}\n            </List>\n          </Collapse>\n          {collapsedCategories.length > 0 && (\n            <CollapseExpandListItem isExpanded={isExpanded} onClick={handleCollapseExpand} />\n          )}\n        </List>\n      </Stack>\n    )\n  },\n)\n\nexport default CategoriesList\n"],"mappings":";;;;;;;;;;;;;AA4BA,IAAM,IAAgD,EAAA,CACnD,EAAE,iBAAA,IAAkB,GAAG,iBAAA,EAAA,MAAsB;AAC5C,QAAM,EAAE,qBAAA,GAAqB,mBAAA,GAAmB,sBAAA,EAAA,IAAyB,EAAe,GAClF,EAAE,gBAAA,GAAgB,WAAA,EAAA,IAAc,EAAc,GAC9C,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,CAAC,GAAY,CAAA,IAAiB,EAAM,SAAS,EAAK,GAElD,IAAgB,KAAa;AAEnC,EAAA,EAAM,UAAA,MAAgB;AAEpB,UAAM,IAAuB,KAAK,MAAM,IAAkB,EAAE,IAAI,GAC1D,IAAiB,EAAkB,SAAS,EAAoB;AAEtE,IAAI,MAAyB,EAAkB,WAG7C,EAAqB,IAAgB,KAAK,IAAI,GAAsB,CAAC,IAAI,CAAC,GAC1E,EAAc,KAAwB,CAAc;AAAA,EAExD,GAAG,CAAC,CAAe,CAAC;AAEpB,QAAM,IAAA,MAA6B;AACjC,IAAA,EAAc,CAAC,CAAU,GACzB,EAAQ,EAAiB,wBAAwB,EAC/C,GAAG,EACL,CAAC;AAAA,EACH,GAEM,IAAkB,EAAkB,UAAU,IAAa,EAAoB,SAAS;AAC9F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,OAAO,OAAO;AAAA,IAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,IAAI;AAAA,QAAG,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACjC,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,IACpB,CAAA,GACP,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,MACG,EAAkB,IAAA,CAAK,GAAU,MAChC,gBAAA,EAAC,GAAD;AAAA,QAEE,GAAI;AAAA,QACJ,YAAY,MAAU,IAAkB;AAAA,QACxC,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,QAEvE,aAAa;AAAA,MACd,GAPM,EAAS,IAOf,CACF;AAAA,MACD,gBAAA,EAAC,GAAD;AAAA,QACE,WAAU;AAAA,QACV,IAAI;AAAA,QACJ,IAAI,EAAE,8CAA8C,EAAE,aAAa,GAAG,EAAE;AAAA,QAExE,UAAA,gBAAA,EAAC,GAAD,EAAA,UACG,EAAoB,IAAA,CAAK,GAAU,MAAU;AAC5C,gBAAM,IAAgB,EAAkB,SAAS;AACjD,iBACE,gBAAA,EAAC,GAAD;AAAA,YAEE,GAAI;AAAA,YACJ,YAAY,MAAkB,IAAkB;AAAA,YAChD,SACE,EAAS,aAAa,SAAS,IAAA,MAAU,EAAgB,CAAQ,IAAI;AAAA,YAEvE,aAAa;AAAA,UACd,GAPM,EAAS,IAOf;AAAA,QAEL,CAAC,EACG,CAAA;AAAA,MACE,CAAA;AAAA,MACT,EAAoB,SAAS,KAC5B,gBAAA,EAAC,GAAD;AAAA,QAAoC,YAAA;AAAA,QAAY,SAAS;AAAA,MAAuB,CAAA;AAAA,IAE9E,EAAA,CAAA,CACD;AAAA;AAEX,CACF"}

package/dist/trends/components/CategoryDetailChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryDetailChart.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetailChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { ANALYTICS_EVENTS, useEvent, useTrendsStore } from '../../common'\nimport { LineChart } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\ninterface CategoryDetailChartProps {\n  chartColor: string\n  chartLabel: string\n}\nconst CategoryDetailChart = observer(({ chartLabel, chartColor }: CategoryDetailChartProps) => {\n  const { onEvent } = useEvent()\n  const {\n    categoryDetailsChartData: { monthlyAmounts, tooltipLabels },\n  } = useTrendsStore()\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <Stack sx={{ pt: 12, width: '100%' }}>\n      <LineChart\n        baseline=\"min\"\n        colors={[chartColor]}\n        curveType=\"bump\"\n        customTooltipLabels={tooltipLabels}\n        datasets={[monthlyAmounts]}\n        height={265}\n        labels={[chartLabel]}\n        markStyles={() => ({\n          stroke: chartColor,\n        })}\n        onItemClick={handleItemClick}\n        showArea={true}\n        showAverage={true}\n        showAxisHighlight={true}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        useCustomMark={true}\n        valueFormatterString=\"0,0\"\n      />\n    </Stack>\n  )\n})\nexport default CategoryDetailChart\n"],"mappings":";;;;;;;AAYA,IAAM,IAAsB,EAAA,CAAU,EAAE,YAAA,GAAY,YAAA,EAAA,MAA2C;AAC7F,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EACJ,0BAA0B,EAAE,gBAAA,GAAgB,eAAA,EAAA,EAAA,IAC1C,EAAe;AAMnB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,cACjC,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,QAAQ,CAAC,CAAU;AAAA,MACnB,WAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,UAAU,CAAC,CAAc;AAAA,MACzB,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAU;AAAA,MACnB,YAAA,OAAmB,EACjB,QAAQ,EACV;AAAA,MACA,aAjBA,MAAwB;AAC5B,QAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,MACxE;AAAA,MAgBM,UAAU;AAAA,MACV,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACI,CAAA;AAEX,CAAC"}
+{"version":3,"file":"CategoryDetailChart.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetailChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Stack from '@mui/material/Stack'\n\nimport { ANALYTICS_EVENTS, useEvent, useTrendsStore } from '../../common'\nimport { LineChart } from '../../common/components/charts/LineChart'\n\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\ninterface CategoryDetailChartProps {\n  chartColor: string\n  chartLabel: string\n}\nconst CategoryDetailChart = observer(({ chartLabel, chartColor }: CategoryDetailChartProps) => {\n  const { onEvent } = useEvent()\n  const {\n    categoryDetailsChartData: { monthlyAmounts, tooltipLabels },\n  } = useTrendsStore()\n\n  const handleItemClick = () => {\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_CHART, TRENDS_ANALYTICS_METADATA)\n  }\n\n  return (\n    <Stack sx={{ pt: 12, width: '100%' }}>\n      <LineChart\n        baseline=\"min\"\n        colors={[chartColor]}\n        curveType=\"bump\"\n        customTooltipLabels={tooltipLabels}\n        datasets={[monthlyAmounts]}\n        height={265}\n        labels={[chartLabel]}\n        markStyles={() => ({\n          stroke: chartColor,\n        })}\n        onItemClick={handleItemClick}\n        showArea={true}\n        showAverage={true}\n        showAxisHighlight={true}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        useCustomMark={true}\n        valueFormatterString=\"0,0\"\n      />\n    </Stack>\n  )\n})\nexport default CategoryDetailChart\n"],"mappings":";;;;;;;AAYA,IAAM,IAAsB,EAAA,CAAU,EAAE,YAAA,GAAY,YAAA,EAAA,MAA2C;AAC7F,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EACJ,0BAA0B,EAAE,gBAAA,GAAgB,eAAA,EAAA,EAAA,IAC1C,EAAe;AAMnB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,OAAO;AAAA,IAAO;AAAA,IACjC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,UAAS;AAAA,MACT,QAAQ,CAAC,CAAU;AAAA,MACnB,WAAU;AAAA,MACV,qBAAqB;AAAA,MACrB,UAAU,CAAC,CAAc;AAAA,MACzB,QAAQ;AAAA,MACR,QAAQ,CAAC,CAAU;AAAA,MACnB,YAAA,OAAmB,EACjB,QAAQ,EACV;AAAA,MACA,aAjBA,MAAwB;AAC5B,QAAA,EAAQ,EAAiB,oBAAoB,CAAyB;AAAA,MACxE;AAAA,MAgBM,UAAU;AAAA,MACV,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACI,CAAA;AAEX,CAAC"}

package/dist/trends/components/CategoryDetails.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryDetails.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useGlobalCopyStore,\n  useTrendsStore,\n  useTransactionStore,\n  useScreenSize,\n} from '../../common'\nimport { type Transaction } from '../../core'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport { ExportCsvAction, TransactionDetails, TransactionList } from '../../transactions'\n\nimport CategoryDetailChart from './CategoryDetailChart'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\nexport const CategoryDetails = observer(() => {\n  const theme = useTheme()\n  const { is_mobile_webview } = useAppConfig()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const { common: commonCopy, trends: copy } = useGlobalCopyStore()\n  const { selectedCategoryData, selectedDateRangeMonthRange } = useTrendsStore()\n  const { sortedTransactions: transactions } = useTransactionStore()\n\n  const [transactionGuid, setTransactionGuid] = React.useState<string | null>(null)\n\n  if (!selectedCategoryData) {\n    return null\n  }\n\n  const { guid, name, is_income, totalAmount } = selectedCategoryData\n\n  const chartColor = getCategoryColor(guid, theme)\n  const chartLabel = is_income ? copy.income_label : copy.spending_label\n  const transactionCountLabel = ` ${\n    selectedCategoryData.transactions.length === 1 ? copy.transaction : copy.transactions\n  } (${selectedCategoryData.transactions.length})`\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  const categoryFilter = (t: Transaction) =>\n    t.category_guid === guid || t.top_level_category_guid === guid\n\n  return (\n    <Stack sx={{ alignItems: 'center', height: '100%' }}>\n      <Stack sx={{ borderRadius: 0, pb: 4, pt: 16, px: 12, width: '100%' }}>\n        <List sx={{ px: 12 }}>\n          <ListItem>\n            <ListItemAvatar>\n              <CategoryIcon categoryGuid={guid} />\n            </ListItemAvatar>\n            <ListItemText\n              primary={name}\n              secondary={selectedDateRangeMonthRange}\n              slotProps={{\n                primary: { component: 'div', variant: 'h3', fontSize: 18, fontWeight: 700 },\n                secondary: { component: 'div', variant: 'body2', fontSize: 13 },\n              }}\n            />\n            <Text component=\"div\" variant=\"h3\">\n              {formatCurrency(Math.abs(totalAmount), '0,0.00')}\n            </Text>\n          </ListItem>\n        </List>\n\n        <CategoryDetailChart chartColor={chartColor} chartLabel={chartLabel} />\n\n        <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\" sx={{ mx: 12 }}>\n          <Text bold={true} variant=\"body1\">\n            {transactionCountLabel}\n          </Text>\n          {shouldShowExportButton && <ExportCsvAction filter={categoryFilter} />}\n        </Stack>\n      </Stack>\n      <TransactionList\n        bgcolor=\"transparent\"\n        filter={categoryFilter}\n        height=\"calc(100vh - 475px)\"\n        onClick={setTransactionGuid}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(transaction)}\n        onClose={() => setTransactionGuid('')}\n        title={copy.transaction}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n    </Stack>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"CategoryDetails.es.js","names":[],"sources":["../../../src/trends/components/CategoryDetails.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport List from '@mui/material/List'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nimport {\n  Drawer,\n  useAppConfig,\n  useGlobalCopyStore,\n  useTrendsStore,\n  useTransactionStore,\n  useScreenSize,\n} from '../../common'\nimport { type Transaction } from '../../core'\n\nimport { getCategoryColor } from '../../core/utils/CategoryUtil'\nimport { ExportCsvAction, TransactionDetails, TransactionList } from '../../transactions'\n\nimport CategoryDetailChart from './CategoryDetailChart'\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\nexport const CategoryDetails = observer(() => {\n  const theme = useTheme()\n  const { is_mobile_webview } = useAppConfig()\n  const { isDesktop, isSmallTablet, isTablet } = useScreenSize()\n  const { common: commonCopy, trends: copy } = useGlobalCopyStore()\n  const { selectedCategoryData, selectedDateRangeMonthRange } = useTrendsStore()\n  const { sortedTransactions: transactions } = useTransactionStore()\n\n  const [transactionGuid, setTransactionGuid] = React.useState<string | null>(null)\n\n  if (!selectedCategoryData) {\n    return null\n  }\n\n  const { guid, name, is_income, totalAmount } = selectedCategoryData\n\n  const chartColor = getCategoryColor(guid, theme)\n  const chartLabel = is_income ? copy.income_label : copy.spending_label\n  const transactionCountLabel = ` ${\n    selectedCategoryData.transactions.length === 1 ? copy.transaction : copy.transactions\n  } (${selectedCategoryData.transactions.length})`\n\n  const transaction = React.useMemo(\n    () => transactions.find((t) => t.guid === transactionGuid),\n    [transactionGuid, transactions],\n  )\n\n  const shouldShowExportButton =\n    transactions.length > 0 && !is_mobile_webview && (isDesktop || (isTablet && !isSmallTablet))\n\n  const categoryFilter = (t: Transaction) =>\n    t.category_guid === guid || t.top_level_category_guid === guid\n\n  return (\n    <Stack sx={{ alignItems: 'center', height: '100%' }}>\n      <Stack sx={{ borderRadius: 0, pb: 4, pt: 16, px: 12, width: '100%' }}>\n        <List sx={{ px: 12 }}>\n          <ListItem>\n            <ListItemAvatar>\n              <CategoryIcon categoryGuid={guid} />\n            </ListItemAvatar>\n            <ListItemText\n              primary={name}\n              secondary={selectedDateRangeMonthRange}\n              slotProps={{\n                primary: { component: 'div', variant: 'h3', fontSize: 18, fontWeight: 700 },\n                secondary: { component: 'div', variant: 'body2', fontSize: 13 },\n              }}\n            />\n            <Text component=\"div\" variant=\"h3\">\n              {formatCurrency(Math.abs(totalAmount), '0,0.00')}\n            </Text>\n          </ListItem>\n        </List>\n\n        <CategoryDetailChart chartColor={chartColor} chartLabel={chartLabel} />\n\n        <Stack alignItems=\"center\" direction=\"row\" justifyContent=\"space-between\" sx={{ mx: 12 }}>\n          <Text bold={true} variant=\"body1\">\n            {transactionCountLabel}\n          </Text>\n          {shouldShowExportButton && <ExportCsvAction filter={categoryFilter} />}\n        </Stack>\n      </Stack>\n      <TransactionList\n        bgcolor=\"transparent\"\n        filter={categoryFilter}\n        height=\"calc(100vh - 475px)\"\n        onClick={setTransactionGuid}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={Boolean(transaction)}\n        onClose={() => setTransactionGuid('')}\n        title={copy.transaction}\n      >\n        {transaction && <TransactionDetails transaction={transaction} />}\n      </Drawer>\n    </Stack>\n  )\n})\n"],"mappings":"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"}

package/dist/trends/components/DateRangeText.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeText.es.js","names":[],"sources":["../../../src/trends/components/DateRangeText.tsx"],"sourcesContent":["import React from 'react'\nimport { H3, Text } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport { useCategoryStore, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\ninterface DateRangeTextProps {\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategoryGuid: string\n}\n\nconst DateRangeText = ({ selectedDateRange, selectedCategoryGuid }: DateRangeTextProps) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { isMobile, isDesktop } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  // Build date range text for display\n  // e.g. October 2023 - March 2024, or Oct 2023 - Mar 2024\n  const dateRangeText = React.useMemo(() => {\n    const startDate =\n      selectedDateRange.start.getFullYear() === selectedDateRange.end.getFullYear()\n        ? formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT : DATE_FORMATS_INTL.MONTH_LONG,\n          )\n        : formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n          )\n    const endDate = formatDate(\n      selectedDateRange.end,\n      isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n    )\n    return `${startDate} - ${endDate}`\n  }, [selectedDateRange, isMobile])\n\n  const categoryName = getCategoryName(selectedCategoryGuid)\n  const titleText = categoryName || (isMobile ? copy.sub_title : copy.sub_title_by_category)\n\n  return (\n    <Box>\n      <H3\n        sx={{\n          fontSize: !isDesktop ? 15 : null,\n          overflow: 'visible',\n          textOverflow: 'unset',\n        }}\n      >\n        {titleText}\n      </H3>\n\n      <Text variant={isDesktop ? 'subtitle1' : 'body2'}>{dateRangeText}</Text>\n    </Box>\n  )\n}\n\nexport default DateRangeText\n"],"mappings":";;;;;;;AAWA,IAAM,IAAA,CAAiB,EAAE,mBAAA,GAAmB,sBAAA,EAAA,MAA+C;AACzF,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,UAAA,GAAU,WAAA,EAAA,IAAc,EAAc,GACxC,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GAIvC,IAAgB,EAAM,QAAA,MAenB,GAbL,EAAkB,MAAM,YAAY,MAAM,EAAkB,IAAI,YAAY,IACxE,EACE,EAAkB,OAClB,IAAW,EAAkB,cAAc,EAAkB,UAC/D,IACA,EACE,EAAkB,OAClB,IAAW,EAAkB,mBAAmB,EAAkB,UACpE,CAAA,MACU,EACd,EAAkB,KAClB,IAAW,EAAkB,mBAAmB,EAAkB,UAE3C,CAAA,IACxB,CAAC,GAAmB,CAAQ,CAAC,GAG1B,IADe,EAAgB,CACnB,MAAiB,IAAW,EAAK,YAAY,EAAK;AAEpE,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,UAAW,IAAiB,OAAL;AAAA,MACvB,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,cAEC;AAAA,EACC,CAAA,GAEJ,gBAAA,EAAC,GAAD;AAAA,IAAM,SAAS,IAAY,cAAc;AAAA,cAAU;AAAA,EAAoB,CAAA,CACpE,EAAA,CAAA;AAET"}
+{"version":3,"file":"DateRangeText.es.js","names":[],"sources":["../../../src/trends/components/DateRangeText.tsx"],"sourcesContent":["import React from 'react'\nimport { H3, Text } from '@mxenabled/mxui'\nimport Box from '@mui/material/Box'\nimport { useCategoryStore, useGlobalCopyStore, useScreenSize } from '../../common'\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\n\ninterface DateRangeTextProps {\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategoryGuid: string\n}\n\nconst DateRangeText = ({ selectedDateRange, selectedCategoryGuid }: DateRangeTextProps) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { isMobile, isDesktop } = useScreenSize()\n  const { getCategoryName } = useCategoryStore()\n\n  // Build date range text for display\n  // e.g. October 2023 - March 2024, or Oct 2023 - Mar 2024\n  const dateRangeText = React.useMemo(() => {\n    const startDate =\n      selectedDateRange.start.getFullYear() === selectedDateRange.end.getFullYear()\n        ? formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT : DATE_FORMATS_INTL.MONTH_LONG,\n          )\n        : formatDate(\n            selectedDateRange.start,\n            isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n          )\n    const endDate = formatDate(\n      selectedDateRange.end,\n      isMobile ? DATE_FORMATS_INTL.MONTH_SHORT_YEAR : DATE_FORMATS_INTL.MONTH_YEAR,\n    )\n    return `${startDate} - ${endDate}`\n  }, [selectedDateRange, isMobile])\n\n  const categoryName = getCategoryName(selectedCategoryGuid)\n  const titleText = categoryName || (isMobile ? copy.sub_title : copy.sub_title_by_category)\n\n  return (\n    <Box>\n      <H3\n        sx={{\n          fontSize: !isDesktop ? 15 : null,\n          overflow: 'visible',\n          textOverflow: 'unset',\n        }}\n      >\n        {titleText}\n      </H3>\n\n      <Text variant={isDesktop ? 'subtitle1' : 'body2'}>{dateRangeText}</Text>\n    </Box>\n  )\n}\n\nexport default DateRangeText\n"],"mappings":";;;;;;;AAWA,IAAM,IAAA,CAAiB,EAAE,mBAAA,GAAmB,sBAAA,EAAA,MAA+C;AACzF,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,UAAA,GAAU,WAAA,EAAA,IAAc,EAAc,GACxC,EAAE,iBAAA,EAAA,IAAoB,EAAiB,GAIvC,IAAgB,EAAM,QAAA,MAenB,GAbL,EAAkB,MAAM,YAAY,MAAM,EAAkB,IAAI,YAAY,IACxE,EACE,EAAkB,OAClB,IAAW,EAAkB,cAAc,EAAkB,UAC/D,IACA,EACE,EAAkB,OAClB,IAAW,EAAkB,mBAAmB,EAAkB,UACpE,CAAA,MACU,EACd,EAAkB,KAClB,IAAW,EAAkB,mBAAmB,EAAkB,UAE3C,CAAA,IACxB,CAAC,GAAmB,CAAQ,CAAC,GAG1B,IADe,EAAgB,CACnB,MAAiB,IAAW,EAAK,YAAY,EAAK;AAEpE,SACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,UAAW,IAAiB,OAAL;AAAA,MACvB,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,IAEC,UAAA;AAAA,EACC,CAAA,GAEJ,gBAAA,EAAC,GAAD;AAAA,IAAM,SAAS,IAAY,cAAc;AAAA,IAAU,UAAA;AAAA,EAAoB,CAAA,CACpE,EAAA,CAAA;AAET"}

package/dist/trends/components/TrendsChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsChart.es.js","names":[],"sources":["../../../src/trends/components/TrendsChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport { useTheme } from '@mui/material/styles'\n\nimport {\n  useCategoryStore,\n  useGlobalCopyStore,\n  INCOME_ACCOUNT_TYPES,\n  PAYMENT_ACCOUNT_TYPES,\n  SPENDING_ACCOUNT_TYPES,\n} from '../../common'\nimport { AccountType, MonthlyCategoryTotals, TrendsCopy } from '../../core'\n\nimport { useAccountUiStore } from '../../accounts/hooks/useUiStore'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { getIncomeTotals, getPaymentTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (\n  totals: MonthlyCategoryTotals[],\n  accountType: AccountType,\n): LineChartDataset[] => {\n  const incomeData = INCOME_ACCOUNT_TYPES.includes(accountType) ? getIncomeTotals(totals) : []\n  const paymentData = PAYMENT_ACCOUNT_TYPES.includes(accountType) ? getPaymentTotals(totals) : []\n  const spendingData = SPENDING_ACCOUNT_TYPES.includes(accountType) ? getSpendingTotals(totals) : []\n\n  // There should always be 1-2 datasets returned. No account type will have all three categories.\n  return [incomeData, paymentData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], accountType: AccountType, copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits && debits && INCOME_ACCOUNT_TYPES.includes(accountType)) {\n    const lastIncome = credits[credits.length - 1].y\n    labels.push({ label: copy.income_label, amount: lastIncome })\n  } else if (PAYMENT_ACCOUNT_TYPES.includes(accountType)) {\n    const lastPayment = credits[credits.length - 1].y\n    labels.push({ label: copy.payments_label, amount: lastPayment })\n  }\n\n  if (debits && SPENDING_ACCOUNT_TYPES.includes(accountType)) {\n    const lastSpending = debits[debits.length - 1].y\n    labels.push({ label: copy.spending_label, amount: lastSpending })\n  }\n\n  return labels\n}\n\nconst TrendsChart = () => {\n  const theme = useTheme()\n  const { selectedAccount } = useAccountUiStore()\n  const { monthlyCategoryTotals } = useCategoryStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(monthlyCategoryTotals, selectedAccount.account_type)\n  const labels = getLabels(datasets, selectedAccount.account_type, trendsCopy)\n  const isLoan = [AccountType.LOAN, AccountType.MORTGAGE].includes(selectedAccount.account_type)\n\n  return (\n    <div data-testid=\"TrendsChart\">\n      <LineChart\n        colors={colors}\n        datasets={datasets}\n        height={185}\n        labels={labels}\n        showAverage={isLoan}\n        showAxisHighlight={true}\n        showBars={isLoan}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        valueFormatterString=\"0,0\"\n      />\n    </div>\n  )\n}\n\nexport default observer(TrendsChart)\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAA,CACJ,GACA,MAOO;AAAA,EALY,EAAqB,SAAS,CAAW,IAAI,EAAgB,CAAM,IAAI,CAAC;AAAA,EACvE,EAAsB,SAAS,CAAW,IAAI,EAAiB,CAAM,IAAI,CAAC;AAAA,EACzE,EAAuB,SAAS,CAAW,IAAI,EAAkB,CAAM,IAAI,CAAC;AAGpD,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG3E,IAAA,CAAa,GAA8B,GAA0B,MAAqB;AAC9F,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,KAAW,KAAU,EAAqB,SAAS,CAAW,GAAG;AACnE,UAAM,IAAa,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAW,CAAC;AAAA,EAC9D,WAAW,EAAsB,SAAS,CAAW,GAAG;AACtD,UAAM,IAAc,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAChD,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAY,CAAC;AAAA,EACjE;AAEA,MAAI,KAAU,EAAuB,SAAS,CAAW,GAAG;AAC1D,UAAM,IAAe,EAAO,EAAO,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAa,CAAC;AAAA,EAClE;AAEA,SAAO;AACT,GAEM,IAAA,MAAoB;AACxB,QAAM,IAAQ,EAAS,GACjB,EAAE,iBAAA,EAAA,IAAoB,EAAkB,GACxC,EAAE,uBAAA,EAAA,IAA0B,EAAiB,GAC7C,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAE5C,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAuB,EAAgB,YAAY,GAC1E,IAAS,EAAU,GAAU,EAAgB,cAAc,CAAU,GACrE,IAAS,CAAC,EAAY,MAAM,EAAY,QAAQ,EAAE,SAAS,EAAgB,YAAY;AAE7F,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,eAAY;AAAA,cACf,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACE,UAAA;AAAA,MACV,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}
+{"version":3,"file":"TrendsChart.es.js","names":[],"sources":["../../../src/trends/components/TrendsChart.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\nimport { useTheme } from '@mui/material/styles'\n\nimport {\n  useCategoryStore,\n  useGlobalCopyStore,\n  INCOME_ACCOUNT_TYPES,\n  PAYMENT_ACCOUNT_TYPES,\n  SPENDING_ACCOUNT_TYPES,\n} from '../../common'\nimport { AccountType, MonthlyCategoryTotals, TrendsCopy } from '../../core'\n\nimport { useAccountUiStore } from '../../accounts/hooks/useUiStore'\nimport { LineChart } from '../../common/components/charts/LineChart'\nimport type { LineChartDataset, LineChartLabel } from '../../common/components/charts/LineChart'\n\nimport { getIncomeTotals, getPaymentTotals, getSpendingTotals } from '../utils/SpendingData'\n\nconst getDatasets = (\n  totals: MonthlyCategoryTotals[],\n  accountType: AccountType,\n): LineChartDataset[] => {\n  const incomeData = INCOME_ACCOUNT_TYPES.includes(accountType) ? getIncomeTotals(totals) : []\n  const paymentData = PAYMENT_ACCOUNT_TYPES.includes(accountType) ? getPaymentTotals(totals) : []\n  const spendingData = SPENDING_ACCOUNT_TYPES.includes(accountType) ? getSpendingTotals(totals) : []\n\n  // There should always be 1-2 datasets returned. No account type will have all three categories.\n  return [incomeData, paymentData, spendingData].filter((data) => data.length > 0)\n}\n\nconst getLabels = (datasets: LineChartDataset[], accountType: AccountType, copy: TrendsCopy) => {\n  const [dataA, dataB] = datasets\n  const credits = dataA\n  const debits = dataB ?? dataA\n  const labels: LineChartLabel[] = []\n\n  if (credits && debits && INCOME_ACCOUNT_TYPES.includes(accountType)) {\n    const lastIncome = credits[credits.length - 1].y\n    labels.push({ label: copy.income_label, amount: lastIncome })\n  } else if (PAYMENT_ACCOUNT_TYPES.includes(accountType)) {\n    const lastPayment = credits[credits.length - 1].y\n    labels.push({ label: copy.payments_label, amount: lastPayment })\n  }\n\n  if (debits && SPENDING_ACCOUNT_TYPES.includes(accountType)) {\n    const lastSpending = debits[debits.length - 1].y\n    labels.push({ label: copy.spending_label, amount: lastSpending })\n  }\n\n  return labels\n}\n\nconst TrendsChart = () => {\n  const theme = useTheme()\n  const { selectedAccount } = useAccountUiStore()\n  const { monthlyCategoryTotals } = useCategoryStore()\n  const { trends: trendsCopy } = useGlobalCopyStore()\n\n  const colors = [theme.palette.chart?.chart1, theme.palette.chart?.chart2]\n  const datasets = getDatasets(monthlyCategoryTotals, selectedAccount.account_type)\n  const labels = getLabels(datasets, selectedAccount.account_type, trendsCopy)\n  const isLoan = [AccountType.LOAN, AccountType.MORTGAGE].includes(selectedAccount.account_type)\n\n  return (\n    <div data-testid=\"TrendsChart\">\n      <LineChart\n        colors={colors}\n        datasets={datasets}\n        height={185}\n        labels={labels}\n        showAverage={isLoan}\n        showAxisHighlight={true}\n        showBars={isLoan}\n        showLegend={true}\n        showTooltip={true}\n        showXAxis={true}\n        showXAxisTicks={true}\n        showYAxis={true}\n        showYAxisTicks={true}\n        valueFormatterString=\"0,0\"\n      />\n    </div>\n  )\n}\n\nexport default observer(TrendsChart)\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAA,CACJ,GACA,MAOO;AAAA,EALY,EAAqB,SAAS,CAAW,IAAI,EAAgB,CAAM,IAAI,CAAC;AAAA,EACvE,EAAsB,SAAS,CAAW,IAAI,EAAiB,CAAM,IAAI,CAAC;AAAA,EACzE,EAAuB,SAAS,CAAW,IAAI,EAAkB,CAAM,IAAI,CAAC;AAGpD,EAAE,OAAA,CAAQ,MAAS,EAAK,SAAS,CAAC,GAG3E,IAAA,CAAa,GAA8B,GAA0B,MAAqB;AAC9F,QAAM,CAAC,GAAO,CAAA,IAAS,GACjB,IAAU,GACV,IAAS,KAAS,GAClB,IAA2B,CAAC;AAElC,MAAI,KAAW,KAAU,EAAqB,SAAS,CAAW,GAAG;AACnE,UAAM,IAAa,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAc,QAAQ;AAAA,IAAW,CAAC;AAAA,EAC9D,WAAW,EAAsB,SAAS,CAAW,GAAG;AACtD,UAAM,IAAc,EAAQ,EAAQ,SAAS,CAAA,EAAG;AAChD,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAY,CAAC;AAAA,EACjE;AAEA,MAAI,KAAU,EAAuB,SAAS,CAAW,GAAG;AAC1D,UAAM,IAAe,EAAO,EAAO,SAAS,CAAA,EAAG;AAC/C,IAAA,EAAO,KAAK;AAAA,MAAE,OAAO,EAAK;AAAA,MAAgB,QAAQ;AAAA,IAAa,CAAC;AAAA,EAClE;AAEA,SAAO;AACT,GAEM,IAAA,MAAoB;AACxB,QAAM,IAAQ,EAAS,GACjB,EAAE,iBAAA,EAAA,IAAoB,EAAkB,GACxC,EAAE,uBAAA,EAAA,IAA0B,EAAiB,GAC7C,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAE5C,IAAS,CAAC,EAAM,QAAQ,OAAO,QAAQ,EAAM,QAAQ,OAAO,MAAM,GAClE,IAAW,EAAY,GAAuB,EAAgB,YAAY,GAC1E,IAAS,EAAU,GAAU,EAAgB,cAAc,CAAU,GACrE,IAAS,CAAC,EAAY,MAAM,EAAY,QAAQ,EAAE,SAAS,EAAgB,YAAY;AAE7F,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,eAAY;AAAA,IACf,UAAA,gBAAA,EAAC,GAAD;AAAA,MACU,QAAA;AAAA,MACE,UAAA;AAAA,MACV,QAAQ;AAAA,MACA,QAAA;AAAA,MACR,aAAa;AAAA,MACb,mBAAmB;AAAA,MACnB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX,gBAAgB;AAAA,MAChB,sBAAqB;AAAA,IACtB,CAAA;AAAA,EACE,CAAA;AAET,GAEA,IAAe,EAAS,CAAW"}

package/dist/trends/components/TrendsDrawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsDrawer.es.js","names":[],"sources":["../../../src/trends/components/TrendsDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  useGlobalCopyStore,\n  useEvent,\n  useTransactionStore,\n  useGlobalUiStore,\n} from '../../common'\nimport { Transaction } from '../../core'\nimport { TransactionDetails, TransactionList } from '../../transactions'\n\nconst copy = {\n  title: 'Transaction List',\n}\n\ninterface TrendsDrawerProps {\n  categoryGuid: string\n  dateRange: {\n    start: Date\n    end: Date\n  }\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst TrendsDrawer: React.FC<TrendsDrawerProps> = ({\n  categoryGuid,\n  dateRange,\n  isOpen,\n  onClose,\n}) => {\n  const { onEvent } = useEvent()\n  const { selectedAccountGuids: accounts } = useGlobalUiStore()\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { setFilter, sortedTransactions } = useTransactionStore()\n\n  const [guid, setGuid] = React.useState('')\n  const transaction = React.useMemo(\n    () => sortedTransactions.find((t) => t.guid === guid),\n    [guid, sortedTransactions],\n  )\n\n  React.useEffect(() => {\n    setFilter({\n      accounts,\n      dateRange,\n      custom: (t: Transaction) =>\n        categoryGuid === '' ||\n        categoryGuid === t.category_guid ||\n        categoryGuid === t.top_level_category_guid,\n      showSplits: Boolean(categoryGuid),\n    })\n  }, [accounts, categoryGuid, dateRange])\n\n  React.useEffect(() => onEvent(ANALYTICS_EVENTS.TRENDS_VIEW_TRANSACTIONS), [])\n\n  const handleClose = () => {\n    setGuid('')\n    onClose()\n  }\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={copy.title}\n    >\n      {transaction && <TransactionDetails transaction={transaction} />}\n      {!transaction && <TransactionList onClick={setGuid} />}\n    </Drawer>\n  )\n}\n\nexport default observer(TrendsDrawer)\n"],"mappings":";;;;;;;;AAcA,IAAM,IAAO,EACX,OAAO,mBACT,GAYM,IAAA,CAA6C,EACjD,cAAA,GACA,WAAA,GACA,QAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,sBAAsB,EAAA,IAAa,EAAiB,GACtD,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,WAAA,GAAW,oBAAA,EAAA,IAAuB,EAAoB,GAExD,CAAC,GAAM,CAAA,IAAW,EAAM,SAAS,EAAE,GACnC,IAAc,EAAM,QAAA,MAClB,EAAmB,KAAA,CAAM,MAAM,EAAE,SAAS,CAAI,GACpD,CAAC,GAAM,CAAkB,CAC3B;AAEA,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU;AAAA,MACR,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,CAAS,MACP,MAAiB,MACjB,MAAiB,EAAE,iBACnB,MAAiB,EAAE;AAAA,MACrB,YAAY,EAAQ;AAAA,IACtB,CAAC;AAAA,EACH,GAAG;AAAA,IAAC;AAAA,IAAU;AAAA,IAAc;AAAA,EAAS,CAAC,GAEtC,EAAM,UAAA,MAAgB,EAAQ,EAAiB,wBAAwB,GAAG,CAAC,CAAC;AAE5E,QAAM,IAAA,MAAoB;AACxB,IAAA,EAAQ,EAAE,GACV,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IACnB,QAAA;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAK;AAAA,cAJd,CAMG,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA,GAC9D,CAAC,KAAe,gBAAA,EAAC,GAAD,EAAiB,SAAS,EAAU,CAAA,CAC/C;AAAA;AAEZ,GAEA,IAAe,EAAS,CAAY"}
+{"version":3,"file":"TrendsDrawer.es.js","names":[],"sources":["../../../src/trends/components/TrendsDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  ANALYTICS_EVENTS,\n  Drawer,\n  useGlobalCopyStore,\n  useEvent,\n  useTransactionStore,\n  useGlobalUiStore,\n} from '../../common'\nimport { Transaction } from '../../core'\nimport { TransactionDetails, TransactionList } from '../../transactions'\n\nconst copy = {\n  title: 'Transaction List',\n}\n\ninterface TrendsDrawerProps {\n  categoryGuid: string\n  dateRange: {\n    start: Date\n    end: Date\n  }\n  isOpen: boolean\n  onClose: () => void\n}\n\nconst TrendsDrawer: React.FC<TrendsDrawerProps> = ({\n  categoryGuid,\n  dateRange,\n  isOpen,\n  onClose,\n}) => {\n  const { onEvent } = useEvent()\n  const { selectedAccountGuids: accounts } = useGlobalUiStore()\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { setFilter, sortedTransactions } = useTransactionStore()\n\n  const [guid, setGuid] = React.useState('')\n  const transaction = React.useMemo(\n    () => sortedTransactions.find((t) => t.guid === guid),\n    [guid, sortedTransactions],\n  )\n\n  React.useEffect(() => {\n    setFilter({\n      accounts,\n      dateRange,\n      custom: (t: Transaction) =>\n        categoryGuid === '' ||\n        categoryGuid === t.category_guid ||\n        categoryGuid === t.top_level_category_guid,\n      showSplits: Boolean(categoryGuid),\n    })\n  }, [accounts, categoryGuid, dateRange])\n\n  React.useEffect(() => onEvent(ANALYTICS_EVENTS.TRENDS_VIEW_TRANSACTIONS), [])\n\n  const handleClose = () => {\n    setGuid('')\n    onClose()\n  }\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      isOpen={isOpen}\n      onClose={handleClose}\n      title={copy.title}\n    >\n      {transaction && <TransactionDetails transaction={transaction} />}\n      {!transaction && <TransactionList onClick={setGuid} />}\n    </Drawer>\n  )\n}\n\nexport default observer(TrendsDrawer)\n"],"mappings":";;;;;;;;AAcA,IAAM,IAAO,EACX,OAAO,mBACT,GAYM,IAAA,CAA6C,EACjD,cAAA,GACA,WAAA,GACA,QAAA,GACA,SAAA,EAAA,MACI;AACJ,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,sBAAsB,EAAA,IAAa,EAAiB,GACtD,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,WAAA,GAAW,oBAAA,EAAA,IAAuB,EAAoB,GAExD,CAAC,GAAM,CAAA,IAAW,EAAM,SAAS,EAAE,GACnC,IAAc,EAAM,QAAA,MAClB,EAAmB,KAAA,CAAM,MAAM,EAAE,SAAS,CAAI,GACpD,CAAC,GAAM,CAAkB,CAC3B;AAEA,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU;AAAA,MACR,UAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA,CAAS,MACP,MAAiB,MACjB,MAAiB,EAAE,iBACnB,MAAiB,EAAE;AAAA,MACrB,YAAY,EAAQ;AAAA,IACtB,CAAC;AAAA,EACH,GAAG;AAAA,IAAC;AAAA,IAAU;AAAA,IAAc;AAAA,EAAS,CAAC,GAEtC,EAAM,UAAA,MAAgB,EAAQ,EAAiB,wBAAwB,GAAG,CAAC,CAAC;AAE5E,QAAM,IAAA,MAAoB;AACxB,IAAA,EAAQ,EAAE,GACV,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IACnB,QAAA;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAK;AAAA,IAJd,UAAA,CAMG,KAAe,gBAAA,EAAC,GAAD,EAAiC,aAAA,EAAc,CAAA,GAC9D,CAAC,KAAe,gBAAA,EAAC,GAAD,EAAiB,SAAS,EAAU,CAAA,CAC/C;AAAA;AAEZ,GAEA,IAAe,EAAS,CAAY"}

package/dist/trends/components/TrendsInsights.es.js

@@ -1,38 +1,38 @@
-import { useEvent as S, useGlobalStore as C } from "../../common/context/hooks.es.js";
-import { useScreenSize as T } from "../../common/hooks/useScreenSize.es.js";
-import { ANALYTICS_EVENTS as I } from "../../common/constants/Analytics.es.js";
-import { TRENDS_ANALYTICS_METADATA as L } from "../constants/TrendsWidget.es.js";
-import k from "../../microinsights/InsightsMicroWidget.es.js";
+import { useEvent as C, useGlobalStore as T } from "../../common/context/hooks.es.js";
+import { useScreenSize as I } from "../../common/hooks/useScreenSize.es.js";
+import { ANALYTICS_EVENTS as L } from "../../common/constants/Analytics.es.js";
+import { TRENDS_ANALYTICS_METADATA as k } from "../constants/TrendsWidget.es.js";
+import v from "../../microinsights/InsightsMicroWidget.es.js";
 import "react";
-import { observer as v } from "mobx-react-lite";
-import { jsx as r } from "react/jsx-runtime";
-import { Stack as A } from "@mui/material";
-var E = ({ beats: o, onInsightCardClick: t }) => {
-  const { onEvent: s } = S(), { isMobile: i, isDesktop: n, isLargeDesktop: a } = T(), { beatStore: l, endpoint: d, sessionToken: c } = C(), e = n || a, u = e || i ? 1 : 2, h = () => null, m = (p) => {
-    t?.(p), s(I.TRENDS_CLICK_INSIGHT, L);
-  }, g = e ? 200 : 170, f = e ? 170 : 124;
-  return /* @__PURE__ */ r(A, {
-    sx: { height: o.length > 0 ? g : f },
-    children: /* @__PURE__ */ r(k, {
+import { observer as A } from "mobx-react-lite";
+import { jsx as t } from "react/jsx-runtime";
+import { Stack as E } from "@mui/material";
+var _ = ({ beats: o, onInsightCardClick: r }) => {
+  const { onEvent: s } = C(), { isMobile: i, isDesktop: n, isLargeDesktop: a } = I(), { beatStore: l, endpoint: c, sessionToken: d } = T(), e = n || a, h = e || i ? 1 : 2, u = () => null, m = (S) => {
+    r?.(S), s(L.TRENDS_CLICK_INSIGHT, k);
+  }, g = e ? 200 : 170, f = e ? 170 : 124, p = o.length > 0 ? g : f;
+  return /* @__PURE__ */ t(E, {
+    sx: { height: p },
+    children: /* @__PURE__ */ t(v, {
       areBeatsLoading: l.isLoading,
       beats: o,
       cardStyle: "border",
-      endpoint: d,
+      endpoint: c,
       headerSx: { p: 0 },
-      logOutUser: h,
+      logOutUser: u,
       onCardClick: m,
       showCarouselControls: !0,
       showHeader: e,
       showIcon: !0,
       showWithMargin: !1,
-      token: c,
+      token: d,
       userHasFullInsightFeedBeats: !1,
-      visibleCardsCount: u
+      visibleCardsCount: h
     })
   });
-}, z = v(E);
+}, B = A(_);
 export {
-  z as default
+  B as default
 };
 
 //# sourceMappingURL=TrendsInsights.es.js.map

package/dist/trends/components/TrendsInsights.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsInsights.es.js","names":[],"sources":["../../../src/trends/components/TrendsInsights.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { Stack } from '@mui/material'\n\nimport { Beat } from '../../core/types/Beat'\nimport { ANALYTICS_EVENTS, useEvent, useGlobalStore, useScreenSize } from '../../common'\n\nimport { InsightsMicroWidget } from '../../microinsights'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface TrendsMicroInsightsProps {\n  beats: Beat[]\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsMicroInsights: React.FC<TrendsMicroInsightsProps> = ({ beats, onInsightCardClick }) => {\n  const { onEvent } = useEvent()\n  const { isMobile, isDesktop, isLargeDesktop } = useScreenSize()\n  const { beatStore, endpoint, sessionToken } = useGlobalStore()\n\n  const isLargeLayout = isDesktop || isLargeDesktop\n  const visibleCards = isLargeLayout || isMobile ? 1 : 2\n\n  const handleLogOutUser = () => {\n    return null\n  }\n\n  const handleCardClick = (beat?: Beat) => {\n    onInsightCardClick?.(beat)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_INSIGHT, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const carouselHeight = isLargeLayout ? 200 : 170\n  const zeroStateHeight = isLargeLayout ? 170 : 124\n  const containerHeight = beats.length > 0 ? carouselHeight : zeroStateHeight\n\n  return (\n    <Stack sx={{ height: containerHeight }}>\n      <InsightsMicroWidget\n        areBeatsLoading={beatStore.isLoading}\n        beats={beats}\n        cardStyle=\"border\"\n        endpoint={endpoint}\n        headerSx={{ p: 0 }}\n        logOutUser={handleLogOutUser}\n        onCardClick={handleCardClick}\n        showCarouselControls={true}\n        showHeader={isLargeLayout}\n        showIcon={true}\n        showWithMargin={false}\n        token={sessionToken}\n        userHasFullInsightFeedBeats={false}\n        visibleCardsCount={visibleCards}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(TrendsMicroInsights)\n"],"mappings":";;;;;;;;;AAeA,IAAM,IAAA,CAA2D,EAAE,OAAA,GAAO,oBAAA,EAAA,MAAyB;AACjG,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAA,GAAU,WAAA,GAAW,gBAAA,EAAA,IAAmB,EAAc,GACxD,EAAE,WAAA,GAAW,UAAA,GAAU,cAAA,EAAA,IAAiB,EAAe,GAEvD,IAAgB,KAAa,GAC7B,IAAe,KAAiB,IAAW,IAAI,GAE/C,IAAA,MACG,MAGH,IAAA,CAAmB,MAAgB;AACvC,IAAA,IAAqB,CAAI,GACzB,EAAQ,EAAiB,sBAAsB,CAAyB;AAAA,EAC1E,GAEM,IAAiB,IAAgB,MAAM,KACvC,IAAkB,IAAgB,MAAM;AAG9C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,QAHS,EAAM,SAAS,IAAI,IAAiB,EAGrB;AAAA,cACnC,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAiB,EAAU;AAAA,MACpB,OAAA;AAAA,MACP,WAAU;AAAA,MACA,UAAA;AAAA,MACV,UAAU,EAAE,GAAG,EAAE;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B,mBAAmB;AAAA,IACpB,CAAA;AAAA,EACI,CAAA;AAEX,GAEA,IAAe,EAAS,CAAmB"}
+{"version":3,"file":"TrendsInsights.es.js","names":[],"sources":["../../../src/trends/components/TrendsInsights.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { Stack } from '@mui/material'\n\nimport { Beat } from '../../core/types/Beat'\nimport { ANALYTICS_EVENTS, useEvent, useGlobalStore, useScreenSize } from '../../common'\n\nimport { InsightsMicroWidget } from '../../microinsights'\nimport { TRENDS_ANALYTICS_METADATA } from '../constants/TrendsWidget'\n\ninterface TrendsMicroInsightsProps {\n  beats: Beat[]\n  onInsightCardClick?: (beat?: Beat) => void\n}\n\nconst TrendsMicroInsights: React.FC<TrendsMicroInsightsProps> = ({ beats, onInsightCardClick }) => {\n  const { onEvent } = useEvent()\n  const { isMobile, isDesktop, isLargeDesktop } = useScreenSize()\n  const { beatStore, endpoint, sessionToken } = useGlobalStore()\n\n  const isLargeLayout = isDesktop || isLargeDesktop\n  const visibleCards = isLargeLayout || isMobile ? 1 : 2\n\n  const handleLogOutUser = () => {\n    return null\n  }\n\n  const handleCardClick = (beat?: Beat) => {\n    onInsightCardClick?.(beat)\n    onEvent(ANALYTICS_EVENTS.TRENDS_CLICK_INSIGHT, TRENDS_ANALYTICS_METADATA)\n  }\n\n  const carouselHeight = isLargeLayout ? 200 : 170\n  const zeroStateHeight = isLargeLayout ? 170 : 124\n  const containerHeight = beats.length > 0 ? carouselHeight : zeroStateHeight\n\n  return (\n    <Stack sx={{ height: containerHeight }}>\n      <InsightsMicroWidget\n        areBeatsLoading={beatStore.isLoading}\n        beats={beats}\n        cardStyle=\"border\"\n        endpoint={endpoint}\n        headerSx={{ p: 0 }}\n        logOutUser={handleLogOutUser}\n        onCardClick={handleCardClick}\n        showCarouselControls={true}\n        showHeader={isLargeLayout}\n        showIcon={true}\n        showWithMargin={false}\n        token={sessionToken}\n        userHasFullInsightFeedBeats={false}\n        visibleCardsCount={visibleCards}\n      />\n    </Stack>\n  )\n}\n\nexport default observer(TrendsMicroInsights)\n"],"mappings":";;;;;;;;;AAeA,IAAM,IAAA,CAA2D,EAAE,OAAA,GAAO,oBAAA,EAAA,MAAyB;AACjG,QAAM,EAAE,SAAA,EAAA,IAAY,EAAS,GACvB,EAAE,UAAA,GAAU,WAAA,GAAW,gBAAA,EAAA,IAAmB,EAAc,GACxD,EAAE,WAAA,GAAW,UAAA,GAAU,cAAA,EAAA,IAAiB,EAAe,GAEvD,IAAgB,KAAa,GAC7B,IAAe,KAAiB,IAAW,IAAI,GAE/C,IAAA,MACG,MAGH,IAAA,CAAmB,MAAgB;AACvC,IAAA,IAAqB,CAAI,GACzB,EAAQ,EAAiB,sBAAsB,CAAyB;AAAA,EAC1E,GAEM,IAAiB,IAAgB,MAAM,KACvC,IAAkB,IAAgB,MAAM,KACxC,IAAkB,EAAM,SAAS,IAAI,IAAiB;AAE5D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,QAAQ,EAAgB;AAAA,IACnC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAiB,EAAU;AAAA,MACpB,OAAA;AAAA,MACP,WAAU;AAAA,MACA,UAAA;AAAA,MACV,UAAU,EAAE,GAAG,EAAE;AAAA,MACjB,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,sBAAsB;AAAA,MACtB,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,6BAA6B;AAAA,MAC7B,mBAAmB;AAAA,IACpB,CAAA;AAAA,EACI,CAAA;AAEX,GAEA,IAAe,EAAS,CAAmB"}

package/dist/trends/components/TrendsMicroSpendingIncomeBox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsMicroSpendingIncomeBox.es.js","names":[],"sources":["../../../src/trends/components/TrendsMicroSpendingIncomeBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { TrendingDown, TrendingUp } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport { useWidgetContainerProvider } from '../../common'\nimport { formatCurrency, formatPercentage } from '../../core/utils/NumberFormatting'\nconst secondaryLabelWidth = 70\n\ninterface TrendsMicroSpendingIncomeBoxProps {\n  title: string\n  totalAmount: number\n  transactionType: 'spending' | 'income'\n  percentage: number\n  secondaryLabel: string\n  shouldDisplayPercentage: boolean\n}\nexport const TrendsMicroSpendingIncomeBox = ({\n  title,\n  totalAmount,\n  transactionType,\n  percentage,\n  secondaryLabel,\n  shouldDisplayPercentage,\n}: TrendsMicroSpendingIncomeBoxProps) => {\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const amountRef = React.useRef<HTMLSpanElement | null>(null)\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n\n  const displayPercentage = formatPercentage(Number(Math.abs(percentage)), {\n    style: 'percent',\n    minimumIntegerDigits: 1,\n  })\n\n  const displayTotalAmount =\n    availableWidth === 288 && formatCurrency(totalAmount, '0,0.00').length > 10\n      ? formatCurrency(totalAmount, '0,0')\n      : formatCurrency(totalAmount, '0,0.00')\n\n  const isGainPercentage = transactionType === 'spending' ? percentage > 0 : percentage >= 0\n  const isGainPercentageColor = transactionType === 'spending' ? 'error.main' : 'success.main'\n  const isLossPercentageColor = transactionType === 'spending' ? 'success.main' : 'text.secondary'\n\n  const amountElement = amountRef?.current\n  const containerElement = containerRef?.current\n  const isOverflowing =\n    amountElement && containerElement\n      ? amountElement.scrollWidth > containerElement.clientWidth - secondaryLabelWidth\n      : false\n  return (\n    <Stack\n      sx={{\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: '4px',\n        flex: 1,\n        minWidth: 0,\n        px: 12,\n        py: 8,\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n        }}\n      >\n        <P color=\"text.secondary\" variant=\"caption\">\n          {title}\n        </P>\n        {shouldDisplayPercentage && (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isGainPercentage ? (\n              <TrendingUp size={20} sx={{ color: isGainPercentageColor }} />\n            ) : (\n              <TrendingDown size={20} sx={{ color: isLossPercentageColor }} />\n            )}\n            <P\n              sx={{\n                color: isGainPercentage ? isGainPercentageColor : isLossPercentageColor,\n                fontWeight: 600,\n              }}\n              variant=\"body2\"\n            >\n              {displayPercentage}\n            </P>\n          </Stack>\n        )}\n      </Stack>\n      <Stack\n        ref={containerRef}\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n        }}\n      >\n        <Box\n          ref={amountRef}\n          sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n        >\n          <H3>{displayTotalAmount}</H3>\n        </Box>\n        {shouldDisplayPercentage && availableWidth >= 450 && !isOverflowing && (\n          <P\n            color={isGainPercentage ? isGainPercentageColor : isLossPercentageColor}\n            variant=\"caption\"\n          >\n            {secondaryLabel}\n          </P>\n        )}\n      </Stack>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAsB,IAUf,IAAA,CAAgC,EAC3C,OAAA,GACA,aAAA,GACA,iBAAA,GACA,YAAA,GACA,gBAAA,GACA,yBAAA,EAAA,MACuC;AACvC,QAAM,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAEhD,IAAY,EAAM,OAA+B,IAAI,GACrD,IAAe,EAAM,OAA8B,IAAI,GAEvD,IAAoB,EAAiB,OAAO,KAAK,IAAI,CAAU,CAAC,GAAG;AAAA,IACvE,OAAO;AAAA,IACP,sBAAsB;AAAA,EACxB,CAAC,GAEK,IACJ,MAAmB,OAAO,EAAe,GAAa,QAAQ,EAAE,SAAS,KACrE,EAAe,GAAa,KAAK,IACjC,EAAe,GAAa,QAAQ,GAEpC,IAAmB,MAAoB,aAAa,IAAa,IAAI,KAAc,GACnF,IAAwB,MAAoB,aAAa,eAAe,gBACxE,IAAwB,MAAoB,aAAa,iBAAiB,kBAE1E,IAAgB,GAAW,SAC3B,IAAmB,GAAc,SACjC,IACJ,KAAiB,IACb,EAAc,cAAc,EAAiB,cAAc,IAC3D;AACN,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,cATF,CAWE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,gBALF,CAOE,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAiB,SAAQ;AAAA,kBAC/B;AAAA,MACA,CAAA,GACF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,kBAAhE,CACG,IACC,gBAAA,EAAC,GAAD;AAAA,UAAY,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,EAAsB;AAAA,QAAI,CAAA,IAE7D,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,EAAsB;AAAA,QAAI,CAAA,GAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,OAAO,IAAmB,IAAwB;AAAA,YAClD,YAAY;AAAA,UACd;AAAA,UACA,SAAQ;AAAA,oBAEP;AAAA,QACA,CAAA,CACE;AAAA,QAEJ;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,gBANF,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,KAAK;AAAA,QACL,IAAI;AAAA,UAAE,UAAU;AAAA,UAAU,cAAc;AAAA,UAAY,YAAY;AAAA,QAAS;AAAA,kBAEzE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAuB,CAAA;AAAA,MACzB,CAAA,GACJ,KAA2B,KAAkB,OAAO,CAAC,KACpD,gBAAA,EAAC,GAAD;AAAA,QACE,OAAO,IAAmB,IAAwB;AAAA,QAClD,SAAQ;AAAA,kBAEP;AAAA,MACA,CAAA,CAEA;AAAA,MACF;AAAA;AAEX"}
+{"version":3,"file":"TrendsMicroSpendingIncomeBox.es.js","names":[],"sources":["../../../src/trends/components/TrendsMicroSpendingIncomeBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { TrendingDown, TrendingUp } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport { useWidgetContainerProvider } from '../../common'\nimport { formatCurrency, formatPercentage } from '../../core/utils/NumberFormatting'\nconst secondaryLabelWidth = 70\n\ninterface TrendsMicroSpendingIncomeBoxProps {\n  title: string\n  totalAmount: number\n  transactionType: 'spending' | 'income'\n  percentage: number\n  secondaryLabel: string\n  shouldDisplayPercentage: boolean\n}\nexport const TrendsMicroSpendingIncomeBox = ({\n  title,\n  totalAmount,\n  transactionType,\n  percentage,\n  secondaryLabel,\n  shouldDisplayPercentage,\n}: TrendsMicroSpendingIncomeBoxProps) => {\n  const { availableWidth } = useWidgetContainerProvider()\n\n  const amountRef = React.useRef<HTMLSpanElement | null>(null)\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n\n  const displayPercentage = formatPercentage(Number(Math.abs(percentage)), {\n    style: 'percent',\n    minimumIntegerDigits: 1,\n  })\n\n  const displayTotalAmount =\n    availableWidth === 288 && formatCurrency(totalAmount, '0,0.00').length > 10\n      ? formatCurrency(totalAmount, '0,0')\n      : formatCurrency(totalAmount, '0,0.00')\n\n  const isGainPercentage = transactionType === 'spending' ? percentage > 0 : percentage >= 0\n  const isGainPercentageColor = transactionType === 'spending' ? 'error.main' : 'success.main'\n  const isLossPercentageColor = transactionType === 'spending' ? 'success.main' : 'text.secondary'\n\n  const amountElement = amountRef?.current\n  const containerElement = containerRef?.current\n  const isOverflowing =\n    amountElement && containerElement\n      ? amountElement.scrollWidth > containerElement.clientWidth - secondaryLabelWidth\n      : false\n  return (\n    <Stack\n      sx={{\n        border: 1,\n        borderColor: 'divider',\n        borderRadius: '4px',\n        flex: 1,\n        minWidth: 0,\n        px: 12,\n        py: 8,\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n        }}\n      >\n        <P color=\"text.secondary\" variant=\"caption\">\n          {title}\n        </P>\n        {shouldDisplayPercentage && (\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n            {isGainPercentage ? (\n              <TrendingUp size={20} sx={{ color: isGainPercentageColor }} />\n            ) : (\n              <TrendingDown size={20} sx={{ color: isLossPercentageColor }} />\n            )}\n            <P\n              sx={{\n                color: isGainPercentage ? isGainPercentageColor : isLossPercentageColor,\n                fontWeight: 600,\n              }}\n              variant=\"body2\"\n            >\n              {displayPercentage}\n            </P>\n          </Stack>\n        )}\n      </Stack>\n      <Stack\n        ref={containerRef}\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n        }}\n      >\n        <Box\n          ref={amountRef}\n          sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}\n        >\n          <H3>{displayTotalAmount}</H3>\n        </Box>\n        {shouldDisplayPercentage && availableWidth >= 450 && !isOverflowing && (\n          <P\n            color={isGainPercentage ? isGainPercentageColor : isLossPercentageColor}\n            variant=\"caption\"\n          >\n            {secondaryLabel}\n          </P>\n        )}\n      </Stack>\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAsB,IAUf,IAAA,CAAgC,EAC3C,OAAA,GACA,aAAA,GACA,iBAAA,GACA,YAAA,GACA,gBAAA,GACA,yBAAA,EAAA,MACuC;AACvC,QAAM,EAAE,gBAAA,EAAA,IAAmB,EAA2B,GAEhD,IAAY,EAAM,OAA+B,IAAI,GACrD,IAAe,EAAM,OAA8B,IAAI,GAEvD,IAAoB,EAAiB,OAAO,KAAK,IAAI,CAAU,CAAC,GAAG;AAAA,IACvE,OAAO;AAAA,IACP,sBAAsB;AAAA,EACxB,CAAC,GAEK,IACJ,MAAmB,OAAO,EAAe,GAAa,QAAQ,EAAE,SAAS,KACrE,EAAe,GAAa,KAAK,IACjC,EAAe,GAAa,QAAQ,GAEpC,IAAmB,MAAoB,aAAa,IAAa,IAAI,KAAc,GACnF,IAAwB,MAAoB,aAAa,eAAe,gBACxE,IAAwB,MAAoB,aAAa,iBAAiB,kBAE1E,IAAgB,GAAW,SAC3B,IAAmB,GAAc,SACjC,IACJ,KAAiB,IACb,EAAc,cAAc,EAAiB,cAAc,IAC3D;AACN,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,MACV,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IATF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MALF,UAAA,CAOE,gBAAA,EAAC,GAAD;AAAA,QAAG,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAC/B,UAAA;AAAA,MACA,CAAA,GACF,KACC,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,QAAE;AAAA,QAAhE,UAAA,CACG,IACC,gBAAA,EAAC,GAAD;AAAA,UAAY,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,EAAsB;AAAA,QAAI,CAAA,IAE7D,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,UAAI,IAAI,EAAE,OAAO,EAAsB;AAAA,QAAI,CAAA,GAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,OAAO,IAAmB,IAAwB;AAAA,YAClD,YAAY;AAAA,UACd;AAAA,UACA,SAAQ;AAAA,UAEP,UAAA;AAAA,QACA,CAAA,CACE;AAAA,MAEJ,CAAA,CAAA;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MANF,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,KAAK;AAAA,QACL,IAAI;AAAA,UAAE,UAAU;AAAA,UAAU,cAAc;AAAA,UAAY,YAAY;AAAA,QAAS;AAAA,QAEzE,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAuB,CAAA;AAAA,MACzB,CAAA,GACJ,KAA2B,KAAkB,OAAO,CAAC,KACpD,gBAAA,EAAC,GAAD;AAAA,QACE,OAAO,IAAmB,IAAwB;AAAA,QAClD,SAAQ;AAAA,QAEP,UAAA;AAAA,MACA,CAAA,CAEA;AAAA,IACF,CAAA,CAAA;AAAA;AAEX"}

package/dist/trends/components/TrendsTableContainer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsTableContainer.es.js","names":[],"sources":["../../../src/trends/components/TrendsTableContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../common'\n\nimport {\n  generateMonthHeaders,\n  getTrendsTableColumns,\n  getTrendsTableRows,\n} from '../utils/TrendsTable'\n\nimport { TrendsTable } from './trendstable/TrendsTable'\n\ninterface TrendsTableProps {\n  sx?: any\n  height?: number | string\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategory?: string\n  onClickRow?: (category: string) => void\n}\n\nconst TrendsTableContainer: React.FC<TrendsTableProps> = ({\n  selectedDateRange,\n  selectedCategory,\n  onClickRow,\n  height = '100%',\n  sx = {},\n}) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { trendsCategories } = useCategoryStore()\n\n  // Generate all headers for the selected date range\n  const monthHeaders = React.useMemo(() => {\n    return generateMonthHeaders(selectedDateRange.start, selectedDateRange.end)\n  }, [selectedDateRange])\n\n  const columns = React.useMemo(() => {\n    return getTrendsTableColumns(monthHeaders, copy)\n  }, [monthHeaders, copy])\n\n  const parentCategory = React.useMemo(() => {\n    if (selectedCategory) {\n      return trendsCategories.find((category) => category.guid === selectedCategory)\n    }\n    return undefined\n  }, [selectedCategory, trendsCategories])\n\n  const [incomeRows, spendingRows] = React.useMemo(() => {\n    let categories = trendsCategories\n    if (parentCategory) {\n      categories = parentCategory.subCategories.filter((c) =>\n        c.monthlyAmounts.some((ma) => ma.amount !== 0),\n      )\n    }\n\n    return [\n      getTrendsTableRows(categories, copy, true, monthHeaders, parentCategory),\n      getTrendsTableRows(categories, copy, false, monthHeaders, parentCategory),\n    ]\n  }, [trendsCategories, monthHeaders, parentCategory, copy])\n\n  const totalSpendingRow = {\n    id: 'total',\n    category: copy.table_column_total,\n    category_guid: 'total',\n    isParent: false,\n    top_level_category_guid: 'total',\n    total: spendingRows.reduce((sum, row) => sum + row.total, 0),\n    monthlyAmounts: spendingRows.reduce(\n      (amounts, row) => {\n        Object.entries(row.monthlyAmounts).forEach(([month, amount]) => {\n          amounts[month] = (amounts[month] || 0) + amount\n        })\n        return amounts\n      },\n      {} as Record<string, number>,\n    ),\n  }\n\n  return (\n    <Stack\n      gap={24}\n      sx={{ height: height, width: '100%', overflowX: 'auto', boxShadow: 'none', ...sx }}\n    >\n      {(!parentCategory || (parentCategory && parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={incomeRows}\n        />\n      )}\n      {(!parentCategory || (parentCategory && !parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={spendingRows}\n          totalRow={totalSpendingRow}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default TrendsTableContainer\n"],"mappings":";;;;;;AAsBA,IAAM,IAAA,CAAoD,EACxD,mBAAA,GACA,kBAAA,GACA,YAAA,GACA,QAAA,IAAS,QACT,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,kBAAA,EAAA,IAAqB,EAAiB,GAGxC,IAAe,EAAM,QAAA,MAClB,EAAqB,EAAkB,OAAO,EAAkB,GAAG,GACzE,CAAC,CAAiB,CAAC,GAEhB,IAAU,EAAM,QAAA,MACb,EAAsB,GAAc,CAAI,GAC9C,CAAC,GAAc,CAAI,CAAC,GAEjB,IAAiB,EAAM,QAAA,MAAc;AACzC,QAAI,EACF,QAAO,EAAiB,KAAA,CAAM,MAAa,EAAS,SAAS,CAAgB;AAAA,EAGjF,GAAG,CAAC,GAAkB,CAAgB,CAAC,GAEjC,CAAC,GAAY,CAAA,IAAgB,EAAM,QAAA,MAAc;AACrD,QAAI,IAAa;AACjB,WAAI,MACF,IAAa,EAAe,cAAc,OAAA,CAAQ,MAChD,EAAE,eAAe,KAAA,CAAM,MAAO,EAAG,WAAW,CAAC,CAC/C,IAGK,CACL,EAAmB,GAAY,GAAM,IAAM,GAAc,CAAc,GACvE,EAAmB,GAAY,GAAM,IAAO,GAAc,CAAc,CAC1E;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAgB;AAAA,EAAI,CAAC,GAEnD,IAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,UAAU,EAAK;AAAA,IACf,eAAe;AAAA,IACf,UAAU;AAAA,IACV,yBAAyB;AAAA,IACzB,OAAO,EAAa,OAAA,CAAQ,GAAK,MAAQ,IAAM,EAAI,OAAO,CAAC;AAAA,IAC3D,gBAAgB,EAAa,OAAA,CAC1B,GAAS,OACR,OAAO,QAAQ,EAAI,cAAc,EAAE,QAAA,CAAS,CAAC,GAAO,CAAA,MAAY;AAC9D,MAAA,EAAQ,CAAA,KAAU,EAAQ,CAAA,KAAU,KAAK;AAAA,IAC3C,CAAC,GACM,IAET,CAAC,CACH;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK;AAAA,IACL,IAAI;AAAA,MAAU,QAAA;AAAA,MAAQ,OAAO;AAAA,MAAQ,WAAW;AAAA,MAAQ,WAAW;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,cAFnF,EAII,CAAC,KAAmB,KAAkB,EAAe,cACrD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,IACP,CAAA,IAED,CAAC,KAAmB,KAAkB,CAAC,EAAe,cACtD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,IACX,CAAA,CAEE;AAAA;AAEX"}
+{"version":3,"file":"TrendsTableContainer.es.js","names":[],"sources":["../../../src/trends/components/TrendsTableContainer.tsx"],"sourcesContent":["import React from 'react'\n\nimport Stack from '@mui/material/Stack'\n\nimport { useCategoryStore, useGlobalCopyStore } from '../../common'\n\nimport {\n  generateMonthHeaders,\n  getTrendsTableColumns,\n  getTrendsTableRows,\n} from '../utils/TrendsTable'\n\nimport { TrendsTable } from './trendstable/TrendsTable'\n\ninterface TrendsTableProps {\n  sx?: any\n  height?: number | string\n  selectedDateRange: { start: Date; end: Date }\n  selectedCategory?: string\n  onClickRow?: (category: string) => void\n}\n\nconst TrendsTableContainer: React.FC<TrendsTableProps> = ({\n  selectedDateRange,\n  selectedCategory,\n  onClickRow,\n  height = '100%',\n  sx = {},\n}) => {\n  const { trends: copy } = useGlobalCopyStore()\n  const { trendsCategories } = useCategoryStore()\n\n  // Generate all headers for the selected date range\n  const monthHeaders = React.useMemo(() => {\n    return generateMonthHeaders(selectedDateRange.start, selectedDateRange.end)\n  }, [selectedDateRange])\n\n  const columns = React.useMemo(() => {\n    return getTrendsTableColumns(monthHeaders, copy)\n  }, [monthHeaders, copy])\n\n  const parentCategory = React.useMemo(() => {\n    if (selectedCategory) {\n      return trendsCategories.find((category) => category.guid === selectedCategory)\n    }\n    return undefined\n  }, [selectedCategory, trendsCategories])\n\n  const [incomeRows, spendingRows] = React.useMemo(() => {\n    let categories = trendsCategories\n    if (parentCategory) {\n      categories = parentCategory.subCategories.filter((c) =>\n        c.monthlyAmounts.some((ma) => ma.amount !== 0),\n      )\n    }\n\n    return [\n      getTrendsTableRows(categories, copy, true, monthHeaders, parentCategory),\n      getTrendsTableRows(categories, copy, false, monthHeaders, parentCategory),\n    ]\n  }, [trendsCategories, monthHeaders, parentCategory, copy])\n\n  const totalSpendingRow = {\n    id: 'total',\n    category: copy.table_column_total,\n    category_guid: 'total',\n    isParent: false,\n    top_level_category_guid: 'total',\n    total: spendingRows.reduce((sum, row) => sum + row.total, 0),\n    monthlyAmounts: spendingRows.reduce(\n      (amounts, row) => {\n        Object.entries(row.monthlyAmounts).forEach(([month, amount]) => {\n          amounts[month] = (amounts[month] || 0) + amount\n        })\n        return amounts\n      },\n      {} as Record<string, number>,\n    ),\n  }\n\n  return (\n    <Stack\n      gap={24}\n      sx={{ height: height, width: '100%', overflowX: 'auto', boxShadow: 'none', ...sx }}\n    >\n      {(!parentCategory || (parentCategory && parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={incomeRows}\n        />\n      )}\n      {(!parentCategory || (parentCategory && !parentCategory.is_income)) && (\n        <TrendsTable\n          columns={columns}\n          onRowClick={onClickRow}\n          parentCategory={parentCategory}\n          rows={spendingRows}\n          totalRow={totalSpendingRow}\n        />\n      )}\n    </Stack>\n  )\n}\n\nexport default TrendsTableContainer\n"],"mappings":";;;;;;AAsBA,IAAM,IAAA,CAAoD,EACxD,mBAAA,GACA,kBAAA,GACA,YAAA,GACA,QAAA,IAAS,QACT,IAAA,IAAK,CAAC,EAAA,MACF;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB,GACtC,EAAE,kBAAA,EAAA,IAAqB,EAAiB,GAGxC,IAAe,EAAM,QAAA,MAClB,EAAqB,EAAkB,OAAO,EAAkB,GAAG,GACzE,CAAC,CAAiB,CAAC,GAEhB,IAAU,EAAM,QAAA,MACb,EAAsB,GAAc,CAAI,GAC9C,CAAC,GAAc,CAAI,CAAC,GAEjB,IAAiB,EAAM,QAAA,MAAc;AACzC,QAAI,EACF,QAAO,EAAiB,KAAA,CAAM,MAAa,EAAS,SAAS,CAAgB;AAAA,EAGjF,GAAG,CAAC,GAAkB,CAAgB,CAAC,GAEjC,CAAC,GAAY,CAAA,IAAgB,EAAM,QAAA,MAAc;AACrD,QAAI,IAAa;AACjB,WAAI,MACF,IAAa,EAAe,cAAc,OAAA,CAAQ,MAChD,EAAE,eAAe,KAAA,CAAM,MAAO,EAAG,WAAW,CAAC,CAC/C,IAGK,CACL,EAAmB,GAAY,GAAM,IAAM,GAAc,CAAc,GACvE,EAAmB,GAAY,GAAM,IAAO,GAAc,CAAc,CAC1E;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAkB;AAAA,IAAc;AAAA,IAAgB;AAAA,EAAI,CAAC,GAEnD,IAAmB;AAAA,IACvB,IAAI;AAAA,IACJ,UAAU,EAAK;AAAA,IACf,eAAe;AAAA,IACf,UAAU;AAAA,IACV,yBAAyB;AAAA,IACzB,OAAO,EAAa,OAAA,CAAQ,GAAK,MAAQ,IAAM,EAAI,OAAO,CAAC;AAAA,IAC3D,gBAAgB,EAAa,OAAA,CAC1B,GAAS,OACR,OAAO,QAAQ,EAAI,cAAc,EAAE,QAAA,CAAS,CAAC,GAAO,CAAA,MAAY;AAC9D,MAAA,EAAQ,CAAA,KAAU,EAAQ,CAAA,KAAU,KAAK;AAAA,IAC3C,CAAC,GACM,IAET,CAAC,CACH;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK;AAAA,IACL,IAAI;AAAA,MAAU,QAAA;AAAA,MAAQ,OAAO;AAAA,MAAQ,WAAW;AAAA,MAAQ,WAAW;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAFnF,UAAA,EAII,CAAC,KAAmB,KAAkB,EAAe,cACrD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,IACP,CAAA,IAED,CAAC,KAAmB,KAAkB,CAAC,EAAe,cACtD,gBAAA,EAAC,GAAD;AAAA,MACW,SAAA;AAAA,MACT,YAAY;AAAA,MACI,gBAAA;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,IACX,CAAA,CAEE;AAAA;AAEX"}

package/dist/trends/components/TrendsViewToggle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrendsViewToggle.es.js","names":[],"sources":["../../../src/trends/components/TrendsViewToggle.tsx"],"sourcesContent":["import { Icon } from '@mxenabled/mxui'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport type TrendsTabValue = 'Chart' | 'Table'\n\ninterface TrendsViewToggleProps {\n  selectedTab: TrendsTabValue\n  onTabChange: (_event: React.SyntheticEvent, newValue: TrendsTabValue) => void\n}\n\nconst TrendsViewToggle: React.FC<TrendsViewToggleProps> = ({ selectedTab, onTabChange }) => {\n  const { common: copy } = useGlobalCopyStore()\n  return (\n    <ToggleButtonGroup\n      aria-label={copy.view_toggle}\n      exclusive={true}\n      onChange={onTabChange}\n      orientation=\"horizontal\"\n      value={selectedTab}\n    >\n      {['Chart', 'Table'].map((tab) => (\n        <ToggleButton\n          aria-label={tab === 'Chart' ? copy.view_chart : copy.view_table}\n          aria-pressed={selectedTab === tab}\n          color=\"primary\"\n          key={tab}\n          sx={{ width: 56 }}\n          value={tab}\n        >\n          {tab === 'Chart' ? (\n            <Icon name=\"table_chart_view\" />\n          ) : (\n            <Icon name=\"format_list_bulleted\" />\n          )}\n        </ToggleButton>\n      ))}\n    </ToggleButtonGroup>\n  )\n}\n\nexport default TrendsViewToggle\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAqD,EAAE,aAAA,GAAa,aAAA,EAAA,MAAkB;AAC1F,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAC5C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY,EAAK;AAAA,IACjB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAY;AAAA,IACZ,OAAO;AAAA,cAEN,CAAC,SAAS,OAAO,EAAE,IAAA,CAAK,MACvB,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,MAAQ,UAAU,EAAK,aAAa,EAAK;AAAA,MACrD,gBAAc,MAAgB;AAAA,MAC9B,OAAM;AAAA,MAEN,IAAI,EAAE,OAAO,GAAG;AAAA,MAChB,OAAO;AAAA,gBAEN,MAAQ,UACP,gBAAA,EAAC,GAAD,EAAM,MAAK,mBAAoB,CAAA,IAE/B,gBAAA,EAAC,GAAD,EAAM,MAAK,uBAAwB,CAAA;AAAA,IAEzB,GATP,CASO,CACf;AAAA,EACgB,CAAA;AAEvB"}
+{"version":3,"file":"TrendsViewToggle.es.js","names":[],"sources":["../../../src/trends/components/TrendsViewToggle.tsx"],"sourcesContent":["import { Icon } from '@mxenabled/mxui'\nimport ToggleButton from '@mui/material/ToggleButton'\nimport ToggleButtonGroup from '@mui/material/ToggleButtonGroup'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport type TrendsTabValue = 'Chart' | 'Table'\n\ninterface TrendsViewToggleProps {\n  selectedTab: TrendsTabValue\n  onTabChange: (_event: React.SyntheticEvent, newValue: TrendsTabValue) => void\n}\n\nconst TrendsViewToggle: React.FC<TrendsViewToggleProps> = ({ selectedTab, onTabChange }) => {\n  const { common: copy } = useGlobalCopyStore()\n  return (\n    <ToggleButtonGroup\n      aria-label={copy.view_toggle}\n      exclusive={true}\n      onChange={onTabChange}\n      orientation=\"horizontal\"\n      value={selectedTab}\n    >\n      {['Chart', 'Table'].map((tab) => (\n        <ToggleButton\n          aria-label={tab === 'Chart' ? copy.view_chart : copy.view_table}\n          aria-pressed={selectedTab === tab}\n          color=\"primary\"\n          key={tab}\n          sx={{ width: 56 }}\n          value={tab}\n        >\n          {tab === 'Chart' ? (\n            <Icon name=\"table_chart_view\" />\n          ) : (\n            <Icon name=\"format_list_bulleted\" />\n          )}\n        </ToggleButton>\n      ))}\n    </ToggleButtonGroup>\n  )\n}\n\nexport default TrendsViewToggle\n"],"mappings":";;;;;AAaA,IAAM,IAAA,CAAqD,EAAE,aAAA,GAAa,aAAA,EAAA,MAAkB;AAC1F,QAAM,EAAE,QAAQ,EAAA,IAAS,EAAmB;AAC5C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY,EAAK;AAAA,IACjB,WAAW;AAAA,IACX,UAAU;AAAA,IACV,aAAY;AAAA,IACZ,OAAO;AAAA,IAEN,UAAA,CAAC,SAAS,OAAO,EAAE,IAAA,CAAK,MACvB,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,MAAQ,UAAU,EAAK,aAAa,EAAK;AAAA,MACrD,gBAAc,MAAgB;AAAA,MAC9B,OAAM;AAAA,MAEN,IAAI,EAAE,OAAO,GAAG;AAAA,MAChB,OAAO;AAAA,MAEN,UAAA,MAAQ,UACP,gBAAA,EAAC,GAAD,EAAM,MAAK,mBAAoB,CAAA,IAE/B,gBAAA,EAAC,GAAD,EAAM,MAAK,uBAAwB,CAAA;AAAA,IAEzB,GATP,CASO,CACf;AAAA,EACgB,CAAA;AAEvB"}

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,cAEN;AAAA,EACS,CAAA;AAGd,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,WAAU;AAAA,cAC5B,KAAS,OACR,gBAAA,EAAC,GAAD;AAAA,MAAO,cAAc;AAAA,MAAO,OAAM;AAAA,MAAU,SAAQ;AAAA,gBACjD;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 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"}

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

@@ -1 +1 @@
-{"version":3,"file":"AmountCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/AmountCell.tsx"],"sourcesContent":["import { GridCellParams } from '@mui/x-data-grid'\nimport Stack from '@mui/material/Stack'\n\nimport { CurrencyText } from '../../../common'\nimport { CategoryGuids } from '../../../core/constants'\n\nexport const AmountCell = (params: GridCellParams) => {\n  const category = params.row.category_guid\n  const parentCategory = params.row.top_level_category_guid\n  const isIncome = category === CategoryGuids.INCOME || parentCategory === CategoryGuids.INCOME\n  const isTotalRow = params.id === 'total'\n  const isTotalColumn = params.field === 'total'\n  const amount = isTotalColumn ? params.row[params.field] : params.row.monthlyAmounts[params.field]\n\n  return (\n    <Stack alignItems=\"flex-end\" direction=\"row\" tabIndex={params.tabIndex}>\n      <CurrencyText\n        amount={isIncome ? Math.abs(amount) : amount}\n        isIncome={isIncome}\n        sx={{ fontWeight: isIncome || isTotalColumn || isTotalRow ? 600 : 500 }}\n        symbol={isIncome ? '+' : undefined}\n        variant={isTotalRow ? 'body1' : 'body2'}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,IAAA,CAAc,MAA2B;AACpD,QAAM,IAAW,EAAO,IAAI,eACtB,IAAiB,EAAO,IAAI,yBAC5B,IAAW,MAAa,EAAc,UAAU,MAAmB,EAAc,QACjF,IAAa,EAAO,OAAO,SAC3B,IAAgB,EAAO,UAAU,SACjC,IAAS,IAAgB,EAAO,IAAI,EAAO,KAAA,IAAS,EAAO,IAAI,eAAe,EAAO,KAAA;AAE3F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAW,WAAU;AAAA,IAAM,UAAU,EAAO;AAAA,cAC5D,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,IAAW,KAAK,IAAI,CAAM,IAAI;AAAA,MAC5B,UAAA;AAAA,MACV,IAAI,EAAE,YAAY,KAAY,KAAiB,IAAa,MAAM,IAAI;AAAA,MACtE,QAAQ,IAAW,MAAM;AAAA,MACzB,SAAS,IAAa,UAAU;AAAA,IACjC,CAAA;AAAA,EACI,CAAA;AAEX"}
+{"version":3,"file":"AmountCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/AmountCell.tsx"],"sourcesContent":["import { GridCellParams } from '@mui/x-data-grid'\nimport Stack from '@mui/material/Stack'\n\nimport { CurrencyText } from '../../../common'\nimport { CategoryGuids } from '../../../core/constants'\n\nexport const AmountCell = (params: GridCellParams) => {\n  const category = params.row.category_guid\n  const parentCategory = params.row.top_level_category_guid\n  const isIncome = category === CategoryGuids.INCOME || parentCategory === CategoryGuids.INCOME\n  const isTotalRow = params.id === 'total'\n  const isTotalColumn = params.field === 'total'\n  const amount = isTotalColumn ? params.row[params.field] : params.row.monthlyAmounts[params.field]\n\n  return (\n    <Stack alignItems=\"flex-end\" direction=\"row\" tabIndex={params.tabIndex}>\n      <CurrencyText\n        amount={isIncome ? Math.abs(amount) : amount}\n        isIncome={isIncome}\n        sx={{ fontWeight: isIncome || isTotalColumn || isTotalRow ? 600 : 500 }}\n        symbol={isIncome ? '+' : undefined}\n        variant={isTotalRow ? 'body1' : 'body2'}\n      />\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,IAAA,CAAc,MAA2B;AACpD,QAAM,IAAW,EAAO,IAAI,eACtB,IAAiB,EAAO,IAAI,yBAC5B,IAAW,MAAa,EAAc,UAAU,MAAmB,EAAc,QACjF,IAAa,EAAO,OAAO,SAC3B,IAAgB,EAAO,UAAU,SACjC,IAAS,IAAgB,EAAO,IAAI,EAAO,KAAA,IAAS,EAAO,IAAI,eAAe,EAAO,KAAA;AAE3F,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAW,WAAU;AAAA,IAAM,UAAU,EAAO;AAAA,IAC5D,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,IAAW,KAAK,IAAI,CAAM,IAAI;AAAA,MAC5B,UAAA;AAAA,MACV,IAAI,EAAE,YAAY,KAAY,KAAiB,IAAa,MAAM,IAAI;AAAA,MACtE,QAAQ,IAAW,MAAM;AAAA,MACzB,SAAS,IAAa,UAAU;AAAA,IACjC,CAAA;AAAA,EACI,CAAA;AAEX"}

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

@@ -1 +1 @@
-{"version":3,"file":"CategoryCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/CategoryCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { GridCellParams } from '@mui/x-data-grid'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nexport const CategoryCell = (params: GridCellParams) => {\n  const isTotal = params.id === 'total'\n\n  return (\n    <Stack alignItems=\"center\" direction=\"row\" role=\"rowheader\" tabIndex={params.tabIndex}>\n      {!isTotal && (\n        <Box aria-hidden={true}>\n          <CategoryIcon categoryGuid={params.row.top_level_category_guid} variant=\"twotone\" />\n        </Box>\n      )}\n      <Text bold={isTotal} sx={{ ml: 12 }} variant={isTotal ? 'body1' : 'body2'}>\n        {params.row.category}\n      </Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAOA,IAAa,IAAA,CAAgB,MAA2B;AACtD,QAAM,IAAU,EAAO,OAAO;AAE9B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAM,MAAK;AAAA,IAAY,UAAU,EAAO;AAAA,cAA7E,CACG,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MAAK,eAAa;AAAA,gBAChB,gBAAA,EAAC,GAAD;AAAA,QAAc,cAAc,EAAO,IAAI;AAAA,QAAyB,SAAQ;AAAA,MAAW,CAAA;AAAA,IAChF,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAS,IAAI,EAAE,IAAI,GAAG;AAAA,MAAG,SAAS,IAAU,UAAU;AAAA,gBAC/D,EAAO,IAAI;AAAA,IACR,CAAA,CACD;AAAA;AAEX"}
+{"version":3,"file":"CategoryCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/CategoryCell.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { GridCellParams } from '@mui/x-data-grid'\n\nimport { CategoryIcon, Text } from '@mxenabled/mxui'\n\nexport const CategoryCell = (params: GridCellParams) => {\n  const isTotal = params.id === 'total'\n\n  return (\n    <Stack alignItems=\"center\" direction=\"row\" role=\"rowheader\" tabIndex={params.tabIndex}>\n      {!isTotal && (\n        <Box aria-hidden={true}>\n          <CategoryIcon categoryGuid={params.row.top_level_category_guid} variant=\"twotone\" />\n        </Box>\n      )}\n      <Text bold={isTotal} sx={{ ml: 12 }} variant={isTotal ? 'body1' : 'body2'}>\n        {params.row.category}\n      </Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAOA,IAAa,IAAA,CAAgB,MAA2B;AACtD,QAAM,IAAU,EAAO,OAAO;AAE9B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,WAAU;AAAA,IAAM,MAAK;AAAA,IAAY,UAAU,EAAO;AAAA,IAA7E,UAAA,CACG,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MAAK,eAAa;AAAA,MAChB,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAc,cAAc,EAAO,IAAI;AAAA,QAAyB,SAAQ;AAAA,MAAW,CAAA;AAAA,IAChF,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAS,IAAI,EAAE,IAAI,GAAG;AAAA,MAAG,SAAS,IAAU,UAAU;AAAA,MAC/D,UAAA,EAAO,IAAI;AAAA,IACR,CAAA,CACD;AAAA;AAEX"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/HeaderCell.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\nimport { GridColumnHeaderParams } from '@mui/x-data-grid'\n\nexport const HeaderCell = (params: GridColumnHeaderParams) => (\n  <Text fontWeight={600} variant=\"body2\">\n    {params.colDef.headerName}\n  </Text>\n)\n"],"mappings":";;AAGA,IAAa,IAAA,CAAc,MACzB,gBAAA,EAAC,GAAD;AAAA,EAAM,YAAY;AAAA,EAAK,SAAQ;AAAA,YAC5B,EAAO,OAAO;AACX,CAAA"}
+{"version":3,"file":"HeaderCell.es.js","names":[],"sources":["../../../../src/trends/components/trendstable/HeaderCell.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\nimport { GridColumnHeaderParams } from '@mui/x-data-grid'\n\nexport const HeaderCell = (params: GridColumnHeaderParams) => (\n  <Text fontWeight={600} variant=\"body2\">\n    {params.colDef.headerName}\n  </Text>\n)\n"],"mappings":";;AAGA,IAAa,IAAA,CAAc,MACzB,gBAAA,EAAC,GAAD;AAAA,EAAM,YAAY;AAAA,EAAK,SAAQ;AAAA,EAC5B,UAAA,EAAO,OAAO;AACX,CAAA"}