@embeddable.com/remarkable-ui 2.0.10 → 2.0.12

package/dist/index.js

@@ -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-6XMWVNAY.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
-import styles22 from "./KpiChartChange.module-M7E4IU7A.module.css";
+import styles22 from "./KpiChartChange.module-B5X7SPME.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,6 +1471,7 @@ var KpiChartChange = ({
   valueFormatter,
   percentageDecimalPlaces = 1,
   equalComparisonLabel,
+  noPreviousDataLabel,
   className
 }) => {
   const equalComparison = comparisonValue === value;
@@ -1479,18 +1479,21 @@ var KpiChartChange = ({
   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: [
+  return /* @__PURE__ */ jsx25("div", { className: clsx16(className, styles22.kpiChartChangeContainer), children: showChangeAsPercentage && Number(comparisonValue) === 0 ? /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: noPreviousDataLabel }) : /* @__PURE__ */ jsxs14(Fragment4, { children: [
     !equalComparison && /* @__PURE__ */ jsxs14(
       "span",
       {
-        className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+        className: clsx16(
+          styles22.kpiChangeBadge,
+          getChangeClass(isPositive, invertChangeColors)
+        ),
         children: [
           /* @__PURE__ */ jsx25(Icon, {}),
           /* @__PURE__ */ jsx25("span", { children: displayValue })
@@ -1498,66 +1501,68 @@ var KpiChartChange = ({
       }
     ),
     /* @__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: hasComparisonValue && /* @__PURE__ */ jsx27(
       KpiChartChange,
       {
         equalComparisonLabel,
-        changeFontSize,
         comparisonLabel,
         comparisonValue,
         invertChangeColors,
         percentageDecimalPlaces,
         showChangeAsPercentage,
         value,
-        valueFormatter
+        valueFormatter,
+        noPreviousDataLabel
       }
     ) })
-  ] }) });
+  ] });
 };
 
 // src/components/charts/pies/DonutChart/DonutChart.tsx
