@layerfi/components 0.1.116-alpha.1 → 0.1.117-alpha

package/dist/cjs/index.cjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.116-alpha.1";
+const version = "0.1.117-alpha";
 const pkg = {
   version
 };
@@ -11329,7 +11329,7 @@ function BankTransactionsActions({ children }) {
 const BulkActionsModule = ({ slots }) => {
   const { count } = useCountSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", className: "Layer__BulkActionsModule", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(HStack, { justify: "space-between", align: "center", pis: "sm", pie: "3xs", gap: "3xs", className: "Layer__BulkActionsModule__SelectedItemsContainer", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Span, { noWrap: true, children: `${count} selected` }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -11975,7 +11975,7 @@ const BankTransactionsHeader = ({
             )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
+          showBulkActions ? null : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               DownloadButton,
               {
@@ -18535,8 +18535,8 @@ const BankTransactionsMobileBulkActionsHeader = ({
     HStack,
     {
       gap: "md",
-      pi: "lg",
-      pbs: "md",
+      pi: "xs",
+      pbs: "sm",
       justify: "space-between",
       align: "center",
       children: [
@@ -26300,11 +26300,10 @@ const ProfitAndLossFullReportDownloadButton = ({
 };
 function ProfitAndLossDownloadButton({
   stringOverrides,
-  moneyFormat
+  moneyFormat,
+  iconOnly
 }) {
   const { selectedLineItem } = react.useContext(ProfitAndLossContext);
-  const { value } = useSizeClass();
-  const iconOnly = value !== "desktop";
   if (selectedLineItem) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ProfitAndLossDetailLinesDownloadButton,
@@ -26364,6 +26363,71 @@ const ProfitAndLossHeader = ({
     ] })
   ] });
 };
+const DateRangePickers = ({ minDate, maxDate }) => {
+  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ displayMode: "full" });
+  const { setDateRange: setGlobalDateRange } = useGlobalDateRangeActions();
+  const {
+    localDate: localStartDate,
+    onChange: onChangeStartDate,
+    minDateZdt: minStartDate,
+    maxDateZdt: maxStartDate,
+    isInvalid: startDateInvalid,
+    errorText: startDateErrorText,
+    onBlur: onBlurStartDate
+  } = useDatePickerState({
+    date: globalStartDate,
+    minDate,
+    maxDate
+  });
+  const {
+    localDate: localEndDate,
+    onChange: onChangeEndDate,
+    minDateZdt: minEndDate,
+    maxDateZdt: maxEndDate,
+    isInvalid: endDateInvalid,
+    errorText: endDateErrorText,
+    onBlur: onBlurEndDate
+  } = useDatePickerState({
+    date: globalEndDate,
+    minDate,
+    maxDate
+  });
+  react.useEffect(() => {
+    if (startDateInvalid || endDateInvalid || !localStartDate || !localEndDate) return;
+    const next = { startDate: localStartDate.toDate(), endDate: localEndDate.toDate() };
+    setGlobalDateRange(next);
+  }, [startDateInvalid, endDateInvalid, localStartDate, localEndDate, setGlobalDateRange]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", pb: "md", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker,
+      {
+        label: "Start Date",
+        showLabel: true,
+        date: localStartDate,
+        onChange: onChangeStartDate,
+        minDate: minStartDate,
+        maxDate: maxStartDate,
+        isInvalid: startDateInvalid,
+        errorText: startDateErrorText,
+        onBlur: onBlurStartDate
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DatePicker,
+      {
+        label: "End Date",
+        showLabel: true,
+        date: localEndDate,
+        onChange: onChangeEndDate,
+        minDate: minEndDate,
+        maxDate: maxEndDate,
+        isInvalid: endDateInvalid,
+        errorText: endDateErrorText,
+        onBlur: onBlurEndDate
+      }
+    )
+  ] });
+};
 const MultiSelect = ({
   name,
   options: options2,
@@ -27093,6 +27157,25 @@ const ProfitAndLossReport = ({
   const useComparisonPnl = !!comparisonConfig;
   const header = react.useMemo(() => {
     if (hideHeader) return null;
+    const isMobile = view !== "desktop";
+    const isFullDateMode = dateSelectionMode === "full";
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ProfitAndLossDownloadButton,
+            {
+              stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
+              moneyFormat: csvMoneyFormat,
+              iconOnly: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(DateRangePickers, {}) }) }),
+        useComparisonPnl && /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLossCompareOptions, {}) }) })
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(HeaderCol, { children: [
@@ -27103,7 +27186,8 @@ const ProfitAndLossReport = ({
           ProfitAndLossDownloadButton,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-            moneyFormat: csvMoneyFormat
+            moneyFormat: csvMoneyFormat,
+            iconOnly: true
           }
         ) })
       ] }),
