@layerfi/components 0.1.48 → 0.1.50

package/dist/index.js

@@ -850,12 +850,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
     ];
   };
@@ -874,8 +874,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);
       }
@@ -1044,13 +1043,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();
@@ -8738,10 +8730,10 @@ var Quickbooks = () => {
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
-var import_react111 = __toESM(require("react"));
+var import_react118 = __toESM(require("react"));
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_react98 = require("react");
+var import_react99 = require("react");
 
 // src/utils/profitAndLossUtils.ts
 var doesLineItemQualifies = (item) => {
@@ -8796,18 +8788,176 @@ var applyShare = (items, total) => {
   });
 };
 
-// src/hooks/useProfitAndLoss/useProfitAndLossQuery.tsx
+// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
 var import_react97 = require("react");
 var import_date_fns16 = require("date-fns");
 var import_swr3 = __toESM(require("swr"));
+var buildDates = ({ currentDate }) => {
+  return {
+    startYear: (0, import_date_fns16.startOfMonth)(currentDate).getFullYear() - 1,
+    startMonth: (0, import_date_fns16.startOfMonth)(currentDate).getMonth() + 1,
+    endYear: (0, import_date_fns16.startOfMonth)(currentDate).getFullYear(),
+    endMonth: (0, import_date_fns16.startOfMonth)(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: (0, import_date_fns16.startOfMonth)(Date.now())
+}) => {
+  const {
+    businessId,
+    auth,
+    apiUrl,
+    syncTimestamps,
+    read,
+    readTimestamps,
+    hasBeenTouched
+  } = useLayerContext();
+  const [date, setDate] = (0, import_react97.useState)(currentDate);
+  const [loaded, setLoaded] = (0, import_react97.useState)("initial");
+  const [data, setData] = (0, import_react97.useState)([]);
+  const { startYear, startMonth, endYear, endMonth } = (0, import_react97.useMemo)(() => {
+    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
+  } = (0, import_swr3.default)(
+    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
+      }
+    })
+  );
+  (0, import_react97.useEffect)(() => {
+    const newData = data.slice();
+    const newPeriod = buildMonthsArray((0, import_date_fns16.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]);
+  (0, import_react97.useEffect)(() => {
+    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]);
+  (0, import_react97.useEffect)(() => {
+    if (isLoading && loaded === "initial") {
+      setLoaded("loading");
+      return;
+    }
+    if (!isLoading && rawData) {
+      setLoaded("complete");
+    }
+  }, [data, isLoading]);
+  const pullData = (date2) => setDate(date2);
+  (0, import_react97.useEffect)(() => {
+    if (queryKey && (isLoading || isValidating)) {
+      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
+    }
+  }, [isLoading, isValidating]);
+  (0, import_react97.useEffect)(() => {
+    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
+var import_react98 = require("react");
+var import_date_fns17 = require("date-fns");
+var import_swr4 = __toESM(require("swr"));
 var useProfitAndLossQuery = ({
   startDate,
   endDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: (0, import_date_fns16.startOfMonth)(/* @__PURE__ */ new Date()),
-  endDate: (0, import_date_fns16.endOfMonth)(/* @__PURE__ */ new Date())
+  startDate: (0, import_date_fns17.startOfMonth)(/* @__PURE__ */ new Date()),
+  endDate: (0, import_date_fns17.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
   const { auth, businessId, apiUrl, syncTimestamps, read, hasBeenTouched } = useLayerContext();
   const queryKey = businessId && startDate && endDate && auth?.access_token && `profit-and-loss-${businessId}-${startDate.valueOf()}-${endDate.valueOf()}-${tagFilter?.key}-${tagFilter?.values?.join(
@@ -8819,13 +8969,13 @@ var useProfitAndLossQuery = ({
     isValidating,
     error: rawError,
     mutate
-  } = (0, import_swr3.default)(
+  } = (0, import_swr4.default)(
     queryKey,
     Layer.getProfitAndLoss(apiUrl, auth?.access_token, {
       params: {
         businessId,
-        startDate: (0, import_date_fns16.formatISO)(startDate.valueOf()),
-        endDate: (0, import_date_fns16.formatISO)(endDate.valueOf()),
+        startDate: (0, import_date_fns17.formatISO)(startDate.valueOf()),
+        endDate: (0, import_date_fns17.formatISO)(endDate.valueOf()),
         tagKey: tagFilter?.key,
         tagValues: tagFilter?.values?.join(","),
         reportingBasis
@@ -8835,12 +8985,12 @@ var useProfitAndLossQuery = ({
   const refetch = () => {
     mutate();
   };
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
     }
   }, [isLoading, isValidating]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -8857,33 +9007,36 @@ var useProfitAndLossQuery = ({
 };
 
 // src/hooks/useProfitAndLoss/useProfitAndLoss.tsx
-var import_date_fns17 = require("date-fns");
+var import_date_fns18 = require("date-fns");
 var useProfitAndLoss = ({
   startDate: initialStartDate,
   endDate: initialEndDate,
   tagFilter,
   reportingBasis
 } = {
-  startDate: (0, import_date_fns17.startOfMonth)(/* @__PURE__ */ new Date()),
-  endDate: (0, import_date_fns17.endOfMonth)(/* @__PURE__ */ new Date())
+  startDate: (0, import_date_fns18.startOfMonth)(/* @__PURE__ */ new Date()),
+  endDate: (0, import_date_fns18.endOfMonth)(/* @__PURE__ */ new Date())
 }) => {
-  const [startDate, setStartDate] = (0, import_react98.useState)(
-    initialStartDate || (0, import_date_fns17.startOfMonth)(Date.now())
+  const [startDate, setStartDate] = (0, import_react99.useState)(
+    initialStartDate || (0, import_date_fns18.startOfMonth)(Date.now())
   );
-  const [endDate, setEndDate] = (0, import_react98.useState)(
-    initialEndDate || (0, import_date_fns17.endOfMonth)(Date.now())
+  const [endDate, setEndDate] = (0, import_react99.useState)(
+    initialEndDate || (0, import_date_fns18.endOfMonth)(Date.now())
   );
-  const [filters, setFilters] = (0, import_react98.useState)({
+  const [filters, setFilters] = (0, import_react99.useState)({
     expenses: void 0,
     revenue: void 0
   });
-  const [sidebarScope, setSidebarScope] = (0, import_react98.useState)(void 0);
+  const [sidebarScope, setSidebarScope] = (0, import_react99.useState)(void 0);
   const { data, isLoading, isValidating, error, refetch } = useProfitAndLossQuery({
     startDate,
     endDate,
     tagFilter,
     reportingBasis
   });
+  const { data: summaryData } = useProfitAndLossLTM({
+    currentDate: startDate ? startDate : (0, import_date_fns18.startOfMonth)(/* @__PURE__ */ new Date())
+  });
   const changeDateRange = ({
     startDate: newStartDate,
     endDate: newEndDate
@@ -8910,7 +9063,7 @@ var useProfitAndLoss = ({
       }
     });
   };
-  const { filteredDataRevenue, filteredTotalRevenue } = (0, import_react98.useMemo)(() => {
+  const { filteredDataRevenue, filteredTotalRevenue } = (0, import_react99.useMemo)(() => {
     if (!data) {
       return { filteredDataRevenue: [], filteredTotalRevenue: void 0 };
     }
@@ -8924,6 +9077,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":
@@ -8946,8 +9112,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 } = (0, import_react98.useMemo)(() => {
+  }, [data, startDate, filters, sidebarScope, summaryData]);
+  const { filteredDataExpenses, filteredTotalExpenses } = (0, import_react99.useMemo)(() => {
     if (!data) {
       return { filteredDataExpenses: [], filteredTotalExpenses: void 0 };
     }
@@ -8961,6 +9127,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":
@@ -8983,7 +9162,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,
@@ -9007,238 +9186,80 @@ var useProfitAndLoss = ({
 // src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
 var import_react101 = __toESM(require("react"));
 
-// src/hooks/useProfitAndLoss/useProfitAndLossLTM.tsx
-var import_react99 = require("react");
-var import_date_fns18 = require("date-fns");
-var import_swr4 = __toESM(require("swr"));
-var buildDates = ({ currentDate }) => {
-  return {
-    startYear: (0, import_date_fns18.startOfMonth)(currentDate).getFullYear() - 1,
-    startMonth: (0, import_date_fns18.startOfMonth)(currentDate).getMonth() + 1,
-    endYear: (0, import_date_fns18.startOfMonth)(currentDate).getFullYear(),
-    endMonth: (0, import_date_fns18.startOfMonth)(currentDate).getMonth() + 1
+// src/components/ProfitAndLossChart/Indicator.tsx
+var import_react100 = __toESM(require("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] = (0, import_react100.useState)(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)";
+  (0, import_react100.useEffect)(() => {
+    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);
+      }
+    }
   };
+  const actualX = animateFrom === -1 ? animateTo : animateFrom;
+  return /* @__PURE__ */ import_react100.default.createElement(
+    "rect",
+    {
+      ref: rectRef,
+      className: "Layer__profit-and-loss-chart__selection-indicator",
+      rx: borderRadius,
+      ry: borderRadius,
+      style: {
+        width: rectWidth,
+        // @ts-expect-error -- y is fine but x apparently isn't!
+        x: actualX - xOffset / 2 + margin / 4,
+        y: 22,
+        height: rectHeight,
+        opacity: opacityIndicator
+      }
+    }
+  );
 };
-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: (0, import_date_fns18.startOfMonth)(Date.now())
-}) => {
-  const {
-    businessId,
-    auth,
-    apiUrl,
-    syncTimestamps,
-    read,
-    readTimestamps,
-    hasBeenTouched
-  } = useLayerContext();
-  const [date, setDate] = (0, import_react99.useState)(currentDate);
-  const [loaded, setLoaded] = (0, import_react99.useState)("initial");
-  const [data, setData] = (0, import_react99.useState)([]);
-  const { startYear, startMonth, endYear, endMonth } = (0, import_react99.useMemo)(() => {
-    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
-  } = (0, import_swr4.default)(
-    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
-      }
-    })
-  );
-  (0, import_react99.useEffect)(() => {
-    const newData = data.slice();
-    const newPeriod = buildMonthsArray((0, import_date_fns18.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]);
-  (0, import_react99.useEffect)(() => {
-    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]);
-  (0, import_react99.useEffect)(() => {
-    if (isLoading && loaded === "initial") {
-      setLoaded("loading");
-      return;
-    }
-    if (!isLoading && rawData) {
-      setLoaded("complete");
-    }
-  }, [data, isLoading]);
-  const pullData = (date2) => setDate(date2);
-  (0, import_react99.useEffect)(() => {
-    if (queryKey && (isLoading || isValidating)) {
-      read("PROFIT_AND_LOSS" /* PROFIT_AND_LOSS */, queryKey);
-    }
-  }, [isLoading, isValidating]);
-  (0, import_react99.useEffect)(() => {
-    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
-var import_react100 = __toESM(require("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] = (0, import_react100.useState)(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)";
-  (0, import_react100.useEffect)(() => {
-    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);
-      }
-    }
-  };
-  const actualX = animateFrom === -1 ? animateTo : animateFrom;
-  return /* @__PURE__ */ import_react100.default.createElement(
-    "rect",
-    {
-      ref: rectRef,
-      className: "Layer__profit-and-loss-chart__selection-indicator",
-      rx: borderRadius,
-      ry: borderRadius,
-      style: {
-        width: rectWidth,
-        // @ts-expect-error -- y is fine but x apparently isn't!
-        x: actualX - xOffset / 2 + margin / 4,
-        y: 22,
-        height: rectHeight,
-        opacity: opacityIndicator
-      }
-    }
-  );
-};
-
-// src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
-var import_classnames42 = __toESM(require("classnames"));
-var import_date_fns19 = require("date-fns");
-var import_recharts = require("recharts");
-var getChartWindow = ({
-  chartWindow,
-  currentYear,
-  currentMonth
-}) => {
-  const today = (0, import_date_fns19.startOfMonth)(Date.now());
-  const yearAgo = (0, import_date_fns19.sub)(today, { months: 11 });
-  const current = (0, import_date_fns19.startOfMonth)(new Date(currentYear, currentMonth - 1, 1));
-  if ((0, import_date_fns19.differenceInMonths)((0, import_date_fns19.startOfMonth)(chartWindow.start), current) < 0 && (0, import_date_fns19.differenceInMonths)((0, import_date_fns19.startOfMonth)(chartWindow.end), current) > 1) {
-    return chartWindow;
+
+// src/components/ProfitAndLossChart/ProfitAndLossChart.tsx
+var import_classnames42 = __toESM(require("classnames"));
+var import_date_fns19 = require("date-fns");
+var import_recharts = require("recharts");
+var getChartWindow = ({
+  chartWindow,
+  currentYear,
+  currentMonth
+}) => {
+  const today = (0, import_date_fns19.startOfMonth)(Date.now());
+  const yearAgo = (0, import_date_fns19.sub)(today, { months: 11 });
+  const current = (0, import_date_fns19.startOfMonth)(new Date(currentYear, currentMonth - 1, 1));
+  if ((0, import_date_fns19.differenceInMonths)((0, import_date_fns19.startOfMonth)(chartWindow.start), current) < 0 && (0, import_date_fns19.differenceInMonths)((0, import_date_fns19.startOfMonth)(chartWindow.end), current) > 1) {
+    return chartWindow;
   }
   if ((0, import_date_fns19.differenceInMonths)((0, import_date_fns19.startOfMonth)(chartWindow.start), current) === 0) {
     return {
@@ -10142,6 +10163,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++;
@@ -10156,6 +10183,57 @@ var mapTypesToColors = (data, colorList = DEFAULT_CHART_COLOR_TYPE) => {
     };
   });
 };
+var ValueIcon = ({
+  item,
+  typeColorMapping,
+  idx
+}) => {
+  if (item.type === "Uncategorized") {
+    return /* @__PURE__ */ import_react103.default.createElement(
+      "svg",
+      {
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "12",
+        height: "12"
+      },
+      /* @__PURE__ */ import_react103.default.createElement("defs", null, /* @__PURE__ */ import_react103.default.createElement(
+        "pattern",
+        {
+          id: "layer-pie-dots-pattern-legend",
+          x: "0",
+          y: "0",
+          width: "3",
+          height: "3",
+          patternUnits: "userSpaceOnUse"
+        },
+        /* @__PURE__ */ import_react103.default.createElement("rect", { width: "1", height: "1", opacity: 0.76 })
+      )),
+      /* @__PURE__ */ import_react103.default.createElement("rect", { width: "12", height: "12", id: "layer-pie-dots-pattern-bg", rx: "2" }),
+      /* @__PURE__ */ import_react103.default.createElement(
+        "rect",
+        {
+          x: "1",
+          y: "1",
+          width: "10",
+          height: "10",
+          fill: "url(#layer-pie-dots-pattern-legend)"
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ import_react103.default.createElement(
+    "div",
+    {
+      className: "share-icon",
+      style: {
+        background: typeColorMapping[idx].color,
+        opacity: typeColorMapping[idx].opacity
+      }
+    }
+  );
+};
 var DetailedTable = ({
   filteredData,
   sidebarScope,
@@ -10217,13 +10295,11 @@ var DetailedTable = ({
       /* @__PURE__ */ import_react103.default.createElement("td", { className: "type-col" }, item.type),
       /* @__PURE__ */ import_react103.default.createElement("td", { className: "value-col" }, "$", centsToDollars(item.value)),
       /* @__PURE__ */ import_react103.default.createElement("td", { className: "share-col" }, /* @__PURE__ */ import_react103.default.createElement("span", { className: "share-cell-content" }, formatPercent(item.share), "%", /* @__PURE__ */ import_react103.default.createElement(
-        "div",
+        ValueIcon,
         {
-          className: "share-icon",
-          style: {
-            background: typeColorMapping[idx].color,
-            opacity: typeColorMapping[idx].opacity
-          }
+          item,
+          typeColorMapping,
+          idx
         }
       )))
     );
@@ -10231,6 +10307,7 @@ var DetailedTable = ({
 };
 
 // src/components/ProfitAndLossDetailedCharts/DetailedChart.tsx
+var import_classnames44 = __toESM(require("classnames"));
 var import_recharts2 = require("recharts");
 var DetailedChart = ({
   filteredData,
@@ -10264,7 +10341,32 @@ var DetailedChart = ({
   }, [filteredData, isLoading]);
   const noValue = chartData.length === 0 || !chartData.find((x) => x.value !== 0);
   const typeColorMapping = mapTypesToColors(chartData, chartColorsList);
-  return /* @__PURE__ */ import_react104.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react104.default.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ import_react104.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react104.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react104.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react104.default.createElement(import_recharts2.PieChart, null, !isLoading && !noValue ? /* @__PURE__ */ import_react104.default.createElement(
+  return /* @__PURE__ */ import_react104.default.createElement("div", { className: "chart-field" }, /* @__PURE__ */ import_react104.default.createElement("div", { className: "header--tablet" }, showDatePicker && /* @__PURE__ */ import_react104.default.createElement(ProfitAndLossDatePicker, null)), /* @__PURE__ */ import_react104.default.createElement("div", { className: "chart-container" }, /* @__PURE__ */ import_react104.default.createElement(import_recharts2.ResponsiveContainer, null, /* @__PURE__ */ import_react104.default.createElement(import_recharts2.PieChart, null, /* @__PURE__ */ import_react104.default.createElement("defs", null, /* @__PURE__ */ import_react104.default.createElement(
+    "pattern",
+    {
+      id: "layer-pie-stripe-pattern",
+      x: "0",
+      y: "0",
+      width: "4",
+      height: "4",
+      patternTransform: "rotate(45)",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ import_react104.default.createElement("rect", { width: "4", height: "4", opacity: 0.16 }),
+    /* @__PURE__ */ import_react104.default.createElement("line", { x1: "0", y: "0", x2: "0", y2: "4", strokeWidth: "2" })
+  ), /* @__PURE__ */ import_react104.default.createElement(
+    "pattern",
+    {
+      id: "layer-pie-dots-pattern",
+      x: "0",
+      y: "0",
+      width: "3",
+      height: "3",
+      patternUnits: "userSpaceOnUse"
+    },
+    /* @__PURE__ */ import_react104.default.createElement("rect", { width: "3", height: "3", opacity: 0.46, className: "bg" }),
+    /* @__PURE__ */ import_react104.default.createElement("rect", { width: "1", height: "1", opacity: 0.56 })
+  )), !isLoading && !noValue ? /* @__PURE__ */ import_react104.default.createElement(
     import_recharts2.Pie,
     {
       data: chartData,
@@ -10290,8 +10392,14 @@ var DetailedChart = ({
         import_recharts2.Cell,
         {
           key: `cell-${index}`,
-          className: `Layer__profit-and-loss-detailed-charts__pie ${hoveredItem && active ? "active" : "inactive"}`,
-          style: { fill },
+          className: (0, import_classnames44.default)(
+            "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)
@@ -10647,7 +10755,7 @@ var MiniChart = ({ data }) => {
 };
 
 // src/components/ProfitAndLossSummaries/ProfitAndLossSummaries.tsx
-var import_classnames44 = __toESM(require("classnames"));
+var import_classnames45 = __toESM(require("classnames"));
 var CHART_PLACEHOLDER = [
   {
     name: "placeholder",
@@ -10706,7 +10814,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react108.default.createElement(
       "div",
       {
-        className: (0, import_classnames44.default)(
+        className: (0, import_classnames45.default)(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--income",
@@ -10728,7 +10836,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react108.default.createElement(
       "div",
       {
-        className: (0, import_classnames44.default)(
+        className: (0, import_classnames45.default)(
           "Layer__profit-and-loss-summaries__summary",
           actionable && "Layer__actionable",
           "Layer__profit-and-loss-summaries__summary--expenses",
@@ -10752,7 +10860,7 @@ var ProfitAndLossSummaries = ({
     /* @__PURE__ */ import_react108.default.createElement(
       "div",
       {
-        className: (0, import_classnames44.default)(
+        className: (0, import_classnames45.default)(
           "Layer__profit-and-loss-summaries__summary net-profit Layer__profit-and-loss-summaries__summary--net-profit",
           actionable && "Layer__actionable"
         )
@@ -10768,15 +10876,91 @@ var ProfitAndLossSummaries = ({
   );
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_react110 = __toESM(require("react"));
+// src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
+var import_react117 = __toESM(require("react"));
 
-// src/components/ProfitAndLossRow/ProfitAndLossRow.tsx
+// src/contexts/TableContext/TableContext.tsx
 var import_react109 = __toESM(require("react"));
+var defaultValue = {
+  expandedRows: [],
+  setExpandedRows: () => {
+  },
+  expandAllRows: () => {
+  },
+  expandedAllRows: false,
+  setExpandedAllRows: () => {
+  }
+};
+var TableContext = (0, import_react109.createContext)(defaultValue);
+var TableProvider = ({ children }) => {
+  const [expandedRows, setExpandedRowsState] = (0, import_react109.useState)([]);
+  const [expandedAllRows, setExpandedAllRows] = (0, import_react109.useState)(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__ */ import_react109.default.createElement(TableContext.Provider, { value: contextValue }, children);
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
+var import_react116 = __toESM(require("react"));
+
+// src/hooks/useTableExpandRow/useTableExpandRow.tsx
+var import_react110 = require("react");
+var useTableExpandRow = () => {
+  const {
+    expandedAllRows,
+    setExpandedAllRows,
+    expandAllRows,
+    expandedRows,
+    setExpandedRows
+  } = (0, import_react110.useContext)(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
-var React122 = __toESM(require("react"));
-var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React122.createElement(
+var React123 = __toESM(require("react"));
+var PieChart3 = ({ size = 12, ...props }) => /* @__PURE__ */ React123.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -10786,7 +10970,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",
@@ -10794,7 +10978,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",
@@ -10806,96 +10990,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
+var import_react111 = __toESM(require("react"));
+var TableBody = ({ children }) => {
+  return /* @__PURE__ */ import_react111.default.createElement("tbody", { className: "Layer__table-body" }, children);
+};
+
+// src/components/TableCell/TableCell.tsx
+var import_react112 = __toESM(require("react"));
+var import_classnames46 = __toESM(require("classnames"));
+var TableCell = ({
+  children,
+  isHeaderCell,
+  isCurrency,
+  primary,
+  withExpandIcon = false,
+  fullWidth
 }) => {
-  if (!lineItem) {
-    return null;
-  }
-  const { value, display_name, line_items } = lineItem;
-  const [expanded, setExpanded] = (0, import_react109.useState)(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__ */ import_react109.default.createElement(import_react109.default.Fragment, null, /* @__PURE__ */ import_react109.default.createElement(
-    "div",
+  const cellClassNames = (0, import_classnames46.default)(
+    "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__ */ import_react112.default.createElement("th", { className: cellClassNames }, /* @__PURE__ */ import_react112.default.createElement("span", { className: "Layer__table-cell-content" }, children));
+  }
+  return /* @__PURE__ */ import_react112.default.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__ */ import_react109.default.createElement("span", { className: "Layer__profit-and-loss-row__label__title" }, !lockExpanded && variant !== "summation" ? /* @__PURE__ */ import_react109.default.createElement(
+    /* @__PURE__ */ import_react112.default.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ import_react112.default.createElement(
       ChevronDownFill_default,
       {
-        size: 16,
-        className: "Layer__profit-and-loss-row__label__chevron"
+        className: "Layer__table-row--expand-icon",
+        size: 16
       }
-    ) : null, /* @__PURE__ */ import_react109.default.createElement(Text, null, display_name)),
-    setSidebarScope && /* @__PURE__ */ import_react109.default.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
+var import_react113 = __toESM(require("react"));
+var TableHead = ({ children }) => {
+  return /* @__PURE__ */ import_react113.default.createElement("thead", { className: "Layer__table-header" }, children);
+};
+
+// src/components/TableRow/TableRow.tsx
+var import_react114 = __toESM(require("react"));
+var import_classnames47 = __toESM(require("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 = (0, import_classnames47.default)([
+    "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__ */ import_react114.default.createElement(import_react114.default.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ import_react114.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react114.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ import_react114.default.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ import_react114.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react114.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
+};
+
+// src/components/Table/Table.tsx
+var import_react115 = __toESM(require("react"));
+var import_classnames48 = __toESM(require("classnames"));
+var Table = ({
+  componentName,
+  children,
+  borderCollapse = "separate",
+  bottomSpacing = true
+}) => {
+  const tableRef = (0, import_react115.useRef)(null);
+  const prevChildrenRef = (0, import_react115.useRef)([]);
+  (0, import_react115.useEffect)(() => {
+    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__ */ import_react109.default.createElement(PieChart_default, null)
-    )
-  ), /* @__PURE__ */ import_react109.default.createElement("div", { className: valueClasses.join(" ") }, /* @__PURE__ */ import_react109.default.createElement(Text, null, amountString)), canGoDeeper && hasChildren && /* @__PURE__ */ import_react109.default.createElement(
-    "div",
-    {
-      className: `Layer__profit-and-loss-row__children ${expanded && "Layer__profit-and-loss-row__children--expanded"}`
-    },
-    /* @__PURE__ */ import_react109.default.createElement("div", { className: "Layer__profit-and-loss-row__children--content" }, (line_items || []).map((line_item) => /* @__PURE__ */ import_react109.default.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 = (0, import_classnames48.default)(
+    "Layer__table-wrapper",
+    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
+  );
+  const tableClassNames = (0, import_classnames48.default)(
+    "Layer__table",
+    componentName && `Layer__${componentName}__table`,
+    borderCollapse && `Layer__table__${borderCollapse}-rows`
+  );
+  return /* @__PURE__ */ import_react115.default.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ import_react115.default.createElement("table", { className: tableClassNames, ref: tableRef }, children));
 };
 
 // src/components/ProfitAndLossTable/empty_profit_and_loss_report.ts
@@ -10946,10 +11173,9 @@ var empty_profit_and_loss_report_default = {
   fully_categorized: false
 };
 
-// src/components/ProfitAndLossTable/ProfitAndLossTable.tsx
-var import_classnames45 = __toESM(require("classnames"));
-var ProfitAndLossTable = ({
-  lockExpanded,
+// src/components/ProfitAndLossTable/ProfitAndLossTableComponent.tsx
+var import_classnames49 = __toESM(require("classnames"));
+var ProfitAndLossTableComponent = ({
   asContainer,
   stringOverrides
 }) => {
@@ -10957,135 +11183,134 @@ var ProfitAndLossTable = ({
     data: actualData,
     isLoading,
     setSidebarScope
-  } = (0, import_react110.useContext)(ProfitAndLoss.Context);
+  } = (0, import_react116.useContext)(ProfitAndLoss.Context);
+  const { isOpen, setIsOpen } = useTableExpandRow();
+  (0, import_react116.useEffect)(() => {
+    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__ */ import_react110.default.createElement(
+    return /* @__PURE__ */ import_react116.default.createElement(
       "div",
       {
-        className: (0, import_classnames45.default)(
+        className: (0, import_classnames49.default)(
           "Layer__profit-and-loss-table__loader-container",
           asContainer && "Layer__component-container"
         )
       },
-      /* @__PURE__ */ import_react110.default.createElement(Loader2, null)
+      /* @__PURE__ */ import_react116.default.createElement(Loader2, null)
     );
   }
-  return /* @__PURE__ */ import_react110.default.createElement(import_react110.default.Fragment, null, /* @__PURE__ */ import_react110.default.createElement(
-    "div",
-    {
-      className: (0, import_classnames45.default)(
-        "Layer__profit-and-loss-table Layer__profit-and-loss-table--main",
-        asContainer && "Layer__component-container"
-      )
-    },
-    /* @__PURE__ */ import_react110.default.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.income,
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded,
-        scope: "revenue",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ import_react110.default.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.cost_of_goods_sold,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ import_react110.default.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__ */ import_react110.default.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.expenses,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ import_react110.default.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__ */ import_react110.default.createElement(
-      ProfitAndLossRow,
-      {
-        lineItem: data.taxes,
-        direction: "DEBIT" /* DEBIT */,
-        lockExpanded,
-        scope: "expenses",
-        setSidebarScope,
-        defaultExpanded: true
-      }
-    ),
-    /* @__PURE__ */ import_react110.default.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__ */ import_react116.default.createElement(import_react116.default.Fragment, { key: rowKey + "-" + rowIndex }, /* @__PURE__ */ import_react116.default.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__ */ import_react116.default.createElement(
+        TableCell,
+        {
+          primary: true,
+          withExpandIcon: expandable,
+          fullWidth: !!setSidebarScope2
         },
-        variant: "summation",
-        direction: "CREDIT" /* CREDIT */,
-        lockExpanded
-      }
-    )
-  ), data.other_outflows || data.personal_expenses ? /* @__PURE__ */ import_react110.default.createElement("div", { className: "Layer__profit-and-loss-table Layer__profit-and-loss-table__outflows" }, /* @__PURE__ */ import_react110.default.createElement(
-    ProfitAndLossRow,
+        lineItem.display_name,
+        " ",
+        setSidebarScope2 && /* @__PURE__ */ import_react116.default.createElement(
+          "span",
+          {
+            className: "Layer__profit-and-loss-row__detailed-chart-btn",
+            onClick: (e) => {
+              e.stopPropagation();
+              setSidebarScope2 && setSidebarScope2(scope ?? "expenses");
+            }
+          },
+          /* @__PURE__ */ import_react116.default.createElement(PieChart_default, null)
+        )
+      ),
+      /* @__PURE__ */ import_react116.default.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__ */ import_react116.default.createElement(Table, { borderCollapse: "collapse", bottomSpacing: false }, /* @__PURE__ */ import_react116.default.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__ */ import_react110.default.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__ */ import_react116.default.createElement(import_react116.default.Fragment, null, renderLineItem(data.other_outflows, 0, "other_outflows", 6), renderLineItem(data.personal_expenses, 0, "personal_expenses", 7)) : null));
+};
+
+// src/components/ProfitAndLossTable/ProfitAndLossTableWithProvider.tsx
+var ProfitAndLossTableWithProvider = (props) => {
+  return /* @__PURE__ */ import_react117.default.createElement(TableProvider, null, /* @__PURE__ */ import_react117.default.createElement(ProfitAndLossTableComponent, { ...props }));
 };
 
 // src/components/ProfitAndLoss/ProfitAndLoss.tsx
 var import_date_fns22 = require("date-fns");
-var PNLContext = (0, import_react111.createContext)({
+var PNLContext = (0, import_react118.createContext)({
   data: void 0,
   filteredDataRevenue: [],
   filteredTotalRevenue: void 0,
@@ -11121,21 +11346,21 @@ var ProfitAndLoss = ({
   asContainer = true
 }) => {
   const contextData = useProfitAndLoss({ tagFilter, reportingBasis });
-  return /* @__PURE__ */ import_react111.default.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ import_react111.default.createElement(Container, { name: "profit-and-loss" }, children) : children);
+  return /* @__PURE__ */ import_react118.default.createElement(PNLContext.Provider, { value: contextData }, asContainer ? /* @__PURE__ */ import_react118.default.createElement(Container, { name: "profit-and-loss" }, children) : children);
 };
 ProfitAndLoss.Chart = ProfitAndLossChart;
 ProfitAndLoss.Context = PNLContext;
 ProfitAndLoss.DatePicker = ProfitAndLossDatePicker;
 ProfitAndLoss.Summaries = ProfitAndLossSummaries;
-ProfitAndLoss.Table = ProfitAndLossTable;
+ProfitAndLoss.Table = ProfitAndLossTableWithProvider;
 ProfitAndLoss.DetailedCharts = ProfitAndLossDetailedCharts;
 
 // src/components/BalanceSheet/BalanceSheet.tsx
 var import_react127 = __toESM(require("react"));
 
 // src/contexts/BalanceSheetContext/BalanceSheetContext.tsx
-var import_react112 = require("react");
-var BalanceSheetContext = (0, import_react112.createContext)({
+var import_react119 = require("react");
+var BalanceSheetContext = (0, import_react119.createContext)({
   data: void 0,
   isLoading: false,
   error: void 0,
@@ -11143,48 +11368,8 @@ var BalanceSheetContext = (0, import_react112.createContext)({
   }
 });
 
-// src/contexts/TableContext/TableContext.tsx
-var import_react113 = __toESM(require("react"));
-var defaultValue = {
-  expandedRows: [],
-  setExpandedRows: () => {
-  },
-  expandAllRows: () => {
-  },
-  expandedAllRows: false,
-  setExpandedAllRows: () => {
-  }
-};
-var TableContext = (0, import_react113.createContext)(defaultValue);
-var TableProvider = ({ children }) => {
-  const [expandedRows, setExpandedRowsState] = (0, import_react113.useState)([]);
-  const [expandedAllRows, setExpandedAllRows] = (0, import_react113.useState)(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__ */ import_react113.default.createElement(TableContext.Provider, { value: contextValue }, children);
-};
-
 // src/hooks/useBalanceSheet/useBalanceSheet.tsx
-var import_react114 = require("react");
+var import_react120 = require("react");
 var import_date_fns23 = require("date-fns");
 var import_swr5 = __toESM(require("swr"));
 var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
@@ -11203,12 +11388,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
   const refetch = () => {
     mutate();
   };
-  (0, import_react114.useEffect)(() => {
+  (0, import_react120.useEffect)(() => {
     if (queryKey && (isLoading || isValidating)) {
       read("BALANCE_SHEET" /* BALANCE_SHEET */, queryKey);
     }
   }, [isLoading, isValidating]);
-  (0, import_react114.useEffect)(() => {
+  (0, import_react120.useEffect)(() => {
     if (queryKey && hasBeenTouched(queryKey)) {
       refetch();
     }
@@ -11217,12 +11402,12 @@ var useBalanceSheet = (date = /* @__PURE__ */ new Date()) => {
 };
 
 // src/components/BalanceSheetDatePicker/BalanceSheetDatePicker.tsx
-var import_react115 = __toESM(require("react"));
+var import_react121 = __toESM(require("react"));
 var BalanceSheetDatePicker = ({
   effectiveDate,
   setEffectiveDate
 }) => {
-  return /* @__PURE__ */ import_react115.default.createElement(import_react115.default.Fragment, null, /* @__PURE__ */ import_react115.default.createElement(
+  return /* @__PURE__ */ import_react121.default.createElement(import_react121.default.Fragment, null, /* @__PURE__ */ import_react121.default.createElement(
     DatePicker,
     {
       selected: effectiveDate,
@@ -11233,181 +11418,14 @@ var BalanceSheetDatePicker = ({
 };
 
 // src/components/BalanceSheetExpandAllButton/BalanceSheetExpandAllButton.tsx
-var import_react117 = __toESM(require("react"));
-
-// src/hooks/useTableExpandRow/useTableExpandRow.tsx
-var import_react116 = require("react");
-var useTableExpandRow = () => {
-  const {
-    expandedAllRows,
-    setExpandedAllRows,
-    expandAllRows,
-    expandedRows,
-    setExpandedRows
-  } = (0, import_react116.useContext)(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
+var import_react122 = __toESM(require("react"));
 var BalanceSheetExpandAllButton = () => {
   const { expandedAllRows, toggleAllRows } = useTableExpandRow();
-  return /* @__PURE__ */ import_react117.default.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
+  return /* @__PURE__ */ import_react122.default.createElement(Button, { onClick: () => toggleAllRows(), variant: "secondary" /* secondary */ }, !expandedAllRows ? "Expand all rows" : "Collapse all rows");
 };
 
 // src/components/BalanceSheetTable/BalanceSheetTable.tsx
 var import_react123 = __toESM(require("react"));
-
-// src/components/TableBody/TableBody.tsx
-var import_react118 = __toESM(require("react"));
-var TableBody = ({ children }) => {
-  return /* @__PURE__ */ import_react118.default.createElement("tbody", { className: "Layer__table-body" }, children);
-};
-
-// src/components/TableCell/TableCell.tsx
-var import_react119 = __toESM(require("react"));
-var import_classnames46 = __toESM(require("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 = (0, import_classnames46.default)(
-    "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__ */ import_react119.default.createElement("th", { className: cellClassNames }, /* @__PURE__ */ import_react119.default.createElement("span", { className: "Layer__table-cell-content" }, children));
-  }
-  return /* @__PURE__ */ import_react119.default.createElement("td", { className: cellClassNames }, /* @__PURE__ */ import_react119.default.createElement("span", { className: "Layer__table-cell-content" }, withExpandIcon && /* @__PURE__ */ import_react119.default.createElement(
-    ChevronDownFill_default,
-    {
-      className: "Layer__table-row--expand-icon",
-      size: 16
-    }
-  ), isCurrency ? amountString : children, " "));
-};
-
-// src/components/TableHead/TableHead.tsx
-var import_react120 = __toESM(require("react"));
-var TableHead = ({ children }) => {
-  return /* @__PURE__ */ import_react120.default.createElement("thead", { className: "Layer__table-header" }, children);
-};
-
-// src/components/TableRow/TableRow.tsx
-var import_react121 = __toESM(require("react"));
-var import_classnames47 = __toESM(require("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 = (0, import_classnames47.default)([
-    "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__ */ import_react121.default.createElement(import_react121.default.Fragment, null, withDivider && withDividerPosition === "top" && /* @__PURE__ */ import_react121.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react121.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })), /* @__PURE__ */ import_react121.default.createElement("tr", { "data-key": rowKey, className: rowClassNames, onClick: toggleExpanded }, children), withDivider && withDividerPosition === "bottom" && /* @__PURE__ */ import_react121.default.createElement("tr", { className: "Layer__table-empty-row" }, /* @__PURE__ */ import_react121.default.createElement("td", { colSpan: Array.isArray(children) ? children.length : 1 })));
-};
-
-// src/components/Table/Table.tsx
-var import_react122 = __toESM(require("react"));
-var import_classnames48 = __toESM(require("classnames"));
-var Table = ({
-  componentName,
-  children,
-  borderCollapse = "separate",
-  bottomSpacing = true
-}) => {
-  const tableRef = (0, import_react122.useRef)(null);
-  const prevChildrenRef = (0, import_react122.useRef)([]);
-  (0, import_react122.useEffect)(() => {
-    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 = (0, import_classnames48.default)(
-    "Layer__table-wrapper",
-    bottomSpacing && "Layer__table-wrapper--bottom-spacing"
-  );
-  const tableClassNames = (0, import_classnames48.default)(
-    "Layer__table",
-    componentName && `Layer__${componentName}__table`,
-    borderCollapse && `Layer__table__${borderCollapse}-rows`
-  );
-  return /* @__PURE__ */ import_react122.default.createElement("div", { className: tableWrapperClassNames }, /* @__PURE__ */ import_react122.default.createElement("table", { className: tableClassNames, ref: tableRef }, children));
-};
-
-// src/components/BalanceSheetTable/BalanceSheetTable.tsx
 var BalanceSheetTable = ({
   data,
   config,
@@ -11486,7 +11504,7 @@ var ViewHeader = ({ title, controls }) => {
 
 // src/components/Panel/Panel.tsx
 var import_react125 = __toESM(require("react"));
-var import_classnames49 = __toESM(require("classnames"));
+var import_classnames50 = __toESM(require("classnames"));
 var Panel = ({
   children,
   className,
@@ -11502,14 +11520,14 @@ var Panel = ({
       setSidebarHeight(parentRef?.current?.offsetHeight - 1);
     }
   }, [parentRef?.current?.offsetHeight, sidebarIsOpen]);
-  const sidebarClass = (0, import_classnames49.default)(
+  const sidebarClass = (0, import_classnames50.default)(
     "Layer__panel__sidebar",
     defaultSidebarHeight && "Layer__panel__sidebar--default"
   );
   return /* @__PURE__ */ import_react125.default.createElement(
     "div",
     {
-      className: (0, import_classnames49.default)(
+      className: (0, import_classnames50.default)(
         "Layer__panel",
         className,
         sidebarIsOpen && "Layer__panel--open"
@@ -11530,7 +11548,7 @@ var Panel = ({
 };
 
 // src/components/View/View.tsx
-var import_classnames50 = __toESM(require("classnames"));
+var import_classnames51 = __toESM(require("classnames"));
 var View = ({
   title,
   children,
@@ -11542,7 +11560,7 @@ var View = ({
 }) => {
   const { theme } = useLayerContext();
   const styles = parseStylesFromThemeConfig(theme);
-  const viewClassNames = (0, import_classnames50.default)(
+  const viewClassNames = (0, import_classnames51.default)(
     "Layer__view",
     type === "panel" && "Layer__view--panel",
     viewClassName
@@ -12532,7 +12550,7 @@ var Edit2 = ({ size = 18, ...props }) => /* @__PURE__ */ React142.createElement(
 var Edit2_default = Edit2;
 
 // src/components/ChartOfAccountsRow/ChartOfAccountsRow.tsx
-var import_classnames51 = __toESM(require("classnames"));
+var import_classnames52 = __toESM(require("classnames"));
 var INDENTATION = 24;
 var EXPANDED_STYLE2 = {
   height: 52,
@@ -12587,7 +12605,7 @@ var ChartOfAccountsRow = ({
       setIsOpen(expandAll === "collapsed" ? false : true);
     }
   }, [expandAll]);
-  const baseClass = (0, import_classnames51.default)(
+  const baseClass = (0, import_classnames52.default)(
     "Layer__table-row",
     isOpen ? "Layer__table-row--expanded" : "Layer__table-row--collapsed",
     !expanded && "Layer__table-row--hidden",
@@ -12595,11 +12613,11 @@ var ChartOfAccountsRow = ({
     form?.accountId === account.id && "Layer__table-row--active",
     !showComponent && "Layer__table-row--anim-starting-state"
   );
-  const desktopRowClass = (0, import_classnames51.default)(
+  const desktopRowClass = (0, import_classnames52.default)(
     baseClass,
     "Layer__chart-of-accounts__row---desktop"
   );
-  const mobileRowClass = (0, import_classnames51.default)(
+  const mobileRowClass = (0, import_classnames52.default)(
     baseClass,
     "Layer__chart-of-accounts__row---mobile"
   );
@@ -13039,9 +13057,9 @@ var import_react146 = __toESM(require("react"));
 
 // src/components/Card/Card.tsx
 var import_react142 = __toESM(require("react"));
-var import_classnames52 = __toESM(require("classnames"));
+var import_classnames53 = __toESM(require("classnames"));
 var Card = ({ children, className }) => {
-  return /* @__PURE__ */ import_react142.default.createElement("div", { className: (0, import_classnames52.default)("Layer__card", className) }, children);
+  return /* @__PURE__ */ import_react142.default.createElement("div", { className: (0, import_classnames53.default)("Layer__card", className) }, children);
 };
 
 // src/components/DateTime/DateTime.tsx
@@ -13083,14 +13101,14 @@ var DateTime = ({
 
 // src/components/DetailsList/DetailsList.tsx
 var import_react144 = __toESM(require("react"));
-var import_classnames53 = __toESM(require("classnames"));
+var import_classnames54 = __toESM(require("classnames"));
 var DetailsList = ({
   title,
   children,
   className,
   actions
 }) => {
-  return /* @__PURE__ */ import_react144.default.createElement("div", { className: (0, import_classnames53.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react144.default.createElement(Header, null, /* @__PURE__ */ import_react144.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react144.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react144.default.createElement("ul", { className: "Layer__details-list__list" }, children));
+  return /* @__PURE__ */ import_react144.default.createElement("div", { className: (0, import_classnames54.default)("Layer__details-list", className) }, title && /* @__PURE__ */ import_react144.default.createElement(Header, null, /* @__PURE__ */ import_react144.default.createElement(Heading, { size: "secondary" /* secondary */ }, title), actions && /* @__PURE__ */ import_react144.default.createElement("div", { className: "Layer__details-list__actions" }, actions)), /* @__PURE__ */ import_react144.default.createElement("ul", { className: "Layer__details-list__list" }, children));
 };
 
 // src/components/DetailsList/DetailsListItem.tsx
@@ -13223,7 +13241,7 @@ var LedgerAccountEntryDetails = ({ stringOverrides }) => {
 
 // src/components/LedgerAccount/LedgerAccountRow.tsx
 var import_react147 = __toESM(require("react"));
-var import_classnames54 = __toESM(require("classnames"));
+var import_classnames55 = __toESM(require("classnames"));
 var import_date_fns31 = require("date-fns");
 var LedgerAccountRow = ({
   row,
@@ -13247,7 +13265,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ import_react147.default.createElement(
       "tr",
       {
-        className: (0, import_classnames54.default)(
+        className: (0, import_classnames55.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13280,7 +13298,7 @@ var LedgerAccountRow = ({
     return /* @__PURE__ */ import_react147.default.createElement(
       "tr",
       {
-        className: (0, import_classnames54.default)(
+        className: (0, import_classnames55.default)(
           "Layer__table-row",
           row.entry_id === selectedEntryId && "Layer__table-row--active",
           initialLoad && "initial-load",
@@ -13309,7 +13327,7 @@ var LedgerAccountRow = ({
   return /* @__PURE__ */ import_react147.default.createElement(
     "tr",
     {
-      className: (0, import_classnames54.default)(
+      className: (0, import_classnames55.default)(
         "Layer__table-row",
         row.entry_id === selectedEntryId && "Layer__table-row--active",
         initialLoad && "initial-load",
@@ -13335,7 +13353,7 @@ var LedgerAccountRow = ({
 };
 
 // src/components/LedgerAccount/LedgerAccountIndex.tsx
-var import_classnames55 = __toESM(require("classnames"));
+var import_classnames56 = __toESM(require("classnames"));
 var LedgerAccount = ({
   containerRef,
   pageSize = 15,
@@ -13364,7 +13382,7 @@ var LedgerAccount = ({
       return () => clearTimeout(timeoutLoad);
     }
   }, [isLoading]);
-  const baseClassName = (0, import_classnames55.default)(
+  const baseClassName = (0, import_classnames56.default)(
     "Layer__ledger-account__index",
     accountId && "open"
   );
@@ -13834,7 +13852,7 @@ var import_react157 = __toESM(require("react"));
 
 // src/components/JournalRow/JournalRow.tsx
 var import_react152 = __toESM(require("react"));
-var import_classnames56 = __toESM(require("classnames"));
+var import_classnames57 = __toESM(require("classnames"));
 var import_date_fns32 = require("date-fns");
 var INDENTATION2 = 24;
 var EXPANDED_STYLE3 = {
@@ -13881,7 +13899,7 @@ var JournalRow = ({
     transitionDelay: `${lineItemsLength - 15 * index}ms`
   };
   const [showComponent, setShowComponent] = (0, import_react152.useState)(false);
-  const baseClass = (0, import_classnames56.default)(
+  const baseClass = (0, import_classnames57.default)(
     "Layer__journal-table-row",
     rowId(row) === selectedEntryId && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -13889,7 +13907,7 @@ var JournalRow = ({
     showComponent ? "show" : "Layer__table-row--anim-starting-state",
     isOpen && "Layer__journal__table-row--expanded"
   );
-  const journalEntryLineClass = (0, import_classnames56.default)(
+  const journalEntryLineClass = (0, import_classnames57.default)(
     "Layer__journal-entry-table-row",
     selectedEntries && "Layer__table-row--active",
     initialLoad && "initial-load",
@@ -14727,7 +14745,7 @@ var SmileIcon_default = SmileIcon;
 
 // src/components/TasksListItem/TasksListItem.tsx
 var import_react162 = __toESM(require("react"));
-var import_classnames57 = __toESM(require("classnames"));
+var import_classnames58 = __toESM(require("classnames"));
 var TasksListItem = ({
   task,
   goToNextPageIfAllComplete,
@@ -14736,16 +14754,16 @@ var TasksListItem = ({
   const [isOpen, setIsOpen] = (0, import_react162.useState)(defaultOpen);
   const [userResponse, setUserResponse] = (0, import_react162.useState)(task.user_response || "");
   const { submitResponseToTask: submitResponseToTask2 } = (0, import_react162.useContext)(TasksContext);
-  const taskBodyClassName = (0, import_classnames57.default)(
+  const taskBodyClassName = (0, import_classnames58.default)(
     "Layer__tasks-list-item__body",
     isOpen && "Layer__tasks-list-item__body--expanded",
     isComplete(task.status) && "Layer__tasks-list-item--completed"
   );
-  const taskHeadClassName = (0, import_classnames57.default)(
+  const taskHeadClassName = (0, import_classnames58.default)(
     "Layer__tasks-list-item__head-info",
     isComplete(task.status) ? "Layer__tasks-list-item--completed" : "Layer__tasks-list-item--pending"
   );
-  const taskItemClassName = (0, import_classnames57.default)(
+  const taskItemClassName = (0, import_classnames58.default)(
     "Layer__tasks-list-item",
     isOpen && "Layer__tasks-list-item__expanded"
   );
@@ -14844,7 +14862,7 @@ var TasksList = ({ pageSize = 10 }) => {
 
 // src/components/TasksPending/TasksPending.tsx
 var import_react164 = __toESM(require("react"));
-var import_classnames58 = __toESM(require("classnames"));
+var import_classnames59 = __toESM(require("classnames"));
 var import_date_fns33 = require("date-fns");
 var import_recharts4 = require("recharts");
 var TasksPending = () => {
@@ -14860,7 +14878,7 @@ var TasksPending = () => {
       value: data?.filter((task) => !isComplete(task.status)).length
     }
   ];
-  const taskStatusClassName = (0, import_classnames58.default)(
+  const taskStatusClassName = (0, import_classnames59.default)(
     completedTasks && completedTasks > 0 ? "Layer__tasks-pending-bar__status--done" : "Layer__tasks-pending-bar__status--pending"
   );
   return /* @__PURE__ */ import_react164.default.createElement("div", { className: "Layer__tasks-pending" }, /* @__PURE__ */ import_react164.default.createElement(Text, { size: "lg" /* lg */ }, (0, import_date_fns33.format)(Date.now(), "MMMM")), /* @__PURE__ */ import_react164.default.createElement("div", { className: "Layer__tasks-pending-bar" }, /* @__PURE__ */ import_react164.default.createElement(Text, { size: "sm" /* sm */ }, /* @__PURE__ */ import_react164.default.createElement("span", { className: taskStatusClassName }, completedTasks), "/", data?.length, " done"), /* @__PURE__ */ import_react164.default.createElement(import_recharts4.PieChart, { width: 24, height: 24, className: "mini-chart" }, /* @__PURE__ */ import_react164.default.createElement(
@@ -14894,7 +14912,7 @@ var TasksPending = () => {
 };
 
 // src/components/Tasks/Tasks.tsx
-var import_classnames59 = __toESM(require("classnames"));
+var import_classnames60 = __toESM(require("classnames"));
 var UseTasksContext = (0, import_react165.createContext)({
   data: void 0,
   isLoading: void 0,
@@ -14966,7 +14984,7 @@ var TasksComponent = ({
   ), /* @__PURE__ */ import_react165.default.createElement(
     "div",
     {
-      className: (0, import_classnames59.default)(
+      className: (0, import_classnames60.default)(
         "Layer__tasks__content",
         !open && "Layer__tasks__content--collapsed"
       )
@@ -15066,7 +15084,7 @@ var BookkeepingUpsellBar = ({
 
 // src/views/BookkeepingOverview/BookkeepingOverview.tsx
 var import_react168 = __toESM(require("react"));
-var import_classnames60 = __toESM(require("classnames"));
+var import_classnames61 = __toESM(require("classnames"));
 var BookkeepingOverview = ({
   title,
   // deprecated
@@ -15126,7 +15144,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ import_react168.default.createElement(
       Container,
       {
-        name: (0, import_classnames60.default)(
+        name: (0, import_classnames61.default)(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "revenue" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15142,7 +15160,7 @@ var BookkeepingOverview = ({
     ), /* @__PURE__ */ import_react168.default.createElement(
       Container,
       {
-        name: (0, import_classnames60.default)(
+        name: (0, import_classnames61.default)(
           "bookkeeping-overview-profit-and-loss-chart",
           pnlToggle !== "expenses" && "bookkeeping-overview-profit-and-loss-chart--hidden"
         )
@@ -15173,13 +15191,13 @@ var BadgeLoader = ({ children }) => {
 
 // src/components/NotificationCard/NotificationCard.tsx
 var import_react170 = __toESM(require("react"));
-var import_classnames61 = __toESM(require("classnames"));
+var import_classnames62 = __toESM(require("classnames"));
 var NotificationCard = ({
   onClick,
   children,
   className
 }) => {
-  return /* @__PURE__ */ import_react170.default.createElement("div", { className: (0, import_classnames61.default)("Layer__notification-card", className) }, /* @__PURE__ */ import_react170.default.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ import_react170.default.createElement(
+  return /* @__PURE__ */ import_react170.default.createElement("div", { className: (0, import_classnames62.default)("Layer__notification-card", className) }, /* @__PURE__ */ import_react170.default.createElement("div", { className: "Layer__notification-card__main" }, children), /* @__PURE__ */ import_react170.default.createElement(
     IconButton,
     {
       icon: /* @__PURE__ */ import_react170.default.createElement(ChevronRight_default, null),
@@ -15258,7 +15276,7 @@ var TransactionToReviewCard = ({
 };
 
 // src/views/AccountingOverview/AccountingOverview.tsx
-var import_classnames62 = __toESM(require("classnames"));
+var import_classnames63 = __toESM(require("classnames"));
 var AccountingOverview = ({
   title = "Accounting overview",
   enableOnboarding = false,
@@ -15313,7 +15331,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ import_react172.default.createElement(
     Container,
     {
-      name: (0, import_classnames62.default)(
+      name: (0, import_classnames63.default)(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "revenue" && "accounting-overview-profit-and-loss-chart--hidden"
       )
@@ -15330,7 +15348,7 @@ var AccountingOverview = ({
   ), /* @__PURE__ */ import_react172.default.createElement(
     Container,
     {
-      name: (0, import_classnames62.default)(
+      name: (0, import_classnames63.default)(
         "accounting-overview-profit-and-loss-chart",
         pnlToggle !== "expenses" && "accounting-overview-profit-and-loss-chart--hidden"
       )