@layerfi/components 0.1.5 → 0.1.7

package/dist/esm/index.js

@@ -563,7 +563,7 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-import React50, { useState as useState9, useMemo as useMemo2 } from "react";
+import React54, { useState as useState10, useMemo as useMemo2 } from "react";
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
@@ -703,15 +703,97 @@ function hasSuggestions(categorization) {
   return categorization.suggestions !== void 0;
 }
 
+// src/utils/helpers.ts
+var range = (start, end) => {
+  let length = end - start + 1;
+  return Array.from({ length }, (_, idx) => idx + start);
+};
+var debounce = (fnc, timeout = 300) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      fnc.apply(void 0, args);
+    }, timeout);
+  };
+};
+
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-import React40, { useRef as useRef11, useState as useState8 } from "react";
+import React46, { useEffect as useEffect6, useRef as useRef11, useState as useState9 } from "react";
+
+// src/icons/ChevronDownFill.tsx
+import * as React8 from "react";
+var ChevronDownFill = ({ size = 18, ...props }) => /* @__PURE__ */ React8.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React8.createElement("path", { d: "M4.5 6.75L9 11.25L13.5 6.75", fill: "currentColor" }),
+  /* @__PURE__ */ React8.createElement(
+    "path",
+    {
+      d: "M4.5 6.75L9 11.25L13.5 6.75H4.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import React38, { useRef as useRef10, useState as useState7 } from "react";
+import React44, { useEffect as useEffect5, useRef as useRef10, useState as useState8 } from "react";
+
+// src/icons/AlertCircle.tsx
+import * as React9 from "react";
+var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React9.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",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React9.createElement(
+    "path",
+    {
+      d: "M9 6V9",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React9.createElement(
+    "path",
+    {
+      d: "M9 12H9.0075",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var AlertCircle_default = AlertCircle;
 
 // src/icons/Scissors.tsx
-import * as React8 from "react";
-var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement(
+import * as React10 from "react";
+var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React10.createElement(
   "svg",
   {
     viewBox: "0 0 11 11",
@@ -721,7 +803,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
     width: size,
     height: size
   },
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M2.75 4.125C3.50939 4.125 4.125 3.50939 4.125 2.75C4.125 1.99061 3.50939 1.375 2.75 1.375C1.99061 1.375 1.375 1.99061 1.375 2.75C1.375 3.50939 1.99061 4.125 2.75 4.125Z",
@@ -729,7 +811,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -744,7 +826,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M2.75 9.625C3.50939 9.625 4.125 9.00939 4.125 8.25C4.125 7.49061 3.50939 6.875 2.75 6.875C1.99061 6.875 1.375 7.49061 1.375 8.25C1.375 9.00939 1.99061 9.625 2.75 9.625Z",
@@ -752,7 +834,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -767,7 +849,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M9.16668 1.83325L3.72168 7.27825",
@@ -775,7 +857,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -790,7 +872,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M6.63232 6.63672L9.16691 9.16672",
@@ -798,7 +880,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -813,7 +895,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M3.72168 3.72168L5.50001 5.50001",
@@ -821,7 +903,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -839,44 +921,11 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
 );
 var Scissors_default = Scissors;
 
-// src/icons/X.tsx
-import * as React9 from "react";
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React9.createElement(
-    "path",
-    {
-      d: "M13.5 4.5L4.5 13.5",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React9.createElement(
-    "path",
-    {
-      d: "M4.5 4.5L13.5 13.5",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var X_default = X;
-
 // src/components/Badge/Badge.tsx
-import React21 from "react";
+import React22 from "react";
 
 // src/components/Button/Button.tsx
-import React10, { useRef as useRef3 } from "react";
+import React11, { useRef as useRef3 } from "react";
 import classNames from "classnames";
 var Button = ({
   className,
@@ -886,16 +935,19 @@ var Button = ({
   rightIcon,
   iconOnly,
   iconAsPrimary = false,
+  justify = "center",
   ...props
 }) => {
   const buttonRef = useRef3(null);
-  let justify = "center";
-  if (leftIcon && rightIcon) {
-    justify = "space-between";
+  let justifyContent = "center";
+  if (justify) {
+    justifyContent = justify;
+  } else if (leftIcon && rightIcon) {
+    justifyContent = "space-between";
   } else if (rightIcon) {
-    justify = "space-between";
+    justifyContent = "space-between";
   } else if (leftIcon) {
-    justify = "start";
+    justifyContent = "start";
   }
   const baseClassName = classNames(
     "Layer__btn",
@@ -910,7 +962,7 @@ var Button = ({
   const stopAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
     (el) => el.endElement()
   );
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     "button",
     {
       ...props,
@@ -919,7 +971,7 @@ var Button = ({
       onMouseLeave: stopAnimation,
       ref: buttonRef
     },
-    /* @__PURE__ */ React10.createElement("span", { className: `Layer__btn-content Layer__justify--${justify}` }, leftIcon && /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React11.createElement("span", { className: `Layer__btn-content Layer__justify--${justifyContent}` }, leftIcon && /* @__PURE__ */ React11.createElement(
       "span",
       {
         className: classNames(
@@ -928,7 +980,7 @@ var Button = ({
         )
       },
       leftIcon
-    ), !iconOnly && /* @__PURE__ */ React10.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ React10.createElement(
+    ), !iconOnly && /* @__PURE__ */ React11.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ React11.createElement(
       "span",
       {
         className: classNames(
@@ -941,12 +993,30 @@ var Button = ({
   );
 };
 
-// src/components/Button/SubmitButton.tsx
-import React18 from "react";
+// src/components/Button/IconButton.tsx
+import React12 from "react";
+import classNames2 from "classnames";
+var IconButton = ({
+  className,
+  children,
+  icon,
+  active,
+  ...props
+}) => {
+  const baseClassName = classNames2(
+    "Layer__icon-btn",
+    `Layer__icon-btn--${active ? "active" : "inactive"}`,
+    className
+  );
+  return /* @__PURE__ */ React12.createElement("button", { ...props, className: baseClassName }, icon);
+};
 
-// src/icons/AlertCircle.tsx
-import * as React11 from "react";
-var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createElement(
+// src/components/Button/RetryButton.tsx
+import React14 from "react";
+
+// src/icons/RefreshCcw.tsx
+import * as React13 from "react";
+var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -956,63 +1026,71 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React13.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",
+      d: "M0.75 3V7.5H5.25",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React13.createElement(
     "path",
     {
-      d: "M9 6V9",
+      d: "M17.25 15V10.5H12.75",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React13.createElement(
     "path",
     {
-      d: "M9 12H9.0075",
+      d: "M15.3675 6.75C14.9871 5.67508 14.3407 4.71405 13.4884 3.95656C12.6361 3.19907 11.6059 2.66982 10.4938 2.41819C9.38167 2.16656 8.22393 2.20075 7.12861 2.51758C6.03328 2.8344 5.03606 3.42353 4.23 4.23L0.75 7.5M17.25 10.5L13.77 13.77C12.9639 14.5765 11.9667 15.1656 10.8714 15.4824C9.77607 15.7992 8.61833 15.8334 7.50621 15.5818C6.3941 15.3302 5.36385 14.8009 4.5116 14.0434C3.65935 13.2859 3.01288 12.3249 2.6325 11.25",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   )
 );
-var AlertCircle_default = AlertCircle;
+var RefreshCcw_default = RefreshCcw;
 
-// src/icons/Check.tsx
-import * as React12 from "react";
-var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
-  "svg",
-  {
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React12.createElement(
-    "path",
+// src/components/Button/RetryButton.tsx
+import classNames3 from "classnames";
+var RetryButton = ({
+  className,
+  processing,
+  disabled,
+  error,
+  children,
+  ...props
+}) => {
+  const baseClassName = classNames3(
+    "Layer__retry-btn",
+    processing ? "Layer__btn--processing" : "",
+    className
+  );
+  return /* @__PURE__ */ React14.createElement(
+    Button,
     {
-      d: "M15 4.5L6.75 12.75L3 9",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var Check_default = Check;
+      ...props,
+      className: baseClassName,
+      variant: "secondary" /* secondary */,
+      disabled: processing || disabled,
+      rightIcon: /* @__PURE__ */ React14.createElement(RefreshCcw_default, { size: 12 }),
+      justify: "center"
+    },
+    children
+  );
+};
+
+// src/components/Button/SubmitButton.tsx
+import React20 from "react";
 
 // src/icons/CheckCircle.tsx
-import * as React13 from "react";
-var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createElement(
+import * as React15 from "react";
+var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1022,7 +1100,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React13.createElement(
+  /* @__PURE__ */ React15.createElement(
     "path",
     {
       d: "M16.5 8.30999V8.99999C16.4991 10.6173 15.9754 12.191 15.007 13.4864C14.0386 14.7817 12.6775 15.7293 11.1265 16.1879C9.57557 16.6465 7.91794 16.5914 6.40085 16.0309C4.88375 15.4704 3.58848 14.4346 2.70821 13.0778C1.82794 11.721 1.40984 10.116 1.51625 8.50223C1.62266 6.88841 2.2479 5.35223 3.2987 4.12279C4.34951 2.89335 5.76958 2.03653 7.34713 1.6801C8.92469 1.32367 10.5752 1.48674 12.0525 2.14499",
@@ -1031,7 +1109,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React13.createElement(
+  /* @__PURE__ */ React15.createElement(
     "path",
     {
       d: "M16.5 3L9 10.5075L6.75 8.2575",
@@ -1044,8 +1122,8 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createEle
 var CheckCircle_default = CheckCircle;
 
 // src/icons/Loader.tsx
-import * as React14 from "react";
-var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
+import * as React16 from "react";
+var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React16.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1055,7 +1133,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M9 1.5V4.5",
@@ -1064,7 +1142,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M9 13.5V16.5",
@@ -1073,7 +1151,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M3.6975 3.6975L5.82 5.82",
@@ -1082,7 +1160,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M12.18 12.18L14.3025 14.3025",
@@ -1091,7 +1169,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M1.5 9H4.5",
@@ -1100,7 +1178,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M13.5 9H16.5",
@@ -1109,7 +1187,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M3.6975 14.3025L5.82 12.18",
@@ -1118,7 +1196,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M12.18 5.82L14.3025 3.6975",
@@ -1131,8 +1209,8 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
 var Loader_default = Loader;
 
 // src/icons/Save.tsx
-import * as React15 from "react";
-var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
+import * as React17 from "react";
+var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1142,7 +1220,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React17.createElement(
     "path",
     {
       d: "M14.25 15.75H3.75C3.35218 15.75 2.97064 15.592 2.68934 15.3107C2.40804 15.0294 2.25 14.6478 2.25 14.25V3.75C2.25 3.35218 2.40804 2.97064 2.68934 2.68934C2.97064 2.40804 3.35218 2.25 3.75 2.25H12L15.75 6V14.25C15.75 14.6478 15.592 15.0294 15.3107 15.3107C15.0294 15.592 14.6478 15.75 14.25 15.75Z",
@@ -1151,7 +1229,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React17.createElement(
     "path",
     {
       d: "M12.75 15.75V9.75H5.25V15.75",
@@ -1160,7 +1238,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React17.createElement(
     "path",
     {
       d: "M5.25 2.25V6H11.25",
@@ -1173,14 +1251,14 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
 var Save_default = Save;
 
 // src/components/Tooltip/Tooltip.tsx
-import React17, {
+import React19, {
   forwardRef,
   isValidElement,
   cloneElement
 } from "react";
 
 // src/components/Tooltip/useTooltip.ts
-import React16, { useState as useState3 } from "react";
+import React18, { useState as useState3 } from "react";
 import {
   useFloating,
   autoUpdate,
@@ -1194,9 +1272,9 @@ import {
   useInteractions,
   useTransitionStyles
 } from "@floating-ui/react";
-var TooltipContext = React16.createContext(null);
+var TooltipContext = React18.createContext(null);
 var useTooltipContext = () => {
-  const context = React16.useContext(TooltipContext);
+  const context = React18.useContext(TooltipContext);
   if (context == null) {
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   }
@@ -1248,7 +1326,7 @@ var useTooltip = ({
     },
     duration: 300
   });
-  return React16.useMemo(
+  return React18.useMemo(
     () => ({
       open,
       setOpen,
@@ -1269,7 +1347,7 @@ var Tooltip = ({
   ...options
 }) => {
   const tooltip = useTooltip(options);
-  return /* @__PURE__ */ React17.createElement(TooltipContext.Provider, { value: tooltip }, children);
+  return /* @__PURE__ */ React19.createElement(TooltipContext.Provider, { value: tooltip }, children);
 };
 var TooltipTrigger = forwardRef(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
   const context = useTooltipContext();
@@ -1286,7 +1364,7 @@ var TooltipTrigger = forwardRef(function TooltipTrigger2({ children, asChild = f
       })
     );
   }
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "span",
     {
       ref,
@@ -1302,7 +1380,7 @@ var TooltipContent = forwardRef(function TooltipContent2({ style, className, ...
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!context.open || context.disabled)
     return null;
-  return /* @__PURE__ */ React17.createElement(FloatingPortal, null, /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(FloatingPortal, null, /* @__PURE__ */ React19.createElement(
     "div",
     {
       ref,
@@ -1312,34 +1390,27 @@ var TooltipContent = forwardRef(function TooltipContent2({ style, className, ...
       },
       ...context.getFloatingProps(props)
     },
-    /* @__PURE__ */ React17.createElement("div", { className: "Layer__tooltip-content ", style: { ...context.styles } }, props.children)
+    /* @__PURE__ */ React19.createElement("div", { className: "Layer__tooltip-content ", style: { ...context.styles } }, props.children)
   ));
 });
 
 // src/components/Button/SubmitButton.tsx
-import classNames2 from "classnames";
+import classNames4 from "classnames";
 var buildRightIcon = ({
   processing,
   error,
   action
 }) => {
   if (processing) {
-    return /* @__PURE__ */ React18.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
+    return /* @__PURE__ */ React20.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
   }
   if (error) {
-    return /* @__PURE__ */ React18.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React18.createElement(TooltipTrigger, null, /* @__PURE__ */ React18.createElement(AlertCircle_default, { size: 14 })), /* @__PURE__ */ React18.createElement(TooltipContent, { className: "Layer__tooltip" }, error));
+    return /* @__PURE__ */ React20.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React20.createElement(TooltipTrigger, null, /* @__PURE__ */ React20.createElement(AlertCircle_default, { size: 14 })), /* @__PURE__ */ React20.createElement(TooltipContent, { className: "Layer__tooltip" }, error));
   }
   if (action === "update" /* UPDATE */) {
-    return /* @__PURE__ */ React18.createElement("span", { className: "Layer__pt-2" }, /* @__PURE__ */ React18.createElement(Save_default, { size: 14 }));
+    return /* @__PURE__ */ React20.createElement("span", { className: "Layer__pt-2" }, /* @__PURE__ */ React20.createElement(Save_default, { size: 14 }));
   }
-  return /* @__PURE__ */ React18.createElement("span", null, /* @__PURE__ */ React18.createElement(Check_default, { className: "Layer__btn-icon--on-active", size: 14 }), /* @__PURE__ */ React18.createElement(
-    CheckCircle_default,
-    {
-      className: "Layer__btn-icon--on-inactive",
-      size: 14,
-      style: { paddingTop: 4 }
-    }
-  ));
+  return /* @__PURE__ */ React20.createElement("span", null, /* @__PURE__ */ React20.createElement(CheckCircle_default, { size: 14, style: { paddingTop: 4 } }));
 };
 var SubmitButton = ({
   active,
@@ -1351,11 +1422,11 @@ var SubmitButton = ({
   action = "save" /* SAVE */,
   ...props
 }) => {
-  const baseClassName = classNames2(
+  const baseClassName = classNames4(
     active ? "Layer__btn--active" : "",
     className
   );
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Button,
     {
       ...props,
@@ -1369,38 +1440,20 @@ var SubmitButton = ({
   );
 };
 
-// src/components/Button/IconButton.tsx
-import React19 from "react";
-import classNames3 from "classnames";
-var IconButton = ({
-  className,
-  children,
-  icon,
-  active,
-  ...props
-}) => {
-  const baseClassName = classNames3(
-    "Layer__icon-btn",
-    `Layer__icon-btn--${active ? "active" : "inactive"}`,
-    className
-  );
-  return /* @__PURE__ */ React19.createElement("button", { ...props, className: baseClassName }, icon);
-};
-
 // src/components/Button/TextButton.tsx
-import React20 from "react";
-import classNames4 from "classnames";
+import React21 from "react";
+import classNames5 from "classnames";
 var TextButton = ({
   className,
   children,
   ...props
 }) => {
-  const baseClassName = classNames4("Layer__text-btn", className);
-  return /* @__PURE__ */ React20.createElement("button", { ...props, className: baseClassName }, children);
+  const baseClassName = classNames5("Layer__text-btn", className);
+  return /* @__PURE__ */ React21.createElement("button", { ...props, className: baseClassName }, children);
 };
 
 // src/components/Badge/Badge.tsx
-import classNames5 from "classnames";
+import classNames6 from "classnames";
 var Badge = ({
   icon,
   onClick,
@@ -1409,7 +1462,7 @@ var Badge = ({
   size = "medium" /* MEDIUM */
 }) => {
   const baseProps = {
-    className: classNames5(
+    className: classNames6(
       "Layer__badge",
       onClick || tooltip ? "Layer__badge--clickable" : "",
       `Layer__badge--${size}`
@@ -1417,23 +1470,47 @@ var Badge = ({
     onClick,
     children
   };
-  let content = /* @__PURE__ */ React21.createElement(React21.Fragment, null, icon && /* @__PURE__ */ React21.createElement("span", { className: "Layer__badge__icon" }, icon), children);
-  content = onClick ? /* @__PURE__ */ React21.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ React21.createElement("span", { ...baseProps }, content);
+  let content = /* @__PURE__ */ React22.createElement(React22.Fragment, null, icon && /* @__PURE__ */ React22.createElement("span", { className: "Layer__badge__icon" }, icon), children);
+  content = onClick ? /* @__PURE__ */ React22.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ React22.createElement("span", { ...baseProps }, content);
   if (tooltip) {
-    return /* @__PURE__ */ React21.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React21.createElement(TooltipTrigger, null, content), /* @__PURE__ */ React21.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
+    return /* @__PURE__ */ React22.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ React22.createElement(TooltipTrigger, null, content), /* @__PURE__ */ React22.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
   }
   return content;
 };
 
 // src/components/CategorySelect/CategorySelect.tsx
-import React23 from "react";
+import React25 from "react";
 import Select, {
   components
 } from "react-select";
 
+// src/icons/Check.tsx
+import * as React23 from "react";
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React23.createElement(
+    "path",
+    {
+      d: "M15 4.5L6.75 12.75L3 9",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var Check_default = Check;
+
 // src/icons/MinimizeTwo.tsx
-import * as React22 from "react";
-var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createElement(
+import * as React24 from "react";
+var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1443,7 +1520,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M3 10.5H7.5V15",
@@ -1452,7 +1529,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M15 7.5H10.5V3",
@@ -1461,7 +1538,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M10.5 7.5L15.75 2.25",
@@ -1470,7 +1547,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M2.25 15.75L7.5 10.5",
@@ -1483,7 +1560,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-import classNames6 from "classnames";
+import classNames7 from "classnames";
 import { parseISO as parseISO2, format as formatTime } from "date-fns";
 var mapCategoryToOption = (category) => {
   return {
@@ -1511,13 +1588,13 @@ var mapSuggestedMatchToOption = (record) => {
   };
 };
 var DropdownIndicator = (props) => {
-  return /* @__PURE__ */ React23.createElement(components.DropdownIndicator, { ...props }, /* @__PURE__ */ React23.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ React25.createElement(components.DropdownIndicator, { ...props }, /* @__PURE__ */ React25.createElement(ChevronDown_default, null));
 };
 var GroupHeading = (props) => {
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     components.GroupHeading,
     {
-      className: classNames6(
+      className: classNames7(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       ),
@@ -1530,24 +1607,24 @@ var Option = (props) => {
     return;
   }
   if (props.data.type === "match") {
-    return /* @__PURE__ */ React23.createElement(
+    return /* @__PURE__ */ React25.createElement(
       components.Option,
       {
         ...props,
         className: `${props.className} Layer__select__option-content__match`
       },
-      /* @__PURE__ */ React23.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React23.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO2(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React23.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
-      /* @__PURE__ */ React23.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ React23.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
+      /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && formatTime(parseISO2(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
+      /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
     );
   }
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     components.Option,
     {
       ...props,
       className: `Layer__select__option-menu-content ${props.className}`
     },
-    /* @__PURE__ */ React23.createElement("div", null, props.data.payload.display_name),
-    props.isSelected ? /* @__PURE__ */ React23.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React23.createElement(Check_default, { size: 16 })) : null
+    /* @__PURE__ */ React25.createElement("div", null, props.data.payload.display_name),
+    props.isSelected ? /* @__PURE__ */ React25.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ React25.createElement(Check_default, { size: 16 })) : null
   );
 };
 var allCategoriesDivider = [
@@ -1630,7 +1707,7 @@ 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__ */ React23.createElement(
+  return /* @__PURE__ */ React25.createElement(
     Select,
     {
       name,
@@ -1640,7 +1717,7 @@ var CategorySelect = ({
       isSearchable: true,
       placeholder,
       defaultValue: selected,
-      formatOptionLabel: (props) => /* @__PURE__ */ React23.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ React23.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ React23.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ React23.createElement("span", null, props.payload.display_name)),
+      formatOptionLabel: (props) => /* @__PURE__ */ React25.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ React25.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ React25.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ React25.createElement("span", null, props.payload.display_name)),
       value,
       onChange: (newValue) => newValue && onChange(newValue),
       getOptionLabel: (category) => category.payload.display_name,
@@ -1657,55 +1734,134 @@ var CategorySelect = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import React36, {
+import React42, {
   forwardRef as forwardRef2,
   useImperativeHandle,
-  useState as useState6,
+  useState as useState7,
   useCallback,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useRef as useRef9
 } from "react";
 
-// src/icons/Link.tsx
-import * as React24 from "react";
-var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+// src/icons/ScissorsFullOpen.tsx
+import * as React26 from "react";
+var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.createElement(
   "svg",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
+    viewBox: "0 0 12 12",
     fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React26.createElement("g", { id: "scissors" }, /* @__PURE__ */ React26.createElement(
     "path",
     {
-      d: "M7.5 9.75C7.82209 10.1806 8.23302 10.5369 8.70491 10.7947C9.17681 11.0525 9.69863 11.2058 10.235 11.2442C10.7713 11.2827 11.3097 11.2053 11.8135 11.0173C12.3173 10.8294 12.7748 10.5353 13.155 10.155L15.405 7.905C16.0881 7.19774 16.4661 6.25048 16.4575 5.26724C16.449 4.284 16.0546 3.34346 15.3593 2.64818C14.664 1.9529 13.7235 1.55851 12.7403 1.54997C11.757 1.54143 10.8098 1.9194 10.1025 2.6025L8.8125 3.885",
+      id: "Vector",
+      d: "M3 4.5C3.82843 4.5 4.5 3.82843 4.5 3C4.5 2.17157 3.82843 1.5 3 1.5C2.17157 1.5 1.5 2.17157 1.5 3C1.5 3.82843 2.17157 4.5 3 4.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    "path",
+    {
+      id: "Vector_2",
+      d: "M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    "path",
+    {
+      id: "Vector_3",
+      d: "M10 2L4.06 7.94",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    "path",
+    {
+      id: "Vector_4",
+      d: "M7.235 7.23999L10 9.99999",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React26.createElement(
+    "path",
+    {
+      id: "Vector_5",
+      d: "M4.06 4.06006L6 6.00006",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ))
+);
+var ScissorsFullOpen_default = ScissorsFullOpen;
+
+// src/icons/Trash.tsx
+import * as React27 from "react";
+var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React27.createElement(
+    "path",
+    {
+      d: "M2.25 4.5H3.75H15.75",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React27.createElement(
     "path",
     {
-      d: "M10.5 8.25C10.1779 7.8194 9.76698 7.46311 9.29508 7.2053C8.82319 6.94748 8.30137 6.79416 7.76501 6.75575C7.22865 6.71734 6.69031 6.79473 6.18649 6.98266C5.68267 7.1706 5.22516 7.4647 4.845 7.845L2.595 10.095C1.9119 10.8023 1.53393 11.7495 1.54247 12.7328C1.55101 13.716 1.9454 14.6565 2.64068 15.3518C3.33596 16.0471 4.2765 16.4415 5.25974 16.45C6.24298 16.4586 7.19024 16.0806 7.8975 15.3975L9.18 14.115",
+      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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React27.createElement(
+    "path",
+    {
+      d: "M7.5 8.25V12.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React27.createElement(
+    "path",
+    {
+      d: "M10.5 8.25V12.75",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   )
 );
-var Link_default = Link;
+var Trash_default = Trash;
 
 // src/components/CategoryMenu/CategoryMenu.tsx
-import React25 from "react";
+import React28 from "react";
 import Select2, {
   components as components2
 } from "react-select";
 var DropdownIndicator2 = (props) => {
-  return /* @__PURE__ */ React25.createElement(components2.DropdownIndicator, { ...props }, /* @__PURE__ */ React25.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ React28.createElement(components2.DropdownIndicator, { ...props }, /* @__PURE__ */ React28.createElement(ChevronDown_default, null));
 };
 var CategoryMenu = ({
   bankTransaction,
@@ -1735,7 +1891,7 @@ var CategoryMenu = ({
     };
   }).filter((x) => x);
   const options = [...suggestedOptions, ...categoryOptions];
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Select2,
     {
       name,
@@ -1756,28 +1912,30 @@ var CategoryMenu = ({
 };
 
 // src/components/Input/Input.tsx
-import React26 from "react";
-import classNames7 from "classnames";
+import React29 from "react";
+import classNames8 from "classnames";
 var Input = ({
   className,
   isInvalid,
   errorMessage,
+  leftText,
   ...props
 }) => {
-  const baseClassName = classNames7(
+  const baseClassName = classNames8(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
+    leftText ? "Layer__input--with-left-text" : "",
     className
   );
-  return /* @__PURE__ */ React26.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ React26.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ React26.createElement("input", { ...props, className: baseClassName })), /* @__PURE__ */ React26.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
+  return /* @__PURE__ */ React29.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ React29.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ React29.createElement("input", { ...props, className: baseClassName }), leftText && /* @__PURE__ */ React29.createElement("span", { className: "Layer__input-left-text" }, leftText)), /* @__PURE__ */ React29.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
 };
 
 // src/components/Input/InputGroup.tsx
-import React29 from "react";
+import React33 from "react";
 
 // src/components/Typography/Text.tsx
-import React27, { useRef as useRef6, useState as useState4, useEffect } from "react";
-import classNames8 from "classnames";
+import React30, { useRef as useRef6, useState as useState4, useEffect } from "react";
+import classNames9 from "classnames";
 var Text = ({
   as: Component = "p",
   className,
@@ -1787,12 +1945,12 @@ var Text = ({
   withTooltip,
   ...props
 }) => {
-  const baseClassName = classNames8(
+  const baseClassName = classNames9(
     `Layer__text Layer__text--${size} Layer__text--${weight}`,
     className
   );
   if (withTooltip) {
-    return /* @__PURE__ */ React27.createElement(
+    return /* @__PURE__ */ React30.createElement(
       TextWithTooltip,
       {
         as: Component,
@@ -1805,7 +1963,7 @@ var Text = ({
       children
     );
   }
-  return /* @__PURE__ */ React27.createElement(Component, { ...props, className: baseClassName }, children);
+  return /* @__PURE__ */ React30.createElement(Component, { ...props, className: baseClassName }, children);
 };
 var TextWithTooltip = ({
   as: Component = "p",
@@ -1835,48 +1993,56 @@ var TextWithTooltip = ({
     []
   );
   const [hoverStatus, setHover] = useState4(false);
-  const contentClassName = classNames8(
+  const contentClassName = classNames9(
     "Layer__tooltip",
     tooltipOptions?.contentClassName
   );
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React30.createElement(
     Tooltip,
     {
       disabled: !hoverStatus,
       offset: tooltipOptions?.offset,
       shift: tooltipOptions?.shift
     },
-    /* @__PURE__ */ React27.createElement(TooltipTrigger, null, /* @__PURE__ */ React27.createElement(Component, { className, ref: textElementRef, ...props }, children)),
-    /* @__PURE__ */ React27.createElement(TooltipContent, { className: contentClassName }, children)
+    /* @__PURE__ */ React30.createElement(TooltipTrigger, null, /* @__PURE__ */ React30.createElement(Component, { className, ref: textElementRef, ...props }, children)),
+    /* @__PURE__ */ React30.createElement(TooltipContent, { className: contentClassName }, children)
   );
 };
 
 // src/components/Typography/Heading.tsx
-import React28 from "react";
-import classNames9 from "classnames";
+import React31 from "react";
+import classNames10 from "classnames";
 var Heading = ({
   as: Component = "h2",
   className,
   children,
   size = "primary" /* primary */
 }) => {
-  const baseClassName = classNames9(
+  const baseClassName = classNames10(
     `Layer__heading Layer__heading--${size}`,
     className
   );
-  return /* @__PURE__ */ React28.createElement(Component, { className: baseClassName }, children);
+  return /* @__PURE__ */ React31.createElement(Component, { className: baseClassName }, children);
+};
+
+// src/components/Typography/ErrorText.tsx
+import React32 from "react";
+import classNames11 from "classnames";
+var ErrorText = ({ className, ...props }) => {
+  const baseClassName = classNames11("Layer__text--error", className);
+  return /* @__PURE__ */ React32.createElement(Text, { ...props, className: baseClassName });
 };
 
 // src/components/Input/InputGroup.tsx
-import classNames10 from "classnames";
+import classNames12 from "classnames";
 var InputGroup = ({
   label,
   name,
   className,
   children
 }) => {
-  const baseClassName = classNames10("Layer__input-group", className);
-  return /* @__PURE__ */ React29.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ React29.createElement(
+  const baseClassName = classNames12("Layer__input-group", className);
+  return /* @__PURE__ */ React33.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ React33.createElement(
     Text,
     {
       as: "label",
@@ -1889,11 +2055,11 @@ var InputGroup = ({
 };
 
 // src/components/Input/FileInput.tsx
-import React31, { useRef as useRef7 } from "react";
+import React35, { useRef as useRef7 } from "react";
 
 // src/icons/UploadCloud.tsx
-import * as React30 from "react";
-var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createElement(
+import * as React34 from "react";
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1903,7 +2069,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -1912,7 +2078,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.createElement(
     "path",
     {
       d: "M9 9V15.75",
@@ -1921,7 +2087,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.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",
@@ -1930,7 +2096,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -1956,15 +2122,15 @@ var FileInput = ({ text = "Upload", onUpload }) => {
       onUpload(fileUploaded);
     }
   };
-  return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(
     Button,
     {
       onClick,
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React31.createElement(UploadCloud_default, null)
+      rightIcon: /* @__PURE__ */ React35.createElement(UploadCloud_default, null)
     },
     text
-  ), /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React35.createElement(
     "input",
     {
       type: "file",
@@ -1976,10 +2142,10 @@ var FileInput = ({ text = "Upload", onUpload }) => {
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import React33 from "react";
+import React37 from "react";
 
 // src/components/BankTransactionRow/MatchBadge.tsx
-import React32 from "react";
+import React36 from "react";
 import { parseISO as parseISO3, format as formatTime2 } from "date-fns";
 var MatchBadge = ({
   bankTransaction,
@@ -1989,11 +2155,11 @@ var MatchBadge = ({
 }) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
     const { date, amount, description } = bankTransaction.match.bank_transaction;
-    return /* @__PURE__ */ React32.createElement(
+    return /* @__PURE__ */ React36.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ React32.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ React32.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React32.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO3(date), dateFormat)), /* @__PURE__ */ React32.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ React32.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        icon: /* @__PURE__ */ React36.createElement(MinimizeTwo_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ React36.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ React36.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, formatTime2(parseISO3(date), dateFormat)), /* @__PURE__ */ React36.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ React36.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2002,20 +2168,26 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-import classNames11 from "classnames";
+import classNames13 from "classnames";
 import { parseISO as parseISO4, format as formatTime3 } from "date-fns";
 var MatchForm = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
-  setSelectedMatchId
+  setSelectedMatchId,
+  matchFormError
 }) => {
-  return /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__status` })), bankTransaction.suggested_matches?.map((match, idx) => {
-    return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ React37.createElement(
+    "div",
+    {
+      className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
+    }
+  )), bankTransaction.suggested_matches?.map((match, idx) => {
+    return /* @__PURE__ */ React37.createElement(
       "div",
       {
         key: idx,
-        className: classNames11(
+        className: classNames13(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2027,14 +2199,15 @@ var MatchForm = ({
           setSelectedMatchId(match.id);
         }
       },
-      /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React37.createElement(
         "div",
         {
           className: `Layer__nowrap ${classNamePrefix}__match-table__date`
         },
-        formatTime3(parseISO4(match.details.date), DATE_FORMAT)
+        /* @__PURE__ */ React37.createElement("span", null, formatTime3(parseISO4(match.details.date), DATE_FORMAT)),
+        /* @__PURE__ */ React37.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
       ),
-      /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ React37.createElement(
         Text,
         {
           className: `${classNamePrefix}__match-table__desc-tooltip`,
@@ -2042,9 +2215,7 @@ var MatchForm = ({
           as: "span"
         },
         match.details.description
-      )),
-      /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
-      /* @__PURE__ */ React33.createElement("div", { className: `${classNamePrefix}__match-table__status` }, match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React33.createElement(
+      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React37.createElement("span", { className: "match-badge" }, /* @__PURE__ */ React37.createElement(
         MatchBadge,
         {
           classNamePrefix,
@@ -2052,28 +2223,44 @@ var MatchForm = ({
           dateFormat: DATE_FORMAT,
           text: "Matched"
         }
-      ))
+      ))),
+      /* @__PURE__ */ React37.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
+      /* @__PURE__ */ React37.createElement(
+        "div",
+        {
+          className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
+        },
+        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ React37.createElement(
+          MatchBadge,
+          {
+            classNamePrefix,
+            bankTransaction,
+            dateFormat: DATE_FORMAT,
+            text: "Matched"
+          }
+        )
+      )
     );
-  }));
+  }), matchFormError && /* @__PURE__ */ React37.createElement(ErrorText, null, matchFormError));
 };
 
 // src/components/Textarea/Textarea.tsx
-import React34 from "react";
-import classNames12 from "classnames";
+import React38 from "react";
+import classNames14 from "classnames";
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = classNames12("Layer__textarea", className);
-  return /* @__PURE__ */ React34.createElement("textarea", { ...props, className: baseClassName });
+  const baseClassName = classNames14("Layer__textarea", className);
+  return /* @__PURE__ */ React38.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
-import React35, {
+import React39, {
   useEffect as useEffect2,
   useState as useState5
 } from "react";
-import classNames13 from "classnames";
+import classNames15 from "classnames";
 var Toggle = ({
   name,
   options,
@@ -2090,7 +2277,7 @@ var Toggle = ({
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = classNames13(
+  const baseClassName = classNames15(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2138,7 +2325,7 @@ var Toggle = ({
     }
     return selectedIndex;
   };
-  return /* @__PURE__ */ React35.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React39.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ React39.createElement(
     ToggleOption,
     {
       ...option,
@@ -2150,7 +2337,7 @@ var Toggle = ({
       disabled: option.disabled ?? false,
       index
     }
-  )), /* @__PURE__ */ React35.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+  )), /* @__PURE__ */ React39.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
 };
 var ToggleOption = ({
   checked,
@@ -2163,7 +2350,21 @@ var ToggleOption = ({
   disabled,
   index
 }) => {
-  return /* @__PURE__ */ React35.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React35.createElement(
+  if (disabled) {
+    return /* @__PURE__ */ React39.createElement(Tooltip, null, /* @__PURE__ */ React39.createElement(TooltipTrigger, null, /* @__PURE__ */ React39.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React39.createElement(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled: disabled ?? false,
+        "data-idx": index
+      }
+    ), /* @__PURE__ */ React39.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React39.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React39.createElement("span", null, label)))), /* @__PURE__ */ React39.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+  }
+  return /* @__PURE__ */ React39.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ React39.createElement(
     "input",
     {
       type: "radio",
@@ -2174,11 +2375,158 @@ var ToggleOption = ({
       disabled: disabled ?? false,
       "data-idx": index
     }
-  ), /* @__PURE__ */ React35.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React35.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React35.createElement("span", null, label)));
+  ), /* @__PURE__ */ React39.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ React39.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ React39.createElement("span", null, label)));
+};
+
+// src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
+import React41, { useEffect as useEffect3, useState as useState6 } from "react";
+
+// src/icons/AlertOctagon.tsx
+import * as React40 from "react";
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React40.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React40.createElement(
+    "path",
+    {
+      d: "M5.895 1.5H12.105L16.5 5.895V12.105L12.105 16.5H5.895L1.5 12.105V5.895L5.895 1.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React40.createElement(
+    "path",
+    {
+      d: "M9 6V9",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React40.createElement(
+    "path",
+    {
+      d: "M9 12H9.0075",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var AlertOctagon_default = AlertOctagon;
+
+// src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
+var ERROR_TITLE = "Approval Failed";
+var ERROR_MESSAGE = "Something went wrong, try again later";
+var NOTIFICATION_TIME = 4e3;
+var FADE_OUT_TIME_WAIT = 1e3;
+var notificationsCache = [];
+var APIErrorNotifications = ({
+  bankTransaction,
+  containerWidth
+}) => {
+  const [notifications, setNotifications] = useState6([]);
+  const pushNotification = (title, message) => {
+    const timestamp = (/* @__PURE__ */ new Date()).valueOf();
+    if (notificationsCache.find(
+      (n) => n.timestamp === timestamp && n.bankTransactionId !== bankTransaction.id
+    )) {
+      return;
+    }
+    notificationsCache = notificationsCache.concat({
+      bankTransactionId: bankTransaction.id,
+      timestamp,
+      title,
+      message
+    });
+    const ids = notificationsCache.map(
+      ({ bankTransactionId }) => bankTransactionId
+    );
+    const timestamps = notificationsCache.map(({ timestamp: timestamp2 }) => timestamp2);
+    notificationsCache = notificationsCache.filter(
+      ({ bankTransactionId, timestamp: timestamp2 }, index) => !ids.includes(bankTransactionId, index + 1) && !timestamps.includes(timestamp2, index + 1)
+    );
+    setNotifications(notificationsCache.concat());
+  };
+  const deleteNotification = (timestamp) => {
+    notificationsCache = notificationsCache.filter(
+      (n) => n.timestamp !== timestamp
+    );
+    setNotifications(notificationsCache.concat());
+  };
+  useEffect3(() => {
+    if (bankTransaction.error) {
+      pushNotification(ERROR_TITLE, ERROR_MESSAGE);
+    }
+  }, [bankTransaction.error]);
+  return /* @__PURE__ */ React41.createElement(
+    "div",
+    {
+      className: "Layer__bank-transactions__notifications",
+      style: containerWidth ? { left: containerWidth - 324 } : {}
+    },
+    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ React41.createElement(
+      Notification,
+      {
+        key: notification.timestamp,
+        notification,
+        deleteNotification
+      }
+    ))
+  );
+};
+var Notification = ({
+  notification,
+  deleteNotification
+}) => {
+  const [visible, setVisible] = useState6(false);
+  useEffect3(() => {
+    setVisible(true);
+    const timer = setTimeout(() => {
+      hideNotification();
+    }, NOTIFICATION_TIME);
+    return () => clearTimeout(timer);
+  }, []);
+  const hideNotification = () => {
+    setVisible(false);
+    setTimeout(() => {
+      deleteNotification(notification.timestamp);
+    }, FADE_OUT_TIME_WAIT);
+  };
+  return /* @__PURE__ */ React41.createElement(
+    "div",
+    {
+      className: `Layer__bank-transactions__notification ${visible ? "notification-enter" : "notification-exit"}`,
+      onClick: hideNotification
+    },
+    /* @__PURE__ */ React41.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ React41.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ React41.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ React41.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ React41.createElement(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__notification-title"
+      },
+      notification.title
+    ), /* @__PURE__ */ React41.createElement(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__notification-message"
+      },
+      notification.message
+    )))
+  );
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-import classNames14 from "classnames";
+import classNames16 from "classnames";
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2193,29 +2541,44 @@ var isAlreadyMatched = (bankTransaction) => {
   }
   return void 0;
 };
+var validateSplit = (splitData) => {
+  let valid = true;
+  splitData.splits.forEach((split) => {
+    if (split.amount <= 0) {
+      valid = false;
+    } else if (!split.category) {
+      valid = false;
+    }
+  });
+  return valid;
+};
 var ExpandedBankTransactionRow = forwardRef2(
   ({
     bankTransaction,
     isOpen = false,
+    editable,
     asListItem = false,
-    submitBtnText = "Save"
+    submitBtnText = "Save",
+    containerWidth
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
     } = useBankTransactions();
-    const [purpose, setPurpose] = useState6(
+    const [purpose, setPurpose] = useState7(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
     );
-    const [selectedMatchId, setSelectedMatchId] = useState6(
+    const [selectedMatchId, setSelectedMatchId] = useState7(
       isAlreadyMatched(bankTransaction)
     );
-    const [height, setHeight] = useState6(0);
-    const [isOver, setOver] = useState6(false);
+    const [matchFormError, setMatchFormError] = useState7();
+    const [splitFormError, setSplitFormError] = useState7();
+    const [height, setHeight] = useState7(0);
+    const [isOver, setOver] = useState7(false);
     const bodyRef = useRef9(null);
-    const [isLoaded, setIsLoaded] = useState6(false);
+    const [isLoaded, setIsLoaded] = useState7(false);
     const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
-    const [rowState, updateRowState] = useState6({
+    const [rowState, updateRowState] = useState7({
       splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
         return {
           amount: c.amount || 0,
@@ -2232,13 +2595,16 @@ var ExpandedBankTransactionRow = forwardRef2(
       description: "",
       file: void 0
     });
-    const addSplit = () => updateRowState({
-      ...rowState,
-      splits: [
-        ...rowState.splits,
-        { amount: 0, inputValue: "0.00", category: defaultCategory }
-      ]
-    });
+    const addSplit = () => {
+      updateRowState({
+        ...rowState,
+        splits: [
+          ...rowState.splits,
+          { amount: 0, inputValue: "0.00", category: defaultCategory }
+        ]
+      });
+      setSplitFormError(void 0);
+    };
     const removeSplit = (index) => {
       const newSplits = rowState.splits.filter((_v, idx) => idx !== index);
       const splitTotal = newSplits.reduce((sum, split, index2) => {
@@ -2252,6 +2618,7 @@ var ExpandedBankTransactionRow = forwardRef2(
         ...rowState,
         splits: newSplits
       });
+      setSplitFormError(void 0);
     };
     const updateAmounts = (rowNumber) => (event) => {
       const newAmount = dollarsToCents(event.target.value) || 0;
@@ -2266,28 +2633,47 @@ var ExpandedBankTransactionRow = forwardRef2(
       rowState.splits[0].amount = remaining;
       rowState.splits[0].inputValue = centsToDollars(remaining);
       updateRowState({ ...rowState });
+      setSplitFormError(void 0);
     };
     const onBlur = (event) => {
       if (event.target.value === "") {
         const [_, index] = event.target.name.split("-");
         rowState.splits[parseInt(index)].inputValue = "0.00";
         updateRowState({ ...rowState });
+        setSplitFormError(void 0);
       }
     };
-    const onChangePurpose = (event) => setPurpose(
-      event.target.value === "match" /* match */ ? "match" /* match */ : "categorize" /* categorize */
-    );
+    const onChangePurpose = (event) => {
+      setPurpose(
+        event.target.value === "match" /* match */ ? "match" /* match */ : "categorize" /* categorize */
+      );
+      setSplitFormError(void 0);
+      setMatchFormError(void 0);
+    };
     const changeCategory = (index, newValue) => {
       rowState.splits[index].category = newValue;
       updateRowState({ ...rowState });
+      setSplitFormError(void 0);
     };
     const save = () => {
       if (purpose === "match" /* match */) {
-        if (selectedMatchId && selectedMatchId !== isAlreadyMatched(bankTransaction)) {
+        if (!selectedMatchId) {
+          setMatchFormError("Select an option to match the transaction");
+        } else if (selectedMatchId && selectedMatchId !== isAlreadyMatched(bankTransaction)) {
           onMatchSubmit(selectedMatchId);
         }
         return;
       }
+      if (!validateSplit(rowState)) {
+        if (rowState.splits.length > 1) {
+          setSplitFormError(
+            "Use only positive amounts and select category for each entry"
+          );
+        } else {
+          setSplitFormError("Category is required");
+        }
+        return;
+      }
       categorizeBankTransaction2(
         bankTransaction.id,
         rowState.splits.length === 1 ? {
@@ -2303,7 +2689,7 @@ var ExpandedBankTransactionRow = forwardRef2(
             amount: split.amount
           }))
         }
-      ).catch((e) => console.error(e));
+      );
     };
     useImperativeHandle(ref, () => ({
       save
@@ -2332,7 +2718,7 @@ var ExpandedBankTransactionRow = forwardRef2(
       },
       [isOpen]
     );
-    useEffect3(() => {
+    useEffect4(() => {
       if (!isLoaded) {
         return;
       }
@@ -2344,20 +2730,20 @@ var ExpandedBankTransactionRow = forwardRef2(
         });
       }
     }, [getDivHeight, isOpen]);
-    useEffect3(() => {
+    useEffect4(() => {
       setIsLoaded(true);
       setOver(true);
     }, []);
     const className = "Layer__expanded-bank-transaction-row";
     const shouldHide = !isOpen && isOver;
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React42.createElement(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
         style: { height },
         onTransitionEnd: handleTransitionEnd
       },
-      shouldHide ? null : /* @__PURE__ */ React36.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ React36.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React36.createElement(
+      shouldHide ? null : /* @__PURE__ */ React42.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ React42.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ React42.createElement(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -2376,46 +2762,50 @@ var ExpandedBankTransactionRow = forwardRef2(
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ React36.createElement(
+      )), /* @__PURE__ */ React42.createElement(
         "div",
         {
           className: `${className}__content`,
           id: `expanded-${bankTransaction.id}`
         },
-        /* @__PURE__ */ React36.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React42.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ React42.createElement(
           "div",
           {
-            className: classNames14(
+            className: classNames16(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ React36.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React36.createElement(
+          /* @__PURE__ */ React42.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React42.createElement(
             MatchForm,
             {
               classNamePrefix: className,
               bankTransaction,
               selectedMatchId,
-              setSelectedMatchId
+              setSelectedMatchId: (id) => {
+                setMatchFormError(void 0);
+                setSelectedMatchId(id);
+              },
+              matchFormError
             }
           ))
-        ), /* @__PURE__ */ React36.createElement(
+        ), /* @__PURE__ */ React42.createElement(
           "div",
           {
-            className: classNames14(
+            className: classNames16(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ React36.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React36.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ React36.createElement(
+          /* @__PURE__ */ React42.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ React42.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ React42.createElement(
             "div",
             {
               className: `${className}__table-cell--split-entry`,
               key: `split-${index}`
             },
-            /* @__PURE__ */ React36.createElement(
+            /* @__PURE__ */ React42.createElement(
               Input,
               {
                 type: "text",
@@ -2428,66 +2818,81 @@ var ExpandedBankTransactionRow = forwardRef2(
                 errorMessage: "Negative values are not allowed"
               }
             ),
-            /* @__PURE__ */ React36.createElement(
-              CategoryMenu,
+            /* @__PURE__ */ React42.createElement(
+              "div",
               {
-                bankTransaction,
-                name: `category-${index}${asListItem ? "-li" : ""}`,
-                value: split.category,
-                onChange: (value) => changeCategory(index, value),
-                className: "Layer__category-menu--full"
-              }
-            ),
-            index > 0 && /* @__PURE__ */ React36.createElement(
-              Button,
-              {
-                onClick: () => removeSplit(index),
-                rightIcon: /* @__PURE__ */ React36.createElement(Link_default, { size: 14 }),
-                variant: "secondary" /* secondary */
+                className: `${className}__table-cell--split-entry__right-col`
               },
-              "Merge"
+              /* @__PURE__ */ React42.createElement(
+                CategoryMenu,
+                {
+                  bankTransaction,
+                  name: `category-${index}${asListItem ? "-li" : ""}`,
+                  value: split.category,
+                  onChange: (value) => changeCategory(index, value),
+                  className: "Layer__category-menu--full"
+                }
+              ),
+              index > 0 && /* @__PURE__ */ React42.createElement(
+                Button,
+                {
+                  className: `${className}__table-cell--split-entry__merge-btn`,
+                  onClick: () => removeSplit(index),
+                  rightIcon: /* @__PURE__ */ React42.createElement(Trash_default, { size: 18 }),
+                  variant: "secondary" /* secondary */,
+                  iconOnly: true
+                }
+              )
             )
-          ))), /* @__PURE__ */ React36.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React36.createElement(
+          ))), splitFormError && /* @__PURE__ */ React42.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ React42.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ React42.createElement(
+            Input,
+            {
+              disabled: true,
+              leftText: "Total",
+              value: `$${centsToDollars(
+                rowState.splits.reduce(
+                  (x, { amount }) => x + amount,
+                  0
+                )
+              )}`
+            }
+          ), /* @__PURE__ */ React42.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ React42.createElement(
             TextButton,
             {
               onClick: addSplit,
               disabled: rowState.splits.length > 5
             },
             "Add new split"
-          ) : /* @__PURE__ */ React36.createElement(
+          ) : /* @__PURE__ */ React42.createElement(
             Button,
             {
               onClick: addSplit,
-              rightIcon: /* @__PURE__ */ React36.createElement(Scissors_default, { size: 14 }),
+              rightIcon: /* @__PURE__ */ React42.createElement(ScissorsFullOpen_default, { size: 14 }),
               variant: "secondary" /* secondary */,
               disabled: rowState.splits.length > 5
             },
             "Split"
-          )), rowState.splits.length > 1 && /* @__PURE__ */ React36.createElement(
-            Text,
-            {
-              size: "sm" /* sm */,
-              className: `${className}__splits-total`
-            },
-            "Total: $",
-            centsToDollars(
-              rowState.splits.reduce(
-                (x, { amount }) => x + amount,
-                0
-              )
-            )
-          ))
+          ))))
         )),
-        /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React42.createElement(
           InputGroup,
           {
             className: `${className}__description`,
             name: "description"
           },
-          /* @__PURE__ */ React36.createElement(Textarea, { name: "description", placeholder: "Add description" })
+          /* @__PURE__ */ React42.createElement(Textarea, { name: "description", placeholder: "Add description" })
         ),
-        /* @__PURE__ */ React36.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ React36.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem ? /* @__PURE__ */ React36.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ React36.createElement(
+        /* @__PURE__ */ React42.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ React42.createElement(FileInput, { text: "Upload receipt" })),
+        asListItem ? /* @__PURE__ */ React42.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ React42.createElement(
+          Text,
+          {
+            as: "span",
+            size: "md" /* md */,
+            className: "Layer__unsaved-info"
+          },
+          /* @__PURE__ */ React42.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ React42.createElement(AlertCircle_default, { size: 12 })
+        ) : null, /* @__PURE__ */ React42.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2497,18 +2902,24 @@ var ExpandedBankTransactionRow = forwardRef2(
             },
             className: "Layer__bank-transaction__submit-btn",
             processing: bankTransaction.processing,
-            error: bankTransaction.error,
-            active: true
+            active: true,
+            action: editable ? "save" /* SAVE */ : "update" /* UPDATE */
           },
           submitBtnText
         )) : null
+      ), /* @__PURE__ */ React42.createElement(
+        APIErrorNotifications,
+        {
+          bankTransaction,
+          containerWidth
+        }
       ))
     );
   }
 );
 
 // src/components/BankTransactionRow/SplitTooltipDetails.tsx
-import React37 from "react";
+import React43 from "react";
 var SplitTooltipDetails = ({
   classNamePrefix,
   category
@@ -2516,11 +2927,11 @@ var SplitTooltipDetails = ({
   if (!category.entries) {
     return;
   }
-  return /* @__PURE__ */ React37.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ React37.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ React37.createElement("li", { key: idx }, /* @__PURE__ */ React37.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ React37.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
+  return /* @__PURE__ */ React43.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ React43.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ React43.createElement("li", { key: idx }, /* @__PURE__ */ React43.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ React43.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-import classNames15 from "classnames";
+import classNames17 from "classnames";
 import { parseISO as parseISO5, format as formatTime4 } from "date-fns";
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -2532,23 +2943,53 @@ var extractDescriptionForSplit = (category) => {
 var getDefaultSelectedCategory = (bankTransaction) => {
   return hasSuggestions(bankTransaction.categorization_flow) ? mapCategoryToOption(bankTransaction.categorization_flow.suggestions[0]) : bankTransaction.suggested_matches?.length === 1 ? mapSuggestedMatchToOption(bankTransaction.suggested_matches[0]) : void 0;
 };
+var clickTimer = Date.now();
 var BankTransactionRow = ({
+  index = 0,
   dateFormat,
   bankTransaction,
-  editable
+  editable,
+  removeTransaction,
+  containerWidth
 }) => {
   const expandedRowRef = useRef10(null);
-  const [removed, setRemoved] = useState7(false);
+  const [showRetry, setShowRetry] = useState8(false);
+  const [removed, setRemoved] = useState8(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = useState7(
+  const [selectedCategory, setSelectedCategory] = useState8(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = useState7(false);
-  const toggleOpen = () => setOpen(!open);
-  const save = () => {
+  const [open, setOpen] = useState8(false);
+  const toggleOpen = () => {
+    setShowRetry(false);
+    setOpen(!open);
+  };
+  const openRow = {
+    onMouseDown: () => {
+      clickTimer = Date.now();
+    },
+    onMouseUp: () => {
+      if (Date.now() - clickTimer < 100 && !open) {
+        setShowRetry(false);
+        setOpen(true);
+      }
+    }
+  };
+  const [showComponent, setShowComponent] = useState8(false);
+  useEffect5(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, index * 80);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  useEffect5(() => {
+    if (bankTransaction.error) {
+      setShowRetry(true);
+    }
+  }, [bankTransaction.error]);
+  const save = async () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      setOpen(false);
       return;
     }
     if (!selectedCategory) {
@@ -2571,80 +3012,107 @@ var BankTransactionRow = ({
   }
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames15(
+  const rowClassName = classNames17(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    open ? openClassName : ""
+    open ? openClassName : "",
+    showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(
     "tr",
     {
       className: rowClassName,
       onTransitionEnd: ({ propertyName }) => {
         if (propertyName === "top") {
           setRemoved(true);
+          removeTransaction(bankTransaction.id);
         }
       }
     },
-    /* @__PURE__ */ React38.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React38.createElement("span", { className: "Layer__table-cell-content" }, formatTime4(parseISO5(bankTransaction.date), dateFormat))),
-    /* @__PURE__ */ React38.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__tx-col" }, /* @__PURE__ */ React38.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React38.createElement(
-      Text,
+    /* @__PURE__ */ React44.createElement(
+      "td",
       {
-        as: "span",
-        className: "Layer__bank-transactions__tx-text",
-        withTooltip: "whenTruncated" /* whenTruncated */,
-        tooltipOptions: {
-          contentClassName: "Layer__bank-transactions__tx-tooltip"
-        }
+        className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
+        ...openRow
       },
-      bankTransaction.counterparty_name ?? bankTransaction.description
-    ))),
-    /* @__PURE__ */ React38.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__account-col" }, /* @__PURE__ */ React38.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React38.createElement(
-      Text,
+      /* @__PURE__ */ React44.createElement("span", { className: "Layer__table-cell-content" }, formatTime4(parseISO5(bankTransaction.date), dateFormat))
+    ),
+    /* @__PURE__ */ React44.createElement(
+      "td",
       {
-        as: "span",
-        className: "Layer__bank-transactions__account-text",
-        withTooltip: "whenTruncated" /* whenTruncated */
+        className: "Layer__table-cell Layer__bank-transactions__tx-col",
+        ...openRow
       },
-      bankTransaction.account_name ?? ""
-    ))),
-    /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React44.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React44.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__bank-transactions__tx-text",
+          withTooltip: "whenTruncated" /* whenTruncated */,
+          tooltipOptions: {
+            contentClassName: "Layer__bank-transactions__tx-tooltip"
+          }
+        },
+        bankTransaction.counterparty_name ?? bankTransaction.description
+      ))
+    ),
+    /* @__PURE__ */ React44.createElement(
+      "td",
+      {
+        className: "Layer__table-cell Layer__bank-transactions__account-col",
+        ...openRow
+      },
+      /* @__PURE__ */ React44.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React44.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__bank-transactions__account-text",
+          withTooltip: "whenTruncated" /* whenTruncated */
+        },
+        bankTransaction.account_name ?? ""
+      ))
+    ),
+    /* @__PURE__ */ React44.createElement(
       "td",
       {
-        className: `Layer__table-cell Layer__table-cell__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
+        className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
+        ...openRow
       },
-      /* @__PURE__ */ React38.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+      /* @__PURE__ */ React44.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
     ),
-    /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React44.createElement(
       "td",
       {
-        className: classNames15(
+        className: classNames17(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
           `${className}__actions-cell--${open ? "open" : "close"}`
         )
       },
-      /* @__PURE__ */ React38.createElement(
+      /* @__PURE__ */ React44.createElement(
         "span",
         {
           className: `${className}__actions-container Layer__table-cell-content`
         },
-        editable && !open ? /* @__PURE__ */ React38.createElement(
+        editable && !open ? /* @__PURE__ */ React44.createElement(
           CategorySelect,
           {
             bankTransaction,
             name: `category-${bankTransaction.id}`,
             value: selectedCategory,
-            onChange: setSelectedCategory,
+            onChange: (category) => {
+              setSelectedCategory(category);
+              setShowRetry(false);
+            },
             disabled: bankTransaction.processing
           }
         ) : null,
-        !editable && !open ? /* @__PURE__ */ React38.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(
+        !editable && !open ? /* @__PURE__ */ React44.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(
           Badge,
           {
-            icon: /* @__PURE__ */ React38.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ React38.createElement(
+            icon: /* @__PURE__ */ React44.createElement(Scissors_default, { size: 11 }),
+            tooltip: /* @__PURE__ */ React44.createElement(
               SplitTooltipDetails,
               {
                 classNamePrefix: className,
@@ -2653,18 +3121,42 @@ var BankTransactionRow = ({
             )
           },
           "Split"
-        ), /* @__PURE__ */ React38.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(
+        ), /* @__PURE__ */ React44.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ React44.createElement(React44.Fragment, null, /* @__PURE__ */ React44.createElement(
           MatchBadge,
           {
             classNamePrefix: className,
             bankTransaction,
             dateFormat
           }
-        ), /* @__PURE__ */ React38.createElement("span", { className: `${className}__category-text__text` }, `${formatTime4(
+        ), /* @__PURE__ */ React44.createElement("span", { className: `${className}__category-text__text` }, `${formatTime4(
           parseISO5(bankTransaction.match.bank_transaction.date),
           dateFormat
-        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React38.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        editable || open ? /* @__PURE__ */ React38.createElement(
+        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ React44.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+        editable && !open && showRetry ? /* @__PURE__ */ React44.createElement(
+          RetryButton,
+          {
+            onClick: () => {
+              if (!bankTransaction.processing) {
+                save();
+              }
+            },
+            className: "Layer__bank-transaction__retry-btn",
+            processing: bankTransaction.processing,
+            error: "Approval failed. Check connection and retry in few seconds."
+          },
+          "Retry"
+        ) : null,
+        open && bankTransaction.error ? /* @__PURE__ */ React44.createElement(
+          Text,
+          {
+            as: "span",
+            size: "md" /* md */,
+            className: "Layer__unsaved-info"
+          },
+          /* @__PURE__ */ React44.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ React44.createElement(AlertCircle_default, { size: 12 })
+        ) : null,
+        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ React44.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2674,39 +3166,45 @@ var BankTransactionRow = ({
             },
             className: "Layer__bank-transaction__submit-btn",
             processing: bankTransaction.processing,
-            error: bankTransaction.error,
             active: open,
             action: editable ? "save" /* SAVE */ : "update" /* UPDATE */
           },
           editable ? "Approve" : "Update"
         ) : null,
-        /* @__PURE__ */ React38.createElement(
+        /* @__PURE__ */ React44.createElement(
           IconButton,
           {
             onClick: toggleOpen,
             className: "Layer__bank-transaction-row__expand-button",
             active: open,
-            icon: open ? /* @__PURE__ */ React38.createElement(X_default, null) : /* @__PURE__ */ React38.createElement(ChevronDown_default, { className: "Layer__chevron Layer__chevron__down" })
+            icon: /* @__PURE__ */ React44.createElement(
+              ChevronDownFill_default,
+              {
+                className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+              }
+            )
           }
         )
       )
     )
-  ), /* @__PURE__ */ React38.createElement("tr", null, /* @__PURE__ */ React38.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React38.createElement(
+  ), /* @__PURE__ */ React44.createElement("tr", null, /* @__PURE__ */ React44.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ React44.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
-      isOpen: open
+      isOpen: open,
+      containerWidth,
+      editable
     }
   ))));
 };
 
 // src/components/BankTransactionListItem/Assignment.tsx
-import React39 from "react";
+import React45 from "react";
 import { parseISO as parseISO6, format as formatTime5 } from "date-fns";
 var Assignment = ({ bankTransaction }) => {
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(
+    return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
       MatchBadge,
       {
         classNamePrefix: "Layer__bank-transaction-list-item",
@@ -2714,17 +3212,17 @@ var Assignment = ({ bankTransaction }) => {
         dateFormat: DATE_FORMAT,
         text: "Matched"
       }
-    ), /* @__PURE__ */ React39.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${formatTime5(
+    ), /* @__PURE__ */ React45.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${formatTime5(
       parseISO6(bankTransaction.match.bank_transaction.date),
       DATE_FORMAT
     )}, ${bankTransaction.match.bank_transaction.description}`));
   }
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
-    return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(
+    return /* @__PURE__ */ React45.createElement(React45.Fragment, null, /* @__PURE__ */ React45.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ React39.createElement(Scissors_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ React39.createElement(
+        icon: /* @__PURE__ */ React45.createElement(Scissors_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ React45.createElement(
           SplitTooltipDetails,
           {
             classNamePrefix: "Layer__bank-transaction-list-item",
@@ -2733,32 +3231,49 @@ var Assignment = ({ bankTransaction }) => {
         )
       },
       "Split"
-    ), /* @__PURE__ */ React39.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
+    ), /* @__PURE__ */ React45.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
   }
-  return /* @__PURE__ */ React39.createElement(Text, null, bankTransaction?.category?.display_name);
+  return /* @__PURE__ */ React45.createElement(Text, null, bankTransaction?.category?.display_name);
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-import classNames16 from "classnames";
+import classNames18 from "classnames";
 import { parseISO as parseISO7, format as formatTime6 } from "date-fns";
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
+  index = 0,
   dateFormat,
   bankTransaction,
-  editable
+  editable,
+  containerWidth
 }) => {
   const expandedRowRef = useRef11(null);
-  const [removed, setRemoved] = useState8(false);
+  const [showRetry, setShowRetry] = useState9(false);
+  const [removed, setRemoved] = useState9(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = useState8(
+  const [selectedCategory, setSelectedCategory] = useState9(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = useState8(false);
-  const toggleOpen = () => setOpen(!open);
+  const [open, setOpen] = useState9(false);
+  const toggleOpen = () => {
+    setShowRetry(false);
+    setOpen(!open);
+  };
+  const [showComponent, setShowComponent] = useState9(false);
+  useEffect6(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, index * 80);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  useEffect6(() => {
+    if (bankTransaction.error) {
+      setShowRetry(true);
+    }
+  }, [bankTransaction.error]);
   const save = () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      setOpen(false);
       return;
     }
     if (!selectedCategory) {
@@ -2781,50 +3296,55 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = classNames16(
+  const rowClassName = classNames18(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    open ? openClassName : ""
+    open ? openClassName : "",
+    showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ React40.createElement("li", { className: rowClassName }, /* @__PURE__ */ React40.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React40.createElement("span", { className: `${className}__heading-date` }, formatTime6(parseISO7(bankTransaction.date), dateFormat)), /* @__PURE__ */ React40.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React40.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React40.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ React40.createElement("span", { className: `${className}__body__name` }, bankTransaction.counterparty_name), /* @__PURE__ */ React40.createElement(
-    "span",
-    {
-      className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
-    },
-    isCredit2(bankTransaction) ? "+$" : " $",
-    centsToDollars(bankTransaction.amount)
-  ), /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React46.createElement("li", { className: rowClassName }, /* @__PURE__ */ React46.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ React46.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ React46.createElement("span", { className: `${className}__heading-date` }, formatTime6(parseISO7(bankTransaction.date), dateFormat)), /* @__PURE__ */ React46.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ React46.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ React46.createElement(
     "div",
     {
       onClick: toggleOpen,
       className: "Layer__bank-transaction-row__expand-button"
     },
-    /* @__PURE__ */ React40.createElement(
-      ChevronDown_default,
+    /* @__PURE__ */ React46.createElement(
+      ChevronDownFill_default,
       {
         className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
       }
     )
-  )), /* @__PURE__ */ React40.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React46.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ React46.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ React46.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ React46.createElement(
+    "span",
+    {
+      className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
+    },
+    isCredit2(bankTransaction) ? "+$" : " $",
+    centsToDollars(bankTransaction.amount)
+  )), /* @__PURE__ */ React46.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ React46.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
-      close: toggleOpen,
       isOpen: open,
+      editable,
       asListItem: true,
-      submitBtnText: editable ? "Approve" : "Save"
+      submitBtnText: editable ? "Approve" : "Update",
+      containerWidth
     }
-  )), /* @__PURE__ */ React40.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React46.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ React46.createElement(
     CategorySelect,
     {
       bankTransaction,
       name: `category-${bankTransaction.id}`,
       value: selectedCategory,
-      onChange: setSelectedCategory,
+      onChange: (category) => {
+        setShowRetry(false);
+        setSelectedCategory(category);
+      },
       disabled: bankTransaction.processing
     }
-  ) : null, !editable ? /* @__PURE__ */ React40.createElement(Assignment, { bankTransaction }) : null, editable && /* @__PURE__ */ React40.createElement(
+  ) : null, !editable ? /* @__PURE__ */ React46.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ React46.createElement(
     SubmitButton,
     {
       onClick: () => {
@@ -2834,14 +3354,27 @@ var BankTransactionListItem = ({
       },
       className: "Layer__bank-transaction__submit-btn",
       processing: bankTransaction.processing,
-      error: bankTransaction.error,
-      iconOnly: true
-    }
-  )));
+      action: editable ? "save" /* SAVE */ : "update" /* UPDATE */
+    },
+    editable ? "Approve" : "Update"
+  ) : null, editable && showRetry ? /* @__PURE__ */ React46.createElement(
+    RetryButton,
+    {
+      onClick: () => {
+        if (!bankTransaction.processing) {
+          save();
+        }
+      },
+      className: "Layer__bank-transaction__retry-btn",
+      processing: bankTransaction.processing,
+      error: "Approval failed. Check connection and retry in few seconds."
+    },
+    "Retry"
+  ) : null), bankTransaction.error && showRetry ? /* @__PURE__ */ React46.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
 };
 
 // src/components/Container/Container.tsx
-import React41, { forwardRef as forwardRef3 } from "react";
+import React47, { forwardRef as forwardRef3 } from "react";
 
 // src/config/theme.ts
 var SHADES = {
@@ -3069,10 +3602,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-import classNames17 from "classnames";
+import classNames19 from "classnames";
 var Container = forwardRef3(
   ({ name, className, children, asWidget }, ref) => {
-    const baseClassName = classNames17(
+    const baseClassName = classNames19(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       asWidget ? "Layer__component--as-widget" : "",
@@ -3080,114 +3613,28 @@ var Container = forwardRef3(
     );
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    return /* @__PURE__ */ React41.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
+    return /* @__PURE__ */ React47.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
   }
 );
 
 // src/components/Container/Header.tsx
-import React42, { forwardRef as forwardRef4 } from "react";
-import classNames18 from "classnames";
+import React48, { forwardRef as forwardRef4 } from "react";
+import classNames20 from "classnames";
 var Header = forwardRef4(
   ({ className, children, style }, ref) => {
-    const baseClassName = classNames18("Layer__component-header", className);
-    return /* @__PURE__ */ React42.createElement("header", { ref, className: baseClassName, style }, children);
+    const baseClassName = classNames20("Layer__component-header", className);
+    return /* @__PURE__ */ React48.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
 // src/components/DataState/DataState.tsx
-import React45 from "react";
-
-// src/icons/AlertOctagon.tsx
-import * as React43 from "react";
-var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React43.createElement(
-  "svg",
-  {
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React43.createElement(
-    "path",
-    {
-      d: "M5.895 1.5H12.105L16.5 5.895V12.105L12.105 16.5H5.895L1.5 12.105V5.895L5.895 1.5Z",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React43.createElement(
-    "path",
-    {
-      d: "M9 6V9",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React43.createElement(
-    "path",
-    {
-      d: "M9 12H9.0075",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var AlertOctagon_default = AlertOctagon;
-
-// src/icons/RefreshCcw.tsx
-import * as React44 from "react";
-var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React44.createElement(
-  "svg",
-  {
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React44.createElement(
-    "path",
-    {
-      d: "M0.75 3V7.5H5.25",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React44.createElement(
-    "path",
-    {
-      d: "M17.25 15V10.5H12.75",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React44.createElement(
-    "path",
-    {
-      d: "M15.3675 6.75C14.9871 5.67508 14.3407 4.71405 13.4884 3.95656C12.6361 3.19907 11.6059 2.66982 10.4938 2.41819C9.38167 2.16656 8.22393 2.20075 7.12861 2.51758C6.03328 2.8344 5.03606 3.42353 4.23 4.23L0.75 7.5M17.25 10.5L13.77 13.77C12.9639 14.5765 11.9667 15.1656 10.8714 15.4824C9.77607 15.7992 8.61833 15.8334 7.50621 15.5818C6.3941 15.3302 5.36385 14.8009 4.5116 14.0434C3.65935 13.2859 3.01288 12.3249 2.6325 11.25",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var RefreshCcw_default = RefreshCcw;
-
-// src/components/DataState/DataState.tsx
+import React49 from "react";
 var getIcon = (status) => {
   switch (status) {
     case "failed" /* failed */:
-      return /* @__PURE__ */ React45.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ React45.createElement(AlertOctagon_default, { size: 12 }));
+      return /* @__PURE__ */ React49.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ React49.createElement(AlertOctagon_default, { size: 12 }));
     default:
-      return /* @__PURE__ */ React45.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React45.createElement(CheckCircle_default, { size: 12 }));
+      return /* @__PURE__ */ React49.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ React49.createElement(CheckCircle_default, { size: 12 }));
   }
 };
 var DataState = ({
@@ -3197,7 +3644,7 @@ var DataState = ({
   onRefresh,
   isLoading
 }) => {
-  return /* @__PURE__ */ React45.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React49.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ React49.createElement(
     Text,
     {
       as: "span",
@@ -3206,11 +3653,11 @@ var DataState = ({
       className: "Layer__data-state__title"
     },
     title
-  ), /* @__PURE__ */ React45.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ React45.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React49.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ React49.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ React49.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: isLoading ? /* @__PURE__ */ React45.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ React45.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: isLoading ? /* @__PURE__ */ React49.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ React49.createElement(RefreshCcw_default, { size: 12 }),
       onClick: onRefresh,
       disabled: isLoading
     },
@@ -3219,24 +3666,16 @@ var DataState = ({
 };
 
 // src/components/Loader/Loader.tsx
-import React46 from "react";
+import React50 from "react";
 var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ React46.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ React46.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ React50.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ React50.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/Pagination/Pagination.tsx
-import React49 from "react";
+import React53 from "react";
 
 // src/hooks/usePagination/usePagination.ts
 import { useMemo } from "react";
-
-// src/utils/helpers.ts
-var range = (start, end) => {
-  let length = end - start + 1;
-  return Array.from({ length }, (_, idx) => idx + start);
-};
-
-// src/hooks/usePagination/usePagination.ts
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -3281,8 +3720,8 @@ var usePagination = ({
 };
 
 // src/icons/ChevronLeft.tsx
-import * as React47 from "react";
-var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createElement(
+import * as React51 from "react";
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React51.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3292,7 +3731,7 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createEle
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React47.createElement(
+  /* @__PURE__ */ React51.createElement(
     "path",
     {
       d: "M11.25 13.5L6.75 9L11.25 4.5",
@@ -3305,8 +3744,8 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createEle
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-import * as React48 from "react";
-var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React48.createElement(
+import * as React52 from "react";
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3316,7 +3755,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React48.createEl
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React48.createElement(
+  /* @__PURE__ */ React52.createElement(
     "path",
     {
       d: "M6.75 13.5L11.25 9L6.75 4.5",
@@ -3350,9 +3789,10 @@ var Pagination = ({
     return;
   }
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ React49.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React53.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ React53.createElement(
     "li",
     {
+      key: `page-prev`,
       className: classnames(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
         {
@@ -3361,14 +3801,15 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage - 1)
     },
-    /* @__PURE__ */ React49.createElement(ChevronLeft_default, { size: 12 })
+    /* @__PURE__ */ React53.createElement(ChevronLeft_default, { size: 12 })
   ), paginationRange.map((pageNumber) => {
     if (pageNumber === DOTS) {
-      return /* @__PURE__ */ React49.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
+      return /* @__PURE__ */ React53.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
     }
-    return /* @__PURE__ */ React49.createElement(
+    return /* @__PURE__ */ React53.createElement(
       "li",
       {
+        key: `page-${pageNumber}`,
         className: classnames("Layer__pagination-item", {
           selected: pageNumber === currentPage
         }),
@@ -3380,9 +3821,10 @@ var Pagination = ({
       },
       pageNumber
     );
-  }), /* @__PURE__ */ React49.createElement(
+  }), /* @__PURE__ */ React53.createElement(
     "li",
     {
+      key: `page-last`,
       className: classnames(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
         {
@@ -3391,7 +3833,7 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage + 1)
     },
-    /* @__PURE__ */ React49.createElement(ChevronRight_default, { size: 12 })
+    /* @__PURE__ */ React53.createElement(ChevronRight_default, { size: 12 })
   ));
 };
 
@@ -3407,7 +3849,7 @@ var ReviewCategories = [
   "READY_FOR_INPUT" /* READY_FOR_INPUT */,
   "LAYER_REVIEW" /* LAYER_REVIEW */
 ];
-var filterVisibility = (display) => (bankTransaction) => {
+var filterVisibility = (display, bankTransaction) => {
   const categorized = CategorizedCategories.includes(
     bankTransaction.categorization_status
   );
@@ -3418,113 +3860,150 @@ var BankTransactions = ({
   asWidget = false,
   pageSize = 15
 }) => {
-  const [display, setDisplay] = useState9("review" /* review */);
-  const [currentPage, setCurrentPage] = useState9(1);
+  const [display, setDisplay] = useState10("review" /* review */);
+  const [currentPage, setCurrentPage] = useState10(1);
+  const [removedTxs, setRemovedTxs] = useState10([]);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
-  const bankTransactionsByFilter = data?.filter(filterVisibility(display));
+  const bankTransactionsByFilter = data?.filter(
+    (tx) => !removedTxs.includes(tx.id) && filterVisibility(display, tx)
+  );
   const bankTransactions = useMemo2(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return bankTransactionsByFilter?.slice(firstPageIndex, lastPageIndex);
-  }, [currentPage, bankTransactionsByFilter]);
+  }, [currentPage, bankTransactionsByFilter, removedTxs]);
   const onCategorizationDisplayChange = (event) => {
     setDisplay(
       event.target.value === "categorized" /* categorized */ ? "categorized" /* categorized */ : "review" /* review */
     );
     setCurrentPage(1);
   };
-  const [shiftStickyHeader, setShiftStickyHeader] = useState9(0);
-  const [listView, setListView] = useState9(false);
+  const [shiftStickyHeader, setShiftStickyHeader] = useState10(0);
+  const debounceShiftStickyHeader = debounce(setShiftStickyHeader, 500);
+  const [listView, setListView] = useState10(false);
+  const [containerWidth, setContainerWidth] = useState10(0);
+  const debounceContainerWidth = debounce(setContainerWidth, 500);
+  const removeTransaction = (id) => {
+    const newTxs = removedTxs.slice();
+    newTxs.push(id);
+    setRemovedTxs(newTxs);
+  };
   const containerRef = useElementSize((_el, _en, size) => {
     if (size?.height && size?.height >= 90) {
       const newShift = -Math.floor(size.height / 2) + 6;
       if (newShift !== shiftStickyHeader) {
-        setShiftStickyHeader(newShift);
+        debounceShiftStickyHeader(newShift);
       }
     } else if (size?.height > 0 && shiftStickyHeader !== 0) {
-      setShiftStickyHeader(0);
+      debounceShiftStickyHeader(0);
     }
     if (size.width > 700 && listView) {
       setListView(false);
     } else if (size.width <= 700 && !listView) {
       setListView(true);
     }
+    debounceContainerWidth(size?.width);
   });
   const editable = display === "review" /* review */;
-  return /* @__PURE__ */ React50.createElement(Container, { name: COMPONENT_NAME, asWidget, ref: containerRef }, /* @__PURE__ */ React50.createElement(
-    Header,
+  return /* @__PURE__ */ React54.createElement(
+    Container,
     {
-      className: "Layer__bank-transactions__header",
-      style: { top: shiftStickyHeader }
+      className: editable ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized",
+      name: COMPONENT_NAME,
+      asWidget,
+      ref: containerRef
     },
-    /* @__PURE__ */ React50.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-    /* @__PURE__ */ React50.createElement(
-      Toggle,
+    /* @__PURE__ */ React54.createElement(
+      Header,
+      {
+        className: "Layer__bank-transactions__header",
+        style: { top: shiftStickyHeader }
+      },
+      /* @__PURE__ */ React54.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      /* @__PURE__ */ React54.createElement(
+        Toggle,
+        {
+          name: "bank-transaction-display",
+          options: [
+            { label: "To Review", value: "review" /* review */ },
+            { label: "Categorized", value: "categorized" /* categorized */ }
+          ],
+          selected: display,
+          onChange: onCategorizationDisplayChange
+        }
+      )
+    ),
+    !listView && /* @__PURE__ */ React54.createElement(
+      "table",
       {
-        name: "bank-transaction-display",
-        options: [
-          { label: "To Review", value: "review" /* review */ },
-          { label: "Categorized", value: "categorized" /* categorized */ }
-        ],
-        selected: display,
-        onChange: onCategorizationDisplayChange
+        width: "100%",
+        className: "Layer__table Layer__bank-transactions__table with-cell-separators"
+      },
+      /* @__PURE__ */ React54.createElement("thead", null, /* @__PURE__ */ React54.createElement("tr", null, /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ React54.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+      /* @__PURE__ */ React54.createElement("tbody", null, !isLoading && bankTransactions?.map(
+        (bankTransaction, index) => /* @__PURE__ */ React54.createElement(
+          BankTransactionRow,
+          {
+            index,
+            key: bankTransaction.id,
+            dateFormat: DATE_FORMAT,
+            bankTransaction,
+            editable,
+            removeTransaction,
+            containerWidth
+          }
+        )
+      ))
+    ),
+    isLoading && !bankTransactions ? /* @__PURE__ */ React54.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React54.createElement(Loader2, null)) : null,
+    !isLoading && listView ? /* @__PURE__ */ React54.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
+      (bankTransaction, index) => /* @__PURE__ */ React54.createElement(
+        BankTransactionListItem,
+        {
+          index,
+          key: bankTransaction.id,
+          dateFormat: DATE_FORMAT,
+          bankTransaction,
+          editable,
+          removeTransaction,
+          containerWidth
+        }
+      )
+    )) : null,
+    !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ React54.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React54.createElement(
+      DataState,
+      {
+        status: "allDone" /* allDone */,
+        title: "You are up to date with transactions!",
+        description: "All uncategorized transaction will be displayed here",
+        onRefresh: () => refetch(),
+        isLoading: isValidating
       }
-    )
-  ), !listView && /* @__PURE__ */ React50.createElement(
-    "table",
-    {
-      width: "100%",
-      className: "Layer__table Layer__bank-transactions__table with-cell-separators"
-    },
-    /* @__PURE__ */ React50.createElement("thead", null, /* @__PURE__ */ React50.createElement("tr", null, /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ React50.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-    /* @__PURE__ */ React50.createElement("tbody", null, !isLoading && bankTransactions?.map((bankTransaction) => /* @__PURE__ */ React50.createElement(
-      BankTransactionRow,
+    )) : null,
+    !isLoading && error ? /* @__PURE__ */ React54.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React54.createElement(
+      DataState,
       {
-        key: bankTransaction.id,
-        dateFormat: DATE_FORMAT,
-        bankTransaction,
-        editable
+        status: "failed" /* failed */,
+        title: "Something went wrong",
+        description: "We couldn\u2019t load your data.",
+        onRefresh: () => refetch(),
+        isLoading: isValidating
       }
-    )))
-  ), isLoading && !bankTransactions ? /* @__PURE__ */ React50.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React50.createElement(Loader2, null)) : null, !isLoading && listView ? /* @__PURE__ */ React50.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map((bankTransaction) => /* @__PURE__ */ React50.createElement(
-    BankTransactionListItem,
-    {
-      key: bankTransaction.id,
-      dateFormat: DATE_FORMAT,
-      bankTransaction,
-      editable
-    }
-  ))) : null, !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ React50.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React50.createElement(
-    DataState,
-    {
-      status: "allDone" /* allDone */,
-      title: "You are up to date with transactions!",
-      description: "All uncategorized transaction will be displayed here",
-      onRefresh: () => refetch(),
-      isLoading: isValidating
-    }
-  )) : null, !isLoading && error ? /* @__PURE__ */ React50.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React50.createElement(
-    DataState,
-    {
-      status: "failed" /* failed */,
-      title: "Something went wrong",
-      description: "We couldn\u2019t load your data.",
-      onRefresh: () => refetch(),
-      isLoading: isValidating
-    }
-  )) : null, /* @__PURE__ */ React50.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ React50.createElement(
-    Pagination,
-    {
-      currentPage,
-      totalCount: bankTransactionsByFilter?.length || 0,
-      pageSize,
-      onPageChange: (page) => setCurrentPage(page)
-    }
-  )));
+    )) : null,
+    /* @__PURE__ */ React54.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ React54.createElement(
+      Pagination,
+      {
+        currentPage,
+        totalCount: bankTransactionsByFilter?.length || 0,
+        pageSize,
+        onPageChange: (page) => setCurrentPage(page)
+      }
+    ))
+  );
 };
 
 // src/components/Hello/Hello.tsx
-import React51 from "react";
+import React55 from "react";
 import useSWR3 from "swr";
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -3533,14 +4012,149 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+};
+
+// src/components/LinkedAccounts/LinkedAccounts.tsx
+import React57 from "react";
+
+// src/hooks/useLinkedAccounts/useLinkedAccounts.ts
+import { useEffect as useEffect7, useState as useState11 } from "react";
+var MOCK_DATA = [
+  {
+    name: "Business Checking",
+    account: "1234",
+    amount: 1220620
+  },
+  {
+    name: "Business Savings",
+    account: "5678",
+    amount: 10002062e-1
+  },
+  {
+    name: "Account",
+    account: "4321",
+    amount: 801.91
+  }
+];
+var useLinkedAccounts = () => {
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const [isLoading, setIsLoading] = useState11(true);
+  useEffect7(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2e3);
+  }, []);
+  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
+  const isValidating = false;
+  const {
+    data = void 0,
+    meta: metadata = {},
+    error = void 0
+  } = responseData || {};
+  const refetch = () => {
+    console.log("refetch...");
+  };
+  return {
+    data,
+    metadata,
+    isLoading,
+    isValidating,
+    error,
+    refetch
+  };
+};
+
+// src/components/LinkedAccounts/LinkedAccountThumb.tsx
+import React56 from "react";
+var LinkedAccountThumb = ({ account }) => {
+  return /* @__PURE__ */ React56.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ React56.createElement("div", { className: "topbar" }, /* @__PURE__ */ React56.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ React56.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ React56.createElement("div", { className: "bottombar" }, /* @__PURE__ */ React56.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__ */ React57.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ React57.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ React57.createElement(
+    Heading,
+    {
+      className: "Layer__linked-accounts__title",
+      size: "secondary" /* secondary */
+    },
+    "Linked Accounts"
+  )), isLoading && /* @__PURE__ */ React57.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ React57.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ React57.createElement(
+    DataState,
+    {
+      status: "failed" /* failed */,
+      title: "Something went wrong",
+      description: "We couldn\u2019t load your data.",
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  ) : null, !error && !isLoading ? /* @__PURE__ */ React57.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ React57.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React59, { createContext as createContext2 } from "react";
+import React65, { createContext as createContext2 } from "react";
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+import { useMemo as useMemo3, useState as useState12 } from "react";
+
+// src/utils/profitAndLossUtils.ts
+var doesLineItemQualifies = (item) => {
+  return !(item.is_contra || item.value === void 0 || item.value === null || isNaN(item.value) || item.value === -Infinity || item.value === Infinity || item.value < 0);
+};
+var collectSubItems = (type, item) => {
+  if (!item) {
+    return [];
+  }
+  const items = [];
+  item?.line_items?.forEach((item2) => {
+    if (doesLineItemQualifies(item2)) {
+      items.push({
+        name: item2.name,
+        display_name: item2.display_name,
+        value: Math.abs(item2.value || 0),
+        // @TODO - confirm that's safe to do this
+        type
+      });
+    }
+  });
+  return items;
+};
+var collectExpensesItems = (data) => {
+  const cogs = collectSubItems("Cost of Goods Sold", data.cost_of_goods_sold);
+  const expenses = collectSubItems("Operating Expenses", data.expenses);
+  const taxes = collectSubItems("Taxes & Licenses", data.taxes);
+  return [].concat(cogs).concat(expenses).concat(taxes);
+};
+var collectRevenueItems = (data) => {
+  const income = collectSubItems("Income", data.income);
+  return [].concat(income);
+};
+var humanizeTitle = (sidebarView) => {
+  switch (sidebarView) {
+    case "expenses":
+      return "Expenses";
+    case "revenue":
+      return "Revenue";
+    default:
+      return "Profit & Loss";
+  }
+};
+var applyShare = (items, total) => {
+  return items.map((item) => {
+    if (total === 0) {
+      return item;
+    }
+    return {
+      ...item,
+      share: item.value / total
+    };
+  });
+};
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useState as useState10 } from "react";
 import { startOfMonth, endOfMonth, formatISO } from "date-fns";
 import useSWR4 from "swr";
 var useProfitAndLoss = ({
@@ -3553,12 +4167,17 @@ var useProfitAndLoss = ({
   endDate: endOfMonth(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = useState10(
+  const [startDate, setStartDate] = useState12(
     initialStartDate || startOfMonth(Date.now())
   );
-  const [endDate, setEndDate] = useState10(
+  const [endDate, setEndDate] = useState12(
     initialEndDate || endOfMonth(Date.now())
   );
+  const [filters, setFilters] = useState12({
+    expenses: void 0,
+    revenue: void 0
+  });
+  const [sidebarScope, setSidebarScope] = useState12("expenses");
   const {
     data: rawData,
     isLoading,
@@ -3581,6 +4200,43 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
+  const { filteredData, filteredTotal } = useMemo3(() => {
+    if (!data) {
+      return { filteredData: [], filteredTotal: void 0 };
+    }
+    const items = sidebarScope === "revenue" ? collectRevenueItems(data) : collectExpensesItems(data);
+    const filtered = items.map((x) => {
+      if (sidebarScope && filters[sidebarScope]?.types && filters[sidebarScope].types.length > 0 && !filters[sidebarScope]?.types?.includes(x.type)) {
+        return {
+          ...x,
+          hidden: true
+        };
+      }
+      return x;
+    });
+    const sorted = filtered.sort((a, b) => {
+      switch (filters[sidebarScope ?? "expenses"]?.sortBy) {
+        case "category":
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.display_name.localeCompare(b.display_name);
+          }
+          return b.display_name.localeCompare(a.display_name);
+        case "type":
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.type.localeCompare(b.type);
+          }
+          return b.type.localeCompare(a.type);
+        default:
+          if (filters[sidebarScope ?? "expenses"]?.sortDirection === "asc") {
+            return a.value - b.value;
+          }
+          return b.value - a.value;
+      }
+    });
+    const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
+    const withShare = applyShare(sorted, total);
+    return { filteredData: withShare, filteredTotal: total };
+  }, [data, startDate, filters, sidebarScope]);
   const changeDateRange = ({
     startDate: newStartDate,
     endDate: newEndDate
@@ -3591,25 +4247,83 @@ var useProfitAndLoss = ({
   const refetch = () => {
     mutate();
   };
+  const sortBy = (scope, field, direction) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        sortBy: field,
+        sortDirection: direction ?? filters[scope]?.sortDirection === "desc" ? "asc" : "desc"
+      }
+    });
+  };
+  const setFilterTypes = (scope, types) => {
+    setFilters({
+      ...filters,
+      [scope]: {
+        ...filters[scope],
+        types
+      }
+    });
+  };
   return {
     data,
+    filteredData,
+    filteredTotal,
     isLoading,
     isValidating,
     error: error || rawError,
     dateRange: { startDate, endDate },
     refetch,
-    changeDateRange
+    changeDateRange,
+    sidebarScope,
+    setSidebarScope,
+    sortBy,
+    filters,
+    setFilterTypes
   };
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-import React53, { useContext as useContext2, useMemo as useMemo3, useState as useState11 } from "react";
+import React59, { useContext as useContext2, useMemo as useMemo4, useState as useState13 } from "react";
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
+var formatPercent = (value, options) => {
+  if (!value && value !== 0) {
+    return;
+  }
+  const val = value * 100;
+  let defaultOptions = {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  };
+  if (Math.abs(val) < 10) {
+    defaultOptions = {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    };
+  }
+  if (Math.abs(val) < 1) {
+    defaultOptions = {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    };
+  }
+  if (val === 0) {
+    defaultOptions = {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0
+    };
+  }
+  return val.toLocaleString("en-US", {
+    ...defaultOptions,
+    ...options
+  });
+};
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-import React52, { useEffect as useEffect4 } from "react";
+import React58, { useEffect as useEffect8 } from "react";
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -3624,11 +4338,11 @@ var Indicator = ({
   const boxWidth = width * 2 + 4;
   const multiplier = 1.5;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  useEffect4(() => {
+  useEffect8(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -3638,9 +4352,9 @@ var Indicator = ({
         width: `${boxWidth * multiplier}px`,
         // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
-        y: 5,
+        y: 22,
         borderRadius: 8,
-        height: "calc(100% - 10px)"
+        height: "calc(100% - 38px)"
       }
     }
   );
@@ -3764,13 +4478,13 @@ var ProfitAndLossChart = () => {
     label
   }) => {
     if (active && payload && payload.length) {
-      return /* @__PURE__ */ React53.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React53.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React53.createElement("li", null, /* @__PURE__ */ React53.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React53.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React53.createElement("li", null, /* @__PURE__ */ React53.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React53.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0))))));
+      return /* @__PURE__ */ React59.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ React59.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ React59.createElement("li", null, /* @__PURE__ */ React59.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ React59.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ React59.createElement("li", null, /* @__PURE__ */ React59.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ React59.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0))))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
     const { x, y, width, height } = props;
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React59.createElement(
       Rectangle,
       {
         fill: getColor(100)?.hex ?? "#F5F4F3",
@@ -3784,7 +4498,7 @@ var ProfitAndLossChart = () => {
       }
     );
   };
-  const data = useMemo3(
+  const data = useMemo4(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -3792,8 +4506,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = useState11(-1);
-  return /* @__PURE__ */ React53.createElement(
+  const [animateFrom, setAnimateFrom] = useState13(-1);
+  return /* @__PURE__ */ React59.createElement(
     ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -3801,7 +4515,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React59.createElement(
       BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -3810,15 +4524,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React59.createElement(
         Tooltip2,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ React53.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ React53.createElement(CustomizedCursor, null)
+          content: /* @__PURE__ */ React59.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ React59.createElement(CustomizedCursor, null),
+          animationDuration: 100,
+          animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React59.createElement(
         CartesianGrid,
         {
           vertical: false,
@@ -3826,7 +4542,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React59.createElement(
         Legend,
         {
           verticalAlign: "top",
@@ -3846,8 +4562,8 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ React53.createElement(XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React59.createElement(XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ React59.createElement(
         Bar,
         {
           dataKey: "revenue",
@@ -3856,10 +4572,10 @@ var ProfitAndLossChart = () => {
           radius: [barSize / 4, barSize / 4, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ React53.createElement(
+        /* @__PURE__ */ React59.createElement(
           LabelList,
           {
-            content: /* @__PURE__ */ React53.createElement(
+            content: /* @__PURE__ */ React59.createElement(
               Indicator,
               {
                 animateFrom,
@@ -3868,7 +4584,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ React53.createElement(
+        data.map((entry) => /* @__PURE__ */ React59.createElement(
           Cell,
           {
             key: entry.name,
@@ -3876,7 +4592,7 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React59.createElement(
         Bar,
         {
           dataKey: "expenses",
@@ -3885,7 +4601,7 @@ var ProfitAndLossChart = () => {
           radius: [barSize / 4, barSize / 4, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ React53.createElement(
+        data.map((entry) => /* @__PURE__ */ React59.createElement(
           Cell,
           {
             key: entry.name,
@@ -3898,7 +4614,7 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-import React54, { useContext as useContext3 } from "react";
+import React60, { useContext as useContext3 } from "react";
 import { add, endOfMonth as endOfMonth3, format as format5, startOfMonth as startOfMonth3 } from "date-fns";
 var ProfitAndLossDatePicker = () => {
   const { changeDateRange, dateRange } = useContext3(ProfitAndLoss.Context);
@@ -3913,28 +4629,28 @@ var ProfitAndLossDatePicker = () => {
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ React54.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React60.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ React60.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React60.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
         size: 18
       }
     )
-  ), /* @__PURE__ */ React54.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ React54.createElement(
+  ), /* @__PURE__ */ React60.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ React60.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React60.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -3945,53 +4661,83 @@ var ProfitAndLossDatePicker = () => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import React56, { useContext as useContext4 } from "react";
+import React62, { useContext as useContext4 } from "react";
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-import React55 from "react";
-import classNames19 from "classnames";
+import React61 from "react";
+import classNames21 from "classnames";
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = classNames19(
+  const baseClassName = classNames21(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
-  return /* @__PURE__ */ React55.createElement("div", { className: baseClassName, style: { width, height } });
+  return /* @__PURE__ */ React61.createElement("div", { className: baseClassName, style: { width, height } });
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+import classNames22 from "classnames";
 var ProfitAndLossSummaries = ({
   vertical,
   revenueLabel = "Revenue"
 }) => {
-  const { data: storedData, isLoading } = useContext4(ProfitAndLoss.Context);
+  const {
+    data: storedData,
+    isLoading,
+    setSidebarScope,
+    sidebarScope
+  } = useContext4(ProfitAndLoss.Context);
   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--pasitive";
-  const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
-  const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--pasitive";
-  return /* @__PURE__ */ React56.createElement(
+  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__ */ React62.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ React56.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ React56.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ React56.createElement(SkeletonLoader, null) : /* @__PURE__ */ React56.createElement(
-      "span",
+    /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        className: classNames22(
+          "Layer__profit-and-loss-summaries__summary Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--income",
+          sidebarScope === "revenue" ? "active" : ""
+        ),
+        onClick: () => setSidebarScope("revenue")
       },
-      centsToDollars(Math.abs(data?.income?.value ?? NaN))
-    )),
-    /* @__PURE__ */ React56.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ React56.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ React56.createElement(SkeletonLoader, null) : /* @__PURE__ */ React56.createElement(
-      "span",
+      /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, null)) : /* @__PURE__ */ React62.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        },
+        centsToDollars(Math.abs(data?.income?.value ?? NaN))
+      )
+    ),
+    /* @__PURE__ */ React62.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        className: classNames22(
+          "Layer__profit-and-loss-summaries__summary Layer__actionable",
+          "Layer__profit-and-loss-summaries__summary--expenses",
+          sidebarScope === "expenses" ? "active" : ""
+        ),
+        onClick: () => setSidebarScope("expenses")
       },
-      centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
-    )),
-    /* @__PURE__ */ React56.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React56.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React56.createElement(SkeletonLoader, null) : /* @__PURE__ */ React56.createElement(
+      /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React62.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        },
+        centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
+      )
+    ),
+    /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ React62.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ React62.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ React62.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ React62.createElement(
       "span",
       {
         className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
@@ -4002,10 +4748,10 @@ var ProfitAndLossSummaries = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import React58, { useContext as useContext5 } from "react";
+import React64, { useContext as useContext5 } from "react";
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React57, { useState as useState12 } from "react";
+import React63, { useState as useState14 } from "react";
 var ProfitAndLossRow = ({
   variant,
   lineItem,
@@ -4018,7 +4764,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState12(true);
+  const [expanded, setExpanded] = useState14(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -4049,20 +4795,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__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: labelClasses.join(" "),
       onClick: () => !lockExpanded && toggleExpanded()
     },
-    !lockExpanded && /* @__PURE__ */ React57.createElement(ChevronDown_default, { size: 16 }),
-    /* @__PURE__ */ React57.createElement(Text, null, display_name)
-  ), /* @__PURE__ */ React57.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React57.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React57.createElement(
+    !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React63.createElement(ChevronDownFill_default, { size: 16 }) : null,
+    /* @__PURE__ */ React63.createElement(Text, null, display_name)
+  ), /* @__PURE__ */ React63.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React63.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React63.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ React57.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React63.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React63.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -4128,23 +4874,23 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
   const { data: actualData, isLoading } = useContext5(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ React58.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ React58.createElement(Loader2, null));
+    return /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ React64.createElement(Loader2, null));
   }
-  return /* @__PURE__ */ React58.createElement(React58.Fragment, null, /* @__PURE__ */ React58.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.income,
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4155,14 +4901,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4173,14 +4919,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.taxes,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4191,14 +4937,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  )), /* @__PURE__ */ React58.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React58.createElement(
+  )), /* @__PURE__ */ React64.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ React58.createElement(
+  ), /* @__PURE__ */ React64.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -4212,6 +4958,8 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
 import { endOfMonth as endOfMonth4, startOfMonth as startOfMonth4 } from "date-fns";
 var PNLContext = createContext2({
   data: void 0,
+  filteredData: [],
+  filteredTotal: void 0,
   isLoading: true,
   isValidating: false,
   error: void 0,
@@ -4222,11 +4970,22 @@ var PNLContext = createContext2({
   changeDateRange: () => {
   },
   refetch: () => {
+  },
+  sidebarScope: void 0,
+  setSidebarScope: () => {
+  },
+  sortBy: () => {
+  },
+  setFilterTypes: () => {
+  },
+  filters: {
+    expenses: void 0,
+    revenue: void 0
   }
 });
 var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ React59.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React59.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+  return /* @__PURE__ */ React65.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ React65.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -4235,17 +4994,473 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React60, { useContext as useContext6 } from "react";
-var COMPONENT_NAME2 = "profit-and-loss";
-var ProfitAndLossView = () => {
-  return /* @__PURE__ */ React60.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ React60.createElement(Header, { className: `Layer__${COMPONENT_NAME2}__header` }, /* @__PURE__ */ React60.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit And Loss")), /* @__PURE__ */ React60.createElement(ProfitAndLoss, null, /* @__PURE__ */ React60.createElement(Components, null)));
+import React69, { useContext as useContext7 } from "react";
+
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import React68, { useContext as useContext6, useMemo as useMemo5, useState as useState15 } from "react";
+import Select3 from "react-select";
+
+// src/icons/SortArrows.tsx
+import * as React66 from "react";
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 13",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React66.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "desc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M4 2.5L4 11.1667",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "desc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "asc-arrow"
+    }
+  ), /* @__PURE__ */ React66.createElement(
+    "path",
+    {
+      d: "M8.66663 11.166L8.66663 2.49935",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      className: "asc-arrow"
+    }
+  )),
+  /* @__PURE__ */ React66.createElement("defs", null, /* @__PURE__ */ React66.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React66.createElement(
+    "rect",
+    {
+      width: "12",
+      height: "12",
+      fill: "white",
+      transform: "translate(0 0.5)"
+    }
+  )))
+);
+var SortArrows_default = SortArrows;
+
+// src/icons/X.tsx
+import * as React67 from "react";
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React67.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React67.createElement(
+    "path",
+    {
+      d: "M13.5 4.5L4.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React67.createElement(
+    "path",
+    {
+      d: "M4.5 4.5L13.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var X_default = X;
+
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+import classNames23 from "classnames";
+import { format as format6 } from "date-fns";
+import {
+  PieChart,
+  Pie,
+  Cell as Cell2,
+  ResponsiveContainer as ResponsiveContainer2,
+  Label,
+  Text as ChartText
+} from "recharts";
+var INACTIVE_OPACITY_LEVELS = [0.85, 0.7, 0.66, 0.55, 0.4, 0.33, 0.25, 0.15];
+var DEFAULT_CHART_COLORS = [
+  {
+    color: "#7417B3",
+    opacity: 1
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.8
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.6
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.4
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.2
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.1
+  },
+  {
+    color: "#006A80",
+    opacity: 1
+  },
+  {
+    color: "#006A80",
+    opacity: 0.8
+  },
+  {
+    color: "#006A80",
+    opacity: 0.6
+  },
+  {
+    color: "#006A80",
+    opacity: 0.4
+  },
+  {
+    color: "#006A80",
+    opacity: 0.2
+  },
+  {
+    color: "#006A80",
+    opacity: 0.1
+  },
+  {
+    color: "#009930",
+    opacity: 1
+  },
+  {
+    color: "#009930",
+    opacity: 0.8
+  },
+  {
+    color: "#009930",
+    opacity: 0.6
+  },
+  {
+    color: "#009930",
+    opacity: 0.4
+  },
+  {
+    color: "#009930",
+    opacity: 0.2
+  },
+  {
+    color: "#009930",
+    opacity: 0.1
+  }
+];
+var ProfitAndLossDetailedCharts = () => {
+  const {
+    data,
+    filteredData,
+    filteredTotal,
+    sortBy,
+    filters,
+    isLoading,
+    dateRange,
+    sidebarScope,
+    setSidebarScope,
+    setFilterTypes
+  } = useContext6(ProfitAndLoss.Context);
+  const [hoveredItem, setHoveredItem] = useState15();
+  const chartData = useMemo5(() => {
+    if (!filteredData) {
+      return [];
+    }
+    return filteredData.map((x) => {
+      if (x.hidden) {
+        return {
+          name: x.display_name,
+          value: 0
+        };
+      }
+      return {
+        name: x.display_name,
+        value: x.value
+      };
+    });
+  }, [filteredData]);
+  const buildColClass = (column) => {
+    return classNames23(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ React68.createElement(
+    "div",
+    {
+      className: classNames23(
+        "Layer__profit-and-loss__side-panel",
+        sidebarScope && "open"
+      )
+    },
+    /* @__PURE__ */ React68.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ React68.createElement("header", null, /* @__PURE__ */ React68.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ React68.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */, className: "date" }, format6(dateRange.startDate, "LLLL, y"))), /* @__PURE__ */ React68.createElement(
+      Button,
+      {
+        rightIcon: /* @__PURE__ */ React68.createElement(X_default, null),
+        iconOnly: true,
+        onClick: () => setSidebarScope(void 0),
+        variant: "secondary" /* secondary */
+      }
+    )), /* @__PURE__ */ React68.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React68.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React68.createElement(PieChart, null, /* @__PURE__ */ React68.createElement(
+      Pie,
+      {
+        data: chartData,
+        dataKey: "value",
+        nameKey: "name",
+        cx: "50%",
+        cy: "50%",
+        innerRadius: 105,
+        outerRadius: 120,
+        paddingAngle: 0.5,
+        fill: "#8884d8"
+      },
+      chartData.map((entry, index) => {
+        const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+        let fill = colorConfig.color;
+        let opacity = colorConfig.opacity;
+        let active = true;
+        if (hoveredItem && entry.name !== hoveredItem) {
+          active = false;
+          fill = void 0;
+          opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
+        }
+        return /* @__PURE__ */ React68.createElement(
+          Cell2,
+          {
+            key: `cell-${index}`,
+            className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
+            style: { fill },
+            opacity,
+            onMouseEnter: () => setHoveredItem(entry.name),
+            onMouseLeave: () => setHoveredItem(void 0)
+          }
+        );
+      }),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) - 15,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            let text = "Total";
+            if (hoveredItem) {
+              text = hoveredItem;
+            }
+            return /* @__PURE__ */ React68.createElement(
+              ChartText,
+              {
+                ...positioningProps,
+                className: "pie-center-label__title"
+              },
+              text
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) + 5,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            let value = filteredTotal;
+            if (hoveredItem) {
+              value = filteredData.find(
+                (x) => x.display_name === hoveredItem
+              )?.value;
+            }
+            return /* @__PURE__ */ React68.createElement(
+              ChartText,
+              {
+                ...positioningProps,
+                className: "pie-center-label__value"
+              },
+              `$${centsToDollars(value)}`
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ React68.createElement(
+        Label,
+        {
+          position: "center",
+          value: "Total",
+          className: "pie-center-label-title",
+          content: (props) => {
+            const { cx, cy } = props.viewBox ?? {
+              cx: 0,
+              cy: 0
+            };
+            const positioningProps = {
+              x: cx,
+              y: (cy || 0) + 25,
+              height: 20,
+              textAnchor: "middle",
+              verticalAnchor: "middle"
+            };
+            if (hoveredItem) {
+              return /* @__PURE__ */ React68.createElement(
+                ChartText,
+                {
+                  ...positioningProps,
+                  className: "pie-center-label__share"
+                },
+                `${formatPercent(
+                  filteredData.find(
+                    (x) => x.display_name === hoveredItem
+                  )?.share
+                )}%`
+              );
+            }
+            return;
+          }
+        }
+      )
+    )))), /* @__PURE__ */ React68.createElement("div", { className: "filters" }, /* @__PURE__ */ React68.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ React68.createElement(
+      Select3,
+      {
+        className: "type-select",
+        classNamePrefix: "Layer__select",
+        value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
+          value: x,
+          label: x
+        })) : [],
+        isMulti: true,
+        isClearable: false,
+        options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
+          label: x,
+          value: x
+        })),
+        onChange: (selected) => {
+          setFilterTypes(
+            sidebarScope ?? "expenses",
+            selected.map((x) => x.value)
+          );
+        }
+      }
+    )), /* @__PURE__ */ React68.createElement("div", { className: "details-container" }, /* @__PURE__ */ React68.createElement("div", { className: "table" }, /* @__PURE__ */ React68.createElement("table", null, /* @__PURE__ */ React68.createElement("thead", null, /* @__PURE__ */ React68.createElement("tr", null, /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("category"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "category")
+      },
+      "Expense/Sale ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("type"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "type")
+      },
+      "Type ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ React68.createElement("th", null), /* @__PURE__ */ React68.createElement(
+      "th",
+      {
+        className: buildColClass("value"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+      },
+      "Value ",
+      /* @__PURE__ */ React68.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ))), /* @__PURE__ */ React68.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+      const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+      return /* @__PURE__ */ React68.createElement(
+        "tr",
+        {
+          key: `pl-side-table-item-${idx}`,
+          className: classNames23(
+            "Layer__profit-and-loss-detailed-table__row",
+            hoveredItem && hoveredItem !== item.display_name ? "inactive" : ""
+          ),
+          onMouseEnter: () => setHoveredItem(item.display_name),
+          onMouseLeave: () => setHoveredItem(void 0)
+        },
+        /* @__PURE__ */ React68.createElement("td", { className: "category-col" }, item.display_name),
+        /* @__PURE__ */ React68.createElement("td", { className: "type-col" }, item.type),
+        /* @__PURE__ */ React68.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+        /* @__PURE__ */ React68.createElement("td", { className: "share-col" }, /* @__PURE__ */ React68.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React68.createElement(
+          "div",
+          {
+            className: "share-icon",
+            style: {
+              background: colorConfig.color,
+              opacity: colorConfig.opacity
+            }
+          }
+        )))
+      );
+    }))))))
+  );
+};
+
+// src/components/ProfitAndLossView/ProfitAndLossView.tsx
+var COMPONENT_NAME3 = "profit-and-loss";
+var ProfitAndLossView = (props) => {
+  return /* @__PURE__ */ React69.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ React69.createElement(ProfitAndLoss, null, /* @__PURE__ */ React69.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ React69.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ React69.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ React69.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ React69.createElement(ProfitAndLossDetailedCharts, null)));
 };
-var Components = () => {
-  const { error, isLoading, isValidating, refetch } = useContext6(
+var Components = ({
+  hideChart = false,
+  hideTable = false
+}) => {
+  const { error, isLoading, isValidating, refetch } = useContext7(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React60.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React60.createElement(
+    return /* @__PURE__ */ React69.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React69.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -4256,24 +5471,24 @@ var Components = () => {
       }
     ));
   }
-  return /* @__PURE__ */ React60.createElement(React60.Fragment, null, /* @__PURE__ */ React60.createElement("div", { className: `Layer__${COMPONENT_NAME2}__chart_with_summaries` }, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React69.createElement(React69.Fragment, null, !hideChart && /* @__PURE__ */ React69.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ React69.createElement(
     "div",
     {
-      className: `Layer__${COMPONENT_NAME2}__chart_with_summaries__summary-col`
+      className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React60.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React60.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ React69.createElement(
     "div",
     {
-      className: `Layer__${COMPONENT_NAME2}__chart_with_summaries__chart-col`
+      className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React60.createElement(ProfitAndLoss.Chart, null)
-  )), /* @__PURE__ */ React60.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ React69.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React69.createElement(ProfitAndLoss.Table, null));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-import React61, { useReducer, useEffect as useEffect5 } from "react";
+import React70, { useReducer, useEffect as useEffect9 } from "react";
 import { add as add2, isBefore } from "date-fns";
 import useSWR5, { SWRConfig } from "swr";
 var reducer = (state, action) => {
@@ -4338,7 +5553,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  useEffect5(() => {
+  useEffect9(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -4388,11 +5603,11 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ React61.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React61.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ React70.createElement(SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ React70.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React64, { useState as useState14 } from "react";
+import React73, { useState as useState17 } from "react";
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 import useSWR6 from "swr";
@@ -4412,21 +5627,21 @@ var useChartOfAccounts = () => {
 };
 
 // src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
-import React62, { useMemo as useMemo4, useState as useState13 } from "react";
-import Select3 from "react-select";
+import React71, { useMemo as useMemo6, useState as useState16 } from "react";
+import Select4 from "react-select";
 var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.subAccounts || [])]).flat().filter((id) => id);
 var ChartOfAccountsNewForm = () => {
   const { data, create: createAccount2 } = useChartOfAccounts();
-  const accountOptions = useMemo4(
+  const accountOptions = useMemo6(
     () => flattenAccounts(data?.accounts || []).sort(
       (a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0
     ),
     [data?.accounts?.length]
   );
-  const [name, setName] = useState13("");
-  const [description, setDescription] = useState13("");
-  const [normality, setNormality] = useState13("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = useState13(
+  const [name, setName] = useState16("");
+  const [description, setDescription] = useState16("");
+  const [normality, setNormality] = useState16("DEBIT" /* DEBIT */);
+  const [parentAccount, setParentAccount] = useState16(
     data?.accounts[0]
   );
   const save = () => {
@@ -4440,22 +5655,22 @@ var ChartOfAccountsNewForm = () => {
       description
     });
   };
-  return /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React62.createElement("span", null, "Name"), /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Name"), /* @__PURE__ */ React71.createElement(
     "input",
     {
       name: "name",
       value: name,
       onChange: (event) => setName(event.target.value)
     }
-  )), /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React62.createElement("span", null, "Description"), /* @__PURE__ */ React62.createElement(
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Description"), /* @__PURE__ */ React71.createElement(
     "input",
     {
       name: "description",
       value: description,
       onChange: (event) => setDescription(event.target.value)
     }
-  )), /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React62.createElement("span", null, "Normality"), /* @__PURE__ */ React62.createElement(
-    Select3,
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Normality"), /* @__PURE__ */ React71.createElement(
+    Select4,
     {
       isSearchable: false,
       onChange: (value) => value && setNormality(value.value),
@@ -4464,8 +5679,8 @@ var ChartOfAccountsNewForm = () => {
         { label: "Debit", value: "DEBIT" /* DEBIT */ }
       ]
     }
-  )), /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React62.createElement("span", null, "Parent Account"), /* @__PURE__ */ React62.createElement(
-    Select3,
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ React71.createElement("span", null, "Parent Account"), /* @__PURE__ */ React71.createElement(
+    Select4,
     {
       isSearchable: true,
       value: parentAccount,
@@ -4474,49 +5689,49 @@ var ChartOfAccountsNewForm = () => {
       getOptionValue: (a) => a.id,
       options: accountOptions
     }
-  )), /* @__PURE__ */ React62.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ React62.createElement("button", { onClick: save }, "Save")));
+  )), /* @__PURE__ */ React71.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ React71.createElement("button", { onClick: save }, "Save")));
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React63 from "react";
+import React72 from "react";
 var ChartOfAccountsRow = ({ account, depth = 0 }) => {
-  const classNames20 = [
+  const classNames24 = [
     "Layer__chart-of-accounts-row__table-cell",
     depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
   ];
-  const className = classNames20.filter((id) => id).join(" ");
+  const className = classNames24.filter((id) => id).join(" ");
   const amountClassName = account.balance < 0 ? "Layer__chart-of-accounts-row__table-cell--amount-negative" : "Layer__chart-of-accounts-row__table-cell--amount-positive";
-  return /* @__PURE__ */ React63.createElement(React63.Fragment, null, /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React72.createElement(React72.Fragment, null, /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--name`
     },
     account.name
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--type`
     },
     "Assets"
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
     },
     "Cash"
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
     },
     centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ React63.createElement(
+  ), /* @__PURE__ */ React72.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
     },
-    /* @__PURE__ */ React63.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React72.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
+  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ React72.createElement(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -4529,15 +5744,15 @@ var ChartOfAccountsRow = ({ account, depth = 0 }) => {
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
 var ChartOfAccounts = () => {
   const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = useState14(false);
-  return /* @__PURE__ */ React64.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ React64.createElement(React64.Fragment, null, /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ React64.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ React64.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ React64.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ React64.createElement(
+  const [showingForm, setShowingForm] = useState17(false);
+  return /* @__PURE__ */ React73.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ React73.createElement(React73.Fragment, null, /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ React73.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ React73.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ React73.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ React73.createElement(
     "button",
     {
       className: "Layer__chart-of-accounts__edit-accounts-button",
       onClick: () => setShowingForm(!showingForm)
     },
     "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ React64.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ React64.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ React64.createElement(
+  ))), showingForm && /* @__PURE__ */ React73.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ React73.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ React73.createElement(
     ChartOfAccountsRow,
     {
       key: account.id,
@@ -4552,6 +5767,7 @@ export {
   ChartOfAccounts,
   Hello,
   LayerProvider,
+  LinkedAccounts,
   ProfitAndLoss,
   ProfitAndLossView
 };