@layerfi/components 0.1.116 → 0.1.117-alpha.1

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";
+const version = "0.1.117-alpha.1";
 const pkg = {
   version
 };
@@ -7086,7 +7086,7 @@ const Separator = ({ mbs, mbe }) => {
   const dataProperties = toDataProperties({ mbs, mbe });
   return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadValues({ className: "Layer__separator" }, dataProperties));
 };
-const ModalTitleWithClose = react.forwardRef(function ModalTitleWithClose2({ heading, description, onClose }, ref) {
+const ModalTitleWithClose = react.forwardRef(function ModalTitleWithClose2({ heading, description, onClose, hideCloseButton = false }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsxs(VStack, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7098,7 +7098,7 @@ const ModalTitleWithClose = react.forwardRef(function ModalTitleWithClose2({ hea
             heading,
             description
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          !hideCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
             Button,
             {
               icon: true,
@@ -7388,7 +7388,8 @@ const BaseConfirmationModalContent = react.memo(function BaseConfirmationModalCo
           ModalTitleWithClose,
           {
             heading: /* @__PURE__ */ jsxRuntime.jsx(ModalHeading, { size: "sm", children: title }),
-            onClose: close2
+            onClose: close2,
+            hideCloseButton: useDrawer
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "md", children: [
@@ -8271,7 +8272,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 = react.useMemo(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsUncategorizedSelectedValue, { selectedValue });
   }, [selectedValue]);
@@ -8918,7 +8919,7 @@ const BankTransactionsBulkActions = ({
   const [recategorizeModalOpen, setRecategorizeModalOpen] = react.useState(false);
   const [uncategorizeModalOpen, setUncategorizeModalOpen] = react.useState(false);
   const confirmButtonLabel = ((_a = slotProps == null ? void 0 : slotProps.ConfirmAllModal) == null ? void 0 : _a.label) || "Confirm all";
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "xs", children: display === DisplayState.review ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { align: "center", gap: "xs", justify: isMobileView ? "end" : void 0, children: display === DisplayState.review ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
@@ -8951,7 +8952,7 @@ const BankTransactionsBulkActions = ({
       {
         variant: "outlined",
         onClick: () => setRecategorizeModalOpen(true),
-        children: "Recategorize"
+        children: isMobileView ? "Categorize" : "Recategorize"
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -8959,7 +8960,7 @@ const BankTransactionsBulkActions = ({
       {
         isOpen: recategorizeModalOpen,
         onOpenChange: setRecategorizeModalOpen,
-        mode: CategorizationMode.Recategorize,
+        mode: isMobileView ? CategorizationMode.Categorize : CategorizationMode.Recategorize,
         isMobileView
       }
     ),
@@ -11326,12 +11327,12 @@ const CLASS_NAME$6 = "Layer__BankTransactionsActions";
 function BankTransactionsActions({ children }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ 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", fluid: fullWidth, 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(Span, { noWrap: true, children: showSelectedLabel ? `${count} selected` : count }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
@@ -11616,7 +11617,7 @@ const MonthPicker = ({
 }) => {
   const triggerRef = react.useRef(null);
   const [isPopoverOpen, setPopoverOpen] = react.useState(false);
-  const { value, isMobile } = useSizeClass();
+  const { value } = useSizeClass();
   const onChangeMonth = react.useCallback((val) => {
     onChange(val);
     setPopoverOpen(false);
@@ -11630,7 +11631,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__ */ jsxRuntime.jsx(Input$1, __spreadProps(__spreadValues({ inset: true }, additionalAriaProps), { value: inputValue, readOnly: true })),
@@ -11662,13 +11663,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__ */ jsxRuntime.jsx(
     reactAriaComponents.ToggleButtonGroup,
-    {
-      className: "Layer__NewToggle",
+    __spreadProps(__spreadValues({
+      className: "Layer__NewToggle"
+    }, dataProperties), {
       selectionMode: "single",
       selectedKeys,
       onSelectionChange: (keys2) => {
@@ -11678,7 +11684,7 @@ const NewToggle = ({
         }
       },
       children: options2.map((option) => /* @__PURE__ */ jsxRuntime.jsx(NewToggleOption, __spreadValues({}, option), option.value))
-    }
+    })
   );
 };
 const SmallLoader = ({ size = 28 }) => {
@@ -11872,8 +11878,9 @@ const BankTransactionsHeader = ({
   }, [setFilters]);
   const { count } = useCountSelectedIds();
   const showBulkActions = count > 0;
+  const isMobileList = listView && mobileComponent === "mobileList";
   const headerTopRow = react.useMemo(() => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__header__content", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "Layer__bank-transactions__header__content-title", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Heading,
         {
@@ -11929,7 +11936,6 @@ const BankTransactionsHeader = ({
     }
     return actions;
   }, [withUploadMenu, showCategorizationRules]);
-  const isMobileList = listView && mobileComponent === "mobileList";
   const BulkActionsModuleSlot = react.useCallback(() => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       BankTransactionsBulkActions,
@@ -11943,53 +11949,103 @@ const BankTransactionsHeader = ({
       }
     );
   }, [isMobileList]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Header$1,
+  const statusToggle = !categorizedOnly && categorizeView && showStatusToggle ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(BankTransactionsActions, { children: [
-          showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
+      options: [
+        { label: "To Review", value: DisplayState.review },
+        { label: "Categorized", value: DisplayState.categorized }
+      ],
+      selectedKey: display,
+      onSelectionChange: onCategorizationDisplayChange,
+      fullWidth: isMobileList
+    }
+  ) : null;
+  if (isMobileList) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(VStack, { gap: "sm", children: [
+          headerTopRow,
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { isDisabled: showBulkActions }),
+          /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
             BulkActionsModule,
             {
+              showSelectedLabel: false,
+              fullWidth: true,
               slots: { BulkActions: BulkActionsModuleSlot }
             }
-          ) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
-            collapseHeader && headerTopRow,
-            !categorizedOnly && categorizeView && showStatusToggle && /* @__PURE__ */ jsxRuntime.jsx(
-              NewToggle,
-              {
-                options: [
-                  { label: "To Review", value: DisplayState.review },
-                  { label: "Categorized", value: DisplayState.categorized }
-                ],
-                selectedKey: display,
-                onSelectionChange: onCategorizationDisplayChange
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
-          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DownloadButton,
+          ) : statusToggle })
+        ] })
+      }
+    );
+  }
+  if (listView) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Header$1,
+      {
+        className: classNames(
+          "Layer__bank-transactions__header",
+          withDatePicker && "Layer__bank-transactions__header--with-date-picker"
+        ),
+        style: { top: shiftStickyHeader },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "xs", children: [
+          headerTopRow,
+          /* @__PURE__ */ jsxRuntime.jsx(HStack, { justify: "space-between", align: "center", gap: "xs", children: showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
+            BulkActionsModule,
+            {
+              slots: { BulkActions: BulkActionsModuleSlot }
+            }
+          ) : statusToggle }),
+          /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { isDisabled: showBulkActions })
+        ] })
+      }
+    );
+  } else {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(BankTransactionsActions, { children: [
+            showBulkActions ? /* @__PURE__ */ jsxRuntime.jsx(
+              BulkActionsModule,
               {
-                downloadButtonTextOverride: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-                iconOnly: listView,
-                disabled: showBulkActions
+                slots: { BulkActions: BulkActionsModuleSlot }
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "toggle", justify: "center", gap: "xs", children: [
+              collapseHeader && headerTopRow,
+              statusToggle
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(TransactionsSearch, { slot: "search", isDisabled: showBulkActions }),
+            /* @__PURE__ */ jsxRuntime.jsxs(HStack, { slot: "download-upload", justify: "center", gap: "xs", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DownloadButton,
+                {
+                  downloadButtonTextOverride: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
+                  iconOnly: listView,
+                  disabled: showBulkActions
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(BankTransactionsHeaderMenu, { actions: headerMenuActions, isDisabled: showBulkActions })
+            ] })
           ] })
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    );
+  }
 };
 const Inbox = (_pb) => {
   var _qb = _pb, { size = 18 } = _qb, props = __objRest(_qb, ["size"]);
@@ -18535,17 +18591,19 @@ const BankTransactionsMobileBulkActionsHeader = ({
     HStack,
     {
       gap: "md",
-      pi: "lg",
-      pbs: "md",
-      justify: "space-between",
       align: "center",
+      justify: "space-between",
+      pis: "xs",
+      pie: "md",
+      pb: "xs",
+      className: "Layer__BankTransactionsMobileBulkActionsHeader",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           HStack,
           {
             align: "center",
             pi: "xs",
-            className: "Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container",
+            gap: "xs",
             children: bulkActionsEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 Checkbox,
@@ -18567,15 +18625,17 @@ const BankTransactionsMobileBulkActionsHeader = ({
             ] })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Switch,
-          {
-            isSelected: bulkActionsEnabled,
-            onChange: onBulkActionsToggle,
-            "aria-label": "Toggle bulk actions",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", noWrap: true, children: "Bulk Actions" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Span, { size: "md", noWrap: true, children: "Bulk Actions" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Switch,
+            {
+              isSelected: bulkActionsEnabled,
+              onChange: onBulkActionsToggle,
+              "aria-label": "Toggle bulk actions"
+            }
+          )
+        ] })
       ]
     }
   );
@@ -40165,7 +40225,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] = react.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;
@@ -40227,11 +40287,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,
@@ -40250,7 +40310,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
                     }
                   )
@@ -40268,7 +40328,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
                     }
                   )
@@ -42570,7 +42630,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] = react.useState("expenses");
   const [width] = useWindowSize();
   const { isCalendlyVisible, calendlyLink, calendlyRef, closeCalendly } = useCalendly();
@@ -42663,11 +42723,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,
@@ -42686,7 +42746,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
                   }
                 )
               }
@@ -42703,7 +42763,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
                   }
                 )
               }
