@layerfi/components 0.1.9 → 0.1.10

package/dist/index.js

@@ -304,6 +304,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`
@@ -311,6 +316,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(
@@ -323,11 +331,13 @@ var Layer = {
   categorizeBankTransaction,
   matchBankTransaction,
   createAccount,
+  updateAccount,
   getBalanceSheet,
   getBankTransactions,
   getCategories,
   getLedgerAccounts,
-  getProfitAndLoss
+  getProfitAndLoss,
+  getLinkedAccounts
 };
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -778,6 +788,7 @@ 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
 var import_react36 = __toESM(require("react"));
@@ -983,7 +994,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React10.createElemen
 var Scissors_default = Scissors;
 
 // src/components/Badge/Badge.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 
 // src/components/Button/Button.tsx
 var import_react8 = __toESM(require("react"));
@@ -1502,8 +1513,47 @@ var TextButton = ({
   return /* @__PURE__ */ import_react16.default.createElement("button", { ...props, className: baseClassName }, children);
 };
 
-// src/components/Badge/Badge.tsx
+// src/components/Button/BackButton.tsx
+var import_react17 = __toESM(require("react"));
+
+// src/icons/BackArrow.tsx
+var React22 = __toESM(require("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
 var import_classnames6 = __toESM(require("classnames"));
+var BackButton = ({
+  className,
+  children,
+  textOnly = false,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames6.default)("Layer__btn", "Layer__back-btn", className);
+  return /* @__PURE__ */ import_react17.default.createElement("button", { ...props, className: baseClassName }, textOnly ? "Back" : /* @__PURE__ */ import_react17.default.createElement(BackArrow_default, { size: 16 }));
+};
+
+// src/components/Badge/Badge.tsx
+var import_classnames7 = __toESM(require("classnames"));
 var Badge = ({
   icon,
   onClick,
@@ -1512,7 +1562,7 @@ var Badge = ({
   size = "medium" /* MEDIUM */
 }) => {
   const baseProps = {
-    className: (0, import_classnames6.default)(
+    className: (0, import_classnames7.default)(
       "Layer__badge",
       onClick || tooltip ? "Layer__badge--clickable" : "",
       `Layer__badge--${size}`
@@ -1520,21 +1570,21 @@ var Badge = ({
     onClick,
     children
   };
-  let content = /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, icon && /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__badge__icon" }, icon), children);
-  content = onClick ? /* @__PURE__ */ import_react17.default.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ import_react17.default.createElement("span", { ...baseProps }, content);
+  let content = /* @__PURE__ */ import_react18.default.createElement(import_react18.default.Fragment, null, icon && /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__badge__icon" }, icon), children);
+  content = onClick ? /* @__PURE__ */ import_react18.default.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ import_react18.default.createElement("span", { ...baseProps }, content);
   if (tooltip) {
-    return /* @__PURE__ */ import_react17.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react17.default.createElement(TooltipTrigger, null, content), /* @__PURE__ */ import_react17.default.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
+    return /* @__PURE__ */ import_react18.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react18.default.createElement(TooltipTrigger, null, content), /* @__PURE__ */ import_react18.default.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
   }
   return content;
 };
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_react_select = __toESM(require("react-select"));
 
 // src/icons/Check.tsx
-var React23 = __toESM(require("react"));
-var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
+var React25 = __toESM(require("react"));
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1544,7 +1594,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",
@@ -1557,8 +1607,8 @@ var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
 var Check_default = Check;
 
 // src/icons/MinimizeTwo.tsx
-var React24 = __toESM(require("react"));
-var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+var React26 = __toESM(require("react"));
+var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React26.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1568,7 +1618,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",
@@ -1577,7 +1627,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement(
     "path",
     {
       d: "M15 7.5H10.5V3",
@@ -1586,7 +1636,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",
@@ -1595,7 +1645,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",
@@ -1608,7 +1658,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createEle
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_classnames7 = __toESM(require("classnames"));
+var import_classnames8 = __toESM(require("classnames"));
 var import_date_fns4 = require("date-fns");
 var mapCategoryToOption = (category) => {
   return {
@@ -1636,13 +1686,13 @@ var mapSuggestedMatchToOption = (record) => {
   };
 };
 var DropdownIndicator = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react18.default.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react19.default.createElement(ChevronDown_default, null));
 };
 var GroupHeading = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_react_select.components.GroupHeading,
     {
-      className: (0, import_classnames7.default)(
+      className: (0, import_classnames8.default)(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       ),
@@ -1655,24 +1705,24 @@ var Option = (props) => {
     return;
   }
   if (props.data.type === "match") {
-    return /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement(
       import_react_select.components.Option,
       {
         ...props,
         className: `${props.className} Layer__select__option-content__match`
       },
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
-      /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ import_react19.default.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
+      /* @__PURE__ */ import_react19.default.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ import_react19.default.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
     );
   }
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_react_select.components.Option,
     {
       ...props,
       className: `Layer__select__option-menu-content ${props.className}`
     },
-    /* @__PURE__ */ import_react18.default.createElement("div", null, props.data.payload.display_name),
-    props.isSelected ? /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ import_react18.default.createElement(Check_default, { size: 16 })) : null
+    /* @__PURE__ */ import_react19.default.createElement("div", null, props.data.payload.display_name),
+    props.isSelected ? /* @__PURE__ */ import_react19.default.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ import_react19.default.createElement(Check_default, { size: 16 })) : null
   );
 };
 var allCategoriesDivider = [
@@ -1755,17 +1805,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__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_react_select.default,
     {
       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__ */ import_react18.default.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ import_react18.default.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ import_react18.default.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ import_react18.default.createElement("span", null, props.payload.display_name)),
+      formatOptionLabel: (props) => /* @__PURE__ */ import_react19.default.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ import_react19.default.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ import_react19.default.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ import_react19.default.createElement("span", null, props.payload.display_name)),
       value,
       onChange: (newValue) => newValue && onChange(newValue),
       getOptionLabel: (category) => category.payload.display_name,
@@ -1785,8 +1838,8 @@ var CategorySelect = ({
 var import_react32 = __toESM(require("react"));
 
 // src/icons/ScissorsFullOpen.tsx
-var React26 = __toESM(require("react"));
-var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.createElement(
+var React28 = __toESM(require("react"));
+var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React28.createElement(
   "svg",
   {
     viewBox: "0 0 12 12",
@@ -1796,7 +1849,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",
@@ -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_2",
@@ -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_3",
@@ -1823,7 +1876,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_4",
@@ -1832,7 +1885,7 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React26.createElement(
+  ), /* @__PURE__ */ React28.createElement(
     "path",
     {
       id: "Vector_5",
@@ -1846,8 +1899,8 @@ var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.crea
 var ScissorsFullOpen_default = ScissorsFullOpen;
 
 // src/icons/Trash.tsx
-var React27 = __toESM(require("react"));
-var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
+var React29 = __toESM(require("react"));
+var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React29.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1857,7 +1910,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",
@@ -1866,7 +1919,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",
@@ -1875,7 +1928,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M7.5 8.25V12.75",
@@ -1884,7 +1937,7 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React27.createElement(
+  /* @__PURE__ */ React29.createElement(
     "path",
     {
       d: "M10.5 8.25V12.75",
@@ -1896,63 +1949,9 @@ var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
 );
 var Trash_default = Trash;
 
-// src/components/CategoryMenu/CategoryMenu.tsx
-var import_react19 = __toESM(require("react"));
-var import_react_select2 = __toESM(require("react-select"));
-var DropdownIndicator2 = (props) => {
-  return /* @__PURE__ */ import_react19.default.createElement(import_react_select2.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react19.default.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__ */ import_react19.default.createElement(
-    import_react_select2.default,
-    {
-      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
 var import_react20 = __toESM(require("react"));
-var import_classnames8 = __toESM(require("classnames"));
+var import_classnames9 = __toESM(require("classnames"));
 var Input = ({
   className,
   isInvalid,
@@ -1960,7 +1959,7 @@ var Input = ({
   leftText,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames8.default)(
+  const baseClassName = (0, import_classnames9.default)(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
     leftText ? "Layer__input--with-left-text" : "",
@@ -1974,7 +1973,7 @@ var import_react24 = __toESM(require("react"));
 
 // src/components/Typography/Text.tsx
 var import_react21 = __toESM(require("react"));
-var import_classnames9 = __toESM(require("classnames"));
+var import_classnames10 = __toESM(require("classnames"));
 var Text = ({
   as: Component = "p",
   className,
@@ -1984,7 +1983,7 @@ var Text = ({
   withTooltip,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames9.default)(
+  const baseClassName = (0, import_classnames10.default)(
     `Layer__text Layer__text--${size} Layer__text--${weight}`,
     className
   );
@@ -2032,7 +2031,7 @@ var TextWithTooltip = ({
     []
   );
   const [hoverStatus, setHover] = (0, import_react21.useState)(false);
-  const contentClassName = (0, import_classnames9.default)(
+  const contentClassName = (0, import_classnames10.default)(
     "Layer__tooltip",
     tooltipOptions?.contentClassName
   );
@@ -2050,14 +2049,14 @@ var TextWithTooltip = ({
 
 // src/components/Typography/Heading.tsx
 var import_react22 = __toESM(require("react"));
-var import_classnames10 = __toESM(require("classnames"));
+var import_classnames11 = __toESM(require("classnames"));
 var Heading = ({
   as: Component = "h2",
   className,
   children,
   size = "primary" /* primary */
 }) => {
-  const baseClassName = (0, import_classnames10.default)(
+  const baseClassName = (0, import_classnames11.default)(
     `Layer__heading Layer__heading--${size}`,
     className
   );
@@ -2066,14 +2065,14 @@ var Heading = ({
 
 // src/components/Typography/ErrorText.tsx
 var import_react23 = __toESM(require("react"));
-var import_classnames11 = __toESM(require("classnames"));
+var import_classnames12 = __toESM(require("classnames"));
 var ErrorText = ({ className, ...props }) => {
-  const baseClassName = (0, import_classnames11.default)("Layer__text--error", className);
+  const baseClassName = (0, import_classnames12.default)("Layer__text--error", className);
   return /* @__PURE__ */ import_react23.default.createElement(Text, { ...props, className: baseClassName });
 };
 
 // src/components/Input/InputGroup.tsx
-var import_classnames12 = __toESM(require("classnames"));
+var import_classnames13 = __toESM(require("classnames"));
 var InputGroup = ({
   label,
   name,
@@ -2081,7 +2080,7 @@ var InputGroup = ({
   inline,
   children
 }) => {
-  const baseClassName = (0, import_classnames12.default)(
+  const baseClassName = (0, import_classnames13.default)(
     "Layer__input-group",
     className,
     inline && "Layer__input-group--inline"
@@ -2102,8 +2101,8 @@ var InputGroup = ({
 var import_react25 = __toESM(require("react"));
 
 // src/icons/UploadCloud.tsx
-var React34 = __toESM(require("react"));
-var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createElement(
+var React35 = __toESM(require("react"));
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2113,7 +2112,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",
@@ -2122,7 +2121,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M9 9V15.75",
@@ -2131,7 +2130,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",
@@ -2140,7 +2139,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React34.createElement(
+  /* @__PURE__ */ React35.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -2187,11 +2186,11 @@ var FileInput = ({ text = "Upload", onUpload }) => {
 
 // src/components/Input/Select.tsx
 var import_react26 = __toESM(require("react"));
-var import_react_select3 = __toESM(require("react-select"));
-var DropdownIndicator3 = (props) => {
-  return /* @__PURE__ */ import_react26.default.createElement(import_react_select3.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react26.default.createElement(ChevronDownFill_default, null));
+var import_react_select2 = __toESM(require("react-select"));
+var DropdownIndicator2 = (props) => {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_select2.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react26.default.createElement(ChevronDownFill_default, null));
 };
-var Select3 = ({
+var Select2 = ({
   name,
   options,
   className,
@@ -2201,7 +2200,7 @@ var Select3 = ({
   disabled
 }) => {
   return /* @__PURE__ */ import_react26.default.createElement(
-    import_react_select3.default,
+    import_react_select2.default,
     {
       name,
       className: `Layer__select ${className ?? ""}`,
@@ -2211,7 +2210,7 @@ var Select3 = ({
       onChange: (newValue) => newValue && onChange(newValue),
       menuPortalTarget: document.body,
       styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
-      components: { DropdownIndicator: DropdownIndicator3 },
+      components: { DropdownIndicator: DropdownIndicator2 },
       isDisabled: disabled
     }
   );
@@ -2230,12 +2229,12 @@ var MatchBadge = ({
   text = "Match"
 }) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
-    const { date, amount, description } = bankTransaction.match.bank_transaction;
+    const { date, amount } = bankTransaction.match.bank_transaction;
     return /* @__PURE__ */ import_react27.default.createElement(
       Badge,
       {
         icon: /* @__PURE__ */ import_react27.default.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ import_react27.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        tooltip: /* @__PURE__ */ import_react27.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, bankTransaction.match?.details?.description ?? ""), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2244,7 +2243,7 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_classnames13 = __toESM(require("classnames"));
+var import_classnames14 = __toESM(require("classnames"));
 var import_date_fns6 = require("date-fns");
 var MatchForm = ({
   classNamePrefix,
@@ -2263,7 +2262,7 @@ var MatchForm = ({
       "div",
       {
         key: idx,
-        className: (0, import_classnames13.default)(
+        className: (0, import_classnames14.default)(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2322,18 +2321,18 @@ var MatchForm = ({
 
 // src/components/Textarea/Textarea.tsx
 var import_react29 = __toESM(require("react"));
-var import_classnames14 = __toESM(require("classnames"));
+var import_classnames15 = __toESM(require("classnames"));
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames14.default)("Layer__textarea", className);
+  const baseClassName = (0, import_classnames15.default)("Layer__textarea", className);
   return /* @__PURE__ */ import_react29.default.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
 var import_react30 = __toESM(require("react"));
-var import_classnames15 = __toESM(require("classnames"));
+var import_classnames16 = __toESM(require("classnames"));
 var Toggle = ({
   name,
   options,
@@ -2350,7 +2349,7 @@ var Toggle = ({
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = (0, import_classnames15.default)(
+  const baseClassName = (0, import_classnames16.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2455,8 +2454,8 @@ var ToggleOption = ({
 var import_react31 = __toESM(require("react"));
 
 // src/icons/AlertOctagon.tsx
-var React41 = __toESM(require("react"));
-var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createElement(
+var React42 = __toESM(require("react"));
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React42.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2466,7 +2465,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",
@@ -2475,7 +2474,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -2484,7 +2483,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React41.createElement(
+  /* @__PURE__ */ React42.createElement(
     "path",
     {
       d: "M9 12H9.0075",
@@ -2599,7 +2598,7 @@ var Notification = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_classnames16 = __toESM(require("classnames"));
+var import_classnames17 = __toESM(require("classnames"));
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2629,6 +2628,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
   ({
     bankTransaction,
     isOpen = false,
+    close,
     editable,
     asListItem = false,
     submitBtnText = "Save",
@@ -2656,13 +2656,13 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         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: "",
@@ -2673,7 +2673,11 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         ...rowState,
         splits: [
           ...rowState.splits,
-          { amount: 0, inputValue: "0.00", category: defaultCategory }
+          {
+            amount: 0,
+            inputValue: "0.00",
+            category: mapCategoryToOption(defaultCategory)
+          }
         ]
       });
       setSplitFormError(void 0);
@@ -2728,7 +2732,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
       updateRowState({ ...rowState });
       setSplitFormError(void 0);
     };
-    const save = () => {
+    const save = async () => {
       if (purpose === "match" /* match */) {
         if (!selectedMatchId) {
           setMatchFormError("Select an option to match the transaction");
@@ -2747,34 +2751,36 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         }
         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();
     };
     (0, import_react32.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 = (0, import_react32.useCallback)(() => {
       const { height: height2 } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : { height: void 0 };
@@ -2844,7 +2850,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
-            className: (0, import_classnames16.default)(
+            className: (0, import_classnames17.default)(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
@@ -2866,7 +2872,7 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
         ), /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
-            className: (0, import_classnames16.default)(
+            className: (0, import_classnames17.default)(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
@@ -2897,13 +2903,14 @@ var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
                 className: `${className}__table-cell--split-entry__right-col`
               },
               /* @__PURE__ */ import_react32.default.createElement(
-                CategoryMenu,
+                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__ */ import_react32.default.createElement(
@@ -3004,7 +3011,7 @@ var SplitTooltipDetails = ({
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_classnames17 = __toESM(require("classnames"));
+var import_classnames18 = __toESM(require("classnames"));
 var import_date_fns7 = require("date-fns");
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -3023,7 +3030,8 @@ var BankTransactionRow = ({
   bankTransaction,
   editable,
   removeTransaction,
-  containerWidth
+  containerWidth,
+  initialLoad
 }) => {
   const expandedRowRef = (0, import_react34.useRef)(null);
   const [showRetry, setShowRetry] = (0, import_react34.useState)(false);
@@ -3050,10 +3058,14 @@ var BankTransactionRow = ({
   };
   const [showComponent, setShowComponent] = (0, import_react34.useState)(false);
   (0, import_react34.useEffect)(() => {
-    const timeoutId = setTimeout(() => {
+    if (initialLoad) {
+      const timeoutId = setTimeout(() => {
+        setShowComponent(true);
+      }, index * 10);
+      return () => clearTimeout(timeoutId);
+    } else {
       setShowComponent(true);
-    }, index * 80);
-    return () => clearTimeout(timeoutId);
+    }
   }, []);
   (0, import_react34.useEffect)(() => {
     if (bankTransaction.error) {
@@ -3069,26 +3081,32 @@ 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 = (0, import_classnames17.default)(
+  const rowClassName = (0, import_classnames18.default)(
     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__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
@@ -3098,7 +3116,9 @@ var BankTransactionRow = ({
       onTransitionEnd: ({ propertyName }) => {
         if (propertyName === "top") {
           setRemoved(true);
-          removeTransaction(bankTransaction.id);
+          if (editable) {
+            removeTransaction(bankTransaction.id);
+          }
         }
       }
     },
@@ -3156,7 +3176,7 @@ var BankTransactionRow = ({
     /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
-        className: (0, import_classnames17.default)(
+        className: (0, import_classnames18.default)(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
@@ -3204,7 +3224,7 @@ var BankTransactionRow = ({
         ), /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns7.format)(
           (0, import_date_fns7.parseISO)(bankTransaction.match.bank_transaction.date),
           dateFormat
-        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+        )}, ${bankTransaction.match?.details?.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
         editable && !open && showRetry ? /* @__PURE__ */ import_react34.default.createElement(
           RetryButton,
           {
@@ -3266,6 +3286,7 @@ var BankTransactionRow = ({
       ref: expandedRowRef,
       bankTransaction,
       isOpen: open,
+      close: () => setOpen(false),
       containerWidth,
       editable
     }
@@ -3310,7 +3331,7 @@ var Assignment = ({ bankTransaction }) => {
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_classnames18 = __toESM(require("classnames"));
+var import_classnames19 = __toESM(require("classnames"));
 var import_date_fns9 = require("date-fns");
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
@@ -3369,7 +3390,7 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames18.default)(
+  const rowClassName = (0, import_classnames19.default)(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
     open ? openClassName : "",
@@ -3400,6 +3421,7 @@ var BankTransactionListItem = ({
       ref: expandedRowRef,
       bankTransaction,
       isOpen: open,
+      close: () => setOpen(false),
       editable,
       asListItem: true,
       submitBtnText: editable ? "Approve" : "Update",
@@ -3675,10 +3697,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-var import_classnames19 = __toESM(require("classnames"));
+var import_classnames20 = __toESM(require("classnames"));
 var Container = (0, import_react37.forwardRef)(
   ({ name, className, children, asWidget }, ref) => {
-    const baseClassName = (0, import_classnames19.default)(
+    const baseClassName = (0, import_classnames20.default)(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       asWidget ? "Layer__component--as-widget" : "",
@@ -3692,10 +3714,10 @@ var Container = (0, import_react37.forwardRef)(
 
 // src/components/Container/Header.tsx
 var import_react38 = __toESM(require("react"));
-var import_classnames20 = __toESM(require("classnames"));
+var import_classnames21 = __toESM(require("classnames"));
 var Header = (0, import_react38.forwardRef)(
   ({ className, children, style }, ref) => {
-    const baseClassName = (0, import_classnames20.default)("Layer__component-header", className);
+    const baseClassName = (0, import_classnames21.default)("Layer__component-header", className);
     return /* @__PURE__ */ import_react38.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
@@ -3795,8 +3817,8 @@ var usePagination = ({
 };
 
 // src/icons/ChevronLeft.tsx
-var React52 = __toESM(require("react"));
-var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
+var React53 = __toESM(require("react"));
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3806,7 +3828,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",
@@ -3819,8 +3841,8 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createEle
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-var React53 = __toESM(require("react"));
-var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createElement(
+var React54 = __toESM(require("react"));
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React54.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3830,7 +3852,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",
@@ -3843,7 +3865,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createEl
 var ChevronRight_default = ChavronRight;
 
 // src/components/Pagination/Pagination.tsx
-var import_classnames21 = __toESM(require("classnames"));
+var import_classnames22 = __toESM(require("classnames"));
 var Pagination = ({
   onPageChange,
   totalCount,
@@ -3868,7 +3890,7 @@ var Pagination = ({
     "li",
     {
       key: `page-prev`,
-      className: (0, import_classnames21.default)(
+      className: (0, import_classnames22.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
         {
           disabled: currentPage === 1
@@ -3879,13 +3901,20 @@ var Pagination = ({
     /* @__PURE__ */ import_react42.default.createElement(ChevronLeft_default, { size: 12 })
   ), paginationRange.map((pageNumber) => {
     if (pageNumber === DOTS) {
-      return /* @__PURE__ */ import_react42.default.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
+      return /* @__PURE__ */ import_react42.default.createElement(
+        "li",
+        {
+          key: `page-${pageNumber}`,
+          className: "Layer__pagination-item Layer__pagination-dots"
+        },
+        "\u2026"
+      );
     }
     return /* @__PURE__ */ import_react42.default.createElement(
       "li",
       {
         key: `page-${pageNumber}`,
-        className: (0, import_classnames21.default)("Layer__pagination-item", {
+        className: (0, import_classnames22.default)("Layer__pagination-item", {
           selected: pageNumber === currentPage
         }),
         onClick: () => {
@@ -3900,7 +3929,7 @@ var Pagination = ({
     "li",
     {
       key: `page-last`,
-      className: (0, import_classnames21.default)(
+      className: (0, import_classnames22.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
         {
           disabled: currentPage === lastPage
@@ -3928,20 +3957,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] = (0, import_react43.useState)("review" /* review */);
+  const [display, setDisplay] = (0, import_react43.useState)(
+    categorizedOnly ? "categorized" /* categorized */ : "review" /* review */
+  );
   const [currentPage, setCurrentPage] = (0, import_react43.useState)(1);
   const [removedTxs, setRemovedTxs] = (0, import_react43.useState)([]);
+  const [initialLoad, setInitialLoad] = (0, import_react43.useState)(true);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
   const bankTransactionsByFilter = data?.filter(
     (tx) => !removedTxs.includes(tx.id) && filterVisibility(display, tx)
   );
+  (0, import_react43.useEffect)(() => {
+    if (!isLoading) {
+      const timeoutLoad = setTimeout(() => {
+        setInitialLoad(false);
+      }, 1e3);
+      return () => clearTimeout(timeoutLoad);
+    }
+  }, [isLoading]);
   const bankTransactions = (0, import_react43.useMemo)(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
@@ -3995,7 +4036,7 @@ var BankTransactions = ({
         style: { top: shiftStickyHeader }
       },
       /* @__PURE__ */ import_react43.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-      /* @__PURE__ */ import_react43.default.createElement(
+      !categorizedOnly && /* @__PURE__ */ import_react43.default.createElement(
         Toggle,
         {
           name: "bank-transaction-display",
@@ -4019,6 +4060,7 @@ var BankTransactions = ({
         (bankTransaction, index) => /* @__PURE__ */ import_react43.default.createElement(
           BankTransactionRow,
           {
+            initialLoad,
             index,
             key: bankTransaction.id,
             dateFormat: DATE_FORMAT,
@@ -4091,109 +4133,682 @@ var Hello = ({ user }) => {
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-var import_react47 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-var import_react45 = require("react");
+var import_swr4 = __toESM(require("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] = (0, import_react45.useState)(true);
-  (0, import_react45.useEffect)(() => {
-    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
+  } = (0, import_swr4.default)(
+    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
-var import_react46 = __toESM(require("react"));
-var LinkedAccountThumb = ({ account }) => {
-  return /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ import_react46.default.createElement("div", { className: "bottombar" }, /* @__PURE__ */ import_react46.default.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__ */ import_react47.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react47.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react47.default.createElement(
-    Heading,
+// src/icons/PlusIcon.tsx
+var React58 = __toESM(require("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__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react47.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react47.default.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__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react47.default.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
-};
-
-// src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react57 = __toESM(require("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
-var import_react48 = require("react");
+// src/components/LinkedAccountOptions/LinkedAccountOptions.tsx
+var import_react47 = __toESM(require("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
+var import_react45 = __toESM(require("react"));
+var MoreVertical = ({ size = 18, ...props }) => {
+  return /* @__PURE__ */ import_react45.default.createElement(
+    "svg",
+    {
+      viewBox: "0 0 16 14",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...props,
+      width: size,
+      height: size
+    },
+    /* @__PURE__ */ import_react45.default.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__ */ import_react45.default.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__ */ import_react45.default.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
+var import_react46 = __toESM(require("react"));
+var import_classnames23 = __toESM(require("classnames"));
+var HoverMenu = ({ children, config }) => {
+  const [openMenu, setOpenMenu] = (0, import_react46.useState)(false);
+  const hoverMenuRef = (0, import_react46.useRef)(null);
+  const hoverMenuClassName = (0, import_classnames23.default)(
+    "Layer__hover-menu",
+    openMenu && "--open"
+  );
+  (0, import_react46.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (hoverMenuRef.current && !hoverMenuRef.current.contains(event.target)) {
+        setOpenMenu(false);
+      }
+    }
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
+  return /* @__PURE__ */ import_react46.default.createElement(
+    "div",
+    {
+      className: hoverMenuClassName,
+      ref: hoverMenuRef,
+      onMouseLeave: () => setOpenMenu(false)
+    },
+    /* @__PURE__ */ import_react46.default.createElement(
+      "div",
+      {
+        className: "Layer__hover-menu__children",
+        role: "button",
+        onMouseEnter: () => setOpenMenu(true),
+        onClick: () => setOpenMenu(true)
+      },
+      children
+    ),
+    /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__hover-menu__list-wrapper" }, /* @__PURE__ */ import_react46.default.createElement("ul", { className: "Layer__hover-menu__list" }, config && config.length > 0 && config.map((item) => /* @__PURE__ */ import_react46.default.createElement(
+      "li",
+      {
+        key: `hover-menu-${item.name}`,
+        className: "Layer__hover-menu__list-item"
+      },
+      /* @__PURE__ */ import_react46.default.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__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options" }, /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options-overlay" }, /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__options-overlay-button" }, /* @__PURE__ */ import_react47.default.createElement(HoverMenu, { config }, /* @__PURE__ */ import_react47.default.createElement(MoreVertical_default, { size: 16 })))), children);
+};
+
+// src/components/LinkedAccountThumb/LinkedAccountThumb.tsx
+var import_react48 = __toESM(require("react"));
+
+// src/icons/InstitutionIcon.tsx
+var React62 = __toESM(require("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
+var import_classnames24 = __toESM(require("classnames"));
+var AccountNumber = ({ accountNumber }) => /* @__PURE__ */ import_react48.default.createElement("div", { className: "account-number" }, /* @__PURE__ */ import_react48.default.createElement(Text, { size: "sm" }, "\u2022\u2022\u2022", accountNumber));
+var LinkedAccountThumb = ({
+  account,
+  asWidget
+}) => {
+  const linkedAccountThumbClassName = (0, import_classnames24.default)(
+    "Layer__linked-account-thumb",
+    asWidget && "--as-widget"
+  );
+  return /* @__PURE__ */ import_react48.default.createElement("div", { className: linkedAccountThumbClassName }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar-details" }, /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-name" }, account.external_account_name), !asWidget && /* @__PURE__ */ import_react48.default.createElement(AccountNumber, { accountNumber: account.external_account_number }), /* @__PURE__ */ import_react48.default.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-institution",
+      size: "sm"
+    },
+    account.institution
+  )), /* @__PURE__ */ import_react48.default.createElement("div", { className: "topbar-logo" }, !account.institutionLogo && /* @__PURE__ */ import_react48.default.createElement(InstitutionIcon_default, null))), !asWidget && /* @__PURE__ */ import_react48.default.createElement("div", { className: "middlebar" }, /* @__PURE__ */ import_react48.default.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-balance-text",
+      size: "sm"
+    },
+    "Bank balance"
+  ), /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.latest_balance_timestamp.balance))), /* @__PURE__ */ import_react48.default.createElement("div", { className: "bottombar" }, asWidget ? /* @__PURE__ */ import_react48.default.createElement(AccountNumber, { accountNumber: account.external_account_number }) : /* @__PURE__ */ import_react48.default.createElement(
+    Text,
+    {
+      as: "span",
+      className: "account-balance-text",
+      size: "sm"
+    },
+    "General ledger balance"
+  ), /* @__PURE__ */ import_react48.default.createElement(Text, { as: "span", className: "account-balance" }, "$", centsToDollars(account.current_ledger_balance))));
+};
+
+// src/components/LinkedAccounts/LinkedAccounts.tsx
+var import_classnames25 = __toESM(require("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 = (0, import_classnames25.default)(
+    "Layer__linked-accounts__new-account",
+    asWidget && "--as-widget"
+  );
+  return /* @__PURE__ */ import_react49.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react49.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react49.default.createElement(
+    Heading,
+    {
+      className: "Layer__linked-accounts__title",
+      size: "secondary" /* secondary */
+    },
+    "Linked Accounts"
+  )), isLoading && /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react49.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react49.default.createElement(
+    DataState,
+    {
+      status: "failed" /* failed */,
+      title: "Something went wrong",
+      description: "We couldn\u2019t load your data.",
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react49.default.createElement(
+    LinkedAccountOptions,
+    {
+      key: `linked-acc-${index}`,
+      config: linkedAccountOptionsConfig
+    },
+    /* @__PURE__ */ import_react49.default.createElement(LinkedAccountThumb, { account, asWidget })
+  )), /* @__PURE__ */ import_react49.default.createElement(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      "aria-label": "new-account",
+      onClick: () => addAccount(),
+      className: linkedAccountsNewAccountClassName
+    },
+    /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__linked-accounts__new-account-label" }, /* @__PURE__ */ import_react49.default.createElement(PlusIcon_default, { size: 15 }), /* @__PURE__ */ import_react49.default.createElement(Text, { as: "span", size: "sm" }, "New account"))
+  )) : null);
+};
+
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+var import_react59 = __toESM(require("react"));
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+var import_react50 = require("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;
 };
@@ -4231,7 +4846,7 @@ var applyShare = (items, total) => {
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
 var import_date_fns10 = require("date-fns");
-var import_swr4 = __toESM(require("swr"));
+var import_swr5 = __toESM(require("swr"));
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
@@ -4242,24 +4857,24 @@ var useProfitAndLoss = ({
   endDate: (0, import_date_fns10.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react48.useState)(
+  const [startDate, setStartDate] = (0, import_react50.useState)(
     initialStartDate || (0, import_date_fns10.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react48.useState)(
+  const [endDate, setEndDate] = (0, import_react50.useState)(
     initialEndDate || (0, import_date_fns10.endOfMonth)(Date.now())
   );
-  const [filters, setFilters] = (0, import_react48.useState)({
+  const [filters, setFilters] = (0, import_react50.useState)({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = (0, import_react48.useState)(void 0);
+  const [sidebarScope, setSidebarScope] = (0, import_react50.useState)(void 0);
   const {
     data: rawData,
     isLoading,
     isValidating,
     error: rawError,
     mutate
-  } = (0, import_swr4.default)(
+  } = (0, import_swr5.default)(
     businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
       ","
     )}-${reportingBasis}`,
