@embeddable.com/remarkable-ui 2.0.39 → 2.0.41

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   styles
-} from "./chunk-3SAVZAMC.js";
+} from "./chunk-54RMM3OQ.js";
 
 // src/components/charts/bars/BarChart.tsx
 import { useRef } from "react";
@@ -924,7 +924,7 @@ var PieChart = ({
 
 // src/components/charts/tables/HeatMap/HeatMap.tsx
 import { useMemo, useCallback } from "react";
-import tableStyles from "./tables.module-6DZDKDSH.module.css";
+import tableStyles from "./tables.module-6REGLCSQ.module.css";
 import clsx2 from "clsx";
 
 // src/components/charts/tables/HeatMap/HeatMap.utils.ts
@@ -1212,71 +1212,89 @@ var HeatMap = ({
 };
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
-import tableStyles2 from "./tables.module-6DZDKDSH.module.css";
+import { Fragment as Fragment3, useMemo as useMemo3, useState as useState3 } from "react";
+import tableStyles2 from "./tables.module-6REGLCSQ.module.css";
 import clsx3 from "clsx";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { IconLoader2, IconChevronDown, IconChevronRight } from "@tabler/icons-react";
+
+// src/components/charts/tables/PivotTable/PivotTable.utils.ts
+import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
 var getPercentageDisplay = (percentage, percentageDecimalPlaces) => {
   return `${percentage.toFixed(percentageDecimalPlaces)}%`;
 };
-var PivotTable = ({
-  columnWidth,
-  firstColumnWidth,
-  data,
-  measures,
-  rowDimension,
-  columnDimension,
-  progressive = true,
-  batchSize = 100,
-  batchDelayMs = 0,
-  rowTotalsFor = [],
-  columnTotalsFor = [],
-  totalLabel = "Total",
-  className
-}) => {
-  const rowValues = useMemo2(() => {
-    const s = /* @__PURE__ */ new Set();
-    for (const d of data) {
-      const rowValue = d[rowDimension.key];
-      if (rowValue != null) s.add(rowValue);
-    }
-    return Array.from(s);
-  }, [data, rowDimension.key]);
-  const columnValues = useMemo2(() => {
-    const s = /* @__PURE__ */ new Set();
-    for (const d of data) {
-      const columnValue = d[columnDimension.key];
-      if (columnValue != null) s.add(columnValue);
+var getCellDisplayValue2 = (value, measure, dataObject, denominatorTotal) => {
+  if (measure.showAsPercentage) {
+    if (isNumber(Number(value)) && isNumber(denominatorTotal) && denominatorTotal > 0) {
+      return getPercentageDisplay(
+        value / denominatorTotal * 100,
+        measure.percentageDecimalPlaces ?? 0
+      );
     }
-    return Array.from(s);
-  }, [data, columnDimension.key]);
-  const cellMap = useMemo2(() => {
-    const map = /* @__PURE__ */ new Map();
-    for (const d of data) {
-      const r = String(d[rowDimension.key]);
-      const c = String(d[columnDimension.key]);
-      if (!map.has(r)) map.set(r, /* @__PURE__ */ new Map());
-      map.get(r).set(c, d);
+  }
+  return measure.accessor ? measure.accessor(dataObject) : value;
+};
+var buildCellMap = (rows, rowKey, colKey) => {
+  const map = /* @__PURE__ */ new Map();
+  for (const d of rows) {
+    const r = String(d[rowKey]);
+    const c = String(d[colKey]);
+    if (!map.has(r)) map.set(r, /* @__PURE__ */ new Map());
+    map.get(r).set(c, d);
+  }
+  return map;
+};
+var getMeasureTotal = (totalsMap, key, measureIndex, measuresCount) => {
+  const totals = totalsMap.get(key) ?? Array(measuresCount).fill(0);
+  return measureIndex >= 0 ? totals[measureIndex] ?? 0 : 0;
+};
+var computeSubRowTotal = (cellMap, rowKey, columnValues, measureKey) => {
+  let total = 0;
+  for (const columnValue of columnValues) {
+    const data = cellMap.get(rowKey)?.get(String(columnValue)) ?? {};
+    const val = Number(data?.[measureKey]);
+    if (!Number.isNaN(val)) total += val;
+  }
+  return total;
+};
+var useProgressiveRows = (rowValues, options) => {
+  const { progressive, batchSize, batchDelayMs } = options;
+  const [visibleCount, setVisibleCount] = useState2(
+    () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
+  );
+  useEffect(() => {
+    if (!progressive) {
+      setVisibleCount(rowValues.length);
+      return;
     }
-    return map;
-  }, [data, rowDimension.key, columnDimension.key]);
-  const rowTotalsSet = useMemo2(() => new Set(rowTotalsFor), [rowTotalsFor]);
-  const columnTotalsSet = useMemo2(() => new Set(columnTotalsFor), [columnTotalsFor]);
-  const hasRowTotals = rowTotalsSet.size > 0;
-  const hasColumnTotals = columnTotalsSet.size > 0;
-  const measureIndexByKey = useMemo2(() => {
-    const map = /* @__PURE__ */ new Map();
-    measures.forEach((m, i) => map.set(String(m.key), i));
-    return map;
-  }, [measures]);
-  const { colTotals, rowTotals, grandTotals } = useMemo2(() => {
+    let cancelled = false;
+    let t = null;
+    setVisibleCount(Math.min(batchSize, rowValues.length));
+    const tick = () => {
+      setVisibleCount((prev) => {
+        const next = Math.min(prev + batchSize, rowValues.length);
+        if (next < rowValues.length && !cancelled) {
+          t = window.setTimeout(tick, batchDelayMs);
+        }
+        return next;
+      });
+    };
+    t = window.setTimeout(tick, batchDelayMs);
+    return () => {
+      cancelled = true;
+      if (t !== null) window.clearTimeout(t);
+    };
+  }, [progressive, batchSize, batchDelayMs, rowValues.length]);
+  return progressive ? rowValues.slice(0, visibleCount) : rowValues;
+};
+var usePivotTotals = (data, measures, rowDimensionKey, columnDimensionKey, columnValues, rowValues) => {
+  return useMemo2(() => {
     const cTotals = /* @__PURE__ */ new Map();
     const rTotals = /* @__PURE__ */ new Map();
     const gTotals = measures.map(() => 0);
     for (const d of data) {
-      const r = String(d[rowDimension.key]);
-      const c = String(d[columnDimension.key]);
+      const r = String(d[rowDimensionKey]);
+      const c = String(d[columnDimensionKey]);
       const cArr = cTotals.get(c) ?? measures.map(() => 0);
       const rArr = rTotals.get(r) ?? measures.map(() => 0);
       measures.forEach((m, i) => {
@@ -1306,34 +1324,146 @@ var PivotTable = ({
         );
     }
     return { colTotals: cTotals, rowTotals: rTotals, grandTotals: gTotals };
-  }, [data, measures, rowDimension.key, columnDimension.key, columnValues, rowValues]);
-  const [visibleCount, setVisibleCount] = useState2(
-    () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
-  );
-  useEffect(() => {
-    if (!progressive) {
-      setVisibleCount(rowValues.length);
-      return;
+  }, [data, measures, rowDimensionKey, columnDimensionKey, columnValues, rowValues]);
+};
+
+// src/components/charts/tables/PivotTable/PivotTable.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var PivotTable = ({
+  columnWidth,
+  firstColumnWidth,
+  data,
+  measures,
+  rowDimension,
+  columnDimension,
+  progressive = true,
+  batchSize = 100,
+  batchDelayMs = 0,
+  rowTotalsFor = [],
+  columnTotalsFor = [],
+  totalLabel = "Total",
+  className,
+  expandableRows = false,
+  subRowsByRow,
+  loadingRows,
+  onRowExpand,
+  subRowDimension
+}) => {
+  const effectiveSubRowDimension = subRowDimension ?? rowDimension;
+  const rowValues = useMemo3(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const d of data) {
+      const rowValue = d[rowDimension.key];
+      if (rowValue != null) s.add(rowValue);
     }
-    let cancelled = false;
-    let t = null;
-    setVisibleCount(0);
-    const tick = () => {
-      setVisibleCount((prev) => {
-        const next = Math.min(prev + batchSize, rowValues.length);
-        if (next < rowValues.length && !cancelled) {
-          t = window.setTimeout(tick, batchDelayMs);
+    return Array.from(s);
+  }, [data, rowDimension.key]);
+  const columnValues = useMemo3(() => {
+    const s = /* @__PURE__ */ new Set();
+    for (const d of data) {
+      const columnValue = d[columnDimension.key];
+      if (columnValue != null) s.add(columnValue);
+    }
+    return Array.from(s);
+  }, [data, columnDimension.key]);
+  const cellMap = useMemo3(
+    () => buildCellMap(data, rowDimension.key, columnDimension.key),
+    [data, rowDimension.key, columnDimension.key]
+  );
+  const rowTotalsSet = useMemo3(() => new Set(rowTotalsFor), [rowTotalsFor]);
+  const columnTotalsSet = useMemo3(() => new Set(columnTotalsFor), [columnTotalsFor]);
+  const hasRowTotals = rowTotalsSet.size > 0;
+  const hasColumnTotals = columnTotalsSet.size > 0;
+  const measureIndexByKey = useMemo3(() => {
+    const map = /* @__PURE__ */ new Map();
+    measures.forEach((m, i) => map.set(String(m.key), i));
+    return map;
+  }, [measures]);
+  const { colTotals, rowTotals, grandTotals } = usePivotTotals(
+    data,
+    measures,
+    rowDimension.key,
+    columnDimension.key,
+    columnValues,
+    rowValues
+  );
+  const [expandedRows, setExpandedRows] = useState3(() => /* @__PURE__ */ new Set());
+  const handleRowExpand = (rowKey) => {
+    setExpandedRows((prev) => {
+      const next = new Set(prev);
+      const wasExpanded = next.has(rowKey);
+      if (wasExpanded) {
+        next.delete(rowKey);
+      } else {
+        next.add(rowKey);
+        if (!subRowsByRow?.has(rowKey)) {
+          onRowExpand?.(rowKey);
         }
-        return next;
-      });
-    };
-    t = window.setTimeout(tick, batchDelayMs);
-    return () => {
-      cancelled = true;
-      if (t !== null) window.clearTimeout(t);
-    };
-  }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
-  const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
+      }
+      return next;
+    });
+  };
+  const visibleRows = useProgressiveRows(rowValues, {
+    progressive,
+    batchSize,
+    batchDelayMs
+  });
+  const renderMeasureCells = (rowCellMap, rowKey, keyPrefix) => columnValues.flatMap(
+    (columnValue) => measures.map((measure, idx) => {
+      const object = rowCellMap.get(rowKey)?.get(String(columnValue)) ?? {};
+      const value = object?.[measure.key];
+      const key = `${keyPrefix}-${columnValue}-${measure.key}-${idx}`;
+      const mi = measureIndexByKey.get(String(measure.key)) ?? -1;
+      const colTotal = getMeasureTotal(colTotals, String(columnValue), mi, measures.length);
+      const displayValue = getCellDisplayValue2(value, measure, object, colTotal);
+      return /* @__PURE__ */ jsx9("td", { title: displayValue, children: displayValue }, key);
+    })
+  );
+  const renderRowTotalCells = (getTotalValue, keyPrefix) => {
+    if (!hasRowTotals) return null;
+    return measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
+      const measureIndex = measureIndexByKey.get(measure.key) ?? -1;
+      const key = `${keyPrefix}-${measure.key}-${idx}`;
+      const value = getTotalValue(measure.key, measureIndex);
+      const displayValue = getCellDisplayValue2(
+        value,
+        measure,
+        { [measure.key]: value },
+        grandTotals[measureIndex] || 1
+      );
+      return /* @__PURE__ */ jsx9("td", { className: tableStyles2.boltCell, title: displayValue, children: displayValue }, key);
+    });
+  };
+  const renderSubRows = (rowKey, subRows) => {
+    const subRowValues = Array.from(
+      new Set(subRows.map((sr) => sr[effectiveSubRowDimension.key]).filter((v) => v != null))
+    );
+    const subRowCellMap = buildCellMap(subRows, effectiveSubRowDimension.key, columnDimension.key);
+    return subRowValues.map((subRowValue, subRowIdx) => {
+      const subRowDimensionValue = effectiveSubRowDimension.formatValue ? effectiveSubRowDimension.formatValue(subRowValue) : subRowValue;
+      return /* @__PURE__ */ jsxs4("tr", { className: tableStyles2.subRow, children: [
+        /* @__PURE__ */ jsx9(
+          "th",
+          {
+            scope: "row",
+            className: clsx3(tableStyles2.stickyFirstColumn, tableStyles2.subRowFirstColumn),
+            style: getTableCellWidthStyle(firstColumnWidth),
+            title: subRowDimensionValue,
+            children: /* @__PURE__ */ jsx9("span", { children: subRowDimensionValue })
+          }
+        ),
+        renderMeasureCells(
+          subRowCellMap,
+          String(subRowValue),
+          `sub-cell-${rowKey}-${subRowIdx}`
+        ),
+        renderRowTotalCells(
+          (key) => computeSubRowTotal(subRowCellMap, String(subRowValue), columnValues, key),
+          `sub-total-${rowKey}-${subRowIdx}`
+        )
+      ] }, `sub-${rowKey}-${subRowIdx}`);
+    });
+  };
   return /* @__PURE__ */ jsx9("div", { className: clsx3(tableStyles2.tableFullContainer, className), children: /* @__PURE__ */ jsx9(
     "div",
     {
@@ -1356,6 +1486,7 @@ var PivotTable = ({
                     rowSpan: 1,
                     title: columnDimension.label,
                     className: tableStyles2.stickyFirstColumn,
+                    style: getTableCellWidthStyle(firstColumnWidth),
                     children: columnDimension.label
                   }
                 ),
@@ -1423,56 +1554,58 @@ var PivotTable = ({
             ] }),
             /* @__PURE__ */ jsxs4("tbody", { children: [
               visibleRows.map((row) => {
+                const rowKey = String(row);
+                const isExpanded = expandedRows.has(rowKey);
+                const isLoading = loadingRows?.has(rowKey) ?? false;
+                const subRows = subRowsByRow?.get(rowKey) ?? [];
+                const hasLoadedSubRows = subRows.length > 0;
                 const rowDimensionValue = rowDimension.formatValue ? rowDimension.formatValue(row) : row;
-                return /* @__PURE__ */ jsxs4("tr", { children: [
-                  /* @__PURE__ */ jsx9(
-                    "th",
+                const ariaLabel = expandableRows ? isLoading ? "Loading" : isExpanded ? `Collapse ${rowDimensionValue}` : `Expand ${rowDimensionValue}` : "";
+                const showSubRows = isExpanded && !isLoading && hasLoadedSubRows;
+                return /* @__PURE__ */ jsxs4(Fragment3, { children: [
+                  /* @__PURE__ */ jsxs4(
+                    "tr",
                     {
-                      scope: "row",
+                      className: clsx3(isExpanded && tableStyles2.expandedRow),
                       title: rowDimensionValue,
-                      className: tableStyles2.stickyFirstColumn,
-                      children: rowDimensionValue
-                    }
-                  ),
-                  columnValues.flatMap(
-                    (columnValue) => measures.map((measure, idx) => {
-                      const object = cellMap.get(String(row))?.get(String(columnValue)) ?? {};
-                      const value = object?.[measure.key];
-                      const key = `cell-${row}-${columnValue}-${measure.key}-${idx}`;
-                      const getDisplayValue = () => {
-                        if (measure.showAsPercentage) {
-                          const mi = measureIndexByKey.get(String(measure.key)) ?? -1;
-                          const totalsForCol = colTotals.get(String(columnValue)) ?? measures.map(() => 0);
-                          const colTotal = mi >= 0 ? totalsForCol[mi] ?? 0 : 0;
-                          const shouldShowPct = measure.showAsPercentage && isNumber(Number(value)) && isNumber(colTotal) && colTotal > 0;
-                          if (shouldShowPct) {
-                            const percentage = value / colTotal * 100;
-                            return `${percentage.toFixed(measure.percentageDecimalPlaces ?? 0)}%`;
+                      children: [
+                        /* @__PURE__ */ jsx9(
+                          "th",
+                          {
+                            scope: "row",
+                            title: rowDimensionValue,
+                            className: clsx3(
+                              tableStyles2.stickyFirstColumn,
+                              expandableRows && tableStyles2.expandableRowCell
+                            ),
+                            onClick: () => expandableRows && handleRowExpand(rowKey),
+                            onKeyDown: (e) => {
+                              if (expandableRows && (e.key === "Enter" || e.key === " ")) {
+                                e.preventDefault();
+                                handleRowExpand(rowKey);
+                              }
+                            },
+                            tabIndex: expandableRows ? 0 : void 0,
+                            role: expandableRows ? "button" : void 0,
+                            "aria-expanded": expandableRows ? isExpanded : void 0,
+                            style: getTableCellWidthStyle(firstColumnWidth),
+                            "aria-label": ariaLabel,
+                            children: /* @__PURE__ */ jsxs4("span", { className: tableStyles2.firstColumnCell, children: [
+                              expandableRows && /* @__PURE__ */ jsx9(Fragment4, { children: isLoading ? /* @__PURE__ */ jsx9(IconLoader2, { className: tableStyles2.subRowLoading }) : isExpanded ? /* @__PURE__ */ jsx9(IconChevronDown, {}) : /* @__PURE__ */ jsx9(IconChevronRight, {}) }),
+                              /* @__PURE__ */ jsx9("span", { children: rowDimensionValue })
+                            ] })
                           }
-                        }
-                        return measure.accessor ? measure.accessor(object) : value;
-                      };
-                      const columnValueDisplay = getDisplayValue();
-                      return /* @__PURE__ */ jsx9("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
-                    })
-                  ),
-                  hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
-                    const totalsForRow = rowTotals.get(String(row)) ?? measures.map(() => 0);
-                    const measureIndex = measureIndexByKey.get(measure.key) ?? -1;
-                    const key = `row-total-${String(row)}-${measure.key}-${idx}`;
-                    const value = measureIndex >= 0 ? totalsForRow[measureIndex] ?? 0 : 0;
-                    let displayValue = value;
-                    if (measure.showAsPercentage) {
-                      displayValue = getPercentageDisplay(
-                        value / (grandTotals[measureIndex] || 1) * 100,
-                        measure.percentageDecimalPlaces ?? 0
-                      );
-                    } else if (measure.accessor) {
-                      displayValue = measure.accessor({ [measure.key]: value });
+                        ),
+                        renderMeasureCells(cellMap, String(row), `cell-${row}`),
+                        renderRowTotalCells(
+                          (_key, mi) => getMeasureTotal(rowTotals, String(row), mi, measures.length),
+                          `row-total-${String(row)}`
+                        )
+                      ]
                     }
-                    return /* @__PURE__ */ jsx9("td", { className: tableStyles2.boltCell, title: displayValue, children: displayValue }, key);
-                  })
-                ] }, `row-${row}`);
+                  ),
+                  showSubRows && renderSubRows(rowKey, subRows)
+                ] }, `row-group-${rowKey}`);
               }),
               hasColumnTotals && /* @__PURE__ */ jsxs4("tr", { className: tableStyles2.stickyLastRow, children: [
                 /* @__PURE__ */ jsx9(
@@ -1481,16 +1614,21 @@ var PivotTable = ({
                     scope: "row",
                     className: clsx3(tableStyles2.stickyFirstColumn, tableStyles2.boltCell),
                     title: totalLabel,
+                    style: getTableCellWidthStyle(firstColumnWidth),
                     children: totalLabel
                   }
                 ),
                 columnValues.flatMap(
                   (columnValue) => measures.map((measure, idx) => {
                     const show = columnTotalsSet.has(String(measure.key));
-                    const totalsForCol = colTotals.get(String(columnValue)) ?? measures.map(() => 0);
-                    const mi = measures.findIndex((mm) => String(mm.key) === String(measure.key));
+                    const mi = measureIndexByKey.get(String(measure.key)) ?? -1;
                     const key = `col-total-${String(columnValue)}-${measure.key}-${idx}`;
-                    const value = totalsForCol[mi] ?? 0;
+                    const value = getMeasureTotal(
+                      colTotals,
+                      String(columnValue),
+                      mi,
+                      measures.length
+                    );
                     let displayValue = value;
                     if (measure.showAsPercentage) {
                       displayValue = getPercentageDisplay(
@@ -1505,7 +1643,7 @@ var PivotTable = ({
                   })
                 ),
                 hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
-                  const measureIndex = measures.findIndex((m) => String(m.key) === measure.key);
+                  const measureIndex = measureIndexByKey.get(measure.key) ?? -1;
                   const key = `grand-total-${measure.key}-${idx}`;
                   const value = grandTotals[measureIndex] ?? 0;
                   let displayValue = value;
@@ -1530,7 +1668,7 @@ var PivotTable = ({
 
 // src/components/charts/tables/Table/TablePaginated/TablePaginated.tsx
 import * as React from "react";
-import styles11 from "./tables.module-6DZDKDSH.module.css";
+import styles11 from "./tables.module-6REGLCSQ.module.css";
 import clsx7 from "clsx";
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
@@ -1549,9 +1687,9 @@ var TableHeaderAlign = {
 };
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
-import tableStyles3 from "./tables.module-6DZDKDSH.module.css";
+import tableStyles3 from "./tables.module-6REGLCSQ.module.css";
 import clsx4 from "clsx";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 
 // src/hooks/useDebounce.hook.ts
 import { useRef as useRef6, useEffect as useEffect2, useCallback as useCallback2 } from "react";
@@ -1594,7 +1732,7 @@ var TableHeader = ({
   showIndex,
   onSortChange
 }) => {
-  const [currentSort, setCurrentSort] = useState3(sort);
+  const [currentSort, setCurrentSort] = useState4(sort);
   const debouncedUpdateState = useDebounce((value) => {
     if (value === void 0 && value === sort) {
       return;
@@ -1660,7 +1798,7 @@ import clsx6 from "clsx";
 
 // src/components/shared/ActionIcon/ActionIcon.tsx
 import clsx5 from "clsx";
-import styles9 from "./ActionIcon.module-UMIOEH5M.module.css";
+import styles9 from "./ActionIcon.module-NQH2HPCG.module.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var ActionIcon = ({ icon: Icon, className, ...props }) => {
   return /* @__PURE__ */ jsx11("button", { className: clsx5(styles9.actionIcon, className), ...props, children: /* @__PURE__ */ jsx11(Icon, { className: styles9.icon }) });
@@ -1668,8 +1806,8 @@ var ActionIcon = ({ icon: Icon, className, ...props }) => {
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
-import { useState as useState4 } from "react";
-import tableStyles4 from "./tables.module-6DZDKDSH.module.css";
+import { useState as useState5 } from "react";
+import tableStyles4 from "./tables.module-6REGLCSQ.module.css";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 var TableBody = ({
   headers,
@@ -1726,7 +1864,7 @@ var TableBodyCellWithCopy = ({
   children,
   style
 }) => {
-  const [isPressedCopy, setIsPressedCopy] = useState4(false);
+  const [isPressedCopy, setIsPressedCopy] = useState5(false);
   const handleCopy = () => {
     setIsPressedCopy(true);
     if (value !== void 0) {
@@ -1762,7 +1900,7 @@ var TableBodyCellWithCopy = ({
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
 import {
   IconChevronLeft,
-  IconChevronRight,
+  IconChevronRight as IconChevronRight2,
   IconChevronsLeft,
   IconChevronsRight
 } from "@tabler/icons-react";
@@ -1817,7 +1955,7 @@ var TablePagination = ({
       /* @__PURE__ */ jsx13(
         ActionIcon,
         {
-          icon: IconChevronRight,
+          icon: IconChevronRight2,
           onClick: () => {
             onPageChange(page + 1);
           },
@@ -1896,13 +2034,13 @@ var TablePaginated = React.forwardRef(
 TablePaginated.displayName = "TablePaginated";
 
 // src/components/charts/tables/Table/TablePaginated/TablePaginated.hooks.ts
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 var useTableGetRowsPerPage = ({
   availableHeight,
   headerHeight,
   rowHeight,
   footerHeight = 0
-}) => useMemo3(() => {
+}) => useMemo4(() => {
   const h = availableHeight;
   if (!h) return 0;
   let available = h - headerHeight - footerHeight;
@@ -1913,7 +2051,7 @@ var useTableGetRowsPerPage = ({
 
 // src/components/charts/tables/Table/TableScrollable/TableScrollable.tsx
 import clsx8 from "clsx";
-import tableStyles5 from "./tables.module-6DZDKDSH.module.css";
+import tableStyles5 from "./tables.module-6REGLCSQ.module.css";
 
 // src/components/charts/tables/Table/TableScrollable/TableScrollable.hooks.ts
 import { useEffect as useEffect5, useRef as useRef7 } from "react";
@@ -2028,13 +2166,13 @@ var TableScrollable = forwardRef2(
 TableScrollable.displayName = "TableScrollable";
 
 // src/components/editors/dates/DateRangePicker/DateRangePicker.tsx
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { DayPicker } from "react-day-picker";
 import "./DateRangePicker-PLOUUN7Q.css";
 
 // src/components/editors/dates/DateRangePicker/DateRangePickerChevron.tsx
-import { IconCaretDownFilled as IconCaretDownFilled2 } from "@tabler/icons-react";
-import styles12 from "./DateRangePickerChevron.module-ABYY5R7C.module.css";
+import { IconCaretLeftFilled } from "@tabler/icons-react";
+import styles12 from "./DateRangePickerChevron.module-U3RB6ZHO.module.css";
 import clsx9 from "clsx";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var SMALL_SIZE = 18;
@@ -2042,7 +2180,7 @@ var DateRangePickerChevron = ({
   orientation,
   size
 }) => {
-  const rotation = orientation === "left" ? "rotate(90deg)" : orientation === "right" ? "rotate(-90deg)" : void 0;
+  const rotation = orientation === "left" ? void 0 : "rotate(180deg)";
   const isSmallChevron = size === SMALL_SIZE;
   return /* @__PURE__ */ jsx16(
     "button",
@@ -2051,7 +2189,7 @@ var DateRangePickerChevron = ({
       style: {
         transform: rotation
       },
-      children: /* @__PURE__ */ jsx16(IconCaretDownFilled2, {})
+      children: /* @__PURE__ */ jsx16(IconCaretLeftFilled, {})
     }
   );
 };
@@ -2074,7 +2212,7 @@ var DateRangePicker = ({
   locale = "en",
   onChange
 }) => {
-  const [month, setMonth] = useState5(value?.from ?? /* @__PURE__ */ new Date());
+  const [month, setMonth] = useState6(value?.from ?? /* @__PURE__ */ new Date());
   const handleChange = (range) => {
     if (range?.to) {
       range.to = endOfDayUTC(range.to);
@@ -2105,7 +2243,7 @@ var DateRangePicker = ({
 };
 
 // src/components/editors/dates/DateRangePickerField/DateRangePickerField.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 
 // src/components/shared/Field/FieldHeader.tsx
 import clsx10 from "clsx";
@@ -2156,14 +2294,14 @@ var Dropdown = ({
 
 // src/components/editors/selects/shared/SelectFieldTrigger/SelectFieldTrigger.tsx
 import styles15 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
-import { IconCaretDownFilled as IconCaretDownFilled3, IconLoader2, IconX } from "@tabler/icons-react";
+import { IconCaretDownFilled as IconCaretDownFilled2, IconLoader2 as IconLoader22, IconX } from "@tabler/icons-react";
 import clsx12 from "clsx";
 import { forwardRef as forwardRef3 } from "react";
 
 // src/components/shared/GhostButton/GhostButton.tsx
 import React3 from "react";
 import clsx11 from "clsx";
-import styles14 from "./GhostButton.module-43KOFC6W.module.css";
+import styles14 from "./GhostButton.module-JZ7YOOU5.module.css";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var GhostButton = React3.forwardRef(
   ({ startIcon: StartIcon, endIcon: EndIcon, children, className, ...props }, ref) => {
@@ -2198,7 +2336,7 @@ var SelectFieldTrigger = forwardRef3(
       onClear?.();
     };
     if (variant === "ghost") {
-      return /* @__PURE__ */ jsxs13(GhostButton, { ref, endIcon: isLoading ? IconLoader2 : IconCaretDownFilled3, ...props, children: [
+      return /* @__PURE__ */ jsxs13(GhostButton, { ref, endIcon: isLoading ? IconLoader22 : IconCaretDownFilled2, ...props, children: [
         displayValue,
         showClearButton && /* @__PURE__ */ jsx21(IconX, { onPointerDown: handleClear })
       ] });
@@ -2217,7 +2355,7 @@ var SelectFieldTrigger = forwardRef3(
           StartIcon && /* @__PURE__ */ jsx21(StartIcon, {}),
           /* @__PURE__ */ jsx21("span", { children: displayValue }),
           showClearButton && /* @__PURE__ */ jsx21(IconX, { onPointerDown: handleClear }),
-          isLoading ? /* @__PURE__ */ jsx21(IconLoader2, { className: styles15.loading }) : /* @__PURE__ */ jsx21(IconCaretDownFilled3, {})
+          isLoading ? /* @__PURE__ */ jsx21(IconLoader22, { className: styles15.loading }) : /* @__PURE__ */ jsx21(IconCaretDownFilled2, {})
         ]
       }
     );
@@ -2307,7 +2445,7 @@ var FieldFeedback = ({ message, variant, className }) => {
 };
 
 // src/components/shared/Button/Button.tsx
-import styles18 from "./Button.module-GOXSST7L.module.css";
+import styles18 from "./Button.module-LD3OBJVA.module.css";
 import clsx15 from "clsx";
 import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
 var Button = ({
@@ -2353,8 +2491,8 @@ var DateRangePickerField = ({
   avoidCollisions,
   onChange
 }) => {
-  const [isOpen, setIsOpen] = useState6(false);
-  const [currentDateRange, setCurrentDateRange] = useState6(value);
+  const [isOpen, setIsOpen] = useState7(false);
+  const [currentDateRange, setCurrentDateRange] = useState7(value);
   const valueLabel = getDateRangePickerLabel(value, displayValue);
   const hasError = error || !!errorMessage;
   const handleChange = () => {
@@ -2528,10 +2666,10 @@ NumberField.displayName = "NumberField";
 
 // src/components/editors/inputs/TextField/TextField.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var TextField = forwardRef6(
   ({ value = "", placeholder = "Enter text", maxLength, error, errorMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs17(Fragment3, { children: [
+    return /* @__PURE__ */ jsxs17(Fragment5, { children: [
       /* @__PURE__ */ jsx28(
         InputField,
         {
@@ -2552,7 +2690,7 @@ var TextField = forwardRef6(
 TextField.displayName = "TextField";
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
-import { Fragment as Fragment4, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef10, useState as useState7 } from "react";
+import { Fragment as Fragment6, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef10, useState as useState8 } from "react";
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldOption/SelectFieldOption.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
@@ -2663,10 +2801,10 @@ var MultiSelectField = ({
   error = false,
   errorMessage
 }) => {
-  const [isOpen, setIsOpen] = useState7(false);
-  const [searchValue, setSearchValue] = useState7("");
-  const [preValues, setPreValues] = useState7(values);
-  const [selectedLabel, setSelectedLabel] = useState7("");
+  const [isOpen, setIsOpen] = useState8(false);
+  const [searchValue, setSearchValue] = useState8("");
+  const [preValues, setPreValues] = useState8(values);
+  const [selectedLabel, setSelectedLabel] = useState8("");
   const searchFieldRef = useRef10(null);
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect8(() => {
@@ -2688,9 +2826,9 @@ var MultiSelectField = ({
       setSelectedLabel(`(${selectedOptions.length}) ${newLabel}`);
     }
   }, [values, options, isLoading]);
-  const debouncedSearch = useMemo4(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
+  const debouncedSearch = useMemo5(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
   const displayOptions = isSearchable && !onSearch ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
-  const groupedOptions = useMemo4(() => groupOptionsByCategory(displayOptions), [displayOptions]);
+  const groupedOptions = useMemo5(() => groupOptionsByCategory(displayOptions), [displayOptions]);
   const isSubmitDisabled = preValues.every((preValue) => values.includes(preValue)) && values.every((value) => preValues.includes(value));
   const handleSelectOption = (e, newValue) => {
     e.preventDefault();
@@ -2756,7 +2894,7 @@ var MultiSelectField = ({
             }
           ),
           /* @__PURE__ */ jsxs19(SelectFieldContentList, { disabled: isLoading, children: [
-            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs19(Fragment4, { children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs19(Fragment6, { children: [
               /* @__PURE__ */ jsx31(SelectFieldCategory, { label: category }),
               categoryOptions.map((option) => /* @__PURE__ */ jsx31(
                 SelectListOption,
@@ -2798,7 +2936,7 @@ var MultiSelectField = ({
 };
 
 // src/components/editors/selects/SingleSelectField/SingleSelectField.tsx
-import { Fragment as Fragment5, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef11, useState as useState8 } from "react";
+import { Fragment as Fragment7, useEffect as useEffect9, useMemo as useMemo6, useRef as useRef11, useState as useState9 } from "react";
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
 import styles24 from "./selects.module-MRJADSDF.module.css";
 import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -2823,9 +2961,9 @@ var SingleSelectField = ({
   align,
   variant
 }) => {
-  const [isOpen, setIsOpen] = useState8(false);
-  const [searchValue, setSearchValue] = useState8("");
-  const [selectedLabel, setSelectedLabel] = useState8(value);
+  const [isOpen, setIsOpen] = useState9(false);
+  const [searchValue, setSearchValue] = useState9("");
+  const [selectedLabel, setSelectedLabel] = useState9(value);
   const searchFieldRef = useRef11(null);
   useSelectSearchFocus(isOpen, searchFieldRef);
   useEffect9(() => {
@@ -2838,9 +2976,9 @@ var SingleSelectField = ({
       setSelectedLabel(option.label);
     }
   }, [value, options]);
-  const debouncedSearch = useMemo5(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
+  const debouncedSearch = useMemo6(() => onSearch ? debounce(onSearch) : void 0, [onSearch]);
   const displayOptions = searchable && !onSearch ? options.filter((option) => option.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
-  const groupedOptions = useMemo5(() => groupOptionsByCategory(displayOptions), [displayOptions]);
+  const groupedOptions = useMemo6(() => groupOptionsByCategory(displayOptions), [displayOptions]);
   const handleChange = (newValue) => {
     setSearchValue("");
     onChange(newValue ?? "");
@@ -2899,7 +3037,7 @@ var SingleSelectField = ({
             }
           ),
           /* @__PURE__ */ jsxs20(SelectFieldContentList, { disabled: isLoading, children: [
-            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs20(Fragment5, { children: [
+            groupedOptions ? Object.entries(groupedOptions).map(([category, categoryOptions]) => /* @__PURE__ */ jsxs20(Fragment7, { children: [
               /* @__PURE__ */ jsx32(SelectFieldCategory, { label: category }),
               categoryOptions.map((option) => /* @__PURE__ */ jsx32(
                 SelectListOption,
@@ -2982,7 +3120,7 @@ var Switch = ({
 
 // src/components/shared/ButtonIcon/ButtonIcon.tsx
 import clsx19 from "clsx";
-import styles26 from "./ButtonIcon.module-JHFZQSMJ.module.css";
+import styles26 from "./ButtonIcon.module-Y74WWGDY.module.css";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var ButtonIcon = ({
   icon: Icon,
@@ -3003,7 +3141,7 @@ var ButtonIcon = ({
 
 // src/components/shared/Card/Card.tsx
 import React4 from "react";
-import styles27 from "./Card.module-AAOKM6DN.module.css";
+import styles27 from "./Card.module-YBJG5NGD.module.css";
 import clsx20 from "clsx";
 import { IconInfoCircle } from "@tabler/icons-react";
 
@@ -3144,6 +3282,32 @@ function Typography({
   return /* @__PURE__ */ jsx40(Component, { title, className: clsx23(styles31.typography, className), style, children });
 }
 
+// src/components/shared/Divider/Divider.tsx
+import clsx24 from "clsx";
+import styles32 from "./Divider.module-2BOWHKT3.module.css";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var getStyle2 = (color, thickness, vertical) => {
+  const style = {};
+  if (color) style.backgroundColor = color;
+  if (thickness) {
+    if (vertical) {
+      style.width = thickness;
+    } else {
+      style.height = thickness;
+    }
+  }
+  return style;
+};
+var Divider = ({ color, thickness, vertical, className }) => {
+  return /* @__PURE__ */ jsx41(
+    "div",
+    {
+      className: clsx24(styles32.divider, vertical && styles32.vertical, className),
+      style: getStyle2(color, thickness, vertical)
+    }
+  );
+};
+
 // src/utils/object.utils.ts
 var shallowEqual = (object1, object2) => {
   const keys1 = Object.keys(object1 ?? {});
@@ -3169,6 +3333,7 @@ export {
   CardHeader,
   DateRangePicker,
   DateRangePickerField,
+  Divider,
   DonutChart,
   Dropdown,
   FieldFeedback,