@embeddable.com/remarkable-ui 2.0.15 → 2.0.17

package/dist/index.js

@@ -1,20 +1,22 @@
-import "./chunk-7RY47BRM.js";
+import {
+  styles
+} from "./chunk-V3ZAXTII.js";
 
 // src/components/shared/Skeleton/Skeleton.tsx
-import styles from "./Skeleton.module-ZN5S5VRF.module.css";
+import styles2 from "./Skeleton.module-ZN5S5VRF.module.css";
 import { jsx } from "react/jsx-runtime";
 var Skeleton = () => {
-  return /* @__PURE__ */ jsx("div", { className: styles.skeleton });
+  return /* @__PURE__ */ jsx("div", { className: styles2.skeleton });
 };
 
 // src/components/shared/Card/Card.tsx
 import React from "react";
-import styles2 from "./Card.module-DHO64CIG.module.css";
+import styles3 from "./Card.module-DHO64CIG.module.css";
 import clsx from "clsx";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Card = React.forwardRef(
   ({ children, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx2("div", { className: clsx(styles2.card, className), ref, ...props, children });
+    return /* @__PURE__ */ jsx2("div", { className: clsx(styles3.card, className), ref, ...props, children });
   }
 );
 Card.displayName = "Card";
@@ -22,8 +24,8 @@ var CardHeader = ({ title, subtitle, rightContent }) => {
   if (!title && !subtitle && !rightContent) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles2.cardHeader, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles2.leftContent, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles3.cardHeader, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles3.leftContent, children: [
       title && /* @__PURE__ */ jsx2("h1", { children: title }),
       subtitle && /* @__PURE__ */ jsx2("p", { children: subtitle })
     ] }),
@@ -32,14 +34,14 @@ var CardHeader = ({ title, subtitle, rightContent }) => {
 };
 var CardContent = React.forwardRef(
   ({ children }, ref) => {
-    return /* @__PURE__ */ jsx2("div", { className: styles2.cardContent, ref, children });
+    return /* @__PURE__ */ jsx2("div", { className: styles3.cardContent, ref, children });
   }
 );
 CardContent.displayName = "CardContent";
 
 // src/components/shared/Card/CardFeedback/CardFeedback.tsx
 import clsx2 from "clsx";