@@ -4275,7 +4890,7 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
-  const { filteredData, filteredTotal } = (0, import_react48.useMemo)(() => {
+  const { filteredData, filteredTotal } = (0, import_react50.useMemo)(() => {
     if (!data) {
       return { filteredData: [], filteredTotal: void 0 };
     }
@@ -4360,7 +4975,7 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react50 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -4398,7 +5013,7 @@ var formatPercent = (value, options) => {
 };
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react49 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -4415,11 +5030,11 @@ var Indicator = ({
   const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
   const borderRadius = width > 16 ? 8 : width / 2;
-  (0, import_react49.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -4443,7 +5058,7 @@ var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
-  const { changeDateRange, dateRange } = (0, import_react50.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react52.useContext)(ProfitAndLoss.Context);
   const thisMonth = (0, import_date_fns11.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
@@ -4546,13 +5161,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__ */ import_react50.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react50.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ import_react50.default.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
+      return /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react52.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ import_react52.default.createElement("li", null, /* @__PURE__ */ import_react52.default.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ import_react52.default.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
     const { x, width, height } = props;
-    return /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react52.default.createElement(
       import_recharts.Rectangle,
       {
         fill: getColor(900)?.hex ?? "#333",
@@ -4566,7 +5181,7 @@ var ProfitAndLossChart = () => {
       }
     );
   };
-  const data = (0, import_react50.useMemo)(
+  const data = (0, import_react52.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -4574,8 +5189,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react50.useState)(-1);
-  return /* @__PURE__ */ import_react50.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react52.useState)(-1);
+  return /* @__PURE__ */ import_react52.default.createElement(
     import_recharts.ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -4583,7 +5198,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       import_recharts.BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -4592,17 +5207,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         import_recharts.Tooltip,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ import_react50.default.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ import_react50.default.createElement(CustomizedCursor, null),
+          content: /* @__PURE__ */ import_react52.default.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ import_react52.default.createElement(CustomizedCursor, null),
           animationDuration: 100,
           animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         import_recharts.CartesianGrid,
         {
           vertical: false,
@@ -4610,7 +5225,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         import_recharts.Legend,
         {
           verticalAlign: "top",
@@ -4630,8 +5245,8 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ import_react50.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ import_react52.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "revenue",
@@ -4640,10 +5255,10 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ import_react50.default.createElement(
+        /* @__PURE__ */ import_react52.default.createElement(
           import_recharts.LabelList,
           {
-            content: /* @__PURE__ */ import_react50.default.createElement(
+            content: /* @__PURE__ */ import_react52.default.createElement(
               Indicator,
               {
                 animateFrom,
@@ -4652,7 +5267,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ import_react50.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react52.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -4660,7 +5275,7 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "expenses",
@@ -4669,7 +5284,7 @@ var ProfitAndLossChart = () => {
           radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ import_react50.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react52.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -4682,72 +5297,132 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react51 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_date_fns12 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react51.useContext)(ProfitAndLoss.Context);
-  const date = dateRange.startDate;
-  const label = (0, import_date_fns12.format)(date, "LLLL y");
-  const change = (duration) => {
-    const newDate = (0, import_date_fns12.add)(date, duration);
+  const { changeDateRange, dateRange } = (0, import_react53.useContext)(ProfitAndLoss.Context);
+  const [isAnimating, setIsAnimating] = (0, import_react53.useState)(false);
+  const [localDate, setLocalDate] = (0, import_react53.useState)(dateRange.startDate);
+  const [nextOpacity, setNextOpacity] = (0, import_react53.useState)(0);
+  const [currentOpacity, setCurrentOpacity] = (0, import_react53.useState)(1);
+  const [transformStyle, setTransformStyle] = (0, import_react53.useState)({
+    transform: "translateX(33%)",
+    transition: "ease"
+  });
+  (0, import_react53.useEffect)(() => {
+    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 = (0, import_date_fns12.add)(localDate, { months: monthsToAdd });
+    if (monthsToAdd === -1) {
+      setCurrentOpacity(0);
+    }
     changeDateRange({
       startDate: (0, import_date_fns12.startOfMonth)(newDate),
       endDate: (0, import_date_fns12.endOfMonth)(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__ */ import_react51.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react51.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react51.default.createElement(
-    "button",
+  const currentLabel = (0, import_date_fns12.format)(localDate, "LLLL, y");
+  const prevLabel = (0, import_date_fns12.format)((0, import_date_fns12.add)(localDate, { months: -1 }), "LLLL, y");
+  const nextLabel = (0, import_date_fns12.format)((0, import_date_fns12.add)(localDate, { months: 1 }), "LLLL, y");
+  return /* @__PURE__ */ import_react53.default.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__ */ import_react51.default.createElement(
-      ChevronLeft_default,
+    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__labels-container", style: transformStyle }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, prevLabel), /* @__PURE__ */ import_react53.default.createElement(
+      "span",
       {
-        className: "Layer__profit-and-loss-date-picker__button-icon",
-        size: 16
-      }
-    )
-  ), /* @__PURE__ */ import_react51.default.createElement(
-    "button",
-    {
-      "aria-label": "View Next Month",
-      className: "Layer__profit-and-loss-date-picker__button",
-      onClick: nextMonth
-    },
-    /* @__PURE__ */ import_react51.default.createElement(
-      ChevronRight_default,
+        className: "Layer__profit-and-loss-date-picker__label",
+        style: { opacity: currentOpacity }
+      },
+      currentLabel
+    ), /* @__PURE__ */ import_react53.default.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__ */ import_react53.default.createElement(
+      "button",
+      {
+        "aria-label": "View Previous Month",
+        className: "Layer__profit-and-loss-date-picker__button",
+        onClick: () => change(-1),
+        disabled: isAnimating
+      },
+      /* @__PURE__ */ import_react53.default.createElement(
+        ChevronLeft_default,
+        {
+          className: "Layer__profit-and-loss-date-picker__button-icon",
+          size: 16
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react53.default.createElement(
+      "button",
+      {
+        "aria-label": "View Next Month",
+        className: "Layer__profit-and-loss-date-picker__button",
+        onClick: () => change(1),
+        disabled: isAnimating
+      },
+      /* @__PURE__ */ import_react53.default.createElement(
+        ChevronRight_default,
+        {
+          className: "Layer__profit-and-loss-date-picker__button-icon",
+          size: 16
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-date-picker__effect-blur" })
+  );
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_react52 = __toESM(require("react"));
-var import_classnames22 = __toESM(require("classnames"));
+var import_react54 = __toESM(require("react"));
+var import_classnames26 = __toESM(require("classnames"));
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = (0, import_classnames22.default)(
+  const baseClassName = (0, import_classnames26.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
-  return /* @__PURE__ */ import_react52.default.createElement("div", { className: baseClassName, style: { width, height } });
+  return /* @__PURE__ */ import_react54.default.createElement("div", { className: baseClassName, style: { width, height } });
 };
 
 // src/components/ProfitAndLossSummaries/MiniChart.tsx
-var import_react53 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 
 // src/config/charts.ts
 var INACTIVE_OPACITY_LEVELS = [
@@ -4838,7 +5513,7 @@ var DEFAULT_CHART_COLORS = [
 // src/components/ProfitAndLossSummaries/MiniChart.tsx
 var import_recharts2 = require("recharts");
 var MiniChart = ({ data }) => {
-  return /* @__PURE__ */ import_react53.default.createElement(import_recharts2.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(import_recharts2.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react55.default.createElement(
     import_recharts2.Pie,
     {
       data,
@@ -4857,7 +5532,7 @@ var MiniChart = ({ data }) => {
     },
     data.map((entry, index) => {
       const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
-      return /* @__PURE__ */ import_react53.default.createElement(
+      return /* @__PURE__ */ import_react55.default.createElement(
         import_recharts2.Cell,
         {
           key: `cell-${index}`,
@@ -4871,7 +5546,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_classnames23 = __toESM(require("classnames"));
+var import_classnames27 = __toESM(require("classnames"));
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -4907,34 +5582,34 @@ var ProfitAndLossSummaries = ({
     isLoading,
     setSidebarScope,
     sidebarScope
-  } = (0, import_react54.useContext)(ProfitAndLoss.Context);
-  const expensesChartData = (0, import_react54.useMemo)(() => {
+  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
+  const expensesChartData = (0, import_react56.useMemo)(() => {
     return buildMiniChartData("expenses", storedData);
   }, [storedData]);
-  const revenueChartData = (0, import_react54.useMemo)(() => {
+  const revenueChartData = (0, import_react56.useMemo)(() => {
     return buildMiniChartData("revenue", storedData);
   }, [storedData]);
   const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
   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__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ import_react54.default.createElement(
+    /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
-        className: (0, import_classnames23.default)(
+        className: (0, import_classnames27.default)(
           "Layer__profit-and-loss-summaries__summary Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
           sidebarScope === "revenue" ? "active" : ""
         ),
         onClick: () => setSidebarScope("revenue")
       },
-      /* @__PURE__ */ import_react54.default.createElement(MiniChart, { data: revenueChartData }),
-      /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react54.default.createElement(
+      /* @__PURE__ */ import_react56.default.createElement(MiniChart, { data: revenueChartData }),
+      /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react56.default.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
@@ -4942,18 +5617,18 @@ var ProfitAndLossSummaries = ({
         centsToDollars(Math.abs(data?.income?.value ?? NaN))
       ))
     ),
-    /* @__PURE__ */ import_react54.default.createElement(
+    /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
-        className: (0, import_classnames23.default)(
+        className: (0, import_classnames27.default)(
           "Layer__profit-and-loss-summaries__summary Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
           sidebarScope === "expenses" ? "active" : ""
         ),
         onClick: () => setSidebarScope("expenses")
       },
-      /* @__PURE__ */ import_react54.default.createElement(MiniChart, { data: expensesChartData }),
-      /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react54.default.createElement(
+      /* @__PURE__ */ import_react56.default.createElement(MiniChart, { data: expensesChartData }),
+      /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react56.default.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
@@ -4963,7 +5638,7 @@ var ProfitAndLossSummaries = ({
         )
       ))
     ),
-    /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react54.default.createElement(
+    /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react56.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react56.default.createElement(
       "span",
       {
         className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
@@ -4974,14 +5649,14 @@ var ProfitAndLossSummaries = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react56 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react55 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 
 // src/icons/PieChart.tsx
-var React65 = __toESM(require("react"));
-var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React65.createElement(
+var React71 = __toESM(require("react"));
+var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React71.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4991,21 +5666,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 +5701,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react55.useState)(true);
+  const [expanded, setExpanded] = (0, import_react57.useState)(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -5057,20 +5732,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__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
     "div",
     {
       className: labelClasses.join(" "),
       onClick: () => !lockExpanded && toggleExpanded()
     },
-    /* @__PURE__ */ import_react55.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react55.default.createElement(
+    /* @__PURE__ */ import_react57.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react57.default.createElement(
       ChevronDownFill_default,
       {
         size: 16,
         className: "Layer__profit-and-loss-row__label__chevron"
       }
-    ) : null, /* @__PURE__ */ import_react55.default.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ import_react55.default.createElement(
+    ) : null, /* @__PURE__ */ import_react57.default.createElement(Text, null, display_name)),
+    setSidebarScope && /* @__PURE__ */ import_react57.default.createElement(
       "span",
       {
         className: "Layer__profit-and-loss-row__detailed-chart-btn",
@@ -5079,14 +5754,14 @@ var ProfitAndLossRow = ({
           setSidebarScope && setSidebarScope(scope ?? "expenses");
         }
       },
-      /* @__PURE__ */ import_react55.default.createElement(PieChart_default, null)
+      /* @__PURE__ */ import_react57.default.createElement(PieChart_default, null)
     )
-  ), /* @__PURE__ */ import_react55.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react55.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react55.default.createElement(
+  ), /* @__PURE__ */ import_react57.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react57.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react57.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ import_react55.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react55.default.createElement(
+    /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react57.default.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -5153,12 +5828,12 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
     data: actualData,
     isLoading,
     setSidebarScope
-  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
+  } = (0, import_react58.useContext)(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react56.default.createElement(Loader2, null));
+    return /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react58.default.createElement(Loader2, null));
   }
-  return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.income,
@@ -5167,7 +5842,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
@@ -5176,7 +5851,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5189,7 +5864,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
@@ -5198,7 +5873,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5211,7 +5886,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "revenue",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.taxes,
@@ -5220,7 +5895,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       scope: "expenses",
       setSidebarScope
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -5231,14 +5906,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react56.default.createElement(
+  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react58.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react56.default.createElement(
+  ), /* @__PURE__ */ import_react58.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -5250,7 +5925,7 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns13 = require("date-fns");
-var PNLContext = (0, import_react57.createContext)({
+var PNLContext = (0, import_react59.createContext)({
   data: void 0,
   filteredData: [],
   filteredTotal: void 0,
@@ -5279,7 +5954,7 @@ var PNLContext = (0, import_react57.createContext)({
 });
 var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ import_react57.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+  return /* @__PURE__ */ import_react59.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -5288,14 +5963,14 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-var import_react62 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-var import_react61 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 
 // src/icons/X.tsx
-var React69 = __toESM(require("react"));
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
+var React75 = __toESM(require("react"));
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React75.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5305,7 +5980,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 +5989,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 +6002,7 @@ var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
 var X_default = X;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
-var import_react58 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_recharts3 = require("recharts");
 var DetailedChart = ({
   filteredData,
@@ -5337,7 +6012,7 @@ var DetailedChart = ({
   sidebarScope,
   date
 }) => {
-  const chartData = (0, import_react58.useMemo)(() => {
+  const chartData = (0, import_react60.useMemo)(() => {
     if (!filteredData) {
       return [];
     }
@@ -5354,7 +6029,7 @@ var DetailedChart = ({
       };
     });
   }, [filteredData]);
-  return /* @__PURE__ */ import_react58.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ import_react58.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react58.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react58.default.createElement(import_recharts3.ResponsiveContainer, null, /* @__PURE__ */ import_react58.default.createElement(import_recharts3.PieChart, null, /* @__PURE__ */ import_react58.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ import_react60.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react60.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react60.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react60.default.createElement(import_recharts3.ResponsiveContainer, null, /* @__PURE__ */ import_react60.default.createElement(import_recharts3.PieChart, null, /* @__PURE__ */ import_react60.default.createElement(
     import_recharts3.Pie,
     {
       data: chartData,
@@ -5379,7 +6054,7 @@ var DetailedChart = ({
         fill = void 0;
         opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
       }
-      return /* @__PURE__ */ import_react58.default.createElement(
+      return /* @__PURE__ */ import_react60.default.createElement(
         import_recharts3.Cell,
         {
           key: `cell-${index}`,
@@ -5391,7 +6066,7 @@ var DetailedChart = ({
         }
       );
     }),
-    /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement(
       import_recharts3.Label,
       {
         position: "center",
@@ -5412,7 +6087,7 @@ var DetailedChart = ({
           if (hoveredItem) {
             text = hoveredItem;
           }
-          return /* @__PURE__ */ import_react58.default.createElement(
+          return /* @__PURE__ */ import_react60.default.createElement(
             import_recharts3.Text,
             {
               ...positioningProps,
@@ -5423,7 +6098,7 @@ var DetailedChart = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement(
       import_recharts3.Label,
       {
         position: "center",
@@ -5446,7 +6121,7 @@ var DetailedChart = ({
               (x) => x.display_name === hoveredItem
             )?.value;
           }
-          return /* @__PURE__ */ import_react58.default.createElement(
+          return /* @__PURE__ */ import_react60.default.createElement(
             import_recharts3.Text,
             {
               ...positioningProps,
@@ -5457,7 +6132,7 @@ var DetailedChart = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react58.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement(
       import_recharts3.Label,
       {
         position: "center",
@@ -5476,7 +6151,7 @@ var DetailedChart = ({
             verticalAnchor: "middle"
           };
           if (hoveredItem) {
-            return /* @__PURE__ */ import_react58.default.createElement(
+            return /* @__PURE__ */ import_react60.default.createElement(
               import_recharts3.Text,
               {
                 ...positioningProps,
@@ -5495,11 +6170,11 @@ var DetailedChart = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-var import_react59 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 
 // src/icons/SortArrows.tsx
-var React71 = __toESM(require("react"));
-var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElement(
+var React77 = __toESM(require("react"));
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React77.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5509,44 +6184,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",
@@ -5559,7 +6234,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElem
 var SortArrows_default = SortArrows;
 
 // src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
-var import_classnames24 = __toESM(require("classnames"));
+var import_classnames28 = __toESM(require("classnames"));
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -5569,52 +6244,52 @@ var DetailedTable = ({
   setHoveredItem
 }) => {
   const buildColClass = (column) => {
-    return (0, import_classnames24.default)(
+    return (0, import_classnames28.default)(
       "Layer__sortable-col",
       sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
     );
   };
-  return /* @__PURE__ */ import_react59.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react59.default.createElement("table", null, /* @__PURE__ */ import_react59.default.createElement("thead", null, /* @__PURE__ */ import_react59.default.createElement("tr", null, /* @__PURE__ */ import_react59.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react61.default.createElement("table", null, /* @__PURE__ */ import_react61.default.createElement("thead", null, /* @__PURE__ */ import_react61.default.createElement("tr", null, /* @__PURE__ */ import_react61.default.createElement(
     "th",
     {
       className: buildColClass("category"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "category")
     },
     "Expense/Sale ",
-    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ import_react59.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react61.default.createElement(
     "th",
     {
       className: buildColClass("type"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "type")
     },
     "Type ",
-    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ), /* @__PURE__ */ import_react59.default.createElement("th", null), /* @__PURE__ */ import_react59.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react61.default.createElement("th", null), /* @__PURE__ */ import_react61.default.createElement(
     "th",
     {
       className: buildColClass("value"),
       onClick: () => sortBy(sidebarScope ?? "expenses", "value")
     },
     "Value ",
-    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-  ))), /* @__PURE__ */ import_react59.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+    /* @__PURE__ */ import_react61.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ))), /* @__PURE__ */ import_react61.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
     const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
-    return /* @__PURE__ */ import_react59.default.createElement(
+    return /* @__PURE__ */ import_react61.default.createElement(
       "tr",
       {
         key: `pl-side-table-item-${idx}`,
-        className: (0, import_classnames24.default)(
+        className: (0, import_classnames28.default)(
           "Layer__profit-and-loss-detailed-table__row",
           hoveredItem && hoveredItem === item.display_name ? "active" : ""
         ),
         onMouseEnter: () => setHoveredItem(item.display_name),
         onMouseLeave: () => setHoveredItem(void 0)
       },
-      /* @__PURE__ */ import_react59.default.createElement("td", { className: "category-col" }, item.display_name),
-      /* @__PURE__ */ import_react59.default.createElement("td", { className: "type-col" }, item.type),
-      /* @__PURE__ */ import_react59.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
-      /* @__PURE__ */ import_react59.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react59.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react59.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement("td", { className: "category-col" }, item.display_name),
+      /* @__PURE__ */ import_react61.default.createElement("td", { className: "type-col" }, item.type),
+      /* @__PURE__ */ import_react61.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+      /* @__PURE__ */ import_react61.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react61.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react61.default.createElement(
         "div",
         {
           className: "share-icon",
@@ -5629,16 +6304,16 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/Filters.tsx
-var import_react60 = __toESM(require("react"));
-var import_react_select4 = __toESM(require("react-select"));
+var import_react62 = __toESM(require("react"));
+var import_react_select3 = __toESM(require("react-select"));
 var Filters = ({
   filteredData,
   sidebarScope,
   filters,
   setFilterTypes
 }) => {
-  return /* @__PURE__ */ import_react60.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react60.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react60.default.createElement(
-    import_react_select4.default,
+  return /* @__PURE__ */ import_react62.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react62.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react62.default.createElement(
+    import_react_select3.default,
     {
       className: "Layer__select type-select",
       classNamePrefix: "Layer__select",
@@ -5659,15 +6334,15 @@ var Filters = ({
         );
       },
       components: {
-        DropdownIndicator: (props) => /* @__PURE__ */ import_react60.default.createElement(import_react_select4.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react60.default.createElement(ChevronDown_default, null)),
-        Placeholder: (props) => /* @__PURE__ */ import_react60.default.createElement(import_react_select4.components.Placeholder, { ...props }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+        DropdownIndicator: (props) => /* @__PURE__ */ import_react62.default.createElement(import_react_select3.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react62.default.createElement(ChevronDown_default, null)),
+        Placeholder: (props) => /* @__PURE__ */ import_react62.default.createElement(import_react_select3.components.Placeholder, { ...props }, /* @__PURE__ */ import_react62.default.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
       }
     }
   ));
 };
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-var import_classnames25 = __toESM(require("classnames"));
+var import_classnames29 = __toESM(require("classnames"));
 var import_date_fns14 = require("date-fns");
 var ProfitAndLossDetailedCharts = () => {
   const {
@@ -5680,32 +6355,25 @@ var ProfitAndLossDetailedCharts = () => {
     sidebarScope,
     setSidebarScope,
     setFilterTypes
-  } = (0, import_react61.useContext)(ProfitAndLoss.Context);
-  const [hoveredItem, setHoveredItem] = (0, import_react61.useState)();
-  return /* @__PURE__ */ import_react61.default.createElement(
+  } = (0, import_react63.useContext)(ProfitAndLoss.Context);
+  const [hoveredItem, setHoveredItem] = (0, import_react63.useState)();
+  return /* @__PURE__ */ import_react63.default.createElement(
     "div",
     {
-      className: (0, import_classnames25.default)(
+      className: (0, import_classnames29.default)(
         "Layer__profit-and-loss__side-panel",
         sidebarScope && "open"
       )
     },
-    /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react61.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react61.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react61.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ import_react61.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react61.default.createElement(
+    /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react63.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react63.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react63.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ import_react63.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react63.default.createElement(
       Button,
       {
-        rightIcon: /* @__PURE__ */ import_react61.default.createElement(X_default, null),
+        rightIcon: /* @__PURE__ */ import_react63.default.createElement(X_default, null),
         iconOnly: true,
         onClick: () => setSidebarScope(void 0),
         variant: "secondary" /* secondary */
       }
-    )), /* @__PURE__ */ import_react61.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ import_react61.default.createElement(
-      Button,
-      {
-        onClick: () => setSidebarScope(void 0),
-        variant: "secondary" /* secondary */
-      },
-      "Back"
-    )), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ import_react61.default.createElement(
+    )), /* @__PURE__ */ import_react63.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ import_react63.default.createElement(BackButton, { onClick: () => setSidebarScope(void 0) })), /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ import_react63.default.createElement(
       DetailedChart,
       {
         filteredData,
@@ -5715,7 +6383,7 @@ var ProfitAndLossDetailedCharts = () => {
         sidebarScope,
         date: dateRange.startDate
       }
-    ), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react61.default.createElement(
+    ), /* @__PURE__ */ import_react63.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react63.default.createElement(
       Filters,
       {
         filteredData,
@@ -5723,7 +6391,7 @@ var ProfitAndLossDetailedCharts = () => {
         filters,
         setFilterTypes
       }
-    ), /* @__PURE__ */ import_react61.default.createElement(
+    ), /* @__PURE__ */ import_react63.default.createElement(
       DetailedTable,
       {
         filteredData,
@@ -5740,17 +6408,17 @@ var ProfitAndLossDetailedCharts = () => {
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ import_react62.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react62.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react62.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react62.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react62.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react62.default.createElement(ProfitAndLossDetailedCharts, null)));
+  return /* @__PURE__ */ import_react64.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react64.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react64.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react64.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react64.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react64.default.createElement(ProfitAndLossDetailedCharts, null)));
 };
 var Components = ({
   hideChart = false,
   hideTable = false
 }) => {
-  const { error, isLoading, isValidating, refetch } = (0, import_react62.useContext)(
+  const { error, isLoading, isValidating, refetch } = (0, import_react64.useContext)(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ import_react62.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react64.default.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -5761,49 +6429,123 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react62.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react62.default.createElement(
+  return /* @__PURE__ */ import_react64.default.createElement(import_react64.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react64.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react64.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ import_react62.default.createElement(
+    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ import_react64.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ import_react64.default.createElement(ProfitAndLoss.Table, null));
 };
 
 // src/components/LedgerAccounts/LedgerAccounts.tsx
-var import_react68 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-var import_react63 = require("react");
-var import_swr5 = __toESM(require("swr"));
+var import_react65 = require("react");
+var import_swr6 = __toESM(require("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] = (0, import_react63.useState)();
-  const [showARForAccountId, setShowARForAccountId] = (0, import_react63.useState)();
-  const { data, isLoading, isValidating, error, mutate } = (0, import_swr5.default)(
+  const [form, setForm] = (0, import_react65.useState)();
+  const [sendingForm, setSendingForm] = (0, import_react65.useState)(false);
+  const [apiError, setApiError] = (0, import_react65.useState)(void 0);
+  const [showARForAccountId, setShowARForAccountId] = (0, import_react65.useState)();
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr6.default)(
     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,
@@ -5818,6 +6560,7 @@ var useLedgerAccounts = () => {
       return;
     }
     if (form.action === "edit" && form.accountId) {
+      update(data2, form.accountId);
       return;
     }
   };
@@ -5867,12 +6610,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();
@@ -5884,6 +6632,8 @@ var useLedgerAccounts = () => {
     refetch,
     create,
     form,
+    sendingForm,
+    apiError,
     addAccount,
     editAccount,
     cancelForm,
@@ -5895,45 +6645,45 @@ var useLedgerAccounts = () => {
 };
 
 // src/components/AccountsReceivable/AccountsReceivableIndex.tsx
-var import_react64 = __toESM(require("react"));
-var import_classnames26 = __toESM(require("classnames"));
+var import_react66 = __toESM(require("react"));
+var import_classnames30 = __toESM(require("classnames"));
 var import_date_fns15 = require("date-fns");
 var AccountsReceivable = () => {
-  const { data, showARForAccountId, setShowARForAccountId } = (0, import_react64.useContext)(
+  const { data, showARForAccountId, setShowARForAccountId } = (0, import_react66.useContext)(
     LedgerAccountsContext
   );
-  const entry = (0, import_react64.useMemo)(() => {
+  const entry = (0, import_react66.useMemo)(() => {
     return flattenAccounts(data?.accounts || []).find(
       (x) => x.id === showARForAccountId
     );
   }, [showARForAccountId]);
-  const baseClassName = (0, import_classnames26.default)(
+  const baseClassName = (0, import_classnames30.default)(
     "Layer__accounts-receivable__index",
     showARForAccountId && "open"
   );
   const close = () => setShowARForAccountId(void 0);
-  return /* @__PURE__ */ import_react64.default.createElement("div", { className: baseClassName }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ import_react64.default.createElement(Button, { onClick: close, variant: "secondary" /* secondary */ }, "Back"), /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react66.default.createElement("div", { className: baseClassName }, /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ import_react66.default.createElement(BackButton, { onClick: close }), /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ import_react66.default.createElement(
     Text,
     {
       weight: "bold" /* bold */,
       className: "Layer__accounts-receivable__title"
     },
     entry?.name || ""
-  ), /* @__PURE__ */ import_react64.default.createElement(
+  ), /* @__PURE__ */ import_react66.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react64.default.createElement(DownloadCloud_default, { size: 12 })
+      rightIcon: /* @__PURE__ */ import_react66.default.createElement(DownloadCloud_default, { size: 12 })
     },
     "Download"
-  )), /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ import_react64.default.createElement(
+  )), /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ import_react66.default.createElement(
     Text,
     {
       weight: "bold" /* bold */,
       className: "Layer__accounts-receivable__balance-label"
     },
     "Current balance"
-  ), /* @__PURE__ */ import_react64.default.createElement(
+  ), /* @__PURE__ */ import_react66.default.createElement(
     Text,
     {
       weight: "bold" /* bold */,
@@ -5941,17 +6691,17 @@ var AccountsReceivable = () => {
     },
     "$",
     centsToDollars(entry?.balance || 0)
-  ))), /* @__PURE__ */ import_react64.default.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ import_react64.default.createElement("thead", null, /* @__PURE__ */ import_react64.default.createElement("tr", null, /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ import_react64.default.createElement("tbody", null, entry?.entries?.map((x) => {
-    return /* @__PURE__ */ import_react64.default.createElement("tr", { key: x.id }, /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")));
+  ))), /* @__PURE__ */ import_react66.default.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ import_react66.default.createElement("thead", null, /* @__PURE__ */ import_react66.default.createElement("tr", null, /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ import_react66.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ import_react66.default.createElement("tbody", null, entry?.entries?.map((x) => {
+    return /* @__PURE__ */ import_react66.default.createElement("tr", { key: x.id }, /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "#123")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "Invoice")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " $X,XXX.XX")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")), /* @__PURE__ */ import_react66.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react66.default.createElement("span", { className: "Layer__table-cell-content" }, "$X,XXX.XX")));
   }))));
 };
 
 // src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
-var import_react65 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 
 // src/icons/ArrowRightCircle.tsx
-var React77 = __toESM(require("react"));
-var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React77.createElement(
+var React83 = __toESM(require("react"));
+var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React83.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5961,39 +6711,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
-var React78 = __toESM(require("react"));
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React78.createElement(
+var React84 = __toESM(require("react"));
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React84.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -6003,54 +6753,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
-var import_classnames27 = __toESM(require("classnames"));
+var import_classnames31 = __toESM(require("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 } = (0, import_react65.useContext)(
+  const { form, editAccount, setShowARForAccountId } = (0, import_react67.useContext)(
     LedgerAccountsContext
   );
-  const [isOpen, setIsOpen] = (0, import_react65.useState)(false);
-  const baseClass = (0, import_classnames27.default)(
-    "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] = (0, import_react67.useState)(defaultOpen);
+  const style = expanded ? {
+    ...EXPANDED_STYLE,
+    transitionDelay: `${15 * index}ms`
+  } : {
+    ...COLLAPSED_STYLE,
+    transitionDelay: `${acountsLength - 15 * index}ms`
+  };
+  const [showComponent, setShowComponent] = (0, import_react67.useState)(false);
+  (0, import_react67.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, cumulativeIndex * 50);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  const baseClass = (0, import_classnames31.default)(
+    "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__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement("div", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ import_react65.default.createElement(
-    "div",
+  return /* @__PURE__ */ import_react67.default.createElement(import_react67.default.Fragment, null, /* @__PURE__ */ import_react67.default.createElement("tr", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react67.default.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__ */ import_react65.default.createElement(
+    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ import_react67.default.createElement(
       ChevronDownFill_default,
       {
         size: 16,
-        className: "Layer__alt-table__expand-icon"
+        className: "Layer__table__expand-icon"
       }
     ),
-    /* @__PURE__ */ import_react65.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
-  ), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__type" }, account.normality), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__balance" }, "$", centsToDollars(Math.abs(account.balance || 0))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__actions" }, /* @__PURE__ */ import_react65.default.createElement(
+    /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+  ))), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, account.normality)), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__subtype" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, "Sub-Type")), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ import_react67.default.createElement(
+    "span",
+    {
+      className: "Layer__table-cell-content Layer__table-cell--amount",
+      style
+    },
+    "$",
+    centsToDollars(Math.abs(account.balance || 0))
+  )), /* @__PURE__ */ import_react67.default.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ import_react67.default.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ import_react67.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react65.default.createElement(Edit2_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ import_react67.default.createElement(Edit2_default, { size: 12 }),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -6058,11 +6851,11 @@ var LedgerAccountsRow = ({
       }
     },
     "Edit"
-  ), /* @__PURE__ */ import_react65.default.createElement(
+  ), /* @__PURE__ */ import_react67.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react65.default.createElement(ArrowRightCircle_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ import_react67.default.createElement(ArrowRightCircle_default, { size: 12 }),
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -6070,21 +6863,25 @@ var LedgerAccountsRow = ({
       }
     },
     "Open"
-  ))), isOpen && (account.sub_accounts || []).map((subAccount) => /* @__PURE__ */ import_react65.default.createElement(
+  )))), (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ import_react67.default.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
-var import_react67 = __toESM(require("react"));
+var import_react69 = __toESM(require("react"));
 
 // src/components/LedgerAccountsForm/LedgerAccountsForm.tsx
-var import_react66 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var SUB_TYPE_OPTIONS = [
   {
     value: "DEBIT" /* DEBIT */,
@@ -6096,10 +6893,16 @@ var SUB_TYPE_OPTIONS = [
   }
 ];
 var LedgerAccountsForm = () => {
-  const { form, data, changeFormData, cancelForm, submitForm } = (0, import_react66.useContext)(
-    LedgerAccountsContext
-  );
-  const parentOptions = (0, import_react66.useMemo)(
+  const {
+    form,
+    data,
+    changeFormData,
+    cancelForm,
+    submitForm,
+    sendingForm,
+    apiError
+  } = (0, import_react68.useContext)(LedgerAccountsContext);
+  const parentOptions = (0, import_react68.useMemo)(
     () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
       return {
         label: x.name,
@@ -6108,7 +6911,7 @@ var LedgerAccountsForm = () => {
     }),
     [data?.accounts?.length]
   );
-  const entry = (0, import_react66.useMemo)(() => {
+  const entry = (0, import_react68.useMemo)(() => {
     if (form?.action === "edit" && form.accountId) {
       return flattenAccounts(data?.accounts || []).find(
         (x) => x.id === form.accountId
@@ -6116,87 +6919,121 @@ var LedgerAccountsForm = () => {
     }
     return;
   }, [data, form?.accountId]);
-  console.log(entry);
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ import_react66.default.createElement(
+  return /* @__PURE__ */ import_react68.default.createElement(
     "form",
     {
+      className: "Layer__form",
       onSubmit: (e) => {
         e.preventDefault();
         submitForm();
       }
     },
-    /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ import_react66.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ import_react66.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react66.default.createElement(
+    /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ import_react68.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react68.default.createElement(
       Button,
       {
         type: "button",
         onClick: cancelForm,
-        variant: "secondary" /* secondary */
+        variant: "secondary" /* secondary */,
+        disabled: sendingForm
       },
       "Cancel"
-    ), /* @__PURE__ */ import_react66.default.createElement(SubmitButton, { type: "submit", noIcon: true, active: true }, "Save"))),
-    entry && /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ import_react66.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react66.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
-      Select3,
+    ), apiError && /* @__PURE__ */ import_react68.default.createElement(
+      RetryButton,
+      {
+        type: "submit",
+        processing: sendingForm,
+        error: "Check connection and retry in few seconds.",
+        disabled: sendingForm
+      },
+      "Retry"
+    ), !apiError && /* @__PURE__ */ import_react68.default.createElement(
+      SubmitButton,
+      {
+        type: "submit",
+        noIcon: true,
+        active: true,
+        disabled: sendingForm
+      },
+      "Save"
+    ))),
+    apiError && /* @__PURE__ */ import_react68.default.createElement(
+      Text,
+      {
+        size: "sm" /* sm */,
+        className: "Layer__ledger-accounts__form__error-message"
+      },
+      apiError
+    ),
+    entry && /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ import_react68.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react68.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+      Select2,
       {
         options: parentOptions,
         value: form?.data.parent,
-        onChange: (sel) => changeFormData("parent", sel)
+        onChange: (sel) => changeFormData("parent", sel),
+        disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ import_react68.default.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__ */ import_react66.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
-      Select3,
+    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+      Select2,
       {
         options: [],
         disabled: true,
         value: form?.data.type,
         onChange: (sel) => changeFormData("type", sel)
       }
-    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
-      Select3,
+    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+      Select2,
       {
         options: SUB_TYPE_OPTIONS,
         value: form?.data.subType,
-        onChange: (sel) => changeFormData("subType", sel)
+        onChange: (sel) => changeFormData("subType", sel),
+        disabled: sendingForm
       }
-    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
-      Select3,
+    )), /* @__PURE__ */ import_react68.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react68.default.createElement(
+      Select2,
       {
         options: [],
         value: form?.data.category,
-        onChange: (sel) => changeFormData("category", sel)
+        onChange: (sel) => changeFormData("category", sel),
+        disabled: sendingForm
       }
     )))
   );
 };
 
 // src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
-var import_classnames28 = __toESM(require("classnames"));
+var import_classnames32 = __toESM(require("classnames"));
 var LedgerAccountsSidebar = () => {
-  const { form } = (0, import_react67.useContext)(LedgerAccountsContext);
-  return /* @__PURE__ */ import_react67.default.createElement(
+  const { form } = (0, import_react69.useContext)(LedgerAccountsContext);
+  return /* @__PURE__ */ import_react69.default.createElement(
     "div",
     {
-      className: (0, import_classnames28.default)(
+      className: (0, import_classnames32.default)(
         "Layer__ledger-accounts__sidebar",
         form ? "open" : ""
       )
     },
-    /* @__PURE__ */ import_react67.default.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ import_react67.default.createElement(LedgerAccountsForm, null))
+    /* @__PURE__ */ import_react69.default.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ import_react69.default.createElement(LedgerAccountsForm, null))
   );
 };
 
 // src/components/LedgerAccounts/LedgerAccounts.tsx
 var COMPONENT_NAME4 = "ledger-accounts";
-var LedgerAccountsContext = (0, import_react68.createContext)({
+var LedgerAccountsContext = (0, import_react70.createContext)({
   data: void 0,
   isLoading: false,
   isValidating: false,
@@ -6206,6 +7043,8 @@ var LedgerAccountsContext = (0, import_react68.createContext)({
   create: () => {
   },
   form: void 0,
+  sendingForm: false,
+  apiError: void 0,
   addAccount: () => {
   },
   editAccount: () => {
@@ -6222,19 +7061,37 @@ var LedgerAccountsContext = (0, import_react68.createContext)({
 });
 var LedgerAccounts = () => {
   const contextData = useLedgerAccounts();
-  return /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsContent, null));
+  return /* @__PURE__ */ import_react70.default.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ import_react70.default.createElement(LedgerAccountsContent, null));
 };
 var LedgerAccountsContent = () => {
-  const { data, isLoading, addAccount, error, isValidating, refetch } = (0, import_react68.useContext)(LedgerAccountsContext);
-  return /* @__PURE__ */ import_react68.default.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ import_react68.default.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ import_react68.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ import_react68.default.createElement(
+  const { data, isLoading, addAccount, error, isValidating, refetch } = (0, import_react70.useContext)(LedgerAccountsContext);
+  let cumulativeIndex = 0;
+  const accountsLength = data?.accounts.length ?? 0;
+  return /* @__PURE__ */ import_react70.default.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ import_react70.default.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ import_react70.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ import_react70.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
       disabled: isLoading,
-      rightIcon: /* @__PURE__ */ import_react68.default.createElement(DownloadCloud_default, { size: 12 })
+      rightIcon: /* @__PURE__ */ import_react70.default.createElement(DownloadCloud_default, { size: 12 })
     },
     "Download"
-  ), /* @__PURE__ */ import_react68.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table-row Layer__alt-table-row--header" }, /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__name" }, "Name"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__type" }, "Type"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__balance" }, "Balance"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__actions" })), error ? /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react68.default.createElement(
+  ), /* @__PURE__ */ import_react70.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ import_react70.default.createElement("table", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ import_react70.default.createElement("thead", null, /* @__PURE__ */ import_react70.default.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__name" }, "Name"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__type" }, "Type"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, "Balance"), /* @__PURE__ */ import_react70.default.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ import_react70.default.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
+    const currentCumulativeIndex = cumulativeIndex;
+    cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
+    return /* @__PURE__ */ import_react70.default.createElement(
+      LedgerAccountsRow,
+      {
+        key: account.id,
+        account,
+        depth: 0,
+        index: idx,
+        cumulativeIndex: currentCumulativeIndex,
+        expanded: true,
+        defaultOpen: true,
+        acountsLength: accountsLength
+      }
+    );
+  }))), error ? /* @__PURE__ */ import_react70.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react70.default.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -6243,7 +7100,7 @@ var LedgerAccountsContent = () => {
       onRefresh: () => refetch(),
       isLoading: isValidating || isLoading
     }
-  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ import_react68.default.createElement(Loader2, null)) : null, !error && data?.accounts.map((account) => /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsRow, { key: account.id, account, depth: 0 })), !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react68.default.createElement(
+  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ import_react70.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ import_react70.default.createElement(Loader2, null)) : null, !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ import_react70.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react70.default.createElement(
     DataState,
     {
       status: "info" /* info */,
@@ -6252,13 +7109,13 @@ var LedgerAccountsContent = () => {
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  )) : null)), /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ import_react68.default.createElement(AccountsReceivable, null));
+  )) : null), /* @__PURE__ */ import_react70.default.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ import_react70.default.createElement(AccountsReceivable, null));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react69 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var import_date_fns16 = require("date-fns");
-var import_swr6 = __toESM(require("swr"));
+var import_swr7 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -6298,7 +7155,7 @@ var LayerProvider = ({
   };
   const colors = buildColorsPalette(theme);
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react69.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react71.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -6311,7 +7168,7 @@ var LayerProvider = ({
     theme,
     colors
   });
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr6.default)(
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr7.default)(
     businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns16.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
@@ -6321,7 +7178,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  (0, import_react69.useEffect)(() => {
+  (0, import_react71.useEffect)(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -6346,7 +7203,7 @@ var LayerProvider = ({
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  (0, import_swr6.default)(
+  (0, import_swr7.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     {
@@ -6371,7 +7228,7 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ import_react69.default.createElement(import_swr6.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react69.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ import_react71.default.createElement(import_swr7.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react71.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {