@embeddable.com/remarkable-ui 2.0.11 → 2.0.13

package/dist/index.js

@@ -1,4 +1,4 @@
-import "./chunk-TBNFMVQR.js";
+import "./chunk-7RY47BRM.js";
 
 // src/components/shared/Skeleton/Skeleton.tsx
 import styles from "./Skeleton.module-ZN5S5VRF.module.css";
@@ -1451,14 +1451,13 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
 };
 
 // src/components/charts/kpis/KpiChart.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState3 } from "react";
-import styles23 from "./KpiChart.module-KRTSMOWN.module.css";
+import styles23 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
-import styles22 from "./KpiChartChange.module-M7E4IU7A.module.css";
+import styles22 from "./KpiChartChange.module-BAW7YCOW.module.css";
 import clsx16 from "clsx";
 import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 var getChangeClass = (isPositive, invertChangeColors) => {
   if (isPositive) return invertChangeColors ? styles22.negative : styles22.positive;
   return invertChangeColors ? styles22.positive : styles22.negative;
@@ -1472,96 +1471,117 @@ var KpiChartChange = ({
   valueFormatter,
   percentageDecimalPlaces = 1,
   equalComparisonLabel,
-  className
+  noPreviousDataLabel
 }) => {
   const equalComparison = comparisonValue === value;
   const difference = value - comparisonValue;
   const isPositive = difference > 0;
   let differenceLabel;
   if (showChangeAsPercentage) {
-    const percentage = comparisonValue === 0 ? 0 : difference / comparisonValue * 100;
+    const percentage = difference / comparisonValue * 100;
     differenceLabel = `${percentage.toFixed(percentageDecimalPlaces)}%`;
   } else {
     differenceLabel = valueFormatter ? valueFormatter(difference) : difference.toString();
   }
   const displayValue = `${isPositive ? "+" : ""}${differenceLabel}`;
   const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
-  return /* @__PURE__ */ jsxs14("div", { className: clsx16(className, styles22.kpiChartChangeContainer), children: [
-    !equalComparison && /* @__PURE__ */ jsxs14(
-      "span",
-      {
-        className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
-        children: [
-          /* @__PURE__ */ jsx25(Icon, {}),
-          /* @__PURE__ */ jsx25("span", { children: displayValue })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
+  const showNoPreviousData = showChangeAsPercentage && Number(comparisonValue) === 0;
+  return /* @__PURE__ */ jsxs14("div", { className: styles22.kpiChangeContainerSizeGuide, children: [
+    /* @__PURE__ */ jsxs14("div", { className: clsx16(styles22.kpiChartChangeContainer, styles22.hidden), children: [
+      /* @__PURE__ */ jsxs14(
+        "span",
+        {
+          className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          children: [
+            /* @__PURE__ */ jsx25(Icon, {}),
+            /* @__PURE__ */ jsx25("span", { children: displayValue })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: comparisonLabel })
+    ] }),
+    /* @__PURE__ */ jsx25("div", { className: styles22.kpiAbsoluteContainer, children: /* @__PURE__ */ jsx25("div", { className: styles22.kpiChartChangeContainer, children: showNoPreviousData ? /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: noPreviousDataLabel }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
+      !equalComparison && /* @__PURE__ */ jsxs14(
+        "span",
+        {
+          className: clsx16(
+            styles22.kpiChangeBadge,
+            getChangeClass(isPositive, invertChangeColors)
+          ),
+          children: [
+            /* @__PURE__ */ jsx25(Icon, {}),
+            /* @__PURE__ */ jsx25("span", { children: displayValue })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
+    ] }) }) })
   ] });
 };
 
 // src/components/charts/kpis/KpiChart.tsx
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { AutoTextSize } from "auto-text-size";
+
+// src/components/shared/ConditionalWrapper/ConditionalWrapper.tsx
+import { Fragment as Fragment5, jsx as jsx26 } from "react/jsx-runtime";
+var ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : /* @__PURE__ */ jsx26(Fragment5, { children });
+var ConditionalWrapper_default = ConditionalWrapper;
+
+// src/components/charts/kpis/KpiChart.tsx
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
 var KpiChart = ({
   value,
   valueFontSize,
-  changeFontSize,
+  trendFontSize,
   comparisonValue,
   comparisonLabel,
   invertChangeColors,
   showChangeAsPercentage,
   percentageDecimalPlaces = 1,
   equalComparisonLabel = "No change",
+  noPreviousDataLabel = "No previous data",
   valueFormatter
 }) => {
-  const containerRef = useRef6(null);
-  const [fontSize, setFontSize] = useState3(20);
-  useEffect5(() => {
-    const container = containerRef.current;
-    const updateFont = () => {
-      const w = container.offsetWidth;
-      const h = container.offsetHeight;
-      const newSize = Math.min(w, h) * 0.3;
-      setFontSize(newSize);
-    };
-    const observer = new ResizeObserver(updateFont);
-    observer.observe(container);
-    updateFont();
-    return () => observer.disconnect();
-  }, []);
   const hasComparisonValue = comparisonValue !== void 0;
   const displayValue = value === void 0 ? "" : valueFormatter ? valueFormatter(value) : value;
-  return /* @__PURE__ */ jsx26("div", { className: styles23.kpiChartContainer, ref: containerRef, children: /* @__PURE__ */ jsxs15("div", { className: styles23.kpiChartCenter, children: [
-    /* @__PURE__ */ jsx26(
-      "h2",
+  const autoResizeValueFontSize = !valueFontSize;
+  return /* @__PURE__ */ jsxs15("div", { className: styles23.kpiChartContainer, children: [
+    /* @__PURE__ */ jsx27("div", { className: styles23.kpiChartValueContainer, children: /* @__PURE__ */ jsx27(
+      ConditionalWrapper_default,
       {
-        title: displayValue.toString(),
-        style: {
-          fontSize: valueFontSize ?? fontSize
-        },
-        children: displayValue
+        condition: autoResizeValueFontSize,
+        wrapper: (children) => /* @__PURE__ */ jsx27(AutoTextSize, { mode: "boxoneline", minFontSizePx: 1, maxFontSizePx: 999, children }),
+        children: /* @__PURE__ */ jsx27(
+          "h2",
+          {
+            title: displayValue.toString(),
+            style: {
+              fontSize: valueFontSize
+            },
+            children: displayValue
+          }
+        )
       }
-    ),
-    /* @__PURE__ */ jsx26("div", { className: styles23.kpiComparisonContainer, style: { fontSize: changeFontSize }, children: hasComparisonValue && /* @__PURE__ */ jsx26(
+    ) }),
+    /* @__PURE__ */ jsx27("div", { className: styles23.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx27("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx27(
       KpiChartChange,
       {
         equalComparisonLabel,
-        changeFontSize,
         comparisonLabel,
         comparisonValue,
         invertChangeColors,
         percentageDecimalPlaces,
         showChangeAsPercentage,
         value,
-        valueFormatter
+        valueFormatter,
+        noPreviousDataLabel
       }
-    ) })
-  ] }) });
+    ) }) })
+  ] });
 };
 
 // src/components/charts/pies/DonutChart/DonutChart.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef7 } from "react";
 import { Pie } from "react-chartjs-2";
 import { ArcElement, Chart as ChartJS3, Legend as Legend3, Tooltip as Tooltip3 } from "chart.js";
 import ChartDataLabels3 from "chartjs-plugin-datalabels";
@@ -1643,10 +1663,10 @@ import { mergician as mergician7 } from "mergician";
 import styles24 from "./charts.module-YNKCWRLU.module.css";
 
 // src/hooks/useResizeObserver.hook.ts
-import { useLayoutEffect, useRef as useRef7, useState as useState4 } from "react";
+import { useLayoutEffect, useRef as useRef6, useState as useState3 } from "react";
 var useResizeObserver = (elRef, timeout = 100) => {
-  const [size, setSize] = useState4({ width: 0, height: 0 });
-  const timeoutRef = useRef7(void 0);
+  const [size, setSize] = useState3({ width: 0, height: 0 });
+  const timeoutRef = useRef6(void 0);
   useLayoutEffect(() => {
     const el = elRef.current;
     if (!el) return;
@@ -1677,7 +1697,7 @@ var useResizeObserver = (elRef, timeout = 100) => {
 };
 
 // src/components/charts/pies/DonutChart/DonutChart.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var MIN_WIDTH_HEIGHT_TO_SHOW_CHART = 10;
 ChartJS3.register(ArcElement, Tooltip3, Legend3, ChartDataLabels3, AnnotationPlugin2);
 var DonutChart = ({
@@ -1690,8 +1710,8 @@ var DonutChart = ({
   showTooltips = true,
   showValueLabels = true
 }) => {
-  const containerRef = useRef8(null);
-  const chartRef = useRef8(null);
+  const containerRef = useRef7(null);
+  const chartRef = useRef7(null);
   const donutLabelOptions = mergician7(
     getDonutChartOptions({ showLegend, showTooltips, showValueLabels, label, subLabel }),
     options
@@ -1702,7 +1722,7 @@ var DonutChart = ({
   };
   const { height, width } = useResizeObserver(containerRef, 0);
   const hideChart = height < MIN_WIDTH_HEIGHT_TO_SHOW_CHART || width < MIN_WIDTH_HEIGHT_TO_SHOW_CHART;
-  return /* @__PURE__ */ jsx27("div", { className: styles24.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28("div", { className: styles24.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx28(
     Pie,
     {
       ref: chartRef,
@@ -1714,14 +1734,14 @@ var DonutChart = ({
 };
 
 // src/components/charts/pies/PieChart/PieChart.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef8 } from "react";
 import { Pie as Pie2 } from "react-chartjs-2";
 import { ArcElement as ArcElement2, Chart as ChartJS4, Legend as Legend4, Tooltip as Tooltip4 } from "chart.js";
 import ChartDataLabels4 from "chartjs-plugin-datalabels";
 import { mergician as mergician8 } from "mergician";
 import styles25 from "./charts.module-YNKCWRLU.module.css";
 import AnnotationPlugin3 from "chartjs-plugin-annotation";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 ChartJS4.register(ArcElement2, Tooltip4, Legend4, ChartDataLabels4, AnnotationPlugin3);
 var PieChart = ({
   data,
@@ -1731,7 +1751,7 @@ var PieChart = ({
   showTooltips = true,
   showValueLabels = true
 }) => {
-  const chartRef = useRef9(null);
+  const chartRef = useRef8(null);
   const pieOptions = mergician8(
     getPieChartOptions({
       showLegend,
@@ -1744,7 +1764,7 @@ var PieChart = ({
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx28("div", { className: styles25.chartContainer, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29("div", { className: styles25.chartContainer, children: /* @__PURE__ */ jsx29(
     Pie2,
     {
       ref: chartRef,
@@ -1768,8 +1788,8 @@ import {
   IconChevronsRight
 } from "@tabler/icons-react";
 import styles26 from "./TablePagination.module-VGIQ7VN7.module.css";
-import { useEffect as useEffect6 } from "react";
-import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useEffect as useEffect5 } from "react";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var getTableTotalPages = (total, pageSize) => {
   return total ? Math.ceil(total / pageSize) : void 0;
 };
@@ -1783,14 +1803,14 @@ var TablePagination = ({
   const totalPages = getTableTotalPages(total, pageSize);
   const disabledPrev = page <= 0;
   const disabledNext = !totalPages || page >= totalPages - 1;
-  useEffect6(() => {
+  useEffect5(() => {
     if (totalPages && page >= totalPages) {
       onPageChange(0);
     }
   }, [totalPages, page]);
-  return /* @__PURE__ */ jsx29("div", { className: styles26.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentral, children: [
+  return /* @__PURE__ */ jsx30("div", { className: styles26.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentral, children: [
     /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentralButtons, children: [
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronsLeft,
@@ -1801,7 +1821,7 @@ var TablePagination = ({
           "aria-label": "First page"
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronLeft,
@@ -1813,9 +1833,9 @@ var TablePagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx29("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
+    /* @__PURE__ */ jsx30("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
     /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentralButtons, children: [
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronRight,
@@ -1826,7 +1846,7 @@ var TablePagination = ({
           "aria-label": "Next page"
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronsRight,
@@ -1857,7 +1877,7 @@ var TableHeaderAlign = {
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
 import tableStyles from "./tables.module-GNDYDW3Z.module.css";
 import clsx17 from "clsx";
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
 var getHeaderAriaSort = (sort, header) => {
   return sort?.id === header.id ? sort.direction === "asc" ? "ascending" : "descending" : "none";
 };
@@ -1871,15 +1891,15 @@ var TableHeader = ({
   onSortChange
 }) => {
   const getSortIcon = (header) => {
-    if (!sort) return /* @__PURE__ */ jsx30(IconCaretUpDownFilled, {});
+    if (!sort) return /* @__PURE__ */ jsx31(IconCaretUpDownFilled, {});
     if (sort.id === header.id) {
       if (sort.direction === TableSortDirection.ASC) {
-        return /* @__PURE__ */ jsx30(IconCaretUpFilled, {});
+        return /* @__PURE__ */ jsx31(IconCaretUpFilled, {});
       } else if (sort.direction === TableSortDirection.DESC) {
-        return /* @__PURE__ */ jsx30(IconCaretDownFilled2, {});
+        return /* @__PURE__ */ jsx31(IconCaretDownFilled2, {});
       }
     }
-    return /* @__PURE__ */ jsx30(IconCaretUpDownFilled, {});
+    return /* @__PURE__ */ jsx31(IconCaretUpDownFilled, {});
   };
   const handleSort = (id) => {
     if (!onSortChange) return;
@@ -1897,9 +1917,9 @@ var TableHeader = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx30("thead", { className: styles27.tableHeader, children: /* @__PURE__ */ jsxs17("tr", { children: [
-    showIndex && /* @__PURE__ */ jsx30("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
-    headers.map((header) => /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31("thead", { className: styles27.tableHeader, children: /* @__PURE__ */ jsxs17("tr", { children: [
+    showIndex && /* @__PURE__ */ jsx31("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
+    headers.map((header) => /* @__PURE__ */ jsx31(
       "th",
       {
         className: styles27.tableHeaderCell,
@@ -1927,9 +1947,9 @@ var TableHeader = ({
 import styles28 from "./TableBody.module-ARNVVKDL.module.css";
 import clsx18 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
-import { useState as useState5 } from "react";
+import { useState as useState4 } from "react";
 import tableStyles2 from "./tables.module-GNDYDW3Z.module.css";
-import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var TableBody = ({
   headers,
   rows,
@@ -1938,14 +1958,14 @@ var TableBody = ({
   showIndex,
   onRowIndexClick
 }) => {
-  return /* @__PURE__ */ jsx31("tbody", { className: styles28.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx32("tbody", { className: styles28.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs18(
     "tr",
     {
       onClick: () => onRowIndexClick?.(rowIndex),
       className: clsx18(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
       children: [
-        showIndex && /* @__PURE__ */ jsx31("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
-        headers.map((header, cellIndex) => /* @__PURE__ */ jsx31(
+        showIndex && /* @__PURE__ */ jsx32("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
+        headers.map((header, cellIndex) => /* @__PURE__ */ jsx32(
           TableBodyCell,
           {
             header,
@@ -1961,7 +1981,7 @@ var TableBody = ({
   )) });
 };
 var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
-  const [isPressedCopy, setIsPressedCopy] = useState5(false);
+  const [isPressedCopy, setIsPressedCopy] = useState4(false);
   const value = header.accessor !== void 0 ? header.accessor(row) : header.id !== void 0 ? (
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     row[header.id]
@@ -1982,7 +2002,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
       style: { textAlign: header.align },
       onMouseLeave: () => setIsPressedCopy(false),
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           ActionIcon,
           {
             title: `Copy: ${String(value)}`,
@@ -2003,7 +2023,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
 };
 
 // src/components/charts/tables/Table/TablePaginated.tsx
-import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var TablePaginated = React2.forwardRef(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props, ref) => {
@@ -2022,8 +2042,8 @@ var TablePaginated = React2.forwardRef(
       onSortChange
     } = props;
     return /* @__PURE__ */ jsxs19("div", { ref, className: clsx19(styles29.tableContainer, className), children: [
-      /* @__PURE__ */ jsx32("div", { className: styles29.tableContainerScroll, children: /* @__PURE__ */ jsxs19("table", { className: styles29.table, children: [
-        /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33("div", { className: styles29.tableContainerScroll, children: /* @__PURE__ */ jsxs19("table", { className: styles29.table, children: [
+        /* @__PURE__ */ jsx33(
           TableHeader,
           {
             showIndex,
@@ -2032,7 +2052,7 @@ var TablePaginated = React2.forwardRef(
             onSortChange
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           TableBody,
           {
             onRowIndexClick,
@@ -2044,7 +2064,7 @@ var TablePaginated = React2.forwardRef(
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         TablePagination,
         {
           page,
@@ -2060,7 +2080,7 @@ var TablePaginated = React2.forwardRef(
 TablePaginated.displayName = "TablePaginated";
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo3, useState as useState5 } from "react";
 import tableStyles3 from "./tables.module-GNDYDW3Z.module.css";
 import clsx20 from "clsx";
 
@@ -2074,7 +2094,7 @@ var getTableCellWidthStyle = (width) => {
 };
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
 var getPercentageDisplay = (percentage, percentageDecimalPlaces) => {
   return `${percentage.toFixed(percentageDecimalPlaces)}%`;
@@ -2166,10 +2186,10 @@ var PivotTable = ({
     }
     return { colTotals: cTotals, rowTotals: rTotals, grandTotals: gTotals };
   }, [data, measures, rowDimension.key, columnDimension.key, columnValues, rowValues]);
-  const [visibleCount, setVisibleCount] = useState6(
+  const [visibleCount, setVisibleCount] = useState5(
     () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
   );
-  useEffect7(() => {
+  useEffect6(() => {
     if (!progressive) {
       setVisibleCount(rowValues.length);
       return;
@@ -2193,7 +2213,7 @@ var PivotTable = ({
     };
   }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
   const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
-  return /* @__PURE__ */ jsx33("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx34(
     "div",
     {
       className: clsx20(
@@ -2208,7 +2228,7 @@ var PivotTable = ({
           children: [
             /* @__PURE__ */ jsxs20("thead", { children: [
               /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "col",
@@ -2220,7 +2240,7 @@ var PivotTable = ({
                 ),
                 columnValues.map((columnValue) => {
                   const columnValueDisplay = columnDimension.formatValue ? columnDimension.formatValue(columnValue) : columnValue;
-                  return /* @__PURE__ */ jsx33(
+                  return /* @__PURE__ */ jsx34(
                     "th",
                     {
                       scope: "colgroup",
@@ -2231,7 +2251,7 @@ var PivotTable = ({
                     `col-${columnValue}`
                   );
                 }),
-                hasRowTotals && /* @__PURE__ */ jsx33(
+                hasRowTotals && /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "colgroup",
@@ -2244,7 +2264,7 @@ var PivotTable = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "col",
@@ -2256,7 +2276,7 @@ var PivotTable = ({
                   }
                 ),
                 columnValues.flatMap(
-                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx33(
+                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx34(
                     "th",
                     {
                       scope: "col",
@@ -2267,7 +2287,7 @@ var PivotTable = ({
                     `sub-${String(col)}-${measure.key}-${idx}`
                   ))
                 ),
-                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => /* @__PURE__ */ jsx33(
+                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "col",
@@ -2284,7 +2304,7 @@ var PivotTable = ({
               visibleRows.map((row) => {
                 const rowDimensionValue = rowDimension.formatValue ? rowDimension.formatValue(row) : row;
                 return /* @__PURE__ */ jsxs20("tr", { children: [
-                  /* @__PURE__ */ jsx33(
+                  /* @__PURE__ */ jsx34(
                     "th",
                     {
                       scope: "row",
@@ -2312,7 +2332,7 @@ var PivotTable = ({
                         return measure.accessor ? measure.accessor(object) : value;
                       };
                       const columnValueDisplay = getDisplayValue();
-                      return /* @__PURE__ */ jsx33("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
+                      return /* @__PURE__ */ jsx34("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
                     })
                   ),
                   hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
@@ -2329,12 +2349,12 @@ var PivotTable = ({
                     } else if (measure.accessor) {
                       displayValue = measure.accessor({ [measure.key]: value });
                     }
-                    return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                    return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
                   })
                 ] }, `row-${row}`);
               }),
               hasColumnTotals && /* @__PURE__ */ jsxs20("tr", { className: tableStyles3.stickyLastRow, children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "row",
@@ -2360,7 +2380,7 @@ var PivotTable = ({
                       displayValue = measure.accessor({ [measure.key]: value });
                     }
                     const columnValueDisplay = show ? displayValue : "";
-                    return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: columnValueDisplay, children: columnValueDisplay }, key);
+                    return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: columnValueDisplay, children: columnValueDisplay }, key);
                   })
                 ),
                 hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
@@ -2376,7 +2396,7 @@ var PivotTable = ({
                   } else if (measure.accessor) {
                     displayValue = measure.accessor({ [measure.key]: value });
                   }
-                  return /* @__PURE__ */ jsx33("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                  return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
                 })
               ] }, "totals-row")
             ] })
@@ -2537,7 +2557,7 @@ var createColorForValue = ({
 };
 
 // src/components/charts/tables/HeatMap/HeatMap.tsx
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var HeatMap = ({
   data,
   showValues = false,
@@ -2612,7 +2632,7 @@ var HeatMap = ({
     },
     [domainMin, domainMax, rawMin, rawMax, minColor, midColor, maxColor]
   );
-  return /* @__PURE__ */ jsx34("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx35(
     "div",
     {
       className: clsx21(
@@ -2620,8 +2640,8 @@ var HeatMap = ({
         (!columnWidth || !firstColumnWidth) && tableStyles4.fullWidth
       ),
       children: /* @__PURE__ */ jsxs21("table", { className: tableStyles4.table, "aria-label": "Heat map", children: [
-        /* @__PURE__ */ jsx34("thead", { children: /* @__PURE__ */ jsxs21("tr", { children: [
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs21("tr", { children: [
+          /* @__PURE__ */ jsx35(
             "th",
             {
               className: tableStyles4.stickyFirstColumn,
@@ -2629,10 +2649,10 @@ var HeatMap = ({
               children: measure.label
             }
           ),
-          columnValues.map((cv, index) => /* @__PURE__ */ jsx34("th", { style: getTableCellWidthStyle(columnWidth), children: columnDimension.format ? columnDimension.format(cv) : cv }, `col-${cv}-${index}`))
+          columnValues.map((cv, index) => /* @__PURE__ */ jsx35("th", { style: getTableCellWidthStyle(columnWidth), children: columnDimension.format ? columnDimension.format(cv) : cv }, `col-${cv}-${index}`))
         ] }) }),
-        /* @__PURE__ */ jsx34("tbody", { children: rowValues.map((rv) => /* @__PURE__ */ jsxs21("tr", { children: [
-          /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35("tbody", { children: rowValues.map((rv) => /* @__PURE__ */ jsxs21("tr", { children: [
+          /* @__PURE__ */ jsx35(
             "th",
             {
               scope: "row",
@@ -2646,7 +2666,7 @@ var HeatMap = ({
             const value = getCellValue(obj?.[measure.key], displayNullAs);
             const background = getCellBackground(value, colorForValue);
             const color = getCellColor(background);
-            return /* @__PURE__ */ jsx34(
+            return /* @__PURE__ */ jsx35(
               "td",
               {
                 style: {
@@ -2682,11 +2702,11 @@ var useTableGetRowsPerPage = ({
 }, [availableHeight, headerHeight, rowHeight, footerHeight]);
 
 // src/hooks/useDebounce.hook.ts
-import { useRef as useRef10, useEffect as useEffect8, useCallback as useCallback2 } from "react";
+import { useRef as useRef9, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 function useDebounce(fn, delay = 300) {
-  const timerRef = useRef10(null);
-  const fnRef = useRef10(fn);
-  useEffect8(() => {
+  const timerRef = useRef9(null);
+  const fnRef = useRef9(fn);
+  useEffect7(() => {
     fnRef.current = fn;
   }, [fn]);
   const debouncedFn = useCallback2(
@@ -2700,7 +2720,7 @@ function useDebounce(fn, delay = 300) {
     },
     [delay]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };