@layerfi/components 0.1.3 → 0.1.5

package/dist/index.js

@@ -35,7 +35,8 @@ __export(src_exports, {
   ChartOfAccounts: () => ChartOfAccounts,
   Hello: () => Hello,
   LayerProvider: () => LayerProvider,
-  ProfitAndLoss: () => ProfitAndLoss
+  ProfitAndLoss: () => ProfitAndLoss,
+  ProfitAndLossView: () => ProfitAndLossView
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -290,11 +291,14 @@ var getBankTransactions = get(
     businessId,
     sortBy = "date",
     sortOrder = "DESC"
-  }) => `/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}`
+  }) => `/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}&limit=200`
 );
 var categorizeBankTransaction = put(
   ({ businessId, bankTransactionId }) => `/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/categorize`
 );
+var matchBankTransaction = put(
+  ({ businessId, bankTransactionId }) => `/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/match`
+);
 
 // src/api/layer/categories.ts
 var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/categories`);
@@ -309,13 +313,14 @@ var createAccount = post(
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = get(
-  ({ businessId, startDate, endDate }) => `/v1/businesses/${businessId}/reports/profit-and-loss?start_date=${startDate ? encodeURIComponent(startDate) : ""}&end_date=${endDate ? encodeURIComponent(endDate) : ""}`
+  ({ businessId, startDate, endDate, tagKey, tagValues, reportingBasis }) => `/v1/businesses/${businessId}/reports/profit-and-loss?start_date=${startDate ? encodeURIComponent(startDate) : ""}&end_date=${endDate ? encodeURIComponent(endDate) : ""}${reportingBasis ? `&reporting_basis=${reportingBasis}` : ""}${tagKey ? `&tag_key=${tagKey}` : ""}${tagValues ? `&tag_values=${tagValues}` : ""}`
 );
 
 // src/api/layer.ts
 var Layer = {
   authenticate,
   categorizeBankTransaction,
+  matchBankTransaction,
   createAccount,
   getBalanceSheet,
   getBankTransactions,
@@ -340,7 +345,9 @@ var LayerContext = (0, import_react.createContext)({
   categories: [],
   apiUrl: "",
   theme: void 0,
-  setTheme: () => void 0
+  colors: {},
+  setTheme: () => void 0,
+  getColor: (_shade) => void 0
 });
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -598,7 +605,10 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_react30 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
+
+// src/config/general.ts
+var DATE_FORMAT = "LLL d, yyyy";
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 var import_swr2 = __toESM(require("swr"));
@@ -651,6 +661,40 @@ var useBankTransactions = () => {
       }
     });
   };
+  const match = (id, matchId) => {
+    const foundBT = data?.find((x) => x.business_id === businessId && x.id === id);
+    if (foundBT) {
+      updateOneLocal({ ...foundBT, processing: true, error: void 0 });
+    }
+    return Layer.matchBankTransaction(apiUrl, auth.access_token, {
+      params: { businessId, bankTransactionId: id },
+      body: { match_id: matchId, type: "Confirm_Match" /* CONFIRM_MATCH */ }
+    }).then(({ data: bt, errors }) => {
+      const newBT = data?.find(
+        (x) => x.business_id === businessId && x.id === id
+      );
+      if (newBT) {
+        newBT.recently_categorized = true;
+        newBT.match = bt;
+        updateOneLocal(newBT);
+      }
+      if (errors) {
+        console.error(errors);
+        throw errors;
+      }
+    }).catch((err) => {
+      const newBT = data?.find(
+        (x) => x.business_id === businessId && x.id === id
+      );
+      if (newBT) {
+        updateOneLocal({
+          ...newBT,
+          error: err.message,
+          processing: false
+        });
+      }
+    });
+  };
   const updateOneLocal = (newBankTransaction) => {
     const updatedData = data?.map(
       (bt) => bt.id === newBankTransaction.id ? newBankTransaction : bt
@@ -668,6 +712,7 @@ var useBankTransactions = () => {
     refetch,
     error: responseError || error,
     categorize,
+    match,
     updateOneLocal
   };
 };
@@ -695,8 +740,182 @@ var useElementSize = (callback) => {
   return ref;
 };
 
+// src/types/categories.ts
+function hasSuggestions(categorization) {
+  return categorization.suggestions !== void 0;
+}
+
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_react24 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
+
+// src/components/BankTransactionRow/BankTransactionRow.tsx
+var import_react30 = __toESM(require("react"));
+
+// src/icons/Scissors.tsx
+var React8 = __toESM(require("react"));
+var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React8.createElement(
+  "svg",
+  {
+    viewBox: "0 0 11 11",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React8.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "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;M2.50519 5.21436C3.20276 4.91424 3.52494 4.10544 3.22481 3.40788C2.92468 2.71031 2.11589 2.38813 1.41833 2.68826C0.720762 2.98839 0.398577 3.79718 0.698706 4.49474C0.998836 5.19231 1.80763 5.51449 2.50519 5.21436Z;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",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React8.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "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;M1.43277 8.38576C2.13615 8.67201 2.9384 8.33386 3.22465 7.63049C3.5109 6.92711 3.17275 6.12486 2.46937 5.83861C1.766 5.55236 0.96375 5.89051 0.6775 6.59389C0.391251 7.29726 0.729398 8.09951 1.43277 8.38576Z;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",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React8.createElement(
+    "path",
+    {
+      d: "M9.16668 1.83325L3.72168 7.27825",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M9.16668 1.83325L3.72168 7.27825;M10.3129 3.58763L3.21706 6.57851;M9.16668 1.83325L3.72168 7.27825",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React8.createElement(
+    "path",
+    {
+      d: "M6.63232 6.63672L9.16691 9.16672",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M6.63232 6.63672L9.16691 9.16672;M7.06396 5.9873L10.3921 7.3096;M6.63232 6.63672L9.16691 9.16672",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  ),
+  /* @__PURE__ */ React8.createElement(
+    "path",
+    {
+      d: "M3.72168 3.72168L5.50001 5.50001",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    },
+    /* @__PURE__ */ React8.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        className: "animateOnHover",
+        values: "M3.72168 3.72168L5.50001 5.50001;M3.23828 4.45996L5.57467 5.39067;M3.72168 3.72168L5.50001 5.50001",
+        begin: "indefinite",
+        dur: "400ms",
+        repeatCount: "1",
+        fill: "freeze",
+        calcMode: "linear",
+        keyTimes: "0;0.5;1"
+      }
+    )
+  )
+);
+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"));
 
 // src/components/Button/Button.tsx
 var import_react8 = __toESM(require("react"));
@@ -708,6 +927,7 @@ var Button = ({
   leftIcon,
   rightIcon,
   iconOnly,
+  iconAsPrimary = false,
   ...props
 }) => {
   const buttonRef = (0, import_react8.useRef)(null);
@@ -723,6 +943,7 @@ var Button = ({
     "Layer__btn",
     `Layer__btn--${variant}`,
     iconOnly ? "Layer__btn--icon-only" : "",
+    iconAsPrimary && "Layer__btn--with-primary-icon",
     className
   );
   const startAnimation = () => buttonRef.current && [...buttonRef.current.getElementsByClassName("animateOnHover")].forEach(
@@ -740,7 +961,25 @@ 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("span", { className: "Layer__btn-icon Layer__btn-icon--left" }, leftIcon), !iconOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-icon Layer__btn-icon--right" }, rightIcon))
+    /* @__PURE__ */ import_react8.default.createElement("span", { className: `Layer__btn-content Layer__justify--${justify}` }, leftIcon && /* @__PURE__ */ import_react8.default.createElement(
+      "span",
+      {
+        className: (0, import_classnames.default)(
+          "Layer__btn-icon Layer__btn-icon--left",
+          iconAsPrimary && "Layer__btn-icon--primary"
+        )
+      },
+      leftIcon
+    ), !iconOnly && /* @__PURE__ */ import_react8.default.createElement("span", { className: "Layer__btn-text" }, children), rightIcon && /* @__PURE__ */ import_react8.default.createElement(
+      "span",
+      {
+        className: (0, import_classnames.default)(
+          "Layer__btn-icon Layer__btn-icon--right",
+          iconAsPrimary && "Layer__btn-icon--primary"
+        )
+      },
+      rightIcon
+    ))
   );
 };
 
@@ -748,8 +987,8 @@ var Button = ({
 var import_react13 = __toESM(require("react"));
 
 // src/icons/AlertCircle.tsx
-var React9 = __toESM(require("react"));
-var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElement(
+var React11 = __toESM(require("react"));
+var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -759,7 +998,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React9.createElement(
+  /* @__PURE__ */ React11.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",
@@ -768,7 +1007,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React9.createElement(
+  /* @__PURE__ */ React11.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -777,7 +1016,7 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React9.createElement(
+  /* @__PURE__ */ React11.createElement(
     "path",
     {
       d: "M9 12H9.0075",
@@ -790,8 +1029,8 @@ var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElem
 var AlertCircle_default = AlertCircle;
 
 // src/icons/Check.tsx
-var React10 = __toESM(require("react"));
-var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React10.createElement(
+var React12 = __toESM(require("react"));
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -801,7 +1040,7 @@ var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React10.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React10.createElement(
+  /* @__PURE__ */ React12.createElement(
     "path",
     {
       d: "M15 4.5L6.75 12.75L3 9",
@@ -814,8 +1053,8 @@ var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React10.createElement(
 var Check_default = Check;
 
 // src/icons/CheckCircle.tsx
-var React11 = __toESM(require("react"));
-var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createElement(
+var React13 = __toESM(require("react"));
+var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React13.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -825,7 +1064,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React13.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",
@@ -834,7 +1073,7 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React11.createElement(
+  /* @__PURE__ */ React13.createElement(
     "path",
     {
       d: "M16.5 3L9 10.5075L6.75 8.2575",
@@ -847,8 +1086,8 @@ var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createEle
 var CheckCircle_default = CheckCircle;
 
 // src/icons/Loader.tsx
-var React12 = __toESM(require("react"));
-var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
+var React14 = __toESM(require("react"));
+var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React14.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -858,7 +1097,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M9 1.5V4.5",
@@ -867,7 +1106,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M9 13.5V16.5",
@@ -876,7 +1115,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M3.6975 3.6975L5.82 5.82",
@@ -885,7 +1124,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M12.18 12.18L14.3025 14.3025",
@@ -894,7 +1133,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M1.5 9H4.5",
@@ -903,7 +1142,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M13.5 9H16.5",
@@ -912,7 +1151,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M3.6975 14.3025L5.82 12.18",
@@ -921,7 +1160,7 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React12.createElement(
+  /* @__PURE__ */ React14.createElement(
     "path",
     {
       d: "M12.18 5.82L14.3025 3.6975",
@@ -933,6 +1172,48 @@ var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
 );
 var Loader_default = Loader;
 
+// src/icons/Save.tsx
+var React15 = __toESM(require("react"));
+var Save = ({ size = 18, ...props }) => /* @__PURE__ */ React15.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React15.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React15.createElement(
+    "path",
+    {
+      d: "M12.75 15.75V9.75H5.25V15.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React15.createElement(
+    "path",
+    {
+      d: "M5.25 2.25V6H11.25",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var Save_default = Save;
+
 // src/components/Tooltip/Tooltip.tsx
 var import_react11 = __toESM(require("react"));
 
@@ -987,9 +1268,11 @@ var useTooltip = ({
   const interactions = (0, import_react10.useInteractions)([hover, focus, dismiss, role]);
   const { isMounted, styles } = (0, import_react10.useTransitionStyles)(context, {
     initial: {
-      opacity: 0
+      opacity: 0,
+      transform: "scale(0.7)",
+      color: "transparent"
     },
-    duration: 200
+    duration: 300
   });
   return import_react9.default.useMemo(
     () => ({
@@ -1051,12 +1334,11 @@ var TooltipContent = (0, import_react11.forwardRef)(function TooltipContent2({ s
       ref,
       className,
       style: {
-        ...context.styles,
-        ...context.floatingStyles,
-        ...style
+        ...context.floatingStyles
       },
       ...context.getFloatingProps(props)
-    }
+    },
+    /* @__PURE__ */ import_react11.default.createElement("div", { className: "Layer__tooltip-content ", style: { ...context.styles } }, props.children)
   ));
 });
 
@@ -1064,7 +1346,8 @@ var TooltipContent = (0, import_react11.forwardRef)(function TooltipContent2({ s
 var import_classnames2 = __toESM(require("classnames"));
 var buildRightIcon = ({
   processing,
-  error
+  error,
+  action
 }) => {
   if (processing) {
     return /* @__PURE__ */ import_react13.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
@@ -1072,6 +1355,9 @@ var buildRightIcon = ({
   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));
   }
+  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_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,
     {
@@ -1088,6 +1374,7 @@ var SubmitButton = ({
   disabled,
   error,
   children,
+  action = "save" /* SAVE */,
   ...props
 }) => {
   const baseClassName = (0, import_classnames2.default)(
@@ -1101,330 +1388,411 @@ var SubmitButton = ({
       className: baseClassName,
       variant: "primary" /* primary */,
       disabled: processing || disabled,
-      rightIcon: buildRightIcon({ processing, error })
+      rightIcon: buildRightIcon({ processing, error, action }),
+      iconAsPrimary: true
     },
     children
   );
 };
 
-// src/components/CategoryMenu/CategoryMenu.tsx
+// src/components/Button/IconButton.tsx
 var import_react14 = __toESM(require("react"));
-var import_react_select = __toESM(require("react-select"));
-var DropdownIndicator = (props) => {
-  return /* @__PURE__ */ import_react14.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react14.default.createElement(ChevronDown_default, null));
-};
-var CategoryMenu = ({
-  bankTransaction,
-  name,
-  value,
-  onChange,
-  disabled,
-  className
+var import_classnames3 = __toESM(require("classnames"));
+var IconButton = ({
+  className,
+  children,
+  icon,
+  active,
+  ...props
 }) => {
-  const { categories } = useLayerContext();
-  const suggestedOptions = bankTransaction?.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? [
-    {
-      label: "Suggested",
-      options: bankTransaction.categorization_flow.suggestions
-    }
-  ] : [];
-  const categoryOptions = (categories || []).map((category) => {
-    if (category?.subCategories && category?.subCategories?.length > 0) {
-      return {
-        label: category.display_name,
-        options: category.subCategories
-      };
-    }
-    return {
-      label: category.display_name,
-      options: [category]
-    };
-  }).filter((x) => x);
-  const options = [...suggestedOptions, ...categoryOptions];
-  return /* @__PURE__ */ import_react14.default.createElement(
-    import_react_select.default,
-    {
-      name,
-      className: `Layer__category-menu Layer__select ${className ?? ""}`,
-      classNamePrefix: "Layer__select",
-      options,
-      isSearchable: true,
-      value,
-      onChange: (newValue) => newValue && onChange(newValue),
-      getOptionLabel: (category) => category.display_name,
-      getOptionValue: (category) => category.stable_name || category.category,
-      menuPortalTarget: document.body,
-      styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
-      components: { DropdownIndicator },
-      isDisabled: disabled
-    }
+  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/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_react22 = __toESM(require("react"));
+// src/components/Button/TextButton.tsx
+var import_react15 = __toESM(require("react"));
+var import_classnames4 = __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);
+};
+
+// src/components/Badge/Badge.tsx
+var import_classnames5 = __toESM(require("classnames"));
+var Badge = ({
+  icon,
+  onClick,
+  children,
+  tooltip,
+  size = "medium" /* MEDIUM */
+}) => {
+  const baseProps = {
+    className: (0, import_classnames5.default)(
+      "Layer__badge",
+      onClick || tooltip ? "Layer__badge--clickable" : "",
+      `Layer__badge--${size}`
+    ),
+    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);
+  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 content;
+};
 
-// src/icons/FolderPlus.tsx
-var React17 = __toESM(require("react"));
-var FolderPlus = ({ size = 18, ...props }) => /* @__PURE__ */ React17.createElement(
+// src/components/CategorySelect/CategorySelect.tsx
+var import_react17 = __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(
   "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__ */ React17.createElement(
+  /* @__PURE__ */ React22.createElement(
     "path",
     {
-      d: "M16.5 14.25C16.5 14.6478 16.342 15.0294 16.0607 15.3107C15.7794 15.592 15.3978 15.75 15 15.75H3C2.60218 15.75 2.22064 15.592 1.93934 15.3107C1.65804 15.0294 1.5 14.6478 1.5 14.25V3.75C1.5 3.35218 1.65804 2.97064 1.93934 2.68934C2.22064 2.40804 2.60218 2.25 3 2.25H6.75L8.25 4.5H15C15.3978 4.5 15.7794 4.65804 16.0607 4.93934C16.342 5.22064 16.5 5.60218 16.5 6V14.25Z",
+      d: "M3 10.5H7.5V15",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React17.createElement(
+  /* @__PURE__ */ React22.createElement(
     "path",
     {
-      d: "M9 8.25V12.75",
+      d: "M15 7.5H10.5V3",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React17.createElement(
-    "path",
-    {
-      d: "M6.75 10.5H11.25",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
-var FolderPlus_default = FolderPlus;
-
-// src/icons/Link.tsx
-var React18 = __toESM(require("react"));
-var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React18.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React18.createElement(
+  /* @__PURE__ */ React22.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: "M10.5 7.5L15.75 2.25",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React18.createElement(
+  /* @__PURE__ */ React22.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: "M2.25 15.75L7.5 10.5",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   )
 );
-var Link_default = Link;
+var MinimizeTwo_default = MinimizeTwo;
 
-// src/icons/RefreshCcw.tsx
-var React19 = __toESM(require("react"));
-var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React19.createElement(
-  "svg",
+// src/components/CategorySelect/CategorySelect.tsx
+var import_classnames6 = __toESM(require("classnames"));
+var import_date_fns4 = require("date-fns");
+var mapCategoryToOption = (category) => {
+  return {
+    type: "category" /* CATEGORY */,
+    payload: {
+      id: category.id,
+      option_type: "category" /* CATEGORY */,
+      display_name: category.display_name,
+      type: category.type,
+      stable_name: category.stable_name,
+      entries: category.entries,
+      subCategories: category.subCategories
+    }
+  };
+};
+var mapSuggestedMatchToOption = (record) => {
+  return {
+    type: "match" /* MATCH */,
+    payload: {
+      id: record.id,
+      option_type: "match" /* MATCH */,
+      display_name: record.details.description,
+      amount: record.details.amount
+    }
+  };
+};
+var DropdownIndicator = (props) => {
+  return /* @__PURE__ */ import_react17.default.createElement(import_react_select.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react17.default.createElement(ChevronDown_default, null));
+};
+var GroupHeading = (props) => {
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_react_select.components.GroupHeading,
+    {
+      className: (0, import_classnames6.default)(
+        props.className,
+        props.children === "Match" || props.children === "All categories" ? "Layer__select__group-heading--main" : ""
+      ),
+      ...props
+    }
+  );
+};
+var Option = (props) => {
+  if (props.data.payload.option_type === "hidden") {
+    return;
+  }
+  if (props.data.type === "match") {
+    return /* @__PURE__ */ import_react17.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)))
+    );
+  }
+  return /* @__PURE__ */ import_react17.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
+  );
+};
+var allCategoriesDivider = [
   {
-    viewBox: "0 0 18 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React19.createElement(
-    "path",
+    label: "All categories",
+    options: [
+      {
+        type: "All categories",
+        disabled: true,
+        payload: {
+          id: "all_categories",
+          option_type: "hidden" /* HIDDEN */,
+          display_name: "ALL CATEGORIES"
+        }
+      }
+    ]
+  }
+];
+function flattenCategories(categories) {
+  const categoryOptions = (categories || []).flatMap((category) => {
+    if (category?.subCategories && category?.subCategories?.length > 0) {
+      if (category?.subCategories?.every((c) => c.subCategories === void 0)) {
+        return [
+          {
+            label: category.display_name,
+            options: category.subCategories.map((x) => mapCategoryToOption(x))
+          }
+        ];
+      }
+      return flattenCategories(category.subCategories);
+    }
+    const resultOption = {
+      label: category.display_name,
+      options: [mapCategoryToOption(category)]
+    };
+    return [resultOption];
+  });
+  return categoryOptions;
+}
+var CategorySelect = ({
+  bankTransaction,
+  name,
+  value,
+  onChange,
+  disabled,
+  className
+}) => {
+  const { categories } = useLayerContext();
+  const matchOptions = bankTransaction?.suggested_matches ? [
     {
-      d: "M0.75 3V7.5H5.25",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      label: "Match",
+      options: bankTransaction.suggested_matches.map((x) => {
+        return {
+          type: "match" /* MATCH */,
+          payload: {
+            id: x.id,
+            option_type: "match" /* MATCH */,
+            display_name: x.details.description,
+            date: x.details.date,
+            amount: x.details.amount
+          }
+        };
+      })
     }
-  ),
-  /* @__PURE__ */ React19.createElement(
-    "path",
+  ] : [];
+  const suggestedOptions = bankTransaction?.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? [
     {
-      d: "M17.25 15V10.5H12.75",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      label: "Suggestions",
+      options: bankTransaction.categorization_flow.suggestions.map(
+        (x) => mapCategoryToOption(x)
+      )
     }
-  ),
-  /* @__PURE__ */ React19.createElement(
-    "path",
+  ] : [];
+  const categoryOptions = flattenCategories(categories);
+  const options = [
+    ...matchOptions,
+    ...suggestedOptions,
+    ...allCategoriesDivider,
+    ...categoryOptions
+  ];
+  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(
+    import_react_select.default,
     {
-      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"
+      name,
+      className: `Layer__category-menu Layer__select ${className ?? ""}`,
+      classNamePrefix: "Layer__select",
+      options,
+      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)),
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      getOptionLabel: (category) => category.payload.display_name,
+      getOptionValue: (category) => category.payload.id,
+      menuPortalTarget: document.body,
+      styles: {
+        menuPortal: (base) => ({ ...base, zIndex: 9999 })
+      },
+      components: { DropdownIndicator, GroupHeading, Option },
+      isDisabled: disabled,
+      isOptionDisabled: (option) => option.disabled ?? false
     }
-  )
-);
-var RefreshCcw_default = RefreshCcw;
+  );
+};
 
-// src/icons/Scissors.tsx
-var React20 = __toESM(require("react"));
-var Scissors = ({ size = 11, ...props }) => /* @__PURE__ */ React20.createElement(
+// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
+var import_react28 = __toESM(require("react"));
+
+// src/icons/Link.tsx
+var React24 = __toESM(require("react"));
+var Link = ({ size = 18, ...props }) => /* @__PURE__ */ React24.createElement(
   "svg",
   {
-    viewBox: "0 0 11 11",
-    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
     ...props,
     width: size,
     height: size
   },
-  /* @__PURE__ */ React20.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",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    },
-    /* @__PURE__ */ React20.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        className: "animateOnHover",
-        values: "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;M2.50519 5.21436C3.20276 4.91424 3.52494 4.10544 3.22481 3.40788C2.92468 2.71031 2.11589 2.38813 1.41833 2.68826C0.720762 2.98839 0.398577 3.79718 0.698706 4.49474C0.998836 5.19231 1.80763 5.51449 2.50519 5.21436Z;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",
-        begin: "indefinite",
-        dur: "400ms",
-        repeatCount: "1",
-        fill: "freeze",
-        calcMode: "linear",
-        keyTimes: "0;0.5;1"
-      }
-    )
-  ),
-  /* @__PURE__ */ React20.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",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    },
-    /* @__PURE__ */ React20.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        className: "animateOnHover",
-        values: "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;M1.43277 8.38576C2.13615 8.67201 2.9384 8.33386 3.22465 7.63049C3.5109 6.92711 3.17275 6.12486 2.46937 5.83861C1.766 5.55236 0.96375 5.89051 0.6775 6.59389C0.391251 7.29726 0.729398 8.09951 1.43277 8.38576Z;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",
-        begin: "indefinite",
-        dur: "400ms",
-        repeatCount: "1",
-        fill: "freeze",
-        calcMode: "linear",
-        keyTimes: "0;0.5;1"
-      }
-    )
-  ),
-  /* @__PURE__ */ React20.createElement(
-    "path",
-    {
-      d: "M9.16668 1.83325L3.72168 7.27825",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    },
-    /* @__PURE__ */ React20.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        className: "animateOnHover",
-        values: "M9.16668 1.83325L3.72168 7.27825;M10.3129 3.58763L3.21706 6.57851;M9.16668 1.83325L3.72168 7.27825",
-        begin: "indefinite",
-        dur: "400ms",
-        repeatCount: "1",
-        fill: "freeze",
-        calcMode: "linear",
-        keyTimes: "0;0.5;1"
-      }
-    )
-  ),
-  /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
-      d: "M6.63232 6.63672L9.16691 9.16672",
+      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",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    },
-    /* @__PURE__ */ React20.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        className: "animateOnHover",
-        values: "M6.63232 6.63672L9.16691 9.16672;M7.06396 5.9873L10.3921 7.3096;M6.63232 6.63672L9.16691 9.16672",
-        begin: "indefinite",
-        dur: "400ms",
-        repeatCount: "1",
-        fill: "freeze",
-        calcMode: "linear",
-        keyTimes: "0;0.5;1"
-      }
-    )
+    }
   ),
-  /* @__PURE__ */ React20.createElement(
+  /* @__PURE__ */ React24.createElement(
     "path",
     {
-      d: "M3.72168 3.72168L5.50001 5.50001",
+      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",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
-    },
-    /* @__PURE__ */ React20.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        className: "animateOnHover",
-        values: "M3.72168 3.72168L5.50001 5.50001;M3.23828 4.45996L5.57467 5.39067;M3.72168 3.72168L5.50001 5.50001",
-        begin: "indefinite",
-        dur: "400ms",
-        repeatCount: "1",
-        fill: "freeze",
-        calcMode: "linear",
-        keyTimes: "0;0.5;1"
-      }
-    )
+    }
   )
 );
-var Scissors_default = Scissors;
+var Link_default = Link;
+
+// src/components/CategoryMenu/CategoryMenu.tsx
+var import_react18 = __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));
+};
+var CategoryMenu = ({
+  bankTransaction,
+  name,
+  value,
+  onChange,
+  disabled,
+  className
+}) => {
+  const { categories } = useLayerContext();
+  const suggestedOptions = hasSuggestions(bankTransaction.categorization_flow) ? [
+    {
+      label: "Suggested",
+      options: bankTransaction.categorization_flow.suggestions
+    }
+  ] : [];
+  const categoryOptions = (categories || []).map((category) => {
+    if (category?.subCategories && category?.subCategories?.length > 0) {
+      return {
+        label: category.display_name,
+        options: category.subCategories
+      };
+    }
+    return {
+      label: category.display_name,
+      options: [category]
+    };
+  }).filter((x) => x);
+  const options = [...suggestedOptions, ...categoryOptions];
+  return /* @__PURE__ */ import_react18.default.createElement(
+    import_react_select2.default,
+    {
+      name,
+      className: `Layer__category-menu Layer__select ${className ?? ""}`,
+      classNamePrefix: "Layer__select",
+      options,
+      isSearchable: true,
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      getOptionLabel: (category) => category.display_name,
+      getOptionValue: (category) => category.stable_name || category.category,
+      menuPortalTarget: document.body,
+      styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
+      components: { DropdownIndicator: DropdownIndicator2 },
+      isDisabled: disabled
+    }
+  );
+};
 
 // src/components/Input/Input.tsx
-var import_react15 = __toESM(require("react"));
-var import_classnames3 = __toESM(require("classnames"));
-var Input = ({ className, ...props }) => {
-  const baseClassName = (0, import_classnames3.default)("Layer__input", className);
-  return /* @__PURE__ */ import_react15.default.createElement("input", { ...props, className: baseClassName });
+var import_react19 = __toESM(require("react"));
+var import_classnames7 = __toESM(require("classnames"));
+var Input = ({
+  className,
+  isInvalid,
+  errorMessage,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames7.default)(
+    "Layer__input",
+    isInvalid ? "Layer__input--error" : "",
+    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));
 };
 
 // src/components/Input/InputGroup.tsx
-var import_react18 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/Typography/Text.tsx
-var import_react16 = __toESM(require("react"));
-var import_classnames4 = __toESM(require("classnames"));
+var import_react20 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
 var Text = ({
   as: Component = "p",
   className,
@@ -1434,12 +1802,12 @@ var Text = ({
   withTooltip,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames4.default)(
+  const baseClassName = (0, import_classnames8.default)(
     `Layer__text Layer__text--${size} Layer__text--${weight}`,
     className
   );
   if (withTooltip) {
-    return /* @__PURE__ */ import_react16.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(
       TextWithTooltip,
       {
         as: Component,
@@ -1452,7 +1820,7 @@ var Text = ({
       children
     );
   }
-  return /* @__PURE__ */ import_react16.default.createElement(Component, { ...props, className: baseClassName }, children);
+  return /* @__PURE__ */ import_react20.default.createElement(Component, { ...props, className: baseClassName }, children);
 };
 var TextWithTooltip = ({
   as: Component = "p",
@@ -1464,66 +1832,66 @@ var TextWithTooltip = ({
   tooltipOptions,
   ...props
 }) => {
-  const textElementRef = (0, import_react16.useRef)();
+  const textElementRef = (0, import_react20.useRef)();
   const compareSize = () => {
     if (textElementRef.current) {
       const compare = textElementRef.current.children[0].scrollWidth > textElementRef.current.children[0].clientWidth;
       setHover(compare);
     }
   };
-  (0, import_react16.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     compareSize();
     window.addEventListener("resize", compareSize);
   }, []);
-  (0, import_react16.useEffect)(
+  (0, import_react20.useEffect)(
     () => () => {
       window.removeEventListener("resize", compareSize);
     },
     []
   );
-  const [hoverStatus, setHover] = (0, import_react16.useState)(false);
-  const contentClassName = (0, import_classnames4.default)(
+  const [hoverStatus, setHover] = (0, import_react20.useState)(false);
+  const contentClassName = (0, import_classnames8.default)(
     "Layer__tooltip",
     tooltipOptions?.contentClassName
   );
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     Tooltip,
     {
       disabled: !hoverStatus,
       offset: tooltipOptions?.offset,
       shift: tooltipOptions?.shift
     },
-    /* @__PURE__ */ import_react16.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react16.default.createElement(Component, { className, ref: textElementRef, ...props }, children)),
-    /* @__PURE__ */ import_react16.default.createElement(TooltipContent, { className: contentClassName }, children)
+    /* @__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)
   );
 };
 
 // src/components/Typography/Heading.tsx
-var import_react17 = __toESM(require("react"));
-var import_classnames5 = __toESM(require("classnames"));
+var import_react21 = __toESM(require("react"));
+var import_classnames9 = __toESM(require("classnames"));
 var Heading = ({
   as: Component = "h2",
   className,
   children,
   size = "primary" /* primary */
 }) => {
-  const baseClassName = (0, import_classnames5.default)(
+  const baseClassName = (0, import_classnames9.default)(
     `Layer__heading Layer__heading--${size}`,
     className
   );
-  return /* @__PURE__ */ import_react17.default.createElement(Component, { className: baseClassName }, children);
+  return /* @__PURE__ */ import_react21.default.createElement(Component, { className: baseClassName }, children);
 };
 
 // src/components/Input/InputGroup.tsx
-var import_classnames6 = __toESM(require("classnames"));
+var import_classnames10 = __toESM(require("classnames"));
 var InputGroup = ({
   label,
   name,
   className,
   children
 }) => {
-  const baseClassName = (0, import_classnames6.default)("Layer__input-group", className);
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ import_react18.default.createElement(
+  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(
     Text,
     {
       as: "label",
@@ -1536,11 +1904,11 @@ var InputGroup = ({
 };
 
 // src/components/Input/FileInput.tsx
-var import_react19 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 
 // src/icons/UploadCloud.tsx
-var React25 = __toESM(require("react"));
-var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createElement(
+var React30 = __toESM(require("react"));
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React30.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -1550,7 +1918,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React30.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -1559,7 +1927,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React30.createElement(
     "path",
     {
       d: "M9 9V15.75",
@@ -1568,7 +1936,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React30.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",
@@ -1577,7 +1945,7 @@ var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createEle
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React25.createElement(
+  /* @__PURE__ */ React30.createElement(
     "path",
     {
       d: "M12 12L9 9L6 12",
@@ -1591,7 +1959,7 @@ var UploadCloud_default = UploadCloud;
 
 // src/components/Input/FileInput.tsx
 var FileInput = ({ text = "Upload", onUpload }) => {
-  const hiddenFileInput = (0, import_react19.useRef)(null);
+  const hiddenFileInput = (0, import_react23.useRef)(null);
   const onClick = () => {
     if (hiddenFileInput.current) {
       hiddenFileInput.current.click();
@@ -1603,15 +1971,15 @@ var FileInput = ({ text = "Upload", onUpload }) => {
       onUpload(fileUploaded);
     }
   };
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
     Button,
     {
       onClick,
       variant: "secondary" /* secondary */,
-      leftIcon: /* @__PURE__ */ import_react19.default.createElement(UploadCloud_default, null)
+      rightIcon: /* @__PURE__ */ import_react23.default.createElement(UploadCloud_default, null)
     },
     text
-  ), /* @__PURE__ */ import_react19.default.createElement(
+  ), /* @__PURE__ */ import_react23.default.createElement(
     "input",
     {
       type: "file",
@@ -1622,20 +1990,102 @@ var FileInput = ({ text = "Upload", onUpload }) => {
   ));
 };
 
+// src/components/MatchForm/MatchForm.tsx
+var import_react25 = __toESM(require("react"));
+
+// src/components/BankTransactionRow/MatchBadge.tsx
+var import_react24 = __toESM(require("react"));
+var import_date_fns5 = require("date-fns");
+var MatchBadge = ({
+  bankTransaction,
+  classNamePrefix,
+  dateFormat,
+  text = "Match"
+}) => {
+  if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
+    const { date, amount, description } = bankTransaction.match.bank_transaction;
+    return /* @__PURE__ */ import_react24.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)))
+      },
+      text
+    );
+  }
+  return;
+};
+
+// src/components/MatchForm/MatchForm.tsx
+var import_classnames11 = __toESM(require("classnames"));
+var import_date_fns6 = require("date-fns");
+var MatchForm = ({
+  classNamePrefix,
+  bankTransaction,
+  selectedMatchId,
+  setSelectedMatchId
+}) => {
+  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(
+      "div",
+      {
+        key: idx,
+        className: (0, import_classnames11.default)(
+          `${classNamePrefix}__match-row`,
+          match.id === selectedMatchId ? `${classNamePrefix}__match-row--selected` : ""
+        ),
+        onClick: () => {
+          if (selectedMatchId === match.id) {
+            setSelectedMatchId(void 0);
+            return;
+          }
+          setSelectedMatchId(match.id);
+        }
+      },
+      /* @__PURE__ */ import_react25.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_react25.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ import_react25.default.createElement(
+        Text,
+        {
+          className: `${classNamePrefix}__match-table__desc-tooltip`,
+          withTooltip: "whenTruncated" /* whenTruncated */,
+          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(
+        MatchBadge,
+        {
+          classNamePrefix,
+          bankTransaction,
+          dateFormat: DATE_FORMAT,
+          text: "Matched"
+        }
+      ))
+    );
+  }));
+};
+
 // src/components/Textarea/Textarea.tsx
-var import_react20 = __toESM(require("react"));
-var import_classnames7 = __toESM(require("classnames"));
+var import_react26 = __toESM(require("react"));
+var import_classnames12 = __toESM(require("classnames"));
 var Textarea = ({
   className,
   ...props
 }) => {
-  const baseClassName = (0, import_classnames7.default)("Layer__textarea", className);
-  return /* @__PURE__ */ import_react20.default.createElement("textarea", { ...props, className: baseClassName });
+  const baseClassName = (0, import_classnames12.default)("Layer__textarea", className);
+  return /* @__PURE__ */ import_react26.default.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
-var import_react21 = __toESM(require("react"));
-var import_classnames8 = __toESM(require("classnames"));
+var import_react27 = __toESM(require("react"));
+var import_classnames13 = __toESM(require("classnames"));
 var Toggle = ({
   name,
   options,
@@ -1643,16 +2093,16 @@ var Toggle = ({
   onChange,
   size = "medium" /* medium */
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react21.useState)(0);
-  const [thumbPos, setThumbPos] = (0, import_react21.useState)({ left: 0, width: 0 });
-  const [initialized, setInitialized] = (0, import_react21.useState)(false);
+  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 toggleRef = useElementSize((a, b, c) => {
     if (c.width && c?.width !== currentWidth) {
       setCurrentWidth(c.width);
     }
   });
   const selectedValue = selected || options[0].value;
-  const baseClassName = (0, import_classnames8.default)(
+  const baseClassName = (0, import_classnames13.default)(
     "Layer__toggle",
     `Layer__toggle--${size}`,
     initialized ? "Layer__toggle--initialized" : ""
@@ -1677,17 +2127,17 @@ var Toggle = ({
         width = c.offsetWidth;
       }
     });
-    shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1);
+    shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1.5);
     setThumbPos({ left: shift2, width });
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
     setTimeout(() => {
       setInitialized(true);
     }, 400);
   }, []);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
@@ -1700,7 +2150,7 @@ var Toggle = ({
     }
     return selectedIndex;
   };
-  return /* @__PURE__ */ import_react21.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react27.default.createElement(
     ToggleOption,
     {
       ...option,
@@ -1712,7 +2162,7 @@ var Toggle = ({
       disabled: option.disabled ?? false,
       index
     }
-  )), /* @__PURE__ */ import_react21.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+  )), /* @__PURE__ */ import_react27.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
 };
 var ToggleOption = ({
   checked,
@@ -1725,7 +2175,7 @@ var ToggleOption = ({
   disabled,
   index
 }) => {
-  return /* @__PURE__ */ import_react21.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react27.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react27.default.createElement(
     "input",
     {
       type: "radio",
@@ -1736,22 +2186,55 @@ var ToggleOption = ({
       disabled: disabled ?? false,
       "data-idx": index
     }
-  ), /* @__PURE__ */ import_react21.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react21.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react21.default.createElement("span", null, label)));
+  ), /* @__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)));
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
+var import_classnames14 = __toESM(require("classnames"));
+var hasMatch = (bankTransaction) => {
+  return Boolean(
+    bankTransaction?.suggested_matches && bankTransaction?.suggested_matches?.length > 0 || bankTransaction?.match
+  );
+};
+var isAlreadyMatched = (bankTransaction) => {
+  if (bankTransaction?.match) {
+    const foundMatch = bankTransaction.suggested_matches?.find(
+      (x) => x.details.id === bankTransaction?.match?.details.id
+    );
+    return foundMatch?.id;
+  }
+  return void 0;
+};
+var ExpandedBankTransactionRow = (0, import_react28.forwardRef)(
   ({
     bankTransaction,
     isOpen = false,
     asListItem = false,
     submitBtnText = "Save"
   }, ref) => {
-    const { categorize: categorizeBankTransaction2 } = useBankTransactions();
-    const [purpose, setPurpose] = (0, import_react22.useState)("categorize" /* categorize */);
-    const defaultCategory = bankTransaction.category || bankTransaction.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ && bankTransaction.categorization_flow?.suggestions?.[0];
-    const [rowState, updateRowState] = (0, import_react22.useState)({
-      splits: [
+    const {
+      categorize: categorizeBankTransaction2,
+      match: matchBankTransaction2
+    } = useBankTransactions();
+    const [purpose, setPurpose] = (0, import_react28.useState)(
+      bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
+    );
+    const [selectedMatchId, setSelectedMatchId] = (0, import_react28.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 defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
+    const [rowState, updateRowState] = (0, import_react28.useState)({
+      splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
+        return {
+          amount: c.amount || 0,
+          inputValue: centsToDollars(c.amount),
+          category: c.category
+        };
+      }) : [
         {
           amount: bankTransaction.amount,
           inputValue: centsToDollars(bankTransaction.amount),
@@ -1768,22 +2251,32 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
         { amount: 0, inputValue: "0.00", category: defaultCategory }
       ]
     });
-    const removeSplit = () => updateRowState({
-      ...rowState,
-      splits: rowState.splits.slice(0, -1)
-    });
+    const removeSplit = (index) => {
+      const newSplits = rowState.splits.filter((_v, idx) => idx !== index);
+      const splitTotal = newSplits.reduce((sum, split, index2) => {
+        const amount = index2 === 0 ? 0 : split.amount;
+        return sum + amount;
+      }, 0);
+      const remaining = bankTransaction.amount - splitTotal;
+      newSplits[0].amount = remaining;
+      newSplits[0].inputValue = centsToDollars(remaining);
+      updateRowState({
+        ...rowState,
+        splits: newSplits
+      });
+    };
     const updateAmounts = (rowNumber) => (event) => {
       const newAmount = dollarsToCents(event.target.value) || 0;
       const newDisplaying = event.target.value;
-      const splitTotal = rowState.splits.slice(0, -1).reduce((sum, split, index) => {
-        const amount = index === rowNumber ? newAmount : split.amount;
+      const splitTotal = rowState.splits.reduce((sum, split, index) => {
+        const amount = index === 0 ? 0 : index === rowNumber ? newAmount : split.amount;
         return sum + amount;
       }, 0);
       const remaining = bankTransaction.amount - splitTotal;
       rowState.splits[rowNumber].amount = newAmount;
       rowState.splits[rowNumber].inputValue = newDisplaying;
-      rowState.splits[rowState.splits.length - 1].amount = remaining;
-      rowState.splits[rowState.splits.length - 1].inputValue = centsToDollars(remaining);
+      rowState.splits[0].amount = remaining;
+      rowState.splits[0].inputValue = centsToDollars(remaining);
       updateRowState({ ...rowState });
     };
     const onBlur = (event) => {
@@ -1800,32 +2293,83 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
       rowState.splits[index].category = newValue;
       updateRowState({ ...rowState });
     };
-    const save = () => categorizeBankTransaction2(
-      bankTransaction.id,
-      rowState.splits.length === 1 ? {
-        type: "Category",
-        category: {
-          type: "StableName",
-          stable_name: rowState?.splits[0].category?.stable_name || rowState?.splits[0].category?.category
+    const save = () => {
+      if (purpose === "match" /* match */) {
+        if (selectedMatchId && selectedMatchId !== isAlreadyMatched(bankTransaction)) {
+          onMatchSubmit(selectedMatchId);
         }
-      } : {
-        type: "Split",
-        entries: rowState.splits.map((split) => ({
-          category: split.category?.stable_name || split.category?.category,
-          amount: split.amount
-        }))
+        return;
       }
-    ).catch((e) => console.error(e));
-    (0, import_react22.useImperativeHandle)(ref, () => ({
+      categorizeBankTransaction2(
+        bankTransaction.id,
+        rowState.splits.length === 1 ? {
+          type: "Category",
+          category: {
+            type: "StableName",
+            stable_name: rowState?.splits[0].category?.stable_name || rowState?.splits[0].category?.category
+          }
+        } : {
+          type: "Split",
+          entries: rowState.splits.map((split) => ({
+            category: split.category?.stable_name || split.category?.category,
+            amount: split.amount
+          }))
+        }
+      ).catch((e) => console.error(e));
+    };
+    (0, import_react28.useImperativeHandle)(ref, () => ({
       save
     }));
+    const onMatchSubmit = (matchId) => {
+      const foundMatch = bankTransaction.suggested_matches?.find(
+        (x) => x.id === matchId
+      );
+      if (!foundMatch) {
+        return;
+      }
+      matchBankTransaction2(bankTransaction.id, foundMatch.id);
+    };
+    const getDivHeight = (0, import_react28.useCallback)(() => {
+      const { height: height2 } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : { height: void 0 };
+      return height2 || 0;
+    }, []);
+    const handleTransitionEnd = (0, import_react28.useCallback)(
+      (e) => {
+        if (e.propertyName === "height") {
+          setHeight(isOpen ? "auto" : 0);
+          if (!isOpen) {
+            setOver(true);
+          }
+        }
+      },
+      [isOpen]
+    );
+    (0, import_react28.useEffect)(() => {
+      if (!isLoaded) {
+        return;
+      }
+      setHeight(getDivHeight());
+      setOver(false);
+      if (!isOpen) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => setHeight(0));
+        });
+      }
+    }, [getDivHeight, isOpen]);
+    (0, import_react28.useEffect)(() => {
+      setIsLoaded(true);
+      setOver(true);
+    }, []);
     const className = "Layer__expanded-bank-transaction-row";
-    return /* @__PURE__ */ import_react22.default.createElement(
+    const shouldHide = !isOpen && isOver;
+    return /* @__PURE__ */ import_react28.default.createElement(
       "span",
       {
-        className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`
+        className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
+        style: { height },
+        onTransitionEnd: handleTransitionEnd
       },
