@synerise/ds-date-range-picker 2.0.4 → 2.1.1

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.1.0...@synerise/ds-date-range-picker@2.1.1) (2026-09-16)
+
+**Note:** Version bump only for package @synerise/ds-date-range-picker
+
+# [2.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.4...@synerise/ds-date-range-picker@2.1.0) (2026-09-10)
+
+### Bug Fixes
+
+- **date-range-picker:** stop the contract spec depending on the calendar day ([b4f19a7](https://github.com/Synerise/synerise-design/commit/b4f19a764a8abfbfb6b452709bd7bae88297a023))
+
+### Features
+
+- **global:** move the pickers to date-fns 4 ([f878075](https://github.com/Synerise/synerise-design/commit/f878075940c2cd0d2d8a4a5603eb18d01f837640))
+- new month, year and decade picker views, side testids, no title tooltip ([e00f29b](https://github.com/Synerise/synerise-design/commit/e00f29bfc16795bc0ceafa97746c99da1bf3ed9c))
+
 ## [2.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@2.0.3...@synerise/ds-date-range-picker@2.0.4) (2026-09-08)
 
 ### Bug Fixes

package/CLAUDE.md

@@ -20,7 +20,7 @@ src/
   Footer/                   — apply button + selected range summary
   RangeFilter/              — recurring schedule filters (Daily/Weekly/Monthly)
   AddonCollapse/            — collapsible section used by relative picker and filter
-  dateUtils/                — date utility functions (add, sub, format, startOf, endOf, …)
+  dateUtils/                — date utility functions (add, sub, startOf, endOf, toDateValue, …)
 ```
 
 ## Public exports
@@ -193,12 +193,15 @@ Addons (relative picker, filter) appear below the calendar and are toggled via `
 - All sub-components have co-located `*.styles.ts(x)` files
 - Uses `@synerise/ds-core` tokens — no hardcoded colour values
 - Popover overlay has `data-testid="ds-date-range-picker-overlay"` and class `ds-date-range-popover`
+- Each half of the panel is wrapped in `data-testid="date-range-picker-side-left"` / `-side-right` — the scope E2E suites use to reach the days and navigation of one side. The wrapper hosts whichever picker the side is in (day grid, month/year grid, or time picker), so the testid is stable across modes
 
 ## Key dependencies
 
 - `react-day-picker ^10` — calendar grid rendering inside `RangePicker` (see the v10 notes in `ds-date-picker`'s CLAUDE.md; day cells now contain a `<button class="DayPicker-Day-Button">`)
 - `@synerise/ds-popover` — floating popover (floating-ui underneath)
-- `date-fns ^2` — date arithmetic. Timezone handling is not this package's: `toIsoString` is re-exported from `@synerise/ds-core`, which owns the wall-clock convention and the `@date-fns/tz` dependency behind it
+- `date-fns ^4` — date arithmetic, imported **by name from the package root** (`import { addDays as fnsAddDays } from 'date-fns'`). v4 submodules are named-export-only, so the old `import fnsAddDays from 'date-fns/addDays'` form yields `undefined`
+- Loosely-typed date values are normalised by `dateUtils/toDateValue.ts`, which replaced `@date-fns/upgrade`'s `legacyParse`. Use it rather than `new Date` or `toDate`: a naive string must be read as *local* time, and only `parseISO` does that. Note `toDateValue(null)` is the **epoch**, which `isValid` accepts — preserved deliberately, since call sites are written around it
+- Timezone handling is not this package's: `toIsoString` is re-exported from `@synerise/ds-core`, which owns the wall-clock convention and the `@date-fns/tz` dependency behind it
 - `dayjs ^1.8` — used in parts of `RangeFilter`
 - `ramda ^0.27` — functional utilities in `RangeFilter`
 - `react-intl` — i18n (peer dependency via host app)

package/README.md

@@ -48,7 +48,6 @@ const value = {
 | disabledDate              | Function to specify if particular dates are disabled or not                      | (date:Date)=>boolean       | -                                                             |
 | disabledDefaultTexts      | Disables the default texts translations provided by `react-intl`                 | boolean                    | `false`                                                       |
 | forceAbsolute             | Force the outcome to be converted to an absolute date                            | boolean                    | `false`                                                       |
-| format                    | Format of the value displayed in the footer                                      | string                     | "MMM D, YYYY"                                                 |
 | onApply                   | Callback executed after applying changes                                         | (value: Partial<DateFilter> \| undefined) => void | -                                              |
 | ranges                    | An array containing custom ranges which may be used as a short-hand              | DateRangePreset[]          | []                                                            |
 | popoverProps              | Object representing props applied to the ds-popover component                    | Partial<PopoverProps>      | {}                                                            |

package/dist/DateRangePicker.types.d.ts

@@ -22,10 +22,6 @@ export type DateRangePickerProps = {
     disabled?: boolean;
     disableDefaultTexts?: boolean;
     disabledDate?: (date?: Date) => boolean;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     forceAdjacentMonths?: boolean;
     forceAbsolute?: boolean;

package/dist/Footer/Footer.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { Props } from './Footer.types';
-declare const Footer: ({ canApply, onApply, canSwitchMode, onSwitchMode, mode, dateOnly, message, texts, value, format, valueFormatOptions, showTime, displayDateContainerClass, ...rest }: Props) => React.JSX.Element;
+declare const Footer: ({ canApply, onApply, canSwitchMode, onSwitchMode, mode, dateOnly, message, texts, value, valueFormatOptions, showTime, displayDateContainerClass, ...rest }: Props) => React.JSX.Element;
 export default Footer;

package/dist/Footer/Footer.js

@@ -1,15 +1,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { parseISO, isValid } from "date-fns";
 import { useCallback, useMemo } from "react";
-import { useIntl } from "react-intl";
 import Button from "@synerise/ds-button";
 import { useDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
 import Icon, { ArrowRightS } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
 import { isLifetime } from "../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js";
 import { ALL_TIME } from "../constants.js";
-import format from "../dateUtils/format.js";
-import getDateFromString from "../dateUtils/getDateFromString.js";
-import { toIsoStringWithoutZone } from "../utils.js";
 import { ChosenRange, InvisibleTextContent, Container, ActionsPlaceholder, Actions } from "./Footer.styles.js";
 const Footer = ({
   canApply,
@@ -21,7 +18,6 @@ const Footer = ({
   message,
   texts,
   value,
-  format: format$1,
   valueFormatOptions,
   showTime,
   displayDateContainerClass = "ds-date-range-picker-value",
@@ -30,20 +26,16 @@ const Footer = ({
   const {
     formatValue
   } = useDataFormat();
-  const {
-    locale
-  } = useIntl();
-  const footerFormat = format$1 || (showTime ? "MMM D, YYYY, HH:mm" : "MMM D, YYYY");
   const footerDateToString = useCallback((date) => {
-    if (format$1 || typeof date === "string") {
-      return format(getDateFromString(date), footerFormat, locale);
+    const parsed = typeof date === "string" ? parseISO(date) : date;
+    if (!isValid(parsed)) {
+      return "";
     }
-    const parseDate = new Date(toIsoStringWithoutZone(date));
-    return formatValue(parseDate, {
+    return formatValue(parsed, {
       ...getDefaultDataTimeOptions(showTime),
       ...valueFormatOptions
     });
-  }, [footerFormat, format$1, formatValue, locale, valueFormatOptions, showTime]);
+  }, [formatValue, valueFormatOptions, showTime]);
   const ChosenRange$1 = useMemo(() => {
     if (value?.key === ALL_TIME || value && isLifetime(value)) {
       return /* @__PURE__ */ jsx(ChosenRange, { className: "ds-date-range-picker-value", children: value?.translationKey ? texts[value.translationKey] ?? value.translationKey : value?.key || "LIFETIME" });

package/dist/Footer/Footer.types.d.ts

@@ -11,10 +11,6 @@ export type Props = {
     onSwitchMode?: () => void;
     message?: React.ReactNode | string;
     texts: Texts;
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     displayDateContainerClass?: string;

package/dist/RangeFilter/constants.js

@@ -1,25 +1,6 @@
 import range from "lodash.range";
 import { v4 } from "uuid";
-import fnsAddDays from "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import fnsFormat from "date-fns/format";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { format, addDays } from "date-fns";
 import DailyFilter from "./Filters/DailyFilter/DailyFilter.js";
 import MonthlyFilter from "./Filters/MonthlyFilter/MonthlyFilter.js";
 import WeeklyFilter from "./Filters/WeeklyFilter/WeeklyFilter.js";
@@ -27,7 +8,7 @@ const LONG_MONTH = new Date(0, 0, 1);
 const TIME_FORMAT = "HH:mm:ss.SSS";
 const DEFAULT_RANGE_START = "00:00:00.000";
 const DEFAULT_RANGE_END = "23:59:59.999";
-const MONTH_DAYS = (locale) => range(0, 31).map((i) => locale === "pl" ? `${i + 1}.` : fnsFormat(fnsAddDays(LONG_MONTH, i), "Do"));
+const MONTH_DAYS = (locale) => range(0, 31).map((i) => locale === "pl" ? `${i + 1}.` : format(addDays(LONG_MONTH, i), "Do"));
 var DAYS_OF_PERIOD_ENUM = /* @__PURE__ */ ((DAYS_OF_PERIOD_ENUM2) => {
   DAYS_OF_PERIOD_ENUM2["DAY_OF_MONTH"] = "MONTH";
   DAYS_OF_PERIOD_ENUM2["DAY_OF_WEEK"] = "WEEK";

package/dist/RangePicker/RangePicker.js

@@ -1,8 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import fnsIsSameDay from "date-fns/isSameDay";
-import fnsIsValid from "date-fns/isValid";
+import { startOfDay, endOfDay, addDays, isSameMonth, isAfter, isValid, isSameDay, addMinutes, isBefore } from "date-fns";
 import { PureComponent } from "react";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { withDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
 import { YearPicker, MonthPicker, fnsDifferenceInYears, DayPicker, localeUtils, TimePicker, datePickerFormat } from "@synerise/ds-date-picker";
 import { DayBackground, DayText, DayForeground } from "@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker.styles";
@@ -12,29 +10,10 @@ import { Range } from "../RelativeRangePicker/RelativeRangePicker.styles.js";
 import { ABSOLUTE, COLUMNS, MODES } from "../constants.js";
 import ADD from "../dateUtils/add.js";
 import getDateFromString from "../dateUtils/getDateFromString.js";
-import fnsAddDays from "date-fns/addDays";
-import "date-fns/addHours";
-import fnsAddMinutes from "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import fnsEndOfDay from "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getYear";
-import fnsIsAfter from "date-fns/isAfter";
-import fnsIsBefore from "date-fns/isBefore";
-import fnsIsSameMonth from "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import fnsStartOfDay from "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import toDateValue from "../dateUtils/toDateValue.js";
 import { Sides, Side, PickerFooter, FooterSeparator, DateTimeModeSwitch } from "./RangePicker.styles.js";
 import { getModifiers, getDisabledTimeOptions, getSidesState } from "./utils.js";
-const isDayBefore = (day, reference) => fnsIsBefore(fnsStartOfDay(day), fnsStartOfDay(reference));
+const isDayBefore = (day, reference) => isBefore(startOfDay(day), startOfDay(reference));
 const NOOP = () => {
 };
 const TOOLTIP_FORMAT = "MMM d, yyyy, HH:mm";
@@ -51,10 +30,10 @@ function replaceRange(value, day) {
   }
   if (!from) {
     from = day;
-  } else if (from && to && fnsIsSameDay(from, to) && fnsIsSameDay(day, from)) {
+  } else if (from && to && isSameDay(from, to) && isSameDay(day, from)) {
     from = null;
     to = null;
-  } else if (to && fnsIsSameDay(day, to)) {
+  } else if (to && isSameDay(day, to)) {
     from = day;
     to = day;
   } else if (from && to) {
@@ -99,8 +78,8 @@ class RangePicker extends PureComponent {
         from,
         to
       } = replaceRange(value, day);
-      from = from ? fnsStartOfDay(from) : from;
-      to = to ? fnsEndOfDay(to) : to;
+      from = from ? startOfDay(from) : from;
+      to = to ? endOfDay(to) : to;
       onChange && onChange({
         type: ABSOLUTE,
         from,
@@ -138,7 +117,7 @@ class RangePicker extends PureComponent {
         onChange({
           ...value,
           type: ABSOLUTE,
-          from: fnsAddDays(legacyParse(value.from), numberOfDays)
+          from: addDays(toDateValue(value.from), numberOfDays)
         });
       }
       if (side === COLUMNS.RIGHT) {
@@ -149,7 +128,7 @@ class RangePicker extends PureComponent {
         onChange({
           ...value,
           type: ABSOLUTE,
-          to: fnsAddDays(legacyParse(value.to), numberOfDays)
+          to: addDays(toDateValue(value.to), numberOfDays)
         });
       }
     };
@@ -161,8 +140,8 @@ class RangePicker extends PureComponent {
       const {
         forceAdjacentMonths
       } = this.props;
-      if (fnsIsSameMonth(month, legacyParse(state[opposite].month))) {
-        const dir = fnsIsAfter(month, legacyParse(state[side].month)) ? 1 : -1;
+      if (isSameMonth(month, toDateValue(state[opposite].month))) {
+        const dir = isAfter(month, toDateValue(state[side].month)) ? 1 : -1;
         const adjacentMonth = ADD.MONTHS(month, dir);
         this.setState((prevState) => ({
           ...prevState,
@@ -217,7 +196,7 @@ class RangePicker extends PureComponent {
       } = this.props;
       const formatDate = (date) => {
         if (typeof date === "string") {
-          return datePickerFormat(legacyParse(date), TOOLTIP_FORMAT, intl.locale);
+          return datePickerFormat(toDateValue(date), TOOLTIP_FORMAT, intl.locale);
         }
         return formatValue(date, {
           ...getDefaultDataTimeOptions(true)
@@ -227,9 +206,9 @@ class RangePicker extends PureComponent {
         from,
         to
       } = value;
-      const rangeFrom = from ? legacyParse(from) : null;
-      const rangeTo = to ? legacyParse(to) : null;
-      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && fnsIsValid(rangeFrom) && fnsIsValid(rangeTo) && !isDayBefore(day, rangeFrom) && !isDayBefore(rangeTo, day);
+      const rangeFrom = from ? toDateValue(from) : null;
+      const rangeTo = to ? toDateValue(to) : null;
+      const isSelectedRangeDay = !!rangeFrom && !!rangeTo && isValid(rangeFrom) && isValid(rangeTo) && !isDayBefore(day, rangeFrom) && !isDayBefore(rangeTo, day);
       const dayForeground = /* @__PURE__ */ jsx(DayForeground, { className: "DayPicker-Day-FG" });
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(DayBackground, { className: "DayPicker-Day-BG" }),
@@ -252,7 +231,7 @@ class RangePicker extends PureComponent {
         [side]: currentSide,
         [opposite]: oppositeSide
       } = this.state;
-      const oppositeMonth = legacyParse(oppositeSide.month);
+      const oppositeMonth = toDateValue(oppositeSide.month);
       return /* @__PURE__ */ jsx(MonthPicker, { max: side === COLUMNS.LEFT ? ADD.MONTHS(oppositeMonth, -1) : void 0, min: side === COLUMNS.RIGHT ? ADD.MONTHS(oppositeMonth, 1) : void 0, value: currentSide.month instanceof Date ? currentSide.month : new Date(currentSide.month), onChange: (month) => this.handleSideMonthChange(side, month, "date") }, `month_picker_${opposite}`);
     };
     this.renderDatePicker = (side) => {
@@ -272,16 +251,16 @@ class RangePicker extends PureComponent {
         to,
         type
       } = value;
-      const modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
-      const selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [legacyParse(from), {
-        from: legacyParse(from),
-        to: legacyParse(to)
+      const modifiers = getModifiers(isValid(from) ? from : null, isValid(to) ? to : null, enteredTo);
+      const selectedDays = isValid(from) && isValid(to) ? [toDateValue(from), {
+        from: toDateValue(from),
+        to: toDateValue(to)
       }] : [];
-      const parsedLeft = legacyParse(left.month);
-      const parsedRight = legacyParse(right.month);
-      const adjacentMonths = forceAdjacentMonths || fnsIsSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
+      const parsedLeft = toDateValue(left.month);
+      const parsedRight = toDateValue(right.month);
+      const adjacentMonths = forceAdjacentMonths || isSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
       const adjacentYears = forceAdjacentMonths || fnsDifferenceInYears(ADD.MONTHS(parsedLeft, 1), parsedRight) === 0;
-      return /* @__PURE__ */ jsx(DayPicker, { className: type.toLowerCase(), canChangeMonth: false, disabledDays: disabledDate, localeUtils, month: getDateFromString(sideState.month), title: sideState.monthTitle, hideLongNext: side === COLUMNS.LEFT && adjacentYears, hideShortNext: side === COLUMNS.LEFT && adjacentMonths, hideLongPrev: side === COLUMNS.RIGHT && adjacentYears, hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths, renderDay: this.renderDay, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleSideModeChange(side, "month"), onYearNameClick: () => this.handleSideModeChange(side, "year"), onMonthChange: (month) => this.handleSideMonthChange(side, month, "date"), fixedWeeks: true, showOutsideDays: true, modifiers, onDayClick: this.handleDayClick, selectedDays }, `day_picker_${side}`);
+      return /* @__PURE__ */ jsx(DayPicker, { className: type.toLowerCase(), canChangeMonth: false, disabledDays: disabledDate, localeUtils, month: getDateFromString(sideState.month), hideLongNext: side === COLUMNS.LEFT && adjacentYears, hideShortNext: side === COLUMNS.LEFT && adjacentMonths, hideLongPrev: side === COLUMNS.RIGHT && adjacentYears, hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths, renderDay: this.renderDay, onDayMouseEnter: this.handleDayMouseEnter, onDayMouseLeave: this.handleDayMouseLeave, onMonthNameClick: () => this.handleSideModeChange(side, "month"), onYearNameClick: () => this.handleSideModeChange(side, "year"), onMonthChange: (month) => this.handleSideMonthChange(side, month, "date"), fixedWeeks: true, showOutsideDays: true, modifiers, onDayClick: this.handleDayClick, selectedDays }, `day_picker_${side}`);
     };
     this.renderTimePicker = (side) => {
       const {
@@ -295,7 +274,7 @@ class RangePicker extends PureComponent {
       if (!from || !to) {
         return null;
       }
-      const sidesAreAdjacent = fnsIsSameDay(legacyParse(from), legacyParse(to));
+      const sidesAreAdjacent = isSameDay(toDateValue(from), toDateValue(to));
       switch (side) {
         case COLUMNS.LEFT: {
           return /* @__PURE__ */ jsx(TimePicker, { value: getDateFromString(from), onChange: this.handleFromTimeChange, disabledHours: getDisabledTimeOptions(from, "HOURS", null, to, is12HoursClock), disabledMinutes: getDisabledTimeOptions(from, "MINUTES", null, to, is12HoursClock), disabledSeconds: getDisabledTimeOptions(from, "SECONDS", null, to, is12HoursClock), onShortNext: sidesAreAdjacent ? void 0 : () => {
@@ -356,21 +335,21 @@ class RangePicker extends PureComponent {
     } = this.state;
     const toDateChanged = !!value?.to && value?.to !== prevProps?.value?.to;
     const fromDateChanged = !!value?.from && value?.from !== prevProps?.value?.from;
-    const startOnLeft = fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month));
-    const endOnLeft = fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month));
+    const startOnLeft = isSameMonth(toDateValue(value.from), toDateValue(left.month));
+    const endOnLeft = isSameMonth(toDateValue(value.to), toDateValue(left.month));
     if (fromDateChanged && !endOnLeft || toDateChanged && !endOnLeft || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
       if (startAlwaysOnTheLeft) {
         this.setState(getSidesState(value, forceAdjacentMonths));
       }
     }
     if (jumpToStartAndEnd && (fromDateChanged || toDateChanged)) {
-      const startOnRight = fnsIsSameMonth(legacyParse(value.from), legacyParse(right.month));
+      const startOnRight = isSameMonth(toDateValue(value.from), toDateValue(right.month));
       const isStartVisible = startOnLeft || startOnRight;
       if (!isStartVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
         return null;
       }
-      const endOnRight = fnsIsSameMonth(legacyParse(value.to), legacyParse(right.month));
+      const endOnRight = isSameMonth(toDateValue(value.to), toDateValue(right.month));
       const isEndVisible = endOnLeft || endOnRight;
       if (!isEndVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
@@ -394,8 +373,8 @@ class RangePicker extends PureComponent {
     } = this.props;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs(Sides, { children: [
-        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.LEFT) }),
-        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.RIGHT) })
+        /* @__PURE__ */ jsx(Side, { mode, "data-testid": `date-range-picker-side-${COLUMNS.LEFT}`, children: this.renderSide(COLUMNS.LEFT) }),
+        /* @__PURE__ */ jsx(Side, { mode, "data-testid": `date-range-picker-side-${COLUMNS.RIGHT}`, children: this.renderSide(COLUMNS.RIGHT) })
       ] }),
       /* @__PURE__ */ jsxs(PickerFooter, { children: [
         showNowButton && /* @__PURE__ */ jsx(Range, { onClick: ({
@@ -407,7 +386,7 @@ class RangePicker extends PureComponent {
             translationKey: "now",
             type: "ABSOLUTE",
             from: now,
-            to: fnsAddMinutes(now, 1)
+            to: addMinutes(now, 1)
           };
           onChange(literallyNow);
           currentTarget.blur();

package/dist/RangePicker/RangePicker.types.d.ts

@@ -24,12 +24,10 @@ export interface State {
     enteredTo?: Date | null;
     left: {
         month: Date | string;
-        monthTitle: string;
         mode: string;
     };
     right: {
         month: Date | string;
-        monthTitle: string;
         mode: string;
     };
 }

package/dist/RangePicker/utils.js

@@ -1,35 +1,11 @@
-import fnsIsValid from "date-fns/isValid";
-import fnsIsWithinRange from "date-fns/isWithinInterval";
-import fnsMax from "date-fns/max";
-import fnsMin from "date-fns/min";
+import { isWithinInterval, endOfDay, startOfDay, isBefore, min, max, startOfMonth, isValid, isSameMonth } from "date-fns";
 import dayjs from "dayjs";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import { AM, HOUR_12, PM, MAP_24_HOUR_TO_12, DISABLE_CLOCK_MODE_HOUR, HOUR } from "@synerise/ds-time-picker";
 import { TIME_OPTIONS } from "../constants.js";
 import ADD from "../dateUtils/add.js";
-import format from "../dateUtils/format.js";
 import GET from "../dateUtils/get.js";
 import SET from "../dateUtils/set.js";
-import "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import fnsEndOfDay from "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import fnsIsBefore from "date-fns/isBefore";
-import fnsIsSameMonth from "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import fnsStartOfDay from "date-fns/startOfDay";
-import fnsStartOfMonth from "date-fns/startOfMonth";
+import toDateValue from "../dateUtils/toDateValue.js";
 const NOW = /* @__PURE__ */ new Date();
 const HOURS_GRANULARITY = "HOURS";
 const getAmOrPmFromDate = (date) => {
@@ -38,20 +14,20 @@ const getAmOrPmFromDate = (date) => {
 const getInterval = (initialDate, startDate, endDate) => {
   if (!startDate && !endDate) {
     return {
-      start: fnsStartOfDay(initialDate),
-      end: fnsEndOfDay(initialDate)
+      start: startOfDay(initialDate),
+      end: endOfDay(initialDate)
     };
   }
   if (!startDate && endDate) {
     return {
-      start: fnsIsBefore(initialDate, endDate) ? fnsStartOfDay(initialDate) : fnsStartOfDay(endDate),
+      start: isBefore(initialDate, endDate) ? startOfDay(initialDate) : startOfDay(endDate),
       end: endDate
     };
   }
   if (!endDate && startDate) {
     return {
       start: startDate,
-      end: fnsIsBefore(initialDate, startDate) ? fnsEndOfDay(startDate) : fnsEndOfDay(initialDate)
+      end: isBefore(initialDate, startDate) ? endOfDay(startDate) : endOfDay(initialDate)
     };
   }
   return {
@@ -67,7 +43,7 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
     return [];
   }
   const dayBuilder = dayjs(day);
-  const dayAsDate = typeof day === "string" ? legacyParse(day) : day;
+  const dayAsDate = typeof day === "string" ? toDateValue(day) : day;
   const dayClockMode = getAmOrPmFromDate(dayAsDate);
   let disableMeridienToggle = false;
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
@@ -85,11 +61,11 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
       }
     }
   }
-  const intervalStartDate = lowerLimit ? legacyParse(lowerLimit) : void 0;
-  const intervalEndDate = upperLimit ? legacyParse(upperLimit) : void 0;
+  const intervalStartDate = lowerLimit ? toDateValue(lowerLimit) : void 0;
+  const intervalEndDate = upperLimit ? toDateValue(upperLimit) : void 0;
   const interval = getInterval(dayAsDate, intervalStartDate, intervalEndDate);
   const options = TIME_OPTIONS[granularity].map((option) => SET[granularity](dayAsDate, option));
-  let result = options.filter((opt) => !fnsIsWithinRange(opt, interval)).map((option) => GET[granularity](option));
+  let result = options.filter((opt) => !isWithinInterval(opt, interval)).map((option) => GET[granularity](option));
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
     if (dayClockMode === AM) {
       result = result.filter((item) => item < HOUR_12);
@@ -104,20 +80,18 @@ const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = nul
   return result;
 };
 const getSidesState = (value, forceAdjacentMonths) => {
-  const from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : /* @__PURE__ */ new Date());
-  let to = fnsIsValid(value.to) ? fnsStartOfMonth(legacyParse(value.to)) : from;
-  if (fnsIsSameMonth(from, to)) {
+  const from = startOfMonth(isValid(value.from) ? toDateValue(value.from) : /* @__PURE__ */ new Date());
+  let to = isValid(value.to) ? startOfMonth(toDateValue(value.to)) : from;
+  if (isSameMonth(from, to)) {
     to = ADD.MONTHS(to, 1);
   }
   return {
     left: {
       month: from,
-      monthTitle: fnsIsValid(from) ? format(legacyParse(from), "MMM yyyy") : "",
       mode: "date"
     },
     right: {
       month: forceAdjacentMonths ? ADD.MONTHS(from, 1) : to,
-      monthTitle: fnsIsValid(to) ? format(legacyParse(to), "MMM yyyy") : "",
       mode: "date"
     }
   };
@@ -126,15 +100,15 @@ const toDate = (value) => {
   if (value === null || value === void 0) {
     return void 0;
   }
-  return value instanceof Date ? value : legacyParse(value);
+  return value instanceof Date ? value : toDateValue(value);
 };
 const getModifiers = (from, to, enteredTo) => {
   const isSelecting = from && !to && enteredTo;
-  const enteredStart = isSelecting ? fnsMin([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  const enteredEnd = isSelecting ? fnsMax([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  const entered = isSelecting ? (day) => fnsIsWithinRange(legacyParse(day), {
-    start: legacyParse(enteredStart),
-    end: legacyParse(enteredEnd)
+  const enteredStart = isSelecting ? min([toDateValue(from), toDateValue(enteredTo)]) : enteredTo;
+  const enteredEnd = isSelecting ? max([toDateValue(from), toDateValue(enteredTo)]) : enteredTo;
+  const entered = isSelecting ? (day) => isWithinInterval(toDateValue(day), {
+    start: toDateValue(enteredStart),
+    end: toDateValue(enteredEnd)
   }) : enteredTo;
   const startModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? void 0 : from;
   const endModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? from : to;

package/dist/RangePickerInput/RangePickerInput.types.d.ts

@@ -5,10 +5,6 @@ import { Texts } from '../DateRangePicker.types';
 import { DateFilter, DateRange } from '../date.types';
 export type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
-    /**
-     * @deprecated use `valueFormatOptions` instead
-     */
-    format?: string;
     valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;

package/dist/RawDateRangePicker.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { DateRangePickerProps } from './DateRangePicker.types';
 import { DateRange } from './date.types';
 export declare function defaultValueTransformer(value: DateRange): DateRange;
-export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, format, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: Omit<DateRangePickerProps, "placement">) => React.JSX.Element;
+export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: Omit<DateRangePickerProps, "placement">) => React.JSX.Element;
 export default RawDateRangePicker;

package/dist/RawDateRangePicker.js

@@ -1,11 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import fnsIsValid from "date-fns/isValid";
-import fnsStartOfSecond from "date-fns/startOfSecond";
+import { isValid, startOfSecond } from "date-fns";
 import isUndefined from "lodash.isundefined";
 import omitBy from "lodash.omitby";
 import { useState, useEffect, useMemo, useCallback } from "react";
 import { useIntl } from "react-intl";
-import { legacyParse } from "@date-fns/upgrade/v2";
 import AddonCollapse from "./AddonCollapse/AddonCollapse.js";
 import { Container, Separator, Addon, DateRangePickerWrapper } from "./DateRangePicker.styles.js";
 import Footer from "./Footer/Footer.js";
@@ -16,6 +14,7 @@ import { isLifetime } from "./RelativeRangePicker/Elements/RangeDropdown/RangeDr
 import RelativeRangePicker from "./RelativeRangePicker/RelativeRangePicker.js";
 import { MODES, ALL_TIME, RELATIVE, ABSOLUTE, RELATIVE_PRESETS, ABSOLUTE_PRESETS, CUSTOM_RANGE_KEY } from "./constants.js";
 import relativeToAbsolute from "./dateUtils/relativeToAbsolute.js";
+import toDateValue from "./dateUtils/toDateValue.js";
 import { normalizeRange, getDefaultTexts } from "./utils.js";
 import { toIsoString } from "@synerise/ds-core";
 const isRelative = (dateRange) => {
@@ -81,7 +80,6 @@ const RawDateRangePicker = ({
   showRelativePicker = true,
   showFilter,
   showTime,
-  format,
   valueFormatOptions,
   disabledDate,
   validate = () => ({
@@ -128,7 +126,7 @@ const RawDateRangePicker = ({
     if (!range) {
       return;
     }
-    if (range.from && !fnsIsValid(range?.from)) {
+    if (range.from && !isValid(range?.from)) {
       return;
     }
     const newValue = normalizeRange({
@@ -137,10 +135,10 @@ const RawDateRangePicker = ({
     });
     if (isTruncateMs) {
       if (newValue.from !== void 0) {
-        newValue.from = fnsStartOfSecond(legacyParse(newValue.from));
+        newValue.from = startOfSecond(toDateValue(newValue.from));
       }
       if (newValue.to !== void 0) {
-        newValue.to = fnsStartOfSecond(legacyParse(newValue.to));
+        newValue.to = startOfSecond(toDateValue(newValue.to));
       }
     }
     if ((newValue.type === "RELATIVE" || newValue.key === ALL_TIME) && mode === MODES.TIME) {
@@ -251,13 +249,13 @@ const RawDateRangePicker = ({
     const isValidAbsolute = !Object.keys(localValue).includes("key") && Boolean(from && to);
     const isValidRelative = isRelative(localValue) && Boolean(localValue.offset && localValue.duration);
     const isValidSince = localValue.type === "SINCE" && Boolean(localValue.offset && localValue.duration);
-    const isValid = (isValidAbsolute || isValidRelative || isValidSince || key === ALL_TIME) && validator.valid;
-    const canSwitchToTimePicker = isValid && !isLifetime(localValue) && (!disableAbsoluteTimepickerInRelative || localValue.type === "ABSOLUTE");
+    const isValid2 = (isValidAbsolute || isValidRelative || isValidSince || key === ALL_TIME) && validator.valid;
+    const canSwitchToTimePicker = isValid2 && !isLifetime(localValue) && (!disableAbsoluteTimepickerInRelative || localValue.type === "ABSOLUTE");
     content = /* @__PURE__ */ jsxs(Container, { className: containerClass, children: [
       /* @__PURE__ */ jsx(RangePicker, { showNowButton, value: normalizeRange(localValue), onChange: handleRangeChange, mode, disabledDate, onSwitchMode: handleSwitchMode, dateOnly: !showTime, canSwitchMode: canSwitchToTimePicker, texts: allTexts, forceAdjacentMonths, intl }),
       addons.length > 0 && /* @__PURE__ */ jsx(Separator, {}),
       addons.map((addon, index) => /* @__PURE__ */ jsx(Addon, { last: addons.length === index + 1, className: "addon-wrapper", children: addon.content }, addon.key)),
-      /* @__PURE__ */ jsx(Footer, { canApply: isValid || isLifetime(localValue), onApply: handleApply, dateOnly: !showTime, mode, canSwitchMode: isValid, message: !validator.valid ? validator.message : null, onSwitchMode: handleSwitchMode, texts: allTexts, value: fullValue, showTime, format, valueFormatOptions, ...footerProps })
+      /* @__PURE__ */ jsx(Footer, { canApply: isValid2 || isLifetime(localValue), onApply: handleApply, dateOnly: !showTime, mode, canSwitchMode: isValid2, message: !validator.valid ? validator.message : null, onSwitchMode: handleSwitchMode, texts: allTexts, value: fullValue, showTime, valueFormatOptions, ...footerProps })
     ] });
   }
   return /* @__PURE__ */ jsx(DateRangePickerWrapper, { "data-testid": "date-range-picker-container", children: content });

package/dist/RelativeRangePicker/RelativeRangePicker.js

@@ -3,26 +3,7 @@ import React from "react";
 import { injectIntl } from "react-intl";
 import { CUSTOM_RANGE_KEY, RANGES_MODE, RELATIVE_UNITS, RELATIVE_PRESETS, ABSOLUTE_PRESETS, RELATIVE_SECTION_BUTTON_KEYS_ORDER, RELATIVE } from "../constants.js";
 import getRelativePresetForRange from "../dateUtils/getRelativePresetForRange.js";
-import "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import "date-fns/format";
-import "date-fns/getYear";
-import fnsIsAfter from "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { isAfter } from "date-fns";
 import { DEFAULT_RANGE, normalizeRange } from "../utils.js";
 import CustomRangeForm from "./Elements/CustomRangeForm/CustomRangeForm.js";
 import RangeButtons from "./Elements/RangeButtons/RangeButtons.js";
@@ -99,7 +80,7 @@ const _RelativeRangePicker = class _RelativeRangePicker extends React.PureCompon
         onChange
       } = this.props;
       const isSince = currentGroup === RANGES_MODE.SINCE;
-      const isFuture = isSince ? value.future : value.timestamp && fnsIsAfter(value.timestamp, /* @__PURE__ */ new Date());
+      const isFuture = isSince ? value.future : value.timestamp && isAfter(value.timestamp, /* @__PURE__ */ new Date());
       const changes = {
         ...setFuture(currentGroup === RANGES_MODE.FUTURE || isFuture, value),
         type: "RELATIVE"

package/dist/dateUtils/add.d.ts

@@ -1,10 +1,4 @@
-import { default as fnsAddDays } from 'date-fns/addDays';
-import { default as fnsAddHours } from 'date-fns/addHours';
-import { default as fnsAddMinutes } from 'date-fns/addMinutes';
-import { default as fnsAddMonths } from 'date-fns/addMonths';
-import { default as fnsAddSeconds } from 'date-fns/addSeconds';
-import { default as fnsAddWeeks } from 'date-fns/addWeeks';
-import { default as fnsAddYears } from 'date-fns/addYears';
+import { addDays as fnsAddDays, addHours as fnsAddHours, addMinutes as fnsAddMinutes, addMonths as fnsAddMonths, addSeconds as fnsAddSeconds, addWeeks as fnsAddWeeks, addYears as fnsAddYears } from 'date-fns';
 declare const _default: {
     HOURS: typeof fnsAddHours;
     MINUTES: typeof fnsAddMinutes;

package/dist/dateUtils/add.js

@@ -1,18 +1,12 @@
-import fnsAddDays from "date-fns/addDays";
-import fnsAddHours from "date-fns/addHours";
-import fnsAddMinutes from "date-fns/addMinutes";
-import fnsAddMonths from "date-fns/addMonths";
-import fnsAddSeconds from "date-fns/addSeconds";
-import fnsAddWeeks from "date-fns/addWeeks";
-import fnsAddYears from "date-fns/addYears";
+import { addYears, addMonths, addWeeks, addDays, addSeconds, addMinutes, addHours } from "date-fns";
 const ADD = {
-  HOURS: fnsAddHours,
-  MINUTES: fnsAddMinutes,
-  SECONDS: fnsAddSeconds,
-  DAYS: fnsAddDays,
-  WEEKS: fnsAddWeeks,
-  MONTHS: fnsAddMonths,
-  YEARS: fnsAddYears
+  HOURS: addHours,
+  MINUTES: addMinutes,
+  SECONDS: addSeconds,
+  DAYS: addDays,
+  WEEKS: addWeeks,
+  MONTHS: addMonths,
+  YEARS: addYears
 };
 export {
   ADD as default

package/dist/dateUtils/difference.d.ts

@@ -1,10 +1,4 @@
-import { default as differenceInDays } from 'date-fns/differenceInDays';
-import { default as differenceInHours } from 'date-fns/differenceInHours';
-import { default as differenceInMinutes } from 'date-fns/differenceInMinutes';
-import { default as differenceInMonths } from 'date-fns/differenceInMonths';
-import { default as differenceInSeconds } from 'date-fns/differenceInSeconds';
-import { default as differenceInWeeks } from 'date-fns/differenceInWeeks';
-import { default as differenceInYears } from 'date-fns/differenceInYears';
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInMonths, differenceInSeconds, differenceInWeeks, differenceInYears } from 'date-fns';
 declare const _default: {
     HOURS: typeof differenceInHours;
     MINUTES: typeof differenceInMinutes;

package/dist/dateUtils/difference.js

@@ -1,10 +1,4 @@
-import differenceInDays from "date-fns/differenceInDays";
-import differenceInHours from "date-fns/differenceInHours";
-import differenceInMinutes from "date-fns/differenceInMinutes";
-import differenceInMonths from "date-fns/differenceInMonths";
-import differenceInSeconds from "date-fns/differenceInSeconds";
-import differenceInWeeks from "date-fns/differenceInWeeks";
-import differenceInYears from "date-fns/differenceInYears";
+import { differenceInYears, differenceInMonths, differenceInWeeks, differenceInDays, differenceInSeconds, differenceInMinutes, differenceInHours } from "date-fns";
 const difference = {
   HOURS: differenceInHours,
   MINUTES: differenceInMinutes,

package/dist/dateUtils/endOf.d.ts

@@ -1,10 +1,4 @@
-import { default as fnsEndOfDay } from 'date-fns/endOfDay';
-import { default as fnsEndOfHour } from 'date-fns/endOfHour';
-import { default as fnsEndOfISOWeek } from 'date-fns/endOfISOWeek';
-import { default as fnsEndOfMinute } from 'date-fns/endOfMinute';
-import { default as fnsEndOfMonth } from 'date-fns/endOfMonth';
-import { default as fnsEndOfSecond } from 'date-fns/endOfSecond';
-import { default as fnsEndOfYear } from 'date-fns/endOfYear';
+import { endOfDay as fnsEndOfDay, endOfHour as fnsEndOfHour, endOfISOWeek as fnsEndOfISOWeek, endOfMinute as fnsEndOfMinute, endOfMonth as fnsEndOfMonth, endOfSecond as fnsEndOfSecond, endOfYear as fnsEndOfYear } from 'date-fns';
 declare const _default: {
     HOURS: typeof fnsEndOfHour;
     MINUTES: typeof fnsEndOfMinute;

package/dist/dateUtils/endOf.js

@@ -1,18 +1,12 @@
-import fnsEndOfDay from "date-fns/endOfDay";
-import fnsEndOfHour from "date-fns/endOfHour";
-import fnsEndOfISOWeek from "date-fns/endOfISOWeek";
-import fnsEndOfMinute from "date-fns/endOfMinute";
-import fnsEndOfMonth from "date-fns/endOfMonth";
-import fnsEndOfSecond from "date-fns/endOfSecond";
-import fnsEndOfYear from "date-fns/endOfYear";
+import { endOfYear, endOfMonth, endOfISOWeek, endOfDay, endOfSecond, endOfMinute, endOfHour } from "date-fns";
 const END_OF = {
-  HOURS: fnsEndOfHour,
-  MINUTES: fnsEndOfMinute,
-  SECONDS: fnsEndOfSecond,
-  DAYS: fnsEndOfDay,
-  WEEKS: fnsEndOfISOWeek,
-  MONTHS: fnsEndOfMonth,
-  YEARS: fnsEndOfYear
+  HOURS: endOfHour,
+  MINUTES: endOfMinute,
+  SECONDS: endOfSecond,
+  DAYS: endOfDay,
+  WEEKS: endOfISOWeek,
+  MONTHS: endOfMonth,
+  YEARS: endOfYear
 };
 export {
   END_OF as default

package/dist/dateUtils/get.d.ts

@@ -1,6 +1,4 @@
-import { default as fnsGetHours } from 'date-fns/getHours';
-import { default as fnsGetMinutes } from 'date-fns/getMinutes';
-import { default as fnsGetSeconds } from 'date-fns/getSeconds';
+import { getHours as fnsGetHours, getMinutes as fnsGetMinutes, getSeconds as fnsGetSeconds } from 'date-fns';
 declare const _default: {
     HOURS: typeof fnsGetHours;
     MINUTES: typeof fnsGetMinutes;

package/dist/dateUtils/get.js

@@ -1,10 +1,8 @@
-import fnsGetHours from "date-fns/getHours";
-import fnsGetMinutes from "date-fns/getMinutes";
-import fnsGetSeconds from "date-fns/getSeconds";
+import { getSeconds, getMinutes, getHours } from "date-fns";
 const GET = {
-  HOURS: fnsGetHours,
-  MINUTES: fnsGetMinutes,
-  SECONDS: fnsGetSeconds
+  HOURS: getHours,
+  MINUTES: getMinutes,
+  SECONDS: getSeconds
 };
 export {
   GET as default

package/dist/dateUtils/relativeToAbsolute.js

@@ -1,9 +1,8 @@
-import fnsMax from "date-fns/max";
-import fnsMin from "date-fns/min";
-import { legacyParse } from "@date-fns/upgrade/v2";
+import { min, max } from "date-fns";
 import ADD from "./add.js";
 import END_OF from "./endOf.js";
 import START_OF from "./startOf.js";
+import toDateValue from "./toDateValue.js";
 const relativeToAbsolute = (range) => {
   const {
     future,
@@ -14,26 +13,26 @@ const relativeToAbsolute = (range) => {
   let left;
   let right;
   if (future) {
-    left = legacyParse(
+    left = toDateValue(
       // @ts-expect-error - requires type refactor
       ADD[offset.type](START_OF[offset.type](now), offset.value)
     );
-    right = legacyParse(
+    right = toDateValue(
       // @ts-expect-error - requires type refactor
       ADD[duration.type](END_OF[duration.type](left), duration.value - 1)
     );
   } else {
-    right = legacyParse(
+    right = toDateValue(
       // @ts-expect-error - requires type refactor
       ADD[offset.type](END_OF[offset.type](now), -offset.value)
     );
-    left = legacyParse(
+    left = toDateValue(
       // @ts-expect-error - requires type refactor
       ADD[duration.type](START_OF[duration.type](right), 1 - duration.value)
     );
   }
-  const from = fnsMin([left, right]);
-  const to = fnsMax([left, right]);
+  const from = min([left, right]);
+  const to = max([left, right]);
   return {
     from,
     to,

package/dist/dateUtils/set.d.ts

@@ -1,6 +1,4 @@
-import { default as fnsSetHours } from 'date-fns/setHours';
-import { default as fnsSetMinutes } from 'date-fns/setMinutes';
-import { default as fnsSetSeconds } from 'date-fns/setSeconds';
+import { setHours as fnsSetHours, setMinutes as fnsSetMinutes, setSeconds as fnsSetSeconds } from 'date-fns';
 declare const _default: {
     HOURS: typeof fnsSetHours;
     MINUTES: typeof fnsSetMinutes;

package/dist/dateUtils/set.js

@@ -1,10 +1,8 @@
-import fnsSetHours from "date-fns/setHours";
-import fnsSetMinutes from "date-fns/setMinutes";
-import fnsSetSeconds from "date-fns/setSeconds";
+import { setSeconds, setMinutes, setHours } from "date-fns";
 const SET = {
-  HOURS: fnsSetHours,
-  MINUTES: fnsSetMinutes,
-  SECONDS: fnsSetSeconds
+  HOURS: setHours,
+  MINUTES: setMinutes,
+  SECONDS: setSeconds
 };
 export {
   SET as default

package/dist/dateUtils/startOf.d.ts

@@ -1,10 +1,4 @@
-import { default as fnsStartOfDay } from 'date-fns/startOfDay';
-import { default as fnsStartOfHour } from 'date-fns/startOfHour';
-import { default as fnsStartOfISOWeek } from 'date-fns/startOfISOWeek';
-import { default as fnsStartOfMinute } from 'date-fns/startOfMinute';
-import { default as fnsStartOfMonth } from 'date-fns/startOfMonth';
-import { default as fnsStartOfSecond } from 'date-fns/startOfSecond';
-import { default as fnsStartOfYear } from 'date-fns/startOfYear';
+import { startOfDay as fnsStartOfDay, startOfHour as fnsStartOfHour, startOfISOWeek as fnsStartOfISOWeek, startOfMinute as fnsStartOfMinute, startOfMonth as fnsStartOfMonth, startOfSecond as fnsStartOfSecond, startOfYear as fnsStartOfYear } from 'date-fns';
 declare const _default: {
     HOURS: typeof fnsStartOfHour;
     MINUTES: typeof fnsStartOfMinute;

package/dist/dateUtils/startOf.js

@@ -1,18 +1,12 @@
-import fnsStartOfDay from "date-fns/startOfDay";
-import fnsStartOfHour from "date-fns/startOfHour";
-import fnsStartOfISOWeek from "date-fns/startOfISOWeek";
-import fnsStartOfMinute from "date-fns/startOfMinute";
-import fnsStartOfMonth from "date-fns/startOfMonth";
-import fnsStartOfSecond from "date-fns/startOfSecond";
-import fnsStartOfYear from "date-fns/startOfYear";
+import { startOfYear, startOfMonth, startOfISOWeek, startOfDay, startOfSecond, startOfMinute, startOfHour } from "date-fns";
 const START_OF = {
-  HOURS: fnsStartOfHour,
-  MINUTES: fnsStartOfMinute,
-  SECONDS: fnsStartOfSecond,
-  DAYS: fnsStartOfDay,
-  WEEKS: fnsStartOfISOWeek,
-  MONTHS: fnsStartOfMonth,
-  YEARS: fnsStartOfYear
+  HOURS: startOfHour,
+  MINUTES: startOfMinute,
+  SECONDS: startOfSecond,
+  DAYS: startOfDay,
+  WEEKS: startOfISOWeek,
+  MONTHS: startOfMonth,
+  YEARS: startOfYear
 };
 export {
   START_OF as default

package/dist/dateUtils/sub.d.ts

@@ -1,10 +1,4 @@
-import { default as subDay } from 'date-fns/subDays';
-import { default as subHour } from 'date-fns/subHours';
-import { default as subMinute } from 'date-fns/subMinutes';
-import { default as subMonth } from 'date-fns/subMonths';
-import { default as subSecond } from 'date-fns/subSeconds';
-import { default as subWeek } from 'date-fns/subWeeks';
-import { default as subYear } from 'date-fns/subYears';
+import { subDays as subDay, subHours as subHour, subMinutes as subMinute, subMonths as subMonth, subSeconds as subSecond, subWeeks as subWeek, subYears as subYear } from 'date-fns';
 declare const _default: {
     SECONDS: typeof subSecond;
     MINUTES: typeof subMinute;

package/dist/dateUtils/sub.js

@@ -1,18 +1,12 @@
-import subDay from "date-fns/subDays";
-import subHour from "date-fns/subHours";
-import subMinute from "date-fns/subMinutes";
-import subMonth from "date-fns/subMonths";
-import subSecond from "date-fns/subSeconds";
-import subWeek from "date-fns/subWeeks";
-import subYear from "date-fns/subYears";
+import { subYears, subMonths, subWeeks, subDays, subHours, subMinutes, subSeconds } from "date-fns";
 const sub = {
-  SECONDS: subSecond,
-  MINUTES: subMinute,
-  HOURS: subHour,
-  DAYS: subDay,
-  WEEKS: subWeek,
-  MONTHS: subMonth,
-  YEARS: subYear
+  SECONDS: subSeconds,
+  MINUTES: subMinutes,
+  HOURS: subHours,
+  DAYS: subDays,
+  WEEKS: subWeeks,
+  MONTHS: subMonths,
+  YEARS: subYears
 };
 export {
   sub as default

package/dist/dateUtils/toDateValue.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Normalises the loosely-typed date values this package accepts into a `Date`.
+ *
+ * Replaces `legacyParse` from `@date-fns/upgrade`, a shim reimplementing date-fns v1's `parse()`,
+ * and reproduces its branches exactly — verified identical across every input kind the call sites
+ * reach, including the two that surprise:
+ *
+ * - `null` yields the **epoch**, which `isValid` reports as a valid date, not a rejected one.
+ * - `undefined`, `''` and unparseable strings yield an `Invalid Date`.
+ *
+ * The string branch is load-bearing. `legacyParse` reads a naive string as *local* time, including
+ * date-only forms where the ECMAScript spec says UTC. `parseISO` agrees; `toDate` and `new Date`
+ * do not, and would shift `'2024-01-15'` by the local offset — a whole day either side of UTC.
+ */
+export declare const toDateValue: (value: Date | string | number | null | undefined) => Date;
+export default toDateValue;

package/dist/dateUtils/toDateValue.js

@@ -0,0 +1,14 @@
+import { parseISO } from "date-fns";
+const toDateValue = (value) => {
+  if (value instanceof Date) {
+    return new Date(value.getTime());
+  }
+  if (typeof value === "string") {
+    return parseISO(value);
+  }
+  return new Date(value);
+};
+export {
+  toDateValue as default,
+  toDateValue
+};

package/dist/fns.d.ts

@@ -1,23 +1,4 @@
-import { default as fnsAddDays } from 'date-fns/addDays';
-import { default as fnsAddHours } from 'date-fns/addHours';
-import { default as fnsAddMinutes } from 'date-fns/addMinutes';
-import { default as fnsAddMonths } from 'date-fns/addMonths';
-import { default as fnsAddSeconds } from 'date-fns/addSeconds';
-import { default as fnsAddWeeks } from 'date-fns/addWeeks';
-import { default as fnsAddYears } from 'date-fns/addYears';
-import { default as fnsEndOfDay } from 'date-fns/endOfDay';
-import { default as fnsEndOfMonth } from 'date-fns/endOfMonth';
-import { default as fnsFormat } from 'date-fns/format';
-import { default as fnsGetYear } from 'date-fns/getYear';
-import { default as fnsIsAfter } from 'date-fns/isAfter';
-import { default as fnsIsBefore } from 'date-fns/isBefore';
-import { default as fnsIsSameMonth } from 'date-fns/isSameMonth';
-import { default as fnsIsSameYear } from 'date-fns/isSameYear';
-import { default as fnsSetDate } from 'date-fns/setDate';
-import { default as fnsSetMonth } from 'date-fns/setMonth';
-import { default as fnsSetYear } from 'date-fns/setYear';
-import { default as fnsStartOfDay } from 'date-fns/startOfDay';
-import { default as fnsStartOfMonth } from 'date-fns/startOfMonth';
+import { addDays as fnsAddDays, addHours as fnsAddHours, addMinutes as fnsAddMinutes, addMonths as fnsAddMonths, addSeconds as fnsAddSeconds, addWeeks as fnsAddWeeks, addYears as fnsAddYears, endOfDay as fnsEndOfDay, endOfMonth as fnsEndOfMonth, format as fnsFormat, getYear as fnsGetYear, isAfter as fnsIsAfter, isBefore as fnsIsBefore, isSameMonth as fnsIsSameMonth, isSameYear as fnsIsSameYear, setDate as fnsSetDate, setMonth as fnsSetMonth, setYear as fnsSetYear, startOfDay as fnsStartOfDay, startOfMonth as fnsStartOfMonth } from 'date-fns';
 export { fnsAddSeconds };
 export { fnsAddMinutes };
 export { fnsAddWeeks };

package/dist/fns.js

@@ -1,42 +1,23 @@
-import { default as default2 } from "date-fns/addDays";
-import { default as default3 } from "date-fns/addHours";
-import { default as default4 } from "date-fns/addMinutes";
-import { default as default5 } from "date-fns/addMonths";
-import { default as default6 } from "date-fns/addSeconds";
-import { default as default7 } from "date-fns/addWeeks";
-import { default as default8 } from "date-fns/addYears";
-import { default as default9 } from "date-fns/endOfDay";
-import { default as default10 } from "date-fns/endOfMonth";
-import { default as default11 } from "date-fns/format";
-import { default as default12 } from "date-fns/getYear";
-import { default as default13 } from "date-fns/isAfter";
-import { default as default14 } from "date-fns/isBefore";
-import { default as default15 } from "date-fns/isSameMonth";
-import { default as default16 } from "date-fns/isSameYear";
-import { default as default17 } from "date-fns/setDate";
-import { default as default18 } from "date-fns/setMonth";
-import { default as default19 } from "date-fns/setYear";
-import { default as default20 } from "date-fns/startOfDay";
-import { default as default21 } from "date-fns/startOfMonth";
+import { addDays, addHours, addMinutes, addMonths, addSeconds, addWeeks, addYears, endOfDay, endOfMonth, format, getYear, isAfter, isBefore, isSameMonth, isSameYear, setDate, setMonth, setYear, startOfDay, startOfMonth } from "date-fns";
 export {
-  default2 as fnsAddDays,
-  default3 as fnsAddHours,
-  default4 as fnsAddMinutes,
-  default5 as fnsAddMonths,
-  default6 as fnsAddSeconds,
-  default7 as fnsAddWeeks,
-  default8 as fnsAddYears,
-  default9 as fnsEndOfDay,
-  default10 as fnsEndOfMonth,
-  default11 as fnsFormat,
-  default12 as fnsGetYear,
-  default13 as fnsIsAfter,
-  default14 as fnsIsBefore,
-  default15 as fnsIsSameMonth,
-  default16 as fnsIsSameYear,
-  default17 as fnsSetDate,
-  default18 as fnsSetMonth,
-  default19 as fnsSetYear,
-  default20 as fnsStartOfDay,
-  default21 as fnsStartOfMonth
+  addDays as fnsAddDays,
+  addHours as fnsAddHours,
+  addMinutes as fnsAddMinutes,
+  addMonths as fnsAddMonths,
+  addSeconds as fnsAddSeconds,
+  addWeeks as fnsAddWeeks,
+  addYears as fnsAddYears,
+  endOfDay as fnsEndOfDay,
+  endOfMonth as fnsEndOfMonth,
+  format as fnsFormat,
+  getYear as fnsGetYear,
+  isAfter as fnsIsAfter,
+  isBefore as fnsIsBefore,
+  isSameMonth as fnsIsSameMonth,
+  isSameYear as fnsIsSameYear,
+  setDate as fnsSetDate,
+  setMonth as fnsSetMonth,
+  setYear as fnsSetYear,
+  startOfDay as fnsStartOfDay,
+  startOfMonth as fnsStartOfMonth
 };

package/dist/index.js

@@ -6,26 +6,7 @@ import { RawDateRangePicker } from "./RawDateRangePicker.js";
 import * as utils from "./utils.js";
 import * as constants from "./constants.js";
 import { default as default6 } from "./DateRangePicker.js";
-import "date-fns/addDays";
-import "date-fns/addHours";
-import "date-fns/addMinutes";
-import "date-fns/addMonths";
-import "date-fns/addSeconds";
-import "date-fns/addWeeks";
-import "date-fns/addYears";
-import "date-fns/endOfDay";
-import "date-fns/endOfMonth";
-import { default as default7 } from "date-fns/format";
-import "date-fns/getYear";
-import "date-fns/isAfter";
-import "date-fns/isBefore";
-import "date-fns/isSameMonth";
-import "date-fns/isSameYear";
-import "date-fns/setDate";
-import "date-fns/setMonth";
-import "date-fns/setYear";
-import "date-fns/startOfDay";
-import "date-fns/startOfMonth";
+import { format } from "date-fns";
 import { getDisabledTimeOptions } from "./RangePicker/utils.js";
 import { DEFAULT_RANGE_END, DEFAULT_RANGE_START } from "./RangeFilter/constants.js";
 export {
@@ -38,7 +19,7 @@ export {
   default5 as TimeWindow,
   default3 as WeeklyDateFilter,
   default6 as default,
-  default7 as fnsFormat,
+  format as fnsFormat,
   getDisabledTimeOptions,
   utils
 };

package/dist/utils.js

@@ -1,5 +1,4 @@
-import fnsMax from "date-fns/max";
-import fnsMin from "date-fns/min";
+import { min, max } from "date-fns";
 import omit from "lodash.omit";
 import { ABSOLUTE, RELATIVE, CUSTOM_RANGE_KEY } from "./constants.js";
 import ADD from "./dateUtils/add.js";
@@ -53,8 +52,8 @@ const normalizeRange = (range) => {
         left = ADD[duration.type](START_OF[duration.type](right), 1 - duration.value);
       }
     }
-    const from = fnsMin([left, right]);
-    const to = fnsMax([left, right]);
+    const from = min([left, right]);
+    const to = max([left, right]);
     const normalizedRange = {
       ...range,
       type: RELATIVE,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "2.0.4",
+  "version": "2.1.1",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -42,28 +42,27 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-badge": "^2.0.2",
-    "@synerise/ds-button": "^2.0.2",
-    "@synerise/ds-button-group": "^2.0.2",
-    "@synerise/ds-date-picker": "^2.0.3",
-    "@synerise/ds-dropdown": "^2.0.3",
-    "@synerise/ds-form-field": "^2.0.2",
-    "@synerise/ds-icon": "^2.1.0",
-    "@synerise/ds-inline-edit": "^2.0.3",
-    "@synerise/ds-input": "^2.0.3",
-    "@synerise/ds-input-number": "^2.0.3",
-    "@synerise/ds-list-item": "^2.0.2",
-    "@synerise/ds-manageable-list": "^2.1.0",
+    "@synerise/ds-badge": "^2.0.3",
+    "@synerise/ds-button": "^2.0.3",
+    "@synerise/ds-button-group": "^2.0.3",
+    "@synerise/ds-date-picker": "^2.1.1",
+    "@synerise/ds-dropdown": "^2.1.0",
+    "@synerise/ds-form-field": "^2.0.3",
+    "@synerise/ds-icon": "^2.1.1",
+    "@synerise/ds-inline-edit": "^2.0.4",
+    "@synerise/ds-input": "^2.0.4",
+    "@synerise/ds-input-number": "^2.0.4",
+    "@synerise/ds-list-item": "^2.1.0",
+    "@synerise/ds-manageable-list": "^2.1.1",
     "@synerise/ds-popover": "^2.0.1",
-    "@synerise/ds-scrollbar": "^2.0.1",
-    "@synerise/ds-select": "^2.0.4",
-    "@synerise/ds-slider": "^2.0.2",
-    "@synerise/ds-tag": "^2.0.2",
-    "@synerise/ds-time-picker": "^2.0.3",
-    "@synerise/ds-tooltip": "^2.0.2",
-    "@synerise/ds-utils": "^2.0.0",
-    "date-fns": "^2.16.1",
+    "@synerise/ds-scrollbar": "^2.0.2",
+    "@synerise/ds-select": "^2.1.0",
+    "@synerise/ds-slider": "^2.0.3",
+    "@synerise/ds-tag": "^2.0.3",
+    "@synerise/ds-time-picker": "^2.0.4",
+    "@synerise/ds-tooltip": "^2.0.3",
+    "@synerise/ds-utils": "^2.1.0",
+    "date-fns": "^4.1.0",
     "dayjs": "^1.8.35",
     "lodash.clonedeep": "^4.5.0",
     "lodash.flatten": "^4.4.0",
@@ -101,5 +100,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "e0dced8fd3a1194eff2fafc1b7e385b29238af88"
+  "gitHead": "71f08fdaba8e7b80731e29a03883dc6a33f2b9db"
 }

package/dist/dateUtils/format.d.ts

@@ -1,2 +0,0 @@
-declare const format: (date: Date, formatStr: string, locale?: string) => string;
-export default format;

package/dist/dateUtils/format.js

@@ -1,21 +0,0 @@
-import fnsFormat from "date-fns/format";
-import fnsIsValid from "date-fns/isValid";
-import { es, pl, enGB } from "date-fns/locale";
-import { legacyParse, convertTokens } from "@date-fns/upgrade/v2";
-const locales = {
-  en: enGB,
-  pl,
-  es
-};
-const defaultLocale = "en";
-const format = (date, formatStr, locale = defaultLocale) => {
-  if (!fnsIsValid(date)) {
-    return "";
-  }
-  return fnsFormat(legacyParse(date), convertTokens(formatStr), {
-    locale: locales[locale.substring(0, 2)] || locales[defaultLocale]
-  });
-};
-export {
-  format as default
-};