-import styles3 from "./CardFeedback.module-WCSHLBSM.module.css";
+import styles4 from "./CardFeedback.module-WCSHLBSM.module.css";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var CardFeedback = ({
   icon: Icon,
@@ -48,7 +50,7 @@ var CardFeedback = ({
   className,
   variant = "info"
 }) => {
-  return /* @__PURE__ */ jsxs2("div", { className: clsx2(styles3.feedback, styles3[variant], className), children: [
+  return /* @__PURE__ */ jsxs2("div", { className: clsx2(styles4.feedback, styles4[variant], className), children: [
     Icon && /* @__PURE__ */ jsx3(Icon, {}),
     /* @__PURE__ */ jsx3("h2", { children: title }),
     /* @__PURE__ */ jsx3("p", { children: message })
@@ -56,7 +58,7 @@ var CardFeedback = ({
 };
 
 // src/components/shared/Typography/Typography.tsx
-import styles4 from "./Typography.module-SW6CT55P.module.css";
+import styles5 from "./Typography.module-SW6CT55P.module.css";
 import clsx3 from "clsx";
 import { jsx as jsx4 } from "react/jsx-runtime";
 function Typography({
@@ -66,20 +68,20 @@ function Typography({
   style,
   title
 }) {
-  return /* @__PURE__ */ jsx4(Component, { title, className: clsx3(styles4.typography, className), style, children });
+  return /* @__PURE__ */ jsx4(Component, { title, className: clsx3(styles5.typography, className), style, children });
 }
 
 // src/components/shared/ActionIcon/ActionIcon.tsx
 import clsx4 from "clsx";
-import styles5 from "./ActionIcon.module-WZFHG44L.module.css";
+import styles6 from "./ActionIcon.module-WZFHG44L.module.css";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var ActionIcon = ({ icon: Icon, className, ...props }) => {
-  return /* @__PURE__ */ jsx5("button", { className: clsx4(styles5.actionIcon, className), ...props, children: /* @__PURE__ */ jsx5(Icon, { className: styles5.icon }) });
+  return /* @__PURE__ */ jsx5("button", { className: clsx4(styles6.actionIcon, className), ...props, children: /* @__PURE__ */ jsx5(Icon, { className: styles6.icon }) });
 };
 
 // src/components/shared/ButtonIcon/ButtonIcon.tsx
 import clsx5 from "clsx";
-import styles6 from "./ButtonIcon.module-JHFZQSMJ.module.css";
+import styles7 from "./ButtonIcon.module-JHFZQSMJ.module.css";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var ButtonIcon = ({
   icon: Icon,
@@ -91,7 +93,7 @@ var ButtonIcon = ({
   return /* @__PURE__ */ jsx6(
     "button",
     {
-      className: clsx5(styles6.buttonIcon, styles6[variant], styles6[size], className),
+      className: clsx5(styles7.buttonIcon, styles7[variant], styles7[size], className),
       ...props,
       children: /* @__PURE__ */ jsx6(Icon, {})
     }
@@ -118,7 +120,7 @@ var Dropdown = ({
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldOption/SelectFieldOption.tsx
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import styles7 from "./SelectFieldOption.module-SH3TOVNB.module.css";
+import styles8 from "./SelectFieldOption.module-SH3TOVNB.module.css";
 import clsx6 from "clsx";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SelectListOption = ({
@@ -135,18 +137,18 @@ var SelectListOption = ({
     DropdownMenu2.Item,
     {
       className: clsx6(
-        styles7.selectFieldOption,
-        disabled && styles7.disabled,
-        isSelected && styles7.selected
+        styles8.selectFieldOption,
+        disabled && styles8.disabled,
+        isSelected && styles8.selected
       ),
       "data-value": value,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs4("span", { className: styles7.leftContent, children: [
+        /* @__PURE__ */ jsxs4("span", { className: styles8.leftContent, children: [
           startIcon,
           /* @__PURE__ */ jsx8("span", { title: label, children: label })
         ] }),
-        /* @__PURE__ */ jsxs4("span", { className: styles7.rightContent, children: [
+        /* @__PURE__ */ jsxs4("span", { className: styles8.rightContent, children: [
           /* @__PURE__ */ jsx8("span", { title: rightLabel, children: rightLabel }),
           endIcon
         ] })
@@ -156,7 +158,7 @@ var SelectListOption = ({
 };
 
 // src/components/shared/Button/Button.tsx
-import styles8 from "./Button.module-GOXSST7L.module.css";
+import styles9 from "./Button.module-GOXSST7L.module.css";
 import clsx7 from "clsx";
 import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var Button = ({
@@ -168,7 +170,7 @@ var Button = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs5("button", { className: clsx7(styles8.button, styles8[variant], styles8[size], className), ...props, children: [
+  return /* @__PURE__ */ jsxs5("button", { className: clsx7(styles9.button, styles9[variant], styles9[size], className), ...props, children: [
     StartIcon && /* @__PURE__ */ jsx9(StartIcon, {}),
     /* @__PURE__ */ jsx9("span", { children }),
     EndIcon && /* @__PURE__ */ jsx9(EndIcon, {})
@@ -177,7 +179,7 @@ var Button = ({
 
 // src/components/shared/GhostButton/GhostButton.tsx
 import clsx8 from "clsx";
-import styles9 from "./GhostButton.module-43KOFC6W.module.css";
+import styles10 from "./GhostButton.module-43KOFC6W.module.css";
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var GhostButton = ({
   startIcon: StartIcon,
@@ -186,7 +188,7 @@ var GhostButton = ({
   className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs6("button", { className: clsx8(styles9.ghostButton, className), ...props, children: [
+  return /* @__PURE__ */ jsxs6("button", { className: clsx8(styles10.ghostButton, className), ...props, children: [
     StartIcon && /* @__PURE__ */ jsx10(StartIcon, {}),
     /* @__PURE__ */ jsx10("span", { children }),
     EndIcon && /* @__PURE__ */ jsx10(EndIcon, {})
@@ -195,17 +197,17 @@ var GhostButton = ({
 
 // src/components/shared/Overlay/Overlay.tsx
 import clsx9 from "clsx";
-import styles10 from "./Overlay.module-FCW64VWM.module.css";
+import styles11 from "./Overlay.module-FCW64VWM.module.css";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var Overlay = ({ className, children }) => {
-  return /* @__PURE__ */ jsx11("div", { className: clsx9(styles10.overlay, className), children });
+  return /* @__PURE__ */ jsx11("div", { className: clsx9(styles11.overlay, className), children });
 };
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
 import { Fragment as Fragment2, useEffect as useEffect3, useMemo, useRef as useRef2, useState } from "react";
 
 // src/components/editors/selects/shared/SelectFieldTrigger/SelectFieldTrigger.tsx
-import styles11 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
+import styles12 from "./SelectFieldTrigger.module-M6BRE7IY.module.css";
 import { IconCaretDownFilled, IconLoader2, IconX } from "@tabler/icons-react";
 import clsx10 from "clsx";
 import { forwardRef } from "react";
@@ -233,16 +235,16 @@ var SelectFieldTrigger = forwardRef(
       {
         ref,
         className: clsx10(
-          styles11.selectFieldTrigger,
-          valueLabel && styles11.filled,
-          error && styles11.error
+          styles12.selectFieldTrigger,
+          valueLabel && styles12.filled,
+          error && styles12.error
         ),
         ...props,
         children: [
           StartIcon && /* @__PURE__ */ jsx12(StartIcon, {}),
           /* @__PURE__ */ jsx12("span", { children: displayValue }),
           showClearButton && /* @__PURE__ */ jsx12(IconX, { onPointerDown: handleClear }),
-          isLoading ? /* @__PURE__ */ jsx12(IconLoader2, { className: styles11.loading }) : /* @__PURE__ */ jsx12(IconCaretDownFilled, {})
+          isLoading ? /* @__PURE__ */ jsx12(IconLoader2, { className: styles12.loading }) : /* @__PURE__ */ jsx12(IconCaretDownFilled, {})
         ]
       }
     );
@@ -252,7 +254,7 @@ SelectFieldTrigger.displayName = "SelectFieldTrigger";
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.tsx
 import { useEffect, useRef } from "react";
-import styles12 from "./SelectFieldContent.module-GZYJOPUB.module.css";
+import styles13 from "./SelectFieldContent.module-GZYJOPUB.module.css";
 import clsx11 from "clsx";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var SelectFieldContent = ({
@@ -313,14 +315,14 @@ var SelectFieldContent = ({
     {
       ref: containerRef,
       tabIndex: -1,
-      className: clsx11(styles12.selectFieldContent, fitContent && styles12.fitContent, className),
+      className: clsx11(styles13.selectFieldContent, fitContent && styles13.fitContent, className),
       ...props,
       children
     }
   );
 };
 var SelectFieldContentList = ({ children, disabled }) => {
-  return /* @__PURE__ */ jsx13("div", { className: clsx11(styles12.selectFieldContentList, disabled && styles12.disabled), children });
+  return /* @__PURE__ */ jsx13("div", { className: clsx11(styles13.selectFieldContentList, disabled && styles13.disabled), children });
 };
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldContent.utils.ts
@@ -340,7 +342,7 @@ var groupOptionsByCategory = (options) => {
 
 // src/components/editors/selects/MultiSelectField/MultiSelectField.tsx
 import { IconSearch, IconSquare, IconSquareCheckFilled } from "@tabler/icons-react";
-import styles17 from "./selects.module-MRJADSDF.module.css";
+import styles18 from "./selects.module-MRJADSDF.module.css";
 
 // src/components/editors/selects/shared/useSelectSearchFocus.hook.ts
 import { useEffect as useEffect2 } from "react";
@@ -355,23 +357,23 @@ var useSelectSearchFocus = (isOpen, searchFieldRef) => {
 };
 
 // src/components/editors/selects/shared/SelectFieldContent/SelectFieldOptions/SelectFieldCategory/SelectFieldCategory.tsx
-import styles13 from "./SelectFieldCategory.module-FMZMX5V2.module.css";
+import styles14 from "./SelectFieldCategory.module-FMZMX5V2.module.css";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var SelectFieldCategory = ({ label }) => {
-  return /* @__PURE__ */ jsx14("span", { className: styles13.selectFieldCategory, children: label });
+  return /* @__PURE__ */ jsx14("span", { className: styles14.selectFieldCategory, children: label });
 };
 
 // src/components/shared/Field/FieldFeedback.tsx
 import clsx12 from "clsx";
-import styles14 from "./FieldFeedback.module-F7Z33KCS.module.css";
+import styles15 from "./FieldFeedback.module-F7Z33KCS.module.css";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var FieldFeedback = ({ message, variant, className }) => {
-  return /* @__PURE__ */ jsx15("p", { className: clsx12(styles14.fieldFeedback, variant && styles14[variant], className), children: message });
+  return /* @__PURE__ */ jsx15("p", { className: clsx12(styles15.fieldFeedback, variant && styles15[variant], className), children: message });
 };
 
 // src/components/shared/Field/FieldHeader.tsx
 import clsx13 from "clsx";
-import styles15 from "./FieldHeader.module-QOLBH472.module.css";
+import styles16 from "./FieldHeader.module-QOLBH472.module.css";
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var FieldHeader = ({
   label,
@@ -382,7 +384,7 @@ var FieldHeader = ({
   if (!label && !required) {
     return null;
   }
-  return /* @__PURE__ */ jsxs8("label", { className: clsx13(styles15.fieldHeader, className), children: [
+  return /* @__PURE__ */ jsxs8("label", { className: clsx13(styles16.fieldHeader, className), children: [
     label,
     required && /* @__PURE__ */ jsx16("span", { children: requiredLabel })
   ] });
@@ -393,7 +395,7 @@ import { forwardRef as forwardRef3 } from "react";
 
 // src/components/editors/inputs/shared/InputField/InputField.tsx
 import { IconX as IconX2 } from "@tabler/icons-react";
-import styles16 from "./InputField.module-LDLOMDBK.module.css";
+import styles17 from "./InputField.module-LDLOMDBK.module.css";
 import clsx14 from "clsx";
 import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -420,7 +422,7 @@ var InputField = forwardRef2(
     const hasError = error || errorMessage;
     return /* @__PURE__ */ jsxs9("div", { className, children: [
       /* @__PURE__ */ jsx17(FieldHeader, { label, required, requiredLabel }),
-      /* @__PURE__ */ jsxs9("div", { className: clsx14(styles16.input, hasError && styles16.error), children: [
+      /* @__PURE__ */ jsxs9("div", { className: clsx14(styles17.input, hasError && styles17.error), children: [
         StartIcon && /* @__PURE__ */ jsx17(StartIcon, {}),
         /* @__PURE__ */ jsx17(
           "input",
@@ -439,7 +441,7 @@ var InputField = forwardRef2(
         /* @__PURE__ */ jsx17(
           IconX2,
           {
-            className: clsx14(styles16.clearIcon, showClearButton && styles16.clearIconVisible),
+            className: clsx14(styles17.clearIcon, showClearButton && styles17.clearIconVisible),
             onClick: () => onChange("")
           }
         ),
@@ -594,7 +596,7 @@ var MultiSelectField = ({
               value: searchValue,
               onKeyDown: (e) => e.stopPropagation(),
               onChange: handleSearch,
-              className: styles17.searchField
+              className: styles18.searchField
             }
           ),
           /* @__PURE__ */ jsxs11(SelectFieldContentList, { disabled: isLoading, children: [
@@ -623,7 +625,7 @@ var MultiSelectField = ({
           /* @__PURE__ */ jsx19(
             Button,
             {
-              className: styles17.submitButton,
+              className: styles18.submitButton,
               disabled: isSubmitDisabled || isLoading,
               variant: "primary",
               size: "medium",
@@ -641,7 +643,7 @@ var MultiSelectField = ({
 
 // src/components/editors/Switch/Switch.tsx
 import clsx15 from "clsx";
-import styles18 from "./Switch.module-MXKS66UI.module.css";
+import styles19 from "./Switch.module-MXKS66UI.module.css";
 import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 var Switch = ({
   checked,
@@ -666,9 +668,9 @@ var Switch = ({
     {
       className: clsx15(
         className,
-        styles18.switch,
-        checked && styles18.checked,
-        disabled && styles18.disabled
+        styles19.switch,
+        checked && styles19.checked,
+        disabled && styles19.disabled
       ),
       children: [
         /* @__PURE__ */ jsx20(
@@ -684,8 +686,8 @@ var Switch = ({
             ...props
           }
         ),
-        /* @__PURE__ */ jsx20("span", { className: styles18.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: styles18.switchThumb, "aria-hidden": "true" }) }),
-        label && /* @__PURE__ */ jsx20("span", { className: clsx15(styles18.switchLabel), children: label })
+        /* @__PURE__ */ jsx20("span", { className: styles19.switchTrack, "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: styles19.switchThumb, "aria-hidden": "true" }) }),
+        label && /* @__PURE__ */ jsx20("span", { className: clsx15(styles19.switchLabel), children: label })
       ]
     }
   );
@@ -694,7 +696,7 @@ var Switch = ({
 // src/components/editors/selects/SingleSelectField/SingleSelectField.tsx
 import { Fragment as Fragment3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState2 } from "react";
 import { IconSearch as IconSearch2 } from "@tabler/icons-react";
-import styles19 from "./selects.module-MRJADSDF.module.css";
+import styles20 from "./selects.module-MRJADSDF.module.css";
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 var SingleSelectField = ({
   label,
@@ -781,7 +783,7 @@ var SingleSelectField = ({
               value: searchValue,
               onKeyDown: (e) => e.stopPropagation(),
               onChange: handleSearch,
-              className: styles19.searchField
+              className: styles20.searchField
             }
           ),
           /* @__PURE__ */ jsxs13(SelectFieldContentList, { disabled: isLoading, children: [
@@ -858,11 +860,11 @@ 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";
+import "./DateRangePicker-E7WV7TPK.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 styles21 from "./DateRangePickerChevron.module-DWIFI5J2.module.css";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var DateRangePickerChevron = ({
   orientation
@@ -871,7 +873,7 @@ var DateRangePickerChevron = ({
   return /* @__PURE__ */ jsx23(
     "button",
     {
-      className: styles20.chevron,
+      className: styles21.chevron,
       style: {
         transform: rotation
       },
@@ -925,11 +927,11 @@ var DateRangePicker = ({
 
 // src/components/editors/dates/DateRangePickerField/DateRangePickerField.tsx
 import { useState as useState4 } from "react";
-import styles21 from "./DateRangePickerField.module-CURG3KIS.module.css";
+import styles22 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;
+  if (!dateRange) return void 0;
+  if (displayValue || displayValue === "") return displayValue;
   const { from, to } = dateRange;
   if (!from || !to) return void 0;
   return `${from ? from.toLocaleDateString() : ""} - ${to ? to.toLocaleDateString() : ""}`;
@@ -1006,7 +1008,7 @@ var DateRangePickerField = ({
             Button,
             {
               size: "small",
-              className: styles21.submitButton,
+              className: styles22.submitButton,
               onClick: handleChange,
               disabled: isSubmitDisabled,
               children: submitLabel
@@ -1455,7 +1457,7 @@ var getBarChartOptions = (options) => {
 };
 
 // src/components/charts/bars/BarChart.tsx
-import styles22 from "./charts.module-YNKCWRLU.module.css";
+import styles23 from "./charts.module-YNKCWRLU.module.css";
 import { mergician as mergician3 } from "mergician";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 import { jsx as jsx26 } from "react/jsx-runtime";
@@ -1476,7 +1478,7 @@ var BarChart = ({ data, onSegmentClick, options = {}, ...props }) => {
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx26("div", { className: styles22.chartContainer, children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx26("div", { className: styles23.chartContainer, children: /* @__PURE__ */ jsx26(
     Bar,
     {
       ref: chartRef,
@@ -1501,7 +1503,7 @@ import {
   Filler
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-import styles23 from "./charts.module-YNKCWRLU.module.css";
+import styles24 from "./charts.module-YNKCWRLU.module.css";
 import { useRef as useRef5 } from "react";
 import { mergician as mergician5 } from "mergician";
 
@@ -1617,7 +1619,7 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx27("div", { className: styles23.chartContainer, children: /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx27("div", { className: styles24.chartContainer, children: /* @__PURE__ */ jsx27(
     Line,
     {
       ref: chartRef,
@@ -1629,16 +1631,16 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
 };
 
 // src/components/charts/kpis/KpiChart.tsx
-import styles25 from "./KpiChart.module-2LUIN66C.module.css";
+import styles26 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
-import styles24 from "./KpiChartChange.module-BAW7YCOW.module.css";
+import styles25 from "./KpiChartChange.module-BAW7YCOW.module.css";
 import clsx16 from "clsx";
 import { IconTrendingDown, IconTrendingUp } from "@tabler/icons-react";
 import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var getChangeClass = (isPositive, invertChangeColors) => {
-  if (isPositive) return invertChangeColors ? styles24.negative : styles24.positive;
-  return invertChangeColors ? styles24.positive : styles24.negative;
+  if (isPositive) return invertChangeColors ? styles25.negative : styles25.positive;
+  return invertChangeColors ? styles25.positive : styles25.negative;
 };
 var KpiChartChange = ({
   value,
@@ -1664,26 +1666,26 @@ var KpiChartChange = ({
   const displayValue = `${isPositive ? "+" : ""}${differenceLabel}`;
   const Icon = isPositive ? IconTrendingUp : IconTrendingDown;
   const showNoPreviousData = showChangeAsPercentage && Number(comparisonValue) === 0;
-  return /* @__PURE__ */ jsxs15("div", { className: styles24.kpiChangeContainerSizeGuide, children: [
-    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles24.kpiChartChangeContainer, styles24.hidden), children: [
+  return /* @__PURE__ */ jsxs15("div", { className: styles25.kpiChangeContainerSizeGuide, children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles25.kpiChartChangeContainer, styles25.hidden), children: [
       /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(styles24.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          className: clsx16(styles25.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
           children: [
             /* @__PURE__ */ jsx28(Icon, {}),
             /* @__PURE__ */ jsx28("span", { children: displayValue })
           ]
         }
       ),
-      /* @__PURE__ */ jsx28("span", { className: styles24.kpiComparisonLabel, children: comparisonLabel })
+      /* @__PURE__ */ jsx28("span", { className: styles25.kpiComparisonLabel, children: comparisonLabel })
     ] }),
-    /* @__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: [
+    /* @__PURE__ */ jsx28("div", { className: styles25.kpiAbsoluteContainer, children: /* @__PURE__ */ jsx28("div", { className: styles25.kpiChartChangeContainer, children: showNoPreviousData ? /* @__PURE__ */ jsx28("span", { className: styles25.kpiComparisonLabel, children: noPreviousDataLabel }) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
       !equalComparison && /* @__PURE__ */ jsxs15(
         "span",
         {
           className: clsx16(
-            styles24.kpiChangeBadge,
+            styles25.kpiChangeBadge,
             getChangeClass(isPositive, invertChangeColors)
           ),
           children: [
@@ -1692,7 +1694,7 @@ var KpiChartChange = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx28("span", { className: styles24.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
+      /* @__PURE__ */ jsx28("span", { className: styles25.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
     ] }) }) })
   ] });
 };
@@ -1723,8 +1725,8 @@ var KpiChart = ({
   const hasComparisonValue = comparisonValue !== void 0;
   const displayValue = value === void 0 ? "" : valueFormatter ? valueFormatter(value) : value;
   const autoResizeValueFontSize = !valueFontSize;
-  return /* @__PURE__ */ jsxs16("div", { className: styles25.kpiChartContainer, children: [
-    /* @__PURE__ */ jsx30("div", { className: styles25.kpiChartValueContainer, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsxs16("div", { className: styles26.kpiChartContainer, children: [
+    /* @__PURE__ */ jsx30("div", { className: styles26.kpiChartValueContainer, children: /* @__PURE__ */ jsx30(
       ConditionalWrapper_default,
       {
         condition: autoResizeValueFontSize,
@@ -1741,7 +1743,7 @@ var KpiChart = ({
         )
       }
     ) }),
-    /* @__PURE__ */ jsx30("div", { className: styles25.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx30("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx30("div", { className: styles26.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx30("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx30(
       KpiChartChange,
       {
         equalComparisonLabel,
@@ -1838,7 +1840,7 @@ var getDonutChartOptions = (options) => {
 
 // src/components/charts/pies/DonutChart/DonutChart.tsx
 import { mergician as mergician7 } from "mergician";
-import styles26 from "./charts.module-YNKCWRLU.module.css";
+import styles27 from "./charts.module-YNKCWRLU.module.css";
 
 // src/hooks/useResizeObserver.hook.ts
 import { useLayoutEffect, useRef as useRef6, useState as useState5 } from "react";
@@ -1900,7 +1902,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__ */ jsx31("div", { className: styles26.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx31("div", { className: styles27.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx31(
     Pie,
     {
       ref: chartRef,
@@ -1917,7 +1919,7 @@ 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 styles27 from "./charts.module-YNKCWRLU.module.css";
+import styles28 from "./charts.module-YNKCWRLU.module.css";
 import AnnotationPlugin3 from "chartjs-plugin-annotation";
 import { jsx as jsx32 } from "react/jsx-runtime";
 ChartJS4.register(ArcElement2, Tooltip4, Legend4, ChartDataLabels4, AnnotationPlugin3);
@@ -1942,7 +1944,7 @@ var PieChart = ({
     const indexClicked = getSegmentIndexClicked(event, chartRef);
     onSegmentClick?.(indexClicked);
   };
-  return /* @__PURE__ */ jsx32("div", { className: styles27.chartContainer, children: /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx32("div", { className: styles28.chartContainer, children: /* @__PURE__ */ jsx32(
     Pie2,
     {
       ref: chartRef,
@@ -1955,7 +1957,7 @@ var PieChart = ({
 
 // src/components/charts/tables/Table/TablePaginated.tsx
 import * as React3 from "react";
-import styles31 from "./tables.module-GNDYDW3Z.module.css";
+import styles32 from "./tables.module-GNDYDW3Z.module.css";
 import clsx19 from "clsx";
 
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
@@ -1965,7 +1967,7 @@ import {
   IconChevronsLeft,
   IconChevronsRight
 } from "@tabler/icons-react";
-import styles28 from "./TablePagination.module-VGIQ7VN7.module.css";
+import styles29 from "./TablePagination.module-VGIQ7VN7.module.css";
 import { useEffect as useEffect5 } from "react";
 import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 var getTableTotalPages = (total, pageSize) => {
@@ -1986,8 +1988,8 @@ var TablePagination = ({
       onPageChange(0);
     }
   }, [totalPages, page]);
-  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: [
+  return /* @__PURE__ */ jsx33("div", { className: styles29.tablePagination, "aria-label": "Table pagination controls", children: /* @__PURE__ */ jsxs17("div", { className: styles29.tablePaginationCentral, children: [
+    /* @__PURE__ */ jsxs17("div", { className: styles29.tablePaginationCentralButtons, children: [
       /* @__PURE__ */ jsx33(
         ActionIcon,
         {
@@ -2012,7 +2014,7 @@ var TablePagination = ({
       )
     ] }),
     /* @__PURE__ */ jsx33("span", { children: paginationLabel ?? `Page ${page + 1} of ${totalPages ?? "?"}` }),
-    /* @__PURE__ */ jsxs17("div", { className: styles28.tablePaginationCentralButtons, children: [
+    /* @__PURE__ */ jsxs17("div", { className: styles29.tablePaginationCentralButtons, children: [
       /* @__PURE__ */ jsx33(
         ActionIcon,
         {
@@ -2039,7 +2041,7 @@ var TablePagination = ({
 
 // src/components/charts/tables/Table/components/TableHeader/TableHeader.tsx
 import { IconCaretDownFilled as IconCaretDownFilled3, IconCaretUpDownFilled, IconCaretUpFilled } from "@tabler/icons-react";
-import styles29 from "./TableHeader.module-XXXLQWHC.module.css";
+import styles30 from "./TableHeader.module-XXXLQWHC.module.css";
 
 // src/components/charts/tables/Table/table.types.ts
 var TableSortDirection = {
@@ -2095,12 +2097,12 @@ var TableHeader = ({
       }
     }
   };
-  return /* @__PURE__ */ jsx34("thead", { className: styles29.tableHeader, children: /* @__PURE__ */ jsxs18("tr", { children: [
+  return /* @__PURE__ */ jsx34("thead", { className: styles30.tableHeader, children: /* @__PURE__ */ jsxs18("tr", { children: [
     showIndex && /* @__PURE__ */ jsx34("th", { className: clsx17(tableStyles.mutedCell, tableStyles.stickyFirstColumn), children: "#" }),
     headers.map((header) => /* @__PURE__ */ jsx34(
       "th",
       {
-        className: styles29.tableHeaderCell,
+        className: styles30.tableHeaderCell,
         style: { minWidth: header.minWidth },
         scope: "col",
         "aria-sort": getHeaderAriaSort(sort, header),
@@ -2122,7 +2124,7 @@ var TableHeader = ({
 };
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
-import styles30 from "./TableBody.module-ARNVVKDL.module.css";
+import styles31 from "./TableBody.module-ARNVVKDL.module.css";
 import clsx18 from "clsx";
 import { IconCopy, IconCopyCheckFilled } from "@tabler/icons-react";
 import { useState as useState6 } from "react";
@@ -2136,7 +2138,7 @@ var TableBody = ({
   showIndex,
   onRowIndexClick
 }) => {
-  return /* @__PURE__ */ jsx35("tbody", { className: styles30.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsx35("tbody", { className: styles31.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs19(
     "tr",
     {
       onClick: () => onRowIndexClick?.(rowIndex),
@@ -2165,7 +2167,7 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
     row[header.id]
   ) : void 0;
   if (header.cell) {
-    return header.cell({ value, className: styles30.tableBodyCell });
+    return header.cell({ value, className: styles31.tableBodyCell });
   }
   const handleCopy = () => {
     setIsPressedCopy(true);
@@ -2187,8 +2189,8 @@ var TableBodyCell = ({ header, row, rowIndex, cellIndex }) => {
             onMouseDown: handleCopy,
             icon: isPressedCopy ? IconCopyCheckFilled : IconCopy,
             className: clsx18(
-              styles30.copyButton,
-              header.align === TableHeaderAlign.RIGHT && styles30.leftAlign
+              styles31.copyButton,
+              header.align === TableHeaderAlign.RIGHT && styles31.leftAlign
             ),
             onClick: handleCopy
           }
@@ -2219,8 +2221,8 @@ var TablePaginated = React3.forwardRef(
       onPageChange,
       onSortChange
     } = props;
-    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: [
+    return /* @__PURE__ */ jsxs20("div", { ref, className: clsx19(styles32.tableContainer, className), children: [
+      /* @__PURE__ */ jsx36("div", { className: styles32.tableContainerScroll, children: /* @__PURE__ */ jsxs20("table", { className: styles32.table, children: [
         /* @__PURE__ */ jsx36(
           TableHeader,
           {
@@ -2879,6 +2881,21 @@ var useTableGetRowsPerPage = ({
   return Math.max(0, rows);
 }, [availableHeight, headerHeight, rowHeight, footerHeight]);
 
+// src/utils/object.utils.ts
+var shallowEqual = (object1, object2) => {
+  const keys1 = Object.keys(object1 ?? {});
+  const keys2 = Object.keys(object2 ?? {});
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  for (const key of keys1) {
+    if (object1[key]?.toString() !== object2[key]?.toString()) {
+      return false;
+    }
+  }
+  return true;
+};
+
 // src/hooks/useDebounce.hook.ts
 import { useRef as useRef9, useEffect as useEffect7, useCallback as useCallback2 } from "react";
 function useDebounce(fn, delay = 300) {
@@ -2939,10 +2956,12 @@ export {
   Switch,
   TableHeaderAlign,
   TablePaginated,
+  TablePagination,
   TableSortDirection,
   TextField,
   Typography,
   chartjsAxisOptionsLayoutPadding,
+  endOfDayUTC,
   getBarChartData,
   getBarChartOptions,
   getChartColors,
@@ -2963,6 +2982,10 @@ export {
   getStyle,
   getStyleNumber,
   getTableTotalPages,
+  isSameDate,
+  isSameDateRange,
+  shallowEqual,
+  styles,
   useDebounce,
   useResizeObserver,
   useTableGetRowsPerPage