@@ -1641,7 +1646,44 @@ var getDonutChartOptions = (options) => {
 // src/components/charts/pies/DonutChart/DonutChart.tsx
 import { mergician as mergician7 } from "mergician";
 import styles24 from "./charts.module-YNKCWRLU.module.css";
-import { jsx as jsx27 } from "react/jsx-runtime";
+
+// src/hooks/useResizeObserver.hook.ts
+import { useLayoutEffect, useRef as useRef6, useState as useState3 } from "react";
+var useResizeObserver = (elRef, timeout = 100) => {
+  const [size, setSize] = useState3({ width: 0, height: 0 });
+  const timeoutRef = useRef6(void 0);
+  useLayoutEffect(() => {
+    const el = elRef.current;
+    if (!el) return;
+    const updateSize = (rect) => {
+      setSize({
+        width: Math.max(0, rect.width),
+        height: Math.max(0, rect.height)
+      });
+    };
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = window.setTimeout(() => {
+        updateSize(entry.contentRect);
+      }, timeout);
+    });
+    ro.observe(el);
+    updateSize(el.getBoundingClientRect());
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      ro.disconnect();
+    };
+  }, [elRef, timeout]);
+  return size;
+};
+
+// src/components/charts/pies/DonutChart/DonutChart.tsx
+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 = ({
   label,
@@ -1653,6 +1695,7 @@ var DonutChart = ({
   showTooltips = true,
   showValueLabels = true
 }) => {
+  const containerRef = useRef7(null);
   const chartRef = useRef7(null);
   const donutLabelOptions = mergician7(
     getDonutChartOptions({ showLegend, showTooltips, showValueLabels, label, subLabel }),
@@ -1662,7 +1705,9 @@ var DonutChart = ({
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx27("div", { className: styles24.chartContainer, children: /* @__PURE__ */ jsx27(
+  const { height, width } = useResizeObserver(containerRef, 0);
+  const hideChart = height < MIN_WIDTH_HEIGHT_TO_SHOW_CHART || width < MIN_WIDTH_HEIGHT_TO_SHOW_CHART;
+  return /* @__PURE__ */ jsx28("div", { className: styles24.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx28(
     Pie,
     {
       ref: chartRef,
@@ -1681,7 +1726,7 @@ 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,
@@ -1704,7 +1749,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,
@@ -1728,8 +1773,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;
 };
@@ -1743,14 +1788,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,
@@ -1761,7 +1806,7 @@ var TablePagination = ({
           "aria-label": "First page"
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronLeft,
@@ -1773,9 +1818,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,
@@ -1786,7 +1831,7 @@ var TablePagination = ({
           "aria-label": "Next page"
         }
       ),
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         ActionIcon,
         {
           icon: IconChevronsRight,
@@ -1817,7 +1862,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";
 };
@@ -1831,15 +1876,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;
@@ -1857,9 +1902,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,
@@ -1889,7 +1934,7 @@ import clsx18 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-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,
@@ -1898,14 +1943,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,
@@ -1942,7 +1987,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
       style: { textAlign: header.align },
       onMouseLeave: () => setIsPressedCopy(false),
       children: [
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           ActionIcon,
           {
             title: `Copy: ${String(value)}`,
@@ -1963,7 +2008,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) => {
@@ -1982,8 +2027,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,
@@ -1992,7 +2037,7 @@ var TablePaginated = React2.forwardRef(
             onSortChange
           }
         ),
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33(
           TableBody,
           {
             onRowIndexClick,
@@ -2004,7 +2049,7 @@ var TablePaginated = React2.forwardRef(
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx32(
+      /* @__PURE__ */ jsx33(
         TablePagination,
         {
           page,
@@ -2020,7 +2065,7 @@ var TablePaginated = React2.forwardRef(
 TablePaginated.displayName = "TablePaginated";
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useState as useState5 } 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";
 
@@ -2034,7 +2079,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)}%`;
@@ -2129,7 +2174,7 @@ var PivotTable = ({
   const [visibleCount, setVisibleCount] = useState5(
     () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
   );
-  useEffect7(() => {
+  useEffect6(() => {
     if (!progressive) {
       setVisibleCount(rowValues.length);
       return;
@@ -2153,7 +2198,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(
@@ -2168,7 +2213,7 @@ var PivotTable = ({
           children: [
             /* @__PURE__ */ jsxs20("thead", { children: [
               /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "col",
@@ -2180,7 +2225,7 @@ var PivotTable = ({
                 ),
                 columnValues.map((columnValue) => {
                   const columnValueDisplay = columnDimension.formatValue ? columnDimension.formatValue(columnValue) : columnValue;
-                  return /* @__PURE__ */ jsx33(
+                  return /* @__PURE__ */ jsx34(
                     "th",
                     {
                       scope: "colgroup",
@@ -2191,7 +2236,7 @@ var PivotTable = ({
                     `col-${columnValue}`
                   );
                 }),
-                hasRowTotals && /* @__PURE__ */ jsx33(
+                hasRowTotals && /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "colgroup",
@@ -2204,7 +2249,7 @@ var PivotTable = ({
                 )
               ] }),
               /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx33(
+                /* @__PURE__ */ jsx34(
                   "th",
                   {
                     scope: "col",
@@ -2216,7 +2261,7 @@ var PivotTable = ({
                   }
                 ),
                 columnValues.flatMap(
-                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx33(
+                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx34(
                     "th",
                     {
                       scope: "col",
@@ -2227,7 +2272,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",
@@ -2244,7 +2289,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",
@@ -2272,7 +2317,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) => {
@@ -2289,12 +2334,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",
@@ -2320,7 +2365,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) => {
@@ -2336,7 +2381,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")
             ] })
@@ -2497,7 +2542,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,
@@ -2572,7 +2617,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(
@@ -2580,8 +2625,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,
@@ -2589,10 +2634,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",
@@ -2606,7 +2651,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: {
@@ -2642,11 +2687,11 @@ var useTableGetRowsPerPage = ({
 }, [availableHeight, headerHeight, rowHeight, footerHeight]);
 
 // src/hooks/useDebounce.hook.ts
-import { useRef as useRef9, 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 = useRef9(null);
   const fnRef = useRef9(fn);
-  useEffect8(() => {
+  useEffect7(() => {
     fnRef.current = fn;
   }, [fn]);
   const debouncedFn = useCallback2(
@@ -2660,44 +2705,13 @@ function useDebounce(fn, delay = 300) {
     },
     [delay]
   );
-  useEffect8(() => {
+  useEffect7(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
   }, []);
   return debouncedFn;
 }
-
-// src/hooks/useObserverHeight.hook.ts
-import { useLayoutEffect, useRef as useRef10, useState as useState6 } from "react";
-var useObserverHeight = (elRef) => {
-  const [height, setHeight] = useState6(0);
-  const timeoutRef = useRef10(void 0);
-  useLayoutEffect(() => {
-    const el = elRef.current;
-    if (!el) return;
-    const updateHeight = (newHeight) => {
-      setHeight(Math.max(0, newHeight));
-    };
-    const ro = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      if (!entry) return;
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-      timeoutRef.current = window.setTimeout(() => {
-        updateHeight(entry.contentRect.height);
-      }, 100);
-    });
-    ro.observe(el);
-    updateHeight(el.getBoundingClientRect().height || 0);
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-      ro.disconnect();
-    };
-  }, [elRef]);
-  return height;
-};
 export {
   ActionIcon,
   BarChart,
@@ -2755,7 +2769,7 @@ export {
   getStyleNumber,
   getTableTotalPages,
   useDebounce,
-  useObserverHeight,
+  useResizeObserver,
   useTableGetRowsPerPage
 };
 //# sourceMappingURL=index.js.map