@layerfi/components 0.1.123-alpha → 0.1.123

package/dist/esm/index.mjs

@@ -185,7 +185,7 @@ var ErrorHandlerClass = class {
 const errorHandler = new ErrorHandlerClass();
 const reportError = (payload) => errorHandler.onError(payload);
 const name = "@layerfi/components";
-const version = "0.1.123-alpha";
+const version = "0.1.123";
 const description = "Layer React Components";
 const main = "dist/cjs/index.cjs";
 const module = "dist/esm/index.mjs";
@@ -4053,7 +4053,7 @@ var _excluded$100 = [
 	"pie",
 	"fluid"
 ];
-var CLASS_NAME$13 = "Layer__Stack";
+var CLASS_NAME$12 = "Layer__Stack";
 const Stack = forwardRef(function Stack$1(_ref, ref) {
 	let { align, children, className, direction, gap, justify, overflow, pb, pbs, pbe, pi, pis, pie, fluid } = _ref, restProps = _objectWithoutProperties(_ref, _excluded$100);
 	const dataProperties = toDataProperties({
@@ -4071,7 +4071,7 @@ const Stack = forwardRef(function Stack$1(_ref, ref) {
 		fluid
 	});
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({ ref }, restProps), dataProperties), {}, {
-		className: classNames(CLASS_NAME$13, className),
+		className: classNames(CLASS_NAME$12, className),
 		children
 	}));
 });
@@ -4203,7 +4203,7 @@ function useInvisibleDownload() {
 		}, [])
 	};
 }
-var CLASS_NAME$12 = "Layer__InvisibleDownload";
+var CLASS_NAME$11 = "Layer__InvisibleDownload";
 var InvisibleDownload = forwardRef((_props, ref) => {
 	const internalRef = useRef(null);
 	useImperativeHandle(ref, () => ({ trigger: function() {
@@ -4225,7 +4225,7 @@ var InvisibleDownload = forwardRef((_props, ref) => {
 	}() }));
 	return /* @__PURE__ */ jsx("a", {
 		download: true,
-		className: CLASS_NAME$12,
+		className: CLASS_NAME$11,
 		ref: internalRef,
 		onClick: useCallback((event) => {
 			event.stopPropagation();
@@ -4560,10 +4560,10 @@ const Toggle = ({ ariaLabel, options: options$5, selectedKey, onSelectionChange,
 		children: options$5.map((option) => /* @__PURE__ */ jsx(ToggleOption, _objectSpread2({}, option), option.value))
 	}));
 };
-var CLASS_NAME$11 = "Layer__LoadingSpinner";
+var CLASS_NAME$10 = "Layer__LoadingSpinner";
 function LoadingSpinner({ size }) {
 	return /* @__PURE__ */ jsx(LoaderCircle, {
-		className: CLASS_NAME$11,
+		className: CLASS_NAME$10,
 		size
 	});
 }
@@ -6394,7 +6394,7 @@ var _excluded$84 = [
 	"displayPlusSign",
 	"className"
 ];
-var CLASS_NAME$10 = "Layer__MoneySpan";
+var CLASS_NAME$9 = "Layer__MoneySpan";
 var MoneySpan = forwardRef((_ref, ref) => {
 	let { amount, displayPlusSign, className } = _ref, restProps = _objectWithoutProperties(_ref, _excluded$84);
 	const dataProperties = toDataProperties({
@@ -6403,7 +6403,7 @@ var MoneySpan = forwardRef((_ref, ref) => {
 		"display-plus-sign": displayPlusSign
 	});
 	return /* @__PURE__ */ jsx(Span, _objectSpread2(_objectSpread2(_objectSpread2({}, restProps), dataProperties), {}, {
-		className: classNames(CLASS_NAME$10, className),
+		className: classNames(CLASS_NAME$9, className),
 		ref,
 		children: centsToDollars(Math.abs(amount))
 	}));
@@ -6939,12 +6939,12 @@ const InputGroup$1 = forwardRef(function InputGroup$2(_ref, ref) {
 	}));
 });
 var _excluded$80 = ["placeholder", "isDisabled"];
-var CLASS_NAME$9 = "Layer__MinimalSearchField";
+var CLASS_NAME$8 = "Layer__MinimalSearchField";
 function MinimalSearchField(_ref) {
 	let { placeholder, isDisabled } = _ref;
 	return /* @__PURE__ */ jsxs(SearchField, _objectSpread2(_objectSpread2({}, _objectWithoutProperties(_ref, _excluded$80)), {}, {
 		isDisabled,
-		className: CLASS_NAME$9,
+		className: CLASS_NAME$8,
 		children: [/* @__PURE__ */ jsx(Input, {
 			slot: "input",
 			placeholder
@@ -6964,12 +6964,12 @@ var _excluded$79 = [
 	"label",
 	"isDisabled"
 ];
-var CLASS_NAME$8 = "Layer__SearchField";
+var CLASS_NAME$7 = "Layer__SearchField";
 function SearchField$1(_ref) {
 	let { slot = "search", className, label, isDisabled } = _ref, restProps = _objectWithoutProperties(_ref, _excluded$79);
 	return /* @__PURE__ */ jsxs(InputGroup$1, {
 		slot,
-		className: classNames(CLASS_NAME$8, className),
+		className: classNames(CLASS_NAME$7, className),
 		children: [/* @__PURE__ */ jsx(VStack, {
 			slot: "icon",
 			align: "center",
@@ -8315,7 +8315,7 @@ var _excluded$71 = [
 	"size",
 	"isIndeterminate"
 ], _excluded2$8 = ["tooltip"];
-var CLASS_NAME$7 = "Layer__Checkbox";
+var CLASS_NAME$6 = "Layer__Checkbox";
 var CHECK_SIZE = {
 	sm: 12,
 	md: 14,
@@ -8333,7 +8333,7 @@ function Checkbox$1(_ref) {
 		variant
 	])), props), {}, {
 		isIndeterminate,
-		className: classNames(CLASS_NAME$7, className),
+		className: classNames(CLASS_NAME$6, className),
 		children: withRenderProp(children, (node) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
 			slot: "checkbox",
 			children: isIndeterminate ? /* @__PURE__ */ jsx(Minus, { size: CHECK_SIZE[size] }) : /* @__PURE__ */ jsx(Check, { size: CHECK_SIZE[size] })
@@ -8659,7 +8659,7 @@ function ResponsivePopover({ children, triggerRef }) {
 		children
 	});
 }
-const DatePicker$1 = ({ label, showLabel = true, date, minDate, maxDate, isInvalid, errorText, onBlur, onChange, isDisabled, isReadOnly, className, slotProps }) => {
+const DatePicker$1 = ({ label, showLabel = false, date, minDate, maxDate, isInvalid, errorText, onBlur, onChange, isDisabled, isReadOnly, className, slotProps }) => {
 	const additionalAriaProps = !showLabel && { "aria-label": label };
 	const { value } = useSizeClass();
 	const [isPopoverOpen, setPopoverOpen] = useState(false);
@@ -10034,10 +10034,10 @@ const BankTransactionsHeaderMenu = ({ actions, isDisabled, isListView = false })
 		})
 	] });
 };
-var CLASS_NAME$6 = "Layer__BankTransactionsActions";
+var CLASS_NAME$5 = "Layer__BankTransactionsActions";
 function BankTransactionsActions({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: CLASS_NAME$6,
+		className: CLASS_NAME$5,
 		children
 	});
 }
@@ -10213,7 +10213,7 @@ function MonthCalendar({ date, onChange, minDate, maxDate, variant }) {
 		}, m.key))
 	})] });
 }
-const MonthPicker = ({ label, showLabel = true, date, onChange, minDate = null, maxDate = null, truncateMonth = false }) => {
+const MonthPicker = ({ label, showLabel = false, date, onChange, minDate = null, maxDate = null, truncateMonth = false }) => {
 	const triggerRef = useRef(null);
 	const [isPopoverOpen, setPopoverOpen] = useState(false);
 	const { value } = useSizeClass();
@@ -10376,7 +10376,6 @@ const BankTransactionsHeader = ({ shiftStickyHeader, asWidget, tableContentMode,
 			})]
 		}), withDatePicker && monthPickerDate && /* @__PURE__ */ jsx(MonthPicker, {
 			label: "Select a month",
-			showLabel: false,
 			date: monthPickerDate,
 			onChange: setDateRange,
 			minDate: activationDate ? convertDateToZonedDateTime(activationDate) : null,
@@ -14542,6 +14541,65 @@ const BankTransactionRow = ({ index, dateFormat, bankTransaction, initialLoad, s
 		})
 	}) })] });
 };
