@layerfi/components 0.1.8 → 0.1.9

package/dist/index.js

@@ -32,9 +32,9 @@ var src_exports = {};
 __export(src_exports, {
   BalanceSheet: () => BalanceSheet,
   BankTransactions: () => BankTransactions,
-  ChartOfAccounts: () => ChartOfAccounts,
   Hello: () => Hello,
   LayerProvider: () => LayerProvider,
+  LedgerAccounts: () => LedgerAccounts,
   LinkedAccounts: () => LinkedAccounts,
   ProfitAndLoss: () => ProfitAndLoss,
   ProfitAndLossView: () => ProfitAndLossView
@@ -304,8 +304,8 @@ var matchBankTransaction = put(
 // src/api/layer/categories.ts
 var getCategories = get(({ businessId }) => `/v1/businesses/${businessId}/categories`);
 
-// src/api/layer/chart_of_accounts.ts
-var getChartOfAccounts = get(
+// src/api/layer/ledger_accounts.ts
+var getLedgerAccounts = get(
   ({ businessId }) => `/v1/businesses/${businessId}/ledger/accounts`
 );
 var createAccount = post(
@@ -326,7 +326,7 @@ var Layer = {
   getBalanceSheet,
   getBankTransactions,
   getCategories,
-  getChartOfAccounts,
+  getLedgerAccounts,
   getProfitAndLoss
 };
 
@@ -371,23 +371,41 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
 
 // src/icons/DownloadCloud.tsx
 var React = __toESM(require("react"));
-var DownloadCloud = (props) => /* @__PURE__ */ React.createElement(
+var DownloadCloud = ({ size = 18, ...props }) => /* @__PURE__ */ React.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
+    viewBox: "0 0 18 18",
     fill: "none",
-    ...props
+    ...props,
+    width: size,
+    height: size
   },
   /* @__PURE__ */ React.createElement(
     "path",
     {
-      stroke: "#000",
+      d: "M6 12.75L9 15.75L12 12.75",
+      stroke: "currentColor",
       strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: 2,
-      d: "M4 16.242A4.5 4.5 0 0 1 6.08 8.02a6.002 6.002 0 0 1 11.84 0A4.5 4.5 0 0 1 20 16.242M8 17l4 4m0 0 4-4m-4 4v-9"
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M9 9V15.75",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React.createElement(
+    "path",
+    {
+      d: "M15.66 13.5675C16.3121 13.109 16.801 12.4546 17.056 11.6994C17.3109 10.9441 17.3186 10.1273 17.0778 9.36737C16.837 8.60748 16.3604 7.94407 15.7171 7.47342C15.0737 7.00278 14.2971 6.74938 13.5 6.75H12.555C12.3294 5.87091 11.9074 5.05444 11.3206 4.36206C10.7338 3.66969 9.99762 3.11945 9.16742 2.75277C8.33721 2.38609 7.43464 2.21252 6.52766 2.24514C5.62067 2.27776 4.7329 2.51571 3.93118 2.94107C3.12946 3.36644 2.43468 3.96814 1.89915 4.70087C1.36362 5.43361 1.0013 6.27829 0.839456 7.17132C0.677613 8.06434 0.720468 8.98245 0.964796 9.85652C1.20912 10.7306 1.64856 11.5378 2.25001 12.2175",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
     }
   )
 );
@@ -606,7 +624,7 @@ var BalanceSheet = () => {
 };
 
 // src/components/BankTransactions/BankTransactions.tsx
-var import_react42 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 
 // src/config/general.ts
 var DATE_FORMAT = "LLL d, yyyy";
@@ -762,7 +780,7 @@ var debounce = (fnc, timeout = 300) => {
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
-var import_react35 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 
 // src/icons/ChevronDownFill.tsx
 var React8 = __toESM(require("react"));
@@ -790,7 +808,7 @@ var ChevronDownFill = ({ size = 18, ...props }) => /* @__PURE__ */ React8.create
 var ChevronDownFill_default = ChevronDownFill;
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
-var import_react33 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/icons/AlertCircle.tsx
 var React9 = __toESM(require("react"));
@@ -1426,8 +1444,12 @@ var import_classnames4 = __toESM(require("classnames"));
 var buildRightIcon = ({
   processing,
   error,
-  action
+  action,
+  noIcon
 }) => {
+  if (noIcon) {
+    return;
+  }
   if (processing) {
     return /* @__PURE__ */ import_react15.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" });
   }
@@ -1447,6 +1469,7 @@ var SubmitButton = ({
   error,
   children,
   action = "save" /* SAVE */,
+  noIcon,
   ...props
 }) => {
   const baseClassName = (0, import_classnames4.default)(
@@ -1460,7 +1483,7 @@ var SubmitButton = ({
       className: baseClassName,
       variant: "primary" /* primary */,
       disabled: processing || disabled,
-      rightIcon: buildRightIcon({ processing, error, action }),
+      rightIcon: buildRightIcon({ processing, error, action, noIcon }),
       iconAsPrimary: true
     },
     children
@@ -1759,7 +1782,7 @@ var CategorySelect = ({
 };
 
 // src/components/ExpandedBankTransactionRow/ExpandedBankTransactionRow.tsx
-var import_react31 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 
 // src/icons/ScissorsFullOpen.tsx
 var React26 = __toESM(require("react"));
@@ -2055,9 +2078,14 @@ var InputGroup = ({
   label,
   name,
   className,
+  inline,
   children
 }) => {
-  const baseClassName = (0, import_classnames12.default)("Layer__input-group", className);
+  const baseClassName = (0, import_classnames12.default)(
+    "Layer__input-group",
+    className,
+    inline && "Layer__input-group--inline"
+  );
   return /* @__PURE__ */ import_react24.default.createElement("div", { className: baseClassName }, label && /* @__PURE__ */ import_react24.default.createElement(
     Text,
     {
@@ -2157,11 +2185,43 @@ var FileInput = ({ text = "Upload", onUpload }) => {
   ));
 };
 
+// src/components/Input/Select.tsx
+var import_react26 = __toESM(require("react"));
+var import_react_select3 = __toESM(require("react-select"));
+var DropdownIndicator3 = (props) => {
+  return /* @__PURE__ */ import_react26.default.createElement(import_react_select3.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react26.default.createElement(ChevronDownFill_default, null));
+};
+var Select3 = ({
+  name,
+  options,
+  className,
+  classNamePrefix = "Layer__select",
+  value,
+  onChange,
+  disabled
+}) => {
+  return /* @__PURE__ */ import_react26.default.createElement(
+    import_react_select3.default,
+    {
+      name,
+      className: `Layer__select ${className ?? ""}`,
+      classNamePrefix,
+      options,
+      value,
+      onChange: (newValue) => newValue && onChange(newValue),
+      menuPortalTarget: document.body,
+      styles: { menuPortal: (base) => ({ ...base, zIndex: 9999 }) },
+      components: { DropdownIndicator: DropdownIndicator3 },
+      isDisabled: disabled
+    }
+  );
+};
+
 // src/components/MatchForm/MatchForm.tsx
-var import_react27 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 
 // src/components/BankTransactionRow/MatchBadge.tsx
-var import_react26 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var import_date_fns5 = require("date-fns");
 var MatchBadge = ({
   bankTransaction,
@@ -2171,11 +2231,11 @@ var MatchBadge = ({
 }) => {
   if (bankTransaction.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction.match) {
     const { date, amount, description } = bankTransaction.match.bank_transaction;
-    return /* @__PURE__ */ import_react26.default.createElement(
+    return /* @__PURE__ */ import_react27.default.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ import_react26.default.createElement(MinimizeTwo_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ import_react26.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ import_react26.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
+        icon: /* @__PURE__ */ import_react27.default.createElement(MinimizeTwo_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ import_react27.default.createElement("span", { className: `${classNamePrefix}__match-tooltip` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__date` }, (0, import_date_fns5.format)((0, import_date_fns5.parseISO)(date), dateFormat)), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__description` }, description), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-tooltip__amount` }, "$", centsToDollars(amount)))
       },
       text
     );
@@ -2193,13 +2253,13 @@ var MatchForm = ({
   setSelectedMatchId,
   matchFormError
 }) => {
-  return /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ import_react27.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table` }, /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__header` }, /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__date` }, "Date"), /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, "Description"), /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "Amount"), /* @__PURE__ */ import_react28.default.createElement(
     "div",
     {
       className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
     }
   )), bankTransaction.suggested_matches?.map((match, idx) => {
-    return /* @__PURE__ */ import_react27.default.createElement(
+    return /* @__PURE__ */ import_react28.default.createElement(
       "div",
       {
         key: idx,
@@ -2215,15 +2275,15 @@ var MatchForm = ({
           setSelectedMatchId(match.id);
         }
       },
-      /* @__PURE__ */ import_react27.default.createElement(
+      /* @__PURE__ */ import_react28.default.createElement(
         "div",
         {
           className: `Layer__nowrap ${classNamePrefix}__match-table__date`
         },
-        /* @__PURE__ */ import_react27.default.createElement("span", null, (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(match.details.date), DATE_FORMAT)),
-        /* @__PURE__ */ import_react27.default.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
+        /* @__PURE__ */ import_react28.default.createElement("span", null, (0, import_date_fns6.format)((0, import_date_fns6.parseISO)(match.details.date), DATE_FORMAT)),
+        /* @__PURE__ */ import_react28.default.createElement("span", { className: "amount-next-to-date" }, "$", centsToDollars(match.details.amount))
       ),
-      /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ import_react27.default.createElement(
+      /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__desc` }, /* @__PURE__ */ import_react28.default.createElement(
         Text,
         {
           className: `${classNamePrefix}__match-table__desc-tooltip`,
@@ -2231,7 +2291,7 @@ var MatchForm = ({
           as: "span"
         },
         match.details.description
-      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react27.default.createElement("span", { className: "match-badge" }, /* @__PURE__ */ import_react27.default.createElement(
+      ), match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react28.default.createElement("span", { className: "match-badge" }, /* @__PURE__ */ import_react28.default.createElement(
         MatchBadge,
         {
           classNamePrefix,
@@ -2240,13 +2300,13 @@ var MatchForm = ({
           text: "Matched"
         }
       ))),
-      /* @__PURE__ */ import_react27.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
-      /* @__PURE__ */ import_react27.default.createElement(
+      /* @__PURE__ */ import_react28.default.createElement("div", { className: `${classNamePrefix}__match-table__amount` }, "$", centsToDollars(match.details.amount)),
+      /* @__PURE__ */ import_react28.default.createElement(
         "div",
         {
           className: `${classNamePrefix}__match-table__status ${bankTransaction.match ? "" : "no-match"}`
         },
-        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react27.default.createElement(
+        match.details.id === bankTransaction.match?.details.id && /* @__PURE__ */ import_react28.default.createElement(
           MatchBadge,
           {
             classNamePrefix,
@@ -2257,22 +2317,22 @@ var MatchForm = ({
         )
       )
     );
-  }), matchFormError && /* @__PURE__ */ import_react27.default.createElement(ErrorText, null, matchFormError));
+  }), matchFormError && /* @__PURE__ */ import_react28.default.createElement(ErrorText, null, matchFormError));
 };
 
 // src/components/Textarea/Textarea.tsx
-var import_react28 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_classnames14 = __toESM(require("classnames"));
 var Textarea = ({
   className,
   ...props
 }) => {
   const baseClassName = (0, import_classnames14.default)("Layer__textarea", className);
-  return /* @__PURE__ */ import_react28.default.createElement("textarea", { ...props, className: baseClassName });
+  return /* @__PURE__ */ import_react29.default.createElement("textarea", { ...props, className: baseClassName });
 };
 
 // src/components/Toggle/Toggle.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_classnames15 = __toESM(require("classnames"));
 var Toggle = ({
   name,
@@ -2281,9 +2341,9 @@ var Toggle = ({
   onChange,
   size = "medium" /* medium */
 }) => {
-  const [currentWidth, setCurrentWidth] = (0, import_react29.useState)(0);
-  const [thumbPos, setThumbPos] = (0, import_react29.useState)({ left: 0, width: 0 });
-  const [initialized, setInitialized] = (0, import_react29.useState)(false);
+  const [currentWidth, setCurrentWidth] = (0, import_react30.useState)(0);
+  const [thumbPos, setThumbPos] = (0, import_react30.useState)({ left: 0, width: 0 });
+  const [initialized, setInitialized] = (0, import_react30.useState)(false);
   const toggleRef = useElementSize((a, b, c) => {
     if (c.width && c?.width !== currentWidth) {
       setCurrentWidth(c.width);
@@ -2318,14 +2378,14 @@ var Toggle = ({
     shift2 = shift2 + (size === "medium" /* medium */ ? 2 : 1.5);
     setThumbPos({ left: shift2, width });
   };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
     setTimeout(() => {
       setInitialized(true);
     }, 400);
   }, []);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const selectedIndex = getSelectedIndex();
     updateThumbPosition(selectedIndex);
   }, [currentWidth]);
@@ -2338,7 +2398,7 @@ var Toggle = ({
     }
     return selectedIndex;
   };
-  return /* @__PURE__ */ import_react29.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement("div", { className: baseClassName, ref: toggleRef }, options.map((option, index) => /* @__PURE__ */ import_react30.default.createElement(
     ToggleOption,
     {
       ...option,
@@ -2350,7 +2410,7 @@ var Toggle = ({
       disabled: option.disabled ?? false,
       index
     }
-  )), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
+  )), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle__thumb", style: { ...thumbPos } }));
 };
 var ToggleOption = ({
   checked,
@@ -2364,7 +2424,7 @@ var ToggleOption = ({
   index
 }) => {
   if (disabled) {
-    return /* @__PURE__ */ import_react29.default.createElement(Tooltip, null, /* @__PURE__ */ import_react29.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react29.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react29.default.createElement(
+    return /* @__PURE__ */ import_react30.default.createElement(Tooltip, null, /* @__PURE__ */ import_react30.default.createElement(TooltipTrigger, null, /* @__PURE__ */ import_react30.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react30.default.createElement(
       "input",
       {
         type: "radio",
@@ -2375,9 +2435,9 @@ var ToggleOption = ({
         disabled: disabled ?? false,
         "data-idx": index
       }
-    ), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react29.default.createElement("span", null, label)))), /* @__PURE__ */ import_react29.default.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
+    ), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react30.default.createElement("span", null, label)))), /* @__PURE__ */ import_react30.default.createElement(TooltipContent, { className: "Layer__tooltip" }, "We could not find matching transactions"));
   }
-  return /* @__PURE__ */ import_react29.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react29.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement("label", { className: `Layer__toggle-option`, "data-checked": checked }, /* @__PURE__ */ import_react30.default.createElement(
     "input",
     {
       type: "radio",
@@ -2388,15 +2448,15 @@ var ToggleOption = ({
       disabled: disabled ?? false,
       "data-idx": index
     }
-  ), /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react29.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react29.default.createElement("span", null, label)));
+  ), /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option-content" }, leftIcon && /* @__PURE__ */ import_react30.default.createElement("span", { className: "Layer__toggle-option__icon" }, leftIcon), /* @__PURE__ */ import_react30.default.createElement("span", null, label)));
 };
 
 // src/components/ExpandedBankTransactionRow/APIErrorNotifications.tsx
-var import_react30 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 
 // src/icons/AlertOctagon.tsx
-var React40 = __toESM(require("react"));
-var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React40.createElement(
+var React41 = __toESM(require("react"));
+var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React41.createElement(
   "svg",
   {
     viewBox: "0 0 18 18",
@@ -2406,7 +2466,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React40.createEl
     width: size,
     height: size
   },
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React41.createElement(
     "path",
     {
       d: "M5.895 1.5H12.105L16.5 5.895V12.105L12.105 16.5H5.895L1.5 12.105V5.895L5.895 1.5Z",
@@ -2415,7 +2475,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React40.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React41.createElement(
     "path",
     {
       d: "M9 6V9",
@@ -2424,7 +2484,7 @@ var AlertOctagon = ({ size = 18, ...props }) => /* @__PURE__ */ React40.createEl
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React41.createElement(
     "path",
     {
       d: "M9 12H9.0075",
@@ -2446,7 +2506,7 @@ var APIErrorNotifications = ({
   bankTransaction,
   containerWidth
 }) => {
-  const [notifications, setNotifications] = (0, import_react30.useState)([]);
+  const [notifications, setNotifications] = (0, import_react31.useState)([]);
   const pushNotification = (title, message) => {
     const timestamp = (/* @__PURE__ */ new Date()).valueOf();
     if (notificationsCache.find(
@@ -2475,18 +2535,18 @@ var APIErrorNotifications = ({
     );
     setNotifications(notificationsCache.concat());
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (bankTransaction.error) {
       pushNotification(ERROR_TITLE, ERROR_MESSAGE);
     }
   }, [bankTransaction.error]);
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "div",
     {
       className: "Layer__bank-transactions__notifications",
       style: containerWidth ? { left: containerWidth - 324 } : {}
     },
-    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ import_react30.default.createElement(
+    notifications.filter((n) => n.bankTransactionId === bankTransaction.id).map((notification) => /* @__PURE__ */ import_react31.default.createElement(
       Notification,
       {
         key: notification.timestamp,
@@ -2500,8 +2560,8 @@ var Notification = ({
   notification,
   deleteNotification
 }) => {
-  const [visible, setVisible] = (0, import_react30.useState)(false);
-  (0, import_react30.useEffect)(() => {
+  const [visible, setVisible] = (0, import_react31.useState)(false);
+  (0, import_react31.useEffect)(() => {
     setVisible(true);
     const timer = setTimeout(() => {
       hideNotification();
@@ -2514,20 +2574,20 @@ var Notification = ({
       deleteNotification(notification.timestamp);
     }, FADE_OUT_TIME_WAIT);
   };
-  return /* @__PURE__ */ import_react30.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     "div",
     {
       className: `Layer__bank-transactions__notification ${visible ? "notification-enter" : "notification-exit"}`,
       onClick: hideNotification
     },
-    /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ import_react30.default.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ import_react30.default.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ import_react30.default.createElement(
+    /* @__PURE__ */ import_react31.default.createElement("div", { className: "Layer__bank-transactions__notification-content" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "Layer__bank-transactions__notification-icon" }, /* @__PURE__ */ import_react31.default.createElement(AlertOctagon_default, { size: 14 })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "Layer__bank-transactions__notification-text" }, /* @__PURE__ */ import_react31.default.createElement(
       Text,
       {
         as: "span",
         className: "Layer__bank-transactions__notification-title"
       },
       notification.title
-    ), /* @__PURE__ */ import_react30.default.createElement(
+    ), /* @__PURE__ */ import_react31.default.createElement(
       Text,
       {
         as: "span",
@@ -2565,7 +2625,7 @@ var validateSplit = (splitData) => {
   });
   return valid;
 };
-var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
+var ExpandedBankTransactionRow = (0, import_react32.forwardRef)(
   ({
     bankTransaction,
     isOpen = false,
@@ -2578,20 +2638,20 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
       categorize: categorizeBankTransaction2,
       match: matchBankTransaction2
     } = useBankTransactions();
-    const [purpose, setPurpose] = (0, import_react31.useState)(
+    const [purpose, setPurpose] = (0, import_react32.useState)(
       bankTransaction.category ? "categorize" /* categorize */ : hasMatch(bankTransaction) ? "match" /* match */ : "categorize" /* categorize */
     );
-    const [selectedMatchId, setSelectedMatchId] = (0, import_react31.useState)(
+    const [selectedMatchId, setSelectedMatchId] = (0, import_react32.useState)(
       isAlreadyMatched(bankTransaction)
     );
-    const [matchFormError, setMatchFormError] = (0, import_react31.useState)();
-    const [splitFormError, setSplitFormError] = (0, import_react31.useState)();
-    const [height, setHeight] = (0, import_react31.useState)(0);
-    const [isOver, setOver] = (0, import_react31.useState)(false);
-    const bodyRef = (0, import_react31.useRef)(null);
-    const [isLoaded, setIsLoaded] = (0, import_react31.useState)(false);
+    const [matchFormError, setMatchFormError] = (0, import_react32.useState)();
+    const [splitFormError, setSplitFormError] = (0, import_react32.useState)();
+    const [height, setHeight] = (0, import_react32.useState)(0);
+    const [isOver, setOver] = (0, import_react32.useState)(false);
+    const bodyRef = (0, import_react32.useRef)(null);
+    const [isLoaded, setIsLoaded] = (0, import_react32.useState)(false);
     const defaultCategory = bankTransaction.category || hasSuggestions(bankTransaction.categorization_flow) && bankTransaction.categorization_flow?.suggestions?.[0];
-    const [rowState, updateRowState] = (0, import_react31.useState)({
+    const [rowState, updateRowState] = (0, import_react32.useState)({
       splits: bankTransaction.category?.entries ? bankTransaction.category?.entries.map((c) => {
         return {
           amount: c.amount || 0,
@@ -2704,7 +2764,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
         }
       );
     };
-    (0, import_react31.useImperativeHandle)(ref, () => ({
+    (0, import_react32.useImperativeHandle)(ref, () => ({
       save
     }));
     const onMatchSubmit = (matchId) => {
@@ -2716,11 +2776,11 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
       }
       matchBankTransaction2(bankTransaction.id, foundMatch.id);
     };
-    const getDivHeight = (0, import_react31.useCallback)(() => {
+    const getDivHeight = (0, import_react32.useCallback)(() => {
       const { height: height2 } = bodyRef.current ? bodyRef.current.getBoundingClientRect() : { height: void 0 };
       return height2 || 0;
     }, []);
-    const handleTransitionEnd = (0, import_react31.useCallback)(
+    const handleTransitionEnd = (0, import_react32.useCallback)(
       (e) => {
         if (e.propertyName === "height") {
           setHeight(isOpen ? "auto" : 0);
@@ -2731,7 +2791,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
       },
       [isOpen]
     );
-    (0, import_react31.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       if (!isLoaded) {
         return;
       }
@@ -2743,20 +2803,20 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
         });
       }
     }, [getDivHeight, isOpen]);
-    (0, import_react31.useEffect)(() => {
+    (0, import_react32.useEffect)(() => {
       setIsLoaded(true);
       setOver(true);
     }, []);
     const className = "Layer__expanded-bank-transaction-row";
     const shouldHide = !isOpen && isOver;
-    return /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(
       "span",
       {
         className: `${className} ${className}--${isOpen ? "expanded" : "collapsed"}`,
         style: { height },
         onTransitionEnd: handleTransitionEnd
       },
-      shouldHide ? null : /* @__PURE__ */ import_react31.default.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react31.default.createElement(
+      shouldHide ? null : /* @__PURE__ */ import_react32.default.createElement("span", { className: `${className}__wrapper`, ref: bodyRef }, /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-toggle` }, /* @__PURE__ */ import_react32.default.createElement(
         Toggle,
         {
           name: `purpose-${bankTransaction.id}${asListItem ? "-li" : ""}`,
@@ -2775,13 +2835,13 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
           selected: purpose,
           onChange: onChangePurpose
         }
-      )), /* @__PURE__ */ import_react31.default.createElement(
+      )), /* @__PURE__ */ import_react32.default.createElement(
         "div",
         {
           className: `${className}__content`,
           id: `expanded-${bankTransaction.id}`
         },
-        /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react31.default.createElement(
+        /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-panels` }, /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
             className: (0, import_classnames16.default)(
@@ -2790,7 +2850,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
               purpose === "match" /* match */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react31.default.createElement(
+          /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react32.default.createElement(
             MatchForm,
             {
               classNamePrefix: className,
@@ -2803,7 +2863,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
               matchFormError
             }
           ))
-        ), /* @__PURE__ */ import_react31.default.createElement(
+        ), /* @__PURE__ */ import_react32.default.createElement(
           "div",
           {
             className: (0, import_classnames16.default)(
@@ -2812,13 +2872,13 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
               purpose === "categorize" /* categorize */ ? `${className}__content-panel--active` : ""
             )
           },
-          /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react31.default.createElement(
+          /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__content-panel-container` }, /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__splits-inputs` }, rowState.splits.map((split, index) => /* @__PURE__ */ import_react32.default.createElement(
             "div",
             {
               className: `${className}__table-cell--split-entry`,
               key: `split-${index}`
             },
-            /* @__PURE__ */ import_react31.default.createElement(
+            /* @__PURE__ */ import_react32.default.createElement(
               Input,
               {
                 type: "text",
@@ -2831,12 +2891,12 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
                 errorMessage: "Negative values are not allowed"
               }
             ),
-            /* @__PURE__ */ import_react31.default.createElement(
+            /* @__PURE__ */ import_react32.default.createElement(
               "div",
               {
                 className: `${className}__table-cell--split-entry__right-col`
               },
-              /* @__PURE__ */ import_react31.default.createElement(
+              /* @__PURE__ */ import_react32.default.createElement(
                 CategoryMenu,
                 {
                   bankTransaction,
@@ -2846,18 +2906,18 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
                   className: "Layer__category-menu--full"
                 }
               ),
-              index > 0 && /* @__PURE__ */ import_react31.default.createElement(
+              index > 0 && /* @__PURE__ */ import_react32.default.createElement(
                 Button,
                 {
                   className: `${className}__table-cell--split-entry__merge-btn`,
                   onClick: () => removeSplit(index),
-                  rightIcon: /* @__PURE__ */ import_react31.default.createElement(Trash_default, { size: 18 }),
+                  rightIcon: /* @__PURE__ */ import_react32.default.createElement(Trash_default, { size: 18 }),
                   variant: "secondary" /* secondary */,
                   iconOnly: true
                 }
               )
             )
-          ))), splitFormError && /* @__PURE__ */ import_react31.default.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ import_react31.default.createElement(
+          ))), splitFormError && /* @__PURE__ */ import_react32.default.createElement(ErrorText, null, splitFormError), /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__total-and-btns` }, rowState.splits.length > 1 && /* @__PURE__ */ import_react32.default.createElement(
             Input,
             {
               disabled: true,
@@ -2869,43 +2929,43 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
                 )
               )}`
             }
-          ), /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ import_react31.default.createElement(
+          ), /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__splits-buttons` }, rowState.splits.length > 1 ? /* @__PURE__ */ import_react32.default.createElement(
             TextButton,
             {
               onClick: addSplit,
               disabled: rowState.splits.length > 5
             },
             "Add new split"
-          ) : /* @__PURE__ */ import_react31.default.createElement(
+          ) : /* @__PURE__ */ import_react32.default.createElement(
             Button,
             {
               onClick: addSplit,
-              rightIcon: /* @__PURE__ */ import_react31.default.createElement(ScissorsFullOpen_default, { size: 14 }),
+              rightIcon: /* @__PURE__ */ import_react32.default.createElement(ScissorsFullOpen_default, { size: 14 }),
               variant: "secondary" /* secondary */,
               disabled: rowState.splits.length > 5
             },
             "Split"
           ))))
         )),
-        /* @__PURE__ */ import_react31.default.createElement(
+        /* @__PURE__ */ import_react32.default.createElement(
           InputGroup,
           {
             className: `${className}__description`,
             name: "description"
           },
-          /* @__PURE__ */ import_react31.default.createElement(Textarea, { name: "description", placeholder: "Add description" })
+          /* @__PURE__ */ import_react32.default.createElement(Textarea, { name: "description", placeholder: "Add description" })
         ),
-        /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react31.default.createElement(FileInput, { text: "Upload receipt" })),
-        asListItem ? /* @__PURE__ */ import_react31.default.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ import_react31.default.createElement(
+        /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__file-upload` }, /* @__PURE__ */ import_react32.default.createElement(FileInput, { text: "Upload receipt" })),
+        asListItem ? /* @__PURE__ */ import_react32.default.createElement("div", { className: `${className}__submit-btn` }, bankTransaction.error ? /* @__PURE__ */ import_react32.default.createElement(
           Text,
           {
             as: "span",
             size: "md" /* md */,
             className: "Layer__unsaved-info"
           },
-          /* @__PURE__ */ import_react31.default.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ import_react31.default.createElement(AlertCircle_default, { size: 12 })
-        ) : null, /* @__PURE__ */ import_react31.default.createElement(
+          /* @__PURE__ */ import_react32.default.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ import_react32.default.createElement(AlertCircle_default, { size: 12 })
+        ) : null, /* @__PURE__ */ import_react32.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -2920,7 +2980,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
           },
           submitBtnText
         )) : null
-      ), /* @__PURE__ */ import_react31.default.createElement(
+      ), /* @__PURE__ */ import_react32.default.createElement(
         APIErrorNotifications,
         {
           bankTransaction,
@@ -2932,7 +2992,7 @@ var ExpandedBankTransactionRow = (0, import_react31.forwardRef)(
 );
 
 // src/components/BankTransactionRow/SplitTooltipDetails.tsx
-var import_react32 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var SplitTooltipDetails = ({
   classNamePrefix,
   category
@@ -2940,7 +3000,7 @@ var SplitTooltipDetails = ({
   if (!category.entries) {
     return;
   }
-  return /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ import_react32.default.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ import_react32.default.createElement("li", { key: idx }, /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ import_react32.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
+  return /* @__PURE__ */ import_react33.default.createElement("span", { className: `${classNamePrefix}__split-tooltip` }, /* @__PURE__ */ import_react33.default.createElement("ul", null, category.entries.map((entry, idx) => /* @__PURE__ */ import_react33.default.createElement("li", { key: idx }, /* @__PURE__ */ import_react33.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__label` }, entry.category.display_name), /* @__PURE__ */ import_react33.default.createElement("span", { className: `${classNamePrefix}__split-tooltip__value` }, "$", centsToDollars(entry.amount))))));
 };
 
 // src/components/BankTransactionRow/BankTransactionRow.tsx
@@ -2965,14 +3025,14 @@ var BankTransactionRow = ({
   removeTransaction,
   containerWidth
 }) => {
-  const expandedRowRef = (0, import_react33.useRef)(null);
-  const [showRetry, setShowRetry] = (0, import_react33.useState)(false);
-  const [removed, setRemoved] = (0, import_react33.useState)(false);
+  const expandedRowRef = (0, import_react34.useRef)(null);
+  const [showRetry, setShowRetry] = (0, import_react34.useState)(false);
+  const [removed, setRemoved] = (0, import_react34.useState)(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react33.useState)(
+  const [selectedCategory, setSelectedCategory] = (0, import_react34.useState)(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = (0, import_react33.useState)(false);
+  const [open, setOpen] = (0, import_react34.useState)(false);
   const toggleOpen = () => {
     setShowRetry(false);
     setOpen(!open);
@@ -2988,14 +3048,14 @@ var BankTransactionRow = ({
       }
     }
   };
-  const [showComponent, setShowComponent] = (0, import_react33.useState)(false);
-  (0, import_react33.useEffect)(() => {
+  const [showComponent, setShowComponent] = (0, import_react34.useState)(false);
+  (0, import_react34.useEffect)(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, index * 80);
     return () => clearTimeout(timeoutId);
   }, []);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
@@ -3031,7 +3091,7 @@ var BankTransactionRow = ({
     open ? openClassName : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+  return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
     "tr",
     {
       className: rowClassName,
@@ -3042,21 +3102,21 @@ var BankTransactionRow = ({
         }
       }
     },
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
         className: "Layer__table-cell  Layer__bank-transaction-table__date-col",
         ...openRow
       },
-      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns7.format)((0, import_date_fns7.parseISO)(bankTransaction.date), dateFormat))
+      /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__table-cell-content" }, (0, import_date_fns7.format)((0, import_date_fns7.parseISO)(bankTransaction.date), dateFormat))
     ),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
         className: "Layer__table-cell Layer__bank-transactions__tx-col",
         ...openRow
       },
-      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react34.default.createElement(
         Text,
         {
           as: "span",
@@ -3069,13 +3129,13 @@ var BankTransactionRow = ({
         bankTransaction.counterparty_name ?? bankTransaction.description
       ))
     ),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
         className: "Layer__table-cell Layer__bank-transactions__account-col",
         ...openRow
       },
-      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ import_react34.default.createElement(
         Text,
         {
           as: "span",
@@ -3085,15 +3145,15 @@ var BankTransactionRow = ({
         bankTransaction.account_name ?? ""
       ))
     ),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
         className: `Layer__table-cell Layer__table-cell__amount-col Layer__bank-transactions__amount-col Layer__table-cell--amount ${className}__table-cell--amount-${isCredit(bankTransaction) ? "credit" : "debit"}`,
         ...openRow
       },
-      /* @__PURE__ */ import_react33.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
+      /* @__PURE__ */ import_react34.default.createElement("span", { className: "Layer__table-cell-content" }, isCredit(bankTransaction) ? "+$" : " $", centsToDollars(bankTransaction.amount))
     ),
-    /* @__PURE__ */ import_react33.default.createElement(
+    /* @__PURE__ */ import_react34.default.createElement(
       "td",
       {
         className: (0, import_classnames17.default)(
@@ -3103,12 +3163,12 @@ var BankTransactionRow = ({
           `${className}__actions-cell--${open ? "open" : "close"}`
         )
       },
-      /* @__PURE__ */ import_react33.default.createElement(
+      /* @__PURE__ */ import_react34.default.createElement(
         "span",
         {
           className: `${className}__actions-container Layer__table-cell-content`
         },
-        editable && !open ? /* @__PURE__ */ import_react33.default.createElement(
+        editable && !open ? /* @__PURE__ */ import_react34.default.createElement(
           CategorySelect,
           {
             bankTransaction,
@@ -3121,11 +3181,11 @@ var BankTransactionRow = ({
             disabled: bankTransaction.processing
           }
         ) : null,
-        !editable && !open ? /* @__PURE__ */ import_react33.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+        !editable && !open ? /* @__PURE__ */ import_react34.default.createElement(Text, { as: "span", className: `${className}__category-text` }, bankTransaction.categorization_status === "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
           Badge,
           {
-            icon: /* @__PURE__ */ import_react33.default.createElement(Scissors_default, { size: 11 }),
-            tooltip: /* @__PURE__ */ import_react33.default.createElement(
+            icon: /* @__PURE__ */ import_react34.default.createElement(Scissors_default, { size: 11 }),
+            tooltip: /* @__PURE__ */ import_react34.default.createElement(
               SplitTooltipDetails,
               {
                 classNamePrefix: className,
@@ -3134,18 +3194,18 @@ var BankTransactionRow = ({
             )
           },
           "Split"
-        ), /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, /* @__PURE__ */ import_react33.default.createElement(
+        ), /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, extractDescriptionForSplit(bankTransaction.category))), bankTransaction?.categorization_status === "MATCHED" /* MATCHED */ && bankTransaction?.match && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
           MatchBadge,
           {
             classNamePrefix: className,
             bankTransaction,
             dateFormat
           }
-        ), /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns7.format)(
+        ), /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, `${(0, import_date_fns7.format)(
           (0, import_date_fns7.parseISO)(bankTransaction.match.bank_transaction.date),
           dateFormat
-        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react33.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
-        editable && !open && showRetry ? /* @__PURE__ */ import_react33.default.createElement(
+        )}, ${bankTransaction.match.bank_transaction.description}`)), bankTransaction?.categorization_status !== "MATCHED" /* MATCHED */ && bankTransaction?.categorization_status !== "SPLIT" /* SPLIT */ && /* @__PURE__ */ import_react34.default.createElement("span", { className: `${className}__category-text__text` }, bankTransaction?.category?.display_name)) : null,
+        editable && !open && showRetry ? /* @__PURE__ */ import_react34.default.createElement(
           RetryButton,
           {
             onClick: () => {
@@ -3159,17 +3219,17 @@ var BankTransactionRow = ({
           },
           "Retry"
         ) : null,
-        open && bankTransaction.error ? /* @__PURE__ */ import_react33.default.createElement(
+        open && bankTransaction.error ? /* @__PURE__ */ import_react34.default.createElement(
           Text,
           {
             as: "span",
             size: "md" /* md */,
             className: "Layer__unsaved-info"
           },
-          /* @__PURE__ */ import_react33.default.createElement("span", null, "Unsaved"),
-          /* @__PURE__ */ import_react33.default.createElement(AlertCircle_default, { size: 12 })
+          /* @__PURE__ */ import_react34.default.createElement("span", null, "Unsaved"),
+          /* @__PURE__ */ import_react34.default.createElement(AlertCircle_default, { size: 12 })
         ) : null,
-        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ import_react33.default.createElement(
+        editable && (open || !open && !showRetry) || !editable && open ? /* @__PURE__ */ import_react34.default.createElement(
           SubmitButton,
           {
             onClick: () => {
@@ -3184,13 +3244,13 @@ var BankTransactionRow = ({
           },
           editable ? "Approve" : "Update"
         ) : null,
-        /* @__PURE__ */ import_react33.default.createElement(
+        /* @__PURE__ */ import_react34.default.createElement(
           IconButton,
           {
             onClick: toggleOpen,
             className: "Layer__bank-transaction-row__expand-button",
             active: open,
-            icon: /* @__PURE__ */ import_react33.default.createElement(
+            icon: /* @__PURE__ */ import_react34.default.createElement(
               ChevronDownFill_default,
               {
                 className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
@@ -3200,7 +3260,7 @@ var BankTransactionRow = ({
         )
       )
     )
-  ), /* @__PURE__ */ import_react33.default.createElement("tr", null, /* @__PURE__ */ import_react33.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react33.default.createElement(
+  ), /* @__PURE__ */ import_react34.default.createElement("tr", null, /* @__PURE__ */ import_react34.default.createElement("td", { colSpan: 5, className: "Layer__bank-transaction-row__expanded-td" }, /* @__PURE__ */ import_react34.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
@@ -3213,11 +3273,11 @@ var BankTransactionRow = ({
 };
 
 // src/components/BankTransactionListItem/Assignment.tsx
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var import_date_fns8 = require("date-fns");
 var Assignment = ({ bankTransaction }) => {
   if (bankTransaction.match && bankTransaction.categorization_status === "MATCHED" /* MATCHED */) {
-    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
       MatchBadge,
       {
         classNamePrefix: "Layer__bank-transaction-list-item",
@@ -3225,17 +3285,17 @@ var Assignment = ({ bankTransaction }) => {
         dateFormat: DATE_FORMAT,
         text: "Matched"
       }
-    ), /* @__PURE__ */ import_react34.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${(0, import_date_fns8.format)(
+    ), /* @__PURE__ */ import_react35.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, `${(0, import_date_fns8.format)(
       (0, import_date_fns8.parseISO)(bankTransaction.match.bank_transaction.date),
       DATE_FORMAT
     )}, ${bankTransaction.match.bank_transaction.description}`));
   }
   if (bankTransaction.categorization_status === "SPLIT" /* SPLIT */) {
-    return /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, /* @__PURE__ */ import_react34.default.createElement(
+    return /* @__PURE__ */ import_react35.default.createElement(import_react35.default.Fragment, null, /* @__PURE__ */ import_react35.default.createElement(
       Badge,
       {
-        icon: /* @__PURE__ */ import_react34.default.createElement(Scissors_default, { size: 11 }),
-        tooltip: /* @__PURE__ */ import_react34.default.createElement(
+        icon: /* @__PURE__ */ import_react35.default.createElement(Scissors_default, { size: 11 }),
+        tooltip: /* @__PURE__ */ import_react35.default.createElement(
           SplitTooltipDetails,
           {
             classNamePrefix: "Layer__bank-transaction-list-item",
@@ -3244,9 +3304,9 @@ var Assignment = ({ bankTransaction }) => {
         )
       },
       "Split"
-    ), /* @__PURE__ */ import_react34.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
+    ), /* @__PURE__ */ import_react35.default.createElement(Text, { className: "Layer__bank-transaction-list-item__category-text__text" }, extractDescriptionForSplit(bankTransaction.category)));
   }
-  return /* @__PURE__ */ import_react34.default.createElement(Text, null, bankTransaction?.category?.display_name);
+  return /* @__PURE__ */ import_react35.default.createElement(Text, null, bankTransaction?.category?.display_name);
 };
 
 // src/components/BankTransactionListItem/BankTransactionListItem.tsx
@@ -3260,26 +3320,26 @@ var BankTransactionListItem = ({
   editable,
   containerWidth
 }) => {
-  const expandedRowRef = (0, import_react35.useRef)(null);
-  const [showRetry, setShowRetry] = (0, import_react35.useState)(false);
-  const [removed, setRemoved] = (0, import_react35.useState)(false);
+  const expandedRowRef = (0, import_react36.useRef)(null);
+  const [showRetry, setShowRetry] = (0, import_react36.useState)(false);
+  const [removed, setRemoved] = (0, import_react36.useState)(false);
   const { categorize: categorizeBankTransaction2, match: matchBankTransaction2 } = useBankTransactions();
-  const [selectedCategory, setSelectedCategory] = (0, import_react35.useState)(
+  const [selectedCategory, setSelectedCategory] = (0, import_react36.useState)(
     getDefaultSelectedCategory(bankTransaction)
   );
-  const [open, setOpen] = (0, import_react35.useState)(false);
+  const [open, setOpen] = (0, import_react36.useState)(false);
   const toggleOpen = () => {
     setShowRetry(false);
     setOpen(!open);
   };
-  const [showComponent, setShowComponent] = (0, import_react35.useState)(false);
-  (0, import_react35.useEffect)(() => {
+  const [showComponent, setShowComponent] = (0, import_react36.useState)(false);
+  (0, import_react36.useEffect)(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, index * 80);
     return () => clearTimeout(timeoutId);
   }, []);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (bankTransaction.error) {
       setShowRetry(true);
     }
@@ -3315,26 +3375,26 @@ var BankTransactionListItem = ({
     open ? openClassName : "",
     showComponent ? "show" : ""
   );
-  return /* @__PURE__ */ import_react35.default.createElement("li", { className: rowClassName }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ import_react35.default.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-date` }, (0, import_date_fns9.format)((0, import_date_fns9.parseISO)(bankTransaction.date), dateFormat)), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ import_react35.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement("li", { className: rowClassName }, /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__heading` }, /* @__PURE__ */ import_react36.default.createElement("div", { className: `${className}__heading__main` }, /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__heading-date` }, (0, import_date_fns9.format)((0, import_date_fns9.parseISO)(bankTransaction.date), dateFormat)), /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__heading-separator` }), /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__heading-account-name` }, bankTransaction.account_name ?? "")), /* @__PURE__ */ import_react36.default.createElement(
     "div",
     {
       onClick: toggleOpen,
       className: "Layer__bank-transaction-row__expand-button"
     },
-    /* @__PURE__ */ import_react35.default.createElement(
+    /* @__PURE__ */ import_react36.default.createElement(
       ChevronDownFill_default,
       {
         className: `Layer__chevron ${open ? "Layer__chevron__up" : "Layer__chevron__down"}`
       }
     )
-  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ import_react35.default.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ import_react35.default.createElement(
+  )), /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__body` }, /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__body__name` }, /* @__PURE__ */ import_react36.default.createElement(Text, { as: "span", withTooltip: "whenTruncated" /* whenTruncated */ }, bankTransaction.counterparty_name ?? bankTransaction.description)), /* @__PURE__ */ import_react36.default.createElement(
     "span",
     {
       className: `${className}__amount-${isCredit2(bankTransaction) ? "credit" : "debit"}`
     },
     isCredit2(bankTransaction) ? "+$" : " $",
     centsToDollars(bankTransaction.amount)
-  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react35.default.createElement(
+  )), /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__expanded-row` }, /* @__PURE__ */ import_react36.default.createElement(
     ExpandedBankTransactionRow,
     {
       ref: expandedRowRef,
@@ -3345,7 +3405,7 @@ var BankTransactionListItem = ({
       submitBtnText: editable ? "Approve" : "Update",
       containerWidth
     }
-  )), /* @__PURE__ */ import_react35.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react35.default.createElement(
+  )), /* @__PURE__ */ import_react36.default.createElement("span", { className: `${className}__base-row` }, editable ? /* @__PURE__ */ import_react36.default.createElement(
     CategorySelect,
     {
       bankTransaction,
@@ -3357,7 +3417,7 @@ var BankTransactionListItem = ({
       },
       disabled: bankTransaction.processing
     }
-  ) : null, !editable ? /* @__PURE__ */ import_react35.default.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ import_react35.default.createElement(
+  ) : null, !editable ? /* @__PURE__ */ import_react36.default.createElement(Assignment, { bankTransaction }) : null, editable && !showRetry ? /* @__PURE__ */ import_react36.default.createElement(
     SubmitButton,
     {
       onClick: () => {
@@ -3370,7 +3430,7 @@ var BankTransactionListItem = ({
       action: editable ? "save" /* SAVE */ : "update" /* UPDATE */
     },
     editable ? "Approve" : "Update"
-  ) : null, editable && showRetry ? /* @__PURE__ */ import_react35.default.createElement(
+  ) : null, editable && showRetry ? /* @__PURE__ */ import_react36.default.createElement(
     RetryButton,
     {
       onClick: () => {
@@ -3383,11 +3443,11 @@ var BankTransactionListItem = ({
       error: "Approval failed. Check connection and retry in few seconds."
     },
     "Retry"
-  ) : null), bankTransaction.error && showRetry ? /* @__PURE__ */ import_react35.default.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
+  ) : null), bankTransaction.error && showRetry ? /* @__PURE__ */ import_react36.default.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : null);
 };
 
 // src/components/Container/Container.tsx
-var import_react36 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 
 // src/config/theme.ts
 var SHADES = {
@@ -3616,7 +3676,7 @@ var hslToHex = (hsl) => {
 
 // src/components/Container/Container.tsx
 var import_classnames19 = __toESM(require("classnames"));
-var Container = (0, import_react36.forwardRef)(
+var Container = (0, import_react37.forwardRef)(
   ({ name, className, children, asWidget }, ref) => {
     const baseClassName = (0, import_classnames19.default)(
       "Layer__component Layer__component-container",
@@ -3626,28 +3686,30 @@ var Container = (0, import_react36.forwardRef)(
     );
     const { theme } = useLayerContext();
     const styles = parseStylesFromThemeConfig(theme);
-    return /* @__PURE__ */ import_react36.default.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
+    return /* @__PURE__ */ import_react37.default.createElement("div", { ref, className: baseClassName, style: { ...styles } }, children);
   }
 );
 
 // src/components/Container/Header.tsx
-var import_react37 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_classnames20 = __toESM(require("classnames"));
-var Header = (0, import_react37.forwardRef)(
+var Header = (0, import_react38.forwardRef)(
   ({ className, children, style }, ref) => {
     const baseClassName = (0, import_classnames20.default)("Layer__component-header", className);
-    return /* @__PURE__ */ import_react37.default.createElement("header", { ref, className: baseClassName, style }, children);
+    return /* @__PURE__ */ import_react38.default.createElement("header", { ref, className: baseClassName, style }, children);
   }
 );
 
 // src/components/DataState/DataState.tsx
-var import_react38 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var getIcon = (status) => {
   switch (status) {
     case "failed" /* failed */:
-      return /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react38.default.createElement(AlertOctagon_default, { size: 12 }));
+      return /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--error" }, /* @__PURE__ */ import_react39.default.createElement(AlertOctagon_default, { size: 12 }));
+    case "info" /* info */:
+      return /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react39.default.createElement(AlertOctagon_default, { size: 12 }));
     default:
-      return /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react38.default.createElement(CheckCircle_default, { size: 12 }));
+      return /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__data-state__icon Layer__data-state__icon--neutral" }, /* @__PURE__ */ import_react39.default.createElement(CheckCircle_default, { size: 12 }));
   }
 };
 var DataState = ({
@@ -3657,7 +3719,7 @@ var DataState = ({
   onRefresh,
   isLoading
 }) => {
-  return /* @__PURE__ */ import_react38.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react38.default.createElement(
+  return /* @__PURE__ */ import_react39.default.createElement("div", { className: "Layer__data-state" }, getIcon(status), /* @__PURE__ */ import_react39.default.createElement(
     Text,
     {
       as: "span",
@@ -3666,11 +3728,11 @@ var DataState = ({
       className: "Layer__data-state__title"
     },
     title
-  ), /* @__PURE__ */ import_react38.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react38.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react38.default.createElement(
+  ), /* @__PURE__ */ import_react39.default.createElement(Text, { as: "span", className: "Layer__data-state__description" }, description), onRefresh && /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__data-state__btn" }, /* @__PURE__ */ import_react39.default.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: isLoading ? /* @__PURE__ */ import_react38.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react38.default.createElement(RefreshCcw_default, { size: 12 }),
+      rightIcon: isLoading ? /* @__PURE__ */ import_react39.default.createElement(Loader_default, { size: 14, className: "Layer__anim--rotating" }) : /* @__PURE__ */ import_react39.default.createElement(RefreshCcw_default, { size: 12 }),
       onClick: onRefresh,
       disabled: isLoading
     },
@@ -3679,16 +3741,16 @@ var DataState = ({
 };
 
 // src/components/Loader/Loader.tsx
-var import_react39 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var Loader2 = ({ children }) => {
-  return /* @__PURE__ */ import_react39.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react39.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ import_react40.default.createElement("span", { className: "Layer__loader" }, /* @__PURE__ */ import_react40.default.createElement(Loader_default, { size: 28, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/Pagination/Pagination.tsx
-var import_react41 = __toESM(require("react"));
+var import_react42 = __toESM(require("react"));
 
 // src/hooks/usePagination/usePagination.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 var DOTS = "...";
 var usePagination = ({
   totalCount,
@@ -3696,7 +3758,7 @@ var usePagination = ({
   siblingCount = 1,
   currentPage
 }) => {
-  const paginationRange = (0, import_react40.useMemo)(() => {
+  const paginationRange = (0, import_react41.useMemo)(() => {
     const totalPageCount = Math.ceil(totalCount / pageSize);
     const totalPageNumbers = siblingCount + 5;
     if (totalPageNumbers >= totalPageCount) {
@@ -3733,8 +3795,8 @@ var usePagination = ({
 };
 
 // src/icons/ChevronLeft.tsx
-var React51 = __toESM(require("react"));
-var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React51.createElement(
+var React52 = __toESM(require("react"));
+var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3744,7 +3806,7 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React51.createEle
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React51.createElement(
+  /* @__PURE__ */ React52.createElement(
     "path",
     {
       d: "M11.25 13.5L6.75 9L11.25 4.5",
@@ -3757,8 +3819,8 @@ var ChevronLeft = ({ size = 18, ...props }) => /* @__PURE__ */ React51.createEle
 var ChevronLeft_default = ChevronLeft;
 
 // src/icons/ChevronRight.tsx
-var React52 = __toESM(require("react"));
-var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createElement(
+var React53 = __toESM(require("react"));
+var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React53.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3768,7 +3830,7 @@ var ChavronRight = ({ size = 18, ...props }) => /* @__PURE__ */ React52.createEl
     fill: "none",
     ...props
   },
-  /* @__PURE__ */ React52.createElement(
+  /* @__PURE__ */ React53.createElement(
     "path",
     {
       d: "M6.75 13.5L11.25 9L6.75 4.5",
@@ -3802,7 +3864,7 @@ var Pagination = ({
     return;
   }
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /* @__PURE__ */ import_react41.default.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement("ul", { className: "Layer__pagination" }, /* @__PURE__ */ import_react42.default.createElement(
     "li",
     {
       key: `page-prev`,
@@ -3814,12 +3876,12 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage - 1)
     },
-    /* @__PURE__ */ import_react41.default.createElement(ChevronLeft_default, { size: 12 })
+    /* @__PURE__ */ import_react42.default.createElement(ChevronLeft_default, { size: 12 })
   ), paginationRange.map((pageNumber) => {
     if (pageNumber === DOTS) {
-      return /* @__PURE__ */ import_react41.default.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
+      return /* @__PURE__ */ import_react42.default.createElement("li", { className: "Layer__pagination-item Layer__pagination-dots" }, "\u2026");
     }
-    return /* @__PURE__ */ import_react41.default.createElement(
+    return /* @__PURE__ */ import_react42.default.createElement(
       "li",
       {
         key: `page-${pageNumber}`,
@@ -3834,7 +3896,7 @@ var Pagination = ({
       },
       pageNumber
     );
-  }), /* @__PURE__ */ import_react41.default.createElement(
+  }), /* @__PURE__ */ import_react42.default.createElement(
     "li",
     {
       key: `page-last`,
@@ -3846,7 +3908,7 @@ var Pagination = ({
       ),
       onClick: () => onPageChange(currentPage + 1)
     },
-    /* @__PURE__ */ import_react41.default.createElement(ChevronRight_default, { size: 12 })
+    /* @__PURE__ */ import_react42.default.createElement(ChevronRight_default, { size: 12 })
   ));
 };
 
@@ -3873,14 +3935,14 @@ var BankTransactions = ({
   asWidget = false,
   pageSize = 15
 }) => {
-  const [display, setDisplay] = (0, import_react42.useState)("review" /* review */);
-  const [currentPage, setCurrentPage] = (0, import_react42.useState)(1);
-  const [removedTxs, setRemovedTxs] = (0, import_react42.useState)([]);
+  const [display, setDisplay] = (0, import_react43.useState)("review" /* review */);
+  const [currentPage, setCurrentPage] = (0, import_react43.useState)(1);
+  const [removedTxs, setRemovedTxs] = (0, import_react43.useState)([]);
   const { data, isLoading, error, isValidating, refetch } = useBankTransactions();
   const bankTransactionsByFilter = data?.filter(
     (tx) => !removedTxs.includes(tx.id) && filterVisibility(display, tx)
   );
-  const bankTransactions = (0, import_react42.useMemo)(() => {
+  const bankTransactions = (0, import_react43.useMemo)(() => {
     const firstPageIndex = (currentPage - 1) * pageSize;
     const lastPageIndex = firstPageIndex + pageSize;
     return bankTransactionsByFilter?.slice(firstPageIndex, lastPageIndex);
@@ -3891,10 +3953,10 @@ var BankTransactions = ({
     );
     setCurrentPage(1);
   };
-  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react42.useState)(0);
+  const [shiftStickyHeader, setShiftStickyHeader] = (0, import_react43.useState)(0);
   const debounceShiftStickyHeader = debounce(setShiftStickyHeader, 500);
-  const [listView, setListView] = (0, import_react42.useState)(false);
-  const [containerWidth, setContainerWidth] = (0, import_react42.useState)(0);
+  const [listView, setListView] = (0, import_react43.useState)(false);
+  const [containerWidth, setContainerWidth] = (0, import_react43.useState)(0);
   const debounceContainerWidth = debounce(setContainerWidth, 500);
   const removeTransaction = (id) => {
     const newTxs = removedTxs.slice();
@@ -3918,7 +3980,7 @@ var BankTransactions = ({
     debounceContainerWidth(size?.width);
   });
   const editable = display === "review" /* review */;
-  return /* @__PURE__ */ import_react42.default.createElement(
+  return /* @__PURE__ */ import_react43.default.createElement(
     Container,
     {
       className: editable ? "Layer__bank-transactions--to-review" : "Layer__bank-transactions--categorized",
@@ -3926,14 +3988,14 @@ var BankTransactions = ({
       asWidget,
       ref: containerRef
     },
-    /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement(
       Header,
       {
         className: "Layer__bank-transactions__header",
         style: { top: shiftStickyHeader }
       },
-      /* @__PURE__ */ import_react42.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
-      /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react43.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Transactions"),
+      /* @__PURE__ */ import_react43.default.createElement(
         Toggle,
         {
           name: "bank-transaction-display",
@@ -3946,15 +4008,15 @@ var BankTransactions = ({
         }
       )
     ),
-    !listView && /* @__PURE__ */ import_react42.default.createElement(
+    !listView && /* @__PURE__ */ import_react43.default.createElement(
       "table",
       {
         width: "100%",
         className: "Layer__table Layer__bank-transactions__table with-cell-separators"
       },
-      /* @__PURE__ */ import_react42.default.createElement("thead", null, /* @__PURE__ */ import_react42.default.createElement("tr", null, /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react42.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
-      /* @__PURE__ */ import_react42.default.createElement("tbody", null, !isLoading && bankTransactions?.map(
-        (bankTransaction, index) => /* @__PURE__ */ import_react42.default.createElement(
+      /* @__PURE__ */ import_react43.default.createElement("thead", null, /* @__PURE__ */ import_react43.default.createElement("tr", null, /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__date-col" }, "Date"), /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__tx-col" }, "Transaction"), /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__bank-transactions__account-col" }, "Account"), /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount Layer__table-cell__amount-col" }, "Amount"), editable ? /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__table-header--primary Layer__table-cell__category-col" }, "Categorize") : /* @__PURE__ */ import_react43.default.createElement("th", { className: "Layer__table-header Layer__table-cell__category-col" }, "Category"))),
+      /* @__PURE__ */ import_react43.default.createElement("tbody", null, !isLoading && bankTransactions?.map(
+        (bankTransaction, index) => /* @__PURE__ */ import_react43.default.createElement(
           BankTransactionRow,
           {
             index,
@@ -3968,9 +4030,9 @@ var BankTransactions = ({
         )
       ))
     ),
-    isLoading && !bankTransactions ? /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react42.default.createElement(Loader2, null)) : null,
-    !isLoading && listView ? /* @__PURE__ */ import_react42.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
-      (bankTransaction, index) => /* @__PURE__ */ import_react42.default.createElement(
+    isLoading && !bankTransactions ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__bank-transactions__loader-container" }, /* @__PURE__ */ import_react43.default.createElement(Loader2, null)) : null,
+    !isLoading && listView ? /* @__PURE__ */ import_react43.default.createElement("ul", { className: "Layer__bank-transactions__list" }, bankTransactions?.map(
+      (bankTransaction, index) => /* @__PURE__ */ import_react43.default.createElement(
         BankTransactionListItem,
         {
           index,
@@ -3983,7 +4045,7 @@ var BankTransactions = ({
         }
       )
     )) : null,
-    !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react42.default.createElement(
+    !isLoading && !error && (bankTransactions === void 0 || bankTransactions !== void 0 && bankTransactions.length === 0) ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react43.default.createElement(
       DataState,
       {
         status: "allDone" /* allDone */,
@@ -3993,7 +4055,7 @@ var BankTransactions = ({
         isLoading: isValidating
       }
     )) : null,
-    !isLoading && error ? /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react42.default.createElement(
+    !isLoading && error ? /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react43.default.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -4003,7 +4065,7 @@ var BankTransactions = ({
         isLoading: isValidating
       }
     )) : null,
-    /* @__PURE__ */ import_react42.default.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ import_react42.default.createElement(
+    /* @__PURE__ */ import_react43.default.createElement("div", { className: "Layer__bank-transactions__pagination" }, /* @__PURE__ */ import_react43.default.createElement(
       Pagination,
       {
         currentPage,
@@ -4016,7 +4078,7 @@ var BankTransactions = ({
 };
 
 // src/components/Hello/Hello.tsx
-var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_swr3 = __toESM(require("swr"));
 var fetcher = (url) => fetch(url).then((res) => res.json());
 var Hello = ({ user }) => {
@@ -4025,38 +4087,35 @@ var Hello = ({ user }) => {
     fetcher
   );
   const name = (isLoading ? "..." : data?.name) || "User";
-  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement("div", { className: "hello" }, "Hello, ", name, "!"));
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
-var import_react46 = __toESM(require("react"));
+var import_react47 = __toESM(require("react"));
 
 // src/hooks/useLinkedAccounts/useLinkedAccounts.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 var MOCK_DATA = [
   {
-    name: "Public Demo Banking",
+    name: "Business Checking",
     account: "1234",
     amount: 1220620
+  },
+  {
+    name: "Business Savings",
+    account: "5678",
+    amount: 10002062e-1
+  },
+  {
+    name: "Account",
+    account: "4321",
+    amount: 4400020620
   }
-  /* Temporarily removing these to make it match test data (with one account)
-   * we're using in the demo.
-   */
-  // {
-  //   name: 'Business Savings',
-  //   account: '5678',
-  //   amount: 1000206.2,
-  // },
-  // {
-  //   name: 'Account',
-  //   account: '4321',
-  //   amount: 801.91,
-  // },
 ];
 var useLinkedAccounts = () => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [isLoading, setIsLoading] = (0, import_react44.useState)(true);
-  (0, import_react44.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react45.useState)(true);
+  (0, import_react45.useEffect)(() => {
     const timer = setTimeout(() => {
       setIsLoading(false);
     }, 2e3);
@@ -4082,23 +4141,23 @@ var useLinkedAccounts = () => {
 };
 
 // src/components/LinkedAccounts/LinkedAccountThumb.tsx
-var import_react45 = __toESM(require("react"));
+var import_react46 = __toESM(require("react"));
 var LinkedAccountThumb = ({ account }) => {
-  return /* @__PURE__ */ import_react45.default.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ import_react45.default.createElement("div", { className: "bottombar" }, /* @__PURE__ */ import_react45.default.createElement(Text, { as: "span", className: "account-amount" }, "$", centsToDollars(account.amount))));
+  return /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-account-thumb" }, /* @__PURE__ */ import_react46.default.createElement("div", { className: "topbar" }, /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-name" }, account.name), /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-number" }, "\u2022\u2022\u2022", account.account)), /* @__PURE__ */ import_react46.default.createElement("div", { className: "bottombar" }, /* @__PURE__ */ import_react46.default.createElement(Text, { as: "span", className: "account-amount" }, "$", centsToDollars(account.amount))));
 };
 
 // src/components/LinkedAccounts/LinkedAccounts.tsx
 var COMPONENT_NAME2 = "linked-accounts";
 var LinkedAccounts = () => {
   const { data, isLoading, error, isValidating, refetch } = useLinkedAccounts();
-  return /* @__PURE__ */ import_react46.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react46.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react46.default.createElement(
+  return /* @__PURE__ */ import_react47.default.createElement(Container, { name: COMPONENT_NAME2 }, /* @__PURE__ */ import_react47.default.createElement(Header, { className: "Layer__linked-accounts__header" }, /* @__PURE__ */ import_react47.default.createElement(
     Heading,
     {
       className: "Layer__linked-accounts__title",
       size: "secondary" /* secondary */
     },
     "Linked Accounts"
-  )), isLoading && /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react46.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react46.default.createElement(
+  )), isLoading && /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__loader-container" }, /* @__PURE__ */ import_react47.default.createElement(Loader2, null)), error && !isLoading ? /* @__PURE__ */ import_react47.default.createElement(
     DataState,
     {
       status: "failed" /* failed */,
@@ -4107,14 +4166,14 @@ var LinkedAccounts = () => {
       onRefresh: () => refetch(),
       isLoading: isValidating
     }
-  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react46.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react46.default.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
+  ) : null, !error && !isLoading ? /* @__PURE__ */ import_react47.default.createElement("div", { className: "Layer__linked-accounts__list" }, data?.map((account, index) => /* @__PURE__ */ import_react47.default.createElement(LinkedAccountThumb, { account, key: `linked-acc-${index}` }))) : null);
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react55 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -4183,17 +4242,17 @@ var useProfitAndLoss = ({
   endDate: (0, import_date_fns10.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [startDate, setStartDate] = (0, import_react47.useState)(
+  const [startDate, setStartDate] = (0, import_react48.useState)(
     initialStartDate || (0, import_date_fns10.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react47.useState)(
+  const [endDate, setEndDate] = (0, import_react48.useState)(
     initialEndDate || (0, import_date_fns10.endOfMonth)(Date.now())
   );
-  const [filters, setFilters] = (0, import_react47.useState)({
+  const [filters, setFilters] = (0, import_react48.useState)({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = (0, import_react47.useState)("expenses");
+  const [sidebarScope, setSidebarScope] = (0, import_react48.useState)(void 0);
   const {
     data: rawData,
     isLoading,
@@ -4216,7 +4275,7 @@ var useProfitAndLoss = ({
     })
   );
   const { data, error } = rawData || {};
-  const { filteredData, filteredTotal } = (0, import_react47.useMemo)(() => {
+  const { filteredData, filteredTotal } = (0, import_react48.useMemo)(() => {
     if (!data) {
       return { filteredData: [], filteredTotal: void 0 };
     }
@@ -4301,7 +4360,7 @@ var useProfitAndLoss = ({
 };
 
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 
 // src/utils/format.ts
 var capitalizeFirstLetter = (text) => text.charAt(0).toUpperCase() + text.slice(1);
@@ -4339,7 +4398,7 @@ var formatPercent = (value, options) => {
 };
 
 // src/components/ProfitAndLossChart/Indicator.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
 var Indicator = ({
   viewBox = {},
@@ -4351,25 +4410,26 @@ var Indicator = ({
     return null;
   }
   const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
-  const boxWidth = width * 2 + 4;
-  const multiplier = 1.5;
+  const margin = width > 12 ? 4 : 1;
+  const boxWidth = width * 2 + margin;
+  const multiplier = width > 12 ? 1.2 : 1;
   const xOffset = (boxWidth * multiplier - boxWidth) / 2;
-  (0, import_react48.useEffect)(() => {
+  const borderRadius = width > 16 ? 8 : width / 2;
+  (0, import_react49.useEffect)(() => {
     setAnimateFrom(animateTo);
   }, [animateTo]);
   const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "rect",
     {
       className: "Layer__profit-and-loss-chart__selection-indicator",
-      rx: "8",
-      ry: "8",
+      rx: borderRadius,
+      ry: borderRadius,
       style: {
         width: `${boxWidth * multiplier}px`,
         // @ts-expect-error -- y is fine but x apparently isn't!
         x: actualX - xOffset,
         y: 22,
-        borderRadius: 8,
         height: "calc(100% - 38px)"
       }
     }
@@ -4383,7 +4443,7 @@ var barGap = 4;
 var barSize = 20;
 var ProfitAndLossChart = () => {
   const { getColor } = useLayerContext();
-  const { changeDateRange, dateRange } = (0, import_react49.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react50.useContext)(ProfitAndLoss.Context);
   const thisMonth = (0, import_date_fns11.startOfMonth)(Date.now());
   const startSelectionMonth = dateRange.startDate.getMonth();
   const endSelectionMonth = dateRange.endDate.getMonth();
@@ -4465,6 +4525,7 @@ var ProfitAndLossChart = () => {
     name: getMonthName(pnl),
     revenue: pnl?.income.value || 0,
     expenses: Math.abs((pnl?.income.value || 0) - (pnl?.net_profit || 0)),
+    netProfit: pnl?.net_profit || 0,
     selected: !!pnl && (0, import_date_fns11.parseISO)(pnl.start_date).getMonth() >= startSelectionMonth && (0, import_date_fns11.parseISO)(pnl.end_date).getMonth() <= endSelectionMonth
   });
   const onClick = ({ activeTooltipIndex }) => {
@@ -4483,27 +4544,29 @@ var ProfitAndLossChart = () => {
     label
   }) => {
     if (active && payload && payload.length) {
-      return /* @__PURE__ */ import_react49.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react49.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react49.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react49.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0))))));
+      const netProfit = payload[0].payload.netProfit ?? 0;
+      const netProfitClass = netProfit > 0 ? "positive" : netProfit < 0 ? "negative" : "";
+      return /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__chart__tooltip" }, /* @__PURE__ */ import_react50.default.createElement("ul", { className: "Layer__chart__tooltip-list" }, /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[0].name ?? "")), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[0].value ?? 0)))), /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, capitalizeFirstLetter(payload[1].name ?? "")), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__chart__tooltip-value" }, "$", centsToDollars(Math.abs(payload[1].value ?? 0)))), /* @__PURE__ */ import_react50.default.createElement("li", null, /* @__PURE__ */ import_react50.default.createElement("label", { className: "Layer__chart__tooltip-label" }, "Net Profit"), /* @__PURE__ */ import_react50.default.createElement("span", { className: `Layer__chart__tooltip-value ${netProfitClass}` }, "$", centsToDollars(netProfit)))));
     }
     return null;
   };
   const CustomizedCursor = (props) => {
-    const { x, y, width, height } = props;
-    return /* @__PURE__ */ import_react49.default.createElement(
+    const { x, width, height } = props;
+    return /* @__PURE__ */ import_react50.default.createElement(
       import_recharts.Rectangle,
       {
-        fill: getColor(100)?.hex ?? "#F5F4F3",
+        fill: getColor(900)?.hex ?? "#333",
         stroke: "none",
-        x,
-        y,
-        radius: 8,
-        width,
-        height: height + 24,
+        x: x + width / 2 - 11,
+        y: height + 44,
+        radius: 2,
+        width: 22,
+        height: 2,
         className: "Layer__chart__tooltip-cursor"
       }
     );
   };
-  const data = (0, import_react49.useMemo)(
+  const data = (0, import_react50.useMemo)(
     () => monthData.map(summarizePnL),
     [
       startSelectionMonth,
@@ -4511,8 +4574,8 @@ var ProfitAndLossChart = () => {
       ...monthData.map((m) => m?.net_profit)
     ]
   );
-  const [animateFrom, setAnimateFrom] = (0, import_react49.useState)(-1);
-  return /* @__PURE__ */ import_react49.default.createElement(
+  const [animateFrom, setAnimateFrom] = (0, import_react50.useState)(-1);
+  return /* @__PURE__ */ import_react50.default.createElement(
     import_recharts.ResponsiveContainer,
     {
       className: "Layer__chart-container",
@@ -4520,7 +4583,7 @@ var ProfitAndLossChart = () => {
       height: "100%",
       minHeight: 200
     },
-    /* @__PURE__ */ import_react49.default.createElement(
+    /* @__PURE__ */ import_react50.default.createElement(
       import_recharts.BarChart,
       {
         margin: { left: 12, right: 12, bottom: 12 },
@@ -4529,17 +4592,17 @@ var ProfitAndLossChart = () => {
         barGap,
         className: "Layer__profit-and-loss-chart"
       },
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(
         import_recharts.Tooltip,
         {
           wrapperClassName: "Layer__chart__tooltip-wrapper",
-          content: /* @__PURE__ */ import_react49.default.createElement(CustomTooltip, null),
-          cursor: /* @__PURE__ */ import_react49.default.createElement(CustomizedCursor, null),
+          content: /* @__PURE__ */ import_react50.default.createElement(CustomTooltip, null),
+          cursor: /* @__PURE__ */ import_react50.default.createElement(CustomizedCursor, null),
           animationDuration: 100,
           animationEasing: "ease-out"
         }
       ),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(
         import_recharts.CartesianGrid,
         {
           vertical: false,
@@ -4547,7 +4610,7 @@ var ProfitAndLossChart = () => {
           strokeDasharray: "5 5"
         }
       ),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(
         import_recharts.Legend,
         {
           verticalAlign: "top",
@@ -4555,7 +4618,7 @@ var ProfitAndLossChart = () => {
           wrapperStyle: { top: -24 },
           payload: [
             {
-              value: "Income",
+              value: "Revenue",
               type: "circle",
               id: "IncomeLegend"
             },
@@ -4567,20 +4630,20 @@ var ProfitAndLossChart = () => {
           ]
         }
       ),
-      /* @__PURE__ */ import_react49.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(import_recharts.XAxis, { dataKey: "name", tickLine: false }),
+      /* @__PURE__ */ import_react50.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "revenue",
           barSize,
           isAnimationActive: false,
-          radius: [barSize / 4, barSize / 4, 0, 0],
+          radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--income"
         },
-        /* @__PURE__ */ import_react49.default.createElement(
+        /* @__PURE__ */ import_react50.default.createElement(
           import_recharts.LabelList,
           {
-            content: /* @__PURE__ */ import_react49.default.createElement(
+            content: /* @__PURE__ */ import_react50.default.createElement(
               Indicator,
               {
                 animateFrom,
@@ -4589,7 +4652,7 @@ var ProfitAndLossChart = () => {
             )
           }
         ),
-        data.map((entry) => /* @__PURE__ */ import_react49.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react50.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -4597,16 +4660,16 @@ var ProfitAndLossChart = () => {
           }
         ))
       ),
-      /* @__PURE__ */ import_react49.default.createElement(
+      /* @__PURE__ */ import_react50.default.createElement(
         import_recharts.Bar,
         {
           dataKey: "expenses",
           barSize,
           isAnimationActive: false,
-          radius: [barSize / 4, barSize / 4, 0, 0],
+          radius: [2, 2, 0, 0],
           className: "Layer__profit-and-loss-chart__bar--expenses"
         },
-        data.map((entry) => /* @__PURE__ */ import_react49.default.createElement(
+        data.map((entry) => /* @__PURE__ */ import_react50.default.createElement(
           import_recharts.Cell,
           {
             key: entry.name,
@@ -4619,10 +4682,10 @@ var ProfitAndLossChart = () => {
 };
 
 // src/components/ProfitAndLossDatePicker/ProfitAndLossDatePicker.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_date_fns12 = require("date-fns");
 var ProfitAndLossDatePicker = () => {
-  const { changeDateRange, dateRange } = (0, import_react50.useContext)(ProfitAndLoss.Context);
+  const { changeDateRange, dateRange } = (0, import_react51.useContext)(ProfitAndLoss.Context);
   const date = dateRange.startDate;
   const label = (0, import_date_fns12.format)(date, "LLLL y");
   const change = (duration) => {
@@ -4634,42 +4697,42 @@ var ProfitAndLossDatePicker = () => {
   };
   const previousMonth = () => change({ months: -1 });
   const nextMonth = () => change({ months: 1 });
-  return /* @__PURE__ */ import_react50.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement("div", { className: "Layer__profit-and-loss-date-picker" }, /* @__PURE__ */ import_react51.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react51.default.createElement(
     "button",
     {
       "aria-label": "View Previous Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: previousMonth
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       ChevronLeft_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
-        size: 18
+        size: 16
       }
     )
-  ), /* @__PURE__ */ import_react50.default.createElement("span", { className: "Layer__profit-and-loss-date-picker__label" }, label), /* @__PURE__ */ import_react50.default.createElement(
+  ), /* @__PURE__ */ import_react51.default.createElement(
     "button",
     {
       "aria-label": "View Next Month",
       className: "Layer__profit-and-loss-date-picker__button",
       onClick: nextMonth
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       ChevronRight_default,
       {
         className: "Layer__profit-and-loss-date-picker__button-icon",
-        size: 18
+        size: 16
       }
     )
   ));
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_react52 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/components/SkeletonLoader/SkeletonLoader.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 var import_classnames22 = __toESM(require("classnames"));
 var SkeletonLoader = ({
   height,
@@ -4680,11 +4743,161 @@ var SkeletonLoader = ({
     "Layer__skeleton-loader Layer__anim--skeleton-loading",
     className
   );
-  return /* @__PURE__ */ import_react51.default.createElement("div", { className: baseClassName, style: { width, height } });
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: baseClassName, style: { width, height } });
+};
+
+// src/components/ProfitAndLossSummaries/MiniChart.tsx
+var import_react53 = __toESM(require("react"));
+
+// src/config/charts.ts
+var INACTIVE_OPACITY_LEVELS = [
+  0.85,
+  0.7,
+  0.66,
+  0.55,
+  0.4,
+  0.33,
+  0.25,
+  0.15
+];
+var DEFAULT_CHART_COLORS = [
+  {
+    color: "#7417B3",
+    opacity: 1
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.8
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.6
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.4
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.2
+  },
+  {
+    color: "#7417B3",
+    opacity: 0.1
+  },
+  {
+    color: "#006A80",
+    opacity: 1
+  },
+  {
+    color: "#006A80",
+    opacity: 0.8
+  },
+  {
+    color: "#006A80",
+    opacity: 0.6
+  },
+  {
+    color: "#006A80",
+    opacity: 0.4
+  },
+  {
+    color: "#006A80",
+    opacity: 0.2
+  },
+  {
+    color: "#006A80",
+    opacity: 0.1
+  },
+  {
+    color: "#009930",
+    opacity: 1
+  },
+  {
+    color: "#009930",
+    opacity: 0.8
+  },
+  {
+    color: "#009930",
+    opacity: 0.6
+  },
+  {
+    color: "#009930",
+    opacity: 0.4
+  },
+  {
+    color: "#009930",
+    opacity: 0.2
+  },
+  {
+    color: "#009930",
+    opacity: 0.1
+  }
+];
+
+// src/components/ProfitAndLossSummaries/MiniChart.tsx
+var import_recharts2 = require("recharts");
+var MiniChart = ({ data }) => {
+  return /* @__PURE__ */ import_react53.default.createElement(import_recharts2.PieChart, { width: 48, height: 48, className: "mini-chart" }, /* @__PURE__ */ import_react53.default.createElement(
+    import_recharts2.Pie,
+    {
+      data,
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 10,
+      outerRadius: 16,
+      paddingAngle: 0.2,
+      fill: "#8884d8",
+      width: 24,
+      height: 24,
+      animationDuration: 250,
+      animationEasing: "ease-in-out"
+    },
+    data.map((entry, index) => {
+      const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+      return /* @__PURE__ */ import_react53.default.createElement(
+        import_recharts2.Cell,
+        {
+          key: `cell-${index}`,
+          className: `Layer__profit-and-loss-detailed-charts__pie`,
+          fill: entry.name === "placeholder" ? "#e6e6e6" : colorConfig.color,
+          opacity: colorConfig.opacity
+        }
+      );
+    })
+  ));
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
 var import_classnames23 = __toESM(require("classnames"));
+var CHART_PLACEHOLDER = [
+  {
+    name: "placeholder",
+    display_name: "placeholder",
+    value: 1,
+    type: "placeholder",
+    share: 1
+  }
+];
+var buildMiniChartData = (scope, data) => {
+  if (!data) {
+    return CHART_PLACEHOLDER;
+  }
+  let items = [];
+  switch (scope) {
+    case "revenue":
+      items = collectRevenueItems(data);
+      break;
+    default:
+      items = collectExpensesItems(data);
+  }
+  if (!items || items.length === 0 || !items.find((x) => Math.abs(x.value) !== 0)) {
+    return CHART_PLACEHOLDER;
+  }
+  return items.slice();
+};
 var ProfitAndLossSummaries = ({
   vertical,
   revenueLabel = "Revenue"
@@ -4694,17 +4907,23 @@ var ProfitAndLossSummaries = ({
     isLoading,
     setSidebarScope,
     sidebarScope
-  } = (0, import_react52.useContext)(ProfitAndLoss.Context);
+  } = (0, import_react54.useContext)(ProfitAndLoss.Context);
+  const expensesChartData = (0, import_react54.useMemo)(() => {
+    return buildMiniChartData("expenses", storedData);
+  }, [storedData]);
+  const revenueChartData = (0, import_react54.useMemo)(() => {
+    return buildMiniChartData("revenue", storedData);
+  }, [storedData]);
   const data = storedData ? storedData : { income: { value: NaN }, net_profit: NaN };
   const incomeDirectionClass = (data.income.value ?? NaN) < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const expensesDirectionClass = (data?.income?.value ?? NaN) - data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
   const netProfitDirectionClass = data.net_profit < 0 ? "Layer__profit-and-loss-summaries__amount--negative" : "Layer__profit-and-loss-summaries__amount--positive";
-  return /* @__PURE__ */ import_react52.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-summaries ${vertical ? "flex-col" : ""}`
     },
-    /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement(
       "div",
       {
         className: (0, import_classnames23.default)(
@@ -4714,16 +4933,16 @@ var ProfitAndLossSummaries = ({
         ),
         onClick: () => setSidebarScope("revenue")
       },
-      /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel),
-      isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement(MiniChart, { data: revenueChartData }),
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, revenueLabel), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, null)) : /* @__PURE__ */ import_react54.default.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${incomeDirectionClass}`
         },
         centsToDollars(Math.abs(data?.income?.value ?? NaN))
-      )
+      ))
     ),
-    /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement(
       "div",
       {
         className: (0, import_classnames23.default)(
@@ -4733,43 +4952,81 @@ var ProfitAndLossSummaries = ({
         ),
         onClick: () => setSidebarScope("expenses")
       },
-      /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"),
-      isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react52.default.createElement(
+      /* @__PURE__ */ import_react54.default.createElement(MiniChart, { data: expensesChartData }),
+      /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Expenses"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react54.default.createElement(
         "span",
         {
           className: `Layer__profit-and-loss-summaries__amount ${expensesDirectionClass}`
         },
-        centsToDollars(Math.abs((data.income.value ?? 0) - data.net_profit))
-      )
+        centsToDollars(
+          Math.abs((data.income.value ?? 0) - data.net_profit)
+        )
+      ))
     ),
-    /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react52.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react52.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react52.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react52.default.createElement(
+    /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__text" }, /* @__PURE__ */ import_react54.default.createElement("span", { className: "Layer__profit-and-loss-summaries__title" }, "Net Profit"), isLoading || storedData === void 0 ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-summaries__loader" }, /* @__PURE__ */ import_react54.default.createElement(SkeletonLoader, { className: "Layer__profit-and-loss-summaries__loader" })) : /* @__PURE__ */ import_react54.default.createElement(
       "span",
       {
         className: `Layer__profit-and-loss-summaries__amount ${netProfitDirectionClass}`
       },
       centsToDollars(Math.abs(data.net_profit))
-    ))
+    )))
   );
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react54 = __toESM(require("react"));
+var import_react56 = __toESM(require("react"));
+
+// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+var import_react55 = __toESM(require("react"));
+
+// src/icons/PieChart.tsx
+var React65 = __toESM(require("react"));
+var PieChart2 = ({ size = 12, ...props }) => /* @__PURE__ */ React65.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 12 12",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React65.createElement("g", null, /* @__PURE__ */ React65.createElement(
+    "path",
+    {
+      d: "M10.2213 7.78271C9.92969 8.47226 9.47363 9.07989 8.89297 9.55247C8.3123 10.0251 7.62471 10.3482 6.89031 10.4936C6.1559 10.6391 5.39705 10.6024 4.68009 10.3869C3.96313 10.1713 3.30989 9.78337 2.77749 9.25701C2.24509 8.73065 1.84973 8.08189 1.62598 7.36744C1.40223 6.65298 1.3569 5.8946 1.49396 5.15858C1.63102 4.42257 1.94629 3.73133 2.41221 3.14531C2.87813 2.55928 3.48051 2.09631 4.16669 1.79688",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ), /* @__PURE__ */ React65.createElement(
+    "path",
+    {
+      d: "M10.5833 6.00033C10.5833 5.39843 10.4648 4.80244 10.2344 4.24636C10.0041 3.69028 9.66651 3.18502 9.24091 2.75942C8.8153 2.33382 8.31004 1.99621 7.75397 1.76588C7.19789 1.53554 6.60189 1.41699 6 1.41699V6.00033H10.5833Z",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ))
+);
+var PieChart_default = PieChart2;
 
 // src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var import_react53 = __toESM(require("react"));
 var ProfitAndLossRow = ({
   variant,
   lineItem,
   depth = 0,
   maxDepth = 1,
   direction = "DEBIT" /* DEBIT */,
-  lockExpanded = false
+  lockExpanded = false,
+  scope,
+  setSidebarScope
 }) => {
   if (!lineItem) {
     return null;
   }
   const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react53.useState)(true);
+  const [expanded, setExpanded] = (0, import_react55.useState)(true);
   const amount = value ?? 0;
   const amountString = centsToDollars(Math.abs(amount));
   const labelClasses = [
@@ -4800,20 +5057,36 @@ var ProfitAndLossRow = ({
   );
   displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
   displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement(
     "div",
     {
       className: labelClasses.join(" "),
       onClick: () => !lockExpanded && toggleExpanded()
     },
-    !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react53.default.createElement(ChevronDownFill_default, { size: 16 }) : null,
-    /* @__PURE__ */ import_react53.default.createElement(Text, null, display_name)
-  ), /* @__PURE__ */ import_react53.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react53.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react55.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react55.default.createElement(
+      ChevronDownFill_default,
+      {
+        size: 16,
+        className: "Layer__profit-and-loss-row__label__chevron"
+      }
+    ) : null, /* @__PURE__ */ import_react55.default.createElement(Text, null, display_name)),
+    setSidebarScope && /* @__PURE__ */ import_react55.default.createElement(
+      "span",
+      {
+        className: "Layer__profit-and-loss-row__detailed-chart-btn",
+        onClick: (e) => {
+          e.stopPropagation();
+          setSidebarScope && setSidebarScope(scope ?? "expenses");
+        }
+      },
+      /* @__PURE__ */ import_react55.default.createElement(PieChart_default, null)
+    )
+  ), /* @__PURE__ */ import_react55.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react55.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react55.default.createElement(
     "div",
     {
       className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
     },
-    /* @__PURE__ */ import_react53.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react53.default.createElement(
+    /* @__PURE__ */ import_react55.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react55.default.createElement(
       ProfitAndLossRow,
       {
         key: line_item.display_name,
@@ -4876,26 +5149,34 @@ var empty_profit_and_loss_report_default = {
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
 var ProfitAndLossTable = ({ lockExpanded }) => {
-  const { data: actualData, isLoading } = (0, import_react54.useContext)(ProfitAndLoss.Context);
+  const {
+    data: actualData,
+    isLoading,
+    setSidebarScope
+  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
   const data = !actualData || isLoading ? empty_profit_and_loss_report_default : actualData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react54.default.createElement(Loader2, null));
+    return /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table__loader-container" }, /* @__PURE__ */ import_react56.default.createElement(Loader2, null));
   }
-  return /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table--main" }, /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.income,
       direction: "CREDIT" /* CREDIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "revenue",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.cost_of_goods_sold,
       direction: "DEBIT" /* DEBIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "expenses",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4904,16 +5185,20 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       },
       variant: "summation",
       direction: "CREDIT" /* CREDIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "revenue",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.expenses,
       direction: "DEBIT" /* DEBIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "expenses",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4922,16 +5207,20 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       },
       variant: "summation",
       direction: "CREDIT" /* CREDIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "revenue",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.taxes,
       direction: "DEBIT" /* DEBIT */,
-      lockExpanded
+      lockExpanded,
+      scope: "expenses",
+      setSidebarScope
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: {
@@ -4942,26 +5231,26 @@ var ProfitAndLossTable = ({ lockExpanded }) => {
       direction: "CREDIT" /* CREDIT */,
       lockExpanded
     }
-  )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react54.default.createElement(
+  )), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.other_outflows,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(
+  ), /* @__PURE__ */ import_react56.default.createElement(
     ProfitAndLossRow,
     {
       lineItem: data.personal_expenses,
       direction: "DEBIT" /* DEBIT */,
       lockExpanded
     }
-  )));
+  )) : null);
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns13 = require("date-fns");
-var PNLContext = (0, import_react55.createContext)({
+var PNLContext = (0, import_react57.createContext)({
   data: void 0,
   filteredData: [],
   filteredTotal: void 0,
@@ -4990,7 +5279,7 @@ var PNLContext = (0, import_react55.createContext)({
 });
 var ProfitAndLoss = ({ children, tagFilter, reportingBasis }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ import_react55.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
+  return /* @__PURE__ */ import_react57.default.createElement(PNLContext.Provider, { value: contextData }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__component Layer__profit-and-loss" }, children));
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -4999,15 +5288,218 @@ ProfitAndLoss.Summaries = ProfitAndLossSummaries;
 ProfitAndLoss.Table = ProfitAndLossTable;
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-var import_react57 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-var import_react56 = __toESM(require("react"));
-var import_react_select3 = __toESM(require("react-select"));
+var import_react61 = __toESM(require("react"));
+
+// src/icons/X.tsx
+var React69 = __toESM(require("react"));
+var X = ({ size = 18, ...props }) => /* @__PURE__ */ React69.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React69.createElement(
+    "path",
+    {
+      d: "M13.5 4.5L4.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ),
+  /* @__PURE__ */ React69.createElement(
+    "path",
+    {
+      d: "M4.5 4.5L13.5 13.5",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  )
+);
+var X_default = X;
+
+// src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+var import_react58 = __toESM(require("react"));
+var import_recharts3 = require("recharts");
+var DetailedChart = ({
+  filteredData,
+  filteredTotal,
+  hoveredItem,
+  setHoveredItem,
+  sidebarScope,
+  date
+}) => {
+  const chartData = (0, import_react58.useMemo)(() => {
+    if (!filteredData) {
+      return [];
+    }
+    return filteredData.map((x) => {
+      if (x.hidden) {
+        return {
+          name: x.display_name,
+          value: 0
+        };
+      }
+      return {
+        name: x.display_name,
+        value: x.value
+      };
+    });
+  }, [filteredData]);
+  return /* @__PURE__ */ import_react58.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "header--tablet" }, /* @__PURE__ */ import_react58.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react58.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react58.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react58.default.createElement(import_recharts3.ResponsiveContainer, null, /* @__PURE__ */ import_react58.default.createElement(import_recharts3.PieChart, null, /* @__PURE__ */ import_react58.default.createElement(
+    import_recharts3.Pie,
+    {
+      data: chartData,
+      dataKey: "value",
+      nameKey: "name",
+      cx: "50%",
+      cy: "50%",
+      innerRadius: 105,
+      outerRadius: 120,
+      paddingAngle: 0.5,
+      fill: "#8884d8",
+      animationDuration: 200,
+      animationEasing: "ease-in-out"
+    },
+    chartData.map((entry, index) => {
+      const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
+      let fill = colorConfig.color;
+      let opacity = colorConfig.opacity;
+      let active = true;
+      if (hoveredItem && entry.name !== hoveredItem) {
+        active = false;
+        fill = void 0;
+        opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
+      }
+      return /* @__PURE__ */ import_react58.default.createElement(
+        import_recharts3.Cell,
+        {
+          key: `cell-${index}`,
+          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
+          style: { fill },
+          opacity,
+          onMouseEnter: () => setHoveredItem(entry.name),
+          onMouseLeave: () => setHoveredItem(void 0)
+        }
+      );
+    }),
+    /* @__PURE__ */ import_react58.default.createElement(
+      import_recharts3.Label,
+      {
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) - 15,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let text = "Total";
+          if (hoveredItem) {
+            text = hoveredItem;
+          }
+          return /* @__PURE__ */ import_react58.default.createElement(
+            import_recharts3.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__title"
+            },
+            text
+          );
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react58.default.createElement(
+      import_recharts3.Label,
+      {
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) + 5,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          let value = filteredTotal;
+          if (hoveredItem) {
+            value = filteredData.find(
+              (x) => x.display_name === hoveredItem
+            )?.value;
+          }
+          return /* @__PURE__ */ import_react58.default.createElement(
+            import_recharts3.Text,
+            {
+              ...positioningProps,
+              className: "pie-center-label__value"
+            },
+            `$${centsToDollars(value)}`
+          );
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react58.default.createElement(
+      import_recharts3.Label,
+      {
+        position: "center",
+        value: "Total",
+        className: "pie-center-label-title",
+        content: (props) => {
+          const { cx, cy } = props.viewBox ?? {
+            cx: 0,
+            cy: 0
+          };
+          const positioningProps = {
+            x: cx,
+            y: (cy || 0) + 25,
+            height: 20,
+            textAnchor: "middle",
+            verticalAnchor: "middle"
+          };
+          if (hoveredItem) {
+            return /* @__PURE__ */ import_react58.default.createElement(
+              import_recharts3.Text,
+              {
+                ...positioningProps,
+                className: "pie-center-label__share"
+              },
+              `${formatPercent(
+                filteredData.find((x) => x.display_name === hoveredItem)?.share
+              )}%`
+            );
+          }
+          return;
+        }
+      }
+    )
+  )))));
+};
+
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+var import_react59 = __toESM(require("react"));
 
 // src/icons/SortArrows.tsx
-var React66 = __toESM(require("react"));
-var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElement(
+var React71 = __toESM(require("react"));
+var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React71.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -5017,7 +5509,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React66.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React66.createElement(
+  /* @__PURE__ */ React71.createElement("g", { "clip-path": "url(#clip0_1758_75388)" }, /* @__PURE__ */ React71.createElement(
     "path",
     {
       d: "M1.33325 8.5L3.99992 11.1667L6.66659 8.5",
@@ -5026,7 +5518,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
       "stroke-linejoin": "round",
       className: "desc-arrow"
     }
-  ), /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React71.createElement(
     "path",
     {
       d: "M4 2.5L4 11.1667",
@@ -5035,7 +5527,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
       "stroke-linejoin": "round",
       className: "desc-arrow"
     }
-  ), /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React71.createElement(
     "path",
     {
       d: "M5.99988 5.16602L8.66654 2.49935L11.3332 5.16602",
@@ -5044,7 +5536,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
       "stroke-linejoin": "round",
       className: "asc-arrow"
     }
-  ), /* @__PURE__ */ React66.createElement(
+  ), /* @__PURE__ */ React71.createElement(
     "path",
     {
       d: "M8.66663 11.166L8.66663 2.49935",
@@ -5054,7 +5546,7 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
       className: "asc-arrow"
     }
   )),
-  /* @__PURE__ */ React66.createElement("defs", null, /* @__PURE__ */ React66.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React66.createElement(
+  /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: "clip0_1758_75388" }, /* @__PURE__ */ React71.createElement(
     "rect",
     {
       width: "12",
@@ -5066,121 +5558,119 @@ var SortArrows = ({ size = 13, ...props }) => /* @__PURE__ */ React66.createElem
 );
 var SortArrows_default = SortArrows;
 
-// src/icons/X.tsx
-var React67 = __toESM(require("react"));
-var X = ({ size = 18, ...props }) => /* @__PURE__ */ React67.createElement(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 18 18",
-    fill: "none",
-    ...props,
-    width: size,
-    height: size
-  },
-  /* @__PURE__ */ React67.createElement(
-    "path",
+// src/components/ProfitAndLossDetailedCharts/DetailedTable.tsx
+var import_classnames24 = __toESM(require("classnames"));
+var DetailedTable = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  sortBy,
+  hoveredItem,
+  setHoveredItem
+}) => {
+  const buildColClass = (column) => {
+    return (0, import_classnames24.default)(
+      "Layer__sortable-col",
+      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
+    );
+  };
+  return /* @__PURE__ */ import_react59.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react59.default.createElement("table", null, /* @__PURE__ */ import_react59.default.createElement("thead", null, /* @__PURE__ */ import_react59.default.createElement("tr", null, /* @__PURE__ */ import_react59.default.createElement(
+    "th",
     {
-      d: "M13.5 4.5L4.5 13.5",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ React67.createElement(
-    "path",
+      className: buildColClass("category"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "category")
+    },
+    "Expense/Sale ",
+    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react59.default.createElement(
+    "th",
     {
-      d: "M4.5 4.5L13.5 13.5",
-      stroke: "currentColor",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      className: buildColClass("type"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "type")
+    },
+    "Type ",
+    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ), /* @__PURE__ */ import_react59.default.createElement("th", null), /* @__PURE__ */ import_react59.default.createElement(
+    "th",
+    {
+      className: buildColClass("value"),
+      onClick: () => sortBy(sidebarScope ?? "expenses", "value")
+    },
+    "Value ",
+    /* @__PURE__ */ import_react59.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
+  ))), /* @__PURE__ */ import_react59.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
+    const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
+    return /* @__PURE__ */ import_react59.default.createElement(
+      "tr",
+      {
+        key: `pl-side-table-item-${idx}`,
+        className: (0, import_classnames24.default)(
+          "Layer__profit-and-loss-detailed-table__row",
+          hoveredItem && hoveredItem === item.display_name ? "active" : ""
+        ),
+        onMouseEnter: () => setHoveredItem(item.display_name),
+        onMouseLeave: () => setHoveredItem(void 0)
+      },
+      /* @__PURE__ */ import_react59.default.createElement("td", { className: "category-col" }, item.display_name),
+      /* @__PURE__ */ import_react59.default.createElement("td", { className: "type-col" }, item.type),
+      /* @__PURE__ */ import_react59.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
+      /* @__PURE__ */ import_react59.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react59.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react59.default.createElement(
+        "div",
+        {
+          className: "share-icon",
+          style: {
+            background: colorConfig.color,
+            opacity: colorConfig.opacity
+          }
+        }
+      )))
+    );
+  })))));
+};
+
+// src/components/ProfitAndLossDetailedCharts/Filters.tsx
+var import_react60 = __toESM(require("react"));
+var import_react_select4 = __toESM(require("react-select"));
+var Filters = ({
+  filteredData,
+  sidebarScope,
+  filters,
+  setFilterTypes
+}) => {
+  return /* @__PURE__ */ import_react60.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react60.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react60.default.createElement(
+    import_react_select4.default,
+    {
+      className: "Layer__select type-select",
+      classNamePrefix: "Layer__select",
+      value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
+        value: x,
+        label: x
+      })) : [],
+      isMulti: true,
+      isClearable: false,
+      options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
+        label: x,
+        value: x
+      })),
+      onChange: (selected) => {
+        setFilterTypes(
+          sidebarScope ?? "expenses",
+          selected.map((x) => x.value)
+        );
+      },
+      components: {
+        DropdownIndicator: (props) => /* @__PURE__ */ import_react60.default.createElement(import_react_select4.components.DropdownIndicator, { ...props }, /* @__PURE__ */ import_react60.default.createElement(ChevronDown_default, null)),
+        Placeholder: (props) => /* @__PURE__ */ import_react60.default.createElement(import_react_select4.components.Placeholder, { ...props }, /* @__PURE__ */ import_react60.default.createElement("div", { className: "Layer__select__multi-all-placeholder-badge" }, "All"))
+      }
     }
-  )
-);
-var X_default = X;
+  ));
+};
 
 // src/components/ProfitAndLossDetailedCharts/ProfitAndLossDetailedCharts.tsx
-var import_classnames24 = __toESM(require("classnames"));
+var import_classnames25 = __toESM(require("classnames"));
 var import_date_fns14 = require("date-fns");
-var import_recharts2 = require("recharts");
-var INACTIVE_OPACITY_LEVELS = [0.85, 0.7, 0.66, 0.55, 0.4, 0.33, 0.25, 0.15];
-var DEFAULT_CHART_COLORS = [
-  {
-    color: "#7417B3",
-    opacity: 1
-  },
-  {
-    color: "#7417B3",
-    opacity: 0.8
-  },
-  {
-    color: "#7417B3",
-    opacity: 0.6
-  },
-  {
-    color: "#7417B3",
-    opacity: 0.4
-  },
-  {
-    color: "#7417B3",
-    opacity: 0.2
-  },
-  {
-    color: "#7417B3",
-    opacity: 0.1
-  },
-  {
-    color: "#006A80",
-    opacity: 1
-  },
-  {
-    color: "#006A80",
-    opacity: 0.8
-  },
-  {
-    color: "#006A80",
-    opacity: 0.6
-  },
-  {
-    color: "#006A80",
-    opacity: 0.4
-  },
-  {
-    color: "#006A80",
-    opacity: 0.2
-  },
-  {
-    color: "#006A80",
-    opacity: 0.1
-  },
-  {
-    color: "#009930",
-    opacity: 1
-  },
-  {
-    color: "#009930",
-    opacity: 0.8
-  },
-  {
-    color: "#009930",
-    opacity: 0.6
-  },
-  {
-    color: "#009930",
-    opacity: 0.4
-  },
-  {
-    color: "#009930",
-    opacity: 0.2
-  },
-  {
-    color: "#009930",
-    opacity: 0.1
-  }
-];
 var ProfitAndLossDetailedCharts = () => {
   const {
-    data,
     filteredData,
     filteredTotal,
     sortBy,
@@ -5190,275 +5680,77 @@ var ProfitAndLossDetailedCharts = () => {
     sidebarScope,
     setSidebarScope,
     setFilterTypes
-  } = (0, import_react56.useContext)(ProfitAndLoss.Context);
-  const [hoveredItem, setHoveredItem] = (0, import_react56.useState)();
-  const chartData = (0, import_react56.useMemo)(() => {
-    if (!filteredData) {
-      return [];
-    }
-    return filteredData.map((x) => {
-      if (x.hidden) {
-        return {
-          name: x.display_name,
-          value: 0
-        };
-      }
-      return {
-        name: x.display_name,
-        value: x.value
-      };
-    });
-  }, [filteredData]);
-  const buildColClass = (column) => {
-    return (0, import_classnames24.default)(
-      "Layer__sortable-col",
-      sidebarScope && filters[sidebarScope]?.sortBy === column ? `sort--${(sidebarScope && filters[sidebarScope]?.sortDirection) ?? "desc"}` : ""
-    );
-  };
-  return /* @__PURE__ */ import_react56.default.createElement(
+  } = (0, import_react61.useContext)(ProfitAndLoss.Context);
+  const [hoveredItem, setHoveredItem] = (0, import_react61.useState)();
+  return /* @__PURE__ */ import_react61.default.createElement(
     "div",
     {
-      className: (0, import_classnames24.default)(
+      className: (0, import_classnames25.default)(
         "Layer__profit-and-loss__side-panel",
         sidebarScope && "open"
       )
     },
-    /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react56.default.createElement("header", null, /* @__PURE__ */ import_react56.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react56.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react56.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y"))), /* @__PURE__ */ import_react56.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts" }, /* @__PURE__ */ import_react61.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__head" }, /* @__PURE__ */ import_react61.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, humanizeTitle(sidebarScope)), /* @__PURE__ */ import_react61.default.createElement(Text, { size: "sm" /* sm */, className: "date" }, (0, import_date_fns14.format)(dateRange.startDate, "LLLL, y")), /* @__PURE__ */ import_react61.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react61.default.createElement(
       Button,
       {
-        rightIcon: /* @__PURE__ */ import_react56.default.createElement(X_default, null),
+        rightIcon: /* @__PURE__ */ import_react61.default.createElement(X_default, null),
         iconOnly: true,
         onClick: () => setSidebarScope(void 0),
         variant: "secondary" /* secondary */
       }
-    )), /* @__PURE__ */ import_react56.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react56.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react56.default.createElement(import_recharts2.PieChart, null, /* @__PURE__ */ import_react56.default.createElement(
-      import_recharts2.Pie,
+    )), /* @__PURE__ */ import_react61.default.createElement("header", { className: "Layer__profit-and-loss-detailed-charts__header--tablet" }, /* @__PURE__ */ import_react61.default.createElement(
+      Button,
       {
-        data: chartData,
-        dataKey: "value",
-        nameKey: "name",
-        cx: "50%",
-        cy: "50%",
-        innerRadius: 105,
-        outerRadius: 120,
-        paddingAngle: 0.5,
-        fill: "#8884d8"
+        onClick: () => setSidebarScope(void 0),
+        variant: "secondary" /* secondary */
       },
-      chartData.map((entry, index) => {
-        const colorConfig = DEFAULT_CHART_COLORS[index % DEFAULT_CHART_COLORS.length];
-        let fill = colorConfig.color;
-        let opacity = colorConfig.opacity;
-        let active = true;
-        if (hoveredItem && entry.name !== hoveredItem) {
-          active = false;
-          fill = void 0;
-          opacity = INACTIVE_OPACITY_LEVELS[index % INACTIVE_OPACITY_LEVELS.length];
-        }
-        return /* @__PURE__ */ import_react56.default.createElement(
-          import_recharts2.Cell,
-          {
-            key: `cell-${index}`,
-            className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
-            style: { fill },
-            opacity,
-            onMouseEnter: () => setHoveredItem(entry.name),
-            onMouseLeave: () => setHoveredItem(void 0)
-          }
-        );
-      }),
-      /* @__PURE__ */ import_react56.default.createElement(
-        import_recharts2.Label,
-        {
-          position: "center",
-          value: "Total",
-          className: "pie-center-label-title",
-          content: (props) => {
-            const { cx, cy } = props.viewBox ?? {
-              cx: 0,
-              cy: 0
-            };
-            const positioningProps = {
-              x: cx,
-              y: (cy || 0) - 15,
-              textAnchor: "middle",
-              verticalAnchor: "middle"
-            };
-            let text = "Total";
-            if (hoveredItem) {
-              text = hoveredItem;
-            }
-            return /* @__PURE__ */ import_react56.default.createElement(
-              import_recharts2.Text,
-              {
-                ...positioningProps,
-                className: "pie-center-label__title"
-              },
-              text
-            );
-          }
-        }
-      ),
-      /* @__PURE__ */ import_react56.default.createElement(
-        import_recharts2.Label,
-        {
-          position: "center",
-          value: "Total",
-          className: "pie-center-label-title",
-          content: (props) => {
-            const { cx, cy } = props.viewBox ?? {
-              cx: 0,
-              cy: 0
-            };
-            const positioningProps = {
-              x: cx,
-              y: (cy || 0) + 5,
-              textAnchor: "middle",
-              verticalAnchor: "middle"
-            };
-            let value = filteredTotal;
-            if (hoveredItem) {
-              value = filteredData.find(
-                (x) => x.display_name === hoveredItem
-              )?.value;
-            }
-            return /* @__PURE__ */ import_react56.default.createElement(
-              import_recharts2.Text,
-              {
-                ...positioningProps,
-                className: "pie-center-label__value"
-              },
-              `$${centsToDollars(value)}`
-            );
-          }
-        }
-      ),
-      /* @__PURE__ */ import_react56.default.createElement(
-        import_recharts2.Label,
-        {
-          position: "center",
-          value: "Total",
-          className: "pie-center-label-title",
-          content: (props) => {
-            const { cx, cy } = props.viewBox ?? {
-              cx: 0,
-              cy: 0
-            };
-            const positioningProps = {
-              x: cx,
-              y: (cy || 0) + 25,
-              height: 20,
-              textAnchor: "middle",
-              verticalAnchor: "middle"
-            };
-            if (hoveredItem) {
-              return /* @__PURE__ */ import_react56.default.createElement(
-                import_recharts2.Text,
-                {
-                  ...positioningProps,
-                  className: "pie-center-label__share"
-                },
-                `${formatPercent(
-                  filteredData.find(
-                    (x) => x.display_name === hoveredItem
-                  )?.share
-                )}%`
-              );
-            }
-            return;
-          }
-        }
-      )
-    )))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "filters" }, /* @__PURE__ */ import_react56.default.createElement(Text, { size: "sm" /* sm */, className: "Layer__label" }, "Filters"), /* @__PURE__ */ import_react56.default.createElement(
-      import_react_select3.default,
+      "Back"
+    )), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__content" }, /* @__PURE__ */ import_react61.default.createElement(
+      DetailedChart,
       {
-        className: "type-select",
-        classNamePrefix: "Layer__select",
-        value: sidebarScope && filters[sidebarScope]?.types ? sidebarScope && filters[sidebarScope]?.types?.map((x) => ({
-          value: x,
-          label: x
-        })) : [],
-        isMulti: true,
-        isClearable: false,
-        options: [...new Set(filteredData?.map((x) => x.type))].map((x) => ({
-          label: x,
-          value: x
-        })),
-        onChange: (selected) => {
-          setFilterTypes(
-            sidebarScope ?? "expenses",
-            selected.map((x) => x.value)
-          );
-        }
+        filteredData,
+        filteredTotal,
+        hoveredItem,
+        setHoveredItem,
+        sidebarScope,
+        date: dateRange.startDate
       }
-    )), /* @__PURE__ */ import_react56.default.createElement("div", { className: "details-container" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "table" }, /* @__PURE__ */ import_react56.default.createElement("table", null, /* @__PURE__ */ import_react56.default.createElement("thead", null, /* @__PURE__ */ import_react56.default.createElement("tr", null, /* @__PURE__ */ import_react56.default.createElement(
-      "th",
+    ), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__profit-and-loss-detailed-charts__table-wrapper" }, /* @__PURE__ */ import_react61.default.createElement(
+      Filters,
       {
-        className: buildColClass("category"),
-        onClick: () => sortBy(sidebarScope ?? "expenses", "category")
-      },
-      "Expense/Sale ",
-      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-    ), /* @__PURE__ */ import_react56.default.createElement(
-      "th",
-      {
-        className: buildColClass("type"),
-        onClick: () => sortBy(sidebarScope ?? "expenses", "type")
-      },
-      "Type ",
-      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-    ), /* @__PURE__ */ import_react56.default.createElement("th", null), /* @__PURE__ */ import_react56.default.createElement(
-      "th",
+        filteredData,
+        sidebarScope,
+        filters,
+        setFilterTypes
+      }
+    ), /* @__PURE__ */ import_react61.default.createElement(
+      DetailedTable,
       {
-        className: buildColClass("value"),
-        onClick: () => sortBy(sidebarScope ?? "expenses", "value")
-      },
-      "Value ",
-      /* @__PURE__ */ import_react56.default.createElement(SortArrows_default, { className: "Layer__sort-arrows" })
-    ))), /* @__PURE__ */ import_react56.default.createElement("tbody", null, filteredData.filter((x) => !x.hidden).map((item, idx) => {
-      const colorConfig = DEFAULT_CHART_COLORS[idx % DEFAULT_CHART_COLORS.length];
-      return /* @__PURE__ */ import_react56.default.createElement(
-        "tr",
-        {
-          key: `pl-side-table-item-${idx}`,
-          className: (0, import_classnames24.default)(
-            "Layer__profit-and-loss-detailed-table__row",
-            hoveredItem && hoveredItem !== item.display_name ? "inactive" : ""
-          ),
-          onMouseEnter: () => setHoveredItem(item.display_name),
-          onMouseLeave: () => setHoveredItem(void 0)
-        },
-        /* @__PURE__ */ import_react56.default.createElement("td", { className: "category-col" }, item.display_name),
-        /* @__PURE__ */ import_react56.default.createElement("td", { className: "type-col" }, item.type),
-        /* @__PURE__ */ import_react56.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
-        /* @__PURE__ */ import_react56.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react56.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react56.default.createElement(
-          "div",
-          {
-            className: "share-icon",
-            style: {
-              background: colorConfig.color,
-              opacity: colorConfig.opacity
-            }
-          }
-        )))
-      );
-    }))))))
+        filteredData,
+        sidebarScope,
+        filters,
+        sortBy,
+        hoveredItem,
+        setHoveredItem
+      }
+    ))))
   );
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
 var COMPONENT_NAME3 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
-  return /* @__PURE__ */ import_react57.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react57.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react57.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react57.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react57.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react57.default.createElement(ProfitAndLossDetailedCharts, null)));
+  return /* @__PURE__ */ import_react62.default.createElement(Container, { name: COMPONENT_NAME3 }, /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss, null, /* @__PURE__ */ import_react62.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__main-panel` }, /* @__PURE__ */ import_react62.default.createElement(Header, { className: `Layer__${COMPONENT_NAME3}__header` }, /* @__PURE__ */ import_react62.default.createElement(Heading, { className: "Layer__bank-transactions__title" }, "Profit & Loss")), /* @__PURE__ */ import_react62.default.createElement(Components, { ...props })), props.showDetailedCharts !== false && /* @__PURE__ */ import_react62.default.createElement(ProfitAndLossDetailedCharts, null)));
 };
 var Components = ({
   hideChart = false,
   hideTable = false
 }) => {
-  const { error, isLoading, isValidating, refetch } = (0, import_react57.useContext)(
+  const { error, isLoading, isValidating, refetch } = (0, import_react62.useContext)(
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ import_react57.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react57.default.createElement(
+    return /* @__PURE__ */ import_react62.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react62.default.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -5469,26 +5761,504 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react57.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react57.default.createElement(
+  return /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, !hideChart && /* @__PURE__ */ import_react62.default.createElement("div", { className: `Layer__${COMPONENT_NAME3}__chart_with_summaries` }, /* @__PURE__ */ import_react62.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
-  ), /* @__PURE__ */ import_react57.default.createElement(
+    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Summaries, { vertical: true })
+  ), /* @__PURE__ */ import_react62.default.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME3}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ import_react57.default.createElement(ProfitAndLoss.Table, null));
+    /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ import_react62.default.createElement(ProfitAndLoss.Table, null));
 };
 
-// src/providers/LayerProvider/LayerProvider.tsx
-var import_react58 = __toESM(require("react"));
-var import_date_fns15 = require("date-fns");
+// src/components/LedgerAccounts/LedgerAccounts.tsx
+var import_react68 = __toESM(require("react"));
+
+// src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
+var import_react63 = require("react");
 var import_swr5 = __toESM(require("swr"));
+var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.sub_accounts || [])]).flat().filter((id) => id);
+var useLedgerAccounts = () => {
+  const { auth, businessId, apiUrl } = useLayerContext();
+  const [form, setForm] = (0, import_react63.useState)();
+  const [showARForAccountId, setShowARForAccountId] = (0, import_react63.useState)();
+  const { data, isLoading, isValidating, error, mutate } = (0, import_swr5.default)(
+    businessId && auth?.access_token && `ledger-accounts-${businessId}`,
+    Layer.getLedgerAccounts(apiUrl, auth?.access_token, {
+      params: { businessId }
+    })
+  );
+  const create = (newAccount) => {
+    Layer.createAccount(apiUrl, auth?.access_token, {
+      params: { businessId },
+      body: newAccount
+    }).then(({ data: data2 }) => (mutate(), data2));
+  };
+  const submitForm = () => {
+    if (!form || !form.action) {
+      return;
+    }
+    const data2 = {
+      name: form.data.name || "Test name",
+      normality: form.data.subType?.value,
+      parent_id: form.data.parent ? {
+        type: "AccountId",
+        id: form.data.parent.value
+      } : void 0,
+      description: form.data.type?.value.toString() || "Test description"
+    };
+    if (form.action === "new") {
+      create(data2);
+      return;
+    }
+    if (form.action === "edit" && form.accountId) {
+      return;
+    }
+  };
+  const addAccount = () => setForm({
+    action: "new",
+    accountId: void 0,
+    data: {
+      parent: void 0,
+      name: void 0,
+      type: {
+        value: "assets",
+        label: "Assets"
+      },
+      subType: void 0,
+      category: void 0
+    }
+  });
+  const editAccount = (id) => {
+    const allAccounts = flattenAccounts(data?.data?.accounts || []);
+    const found = allAccounts?.find((x) => x.id === id);
+    if (!found) {
+      return;
+    }
+    const parent = allAccounts.find(
+      (x) => x.sub_accounts?.find((el) => el.id === found.id)
+    );
+    setForm({
+      action: "edit",
+      accountId: id,
+      data: {
+        parent: parent ? {
+          value: parent.id,
+          label: parent.name
+        } : void 0,
+        name: found.name,
+        type: {
+          value: "assets",
+          label: "Assets"
+        },
+        subType: void 0,
+        category: void 0
+      }
+    });
+  };
+  const cancelForm = () => setForm(void 0);
+  const changeFormData = (fieldName, value) => {
+    if (!form) {
+      return;
+    }
+    setForm({
+      ...form,
+      data: {
+        ...form.data,
+        [fieldName]: value
+      }
+    });
+  };
+  const refetch = () => mutate();
+  return {
+    data: data?.data,
+    isLoading,
+    isValidating,
+    error,
+    refetch,
+    create,
+    form,
+    addAccount,
+    editAccount,
+    cancelForm,
+    changeFormData,
+    submitForm,
+    showARForAccountId,
+    setShowARForAccountId
+  };
+};
+
+// src/components/AccountsReceivable/AccountsReceivableIndex.tsx
+var import_react64 = __toESM(require("react"));
+var import_classnames26 = __toESM(require("classnames"));
+var import_date_fns15 = require("date-fns");
+var AccountsReceivable = () => {
+  const { data, showARForAccountId, setShowARForAccountId } = (0, import_react64.useContext)(
+    LedgerAccountsContext
+  );
+  const entry = (0, import_react64.useMemo)(() => {
+    return flattenAccounts(data?.accounts || []).find(
+      (x) => x.id === showARForAccountId
+    );
+  }, [showARForAccountId]);
+  const baseClassName = (0, import_classnames26.default)(
+    "Layer__accounts-receivable__index",
+    showARForAccountId && "open"
+  );
+  const close = () => setShowARForAccountId(void 0);
+  return /* @__PURE__ */ import_react64.default.createElement("div", { className: baseClassName }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__header" }, /* @__PURE__ */ import_react64.default.createElement(Button, { onClick: close, variant: "secondary" /* secondary */ }, "Back"), /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__title-container" }, /* @__PURE__ */ import_react64.default.createElement(
+    Text,
+    {
+      weight: "bold" /* bold */,
+      className: "Layer__accounts-receivable__title"
+    },
+    entry?.name || ""
+  ), /* @__PURE__ */ import_react64.default.createElement(
+    Button,
+    {
+      variant: "secondary" /* secondary */,
+      rightIcon: /* @__PURE__ */ import_react64.default.createElement(DownloadCloud_default, { size: 12 })
+    },
+    "Download"
+  )), /* @__PURE__ */ import_react64.default.createElement("div", { className: "Layer__accounts-receivable__balance-container" }, /* @__PURE__ */ import_react64.default.createElement(
+    Text,
+    {
+      weight: "bold" /* bold */,
+      className: "Layer__accounts-receivable__balance-label"
+    },
+    "Current balance"
+  ), /* @__PURE__ */ import_react64.default.createElement(
+    Text,
+    {
+      weight: "bold" /* bold */,
+      className: "Layer__accounts-receivable__balance-value"
+    },
+    "$",
+    centsToDollars(entry?.balance || 0)
+  ))), /* @__PURE__ */ import_react64.default.createElement("table", { className: "Layer__table Layer__accounts-receivable-table" }, /* @__PURE__ */ import_react64.default.createElement("thead", null, /* @__PURE__ */ import_react64.default.createElement("tr", null, /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Date"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Journal id #"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header" }, "Source"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Debit"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Credit"), /* @__PURE__ */ import_react64.default.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, "Running balance"))), /* @__PURE__ */ import_react64.default.createElement("tbody", null, entry?.entries?.map((x) => {
+    return /* @__PURE__ */ import_react64.default.createElement("tr", { key: x.id }, /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, x.createdAt && (0, import_date_fns15.format)((0, import_date_fns15.parseISO)(x.createdAt), DATE_FORMAT))), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, x.direction, " TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")), /* @__PURE__ */ import_react64.default.createElement("td", { className: "Layer__table-cell Layer__table-cell--amount" }, /* @__PURE__ */ import_react64.default.createElement("span", { className: "Layer__table-cell-content" }, "TBD")));
+  }))));
+};
+
+// src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
+var import_react65 = __toESM(require("react"));
+
+// src/icons/ArrowRightCircle.tsx
+var React77 = __toESM(require("react"));
+var ArrowRightCircle = ({ size = 18, ...props }) => /* @__PURE__ */ React77.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React77.createElement(
+    "path",
+    {
+      d: "M9 16.5C13.1421 16.5 16.5 13.1421 16.5 9C16.5 4.85786 13.1421 1.5 9 1.5C4.85786 1.5 1.5 4.85786 1.5 9C1.5 13.1421 4.85786 16.5 9 16.5Z",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ),
+  /* @__PURE__ */ React77.createElement(
+    "path",
+    {
+      d: "M9 12L12 9L9 6",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  ),
+  /* @__PURE__ */ React77.createElement(
+    "path",
+    {
+      d: "M6 9H12",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  )
+);
+var ArrowRightCircle_default = ArrowRightCircle;
+
+// src/icons/Edit2.tsx
+var React78 = __toESM(require("react"));
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React78.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    ...props,
+    width: size,
+    height: size
+  },
+  /* @__PURE__ */ React78.createElement(
+    "path",
+    {
+      d: "M12.75 2.25C12.947 2.05301 13.1808 1.89676 13.4382 1.79015C13.6956 1.68355 13.9714 1.62868 14.25 1.62868C14.5286 1.62868 14.8044 1.68355 15.0618 1.79015C15.3192 1.89676 15.553 2.05301 15.75 2.25C15.947 2.44698 16.1032 2.68083 16.2098 2.9382C16.3165 3.19557 16.3713 3.47142 16.3713 3.75C16.3713 4.02857 16.3165 4.30442 16.2098 4.56179C16.1032 4.81916 15.947 5.05302 15.75 5.25L5.625 15.375L1.5 16.5L2.625 12.375L12.75 2.25Z",
+      stroke: "currentColor",
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round"
+    }
+  )
+);
+var Edit2_default = Edit2;
+
+// src/components/LedgerAccountsRow/LedgerAccountsRow.tsx
+var import_classnames27 = __toESM(require("classnames"));
+var INDENTATION = 12;
+var LedgerAccountsRow = ({
+  account,
+  depth = 0
+}) => {
+  const { form, editAccount, setShowARForAccountId } = (0, import_react65.useContext)(
+    LedgerAccountsContext
+  );
+  const [isOpen, setIsOpen] = (0, import_react65.useState)(false);
+  const baseClass = (0, import_classnames27.default)(
+    "Layer__alt-table-row",
+    isOpen ? "Layer__alt-table-row--expanded" : "Layer__alt-table-row--collapsed",
+    `Layer__alt-table-row--depth-${depth}`,
+    form?.accountId === account.id && "active"
+  );
+  return /* @__PURE__ */ import_react65.default.createElement(import_react65.default.Fragment, null, /* @__PURE__ */ import_react65.default.createElement("div", { className: baseClass, onClick: () => setIsOpen(!isOpen) }, /* @__PURE__ */ import_react65.default.createElement(
+    "div",
+    {
+      className: "Layer__alt-table__cell Layer__coa__name",
+      style: { paddingLeft: INDENTATION * depth + 16 }
+    },
+    account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ import_react65.default.createElement(
+      ChevronDownFill_default,
+      {
+        size: 16,
+        className: "Layer__alt-table__expand-icon"
+      }
+    ),
+    /* @__PURE__ */ import_react65.default.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+  ), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__type" }, account.normality), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__balance" }, "$", centsToDollars(Math.abs(account.balance || 0))), /* @__PURE__ */ import_react65.default.createElement("div", { className: "Layer__alt-table__cell Layer__coa__actions" }, /* @__PURE__ */ import_react65.default.createElement(
+    Button,
+    {
+      variant: "secondary" /* secondary */,
+      rightIcon: /* @__PURE__ */ import_react65.default.createElement(Edit2_default, { size: 12 }),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        editAccount(account.id);
+      }
+    },
+    "Edit"
+  ), /* @__PURE__ */ import_react65.default.createElement(
+    Button,
+    {
+      variant: "secondary" /* secondary */,
+      rightIcon: /* @__PURE__ */ import_react65.default.createElement(ArrowRightCircle_default, { size: 12 }),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setShowARForAccountId(account.id);
+      }
+    },
+    "Open"
+  ))), isOpen && (account.sub_accounts || []).map((subAccount) => /* @__PURE__ */ import_react65.default.createElement(
+    LedgerAccountsRow,
+    {
+      key: subAccount.id,
+      account: subAccount,
+      depth: depth + 1
+    }
+  )));
+};
+
+// src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
+var import_react67 = __toESM(require("react"));
+
+// src/components/LedgerAccountsForm/LedgerAccountsForm.tsx
+var import_react66 = __toESM(require("react"));
+var SUB_TYPE_OPTIONS = [
+  {
+    value: "DEBIT" /* DEBIT */,
+    label: "Debit"
+  },
+  {
+    value: "CREDIT" /* CREDIT */,
+    label: "Credit"
+  }
+];
+var LedgerAccountsForm = () => {
+  const { form, data, changeFormData, cancelForm, submitForm } = (0, import_react66.useContext)(
+    LedgerAccountsContext
+  );
+  const parentOptions = (0, import_react66.useMemo)(
+    () => flattenAccounts(data?.accounts || []).sort((a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0).map((x) => {
+      return {
+        label: x.name,
+        value: x.id
+      };
+    }),
+    [data?.accounts?.length]
+  );
+  const entry = (0, import_react66.useMemo)(() => {
+    if (form?.action === "edit" && form.accountId) {
+      return flattenAccounts(data?.accounts || []).find(
+        (x) => x.id === form.accountId
+      );
+    }
+    return;
+  }, [data, form?.accountId]);
+  console.log(entry);
+  if (!form) {
+    return;
+  }
+  return /* @__PURE__ */ import_react66.default.createElement(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        submitForm();
+      }
+    },
+    /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__sidebar__header" }, /* @__PURE__ */ import_react66.default.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? "Edit" : "Add New", " Account"), /* @__PURE__ */ import_react66.default.createElement("div", { className: "actions" }, /* @__PURE__ */ import_react66.default.createElement(
+      Button,
+      {
+        type: "button",
+        onClick: cancelForm,
+        variant: "secondary" /* secondary */
+      },
+      "Cancel"
+    ), /* @__PURE__ */ import_react66.default.createElement(SubmitButton, { type: "submit", noIcon: true, active: true }, "Save"))),
+    entry && /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__form-edit-entry" }, /* @__PURE__ */ import_react66.default.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ import_react66.default.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ import_react66.default.createElement("div", { className: "Layer__ledger-accounts__form" }, /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "parent", label: "Parent", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+      Select3,
+      {
+        options: parentOptions,
+        value: form?.data.parent,
+        onChange: (sel) => changeFormData("parent", sel)
+      }
+    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "name", label: "Name", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+      Input,
+      {
+        name: "name",
+        value: form?.data.name,
+        onChange: (e) => changeFormData("name", e.target.value)
+      }
+    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "type", label: "Type", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+      Select3,
+      {
+        options: [],
+        disabled: true,
+        value: form?.data.type,
+        onChange: (sel) => changeFormData("type", sel)
+      }
+    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "subType", label: "Sub-Type", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+      Select3,
+      {
+        options: SUB_TYPE_OPTIONS,
+        value: form?.data.subType,
+        onChange: (sel) => changeFormData("subType", sel)
+      }
+    )), /* @__PURE__ */ import_react66.default.createElement(InputGroup, { name: "category", label: "Category", inline: true }, /* @__PURE__ */ import_react66.default.createElement(
+      Select3,
+      {
+        options: [],
+        value: form?.data.category,
+        onChange: (sel) => changeFormData("category", sel)
+      }
+    )))
+  );
+};
+
+// src/components/LedgerAccountsSidebar/LedgerAccountsSidebar.tsx
+var import_classnames28 = __toESM(require("classnames"));
+var LedgerAccountsSidebar = () => {
+  const { form } = (0, import_react67.useContext)(LedgerAccountsContext);
+  return /* @__PURE__ */ import_react67.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames28.default)(
+        "Layer__ledger-accounts__sidebar",
+        form ? "open" : ""
+      )
+    },
+    /* @__PURE__ */ import_react67.default.createElement("div", { className: "Layer__ledger-accounts__sidebar-content" }, /* @__PURE__ */ import_react67.default.createElement(LedgerAccountsForm, null))
+  );
+};
+
+// src/components/LedgerAccounts/LedgerAccounts.tsx
+var COMPONENT_NAME4 = "ledger-accounts";
+var LedgerAccountsContext = (0, import_react68.createContext)({
+  data: void 0,
+  isLoading: false,
+  isValidating: false,
+  error: void 0,
+  refetch: () => {
+  },
+  create: () => {
+  },
+  form: void 0,
+  addAccount: () => {
+  },
+  editAccount: () => {
+  },
+  cancelForm: () => {
+  },
+  changeFormData: () => {
+  },
+  submitForm: () => {
+  },
+  showARForAccountId: void 0,
+  setShowARForAccountId: () => {
+  }
+});
+var LedgerAccounts = () => {
+  const contextData = useLedgerAccounts();
+  return /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsContext.Provider, { value: contextData }, /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsContent, null));
+};
+var LedgerAccountsContent = () => {
+  const { data, isLoading, addAccount, error, isValidating, refetch } = (0, import_react68.useContext)(LedgerAccountsContext);
+  return /* @__PURE__ */ import_react68.default.createElement(Container, { name: COMPONENT_NAME4 }, /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__main-panel` }, /* @__PURE__ */ import_react68.default.createElement(Header, { className: `Layer__${COMPONENT_NAME4}__header` }, /* @__PURE__ */ import_react68.default.createElement(Heading, { className: `Layer__${COMPONENT_NAME4}__title` }, "Chart of Accounts"), /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__actions` }, /* @__PURE__ */ import_react68.default.createElement(
+    Button,
+    {
+      variant: "secondary" /* secondary */,
+      disabled: isLoading,
+      rightIcon: /* @__PURE__ */ import_react68.default.createElement(DownloadCloud_default, { size: 12 })
+    },
+    "Download"
+  ), /* @__PURE__ */ import_react68.default.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, "Add Account"))), /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__table` }, /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table-row Layer__alt-table-row--header" }, /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__name" }, "Name"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__type" }, "Type"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__subtype" }, "Sub-Type"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__balance" }, "Balance"), /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__alt-table__head-cell Layer__coa__actions" })), error ? /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react68.default.createElement(
+    DataState,
+    {
+      status: "failed" /* failed */,
+      title: "Something went wrong",
+      description: "We couldn\u2019t load your data.",
+      onRefresh: () => refetch(),
+      isLoading: isValidating || isLoading
+    }
+  )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ import_react68.default.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ import_react68.default.createElement(Loader2, null)) : null, !error && data?.accounts.map((account) => /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsRow, { key: account.id, account, depth: 0 })), !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ import_react68.default.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ import_react68.default.createElement(
+    DataState,
+    {
+      status: "info" /* info */,
+      title: "Accounts were not found",
+      description: 'New account can be created with "Add Account".',
+      onRefresh: () => refetch(),
+      isLoading: isValidating
+    }
+  )) : null)), /* @__PURE__ */ import_react68.default.createElement(LedgerAccountsSidebar, null), /* @__PURE__ */ import_react68.default.createElement(AccountsReceivable, null));
+};
+
+// src/providers/LayerProvider/LayerProvider.tsx
+var import_react69 = __toESM(require("react"));
+var import_date_fns16 = require("date-fns");
+var import_swr6 = __toESM(require("swr"));
 var reducer = (state, action) => {
   switch (action.type) {
     case "LayerContext.setAuth" /* setAuth */:
@@ -5528,7 +6298,7 @@ var LayerProvider = ({
   };
   const colors = buildColorsPalette(theme);
   const { url, scope, apiUrl } = LayerEnvironment[environment];
-  const [state, dispatch] = (0, import_react58.useReducer)(reducer, {
+  const [state, dispatch] = (0, import_react69.useReducer)(reducer, {
     auth: {
       access_token: "",
       token_type: "",
@@ -5541,8 +6311,8 @@ var LayerProvider = ({
     theme,
     colors
   });
-  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr5.default)(
-    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns15.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
+  const { data: auth } = appId !== void 0 && appSecret !== void 0 ? (0, import_swr6.default)(
+    businessAccessToken === void 0 && appId !== void 0 && appSecret !== void 0 && (0, import_date_fns16.isBefore)(state.auth.expires_at, /* @__PURE__ */ new Date()) && "authenticate",
     Layer.authenticate({
       appId,
       appSecret,
@@ -5551,7 +6321,7 @@ var LayerProvider = ({
     }),
     defaultSWRConfig
   ) : { data: void 0 };
-  (0, import_react58.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (businessAccessToken) {
       dispatch({
         type: "LayerContext.setAuth" /* setAuth */,
@@ -5560,7 +6330,7 @@ var LayerProvider = ({
             access_token: businessAccessToken,
             token_type: "Bearer",
             expires_in: 3600,
-            expires_at: (0, import_date_fns15.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
+            expires_at: (0, import_date_fns16.add)(/* @__PURE__ */ new Date(), { seconds: 3600 })
           }
         }
       });
@@ -5570,13 +6340,13 @@ var LayerProvider = ({
         payload: {
           auth: {
             ...auth,
-            expires_at: (0, import_date_fns15.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
+            expires_at: (0, import_date_fns16.add)(/* @__PURE__ */ new Date(), { seconds: auth.expires_in })
           }
         }
       });
     }
   }, [businessAccessToken, auth?.access_token]);
-  (0, import_swr5.default)(
+  (0, import_swr6.default)(
     businessId && auth?.access_token && `categories-${businessId}`,
     Layer.getCategories(apiUrl, auth?.access_token, { params: { businessId } }),
     {
@@ -5601,171 +6371,15 @@ var LayerProvider = ({
     }
     return;
   };
-  return /* @__PURE__ */ import_react58.default.createElement(import_swr5.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react58.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
-};
-
-// src/components/ChartOfAccounts/ChartOfAccounts.tsx
-var import_react61 = __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_react59 = __toESM(require("react"));
-var import_react_select4 = __toESM(require("react-select"));
-var flattenAccounts = (accounts) => accounts.flatMap((a) => [a, flattenAccounts(a.subAccounts || [])]).flat().filter((id) => id);
-var ChartOfAccountsNewForm = () => {
-  const { data, create: createAccount2 } = useChartOfAccounts();
-  const accountOptions = (0, import_react59.useMemo)(
-    () => flattenAccounts(data?.accounts || []).sort(
-      (a, b) => a?.name && b?.name ? a.name.localeCompare(b.name) : 0
-    ),
-    [data?.accounts?.length]
-  );
-  const [name, setName] = (0, import_react59.useState)("");
-  const [description, setDescription] = (0, import_react59.useState)("");
-  const [normality, setNormality] = (0, import_react59.useState)("DEBIT" /* DEBIT */);
-  const [parentAccount, setParentAccount] = (0, import_react59.useState)(
-    data?.accounts[0]
-  );
-  const save = () => {
-    createAccount2({
-      name,
-      normality,
-      parent_id: {
-        type: "AccountId",
-        id: parentAccount?.id || ""
-      },
-      description
-    });
-  };
-  return /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Name"), /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      name: "name",
-      value: name,
-      onChange: (event) => setName(event.target.value)
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Description"), /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      name: "description",
-      value: description,
-      onChange: (event) => setDescription(event.target.value)
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Normality"), /* @__PURE__ */ import_react59.default.createElement(
-    import_react_select4.default,
-    {
-      isSearchable: false,
-      onChange: (value) => value && setNormality(value.value),
-      options: [
-        { label: "Credit", value: "CREDIT" /* CREDIT */ },
-        { label: "Debit", value: "DEBIT" /* DEBIT */ }
-      ]
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field" }, /* @__PURE__ */ import_react59.default.createElement("span", null, "Parent Account"), /* @__PURE__ */ import_react59.default.createElement(
-    import_react_select4.default,
-    {
-      isSearchable: true,
-      value: parentAccount,
-      onChange: (value) => value && setParentAccount(value),
-      getOptionLabel: (a) => a.name,
-      getOptionValue: (a) => a.id,
-      options: accountOptions
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "Layer__chart-of-accounts-new-form__field Layer__chart-of-accounts-new-form__field--actions" }, /* @__PURE__ */ import_react59.default.createElement("button", { onClick: save }, "Save")));
-};
-
-// src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_react60 = __toESM(require("react"));
-var ChartOfAccountsRow = ({ account, depth = 0 }) => {
-  const classNames24 = [
-    "Layer__chart-of-accounts-row__table-cell",
-    depth > 0 && `Layer__chart-of-accounts-row__table-cell--depth-${depth}`
-  ];
-  const className = classNames24.filter((id) => id).join(" ");
-  const amountClassName = account.balance < 0 ? "Layer__chart-of-accounts-row__table-cell--amount-negative" : "Layer__chart-of-accounts-row__table-cell--amount-positive";
-  return /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
-    "div",
-    {
-      className: `${className} Layer__chart-of-accounts-row__table-cell--name`
-    },
-    account.name
-  ), /* @__PURE__ */ import_react60.default.createElement(
-    "div",
-    {
-      className: `${className} Layer__chart-of-accounts-row__table-cell--type`
-    },
-    "Assets"
-  ), /* @__PURE__ */ import_react60.default.createElement(
-    "div",
-    {
-      className: `${className} Layer__chart-of-accounts-row__table-cell--subtype`
-    },
-    "Cash"
-  ), /* @__PURE__ */ import_react60.default.createElement(
-    "div",
-    {
-      className: `${className} Layer__chart-of-accounts-row__table-cell--balance ${amountClassName}`
-    },
-    centsToDollars(Math.abs(account.balance || 0))
-  ), /* @__PURE__ */ import_react60.default.createElement(
-    "div",
-    {
-      className: `${className} Layer__chart-of-accounts-row__table-cell--actions`
-    },
-    /* @__PURE__ */ import_react60.default.createElement("button", { className: "Layer__chart-of-accounts-row__view-entries-button" }, "View Entries")
-  ), (account.subAccounts || []).map((subAccount) => /* @__PURE__ */ import_react60.default.createElement(
-    ChartOfAccountsRow,
-    {
-      key: subAccount.id,
-      account: subAccount,
-      depth: depth + 1
-    }
-  )));
-};
-
-// src/components/ChartOfAccounts/ChartOfAccounts.tsx
-var ChartOfAccounts = () => {
-  const { data, isLoading } = useChartOfAccounts();
-  const [showingForm, setShowingForm] = (0, import_react61.useState)(false);
-  return /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__component Layer__chart-of-accounts" }, !data || isLoading ? "Loading." : /* @__PURE__ */ import_react61.default.createElement(import_react61.default.Fragment, null, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__header" }, /* @__PURE__ */ import_react61.default.createElement("h2", { className: "Layer__chart-of-accounts__title" }, "Chart of Accounts"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__actions" }, /* @__PURE__ */ import_react61.default.createElement("button", { className: "Layer__chart-of-accounts__download-button" }, /* @__PURE__ */ import_react61.default.createElement(DownloadCloud_default, null), "Download"), /* @__PURE__ */ import_react61.default.createElement(
-    "button",
-    {
-      className: "Layer__chart-of-accounts__edit-accounts-button",
-      onClick: () => setShowingForm(!showingForm)
-    },
-    "Edit Accounts"
-  ))), showingForm && /* @__PURE__ */ import_react61.default.createElement(ChartOfAccountsNewForm, null), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Name"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Type"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }, "Sub-Type"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header Layer__chart-of-accounts__table-cell--header-balance" }, "Balance"), /* @__PURE__ */ import_react61.default.createElement("div", { className: "Layer__chart-of-accounts__table-cell Layer__chart-of-accounts__table-cell--header" }), data.accounts.map((account) => /* @__PURE__ */ import_react61.default.createElement(
-    ChartOfAccountsRow,
-    {
-      key: account.id,
-      account,
-      depth: 0
-    }
-  )))));
+  return /* @__PURE__ */ import_react69.default.createElement(import_swr6.SWRConfig, { value: defaultSWRConfig }, /* @__PURE__ */ import_react69.default.createElement(LayerContext.Provider, { value: { ...state, setTheme, getColor } }, children));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BalanceSheet,
   BankTransactions,
-  ChartOfAccounts,
   Hello,
   LayerProvider,
+  LedgerAccounts,
   LinkedAccounts,
   ProfitAndLoss,
   ProfitAndLossView