@layerfi/components 0.1.75 → 0.1.77

package/dist/esm/index.js

@@ -554,7 +554,7 @@ var Drawer = ({
 };
 
 // src/components/Toast/Toast.tsx
-import React2, { forwardRef } from "react";
+import React2 from "react";
 
 // src/contexts/LayerContext/LayerContext.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -582,7 +582,7 @@ var LayerContext = createContext2({
   setOnboardingStep: () => void 0,
   environment: "",
   toasts: [],
-  addToast: (toast) => void 0,
+  addToast: (_toast) => void 0,
   removeToast: () => void 0,
   onError: () => void 0,
   touch: () => void 0,
@@ -613,10 +613,10 @@ var Toast = (props) => {
     /* @__PURE__ */ React2.createElement("p", null, content)
   );
 };
-var ToastsContainer = forwardRef((_props) => {
+function ToastsContainer() {
   const { toasts } = useLayerContext();
   return /* @__PURE__ */ React2.createElement("div", { className: "Layer__toasts-container" }, toasts.map((toast, idx) => /* @__PURE__ */ React2.createElement(Toast, __spreadValues({ key: `layer-toast-${idx}` }, toast))));
-});
+}
 
 // src/components/GlobalWidgets/GlobalWidgets.tsx
 var DrawerWidget = () => {
@@ -1161,7 +1161,6 @@ var useLinkedAccounts = () => {
   } = useLayerContext();
   const [linkToken, setLinkToken] = useState4(null);
   const [loadingStatus, setLoadingStatus] = useState4("initial");
-  const USE_PLAID_SANDBOX = usePlaidSandbox != null ? usePlaidSandbox : true;
   const [linkMode, setLinkMode] = useState4("add");
   const queryKey = businessId && (auth == null ? void 0 : auth.access_token) && `linked-accounts-${businessId}`;
   const {
@@ -1230,7 +1229,7 @@ var useLinkedAccounts = () => {
       }
     }),
     onExit: () => setLinkMode("add"),