-      /* @__PURE__ */ import_react22.default.createElement("span", { className: `${className}__wrapper` }, /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react22.default.createElement(
+      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(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -1833,81 +2377,129 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
           options: [
             {
               value: "categorize",
-              label: "Categorize",
-              leftIcon: /* @__PURE__ */ import_react22.default.createElement(FolderPlus_default, { size: 15 })
+              label: "Categorize"
             },
             {
               value: "match",
               label: "Match",
-              disabled: true,
-              leftIcon: /* @__PURE__ */ import_react22.default.createElement(RefreshCcw_default, { size: 15 })
+              disabled: !hasMatch(bankTransaction)
             }
           ],
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ import_react22.default.createElement(
+      )), /* @__PURE__ */ import_react28.default.createElement(
         "div",
         {
           className: `${className}__content`,
           id: `expanded-${bankTransaction.id}`
         },
-        /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__splits` }, /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react28.default.createElement(
           "div",
           {
-            className: `${className}__table-cell--split-entry`,
-            key: `split-${index}`
+            className: (0, import_classnames14.default)(
+              `${className}__match`,
+              `${className}__content-panel`,
+              purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
+            )
           },
-          rowState.splits.length > 1 && /* @__PURE__ */ import_react22.default.createElement(
-            Input,
-            {
-              type: "text",
-              name: `split-${index}${asListItem ? "-li" : ""}`,
-              disabled: index + 1 === rowState.splits.length,
-              onChange: updateAmounts(index),
-              value: split.inputValue,
-              onBlur,
-              className: `${className}__split-amount${split.amount < 0 ? "--negative" : ""}`
-            }
-          ),
-          /* @__PURE__ */ import_react22.default.createElement(
-            CategoryMenu,
+          /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react28.default.createElement(
+            MatchForm,
             {
+              classNamePrefix: className,
               bankTransaction,
-              name: `category-${index}${asListItem ? "-li" : ""}`,
-              value: split.category,
-              onChange: (value) => changeCategory(index, value),
-              className: "Layer__category-menu--full"
+              selectedMatchId,
+              setSelectedMatchId
             }
-          )
-        ))), /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length === 1 ? /* @__PURE__ */ import_react22.default.createElement(
-          Button,
-          {
-            onClick: addSplit,
-            leftIcon: /* @__PURE__ */ import_react22.default.createElement(Scissors_default, { size: 14 }),
-            variant: "secondary" /* secondary */
-          },
-          "Split"
-        ) : /* @__PURE__ */ import_react22.default.createElement(
-          Button,
+          ))
+        ), /* @__PURE__ */ import_react28.default.createElement(
+          "div",
           {
-            onClick: removeSplit,
-            leftIcon: /* @__PURE__ */ import_react22.default.createElement(Link_default, { size: 14 }),
-            variant: "secondary" /* secondary */
+            className: (0, import_classnames14.default)(
+              `${className}__splits`,
+              `${className}__content-panel`,
+              purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
+            )
           },
-          "Merge"
-        ))),
-        /* @__PURE__ */ import_react22.default.createElement(
+          /* @__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(
+            "div",
+            {
+              className: `${className}__table-cell--split-entry`,
+              key: `split-${index}`
+            },
+            /* @__PURE__ */ import_react28.default.createElement(
+              Input,
+              {
+                type: "text",
+                name: `split-${index}${asListItem ? "-li" : ""}`,
+                disabled: index === 0,
+                onChange: updateAmounts(index),
+                value: split.inputValue,
+                onBlur,
+                isInvalid: split.amount < 0,
+                errorMessage: "Negative values are not allowed"
+              }
+            ),
+            /* @__PURE__ */ import_react28.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_react28.default.createElement(
+              Button,
+              {
+                onClick: () => removeSplit(index),
+                rightIcon: /* @__PURE__ */ import_react28.default.createElement(Link_default, { size: 14 }),
+                variant: "secondary" /* secondary */
+              },
+              "Merge"
+            )
+          ))), /* @__PURE__ */ import_react28.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ import_react28.default.createElement(
+            TextButton,
+            {
+              onClick: addSplit,
+              disabled: rowState.splits.length > 5
+            },
+            "Add new split"
+          ) : /* @__PURE__ */ import_react28.default.createElement(
+            Button,
+            {
+              onClick: addSplit,
+              rightIcon: /* @__PURE__ */ import_react28.default.createElement(Scissors_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(
           InputGroup,
           {
             className: `${className}__description`,
-            name: "description",
-            label: "Description"
+            name: "description"
           },
-          /* @__PURE__ */ import_react22.default.createElement(Textarea, { name: "description", placeholder: "Enter description" })
+          /* @__PURE__ */ import_react28.default.createElement(Textarea, { name: "description", placeholder: "Add description" })
         ),
-        /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react22.default.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem ? /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ import_react22.default.createElement(
+        /* @__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(
           SubmitButton,
           {
             onClick: () => {
@@ -1927,134 +2519,62 @@ var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
   }
 );
 
-// src/components/Pill/Pill.tsx
-var import_react23 = __toESM(require("react"));
-var Pill = ({ children }) => /* @__PURE__ */ import_react23.default.createElement("span", { className: "Layer__pill" }, children);
-
-// src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_classnames9 = __toESM(require("classnames"));
-var import_date_fns4 = require("date-fns");
-var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
-var BankTransactionListItem = ({
-  dateFormat: dateFormat2,
-  bankTransaction,
-  isOpen,
-  toggleOpen,
-  editable
+// src/components/BankTransactionRow/SplitTooltipDetails.tsx
+var import_react29 = __toESM(require("react"));
+var SplitTooltipDetails = ({
+  classNamePrefix,
+  category
 }) => {
-  const expandedRowRef = (0, import_react24.useRef)(null);
-  const [removed, setRemoved] = (0, import_react24.useState)(false);
-  const { categorize: categorizeBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react24.useState)(
-    bankTransaction.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions[0] : void 0
-  );
-  const save = () => {
-    if (isOpen && expandedRowRef?.current) {
-      expandedRowRef?.current?.save();
-      toggleOpen(bankTransaction.id);
-      return;
-    }
-    categorizeBankTransaction2(bankTransaction.id, {
-      type: "Category",
-      category: {
-        type: "StableName",
-        stable_name: selectedCategory?.stable_name || selectedCategory?.category || ""
-      }
-    });
-  };
-  if (removed) {
-    return null;
+  if (!category.entries) {
+    return;
   }
-  const className = "Layer__bank-transaction-list-item";
-  const openClassName = isOpen ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames9.default)(
-    className,
-    bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    isOpen ? openClassName : ""
-  );
-  return /* @__PURE__ */ import_react24.default.createElement("li", { className: rowClassName }, /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__heading-date` }, (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(bankTransaction.date), dateFormat2)), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__body__name` }, bankTransaction.counterparty_name), /* @__PURE__ */ import_react24.default.createElement(
-    "span",
-    {
-      className: `${className}__amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
-    },
-    isCredit(bankTransaction) ? "+$" : " $",
-    centsToDollars(bankTransaction.amount)
-  ), /* @__PURE__ */ import_react24.default.createElement(
-    "div",
-    {
-      onClick: () => toggleOpen(bankTransaction.id),
-      className: "Layer__bank-transaction-row__expand-button"
-    },
-    /* @__PURE__ */ import_react24.default.createElement(
-      ChevronDown_default,
-      {
-        className: `Layer__chevron ${isOpen ? "Layer__chevron__up" : "Layer__chevron__down"}`
-      }
-    )
-  )), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react24.default.createElement(
-    ExpandedBankTransactionRow,
-    {
-      ref: expandedRowRef,
-      bankTransaction,
-      close: () => toggleOpen(bankTransaction.id),
-      isOpen,
-      asListItem: true,
-      submitBtnText: editable ? "Approve" : "Save"
-    }
-  )), /* @__PURE__ */ import_react24.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react24.default.createElement(
-    CategoryMenu,
-    {
-      bankTransaction,
-      name: `category-${bankTransaction.id}`,
-      value: selectedCategory,
-      onChange: setSelectedCategory,
-      disabled: bankTransaction.processing
-    }
-  ) : null, !editable ? /* @__PURE__ */ import_react24.default.createElement(Pill, null, bankTransaction?.category?.display_name) : null, editable && /* @__PURE__ */ import_react24.default.createElement(
-    SubmitButton,
-    {
-      onClick: () => {
-        if (!bankTransaction.processing) {
-          save();
-        }
-      },
-      className: "Layer__bank-transaction__submit-btn",
-      processing: bankTransaction.processing,
-      error: bankTransaction.error,
-      iconOnly: true
-    }
-  )));
+  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))))));
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_react25 = __toESM(require("react"));
-var import_classnames10 = __toESM(require("classnames"));
-var import_date_fns5 = require("date-fns");
-var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
+var import_classnames15 = __toESM(require("classnames"));
+var import_date_fns7 = require("date-fns");
+var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
+var extractDescriptionForSplit = (category) => {
+  if (!category.entries) {
+    return "";
+  }
+  return category.entries.map((c) => c.category.display_name).join(", ");
+};
+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 BankTransactionRow = ({
-  dateFormat: dateFormat2,
+  dateFormat,
   bankTransaction,
-  isOpen,
-  toggleOpen,
   editable
 }) => {
-  const expandedRowRef = (0, import_react25.useRef)(null);
-  const [removed, setRemoved] = (0, import_react25.useState)(false);
-  const { categorize: categorizeBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react25.useState)(
-    bankTransaction.categorization_flow?.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions[0] : void 0
+  const expandedRowRef = (0, import_react30.useRef)(null);
+  const [removed, setRemoved] = (0, import_react30.useState)(false);
+  const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
+  const [selectedCategory, setSelectedCategory] = (0, import_react30.useState)(
+    getDefaultSelectedCategory(bankTransaction)
   );
+  const [open, setOpen] = (0, import_react30.useState)(false);
+  const toggleOpen = () => setOpen(!open);
   const save = () => {
-    if (isOpen && expandedRowRef?.current) {
+    if (open && expandedRowRef?.current) {
       expandedRowRef?.current?.save();
-      toggleOpen(bankTransaction.id);
+      setOpen(false);
+      return;
+    }
+    if (!selectedCategory) {
+      return;
+    }
+    if (selectedCategory.type === "match") {
+      matchBankTransaction2(bankTransaction.id, selectedCategory.payload.id);
       return;
     }
     categorizeBankTransaction2(bankTransaction.id, {
       type: "Category",
       category: {
         type: "StableName",
-        stable_name: selectedCategory?.stable_name || selectedCategory?.category || ""
+        stable_name: selectedCategory?.payload.stable_name || ""
       }
     });
   };
@@ -2062,13 +2582,13 @@ var BankTransactionRow = ({
     return null;
   }
   const className = "Layer__bank-transaction-row";
-  const openClassName = isOpen ? `${className}--expanded` : "";
-  const rowClassName = (0, import_classnames10.default)(
+  const openClassName = open ? `${className}--expanded` : "";
+  const rowClassName = (0, import_classnames15.default)(
     className,
     bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
-    isOpen ? openClassName : ""
+    open ? openClassName : ""
   );
-  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement(
     "tr",
     {
       className: rowClassName,
@@ -2078,8 +2598,8 @@ var BankTransactionRow = ({
         }
       }
     },
-    /* @__PURE__ */ import_react25.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(bankTransaction.date), dateFormat2))),
-    /* @__PURE__ */ import_react25.default.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__tx-col" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react25.default.createElement(
+    /* @__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,
       {
         as: "span",
@@ -2089,9 +2609,9 @@ var BankTransactionRow = ({
           contentClassName: "Layer__bank-transactions__tx-tooltip"
         }
       },
-      bankTransaction.counterparty_name
+      bankTransaction.counterparty_name ?? bankTransaction.description
     ))),
-    /* @__PURE__ */ import_react25.default.createElement("td", { className: "Layer__table-cell Layer__bank-transactions__account-col" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react25.default.createElement(
+    /* @__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,
       {
         as: "span",
@@ -2100,82 +2620,265 @@ var BankTransactionRow = ({
       },
       bankTransaction.account_name ?? ""
     ))),
-    /* @__PURE__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement(
       "td",
       {
-        className: `Layer__table-cell Layer__table-cell__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
+        className: `Layer__table-cell Layer__table-cell__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
       },
-      /* @__PURE__ */ import_react25.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit2(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+      /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
     ),
-    /* @__PURE__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react30.default.createElement(
       "td",
       {
-        className: (0, import_classnames10.default)(
-          "Layer__table-cell",
-          "Layer__table-cell__category-col",
-          `${className}__actions-cell`,
-          `${className}__actions-cell--${isOpen ? "open" : "close"}`
-        )
-      },
-      /* @__PURE__ */ import_react25.default.createElement(
-        "span",
-        {
-          className: `${className}__actions-container Layer__table-cell-content`
-        },
-        editable && !isOpen ? /* @__PURE__ */ import_react25.default.createElement(
-          CategoryMenu,
-          {
-            bankTransaction,
-            name: `category-${bankTransaction.id}`,
-            value: selectedCategory,
-            onChange: setSelectedCategory,
-            disabled: bankTransaction.processing
-          }
-        ) : null,
-        !editable && !isOpen ? /* @__PURE__ */ import_react25.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction?.category?.display_name) : null,
-        editable || isOpen ? /* @__PURE__ */ import_react25.default.createElement(
-          SubmitButton,
-          {
-            onClick: () => {
-              if (!bankTransaction.processing) {
-                save();
-              }
-            },
-            className: "Layer__bank-transaction__submit-btn",
-            processing: bankTransaction.processing,
-            error: bankTransaction.error,
-            active: isOpen
-          },
-          editable ? "Approve" : "Save"
-        ) : null,
-        /* @__PURE__ */ import_react25.default.createElement(
-          "div",
-          {
-            onClick: () => toggleOpen(bankTransaction.id),
-            className: "Layer__bank-transaction-row__expand-button"
-          },
-          /* @__PURE__ */ import_react25.default.createElement(
-            ChevronDown_default,
-            {
-              className: `Layer__chevron ${isOpen ? "Layer__chevron__up" : "Layer__chevron__down"}`
-            }
-          )
-        )
-      )
+        className: (0, import_classnames15.default)(
+          "Layer__table-cell",
+          "Layer__table-cell__category-col",
+          `${className}__actions-cell`,
+          `${className}__actions-cell--${open ? "open" : "close"}`
+        )
+      },
+      /* @__PURE__ */ import_react30.default.createElement(
+        "span",
+        {
+          className: `${className}__actions-container Layer__table-cell-content`
+        },
+        editable && !open ? /* @__PURE__ */ import_react30.default.createElement(
+          CategorySelect,
+          {
+            bankTransaction,
+            name: `category-${bankTransaction.id}`,
+            value: selectedCategory,
+            onChange: setSelectedCategory,
+            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(
+          Badge,
+          {
+            icon: /* @__PURE__ */ import_react30.default.createElement(Scissors_default, { size: 11 }),
+            tooltip: /* @__PURE__ */ import_react30.default.createElement(
+              SplitTooltipDetails,
+              {
+                classNamePrefix: className,
+                category: bankTransaction.category
+              }
+            )
+          },
+          "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(
+          MatchBadge,
+          {
+            classNamePrefix: className,
+            bankTransaction,
+            dateFormat
+          }
+        ), /* @__PURE__ */ import_react30.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(
+          SubmitButton,
+          {
+            onClick: () => {
+              if (!bankTransaction.processing) {
+                save();
+              }
+            },
+            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(
+          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" })
+          }
+        )
+      )
+    )
+  ), /* @__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(
+    ExpandedBankTransactionRow,
+    {
+      ref: expandedRowRef,
+      bankTransaction,
+      isOpen: open
+    }
+  ))));
+};
+
+// src/components/BankTransactionListItem/Assignment.tsx
+var import_react31 = __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(
+      MatchBadge,
+      {
+        classNamePrefix: "Layer__bank-transaction-list-item",
+        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)(
+      (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(
+      Badge,
+      {
+        icon: /* @__PURE__ */ import_react31.default.createElement(Scissors_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ import_react31.default.createElement(
+          SplitTooltipDetails,
+          {
+            classNamePrefix: "Layer__bank-transaction-list-item",
+            category: bankTransaction.category
+          }
+        )
+      },
+      "Split"
+    ), /* @__PURE__ */ import_react31.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);
+};
+
+// src/components/BankTransactionListItem/BankTransactionListItem.tsx
+var import_classnames16 = __toESM(require("classnames"));
+var import_date_fns9 = require("date-fns");
+var isCredit2 = ({ direction }) => direction === "CREDIT" /* CREDIT */;
+var BankTransactionListItem = ({
+  dateFormat,
+  bankTransaction,
+  editable
+}) => {
+  const expandedRowRef = (0, import_react32.useRef)(null);
+  const [removed, setRemoved] = (0, import_react32.useState)(false);
+  const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
+  const [selectedCategory, setSelectedCategory] = (0, import_react32.useState)(
+    getDefaultSelectedCategory(bankTransaction)
+  );
+  const [open, setOpen] = (0, import_react32.useState)(false);
+  const toggleOpen = () => setOpen(!open);
+  const save = () => {
+    if (open && expandedRowRef?.current) {
+      expandedRowRef?.current?.save();
+      setOpen(false);
+      return;
+    }
+    if (!selectedCategory) {
+      return;
+    }
+    if (selectedCategory.type === "match") {
+      matchBankTransaction2(bankTransaction.id, selectedCategory.payload.id);
+      return;
+    }
+    categorizeBankTransaction2(bankTransaction.id, {
+      type: "Category",
+      category: {
+        type: "StableName",
+        stable_name: selectedCategory?.payload.stable_name || ""
+      }
+    });
+  };
+  if (removed) {
+    return null;
+  }
+  const className = "Layer__bank-transaction-list-item";
+  const openClassName = open ? `${className}--expanded` : "";
+  const rowClassName = (0, import_classnames16.default)(
+    className,
+    bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
+    open ? openClassName : ""
+  );
+  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(
+    "div",
+    {
+      onClick: toggleOpen,
+      className: "Layer__bank-transaction-row__expand-button"
+    },
+    /* @__PURE__ */ import_react32.default.createElement(
+      ChevronDown_default,
+      {
+        className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
+      }
     )
-  ), /* @__PURE__ */ import_react25.default.createElement("tr", null, /* @__PURE__ */ import_react25.default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ import_react25.default.createElement(
+  )), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react32.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
       bankTransaction,
-      close: () => toggleOpen(bankTransaction.id),
-      isOpen
+      close: toggleOpen,
+      isOpen: open,
+      asListItem: true,
+      submitBtnText: editable ? "Approve" : "Save"
     }
-  ))));
+  )), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react32.default.createElement(
+    CategorySelect,
+    {
+      bankTransaction,
+      name: `category-${bankTransaction.id}`,
+      value: selectedCategory,
+      onChange: setSelectedCategory,
+      disabled: bankTransaction.processing
+    }
+  ) : null, !editable ? /* @__PURE__ */ import_react32.default.createElement(Assignment, { bankTransaction }) : null, editable && /* @__PURE__ */ import_react32.default.createElement(
+    SubmitButton,
+    {
+      onClick: () => {
+        if (!bankTransaction.processing) {
+          save();
+        }
+      },
+      className: "Layer__bank-transaction__submit-btn",
+      processing: bankTransaction.processing,
+      error: bankTransaction.error,
+      iconOnly: true
+    }
+  )));
 };
 
 // src/components/Container/Container.tsx
