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

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.117-alpha";
+const version = "0.1.117-alpha.1";
 const pkg = {
   version
 };
@@ -5610,7 +5610,7 @@ const Separator = ({ mbs, mbe }) => {
   const dataProperties = toDataProperties({ mbs, mbe });
   return /* @__PURE__ */ jsx("div", __spreadValues({ className: "Layer__separator" }, dataProperties));
 };
-const ModalTitleWithClose = forwardRef(function ModalTitleWithClose2({ heading, description, onClose }, ref) {
+const ModalTitleWithClose = forwardRef(function ModalTitleWithClose2({ heading, description, onClose, hideCloseButton = false }, ref) {
   return /* @__PURE__ */ jsxs(VStack, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -5622,7 +5622,7 @@ const ModalTitleWithClose = forwardRef(function ModalTitleWithClose2({ heading,
             heading,
             description
           ] }),
-          /* @__PURE__ */ jsx(
+          !hideCloseButton && /* @__PURE__ */ jsx(
             Button,
             {
               icon: true,
@@ -5912,7 +5912,8 @@ const BaseConfirmationModalContent = memo(function BaseConfirmationModalContent2
           ModalTitleWithClose,
           {
             heading: /* @__PURE__ */ jsx(ModalHeading, { size: "sm", children: title }),
-            onClose: close2
+            onClose: close2,
+            hideCloseButton: useDrawer
           }
         ),
         /* @__PURE__ */ jsxs(VStack, { gap: "md", children: [
@@ -6795,7 +6796,7 @@ const BankTransactionCategoryComboBox = ({
   );
   const numMatchOptions = (matchGroup == null ? void 0 : matchGroup.options.length) || 0;
   const loadingSuggestions = bankTransaction && isLoadingSuggestions(bankTransaction) && selectedValue === null;
-  const placeholder = numMatchOptions > 1 ? `${numMatchOptions} possible matches...` : loadingSuggestions ? "Generating suggestions..." : "Categorize or match...";
+  const placeholder = numMatchOptions > 1 ? `${numMatchOptions} possible matches...` : loadingSuggestions ? "Generating suggestions..." : includeSuggestedMatches ? "Categorize or match..." : "Select category";
   const SelectedValue = useMemo(() => {
     return /* @__PURE__ */ jsx(BankTransactionsUncategorizedSelectedValue, { selectedValue });
   }, [selectedValue]);
@@ -7442,7 +7443,7 @@ const BankTransactionsBulkActions = ({
   const [recategorizeModalOpen, setRecategorizeModalOpen] = useState(false);
   const [uncategorizeModalOpen, setUncategorizeModalOpen] = useState(false);
   const confirmButtonLabel = ((_a = slotProps == null ? void 0 : slotProps.ConfirmAllModal) == null ? void 0 : _a.label) || "Confirm all";
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(HStack, { align: "center", gap: "xs", children: display === DisplayState.review ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(HStack, { align: "center", gap: "xs", justify: isMobileView ? "end" : void 0, children: display === DisplayState.review ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
@@ -7475,7 +7476,7 @@ const BankTransactionsBulkActions = ({
       {
         variant: "outlined",
         onClick: () => setRecategorizeModalOpen(true),
-        children: "Recategorize"
+        children: isMobileView ? "Categorize" : "Recategorize"
       }
     ),
     /* @__PURE__ */ jsx(
@@ -7483,7 +7484,7 @@ const BankTransactionsBulkActions = ({
       {
         isOpen: recategorizeModalOpen,
         onOpenChange: setRecategorizeModalOpen,
-        mode: CategorizationMode.Recategorize,
+        mode: isMobileView ? CategorizationMode.Categorize : CategorizationMode.Recategorize,
         isMobileView
       }
     ),
@@ -9850,12 +9851,12 @@ const CLASS_NAME$6 = "Layer__BankTransactionsActions";
 function BankTransactionsActions({ children }) {
   return /* @__PURE__ */ jsx("div", { className: CLASS_NAME$6, children });
 }
-const BulkActionsModule = ({ slots }) => {
+const BulkActionsModule = ({ showSelectedLabel = true, fullWidth = false, slots }) => {
   const { count } = useCountSelectedIds();
   const { clearSelection } = useBulkSelectionActions();
-  return /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", className: "Layer__BulkActionsModule", children: [
+  return /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "space-between", align: "center", gap: "xs", fluid: fullWidth, 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(Span, { noWrap: true, children: showSelectedLabel ? `${count} selected` : count }),
       /* @__PURE__ */ jsx(
         Button,
         {
@@ -10140,7 +10141,7 @@ const MonthPicker = ({
 }) => {
   const triggerRef = useRef(null);
   const [isPopoverOpen, setPopoverOpen] = useState(false);
-  const { value, isMobile } = useSizeClass();
+  const { value } = useSizeClass();
   const onChangeMonth = useCallback((val) => {
     onChange(val);
     setPopoverOpen(false);
@@ -10154,7 +10155,7 @@ const MonthPicker = ({
       {
         ref: triggerRef,
         slot: "input",
-        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--mobile": isMobile }),
+        className: classNames("Layer__MonthPicker__InputGroup", { "Layer__MonthPicker__InputGroup--truncated": truncateMonth }),
         onClick: () => setPopoverOpen(true),
         children: [
           /* @__PURE__ */ jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
@@ -10186,13 +10187,18 @@ const NewToggleOption = ({
 const NewToggle = ({
   options: options2,
   selectedKey,
-  onSelectionChange
+  onSelectionChange,
+  fullWidth = false
 }) => {
   const selectedKeys = selectedKey !== void 0 ? /* @__PURE__ */ new Set([selectedKey]) : /* @__PURE__ */ new Set();
+  const dataProperties = toDataProperties({
+    "full-width": fullWidth
+  });
   return /* @__PURE__ */ jsx(
     ToggleButtonGroup,
-    {
-      className: "Layer__NewToggle",
+    __spreadProps(__spreadValues({
+      className: "Layer__NewToggle"
+    }, dataProperties), {
       selectionMode: "single",
       selectedKeys,
       onSelectionChange: (keys) => {
@@ -10202,7 +10208,7 @@ const NewToggle = ({
         }
       },
       children: options2.map((option) => /* @__PURE__ */ jsx(NewToggleOption, __spreadValues({}, option), option.value))
-    }
+    })
   );
 };
 const SmallLoader = ({ size = 28 }) => {
@@ -10396,8 +10402,9 @@ const BankTransactionsHeader = ({
   }, [setFilters]);
   const { count } = useCountSelectedIds();
   const showBulkActions = count > 0;
+  const isMobileList = listView && mobileComponent === "mobileList";
   const headerTopRow = useMemo(() => /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transactions__header__content", children: [
-    /* @__PURE__ */ jsxs("div", { className: "Layer__bank-transactions__header__content-title", children: [
+    /* @__PURE__ */ jsxs(HStack, { align: "center", children: [
       /* @__PURE__ */ jsx(
         Heading,
         {
@@ -10453,7 +10460,6 @@ const BankTransactionsHeader = ({
     }
     return actions;
   }, [withUploadMenu, showCategorizationRules]);
-  const isMobileList = listView && mobileComponent === "mobileList";
   const BulkActionsModuleSlot = useCallback(() => {
     return /* @__PURE__ */ jsx(
       BankTransactionsBulkActions,
@@ -10467,53 +10473,103 @@ const BankTransactionsHeader = ({
       }
     );
   }, [isMobileList]);
-  return /* @__PURE__ */ jsxs(
-    Header$1,
+  const statusToggle = !categorizedOnly && categorizeView && showStatusToggle ? /* @__PURE__ */ jsx(
+    NewToggle,
     {
-      className: classNames(
-        "Layer__bank-transactions__header",
-        withDatePicker && "Layer__bank-transactions__header--with-date-picker",
-        mobileComponent && listView ? "Layer__bank-transactions__header--mobile" : void 0
-      ),
-      style: { top: shiftStickyHeader },
-      children: [
-        !collapseHeader && headerTopRow,
-        /* @__PURE__ */ jsxs(BankTransactionsActions, { children: [
-          showBulkActions ? /* @__PURE__ */ jsx(
+      options: [
+        { label: "To Review", value: DisplayState.review },
+        { label: "Categorized", value: DisplayState.categorized }
+      ],
+      selectedKey: display,
+      onSelectionChange: onCategorizationDisplayChange,
+      fullWidth: isMobileList
+    }
+  ) : null;
+  if (isMobileList) {
+    return /* @__PURE__ */ jsx(
+      Header$1,
+      {
+        className: classNames(
+          "Layer__bank-transactions__header",
+          withDatePicker && "Layer__bank-transactions__header--with-date-picker",
+          "Layer__bank-transactions__header--mobile"
+        ),
+        style: { top: shiftStickyHeader },
+        children: /* @__PURE__ */ jsxs(VStack, { gap: "sm", children: [
+          headerTopRow,
+          /* @__PURE__ */ jsx(TransactionsSearch, { isDisabled: showBulkActions }),
+          /* @__PURE__ */ jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsx(
             BulkActionsModule,
             {
+              showSelectedLabel: false,
+              fullWidth: true,
               slots: { BulkActions: BulkActionsModuleSlot }
             }
-          ) : /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
-            collapseHeader && headerTopRow,
-            !categorizedOnly && categorizeView && showStatusToggle && /* @__PURE__ */ jsx(
-              NewToggle,
-              {
-                options: [
-                  { label: "To Review", value: DisplayState.review },
-                  { label: "Categorized", value: DisplayState.categorized }
-                ],
-                selectedKey: display,
-                onSelectionChange: onCategorizationDisplayChange
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
-          showBulkActions ? null : /* @__PURE__ */ jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsx(
-              DownloadButton,
+          ) : statusToggle })
+        ] })
+      }
+    );
+  }
+  if (listView) {
+    return /* @__PURE__ */ jsx(
+      Header$1,
+      {
+        className: classNames(
+          "Layer__bank-transactions__header",
+          withDatePicker && "Layer__bank-transactions__header--with-date-picker"
+        ),
+        style: { top: shiftStickyHeader },
+        children: /* @__PURE__ */ jsxs(VStack, { gap: "xs", children: [
+          headerTopRow,
+          /* @__PURE__ */ jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsx(
+            BulkActionsModule,
+            {
+              slots: { BulkActions: BulkActionsModuleSlot }
+            }
+          ) : statusToggle }),
+          /* @__PURE__ */ jsx(TransactionsSearch, { isDisabled: showBulkActions })
+        ] })
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxs(
+      Header$1,
+      {
+        className: classNames(
+          "Layer__bank-transactions__header",
+          withDatePicker && "Layer__bank-transactions__header--with-date-picker",
+          mobileComponent && listView ? "Layer__bank-transactions__header--mobile" : void 0
+        ),
+        style: { top: shiftStickyHeader },
+        children: [
+          !collapseHeader && headerTopRow,
+          /* @__PURE__ */ jsxs(BankTransactionsActions, { children: [
+            showBulkActions ? /* @__PURE__ */ jsx(
+              BulkActionsModule,
               {
-                downloadButtonTextOverride: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-                iconOnly: listView,
-                disabled: showBulkActions
+                slots: { BulkActions: BulkActionsModuleSlot }
               }
-            ),
-            /* @__PURE__ */ jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
+            ) : /* @__PURE__ */ jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
+              collapseHeader && headerTopRow,
+              statusToggle
+            ] }),
+            /* @__PURE__ */ jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
+            /* @__PURE__ */ jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
+              /* @__PURE__ */ jsx(
+                DownloadButton,
+                {
+                  downloadButtonTextOverride: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
+                  iconOnly: listView,
+                  disabled: showBulkActions
+                }
+              ),
+              /* @__PURE__ */ jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
+            ] })
           ] })
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    );
+  }
 };
 const Inbox = (_pb) => {
   var _qb = _pb, { size = 18 } = _qb, props = __objRest(_qb, ["size"]);
@@ -17059,17 +17115,19 @@ const BankTransactionsMobileBulkActionsHeader = ({
     HStack,
     {
       gap: "md",
-      pi: "xs",
-      pbs: "sm",
-      justify: "space-between",
       align: "center",
+      justify: "space-between",
+      pis: "xs",
+      pie: "md",
+      pb: "xs",
+      className: "Layer__BankTransactionsMobileBulkActionsHeader",
       children: [
         /* @__PURE__ */ jsx(
           HStack,
           {
             align: "center",
             pi: "xs",
-            className: "Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container",
+            gap: "xs",
             children: bulkActionsEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
@@ -17091,15 +17149,17 @@ const BankTransactionsMobileBulkActionsHeader = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsx(
-          Switch,
-          {
-            isSelected: bulkActionsEnabled,
-            onChange: onBulkActionsToggle,
-            "aria-label": "Toggle bulk actions",
-            children: /* @__PURE__ */ jsx(Span, { size: "md", noWrap: true, children: "Bulk Actions" })
-          }
-        )
+        /* @__PURE__ */ jsxs(HStack, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsx(Span, { size: "md", noWrap: true, children: "Bulk Actions" }),
+          /* @__PURE__ */ jsx(
+            Switch,
+            {
+              isSelected: bulkActionsEnabled,
+              onChange: onBulkActionsToggle,
+              "aria-label": "Toggle bulk actions"
+            }
+          )
+        ] })
       ]
     }
   );
@@ -24824,10 +24884,11 @@ const ProfitAndLossFullReportDownloadButton = ({
 };
 function ProfitAndLossDownloadButton({
   stringOverrides,
-  moneyFormat,
-  iconOnly
+  moneyFormat
 }) {
   const { selectedLineItem } = useContext(ProfitAndLossContext);
+  const { value } = useSizeClass();
+  const iconOnly = value !== "desktop";
   if (selectedLineItem) {
     return /* @__PURE__ */ jsx(
       ProfitAndLossDetailLinesDownloadButton,
@@ -24887,71 +24948,6 @@ 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,
@@ -25681,25 +25677,6 @@ 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: [
@@ -25710,8 +25687,7 @@ const ProfitAndLossReport = ({
           ProfitAndLossDownloadButton,
           {
             stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-            moneyFormat: csvMoneyFormat,
-            iconOnly: true
+            moneyFormat: csvMoneyFormat
           }
         ) })
       ] }),
@@ -26578,36 +26554,6 @@ 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(
@@ -26627,63 +26573,16 @@ 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: widgetHeader,
+        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 }) })
+        ] }) }),
         children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
           BalanceSheetTable,
           {
@@ -26700,7 +26599,19 @@ const BalanceSheetView = ({
     {
       type: "panel",
       ref: containerRef,
-      header,
+      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"
+            }
+          )
+        ] })
+      ] }) }),
       children: !data || isLoading ? /* @__PURE__ */ jsx("div", { className: `Layer__${COMPONENT_NAME$8}__loader-container`, children: /* @__PURE__ */ jsx(Loader, {}) }) : /* @__PURE__ */ jsx(
         BalanceSheetTable,
         {
@@ -26972,49 +26883,37 @@ const StatementOfCashFlow = (props) => {
 };
 const StatementOfCashFlowView = ({
   stringOverrides,
-  dateSelectionMode = "full",
-  view
+  dateSelectionMode = "full"
 }) => {
   const dateRange = useGlobalDateRange({ displayMode: dateSelectionMode });
   const { data, isLoading } = useStatementOfCashFlow(dateRange);
-  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,
+  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,
         {
-          startDate: dateRange.startDate,
-          endDate: dateRange.endDate
+          data,
+          config: STATEMENT_OF_CASH_FLOW_ROWS,
+          stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashFlowTable
         }
-      ) })
-    ] }) });
-  }, [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 {
@@ -38795,15 +38694,19 @@ function UnifiedReportDownloadButton() {
     onSuccess: ({ presignedUrl }) => triggerInvisibleDownload({ url: presignedUrl })
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      DownloadButton$1,
+    /* @__PURE__ */ jsxs(
+      Button,
       {
-        iconOnly: true,
-        onClick: () => {
+        variant: "outlined",
+        onPress: () => {
           void trigger();
         },
-        isDownloading: isMutating,
-        requestFailed: isError
+        isPending: isMutating,
+        isDisabled: isMutating,
+        children: [
+          isError ? "Retry" : "Download",
+          isError ? /* @__PURE__ */ jsx(RefreshCcw, { size: 12 }) : /* @__PURE__ */ jsx(DownloadCloud, { size: 16 })
+        ]
       }
     ),
     /* @__PURE__ */ jsx(InvisibleDownload, { ref: invisibleDownloadRef })
@@ -38846,7 +38749,7 @@ const AccountingOverview = ({
   tagFilter = void 0,
   slotProps
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const [pnlToggle, setPnlToggle] = useState("expenses");
   const { value: sizeClass } = useSizeClass();
   const profitAndLossSummariesVariants = (_b = (_a = slotProps == null ? void 0 : slotProps.profitAndLoss) == null ? void 0 : _a.summaries) == null ? void 0 : _b.variants;
@@ -38908,11 +38811,11 @@ const AccountingOverview = ({
                   options: [
                     {
                       value: "revenue",
-                      label: "Revenue"
+                      label: ((_f = (_e = (_d = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _d.detailedCharts) == null ? void 0 : _e.detailedChartStringOverrides) == null ? void 0 : _f.revenueToggleLabel) || "Revenue"
                     },
                     {
                       value: "expenses",
-                      label: "Expenses"
+                      label: ((_i = (_h = (_g = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _g.detailedCharts) == null ? void 0 : _h.detailedChartStringOverrides) == null ? void 0 : _i.expenseToggleLabel) || "Expenses"
                     }
                   ],
                   selected: pnlToggle,
@@ -38931,7 +38834,7 @@ const AccountingOverview = ({
                     {
                       scope: "revenue",
                       hideClose: true,
-                      stringOverrides: (_d = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _d.detailedCharts,
+                      stringOverrides: (_j = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _j.detailedCharts,
                       chartColorsList
                     }
                   )
@@ -38949,7 +38852,7 @@ const AccountingOverview = ({
                     {
                       scope: "expenses",
                       hideClose: true,
-                      stringOverrides: (_e = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _e.detailedCharts,
+                      stringOverrides: (_k = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _k.detailedCharts,
                       chartColorsList
                     }
                   )
@@ -41251,7 +41154,7 @@ const BookkeepingOverview = ({
   stringOverrides,
   slotProps
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
   const [pnlToggle, setPnlToggle] = useState("expenses");
   const [width] = useWindowSize();
   const { isCalendlyVisible, calendlyLink, calendlyRef, closeCalendly } = useCalendly();
@@ -41344,11 +41247,11 @@ const BookkeepingOverview = ({
                 options: [
                   {
                     value: "revenue",
-                    label: "Revenue"
+                    label: ((_i = (_h = (_g = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _g.detailedCharts) == null ? void 0 : _h.detailedChartStringOverrides) == null ? void 0 : _i.revenueToggleLabel) || "Revenue"
                   },
                   {
                     value: "expenses",
-                    label: "Expenses"
+                    label: ((_l = (_k = (_j = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _j.detailedCharts) == null ? void 0 : _k.detailedChartStringOverrides) == null ? void 0 : _l.expenseToggleLabel) || "Expenses"
                   }
                 ],
                 selected: pnlToggle,
@@ -41367,7 +41270,7 @@ const BookkeepingOverview = ({
                   {
                     scope: "revenue",
                     hideClose: true,
-                    stringOverrides: (_g = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _g.detailedCharts
+                    stringOverrides: (_m = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _m.detailedCharts
                   }
                 )
               }
@@ -41384,7 +41287,7 @@ const BookkeepingOverview = ({
                   {
                     scope: "expenses",
                     hideClose: true,
-                    stringOverrides: (_h = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _h.detailedCharts
+                    stringOverrides: (_n = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _n.detailedCharts
                   }
                 )
               }
@@ -43733,83 +43636,6 @@ 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") ? {
@@ -43848,12 +43674,12 @@ const Reports = ({
       showHeader: showTitle,
       children: [
         enabledReports.length > 1 && /* @__PURE__ */ jsx("div", { className: "Layer__component Layer__header__actions", children: /* @__PURE__ */ jsx(
-          ReportsSelector,
+          Toggle,
           {
+            name: "reports-tabs",
             options: options2,
             selected: activeTab,
-            onChange: setActiveTab,
-            view
+            onChange: (opt) => setActiveTab(opt.target.value)
           }
         ) }),
         /* @__PURE__ */ jsx(Container, { name: "reports", ref: containerRef, children: /* @__PURE__ */ jsx(ProfitAndLoss, { asContainer: false, comparisonConfig, children: /* @__PURE__ */ jsx(
@@ -43892,8 +43718,7 @@ const ReportsPanel = ({
     openReport === "statementOfCashFlow" && /* @__PURE__ */ jsx(
       StatementOfCashFlow,
       __spreadValues({
-        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow,
-        view
+        stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow
       }, statementOfCashFlowConfig)
     )
   ] });
@@ -44383,6 +44208,7 @@ export {
   DisplayState,
   EntityName,
   GeneralLedgerView,
+  GlobalMonthPicker,
   Integrations,
   Invoices,
   Journal,