@layerfi/components 0.1.9 → 0.1.10

package/dist/esm/index.js

@@ -261,6 +261,11 @@ var matchBankTransaction = put(
 // src/api/layer/categories.ts
 var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/categories`);
 
+// src/api/layer/linked_accounts.ts
+var getLinkedAccounts = get(
+  ({ businessId }) => `/v1/businesses/${businessId}/external-accounts`
+);
+
 // src/api/layer/ledger_accounts.ts
 var getLedgerAccounts = get(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
@@ -268,6 +273,9 @@ var getLedgerAccounts = get(
 var createAccount = post(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
+var updateAccount = put(
+  ({ businessId, accountId }) => `/v1/businesses/${businessId}/ledger/accounts/${accountId}`
+);
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = get(
@@ -280,11 +288,13 @@ var Layer = {
   categorizeBankTransaction,
   matchBankTransaction,
   createAccount,
+  updateAccount,
   getBalanceSheet,
   getBankTransactions,
   getCategories,
   getLedgerAccounts,
-  getProfitAndLoss
+  getProfitAndLoss,
+  getLinkedAccounts
 };
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -581,7 +591,7 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import React55, { useState as useState10, useMemo as useMemo2 } from "react";
+import React56, { useState as useState10, useMemo as useMemo2, useEffect as useEffect7 } from "react";
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
@@ -735,9 +745,10 @@ var debounce = (fnc, timeout = 300) => {
     }, timeout);
   };
 };
+var convertToStableName = (name) => name.replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, "").replace(/\W+/g, " ").split(/ |\B(?=[A-Z])/).map((word) => word.toLowerCase()).join("_");
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-import React47, { useEffect as useEffect6, useRef as useRef11, useState as useState9 } from "react";
+import React48, { useEffect as useEffect6, useRef as useRef11, useState as useState9 } from "react";
 
 // src/icons/ChevronDownFill.tsx
 import * as React8 from "react";
@@ -765,7 +776,7 @@ var ChevronDownFill = ({ size = 18, ...props }) => /* @__PURE__ */ React8.create
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import React45, { useEffect as useEffect5, useRef as useRef10, useState as useState8 } from "react";
+import React46, { useEffect as useEffect5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/icons/AlertCircle.tsx
 import * as React9 from "react";
@@ -940,7 +951,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React10.createElemen
 var Scissors_default = Scissors;
 
 // src/components/Badge/Badge.tsx
-import React22 from "react";
+import React24 from "react";
 
 // src/components/Button/Button.tsx
 import React11, { useRef as useRef3 } from "react";
@@ -1475,8 +1486,47 @@ var TextButton = ({
   return /* @__PURE__ */ React21.createElement("button", { ...props, className: baseClassName }, children);
 };
 
-// src/components/Badge/Badge.tsx
+// src/components/Button/BackButton.tsx
+import React23 from "react";
+
+// src/icons/BackArrow.tsx
+import * as React22 from "react";
+var BackArrow = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createElement(
+  "svg",
+  {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React22.createElement(
+    "path",
+    {
+      d: "M7.375 8.75L4.625 6L7.375 3.25",
+      stroke: "#1A130D",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var BackArrow_default = BackArrow;
+
+// src/components/Button/BackButton.tsx
 import classNames6 from "classnames";
+var BackButton = ({
+  className,
+  children,
+  textOnly = false,
+  ...props
+}) => {
+  const baseClassName = classNames6("Layer__btn", "Layer__back-btn", className);
+  return /* @__PURE__ */ React23.createElement("button", { ...props, className: baseClassName }, textOnly ? "Back" : /* @__PURE__ */ React23.createElement(BackArrow_default, { size: 16 }));
+};
+
+// src/components/Badge/Badge.tsx
+import classNames7 from "classnames";
 var Badge = ({
   icon,
   onClick,
@@ -1485,7 +1535,7 @@ var Badge = ({
   size = "medium" /* MEDIUM */
 }) => {
   const baseProps = {
-    className: classNames6(
+    className: classNames7(
       "Layer__badge",
       onClick || tooltip ? "Layer__badge--clickable" : "",
       `Layer__badge--${size}`
@@ -1493,23 +1543,23 @@ var Badge = ({
     onClick,
     children
   };
-  let content = /* @__PURE__ */ React22.createElement(React22.Fragment, null, icon && /* @__PURE__ */ React22.createElement("span", { className: "Layer__badge__icon" }, icon), children);
-  content = onClick ? /* @__PURE__ */ React22.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ React22.createElement("span", { ...baseProps }, content);
+  let content = /* @__PURE__ */ React24.createElement(React24.Fragment, null, icon && /* @__PURE__ */ React24.createElement("span", { className: "Layer__badge__icon" }, icon), children);
+  content = onClick ? /* @__PURE__ */ React24.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ React24.createElement("span", { ...baseProps }, content);
   if (tooltip) {
-    return /* @__PURE__ */ React22.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React22.createElement(TooltipTrigger, null, content), /* @__PURE__ */ React22.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
+    return /* @__PURE__ */ React24.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React24.createElement(TooltipTrigger, null, content), /* @__PURE__ */ React24.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
   }
   return content;
 };
 
 // src/components/CategorySelect/CategorySelect.tsx
-import React25 from "react";
+import React27 from "react";
 import Select, {
   components
 } from "react-select";
 
 // src/icons/Check.tsx
-import * as React23 from "react";
-var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
+import * as React25 from "react";
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1519,7 +1569,7 @@ var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React23.createElement(
+  /* @__PURE__ */ React25.createElement(
     "path",
     {
       d: "M15 4.5L6.75 12.75L3 9",
@@ -1532,8 +1582,8 @@ var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
 var Check_default = Check;
 
 // src/icons/MinimizeTwo.tsx
-import * as React24 from "react";
-var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+import * as React26 from "react";
+var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React26.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1543,7 +1593,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M3 10.5H7.5V15",
@@ -1552,7 +1602,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M15 7.5H10.5V3",
@@ -1561,7 +1611,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M10.5 7.5L15.75 2.25",
@@ -1570,7 +1620,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M2.25 15.75L7.5 10.5",
@@ -1583,7 +1633,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-import classNames7 from "classnames";
+import classNames8 from "classnames";
 import { parseISO as parseISO2, format as formatTime } from "date-fns";
 var mapCategoryToOption = (category) => {
   return {
@@ -1611,13 +1661,13 @@ var mapSuggestedMatchToOption = (record) => {
   };
 };
 var DropdownIndicator = (props) => {
-  return /* @__PURE__ */ React25.createElement(components.DropdownIndicator, { ...props }, /* @__PURE__ */ React25.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ React27.createElement(components.DropdownIndicator, { ...props }, /* @__PURE__ */ React27.createElement(ChevronDown_default, null));
 };
 var GroupHeading = (props) => {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     components.GroupHeading,
     {
-      className: classNames7(
+      className: classNames8(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       ),
@@ -1630,24 +1680,24 @@ var Option = (props) => {
     return;
   }
   if (props.data.type === "match") {
-    return /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React27.createElement(
       components.Option,
       {
         ...props,
         className: `${props.className} Layer__select__option-content__match`
       },
-      /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO2(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
-      /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
+      /* @__PURE__ */ React27.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React27.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO2(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React27.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
+      /* @__PURE__ */ React27.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ React27.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
     );
   }
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     components.Option,
     {
       ...props,
       className: `Layer__select__option-menu-content ${props.className}`
     },
-    /* @__PURE__ */ React25.createElement("div", null, props.data.payload.display_name),
-    props.isSelected ? /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React25.createElement(Check_default, { size: 16 })) : null
+    /* @__PURE__ */ React27.createElement("div", null, props.data.payload.display_name),
+    props.isSelected ? /* @__PURE__ */ React27.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React27.createElement(Check_default, { size: 16 })) : null
   );
 };
 var allCategoriesDivider = [
@@ -1730,17 +1780,20 @@ var CategorySelect = ({
   ];
   const selected = value ? value : matchOptions?.length === 1 && matchOptions[0].options.length === 1 ? matchOptions[0].options[0] : void 0;
   const placeholder = matchOptions?.length === 1 && matchOptions[0].options.length > 1 ? `${matchOptions[0].options.length} possible matches...` : "Categorize or match...";
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Select,
     {
       name,
       className: `Layer__category-menu Layer__select ${className ?? ""}`,
       classNamePrefix: "Layer__select",
+      classNames: {
+        menu: () => "Layer__select__menu--lg"
+      },
       options,
       isSearchable: true,
       placeholder,
       defaultValue: selected,
-      formatOptionLabel: (props) => /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ React25.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ React25.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ React25.createElement("span", null, props.payload.display_name)),
+      formatOptionLabel: (props) => /* @__PURE__ */ React27.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ React27.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ React27.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ React27.createElement("span", null, props.payload.display_name)),
       value,
       onChange: (newValue) => newValue && onChange(newValue),
       getOptionLabel: (category) => category.payload.display_name,
@@ -1757,7 +1810,7 @@ var CategorySelect = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import React43, {
+import React44, {
   forwardRef as forwardRef2,
   useImperativeHandle,
   useState as useState7,
@@ -1767,8 +1820,8 @@ import React43, {
 } from "react";
 
 // src/icons/ScissorsFullOpen.tsx
-import * as React26 from "react";
-var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.createElement(
+import * as React28 from "react";
+var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React28.createElement(
   "svg",
   {
     viewBox: "0 0 12 12",
@@ -1778,7 +1831,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
     width: size,
     height: size
   },
-  /* @__PURE__ */ React26.createElement("g", { id: "scissors" }, /* @__PURE__ */ React26.createElement(
+  /* @__PURE__ */ React28.createElement("g", { id: "scissors" }, /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector",
@@ -1787,7 +1840,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_2",
@@ -1796,7 +1849,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_3",
@@ -1805,7 +1858,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_4",
@@ -1814,7 +1867,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_5",
@@ -1828,8 +1881,8 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
 var ScissorsFullOpen_default = ScissorsFullOpen;
 
 // src/icons/Trash.tsx
-import * as React27 from "react";
-var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
+import * as React29 from "react";
+var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React29.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1839,7 +1892,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M2.25 4.5H3.75H15.75",
@@ -1848,7 +1901,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5",
@@ -1857,7 +1910,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M7.5 8.25V12.75",
@@ -1866,7 +1919,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M10.5 8.25V12.75",
@@ -1878,65 +1931,9 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
 );
 var Trash_default = Trash;
 
-// src/components/CategoryMenu/CategoryMenu.tsx
-import React28 from "react";
-import Select2, {
-  components as components2
-} from "react-select";
-var DropdownIndicator2 = (props) => {
-  return /* @__PURE__ */ React28.createElement(components2.DropdownIndicator, { ...props }, /* @__PURE__ */ React28.createElement(ChevronDown_default, null));
-};
-var CategoryMenu = ({
-  bankTransaction,
-  name,
-  value,
-  onChange,
-  disabled,
-  className
-}) => {
-  const { categories } = useLayerContext();
-  const suggestedOptions = hasSuggestions(bankTransaction.categorization_flow) ? [
-    {
-      label: "Suggested",
-      options: bankTransaction.categorization_flow.suggestions
-    }
-  ] : [];
-  const categoryOptions = (categories || []).map((category) => {
-    if (category?.subCategories && category?.subCategories?.length > 0) {
-      return {
-        label: category.display_name,
-        options: category.subCategories
-      };
-    }
-    return {
-      label: category.display_name,
-      options: [category]
-    };
-  }).filter((x) => x);
-  const options = [...suggestedOptions, ...categoryOptions];
-  return /* @__PURE__ */ React28.createElement(
-    Select2,
-    {
-      name,
-      className: `Layer__category-menu Layer__select ${className ?? ""}`,
-      classNamePrefix: "Layer__select",
-      options,
-      isSearchable: true,
-      value,
-      onChange: (newValue) => newValue && onChange(newValue),
-      getOptionLabel: (category) => category.display_name,
-      getOptionValue: (category) => category.stable_name || category.category,
-      menuPortalTarget: document.body,
-      styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
-      components: { DropdownIndicator: DropdownIndicator2 },
-      isDisabled: disabled
-    }
-  );
-};
-
 // src/components/Input/Input.tsx
-import React29 from "react";
-import classNames8 from "classnames";
+import React30 from "react";
+import classNames9 from "classnames";
 var Input = ({
   className,
   isInvalid,
@@ -1944,21 +1941,21 @@ var Input = ({
   leftText,
   ...props
 }) => {
-  const baseClassName = classNames8(
+  const baseClassName = classNames9(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
     className
   );
-  return /* @__PURE__ */ React29.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ React29.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ React29.createElement("input", { ...props, className: baseClassName }), leftText && /* @__PURE__ */ React29.createElement("span", { className: "Layer__input-left-text" }, leftText)), /* @__PURE__ */ React29.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
+  return /* @__PURE__ */ React30.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ React30.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ React30.createElement("input", { ...props, className: baseClassName }), leftText && /* @__PURE__ */ React30.createElement("span", { className: "Layer__input-left-text" }, leftText)), /* @__PURE__ */ React30.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
 };
 
 // src/components/Input/InputGroup.tsx
-import React33 from "react";
+import React34 from "react";
 
 // src/components/Typography/Text.tsx
-import React30, { useRef as useRef6, useState as useState4, useEffect } from "react";
-import classNames9 from "classnames";
+import React31, { useRef as useRef6, useState as useState4, useEffect } from "react";
+import classNames10 from "classnames";
 var Text = ({
   as: Component = "p",
   className,
@@ -1968,12 +1965,12 @@ var Text = ({
   withTooltip,
   ...props
 }) => {
-  const baseClassName = classNames9(
+  const baseClassName = classNames10(
     `Layer__text Layer__text--${size} Layer__text--${weight}`,
     className
   );
   if (withTooltip) {
-    return /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(
       TextWithTooltip,
       {
         as: Component,
@@ -1986,7 +1983,7 @@ var Text = ({
       children
     );
   }
-  return /* @__PURE__ */ React30.createElement(Component, { ...props, className: baseClassName }, children);
+  return /* @__PURE__ */ React31.createElement(Component, { ...props, className: baseClassName }, children);
 };
 var TextWithTooltip = ({
   as: Component = "p",
@@ -2016,48 +2013,48 @@ var TextWithTooltip = ({
     []
   );
   const [hoverStatus, setHover] = useState4(false);
-  const contentClassName = classNames9(
+  const contentClassName = classNames10(
     "Layer__tooltip",
     tooltipOptions?.contentClassName
   );
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     Tooltip,
     {
       disabled: !hoverStatus,
       offset: tooltipOptions?.offset,
       shift: tooltipOptions?.shift
     },
-    /* @__PURE__ */ React30.createElement(TooltipTrigger, null, /* @__PURE__ */ React30.createElement(Component, { className, ref: textElementRef, ...props }, children)),
-    /* @__PURE__ */ React30.createElement(TooltipContent, { className: contentClassName }, children)
+    /* @__PURE__ */ React31.createElement(TooltipTrigger, null, /* @__PURE__ */ React31.createElement(Component, { className, ref: textElementRef, ...props }, children)),
+    /* @__PURE__ */ React31.createElement(TooltipContent, { className: contentClassName }, children)
   );
 };
 
 // src/components/Typography/Heading.tsx
-import React31 from "react";
-import classNames10 from "classnames";
+import React32 from "react";
+import classNames11 from "classnames";
 var Heading = ({
   as: Component = "h2",
   className,
   children,
   size = "primary" /* primary */
 }) => {
-  const baseClassName = classNames10(
+  const baseClassName = classNames11(
     `Layer__heading Layer__heading--${size}`,
     className
   );
-  return /* @__PURE__ */ React31.createElement(Component, { className: baseClassName }, children);
+  return /* @__PURE__ */ React32.createElement(Component, { className: baseClassName }, children);
 };
 
 // src/components/Typography/ErrorText.tsx
-import React32 from "react";
-import classNames11 from "classnames";
+import React33 from "react";
+import classNames12 from "classnames";
 var ErrorText = ({ className, ...props }) => {
-  const baseClassName = classNames11("Layer__text--error", className);
-  return /* @__PURE__ */ React32.createElement(Text, { ...props, className: baseClassName });
+  const baseClassName = classNames12("Layer__text--error", className);
+  return /* @__PURE__ */ React33.createElement(Text, { ...props, className: baseClassName });
 };
 
 // src/components/Input/InputGroup.tsx
-import classNames12 from "classnames";
+import classNames13 from "classnames";
 var InputGroup = ({
   label,
   name,
@@ -2065,12 +2062,12 @@ var InputGroup = ({
   inline,
   children
 }) => {
-  const baseClassName = classNames12(
+  const baseClassName = classNames13(
     "Layer__input-group",
     className,
     inline && "Layer__input-group--inline"
   );
-  return /* @__PURE__ */ React33.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React34.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ React34.createElement(
     Text,
     {
       as: "label",
@@ -2083,11 +2080,11 @@ var InputGroup = ({
 };
 
 // src/components/Input/FileInput.tsx
-import React35, { useRef as useRef7 } from "react";
+import React36, { useRef as useRef7 } from "react";
 
 // src/icons/UploadCloud.tsx
-import * as React34 from "react";
-var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createElement(
+import * as React35 from "react";
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2097,7 +2094,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -2106,7 +2103,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M9 9V15.75",
@@ -2115,7 +2112,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M15.2925 13.7925C16.024 13.3937 16.6019 12.7626 16.9349 11.999C17.2679 11.2353 17.3372 10.3824 17.1317 9.57501C16.9262 8.7676 16.4576 8.05162 15.8 7.54007C15.1424 7.02852 14.3332 6.75054 13.5 6.74999H12.555C12.328 5.87192 11.9049 5.05674 11.3175 4.36573C10.7301 3.67473 9.99364 3.12588 9.16358 2.76044C8.33352 2.39501 7.43141 2.22251 6.52509 2.2559C5.61876 2.28929 4.7318 2.52771 3.93088 2.95324C3.12997 3.37876 2.43593 3.98032 1.90097 4.71267C1.366 5.44503 1.00402 6.28914 0.842236 7.18153C0.680453 8.07393 0.72308 8.99139 0.966911 9.86493C1.21074 10.7385 1.64943 11.5454 2.25 12.225",
@@ -2124,7 +2121,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -2150,15 +2147,15 @@ var FileInput = ({ text = "Upload", onUpload }) => {
       onUpload(fileUploaded);
     }
   };
-  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(
     Button,
     {
       onClick,
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React35.createElement(UploadCloud_default, null)
+      rightIcon: /* @__PURE__ */ React36.createElement(UploadCloud_default, null)
     },
     text
-  ), /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React36.createElement(
     "input",
     {
       type: "file",
@@ -2170,14 +2167,14 @@ var FileInput = ({ text = "Upload", onUpload }) => {
 };
 
 // src/components/Input/Select.tsx
-import React36 from "react";
+import React37 from "react";
 import ReactSelect, {
-  components as components3
+  components as components2
 } from "react-select";
-var DropdownIndicator3 = (props) => {
-  return /* @__PURE__ */ React36.createElement(components3.DropdownIndicator, { ...props }, /* @__PURE__ */ React36.createElement(ChevronDownFill_default, null));
+var DropdownIndicator2 = (props) => {
+  return /* @__PURE__ */ React37.createElement(components2.DropdownIndicator, { ...props }, /* @__PURE__ */ React37.createElement(ChevronDownFill_default, null));
 };
-var Select3 = ({
+var Select2 = ({
   name,
   options,
   className,
@@ -2186,7 +2183,7 @@ var Select3 = ({
   onChange,
   disabled
 }) => {
-  return /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React37.createElement(
     ReactSelect,
     {
       name,
@@ -2197,17 +2194,17 @@ var Select3 = ({
       onChange: (newValue) => newValue && onChange(newValue),
       menuPortalTarget: document.body,
       styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
-      components: { DropdownIndicator: DropdownIndicator3 },
+      components: { DropdownIndicator: DropdownIndicator2 },
       isDisabled: disabled
     }
   );
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import React38 from "react";
+import React39 from "react";
 
 // src/components/BankTransactionRow/MatchBadge.tsx
-import React37 from "react";
+import React38 from "react";
 import { parseISO as parseISO3, format as formatTime2 } from "date-fns";
 var MatchBadge = ({
   bankTransaction,
@@ -2216,12 +2213,12 @@ var MatchBadge = ({
   text = "Match"
 }) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
-    const { date, amount, description } = bankTransaction.match.bank_transaction;
-    return /* @__PURE__ */ React37.createElement(
+    const { date, amount } = bankTransaction.match.bank_transaction;
+    return /* @__PURE__ */ React38.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ React37.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ React37.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO3(date), dateFormat)), /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        icon: /* @__PURE__ */ React38.createElement(MinimizeTwo_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ React38.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO3(date), dateFormat)), /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, bankTransaction.match?.details?.description ?? ""), /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2230,7 +2227,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import classNames13 from "classnames";
+import classNames14 from "classnames";
 import { parseISO as parseISO4, format as formatTime3 } from "date-fns";
 var MatchForm = ({
   classNamePrefix,
@@ -2239,17 +2236,17 @@ var MatchForm = ({
   setSelectedMatchId,
   matchFormError
 }) => {
-  return /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ React39.createElement(
     "div",
     {
       className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
     }
   )), bankTransaction.suggested_matches?.map((match, idx) => {
-    return /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React39.createElement(
       "div",
       {
         key: idx,
-        className: classNames13(
+        className: classNames14(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2261,15 +2258,15 @@ var MatchForm = ({
           setSelectedMatchId(match.id);
         }
       },
-      /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React39.createElement(
         "div",
         {
           className: `Layer__nowrap ${classNamePrefix}__match-table__date`
         },
-        /* @__PURE__ */ React38.createElement("span", null, formatTime3(parseISO4(match.details.date), DATE_FORMAT)),
-        /* @__PURE__ */ React38.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
+        /* @__PURE__ */ React39.createElement("span", null, formatTime3(parseISO4(match.details.date), DATE_FORMAT)),
+        /* @__PURE__ */ React39.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
       ),
-      /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ React39.createElement(
         Text,
         {
           className: `${classNamePrefix}__match-table__desc-tooltip`,
@@ -2277,7 +2274,7 @@ var MatchForm = ({
           as: "span"
         },
         match.details.description
-      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React38.createElement("span", { className: "match-badge" }, /* @__PURE__ */ React38.createElement(
+      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React39.createElement("span", { className: "match-badge" }, /* @__PURE__ */ React39.createElement(
         MatchBadge,
         {
           classNamePrefix,
@@ -2286,13 +2283,13 @@ var MatchForm = ({
           text: "Matched"
         }
       ))),
-      /* @__PURE__ */ React38.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
-      /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React39.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
+      /* @__PURE__ */ React39.createElement(
         "div",
         {
           className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
         },
-        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React38.createElement(
+        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React39.createElement(
           MatchBadge,
           {
             classNamePrefix,
@@ -2303,26 +2300,26 @@ var MatchForm = ({
         )
       )
     );
-  }), matchFormError && /* @__PURE__ */ React38.createElement(ErrorText, null, matchFormError));
+  }), matchFormError && /* @__PURE__ */ React39.createElement(ErrorText, null, matchFormError));
 };
 
 // src/components/Textarea/Textarea.tsx
-import React39 from "react";
-import classNames14 from "classnames";
+import React40 from "react";
+import classNames15 from "classnames";
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = classNames14("Layer__textarea", className);
-  return /* @__PURE__ */ React39.createElement("textarea", { ...props, className: baseClassName });
+  const baseClassName = classNames15("Layer__textarea", className);
+  return /* @__PURE__ */ React40.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
-import React40, {
+import React41, {
   useEffect as useEffect2,
   useState as useState5
 } from "react";
-import classNames15 from "classnames";
+import classNames16 from "classnames";
 var Toggle = ({
   name,
   options,
@@ -2339,7 +2336,7 @@ var Toggle = ({
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = classNames15(
+  const baseClassName = classNames16(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2387,7 +2384,7 @@ var Toggle = ({
     }
     return selectedIndex;
   };
-  return /* @__PURE__ */ React40.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ React41.createElement(
     ToggleOption,
     {
       ...option,
@@ -2399,7 +2396,7 @@ var Toggle = ({
       disabled: option.disabled ?? false,
       index
     }
-  )), /* @__PURE__ */ React40.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+  )), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
 };
 var ToggleOption = ({
   checked,
@@ -2413,7 +2410,7 @@ var ToggleOption = ({
   index
 }) => {
   if (disabled) {
-    return /* @__PURE__ */ React40.createElement(Tooltip, null, /* @__PURE__ */ React40.createElement(TooltipTrigger, null, /* @__PURE__ */ React40.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React40.createElement(
+    return /* @__PURE__ */ React41.createElement(Tooltip, null, /* @__PURE__ */ React41.createElement(TooltipTrigger, null, /* @__PURE__ */ React41.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React41.createElement(
       "input",
       {
         type: "radio",
@@ -2424,9 +2421,9 @@ var ToggleOption = ({
         disabled: disabled ?? false,
         "data-idx": index
       }
-    ), /* @__PURE__ */ React40.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React40.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React40.createElement("span", null, label)))), /* @__PURE__ */ React40.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+    ), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React41.createElement("span", null, label)))), /* @__PURE__ */ React41.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
   }
-  return /* @__PURE__ */ React40.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React41.createElement(
     "input",
     {
       type: "radio",
@@ -2437,15 +2434,15 @@ var ToggleOption = ({
       disabled: disabled ?? false,
       "data-idx": index
     }
-  ), /* @__PURE__ */ React40.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React40.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React40.createElement("span", null, label)));
+  ), /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React41.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React41.createElement("span", null, label)));
 };
 
 // src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
-import React42, { useEffect as useEffect3, useState as useState6 } from "react";
+import React43, { useEffect as useEffect3, useState as useState6 } from "react";
 
 // src/icons/AlertOctagon.tsx
-import * as React41 from "react";
-var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createElement(
+import * as React42 from "react";
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React42.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2455,7 +2452,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createEl
     width: size,
     height: size
   },
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       d: "M5.895 1.5H12.105L16.5 5.895V12.105L12.105 16.5H5.895L1.5 12.105V5.895L5.895 1.5Z",
@@ -2464,7 +2461,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -2473,7 +2470,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       d: "M9 12H9.0075",
@@ -2529,13 +2526,13 @@ var APIErrorNotifications = ({
       pushNotification(ERROR_TITLE, ERROR_MESSAGE);
     }
   }, [bankTransaction.error]);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       className: "Layer__bank-transactions__notifications",
       style: containerWidth ? { left: containerWidth - 324 } : {}
     },
-    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ React42.createElement(
+    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ React43.createElement(
       Notification,
       {
         key: notification.timestamp,
@@ -2563,20 +2560,20 @@ var Notification = ({
       deleteNotification(notification.timestamp);
     }, FADE_OUT_TIME_WAIT);
   };
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       className: `Layer__bank-transactions__notification ${visible ? "notification-enter" : "notification-exit"}`,
       onClick: hideNotification
     },
-    /* @__PURE__ */ React42.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ React42.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ React42.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ React42.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ React43.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ React43.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ React43.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ React43.createElement(
       Text,
       {
         as: "span",
         className: "Layer__bank-transactions__notification-title"
       },
       notification.title
-    ), /* @__PURE__ */ React42.createElement(
+    ), /* @__PURE__ */ React43.createElement(
       Text,
       {
         as: "span",
@@ -2588,7 +2585,7 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import classNames16 from "classnames";
+import classNames17 from "classnames";
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2618,6 +2615,7 @@ var ExpandedBankTransactionRow = forwardRef2(
   ({
     bankTransaction,
     isOpen = false,
+    close,
     editable,
     asListItem = false,
     submitBtnText = "Save",
@@ -2645,13 +2643,13 @@ var ExpandedBankTransactionRow = forwardRef2(
         return {
           amount: c.amount || 0,
           inputValue: centsToDollars(c.amount),
-          category: c.category
+          category: mapCategoryToOption(c.category)
         };
       }) : [
         {
           amount: bankTransaction.amount,
           inputValue: centsToDollars(bankTransaction.amount),
-          category: defaultCategory
+          category: mapCategoryToOption(defaultCategory)
         }
       ],
       description: "",
@@ -2662,7 +2660,11 @@ var ExpandedBankTransactionRow = forwardRef2(
         ...rowState,
         splits: [
           ...rowState.splits,
-          { amount: 0, inputValue: "0.00", category: defaultCategory }
+          {
+            amount: 0,
+            inputValue: "0.00",
+            category: mapCategoryToOption(defaultCategory)
+          }
         ]
       });
       setSplitFormError(void 0);
@@ -2717,7 +2719,7 @@ var ExpandedBankTransactionRow = forwardRef2(
       updateRowState({ ...rowState });
       setSplitFormError(void 0);
     };
-    const save = () => {
+    const save = async () => {
       if (purpose === "match" /* match */) {
         if (!selectedMatchId) {
           setMatchFormError("Select an option to match the transaction");
@@ -2736,34 +2738,36 @@ var ExpandedBankTransactionRow = forwardRef2(
         }
         return;
       }
-      categorizeBankTransaction2(
+      await categorizeBankTransaction2(
         bankTransaction.id,
         rowState.splits.length === 1 ? {
           type: "Category",
           category: {
             type: "StableName",
-            stable_name: rowState?.splits[0].category?.stable_name || rowState?.splits[0].category?.category
+            stable_name: rowState?.splits[0].category?.payload.stable_name
           }
         } : {
           type: "Split",
           entries: rowState.splits.map((split) => ({
-            category: split.category?.stable_name || split.category?.category,
+            category: split.category?.payload.stable_name,
             amount: split.amount
           }))
         }
       );
+      close();
     };
     useImperativeHandle(ref, () => ({
       save
     }));
-    const onMatchSubmit = (matchId) => {
+    const onMatchSubmit = async (matchId) => {
       const foundMatch = bankTransaction.suggested_matches?.find(
         (x) => x.id === matchId
       );
       if (!foundMatch) {
         return;
       }
-      matchBankTransaction2(bankTransaction.id, foundMatch.id);
+      await matchBankTransaction2(bankTransaction.id, foundMatch.id);
+      close();
     };
     const getDivHeight = useCallback(() => {
       const { height: height2 } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : { height: void 0 };
@@ -2798,14 +2802,14 @@ var ExpandedBankTransactionRow = forwardRef2(
     }, []);
     const className = "Layer__expanded-bank-transaction-row";
     const shouldHide = !isOpen && isOver;
-    return /* @__PURE__ */ React43.createElement(
+    return /* @__PURE__ */ React44.createElement(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
         style: { height },
         onTransitionEnd: handleTransitionEnd
       },
-      shouldHide ? null : /* @__PURE__ */ React43.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ React43.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React43.createElement(
+      shouldHide ? null : /* @__PURE__ */ React44.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ React44.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React44.createElement(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -2824,22 +2828,22 @@ var ExpandedBankTransactionRow = forwardRef2(
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ React43.createElement(
+      )), /* @__PURE__ */ React44.createElement(
         "div",
         {
           className: `${className}__content`,
           id: `expanded-${bankTransaction.id}`
         },
-        /* @__PURE__ */ React43.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ React43.createElement(
+        /* @__PURE__ */ React44.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ React44.createElement(
           "div",
           {
-            className: classNames16(
+            className: classNames17(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ React43.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React43.createElement(
+          /* @__PURE__ */ React44.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React44.createElement(
             MatchForm,
             {
               classNamePrefix: className,
@@ -2852,22 +2856,22 @@ var ExpandedBankTransactionRow = forwardRef2(
               matchFormError
             }
           ))
-        ), /* @__PURE__ */ React43.createElement(
+        ), /* @__PURE__ */ React44.createElement(
           "div",
           {
-            className: classNames16(
+            className: classNames17(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ React43.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React43.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ React43.createElement(
+          /* @__PURE__ */ React44.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React44.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ React44.createElement(
             "div",
             {
               className: `${className}__table-cell--split-entry`,
               key: `split-${index}`
             },
-            /* @__PURE__ */ React43.createElement(
+            /* @__PURE__ */ React44.createElement(
               Input,
               {
                 type: "text",
@@ -2880,33 +2884,34 @@ var ExpandedBankTransactionRow = forwardRef2(
                 errorMessage: "Negative values are not allowed"
               }
             ),
-            /* @__PURE__ */ React43.createElement(
+            /* @__PURE__ */ React44.createElement(
               "div",
               {
                 className: `${className}__table-cell--split-entry__right-col`
               },
-              /* @__PURE__ */ React43.createElement(
-                CategoryMenu,
+              /* @__PURE__ */ React44.createElement(
+                CategorySelect,
                 {
                   bankTransaction,
-                  name: `category-${index}${asListItem ? "-li" : ""}`,
+                  name: `category-${bankTransaction.id}`,
                   value: split.category,
                   onChange: (value) => changeCategory(index, value),
-                  className: "Layer__category-menu--full"
+                  className: "Layer__category-menu--full",
+                  disabled: bankTransaction.processing
                 }
               ),
-              index > 0 && /* @__PURE__ */ React43.createElement(
+              index > 0 && /* @__PURE__ */ React44.createElement(
                 Button,
                 {
                   className: `${className}__table-cell--split-entry__merge-btn`,
                   onClick: () => removeSplit(index),
-                  rightIcon: /* @__PURE__ */ React43.createElement(Trash_default, { size: 18 }),
+                  rightIcon: /* @__PURE__ */ React44.createElement(Trash_default, { size: 18 }),
                   variant: "secondary" /* secondary */,
                   iconOnly: true
                 }
               )
             )
-          ))), splitFormError && /* @__PURE__ */ React43.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ React43.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ React43.createElement(
+          ))), splitFormError && /* @__PURE__ */ React44.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ React44.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ React44.createElement(
             Input,
             {
               disabled: true,
@@ -2918,43 +2923,43 @@ var ExpandedBankTransactionRow = forwardRef2(
                 )
               )}`
             }