@@ -45623,6 +45683,7 @@ exports.Direction = Direction;
 exports.DisplayState = DisplayState;
 exports.EntityName = EntityName;
 exports.GeneralLedgerView = GeneralLedgerView;
+exports.GlobalMonthPicker = GlobalMonthPicker;
 exports.Integrations = Integrations;
 exports.Invoices = Invoices;
 exports.Journal = Journal;

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";
+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", 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 }),
-          /* @__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: "lg",
-      pbs: "md",
-      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"
+            }
+          )
+        ] })
       ]
     }
   );
@@ -38689,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;
@@ -38751,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,
@@ -38774,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
                     }
                   )
@@ -38792,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
                     }
                   )
@@ -41094,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();
@@ -41187,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,
@@ -41210,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
                   }
                 )
               }
@@ -41227,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
                   }
                 )
               }
@@ -44148,6 +44208,7 @@ export {
   DisplayState,
   EntityName,
   GeneralLedgerView,
+  GlobalMonthPicker,
   Integrations,
   Invoices,
   Journal,

package/dist/index.css

@@ -3142,10 +3142,6 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: space-between;
   min-height: 40px;
 }
-.Layer__bank-transactions__header__content-title {
-  display: flex;
-  align-items: center;
-}
 .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
   background-color: transparent;
 }
@@ -3748,8 +3744,11 @@ tbody .Layer__table__empty-row:first-child {
     background-color: var(--table-bg);
   }
   .Layer__bank-transactions__header.Layer__bank-transactions__header--mobile {
-    padding-bottom: var(--spacing-2xs);
+    padding-block-end: var(--spacing-sm);
+    padding-inline-start: 0;
+    padding-inline-end: var(--spacing-md);
     box-shadow: none;
+    margin-inline-start: var(--spacing-md);
   }
 }
 .Layer__bank-transaction-list-item__match-tooltip,
@@ -4192,6 +4191,9 @@ tbody .Layer__table__empty-row:first-child {
   padding: 0;
   list-style: none;
 }
+.Layer__bank-transactions__mobile-list .Layer__bank-transaction-mobile-list-item:first-child {
+  margin-top: 0;
+}
 .Layer__bank-transaction-mobile-list-item {
   box-sizing: border-box;
   width: 95%;
@@ -8310,7 +8312,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__MonthPicker__InputGroup {
   inline-size: 12rem;
 }
-.Layer__MonthPicker__InputGroup--mobile {
+.Layer__MonthPicker__InputGroup--truncated {
   inline-size: 12ch;
 }.Layer__NewToggle {
   box-sizing: border-box;
@@ -8328,6 +8330,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   isolation: isolate;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
+}
+.Layer__NewToggle[data-full-width] {
+  inline-size: 100%;
+}
+.Layer__NewToggle[data-full-width] .Layer__NewToggleOption {
+  flex: 1;
 }.Layer__NewToggleOption {
   box-sizing: border-box;
   position: relative;
@@ -8694,8 +8702,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
   border-top: 1px solid var(--color-base-400);
   background-color: var(--color-base-100);
-}.Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container {
-  gap: 20px;
+}.Layer__BankTransactionsMobileBulkActionsHeader {
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--border-color);
+  margin-inline-start: var(--spacing-md);
+  background-color: var(--color-base-100);
 }.Layer__BusinessFormMobile {
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);

package/dist/index.d.ts

@@ -407,6 +407,8 @@ declare type DeepPartial<T> = {
 declare interface DetailedChartStringOverrides {
     expenseChartHeader?: string;
     revenueChartHeader?: string;
+    revenueToggleLabel?: string;
+    expenseToggleLabel?: string;
 }
 
 declare interface DetailedTableStringOverrides {
@@ -499,6 +501,10 @@ declare interface GeneralLedgerStringOverrides {
 
 export declare const GeneralLedgerView: ({ title, showTitle, showTags, showCustomerVendor, stringOverrides, chartOfAccountsOptions, renderInAppLink, }: GeneralLedgerProps) => JSX_2.Element;
 
+export declare const GlobalMonthPicker: ({ truncateMonth }: {
+    truncateMonth?: boolean;
+}) => JSX_2.Element;
+
 /**
  * Configuration for the hero/main content section of the Landing Page page
  */

package/package.json

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