-var import_react26 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
+
+// src/config/theme.ts
+var SHADES = {
+  50: { s: 1, l: 98 },
+  100: { s: 1, l: 96 },
+  200: { s: 1, l: 94 },
+  300: { s: 2, l: 92 },
+  500: { s: 5, l: 53 },
+  600: { s: 7, l: 40 },
+  700: { s: 9, l: 27 },
+  800: { s: 12, l: 20 },
+  1e3: { s: 20, l: 7 }
+};
+var COLORS = {
+  dark: {
+    h: 0,
+    s: 0,
+    l: 7
+  },
+  light: {
+    h: 0,
+    s: 0,
+    l: 100
+  }
+};
 
 // src/utils/colors.ts
 var parseStylesFromThemeConfig = (theme) => {
@@ -2231,6 +2934,47 @@ var parseColorFromTheme = (colorName, color) => {
     return {};
   }
 };
+var parseColorFromThemeToHsl = (color) => {
+  if (!color) {
+    return;
+  }
+  try {
+    if ("h" in color && "s" in color && "l" in color) {
+      return {
+        h: Number(color.h),
+        s: Number(color.s),
+        l: Number(color.l)
+      };
+    }
+    if ("r" in color && "g" in color && "b" in color) {
+      const { h, s, l } = rgbToHsl(color);
+      return {
+        h,
+        s,
+        l
+      };
+    }
+    if ("hex" in color) {
+      const rgb = hexToRgb(color.hex);
+      if (!rgb) {
+        return void 0;
+      }
+      const { h, s, l } = rgbToHsl({
+        r: rgb.r.toString(),
+        g: rgb.g.toString(),
+        b: rgb.b.toString()
+      });
+      return {
+        h,
+        s,
+        l
+      };
+    }
+    return;
+  } catch (_err) {
+    return;
+  }
+};
 var rgbToHsl = (color) => {
   let r = Number(color.r);
   let g = Number(color.g);
@@ -2261,42 +3005,113 @@ var hexToRgb = (hex) => {
     b: values[2]
   };
 };
