@embeddable.com/remarkable-ui 2.0.13 → 2.0.15

package/dist/index.js

@@ -156,7 +156,7 @@ var SelectListOption = ({
 };
 
 // src/components/shared/Button/Button.tsx
-import styles8 from "./Button.module-UAYCVFGG.module.css";
+import styles8 from "./Button.module-GOXSST7L.module.css";
 import clsx7 from "clsx";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var Button = ({
@@ -252,13 +252,15 @@ SelectFieldTrigger.displayName = "SelectFieldTrigger";
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.tsx
 import { useEffect, useRef } from "react";
-import styles12 from "./SelectFieldContent.module-6FORUMWR.module.css";
+import styles12 from "./SelectFieldContent.module-GZYJOPUB.module.css";
 import clsx11 from "clsx";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var SelectFieldContent = ({
   children,
   autoFocus,
-  className
+  className,
+  fitContent = false,
+  ...props
 }) => {
   const containerRef = useRef(null);
   const currentIndex = useRef(0);
@@ -306,7 +308,16 @@ var SelectFieldContent = ({
       container.removeEventListener("keydown", onKeyDown);
     };
   }, [autoFocus, children]);
-  return /* @__PURE__ */ jsx13("div", { ref: containerRef, tabIndex: -1, className: clsx11(styles12.selectFieldContent, className), children });
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      ref: containerRef,
+      tabIndex: -1,
+      className: clsx11(styles12.selectFieldContent, fitContent && styles12.fitContent, className),
+      ...props,
+      children
+    }
+  );
 };
 var SelectFieldContentList = ({ children, disabled }) => {
   return /* @__PURE__ */ jsx13("div", { className: clsx11(styles12.selectFieldContentList, disabled && styles12.disabled), children });
@@ -844,6 +855,170 @@ var NumberField = forwardRef4(
 );
 NumberField.displayName = "NumberField";
 
+// src/components/editors/dates/DateRangePicker/DateRangePicker.tsx
+import { useState as useState3 } from "react";
+import { DayPicker } from "react-day-picker";
+import "./DateRangePicker-YLEWETBG.css";
+
+// src/components/editors/dates/DateRangePicker/DateRangePickerChevron.tsx
+import { IconCaretDownFilled as IconCaretDownFilled2 } from "@tabler/icons-react";
+import styles20 from "./DateRangePickerChevron.module-2PDNKQAJ.module.css";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var DateRangePickerChevron = ({
+  orientation
+}) => {
+  const rotation = orientation === "left" ? "rotate(90deg)" : orientation === "right" ? "rotate(-90deg)" : void 0;
+  return /* @__PURE__ */ jsx23(
+    "button",
+    {
+      className: styles20.chevron,
+      style: {
+        transform: rotation
+      },
+      children: /* @__PURE__ */ jsx23(IconCaretDownFilled2, {})
+    }
+  );
+};
+
+// src/utils/date.utils.ts
+var isSameDate = (a, b) => a?.getTime() === b?.getTime();
+var isSameDateRange = (a, b) => isSameDate(a?.from, b?.from) && isSameDate(a?.to, b?.to);
+var endOfDayUTC = (date) => {
+  const d = new Date(date);
+  d.setUTCHours(23, 59, 59, 999);
+  return d;
+};
+
+// src/components/editors/dates/DateRangePicker/DateRangePicker.tsx
+import * as rdpLocales from "react-day-picker/locale";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var DateRangePicker = ({
+  value,
+  numberOfMonths = 1,
+  locale = "en",
+  onChange
+}) => {
+  const [month, setMonth] = useState3(value?.from ?? /* @__PURE__ */ new Date());
+  const handleChange = (range) => {
+    if (range?.to) {
+      range.to = endOfDayUTC(range.to);
+    }
+    onChange(range);
+  };
+  return /* @__PURE__ */ jsx24(
+    DayPicker,
+    {
+      month,
+      onMonthChange: setMonth,
+      numberOfMonths,
+      components: { Chevron: DateRangePickerChevron },
+      locale: rdpLocales[locale],
+      mode: "range",
+      navLayout: "around",
+      onSelect: handleChange,
+      selected: value,
+      timeZone: "UTC",
+      showOutsideDays: true
+    }
+  );
+};
+
+// src/components/editors/dates/DateRangePickerField/DateRangePickerField.tsx
+import { useState as useState4 } from "react";
+import styles21 from "./DateRangePickerField.module-CURG3KIS.module.css";
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+var getDateRangePickerLabel = (dateRange, displayValue) => {
+  if (dateRange === void 0) return void 0;
+  if (displayValue) return displayValue;
+  const { from, to } = dateRange;
+  if (!from || !to) return void 0;
+  return `${from ? from.toLocaleDateString() : ""} - ${to ? to.toLocaleDateString() : ""}`;
+};
+var DateRangePickerField = ({
+  locale,
+  displayValue,
+  value,
+  startIcon,
+  label,
+  disabled,
+  placeholder,
+  required,
+  error,
+  errorMessage,
+  clearable,
+  numberOfMonths = 1,
+  submitLabel = "Apply",
+  onChange
+}) => {
+  const [isOpen, setIsOpen] = useState4(false);
+  const [currentDateRange, setCurrentDateRange] = useState4(value);
+  const valueLabel = getDateRangePickerLabel(value, displayValue);
+  const hasError = error || !!errorMessage;
+  const handleChange = () => {
+    onChange(currentDateRange);
+    setIsOpen(false);
+  };
+  const handleClear = () => {
+    setCurrentDateRange(void 0);
+    onChange(void 0);
+  };
+  const handleOpenChange = (open) => {
+    if (open) {
+      setIsOpen(true);
+      return;
+    }
+    setCurrentDateRange(value);
+    setIsOpen(false);
+  };
+  const isSubmitDisabled = isSameDateRange(currentDateRange, value);
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx25(FieldHeader, { label, required }),
+    /* @__PURE__ */ jsx25(
+      Dropdown,
+      {
+        open: isOpen,
+        onOpenChange: handleOpenChange,
+        disabled,
+        triggerComponent: /* @__PURE__ */ jsx25(
+          SelectFieldTrigger,
+          {
+            startIcon,
+            "aria-label": "Select options",
+            placeholder,
+            disabled,
+            valueLabel,
+            onClear: handleClear,
+            isClearable: clearable,
+            error: hasError
+          }
+        ),
+        children: /* @__PURE__ */ jsxs14(SelectFieldContent, { fitContent: true, children: [
+          /* @__PURE__ */ jsx25(
+            DateRangePicker,
+            {
+              locale,
+              numberOfMonths,
+              value: currentDateRange,
+              onChange: setCurrentDateRange
+            }
+          ),
+          /* @__PURE__ */ jsx25(
+            Button,
+            {
+              size: "small",
+              className: styles21.submitButton,
+              onClick: handleChange,
+              disabled: isSubmitDisabled,
+              children: submitLabel
+            }
+          )
+        ] })
+      }
+    ),
+    errorMessage && /* @__PURE__ */ jsx25(FieldFeedback, { message: errorMessage, variant: "error" })
+  ] });
+};
+
 // src/components/charts/bars/BarChart.tsx
 import { useRef as useRef4 } from "react";
 import { Bar } from "react-chartjs-2";