@@ -27970,6 +28054,36 @@ const CombinedDateSelection = ({ mode }) => {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(DateSelection, {});
 };
+const LabeledGlobalDatePicker = () => {
+  const { date: date2 } = useGlobalDate();
+  const { setDate: setGlobalDate } = useGlobalDateActions();
+  const rawActivationDate = useBusinessActivationDate();
+  const activationDate = react.useMemo(() => rawActivationDate ? dateFns.startOfDay(rawActivationDate) : null, [rawActivationDate]);
+  const maxDate = react.useMemo(() => dateFns.endOfDay(/* @__PURE__ */ new Date()), []);
+  const setDate = react.useCallback((date22) => {
+    setGlobalDate({ date: date22 });
+  }, [setGlobalDate]);
+  const { localDate, onChange, minDateZdt, maxDateZdt, errorText, onBlur, isInvalid } = useDatePickerState({
+    date: date2,
+    setDate,
+    minDate: activationDate,
+    maxDate
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    DatePicker,
+    {
+      label: "Effective Date",
+      showLabel: true,
+      date: localDate,
+      onChange,
+      minDate: minDateZdt,
+      maxDate: maxDateZdt,
+      isInvalid,
+      errorText,
+      onBlur
+    }
+  );
+};
 const COMPONENT_NAME$8 = "balance-sheet";
 const BalanceSheet = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -27989,16 +28103,63 @@ const BalanceSheetView = ({
   const { date: effectiveDate } = useGlobalDate();
   const { data, isLoading } = useBalanceSheet({ effectiveDate });
   const { view, containerRef } = useElementViewSize();
+  const isMobile = view !== "desktop";
+  const isFullDateMode = dateSelectionMode === "full";
+  const widgetHeader = react.useMemo(() => {
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(DateSelectionComboBox, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { className: "Layer__Reports__header-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(LabeledGlobalDatePicker, {}) }),
+          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
+      withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }) })
+    ] }) });
+  }, [dateSelectionMode, isMobile, isFullDateMode, view, withExpandAllButton]);
+  const header = react.useMemo(() => {
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            BalanceSheetDownloadButton,
+            {
+              effectiveDate,
+              iconOnly: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { className: "Layer__Reports__header-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(LabeledGlobalDatePicker, {}) }),
+          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(HeaderCol, { children: [
+        withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          BalanceSheetDownloadButton,
+          {
+            effectiveDate,
+            iconOnly: true
+          }
+        )
+      ] })
+    ] }) });
+  }, [dateSelectionMode, effectiveDate, isMobile, isFullDateMode, view, withExpandAllButton]);
   if (asWidget) {
     return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(Container, { name: COMPONENT_NAME$8, asWidget: true, children: /* @__PURE__ */ jsxRuntime.jsx(
       View,
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }) })
-        ] }) }),
+        header: widgetHeader,
         children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
           BalanceSheetTable,
           {
@@ -28015,19 +28176,7 @@ const BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(HeaderCol, { children: [
-          withExpandAllButton && /* @__PURE__ */ jsxRuntime.jsx(BalanceSheetExpandAllButton, { view }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            BalanceSheetDownloadButton,
-            {
-              effectiveDate,
-              iconOnly: view === "mobile"
-            }
-          )
-        ] })
-      ] }) }),
+      header,
       children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
         BalanceSheetTable,
         {
@@ -28299,37 +28448,49 @@ const StatementOfCashFlow = (props) => {
 };
 const StatementOfCashFlowView = ({
   stringOverrides,
-  dateSelectionMode = "full"
+  dateSelectionMode = "full",
+  view
 }) => {
   const dateRange = useGlobalDateRange({ displayMode: dateSelectionMode });
   const { data, isLoading } = useStatementOfCashFlow(dateRange);
-  const { view, containerRef } = useElementViewSize();
-  return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    View,
-    {
-      type: "panel",
-      ref: containerRef,
-      header: /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          CashflowStatementDownloadButton,
-          {
-            startDate: dateRange.startDate,
-            endDate: dateRange.endDate,
-            iconOnly: view === "mobile"
-          }
-        ) })
-      ] }) }),
-      children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$7}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
-        StatementOfCashFlowTable,
+  const header = react.useMemo(() => {
+    const isMobile = view !== "desktop";
+    const isFullDateMode = dateSelectionMode === "full";
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            CashflowStatementDownloadButton,
+            {
+              startDate: dateRange.startDate,
+              endDate: dateRange.endDate,
+              iconOnly: isMobile
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(HeaderRow, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(DateRangePickers, {}) }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(HeaderCol, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        CashflowStatementDownloadButton,
         {
-          data,
-          config: STATEMENT_OF_CASH_FLOW_ROWS,
-          stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashFlowTable
+          startDate: dateRange.startDate,
+          endDate: dateRange.endDate
         }
-      )
+      ) })
+    ] }) });
+  }, [dateRange.startDate, dateRange.endDate, dateSelectionMode, view]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TableProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(View, { type: "panel", header, children: !data || isLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `Layer__${COMPONENT_NAME$7}__loader-container`, children: /* @__PURE__ */ jsxRuntime.jsx(Loader, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(
+    StatementOfCashFlowTable,
+    {
+      data,
+      config: STATEMENT_OF_CASH_FLOW_ROWS,
+      stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashFlowTable
     }
-  ) });
+  ) }) });
 };
 const LEDGER_BALANCES_TAG_KEY = "#ledger-balances";
 class LedgerBalancesSWRResponse {
@@ -40110,19 +40271,15 @@ function UnifiedReportDownloadButton() {
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DownloadButton$1,
       {
-        variant: "outlined",
-        onPress: () => {
+        iconOnly: true,
+        onClick: () => {
           void trigger();
         },
-        isPending: isMutating,
-        isDisabled: isMutating,
-        children: [
-          isError ? "Retry" : "Download",
-          isError ? /* @__PURE__ */ jsxRuntime.jsx(RefreshCcw, { size: 12 }) : /* @__PURE__ */ jsxRuntime.jsx(DownloadCloud, { size: 16 })
-        ]
+        isDownloading: isMutating,
+        requestFailed: isError
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(InvisibleDownload, { ref: invisibleDownloadRef })
@@ -45052,6 +45209,83 @@ const ProjectProfitabilityView = ({
     }
   );
 };
+const ReportsSelector = ({
+  options: options2,
+  selected,
+  onChange,
+  view = "mobile"
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = react.useState(false);
+  const selectedOption = options2.find((opt) => opt.value === selected);
+  if (view === "mobile") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          className: "Layer__reports-selector",
+          onClick: () => setIsDrawerOpen(true),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "lg", weight: "bold", children: selectedOption == null ? void 0 : selectedOption.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, { size: 20, className: "Layer__reports-selector__chevron" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Drawer,
+        {
+          isOpen: isDrawerOpen,
+          onOpenChange: setIsDrawerOpen,
+          variant: "mobile-drawer",
+          isDismissable: true,
+          "aria-label": "Select report type",
+          children: ({ close: close2 }) => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { className: "Layer__reports-selector-drawer", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              HStack,
+              {
+                justify: "center",
+                pb: "md",
+                className: "Layer__reports-selector-drawer__header",
+                children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "lg", weight: "bold", children: "Select Report" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(VStack, { className: "Layer__reports-selector-drawer__options", children: options2.map((option) => {
+              const isSelected = option.value === selected;
+              const optionClassName = classNames(
+                "Layer__reports-selector-drawer__option",
+                {
+                  "Layer__reports-selector-drawer__option--selected": isSelected
+                }
+              );
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: optionClassName,
+                  onClick: () => {
+                    onChange(option.value);
+                    close2();
+                  },
+                  type: "button",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", weight: isSelected ? "bold" : "normal", children: option.label })
+                },
+                option.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Toggle,
+    {
+      name: "reports-tabs",
+      options: options2,
+      selected,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+};
 const getOptions = (enabledReports) => {
   return [
     enabledReports.includes("profitAndLoss") ? {
@@ -45090,12 +45324,12 @@ const Reports = ({
       showHeader: showTitle,
       children: [
         enabledReports.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "Layer__component Layer__header__actions", children: /* @__PURE__ */ jsxRuntime.jsx(
-          Toggle,
+          ReportsSelector,
           {
-            name: "reports-tabs",
             options: options2,
             selected: activeTab,
-            onChange: (opt) => setActiveTab(opt.target.value)
+            onChange: setActiveTab,
+            view
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsxRuntime.jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -45134,7 +45368,8 @@ const ReportsPanel = ({
     openReport === "statementOfCashFlow" && /* @__PURE__ */ jsxRuntime.jsx(
       StatementOfCashFlow,
       __spreadValues({
-        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow
+        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow,
+        view
       }, statementOfCashFlowConfig)
     )
   ] });

package/dist/esm/index.mjs

@@ -202,7 +202,7 @@ class ErrorHandlerClass {
 }
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
-const version = "0.1.116-alpha.1";
+const version = "0.1.117-alpha";
 const pkg = {
   version
 };
@@ -9853,7 +9853,7 @@ function BankTransactionsActions({ children }) {
 const BulkActionsModule = ({ slots }) => {
   const { count } = useCountSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  return /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", children: [
+  return /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", className: "Layer__BulkActionsModule", children: [
     /* @__PURE__ */ jsxs(HStack, { justify: "space-between", align: "center", pis: "sm", pie: "3xs", gap: "3xs", className: "Layer__BulkActionsModule__SelectedItemsContainer", children: [
       /* @__PURE__ */ jsx(Span, { noWrap: true, children: `${count} selected` }),
       /* @__PURE__ */ jsx(
@@ -10499,7 +10499,7 @@ const BankTransactionsHeader = ({
             )
           ] }),
           /* @__PURE__ */ jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
-          /* @__PURE__ */ jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
+          showBulkActions ? null : /* @__PURE__ */ jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx(
               DownloadButton,
               {
@@ -17059,8 +17059,8 @@ const BankTransactionsMobileBulkActionsHeader = ({
     HStack,
     {
       gap: "md",
-      pi: "lg",
-      pbs: "md",
+      pi: "xs",
+      pbs: "sm",
       justify: "space-between",
       align: "center",
       children: [
@@ -24824,11 +24824,10 @@ const ProfitAndLossFullReportDownloadButton = ({
 };
 function ProfitAndLossDownloadButton({
   stringOverrides,
-  moneyFormat
+  moneyFormat,
+  iconOnly
 }) {
   const { selectedLineItem } = useContext(ProfitAndLossContext);
-  const { value } = useSizeClass();
-  const iconOnly = value !== "desktop";
   if (selectedLineItem) {
     return /* @__PURE__ */ jsx(
       ProfitAndLossDetailLinesDownloadButton,
@@ -24888,6 +24887,71 @@ const ProfitAndLossHeader = ({
     ] })
   ] });
 };
+const DateRangePickers = ({ minDate, maxDate }) => {
+  const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ displayMode: "full" });
+  const { setDateRange: setGlobalDateRange } = useGlobalDateRangeActions();
+  const {
+    localDate: localStartDate,
+    onChange: onChangeStartDate,
+    minDateZdt: minStartDate,
+    maxDateZdt: maxStartDate,
+    isInvalid: startDateInvalid,
+    errorText: startDateErrorText,
+    onBlur: onBlurStartDate
+  } = useDatePickerState({
+    date: globalStartDate,
+    minDate,
+    maxDate
+  });
+  const {
+    localDate: localEndDate,
+    onChange: onChangeEndDate,
+    minDateZdt: minEndDate,
+    maxDateZdt: maxEndDate,
+    isInvalid: endDateInvalid,
+    errorText: endDateErrorText,
+    onBlur: onBlurEndDate
+  } = useDatePickerState({
+    date: globalEndDate,
+    minDate,
+    maxDate
+  });
+  useEffect(() => {
+    if (startDateInvalid || endDateInvalid || !localStartDate || !localEndDate) return;
+    const next = { startDate: localStartDate.toDate(), endDate: localEndDate.toDate() };
+    setGlobalDateRange(next);
+  }, [startDateInvalid, endDateInvalid, localStartDate, localEndDate, setGlobalDateRange]);
+  return /* @__PURE__ */ jsxs(HStack, { gap: "md", pb: "md", children: [
+    /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        label: "Start Date",
+        showLabel: true,
+        date: localStartDate,
+        onChange: onChangeStartDate,
+        minDate: minStartDate,
+        maxDate: maxStartDate,
+        isInvalid: startDateInvalid,
+        errorText: startDateErrorText,
+        onBlur: onBlurStartDate
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DatePicker,
+      {
+        label: "End Date",
+        showLabel: true,
+        date: localEndDate,
+        onChange: onChangeEndDate,
+        minDate: minEndDate,
+        maxDate: maxEndDate,
+        isInvalid: endDateInvalid,
+        errorText: endDateErrorText,
+        onBlur: onBlurEndDate
+      }
+    )
+  ] });
+};
 const MultiSelect = ({
   name,
   options: options2,
@@ -25617,6 +25681,25 @@ const ProfitAndLossReport = ({
   const useComparisonPnl = !!comparisonConfig;
   const header = useMemo(() => {
     if (hideHeader) return null;
+    const isMobile = view !== "desktop";
+    const isFullDateMode = dateSelectionMode === "full";
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxs(Header, { children: [
+        /* @__PURE__ */ jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsx(
+            ProfitAndLossDownloadButton,
+            {
+              stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
+              moneyFormat: csvMoneyFormat,
+              iconOnly: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(DateRangePickers, {}) }) }),
+        useComparisonPnl && /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(ProfitAndLossCompareOptions, {}) }) })
+      ] });
+    }
     return /* @__PURE__ */ jsxs(Header, { children: [
       /* @__PURE__ */ jsxs(HeaderRow, { children: [
         /* @__PURE__ */ jsxs(HeaderCol, { children: [
@@ -25627,7 +25710,8 @@ const ProfitAndLossReport = ({
           ProfitAndLossDownloadButton,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-            moneyFormat: csvMoneyFormat
+            moneyFormat: csvMoneyFormat,
+            iconOnly: true
           }
         ) })
       ] }),
@@ -26494,6 +26578,36 @@ const CombinedDateSelection = ({ mode }) => {
   }
   return /* @__PURE__ */ jsx(DateSelection, {});
 };
+const LabeledGlobalDatePicker = () => {
+  const { date } = useGlobalDate();
+  const { setDate: setGlobalDate } = useGlobalDateActions();
+  const rawActivationDate = useBusinessActivationDate();
+  const activationDate = useMemo(() => rawActivationDate ? startOfDay(rawActivationDate) : null, [rawActivationDate]);
+  const maxDate = useMemo(() => endOfDay(/* @__PURE__ */ new Date()), []);
+  const setDate = useCallback((date2) => {
+    setGlobalDate({ date: date2 });
+  }, [setGlobalDate]);
+  const { localDate, onChange, minDateZdt, maxDateZdt, errorText, onBlur, isInvalid } = useDatePickerState({
+    date,
+    setDate,
+    minDate: activationDate,
+    maxDate
+  });
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      label: "Effective Date",
+      showLabel: true,
+      date: localDate,
+      onChange,
+      minDate: minDateZdt,
+      maxDate: maxDateZdt,
+      isInvalid,
+      errorText,
+      onBlur
+    }
+  );
+};
 const COMPONENT_NAME$8 = "balance-sheet";
 const BalanceSheet = (props) => {
   return /* @__PURE__ */ jsx(
@@ -26513,16 +26627,63 @@ const BalanceSheetView = ({
   const { date: effectiveDate } = useGlobalDate();
   const { data, isLoading } = useBalanceSheet({ effectiveDate });
   const { view, containerRef } = useElementViewSize();
+  const isMobile = view !== "desktop";
+  const isFullDateMode = dateSelectionMode === "full";
+  const widgetHeader = useMemo(() => {
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxs(Header, { children: [
+        /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DateSelectionComboBox, {}) }) }),
+        /* @__PURE__ */ jsxs(HeaderRow, { className: "Layer__Reports__header-row", children: [
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(LabeledGlobalDatePicker, {}) }),
+          withExpandAllButton && /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
+      withExpandAllButton && /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }) })
+    ] }) });
+  }, [dateSelectionMode, isMobile, isFullDateMode, view, withExpandAllButton]);
+  const header = useMemo(() => {
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxs(Header, { children: [
+        /* @__PURE__ */ jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsx(
+            BalanceSheetDownloadButton,
+            {
+              effectiveDate,
+              iconOnly: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs(HeaderRow, { className: "Layer__Reports__header-row", children: [
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(LabeledGlobalDatePicker, {}) }),
+          withExpandAllButton && /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }) })
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
+      /* @__PURE__ */ jsxs(HeaderCol, { children: [
+        withExpandAllButton && /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }),
+        /* @__PURE__ */ jsx(
+          BalanceSheetDownloadButton,
+          {
+            effectiveDate,
+            iconOnly: true
+          }
+        )
+      ] })
+    ] }) });
+  }, [dateSelectionMode, effectiveDate, isMobile, isFullDateMode, view, withExpandAllButton]);
   if (asWidget) {
     return /* @__PURE__ */ jsx(TableProvider, { children: /* @__PURE__ */ jsx(Container, { name: COMPONENT_NAME$8, asWidget: true, children: /* @__PURE__ */ jsx(
       View,
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-          /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-          withExpandAllButton && /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }) })
-        ] }) }),
+        header: widgetHeader,
         children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
           BalanceSheetTable,
           {
@@ -26539,19 +26700,7 @@ const BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsxs(HeaderCol, { children: [
-          withExpandAllButton && /* @__PURE__ */ jsx(BalanceSheetExpandAllButton, { view }),
-          /* @__PURE__ */ jsx(
-            BalanceSheetDownloadButton,
-            {
-              effectiveDate,
-              iconOnly: view === "mobile"
-            }
-          )
-        ] })
-      ] }) }),
+      header,
       children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
         BalanceSheetTable,
         {
@@ -26823,37 +26972,49 @@ const StatementOfCashFlow = (props) => {
 };
 const StatementOfCashFlowView = ({
   stringOverrides,
-  dateSelectionMode = "full"
+  dateSelectionMode = "full",
+  view
 }) => {
   const dateRange = useGlobalDateRange({ displayMode: dateSelectionMode });
   const { data, isLoading } = useStatementOfCashFlow(dateRange);
-  const { view, containerRef } = useElementViewSize();
-  return /* @__PURE__ */ jsx(TableProvider, { children: /* @__PURE__ */ jsx(
-    View,
-    {
-      type: "panel",
-      ref: containerRef,
-      header: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
-        /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(
-          CashflowStatementDownloadButton,
-          {
-            startDate: dateRange.startDate,
-            endDate: dateRange.endDate,
-            iconOnly: view === "mobile"
-          }
-        ) })
-      ] }) }),
-      children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$7}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
-        StatementOfCashFlowTable,
+  const header = useMemo(() => {
+    const isMobile = view !== "desktop";
+    const isFullDateMode = dateSelectionMode === "full";
+    if (isMobile && isFullDateMode) {
+      return /* @__PURE__ */ jsxs(Header, { children: [
+        /* @__PURE__ */ jsxs(HeaderRow, { children: [
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 1 }, children: /* @__PURE__ */ jsx(DateSelectionComboBox, {}) }),
+          /* @__PURE__ */ jsx(HeaderCol, { style: { flex: 0 }, children: /* @__PURE__ */ jsx(
+            CashflowStatementDownloadButton,
+            {
+              startDate: dateRange.startDate,
+              endDate: dateRange.endDate,
+              iconOnly: isMobile
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(DateRangePickers, {}) }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsxs(HeaderRow, { children: [
+      /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }) }),
+      /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(
+        CashflowStatementDownloadButton,
         {
-          data,
-          config: STATEMENT_OF_CASH_FLOW_ROWS,
-          stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashFlowTable
+          startDate: dateRange.startDate,
+          endDate: dateRange.endDate
         }
-      )
+      ) })
+    ] }) });
+  }, [dateRange.startDate, dateRange.endDate, dateSelectionMode, view]);
+  return /* @__PURE__ */ jsx(TableProvider, { children: /* @__PURE__ */ jsx(View, { type: "panel", header, children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$7}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
+    StatementOfCashFlowTable,
+    {
+      data,
+      config: STATEMENT_OF_CASH_FLOW_ROWS,
+      stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashFlowTable
     }
-  ) });
+  ) }) });
 };
 const LEDGER_BALANCES_TAG_KEY = "#ledger-balances";
 class LedgerBalancesSWRResponse {
@@ -38634,19 +38795,15 @@ function UnifiedReportDownloadButton() {
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Button,
+    /* @__PURE__ */ jsx(
+      DownloadButton$1,
       {
-        variant: "outlined",
-        onPress: () => {
+        iconOnly: true,
+        onClick: () => {
           void trigger();
         },
-        isPending: isMutating,
-        isDisabled: isMutating,
-        children: [
-          isError ? "Retry" : "Download",
-          isError ? /* @__PURE__ */ jsx(RefreshCcw, { size: 12 }) : /* @__PURE__ */ jsx(DownloadCloud, { size: 16 })
-        ]
+        isDownloading: isMutating,
+        requestFailed: isError
       }
     ),
     /* @__PURE__ */ jsx(InvisibleDownload, { ref: invisibleDownloadRef })
@@ -43576,6 +43733,83 @@ const ProjectProfitabilityView = ({
     }
   );
 };
+const ReportsSelector = ({
+  options: options2,
+  selected,
+  onChange,
+  view = "mobile"
+}) => {
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  const selectedOption = options2.find((opt) => opt.value === selected);
+  if (view === "mobile") {
+    return /* @__PURE__ */ jsxs(HStack, { children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "Layer__reports-selector",
+          onClick: () => setIsDrawerOpen(true),
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx(Span, { size: "lg", weight: "bold", children: selectedOption == null ? void 0 : selectedOption.label }),
+            /* @__PURE__ */ jsx(ChevronDown, { size: 20, className: "Layer__reports-selector__chevron" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Drawer,
+        {
+          isOpen: isDrawerOpen,
+          onOpenChange: setIsDrawerOpen,
+          variant: "mobile-drawer",
+          isDismissable: true,
+          "aria-label": "Select report type",
+          children: ({ close: close2 }) => /* @__PURE__ */ jsxs(VStack, { className: "Layer__reports-selector-drawer", children: [
+            /* @__PURE__ */ jsx(
+              HStack,
+              {
+                justify: "center",
+                pb: "md",
+                className: "Layer__reports-selector-drawer__header",
+                children: /* @__PURE__ */ jsx(Span, { size: "lg", weight: "bold", children: "Select Report" })
+              }
+            ),
+            /* @__PURE__ */ jsx(VStack, { className: "Layer__reports-selector-drawer__options", children: options2.map((option) => {
+              const isSelected = option.value === selected;
+              const optionClassName = classNames(
+                "Layer__reports-selector-drawer__option",
+                {
+                  "Layer__reports-selector-drawer__option--selected": isSelected
+                }
+              );
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: optionClassName,
+                  onClick: () => {
+                    onChange(option.value);
+                    close2();
+                  },
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(Span, { size: "md", weight: isSelected ? "bold" : "normal", children: option.label })
+                },
+                option.value
+              );
+            }) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      name: "reports-tabs",
+      options: options2,
+      selected,
+      onChange: (e) => onChange(e.target.value)
+    }
+  );
+};
 const getOptions = (enabledReports) => {
   return [
     enabledReports.includes("profitAndLoss") ? {
@@ -43614,12 +43848,12 @@ const Reports = ({
       showHeader: showTitle,
       children: [
         enabledReports.length > 1 && /* @__PURE__ */ jsx("div", { className: "Layer__component Layer__header__actions", children: /* @__PURE__ */ jsx(
-          Toggle,
+          ReportsSelector,
           {
-            name: "reports-tabs",
             options: options2,
             selected: activeTab,
-            onChange: (opt) => setActiveTab(opt.target.value)
+            onChange: setActiveTab,
+            view
           }
         ) }),
         /* @__PURE__ */ jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, children: /* @__PURE__ */ jsx(
@@ -43658,7 +43892,8 @@ const ReportsPanel = ({
     openReport === "statementOfCashFlow" && /* @__PURE__ */ jsx(
       StatementOfCashFlow,
       __spreadValues({
-        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow
+        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow,
+        view
       }, statementOfCashFlowConfig)
     )
   ] });

package/dist/index.css

@@ -3742,6 +3742,8 @@ tbody .Layer__table__empty-row:first-child {
     position: sticky;
     z-index: 2;
     top: 0;
+    padding-right: 0;
+    padding-left: 0;
     border-top-left-radius: var(--border-radius-sm);
     border-top-right-radius: var(--border-radius-sm);
     box-shadow: 0 -1px 0 0 rgba(23, 51, 45, 0.16) inset;
@@ -4194,11 +4196,11 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-mobile-list-item {
   box-sizing: border-box;
-  width: 95%;
+  width: 100%;
   padding: 0;
   border-radius: var(--border-radius-sm);
   border: 1px solid var(--border-color);
-  margin: var(--spacing-2xs) var(--spacing-md);
+  margin: var(--spacing-2xs) 0;
   background: var(--color-base-0);
   cursor: pointer;
   user-select: none;
@@ -8245,7 +8247,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__BankTransactionsActions > [slot=download-upload] {
   grid-area: download-upload;
-}.Layer__BulkActionsModule__SelectedItemsContainer {
+}.Layer__BulkActionsModule {
+  max-width: 100%;
+}
+
+.Layer__BulkActionsModule__SelectedItemsContainer {
+  flex-shrink: 0;
   height: 2.25rem;
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);
@@ -10469,6 +10476,66 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__project-view .Layer__select__menu {
   z-index: 2;
+}.Layer__reports-selector {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--border-radius-2xs);
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--color-base-1000);
+  transition: background-color 0.2s;
+}
+.Layer__reports-selector__chevron {
+  color: var(--color-base-700);
+}
+
+.Layer__reports-selector-drawer {
+  height: 100%;
+}
+.Layer__reports-selector-drawer__header {
+  border-bottom: 1px solid var(--color-base-200);
+}
+.Layer__reports-selector-drawer__options {
+  flex: 1;
+  overflow-y: auto;
+}
+.Layer__reports-selector-drawer__option {
+  display: flex;
+  align-items: center;
+  min-height: 56px;
+  width: 100%;
+  padding: var(--spacing-md) var(--spacing-lg);
+  border: none;
+  border-bottom: 1px solid var(--color-base-100);
+  background: var(--color-base-0);
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-base-1000);
+  transition: background-color 0.2s;
+}
+.Layer__reports-selector-drawer__option:hover {
+  background: var(--color-base-50);
+}
+.Layer__reports-selector-drawer__option:active {
+  background: var(--color-base-100);
+}
+.Layer__reports-selector-drawer__option--selected {
+  background: var(--color-primary-50);
+  color: var(--color-primary-900);
+}
+.Layer__reports-selector-drawer__option--selected:hover {
+  background: var(--color-primary-100);
+}
+.Layer__reports-selector-drawer__option--selected:active {
+  background: var(--color-primary-150);
+}
+
+.Layer__Reports__header-row {
+  padding-block-start: 0.5rem;
+  padding-block-end: 0.75rem;
 }.Layer__toasts-container {
   position: fixed;
   z-index: 1000;

package/dist/index.d.ts

@@ -1035,6 +1035,7 @@ export declare const StatementOfCashFlow: (props: StatementOfCashFlowProps) => J
 
 declare type StatementOfCashFlowProps = TimeRangePickerConfig & {
     stringOverrides?: StatementOfCashFlowStringOverrides;
+    view?: ViewBreakpoint_2;
 };
 
 declare interface StatementOfCashFlowStringOverrides {
@@ -1296,6 +1297,8 @@ declare type View = 'mobile' | 'tablet' | 'desktop';
 
 declare type ViewBreakpoint = View | undefined;
 
+declare type ViewBreakpoint_2 = View | undefined;
+
 export { }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.116-alpha.1",
+  "version": "0.1.117-alpha",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",