+var buildColorsPalette = (theme) => {
+  const darkColor = parseColorFromThemeToHsl(theme?.colors?.dark) ?? COLORS.dark;
+  const lightColor = parseColorFromThemeToHsl(theme?.colors?.light) ?? COLORS.light;
+  return {
+    50: buildColorShade(50, darkColor),
+    100: buildColorShade(100, darkColor),
+    200: buildColorShade(200, darkColor),
+    300: buildColorShade(300, darkColor),
+    400: {
+      hsl: lightColor,
+      rgb: hslToRgb(lightColor),
+      hex: hslToHex(lightColor)
+    },
+    500: buildColorShade(500, darkColor),
+    600: buildColorShade(600, darkColor),
+    700: buildColorShade(700, darkColor),
+    800: buildColorShade(800, darkColor),
+    900: {
+      hsl: darkColor,
+      rgb: hslToRgb(darkColor),
+      hex: hslToHex(darkColor)
+    },
+    1e3: buildColorShade(1e3, darkColor)
+  };
+};
+var buildColorShade = (shade, darkColorHsl) => {
+  const hsl = { h: darkColorHsl.h, ...SHADES[shade] };
+  const rgb = hslToRgb(hsl);
+  const hex = hslToHex(hsl);
+  return { hsl, rgb, hex };
+};
+var hueToRgb = (p, q, t) => {
+  if (t < 0)
+    t += 1;
+  if (t > 1)
+    t -= 1;
+  if (t < 1 / 6)
+    return p + (q - p) * 6 * t;
+  if (t < 1 / 2)
+    return q;
+  if (t < 2 / 3)
+    return p + (q - p) * (2 / 3 - t) * 6;
+  return p;
+};
+var hslToRgb = (hsl) => {
+  let r, g, b;
+  let l = hsl.l / 100;
+  let s = hsl.s / 100;
+  if (hsl.s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hueToRgb(p, q, hsl.h + 1 / 3);
+    g = hueToRgb(p, q, hsl.h);
+    b = hueToRgb(p, q, hsl.h - 1 / 3);
+  }
+  return {
+    r: Math.round(r * 255),
+    g: Math.round(g * 255),
+    b: Math.round(b * 255)
+  };
+};
+var hslToHex = (hsl) => {
+  const l = hsl.l / 100;
+  const s = hsl.s;
+  const a = s * Math.min(l, 1 - l) / 100;
+  const f = (n) => {
+    const k = (n + hsl.h / 30) % 12;
+    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
 
 // src/components/Container/Container.tsx
-var import_classnames11 = __toESM(require("classnames"));
-var Container = ({
-  name,
-  className,
-  children,
-  asWidget
-}) => {
-  const baseClassName = (0, import_classnames11.default)(
-    "Layer__component Layer__component-container",
-    `Layer__${name}`,
-    asWidget ? "Layer__component--as-widget" : "",
-    className
-  );
-  const { theme } = useLayerContext();
-  const styles = parseStylesFromThemeConfig(theme);
-  return /* @__PURE__ */ import_react26.default.createElement("div", { className: baseClassName, style: { ...styles } }, children);
-};
+var import_classnames17 = __toESM(require("classnames"));
+var Container = (0, import_react33.forwardRef)(
+  ({ name, className, children, asWidget }, ref) => {
+    const baseClassName = (0, import_classnames17.default)(
+      "Layer__component Layer__component-container",
+      `Layer__${name}`,
+      asWidget ? "Layer__component--as-widget" : "",
+      className
+    );
+    const { theme } = useLayerContext();
+    const styles = parseStylesFromThemeConfig(theme);
+    return /* @__PURE__ */ import_react33.default.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
+  }
+);
 
 // src/components/Container/Header.tsx
-var import_react27 = __toESM(require("react"));
-var import_classnames12 = __toESM(require("classnames"));
-var Header = (0, import_react27.forwardRef)(
+var import_react34 = __toESM(require("react"));
+var import_classnames18 = __toESM(require("classnames"));
+var Header = (0, import_react34.forwardRef)(
   ({ className, children, style }, ref) => {
-    const baseClassName = (0, import_classnames12.default)("Layer__component-header", className);
-    return /* @__PURE__ */ import_react27.default.createElement("header", { ref, className: baseClassName, style }, children);
+    const baseClassName = (0, import_classnames18.default)("Layer__component-header", className);
+    return /* @__PURE__ */ import_react34.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
 // src/components/DataState/DataState.tsx
-var import_react28 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 
 // src/icons/AlertOctagon.tsx
-var React35 = __toESM(require("react"));
-var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createElement(
+var React43 = __toESM(require("react"));
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React43.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2306,7 +3121,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createEl
     width: size,
     height: size
   },
-  /* @__PURE__ */ React35.createElement(
+  /* @__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",
@@ -2315,7 +3130,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React35.createElement(
+  /* @__PURE__ */ React43.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -2324,68 +3139,281 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React35.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React35.createElement(
+  /* @__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 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 }));
+    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 }));
+  }
+};
+var DataState = ({
+  status,
+  title,
+  description,
+  onRefresh,
+  isLoading
+}) => {
+  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react35.default.createElement(
+    Text,
+    {
+      as: "span",
+      size: "lg" /* lg */,
+      weight: "bold" /* bold */,
+      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(
+    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 }),
+      onClick: onRefresh,
+      disabled: isLoading
+    },
+    "Refresh"
+  )));
+};
+
+// src/components/Loader/Loader.tsx
+var import_react36 = __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);
+};
+
+// 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);
+};
+
+// src/hooks/usePagination/usePagination.ts
+var DOTS = "...";
+var usePagination = ({
+  totalCount,
+  pageSize,
+  siblingCount = 1,
+  currentPage
+}) => {
+  const paginationRange = (0, import_react37.useMemo)(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(
+      currentPage + siblingCount,
+      totalPageCount
+    );
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount = 3 + 2 * siblingCount;
+      let leftRange = range(1, leftItemCount);
+      return [...leftRange, DOTS, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = 3 + 2 * siblingCount;
+      let rightRange = range(
+        totalPageCount - rightItemCount + 1,
+        totalPageCount
+      );
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+  }, [totalCount, pageSize, siblingCount, currentPage]);
+  return paginationRange;
+};
+
+// src/icons/ChevronLeft.tsx
+var React47 = __toESM(require("react"));
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React47.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React47.createElement(
+    "path",
+    {
+      d: "M11.25 13.5L6.75 9L11.25 4.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var ChevronLeft_default = ChevronLeft;
+
+// src/icons/ChevronRight.tsx
+var React48 = __toESM(require("react"));
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React48.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props
+  },
+  /* @__PURE__ */ React48.createElement(
     "path",
     {
-      d: "M9 12H9.0075",
+      d: "M6.75 13.5L11.25 9L6.75 4.5",
       stroke: "currentColor",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
   )
 );
-var AlertOctagon_default = AlertOctagon;
+var ChevronRight_default = ChavronRight;
 
-// src/components/DataState/DataState.tsx
-var getIcon = (status) => {
-  switch (status) {
-    case "failed" /* failed */:
-      return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react28.default.createElement(AlertOctagon_default, { size: 12 }));
-    default:
-      return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react28.default.createElement(CheckCircle_default, { size: 12 }));
-  }
-};
-var DataState = ({
-  status,
-  title,
-  description,
-  onRefresh,
-  isLoading
+// src/components/Pagination/Pagination.tsx
+var import_classnames19 = __toESM(require("classnames"));
+var Pagination = ({
+  onPageChange,
+  totalCount,
+  siblingCount = 1,
+  currentPage,
+  pageSize
 }) => {
-  return /* @__PURE__ */ import_react28.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react28.default.createElement(
-    Text,
+  const paginationRange = usePagination({
+    currentPage,
+    totalCount,
+    siblingCount,
+    pageSize
+  });
+  if (!paginationRange) {
+    return;
+  }
+  if (currentPage === 0 || paginationRange.length < 2) {
+    return;
+  }
+  let lastPage = paginationRange[paginationRange.length - 1];
+  return /* @__PURE__ */ import_react38.default.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ import_react38.default.createElement(
+    "li",
     {
-      as: "span",
-      size: "lg" /* lg */,
-      weight: "bold" /* bold */,
-      className: "Layer__data-state__title"
+      className: (0, import_classnames19.default)(
+        "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--previous",
+        {
+          disabled: currentPage === 1
+        }
+      ),
+      onClick: () => onPageChange(currentPage - 1)
     },
-    title
-  ), /* @__PURE__ */ import_react28.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react28.default.createElement(
-    Button,
+    /* @__PURE__ */ import_react38.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_react38.default.createElement(
+      "li",
+      {
+        className: (0, import_classnames19.default)("Layer__pagination-item", {
+          selected: pageNumber === currentPage
+        }),
+        onClick: () => {
+          if (typeof pageNumber === "number") {
+            onPageChange(pageNumber);
+          }
+        }
+      },
+      pageNumber
+    );
+  }), /* @__PURE__ */ import_react38.default.createElement(
+    "li",
     {
-      variant: "secondary" /* secondary */,
-      rightIcon: isLoading ? /* @__PURE__ */ import_react28.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react28.default.createElement(RefreshCcw_default, { size: 12 }),
-      onClick: onRefresh,
-      disabled: isLoading
+      className: (0, import_classnames19.default)(
+        "Layer__pagination-item Layer__pagination-arrow Layer__pagination-arrow--next",
+        {
+          disabled: currentPage === lastPage
+        }
+      ),
+      onClick: () => onPageChange(currentPage + 1)
     },
-    "Refresh"
-  )));
-};
-
-// src/components/Loader/Loader.tsx
-var import_react29 = __toESM(require("react"));
-var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react29.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
+    /* @__PURE__ */ import_react38.default.createElement(ChevronRight_default, { size: 12 })
+  ));
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
 var COMPONENT_NAME = "bank-transactions";
