@layerfi/components 0.1.0 → 0.1.1

package/dist/index.js

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   BalanceSheet: () => BalanceSheet,
   BankTransactions: () => BankTransactions,
+  ChartOfAccounts: () => ChartOfAccounts,
   Hello: () => Hello,
   LayerProvider: () => LayerProvider,
   ProfitAndLoss: () => ProfitAndLoss
@@ -39,7 +40,7 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/components/BalanceSheet/BalanceSheet.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/api/util.ts
 var formStringFromObject = (object) => Object.entries(object).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&");
@@ -207,23 +208,82 @@ var balance_sheet_default = {
 // src/api/layer/balance_sheet.ts
 var getBalanceSheet = (_token, _params) => () => balance_sheet_default;
 
+// src/models/APIError.ts
+var APIError = class _APIError extends Error {
+  constructor(message, code, messages) {
+    super(message);
+    this.name = "APIError";
+    this.code = code;
+    this.messages = messages;
+    Object.setPrototypeOf(this, _APIError.prototype);
+  }
+  getMessage() {
+    return this.message;
+  }
+  getAllMessages() {
+    return this.messages?.map((x) => x.description);
+  }
+};
+
 // src/api/layer/authenticated_http.ts
-var get = (url) => (accessToken, options) => () => fetch(url(options?.params || {}), {
+var get = (url) => (baseUrl, accessToken, options) => () => fetch(`${baseUrl}${url(options?.params || {})}`, {
   headers: {
     Authorization: "Bearer " + (accessToken || ""),
     "Content-Type": "application/json"
   },
   method: "GET"
-}).then((res) => res.json());
-var put = (url) => (accessToken, options) => fetch(url(options?.params || {}), {
+}).then((res) => handleResponse(res)).catch((error) => handleException(error));
+var request = (verb) => (url) => (baseUrl, accessToken, options) => fetch(`${baseUrl}${url(options?.params || {})}`, {
   headers: {
     Authorization: "Bearer " + (accessToken || ""),
     "Content-Type": "application/json",
     "Cache-Control": "no-cache"
   },
-  method: "PUT",
+  method: verb.toUpperCase(),
   body: JSON.stringify(options?.body)
-}).then((res) => res.json());
+}).then((res) => handleResponse(res)).catch((error) => handleException(error));
+var post = request("post");
+var put = request("put");
+var handleResponse = async (res) => {
+  if (!res.ok) {
+    const errors = await tryToReadErrorsFromResponse(res);
+    const apiError = new APIError(
+      "An error occurred while fetching the data from API.",
+      res.status,
+      errors
+    );
+    throw apiError;
+  }
+  const parsedResponse = await res.json();
+  if (parsedResponse && "errors" in parsedResponse) {
+    const apiError = new APIError(
+      "Errors in the API response.",
+      res.status,
+      parsedResponse.errors ?? []
+    );
+    throw apiError;
+  }
+  return parsedResponse;
+};
+var handleException = async (error) => {
+  if (error.name === "APIError") {
+    throw error;
+  }
+  const apiError = new APIError(
+    "An error occurred while parsing the data from API.",
+    void 0,
+    []
+  );
+  throw apiError;
+};
+var tryToReadErrorsFromResponse = async (res) => {
+  try {
+    const data = await res?.json();
+    return data?.errors ?? [];
+  } catch (_err) {
+    return [];
+  }
+};
 
 // src/api/layer/bankTransactions.ts
 var getBankTransactions = get(
@@ -231,29 +291,37 @@ var getBankTransactions = get(
     businessId,
     sortBy = "date",
     sortOrder = "DESC"
-  }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}`
+  }) => `/v1/businesses/${businessId}/bank-transactions?sort_by=${sortBy}&sort_order=${sortOrder}`
 );
 var categorizeBankTransaction = put(
-  ({ businessId, bankTransactionId }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/categorize`
+  ({ businessId, bankTransactionId }) => `/v1/businesses/${businessId}/bank-transactions/${bankTransactionId}/categorize`
 );
 
 // src/api/layer/categories.ts