@@ -1076,6 +1251,9 @@ function isMixedValues(values) {
 }
 var getChartjsAxisOptionsScalesGridColor = (ctx) => {
   if (ctx.tick.value === 0) {
+    if (ctx.chart.data.datasets.length === 0) {
+      return void 0;
+    }
     const values = ctx.chart.data.datasets[0].data;
     if (isMixedValues(values)) {
       return getStyle("--em-chart-grid-line-color", "#212129");
@@ -1277,10 +1455,10 @@ var getBarChartOptions = (options) => {
 };
 
 // src/components/charts/bars/BarChart.tsx
-import styles20 from "./charts.module-YNKCWRLU.module.css";
+import styles22 from "./charts.module-YNKCWRLU.module.css";
 import { mergician as mergician3 } from "mergician";
 import ChartDataLabels from "chartjs-plugin-datalabels";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -1298,7 +1476,7 @@ var BarChart = ({ data, onSegmentClick, options = {}, ...props }) => {
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx23("div", { className: styles20.chartContainer, children: /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx26("div", { className: styles22.chartContainer, children: /* @__PURE__ */ jsx26(
     Bar,
     {
       ref: chartRef,
@@ -1323,7 +1501,7 @@ import {
   Filler
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-import styles21 from "./charts.module-YNKCWRLU.module.css";
+import styles23 from "./charts.module-YNKCWRLU.module.css";
 import { useRef as useRef5 } from "react";
 import { mergician as mergician5 } from "mergician";
 
@@ -1418,7 +1596,7 @@ var getLineChartOptions = (options) => {
 // src/components/charts/lines/LineChart.tsx
 import ChartDataLabels2 from "chartjs-plugin-datalabels";
 import AnnotationPlugin from "chartjs-plugin-annotation";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 ChartJS2.register(
   CategoryScale2,
   LinearScale2,
@@ -1439,7 +1617,7 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx24("div", { className: styles21.chartContainer, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx27("div", { className: styles23.chartContainer, children: /* @__PURE__ */ jsx27(
     Line,
     {
       ref: chartRef,
@@ -1451,16 +1629,16 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
 };
 
 // src/components/charts/kpis/KpiChart.tsx
-import styles23 from "./KpiChart.module-2LUIN66C.module.css";
+import styles25 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
-import styles22 from "./KpiChartChange.module-BAW7YCOW.module.css";
+import styles24 from "./KpiChartChange.module-BAW7YCOW.module.css";
 import clsx16 from "clsx";
 import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getChangeClass = (isPositive, invertChangeColors) => {
-  if (isPositive) return invertChangeColors ? styles22.negative : styles22.positive;
-  return invertChangeColors ? styles22.positive : styles22.negative;
+  if (isPositive) return invertChangeColors ? styles24.negative : styles24.positive;
+  return invertChangeColors ? styles24.positive : styles24.negative;
 };
 var KpiChartChange = ({
   value,
@@ -1486,35 +1664,35 @@ var KpiChartChange = ({
   const displayValue = `${isPositive ? "+" : ""}${differenceLabel}`;
   const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
   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(
+  return /* @__PURE__ */ jsxs15("div", { className: styles24.kpiChangeContainerSizeGuide, children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles24.kpiChartChangeContainer, styles24.hidden), children: [
+      /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          className: clsx16(styles24.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
           children: [
-            /* @__PURE__ */ jsx25(Icon, {}),
-            /* @__PURE__ */ jsx25("span", { children: displayValue })
+            /* @__PURE__ */ jsx28(Icon, {}),
+            /* @__PURE__ */ jsx28("span", { children: displayValue })
           ]
         }
       ),
-      /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: comparisonLabel })
+      /* @__PURE__ */ jsx28("span", { className: styles24.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(
+    /* @__PURE__ */ jsx28("div", { className: styles24.kpiAbsoluteContainer, children: /* @__PURE__ */ jsx28("div", { className: styles24.kpiChartChangeContainer, children: showNoPreviousData ? /* @__PURE__ */ jsx28("span", { className: styles24.kpiComparisonLabel, children: noPreviousDataLabel }) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
+      !equalComparison && /* @__PURE__ */ jsxs15(
         "span",
         {
           className: clsx16(
-            styles22.kpiChangeBadge,
+            styles24.kpiChangeBadge,
             getChangeClass(isPositive, invertChangeColors)
           ),
           children: [
-            /* @__PURE__ */ jsx25(Icon, {}),
-            /* @__PURE__ */ jsx25("span", { children: displayValue })
+            /* @__PURE__ */ jsx28(Icon, {}),
+            /* @__PURE__ */ jsx28("span", { children: displayValue })
           ]
         }
       ),
-      /* @__PURE__ */ jsx25("span", { className: styles22.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
+      /* @__PURE__ */ jsx28("span", { className: styles24.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
     ] }) }) })
   ] });
 };
@@ -1523,12 +1701,12 @@ var KpiChartChange = ({
 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 });
+import { Fragment as Fragment5, jsx as jsx29 } from "react/jsx-runtime";
+var ConditionalWrapper = ({ condition, wrapper, children }) => condition ? wrapper(children) : /* @__PURE__ */ jsx29(Fragment5, { children });
 var ConditionalWrapper_default = ConditionalWrapper;
 
 // src/components/charts/kpis/KpiChart.tsx
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
 var KpiChart = ({
   value,
   valueFontSize,
@@ -1545,13 +1723,13 @@ var KpiChart = ({
   const hasComparisonValue = comparisonValue !== void 0;
   const displayValue = value === void 0 ? "" : valueFormatter ? valueFormatter(value) : value;
   const autoResizeValueFontSize = !valueFontSize;
-  return /* @__PURE__ */ jsxs15("div", { className: styles23.kpiChartContainer, children: [
-    /* @__PURE__ */ jsx27("div", { className: styles23.kpiChartValueContainer, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs16("div", { className: styles25.kpiChartContainer, children: [
+    /* @__PURE__ */ jsx30("div", { className: styles25.kpiChartValueContainer, children: /* @__PURE__ */ jsx30(
       ConditionalWrapper_default,
       {
         condition: autoResizeValueFontSize,
-        wrapper: (children) => /* @__PURE__ */ jsx27(AutoTextSize, { mode: "boxoneline", minFontSizePx: 1, maxFontSizePx: 999, children }),
-        children: /* @__PURE__ */ jsx27(
+        wrapper: (children) => /* @__PURE__ */ jsx30(AutoTextSize, { mode: "boxoneline", minFontSizePx: 1, maxFontSizePx: 999, children }),
+        children: /* @__PURE__ */ jsx30(
           "h2",
           {
             title: displayValue.toString(),
@@ -1563,7 +1741,7 @@ var KpiChart = ({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx27("div", { className: styles23.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx27("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx30("div", { className: styles25.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx30("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx30(
       KpiChartChange,
       {
         equalComparisonLabel,
@@ -1660,12 +1838,12 @@ 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 styles26 from "./charts.module-YNKCWRLU.module.css";
 
 // src/hooks/useResizeObserver.hook.ts
-import { useLayoutEffect, useRef as useRef6, useState as useState3 } from "react";
+import { useLayoutEffect, useRef as useRef6, useState as useState5 } from "react";
 var useResizeObserver = (elRef, timeout = 100) => {
-  const [size, setSize] = useState3({ width: 0, height: 0 });
+  const [size, setSize] = useState5({ width: 0, height: 0 });
   const timeoutRef = useRef6(void 0);
   useLayoutEffect(() => {
     const el = elRef.current;
@@ -1697,7 +1875,7 @@ var useResizeObserver = (elRef, timeout = 100) => {
 };
 
 // src/components/charts/pies/DonutChart/DonutChart.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var MIN_WIDTH_HEIGHT_TO_SHOW_CHART = 10;
 ChartJS3.register(ArcElement, Tooltip3, Legend3, ChartDataLabels3, AnnotationPlugin2);
 var DonutChart = ({
@@ -1722,7 +1900,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__ */ jsx28("div", { className: styles24.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx31("div", { className: styles26.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx31(
     Pie,
     {
       ref: chartRef,
@@ -1739,9 +1917,9 @@ 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 styles27 from "./charts.module-YNKCWRLU.module.css";
 import AnnotationPlugin3 from "chartjs-plugin-annotation";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 ChartJS4.register(ArcElement2, Tooltip4, Legend4, ChartDataLabels4, AnnotationPlugin3);
 var PieChart = ({
   data,
@@ -1764,7 +1942,7 @@ var PieChart = ({
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx29("div", { className: styles25.chartContainer, children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx32("div", { className: styles27.chartContainer, children: /* @__PURE__ */ jsx32(
     Pie2,
     {
       ref: chartRef,
@@ -1776,8 +1954,8 @@ var PieChart = ({
 };
 
 // src/components/charts/tables/Table/TablePaginated.tsx
-import * as React2 from "react";
-import styles29 from "./tables.module-GNDYDW3Z.module.css";
+import * as React3 from "react";
+import styles31 from "./tables.module-GNDYDW3Z.module.css";
 import clsx19 from "clsx";
 
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
@@ -1787,9 +1965,9 @@ import {
   IconChevronsLeft,
   IconChevronsRight
 } from "@tabler/icons-react";
-import styles26 from "./TablePagination.module-VGIQ7VN7.module.css";
+import styles28 from "./TablePagination.module-VGIQ7VN7.module.css";
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var getTableTotalPages = (total, pageSize) => {
   return total ? Math.ceil(total / pageSize) : void 0;
 };
@@ -1808,9 +1986,9 @@ var TablePagination = ({
       onPageChange(0);
     }
   }, [totalPages, page]);
-  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__ */ jsx30(
+  return /* @__PURE__ */ jsx33("div", { className: styles28.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs17("div", { className: styles28.tablePaginationCentral, children: [
+    /* @__PURE__ */ jsxs17("div", { className: styles28.tablePaginationCentralButtons, children: [
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronsLeft,
@@ -1821,7 +1999,7 @@ var TablePagination = ({
           "aria-label": "First page"
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronLeft,
@@ -1833,9 +2011,9 @@ var TablePagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx30("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
-    /* @__PURE__ */ jsxs16("div", { className: styles26.tablePaginationCentralButtons, children: [
-      /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx33("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
+    /* @__PURE__ */ jsxs17("div", { className: styles28.tablePaginationCentralButtons, children: [
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronRight,
@@ -1846,7 +2024,7 @@ var TablePagination = ({
           "aria-label": "Next page"
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronsRight,
@@ -1860,8 +2038,8 @@ var TablePagination = ({
 };
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
-import { IconCaretDownFilled as IconCaretDownFilled2, IconCaretUpDownFilled, IconCaretUpFilled } from "@tabler/icons-react";
-import styles27 from "./TableHeader.module-XXXLQWHC.module.css";
+import { IconCaretDownFilled as IconCaretDownFilled3, IconCaretUpDownFilled, IconCaretUpFilled } from "@tabler/icons-react";
+import styles29 from "./TableHeader.module-XXXLQWHC.module.css";
 
 // src/components/charts/tables/Table/table.types.ts
 var TableSortDirection = {
@@ -1877,7 +2055,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 jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 var getHeaderAriaSort = (sort, header) => {
   return sort?.id === header.id ? sort.direction === "asc" ? "ascending" : "descending" : "none";
 };
@@ -1891,15 +2069,15 @@ var TableHeader = ({
   onSortChange
 }) => {
   const getSortIcon = (header) => {
-    if (!sort) return /* @__PURE__ */ jsx31(IconCaretUpDownFilled, {});
+    if (!sort) return /* @__PURE__ */ jsx34(IconCaretUpDownFilled, {});
     if (sort.id === header.id) {
       if (sort.direction === TableSortDirection.ASC) {
-        return /* @__PURE__ */ jsx31(IconCaretUpFilled, {});
+        return /* @__PURE__ */ jsx34(IconCaretUpFilled, {});
       } else if (sort.direction === TableSortDirection.DESC) {
-        return /* @__PURE__ */ jsx31(IconCaretDownFilled2, {});
+        return /* @__PURE__ */ jsx34(IconCaretDownFilled3, {});
       }
     }
-    return /* @__PURE__ */ jsx31(IconCaretUpDownFilled, {});
+    return /* @__PURE__ */ jsx34(IconCaretUpDownFilled, {});
   };
   const handleSort = (id) => {
     if (!onSortChange) return;
@@ -1917,16 +2095,16 @@ var TableHeader = ({
       }
     }
   };
-  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(
+  return /* @__PURE__ */ jsx34("thead", { className: styles29.tableHeader, children: /* @__PURE__ */ jsxs18("tr", { children: [
+    showIndex && /* @__PURE__ */ jsx34("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
+    headers.map((header) => /* @__PURE__ */ jsx34(
       "th",
       {
-        className: styles27.tableHeaderCell,
+        className: styles29.tableHeaderCell,
         style: { minWidth: header.minWidth },
         scope: "col",
         "aria-sort": getHeaderAriaSort(sort, header),
-        children: /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs18(
           "button",
           {
             onClick: () => handleSort(header.id),
@@ -1944,12 +2122,12 @@ var TableHeader = ({
 };
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
-import styles28 from "./TableBody.module-ARNVVKDL.module.css";
+import styles30 from "./TableBody.module-ARNVVKDL.module.css";
 import clsx18 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
-import { useState as useState4 } from "react";
+import { useState as useState6 } from "react";
 import tableStyles2 from "./tables.module-GNDYDW3Z.module.css";
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 var TableBody = ({
   headers,
   rows,
@@ -1958,14 +2136,14 @@ var TableBody = ({
   showIndex,
   onRowIndexClick
 }) => {
-  return /* @__PURE__ */ jsx32("tbody", { className: styles28.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx35("tbody", { className: styles30.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs19(
     "tr",
     {
       onClick: () => onRowIndexClick?.(rowIndex),
       className: clsx18(rowIndex === rows.length - 1 && tableStyles2.tableLastRow),
       children: [
-        showIndex && /* @__PURE__ */ jsx32("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
-        headers.map((header, cellIndex) => /* @__PURE__ */ jsx32(
+        showIndex && /* @__PURE__ */ jsx35("td", { className: clsx18(tableStyles2.mutedCell, tableStyles2.stickyFirstColumn), children: pageSize * page + rowIndex + 1 }),
+        headers.map((header, cellIndex) => /* @__PURE__ */ jsx35(
           TableBodyCell,
           {
             header,
@@ -1981,13 +2159,13 @@ var TableBody = ({
   )) });
 };
 var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
-  const [isPressedCopy, setIsPressedCopy] = useState4(false);
+  const [isPressedCopy, setIsPressedCopy] = useState6(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]
   ) : void 0;
   if (header.cell) {
-    return header.cell({ value, className: styles28.tableBodyCell });
+    return header.cell({ value, className: styles30.tableBodyCell });
   }
   const handleCopy = () => {
     setIsPressedCopy(true);
@@ -1995,22 +2173,22 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
       navigator.clipboard.writeText(String(value));
     }
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "td",
     {
       title: value,
       style: { textAlign: header.align },
       onMouseLeave: () => setIsPressedCopy(false),
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx35(
           ActionIcon,
           {
             title: `Copy: ${String(value)}`,
             onMouseDown: handleCopy,
             icon: isPressedCopy ? IconCopyCheckFilled : IconCopy,
             className: clsx18(
-              styles28.copyButton,
-              header.align === TableHeaderAlign.RIGHT && styles28.leftAlign
+              styles30.copyButton,
+              header.align === TableHeaderAlign.RIGHT && styles30.leftAlign
             ),
             onClick: handleCopy
           }
@@ -2023,8 +2201,8 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
 };
 
 // src/components/charts/tables/Table/TablePaginated.tsx
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
-var TablePaginated = React2.forwardRef(
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+var TablePaginated = React3.forwardRef(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props, ref) => {
     const {
@@ -2041,9 +2219,9 @@ var TablePaginated = React2.forwardRef(
       onPageChange,
       onSortChange
     } = props;
-    return /* @__PURE__ */ jsxs19("div", { ref, className: clsx19(styles29.tableContainer, className), children: [
-      /* @__PURE__ */ jsx33("div", { className: styles29.tableContainerScroll, children: /* @__PURE__ */ jsxs19("table", { className: styles29.table, children: [
-        /* @__PURE__ */ jsx33(
+    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx19(styles31.tableContainer, className), children: [
+      /* @__PURE__ */ jsx36("div", { className: styles31.tableContainerScroll, children: /* @__PURE__ */ jsxs20("table", { className: styles31.table, children: [
+        /* @__PURE__ */ jsx36(
           TableHeader,
           {
             showIndex,
@@ -2052,7 +2230,7 @@ var TablePaginated = React2.forwardRef(
             onSortChange
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(
           TableBody,
           {
             onRowIndexClick,
@@ -2064,7 +2242,7 @@ var TablePaginated = React2.forwardRef(
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx36(
         TablePagination,
         {
           page,
@@ -2080,7 +2258,7 @@ var TablePaginated = React2.forwardRef(
 TablePaginated.displayName = "TablePaginated";
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo3, useState as useState7 } from "react";
 import tableStyles3 from "./tables.module-GNDYDW3Z.module.css";
 import clsx20 from "clsx";
 
@@ -2094,7 +2272,7 @@ var getTableCellWidthStyle = (width) => {
 };
 
 // src/components/charts/tables/PivotTable/PivotTable.tsx
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 var isNumber = (v) => typeof v === "number" && !Number.isNaN(v);
 var getPercentageDisplay = (percentage, percentageDecimalPlaces) => {
   return `${percentage.toFixed(percentageDecimalPlaces)}%`;
@@ -2186,7 +2364,7 @@ var PivotTable = ({
     }
     return { colTotals: cTotals, rowTotals: rTotals, grandTotals: gTotals };
   }, [data, measures, rowDimension.key, columnDimension.key, columnValues, rowValues]);
-  const [visibleCount, setVisibleCount] = useState5(
+  const [visibleCount, setVisibleCount] = useState7(
     () => progressive ? Math.min(batchSize, rowValues.length) : rowValues.length
   );
   useEffect6(() => {
@@ -2213,22 +2391,22 @@ var PivotTable = ({
     };
   }, [progressive, batchSize, batchDelayMs, rowValues.length, data]);
   const visibleRows = progressive ? rowValues.slice(0, visibleCount) : rowValues;
-  return /* @__PURE__ */ jsx34("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx37("div", { className: clsx20(tableStyles3.tableFullContainer, className), children: /* @__PURE__ */ jsx37(
     "div",
     {
       className: clsx20(
         tableStyles3.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles3.fullWidth
       ),
-      children: /* @__PURE__ */ jsxs20(
+      children: /* @__PURE__ */ jsxs21(
         "table",
         {
           className: tableStyles3.table,
           "aria-label": `${rowDimension.label} by ${columnDimension.label}`,
           children: [
-            /* @__PURE__ */ jsxs20("thead", { children: [
-              /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx34(
+            /* @__PURE__ */ jsxs21("thead", { children: [
+              /* @__PURE__ */ jsxs21("tr", { children: [
+                /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "col",
@@ -2240,7 +2418,7 @@ var PivotTable = ({
                 ),
                 columnValues.map((columnValue) => {
                   const columnValueDisplay = columnDimension.formatValue ? columnDimension.formatValue(columnValue) : columnValue;
-                  return /* @__PURE__ */ jsx34(
+                  return /* @__PURE__ */ jsx37(
                     "th",
                     {
                       scope: "colgroup",
@@ -2251,7 +2429,7 @@ var PivotTable = ({
                     `col-${columnValue}`
                   );
                 }),
-                hasRowTotals && /* @__PURE__ */ jsx34(
+                hasRowTotals && /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "colgroup",
@@ -2263,8 +2441,8 @@ var PivotTable = ({
                   "col-total-group"
                 )
               ] }),
-              /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsxs21("tr", { children: [
+                /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "col",
@@ -2276,7 +2454,7 @@ var PivotTable = ({
                   }
                 ),
                 columnValues.flatMap(
-                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx34(
+                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx37(
                     "th",
                     {
                       scope: "col",
@@ -2287,7 +2465,7 @@ var PivotTable = ({
                     `sub-${String(col)}-${measure.key}-${idx}`
                   ))
                 ),
-                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => /* @__PURE__ */ jsx34(
+                hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "col",
@@ -2300,11 +2478,11 @@ var PivotTable = ({
                 ))
               ] })
             ] }),
-            /* @__PURE__ */ jsxs20("tbody", { children: [
+            /* @__PURE__ */ jsxs21("tbody", { children: [
               visibleRows.map((row) => {
                 const rowDimensionValue = rowDimension.formatValue ? rowDimension.formatValue(row) : row;
-                return /* @__PURE__ */ jsxs20("tr", { children: [
-                  /* @__PURE__ */ jsx34(
+                return /* @__PURE__ */ jsxs21("tr", { children: [
+                  /* @__PURE__ */ jsx37(
                     "th",
                     {
                       scope: "row",
@@ -2332,7 +2510,7 @@ var PivotTable = ({
                         return measure.accessor ? measure.accessor(object) : value;
                       };
                       const columnValueDisplay = getDisplayValue();
-                      return /* @__PURE__ */ jsx34("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
+                      return /* @__PURE__ */ jsx37("td", { title: columnValueDisplay, children: columnValueDisplay }, key);
                     })
                   ),
                   hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
@@ -2349,12 +2527,12 @@ var PivotTable = ({
                     } else if (measure.accessor) {
                       displayValue = measure.accessor({ [measure.key]: value });
                     }
-                    return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                    return /* @__PURE__ */ jsx37("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
                   })
                 ] }, `row-${row}`);
               }),
-              hasColumnTotals && /* @__PURE__ */ jsxs20("tr", { className: tableStyles3.stickyLastRow, children: [
-                /* @__PURE__ */ jsx34(
+              hasColumnTotals && /* @__PURE__ */ jsxs21("tr", { className: tableStyles3.stickyLastRow, children: [
+                /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "row",
@@ -2380,7 +2558,7 @@ var PivotTable = ({
                       displayValue = measure.accessor({ [measure.key]: value });
                     }
                     const columnValueDisplay = show ? displayValue : "";
-                    return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: columnValueDisplay, children: columnValueDisplay }, key);
+                    return /* @__PURE__ */ jsx37("td", { className: tableStyles3.boltCell, title: columnValueDisplay, children: columnValueDisplay }, key);
                   })
                 ),
                 hasRowTotals && measures.filter((measure) => rowTotalsSet.has(measure.key)).map((measure, idx) => {
@@ -2396,7 +2574,7 @@ var PivotTable = ({
                   } else if (measure.accessor) {
                     displayValue = measure.accessor({ [measure.key]: value });
                   }
-                  return /* @__PURE__ */ jsx34("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
+                  return /* @__PURE__ */ jsx37("td", { className: tableStyles3.boltCell, title: displayValue, children: displayValue }, key);
                 })
               ] }, "totals-row")
             ] })
@@ -2557,7 +2735,7 @@ var createColorForValue = ({
 };
 
 // src/components/charts/tables/HeatMap/HeatMap.tsx
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var HeatMap = ({
   data,
   showValues = false,
@@ -2632,16 +2810,16 @@ var HeatMap = ({
     },
     [domainMin, domainMax, rawMin, rawMax, minColor, midColor, maxColor]
   );
-  return /* @__PURE__ */ jsx35("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx38("div", { className: clsx21(tableStyles4.tableFullContainer, className), children: /* @__PURE__ */ jsx38(
     "div",
     {
       className: clsx21(
         tableStyles4.tableAdjustedContainer,
         (!columnWidth || !firstColumnWidth) && tableStyles4.fullWidth
       ),
-      children: /* @__PURE__ */ jsxs21("table", { className: tableStyles4.table, "aria-label": "Heat map", children: [
-        /* @__PURE__ */ jsx35("thead", { children: /* @__PURE__ */ jsxs21("tr", { children: [
-          /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsxs22("table", { className: tableStyles4.table, "aria-label": "Heat map", children: [
+        /* @__PURE__ */ jsx38("thead", { children: /* @__PURE__ */ jsxs22("tr", { children: [
+          /* @__PURE__ */ jsx38(
             "th",
             {
               className: tableStyles4.stickyFirstColumn,
@@ -2649,10 +2827,10 @@ var HeatMap = ({
               children: measure.label
             }
           ),
-          columnValues.map((cv, index) => /* @__PURE__ */ jsx35("th", { style: getTableCellWidthStyle(columnWidth), children: columnDimension.format ? columnDimension.format(cv) : cv }, `col-${cv}-${index}`))
+          columnValues.map((cv, index) => /* @__PURE__ */ jsx38("th", { style: getTableCellWidthStyle(columnWidth), children: columnDimension.format ? columnDimension.format(cv) : cv }, `col-${cv}-${index}`))
         ] }) }),
-        /* @__PURE__ */ jsx35("tbody", { children: rowValues.map((rv) => /* @__PURE__ */ jsxs21("tr", { children: [
-          /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx38("tbody", { children: rowValues.map((rv) => /* @__PURE__ */ jsxs22("tr", { children: [
+          /* @__PURE__ */ jsx38(
             "th",
             {
               scope: "row",
@@ -2666,7 +2844,7 @@ var HeatMap = ({
             const value = getCellValue(obj?.[measure.key], displayNullAs);
             const background = getCellBackground(value, colorForValue);
             const color = getCellColor(background);
-            return /* @__PURE__ */ jsx35(
+            return /* @__PURE__ */ jsx38(
               "td",
               {
                 style: {
@@ -2736,6 +2914,8 @@ export {
   CardContent,
   CardFeedback,
   CardHeader,
+  DateRangePicker,
+  DateRangePickerField,
   DonutChart,
   Dropdown,
   FieldFeedback,