-var dateFormat = "LLL d, yyyy";
 var CategorizedCategories = [
   "CATEGORIZED" /* CATEGORIZED */,
   "JOURNALING" /* JOURNALING */,
-  "SPLIT" /* SPLIT */
+  "SPLIT" /* SPLIT */,
+  "MATCHED" /* MATCHED */
 ];
 var ReviewCategories = [
   "READY_FOR_INPUT" /* READY_FOR_INPUT */,
@@ -2399,18 +3427,27 @@ var filterVisibility = (display) => (bankTransaction) => {
   return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
 };
 var BankTransactions = ({
-  asWidget = false
+  asWidget = false,
+  pageSize = 15
 }) => {
-  const [display, setDisplay] = (0, import_react30.useState)("review" /* review */);
+  const [display, setDisplay] = (0, import_react39.useState)("review" /* review */);
+  const [currentPage, setCurrentPage] = (0, import_react39.useState)(1);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
-  const bankTransactions = data?.filter(filterVisibility(display));
-  const onCategorizationDisplayChange = (event) => setDisplay(
-    event.target.value === "categorized" /* categorized */ ? "categorized" /* categorized */ : "review" /* review */
-  );
-  const [openRows, setOpenRows] = (0, import_react30.useState)({});
-  const toggleOpen = (id) => setOpenRows({ ...openRows, [id]: !openRows[id] });
-  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react30.useState)(0);
-  const headerRef = useElementSize((_el, _en, size) => {
+  const bankTransactionsByFilter = data?.filter(filterVisibility(display));
+  const bankTransactions = (0, import_react39.useMemo)(() => {
+    const firstPageIndex = (currentPage - 1) * pageSize;
+    const lastPageIndex = firstPageIndex + pageSize;
+    return bankTransactionsByFilter?.slice(firstPageIndex, lastPageIndex);
+  }, [currentPage, bankTransactionsByFilter]);
+  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 containerRef = useElementSize((_el, _en, size) => {
     if (size?.height && size?.height >= 90) {
       const newShift = -Math.floor(size.height / 2) + 6;
       if (newShift !== shiftStickyHeader) {
@@ -2419,17 +3456,21 @@ var BankTransactions = ({
     } else if (size?.height > 0 && shiftStickyHeader !== 0) {
       setShiftStickyHeader(0);
     }
+    if (size.width > 700 && listView) {
+      setListView(false);
+    } else if (size.width <= 700 && !listView) {
+      setListView(true);
+    }
   });
   const editable = display === "review" /* review */;
-  return /* @__PURE__ */ import_react30.default.createElement(Container, { name: COMPONENT_NAME, asWidget }, /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement(Container, { name: COMPONENT_NAME, asWidget, ref: containerRef }, /* @__PURE__ */ import_react39.default.createElement(
     Header,
     {
-      ref: headerRef,
       className: "Layer__bank-transactions__header",
       style: { top: shiftStickyHeader }
     },
-    /* @__PURE__ */ import_react30.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-    /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+    /* @__PURE__ */ import_react39.default.createElement(
       Toggle,
       {
         name: "bank-transaction-display",
@@ -2441,35 +3482,31 @@ var BankTransactions = ({
         onChange: onCategorizationDisplayChange
       }
     )
-  ), /* @__PURE__ */ import_react30.default.createElement(
+  ), !listView && /* @__PURE__ */ import_react39.default.createElement(
     "table",
     {
       width: "100%",
-      className: "Layer__table Layer__bank-transactions__table"
+      className: "Layer__table Layer__bank-transactions__table with-cell-separators"
     },
-    /* @__PURE__ */ import_react30.default.createElement("thead", null, /* @__PURE__ */ import_react30.default.createElement("tr", null, /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react30.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-    /* @__PURE__ */ import_react30.default.createElement("tbody", null, !isLoading && bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react30.default.createElement(
+    /* @__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,
       {
         key: bankTransaction.id,
-        dateFormat,
+        dateFormat: DATE_FORMAT,
         bankTransaction,
-        isOpen: openRows[bankTransaction.id],
-        toggleOpen,
         editable
       }
     )))
-  ), isLoading && !bankTransactions ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react30.default.createElement(Loader2, null)) : null, !isLoading && /* @__PURE__ */ import_react30.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map((bankTransaction) => /* @__PURE__ */ import_react30.default.createElement(
+  ), 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,
+      dateFormat: DATE_FORMAT,
       bankTransaction,
-      isOpen: openRows[bankTransaction.id],
-      toggleOpen,
       editable
     }
-  ))), !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react30.default.createElement(
+  ))) : 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,
     {
       status: "allDone" /* allDone */,
@@ -2478,7 +3515,7 @@ var BankTransactions = ({
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  )) : null, !isLoading && error ? /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react30.default.createElement(
+  )) : null, !isLoading && error ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react39.default.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -2487,11 +3524,19 @@ var BankTransactions = ({
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  )) : null);
+  )) : 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)
+    }
+  )));
 };
 
 // src/components/Hello/Hello.tsx
-var import_react31 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var import_swr3 = __toESM(require("swr"));
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -2500,38 +3545,50 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ import_react31.default.createElement(import_react31.default.Fragment, null, /* @__PURE__ */ import_react31.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, /* @__PURE__ */ import_react40.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react39 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react32 = require("react");
-var import_date_fns6 = require("date-fns");
+var import_react41 = require("react");
+var import_date_fns10 = require("date-fns");
 var import_swr4 = __toESM(require("swr"));
-var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate } = {
-  startDate: (0, import_date_fns6.startOfMonth)(/* @__PURE__ */ new Date()),
-  endDate: (0, import_date_fns6.endOfMonth)(/* @__PURE__ */ new Date())
+var useProfitAndLoss = ({
+  startDate: initialStartDate,
+  endDate: initialEndDate,
+  tagFilter,
+  reportingBasis
+} = {
+  startDate: (0, import_date_fns10.startOfMonth)(/* @__PURE__ */ new Date()),
+  endDate: (0, import_date_fns10.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react32.useState)(
-    initialStartDate || (0, import_date_fns6.startOfMonth)(Date.now())
+  const [startDate, setStartDate] = (0, import_react41.useState)(
+    initialStartDate || (0, import_date_fns10.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react32.useState)(
-    initialEndDate || (0, import_date_fns6.endOfMonth)(Date.now())
+  const [endDate, setEndDate] = (0, import_react41.useState)(
+    initialEndDate || (0, import_date_fns10.endOfMonth)(Date.now())
   );
   const {
     data: rawData,
     isLoading,
-    error: rawError
+    isValidating,
+    error: rawError,
+    mutate
   } = (0, import_swr4.default)(
-    businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}`,
+    businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
+      ","
+    )}-${reportingBasis}`,
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
-        startDate: (0, import_date_fns6.formatISO)(startDate),
-        endDate: (0, import_date_fns6.formatISO)(endDate)
+        startDate: (0, import_date_fns10.formatISO)(startDate),
+        endDate: (0, import_date_fns10.formatISO)(endDate),
+        tagKey: tagFilter?.key,
+        tagValues: tagFilter?.values?.join(","),
+        reportingBasis
       }
     })
   );
@@ -2543,20 +3600,28 @@ var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate }
     newStartDate && setStartDate(newStartDate);
     newEndDate && setEndDate(newEndDate);
   };
+  const refetch = () => {
+    mutate();
+  };
   return {
     data,
     isLoading,
+    isValidating,
     error: error || rawError,
     dateRange: { startDate, endDate },
+    refetch,
     changeDateRange
   };
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react34 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
+
+// src/utils/format.ts
+var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react33 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -2567,134 +3632,160 @@ var Indicator = ({
   if (!className?.match(/selected/)) {
     return null;
   }
-  const {
-    x: animateTo = 0,
-    y = 0,
-    width = 0,
-    height = 0
-  } = "x" in viewBox ? viewBox : emptyViewBox;
+  const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
   const boxWidth = width * 2 + 4;
   const multiplier = 1.5;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
+      rx: "8",
+      ry: "8",
       style: {
         width: `${boxWidth * multiplier}px`,
         // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
-        y: y + height
+        y: 5,
+        borderRadius: 8,
+        height: "calc(100% - 10px)"
       }
     }
   );
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_date_fns7 = require("date-fns");
+var import_date_fns11 = require("date-fns");
 var import_recharts = require("recharts");
 var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
-  const { changeDateRange, dateRange } = (0, import_react34.useContext)(ProfitAndLoss.Context);
-  const thisMonth = (0, import_date_fns7.startOfMonth)(Date.now());
+  const { getColor } = useLayerContext();
+  const { changeDateRange, dateRange } = (0, import_react43.useContext)(ProfitAndLoss.Context);
+  const thisMonth = (0, import_date_fns11.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
   const monthData = [];
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 11 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 11 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 11 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 11 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 10 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 10 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 10 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 10 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 9 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 9 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 9 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 9 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 8 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 8 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 8 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 8 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 7 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 7 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 7 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 7 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 6 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 6 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 6 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 6 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 5 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 5 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 5 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 5 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 4 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 4 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 4 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 4 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 3 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 3 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 3 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 3 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 2 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 2 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 2 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 2 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns7.startOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 1 })),
-      endDate: (0, import_date_fns7.endOfMonth)((0, import_date_fns7.sub)(thisMonth, { months: 1 }))
+      startDate: (0, import_date_fns11.startOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 1 })),
+      endDate: (0, import_date_fns11.endOfMonth)((0, import_date_fns11.sub)(thisMonth, { months: 1 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
       startDate: thisMonth,
-      endDate: (0, import_date_fns7.endOfMonth)(thisMonth)
+      endDate: (0, import_date_fns11.endOfMonth)(thisMonth)
     })?.data
   );