+var _excluded$42 = ["size"];
+var Inbox = (_ref) => {
+	let { size = 18 } = _ref;
+	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 18 18",
+		fill: "none"
+	}, _objectWithoutProperties(_ref, _excluded$42)), {}, {
+		width: size,
+		height: size,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M16.5 9H12L10.5 11.25H7.5L6 9H1.5",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M4.0875 3.8325L1.5 9V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V9L13.9125 3.8325C13.7883 3.58259 13.5969 3.37228 13.3597 3.22521C13.1226 3.07814 12.8491 3.00015 12.57 3H5.43C5.15094 3.00015 4.87745 3.07814 4.64028 3.22521C4.40312 3.37228 4.21168 3.58259 4.0875 3.8325Z",
+			stroke: "currentColor",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})]
+	}));
+};
+var Inbox_default = Inbox;
+var DataStateContainer = ({ children }) => /* @__PURE__ */ jsx("div", {
+	className: "Layer__table-state-container",
+	children
+});
+const BankTransactionsTableEmptyState = () => {
+	const { display } = useBankTransactionsContext();
+	const { filters } = useBankTransactionsFiltersContext();
+	const isCategorizationMode = display !== DisplayState.categorized;
+	if (Boolean(filters === null || filters === void 0 ? void 0 : filters.query)) return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
+		status: DataStateStatus.info,
+		title: "No transactions found",
+		description: "Try adjusting your search filters",
+		icon: /* @__PURE__ */ jsx(SearchX, {}),
+		spacing: true
+	}) });
+	return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
+		status: DataStateStatus.allDone,
+		title: isCategorizationMode ? "You are up to date with transactions!" : "You have no categorized transactions",
+		description: isCategorizationMode ? "All uncategorized transactions will be displayed here" : "All transactions will be displayed here once reviewed",
+		icon: isCategorizationMode ? void 0 : /* @__PURE__ */ jsx(Inbox_default, {}),
+		spacing: true
+	}) });
+};
+function BankTransactionsListWithEmptyStates({ isEmpty, slots }) {
+	const { isLoading, isError } = useBankTransactionsContext();
+	if (isError) return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
+		status: DataStateStatus.failed,
+		title: "Something went wrong",
+		description: "We couldn’t load your transactions",
+		spacing: true
+	}) });
+	if (isLoading && slots.Loader) return slots.Loader;
+	if (!isLoading && isEmpty) return /* @__PURE__ */ jsx(BankTransactionsTableEmptyState, {});
+	return slots.List;
+}
 const SkeletonTableLoader = ({ rows, cols, height = 20, width = 100 }) => {
 	return /* @__PURE__ */ jsx("tbody", {
 		className: "Layer__skeleton-table-body__loader",
@@ -14578,11 +14636,12 @@ const BankTransactionsLoader = () => {
 	});
 };
 const BankTransactionsTable = ({ isLoading, bankTransactions, showDescriptions, showReceiptUploads, showTooltips, stringOverrides, isSyncing = false, page, lastPage }) => {
-	var _ref, _stringOverrides$tran, _stringOverrides$tran2, _stringOverrides$tran3, _stringOverrides$tran4, _stringOverrides$tran5, _stringOverrides$tran6;
+	var _bankTransactions$len, _ref, _stringOverrides$tran, _stringOverrides$tran2, _stringOverrides$tran3, _stringOverrides$tran4, _stringOverrides$tran5, _stringOverrides$tran6;
 	const isCategorizationEnabled = useBankTransactionsIsCategorizationEnabledContext();
 	const { mutate, display } = useBankTransactionsContext();
 	const { isAllSelected, isPartiallySelected, onHeaderCheckboxChange } = useBankTransactionsTableCheckboxState({ bankTransactions });
 	useUpsertBankTransactionsDefaultCategories(bankTransactions);
+	const isEmpty = ((_bankTransactions$len = bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.length) !== null && _bankTransactions$len !== void 0 ? _bankTransactions$len : 0) === 0;
 	const showReceiptColumn = (_ref = showReceiptUploads && (bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.some((transaction) => {
 		var _transaction$document;
 		return ((_transaction$document = transaction.document_ids) === null || _transaction$document === void 0 ? void 0 : _transaction$document.length) > 0;
@@ -14632,23 +14691,30 @@ const BankTransactionsTable = ({ isLoading, bankTransactions, showDescriptions,
 				})
 			] }) }),
 			isLoading && /* @__PURE__ */ jsx(BankTransactionsLoader, {}),
-			/* @__PURE__ */ jsxs("tbody", { children: [!isLoading && (bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.map((bankTransaction, index) => /* @__PURE__ */ jsx(BankTransactionRow, {
-				index,
-				dateFormat: "LLL d, yyyy",
-				bankTransaction,
-				showDescriptions,
-				showReceiptUploads,
-				showReceiptUploadColumn: showReceiptColumn,
-				showTooltips,
-				stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.bankTransactionCTAs
-			}, bankTransaction.id))), isSyncing && (lastPage || (!bankTransactions || bankTransactions.length === 0) && page === 1) ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
-				colSpan: 3,
-				children: /* @__PURE__ */ jsx(SyncingComponent, {
-					title: "Syncing historical account data",
-					timeSync: 5,
-					onRefresh
-				})
-			}) }) : null] })
+			/* @__PURE__ */ jsxs("tbody", { children: [
+				!isLoading && isEmpty && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: isCategorizationEnabled ? 7 : 6,
+					children: /* @__PURE__ */ jsx(BankTransactionsTableEmptyState, {})
+				}) }),
+				!isLoading && (bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.map((bankTransaction, index) => /* @__PURE__ */ jsx(BankTransactionRow, {
+					index,
+					dateFormat: "LLL d, yyyy",
+					bankTransaction,
+					showDescriptions,
+					showReceiptUploads,
+					showReceiptUploadColumn: showReceiptColumn,
+					showTooltips,
+					stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.bankTransactionCTAs
+				}, bankTransaction.id))),
+				isSyncing && (lastPage || isEmpty && page === 1) ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", {
+					colSpan: 3,
+					children: /* @__PURE__ */ jsx(SyncingComponent, {
+						title: "Syncing historical account data",
+						timeSync: 5,
+						onRefresh
+					})
+				}) }) : null
+			] })
 		]
 	});
 };
