@layerfi/components 0.1.47 → 0.1.49

package/dist/esm/index.js

@@ -793,12 +793,12 @@ var useBankTransactions = (params) => {
     }
     if (!prevData?.meta?.pagination?.cursor) {
       return [
-        businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}`,
+        businessId && auth?.access_token && `bank-transactions-${businessId}`,
         void 0
       ];
     }
     return [
-      businessId && auth?.access_token && `bank-transactions${filters?.categorizationStatus ? `-scope-${filters?.categorizationStatus}` : ""}-${businessId}-${prevData.meta.pagination.cursor}`,
+      businessId && auth?.access_token && `bank-transactions-${businessId}-${prevData.meta.pagination.cursor}`,
       prevData.meta.pagination.cursor
     ];
   };
@@ -817,8 +817,7 @@ var useBankTransactions = (params) => {
         return Layer.getBankTransactions(apiUrl, auth?.access_token, {
           params: {
             businessId,
-            cursor: nextCursor,
-            categorized: filters?.categorizationStatus ? filters?.categorizationStatus === "categorized" /* categorized */ ? "true" : "false" : ""
+            cursor: nextCursor
           }
         }).call(false);
       }
@@ -987,13 +986,6 @@ var useBankTransactions = (params) => {
     mutate(updatedData, { revalidate: false });
   };
   const removeAfterCategorize = (bankTransaction) => {
-    const updatedData = rawResponseData?.map((page) => {
-      return {
-        ...page,
-        data: page.data?.filter((bt) => bt.id !== bankTransaction.id)
-      };
-    });
-    mutate(updatedData, { revalidate: false });
   };
   const refetch = () => {
     mutate();
@@ -8377,7 +8369,7 @@ var DataStates = ({
 import { endOfMonth as endOfMonth3, parseISO as parseISO12, startOfMonth as startOfMonth4 } from "date-fns";
 var COMPONENT_NAME2 = "bank-transactions";
 var TEST_EMPTY_STATE = false;
-var POLL_INTERVAL = 1e4;
+var POLL_INTERVAL = 1e3;
 var categorizationEnabled = (mode) => {
   if (mode === "bookkeeping-client") {
     return false;
@@ -8723,10 +8715,10 @@ var Quickbooks = () => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-import React125, { createContext as createContext6 } from "react";
+import React130, { createContext as createContext7 } from "react";
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { useMemo as useMemo7, useState as useState27 } from "react";
+import { useMemo as useMemo8, useState as useState28 } from "react";
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -8781,17 +8773,175 @@ var applyShare = (items, total) => {
   });
 };
 
-// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
-import { useEffect as useEffect21 } from "react";
-import { startOfMonth as startOfMonth5, endOfMonth as endOfMonth4, formatISO } from "date-fns";
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
+import { useEffect as useEffect21, useMemo as useMemo7, useState as useState27 } from "react";
+import { startOfMonth as startOfMonth5, sub } from "date-fns";
 import useSWR3 from "swr";
+var buildDates = ({ currentDate }) => {
+  return {
+    startYear: startOfMonth5(currentDate).getFullYear() - 1,
+    startMonth: startOfMonth5(currentDate).getMonth() + 1,
+    endYear: startOfMonth5(currentDate).getFullYear(),
+    endMonth: startOfMonth5(currentDate).getMonth() + 1
+  };
+};
+var buildMonthsArray = (startDate, endDate) => {
+  if (startDate >= endDate) {
+    return [];
+  }
+  var dates = [];
+  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
+    dates.push(new Date(d));
+  }
+  return dates;
+};
+var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
+  currentDate: startOfMonth5(Date.now())
+}) => {
+  const {
+    businessId,
+    auth,
+    apiUrl,
+    syncTimestamps,
+    read,
+    readTimestamps,
+    hasBeenTouched
+  } = useLayerContext();
+  const [date, setDate] = useState27(currentDate);
+  const [loaded, setLoaded] = useState27("initial");
+  const [data, setData] = useState27([]);
+  const { startYear, startMonth, endYear, endMonth } = useMemo7(() => {
+    return buildDates({ currentDate: date });
+  }, [date, businessId, tagFilter, reportingBasis]);
+  const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && auth?.access_token && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter?.key}-${tagFilter?.values?.join(
+    ","
+  )}-${reportingBasis}`;
+  const {
+    data: rawData,
+    isLoading,
+    isValidating,
+    error,
+    mutate
+  } = useSWR3(
+    queryKey,
+    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
+      params: {
+        businessId,
+        startYear: startYear.toString(),
+        startMonth: startMonth.toString(),
+        endYear: endYear.toString(),
+        endMonth: endMonth.toString(),
+        tagKey: tagFilter?.key,
+        tagValues: tagFilter?.values?.join(","),
+        reportingBasis
+      }
+    })
+  );
+  useEffect21(() => {
+    const newData = data.slice();
+    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
+    if (newData && newPeriod) {
+      newPeriod.forEach((x) => {
+        if (!newData?.find(
+          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
+        )) {
+          newData.push({
+            year: x.getFullYear(),
+            month: x.getMonth() + 1,
+            income: 0,
+            costOfGoodsSold: 0,
+            grossProfit: 0,
+            operatingExpenses: 0,
+            profitBeforeTaxes: 0,
+            taxes: 0,
+            netProfit: 0,
+            fullyCategorized: false,
+            totalExpenses: 0,
+            uncategorizedInflows: 0,
+            uncategorizedOutflows: 0,
+            uncategorized_transactions: 0,
+            isLoading: true
+          });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [startYear, startMonth]);
+  useEffect21(() => {
+    const newData = rawData?.data?.months?.slice();
+    if (data && newData) {
+      data.forEach((x) => {
+        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
+          newData.push({ ...x });
+        }
+      });
+    }
+    if (newData) {
+      setData(
+        newData.sort(
+          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
+        )
+      );
+    }
+  }, [rawData]);
+  useEffect21(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && rawData) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  const pullData = (date2) => setDate(date2);
+  useEffect21(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
+    }
+  }, [isLoading, isValidating]);
+  useEffect21(() => {
+    if (queryKey && hasBeenTouched(queryKey)) {
+      mutate();
+    }
+  }, [
+    syncTimestamps,
+    startYear,
+    startMonth,
+    endYear,
+    endMonth,
+    tagFilter,
+    reportingBasis
+  ]);
+  const refetch = () => {
+    mutate();
+  };
+  return {
+    data,
+    isLoading,
+    loaded,
+    error,
+    pullData,
+    refetch
+  };
+};
+
+// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
+import { useEffect as useEffect22 } from "react";
+import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth4, formatISO } from "date-fns";
+import useSWR4 from "swr";
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth5(/* @__PURE__ */ new Date()),
+  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
   endDate: endOfMonth4(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
@@ -8804,7 +8954,7 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = useSWR3(
+  } = useSWR4(
     queryKey,
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
@@ -8820,12 +8970,12 @@ var useProfitAndLossQuery = ({
   const refetch = () => {
     mutate();
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect21(() => {
+  useEffect22(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -8842,33 +8992,36 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-import { startOfMonth as startOfMonth6, endOfMonth as endOfMonth5 } from "date-fns";
+import { startOfMonth as startOfMonth7, endOfMonth as endOfMonth5 } from "date-fns";
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: startOfMonth6(/* @__PURE__ */ new Date()),
+  startDate: startOfMonth7(/* @__PURE__ */ new Date()),
   endDate: endOfMonth5(/* @__PURE__ */ new Date())
 }) => {
-  const [startDate, setStartDate] = useState27(
-    initialStartDate || startOfMonth6(Date.now())
+  const [startDate, setStartDate] = useState28(
+    initialStartDate || startOfMonth7(Date.now())
   );
-  const [endDate, setEndDate] = useState27(
+  const [endDate, setEndDate] = useState28(
     initialEndDate || endOfMonth5(Date.now())
   );
-  const [filters, setFilters] = useState27({
+  const [filters, setFilters] = useState28({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = useState27(void 0);
+  const [sidebarScope, setSidebarScope] = useState28(void 0);
   const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
     startDate,
     endDate,
     tagFilter,
     reportingBasis
   });
+  const { data: summaryData } = useProfitAndLossLTM({
+    currentDate: startDate ? startDate : startOfMonth7(/* @__PURE__ */ new Date())
+  });
   const changeDateRange = ({
     startDate: newStartDate,
     endDate: newEndDate
@@ -8895,7 +9048,7 @@ var useProfitAndLoss = ({
       }
     });
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = useMemo7(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = useMemo8(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
     }
@@ -8909,6 +9062,19 @@ var useProfitAndLoss = ({
       }
       return x;
     });
+    const month = startDate.getMonth() + 1;
+    const year = startDate.getFullYear();
+    const found = summaryData.find((x) => x.month === month && x.year === year);
+    if (found && (found.uncategorizedInflows ?? 0) > 0) {
+      filtered.push({
+        name: "uncategorized",
+        display_name: "Uncategorized",
+        value: found.uncategorizedInflows,
+        type: "Uncategorized",
+        share: 0,
+        hidden: false
+      });
+    }
     const sorted = filtered.sort((a, b) => {
       switch (filters["revenue"]?.sortBy) {
         case "category":
@@ -8931,8 +9097,8 @@ var useProfitAndLoss = ({
     const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
     const withShare = applyShare(sorted, total);
     return { filteredDataRevenue: withShare, filteredTotalRevenue: total };
-  }, [data, startDate, filters, sidebarScope]);
-  const { filteredDataExpenses, filteredTotalExpenses } = useMemo7(() => {
+  }, [data, startDate, filters, sidebarScope, summaryData]);
+  const { filteredDataExpenses, filteredTotalExpenses } = useMemo8(() => {
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
@@ -8946,6 +9112,19 @@ var useProfitAndLoss = ({
       }
       return x;
     });
+    const month = startDate.getMonth() + 1;
+    const year = startDate.getFullYear();
+    const found = summaryData.find((x) => x.month === month && x.year === year);
+    if (found && (found.uncategorizedOutflows ?? 0) > 0) {
+      filtered.push({
+        name: "uncategorized",
+        display_name: "Uncategorized",
+        value: found.uncategorizedOutflows,
+        type: "Uncategorized",
+        share: 0,
+        hidden: false
+      });
+    }
     const sorted = filtered.sort((a, b) => {
       switch (filters["expenses"]?.sortBy) {
         case "category":
@@ -8968,7 +9147,7 @@ var useProfitAndLoss = ({
     const total = sorted.filter((x) => !x.hidden).reduce((x, { value }) => x + value, 0);
     const withShare = applyShare(sorted, total);
     return { filteredDataExpenses: withShare, filteredTotalExpenses: total };
-  }, [data, startDate, filters, sidebarScope]);
+  }, [data, startDate, filters, sidebarScope, summaryData]);
   return {
     data,
     filteredDataRevenue,
@@ -8992,201 +9171,43 @@ var useProfitAndLoss = ({
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
 import React112, { useContext as useContext12, useEffect as useEffect24, useMemo as useMemo9, useState as useState30 } from "react";
 
-// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-import { useEffect as useEffect22, useMemo as useMemo8, useState as useState28 } from "react";
-import { startOfMonth as startOfMonth7, sub } from "date-fns";
-import useSWR4 from "swr";
-var buildDates = ({ currentDate }) => {
-  return {
-    startYear: startOfMonth7(currentDate).getFullYear() - 1,
-    startMonth: startOfMonth7(currentDate).getMonth() + 1,
-    endYear: startOfMonth7(currentDate).getFullYear(),
-    endMonth: startOfMonth7(currentDate).getMonth() + 1
-  };
-};
-var buildMonthsArray = (startDate, endDate) => {
-  if (startDate >= endDate) {
-    return [];
-  }
-  var dates = [];
-  for (var d = startDate; d <= endDate; d.setMonth(d.getMonth() + 1)) {
-    dates.push(new Date(d));
-  }
-  return dates;
-};
-var useProfitAndLossLTM = ({ currentDate, tagFilter, reportingBasis } = {
-  currentDate: startOfMonth7(Date.now())
+// src/components/ProfitAndLossChart/Indicator.tsx
+import React111, { useEffect as useEffect23, useState as useState29 } from "react";
+var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
+var Indicator = ({
+  className,
+  animateFrom,
+  setAnimateFrom,
+  customCursorSize,
+  setCustomCursorSize,
+  viewBox = {}
 }) => {
-  const {
-    businessId,
-    auth,
-    apiUrl,
-    syncTimestamps,
-    read,
-    readTimestamps,
-    hasBeenTouched
-  } = useLayerContext();
-  const [date, setDate] = useState28(currentDate);
-  const [loaded, setLoaded] = useState28("initial");
-  const [data, setData] = useState28([]);
-  const { startYear, startMonth, endYear, endMonth } = useMemo8(() => {
-    return buildDates({ currentDate: date });
-  }, [date, businessId, tagFilter, reportingBasis]);
-  const queryKey = businessId && Boolean(startYear) && Boolean(startMonth) && Boolean(endYear) && Boolean(endMonth) && auth?.access_token && `profit-and-loss-summaries-${businessId}-${startYear.toString()}-${startMonth.toString()}-${tagFilter?.key}-${tagFilter?.values?.join(
-    ","
-  )}-${reportingBasis}`;
-  const {
-    data: rawData,
-    isLoading,
-    isValidating,
-    error,
-    mutate
-  } = useSWR4(
-    queryKey,
-    Layer.getProfitAndLossSummaries(apiUrl, auth?.access_token, {
-      params: {
-        businessId,
-        startYear: startYear.toString(),
-        startMonth: startMonth.toString(),
-        endYear: endYear.toString(),
-        endMonth: endMonth.toString(),
-        tagKey: tagFilter?.key,
-        tagValues: tagFilter?.values?.join(","),
-        reportingBasis
-      }
-    })
-  );
-  useEffect22(() => {
-    const newData = data.slice();
-    const newPeriod = buildMonthsArray(sub(date, { years: 1 }), date);
-    if (newData && newPeriod) {
-      newPeriod.forEach((x) => {
-        if (!newData?.find(
-          (n) => x.getMonth() + 1 === n.month && x.getFullYear() === n.year
-        )) {
-          newData.push({
-            year: x.getFullYear(),
-            month: x.getMonth() + 1,
-            income: 0,
-            costOfGoodsSold: 0,
-            grossProfit: 0,
-            operatingExpenses: 0,
-            profitBeforeTaxes: 0,
-            taxes: 0,
-            netProfit: 0,
-            fullyCategorized: false,
-            totalExpenses: 0,
-            uncategorizedInflows: 0,
-            uncategorizedOutflows: 0,
-            uncategorized_transactions: 0,
-            isLoading: true
-          });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [startYear, startMonth]);
-  useEffect22(() => {
-    const newData = rawData?.data?.months?.slice();
-    if (data && newData) {
-      data.forEach((x) => {
-        if (!newData?.find((n) => x.month === n.month && x.year === n.year)) {
-          newData.push({ ...x });
-        }
-      });
-    }
-    if (newData) {
-      setData(
-        newData.sort(
-          (a, b) => Number(new Date(a.year, a.month, 1)) - Number(new Date(b.year, b.month, 1))
-        )
-      );
-    }
-  }, [rawData]);
-  useEffect22(() => {
-    if (isLoading && loaded === "initial") {
-      setLoaded("loading");
-      return;
-    }
-    if (!isLoading && rawData) {
-      setLoaded("complete");
-    }
-  }, [data, isLoading]);
-  const pullData = (date2) => setDate(date2);
-  useEffect22(() => {
-    if (queryKey && (isLoading || isValidating)) {
-      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
-    }
-  }, [isLoading, isValidating]);
-  useEffect22(() => {
-    if (queryKey && hasBeenTouched(queryKey)) {
-      mutate();
-    }
-  }, [
-    syncTimestamps,
-    startYear,
-    startMonth,
-    endYear,
-    endMonth,
-    tagFilter,
-    reportingBasis
-  ]);
-  const refetch = () => {
-    mutate();
-  };
-  return {
-    data,
-    isLoading,
-    loaded,
-    error,
-    pullData,
-    refetch
-  };
-};
-
-// src/components/ProfitAndLossChart/Indicator.tsx
-import React111, { useEffect as useEffect23, useState as useState29 } from "react";
-var emptyViewBox = { x: 0, y: 0, width: 0, height: 0 };
-var Indicator = ({
-  className,
-  animateFrom,
-  setAnimateFrom,
-  customCursorSize,
-  setCustomCursorSize,
-  viewBox = {}
-}) => {
-  if (!className?.match(/selected/)) {
-    return null;
-  }
-  const [opacityIndicator, setOpacityIndicator] = useState29(0);
-  const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
-  const margin = width > 12 ? 12 : 6;
-  const boxWidth = width + margin;
-  const xOffset = boxWidth / 2;
-  const borderRadius = 6;
-  const rectWidth = `${boxWidth}px`;
-  const rectHeight = "calc(100% - 38px)";
-  useEffect23(() => {
-    if (Math.abs(animateTo - animateFrom) < 30) {
-      setOpacityIndicator(0);
-    }
-    setAnimateFrom(animateTo);
-    setTimeout(() => {
-      setOpacityIndicator(1);
-    }, 200);
-  }, [animateTo]);
-  const rectRef = (ref) => {
-    if (ref) {
-      const refRectWidth = ref.getBoundingClientRect().width;
-      const refRectHeight = ref.getBoundingClientRect().height;
-      if (customCursorSize.width !== refRectWidth || customCursorSize.height !== refRectHeight) {
-        setCustomCursorSize(refRectWidth, refRectHeight, actualX - xOffset);
+  if (!className?.match(/selected/)) {
+    return null;
+  }
+  const [opacityIndicator, setOpacityIndicator] = useState29(0);
+  const { x: animateTo = 0, width = 0 } = "x" in viewBox ? viewBox : emptyViewBox;
+  const margin = width > 12 ? 12 : 6;
+  const boxWidth = width + margin;
+  const xOffset = boxWidth / 2;
+  const borderRadius = 6;
+  const rectWidth = `${boxWidth}px`;
+  const rectHeight = "calc(100% - 38px)";
+  useEffect23(() => {
+    if (Math.abs(animateTo - animateFrom) < 30) {
+      setOpacityIndicator(0);
+    }
+    setAnimateFrom(animateTo);
+    setTimeout(() => {
+      setOpacityIndicator(1);
+    }, 200);
+  }, [animateTo]);
+  const rectRef = (ref) => {
+    if (ref) {
+      const refRectWidth = ref.getBoundingClientRect().width;
+      const refRectHeight = ref.getBoundingClientRect().height;
+      if (customCursorSize.width !== refRectWidth || customCursorSize.height !== refRectHeight) {
+        setCustomCursorSize(refRectWidth, refRectHeight, actualX - xOffset);
       }
     }
   };
@@ -10148,6 +10169,12 @@ var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
   let colorIndex = 0;
   return data.map((obj) => {
     const type = obj.type;
+    if (type === "Uncategorized") {
+      return {
+        color: "#EEEEF0",
+        opacity: 1
+      };
+    }
     if (!typeToColor[type]) {
       typeToColor[type] = colorList[colorIndex % colorList.length];
       colorIndex++;
@@ -10162,6 +10189,57 @@ var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
     };
   });
 };
+var ValueIcon = ({
+  item,
+  typeColorMapping,
+  idx
+}) => {
+  if (item.type === "Uncategorized") {
+    return /* @__PURE__ */ React116.createElement(
+      "svg",
+      {
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12"
+      },
+      /* @__PURE__ */ React116.createElement("defs", null, /* @__PURE__ */ React116.createElement(
+        "pattern",
+        {
+          id: "layer-pie-dots-pattern-legend",
+          x: "0",
+          y: "0",
+          width: "3",
+          height: "3",
+          patternUnits: "userSpaceOnUse"
+        },
+        /* @__PURE__ */ React116.createElement("rect", { width: "1", height: "1", opacity: 0.76 })
+      )),
+      /* @__PURE__ */ React116.createElement("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2" }),
+      /* @__PURE__ */ React116.createElement(
+        "rect",
+        {
+          x: "1",
+          y: "1",
+          width: "10",
+          height: "10",
+          fill: "url(#layer-pie-dots-pattern-legend)"
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ React116.createElement(
+    "div",
+    {
+      className: "share-icon",
+      style: {
+        background: typeColorMapping[idx].color,
+        opacity: typeColorMapping[idx].opacity
+      }
+    }
+  );
+};
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -10223,13 +10301,11 @@ var DetailedTable = ({
       /* @__PURE__ */ React116.createElement("td", { className: "type-col" }, item.type),
       /* @__PURE__ */ React116.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
       /* @__PURE__ */ React116.createElement("td", { className: "share-col" }, /* @__PURE__ */ React116.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ React116.createElement(
-        "div",
+        ValueIcon,
         {
-          className: "share-icon",
-          style: {
-            background: typeColorMapping[idx].color,
-            opacity: typeColorMapping[idx].opacity
-          }
+          item,
+          typeColorMapping,
+          idx
         }
       )))
     );
@@ -10237,6 +10313,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+import classNames43 from "classnames";
 import {
   PieChart,
   Pie,
@@ -10277,7 +10354,32 @@ var DetailedChart = ({
   }, [filteredData, isLoading]);
   const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
   const typeColorMapping = mapTypesToColors(chartData, chartColorsList);
-  return /* @__PURE__ */ React117.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React117.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ React117.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React117.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React117.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React117.createElement(PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React117.createElement("div", { className: "chart-field" }, /* @__PURE__ */ React117.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ React117.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ React117.createElement("div", { className: "chart-container" }, /* @__PURE__ */ React117.createElement(ResponsiveContainer2, null, /* @__PURE__ */ React117.createElement(PieChart, null, /* @__PURE__ */ React117.createElement("defs", null, /* @__PURE__ */ React117.createElement(
+    "pattern",
+    {
+      id: "layer-pie-stripe-pattern",
+      x: "0",
+      y: "0",
+      width: "4",
+      height: "4",
+      patternTransform: "rotate(45)",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React117.createElement("rect", { width: "4", height: "4", opacity: 0.16 }),
+    /* @__PURE__ */ React117.createElement("line", { x1: "0", y: "0", x2: "0", y2: "4", strokeWidth: "2" })
+  ), /* @__PURE__ */ React117.createElement(
+    "pattern",
+    {
+      id: "layer-pie-dots-pattern",
+      x: "0",
+      y: "0",
+      width: "3",
+      height: "3",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ React117.createElement("rect", { width: "3", height: "3", opacity: 0.46, className: "bg" }),
+    /* @__PURE__ */ React117.createElement("rect", { width: "1", height: "1", opacity: 0.56 })
+  )), !isLoading && !noValue ? /* @__PURE__ */ React117.createElement(
     Pie,
     {
       data: chartData,
@@ -10303,8 +10405,14 @@ var DetailedChart = ({
         Cell2,
         {
           key: `cell-${index}`,
-          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
-          style: { fill },
+          className: classNames43(
+            "Layer__profit-and-loss-detailed-charts__pie",
+            hoveredItem && active ? "active" : "inactive",
+            entry.type === "Uncategorized" && "Layer__profit-and-loss-detailed-charts__pie--border"
+          ),
+          style: {
+            fill: entry.type === "Uncategorized" && fill ? "url(#layer-pie-dots-pattern)" : fill
+          },
           opacity: typeColorMapping[index].opacity,
           onMouseEnter: () => setHoveredItem(entry.name),
           onMouseLeave: () => setHoveredItem(void 0)
@@ -10660,7 +10768,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-import classNames43 from "classnames";
+import classNames44 from "classnames";
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -10719,7 +10827,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -10741,7 +10849,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -10765,7 +10873,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ React121.createElement(
       "div",
       {
-        className: classNames43(
+        className: classNames44(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -10782,14 +10890,89 @@ var ProfitAndLossSummaries = ({
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import React124, { useContext as useContext16 } from "react";
+import React129, { useContext as useContext17, useEffect as useEffect27 } from "react";
+
+// src/hooks/useTableExpandRow/useTableExpandRow.tsx
+import { useContext as useContext16 } from "react";
+
+// src/contexts/TableContext/TableContext.tsx
+import React122, { createContext as createContext6, useState as useState32 } from "react";
+var defaultValue = {
+  expandedRows: [],
+  setExpandedRows: () => {
+  },
+  expandAllRows: () => {
+  },
+  expandedAllRows: false,
+  setExpandedAllRows: () => {
+  }
+};
+var TableContext = createContext6(defaultValue);
+var TableProvider = ({ children }) => {
+  const [expandedRows, setExpandedRowsState] = useState32([]);
+  const [expandedAllRows, setExpandedAllRows] = useState32(false);
+  const toggleRow = (rowKey) => {
+    setExpandedRowsState((prevRows) => {
+      const rows = [...prevRows];
+      if (rows.includes(rowKey)) {
+        rows.splice(rows.indexOf(rowKey), 1);
+      } else {
+        rows.push(rowKey);
+      }
+      return rows;
+    });
+  };
+  const expandAllRows = (rowKeys) => {
+    setExpandedRowsState(rowKeys);
+  };
+  const contextValue = {
+    expandedRows,
+    setExpandedRows: toggleRow,
+    expandAllRows,
+    expandedAllRows,
+    setExpandedAllRows
+  };
+  return /* @__PURE__ */ React122.createElement(TableContext.Provider, { value: contextValue }, children);
+};
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-import React123, { useState as useState32 } from "react";
+// src/hooks/useTableExpandRow/useTableExpandRow.tsx
+var useTableExpandRow = () => {
+  const {
+    expandedAllRows,
+    setExpandedAllRows,
+    expandAllRows,
+    expandedRows,
+    setExpandedRows
+  } = useContext16(TableContext);
+  const toggleAllRows = () => {
+    if (expandedAllRows) {
+      setIsOpen([]);
+      return setExpandedAllRows(false);
+    } else {
+      return setExpandedAllRows(true);
+    }
+  };
+  const setIsOpen = (rowKey, withoutAllRowsUpdate) => {
+    if (!withoutAllRowsUpdate && expandedAllRows) {
+      setExpandedAllRows(false);
+    }
+    if (Array.isArray(rowKey)) {
+      return expandAllRows(rowKey);
+    }
+    return setExpandedRows(rowKey);
+  };
+  const isOpen = (rowKey) => expandedRows.includes(rowKey);
+  return {
+    isOpen,
+    setIsOpen,
+    expandedAllRows,
+    toggleAllRows
+  };
+};
 
 // src/icons/PieChart.tsx
-import * as React122 from "react";
-var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElement(
+import * as React123 from "react";
+var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React123.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10799,7 +10982,7 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React122.createElement("g", null, /* @__PURE__ */ React122.createElement(
+  /* @__PURE__ */ React123.createElement("g", null, /* @__PURE__ */ React123.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",
@@ -10807,7 +10990,7 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React122.createElement(
+  ), /* @__PURE__ */ React123.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",
@@ -10819,96 +11002,139 @@ var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElem
 );
 var PieChart_default = PieChart3;
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
-var ProfitAndLossRow = ({
-  variant,
-  lineItem,
-  depth = 0,
-  maxDepth = 8,
-  direction = "DEBIT" /* DEBIT */,
-  lockExpanded = false,
-  scope,
-  setSidebarScope,
-  defaultExpanded = false
+// src/components/TableBody/TableBody.tsx
+import React124 from "react";
+var TableBody = ({ children }) => {
+  return /* @__PURE__ */ React124.createElement("tbody", { className: "Layer__table-body" }, children);
+};
+
+// src/components/TableCell/TableCell.tsx
+import React125 from "react";
+import classNames45 from "classnames";
+var TableCell = ({
+  children,
+  isHeaderCell,
+  isCurrency,
+  primary,
+  withExpandIcon = false,
+  fullWidth
 }) => {
-  if (!lineItem) {
-    return null;
-  }
-  const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = useState32(lockExpanded || defaultExpanded);
-  const amount = value ?? 0;
+  const amount = typeof children === "number" ? children : 0;
+  const isPositive = amount >= 0;
   const amountString = centsToDollars(Math.abs(amount));
-  const labelClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__label"
-  ];
-  const valueClasses = [
-    "Layer__profit-and-loss-row",
-    "Layer__profit-and-loss-row__value"
-  ];
-  const positive = amount === 0 || direction === "CREDIT" /* CREDIT */ && amount > 0 || direction === "DEBIT" /* DEBIT */ && amount < 0;
-  valueClasses.push(
-    positive ? "Layer__profit-and-loss-row__value--amount-positive" : "Layer__profit-and-loss-row__value--amount-negative"
-  );
-  labelClasses.push(`Layer__profit-and-loss-row__label--depth-${depth}`);
-  valueClasses.push(`Layer__profit-and-loss-row__value--depth-${depth}`);
-  variant && labelClasses.push(`Layer__profit-and-loss-row__label--variant-${variant}`);
-  variant && valueClasses.push(`Layer__profit-and-loss-row__value--variant-${variant}`);
-  const toggleExpanded = () => setExpanded(!expanded);
-  const canGoDeeper = depth < maxDepth;
-  const hasChildren = (line_items?.length ?? 0) > 0;
-  const displayChildren = hasChildren && canGoDeeper;
-  labelClasses.push(
-    `Layer__profit-and-loss-row__label--display-children-${displayChildren}`
-  );
-  valueClasses.push(
-    `Layer__profit-and-loss-row__value--display-children-${displayChildren}`
-  );
-  displayChildren && expanded && labelClasses.push("Layer__profit-and-loss-row__label--expanded");
-  displayChildren && expanded && valueClasses.push("Layer__profit-and-loss-row__value--expanded");
-  return /* @__PURE__ */ React123.createElement(React123.Fragment, null, /* @__PURE__ */ React123.createElement(
-    "div",
+  const cellClassNames = classNames45(
+    "Layer__table-cell",
+    (primary || isHeaderCell) && "Layer__table-cell--primary",
+    isCurrency && "Layer__table-cell-amount",
+    isCurrency && isPositive && "Layer__table-cell-amount--positive",
+    isCurrency && !isPositive && "Layer__table-cell-amount--negative"
+  );
+  if (isHeaderCell) {
+    return /* @__PURE__ */ React125.createElement("th", { className: cellClassNames }, /* @__PURE__ */ React125.createElement("span", { className: "Layer__table-cell-content" }, children));
+  }
+  return /* @__PURE__ */ React125.createElement(
+    "td",
     {
-      className: labelClasses.join(" "),
-      onClick: () => !lockExpanded && toggleExpanded(),
-      style: {
-        paddingLeft: depth === 0 && !hasChildren ? 28 : 16 * (depth + 1) + 2
-      }
+      className: cellClassNames,
+      style: fullWidth ? { width: "100%" } : void 0
     },
-    /* @__PURE__ */ React123.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ React123.createElement(
+    /* @__PURE__ */ React125.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React125.createElement(
       ChevronDownFill_default,
       {
-        size: 16,
-        className: "Layer__profit-and-loss-row__label__chevron"
+        className: "Layer__table-row--expand-icon",
+        size: 16
       }
-    ) : null, /* @__PURE__ */ React123.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ React123.createElement(
-      "span",
-      {
-        className: "Layer__profit-and-loss-row__detailed-chart-btn",
-        onClick: (e) => {
-          e.stopPropagation();
-          setSidebarScope && setSidebarScope(scope ?? "expenses");
+    ), isCurrency ? amountString : children, " ")
+  );
+};
+
+// src/components/TableHead/TableHead.tsx
+import React126 from "react";
+var TableHead = ({ children }) => {
+  return /* @__PURE__ */ React126.createElement("thead", { className: "Layer__table-header" }, children);
+};
+
+// src/components/TableRow/TableRow.tsx
+import React127 from "react";
+import classNames46 from "classnames";
+var TableRow = ({
+  rowKey,
+  children,
+  depth = 0,
+  expandable = false,
+  isExpanded = false,
+  handleExpand,
+  variant = expandable ? "expandable" : "default",
+  withDivider,
+  withDividerPosition = "top",
+  isHeadRow = false
+}) => {
+  const toggleExpanded = () => {
+    if (variant === "summation" || !expandable)
+      return;
+    handleExpand && handleExpand();
+  };
+  const rowClassNames = classNames46([
+    "Layer__table-row",
+    !isHeadRow && `Layer__table-row--depth-${depth}`,
+    !isHeadRow && `Layer__table-row--variant-${variant}`,
+    !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
+  ]);
+  return /* @__PURE__ */ React127.createElement(React127.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React127.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React127.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React127.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React127.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React127.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+};
+
+// src/components/Table/Table.tsx
+import React128, { useEffect as useEffect26, useRef as useRef15 } from "react";
+import classNames47 from "classnames";
+var Table = ({
+  componentName,
+  children,
+  borderCollapse = "separate",
+  bottomSpacing = true
+}) => {
+  const tableRef = useRef15(null);
+  const prevChildrenRef = useRef15([]);
+  useEffect26(() => {
+    if (tableRef.current) {
+      const tbody = tableRef.current.querySelector("tbody");
+      const rows = tbody ? Array.from(tbody.querySelectorAll("tr")) : [];
+      const prevChildrenArray = prevChildrenRef.current;
+      const currentChildren = rows.map(
+        (child) => child.getAttribute("data-key") && {
+          key: child.getAttribute("data-key"),
+          child
         }
-      },
-      /* @__PURE__ */ React123.createElement(PieChart_default, null)
-    )
-  ), /* @__PURE__ */ React123.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ React123.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ React123.createElement(
-    "div",
-    {
-      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
-    },
-    /* @__PURE__ */ React123.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ React123.createElement(
-      ProfitAndLossRow,
-      {
-        key: line_item.display_name,
-        lineItem: line_item,
-        depth: depth + 1,
-        maxDepth,
-        direction
-      }
-    )))
-  ));
+      );
+      const newChildrenKeys = [];
+      const newChildrenArray = currentChildren.filter((el) => {
+        if (el && el.key) {
+          newChildrenKeys.push(el.key);
+        }
+        return el && el.key && !prevChildrenArray.includes(el.key);
+      });
+      newChildrenArray.forEach((row, index) => {
+        const rowKey = row && row.key;
+        if (rowKey && !row.child.classList.contains("Layer__table-empty-row")) {
+          row.child.classList.add("Layer__table-row--anim-starting-state");
+          setTimeout(() => {
+            row.child.classList.add("Layer__table-row--anim-complete-state");
+            row.child.classList.remove("Layer__table-row--anim-starting-state");
+          }, 15 * index);
+        }
+      });
+      prevChildrenRef.current = newChildrenKeys;
+    }
+  }, [children]);
+  const tableWrapperClassNames = classNames47(
+    "Layer__table-wrapper",
+    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
+  );
+  const tableClassNames = classNames47(
+    "Layer__table",
+    componentName && `Layer__${componentName}__table`,
+    borderCollapse && `Layer__table__${borderCollapse}-rows`
+  );
+  return /* @__PURE__ */ React128.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React128.createElement("table", { className: tableClassNames, ref: tableRef }, children));
 };
 
 // src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
@@ -10960,145 +11186,135 @@ var empty_profit_and_loss_report_default = {
 };
 
 // src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-import classNames44 from "classnames";
-var ProfitAndLossTable = ({
-  lockExpanded,
-  asContainer,
-  stringOverrides
-}) => {
+import classNames48 from "classnames";
+var ProfitAndLossTable = ({ asContainer, stringOverrides }) => {
   const {
     data: actualData,
     isLoading,
     setSidebarScope
-  } = useContext16(ProfitAndLoss.Context);
+  } = useContext17(ProfitAndLoss.Context);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  useEffect27(() => {
+    setIsOpen(["income", "cost_of_goods_sold", "expenses"]);
+  }, []);
   const currentData = Array.isArray(actualData) ? actualData[actualData.length - 1] : actualData;
   const data = !currentData || isLoading ? empty_profit_and_loss_report_default : currentData;
   if (isLoading || actualData === void 0) {
-    return /* @__PURE__ */ React124.createElement(
+    return /* @__PURE__ */ React129.createElement(
       "div",
       {
-        className: classNames44(
+        className: classNames48(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
       },
-      /* @__PURE__ */ React124.createElement(Loader2, null)
+      /* @__PURE__ */ React129.createElement(Loader2, null)
     );
   }
-  return /* @__PURE__ */ React124.createElement(React124.Fragment, null, /* @__PURE__ */ React124.createElement(
-    "div",
-    {
-      className: classNames44(
-        "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
-        asContainer && "Layer__component-container"
-      )
-    },
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.income,
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.cost_of_goods_sold,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: {
-          value: data.gross_profit,
-          display_name: stringOverrides?.grossProfitLabel || "Gross Profit"
-        },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.expenses,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: {
-          value: data.profit_before_taxes,
-          display_name: stringOverrides?.profitBeforeTaxesLabel || "Profit Before Taxes"
-        },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.taxes,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ React124.createElement(
-      ProfitAndLossRow,
+  const renderLineItem = (lineItem, depth, rowKey, rowIndex, scope, setSidebarScope2, variant) => {
+    const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
+    const expanded = expandable ? isOpen(rowKey) : true;
+    return /* @__PURE__ */ React129.createElement(React129.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React129.createElement(
+      TableRow,
       {
-        lineItem: {
-          value: data.net_profit,
-          display_name: stringOverrides?.netProfitLabel || "Net Profit"
+        rowKey: rowKey + "-" + rowIndex,
+        expandable,
+        isExpanded: expanded,
+        depth,
+        variant: variant ? variant : expandable ? "expandable" : "default",
+        handleExpand: () => setIsOpen(rowKey)
+      },
+      /* @__PURE__ */ React129.createElement(
+        TableCell,
+        {
+          primary: true,
+          withExpandIcon: expandable,
+          fullWidth: !!setSidebarScope2
         },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded
-      }
-    )
-  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React124.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ React124.createElement(
-    ProfitAndLossRow,
+        lineItem.display_name,
+        " ",
+        setSidebarScope2 && /* @__PURE__ */ React129.createElement(
+          "span",
+          {
+            className: "Layer__profit-and-loss-row__detailed-chart-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              setSidebarScope2 && setSidebarScope2(scope ?? "expenses");
+            }
+          },
+          /* @__PURE__ */ React129.createElement(PieChart_default, null)
+        )
+      ),
+      /* @__PURE__ */ React129.createElement(TableCell, { isCurrency: true, primary: true }, lineItem.value)
+    ), expanded && lineItem.line_items ? lineItem.line_items.map(
+      (child, i) => renderLineItem(
+        child,
+        depth + 1,
+        child.display_name + "-" + rowIndex,
+        i
+      )
+    ) : null);
+  };
+  return /* @__PURE__ */ React129.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ React129.createElement(TableBody, null, renderLineItem(
+    data.income,
+    0,
+    "income",
+    0,
+    "revenue",
+    setSidebarScope
+  ), renderLineItem(
+    data.cost_of_goods_sold,
+    0,
+    "cost_of_goods_sold",
+    1,
+    "expenses",
+    setSidebarScope
+  ), renderLineItem(
     {
-      lineItem: data.other_outflows,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  ), /* @__PURE__ */ React124.createElement(
-    ProfitAndLossRow,
+      value: data.gross_profit,
+      display_name: stringOverrides?.grossProfitLabel || "Gross Profit"
+    },
+    0,
+    "gross_profit",
+    2,
+    "revenue",
+    setSidebarScope,
+    "summation"
+  ), renderLineItem(
+    data.expenses,
+    0,
+    "expenses",
+    3,
+    "expenses",
+    setSidebarScope
+  ), renderLineItem(
     {
-      lineItem: data.personal_expenses,
-      direction: "DEBIT" /* DEBIT */,
-      lockExpanded
-    }
-  )) : null);
+      value: data.profit_before_taxes,
+      display_name: stringOverrides?.profitBeforeTaxesLabel || "Profit Before Taxes"
+    },
+    0,
+    "profit_before_taxes",
+    4,
+    "revenue",
+    setSidebarScope,
+    "summation"
+  ), renderLineItem(data.taxes, 0, "taxes", 5, "expenses", setSidebarScope), renderLineItem(
+    {
+      value: data.net_profit,
+      display_name: stringOverrides?.netProfitLabel || "Net Profit"
+    },
+    0,
+    "net_profit",
+    5,
+    void 0,
+    void 0,
+    "summation"
+  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ React129.createElement(React129.Fragment, null, renderLineItem(data.other_outflows, 0, "other_outflows", 6), renderLineItem(data.personal_expenses, 0, "personal_expenses", 7)) : null));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 import { endOfMonth as endOfMonth8, startOfMonth as startOfMonth10 } from "date-fns";
-var PNLContext = createContext6({
+var PNLContext = createContext7({
   data: void 0,
   filteredDataRevenue: [],
   filteredTotalRevenue: void 0,
@@ -11134,7 +11350,7 @@ var ProfitAndLoss = ({
   asContainer = true
 }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ React125.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ React125.createElement(Container, { name: "profit-and-loss" }, children) : children);
+  return /* @__PURE__ */ React130.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ React130.createElement(Container, { name: "profit-and-loss" }, children) : children);
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
@@ -11144,11 +11360,11 @@ ProfitAndLoss.Table = ProfitAndLossTable;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 
 // src/components/BalanceSheet/BalanceSheet.tsx
-import React138, { useEffect as useEffect30, useState as useState35 } from "react";
+import React137, { useEffect as useEffect31, useState as useState34 } from "react";
 
 // src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
-import { createContext as createContext7 } from "react";
-var BalanceSheetContext = createContext7({
+import { createContext as createContext8 } from "react";
+var BalanceSheetContext = createContext8({
   data: void 0,
   isLoading: false,
   error: void 0,
@@ -11156,48 +11372,8 @@ var BalanceSheetContext = createContext7({
   }
 });
 
-// src/contexts/TableContext/TableContext.tsx
-import React126, { createContext as createContext8, useState as useState33 } from "react";
-var defaultValue = {
-  expandedRows: [],
-  setExpandedRows: () => {
-  },
-  expandAllRows: () => {
-  },
-  expandedAllRows: false,
-  setExpandedAllRows: () => {
-  }
-};
-var TableContext = createContext8(defaultValue);
-var TableProvider = ({ children }) => {
-  const [expandedRows, setExpandedRowsState] = useState33([]);
-  const [expandedAllRows, setExpandedAllRows] = useState33(false);
-  const toggleRow = (rowKey) => {
-    setExpandedRowsState((prevRows) => {
-      const rows = [...prevRows];
-      if (rows.includes(rowKey)) {
-        rows.splice(rows.indexOf(rowKey), 1);
-      } else {
-        rows.push(rowKey);
-      }
-      return rows;
-    });
-  };
-  const expandAllRows = (rowKeys) => {
-    setExpandedRowsState(rowKeys);
-  };
-  const contextValue = {
-    expandedRows,
-    setExpandedRows: toggleRow,
-    expandAllRows,
-    expandedAllRows,
-    setExpandedAllRows
-  };
-  return /* @__PURE__ */ React126.createElement(TableContext.Provider, { value: contextValue }, children);
-};
-
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
-import { useEffect as useEffect26 } from "react";
+import { useEffect as useEffect28 } from "react";
 import { format as format3, startOfDay } from "date-fns";
 import useSWR5 from "swr";
 var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
@@ -11216,12 +11392,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const refetch = () => {
     mutate();
   };
-  useEffect26(() => {
+  useEffect28(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("BALANCE_SHEET" /* BALANCE_SHEET */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect26(() => {
+  useEffect28(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -11230,12 +11406,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
 };
 
 // src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
-import React127 from "react";
+import React131 from "react";
 var BalanceSheetDatePicker = ({
   effectiveDate,
   setEffectiveDate
 }) => {
-  return /* @__PURE__ */ React127.createElement(React127.Fragment, null, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React131.createElement(React131.Fragment, null, /* @__PURE__ */ React131.createElement(
     DatePicker,
     {
       selected: effectiveDate,
@@ -11246,181 +11422,14 @@ var BalanceSheetDatePicker = ({
 };
 
 // src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
-import React128 from "react";
-
-// src/hooks/useTableExpandRow/useTableExpandRow.tsx
-import { useContext as useContext17 } from "react";
-var useTableExpandRow = () => {
-  const {
-    expandedAllRows,
-    setExpandedAllRows,
-    expandAllRows,
-    expandedRows,
-    setExpandedRows
-  } = useContext17(TableContext);
-  const toggleAllRows = () => {
-    if (expandedAllRows) {
-      setIsOpen([]);
-      return setExpandedAllRows(false);
-    } else {
-      return setExpandedAllRows(true);
-    }
-  };
-  const setIsOpen = (rowKey, withoutAllRowsUpdate) => {
-    if (!withoutAllRowsUpdate && expandedAllRows) {
-      setExpandedAllRows(false);
-    }
-    if (Array.isArray(rowKey)) {
-      return expandAllRows(rowKey);
-    }
-    return setExpandedRows(rowKey);
-  };
-  const isOpen = (rowKey) => expandedRows.includes(rowKey);
-  return {
-    isOpen,
-    setIsOpen,
-    expandedAllRows,
-    toggleAllRows
-  };
-};
-
-// src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
+import React132 from "react";
 var BalanceSheetExpandAllButton = () => {
   const { expandedAllRows, toggleAllRows } = useTableExpandRow();
-  return /* @__PURE__ */ React128.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
-};
-
-// src/components/BalanceSheetTable/BalanceSheetTable.tsx
-import React134, { useEffect as useEffect28 } from "react";
-
-// src/components/TableBody/TableBody.tsx
-import React129 from "react";
-var TableBody = ({ children }) => {
-  return /* @__PURE__ */ React129.createElement("tbody", { className: "Layer__table-body" }, children);
-};
-
-// src/components/TableCell/TableCell.tsx
-import React130 from "react";
-import classNames45 from "classnames";
-var TableCell = ({
-  children,
-  isHeaderCell,
-  isCurrency,
-  primary,
-  withExpandIcon = false
-}) => {
-  const amount = typeof children === "number" ? children : 0;
-  const isPositive = amount >= 0;
-  const amountString = centsToDollars(Math.abs(amount));
-  const cellClassNames = classNames45(
-    "Layer__table-cell",
-    (primary || isHeaderCell) && "Layer__table-cell--primary",
-    isCurrency && "Layer__table-cell-amount",
-    isCurrency && isPositive && "Layer__table-cell-amount--positive",
-    isCurrency && !isPositive && "Layer__table-cell-amount--negative"
-  );
-  if (isHeaderCell) {
-    return /* @__PURE__ */ React130.createElement("th", { className: cellClassNames }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, children));
-  }
-  return /* @__PURE__ */ React130.createElement("td", { className: cellClassNames }, /* @__PURE__ */ React130.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ React130.createElement(
-    ChevronDownFill_default,
-    {
-      className: "Layer__table-row--expand-icon",
-      size: 16
-    }
-  ), isCurrency ? amountString : children, " "));
-};
-
-// src/components/TableHead/TableHead.tsx
-import React131 from "react";
-var TableHead = ({ children }) => {
-  return /* @__PURE__ */ React131.createElement("thead", { className: "Layer__table-header" }, children);
-};
-
-// src/components/TableRow/TableRow.tsx
-import React132 from "react";
-import classNames46 from "classnames";
-var TableRow = ({
-  rowKey,
-  children,
-  depth = 0,
-  expandable = false,
-  isExpanded = false,
-  handleExpand,
-  variant = expandable ? "expandable" : "default",
-  withDivider,
-  withDividerPosition = "top",
-  isHeadRow = false
-}) => {
-  const toggleExpanded = () => {
-    if (variant === "summation" || !expandable)
-      return;
-    handleExpand && handleExpand();
-  };
-  const rowClassNames = classNames46([
-    "Layer__table-row",
-    !isHeadRow && `Layer__table-row--depth-${depth}`,
-    !isHeadRow && `Layer__table-row--variant-${variant}`,
-    !isHeadRow && expandable && (isExpanded ? "Layer__table-row--expanded" : "Layer__table-row--collapsed")
-  ]);
-  return /* @__PURE__ */ React132.createElement(React132.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ React132.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React132.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ React132.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ React132.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ React132.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
-};
-
-// src/components/Table/Table.tsx
-import React133, { useEffect as useEffect27, useRef as useRef15 } from "react";
-import classNames47 from "classnames";
-var Table = ({
-  componentName,
-  children,
-  borderCollapse = "separate",
-  bottomSpacing = true
-}) => {
-  const tableRef = useRef15(null);
-  const prevChildrenRef = useRef15([]);
-  useEffect27(() => {
-    if (tableRef.current) {
-      const tbody = tableRef.current.querySelector("tbody");
-      const rows = tbody ? Array.from(tbody.querySelectorAll("tr")) : [];
-      const prevChildrenArray = prevChildrenRef.current;
-      const currentChildren = rows.map(
-        (child) => child.getAttribute("data-key") && {
-          key: child.getAttribute("data-key"),
-          child
-        }
-      );
-      const newChildrenKeys = [];
-      const newChildrenArray = currentChildren.filter((el) => {
-        if (el && el.key) {
-          newChildrenKeys.push(el.key);
-        }
-        return el && el.key && !prevChildrenArray.includes(el.key);
-      });
-      newChildrenArray.forEach((row, index) => {
-        const rowKey = row && row.key;
-        if (rowKey && !row.child.classList.contains("Layer__table-empty-row")) {
-          row.child.classList.add("Layer__table-row--anim-starting-state");
-          setTimeout(() => {
-            row.child.classList.add("Layer__table-row--anim-complete-state");
-            row.child.classList.remove("Layer__table-row--anim-starting-state");
-          }, 15 * index);
-        }
-      });
-      prevChildrenRef.current = newChildrenKeys;
-    }
-  }, [children]);
-  const tableWrapperClassNames = classNames47(
-    "Layer__table-wrapper",
-    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
-  );
-  const tableClassNames = classNames47(
-    "Layer__table",
-    componentName && `Layer__${componentName}__table`,
-    borderCollapse && `Layer__table__${borderCollapse}-rows`
-  );
-  return /* @__PURE__ */ React133.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ React133.createElement("table", { className: tableClassNames, ref: tableRef }, children));
+  return /* @__PURE__ */ React132.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
+import React133, { useEffect as useEffect29 } from "react";
 var BalanceSheetTable = ({
   data,
   config,
@@ -11428,12 +11437,12 @@ var BalanceSheetTable = ({
 }) => {
   const { isOpen, setIsOpen, expandedAllRows } = useTableExpandRow();
   const allRowKeys = [];
-  useEffect28(() => {
+  useEffect29(() => {
     if (expandedAllRows) {
       setIsOpen(allRowKeys, true);
     }
   }, [expandedAllRows]);
-  useEffect28(() => {
+  useEffect29(() => {
     setIsOpen(["assets"]);
   }, []);
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
@@ -11443,7 +11452,7 @@ var BalanceSheetTable = ({
     if (expandable) {
       allRowKeys.push(rowKey);
     }
-    return /* @__PURE__ */ React134.createElement(React134.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React134.createElement(
+    return /* @__PURE__ */ React133.createElement(React133.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React133.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex,
@@ -11453,8 +11462,8 @@ var BalanceSheetTable = ({
         depth,
         withDivider: depth === 0 && rowIndex > 0
       },
-      /* @__PURE__ */ React134.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
-      /* @__PURE__ */ React134.createElement(
+      /* @__PURE__ */ React133.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
+      /* @__PURE__ */ React133.createElement(
         TableCell,
         {
           isCurrency: !expandable || expandable && !expanded,
@@ -11469,18 +11478,18 @@ var BalanceSheetTable = ({
         rowKey + ":" + subItem.name,
         subIdx
       )
-    ), showChildren && expandable && /* @__PURE__ */ React134.createElement(
+    ), showChildren && expandable && /* @__PURE__ */ React133.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex + "--summation",
         depth: depth + 1,
         variant: "summation"
       },
-      /* @__PURE__ */ React134.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
-      /* @__PURE__ */ React134.createElement(TableCell, { primary: true, isCurrency: true }, lineItem.value)
+      /* @__PURE__ */ React133.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
+      /* @__PURE__ */ React133.createElement(TableCell, { primary: true, isCurrency: true }, lineItem.value)
     ));
   };
-  return /* @__PURE__ */ React134.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React134.createElement(TableHead, null, /* @__PURE__ */ React134.createElement(TableRow, { isHeadRow: true, rowKey: "balance-sheet-head-row" }, /* @__PURE__ */ React134.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React134.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.totalColumnHeader || "Total"))), /* @__PURE__ */ React134.createElement(TableBody, null, config.map((row, idx) => /* @__PURE__ */ React134.createElement(React134.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
+  return /* @__PURE__ */ React133.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React133.createElement(TableHead, null, /* @__PURE__ */ React133.createElement(TableRow, { isHeadRow: true, rowKey: "balance-sheet-head-row" }, /* @__PURE__ */ React133.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React133.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.totalColumnHeader || "Total"))), /* @__PURE__ */ React133.createElement(TableBody, null, config.map((row, idx) => /* @__PURE__ */ React133.createElement(React133.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
     data[row.lineItem],
     0,
     row.lineItem,
@@ -11489,17 +11498,17 @@ var BalanceSheetTable = ({
 };
 
 // src/components/View/View.tsx
-import React137 from "react";
+import React136 from "react";
 
 // src/components/ViewHeader/ViewHeader.tsx
-import React135 from "react";
+import React134 from "react";
 var ViewHeader = ({ title, controls }) => {
-  return /* @__PURE__ */ React135.createElement("div", { className: "Layer__view-header" }, /* @__PURE__ */ React135.createElement("div", { className: "Layer__view-header__content" }, title && /* @__PURE__ */ React135.createElement(Heading, null, title), controls && /* @__PURE__ */ React135.createElement("div", { className: "Layer__view-header__controls" }, controls)));
+  return /* @__PURE__ */ React134.createElement("div", { className: "Layer__view-header" }, /* @__PURE__ */ React134.createElement("div", { className: "Layer__view-header__content" }, title && /* @__PURE__ */ React134.createElement(Heading, null, title), controls && /* @__PURE__ */ React134.createElement("div", { className: "Layer__view-header__controls" }, controls)));
 };
 
 // src/components/Panel/Panel.tsx
-import React136, { useEffect as useEffect29, useState as useState34 } from "react";
-import classNames48 from "classnames";
+import React135, { useEffect as useEffect30, useState as useState33 } from "react";
+import classNames49 from "classnames";
 var Panel = ({
   children,
   className,
@@ -11509,27 +11518,27 @@ var Panel = ({
   parentRef,
   defaultSidebarHeight = false
 }) => {
-  const [sidebarHeight, setSidebarHeight] = useState34(0);
-  useEffect29(() => {
+  const [sidebarHeight, setSidebarHeight] = useState33(0);
+  useEffect30(() => {
     if (parentRef?.current?.offsetHeight) {
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
   }, [parentRef?.current?.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = classNames48(
+  const sidebarClass = classNames49(
     "Layer__panel__sidebar",
     defaultSidebarHeight && "Layer__panel__sidebar--default"
   );
-  return /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React135.createElement(
     "div",
     {
-      className: classNames48(
+      className: classNames49(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
       )
     },
-    /* @__PURE__ */ React136.createElement("div", { className: "Layer__panel__content" }, header, children),
-    sidebar && /* @__PURE__ */ React136.createElement(
+    /* @__PURE__ */ React135.createElement("div", { className: "Layer__panel__content" }, header, children),
+    sidebar && /* @__PURE__ */ React135.createElement(
       "div",
       {
         className: sidebarClass,
@@ -11537,13 +11546,13 @@ var Panel = ({
           maxHeight: sidebarHeight > 0 && sidebarIsOpen ? sidebarHeight : 0
         } : {}
       },
-      /* @__PURE__ */ React136.createElement("div", { className: "Layer__panel__sidebar-content" }, sidebar)
+      /* @__PURE__ */ React135.createElement("div", { className: "Layer__panel__sidebar-content" }, sidebar)
     )
   );
 };
 
 // src/components/View/View.tsx
-import classNames49 from "classnames";
+import classNames50 from "classnames";
 var View = ({
   title,
   children,
@@ -11555,12 +11564,12 @@ var View = ({
 }) => {
   const { theme } = useLayerContext();
   const styles = parseStylesFromThemeConfig(theme);
-  const viewClassNames = classNames49(
+  const viewClassNames = classNames50(
     "Layer__view",
     type === "panel" && "Layer__view--panel",
     viewClassName
   );
-  return /* @__PURE__ */ React137.createElement("div", { className: viewClassNames, style: { ...styles } }, /* @__PURE__ */ React137.createElement(ViewHeader, { title, controls: headerControls }), withSidebar ? /* @__PURE__ */ React137.createElement(Panel, { sidebarIsOpen: true, sidebar, defaultSidebarHeight: true }, /* @__PURE__ */ React137.createElement("div", { className: "Layer__view-main" }, children)) : /* @__PURE__ */ React137.createElement("div", { className: "Layer__view-main" }, children));
+  return /* @__PURE__ */ React136.createElement("div", { className: viewClassNames, style: { ...styles } }, /* @__PURE__ */ React136.createElement(ViewHeader, { title, controls: headerControls }), withSidebar ? /* @__PURE__ */ React136.createElement(Panel, { sidebarIsOpen: true, sidebar, defaultSidebarHeight: true }, /* @__PURE__ */ React136.createElement("div", { className: "Layer__view-main" }, children)) : /* @__PURE__ */ React136.createElement("div", { className: "Layer__view-main" }, children));
 };
 
 // src/components/BalanceSheet/constants.ts
@@ -11582,7 +11591,7 @@ import { format as format4, parse, startOfDay as startOfDay2 } from "date-fns";
 var COMPONENT_NAME3 = "balance-sheet";
 var BalanceSheet = (props) => {
   const balanceSheetContextData = useBalanceSheet(props.effectiveDate);
-  return /* @__PURE__ */ React138.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React138.createElement(
+  return /* @__PURE__ */ React137.createElement(BalanceSheetContext.Provider, { value: balanceSheetContextData }, /* @__PURE__ */ React137.createElement(
     BalanceSheetView,
     {
       asWidget: props.asWidget,
@@ -11596,9 +11605,9 @@ var BalanceSheetView = ({
   asWidget = false,
   stringOverrides
 }) => {
-  const [effectiveDate, setEffectiveDate] = useState35(startOfDay2(/* @__PURE__ */ new Date()));
+  const [effectiveDate, setEffectiveDate] = useState34(startOfDay2(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useBalanceSheet(effectiveDate);
-  useEffect30(() => {
+  useEffect31(() => {
     const d1 = effectiveDate && format4(startOfDay2(effectiveDate), "yyyy-MM-dd'T'HH:mm:ssXXX");
     const d2 = data?.effective_date && format4(
       startOfDay2(
@@ -11611,19 +11620,19 @@ var BalanceSheetView = ({
     }
   }, [effectiveDate]);
   if (asWidget) {
-    return /* @__PURE__ */ React138.createElement(TableProvider, null, /* @__PURE__ */ React138.createElement(Container, { name: COMPONENT_NAME3, asWidget: true }, /* @__PURE__ */ React138.createElement(
+    return /* @__PURE__ */ React137.createElement(TableProvider, null, /* @__PURE__ */ React137.createElement(Container, { name: COMPONENT_NAME3, asWidget: true }, /* @__PURE__ */ React137.createElement(
       View,
       {
         type: "panel",
-        headerControls: /* @__PURE__ */ React138.createElement(React138.Fragment, null, /* @__PURE__ */ React138.createElement(
+        headerControls: /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(
           BalanceSheetDatePicker,
           {
             effectiveDate,
             setEffectiveDate
           }
-        ), withExpandAllButton && /* @__PURE__ */ React138.createElement(BalanceSheetExpandAllButton, null))
+        ), withExpandAllButton && /* @__PURE__ */ React137.createElement(BalanceSheetExpandAllButton, null))
       },
-      !data || isLoading ? /* @__PURE__ */ React138.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React138.createElement(Loader2, null)) : /* @__PURE__ */ React138.createElement(
+      !data || isLoading ? /* @__PURE__ */ React137.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React137.createElement(Loader2, null)) : /* @__PURE__ */ React137.createElement(
         BalanceSheetTable,
         {
           data,
@@ -11633,19 +11642,19 @@ var BalanceSheetView = ({
       )
     )));
   }
-  return /* @__PURE__ */ React138.createElement(TableProvider, null, /* @__PURE__ */ React138.createElement(
+  return /* @__PURE__ */ React137.createElement(TableProvider, null, /* @__PURE__ */ React137.createElement(
     View,
     {
       type: "panel",
-      headerControls: /* @__PURE__ */ React138.createElement(React138.Fragment, null, /* @__PURE__ */ React138.createElement(
+      headerControls: /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(
         BalanceSheetDatePicker,
         {
           effectiveDate,
           setEffectiveDate
         }
-      ), withExpandAllButton && /* @__PURE__ */ React138.createElement(BalanceSheetExpandAllButton, null))
+      ), withExpandAllButton && /* @__PURE__ */ React137.createElement(BalanceSheetExpandAllButton, null))
     },
-    !data || isLoading ? /* @__PURE__ */ React138.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React138.createElement(Loader2, null)) : /* @__PURE__ */ React138.createElement(
+    !data || isLoading ? /* @__PURE__ */ React137.createElement("div", { className: `Layer__${COMPONENT_NAME3}__loader-container` }, /* @__PURE__ */ React137.createElement(Loader2, null)) : /* @__PURE__ */ React137.createElement(
       BalanceSheetTable,
       {
         data,
@@ -11657,7 +11666,7 @@ var BalanceSheetView = ({
 };
 
 // src/components/StatementOfCashFlow/StatementOfCashFlow.tsx
-import React140, { useState as useState36 } from "react";
+import React139, { useState as useState35 } from "react";
 
 // src/contexts/StatementOfCashContext/StatementOfCashFlowContext.tsx
 import { createContext as createContext9 } from "react";
@@ -11670,7 +11679,7 @@ var StatementOfCashFlowContext = createContext9({
 });
 
 // src/hooks/useStatementOfCashFlow/useStatementOfCashFlow.tsx
-import { useEffect as useEffect31 } from "react";
+import { useEffect as useEffect32 } from "react";
 import { format as format5, startOfDay as startOfDay3 } from "date-fns";
 import useSWR6 from "swr";
 var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate = /* @__PURE__ */ new Date()) => {
@@ -11694,12 +11703,12 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
   const refetch = () => {
     mutate();
   };
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("STATEMENT_OF_CASH_FLOWS" /* STATEMENT_OF_CASH_FLOWS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect31(() => {
+  useEffect32(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -11708,7 +11717,7 @@ var useStatementOfCashFlow = (startDate = /* @__PURE__ */ new Date(), endDate =
 };
 
 // src/components/StatementOfCashFlowTable/StatementOfCashFlowTable.tsx
-import React139 from "react";
+import React138 from "react";
 var StatementOfCashFlowTable = ({
   data,
   config,
@@ -11718,7 +11727,7 @@ var StatementOfCashFlowTable = ({
   const renderLineItem = (lineItem, depth = 0, rowKey, rowIndex) => {
     const expandable = !!lineItem.line_items && lineItem.line_items.length > 0;
     const expanded = expandable ? isOpen(rowKey) : true;
-    return /* @__PURE__ */ React139.createElement(React139.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React139.createElement(
+    return /* @__PURE__ */ React138.createElement(React138.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ React138.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex,
@@ -11727,8 +11736,8 @@ var StatementOfCashFlowTable = ({
         handleExpand: () => setIsOpen(rowKey),
         depth
       },
-      /* @__PURE__ */ React139.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
-      /* @__PURE__ */ React139.createElement(
+      /* @__PURE__ */ React138.createElement(TableCell, { withExpandIcon: expandable, primary: expandable }, lineItem.display_name),
+      /* @__PURE__ */ React138.createElement(
         TableCell,
         {
           isCurrency: !expandable || expandable && !expanded,
@@ -11743,27 +11752,27 @@ var StatementOfCashFlowTable = ({
         rowKey + ":" + subItem.name,
         subIdx
       )
-    ), expanded && expandable && /* @__PURE__ */ React139.createElement(
+    ), expanded && expandable && /* @__PURE__ */ React138.createElement(
       TableRow,
       {
         rowKey: rowKey + "-" + rowIndex + "--summation",
         depth: depth + 1,
         variant: "summation"
       },
-      /* @__PURE__ */ React139.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
-      /* @__PURE__ */ React139.createElement(TableCell, { primary: true, isCurrency: true }, lineItem.value)
+      /* @__PURE__ */ React138.createElement(TableCell, { primary: true }, `Total of ${lineItem.display_name}`),
+      /* @__PURE__ */ React138.createElement(TableCell, { primary: true, isCurrency: true }, lineItem.value)
     ));
   };
-  return /* @__PURE__ */ React139.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React139.createElement(TableHead, null, /* @__PURE__ */ React139.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React139.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React139.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.totalColumnHeader || "Total"))), /* @__PURE__ */ React139.createElement(TableBody, null, config.map((row, idx) => {
+  return /* @__PURE__ */ React138.createElement(Table, { borderCollapse: "collapse" }, /* @__PURE__ */ React138.createElement(TableHead, null, /* @__PURE__ */ React138.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React138.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React138.createElement(TableCell, { isHeaderCell: true }, stringOverrides?.totalColumnHeader || "Total"))), /* @__PURE__ */ React138.createElement(TableBody, null, config.map((row, idx) => {
     if (row.type === "line_item") {
-      return /* @__PURE__ */ React139.createElement(React139.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
+      return /* @__PURE__ */ React138.createElement(React138.Fragment, { key: row.lineItem }, data[row.lineItem] && renderLineItem(
         data[row.lineItem],
         0,
         row.lineItem ? row.lineItem : "",
         idx
       ));
     } else {
-      return /* @__PURE__ */ React139.createElement(TableRow, { rowKey: row.name + "-" + idx, variant: "default" }, /* @__PURE__ */ React139.createElement(TableCell, { primary: true }, row.displayName), /* @__PURE__ */ React139.createElement(TableCell, { primary: true, isCurrency: true }, row.lineItem));
+      return /* @__PURE__ */ React138.createElement(TableRow, { rowKey: row.name + "-" + idx, variant: "default" }, /* @__PURE__ */ React138.createElement(TableCell, { primary: true }, row.displayName), /* @__PURE__ */ React138.createElement(TableCell, { primary: true, isCurrency: true }, row.lineItem));
     }
   })));
 };
@@ -11812,13 +11821,13 @@ import { startOfDay as startOfDay4, subWeeks } from "date-fns";
 var COMPONENT_NAME4 = "statement-of-cash-flow";
 var StatementOfCashFlow = ({ stringOverrides }) => {
   const cashContextData = useStatementOfCashFlow();
-  return /* @__PURE__ */ React140.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React140.createElement(StatementOfCashFlowView, { stringOverrides }));
+  return /* @__PURE__ */ React139.createElement(StatementOfCashFlowContext.Provider, { value: cashContextData }, /* @__PURE__ */ React139.createElement(StatementOfCashFlowView, { stringOverrides }));
 };
 var StatementOfCashFlowView = ({ stringOverrides }) => {
-  const [startDate, setStartDate] = useState36(
+  const [startDate, setStartDate] = useState35(
     startOfDay4(subWeeks(/* @__PURE__ */ new Date(), 4))
   );
-  const [endDate, setEndDate] = useState36(startOfDay4(/* @__PURE__ */ new Date()));
+  const [endDate, setEndDate] = useState35(startOfDay4(/* @__PURE__ */ new Date()));
   const { data, isLoading, refetch } = useStatementOfCashFlow(
     startDate,
     endDate
@@ -11834,11 +11843,11 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
       refetch();
     }
   };
-  return /* @__PURE__ */ React140.createElement(TableProvider, null, /* @__PURE__ */ React140.createElement(
+  return /* @__PURE__ */ React139.createElement(TableProvider, null, /* @__PURE__ */ React139.createElement(
     View,
     {
       type: "panel",
-      headerControls: /* @__PURE__ */ React140.createElement(React140.Fragment, null, /* @__PURE__ */ React140.createElement(
+      headerControls: /* @__PURE__ */ React139.createElement(React139.Fragment, null, /* @__PURE__ */ React139.createElement(
         DatePicker,
         {
           selected: [startDate, endDate],
@@ -11848,7 +11857,7 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
         }
       ))
     },
-    !data || isLoading ? /* @__PURE__ */ React140.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React140.createElement(Loader2, null)) : /* @__PURE__ */ React140.createElement(
+    !data || isLoading ? /* @__PURE__ */ React139.createElement("div", { className: `Layer__${COMPONENT_NAME4}__loader-container` }, /* @__PURE__ */ React139.createElement(Loader2, null)) : /* @__PURE__ */ React139.createElement(
       StatementOfCashFlowTable,
       {
         data,
@@ -11860,7 +11869,7 @@ var StatementOfCashFlowView = ({ stringOverrides }) => {
 };
 
 // src/components/ChartOfAccounts/ChartOfAccounts.tsx
-import React155, { useContext as useContext25, useState as useState43 } from "react";
+import React154, { useContext as useContext25, useState as useState42 } from "react";
 
 // src/contexts/ChartOfAccountsContext/ChartOfAccountsContext.tsx
 import { createContext as createContext10 } from "react";
@@ -11919,7 +11928,7 @@ var LedgerAccountsContext = createContext11({
 });
 
 // src/hooks/useChartOfAccounts/useChartOfAccounts.tsx
-import { useEffect as useEffect32, useState as useState37 } from "react";
+import { useEffect as useEffect33, useState as useState36 } from "react";
 
 // src/components/ChartOfAccountsForm/constants.ts
 var LEDGER_ACCOUNT_TYPES = [
@@ -12216,13 +12225,13 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [form, setForm] = useState37();
-  const [sendingForm, setSendingForm] = useState37(false);
-  const [apiError, setApiError] = useState37(void 0);
-  const [startDate, setStartDate] = useState37(
+  const [form, setForm] = useState36();
+  const [sendingForm, setSendingForm] = useState36(false);
+  const [apiError, setApiError] = useState36(void 0);
+  const [startDate, setStartDate] = useState36(
     initialStartDate ?? startOfMonth12(Date.now())
   );
-  const [endDate, setEndDate] = useState37(
+  const [endDate, setEndDate] = useState36(
     initialEndDate ?? endOfMonth10(Date.now())
   );
   const queryKey = businessId && auth?.access_token && `chart-of-accounts-${businessId}-${startDate?.valueOf()}-${endDate?.valueOf()}`;
@@ -12403,12 +12412,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
     newEndDate && setEndDate(newEndDate);
   };
   const refetch = () => mutate();
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("CHART_OF_ACCOUNTS" /* CHART_OF_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect32(() => {
+  useEffect33(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -12434,12 +12443,12 @@ var useChartOfAccounts = ({ withDates, startDate: initialStartDate, endDate: ini
 };
 
 // src/hooks/useLedgerAccounts/useLedgerAccounts.tsx
-import { useEffect as useEffect33, useState as useState38 } from "react";
+import { useEffect as useEffect34, useState as useState37 } from "react";
 import useSWR8 from "swr";
 var useLedgerAccounts = () => {
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
-  const [accountId, setAccountId] = useState38();
-  const [selectedEntryId, setSelectedEntryId] = useState38();
+  const [accountId, setAccountId] = useState37();
+  const [selectedEntryId, setSelectedEntryId] = useState37();
   const queryKey = businessId && accountId && auth?.access_token && `ledger-accounts-lines-${businessId}-${accountId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR8(
     queryKey,
@@ -12464,12 +12473,12 @@ var useLedgerAccounts = () => {
     setSelectedEntryId(void 0);
     mutateEntryData();
   };
-  useEffect33(() => {
+  useEffect34(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("LEDGER_ACCOUNTS" /* LEDGER_ACCOUNTS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect33(() => {
+  useEffect34(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -12493,14 +12502,14 @@ var useLedgerAccounts = () => {
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
-import React147, { useContext as useContext21, useState as useState40 } from "react";
+import React146, { useContext as useContext21, useState as useState39 } from "react";
 
 // src/components/ChartOfAccountsDatePicker/ChartOfAccountsDatePicker.tsx
-import React141, { useContext as useContext18 } from "react";
+import React140, { useContext as useContext18 } from "react";
 import { endOfMonth as endOfMonth11, startOfMonth as startOfMonth13 } from "date-fns";
 var ChartOfAccountsDatePicker = () => {
   const { changeDateRange, dateRange } = useContext18(ChartOfAccountsContext);
-  return /* @__PURE__ */ React141.createElement(
+  return /* @__PURE__ */ React140.createElement(
     DatePicker,
     {
       mode: "monthPicker",
@@ -12518,11 +12527,11 @@ var ChartOfAccountsDatePicker = () => {
 };
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import React143, { useContext as useContext19, useEffect as useEffect34, useState as useState39 } from "react";
+import React142, { useContext as useContext19, useEffect as useEffect35, useState as useState38 } from "react";
 
 // src/icons/Edit2.tsx
-import * as React142 from "react";
-var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React142.createElement(
+import * as React141 from "react";
+var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React141.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -12532,7 +12541,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React142.createElement(
     width: size,
     height: size
   },
-  /* @__PURE__ */ React142.createElement(
+  /* @__PURE__ */ React141.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",
@@ -12545,7 +12554,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React142.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-import classNames50 from "classnames";
+import classNames51 from "classnames";
 var INDENTATION = 24;
 var EXPANDED_STYLE2 = {
   height: 52,
@@ -12579,7 +12588,7 @@ var ChartOfAccountsRow = ({
   const { form, editAccount } = useContext19(ChartOfAccountsContext);
   const { setAccountId } = useContext19(LedgerAccountsContext);
   const baseStyle = view === "desktop" ? EXPANDED_STYLE2 : EXPANDED_MOBILE_STYLE;
-  const [isOpen, setIsOpen] = useState39(defaultOpen);
+  const [isOpen, setIsOpen] = useState38(defaultOpen);
   const style = expanded ? {
     ...baseStyle,
     transitionDelay: `${15 * index}ms`
@@ -12587,20 +12596,20 @@ var ChartOfAccountsRow = ({
     ...COLLAPSED_STYLE2,
     transitionDelay: `${acountsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState39(false);
-  const [prevExpandedAll, setPrevExpandedAll] = useState39(expandAll);
-  useEffect34(() => {
+  const [showComponent, setShowComponent] = useState38(false);
+  const [prevExpandedAll, setPrevExpandedAll] = useState38(expandAll);
+  useEffect35(() => {
     const timeoutId = setTimeout(() => {
       setShowComponent(true);
     }, cumulativeIndex * 50);
     return () => clearTimeout(timeoutId);
   }, []);
-  useEffect34(() => {
+  useEffect35(() => {
     if (prevExpandedAll !== expandAll && expandAll) {
       setIsOpen(expandAll === "collapsed" ? false : true);
     }
   }, [expandAll]);
-  const baseClass = classNames50(
+  const baseClass = classNames51(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -12608,15 +12617,15 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = classNames50(
+  const desktopRowClass = classNames51(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = classNames50(
+  const mobileRowClass = classNames51(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
-  return /* @__PURE__ */ React143.createElement(React143.Fragment, null, view === "desktop" && /* @__PURE__ */ React143.createElement(
+  return /* @__PURE__ */ React142.createElement(React142.Fragment, null, view === "desktop" && /* @__PURE__ */ React142.createElement(
     "tr",
     {
       className: desktopRowClass,
@@ -12626,7 +12635,7 @@ var ChartOfAccountsRow = ({
         setAccountId(account.id);
       }
     },
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React143.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React143.createElement(
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell Layer__coa__name" }, /* @__PURE__ */ React142.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React142.createElement(
       "span",
       {
         className: "Layer__table-cell-content-indentation",
@@ -12634,7 +12643,7 @@ var ChartOfAccountsRow = ({
           paddingLeft: INDENTATION * depth + 16
         }
       },
-      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React143.createElement(
+      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React142.createElement(
         ChevronDownFill_default,
         {
           size: 16,
@@ -12645,22 +12654,22 @@ var ChartOfAccountsRow = ({
           }
         }
       ),
-      /* @__PURE__ */ React143.createElement("span", { className: "Layer__coa__name__text" }, account.name)
+      /* @__PURE__ */ React142.createElement("span", { className: "Layer__coa__name__text" }, account.name)
     ))),
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React143.createElement(
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell Layer__coa__type" }, /* @__PURE__ */ React142.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__mobile--hidden",
         style
       },
       account.account_type?.display_name
-    ), /* @__PURE__ */ React143.createElement(
+    ), /* @__PURE__ */ React142.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__desktop--hidden",
         style
       },
-      /* @__PURE__ */ React143.createElement(
+      /* @__PURE__ */ React142.createElement(
         Text,
         {
           weight: "bold" /* bold */,
@@ -12668,10 +12677,10 @@ var ChartOfAccountsRow = ({
         },
         account.normality
       ),
-      /* @__PURE__ */ React143.createElement(Text, { className: "Layer__coa__subtype--mobile" }, account.account_subtype?.display_name)
+      /* @__PURE__ */ React142.createElement(Text, { className: "Layer__coa__subtype--mobile" }, account.account_subtype?.display_name)
     )),
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ React143.createElement("span", { className: "Layer__table-cell-content", style }, account.account_subtype?.display_name)),
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React143.createElement(
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell Layer__coa__subtype Layer__mobile--hidden" }, /* @__PURE__ */ React142.createElement("span", { className: "Layer__table-cell-content", style }, account.account_subtype?.display_name)),
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell Layer__coa__balance" }, /* @__PURE__ */ React142.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__table-cell--amount",
@@ -12680,11 +12689,11 @@ var ChartOfAccountsRow = ({
       "$",
       centsToDollars(Math.abs(account.balance || 0))
     )),
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React143.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React143.createElement(
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell Layer__coa__actions" }, /* @__PURE__ */ React142.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React142.createElement(
       Button,
       {
         variant: "secondary" /* secondary */,
-        rightIcon: /* @__PURE__ */ React143.createElement(Edit2_default, { size: 12 }),
+        rightIcon: /* @__PURE__ */ React142.createElement(Edit2_default, { size: 12 }),
         iconOnly: true,
         onClick: (e) => {
           e.preventDefault();
@@ -12694,7 +12703,7 @@ var ChartOfAccountsRow = ({
       },
       "Edit"
     )))
-  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ React143.createElement(
+  ), view === "mobile" || view === "tablet" ? /* @__PURE__ */ React142.createElement(
     "tr",
     {
       className: mobileRowClass,
@@ -12704,7 +12713,7 @@ var ChartOfAccountsRow = ({
         setAccountId(account.id);
       }
     },
-    /* @__PURE__ */ React143.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ React143.createElement(
+    /* @__PURE__ */ React142.createElement("td", { className: "Layer__table-cell", colSpan: 5 }, /* @__PURE__ */ React142.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__table-cell-content-indentation",
@@ -12713,7 +12722,7 @@ var ChartOfAccountsRow = ({
           ...style
         }
       },
-      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React143.createElement(
+      account.sub_accounts && account.sub_accounts.length > 0 && /* @__PURE__ */ React142.createElement(
         ChevronDownFill_default,
         {
           size: 16,
@@ -12724,14 +12733,14 @@ var ChartOfAccountsRow = ({
           }
         }
       ),
-      /* @__PURE__ */ React143.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ React143.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ React143.createElement(
+      /* @__PURE__ */ React142.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content" }, /* @__PURE__ */ React142.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__top-row" }, /* @__PURE__ */ React142.createElement(
         Text,
         {
           as: "span",
           className: "Layer__chart-of-accounts__mobile-row-content__name"
         },
         account.name
-      ), /* @__PURE__ */ React143.createElement(
+      ), /* @__PURE__ */ React142.createElement(
         TextButton,
         {
           onClick: (e) => {
@@ -12741,7 +12750,7 @@ var ChartOfAccountsRow = ({
           }
         },
         "Edit"
-      )), /* @__PURE__ */ React143.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ React143.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ React143.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ React143.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ React143.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ React143.createElement(
+      )), /* @__PURE__ */ React142.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__bottom-row" }, /* @__PURE__ */ React142.createElement("div", { className: "Layer__chart-of-accounts__mobile-row-content__types" }, /* @__PURE__ */ React142.createElement(Text, { as: "span" }, account.normality), /* @__PURE__ */ React142.createElement("span", { className: "Layer__chart-of-accounts__mobile-row-content__separator" }), /* @__PURE__ */ React142.createElement(Text, { as: "span" }, "Sub-Type")), /* @__PURE__ */ React142.createElement(
         Text,
         {
           as: "span",
@@ -12751,7 +12760,7 @@ var ChartOfAccountsRow = ({
         centsToDollars(Math.abs(account.balance || 0))
       )))
     ))
-  ) : null, (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React143.createElement(
+  ) : null, (account.sub_accounts || []).map((subAccount, idx) => /* @__PURE__ */ React142.createElement(
     ChartOfAccountsRow,
     {
       key: subAccount.id,
@@ -12768,10 +12777,10 @@ var ChartOfAccountsRow = ({
 };
 
 // src/components/ChartOfAccountsSidebar/ChartOfAccountsSidebar.tsx
-import React146 from "react";
+import React145 from "react";
 
 // src/components/ChartOfAccountsForm/ChartOfAccountsForm.tsx
-import React145, { useContext as useContext20, useMemo as useMemo13 } from "react";
+import React144, { useContext as useContext20, useMemo as useMemo13 } from "react";
 
 // src/components/ChartOfAccountsForm/useParentOptions.ts
 import { useMemo as useMemo12 } from "react";
@@ -12808,7 +12817,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
   if (!form) {
     return;
   }
-  return /* @__PURE__ */ React145.createElement(
+  return /* @__PURE__ */ React144.createElement(
     "form",
     {
       className: "Layer__form",
@@ -12817,7 +12826,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ React145.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React145.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ React145.createElement("div", { className: "actions" }, /* @__PURE__ */ React145.createElement(
+    /* @__PURE__ */ React144.createElement("div", { className: "Layer__chart-of-accounts__sidebar__header" }, /* @__PURE__ */ React144.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, form?.action === "edit" ? stringOverrides?.editModeHeader || "Edit Account" : stringOverrides?.createModeHeader || "Add New Account"), /* @__PURE__ */ React144.createElement("div", { className: "actions" }, /* @__PURE__ */ React144.createElement(
       Button,
       {
         type: "button",
@@ -12826,7 +12835,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React145.createElement(
+    ), apiError && /* @__PURE__ */ React144.createElement(
       RetryButton,
       {
         type: "submit",
@@ -12835,7 +12844,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React145.createElement(
+    ), !apiError && /* @__PURE__ */ React144.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -12845,7 +12854,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ React145.createElement(
+    apiError && /* @__PURE__ */ React144.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -12853,8 +12862,8 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
       },
       apiError
     ),
-    entry && /* @__PURE__ */ React145.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React145.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React145.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
-    /* @__PURE__ */ React145.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React145.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ React145.createElement(
+    entry && /* @__PURE__ */ React144.createElement("div", { className: "Layer__chart-of-accounts__form-edit-entry" }, /* @__PURE__ */ React144.createElement(Text, { weight: "bold" /* bold */ }, entry.name), /* @__PURE__ */ React144.createElement(Text, { weight: "bold" /* bold */ }, "$", centsToDollars(entry.balance || 0))),
+    /* @__PURE__ */ React144.createElement("div", { className: "Layer__chart-of-accounts__form" }, /* @__PURE__ */ React144.createElement(InputGroup, { name: "parent", label: stringOverrides?.parentLabel || "Parent", inline: true }, /* @__PURE__ */ React144.createElement(
       Select2,
       {
         options: parentOptions,
@@ -12862,7 +12871,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("parent", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React145.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ React145.createElement(
+    )), /* @__PURE__ */ React144.createElement(InputGroup, { name: "name", label: stringOverrides?.nameLabel || "Name", inline: true }, /* @__PURE__ */ React144.createElement(
       Input,
       {
         name: "name",
@@ -12873,7 +12882,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm,
         onChange: (e) => changeFormData("name", e.target.value)
       }
-    )), /* @__PURE__ */ React145.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ React145.createElement(
+    )), /* @__PURE__ */ React144.createElement(InputGroup, { name: "type", label: stringOverrides?.typeLabel || "Type", inline: true }, /* @__PURE__ */ React144.createElement(
       Select2,
       {
         options: LEDGER_ACCOUNT_TYPES,
@@ -12883,7 +12892,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         errorMessage: form?.errors?.find((x) => x.field === "type")?.message,
         disabled: sendingForm || form.action === "edit" || form.data.parent !== void 0
       }
-    )), /* @__PURE__ */ React145.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ React145.createElement(
+    )), /* @__PURE__ */ React144.createElement(InputGroup, { name: "subType", label: stringOverrides?.subTypeLabel || "Sub-Type", inline: true }, /* @__PURE__ */ React144.createElement(
       Select2,
       {
         options: form?.data.type?.value !== void 0 ? LEDGER_ACCOUNT_SUBTYPES_FOR_TYPE[form?.data.type?.value] : LEDGER_ACCOUNT_SUBTYPES,
@@ -12891,7 +12900,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("subType", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React145.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ React145.createElement(
+    )), /* @__PURE__ */ React144.createElement(InputGroup, { name: "normality", label: stringOverrides?.normalityLabel || "Normality", inline: true }, /* @__PURE__ */ React144.createElement(
       Select2,
       {
         options: NORMALITY_OPTIONS,
@@ -12903,7 +12912,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         onChange: (sel) => changeFormData("normality", sel),
         disabled: sendingForm
       }
-    )), /* @__PURE__ */ React145.createElement("div", { className: "actions" }, /* @__PURE__ */ React145.createElement(
+    )), /* @__PURE__ */ React144.createElement("div", { className: "actions" }, /* @__PURE__ */ React144.createElement(
       Button,
       {
         type: "button",
@@ -12912,7 +12921,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React145.createElement(
+    ), apiError && /* @__PURE__ */ React144.createElement(
       RetryButton,
       {
         type: "submit",
@@ -12921,7 +12930,7 @@ var ChartOfAccountsForm = ({ stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React145.createElement(
+    ), !apiError && /* @__PURE__ */ React144.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -12939,7 +12948,7 @@ var ChartOfAccountsSidebar = ({
   parentRef: _parentRef,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React146.createElement(ChartOfAccountsForm, { stringOverrides });
+  return /* @__PURE__ */ React145.createElement(ChartOfAccountsForm, { stringOverrides });
 };
 
 // src/components/ChartOfAccountsTable/ChartOfAccountsTable.tsx
@@ -12953,13 +12962,13 @@ var ChartOfAccountsTable = ({
   stringOverrides
 }) => {
   const { data, isLoading, addAccount, error, isValidating, refetch, form } = useContext21(ChartOfAccountsContext);
-  const [expandAll, setExpandAll] = useState40();
+  const [expandAll, setExpandAll] = useState39();
   let cumulativeIndex = 0;
   const accountsLength = data?.accounts.length ?? 0;
-  return /* @__PURE__ */ React147.createElement(
+  return /* @__PURE__ */ React146.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React147.createElement(
+      sidebar: /* @__PURE__ */ React146.createElement(
         ChartOfAccountsSidebar,
         {
           parentRef: containerRef,
@@ -12969,13 +12978,13 @@ var ChartOfAccountsTable = ({
       sidebarIsOpen: Boolean(form),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React147.createElement(
+    /* @__PURE__ */ React146.createElement(
       Header,
       {
         className: `Layer__${COMPONENT_NAME5}__header`,
         layout: withDateControl ? "next-line-actions" /* NEXT_LINE_ACTIONS */ : void 0
       },
-      /* @__PURE__ */ React147.createElement(
+      /* @__PURE__ */ React146.createElement(
         Heading,
         {
           className: `Layer__${COMPONENT_NAME5}__title`,
@@ -12983,12 +12992,12 @@ var ChartOfAccountsTable = ({
         },
         stringOverrides?.headerText || "Chart of Accounts"
       ),
-      /* @__PURE__ */ React147.createElement(
+      /* @__PURE__ */ React146.createElement(
         "div",
         {
           className: `Layer__${COMPONENT_NAME5}__actions Layer__header__actions`
         },
-        withDateControl || withExpandAllButton ? /* @__PURE__ */ React147.createElement("div", { className: "Layer__header__actions-col" }, withDateControl && /* @__PURE__ */ React147.createElement(ChartOfAccountsDatePicker, null), withExpandAllButton && /* @__PURE__ */ React147.createElement(
+        withDateControl || withExpandAllButton ? /* @__PURE__ */ React146.createElement("div", { className: "Layer__header__actions-col" }, withDateControl && /* @__PURE__ */ React146.createElement(ChartOfAccountsDatePicker, null), withExpandAllButton && /* @__PURE__ */ React146.createElement(
           Button,
           {
             variant: "secondary" /* secondary */,
@@ -12998,13 +13007,13 @@ var ChartOfAccountsTable = ({
           },
           !expandAll || expandAll === "collapsed" ? "Expand all rows" : "Collapse all rows"
         )) : null,
-        /* @__PURE__ */ React147.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ React147.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, stringOverrides?.addAccountButtonText || "Add Account"))
+        /* @__PURE__ */ React146.createElement("div", { className: "Layer__header__actions-col" }, /* @__PURE__ */ React146.createElement(Button, { onClick: () => addAccount(), disabled: isLoading }, stringOverrides?.addAccountButtonText || "Add Account"))
       )
     ),
-    /* @__PURE__ */ React147.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React147.createElement("thead", null, /* @__PURE__ */ React147.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React147.createElement("th", { className: "Layer__table-header Layer__coa__name" }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ React147.createElement("th", { className: "Layer__table-header Layer__coa__type" }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React147.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ React147.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ React147.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React147.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
+    /* @__PURE__ */ React146.createElement("table", { className: "Layer__chart-of-accounts__table" }, /* @__PURE__ */ React146.createElement("thead", null, /* @__PURE__ */ React146.createElement("tr", { className: "Layer__table-row--header" }, /* @__PURE__ */ React146.createElement("th", { className: "Layer__table-header Layer__coa__name" }, stringOverrides?.nameColumnHeader || "Name"), /* @__PURE__ */ React146.createElement("th", { className: "Layer__table-header Layer__coa__type" }, stringOverrides?.typeColumnHeader || "Type"), /* @__PURE__ */ React146.createElement("th", { className: "Layer__table-header Layer__coa__subtype Layer__mobile--hidden" }, stringOverrides?.subtypeColumnHeader || "Sub-Type"), /* @__PURE__ */ React146.createElement("th", { className: "Layer__table-header Layer__coa__balance" }, stringOverrides?.balanceColumnHeader || "Balance"), /* @__PURE__ */ React146.createElement("th", { className: "Layer__table-header Layer__coa__actions" }))), /* @__PURE__ */ React146.createElement("tbody", null, !error && data?.accounts.map((account, idx) => {
       const currentCumulativeIndex = cumulativeIndex;
       cumulativeIndex = (account.sub_accounts?.length || 0) + cumulativeIndex + 1;
-      return /* @__PURE__ */ React147.createElement(
+      return /* @__PURE__ */ React146.createElement(
         ChartOfAccountsRow,
         {
           key: account.id,
@@ -13020,7 +13029,7 @@ var ChartOfAccountsTable = ({
         }
       );
     }))),
-    error ? /* @__PURE__ */ React147.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React147.createElement(
+    error ? /* @__PURE__ */ React146.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React146.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -13030,8 +13039,8 @@ var ChartOfAccountsTable = ({
         isLoading: isValidating || isLoading
       }
     )) : null,
-    (!data || isLoading) && !error ? /* @__PURE__ */ React147.createElement("div", { className: `Layer__${COMPONENT_NAME5}__loader-container` }, /* @__PURE__ */ React147.createElement(Loader2, null)) : null,
-    !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React147.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React147.createElement(
+    (!data || isLoading) && !error ? /* @__PURE__ */ React146.createElement("div", { className: `Layer__${COMPONENT_NAME5}__loader-container` }, /* @__PURE__ */ React146.createElement(Loader2, null)) : null,
+    !isLoading && !error && data?.accounts.length === 0 ? /* @__PURE__ */ React146.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React146.createElement(
       DataState,
       {
         status: "info" /* info */,
@@ -13045,25 +13054,25 @@ var ChartOfAccountsTable = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import React154, {
+import React153, {
   useContext as useContext24,
-  useEffect as useEffect36,
+  useEffect as useEffect37,
   useMemo as useMemo15,
-  useState as useState42
+  useState as useState41
 } from "react";
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
-import React152, { useContext as useContext22, useMemo as useMemo14 } from "react";
+import React151, { useContext as useContext22, useMemo as useMemo14 } from "react";
 
 // src/components/Card/Card.tsx
-import React148 from "react";
-import classNames51 from "classnames";
+import React147 from "react";
+import classNames52 from "classnames";
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ React148.createElement("div", { className: classNames51("Layer__card", className) }, children);
+  return /* @__PURE__ */ React147.createElement("div", { className: classNames52("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
-import React149 from "react";
+import React148 from "react";
 import { parseISO as parseISO13, format as formatTime9 } from "date-fns";
 var DateTime = ({
   value,
@@ -13074,11 +13083,11 @@ var DateTime = ({
   onlyTime
 }) => {
   if (format7) {
-    return /* @__PURE__ */ React149.createElement(Text, { className: "Layer__datetime" }, formatTime9(parseISO13(value), format7));
+    return /* @__PURE__ */ React148.createElement(Text, { className: "Layer__datetime" }, formatTime9(parseISO13(value), format7));
   }
   const date = formatTime9(parseISO13(value), dateFormat ?? DATE_FORMAT);
   const time = formatTime9(parseISO13(value), timeFormat ?? TIME_FORMAT);
-  return /* @__PURE__ */ React149.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React149.createElement(
+  return /* @__PURE__ */ React148.createElement(Text, { className: "Layer__datetime" }, !onlyTime && /* @__PURE__ */ React148.createElement(
     Text,
     {
       as: "span",
@@ -13087,7 +13096,7 @@ var DateTime = ({
       className: "Layer__datetime__date"
     },
     date
-  ), !onlyDate && /* @__PURE__ */ React149.createElement(
+  ), !onlyDate && /* @__PURE__ */ React148.createElement(
     Text,
     {
       as: "span",
@@ -13100,22 +13109,22 @@ var DateTime = ({
 };
 
 // src/components/DetailsList/DetailsList.tsx
-import React150 from "react";
-import classNames52 from "classnames";
+import React149 from "react";
+import classNames53 from "classnames";
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ React150.createElement("div", { className: classNames52("Layer__details-list", className) }, title && /* @__PURE__ */ React150.createElement(Header, null, /* @__PURE__ */ React150.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React150.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React150.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ React149.createElement("div", { className: classNames53("Layer__details-list", className) }, title && /* @__PURE__ */ React149.createElement(Header, null, /* @__PURE__ */ React149.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ React149.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ React149.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
-import React151 from "react";
+import React150 from "react";
 var renderValue = (value) => {
   if (typeof value === "string") {
-    return /* @__PURE__ */ React151.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
+    return /* @__PURE__ */ React150.createElement(Text, { weight: "bold" /* bold */, size: "sm" /* sm */ }, value);
   }
   return value;
 };
@@ -13124,7 +13133,7 @@ var DetailsListItem = ({
   children,
   isLoading
 }) => {
-  return /* @__PURE__ */ React151.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ React151.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ React151.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ React151.createElement(SkeletonLoader, null) : renderValue(children)));
+  return /* @__PURE__ */ React150.createElement("li", { className: "Layer__details-list-item" }, /* @__PURE__ */ React150.createElement("label", { className: "Layer__details-list-item__label" }, label), /* @__PURE__ */ React150.createElement("span", { className: "Layer__details-list-item__value" }, isLoading ? /* @__PURE__ */ React150.createElement(SkeletonLoader, null) : renderValue(children)));
 };
 
 // src/components/LedgerAccountEntryDetails/LedgerAccountEntryDetails.tsx
@@ -13132,31 +13141,31 @@ var SourceDetailView = ({ source, stringOverrides }) => {
   switch (source.type) {
     case "Transaction_Ledger_Entry_Source": {
       const transactionSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.accountNameLabel || "Account name" }, transactionSource.account_name), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.dateLabel || "Date" }, /* @__PURE__ */ React152.createElement(DateTime, { value: transactionSource.date })), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(transactionSource.amount)}`), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.directionLabel || "Direction" }, transactionSource.direction), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.counterpartyLabel || "Counterparty" }, transactionSource.counterparty));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.accountNameLabel || "Account name" }, transactionSource.account_name), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.dateLabel || "Date" }, /* @__PURE__ */ React151.createElement(DateTime, { value: transactionSource.date })), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(transactionSource.amount)}`), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.directionLabel || "Direction" }, transactionSource.direction), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.counterpartyLabel || "Counterparty" }, transactionSource.counterparty));
     }
     case "Invoice_Ledger_Entry_Source": {
       const invoiceSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.invoiceNumberLabel || "Invoice number" }, invoiceSource.invoice_number), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.recipientNameLabel || "Recipient name" }, invoiceSource.recipient_name), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.dateLabel || "Date" }, /* @__PURE__ */ React152.createElement(DateTime, { value: invoiceSource.date })), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(invoiceSource.amount)}`));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.invoiceNumberLabel || "Invoice number" }, invoiceSource.invoice_number), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.recipientNameLabel || "Recipient name" }, invoiceSource.recipient_name), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.dateLabel || "Date" }, /* @__PURE__ */ React151.createElement(DateTime, { value: invoiceSource.date })), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(invoiceSource.amount)}`));
     }
     case "Manual_Ledger_Entry_Source": {
       const manualSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.memoLabel || "Memo" }, manualSource.memo), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.createdByLabel || "Created by" }, manualSource.created_by));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.memoLabel || "Memo" }, manualSource.memo), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.createdByLabel || "Created by" }, manualSource.created_by));
     }
     case "Invoice_Payment_Ledger_Entry_Source": {
       const invoicePaymentSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.invoiceNumberLabel || "Invoice number" }, invoicePaymentSource.invoice_number), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(invoicePaymentSource.amount)}`));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.invoiceNumberLabel || "Invoice number" }, invoicePaymentSource.invoice_number), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(invoicePaymentSource.amount)}`));
     }
     case "Refund_Ledger_Entry_Source": {
       const refundSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.recipientNameLabel || "Recipient name" }, refundSource.recipient_name));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(refundSource.refunded_to_customer_amount)}`), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.recipientNameLabel || "Recipient name" }, refundSource.recipient_name));
     }
     case "Opening_Balance_Ledger_Entry_Source": {
       const openingBalanceSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.accountNameLabel || "Account name" }, openingBalanceSource.account_name));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.accountNameLabel || "Account name" }, openingBalanceSource.account_name));
     }
     case "Payout_Ledger_Entry_Source": {
       const payoutSource = source;
-      return /* @__PURE__ */ React152.createElement(React152.Fragment, null, /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(payoutSource.paid_out_amount)}`), /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.processorLabel || "Processor" }, payoutSource.processor));
+      return /* @__PURE__ */ React151.createElement(React151.Fragment, null, /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.amountLabel || "Amount" }, `$${centsToDollars(payoutSource.paid_out_amount)}`), /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.processorLabel || "Processor" }, payoutSource.processor));
     }
     default:
       return null;
@@ -13176,14 +13185,14 @@ var LedgerAccountEntryDetails = ({ stringOverrides }) => {
     });
     return { totalDebit: totalDebit2, totalCredit: totalCredit2 };
   }, [entryData]);
-  return /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account__entry-details__back-btn" }, /* @__PURE__ */ React152.createElement(BackButton, { onClick: () => closeSelectedEntry() }), /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account__entry-details__title-container" }, /* @__PURE__ */ React152.createElement(Text, { weight: "bold" /* bold */ }, stringOverrides?.title || "Transaction details"))), /* @__PURE__ */ React152.createElement(
+  return /* @__PURE__ */ React151.createElement("div", { className: "Layer__ledger-account__entry-details" }, /* @__PURE__ */ React151.createElement("div", { className: "Layer__ledger-account__entry-details__back-btn" }, /* @__PURE__ */ React151.createElement(BackButton, { onClick: () => closeSelectedEntry() }), /* @__PURE__ */ React151.createElement("div", { className: "Layer__ledger-account__entry-details__title-container" }, /* @__PURE__ */ React151.createElement(Text, { weight: "bold" /* bold */ }, stringOverrides?.title || "Transaction details"))), /* @__PURE__ */ React151.createElement(
     DetailsList,
     {
       title: stringOverrides?.transactionSource?.header || "Transaction source",
-      actions: /* @__PURE__ */ React152.createElement(
+      actions: /* @__PURE__ */ React151.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ React152.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ React151.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           variant: "secondary" /* secondary */,
@@ -13191,57 +13200,57 @@ var LedgerAccountEntryDetails = ({ stringOverrides }) => {
         }
       )
     },
-    /* @__PURE__ */ React152.createElement(
+    /* @__PURE__ */ React151.createElement(
       DetailsListItem,
       {
         label: stringOverrides?.transactionSource?.details?.sourceLabel || "Source",
         isLoading: isLoadingEntry
       },
-      /* @__PURE__ */ React152.createElement(Badge, null, entryData?.source?.entity_name)
+      /* @__PURE__ */ React151.createElement(Badge, null, entryData?.source?.entity_name)
     ),
-    entryData?.source?.display_description && /* @__PURE__ */ React152.createElement(SourceDetailView, { source: entryData?.source })
-  ), /* @__PURE__ */ React152.createElement(
+    entryData?.source?.display_description && /* @__PURE__ */ React151.createElement(SourceDetailView, { source: entryData?.source })
+  ), /* @__PURE__ */ React151.createElement(
     DetailsList,
     {
       title: stringOverrides?.journalEntry?.header ? stringOverrides?.journalEntry?.header(entryData?.id.substring(0, 5)) : `Journal Entry ${entryData?.id.substring(0, 5)}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.entryTypeLabel || "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")),
-    /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.dateLabel || "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ React152.createElement(DateTime, { value: entryData?.entry_at })),
-    /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.creationDateLabel || "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ React152.createElement(DateTime, { value: entryData?.date })),
-    entryData?.reversal_id && /* @__PURE__ */ React152.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.reversalLabel || "Reversal", isLoading: isLoadingEntry }, entryData?.reversal_id.substring(0, 5))
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React152.createElement(Card, null, /* @__PURE__ */ React152.createElement(
+    /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.entryTypeLabel || "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entryData?.entry_type ?? "")),
+    /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.dateLabel || "Date", isLoading: isLoadingEntry }, entryData?.entry_at && /* @__PURE__ */ React151.createElement(DateTime, { value: entryData?.entry_at })),
+    /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.creationDateLabel || "Creation date", isLoading: isLoadingEntry }, entryData?.date && /* @__PURE__ */ React151.createElement(DateTime, { value: entryData?.date })),
+    entryData?.reversal_id && /* @__PURE__ */ React151.createElement(DetailsListItem, { label: stringOverrides?.journalEntry?.details?.reversalLabel || "Reversal", isLoading: isLoadingEntry }, entryData?.reversal_id.substring(0, 5))
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React151.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React151.createElement(Card, null, /* @__PURE__ */ React151.createElement(
     Table,
     {
       componentName: "ledger-account__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ React152.createElement(TableHead, null, /* @__PURE__ */ React152.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React152.createElement(TableCell, null, stringOverrides?.lineItemsTable?.lineItemsColumnHeader || "Line items"), /* @__PURE__ */ React152.createElement(TableCell, null, stringOverrides?.lineItemsTable?.debitColumnHeader || "Debit"), /* @__PURE__ */ React152.createElement(TableCell, null, stringOverrides?.lineItemsTable?.creditColumnHeader || "Credit"))),
-    /* @__PURE__ */ React152.createElement(TableBody, null, entryData?.line_items?.map((item, index) => /* @__PURE__ */ React152.createElement(
+    /* @__PURE__ */ React151.createElement(TableHead, null, /* @__PURE__ */ React151.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React151.createElement(TableCell, null, stringOverrides?.lineItemsTable?.lineItemsColumnHeader || "Line items"), /* @__PURE__ */ React151.createElement(TableCell, null, stringOverrides?.lineItemsTable?.debitColumnHeader || "Debit"), /* @__PURE__ */ React151.createElement(TableCell, null, stringOverrides?.lineItemsTable?.creditColumnHeader || "Credit"))),
+    /* @__PURE__ */ React151.createElement(TableBody, null, entryData?.line_items?.map((item, index) => /* @__PURE__ */ React151.createElement(
       TableRow,
       {
         key: `ledger-line-item-${index}`,
         rowKey: `ledger-line-item-${index}`
       },
-      /* @__PURE__ */ React152.createElement(TableCell, null, item.account?.name || ""),
-      /* @__PURE__ */ React152.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React152.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
-      /* @__PURE__ */ React152.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React152.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
-    )), /* @__PURE__ */ React152.createElement(
+      /* @__PURE__ */ React151.createElement(TableCell, null, item.account?.name || ""),
+      /* @__PURE__ */ React151.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React151.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
+      /* @__PURE__ */ React151.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React151.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
+    )), /* @__PURE__ */ React151.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ React152.createElement(TableCell, { primary: true }, stringOverrides?.lineItemsTable?.totalRowHeader || "Total"),
-      /* @__PURE__ */ React152.createElement(TableCell, { isCurrency: true, primary: true }, totalDebit || 0),
-      /* @__PURE__ */ React152.createElement(TableCell, { isCurrency: true, primary: true }, totalCredit || 0)
+      /* @__PURE__ */ React151.createElement(TableCell, { primary: true }, stringOverrides?.lineItemsTable?.totalRowHeader || "Total"),
+      /* @__PURE__ */ React151.createElement(TableCell, { isCurrency: true, primary: true }, totalDebit || 0),
+      /* @__PURE__ */ React151.createElement(TableCell, { isCurrency: true, primary: true }, totalCredit || 0)
     ))
   ))) : null);
 };
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
-import React153, { useContext as useContext23, useEffect as useEffect35, useState as useState41 } from "react";
-import classNames53 from "classnames";
+import React152, { useContext as useContext23, useEffect as useEffect36, useState as useState40 } from "react";
+import classNames54 from "classnames";
 import { parseISO as parseISO14, format as formatTime10 } from "date-fns";
 var LedgerAccountRow = ({
   row,
@@ -13250,8 +13259,8 @@ var LedgerAccountRow = ({
   view
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext23(LedgerAccountsContext);
-  const [showComponent, setShowComponent] = useState41(false);
-  useEffect35(() => {
+  const [showComponent, setShowComponent] = useState40(false);
+  useEffect36(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -13262,10 +13271,10 @@ var LedgerAccountRow = ({
     }
   }, []);
   if (view === "tablet") {
-    return /* @__PURE__ */ React153.createElement(
+    return /* @__PURE__ */ React152.createElement(
       "tr",
       {
-        className: classNames53(
+        className: classNames54(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13281,24 +13290,24 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React153.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React153.createElement(
+      /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React152.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React152.createElement(
         Text,
         {
           weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
         row.entry_id.substring(0, 5)
-      )), /* @__PURE__ */ React153.createElement(Text, null, row.source?.display_description ?? ""))),
-      /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-      /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-      /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
+      )), /* @__PURE__ */ React152.createElement(Text, null, row.source?.display_description ?? ""))),
+      /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+      /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
     );
   }
   if (view === "mobile") {
-    return /* @__PURE__ */ React153.createElement(
+    return /* @__PURE__ */ React152.createElement(
       "tr",
       {
-        className: classNames53(
+        className: classNames54(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13314,20 +13323,20 @@ var LedgerAccountRow = ({
           }
         }
       },
-      /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React153.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React153.createElement(
+      /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__ledger-account-table__tablet-main-col" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger-account-table__tablet-main-col__date" }, /* @__PURE__ */ React152.createElement(Text, null, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT)), /* @__PURE__ */ React152.createElement(
         Text,
         {
           weight: "normal" /* normal */,
           className: "Layer__ledger_account-table__journal-id"
         },
         row.entry_id.substring(0, 5)
-      )), /* @__PURE__ */ React153.createElement(Text, null, row.source?.display_description ?? ""), /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ React153.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, `$${centsToDollars(row.running_balance)}`)))))
+      )), /* @__PURE__ */ React152.createElement(Text, null, row.source?.display_description ?? ""), /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger_account-table__balances-mobile" }, /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Debit"), /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, " ", row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Credit"), /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)), /* @__PURE__ */ React152.createElement("div", { className: "Layer__ledger_account-table__balance-item" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__label" }, "Running balance"), /* @__PURE__ */ React152.createElement("span", { className: "Layer__ledger_account-table__balances-mobile__value" }, `$${centsToDollars(row.running_balance)}`)))))
     );
   }
-  return /* @__PURE__ */ React153.createElement(
+  return /* @__PURE__ */ React152.createElement(
     "tr",
     {
-      className: classNames53(
+      className: classNames54(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -13343,25 +13352,25 @@ var LedgerAccountRow = ({
         }
       }
     },
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT))),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, row.entry_id.substring(0, 5))),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content" }, row.source?.display_description ?? "")),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
-    /* @__PURE__ */ React153.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React153.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime10(parseISO14(row.date), DATE_FORMAT))),
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content" }, row.entry_id.substring(0, 5))),
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content" }, row.source?.display_description ?? "")),
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "DEBIT" /* DEBIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, row.direction === "CREDIT" /* CREDIT */ && `$${centsToDollars(row?.amount || 0)}`)),
+    /* @__PURE__ */ React152.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React152.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, `$${centsToDollars(row.running_balance)}`))
   );
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-import classNames54 from "classnames";
+import classNames55 from "classnames";
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
   view,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState42(1);
-  const [initialLoad, setInitialLoad] = useState42(true);
+  const [currentPage, setCurrentPage] = useState41(1);
+  const [initialLoad, setInitialLoad] = useState41(true);
   const { data: accountData } = useContext24(ChartOfAccountsContext);
   const {
     data: rawData,
@@ -13374,7 +13383,7 @@ var LedgerAccount = ({
     closeSelectedEntry,
     refetch
   } = useContext24(LedgerAccountsContext);
-  useEffect36(() => {
+  useEffect37(() => {
     if (!isLoading) {
       const timeoutLoad = setTimeout(() => {
         setInitialLoad(false);
@@ -13382,7 +13391,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = classNames54(
+  const baseClassName = classNames55(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -13400,10 +13409,10 @@ var LedgerAccount = ({
     setAccountId(void 0);
     closeSelectedEntry();
   };
-  return /* @__PURE__ */ React154.createElement(
+  return /* @__PURE__ */ React153.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React154.createElement(
+      sidebar: /* @__PURE__ */ React153.createElement(
         LedgerAccountEntryDetails,
         {
           stringOverrides: stringOverrides?.ledgerEntryDetail
@@ -13413,21 +13422,21 @@ var LedgerAccount = ({
       parentRef: containerRef,
       className: "Layer__ledger-account__panel"
     },
-    /* @__PURE__ */ React154.createElement("div", { className: baseClassName }, /* @__PURE__ */ React154.createElement("div", { className: "Layer__ledger-account__header" }, /* @__PURE__ */ React154.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React154.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ React154.createElement(
+    /* @__PURE__ */ React153.createElement("div", { className: baseClassName }, /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account__header" }, /* @__PURE__ */ React153.createElement(BackButton, { onClick: close }), /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account__title-container" }, /* @__PURE__ */ React153.createElement(
       Text,
       {
         weight: "bold" /* bold */,
         className: "Layer__ledger-account__title"
       },
       entry?.name ?? ""
-    ), /* @__PURE__ */ React154.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ React154.createElement(
+    ), /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account__balance-container" }, /* @__PURE__ */ React153.createElement(
       Text,
       {
         className: "Layer__ledger-account__balance-label",
         size: "sm" /* sm */
       },
       "Current balance"
-    ), /* @__PURE__ */ React154.createElement(
+    ), /* @__PURE__ */ React153.createElement(
       Text,
       {
         className: "Layer__ledger-account__balance-value",
@@ -13435,7 +13444,7 @@ var LedgerAccount = ({
       },
       "$",
       centsToDollars(entry?.balance || 0)
-    )))), /* @__PURE__ */ React154.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ React154.createElement("thead", null, /* @__PURE__ */ React154.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ React154.createElement("th", null), view === "desktop" && /* @__PURE__ */ React154.createElement(React154.Fragment, null, /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.dateColumnHeader || "Date"), /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.journalIdColumnHeader || "Journal id #"), /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.sourceColumnHeader || "Source")), view !== "mobile" && /* @__PURE__ */ React154.createElement(React154.Fragment, null, /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.debitColumnHeader || "Debit"), /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.creditColumnHeader || "Credit"), /* @__PURE__ */ React154.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.runningBalanceColumnHeader || "Running balance")))), /* @__PURE__ */ React154.createElement("tbody", null, data?.map((x, index) => /* @__PURE__ */ React154.createElement(
+    )))), /* @__PURE__ */ React153.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__ledger-account-table" }, /* @__PURE__ */ React153.createElement("thead", null, /* @__PURE__ */ React153.createElement("tr", null, view !== "desktop" && /* @__PURE__ */ React153.createElement("th", null), view === "desktop" && /* @__PURE__ */ React153.createElement(React153.Fragment, null, /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.dateColumnHeader || "Date"), /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.journalIdColumnHeader || "Journal id #"), /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header" }, stringOverrides?.ledgerEntriesTable?.sourceColumnHeader || "Source")), view !== "mobile" && /* @__PURE__ */ React153.createElement(React153.Fragment, null, /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.debitColumnHeader || "Debit"), /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.creditColumnHeader || "Credit"), /* @__PURE__ */ React153.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.ledgerEntriesTable?.runningBalanceColumnHeader || "Running balance")))), /* @__PURE__ */ React153.createElement("tbody", null, data?.map((x, index) => /* @__PURE__ */ React153.createElement(
       LedgerAccountRow,
       {
         key: x.id,
@@ -13444,7 +13453,7 @@ var LedgerAccount = ({
         initialLoad,
         view
       }
-    )))), data && /* @__PURE__ */ React154.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ React154.createElement(
+    )))), data && /* @__PURE__ */ React153.createElement("div", { className: "Layer__ledger-account__pagination" }, /* @__PURE__ */ React153.createElement(
       Pagination,
       {
         currentPage,
@@ -13452,7 +13461,7 @@ var LedgerAccount = ({
         pageSize,
         onPageChange: (page) => setCurrentPage(page)
       }
-    )), error ? /* @__PURE__ */ React154.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React154.createElement(
+    )), error ? /* @__PURE__ */ React153.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React153.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -13461,7 +13470,7 @@ var LedgerAccount = ({
         onRefresh: () => refetch(),
         isLoading: isValidating || isLoading
       }
-    )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React154.createElement("div", { className: `Layer__ledger-account__loader-container` }, /* @__PURE__ */ React154.createElement(Loader2, null)) : null, !isLoading && !error && data?.length === 0 ? /* @__PURE__ */ React154.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React154.createElement(
+    )) : null, (!data || isLoading) && !error ? /* @__PURE__ */ React153.createElement("div", { className: `Layer__ledger-account__loader-container` }, /* @__PURE__ */ React153.createElement(Loader2, null)) : null, !isLoading && !error && data?.length === 0 ? /* @__PURE__ */ React153.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React153.createElement(
       DataState,
       {
         status: "info" /* info */,
@@ -13479,7 +13488,7 @@ var ChartOfAccounts = (props) => {
     withDates: props.withDateControl
   });
   const ledgerAccountsContextData = useLedgerAccounts();
-  return /* @__PURE__ */ React155.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ React155.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ React155.createElement(ChartOfAccountsContent, { ...props })));
+  return /* @__PURE__ */ React154.createElement(ChartOfAccountsContext.Provider, { value: chartOfAccountsContextData }, /* @__PURE__ */ React154.createElement(LedgerAccountsContext.Provider, { value: ledgerAccountsContextData }, /* @__PURE__ */ React154.createElement(ChartOfAccountsContent, { ...props })));
 };
 var ChartOfAccountsContent = ({
   asWidget,
@@ -13488,7 +13497,7 @@ var ChartOfAccountsContent = ({
   stringOverrides
 }) => {
   const { accountId } = useContext25(LedgerAccountsContext);
-  const [view, setView] = useState43("desktop");
+  const [view, setView] = useState42("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -13500,7 +13509,7 @@ var ChartOfAccountsContent = ({
       }
     }
   });
-  return /* @__PURE__ */ React155.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React155.createElement(LedgerAccount, { view, containerRef, stringOverrides: stringOverrides?.ledgerAccount }) : /* @__PURE__ */ React155.createElement(
+  return /* @__PURE__ */ React154.createElement(Container, { name: "chart-of-accounts", ref: containerRef, asWidget }, accountId ? /* @__PURE__ */ React154.createElement(LedgerAccount, { view, containerRef, stringOverrides: stringOverrides?.ledgerAccount }) : /* @__PURE__ */ React154.createElement(
     ChartOfAccountsTable,
     {
       asWidget,
@@ -13514,7 +13523,7 @@ var ChartOfAccountsContent = ({
 };
 
 // src/components/Journal/Journal.tsx
-import React162, { useState as useState47 } from "react";
+import React161, { useState as useState46 } from "react";
 
 // src/contexts/JournalContext/JournalContext.tsx
 import { createContext as createContext12 } from "react";
@@ -13551,7 +13560,7 @@ var JournalContext = createContext12({
 });
 
 // src/hooks/useJournal/useJournal.tsx
-import { useEffect as useEffect37, useState as useState44 } from "react";
+import { useEffect as useEffect38, useState as useState43 } from "react";
 
 // src/utils/journal.ts
 var getAccountIdentifierPayload = (journalLineItem) => {
@@ -13582,11 +13591,11 @@ var useJournal = () => {
     syncTimestamps,
     hasBeenTouched
   } = useLayerContext();
-  const [selectedEntryId, setSelectedEntryId] = useState44();
-  const [form, setForm] = useState44();
-  const [addingEntry, setAddingEntry] = useState44(false);
-  const [sendingForm, setSendingForm] = useState44(false);
-  const [apiError, setApiError] = useState44(void 0);
+  const [selectedEntryId, setSelectedEntryId] = useState43();
+  const [form, setForm] = useState43();
+  const [addingEntry, setAddingEntry] = useState43(false);
+  const [sendingForm, setSendingForm] = useState43(false);
+  const [apiError, setApiError] = useState43(void 0);
   const queryKey = businessId && auth?.access_token && `journal-lines-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR9(
     queryKey,
@@ -13812,12 +13821,12 @@ var useJournal = () => {
       }
     });
   };
-  useEffect37(() => {
+  useEffect38(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("JOURNAL" /* JOURNAL */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect37(() => {
+  useEffect38(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -13848,11 +13857,11 @@ var useJournal = () => {
 };
 
 // src/components/JournalTable/JournalTable.tsx
-import React161, { useContext as useContext31, useMemo as useMemo17, useState as useState46 } from "react";
+import React160, { useContext as useContext31, useMemo as useMemo17, useState as useState45 } from "react";
 
 // src/components/JournalRow/JournalRow.tsx
-import React156, { useContext as useContext26, useEffect as useEffect38, useState as useState45 } from "react";
-import classNames55 from "classnames";
+import React155, { useContext as useContext26, useEffect as useEffect39, useState as useState44 } from "react";
+import classNames56 from "classnames";
 import { parseISO as parseISO15, format as formatTime11 } from "date-fns";
 var INDENTATION2 = 24;
 var EXPANDED_STYLE3 = {
@@ -13890,7 +13899,7 @@ var JournalRow = ({
   selectedEntries = false
 }) => {
   const { selectedEntryId, setSelectedEntryId, closeSelectedEntry } = useContext26(JournalContext);
-  const [isOpen, setIsOpen] = useState45(index === 0 ? true : defaultOpen);
+  const [isOpen, setIsOpen] = useState44(index === 0 ? true : defaultOpen);
   const style = expanded ? {
     ...EXPANDED_STYLE3,
     transitionDelay: `${15 * index}ms`
@@ -13898,8 +13907,8 @@ var JournalRow = ({
     ...COLLAPSED_STYLE3,
     transitionDelay: `${lineItemsLength - 15 * index}ms`
   };
-  const [showComponent, setShowComponent] = useState45(false);
-  const baseClass = classNames55(
+  const [showComponent, setShowComponent] = useState44(false);
+  const baseClass = classNames56(
     "Layer__journal-table-row",
     rowId(row) === selectedEntryId && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -13907,7 +13916,7 @@ var JournalRow = ({
     showComponent ? "show" : "Layer__table-row--anim-starting-state",
     isOpen && "Layer__journal__table-row--expanded"
   );
-  const journalEntryLineClass = classNames55(
+  const journalEntryLineClass = classNames56(
     "Layer__journal-entry-table-row",
     selectedEntries && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -13916,7 +13925,7 @@ var JournalRow = ({
     "Layer__journal-line__table-row",
     !expanded && "Layer__table-row--hidden"
   );
-  useEffect38(() => {
+  useEffect39(() => {
     if (initialLoad) {
       const timeoutId = setTimeout(() => {
         setShowComponent(true);
@@ -13927,7 +13936,7 @@ var JournalRow = ({
     }
   }, []);
   if ("line_items" in row) {
-    return /* @__PURE__ */ React156.createElement(React156.Fragment, null, /* @__PURE__ */ React156.createElement(
+    return /* @__PURE__ */ React155.createElement(React155.Fragment, null, /* @__PURE__ */ React155.createElement(
       "tr",
       {
         className: baseClass,
@@ -13941,7 +13950,7 @@ var JournalRow = ({
           }
         }
       },
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell Layer__journal__arrow" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React156.createElement(
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell Layer__journal__arrow" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content" }, /* @__PURE__ */ React155.createElement(
         "span",
         {
           className: "Layer__table-cell-content-indentation",
@@ -13954,7 +13963,7 @@ var JournalRow = ({
             setIsOpen(!isOpen);
           }
         },
-        row.line_items && row.line_items.length > 0 && /* @__PURE__ */ React156.createElement(
+        row.line_items && row.line_items.length > 0 && /* @__PURE__ */ React155.createElement(
           ChevronDownFill_default,
           {
             size: 16,
@@ -13965,21 +13974,21 @@ var JournalRow = ({
           }
         )
       ))),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, row.id.substring(0, 5))),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO15(row.date), DATE_FORMAT))),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, humanizeEnum(row.entry_type))),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content" }, `(${row.line_items.length})`)),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content" }, row.id.substring(0, 5))),
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content" }, row.date && formatTime11(parseISO15(row.date), DATE_FORMAT))),
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content" }, humanizeEnum(row.entry_type))),
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content" }, `(${row.line_items.length})`)),
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
         Math.abs(
           row.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
         )
       ))),
-      /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
+      /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content Layer__table-cell--amount" }, "$", centsToDollars(
         Math.abs(
           row.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0)
         )
       )))
-    ), (row.line_items || []).map((lineItem, idx) => /* @__PURE__ */ React156.createElement(
+    ), (row.line_items || []).map((lineItem, idx) => /* @__PURE__ */ React155.createElement(
       JournalRow,
       {
         key: `${row.id}-${idx}`,
@@ -13994,18 +14003,18 @@ var JournalRow = ({
       }
     )));
   }
-  return /* @__PURE__ */ React156.createElement(
+  return /* @__PURE__ */ React155.createElement(
     "tr",
     {
       className: journalEntryLineClass,
       style: { transitionDelay: `${15 * index}ms` }
     },
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content", style })),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-hidden" }, rowId(row).substring(0, 5)))),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React156.createElement("span", { className: "Layer__table-cell-content", style }, accountName(row))),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "DEBIT" && /* @__PURE__ */ React156.createElement(
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content", style })),
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content", style }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-hidden" }, rowId(row).substring(0, 5)))),
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }),
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }),
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell" }, /* @__PURE__ */ React155.createElement("span", { className: "Layer__table-cell-content", style }, accountName(row))),
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "DEBIT" && /* @__PURE__ */ React155.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__table-cell--amount",
@@ -14014,7 +14023,7 @@ var JournalRow = ({
       "$",
       centsToDollars(Math.abs(row.amount))
     )),
-    /* @__PURE__ */ React156.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "CREDIT" && /* @__PURE__ */ React156.createElement(
+    /* @__PURE__ */ React155.createElement("td", { className: "Layer__table-cell Layer__table-cell--primary" }, row.direction === "CREDIT" && /* @__PURE__ */ React155.createElement(
       "span",
       {
         className: "Layer__table-cell-content Layer__table-cell--amount",
@@ -14027,10 +14036,10 @@ var JournalRow = ({
 };
 
 // src/components/JournalSidebar/JournalSidebar.tsx
-import React160, { useContext as useContext30 } from "react";
+import React159, { useContext as useContext30 } from "react";
 
 // src/components/JournalEntryDetails/JournalEntryDetails.tsx
-import React157, { useContext as useContext27, useMemo as useMemo16 } from "react";
+import React156, { useContext as useContext27, useMemo as useMemo16 } from "react";
 var JournalEntryDetails = () => {
   const {
     data,
@@ -14045,14 +14054,14 @@ var JournalEntryDetails = () => {
     }
     return;
   }, [data, selectedEntryId]);
-  return /* @__PURE__ */ React157.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React157.createElement(
+  return /* @__PURE__ */ React156.createElement("div", { className: "Layer__journal__entry-details" }, /* @__PURE__ */ React156.createElement(
     DetailsList,
     {
       title: "Transaction source",
-      actions: /* @__PURE__ */ React157.createElement(
+      actions: /* @__PURE__ */ React156.createElement(
         Button,
         {
-          rightIcon: /* @__PURE__ */ React157.createElement(X_default, null),
+          rightIcon: /* @__PURE__ */ React156.createElement(X_default, null),
           iconOnly: true,
           onClick: closeSelectedEntry,
           className: "Layer__details-list__close-btn",
@@ -14060,54 +14069,54 @@ var JournalEntryDetails = () => {
         }
       )
     },
-    /* @__PURE__ */ React157.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React157.createElement(Badge, null, entry?.source?.entity_name)),
-    entry?.source?.display_description && /* @__PURE__ */ React157.createElement(SourceDetailView, { source: entry?.source })
-  ), /* @__PURE__ */ React157.createElement(
+    /* @__PURE__ */ React156.createElement(DetailsListItem, { label: "Source", isLoading: isLoadingEntry }, /* @__PURE__ */ React156.createElement(Badge, null, entry?.source?.entity_name)),
+    entry?.source?.display_description && /* @__PURE__ */ React156.createElement(SourceDetailView, { source: entry?.source })
+  ), /* @__PURE__ */ React156.createElement(
     DetailsList,
     {
       title: `Journal Entry ${entry?.id.substring(0, 5)}`,
       className: "Layer__border-top"
     },
-    /* @__PURE__ */ React157.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
-    /* @__PURE__ */ React157.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ React157.createElement(DateTime, { value: entry?.entry_at })),
-    /* @__PURE__ */ React157.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ React157.createElement(DateTime, { value: entry?.date })),
-    entry?.reversal_id && /* @__PURE__ */ React157.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
-  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React157.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React157.createElement(Card, null, /* @__PURE__ */ React157.createElement(
+    /* @__PURE__ */ React156.createElement(DetailsListItem, { label: "Entry type", isLoading: isLoadingEntry }, humanizeEnum(entry?.entry_type ?? "")),
+    /* @__PURE__ */ React156.createElement(DetailsListItem, { label: "Date", isLoading: isLoadingEntry }, entry?.entry_at && /* @__PURE__ */ React156.createElement(DateTime, { value: entry?.entry_at })),
+    /* @__PURE__ */ React156.createElement(DetailsListItem, { label: "Creation date", isLoading: isLoadingEntry }, entry?.date && /* @__PURE__ */ React156.createElement(DateTime, { value: entry?.date })),
+    entry?.reversal_id && /* @__PURE__ */ React156.createElement(DetailsListItem, { label: "Reversal", isLoading: isLoadingEntry }, "Journal Entry #", entry?.reversal_id)
+  ), !isLoadingEntry && !errorEntry ? /* @__PURE__ */ React156.createElement("div", { className: "Layer__ledger-account__entry-details__line-items" }, /* @__PURE__ */ React156.createElement(Card, null, /* @__PURE__ */ React156.createElement(
     Table,
     {
       componentName: "ledger-account__entry-details",
       borderCollapse: "collapse"
     },
-    /* @__PURE__ */ React157.createElement(TableHead, null, /* @__PURE__ */ React157.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React157.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ React157.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ React157.createElement(TableCell, null, "Debit"), /* @__PURE__ */ React157.createElement(TableCell, null, "Credit"))),
-    /* @__PURE__ */ React157.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ React157.createElement(
+    /* @__PURE__ */ React156.createElement(TableHead, null, /* @__PURE__ */ React156.createElement(TableRow, { rowKey: "soc-flow-head-row", isHeadRow: true }, /* @__PURE__ */ React156.createElement(TableCell, null, "Line items"), [...Array(3)].map((_, index) => /* @__PURE__ */ React156.createElement(TableCell, { key: `ledger-empty-cell-${index}` })), /* @__PURE__ */ React156.createElement(TableCell, null, "Debit"), /* @__PURE__ */ React156.createElement(TableCell, null, "Credit"))),
+    /* @__PURE__ */ React156.createElement(TableBody, null, entry?.line_items?.map((item, index) => /* @__PURE__ */ React156.createElement(
       TableRow,
       {
         key: `ledger-line-item-${index}`,
         rowKey: `ledger-line-item-${index}`
       },
-      /* @__PURE__ */ React157.createElement(TableCell, null, item.account_identifier?.name || ""),
-      [...Array(3)].map((_, index2) => /* @__PURE__ */ React157.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
-      /* @__PURE__ */ React157.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React157.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
-      /* @__PURE__ */ React157.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React157.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
-    )), /* @__PURE__ */ React157.createElement(
+      /* @__PURE__ */ React156.createElement(TableCell, null, item.account_identifier?.name || ""),
+      [...Array(3)].map((_, index2) => /* @__PURE__ */ React156.createElement(TableCell, { key: `ledger-empty-cell-${index2}` })),
+      /* @__PURE__ */ React156.createElement(TableCell, null, item.direction === "DEBIT" /* DEBIT */ && /* @__PURE__ */ React156.createElement(Badge, { variant: "warning" /* WARNING */ }, "$", centsToDollars(item.amount || 0))),
+      /* @__PURE__ */ React156.createElement(TableCell, null, item.direction === "CREDIT" /* CREDIT */ && /* @__PURE__ */ React156.createElement(Badge, { variant: "success" /* SUCCESS */ }, "$", centsToDollars(item.amount || 0)))
+    )), /* @__PURE__ */ React156.createElement(
       TableRow,
       {
         rowKey: "ledger-line-item-summation",
         variant: "summation"
       },
-      /* @__PURE__ */ React157.createElement(TableCell, { primary: true }, "Total"),
-      [...Array(3)].map((_, index) => /* @__PURE__ */ React157.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
-      /* @__PURE__ */ React157.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0),
-      /* @__PURE__ */ React157.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0)
+      /* @__PURE__ */ React156.createElement(TableCell, { primary: true }, "Total"),
+      [...Array(3)].map((_, index) => /* @__PURE__ */ React156.createElement(TableCell, { key: `ledger-empty-cell-${index}` })),
+      /* @__PURE__ */ React156.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "DEBIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0),
+      /* @__PURE__ */ React156.createElement(TableCell, { isCurrency: true, primary: true }, entry?.line_items.filter((item) => item.direction === "CREDIT").map((item) => item.amount).reduce((a, b) => a + b, 0) || 0)
     ))
   ))) : null);
 };
 
 // src/components/JournalForm/JournalForm.tsx
-import React159, { useContext as useContext29 } from "react";
+import React158, { useContext as useContext29 } from "react";
 
 // src/components/JournalForm/JournalFormEntryLines.tsx
-import React158, { useContext as useContext28 } from "react";
+import React157, { useContext as useContext28 } from "react";
 var JournalFormEntryLines = ({
   entrylineItems,
   addEntryLine,
@@ -14119,14 +14128,14 @@ var JournalFormEntryLines = ({
   const { data: accountsData } = useContext28(ChartOfAccountsContext);
   const { form } = useContext28(JournalContext);
   const parentOptions = useParentOptions(accountsData);
-  return /* @__PURE__ */ React158.createElement(React158.Fragment, null, Object.keys(Direction).map((direction, idx) => {
-    return /* @__PURE__ */ React158.createElement(
+  return /* @__PURE__ */ React157.createElement(React157.Fragment, null, Object.keys(Direction).map((direction, idx) => {
+    return /* @__PURE__ */ React157.createElement(
       "div",
       {
         key: "Layer__journal__form__input-group-" + idx,
         className: "Layer__journal__form__input-group Layer__journal__form__input-group__border"
       },
-      /* @__PURE__ */ React158.createElement(
+      /* @__PURE__ */ React157.createElement(
         Text,
         {
           className: "Layer__journal__form__input-group__title",
@@ -14140,13 +14149,13 @@ var JournalFormEntryLines = ({
         if (item.direction !== direction) {
           return null;
         }
-        return /* @__PURE__ */ React158.createElement(
+        return /* @__PURE__ */ React157.createElement(
           "div",
           {
             className: "Layer__journal__form__input-group__line-item",
             key: direction + "-" + idx2
           },
-          /* @__PURE__ */ React158.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React158.createElement(
+          /* @__PURE__ */ React157.createElement(InputGroup, { name: direction, label: "Amount", inline: true }, /* @__PURE__ */ React157.createElement(
             InputWithBadge,
             {
               name: direction,
@@ -14172,14 +14181,14 @@ var JournalFormEntryLines = ({
               )?.message
             }
           )),
-          /* @__PURE__ */ React158.createElement(
+          /* @__PURE__ */ React157.createElement(
             InputGroup,
             {
               name: "account-name",
               label: "Account name",
               inline: true
             },
-            /* @__PURE__ */ React158.createElement(
+            /* @__PURE__ */ React157.createElement(
               Select2,
               {
                 options: parentOptions,
@@ -14203,18 +14212,18 @@ var JournalFormEntryLines = ({
                 )?.message
               }
             ),
-            idx2 >= 2 && /* @__PURE__ */ React158.createElement(
+            idx2 >= 2 && /* @__PURE__ */ React157.createElement(
               IconButton,
               {
                 className: "Layer__remove__button",
                 onClick: () => removeEntryLine(idx2),
-                icon: /* @__PURE__ */ React158.createElement(Trash_default, null)
+                icon: /* @__PURE__ */ React157.createElement(Trash_default, null)
               }
             )
           )
         );
       }),
-      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ React158.createElement(
+      (config.form.addEntryLinesLimit === void 0 || config.form.addEntryLinesLimit > entrylineItems?.length) && /* @__PURE__ */ React157.createElement(
         TextButton,
         {
           className: "Layer__journal__add-entry-line",
@@ -14238,7 +14247,7 @@ var JournalForm = ({ config, stringOverrides }) => {
     addEntryLine,
     removeEntryLine
   } = useContext29(JournalContext);
-  return /* @__PURE__ */ React159.createElement(
+  return /* @__PURE__ */ React158.createElement(
     "form",
     {
       className: "Layer__form",
@@ -14247,7 +14256,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         submitForm();
       }
     },
-    /* @__PURE__ */ React159.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React159.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ React159.createElement("div", { className: "actions" }, /* @__PURE__ */ React159.createElement(
+    /* @__PURE__ */ React158.createElement("div", { className: "Layer__journal__sidebar__header" }, /* @__PURE__ */ React158.createElement(Text, { size: "lg" /* lg */, weight: "bold" /* bold */, className: "title" }, stringOverrides?.header && "Add New Entry"), /* @__PURE__ */ React158.createElement("div", { className: "actions" }, /* @__PURE__ */ React158.createElement(
       Button,
       {
         type: "button",
@@ -14256,7 +14265,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React159.createElement(
+    ), apiError && /* @__PURE__ */ React158.createElement(
       RetryButton,
       {
         type: "submit",
@@ -14265,7 +14274,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React159.createElement(
+    ), !apiError && /* @__PURE__ */ React158.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -14275,7 +14284,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       stringOverrides?.saveButton || "Save"
     ))),
-    apiError && /* @__PURE__ */ React159.createElement(
+    apiError && /* @__PURE__ */ React158.createElement(
       Text,
       {
         size: "sm" /* sm */,
@@ -14283,7 +14292,7 @@ var JournalForm = ({ config, stringOverrides }) => {
       },
       apiError
     ),
-    /* @__PURE__ */ React159.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React159.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ React159.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React159.createElement(
+    /* @__PURE__ */ React158.createElement("div", { className: "Layer__journal__form__input-group" }, /* @__PURE__ */ React158.createElement(InputGroup, { name: "date", label: "Date", inline: true }, /* @__PURE__ */ React158.createElement("div", { className: "Layer__journal__datepicker__wrapper" }, /* @__PURE__ */ React158.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -14296,7 +14305,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         placeholderText: "Select date",
         currentDateOption: false
       }
-    ), /* @__PURE__ */ React159.createElement(
+    ), /* @__PURE__ */ React158.createElement(
       DatePicker,
       {
         selected: form?.data.entry_at ? new Date(form?.data.entry_at) : /* @__PURE__ */ new Date(),
@@ -14310,7 +14319,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         currentDateOption: false
       }
     )))),
-    /* @__PURE__ */ React159.createElement(
+    /* @__PURE__ */ React158.createElement(
       JournalFormEntryLines,
       {
         entrylineItems: form?.data.line_items || [],
@@ -14321,7 +14330,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         config
       }
     ),
-    /* @__PURE__ */ React159.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React159.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React159.createElement(
+    /* @__PURE__ */ React158.createElement("div", { className: "Layer__journal__form__input-group Layer__journal__form__input-group__textarea" }, /* @__PURE__ */ React158.createElement(InputGroup, { name: "memo", label: "Notes" }, /* @__PURE__ */ React158.createElement(
       Textarea,
       {
         name: "memo",
@@ -14331,7 +14340,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       }
     ))),
-    /* @__PURE__ */ React159.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React159.createElement(
+    /* @__PURE__ */ React158.createElement("div", { className: "Layer__journal__bottom-actions" }, /* @__PURE__ */ React158.createElement(
       Button,
       {
         type: "button",
@@ -14340,7 +14349,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.cancelButton || "Cancel"
-    ), apiError && /* @__PURE__ */ React159.createElement(
+    ), apiError && /* @__PURE__ */ React158.createElement(
       RetryButton,
       {
         type: "submit",
@@ -14349,7 +14358,7 @@ var JournalForm = ({ config, stringOverrides }) => {
         disabled: sendingForm
       },
       stringOverrides?.retryButton || "Retry"
-    ), !apiError && /* @__PURE__ */ React159.createElement(
+    ), !apiError && /* @__PURE__ */ React158.createElement(
       SubmitButton,
       {
         type: "submit",
@@ -14370,9 +14379,9 @@ var JournalSidebar = ({
 }) => {
   const { selectedEntryId } = useContext30(JournalContext);
   if (selectedEntryId !== "new") {
-    return /* @__PURE__ */ React160.createElement(JournalEntryDetails, null);
+    return /* @__PURE__ */ React159.createElement(JournalEntryDetails, null);
   }
-  return /* @__PURE__ */ React160.createElement(JournalForm, { config, stringOverrides });
+  return /* @__PURE__ */ React159.createElement(JournalForm, { config, stringOverrides });
 };
 
 // src/components/JournalTable/JournalTable.tsx
@@ -14384,7 +14393,7 @@ var JournalTable = ({
   config,
   stringOverrides
 }) => {
-  const [currentPage, setCurrentPage] = useState46(1);
+  const [currentPage, setCurrentPage] = useState45(1);
   const {
     data: rawData,
     isLoading,
@@ -14399,16 +14408,16 @@ var JournalTable = ({
     const lastPageIndex = firstPageIndex + pageSize;
     return rawData?.sort((a, b) => Date.parse(b.date) - Date.parse(a.date))?.slice(firstPageIndex, lastPageIndex);
   }, [rawData, currentPage]);
-  return /* @__PURE__ */ React161.createElement(
+  return /* @__PURE__ */ React160.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React161.createElement(JournalSidebar, { parentRef: containerRef, config, stringOverrides: stringOverrides?.journalForm }),
+      sidebar: /* @__PURE__ */ React160.createElement(JournalSidebar, { parentRef: containerRef, config, stringOverrides: stringOverrides?.journalForm }),
       sidebarIsOpen: Boolean(selectedEntryId),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React161.createElement(Header, { className: `Layer__${COMPONENT_NAME6}__header` }, /* @__PURE__ */ React161.createElement(Heading, { className: `Layer__${COMPONENT_NAME6}__title` }, stringOverrides?.componentTitle || "Journal"), /* @__PURE__ */ React161.createElement("div", { className: `Layer__${COMPONENT_NAME6}__actions` }, /* @__PURE__ */ React161.createElement(Button, { onClick: () => addEntry(), disabled: isLoading }, stringOverrides?.addEntryButton || "Add Entry"))),
-    /* @__PURE__ */ React161.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__journal__table" }, /* @__PURE__ */ React161.createElement("thead", null, /* @__PURE__ */ React161.createElement("tr", null, /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header" }), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header" }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header" }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header" }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header" }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ React161.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ React161.createElement("tbody", null, !error && data?.map((entry, idx) => {
-      return /* @__PURE__ */ React161.createElement(
+    /* @__PURE__ */ React160.createElement(Header, { className: `Layer__${COMPONENT_NAME6}__header` }, /* @__PURE__ */ React160.createElement(Heading, { className: `Layer__${COMPONENT_NAME6}__title` }, stringOverrides?.componentTitle || "Journal"), /* @__PURE__ */ React160.createElement("div", { className: `Layer__${COMPONENT_NAME6}__actions` }, /* @__PURE__ */ React160.createElement(Button, { onClick: () => addEntry(), disabled: isLoading }, stringOverrides?.addEntryButton || "Add Entry"))),
+    /* @__PURE__ */ React160.createElement("table", { className: "Layer__table Layer__table--hover-effect Layer__journal__table" }, /* @__PURE__ */ React160.createElement("thead", null, /* @__PURE__ */ React160.createElement("tr", null, /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header" }), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header" }, stringOverrides?.idColumnHeader || "Id"), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header" }, stringOverrides?.dateColumnHeader || "Date"), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header" }, stringOverrides?.transactionColumnHeader || "Transaction"), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header" }, stringOverrides?.accountColumnHeader || "Account"), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.debitColumnHeader || "Debit"), /* @__PURE__ */ React160.createElement("th", { className: "Layer__table-header Layer__table-cell--amount" }, stringOverrides?.creditColumnHeader || "Credit"))), /* @__PURE__ */ React160.createElement("tbody", null, !error && data?.map((entry, idx) => {
+      return /* @__PURE__ */ React160.createElement(
         JournalRow,
         {
           key: "journal-row-" + idx + entry.id,
@@ -14418,7 +14427,7 @@ var JournalTable = ({
         }
       );
     }))),
-    data && /* @__PURE__ */ React161.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ React161.createElement(
+    data && /* @__PURE__ */ React160.createElement("div", { className: "Layer__journal__pagination" }, /* @__PURE__ */ React160.createElement(
       Pagination,
       {
         currentPage,
@@ -14427,7 +14436,7 @@ var JournalTable = ({
         onPageChange: (page) => setCurrentPage(page)
       }
     )),
-    error ? /* @__PURE__ */ React161.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React161.createElement(
+    error ? /* @__PURE__ */ React160.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React160.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -14437,7 +14446,7 @@ var JournalTable = ({
         isLoading: isValidating || isLoading
       }
     )) : null,
-    (!data || isLoading) && !error ? /* @__PURE__ */ React161.createElement("div", { className: `Layer__${COMPONENT_NAME6}__loader-container` }, /* @__PURE__ */ React161.createElement(Loader2, null)) : null
+    (!data || isLoading) && !error ? /* @__PURE__ */ React160.createElement("div", { className: `Layer__${COMPONENT_NAME6}__loader-container` }, /* @__PURE__ */ React160.createElement(Loader2, null)) : null
   );
 };
 
@@ -14450,14 +14459,14 @@ var JOURNAL_CONFIG = {
 var Journal = (props) => {
   const JournalContextData = useJournal();
   const AccountsContextData = useChartOfAccounts();
-  return /* @__PURE__ */ React162.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React162.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React162.createElement(TableProvider, null, /* @__PURE__ */ React162.createElement(JournalContent, { ...props }))));
+  return /* @__PURE__ */ React161.createElement(ChartOfAccountsContext.Provider, { value: AccountsContextData }, /* @__PURE__ */ React161.createElement(JournalContext.Provider, { value: JournalContextData }, /* @__PURE__ */ React161.createElement(TableProvider, null, /* @__PURE__ */ React161.createElement(JournalContent, { ...props }))));
 };
 var JournalContent = ({
   asWidget,
   config = JOURNAL_CONFIG,
   stringOverrides
 }) => {
-  const [view, setView] = useState47("desktop");
+  const [view, setView] = useState46("desktop");
   const containerRef = useElementSize((_a, _b, { width }) => {
     if (width) {
       if (width >= BREAKPOINTS.TABLET && view !== "desktop") {
@@ -14469,7 +14478,7 @@ var JournalContent = ({
       }
     }
   });
-  return /* @__PURE__ */ React162.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ React162.createElement(
+  return /* @__PURE__ */ React161.createElement(Container, { name: "journal", ref: containerRef, asWidget }, /* @__PURE__ */ React161.createElement(
     JournalTable,
     {
       view,
@@ -14481,12 +14490,12 @@ var JournalContent = ({
 };
 
 // src/components/Tasks/Tasks.tsx
-import React169, {
+import React168, {
   createContext as createContext14,
   useContext as useContext36,
-  useEffect as useEffect42,
+  useEffect as useEffect43,
   useMemo as useMemo19,
-  useState as useState51
+  useState as useState50
 } from "react";
 
 // src/contexts/TasksContext/TasksContext.tsx
@@ -14503,10 +14512,10 @@ var TasksContext = createContext13({
 });
 
 // src/hooks/useTasks/useTasks.tsx
-import { useEffect as useEffect39, useState as useState48 } from "react";
+import { useEffect as useEffect40, useState as useState47 } from "react";
 import useSWR10 from "swr";
 var useTasks = () => {
-  const [loadedStatus, setLoadedStatus] = useState48("initial");
+  const [loadedStatus, setLoadedStatus] = useState47("initial");
   const { auth, businessId, apiUrl, read, syncTimestamps, hasBeenTouched } = useLayerContext();
   const queryKey = businessId && auth?.access_token && `tasks-${businessId}`;
   const { data, isLoading, isValidating, error, mutate } = useSWR10(
@@ -14515,7 +14524,7 @@ var useTasks = () => {
       params: { businessId }
     })
   );
-  useEffect39(() => {
+  useEffect40(() => {
     if (isLoading && loadedStatus === "initial") {
       setLoadedStatus("loading");
     } else if (!isLoading && loadedStatus === "loading") {
@@ -14535,12 +14544,12 @@ var useTasks = () => {
       body: data2
     }).then(() => refetch());
   };
-  useEffect39(() => {
+  useEffect40(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("TASKS" /* TASKS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -14563,11 +14572,11 @@ function isComplete(taskType) {
 }
 
 // src/components/TasksHeader/TasksHeader.tsx
-import React164, { useContext as useContext32 } from "react";
+import React163, { useContext as useContext32 } from "react";
 
 // src/icons/ProgressIcon.tsx
-import * as React163 from "react";
-var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createElement(
+import * as React162 from "react";
+var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React162.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14577,7 +14586,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
     width: size,
     height: size
   },
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M9 1.5V4.5",
@@ -14586,7 +14595,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M9 13.5V16.5",
@@ -14595,7 +14604,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M3.6975 3.6975L5.82 5.82",
@@ -14604,7 +14613,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M12.18 12.18L14.3025 14.3025",
@@ -14613,7 +14622,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M1.5 9H4.5",
@@ -14622,7 +14631,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M13.5 9H16.5",
@@ -14631,7 +14640,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M3.6975 14.3025L5.82 12.18",
@@ -14640,7 +14649,7 @@ var ProgressIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React163.createE
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React163.createElement(
+  /* @__PURE__ */ React162.createElement(
     "path",
     {
       d: "M12.18 5.82L14.3025 3.6975",
@@ -14655,22 +14664,22 @@ var ProgressIcon_default = ProgressIcon;
 // src/components/TasksHeader/TasksHeader.tsx
 var ICONS = {
   loading: {
-    icon: /* @__PURE__ */ React164.createElement(ProgressIcon_default, { size: 12, className: "Layer__anim--rotating" }),
+    icon: /* @__PURE__ */ React163.createElement(ProgressIcon_default, { size: 12, className: "Layer__anim--rotating" }),
     text: "Loading",
     badge: "default" /* DEFAULT */
   },
   done: {
-    icon: /* @__PURE__ */ React164.createElement(Check_default, { size: 12 }),
+    icon: /* @__PURE__ */ React163.createElement(Check_default, { size: 12 }),
     text: "Done",
     badge: "success" /* SUCCESS */
   },
   pending: {
-    icon: /* @__PURE__ */ React164.createElement(AlertCircle_default, { size: 12 }),
+    icon: /* @__PURE__ */ React163.createElement(AlertCircle_default, { size: 12 }),
     text: "In progress",
     badge: "warning" /* WARNING */
   },
   refresh: {
-    icon: /* @__PURE__ */ React164.createElement(RefreshCcw_default, { size: 12 }),
+    icon: /* @__PURE__ */ React163.createElement(RefreshCcw_default, { size: 12 }),
     text: "Refresh",
     badge: "default" /* DEFAULT */
   }
@@ -14684,7 +14693,7 @@ var TasksHeader = ({
   const { data: tasks, loadedStatus, refetch, error } = useContext32(TasksContext);
   const completedTasks = tasks?.filter((task) => isComplete(task.status)).length;
   const badgeVariant = completedTasks === tasks?.length ? ICONS.done : ICONS.pending;
-  return /* @__PURE__ */ React164.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React164.createElement("div", { className: "Layer__tasks-header__left-col" }, /* @__PURE__ */ React164.createElement(Text, { size: "lg" /* lg */ }, tasksHeader), loadedStatus !== "complete" && !open ? /* @__PURE__ */ React164.createElement(Badge, { variant: ICONS.loading.badge, icon: ICONS.loading.icon }, ICONS.loading.text) : loadedStatus === "complete" && (!tasks || error) ? /* @__PURE__ */ React164.createElement(
+  return /* @__PURE__ */ React163.createElement("div", { className: "Layer__tasks-header" }, /* @__PURE__ */ React163.createElement("div", { className: "Layer__tasks-header__left-col" }, /* @__PURE__ */ React163.createElement(Text, { size: "lg" /* lg */ }, tasksHeader), loadedStatus !== "complete" && !open ? /* @__PURE__ */ React163.createElement(Badge, { variant: ICONS.loading.badge, icon: ICONS.loading.icon }, ICONS.loading.text) : loadedStatus === "complete" && (!tasks || error) ? /* @__PURE__ */ React163.createElement(
     Badge,
     {
       onClick: () => refetch(),
@@ -14692,15 +14701,15 @@ var TasksHeader = ({
       icon: ICONS.refresh.icon
     },
     ICONS.refresh.text
-  ) : loadedStatus === "complete" ? /* @__PURE__ */ React164.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text) : open ? null : /* @__PURE__ */ React164.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text)), collapsable && /* @__PURE__ */ React164.createElement(ExpandButton, { onClick: toggleContent, collapsed: !open }));
+  ) : loadedStatus === "complete" ? /* @__PURE__ */ React163.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text) : open ? null : /* @__PURE__ */ React163.createElement(Badge, { variant: badgeVariant.badge, icon: badgeVariant.icon }, badgeVariant.text)), collapsable && /* @__PURE__ */ React163.createElement(ExpandButton, { onClick: toggleContent, collapsed: !open }));
 };
 
 // src/components/TasksList/TasksList.tsx
-import React167, { useContext as useContext34, useMemo as useMemo18, useState as useState50 } from "react";
+import React166, { useContext as useContext34, useMemo as useMemo18, useState as useState49 } from "react";
 
 // src/icons/SmileIcon.tsx
-import * as React165 from "react";
-var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElement(
+import * as React164 from "react";
+var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React164.createElement(
   "svg",
   {
     viewBox: "0 0 12 12",
@@ -14710,7 +14719,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
     width: size,
     height: size
   },
-  /* @__PURE__ */ React165.createElement(
+  /* @__PURE__ */ React164.createElement(
     "path",
     {
       d: "M6.5 11.5C9.26142 11.5 11.5 9.26142 11.5 6.5C11.5 3.73858 9.26142 1.5 6.5 1.5C3.73858 1.5 1.5 3.73858 1.5 6.5C1.5 9.26142 3.73858 11.5 6.5 11.5Z",
@@ -14719,7 +14728,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React165.createElement(
+  /* @__PURE__ */ React164.createElement(
     "path",
     {
       d: "M4.5 7.5C4.5 7.5 5.25 8.5 6.5 8.5C7.75 8.5 8.5 7.5 8.5 7.5",
@@ -14728,7 +14737,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React165.createElement(
+  /* @__PURE__ */ React164.createElement(
     "path",
     {
       d: "M5 5H5.005",
@@ -14737,7 +14746,7 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ React165.createElement(
+  /* @__PURE__ */ React164.createElement(
     "path",
     {
       d: "M8 5H8.005",
@@ -14750,40 +14759,40 @@ var SmileIcon = ({ size = 12, ...props }) => /* @__PURE__ */ React165.createElem
 var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
-import React166, { useContext as useContext33, useEffect as useEffect40, useState as useState49 } from "react";
-import classNames56 from "classnames";
+import React165, { useContext as useContext33, useEffect as useEffect41, useState as useState48 } from "react";
+import classNames57 from "classnames";
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
   defaultOpen
 }) => {
-  const [isOpen, setIsOpen] = useState49(defaultOpen);
-  const [userResponse, setUserResponse] = useState49(task.user_response || "");
+  const [isOpen, setIsOpen] = useState48(defaultOpen);
+  const [userResponse, setUserResponse] = useState48(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = useContext33(TasksContext);
-  const taskBodyClassName = classNames56(
+  const taskBodyClassName = classNames57(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = classNames56(
+  const taskHeadClassName = classNames57(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = classNames56(
+  const taskItemClassName = classNames57(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
-  useEffect40(() => {
+  useEffect41(() => {
     setIsOpen(defaultOpen);
   }, [defaultOpen]);
-  return /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React166.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React166.createElement(
+  return /* @__PURE__ */ React165.createElement("div", { className: "Layer__tasks-list-item-wrapper" }, /* @__PURE__ */ React165.createElement("div", { className: taskItemClassName }, /* @__PURE__ */ React165.createElement(
     "div",
     {
       className: "Layer__tasks-list-item__head",
       onClick: () => setIsOpen(!isOpen)
     },
-    /* @__PURE__ */ React166.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, isComplete(task.status) ? /* @__PURE__ */ React166.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React166.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React166.createElement(Text, { size: "md" /* md */ }, task.title)),
-    /* @__PURE__ */ React166.createElement(
+    /* @__PURE__ */ React165.createElement("div", { className: taskHeadClassName }, /* @__PURE__ */ React165.createElement("div", { className: "Layer__tasks-list-item__head-info__status" }, isComplete(task.status) ? /* @__PURE__ */ React165.createElement(Check_default, { size: 12 }) : /* @__PURE__ */ React165.createElement(AlertCircle_default, { size: 12 })), /* @__PURE__ */ React165.createElement(Text, { size: "md" /* md */ }, task.title)),
+    /* @__PURE__ */ React165.createElement(
       ChevronDownFill_default,
       {
         size: 16,
@@ -14793,13 +14802,13 @@ var TasksListItem = ({
         }
       }
     )
-  ), /* @__PURE__ */ React166.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React166.createElement(Text, { size: "sm" /* sm */ }, task.question), /* @__PURE__ */ React166.createElement(
+  ), /* @__PURE__ */ React165.createElement("div", { className: taskBodyClassName }, /* @__PURE__ */ React165.createElement("div", { className: "Layer__tasks-list-item__body-info" }, /* @__PURE__ */ React165.createElement(Text, { size: "sm" /* sm */ }, task.question), /* @__PURE__ */ React165.createElement(
     Textarea,
     {
       value: userResponse,
       onChange: (e) => setUserResponse(e.target.value)
     }
-  ), /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list-item__actions" }, /* @__PURE__ */ React166.createElement(
+  ), /* @__PURE__ */ React165.createElement("div", { className: "Layer__tasks-list-item__actions" }, /* @__PURE__ */ React165.createElement(
     Button,
     {
       disabled: userResponse.length === 0 || userResponse === task.user_response,
@@ -14823,14 +14832,14 @@ function paginateArray(array, chunkSize = 10) {
   }
   return result;
 }
-var TasksEmptyState = () => /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React167.createElement(SmileIcon_default, null)), /* @__PURE__ */ React167.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React167.createElement("br", null), " Great job!"));
+var TasksEmptyState = () => /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-empty-state" }, /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-icon" }, /* @__PURE__ */ React166.createElement(SmileIcon_default, null)), /* @__PURE__ */ React166.createElement(Text, { size: "sm" /* sm */ }, "There are no pending tasks!", /* @__PURE__ */ React166.createElement("br", null), " Great job!"));
 var TasksList = ({ pageSize = 10 }) => {
   const { data: tasks, error } = useContext34(TasksContext);
   const firstPageWithIincompleteTasks = paginateArray(
     tasks || [],
     pageSize
   ).findIndex((page) => page.some((task) => !isComplete(task.status)));
-  const [currentPage, setCurrentPage] = useState50(
+  const [currentPage, setCurrentPage] = useState49(
     firstPageWithIincompleteTasks === -1 ? 1 : firstPageWithIincompleteTasks + 1
   );
   const sortedTasks = useMemo18(() => {
@@ -14847,7 +14856,7 @@ var TasksList = ({ pageSize = 10 }) => {
       setCurrentPage(currentPage + 1);
     }
   };
-  return /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React167.createElement(React167.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React167.createElement(
+  return /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks-list" }, sortedTasks && sortedTasks.length > 0 ? /* @__PURE__ */ React166.createElement(React166.Fragment, null, sortedTasks.map((task, index) => /* @__PURE__ */ React166.createElement(
     TasksListItem,
     {
       key: task.id,
@@ -14855,7 +14864,7 @@ var TasksList = ({ pageSize = 10 }) => {
       goToNextPageIfAllComplete: goToNextPage,
       defaultOpen: index === indexFirstIncomplete
     }
-  )), tasks && tasks.length >= 10 && /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React167.createElement(
+  )), tasks && tasks.length >= 10 && /* @__PURE__ */ React166.createElement("div", { className: "Layer__tasks__pagination" }, /* @__PURE__ */ React166.createElement(
     Pagination,
     {
       currentPage,
@@ -14863,12 +14872,12 @@ var TasksList = ({ pageSize = 10 }) => {
       pageSize,
       onPageChange: (page) => setCurrentPage(page)
     }
-  ))) : /* @__PURE__ */ React167.createElement(React167.Fragment, null, error ? /* @__PURE__ */ React167.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React167.createElement(TasksEmptyState, null)));
+  ))) : /* @__PURE__ */ React166.createElement(React166.Fragment, null, error ? /* @__PURE__ */ React166.createElement(ErrorText, null, "Approval failed. Check connection and retry in few seconds.") : /* @__PURE__ */ React166.createElement(TasksEmptyState, null)));
 };
 
 // src/components/TasksPending/TasksPending.tsx
-import React168, { useContext as useContext35 } from "react";
-import classNames57 from "classnames";
+import React167, { useContext as useContext35 } from "react";
+import classNames58 from "classnames";
 import { format as format6 } from "date-fns";
 import { Cell as Cell4, Pie as Pie3, PieChart as PieChart4 } from "recharts";
 var TasksPending = () => {
@@ -14884,10 +14893,10 @@ var TasksPending = () => {
       value: data?.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = classNames57(
+  const taskStatusClassName = classNames58(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
-  return /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React168.createElement(Text, { size: "lg" /* lg */ }, format6(Date.now(), "MMMM")), /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React168.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React168.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React168.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React168.createElement(
+  return /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ React167.createElement(Text, { size: "lg" /* lg */ }, format6(Date.now(), "MMMM")), /* @__PURE__ */ React167.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ React167.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ React167.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ React167.createElement(PieChart4, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ React167.createElement(
     Pie3,
     {
       data: chartData,
@@ -14905,7 +14914,7 @@ var TasksPending = () => {
       animationEasing: "ease-in-out"
     },
     chartData.map((task, index) => {
-      return /* @__PURE__ */ React168.createElement(
+      return /* @__PURE__ */ React167.createElement(
         Cell4,
         {
           key: `cell-${index}`,
@@ -14918,7 +14927,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-import classNames58 from "classnames";
+import classNames59 from "classnames";
 var UseTasksContext = createContext14({
   data: void 0,
   isLoading: void 0,
@@ -14938,7 +14947,7 @@ var Tasks = ({
   // deprecated
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React169.createElement(TasksProvider, null, /* @__PURE__ */ React169.createElement(
+  return /* @__PURE__ */ React168.createElement(TasksProvider, null, /* @__PURE__ */ React168.createElement(
     TasksComponent,
     {
       collapsable,
@@ -14951,7 +14960,7 @@ var Tasks = ({
 };
 var TasksProvider = ({ children }) => {
   const contextData = useTasks();
-  return /* @__PURE__ */ React169.createElement(TasksContext.Provider, { value: contextData }, children);
+  return /* @__PURE__ */ React168.createElement(TasksContext.Provider, { value: contextData }, children);
 };
 var TasksComponent = ({
   collapsable = false,
@@ -14971,15 +14980,15 @@ var TasksComponent = ({
     }
     return false;
   }, [data, isLoading]);
-  const [open, setOpen] = useState51(
+  const [open, setOpen] = useState50(
     defaultCollapsed || collapsedWhenComplete ? false : true
   );
-  useEffect42(() => {
+  useEffect43(() => {
     if (allComplete && open && collapsedWhenComplete && loadedStatus === "complete") {
       setOpen(false);
     }
   }, [allComplete]);
-  return /* @__PURE__ */ React169.createElement("div", { className: "Layer__tasks-component" }, /* @__PURE__ */ React169.createElement(
+  return /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks-component" }, /* @__PURE__ */ React168.createElement(
     TasksHeader,
     {
       tasksHeader: stringOverrides?.header || tasksHeader,
@@ -14987,24 +14996,24 @@ var TasksComponent = ({
       open,
       toggleContent: () => setOpen(!open)
     }
-  ), /* @__PURE__ */ React169.createElement(
+  ), /* @__PURE__ */ React168.createElement(
     "div",
     {
-      className: classNames58(
+      className: classNames59(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
     },
-    isLoading || !data ? /* @__PURE__ */ React169.createElement("div", { className: "Layer__tasks__loader-container" }, /* @__PURE__ */ React169.createElement(Loader2, null)) : /* @__PURE__ */ React169.createElement(React169.Fragment, null, data.length > 0 && /* @__PURE__ */ React169.createElement(TasksPending, null), /* @__PURE__ */ React169.createElement(TasksList, null))
+    isLoading || !data ? /* @__PURE__ */ React168.createElement("div", { className: "Layer__tasks__loader-container" }, /* @__PURE__ */ React168.createElement(Loader2, null)) : /* @__PURE__ */ React168.createElement(React168.Fragment, null, data.length > 0 && /* @__PURE__ */ React168.createElement(TasksPending, null), /* @__PURE__ */ React168.createElement(TasksList, null))
   ));
 };
 
 // src/components/UpsellBanner/BookkeepingUpsellBar.tsx
-import React172 from "react";
+import React171 from "react";
 
 // src/icons/Coffee.tsx
-import * as React170 from "react";
-var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createElement(
+import * as React169 from "react";
+var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React169.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -15014,7 +15023,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
     width: size,
     height: size
   },
-  /* @__PURE__ */ React170.createElement("g", { "clip-path": "url(#clip0_5018_10141)" }, /* @__PURE__ */ React170.createElement(
+  /* @__PURE__ */ React169.createElement("g", { "clip-path": "url(#clip0_5018_10141)" }, /* @__PURE__ */ React169.createElement(
     "path",
     {
       d: "M3.25 4.16666H2.79167C2.30544 4.16666 1.83912 4.35981 1.4953 4.70363C1.15149 5.04744 0.958333 5.51376 0.958333 5.99999C0.958333 6.48622 1.15149 6.95254 1.4953 7.29635C1.83912 7.64017 2.30544 7.83332 2.79167 7.83332H3.25",
@@ -15022,7 +15031,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React170.createElement(
+  ), /* @__PURE__ */ React169.createElement(
     "path",
     {
       d: "M10.5834 4.16666H3.25004V8.29166C3.25004 8.77789 3.4432 9.2442 3.78701 9.58802C4.13083 9.93184 4.59714 10.125 5.08337 10.125H8.75004C9.23627 10.125 9.70259 9.93184 10.0464 9.58802C10.3902 9.2442 10.5834 8.77789 10.5834 8.29166V4.16666Z",
@@ -15030,7 +15039,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React170.createElement(
+  ), /* @__PURE__ */ React169.createElement(
     "path",
     {
       d: "M8.75 0.958344V2.33334",
@@ -15038,7 +15047,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React170.createElement(
+  ), /* @__PURE__ */ React169.createElement(
     "path",
     {
       d: "M6.91663 0.958344V2.33334",
@@ -15046,7 +15055,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
-  ), /* @__PURE__ */ React170.createElement(
+  ), /* @__PURE__ */ React169.createElement(
     "path",
     {
       d: "M5.08337 0.958344V2.33334",
@@ -15055,7 +15064,7 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
       strokeLinejoin: "round"
     }
   )),
-  /* @__PURE__ */ React170.createElement("defs", null, /* @__PURE__ */ React170.createElement("clipPath", { id: "clip0_5018_10141" }, /* @__PURE__ */ React170.createElement(
+  /* @__PURE__ */ React169.createElement("defs", null, /* @__PURE__ */ React169.createElement("clipPath", { id: "clip0_5018_10141" }, /* @__PURE__ */ React169.createElement(
     "rect",
     {
       width: "11",
@@ -15068,9 +15077,9 @@ var CoffeeIcon = ({ size = 11, ...props }) => /* @__PURE__ */ React170.createEle
 var Coffee_default = CoffeeIcon;
 
 // src/components/IconBox/IconBox.tsx
-import React171 from "react";
+import React170 from "react";
 var IconBox = ({ children }) => {
-  return /* @__PURE__ */ React171.createElement("span", { className: "Layer__icon-box" }, children);
+  return /* @__PURE__ */ React170.createElement("span", { className: "Layer__icon-box" }, children);
 };
 
 // src/components/UpsellBanner/BookkeepingUpsellBar.tsx
@@ -15078,35 +15087,35 @@ var BookkeepingUpsellBar = ({
   onClick,
   href
 }) => {
-  return /* @__PURE__ */ React172.createElement("div", { className: "Layer__bar-banner Layer__bar-banner--bookkeeping" }, /* @__PURE__ */ React172.createElement("div", { className: "Layer__bar-banner__left-col" }, /* @__PURE__ */ React172.createElement(IconBox, null, /* @__PURE__ */ React172.createElement(Coffee_default, null)), /* @__PURE__ */ React172.createElement("div", { className: "Layer__bar-banner__text-container" }, /* @__PURE__ */ React172.createElement(Text, { size: "md" /* md */, weight: "bold" /* bold */ }, "Need help with your books?"), /* @__PURE__ */ React172.createElement(
+  return /* @__PURE__ */ React171.createElement("div", { className: "Layer__bar-banner Layer__bar-banner--bookkeeping" }, /* @__PURE__ */ React171.createElement("div", { className: "Layer__bar-banner__left-col" }, /* @__PURE__ */ React171.createElement(IconBox, null, /* @__PURE__ */ React171.createElement(Coffee_default, null)), /* @__PURE__ */ React171.createElement("div", { className: "Layer__bar-banner__text-container" }, /* @__PURE__ */ React171.createElement(Text, { size: "md" /* md */, weight: "bold" /* bold */ }, "Need help with your books?"), /* @__PURE__ */ React171.createElement(
     Text,
     {
       size: "sm" /* sm */,
       className: "Layer__bar-banner__text-container__desc"
     },
     "Order bookkeeping service supported by real humans."
-  ))), onClick ? /* @__PURE__ */ React172.createElement(Button, { variant: "secondary" /* secondary */, onClick }, "Schedule a demo") : href ? /* @__PURE__ */ React172.createElement(Link2, { href, target: "_blank", variant: "secondary" /* secondary */ }, "Schedule a demo") : null);
+  ))), onClick ? /* @__PURE__ */ React171.createElement(Button, { variant: "secondary" /* secondary */, onClick }, "Schedule a demo") : href ? /* @__PURE__ */ React171.createElement(Link2, { href, target: "_blank", variant: "secondary" /* secondary */ }, "Schedule a demo") : null);
 };
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
-import React173, { useState as useState52 } from "react";
-import classNames59 from "classnames";
+import React172, { useState as useState51 } from "react";
+import classNames60 from "classnames";
 var BookkeepingOverview = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState52("expenses");
+  const [pnlToggle, setPnlToggle] = useState51("expenses");
   const [width] = useWindowSize();
-  return /* @__PURE__ */ React173.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React173.createElement(TasksProvider, null, /* @__PURE__ */ React173.createElement(
+  return /* @__PURE__ */ React172.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React172.createElement(TasksProvider, null, /* @__PURE__ */ React172.createElement(
     View,
     {
       viewClassName: "Layer__bookkeeping-overview--view",
       title: stringOverrides?.title || title || "Bookkeeping overview",
       withSidebar: width > 1100,
-      sidebar: /* @__PURE__ */ React173.createElement(TasksComponent, { stringOverrides: stringOverrides?.tasks })
+      sidebar: /* @__PURE__ */ React172.createElement(TasksComponent, { stringOverrides: stringOverrides?.tasks })
     },
-    width <= 1100 && /* @__PURE__ */ React173.createElement(
+    width <= 1100 && /* @__PURE__ */ React172.createElement(
       TasksComponent,
       {
         collapsable: true,
@@ -15114,23 +15123,23 @@ var BookkeepingOverview = ({
         stringOverrides: stringOverrides?.tasks
       }
     ),
-    /* @__PURE__ */ React173.createElement(
+    /* @__PURE__ */ React172.createElement(
       Container,
       {
         name: "bookkeeping-overview-profit-and-loss",
         asWidget: true,
         elevated: true
       },
-      /* @__PURE__ */ React173.createElement(Header, null, /* @__PURE__ */ React173.createElement(Heading, { size: "secondary" /* secondary */ }, stringOverrides?.profitAndLoss?.header || "Profit & Loss"), /* @__PURE__ */ React173.createElement(ProfitAndLoss.DatePicker, null)),
-      /* @__PURE__ */ React173.createElement("div", { className: "Layer__bookkeeping-overview__summaries-row" }, /* @__PURE__ */ React173.createElement(
+      /* @__PURE__ */ React172.createElement(Header, null, /* @__PURE__ */ React172.createElement(Heading, { size: "secondary" /* secondary */ }, stringOverrides?.profitAndLoss?.header || "Profit & Loss"), /* @__PURE__ */ React172.createElement(ProfitAndLoss.DatePicker, null)),
+      /* @__PURE__ */ React172.createElement("div", { className: "Layer__bookkeeping-overview__summaries-row" }, /* @__PURE__ */ React172.createElement(
         ProfitAndLoss.Summaries,
         {
           stringOverrides: stringOverrides?.profitAndLoss?.summaries
         }
       )),
-      /* @__PURE__ */ React173.createElement(ProfitAndLoss.Chart, null)
+      /* @__PURE__ */ React172.createElement(ProfitAndLoss.Chart, null)
     ),
-    /* @__PURE__ */ React173.createElement("div", { className: "Layer__bookkeeping-overview-profit-and-loss-charts" }, /* @__PURE__ */ React173.createElement(
+    /* @__PURE__ */ React172.createElement("div", { className: "Layer__bookkeeping-overview-profit-and-loss-charts" }, /* @__PURE__ */ React172.createElement(
       Toggle,
       {
         name: "pnl-detailed-charts",
@@ -15147,15 +15156,15 @@ var BookkeepingOverview = ({
         selected: pnlToggle,
         onChange: (e) => setPnlToggle(e.target.value)
       }
-    ), /* @__PURE__ */ React173.createElement(
+    ), /* @__PURE__ */ React172.createElement(
       Container,
       {
-        name: classNames59(
+        name: classNames60(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
       },
-      /* @__PURE__ */ React173.createElement(
+      /* @__PURE__ */ React172.createElement(
         ProfitAndLoss.DetailedCharts,
         {
           scope: "revenue",
@@ -15163,15 +15172,15 @@ var BookkeepingOverview = ({
           stringOverrides: stringOverrides?.profitAndLoss?.detailedCharts
         }
       )
-    ), /* @__PURE__ */ React173.createElement(
+    ), /* @__PURE__ */ React172.createElement(
       Container,
       {
-        name: classNames59(
+        name: classNames60(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
       },
-      /* @__PURE__ */ React173.createElement(
+      /* @__PURE__ */ React172.createElement(
         ProfitAndLoss.DetailedCharts,
         {
           scope: "expenses",
@@ -15184,29 +15193,29 @@ var BookkeepingOverview = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import React177, { useState as useState54 } from "react";
+import React176, { useState as useState53 } from "react";
 
 // src/components/TransactionToReviewCard/TransactionToReviewCard.tsx
-import React176, { useContext as useContext37, useEffect as useEffect43, useState as useState53 } from "react";
+import React175, { useContext as useContext37, useEffect as useEffect44, useState as useState52 } from "react";
 
 // src/components/BadgeLoader/BadgeLoader.tsx
-import React174 from "react";
+import React173 from "react";
 var BadgeLoader = ({ children }) => {
-  return /* @__PURE__ */ React174.createElement("span", { className: "Layer__loader Layer__loader--as-badge" }, /* @__PURE__ */ React174.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }), children);
+  return /* @__PURE__ */ React173.createElement("span", { className: "Layer__loader Layer__loader--as-badge" }, /* @__PURE__ */ React173.createElement(Loader_default, { size: 11, className: "Layer__anim--rotating" }), children);
 };
 
 // src/components/NotificationCard/NotificationCard.tsx
-import React175 from "react";
-import classNames60 from "classnames";
+import React174 from "react";
+import classNames61 from "classnames";
 var NotificationCard = ({
   onClick,
   children,
   className
 }) => {
-  return /* @__PURE__ */ React175.createElement("div", { className: classNames60("Layer__notification-card", className) }, /* @__PURE__ */ React175.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React175.createElement(
+  return /* @__PURE__ */ React174.createElement("div", { className: classNames61("Layer__notification-card", className) }, /* @__PURE__ */ React174.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ React174.createElement(
     IconButton,
     {
-      icon: /* @__PURE__ */ React175.createElement(ChevronRight_default, null),
+      icon: /* @__PURE__ */ React174.createElement(ChevronRight_default, null),
       withBorder: true,
       onClick: () => onClick()
     }
@@ -15221,14 +15230,14 @@ var TransactionToReviewCard = ({
 }) => {
   const { dateRange: contextDateRange } = useContext37(ProfitAndLoss.Context);
   const dateRange = usePnlDateRange ? contextDateRange : void 0;
-  const [toReview, setToReview] = useState53(0);
+  const [toReview, setToReview] = useState52(0);
   const { data, loaded, error, refetch } = useProfitAndLossLTM({
     currentDate: dateRange ? dateRange.startDate : startOfMonth14(/* @__PURE__ */ new Date())
   });
-  useEffect43(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, []);
-  useEffect43(() => {
+  useEffect44(() => {
     checkTransactionsToReview();
   }, [dateRange, loaded]);
   const checkTransactionsToReview = () => {
@@ -15241,40 +15250,40 @@ var TransactionToReviewCard = ({
       }
     }
   };
-  return /* @__PURE__ */ React176.createElement(
+  return /* @__PURE__ */ React175.createElement(
     NotificationCard,
     {
       className: "Layer__txs-to-review",
       onClick: () => onClick && onClick()
     },
-    /* @__PURE__ */ React176.createElement(Text, { size: "sm" /* sm */ }, "Transactions to review"),
-    loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ React176.createElement(BadgeLoader, null) : null,
-    loaded === "complete" && error ? /* @__PURE__ */ React176.createElement(
+    /* @__PURE__ */ React175.createElement(Text, { size: "sm" /* sm */ }, "Transactions to review"),
+    loaded === "initial" || loaded === "loading" ? /* @__PURE__ */ React175.createElement(BadgeLoader, null) : null,
+    loaded === "complete" && error ? /* @__PURE__ */ React175.createElement(
       Badge,
       {
         variant: "error" /* ERROR */,
         size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React176.createElement(RefreshCcw_default, { size: 12 }),
+        icon: /* @__PURE__ */ React175.createElement(RefreshCcw_default, { size: 12 }),
         onClick: () => refetch()
       },
       "Refresh"
     ) : null,
-    loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React176.createElement(
+    loaded === "complete" && !error && toReview > 0 ? /* @__PURE__ */ React175.createElement(
       Badge,
       {
         variant: "warning" /* WARNING */,
         size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React176.createElement(Bell_default, { size: 12 })
+        icon: /* @__PURE__ */ React175.createElement(Bell_default, { size: 12 })
       },
       toReview,
       " pending"
     ) : null,
-    loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React176.createElement(
+    loaded === "complete" && !error && toReview === 0 ? /* @__PURE__ */ React175.createElement(
       Badge,
       {
         variant: "success" /* SUCCESS */,
         size: "small" /* SMALL */,
-        icon: /* @__PURE__ */ React176.createElement(Check_default, { size: 12 })
+        icon: /* @__PURE__ */ React175.createElement(Check_default, { size: 12 })
       },
       "All done"
     ) : null
@@ -15282,7 +15291,7 @@ var TransactionToReviewCard = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-import classNames61 from "classnames";
+import classNames62 from "classnames";
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
@@ -15291,33 +15300,33 @@ var AccountingOverview = ({
   chartColorsList,
   stringOverrides
 }) => {
-  const [pnlToggle, setPnlToggle] = useState54("expenses");
-  return /* @__PURE__ */ React177.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React177.createElement(View, { title, headerControls: /* @__PURE__ */ React177.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React177.createElement(
+  const [pnlToggle, setPnlToggle] = useState53("expenses");
+  return /* @__PURE__ */ React176.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React176.createElement(View, { title, headerControls: /* @__PURE__ */ React176.createElement(ProfitAndLoss.DatePicker, null) }, enableOnboarding && /* @__PURE__ */ React176.createElement(
     Onboarding,
     {
       onTransactionsToReviewClick
     }
-  ), /* @__PURE__ */ React177.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React177.createElement(
+  ), /* @__PURE__ */ React176.createElement("div", { className: "Layer__accounting-overview__summaries-row" }, /* @__PURE__ */ React176.createElement(
     ProfitAndLoss.Summaries,
     {
       stringOverrides: stringOverrides?.profitAndLoss?.summaries
     }
-  ), /* @__PURE__ */ React177.createElement(
+  ), /* @__PURE__ */ React176.createElement(
     TransactionToReviewCard,
     {
       usePnlDateRange: true,
       onClick: onTransactionsToReviewClick
     }
-  )), /* @__PURE__ */ React177.createElement(
+  )), /* @__PURE__ */ React176.createElement(
     Container,
     {
       name: "accounting-overview-profit-and-loss",
       asWidget: true,
       elevated: true
     },
-    /* @__PURE__ */ React177.createElement(Header, null, /* @__PURE__ */ React177.createElement(Heading, { size: "secondary" /* secondary */ }, stringOverrides?.header || "Profit & Loss")),
-    /* @__PURE__ */ React177.createElement(ProfitAndLoss.Chart, null)
-  ), middleBanner && /* @__PURE__ */ React177.createElement(Container, { name: "accounting-overview-middle-banner" }, middleBanner), /* @__PURE__ */ React177.createElement("div", { className: "Layer__accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React177.createElement(
+    /* @__PURE__ */ React176.createElement(Header, null, /* @__PURE__ */ React176.createElement(Heading, { size: "secondary" /* secondary */ }, stringOverrides?.header || "Profit & Loss")),
+    /* @__PURE__ */ React176.createElement(ProfitAndLoss.Chart, null)
+  ), middleBanner && /* @__PURE__ */ React176.createElement(Container, { name: "accounting-overview-middle-banner" }, middleBanner), /* @__PURE__ */ React176.createElement("div", { className: "Layer__accounting-overview-profit-and-loss-charts" }, /* @__PURE__ */ React176.createElement(
     Toggle,
     {
       name: "pnl-detailed-charts",
@@ -15334,15 +15343,15 @@ var AccountingOverview = ({
       selected: pnlToggle,
       onChange: (e) => setPnlToggle(e.target.value)
     }
-  ), /* @__PURE__ */ React177.createElement(
+  ), /* @__PURE__ */ React176.createElement(
     Container,
     {
-      name: classNames61(
+      name: classNames62(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
       )
     },
-    /* @__PURE__ */ React177.createElement(
+    /* @__PURE__ */ React176.createElement(
       ProfitAndLoss.DetailedCharts,
       {
         scope: "revenue",
@@ -15351,15 +15360,15 @@ var AccountingOverview = ({
         chartColorsList
       }
     )
-  ), /* @__PURE__ */ React177.createElement(
+  ), /* @__PURE__ */ React176.createElement(
     Container,
     {
-      name: classNames61(
+      name: classNames62(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
       )
     },
-    /* @__PURE__ */ React177.createElement(
+    /* @__PURE__ */ React176.createElement(
       ProfitAndLoss.DetailedCharts,
       {
         scope: "expenses",
@@ -15372,7 +15381,7 @@ var AccountingOverview = ({
 };
 
 // src/views/BankTransactionsWithLinkedAccounts/BankTransactionsWithLinkedAccounts.tsx
-import React178 from "react";
+import React177 from "react";
 var BankTransactionsWithLinkedAccounts = ({
   title,
   // deprecated
@@ -15386,7 +15395,7 @@ var BankTransactionsWithLinkedAccounts = ({
   mobileComponent,
   stringOverrides
 }) => {
-  return /* @__PURE__ */ React178.createElement(View, { title: stringOverrides?.title || title || "Bank transactions" }, /* @__PURE__ */ React178.createElement(
+  return /* @__PURE__ */ React177.createElement(View, { title: stringOverrides?.title || title || "Bank transactions" }, /* @__PURE__ */ React177.createElement(
     LinkedAccounts,
     {
       elevated: elevatedLinkedAccounts,
@@ -15395,7 +15404,7 @@ var BankTransactionsWithLinkedAccounts = ({
       showBreakConnection,
       stringOverrides: stringOverrides?.linkedAccounts
     }
-  ), /* @__PURE__ */ React178.createElement(
+  ), /* @__PURE__ */ React177.createElement(
     BankTransactions,
     {
       asWidget: true,
@@ -15409,14 +15418,14 @@ var BankTransactionsWithLinkedAccounts = ({
 };
 
 // src/views/GeneralLedger/GeneralLedger.tsx
-import React179, { useState as useState55 } from "react";
+import React178, { useState as useState54 } from "react";
 var GeneralLedgerView = ({
   title,
   // deprecated
   stringOverrides
 }) => {
-  const [activeTab, setActiveTab] = useState55("chartOfAccounts");
-  return /* @__PURE__ */ React179.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React179.createElement(View, { title: stringOverrides?.title || title || "General Ledger" }, /* @__PURE__ */ React179.createElement(
+  const [activeTab, setActiveTab] = useState54("chartOfAccounts");
+  return /* @__PURE__ */ React178.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React178.createElement(View, { title: stringOverrides?.title || title || "General Ledger" }, /* @__PURE__ */ React178.createElement(
     Toggle,
     {
       name: "general-ledger-tabs",
@@ -15433,24 +15442,24 @@ var GeneralLedgerView = ({
       selected: activeTab,
       onChange: (opt) => setActiveTab(opt.target.value)
     }
-  ), /* @__PURE__ */ React179.createElement(Container, { name: "generalLedger" }, activeTab === "chartOfAccounts" ? /* @__PURE__ */ React179.createElement(
+  ), /* @__PURE__ */ React178.createElement(Container, { name: "generalLedger" }, activeTab === "chartOfAccounts" ? /* @__PURE__ */ React178.createElement(
     ChartOfAccounts,
     {
       asWidget: true,
       withExpandAllButton: true,
       stringOverrides: stringOverrides?.chartOfAccounts
     }
-  ) : /* @__PURE__ */ React179.createElement(Journal, { stringOverrides: stringOverrides?.journal }))));
+  ) : /* @__PURE__ */ React178.createElement(Journal, { stringOverrides: stringOverrides?.journal }))));
 };
 
 // src/views/Reports/Reports.tsx
-import React180, { useContext as useContext38, useRef as useRef16, useState as useState56 } from "react";
+import React179, { useContext as useContext38, useRef as useRef16, useState as useState55 } from "react";
 var DownloadButton2 = ({
   stringOverrides
 }) => {
   const { dateRange } = useContext38(ProfitAndLoss.Context);
   const { auth, businessId, apiUrl } = useLayerContext();
-  const [requestFailed, setRequestFailed] = useState56(false);
+  const [requestFailed, setRequestFailed] = useState55(false);
   const handleClick = async () => {
     const month = (dateRange.startDate.getMonth() + 1).toString();
     const year = dateRange.startDate.getFullYear().toString();
@@ -15477,7 +15486,7 @@ var DownloadButton2 = ({
       setRequestFailed(true);
     }
   };
-  return requestFailed ? /* @__PURE__ */ React180.createElement(
+  return requestFailed ? /* @__PURE__ */ React179.createElement(
     RetryButton,
     {
       onClick: handleClick,
@@ -15485,11 +15494,11 @@ var DownloadButton2 = ({
       error: "Approval failed. Check connection and retry in few seconds."
     },
     stringOverrides?.retryButtonText || "Retry"
-  ) : /* @__PURE__ */ React180.createElement(
+  ) : /* @__PURE__ */ React179.createElement(
     Button,
     {
       variant: "secondary" /* secondary */,
-      rightIcon: /* @__PURE__ */ React180.createElement(DownloadCloud_default, { size: 12 }),
+      rightIcon: /* @__PURE__ */ React179.createElement(DownloadCloud_default, { size: 12 }),
       onClick: handleClick
     },
     stringOverrides?.downloadButtonText || "Download"
@@ -15517,10 +15526,10 @@ var Reports = ({
   enabledReports = ["profitAndLoss", "balanceSheet", "statementOfCashFlow"]
 }) => {
   const containerRef = useRef16(null);
-  const [activeTab, setActiveTab] = useState56(enabledReports[0]);
+  const [activeTab, setActiveTab] = useState55(enabledReports[0]);
   const options = getOptions(enabledReports);
   const defaultTitle = enabledReports.length > 1 ? "Reports" : options.find((option) => option.value = enabledReports[0])?.label;
-  return /* @__PURE__ */ React180.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React180.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React180.createElement(
+  return /* @__PURE__ */ React179.createElement(View, { title: stringOverrides?.title || title || defaultTitle }, enabledReports.length > 1 && /* @__PURE__ */ React179.createElement("div", { className: "Layer__component Layer__header__actions" }, /* @__PURE__ */ React179.createElement(
     Toggle,
     {
       name: "reports-tabs",
@@ -15528,7 +15537,7 @@ var Reports = ({
       selected: activeTab,
       onChange: (opt) => setActiveTab(opt.target.value)
     }
-  )), /* @__PURE__ */ React180.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React180.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React180.createElement(
+  )), /* @__PURE__ */ React179.createElement(Container, { name: "reports", ref: containerRef }, /* @__PURE__ */ React179.createElement(ProfitAndLoss, { asContainer: false }, /* @__PURE__ */ React179.createElement(
     ReportsPanel,
     {
       containerRef,
@@ -15543,21 +15552,21 @@ var ReportsPanel = ({
   stringOverrides
 }) => {
   const { sidebarScope } = useContext38(ProfitAndLoss.Context);
-  return /* @__PURE__ */ React180.createElement(React180.Fragment, null, openReport === "profitAndLoss" && /* @__PURE__ */ React180.createElement(
+  return /* @__PURE__ */ React179.createElement(React179.Fragment, null, openReport === "profitAndLoss" && /* @__PURE__ */ React179.createElement(TableProvider, null, /* @__PURE__ */ React179.createElement(
     View,
     {
       type: "panel",
-      headerControls: /* @__PURE__ */ React180.createElement(React180.Fragment, null, /* @__PURE__ */ React180.createElement(ProfitAndLoss.DatePicker, null), /* @__PURE__ */ React180.createElement(
+      headerControls: /* @__PURE__ */ React179.createElement(React179.Fragment, null, /* @__PURE__ */ React179.createElement(ProfitAndLoss.DatePicker, null), /* @__PURE__ */ React179.createElement(
         DownloadButton2,
         {
           stringOverrides: stringOverrides?.downloadButton
         }
       ))
     },
-    /* @__PURE__ */ React180.createElement(
+    /* @__PURE__ */ React179.createElement(
       Panel,
       {
-        sidebar: /* @__PURE__ */ React180.createElement(
+        sidebar: /* @__PURE__ */ React179.createElement(
           ProfitAndLoss.DetailedCharts,
           {
             showDatePicker: false,
@@ -15567,7 +15576,7 @@ var ReportsPanel = ({
         sidebarIsOpen: Boolean(sidebarScope),
         parentRef: containerRef
       },
-      /* @__PURE__ */ React180.createElement(
+      /* @__PURE__ */ React179.createElement(
         ProfitAndLoss.Table,
         {
           asContainer: false,
@@ -15575,7 +15584,7 @@ var ReportsPanel = ({
         }
       )
     )
-  ), openReport === "balanceSheet" && /* @__PURE__ */ React180.createElement(BalanceSheet, { stringOverrides: stringOverrides?.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React180.createElement(
+  )), openReport === "balanceSheet" && /* @__PURE__ */ React179.createElement(BalanceSheet, { stringOverrides: stringOverrides?.balanceSheet }), openReport === "statementOfCashFlow" && /* @__PURE__ */ React179.createElement(
     StatementOfCashFlow,
     {
       stringOverrides: stringOverrides?.statementOfCashflow
@@ -15584,11 +15593,11 @@ var ReportsPanel = ({
 };
 
 // src/components/ProfitAndLossView/ProfitAndLossView.tsx
-import React181, { useContext as useContext39, useRef as useRef17 } from "react";
+import React180, { useContext as useContext39, useRef as useRef17 } from "react";
 var COMPONENT_NAME7 = "profit-and-loss";
 var ProfitAndLossView = (props) => {
   const containerRef = useRef17(null);
-  return /* @__PURE__ */ React181.createElement(Container, { name: COMPONENT_NAME7, ref: containerRef }, /* @__PURE__ */ React181.createElement(ProfitAndLoss, null, /* @__PURE__ */ React181.createElement(ProfitAndLossPanel, { containerRef, ...props })));
+  return /* @__PURE__ */ React180.createElement(Container, { name: COMPONENT_NAME7, ref: containerRef }, /* @__PURE__ */ React180.createElement(ProfitAndLoss, null, /* @__PURE__ */ React180.createElement(ProfitAndLossPanel, { containerRef, ...props })));
 };
 var ProfitAndLossPanel = ({
   containerRef,
@@ -15596,10 +15605,10 @@ var ProfitAndLossPanel = ({
   ...props
 }) => {
   const { sidebarScope } = useContext39(ProfitAndLoss.Context);
-  return /* @__PURE__ */ React181.createElement(
+  return /* @__PURE__ */ React180.createElement(
     Panel,
     {
-      sidebar: /* @__PURE__ */ React181.createElement(
+      sidebar: /* @__PURE__ */ React180.createElement(
         ProfitAndLossDetailedCharts,
         {
           stringOverrides: stringOverrides?.profitAndLossDetailedCharts
@@ -15608,8 +15617,8 @@ var ProfitAndLossPanel = ({
       sidebarIsOpen: Boolean(sidebarScope),
       parentRef: containerRef
     },
-    /* @__PURE__ */ React181.createElement(Header, { className: `Layer__${COMPONENT_NAME7}__header` }, /* @__PURE__ */ React181.createElement(Heading, { className: "Layer__profit-and-loss__title" }, stringOverrides?.header || "Profit & Loss")),
-    /* @__PURE__ */ React181.createElement(Components, { stringOverrides, ...props })
+    /* @__PURE__ */ React180.createElement(Header, { className: `Layer__${COMPONENT_NAME7}__header` }, /* @__PURE__ */ React180.createElement(Heading, { className: "Layer__profit-and-loss__title" }, stringOverrides?.header || "Profit & Loss")),
+    /* @__PURE__ */ React180.createElement(Components, { stringOverrides, ...props })
   );
 };
 var Components = ({
@@ -15621,7 +15630,7 @@ var Components = ({
     ProfitAndLoss.Context
   );
   if (!isLoading && error) {
-    return /* @__PURE__ */ React181.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React181.createElement(
+    return /* @__PURE__ */ React180.createElement("div", { className: "Layer__table-state-container" }, /* @__PURE__ */ React180.createElement(
       DataState,
       {
         status: "failed" /* failed */,
@@ -15632,13 +15641,13 @@ var Components = ({
       }
     ));
   }
-  return /* @__PURE__ */ React181.createElement(React181.Fragment, null, !hideChart && /* @__PURE__ */ React181.createElement("div", { className: `Layer__${COMPONENT_NAME7}__chart_with_summaries` }, /* @__PURE__ */ React181.createElement(
+  return /* @__PURE__ */ React180.createElement(React180.Fragment, null, !hideChart && /* @__PURE__ */ React180.createElement("div", { className: `Layer__${COMPONENT_NAME7}__chart_with_summaries` }, /* @__PURE__ */ React180.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME7}__chart_with_summaries__summary-col`
     },
-    /* @__PURE__ */ React181.createElement(ProfitAndLoss.DatePicker, null),
-    /* @__PURE__ */ React181.createElement(
+    /* @__PURE__ */ React180.createElement(ProfitAndLoss.DatePicker, null),
+    /* @__PURE__ */ React180.createElement(
       ProfitAndLoss.Summaries,
       {
         vertical: true,
@@ -15646,18 +15655,18 @@ var Components = ({
         stringOverrides: stringOverrides?.profitAndLossSummaries
       }
     )
-  ), /* @__PURE__ */ React181.createElement(
+  ), /* @__PURE__ */ React180.createElement(
     "div",
     {
       className: `Layer__${COMPONENT_NAME7}__chart_with_summaries__chart-col`
     },
-    /* @__PURE__ */ React181.createElement(ProfitAndLoss.Chart, null)
-  )), !hideTable && /* @__PURE__ */ React181.createElement(
+    /* @__PURE__ */ React180.createElement(ProfitAndLoss.Chart, null)
+  )), !hideTable && /* @__PURE__ */ React180.createElement(TableProvider, null, /* @__PURE__ */ React180.createElement(
     ProfitAndLoss.Table,
     {
       stringOverrides: stringOverrides?.profitAndLossTable
     }
-  ));
+  )));
 };
 export {
   AccountingOverview,