-          ), /* @__PURE__ */ React43.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React43.createElement(
+          ), /* @__PURE__ */ React44.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React44.createElement(
             TextButton,
             {
               onClick: addSplit,
               disabled: rowState.splits.length > 5
             },
             "Add new split"
-          ) : /* @__PURE__ */ React43.createElement(
+          ) : /* @__PURE__ */ React44.createElement(
             Button,
             {
               onClick: addSplit,
-              rightIcon: /* @__PURE__ */ React43.createElement(ScissorsFullOpen_default, { size: 14 }),
+              rightIcon: /* @__PURE__ */ React44.createElement(ScissorsFullOpen_default, { size: 14 }),
               variant: "secondary" /* secondary */,
               disabled: rowState.splits.length > 5
             },
             "Split"
           ))))
         )),
-        /* @__PURE__ */ React43.createElement(
+        /* @__PURE__ */ React44.createElement(
           InputGroup,
           {
             className: `${className}__description`,
             name: "description"
           },
-          /* @__PURE__ */ React43.createElement(Textarea, { name: "description", placeholder: "Add description" })
+          /* @__PURE__ */ React44.createElement(Textarea, { name: "description", placeholder: "Add description" })
         ),
-        /* @__PURE__ */ React43.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ React43.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem ? /* @__PURE__ */ React43.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ React43.createElement(
+        /* @__PURE__ */ React44.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ React44.createElement(FileInput, { text: "Upload receipt" })),
+        asListItem ? /* @__PURE__ */ React44.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ React44.createElement(
           Text,
           {
             as: "span",
             size: "md" /* md */,
             className: "Layer__unsaved-info"
           },
-          /* @__PURE__ */ React43.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ React43.createElement(AlertCircle_default, { size: 12 })
-        ) : null, /* @__PURE__ */ React43.createElement(
+          /* @__PURE__ */ React44.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ React44.createElement(AlertCircle_default, { size: 12 })
+        ) : null, /* @__PURE__ */ React44.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2969,7 +2974,7 @@ var ExpandedBankTransactionRow = forwardRef2(
           },
           submitBtnText
         )) : null
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         APIErrorNotifications,
         {
           bankTransaction,
@@ -2981,7 +2986,7 @@ var ExpandedBankTransactionRow = forwardRef2(
 );
 
 // src/components/BankTransactionRow/SplitTooltipDetails.tsx
-import React44 from "react";
+import React45 from "react";
 var SplitTooltipDetails = ({
   classNamePrefix,
   category
@@ -2989,11 +2994,11 @@ var SplitTooltipDetails = ({
   if (!category.entries) {
     return;
   }
-  return /* @__PURE__ */ React44.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ React44.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ React44.createElement("li", { key: idx }, /* @__PURE__ */ React44.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ React44.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
+  return /* @__PURE__ */ React45.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ React45.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ React45.createElement("li", { key: idx }, /* @__PURE__ */ React45.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ React45.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import classNames17 from "classnames";
+import classNames18 from "classnames";
 import { parseISO as parseISO5, format as formatTime4 } from "date-fns";
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -3012,7 +3017,8 @@ var BankTransactionRow = ({
   bankTransaction,
   editable,
   removeTransaction,
-  containerWidth
+  containerWidth,
+  initialLoad
 }) => {
   const expandedRowRef = useRef10(null);
   const [showRetry, setShowRetry] = useState8(false);
@@ -3039,10 +3045,14 @@ var BankTransactionRow = ({
   };
   const [showComponent, setShowComponent] = useState8(false);
   useEffect5(() => {
-    const timeoutId = setTimeout(() => {
+    if (initialLoad) {
+      const timeoutId = setTimeout(() => {
+        setShowComponent(true);
+      }, index * 10);
+      return () => clearTimeout(timeoutId);
+    } else {
       setShowComponent(true);
-    }, index * 80);
-    return () => clearTimeout(timeoutId);
+    }
   }, []);
   useEffect5(() => {
     if (bankTransaction.error) {
@@ -3058,54 +3068,62 @@ var BankTransactionRow = ({
       return;
     }
     if (selectedCategory.type === "match") {
-      matchBankTransaction2(bankTransaction.id, selectedCategory.payload.id);
+      await matchBankTransaction2(
+        bankTransaction.id,
+        selectedCategory.payload.id
+      );
+      setOpen(false);
       return;
     }
-    categorizeBankTransaction2(bankTransaction.id, {
+    await categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
       category: {
         type: "StableName",
         stable_name: selectedCategory?.payload.stable_name || ""
       }
     });
+    setOpen(false);
   };
   if (removed) {
     return null;
   }
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames17(
+  const rowClassName = classNames18(
     className,
-    bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
+    bankTransaction.recently_categorized && editable ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
+    initialLoad ? "initial-load" : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
     "tr",
     {
       className: rowClassName,
       onTransitionEnd: ({ propertyName }) => {
         if (propertyName === "top") {
           setRemoved(true);
-          removeTransaction(bankTransaction.id);
+          if (editable) {
+            removeTransaction(bankTransaction.id);
+          }
         }
       }
     },
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "td",
       {
         className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
         ...openRow
       },
-      /* @__PURE__ */ React45.createElement("span", { className: "Layer__table-cell-content" }, formatTime4(parseISO5(bankTransaction.date), dateFormat))
+      /* @__PURE__ */ React46.createElement("span", { className: "Layer__table-cell-content" }, formatTime4(parseISO5(bankTransaction.date), dateFormat))
     ),
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "td",
       {
         className: "Layer__table-cell Layer__bank-transactions__tx-col",
         ...openRow
       },
-      /* @__PURE__ */ React45.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React46.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React46.createElement(
         Text,
         {
           as: "span",
@@ -3118,13 +3136,13 @@ var BankTransactionRow = ({
         bankTransaction.counterparty_name ?? bankTransaction.description
       ))
     ),
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "td",
       {
         className: "Layer__table-cell Layer__bank-transactions__account-col",
         ...openRow
       },
-      /* @__PURE__ */ React45.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React46.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React46.createElement(
         Text,
         {
           as: "span",
@@ -3134,30 +3152,30 @@ var BankTransactionRow = ({
         bankTransaction.account_name ?? ""
       ))
     ),
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "td",
       {
         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
       },
-      /* @__PURE__ */ React45.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+      /* @__PURE__ */ React46.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
     ),
-    /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React46.createElement(
       "td",
       {
-        className: classNames17(
+        className: classNames18(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
           `${className}__actions-cell--${open ? "open" : "close"}`
         )
       },
-      /* @__PURE__ */ React45.createElement(
+      /* @__PURE__ */ React46.createElement(
         "span",
         {
           className: `${className}__actions-container Layer__table-cell-content`
         },
-        editable && !open ? /* @__PURE__ */ React45.createElement(
+        editable && !open ? /* @__PURE__ */ React46.createElement(
           CategorySelect,
           {
             bankTransaction,
@@ -3170,11 +3188,11 @@ var BankTransactionRow = ({
             disabled: bankTransaction.processing
           }
         ) : null,
-        !editable && !open ? /* @__PURE__ */ React45.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
+        !editable && !open ? /* @__PURE__ */ React46.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
           Badge,
           {
-            icon: /* @__PURE__ */ React45.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ React45.createElement(
+            icon: /* @__PURE__ */ React46.createElement(Scissors_default, { size: 11 }),
+            tooltip: /* @__PURE__ */ React46.createElement(
               SplitTooltipDetails,
               {
                 classNamePrefix: className,
@@ -3183,18 +3201,18 @@ var BankTransactionRow = ({
             )
           },
           "Split"
-        ), /* @__PURE__ */ React45.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
+        ), /* @__PURE__ */ React46.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
           MatchBadge,
           {
             classNamePrefix: className,
             bankTransaction,
             dateFormat
           }
-        ), /* @__PURE__ */ React45.createElement("span", { className: `${className}__category-text__text` }, `${formatTime4(
+        ), /* @__PURE__ */ React46.createElement("span", { className: `${className}__category-text__text` }, `${formatTime4(
           parseISO5(bankTransaction.match.bank_transaction.date),
           dateFormat
-        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React45.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        editable && !open && showRetry ? /* @__PURE__ */ React45.createElement(
+        )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React46.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+        editable && !open && showRetry ? /* @__PURE__ */ React46.createElement(
           RetryButton,
           {
             onClick: () => {
@@ -3208,17 +3226,17 @@ var BankTransactionRow = ({
           },
           "Retry"
         ) : null,
-        open && bankTransaction.error ? /* @__PURE__ */ React45.createElement(
+        open && bankTransaction.error ? /* @__PURE__ */ React46.createElement(
           Text,
           {
             as: "span",
             size: "md" /* md */,
             className: "Layer__unsaved-info"
           },
-          /* @__PURE__ */ React45.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ React45.createElement(AlertCircle_default, { size: 12 })
+          /* @__PURE__ */ React46.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ React46.createElement(AlertCircle_default, { size: 12 })
         ) : null,
-        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ React45.createElement(
+        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ React46.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -3233,13 +3251,13 @@ var BankTransactionRow = ({
           },
           editable ? "Approve" : "Update"
         ) : null,
-        /* @__PURE__ */ React45.createElement(
+        /* @__PURE__ */ React46.createElement(
           IconButton,
           {
             onClick: toggleOpen,
             className: "Layer__bank-transaction-row__expand-button",
             active: open,
-            icon: /* @__PURE__ */ React45.createElement(
+            icon: /* @__PURE__ */ React46.createElement(
               ChevronDownFill_default,
               {
                 className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
@@ -3249,12 +3267,13 @@ var BankTransactionRow = ({
         )
       )
     )
-  ), /* @__PURE__ */ React45.createElement("tr", null, /* @__PURE__ */ React45.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React46.createElement("tr", null, /* @__PURE__ */ React46.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React46.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
       isOpen: open,
+      close: () => setOpen(false),
       containerWidth,
       editable
     }
@@ -3262,11 +3281,11 @@ var BankTransactionRow = ({
 };
 
 // src/components/BankTransactionListItem/Assignment.tsx
-import React46 from "react";
+import React47 from "react";
 import { parseISO as parseISO6, format as formatTime5 } from "date-fns";
 var Assignment = ({ bankTransaction }) => {
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
       MatchBadge,
       {
         classNamePrefix: "Layer__bank-transaction-list-item",
@@ -3274,17 +3293,17 @@ var Assignment = ({ bankTransaction }) => {
         dateFormat: DATE_FORMAT,
         text: "Matched"
       }
-    ), /* @__PURE__ */ React46.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${formatTime5(
+    ), /* @__PURE__ */ React47.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${formatTime5(
       parseISO6(bankTransaction.match.bank_transaction.date),
       DATE_FORMAT
     )}, ${bankTransaction.match.bank_transaction.description}`));
   }
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
-    return /* @__PURE__ */ React46.createElement(React46.Fragment, null, /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement(React47.Fragment, null, /* @__PURE__ */ React47.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ React46.createElement(Scissors_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ React46.createElement(
+        icon: /* @__PURE__ */ React47.createElement(Scissors_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ React47.createElement(
           SplitTooltipDetails,
           {
             classNamePrefix: "Layer__bank-transaction-list-item",
@@ -3293,13 +3312,13 @@ var Assignment = ({ bankTransaction }) => {
         )
       },
       "Split"
-    ), /* @__PURE__ */ React46.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
+    ), /* @__PURE__ */ React47.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
   }
-  return /* @__PURE__ */ React46.createElement(Text, null, bankTransaction?.category?.display_name);
+  return /* @__PURE__ */ React47.createElement(Text, null, bankTransaction?.category?.display_name);
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-import classNames18 from "classnames";
+import classNames19 from "classnames";
 import { parseISO as parseISO7, format as formatTime6 } from "date-fns";
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
@@ -3358,43 +3377,44 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames18(
+  const rowClassName = classNames19(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React47.createElement("li", { className: rowClassName }, /* @__PURE__ */ React47.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React47.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React47.createElement("span", { className: `${className}__heading-date` }, formatTime6(parseISO7(bankTransaction.date), dateFormat)), /* @__PURE__ */ React47.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React47.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement("li", { className: rowClassName }, /* @__PURE__ */ React48.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React48.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React48.createElement("span", { className: `${className}__heading-date` }, formatTime6(parseISO7(bankTransaction.date), dateFormat)), /* @__PURE__ */ React48.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React48.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React48.createElement(
     "div",
     {
       onClick: toggleOpen,
       className: "Layer__bank-transaction-row__expand-button"
     },
-    /* @__PURE__ */ React47.createElement(
+    /* @__PURE__ */ React48.createElement(
       ChevronDownFill_default,
       {
         className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
       }
     )
-  )), /* @__PURE__ */ React47.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ React47.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ React47.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ React47.createElement(
+  )), /* @__PURE__ */ React48.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ React48.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ React48.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ React48.createElement(
     "span",
     {
       className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
     },
     isCredit2(bankTransaction) ? "+$" : " $",
     centsToDollars(bankTransaction.amount)
-  )), /* @__PURE__ */ React47.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ React47.createElement(
+  )), /* @__PURE__ */ React48.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ React48.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
       isOpen: open,
+      close: () => setOpen(false),
       editable,
       asListItem: true,
       submitBtnText: editable ? "Approve" : "Update",
       containerWidth
     }
-  )), /* @__PURE__ */ React47.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ React47.createElement(
+  )), /* @__PURE__ */ React48.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ React48.createElement(
     CategorySelect,
     {
       bankTransaction,
@@ -3406,7 +3426,7 @@ var BankTransactionListItem = ({
       },
       disabled: bankTransaction.processing
     }
-  ) : null, !editable ? /* @__PURE__ */ React47.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ React47.createElement(
+  ) : null, !editable ? /* @__PURE__ */ React48.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ React48.createElement(
     SubmitButton,
     {
       onClick: () => {
@@ -3419,7 +3439,7 @@ var BankTransactionListItem = ({
       action: editable ? "save" /* SAVE */ : "update" /* UPDATE */
     },
     editable ? "Approve" : "Update"
-  ) : null, editable && showRetry ? /* @__PURE__ */ React47.createElement(
+  ) : null, editable && showRetry ? /* @__PURE__ */ React48.createElement(
     RetryButton,
     {
       onClick: () => {
@@ -3432,11 +3452,11 @@ var BankTransactionListItem = ({
       error: "Approval failed. Check connection and retry in few seconds."
     },
     "Retry"
-  ) : null), bankTransaction.error && showRetry ? /* @__PURE__ */ React47.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
+  ) : null), bankTransaction.error && showRetry ? /* @__PURE__ */ React48.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
 };
 
 // src/components/Container/Container.tsx
-import React48, { forwardRef as forwardRef3 } from "react";
+import React49, { forwardRef as forwardRef3 } from "react";
 
 // src/config/theme.ts
 var SHADES = {
@@ -3664,10 +3684,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-import classNames19 from "classnames";
+import classNames20 from "classnames";
 var Container = forwardRef3(
   ({ name, className, children, asWidget }, ref) => {
-    const baseClassName = classNames19(
+    const baseClassName = classNames20(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       asWidget ? "Layer__component--as-widget" : "",
@@ -3675,30 +3695,30 @@ var Container = forwardRef3(
     );
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    return /* @__PURE__ */ React48.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
+    return /* @__PURE__ */ React49.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
   }
 );
 
 // src/components/Container/Header.tsx
-import React49, { forwardRef as forwardRef4 } from "react";
-import classNames20 from "classnames";
+import React50, { forwardRef as forwardRef4 } from "react";
+import classNames21 from "classnames";
 var Header = forwardRef4(
   ({ className, children, style }, ref) => {
-    const baseClassName = classNames20("Layer__component-header", className);
-    return /* @__PURE__ */ React49.createElement("header", { ref, className: baseClassName, style }, children);
+    const baseClassName = classNames21("Layer__component-header", className);
+    return /* @__PURE__ */ React50.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
 // src/components/DataState/DataState.tsx
-import React50 from "react";
+import React51 from "react";
 var getIcon = (status) => {
   switch (status) {
     case "failed" /* failed */:
-      return /* @__PURE__ */ React50.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ React50.createElement(AlertOctagon_default, { size: 12 }));
+      return /* @__PURE__ */ React51.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ React51.createElement(AlertOctagon_default, { size: 12 }));
     case "info" /* info */:
-      return /* @__PURE__ */ React50.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React50.createElement(AlertOctagon_default, { size: 12 }));
+      return /* @__PURE__ */ React51.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React51.createElement(AlertOctagon_default, { size: 12 }));
     default:
-      return /* @__PURE__ */ React50.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React50.createElement(CheckCircle_default, { size: 12 }));
+      return /* @__PURE__ */ React51.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React51.createElement(CheckCircle_default, { size: 12 }));
   }
 };
 var DataState = ({
@@ -3708,7 +3728,7 @@ var DataState = ({
   onRefresh,
   isLoading
 }) => {
-  return /* @__PURE__ */ React50.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ React51.createElement(
     Text,
     {
       as: "span",
@@ -3717,11 +3737,11 @@ var DataState = ({
       className: "Layer__data-state__title"
     },
     title
-  ), /* @__PURE__ */ React50.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ React50.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ React50.createElement(
+  ), /* @__PURE__ */ React51.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ React51.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ React51.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: isLoading ? /* @__PURE__ */ React50.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ React50.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: isLoading ? /* @__PURE__ */ React51.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ React51.createElement(RefreshCcw_default, { size: 12 }),
       onClick: onRefresh,
       disabled: isLoading
     },
@@ -3730,13 +3750,13 @@ var DataState = ({
 };
 
 // src/components/Loader/Loader.tsx
-import React51 from "react";
+import React52 from "react";
 var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ React51.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ React51.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ React52.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ React52.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/Pagination/Pagination.tsx
-import React54 from "react";
+import React55 from "react";
 
 // src/hooks/usePagination/usePagination.ts
 import { useMemo } from "react";
@@ -3784,8 +3804,8 @@ var usePagination = ({
 };
 
 // src/icons/ChevronLeft.tsx
-import * as React52 from "react";
-var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
+import * as React53 from "react";
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3795,7 +3815,7 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createEle
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React52.createElement(
+  /* @__PURE__ */ React53.createElement(
     "path",
     {
       d: "M11.25 13.5L6.75 9L11.25 4.5",
@@ -3808,8 +3828,8 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createEle
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-import * as React53 from "react";
-var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createElement(
+import * as React54 from "react";
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React54.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3819,7 +3839,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createEl
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React53.createElement(
+  /* @__PURE__ */ React54.createElement(
     "path",
     {
       d: "M6.75 13.5L11.25 9L6.75 4.5",
@@ -3853,7 +3873,7 @@ var Pagination = ({
     return;
   }
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ React54.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ React55.createElement(
     "li",
     {
       key: `page-prev`,
@@ -3865,12 +3885,19 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage - 1)
     },
-    /* @__PURE__ */ React54.createElement(ChevronLeft_default, { size: 12 })
+    /* @__PURE__ */ React55.createElement(ChevronLeft_default, { size: 12 })
   ), paginationRange.map((pageNumber) => {
     if (pageNumber === DOTS) {
-      return /* @__PURE__ */ React54.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
+      return /* @__PURE__ */ React55.createElement(
+        "li",
+        {
+          key: `page-${pageNumber}`,
+          className: "Layer__pagination-item Layer__pagination-dots"
+        },
+        "\u2026"
+      );
     }
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React55.createElement(
       "li",
       {
         key: `page-${pageNumber}`,
@@ -3885,7 +3912,7 @@ var Pagination = ({
       },
       pageNumber
     );
-  }), /* @__PURE__ */ React54.createElement(
+  }), /* @__PURE__ */ React55.createElement(
     "li",
     {
       key: `page-last`,
@@ -3897,7 +3924,7 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage + 1)
     },
-    /* @__PURE__ */ React54.createElement(ChevronRight_default, { size: 12 })
+    /* @__PURE__ */ React55.createElement(ChevronRight_default, { size: 12 })
   ));
 };
 
@@ -3917,20 +3944,32 @@ var filterVisibility = (display, bankTransaction) => {
   const categorized = CategorizedCategories.includes(
     bankTransaction.categorization_status
   );
-  const inReview = ReviewCategories.includes(bankTransaction.categorization_status) || bankTransaction.recently_categorized;
+  const inReview = ReviewCategories.includes(bankTransaction.categorization_status) && !bankTransaction.recently_categorized;
   return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
 };
 var BankTransactions = ({
   asWidget = false,
-  pageSize = 15
+  pageSize = 15,
+  categorizedOnly = false
 }) => {
-  const [display, setDisplay] = useState10("review" /* review */);
+  const [display, setDisplay] = useState10(
+    categorizedOnly ? "categorized" /* categorized */ : "review" /* review */
+  );
   const [currentPage, setCurrentPage] = useState10(1);
   const [removedTxs, setRemovedTxs] = useState10([]);
+  const [initialLoad, setInitialLoad] = useState10(true);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
   const bankTransactionsByFilter = data?.filter(
     (tx) => !removedTxs.includes(tx.id) && filterVisibility(display, tx)
   );
+  useEffect7(() => {
+    if (!isLoading) {
+      const timeoutLoad = setTimeout(() => {
+        setInitialLoad(false);
+      }, 1e3);
+      return () => clearTimeout(timeoutLoad);
+    }
+  }, [isLoading]);
   const bankTransactions = useMemo2(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -3969,7 +4008,7 @@ var BankTransactions = ({
     debounceContainerWidth(size?.width);
   });
   const editable = display === "review" /* review */;
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     Container,
     {
       className: editable ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized",
@@ -3977,14 +4016,14 @@ var BankTransactions = ({
       asWidget,
       ref: containerRef
     },
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       Header,
       {
         className: "Layer__bank-transactions__header",
         style: { top: shiftStickyHeader }
       },
-      /* @__PURE__ */ React55.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-      /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React56.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      !categorizedOnly && /* @__PURE__ */ React56.createElement(
         Toggle,
         {
           name: "bank-transaction-display",
@@ -3997,17 +4036,18 @@ var BankTransactions = ({
         }
       )
     ),
-    !listView && /* @__PURE__ */ React55.createElement(
+    !listView && /* @__PURE__ */ React56.createElement(
       "table",
       {
         width: "100%",
         className: "Layer__table Layer__bank-transactions__table with-cell-separators"
       },
-      /* @__PURE__ */ React55.createElement("thead", null, /* @__PURE__ */ React55.createElement("tr", null, /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ React55.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-      /* @__PURE__ */ React55.createElement("tbody", null, !isLoading && bankTransactions?.map(
-        (bankTransaction, index) => /* @__PURE__ */ React55.createElement(
+      /* @__PURE__ */ React56.createElement("thead", null, /* @__PURE__ */ React56.createElement("tr", null, /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ React56.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+      /* @__PURE__ */ React56.createElement("tbody", null, !isLoading && bankTransactions?.map(
+        (bankTransaction, index) => /* @__PURE__ */ React56.createElement(
           BankTransactionRow,
           {
+            initialLoad,
             index,
             key: bankTransaction.id,
             dateFormat: DATE_FORMAT,
@@ -4019,9 +4059,9 @@ var BankTransactions = ({
         )
       ))
     ),
-    isLoading && !bankTransactions ? /* @__PURE__ */ React55.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React55.createElement(Loader2, null)) : null,
-    !isLoading && listView ? /* @__PURE__ */ React55.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
-      (bankTransaction, index) => /* @__PURE__ */ React55.createElement(
+    isLoading && !bankTransactions ? /* @__PURE__ */ React56.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React56.createElement(Loader2, null)) : null,
+    !isLoading && listView ? /* @__PURE__ */ React56.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
+      (bankTransaction, index) => /* @__PURE__ */ React56.createElement(
         BankTransactionListItem,
         {
           index,
@@ -4034,7 +4074,7 @@ var BankTransactions = ({
         }
       )
     )) : null,
-    !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ React55.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React55.createElement(
+    !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ React56.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React56.createElement(
       DataState,
       {
         status: "allDone" /* allDone */,
@@ -4044,7 +4084,7 @@ var BankTransactions = ({
         isLoading: isValidating
       }
     )) : null,
-    !isLoading && error ? /* @__PURE__ */ React55.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React55.createElement(
+    !isLoading && error ? /* @__PURE__ */ React56.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React56.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -4054,7 +4094,7 @@ var BankTransactions = ({
         isLoading: isValidating
       }
     )) : null,
-    /* @__PURE__ */ React55.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ React56.createElement(
       Pagination,
       {
         currentPage,
@@ -4067,7 +4107,7 @@ var BankTransactions = ({
 };
 
 // src/components/Hello/Hello.tsx
-import React56 from "react";
+import React57 from "react";
 import useSWR3 from "swr";
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -4076,112 +4116,685 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ React56.createElement(React56.Fragment, null, /* @__PURE__ */ React56.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-import React58 from "react";
+import React64 from "react";
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-import { useEffect as useEffect7, useState as useState11 } from "react";
+import useSWR4 from "swr";
 var MOCK_DATA = [
   {
-    name: "Business Checking",
-    account: "1234",
-    amount: 1220620
+    id: "1",
+    external_account_name: "Citi Double Cash\xAE Card",
+    external_account_number: "1234",
+    latest_balance_timestamp: {
+      external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+      external_account_source: "PLAID",
+      balance: 435121,
+      at: "2024-04-03T13:00:00Z",
+      created_at: "2024-04-06T16:44:35.715458Z"
+    },
+    current_ledger_balance: 373717,
+    institution: "Chase",
+    institutionLogo: ""
+  },
+  {
+    id: "2",
+    external_account_name: "Citi Double Cash\xAE Card",
+    external_account_number: "1234",
+    latest_balance_timestamp: {
+      external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+      external_account_source: "PLAID",
+      balance: 435121,
+      at: "2024-04-03T13:00:00Z",
+      created_at: "2024-04-06T16:44:35.715458Z"
+    },
+    current_ledger_balance: 373717,
+    institution: "Chase",
+    institutionLogo: ""
   },
   {
-    name: "Business Savings",
-    account: "5678",
-    amount: 10002062e-1
+    id: "3",
+    external_account_name: "Citi Double Cash\xAE Card",
+    external_account_number: "1234",
+    latest_balance_timestamp: {
+      external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+      external_account_source: "PLAID",
+      balance: 435121,
+      at: "2024-04-03T13:00:00Z",
+      created_at: "2024-04-06T16:44:35.715458Z"
+    },
+    current_ledger_balance: 373717,
+    institution: "Chase",
+    institutionLogo: ""
   },
   {
-    name: "Account",
-    account: "4321",
-    amount: 4400020620
+    id: "4",
+    external_account_name: "Citi Double Cash\xAE Card",
+    external_account_number: "1234",
+    latest_balance_timestamp: {
+      external_account_external_id: "0Br385JmgbTryJn8nEBnUb4A5ydv06U9Vbqqq",
+      external_account_source: "PLAID",
+      balance: 435121,
+      at: "2024-04-03T13:00:00Z",
+      created_at: "2024-04-06T16:44:35.715458Z"
+    },
+    current_ledger_balance: 373717,
+    institution: "Chase",
+    institutionLogo: ""
   }
 ];
 var useLinkedAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [isLoading, setIsLoading] = useState11(true);
-  useEffect7(() => {
-    const timer = setTimeout(() => {
-      setIsLoading(false);
-    }, 2e3);
-  }, []);
-  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
-  const isValidating = false;
   const {
-    data = void 0,
-    meta: metadata = {},
-    error = void 0
-  } = responseData || {};
+    // data: responseData,
+    isLoading,
+    isValidating,
+    error: responseError,
+    mutate
+  } = useSWR4(
+    businessId && auth?.access_token && `linked-accounts-${businessId}`,
+    Layer.getLinkedAccounts(apiUrl, auth?.access_token, {
+      params: { businessId }
+    })
+  );
+  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
+  const addAccount = () => {
+    console.log("add account...");
+  };
+  const unlinkAccount = () => {
+    console.log("unlink account...");
+  };
+  const renewLinkAccount = () => {
+    console.log("relink account...");
+  };
   const refetch = () => {
     console.log("refetch...");
   };
   return {
-    data,
-    metadata,
+    // data: responseData?.data.external_accounts,
+    data: responseData.data,
     isLoading,
     isValidating,
-    error,
-    refetch
+    error: responseError,
+    refetch,
+    addAccount,
+    unlinkAccount,
+    renewLinkAccount
   };
 };
 
-// src/components/LinkedAccounts/LinkedAccountThumb.tsx
-import React57 from "react";
-var LinkedAccountThumb = ({ account }) => {
-  return /* @__PURE__ */ React57.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ React57.createElement("div", { className: "topbar" }, /* @__PURE__ */ React57.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ React57.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ React57.createElement("div", { className: "bottombar" }, /* @__PURE__ */ React57.createElement(Text, { as: "span", className: "account-amount" }, "$", centsToDollars(account.amount))));
-};
-
-// src/components/LinkedAccounts/LinkedAccounts.tsx
-var COMPONENT_NAME2 = "linked-accounts";
-var LinkedAccounts = () => {
-  const { data, isLoading, error, isValidating, refetch } = useLinkedAccounts();
-  return /* @__PURE__ */ React58.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ React58.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ React58.createElement(
-    Heading,
+// src/icons/PlusIcon.tsx
+import * as React58 from "react";
+var PlusIcon = ({ size = 14, ...props }) => /* @__PURE__ */ React58.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React58.createElement(
+    "path",
     {
-      className: "Layer__linked-accounts__title",
-      size: "secondary" /* secondary */
-    },
-    "Linked Accounts"
-  )), isLoading && /* @__PURE__ */ React58.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ React58.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ React58.createElement(
-    DataState,
+      d: "M14.6667 8.49996C14.6667 4.81806 11.6819 1.83329 8.00004 1.83329C4.31814 1.83329 1.33337 4.81806 1.33337 8.49996C1.33337 12.1819 4.31814 15.1666 8.00004 15.1666C11.6819 15.1666 14.6667 12.1819 14.6667 8.49996Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React58.createElement(
+    "path",
     {
-      status: "failed" /* failed */,
-      title: "Something went wrong",
-      description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
-      isLoading: isValidating
+      d: "M5.33337 8.5L10.6667 8.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  ) : null, !error && !isLoading ? /* @__PURE__ */ React58.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ React58.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
-};
-
-// src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React68, { createContext as createContext2 } from "react";
+  ),
+  /* @__PURE__ */ React58.createElement(
+    "path",
+    {
+      d: "M8 11.1666L8 5.83329",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var PlusIcon_default = PlusIcon;
 
-// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo3, useState as useState12 } from "react";
+// src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
+import React61 from "react";
 
-// src/utils/profitAndLossUtils.ts
-var doesLineItemQualifies = (item) => {
-  return !(item.is_contra || item.value === void 0 || item.value === null || isNaN(item.value) || item.value === -Infinity || item.value === Infinity || item.value < 0);
+// src/icons/MoreVertical.tsx
+import React59 from "react";
+var MoreVertical = ({ size = 18, ...props }) => {
+  return /* @__PURE__ */ React59.createElement(
+    "svg",
+    {
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      width: size,
+      height: size
+    },
+    /* @__PURE__ */ React59.createElement(
+      "path",
+      {
+        d: "M8.66659 8C8.66659 7.63181 8.36811 7.33333 7.99992 7.33333C7.63173 7.33333 7.33325 7.63181 7.33325 8C7.33325 8.36819 7.63173 8.66667 7.99992 8.66667C8.36811 8.66667 8.66659 8.36819 8.66659 8Z",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React59.createElement(
+      "path",
+      {
+        d: "M8.66659 3.33333C8.66659 2.96514 8.36811 2.66667 7.99992 2.66667C7.63173 2.66667 7.33325 2.96514 7.33325 3.33333C7.33325 3.70152 7.63173 4 7.99992 4C8.36811 4 8.66659 3.70152 8.66659 3.33333Z",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ React59.createElement(
+      "path",
+      {
+        d: "M8.66659 12.6667C8.66659 12.2985 8.36811 12 7.99992 12C7.63173 12 7.33325 12.2985 7.33325 12.6667C7.33325 13.0349 7.63173 13.3333 7.99992 13.3333C8.36811 13.3333 8.66659 13.0349 8.66659 12.6667Z",
+        fill: "currentColor",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  );
 };
-var collectSubItems = (type, item) => {
-  if (!item) {
-    return [];
-  }
-  const items = [];
-  item?.line_items?.forEach((item2) => {
-    if (doesLineItemQualifies(item2)) {
-      items.push({
-        name: item2.name,
-        display_name: item2.display_name,
-        value: Math.abs(item2.value || 0),
-        // @TODO - confirm that's safe to do this
-        type
-      });
+var MoreVertical_default = MoreVertical;
+
+// src/components/HoverMenu/HoverMenu.tsx
+import React60, { useEffect as useEffect8, useRef as useRef12, useState as useState11 } from "react";
+import classNames22 from "classnames";
+var HoverMenu = ({ children, config }) => {
+  const [openMenu, setOpenMenu] = useState11(false);
+  const hoverMenuRef = useRef12(null);
+  const hoverMenuClassName = classNames22(
+    "Layer__hover-menu",
+    openMenu && "--open"
+  );
+  useEffect8(() => {
+    function handleClickOutside(event) {
+      if (hoverMenuRef.current && !hoverMenuRef.current.contains(event.target)) {
+        setOpenMenu(false);
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ React60.createElement(
+    "div",
+    {
+      className: hoverMenuClassName,
+      ref: hoverMenuRef,
+      onMouseLeave: () => setOpenMenu(false)
+    },
+    /* @__PURE__ */ React60.createElement(
+      "div",
+      {
+        className: "Layer__hover-menu__children",
+        role: "button",
+        onMouseEnter: () => setOpenMenu(true),
+        onClick: () => setOpenMenu(true)
+      },
+      children
+    ),
+    /* @__PURE__ */ React60.createElement("div", { className: "Layer__hover-menu__list-wrapper" }, /* @__PURE__ */ React60.createElement("ul", { className: "Layer__hover-menu__list" }, config && config.length > 0 && config.map((item) => /* @__PURE__ */ React60.createElement(
+      "li",
+      {
+        key: `hover-menu-${item.name}`,
+        className: "Layer__hover-menu__list-item"
+      },
+      /* @__PURE__ */ React60.createElement(
+        "button",
+        {
+          className: "Layer__hover-menu__list-item-button",
+          onClick: () => item.action()
+        },
+        item.name
+      )
+    ))))
+  );
+};
+
+// src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
+var LinkedAccountOptions = ({
+  children,
+  config
+}) => {
+  return /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ React61.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ React61.createElement(HoverMenu, { config }, /* @__PURE__ */ React61.createElement(MoreVertical_default, { size: 16 })))), children);
+};
+
+// src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
+import React63 from "react";
+
+// src/icons/InstitutionIcon.tsx
+import * as React62 from "react";
+var InstitutionIcon = ({ size = 18, ...props }) => /* @__PURE__ */ React62.createElement(
+  "svg",
+  {
+    viewBox: "0 0 27 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React62.createElement("g", { filter: "url(#filter0_i_2320_122784)" }, /* @__PURE__ */ React62.createElement(
+    "path",
+    {
+      d: "M0 8.50225C0 8.13268 0.20383 7.79324 0.530047 7.61956L13.03 0.964441C13.3238 0.80803 13.6762 0.808029 13.97 0.964441L26.47 7.61956C26.7962 7.79324 27 8.13268 27 8.50225V9.71423C27 10.2665 26.5523 10.7142 26 10.7142H0.999999C0.447715 10.7142 0 10.2665 0 9.71423V8.50225Z",
+      fill: "currentColor"
+    }
+  )),
+  /* @__PURE__ */ React62.createElement("g", { filter: "url(#filter1_i_2320_122784)" }, /* @__PURE__ */ React62.createElement(
+    "path",
+    {
+      d: "M3 13C3 12.4477 3.44772 12 4 12H7C7.55228 12 8 12.4477 8 13V20C8 20.5523 7.55228 21 7 21H4C3.44772 21 3 20.5523 3 20L3 13Z",
+      fill: "currentColor"
+    }
+  )),
+  /* @__PURE__ */ React62.createElement("g", { filter: "url(#filter2_i_2320_122784)" }, /* @__PURE__ */ React62.createElement(
+    "path",
+    {
+      d: "M11 13C11 12.4477 11.4477 12 12 12H15C15.5523 12 16 12.4477 16 13V20C16 20.5523 15.5523 21 15 21H12C11.4477 21 11 20.5523 11 20L11 13Z",
+      fill: "currentColor"
+    }
+  )),
+  /* @__PURE__ */ React62.createElement("g", { filter: "url(#filter3_i_2320_122784)" }, /* @__PURE__ */ React62.createElement(
+    "path",
+    {
+      d: "M19 13C19 12.4477 19.4477 12 20 12H23C23.5523 12 24 12.4477 24 13V20C24 20.5523 23.5523 21 23 21H20C19.4477 21 19 20.5523 19 20L19 13Z",
+      fill: "currentColor"
+    }
+  )),
+  /* @__PURE__ */ React62.createElement("g", { filter: "url(#filter4_i_2320_122784)" }, /* @__PURE__ */ React62.createElement(
+    "path",
+    {
+      d: "M1 23.2856C1 22.7334 1.44772 22.2856 2 22.2856H25C25.5523 22.2856 26 22.7334 26 23.2856V26.2856C26 26.8379 25.5523 27.2856 25 27.2856H2C1.44772 27.2856 1 26.8379 1 26.2856L1 23.2856Z",
+      fill: "currentColor"
+    }
+  )),
+  /* @__PURE__ */ React62.createElement("defs", null, /* @__PURE__ */ React62.createElement(
+    "filter",
+    {
+      id: "filter0_i_2320_122784",
+      x: "0",
+      y: "0.847168",
+      width: "27",
+      height: "9.86707",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React62.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement("feOffset", null),
+    /* @__PURE__ */ React62.createElement("feGaussianBlur", { stdDeviation: "0.5" }),
+    /* @__PURE__ */ React62.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in2: "shape",
+        result: "effect1_innerShadow_2320_122784"
+      }
+    )
+  ), /* @__PURE__ */ React62.createElement(
+    "filter",
+    {
+      id: "filter1_i_2320_122784",
+      x: "3",
+      y: "12",
+      width: "5",
+      height: "9",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React62.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement("feOffset", null),
+    /* @__PURE__ */ React62.createElement("feGaussianBlur", { stdDeviation: "0.5" }),
+    /* @__PURE__ */ React62.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in2: "shape",
+        result: "effect1_innerShadow_2320_122784"
+      }
+    )
+  ), /* @__PURE__ */ React62.createElement(
+    "filter",
+    {
+      id: "filter2_i_2320_122784",
+      x: "11",
+      y: "12",
+      width: "5",
+      height: "9",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React62.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement("feOffset", null),
+    /* @__PURE__ */ React62.createElement("feGaussianBlur", { stdDeviation: "0.5" }),
+    /* @__PURE__ */ React62.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in2: "shape",
+        result: "effect1_innerShadow_2320_122784"
+      }
+    )
+  ), /* @__PURE__ */ React62.createElement(
+    "filter",
+    {
+      id: "filter3_i_2320_122784",
+      x: "19",
+      y: "12",
+      width: "5",
+      height: "9",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React62.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement("feOffset", null),
+    /* @__PURE__ */ React62.createElement("feGaussianBlur", { stdDeviation: "0.5" }),
+    /* @__PURE__ */ React62.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in2: "shape",
+        result: "effect1_innerShadow_2320_122784"
+      }
+    )
+  ), /* @__PURE__ */ React62.createElement(
+    "filter",
+    {
+      id: "filter4_i_2320_122784",
+      x: "1",
+      y: "22.2856",
+      width: "25",
+      height: "5",
+      filterUnits: "userSpaceOnUse",
+      colorInterpolationFilters: "sRGB"
+    },
+    /* @__PURE__ */ React62.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in: "SourceGraphic",
+        in2: "BackgroundImageFix",
+        result: "shape"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        in: "SourceAlpha",
+        type: "matrix",
+        values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+        result: "hardAlpha"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement("feOffset", null),
+    /* @__PURE__ */ React62.createElement("feGaussianBlur", { stdDeviation: "0.5" }),
+    /* @__PURE__ */ React62.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: "-1", k3: "1" }),
+    /* @__PURE__ */ React62.createElement(
+      "feColorMatrix",
+      {
+        type: "matrix",
+        values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.04 0"
+      }
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "feBlend",
+      {
+        mode: "normal",
+        in2: "shape",
+        result: "effect1_innerShadow_2320_122784"
+      }
+    )
+  ))
+);
+var InstitutionIcon_default = InstitutionIcon;
+
+// src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
+import classNames23 from "classnames";
+var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ React63.createElement("div", { className: "account-number" }, /* @__PURE__ */ React63.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022", accountNumber));
+var LinkedAccountThumb = ({
+  account,
+  asWidget
+}) => {
+  const linkedAccountThumbClassName = classNames23(
+    "Layer__linked-account-thumb",
+    asWidget && "--as-widget"
+  );
+  return /* @__PURE__ */ React63.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ React63.createElement("div", { className: "topbar" }, /* @__PURE__ */ React63.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ React63.createElement(AccountNumber, { accountNumber: account.external_account_number }), /* @__PURE__ */ React63.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-institution",
+      size: "sm"
+    },
+    account.institution
+  )), /* @__PURE__ */ React63.createElement("div", { className: "topbar-logo" }, !account.institutionLogo && /* @__PURE__ */ React63.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ React63.createElement("div", { className: "middlebar" }, /* @__PURE__ */ React63.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-balance-text",
+      size: "sm"
+    },
+    "Bank balance"
+  ), /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ React63.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ React63.createElement(AccountNumber, { accountNumber: account.external_account_number }) : /* @__PURE__ */ React63.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-balance-text",
+      size: "sm"
+    },
+    "General ledger balance"
+  ), /* @__PURE__ */ React63.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
+};
+
+// src/components/LinkedAccounts/LinkedAccounts.tsx
+import classNames24 from "classnames";
+var COMPONENT_NAME2 = "linked-accounts";
+var LinkedAccounts = ({ asWidget }) => {
+  const {
+    data,
+    isLoading,
+    error,
+    isValidating,
+    refetch,
+    addAccount,
+    unlinkAccount,
+    renewLinkAccount
+  } = useLinkedAccounts();
+  const linkedAccountOptionsConfig = [
+    { name: "Renew link", action: renewLinkAccount },
+    { name: "Unlink", action: unlinkAccount }
+  ];
+  const linkedAccountsNewAccountClassName = classNames24(
+    "Layer__linked-accounts__new-account",
+    asWidget && "--as-widget"
+  );
+  return /* @__PURE__ */ React64.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ React64.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ React64.createElement(
+    Heading,
+    {
+      className: "Layer__linked-accounts__title",
+      size: "secondary" /* secondary */
+    },
+    "Linked Accounts"
+  )), isLoading && /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ React64.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ React64.createElement(
+    DataState,
+    {
+      status: "failed" /* failed */,
+      title: "Something went wrong",
+      description: "We couldn\u2019t load your data.",
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  ) : null, !error && !isLoading ? /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ React64.createElement(
+    LinkedAccountOptions,
+    {
+      key: `linked-acc-${index}`,
+      config: linkedAccountOptionsConfig
+    },
+    /* @__PURE__ */ React64.createElement(LinkedAccountThumb, { account, asWidget })
+  )), /* @__PURE__ */ React64.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "new-account",
+      onClick: () => addAccount(),
+      className: linkedAccountsNewAccountClassName
+    },
+    /* @__PURE__ */ React64.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ React64.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ React64.createElement(Text, { as: "span", size: "sm" }, "New account"))
+  )) : null);
+};
+
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+import React74, { createContext as createContext2 } from "react";
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+import { useMemo as useMemo3, useState as useState12 } from "react";
+
+// src/utils/profitAndLossUtils.ts
+var doesLineItemQualifies = (item) => {
+  return !(item.is_contra || item.value === void 0 || item.value === null || isNaN(item.value) || item.value === -Infinity || item.value === Infinity || item.value < 0);
+};
+var collectSubItems = (type, item) => {
+  if (!item) {
+    return [];
+  }
+  const items = [];
+  item?.line_items?.forEach((item2) => {
+    if (doesLineItemQualifies(item2)) {
+      items.push({
+        name: item2.name,
+        display_name: item2.display_name,
+        value: item2.value || 0,
+        type
+      });
     }
   });
   return items;
@@ -4220,7 +4833,7 @@ var applyShare = (items, total) => {
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
 import { startOfMonth, endOfMonth, formatISO } from "date-fns";
-import useSWR4 from "swr";
+import useSWR5 from "swr";
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
@@ -4248,7 +4861,7 @@ var useProfitAndLoss = ({
     isValidating,
     error: rawError,
     mutate
-  } = useSWR4(
+  } = useSWR5(
     businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
       ","
     )}-${reportingBasis}`,
@@ -4349,7 +4962,7 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React60, { useContext as useContext2, useMemo as useMemo4, useState as useState13 } from "react";
+import React66, { useContext as useContext2, useMemo as useMemo4, useState as useState13 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -4387,7 +5000,7 @@ var formatPercent = (value, options) => {
 };
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-import React59, { useEffect as useEffect8 } from "react";
+import React65, { useEffect as useEffect9 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -4404,11 +5017,11 @@ var Indicator = ({
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
   const borderRadius = width > 16 ? 8 : width / 2;
-  useEffect8(() => {
+  useEffect9(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -4546,13 +5159,13 @@ var ProfitAndLossChart = () => {
     if (active && payload && payload.length) {
       const netProfit = payload[0].payload.netProfit ?? 0;
       const netProfitClass = netProfit > 0 ? "positive" : netProfit < 0 ? "negative" : "";
-      return /* @__PURE__ */ React60.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React60.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React60.createElement("li", null, /* @__PURE__ */ React60.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React60.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React60.createElement("li", null, /* @__PURE__ */ React60.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React60.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React60.createElement("li", null, /* @__PURE__ */ React60.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React60.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
+      return /* @__PURE__ */ React66.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React66.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React66.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ React66.createElement("li", null, /* @__PURE__ */ React66.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ React66.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
     const { x, width, height } = props;
-    return /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React66.createElement(
       Rectangle,
       {
         fill: getColor(900)?.hex ?? "#333",
@@ -4575,7 +5188,7 @@ var ProfitAndLossChart = () => {
     ]
   );
   const [animateFrom, setAnimateFrom] = useState13(-1);
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React66.createElement(
     ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -4583,7 +5196,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React66.createElement(
       BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -4592,17 +5205,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React66.createElement(
         Tooltip2,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ React60.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ React60.createElement(CustomizedCursor, null),
+          content: /* @__PURE__ */ React66.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ React66.createElement(CustomizedCursor, null),
           animationDuration: 100,
           animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React66.createElement(
         CartesianGrid,
         {
           vertical: false,
@@ -4610,7 +5223,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React66.createElement(
         Legend,
         {
           verticalAlign: "top",
@@ -4630,8 +5243,8 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ React60.createElement(XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React66.createElement(XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ React66.createElement(
         Bar,
         {
           dataKey: "revenue",
@@ -4640,10 +5253,10 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ React60.createElement(
+        /* @__PURE__ */ React66.createElement(
           LabelList,
           {
-            content: /* @__PURE__ */ React60.createElement(
+            content: /* @__PURE__ */ React66.createElement(
               Indicator,
               {
                 animateFrom,
@@ -4652,7 +5265,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ React60.createElement(
+        data.map((entry) => /* @__PURE__ */ React66.createElement(
           Cell,
           {
             key: entry.name,
@@ -4660,7 +5273,7 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ React60.createElement(
+      /* @__PURE__ */ React66.createElement(
         Bar,
         {
           dataKey: "expenses",
@@ -4669,7 +5282,7 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ React60.createElement(
+        data.map((entry) => /* @__PURE__ */ React66.createElement(
           Cell,
           {
             key: entry.name,
@@ -4682,72 +5295,132 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-import React61, { useContext as useContext3 } from "react";
+import React67, { useContext as useContext3, useState as useState14, useEffect as useEffect10 } from "react";
 import { add, endOfMonth as endOfMonth3, format as format5, startOfMonth as startOfMonth3 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { changeDateRange, dateRange } = useContext3(ProfitAndLoss.Context);
-  const date = dateRange.startDate;
-  const label = format5(date, "LLLL y");
-  const change = (duration) => {
-    const newDate = add(date, duration);
+  const [isAnimating, setIsAnimating] = useState14(false);
+  const [localDate, setLocalDate] = useState14(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = useState14(0);
+  const [currentOpacity, setCurrentOpacity] = useState14(1);
+  const [transformStyle, setTransformStyle] = useState14({
+    transform: "translateX(33%)",
+    transition: "ease"
+  });
+  useEffect10(() => {
+    if (dateRange.startDate !== localDate && !isAnimating) {
+      setLocalDate(dateRange.startDate);
+      setTransformStyle({ transform: "translateX(33%)", transition: "none" });
+    }
+  }, [dateRange.startDate, localDate, isAnimating]);
+  const change = (monthsToAdd) => {
+    if (isAnimating)
+      return;
+    setIsAnimating(true);
+    setNextOpacity(1);
+    const newDate = add(localDate, { months: monthsToAdd });
+    if (monthsToAdd === -1) {
+      setCurrentOpacity(0);
+    }
     changeDateRange({
       startDate: startOfMonth3(newDate),
       endDate: endOfMonth3(newDate)
     });
+    const translateXValue = monthsToAdd > 0 ? "0%" : "66%";
+    setTransformStyle({
+      transform: `translateX(${translateXValue})`,
+      transition: "transform 0.4s ease"
+    });
+    setTimeout(() => {
+      setCurrentOpacity(1);
+    }, 300);
+    setTimeout(() => {
+      setLocalDate(newDate);
+      setTransformStyle({ transform: "translateX(33%)", transition: "none" });
+      setIsAnimating(false);
+      setNextOpacity(0);
+      setCurrentOpacity(1);
+    }, 300);
   };
-  const previousMonth = () => change({ months: -1 });
-  const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ React61.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ React61.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ React61.createElement(
-    "button",
+  const currentLabel = format5(localDate, "LLLL, y");
+  const prevLabel = format5(add(localDate, { months: -1 }), "LLLL, y");
+  const nextLabel = format5(add(localDate, { months: 1 }), "LLLL, y");
+  return /* @__PURE__ */ React67.createElement(
+    "div",
     {
-      "aria-label": "View Previous Month",
-      className: "Layer__profit-and-loss-date-picker__button",
-      onClick: previousMonth
+      className: "Layer__profit-and-loss-date-picker"
     },
-    /* @__PURE__ */ React61.createElement(
-      ChevronLeft_default,
+    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ React67.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ React67.createElement(
+      "span",
       {
-        className: "Layer__profit-and-loss-date-picker__button-icon",
-        size: 16
-      }
-    )
-  ), /* @__PURE__ */ React61.createElement(
-    "button",
-    {
-      "aria-label": "View Next Month",
-      className: "Layer__profit-and-loss-date-picker__button",
-      onClick: nextMonth
-    },
-    /* @__PURE__ */ React61.createElement(
-      ChevronRight_default,
+        className: "Layer__profit-and-loss-date-picker__label",
+        style: { opacity: currentOpacity }
+      },
+      currentLabel
+    ), /* @__PURE__ */ React67.createElement(
+      "span",
       {
-        className: "Layer__profit-and-loss-date-picker__button-icon",
-        size: 16
-      }
-    )
-  ));
+        className: "Layer__profit-and-loss-date-picker__label",
+        style: { opacity: nextOpacity }
+      },
+      nextLabel
+    )),
+    /* @__PURE__ */ React67.createElement(
+      "button",
+      {
+        "aria-label": "View Previous Month",
+        className: "Layer__profit-and-loss-date-picker__button",
+        onClick: () => change(-1),
+        disabled: isAnimating
+      },
+      /* @__PURE__ */ React67.createElement(
+        ChevronLeft_default,
+        {
+          className: "Layer__profit-and-loss-date-picker__button-icon",
+          size: 16
+        }
+      )
+    ),
+    /* @__PURE__ */ React67.createElement(
+      "button",
+      {
+        "aria-label": "View Next Month",
+        className: "Layer__profit-and-loss-date-picker__button",
+        onClick: () => change(1),
+        disabled: isAnimating
+      },
+      /* @__PURE__ */ React67.createElement(
+        ChevronRight_default,
+        {
+          className: "Layer__profit-and-loss-date-picker__button-icon",
+          size: 16
+        }
+      )
+    ),
+    /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
+  );
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React64, { useContext as useContext4, useMemo as useMemo5 } from "react";
+import React70, { useContext as useContext4, useMemo as useMemo5 } from "react";
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-import React62 from "react";
-import classNames21 from "classnames";
+import React68 from "react";
+import classNames25 from "classnames";
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = classNames21(
+  const baseClassName = classNames25(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
-  return /* @__PURE__ */ React62.createElement("div", { className: baseClassName, style: { width, height } });
+  return /* @__PURE__ */ React68.createElement("div", { className: baseClassName, style: { width, height } });
 };
 
 // src/components/ProfitAndLossSummaries/MiniChart.tsx
-import React63 from "react";
+import React69 from "react";
 
 // src/config/charts.ts
 var INACTIVE_OPACITY_LEVELS = [
@@ -4838,7 +5511,7 @@ var DEFAULT_CHART_COLORS = [
 // src/components/ProfitAndLossSummaries/MiniChart.tsx
 import { PieChart, Pie, Cell as Cell2 } from "recharts";
 var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ React63.createElement(PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React69.createElement(PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ React69.createElement(
     Pie,
     {
       data,
@@ -4857,7 +5530,7 @@ var MiniChart = ({ data }) => {
     },
     data.map((entry, index) => {
       const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
-      return /* @__PURE__ */ React63.createElement(
+      return /* @__PURE__ */ React69.createElement(
         Cell2,
         {
           key: `cell-${index}`,
@@ -4871,7 +5544,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames22 from "classnames";
+import classNames26 from "classnames";
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -4918,23 +5591,23 @@ var ProfitAndLossSummaries = ({
   const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const expensesDirectionClass = (data?.income?.value ?? 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__ */ React64.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React70.createElement(
       "div",
       {
-        className: classNames22(
+        className: classNames26(
           "Layer__profit-and-loss-summaries__summary Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
           sidebarScope === "revenue" ? "active" : ""
         ),
         onClick: () => setSidebarScope("revenue")
       },
-      /* @__PURE__ */ React64.createElement(MiniChart, { data: revenueChartData }),
-      /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React64.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React64.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React64.createElement(
+      /* @__PURE__ */ React70.createElement(MiniChart, { data: revenueChartData }),
+      /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React70.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
@@ -4942,18 +5615,18 @@ var ProfitAndLossSummaries = ({
         centsToDollars(Math.abs(data?.income?.value ?? NaN))
       ))
     ),
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React70.createElement(
       "div",
       {
-        className: classNames22(
+        className: classNames26(
           "Layer__profit-and-loss-summaries__summary Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
           sidebarScope === "expenses" ? "active" : ""
         ),
         onClick: () => setSidebarScope("expenses")
       },
-      /* @__PURE__ */ React64.createElement(MiniChart, { data: expensesChartData }),
-      /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React64.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React64.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React64.createElement(
+      /* @__PURE__ */ React70.createElement(MiniChart, { data: expensesChartData }),
+      /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React70.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
@@ -4963,7 +5636,7 @@ var ProfitAndLossSummaries = ({
         )
       ))
     ),
-    /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React64.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React64.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ React70.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React70.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React70.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React70.createElement(
       "span",
       {
         className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
@@ -4974,14 +5647,14 @@ var ProfitAndLossSummaries = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import React67, { useContext as useContext5 } from "react";
+import React73, { useContext as useContext5 } from "react";
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React66, { useState as useState14 } from "react";
+import React72, { useState as useState15 } from "react";
 
 // src/icons/PieChart.tsx
-import * as React65 from "react";
-var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React65.createElement(
+import * as React71 from "react";
+var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React71.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4991,21 +5664,21 @@ var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React65.createEleme
     width: size,
     height: size
   },
-  /* @__PURE__ */ React65.createElement("g", null, /* @__PURE__ */ React65.createElement(
+  /* @__PURE__ */ React71.createElement("g", null, /* @__PURE__ */ React71.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",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React65.createElement(
+  ), /* @__PURE__ */ React71.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",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   ))
 );
@@ -5026,7 +5699,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState14(true);
+  const [expanded, setExpanded] = useState15(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -5057,20 +5730,20 @@ var ProfitAndLossRow = ({
   );
   displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
   displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ React66.createElement(React66.Fragment, null, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: labelClasses.join(" "),
       onClick: () => !lockExpanded && toggleExpanded()
     },
-    /* @__PURE__ */ React66.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React72.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React72.createElement(
       ChevronDownFill_default,
       {
         size: 16,
         className: "Layer__profit-and-loss-row__label__chevron"
       }
-    ) : null, /* @__PURE__ */ React66.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ React66.createElement(
+    ) : null, /* @__PURE__ */ React72.createElement(Text, null, display_name)),
+    setSidebarScope && /* @__PURE__ */ React72.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-row__detailed-chart-btn",
@@ -5079,14 +5752,14 @@ var ProfitAndLossRow = ({
           setSidebarScope && setSidebarScope(scope ?? "expenses");
         }
       },
-      /* @__PURE__ */ React66.createElement(PieChart_default, null)
+      /* @__PURE__ */ React72.createElement(PieChart_default, null)
     )
-  ), /* @__PURE__ */ React66.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React66.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React72.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React72.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ React66.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React72.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React72.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -5156,9 +5829,9 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
   } = useContext5(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ React67.createElement(Loader2, null));
+    return /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ React73.createElement(Loader2, null));
   }
-  return /* @__PURE__ */ React67.createElement(React67.Fragment, null, /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.income,
@@ -5167,7 +5840,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
@@ -5176,7 +5849,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5189,7 +5862,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
@@ -5198,7 +5871,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5211,7 +5884,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.taxes,
@@ -5220,7 +5893,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5231,14 +5904,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React67.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React67.createElement(
+  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React73.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React67.createElement(
+  ), /* @__PURE__ */ React73.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -5279,7 +5952,7 @@ var PNLContext = createContext2({
 });
 var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ React68.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React68.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+  return /* @__PURE__ */ React74.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React74.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -5288,14 +5961,14 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React75, { useContext as useContext7 } from "react";
+import React81, { useContext as useContext7 } from "react";
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import React74, { useContext as useContext6, useState as useState15 } from "react";
+import React80, { useContext as useContext6, useState as useState16 } from "react";
 
 // src/icons/X.tsx
-import * as React69 from "react";
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
+import * as React75 from "react";
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React75.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5305,7 +5978,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React75.createElement(
     "path",
     {
       d: "M13.5 4.5L4.5 13.5",
@@ -5314,7 +5987,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React75.createElement(
     "path",
     {
       d: "M4.5 4.5L13.5 13.5",
@@ -5327,7 +6000,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-import React70, { useMemo as useMemo6 } from "react";
+import React76, { useMemo as useMemo6 } from "react";
 import {
   PieChart as PieChart3,
   Pie as Pie2,
@@ -5361,7 +6034,7 @@ var DetailedChart = ({
       };
     });
   }, [filteredData]);
-  return /* @__PURE__ */ React70.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React70.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ React70.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React70.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React70.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React70.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React70.createElement(PieChart3, null, /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React76.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React76.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ React76.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React76.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React76.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React76.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React76.createElement(PieChart3, null, /* @__PURE__ */ React76.createElement(
     Pie2,
     {
       data: chartData,
@@ -5386,7 +6059,7 @@ var DetailedChart = ({
         fill = void 0;
         opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
       }
-      return /* @__PURE__ */ React70.createElement(
+      return /* @__PURE__ */ React76.createElement(
         Cell3,
         {
           key: `cell-${index}`,
@@ -5398,7 +6071,7 @@ var DetailedChart = ({
         }
       );
     }),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React76.createElement(
       Label,
       {
         position: "center",
@@ -5419,7 +6092,7 @@ var DetailedChart = ({
           if (hoveredItem) {
             text = hoveredItem;
           }
-          return /* @__PURE__ */ React70.createElement(
+          return /* @__PURE__ */ React76.createElement(
             ChartText,
             {
               ...positioningProps,
@@ -5430,7 +6103,7 @@ var DetailedChart = ({
         }
       }
     ),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React76.createElement(
       Label,
       {
         position: "center",
@@ -5453,7 +6126,7 @@ var DetailedChart = ({
               (x) => x.display_name === hoveredItem
             )?.value;
           }
-          return /* @__PURE__ */ React70.createElement(
+          return /* @__PURE__ */ React76.createElement(
             ChartText,
             {
               ...positioningProps,
@@ -5464,7 +6137,7 @@ var DetailedChart = ({
         }
       }
     ),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React76.createElement(
       Label,
       {
         position: "center",
@@ -5483,7 +6156,7 @@ var DetailedChart = ({
             verticalAnchor: "middle"
           };
           if (hoveredItem) {
-            return /* @__PURE__ */ React70.createElement(
+            return /* @__PURE__ */ React76.createElement(
               ChartText,
               {
                 ...positioningProps,
@@ -5502,11 +6175,11 @@ var DetailedChart = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import React72 from "react";
+import React78 from "react";
 
 // src/icons/SortArrows.tsx
-import * as React71 from "react";
-var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElement(
+import * as React77 from "react";
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React77.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5516,44 +6189,44 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React71.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React71.createElement(
+  /* @__PURE__ */ React77.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React77.createElement(
     "path",
     {
       d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       className: "desc-arrow"
     }
-  ), /* @__PURE__ */ React71.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "path",
     {
       d: "M4 2.5L4 11.1667",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       className: "desc-arrow"
     }
-  ), /* @__PURE__ */ React71.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "path",
     {
       d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       className: "asc-arrow"
     }
-  ), /* @__PURE__ */ React71.createElement(
+  ), /* @__PURE__ */ React77.createElement(
     "path",
     {
       d: "M8.66663 11.166L8.66663 2.49935",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
       className: "asc-arrow"
     }
   )),
-  /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React71.createElement(
+  /* @__PURE__ */ React77.createElement("defs", null, /* @__PURE__ */ React77.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React77.createElement(
     "rect",
     {
       width: "12",
@@ -5566,7 +6239,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElem
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-import classNames23 from "classnames";
+import classNames27 from "classnames";
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -5576,52 +6249,52 @@ var DetailedTable = ({
   setHoveredItem
 }) => {
   const buildColClass = (column) => {
-    return classNames23(
+    return classNames27(
       "Layer__sortable-col",
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
   };
-  return /* @__PURE__ */ React72.createElement("div", { className: "details-container" }, /* @__PURE__ */ React72.createElement("div", { className: "table" }, /* @__PURE__ */ React72.createElement("table", null, /* @__PURE__ */ React72.createElement("thead", null, /* @__PURE__ */ React72.createElement("tr", null, /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React78.createElement("div", { className: "details-container" }, /* @__PURE__ */ React78.createElement("div", { className: "table" }, /* @__PURE__ */ React78.createElement("table", null, /* @__PURE__ */ React78.createElement("thead", null, /* @__PURE__ */ React78.createElement("tr", null, /* @__PURE__ */ React78.createElement(
     "th",
     {
       className: buildColClass("category"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "category")
     },
     "Expense/Sale ",
-    /* @__PURE__ */ React72.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ React78.createElement(
     "th",
     {
       className: buildColClass("type"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "type")
     },
     "Type ",
-    /* @__PURE__ */ React72.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ React72.createElement("th", null), /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ React78.createElement("th", null), /* @__PURE__ */ React78.createElement(
     "th",
     {
       className: buildColClass("value"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "value")
     },
     "Value ",
-    /* @__PURE__ */ React72.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ))), /* @__PURE__ */ React72.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+    /* @__PURE__ */ React78.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ))), /* @__PURE__ */ React78.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
     const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
-    return /* @__PURE__ */ React72.createElement(
+    return /* @__PURE__ */ React78.createElement(
       "tr",
       {
         key: `pl-side-table-item-${idx}`,
-        className: classNames23(
+        className: classNames27(
           "Layer__profit-and-loss-detailed-table__row",
           hoveredItem && hoveredItem === item.display_name ? "active" : ""
         ),
         onMouseEnter: () => setHoveredItem(item.display_name),
         onMouseLeave: () => setHoveredItem(void 0)
       },
-      /* @__PURE__ */ React72.createElement("td", { className: "category-col" }, item.display_name),
-      /* @__PURE__ */ React72.createElement("td", { className: "type-col" }, item.type),
-      /* @__PURE__ */ React72.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
-      /* @__PURE__ */ React72.createElement("td", { className: "share-col" }, /* @__PURE__ */ React72.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React72.createElement(
+      /* @__PURE__ */ React78.createElement("td", { className: "category-col" }, item.display_name),
+      /* @__PURE__ */ React78.createElement("td", { className: "type-col" }, item.type),
+      /* @__PURE__ */ React78.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+      /* @__PURE__ */ React78.createElement("td", { className: "share-col" }, /* @__PURE__ */ React78.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React78.createElement(
         "div",
         {
           className: "share-icon",
@@ -5636,16 +6309,16 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/Filters.tsx
-import React73 from "react";
-import Select4, { components as components4 } from "react-select";
+import React79 from "react";
+import Select3, { components as components3 } from "react-select";
 var Filters = ({
   filteredData,
   sidebarScope,
   filters,
   setFilterTypes
 }) => {
-  return /* @__PURE__ */ React73.createElement("div", { className: "filters" }, /* @__PURE__ */ React73.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React73.createElement(
-    Select4,
+  return /* @__PURE__ */ React79.createElement("div", { className: "filters" }, /* @__PURE__ */ React79.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React79.createElement(
+    Select3,
     {
       className: "Layer__select type-select",
       classNamePrefix: "Layer__select",
@@ -5666,15 +6339,15 @@ var Filters = ({
         );
       },
       components: {
-        DropdownIndicator: (props) => /* @__PURE__ */ React73.createElement(components4.DropdownIndicator, { ...props }, /* @__PURE__ */ React73.createElement(ChevronDown_default, null)),
-        Placeholder: (props) => /* @__PURE__ */ React73.createElement(components4.Placeholder, { ...props }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+        DropdownIndicator: (props) => /* @__PURE__ */ React79.createElement(components3.DropdownIndicator, { ...props }, /* @__PURE__ */ React79.createElement(ChevronDown_default, null)),
+        Placeholder: (props) => /* @__PURE__ */ React79.createElement(components3.Placeholder, { ...props }, /* @__PURE__ */ React79.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
       }
     }
   ));
 };
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-import classNames24 from "classnames";
+import classNames28 from "classnames";
 import { format as format6 } from "date-fns";
 var ProfitAndLossDetailedCharts = () => {
   const {
@@ -5688,31 +6361,24 @@ var ProfitAndLossDetailedCharts = () => {
     setSidebarScope,
     setFilterTypes
   } = useContext6(ProfitAndLoss.Context);
-  const [hoveredItem, setHoveredItem] = useState15();
-  return /* @__PURE__ */ React74.createElement(
+  const [hoveredItem, setHoveredItem] = useState16();
+  return /* @__PURE__ */ React80.createElement(
     "div",
     {
-      className: classNames24(
+      className: classNames28(
         "Layer__profit-and-loss__side-panel",
         sidebarScope && "open"
       )
     },
-    /* @__PURE__ */ React74.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React74.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React74.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React74.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React74.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ React74.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React80.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React80.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React80.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ React80.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React80.createElement(
       Button,
       {
-        rightIcon: /* @__PURE__ */ React74.createElement(X_default, null),
+        rightIcon: /* @__PURE__ */ React80.createElement(X_default, null),
         iconOnly: true,
         onClick: () => setSidebarScope(void 0),
         variant: "secondary" /* secondary */
       }
-    )), /* @__PURE__ */ React74.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ React74.createElement(
-      Button,
-      {
-        onClick: () => setSidebarScope(void 0),
-        variant: "secondary" /* secondary */
-      },
-      "Back"
-    )), /* @__PURE__ */ React74.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ React74.createElement(
+    )), /* @__PURE__ */ React80.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ React80.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ React80.createElement(
       DetailedChart,
       {
         filteredData,
@@ -5722,7 +6388,7 @@ var ProfitAndLossDetailedCharts = () => {
         sidebarScope,
         date: dateRange.startDate
       }
-    ), /* @__PURE__ */ React74.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ React74.createElement(
+    ), /* @__PURE__ */ React80.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ React80.createElement(
       Filters,
       {
         filteredData,
@@ -5730,7 +6396,7 @@ var ProfitAndLossDetailedCharts = () => {
         filters,
         setFilterTypes
       }
-    ), /* @__PURE__ */ React74.createElement(
+    ), /* @__PURE__ */ React80.createElement(
       DetailedTable,
       {
         filteredData,
@@ -5747,7 +6413,7 @@ var ProfitAndLossDetailedCharts = () => {
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ React75.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React75.createElement(ProfitAndLoss, null, /* @__PURE__ */ React75.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ React75.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React75.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React75.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ React75.createElement(ProfitAndLossDetailedCharts, null)));
+  return /* @__PURE__ */ React81.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React81.createElement(ProfitAndLoss, null, /* @__PURE__ */ React81.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ React81.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React81.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React81.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ React81.createElement(ProfitAndLossDetailedCharts, null)));
 };
 var Components = ({
   hideChart = false,
@@ -5757,7 +6423,7 @@ var Components = ({
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React75.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React75.createElement(
+    return /* @__PURE__ */ React81.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React81.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -5768,49 +6434,123 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ React75.createElement(React75.Fragment, null, !hideChart && /* @__PURE__ */ React75.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React81.createElement(React81.Fragment, null, !hideChart && /* @__PURE__ */ React81.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React81.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React75.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React75.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React81.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React81.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ React81.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React75.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ React75.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ React81.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React81.createElement(ProfitAndLoss.Table, null));
 };
 
 // src/components/LedgerAccounts/LedgerAccounts.tsx
-import React82, { createContext as createContext3, useContext as useContext12 } from "react";
+import React88, { createContext as createContext3, useContext as useContext12 } from "react";
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useState as useState16 } from "react";
-import useSWR5 from "swr";
+import { useState as useState17 } from "react";
+import useSWR6 from "swr";
+var validate = (formData) => {
+  const errors = [];
+  const nameError = validateName(formData);
+  if (nameError) {
+    errors.push(nameError);
+  }
+  return errors;
+};
+var revalidateField = (fieldName, formData) => {
+  switch (fieldName) {
+    case "name":
+      const nameError = validateName(formData);
+      if (nameError) {
+        return (formData?.errors || []).filter((x) => x.field !== fieldName).concat([nameError]);
+      }
+      return (formData?.errors || []).filter((x) => x.field !== fieldName);
+    default:
+      return formData?.errors;
+  }
+};
+var validateName = (formData) => {
+  if (!formData?.data.name?.trim()) {
+    return {
+      field: "name",
+      message: "Cannot be blank"
+    };
+  }
+  return;
+};
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [form, setForm] = useState16();
-  const [showARForAccountId, setShowARForAccountId] = useState16();
-  const { data, isLoading, isValidating, error, mutate } = useSWR5(
+  const [form, setForm] = useState17();
+  const [sendingForm, setSendingForm] = useState17(false);
+  const [apiError, setApiError] = useState17(void 0);
+  const [showARForAccountId, setShowARForAccountId] = useState17();
+  const { data, isLoading, isValidating, error, mutate } = useSWR6(
     businessId && auth?.access_token && `ledger-accounts-${businessId}`,
     Layer.getLedgerAccounts(apiUrl, auth?.access_token, {
       params: { businessId }
     })
   );
-  const create = (newAccount) => {
-    Layer.createAccount(apiUrl, auth?.access_token, {
-      params: { businessId },
-      body: newAccount
-    }).then(({ data: data2 }) => (mutate(), data2));
+  const create = async (newAccount) => {
+    setSendingForm(true);
+    setApiError(void 0);
+    try {
+      await Layer.createAccount(apiUrl, auth?.access_token, {
+        params: { businessId },
+        body: newAccount
+      });
+      await refetch();
+      setForm(void 0);
+    } catch (_err) {
+      setApiError("Submit failed. Please, check your connection and try again.");
+    } finally {
+      setSendingForm(false);
+    }
+  };
+  const update = async (accountData, accountId) => {
+    setSendingForm(true);
+    setApiError(void 0);
+    const stable_name = convertToStableName(accountData.name);
+    const newAccountData = {
+      ...accountData,
+      stable_name,
+      pnl_category: "INCOME",
+      //this field will be deprecated soon, but is still required
+      always_show_in_pnl: false
+      //this field will be deprecated soon, but is still required
+    };
+    try {
+      await Layer.updateAccount(apiUrl, auth?.access_token, {
+        params: { businessId, accountId },
+        body: newAccountData
+      });
+      await refetch();
+      setForm(void 0);
+    } catch (_err) {
+      setApiError("Submit failed. Please, check your connection and try again.");
+    } finally {
+      setSendingForm(false);
+    }
   };
   const submitForm = () => {
     if (!form || !form.action) {
       return;
     }
+    const errors = validate(form);
+    if (errors.length > 0) {
+      setForm({
+        ...form,
+        errors
+      });
+      return;
+    }
     const data2 = {
       name: form.data.name || "Test name",
       normality: form.data.subType?.value,
@@ -5825,6 +6565,7 @@ var useLedgerAccounts = () => {
       return;
     }
     if (form.action === "edit" && form.accountId) {
+      update(data2, form.accountId);
       return;
     }
   };
@@ -5874,12 +6615,17 @@ var useLedgerAccounts = () => {
     if (!form) {
       return;
     }
-    setForm({
+    const newFormData = {
       ...form,
       data: {
         ...form.data,
         [fieldName]: value
       }
+    };
+    const errors = revalidateField(fieldName, newFormData);
+    setForm({
+      ...newFormData,
+      errors
     });
   };
   const refetch = () => mutate();
@@ -5891,6 +6637,8 @@ var useLedgerAccounts = () => {
     refetch,
     create,
     form,
+    sendingForm,
+    apiError,
     addAccount,
     editAccount,
     cancelForm,
@@ -5902,8 +6650,8 @@ var useLedgerAccounts = () => {
 };
 
 // src/components/AccountsReceivable/AccountsReceivableIndex.tsx
-import React76, { useContext as useContext8, useMemo as useMemo7 } from "react";
-import classNames25 from "classnames";
+import React82, { useContext as useContext8, useMemo as useMemo7 } from "react";
+import classNames29 from "classnames";
 import { parseISO as parseISO9, format as formatTime7 } from "date-fns";
 var AccountsReceivable = () => {
   const { data, showARForAccountId, setShowARForAccountId } = useContext8(
@@ -5914,33 +6662,33 @@ var AccountsReceivable = () => {
       (x) => x.id === showARForAccountId
     );
   }, [showARForAccountId]);
-  const baseClassName = classNames25(
+  const baseClassName = classNames29(
     "Layer__accounts-receivable__index",
     showARForAccountId && "open"
   );
   const close = () => setShowARForAccountId(void 0);
-  return /* @__PURE__ */ React76.createElement("div", { className: baseClassName }, /* @__PURE__ */ React76.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ React76.createElement(Button, { onClick: close, variant: "secondary" /* secondary */ }, "Back"), /* @__PURE__ */ React76.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React82.createElement("div", { className: baseClassName }, /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ React82.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ React82.createElement(
     Text,
     {
       weight: "bold" /* bold */,
       className: "Layer__accounts-receivable__title"
     },
     entry?.name || ""
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React76.createElement(DownloadCloud_default, { size: 12 })
+      rightIcon: /* @__PURE__ */ React82.createElement(DownloadCloud_default, { size: 12 })
     },
     "Download"
-  )), /* @__PURE__ */ React76.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ React76.createElement(
+  )), /* @__PURE__ */ React82.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ React82.createElement(
     Text,
     {
       weight: "bold" /* bold */,
       className: "Layer__accounts-receivable__balance-label"
     },
     "Current balance"
-  ), /* @__PURE__ */ React76.createElement(
+  ), /* @__PURE__ */ React82.createElement(
     Text,
     {
       weight: "bold" /* bold */,
@@ -5948,17 +6696,17 @@ var AccountsReceivable = () => {
     },
     "$",
     centsToDollars(entry?.balance || 0)
-  ))), /* @__PURE__ */ React76.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ React76.createElement("thead", null, /* @__PURE__ */ React76.createElement("tr", null, /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ React76.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ React76.createElement("tbody", null, entry?.entries?.map((x) => {
-    return /* @__PURE__ */ React76.createElement("tr", { key: x.id }, /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && formatTime7(parseISO9(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " TBD")), /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ React76.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React76.createElement("span", { className: "Layer__table-cell-content" }, "TBD")));
+  ))), /* @__PURE__ */ React82.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ React82.createElement("thead", null, /* @__PURE__ */ React82.createElement("tr", null, /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ React82.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ React82.createElement("tbody", null, entry?.entries?.map((x) => {
+    return /* @__PURE__ */ React82.createElement("tr", { key: x.id }, /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && formatTime7(parseISO9(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "#123")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "Invoice")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " $X,XXX.XX")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")), /* @__PURE__ */ React82.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ React82.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")));
   }))));
 };
 
 // src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
-import React79, { useContext as useContext9, useState as useState17 } from "react";
+import React85, { useContext as useContext9, useEffect as useEffect11, useState as useState18 } from "react";
 
 // src/icons/ArrowRightCircle.tsx
-import * as React77 from "react";
-var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React77.createElement(
+import * as React83 from "react";
+var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5968,39 +6716,39 @@ var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React77.crea
     width: size,
     height: size
   },
-  /* @__PURE__ */ React77.createElement(
+  /* @__PURE__ */ React83.createElement(
     "path",
     {
       d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React77.createElement(
+  /* @__PURE__ */ React83.createElement(
     "path",
     {
       d: "M9 12L12 9L9 6",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React77.createElement(
+  /* @__PURE__ */ React83.createElement(
     "path",
     {
       d: "M6 9H12",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
 var ArrowRightCircle_default = ArrowRightCircle;
 
 // src/icons/Edit2.tsx
-import * as React78 from "react";
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React78.createElement(
+import * as React84 from "react";
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6010,54 +6758,97 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React78.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React78.createElement(
+  /* @__PURE__ */ React84.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",
       stroke: "currentColor",
-      "stroke-linecap": "round",
-      "stroke-linejoin": "round"
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
 var Edit2_default = Edit2;
 
 // src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
-import classNames26 from "classnames";
+import classNames30 from "classnames";
 var INDENTATION = 12;
+var EXPANDED_STYLE = {
+  height: 52,
+  paddingTop: 12,
+  paddingBottom: 12,
+  opacity: 1
+};
+var COLLAPSED_STYLE = {
+  height: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+  opacity: 0.5
+};
 var LedgerAccountsRow = ({
   account,
-  depth = 0
+  depth = 0,
+  index,
+  cumulativeIndex = 0,
+  expanded = false,
+  defaultOpen = false,
+  acountsLength
 }) => {
   const { form, editAccount, setShowARForAccountId } = useContext9(
     LedgerAccountsContext
   );
-  const [isOpen, setIsOpen] = useState17(false);
-  const baseClass = classNames26(
-    "Layer__alt-table-row",
-    isOpen ? "Layer__alt-table-row--expanded" : "Layer__alt-table-row--collapsed",
-    `Layer__alt-table-row--depth-${depth}`,
-    form?.accountId === account.id && "active"
+  const [isOpen, setIsOpen] = useState18(defaultOpen);
+  const style = expanded ? {
+    ...EXPANDED_STYLE,
+    transitionDelay: `${15 * index}ms`
+  } : {
+    ...COLLAPSED_STYLE,
+    transitionDelay: `${acountsLength - 15 * index}ms`
+  };
+  const [showComponent, setShowComponent] = useState18(false);
+  useEffect11(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, cumulativeIndex * 50);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  const baseClass = classNames30(
+    "Layer__table-row",
+    isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
+    !expanded && "Layer__table-row--hidden",
+    `Layer__table-row--depth-${depth}`,
+    form?.accountId === account.id && "Layer__table-row--active",
+    !showComponent && "Layer__table-row--anim-starting-state"
   );
-  return /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement("div", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ React79.createElement(
-    "div",
+  return /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement("tr", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React85.createElement(
+    "span",
     {
-      className: "Layer__alt-table__cell Layer__coa__name",
-      style: { paddingLeft: INDENTATION * depth + 16 }
+      className: "Layer__table-cell-content-indentation",
+      style: {
+        paddingLeft: INDENTATION * depth + 16
+      }
     },
-    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React79.createElement(
+    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React85.createElement(
       ChevronDownFill_default,
       {
         size: 16,
-        className: "Layer__alt-table__expand-icon"
+        className: "Layer__table__expand-icon"
       }
     ),
-    /* @__PURE__ */ React79.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-  ), /* @__PURE__ */ React79.createElement("div", { className: "Layer__alt-table__cell Layer__coa__type" }, account.normality), /* @__PURE__ */ React79.createElement("div", { className: "Layer__alt-table__cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ React79.createElement("div", { className: "Layer__alt-table__cell Layer__coa__balance" }, "$", centsToDollars(Math.abs(account.balance || 0))), /* @__PURE__ */ React79.createElement("div", { className: "Layer__alt-table__cell Layer__coa__actions" }, /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React85.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+  ))), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, account.normality)), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__subtype" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React85.createElement(
+    "span",
+    {
+      className: "Layer__table-cell-content Layer__table-cell--amount",
+      style
+    },
+    "$",
+    centsToDollars(Math.abs(account.balance || 0))
+  )), /* @__PURE__ */ React85.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React85.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React85.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React79.createElement(Edit2_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ React85.createElement(Edit2_default, { size: 12 }),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -6065,11 +6856,11 @@ var LedgerAccountsRow = ({
       }
     },
     "Edit"
-  ), /* @__PURE__ */ React79.createElement(
+  ), /* @__PURE__ */ React85.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React79.createElement(ArrowRightCircle_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ React85.createElement(ArrowRightCircle_default, { size: 12 }),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -6077,21 +6868,25 @@ var LedgerAccountsRow = ({
       }
     },
     "Open"
-  ))), isOpen && (account.sub_accounts || []).map((subAccount) => /* @__PURE__ */ React79.createElement(
+  )))), (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React85.createElement(
     LedgerAccountsRow,
     {
       key: subAccount.id,
       account: subAccount,
-      depth: depth + 1
+      depth: depth + 1,
+      index: idx,
+      expanded: isOpen && expanded,
+      cumulativeIndex: cumulativeIndex + idx + 1,
+      acountsLength: (account.sub_accounts ?? []).length
     }
   )));
 };
 
 // src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
-import React81, { useContext as useContext11 } from "react";
+import React87, { useContext as useContext11 } from "react";
 
 // src/components/LedgerAccountsForm/LedgerAccountsForm.tsx
-import React80, { useContext as useContext10, useMemo as useMemo8 } from "react";
+import React86, { useContext as useContext10, useMemo as useMemo8 } from "react";
 var SUB_TYPE_OPTIONS = [
   {
     value: "DEBIT" /* DEBIT */,
@@ -6103,9 +6898,15 @@ var SUB_TYPE_OPTIONS = [
   }
 ];
 var LedgerAccountsForm = () => {
-  const { form, data, changeFormData, cancelForm, submitForm } = useContext10(
-    LedgerAccountsContext
-  );
+  const {
+    form,
+    data,
+    changeFormData,
+    cancelForm,
+    submitForm,
+    sendingForm,
+    apiError
+  } = useContext10(LedgerAccountsContext);
   const parentOptions = useMemo8(
     () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
       return {
@@ -6123,81 +6924,115 @@ var LedgerAccountsForm = () => {
     }
     return;
   }, [data, form?.accountId]);
-  console.log(entry);
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "form",
     {
+      className: "Layer__form",
       onSubmit: (e) => {
         e.preventDefault();
         submitForm();
       }
     },
-    /* @__PURE__ */ React80.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ React80.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ React80.createElement("div", { className: "actions" }, /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ React86.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ React86.createElement("div", { className: "actions" }, /* @__PURE__ */ React86.createElement(
       Button,
       {
         type: "button",
         onClick: cancelForm,
-        variant: "secondary" /* secondary */
+        variant: "secondary" /* secondary */,
+        disabled: sendingForm
       },
       "Cancel"
-    ), /* @__PURE__ */ React80.createElement(SubmitButton, { type: "submit", noIcon: true, active: true }, "Save"))),
-    entry && /* @__PURE__ */ React80.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ React80.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React80.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ React80.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ React80.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ React80.createElement(
-      Select3,
+    ), apiError && /* @__PURE__ */ React86.createElement(
+      RetryButton,
+      {
+        type: "submit",
+        processing: sendingForm,
+        error: "Check connection and retry in few seconds.",
+        disabled: sendingForm
+      },
+      "Retry"
+    ), !apiError && /* @__PURE__ */ React86.createElement(
+      SubmitButton,
+      {
+        type: "submit",
+        noIcon: true,
+        active: true,
+        disabled: sendingForm
+      },
+      "Save"
+    ))),
+    apiError && /* @__PURE__ */ React86.createElement(
+      Text,
+      {
+        size: "sm" /* sm */,
+        className: "Layer__ledger-accounts__form__error-message"
+      },
+      apiError
+    ),
+    entry && /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React86.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ React86.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ React86.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ React86.createElement(
+      Select2,
       {
         options: parentOptions,
         value: form?.data.parent,
-        onChange: (sel) => changeFormData("parent", sel)
+        onChange: (sel) => changeFormData("parent", sel),
+        disabled: sendingForm
       }
-    )), /* @__PURE__ */ React80.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ React80.createElement(
+    )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ React86.createElement(
       Input,
       {
         name: "name",
+        placeholder: "Enter name...",
         value: form?.data.name,
+        isInvalid: Boolean(form?.errors?.find((x) => x.field === "name")),
+        errorMessage: form?.errors?.find((x) => x.field === "name")?.message,
+        disabled: sendingForm,
         onChange: (e) => changeFormData("name", e.target.value)
       }
-    )), /* @__PURE__ */ React80.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ React80.createElement(
-      Select3,
+    )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ React86.createElement(
+      Select2,
       {
         options: [],
         disabled: true,
         value: form?.data.type,
         onChange: (sel) => changeFormData("type", sel)
       }
-    )), /* @__PURE__ */ React80.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ React80.createElement(
-      Select3,
+    )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ React86.createElement(
+      Select2,
       {
         options: SUB_TYPE_OPTIONS,
         value: form?.data.subType,
-        onChange: (sel) => changeFormData("subType", sel)
+        onChange: (sel) => changeFormData("subType", sel),
+        disabled: sendingForm
       }
-    )), /* @__PURE__ */ React80.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ React80.createElement(
-      Select3,
+    )), /* @__PURE__ */ React86.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ React86.createElement(
+      Select2,
       {
         options: [],
         value: form?.data.category,
-        onChange: (sel) => changeFormData("category", sel)
+        onChange: (sel) => changeFormData("category", sel),
+        disabled: sendingForm
       }
     )))
   );
 };
 
 // src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
-import classNames27 from "classnames";
+import classNames31 from "classnames";
 var LedgerAccountsSidebar = () => {
   const { form } = useContext11(LedgerAccountsContext);
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "div",
     {
-      className: classNames27(
+      className: classNames31(
         "Layer__ledger-accounts__sidebar",
         form ? "open" : ""
       )
     },
-    /* @__PURE__ */ React81.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ React81.createElement(LedgerAccountsForm, null))
+    /* @__PURE__ */ React87.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ React87.createElement(LedgerAccountsForm, null))
   );
 };
 
@@ -6213,6 +7048,8 @@ var LedgerAccountsContext = createContext3({
   create: () => {
   },
   form: void 0,
+  sendingForm: false,
+  apiError: void 0,
   addAccount: () => {
   },
   editAccount: () => {
@@ -6229,19 +7066,37 @@ var LedgerAccountsContext = createContext3({
 });
 var LedgerAccounts = () => {
   const contextData = useLedgerAccounts();
-  return /* @__PURE__ */ React82.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ React82.createElement(LedgerAccountsContent, null));
+  return /* @__PURE__ */ React88.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ React88.createElement(LedgerAccountsContent, null));
 };
 var LedgerAccountsContent = () => {
   const { data, isLoading, addAccount, error, isValidating, refetch } = useContext12(LedgerAccountsContext);
-  return /* @__PURE__ */ React82.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ React82.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ React82.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ React82.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ React82.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ React82.createElement(
+  let cumulativeIndex = 0;
+  const accountsLength = data?.accounts.length ?? 0;
+  return /* @__PURE__ */ React88.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ React88.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ React88.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ React88.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
       disabled: isLoading,
-      rightIcon: /* @__PURE__ */ React82.createElement(DownloadCloud_default, { size: 12 })
+      rightIcon: /* @__PURE__ */ React88.createElement(DownloadCloud_default, { size: 12 })
     },
     "Download"
-  ), /* @__PURE__ */ React82.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ React82.createElement("div", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table-row Layer__alt-table-row--header" }, /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__name" }, "Name"), /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__type" }, "Type"), /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__balance" }, "Balance"), /* @__PURE__ */ React82.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__actions" })), error ? /* @__PURE__ */ React82.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React82.createElement(
+  ), /* @__PURE__ */ React88.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ React88.createElement("table", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ React88.createElement("thead", null, /* @__PURE__ */ React88.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ React88.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React88.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
+    const currentCumulativeIndex = cumulativeIndex;
+    cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
+    return /* @__PURE__ */ React88.createElement(
+      LedgerAccountsRow,
+      {
+        key: account.id,
+        account,
+        depth: 0,
+        index: idx,
+        cumulativeIndex: currentCumulativeIndex,
+        expanded: true,
+        defaultOpen: true,
+        acountsLength: accountsLength
+      }
+    );
+  }))), error ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -6250,7 +7105,7 @@ var LedgerAccountsContent = () => {
       onRefresh: () => refetch(),
       isLoading: isValidating || isLoading
     }
-  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React82.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React82.createElement(Loader2, null)) : null, !error && data?.accounts.map((account) => /* @__PURE__ */ React82.createElement(LedgerAccountsRow, { key: account.id, account, depth: 0 })), !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React82.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React82.createElement(
+  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React88.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React88.createElement(Loader2, null)) : null, !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React88.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React88.createElement(
     DataState,
     {
       status: "info" /* info */,
@@ -6259,13 +7114,13 @@ var LedgerAccountsContent = () => {
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  )) : null)), /* @__PURE__ */ React82.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ React82.createElement(AccountsReceivable, null));
+  )) : null), /* @__PURE__ */ React88.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ React88.createElement(AccountsReceivable, null));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React83, { useReducer, useEffect as useEffect9 } from "react";
+import React89, { useReducer, useEffect as useEffect12 } from "react";
 import { add as add2, isBefore } from "date-fns";
-import useSWR6, { SWRConfig } from "swr";
+import useSWR7, { SWRConfig } from "swr";
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -6318,7 +7173,7 @@ var LayerProvider = ({
     theme,
     colors
   });
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR6(
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? useSWR7(
     businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && isBefore(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
@@ -6328,7 +7183,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  useEffect9(() => {
+  useEffect12(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -6353,7 +7208,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  useSWR6(
+  useSWR7(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     {
@@ -6378,7 +7233,7 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ React83.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React83.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ React89.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React89.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 export {
   BalanceSheet,