@@ -14800,14 +14866,14 @@ function useArchiveCategorizationRule() {
 		return Reflect.get(target, prop);
 	} });
 }
-var _excluded$42 = ["size"];
+var _excluded$41 = ["size"];
 var BackArrow = (_ref) => {
 	let { size = 18 } = _ref;
 	return /* @__PURE__ */ jsx("svg", _objectSpread2(_objectSpread2({
 		viewBox: "0 0 12 12",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg"
-	}, _objectWithoutProperties(_ref, _excluded$42)), {}, {
+	}, _objectWithoutProperties(_ref, _excluded$41)), {}, {
 		width: size,
 		height: size,
 		children: /* @__PURE__ */ jsx("path", {
@@ -14819,14 +14885,14 @@ var BackArrow = (_ref) => {
 	}));
 };
 var BackArrow_default = BackArrow;
-var CLASS_NAME$5 = "Layer__UI__ResponsiveComponent";
+var CLASS_NAME$4 = "Layer__UI__ResponsiveComponent";
 const ResponsiveComponent = ({ slots, resolveVariant: resolveVariant$2, className }) => {
 	const [currentVariant, setCurrentVariant] = useState(null);
 	return /* @__PURE__ */ jsx("div", {
 		ref: useElementSize(useCallback((size) => {
 			setCurrentVariant(resolveVariant$2({ width: size.width }));
 		}, [resolveVariant$2])),
-		className: classNames(CLASS_NAME$5, className),
+		className: classNames(CLASS_NAME$4, className),
 		children: currentVariant !== null && slots[currentVariant]
 	});
 };
@@ -14884,7 +14950,7 @@ const MobileListItem = ({ item, onClickItem, children }) => {
 		}), children$1] }))
 	}, item.id);
 };
