@povio/ui 0.0.4 → 0.0.6

package/{src/components/inputs/DateTime/DateRangePicker/DateRangePicker.tsx → dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js}

@@ -1,66 +1,25 @@
-import {
-  CalendarDate,
-  createCalendar,
-  endOfMonth,
-  endOfWeek,
-  endOfYear,
-  getLocalTimeZone,
-  startOfMonth,
-  startOfWeek,
-  startOfYear,
-  toCalendarDate,
-  today,
-} from "@internationalized/date";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toCalendarDate, createCalendar, today, getLocalTimeZone, startOfYear, endOfYear, CalendarDate, startOfWeek, endOfWeek, startOfMonth, endOfMonth } from "@internationalized/date";
 import { mergeRefs } from "@react-aria/utils";
-import type { RangeValue } from "@react-types/shared";
 import { clsx } from "clsx";
 import { DateTime } from "luxon";
-import { type KeyboardEvent, type Ref, useCallback, useRef, useState } from "react";
-import { type DateValue, useDateRangePicker, useLocale } from "react-aria";
-import { Button as AriaButton } from "react-aria-components";
-import { Controller, type FieldValues } from "react-hook-form";
+import { useState, useCallback, useRef } from "react";
+import { useDateRangePicker, useLocale } from "react-aria";
+import { Button } from "react-aria-components";
+import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { type DateRangePickerStateOptions, useDateRangePickerState, useRangeCalendarState } from "react-stately";
-
-import { DatePickerInput } from "#ui/components/inputs/DateTime/shared/DatePickerInput";
-import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
-import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
-import { RangeCalendar } from "#ui/components/inputs/DateTime/shared/RangeCalendar";
-import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
-import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
-import type { ControlProps } from "#ui/components/inputs/shared/form.types";
-import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
-import { Typography } from "#ui/components/text/Typography/Typography";
-import { ns } from "#ui/config/i18n";
-import { UIConfig } from "#ui/config/uiConfig.context";
-import { DateTimeUtils } from "#ui/utils/date-time.utils";
-
-// Workaround for bug in React Aria (https://github.com/adobe/react-spectrum/issues/3256#issuecomment-1825942096)
+import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
+import { DatePickerInput } from "../shared/DatePickerInput.js";
+import { DateTimeDialog } from "../shared/DateTimeDialog.js";
+import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
+import { RangeCalendar } from "../shared/RangeCalendar.js";
+import { FormField } from "../../FormField/FormField.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
-
-interface DateRangePickerBaseProps
-  extends FormFieldProps,
-    InputVariantProps,
-    Omit<DateRangePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
-  ref?: Ref<HTMLDivElement>;
-  disableDropdown?: boolean;
-  isClearable?: boolean;
-  hideSidebar?: boolean;
-  className?: string;
-  todayIcon?: boolean;
-}
-
-interface DateRange {
-  start: DateValue;
-  end: DateValue;
-}
-
-interface DatePreset {
-  label: string;
-  getValue: () => DateRange;
-}
-
-const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
+const DateRangePickerBase = (props) => {
   const ui = UIConfig.useConfig();
   const { t } = useTranslation();
   const {
@@ -88,9 +47,7 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
     isClearable = ui.input.isClearable,
     ...rest
   } = props;
-
-  const [validationRangeError, setValidationRangeError] = useState<string | undefined>();
-
+  const [validationRangeError, setValidationRangeError] = useState();
   const dialogState = useDateRangePickerState({ ...rest, value, shouldCloseOnSelect: false });
   const state = useDateRangePickerState({
     ...rest,
@@ -99,25 +56,20 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
       if (isValidRange(newValue)) {
         return;
       }
-
       onChange?.(newValue);
       handleCalendarStatesChange(newValue);
     },
-    shouldCloseOnSelect: false,
+    shouldCloseOnSelect: false
   });