-var getCategories = get(
-  ({ businessId }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/categories`
+var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/categories`);
+
+// src/api/layer/chart_of_accounts.ts
+var getChartOfAccounts = get(
+  ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
+);
+var createAccount = post(
+  ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
 
 // src/api/layer/profit_and_loss.ts
 var getProfitAndLoss = get(
-  ({ businessId, startDate, endDate }) => `https://sandbox.layerfi.com/v1/businesses/${businessId}/reports/profit-and-loss?start_date=${startDate}&end_date=${endDate}`
+  ({ businessId, startDate, endDate }) => `/v1/businesses/${businessId}/reports/profit-and-loss?start_date=${startDate ? encodeURIComponent(startDate) : ""}&end_date=${endDate ? encodeURIComponent(endDate) : ""}`
 );
 
 // src/api/layer.ts
 var Layer = {
   authenticate,
   categorizeBankTransaction,
+  createAccount,
   getBalanceSheet,
   getBankTransactions,
   getCategories,
+  getChartOfAccounts,
   getProfitAndLoss
 };
 
@@ -263,9 +331,17 @@ var import_react2 = require("react");
 // src/contexts/LayerContext/LayerContext.tsx
 var import_react = require("react");
 var LayerContext = (0, import_react.createContext)({
-  auth: { access_token: "", expires_in: -1, token_type: "" },
+  auth: {
+    access_token: "",
+    expires_at: new Date(2e3, 1, 1),
+    expires_in: -1,
+    token_type: ""
+  },
   businessId: "",
-  categories: []
+  categories: [],
+  apiUrl: "",
+  theme: void 0,
+  setTheme: () => void 0
 });
 
 // src/hooks/useLayerContext/useLayerContext.tsx
@@ -274,7 +350,7 @@ var useLayerContext = () => (0, import_react2.useContext)(LayerContext);
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
 var import_date_fns = require("date-fns");
 var import_swr = __toESM(require("swr"));
-var useBalanceSheet = (date) => {
+var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const { auth, businessId } = useLayerContext();
   const dateString = (0, import_date_fns.format)((0, import_date_fns.startOfDay)(date), "yyyy-mm-dd");
   const { data, isLoading, error } = (0, import_swr.default)(
@@ -358,67 +434,44 @@ var import_react4 = __toESM(require("react"));
 
 // src/icons/ChevronDown.tsx
 var React4 = __toESM(require("react"));
-var ChevronDown = ({ size = 24, ...props }) => /* @__PURE__ */ React4.createElement(
+var ChevronDown = ({ size = 18, ...props }) => /* @__PURE__ */ React4.createElement(
   "svg",
   {
+    viewBox: "0 0 18 18",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     width: size,
-    height: size,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
+    height: size
   },
   /* @__PURE__ */ React4.createElement(
     "path",
     {
+      d: "M4.5 6.75L9 11.25L13.5 6.75",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m6 9 6 6 6-6"
+      strokeLinejoin: "round"
     }
   )
 );
 var ChevronDown_default = ChevronDown;
 
-// src/icons/ChevronRight.tsx
-var React5 = __toESM(require("react"));
-var ChavronRight = ({ strokeColor, size, ...props }) => /* @__PURE__ */ React5.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: size || 24,
-    height: size || 24,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React5.createElement(
-    "path",
-    {
-      stroke: strokeColor ?? "#000",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m9 18 6-6-6-6"
-    }
-  )
-);
-var ChevronRight_default = ChavronRight;
-
 // src/models/Money.ts
 var formatter = new Intl.NumberFormat("en-US", {
   minimumIntegerDigits: 1,
   minimumFractionDigits: 2,
   maximumFractionDigits: 2
 });
-var centsToDollars = (cents) => formatter.format(cents / 100);
-var dollarsToCents = (dollars) => Math.round(parseFloat(dollars) * 100);
+var centsToDollars = (cents = NaN) => isNaN(cents) ? "-.--" : formatter.format(cents / 100);
+var dollarsToCents = (dollars = "") => Math.round(parseFloat(dollars) * 100);
 
 // src/components/BalanceSheetRow/BalanceSheetRow.tsx
 var BalanceSheetRow = ({
   lineItem,
   depth = 0,
-  maxDepth = 2
+  maxDepth = 2,
+  variant,
+  summarize = true
 }) => {
   if (!lineItem) {
     return null;
@@ -441,9 +494,11 @@ var BalanceSheetRow = ({
   );
   labelClasses.push(`Layer__balance-sheet-row__label--depth-${depth}`);
   valueClasses.push(`Layer__balance-sheet-row__value--depth-${depth}`);
+  variant && labelClasses.push(`Layer__balance-sheet-row__label--variant-${variant}`);
+  variant && valueClasses.push(`Layer__balance-sheet-row__value--variant-${variant}`);
   const toggleExpanded = () => setExpanded(!expanded);
   const canGoDeeper = depth < maxDepth;
-  const hasChildren = line_items?.length > 0;
+  const hasChildren = (line_items?.length ?? 0) > 0;
   const displayChildren = hasChildren && canGoDeeper;
   labelClasses.push(
     `Layer__balance-sheet-row__label--display-children-${displayChildren}`
@@ -451,21 +506,68 @@ var BalanceSheetRow = ({
   valueClasses.push(
     `Layer__balance-sheet-row__value--display-children-${displayChildren}`
   );
-  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, expanded ? /* @__PURE__ */ import_react4.default.createElement(ChevronDown_default, { size: 16 }) : /* @__PURE__ */ import_react4.default.createElement(ChevronRight_default, { size: 16 }), display_name), /* @__PURE__ */ import_react4.default.createElement("div", { className: valueClasses.join(" ") }, !!value && amountString), canGoDeeper && hasChildren && expanded && (line_items || []).map((line_item) => /* @__PURE__ */ import_react4.default.createElement(
-    BalanceSheetRow,
+  displayChildren && expanded && labelClasses.push("Layer__balance-sheet-row__label--expanded");
+  displayChildren && expanded && valueClasses.push("Layer__balance-sheet-row__value--expanded");
+  return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, /* @__PURE__ */ import_react4.default.createElement(ChevronDown_default, { size: 16 }), display_name), /* @__PURE__ */ import_react4.default.createElement("div", { className: valueClasses.join(" ") }, !!value && amountString), canGoDeeper && hasChildren && /* @__PURE__ */ import_react4.default.createElement(
+    "div",
     {
-      key: line_item.display_name,
-      lineItem: line_item,
-      depth: depth + 1,
-      maxDepth
-    }
-  )));
+      className: `Layer__balance-sheet-row__children ${expanded && "Layer__balance-sheet-row__children--expanded"}`
+    },
+    /* @__PURE__ */ import_react4.default.createElement("div", { className: "Layer__balance-sheet-row__children--content" }, (line_items || []).map((line_item, idx) => /* @__PURE__ */ import_react4.default.createElement(
+      BalanceSheetRow,
+      {
+        key: `${line_item.display_name}_${idx}`,
+        lineItem: line_item,
+        depth: depth + 1,
+        maxDepth
+      }
+    )), summarize && /* @__PURE__ */ import_react4.default.createElement(
+      BalanceSheetRow,
+      {
+        key: display_name,
+        lineItem: { value, display_name: `Total of ${display_name}` },
+        variant: "summation",
+        depth: depth + 1,
+        maxDepth
+      }
+    ))
+  ));
+};
+
+// src/components/SkeletonBalanceSheetRow/SkeletonBalanceSheetRow.tsx
+var import_react5 = __toESM(require("react"));
+var SkeletonBalanceSheetRow = ({ children }) => {
+  const labelClasses = [
+    "Layer__balance-sheet-row",
+    "Layer__balance-sheet-row__label",
+    "Layer__balance-sheet-row__label--skeleton"
+  ];
+  const valueClasses = [
+    "Layer__balance-sheet-row",
+    "Layer__balance-sheet-row__value",
+    "Layer__balance-sheet-row__value--skeleton"
+  ];
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", { className: labelClasses.join(" ") }, children && /* @__PURE__ */ import_react5.default.createElement(ChevronDown_default, { size: 16 }), /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      style: { width: "20rem" },
+      className: "Layer__balance-sheet-row__skeleton-text"
+    },
+    " "
+  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      style: { width: "4rem" },
+      className: "Layer__balance-sheet-row__skeleton-text"
+    },
+    " "
+  )), children && /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet-row__children Layer__balance-sheet-row__children--expanded Layer__balance-sheet-row__children--skeleton" }, children));
 };
 
 // src/components/BalanceSheet/BalanceSheet.tsx
 var import_date_fns3 = require("date-fns");
 var BalanceSheet = () => {
-  const [effectiveDate, setEffectiveDate] = (0, import_react5.useState)(/* @__PURE__ */ new Date());
+  const [effectiveDate, setEffectiveDate] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
   const { data, isLoading } = useBalanceSheet(effectiveDate);
   const assets = {
     name: "Assets",
@@ -480,22 +582,29 @@ var BalanceSheet = () => {
     value: void 0
   };
   const dateString = (0, import_date_fns3.format)(effectiveDate, "LLLL d, yyyy");
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet__header" }, /* @__PURE__ */ import_react5.default.createElement("h2", { className: "Layer__balance-sheet__title" }, "Balance Sheet", /* @__PURE__ */ import_react5.default.createElement("span", { className: "Layer__balance-sheet__date" }, dateString)), /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "Layer__component Layer__balance-sheet" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "Layer__balance-sheet__header" }, /* @__PURE__ */ import_react6.default.createElement("h2", { className: "Layer__balance-sheet__title" }, "Balance Sheet", /* @__PURE__ */ import_react6.default.createElement("span", { className: "Layer__balance-sheet__date" }, dateString)), /* @__PURE__ */ import_react6.default.createElement(
     BalanceSheetDatePicker,
     {
       value: effectiveDate,
       onChange: (event) => setEffectiveDate((0, import_date_fns3.parseISO)(event.target.value))
     }
-  ), /* @__PURE__ */ import_react5.default.createElement("button", { className: "Layer__balance-sheet__download-button" }, /* @__PURE__ */ import_react5.default.createElement(DownloadCloud_default, null), "Download")), !data || isLoading ? /* @__PURE__ */ import_react5.default.createElement("div", null, "Loading") : /* @__PURE__ */ import_react5.default.createElement("div", { className: "Layer__balance-sheet__table" }, /* @__PURE__ */ import_react5.default.createElement(BalanceSheetRow, { key: assets.name, lineItem: assets }), /* @__PURE__ */ import_react5.default.createElement(BalanceSheetRow, { key: lne.name, lineItem: lne })));
+  ), /* @__PURE__ */ import_react6.default.createElement("button", { className: "Layer__balance-sheet__download-button" }, /* @__PURE__ */ import_react6.default.createElement(DownloadCloud_default, null), "Download")), !data || isLoading ? /* @__PURE__ */ import_react6.default.createElement("div", { className: "Layer__balance-sheet__table" }, /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null, /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null), /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null, /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null), /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null))), /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null, /* @__PURE__ */ import_react6.default.createElement(SkeletonBalanceSheetRow, null))) : /* @__PURE__ */ import_react6.default.createElement("div", { className: "Layer__balance-sheet__table" }, /* @__PURE__ */ import_react6.default.createElement(
+    BalanceSheetRow,
+    {
+      key: assets.name,
+      lineItem: assets,
+      summarize: false
+    }
+  ), /* @__PURE__ */ import_react6.default.createElement(BalanceSheetRow, { key: lne.name, lineItem: lne, summarize: false })));
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_react12 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 
 // src/hooks/useBankTransactions/useBankTransactions.tsx
 var import_swr2 = __toESM(require("swr"));
 var useBankTransactions = () => {
-  const { auth, businessId } = useLayerContext();
+  const { auth, businessId, apiUrl } = useLayerContext();
   const {
     data: responseData,
     isLoading,
@@ -503,437 +612,1333 @@ var useBankTransactions = () => {
     mutate
   } = (0, import_swr2.default)(
     businessId && auth?.access_token && `bank-transactions-${businessId}`,
-    Layer.getBankTransactions(auth?.access_token, { params: { businessId } })
+    Layer.getBankTransactions(apiUrl, auth?.access_token, {
+      params: { businessId }
+    })
   );
   const {
     data = [],
     meta: metadata = {},
     error = void 0
   } = responseData || {};
-  const categorize = (id, newCategory) => Layer.categorizeBankTransaction(auth.access_token, {
-    params: { businessId, bankTransactionId: id },
-    body: newCategory
-  }).then(({ data: transaction, error: error2 }) => {
-    if (transaction) {
-      mutate();
+  const categorize = (id, newCategory) => {
+    const foundBT = data.find((x) => x.business_id === businessId && x.id === id);
+    if (foundBT) {
+      updateOneLocal({ ...foundBT, processing: true, error: void 0 });
     }
-    if (error2) {
-      console.error(error2);
-      throw error2;
+    return Layer.categorizeBankTransaction(apiUrl, auth.access_token, {
+      params: { businessId, bankTransactionId: id },
+      body: newCategory
+    }).then(({ data: newBT, errors }) => {
+      if (newBT) {
+        newBT.recently_categorized = true;
+        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
+    );
+    mutate({ data: updatedData }, { revalidate: false });
+  };
+  return {
+    data,
+    metadata,
+    isLoading,
+    error: responseError || error,
+    categorize,
+    updateOneLocal
+  };
+};
+
+// src/hooks/useElementSize/useElementSize.ts
+var import_react7 = require("react");
+var useElementSize = (callback) => {
+  const ref = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => {
+    const element = ref?.current;
+    if (!element) {
+      return;
     }
-  });
-  return { data, metadata, isLoading, error, categorize };
+    const observer = new ResizeObserver((entries) => {
+      callback(element, entries[0], {
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      });
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [callback, ref]);
+  return ref;
 };
 
-// src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_react11 = __toESM(require("react"));
+// src/components/BankTransactionListItem/BankTransactionListItem.tsx
+var import_react24 = __toESM(require("react"));
 
-// src/icons/CheckedCircle.tsx
-var React8 = __toESM(require("react"));
-var CheckedCircle = ({
-  fillColor = "none",
-  strokeColor = "#000",
-  size = 24,
+// src/components/Button/Button.tsx
+var import_react8 = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var Button = ({
+  className,
+  children,
+  variant = "primary" /* primary */,
+  leftIcon,
+  rightIcon,
+  iconOnly,
   ...props
-}) => /* @__PURE__ */ React8.createElement(
+}) => {
+  let justify = "center";
+  if (leftIcon && rightIcon) {
+    justify = "space-between";
+  } else if (rightIcon) {
+    justify = "space-between";
+  } else if (leftIcon) {
+    justify = "start";
+  }
+  const baseClassName = (0, import_classnames.default)(
+    "Layer__btn",
+    `Layer__btn--${variant}`,
+    iconOnly ? "Layer__btn--icon-only" : "",
+    className
+  );
+  return /* @__PURE__ */ import_react8.default.createElement("button", { ...props, className: baseClassName }, /* @__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)));
+};
+
+// src/components/Button/SubmitButton.tsx
+var import_react13 = __toESM(require("react"));
+
+// src/icons/AlertCircle.tsx
+var React9 = __toESM(require("react"));
+var AlertCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React9.createElement(
   "svg",
   {
+    viewBox: "0 0 18 18",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     width: size,
-    height: size,
-    viewBox: "0 0 24 24",
-    fill: fillColor,
-    ...props
+    height: size
   },
-  /* @__PURE__ */ React8.createElement(
+  /* @__PURE__ */ React9.createElement(
     "path",
     {
-      stroke: strokeColor,
+      d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m7.5 12 3 3 6-6m5.5 3c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Z"
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React9.createElement(
+    "path",
+    {
+      d: "M9 6V9",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React9.createElement(
+    "path",
+    {
+      d: "M9 12H9.0075",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
-var CheckedCircle_default = CheckedCircle;
+var AlertCircle_default = AlertCircle;
 
-// src/icons/ChevronUp.tsx
-var React9 = __toESM(require("react"));
-var ChevronUp = (props) => /* @__PURE__ */ React9.createElement(
+// src/icons/Check.tsx
+var React10 = __toESM(require("react"));
+var Check = ({ size = 18, ...props }) => /* @__PURE__ */ React10.createElement(
   "svg",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
+    viewBox: "0 0 18 18",
     fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
   },
-  /* @__PURE__ */ React9.createElement(
+  /* @__PURE__ */ React10.createElement(
     "path",
     {
-      stroke: "#000",
+      d: "M15 4.5L6.75 12.75L3 9",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m18 15-6-6-6 6"
+      strokeLinejoin: "round"
     }
   )
 );
-var ChevronUp_default = ChevronUp;
-
-// src/components/CategoryMenu/CategoryMenu.tsx
-var import_react6 = __toESM(require("react"));
-var import_react_select = __toESM(require("react-select"));
-var CategoryMenu = ({
-  bankTransaction,
-  name,
-  value,
-  onChange
-}) => {
-  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_react6.default.createElement(
-    import_react_select.default,
-    {
-      name,
-      className: "Layer__category-menu",
-      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 }) }
-    }
-  );
-};
-
-// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_react9 = __toESM(require("react"));
+var Check_default = Check;
 
-// src/icons/Link.tsx
+// src/icons/CheckCircle.tsx
 var React11 = __toESM(require("react"));
-var Link = ({ size = 24, ...props }) => /* @__PURE__ */ React11.createElement(
+var CheckCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React11.createElement(
   "svg",
   {
+    viewBox: "0 0 18 18",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     width: size,
-    height: size,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
+    height: size
   },
   /* @__PURE__ */ React11.createElement(
     "path",
     {
-      stroke: "#000",
+      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",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m12.708 18.364-1.415 1.414a5 5 0 1 1-7.07-7.07l1.413-1.415m12.728 1.414 1.415-1.414a5 5 0 0 0-7.071-7.071l-1.415 1.414M8.5 15.5l7-7"
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React11.createElement(
+    "path",
+    {
+      d: "M16.5 3L9 10.5075L6.75 8.2575",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
-var Link_default = Link;
+var CheckCircle_default = CheckCircle;
 
-// src/icons/LinkBroken.tsx
+// src/icons/Loader.tsx
 var React12 = __toESM(require("react"));
-var LinkBroken = ({ size = 24, ...props }) => /* @__PURE__ */ React12.createElement(
+var Loader = ({ size = 18, ...props }) => /* @__PURE__ */ React12.createElement(
   "svg",
   {
+    viewBox: "0 0 18 18",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
+    ...props,
     width: size,
-    height: size,
-    fill: "none",
-    viewBox: "0 0 24 24",
-    ...props
+    height: size
   },
   /* @__PURE__ */ React12.createElement(
     "path",
     {
-      stroke: "#000",
+      d: "M9 1.5V4.5",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "m8.5 15.5 7-7M9 4V2m6 18v2M4 9H2m18 6h2M4.914 4.914 3.5 3.5m15.586 15.586L20.5 20.5M12 17.657l-2.121 2.121a4 4 0 1 1-5.657-5.657L6.343 12m11.314 0 2.121-2.121a4 4 0 0 0-5.657-5.657L12 6.343"
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M9 13.5V16.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M3.6975 3.6975L5.82 5.82",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M12.18 12.18L14.3025 14.3025",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M1.5 9H4.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M13.5 9H16.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M3.6975 14.3025L5.82 12.18",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React12.createElement(
+    "path",
+    {
+      d: "M12.18 5.82L14.3025 3.6975",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
-var LinkBroken_default = LinkBroken;
+var Loader_default = Loader;
 
-// src/components/RadioButtonGroup/RadioButtonGroup.tsx
-var import_react8 = __toESM(require("react"));
+// src/components/Tooltip/Tooltip.tsx
+var import_react11 = __toESM(require("react"));
 
-// src/components/RadioButtonGroup/RadioButton.tsx
-var import_react7 = __toESM(require("react"));
-var RadioButton = ({
-  checked,
-  label,
-  name,
-  onChange,
-  value,
+// src/components/Tooltip/useTooltip.ts
+var import_react9 = __toESM(require("react"));
+var import_react10 = require("@floating-ui/react");
+var TooltipContext = import_react9.default.createContext(null);
+var useTooltipContext = () => {
+  const context = import_react9.default.useContext(TooltipContext);
+  if (context == null) {
+    throw new Error("Tooltip components must be wrapped in <Tooltip />");
+  }
+  return context;
+};
+var useTooltip = ({
+  initialOpen = false,
+  placement = "top",
+  open: controlledOpen,
+  onOpenChange: setControlledOpen,
   disabled,
-  size
-}) => {
-  return /* @__PURE__ */ import_react7.default.createElement(
-    "label",
-    {
-      className: `Layer__radio-button-group__radio-button Layer__radio-button-group__radio-button--size-${size}`
+  offset: offsetProp = 5,
+  shift: shiftProp = { padding: 5 }
+} = {}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react9.useState)(initialOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = setControlledOpen ?? setUncontrolledOpen;
+  const data = (0, import_react10.useFloating)({
+    placement,
+    open: disabled ? false : open,
+    onOpenChange: setOpen,
+    whileElementsMounted: import_react10.autoUpdate,
+    middleware: [
+      (0, import_react10.offset)(offsetProp),
+      (0, import_react10.flip)({
+        crossAxis: placement.includes("-"),
+        fallbackAxisSideDirection: "start",
+        padding: shiftProp?.padding ?? 5
+      }),
+      (0, import_react10.shift)(shiftProp)
+    ]
+  });
+  const context = data.context;
+  const hover = (0, import_react10.useHover)(context, {
+    move: false,
+    enabled: controlledOpen == null
+  });
+  const focus = (0, import_react10.useFocus)(context, {
+    enabled: controlledOpen == null
+  });
+  const dismiss = (0, import_react10.useDismiss)(context);
+  const role = (0, import_react10.useRole)(context, { role: "tooltip" });
+  const interactions = (0, import_react10.useInteractions)([hover, focus, dismiss, role]);
+  const { isMounted, styles } = (0, import_react10.useTransitionStyles)(context, {
+    initial: {
+      opacity: 0
     },
-    /* @__PURE__ */ import_react7.default.createElement(
-      "input",
-      {
-        type: "radio",
-        checked,
-        name,
-        onChange,
-        value,
-        disabled: disabled ?? false
-      }
-    ),
-    /* @__PURE__ */ import_react7.default.createElement("div", null, label)
+    duration: 200
+  });
+  return import_react9.default.useMemo(
+    () => ({
+      open,
+      setOpen,
+      isMounted,
+      styles,
+      disabled,
+      ...interactions,
+      ...data
+    }),
+    [open, setOpen, interactions, data, styles, disabled]
   );
 };
 
-// src/components/RadioButtonGroup/RadioButtonGroup.tsx
-var RadioButtonGroup = ({
-  name,
-  size = "large",
-  buttons,
-  onChange,
-  selected
+// src/components/Tooltip/Tooltip.tsx
+var import_react12 = require("@floating-ui/react");
+var Tooltip = ({
+  children,
+  ...options
 }) => {
-  const selectedValue = selected || buttons[0].value;
-  return /* @__PURE__ */ import_react8.default.createElement(
+  const tooltip = useTooltip(options);
+  return /* @__PURE__ */ import_react11.default.createElement(TooltipContext.Provider, { value: tooltip }, children);
+};
+var TooltipTrigger = (0, import_react11.forwardRef)(function TooltipTrigger2({ children, asChild = false, ...props }, propRef) {
+  const context = useTooltipContext();
+  const childrenRef = children.ref;
+  const ref = (0, import_react12.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+  if (asChild && (0, import_react11.isValidElement)(children)) {
+    return (0, import_react11.cloneElement)(
+      children,
+      context.getReferenceProps({
+        ref,
+        ...props,
+        ...children.props,
+        "data-state": context.open ? "open" : "closed"
+      })
+    );
+  }
+  return /* @__PURE__ */ import_react11.default.createElement(
+    "span",
+    {
+      ref,
+      "data-state": context.open ? "open" : "closed",
+      className: `Layer__tooltip-trigger Layer__tooltip-trigger--${context.open ? "open" : "closed"}`,
+      ...context.getReferenceProps(props)
+    },
+    children
+  );
+});
+var TooltipContent = (0, import_react11.forwardRef)(function TooltipContent2({ style, className, ...props }, propRef) {
+  const context = useTooltipContext();
+  const ref = (0, import_react12.useMergeRefs)([context.refs.setFloating, propRef]);
+  if (!context.open || context.disabled)
+    return null;
+  return /* @__PURE__ */ import_react11.default.createElement(import_react12.FloatingPortal, null, /* @__PURE__ */ import_react11.default.createElement(
     "div",
     {
-      className: `Layer__radio-button-group Layer__radio-button-group--size-${size}`
+      ref,
+      className,
+      style: {
+        ...context.styles,
+        ...context.floatingStyles,
+        ...style
+      },
+      ...context.getFloatingProps(props)
+    }
+  ));
+});
+
+// src/components/Button/SubmitButton.tsx
+var import_classnames2 = __toESM(require("classnames"));
+var buildRightIcon = ({
+  processing,
+  error
+}) => {
+  if (processing) {
+    return /* @__PURE__ */ import_react13.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
+  }
+  if (error) {
+    return /* @__PURE__ */ import_react13.default.createElement(Tooltip, { offset: 12 }, /* @__PURE__ */ import_react13.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react13.default.createElement(AlertCircle_default, { size: 14 })), /* @__PURE__ */ import_react13.default.createElement(TooltipContent, { className: "Layer__tooltip" }, error));
+  }
+  return /* @__PURE__ */ import_react13.default.createElement("span", null, /* @__PURE__ */ import_react13.default.createElement(Check_default, { className: "Layer__btn-icon--on-active", size: 14 }), /* @__PURE__ */ import_react13.default.createElement(
+    CheckCircle_default,
+    {
+      className: "Layer__btn-icon--on-inactive",
+      size: 14,
+      style: { paddingTop: 4 }
+    }
+  ));
+};
+var SubmitButton = ({
+  active,
+  className,
+  processing,
+  disabled,
+  error,
+  children,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames2.default)(
+    active ? "Layer__btn--active" : "",
+    className
+  );
+  return /* @__PURE__ */ import_react13.default.createElement(
+    Button,
+    {
+      ...props,
+      className: baseClassName,
+      variant: "primary" /* primary */,
+      disabled: processing || disabled,
+      rightIcon: buildRightIcon({ processing, error })
     },
-    buttons.map((button) => /* @__PURE__ */ import_react8.default.createElement(
-      RadioButton,
-      {
-        ...button,
-        key: button.value,
-        name,
-        size,
-        checked: selectedValue === button.value,
-        onChange,
-        disabled: button.disabled ?? false
-      }
-    ))
+    children
   );
 };
 
-// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var ExpandedBankTransactionRow = ({
+// src/components/CategoryMenu/CategoryMenu.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,
-  close
+  name,
+  value,
+  onChange,
+  disabled,
+  className
 }) => {
-  const { categorize: categorizeBankTransaction2 } = useBankTransactions();
-  const [purpose, setPurpose] = (0, import_react9.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_react9.useState)({
-    splits: [
+  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
+    }
+  );
+};
+
+// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
+var import_react22 = __toESM(require("react"));
+
+// src/icons/FolderPlus.tsx
+var React17 = __toESM(require("react"));
+var FolderPlus = ({ size = 18, ...props }) => /* @__PURE__ */ React17.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React17.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React17.createElement(
+    "path",
+    {
+      d: "M9 8.25V12.75",
+      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(
+    "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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React18.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var Link_default = Link;
+
+// src/icons/RefreshCcw.tsx
+var React19 = __toESM(require("react"));
+var RefreshCcw = ({ size = 18, ...props }) => /* @__PURE__ */ React19.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      d: "M0.75 3V7.5H5.25",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React19.createElement(
+    "path",
+    {
+      d: "M17.25 15V10.5H12.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React19.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/icons/ScissorsFullOpen.tsx
+var React20 = __toESM(require("react"));
+var ScissorsFullOpen = ({ size = 12, ...props }) => /* @__PURE__ */ React20.createElement(
+  "svg",
+  {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React20.createElement("g", { id: "scissors" }, /* @__PURE__ */ React20.createElement(
+    "path",
+    {
+      id: "Vector",
+      d: "M3 4.5C3.82843 4.5 4.5 3.82843 4.5 3C4.5 2.17157 3.82843 1.5 3 1.5C2.17157 1.5 1.5 2.17157 1.5 3C1.5 3.82843 2.17157 4.5 3 4.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React20.createElement(
+    "path",
+    {
+      id: "Vector_2",
+      d: "M3 10.5C3.82843 10.5 4.5 9.82843 4.5 9C4.5 8.17157 3.82843 7.5 3 7.5C2.17157 7.5 1.5 8.17157 1.5 9C1.5 9.82843 2.17157 10.5 3 10.5Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React20.createElement(
+    "path",
+    {
+      id: "Vector_3",
+      d: "M10 2L4.06 7.94",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React20.createElement(
+    "path",
+    {
+      id: "Vector_4",
+      d: "M7.235 7.23999L10 9.99999",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ), /* @__PURE__ */ React20.createElement(
+    "path",
+    {
+      id: "Vector_5",
+      d: "M4.06 4.06006L6 6.00006",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ))
+);
+var ScissorsFullOpen_default = ScissorsFullOpen;
+
+// 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 });
+};
+
+// src/components/Input/InputGroup.tsx
+var import_react18 = __toESM(require("react"));
+
+// src/components/Typography/Text.tsx
+var import_react16 = __toESM(require("react"));
+var import_classnames4 = __toESM(require("classnames"));
+var Text = ({
+  as: Component = "p",
+  className,
+  children,
+  size = "md" /* md */,
+  weight = "normal" /* normal */,
+  withTooltip,
+  ...props
+}) => {
+  const baseClassName = (0, import_classnames4.default)(
+    `Layer__text Layer__text--${size} Layer__text--${weight}`,
+    className
+  );
+  if (withTooltip) {
+    return /* @__PURE__ */ import_react16.default.createElement(
+      TextWithTooltip,
       {
-        amount: bankTransaction.amount,
-        inputValue: centsToDollars(bankTransaction.amount),
-        category: defaultCategory
-      }
-    ],
-    description: "",
-    file: void 0
-  });
-  const addSplit = () => updateRowState({
-    ...rowState,
-    splits: [
-      ...rowState.splits,
-      { amount: 0, inputValue: "0.00", category: defaultCategory }
-    ]
-  });
-  const removeSplit = () => updateRowState({
-    ...rowState,
-    splits: rowState.splits.slice(0, -1)
-  });
-  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;
-      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);
-    updateRowState({ ...rowState });
-  };
-  const onBlur = (event) => {
-    if (event.target.value === "") {
-      const [_, index] = event.target.name.split("-");
-      rowState.splits[parseInt(index)].inputValue = "0.00";
-      updateRowState({ ...rowState });
+        as: Component,
+        className: baseClassName,
+        size,
+        weight,
+        withTooltip,
+        ...props
+      },
+      children
+    );
+  }
+  return /* @__PURE__ */ import_react16.default.createElement(Component, { ...props, className: baseClassName }, children);
+};
+var TextWithTooltip = ({
+  as: Component = "p",
+  className,
+  children,
+  size = "md" /* md */,
+  weight = "normal" /* normal */,
+  withTooltip = "whenTruncated" /* whenTruncated */,
+  tooltipOptions,
+  ...props
+}) => {
+  const textElementRef = (0, import_react16.useRef)();
+  const compareSize = () => {
+    if (textElementRef.current) {
+      const compare = textElementRef.current.children[0].scrollWidth > textElementRef.current.children[0].clientWidth;
+      setHover(compare);
     }
   };
-  const onChangePurpose = (event) => setPurpose(
-    event.target.value === "match" /* match */ ? "match" /* match */ : "categorize" /* categorize */
+  (0, import_react16.useEffect)(() => {
+    compareSize();
+    window.addEventListener("resize", compareSize);
+  }, []);
+  (0, import_react16.useEffect)(
+    () => () => {
+      window.removeEventListener("resize", compareSize);
+    },
+    []
+  );
+  const [hoverStatus, setHover] = (0, import_react16.useState)(false);
+  const contentClassName = (0, import_classnames4.default)(
+    "Layer__tooltip",
+    tooltipOptions?.contentClassName
   );
-  const changeCategory = (index, newValue) => {
-    rowState.splits[index].category = newValue;
-    updateRowState({ ...rowState });
+  return /* @__PURE__ */ import_react16.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)
+  );
+};
+
+// src/components/Typography/Heading.tsx
+var import_react17 = __toESM(require("react"));
+var import_classnames5 = __toESM(require("classnames"));
+var Heading = ({
+  as: Component = "h2",
+  className,
+  children,
+  size = "primary" /* primary */
+}) => {
+  const baseClassName = (0, import_classnames5.default)(
+    `Layer__heading Layer__heading--${size}`,
+    className
+  );
+  return /* @__PURE__ */ import_react17.default.createElement(Component, { className: baseClassName }, children);
+};
+
+// src/components/Input/InputGroup.tsx
+var import_classnames6 = __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(
+    Text,
+    {
+      as: "label",
+      size: "sm" /* sm */,
+      className: "Layer__input-label",
+      htmlFor: name
+    },
+    label
+  ), children);
+};
+
+// src/components/Input/FileInput.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/icons/UploadCloud.tsx
+var React25 = __toESM(require("react"));
+var UploadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React25.createElement(
+  "svg",
+  {
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React25.createElement(
+    "path",
+    {
+      d: "M12 12L9 9L6 12",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React25.createElement(
+    "path",
+    {
+      d: "M9 9V15.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React25.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",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React25.createElement(
+    "path",
+    {
+      d: "M12 12L9 9L6 12",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var UploadCloud_default = UploadCloud;
+
+// src/components/Input/FileInput.tsx
+var FileInput = ({ text = "Upload", onUpload }) => {
+  const hiddenFileInput = (0, import_react19.useRef)(null);
+  const onClick = () => {
+    if (hiddenFileInput.current) {
+      hiddenFileInput.current.click();
+    }
   };
-  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
-      }
-    } : {
-      type: "Split",
-      entries: rowState.splits.map((split) => ({
-        category: split.category?.stable_name || split.category?.category,
-        amount: split.amount
-      }))
-    }
-  ).then(close);
-  const className = "Layer__expanded-bank-transaction-row";
-  return /* @__PURE__ */ import_react9.default.createElement("div", { className }, /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__purpose-button` }, /* @__PURE__ */ import_react9.default.createElement(
-    RadioButtonGroup,
-    {
-      name: `purpose-${bankTransaction.id}`,
-      size: "small",
-      buttons: [
-        { value: "categorize", label: "Categorize" },
-        { value: "match", label: "Match", disabled: true }
-      ],
-      selected: purpose,
-      onChange: onChangePurpose
+  const onChange = (event) => {
+    if (event.target.files && event.target.files.length > 0 && onUpload) {
+      const fileUploaded = event.target.files[0];
+      onUpload(fileUploaded);
     }
-  )), /* @__PURE__ */ import_react9.default.createElement(
-    "div",
+  };
+  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement(
+    Button,
     {
-      className: `${className}__content`,
-      id: `expanded-${bankTransaction.id}`
+      onClick,
+      variant: "secondary" /* secondary */,
+      leftIcon: /* @__PURE__ */ import_react19.default.createElement(UploadCloud_default, null)
     },
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
+    text
+  ), /* @__PURE__ */ import_react19.default.createElement(
+    "input",
+    {
+      type: "file",
+      onChange,
+      ref: hiddenFileInput,
+      style: { display: "none" }
+    }
+  ));
+};
+
+// src/components/Textarea/Textarea.tsx
+var import_react20 = __toESM(require("react"));
+var import_classnames7 = __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 });
+};
+
+// src/components/Toggle/Toggle.tsx
+var import_react21 = __toESM(require("react"));
+var import_classnames8 = __toESM(require("classnames"));
+var Toggle = ({
+  name,
+  options,
+  selected,
+  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 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)(
+    "Layer__toggle",
+    `Layer__toggle--${size}`,
+    initialized ? "Layer__toggle--initialized" : ""
+  );
+  const handleChange = (e) => {
+    updateThumbPosition(Number(e.target.getAttribute("data-idx") ?? 0));
+    onChange(e);
+  };
+  const updateThumbPosition = (active) => {
+    if (!toggleRef?.current) {
+      return;
+    }
+    const optionsNodes = [...toggleRef.current.children].filter(
+      (c) => c.className.includes("Layer__toggle-option")
+    );
+    let shift2 = 0;
+    let width = thumbPos.width;
+    optionsNodes.forEach((c, i) => {
+      if (i < active) {
+        shift2 = shift2 + c.offsetWidth;
+      } else if (i === active) {
+        width = c.offsetWidth;
       }
-    ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
-      },
-      "Category"
-    ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
-      },
-      "Description"
-    ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
-      },
-      "Receipt"
-    ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
+    });
+    shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1);
+    setThumbPos({ left: shift2, width });
+  };
+  (0, import_react21.useEffect)(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+    setTimeout(() => {
+      setInitialized(true);
+    }, 400);
+  }, []);
+  (0, import_react21.useEffect)(() => {
+    const selectedIndex = getSelectedIndex();
+    updateThumbPosition(selectedIndex);
+  }, [currentWidth]);
+  const getSelectedIndex = () => {
+    let selectedIndex = options.findIndex(
+      (option) => option.value === selectedValue
+    );
+    if (selectedIndex === -1) {
+      return 0;
+    }
+    return selectedIndex;
+  };
+  return /* @__PURE__ */ import_react21.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react21.default.createElement(
+    ToggleOption,
+    {
+      ...option,
+      size,
+      key: option.value,
+      name,
+      checked: selectedValue === option.value,
+      onChange: handleChange,
+      disabled: option.disabled ?? false,
+      index
+    }
+  )), /* @__PURE__ */ import_react21.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+};
+var ToggleOption = ({
+  checked,
+  label,
+  name,
+  onChange,
+  value,
+  size,
+  leftIcon,
+  disabled,
+  index
+}) => {
+  return /* @__PURE__ */ import_react21.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react21.default.createElement(
+    "input",
+    {
+      type: "radio",
+      checked,
+      name,
+      onChange,
+      value,
+      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)));
+};
+
+// src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
+var ExpandedBankTransactionRow = (0, import_react22.forwardRef)(
+  ({
+    bankTransaction,
+    isOpen = false,
+    asListItem = false,
+    showSubmitButton = false
+  }, 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: [
+        {
+          amount: bankTransaction.amount,
+          inputValue: centsToDollars(bankTransaction.amount),
+          category: defaultCategory
+        }
+      ],
+      description: "",
+      file: void 0
+    });
+    const addSplit = () => updateRowState({
+      ...rowState,
+      splits: [
+        ...rowState.splits,
+        { amount: 0, inputValue: "0.00", category: defaultCategory }
+      ]
+    });
+    const removeSplit = () => updateRowState({
+      ...rowState,
+      splits: rowState.splits.slice(0, -1)
+    });
+    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;
+        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);
+      updateRowState({ ...rowState });
+    };
+    const onBlur = (event) => {
+      if (event.target.value === "") {
+        const [_, index] = event.target.name.split("-");
+        rowState.splits[parseInt(index)].inputValue = "0.00";
+        updateRowState({ ...rowState });
       }
-    ),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--header`
+    };
+    const onChangePurpose = (event) => setPurpose(
+      event.target.value === "match" /* match */ ? "match" /* match */ : "categorize" /* categorize */
+    );
+    const changeCategory = (index, newValue) => {
+      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
+        }
+      } : {
+        type: "Split",
+        entries: rowState.splits.map((split) => ({
+          category: split.category?.stable_name || split.category?.category,
+          amount: split.amount
+        }))
       }
-    ),
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, rowState.splits.length === 1 ? /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__button--split`, onClick: addSplit }, /* @__PURE__ */ import_react9.default.createElement(LinkBroken_default, { className: `${className}__svg`, size: 18 }), "Split") : /* @__PURE__ */ import_react9.default.createElement(
-      "div",
+    ).catch((e) => console.error(e));
+    (0, import_react22.useImperativeHandle)(ref, () => ({
+      save
+    }));
+    const className = "Layer__expanded-bank-transaction-row";
+    return /* @__PURE__ */ import_react22.default.createElement(
+      "span",
       {
-        className: `${className}__button--merge`,
-        onClick: removeSplit
+        className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`
       },
-      /* @__PURE__ */ import_react9.default.createElement(Link_default, { className: `${className}__svg`, size: 18 }),
-      "Merge"
-    )),
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell--split-entry`,
-        key: `split-${index}`
-      },
-      /* @__PURE__ */ import_react9.default.createElement(
-        CategoryMenu,
+      /* @__PURE__ */ import_react22.default.createElement("span", { className: `${className}__wrapper` }, /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react22.default.createElement(
+        Toggle,
         {
-          bankTransaction,
-          name: `category-${index}`,
-          value: split.category,
-          onChange: (value) => changeCategory(index, value)
+          name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
+          size: "small" /* small */,
+          options: [
+            {
+              value: "categorize",
+              label: "Categorize",
+              leftIcon: /* @__PURE__ */ import_react22.default.createElement(FolderPlus_default, { size: 15 })
+            },
+            {
+              value: "match",
+              label: "Match",
+              disabled: true,
+              leftIcon: /* @__PURE__ */ import_react22.default.createElement(RefreshCcw_default, { size: 15 })
+            }
+          ],
+          selected: purpose,
+          onChange: onChangePurpose
         }
-      ),
-      rowState.splits.length > 1 && /* @__PURE__ */ import_react9.default.createElement(
-        "input",
+      )), /* @__PURE__ */ import_react22.default.createElement(
+        "div",
         {
-          type: "text",
-          name: `split-${index}`,
-          disabled: index + 1 === rowState.splits.length,
-          onChange: updateAmounts(index),
-          value: split.inputValue,
-          onBlur,
-          className: `${className}__split-amount${split.amount < 0 ? "--negative" : ""}`
+          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(
+          "div",
+          {
+            className: `${className}__table-cell--split-entry`,
+            key: `split-${index}`
+          },
+          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,
+            {
+              bankTransaction,
+              name: `category-${index}${asListItem ? "-li" : ""}`,
+              value: split.category,
+              onChange: (value) => changeCategory(index, value),
+              className: "Layer__category-menu--full"
+            }
+          )
+        ))), /* @__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(ScissorsFullOpen_default, { size: 14 }),
+            variant: "secondary" /* secondary */
+          },
+          "Split"
+        ) : /* @__PURE__ */ import_react22.default.createElement(
+          Button,
+          {
+            onClick: removeSplit,
+            leftIcon: /* @__PURE__ */ import_react22.default.createElement(Link_default, { size: 14 }),
+            variant: "secondary" /* secondary */
+          },
+          "Merge"
+        ))),
+        /* @__PURE__ */ import_react22.default.createElement(
+          InputGroup,
+          {
+            className: `${className}__description`,
+            name: "description",
+            label: "Description"
+          },
+          /* @__PURE__ */ import_react22.default.createElement(Textarea, { name: "description", placeholder: "Enter description" })
+        ),
+        /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react22.default.createElement(FileInput, { text: "Upload receipt" })),
+        asListItem || showSubmitButton ? /* @__PURE__ */ import_react22.default.createElement("div", { className: `${className}__submit-btn` }, /* @__PURE__ */ import_react22.default.createElement(
+          SubmitButton,
+          {
+            onClick: () => {
+              if (!bankTransaction.processing) {
+                save();
+              }
+            },
+            className: "Layer__bank-transaction__submit-btn",
+            processing: bankTransaction.processing,
+            error: bankTransaction.error,
+            active: true
+          },
+          "Approve"
+        )) : null
+      ))
+    );
+  }
+);
+
+// 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
+}) => {
+  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;
+  }
+  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
+    }
+  )), /* @__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();
         }
-      )
-    ))),
-    /* @__PURE__ */ import_react9.default.createElement(
-      "div",
-      {
-        className: `${className}__table-cell ${className}__table-cell--description`
       },
-      /* @__PURE__ */ import_react9.default.createElement("textarea", null)
-    ),
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, /* @__PURE__ */ import_react9.default.createElement("input", { type: "file" })),
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }),
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: `${className}__table-cell` }, /* @__PURE__ */ import_react9.default.createElement("button", { onClick: save, className: `${className}__button--save` }, "Save"))
-  ));
+      className: "Layer__bank-transaction__submit-btn",
+      processing: bankTransaction.processing,
+      error: bankTransaction.error,
+      iconOnly: true
+    }
+  )));
 };
 
-// src/components/Pill/Pill.tsx
-var import_react10 = __toESM(require("react"));
-var Pill = ({ children }) => /* @__PURE__ */ import_react10.default.createElement("span", { className: "Layer__pill" }, children);
-
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_date_fns4 = require("date-fns");
-var isCredit = ({ direction }) => direction === "CREDIT" /* CREDIT */;
+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 BankTransactionRow = ({
   dateFormat: dateFormat2,
   bankTransaction,
@@ -941,65 +1946,269 @@ var BankTransactionRow = ({
   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_react11.useState)(
-    bankTransaction.categorization_flow.type === "ASK_FROM_SUGGESTIONS" /* ASK_FROM_SUGGESTIONS */ ? bankTransaction.categorization_flow.suggestions[0] : void 0
+  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 className = "Layer__bank-transaction-row__table-cell";
-  const openClassName = isOpen ? `${className}--expanded` : "";
-  const save = () => categorizeBankTransaction2(bankTransaction.id, {
-    type: "Category",
-    category: {
-      type: "StableName",
-      stable_name: selectedCategory?.stable_name || selectedCategory?.category || ""
+  const save = () => {
+    if (isOpen && expandedRowRef?.current) {
+      expandedRowRef?.current?.save();
+      toggleOpen(bankTransaction.id);
+      return;
     }
-  });
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName} ${className}--date` }, (0, import_date_fns4.format)((0, import_date_fns4.parseISO)(bankTransaction.date), dateFormat2)), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, bankTransaction.counterparty_name), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, "Business Checking"), /* @__PURE__ */ import_react11.default.createElement(
-    "div",
+    categorizeBankTransaction2(bankTransaction.id, {
+      type: "Category",
+      category: {
+        type: "StableName",
+        stable_name: selectedCategory?.stable_name || selectedCategory?.category || ""
+      }
+    });
+  };
+  if (removed) {
+    return null;
+  }
+  const className = "Layer__bank-transaction-row";
+  const openClassName = isOpen ? `${className}--expanded` : "";
+  const rowClassName = (0, import_classnames10.default)(
+    className,
+    bankTransaction.recently_categorized ? "Layer__bank-transaction-row--removing" : "",
+    isOpen ? openClassName : ""
+  );
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, /* @__PURE__ */ import_react25.default.createElement(
+    "tr",
     {
-      className: `${className} ${openClassName} ${className}--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`
+      className: rowClassName,
+      onTransitionEnd: ({ propertyName }) => {
+        if (propertyName === "top") {
+          setRemoved(true);
+        }
+      }
     },
-    centsToDollars(bankTransaction.amount)
-  ), isOpen ? /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }) : /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName}` }, editable ? /* @__PURE__ */ import_react11.default.createElement(
-    CategoryMenu,
+    /* @__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(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__tx-text",
+        withTooltip: "whenTruncated" /* whenTruncated */,
+        tooltipOptions: {
+          contentClassName: "Layer__bank-transactions__tx-tooltip"
+        }
+      },
+      bankTransaction.counterparty_name
+    ))),
+    /* @__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(
+      Text,
+      {
+        as: "span",
+        className: "Layer__bank-transactions__account-text",
+        withTooltip: "whenTruncated" /* whenTruncated */
+      },
+      bankTransaction.account_name ?? ""
+    ))),
+    /* @__PURE__ */ import_react25.default.createElement(
+      "td",
+      {
+        className: `Layer__table-cell Layer__table-cell__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
+      },
+      /* @__PURE__ */ import_react25.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit2(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+    ),
+    /* @__PURE__ */ import_react25.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 ? /* @__PURE__ */ import_react25.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction?.category?.display_name) : null,
+        editable && /* @__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
+          },
+          "Approve"
+        ),
+        /* @__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"}`
+            }
+          )
+        )
+      )
+    )
+  ), /* @__PURE__ */ import_react25.default.createElement("tr", null, /* @__PURE__ */ import_react25.default.createElement("td", { colSpan: 5 }, /* @__PURE__ */ import_react25.default.createElement(
+    ExpandedBankTransactionRow,
     {
+      ref: expandedRowRef,
       bankTransaction,
-      name: `category-${bankTransaction.id}`,
-      value: selectedCategory,
-      onChange: setSelectedCategory
+      close: () => toggleOpen(bankTransaction.id),
+      isOpen,
+      showSubmitButton: !editable
     }
-  ) : /* @__PURE__ */ import_react11.default.createElement(Pill, null, bankTransaction?.category?.display_name)), /* @__PURE__ */ import_react11.default.createElement("div", { className: `${className} ${openClassName} ${className}--actions` }, /* @__PURE__ */ import_react11.default.createElement(
-    "div",
-    {
-      className: "Layer__bank-transaction-row__save-button",
-      onClick: () => save()
-    },
-    editable && !isOpen && /* @__PURE__ */ import_react11.default.createElement(
-      CheckedCircle_default,
-      {
-        size: 28,
-        strokeColor: "#0C48E5",
-        fillColor: "#e0e9ff"
+  ))));
+};
+
+// src/components/Container/Container.tsx
+var import_react26 = __toESM(require("react"));
+
+// src/utils/colors.ts
+var parseStylesFromThemeConfig = (theme) => {
+  let styles = {};
+  if (!theme) {
+    return styles;
+  }
+  if (theme.colors) {
+    const darkColor = parseColorFromTheme("dark", theme.colors.dark);
+    const lightColor = parseColorFromTheme("light", theme.colors.light);
+    styles = { ...styles, ...darkColor, ...lightColor };
+  }
+  return styles;
+};
+var parseColorFromTheme = (colorName, color) => {
+  if (!color) {
+    return {};
+  }
+  try {
+    if ("h" in color && "s" in color && "l" in color) {
+      console.log("its hsl", color);
+      return {
+        [`--color-${colorName}-h`]: color.h,
+        [`--color-${colorName}-s`]: color.s,
+        [`--color-${colorName}-l`]: color.l
+      };
+    }
+    if ("r" in color && "g" in color && "b" in color) {
+      const { h, s, l } = rgbToHsl(color);
+      console.log("its rgb", h, s, l);
+      return {
+        [`--color-${colorName}-h`]: h,
+        [`--color-${colorName}-s`]: `${s}%`,
+        [`--color-${colorName}-l`]: `${l}%`
+      };
+    }
+    if ("hex" in color) {
+      console.log("its hex");
+      const rgb = hexToRgb(color.hex);
+      if (!rgb) {
+        return {};
       }
-    )
-  ), /* @__PURE__ */ import_react11.default.createElement(
+      const { h, s, l } = rgbToHsl({
+        r: rgb.r.toString(),
+        g: rgb.g.toString(),
+        b: rgb.b.toString()
+      });
+      console.log("its hex", h, s, l);
+      return {
+        [`--color-${colorName}-h`]: h,
+        [`--color-${colorName}-s`]: `${s}%`,
+        [`--color-${colorName}-l`]: `${l}%`
+      };
+    }
+    return {};
+  } catch (_err) {
+    return {};
+  }
+};
+var rgbToHsl = (color) => {
+  let r = Number(color.r);
+  let g = Number(color.g);
+  let b = Number(color.b);
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const l = Math.max(r, g, b);
+  const s = l - Math.min(r, g, b);
+  const h = s ? l === r ? (g - b) / s : l === g ? 2 + (b - r) / s : 4 + (r - g) / s : 0;
+  return {
+    h: 60 * h < 0 ? 60 * h + 360 : 60 * h,
+    s: 100 * (s ? l <= 0.5 ? s / (2 * l - s) : s / (2 - (2 * l - s)) : 0),
+    l: 100 * (2 * l - s) / 2
+  };
+};
+var hexToRgb = (hex) => {
+  const values = hex.replace(
+    /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+    (m, r, g, b) => "#" + r + r + g + g + b + b
+  ).substring(1).match(/.{2}/g)?.map((x) => parseInt(x, 16));
+  if (!values) {
+    return;
+  }
+  return {
+    r: values[0],
+    g: values[1],
+    b: values[2]
+  };
+};
+
+// src/components/Container/Container.tsx
+var Container = ({ name, className, children }) => {
+  const baseClassName = `Layer__${name} ${className ?? ""}`;
+  const { theme } = useLayerContext();
+  const styles = parseStylesFromThemeConfig(theme);
+  return /* @__PURE__ */ import_react26.default.createElement(
     "div",
     {
-      onClick: () => toggleOpen(bankTransaction.id),
-      className: "Layer__bank-transaction-row__expand-button"
+      className: `Layer__component Layer__component-container ${baseClassName}`,
+      style: { ...styles }
     },
-    isOpen ? /* @__PURE__ */ import_react11.default.createElement(ChevronUp_default, null) : /* @__PURE__ */ import_react11.default.createElement(ChevronDown_default, null)
-  )), isOpen && /* @__PURE__ */ import_react11.default.createElement(
-    ExpandedBankTransactionRow,
-    {
-      bankTransaction,
-      close: () => toggleOpen(bankTransaction.id)
-    }
-  ));
+    children
+  );
+};
+
+// src/components/Container/Header.tsx
+var import_react27 = __toESM(require("react"));
+var import_classnames11 = __toESM(require("classnames"));
+var Header = (0, import_react27.forwardRef)(
+  ({ className, children, style }, ref) => {
+    const baseClassName = (0, import_classnames11.default)("Layer__component-header", className);
+    return /* @__PURE__ */ import_react27.default.createElement("header", { ref, className: baseClassName, style }, children);
+  }
+);
+
+// src/components/Loader/Loader.tsx
+var import_react28 = __toESM(require("react"));
+var Loader2 = ({ children }) => {
+  return /* @__PURE__ */ import_react28.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react28.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }), children ?? "Loading...");
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var dateFormat = "MM/dd/yyyy";
+var COMPONENT_NAME = "bank-transactions";
+var dateFormat = "LLL d, yyyy";
 var CategorizedCategories = [
   "CATEGORIZED" /* CATEGORIZED */,
   "JOURNALING" /* JOURNALING */,
@@ -1013,46 +2222,83 @@ var filterVisibility = (display) => (bankTransaction) => {
   const categorized = CategorizedCategories.includes(
     bankTransaction.categorization_status
   );
-  const inReview = ReviewCategories.includes(
-    bankTransaction.categorization_status
-  );
+  const inReview = ReviewCategories.includes(bankTransaction.categorization_status) || bankTransaction.recently_categorized;
   return display === "review" /* review */ && inReview || display === "categorized" /* categorized */ && categorized;
 };
 var BankTransactions = () => {
-  const [display, setDisplay] = (0, import_react12.useState)("review" /* review */);
-  const { data } = useBankTransactions();
+  const [display, setDisplay] = (0, import_react29.useState)("review" /* review */);
+  const { data, isLoading } = 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_react12.useState)({});
+  const [openRows, setOpenRows] = (0, import_react29.useState)({});
   const toggleOpen = (id) => setOpenRows({ ...openRows, [id]: !openRows[id] });
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions", "data-display": display }, /* @__PURE__ */ import_react12.default.createElement("header", { className: "Layer__bank-transactions__header" }, /* @__PURE__ */ import_react12.default.createElement("h2", { className: "Layer__bank-transactions__title" }, "Transactions"), /* @__PURE__ */ import_react12.default.createElement(
-    RadioButtonGroup,
-    {
-      name: "bank-transaction-display",
-      buttons: [
-        { label: "To Review", value: "review" /* review */ },
-        { label: "Categorized", value: "categorized" /* categorized */ }
-      ],
-      selected: display,
-      onChange: onCategorizationDisplayChange
+  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react29.useState)(0);
+  const headerRef = useElementSize((_el, _en, size) => {
+    if (size?.height && size?.height >= 90) {
+      const newShift = -Math.floor(size.height / 2) + 6;
+      if (newShift !== shiftStickyHeader) {
+        setShiftStickyHeader(newShift);
+      }
+    } else if (size?.height > 0 && shiftStickyHeader !== 0) {
+      setShiftStickyHeader(0);
     }
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Date"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Transaction"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Account"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header Layer__bank-transactions__table-cell--header-amount" }, "Amount"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Category"), /* @__PURE__ */ import_react12.default.createElement("div", { className: "Layer__bank-transactions__table-cell Layer__bank-transactions__table-cell--header" }, "Actions"), bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react12.default.createElement(
-    BankTransactionRow,
+  });
+  const editable = display === "review" /* review */;
+  return /* @__PURE__ */ import_react29.default.createElement(Container, { name: COMPONENT_NAME }, /* @__PURE__ */ import_react29.default.createElement(
+    Header,
+    {
+      ref: headerRef,
+      className: "Layer__bank-transactions__header",
+      style: { top: shiftStickyHeader }
+    },
+    /* @__PURE__ */ import_react29.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+    /* @__PURE__ */ import_react29.default.createElement(
+      Toggle,
+      {
+        name: "bank-transaction-display",
+        options: [
+          { label: "To Review", value: "review" /* review */ },
+          { label: "Categorized", value: "categorized" /* categorized */ }
+        ],
+        selected: display,
+        onChange: onCategorizationDisplayChange
+      }
+    )
+  ), /* @__PURE__ */ import_react29.default.createElement(
+    "table",
+    {
+      width: "100%",
+      className: "Layer__table Layer__bank-transactions__table"
+    },
+    /* @__PURE__ */ import_react29.default.createElement("thead", null, /* @__PURE__ */ import_react29.default.createElement("tr", null, /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react29.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+    /* @__PURE__ */ import_react29.default.createElement("tbody", null, !isLoading && bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react29.default.createElement(
+      BankTransactionRow,
+      {
+        key: bankTransaction.id,
+        dateFormat,
+        bankTransaction,
+        isOpen: openRows[bankTransaction.id],
+        toggleOpen,
+        editable
+      }
+    )))
+  ), isLoading || !bankTransactions || bankTransactions?.length === 0 ? /* @__PURE__ */ import_react29.default.createElement(Loader2, null) : null, !isLoading && /* @__PURE__ */ import_react29.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions.map((bankTransaction) => /* @__PURE__ */ import_react29.default.createElement(
+    BankTransactionListItem,
     {
       key: bankTransaction.id,
       dateFormat,
       bankTransaction,
       isOpen: openRows[bankTransaction.id],
       toggleOpen,
-      editable: display === "review" /* review */
+      editable
     }
   ))));
 };
 
 // src/components/Hello/Hello.tsx
-var import_react13 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_swr3 = __toESM(require("swr"));
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -1061,26 +2307,26 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ import_react13.default.createElement(import_react13.default.Fragment, null, /* @__PURE__ */ import_react13.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react21 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react14 = require("react");
-var import_date_fns5 = require("date-fns");
+var import_react31 = require("react");
+var import_date_fns6 = require("date-fns");
 var import_swr4 = __toESM(require("swr"));
 var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate } = {
-  startDate: (0, import_date_fns5.startOfMonth)(/* @__PURE__ */ new Date()),
-  endDate: (0, import_date_fns5.endOfMonth)(/* @__PURE__ */ new Date())
+  startDate: (0, import_date_fns6.startOfMonth)(/* @__PURE__ */ new Date()),
+  endDate: (0, import_date_fns6.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
-  const { auth, businessId } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react14.useState)(
-    initialStartDate || (0, import_date_fns5.startOfMonth)(Date.now())
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const [startDate, setStartDate] = (0, import_react31.useState)(
+    initialStartDate || (0, import_date_fns6.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react14.useState)(
-    initialEndDate || (0, import_date_fns5.endOfMonth)(Date.now())
+  const [endDate, setEndDate] = (0, import_react31.useState)(
+    initialEndDate || (0, import_date_fns6.endOfMonth)(Date.now())
   );
   const {
     data: rawData,
@@ -1088,11 +2334,11 @@ var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate }
     error: rawError
   } = (0, import_swr4.default)(
     businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}`,
-    Layer.getProfitAndLoss(auth?.access_token, {
+    Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
-        startDate: (0, import_date_fns5.formatISO)(startDate),
-        endDate: (0, import_date_fns5.formatISO)(endDate)
+        startDate: (0, import_date_fns6.formatISO)(startDate),
+        endDate: (0, import_date_fns6.formatISO)(endDate)
       }
     })
   );
@@ -1114,10 +2360,10 @@ var useProfitAndLoss = ({ startDate: initialStartDate, endDate: initialEndDate }
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react16 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react15 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -1137,16 +2383,17 @@ var Indicator = ({
   const boxWidth = width * 2 + 4;
   const multiplier = 1.5;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react32.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
       style: {
         width: `${boxWidth * multiplier}px`,
+        // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
         y: y + height
       }
@@ -1155,106 +2402,106 @@ var Indicator = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_date_fns6 = require("date-fns");
+var import_date_fns7 = require("date-fns");
 var import_recharts = require("recharts");
 var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
-  const { changeDateRange, dateRange } = (0, import_react16.useContext)(ProfitAndLoss.Context);
-  const thisMonth = (0, import_date_fns6.startOfMonth)(Date.now());
+  const { changeDateRange, dateRange } = (0, import_react33.useContext)(ProfitAndLoss.Context);
+  const thisMonth = (0, import_date_fns7.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
   const monthData = [];
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 11 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 11 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 10 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 10 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 9 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 9 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 8 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 8 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 7 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 7 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 6 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 6 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 5 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 5 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 4 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 4 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 3 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 3 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 2 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 2 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
-      startDate: (0, import_date_fns6.startOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 1 })),
-      endDate: (0, import_date_fns6.endOfMonth)((0, import_date_fns6.sub)(thisMonth, { months: 1 }))
+      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 }))
     })?.data
   );
   monthData.push(
     useProfitAndLoss({
       startDate: thisMonth,
-      endDate: (0, import_date_fns6.endOfMonth)(thisMonth)
+      endDate: (0, import_date_fns7.endOfMonth)(thisMonth)
     })?.data
   );
-  const getMonthName = (pnl) => !!pnl ? (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(pnl.start_date), "LLL") : "";
+  const getMonthName = (pnl) => pnl ? (0, import_date_fns7.format)((0, import_date_fns7.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_fns6.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns6.parseISO)(pnl.end_date).getMonth() <= endSelectionMonth
+    selected: !!pnl && (0, import_date_fns7.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns7.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_fns6.parseISO)(startDate),
-        endDate: (0, import_date_fns6.parseISO)(endDate)
+        startDate: (0, import_date_fns7.parseISO)(startDate),
+        endDate: (0, import_date_fns7.parseISO)(endDate)
       });
     }
   };
-  const data = (0, import_react16.useMemo)(
+  const data = (0, import_react33.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -1262,8 +2509,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react16.useState)(-1);
-  return /* @__PURE__ */ import_react16.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react16.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react33.useState)(-1);
+  return /* @__PURE__ */ import_react33.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: 250 }, /* @__PURE__ */ import_react33.default.createElement(
     import_recharts.BarChart,
     {
       margin: { left: 24, right: 24, bottom: 24 },
@@ -1272,8 +2519,8 @@ var ProfitAndLossChart = () => {
       barGap,
       className: "Layer__profit-and-loss-chart"
     },
-    /* @__PURE__ */ import_react16.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
-    /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(import_recharts.CartesianGrid, { vertical: false }),
+    /* @__PURE__ */ import_react33.default.createElement(
       import_recharts.Legend,
       {
         verticalAlign: "top",
@@ -1284,8 +2531,8 @@ var ProfitAndLossChart = () => {
         ]
       }
     ),
-    /* @__PURE__ */ import_react16.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-    /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+    /* @__PURE__ */ import_react33.default.createElement(
       import_recharts.Bar,
       {
         dataKey: "revenue",
@@ -1294,10 +2541,10 @@ var ProfitAndLossChart = () => {
         radius: [barSize / 4, barSize / 4, 0, 0],
         className: "Layer__profit-and-loss-chart__bar--income"
       },
-      /* @__PURE__ */ import_react16.default.createElement(
+      /* @__PURE__ */ import_react33.default.createElement(
         import_recharts.LabelList,
         {
-          content: /* @__PURE__ */ import_react16.default.createElement(
+          content: /* @__PURE__ */ import_react33.default.createElement(
             Indicator,
             {
               animateFrom,
@@ -1306,7 +2553,7 @@ var ProfitAndLossChart = () => {
           )
         }
       ),
-      data.map((entry) => /* @__PURE__ */ import_react16.default.createElement(
+      data.map((entry) => /* @__PURE__ */ import_react33.default.createElement(
         import_recharts.Cell,
         {
           key: entry.name,
@@ -1314,7 +2561,7 @@ var ProfitAndLossChart = () => {
         }
       ))
     ),
-    /* @__PURE__ */ import_react16.default.createElement(
+    /* @__PURE__ */ import_react33.default.createElement(
       import_recharts.Bar,
       {
         dataKey: "expenses",
@@ -1323,7 +2570,7 @@ var ProfitAndLossChart = () => {
         radius: [barSize / 4, barSize / 4, 0, 0],
         className: "Layer__profit-and-loss-chart__bar--expenses"
       },
-      data.map((entry) => /* @__PURE__ */ import_react16.default.createElement(
+      data.map((entry) => /* @__PURE__ */ import_react33.default.createElement(
         import_recharts.Cell,
         {
           key: entry.name,
@@ -1335,15 +2582,15 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react17 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/icons/ChevronLeft.tsx
-var React22 = __toESM(require("react"));
+var React40 = __toESM(require("react"));
 var ChevronLeft = ({
   strokeColor,
   size,
   ...props
-}) => /* @__PURE__ */ React22.createElement(
+}) => /* @__PURE__ */ React40.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1353,7 +2600,7 @@ var ChevronLeft = ({
     viewBox: "0 0 24 24",
     ...props
   },
-  /* @__PURE__ */ React22.createElement(
+  /* @__PURE__ */ React40.createElement(
     "path",
     {
       stroke: strokeColor ?? "#000",
@@ -1366,43 +2613,68 @@ var ChevronLeft = ({
 );
 var ChevronLeft_default = ChevronLeft;
 
+// src/icons/ChevronRight.tsx
+var React41 = __toESM(require("react"));
+var ChavronRight = ({ size, ...props }) => /* @__PURE__ */ React41.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size || 24,
+    height: size || 24,
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props
+  },
+  /* @__PURE__ */ React41.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_fns7 = require("date-fns");
+var import_date_fns8 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react17.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react34.useContext)(ProfitAndLoss.Context);
   const date = dateRange.startDate;
-  const label = (0, import_date_fns7.format)(date, "LLLL y");
+  const label = (0, import_date_fns8.format)(date, "LLLL y");
   const change = (duration) => {
-    const newDate = (0, import_date_fns7.add)(date, duration);
+    const newDate = (0, import_date_fns8.add)(date, duration);
     changeDateRange({
-      startDate: (0, import_date_fns7.startOfMonth)(newDate),
-      endDate: (0, import_date_fns7.endOfMonth)(newDate)
+      startDate: (0, import_date_fns8.startOfMonth)(newDate),
+      endDate: (0, import_date_fns8.endOfMonth)(newDate)
     });
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ import_react17.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react34.default.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
         size: 18
       }
     )
-  ), /* @__PURE__ */ import_react17.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react17.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react34.default.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ import_react17.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
@@ -1413,35 +2685,53 @@ var ProfitAndLossDatePicker = () => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react18 = __toESM(require("react"));
-var import_date_fns8 = require("date-fns");
+var import_react35 = __toESM(require("react"));
 var ProfitAndLossSummaries = () => {
-  const { data } = (0, import_react18.useContext)(ProfitAndLoss.Context);
-  if (!data) {
-    return null;
-  }
-  const monthName = (0, import_date_fns8.format)((0, import_date_fns8.parseISO)(data?.start_date), "LLLL");
-  return /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(data.income.value))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(Math.abs(data.income.value - data.net_profit)))), /* @__PURE__ */ import_react18.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react18.default.createElement("span", { className: "Layer__profit-and-loss-summaries__amount" }, centsToDollars(data.net_profit))));
+  const { data: storedData } = (0, import_react35.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_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--income" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Revenue"), /* @__PURE__ */ import_react35.default.createElement(
+    "span",
+    {
+      className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
+    },
+    centsToDollars(Math.abs(data?.income?.value ?? NaN))
+  )), /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--expenses" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), /* @__PURE__ */ import_react35.default.createElement(
+    "span",
+    {
+      className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
+    },
+    centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
+  )), /* @__PURE__ */ import_react35.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), /* @__PURE__ */ import_react35.default.createElement(
+    "span",
+    {
+      className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
+    },
+    centsToDollars(Math.abs(data.net_profit))
+  )));
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react20 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react19 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var ProfitAndLossRow = ({
   variant,
   lineItem,
   depth = 0,
   maxDepth = 1,
-  direction = "DEBIT" /* DEBIT */
+  direction = "DEBIT" /* DEBIT */,
+  summarize = true
 }) => {
   if (!lineItem) {
     return null;
   }
-  const { value, display_name, line_items, name } = lineItem;
-  const variantName = variant || name;
-  const amount = value || 0;
+  const { value, display_name, line_items } = lineItem;
+  const [expanded, setExpanded] = (0, import_react36.useState)(true);
+  const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
     "Layer__profit-and-loss-row",
@@ -1451,87 +2741,154 @@ var ProfitAndLossRow = ({
     "Layer__profit-and-loss-row",
     "Layer__profit-and-loss-row__value"
   ];
+  const positive = amount === 0 || direction === "CREDIT" /* CREDIT */ && amount > 0 || direction === "DEBIT" /* DEBIT */ && amount < 0;
   valueClasses.push(
-    direction === "CREDIT" /* CREDIT */ ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
+    positive ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
   );
   labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
   valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
-  variantName && labelClasses.push(
-    `Layer__profit-and-loss-row__label--variant-${variantName}`
+  variant && labelClasses.push(`Layer__profit-and-loss-row__label--variant-${variant}`);
+  variant && valueClasses.push(`Layer__profit-and-loss-row__value--variant-${variant}`);
+  const toggleExpanded = () => setExpanded(!expanded);
+  const canGoDeeper = depth < maxDepth;
+  const hasChildren = (line_items?.length ?? 0) > 0;
+  const displayChildren = hasChildren && canGoDeeper;
+  labelClasses.push(
+    `Layer__profit-and-loss-row__label--display-children-${displayChildren}`
   );
-  variantName && valueClasses.push(
-    `Layer__profit-and-loss-row__value--variant-${variantName}`
+  valueClasses.push(
+    `Layer__profit-and-loss-row__value--display-children-${displayChildren}`
   );
-  return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null, /* @__PURE__ */ import_react19.default.createElement("div", { className: labelClasses.join(" ") }, display_name), /* @__PURE__ */ import_react19.default.createElement("div", { className: valueClasses.join(" ") }, amountString), depth < maxDepth && (line_items || []).map((line_item) => /* @__PURE__ */ import_react19.default.createElement(
-    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_react36.default.createElement(import_react36.default.Fragment, null, /* @__PURE__ */ import_react36.default.createElement("div", { className: labelClasses.join(" "), onClick: toggleExpanded }, /* @__PURE__ */ import_react36.default.createElement(ChevronDown_default, { size: 16 }), display_name), /* @__PURE__ */ import_react36.default.createElement("div", { className: valueClasses.join(" ") }, amountString), canGoDeeper && hasChildren && /* @__PURE__ */ import_react36.default.createElement(
+    "div",
     {
-      key: line_item.display_name,
-      lineItem: line_item,
-      depth: depth + 1,
-      maxDepth,
-      direction
-    }
-  )));
+      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
+    },
+    /* @__PURE__ */ import_react36.default.createElement("div", { className: "Layer__balance-sheet-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react36.default.createElement(
+      ProfitAndLossRow,
+      {
+        key: line_item.display_name,
+        lineItem: line_item,
+        depth: depth + 1,
+        maxDepth,
+        direction
+      }
+    )), summarize && /* @__PURE__ */ import_react36.default.createElement(
+      ProfitAndLossRow,
+      {
+        key: display_name,
+        lineItem: { value, display_name: `Total of ${display_name}` },
+        variant: "summation",
+        depth: depth + 1,
+        maxDepth
+      }
+    ))
+  ));
+};
+
+// src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
+var empty_profit_and_loss_report_default = {
+  type: "Profit_And_Loss",
+  business_id: "",
+  start_date: "",
+  end_date: "",
+  income: {
+    name: "INCOME",
+    display_name: "Income",
+    value: NaN,
+    line_items: null
+  },
+  cost_of_goods_sold: {
+    display_name: "Cost of Goods Sold",
+    name: "COGS",
+    value: NaN,
+    line_items: null
+  },
+  gross_profit: NaN,
+  expenses: {
+    name: "EXPENSES",
+    display_name: "Expenses",
+    value: NaN,
+    line_items: null
+  },
+  profit_before_taxes: NaN,
+  taxes: {
+    name: "TAXES",
+    display_name: "Taxes",
+    value: NaN,
+    line_items: null
+  },
+  net_profit: NaN,
+  other_outflows: {
+    name: "OTHER_OUTFLOWS",
+    display_name: "Other outflows",
+    value: NaN,
+    line_items: null
+  },
+  personal_expenses: {
+    name: "PERSONAL",
+    display_name: "Personal expenses",
+    value: NaN,
+    line_items: null
+  },
+  fully_categorized: false
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 var ProfitAndLossTable = () => {
-  const { data, isLoading } = (0, import_react20.useContext)(ProfitAndLoss.Context);
-  return /* @__PURE__ */ import_react20.default.createElement("div", { className: "Layer__profit-and-loss-table" }, !data || isLoading ? /* @__PURE__ */ import_react20.default.createElement("div", null, "Loading") : /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement(
-    ProfitAndLossRow,
-    {
-      lineItem: data.income,
-      direction: "CREDIT" /* CREDIT */
-    }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  const { data: actualData, isLoading } = (0, import_react37.useContext)(ProfitAndLoss.Context);
+  const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
+  return /* @__PURE__ */ import_react37.default.createElement(import_react37.default.Fragment, null, /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__profit-and-loss-table" }, /* @__PURE__ */ import_react37.default.createElement(ProfitAndLossRow, { lineItem: data.income, direction: "CREDIT" /* CREDIT */ }), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
         value: data.gross_profit,
         display_name: "Gross Profit"
       },
-      variant: "GROSS",
+      variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
         value: data.profit_before_taxes,
         display_name: "Profit Before Taxes"
       },
-      variant: "BEFORETAX",
+      variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(ProfitAndLossRow, { lineItem: data.taxes, direction: "DEBIT" /* DEBIT */ }), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
         value: data.net_profit,
         display_name: "Net Profit"
       },
-      variant: "NETPROFIT",
+      variant: "summation",
       direction: "CREDIT" /* CREDIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  )), /* @__PURE__ */ import_react37.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */
     }
-  ), /* @__PURE__ */ import_react20.default.createElement(
+  ), /* @__PURE__ */ import_react37.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
@@ -1542,7 +2899,7 @@ var ProfitAndLossTable = () => {
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns9 = require("date-fns");
-var PNLContext = (0, import_react21.createContext)({
+var PNLContext = (0, import_react38.createContext)({
   data: void 0,
   isLoading: true,
   error: void 0,
@@ -1555,7 +2912,7 @@ var PNLContext = (0, import_react21.createContext)({
 });
 var ProfitAndLoss = ({ children }) => {
   const contextData = useProfitAndLoss();
-  return /* @__PURE__ */ import_react21.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "Layer__profit-and-loss" }, /* @__PURE__ */ import_react21.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
+  return /* @__PURE__ */ import_react38.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, /* @__PURE__ */ import_react38.default.createElement("h2", { className: "Layer__profit-and-loss__title" }, "Profit & Loss"), children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -1564,12 +2921,14 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/providers/LayerProvider/LayerProvider.tsx
-var import_react22 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
+var import_date_fns10 = require("date-fns");
 var import_swr5 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
     case "LayerContext.setCategories" /* setCategories */:
+    case "LayerContext.setTheme" /* setTheme */:
       return { ...state, ...action.payload };
     default:
       return state;
@@ -1578,11 +2937,13 @@ var reducer = (state, action) => {
 var LayerEnvironment = {
   production: {
     url: "not defined yet",
-    scope: "not defined yet"
+    scope: "not defined yet",
+    apiUrl: "not defined yet"
   },
   staging: {
     url: "https://auth.layerfi.com/oauth2/token",
-    scope: "https://sandbox.layerfi.com/sandbox"
+    scope: "https://sandbox.layerfi.com/sandbox",
+    apiUrl: "https://sandbox.layerfi.com"
   }
 };
 var LayerProvider = ({
@@ -1591,7 +2952,8 @@ var LayerProvider = ({
   businessId,
   children,
   clientId,
-  environment = "production"
+  environment = "production",
+  theme
 }) => {
   const defaultSWRConfig = {
     revalidateInterval: 0,
@@ -1599,14 +2961,21 @@ var LayerProvider = ({
     revalidateOnReconnect: false,
     revalidateIfStale: false
   };
-  const { url, scope } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react22.useReducer)(reducer, {
-    auth: { access_token: "", token_type: "", expires_in: 0 },
+  const { url, scope, apiUrl } = LayerEnvironment[environment];
+  const [state, dispatch] = (0, import_react39.useReducer)(reducer, {
+    auth: {
+      access_token: "",
+      token_type: "",
+      expires_in: 0,
+      expires_at: new Date(2e3, 1, 1)
+    },
     businessId,
-    categories: []
+    categories: [],
+    apiUrl,
+    theme
   });
   const { data: auth } = (0, import_swr5.default)(
-    "authenticate",
+    (0, import_date_fns10.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
@@ -1616,30 +2985,199 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   );
-  (0, import_react22.useEffect)(() => {
-    if (!!auth?.access_token) {
-      dispatch({ type: "LayerContext.setAuth" /* setAuth */, payload: { auth } });
+  (0, import_react39.useEffect)(() => {
+    if (auth?.access_token) {
+      dispatch({
+        type: "LayerContext.setAuth" /* setAuth */,
+        payload: {
+          auth: {
+            ...auth,
+            expires_at: (0, import_date_fns10.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
+          }
+        }
+      });
     }
   }, [auth?.access_token]);
   const { data: categories } = (0, import_swr5.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
-    Layer.getCategories(auth?.access_token, { params: { businessId } }),
+    Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     defaultSWRConfig
   );
-  (0, import_react22.useEffect)(() => {
-    if (!!categories?.data?.categories?.length) {
+  (0, import_react39.useEffect)(() => {
+    if (categories?.data?.categories?.length) {
       dispatch({
         type: "LayerContext.setCategories" /* setCategories */,
         payload: { categories: categories.data.categories || [] }
       });
     }
   }, [categories?.data?.categories?.length]);
-  return /* @__PURE__ */ import_react22.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react22.default.createElement(LayerContext.Provider, { value: state }, children));
+  const setTheme = (theme2) => dispatch({
+    type: "LayerContext.setTheme" /* setTheme */,
+    payload: { theme: theme2 }
+  });
+  return /* @__PURE__ */ import_react39.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react39.default.createElement(LayerContext.Provider, { value: { ...state, setTheme } }, children));
+};
+
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+var import_react42 = __toESM(require("react"));
+
+// src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
+var import_swr6 = __toESM(require("swr"));
+var useChartOfAccounts = () => {
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const { data, isLoading, error, mutate } = (0, import_swr6.default)(
+    businessId && auth?.access_token && `chart-of-accounts-${businessId}`,
+    Layer.getChartOfAccounts(apiUrl, auth?.access_token, {
+      params: { businessId }
+    })
+  );
+  const create = (newAccount) => Layer.createAccount(apiUrl, auth?.access_token, {
+    params: { businessId },
+    body: newAccount
+  }).then(({ data: data2 }) => (mutate(), data2));
+  return { data: data?.data, isLoading, error, create };
+};
+
+// src/components/ChartOfAccountsNewForm/ChartOfAccountsNewForm.tsx
+var import_react40 = __toESM(require("react"));
+var import_react_select2 = __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_react40.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_react40.useState)("");
+  const [description, setDescription] = (0, import_react40.useState)("");
+  const [normality, setNormality] = (0, import_react40.useState)("DEBIT" /* DEBIT */);
+  const [parentAccount, setParentAccount] = (0, import_react40.useState)(
+    data?.accounts[0]
+  );
+  const save = () => {
+    createAccount2({
+      name,
+      normality,
+      parent_id: {
+        type: "AccountId",
+        id: parentAccount?.id || ""
+      },
+      description
+    });
+  };
+  return /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react40.default.createElement(
+    "input",
+    {
+      name: "name",
+      value: name,
+      onChange: (event) => setName(event.target.value)
+    }
+  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react40.default.createElement(
+    "input",
+    {
+      name: "description",
+      value: description,
+      onChange: (event) => setDescription(event.target.value)
+    }
+  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react40.default.createElement(
+    import_react_select2.default,
+    {
+      isSearchable: false,
+      onChange: (value) => value && setNormality(value.value),
+      options: [
+        { label: "Credit", value: "CREDIT" /* CREDIT */ },
+        { label: "Debit", value: "DEBIT" /* DEBIT */ }
+      ]
+    }
+  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react40.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react40.default.createElement(
+    import_react_select2.default,
+    {
+      isSearchable: true,
+      value: parentAccount,
+      onChange: (value) => value && setParentAccount(value),
+      getOptionLabel: (a) => a.name,
+      getOptionValue: (a) => a.id,
+      options: accountOptions
+    }
+  )), /* @__PURE__ */ import_react40.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react40.default.createElement("button", { onClick: save }, "Save")));
+};
+
+// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
+var import_react41 = __toESM(require("react"));
+var ChartOfAccountsRow = ({ account, depth = 0 }) => {
+  const classNames12 = [
+    "Layer__chart-of-accounts-row__table-cell",
+    depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
+  ];
+  const className = classNames12.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_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
+    "div",
+    {
+      className: `${className} Layer__chart-of-accounts-row__table-cell--name`
+    },
+    account.name
+  ), /* @__PURE__ */ import_react41.default.createElement(
+    "div",
+    {
+      className: `${className} Layer__chart-of-accounts-row__table-cell--type`
+    },
+    "Assets"
+  ), /* @__PURE__ */ import_react41.default.createElement(
+    "div",
+    {
+      className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
+    },
+    "Cash"
+  ), /* @__PURE__ */ import_react41.default.createElement(
+    "div",
+    {
+      className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
+    },
+    centsToDollars(Math.abs(account.balance || 0))
+  ), /* @__PURE__ */ import_react41.default.createElement(
+    "div",
+    {
+      className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
+    },
+    /* @__PURE__ */ import_react41.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
+  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react41.default.createElement(
+    ChartOfAccountsRow,
+    {
+      key: subAccount.id,
+      account: subAccount,
+      depth: depth + 1
+    }
+  )));
+};
+
+// src/components/ChartOfAccounts/ChartOfAccounts.tsx
+var ChartOfAccounts = () => {
+  const { data, isLoading } = useChartOfAccounts();
+  const [showingForm, setShowingForm] = (0, import_react42.useState)(false);
+  return /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react42.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react42.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react42.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react42.default.createElement(
+    "button",
+    {
+      className: "Layer__chart-of-accounts__edit-accounts-button",
+      onClick: () => setShowingForm(!showingForm)
+    },
+    "Edit Accounts"
+  ))), showingForm && /* @__PURE__ */ import_react42.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react42.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_react42.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react42.default.createElement(
+    ChartOfAccountsRow,
+    {
+      key: account.id,
+      account,
+      depth: 0
+    }
+  )))));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BalanceSheet,
   BankTransactions,
+  ChartOfAccounts,
   Hello,
   LayerProvider,
   ProfitAndLoss