-  const getMonthName = (pnl) => pnl ? (0, import_date_fns7.format)((0, import_date_fns7.parseISO)(pnl.start_date), "LLL") : "";
+  const getMonthName = (pnl) => pnl ? (0, import_date_fns11.format)((0, import_date_fns11.parseISO)(pnl.start_date), "LLL") : "";
   const summarizePnL = (pnl) => ({
     name: getMonthName(pnl),
     revenue: pnl?.income.value || 0,
-    expenses: (pnl?.income.value || 0) - (pnl?.net_profit || 0),
-    selected: !!pnl && (0, import_date_fns7.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns7.parseISO)(pnl.end_date).getMonth() <= endSelectionMonth
+    expenses: Math.abs((pnl?.income.value || 0) - (pnl?.net_profit || 0)),
+    selected: !!pnl && (0, import_date_fns11.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns11.parseISO)(pnl.end_date).getMonth() <= endSelectionMonth
   });
   const onClick = ({ activeTooltipIndex }) => {
     const selection = monthData[activeTooltipIndex || -1];
     if (selection) {
       const { start_date: startDate, end_date: endDate } = selection;
       changeDateRange({
-        startDate: (0, import_date_fns7.parseISO)(startDate),
-        endDate: (0, import_date_fns7.parseISO)(endDate)
+        startDate: (0, import_date_fns11.parseISO)(startDate),
+        endDate: (0, import_date_fns11.parseISO)(endDate)
       });
     }
   };
