@layerfi/components 0.1.108-alpha.1 → 0.1.108

package/dist/esm/index.mjs

@@ -5570,7 +5570,7 @@ import { useState as useState3 } from "react";
 import { useReducer, useEffect } from "react";
 
 // package.json
-var version = "0.1.108-alpha.1";
+var version = "0.1.108";
 
 // src/models/APIError.ts
 var APIError = class _APIError extends Error {
@@ -8696,7 +8696,7 @@ import {
   startOfMonth,
   startOfYear
 } from "date-fns";
-import { useState as useState2, createContext as createContext5, useContext as useContext5 } from "react";
+import { useState as useState2, createContext as createContext5, useContext as useContext5, useMemo as useMemo7 } from "react";
 import { createStore, useStore } from "zustand";
 
 // src/utils/switch/assertUnreachable.ts
@@ -8869,13 +8869,9 @@ var getEffectiveDateRangeForMode = (mode, { start, end }) => {
 };
 function useGlobalDateRange({ displayMode = "monthPicker" }) {
   const store = useContext5(GlobalDateStoreContext);
-  const rawStart = useStoreWithDateSelected(store, ({ start: start2 }) => start2);
-  const rawEnd = useStoreWithDateSelected(store, ({ end: end2 }) => end2);
-  const { start, end } = getEffectiveDateRangeForMode(displayMode, { start: rawStart, end: rawEnd });
-  return {
-    start,
-    end
-  };
+  const rawStart = useStoreWithDateSelected(store, ({ start }) => start);
+  const rawEnd = useStoreWithDateSelected(store, ({ end }) => end);
+  return useMemo7(() => getEffectiveDateRangeForMode(displayMode, { start: rawStart, end: rawEnd }), [displayMode, rawEnd, rawStart]);
 }
 function useGlobalDateRangeActions() {
   const store = useContext5(GlobalDateStoreContext);
@@ -9485,10 +9481,10 @@ var Header = forwardRef2(
 Header.displayName = "Header";
 
 // src/components/Onboarding/ConnectAccount.tsx
-import { useContext as useContext8, useMemo as useMemo11 } from "react";
+import { useContext as useContext8, useMemo as useMemo12 } from "react";
 
 // src/hooks/useBankTransactions/useAugmentedBankTransactions.tsx
-import { useCallback as useCallback9, useEffect as useEffect3, useMemo as useMemo9, useRef, useState as useState6 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect3, useMemo as useMemo10, useRef, useState as useState6 } from "react";
 
 // src/components/BankTransactions/constants.ts
 var CategorizedCategories = [
@@ -9559,7 +9555,7 @@ import { endOfMonth as endOfMonth2, startOfMonth as startOfMonth2 } from "date-f
 // src/hooks/useBankTransactions/useBankTransactions.ts
 import useSWRInfinite from "swr/infinite";
 var import_lodash4 = __toESM(require_lodash2());
-import { useCallback as useCallback5, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo8 } from "react";
 var BANK_TRANSACTIONS_TAG_KEY = "#bank-transactions";
 function keyLoader(previousPageData, {
   access_token: accessToken,
@@ -9661,7 +9657,7 @@ function useBankTransactionsInvalidator() {
     ),
     [invalidate]
   );
-  const debouncedInvalidateBankTransactions = useMemo7(
+  const debouncedInvalidateBankTransactions = useMemo8(
     () => (0, import_lodash4.debounce)(
       invalidateBankTransactions,
       INVALIDATION_DEBOUNCE_OPTIONS.wait,
@@ -9751,7 +9747,7 @@ var useBankAccounts = () => {
 // src/hooks/useProfitAndLoss/useProfitAndLossDetailLines.tsx
 import useSWR7 from "swr";
 var import_lodash5 = __toESM(require_lodash2());
-import { useCallback as useCallback6, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo9 } from "react";
 import { Schema as Schema9 } from "effect";
 var LIST_PNL_DETAIL_LINES_TAG_KEY = "#list-pnl-detail-lines";
 var PnlDetailLinesSWRResponse = class {
@@ -9867,7 +9863,7 @@ function usePnlDetailLinesInvalidator() {
     () => invalidate((tags) => tags.includes(LIST_PNL_DETAIL_LINES_TAG_KEY)),
     [invalidate]
   );
-  const debouncedInvalidatePnlDetailLines = useMemo8(
+  const debouncedInvalidatePnlDetailLines = useMemo9(
     () => (0, import_lodash5.debounce)(
       invalidatePnlDetailLines,
       INVALIDATION_DEBOUNCE_OPTIONS2.wait,
@@ -10093,7 +10089,7 @@ var useAugmentedBankTransactions = (params) => {
   } = useLayerContext();
   const dateFilterMode = (params == null ? void 0 : params.applyGlobalDateRange) ? "GlobalDateRange" /* GlobalDateRange */ : (params == null ? void 0 : params.monthlyView) ? "MonthlyView" /* MonthlyView */ : void 0;
   const { start, end } = useGlobalDateRange({ displayMode: "monthPicker" });
-  const globalDateRange = useMemo9(() => ({
+  const globalDateRange = useMemo10(() => ({
     startDate: start,
     endDate: end
   }), [start, end]);
@@ -10103,7 +10099,7 @@ var useAugmentedBankTransactions = (params) => {
   };
   const initialFilters = __spreadValues(__spreadValues({}, (params == null ? void 0 : params.scope) && { categorizationStatus: params == null ? void 0 : params.scope }), dateFilterMode === "MonthlyView" /* MonthlyView */ && { dateRange: defaultDateRange });
   const [baseFilters, setBaseFilters] = useState6(initialFilters);
-  const filters = useMemo9(() => __spreadValues(__spreadValues({}, baseFilters), dateFilterMode === "GlobalDateRange" /* GlobalDateRange */ && { dateRange: globalDateRange }), [dateFilterMode, baseFilters, globalDateRange]);
+  const filters = useMemo10(() => __spreadValues(__spreadValues({}, baseFilters), dateFilterMode === "GlobalDateRange" /* GlobalDateRange */ && { dateRange: globalDateRange }), [dateFilterMode, baseFilters, globalDateRange]);
   const display = (_a = filters == null ? void 0 : filters.categorizationStatus) != null ? _a : "categorized" /* categorized */;
   const {
     data: rawResponseData,
@@ -10116,19 +10112,19 @@ var useAugmentedBankTransactions = (params) => {
   } = useBankTransactions(
     bankTransactionFiltersToHookOptions(filters)
   );
-  const data = useMemo9(() => {
+  const data = useMemo10(() => {
     if (rawResponseData && rawResponseData.length > 0) {
       return rawResponseData == null ? void 0 : rawResponseData.map((x) => x == null ? void 0 : x.data).flat().filter((x) => !!x);
     }
     return void 0;
   }, [rawResponseData]);
-  const lastMetadata = useMemo9(() => {
+  const lastMetadata = useMemo10(() => {
     if (rawResponseData && rawResponseData.length > 0) {
       return rawResponseData[rawResponseData.length - 1].meta;
     }
     return void 0;
   }, [rawResponseData]);
-  const hasMore = useMemo9(() => {
+  const hasMore = useMemo10(() => {
     var _a2, _b, _c, _d;
     if (rawResponseData && rawResponseData.length > 0) {
       const lastElement = rawResponseData[rawResponseData.length - 1];
@@ -10138,14 +10134,14 @@ var useAugmentedBankTransactions = (params) => {
     }
     return false;
   }, [rawResponseData]);
-  const accountsList = useMemo9(
+  const accountsList = useMemo10(
     () => data ? collectAccounts(data) : [],
     [data]
   );
   const setFilters = useCallback9((newFilters) => {
     setBaseFilters((prevFilters) => __spreadValues(__spreadValues({}, prevFilters), newFilters));
   }, []);
-  const filteredData = useMemo9(() => {
+  const filteredData = useMemo10(() => {
     var _a2, _b;
     let filtered = data;
     if (!filtered) {
@@ -10302,14 +10298,14 @@ var useAugmentedBankTransactions = (params) => {
     }
   }, [syncTimestamps, filters]);
   const { data: linkedAccounts, refetchAccounts } = useLinkedAccounts();
-  const anyAccountSyncing = useMemo9(
+  const anyAccountSyncing = useMemo10(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
   const [pollIntervalMs, setPollIntervalMs] = useState6(
     INITIAL_POLL_INTERVAL_MS
   );
-  const transactionsNotSynced = useMemo9(
+  const transactionsNotSynced = useMemo10(
     () => isLoading === false && anyAccountSyncing && (!data || (data == null ? void 0 : data.length) === 0),
     [data, anyAccountSyncing, isLoading]
   );
@@ -10797,7 +10793,7 @@ import {
 } from "react";
 
 // src/components/Tooltip/useTooltip.ts
-import { useMemo as useMemo10, useState as useState7, createContext as createContext8, useContext as useContext7 } from "react";
+import { useMemo as useMemo11, useState as useState7, createContext as createContext8, useContext as useContext7 } from "react";
 import {
   useFloating,
   autoUpdate,
@@ -10866,7 +10862,7 @@ var useTooltip = ({
     },
     duration: 300
   });
-  return useMemo10(
+  return useMemo11(
     () => __spreadValues(__spreadValues({
       open,
       setOpen,
@@ -12142,7 +12138,7 @@ var ConnectAccount = ({
   const { data, isLoading } = useAugmentedBankTransactions({
     scope: "review" /* review */
   });
-  const transactionsToReview = useMemo11(
+  const transactionsToReview = useMemo12(
     () => countTransactionsToReview({ transactions: data }),
     [data, isLoading]
   );
@@ -13078,7 +13074,7 @@ function LinkedAccountPill({ label, items }) {
 }
 
 // src/components/LinkedAccounts/UnlinkAccountConfirmationModal/UnlinkAccountConfirmationModal.tsx
-import { useContext as useContext10, useMemo as useMemo12 } from "react";
+import { useContext as useContext10, useMemo as useMemo13 } from "react";
 
 // src/components/ui/Modal/Modal.tsx
 import { forwardRef as forwardRef7 } from "react";
@@ -13232,15 +13228,16 @@ Button2.displayName = "Button";
 // src/components/ui/Typography/Heading.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { Heading as ReactAriaHeading } from "react-aria-components";
+import classNames22 from "classnames";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var HEADING_CLASS_NAME = "Layer__UI__Heading";
 var Heading2 = forwardRef9((_a, ref) => {
-  var _b = _a, { align, pie, pbe, size, variant, weight } = _b, restProps = __objRest(_b, ["align", "pie", "pbe", "size", "variant", "weight"]);
-  const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight });
+  var _b = _a, { align, pie, pbe, size, variant, weight, ellipsis, className } = _b, restProps = __objRest(_b, ["align", "pie", "pbe", "size", "variant", "weight", "ellipsis", "className"]);
+  const dataProperties = toDataProperties({ pbe, pie, size, align, variant, weight, ellipsis });
   return /* @__PURE__ */ jsx66(
     ReactAriaHeading,
     __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), {
-      className: HEADING_CLASS_NAME,
+      className: classNames22(HEADING_CLASS_NAME, className),
       ref
     })
   );
@@ -13248,13 +13245,13 @@ var Heading2 = forwardRef9((_a, ref) => {
 Heading2.displayName = "Heading";
 
 // src/components/ui/Modal/ModalSlots.tsx
-import classNames22 from "classnames";
+import classNames23 from "classnames";
 import { jsx as jsx67, jsxs as jsxs34 } from "react/jsx-runtime";
 var MODAL_CLOSE_BUTTON_CLASS_NAME = "Layer__ModalCloseButton";
 var ModalCloseButton = ({ onClose, positionAbsolute = false }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: classNames22(
+    className: classNames23(
       MODAL_CLOSE_BUTTON_CLASS_NAME,
       positionAbsolute && `${MODAL_CLOSE_BUTTON_CLASS_NAME}--position-absolute`
     ),
@@ -13326,7 +13323,7 @@ function ModalActions({ children }) {
 
 // src/components/ui/Stack/Stack.tsx
 import { forwardRef as forwardRef11 } from "react";
-import classNames23 from "classnames";
+import classNames24 from "classnames";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var CLASS_NAME2 = "Layer__Stack";
 var Stack = forwardRef11(
@@ -13381,7 +13378,7 @@ var Stack = forwardRef11(
       __spreadProps(__spreadValues(__spreadValues({
         ref
       }, restProps), dataProperties), {
-        className: classNames23(CLASS_NAME2, className),
+        className: classNames24(CLASS_NAME2, className),
         children
       })
     );
@@ -13469,7 +13466,7 @@ import { jsx as jsx70 } from "react/jsx-runtime";
 function UnlinkAccountConfirmationModal({ isOpen, onOpenChange, account }) {
   const { unlinkAccount: unlinkAccount2 } = useContext10(LinkedAccountsContext);
   const variant = account.external_account_source === "CUSTOM" ? "DELETE" : "UNLINK";
-  const modalContent = useMemo12(() => {
+  const modalContent = useMemo13(() => {
     switch (variant) {
       case "DELETE":
         return {
@@ -13655,7 +13652,7 @@ var LinkedAccountItemThumb = ({
 };
 
 // src/components/LinkedAccounts/LinkedAccountsContent.tsx
-import classNames25 from "classnames";
+import classNames26 from "classnames";
 
 // src/components/LinkedAccounts/ConfirmationModal/LinkedAccountsConfirmationModal.tsx
 import { useState as useState15 } from "react";
@@ -13687,14 +13684,14 @@ function ConditionalList({
 
 // src/components/ui/Checkbox/Checkbox.tsx
 import { Check } from "lucide-react";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { Checkbox as ReactAriaCheckbox } from "react-aria-components";
-import classNames24 from "classnames";
+import classNames25 from "classnames";
 import { Fragment as Fragment7, jsx as jsx73, jsxs as jsxs37 } from "react/jsx-runtime";
 var CLASS_NAME3 = "Layer__Checkbox";
 function Checkbox(_a) {
   var _b = _a, { children, className, variant = "default", size = "md" } = _b, props = __objRest(_b, ["children", "className", "variant", "size"]);
-  const dataProperties = useMemo13(() => toDataProperties({
+  const dataProperties = useMemo14(() => toDataProperties({
     size,
     variant,
     labeled: typeof children === "string" && children.length > 0
@@ -13702,7 +13699,7 @@ function Checkbox(_a) {
   return /* @__PURE__ */ jsx73(
     ReactAriaCheckbox,
     __spreadProps(__spreadValues(__spreadValues({}, dataProperties), props), {
-      className: classNames24(CLASS_NAME3, className),
+      className: classNames25(CLASS_NAME3, className),
       children: withRenderProp(children, (node) => /* @__PURE__ */ jsxs37(Fragment7, { children: [
         /* @__PURE__ */ jsx73("div", { slot: "checkbox", children: /* @__PURE__ */ jsx73(Check, { size: size === "lg" ? 16 : 12 }) }),
         node
@@ -14004,7 +14001,7 @@ var LinkedAccountsContent = ({
   showBreakConnection
 }) => {
   const { data, addConnection } = useContext12(LinkedAccountsContext);
-  const linkedAccountsNewAccountClassName = classNames25(
+  const linkedAccountsNewAccountClassName = classNames26(
     "Layer__linked-accounts__new-account",
     asWidget && "--as-widget",
     showLedgerBalance && "--show-ledger-balance",
@@ -14044,7 +14041,7 @@ var LinkedAccountsContent = ({
 };
 
 // src/components/LinkedAccounts/OpeningBalanceModal/OpeningBalanceModal.tsx
-import { useContext as useContext13, useMemo as useMemo17, useState as useState18 } from "react";
+import { useContext as useContext13, useMemo as useMemo18, useState as useState18 } from "react";
 
 // src/utils/business.ts
 import { differenceInCalendarMonths, parseISO as parseISO2, startOfMonth as startOfMonth3 } from "date-fns";
@@ -14077,10 +14074,10 @@ var isDateAllowedToBrowse = (date, business) => {
 };
 
 // src/components/LinkedAccounts/AccountFormBox/AccountFormBox.tsx
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo17 } from "react";
 
 // src/components/Input/Input.tsx
-import classNames26 from "classnames";
+import classNames27 from "classnames";
 import { jsx as jsx78, jsxs as jsxs42 } from "react/jsx-runtime";
 var Input = (_a) => {
   var _b = _a, {
@@ -14094,7 +14091,7 @@ var Input = (_a) => {
     "errorMessage",
     "leftText"
   ]);
-  const baseClassName = classNames26(
+  const baseClassName = classNames27(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -14110,7 +14107,7 @@ var Input = (_a) => {
 };
 
 // src/components/Input/InputGroup.tsx
-import classNames27 from "classnames";
+import classNames28 from "classnames";
 import { jsx as jsx79, jsxs as jsxs43 } from "react/jsx-runtime";
 var InputGroup = ({
   label,
@@ -14119,7 +14116,7 @@ var InputGroup = ({
   inline,
   children
 }) => {
-  const baseClassName = classNames27(
+  const baseClassName = classNames28(
     "Layer__input-group",
     className,
     inline && "Layer__input-group--inline"
@@ -14298,7 +14295,7 @@ var ChevronDownFill = (_a) => {
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/Input/Select.tsx
-import classNames28 from "classnames";
+import classNames29 from "classnames";
 import { jsx as jsx83, jsxs as jsxs47 } from "react/jsx-runtime";
 var Select = ({
   name,
@@ -14315,7 +14312,7 @@ var Select = ({
   isLoading,
   formatOptionLabel: formatOptionLabel2
 }) => {
-  const baseClassName = classNames28(
+  const baseClassName = classNames29(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -14346,7 +14343,7 @@ var Select = ({
 };
 
 // src/components/Input/InputWithBadge.tsx
-import classNames29 from "classnames";
+import classNames30 from "classnames";
 import { jsx as jsx84, jsxs as jsxs48 } from "react/jsx-runtime";
 
 // src/components/Input/MultiSelect.tsx
@@ -14354,7 +14351,7 @@ import { useCallback as useCallback12 } from "react";
 import ReactSelect2, {
   components as components2
 } from "react-select";
-import classNames30 from "classnames";
+import classNames31 from "classnames";
 import { jsx as jsx85, jsxs as jsxs49 } from "react/jsx-runtime";
 var MultiSelect = ({
   name,
@@ -14372,7 +14369,7 @@ var MultiSelect = ({
   inputId,
   isLoading
 }) => {
-  const baseClassName = classNames30(
+  const baseClassName = classNames31(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -14406,7 +14403,7 @@ var MultiSelect = ({
 };
 
 // src/components/Input/AmountInput.tsx
-import classNames31 from "classnames";
+import classNames32 from "classnames";
 import CurrencyInput from "react-currency-input-field";
 import { jsx as jsx86, jsxs as jsxs50 } from "react/jsx-runtime";
 var transformCurrencyValue = (rawValue) => {
@@ -14437,7 +14434,7 @@ var AmountInput = (_a) => {
     "badge",
     "placeholder"
   ]);
-  const baseClassName = classNames31(
+  const baseClassName = classNames32(
     "Layer__input Layer__amount-input",
     badge ? "Layer__amount-input--align-left" : "Layer__amount-input--align-right",
     isInvalid ? "Layer__input--error" : "",
@@ -14475,11 +14472,11 @@ var AmountInput = (_a) => {
 };
 
 // src/components/DatePicker/DatePicker.tsx
-import { useMemo as useMemo15, useRef as useRef7, useState as useState17 } from "react";
+import { useMemo as useMemo16, useRef as useRef7, useState as useState17 } from "react";
 import * as RDP from "react-datepicker";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState16, useLayoutEffect, useMemo as useMemo14 } from "react";
+import { useState as useState16, useLayoutEffect, useMemo as useMemo15 } from "react";
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
@@ -14507,7 +14504,7 @@ var useWindowSize = () => {
 };
 function useSizeClass() {
   const [width] = useWindowSize();
-  const sizeClass = useMemo14(() => {
+  const sizeClass = useMemo15(() => {
     switch (true) {
       case width <= BREAKPOINTS.MOBILE:
         return "mobile";
@@ -14621,7 +14618,7 @@ var DatePickerOptions = ({
 };
 
 // src/components/DatePicker/DatePicker.tsx
-import classNames32 from "classnames";
+import classNames33 from "classnames";
 import { endOfDay as endOfDay2, endOfMonth as endOfMonth4, endOfYear as endOfYear3, getYear } from "date-fns";
 import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs51 } from "react/jsx-runtime";
 var ReactDatePicker = RDP.default.default || RDP.default || RDP;
@@ -14723,7 +14720,7 @@ var DatePicker = (_a) => {
   ]);
   const { ModeSelector } = slots != null ? slots : {};
   const pickerRef = useRef7(null);
-  const pickerMode = useMemo15(() => {
+  const pickerMode = useMemo16(() => {
     var _a2;
     if (!allowedModes) {
       return displayMode;
@@ -14736,7 +14733,7 @@ var DatePicker = (_a) => {
     }
     return (_a2 = allowedModes[0]) != null ? _a2 : displayMode;
   }, [displayMode, allowedModes]);
-  const [firstDate, secondDate] = useMemo15(() => {
+  const [firstDate, secondDate] = useMemo16(() => {
     if (selected instanceof Date) {
       return [selected, null];
     }
@@ -14746,21 +14743,21 @@ var DatePicker = (_a) => {
     return [selected[0], null];
   }, [selected, displayMode]);
   const { isDesktop } = useSizeClass();
-  const wrapperClassNames = classNames32(
+  const wrapperClassNames = classNames33(
     "Layer__datepicker__wrapper",
     displayMode === "timePicker" && "Layer__datepicker__time__wrapper",
     showNavigationArrows(navigateArrows, isDesktop) && "Layer__datepicker__wrapper--arrows"
   );
-  const datePickerWrapperClassNames = classNames32(
+  const datePickerWrapperClassNames = classNames33(
     "Layer__datepicker",
     displayMode === "timePicker" && "Layer__datepicker__time",
     wrapperClassName
   );
-  const calendarClassNames = classNames32(
+  const calendarClassNames = classNames33(
     "Layer__datepicker__calendar",
     calendarClassName
   );
-  const popperClassNames = classNames32(
+  const popperClassNames = classNames33(
     "Layer__datepicker__popper",
     displayMode === "timePicker" && "Layer__datepicker__time__popper",
     popperClassName
@@ -14821,7 +14818,7 @@ var DatePicker = (_a) => {
         break;
     }
   };
-  const isTodayOrAfter = useMemo15(() => {
+  const isTodayOrAfter = useMemo16(() => {
     switch (displayMode) {
       case "dayPicker":
         return firstDate >= endOfDay2(/* @__PURE__ */ new Date()) || maxDate && firstDate >= maxDate;
@@ -14930,7 +14927,7 @@ var DatePicker = (_a) => {
         Button,
         {
           "aria-label": "Previous Date",
-          className: classNames32(
+          className: classNames33(
             "Layer__datepicker__prev-button",
             isBeforeMinDate && "Layer__datepicker__button--disabled"
           ),
@@ -14952,7 +14949,7 @@ var DatePicker = (_a) => {
         {
           "aria-label": "Next Date",
           variant: "secondary" /* secondary */,
-          className: classNames32(
+          className: classNames33(
             "Layer__datepicker__next-button",
             isTodayOrAfter ? "Layer__datepicker__button--disabled" : void 0
           ),
@@ -15001,7 +14998,7 @@ var AccountFormBox = ({
   errors = []
 }) => {
   var _a, _b, _c, _d, _e;
-  const dataProps = useMemo16(() => toDataProperties({
+  const dataProps = useMemo17(() => toDataProperties({
     saved: isSaved,
     confirmed: value.isConfirmed
   }), [isSaved, value.isConfirmed]);
@@ -15302,7 +15299,7 @@ function LinkedAccountsOpeningBalanceModalContent({
       openingDate: (_a2 = getActivationDate(business)) != null ? _a2 : startOfYear3(/* @__PURE__ */ new Date())
     };
   }));
-  const formsDataToSave = useMemo17(
+  const formsDataToSave = useMemo18(
     () => ignoreAlreadySaved(formsData, results),
     [formsData, results]
   );
@@ -15457,7 +15454,7 @@ var LinkedAccountsComponent = ({
 
 // src/components/BankTransactions/BankTransactions.tsx
 var import_lodash7 = __toESM(require_lodash2());
-import { useEffect as useEffect23, useMemo as useMemo39, useRef as useRef23, useState as useState47 } from "react";
+import { useEffect as useEffect23, useMemo as useMemo40, useRef as useRef23, useState as useState47 } from "react";
 
 // src/contexts/BankTransactionsContext/BankTransactionsContext.tsx
 import { createContext as createContext9, useContext as useContext15 } from "react";
@@ -15614,7 +15611,7 @@ var File = (_a) => {
 var File_default = File;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import { useEffect as useEffect14, useMemo as useMemo30, useRef as useRef13, useState as useState29 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo31, useRef as useRef13, useState as useState29 } from "react";
 
 // src/icons/Scissors.tsx
 import { jsx as jsx94, jsxs as jsxs56 } from "react/jsx-runtime";
@@ -15917,7 +15914,7 @@ var MinimizeTwo = (_a) => {
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-import classNames34 from "classnames";
+import classNames35 from "classnames";
 import { parseISO as parseISO4, format as formatTime } from "date-fns";
 
 // src/hooks/categories/useCategories.ts
@@ -15961,10 +15958,10 @@ function useCategories({ mode } = {}) {
 }
 
 // src/components/BankTransactionMobileList/BusinessCategories.tsx
-import { useCallback as useCallback13, useMemo as useMemo18, useState as useState20 } from "react";
+import { useCallback as useCallback13, useMemo as useMemo19, useState as useState20 } from "react";
 
 // src/components/ActionableList/ActionableList.tsx
-import classNames33 from "classnames";
+import classNames34 from "classnames";
 import { jsx as jsx99, jsxs as jsxs59 } from "react/jsx-runtime";
 var ActionableList = ({
   options: options3,
@@ -15973,12 +15970,12 @@ var ActionableList = ({
   showDescriptions = false,
   className
 }) => {
-  return /* @__PURE__ */ jsx99("ul", { className: classNames33("Layer__actionable-list", className), children: options3.map((x, idx) => /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsx99("ul", { className: classNames34("Layer__actionable-list", className), children: options3.map((x, idx) => /* @__PURE__ */ jsxs59(
     "li",
     {
       role: "button",
       onClick: () => onClick(x),
-      className: classNames33(
+      className: classNames34(
         x.secondary && "Layer__actionable-list-item--secondary",
         x.asLink && "Layer__actionable-list-item--as-link",
         selectedId === x.id && "Layer__actionable-list__item--selected"
@@ -16177,7 +16174,7 @@ var BusinessCategories = ({
   );
   const [optionsToShow, setOptionsToShow] = useState20(categoryOptions);
   const [selectedGroup, setSelectedGroup] = useState20();
-  const filteredOptions = useMemo18(() => {
+  const filteredOptions = useMemo19(() => {
     let options3 = optionsToShow;
     if (query) {
       const lower = query.toLowerCase();
@@ -16517,7 +16514,7 @@ var GroupHeading = (props) => {
   return /* @__PURE__ */ jsx105(
     components3.GroupHeading,
     __spreadValues({
-      className: classNames34(
+      className: classNames35(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       )
@@ -16670,7 +16667,7 @@ var CategorySelect = ({
         "button",
         {
           "aria-label": "Select category",
-          className: classNames34(
+          className: classNames35(
             "Layer__category-menu__drawer-btn",
             selected && "Layer__category-menu__drawer-btn--selected"
           ),
@@ -17071,7 +17068,7 @@ var Eye = (_a) => {
 var Eye_default = Eye;
 
 // src/components/FileThumb/FileThumb.tsx
-import classNames35 from "classnames";
+import classNames36 from "classnames";
 import { jsx as jsx110, jsxs as jsxs68 } from "react/jsx-runtime";
 var FileThumb = ({
   url,
@@ -17090,7 +17087,7 @@ var FileThumb = ({
   return /* @__PURE__ */ jsxs68(
     "div",
     {
-      className: classNames35(
+      className: classNames36(
         "Layer__file-thumb",
         floatingActions && "Layer__file-thumb--floating"
       ),
@@ -17123,7 +17120,7 @@ var FileThumb = ({
         enableOpen || enableDownload || onDelete ? /* @__PURE__ */ jsxs68(
           "div",
           {
-            className: classNames35(
+            className: classNames36(
               "Layer__file-thumb__actions",
               floatingActions && "Layer__file-thumb__actions--floating"
             ),
@@ -17253,7 +17250,7 @@ BankTransactionReceipts.displayName = "BankTransactionReceipts";
 import useSWR9 from "swr";
 
 // src/providers/LegacyModeProvider/LegacyModeProvider.tsx
-import { createContext as createContext11, useContext as useContext17, useMemo as useMemo19 } from "react";
+import { createContext as createContext11, useContext as useContext17, useMemo as useMemo20 } from "react";
 import { jsx as jsx112 } from "react/jsx-runtime";
 var LegacyModeContext = createContext11({
   overrideMode: void 0
@@ -17265,7 +17262,7 @@ function LegacyModeProvider({
   overrideMode,
   children
 }) {
-  const memoizedValue = useMemo19(() => ({ overrideMode }), [overrideMode]);
+  const memoizedValue = useMemo20(() => ({ overrideMode }), [overrideMode]);
   return /* @__PURE__ */ jsx112(LegacyModeContext.Provider, { value: memoizedValue, children });
 }
 
@@ -17385,7 +17382,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import classNames36 from "classnames";
+import classNames37 from "classnames";
 import { parseISO as parseISO7, format as formatTime4 } from "date-fns";
 import { jsx as jsx114, jsxs as jsxs71 } from "react/jsx-runtime";
 var MatchForm = ({
@@ -17422,7 +17419,7 @@ var MatchForm = ({
       return /* @__PURE__ */ jsxs71(
         "div",
         {
-          className: classNames36(
+          className: classNames37(
             `${classNamePrefix}__match-row`,
             suggestedMatch.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
           ),
@@ -17477,7 +17474,7 @@ var MatchForm = ({
 };
 
 // src/components/MatchForm/MatchFormMobile.tsx
-import classNames37 from "classnames";
+import classNames38 from "classnames";
 import { parseISO as parseISO8, format as formatTime5 } from "date-fns";
 import { jsx as jsx115, jsxs as jsxs72 } from "react/jsx-runtime";
 var MatchFormMobile = ({
@@ -17496,7 +17493,7 @@ var MatchFormMobile = ({
       return /* @__PURE__ */ jsxs72(
         "div",
         {
-          className: classNames37(
+          className: classNames38(
             `${classNamePrefix}__match-item`,
             match.id === selectedMatchId ? `${classNamePrefix}__match-item--selected` : ""
           ),
@@ -17565,10 +17562,10 @@ var MatchFormMobile = ({
 // src/components/Toggle/Toggle.tsx
 import {
   useEffect as useEffect10,
-  useMemo as useMemo20,
+  useMemo as useMemo21,
   useState as useState23
 } from "react";
-import classNames38 from "classnames";
+import classNames39 from "classnames";
 import { jsx as jsx116, jsxs as jsxs73 } from "react/jsx-runtime";
 import { createElement } from "react";
 var Toggle = ({
@@ -17581,7 +17578,7 @@ var Toggle = ({
   const [currentWidth, setCurrentWidth] = useState23(0);
   const [thumbPos, setThumbPos] = useState23({ left: 0, width: 0 });
   const [initialized, setInitialized] = useState23(false);
-  const activeOption = useMemo20(() => {
+  const activeOption = useMemo21(() => {
     return selected ? selected : options3.length > 0 ? options3[0].value : void 0;
   }, [selected, options3]);
   const toggleRef = useElementSize((_a, _b, c) => {
@@ -17589,7 +17586,7 @@ var Toggle = ({
       setCurrentWidth(c.width);
     }
   });
-  const baseClassName = classNames38(
+  const baseClassName = classNames39(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -17674,7 +17671,7 @@ var ToggleOption = ({
   style,
   index
 }) => {
-  const optionClassName = classNames38("Layer__toggle-option", {
+  const optionClassName = classNames39("Layer__toggle-option", {
     "Layer__toggle-option--active": checked
   });
   if (disabled) {
@@ -17839,10 +17836,10 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import classNames41 from "classnames";
+import classNames42 from "classnames";
 
 // src/components/Textarea/Textarea.tsx
-import classNames39 from "classnames";
+import classNames40 from "classnames";
 import { jsx as jsx118, jsxs as jsxs75 } from "react/jsx-runtime";
 var Textarea = (_a) => {
   var _b = _a, {
@@ -17854,7 +17851,7 @@ var Textarea = (_a) => {
     "isInvalid",
     "errorMessage"
   ]);
-  const baseClassName = classNames39(
+  const baseClassName = classNames40(
     "Layer__textarea",
     isInvalid ? "Layer__textarea--error" : "",
     className
@@ -18025,10 +18022,10 @@ var BankTransactionMemo = ({ bankTransactionId }) => {
 };
 
 // src/features/bankTransactions/[bankTransactionId]/customerVendor/components/BankTransactionCustomerVendorSelector.tsx
-import { useCallback as useCallback20, useMemo as useMemo24 } from "react";
+import { useCallback as useCallback20, useMemo as useMemo25 } from "react";
 
 // src/features/customerVendor/components/CustomerVendorSelector.tsx
-import { useCallback as useCallback17, useId as useId2, useMemo as useMemo23 } from "react";
+import { useCallback as useCallback17, useId as useId2, useMemo as useMemo24 } from "react";
 
 // src/features/customers/api/useListCustomers.ts
 import useSWRInfinite2 from "swr/infinite";
@@ -18259,7 +18256,7 @@ import { useState as useState25, useCallback as useCallback16 } from "react";
 
 // src/hooks/useDebounce/useDebounce.ts
 var import_lodash6 = __toESM(require_lodash2());
-import { useEffect as useEffect12, useMemo as useMemo21, useRef as useRef9 } from "react";
+import { useEffect as useEffect12, useMemo as useMemo22, useRef as useRef9 } from "react";
 var DEFAULT_WAIT = 300;
 var DEFAULT_MAX_WAIT = 2 * DEFAULT_WAIT;
 function useDebounce(fn) {
@@ -18267,7 +18264,7 @@ function useDebounce(fn) {
   useEffect12(() => {
     internalFnRef.current = fn;
   }, [fn]);
-  const debouncedCallback = useMemo21(() => {
+  const debouncedCallback = useMemo22(() => {
     const internalFn = (...args) => {
       internalFnRef.current(...args);
     };
@@ -18317,8 +18314,8 @@ function useDebouncedSearchInput({
 import Select3, {
   components as components4
 } from "react-select";
-import { useId, useMemo as useMemo22, useRef as useRef10 } from "react";
-import classNames40 from "classnames";
+import { useId, useMemo as useMemo23, useRef as useRef10 } from "react";
+import classNames41 from "classnames";
 
 // src/components/ui/Portal/Portal.tsx
 var PORTAL_CLASS_NAME = "Layer__Portal";
@@ -18332,7 +18329,7 @@ var COMBO_BOX_CLASS_NAMES = {
   VALUE_CONTAINER: "Layer__ComboBoxValueContainer",
   PLACEHOLDER: "Layer__ComboBoxPlaceholder",
   INDICATORS_CONTAINER: "Layer__ComboBoxIndicatorsContainer",
-  MENU: classNames40(
+  MENU: classNames41(
     PORTAL_CLASS_NAME,
     "Layer__ComboBoxMenu"
   ),
@@ -18376,7 +18373,7 @@ function buildCustomComboBoxOption({
     return /* @__PURE__ */ jsx120(
       components4.Option,
       __spreadProps(__spreadValues({}, restProps), {
-        className: classNames40(
+        className: classNames41(
           COMBO_BOX_CLASS_NAMES.OPTION,
           isFocused ? `${COMBO_BOX_CLASS_NAMES.OPTION}--focused` : void 0,
           effectiveIsSelected ? `${COMBO_BOX_CLASS_NAMES.OPTION}--selected` : void 0,
@@ -18517,20 +18514,20 @@ function ComboBox(_a) {
   const internalInputId = useId();
   const effectiveInputId = inputId != null ? inputId : internalInputId;
   const CustomGroupHeadingRef = useRef10(buildCustomGroupHeading());
-  const CustomComboBoxOption = useMemo22(
+  const CustomComboBoxOption = useMemo23(
     () => buildCustomComboBoxOption({ displayDisabledAsSelected }),
     [displayDisabledAsSelected]
   );
   const { EmptyMessage, ErrorMessage, SelectedValue } = slots != null ? slots : {};
-  const CustomNoOptionsMessage = useMemo22(
+  const CustomNoOptionsMessage = useMemo23(
     () => buildCustomNoOptionsMessage({ EmptyMessage }),
     [EmptyMessage]
   );
-  const CustomPlaceholder = useMemo22(
+  const CustomPlaceholder = useMemo23(
     () => buildCustomPlaceholder({ placeholder }),
     [placeholder]
   );
-  const CustomSingleValue = useMemo22(
+  const CustomSingleValue = useMemo23(
     () => buildCustomSingleValue({ SelectedValue }),
     [SelectedValue]
   );
@@ -18554,7 +18551,7 @@ function ComboBox(_a) {
         className,
         classNames: {
           container: () => COMBO_BOX_CLASS_NAMES.CONTAINER,
-          control: ({ isFocused, isDisabled: isDisabled2 }) => classNames40(
+          control: ({ isFocused, isDisabled: isDisabled2 }) => classNames41(
             COMBO_BOX_CLASS_NAMES.CONTROL,
             isFocused && `${COMBO_BOX_CLASS_NAMES.CONTROL}--focused`,
             isDisabled2 && `${COMBO_BOX_CLASS_NAMES.CONTROL}--disabled`,
@@ -18562,7 +18559,7 @@ function ComboBox(_a) {
           ),
           valueContainer: () => COMBO_BOX_CLASS_NAMES.VALUE_CONTAINER,
           placeholder: () => COMBO_BOX_CLASS_NAMES.PLACEHOLDER,
-          indicatorsContainer: () => classNames40(
+          indicatorsContainer: () => classNames41(
             COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER,
             isReadOnly && `${COMBO_BOX_CLASS_NAMES.INDICATORS_CONTAINER}--readonly`
           ),
@@ -18650,7 +18647,7 @@ function CustomerVendorSelector({
     isLoading: isLoadingVendors,
     isError: isErrorLoadingVendors
   } = useListVendors({ query: effectiveSearchQuery });
-  const groups = useMemo23(
+  const groups = useMemo24(
     () => {
       const customersSection = customerPages ? {
         label: "Customers",
@@ -18710,7 +18707,7 @@ function CustomerVendorSelector({
       onSelectedCustomerVendorChange
     ]
   );
-  const selectedCustomerVendorForComboBox = useMemo23(
+  const selectedCustomerVendorForComboBox = useMemo24(
     () => {
       if (selectedCustomerVendor === null) {
         return null;
@@ -18722,11 +18719,11 @@ function CustomerVendorSelector({
     },
     [selectedCustomerVendor]
   );
-  const EmptyMessage = useMemo23(
+  const EmptyMessage = useMemo24(
     () => /* @__PURE__ */ jsx121(P, { variant: "subtle", children: "No matching customer or vendor found" }),
     []
   );
-  const ErrorMessage = useMemo23(
+  const ErrorMessage = useMemo24(
     () => /* @__PURE__ */ jsx121(
       P,
       {
@@ -18987,7 +18984,7 @@ function BankTransactionCustomerVendorSelector({
   } = bankTransaction;
   const status = useEffectiveBookkeepingStatus();
   const isReadOnly = status === "ACTIVE" /* ACTIVE */;
-  const selectedCustomerVendor = useMemo24(
+  const selectedCustomerVendor = useMemo25(
     () => {
       if (customer) {
         return decodeCustomerVendor(__spreadProps(__spreadValues({}, customer), {
@@ -19054,7 +19051,7 @@ function BankTransactionCustomerVendorSelector({
 import {
   createContext as createContext12,
   useContext as useContext18,
-  useMemo as useMemo25
+  useMemo as useMemo26
 } from "react";
 import { jsx as jsx123 } from "react/jsx-runtime";
 var BankTransactionCustomerVendorVisibilityContext = createContext12({
@@ -19067,18 +19064,18 @@ function BankTransactionCustomerVendorVisibilityProvider({
   children,
   showCustomerVendor
 }) {
-  const value = useMemo25(() => ({ showCustomerVendor }), [showCustomerVendor]);
+  const value = useMemo26(() => ({ showCustomerVendor }), [showCustomerVendor]);
   return /* @__PURE__ */ jsx123(BankTransactionCustomerVendorVisibilityContext.Provider, { value, children });
 }
 
 // src/features/bankTransactions/[bankTransactionId]/tags/components/BankTransactionTagSelector.tsx
-import { useCallback as useCallback24, useMemo as useMemo28 } from "react";
+import { useCallback as useCallback24, useMemo as useMemo29 } from "react";
 
 // src/features/tags/components/TagSelector.tsx
 import {
   useCallback as useCallback21,
   useId as useId3,
-  useMemo as useMemo27
+  useMemo as useMemo28
 } from "react";
 
 // src/features/tags/api/useTagDimensions.ts
@@ -19240,7 +19237,7 @@ var Tag = forwardRef13(
 import { Schema as Schema16 } from "effect";
 
 // src/features/tags/useFlattenedTagValues.ts
-import { useMemo as useMemo26 } from "react";
+import { useMemo as useMemo27 } from "react";
 function flattenDimensionsToValues(dimensions) {
   return dimensions.flatMap(
     ({ id: dimensionId, key: dimensionLabel, definedValues }) => definedValues.map(({ id: valueId, value: valueLabel }) => makeTagValue({
@@ -19252,7 +19249,7 @@ function flattenDimensionsToValues(dimensions) {
   );
 }
 function useFlattenedTagValues(dimensions) {
-  return useMemo26(() => {
+  return useMemo27(() => {
     if (dimensions === void 0) {
       return [];
     }
@@ -19407,7 +19404,7 @@ function TagSelector({
   isReadOnly
 }) {
   const { data, isLoading, isError } = useTagDimensions();
-  const groups = useMemo27(
+  const groups = useMemo28(
     () => {
       var _a;
       return (_a = data == null ? void 0 : data.map(({ key: dimensionLabel, definedValues }) => {
@@ -19447,7 +19444,7 @@ function TagSelector({
     ]
   );
   const inputId = useId3();
-  const EmptyMessage = useMemo27(
+  const EmptyMessage = useMemo28(
     () => /* @__PURE__ */ jsx126(
       Span,
       {
@@ -19458,7 +19455,7 @@ function TagSelector({
     ),
     []
   );
-  const ErrorMessage = useMemo27(
+  const ErrorMessage = useMemo28(
     () => /* @__PURE__ */ jsx126(
       Span,
       {
@@ -19706,7 +19703,7 @@ function BankTransactionTagSelector({ bankTransaction }) {
     id: bankTransactionId,
     transaction_tags: transactionTags
   } = bankTransaction;
-  const selectedTags = useMemo28(
+  const selectedTags = useMemo29(
     () => transactionTags.map(({ id, key, value, _local }) => {
       var _a;
       return makeTag({
@@ -19748,7 +19745,7 @@ function BankTransactionTagSelector({ bankTransaction }) {
 import {
   createContext as createContext13,
   useContext as useContext19,
-  useMemo as useMemo29
+  useMemo as useMemo30
 } from "react";
 import { jsx as jsx128 } from "react/jsx-runtime";
 var BankTransactionTagVisibilityContext = createContext13({
@@ -19761,7 +19758,7 @@ function BankTransactionTagVisibilityProvider({
   children,
   showTags
 }) {
-  const value = useMemo29(() => ({ showTags }), [showTags]);
+  const value = useMemo30(() => ({ showTags }), [showTags]);
   return /* @__PURE__ */ jsx128(BankTransactionTagVisibilityContext.Provider, { value, children });
 }
 
@@ -20022,7 +20019,7 @@ var ExpandedBankTransactionRow = forwardRef15(
                   /* @__PURE__ */ jsx130(
                     "div",
                     {
-                      className: classNames41(
+                      className: classNames42(
                         `${className}__match`,
                         `${className}__content-panel`,
                         purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -20046,7 +20043,7 @@ var ExpandedBankTransactionRow = forwardRef15(
                   /* @__PURE__ */ jsx130(
                     "div",
                     {
-                      className: classNames41(
+                      className: classNames42(
                         `${className}__splits`,
                         `${className}__content-panel`,
                         purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -20229,7 +20226,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import classNames42 from "classnames";
+import classNames43 from "classnames";
 import { parseISO as parseISO9, format as formatTime6 } from "date-fns";
 
 // src/hooks/bookkeeping/periods/useBookkeepingPeriods.ts
@@ -20603,14 +20600,14 @@ var BankTransactionRow = ({
   const { isVisible } = useDelayedVisibility({ delay: index * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames42(
+  const rowClassName = classNames43(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
     initialLoad ? "initial-load" : "",
     isVisible ? "show" : ""
   );
-  const showReceiptDataProperties = useMemo30(
+  const showReceiptDataProperties = useMemo31(
     () => toDataProperties({ "show-receipt-upload-column": showReceiptUploadColumn }),
     [showReceiptUploadColumn]
   );
@@ -20681,7 +20678,7 @@ var BankTransactionRow = ({
       /* @__PURE__ */ jsx137(
         "td",
         {
-          className: classNames42(
+          className: classNames43(
             "Layer__table-cell",
             "Layer__table-cell__category-col",
             `${className}__actions-cell`,
@@ -20864,7 +20861,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionList/BankTransactionListItem.tsx
-import classNames43 from "classnames";
+import classNames44 from "classnames";
 import { parseISO as parseISO11, format as formatTime8 } from "date-fns";
 import { jsx as jsx139, jsxs as jsxs87 } from "react/jsx-runtime";
 var BankTransactionListItem = ({
@@ -20931,7 +20928,7 @@ var BankTransactionListItem = ({
   const categorized = isCategorized(bankTransaction);
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames43(
+  const rowClassName = classNames44(
     className,
     bankTransaction.recently_categorized && editable && shouldHideAfterCategorize() ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -21074,7 +21071,7 @@ var BankTransactionList = ({
 import { useContext as useContext20, useEffect as useEffect19, useRef as useRef19, useState as useState37 } from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-import { useEffect as useEffect16, useMemo as useMemo31, useRef as useRef15, useState as useState31 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo32, useRef as useRef15, useState as useState31 } from "react";
 
 // src/icons/Paperclip.tsx
 import { jsx as jsx141 } from "react/jsx-runtime";
@@ -21104,7 +21101,7 @@ var Paperclip = (_a) => {
 var Paperclip_default = Paperclip;
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-import classNames44 from "classnames";
+import classNames45 from "classnames";
 import { Fragment as Fragment17, jsx as jsx142, jsxs as jsxs88 } from "react/jsx-runtime";
 var BusinessForm = ({
   bankTransaction,
@@ -21125,7 +21122,7 @@ var BusinessForm = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options3 = useMemo31(() => {
+  const options3 = useMemo32(() => {
     var _a;
     const options4 = ((_a = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
@@ -21200,7 +21197,7 @@ var BusinessForm = ({
       /* @__PURE__ */ jsx142(
         "div",
         {
-          className: classNames44(
+          className: classNames45(
             "Layer__bank-transaction-mobile-list-item__receipts",
             hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
           ),
@@ -21275,7 +21272,7 @@ var PersonalCategories = /* @__PURE__ */ ((PersonalCategories2) => {
 })(PersonalCategories || {});
 
 // src/components/BankTransactionMobileList/PersonalForm.tsx
-import classNames45 from "classnames";
+import classNames46 from "classnames";
 import { jsx as jsx143, jsxs as jsxs89 } from "react/jsx-runtime";
 var isAlreadyAssigned = (bankTransaction) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ || (bankTransaction == null ? void 0 : bankTransaction.categorization_status) === "SPLIT" /* SPLIT */) {
@@ -21329,7 +21326,7 @@ var PersonalForm = ({
     /* @__PURE__ */ jsx143(
       "div",
       {
-        className: classNames45(
+        className: classNames46(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21376,7 +21373,7 @@ import { useState as useState35 } from "react";
 
 // src/components/BankTransactionMobileList/MatchForm.tsx
 import { useRef as useRef17, useState as useState33 } from "react";
-import classNames46 from "classnames";
+import classNames47 from "classnames";
 import { jsx as jsx144, jsxs as jsxs90 } from "react/jsx-runtime";
 var MatchForm2 = ({
   bankTransaction,
@@ -21438,7 +21435,7 @@ var MatchForm2 = ({
     /* @__PURE__ */ jsx144(
       "div",
       {
-        className: classNames46(
+        className: classNames47(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21483,7 +21480,7 @@ var MatchForm2 = ({
 
 // src/components/BankTransactionMobileList/SplitForm.tsx
 import { useEffect as useEffect18, useRef as useRef18, useState as useState34 } from "react";
-import classNames47 from "classnames";
+import classNames48 from "classnames";
 import { Fragment as Fragment18, jsx as jsx145, jsxs as jsxs91 } from "react/jsx-runtime";
 var SplitForm = ({
   bankTransaction,
@@ -21656,7 +21653,7 @@ var SplitForm = ({
                 {
                   type: "text",
                   name: `split-${index}`,
-                  className: classNames47(
+                  className: classNames48(
                     "Layer__split-amount-input",
                     index === 0 && "Layer__split-amount-input--first"
                   ),
@@ -21704,7 +21701,7 @@ var SplitForm = ({
     /* @__PURE__ */ jsx145(
       "div",
       {
-        className: classNames47(
+        className: classNames48(
           "Layer__bank-transaction-mobile-list-item__receipts",
           hasReceipts(bankTransaction) ? "Layer__bank-transaction-mobile-list-item__actions--with-receipts" : void 0
         ),
@@ -21855,7 +21852,7 @@ var TransactionToOpenContext = createContext14({
 });
 
 // src/components/BankTransactionMobileList/BankTransactionMobileListItem.tsx
-import classNames48 from "classnames";
+import classNames49 from "classnames";
 import { parseISO as parseISO12, format as formatTime9 } from "date-fns";
 import { jsx as jsx148, jsxs as jsxs93 } from "react/jsx-runtime";
 var DATE_FORMAT2 = "LLL d";
@@ -21960,7 +21957,7 @@ var BankTransactionMobileListItem = ({
   const { isVisible } = useDelayedVisibility({ delay: index * 20, initialVisibility: Boolean(initialLoad) });
   const className = "Layer__bank-transaction-mobile-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames48(
+  const rowClassName = classNames49(
     className,
     removeAnim ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -22093,17 +22090,17 @@ var BankTransactionMobileList = ({
 };
 
 // src/components/BankTransactionsTable/BankTransactionsTable.tsx
-import { useMemo as useMemo32 } from "react";
+import { useMemo as useMemo33 } from "react";
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-import classNames49 from "classnames";
+import classNames50 from "classnames";
 import { jsx as jsx150 } from "react/jsx-runtime";
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = classNames49(
+  const baseClassName = classNames50(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -22116,7 +22113,7 @@ var FallbackWithSkeletonLoader = ({
   children,
   className
 }) => {
-  const baseClassName = classNames49(
+  const baseClassName = classNames50(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
@@ -22219,7 +22216,7 @@ var BankTransactionsLoader = ({
 };
 
 // src/components/SyncingComponent/SyncingComponent.tsx
-import classNames50 from "classnames";
+import classNames51 from "classnames";
 import { jsx as jsx153, jsxs as jsxs95 } from "react/jsx-runtime";
 var SyncingComponent = ({
   title = "Syncing account data",
@@ -22241,7 +22238,7 @@ var SyncingComponent = ({
   return /* @__PURE__ */ jsxs95(
     "div",
     {
-      className: classNames50(
+      className: classNames51(
         "Layer__syncing-component",
         inProgress ? "Layer__syncing-component--with-border" : ""
       ),
@@ -22281,7 +22278,7 @@ var BankTransactionsTable = ({
       return ((_a2 = transaction.document_ids) == null ? void 0 : _a2.length) > 0;
     }
   ))) != null ? _a : false;
-  const showReceiptDataProperties = useMemo32(
+  const showReceiptDataProperties = useMemo33(
     () => toDataProperties({ "show-receipt-upload-column": showReceiptColumn }),
     [showReceiptColumn]
   );
@@ -22389,10 +22386,10 @@ var ErrorBoundary = class extends Component {
 };
 
 // src/components/Pagination/Pagination.tsx
-import classNames51 from "classnames";
+import classNames52 from "classnames";
 
 // src/hooks/usePaginationRange/usePaginationRange.ts
-import { useMemo as useMemo33 } from "react";
+import { useMemo as useMemo34 } from "react";
 var Dots = /* @__PURE__ */ ((Dots2) => {
   Dots2["DotsLeft"] = "DotsLeft";
   Dots2["DotsRight"] = "DotsRight";
@@ -22405,7 +22402,7 @@ var usePaginationRange = ({
   currentPage
 }) => {
   if (pageSize < 1) throw new Error("pageSize must be a positive integer >= 1");
-  const paginationRange = useMemo33(() => {
+  const paginationRange = useMemo34(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     if (totalPageCount === 0) return [];
     const staticRange = siblingCount * 2 + 3;
@@ -22457,7 +22454,7 @@ var Pagination = ({
     return null;
   }
   const lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ jsx157(VStack, { className: classNames51("Layer__pagination-container", className), fluid: true, children: /* @__PURE__ */ jsx157("nav", { "aria-label": "Pagination", className: "Layer__pagination-nav", children: /* @__PURE__ */ jsxs97("ul", { className: "Layer__pagination", role: "list", children: [
+  return /* @__PURE__ */ jsx157(VStack, { className: classNames52("Layer__pagination-container", className), fluid: true, children: /* @__PURE__ */ jsx157("nav", { "aria-label": "Pagination", className: "Layer__pagination-nav", children: /* @__PURE__ */ jsxs97("ul", { className: "Layer__pagination", role: "list", children: [
     /* @__PURE__ */ jsx157("li", { children: /* @__PURE__ */ jsx157(
       PaginationButton,
       {
@@ -22510,7 +22507,7 @@ var Pagination = ({
 
 // src/components/BankTransactions/BankTransactionsHeader.tsx
 import { useCallback as useCallback39, useState as useState46 } from "react";
-import classNames60 from "classnames";
+import classNames61 from "classnames";
 import { endOfMonth as endOfMonth5, startOfMonth as startOfMonth5 } from "date-fns";
 
 // src/components/domain/transactions/actions/TransactionsActions.tsx
@@ -22674,7 +22671,7 @@ import {
   createContext as createContext16,
   useCallback as useCallback26,
   useContext as useContext22,
-  useMemo as useMemo34,
+  useMemo as useMemo35,
   useState as useState38
 } from "react";
 import { jsxs as jsxs99 } from "react/jsx-runtime";
@@ -22735,7 +22732,7 @@ function Wizard({
     onComplete,
     onStepChange
   });
-  const contextValue = useMemo34(() => ({ next, previous, goToStep }), [next, previous, goToStep]);
+  const contextValue = useMemo35(() => ({ next, previous, goToStep }), [next, previous, goToStep]);
   return /* @__PURE__ */ jsxs99(WizardContext.Provider, { value: contextValue, children: [
     Header5,
     currentStep,
@@ -22744,7 +22741,7 @@ function Wizard({
 }
 
 // src/components/UploadTransactions/UploadTransactionsUploadCsvStep.tsx
-import { useCallback as useCallback35, useMemo as useMemo36, useState as useState43 } from "react";
+import { useCallback as useCallback35, useMemo as useMemo37, useState as useState43 } from "react";
 
 // src/hooks/customAccounts/useCustomAccounts.ts
 import useSWR13 from "swr";
@@ -22814,7 +22811,7 @@ import {
   components as components5
 } from "react-select";
 import BaseCreatableSelect from "react-select/creatable";
-import classNames52 from "classnames";
+import classNames53 from "classnames";
 import { jsx as jsx161, jsxs as jsxs100 } from "react/jsx-runtime";
 var CreatableSelect = ({
   name,
@@ -22836,7 +22833,7 @@ var CreatableSelect = ({
   isClearable,
   createOptionPosition = "first"
 }) => {
-  const baseClassName = classNames52(
+  const baseClassName = classNames53(
     "Layer__select",
     isInvalid ? "Layer__select--error" : "",
     className
@@ -22916,13 +22913,13 @@ import {
   TextField as ReactAriaTextField,
   FieldError as ReactAriaFieldError
 } from "react-aria-components";
-import classNames53 from "classnames";
+import classNames54 from "classnames";
 import { jsx as jsx162 } from "react/jsx-runtime";
 var FORM_CLASS_NAME = "Layer__UI__Form";
 var Form = forwardRef17(
   function Form2(_a, ref) {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
-    return /* @__PURE__ */ jsx162(ReactAriaForm, __spreadProps(__spreadValues({}, restProps), { className: classNames53(FORM_CLASS_NAME, className), ref, children }));
+    return /* @__PURE__ */ jsx162(ReactAriaForm, __spreadProps(__spreadValues({}, restProps), { className: classNames54(FORM_CLASS_NAME, className), ref, children }));
   }
 );
 var TEXT_FIELD_CLASS_NAME = "Layer__UI__TextField";
@@ -22930,7 +22927,7 @@ var TextField = forwardRef17(
   function TextField2(_a, ref) {
     var _b = _a, { children, inline, textarea, className } = _b, restProps = __objRest(_b, ["children", "inline", "textarea", "className"]);
     const dataProperties = toDataProperties({ inline, textarea });
-    return /* @__PURE__ */ jsx162(ReactAriaTextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames53(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
+    return /* @__PURE__ */ jsx162(ReactAriaTextField, __spreadProps(__spreadValues(__spreadValues({}, restProps), dataProperties), { className: classNames54(TEXT_FIELD_CLASS_NAME, className), ref, children: withRenderProp(children, (node) => node) }));
   }
 );
 var FIELD_ERROR_CLASS_NAME = "Layer__UI__FieldError";
@@ -22988,7 +22985,7 @@ function BaseFormTextField({
 }
 
 // src/features/forms/components/FormBigDecimalField.tsx
-import { useCallback as useCallback28, useEffect as useEffect20, useMemo as useMemo35, useState as useState39 } from "react";
+import { useCallback as useCallback28, useEffect as useEffect20, useMemo as useMemo36, useState as useState39 } from "react";
 
 // src/components/ui/Input/InputGroup.tsx
 import { forwardRef as forwardRef18 } from "react";
@@ -23137,7 +23134,7 @@ function FormBigDecimalField(_a) {
   const field = useFieldContext();
   const { name, state, handleChange, handleBlur } = field;
   const { value } = state;
-  const formattingProps = useMemo35(() => ({
+  const formattingProps = useMemo36(() => ({
     minDecimalPlaces,
     maxDecimalPlaces,
     mode
@@ -23163,7 +23160,7 @@ function FormBigDecimalField(_a) {
     handleBlur();
     setInputValue(formatBigDecimalToString(clamped, formattingProps));
   }, [inputValue, mode, maxValue, maxDecimalPlaces, value, handleBlur, formattingProps, handleChange]);
-  const allowedChars = useMemo35(
+  const allowedChars = useMemo36(
     () => buildDecimalCharRegex({ allowNegative, allowPercent: mode === "percent", allowDollar: mode === "currency" }),
     [allowNegative, mode]
   );
@@ -23197,7 +23194,7 @@ function FormBigDecimalField(_a) {
 }
 
 // src/features/forms/components/FormCheckboxField.tsx
-import classNames54 from "classnames";
+import classNames55 from "classnames";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var FORM_CHECKBOX_FIELD_CLASSNAME = "Layer__FormCheckboxField";
 function FormCheckboxField({
@@ -23215,7 +23212,7 @@ function FormCheckboxField({
   const errorMessage = errors.length !== 0 ? errors[0] : void 0;
   const tooltipProps = showFieldError ? { tooltip: errorMessage } : {};
   const additionalAriaProps = !showLabel && { "aria-label": label };
-  const checkboxClassNames = classNames54(
+  const checkboxClassNames = classNames55(
     FORM_CHECKBOX_FIELD_CLASSNAME,
     inline && `${FORM_CHECKBOX_FIELD_CLASSNAME}--inline`,
     className
@@ -23243,7 +23240,7 @@ import { useState as useState40, useEffect as useEffect21, useCallback as useCal
 
 // src/components/ui/Date/Date.tsx
 import { forwardRef as forwardRef20 } from "react";
-import classNames55 from "classnames";
+import classNames56 from "classnames";
 import {
   DateField as ReactAriaDateField,
   DateSegment as ReactAriaDateSegment,
@@ -23259,7 +23256,7 @@ var DateField = forwardRef20(
       ReactAriaDateField,
       __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
         isReadOnly,
-        className: classNames55(DATE_FIELD_CLASS_NAME, className),
+        className: classNames56(DATE_FIELD_CLASS_NAME, className),
         ref
       })
     );
@@ -23273,7 +23270,7 @@ var DateInput = forwardRef20(
     return /* @__PURE__ */ jsx168(
       ReactAriaDateInput,
       __spreadProps(__spreadValues(__spreadValues({}, dataProperties), restProps), {
-        className: classNames55(DATE_INPUT_CLASS_NAME),
+        className: classNames56(DATE_INPUT_CLASS_NAME),
         ref
       })
     );
@@ -23666,7 +23663,7 @@ var CustomAccountForm = ({ initialAccountName, onCancel, onSuccess }) => {
 // src/components/CsvUpload/CsvUpload.tsx
 import { useCallback as useCallback34, useRef as useRef21, useState as useState42 } from "react";
 import { useDropzone } from "react-dropzone";
-import classNames56 from "classnames";
+import classNames57 from "classnames";
 import { FileSpreadsheet } from "lucide-react";
 import { jsx as jsx174, jsxs as jsxs104 } from "react/jsx-runtime";
 var VALID_EXTENSIONS = [".csv"];
@@ -23758,7 +23755,7 @@ var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
     /* @__PURE__ */ jsxs104(
       VStack,
       __spreadProps(__spreadValues({
-        className: classNames56(
+        className: classNames57(
           "Layer__csv-upload",
           { "Layer__csv-upload--drag-active": isDragActive }
         ),
@@ -23795,7 +23792,7 @@ var CsvUpload = ({ file, onFileSelected, replaceDropTarget = false }) => {
 };
 
 // src/components/UploadTransactions/UploadTransactionsUploadCsvStep.tsx
-import classNames58 from "classnames";
+import classNames59 from "classnames";
 
 // src/components/Separator/Separator.tsx
 import { jsx as jsx175 } from "react/jsx-runtime";
@@ -23842,14 +23839,14 @@ var DownloadCsvTemplateButton = ({ children, className, csvProps, fileName = "te
 
 // src/components/CsvUpload/CopyTemplateHeadersButtonGroup.tsx
 import { CopyIcon } from "lucide-react";
-import classNames57 from "classnames";
+import classNames58 from "classnames";
 import { jsx as jsx177 } from "react/jsx-runtime";
 var copyTextToClipboard = (text) => {
   navigator.clipboard.writeText(text).catch(() => {
   });
 };
 var CopyTemplateHeadersButtonGroup = ({ headers, className }) => {
-  return /* @__PURE__ */ jsx177(HStack, { gap: "3xs", className: classNames57("Layer__csv-upload__copy-template-headers-button-group", className), children: Object.keys(headers).map((key) => /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsx177(HStack, { gap: "3xs", className: classNames58("Layer__csv-upload__copy-template-headers-button-group", className), children: Object.keys(headers).map((key) => /* @__PURE__ */ jsx177(
     Button,
     {
       onClick: () => copyTextToClipboard(headers[key]),
@@ -23968,7 +23965,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
   } = useCustomAccounts({ userCreated: true });
   const { trigger: parseCsv2, isMutating: isParsingCsv, error: parseCsvError } = useCustomAccountParseCsv();
   const [hasParseCsvError, setHasParseCsvError] = useState43(false);
-  const accountOptions = useMemo36(() => {
+  const accountOptions = useMemo37(() => {
     if (!customAccounts) return [];
     return customAccounts.map((account) => ({
       value: account.id,
@@ -24010,7 +24007,7 @@ function UploadTransactionsUploadCsvStep({ selectedAccount, onSelectAccount, sel
       setHasParseCsvError(true);
     });
   }, [selectedAccount, isCreatingNewAccount, selectedFile, parseCsv2, onParseCsv, next]);
-  const inputClassName = classNames58(
+  const inputClassName = classNames59(
     "Layer__upload-transactions__select-account-name-input",
     !!customAccountsError && "Layer__upload-transactions__select-account-name-input--error"
   );
@@ -24138,8 +24135,8 @@ function useCreateCustomAccountTransactions() {
 }
 
 // src/components/CsvUpload/ValidateCsvTable.tsx
-import { useMemo as useMemo37, useRef as useRef22 } from "react";
-import classNames59 from "classnames";
+import { useMemo as useMemo38, useRef as useRef22 } from "react";
+import classNames60 from "classnames";
 import {
   useReactTable,
   getCoreRowModel,
@@ -24159,7 +24156,7 @@ function ValidateCsvTable({
   formatters: formatters2,
   className
 }) {
-  const columns = useMemo37(
+  const columns = useMemo38(
     () => {
       const columnDefs = [{
         id: "row",
@@ -24182,7 +24179,7 @@ function ValidateCsvTable({
           return /* @__PURE__ */ jsx179(
             "span",
             {
-              className: classNames59(
+              className: classNames60(
                 "Layer__table-cell-content",
                 `${CSS_PREFIX}__cell-content`,
                 !isValid2 && `${CSS_PREFIX}__cell-content--error`
@@ -24206,7 +24203,7 @@ function ValidateCsvTable({
     },
     [headers, formatters2]
   );
-  const state = useMemo37(() => ({
+  const state = useMemo38(() => ({
     sorting: [{ id: "is_valid", desc: false }],
     columnVisibility: {
       ["is_valid"]: false
@@ -24233,7 +24230,7 @@ function ValidateCsvTable({
       (header) => /* @__PURE__ */ jsx179(
         "th",
         {
-          className: classNames59(
+          className: classNames60(
             "Layer__table-header",
             `${CSS_PREFIX}__header-cell`,
             `${CSS_PREFIX}__header-cell--${header.id}`
@@ -24247,7 +24244,7 @@ function ValidateCsvTable({
       /* @__PURE__ */ jsx179(
         "tr",
         {
-          className: classNames59(
+          className: classNames60(
             "Layer__table-row",
             `${CSS_PREFIX}__row`,
             rows.length < MAX_NUM_ROWS && `${CSS_PREFIX}__row--bottom-border`
@@ -24269,7 +24266,7 @@ var ValidateCsvTableRow = ({
 }) => /* @__PURE__ */ jsx179(
   "tr",
   {
-    className: classNames59(
+    className: classNames60(
       "Layer__table-row",
       `${CSS_PREFIX}__row`,
       !row.getValue("is_valid") && `${CSS_PREFIX}__row--error`
@@ -24281,7 +24278,7 @@ var ValidateCsvTableRow = ({
       return /* @__PURE__ */ jsx179(
         "td",
         {
-          className: classNames59(
+          className: classNames60(
             "Layer__table-cell",
             `${CSS_PREFIX}__cell`,
             `${CSS_PREFIX}__cell--${cell.column.columnDef.id}`
@@ -24641,7 +24638,7 @@ var BankTransactionsHeader = ({
   return /* @__PURE__ */ jsxs112(
     Header,
     {
-      className: classNames60(
+      className: classNames61(
         "Layer__bank-transactions__header",
         withDatePicker && "Layer__bank-transactions__header--with-date-picker",
         mobileComponent && listView ? "Layer__bank-transactions__header--mobile" : void 0
@@ -24716,7 +24713,7 @@ var BankTransactionsHeader = ({
 };
 
 // src/components/BankTransactions/BankTransactionsTableEmptyState.tsx
-import { useMemo as useMemo38 } from "react";
+import { useMemo as useMemo39 } from "react";
 
 // src/icons/Inbox.tsx
 import { jsx as jsx186, jsxs as jsxs113 } from "react/jsx-runtime";
@@ -24766,7 +24763,7 @@ function BankTransactionsTableEmptyStates({
   isFiltered,
   isLoadingWithoutData
 }) {
-  const StateComponent = useMemo38(() => {
+  const StateComponent = useMemo39(() => {
     if (isError) {
       return /* @__PURE__ */ jsx187(
         DataState,
@@ -24811,7 +24808,7 @@ function BankTransactionsTableEmptyStates({
 }
 
 // src/components/BankTransactions/BankTransactions.tsx
-import classNames61 from "classnames";
+import classNames62 from "classnames";
 import { jsx as jsx188, jsxs as jsxs114 } from "react/jsx-runtime";
 var COMPONENT_NAME2 = "bank-transactions";
 var BankTransactions = (_a) => {
@@ -24872,7 +24869,7 @@ var BankTransactionsContent = ({
     dateFilterMode
   } = useBankTransactionsContext();
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo39(
+  const isSyncing = useMemo40(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -24917,7 +24914,7 @@ var BankTransactionsContent = ({
   useEffect23(() => {
     setCurrentPage(1);
   }, [filters]);
-  const bankTransactions = useMemo39(() => {
+  const bankTransactions = useMemo40(() => {
     if (isMonthlyViewMode) return data;
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -24957,7 +24954,7 @@ var BankTransactionsContent = ({
   return /* @__PURE__ */ jsxs114(
     Container,
     {
-      className: classNames61(
+      className: classNames62(
         "Layer__Public",
         display === "review" /* review */ ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized"
       ),
@@ -25060,7 +25057,7 @@ import { useContext as useContext28 } from "react";
 import { useContext as useContext26 } from "react";
 
 // src/components/Integrations/IntegrationsQuickbooksItemThumb/IntegrationsQuickbooksItemThumb.tsx
-import { useCallback as useCallback40, useContext as useContext25, useMemo as useMemo40, useState as useState48 } from "react";
+import { useCallback as useCallback40, useContext as useContext25, useMemo as useMemo41, useState as useState48 } from "react";
 
 // src/icons/QuickbooksIcon.tsx
 import { jsx as jsx189, jsxs as jsxs115 } from "react/jsx-runtime";
@@ -25102,10 +25099,10 @@ var BadgeLoader = ({ children, showLoading, variant = "default" }) => {
 };
 
 // src/components/Card/Card.tsx
-import classNames62 from "classnames";
+import classNames63 from "classnames";
 import { jsx as jsx191 } from "react/jsx-runtime";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ jsx191("div", { className: classNames62("Layer__card", className), children });
+  return /* @__PURE__ */ jsx191("div", { className: classNames63("Layer__card", className), children });
 };
 
 // src/contexts/QuickbooksContext/QuickbooksContext.tsx
@@ -25257,7 +25254,7 @@ var IntegrationsQuickbooksItemThumb = () => {
     setHasSynced(true);
     syncFromQuickbooks2();
   }, [syncFromQuickbooks2]);
-  const menuConfig = useMemo40(() => {
+  const menuConfig = useMemo41(() => {
     return [
       {
         name: "Unlink account",
@@ -25509,7 +25506,7 @@ var PNLComparisonContext = createContext18({
 });
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useCallback as useCallback43, useMemo as useMemo41, useState as useState52 } from "react";
+import { useCallback as useCallback43, useMemo as useMemo42, useState as useState52 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var collectSubItems = (item) => {
@@ -25626,7 +25623,7 @@ var useProfitAndLoss = ({
   var _a;
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
   const { start, end } = useGlobalDateRange({ displayMode: rangeDisplayMode });
-  const dateRange = useMemo41(() => ({ startDate: start, endDate: end }), [start, end]);
+  const dateRange = useMemo42(() => ({ startDate: start, endDate: end }), [start, end]);
   const [filters, setFilters] = useState52({
     expenses: void 0,
     revenue: void 0
@@ -25656,7 +25653,7 @@ var useProfitAndLoss = ({
       })
     }));
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo41(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo42(() => {
     var _a2;
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
@@ -25665,9 +25662,7 @@ var useProfitAndLoss = ({
     const revenueTypeFilters = (_a2 = filters["revenue"]) == null ? void 0 : _a2.types;
     const filtered = items.map((x) => {
       if (revenueTypeFilters && revenueTypeFilters.length > 0 && !revenueTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), {
-          hidden: true
-        });
+        return __spreadProps(__spreadValues({}, x), { isHidden: true });
       }
       return x;
     });
@@ -25695,7 +25690,7 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
   }, [data, filters]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo41(() => {
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo42(() => {
     var _a2;
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
@@ -25704,9 +25699,7 @@ var useProfitAndLoss = ({
     const expenseTypeFilters = (_a2 = filters["expenses"]) == null ? void 0 : _a2.types;
     const filtered = items.map((x) => {
       if (expenseTypeFilters && expenseTypeFilters.length > 0 && !expenseTypeFilters.includes(x.type)) {
-        return __spreadProps(__spreadValues({}, x), {
-          hidden: true
-        });
+        return __spreadProps(__spreadValues({}, x), { isHidden: true });
       }
       return x;
     });
@@ -25758,7 +25751,7 @@ var useProfitAndLoss = ({
 };
 
 // src/hooks/useProfitAndLossComparison/useProfitAndLossComparison.tsx
-import { useMemo as useMemo42, useState as useState53 } from "react";
+import { useMemo as useMemo43, useState as useState53 } from "react";
 
 // src/hooks/useProfitAndLossComparison/utils.ts
 import { getMonth, getYear as getYear2, startOfMonth as startOfMonth6, startOfYear as startOfYear4, subMonths as subMonths2, subYears as subYears2 } from "date-fns";
@@ -25918,10 +25911,10 @@ function useProfitAndLossComparison({
   );
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
   const { start, end } = useGlobalDateRange({ displayMode: rangeDisplayMode });
-  const dateRange = useMemo42(() => ({ startDate: start, endDate: end }), [start, end]);
+  const dateRange = useMemo43(() => ({ startDate: start, endDate: end }), [start, end]);
   const isPeriodsSelectEnabled = COMPARE_MODES_SUPPORTING_MULTI_PERIOD.includes(rangeDisplayMode);
   const effectiveComparePeriods = isPeriodsSelectEnabled ? comparePeriods : 1;
-  const compareModeActive = useMemo42(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
+  const compareModeActive = useMemo43(() => effectiveComparePeriods > 1 || selectedCompareOptions.length > 1 || selectedCompareOptions.length === 1 && isNotOnlyNoneTag(selectedCompareOptions), [effectiveComparePeriods, selectedCompareOptions]);
   const setSelectedCompareOptions = (values) => {
     const options3 = values.map(
       (option) => comparisonConfig == null ? void 0 : comparisonConfig.tagComparisonOptions.find(
@@ -25994,10 +25987,10 @@ function useProfitAndLossComparison({
 }
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import { useCallback as useCallback45, useEffect as useEffect25, useMemo as useMemo44, useState as useState55 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect25, useMemo as useMemo45, useState as useState55 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useCallback as useCallback44, useMemo as useMemo43, useState as useState54 } from "react";
+import { useCallback as useCallback44, useMemo as useMemo44, useState as useState54 } from "react";
 import { startOfMonth as startOfMonth7, sub } from "date-fns";
 var getYearMonthKey = (y, m) => {
   return `${y}-${m.toString().padStart(2, "0")}`;
@@ -26040,7 +26033,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
 }) => {
   var _a;
   const [date, setDate] = useState54(currentDate);
-  const { startYear, startMonth, endYear, endMonth } = useMemo43(() => {
+  const { startYear, startMonth, endYear, endMonth } = useMemo44(() => {
     return buildDates({ currentDate: date });
   }, [date]);
   const { data, isLoading, isError, mutate } = useProfitAndLossSummaries({
@@ -26052,7 +26045,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
     tagValues: (_a = tagFilter == null ? void 0 : tagFilter.values) == null ? void 0 : _a.join(","),
     reportingBasis
   });
-  const augmentedData = useMemo43(() => {
+  const augmentedData = useMemo44(() => {
     var _a2;
     const period = buildMonthsArray(sub(date, { years: 1 }), date);
     const map = /* @__PURE__ */ new Map();
@@ -26195,7 +26188,7 @@ var Indicator = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import classNames63 from "classnames";
+import classNames64 from "classnames";
 import {
   add,
   differenceInMonths,
@@ -26297,7 +26290,7 @@ var ProfitAndLossChart = ({
   const { start, end } = useGlobalDateRange({ displayMode: rangeDisplayMode });
   const { setMonth } = useGlobalDateRangeActions();
   const showIndicator = rangeDisplayMode === "monthPicker";
-  const dateRange = useMemo44(() => ({ startDate: start, endDate: end }), [start, end]);
+  const dateRange = useMemo45(() => ({ startDate: start, endDate: end }), [start, end]);
   const [customCursorSize, setCustomCursorSize] = useState55({
     width: 0,
     height: 0,
@@ -26308,7 +26301,7 @@ var ProfitAndLossChart = ({
     start: startOfMonth8(sub2(Date.now(), { months: 11 })),
     end: endOfMonth6(Date.now())
   });
-  const selectionMonth = useMemo44(
+  const selectionMonth = useMemo45(
     () => ({
       year: dateRange.startDate.getFullYear(),
       month: dateRange.startDate.getMonth()
@@ -26320,7 +26313,7 @@ var ProfitAndLossChart = ({
     tagFilter
   });
   const hasLoadedData = !isLoading && data;
-  const hasNonZeroData = useMemo44(() => {
+  const hasNonZeroData = useMemo45(() => {
     return Boolean(
       data == null ? void 0 : data.find(
         (x) => x.income !== 0 || x.costOfGoodsSold !== 0 || x.grossProfit !== 0 || x.operatingExpenses !== 0 || x.profitBeforeTaxes !== 0 || x.taxes !== 0 || x.totalExpenses !== 0 || x.uncategorizedInflows !== 0 || x.uncategorizedOutflows !== 0
@@ -26328,11 +26321,11 @@ var ProfitAndLossChart = ({
     );
   }, [data]);
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo44(
+  const isSyncing = useMemo45(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
-  const loadingValue = useMemo44(() => getLoadingValue(data), [data]);
+  const loadingValue = useMemo45(() => getLoadingValue(data), [data]);
   useEffect25(() => {
     if (hasLoadedData) {
       const foundCurrent = data.find(
@@ -26389,7 +26382,7 @@ var ProfitAndLossChart = ({
     loading: (pnl == null ? void 0 : pnl.isLoading) ? loadingValue : 0,
     loadingExpenses: (pnl == null ? void 0 : pnl.isLoading) ? -loadingValue : 0
   }), [getMonthName, loadingValue, selectionMonth.month, selectionMonth.year]);
-  const dataOrPlaceholderData = useMemo44(() => {
+  const dataOrPlaceholderData = useMemo45(() => {
     var _a;
     if (isLoading || !hasNonZeroData) {
       const loadingData = [];
@@ -26616,7 +26609,7 @@ var ProfitAndLossChart = ({
     /* @__PURE__ */ jsx204(
       ResponsiveContainer,
       {
-        className: classNames63(
+        className: classNames64(
           "Layer__chart-container",
           !hasLoadedData && "Layer__chart-container--loading"
         ),
@@ -26736,7 +26729,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: classNames63(
+                  className: classNames64(
                     "Layer__profit-and-loss-chart__bar--loading",
                     !hasLoadedData && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -26752,7 +26745,7 @@ var ProfitAndLossChart = ({
                   isAnimationActive: barAnimActive,
                   animationDuration: 100,
                   radius: [2, 2, 0, 0],
-                  className: classNames63(
+                  className: classNames64(
                     "Layer__profit-and-loss-chart__bar--loading",
                     !hasLoadedData && "Layer__profit-and-loss-chart__bar--loading-anim"
                   ),
@@ -26920,7 +26913,7 @@ var ProfitAndLossChart = ({
 };
 
 // src/components/ProfitAndLossCompareOptions/ProfitAndLossCompareOptions.tsx
-import { useContext as useContext30, useMemo as useMemo45 } from "react";
+import { useContext as useContext30, useMemo as useMemo46 } from "react";
 import { jsx as jsx205, jsxs as jsxs125 } from "react/jsx-runtime";
 var selectStyles = {
   valueContainer: (styles) => {
@@ -26962,7 +26955,7 @@ var ProfitAndLossCompareOptions = () => {
     comparisonConfig
   } = useContext30(ProfitAndLoss2.ComparisonContext);
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
-  const periods = useMemo45(
+  const periods = useMemo46(
     () => comparePeriods !== 0 ? comparePeriods : 1,
     [comparePeriods]
   );
@@ -27058,7 +27051,7 @@ function DatePickerModeSelector({
 }
 
 // src/providers/GlobalDateStore/useGlobalDateRangePicker.ts
-import { useCallback as useCallback46, useMemo as useMemo46 } from "react";
+import { useCallback as useCallback46, useMemo as useMemo47 } from "react";
 var getAllowedDateRangePickerModes = ({
   allowedDatePickerModes,
   defaultDatePickerMode
@@ -27082,7 +27075,7 @@ function useGlobalDateRangePicker({ displayMode, setDisplayMode }) {
       setDisplayMode(newMode);
     }
   }, [setDisplayMode]);
-  const dateOrDateRange = useMemo46(() => {
+  const dateOrDateRange = useMemo47(() => {
     if (displayMode === "monthPicker") {
       return start;
     }
@@ -27156,7 +27149,7 @@ var ProfitAndLossDatePicker = ({
 import { useCallback as useCallback49, useContext as useContext33, useState as useState57 } from "react";
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import { useMemo as useMemo47 } from "react";
+import { useMemo as useMemo48 } from "react";
 
 // src/config/charts.ts
 var DEFAULT_CHART_COLOR_TYPE = [
@@ -27250,7 +27243,7 @@ var SortArrows = (_a) => {
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import classNames64 from "classnames";
+import classNames65 from "classnames";
 
 // src/components/ui/Typography/MoneyText.tsx
 import { forwardRef as forwardRef22 } from "react";
@@ -27366,7 +27359,7 @@ var DetailedTable = ({
 }) => {
   const buildColClass = (column) => {
     var _a, _b, _c;
-    return classNames64(
+    return classNames65(
       "Layer__sortable-col",
       sidebarScope && ((_a = filters[sidebarScope]) == null ? void 0 : _a.sortBy) === column ? `sort--${(_c = sidebarScope && ((_b = filters[sidebarScope]) == null ? void 0 : _b.sortDirection)) != null ? _c : "desc"}` : ""
     );
@@ -27418,7 +27411,7 @@ var DetailedTable = ({
       return /* @__PURE__ */ jsxs127(
         "tr",
         {
-          className: classNames64(
+          className: classNames65(
             "Layer__profit-and-loss-detailed-table__row",
             hoveredItem && hoveredItem === item.displayName ? "active" : ""
           ),
@@ -27456,7 +27449,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import classNames65 from "classnames";
+import classNames66 from "classnames";
 import {
   PieChart,
   Pie,
@@ -27475,7 +27468,7 @@ var DetailedChart = ({
   isLoading,
   showDatePicker = true
 }) => {
-  const chartData = useMemo47(
+  const chartData = useMemo48(
     () => filteredData.map((x) => {
       if (x.isHidden) {
         return __spreadProps(__spreadValues({}, x), {
@@ -27553,7 +27546,7 @@ var DetailedChart = ({
               return /* @__PURE__ */ jsx211(
                 Cell2,
                 {
-                  className: classNames65(
+                  className: classNames66(
                     "Layer__profit-and-loss-detailed-charts__pie",
                     hoveredItem && active ? "active" : "inactive",
                     entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
@@ -27822,10 +27815,10 @@ var Filters = ({
 };
 
 // src/components/ProfitAndLossDetailReport/ProfitAndLossDetailReport.tsx
-import { useContext as useContext32, useState as useState56, useMemo as useMemo50, useCallback as useCallback48 } from "react";
+import { useContext as useContext32, useState as useState56, useMemo as useMemo51, useCallback as useCallback48 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import { useContext as useContext31, useMemo as useMemo48 } from "react";
+import { useContext as useContext31, useMemo as useMemo49 } from "react";
 
 // src/contexts/LedgerAccountsContext/LedgerAccountsContext.tsx
 import { createContext as createContext20 } from "react";
@@ -27905,7 +27898,7 @@ var DateTime = ({
 };
 
 // src/components/DetailsList/DetailsList.tsx
-import classNames66 from "classnames";
+import classNames67 from "classnames";
 import { jsx as jsx214, jsxs as jsxs131 } from "react/jsx-runtime";
 var DetailsList = ({
   title,
@@ -27914,7 +27907,7 @@ var DetailsList = ({
   titleClassName,
   actions
 }) => {
-  return /* @__PURE__ */ jsxs131("div", { className: classNames66("Layer__details-list", className), children: [
+  return /* @__PURE__ */ jsxs131("div", { className: classNames67("Layer__details-list", className), children: [
     title && /* @__PURE__ */ jsxs131(Header, { className: titleClassName, children: [
       /* @__PURE__ */ jsx214(Heading, { size: "secondary" /* secondary */, children: title }),
       actions && /* @__PURE__ */ jsx214("div", { className: "Layer__details-list__actions", children: actions })
@@ -27946,11 +27939,11 @@ var DetailsListItem = ({
 import {
   forwardRef as forwardRef23
 } from "react";
-import classNames67 from "classnames";
+import classNames68 from "classnames";
 import { jsx as jsx216 } from "react/jsx-runtime";
 var Header4 = forwardRef23(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
-    const baseClassName = classNames67(
+    const baseClassName = classNames68(
       "Layer__header",
       sticky && "Layer__header--sticky",
       rounded && "Layer__header--top-rounded",
@@ -27973,19 +27966,19 @@ var Header4 = forwardRef23(
 Header4.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
-import classNames68 from "classnames";
+import classNames69 from "classnames";
 import { jsx as jsx217 } from "react/jsx-runtime";
 var HeaderRow = ({ className, children, direction, style }) => {
   const dataProps = toDataProperties({ direction });
-  return /* @__PURE__ */ jsx217("div", __spreadProps(__spreadValues({}, dataProps), { className: classNames68("Layer__header__row", className), style, children }));
+  return /* @__PURE__ */ jsx217("div", __spreadProps(__spreadValues({}, dataProps), { className: classNames69("Layer__header__row", className), style, children }));
 };
 
 // src/components/Header/HeaderCol.tsx
-import classNames69 from "classnames";
+import classNames70 from "classnames";
 import { jsx as jsx218 } from "react/jsx-runtime";
 var HeaderCol = ({ className, children, style, noPadding = false }) => {
   const dataProperties = toDataProperties({ "no-padding": noPadding });
-  return /* @__PURE__ */ jsx218("div", __spreadProps(__spreadValues({}, dataProperties), { className: classNames69("Layer__header__col", className), style, children }));
+  return /* @__PURE__ */ jsx218("div", __spreadProps(__spreadValues({}, dataProperties), { className: classNames70("Layer__header__col", className), style, children }));
 };
 
 // src/components/TableBody/TableBody.tsx
@@ -27995,7 +27988,7 @@ var TableBody = ({ children }) => {
 };
 
 // src/components/TableCell/TableCell.tsx
-import classNames70 from "classnames";
+import classNames71 from "classnames";
 import { jsx as jsx220, jsxs as jsxs133 } from "react/jsx-runtime";
 var TableCell = ({
   children,
@@ -28015,7 +28008,7 @@ var TableCell = ({
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = classNames70(
+  const cellClassNames = classNames71(
     "Layer__table-cell",
     (primary || isHeaderCell) && "Layer__table-cell--primary",
     isHeaderCell && "Layer__table-header",
@@ -28058,7 +28051,7 @@ var TableHead = ({ children }) => {
 };
 
 // src/components/TableRow/TableRow.tsx
-import classNames71 from "classnames";
+import classNames72 from "classnames";
 import { Fragment as Fragment24, jsx as jsx222, jsxs as jsxs134 } from "react/jsx-runtime";
 var TableRow = ({
   rowKey,
@@ -28082,7 +28075,7 @@ var TableRow = ({
       handleExpand && handleExpand();
     }
   };
-  const rowClassNames = classNames71([
+  const rowClassNames = classNames72([
     "Layer__table-row",
     !isHeadRow && `Layer__table-row--depth-${depth}`,
     !isHeadRow && `Layer__table-row--variant-${variant}`,
@@ -28105,7 +28098,7 @@ var TableRow = ({
 };
 
 // src/components/Table/Table.tsx
-import classNames72 from "classnames";
+import classNames73 from "classnames";
 import { jsx as jsx223 } from "react/jsx-runtime";
 var Table = ({
   componentName,
@@ -28113,11 +28106,11 @@ var Table = ({
   borderCollapse = "separate",
   bottomSpacing = true
 }) => {
-  const tableWrapperClassNames = classNames72(
+  const tableWrapperClassNames = classNames73(
     "Layer__table-wrapper",
     bottomSpacing && "Layer__table-wrapper--bottom-spacing"
   );
-  const tableClassNames = classNames72(
+  const tableClassNames = classNames73(
     "Layer__table",
     componentName && `Layer__${componentName}__table`,
     borderCollapse && `Layer__table__${borderCollapse}-rows`
@@ -28350,7 +28343,7 @@ var LedgerAccountEntryDetails = ({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t;
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext31(LedgerAccountsContext);
   const { renderInAppLink } = useInAppLinkContext();
-  const { totalDebit, totalCredit } = useMemo48(() => {
+  const { totalDebit, totalCredit } = useMemo49(() => {
     var _a2;
     let totalDebit2 = 0;
     let totalCredit2 = 0;
@@ -28363,10 +28356,10 @@ var LedgerAccountEntryDetails = ({
     });
     return { totalDebit: totalDebit2, totalCredit: totalCredit2 };
   }, [entryData]);
-  const ledgerEntrySource = useMemo48(() => {
+  const ledgerEntrySource = useMemo49(() => {
     return (entryData == null ? void 0 : entryData.source) ? decodeLedgerEntrySource(entryData.source) : void 0;
   }, [entryData == null ? void 0 : entryData.source]);
-  const badgeOrInAppLink = useMemo48(() => {
+  const badgeOrInAppLink = useMemo49(() => {
     var _a2, _b2;
     const badgeContent = (_a2 = ledgerEntrySource == null ? void 0 : ledgerEntrySource.entityName) != null ? _a2 : entryData == null ? void 0 : entryData.entry_type;
     const defaultBadge = /* @__PURE__ */ jsx224(Badge, { children: badgeContent });
@@ -28506,8 +28499,8 @@ var LedgerAccountEntryDetails = ({
 };
 
 // src/components/VirtualizedDataTable/VirtualizedDataTable.tsx
-import { useRef as useRef26, useMemo as useMemo49 } from "react";
-import classNames74 from "classnames";
+import { useRef as useRef26, useMemo as useMemo50 } from "react";
+import classNames75 from "classnames";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import {
   useReactTable as useReactTable2,
@@ -28527,10 +28520,10 @@ import {
   TableBody as ReactAriaTableBody,
   TableHeader as ReactAriaTableHeader
 } from "react-aria-components";
-import classNames73 from "classnames";
+import classNames74 from "classnames";
 import { jsx as jsx225 } from "react/jsx-runtime";
 var CSS_PREFIX2 = "Layer__UI__Table";
-var getClassName = (component, additionalClassNames) => classNames73(`${CSS_PREFIX2}-${component}`, additionalClassNames);
+var getClassName = (component, additionalClassNames) => classNames74(`${CSS_PREFIX2}-${component}`, additionalClassNames);
 var Table2 = forwardRef24(
   (_a, ref) => {
     var _b = _a, { children, className } = _b, restProps = __objRest(_b, ["children", "className"]);
@@ -28644,7 +28637,7 @@ var VirtualizedDataTable = ({
 }) => {
   const { EmptyState: EmptyState2, ErrorState: ErrorState2 } = slots;
   const containerRef = useRef26(null);
-  const renderedTableHeight = useMemo49(() => {
+  const renderedTableHeight = useMemo50(() => {
     if (!data) return height;
     if (!shrinkHeightToFitRows) return height;
     const actualRowCount = data.length;
@@ -28671,7 +28664,7 @@ var VirtualizedDataTable = ({
     getSortedRowModel: getSortedRowModel2()
   });
   const { rows } = table2.getRowModel();
-  const processedData = useMemo49(() => rows.map((r) => r.original), [rows]);
+  const processedData = useMemo50(() => rows.map((r) => r.original), [rows]);
   const isEmptyTable = processedData.length === 0;
   const hasData = processedData.length > 0;
   const rowVirtualizer = useVirtualizer2({
@@ -28692,7 +28685,7 @@ var VirtualizedDataTable = ({
   }
   const virtualItems = rowVirtualizer.getVirtualItems();
   const totalSize = rowVirtualizer.getTotalSize();
-  return /* @__PURE__ */ jsx226("div", { className: `${CSS_PREFIX3}__container`, ref: containerRef, style: { height: renderedTableHeight }, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxs136(Table2, { className: classNames74(CSS_PREFIX3, `Layer__UI__Table__${componentName}`), "aria-label": ariaLabel, children: [
+  return /* @__PURE__ */ jsx226("div", { className: `${CSS_PREFIX3}__container`, ref: containerRef, style: { height: renderedTableHeight }, "aria-label": ariaLabel, children: /* @__PURE__ */ jsxs136(Table2, { className: classNames75(CSS_PREFIX3, `Layer__UI__Table__${componentName}`), "aria-label": ariaLabel, children: [
     /* @__PURE__ */ jsx226(TableHeader, { className: `${CSS_PREFIX3}__header`, style: { height: HEADER_HEIGHT2 }, children: table2.getFlatHeaders().map(
       (header) => {
         var _a;
@@ -28700,7 +28693,7 @@ var VirtualizedDataTable = ({
           Column,
           {
             isRowHeader: (_a = header.column.columnDef.meta) == null ? void 0 : _a.isRowHeader,
-            className: classNames74(
+            className: classNames75(
               `${CSS_PREFIX3}__header-cell`,
               `Layer__UI__Table-Column__${componentName}--${header.id}`
             ),
@@ -28722,7 +28715,7 @@ var VirtualizedDataTable = ({
           children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx226(
             Cell3,
             {
-              className: classNames74(
+              className: classNames75(
                 `${CSS_PREFIX3}__cell`,
                 `Layer__UI__Table-Cell__${componentName}--${cell.column.id}`
               ),
@@ -28809,7 +28802,7 @@ var ProfitAndLossDetailReport = ({
   const { tagFilter, dateRange } = useContext32(ProfitAndLoss2.Context);
   const [selectedSource, setSelectedSource] = useState56(null);
   const { renderInAppLink } = useInAppLinkContext();
-  const badgeOrInAppLink = useMemo50(() => {
+  const badgeOrInAppLink = useMemo51(() => {
     var _a;
     if (!selectedSource) return void 0;
     const defaultBadge = /* @__PURE__ */ jsx229(Badge, { children: selectedSource.entityName });
@@ -28819,7 +28812,7 @@ var ProfitAndLossDetailReport = ({
     const linkingMetadata = convertLedgerEntrySourceToLinkingMetadata(selectedSource);
     return (_a = renderInAppLink(linkingMetadata)) != null ? _a : defaultBadge;
   }, [renderInAppLink, selectedSource]);
-  const dynamicBreadcrumbs = useMemo50(() => {
+  const dynamicBreadcrumbs = useMemo51(() => {
     return breadcrumbPath || [{ name: lineItemName, display_name: lineItemName }];
   }, [breadcrumbPath, lineItemName]);
   const formatDateRange = (startDate, endDate) => {
@@ -28840,7 +28833,7 @@ var ProfitAndLossDetailReport = ({
   const handleBackToList = useCallback48(() => {
     setSelectedSource(null);
   }, []);
-  const rowsWithRunningBalance = useMemo50(() => {
+  const rowsWithRunningBalance = useMemo51(() => {
     if (!(data == null ? void 0 : data.lines)) return { lines: [], total: 0 };
     let runningBalance = 0;
     const linesWithBalance = data.lines.map((line) => {
@@ -28856,7 +28849,7 @@ var ProfitAndLossDetailReport = ({
       total: runningBalance
     };
   }, [data == null ? void 0 : data.lines]);
-  const columnConfig = useMemo50(() => ({
+  const columnConfig = useMemo51(() => ({
     ["Date" /* Date */]: {
       id: "Date" /* Date */,
       header: (stringOverrides == null ? void 0 : stringOverrides.dateColumnHeader) || "Date",
@@ -28887,7 +28880,15 @@ var ProfitAndLossDetailReport = ({
     ["Account" /* Account */]: {
       id: "Account" /* Account */,
       header: (stringOverrides == null ? void 0 : stringOverrides.accountColumnHeader) || "Account",
-      cell: (row) => row.account.name || "-"
+      cell: (row) => /* @__PURE__ */ jsx229(
+        Text,
+        {
+          as: "span",
+          withTooltip: "whenTruncated" /* whenTruncated */,
+          ellipsis: true,
+          children: row.account.name || "-"
+        }
+      )
     },
     ["Description" /* Description */]: {
       id: "Description" /* Description */,
@@ -29177,7 +29178,7 @@ var ProfitAndLossDownloadButton = ({
 };
 
 // src/components/ProfitAndLossHeader/ProfitAndLossHeader.tsx
-import { useMemo as useMemo52 } from "react";
+import { useMemo as useMemo53 } from "react";
 
 // src/components/SyncingBadge/SyncingBadge.tsx
 import { jsx as jsx233 } from "react/jsx-runtime";
@@ -29194,13 +29195,13 @@ var SyncingBadge = () => {
 };
 
 // src/hooks/bookkeeping/periods/useActiveBookkeepingPeriod.ts
-import { useMemo as useMemo51 } from "react";
+import { useMemo as useMemo52 } from "react";
 function useActiveBookkeepingPeriod() {
   const { date } = useGlobalDate();
   const { data, isLoading } = useBookkeepingPeriods();
   const currentMonth = date.getMonth() + 1;
   const currentYear = date.getFullYear();
-  const activePeriod = useMemo51(
+  const activePeriod = useMemo52(
     () => data == null ? void 0 : data.find((period) => currentYear === period.year && currentMonth === period.month),
     [data, currentMonth, currentYear]
   );
@@ -29219,7 +29220,7 @@ var ProfitAndLossHeader = ({
   const { data: linkedAccounts } = useLinkedAccounts();
   const { activePeriod } = useActiveBookkeepingPeriod();
   const activePeriodStatus = activePeriod == null ? void 0 : activePeriod.status;
-  const isSyncing = useMemo52(
+  const isSyncing = useMemo53(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -29234,7 +29235,7 @@ var ProfitAndLossHeader = ({
 };
 
 // src/components/ProfitAndLossReport/ProfitAndLossReport.tsx
-import { useCallback as useCallback50, useContext as useContext36, useMemo as useMemo53, useState as useState60 } from "react";
+import { useCallback as useCallback50, useContext as useContext36, useMemo as useMemo54, useState as useState60 } from "react";
 
 // src/components/ProfitAndLossDetailLinesDownloadButton/ProfitAndLossDetailLinesDownloadButton.tsx
 import { useContext as useContext35 } from "react";
@@ -29376,10 +29377,10 @@ function ProfitAndLossDetailLinesDownloadButton({
 import { forwardRef as forwardRef25 } from "react";
 
 // src/components/ViewHeader/ViewHeader.tsx
-import classNames75 from "classnames";
+import classNames76 from "classnames";
 import { jsx as jsx236, jsxs as jsxs143 } from "react/jsx-runtime";
 var ViewHeader = ({ title, className, children }) => {
-  return /* @__PURE__ */ jsx236("div", { className: classNames75("Layer__view-header", className), children: /* @__PURE__ */ jsxs143("div", { className: "Layer__view-header__content", children: [
+  return /* @__PURE__ */ jsx236("div", { className: classNames76("Layer__view-header", className), children: /* @__PURE__ */ jsxs143("div", { className: "Layer__view-header__content", children: [
     title && /* @__PURE__ */ jsx236(Heading, { className: "Layer__view-header__title", children: title }),
     children && /* @__PURE__ */ jsx236("div", { className: "Layer__view-header__children", children })
   ] }) });
@@ -29387,7 +29388,7 @@ var ViewHeader = ({ title, className, children }) => {
 
 // src/components/Panel/Panel.tsx
 import { useEffect as useEffect27, useState as useState59 } from "react";
-import classNames76 from "classnames";
+import classNames77 from "classnames";
 import { jsx as jsx237, jsxs as jsxs144 } from "react/jsx-runtime";
 var Panel = ({
   children,
@@ -29407,7 +29408,7 @@ var Panel = ({
       setSidebarHeight((_b = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _b.offsetHeight);
     }
   }, [parentRef, (_a = parentRef == null ? void 0 : parentRef.current) == null ? void 0 : _a.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = classNames76(
+  const sidebarClass = classNames77(
     "Layer__panel__sidebar",
     defaultSidebarHeight && "Layer__panel__sidebar--default",
     floating && "Layer__panel__sidebar--floating"
@@ -29415,7 +29416,7 @@ var Panel = ({
   return /* @__PURE__ */ jsxs144(
     "div",
     {
-      className: classNames76(
+      className: classNames77(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -29441,7 +29442,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-import classNames77 from "classnames";
+import classNames78 from "classnames";
 import { jsx as jsx238, jsxs as jsxs145 } from "react/jsx-runtime";
 var View = forwardRef25(
   ({
@@ -29458,7 +29459,7 @@ var View = forwardRef25(
   }, ref) => {
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    const viewClassNames = classNames77(
+    const viewClassNames = classNames78(
       "Layer__view",
       type === "panel" && "Layer__view--panel",
       viewClassName
@@ -29469,7 +29470,7 @@ var View = forwardRef25(
         ViewHeader,
         {
           title,
-          className: classNames77(
+          className: classNames78(
             headerControls ? "Layer__view-header--paddings" : void 0
           ),
           children: header != null ? header : headerControls
@@ -29496,7 +29497,7 @@ var ProfitAndLossReport = ({
   var _a;
   const { comparisonConfig } = useContext36(ProfitAndLoss2.ComparisonContext);
   const [selectedLineItem, setSelectedLineItem] = useState60(null);
-  const breadcrumbIndexMap = useMemo53(() => {
+  const breadcrumbIndexMap = useMemo54(() => {
     if (!selectedLineItem) return {};
     return selectedLineItem.breadcrumbPath.reduce((acc, item, index) => {
       acc[item.name] = index;
@@ -29519,6 +29520,7 @@ var ProfitAndLossReport = ({
   const handleCloseDetailReport = useCallback50(() => {
     setSelectedLineItem(null);
   }, []);
+  const useComparisonPnl = !!comparisonConfig;
   return /* @__PURE__ */ jsx239(InAppLinkProvider, { renderInAppLink, children: /* @__PURE__ */ jsx239(
     View,
     {
@@ -29535,7 +29537,7 @@ var ProfitAndLossReport = ({
                 customDateRanges
               }
             ),
-            view === "desktop" ? /* @__PURE__ */ jsx239(ProfitAndLoss2.CompareOptions, {}) : null
+            view === "desktop" && useComparisonPnl && /* @__PURE__ */ jsx239(ProfitAndLoss2.CompareOptions, {})
           ] }) }),
           /* @__PURE__ */ jsx239(HeaderCol, { children: selectedLineItem ? /* @__PURE__ */ jsx239(
             ProfitAndLossDetailLinesDownloadButton,
@@ -29547,13 +29549,13 @@ var ProfitAndLossReport = ({
             ProfitAndLoss2.DownloadButton,
             {
               stringOverrides: stringOverrides == null ? void 0 : stringOverrides.downloadButton,
-              useComparisonPnl: !!comparisonConfig,
+              useComparisonPnl,
               moneyFormat: csvMoneyFormat,
               view
             }
           ) })
         ] }),
-        view !== "desktop" ? /* @__PURE__ */ jsx239(HeaderRow, { children: /* @__PURE__ */ jsx239(HeaderCol, { children: /* @__PURE__ */ jsx239(ProfitAndLoss2.CompareOptions, {}) }) }) : null
+        view !== "desktop" && useComparisonPnl && /* @__PURE__ */ jsx239(HeaderRow, { children: /* @__PURE__ */ jsx239(HeaderCol, { children: /* @__PURE__ */ jsx239(ProfitAndLoss2.CompareOptions, {}) }) })
       ] }),
       children: selectedLineItem ? /* @__PURE__ */ jsx239(
         ProfitAndLossDetailReport,
@@ -29576,10 +29578,10 @@ var ProfitAndLossReport = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import { useContext as useContext38, useMemo as useMemo56 } from "react";
+import { useContext as useContext38, useMemo as useMemo57 } from "react";
 
 // src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList.tsx
-import { useMemo as useMemo54 } from "react";
+import { useMemo as useMemo55 } from "react";
 import { jsx as jsx240 } from "react/jsx-runtime";
 var LIST_ITEM_CLASS_NAME = "Layer__ProfitAndLossSummariesListItem";
 function ProfitAndLossSummariesListItem({
@@ -29587,7 +29589,7 @@ function ProfitAndLossSummariesListItem({
   isActive,
   onClick
 }) {
-  const dataProperties = useMemo54(
+  const dataProperties = useMemo55(
     () => toDataProperties({ active: isActive, clickable: !!onClick }),
     [isActive]
   );
@@ -29598,7 +29600,7 @@ function ProfitAndLossSummariesList({
   children,
   itemCount
 }) {
-  const dataProperties = useMemo54(
+  const dataProperties = useMemo55(
     () => toDataProperties({ ["column-count"]: itemCount }),
     [itemCount]
   );
@@ -29723,7 +29725,7 @@ function ProfitAndLossSummariesSummary({
 }
 
 // src/views/AccountingOverview/internal/TransactionsToReview.tsx
-import { useContext as useContext37, useMemo as useMemo55 } from "react";
+import { useContext as useContext37, useEffect as useEffect28, useMemo as useMemo56 } from "react";
 import { getMonth as getMonth2, getYear as getYear3, startOfMonth as startOfMonth9 } from "date-fns";
 import { jsx as jsx244, jsxs as jsxs148 } from "react/jsx-runtime";
 var CLASS_NAME13 = "Layer__TransactionsToReview";
@@ -29733,24 +29735,30 @@ function TransactionsToReview({
   tagFilter = void 0,
   variants
 }) {
+  var _a;
   const { size = "sm" } = variants != null ? variants : {};
   const { dateRange: contextDateRange } = useContext37(ProfitAndLoss2.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const { data, isLoading, isError, refetch } = useProfitAndLossLTM({
-    currentDate: dateRange ? dateRange.startDate : startOfMonth9(/* @__PURE__ */ new Date()),
+  const currentDate = useMemo56(() => dateRange ? dateRange.startDate : startOfMonth9(/* @__PURE__ */ new Date()), [dateRange]);
+  const { data, isLoading, isError, refetch, setDate } = useProfitAndLossLTM({
+    currentDate,
     tagFilter
   });
-  const numTransactionsToReview = useMemo55(() => {
-    if (!data || !dateRange) return 0;
+  const activeMonth = useMemo56(() => {
+    if (!data || !dateRange) return void 0;
     const { startDate } = dateRange;
-    const activeMonth = data.find(
+    return data.find(
       (summary) => summary.month - 1 === getMonth2(startDate) && summary.year === getYear3(startDate)
     );
-    if (!activeMonth) return 0;
-    return activeMonth.uncategorizedTransactions;
   }, [data, dateRange]);
-  const hasLoadedData = !isLoading && data;
-  const transactionsToReviewBadge = useMemo55(() => {
+  useEffect28(() => {
+    if (!activeMonth) {
+      setDate(currentDate);
+    }
+  }, [activeMonth, currentDate, setDate]);
+  const hasLoadedData = !isLoading && activeMonth;
+  const numTransactionsToReview = (_a = activeMonth == null ? void 0 : activeMonth.uncategorizedTransactions) != null ? _a : 0;
+  const transactionsToReviewBadge = useMemo56(() => {
     if (!hasLoadedData) {
       return /* @__PURE__ */ jsx244(BadgeLoader, {});
     }
@@ -29828,7 +29836,7 @@ function Internal_ProfitAndLossSummaries({
     setSidebarScope,
     sidebarScope
   } = useContext38(ProfitAndLoss2.Context);
-  const { revenueChartData, expensesChartData } = useMemo56(
+  const { revenueChartData, expensesChartData } = useMemo57(
     () => ({
       revenueChartData: toMiniChartData({ scope: "revenue", data }),
       expensesChartData: toMiniChartData({ scope: "expenses", data })
@@ -29974,7 +29982,7 @@ var TableProvider = ({ children }) => {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-import { Fragment as Fragment28, useContext as useContext40, useEffect as useEffect28, useMemo as useMemo57 } from "react";
+import { Fragment as Fragment28, useContext as useContext40, useEffect as useEffect29, useMemo as useMemo58 } from "react";
 
 // src/hooks/useTableExpandRow/useTableExpandRow.tsx
 import { useContext as useContext39 } from "react";
@@ -30090,7 +30098,7 @@ var mergeComparisonLineItemsAtDepth = (lineItems) => {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-import classNames78 from "classnames";
+import classNames79 from "classnames";
 import { Fragment as Fragment29, jsx as jsx247, jsxs as jsxs150 } from "react/jsx-runtime";
 var ProfitAndLossCompareTable = ({
   stringOverrides
@@ -30105,15 +30113,15 @@ var ProfitAndLossCompareTable = ({
   const { data: bookkeepingPeriods } = useBookkeepingPeriods();
   const rangeDisplayMode = useReportModeWithFallback("ProfitAndLoss" /* ProfitAndLoss */, "monthPicker");
   const { start, end } = useGlobalDateRange({ displayMode: rangeDisplayMode });
-  const dateRange = useMemo57(() => ({ startDate: start, endDate: end }), [start, end]);
-  useEffect28(() => {
+  const dateRange = useMemo58(() => ({ startDate: start, endDate: end }), [start, end]);
+  useEffect29(() => {
     setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
   }, []);
   if (isLoading || comparisonData === void 0) {
     return /* @__PURE__ */ jsx247(
       "div",
       {
-        className: classNames78("Layer__profit-and-loss-table__loader-container"),
+        className: classNames79("Layer__profit-and-loss-table__loader-container"),
         children: /* @__PURE__ */ jsx247(Loader2, {})
       }
     );
@@ -30232,8 +30240,8 @@ var ProfitAndLossCompareTable = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
-import { Fragment as Fragment30, useContext as useContext41, useEffect as useEffect29 } from "react";
-import classNames79 from "classnames";
+import { Fragment as Fragment30, useContext as useContext41, useEffect as useEffect30 } from "react";
+import classNames80 from "classnames";
 import { jsx as jsx248, jsxs as jsxs151 } from "react/jsx-runtime";
 var ProfitAndLossTableComponent = ({
   asContainer,
@@ -30242,14 +30250,14 @@ var ProfitAndLossTableComponent = ({
 }) => {
   const { data, isLoading } = useContext41(ProfitAndLoss2.Context);
   const { isOpen, setIsOpen } = useTableExpandRow();
-  useEffect29(() => {
+  useEffect30(() => {
     setIsOpen(["income", "cost_of_goods_sold", "expenses", "other_activity"]);
   }, []);
   if (isLoading || !data) {
     return /* @__PURE__ */ jsx248(
       "div",
       {
-        className: classNames79(
+        className: classNames80(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         ),
@@ -30595,7 +30603,7 @@ var BalanceSheetExpandAllButton = ({
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import { Fragment as Fragment31, useEffect as useEffect30 } from "react";
+import { Fragment as Fragment31, useEffect as useEffect31 } from "react";
 import { jsx as jsx253, jsxs as jsxs152 } from "react/jsx-runtime";
 var BalanceSheetTable = ({
   data,
@@ -30604,12 +30612,12 @@ var BalanceSheetTable = ({
 }) => {
   const { isOpen, setIsOpen, expandedAllRows } = useTableExpandRow();
   const allRowKeys = [];
-  useEffect30(() => {
+  useEffect31(() => {
     if (expandedAllRows) {
       setIsOpen(allRowKeys, true);
     }
   }, [expandedAllRows]);
-  useEffect30(() => {
+  useEffect31(() => {
     setIsOpen(["assets"]);
   }, []);
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
@@ -31247,7 +31255,7 @@ var ChartOfAccountsContext = createContext23(
 );
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useEffect as useEffect31, useState as useState63 } from "react";
+import { useEffect as useEffect32, useState as useState63 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -31910,12 +31918,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     }
   };
   const refetch = () => mutate();
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       void refetch();
     }
@@ -31947,13 +31955,13 @@ import { useSWRConfig as useSWRConfig6 } from "swr";
 import { useCallback as useCallback52 } from "react";
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useEffect as useEffect32, useState as useState64, useMemo as useMemo59, useCallback as useCallback54 } from "react";
+import { useEffect as useEffect33, useState as useState64, useMemo as useMemo60, useCallback as useCallback54 } from "react";
 import useSWR18 from "swr";
 
 // src/features/ledger/accounts/[ledgerAccountId]/api/useListLedgerAccountLines.ts
 import useSWRInfinite4 from "swr/infinite";
 var import_lodash8 = __toESM(require_lodash2());
-import { useCallback as useCallback53, useMemo as useMemo58 } from "react";
+import { useCallback as useCallback53, useMemo as useMemo59 } from "react";
 var LIST_LEDGER_ACCOUNT_LINES_TAG_KEY = "#list-ledger-account-lines";
 var listLedgerAccountLines = get(({
   businessId,
@@ -32111,11 +32119,11 @@ var useLedgerAccounts = (showReversalEntries = false) => {
     limit: 150
   });
   const shouldFetch = Boolean(selectedAccountId);
-  const data = useMemo59(() => {
+  const data = useMemo60(() => {
     if (!paginatedData || !shouldFetch) return void 0;
     return paginatedData.flatMap((page) => page.data);
   }, [paginatedData, shouldFetch, showReversalEntries]);
-  const hasMore = useMemo59(() => {
+  const hasMore = useMemo60(() => {
     var _a, _b;
     if (!shouldFetch || !paginatedData || paginatedData.length === 0) return false;
     const lastPage = paginatedData[paginatedData.length - 1];
@@ -32145,15 +32153,15 @@ var useLedgerAccounts = (showReversalEntries = false) => {
     setSelectedEntryId(void 0);
     void mutateEntryData();
   };
-  const queryKey = useMemo59(() => {
+  const queryKey = useMemo60(() => {
     return businessId && selectedAccountId && (auth == null ? void 0 : auth.access_token) && `ledger-accounts-lines-${businessId}-${selectedAccountId}`;
   }, [businessId, selectedAccountId, auth == null ? void 0 : auth.access_token]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && shouldFetch && (paginationIsLoading || paginationIsValidating)) {
       read("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */, queryKey);
     }
   }, [paginationIsLoading, paginationIsValidating, shouldFetch]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && shouldFetch && hasBeenTouched(queryKey)) {
       void refetch();
     }
@@ -32243,13 +32251,13 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import { useContext as useContext44, useMemo as useMemo61 } from "react";
+import { useContext as useContext44, useMemo as useMemo62 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-import { useMemo as useMemo60 } from "react";
+import { useMemo as useMemo61 } from "react";
 var useParentOptions = (data) => {
   var _a;
-  return useMemo60(
+  return useMemo61(
     () => flattenAccounts((data == null ? void 0 : data.accounts) || []).sort((a, b) => (a == null ? void 0 : a.name) && (b == null ? void 0 : b.name) ? a.name.localeCompare(b.name) : 0).map((x) => {
       return {
         label: x.name,
@@ -32276,7 +32284,7 @@ var ChartOfAccountsForm = ({
     apiError
   } = useContext44(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = useMemo61(() => {
+  const entry = useMemo62(() => {
     if ((form == null ? void 0 : form.action) === "edit" && form.accountId) {
       return flattenAccounts((data == null ? void 0 : data.accounts) || []).find(
         (x) => x.id === form.accountId
@@ -32489,7 +32497,7 @@ var ChartOfAccountsSidebar = ({
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import { Fragment as Fragment35, useContext as useContext45, useEffect as useEffect33, useMemo as useMemo62, useState as useState65 } from "react";
+import { Fragment as Fragment35, useContext as useContext45, useEffect as useEffect34, useMemo as useMemo63, useState as useState65 } from "react";
 
 // src/icons/Edit2.tsx
 import { jsx as jsx264 } from "react/jsx-runtime";
@@ -32713,8 +32721,8 @@ var ChartOfAccountsTableContent = ({
   const { editAccount, deleteAccount } = useContext45(ChartOfAccountsContext);
   const [toggledKeys, setToggledKeys] = useState65({});
   const [accountToDelete, setAccountToDelete] = useState65(null);
-  const sortedAccounts = useMemo62(() => sortAccountsRecursive(data.accounts), [data.accounts]);
-  const allRowKeys = useMemo62(() => {
+  const sortedAccounts = useMemo63(() => sortAccountsRecursive(data.accounts), [data.accounts]);
+  const allRowKeys = useMemo63(() => {
     const keys = [];
     const collect = (accounts) => {
       for (const account of accounts) {
@@ -32728,7 +32736,7 @@ var ChartOfAccountsTableContent = ({
     collect(data.accounts);
     return keys;
   }, [data.accounts]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (expandAll === void 0) return;
     setToggledKeys(
       Object.fromEntries(
@@ -32752,10 +32760,10 @@ var ChartOfAccountsTableContent = ({
     }
     return "This account cannot be deleted because it is a required account";
   };
-  useEffect33(() => {
+  useEffect34(() => {
     setToggledKeys({});
   }, [searchQuery]);
-  const filteredAccounts = useMemo62(() => {
+  const filteredAccounts = useMemo63(() => {
     if (!searchQuery) return sortedAccounts;
     return filterAccounts(sortedAccounts, searchQuery.toLowerCase());
   }, [searchQuery, sortedAccounts]);
@@ -33129,13 +33137,13 @@ var ChartOfAccountsTableWithPanel = ({
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
 import {
   useContext as useContext48,
-  useMemo as useMemo64,
+  useMemo as useMemo65,
   useState as useState67
 } from "react";
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import { useContext as useContext47, useMemo as useMemo63 } from "react";
-import classNames80 from "classnames";
+import { useContext as useContext47, useMemo as useMemo64 } from "react";
+import classNames81 from "classnames";
 import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
 import { jsx as jsx268, jsxs as jsxs163 } from "react/jsx-runtime";
 var LedgerAccountRow = ({
@@ -33146,14 +33154,14 @@ var LedgerAccountRow = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext47(LedgerAccountsContext);
-  const ledgerEntrySource = useMemo63(() => {
+  const ledgerEntrySource = useMemo64(() => {
     return row.source ? decodeLedgerEntrySource(row.source) : void 0;
   }, [row.source]);
   if (view === "tablet") {
     return /* @__PURE__ */ jsxs163(
       "tr",
       {
-        className: classNames80(
+        className: classNames81(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active"
         ),
@@ -33192,7 +33200,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ jsx268(
       "tr",
       {
-        className: classNames80(
+        className: classNames81(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active"
         ),
@@ -33242,7 +33250,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ jsxs163(
     "tr",
     {
-      className: classNames80(
+      className: classNames81(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active"
       ),
@@ -33268,7 +33276,7 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames81 from "classnames";
+import classNames82 from "classnames";
 import { Fragment as Fragment38, jsx as jsx269, jsxs as jsxs164 } from "react/jsx-runtime";
 var LedgerAccount = ({
   containerRef,
@@ -33291,12 +33299,12 @@ var LedgerAccount = ({
     hasMore,
     fetchMore
   } = useContext48(LedgerAccountsContext);
-  const baseClassName = classNames81(
+  const baseClassName = classNames82(
     "Layer__ledger-account__index",
     selectedAccount && "open"
   );
   const nodeType = selectedAccount == null ? void 0 : selectedAccount.nodeType;
-  const data = useMemo64(() => {
+  const data = useMemo65(() => {
     var _a2;
     if (!rawData) return void 0;
     const firstPageIndex = (currentPage - 1) * pageSize;
@@ -33502,12 +33510,12 @@ var JournalContext = createContext24({
 });
 
 // src/hooks/useJournal/useJournal.tsx
-import { useState as useState68, useMemo as useMemo66, useCallback as useCallback56 } from "react";
+import { useState as useState68, useMemo as useMemo67, useCallback as useCallback56 } from "react";
 
 // src/features/ledger/entries/api/useListLedgerEntries.ts
 import useSWRInfinite5 from "swr/infinite";
 var import_lodash9 = __toESM(require_lodash2());
-import { useCallback as useCallback55, useMemo as useMemo65 } from "react";
+import { useCallback as useCallback55, useMemo as useMemo66 } from "react";
 var LIST_LEDGER_ENTRIES_TAG_KEY = "#list-ledger-entries";
 var listLedgerEntries = get(({ businessId, sort_by, sort_order, cursor, limit, show_total_count }) => {
   const parameters = toDefinedSearchParameters({
@@ -33621,11 +33629,11 @@ var useJournal = () => {
     sort_order: "DESC",
     limit: 150
   });
-  const data = useMemo66(() => {
+  const data = useMemo67(() => {
     if (!paginatedData) return void 0;
     return paginatedData.flatMap((page) => page.data);
   }, [paginatedData]);
-  const hasMore = useMemo66(() => {
+  const hasMore = useMemo67(() => {
     var _a, _b;
     if (paginatedData && paginatedData.length > 0) {
       const lastPage = paginatedData[paginatedData.length - 1];
@@ -33882,13 +33890,13 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTableWithPanel.tsx
-import { useContext as useContext55, useMemo as useMemo69, useState as useState70 } from "react";
+import { useContext as useContext55, useMemo as useMemo70, useState as useState70 } from "react";
 
 // src/components/JournalSidebar/JournalSidebar.tsx
 import { useContext as useContext53 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import { useContext as useContext50, useMemo as useMemo67, useState as useState69 } from "react";
+import { useContext as useContext50, useMemo as useMemo68, useState as useState69 } from "react";
 import { jsx as jsx271, jsxs as jsxs165 } from "react/jsx-runtime";
 var JournalEntryDetails = () => {
   var _a, _b;
@@ -33904,16 +33912,16 @@ var JournalEntryDetails = () => {
   const { renderInAppLink } = useInAppLinkContext();
   const [reverseEntryProcessing, setReverseEntryProcessing] = useState69(false);
   const [reverseEntryError, setReverseEntryError] = useState69();
-  const entry = useMemo67(() => {
+  const entry = useMemo68(() => {
     if (selectedEntryId && data) {
       return data.find((x) => x.id === selectedEntryId);
     }
     return;
   }, [data, selectedEntryId]);
-  const ledgerEntrySource = useMemo67(() => {
+  const ledgerEntrySource = useMemo68(() => {
     return (entry == null ? void 0 : entry.source) ? decodeLedgerEntrySource(entry.source) : void 0;
   }, [entry == null ? void 0 : entry.source]);
-  const badgeOrInAppLink = useMemo67(() => {
+  const badgeOrInAppLink = useMemo68(() => {
     var _a2, _b2;
     const badgeContent = (_a2 = ledgerEntrySource == null ? void 0 : ledgerEntrySource.entityName) != null ? _a2 : entry == null ? void 0 : entry.entry_type;
     const defaultBadge = /* @__PURE__ */ jsx271(Badge, { children: badgeContent });
@@ -33923,7 +33931,7 @@ var JournalEntryDetails = () => {
     const linkingMetadata = convertLedgerEntrySourceToLinkingMetadata(ledgerEntrySource);
     return (_b2 = renderInAppLink(linkingMetadata)) != null ? _b2 : defaultBadge;
   }, [renderInAppLink, entry == null ? void 0 : entry.entry_type, ledgerEntrySource]);
-  const sortedLineItems = useMemo67(
+  const sortedLineItems = useMemo68(
     () => {
       var _a2;
       return (_a2 = entry == null ? void 0 : entry.line_items) == null ? void 0 : _a2.sort(
@@ -34107,7 +34115,7 @@ var JournalEntryDetails = () => {
 import { useContext as useContext52 } from "react";
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-import { useContext as useContext51, useMemo as useMemo68 } from "react";
+import { useContext as useContext51, useMemo as useMemo69 } from "react";
 import { Fragment as Fragment39, jsx as jsx272, jsxs as jsxs166 } from "react/jsx-runtime";
 function recursiveFlattenCategories(accounts) {
   const flattenedResult = accounts.flatMap((a) => {
@@ -34129,7 +34137,7 @@ var JournalFormEntryLines = ({
 }) => {
   const { data: categories } = useCategories({ mode: "ALL" });
   const { form } = useContext51(JournalContext);
-  const { flattenedCategories, parentOptions } = useMemo68(() => {
+  const { flattenedCategories, parentOptions } = useMemo69(() => {
     const flattenedCategories2 = recursiveFlattenCategories(categories != null ? categories : []);
     const parentOptions2 = [...flattenedCategories2].sort((a, b) => a.display_name.localeCompare(b.display_name)).map((account) => {
       switch (account.type) {
@@ -34723,7 +34731,7 @@ var JournalTableWithPanel = ({
     hasMore,
     fetchMore
   } = useContext55(JournalContext);
-  const data = useMemo69(
+  const data = useMemo70(
     () => {
       if (!rawData) return void 0;
       const firstPageIndex = (currentPage - 1) * pageSize;
@@ -34869,7 +34877,7 @@ var TasksHeader = ({
 };
 
 // src/components/Tasks/TasksList.tsx
-import { useCallback as useCallback63, useEffect as useEffect35, useMemo as useMemo72, useRef as useRef28 } from "react";
+import { useCallback as useCallback63, useEffect as useEffect36, useMemo as useMemo73, useRef as useRef28 } from "react";
 
 // src/icons/SmileIcon.tsx
 import { jsx as jsx280, jsxs as jsxs171 } from "react/jsx-runtime";
@@ -34928,8 +34936,8 @@ var SmileIcon = (_a) => {
 var SmileIcon_default = SmileIcon;
 
 // src/components/Tasks/TasksListItem.tsx
-import { forwardRef as forwardRef26, useCallback as useCallback61, useEffect as useEffect34, useMemo as useMemo70, useState as useState71 } from "react";
-import classNames82 from "classnames";
+import { forwardRef as forwardRef26, useCallback as useCallback61, useEffect as useEffect35, useMemo as useMemo71, useState as useState71 } from "react";
+import classNames83 from "classnames";
 
 // src/utils/bookkeeping/tasks/getBookkeepingTaskStatusIcon.tsx
 import { jsx as jsx281 } from "react/jsx-runtime";
@@ -35260,20 +35268,20 @@ var TasksListItem = forwardRef26(({ task, defaultOpen, onExpandTask }, ref) => {
   const { trigger: handleUploadDocumentsForTask } = useUploadDocumentsForTask();
   const { trigger: handleDeleteUploadsOnTask } = useDeleteUploadsOnTask();
   const { trigger: handleUpdateTaskUploadDescription } = useUpdateTaskUploadDescription();
-  const taskBodyClassName = classNames82(
+  const taskBodyClassName = classNames83(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isCompletedTask(task) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = classNames82(
+  const taskHeadClassName = classNames83(
     "Layer__tasks-list-item__head-info",
     isCompletedTask(task) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = classNames82(
+  const taskItemClassName = classNames83(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
-  useEffect34(() => {
+  useEffect35(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
   const submit = () => __async(null, null, function* () {
@@ -35292,7 +35300,7 @@ var TasksListItem = forwardRef26(({ task, defaultOpen, onExpandTask }, ref) => {
     setIsOpen(!isOpen);
     onExpandTask == null ? void 0 : onExpandTask(!isOpen);
   }, [isOpen, onExpandTask]);
-  const uploadDocumentAction = useMemo70(() => {
+  const uploadDocumentAction = useMemo71(() => {
     if (task.user_response_type === "UPLOAD_DOCUMENT") {
       if (task.status === "TODO") {
         if (!selectedFiles) {
@@ -35420,13 +35428,13 @@ var TasksListItem = forwardRef26(({ task, defaultOpen, onExpandTask }, ref) => {
 TasksListItem.displayName = "TasksListItem";
 
 // src/components/MobilePanel/MobilePanel.tsx
-import classNames83 from "classnames";
+import classNames84 from "classnames";
 import { createPortal } from "react-dom";
 import { jsx as jsx283, jsxs as jsxs173 } from "react/jsx-runtime";
 var MobilePanel = ({ header, children, open, onClose, className }) => {
   const dataProperties = toDataProperties({ open });
   return createPortal(
-    /* @__PURE__ */ jsxs173("div", __spreadProps(__spreadValues({ className: classNames83("Layer__Portal Layer__mobile-panel", className) }, dataProperties), { children: [
+    /* @__PURE__ */ jsxs173("div", __spreadProps(__spreadValues({ className: classNames84("Layer__Portal Layer__mobile-panel", className) }, dataProperties), { children: [
       /* @__PURE__ */ jsxs173("div", { className: "Layer__mobile-panel__header", children: [
         /* @__PURE__ */ jsx283(BackButton, { onClick: onClose }),
         header && /* @__PURE__ */ jsx283("div", { className: "Layer__mobile-panel__header__content", children: header })
@@ -35497,12 +35505,12 @@ var TasksListMobile = ({
 };
 
 // src/hooks/array/usePaginatedList.ts
-import { useCallback as useCallback62, useMemo as useMemo71, useState as useState73 } from "react";
+import { useCallback as useCallback62, useMemo as useMemo72, useState as useState73 } from "react";
 function usePaginatedList(list, pageSize) {
   const [internalPageIndex, setInternalPageIndex] = useState73(0);
   const pageCount = Math.max(0, Math.ceil(list.length / pageSize));
   const effectivePageIndex = Math.max(0, Math.min(internalPageIndex, pageCount - 1));
-  const pageItems = useMemo71(() => {
+  const pageItems = useMemo72(() => {
     return list.slice(
       effectivePageIndex * pageSize,
       (effectivePageIndex + 1) * pageSize
@@ -35565,12 +35573,12 @@ var TasksList = ({ pageSize = 8, mobile }) => {
     };
     requestAnimationFrameRef.current = requestAnimationFrame(scrollNow);
   }, []);
-  useEffect35(() => {
+  useEffect36(() => {
     return () => {
       if (requestAnimationFrameRef.current !== null) cancelAnimationFrame(requestAnimationFrameRef.current);
     };
   }, []);
-  const sortedTasks = useMemo72(() => {
+  const sortedTasks = useMemo73(() => {
     var _a;
     const tasksInPeriod = (_a = activePeriod == null ? void 0 : activePeriod.tasks) != null ? _a : [];
     return tasksInPeriod.sort((taskA, taskB) => {
@@ -35627,7 +35635,7 @@ var TasksList = ({ pageSize = 8, mobile }) => {
 // src/components/Tasks/TasksPending.tsx
 import { Cell as Cell5, Pie as Pie3, PieChart as PieChart3 } from "recharts";
 import { format as format7 } from "date-fns";
-import classNames84 from "classnames";
+import classNames85 from "classnames";
 
 // src/components/BookkeepingStatus/BookkeepingStatusDescription.tsx
 import { jsx as jsx286 } from "react/jsx-runtime";
@@ -35658,7 +35666,7 @@ var TasksPending = () => {
       value: incompleteTaskCount
     }
   ];
-  const taskStatusClassName = classNames84(
+  const taskStatusClassName = classNames85(
     completedTaskCount > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ jsxs176("div", { className: "Layer__tasks-pending", children: [
@@ -35717,7 +35725,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/TasksMonthSelector.tsx
-import { useMemo as useMemo73 } from "react";
+import { useMemo as useMemo74 } from "react";
 import { format as format8, getMonth as getMonth3, getYear as getYear4, set } from "date-fns";
 
 // src/components/Tasks/TaskStatusBadge.tsx
@@ -35819,7 +35827,7 @@ function useActiveYearBookkeepingPeriods() {
   const { date } = useGlobalDate();
   const { data } = useBookkeepingPeriods();
   const activeYear = getYear4(date);
-  const periodsInActiveYear = useMemo73(() => {
+  const periodsInActiveYear = useMemo74(() => {
     return data == null ? void 0 : data.filter((period) => period.year === activeYear);
   }, [data, activeYear]);
   return { periodsInActiveYear };
@@ -35830,7 +35838,7 @@ function TasksMonthSelector() {
   const { periodsInActiveYear } = useActiveYearBookkeepingPeriods();
   const activeMonthNumber = getMonth3(date) + 1;
   const activeYear = getYear4(date);
-  const monthsData = useMemo73(() => {
+  const monthsData = useMemo74(() => {
     return Array.from({ length: 12 }, (_, index) => {
       var _a, _b;
       const date2 = set(
@@ -35877,13 +35885,13 @@ function TasksMonthSelector() {
 import pluralize4 from "pluralize";
 
 // src/hooks/bookkeeping/periods/useBookkeepingYearsStatus.ts
-import { useMemo as useMemo74 } from "react";
+import { useMemo as useMemo75 } from "react";
 import { getYear as getYear5 } from "date-fns";
 var useBookkeepingYearsStatus = () => {
   const { business } = useLayerContext();
   const activationDate = getActivationDate(business);
   const { data, isLoading } = useBookkeepingPeriods();
-  const yearStatuses = useMemo74(() => {
+  const yearStatuses = useMemo75(() => {
     const startYear = getYear5(activationDate != null ? activationDate : /* @__PURE__ */ new Date());
     const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
     const count = currentYear - startYear + 1;
@@ -35898,7 +35906,7 @@ var useBookkeepingYearsStatus = () => {
       };
     }).filter(({ year }) => data == null ? void 0 : data.some((period) => period.year === year)).sort((a, b) => b.year - a.year);
   }, [activationDate, data]);
-  const earliestIncompletePeriod = useMemo74(
+  const earliestIncompletePeriod = useMemo75(
     () => [...data != null ? data : []].sort((a, b) => {
       if (a.year === b.year) {
         return b.month - a.month;
@@ -36041,10 +36049,10 @@ var TasksPanelNotification = ({
 };
 
 // src/components/Tasks/TasksYearsTabs.tsx
-import { useMemo as useMemo75 } from "react";
+import { useMemo as useMemo76 } from "react";
 
 // src/components/Tabs/Tabs.tsx
-import { useEffect as useEffect36, useState as useState74 } from "react";
+import { useEffect as useEffect37, useState as useState74 } from "react";
 
 // src/components/Tabs/Tab.tsx
 import { jsx as jsx293, jsxs as jsxs181 } from "react/jsx-runtime";
@@ -36106,7 +36114,7 @@ var Tab = ({
 };
 
 // src/components/Tabs/Tabs.tsx
-import classNames85 from "classnames";
+import classNames86 from "classnames";
 import { jsx as jsx294, jsxs as jsxs182 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 var STARTING_PADDING = 12;
@@ -36115,7 +36123,7 @@ var Tabs = ({ name, options: options3, selected, onChange }) => {
   const [thumbPos, setThumbPos] = useState74({ left: 0, width: 0 });
   const [currentWidth, setCurrentWidth] = useState74(0);
   const selectedValue = selected || options3[0].value;
-  const baseClassName = classNames85(
+  const baseClassName = classNames86(
     "Layer__tabs",
     initialized && "Layer__tabs--initialized"
   );
@@ -36148,14 +36156,14 @@ var Tabs = ({ name, options: options3, selected, onChange }) => {
     shift2 = shift2 + STARTING_PADDING;
     setThumbPos({ left: shift2, width });
   };
-  useEffect36(() => {
+  useEffect37(() => {
     const selectedIndex = getSelectedIndex();
     updateSelectPosition(selectedIndex);
     setTimeout(() => {
       setInitialized(true);
     }, 400);
   }, []);
-  useEffect36(() => {
+  useEffect37(() => {
     const selectedIndex = getSelectedIndex();
     updateSelectPosition(selectedIndex);
   }, [selectedValue, currentWidth]);
@@ -36203,7 +36211,7 @@ var TasksYearsTabs = () => {
       yearNumber: Number(year)
     });
   };
-  const yearsList = useMemo75(() => {
+  const yearsList = useMemo76(() => {
     return yearStatuses == null ? void 0 : yearStatuses.sort((a, b) => a.year - b.year).map((y) => {
       return {
         value: `${y.year}`,
@@ -37706,10 +37714,10 @@ function BookkeepingProfitAndLossSummariesContainer({
 }
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import classNames86 from "classnames";
+import classNames87 from "classnames";
 
 // src/views/BookkeepingOverview/useKeepInMobileViewport.tsx
-import { useEffect as useEffect37, useRef as useRef29 } from "react";
+import { useEffect as useEffect38, useRef as useRef29 } from "react";
 var TASKS_MOBILE_VIEWPORT_WIDTH = 1100;
 var useKeepInMobileViewport = () => {
   const upperContentRef = useRef29(null);
@@ -37717,7 +37725,7 @@ var useKeepInMobileViewport = () => {
   const lastKnownSizeRef = useRef29(null);
   const lastKnownTargetPositionRef = useRef29(null);
   const upperElementInFocus = useRef29(false);
-  useEffect37(() => {
+  useEffect38(() => {
     if (!upperContentRef.current || !targetElementRef.current) return;
     lastKnownSizeRef.current = upperContentRef.current.getBoundingClientRect().height;
     lastKnownTargetPositionRef.current = targetElementRef.current.getBoundingClientRect().top;
@@ -37866,7 +37874,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ jsx317(
             Container,
             {
-              name: classNames86(
+              name: classNames87(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -37883,7 +37891,7 @@ var BookkeepingOverview = ({
           /* @__PURE__ */ jsx317(
             Container,
             {
-              name: classNames86(
+              name: classNames87(
                 "bookkeeping-overview-profit-and-loss-chart",
                 pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
               ),
@@ -37905,7 +37913,7 @@ var BookkeepingOverview = ({
 
 // src/views/AccountingOverview/AccountingOverview.tsx
 import { useState as useState78 } from "react";
-import classNames87 from "classnames";
+import classNames88 from "classnames";
 import { jsx as jsx318, jsxs as jsxs199 } from "react/jsx-runtime";
 var AccountingOverview = ({
   title = "Accounting overview",
@@ -37994,7 +38002,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ jsx318(
                 Container,
                 {
-                  name: classNames87(
+                  name: classNames88(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),
@@ -38012,7 +38020,7 @@ var AccountingOverview = ({
               /* @__PURE__ */ jsx318(
                 Container,
                 {
-                  name: classNames87(
+                  name: classNames88(
                     "accounting-overview-profit-and-loss-chart",
                     pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
                   ),
@@ -38267,7 +38275,7 @@ var ProjectProfitabilityView = ({
 import { createContext as createContext25, useContext as useContext59 } from "react";
 
 // src/hooks/useBills.tsx
-import { useMemo as useMemo76, useState as useState81 } from "react";
+import { useMemo as useMemo77, useState as useState81 } from "react";
 import { endOfMonth as endOfMonth12, startOfMonth as startOfMonth15, sub as sub3 } from "date-fns";
 import useSWRInfinite6 from "swr/infinite";
 var PAGE_SIZE = 20;
@@ -38338,24 +38346,24 @@ var useBills = () => {
       revalidateFirstPage: false
     }
   );
-  const data = useMemo76(() => {
+  const data = useMemo77(() => {
     if (rawResponseData && rawResponseData.length > 0) {
       return rawResponseData == null ? void 0 : rawResponseData.map((x) => x == null ? void 0 : x.data).flat().filter((x) => !!x);
     }
     return void 0;
   }, [rawResponseData]);
-  const paginatedData = useMemo76(() => {
+  const paginatedData = useMemo77(() => {
     const firstPageIndex = (currentPage - 1) * PAGE_SIZE;
     const lastPageIndex = firstPageIndex + PAGE_SIZE;
     return data == null ? void 0 : data.slice(firstPageIndex, lastPageIndex);
   }, [currentPage, data]);
-  const lastMetadata = useMemo76(() => {
+  const lastMetadata = useMemo77(() => {
     if (rawResponseData && rawResponseData.length > 0) {
       return rawResponseData[rawResponseData.length - 1].meta;
     }
     return void 0;
   }, [rawResponseData]);
-  const hasMore = useMemo76(() => {
+  const hasMore = useMemo77(() => {
     var _a, _b, _c, _d;
     if (rawResponseData && rawResponseData.length > 0) {
       const lastElement = rawResponseData[rawResponseData.length - 1];
@@ -38400,7 +38408,7 @@ var useBills = () => {
 };
 
 // src/components/Bills/useBillsRecordPayment.ts
-import { useEffect as useEffect38, useMemo as useMemo77, useState as useState82 } from "react";
+import { useEffect as useEffect39, useMemo as useMemo78, useState as useState82 } from "react";
 import useSWRMutation27 from "swr/mutation";
 function buildKey41({
   access_token: accessToken,
@@ -38443,7 +38451,7 @@ var useBillsRecordPayment = ({ refetchAllBills }) => {
     setVendor(void 0);
     setBulkSelectionActive(false);
   };
-  useEffect38(() => {
+  useEffect39(() => {
     if (vendor && billsToPay.length === 0) {
       setVendor(void 0);
     }
@@ -38512,7 +38520,7 @@ var useBillsRecordPayment = ({ refetchAllBills }) => {
     setBillsToPay([{ bill, amount: (_b = convertFromCents((_a = bill.outstanding_balance) != null ? _a : 0)) == null ? void 0 : _b.toString() }]);
     setShowRecordPaymentForm(true);
   };
-  const payload = useMemo77(() => {
+  const payload = useMemo78(() => {
     const filteredBillsToPay = billsToPay.filter((item) => {
       var _a;
       return item.amount && ((_a = item.bill) == null ? void 0 : _a.id);
@@ -38844,17 +38852,17 @@ var useBillForm = (bill) => {
 import { formatISO as formatISO4, parseISO as parseISO18 } from "date-fns";
 
 // src/components/Bills/BillsPaymentRecorded.tsx
-import { useMemo as useMemo78 } from "react";
+import { useMemo as useMemo79 } from "react";
 
 // src/components/Input/StaticValue.tsx
-import classNames88 from "classnames";
+import classNames89 from "classnames";
 import { jsx as jsx323 } from "react/jsx-runtime";
 var StaticValue = (props) => {
   var _a;
   return /* @__PURE__ */ jsx323(
     Text,
     __spreadValues({
-      className: classNames88(
+      className: classNames89(
         "Layer__input--static-value",
         (_a = props.className) != null ? _a : ""
       )
@@ -38890,11 +38898,11 @@ var BillsPaymentRecorded = ({
     vendor,
     payRemainingBalance
   } = useBillsRecordPaymentContext();
-  const totalPaid = useMemo78(
+  const totalPaid = useMemo79(
     () => billsToPay.reduce((acc, record) => acc + (record.amount !== void 0 ? Number(record.amount) : 0), 0),
     [billsToPay]
   );
-  const anyUnpaid = useMemo78(
+  const anyUnpaid = useMemo79(
     () => billsToPay.some((record) => {
       var _a2;
       return ((_a2 = record.bill) == null ? void 0 : _a2.status) !== "PAID";
@@ -38951,7 +38959,7 @@ var BillsPaymentRecorded = ({
 };
 
 // src/components/Bills/BillsRecordPayment.tsx
-import { useMemo as useMemo79 } from "react";
+import { useMemo as useMemo80 } from "react";
 import { parseISO as parseISO16, format as formatTime13 } from "date-fns";
 
 // src/components/Bills/useUnpaidBillsByVendor.ts
@@ -39034,7 +39042,7 @@ var BillsRecordPayment = ({
     apiError
   } = useBillsRecordPaymentContext();
   const { data: rawAvailableBills } = useUnpaidBillsByVendor({ vendorId: vendor == null ? void 0 : vendor.id });
-  const availableBills = useMemo79(
+  const availableBills = useMemo80(
     () => rawAvailableBills == null ? void 0 : rawAvailableBills.filter((b) => !billsToPay.find((x) => {
       var _a2;
       return ((_a2 = x.bill) == null ? void 0 : _a2.id) === b.id;
@@ -39360,7 +39368,7 @@ var BillSummaryPaid = ({ bill }) => {
 };
 
 // src/components/Bills/BillSummaryUnpaid.tsx
-import { useMemo as useMemo80 } from "react";
+import { useMemo as useMemo81 } from "react";
 import { differenceInDays as differenceInDays2, parseISO as parseISO17 } from "date-fns";
 import { jsx as jsx330, jsxs as jsxs206 } from "react/jsx-runtime";
 function buildDifference(due_at) {
@@ -39388,7 +39396,7 @@ function buildDifference(due_at) {
   };
 }
 var BillSummaryUnpaid = ({ bill }) => {
-  const difference = useMemo80(() => buildDifference(bill.due_at), [bill.due_at]);
+  const difference = useMemo81(() => buildDifference(bill.due_at), [bill.due_at]);
   return /* @__PURE__ */ jsxs206("div", { className: "Layer__bill-details__summary", children: [
     /* @__PURE__ */ jsxs206("div", { children: [
       /* @__PURE__ */ jsx330(
@@ -39780,13 +39788,13 @@ var BillsDetails = ({
 };
 
 // src/components/Bills/BillsTableWithPanel.tsx
-import { useMemo as useMemo82 } from "react";
+import { useMemo as useMemo83 } from "react";
 
 // src/components/Bills/BillsTable.tsx
 import { Fragment as Fragment54 } from "react";
 
 // src/components/DueStatus/DueStatus.tsx
-import { useMemo as useMemo81 } from "react";
+import { useMemo as useMemo82 } from "react";
 import { parseISO as parseISO19, differenceInDays as differenceInDays3 } from "date-fns";
 import { jsx as jsx333, jsxs as jsxs208 } from "react/jsx-runtime";
 var dueStatusTitle = (daysDiff, paid) => {
@@ -39851,7 +39859,7 @@ var getDiff = (refDate) => {
   return differenceInDays3(today3, d);
 };
 var DueStatus = ({ dueDate, paidAt, size = "md" }) => {
-  const date = useMemo81(() => {
+  const date = useMemo82(() => {
     try {
       const diff = getDiff(paidAt ? paidAt : dueDate);
       if (diff === null) {
@@ -39881,7 +39889,7 @@ var DueStatus = ({ dueDate, paidAt, size = "md" }) => {
 };
 
 // src/components/Bills/BillsTable.tsx
-import classNames89 from "classnames";
+import classNames90 from "classnames";
 
 // src/components/Bills/BillsTableLoader.tsx
 import { jsx as jsx334 } from "react/jsx-runtime";
@@ -39943,7 +39951,7 @@ var BillsTableContent = ({
       addBill(entry);
       setShowRecordPaymentForm(true);
     };
-    const actionsColClassName = classNames89(
+    const actionsColClassName = classNames90(
       "Layer__bills-table__actions-col",
       status === "PAID" ? "Layer__bills-table__actions-col--narrow" : ""
     );
@@ -40013,7 +40021,7 @@ var BillsTableContent = ({
 };
 
 // src/components/Bills/BillsList.tsx
-import classNames90 from "classnames";
+import classNames91 from "classnames";
 import { Fragment as Fragment55, jsx as jsx336, jsxs as jsxs210 } from "react/jsx-runtime";
 var BillsList = ({
   stringOverrides
@@ -40067,7 +40075,7 @@ var BillsListItem = ({
     }
     removeBill(bill);
   };
-  const liClassName = classNames90(
+  const liClassName = classNames91(
     "Layer__bills-list-item",
     showComponent ? "Layer__bills-list-item--show" : ""
   );
@@ -40179,11 +40187,11 @@ var BillsTableWithPanel = ({
     setVendor: setRecordPaymentVendor
   } = useBillsRecordPaymentContext();
   const { isDesktop, isMobile } = useSizeClass();
-  const totalCount = useMemo82(() => {
+  const totalCount = useMemo83(() => {
     var _a;
     return (_a = rawData == null ? void 0 : rawData.length) != null ? _a : 0;
   }, [rawData]);
-  const anyBillToPaySelected = useMemo82(() => {
+  const anyBillToPaySelected = useMemo83(() => {
     return billsToPay.length > 0;
   }, [billsToPay]);
   return /* @__PURE__ */ jsxs211(
@@ -40572,11 +40580,11 @@ var Components = ({
 };
 
 // src/providers/InvoiceStore/InvoiceStoreProvider.tsx
-import { useState as useState86, createContext as createContext27, useContext as useContext62, useMemo as useMemo86 } from "react";
+import { useState as useState86, createContext as createContext27, useContext as useContext62, useMemo as useMemo87 } from "react";
 import { createStore as createStore4, useStore as useStore7 } from "zustand";
 
 // src/components/Invoices/InvoiceTable/InvoiceTable.tsx
-import { useCallback as useCallback70, useEffect as useEffect39, useMemo as useMemo85 } from "react";
+import { useCallback as useCallback70, useEffect as useEffect40, useMemo as useMemo86 } from "react";
 
 // src/features/invoices/api/useListInvoices.tsx
 import useSWRInfinite7 from "swr/infinite";
@@ -41149,7 +41157,7 @@ import {
 } from "@tanstack/react-table";
 
 // src/components/DataTable/DataTable.tsx
-import { useMemo as useMemo83 } from "react";
+import { useMemo as useMemo84 } from "react";
 import { jsx as jsx344, jsxs as jsxs215 } from "react/jsx-runtime";
 var DataTable = ({
   columnConfig,
@@ -41163,15 +41171,15 @@ var DataTable = ({
   const columns = Object.values(columnConfig);
   const { EmptyState: EmptyState2, ErrorState: ErrorState2 } = slots;
   const isEmptyTable = (data == null ? void 0 : data.length) === 0;
-  const renderTableBody = useMemo83(() => {
+  const renderTableBody = useMemo84(() => {
     if (isError) {
-      return /* @__PURE__ */ jsx344(Row2, { children: /* @__PURE__ */ jsx344(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ jsx344(ErrorState2, {}) }) });
+      return /* @__PURE__ */ jsx344(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsx344(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsx344(ErrorState2, {}) }) });
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx344(Row2, { children: /* @__PURE__ */ jsx344(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ jsx344(Loader2, {}) }) });
+      return /* @__PURE__ */ jsx344(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsx344(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsx344(Loader2, {}) }) });
     }
     if (isEmptyTable) {
-      return /* @__PURE__ */ jsx344(Row2, { children: /* @__PURE__ */ jsx344(Cell3, { colSpan: columns.length, children: /* @__PURE__ */ jsx344(EmptyState2, {}) }) });
+      return /* @__PURE__ */ jsx344(Row2, { className: "Layer__DataTable__EmptyState__Row", children: /* @__PURE__ */ jsx344(Cell3, { className: "Layer__DataTable__EmptyState__Cell", colSpan: columns.length, children: /* @__PURE__ */ jsx344(EmptyState2, {}) }) });
     }
     const RowRenderer = (row) => /* @__PURE__ */ jsx344(Row2, { children: columns.map((col) => /* @__PURE__ */ jsx344(
       Cell3,
@@ -41191,7 +41199,7 @@ var DataTable = ({
 };
 
 // src/components/DataTable/PaginatedTable.tsx
-import { useCallback as useCallback69, useMemo as useMemo84, useState as useState85 } from "react";
+import { useCallback as useCallback69, useMemo as useMemo85, useState as useState85 } from "react";
 import { jsx as jsx345, jsxs as jsxs216 } from "react/jsx-runtime";
 var EMPTY_ARRAY2 = [];
 function PaginatedTable({
@@ -41225,7 +41233,7 @@ function PaginatedTable({
     autoResetPageIndex: false
   });
   const { rows } = table2.getRowModel();
-  const rowData = useMemo84(() => rows.map((r) => r.original), [rows]);
+  const rowData = useMemo85(() => rows.map((r) => r.original), [rows]);
   const onPageChange = useCallback69((page) => {
     table2.setPageIndex(page - 1);
   }, [table2]);
@@ -41390,6 +41398,12 @@ var InvoiceStatusCell = ({ invoice, inline = false }) => {
   ] });
 };
 
+// src/features/customers/util.ts
+function getCustomerName(customer) {
+  var _a, _b;
+  return (_b = (_a = customer == null ? void 0 : customer.individualName) != null ? _a : customer == null ? void 0 : customer.companyName) != null ? _b : "Unknown Customer";
+}
+
 // src/components/Invoices/InvoiceTable/InvoiceTable.tsx
 import { jsx as jsx349, jsxs as jsxs220 } from "react/jsx-runtime";
 var COMPONENT_NAME11 = "InvoiceTable";
@@ -41414,7 +41428,7 @@ var AmountCell = ({ invoice }) => {
     case "VOIDED" /* Voided */:
     case "REFUNDED" /* Refunded */:
     case "SENT" /* Sent */: {
-      return /* @__PURE__ */ jsx349(VStack, { children: /* @__PURE__ */ jsx349(Span, { align: "right", children: totalAmount }) });
+      return /* @__PURE__ */ jsx349(Span, { align: "right", children: totalAmount });
     }
     case "PARTIALLY_PAID" /* PartiallyPaid */: {
       return /* @__PURE__ */ jsxs220(VStack, { children: [
@@ -41434,10 +41448,6 @@ var AmountCell = ({ invoice }) => {
     }
   }
 };
-var getCustomerName = (invoice) => {
-  const { recipientName, customer } = invoice;
-  return (customer == null ? void 0 : customer.individualName) || (customer == null ? void 0 : customer.companyName) || recipientName;
-};
 var getColumnConfig = (onSelectInvoice) => ({
   ["SentAt" /* SentAt */]: {
     id: "SentAt" /* SentAt */,
@@ -41447,13 +41457,13 @@ var getColumnConfig = (onSelectInvoice) => ({
   ["InvoiceNo" /* InvoiceNo */]: {
     id: "InvoiceNo" /* InvoiceNo */,
     header: "No.",
-    cell: (row) => row.invoiceNumber,
+    cell: (row) => /* @__PURE__ */ jsx349(Span, { ellipsis: true, children: row.invoiceNumber }),
     isRowHeader: true
   },
   ["Customer" /* Customer */]: {
     id: "Customer" /* Customer */,
     header: "Customer",
-    cell: (row) => getCustomerName(row)
+    cell: (row) => /* @__PURE__ */ jsx349(Span, { ellipsis: true, children: getCustomerName(row.customer) })
   },
   ["Total" /* Total */]: {
     id: "Total" /* Total */,
@@ -41505,10 +41515,10 @@ var InvoiceTable = () => {
   const { tableFilters, setTableFilters } = useInvoiceTableFilters();
   const { status: selectedInvoiceStatusOption, query } = tableFilters;
   const { inputValue, searchQuery, handleInputChange } = useDebouncedSearchInput({ initialInputState: query });
-  useEffect39(() => {
+  useEffect40(() => {
     setTableFilters({ query: searchQuery });
   }, [searchQuery, setTableFilters]);
-  const listInvoiceParams = useMemo85(
+  const listInvoiceParams = useMemo86(
     () => getListInvoiceParams(tableFilters),
     [tableFilters]
   );
@@ -41521,15 +41531,15 @@ var InvoiceTable = () => {
       void setSize(size + 1);
     }
   }, [hasMore, setSize, size]);
-  const paginationProps = useMemo85(() => {
+  const paginationProps = useMemo86(() => {
     return {
       pageSize: 10,
       hasMore,
       fetchMore
     };
   }, [fetchMore, hasMore]);
-  const options3 = useMemo85(() => Object.values(InvoiceStatusOptionConfig), []);
-  const SelectedValue = useMemo85(() => {
+  const options3 = useMemo86(() => Object.values(InvoiceStatusOptionConfig), []);
+  const SelectedValue = useMemo86(() => {
     const label = selectedInvoiceStatusOption.label;
     return label ? `Status: ${label}` : "Status";
   }, [selectedInvoiceStatusOption.label]);
@@ -41582,7 +41592,7 @@ var InvoiceTable = () => {
       spacing: true
     }
   ), [refetch]);
-  const columnConfig = useMemo85(() => getColumnConfig(toViewInvoice), [toViewInvoice]);
+  const columnConfig = useMemo86(() => getColumnConfig(toViewInvoice), [toViewInvoice]);
   return /* @__PURE__ */ jsxs220(Container, { name: "InvoiceTable", children: [
     /* @__PURE__ */ jsx349(
       DataTableHeader,
@@ -41846,7 +41856,7 @@ function useInvoiceTableFilters() {
   const store = useContext62(InvoiceStoreContext);
   const tableFilters = useStore7(store, (state) => state.tableFilters);
   const setTableFilters = useStore7(store, (state) => state.setTableFilters);
-  return useMemo86(() => ({ tableFilters, setTableFilters }), [tableFilters, setTableFilters]);
+  return useMemo87(() => ({ tableFilters, setTableFilters }), [tableFilters, setTableFilters]);
 }
 function useInvoiceNavigation() {
   const store = useContext62(InvoiceStoreContext);
@@ -41894,14 +41904,14 @@ function InvoiceStoreProvider(props) {
 }
 
 // src/components/Invoices/InvoiceDetail/InvoiceDetail.tsx
-import { useCallback as useCallback91, useMemo as useMemo92, useRef as useRef36, useState as useState91 } from "react";
+import { useCallback as useCallback91, useMemo as useMemo93, useRef as useRef36, useState as useState91 } from "react";
 
 // src/components/Invoices/InvoiceForm/InvoiceForm.tsx
-import { forwardRef as forwardRef27, useCallback as useCallback75, useEffect as useEffect40, useImperativeHandle as useImperativeHandle4, useRef as useRef32 } from "react";
-import classNames92 from "classnames";
+import { forwardRef as forwardRef27, useCallback as useCallback75, useEffect as useEffect41, useImperativeHandle as useImperativeHandle4, useRef as useRef32 } from "react";
+import classNames93 from "classnames";
 
 // src/components/Invoices/InvoiceForm/useInvoiceForm.ts
-import { useCallback as useCallback73, useMemo as useMemo87, useState as useState87, useRef as useRef31 } from "react";
+import { useCallback as useCallback73, useMemo as useMemo88, useState as useState87, useRef as useRef31 } from "react";
 import { useStore as useStore8, revalidateLogic } from "@tanstack/react-form";
 import { Schema as Schema23 } from "effect";
 
@@ -42077,19 +42087,14 @@ var convertInvoiceFormToParams = (form) => {
         unitPrice: convertBigDecimalToCents(item.unitPrice),
         quantity: item.quantity
       };
-      return !BD5.equals(form.taxRate, BIG_DECIMAL_ZERO) && item.isTaxable ? __spreadProps(__spreadValues({}, baseLineItem), {
-        salesTaxes: [
-          {
-            amount: convertBigDecimalToCents(
-              BD5.multiply(item.amount, form.taxRate)
-            )
-          }
-        ]
-      }) : baseLineItem;
+      if (!item.isTaxable || BD5.equals(form.taxRate, BIG_DECIMAL_ZERO)) return baseLineItem;
+      const itemTaxableSubtotal = computeTaxableSubtotal({ rawTaxableSubtotal: item.amount, discountRate: form.discountRate });
+      const itemTaxes = computeTaxes({ taxableSubtotal: itemTaxableSubtotal, taxRate: form.taxRate });
+      return __spreadProps(__spreadValues({}, baseLineItem), { salesTaxes: [{ amount: convertBigDecimalToCents(itemTaxes) }] });
     })
   }, !BD5.equals(form.discountRate, BIG_DECIMAL_ZERO) && {
     additionalDiscount: convertBigDecimalToCents(
-      BD5.multiply(computeSubtotal(form.lineItems), form.discountRate)
+      computeAdditionalDiscount({ subtotal: computeSubtotal(form.lineItems), discountRate: form.discountRate })
     )
   });
 };
@@ -42119,7 +42124,7 @@ var useInvoiceForm = (props) => {
       setSubmitError("Something went wrong. Please try again.");
     }
   }), [onSuccess, upsertInvoice]);
-  const validators = useMemo87(() => ({
+  const validators = useMemo88(() => ({
     onDynamic: validateInvoiceForm
   }), []);
   const form = useAppForm({
@@ -42134,7 +42139,7 @@ var useInvoiceForm = (props) => {
   });
   const isDirty = useStore8(form.store, (state) => state.isDirty);
   const isSubmitting = useStore8(form.store, (state) => state.isSubmitting);
-  const formState = useMemo87(() => ({
+  const formState = useMemo88(() => ({
     isDirty,
     isSubmitting
   }), [isDirty, isSubmitting]);
@@ -42147,30 +42152,30 @@ var useInvoiceForm = (props) => {
       rawTaxableSubtotal: computeRawTaxableSubtotal(lineItems)
     };
   });
-  const additionalDiscount = useMemo87(
+  const additionalDiscount = useMemo88(
     () => computeAdditionalDiscount({ subtotal, discountRate }),
     [subtotal, discountRate]
   );
-  const taxableSubtotal = useMemo87(
+  const taxableSubtotal = useMemo88(
     () => computeTaxableSubtotal({ rawTaxableSubtotal, discountRate }),
     [rawTaxableSubtotal, discountRate]
   );
-  const taxes = useMemo87(
+  const taxes = useMemo88(
     () => computeTaxes({ taxableSubtotal, taxRate }),
     [taxableSubtotal, taxRate]
   );
-  const grandTotal = useMemo87(
+  const grandTotal = useMemo88(
     () => computeGrandTotal({ subtotal, additionalDiscount, taxes }),
     [subtotal, additionalDiscount, taxes]
   );
-  const totals = useMemo87(() => ({
+  const totals = useMemo88(() => ({
     subtotal,
     additionalDiscount,
     taxableSubtotal,
     taxes,
     grandTotal
   }), [additionalDiscount, grandTotal, subtotal, taxableSubtotal, taxes]);
-  return useMemo87(
+  return useMemo88(
     () => ({ form, formState, totals, submitError }),
     [form, formState, totals, submitError]
   );
@@ -42181,13 +42186,9 @@ import { Plus as Plus3, Trash as Trash3 } from "lucide-react";
 import { BigDecimal as BD6 } from "effect";
 
 // src/features/customers/components/CustomerSelector.tsx
-import { useCallback as useCallback74, useId as useId6, useMemo as useMemo88 } from "react";
-import classNames91 from "classnames";
+import { useCallback as useCallback74, useId as useId6, useMemo as useMemo89 } from "react";
+import classNames92 from "classnames";
 import { jsx as jsx351, jsxs as jsxs221 } from "react/jsx-runtime";
-function getCustomerName2(customer) {
-  var _a, _b, _c;
-  return (_c = (_b = (_a = customer.individualName) != null ? _a : customer.companyName) != null ? _b : customer.externalId) != null ? _c : "Unknown Customer";
-}
 var CustomerAsOption = class {
   constructor(customer) {
     __publicField(this, "internalCustomer");
@@ -42197,7 +42198,7 @@ var CustomerAsOption = class {
     return this.internalCustomer;
   }
   get label() {
-    return getCustomerName2(this.internalCustomer);
+    return getCustomerName(this.internalCustomer);
   }
   get id() {
     return this.internalCustomer.id;
@@ -42214,7 +42215,7 @@ function CustomerSelector({
   inline,
   className
 }) {
-  const combinedClassName = classNames91(
+  const combinedClassName = classNames92(
     "Layer__CustomerSelector",
     inline && "Layer__CustomerSelector--inline",
     className
@@ -42224,7 +42225,7 @@ function CustomerSelector({
   });
   const effectiveSearchQuery = searchQuery === "" ? void 0 : searchQuery;
   const { data, isLoading, isError } = useListCustomers({ query: effectiveSearchQuery });
-  const options3 = useMemo88(
+  const options3 = useMemo89(
     () => (data == null ? void 0 : data.flatMap(({ data: data2 }) => data2).map((customer) => new CustomerAsOption(customer))) || [],
     [data]
   );
@@ -42250,23 +42251,23 @@ function CustomerSelector({
     },
     [options3, handleInputChange, selectedCustomerId, onSelectedCustomerChange]
   );
-  const selectedCustomerForComboBox = useMemo88(
+  const selectedCustomerForComboBox = useMemo89(
     () => {
       if (selectedCustomer === null) {
         return null;
       }
       return {
-        label: getCustomerName2(selectedCustomer),
+        label: getCustomerName(selectedCustomer),
         value: selectedCustomer.id
       };
     },
     [selectedCustomer]
   );
-  const EmptyMessage = useMemo88(
+  const EmptyMessage = useMemo89(
     () => /* @__PURE__ */ jsx351(P, { variant: "subtle", children: "No matching customer" }),
     []
   );
-  const ErrorMessage = useMemo88(
+  const ErrorMessage = useMemo89(
     () => /* @__PURE__ */ jsx351(
       P,
       {
@@ -42309,7 +42310,7 @@ var INVOICE_FORM_CSS_PREFIX = "Layer__InvoiceForm";
 var INVOICE_FORM_FIELD_CSS_PREFIX = `${INVOICE_FORM_CSS_PREFIX}__Field`;
 var getDueAtChanged = (dueAt, previousDueAt) => dueAt === null && previousDueAt !== null || dueAt !== null && previousDueAt === null || dueAt !== null && previousDueAt !== null && toCalendarDate2(dueAt).compare(toCalendarDate2(previousDueAt)) !== 0;
 var InvoiceFormTotalRow = ({ label, value, children }) => {
-  const className = classNames92(
+  const className = classNames93(
     `${INVOICE_FORM_CSS_PREFIX}__TotalRow`,
     children && `${INVOICE_FORM_CSS_PREFIX}__TotalRow--withField`
   );
@@ -42347,7 +42348,7 @@ var InvoiceForm = forwardRef27((props, ref) => {
   useImperativeHandle4(ref, () => ({
     submit: () => form.handleSubmit()
   }));
-  useEffect40(() => {
+  useEffect41(() => {
     onChangeFormState == null ? void 0 : onChangeFormState(formState);
   }, [formState, onChangeFormState]);
   return /* @__PURE__ */ jsxs222(Form, { className: INVOICE_FORM_CSS_PREFIX, onSubmit: blockNativeOnSubmit, children: [
@@ -42467,7 +42468,7 @@ var InvoiceForm = forwardRef27((props, ref) => {
             {
               gap: "xs",
               align: "end",
-              className: classNames92(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
+              className: classNames93(`${INVOICE_FORM_CSS_PREFIX}__LineItem`, isReadOnly && `${INVOICE_FORM_CSS_PREFIX}__LineItem--readonly`),
               children: [
                 /* @__PURE__ */ jsx352(form.AppField, { name: `lineItems[${index}].product`, children: (innerField) => /* @__PURE__ */ jsx352(innerField.FormTextField, { label: "Product/Service", showLabel: index === 0, isReadOnly }) }),
                 /* @__PURE__ */ jsx352(form.AppField, { name: `lineItems[${index}].description`, children: (innerField) => /* @__PURE__ */ jsx352(innerField.FormTextField, { label: "Description", showLabel: index === 0, isReadOnly }) }),
@@ -42566,7 +42567,7 @@ import { useCallback as useCallback79 } from "react";
 import { AlertTriangle as AlertTriangle2 } from "lucide-react";
 
 // src/components/Invoices/InvoicePaymentForm/useInvoicePaymentForm.ts
-import { useCallback as useCallback77, useMemo as useMemo89, useState as useState88, useRef as useRef33 } from "react";
+import { useCallback as useCallback77, useMemo as useMemo90, useState as useState88, useRef as useRef33 } from "react";
 import { revalidateLogic as revalidateLogic2 } from "@tanstack/react-form";
 
 // src/features/invoices/api/useUpsertDedicatedInvoicePayment.tsx
@@ -42776,7 +42777,7 @@ var useInvoicePaymentForm = (props) => {
   const onDynamic = useCallback77(({ value }) => {
     return validateInvoicePaymentForm({ invoicePayment: value, invoice });
   }, [invoice]);
-  const validators = useMemo89(() => ({ onDynamic }), [onDynamic]);
+  const validators = useMemo90(() => ({ onDynamic }), [onDynamic]);
   const form = useAppForm({
     defaultValues,
     onSubmit,
@@ -42787,7 +42788,7 @@ var useInvoicePaymentForm = (props) => {
     }),
     canSubmitWhenInvalid: true
   });
-  return useMemo89(
+  return useMemo90(
     () => ({ form, submitError }),
     [form, submitError]
   );
@@ -42795,7 +42796,7 @@ var useInvoicePaymentForm = (props) => {
 
 // src/components/PaymentMethod/PaymentMethodComboBox.tsx
 import { useCallback as useCallback78, useId as useId7 } from "react";
-import classNames93 from "classnames";
+import classNames94 from "classnames";
 import { jsx as jsx354, jsxs as jsxs224 } from "react/jsx-runtime";
 var PaymentMethodOptionConfig = {
   ["CASH" /* Cash */]: { label: "Cash", value: "CASH" /* Cash */ },
@@ -42806,7 +42807,7 @@ var PaymentMethodOptionConfig = {
 };
 var options2 = Object.values(PaymentMethodOptionConfig);
 var PaymentMethodComboBox = ({ value, onValueChange, isReadOnly, className, inline }) => {
-  const combinedClassName = classNames93(
+  const combinedClassName = classNames94(
     "Layer__PaymentMethodComboBox",
     inline && "Layer__PaymentMethodComboBox--inline",
     className
@@ -42865,7 +42866,7 @@ var InvoicePaymentForm = (props) => {
     /* @__PURE__ */ jsxs225(VStack, { className: `${INVOICE_PAYMENT_FORM_CSS_PREFIX}__Section`, gap: "sm", children: [
       /* @__PURE__ */ jsxs225(HStack, { className: `${INVOICE_PAYMENT_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, gap: "xs", align: "center", children: [
         /* @__PURE__ */ jsx355(Span, { size: "sm", children: "Invoice" }),
-        /* @__PURE__ */ jsxs225(Span, { size: "md", weight: "bold", children: [
+        /* @__PURE__ */ jsxs225(Span, { size: "md", weight: "bold", ellipsis: true, children: [
           "#",
           invoice.invoiceNumber
         ] })
@@ -43312,14 +43313,14 @@ function InvoiceResetModal({ isOpen, onOpenChange, invoice, onSuccess }) {
 }
 
 // src/components/Invoices/Modal/InvoiceRefundModal.tsx
-import { useCallback as useCallback89, useMemo as useMemo91, useRef as useRef35 } from "react";
+import { useCallback as useCallback89, useMemo as useMemo92, useRef as useRef35 } from "react";
 
 // src/components/Invoices/InvoiceRefundForm/InvoiceRefundForm.tsx
 import { forwardRef as forwardRef28, useCallback as useCallback88, useImperativeHandle as useImperativeHandle5 } from "react";
 import { AlertTriangle as AlertTriangle3 } from "lucide-react";
 
 // src/components/Invoices/InvoiceRefundForm/useInvoiceRefundForm.ts
-import { useCallback as useCallback87, useMemo as useMemo90, useState as useState89, useRef as useRef34 } from "react";
+import { useCallback as useCallback87, useMemo as useMemo91, useState as useState89, useRef as useRef34 } from "react";
 import { revalidateLogic as revalidateLogic3 } from "@tanstack/react-form";
 import { Schema as Schema32 } from "effect";
 
@@ -43538,7 +43539,7 @@ var useInvoiceRefundForm = ({ onSuccess, invoice }) => {
   const onDynamic = useCallback87(({ value }) => {
     return validateInvoiceRefundForm({ invoiceRefund: value, invoice });
   }, [invoice]);
-  const validators = useMemo90(() => ({ onDynamic }), [onDynamic]);
+  const validators = useMemo91(() => ({ onDynamic }), [onDynamic]);
   const form = useAppForm({
     defaultValues,
     onSubmit,
@@ -43549,7 +43550,7 @@ var useInvoiceRefundForm = ({ onSuccess, invoice }) => {
     }),
     canSubmitWhenInvalid: true
   });
-  return useMemo90(
+  return useMemo91(
     () => ({ form, submitError }),
     [form, submitError]
   );
@@ -43587,7 +43588,7 @@ var InvoiceRefundForm = forwardRef28(({ onSuccess, invoice }, ref) => {
     /* @__PURE__ */ jsxs226(VStack, { className: `${INVOICE_REFUND_FORM_CSS_PREFIX}__Section`, gap: "sm", children: [
       /* @__PURE__ */ jsxs226(HStack, { className: `${INVOICE_REFUND_FORM_FIELD_CSS_PREFIX}__InvoiceNo`, gap: "xs", align: "center", children: [
         /* @__PURE__ */ jsx359(Span, { size: "sm", children: "Invoice" }),
-        /* @__PURE__ */ jsxs226(Span, { size: "md", weight: "bold", children: [
+        /* @__PURE__ */ jsxs226(Span, { size: "md", weight: "bold", ellipsis: true, children: [
           "#",
           invoice.invoiceNumber
         ] })
@@ -43620,7 +43621,7 @@ function InvoiceRefundModal({ isOpen, onOpenChange, invoice, onSuccess }) {
     onSuccess(updateInvoiceWithRefund(invoice));
     onOpenChange == null ? void 0 : onOpenChange(false);
   }, [invoice, onOpenChange, onSuccess]);
-  const content = useMemo91(() => /* @__PURE__ */ jsx360(InvoiceRefundForm, { invoice, onSuccess: onSuccessForm, ref: formRef }), [invoice, onSuccessForm]);
+  const content = useMemo92(() => /* @__PURE__ */ jsx360(InvoiceRefundForm, { invoice, onSuccess: onSuccessForm, ref: formRef }), [invoice, onSuccessForm]);
   return /* @__PURE__ */ jsx360(
     BaseConfirmationModal,
     {
@@ -43793,7 +43794,7 @@ var InvoiceDetail = () => {
     }
   }, [hasChanges, toInvoiceTable]);
   return /* @__PURE__ */ jsxs228(Fragment60, { children: [
-    /* @__PURE__ */ jsxs228(BaseDetailView, { slots: { Header: Header5, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "Invoice Detail View", onGoBack, children: [
+    /* @__PURE__ */ jsxs228(BaseDetailView, { slots: { Header: Header5, BackIcon: hasChanges ? X_default : BackArrow_default }, name: "InvoiceDetail", onGoBack, children: [
       viewState.mode === "Update" /* Update */ && /* @__PURE__ */ jsx362(InvoiceDetailSubHeader, { invoice: viewState.invoice }),
       /* @__PURE__ */ jsx362(
         InvoiceForm,
@@ -43845,7 +43846,7 @@ var InvoiceDetailHeader = ({ onSubmit, formState, isReadOnly, setIsReadOnly, ope
   const onEditInvoice = useCallback91(() => {
     setIsReadOnly(false);
   }, [setIsReadOnly]);
-  const saveButton = useMemo92(() => /* @__PURE__ */ jsxs228(Button2, { isPending: isSubmitting, onPress: onSubmit, children: [
+  const saveButton = useMemo93(() => /* @__PURE__ */ jsxs228(Button2, { isPending: isSubmitting, onPress: onSubmit, children: [
     "Save",
     /* @__PURE__ */ jsx362(Save2, { size: 14 })
   ] }), [isSubmitting, onSubmit]);
@@ -43859,7 +43860,7 @@ var InvoiceDetailHeader = ({ onSubmit, formState, isReadOnly, setIsReadOnly, ope
   const headingContent = isReadOnly ? invoiceNumber ? `Invoice #${invoiceNumber}` : "View Invoice" : invoiceNumber ? `Editing Invoice #${invoiceNumber}` : "Editing Invoice";
   const canMarkAsPaid = viewState.mode === "Update" /* Update */ && (viewState.invoice.status === "SENT" /* Sent */ || viewState.invoice.status === "PARTIALLY_PAID" /* PartiallyPaid */);
   return /* @__PURE__ */ jsxs228(HStack, { justify: "space-between", align: "center", fluid: true, pie: "md", children: [
-    /* @__PURE__ */ jsx362(Heading2, { children: headingContent }),
+    /* @__PURE__ */ jsx362(Heading2, { className: "Layer__InvoiceDetail__Heading", ellipsis: true, children: headingContent }),
     isReadOnly ? /* @__PURE__ */ jsxs228(HStack, { gap: "xs", children: [
       canMarkAsPaid && /* @__PURE__ */ jsxs228(Button2, { onPress: openInvoicePaymentDrawer, children: [
         "Mark as paid",
@@ -43881,16 +43882,16 @@ var InvoiceDetailSubHeader = ({ invoice }) => {
 // src/components/ui/Meter/Meter.tsx
 import { forwardRef as forwardRef29 } from "react";
 import { Meter as ReactAriaMeter } from "react-aria-components";
-import classNames94 from "classnames";
+import classNames95 from "classnames";
 import { jsx as jsx363, jsxs as jsxs229 } from "react/jsx-runtime";
 var getClassnameForSubComponent = (className, suffix) => {
-  return classNames94(`${METER_CLASS_NAME}__${suffix}`, className && `${className}__${suffix}`);
+  return classNames95(`${METER_CLASS_NAME}__${suffix}`, className && `${className}__${suffix}`);
 };
 var METER_CLASS_NAME = "Layer__Meter";
 var Meter = forwardRef29(
   function Meter2(_a, ref) {
     var _b = _a, { className, label, meterOnly } = _b, restProps = __objRest(_b, ["className", "label", "meterOnly"]);
-    return /* @__PURE__ */ jsx363(ReactAriaMeter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames94(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs229(VStack, { gap: "3xs", fluid: true, children: [
+    return /* @__PURE__ */ jsx363(ReactAriaMeter, __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, restProps), { className: classNames95(METER_CLASS_NAME, className), ref }), meterOnly && { "aria-label": label }), { children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs229(VStack, { gap: "3xs", fluid: true, children: [
       !meterOnly && /* @__PURE__ */ jsxs229(HStack, { justify: "space-between", children: [
         /* @__PURE__ */ jsx363(Label, { slot: "label", children: label }),
         /* @__PURE__ */ jsx363(Span, { slot: "value", children: valueText })