-var _excluded$41 = [
+var _excluded$40 = [
 	"ariaLabel",
 	"data",
 	"slots",
@@ -14898,7 +14964,7 @@ var isSelectionEnabled = (props) => {
 	return props.selectionMode !== "none" && props.enableSelection;
 };
 const MobileList = (props) => {
-	const { ariaLabel, data, slots, renderItem, onClickItem, isLoading, isError, selectionMode = "none" } = props, restSelectionProps = _objectWithoutProperties(props, _excluded$41);
+	const { ariaLabel, data, slots, renderItem, onClickItem, isLoading, isError, selectionMode = "none" } = props, restSelectionProps = _objectWithoutProperties(props, _excluded$40);
 	const { EmptyState: EmptyState$4, ErrorState: ErrorState$3 } = slots;
 	const resolvedSelectionMode = isSelectionEnabled(props) ? selectionMode : "none";
 	const resolvedSelectionBehavior = resolvedSelectionMode === "none" ? "toggle" : void 0;
@@ -14946,9 +15012,9 @@ const usePaginationRange = ({ totalCount, pageSize, siblingCount = 1, currentPag
 		currentPage
 	]);
 };
-var _excluded$40 = ["children", "isSelected"];
+var _excluded$39 = ["children", "isSelected"];
 var PaginationButton = (_ref) => {
-	let { children, isSelected } = _ref, buttonProps = _objectWithoutProperties(_ref, _excluded$40);
+	let { children, isSelected } = _ref, buttonProps = _objectWithoutProperties(_ref, _excluded$39);
 	return /* @__PURE__ */ jsx(Button$1, _objectSpread2(_objectSpread2({
 		inset: true,
 		icon: true,
@@ -15009,11 +15075,11 @@ const Pagination = ({ onPageChange, totalCount, siblingCount = 1, currentPage, p
 		})
 	});
 };
-var _excluded$39 = ["data", "paginationProps"];
+var _excluded$38 = ["data", "paginationProps"];
 var EMPTY_ARRAY$4 = [];
 const PaginatedMobileList = (props) => {
 	var _data$length;
-	const { data, paginationProps } = props, listProps = _objectWithoutProperties(props, _excluded$39);
+	const { data, paginationProps } = props, listProps = _objectWithoutProperties(props, _excluded$38);
 	const { initialPage = 0, onSetPage, pageSize = 20, hasMore, fetchMore, autoResetPageIndexRef } = paginationProps;
 	const { pageItems, pageIndex, setPage } = usePaginatedList({
 		data: data !== null && data !== void 0 ? data : EMPTY_ARRAY$4,
@@ -15149,7 +15215,7 @@ const getColumnDefs = (columnConfig$1) => {
 		});
 	});
 };
-var _excluded$38 = [
+var _excluded$37 = [
 	"children",
 	"className",
 	"nonAria",
@@ -15194,7 +15260,7 @@ var TableSubComponent = /* @__PURE__ */ function(TableSubComponent$1) {
 var CSS_PREFIX$1 = "Layer__UI__Table";
 var getClassName = (component, additionalClassNames, withHidden) => classNames(`${CSS_PREFIX$1}-${component}`, withHidden && `${CSS_PREFIX$1}-${component}--hidden`, additionalClassNames);
 var Table$1 = forwardRef((_ref, ref) => {
-	let { children, className, nonAria, slot } = _ref, restProps = _objectWithoutProperties(_ref, _excluded$38);
+	let { children, className, nonAria, slot } = _ref, restProps = _objectWithoutProperties(_ref, _excluded$37);
 	return /* @__PURE__ */ jsx(nonAria ? "table" : Table, _objectSpread2(_objectSpread2({
 		className: getClassName(TableSubComponent.Table, className),
 		slot: slot !== null && slot !== void 0 ? slot : void 0
@@ -16002,7 +16068,7 @@ function RuleUpdatesReviewStep({ ruleSuggestion, isDrawer }) {
 			/* @__PURE__ */ jsxs(ActionButtonsStack, {
 				gap: "xs",
 				justify: "end",
-				className: isDrawer ? "Layer__RuleUpdatesReviewStep__buttons--mobile" : void 0,
+				pbs: "md",
 				children: [/* @__PURE__ */ jsx(Button$1, {
 					onClick: previous,
 					variant: "outlined",
@@ -16146,59 +16212,6 @@ function useTagDimensions({ isEnabled = true } = {}) {
 function usePreloadTagDimensions(parameters) {
 	useTagDimensions(parameters);
 }
-var _excluded$37 = ["size"];
-var Inbox = (_ref) => {
-	let { size = 18 } = _ref;
-	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
-		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 18 18",
-		fill: "none"
-	}, _objectWithoutProperties(_ref, _excluded$37)), {}, {
-		width: size,
-		height: size,
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "M16.5 9H12L10.5 11.25H7.5L6 9H1.5",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "M4.0875 3.8325L1.5 9V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H15C15.3978 15 15.7794 14.842 16.0607 14.5607C16.342 14.2794 16.5 13.8978 16.5 13.5V9L13.9125 3.8325C13.7883 3.58259 13.5969 3.37228 13.3597 3.22521C13.1226 3.07814 12.8491 3.00015 12.57 3H5.43C5.15094 3.00015 4.87745 3.07814 4.64028 3.22521C4.40312 3.37228 4.21168 3.58259 4.0875 3.8325Z",
-			stroke: "currentColor",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})]
-	}));
-};
-var Inbox_default = Inbox;
-var DataStateContainer = ({ children }) => /* @__PURE__ */ jsx("div", {
-	className: "Layer__table-state-container",
-	children
-});
-function BankTransactionsListWithEmptyStates({ isEmpty, slots }) {
-	const { isLoading, isError, display } = useBankTransactionsContext();
-	const { filters } = useBankTransactionsFiltersContext();
-	const isCategorizationMode = display !== DisplayState.categorized;
-	const isFiltered = Boolean(filters === null || filters === void 0 ? void 0 : filters.query);
-	if (isError) return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
-		status: DataStateStatus.failed,
-		title: "Something went wrong",
-		description: "We couldn’t load your transactions"
-	}) });
-	if (isLoading && slots.Loader) return slots.Loader;
-	if (isEmpty && !isFiltered) return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
-		status: DataStateStatus.allDone,
-		title: isCategorizationMode ? "You are up to date with transactions!" : "You have no categorized transactions",
-		description: isCategorizationMode ? "All uncategorized transactions will be displayed here" : "All transactions will be displayed here once reviewed",
-		icon: isCategorizationMode ? void 0 : /* @__PURE__ */ jsx(Inbox_default, {})
-	}) });
-	if (isEmpty && isFiltered) return /* @__PURE__ */ jsx(DataStateContainer, { children: /* @__PURE__ */ jsx(DataState, {
-		status: DataStateStatus.info,
-		title: "No transactions found",
-		description: "Try adjusting your search filters",
-		icon: /* @__PURE__ */ jsx(SearchX, {})
-	}) });
-	return slots.List;
-}
 var _excluded$36 = [
 	"onError",
 	"showTags",
@@ -16382,6 +16395,7 @@ var BankTransactionsTableView = ({ asWidget = false, pageSize = 20, showDescript
 		BankTransactionsListLoader,
 		BankTransactionsMobileListView
 	]);
+	const isEmpty = tableContentMode === BankTransactionsTableContent.Table ? false : ((_bankTransactions$len = bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.length) !== null && _bankTransactions$len !== void 0 ? _bankTransactions$len : 0) === 0;
 	return /* @__PURE__ */ jsxs(Container, {
 		className: classNames("Layer__Public", display === DisplayState.review ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized"),
 		transparentBg: listView && mobileComponent === "mobileList",
@@ -16401,7 +16415,7 @@ var BankTransactionsTableView = ({ asWidget = false, pageSize = 20, showDescript
 				showCategorizationRules
 			}),
 			/* @__PURE__ */ jsx(BankTransactionsListWithEmptyStates, {
-				isEmpty: ((_bankTransactions$len = bankTransactions === null || bankTransactions === void 0 ? void 0 : bankTransactions.length) !== null && _bankTransactions$len !== void 0 ? _bankTransactions$len : 0) === 0 && !isLoading,
+				isEmpty,
 				slots
 			}),
 			/* @__PURE__ */ jsx(SuggestedCategorizationRuleUpdatesDialog, {
@@ -17236,10 +17250,10 @@ var InstitutionIcon = (_ref) => {
 	}));
 };
 var InstitutionIcon_default = InstitutionIcon;
-var CLASS_NAME$4 = "Layer__BasicLinkedAccountContainer";
+var CLASS_NAME$3 = "Layer__BasicLinkedAccountContainer";
 function BasicLinkedAccountContainer({ children, isSelected }) {
 	return /* @__PURE__ */ jsx("div", _objectSpread2(_objectSpread2({}, toDataProperties({ selected: isSelected })), {}, {
-		className: CLASS_NAME$4,
+		className: CLASS_NAME$3,
 		children
 	}));
 }
@@ -17869,7 +17883,7 @@ const useDatePickerState = ({ date, setDate, minDate = null, maxDate = null }) =
 		minDateZdt
 	]);
 };
-var CLASS_NAME$3 = "Layer__caobfb";
+var CLASS_NAME$2 = "Layer__caobfb";
 const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude = false, onChange, errors = [] }) => {
 	var _account$institution, _account$institution2, _account$institution3, _account$institution4;
 	const dataProps = useMemo(() => toDataProperties({
@@ -17893,10 +17907,10 @@ const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude
 		value
 	]);
 	return /* @__PURE__ */ jsxs("div", _objectSpread2(_objectSpread2({}, dataProps), {}, {
-		className: CLASS_NAME$3,
+		className: CLASS_NAME$2,
 		children: [
 			/* @__PURE__ */ jsx("div", {
-				className: `${CLASS_NAME$3}__icon-col`,
+				className: `${CLASS_NAME$2}__icon-col`,
 				children: ((_account$institution = account.institution) === null || _account$institution === void 0 ? void 0 : _account$institution.logo) != void 0 ? /* @__PURE__ */ jsx("img", {
 					width: 32,
 					height: 32,
@@ -17905,18 +17919,18 @@ const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude
 				}) : /* @__PURE__ */ jsx(InstitutionIcon_default, {})
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: `${CLASS_NAME$3}__details-col`,
+				className: `${CLASS_NAME$2}__details-col`,
 				children: [
 					/* @__PURE__ */ jsxs("div", {
-						className: `${CLASS_NAME$3}__details-col__details`,
+						className: `${CLASS_NAME$2}__details-col__details`,
 						children: [/* @__PURE__ */ jsxs("div", {
-							className: `${CLASS_NAME$3}__details-col__name`,
+							className: `${CLASS_NAME$2}__details-col__name`,
 							children: [/* @__PURE__ */ jsx(Text$2, {
-								className: `${CLASS_NAME$3}__details-col__name__institution-name`,
+								className: `${CLASS_NAME$2}__details-col__name__institution-name`,
 								size: TextSize.sm,
 								children: (_account$institution4 = account.institution) === null || _account$institution4 === void 0 ? void 0 : _account$institution4.name
 							}), /* @__PURE__ */ jsx(Text$2, {
-								className: `${CLASS_NAME$3}__details-col__name__account-name`,
+								className: `${CLASS_NAME$2}__details-col__name__account-name`,
 								size: TextSize.sm,
 								children: account.external_account_name
 							})]
@@ -17926,12 +17940,11 @@ const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude
 						})]
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: `${CLASS_NAME$3}__details-col__inputs`,
+						className: `${CLASS_NAME$2}__details-col__inputs`,
 						children: [/* @__PURE__ */ jsx(InputGroup, {
 							label: "Opening date",
 							children: /* @__PURE__ */ jsx(DatePicker$1, {
 								label: "Opening date",
-								showLabel: false,
 								date,
 								onChange: onChangeDate,
 								onBlur: onBlurDate,
@@ -17956,7 +17969,7 @@ const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude
 				]
 			}),
 			!disableConfirmExclude && /* @__PURE__ */ jsx("div", {
-				className: `${CLASS_NAME$3}__confirm-col`,
+				className: `${CLASS_NAME$2}__confirm-col`,
 				children: /* @__PURE__ */ jsx(Checkbox$1, {
 					size: "lg",
 					isSelected: value.isConfirmed,
@@ -17965,7 +17978,7 @@ const AccountFormBox = ({ account, value, isSaved = false, disableConfirmExclude
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: `${CLASS_NAME$3}__success-banner`,
+				className: `${CLASS_NAME$2}__success-banner`,
 				children: /* @__PURE__ */ jsx(CheckCircle_default, { size: 36 })
 			})
 		]
@@ -20755,7 +20768,7 @@ var dateSelectionOptionConfig = {
 	}
 };
 var options$4 = Object.values(dateSelectionOptionConfig).filter((opt) => opt.value !== DatePreset.Custom);
-const DateSelectionComboBox = () => {
+const DateSelectionComboBox = ({ showLabel = false }) => {
 	const [lastPreset, setLastPreset] = useState(null);
 	const { business } = useLayerContext();
 	const dateRange = useGlobalDateRange({ dateSelectionMode: "full" });
@@ -20770,21 +20783,22 @@ const DateSelectionComboBox = () => {
 		setDateRange(rangeForPreset(nextPreset));
 	}, [setDateRange]);
 	const inputId = useId();
-	return /* @__PURE__ */ jsxs(VStack, { children: [/* @__PURE__ */ jsx(Label$2, {
+	const label = "Report period";
+	return /* @__PURE__ */ jsxs(VStack, { children: [showLabel && /* @__PURE__ */ jsx(Label$2, {
 		pbe: "3xs",
 		size: "sm",
 		htmlFor: inputId,
-		children: "Report period"
-	}), /* @__PURE__ */ jsx(ComboBox, {
+		children: label
+	}), /* @__PURE__ */ jsx(ComboBox, _objectSpread2({
 		options: options$4,
 		onSelectedValueChange,
 		selectedValue: selectedOption,
 		isSearchable: false,
 		isClearable: false,
 		inputId
-	})] });
+	}, !showLabel && { "aria-label": label }))] });
 };
-const GlobalDateRangePicker = () => {
+const GlobalDateRangePicker = ({ showLabels = false }) => {
 	const { startDate: globalStartDate, endDate: globalEndDate } = useGlobalDateRange({ dateSelectionMode: "full" });
 	const { setDateRange: setGlobalDateRange } = useGlobalDateRangeActions();
 	const { minDate, maxDate } = useGlobalDatePickerBounds();
@@ -20823,7 +20837,8 @@ const GlobalDateRangePicker = () => {
 		slotProps: { Label: {
 			size: "sm",
 			pbe: "3xs"
-		} }
+		} },
+		showLabel: showLabels
 	}), /* @__PURE__ */ jsx(DatePicker$1, {
 		label: "End date",
 		date: localEndDate,
@@ -20836,19 +20851,20 @@ const GlobalDateRangePicker = () => {
 		slotProps: { Label: {
 			size: "sm",
 			pbe: "3xs"
-		} }
+		} },
+		showLabel: showLabels
 	})] });
 };
-const DateRangeSelection = () => {
+const DateRangeSelection = ({ showLabels = false }) => {
 	const { value } = useSizeClass();
 	return /* @__PURE__ */ jsxs(HStack, {
 		className: classNames("Layer__DateRangeSelection", { "Layer__DateRangeSelection--mobile": value === "mobile" }),
-		children: [/* @__PURE__ */ jsx(DateSelectionComboBox, {}), /* @__PURE__ */ jsx(GlobalDateRangePicker, {})]
+		children: [/* @__PURE__ */ jsx(DateSelectionComboBox, { showLabel: showLabels }), /* @__PURE__ */ jsx(GlobalDateRangePicker, { showLabels })]
 	});
 };
-const CombinedDateRangeSelection = ({ mode }) => {
-	if (mode === "month") return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: true });
-	return /* @__PURE__ */ jsx(DateRangeSelection, {});
+const CombinedDateRangeSelection = ({ mode, showLabels = true }) => {
+	if (mode === "month") return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: showLabels });
+	return /* @__PURE__ */ jsx(DateRangeSelection, { showLabels });
 };
 var getProfitAndLossDetailLinesExcel = (apiUrl, accessToken, params) => {
 	const { businessId, startDate, endDate, pnlStructureLineItemName, tagKey, tagValues, reportingBasis, pnlStructure } = params;
@@ -21037,7 +21053,10 @@ const ProfitAndLossHeader = ({ text, className, headingClassName, withDatePicker
 			]
 		}), /* @__PURE__ */ jsxs(HStack, {
 			gap: "xs",
-			children: [withDatePicker && /* @__PURE__ */ jsx(CombinedDateRangeSelection, { mode: dateSelectionMode }), withDownloadButton && /* @__PURE__ */ jsx(ProfitAndLossDownloadButton, { stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.downloadButton })]
+			children: [withDatePicker && /* @__PURE__ */ jsx(CombinedDateRangeSelection, {
+				mode: dateSelectionMode,
+				showLabels: false
+			}), withDownloadButton && /* @__PURE__ */ jsx(ProfitAndLossDownloadButton, { stringOverrides: stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.downloadButton })]
 		})]
 	});
 };
@@ -21882,7 +21901,7 @@ function ProfitAndLossSummariesSummary({ label, amount, isLoading, percentChange
 		})]
 	});
 }
-var CLASS_NAME$2 = "Layer__TransactionsToReview";
+var CLASS_NAME$1 = "Layer__TransactionsToReview";
 function TransactionsToReview({ onClick, tagFilter = void 0, variants: variants$1 }) {
 	var _tagFilter$values, _activeMonth$uncatego;
 	const { size = "sm" } = variants$1 !== null && variants$1 !== void 0 ? variants$1 : {};
@@ -21944,7 +21963,7 @@ function TransactionsToReview({ onClick, tagFilter = void 0, variants: variants$
 	}
 	return /* @__PURE__ */ jsxs("div", {
 		onClick,
-		className: CLASS_NAME$2,
+		className: CLASS_NAME$1,
 		children: [/* @__PURE__ */ jsxs(VStack, {
 			gap: verticalGap,
 			align: "start",
@@ -22322,7 +22341,7 @@ const BalanceSheetTable = ({ data, config, stringOverrides }) => {
 		}) }), /* @__PURE__ */ jsx(TableBody$2, { children: config.map((row, idx) => /* @__PURE__ */ jsx(Fragment, { children: data[row.lineItem] && renderLineItem(data[row.lineItem], 0, row.lineItem, idx) }, row.lineItem)) })]
 	});
 };
-const GlobalDatePicker = () => {
+const GlobalDatePicker = ({ showLabel = false }) => {
 	const { date } = useGlobalDate({ dateSelectionMode: "full" });
 	const { setDate: setGlobalDate } = useGlobalDateActions();
 	const { minDate, maxDate } = useGlobalDatePickerBounds();
@@ -22346,19 +22365,20 @@ const GlobalDatePicker = () => {
 		slotProps: { Label: {
 			size: "sm",
 			pbe: "3xs"
-		} }
+		} },
+		showLabel
 	});
 };
