@embeddable.com/remarkable-ui 2.0.14 → 2.0.16

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-UAYCVFGG.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,13 +254,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 styles13 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,10 +310,19 @@ 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(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
@@ -329,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";
@@ -344,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,
@@ -371,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 })
   ] });
@@ -382,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";
@@ -409,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",
@@ -428,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("")
           }
         ),
@@ -583,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: [
@@ -612,7 +625,7 @@ var MultiSelectField = ({
           /* @__PURE__ */ jsx19(
             Button,
             {
-              className: styles17.submitButton,
+              className: styles18.submitButton,
               disabled: isSubmitDisabled || isLoading,
               variant: "primary",
               size: "medium",
@@ -630,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,
@@ -655,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(
@@ -673,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 })
       ]
     }
   );
@@ -683,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,
@@ -770,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: [
@@ -844,6 +857,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-E7WV7TPK.css";
+
+// src/components/editors/dates/DateRangePicker/DateRangePickerChevron.tsx
+import { IconCaretDownFilled as IconCaretDownFilled2 } from "@tabler/icons-react";
+import styles21 from "./DateRangePickerChevron.module-DWIFI5J2.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: styles21.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 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;
+  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: styles22.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";
@@ -1280,10 +1457,10 @@ var getBarChartOptions = (options) => {
 };
 
 // src/components/charts/bars/BarChart.tsx
-import styles20 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 jsx23 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 ChartJS.register(
   CategoryScale,
   LinearScale,
@@ -1301,7 +1478,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: styles23.chartContainer, children: /* @__PURE__ */ jsx26(
     Bar,
     {
       ref: chartRef,
@@ -1326,7 +1503,7 @@ import {
   Filler
 } from "chart.js";
 import { Line } from "react-chartjs-2";
-import styles21 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";
 
@@ -1421,7 +1598,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,
@@ -1442,7 +1619,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: styles24.chartContainer, children: /* @__PURE__ */ jsx27(
     Line,
     {
       ref: chartRef,
@@ -1454,16 +1631,16 @@ var LineChart = ({ options = {}, data, onSegmentClick, ...props }) => {
 };
 
 // src/components/charts/kpis/KpiChart.tsx
-import styles23 from "./KpiChart.module-2LUIN66C.module.css";
+import styles26 from "./KpiChart.module-2LUIN66C.module.css";
 
 // src/components/charts/kpis/components/KpiChartChange.tsx
-import styles22 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 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 ? styles25.negative : styles25.positive;
+  return invertChangeColors ? styles25.positive : styles25.negative;
 };
 var KpiChartChange = ({
   value,
@@ -1489,35 +1666,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: styles25.kpiChangeContainerSizeGuide, children: [
+    /* @__PURE__ */ jsxs15("div", { className: clsx16(styles25.kpiChartChangeContainer, styles25.hidden), children: [
+      /* @__PURE__ */ jsxs15(
         "span",
         {
-          className: clsx16(styles22.kpiChangeBadge, getChangeClass(isPositive, invertChangeColors)),
+          className: clsx16(styles25.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: styles25.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: 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(
-            styles22.kpiChangeBadge,
+            styles25.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: styles25.kpiComparisonLabel, children: equalComparison ? equalComparisonLabel ?? comparisonLabel : comparisonLabel })
     ] }) }) })
   ] });
 };
@@ -1526,12 +1703,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,
@@ -1548,13 +1725,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: styles26.kpiChartContainer, children: [
+    /* @__PURE__ */ jsx30("div", { className: styles26.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(),
@@ -1566,7 +1743,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: styles26.kpiComparisonContainer, style: { fontSize: trendFontSize }, children: /* @__PURE__ */ jsx30("div", { style: { visibility: hasComparisonValue ? "visible" : "hidden" }, children: /* @__PURE__ */ jsx30(
       KpiChartChange,
       {
         equalComparisonLabel,
@@ -1663,12 +1840,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 styles27 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;
@@ -1700,7 +1877,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 = ({
@@ -1725,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__ */ jsx28("div", { className: styles24.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx31("div", { className: styles27.chartContainer, ref: containerRef, children: hideChart ? null : /* @__PURE__ */ jsx31(
     Pie,
     {
       ref: chartRef,
@@ -1742,9 +1919,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 styles28 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,
@@ -1767,7 +1944,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: styles28.chartContainer, children: /* @__PURE__ */ jsx32(
     Pie2,
     {
       ref: chartRef,
@@ -1779,8 +1956,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 styles32 from "./tables.module-GNDYDW3Z.module.css";
 import clsx19 from "clsx";
 
 // src/components/charts/tables/Table/components/TablePagination/TablePagination.tsx
@@ -1790,9 +1967,9 @@ import {
   IconChevronsLeft,
   IconChevronsRight
 } from "@tabler/icons-react";
-import styles26 from "./TablePagination.module-VGIQ7VN7.module.css";
+import styles29 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;
 };
@@ -1811,9 +1988,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: 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,
         {
           icon: IconChevronsLeft,
@@ -1824,7 +2001,7 @@ var TablePagination = ({
           "aria-label": "First page"
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronLeft,
@@ -1836,9 +2013,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: styles29.tablePaginationCentralButtons, children: [
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronRight,
@@ -1849,7 +2026,7 @@ var TablePagination = ({
           "aria-label": "Next page"
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx33(
         ActionIcon,
         {
           icon: IconChevronsRight,
@@ -1863,8 +2040,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 styles30 from "./TableHeader.module-XXXLQWHC.module.css";
 
 // src/components/charts/tables/Table/table.types.ts
 var TableSortDirection = {
@@ -1880,7 +2057,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";
 };
@@ -1894,15 +2071,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;
@@ -1920,16 +2097,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: 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: styles27.tableHeaderCell,
+        className: styles30.tableHeaderCell,
         style: { minWidth: header.minWidth },
         scope: "col",
         "aria-sort": getHeaderAriaSort(sort, header),
-        children: /* @__PURE__ */ jsxs17(
+        children: /* @__PURE__ */ jsxs18(
           "button",
           {
             onClick: () => handleSort(header.id),
@@ -1947,12 +2124,12 @@ var TableHeader = ({
 };
 
 // src/components/charts/tables/Table/components/TableBody/TableBody.tsx
-import styles28 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 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,
@@ -1961,14 +2138,14 @@ var TableBody = ({
   showIndex,
   onRowIndexClick
 }) => {
-  return /* @__PURE__ */ jsx32("tbody", { className: styles28.tableBody, children: rows.map((row, rowIndex) => /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsx35("tbody", { className: styles31.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,
@@ -1984,13 +2161,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: styles31.tableBodyCell });
   }
   const handleCopy = () => {
     setIsPressedCopy(true);
@@ -1998,22 +2175,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
+              styles31.copyButton,
+              header.align === TableHeaderAlign.RIGHT && styles31.leftAlign
             ),
             onClick: handleCopy
           }
@@ -2026,8 +2203,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 {
@@ -2044,9 +2221,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(styles32.tableContainer, className), children: [
+      /* @__PURE__ */ jsx36("div", { className: styles32.tableContainerScroll, children: /* @__PURE__ */ jsxs20("table", { className: styles32.table, children: [
+        /* @__PURE__ */ jsx36(
           TableHeader,
           {
             showIndex,
@@ -2055,7 +2232,7 @@ var TablePaginated = React2.forwardRef(
             onSortChange
           }
         ),
-        /* @__PURE__ */ jsx33(
+        /* @__PURE__ */ jsx36(
           TableBody,
           {
             onRowIndexClick,
@@ -2067,7 +2244,7 @@ var TablePaginated = React2.forwardRef(
           }
         )
       ] }) }),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx36(
         TablePagination,
         {
           page,
@@ -2083,7 +2260,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";
 
@@ -2097,7 +2274,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)}%`;
@@ -2189,7 +2366,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(() => {
@@ -2216,22 +2393,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",
@@ -2243,7 +2420,7 @@ var PivotTable = ({
                 ),
                 columnValues.map((columnValue) => {
                   const columnValueDisplay = columnDimension.formatValue ? columnDimension.formatValue(columnValue) : columnValue;
-                  return /* @__PURE__ */ jsx34(
+                  return /* @__PURE__ */ jsx37(
                     "th",
                     {
                       scope: "colgroup",
@@ -2254,7 +2431,7 @@ var PivotTable = ({
                     `col-${columnValue}`
                   );
                 }),
-                hasRowTotals && /* @__PURE__ */ jsx34(
+                hasRowTotals && /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "colgroup",
@@ -2266,8 +2443,8 @@ var PivotTable = ({
                   "col-total-group"
                 )
               ] }),
-              /* @__PURE__ */ jsxs20("tr", { children: [
-                /* @__PURE__ */ jsx34(
+              /* @__PURE__ */ jsxs21("tr", { children: [
+                /* @__PURE__ */ jsx37(
                   "th",
                   {
                     scope: "col",
@@ -2279,7 +2456,7 @@ var PivotTable = ({
                   }
                 ),
                 columnValues.flatMap(
-                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx34(
+                  (col) => measures.map((measure, idx) => /* @__PURE__ */ jsx37(
                     "th",
                     {
                       scope: "col",
@@ -2290,7 +2467,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",
@@ -2303,11 +2480,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",
@@ -2335,7 +2512,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) => {
@@ -2352,12 +2529,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",
@@ -2383,7 +2560,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) => {
@@ -2399,7 +2576,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")
             ] })
@@ -2560,7 +2737,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,
@@ -2635,16 +2812,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,
@@ -2652,10 +2829,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",
@@ -2669,7 +2846,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: {
@@ -2739,6 +2916,8 @@ export {
   CardContent,
   CardFeedback,
   CardHeader,
+  DateRangePicker,
+  DateRangePickerField,
   DonutChart,
   Dropdown,
   FieldFeedback,
@@ -2766,6 +2945,7 @@ export {
   TextField,
   Typography,
   chartjsAxisOptionsLayoutPadding,
+  endOfDayUTC,
   getBarChartData,
   getBarChartOptions,
   getChartColors,
@@ -2786,6 +2966,9 @@ export {
   getStyle,
   getStyleNumber,
   getTableTotalPages,
+  isSameDate,
+  isSameDateRange,
+  styles,
   useDebounce,
   useResizeObserver,
   useTableGetRowsPerPage