-  const data = (0, import_react34.useMemo)(
+  const CustomTooltip = ({
+    active,
+    payload,
+    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 null;
+  };
+  const CustomizedCursor = (props) => {
+    const { x, y, width, height } = props;
+    return /* @__PURE__ */ import_react43.default.createElement(
+      import_recharts.Rectangle,
+      {
+        fill: getColor(100)?.hex ?? "#F5F4F3",
+        stroke: "none",
+        x,
+        y,
+        radius: 8,
+        width,
+        height: height + 24,
+        className: "Layer__chart__tooltip-cursor"
+      }
+    );
+  };
+  const data = (0, import_react43.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -2702,172 +3793,149 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react34.useState)(-1);
-  return /* @__PURE__ */ import_react34.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react34.default.createElement(
-    import_recharts.BarChart,
+  const [animateFrom, setAnimateFrom] = (0, import_react43.useState)(-1);
+  return /* @__PURE__ */ import_react43.default.createElement(
+    import_recharts.ResponsiveContainer,
     {
-      margin: { left: 24, right: 24, bottom: 24 },
-      data,
-      onClick,
-      barGap,
-      className: "Layer__profit-and-loss-chart"
+      className: "Layer__chart-container",
+      width: "100%",
+      height: "100%",
+      minHeight: 200
     },
-    /* @__PURE__ */ import_react34.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_recharts.Legend,
-      {
-        verticalAlign: "top",
-        align: "left",
-        payload: [
-          { value: "Income", type: "circle", id: "IncomeLegend" },
-          { value: "Expenses", type: "circle", id: "ExpensesLegend" }
-        ]
-      }
-    ),
-    /* @__PURE__ */ import_react34.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_recharts.Bar,
+    /* @__PURE__ */ import_react43.default.createElement(
+      import_recharts.BarChart,
       {
-        dataKey: "revenue",
-        barSize,
-        isAnimationActive: false,
-        radius: [barSize / 4, barSize / 4, 0, 0],
-        className: "Layer__profit-and-loss-chart__bar--income"
+        margin: { left: 12, right: 12, bottom: 12 },
+        data,
+        onClick,
+        barGap,
+        className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ import_react34.default.createElement(
-        import_recharts.LabelList,
+      /* @__PURE__ */ import_react43.default.createElement(
+        import_recharts.Tooltip,
         {
-          content: /* @__PURE__ */ import_react34.default.createElement(
-            Indicator,
-            {
-              animateFrom,
-              setAnimateFrom
-            }
-          )
+          wrapperClassName: "Layer__chart__tooltip-wrapper",
+          content: /* @__PURE__ */ import_react43.default.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ import_react43.default.createElement(CustomizedCursor, null)
         }
       ),
-      data.map((entry) => /* @__PURE__ */ import_react34.default.createElement(
-        import_recharts.Cell,
+      /* @__PURE__ */ import_react43.default.createElement(
+        import_recharts.CartesianGrid,
         {
-          key: entry.name,
-          className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+          vertical: false,
+          stroke: getColor(200)?.hex ?? "#fff",
+          strokeDasharray: "5 5"
         }
-      ))
-    ),
-    /* @__PURE__ */ import_react34.default.createElement(
-      import_recharts.Bar,
-      {
-        dataKey: "expenses",
-        barSize,
-        isAnimationActive: false,
-        radius: [barSize / 4, barSize / 4, 0, 0],
-        className: "Layer__profit-and-loss-chart__bar--expenses"
-      },
-      data.map((entry) => /* @__PURE__ */ import_react34.default.createElement(
-        import_recharts.Cell,
+      ),
+      /* @__PURE__ */ import_react43.default.createElement(
+        import_recharts.Legend,
         {
-          key: entry.name,
-          className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+          verticalAlign: "top",
+          align: "left",
+          wrapperStyle: { top: -24 },
+          payload: [
+            {
+              value: "Income",
+              type: "circle",
+              id: "IncomeLegend"
+            },
+            {
+              value: "Expenses",
+              type: "circle",
+              id: "ExpensesLegend"
+            }
+          ]
         }
-      ))
+      ),
+      /* @__PURE__ */ import_react43.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ import_react43.default.createElement(
+        import_recharts.Bar,
+        {
+          dataKey: "revenue",
+          barSize,
+          isAnimationActive: false,
+          radius: [barSize / 4, barSize / 4, 0, 0],
+          className: "Layer__profit-and-loss-chart__bar--income"
+        },
+        /* @__PURE__ */ import_react43.default.createElement(
+          import_recharts.LabelList,
+          {
+            content: /* @__PURE__ */ import_react43.default.createElement(
+              Indicator,
+              {
+                animateFrom,
+                setAnimateFrom
+              }
+            )
+          }
+        ),
+        data.map((entry) => /* @__PURE__ */ import_react43.default.createElement(
+          import_recharts.Cell,
+          {
+            key: entry.name,
+            className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+          }
+        ))
+      ),
+      /* @__PURE__ */ import_react43.default.createElement(
+        import_recharts.Bar,
+        {
+          dataKey: "expenses",
+          barSize,
+          isAnimationActive: false,
+          radius: [barSize / 4, barSize / 4, 0, 0],
+          className: "Layer__profit-and-loss-chart__bar--expenses"
+        },
+        data.map((entry) => /* @__PURE__ */ import_react43.default.createElement(
+          import_recharts.Cell,
+          {
+            key: entry.name,
+            className: entry.selected ? "Layer__profit-and-loss-chart__cell--selected" : ""
+          }
+        ))
+      )
     )
-  ));
+  );
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react35 = __toESM(require("react"));
-
-// src/icons/ChevronLeft.tsx
-var React42 = __toESM(require("react"));
-var ChevronLeft = ({
-  strokeColor,
-  size,
-  ...props
-}) => /* @__PURE__ */ React42.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size || 24,
-    height: size || 24,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React42.createElement(
-    "path",
-    {
-      stroke: strokeColor ?? "#000",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m15 18-6-6 6-6"
-    }
-  )
-);
-var ChevronLeft_default = ChevronLeft;
-
-// src/icons/ChevronRight.tsx
-var React43 = __toESM(require("react"));
-var ChavronRight = ({ size, ...props }) => /* @__PURE__ */ React43.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size || 24,
-    height: size || 24,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React43.createElement(
-    "path",
-    {
-      stroke: "#000",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m9 18 6-6-6-6"
-    }
-  )
-);
-var ChevronRight_default = ChavronRight;
-
-// src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_date_fns8 = require("date-fns");
+var import_react44 = __toESM(require("react"));
+var import_date_fns12 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react35.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react44.useContext)(ProfitAndLoss.Context);
   const date = dateRange.startDate;
-  const label = (0, import_date_fns8.format)(date, "LLLL y");
+  const label = (0, import_date_fns12.format)(date, "LLLL y");
   const change = (duration) => {
-    const newDate = (0, import_date_fns8.add)(date, duration);
+    const newDate = (0, import_date_fns12.add)(date, duration);
     changeDateRange({
-      startDate: (0, import_date_fns8.startOfMonth)(newDate),
-      endDate: (0, import_date_fns8.endOfMonth)(newDate)
+      startDate: (0, import_date_fns12.startOfMonth)(newDate),
+      endDate: (0, import_date_fns12.endOfMonth)(newDate)
     });
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react44.default.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ import_react35.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
         size: 18
       }
     )