-
-  const dateRangePickerRef = useRef<HTMLDivElement>(null);
-
+  const dateRangePickerRef = useRef(null);
   const { groupProps, labelProps, startFieldProps, endFieldProps, buttonProps, dialogProps } = useDateRangePicker(
     { ...rest, label },
     state,
-    dateRangePickerRef,
+    dateRangePickerRef
   );
   const { calendarProps } = useDateRangePicker({ ...rest, label }, dialogState, dateRangePickerRef);
-
   const { locale } = useLocale();
-
-  const formFieldProps: FormFieldProps = {
+  const formFieldProps = {
     error: error || validationRangeError,
     label,
     tooltipText,
@@ -128,19 +80,17 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
     hideLabel,
     isDisabled,
     headerClassName,
-    errorClassName,
+    errorClassName
   };
-
   const leftCalendarState = useRangeCalendarState({
     ...calendarProps,
     locale,
     createCalendar,
     pageBehavior: "single",
     visibleDuration: { months: 1 },
-    minValue: undefined,
-    maxValue: undefined,
+    minValue: void 0,
+    maxValue: void 0
   });
-
   const rightCalendarState = useRangeCalendarState({
     ...calendarProps,
     locale,
@@ -148,24 +98,17 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
     pageBehavior: "single",
     visibleDuration: { months: 1 },
     defaultFocusedValue: today(getLocalTimeZone()).add({ months: 1 }),
-    minValue: undefined,
-    maxValue: undefined,
+    minValue: void 0,
+    maxValue: void 0
   });
-
-  const [activePreset, setActivePreset] = useState<string | null>(null);
-  const [rangeSelection, setRangeSelection] = useState<{
-    start: DateValue | null;
-    end: DateValue | null;
-    isSelecting: boolean;
-  }>({
+  const [activePreset, setActivePreset] = useState(null);
+  const [rangeSelection, setRangeSelection] = useState({
     start: value?.start || null,
     end: value?.end || null,
-    isSelecting: false,
+    isSelecting: false
   });
-
-  const [hoverDate, setHoverDate] = useState<DateValue | null>(null);
-
-  const headerProps: FormFieldHeaderProps = {
+  const [hoverDate, setHoverDate] = useState(null);
+  const headerProps = {
     label,
     tooltipText,
     helperText,
@@ -174,112 +117,99 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
     isHeaderHidden: hideLabel || isHeaderHidden,
     isDisabled,
     className: headerClassName,
-    labelProps,
+    labelProps
   };
-
   const isValidRange = useCallback(
-    (newValue: RangeValue<DateValue> | null) => {
+    (newValue) => {
       if (newValue?.start && newValue?.end) {
         const startDate = newValue.start;
         const endDate = newValue.end;
-
         if (endDate.compare(startDate) < 0) {
           setValidationRangeError(
             t(($) => $.ui.datePicker.errors.endDateBeforeStart, {
-              ns,
-            }),
+              ns
+            })
           );
           return true;
         }
-        setValidationRangeError(undefined);
+        setValidationRangeError(void 0);
       } else {
-        setValidationRangeError(undefined);
+        setValidationRangeError(void 0);
       }
       return false;
     },
-    [t],
+    [t]
   );
-
-  const handleCalendarStatesChange = (newValue: RangeValue<DateValue> | null) => {
+  const handleCalendarStatesChange = (newValue) => {
     if (newValue) {
       if (isValidRange(newValue)) {
         return;
       }
-
       dialogState.setValue(newValue);
-
-      const startDate = newValue.start as CalendarDate;
-      const endDate = newValue.end as CalendarDate;
-
+      const startDate = newValue.start;
+      const endDate = newValue.end;
       leftCalendarState.setFocusedDate(startDate);
-
       if (startDate.year === endDate.year && startDate.month === endDate.month) {
         rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
       } else {
         rightCalendarState.setFocusedDate(endDate);
       }
-
       leftCalendarState.setValue(newValue);
       rightCalendarState.setValue(newValue);
       setRangeSelection({
         start: newValue.start,
         end: newValue.end,
-        isSelecting: false,
+        isSelecting: false
       });
       setHoverDate(null);
       setActivePreset(null);
     } else {
-      setValidationRangeError(undefined);
+      setValidationRangeError(void 0);
       dialogState.setValue(null);
       leftCalendarState.setValue(null);
       rightCalendarState.setValue(null);
       setRangeSelection({
         start: null,
         end: null,
-        isSelecting: false,
+        isSelecting: false
       });
       setHoverDate(null);
       setActivePreset(null);
     }
   };
-
-  const throttledSetHoverDate = useCallback((date: DateValue | null) => {
+  const throttledSetHoverDate = useCallback((date) => {
     requestAnimationFrame(() => {
       setHoverDate(date);
     });
   }, []);
-
   const handleDateHover = useCallback(
-    (date: DateValue | null) => {
+    (date) => {
       if (rangeSelection.isSelecting && rangeSelection.start) {
         throttledSetHoverDate(date);
       }
     },
-    [rangeSelection.isSelecting, rangeSelection.start, throttledSetHoverDate],
+    [rangeSelection.isSelecting, rangeSelection.start, throttledSetHoverDate]
   );
-
   const handleDateSelection = useCallback(
-    (date: DateValue, calendarSide?: "left" | "right") => {
+    (date, calendarSide) => {
       if (calendarSide) {
         const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
         const currentVisibleMonth = currentState.visibleRange.start;
-
         if (date.month !== currentVisibleMonth.month || date.year !== currentVisibleMonth.year) {
           if (calendarSide === "left") {
-            leftCalendarState.setFocusedDate(date as CalendarDate);
-            rightCalendarState.setFocusedDate((date as CalendarDate).add({ months: 1 }));
+            leftCalendarState.setFocusedDate(date);
+            rightCalendarState.setFocusedDate(date.add({ months: 1 }));
           } else {
-            rightCalendarState.setFocusedDate(date as CalendarDate);
-            leftCalendarState.setFocusedDate((date as CalendarDate).subtract({ months: 1 }));
+            rightCalendarState.setFocusedDate(date);
+            leftCalendarState.setFocusedDate(date.subtract({ months: 1 }));
           }
         }
       }
-
       if (!rangeSelection.isSelecting || !rangeSelection.start) {
         setRangeSelection({
           start: date,
           end: null,
-          isSelecting: true,
+          isSelecting: true
         });
         setHoverDate(null);
         leftCalendarState.setValue(null);
@@ -287,315 +217,268 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
       } else {
         const { start } = rangeSelection;
         const end = date;
-
         const finalStart = start.compare(end) <= 0 ? start : end;
         const finalEnd = start.compare(end) <= 0 ? end : start;
-
         const newRange = { start: finalStart, end: finalEnd };
-
         leftCalendarState.setValue(newRange);
         rightCalendarState.setValue(newRange);
         dialogState.setValue(newRange);
-
         setRangeSelection({
           start: finalStart,
           end: finalEnd,
-          isSelecting: false,
+          isSelecting: false
         });
         setHoverDate(null);
-
         setActivePreset(null);
       }
     },
-    [rangeSelection, leftCalendarState, rightCalendarState, dialogState],
+    [rangeSelection, leftCalendarState, rightCalendarState, dialogState]
   );
-
   const handleKeyboardNavigation = useCallback(
-    (event: KeyboardEvent, date: DateValue, calendarSide: "left" | "right") => {
+    (event, date, calendarSide) => {
       const currentState = calendarSide === "left" ? leftCalendarState : rightCalendarState;
       const otherState = calendarSide === "left" ? rightCalendarState : leftCalendarState;
-
       let shouldPreventDefault = false;
       switch (event.key) {
         case "ArrowRight": {
           const nextDate = date.add({ days: 1 });
           const currentMonth = currentState.visibleRange.start;
           const otherMonth = otherState.visibleRange.start;
-
           if (calendarSide === "left" && nextDate.month !== currentMonth.month) {
             if (nextDate.year === otherMonth.year && nextDate.month === otherMonth.month) {
-              otherState.setFocusedDate(nextDate as CalendarDate);
+              otherState.setFocusedDate(nextDate);
               shouldPreventDefault = true;
             } else {
-              rightCalendarState.setFocusedDate(nextDate as CalendarDate);
+              rightCalendarState.setFocusedDate(nextDate);
               shouldPreventDefault = true;
             }
           }
           break;
         }
-
         case "ArrowLeft": {
           const prevDate = date.subtract({ days: 1 });
           const currentMonth = currentState.visibleRange.start;
           const otherMonth = otherState.visibleRange.start;
-
           if (calendarSide === "right" && prevDate.month !== currentMonth.month) {
             if (prevDate.year === otherMonth.year && prevDate.month === otherMonth.month) {
-              otherState.setFocusedDate(prevDate as CalendarDate);
+              otherState.setFocusedDate(prevDate);
               shouldPreventDefault = true;
             } else {
-              leftCalendarState.setFocusedDate(prevDate as CalendarDate);
+              leftCalendarState.setFocusedDate(prevDate);
               shouldPreventDefault = true;
             }
           }
           break;
         }
-
         case "ArrowDown": {
           const nextWeekDate = date.add({ weeks: 1 });
           const currentMonth = currentState.visibleRange.start;
           const otherMonth = otherState.visibleRange.start;
-
           if (calendarSide === "left" && nextWeekDate.month !== currentMonth.month) {
             if (nextWeekDate.year === otherMonth.year && nextWeekDate.month === otherMonth.month) {
-              otherState.setFocusedDate(nextWeekDate as CalendarDate);
+              otherState.setFocusedDate(nextWeekDate);
               shouldPreventDefault = true;
             } else {
-              rightCalendarState.setFocusedDate(nextWeekDate as CalendarDate);
+              rightCalendarState.setFocusedDate(nextWeekDate);
               shouldPreventDefault = true;
             }
           }
           break;
         }
-
         case "ArrowUp": {
           const prevWeekDate = date.subtract({ weeks: 1 });
           const currentMonth = currentState.visibleRange.start;
           const otherMonth = otherState.visibleRange.start;
-
           if (calendarSide === "right" && prevWeekDate.month !== currentMonth.month) {
             if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
-              otherState.setFocusedDate(prevWeekDate as CalendarDate);
+              otherState.setFocusedDate(prevWeekDate);
               shouldPreventDefault = true;
             } else {
-              leftCalendarState.setFocusedDate(prevWeekDate as CalendarDate);
+              leftCalendarState.setFocusedDate(prevWeekDate);
               shouldPreventDefault = true;
             }
           }
           break;
         }
-
         case "Enter":
         case " ": {
           handleDateSelection(date);
           shouldPreventDefault = true;
           break;
         }
-
         case "Escape": {
           setRangeSelection({
             start: null,
             end: null,
-            isSelecting: false,
+            isSelecting: false
           });
           setHoverDate(null);
           shouldPreventDefault = true;
           break;
         }
-
-        default:
-          break;
       }
-
       if (shouldPreventDefault) {
         event.preventDefault();
         event.stopPropagation();
       }
-
       return shouldPreventDefault;
     },
-    [leftCalendarState, rightCalendarState, handleDateSelection],
+    [leftCalendarState, rightCalendarState, handleDateSelection]
   );
-
   const syncCalendarStates = useCallback(
-    (newValue: DateRange | null) => {
+    (newValue) => {
       if (isValidRange(newValue)) {
         return;
       }
-
       leftCalendarState.setValue(newValue);
       rightCalendarState.setValue(newValue);
       dialogState.setValue(newValue);
-
       if (newValue) {
         setRangeSelection({
           start: newValue.start,
           end: newValue.end,
-          isSelecting: false,
+          isSelecting: false
         });
       } else {
         setRangeSelection({
           start: null,
           end: null,
-          isSelecting: false,
+          isSelecting: false
         });
       }
-
       setHoverDate(null);
     },
-    [isValidRange, leftCalendarState, rightCalendarState, dialogState],
+    [isValidRange, leftCalendarState, rightCalendarState, dialogState]
   );
-
   const onApply = () => {
-    const valueToApply =
-      rangeSelection.start && rangeSelection.end
-        ? { start: rangeSelection.start, end: rangeSelection.end }
-        : dialogState.value;
-
+    const valueToApply = rangeSelection.start && rangeSelection.end ? { start: rangeSelection.start, end: rangeSelection.end } : dialogState.value;
     if (valueToApply) {
-      state.setValue(valueToApply as DateRange);
+      state.setValue(valueToApply);
     }
     state.toggle();
   };
-
   const onTodayPress = () => {
-    const todayDate = today(getLocalTimeZone());
-    leftCalendarState.setFocusedDate(todayDate);
-    rightCalendarState.setFocusedDate(todayDate.add({ months: 1 }));
+    const todayDate2 = today(getLocalTimeZone());
+    leftCalendarState.setFocusedDate(todayDate2);
+    rightCalendarState.setFocusedDate(todayDate2.add({ months: 1 }));
   };
-
-  const onOpenChange = (isOpen: boolean) => {
+  const onOpenChange = (isOpen) => {
     state.toggle();
     if (!isOpen) {
       if (state.value) {
-        dialogState.setValue(state.value as DateRange);
-        leftCalendarState.setValue(state.value as DateRange);
-        rightCalendarState.setValue(state.value as DateRange);
-
-        const startDate = (state.value.start as CalendarDate) || today(getLocalTimeZone());
-        const endDate = (state.value.end as CalendarDate) || today(getLocalTimeZone()).add({ months: 1 });
-
+        dialogState.setValue(state.value);
+        leftCalendarState.setValue(state.value);
+        rightCalendarState.setValue(state.value);
+        const startDate = state.value.start || today(getLocalTimeZone());
+        const endDate = state.value.end || today(getLocalTimeZone()).add({ months: 1 });
         leftCalendarState.setFocusedDate(startDate);
-
         if (startDate.year === endDate.year && startDate.month === endDate.month) {
           rightCalendarState.setFocusedDate(startDate.add({ months: 1 }));
         } else {
           rightCalendarState.setFocusedDate(endDate);
         }
-
         setRangeSelection({
           start: state.value.start,
           end: state.value.end,
-          isSelecting: false,
+          isSelecting: false
         });
       }
     }
   };
-
   const todayDate = today(getLocalTimeZone());
-
-  const getThisWeekRange = (): DateRange => {
+  const getThisWeekRange = () => {
     const start = startOfWeek(todayDate, locale);
     const end = endOfWeek(todayDate, locale);
     return { start, end };
   };
-
-  const getLastWeekRange = (): DateRange => {
+  const getLastWeekRange = () => {
     const thisWeekStart = startOfWeek(todayDate, locale);
     const lastWeekStart = thisWeekStart.subtract({ weeks: 1 });
     const lastWeekEnd = thisWeekStart.subtract({ days: 1 });
     return { start: lastWeekStart, end: lastWeekEnd };
   };
-
-  const getThisAndLastWeekRange = (): DateRange => {
+  const getThisAndLastWeekRange = () => {
     const thisWeekEnd = endOfWeek(todayDate, locale);
     const lastWeekStart = startOfWeek(todayDate, locale).subtract({ weeks: 1 });
     return { start: lastWeekStart, end: thisWeekEnd };
   };
-
-  const getThisMonthRange = (): DateRange => {
+  const getThisMonthRange = () => {
     const start = startOfMonth(todayDate);
     const end = endOfMonth(todayDate);
     return { start, end };
   };
-
-  const getThisAndLastMonthRange = (): DateRange => {
+  const getThisAndLastMonthRange = () => {
     const thisMonthEnd = endOfMonth(todayDate);
     const lastMonthStart = startOfMonth(todayDate).subtract({ months: 1 });
     return { start: lastMonthStart, end: thisMonthEnd };
   };
-
-  const presets: DatePreset[] = [
+  const presets = [
     {
       label: t(($) => $.ui.datePicker.presets.thisWeek, {
-        ns,
+        ns
       }),
-      getValue: getThisWeekRange,
+      getValue: getThisWeekRange
     },
     {
       label: t(($) => $.ui.datePicker.presets.lastWeek, {
-        ns,
+        ns
       }),
-      getValue: getLastWeekRange,
+      getValue: getLastWeekRange
     },
     {
       label: t(($) => $.ui.datePicker.presets.thisAndLastWeek, {
-        ns,
+        ns
       }),
-      getValue: getThisAndLastWeekRange,
+      getValue: getThisAndLastWeekRange
     },
     {
       label: t(($) => $.ui.datePicker.presets.thisMonth, {
-        ns,
+        ns
       }),
-      getValue: getThisMonthRange,
+      getValue: getThisMonthRange
     },
     {
       label: t(($) => $.ui.datePicker.presets.thisAndLastMonth, {
-        ns,
+        ns
       }),
-      getValue: getThisAndLastMonthRange,
+      getValue: getThisAndLastMonthRange
     },
     {
       label: t(($) => $.ui.datePicker.presets.thisYear, {
-        ns,
+        ns
       }),
-      getValue: () => ({ start: startOfYear(todayDate), end: todayDate }),
+      getValue: () => ({ start: startOfYear(todayDate), end: todayDate })
     },
     {
       label: t(($) => $.ui.datePicker.presets.lastYear, {
-        ns,
+        ns
       }),
       getValue: () => ({
         start: startOfYear(todayDate.subtract({ years: 1 })),
-        end: endOfYear(todayDate.subtract({ years: 1 })),
-      }),
+        end: endOfYear(todayDate.subtract({ years: 1 }))
+      })
     },
     {
       label: t(($) => $.ui.datePicker.presets.thisAndLastYear, {
-        ns,
+        ns
       }),
-      getValue: () => ({ start: startOfYear(todayDate.subtract({ years: 1 })), end: todayDate }),
+      getValue: () => ({ start: startOfYear(todayDate.subtract({ years: 1 })), end: todayDate })
     },
     {
       label: t(($) => $.ui.datePicker.presets.soFar, {
-        ns,
+        ns
       }),
-      getValue: () => ({ start: startOfYear(todayDate), end: todayDate }),
-    },
+      getValue: () => ({ start: startOfYear(todayDate), end: todayDate })
+    }
   ];
-
-  const selectPreset = (preset: DatePreset) => {
+  const selectPreset = (preset) => {
     setActivePreset(preset.label);
     const presetValue = preset.getValue();
     syncCalendarStates(presetValue);
-
-    const startDate = presetValue.start as CalendarDate;
+    const startDate = presetValue.start;
     leftCalendarState.setFocusedDate(startDate);
-
-    const endDate = presetValue.end as CalendarDate;
+    const endDate = presetValue.end;
     const monthsDifference = (endDate.year - startDate.year) * 12 + (endDate.month - startDate.month);
-
     if (monthsDifference > 2) {
       rightCalendarState.setFocusedDate(endDate);
     } else {
@@ -603,206 +486,183 @@ const DateRangePickerBase = (props: DateRangePickerBaseProps) => {
       rightCalendarState.setFocusedDate(rightCalendarMonth);
     }
   };
-
-  return (
-    <FormField
-      {...formFieldProps}
-      as={as}
-      labelProps={labelProps}
-      className={clsx("relative inline-flex w-full flex-col text-left", className)}
-    >
-      <DatePickerInput
-        ref={mergeRefs(ref, dateRangePickerRef)}
-        as={as}
-        groupProps={groupProps}
-        fieldProps={{ ...startFieldProps, placeholderValue: PLACEHOLDER_VALUE }}
-        endFieldProps={{ ...endFieldProps, placeholderValue: PLACEHOLDER_VALUE }}
-        buttonProps={buttonProps}
-        isDisabled={isDisabled}
-        isInvalid={!!error}
-        disableDropdown={disableDropdown}
-        variant={variant}
-        size={size}
-        isClearable={isClearable}
-        headerProps={headerProps}
-        todayIcon={todayIcon}
-      />
-      <DateTimeDialog
-        hideSidebar={hideSidebar}
-        sidebar={
-          <div className="flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden">
-            {presets.map((preset) => (
-              <AriaButton
-                key={preset.label}
-                onClick={() => selectPreset(preset)}
-                className={clsx(
+  return /* @__PURE__ */ jsxs(
+    FormField,
+    {
+      ...formFieldProps,
+      as,
+      labelProps,
+      className: clsx("relative inline-flex w-full flex-col text-left", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          DatePickerInput,
+          {
+            ref: mergeRefs(ref, dateRangePickerRef),
+            as,
+            groupProps,
+            fieldProps: { ...startFieldProps, placeholderValue: PLACEHOLDER_VALUE },
+            endFieldProps: { ...endFieldProps, placeholderValue: PLACEHOLDER_VALUE },
+            buttonProps,
+            isDisabled,
+            isInvalid: !!error,
+            disableDropdown,
+            variant,
+            size,
+            isClearable,
+            headerProps,
+            todayIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DateTimeDialog,
+          {
+            hideSidebar,
+            sidebar: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden", children: presets.map((preset) => /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => selectPreset(preset),
+                className: clsx(
                   "w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item",
-                  activePreset !== preset.label &&
-                    "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
-                  activePreset === preset.label &&
-                    "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted",
-                )}
-              >
-                <Typography
-                  size="label-2"
-                  sizeMobile="label-3"
-                  as="span"
-                  className="whitespace-nowrap"
-                >
-                  {preset.label}
-                </Typography>
-              </AriaButton>
-            ))}
-          </div>
-        }
-        footer={
-          <DateTimeDialogFooter
-            isValid={!dialogState.isInvalid && !!dialogState.value}
-            onTodayPress={onTodayPress}
-            onApply={onApply}
-          />
-        }
-        label={label}
-        triggerRef={dateRangePickerRef}
-        dialogProps={dialogProps}
-        isOpen={state.isOpen}
-        onOpenChange={onOpenChange}
-      >
-        <div className="mb-4 flex max-w-[804px] md:mb-0">
-          <div className="flex flex-1 justify-center">
-            <RangeCalendar
-              leftCalendarState={leftCalendarState}
-              rightCalendarState={rightCalendarState}
-              calendarProps={calendarProps}
-              onApply={onApply}
-              onRangeChange={syncCalendarStates}
-              onDateSelection={handleDateSelection}
-              onDateHover={handleDateHover}
-              rangeSelection={rangeSelection}
-              hoverDate={hoverDate}
-              onKeyboardNavigation={handleKeyboardNavigation}
-            />
-          </div>
-        </div>
-      </DateTimeDialog>
-    </FormField>
+                  activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
+                  activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    size: "label-2",
+                    sizeMobile: "label-3",
+                    as: "span",
+                    className: "whitespace-nowrap",
+                    children: preset.label
+                  }
+                )
+              },
+              preset.label
+            )) }),
+            footer: /* @__PURE__ */ jsx(
+              DateTimeDialogFooter,
+              {
+                isValid: !dialogState.isInvalid && !!dialogState.value,
+                onTodayPress,
+                onApply
+              }
+            ),
+            label,
+            triggerRef: dateRangePickerRef,
+            dialogProps,
+            isOpen: state.isOpen,
+            onOpenChange,
+            children: /* @__PURE__ */ jsx("div", { className: "mb-4 flex max-w-[804px] md:mb-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx(
+              RangeCalendar,
+              {
+                leftCalendarState,
+                rightCalendarState,
+                calendarProps,
+                onApply,
+                onRangeChange: syncCalendarStates,
+                onDateSelection: handleDateSelection,
+                onDateHover: handleDateHover,
+                rangeSelection,
+                hoverDate,
+                onKeyboardNavigation: handleKeyboardNavigation
+              }
+            ) }) })
+          }
+        )
+      ]
+    }
   );
 };
-
-export interface DateRangePickerProps
-  extends Omit<DateRangePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
-  value?: { start: string | null; end: string | null } | null;
-  onChange?: (value: { start: string | null; end: string | null } | null) => void;
-  fullIso?: boolean;
-  minValue?: DateValue | string;
-  maxValue?: DateValue | string;
-}
-
-export type ControlledDateRangePickerProps<TFieldValues extends FieldValues> = ControlProps<
-  DateRangePickerProps,
-  TFieldValues
->;
-
-export const DateRangePicker = <TFieldValues extends FieldValues>({
+const DateRangePicker = ({
   fullIso = true,
   minValue,
   maxValue,
   ...props
-}: ControlledDateRangePickerProps<TFieldValues>) => {
-  const formatDateRange = (
-    range: RangeValue<CalendarDate> | null,
-  ): { start: string | null; end: string | null } | null => {
+}) => {
+  const formatDateRange = (range) => {
     if (!range?.start || !range?.end) {
       return null;
     }
-
     if (fullIso) {
       return {
         start: DateTimeUtils.fromCalendarDateToUTCISO(range.start),
-        end: DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true }),
+        end: DateTimeUtils.fromCalendarDateToUTCISO(range.end, { endOfDay: true })
       };
     }
-
     const startDate = DateTimeUtils.fromDateValueToLocal(range.start);
     const endDate = DateTimeUtils.fromDateValueToLocal(range.end);
     return {
       start: DateTime.fromJSDate(startDate).toISODate(),
-      end: DateTime.fromJSDate(endDate).toISODate(),
+      end: DateTime.fromJSDate(endDate).toISODate()
     };
   };
-
-  const parseDateRange = (
-    formattedRange?: { start: string | null; end: string | null } | null,
-  ): RangeValue<CalendarDate> | null | undefined => {
+  const parseDateRange = (formattedRange) => {
     if (!formattedRange?.start || !formattedRange?.end) {
-      return formattedRange as null | undefined;
+      return formattedRange;
     }
-
     if (fullIso) {
       return {
         start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
-        end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end),
+        end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end)
       };
     }
-
     const startDate = DateTime.fromISO(formattedRange.start).toJSDate();
     const endDate = DateTime.fromISO(formattedRange.end).toJSDate();
     const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate);
     const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate);
     return {
       start: toCalendarDate(startZonedDateTime),
-      end: toCalendarDate(endZonedDateTime),
+      end: toCalendarDate(endZonedDateTime)
     };
   };
-
-  const parseCalendarDate = (formattedDate?: string | null): CalendarDate | null | undefined => {
+  const parseCalendarDate = (formattedDate) => {
     if (formattedDate == null) {
       return formattedDate;
     }
-
     if (fullIso) {
       return DateTimeUtils.fromUTCISOToCalendarDate(formattedDate);
     }
-
     const date = DateTime.fromISO(formattedDate).toJSDate();
     const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date);
     return toCalendarDate(zonedDateTime);
   };
-
   const dateLimits = {
     minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
-    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue,
+    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue
   };
-
   if ("formControl" in props && props.formControl) {
     const { formControl, ref, ...innerProps } = props;
-
-    return (
-      <Controller
-        control={formControl.control}
-        name={formControl.name}
-        render={({ field, fieldState: { error } }) => (
-          <DateRangePickerBase
-            {...innerProps}
-            {...dateLimits}
-            ref={mergeRefs(ref, field.ref)}
-            value={parseDateRange(field.value)}
-            onChange={(value) => field.onChange(formatDateRange(value))}
-            onBlur={field.onBlur}
-            isDisabled={field.disabled || props.isDisabled}
-            error={props.error ?? error?.message}
-          />
-        )}
-      />
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          DateRangePickerBase,
+          {
+            ...innerProps,
+            ...dateLimits,
+            ref: mergeRefs(ref, field.ref),
+            value: parseDateRange(field.value),
+            onChange: (value) => field.onChange(formatDateRange(value)),
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
     );
   }
-
-  return (
-    <DateRangePickerBase
-      {...props}
-      {...dateLimits}
-      value={parseDateRange(props.value)}
-      onChange={(value) => props.onChange?.(formatDateRange(value))}
-    />
+  return /* @__PURE__ */ jsx(
+    DateRangePickerBase,
+    {
+      ...props,
+      ...dateLimits,
+      value: parseDateRange(props.value),
+      onChange: (value) => props.onChange?.(formatDateRange(value))
+    }
   );
 };
+export {
+  DateRangePicker
+};