-const DateSelection = () => {
+const DateSelection = ({ showLabels = false }) => {
 	const { value } = useSizeClass();
 	return /* @__PURE__ */ jsxs(HStack, {
 		className: classNames("Layer__DateSelection", { "Layer__DateSelection--mobile": value === "mobile" }),
-		children: [/* @__PURE__ */ jsx(DateSelectionComboBox, {}), /* @__PURE__ */ jsx(GlobalDatePicker, {})]
+		children: [/* @__PURE__ */ jsx(DateSelectionComboBox, { showLabel: showLabels }), /* @__PURE__ */ jsx(GlobalDatePicker, { showLabel: showLabels })]
 	});
 };
-const CombinedDateSelection = ({ mode }) => {
-	if (mode === "month") return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: true });
-	return /* @__PURE__ */ jsx(DateSelection, {});
+const CombinedDateSelection = ({ mode, showLabels = true }) => {
+	if (mode === "month") return /* @__PURE__ */ jsx(GlobalMonthPicker, { showLabel: showLabels });
+	return /* @__PURE__ */ jsx(DateSelection, { showLabels });
 };
 var COMPONENT_NAME$9 = "balance-sheet";
 const BalanceSheet = (props) => {
@@ -26232,10 +26252,10 @@ var JournalTableView = ({ asWidget, stringOverrides }) => {
 		})
 	});
 };