-  ), /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react35.default.createElement(
+  ), /* @__PURE__ */ import_react44.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react44.default.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ import_react35.default.createElement(
+    /* @__PURE__ */ import_react44.default.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -2878,52 +3946,80 @@ var ProfitAndLossDatePicker = () => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react36 = __toESM(require("react"));
-var ProfitAndLossSummaries = () => {
-  const { data: storedData } = (0, import_react36.useContext)(ProfitAndLoss.Context);
+var import_react46 = __toESM(require("react"));
+
+// src/components/SkeletonLoader/SkeletonLoader.tsx
+var import_react45 = __toESM(require("react"));
+var import_classnames20 = __toESM(require("classnames"));
+var SkeletonLoader = ({
+  height,
+  width,
+  className
+}) => {
+  const baseClassName = (0, import_classnames20.default)(
+    "Layer__skeleton-loader Layer__anim--skeleton-loading",
+    className
+  );
+  return /* @__PURE__ */ import_react45.default.createElement("div", { className: baseClassName, style: { width, height } });
+};
+
+// src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
+var ProfitAndLossSummaries = ({
+  vertical,
+  revenueLabel = "Revenue"
+}) => {
+  const { data: storedData, isLoading } = (0, import_react46.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_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react36.default.createElement(
-    "span",
-    {
-      className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
-    },
-    centsToDollars(Math.abs(data?.income?.value ?? NaN))
-  )), /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react36.default.createElement(
-    "span",
-    {
-      className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
-    },
-    centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
-  )), /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react36.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react36.default.createElement(
-    "span",
+  return /* @__PURE__ */ import_react46.default.createElement(
+    "div",
     {
-      className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
+      className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    centsToDollars(Math.abs(data.net_profit))
-  )));
+    /* @__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",
+      {
+        className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+      },
+      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",
+      {
+        className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+      },
+      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(
+      "span",
+      {
+        className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
+      },
+      centsToDollars(Math.abs(data.net_profit))
+    ))
+  );
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react38 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react37 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 var ProfitAndLossRow = ({
   variant,
   lineItem,
   depth = 0,
   maxDepth = 1,
   direction = "DEBIT" /* DEBIT */,
-  summarize = true
+  lockExpanded = false
 }) => {
   if (!lineItem) {
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react37.useState)(true);
+  const [expanded, setExpanded] = (0, import_react47.useState)(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -2954,12 +4050,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_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, /* @__PURE__ */ import_react37.default.createElement(ChevronDown_default, { size: 16 }), display_name), /* @__PURE__ */ import_react37.default.createElement("div", { className: valueClasses.join(" ") }, amountString), canGoDeeper && hasChildren && /* @__PURE__ */ import_react37.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.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(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__balance-sheet-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react37.default.createElement(
+    /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react47.default.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -2968,16 +4072,7 @@ var ProfitAndLossRow = ({
         maxDepth,
         direction
       }
-    )), summarize && /* @__PURE__ */ import_react37.default.createElement(
-      ProfitAndLossRow,
-      {
-        key: display_name,
-        lineItem: { value, display_name: `Total of ${display_name}` },
-        variant: "summation",
-        depth: depth + 1,
-        maxDepth
-      }
-    ))
+    )))
   ));
 };
 
@@ -3030,16 +4125,27 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var ProfitAndLossTable = () => {
-  const { data: actualData, isLoading } = (0, import_react38.useContext)(ProfitAndLoss.Context);
+var ProfitAndLossTable = ({ lockExpanded }) => {
+  const { data: actualData, isLoading } = (0, import_react48.useContext)(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
-  return /* @__PURE__ */ import_react38.default.createElement(import_react38.default.Fragment, null, /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ import_react38.default.createElement(ProfitAndLossRow, { lineItem: data.income, direction: "CREDIT" /* CREDIT */ }), /* @__PURE__ */ import_react38.default.createElement(
+  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_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(
+    ProfitAndLossRow,
+    {
+      lineItem: data.income,
+      direction: "CREDIT" /* CREDIT */,
+      lockExpanded
+    }
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
-      direction: "DEBIT" /* DEBIT */
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
-  ), /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -3047,15 +4153,17 @@ var ProfitAndLossTable = () => {
         display_name: "Gross Profit"
       },
       variant: "summation",
-      direction: "CREDIT" /* CREDIT */
+      direction: "CREDIT" /* CREDIT */,
+      lockExpanded
     }
-  ), /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
-      direction: "DEBIT" /* DEBIT */
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
-  ), /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -3063,9 +4171,17 @@ var ProfitAndLossTable = () => {
         display_name: "Profit Before Taxes"
       },
       variant: "summation",
-      direction: "CREDIT" /* CREDIT */
+      direction: "CREDIT" /* CREDIT */,
+      lockExpanded
     }
-  ), /* @__PURE__ */ import_react38.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
+    ProfitAndLossRow,
+    {
+      lineItem: data.taxes,
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
+    }
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -3073,39 +4189,45 @@ var ProfitAndLossTable = () => {
         display_name: "Net Profit"
       },
       variant: "summation",
-      direction: "CREDIT" /* CREDIT */
+      direction: "CREDIT" /* CREDIT */,
+      lockExpanded
     }
-  )), /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react38.default.createElement(
+  )), /* @__PURE__ */ import_react48.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
-      direction: "DEBIT" /* DEBIT */
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
-  ), /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react48.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
-      direction: "DEBIT" /* DEBIT */
+      direction: "DEBIT" /* DEBIT */,
+      lockExpanded
     }
   )));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_date_fns9 = require("date-fns");
-var PNLContext = (0, import_react39.createContext)({
+var import_date_fns13 = require("date-fns");
+var PNLContext = (0, import_react49.createContext)({
   data: void 0,
   isLoading: true,
+  isValidating: false,
   error: void 0,
   dateRange: {
-    startDate: (0, import_date_fns9.startOfMonth)(/* @__PURE__ */ new Date()),
-    endDate: (0, import_date_fns9.endOfMonth)(/* @__PURE__ */ new Date())
+    startDate: (0, import_date_fns13.startOfMonth)(/* @__PURE__ */ new Date()),
+    endDate: (0, import_date_fns13.endOfMonth)(/* @__PURE__ */ new Date())
   },
   changeDateRange: () => {
+  },
+  refetch: () => {
   }
 });
-var ProfitAndLoss = ({ children }) => {
-  const contextData = useProfitAndLoss();
-  return /* @__PURE__ */ import_react39.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, /* @__PURE__ */ import_react39.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
+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));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -3113,9 +4235,47 @@ ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
 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 Components = () => {
+  const { error, isLoading, isValidating, refetch } = (0, import_react50.useContext)(
+    ProfitAndLoss.Context
+  );
+  if (!isLoading && error) {
+    return /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react50.default.createElement(
+      DataState,
+      {
+        status: "failed" /* failed */,
+        title: "Something went wrong",
+        description: "We couldn\u2019t load your data.",
+        onRefresh: () => refetch(),
+        isLoading: isValidating
+      }
+    ));
+  }
+  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(
+    "div",
+    {
+      className: `Layer__${COMPONENT_NAME2}__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(
+    "div",
+    {
+      className: `Layer__${COMPONENT_NAME2}__chart_with_summaries__chart-col`
+    },
+    /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.Chart, null)
+  )), /* @__PURE__ */ import_react50.default.createElement(ProfitAndLoss.Table, null));
+};
+
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react40 = __toESM(require("react"));
-var import_date_fns10 = require("date-fns");
+var import_react51 = __toESM(require("react"));
+var import_date_fns14 = require("date-fns");
 var import_swr5 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
@@ -3154,8 +4314,9 @@ var LayerProvider = ({
     revalidateOnReconnect: false,
     revalidateIfStale: false
   };
+  const colors = buildColorsPalette(theme);
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react40.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react51.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -3165,10 +4326,11 @@ var LayerProvider = ({
     businessId,
     categories: [],
     apiUrl,
-    theme
+    theme,
+    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_fns10.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
+    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns14.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
@@ -3177,7 +4339,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -3186,7 +4348,7 @@ var LayerProvider = ({
             access_token: businessAccessToken,
             token_type: "Bearer",
             expires_in: 3600,
-            expires_at: (0, import_date_fns10.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
+            expires_at: (0, import_date_fns14.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
           }
         }
       });
@@ -3196,34 +4358,42 @@ var LayerProvider = ({
         payload: {
           auth: {
             ...auth,
-            expires_at: (0, import_date_fns10.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
+            expires_at: (0, import_date_fns14.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
           }
         }
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  const { data: categories } = (0, import_swr5.default)(
+  (0, import_swr5.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
-    defaultSWRConfig
-  );
-  (0, import_react40.useEffect)(() => {
-    if (categories?.data?.categories?.length) {
-      dispatch({
-        type: "LayerContext.setCategories" /* setCategories */,
-        payload: { categories: categories.data.categories || [] }
-      });
+    {
+      ...defaultSWRConfig,
+      onSuccess: (response) => {
+        if (response?.data?.categories?.length) {
+          dispatch({
+            type: "LayerContext.setCategories" /* setCategories */,
+            payload: { categories: response.data.categories || [] }
+          });
+        }
+      }
     }
-  }, [categories?.data?.categories?.length]);
+  );
   const setTheme = (theme2) => dispatch({
     type: "LayerContext.setTheme" /* setTheme */,
     payload: { theme: theme2 }
   });
-  return /* @__PURE__ */ import_react40.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react40.default.createElement(LayerContext.Provider, { value: { ...state, setTheme } }, children));
+  const getColor = (shade) => {
+    if (colors && shade in colors) {
+      return colors[shade];
+    }
+    return;
+  };
+  return /* @__PURE__ */ import_react51.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react51.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-var import_react43 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
 var import_swr6 = __toESM(require("swr"));
@@ -3243,21 +4413,21 @@ var useChartOfAccounts = () => {
 };
 
 // src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
-var import_react41 = __toESM(require("react"));
-var import_react_select2 = __toESM(require("react-select"));
+var import_react52 = __toESM(require("react"));
+var import_react_select3 = __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_react41.useMemo)(
+  const accountOptions = (0, import_react52.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_react41.useState)("");
-  const [description, setDescription] = (0, import_react41.useState)("");
-  const [normality, setNormality] = (0, import_react41.useState)("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = (0, import_react41.useState)(
+  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)(
     data?.accounts[0]
   );
   const save = () => {
@@ -3271,22 +4441,22 @@ var ChartOfAccountsNewForm = () => {
       description
     });
   };
-  return /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react41.default.createElement(
+  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(
     "input",
     {
       name: "name",
       value: name,
       onChange: (event) => setName(event.target.value)
     }
-  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react41.default.createElement(
+  )), /* @__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(
     "input",
     {
       name: "description",
       value: description,
       onChange: (event) => setDescription(event.target.value)
     }
-  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react41.default.createElement(
-    import_react_select2.default,
+  )), /* @__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,
     {
       isSearchable: false,
       onChange: (value) => value && setNormality(value.value),
@@ -3295,8 +4465,8 @@ var ChartOfAccountsNewForm = () => {
         { label: "Debit", value: "DEBIT" /* DEBIT */ }
       ]
     }
-  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react41.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react41.default.createElement(
-    import_react_select2.default,
+  )), /* @__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,
     {
       isSearchable: true,
       value: parentAccount,
@@ -3305,49 +4475,49 @@ var ChartOfAccountsNewForm = () => {
       getOptionValue: (a) => a.id,
       options: accountOptions
     }
-  )), /* @__PURE__ */ import_react41.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react41.default.createElement("button", { onClick: save }, "Save")));
+  )), /* @__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")));
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_react42 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var ChartOfAccountsRow = ({ account, depth = 0 }) => {
-  const classNames13 = [
+  const classNames20 = [
     "Layer__chart-of-accounts-row__table-cell",
     depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
   ];
-  const className = classNames13.filter((id) => id).join(" ");
+  const className = classNames20.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_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--name`
     },
     account.name
-  ), /* @__PURE__ */ import_react42.default.createElement(
+  ), /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--type`
     },
     "Assets"
-  ), /* @__PURE__ */ import_react42.default.createElement(
+  ), /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
     },
     "Cash"
-  ), /* @__PURE__ */ import_react42.default.createElement(
+  ), /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
     },
     centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ import_react42.default.createElement(
+  ), /* @__PURE__ */ import_react53.default.createElement(
     "div",
     {
       className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
     },
-    /* @__PURE__ */ import_react42.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react42.default.createElement(
+    /* @__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(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -3360,15 +4530,15 @@ var ChartOfAccountsRow = ({ account, depth = 0 }) => {
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
 var ChartOfAccounts = () => {
   const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = (0, import_react43.useState)(false);
-  return /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react43.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react43.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react43.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react43.default.createElement(
+  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(
     "button",
     {
       className: "Layer__chart-of-accounts__edit-accounts-button",
       onClick: () => setShowingForm(!showingForm)
     },
     "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ import_react43.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react43.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_react43.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react43.default.createElement(
+  ))), 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(
     ChartOfAccountsRow,
     {
       key: account.id,
@@ -3384,6 +4554,7 @@ var ChartOfAccounts = () => {
   ChartOfAccounts,
   Hello,
   LayerProvider,
-  ProfitAndLoss
+  ProfitAndLoss,
+  ProfitAndLossView
 });
 //# sourceMappingURL=index.js.map