-    env: USE_PLAID_SANDBOX ? "sandbox" : void 0
+    env: usePlaidSandbox ? "sandbox" : void 0
   });
   useEffect2(() => {
     if (plaidLinkReady) {
@@ -1271,6 +1270,7 @@ var useLinkedAccounts = () => {
     }
   });
   const unlinkAccount2 = (source, accountId) => __async(void 0, null, function* () {
+    DEBUG && console.debug("unlinking account");
     if (source === "PLAID") {
       yield Layer.unlinkAccount(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: { businessId, accountId }
@@ -1284,7 +1284,7 @@ var useLinkedAccounts = () => {
     }
   });
   const confirmAccount = (source, accountId) => __async(void 0, null, function* () {
-    DEBUG && console.log("confirming account");
+    DEBUG && console.debug("confirming account");
     if (source === "PLAID") {
       yield Layer.confirmConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1301,7 +1301,7 @@ var useLinkedAccounts = () => {
     }
   });
   const denyAccount = (source, accountId) => __async(void 0, null, function* () {
-    DEBUG && console.log("confirming account");
+    DEBUG && console.debug("confirming account");
     if (source === "PLAID") {
       yield Layer.denyConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1318,7 +1318,7 @@ var useLinkedAccounts = () => {
     }
   });
   const breakConnection = (source, connectionExternalId) => __async(void 0, null, function* () {
-    DEBUG && console.log("Breaking sandbox plaid item connection");
+    DEBUG && console.debug("Breaking sandbox plaid item connection");
     if (source === "PLAID") {
       yield Layer.breakPlaidItemConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
         params: {
@@ -1335,23 +1335,23 @@ var useLinkedAccounts = () => {
     }
   });
   const refetchAccounts = () => __async(void 0, null, function* () {
-    DEBUG && console.log("refetching accounts...");
+    DEBUG && console.debug("refetching accounts...");
     yield mutate();
   });
   const syncAccounts = () => __async(void 0, null, function* () {
-    DEBUG && console.log("resyncing accounts...");
+    DEBUG && console.debug("resyncing accounts...");
     yield Layer.syncConnection(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId }
     });
   });
   const updateConnectionStatus2 = () => __async(void 0, null, function* () {
-    DEBUG && console.log("updating connection status...");
+    DEBUG && console.debug("updating connection status...");
     yield Layer.updateConnectionStatus(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId }
     });
   });
   const unlinkPlaidItem2 = (plaidItemPlaidId) => __async(void 0, null, function* () {
-    DEBUG && console.log("unlinking plaid item");
+    DEBUG && console.debug("unlinking plaid item");
     yield Layer.unlinkPlaidItem(apiUrl, auth == null ? void 0 : auth.access_token, {
       params: { businessId, plaidItemPlaidId }
     });
@@ -1881,7 +1881,12 @@ var BusinessProvider = ({
   };
   errorHandler.setOnError(onError);
   const colors = buildColorsPalette(theme);
-  const { url, scope, apiUrl } = LayerEnvironment[environment];
+  const {
+    url,
+    scope,
+    apiUrl,
+    usePlaidSandbox: defaultUsePlaidSandbox
+  } = LayerEnvironment[environment];
   const [state, dispatch] = useReducer(reducer, {
     auth: {
       access_token: "",
@@ -1895,7 +1900,7 @@ var BusinessProvider = ({
     apiUrl,
     theme,
     colors,
-    usePlaidSandbox,
+    usePlaidSandbox: usePlaidSandbox != null ? usePlaidSandbox : defaultUsePlaidSandbox,
     onboardingStep: void 0,
     environment,
     toasts: [],
@@ -2099,22 +2104,26 @@ var LayerEnvironment = {
   production: {
     url: "https://auth.layerfi.com/oauth2/token",
     scope: "https://api.layerfi.com/production",
-    apiUrl: "https://api.layerfi.com"
+    apiUrl: "https://api.layerfi.com",
+    usePlaidSandbox: false
   },
   sandbox: {
     url: "https://auth.layerfi.com/oauth2/token",
     scope: "https://sandbox.layerfi.com/sandbox",
-    apiUrl: "https://sandbox.layerfi.com"
+    apiUrl: "https://sandbox.layerfi.com",
+    usePlaidSandbox: true
   },
   staging: {
     url: "https://auth.layerfi.com/oauth2/token",
     scope: "https://sandbox.layerfi.com/sandbox",
-    apiUrl: "https://staging.layerfi.com"
+    apiUrl: "https://staging.layerfi.com",
+    usePlaidSandbox: true
   },
   internalStaging: {
     url: "https://auth.layerfi.com/oauth2/token",
     scope: "https://sandbox.layerfi.com/sandbox",
-    apiUrl: "https://staging.layerfi.com"
+    apiUrl: "https://staging.layerfi.com",
+    usePlaidSandbox: true
   }
 };
 var LayerProvider = (props) => {
@@ -2170,9 +2179,9 @@ var LinkedAccountsProvider = ({
 };
 
 // src/components/Container/Container.tsx
-import React8, { forwardRef as forwardRef2 } from "react";
+import React8, { forwardRef } from "react";
 import classNames2 from "classnames";
-var Container = forwardRef2(
+var Container = forwardRef(
   ({
     name,
     className,
@@ -2203,11 +2212,12 @@ var Container = forwardRef2(
     );
   }
 );
+Container.displayName = "Container";
 
 // src/components/Container/Header.tsx
-import React9, { forwardRef as forwardRef3 } from "react";
+import React9, { forwardRef as forwardRef2 } from "react";
 import classNames3 from "classnames";
-var Header = forwardRef3(
+var Header = forwardRef2(
   ({ className, children, style, layout }, ref) => {
     const baseClassName = classNames3(
       "Layer__component-header",
@@ -2217,6 +2227,7 @@ var Header = forwardRef3(
     return /* @__PURE__ */ React9.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
+Header.displayName = "Header";
 
 // src/components/Onboarding/ConnectAccount.tsx
 import React48, { useContext as useContext5, useMemo as useMemo3 } from "react";
@@ -2638,7 +2649,7 @@ var Loader_default = Loader;
 
 // src/components/Tooltip/Tooltip.tsx
 import React19, {
-  forwardRef as forwardRef4,
+  forwardRef as forwardRef3,
   isValidElement,
   cloneElement
 } from "react";
@@ -2736,7 +2747,7 @@ var Tooltip = (_a) => {
   const tooltip = useTooltip(options);
   return /* @__PURE__ */ React19.createElement(TooltipContext.Provider, { value: tooltip }, children);
 };
-var TooltipTrigger = forwardRef4(function TooltipTrigger2(_a, propRef) {
+var TooltipTrigger = forwardRef3(function TooltipTrigger2(_a, propRef) {
   var _b = _a, { children, asChild = false } = _b, props = __objRest(_b, ["children", "asChild"]);
   const context = useTooltipContext();
   const childrenRef = children.ref;
@@ -2761,8 +2772,8 @@ var TooltipTrigger = forwardRef4(function TooltipTrigger2(_a, propRef) {
     children
   );
 });
-var TooltipContent = forwardRef4(function TooltipContent2(_a, propRef) {
-  var _b = _a, { style, className } = _b, props = __objRest(_b, ["style", "className"]);
+var TooltipContent = forwardRef3(function TooltipContent2(_a, propRef) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   const context = useTooltipContext();
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!context.open || context.disabled)
@@ -2870,7 +2881,7 @@ import classNames5 from "classnames";
 var IconButton = (_a) => {
   var _b = _a, {
     className,
-    children,
+    children: _children,
     icon,
     active,
     withBorder = false,
@@ -2970,7 +2981,7 @@ var RetryButton = (_a) => {
     className,
     processing,
     disabled,
-    error,
+    error: _error,
     children
   } = _b, props = __objRest(_b, [
     "className",
@@ -3235,11 +3246,9 @@ import classNames9 from "classnames";
 var BackButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     textOnly = false
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "textOnly"
   ]);
   const baseClassName = classNames9("Layer__btn", "Layer__back-btn", className);
@@ -3290,11 +3299,9 @@ import classNames10 from "classnames";
 var CloseButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     textOnly = false
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "textOnly"
   ]);
   const baseClassName = classNames10("Layer__btn", "Layer__back-btn", className);
@@ -3307,11 +3314,9 @@ import classNames11 from "classnames";
 var ExpandButton = (_a) => {
   var _b = _a, {
     className,
-    children,
     collapsed
   } = _b, props = __objRest(_b, [
     "className",
-    "children",
     "collapsed"
   ]);
   const baseClassName = classNames11(
@@ -3640,9 +3645,9 @@ var TextWithTooltip = (_a) => {
     as: Component2 = "p",
     className,
     children,
-    size = "md" /* md */,
-    weight = "normal" /* normal */,
-    withTooltip = "whenTruncated" /* whenTruncated */,
+    size: _size = "md" /* md */,
+    weight: _weight = "normal" /* normal */,
+    withTooltip: _withTooltip = "whenTruncated" /* whenTruncated */,
     tooltipOptions
   } = _b, props = __objRest(_b, [
     "as",
@@ -4782,7 +4787,7 @@ var LinkedAccountsComponent = ({
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import React124, { useEffect as useEffect22, useMemo as useMemo6, useState as useState28 } from "react";
+import React124, { useEffect as useEffect22, useMemo as useMemo8, useState as useState28 } from "react";
 
 // src/hooks/useElementSize/useElementSize.ts
 import { useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
@@ -4932,7 +4937,7 @@ var File = (_a) => {
 var File_default = File;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import React96, { useEffect as useEffect13, useRef as useRef9, useState as useState16 } from "react";
+import React96, { useEffect as useEffect13, useMemo as useMemo4, useRef as useRef9, useState as useState16 } from "react";
 
 // src/icons/Scissors.tsx
 import * as React65 from "react";
@@ -5067,6 +5072,19 @@ var Scissors = (_a) => {
 };
 var Scissors_default = Scissors;
 
+// src/utils/styleUtils/toDataProperties.ts
+function toDataProperties(input) {
+  const unsafeProperties = Object.fromEntries(
+    Object.entries(input).map(([key, value]) => {
+      if (typeof value !== "string" && typeof value !== "number" && value !== true) {
+        return null;
+      }
+      return [`data-${key}`, value];
+    }).filter((entry) => entry !== null)
+  );
+  return unsafeProperties;
+}
+
 // src/components/CategorySelect/CategorySelect.tsx
 import React73 from "react";
 import Select, {
@@ -5387,7 +5405,7 @@ import classNames24 from "classnames";
 var CategorySelectDrawer = ({
   onSelect,
   selected,
-  showTooltips
+  showTooltips: _showTooltips
 }) => {
   var _a, _b;
   const { setContent, close } = useContext10(DrawerContext);
@@ -5661,7 +5679,7 @@ var CategorySelect = ({
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
 import React93, {
-  forwardRef as forwardRef6,
+  forwardRef as forwardRef5,
   useImperativeHandle as useImperativeHandle2,
   useState as useState15,
   useCallback,
@@ -5788,7 +5806,7 @@ var Trash = (_a) => {
 var Trash_default = Trash;
 
 // src/components/BankTransactionReceipts/BankTransactionReceipts.tsx
-import React86, { forwardRef as forwardRef5, useImperativeHandle } from "react";
+import React86, { forwardRef as forwardRef4, useImperativeHandle } from "react";
 
 // src/contexts/ReceiptsContext/ReceiptsContext.ts
 import { createContext as createContext5, useContext as useContext11 } from "react";
@@ -5989,7 +6007,6 @@ var Eye_default = Eye;
 import classNames26 from "classnames";
 var FileThumb = ({
   url,
-  type,
   floatingActions = false,
   uploadPending,
   deletePending,
@@ -6380,11 +6397,12 @@ var openReceiptInNewTab = (url, index) => (e) => {
       `);
   }
 };
-var BankTransactionReceiptsWithProvider = forwardRef5((_a, ref) => {
+var BankTransactionReceiptsWithProvider = forwardRef4((_a, ref) => {
   var _b = _a, { bankTransaction, isActive } = _b, props = __objRest(_b, ["bankTransaction", "isActive"]);
   return /* @__PURE__ */ React86.createElement(ReceiptsProvider, { bankTransaction, isActive }, /* @__PURE__ */ React86.createElement(BankTransactionReceipts, __spreadProps(__spreadValues({}, props), { ref })));
 });
-var BankTransactionReceipts = forwardRef5(
+BankTransactionReceiptsWithProvider.displayName = "BankTransactionReceiptsWithProvider";
+var BankTransactionReceipts = forwardRef4(
   ({
     classNamePrefix = "Layer",
     floatingActions = false,
@@ -6425,6 +6443,7 @@ var BankTransactionReceipts = forwardRef5(
     ) : null);
   }
 );
+BankTransactionReceipts.displayName = "BankTransactionReceipts";
 
 // src/components/MatchForm/MatchForm.tsx
 import React88 from "react";
@@ -6718,7 +6737,7 @@ var ToggleOption = ({
   name,
   onChange,
   value,
-  size,
+  size: _size,
   leftIcon,
   disabled,
   disabledMessage = "Disabled",
@@ -6900,7 +6919,7 @@ var validateSplit = (splitData) => {
   });
   return valid;
 };
-var ExpandedBankTransactionRow = forwardRef6(
+var ExpandedBankTransactionRow = forwardRef5(
   ({
     bankTransaction,
     isOpen = false,
@@ -6917,8 +6936,7 @@ var ExpandedBankTransactionRow = forwardRef6(
     var _a, _b, _c, _d, _e, _f, _g;
     const {
       categorize: categorizeBankTransaction2,
-      match: matchBankTransaction2,
-      updateOneLocal: updateBankTransaction
+      match: matchBankTransaction2
     } = useBankTransactionsContext();
     const [purpose, setPurpose] = useState15(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
@@ -7031,19 +7049,15 @@ var ExpandedBankTransactionRow = forwardRef6(
     };
     const save = () => __async(void 0, null, function* () {
       if (showDescriptions && memoText != void 0) {
-        const result = yield Layer.updateBankTransactionMetadata(
-          apiUrl,
-          auth.access_token,
-          {
-            params: {
-              businessId,
-              bankTransactionId: bankTransaction.id
-            },
-            body: {
-              memo: memoText
-            }
+        yield Layer.updateBankTransactionMetadata(apiUrl, auth.access_token, {
+          params: {
+            businessId,
+            bankTransactionId: bankTransaction.id
+          },
+          body: {
+            memo: memoText
           }
-        );
+        });
       }
       if (purpose === "match" /* match */) {
         if (!selectedMatchId) {
@@ -7357,6 +7371,7 @@ var ExpandedBankTransactionRow = forwardRef6(
     );
   }
 );
+ExpandedBankTransactionRow.displayName = "ExpandedBankTransactionRow";
 
 // src/components/IconBox/IconBox.tsx
 import React94 from "react";
@@ -7409,6 +7424,7 @@ var BankTransactionRow = ({
   initialLoad,
   showDescriptions,
   showReceiptUploads,
+  showReceiptUploadColumn,
   showTooltips,
   stringOverrides
 }) => {
@@ -7495,6 +7511,10 @@ var BankTransactionRow = ({
     initialLoad ? "initial-load" : "",
     showComponent ? "show" : ""
   );
+  const showReceiptDataProperties = useMemo4(
+    () => toDataProperties({ showReceiptUploadColumn }),
+    [showReceiptUploadColumn]
+  );
   return /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement("tr", { className: rowClassName }, /* @__PURE__ */ React96.createElement(
     "td",
     __spreadValues({
@@ -7534,11 +7554,17 @@ var BankTransactionRow = ({
     ))
   ), /* @__PURE__ */ React96.createElement(
     "td",
-    __spreadValues({
+    __spreadValues(__spreadValues({
       className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
-    }, openRow),
+    }, openRow), showReceiptDataProperties),
     /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
-  ), /* @__PURE__ */ React96.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__documents-col" }, ((_c = bankTransaction.document_ids) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React96.createElement(IconBox, null, /* @__PURE__ */ React96.createElement(File_default, { size: 12 })))), /* @__PURE__ */ React96.createElement(
+  ), /* @__PURE__ */ React96.createElement(
+    "td",
+    __spreadValues({
+      className: "Layer__table-cell Layer__bank-transactions__documents-col"
+    }, showReceiptDataProperties),
+    showReceiptUploads && ((_c = bankTransaction.document_ids) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ React96.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React96.createElement(IconBox, null, /* @__PURE__ */ React96.createElement(File_default, { size: 12 })))
+  ), /* @__PURE__ */ React96.createElement(
     "td",
     {
       className: classNames37(
@@ -7898,7 +7924,7 @@ import React108, { useContext as useContext14, useEffect as useEffect20, useRef
 import React107 from "react";
 
 // src/components/BankTransactionMobileList/BusinessForm.tsx
-import React102, { useContext as useContext13, useEffect as useEffect16, useMemo as useMemo4, useRef as useRef11, useState as useState19 } from "react";
+import React102, { useContext as useContext13, useEffect as useEffect16, useMemo as useMemo5, useRef as useRef11, useState as useState19 } from "react";
 
 // src/icons/Paperclip.tsx
 import React100 from "react";
@@ -8024,7 +8050,7 @@ var BusinessForm = ({
       setShowRetry(true);
     }
   }, [bankTransaction.error]);
-  const options = useMemo4(() => {
+  const options = useMemo5(() => {
     var _a2;
     const options2 = ((_a2 = bankTransaction == null ? void 0 : bankTransaction.categorization_flow) == null ? void 0 : _a2.type) === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions.map(
       (x) => mapCategoryToOption(x)
@@ -8197,7 +8223,6 @@ var isAlreadyAssigned = (bankTransaction) => {
 var PersonalForm = ({
   bankTransaction,
   showReceiptUploads,
-  isOpen,
   showDescriptions
 }) => {
   var _a;
@@ -8417,8 +8442,7 @@ var SplitForm = ({
   const receiptsRef = useRef14(null);
   const {
     categorize: categorizeBankTransaction2,
-    isLoading,
-    error
+    isLoading
   } = useBankTransactionsContext();
   const { memoText, setMemoText, saveMemoText } = useMemoTextContext();
   const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && ((_b = (_a = bankTransaction.categorization_flow) == null ? void 0 : _a.suggestions) == null ? void 0 : _b[0]);
@@ -8670,7 +8694,6 @@ var SplitAndMatchForm = ({
   bankTransaction,
   showTooltips,
   showReceiptUploads,
-  isOpen,
   showDescriptions
 }) => {
   const anyMatch = hasMatch(bankTransaction);
@@ -8722,7 +8745,6 @@ var BankTransactionMobileForms = ({
           {
             bankTransaction,
             showReceiptUploads,
-            isOpen,
             showDescriptions
           }
         );
@@ -8733,7 +8755,6 @@ var BankTransactionMobileForms = ({
             bankTransaction,
             showTooltips,
             showReceiptUploads,
-            isOpen,
             showDescriptions
           }
         );
@@ -8981,7 +9002,7 @@ var BankTransactionMobileList = ({
 };
 
 // src/components/BankTransactionsTable/BankTransactionsTable.tsx
-import React114 from "react";
+import React114, { useMemo as useMemo6 } from "react";
 
 // src/components/BankTransactionsLoader/BankTransactionsLoader.tsx
 import React112 from "react";
@@ -9142,14 +9163,35 @@ var BankTransactionsTable = ({
   lastPage,
   onRefresh
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const showReceiptColumn = (_a = showReceiptUploads && (bankTransactions == null ? void 0 : bankTransactions.some(
+    (transaction) => {
+      var _a2;
+      return ((_a2 = transaction.document_ids) == null ? void 0 : _a2.length) > 0;
+    }
+  ))) != null ? _a : false;
+  const showReceiptDataProperties = useMemo6(
+    () => toDataProperties({ showReceiptUploadColumn: showReceiptColumn }),
+    [showReceiptColumn]
+  );
   return /* @__PURE__ */ React114.createElement(
     "table",
     {
       width: "100%",
       className: "Layer__table Layer__bank-transactions__table with-cell-separators"
     },
-    /* @__PURE__ */ React114.createElement("thead", null, /* @__PURE__ */ React114.createElement("tr", null, /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, ((_a = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _a.dateColumnHeaderText) || "Date"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _b.transactionColumnHeaderText) || "Transaction"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _c.accountColumnHeaderText) || "Account"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _d.amountColumnHeaderText) || "Amount"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__documents-col" }), categorizeView && editable ? /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, ((_e = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _e.categorizeColumnHeaderText) || "Categorize") : /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _f.categoryColumnHeaderText) || "Category"))),
+    /* @__PURE__ */ React114.createElement("thead", null, /* @__PURE__ */ React114.createElement("tr", null, /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _b.dateColumnHeaderText) || "Date"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _c.transactionColumnHeaderText) || "Transaction"), /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _d.accountColumnHeaderText) || "Account"), /* @__PURE__ */ React114.createElement(
+      "th",
+      __spreadValues({
+        className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col"
+      }, showReceiptDataProperties),
+      ((_e = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _e.amountColumnHeaderText) || "Amount"
+    ), /* @__PURE__ */ React114.createElement(
+      "th",
+      __spreadValues({
+        className: "Layer__table-header Layer__bank-transactions__documents-col"
+      }, showReceiptDataProperties)
+    ), categorizeView && editable ? /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _f.categorizeColumnHeaderText) || "Categorize") : /* @__PURE__ */ React114.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, ((_g = stringOverrides == null ? void 0 : stringOverrides.transactionsTable) == null ? void 0 : _g.categoryColumnHeaderText) || "Category"))),
     isLoading && page && page === 1 ? /* @__PURE__ */ React114.createElement(BankTransactionsLoader, { isLoading: true, showTooltips }) : null,
     /* @__PURE__ */ React114.createElement("tbody", null, !isLoading && (bankTransactions == null ? void 0 : bankTransactions.map(
       (bankTransaction, index) => /* @__PURE__ */ React114.createElement(
@@ -9166,6 +9208,7 @@ var BankTransactionsTable = ({
           containerWidth,
           showDescriptions,
           showReceiptUploads,
+          showReceiptUploadColumn: showReceiptColumn,
           showTooltips,
           stringOverrides: stringOverrides == null ? void 0 : stringOverrides.bankTransactionCTAs
         }
@@ -9225,7 +9268,7 @@ var ErrorBoundary = class extends Component {
 import React118 from "react";
 
 // src/hooks/usePagination/usePagination.ts
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo7 } from "react";
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -9233,7 +9276,7 @@ var usePagination = ({
   siblingCount = 1,
   currentPage
 }) => {
-  const paginationRange = useMemo5(() => {
+  const paginationRange = useMemo7(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPageCount) {
@@ -9515,7 +9558,7 @@ var DatePicker = (_a) => {
     dateFormat = mode === "monthPicker" || mode === "monthRangePicker" ? "MMM, yyyy" : mode === "timePicker" ? "h:mm aa" : "MMM d, yyyy",
     timeIntervals = 15,
     timeCaption,
-    placeholderText,
+    placeholderText: _placeholderText,
     customDateRanges,
     wrapperClassName,
     calendarClassName,
@@ -10042,7 +10085,7 @@ var BankTransactionsContent = ({
     removeAfterCategorize
   } = useBankTransactionsContext();
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo6(
+  const isSyncing = useMemo8(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -10083,7 +10126,7 @@ var BankTransactionsContent = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [loadingStatus]);
-  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo6(() => {
+  const bankTransactions = TEST_EMPTY_STATE ? [] : useMemo8(() => {
     if (monthlyView) {
       return data == null ? void 0 : data.filter(
         (x) => parseISO12(x.date) >= dateRange.startDate && parseISO12(x.date) <= dateRange.endDate
@@ -10258,7 +10301,7 @@ var useQuickbooks = () => {
     setQuickbooksIsLinked(isConnected);
   });
   const syncFromQuickbooks2 = () => {
-    DEBUG2 && console.log("Triggering sync from Quickbooks...");
+    DEBUG2 && console.debug("Triggering sync from Quickbooks...");
     setIsSyncingFromQuickbooks(true);
     try {
       Layer.syncFromQuickbooks(apiUrl, auth.access_token, {
@@ -10269,7 +10312,7 @@ var useQuickbooks = () => {
     }
   };
   const fetchIsSyncingFromQuickbooks = () => __async(void 0, null, function* () {
-    DEBUG2 && console.log("Fetching status of sync from Quickbooks...");
+    DEBUG2 && console.debug("Fetching status of sync from Quickbooks...");
     const isSyncing = (yield Layer.statusOfSyncFromQuickbooks(apiUrl, auth.access_token, {
       params: { businessId }
     })()).data.is_syncing;
@@ -10318,7 +10361,7 @@ var Quickbooks = () => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React161, { createContext as createContext10 } from "react";
+import React164, { createContext as createContext10 } from "react";
 
 // src/contexts/ProfitAndLossComparisonContext/ProfitAndLossComparisonContext.tsx
 import { createContext as createContext8 } from "react";
@@ -10346,7 +10389,7 @@ var PNLComparisonContext = createContext8({
 });
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo8, useState as useState31 } from "react";
+import { useMemo as useMemo10, useState as useState31 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -10402,7 +10445,7 @@ var applyShare = (items, total) => {
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useEffect as useEffect24, useMemo as useMemo7, useState as useState30 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo9, useState as useState30 } from "react";
 import { startOfMonth as startOfMonth5, sub } from "date-fns";
 import useSWR3 from "swr";
 var buildDates = ({ currentDate }) => {
@@ -10431,7 +10474,7 @@ var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
   const [date, setDate] = useState30(currentDate);
   const [loaded, setLoaded] = useState30("initial");
   const [data, setData] = useState30([]);
-  const { startYear, startMonth, endYear, endMonth } = useMemo7(() => {
+  const { startYear, startMonth, endYear, endMonth } = useMemo9(() => {
     return buildDates({ currentDate: date });
   }, [date, businessId, tagFilter, reportingBasis]);
   const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && (auth == null ? void 0 : auth.access_token) && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter == null ? void 0 : tagFilter.key}-${(_a = tagFilter == null ? void 0 : tagFilter.values) == null ? void 0 : _a.join(
@@ -10669,7 +10712,7 @@ var useProfitAndLoss = ({
       })
     }));
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo8(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo10(() => {
     var _a;
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
@@ -10721,7 +10764,7 @@ var useProfitAndLoss = ({
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
   }, [data, startDate, filters, sidebarScope, summaryData]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo8(() => {
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo10(() => {
     var _a;
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
@@ -10952,7 +10995,7 @@ var useProfitAndLossComparison = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React129, { useContext as useContext15, useEffect as useEffect28, useMemo as useMemo9, useState as useState34 } from "react";
+import React129, { useContext as useContext15, useEffect as useEffect28, useMemo as useMemo11, useState as useState34 } from "react";
 
 // src/components/ProfitAndLossChart/ChartStateCard.tsx
 import React127 from "react";
@@ -11184,7 +11227,7 @@ var ProfitAndLossChart = ({
     start: startOfMonth9(sub2(Date.now(), { months: 11 })),
     end: endOfMonth6(Date.now())
   });
-  const selectionMonth = useMemo9(
+  const selectionMonth = useMemo11(
     () => ({
       year: localDateRange.startDate.getFullYear(),
       month: localDateRange.startDate.getMonth()
@@ -11200,7 +11243,7 @@ var ProfitAndLossChart = ({
     currentDate: startOfMonth9(Date.now()),
     tagFilter
   });
-  const anyData = useMemo9(() => {
+  const anyData = useMemo11(() => {
     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
@@ -11208,11 +11251,11 @@ var ProfitAndLossChart = ({
     );
   }, [data]);
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo9(
+  const isSyncing = useMemo11(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
-  const loadingValue = useMemo9(() => getLoadingValue(data), [data]);
+  const loadingValue = useMemo11(() => getLoadingValue(data), [data]);
   useEffect28(() => {
     if (loaded === "complete" && data) {
       const foundCurrent = data.find(
@@ -11271,7 +11314,7 @@ var ProfitAndLossChart = ({
     loading: (pnl == null ? void 0 : pnl.isLoading) ? loadingValue : 0,
     loadingExpenses: (pnl == null ? void 0 : pnl.isLoading) ? -loadingValue : 0
   });
-  const theData = useMemo9(() => {
+  const theData = useMemo11(() => {
     var _a2;
     if (loaded !== "complete" || loaded === "complete" && !anyData) {
       const loadingData = [];
@@ -12031,7 +12074,7 @@ var X = (_a) => {
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React136, { useMemo as useMemo10 } from "react";
+import React136, { useMemo as useMemo12 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -12333,7 +12376,7 @@ var DetailedChart = ({
   isLoading,
   showDatePicker = true
 }) => {
-  const chartData = useMemo10(() => {
+  const chartData = useMemo12(() => {
     if (!filteredData) {
       return [];
     }
@@ -12789,7 +12832,7 @@ var ProfitAndLossDownloadButton = ({
 };
 
 // src/components/ProfitAndLossHeader/ProfitAndLossHeader.tsx
-import React141, { useMemo as useMemo11 } from "react";
+import React141, { useMemo as useMemo13 } from "react";
 
 // src/components/SyncingBadge/SyncingBadge.tsx
 import React140 from "react";
@@ -12813,7 +12856,7 @@ var ProfitAndLossHeader = ({
   withDatePicker
 }) => {
   const { data: linkedAccounts } = useLinkedAccounts();
-  const isSyncing = useMemo11(
+  const isSyncing = useMemo13(
     () => Boolean(linkedAccounts == null ? void 0 : linkedAccounts.some((item) => item.is_syncing)),
     [linkedAccounts]
   );
@@ -12825,10 +12868,10 @@ import React148, { useContext as useContext20 } from "react";
 
 // src/components/Header/Header.tsx
 import React142, {
-  forwardRef as forwardRef7
+  forwardRef as forwardRef6
 } from "react";
 import classNames51 from "classnames";
-var Header2 = forwardRef7(
+var Header2 = forwardRef6(
   ({ className, children, style, sticky, asHeader, rounded }, ref) => {
     const baseClassName = classNames51(
       "Layer__header",
@@ -12850,6 +12893,7 @@ var Header2 = forwardRef7(
     );
   }
 );
+Header2.displayName = "Header";
 
 // src/components/Header/HeaderRow.tsx
 import React143 from "react";
@@ -12909,7 +12953,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-import React147, { forwardRef as forwardRef8 } from "react";
+import React147, { forwardRef as forwardRef7 } from "react";
 
 // src/components/ViewHeader/ViewHeader.tsx
 import React146 from "react";
@@ -12920,7 +12964,7 @@ var ViewHeader = ({ title, className, children }) => {
 
 // src/components/View/View.tsx
 import classNames56 from "classnames";
-var View = forwardRef8(
+var View = forwardRef7(
   ({
     title,
     showHeader = true,
@@ -12951,6 +12995,7 @@ var View = forwardRef8(
     ), withSidebar ? /* @__PURE__ */ React147.createElement(Panel, { sidebarIsOpen: true, sidebar, defaultSidebarHeight: true }, /* @__PURE__ */ React147.createElement("div", { className: "Layer__view-main" }, children)) : /* @__PURE__ */ React147.createElement("div", { className: "Layer__view-main" }, children));
   }
 );
+View.displayName = "View";
 
 // src/components/ProfitAndLossReport/ProfitAndLossReport.tsx
 var ProfitAndLossReport = ({
@@ -13025,14 +13070,88 @@ var ProfitAndLossReport = ({
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React150, { useContext as useContext21, useMemo as useMemo12 } from "react";
+import React153, { useContext as useContext21, useMemo as useMemo17 } from "react";
+
+// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesList.tsx
+import React149, { useMemo as useMemo14 } from "react";
+var LIST_ITEM_CLASS_NAME = "Layer__ProfitAndLossSummariesListItem";
+function ProfitAndLossSummariesListItem({
+  children,
+  isActive,
+  onClick
+}) {
+  const dataProperties = useMemo14(
+    () => toDataProperties({ active: isActive, clickable: !!onClick }),
+    [isActive]
+  );
+  return /* @__PURE__ */ React149.createElement("li", __spreadProps(__spreadValues({ className: LIST_ITEM_CLASS_NAME }, dataProperties), { onClick }), children);
+}
+var LIST_CLASS_NAME = "Layer__ProfitAndLossSummariesList";
+function ProfitAndLossSummariesList({
+  children,
+  itemCount
+}) {
+  const dataProperties = useMemo14(
+    () => toDataProperties({ ["column-count"]: itemCount }),
+    [itemCount]
+  );
+  return /* @__PURE__ */ React149.createElement("ul", __spreadValues({ className: LIST_CLASS_NAME }, dataProperties), children);
+}
 
-// src/components/ProfitAndLossSummaries/MiniChart.tsx
-import React149 from "react";
+// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesMiniChart.tsx
+import React150 from "react";
 import { PieChart as PieChart2, Pie as Pie2, Cell as Cell3 } from "recharts";
-var MiniChart = ({ data, chartColorsList }) => {
+var CHART_PLACEHOLDER = [
+  {
+    name: "placeholder",
+    display_name: "placeholder",
+    value: 1,
+    type: "placeholder",
+    share: 1
+  }
+];
+function toMiniChartData({
+  scope,
+  data
+}) {
+  if (!data) {
+    return CHART_PLACEHOLDER;
+  }
+  let items = [];
+  switch (scope) {
+    case "revenue":
+      items = collectRevenueItems(data);
+      break;
+    default:
+      items = collectExpensesItems(data);
+  }
+  if (!items || items.length === 0 || !items.find((x) => Math.abs(x.value) !== 0)) {
+    return CHART_PLACEHOLDER;
+  }
+  return items.slice();
+}
+function ProfitAndLossSummariesMiniChart({
+  data,
+  chartColorsList,
+  variants
+}) {
   const typeColorMapping = mapTypesToColors(data, chartColorsList);
-  return /* @__PURE__ */ React149.createElement(PieChart2, { width: 52, height: 52, className: "mini-chart" }, /* @__PURE__ */ React149.createElement(
+  let chartDimension = 52;
+  let innerRadius = 10;
+  let outerRadius = 16;
+  switch (variants == null ? void 0 : variants.size) {
+    case "sm":
+      chartDimension = 52;
+      innerRadius = 10;
+      outerRadius = 16;
+      break;
+    case "lg":
+      chartDimension = 64;
+      innerRadius = 12;
+      outerRadius = 20;
+      break;
+  }
+  return /* @__PURE__ */ React150.createElement(PieChart2, { width: chartDimension, height: chartDimension }, /* @__PURE__ */ React150.createElement(
     Pie2,
     {
       data,
@@ -13040,18 +13159,18 @@ var MiniChart = ({ data, chartColorsList }) => {
       nameKey: "name",
       cx: "50%",
       cy: "50%",
-      innerRadius: 10,
-      outerRadius: 16,
+      innerRadius,
+      outerRadius,
       paddingAngle: 0.4,
       fill: "#8884d8",
-      width: 24,
-      height: 24,
+      width: 36,
+      height: 36,
       animationDuration: 250,
       animationEasing: "ease-in-out"
     },
     data.map((entry, index) => {
       const colorConfig = typeColorMapping[index];
-      return /* @__PURE__ */ React149.createElement(
+      return /* @__PURE__ */ React150.createElement(
         Cell3,
         {
           key: `cell-${index}`,
@@ -13062,44 +13181,61 @@ var MiniChart = ({ data, chartColorsList }) => {
       );
     })
   ));
-};
+}
+
+// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesSummary.tsx
+import React152, { useMemo as useMemo16 } from "react";
+
+// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesHeading.tsx
+import { useMemo as useMemo15 } from "react";
+import React151 from "react";
+var HEADING_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryHeading";
+function ProfitAndLossSummariesHeading({
+  variants,
+  children
+}) {
+  const { size = "sm" } = variants != null ? variants : {};
+  const labelDataProperties = useMemo15(() => toDataProperties({ size }), [size]);
+  return /* @__PURE__ */ React151.createElement("h3", __spreadValues({ className: HEADING_CLASS_NAME }, labelDataProperties), children);
+}
+
+// src/components/ProfitAndLossSummaries/internal/ProfitAndLossSummariesSummary.tsx
+var CLASS_NAME = "Layer__ProfitAndLossSummariesSummary";
+var CHART_AREA_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryChartArea";
+var AMOUNT_CLASS_NAME = "Layer__ProfitAndLossSummariesSummaryAmount";
+function ProfitAndLossSummariesSummary({
+  label,
+  amount,
+  isLoading,
+  slots,
+  variants
+}) {
+  const { Chart } = slots != null ? slots : {};
+  const { size = "sm" } = variants != null ? variants : {};
+  const dataProperties = useMemo16(() => toDataProperties({ size }), [size]);
+  const amountDataProperties = useMemo16(
+    () => toDataProperties({
+      positive: amount >= 0,
+      negative: amount < 0,
+      size
+    }),
+    [amount, size]
+  );
+  return /* @__PURE__ */ React152.createElement("div", __spreadValues({ className: CLASS_NAME }, dataProperties), Chart && /* @__PURE__ */ React152.createElement("div", { className: CHART_AREA_CLASS_NAME }, Chart), /* @__PURE__ */ React152.createElement(ProfitAndLossSummariesHeading, { variants }, label), isLoading ? /* @__PURE__ */ React152.createElement(SkeletonLoader, null) : /* @__PURE__ */ React152.createElement("span", __spreadValues({ className: AMOUNT_CLASS_NAME }, amountDataProperties), centsToDollars(Math.abs(amount))));
+}
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames57 from "classnames";
-var CHART_PLACEHOLDER = [
-  {
-    name: "placeholder",
-    display_name: "placeholder",
-    value: 1,
-    type: "placeholder",
-    share: 1
-  }
-];
-var buildMiniChartData = (scope, data) => {
-  if (!data) {
-    return CHART_PLACEHOLDER;
-  }
-  let items = [];
-  switch (scope) {
-    case "revenue":
-      items = collectRevenueItems(data);
-      break;
-    default:
-      items = collectExpensesItems(data);
-  }
-  if (!items || items.length === 0 || !items.find((x) => Math.abs(x.value) !== 0)) {
-    return CHART_PLACEHOLDER;
-  }
-  return items.slice();
-};
-var ProfitAndLossSummaries = ({
-  vertical,
+var SECTION_CLASS_NAME = "Layer__ProfitAndLossSummaries";
+var SECTION_CLASS_NAMES = `${SECTION_CLASS_NAME} Layer__component`;
+function Internal_ProfitAndLossSummaries({
   actionable = false,
   revenueLabel,
   stringOverrides,
-  chartColorsList
-}) => {
-  var _a, _b, _c, _d, _e, _f;
+  chartColorsList,
+  slots,
+  variants
+}) {
+  var _a, _b;
   const {
     data: storedData,
     isLoading,
@@ -13107,91 +13243,83 @@ var ProfitAndLossSummaries = ({
     sidebarScope
   } = useContext21(ProfitAndLoss.Context);
   const dataItem = Array.isArray(storedData) ? storedData[storedData.length - 1] : storedData;
-  const expensesChartData = useMemo12(() => {
-    return buildMiniChartData("expenses", dataItem);
-  }, [storedData]);
-  const revenueChartData = useMemo12(() => {
-    return buildMiniChartData("revenue", dataItem);
-  }, [storedData]);
+  const { revenueChartData, expensesChartData } = useMemo17(
+    () => ({
+      revenueChartData: toMiniChartData({ scope: "revenue", data: dataItem }),
+      expensesChartData: toMiniChartData({ scope: "expenses", data: dataItem })
+    }),
+    [dataItem]
+  );
   const data = dataItem ? dataItem : { income: { value: NaN }, net_profit: NaN };
-  const incomeDirectionClass = ((_a = data.income.value) != null ? _a : NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  const expensesDirectionClass = ((_c = (_b = data == null ? void 0 : data.income) == null ? void 0 : _b.value) != null ? _c : NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  return /* @__PURE__ */ React150.createElement(
-    "div",
+  const { unstable_AdditionalListItems = [] } = slots != null ? slots : {};
+  const listItemCount = unstable_AdditionalListItems.length + 3;
+  return /* @__PURE__ */ React153.createElement("section", { className: SECTION_CLASS_NAMES }, /* @__PURE__ */ React153.createElement(ProfitAndLossSummariesList, { itemCount: listItemCount }, /* @__PURE__ */ React153.createElement(
+    ProfitAndLossSummariesListItem,
     {
-      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
+      isActive: sidebarScope === "revenue",
+      onClick: actionable ? () => setSidebarScope("revenue") : void 0
     },
-    /* @__PURE__ */ React150.createElement(
-      "div",
+    /* @__PURE__ */ React153.createElement(
+      ProfitAndLossSummariesSummary,
       {
-        className: classNames57(
-          "Layer__profit-and-loss-summaries__summary",
-          actionable && "Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--income",
-          sidebarScope === "revenue" ? "active" : ""
-        ),
-        onClick: () => {
-          actionable && setSidebarScope("revenue");
-        }
-      },
-      /* @__PURE__ */ React150.createElement(MiniChart, { data: revenueChartData, chartColorsList }),
-      /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React150.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, (stringOverrides == null ? void 0 : stringOverrides.revenueLabel) || revenueLabel || "Revenue"), isLoading || storedData === void 0 ? /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React150.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React150.createElement(
-        "span",
-        {
-          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
-        },
-        centsToDollars(Math.abs((_e = (_d = data == null ? void 0 : data.income) == null ? void 0 : _d.value) != null ? _e : NaN))
-      ))
-    ),
-    /* @__PURE__ */ React150.createElement(
-      "div",
-      {
-        className: classNames57(
-          "Layer__profit-and-loss-summaries__summary",
-          actionable && "Layer__actionable",
-          "Layer__profit-and-loss-summaries__summary--expenses",
-          sidebarScope === "expenses" ? "active" : ""
-        ),
-        onClick: () => {
-          actionable && setSidebarScope("expenses");
-        }
-      },
-      /* @__PURE__ */ React150.createElement(MiniChart, { data: expensesChartData, chartColorsList }),
-      /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React150.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, (stringOverrides == null ? void 0 : stringOverrides.expensesLabel) || "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React150.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React150.createElement(
-        "span",
-        {
-          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        label: (stringOverrides == null ? void 0 : stringOverrides.revenueLabel) || revenueLabel || "Revenue",
+        amount: data.income.value,
+        isLoading,
+        slots: {
+          Chart: /* @__PURE__ */ React153.createElement(
+            ProfitAndLossSummariesMiniChart,
+            {
+              data: revenueChartData,
+              chartColorsList,
+              variants
+            }
+          )
         },
-        centsToDollars(
-          Math.abs(((_f = data.income.value) != null ? _f : 0) - data.net_profit)
-        )
-      ))
-    ),
-    /* @__PURE__ */ React150.createElement(
-      "div",
+        variants
+      }
+    )
+  ), /* @__PURE__ */ React153.createElement(
+    ProfitAndLossSummariesListItem,
+    {
+      isActive: sidebarScope === "expenses",
+      onClick: actionable ? () => setSidebarScope("expenses") : void 0
+    },
+    /* @__PURE__ */ React153.createElement(
+      ProfitAndLossSummariesSummary,
       {
-        className: classNames57(
-          "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
-          actionable && "Layer__actionable"
-        )
-      },
-      /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React150.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, (stringOverrides == null ? void 0 : stringOverrides.netProfitLabel) || "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React150.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React150.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React150.createElement(
-        "span",
-        {
-          className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
+        label: (stringOverrides == null ? void 0 : stringOverrides.revenueLabel) || revenueLabel || "Expenses",
+        amount: ((_b = (_a = data == null ? void 0 : data.income) == null ? void 0 : _a.value) != null ? _b : NaN) - data.net_profit,
+        isLoading,
+        slots: {
+          Chart: /* @__PURE__ */ React153.createElement(
+            ProfitAndLossSummariesMiniChart,
+            {
+              data: expensesChartData,
+              chartColorsList,
+              variants
+            }
+          )
         },
-        centsToDollars(Math.abs(data.net_profit))
-      ))
+        variants
+      }
     )
-  );
-};
+  ), /* @__PURE__ */ React153.createElement(ProfitAndLossSummariesListItem, null, /* @__PURE__ */ React153.createElement(
+    ProfitAndLossSummariesSummary,
+    {
+      label: (stringOverrides == null ? void 0 : stringOverrides.netProfitLabel) || "Net Profit",
+      amount: data.net_profit,
+      variants,
+      isLoading
+    }
+  )), unstable_AdditionalListItems.map((item, index) => /* @__PURE__ */ React153.createElement(ProfitAndLossSummariesListItem, { key: index }, item))));
+}
+var ProfitAndLossSummaries = (props) => Internal_ProfitAndLossSummaries(props);
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
-import React160, { useContext as useContext25 } from "react";
+import React163, { useContext as useContext25 } from "react";
 
 // src/contexts/TableContext/TableContext.tsx
-import React151, { createContext as createContext9, useState as useState40 } from "react";
+import React154, { createContext as createContext9, useState as useState40 } from "react";
 var defaultValue = {
   expandedRows: [],
   setExpandedRows: () => {
@@ -13227,11 +13355,11 @@ var TableProvider = ({ children }) => {
     expandedAllRows,
     setExpandedAllRows
   };
-  return /* @__PURE__ */ React151.createElement(TableContext.Provider, { value: contextValue }, children);
+  return /* @__PURE__ */ React154.createElement(TableContext.Provider, { value: contextValue }, children);
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-import React157, { useContext as useContext23, useEffect as useEffect32 } from "react";
+import React160, { useContext as useContext23, useEffect as useEffect32 } from "react";
 
 // src/hooks/useTableExpandRow/useTableExpandRow.tsx
 import { useContext as useContext22 } from "react";
@@ -13333,14 +13461,14 @@ var mergeComparisonLineItemsAtDepth = (lineItems) => {
 };
 
 // src/components/TableBody/TableBody.tsx
-import React152 from "react";
+import React155 from "react";
 var TableBody = ({ children }) => {
-  return /* @__PURE__ */ React152.createElement("tbody", { className: "Layer__table-body" }, children);
+  return /* @__PURE__ */ React155.createElement("tbody", { className: "Layer__table-body" }, children);
 };
 
 // src/components/TableCell/TableCell.tsx
-import React153 from "react";
-import classNames58 from "classnames";
+import React156 from "react";
+import classNames57 from "classnames";
 var TableCell = ({
   children,
   className,
@@ -13358,7 +13486,7 @@ var TableCell = ({
   const amount = typeof children === "number" ? children : 0;
   const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = classNames58(
+  const cellClassNames = classNames57(
     "Layer__table-cell",
     (primary || isHeaderCell) && "Layer__table-cell--primary",
     isCurrency && "Layer__table-cell-amount",
@@ -13368,9 +13496,9 @@ var TableCell = ({
     className
   );
   if (isHeaderCell) {
-    return /* @__PURE__ */ React153.createElement("th", { className: cellClassNames, colSpan, style }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, children));
+    return /* @__PURE__ */ React156.createElement("th", { className: cellClassNames, colSpan, style }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, children));
   }
-  return /* @__PURE__ */ React153.createElement(
+  return /* @__PURE__ */ React156.createElement(
     "td",
     {
       className: cellClassNames,
@@ -13378,7 +13506,7 @@ var TableCell = ({
       colSpan,
       onClick: (e) => onClick && onClick(e)
     },
-    /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React153.createElement(
+    /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React156.createElement(
       ChevronDownFill_default,
       {
         className: "Layer__table-row--expand-icon",
@@ -13389,14 +13517,14 @@ var TableCell = ({
 };
 
 // src/components/TableHead/TableHead.tsx
-import React154 from "react";
+import React157 from "react";
 var TableHead = ({ children }) => {
-  return /* @__PURE__ */ React154.createElement("thead", { className: "Layer__table-header" }, children);
+  return /* @__PURE__ */ React157.createElement("thead", { className: "Layer__table-header" }, children);
 };
 
 // src/components/TableRow/TableRow.tsx
-import React155 from "react";
-import classNames59 from "classnames";
+import React158 from "react";
+import classNames58 from "classnames";
 var TableRow = ({
   rowKey,
   children,
@@ -13420,14 +13548,14 @@ var TableRow = ({
       handleExpand && handleExpand();
     }
   };
-  const rowClassNames = classNames59([
+  const rowClassNames = classNames58([
     "Layer__table-row",
     !isHeadRow && `Layer__table-row--depth-${depth}`,
     !isHeadRow && `Layer__table-row--variant-${variant}`,
     selected && "Layer__table-row--selected",
     !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
   ]);
-  return /* @__PURE__ */ React155.createElement(React155.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React155.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React155.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React155.createElement(
+  return /* @__PURE__ */ React158.createElement(React158.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React158.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React158.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React158.createElement(
     "tr",
     {
       "data-key": rowKey,
@@ -13435,12 +13563,12 @@ var TableRow = ({
       onClick: (e) => toggleExpanded(e)
     },
     children
-  ), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React155.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React155.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+  ), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React158.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React158.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
 };
 
 // src/components/Table/Table.tsx
-import React156, { useEffect as useEffect31, useRef as useRef19 } from "react";
-import classNames60 from "classnames";
+import React159, { useEffect as useEffect31, useRef as useRef19 } from "react";
+import classNames59 from "classnames";
 var Table = ({
   componentName,
   children,
@@ -13480,20 +13608,20 @@ var Table = ({
       prevChildrenRef.current = newChildrenKeys;
     }
   }, [children]);
-  const tableWrapperClassNames = classNames60(
+  const tableWrapperClassNames = classNames59(
     "Layer__table-wrapper",
     bottomSpacing && "Layer__table-wrapper--bottom-spacing"
   );
-  const tableClassNames = classNames60(
+  const tableClassNames = classNames59(
     "Layer__table",
     componentName && `Layer__${componentName}__table`,
     borderCollapse && `Layer__table__${borderCollapse}-rows`
   );
-  return /* @__PURE__ */ React156.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React156.createElement("table", { className: tableClassNames, ref: tableRef }, children));
+  return /* @__PURE__ */ React159.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React159.createElement("table", { className: tableClassNames, ref: tableRef }, children));
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossCompareTable.tsx
-import classNames61 from "classnames";
+import classNames60 from "classnames";
 var ProfitAndLossCompareTable = ({
   stringOverrides
 }) => {
@@ -13521,12 +13649,12 @@ var ProfitAndLossCompareTable = ({
     }
   }, [dateRange, comparisonData]);
   if (isLoading || comparisonData === void 0) {
-    return /* @__PURE__ */ React157.createElement(
+    return /* @__PURE__ */ React160.createElement(
       "div",
       {
-        className: classNames61("Layer__profit-and-loss-table__loader-container")
+        className: classNames60("Layer__profit-and-loss-table__loader-container")
       },
-      /* @__PURE__ */ React157.createElement(Loader2, null)
+      /* @__PURE__ */ React160.createElement(Loader2, null)
     );
   }
   const renderRow = (rowKey, depth, rowDisplayName, lineItem, data) => {
@@ -13538,7 +13666,7 @@ var ProfitAndLossCompareTable = ({
         }
       });
       if (rowData.length === 0) {
-        return /* @__PURE__ */ React157.createElement(React157.Fragment, null);
+        return /* @__PURE__ */ React160.createElement(React160.Fragment, null);
       }
       const mergedLineItems = mergeComparisonLineItemsAtDepth(
         rowData
@@ -13547,7 +13675,7 @@ var ProfitAndLossCompareTable = ({
     }
     const expandable = (lineItem == null ? void 0 : lineItem.line_items) && lineItem.line_items.length > 0 ? true : false;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React157.createElement(React157.Fragment, { key: rowKey }, /* @__PURE__ */ React157.createElement(
+    return /* @__PURE__ */ React160.createElement(React160.Fragment, { key: rowKey }, /* @__PURE__ */ React160.createElement(
       TableRow,
       {
         rowKey,
@@ -13557,8 +13685,8 @@ var ProfitAndLossCompareTable = ({
         variant: expandable ? "expandable" : "default",
         handleExpand: () => setIsOpen(rowKey)
       },
-      /* @__PURE__ */ React157.createElement(TableCell, { primary: true, withExpandIcon: expandable }, lineItem ? lineItem.display_name : rowDisplayName),
-      rowData.map((cell, i) => /* @__PURE__ */ React157.createElement(TableCell, { key: "compare-value" + i, isCurrency: true }, getComparisonValue(
+      /* @__PURE__ */ React160.createElement(TableCell, { primary: true, withExpandIcon: expandable }, lineItem ? lineItem.display_name : rowDisplayName),
+      rowData.map((cell, i) => /* @__PURE__ */ React160.createElement(TableCell, { key: "compare-value" + i, isCurrency: true }, getComparisonValue(
         lineItem ? lineItem.display_name : rowDisplayName,
         depth,
         cell
@@ -13573,13 +13701,13 @@ var ProfitAndLossCompareTable = ({
       )
     ) : null);
   };
-  return /* @__PURE__ */ React157.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React157.createElement(TableHead, null, compareOptions && compareOptions.length > 1 && /* @__PURE__ */ React157.createElement(TableRow, { rowKey: "" }, /* @__PURE__ */ React157.createElement(TableCell, { isHeaderCell: true }), compareOptions.map((option, i) => /* @__PURE__ */ React157.createElement(React157.Fragment, { key: option + "-" + i }, /* @__PURE__ */ React157.createElement(TableCell, { key: option + "-" + i, primary: true, isHeaderCell: true }, option.displayName), compareMonths && Array.from({ length: compareMonths - 1 }, (_, index) => /* @__PURE__ */ React157.createElement(TableCell, { key: option + "-" + index, isHeaderCell: true })))))), /* @__PURE__ */ React157.createElement(TableBody, null, compareMonths && /* @__PURE__ */ React157.createElement(TableRow, { rowKey: "" }, /* @__PURE__ */ React157.createElement(TableCell, { isHeaderCell: true }), compareOptions && compareOptions.length > 0 ? compareOptions.map((option, i) => /* @__PURE__ */ React157.createElement(React157.Fragment, { key: option + "-" + i }, generatComparisonMonths(
+  return /* @__PURE__ */ React160.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React160.createElement(TableHead, null, compareOptions && compareOptions.length > 1 && /* @__PURE__ */ React160.createElement(TableRow, { rowKey: "" }, /* @__PURE__ */ React160.createElement(TableCell, { isHeaderCell: true }), compareOptions.map((option, i) => /* @__PURE__ */ React160.createElement(React160.Fragment, { key: option + "-" + i }, /* @__PURE__ */ React160.createElement(TableCell, { key: option + "-" + i, primary: true, isHeaderCell: true }, option.displayName), compareMonths && Array.from({ length: compareMonths - 1 }, (_, index) => /* @__PURE__ */ React160.createElement(TableCell, { key: option + "-" + index, isHeaderCell: true })))))), /* @__PURE__ */ React160.createElement(TableBody, null, compareMonths && /* @__PURE__ */ React160.createElement(TableRow, { rowKey: "" }, /* @__PURE__ */ React160.createElement(TableCell, { isHeaderCell: true }), compareOptions && compareOptions.length > 0 ? compareOptions.map((option, i) => /* @__PURE__ */ React160.createElement(React160.Fragment, { key: option + "-" + i }, generatComparisonMonths(
     dateRange.startDate,
     compareMonths
-  ).map((month, index) => /* @__PURE__ */ React157.createElement(TableCell, { key: option + "-" + index, isHeaderCell: true }, month)))) : /* @__PURE__ */ React157.createElement(React157.Fragment, { key: "total-1" }, generatComparisonMonths(
+  ).map((month, index) => /* @__PURE__ */ React160.createElement(TableCell, { key: option + "-" + index, isHeaderCell: true }, month)))) : /* @__PURE__ */ React160.createElement(React160.Fragment, { key: "total-1" }, generatComparisonMonths(
     dateRange.startDate,
     compareMonths
-  ).map((month, index) => /* @__PURE__ */ React157.createElement(TableCell, { key: "total-" + index + "-cell", isHeaderCell: true }, month)))), renderRow("income", 0, "Income"), renderRow("cost_of_goods_sold", 0, "Cost of Goods Sold"), renderRow(
+  ).map((month, index) => /* @__PURE__ */ React160.createElement(TableCell, { key: "total-" + index + "-cell", isHeaderCell: true }, month)))), renderRow("income", 0, "Income"), renderRow("cost_of_goods_sold", 0, "Cost of Goods Sold"), renderRow(
     "gross_profit",
     0,
     (stringOverrides == null ? void 0 : stringOverrides.grossProfitLabel) || "Gross Profit"
@@ -13595,13 +13723,13 @@ var ProfitAndLossCompareTable = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
-import React159, { useContext as useContext24, useEffect as useEffect33 } from "react";
+import React162, { useContext as useContext24, useEffect as useEffect33 } from "react";
 
 // src/icons/PieChart.tsx
-import * as React158 from "react";
+import * as React161 from "react";
 var PieChart3 = (_a) => {
   var _b = _a, { size = 12 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React158.createElement(
+  return /* @__PURE__ */ React161.createElement(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -13611,7 +13739,7 @@ var PieChart3 = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React158.createElement("g", null, /* @__PURE__ */ React158.createElement(
+    /* @__PURE__ */ React161.createElement("g", null, /* @__PURE__ */ React161.createElement(
       "path",
       {
         d: "M10.2213 7.78271C9.92969 8.47226 9.47363 9.07989 8.89297 9.55247C8.3123 10.0251 7.62471 10.3482 6.89031 10.4936C6.1559 10.6391 5.39705 10.6024 4.68009 10.3869C3.96313 10.1713 3.30989 9.78337 2.77749 9.25701C2.24509 8.73065 1.84973 8.08189 1.62598 7.36744C1.40223 6.65298 1.3569 5.8946 1.49396 5.15858C1.63102 4.42257 1.94629 3.73133 2.41221 3.14531C2.87813 2.55928 3.48051 2.09631 4.16669 1.79688",
@@ -13619,7 +13747,7 @@ var PieChart3 = (_a) => {
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ), /* @__PURE__ */ React158.createElement(
+    ), /* @__PURE__ */ React161.createElement(
       "path",
       {
         d: "M10.5833 6.00033C10.5833 5.39843 10.4648 4.80244 10.2344 4.24636C10.0041 3.69028 9.66651 3.18502 9.24091 2.75942C8.8153 2.33382 8.31004 1.99621 7.75397 1.76588C7.19789 1.53554 6.60189 1.41699 6 1.41699V6.00033H10.5833Z",
@@ -13681,7 +13809,7 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
-import classNames62 from "classnames";
+import classNames61 from "classnames";
 var ProfitAndLossTableComponent = ({
   asContainer,
   stringOverrides
@@ -13698,21 +13826,21 @@ var ProfitAndLossTableComponent = ({
   const currentData = Array.isArray(actualData) ? actualData[actualData.length - 1] : actualData;
   const data = !currentData || isLoading ? empty_profit_and_loss_report_default : currentData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ React159.createElement(
+    return /* @__PURE__ */ React162.createElement(
       "div",
       {
-        className: classNames62(
+        className: classNames61(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
       },
-      /* @__PURE__ */ React159.createElement(Loader2, null)
+      /* @__PURE__ */ React162.createElement(Loader2, null)
     );
   }
   const renderLineItem = (lineItem, depth, rowKey, rowIndex, scope, setSidebarScope2, variant) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React159.createElement(React159.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React159.createElement(
+    return /* @__PURE__ */ React162.createElement(React162.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React162.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex,
@@ -13722,7 +13850,7 @@ var ProfitAndLossTableComponent = ({
         variant: variant ? variant : expandable ? "expandable" : "default",
         handleExpand: () => setIsOpen(rowKey)
       },
-      /* @__PURE__ */ React159.createElement(
+      /* @__PURE__ */ React162.createElement(
         TableCell,
         {
           primary: true,
@@ -13731,7 +13859,7 @@ var ProfitAndLossTableComponent = ({
         },
         lineItem.display_name,
         " ",
-        setSidebarScope2 && /* @__PURE__ */ React159.createElement(
+        setSidebarScope2 && /* @__PURE__ */ React162.createElement(
           "span",
           {
             className: "Layer__profit-and-loss-row__detailed-chart-btn",
@@ -13740,10 +13868,10 @@ var ProfitAndLossTableComponent = ({
               setSidebarScope2 && setSidebarScope2(scope != null ? scope : "expenses");
             }
           },
-          /* @__PURE__ */ React159.createElement(PieChart_default, null)
+          /* @__PURE__ */ React162.createElement(PieChart_default, null)
         )
       ),
-      /* @__PURE__ */ React159.createElement(TableCell, { isCurrency: true, primary: true }, Number.isNaN(lineItem.value) ? 0 : lineItem.value)
+      /* @__PURE__ */ React162.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, Number.isNaN(lineItem.value) ? 0 : lineItem.value)
     ), expanded && lineItem.line_items ? lineItem.line_items.map(
       (child, i) => renderLineItem(
         child,
@@ -13753,7 +13881,7 @@ var ProfitAndLossTableComponent = ({
       )
     ) : null);
   };
-  return /* @__PURE__ */ React159.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React159.createElement(TableBody, null, renderLineItem(
+  return /* @__PURE__ */ React162.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React162.createElement(TableBody, null, renderLineItem(
     data.income,
     0,
     "income",
@@ -13807,13 +13935,13 @@ var ProfitAndLossTableComponent = ({
     void 0,
     void 0,
     "summation"
-  ), data.personal_expenses ? /* @__PURE__ */ React159.createElement(React159.Fragment, null, renderLineItem(data.personal_expenses, 0, "personal_expenses", 7)) : null, data.other_outflows ? /* @__PURE__ */ React159.createElement(React159.Fragment, null, renderLineItem(data.other_outflows, 0, "other_outflows", 6)) : null));
+  ), data.personal_expenses ? /* @__PURE__ */ React162.createElement(React162.Fragment, null, renderLineItem(data.personal_expenses, 0, "personal_expenses", 7)) : null, data.other_outflows ? /* @__PURE__ */ React162.createElement(React162.Fragment, null, renderLineItem(data.other_outflows, 0, "other_outflows", 6)) : null));
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
 var ProfitAndLossTableWithProvider = (props) => {
   const { compareMode } = useContext25(ProfitAndLoss.ComparisonContext);
-  return /* @__PURE__ */ React160.createElement(TableProvider, null, compareMode ? /* @__PURE__ */ React160.createElement("div", { className: "Layer__compare__table__wrapper" }, /* @__PURE__ */ React160.createElement(ProfitAndLossCompareTable, __spreadValues({}, props))) : /* @__PURE__ */ React160.createElement(ProfitAndLossTableComponent, __spreadValues({}, props)));
+  return /* @__PURE__ */ React163.createElement(TableProvider, null, compareMode ? /* @__PURE__ */ React163.createElement("div", { className: "Layer__compare__table__wrapper" }, /* @__PURE__ */ React163.createElement(ProfitAndLossCompareTable, __spreadValues({}, props))) : /* @__PURE__ */ React163.createElement(ProfitAndLossTableComponent, __spreadValues({}, props)));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
@@ -13856,7 +13984,7 @@ var ProfitAndLoss = ({
 }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
   const comparisonContextData = useProfitAndLossComparison({ reportingBasis });
-  return /* @__PURE__ */ React161.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React161.createElement(PNLComparisonContext.Provider, { value: comparisonContextData }, asContainer ? /* @__PURE__ */ React161.createElement(Container, { name: "profit-and-loss" }, children) : children));
+  return /* @__PURE__ */ React164.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React164.createElement(PNLComparisonContext.Provider, { value: comparisonContextData }, asContainer ? /* @__PURE__ */ React164.createElement(Container, { name: "profit-and-loss" }, children) : children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -13871,7 +13999,7 @@ ProfitAndLoss.Report = ProfitAndLossReport;
 ProfitAndLoss.DownloadButton = ProfitAndLossDownloadButton;
 
 // src/components/BalanceSheet/BalanceSheet.tsx
-import React165, { useEffect as useEffect37, useState as useState42 } from "react";
+import React168, { useEffect as useEffect37, useState as useState42 } from "react";
 
 // src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
 import { createContext as createContext11 } from "react";
@@ -13959,12 +14087,12 @@ var useElementViewSize = (callback) => {
 };
 
 // src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
-import React162 from "react";
+import React165 from "react";
 var BalanceSheetDatePicker = ({
   effectiveDate,
   setEffectiveDate
 }) => {
-  return /* @__PURE__ */ React162.createElement(React162.Fragment, null, /* @__PURE__ */ React162.createElement(
+  return /* @__PURE__ */ React165.createElement(React165.Fragment, null, /* @__PURE__ */ React165.createElement(
     DatePicker,
     {
       selected: effectiveDate,
@@ -13975,12 +14103,12 @@ var BalanceSheetDatePicker = ({
 };
 
 // src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
-import React163 from "react";
+import React166 from "react";
 var BalanceSheetExpandAllButton = ({
   view
 }) => {
   const { expandedAllRows, toggleAllRows } = useTableExpandRow();
-  return /* @__PURE__ */ React163.createElement(
+  return /* @__PURE__ */ React166.createElement(
     ExpandCollapseButton,
     {
       onClick: toggleAllRows,
@@ -13991,7 +14119,7 @@ var BalanceSheetExpandAllButton = ({
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import React164, { useEffect as useEffect36 } from "react";
+import React167, { useEffect as useEffect36 } from "react";
 var BalanceSheetTable = ({
   data,
   config,
@@ -14014,7 +14142,7 @@ var BalanceSheetTable = ({
     if (expandable) {
       allRowKeys.push(rowKey);
     }
-    return /* @__PURE__ */ React164.createElement(React164.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React164.createElement(
+    return /* @__PURE__ */ React167.createElement(React167.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React167.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex,
@@ -14024,8 +14152,8 @@ var BalanceSheetTable = ({
         depth,
         withDivider: depth === 0 && rowIndex > 0
       },
-      /* @__PURE__ */ React164.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
-      /* @__PURE__ */ React164.createElement(
+      /* @__PURE__ */ React167.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
+      /* @__PURE__ */ React167.createElement(
         TableCell,
         {
           isCurrency: !expandable || expandable && !expanded,
@@ -14041,18 +14169,18 @@ var BalanceSheetTable = ({
         rowKey + ":" + subItem.name,
         subIdx
       )
-    ), showChildren && expandable && /* @__PURE__ */ React164.createElement(
+    ), showChildren && expandable && /* @__PURE__ */ React167.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex + "--summation",
         depth: depth + 1,
         variant: "summation"
       },
-      /* @__PURE__ */ React164.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
-      /* @__PURE__ */ React164.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, lineItem.value)
+      /* @__PURE__ */ React167.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
+      /* @__PURE__ */ React167.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, lineItem.value)
     ));
   };
-  return /* @__PURE__ */ React164.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React164.createElement(TableHead, null, /* @__PURE__ */ React164.createElement(TableRow, { isHeadRow: true, rowKey: "balance-sheet-head-row" }, /* @__PURE__ */ React164.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React164.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.totalColumnHeader) || "Total"))), /* @__PURE__ */ React164.createElement(TableBody, null, config.map((row, idx) => /* @__PURE__ */ React164.createElement(React164.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
+  return /* @__PURE__ */ React167.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React167.createElement(TableHead, null, /* @__PURE__ */ React167.createElement(TableRow, { isHeadRow: true, rowKey: "balance-sheet-head-row" }, /* @__PURE__ */ React167.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React167.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.totalColumnHeader) || "Total"))), /* @__PURE__ */ React167.createElement(TableBody, null, config.map((row, idx) => /* @__PURE__ */ React167.createElement(React167.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
     data[row.lineItem],
     0,
     row.lineItem,
@@ -14079,7 +14207,7 @@ import { format as format5, parse, startOfDay as startOfDay2 } from "date-fns";
 var COMPONENT_NAME3 = "balance-sheet";
 var BalanceSheet = (props) => {
   const balanceSheetContextData = useBalanceSheet(props.effectiveDate);
-  return /* @__PURE__ */ React165.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React165.createElement(
+  return /* @__PURE__ */ React168.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React168.createElement(
     BalanceSheetView,
     __spreadValues({
       asWidget: props.asWidget,
@@ -14111,20 +14239,20 @@ var BalanceSheetView = ({
     }
   }, [effectiveDate]);
   if (asWidget) {
-    return /* @__PURE__ */ React165.createElement(TableProvider, null, /* @__PURE__ */ React165.createElement(Container, { name: COMPONENT_NAME3, asWidget: true }, /* @__PURE__ */ React165.createElement(
+    return /* @__PURE__ */ React168.createElement(TableProvider, null, /* @__PURE__ */ React168.createElement(Container, { name: COMPONENT_NAME3, asWidget: true }, /* @__PURE__ */ React168.createElement(
       View,
       {
         type: "panel",
         ref: containerRef,
-        header: /* @__PURE__ */ React165.createElement(Header2, null, /* @__PURE__ */ React165.createElement(HeaderRow, null, /* @__PURE__ */ React165.createElement(HeaderCol, null, /* @__PURE__ */ React165.createElement(
+        header: /* @__PURE__ */ React168.createElement(Header2, null, /* @__PURE__ */ React168.createElement(HeaderRow, null, /* @__PURE__ */ React168.createElement(HeaderCol, null, /* @__PURE__ */ React168.createElement(
           BalanceSheetDatePicker,
           {
             effectiveDate,
             setEffectiveDate
           }
-        )), withExpandAllButton && /* @__PURE__ */ React165.createElement(HeaderCol, null, /* @__PURE__ */ React165.createElement(BalanceSheetExpandAllButton, { view }))))
+        )), withExpandAllButton && /* @__PURE__ */ React168.createElement(HeaderCol, null, /* @__PURE__ */ React168.createElement(BalanceSheetExpandAllButton, { view }))))
       },
-      !data || isLoading ? /* @__PURE__ */ React165.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React165.createElement(Loader2, null)) : /* @__PURE__ */ React165.createElement(
+      !data || isLoading ? /* @__PURE__ */ React168.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React168.createElement(Loader2, null)) : /* @__PURE__ */ React168.createElement(
         BalanceSheetTable,
         {
           data,
@@ -14134,20 +14262,20 @@ var BalanceSheetView = ({
       )
     )));
   }
-  return /* @__PURE__ */ React165.createElement(TableProvider, null, /* @__PURE__ */ React165.createElement(
+  return /* @__PURE__ */ React168.createElement(TableProvider, null, /* @__PURE__ */ React168.createElement(
     View,
     {
       type: "panel",
       ref: containerRef,
-      header: /* @__PURE__ */ React165.createElement(Header2, null, /* @__PURE__ */ React165.createElement(HeaderRow, null, /* @__PURE__ */ React165.createElement(HeaderCol, null, /* @__PURE__ */ React165.createElement(
+      header: /* @__PURE__ */ React168.createElement(Header2, null, /* @__PURE__ */ React168.createElement(HeaderRow, null, /* @__PURE__ */ React168.createElement(HeaderCol, null, /* @__PURE__ */ React168.createElement(
         BalanceSheetDatePicker,
         {
           effectiveDate,
           setEffectiveDate
         }
-      )), withExpandAllButton && /* @__PURE__ */ React165.createElement(HeaderCol, null, /* @__PURE__ */ React165.createElement(BalanceSheetExpandAllButton, { view }))))
+      )), withExpandAllButton && /* @__PURE__ */ React168.createElement(HeaderCol, null, /* @__PURE__ */ React168.createElement(BalanceSheetExpandAllButton, { view }))))
     },
-    !data || isLoading ? /* @__PURE__ */ React165.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React165.createElement(Loader2, null)) : /* @__PURE__ */ React165.createElement(
+    !data || isLoading ? /* @__PURE__ */ React168.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React168.createElement(Loader2, null)) : /* @__PURE__ */ React168.createElement(
       BalanceSheetTable,
       {
         data,
@@ -14159,7 +14287,7 @@ var BalanceSheetView = ({
 };
 
 // src/components/StatementOfCashFlow/StatementOfCashFlow.tsx
-import React167, { useState as useState43 } from "react";
+import React170, { useState as useState43 } from "react";
 
 // src/contexts/StatementOfCashContext/StatementOfCashFlowContext.tsx
 import { createContext as createContext12 } from "react";
@@ -14210,7 +14338,7 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
 };
 
 // src/components/StatementOfCashFlowTable/StatementOfCashFlowTable.tsx
-import React166 from "react";
+import React169 from "react";
 var StatementOfCashFlowTable = ({
   data,
   config,
@@ -14220,7 +14348,7 @@ var StatementOfCashFlowTable = ({
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React166.createElement(React166.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React166.createElement(
+    return /* @__PURE__ */ React169.createElement(React169.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React169.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex,
@@ -14229,8 +14357,8 @@ var StatementOfCashFlowTable = ({
         handleExpand: () => setIsOpen(rowKey),
         depth
       },
-      /* @__PURE__ */ React166.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
-      /* @__PURE__ */ React166.createElement(
+      /* @__PURE__ */ React169.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
+      /* @__PURE__ */ React169.createElement(
         TableCell,
         {
           isCurrency: !expandable || expandable && !expanded,
@@ -14246,35 +14374,35 @@ var StatementOfCashFlowTable = ({
         rowKey + ":" + subItem.name,
         subIdx
       )
-    ), expanded && expandable && /* @__PURE__ */ React166.createElement(
+    ), expanded && expandable && /* @__PURE__ */ React169.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex + "--summation",
         depth: depth + 1,
         variant: "summation"
       },
-      /* @__PURE__ */ React166.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
-      /* @__PURE__ */ React166.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, lineItem.value)
+      /* @__PURE__ */ React169.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
+      /* @__PURE__ */ React169.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, lineItem.value)
     ));
   };
-  return /* @__PURE__ */ React166.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React166.createElement(TableHead, null, /* @__PURE__ */ React166.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React166.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React166.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.totalColumnHeader) || "Total"))), /* @__PURE__ */ React166.createElement(TableBody, null, config.map((row, idx) => {
+  return /* @__PURE__ */ React169.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React169.createElement(TableHead, null, /* @__PURE__ */ React169.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React169.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React169.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.totalColumnHeader) || "Total"))), /* @__PURE__ */ React169.createElement(TableBody, null, config.map((row, idx) => {
     if (row.type === "line_item") {
-      return /* @__PURE__ */ React166.createElement(React166.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
+      return /* @__PURE__ */ React169.createElement(React169.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
         data[row.lineItem],
         0,
         row.lineItem ? row.lineItem : "",
         idx
       ));
     } else {
-      return /* @__PURE__ */ React166.createElement(
+      return /* @__PURE__ */ React169.createElement(
         TableRow,
         {
           key: row.name + "-" + idx,
           rowKey: row.name + "-" + idx,
           variant: "default"
         },
-        /* @__PURE__ */ React166.createElement(TableCell, { primary: true }, row.displayName),
-        /* @__PURE__ */ React166.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, row.lineItem)
+        /* @__PURE__ */ React169.createElement(TableCell, { primary: true }, row.displayName),
+        /* @__PURE__ */ React169.createElement(TableCell, { primary: true, isCurrency: true, align: "right" /* RIGHT */ }, row.lineItem)
       );
     }
   })));
@@ -14324,7 +14452,7 @@ import { endOfMonth as endOfMonth9, startOfDay as startOfDay4, startOfMonth as s
 var COMPONENT_NAME4 = "statement-of-cash-flow";
 var StatementOfCashFlow = (props) => {
   const cashContextData = useStatementOfCashFlow();
-  return /* @__PURE__ */ React167.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React167.createElement(StatementOfCashFlowView, __spreadValues({}, props)));
+  return /* @__PURE__ */ React170.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React170.createElement(StatementOfCashFlowView, __spreadValues({}, props)));
 };
 var StatementOfCashFlowView = ({
   stringOverrides,
@@ -14355,7 +14483,7 @@ var StatementOfCashFlowView = ({
       refetch();
     }
   };
-  const datePicker = datePickerMode === "monthPicker" ? /* @__PURE__ */ React167.createElement(
+  const datePicker = datePickerMode === "monthPicker" ? /* @__PURE__ */ React170.createElement(
     DatePicker,
     {
       selected: startDate,
@@ -14373,7 +14501,7 @@ var StatementOfCashFlowView = ({
         ModeSelector: DatePickerModeSelector
       }
     }
-  ) : /* @__PURE__ */ React167.createElement(
+  ) : /* @__PURE__ */ React170.createElement(
     DatePicker,
     {
       selected: [startDate, endDate],
@@ -14388,13 +14516,13 @@ var StatementOfCashFlowView = ({
       }
     }
   );
-  return /* @__PURE__ */ React167.createElement(TableProvider, null, /* @__PURE__ */ React167.createElement(
+  return /* @__PURE__ */ React170.createElement(TableProvider, null, /* @__PURE__ */ React170.createElement(
     View,
     {
       type: "panel",
-      header: /* @__PURE__ */ React167.createElement(Header2, null, /* @__PURE__ */ React167.createElement(HeaderRow, null, /* @__PURE__ */ React167.createElement(HeaderCol, null, datePicker)))
+      header: /* @__PURE__ */ React170.createElement(Header2, null, /* @__PURE__ */ React170.createElement(HeaderRow, null, /* @__PURE__ */ React170.createElement(HeaderCol, null, datePicker)))
     },
-    !data || isLoading ? /* @__PURE__ */ React167.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React167.createElement(Loader2, null)) : /* @__PURE__ */ React167.createElement(
+    !data || isLoading ? /* @__PURE__ */ React170.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React170.createElement(Loader2, null)) : /* @__PURE__ */ React170.createElement(
       StatementOfCashFlowTable,
       {
         data,
@@ -14406,7 +14534,7 @@ var StatementOfCashFlowView = ({
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React182, { useContext as useContext33, useState as useState50 } from "react";
+import React185, { useContext as useContext33, useState as useState50 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext13 } from "react";
@@ -15047,13 +15175,13 @@ var useLedgerAccounts = (showReversalEntries = false) => {
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTableWithPanel.tsx
-import React174, { useContext as useContext29, useState as useState47 } from "react";
+import React177, { useContext as useContext29, useState as useState47 } from "react";
 
 // src/icons/Plus.tsx
-import * as React168 from "react";
+import * as React171 from "react";
 var Plus = (_a) => {
   var _b = _a, { size = 14 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React168.createElement(
+  return /* @__PURE__ */ React171.createElement(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -15063,7 +15191,7 @@ var Plus = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React168.createElement(
+    /* @__PURE__ */ React171.createElement(
       "path",
       {
         d: "M7 2.91602V11.0827",
@@ -15072,7 +15200,7 @@ var Plus = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React168.createElement(
+    /* @__PURE__ */ React171.createElement(
       "path",
       {
         d: "M2.91669 7H11.0834",
@@ -15086,11 +15214,11 @@ var Plus = (_a) => {
 var Plus_default = Plus;
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
-import React169, { useContext as useContext26 } from "react";
+import React172, { useContext as useContext26 } from "react";
 import { endOfMonth as endOfMonth12, startOfMonth as startOfMonth15 } from "date-fns";
 var ChartOfAccountsDatePicker = () => {
   const { changeDateRange, dateRange } = useContext26(ChartOfAccountsContext);
-  return /* @__PURE__ */ React169.createElement(
+  return /* @__PURE__ */ React172.createElement(
     DatePicker,
     {
       mode: "monthPicker",
@@ -15108,16 +15236,16 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
-import React171 from "react";
+import React174 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React170, { useContext as useContext27, useMemo as useMemo14 } from "react";
+import React173, { useContext as useContext27, useMemo as useMemo19 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo18 } from "react";
 var useParentOptions = (data) => {
   var _a;
-  return useMemo13(
+  return useMemo18(
     () => 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,
@@ -15143,7 +15271,7 @@ var ChartOfAccountsForm = ({
     apiError
   } = useContext27(ChartOfAccountsContext);
   const parentOptions = useParentOptions(data);
-  const entry = useMemo14(() => {
+  const entry = useMemo19(() => {
     if ((form == null ? void 0 : form.action) === "edit" && form.accountId) {
       return flattenAccounts((data == null ? void 0 : data.accounts) || []).find(
         (x) => x.id === form.accountId
@@ -15154,7 +15282,7 @@ var ChartOfAccountsForm = ({
   if (!form) {
     return null;
   }
-  return /* @__PURE__ */ React170.createElement(
+  return /* @__PURE__ */ React173.createElement(
     "form",
     {
       className: "Layer__form",
@@ -15163,7 +15291,7 @@ var ChartOfAccountsForm = ({
         submitForm();
       }
     },
-    /* @__PURE__ */ React170.createElement(Header2, { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React170.createElement(HeaderRow, null, /* @__PURE__ */ React170.createElement(HeaderCol, null, /* @__PURE__ */ React170.createElement(Heading, { size: "secondary" /* secondary */, className: "title" }, (form == null ? void 0 : form.action) === "edit" ? (stringOverrides == null ? void 0 : stringOverrides.editModeHeader) || "Edit Account" : (stringOverrides == null ? void 0 : stringOverrides.createModeHeader) || "Add New Account")), /* @__PURE__ */ React170.createElement(HeaderCol, { className: "actions" }, /* @__PURE__ */ React170.createElement(
+    /* @__PURE__ */ React173.createElement(Header2, { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React173.createElement(HeaderRow, null, /* @__PURE__ */ React173.createElement(HeaderCol, null, /* @__PURE__ */ React173.createElement(Heading, { size: "secondary" /* secondary */, className: "title" }, (form == null ? void 0 : form.action) === "edit" ? (stringOverrides == null ? void 0 : stringOverrides.editModeHeader) || "Edit Account" : (stringOverrides == null ? void 0 : stringOverrides.createModeHeader) || "Add New Account")), /* @__PURE__ */ React173.createElement(HeaderCol, { className: "actions" }, /* @__PURE__ */ React173.createElement(
       Button,
       {
         type: "button",
@@ -15172,7 +15300,7 @@ var ChartOfAccountsForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.cancelButton) || "Cancel"
-    ), apiError && /* @__PURE__ */ React170.createElement(
+    ), apiError && /* @__PURE__ */ React173.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15181,7 +15309,7 @@ var ChartOfAccountsForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.retryButton) || "Retry"
-    ), !apiError && /* @__PURE__ */ React170.createElement(
+    ), !apiError && /* @__PURE__ */ React173.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15191,7 +15319,7 @@ var ChartOfAccountsForm = ({
       },
       (stringOverrides == null ? void 0 : stringOverrides.saveButton) || "Save"
     )))),
-    apiError && /* @__PURE__ */ React170.createElement(
+    apiError && /* @__PURE__ */ React173.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -15199,15 +15327,15 @@ var ChartOfAccountsForm = ({
       },
       apiError
     ),
-    entry && /* @__PURE__ */ React170.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React170.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React170.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ React170.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React170.createElement(
+    entry && /* @__PURE__ */ React173.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React173.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React173.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ React173.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React173.createElement(
       InputGroup,
       {
         name: "parent",
         label: (stringOverrides == null ? void 0 : stringOverrides.parentLabel) || "Parent",
         inline: true
       },
-      /* @__PURE__ */ React170.createElement(
+      /* @__PURE__ */ React173.createElement(
         Select2,
         {
           options: parentOptions,
@@ -15216,14 +15344,14 @@ var ChartOfAccountsForm = ({
           disabled: sendingForm
         }
       )
-    ), /* @__PURE__ */ React170.createElement(
+    ), /* @__PURE__ */ React173.createElement(
       InputGroup,
       {
         name: "name",
         label: (stringOverrides == null ? void 0 : stringOverrides.nameLabel) || "Name",
         inline: true
       },
-      /* @__PURE__ */ React170.createElement(
+      /* @__PURE__ */ React173.createElement(
         Input,
         {
           name: "name",
@@ -15235,14 +15363,14 @@ var ChartOfAccountsForm = ({
           onChange: (e) => changeFormData("name", e.target.value)
         }
       )
-    ), /* @__PURE__ */ React170.createElement(
+    ), /* @__PURE__ */ React173.createElement(
       InputGroup,
       {
         name: "type",
         label: (stringOverrides == null ? void 0 : stringOverrides.typeLabel) || "Type",
         inline: true
       },
-      /* @__PURE__ */ React170.createElement(
+      /* @__PURE__ */ React173.createElement(
         Select2,
         {
           options: LEDGER_ACCOUNT_TYPES,
@@ -15253,14 +15381,14 @@ var ChartOfAccountsForm = ({
           disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
         }
       )
-    ), /* @__PURE__ */ React170.createElement(
+    ), /* @__PURE__ */ React173.createElement(
       InputGroup,
       {
         name: "subType",
         label: (stringOverrides == null ? void 0 : stringOverrides.subTypeLabel) || "Sub-Type",
         inline: true
       },
-      /* @__PURE__ */ React170.createElement(
+      /* @__PURE__ */ React173.createElement(
         Select2,
         {
           options: ((_g = form == null ? void 0 : form.data.type) == null ? void 0 : _g.value) !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[(_h = form == null ? void 0 : form.data.type) == null ? void 0 : _h.value] : LEDGER_ACCOUNT_SUBTYPES,
@@ -15269,14 +15397,14 @@ var ChartOfAccountsForm = ({
           disabled: sendingForm
         }
       )
-    ), /* @__PURE__ */ React170.createElement(
+    ), /* @__PURE__ */ React173.createElement(
       InputGroup,
       {
         name: "normality",
         label: (stringOverrides == null ? void 0 : stringOverrides.normalityLabel) || "Normality",
         inline: true
       },
-      /* @__PURE__ */ React170.createElement(
+      /* @__PURE__ */ React173.createElement(
         Select2,
         {
           options: NORMALITY_OPTIONS,
@@ -15289,7 +15417,7 @@ var ChartOfAccountsForm = ({
           disabled: sendingForm
         }
       )
-    ), /* @__PURE__ */ React170.createElement("div", { className: "actions" }, /* @__PURE__ */ React170.createElement(
+    ), /* @__PURE__ */ React173.createElement("div", { className: "actions" }, /* @__PURE__ */ React173.createElement(
       Button,
       {
         type: "button",
@@ -15298,7 +15426,7 @@ var ChartOfAccountsForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.cancelButton) || "Cancel"
-    ), apiError && /* @__PURE__ */ React170.createElement(
+    ), apiError && /* @__PURE__ */ React173.createElement(
       RetryButton,
       {
         type: "submit",
@@ -15307,7 +15435,7 @@ var ChartOfAccountsForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.retryButton) || "Retry"
-    ), !apiError && /* @__PURE__ */ React170.createElement(
+    ), !apiError && /* @__PURE__ */ React173.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -15325,17 +15453,17 @@ var ChartOfAccountsSidebar = ({
   parentRef: _parentRef,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React171.createElement(ChartOfAccountsForm, { stringOverrides });
+  return /* @__PURE__ */ React174.createElement(ChartOfAccountsForm, { stringOverrides });
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import React173, { useContext as useContext28, useEffect as useEffect41, useState as useState46 } from "react";
+import React176, { useContext as useContext28, useEffect as useEffect41, useState as useState46 } from "react";
 
 // src/icons/Edit2.tsx
-import * as React172 from "react";
+import * as React175 from "react";
 var Edit2 = (_a) => {
   var _b = _a, { size = 18 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React172.createElement(
+  return /* @__PURE__ */ React175.createElement(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -15345,7 +15473,7 @@ var Edit2 = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React172.createElement(
+    /* @__PURE__ */ React175.createElement(
       "path",
       {
         d: "M12.75 2.25C12.947 2.05301 13.1808 1.89676 13.4382 1.79015C13.6956 1.68355 13.9714 1.62868 14.25 1.62868C14.5286 1.62868 14.8044 1.68355 15.0618 1.79015C15.3192 1.89676 15.553 2.05301 15.75 2.25C15.947 2.44698 16.1032 2.68083 16.2098 2.9382C16.3165 3.19557 16.3713 3.47142 16.3713 3.75C16.3713 4.02857 16.3165 4.30442 16.2098 4.56179C16.1032 4.81916 15.947 5.05302 15.75 5.25L5.625 15.375L1.5 16.5L2.625 12.375L12.75 2.25Z",
@@ -15368,7 +15496,7 @@ var ChartOfAccountsTable = ({
   cumulativeIndex,
   accountsLength,
   templateAccountsEditable = true
-}) => /* @__PURE__ */ React173.createElement(TableProvider, null, /* @__PURE__ */ React173.createElement(
+}) => /* @__PURE__ */ React176.createElement(TableProvider, null, /* @__PURE__ */ React176.createElement(
   ChartOfAccountsTableContent,
   {
     view,
@@ -15418,7 +15546,7 @@ var ChartOfAccountsTableContent = ({
     var _a, _b;
     const expandable = !!account.sub_accounts && account.sub_accounts.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React173.createElement(React173.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React173.createElement(
+    return /* @__PURE__ */ React176.createElement(React176.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React176.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + index,
@@ -15430,7 +15558,7 @@ var ChartOfAccountsTableContent = ({
         },
         depth
       },
-      /* @__PURE__ */ React173.createElement(
+      /* @__PURE__ */ React176.createElement(
         TableCell,
         {
           withExpandIcon: expandable,
@@ -15441,14 +15569,14 @@ var ChartOfAccountsTableContent = ({
         },
         account.name
       ),
-      /* @__PURE__ */ React173.createElement(TableCell, null, (_a = account.account_type) == null ? void 0 : _a.display_name),
-      /* @__PURE__ */ React173.createElement(TableCell, null, (_b = account.account_subtype) == null ? void 0 : _b.display_name),
-      /* @__PURE__ */ React173.createElement(TableCell, { isCurrency: true }, account.balance),
-      /* @__PURE__ */ React173.createElement(TableCell, null, /* @__PURE__ */ React173.createElement("span", { className: "Layer__coa__actions" }, /* @__PURE__ */ React173.createElement(
+      /* @__PURE__ */ React176.createElement(TableCell, null, (_a = account.account_type) == null ? void 0 : _a.display_name),
+      /* @__PURE__ */ React176.createElement(TableCell, null, (_b = account.account_subtype) == null ? void 0 : _b.display_name),
+      /* @__PURE__ */ React176.createElement(TableCell, { isCurrency: true }, account.balance),
+      /* @__PURE__ */ React176.createElement(TableCell, null, /* @__PURE__ */ React176.createElement("span", { className: "Layer__coa__actions" }, /* @__PURE__ */ React176.createElement(
         Button,
         {
           variant: "secondary" /* secondary */,
-          rightIcon: /* @__PURE__ */ React173.createElement(Edit2_default, { size: 12 }),
+          rightIcon: /* @__PURE__ */ React176.createElement(Edit2_default, { size: 12 }),
           iconOnly: true,
           disabled: !templateAccountsEditable && !!account.stable_name,
           onClick: (e) => {
@@ -15470,7 +15598,7 @@ var ChartOfAccountsTableContent = ({
       );
     }));
   };
-  return /* @__PURE__ */ React173.createElement(Table, null, /* @__PURE__ */ React173.createElement(TableHead, null, /* @__PURE__ */ React173.createElement(TableRow, { isHeadRow: true, rowKey: "charts-of-accounts-head-row" }, /* @__PURE__ */ React173.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.nameColumnHeader) || "Name"), /* @__PURE__ */ React173.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React173.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.subtypeColumnHeader) || "Sub-Type"), /* @__PURE__ */ React173.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.balanceColumnHeader) || "Balance"), /* @__PURE__ */ React173.createElement(TableCell, { isHeaderCell: true }))), /* @__PURE__ */ React173.createElement(TableBody, null, !error && data.accounts.map(
+  return /* @__PURE__ */ React176.createElement(Table, null, /* @__PURE__ */ React176.createElement(TableHead, null, /* @__PURE__ */ React176.createElement(TableRow, { isHeadRow: true, rowKey: "charts-of-accounts-head-row" }, /* @__PURE__ */ React176.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.nameColumnHeader) || "Name"), /* @__PURE__ */ React176.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.typeColumnHeader) || "Type"), /* @__PURE__ */ React176.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.subtypeColumnHeader) || "Sub-Type"), /* @__PURE__ */ React176.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.balanceColumnHeader) || "Balance"), /* @__PURE__ */ React176.createElement(TableCell, { isHeaderCell: true }))), /* @__PURE__ */ React176.createElement(TableBody, null, !error && data.accounts.map(
     (account, idx) => renderChartOfAccountsDesktopRow(
       account,
       idx,
@@ -15496,10 +15624,10 @@ var ChartOfAccountsTableWithPanel = ({
   const [expandAll, setExpandAll] = useState47();
   const cumulativeIndex = 0;
   const accountsLength = (_a = data == null ? void 0 : data.accounts.length) != null ? _a : 0;
-  return /* @__PURE__ */ React174.createElement(
+  return /* @__PURE__ */ React177.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React174.createElement(
+      sidebar: /* @__PURE__ */ React177.createElement(
         ChartOfAccountsSidebar,
         {
           parentRef: containerRef,
@@ -15509,7 +15637,7 @@ var ChartOfAccountsTableWithPanel = ({
       sidebarIsOpen: Boolean(form),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React174.createElement(Header2, { className: `Layer__${COMPONENT_NAME5}__header`, asHeader: true, rounded: true }, /* @__PURE__ */ React174.createElement(HeaderRow, null, /* @__PURE__ */ React174.createElement(HeaderCol, null, /* @__PURE__ */ React174.createElement(
+    /* @__PURE__ */ React177.createElement(Header2, { className: `Layer__${COMPONENT_NAME5}__header`, asHeader: true, rounded: true }, /* @__PURE__ */ React177.createElement(HeaderRow, null, /* @__PURE__ */ React177.createElement(HeaderCol, null, /* @__PURE__ */ React177.createElement(
       Heading,
       {
         className: `Layer__${COMPONENT_NAME5}__title`,
@@ -15517,13 +15645,13 @@ var ChartOfAccountsTableWithPanel = ({
       },
       (stringOverrides == null ? void 0 : stringOverrides.headerText) || "Chart of Accounts"
     )))),
-    /* @__PURE__ */ React174.createElement(Header2, { className: `Layer__${COMPONENT_NAME5}__header`, sticky: true }, /* @__PURE__ */ React174.createElement(HeaderRow, null, /* @__PURE__ */ React174.createElement(HeaderCol, null, /* @__PURE__ */ React174.createElement(
+    /* @__PURE__ */ React177.createElement(Header2, { className: `Layer__${COMPONENT_NAME5}__header`, sticky: true }, /* @__PURE__ */ React177.createElement(HeaderRow, null, /* @__PURE__ */ React177.createElement(HeaderCol, null, /* @__PURE__ */ React177.createElement(
       Heading,
       {
         size: "secondary" /* secondary */,
         className: `Layer__${COMPONENT_NAME5}__subtitle`
       },
-      withDateControl || withExpandAllButton ? /* @__PURE__ */ React174.createElement("div", { className: "Layer__header__actions-col" }, withDateControl && /* @__PURE__ */ React174.createElement(ChartOfAccountsDatePicker, null), withExpandAllButton && /* @__PURE__ */ React174.createElement(
+      withDateControl || withExpandAllButton ? /* @__PURE__ */ React177.createElement("div", { className: "Layer__header__actions-col" }, withDateControl && /* @__PURE__ */ React177.createElement(ChartOfAccountsDatePicker, null), withExpandAllButton && /* @__PURE__ */ React177.createElement(
         ExpandCollapseButton,
         {
           iconOnly: view === "mobile",
@@ -15534,17 +15662,17 @@ var ChartOfAccountsTableWithPanel = ({
           variant: "secondary" /* secondary */
         }
       )) : null
-    )), /* @__PURE__ */ React174.createElement(HeaderCol, null, /* @__PURE__ */ React174.createElement(
+    )), /* @__PURE__ */ React177.createElement(HeaderCol, null, /* @__PURE__ */ React177.createElement(
       Button,
       {
         onClick: () => addAccount(),
         disabled: isLoading,
         iconOnly: ["mobile", "tablet"].includes(view),
-        leftIcon: ["mobile", "tablet"].includes(view) && /* @__PURE__ */ React174.createElement(Plus_default, { size: 14 })
+        leftIcon: ["mobile", "tablet"].includes(view) && /* @__PURE__ */ React177.createElement(Plus_default, { size: 14 })
       },
       (stringOverrides == null ? void 0 : stringOverrides.addAccountButtonText) || "Add Account"
     )))),
-    data && /* @__PURE__ */ React174.createElement(
+    data && /* @__PURE__ */ React177.createElement(
       ChartOfAccountsTable,
       {
         view,
@@ -15557,7 +15685,7 @@ var ChartOfAccountsTableWithPanel = ({
         templateAccountsEditable
       }
     ),
-    error ? /* @__PURE__ */ React174.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React174.createElement(
+    error ? /* @__PURE__ */ React177.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React177.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -15567,8 +15695,8 @@ var ChartOfAccountsTableWithPanel = ({
         isLoading: isValidating || isLoading
       }
     )) : null,
-    (!data || isLoading) && !error ? /* @__PURE__ */ React174.createElement("div", { className: `Layer__${COMPONENT_NAME5}__loader-container` }, /* @__PURE__ */ React174.createElement(Loader2, null)) : null,
-    !isLoading && !error && (data == null ? void 0 : data.accounts.length) === 0 ? /* @__PURE__ */ React174.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React174.createElement(
+    (!data || isLoading) && !error ? /* @__PURE__ */ React177.createElement("div", { className: `Layer__${COMPONENT_NAME5}__loader-container` }, /* @__PURE__ */ React177.createElement(Loader2, null)) : null,
+    !isLoading && !error && (data == null ? void 0 : data.accounts.length) === 0 ? /* @__PURE__ */ React177.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React177.createElement(
       DataState,
       {
         status: "info" /* info */,
@@ -15582,15 +15710,15 @@ var ChartOfAccountsTableWithPanel = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import React181, {
+import React184, {
   useContext as useContext32,
   useEffect as useEffect43,
-  useMemo as useMemo16,
+  useMemo as useMemo21,
   useState as useState49
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import React179, { useContext as useContext30, useMemo as useMemo15 } from "react";
+import React182, { useContext as useContext30, useMemo as useMemo20 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -15614,14 +15742,14 @@ var entryNumber = (entry) => {
 };
 
 // src/components/Card/Card.tsx
-import React175 from "react";
-import classNames63 from "classnames";
+import React178 from "react";
+import classNames62 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React175.createElement("div", { className: classNames63("Layer__card", className) }, children);
+  return /* @__PURE__ */ React178.createElement("div", { className: classNames62("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
-import React176 from "react";
+import React179 from "react";
 import { parseISO as parseISO13, format as formatTime10 } from "date-fns";
 var DateTime = ({
   value,
@@ -15632,11 +15760,11 @@ var DateTime = ({
   onlyTime
 }) => {
   if (format8) {
-    return /* @__PURE__ */ React176.createElement(Text, { className: "Layer__datetime" }, formatTime10(parseISO13(value), format8));
+    return /* @__PURE__ */ React179.createElement(Text, { className: "Layer__datetime" }, formatTime10(parseISO13(value), format8));
   }
   const date = formatTime10(parseISO13(value), dateFormat != null ? dateFormat : DATE_FORMAT);
   const time = formatTime10(parseISO13(value), timeFormat != null ? timeFormat : TIME_FORMAT);
-  return /* @__PURE__ */ React176.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React176.createElement(
+  return /* @__PURE__ */ React179.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React179.createElement(
     Text,
     {
       as: "span",
@@ -15645,7 +15773,7 @@ var DateTime = ({
       className: "Layer__datetime__date"
     },
     date
-  ), !onlyDate && /* @__PURE__ */ React176.createElement(
+  ), !onlyDate && /* @__PURE__ */ React179.createElement(
     Text,
     {
       as: "span",
@@ -15658,8 +15786,8 @@ var DateTime = ({
 };
 
 // src/components/DetailsList/DetailsList.tsx
-import React177 from "react";
-import classNames64 from "classnames";
+import React180 from "react";
+import classNames63 from "classnames";
 var DetailsList = ({
   title,
   children,
@@ -15667,14 +15795,14 @@ var DetailsList = ({
   titleClassName,
   actions
 }) => {
-  return /* @__PURE__ */ React177.createElement("div", { className: classNames64("Layer__details-list", className) }, title && /* @__PURE__ */ React177.createElement(Header, { className: titleClassName }, /* @__PURE__ */ React177.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React177.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React177.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React180.createElement("div", { className: classNames63("Layer__details-list", className) }, title && /* @__PURE__ */ React180.createElement(Header, { className: titleClassName }, /* @__PURE__ */ React180.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React180.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React180.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
-import React178 from "react";
+import React181 from "react";
 var renderValue = (value) => {
   if (typeof value === "string") {
-    return /* @__PURE__ */ React178.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
+    return /* @__PURE__ */ React181.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
   }
   return value;
 };
@@ -15683,7 +15811,7 @@ var DetailsListItem = ({
   children,
   isLoading
 }) => {
-  return /* @__PURE__ */ React178.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ React178.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ React178.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ React178.createElement(SkeletonLoader, null) : renderValue(children)));
+  return /* @__PURE__ */ React181.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ React181.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ React181.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ React181.createElement(SkeletonLoader, null) : renderValue(children)));
 };
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
@@ -15694,19 +15822,19 @@ var SourceDetailView = ({
   switch (source.type) {
     case "Transaction_Ledger_Entry_Source": {
       const transactionSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.accountNameLabel) || "Account name"
         },
         transactionSource.account_name
-      ), /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.dateLabel) || "Date" }, /* @__PURE__ */ React179.createElement(DateTime, { value: transactionSource.date })), /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(transactionSource.amount)}`), /* @__PURE__ */ React179.createElement(
+      ), /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.dateLabel) || "Date" }, /* @__PURE__ */ React182.createElement(DateTime, { value: transactionSource.date })), /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(transactionSource.amount)}`), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.directionLabel) || "Direction"
         },
         transactionSource.direction
-      ), /* @__PURE__ */ React179.createElement(
+      ), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.counterpartyLabel) || "Counterparty"
@@ -15716,23 +15844,23 @@ var SourceDetailView = ({
     }
     case "Invoice_Ledger_Entry_Source": {
       const invoiceSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.invoiceNumberLabel) || "Invoice number"
         },
         invoiceSource.invoice_number
-      ), /* @__PURE__ */ React179.createElement(
+      ), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.recipientNameLabel) || "Recipient name"
         },
         invoiceSource.recipient_name
-      ), /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.dateLabel) || "Date" }, /* @__PURE__ */ React179.createElement(DateTime, { value: invoiceSource.date })), /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(invoiceSource.amount)}`));
+      ), /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.dateLabel) || "Date" }, /* @__PURE__ */ React182.createElement(DateTime, { value: invoiceSource.date })), /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(invoiceSource.amount)}`));
     }
     case "Manual_Ledger_Entry_Source": {
       const manualSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.memoLabel) || "Memo" }, manualSource.memo), /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.memoLabel) || "Memo" }, manualSource.memo), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.createdByLabel) || "Created by"
@@ -15742,17 +15870,17 @@ var SourceDetailView = ({
     }
     case "Invoice_Payment_Ledger_Entry_Source": {
       const invoicePaymentSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.invoiceNumberLabel) || "Invoice number"
         },
         invoicePaymentSource.invoice_number
-      ), /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(invoicePaymentSource.amount)}`));
+      ), /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(invoicePaymentSource.amount)}`));
     }
     case "Refund_Ledger_Entry_Source": {
       const refundSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.recipientNameLabel) || "Recipient name"
@@ -15762,7 +15890,7 @@ var SourceDetailView = ({
     }
     case "Refund_Payment_Ledger_Entry_Source": {
       const refundSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.recipientNameLabel) || "Recipient name"
@@ -15772,7 +15900,7 @@ var SourceDetailView = ({
     }
     case "Opening_Balance_Ledger_Entry_Source": {
       const openingBalanceSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.accountNameLabel) || "Account name"
@@ -15782,7 +15910,7 @@ var SourceDetailView = ({
     }
     case "Payout_Ledger_Entry_Source": {
       const payoutSource = source;
-      return /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(payoutSource.paid_out_amount)}`), /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(React182.Fragment, null, /* @__PURE__ */ React182.createElement(DetailsListItem, { label: (stringOverrides == null ? void 0 : stringOverrides.amountLabel) || "Amount" }, `$${centsToDollars(payoutSource.paid_out_amount)}`), /* @__PURE__ */ React182.createElement(
         DetailsListItem,
         {
           label: (stringOverrides == null ? void 0 : stringOverrides.processorLabel) || "Processor"
@@ -15799,7 +15927,7 @@ var LedgerAccountEntryDetails = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v;
   const { entryData, isLoadingEntry, closeSelectedEntry, errorEntry } = useContext30(LedgerAccountsContext);
-  const { totalDebit, totalCredit } = useMemo15(() => {
+  const { totalDebit, totalCredit } = useMemo20(() => {
     var _a2;
     let totalDebit2 = 0;
     let totalCredit2 = 0;
@@ -15812,15 +15940,15 @@ var LedgerAccountEntryDetails = ({
     });
     return { totalDebit: totalDebit2, totalCredit: totalCredit2 };
   }, [entryData]);
-  return /* @__PURE__ */ React179.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ React179.createElement(Header2, { className: "Layer__ledger-account__entry-details__header" }, /* @__PURE__ */ React179.createElement(HeaderRow, null, /* @__PURE__ */ React179.createElement(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl" }, /* @__PURE__ */ React179.createElement(BackButton, { onClick: closeSelectedEntry }), /* @__PURE__ */ React179.createElement(Heading, { size: "secondary" /* secondary */ }, (stringOverrides == null ? void 0 : stringOverrides.title) || "Transaction details")), /* @__PURE__ */ React179.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React179.createElement(Heading, { size: "secondary" /* secondary */ }, ((_a = stringOverrides == null ? void 0 : stringOverrides.transactionSource) == null ? void 0 : _a.header) || "Transaction source")), /* @__PURE__ */ React179.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React179.createElement(CloseButton, { onClick: closeSelectedEntry })))), /* @__PURE__ */ React179.createElement(
+  return /* @__PURE__ */ React182.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ React182.createElement(Header2, { className: "Layer__ledger-account__entry-details__header" }, /* @__PURE__ */ React182.createElement(HeaderRow, null, /* @__PURE__ */ React182.createElement(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl" }, /* @__PURE__ */ React182.createElement(BackButton, { onClick: closeSelectedEntry }), /* @__PURE__ */ React182.createElement(Heading, { size: "secondary" /* secondary */ }, (stringOverrides == null ? void 0 : stringOverrides.title) || "Transaction details")), /* @__PURE__ */ React182.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React182.createElement(Heading, { size: "secondary" /* secondary */ }, ((_a = stringOverrides == null ? void 0 : stringOverrides.transactionSource) == null ? void 0 : _a.header) || "Transaction source")), /* @__PURE__ */ React182.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React182.createElement(CloseButton, { onClick: closeSelectedEntry })))), /* @__PURE__ */ React182.createElement(
     DetailsList,
     {
       title: ((_b = stringOverrides == null ? void 0 : stringOverrides.transactionSource) == null ? void 0 : _b.header) || "Transaction source",
       titleClassName: "Layer__hidden-lg Layer__hidden-xl",
-      actions: /* @__PURE__ */ React179.createElement(
+      actions: /* @__PURE__ */ React182.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ React179.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ React182.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           variant: "secondary" /* secondary */,
@@ -15828,16 +15956,16 @@ var LedgerAccountEntryDetails = ({
         }
       )
     },
-    /* @__PURE__ */ React179.createElement(
+    /* @__PURE__ */ React182.createElement(
       DetailsListItem,
       {
         label: ((_d = (_c = stringOverrides == null ? void 0 : stringOverrides.transactionSource) == null ? void 0 : _c.details) == null ? void 0 : _d.sourceLabel) || "Source",
         isLoading: isLoadingEntry
       },
-      /* @__PURE__ */ React179.createElement(Badge, null, (_e = entryData == null ? void 0 : entryData.source) == null ? void 0 : _e.entity_name)
+      /* @__PURE__ */ React182.createElement(Badge, null, (_e = entryData == null ? void 0 : entryData.source) == null ? void 0 : _e.entity_name)
     ),
-    ((_f = entryData == null ? void 0 : entryData.source) == null ? void 0 : _f.display_description) && /* @__PURE__ */ React179.createElement(SourceDetailView, { source: entryData == null ? void 0 : entryData.source })
-  ), /* @__PURE__ */ React179.createElement(
+    ((_f = entryData == null ? void 0 : entryData.source) == null ? void 0 : _f.display_description) && /* @__PURE__ */ React182.createElement(SourceDetailView, { source: entryData == null ? void 0 : entryData.source })
+  ), /* @__PURE__ */ React182.createElement(
     DetailsList,
     {
       title: ((_g = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _g.header) ? (_h = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _h.header(
@@ -15845,7 +15973,7 @@ var LedgerAccountEntryDetails = ({
       ) : `Journal Entry ${entryData ? entryNumber(entryData) : ""}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ React179.createElement(
+    /* @__PURE__ */ React182.createElement(
       DetailsListItem,
       {
         label: ((_j = (_i = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _i.details) == null ? void 0 : _j.entryTypeLabel) || "Entry type",
@@ -15853,23 +15981,23 @@ var LedgerAccountEntryDetails = ({
       },
       humanizeEnum((_k = entryData == null ? void 0 : entryData.entry_type) != null ? _k : "")
     ),
-    /* @__PURE__ */ React179.createElement(
+    /* @__PURE__ */ React182.createElement(
       DetailsListItem,
       {
         label: ((_m = (_l = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _l.details) == null ? void 0 : _m.dateLabel) || "Date",
         isLoading: isLoadingEntry
       },
-      (entryData == null ? void 0 : entryData.entry_at) && /* @__PURE__ */ React179.createElement(DateTime, { value: entryData == null ? void 0 : entryData.entry_at })
+      (entryData == null ? void 0 : entryData.entry_at) && /* @__PURE__ */ React182.createElement(DateTime, { value: entryData == null ? void 0 : entryData.entry_at })
     ),
-    /* @__PURE__ */ React179.createElement(
+    /* @__PURE__ */ React182.createElement(
       DetailsListItem,
       {
         label: ((_o = (_n = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _n.details) == null ? void 0 : _o.creationDateLabel) || "Creation date",
         isLoading: isLoadingEntry
       },
-      (entryData == null ? void 0 : entryData.date) && /* @__PURE__ */ React179.createElement(DateTime, { value: entryData == null ? void 0 : entryData.date })
+      (entryData == null ? void 0 : entryData.date) && /* @__PURE__ */ React182.createElement(DateTime, { value: entryData == null ? void 0 : entryData.date })
     ),
-    (entryData == null ? void 0 : entryData.reversal_id) && /* @__PURE__ */ React179.createElement(
+    (entryData == null ? void 0 : entryData.reversal_id) && /* @__PURE__ */ React182.createElement(
       DetailsListItem,
       {
         label: ((_q = (_p = stringOverrides == null ? void 0 : stringOverrides.journalEntry) == null ? void 0 : _p.details) == null ? void 0 : _q.reversalLabel) || "Reversal",
@@ -15877,41 +16005,41 @@ var LedgerAccountEntryDetails = ({
       },
       entryData == null ? void 0 : entryData.reversal_id.substring(0, 5)
     )
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React179.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React179.createElement(Card, null, /* @__PURE__ */ React179.createElement(
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React182.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React182.createElement(Card, null, /* @__PURE__ */ React182.createElement(
     Table,
     {
       componentName: "ledger-account__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ React179.createElement(TableHead, null, /* @__PURE__ */ React179.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React179.createElement(TableCell, null, ((_r = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _r.lineItemsColumnHeader) || "Line items"), /* @__PURE__ */ React179.createElement(TableCell, { align: "right" /* RIGHT */ }, ((_s = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _s.debitColumnHeader) || "Debit"), /* @__PURE__ */ React179.createElement(TableCell, { align: "right" /* RIGHT */ }, ((_t = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _t.creditColumnHeader) || "Credit"))),
-    /* @__PURE__ */ React179.createElement(TableBody, null, (_u = entryData == null ? void 0 : entryData.line_items) == null ? void 0 : _u.map((item, index) => {
+    /* @__PURE__ */ React182.createElement(TableHead, null, /* @__PURE__ */ React182.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React182.createElement(TableCell, null, ((_r = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _r.lineItemsColumnHeader) || "Line items"), /* @__PURE__ */ React182.createElement(TableCell, { align: "right" /* RIGHT */ }, ((_s = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _s.debitColumnHeader) || "Debit"), /* @__PURE__ */ React182.createElement(TableCell, { align: "right" /* RIGHT */ }, ((_t = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _t.creditColumnHeader) || "Credit"))),
+    /* @__PURE__ */ React182.createElement(TableBody, null, (_u = entryData == null ? void 0 : entryData.line_items) == null ? void 0 : _u.map((item, index) => {
       var _a2;
-      return /* @__PURE__ */ React179.createElement(
+      return /* @__PURE__ */ React182.createElement(
         TableRow,
         {
           key: `ledger-line-item-${index}`,
           rowKey: `ledger-line-item-${index}`
         },
-        /* @__PURE__ */ React179.createElement(TableCell, null, ((_a2 = item.account) == null ? void 0 : _a2.name) || ""),
-        /* @__PURE__ */ React179.createElement(TableCell, { align: "right" /* RIGHT */ }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React179.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
-        /* @__PURE__ */ React179.createElement(TableCell, { align: "right" /* RIGHT */ }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React179.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
+        /* @__PURE__ */ React182.createElement(TableCell, null, ((_a2 = item.account) == null ? void 0 : _a2.name) || ""),
+        /* @__PURE__ */ React182.createElement(TableCell, { align: "right" /* RIGHT */ }, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React182.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
+        /* @__PURE__ */ React182.createElement(TableCell, { align: "right" /* RIGHT */ }, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React182.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
       );
-    }), /* @__PURE__ */ React179.createElement(
+    }), /* @__PURE__ */ React182.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ React179.createElement(TableCell, { primary: true }, ((_v = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _v.totalRowHeader) || "Total"),
-      /* @__PURE__ */ React179.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, totalDebit || 0),
-      /* @__PURE__ */ React179.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, totalCredit || 0)
+      /* @__PURE__ */ React182.createElement(TableCell, { primary: true }, ((_v = stringOverrides == null ? void 0 : stringOverrides.lineItemsTable) == null ? void 0 : _v.totalRowHeader) || "Total"),
+      /* @__PURE__ */ React182.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, totalDebit || 0),
+      /* @__PURE__ */ React182.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, totalCredit || 0)
     ))
   ))) : null);
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React180, { useContext as useContext31, useEffect as useEffect42, useState as useState48 } from "react";
-import classNames65 from "classnames";
+import React183, { useContext as useContext31, useEffect as useEffect42, useState as useState48 } from "react";
+import classNames64 from "classnames";
 import { parseISO as parseISO14, format as formatTime11 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -15933,10 +16061,10 @@ var LedgerAccountRow = ({
     }
   }, []);
   if (view === "tablet") {
-    return /* @__PURE__ */ React180.createElement(
+    return /* @__PURE__ */ React183.createElement(
       "tr",
       {
-        className: classNames65(
+        className: classNames64(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -15952,24 +16080,24 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React180.createElement(Text, null, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React180.createElement(
+      /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React183.createElement(Text, null, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React183.createElement(
         Text,
         {
           weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
         entryNumber(row)
-      )), /* @__PURE__ */ React180.createElement(Text, null, (_b = (_a = row.source) == null ? void 0 : _a.display_description) != null ? _b : ""))),
-      /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
-      /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
-      /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
+      )), /* @__PURE__ */ React183.createElement(Text, null, (_b = (_a = row.source) == null ? void 0 : _a.display_description) != null ? _b : ""))),
+      /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
+      /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
+      /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
     );
   }
   if (view === "mobile") {
-    return /* @__PURE__ */ React180.createElement(
+    return /* @__PURE__ */ React183.createElement(
       "tr",
       {
-        className: classNames65(
+        className: classNames64(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -15985,20 +16113,20 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React180.createElement(Text, null, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React180.createElement(
+      /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React183.createElement(Text, null, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React183.createElement(
         Text,
         {
           weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
         entryNumber(row)
-      )), /* @__PURE__ */ React180.createElement(Text, null, (_d = (_c = row.source) == null ? void 0 : _c.display_description) != null ? _d : ""), /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)), /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)), /* @__PURE__ */ React180.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ React180.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, `$${centsToDollars(row.running_balance)}`)))))
+      )), /* @__PURE__ */ React183.createElement(Text, null, (_d = (_c = row.source) == null ? void 0 : _c.display_description) != null ? _d : ""), /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)), /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)), /* @__PURE__ */ React183.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ React183.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, `$${centsToDollars(row.running_balance)}`)))))
     );
   }
-  return /* @__PURE__ */ React180.createElement(
+  return /* @__PURE__ */ React183.createElement(
     "tr",
     {
-      className: classNames65(
+      className: classNames64(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -16014,17 +16142,17 @@ var LedgerAccountRow = ({
         }
       }
     },
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT))),
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content" }, entryNumber(row))),
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content" }, (_f = (_e = row.source) == null ? void 0 : _e.display_description) != null ? _f : "")),
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
-    /* @__PURE__ */ React180.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React180.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO14(row.date), DATE_FORMAT))),
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content" }, entryNumber(row))),
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content" }, (_f = (_e = row.source) == null ? void 0 : _e.display_description) != null ? _f : "")),
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars((row == null ? void 0 : row.amount) || 0)}`)),
+    /* @__PURE__ */ React183.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React183.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
   );
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames66 from "classnames";
+import classNames65 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
@@ -16054,16 +16182,16 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames66(
+  const baseClassName = classNames65(
     "Layer__ledger-account__index",
     accountId && "open"
   );
-  const account = useMemo16(() => {
+  const account = useMemo21(() => {
     return flattenAccounts((accountData == null ? void 0 : accountData.accounts) || []).find(
       (x) => x.id === accountId
     );
   }, [accountId]);
-  const data = useMemo16(() => {
+  const data = useMemo21(() => {
     var _a2;
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -16073,10 +16201,10 @@ var LedgerAccount = ({
     setAccountId(void 0);
     closeSelectedEntry();
   };
-  return /* @__PURE__ */ React181.createElement(
+  return /* @__PURE__ */ React184.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React181.createElement(
+      sidebar: /* @__PURE__ */ React184.createElement(
         LedgerAccountEntryDetails,
         {
           stringOverrides: stringOverrides == null ? void 0 : stringOverrides.ledgerEntryDetail
@@ -16086,21 +16214,21 @@ var LedgerAccount = ({
       parentRef: containerRef,
       className: "Layer__ledger-account__panel"
     },
-    /* @__PURE__ */ React181.createElement("div", { className: baseClassName }, /* @__PURE__ */ React181.createElement(Header2, { className: "Layer__ledger-account__header" }, /* @__PURE__ */ React181.createElement(HeaderRow, null, /* @__PURE__ */ React181.createElement(HeaderCol, null, /* @__PURE__ */ React181.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React181.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ React181.createElement(
+    /* @__PURE__ */ React184.createElement("div", { className: baseClassName }, /* @__PURE__ */ React184.createElement(Header2, { className: "Layer__ledger-account__header" }, /* @__PURE__ */ React184.createElement(HeaderRow, null, /* @__PURE__ */ React184.createElement(HeaderCol, null, /* @__PURE__ */ React184.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React184.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ React184.createElement(
       Text,
       {
         weight: "bold" /* bold */,
         className: "Layer__ledger-account__title"
       },
       (_a = account == null ? void 0 : account.name) != null ? _a : ""
-    ), /* @__PURE__ */ React181.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ React181.createElement(
+    ), /* @__PURE__ */ React184.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ React184.createElement(
       Text,
       {
         className: "Layer__ledger-account__balance-label",
         size: "sm" /* sm */
       },
       "Current balance"
-    ), /* @__PURE__ */ React181.createElement(
+    ), /* @__PURE__ */ React184.createElement(
       Text,
       {
         className: "Layer__ledger-account__balance-value",
@@ -16108,9 +16236,9 @@ var LedgerAccount = ({
       },
       "$",
       centsToDollars((account == null ? void 0 : account.balance) || 0)
-    )))))), /* @__PURE__ */ React181.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ React181.createElement("thead", null, /* @__PURE__ */ React181.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ React181.createElement("th", null), view === "desktop" && /* @__PURE__ */ React181.createElement(React181.Fragment, null, /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _b.dateColumnHeader) || "Date"), /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _c.journalIdColumnHeader) || "Journal id #"), /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _d.sourceColumnHeader) || "Source")), view !== "mobile" && /* @__PURE__ */ React181.createElement(React181.Fragment, null, /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_e = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _e.debitColumnHeader) || "Debit"), /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _f.creditColumnHeader) || "Credit"), /* @__PURE__ */ React181.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_g = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _g.runningBalanceColumnHeader) || "Running balance")))), /* @__PURE__ */ React181.createElement("tbody", null, (_h = data == null ? void 0 : data.filter(
+    )))))), /* @__PURE__ */ React184.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ React184.createElement("thead", null, /* @__PURE__ */ React184.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ React184.createElement("th", null), view === "desktop" && /* @__PURE__ */ React184.createElement(React184.Fragment, null, /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header" }, ((_b = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _b.dateColumnHeader) || "Date"), /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header" }, ((_c = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _c.journalIdColumnHeader) || "Journal id #"), /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header" }, ((_d = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _d.sourceColumnHeader) || "Source")), view !== "mobile" && /* @__PURE__ */ React184.createElement(React184.Fragment, null, /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_e = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _e.debitColumnHeader) || "Debit"), /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_f = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _f.creditColumnHeader) || "Credit"), /* @__PURE__ */ React184.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, ((_g = stringOverrides == null ? void 0 : stringOverrides.ledgerEntriesTable) == null ? void 0 : _g.runningBalanceColumnHeader) || "Running balance")))), /* @__PURE__ */ React184.createElement("tbody", null, (_h = data == null ? void 0 : data.filter(
       (entry) => !entry.entry_reversal_of && !entry.entry_reversed_by
-    )) == null ? void 0 : _h.map((x, index) => /* @__PURE__ */ React181.createElement(
+    )) == null ? void 0 : _h.map((x, index) => /* @__PURE__ */ React184.createElement(
       LedgerAccountRow,
       {
         key: x.id,
@@ -16119,7 +16247,7 @@ var LedgerAccount = ({
         initialLoad,
         view
       }
-    )))), data && /* @__PURE__ */ React181.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ React181.createElement(
+    )))), data && /* @__PURE__ */ React184.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ React184.createElement(
       Pagination,
       {
         currentPage,
@@ -16127,7 +16255,7 @@ var LedgerAccount = ({
         pageSize,
         onPageChange: (page) => setCurrentPage(page)
       }
-    )), error ? /* @__PURE__ */ React181.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React181.createElement(
+    )), error ? /* @__PURE__ */ React184.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React184.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -16136,7 +16264,7 @@ var LedgerAccount = ({
         onRefresh: () => refetch(),
         isLoading: isValidating || isLoading
       }
-    )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React181.createElement("div", { className: "Layer__ledger-account__loader-container" }, /* @__PURE__ */ React181.createElement(Loader2, null)) : null, !isLoading && !error && (data == null ? void 0 : data.length) === 0 ? /* @__PURE__ */ React181.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React181.createElement(
+    )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React184.createElement("div", { className: "Layer__ledger-account__loader-container" }, /* @__PURE__ */ React184.createElement(Loader2, null)) : null, !isLoading && !error && (data == null ? void 0 : data.length) === 0 ? /* @__PURE__ */ React184.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React184.createElement(
       DataState,
       {
         status: "info" /* info */,
@@ -16157,7 +16285,7 @@ var ChartOfAccounts = (props) => {
   const ledgerAccountsContextData = useLedgerAccounts(
     (_a = props.showReversalEntries) != null ? _a : false
   );
-  return /* @__PURE__ */ React182.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ React182.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ React182.createElement(ChartOfAccountsContent, __spreadValues({}, props))));
+  return /* @__PURE__ */ React185.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ React185.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ React185.createElement(ChartOfAccountsContent, __spreadValues({}, props))));
 };
 var ChartOfAccountsContent = ({
   asWidget,
@@ -16171,14 +16299,14 @@ var ChartOfAccountsContent = ({
   const containerRef = useElementViewSize(
     (newView) => setView(newView)
   );
-  return /* @__PURE__ */ React182.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React182.createElement(
+  return /* @__PURE__ */ React185.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React185.createElement(
     LedgerAccount,
     {
       view,
       containerRef,
       stringOverrides: stringOverrides == null ? void 0 : stringOverrides.ledgerAccount
     }
-  ) : /* @__PURE__ */ React182.createElement(
+  ) : /* @__PURE__ */ React185.createElement(
     ChartOfAccountsTableWithPanel,
     {
       asWidget,
@@ -16193,7 +16321,7 @@ var ChartOfAccountsContent = ({
 };
 
 // src/components/Journal/Journal.tsx
-import React189, { useState as useState54 } from "react";
+import React192, { useState as useState54 } from "react";
 
 // src/contexts/JournalContext/JournalContext.tsx
 import { createContext as createContext15 } from "react";
@@ -16500,13 +16628,13 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTableWithPanel.tsx
-import React188, { useContext as useContext39, useMemo as useMemo18, useState as useState53 } from "react";
+import React191, { useContext as useContext39, useMemo as useMemo23, useState as useState53 } from "react";
 
 // src/components/JournalSidebar/JournalSidebar.tsx
-import React186, { useContext as useContext37 } from "react";
+import React189, { useContext as useContext37 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import React183, { useContext as useContext34, useMemo as useMemo17, useState as useState52 } from "react";
+import React186, { useContext as useContext34, useMemo as useMemo22, useState as useState52 } from "react";
 var JournalEntryDetails = () => {
   var _a, _b, _c, _d;
   const {
@@ -16520,13 +16648,13 @@ var JournalEntryDetails = () => {
   } = useContext34(JournalContext);
   const [reverseEntryProcessing, setReverseEntryProcessing] = useState52(false);
   const [reverseEntryError, setReverseEntryError] = useState52();
-  const entry = useMemo17(() => {
+  const entry = useMemo22(() => {
     if (selectedEntryId && data) {
       return data.find((x) => x.id === selectedEntryId);
     }
     return;
   }, [data, selectedEntryId]);
-  const sortedLineItems = useMemo17(
+  const sortedLineItems = useMemo22(
     () => {
       var _a2;
       return (_a2 = entry == null ? void 0 : entry.line_items) == null ? void 0 : _a2.sort(
@@ -16550,15 +16678,15 @@ var JournalEntryDetails = () => {
       setReverseEntryProcessing(false);
     }
   });
-  return /* @__PURE__ */ React183.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React183.createElement(Header2, { className: "Layer__journal__entry-details__mobile-header" }, /* @__PURE__ */ React183.createElement(HeaderRow, null, /* @__PURE__ */ React183.createElement(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl" }, /* @__PURE__ */ React183.createElement(BackButton, { onClick: closeSelectedEntry }), /* @__PURE__ */ React183.createElement(Heading, { size: "secondary" /* secondary */ }, "Transaction details")), /* @__PURE__ */ React183.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React183.createElement(Heading, { size: "secondary" /* secondary */ }, "Transaction source")), /* @__PURE__ */ React183.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React183.createElement(CloseButton, { onClick: closeSelectedEntry })))), /* @__PURE__ */ React183.createElement(
+  return /* @__PURE__ */ React186.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React186.createElement(Header2, { className: "Layer__journal__entry-details__mobile-header" }, /* @__PURE__ */ React186.createElement(HeaderRow, null, /* @__PURE__ */ React186.createElement(HeaderCol, { className: "Layer__hidden-lg Layer__hidden-xl" }, /* @__PURE__ */ React186.createElement(BackButton, { onClick: closeSelectedEntry }), /* @__PURE__ */ React186.createElement(Heading, { size: "secondary" /* secondary */ }, "Transaction details")), /* @__PURE__ */ React186.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React186.createElement(Heading, { size: "secondary" /* secondary */ }, "Transaction source")), /* @__PURE__ */ React186.createElement(HeaderCol, { className: "Layer__show-lg Layer__show-xl" }, /* @__PURE__ */ React186.createElement(CloseButton, { onClick: closeSelectedEntry })))), /* @__PURE__ */ React186.createElement(
     DetailsList,
     {
       title: "Transaction source",
       titleClassName: "Layer__hidden-lg Layer__hidden-xl",
-      actions: /* @__PURE__ */ React183.createElement(
+      actions: /* @__PURE__ */ React186.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ React183.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ React186.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           className: "Layer__details-list__close-btn",
@@ -16566,32 +16694,32 @@ var JournalEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ React183.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React183.createElement(Badge, null, (_a = entry == null ? void 0 : entry.source) == null ? void 0 : _a.entity_name)),
-    ((_b = entry == null ? void 0 : entry.source) == null ? void 0 : _b.display_description) && /* @__PURE__ */ React183.createElement(SourceDetailView, { source: entry == null ? void 0 : entry.source })
-  ), /* @__PURE__ */ React183.createElement(
+    /* @__PURE__ */ React186.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React186.createElement(Badge, null, (_a = entry == null ? void 0 : entry.source) == null ? void 0 : _a.entity_name)),
+    ((_b = entry == null ? void 0 : entry.source) == null ? void 0 : _b.display_description) && /* @__PURE__ */ React186.createElement(SourceDetailView, { source: entry == null ? void 0 : entry.source })
+  ), /* @__PURE__ */ React186.createElement(
     DetailsList,
     {
       title: `Journal Entry ${entry ? entryNumber(entry) : ""}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ React183.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum((_c = entry == null ? void 0 : entry.entry_type) != null ? _c : "")),
-    /* @__PURE__ */ React183.createElement(DetailsListItem, { label: "Effective date", isLoading: isLoadingEntry }, (entry == null ? void 0 : entry.entry_at) && /* @__PURE__ */ React183.createElement(DateTime, { value: entry == null ? void 0 : entry.entry_at })),
-    /* @__PURE__ */ React183.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, (entry == null ? void 0 : entry.date) && /* @__PURE__ */ React183.createElement(DateTime, { value: entry == null ? void 0 : entry.date })),
-    (entry == null ? void 0 : entry.reversal_id) && /* @__PURE__ */ React183.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, `Journal Entry #${entry == null ? void 0 : entry.reversal_id.substring(0, 5)}`)
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React183.createElement("div", { className: "Layer__journal__entry-details__line-items" }, /* @__PURE__ */ React183.createElement(Card, null, /* @__PURE__ */ React183.createElement(
+    /* @__PURE__ */ React186.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum((_c = entry == null ? void 0 : entry.entry_type) != null ? _c : "")),
+    /* @__PURE__ */ React186.createElement(DetailsListItem, { label: "Effective date", isLoading: isLoadingEntry }, (entry == null ? void 0 : entry.entry_at) && /* @__PURE__ */ React186.createElement(DateTime, { value: entry == null ? void 0 : entry.entry_at })),
+    /* @__PURE__ */ React186.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, (entry == null ? void 0 : entry.date) && /* @__PURE__ */ React186.createElement(DateTime, { value: entry == null ? void 0 : entry.date })),
+    (entry == null ? void 0 : entry.reversal_id) && /* @__PURE__ */ React186.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, `Journal Entry #${entry == null ? void 0 : entry.reversal_id.substring(0, 5)}`)
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React186.createElement("div", { className: "Layer__journal__entry-details__line-items" }, /* @__PURE__ */ React186.createElement(Card, null, /* @__PURE__ */ React186.createElement(
     Table,
     {
       componentName: "journal__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ React183.createElement(TableHead, null, /* @__PURE__ */ React183.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React183.createElement(TableCell, null, "Line items"), /* @__PURE__ */ React183.createElement(
+    /* @__PURE__ */ React186.createElement(TableHead, null, /* @__PURE__ */ React186.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React186.createElement(TableCell, null, "Line items"), /* @__PURE__ */ React186.createElement(
       TableCell,
       {
         className: "Layer__journal__debit-credit-col",
         align: "right" /* RIGHT */
       },
       "Debit"
-    ), /* @__PURE__ */ React183.createElement(
+    ), /* @__PURE__ */ React186.createElement(
       TableCell,
       {
         className: "Layer__journal__debit-credit-col",
@@ -16599,37 +16727,37 @@ var JournalEntryDetails = () => {
       },
       "Credit"
     ))),
-    /* @__PURE__ */ React183.createElement(TableBody, null, sortedLineItems == null ? void 0 : sortedLineItems.map((item, index) => /* @__PURE__ */ React183.createElement(
+    /* @__PURE__ */ React186.createElement(TableBody, null, sortedLineItems == null ? void 0 : sortedLineItems.map((item, index) => /* @__PURE__ */ React186.createElement(
       TableRow,
       {
         key: `ledger-line-item-${index}`,
         rowKey: `ledger-line-item-${index}`
       },
-      /* @__PURE__ */ React183.createElement(TableCell, null, item.account.name),
-      /* @__PURE__ */ React183.createElement(
+      /* @__PURE__ */ React186.createElement(TableCell, null, item.account.name),
+      /* @__PURE__ */ React186.createElement(
         TableCell,
         {
           className: "Layer__journal__debit-credit-col",
           align: "right" /* RIGHT */
         },
-        item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React183.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))
+        item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React186.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))
       ),
-      /* @__PURE__ */ React183.createElement(
+      /* @__PURE__ */ React186.createElement(
         TableCell,
         {
           className: "Layer__journal__debit-credit-col",
           align: "right" /* RIGHT */
         },
-        item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React183.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))
+        item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React186.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0))
       )
-    )), /* @__PURE__ */ React183.createElement(
+    )), /* @__PURE__ */ React186.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ React183.createElement(TableCell, { primary: true }, "Total"),
-      /* @__PURE__ */ React183.createElement(
+      /* @__PURE__ */ React186.createElement(TableCell, { primary: true }, "Total"),
+      /* @__PURE__ */ React186.createElement(
         TableCell,
         {
           isCurrency: true,
@@ -16639,7 +16767,7 @@ var JournalEntryDetails = () => {
         },
         (entry == null ? void 0 : entry.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0)) || 0
       ),
-      /* @__PURE__ */ React183.createElement(
+      /* @__PURE__ */ React186.createElement(
         TableCell,
         {
           isCurrency: true,
@@ -16650,10 +16778,10 @@ var JournalEntryDetails = () => {
         (entry == null ? void 0 : entry.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0)) || 0
       )
     ))
-  )), /* @__PURE__ */ React183.createElement("div", { className: "Layer__journal__entry-details__reverse-btn-container" }, /* @__PURE__ */ React183.createElement(
+  )), /* @__PURE__ */ React186.createElement("div", { className: "Layer__journal__entry-details__reverse-btn-container" }, /* @__PURE__ */ React186.createElement(
     Button,
     {
-      rightIcon: reverseEntryError ? /* @__PURE__ */ React183.createElement(AlertCircle_default, { size: 12 }) : /* @__PURE__ */ React183.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: reverseEntryError ? /* @__PURE__ */ React186.createElement(AlertCircle_default, { size: 12 }) : /* @__PURE__ */ React186.createElement(RefreshCcw_default, { size: 12 }),
       variant: "secondary" /* secondary */,
       onClick: reverseEntryProcessing ? () => {
       } : onReverseEntry,
@@ -16666,10 +16794,10 @@ var JournalEntryDetails = () => {
 };
 
 // src/components/JournalForm/JournalForm.tsx
-import React185, { useContext as useContext36 } from "react";
+import React188, { useContext as useContext36 } from "react";
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-import React184, { useContext as useContext35 } from "react";
+import React187, { useContext as useContext35 } from "react";
 var JournalFormEntryLines = ({
   entrylineItems,
   addEntryLine,
@@ -16681,14 +16809,14 @@ var JournalFormEntryLines = ({
   const { data: accountsData } = useContext35(ChartOfAccountsContext);
   const { form } = useContext35(JournalContext);
   const parentOptions = useParentOptions(accountsData);
-  return /* @__PURE__ */ React184.createElement(React184.Fragment, null, ["DEBIT", "CREDIT"].map((direction, idx) => {
-    return /* @__PURE__ */ React184.createElement(
+  return /* @__PURE__ */ React187.createElement(React187.Fragment, null, ["DEBIT", "CREDIT"].map((direction, idx) => {
+    return /* @__PURE__ */ React187.createElement(
       "div",
       {
         key: "Layer__journal__form__input-group-" + idx,
         className: "Layer__journal__form__input-group Layer__journal__form__input-group__border"
       },
-      /* @__PURE__ */ React184.createElement(
+      /* @__PURE__ */ React187.createElement(
         Text,
         {
           className: "Layer__journal__form__input-group__title",
@@ -16703,13 +16831,13 @@ var JournalFormEntryLines = ({
         if (item.direction !== direction) {
           return null;
         }
-        return /* @__PURE__ */ React184.createElement(
+        return /* @__PURE__ */ React187.createElement(
           "div",
           {
             className: "Layer__journal__form__input-group__line-item",
             key: direction + "-" + idx2
           },
-          /* @__PURE__ */ React184.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React184.createElement(
+          /* @__PURE__ */ React187.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React187.createElement(
             InputWithBadge,
             {
               name: direction,
@@ -16735,14 +16863,14 @@ var JournalFormEntryLines = ({
               )) == null ? void 0 : _c.message
             }
           )),
-          /* @__PURE__ */ React184.createElement(
+          /* @__PURE__ */ React187.createElement(
             InputGroup,
             {
               name: "account-name",
               label: "Account name",
               inline: true
             },
-            /* @__PURE__ */ React184.createElement(
+            /* @__PURE__ */ React187.createElement(
               Select2,
               {
                 options: parentOptions,
@@ -16766,18 +16894,18 @@ var JournalFormEntryLines = ({
                 )) == null ? void 0 : _f.message
               }
             ),
-            idx2 >= 2 && /* @__PURE__ */ React184.createElement(
+            idx2 >= 2 && /* @__PURE__ */ React187.createElement(
               IconButton,
               {
                 className: "Layer__remove__button",
                 onClick: () => removeEntryLine(idx2),
-                icon: /* @__PURE__ */ React184.createElement(Trash_default, null)
+                icon: /* @__PURE__ */ React187.createElement(Trash_default, null)
               }
             )
           )
         );
       }),
-      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > (entrylineItems == null ? void 0 : entrylineItems.length)) && /* @__PURE__ */ React184.createElement(
+      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > (entrylineItems == null ? void 0 : entrylineItems.length)) && /* @__PURE__ */ React187.createElement(
         TextButton,
         {
           className: "Layer__journal__add-entry-line",
@@ -16805,7 +16933,7 @@ var JournalForm = ({
     addEntryLine,
     removeEntryLine
   } = useContext36(JournalContext);
-  return /* @__PURE__ */ React185.createElement(
+  return /* @__PURE__ */ React188.createElement(
     "form",
     {
       className: "Layer__form",
@@ -16814,7 +16942,7 @@ var JournalForm = ({
         submitForm();
       }
     },
-    /* @__PURE__ */ React185.createElement(Header2, { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React185.createElement(HeaderRow, null, /* @__PURE__ */ React185.createElement(HeaderCol, null, /* @__PURE__ */ React185.createElement(Heading, { size: "secondary" /* secondary */, className: "title" }, (_a = stringOverrides == null ? void 0 : stringOverrides.header) != null ? _a : "Add New Entry")), /* @__PURE__ */ React185.createElement(HeaderCol, { className: "actions" }, /* @__PURE__ */ React185.createElement(
+    /* @__PURE__ */ React188.createElement(Header2, { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React188.createElement(HeaderRow, null, /* @__PURE__ */ React188.createElement(HeaderCol, null, /* @__PURE__ */ React188.createElement(Heading, { size: "secondary" /* secondary */, className: "title" }, (_a = stringOverrides == null ? void 0 : stringOverrides.header) != null ? _a : "Add New Entry")), /* @__PURE__ */ React188.createElement(HeaderCol, { className: "actions" }, /* @__PURE__ */ React188.createElement(
       Button,
       {
         type: "button",
@@ -16823,7 +16951,7 @@ var JournalForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.cancelButton) || "Cancel"
-    ), apiError && /* @__PURE__ */ React185.createElement(
+    ), apiError && /* @__PURE__ */ React188.createElement(
       RetryButton,
       {
         type: "submit",
@@ -16832,7 +16960,7 @@ var JournalForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.retryButton) || "Retry"
-    ), !apiError && /* @__PURE__ */ React185.createElement(
+    ), !apiError && /* @__PURE__ */ React188.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -16842,7 +16970,7 @@ var JournalForm = ({
       },
       (stringOverrides == null ? void 0 : stringOverrides.saveButton) || "Save"
     )))),
-    apiError && /* @__PURE__ */ React185.createElement(
+    apiError && /* @__PURE__ */ React188.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -16850,7 +16978,7 @@ var JournalForm = ({
       },
       apiError
     ),
-    /* @__PURE__ */ React185.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React185.createElement(InputGroup, { name: "date", label: "Effective Date", inline: true }, /* @__PURE__ */ React185.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React185.createElement(
+    /* @__PURE__ */ React188.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React188.createElement(InputGroup, { name: "date", label: "Effective Date", inline: true }, /* @__PURE__ */ React188.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React188.createElement(
       DatePicker,
       {
         selected: (form == null ? void 0 : form.data.entry_at) ? new Date(form == null ? void 0 : form.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -16863,7 +16991,7 @@ var JournalForm = ({
         placeholderText: "Select date",
         currentDateOption: false
       }
-    ), /* @__PURE__ */ React185.createElement(
+    ), /* @__PURE__ */ React188.createElement(
       DatePicker,
       {
         selected: (form == null ? void 0 : form.data.entry_at) ? new Date(form == null ? void 0 : form.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -16877,7 +17005,7 @@ var JournalForm = ({
         currentDateOption: false
       }
     )))),
-    /* @__PURE__ */ React185.createElement(
+    /* @__PURE__ */ React188.createElement(
       JournalFormEntryLines,
       {
         entrylineItems: (form == null ? void 0 : form.data.line_items) || [],
@@ -16888,7 +17016,7 @@ var JournalForm = ({
         config
       }
     ),
-    /* @__PURE__ */ React185.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React185.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React185.createElement(
+    /* @__PURE__ */ React188.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React188.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React188.createElement(
       Textarea,
       {
         name: "memo",
@@ -16898,7 +17026,7 @@ var JournalForm = ({
         disabled: sendingForm
       }
     ))),
-    /* @__PURE__ */ React185.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React185.createElement(
+    /* @__PURE__ */ React188.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React188.createElement(
       Button,
       {
         type: "button",
@@ -16907,7 +17035,7 @@ var JournalForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.cancelButton) || "Cancel"
-    ), apiError && /* @__PURE__ */ React185.createElement(
+    ), apiError && /* @__PURE__ */ React188.createElement(
       RetryButton,
       {
         type: "submit",
@@ -16916,7 +17044,7 @@ var JournalForm = ({
         disabled: sendingForm
       },
       (stringOverrides == null ? void 0 : stringOverrides.retryButton) || "Retry"
-    ), !apiError && /* @__PURE__ */ React185.createElement(
+    ), !apiError && /* @__PURE__ */ React188.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -16937,13 +17065,13 @@ var JournalSidebar = ({
 }) => {
   const { selectedEntryId } = useContext37(JournalContext);
   if (selectedEntryId !== "new") {
-    return /* @__PURE__ */ React186.createElement(JournalEntryDetails, null);
+    return /* @__PURE__ */ React189.createElement(JournalEntryDetails, null);
   }
-  return /* @__PURE__ */ React186.createElement(JournalForm, { config, stringOverrides });
+  return /* @__PURE__ */ React189.createElement(JournalForm, { config, stringOverrides });
 };
 
 // src/components/JournalTable/JournalTable.tsx
-import React187, { useContext as useContext38, useEffect as useEffect45 } from "react";
+import React190, { useContext as useContext38, useEffect as useEffect45 } from "react";
 import { parseISO as parseISO15, format as formatTime12 } from "date-fns";
 var accountName = (row) => {
   if ("account" in row) {
@@ -16958,7 +17086,7 @@ var JournalTable = ({
   view,
   data,
   stringOverrides
-}) => /* @__PURE__ */ React187.createElement(TableProvider, null, /* @__PURE__ */ React187.createElement(
+}) => /* @__PURE__ */ React190.createElement(TableProvider, null, /* @__PURE__ */ React190.createElement(
   JournalTableContent,
   {
     view,
@@ -16980,7 +17108,7 @@ var JournalTableContent = ({
   const renderJournalRow = (row, index, rowKey, depth) => {
     const expandable = !!row.line_items && row.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React187.createElement(React187.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React187.createElement(
+    return /* @__PURE__ */ React190.createElement(React190.Fragment, { key: rowKey + "-" + index }, /* @__PURE__ */ React190.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + index,
@@ -16998,7 +17126,7 @@ var JournalTableContent = ({
         },
         depth
       },
-      /* @__PURE__ */ React187.createElement(
+      /* @__PURE__ */ React190.createElement(
         TableCell,
         {
           withExpandIcon: expandable,
@@ -17009,16 +17137,16 @@ var JournalTableContent = ({
         },
         entryNumber(row)
       ),
-      /* @__PURE__ */ React187.createElement(TableCell, null, row.entry_at && formatTime12(parseISO15(row.entry_at), DATE_FORMAT)),
-      /* @__PURE__ */ React187.createElement(TableCell, null, humanizeEnum(row.entry_type)),
-      /* @__PURE__ */ React187.createElement(TableCell, null, "(", row.line_items.length, ")"),
-      /* @__PURE__ */ React187.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, "line_items" in row && Math.abs(
+      /* @__PURE__ */ React190.createElement(TableCell, null, row.entry_at && formatTime12(parseISO15(row.entry_at), DATE_FORMAT)),
+      /* @__PURE__ */ React190.createElement(TableCell, null, humanizeEnum(row.entry_type)),
+      /* @__PURE__ */ React190.createElement(TableCell, null, "(", row.line_items.length, ")"),
+      /* @__PURE__ */ React190.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, "line_items" in row && Math.abs(
         row.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
       )),
-      /* @__PURE__ */ React187.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, "line_items" in row && Math.abs(
+      /* @__PURE__ */ React190.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, "line_items" in row && Math.abs(
         row.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
       ))
-    ), expandable && expanded && row.line_items.map((subItem, subIdx) => /* @__PURE__ */ React187.createElement(
+    ), expandable && expanded && row.line_items.map((subItem, subIdx) => /* @__PURE__ */ React190.createElement(
       TableRow,
       {
         key: rowKey + "-" + index + "-" + subIdx,
@@ -17026,15 +17154,15 @@ var JournalTableContent = ({
         depth: depth + 1,
         selected: selectedEntryId === row.id
       },
-      /* @__PURE__ */ React187.createElement(TableCell, null),
-      /* @__PURE__ */ React187.createElement(TableCell, null),
-      /* @__PURE__ */ React187.createElement(TableCell, null),
-      /* @__PURE__ */ React187.createElement(TableCell, null, accountName(subItem)),
-      subItem.direction === "DEBIT" && subItem.amount >= 0 ? /* @__PURE__ */ React187.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, subItem.amount) : /* @__PURE__ */ React187.createElement(TableCell, null),
-      subItem.direction === "CREDIT" && subItem.amount >= 0 ? /* @__PURE__ */ React187.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, subItem.amount) : /* @__PURE__ */ React187.createElement(TableCell, null)
+      /* @__PURE__ */ React190.createElement(TableCell, null),
+      /* @__PURE__ */ React190.createElement(TableCell, null),
+      /* @__PURE__ */ React190.createElement(TableCell, null),
+      /* @__PURE__ */ React190.createElement(TableCell, null, accountName(subItem)),
+      subItem.direction === "DEBIT" && subItem.amount >= 0 ? /* @__PURE__ */ React190.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, subItem.amount) : /* @__PURE__ */ React190.createElement(TableCell, null),
+      subItem.direction === "CREDIT" && subItem.amount >= 0 ? /* @__PURE__ */ React190.createElement(TableCell, { isCurrency: true, primary: true, align: "right" /* RIGHT */ }, subItem.amount) : /* @__PURE__ */ React190.createElement(TableCell, null)
     )));
   };
-  return /* @__PURE__ */ React187.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React187.createElement(TableHead, null, /* @__PURE__ */ React187.createElement(TableRow, { isHeadRow: true, rowKey: "journal-head-row" }, /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.idColumnHeader) || "Id"), /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.dateColumnHeader) || "Date"), /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.transactionColumnHeader) || "Transaction"), /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.accountColumnHeader) || "Account Name"), /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.debitColumnHeader) || "Debit"), /* @__PURE__ */ React187.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.creditColumnHeader) || "Credit"))), /* @__PURE__ */ React187.createElement(TableBody, null, data.map(
+  return /* @__PURE__ */ React190.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React190.createElement(TableHead, null, /* @__PURE__ */ React190.createElement(TableRow, { isHeadRow: true, rowKey: "journal-head-row" }, /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.idColumnHeader) || "Id"), /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.dateColumnHeader) || "Date"), /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.transactionColumnHeader) || "Transaction"), /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true }, (stringOverrides == null ? void 0 : stringOverrides.accountColumnHeader) || "Account Name"), /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.debitColumnHeader) || "Debit"), /* @__PURE__ */ React190.createElement(TableCell, { isHeaderCell: true, align: "right" /* RIGHT */ }, (stringOverrides == null ? void 0 : stringOverrides.creditColumnHeader) || "Credit"))), /* @__PURE__ */ React190.createElement(TableBody, null, data.map(
     (entry, idx) => renderJournalRow(entry, idx, `journal-row-${entry.id}`, 0)
   )));
 };
@@ -17058,16 +17186,16 @@ var JournalTableWithPanel = ({
     selectedEntryId,
     addEntry
   } = useContext39(JournalContext);
-  const data = useMemo18(() => {
+  const data = useMemo23(() => {
     var _a;
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return (_a = rawData == null ? void 0 : rawData.sort((a, b) => Date.parse(b.entry_at) - Date.parse(a.entry_at))) == null ? void 0 : _a.slice(firstPageIndex, lastPageIndex);
   }, [rawData, currentPage]);
-  return /* @__PURE__ */ React188.createElement(
+  return /* @__PURE__ */ React191.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React188.createElement(
+      sidebar: /* @__PURE__ */ React191.createElement(
         JournalSidebar,
         {
           parentRef: containerRef,
@@ -17078,7 +17206,7 @@ var JournalTableWithPanel = ({
       sidebarIsOpen: Boolean(selectedEntryId),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React188.createElement(
+    /* @__PURE__ */ React191.createElement(
       Header2,
       {
         className: `Layer__${COMPONENT_NAME6}__header`,
@@ -17086,7 +17214,7 @@ var JournalTableWithPanel = ({
         sticky: true,
         rounded: true
       },
-      /* @__PURE__ */ React188.createElement(HeaderRow, null, /* @__PURE__ */ React188.createElement(HeaderCol, null, /* @__PURE__ */ React188.createElement(
+      /* @__PURE__ */ React191.createElement(HeaderRow, null, /* @__PURE__ */ React191.createElement(HeaderCol, null, /* @__PURE__ */ React191.createElement(
         Heading,
         {
           className: `Layer__${COMPONENT_NAME6}__title`,
@@ -17095,25 +17223,25 @@ var JournalTableWithPanel = ({
         (stringOverrides == null ? void 0 : stringOverrides.componentTitle) || "Journal"
       )))
     ),
-    /* @__PURE__ */ React188.createElement(Header2, null, /* @__PURE__ */ React188.createElement(HeaderRow, null, /* @__PURE__ */ React188.createElement(HeaderCol, null, /* @__PURE__ */ React188.createElement(
+    /* @__PURE__ */ React191.createElement(Header2, null, /* @__PURE__ */ React191.createElement(HeaderRow, null, /* @__PURE__ */ React191.createElement(HeaderCol, null, /* @__PURE__ */ React191.createElement(
       Heading,
       {
         size: "secondary" /* secondary */,
         className: `Layer__${COMPONENT_NAME6}__subtitle`
       },
       (stringOverrides == null ? void 0 : stringOverrides.componentSubtitle) || "Entries"
-    )), /* @__PURE__ */ React188.createElement(HeaderCol, null, /* @__PURE__ */ React188.createElement(
+    )), /* @__PURE__ */ React191.createElement(HeaderCol, null, /* @__PURE__ */ React191.createElement(
       Button,
       {
         onClick: () => addEntry(),
         disabled: isLoading,
         iconOnly: view === "mobile",
-        leftIcon: view === "mobile" && /* @__PURE__ */ React188.createElement(PlusIcon_default, { size: 14 })
+        leftIcon: view === "mobile" && /* @__PURE__ */ React191.createElement(PlusIcon_default, { size: 14 })
       },
       (stringOverrides == null ? void 0 : stringOverrides.addEntryButton) || "Add Entry"
     )))),
-    data && /* @__PURE__ */ React188.createElement(JournalTable, { view: "desktop", data }),
-    data && /* @__PURE__ */ React188.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ React188.createElement(
+    data && /* @__PURE__ */ React191.createElement(JournalTable, { view: "desktop", data }),
+    data && /* @__PURE__ */ React191.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ React191.createElement(
       Pagination,
       {
         currentPage,
@@ -17122,7 +17250,7 @@ var JournalTableWithPanel = ({
         onPageChange: (page) => setCurrentPage(page)
       }
     )),
-    (data == null ? void 0 : data.length) === 0 && !isLoading && !error && /* @__PURE__ */ React188.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React188.createElement(
+    (data == null ? void 0 : data.length) === 0 && !isLoading && !error && /* @__PURE__ */ React191.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React191.createElement(
       DataState,
       {
         status: "allDone" /* allDone */,
@@ -17130,7 +17258,7 @@ var JournalTableWithPanel = ({
         description: "There are no entries in the journal."
       }
     )),
-    error ? /* @__PURE__ */ React188.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React188.createElement(
+    error ? /* @__PURE__ */ React191.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React191.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -17140,7 +17268,7 @@ var JournalTableWithPanel = ({
         isLoading: isValidating || isLoading
       }
     )) : null,
-    (!data || isLoading) && !error ? /* @__PURE__ */ React188.createElement("div", { className: `Layer__${COMPONENT_NAME6}__loader-container` }, /* @__PURE__ */ React188.createElement(Loader2, null)) : null
+    (!data || isLoading) && !error ? /* @__PURE__ */ React191.createElement("div", { className: `Layer__${COMPONENT_NAME6}__loader-container` }, /* @__PURE__ */ React191.createElement(Loader2, null)) : null
   );
 };
 
@@ -17153,7 +17281,7 @@ var JOURNAL_CONFIG = {
 var Journal = (props) => {
   const JournalContextData = useJournal();
   const AccountsContextData = useChartOfAccounts();
-  return /* @__PURE__ */ React189.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React189.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React189.createElement(JournalContent, __spreadValues({}, props))));
+  return /* @__PURE__ */ React192.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React192.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React192.createElement(JournalContent, __spreadValues({}, props))));
 };
 var JournalContent = ({
   asWidget,
@@ -17164,7 +17292,7 @@ var JournalContent = ({
   const containerRef = useElementViewSize(
     (newView) => setView(newView)
   );
-  return /* @__PURE__ */ React189.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ React189.createElement(
+  return /* @__PURE__ */ React192.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ React192.createElement(
     JournalTableWithPanel,
     {
       view,
@@ -17176,11 +17304,11 @@ var JournalContent = ({
 };
 
 // src/components/Tasks/Tasks.tsx
-import React196, {
+import React199, {
   createContext as createContext17,
   useContext as useContext44,
   useEffect as useEffect48,
-  useMemo as useMemo20,
+  useMemo as useMemo25,
   useState as useState58
 } from "react";
 
@@ -17311,13 +17439,13 @@ function isComplete(taskType) {
 }
 
 // src/components/TasksHeader/TasksHeader.tsx
-import React191, { useContext as useContext40 } from "react";
+import React194, { useContext as useContext40 } from "react";
 
 // src/icons/ProgressIcon.tsx
-import * as React190 from "react";
+import * as React193 from "react";
 var ProgressIcon = (_a) => {
   var _b = _a, { size = 12 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React190.createElement(
+  return /* @__PURE__ */ React193.createElement(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -17327,7 +17455,7 @@ var ProgressIcon = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M9 1.5V4.5",
@@ -17336,7 +17464,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M9 13.5V16.5",
@@ -17345,7 +17473,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M3.6975 3.6975L5.82 5.82",
@@ -17354,7 +17482,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M12.18 12.18L14.3025 14.3025",
@@ -17363,7 +17491,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M1.5 9H4.5",
@@ -17372,7 +17500,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M13.5 9H16.5",
@@ -17381,7 +17509,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M3.6975 14.3025L5.82 12.18",
@@ -17390,7 +17518,7 @@ var ProgressIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React190.createElement(
+    /* @__PURE__ */ React193.createElement(
       "path",
       {
         d: "M12.18 5.82L14.3025 3.6975",
@@ -17406,22 +17534,22 @@ var ProgressIcon_default = ProgressIcon;
 // src/components/TasksHeader/TasksHeader.tsx
 var ICONS = {
   loading: {
-    icon: /* @__PURE__ */ React191.createElement(ProgressIcon_default, { size: 12, className: "Layer__anim--rotating" }),
+    icon: /* @__PURE__ */ React194.createElement(ProgressIcon_default, { size: 12, className: "Layer__anim--rotating" }),
     text: "Loading",
     badge: "default" /* DEFAULT */
   },
   done: {
-    icon: /* @__PURE__ */ React191.createElement(Check_default, { size: 12 }),
+    icon: /* @__PURE__ */ React194.createElement(Check_default, { size: 12 }),
     text: "Done",
     badge: "success" /* SUCCESS */
   },
   pending: {
-    icon: /* @__PURE__ */ React191.createElement(AlertCircle_default, { size: 12 }),
+    icon: /* @__PURE__ */ React194.createElement(AlertCircle_default, { size: 12 }),
     text: "In progress",
     badge: "warning" /* WARNING */
   },
   refresh: {
-    icon: /* @__PURE__ */ React191.createElement(RefreshCcw_default, { size: 12 }),
+    icon: /* @__PURE__ */ React194.createElement(RefreshCcw_default, { size: 12 }),
     text: "Refresh",
     badge: "default" /* DEFAULT */
   }
@@ -17435,7 +17563,7 @@ var TasksHeader = ({
   const { data: tasks, loadedStatus, refetch, error } = useContext40(TasksContext);
   const completedTasks = tasks == null ? void 0 : tasks.filter((task) => isComplete(task.status)).length;
   const badgeVariant = completedTasks === (tasks == null ? void 0 : tasks.length) ? ICONS.done : ICONS.pending;
-  return /* @__PURE__ */ React191.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React191.createElement("div", { className: "Layer__tasks-header__left-col" }, /* @__PURE__ */ React191.createElement(Text, { size: "lg" /* lg */ }, tasksHeader), loadedStatus !== "complete" && !open ? /* @__PURE__ */ React191.createElement(Badge, { variant: ICONS.loading.badge, icon: ICONS.loading.icon }, ICONS.loading.text) : loadedStatus === "complete" && (!tasks || error) ? /* @__PURE__ */ React191.createElement(
+  return /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks-header__left-col" }, /* @__PURE__ */ React194.createElement(Text, { size: "lg" /* lg */ }, tasksHeader), loadedStatus !== "complete" && !open ? /* @__PURE__ */ React194.createElement(Badge, { variant: ICONS.loading.badge, icon: ICONS.loading.icon }, ICONS.loading.text) : loadedStatus === "complete" && (!tasks || error) ? /* @__PURE__ */ React194.createElement(
     Badge,
     {
       onClick: () => refetch(),
@@ -17443,17 +17571,17 @@ var TasksHeader = ({
       icon: ICONS.refresh.icon
     },
     ICONS.refresh.text
-  ) : loadedStatus === "complete" ? /* @__PURE__ */ React191.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text) : open ? null : /* @__PURE__ */ React191.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text)), collapsable && /* @__PURE__ */ React191.createElement(ExpandButton, { onClick: toggleContent, collapsed: !open }));
+  ) : loadedStatus === "complete" ? /* @__PURE__ */ React194.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text) : open ? null : /* @__PURE__ */ React194.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text)), collapsable && /* @__PURE__ */ React194.createElement(ExpandButton, { onClick: toggleContent, collapsed: !open }));
 };
 
 // src/components/TasksList/TasksList.tsx
-import React194, { useContext as useContext42, useMemo as useMemo19, useState as useState57 } from "react";
+import React197, { useContext as useContext42, useMemo as useMemo24, useState as useState57 } from "react";
 
 // src/icons/SmileIcon.tsx
-import * as React192 from "react";
+import * as React195 from "react";
 var SmileIcon = (_a) => {
   var _b = _a, { size = 12 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React192.createElement(
+  return /* @__PURE__ */ React195.createElement(
     "svg",
     __spreadProps(__spreadValues({
       viewBox: "0 0 12 12",
@@ -17463,7 +17591,7 @@ var SmileIcon = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React192.createElement(
+    /* @__PURE__ */ React195.createElement(
       "path",
       {
         d: "M6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5Z",
@@ -17472,7 +17600,7 @@ var SmileIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React192.createElement(
+    /* @__PURE__ */ React195.createElement(
       "path",
       {
         d: "M4.5 7.5C4.5 7.5 5.25 8.5 6.5 8.5C7.75 8.5 8.5 7.5 8.5 7.5",
@@ -17481,7 +17609,7 @@ var SmileIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React192.createElement(
+    /* @__PURE__ */ React195.createElement(
       "path",
       {
         d: "M5 5H5.005",
@@ -17490,7 +17618,7 @@ var SmileIcon = (_a) => {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ React192.createElement(
+    /* @__PURE__ */ React195.createElement(
       "path",
       {
         d: "M8 5H8.005",
@@ -17504,8 +17632,8 @@ var SmileIcon = (_a) => {
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React193, { useContext as useContext41, useEffect as useEffect47, useState as useState56 } from "react";
-import classNames67 from "classnames";
+import React196, { useContext as useContext41, useEffect as useEffect47, useState as useState56 } from "react";
+import classNames66 from "classnames";
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
@@ -17514,30 +17642,30 @@ var TasksListItem = ({
   const [isOpen, setIsOpen] = useState56(defaultOpen);
   const [userResponse, setUserResponse] = useState56(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2, uploadDocumentForTask } = useContext41(TasksContext);
-  const taskBodyClassName = classNames67(
+  const taskBodyClassName = classNames66(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = classNames67(
+  const taskHeadClassName = classNames66(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = classNames67(
+  const taskItemClassName = classNames66(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
   useEffect47(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
-  return /* @__PURE__ */ React193.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React193.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React193.createElement(
+  return /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React196.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React196.createElement(
     "div",
     {
       className: "Layer__tasks-list-item__head",
       onClick: () => setIsOpen(!isOpen)
     },
-    /* @__PURE__ */ React193.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React193.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, isComplete(task.status) ? /* @__PURE__ */ React193.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React193.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React193.createElement(Text, { size: "md" /* md */ }, task.title)),
-    /* @__PURE__ */ React193.createElement(
+    /* @__PURE__ */ React196.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, isComplete(task.status) ? /* @__PURE__ */ React196.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React196.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React196.createElement(Text, { size: "md" /* md */ }, task.title)),
+    /* @__PURE__ */ React196.createElement(
       ChevronDownFill_default,
       {
         size: 16,
@@ -17547,13 +17675,13 @@ var TasksListItem = ({
         }
       }
     )
-  ), /* @__PURE__ */ React193.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React193.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React193.createElement(Text, { size: "sm" /* sm */ }, task.question), task.user_response_type === "FREE_RESPONSE" ? /* @__PURE__ */ React193.createElement(
+  ), /* @__PURE__ */ React196.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React196.createElement(Text, { size: "sm" /* sm */ }, task.question), task.user_response_type === "FREE_RESPONSE" ? /* @__PURE__ */ React196.createElement(
     Textarea,
     {
       value: userResponse,
       onChange: (e) => setUserResponse(e.target.value)
     }
-  ) : null, /* @__PURE__ */ React193.createElement("div", { className: "Layer__tasks-list-item__actions" }, task.user_response_type === "UPLOAD_DOCUMENT" ? /* @__PURE__ */ React193.createElement(
+  ) : null, /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks-list-item__actions" }, task.user_response_type === "UPLOAD_DOCUMENT" ? /* @__PURE__ */ React196.createElement(
     FileInput,
     {
       onUpload: (file) => {
@@ -17564,7 +17692,7 @@ var TasksListItem = ({
       text: "Upload file",
       disabled: task.completed_at != null || task.user_marked_completed_at != null || task.archived_at != null
     }
-  ) : /* @__PURE__ */ React193.createElement(
+  ) : /* @__PURE__ */ React196.createElement(
     Button,
     {
       disabled: userResponse.length === 0 || userResponse === task.user_response,
@@ -17588,7 +17716,7 @@ function paginateArray(array, chunkSize = 10) {
   }
   return result;
 }
-var TasksEmptyState = () => /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React194.createElement(SmileIcon_default, null)), /* @__PURE__ */ React194.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React194.createElement("br", null), " Great job!"));
+var TasksEmptyState = () => /* @__PURE__ */ React197.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React197.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React197.createElement(SmileIcon_default, null)), /* @__PURE__ */ React197.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React197.createElement("br", null), " Great job!"));
 var TasksList = ({ pageSize = 10 }) => {
   const { data: tasks, error } = useContext42(TasksContext);
   const firstPageWithIincompleteTasks = paginateArray(
@@ -17598,7 +17726,7 @@ var TasksList = ({ pageSize = 10 }) => {
   const [currentPage, setCurrentPage] = useState57(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
-  const sortedTasks = useMemo19(() => {
+  const sortedTasks = useMemo24(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return tasks == null ? void 0 : tasks.slice(firstPageIndex, lastPageIndex);
@@ -17612,7 +17740,7 @@ var TasksList = ({ pageSize = 10 }) => {
       setCurrentPage(currentPage + 1);
     }
   };
-  return /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React194.createElement(React194.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React194.createElement(
+  return /* @__PURE__ */ React197.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React197.createElement(React197.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React197.createElement(
     TasksListItem,
     {
       key: task.id,
@@ -17620,7 +17748,7 @@ var TasksList = ({ pageSize = 10 }) => {
       goToNextPageIfAllComplete: goToNextPage,
       defaultOpen: index === indexFirstIncomplete
     }
-  )), tasks && tasks.length >= 10 && /* @__PURE__ */ React194.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React194.createElement(
+  )), tasks && tasks.length >= 10 && /* @__PURE__ */ React197.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React197.createElement(
     Pagination,
     {
       currentPage,
@@ -17628,12 +17756,12 @@ var TasksList = ({ pageSize = 10 }) => {
       pageSize,
       onPageChange: (page) => setCurrentPage(page)
     }
-  ))) : /* @__PURE__ */ React194.createElement(React194.Fragment, null, error ? /* @__PURE__ */ React194.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React194.createElement(TasksEmptyState, null)));
+  ))) : /* @__PURE__ */ React197.createElement(React197.Fragment, null, error ? /* @__PURE__ */ React197.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React197.createElement(TasksEmptyState, null)));
 };
 
 // src/components/TasksPending/TasksPending.tsx
-import React195, { useContext as useContext43 } from "react";
-import classNames68 from "classnames";
+import React198, { useContext as useContext43 } from "react";
+import classNames67 from "classnames";
 import { format as format7 } from "date-fns";
 import { Cell as Cell4, Pie as Pie3, PieChart as PieChart4 } from "recharts";
 var TasksPending = () => {
@@ -17649,10 +17777,10 @@ var TasksPending = () => {
       value: data == null ? void 0 : data.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = classNames68(
+  const taskStatusClassName = classNames67(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
-  return /* @__PURE__ */ React195.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React195.createElement(Text, { size: "lg" /* lg */ }, format7(Date.now(), "MMMM")), /* @__PURE__ */ React195.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React195.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React195.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data == null ? void 0 : data.length, " done"), /* @__PURE__ */ React195.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React195.createElement(
+  return /* @__PURE__ */ React198.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React198.createElement(Text, { size: "lg" /* lg */ }, format7(Date.now(), "MMMM")), /* @__PURE__ */ React198.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React198.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React198.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data == null ? void 0 : data.length, " done"), /* @__PURE__ */ React198.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React198.createElement(
     Pie3,
     {
       data: chartData,
@@ -17670,7 +17798,7 @@ var TasksPending = () => {
       animationEasing: "ease-in-out"
     },
     chartData.map((task, index) => {
-      return /* @__PURE__ */ React195.createElement(
+      return /* @__PURE__ */ React198.createElement(
         Cell4,
         {
           key: `cell-${index}`,
@@ -17683,7 +17811,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-import classNames69 from "classnames";
+import classNames68 from "classnames";
 var UseTasksContext = createContext17({
   data: void 0,
   isLoading: void 0,
@@ -17705,7 +17833,7 @@ var Tasks = ({
   // deprecated
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React196.createElement(TasksProvider, null, /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React199.createElement(TasksProvider, null, /* @__PURE__ */ React199.createElement(
     TasksComponent,
     {
       collapsable,
@@ -17718,7 +17846,7 @@ var Tasks = ({
 };
 var TasksProvider = ({ children }) => {
   const contextData = useTasks();
-  return /* @__PURE__ */ React196.createElement(TasksContext.Provider, { value: contextData }, children);
+  return /* @__PURE__ */ React199.createElement(TasksContext.Provider, { value: contextData }, children);
 };
 var TasksComponent = ({
   collapsable = false,
@@ -17729,7 +17857,7 @@ var TasksComponent = ({
   stringOverrides
 }) => {
   const { isLoading, loadedStatus, data } = useContext44(TasksContext);
-  const allComplete = useMemo20(() => {
+  const allComplete = useMemo25(() => {
     if (!data) {
       return void 0;
     }
@@ -17746,7 +17874,7 @@ var TasksComponent = ({
       setOpen(false);
     }
   }, [allComplete]);
-  return /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks-component" }, /* @__PURE__ */ React196.createElement(
+  return /* @__PURE__ */ React199.createElement("div", { className: "Layer__tasks-component" }, /* @__PURE__ */ React199.createElement(
     TasksHeader,
     {
       tasksHeader: (stringOverrides == null ? void 0 : stringOverrides.header) || tasksHeader,
@@ -17754,26 +17882,26 @@ var TasksComponent = ({
       open,
       toggleContent: () => setOpen(!open)
     }
-  ), /* @__PURE__ */ React196.createElement(
+  ), /* @__PURE__ */ React199.createElement(
     "div",
     {
-      className: classNames69(
+      className: classNames68(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
     },
-    isLoading || !data ? /* @__PURE__ */ React196.createElement("div", { className: "Layer__tasks__loader-container" }, /* @__PURE__ */ React196.createElement(Loader2, null)) : /* @__PURE__ */ React196.createElement(React196.Fragment, null, data.length > 0 && /* @__PURE__ */ React196.createElement(TasksPending, null), /* @__PURE__ */ React196.createElement(TasksList, null))
+    isLoading || !data ? /* @__PURE__ */ React199.createElement("div", { className: "Layer__tasks__loader-container" }, /* @__PURE__ */ React199.createElement(Loader2, null)) : /* @__PURE__ */ React199.createElement(React199.Fragment, null, data.length > 0 && /* @__PURE__ */ React199.createElement(TasksPending, null), /* @__PURE__ */ React199.createElement(TasksList, null))
   ));
 };
 
 // src/components/PlatformOnboarding/LinkAccounts.tsx
-import React197, { useContext as useContext45 } from "react";
+import React200, { useContext as useContext45 } from "react";
 var LinkAccounts = (_a) => {
   var _b = _a, { inBox } = _b, props = __objRest(_b, ["inBox"]);
   if (inBox) {
-    return /* @__PURE__ */ React197.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React197.createElement("div", { className: "Layer__link-accounts__box" }, /* @__PURE__ */ React197.createElement(LinkAccountsContent, __spreadValues({}, props))));
+    return /* @__PURE__ */ React200.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React200.createElement("div", { className: "Layer__link-accounts__box" }, /* @__PURE__ */ React200.createElement(LinkAccountsContent, __spreadValues({}, props))));
   }
-  return /* @__PURE__ */ React197.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React197.createElement(LinkAccountsContent, __spreadValues({}, props)));
+  return /* @__PURE__ */ React200.createElement(LinkedAccountsProvider, null, /* @__PURE__ */ React200.createElement(LinkAccountsContent, __spreadValues({}, props)));
 };
 var LinkAccountsContent = ({
   title,
@@ -17788,7 +17916,7 @@ var LinkAccountsContent = ({
 }) => {
   var _a, _b;
   const { data, loadingStatus, error, refetchAccounts, addConnection } = useContext45(LinkedAccountsContext);
-  return /* @__PURE__ */ React197.createElement("div", { className: "Layer__link-accounts Layer__component" }, title && /* @__PURE__ */ React197.createElement(Heading, { size: "view" /* view */ }, title), data && data.length === 0 ? /* @__PURE__ */ React197.createElement("div", { className: "Layer__link-accounts__data-status-container" }, !hideLoading && loadingStatus !== "complete" ? /* @__PURE__ */ React197.createElement(Loader2, null) : null, Boolean(error) && /* @__PURE__ */ React197.createElement(
+  return /* @__PURE__ */ React200.createElement("div", { className: "Layer__link-accounts Layer__component" }, title && /* @__PURE__ */ React200.createElement(Heading, { size: "view" /* view */ }, title), data && data.length === 0 ? /* @__PURE__ */ React200.createElement("div", { className: "Layer__link-accounts__data-status-container" }, !hideLoading && loadingStatus !== "complete" ? /* @__PURE__ */ React200.createElement(Loader2, null) : null, Boolean(error) && /* @__PURE__ */ React200.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -17796,7 +17924,7 @@ var LinkAccountsContent = ({
       description: "Please try again later",
       onRefresh: refetchAccounts
     }
-  )) : null, data && data.length > 0 ? /* @__PURE__ */ React197.createElement("div", { className: "Layer__link-accounts__list" }, data == null ? void 0 : data.map((account, index) => /* @__PURE__ */ React197.createElement(
+  )) : null, data && data.length > 0 ? /* @__PURE__ */ React200.createElement("div", { className: "Layer__link-accounts__list" }, data == null ? void 0 : data.map((account, index) => /* @__PURE__ */ React200.createElement(
     LinkedAccountItemThumb,
     {
       key: index,
@@ -17806,33 +17934,33 @@ var LinkAccountsContent = ({
       showBreakConnection,
       asWidget
     }
-  ))) : null, /* @__PURE__ */ React197.createElement(
+  ))) : null, /* @__PURE__ */ React200.createElement(
     ActionableRow,
     {
-      iconBox: /* @__PURE__ */ React197.createElement(PlaidIcon_default, null),
+      iconBox: /* @__PURE__ */ React200.createElement(PlaidIcon_default, null),
       title: data && data.length > 0 ? "Connect my next business account" : "Connect accounts",
       description: "Import data with one simple integration.",
-      button: /* @__PURE__ */ React197.createElement(
+      button: /* @__PURE__ */ React200.createElement(
         Button,
         {
           onClick: () => addConnection("PLAID"),
-          rightIcon: /* @__PURE__ */ React197.createElement(Link_default, { size: 12 }),
+          rightIcon: /* @__PURE__ */ React200.createElement(Link_default, { size: 12 }),
           disabled: loadingStatus !== "complete"
         },
         data && data.length > 0 ? "Connect next" : "Connect"
       )
     }
-  ), onBack || onNext ? /* @__PURE__ */ React197.createElement("div", { className: "Layer__link-accounts__footer" }, onBack && /* @__PURE__ */ React197.createElement(Button, { onClick: onBack, variant: "secondary" /* secondary */ }, (_a = stringOverrides == null ? void 0 : stringOverrides.backButtonText) != null ? _a : "Back"), onNext && /* @__PURE__ */ React197.createElement(Button, { onClick: onNext }, (_b = stringOverrides == null ? void 0 : stringOverrides.nextButtonText) != null ? _b : "I\u2019m done connecting my business accounts")) : null);
+  ), onBack || onNext ? /* @__PURE__ */ React200.createElement("div", { className: "Layer__link-accounts__footer" }, onBack && /* @__PURE__ */ React200.createElement(Button, { onClick: onBack, variant: "secondary" /* secondary */ }, (_a = stringOverrides == null ? void 0 : stringOverrides.backButtonText) != null ? _a : "Back"), onNext && /* @__PURE__ */ React200.createElement(Button, { onClick: onNext }, (_b = stringOverrides == null ? void 0 : stringOverrides.nextButtonText) != null ? _b : "I\u2019m done connecting my business accounts")) : null);
 };
 
 // src/components/UpsellBanner/BookkeepingUpsellBar.tsx
-import React199 from "react";
+import React202 from "react";
 
 // src/icons/Coffee.tsx
-import * as React198 from "react";
+import * as React201 from "react";
 var CoffeeIcon = (_a) => {
   var _b = _a, { size = 11 } = _b, props = __objRest(_b, ["size"]);
-  return /* @__PURE__ */ React198.createElement(
+  return /* @__PURE__ */ React201.createElement(
     "svg",
     __spreadProps(__spreadValues({
       xmlns: "http://www.w3.org/2000/svg",
@@ -17842,7 +17970,7 @@ var CoffeeIcon = (_a) => {
       width: size,
       height: size
     }),
-    /* @__PURE__ */ React198.createElement("g", { clipPath: "url(#clip0_5018_10141)" }, /* @__PURE__ */ React198.createElement(
+    /* @__PURE__ */ React201.createElement("g", { clipPath: "url(#clip0_5018_10141)" }, /* @__PURE__ */ React201.createElement(
       "path",
       {
         d: "M3.25 4.16666H2.79167C2.30544 4.16666 1.83912 4.35981 1.4953 4.70363C1.15149 5.04744 0.958333 5.51376 0.958333 5.99999C0.958333 6.48622 1.15149 6.95254 1.4953 7.29635C1.83912 7.64017 2.30544 7.83332 2.79167 7.83332H3.25",
@@ -17850,7 +17978,7 @@ var CoffeeIcon = (_a) => {
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ), /* @__PURE__ */ React198.createElement(
+    ), /* @__PURE__ */ React201.createElement(
       "path",
       {
         d: "M10.5834 4.16666H3.25004V8.29166C3.25004 8.77789 3.4432 9.2442 3.78701 9.58802C4.13083 9.93184 4.59714 10.125 5.08337 10.125H8.75004C9.23627 10.125 9.70259 9.93184 10.0464 9.58802C10.3902 9.2442 10.5834 8.77789 10.5834 8.29166V4.16666Z",
@@ -17858,7 +17986,7 @@ var CoffeeIcon = (_a) => {
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ), /* @__PURE__ */ React198.createElement(
+    ), /* @__PURE__ */ React201.createElement(
       "path",
       {
         d: "M8.75 0.958344V2.33334",
@@ -17866,7 +17994,7 @@ var CoffeeIcon = (_a) => {
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ), /* @__PURE__ */ React198.createElement(
+    ), /* @__PURE__ */ React201.createElement(
       "path",
       {
         d: "M6.91663 0.958344V2.33334",
@@ -17874,7 +18002,7 @@ var CoffeeIcon = (_a) => {
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
-    ), /* @__PURE__ */ React198.createElement(
+    ), /* @__PURE__ */ React201.createElement(
       "path",
       {
         d: "M5.08337 0.958344V2.33334",
@@ -17883,7 +18011,7 @@ var CoffeeIcon = (_a) => {
         strokeLinejoin: "round"
       }
     )),
-    /* @__PURE__ */ React198.createElement("defs", null, /* @__PURE__ */ React198.createElement("clipPath", { id: "clip0_5018_10141" }, /* @__PURE__ */ React198.createElement(
+    /* @__PURE__ */ React201.createElement("defs", null, /* @__PURE__ */ React201.createElement("clipPath", { id: "clip0_5018_10141" }, /* @__PURE__ */ React201.createElement(
       "rect",
       {
         width: "11",
@@ -17901,38 +18029,50 @@ var BookkeepingUpsellBar = ({
   onClick,
   href
 }) => {
-  return /* @__PURE__ */ React199.createElement("div", { className: "Layer__bar-banner Layer__bar-banner--bookkeeping" }, /* @__PURE__ */ React199.createElement("div", { className: "Layer__bar-banner__left-col" }, /* @__PURE__ */ React199.createElement(IconBox, null, /* @__PURE__ */ React199.createElement(Coffee_default, null)), /* @__PURE__ */ React199.createElement("div", { className: "Layer__bar-banner__text-container" }, /* @__PURE__ */ React199.createElement(Text, { size: "md" /* md */, weight: "bold" /* bold */ }, "Need help with your books?"), /* @__PURE__ */ React199.createElement(
+  return /* @__PURE__ */ React202.createElement("div", { className: "Layer__bar-banner Layer__bar-banner--bookkeeping" }, /* @__PURE__ */ React202.createElement("div", { className: "Layer__bar-banner__left-col" }, /* @__PURE__ */ React202.createElement(IconBox, null, /* @__PURE__ */ React202.createElement(Coffee_default, null)), /* @__PURE__ */ React202.createElement("div", { className: "Layer__bar-banner__text-container" }, /* @__PURE__ */ React202.createElement(Text, { size: "md" /* md */, weight: "bold" /* bold */ }, "Need help with your books?"), /* @__PURE__ */ React202.createElement(
     Text,
     {
       size: "sm" /* sm */,
       className: "Layer__bar-banner__text-container__desc"
     },
     "Order bookkeeping service supported by real humans."
-  ))), onClick ? /* @__PURE__ */ React199.createElement(Button, { variant: "secondary" /* secondary */, onClick }, "Schedule a demo") : href ? /* @__PURE__ */ React199.createElement(Link2, { href, target: "_blank", variant: "secondary" /* secondary */ }, "Schedule a demo") : null);
+  ))), onClick ? /* @__PURE__ */ React202.createElement(Button, { variant: "secondary" /* secondary */, onClick }, "Schedule a demo") : href ? /* @__PURE__ */ React202.createElement(Link2, { href, target: "_blank", variant: "secondary" /* secondary */ }, "Schedule a demo") : null);
 };
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import React200, { useState as useState59 } from "react";
-import classNames70 from "classnames";
+import React204, { useState as useState59 } from "react";
+
+// src/views/BookkeepingOverview/internal/BookkeepingProfitAndLossSummariesContainer.tsx
+import React203 from "react";
+var CLASS_NAME2 = "Layer__BookkeepingProfitAndLossSummariesContainer";
+function BookkeepingProfitAndLossSummariesContainer({
+  children
+}) {
+  return /* @__PURE__ */ React203.createElement("div", { className: CLASS_NAME2 }, children);
+}
+
+// src/views/BookkeepingOverview/BookkeepingOverview.tsx
+import classNames69 from "classnames";
 var BookkeepingOverview = ({
   title,
-  // deprecated
   showTitle = true,
-  stringOverrides
+  stringOverrides,
+  slotProps
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const [pnlToggle, setPnlToggle] = useState59("expenses");
   const [width] = useWindowSize();
-  return /* @__PURE__ */ React200.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React200.createElement(TasksProvider, null, /* @__PURE__ */ React200.createElement(
+  const profitAndLossSummariesVariants = (_b = (_a = slotProps == null ? void 0 : slotProps.profitAndLoss) == null ? void 0 : _a.summaries) == null ? void 0 : _b.variants;
+  return /* @__PURE__ */ React204.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React204.createElement(TasksProvider, null, /* @__PURE__ */ React204.createElement(
     View,
     {
       viewClassName: "Layer__bookkeeping-overview--view",
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || title || "Bookkeeping overview",
       withSidebar: width > 1100,
-      sidebar: /* @__PURE__ */ React200.createElement(TasksComponent, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.tasks }),
+      sidebar: /* @__PURE__ */ React204.createElement(TasksComponent, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.tasks }),
       showHeader: showTitle
     },
-    width <= 1100 && /* @__PURE__ */ React200.createElement(
+    width <= 1100 && /* @__PURE__ */ React204.createElement(
       TasksComponent,
       {
         collapsable: true,
@@ -17940,29 +18080,30 @@ var BookkeepingOverview = ({
         stringOverrides: stringOverrides == null ? void 0 : stringOverrides.tasks
       }
     ),
-    /* @__PURE__ */ React200.createElement(
+    /* @__PURE__ */ React204.createElement(
       Container,
       {
         name: "bookkeeping-overview-profit-and-loss",
         asWidget: true,
         elevated: true
       },
-      /* @__PURE__ */ React200.createElement(
+      /* @__PURE__ */ React204.createElement(
         ProfitAndLoss.Header,
         {
-          text: ((_a = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _a.header) || "Profit & Loss",
+          text: ((_c = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _c.header) || "Profit & Loss",
           withDatePicker: true
         }
       ),
-      /* @__PURE__ */ React200.createElement("div", { className: "Layer__bookkeeping-overview__summaries-row" }, /* @__PURE__ */ React200.createElement(
+      /* @__PURE__ */ React204.createElement(BookkeepingProfitAndLossSummariesContainer, null, /* @__PURE__ */ React204.createElement(
         ProfitAndLoss.Summaries,
         {
-          stringOverrides: (_b = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _b.summaries
+          stringOverrides: (_d = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _d.summaries,
+          variants: profitAndLossSummariesVariants
         }
       )),
-      /* @__PURE__ */ React200.createElement(ProfitAndLoss.Chart, null)
+      /* @__PURE__ */ React204.createElement(ProfitAndLoss.Chart, null)
     ),
-    /* @__PURE__ */ React200.createElement("div", { className: "Layer__bookkeeping-overview-profit-and-loss-charts" }, /* @__PURE__ */ React200.createElement(
+    /* @__PURE__ */ React204.createElement("div", { className: "Layer__bookkeeping-overview-profit-and-loss-charts" }, /* @__PURE__ */ React204.createElement(
       Toggle,
       {
         name: "pnl-detailed-charts",
@@ -17979,36 +18120,36 @@ var BookkeepingOverview = ({
         selected: pnlToggle,
         onChange: (e) => setPnlToggle(e.target.value)
       }
-    ), /* @__PURE__ */ React200.createElement(
+    ), /* @__PURE__ */ React204.createElement(
       Container,
       {
-        name: classNames70(
+        name: classNames69(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
       },
-      /* @__PURE__ */ React200.createElement(
+      /* @__PURE__ */ React204.createElement(
         ProfitAndLoss.DetailedCharts,
         {
           scope: "revenue",
           hideClose: true,
-          stringOverrides: (_c = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _c.detailedCharts
+          stringOverrides: (_e = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _e.detailedCharts
         }
       )
-    ), /* @__PURE__ */ React200.createElement(
+    ), /* @__PURE__ */ React204.createElement(
       Container,
       {
-        name: classNames70(
+        name: classNames69(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
       },
-      /* @__PURE__ */ React200.createElement(
+      /* @__PURE__ */ React204.createElement(
         ProfitAndLoss.DetailedCharts,
         {
           scope: "expenses",
           hideClose: true,
-          stringOverrides: (_d = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _d.detailedCharts
+          stringOverrides: (_f = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _f.detailedCharts
         }
       )
     ))
@@ -18016,42 +18157,38 @@ var BookkeepingOverview = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React204, { useState as useState61 } from "react";
+import React208, { useState as useState61 } from "react";
 
-// src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React203, { useContext as useContext46, useEffect as useEffect49, useState as useState60 } from "react";
+// src/views/AccountingOverview/internal/TransactionsToReview.tsx
+import React207, { useContext as useContext46, useEffect as useEffect49, useState as useState60 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
-import React201 from "react";
+import React205 from "react";
 var BadgeLoader = ({ children }) => {
-  return /* @__PURE__ */ React201.createElement("span", { className: "Layer__loader Layer__loader--as-badge" }, /* @__PURE__ */ React201.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ React205.createElement("span", { className: "Layer__loader Layer__loader--as-badge" }, /* @__PURE__ */ React205.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }), children);
 };
 
-// src/components/NotificationCard/NotificationCard.tsx
-import React202 from "react";
-import classNames71 from "classnames";
-var NotificationCard = ({
-  onClick,
-  children,
-  className
-}) => {
-  return /* @__PURE__ */ React202.createElement("div", { className: classNames71("Layer__notification-card", className) }, /* @__PURE__ */ React202.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React202.createElement(
-    IconButton,
-    {
-      icon: /* @__PURE__ */ React202.createElement(ChevronRight_default, null),
-      withBorder: true,
-      onClick: () => onClick()
-    }
-  ));
-};
+// src/components/ui/Stack.tsx
+import React206, { useMemo as useMemo26 } from "react";
+var CLASS_NAME3 = "Layer__VStack";
+function VStack({ align, children, gap }) {
+  const dataProperties = useMemo26(
+    () => toDataProperties({ align, gap }),
+    [align, gap]
+  );
+  return /* @__PURE__ */ React206.createElement("div", __spreadValues({ className: CLASS_NAME3 }, dataProperties), children);
+}
 
-// src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
+// src/views/AccountingOverview/internal/TransactionsToReview.tsx
 import { getMonth as getMonth2, getYear as getYear2, startOfMonth as startOfMonth16 } from "date-fns";
-var TransactionToReviewCard = ({
+var CLASS_NAME4 = "Layer__TransactionsToReview";
+function TransactionsToReview({
   onClick,
   usePnlDateRange,
-  tagFilter = void 0
-}) => {
+  tagFilter = void 0,
+  variants
+}) {
+  const { size = "sm" } = variants != null ? variants : {};
   const { dateRange: contextDateRange } = useContext46(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
   const [toReview, setToReview] = useState60(0);
@@ -18075,48 +18212,46 @@ var TransactionToReviewCard = ({
       }
     }
   };
-  return /* @__PURE__ */ React203.createElement(
-    NotificationCard,
+  let verticalGap = "3xs";
+  switch (size) {
+    case "sm":
+      verticalGap = "3xs";
+      break;
+    case "lg":
+      verticalGap = "sm";
+      break;
+  }
+  return /* @__PURE__ */ React207.createElement("div", { onClick, className: CLASS_NAME4 }, /* @__PURE__ */ React207.createElement(VStack, { gap: verticalGap, align: "start" }, /* @__PURE__ */ React207.createElement(ProfitAndLossSummariesHeading, { variants }, "Transactions to review"), loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ React207.createElement(BadgeLoader, null) : null, loaded === "complete" && error ? /* @__PURE__ */ React207.createElement(
+    Badge,
     {
-      className: "Layer__txs-to-review",
-      onClick: () => onClick && onClick()
+      variant: "error" /* ERROR */,
+      size: "small" /* SMALL */,
+      icon: /* @__PURE__ */ React207.createElement(RefreshCcw_default, { size: 12 }),
+      onClick: () => refetch()
     },
-    /* @__PURE__ */ React203.createElement(Text, { size: "sm" /* sm */ }, "Transactions to review"),
-    loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ React203.createElement(BadgeLoader, null) : null,
-    loaded === "complete" && error ? /* @__PURE__ */ React203.createElement(
-      Badge,
-      {
-        variant: "error" /* ERROR */,
-        size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React203.createElement(RefreshCcw_default, { size: 12 }),
-        onClick: () => refetch()
-      },
-      "Refresh"
-    ) : null,
-    loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React203.createElement(
-      Badge,
-      {
-        variant: "warning" /* WARNING */,
-        size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React203.createElement(Bell_default, { size: 12 })
-      },
-      toReview,
-      " pending"
-    ) : null,
-    loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React203.createElement(
-      Badge,
-      {
-        variant: "success" /* SUCCESS */,
-        size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React203.createElement(Check_default, { size: 12 })
-      },
-      "All done"
-    ) : null
-  );
-};
+    "Refresh"
+  ) : null, loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React207.createElement(
+    Badge,
+    {
+      variant: "warning" /* WARNING */,
+      size: "small" /* SMALL */,
+      icon: /* @__PURE__ */ React207.createElement(Bell_default, { size: 12 })
+    },
+    toReview,
+    " pending"
+  ) : null, loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React207.createElement(
+    Badge,
+    {
+      variant: "success" /* SUCCESS */,
+      size: "small" /* SMALL */,
+      icon: /* @__PURE__ */ React207.createElement(Check_default, { size: 12 })
+    },
+    "All done"
+  ) : null), /* @__PURE__ */ React207.createElement(IconButton, { icon: /* @__PURE__ */ React207.createElement(ChevronRight_default, null), withBorder: true, onClick }));
+}
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import classNames72 from "classnames";
+import classNames70 from "classnames";
 var AccountingOverview = ({
   title = "Accounting overview",
   showTitle = true,
@@ -18127,65 +18262,75 @@ var AccountingOverview = ({
   chartColorsList,
   stringOverrides,
   tagFilter = void 0,
-  showTransactionsToReview = true
+  showTransactionsToReview = true,
+  slotProps
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const [pnlToggle, setPnlToggle] = useState61("expenses");
-  return /* @__PURE__ */ React204.createElement(
+  const profitAndLossSummariesVariants = (_b = (_a = slotProps == null ? void 0 : slotProps.profitAndLoss) == null ? void 0 : _a.summaries) == null ? void 0 : _b.variants;
+  return /* @__PURE__ */ React208.createElement(
     ProfitAndLoss,
     {
       asContainer: false,
       tagFilter: tagFilter ? { key: tagFilter.tagKey, values: tagFilter.tagValues } : void 0
     },
-    /* @__PURE__ */ React204.createElement(
+    /* @__PURE__ */ React208.createElement(
       View,
       {
         title,
         showHeader: showTitle,
-        header: /* @__PURE__ */ React204.createElement(Header2, null, /* @__PURE__ */ React204.createElement(HeaderRow, null, /* @__PURE__ */ React204.createElement(HeaderCol, null, /* @__PURE__ */ React204.createElement(ProfitAndLoss.DatePicker, null))))
+        header: /* @__PURE__ */ React208.createElement(Header2, null, /* @__PURE__ */ React208.createElement(HeaderRow, null, /* @__PURE__ */ React208.createElement(HeaderCol, null, /* @__PURE__ */ React208.createElement(ProfitAndLoss.DatePicker, null))))
       },
-      enableOnboarding && /* @__PURE__ */ React204.createElement(
+      enableOnboarding && /* @__PURE__ */ React208.createElement(
         Onboarding,
         {
           onTransactionsToReviewClick,
           onboardingStepOverride
         }
       ),
-      /* @__PURE__ */ React204.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React204.createElement(
-        ProfitAndLoss.Summaries,
-        {
-          stringOverrides: (_a = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _a.summaries,
-          chartColorsList
-        }
-      ), showTransactionsToReview && /* @__PURE__ */ React204.createElement(
-        TransactionToReviewCard,
+      /* @__PURE__ */ React208.createElement(
+        Internal_ProfitAndLossSummaries,
         {
-          usePnlDateRange: true,
-          onClick: onTransactionsToReviewClick
+          stringOverrides: (_c = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _c.summaries,
+          chartColorsList,
+          slots: {
+            unstable_AdditionalListItems: showTransactionsToReview ? [
+              /* @__PURE__ */ React208.createElement(
+                TransactionsToReview,
+                {
+                  key: "transactions-to-review",
+                  usePnlDateRange: true,
+                  onClick: onTransactionsToReviewClick,
+                  variants: profitAndLossSummariesVariants
+                }
+              )
+            ] : void 0
+          },
+          variants: profitAndLossSummariesVariants
         }
-      )),
-      /* @__PURE__ */ React204.createElement(
+      ),
+      /* @__PURE__ */ React208.createElement(
         Container,
         {
           name: "accounting-overview-profit-and-loss",
           asWidget: true,
           elevated: true
         },
-        /* @__PURE__ */ React204.createElement(
+        /* @__PURE__ */ React208.createElement(
           ProfitAndLoss.Header,
           {
             text: (stringOverrides == null ? void 0 : stringOverrides.header) || "Profit & Loss"
           }
         ),
-        /* @__PURE__ */ React204.createElement(
+        /* @__PURE__ */ React208.createElement(
           ProfitAndLoss.Chart,
           {
             tagFilter: tagFilter ? { key: tagFilter.tagKey, values: tagFilter.tagValues } : void 0
           }
         )
       ),
-      middleBanner && /* @__PURE__ */ React204.createElement(Container, { name: "accounting-overview-middle-banner" }, middleBanner),
-      /* @__PURE__ */ React204.createElement("div", { className: "Layer__accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React204.createElement(
+      middleBanner && /* @__PURE__ */ React208.createElement(Container, { name: "accounting-overview-middle-banner" }, middleBanner),
+      /* @__PURE__ */ React208.createElement("div", { className: "Layer__accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React208.createElement(
         Toggle,
         {
           name: "pnl-detailed-charts",
@@ -18202,37 +18347,37 @@ var AccountingOverview = ({
           selected: pnlToggle,
           onChange: (e) => setPnlToggle(e.target.value)
         }
-      ), /* @__PURE__ */ React204.createElement(
+      ), /* @__PURE__ */ React208.createElement(
         Container,
         {
-          name: classNames72(
+          name: classNames70(
             "accounting-overview-profit-and-loss-chart",
             pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
           )
         },
-        /* @__PURE__ */ React204.createElement(
+        /* @__PURE__ */ React208.createElement(
           ProfitAndLoss.DetailedCharts,
           {
             scope: "revenue",
             hideClose: true,
-            stringOverrides: (_b = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _b.detailedCharts,
+            stringOverrides: (_d = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _d.detailedCharts,
             chartColorsList
           }
         )
-      ), /* @__PURE__ */ React204.createElement(
+      ), /* @__PURE__ */ React208.createElement(
         Container,
         {
-          name: classNames72(
+          name: classNames70(
             "accounting-overview-profit-and-loss-chart",
             pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
           )
         },
-        /* @__PURE__ */ React204.createElement(
+        /* @__PURE__ */ React208.createElement(
           ProfitAndLoss.DetailedCharts,
           {
             scope: "expenses",
             hideClose: true,
-            stringOverrides: (_c = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _c.detailedCharts,
+            stringOverrides: (_e = stringOverrides == null ? void 0 : stringOverrides.profitAndLoss) == null ? void 0 : _e.detailedCharts,
             chartColorsList
           }
         )
@@ -18242,7 +18387,7 @@ var AccountingOverview = ({
 };
 
 // src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx
-import React205 from "react";
+import React209 from "react";
 var BankTransactionsWithLinkedAccounts = ({
   title,
   // deprecated
@@ -18258,13 +18403,13 @@ var BankTransactionsWithLinkedAccounts = ({
   mobileComponent,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React205.createElement(
+  return /* @__PURE__ */ React209.createElement(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || title || "Bank transactions",
       showHeader: showTitle
     },
-    /* @__PURE__ */ React205.createElement(
+    /* @__PURE__ */ React209.createElement(
       LinkedAccounts,
       {
         elevated: elevatedLinkedAccounts,
@@ -18274,7 +18419,7 @@ var BankTransactionsWithLinkedAccounts = ({
         stringOverrides: stringOverrides == null ? void 0 : stringOverrides.linkedAccounts
       }
     ),
-    /* @__PURE__ */ React205.createElement(
+    /* @__PURE__ */ React209.createElement(
       BankTransactions,
       {
         asWidget: true,
@@ -18290,7 +18435,7 @@ var BankTransactionsWithLinkedAccounts = ({
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React206, { useState as useState62 } from "react";
+import React210, { useState as useState62 } from "react";
 var GeneralLedgerView = ({
   title,
   // deprecated
@@ -18299,13 +18444,13 @@ var GeneralLedgerView = ({
   chartOfAccountsOptions
 }) => {
   const [activeTab, setActiveTab] = useState62("chartOfAccounts");
-  return /* @__PURE__ */ React206.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React206.createElement(
+  return /* @__PURE__ */ React210.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React210.createElement(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || title || "General Ledger",
       showHeader: showTitle
     },
-    /* @__PURE__ */ React206.createElement(
+    /* @__PURE__ */ React210.createElement(
       Toggle,
       {
         name: "general-ledger-tabs",
@@ -18323,7 +18468,7 @@ var GeneralLedgerView = ({
         onChange: (opt) => setActiveTab(opt.target.value)
       }
     ),
-    activeTab === "chartOfAccounts" ? /* @__PURE__ */ React206.createElement(
+    activeTab === "chartOfAccounts" ? /* @__PURE__ */ React210.createElement(
       ChartOfAccounts,
       {
         asWidget: true,
@@ -18332,12 +18477,12 @@ var GeneralLedgerView = ({
         templateAccountsEditable: chartOfAccountsOptions == null ? void 0 : chartOfAccountsOptions.templateAccountsEditable,
         showReversalEntries: chartOfAccountsOptions == null ? void 0 : chartOfAccountsOptions.showReversalEntries
       }
-    ) : /* @__PURE__ */ React206.createElement(Journal, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.journal })
+    ) : /* @__PURE__ */ React210.createElement(Journal, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.journal })
   ));
 };
 
 // src/views/ProjectProfitability/ProjectProfitability.tsx
-import React207, { useState as useState63 } from "react";
+import React211, { useState as useState63 } from "react";
 import Select4 from "react-select";
 var ProjectProfitabilityView = ({
   valueOptions,
@@ -18362,14 +18507,14 @@ var ProjectProfitabilityView = ({
       values: tagFilter2.tagValues
     } : void 0;
   };
-  return /* @__PURE__ */ React207.createElement(
+  return /* @__PURE__ */ React211.createElement(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || "",
       showHeader: showTitle,
       viewClassName: "Layer__project-view"
     },
-    /* @__PURE__ */ React207.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React207.createElement("div", { className: "Layer__component" }, /* @__PURE__ */ React207.createElement(
+    /* @__PURE__ */ React211.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React211.createElement("div", { className: "Layer__component" }, /* @__PURE__ */ React211.createElement(
       Toggle,
       {
         name: "project-tabs",
@@ -18390,7 +18535,7 @@ var ProjectProfitabilityView = ({
         selected: activeTab,
         onChange: (opt) => setActiveTab(opt.target.value)
       }
-    )), /* @__PURE__ */ React207.createElement(
+    )), /* @__PURE__ */ React211.createElement(
       Select4,
       {
         className: "Layer__category-menu Layer__select",
@@ -18408,7 +18553,7 @@ var ProjectProfitabilityView = ({
         }
       }
     )),
-    /* @__PURE__ */ React207.createElement(Container, { name: "project" }, /* @__PURE__ */ React207.createElement(React207.Fragment, null, activeTab === "overview" && /* @__PURE__ */ React207.createElement(
+    /* @__PURE__ */ React211.createElement(Container, { name: "project" }, /* @__PURE__ */ React211.createElement(React211.Fragment, null, activeTab === "overview" && /* @__PURE__ */ React211.createElement(
       AccountingOverview,
       {
         stringOverrides: { header: "Project Overview" },
@@ -18418,7 +18563,7 @@ var ProjectProfitabilityView = ({
         showTransactionsToReview: false,
         showTitle: false
       }
-    ), activeTab === "transactions" && /* @__PURE__ */ React207.createElement(
+    ), activeTab === "transactions" && /* @__PURE__ */ React211.createElement(
       BankTransactions,
       {
         hideHeader: true,
@@ -18427,7 +18572,7 @@ var ProjectProfitabilityView = ({
           tagFilter: tagFilter != null ? tagFilter : void 0
         }
       }
-    ), activeTab === "report" && /* @__PURE__ */ React207.createElement(ProfitAndLoss, { asContainer: false, tagFilter: pnlTagFilter }, /* @__PURE__ */ React207.createElement(
+    ), activeTab === "report" && /* @__PURE__ */ React211.createElement(ProfitAndLoss, { asContainer: false, tagFilter: pnlTagFilter }, /* @__PURE__ */ React211.createElement(
       ProfitAndLoss.Report,
       {
         stringOverrides,
@@ -18439,7 +18584,7 @@ var ProjectProfitabilityView = ({
 };
 
 // src/views/Reports/Reports.tsx
-import React208, { useState as useState64 } from "react";
+import React212, { useState as useState64 } from "react";
 var getOptions = (enabledReports) => {
   return [
     enabledReports.includes("profitAndLoss") ? {
@@ -18473,13 +18618,13 @@ var Reports = ({
   );
   const options = getOptions(enabledReports);
   const defaultTitle = enabledReports.length > 1 ? "Reports" : (_a = options.find((option) => option.value = enabledReports[0])) == null ? void 0 : _a.label;
-  return /* @__PURE__ */ React208.createElement(
+  return /* @__PURE__ */ React212.createElement(
     View,
     {
       title: (stringOverrides == null ? void 0 : stringOverrides.title) || title || defaultTitle,
       showHeader: showTitle
     },
-    enabledReports.length > 1 && /* @__PURE__ */ React208.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React208.createElement(
+    enabledReports.length > 1 && /* @__PURE__ */ React212.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React212.createElement(
       Toggle,
       {
         name: "reports-tabs",
@@ -18488,7 +18633,7 @@ var Reports = ({
         onChange: (opt) => setActiveTab(opt.target.value)
       }
     )),
-    /* @__PURE__ */ React208.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React208.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React208.createElement(
+    /* @__PURE__ */ React212.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React212.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React212.createElement(
       ReportsPanel,
       {
         containerRef,
@@ -18511,7 +18656,7 @@ var ReportsPanel = ({
   statementOfCashFlowConfig,
   view
 }) => {
-  return /* @__PURE__ */ React208.createElement(React208.Fragment, null, openReport === "profitAndLoss" && /* @__PURE__ */ React208.createElement(
+  return /* @__PURE__ */ React212.createElement(React212.Fragment, null, openReport === "profitAndLoss" && /* @__PURE__ */ React212.createElement(
     ProfitAndLoss.Report,
     __spreadValues({
       stringOverrides,
@@ -18519,7 +18664,7 @@ var ReportsPanel = ({
       parentRef: containerRef,
       view
     }, profitAndLossConfig)
-  ), openReport === "balanceSheet" && /* @__PURE__ */ React208.createElement(BalanceSheet, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React208.createElement(
+  ), openReport === "balanceSheet" && /* @__PURE__ */ React212.createElement(BalanceSheet, { stringOverrides: stringOverrides == null ? void 0 : stringOverrides.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React212.createElement(
     StatementOfCashFlow,
     __spreadValues({
       stringOverrides: stringOverrides == null ? void 0 : stringOverrides.statementOfCashflow
@@ -18528,11 +18673,11 @@ var ReportsPanel = ({
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React209, { useContext as useContext47, useRef as useRef21 } from "react";
+import React213, { useContext as useContext47, useRef as useRef21 } from "react";
 var COMPONENT_NAME7 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
   const containerRef = useRef21(null);
-  return /* @__PURE__ */ React209.createElement(Container, { name: COMPONENT_NAME7, ref: containerRef }, /* @__PURE__ */ React209.createElement(ProfitAndLoss, null, /* @__PURE__ */ React209.createElement(ProfitAndLossPanel, __spreadValues({ containerRef }, props))));
+  return /* @__PURE__ */ React213.createElement(Container, { name: COMPONENT_NAME7, ref: containerRef }, /* @__PURE__ */ React213.createElement(ProfitAndLoss, null, /* @__PURE__ */ React213.createElement(ProfitAndLossPanel, __spreadValues({ containerRef }, props))));
 };
 var ProfitAndLossPanel = (_a) => {
   var _b = _a, {
@@ -18543,10 +18688,10 @@ var ProfitAndLossPanel = (_a) => {
     "stringOverrides"
   ]);
   const { sidebarScope } = useContext47(ProfitAndLoss.Context);
-  return /* @__PURE__ */ React209.createElement(
+  return /* @__PURE__ */ React213.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React209.createElement(
+      sidebar: /* @__PURE__ */ React213.createElement(
         ProfitAndLossDetailedCharts,
         {
           stringOverrides: stringOverrides == null ? void 0 : stringOverrides.profitAndLossDetailedCharts
@@ -18555,7 +18700,7 @@ var ProfitAndLossPanel = (_a) => {
       sidebarIsOpen: Boolean(sidebarScope),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React213.createElement(
       ProfitAndLoss.Header,
       {
         text: (stringOverrides == null ? void 0 : stringOverrides.header) || "Profit & Loss",
@@ -18563,7 +18708,7 @@ var ProfitAndLossPanel = (_a) => {
         headingClassName: "Layer__profit-and-loss__title"
       }
     ),
-    /* @__PURE__ */ React209.createElement(Components, __spreadValues({ stringOverrides }, props))
+    /* @__PURE__ */ React213.createElement(Components, __spreadValues({ stringOverrides }, props))
   );
 };
 var Components = ({
@@ -18575,7 +18720,7 @@ var Components = ({
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React209.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React209.createElement(
+    return /* @__PURE__ */ React213.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React213.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -18586,27 +18731,26 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ React209.createElement(React209.Fragment, null, !hideChart && /* @__PURE__ */ React209.createElement("div", { className: `Layer__${COMPONENT_NAME7}__chart_with_summaries` }, /* @__PURE__ */ React209.createElement(
+  return /* @__PURE__ */ React213.createElement(React213.Fragment, null, !hideChart && /* @__PURE__ */ React213.createElement("div", { className: `Layer__${COMPONENT_NAME7}__chart_with_summaries` }, /* @__PURE__ */ React213.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME7}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React209.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React213.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React213.createElement(
       ProfitAndLoss.Summaries,
       {
-        vertical: true,
         actionable: true,
         stringOverrides: stringOverrides == null ? void 0 : stringOverrides.profitAndLossSummaries
       }
     )
-  ), /* @__PURE__ */ React209.createElement(
+  ), /* @__PURE__ */ React213.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME7}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React209.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ React209.createElement(
+    /* @__PURE__ */ React213.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React213.createElement(
     ProfitAndLoss.Table,
     {
       stringOverrides: stringOverrides == null ? void 0 : stringOverrides.profitAndLossTable