@layerfi/components 0.1.5 → 0.1.7

package/dist/index.js

@@ -35,6 +35,7 @@ __export(src_exports, {
   ChartOfAccounts: () => ChartOfAccounts,
   Hello: () => Hello,
   LayerProvider: () => LayerProvider,
+  LinkedAccounts: () => LinkedAccounts,
   ProfitAndLoss: () => ProfitAndLoss,
   ProfitAndLossView: () => ProfitAndLossView
 });
@@ -605,7 +606,7 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_react39 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
@@ -745,15 +746,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
-var import_react32 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
+
+// src/icons/ChevronDownFill.tsx
+var React8 = __toESM(require("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
-var import_react30 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
+
+// src/icons/AlertCircle.tsx
+var React9 = __toESM(require("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
-var React8 = __toESM(require("react"));
-var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement(
+var React10 = __toESM(require("react"));
+var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React10.createElement(
   "svg",
   {
     viewBox: "0 0 11 11",
@@ -763,7 +846,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",
@@ -771,7 +854,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -786,7 +869,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",
@@ -794,7 +877,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -809,7 +892,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M9.16668 1.83325L3.72168 7.27825",
@@ -817,7 +900,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -832,7 +915,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M6.63232 6.63672L9.16691 9.16672",
@@ -840,7 +923,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -855,7 +938,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       }
     )
   ),
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
       d: "M3.72168 3.72168L5.50001 5.50001",
@@ -863,7 +946,7 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
       strokeLinecap: "round",
       strokeLinejoin: "round"
     },
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React10.createElement(
       "animate",
       {
         attributeName: "d",
@@ -881,41 +964,8 @@ var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement
 );
 var Scissors_default = Scissors;
 
-// src/icons/X.tsx
-var React9 = __toESM(require("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
-var import_react16 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/Button/Button.tsx
 var import_react8 = __toESM(require("react"));
@@ -928,16 +978,19 @@ var Button = ({
   rightIcon,
   iconOnly,
   iconAsPrimary = false,
+  justify = "center",
   ...props
 }) => {
   const buttonRef = (0, import_react8.useRef)(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 = (0, import_classnames.default)(
     "Layer__btn",
@@ -961,7 +1014,7 @@ var Button = ({
       onMouseLeave: stopAnimation,
       ref: buttonRef
     },
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: `Layer__btn-content Layer__justify--${justify}` }, leftIcon && /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: `Layer__btn-content Layer__justify--${justifyContent}` }, leftIcon && /* @__PURE__ */ import_react8.default.createElement(
       "span",
       {
         className: (0, import_classnames.default)(
@@ -983,12 +1036,30 @@ var Button = ({
   );
 };
 
-// src/components/Button/SubmitButton.tsx
-var import_react13 = __toESM(require("react"));
+// src/components/Button/IconButton.tsx
+var import_react9 = __toESM(require("react"));
+var import_classnames2 = __toESM(require("classnames"));
+var IconButton = ({
+  className,
+  children,
+  icon,
+  active,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames2.default)(
+    "Layer__icon-btn",
+    `Layer__icon-btn--${active ? "active" : "inactive"}`,
+    className
+  );
+  return /* @__PURE__ */ import_react9.default.createElement("button", { ...props, className: baseClassName }, icon);
+};
 
-// src/icons/AlertCircle.tsx
-var React11 = __toESM(require("react"));
-var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createElement(
+// src/components/Button/RetryButton.tsx
+var import_react10 = __toESM(require("react"));
+
+// src/icons/RefreshCcw.tsx
+var React13 = __toESM(require("react"));
+var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -998,63 +1069,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
-var React12 = __toESM(require("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
+var import_classnames3 = __toESM(require("classnames"));
+var RetryButton = ({
+  className,
+  processing,
+  disabled,
+  error,
+  children,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames3.default)(
+    "Layer__retry-btn",
+    processing ? "Layer__btn--processing" : "",
+    className
+  );
+  return /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement(RefreshCcw_default, { size: 12 }),
+      justify: "center"
+    },
+    children
+  );
+};
+
+// src/components/Button/SubmitButton.tsx
+var import_react15 = __toESM(require("react"));
 
 // src/icons/CheckCircle.tsx
-var React13 = __toESM(require("react"));
-var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createElement(
+var React15 = __toESM(require("react"));
+var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1064,7 +1143,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",
@@ -1073,7 +1152,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",
@@ -1086,8 +1165,8 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createEle
 var CheckCircle_default = CheckCircle;
 
 // src/icons/Loader.tsx
-var React14 = __toESM(require("react"));
-var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
+var React16 = __toESM(require("react"));
+var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React16.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1097,7 +1176,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",
@@ -1106,7 +1185,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M9 13.5V16.5",
@@ -1115,7 +1194,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",
@@ -1124,7 +1203,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",
@@ -1133,7 +1212,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M1.5 9H4.5",
@@ -1142,7 +1221,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React14.createElement(
+  /* @__PURE__ */ React16.createElement(
     "path",
     {
       d: "M13.5 9H16.5",
@@ -1151,7 +1230,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",
@@ -1160,7 +1239,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",
@@ -1173,8 +1252,8 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
 var Loader_default = Loader;
 
 // src/icons/Save.tsx
-var React15 = __toESM(require("react"));
-var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
+var React17 = __toESM(require("react"));
+var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React17.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1184,7 +1263,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",
@@ -1193,7 +1272,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",
@@ -1202,7 +1281,7 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React15.createElement(
+  /* @__PURE__ */ React17.createElement(
     "path",
     {
       d: "M5.25 2.25V6H11.25",
@@ -1215,14 +1294,14 @@ var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
 var Save_default = Save;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react11 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 
 // src/components/Tooltip/useTooltip.ts
-var import_react9 = __toESM(require("react"));
-var import_react10 = require("@floating-ui/react");
-var TooltipContext = import_react9.default.createContext(null);
+var import_react11 = __toESM(require("react"));
+var import_react12 = require("@floating-ui/react");
+var TooltipContext = import_react11.default.createContext(null);
 var useTooltipContext = () => {
-  const context = import_react9.default.useContext(TooltipContext);
+  const context = import_react11.default.useContext(TooltipContext);
   if (context == null) {
     throw new Error("Tooltip components must be wrapped in <Tooltip />");
   }
@@ -1237,36 +1316,36 @@ var useTooltip = ({
   offset: offsetProp = 5,
   shift: shiftProp = { padding: 5 }
 } = {}) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react9.useState)(initialOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react11.useState)(initialOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0, import_react10.useFloating)({
+  const data = (0, import_react12.useFloating)({
     placement,
     open: disabled ? false : open,
     onOpenChange: setOpen,
-    whileElementsMounted: import_react10.autoUpdate,
+    whileElementsMounted: import_react12.autoUpdate,
     middleware: [
-      (0, import_react10.offset)(offsetProp),
-      (0, import_react10.flip)({
+      (0, import_react12.offset)(offsetProp),
+      (0, import_react12.flip)({
         crossAxis: placement.includes("-"),
         fallbackAxisSideDirection: "start",
         padding: shiftProp?.padding ?? 5
       }),
-      (0, import_react10.shift)(shiftProp)
+      (0, import_react12.shift)(shiftProp)
     ]
   });
   const context = data.context;
-  const hover = (0, import_react10.useHover)(context, {
+  const hover = (0, import_react12.useHover)(context, {
     move: false,
     enabled: controlledOpen == null
   });
-  const focus = (0, import_react10.useFocus)(context, {
+  const focus = (0, import_react12.useFocus)(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = (0, import_react10.useDismiss)(context);
-  const role = (0, import_react10.useRole)(context, { role: "tooltip" });
-  const interactions = (0, import_react10.useInteractions)([hover, focus, dismiss, role]);
-  const { isMounted, styles } = (0, import_react10.useTransitionStyles)(context, {
+  const dismiss = (0, import_react12.useDismiss)(context);
+  const role = (0, import_react12.useRole)(context, { role: "tooltip" });
+  const interactions = (0, import_react12.useInteractions)([hover, focus, dismiss, role]);
+  const { isMounted, styles } = (0, import_react12.useTransitionStyles)(context, {
     initial: {
       opacity: 0,
       transform: "scale(0.7)",
@@ -1274,7 +1353,7 @@ var useTooltip = ({
     },
     duration: 300
   });
-  return import_react9.default.useMemo(
+  return import_react11.default.useMemo(
     () => ({
       open,
       setOpen,
@@ -1289,20 +1368,20 @@ var useTooltip = ({
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react12 = require("@floating-ui/react");
+var import_react14 = require("@floating-ui/react");
 var Tooltip = ({
   children,
   ...options
 }) => {
   const tooltip = useTooltip(options);
-  return /* @__PURE__ */ import_react11.default.createElement(TooltipContext.Provider, { value: tooltip }, children);
+  return /* @__PURE__ */ import_react13.default.createElement(TooltipContext.Provider, { value: tooltip }, children);
 };
-var TooltipTrigger = (0, import_react11.forwardRef)(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
+var TooltipTrigger = (0, import_react13.forwardRef)(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
   const context = useTooltipContext();
   const childrenRef = children.ref;
-  const ref = (0, import_react12.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
-  if (asChild && (0, import_react11.isValidElement)(children)) {
-    return (0, import_react11.cloneElement)(
+  const ref = (0, import_react14.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+  if (asChild && (0, import_react13.isValidElement)(children)) {
+    return (0, import_react13.cloneElement)(
       children,
       context.getReferenceProps({
         ref,
@@ -1312,7 +1391,7 @@ var TooltipTrigger = (0, import_react11.forwardRef)(function TooltipTrigger2({ c
       })
     );
   }
-  return /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "span",
     {
       ref,
@@ -1323,12 +1402,12 @@ var TooltipTrigger = (0, import_react11.forwardRef)(function TooltipTrigger2({ c
     children
   );
 });
-var TooltipContent = (0, import_react11.forwardRef)(function TooltipContent2({ style, className, ...props }, propRef) {
+var TooltipContent = (0, import_react13.forwardRef)(function TooltipContent2({ style, className, ...props }, propRef) {
   const context = useTooltipContext();
-  const ref = (0, import_react12.useMergeRefs)([context.refs.setFloating, propRef]);
+  const ref = (0, import_react14.useMergeRefs)([context.refs.setFloating, propRef]);
   if (!context.open || context.disabled)
     return null;
-  return /* @__PURE__ */ import_react11.default.createElement(import_react12.FloatingPortal, null, /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(import_react14.FloatingPortal, null, /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       ref,
@@ -1338,34 +1417,27 @@ var TooltipContent = (0, import_react11.forwardRef)(function TooltipContent2({ s
       },
       ...context.getFloatingProps(props)
     },
-    /* @__PURE__ */ import_react11.default.createElement("div", { className: "Layer__tooltip-content ", style: { ...context.styles } }, props.children)
+    /* @__PURE__ */ import_react13.default.createElement("div", { className: "Layer__tooltip-content ", style: { ...context.styles } }, props.children)
   ));
 });
 
 // src/components/Button/SubmitButton.tsx
-var import_classnames2 = __toESM(require("classnames"));
+var import_classnames4 = __toESM(require("classnames"));
 var buildRightIcon = ({
   processing,
   error,
   action
 }) => {
   if (processing) {
-    return /* @__PURE__ */ import_react13.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
+    return /* @__PURE__ */ import_react15.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
   }
   if (error) {
-    return /* @__PURE__ */ import_react13.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react13.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react13.default.createElement(AlertCircle_default, { size: 14 })), /* @__PURE__ */ import_react13.default.createElement(TooltipContent, { className: "Layer__tooltip" }, error));
+    return /* @__PURE__ */ import_react15.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react15.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react15.default.createElement(AlertCircle_default, { size: 14 })), /* @__PURE__ */ import_react15.default.createElement(TooltipContent, { className: "Layer__tooltip" }, error));
   }
   if (action === "update" /* UPDATE */) {
-    return /* @__PURE__ */ import_react13.default.createElement("span", { className: "Layer__pt-2" }, /* @__PURE__ */ import_react13.default.createElement(Save_default, { size: 14 }));
+    return /* @__PURE__ */ import_react15.default.createElement("span", { className: "Layer__pt-2" }, /* @__PURE__ */ import_react15.default.createElement(Save_default, { size: 14 }));
   }
-  return /* @__PURE__ */ import_react13.default.createElement("span", null, /* @__PURE__ */ import_react13.default.createElement(Check_default, { className: "Layer__btn-icon--on-active", size: 14 }), /* @__PURE__ */ import_react13.default.createElement(
-    CheckCircle_default,
-    {
-      className: "Layer__btn-icon--on-inactive",
-      size: 14,
-      style: { paddingTop: 4 }
-    }
-  ));
+  return /* @__PURE__ */ import_react15.default.createElement("span", null, /* @__PURE__ */ import_react15.default.createElement(CheckCircle_default, { size: 14, style: { paddingTop: 4 } }));
 };
 var SubmitButton = ({
   active,
@@ -1377,11 +1449,11 @@ var SubmitButton = ({
   action = "save" /* SAVE */,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames2.default)(
+  const baseClassName = (0, import_classnames4.default)(
     active ? "Layer__btn--active" : "",
     className
   );
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     Button,
     {
       ...props,
@@ -1395,38 +1467,20 @@ var SubmitButton = ({
   );
 };
 
-// src/components/Button/IconButton.tsx
-var import_react14 = __toESM(require("react"));
-var import_classnames3 = __toESM(require("classnames"));
-var IconButton = ({
-  className,
-  children,
-  icon,
-  active,
-  ...props
-}) => {
-  const baseClassName = (0, import_classnames3.default)(
-    "Layer__icon-btn",
-    `Layer__icon-btn--${active ? "active" : "inactive"}`,
-    className
-  );
-  return /* @__PURE__ */ import_react14.default.createElement("button", { ...props, className: baseClassName }, icon);
-};
-
 // src/components/Button/TextButton.tsx
-var import_react15 = __toESM(require("react"));
-var import_classnames4 = __toESM(require("classnames"));
+var import_react16 = __toESM(require("react"));
+var import_classnames5 = __toESM(require("classnames"));
 var TextButton = ({
   className,
   children,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames4.default)("Layer__text-btn", className);
-  return /* @__PURE__ */ import_react15.default.createElement("button", { ...props, className: baseClassName }, children);
+  const baseClassName = (0, import_classnames5.default)("Layer__text-btn", className);
+  return /* @__PURE__ */ import_react16.default.createElement("button", { ...props, className: baseClassName }, children);
 };
 
 // src/components/Badge/Badge.tsx
-var import_classnames5 = __toESM(require("classnames"));
+var import_classnames6 = __toESM(require("classnames"));
 var Badge = ({
   icon,
   onClick,
@@ -1435,7 +1489,7 @@ var Badge = ({
   size = "medium" /* MEDIUM */
 }) => {
   const baseProps = {
-    className: (0, import_classnames5.default)(
+    className: (0, import_classnames6.default)(
       "Layer__badge",
       onClick || tooltip ? "Layer__badge--clickable" : "",
       `Layer__badge--${size}`
@@ -1443,58 +1497,82 @@ var Badge = ({
     onClick,
     children
   };
-  let content = /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, icon && /* @__PURE__ */ import_react16.default.createElement("span", { className: "Layer__badge__icon" }, icon), children);
-  content = onClick ? /* @__PURE__ */ import_react16.default.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ import_react16.default.createElement("span", { ...baseProps }, content);
+  let content = /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, icon && /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__badge__icon" }, icon), children);
+  content = onClick ? /* @__PURE__ */ import_react17.default.createElement(Button, { ...baseProps }, content) : /* @__PURE__ */ import_react17.default.createElement("span", { ...baseProps }, content);
   if (tooltip) {
-    return /* @__PURE__ */ import_react16.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react16.default.createElement(TooltipTrigger, null, content), /* @__PURE__ */ import_react16.default.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
+    return /* @__PURE__ */ import_react17.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react17.default.createElement(TooltipTrigger, null, content), /* @__PURE__ */ import_react17.default.createElement(TooltipContent, { className: "Layer__tooltip" }, tooltip));
   }
   return content;
 };
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_react17 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_react_select = __toESM(require("react-select"));
 
-// src/icons/MinimizeTwo.tsx
-var React22 = __toESM(require("react"));
-var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createElement(
+// src/icons/Check.tsx
+var React23 = __toESM(require("react"));
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React23.createElement(
   "svg",
   {
-    xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 18 18",
     fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React22.createElement(
-    "path",
-    {
-      d: "M3 10.5H7.5V15",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React23.createElement(
     "path",
     {
-      d: "M15 7.5H10.5V3",
+      d: "M15 4.5L6.75 12.75L3 9",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ),
-  /* @__PURE__ */ React22.createElement(
-    "path",
-    {
-      d: "M10.5 7.5L15.75 2.25",
+  )
+);
+var Check_default = Check;
+
+// src/icons/MinimizeTwo.tsx
+var React24 = __toESM(require("react"));
+var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React24.createElement(
+    "path",
+    {
+      d: "M3 10.5H7.5V15",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React24.createElement(
+    "path",
+    {
+      d: "M15 7.5H10.5V3",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React24.createElement(
+    "path",
+    {
+      d: "M10.5 7.5L15.75 2.25",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
       d: "M2.25 15.75L7.5 10.5",
@@ -1507,7 +1585,7 @@ var MinimizeTwo = ({ size = 18, ...props }) => /* @__PURE__ */ React22.createEle
 var MinimizeTwo_default = MinimizeTwo;
 
 // src/components/CategorySelect/CategorySelect.tsx
-var import_classnames6 = __toESM(require("classnames"));
+var import_classnames7 = __toESM(require("classnames"));
 var import_date_fns4 = require("date-fns");
 var mapCategoryToOption = (category) => {
   return {
@@ -1535,13 +1613,13 @@ var mapSuggestedMatchToOption = (record) => {
   };
 };
 var DropdownIndicator = (props) => {
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react17.default.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ import_react18.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react18.default.createElement(ChevronDown_default, null));
 };
 var GroupHeading = (props) => {
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     import_react_select.components.GroupHeading,
     {
-      className: (0, import_classnames6.default)(
+      className: (0, import_classnames7.default)(
         props.className,
         props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
       ),
@@ -1554,24 +1632,24 @@ var Option = (props) => {
     return;
   }
   if (props.data.type === "match") {
-    return /* @__PURE__ */ import_react17.default.createElement(
+    return /* @__PURE__ */ import_react18.default.createElement(
       import_react_select.components.Option,
       {
         ...props,
         className: `${props.className} Layer__select__option-content__match`
       },
-      /* @__PURE__ */ import_react17.default.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
-      /* @__PURE__ */ import_react17.default.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
+      /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__select__option-content__match__main-row" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__date" }, props.data.payload.date && (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(props.data.payload.date), DATE_FORMAT)), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__description" }, props.data.payload.display_name)),
+      /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__select__option-content__match__amount-row" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-content__match__amount" }, "$", centsToDollars(props.data.payload.amount)))
     );
   }
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     import_react_select.components.Option,
     {
       ...props,
       className: `Layer__select__option-menu-content ${props.className}`
     },
-    /* @__PURE__ */ import_react17.default.createElement("div", null, props.data.payload.display_name),
-    props.isSelected ? /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ import_react17.default.createElement(Check_default, { size: 16 })) : null
+    /* @__PURE__ */ import_react18.default.createElement("div", null, props.data.payload.display_name),
+    props.isSelected ? /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__select__option-menu-content-check" }, /* @__PURE__ */ import_react18.default.createElement(Check_default, { size: 16 })) : null
   );
 };
 var allCategoriesDivider = [
@@ -1654,7 +1732,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__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react18.default.createElement(
     import_react_select.default,
     {
       name,
@@ -1664,7 +1742,7 @@ var CategorySelect = ({
       isSearchable: true,
       placeholder,
       defaultValue: selected,
-      formatOptionLabel: (props) => /* @__PURE__ */ import_react17.default.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ import_react17.default.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ import_react17.default.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ import_react17.default.createElement("span", null, props.payload.display_name)),
+      formatOptionLabel: (props) => /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__select__option-label" }, props.type === "match" && /* @__PURE__ */ import_react18.default.createElement(Badge, { size: "small" /* SMALL */, icon: /* @__PURE__ */ import_react18.default.createElement(MinimizeTwo_default, { size: 11 }) }, "Match"), /* @__PURE__ */ import_react18.default.createElement("span", null, props.payload.display_name)),
       value,
       onChange: (newValue) => newValue && onChange(newValue),
       getOptionLabel: (category) => category.payload.display_name,
@@ -1681,11 +1759,72 @@ var CategorySelect = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_react28 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
-// src/icons/Link.tsx
-var React24 = __toESM(require("react"));
-var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
+// src/icons/ScissorsFullOpen.tsx
+var React26 = __toESM(require("react"));
+var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React26.createElement(
+  "svg",
+  {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React26.createElement("g", { id: "scissors" }, /* @__PURE__ */ React26.createElement(
+    "path",
+    {
+      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
+var React27 = __toESM(require("react"));
+var Trash = ({ size = 18, ...props }) => /* @__PURE__ */ React27.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1695,32 +1834,50 @@ var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React27.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",
+      d: "M2.25 4.5H3.75H15.75",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React24.createElement(
+  /* @__PURE__ */ React27.createElement(
+    "path",
+    {
+      d: "M14.25 4.5V15C14.25 15.3978 14.092 15.7794 13.8107 16.0607C13.5294 16.342 13.1478 16.5 12.75 16.5H5.25C4.85218 16.5 4.47064 16.342 4.18934 16.0607C3.90804 15.7794 3.75 15.3978 3.75 15V4.5M6 4.5V3C6 2.60218 6.15804 2.22064 6.43934 1.93934C6.72064 1.65804 7.10218 1.5 7.5 1.5H10.5C10.8978 1.5 11.2794 1.65804 11.5607 1.93934C11.842 2.22064 12 2.60218 12 3V4.5",
+      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.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: "M10.5 8.25V12.75",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   )
 );
-var Link_default = Link;
+var Trash_default = Trash;
 
 // src/components/CategoryMenu/CategoryMenu.tsx
-var import_react18 = __toESM(require("react"));
+var import_react19 = __toESM(require("react"));
 var import_react_select2 = __toESM(require("react-select"));
 var DropdownIndicator2 = (props) => {
-  return /* @__PURE__ */ import_react18.default.createElement(import_react_select2.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react18.default.createElement(ChevronDown_default, null));
+  return /* @__PURE__ */ import_react19.default.createElement(import_react_select2.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react19.default.createElement(ChevronDown_default, null));
 };
 var CategoryMenu = ({
   bankTransaction,
@@ -1750,7 +1907,7 @@ var CategoryMenu = ({
     };
   }).filter((x) => x);
   const options = [...suggestedOptions, ...categoryOptions];
-  return /* @__PURE__ */ import_react18.default.createElement(
+  return /* @__PURE__ */ import_react19.default.createElement(
     import_react_select2.default,
     {
       name,
@@ -1771,28 +1928,30 @@ var CategoryMenu = ({
 };
 
 // src/components/Input/Input.tsx
-var import_react19 = __toESM(require("react"));
-var import_classnames7 = __toESM(require("classnames"));
+var import_react20 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
 var Input = ({
   className,
   isInvalid,
   errorMessage,
+  leftText,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames7.default)(
+  const baseClassName = (0, import_classnames8.default)(
     "Layer__input",
     isInvalid ? "Layer__input--error" : "",
+    leftText ? "Layer__input--with-left-text" : "",
     className
   );
-  return /* @__PURE__ */ import_react19.default.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ import_react19.default.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ import_react19.default.createElement("input", { ...props, className: baseClassName })), /* @__PURE__ */ import_react19.default.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
+  return /* @__PURE__ */ import_react20.default.createElement(Tooltip, { disabled: !isInvalid || !errorMessage }, /* @__PURE__ */ import_react20.default.createElement(TooltipTrigger, { className: "Layer__input-tooltip" }, /* @__PURE__ */ import_react20.default.createElement("input", { ...props, className: baseClassName }), leftText && /* @__PURE__ */ import_react20.default.createElement("span", { className: "Layer__input-left-text" }, leftText)), /* @__PURE__ */ import_react20.default.createElement(TooltipContent, { className: "Layer__tooltip" }, errorMessage));
 };
 
 // src/components/Input/InputGroup.tsx
-var import_react22 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 
 // src/components/Typography/Text.tsx
-var import_react20 = __toESM(require("react"));
-var import_classnames8 = __toESM(require("classnames"));
+var import_react21 = __toESM(require("react"));
+var import_classnames9 = __toESM(require("classnames"));
 var Text = ({
   as: Component = "p",
   className,
@@ -1802,12 +1961,12 @@ var Text = ({
   withTooltip,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames8.default)(
+  const baseClassName = (0, import_classnames9.default)(
     `Layer__text Layer__text--${size} Layer__text--${weight}`,
     className
   );
   if (withTooltip) {
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       TextWithTooltip,
       {
         as: Component,
@@ -1820,7 +1979,7 @@ var Text = ({
       children
     );
   }
-  return /* @__PURE__ */ import_react20.default.createElement(Component, { ...props, className: baseClassName }, children);
+  return /* @__PURE__ */ import_react21.default.createElement(Component, { ...props, className: baseClassName }, children);
 };
 var TextWithTooltip = ({
   as: Component = "p",
@@ -1832,66 +1991,74 @@ var TextWithTooltip = ({
   tooltipOptions,
   ...props
 }) => {
-  const textElementRef = (0, import_react20.useRef)();
+  const textElementRef = (0, import_react21.useRef)();
   const compareSize = () => {
     if (textElementRef.current) {
       const compare = textElementRef.current.children[0].scrollWidth > textElementRef.current.children[0].clientWidth;
       setHover(compare);
     }
   };
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     compareSize();
     window.addEventListener("resize", compareSize);
   }, []);
-  (0, import_react20.useEffect)(
+  (0, import_react21.useEffect)(
     () => () => {
       window.removeEventListener("resize", compareSize);
     },
     []
   );
-  const [hoverStatus, setHover] = (0, import_react20.useState)(false);
-  const contentClassName = (0, import_classnames8.default)(
+  const [hoverStatus, setHover] = (0, import_react21.useState)(false);
+  const contentClassName = (0, import_classnames9.default)(
     "Layer__tooltip",
     tooltipOptions?.contentClassName
   );
-  return /* @__PURE__ */ import_react20.default.createElement(
+  return /* @__PURE__ */ import_react21.default.createElement(
     Tooltip,
     {
       disabled: !hoverStatus,
       offset: tooltipOptions?.offset,
       shift: tooltipOptions?.shift
     },
-    /* @__PURE__ */ import_react20.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react20.default.createElement(Component, { className, ref: textElementRef, ...props }, children)),
-    /* @__PURE__ */ import_react20.default.createElement(TooltipContent, { className: contentClassName }, children)
+    /* @__PURE__ */ import_react21.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react21.default.createElement(Component, { className, ref: textElementRef, ...props }, children)),
+    /* @__PURE__ */ import_react21.default.createElement(TooltipContent, { className: contentClassName }, children)
   );
 };
 
 // src/components/Typography/Heading.tsx
-var import_react21 = __toESM(require("react"));
-var import_classnames9 = __toESM(require("classnames"));
+var import_react22 = __toESM(require("react"));
+var import_classnames10 = __toESM(require("classnames"));
 var Heading = ({
   as: Component = "h2",
   className,
   children,
   size = "primary" /* primary */
 }) => {
-  const baseClassName = (0, import_classnames9.default)(
+  const baseClassName = (0, import_classnames10.default)(
     `Layer__heading Layer__heading--${size}`,
     className
   );
-  return /* @__PURE__ */ import_react21.default.createElement(Component, { className: baseClassName }, children);
+  return /* @__PURE__ */ import_react22.default.createElement(Component, { className: baseClassName }, children);
+};
+
+// src/components/Typography/ErrorText.tsx
+var import_react23 = __toESM(require("react"));
+var import_classnames11 = __toESM(require("classnames"));
+var ErrorText = ({ className, ...props }) => {
+  const baseClassName = (0, import_classnames11.default)("Layer__text--error", className);
+  return /* @__PURE__ */ import_react23.default.createElement(Text, { ...props, className: baseClassName });
 };
 
 // src/components/Input/InputGroup.tsx
-var import_classnames10 = __toESM(require("classnames"));
+var import_classnames12 = __toESM(require("classnames"));
 var InputGroup = ({
   label,
   name,
   className,
   children
 }) => {
-  const baseClassName = (0, import_classnames10.default)("Layer__input-group", className);
-  return /* @__PURE__ */ import_react22.default.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ import_react22.default.createElement(
+  const baseClassName = (0, import_classnames12.default)("Layer__input-group", className);
+  return /* @__PURE__ */ import_react24.default.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ import_react24.default.createElement(
     Text,
     {
       as: "label",
@@ -1904,11 +2071,11 @@ var InputGroup = ({
 };
 
 // src/components/Input/FileInput.tsx
-var import_react23 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 
 // src/icons/UploadCloud.tsx
-var React30 = __toESM(require("react"));
-var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createElement(
+var React34 = __toESM(require("react"));
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React34.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1918,7 +2085,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",
@@ -1927,7 +2094,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.createElement(
     "path",
     {
       d: "M9 9V15.75",
@@ -1936,7 +2103,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",
@@ -1945,7 +2112,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React30.createElement(
+  /* @__PURE__ */ React34.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -1959,7 +2126,7 @@ var UploadCloud_default = UploadCloud;
 
 // src/components/Input/FileInput.tsx
 var FileInput = ({ text = "Upload", onUpload }) => {
-  const hiddenFileInput = (0, import_react23.useRef)(null);
+  const hiddenFileInput = (0, import_react25.useRef)(null);
   const onClick = () => {
     if (hiddenFileInput.current) {
       hiddenFileInput.current.click();
@@ -1971,15 +2138,15 @@ var FileInput = ({ text = "Upload", onUpload }) => {
       onUpload(fileUploaded);
     }
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
     Button,
     {
       onClick,
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ import_react23.default.createElement(UploadCloud_default, null)
+      rightIcon: /* @__PURE__ */ import_react25.default.createElement(UploadCloud_default, null)
     },
     text
-  ), /* @__PURE__ */ import_react23.default.createElement(
+  ), /* @__PURE__ */ import_react25.default.createElement(
     "input",
     {
       type: "file",
@@ -1991,10 +2158,10 @@ var FileInput = ({ text = "Upload", onUpload }) => {
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_react25 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 
 // src/components/BankTransactionRow/MatchBadge.tsx
-var import_react24 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var import_date_fns5 = require("date-fns");
 var MatchBadge = ({
   bankTransaction,
@@ -2004,11 +2171,11 @@ var MatchBadge = ({
 }) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
     const { date, amount, description } = bankTransaction.match.bank_transaction;
-    return /* @__PURE__ */ import_react24.default.createElement(
+    return /* @__PURE__ */ import_react26.default.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ import_react24.default.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ import_react24.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react24.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react24.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ import_react24.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        icon: /* @__PURE__ */ import_react26.default.createElement(MinimizeTwo_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ import_react26.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2017,20 +2184,26 @@ var MatchBadge = ({
 };
 
 // src/components/MatchForm/MatchForm.tsx
-var import_classnames11 = __toESM(require("classnames"));
+var import_classnames13 = __toESM(require("classnames"));
 var import_date_fns6 = require("date-fns");
 var MatchForm = ({
   classNamePrefix,
   bankTransaction,
   selectedMatchId,
-  setSelectedMatchId
+  setSelectedMatchId,
+  matchFormError
 }) => {
-  return /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__status` })), bankTransaction.suggested_matches?.map((match, idx) => {
-    return /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ import_react27.default.createElement(
+    "div",
+    {
+      className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
+    }
+  )), bankTransaction.suggested_matches?.map((match, idx) => {
+    return /* @__PURE__ */ import_react27.default.createElement(
       "div",
       {
         key: idx,
-        className: (0, import_classnames11.default)(
+        className: (0, import_classnames13.default)(
           `${classNamePrefix}__match-row`,
           match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
         ),
@@ -2042,14 +2215,15 @@ var MatchForm = ({
           setSelectedMatchId(match.id);
         }
       },
-      /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react27.default.createElement(
         "div",
         {
           className: `Layer__nowrap ${classNamePrefix}__match-table__date`
         },
-        (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(match.details.date), DATE_FORMAT)
+        /* @__PURE__ */ import_react27.default.createElement("span", null, (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(match.details.date), DATE_FORMAT)),
+        /* @__PURE__ */ import_react27.default.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
       ),
-      /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ import_react27.default.createElement(
         Text,
         {
           className: `${classNamePrefix}__match-table__desc-tooltip`,
@@ -2057,9 +2231,7 @@ var MatchForm = ({
           as: "span"
         },
         match.details.description
-      )),
-      /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
-      /* @__PURE__ */ import_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__status` }, match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react25.default.createElement(
+      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react27.default.createElement("span", { className: "match-badge" }, /* @__PURE__ */ import_react27.default.createElement(
         MatchBadge,
         {
           classNamePrefix,
@@ -2067,25 +2239,41 @@ var MatchForm = ({
           dateFormat: DATE_FORMAT,
           text: "Matched"
         }
-      ))
+      ))),
+      /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
+      /* @__PURE__ */ import_react27.default.createElement(
+        "div",
+        {
+          className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
+        },
+        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react27.default.createElement(
+          MatchBadge,
+          {
+            classNamePrefix,
+            bankTransaction,
+            dateFormat: DATE_FORMAT,
+            text: "Matched"
+          }
+        )
+      )
     );
-  }));
+  }), matchFormError && /* @__PURE__ */ import_react27.default.createElement(ErrorText, null, matchFormError));
 };
 
 // src/components/Textarea/Textarea.tsx
-var import_react26 = __toESM(require("react"));
-var import_classnames12 = __toESM(require("classnames"));
+var import_react28 = __toESM(require("react"));
+var import_classnames14 = __toESM(require("classnames"));
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames12.default)("Layer__textarea", className);
-  return /* @__PURE__ */ import_react26.default.createElement("textarea", { ...props, className: baseClassName });
+  const baseClassName = (0, import_classnames14.default)("Layer__textarea", className);
+  return /* @__PURE__ */ import_react28.default.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
-var import_react27 = __toESM(require("react"));
-var import_classnames13 = __toESM(require("classnames"));
+var import_react29 = __toESM(require("react"));
+var import_classnames15 = __toESM(require("classnames"));
 var Toggle = ({
   name,
   options,
@@ -2093,16 +2281,16 @@ var Toggle = ({
   onChange,
   size = "medium" /* medium */
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react27.useState)(0);
-  const [thumbPos, setThumbPos] = (0, import_react27.useState)({ left: 0, width: 0 });
-  const [initialized, setInitialized] = (0, import_react27.useState)(false);
+  const [currentWidth, setCurrentWidth] = (0, import_react29.useState)(0);
+  const [thumbPos, setThumbPos] = (0, import_react29.useState)({ left: 0, width: 0 });
+  const [initialized, setInitialized] = (0, import_react29.useState)(false);
   const toggleRef = useElementSize((a, b, c) => {
     if (c.width && c?.width !== currentWidth) {
       setCurrentWidth(c.width);
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = (0, import_classnames13.default)(
+  const baseClassName = (0, import_classnames15.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -2130,14 +2318,14 @@ var Toggle = ({
     shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1.5);
     setThumbPos({ left: shift2, width });
   };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
     setTimeout(() => {
       setInitialized(true);
     }, 400);
   }, []);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
@@ -2150,7 +2338,7 @@ var Toggle = ({
     }
     return selectedIndex;
   };
-  return /* @__PURE__ */ import_react27.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react29.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react29.default.createElement(
     ToggleOption,
     {
       ...option,
@@ -2162,7 +2350,7 @@ var Toggle = ({
       disabled: option.disabled ?? false,
       index
     }
-  )), /* @__PURE__ */ import_react27.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+  )), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
 };
 var ToggleOption = ({
   checked,
@@ -2175,7 +2363,21 @@ var ToggleOption = ({
   disabled,
   index
 }) => {
-  return /* @__PURE__ */ import_react27.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react27.default.createElement(
+  if (disabled) {
+    return /* @__PURE__ */ import_react29.default.createElement(Tooltip, null, /* @__PURE__ */ import_react29.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react29.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react29.default.createElement(
+      "input",
+      {
+        type: "radio",
+        checked,
+        name,
+        onChange,
+        value,
+        disabled: disabled ?? false,
+        "data-idx": index
+      }
+    ), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react29.default.createElement("span", null, label)))), /* @__PURE__ */ import_react29.default.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+  }
+  return /* @__PURE__ */ import_react29.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react29.default.createElement(
     "input",
     {
       type: "radio",
@@ -2186,11 +2388,158 @@ var ToggleOption = ({
       disabled: disabled ?? false,
       "data-idx": index
     }
-  ), /* @__PURE__ */ import_react27.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react27.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react27.default.createElement("span", null, label)));
+  ), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react29.default.createElement("span", null, label)));
+};
+
+// src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
+var import_react30 = __toESM(require("react"));
+
+// src/icons/AlertOctagon.tsx
+var React40 = __toESM(require("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] = (0, import_react30.useState)([]);
+  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());
+  };
+  (0, import_react30.useEffect)(() => {
+    if (bankTransaction.error) {
+      pushNotification(ERROR_TITLE, ERROR_MESSAGE);
+    }
+  }, [bankTransaction.error]);
+  return /* @__PURE__ */ import_react30.default.createElement(
+    "div",
+    {
+      className: "Layer__bank-transactions__notifications",
+      style: containerWidth ? { left: containerWidth - 324 } : {}
+    },
+    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ import_react30.default.createElement(
+      Notification,
+      {
+        key: notification.timestamp,
+        notification,
+        deleteNotification
+      }
+    ))
+  );
+};
+var Notification = ({
+  notification,
+  deleteNotification
+}) => {
+  const [visible, setVisible] = (0, import_react30.useState)(false);
+  (0, import_react30.useEffect)(() => {
+    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__ */ import_react30.default.createElement(
+    "div",
+    {
+      className: `Layer__bank-transactions__notification ${visible ? "notification-enter" : "notification-exit"}`,
+      onClick: hideNotification
+    },
+    /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ import_react30.default.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ import_react30.default.createElement(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__notification-title"
+      },
+      notification.title
+    ), /* @__PURE__ */ import_react30.default.createElement(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__notification-message"
+      },
+      notification.message
+    )))
+  );
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_classnames14 = __toESM(require("classnames"));
+var import_classnames16 = __toESM(require("classnames"));
 var hasMatch = (bankTransaction) => {
   return Boolean(
     bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
@@ -2205,29 +2554,44 @@ var isAlreadyMatched = (bankTransaction) => {
   }
   return void 0;
 };
-var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
+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 = (0, import_react31.forwardRef)(
   ({
     bankTransaction,
     isOpen = false,
+    editable,
     asListItem = false,
-    submitBtnText = "Save"
+    submitBtnText = "Save",
+    containerWidth
   }, ref) => {
     const {
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
     } = useBankTransactions();
-    const [purpose, setPurpose] = (0, import_react28.useState)(
+    const [purpose, setPurpose] = (0, import_react31.useState)(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
     );
-    const [selectedMatchId, setSelectedMatchId] = (0, import_react28.useState)(
+    const [selectedMatchId, setSelectedMatchId] = (0, import_react31.useState)(
       isAlreadyMatched(bankTransaction)
     );
-    const [height, setHeight] = (0, import_react28.useState)(0);
-    const [isOver, setOver] = (0, import_react28.useState)(false);
-    const bodyRef = (0, import_react28.useRef)(null);
-    const [isLoaded, setIsLoaded] = (0, import_react28.useState)(false);
+    const [matchFormError, setMatchFormError] = (0, import_react31.useState)();
+    const [splitFormError, setSplitFormError] = (0, import_react31.useState)();
+    const [height, setHeight] = (0, import_react31.useState)(0);
+    const [isOver, setOver] = (0, import_react31.useState)(false);
+    const bodyRef = (0, import_react31.useRef)(null);
+    const [isLoaded, setIsLoaded] = (0, import_react31.useState)(false);
     const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
-    const [rowState, updateRowState] = (0, import_react28.useState)({
+    const [rowState, updateRowState] = (0, import_react31.useState)({
       splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
         return {
           amount: c.amount || 0,
@@ -2244,13 +2608,16 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
       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) => {
@@ -2264,6 +2631,7 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
         ...rowState,
         splits: newSplits
       });
+      setSplitFormError(void 0);
     };
     const updateAmounts = (rowNumber) => (event) => {
       const newAmount = dollarsToCents(event.target.value) || 0;
@@ -2278,28 +2646,47 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
       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 ? {
@@ -2315,9 +2702,9 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
             amount: split.amount
           }))
         }
-      ).catch((e) => console.error(e));
+      );
     };
-    (0, import_react28.useImperativeHandle)(ref, () => ({
+    (0, import_react31.useImperativeHandle)(ref, () => ({
       save
     }));
     const onMatchSubmit = (matchId) => {
@@ -2329,11 +2716,11 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
       }
       matchBankTransaction2(bankTransaction.id, foundMatch.id);
     };
-    const getDivHeight = (0, import_react28.useCallback)(() => {
+    const getDivHeight = (0, import_react31.useCallback)(() => {
       const { height: height2 } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : { height: void 0 };
       return height2 || 0;
     }, []);
-    const handleTransitionEnd = (0, import_react28.useCallback)(
+    const handleTransitionEnd = (0, import_react31.useCallback)(
       (e) => {
         if (e.propertyName === "height") {
           setHeight(isOpen ? "auto" : 0);
@@ -2344,7 +2731,7 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
       },
       [isOpen]
     );
-    (0, import_react28.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (!isLoaded) {
         return;
       }
@@ -2356,20 +2743,20 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
         });
       }
     }, [getDivHeight, isOpen]);
-    (0, import_react28.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       setIsLoaded(true);
       setOver(true);
     }, []);
     const className = "Layer__expanded-bank-transaction-row";
     const shouldHide = !isOpen && isOver;
-    return /* @__PURE__ */ import_react28.default.createElement(
+    return /* @__PURE__ */ import_react31.default.createElement(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
         style: { height },
         onTransitionEnd: handleTransitionEnd
       },
-      shouldHide ? null : /* @__PURE__ */ import_react28.default.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react28.default.createElement(
+      shouldHide ? null : /* @__PURE__ */ import_react31.default.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react31.default.createElement(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -2388,46 +2775,50 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ import_react28.default.createElement(
+      )), /* @__PURE__ */ import_react31.default.createElement(
         "div",
         {
           className: `${className}__content`,
           id: `expanded-${bankTransaction.id}`
         },
-        /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react28.default.createElement(
+        /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react31.default.createElement(
           "div",
           {
-            className: (0, import_classnames14.default)(
+            className: (0, import_classnames16.default)(
               `${className}__match`,
               `${className}__content-panel`,
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react28.default.createElement(
+          /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react31.default.createElement(
             MatchForm,
             {
               classNamePrefix: className,
               bankTransaction,
               selectedMatchId,
-              setSelectedMatchId
+              setSelectedMatchId: (id) => {
+                setMatchFormError(void 0);
+                setSelectedMatchId(id);
+              },
+              matchFormError
             }
           ))
-        ), /* @__PURE__ */ import_react28.default.createElement(
+        ), /* @__PURE__ */ import_react31.default.createElement(
           "div",
           {
-            className: (0, import_classnames14.default)(
+            className: (0, import_classnames16.default)(
               `${className}__splits`,
               `${className}__content-panel`,
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react28.default.createElement(
+          /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react31.default.createElement(
             "div",
             {
               className: `${className}__table-cell--split-entry`,
               key: `split-${index}`
             },
-            /* @__PURE__ */ import_react28.default.createElement(
+            /* @__PURE__ */ import_react31.default.createElement(
               Input,
               {
                 type: "text",
@@ -2440,66 +2831,81 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
                 errorMessage: "Negative values are not allowed"
               }
             ),
-            /* @__PURE__ */ import_react28.default.createElement(
-              CategoryMenu,
+            /* @__PURE__ */ import_react31.default.createElement(
+              "div",
               {
-                bankTransaction,
-                name: `category-${index}${asListItem ? "-li" : ""}`,
-                value: split.category,
-                onChange: (value) => changeCategory(index, value),
-                className: "Layer__category-menu--full"
-              }
-            ),
-            index > 0 && /* @__PURE__ */ import_react28.default.createElement(
-              Button,
-              {
-                onClick: () => removeSplit(index),
-                rightIcon: /* @__PURE__ */ import_react28.default.createElement(Link_default, { size: 14 }),
-                variant: "secondary" /* secondary */
+                className: `${className}__table-cell--split-entry__right-col`
               },
-              "Merge"
+              /* @__PURE__ */ import_react31.default.createElement(
+                CategoryMenu,
+                {
+                  bankTransaction,
+                  name: `category-${index}${asListItem ? "-li" : ""}`,
+                  value: split.category,
+                  onChange: (value) => changeCategory(index, value),
+                  className: "Layer__category-menu--full"
+                }
+              ),
+              index > 0 && /* @__PURE__ */ import_react31.default.createElement(
+                Button,
+                {
+                  className: `${className}__table-cell--split-entry__merge-btn`,
+                  onClick: () => removeSplit(index),
+                  rightIcon: /* @__PURE__ */ import_react31.default.createElement(Trash_default, { size: 18 }),
+                  variant: "secondary" /* secondary */,
+                  iconOnly: true
+                }
+              )
             )
-          ))), /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ import_react28.default.createElement(
+          ))), splitFormError && /* @__PURE__ */ import_react31.default.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ import_react31.default.createElement(
+            Input,
+            {
+              disabled: true,
+              leftText: "Total",
+              value: `$${centsToDollars(
+                rowState.splits.reduce(
+                  (x, { amount }) => x + amount,
+                  0
+                )
+              )}`
+            }
+          ), /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ import_react31.default.createElement(
             TextButton,
             {
               onClick: addSplit,
               disabled: rowState.splits.length > 5
             },
             "Add new split"
-          ) : /* @__PURE__ */ import_react28.default.createElement(
+          ) : /* @__PURE__ */ import_react31.default.createElement(
             Button,
             {
               onClick: addSplit,
-              rightIcon: /* @__PURE__ */ import_react28.default.createElement(Scissors_default, { size: 14 }),
+              rightIcon: /* @__PURE__ */ import_react31.default.createElement(ScissorsFullOpen_default, { size: 14 }),
               variant: "secondary" /* secondary */,
               disabled: rowState.splits.length > 5
             },
             "Split"
-          )), rowState.splits.length > 1 && /* @__PURE__ */ import_react28.default.createElement(
-            Text,
-            {
-              size: "sm" /* sm */,
-              className: `${className}__splits-total`
-            },
-            "Total: $",
-            centsToDollars(
-              rowState.splits.reduce(
-                (x, { amount }) => x + amount,
-                0
-              )
-            )
-          ))
+          ))))
         )),
-        /* @__PURE__ */ import_react28.default.createElement(
+        /* @__PURE__ */ import_react31.default.createElement(
           InputGroup,
           {
             className: `${className}__description`,
             name: "description"
           },
-          /* @__PURE__ */ import_react28.default.createElement(Textarea, { name: "description", placeholder: "Add description" })
+          /* @__PURE__ */ import_react31.default.createElement(Textarea, { name: "description", placeholder: "Add description" })
         ),
-        /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react28.default.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem ? /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ import_react28.default.createElement(
+        /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react31.default.createElement(FileInput, { text: "Upload receipt" })),
+        asListItem ? /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ import_react31.default.createElement(
+          Text,
+          {
+            as: "span",
+            size: "md" /* md */,
+            className: "Layer__unsaved-info"
+          },
+          /* @__PURE__ */ import_react31.default.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ import_react31.default.createElement(AlertCircle_default, { size: 12 })
+        ) : null, /* @__PURE__ */ import_react31.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2509,18 +2915,24 @@ var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
             },
             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__ */ import_react31.default.createElement(
+        APIErrorNotifications,
+        {
+          bankTransaction,
+          containerWidth
+        }
       ))
     );
   }
 );
 
 // src/components/BankTransactionRow/SplitTooltipDetails.tsx
-var import_react29 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var SplitTooltipDetails = ({
   classNamePrefix,
   category
@@ -2528,11 +2940,11 @@ var SplitTooltipDetails = ({
   if (!category.entries) {
     return;
   }
-  return /* @__PURE__ */ import_react29.default.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ import_react29.default.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ import_react29.default.createElement("li", { key: idx }, /* @__PURE__ */ import_react29.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ import_react29.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
+  return /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ import_react32.default.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ import_react32.default.createElement("li", { key: idx }, /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_classnames15 = __toESM(require("classnames"));
+var import_classnames17 = __toESM(require("classnames"));
 var import_date_fns7 = require("date-fns");
 var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var extractDescriptionForSplit = (category) => {
@@ -2544,23 +2956,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 = (0, import_react30.useRef)(null);
-  const [removed, setRemoved] = (0, import_react30.useState)(false);
+  const expandedRowRef = (0, import_react33.useRef)(null);
+  const [showRetry, setShowRetry] = (0, import_react33.useState)(false);
+  const [removed, setRemoved] = (0, import_react33.useState)(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react30.useState)(
+  const [selectedCategory, setSelectedCategory] = (0, import_react33.useState)(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = (0, import_react30.useState)(false);
-  const toggleOpen = () => setOpen(!open);
-  const save = () => {
+  const [open, setOpen] = (0, import_react33.useState)(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] = (0, import_react33.useState)(false);
+  (0, import_react33.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, index * 80);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  (0, import_react33.useEffect)(() => {
+    if (bankTransaction.error) {
+      setShowRetry(true);
+    }
+  }, [bankTransaction.error]);
+  const save = async () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      setOpen(false);
       return;
     }
     if (!selectedCategory) {
@@ -2583,80 +3025,107 @@ var BankTransactionRow = ({
   }
   const className = "Layer__bank-transaction-row";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames15.default)(
+  const rowClassName = (0, import_classnames17.default)(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    open ? openClassName : ""
+    open ? openClassName : "",
+    showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
     "tr",
     {
       className: rowClassName,
       onTransitionEnd: ({ propertyName }) => {
         if (propertyName === "top") {
           setRemoved(true);
+          removeTransaction(bankTransaction.id);
         }
       }
     },
-    /* @__PURE__ */ import_react30.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns7.format)((0, import_date_fns7.parseISO)(bankTransaction.date), dateFormat))),
-    /* @__PURE__ */ import_react30.default.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__tx-col" }, /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react30.default.createElement(
-      Text,
+    /* @__PURE__ */ import_react33.default.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__ */ import_react30.default.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__account-col" }, /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react30.default.createElement(
-      Text,
+      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns7.format)((0, import_date_fns7.parseISO)(bankTransaction.date), dateFormat))
+    ),
+    /* @__PURE__ */ import_react33.default.createElement(
+      "td",
       {
-        as: "span",
-        className: "Layer__bank-transactions__account-text",
-        withTooltip: "whenTruncated" /* whenTruncated */
+        className: "Layer__table-cell Layer__bank-transactions__tx-col",
+        ...openRow
+      },
+      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react33.default.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__ */ import_react33.default.createElement(
+      "td",
+      {
+        className: "Layer__table-cell Layer__bank-transactions__account-col",
+        ...openRow
       },
-      bankTransaction.account_name ?? ""
-    ))),
-    /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react33.default.createElement(
+        Text,
+        {
+          as: "span",
+          className: "Layer__bank-transactions__account-text",
+          withTooltip: "whenTruncated" /* whenTruncated */
+        },
+        bankTransaction.account_name ?? ""
+      ))
+    ),
+    /* @__PURE__ */ import_react33.default.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__ */ import_react30.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
     ),
-    /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(
       "td",
       {
-        className: (0, import_classnames15.default)(
+        className: (0, import_classnames17.default)(
           "Layer__table-cell",
           "Layer__table-cell__category-col",
           `${className}__actions-cell`,
           `${className}__actions-cell--${open ? "open" : "close"}`
         )
       },
-      /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(
         "span",
         {
           className: `${className}__actions-container Layer__table-cell-content`
         },
-        editable && !open ? /* @__PURE__ */ import_react30.default.createElement(
+        editable && !open ? /* @__PURE__ */ import_react33.default.createElement(
           CategorySelect,
           {
             bankTransaction,
             name: `category-${bankTransaction.id}`,
             value: selectedCategory,
-            onChange: setSelectedCategory,
+            onChange: (category) => {
+              setSelectedCategory(category);
+              setShowRetry(false);
+            },
             disabled: bankTransaction.processing
           }
         ) : null,
-        !editable && !open ? /* @__PURE__ */ import_react30.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+        !editable && !open ? /* @__PURE__ */ import_react33.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
           Badge,
           {
-            icon: /* @__PURE__ */ import_react30.default.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ import_react30.default.createElement(
+            icon: /* @__PURE__ */ import_react33.default.createElement(Scissors_default, { size: 11 }),
+            tooltip: /* @__PURE__ */ import_react33.default.createElement(
               SplitTooltipDetails,
               {
                 classNamePrefix: className,
@@ -2665,18 +3134,42 @@ var BankTransactionRow = ({
             )
           },
           "Split"
-        ), /* @__PURE__ */ import_react30.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
+        ), /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
           MatchBadge,
           {
             classNamePrefix: className,
             bankTransaction,
             dateFormat
           }
-        ), /* @__PURE__ */ import_react30.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns7.format)(
+        ), /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns7.format)(
           (0, import_date_fns7.parseISO)(bankTransaction.match.bank_transaction.date),
           dateFormat
-        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react30.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        editable || open ? /* @__PURE__ */ import_react30.default.createElement(
+        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+        editable && !open && showRetry ? /* @__PURE__ */ import_react33.default.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__ */ import_react33.default.createElement(
+          Text,
+          {
+            as: "span",
+            size: "md" /* md */,
+            className: "Layer__unsaved-info"
+          },
+          /* @__PURE__ */ import_react33.default.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ import_react33.default.createElement(AlertCircle_default, { size: 12 })
+        ) : null,
+        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ import_react33.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2686,39 +3179,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__ */ import_react30.default.createElement(
+        /* @__PURE__ */ import_react33.default.createElement(
           IconButton,
           {
             onClick: toggleOpen,
             className: "Layer__bank-transaction-row__expand-button",
             active: open,
-            icon: open ? /* @__PURE__ */ import_react30.default.createElement(X_default, null) : /* @__PURE__ */ import_react30.default.createElement(ChevronDown_default, { className: "Layer__chevron Layer__chevron__down" })
+            icon: /* @__PURE__ */ import_react33.default.createElement(
+              ChevronDownFill_default,
+              {
+                className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+              }
+            )
           }
         )
       )
     )
-  ), /* @__PURE__ */ import_react30.default.createElement("tr", null, /* @__PURE__ */ import_react30.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react30.default.createElement(
+  ), /* @__PURE__ */ import_react33.default.createElement("tr", null, /* @__PURE__ */ import_react33.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react33.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
-      isOpen: open
+      isOpen: open,
+      containerWidth,
+      editable
     }
   ))));
 };
 
 // src/components/BankTransactionListItem/Assignment.tsx
-var import_react31 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var import_date_fns8 = require("date-fns");
 var Assignment = ({ bankTransaction }) => {
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
       MatchBadge,
       {
         classNamePrefix: "Layer__bank-transaction-list-item",
@@ -2726,17 +3225,17 @@ var Assignment = ({ bankTransaction }) => {
         dateFormat: DATE_FORMAT,
         text: "Matched"
       }
-    ), /* @__PURE__ */ import_react31.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${(0, import_date_fns8.format)(
+    ), /* @__PURE__ */ import_react34.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${(0, import_date_fns8.format)(
       (0, import_date_fns8.parseISO)(bankTransaction.match.bank_transaction.date),
       DATE_FORMAT
     )}, ${bankTransaction.match.bank_transaction.description}`));
   }
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
-    return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ import_react31.default.createElement(Scissors_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ import_react31.default.createElement(
+        icon: /* @__PURE__ */ import_react34.default.createElement(Scissors_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ import_react34.default.createElement(
           SplitTooltipDetails,
           {
             classNamePrefix: "Layer__bank-transaction-list-item",
@@ -2745,32 +3244,49 @@ var Assignment = ({ bankTransaction }) => {
         )
       },
       "Split"
-    ), /* @__PURE__ */ import_react31.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
+    ), /* @__PURE__ */ import_react34.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
   }
-  return /* @__PURE__ */ import_react31.default.createElement(Text, null, bankTransaction?.category?.display_name);
+  return /* @__PURE__ */ import_react34.default.createElement(Text, null, bankTransaction?.category?.display_name);
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_classnames16 = __toESM(require("classnames"));
+var import_classnames18 = __toESM(require("classnames"));
 var import_date_fns9 = require("date-fns");
 var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
 var BankTransactionListItem = ({
+  index = 0,
   dateFormat,
   bankTransaction,
-  editable
+  editable,
+  containerWidth
 }) => {
-  const expandedRowRef = (0, import_react32.useRef)(null);
-  const [removed, setRemoved] = (0, import_react32.useState)(false);
+  const expandedRowRef = (0, import_react35.useRef)(null);
+  const [showRetry, setShowRetry] = (0, import_react35.useState)(false);
+  const [removed, setRemoved] = (0, import_react35.useState)(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react32.useState)(
+  const [selectedCategory, setSelectedCategory] = (0, import_react35.useState)(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const toggleOpen = () => setOpen(!open);
+  const [open, setOpen] = (0, import_react35.useState)(false);
+  const toggleOpen = () => {
+    setShowRetry(false);
+    setOpen(!open);
+  };
+  const [showComponent, setShowComponent] = (0, import_react35.useState)(false);
+  (0, import_react35.useEffect)(() => {
+    const timeoutId = setTimeout(() => {
+      setShowComponent(true);
+    }, index * 80);
+    return () => clearTimeout(timeoutId);
+  }, []);
+  (0, import_react35.useEffect)(() => {
+    if (bankTransaction.error) {
+      setShowRetry(true);
+    }
+  }, [bankTransaction.error]);
   const save = () => {
     if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      setOpen(false);
       return;
     }
     if (!selectedCategory) {
@@ -2793,50 +3309,55 @@ var BankTransactionListItem = ({
   }
   const className = "Layer__bank-transaction-list-item";
   const openClassName = open ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames16.default)(
+  const rowClassName = (0, import_classnames18.default)(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    open ? openClassName : ""
+    open ? openClassName : "",
+    showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ import_react32.default.createElement("li", { className: rowClassName }, /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__heading-date` }, (0, import_date_fns9.format)((0, import_date_fns9.parseISO)(bankTransaction.date), dateFormat)), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__body__name` }, bankTransaction.counterparty_name), /* @__PURE__ */ import_react32.default.createElement(
-    "span",
-    {
-      className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
-    },
-    isCredit2(bankTransaction) ? "+$" : " $",
-    centsToDollars(bankTransaction.amount)
-  ), /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react35.default.createElement("li", { className: rowClassName }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ import_react35.default.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-date` }, (0, import_date_fns9.format)((0, import_date_fns9.parseISO)(bankTransaction.date), dateFormat)), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ import_react35.default.createElement(
     "div",
     {
       onClick: toggleOpen,
       className: "Layer__bank-transaction-row__expand-button"
     },
-    /* @__PURE__ */ import_react32.default.createElement(
-      ChevronDown_default,
+    /* @__PURE__ */ import_react35.default.createElement(
+      ChevronDownFill_default,
       {
         className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
       }
     )
-  )), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react32.default.createElement(
+  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ import_react35.default.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ import_react35.default.createElement(
+    "span",
+    {
+      className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
+    },
+    isCredit2(bankTransaction) ? "+$" : " $",
+    centsToDollars(bankTransaction.amount)
+  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react35.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
-      close: toggleOpen,
       isOpen: open,
+      editable,
       asListItem: true,
-      submitBtnText: editable ? "Approve" : "Save"
+      submitBtnText: editable ? "Approve" : "Update",
+      containerWidth
     }
-  )), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react32.default.createElement(
+  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react35.default.createElement(
     CategorySelect,
     {
       bankTransaction,
       name: `category-${bankTransaction.id}`,
       value: selectedCategory,
-      onChange: setSelectedCategory,
+      onChange: (category) => {
+        setShowRetry(false);
+        setSelectedCategory(category);
+      },
       disabled: bankTransaction.processing
     }
-  ) : null, !editable ? /* @__PURE__ */ import_react32.default.createElement(Assignment, { bankTransaction }) : null, editable && /* @__PURE__ */ import_react32.default.createElement(
+  ) : null, !editable ? /* @__PURE__ */ import_react35.default.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ import_react35.default.createElement(
     SubmitButton,
     {
       onClick: () => {
@@ -2846,14 +3367,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__ */ import_react35.default.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__ */ import_react35.default.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
 };
 
 // src/components/Container/Container.tsx
-var import_react33 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/config/theme.ts
 var SHADES = {
@@ -3081,10 +3615,10 @@ var hslToHex = (hsl) => {
 };
 
 // src/components/Container/Container.tsx
-var import_classnames17 = __toESM(require("classnames"));
-var Container = (0, import_react33.forwardRef)(
+var import_classnames19 = __toESM(require("classnames"));
+var Container = (0, import_react36.forwardRef)(
   ({ name, className, children, asWidget }, ref) => {
-    const baseClassName = (0, import_classnames17.default)(
+    const baseClassName = (0, import_classnames19.default)(
       "Layer__component Layer__component-container",
       `Layer__${name}`,
       asWidget ? "Layer__component--as-widget" : "",
@@ -3092,114 +3626,28 @@ var Container = (0, import_react33.forwardRef)(
     );
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    return /* @__PURE__ */ import_react33.default.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
+    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
   }
 );
 
 // src/components/Container/Header.tsx
-var import_react34 = __toESM(require("react"));
-var import_classnames18 = __toESM(require("classnames"));
-var Header = (0, import_react34.forwardRef)(
+var import_react37 = __toESM(require("react"));
+var import_classnames20 = __toESM(require("classnames"));
+var Header = (0, import_react37.forwardRef)(
   ({ className, children, style }, ref) => {
-    const baseClassName = (0, import_classnames18.default)("Layer__component-header", className);
-    return /* @__PURE__ */ import_react34.default.createElement("header", { ref, className: baseClassName, style }, children);
+    const baseClassName = (0, import_classnames20.default)("Layer__component-header", className);
+    return /* @__PURE__ */ import_react37.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
 // src/components/DataState/DataState.tsx
-var import_react35 = __toESM(require("react"));
-
-// src/icons/AlertOctagon.tsx
-var React43 = __toESM(require("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
-var React44 = __toESM(require("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
+var import_react38 = __toESM(require("react"));
 var getIcon = (status) => {
   switch (status) {
     case "failed" /* failed */:
-      return /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react35.default.createElement(AlertOctagon_default, { size: 12 }));
+      return /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react38.default.createElement(AlertOctagon_default, { size: 12 }));
     default:
-      return /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react35.default.createElement(CheckCircle_default, { size: 12 }));
+      return /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react38.default.createElement(CheckCircle_default, { size: 12 }));
   }
 };
 var DataState = ({
@@ -3209,7 +3657,7 @@ var DataState = ({
   onRefresh,
   isLoading
 }) => {
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react38.default.createElement(
     Text,
     {
       as: "span",
@@ -3218,11 +3666,11 @@ var DataState = ({
       className: "Layer__data-state__title"
     },
     title
-  ), /* @__PURE__ */ import_react35.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react38.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react38.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: isLoading ? /* @__PURE__ */ import_react35.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react35.default.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: isLoading ? /* @__PURE__ */ import_react38.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react38.default.createElement(RefreshCcw_default, { size: 12 }),
       onClick: onRefresh,
       disabled: isLoading
     },
@@ -3231,24 +3679,16 @@ var DataState = ({
 };
 
 // src/components/Loader/Loader.tsx
-var import_react36 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react36.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react39.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/Pagination/Pagination.tsx
-var import_react38 = __toESM(require("react"));
-
-// src/hooks/usePagination/usePagination.ts
-var import_react37 = require("react");
-
-// src/utils/helpers.ts
-var range = (start, end) => {
-  let length = end - start + 1;
-  return Array.from({ length }, (_, idx) => idx + start);
-};
+var import_react41 = __toESM(require("react"));
 
 // src/hooks/usePagination/usePagination.ts
+var import_react40 = require("react");
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -3256,7 +3696,7 @@ var usePagination = ({
   siblingCount = 1,
   currentPage
 }) => {
-  const paginationRange = (0, import_react37.useMemo)(() => {
+  const paginationRange = (0, import_react40.useMemo)(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPageCount) {
@@ -3293,8 +3733,8 @@ var usePagination = ({
 };
 
 // src/icons/ChevronLeft.tsx
-var React47 = __toESM(require("react"));
-var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createElement(
+var React51 = __toESM(require("react"));
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React51.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3304,7 +3744,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",
@@ -3317,8 +3757,8 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createEle
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-var React48 = __toESM(require("react"));
-var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React48.createElement(
+var React52 = __toESM(require("react"));
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3328,7 +3768,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",
@@ -3341,7 +3781,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React48.createEl
 var ChevronRight_default = ChavronRight;
 
 // src/components/Pagination/Pagination.tsx
-var import_classnames19 = __toESM(require("classnames"));
+var import_classnames21 = __toESM(require("classnames"));
 var Pagination = ({
   onPageChange,
   totalCount,
@@ -3362,10 +3802,11 @@ var Pagination = ({
     return;
   }
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ import_react38.default.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ import_react41.default.createElement(
     "li",
     {
-      className: (0, import_classnames19.default)(
+      key: `page-prev`,
+      className: (0, import_classnames21.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
         {
           disabled: currentPage === 1
@@ -3373,15 +3814,16 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage - 1)
     },
-    /* @__PURE__ */ import_react38.default.createElement(ChevronLeft_default, { size: 12 })
+    /* @__PURE__ */ import_react41.default.createElement(ChevronLeft_default, { size: 12 })
   ), paginationRange.map((pageNumber) => {
     if (pageNumber === DOTS) {
-      return /* @__PURE__ */ import_react38.default.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
+      return /* @__PURE__ */ import_react41.default.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
     }
-    return /* @__PURE__ */ import_react38.default.createElement(
+    return /* @__PURE__ */ import_react41.default.createElement(
       "li",
       {
-        className: (0, import_classnames19.default)("Layer__pagination-item", {
+        key: `page-${pageNumber}`,
+        className: (0, import_classnames21.default)("Layer__pagination-item", {
           selected: pageNumber === currentPage
         }),
         onClick: () => {
@@ -3392,10 +3834,11 @@ var Pagination = ({
       },
       pageNumber
     );
-  }), /* @__PURE__ */ import_react38.default.createElement(
+  }), /* @__PURE__ */ import_react41.default.createElement(
     "li",
     {
-      className: (0, import_classnames19.default)(
+      key: `page-last`,
+      className: (0, import_classnames21.default)(
         "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
         {
           disabled: currentPage === lastPage
@@ -3403,7 +3846,7 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage + 1)
     },
-    /* @__PURE__ */ import_react38.default.createElement(ChevronRight_default, { size: 12 })
+    /* @__PURE__ */ import_react41.default.createElement(ChevronRight_default, { size: 12 })
   ));
 };
 
@@ -3419,7 +3862,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
   );
@@ -3430,92 +3873,229 @@ var BankTransactions = ({
   asWidget = false,
   pageSize = 15
 }) => {
-  const [display, setDisplay] = (0, import_react39.useState)("review" /* review */);
-  const [currentPage, setCurrentPage] = (0, import_react39.useState)(1);
+  const [display, setDisplay] = (0, import_react42.useState)("review" /* review */);
+  const [currentPage, setCurrentPage] = (0, import_react42.useState)(1);
+  const [removedTxs, setRemovedTxs] = (0, import_react42.useState)([]);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
-  const bankTransactionsByFilter = data?.filter(filterVisibility(display));
-  const bankTransactions = (0, import_react39.useMemo)(() => {
+  const bankTransactionsByFilter = data?.filter(
+    (tx) => !removedTxs.includes(tx.id) && filterVisibility(display, tx)
+  );
+  const bankTransactions = (0, import_react42.useMemo)(() => {
     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] = (0, import_react39.useState)(0);
-  const [listView, setListView] = (0, import_react39.useState)(false);
+  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react42.useState)(0);
+  const debounceShiftStickyHeader = debounce(setShiftStickyHeader, 500);
+  const [listView, setListView] = (0, import_react42.useState)(false);
+  const [containerWidth, setContainerWidth] = (0, import_react42.useState)(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__ */ import_react39.default.createElement(Container, { name: COMPONENT_NAME, asWidget, ref: containerRef }, /* @__PURE__ */ import_react39.default.createElement(
-    Header,
+  return /* @__PURE__ */ import_react42.default.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__ */ import_react39.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-    /* @__PURE__ */ import_react39.default.createElement(
-      Toggle,
+    /* @__PURE__ */ import_react42.default.createElement(
+      Header,
+      {
+        className: "Layer__bank-transactions__header",
+        style: { top: shiftStickyHeader }
+      },
+      /* @__PURE__ */ import_react42.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      /* @__PURE__ */ import_react42.default.createElement(
+        Toggle,
+        {
+          name: "bank-transaction-display",
+          options: [
+            { label: "To Review", value: "review" /* review */ },
+            { label: "Categorized", value: "categorized" /* categorized */ }
+          ],
+          selected: display,
+          onChange: onCategorizationDisplayChange
+        }
+      )
+    ),
+    !listView && /* @__PURE__ */ import_react42.default.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__ */ import_react42.default.createElement("thead", null, /* @__PURE__ */ import_react42.default.createElement("tr", null, /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+      /* @__PURE__ */ import_react42.default.createElement("tbody", null, !isLoading && bankTransactions?.map(
+        (bankTransaction, index) => /* @__PURE__ */ import_react42.default.createElement(
+          BankTransactionRow,
+          {
+            index,
+            key: bankTransaction.id,
+            dateFormat: DATE_FORMAT,
+            bankTransaction,
+            editable,
+            removeTransaction,
+            containerWidth
+          }
+        )
+      ))
+    ),
+    isLoading && !bankTransactions ? /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react42.default.createElement(Loader2, null)) : null,
+    !isLoading && listView ? /* @__PURE__ */ import_react42.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
+      (bankTransaction, index) => /* @__PURE__ */ import_react42.default.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__ */ import_react42.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react42.default.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__ */ import_react39.default.createElement(
-    "table",
-    {
-      width: "100%",
-      className: "Layer__table Layer__bank-transactions__table with-cell-separators"
-    },
-    /* @__PURE__ */ import_react39.default.createElement("thead", null, /* @__PURE__ */ import_react39.default.createElement("tr", null, /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react39.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-    /* @__PURE__ */ import_react39.default.createElement("tbody", null, !isLoading && bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react39.default.createElement(
-      BankTransactionRow,
+    )) : null,
+    !isLoading && error ? /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react42.default.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__ */ import_react39.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react39.default.createElement(Loader2, null)) : null, !isLoading && listView ? /* @__PURE__ */ import_react39.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react39.default.createElement(
-    BankTransactionListItem,
-    {
-      key: bankTransaction.id,
-      dateFormat: DATE_FORMAT,
-      bankTransaction,
-      editable
-    }
-  ))) : null, !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react39.default.createElement(
-    DataState,
+    )) : null,
+    /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ import_react42.default.createElement(
+      Pagination,
+      {
+        currentPage,
+        totalCount: bankTransactionsByFilter?.length || 0,
+        pageSize,
+        onPageChange: (page) => setCurrentPage(page)
+      }
+    ))
+  );
+};
+
+// src/components/Hello/Hello.tsx
+var import_react43 = __toESM(require("react"));
+var import_swr3 = __toESM(require("swr"));
+var fetcher = (url) => fetch(url).then((res) => res.json());
+var Hello = ({ user }) => {
+  const { data, isLoading } = (0, import_swr3.default)(
+    `https://api.github.com/users/${user || "jyurek"}`,
+    fetcher
+  );
+  const name = (isLoading ? "..." : data?.name) || "User";
+  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+};
+
+// src/components/LinkedAccounts/LinkedAccounts.tsx
+var import_react46 = __toESM(require("react"));
+
+// src/hooks/useLinkedAccounts/useLinkedAccounts.ts
+var import_react44 = require("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] = (0, import_react44.useState)(true);
+  (0, import_react44.useEffect)(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 2e3);
+  }, []);
+  const responseData = { data: MOCK_DATA, meta: {}, error: void 0 };
+  const isValidating = false;
+  const {
+    data = void 0,
+    meta: metadata = {},
+    error = void 0
+  } = responseData || {};
+  const refetch = () => {
+    console.log("refetch...");
+  };
+  return {
+    data,
+    metadata,
+    isLoading,
+    isValidating,
+    error,
+    refetch
+  };
+};
+
+// src/components/LinkedAccounts/LinkedAccountThumb.tsx
+var import_react45 = __toESM(require("react"));
+var LinkedAccountThumb = ({ account }) => {
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ import_react45.default.createElement("div", { className: "bottombar" }, /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-amount" }, "$", centsToDollars(account.amount))));
+};
+
+// src/components/LinkedAccounts/LinkedAccounts.tsx
+var COMPONENT_NAME2 = "linked-accounts";
+var LinkedAccounts = () => {
+  const { data, isLoading, error, isValidating, refetch } = useLinkedAccounts();
+  return /* @__PURE__ */ import_react46.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react46.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react46.default.createElement(
+    Heading,
     {
-      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__ */ import_react39.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react39.default.createElement(
+      className: "Layer__linked-accounts__title",
+      size: "secondary" /* secondary */
+    },
+    "Linked Accounts"
+  )), isLoading && /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react46.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react46.default.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -3524,35 +4104,70 @@ var BankTransactions = ({
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  )) : null, /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ import_react39.default.createElement(
-    Pagination,
-    {
-      currentPage,
-      totalCount: bankTransactionsByFilter?.length || 0,
-      pageSize,
-      onPageChange: (page) => setCurrentPage(page)
+  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react46.default.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
+};
+
+// src/components/ProfitAndLoss/ProfitAndLoss.tsx
+var import_react55 = __toESM(require("react"));
+
+// src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
+var import_react47 = require("react");
+
+// src/utils/profitAndLossUtils.ts
+var doesLineItemQualifies = (item) => {
+  return !(item.is_contra || item.value === void 0 || item.value === null || isNaN(item.value) || item.value === -Infinity || item.value === Infinity || item.value < 0);
+};
+var collectSubItems = (type, item) => {
+  if (!item) {
+    return [];
+  }
+  const items = [];
+  item?.line_items?.forEach((item2) => {
+    if (doesLineItemQualifies(item2)) {
+      items.push({
+        name: item2.name,
+        display_name: item2.display_name,
+        value: 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";
+  }
 };
-
-// src/components/Hello/Hello.tsx
-var import_react40 = __toESM(require("react"));
-var import_swr3 = __toESM(require("swr"));
-var fetcher = (url) => fetch(url).then((res) => res.json());
-var Hello = ({ user }) => {
-  const { data, isLoading } = (0, import_swr3.default)(
-    `https://api.github.com/users/${user || "jyurek"}`,
-    fetcher
-  );
-  const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, /* @__PURE__ */ import_react40.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+var applyShare = (items, total) => {
+  return items.map((item) => {
+    if (total === 0) {
+      return item;
+    }
+    return {
+      ...item,
+      share: item.value / total
+    };
+  });
 };
 
-// src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react49 = __toESM(require("react"));
-
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react41 = require("react");
 var import_date_fns10 = require("date-fns");
 var import_swr4 = __toESM(require("swr"));
 var useProfitAndLoss = ({
@@ -3565,12 +4180,17 @@ var useProfitAndLoss = ({
   endDate: (0, import_date_fns10.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react41.useState)(
+  const [startDate, setStartDate] = (0, import_react47.useState)(
     initialStartDate || (0, import_date_fns10.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react41.useState)(
+  const [endDate, setEndDate] = (0, import_react47.useState)(
     initialEndDate || (0, import_date_fns10.endOfMonth)(Date.now())
   );
+  const [filters, setFilters] = (0, import_react47.useState)({
+    expenses: void 0,
+    revenue: void 0
+  });
+  const [sidebarScope, setSidebarScope] = (0, import_react47.useState)("expenses");
   const {
     data: rawData,
     isLoading,
@@ -3593,6 +4213,43 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
+  const { filteredData, filteredTotal } = (0, import_react47.useMemo)(() => {
+    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
@@ -3603,25 +4260,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
-var import_react43 = __toESM(require("react"));
+var import_react49 = __toESM(require("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
-var import_react42 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -3636,11 +4351,11 @@ var Indicator = ({
   const boxWidth = width * 2 + 4;
   const multiplier = 1.5;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
@@ -3650,9 +4365,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)"
       }
     }
   );
@@ -3665,7 +4380,7 @@ var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
-  const { changeDateRange, dateRange } = (0, import_react43.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react49.useContext)(ProfitAndLoss.Context);
   const thisMonth = (0, import_date_fns11.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
@@ -3765,13 +4480,13 @@ var ProfitAndLossChart = () => {
     label
   }) => {
     if (active && payload && payload.length) {
-      return /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react43.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react43.default.createElement("li", null, /* @__PURE__ */ import_react43.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react43.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react43.default.createElement("li", null, /* @__PURE__ */ import_react43.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react43.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0))))));
+      return /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react49.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react49.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react49.default.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__ */ import_react43.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement(
       import_recharts.Rectangle,
       {
         fill: getColor(100)?.hex ?? "#F5F4F3",
@@ -3785,7 +4500,7 @@ var ProfitAndLossChart = () => {
       }
     );
   };
-  const data = (0, import_react43.useMemo)(
+  const data = (0, import_react49.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -3793,8 +4508,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react43.useState)(-1);
-  return /* @__PURE__ */ import_react43.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react49.useState)(-1);
+  return /* @__PURE__ */ import_react49.default.createElement(
     import_recharts.ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -3802,7 +4517,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ import_react43.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       import_recharts.BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -3811,15 +4526,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ import_react43.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         import_recharts.Tooltip,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ import_react43.default.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ import_react43.default.createElement(CustomizedCursor, null)
+          content: /* @__PURE__ */ import_react49.default.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ import_react49.default.createElement(CustomizedCursor, null),
+          animationDuration: 100,
+          animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ import_react43.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         import_recharts.CartesianGrid,
         {
           vertical: false,
@@ -3827,7 +4544,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ import_react43.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         import_recharts.Legend,
         {
           verticalAlign: "top",
@@ -3847,8 +4564,8 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ import_react43.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ import_react43.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ import_react49.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "revenue",
@@ -3857,10 +4574,10 @@ var ProfitAndLossChart = () => {
           radius: [barSize / 4, barSize / 4, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ import_react43.default.createElement(
+        /* @__PURE__ */ import_react49.default.createElement(
           import_recharts.LabelList,
           {
-            content: /* @__PURE__ */ import_react43.default.createElement(
+            content: /* @__PURE__ */ import_react49.default.createElement(
               Indicator,
               {
                 animateFrom,
@@ -3869,7 +4586,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ import_react43.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react49.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -3877,7 +4594,7 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ import_react43.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "expenses",
@@ -3886,7 +4603,7 @@ var ProfitAndLossChart = () => {
           radius: [barSize / 4, barSize / 4, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ import_react43.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react49.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -3899,10 +4616,10 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react44 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_date_fns12 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react44.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react50.useContext)(ProfitAndLoss.Context);
   const date = dateRange.startDate;
   const label = (0, import_date_fns12.format)(date, "LLLL y");
   const change = (duration) => {
@@ -3914,28 +4631,28 @@ var ProfitAndLossDatePicker = () => {
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ import_react44.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react50.default.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
         size: 18
       }
     )
-  ), /* @__PURE__ */ import_react44.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react44.default.createElement(
+  ), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react50.default.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -3946,53 +4663,83 @@ var ProfitAndLossDatePicker = () => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react46 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_react45 = __toESM(require("react"));
-var import_classnames20 = __toESM(require("classnames"));
+var import_react51 = __toESM(require("react"));
+var import_classnames22 = __toESM(require("classnames"));
 var SkeletonLoader = ({
   height,
   width,
   className
 }) => {
-  const baseClassName = (0, import_classnames20.default)(
+  const baseClassName = (0, import_classnames22.default)(
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
-  return /* @__PURE__ */ import_react45.default.createElement("div", { className: baseClassName, style: { width, height } });
+  return /* @__PURE__ */ import_react51.default.createElement("div", { className: baseClassName, style: { width, height } });
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+var import_classnames23 = __toESM(require("classnames"));
 var ProfitAndLossSummaries = ({
   vertical,
   revenueLabel = "Revenue"
 }) => {
-  const { data: storedData, isLoading } = (0, import_react46.useContext)(ProfitAndLoss.Context);
+  const {
+    data: storedData,
+    isLoading,
+    setSidebarScope,
+    sidebarScope
+  } = (0, import_react52.useContext)(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__ */ import_react46.default.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__ */ import_react52.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react46.default.createElement(SkeletonLoader, null) : /* @__PURE__ */ import_react46.default.createElement(
-      "span",
+    /* @__PURE__ */ import_react52.default.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        className: (0, import_classnames23.default)(
+          "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__ */ import_react46.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react46.default.createElement(SkeletonLoader, null) : /* @__PURE__ */ import_react46.default.createElement(
-      "span",
+      /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react52.default.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+        },
+        centsToDollars(Math.abs(data?.income?.value ?? NaN))
+      )
+    ),
+    /* @__PURE__ */ import_react52.default.createElement(
+      "div",
       {
-        className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        className: (0, import_classnames23.default)(
+          "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__ */ import_react46.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react46.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react46.default.createElement(SkeletonLoader, null) : /* @__PURE__ */ import_react46.default.createElement(
+      /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"),
+      isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react52.default.createElement(
+        "span",
+        {
+          className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+        },
+        centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
+      )
+    ),
+    /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react52.default.createElement(
       "span",
       {
         className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
@@ -4003,10 +4750,10 @@ var ProfitAndLossSummaries = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react48 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react47 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var ProfitAndLossRow = ({
   variant,
   lineItem,
@@ -4019,7 +4766,7 @@ var ProfitAndLossRow = ({
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react47.useState)(true);
+  const [expanded, setExpanded] = (0, import_react53.useState)(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -4050,20 +4797,20 @@ var ProfitAndLossRow = ({
   );
   displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
   displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: labelClasses.join(" "),
       onClick: () => !lockExpanded && toggleExpanded()
     },
-    !lockExpanded && /* @__PURE__ */ import_react47.default.createElement(ChevronDown_default, { size: 16 }),
-    /* @__PURE__ */ import_react47.default.createElement(Text, null, display_name)
-  ), /* @__PURE__ */ import_react47.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react47.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react47.default.createElement(
+    !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react53.default.createElement(ChevronDownFill_default, { size: 16 }) : null,
+    /* @__PURE__ */ import_react53.default.createElement(Text, null, display_name)
+  ), /* @__PURE__ */ import_react53.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react53.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react47.default.createElement(
+    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react53.default.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -4126,26 +4873,26 @@ var empty_profit_and_loss_report_default = {
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 var ProfitAndLossTable = ({ lockExpanded }) => {
-  const { data: actualData, isLoading } = (0, import_react48.useContext)(ProfitAndLoss.Context);
+  const { data: actualData, isLoading } = (0, import_react54.useContext)(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react48.default.createElement(Loader2, null));
+    return /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react54.default.createElement(Loader2, null));
   }
-  return /* @__PURE__ */ import_react48.default.createElement(import_react48.default.Fragment, null, /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.income,
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4156,14 +4903,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4174,14 +4921,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.taxes,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4192,14 +4939,14 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  )), /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react48.default.createElement(
+  )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react48.default.createElement(
+  ), /* @__PURE__ */ import_react54.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -4211,8 +4958,10 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns13 = require("date-fns");
-var PNLContext = (0, import_react49.createContext)({
+var PNLContext = (0, import_react55.createContext)({
   data: void 0,
+  filteredData: [],
+  filteredTotal: void 0,
   isLoading: true,
   isValidating: false,
   error: void 0,
@@ -4223,11 +4972,22 @@ var PNLContext = (0, import_react49.createContext)({
   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__ */ import_react49.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+  return /* @__PURE__ */ import_react55.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -4236,17 +4996,466 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-var import_react50 = __toESM(require("react"));
-var COMPONENT_NAME2 = "profit-and-loss";
-var ProfitAndLossView = () => {
-  return /* @__PURE__ */ import_react50.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react50.default.createElement(Header, { className: `Layer__${COMPONENT_NAME2}__header` }, /* @__PURE__ */ import_react50.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit And Loss")), /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react50.default.createElement(Components, null)));
+var import_react57 = __toESM(require("react"));
+
+// src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
+var import_react56 = __toESM(require("react"));
+var import_react_select3 = __toESM(require("react-select"));
+
+// src/icons/SortArrows.tsx
+var React66 = __toESM(require("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
+var React67 = __toESM(require("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
+var import_classnames24 = __toESM(require("classnames"));
+var import_date_fns14 = require("date-fns");
+var import_recharts2 = require("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
+  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
+  const [hoveredItem, setHoveredItem] = (0, import_react56.useState)();
+  const chartData = (0, import_react56.useMemo)(() => {
+    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 (0, import_classnames24.default)(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ import_react56.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames24.default)(
+        "Layer__profit-and-loss__side-panel",
+        sidebarScope && "open"
+      )
+    },
+    /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react56.default.createElement("header", null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react56.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react56.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y"))), /* @__PURE__ */ import_react56.default.createElement(
+      Button,
+      {
+        rightIcon: /* @__PURE__ */ import_react56.default.createElement(X_default, null),
+        iconOnly: true,
+        onClick: () => setSidebarScope(void 0),
+        variant: "secondary" /* secondary */
+      }
+    )), /* @__PURE__ */ import_react56.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react56.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react56.default.createElement(import_recharts2.PieChart, null, /* @__PURE__ */ import_react56.default.createElement(
+      import_recharts2.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__ */ import_react56.default.createElement(
+          import_recharts2.Cell,
+          {
+            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__ */ import_react56.default.createElement(
+        import_recharts2.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__ */ import_react56.default.createElement(
+              import_recharts2.Text,
+              {
+                ...positioningProps,
+                className: "pie-center-label__title"
+              },
+              text
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react56.default.createElement(
+        import_recharts2.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__ */ import_react56.default.createElement(
+              import_recharts2.Text,
+              {
+                ...positioningProps,
+                className: "pie-center-label__value"
+              },
+              `$${centsToDollars(value)}`
+            );
+          }
+        }
+      ),
+      /* @__PURE__ */ import_react56.default.createElement(
+        import_recharts2.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__ */ import_react56.default.createElement(
+                import_recharts2.Text,
+                {
+                  ...positioningProps,
+                  className: "pie-center-label__share"
+                },
+                `${formatPercent(
+                  filteredData.find(
+                    (x) => x.display_name === hoveredItem
+                  )?.share
+                )}%`
+              );
+            }
+            return;
+          }
+        }
+      )
+    )))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react56.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react56.default.createElement(
+      import_react_select3.default,
+      {
+        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__ */ import_react56.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react56.default.createElement("table", null, /* @__PURE__ */ import_react56.default.createElement("thead", null, /* @__PURE__ */ import_react56.default.createElement("tr", null, /* @__PURE__ */ import_react56.default.createElement(
+      "th",
+      {
+        className: buildColClass("category"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "category")
+      },
+      "Expense/Sale ",
+      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ import_react56.default.createElement(
+      "th",
+      {
+        className: buildColClass("type"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "type")
+      },
+      "Type ",
+      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ), /* @__PURE__ */ import_react56.default.createElement("th", null), /* @__PURE__ */ import_react56.default.createElement(
+      "th",
+      {
+        className: buildColClass("value"),
+        onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+      },
+      "Value ",
+      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+    ))), /* @__PURE__ */ import_react56.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+      const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+      return /* @__PURE__ */ import_react56.default.createElement(
+        "tr",
+        {
+          key: `pl-side-table-item-${idx}`,
+          className: (0, import_classnames24.default)(
+            "Layer__profit-and-loss-detailed-table__row",
+            hoveredItem && hoveredItem !== item.display_name ? "inactive" : ""
+          ),
+          onMouseEnter: () => setHoveredItem(item.display_name),
+          onMouseLeave: () => setHoveredItem(void 0)
+        },
+        /* @__PURE__ */ import_react56.default.createElement("td", { className: "category-col" }, item.display_name),
+        /* @__PURE__ */ import_react56.default.createElement("td", { className: "type-col" }, item.type),
+        /* @__PURE__ */ import_react56.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+        /* @__PURE__ */ import_react56.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react56.default.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__ */ import_react57.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react57.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react57.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react57.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react57.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react57.default.createElement(ProfitAndLossDetailedCharts, null)));
 };
-var Components = () => {
-  const { error, isLoading, isValidating, refetch } = (0, import_react50.useContext)(
+var Components = ({
+  hideChart = false,
+  hideTable = false
+}) => {
+  const { error, isLoading, isValidating, refetch } = (0, import_react57.useContext)(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react50.default.createElement(
+    return /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react57.default.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -4257,25 +5466,25 @@ var Components = () => {
       }
     ));
   }
-  return /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, /* @__PURE__ */ import_react50.default.createElement("div", { className: `Layer__${COMPONENT_NAME2}__chart_with_summaries` }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react57.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react57.default.createElement(
     "div",
     {
-      className: `Layer__${COMPONENT_NAME2}__chart_with_summaries__summary-col`
+      className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ import_react57.default.createElement(
     "div",
     {
-      className: `Layer__${COMPONENT_NAME2}__chart_with_summaries__chart-col`
+      className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.Chart, null)
-  )), /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Table, null));
 };
 
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react51 = __toESM(require("react"));
-var import_date_fns14 = require("date-fns");
+var import_react58 = __toESM(require("react"));
+var import_date_fns15 = require("date-fns");
 var import_swr5 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
@@ -4316,7 +5525,7 @@ var LayerProvider = ({
   };
   const colors = buildColorsPalette(theme);
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react51.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react58.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -4330,7 +5539,7 @@ var LayerProvider = ({
     colors
   });
   const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr5.default)(
-    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns14.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
+    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns15.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
@@ -4339,7 +5548,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  (0, import_react51.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -4348,7 +5557,7 @@ var LayerProvider = ({
             access_token: businessAccessToken,
             token_type: "Bearer",
             expires_in: 3600,
-            expires_at: (0, import_date_fns14.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
+            expires_at: (0, import_date_fns15.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
           }
         }
       });
@@ -4358,7 +5567,7 @@ var LayerProvider = ({
         payload: {
           auth: {
             ...auth,
-            expires_at: (0, import_date_fns14.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
+            expires_at: (0, import_date_fns15.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
           }
         }
       });
@@ -4389,11 +5598,11 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ import_react51.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react51.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
+  return /* @__PURE__ */ import_react58.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react58.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-var import_react54 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_swr6 = __toESM(require("swr"));
@@ -4413,21 +5622,21 @@ var useChartOfAccounts = () => {
 };
 
 // src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
-var import_react52 = __toESM(require("react"));
-var import_react_select3 = __toESM(require("react-select"));
+var import_react59 = __toESM(require("react"));
+var import_react_select4 = __toESM(require("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 = (0, import_react52.useMemo)(
+  const accountOptions = (0, import_react59.useMemo)(
     () => flattenAccounts(data?.accounts || []).sort(
       (a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0
     ),
     [data?.accounts?.length]
   );
-  const [name, setName] = (0, import_react52.useState)("");
-  const [description, setDescription] = (0, import_react52.useState)("");
-  const [normality, setNormality] = (0, import_react52.useState)("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = (0, import_react52.useState)(
+  const [name, setName] = (0, import_react59.useState)("");
+  const [description, setDescription] = (0, import_react59.useState)("");
+  const [normality, setNormality] = (0, import_react59.useState)("DEBIT" /* DEBIT */);
+  const [parentAccount, setParentAccount] = (0, import_react59.useState)(
     data?.accounts[0]
   );
   const save = () => {
@@ -4441,22 +5650,22 @@ var ChartOfAccountsNewForm = () => {
       description
     });
   };
-  return /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react52.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react59.default.createElement(
     "input",
     {
       name: "name",
       value: name,
       onChange: (event) => setName(event.target.value)
     }
-  )), /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react52.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react52.default.createElement(
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react59.default.createElement(
     "input",
     {
       name: "description",
       value: description,
       onChange: (event) => setDescription(event.target.value)
     }
-  )), /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react52.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react52.default.createElement(
-    import_react_select3.default,
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react59.default.createElement(
+    import_react_select4.default,
     {
       isSearchable: false,
       onChange: (value) => value && setNormality(value.value),
@@ -4465,8 +5674,8 @@ var ChartOfAccountsNewForm = () => {
         { label: "Debit", value: "DEBIT" /* DEBIT */ }
       ]
     }
-  )), /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react52.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react52.default.createElement(
-    import_react_select3.default,
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react59.default.createElement(
+    import_react_select4.default,
     {
       isSearchable: true,
       value: parentAccount,
@@ -4475,49 +5684,49 @@ var ChartOfAccountsNewForm = () => {
       getOptionValue: (a) => a.id,
       options: accountOptions
     }
-  )), /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react52.default.createElement("button", { onClick: save }, "Save")));
+  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react59.default.createElement("button", { onClick: save }, "Save")));
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_react53 = __toESM(require("react"));
+var import_react60 = __toESM(require("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__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--name`
     },
     account.name
-  ), /* @__PURE__ */ import_react53.default.createElement(
+  ), /* @__PURE__ */ import_react60.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--type`
     },
     "Assets"
-  ), /* @__PURE__ */ import_react53.default.createElement(
+  ), /* @__PURE__ */ import_react60.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
     },
     "Cash"
-  ), /* @__PURE__ */ import_react53.default.createElement(
+  ), /* @__PURE__ */ import_react60.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
     },
     centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ import_react53.default.createElement(
+  ), /* @__PURE__ */ import_react60.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
     },
-    /* @__PURE__ */ import_react53.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
+  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react60.default.createElement(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -4530,15 +5739,15 @@ var ChartOfAccountsRow = ({ account, depth = 0 }) => {
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
 var ChartOfAccounts = () => {
   const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = (0, import_react54.useState)(false);
-  return /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react54.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react54.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react54.default.createElement(
+  const [showingForm, setShowingForm] = (0, import_react61.useState)(false);
+  return /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react61.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react61.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react61.default.createElement(
     "button",
     {
       className: "Layer__chart-of-accounts__edit-accounts-button",
       onClick: () => setShowingForm(!showingForm)
     },
     "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ import_react54.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react54.default.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__ */ import_react54.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react54.default.createElement(
+  ))), showingForm && /* @__PURE__ */ import_react61.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react61.default.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__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react61.default.createElement(
     ChartOfAccountsRow,
     {
       key: account.id,
@@ -4554,6 +5763,7 @@ var ChartOfAccounts = () => {
   ChartOfAccounts,
   Hello,
   LayerProvider,
+  LinkedAccounts,
   ProfitAndLoss,
   ProfitAndLossView
 });