-var CLASS_NAME$1 = "Layer__TasksEmptyContainer";
+var CLASS_NAME = "Layer__TasksEmptyContainer";
 function TasksEmptyContainer({ children }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: CLASS_NAME$1,
+		className: CLASS_NAME,
 		children
 	});
 }
@@ -36504,13 +36524,6 @@ const CallBooking = ({ callBooking, onBookCall }) => {
 		children: callBooking ? /* @__PURE__ */ jsx(ScheduledCallState, { callBooking }) : /* @__PURE__ */ jsx(EmptyState$1, { onBookCall })
 	});
 };
-var CLASS_NAME = "Layer__BookkeepingProfitAndLossSummariesContainer";
-function BookkeepingProfitAndLossSummariesContainer({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: CLASS_NAME,
-		children
-	});
-}
 var TASKS_MOBILE_VIEWPORT_WIDTH = 1100;
 const useKeepInMobileViewport = () => {
 	const upperContentRef = useRef(null);
@@ -36558,6 +36571,7 @@ const BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts
 	var _slotProps$profitAndL, _callBookings$0$data$, _callBookings$, _stringOverrides$prof, _stringOverrides$prof2, _stringOverrides$prof3, _stringOverrides$prof4, _stringOverrides$prof5, _stringOverrides$prof6;
 	const [pnlToggle, setPnlToggle] = useState("expenses");
 	const [width] = useWindowSize();
+	const { value: sizeClass } = useSizeClass();
 	const { isCalendlyVisible, calendlyLink, calendlyRef, closeCalendly } = useCalendly();
 	const profitAndLossSummariesVariants = slotProps === null || slotProps === void 0 || (_slotProps$profitAndL = slotProps.profitAndLoss) === null || _slotProps$profitAndL === void 0 || (_slotProps$profitAndL = _slotProps$profitAndL.summaries) === null || _slotProps$profitAndL === void 0 ? void 0 : _slotProps$profitAndL.variants;
 	const { upperContentRef, targetElementRef, upperElementInFocus } = useKeepInMobileViewport();
@@ -36570,6 +36584,7 @@ const BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts
 		children: [/* @__PURE__ */ jsxs(View, {
 			viewClassName: "Layer__bookkeeping-overview--view",
 			title: (stringOverrides === null || stringOverrides === void 0 ? void 0 : stringOverrides.title) || title || "Bookkeeping overview",
+			header: /* @__PURE__ */ jsx(Header$1, { children: /* @__PURE__ */ jsx(HeaderRow, { children: /* @__PURE__ */ jsx(HeaderCol, { children: /* @__PURE__ */ jsx(GlobalMonthPicker, { truncateMonth: sizeClass === "mobile" }) }) }) }),
 			withSidebar: width > 1100,
 			sidebar: /* @__PURE__ */ jsxs(VStack, {
 				gap: "lg",
@@ -36611,14 +36626,17 @@ const BookkeepingOverview = ({ title, showTitle = true, onClickReconnectAccounts
 						children: [
 							/* @__PURE__ */ jsx(ProfitAndLoss.Header, {
 								text: (stringOverrides === null || stringOverrides === void 0 || (_stringOverrides$prof = stringOverrides.profitAndLoss) === null || _stringOverrides$prof === void 0 ? void 0 : _stringOverrides$prof.header) || "Profit & Loss",
-								withDatePicker: true,
-								withStatus: true,
-								dateSelectionMode: "month"
+								withStatus: true
+							}),
+							/* @__PURE__ */ jsx(VStack, {
+								pb: "md",
+								pi: "md",
+								fluid: true,
+								children: /* @__PURE__ */ jsx(ProfitAndLoss.Summaries, {
+									stringOverrides: stringOverrides === null || stringOverrides === void 0 || (_stringOverrides$prof2 = stringOverrides.profitAndLoss) === null || _stringOverrides$prof2 === void 0 ? void 0 : _stringOverrides$prof2.summaries,
+									variants: profitAndLossSummariesVariants
+								})
 							}),
-							/* @__PURE__ */ jsx(BookkeepingProfitAndLossSummariesContainer, { children: /* @__PURE__ */ jsx(ProfitAndLoss.Summaries, {
-								stringOverrides: stringOverrides === null || stringOverrides === void 0 || (_stringOverrides$prof2 = stringOverrides.profitAndLoss) === null || _stringOverrides$prof2 === void 0 ? void 0 : _stringOverrides$prof2.summaries,
-								variants: profitAndLossSummariesVariants
-							}) }),
 							/* @__PURE__ */ jsx(ProfitAndLoss.Chart, {})
 						]
 					})