@synerise/ds-date-range-picker 1.6.11 → 1.6.13

package/dist/RangePicker/RangePicker.styles.d.ts

@@ -1,8 +1,8 @@
-import { type StyledButton } from '@synerise/ds-button';
-export declare const Sides: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Side: import("styled-components").StyledComponent<"div", any, {
+import { StyledButton } from '@synerise/ds-button';
+export declare const Sides: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Side: import('styled-components').StyledComponent<"div", any, {
     mode: string;
 }, never>;
-export declare const PickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterSeparator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PickerFooter: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const FooterSeparator: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const DateTimeModeSwitch: StyledButton;

package/dist/RangePicker/RangePicker.styles.js

@@ -1,26 +1,32 @@
-import styled from 'styled-components';
-import Button from '@synerise/ds-button';
-export var Sides = styled.div.withConfig({
+import styled from "styled-components";
+import Button from "@synerise/ds-button";
+const Sides = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerstyles__Sides",
   componentId: "sc-15wk36w-0"
 })(["display:grid;grid-template-columns:1fr 1fr;height:370px;margin:0;&& .ds-date-picker-nav{margin:0 14px;}"]);
-export var Side = styled.div.withConfig({
+const Side = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerstyles__Side",
   componentId: "sc-15wk36w-1"
-})(["padding:16px 12px 0 12px;display:grid;grid-template-rows:48px 290px;align-items:stretch;justify-content:stretch;width:318px;", " > *:not(:last-child){border-bottom:1px solid ", ";}&& .ds-time-picker{padding:16px 16px 0px 16px;}"], function (props) {
-  return props.mode === 'time' && ".long-prev,\n      .long-next {\n        display: none;\n      }";
-}, function (props) {
-  return props.theme.palette['grey-200'];
-});
-export var PickerFooter = styled.div.withConfig({
+})(["padding:16px 12px 0 12px;display:grid;grid-template-rows:48px 290px;align-items:stretch;justify-content:stretch;width:318px;", " > *:not(:last-child){border-bottom:1px solid ", ";}&& .ds-time-picker{padding:16px 16px 0px 16px;}"], (props) => props.mode === "time" && `.long-prev,
+      .long-next {
+        display: none;
+      }`, (props) => props.theme.palette["grey-200"]);
+const PickerFooter = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerstyles__PickerFooter",
   componentId: "sc-15wk36w-2"
 })(["margin:0 8px;padding:6px 16px 13px;display:flex;"]);
-export var FooterSeparator = styled.div.withConfig({
+const FooterSeparator = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerstyles__FooterSeparator",
   componentId: "sc-15wk36w-3"
 })(["display:flex;flex:1;"]);
-export var DateTimeModeSwitch = styled(Button).withConfig({
+const DateTimeModeSwitch = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "RangePickerstyles__DateTimeModeSwitch",
   componentId: "sc-15wk36w-4"
-})(["margin:4px 0;"]);
+})(["margin:4px 0;"]);
+export {
+  DateTimeModeSwitch,
+  FooterSeparator,
+  PickerFooter,
+  Side,
+  Sides
+};

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

@@ -1,6 +1,6 @@
-import { type WrappedComponentProps } from 'react-intl';
-import { type Texts } from '../DateRangePicker.types';
-import { type DateRange } from '../date.types';
+import { WrappedComponentProps } from 'react-intl';
+import { Texts } from '../DateRangePicker.types';
+import { DateRange } from '../date.types';
 export interface RangePickerProps extends WrappedComponentProps {
     value: DateRange;
     onChange: (value: DateRange) => void;

package/dist/RangePicker/RangePicker.types.js

@@ -1 +1 @@
-export {};
+

package/dist/RangePicker/utils.d.ts

@@ -1,6 +1,6 @@
-import { type Modifiers } from 'react-day-picker';
-import { type DateRange, type NullableDateLimit } from '../date.types';
-import { type State } from './RangePicker.types';
+import { Modifiers } from 'react-day-picker';
+import { DateRange, NullableDateLimit } from '../date.types';
+import { State } from './RangePicker.types';
 export declare const getDisabledTimeOptions: (initialDay: string | Date | undefined, granularity: string, initialLowerLimit?: NullableDateLimit, initialUpperLimit?: NullableDateLimit, is12HoursClock?: boolean) => number[];
 export declare const getSidesState: (value: DateRange, forceAdjacentMonths?: boolean) => State;
 export declare const getModifiers: (from: NullableDateLimit | undefined, to: NullableDateLimit | undefined, enteredTo: NullableDateLimit | undefined) => Modifiers;

package/dist/RangePicker/utils.js

@@ -1,22 +1,41 @@
-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 dayjs from 'dayjs';
-import { legacyParse } from '@date-fns/upgrade/v2';
-import { AM, DISABLE_CLOCK_MODE_HOUR, HOUR, HOUR_12, MAP_24_HOUR_TO_12, PM } from '@synerise/ds-time-picker';
-import { TIME_OPTIONS } from '../constants';
-import ADD from '../dateUtils/add';
-import format from '../dateUtils/format';
-import GET from '../dateUtils/get';
-import SET from '../dateUtils/set';
-import { fnsEndOfDay, fnsIsBefore, fnsIsSameMonth, fnsStartOfDay, fnsStartOfMonth } from '../fns';
-var NOW = new Date();
-var HOURS_GRANULARITY = 'HOURS';
-var getAmOrPmFromDate = function getAmOrPmFromDate(date) {
+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 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";
+const NOW = /* @__PURE__ */ new Date();
+const HOURS_GRANULARITY = "HOURS";
+const getAmOrPmFromDate = (date) => {
   return dayjs(date).get(HOUR) >= HOUR_12 ? PM : AM;
 };
-var getInterval = function getInterval(initialDate, startDate, endDate) {
+const getInterval = (initialDate, startDate, endDate) => {
   if (!startDate && !endDate) {
     return {
       start: fnsStartOfDay(initialDate),
@@ -40,108 +59,93 @@ var getInterval = function getInterval(initialDate, startDate, endDate) {
     end: endDate
   };
 };
-export var getDisabledTimeOptions = function getDisabledTimeOptions(initialDay, granularity, initialLowerLimit, initialUpperLimit, is12HoursClock) {
-  if (initialLowerLimit === void 0) {
-    initialLowerLimit = null;
-  }
-  if (initialUpperLimit === void 0) {
-    initialUpperLimit = null;
-  }
-  var day = initialDay;
-  var lowerLimit = initialLowerLimit;
-  var upperLimit = initialUpperLimit;
+const getDisabledTimeOptions = (initialDay, granularity, initialLowerLimit = null, initialUpperLimit = null, is12HoursClock) => {
+  const day = initialDay;
+  const lowerLimit = initialLowerLimit;
+  const upperLimit = initialUpperLimit;
   if (!day) {
     return [];
   }
-  var dayBuilder = dayjs(day);
-  var dayAsDate = typeof day === 'string' ? legacyParse(day) : day;
-  var dayClockMode = getAmOrPmFromDate(dayAsDate);
-  var disableMeridienToggle = false;
+  const dayBuilder = dayjs(day);
+  const dayAsDate = typeof day === "string" ? legacyParse(day) : day;
+  const dayClockMode = getAmOrPmFromDate(dayAsDate);
+  let disableMeridienToggle = false;
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
-    var diff;
+    let diff;
     if (lowerLimit) {
-      diff = dayBuilder.diff(dayjs(lowerLimit), 'minute') / 60;
+      diff = dayBuilder.diff(dayjs(lowerLimit), "minute") / 60;
       if (diff < 12 && dayClockMode === PM) {
         disableMeridienToggle = true;
       }
     }
     if (upperLimit) {
-      diff = dayjs(upperLimit).diff(dayBuilder, 'minute') / 60;
+      diff = dayjs(upperLimit).diff(dayBuilder, "minute") / 60;
       if (diff < 12 && dayClockMode === AM) {
         disableMeridienToggle = true;
       }
     }
   }
-  var intervalStartDate = lowerLimit ? legacyParse(lowerLimit) : undefined;
-  var intervalEndDate = upperLimit ? legacyParse(upperLimit) : undefined;
-  var interval = getInterval(dayAsDate, intervalStartDate, intervalEndDate);
-  var options = TIME_OPTIONS[granularity].map(function (option) {
-    return SET[granularity](dayAsDate, option);
-  });
-  var result = options.filter(function (opt) {
-    return !fnsIsWithinRange(opt, interval);
-  }).map(function (option) {
-    return GET[granularity](option);
-  });
+  const intervalStartDate = lowerLimit ? legacyParse(lowerLimit) : void 0;
+  const intervalEndDate = upperLimit ? legacyParse(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));
   if (is12HoursClock && granularity === HOURS_GRANULARITY) {
     if (dayClockMode === AM) {
-      result = result.filter(function (item) {
-        return item < HOUR_12;
-      });
+      result = result.filter((item) => item < HOUR_12);
     } else if (dayClockMode === PM) {
-      result = result.filter(function (item) {
-        return item >= HOUR_12;
-      });
+      result = result.filter((item) => item >= HOUR_12);
     }
-    result = result.map(function (item) {
-      return MAP_24_HOUR_TO_12[item];
-    });
+    result = result.map((item) => MAP_24_HOUR_TO_12[item]);
     if (disableMeridienToggle) {
       result.push(DISABLE_CLOCK_MODE_HOUR);
     }
   }
   return result;
 };
-export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
-  var from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : new Date());
-  var to = fnsIsValid(value.to) ? fnsStartOfMonth(legacyParse(value.to)) : from;
+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)) {
     to = ADD.MONTHS(to, 1);
   }
   return {
     left: {
       month: from,
-      monthTitle: fnsIsValid(from) ? format(legacyParse(from), 'MMM yyyy') : '',
-      mode: 'date'
+      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'
+      monthTitle: fnsIsValid(to) ? format(legacyParse(to), "MMM yyyy") : "",
+      mode: "date"
     }
   };
 };
-export var getModifiers = function getModifiers(from, to, enteredTo) {
-  var isSelecting = from && !to && enteredTo;
-  var enteredStart = isSelecting ? fnsMin([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  var enteredEnd = isSelecting ? fnsMax([legacyParse(from), legacyParse(enteredTo)]) : enteredTo;
-  var entered = isSelecting ? function (day) {
-    return fnsIsWithinRange(legacyParse(day), {
-      start: legacyParse(enteredStart),
-      end: legacyParse(enteredEnd)
-    });
-  } : enteredTo;
-  var startModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? undefined : from;
-  var endModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? from : to;
+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)
+  }) : enteredTo;
+  const startModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? void 0 : from;
+  const endModifier = isSelecting && !!enteredTo && !!from && enteredTo < from ? from : to;
   return {
     start: startModifier,
     end: endModifier,
-    entered: entered,
-    outside: undefined,
+    entered,
+    outside: void 0,
     today: NOW,
-    'entered-start': enteredStart,
-    'entered-end': enteredEnd,
-    'initial-entered': !endModifier ? startModifier : undefined,
-    initial: !entered && !endModifier ? startModifier : undefined
+    "entered-start": enteredStart,
+    "entered-end": enteredEnd,
+    "initial-entered": !endModifier ? startModifier : void 0,
+    initial: !entered && !endModifier ? startModifier : void 0
   };
-};
+};
+export {
+  getDisabledTimeOptions,
+  getModifiers,
+  getSidesState
+};

package/dist/RangePickerInput/RangePickerInput.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type RangePickerInputProps } from './RangePickerInput.types';
+import { default as React } from 'react';
+import { RangePickerInputProps } from './RangePickerInput.types';
 declare const RangePickerInput: ({ value, valueFormatOptions, showTime, onChange, onClick, highlight, texts, active, label, description, tooltip, tooltipConfig, disabled, readOnly, onFocus, allowClear, onBlur, error, errorText, preferRelativeDesc, }: RangePickerInputProps) => React.JSX.Element;
 export default RangePickerInput;

package/dist/RangePickerInput/RangePickerInput.js

@@ -1,111 +1,84 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useState } from 'react';
-import { getDefaultDataTimeOptions, useDataFormat, useTheme } from '@synerise/ds-core';
-import FormField from '@synerise/ds-form-field';
-import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { isLifetime } from '../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
-import { normalizeRange } from '../utils';
-import * as S from './RangePickerInput.styles';
-var RangePickerInput = function RangePickerInput(_ref) {
-  var value = _ref.value,
-    valueFormatOptions = _ref.valueFormatOptions,
-    showTime = _ref.showTime,
-    onChange = _ref.onChange,
-    onClick = _ref.onClick,
-    highlight = _ref.highlight,
-    texts = _ref.texts,
-    active = _ref.active,
-    label = _ref.label,
-    description = _ref.description,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    onFocus = _ref.onFocus,
-    _ref$allowClear = _ref.allowClear,
-    allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
-    onBlur = _ref.onBlur,
-    error = _ref.error,
-    errorText = _ref.errorText,
-    _ref$preferRelativeDe = _ref.preferRelativeDesc,
-    preferRelativeDesc = _ref$preferRelativeDe === void 0 ? false : _ref$preferRelativeDe;
-  var theme = useTheme();
-  var _useDataFormat = useDataFormat(),
-    formatValue = _useDataFormat.formatValue;
-  var dateRangeValue = value ? normalizeRange(value) : value;
-  var _useState = useState(false),
-    hovered = _useState[0],
-    setHovered = _useState[1];
-  var showError = error || !!errorText;
-  var hasValue = (dateRangeValue == null ? void 0 : dateRangeValue.from) && (dateRangeValue == null ? void 0 : dateRangeValue.to);
-  var handleIconMouseEnter = useCallback(function () {
-    return setHovered(true);
-  }, []);
-  var handleIconMouseLeave = useCallback(function () {
-    return setHovered(false);
-  }, []);
-  var handleClear = useCallback(function (event) {
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import { useTheme, useDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
+import FormField from "@synerise/ds-form-field";
+import Icon, { ArrowRightS, Close3S, CalendarM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { isLifetime } from "../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js";
+import { normalizeRange } from "../utils.js";
+import { DateValue, DateWrapper, Container, RangeInputWrapper, IconSeparator, ClearIconWrapper, DefaultIconWrapper } from "./RangePickerInput.styles.js";
+const RangePickerInput = ({
+  value,
+  valueFormatOptions,
+  showTime,
+  onChange,
+  onClick,
+  highlight,
+  texts,
+  active,
+  label,
+  description,
+  tooltip,
+  tooltipConfig,
+  disabled,
+  readOnly,
+  onFocus,
+  allowClear = true,
+  onBlur,
+  error,
+  errorText,
+  preferRelativeDesc = false
+}) => {
+  const theme = useTheme();
+  const {
+    formatValue
+  } = useDataFormat();
+  const dateRangeValue = value ? normalizeRange(value) : value;
+  const [hovered, setHovered] = useState(false);
+  const showError = error || !!errorText;
+  const hasValue = dateRangeValue?.from && dateRangeValue?.to;
+  const handleIconMouseEnter = useCallback(() => setHovered(true), []);
+  const handleIconMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClear = useCallback((event) => {
     event.stopPropagation();
-    onChange && onChange(undefined);
+    onChange && onChange(void 0);
   }, [onChange]);
-  var getText = useCallback(function (dateToDisplay) {
-    var dateValue = dateToDisplay ? new Date(dateToDisplay) : new Date();
-    return formatValue(dateValue, _extends({}, getDefaultDataTimeOptions(showTime), valueFormatOptions));
+  const getText = useCallback((dateToDisplay) => {
+    const dateValue = dateToDisplay ? new Date(dateToDisplay) : /* @__PURE__ */ new Date();
+    return formatValue(dateValue, {
+      ...getDefaultDataTimeOptions(showTime),
+      ...valueFormatOptions
+    });
   }, [showTime, formatValue, valueFormatOptions]);
-  var renderFromDate = useCallback(function () {
-    var isFromDateDefined = dateRangeValue && dateRangeValue.from;
-    var text = dateRangeValue && isFromDateDefined ? /*#__PURE__*/React.createElement(S.DateValue, null, getText(dateRangeValue.from)) : texts == null ? void 0 : texts.startDatePlaceholder;
-    return /*#__PURE__*/React.createElement(S.DateWrapper, {
-      highlight: active && !disabled && !isFromDateDefined && highlight
-    }, text);
+  const renderFromDate = useCallback(() => {
+    const isFromDateDefined = dateRangeValue && dateRangeValue.from;
+    const text = dateRangeValue && isFromDateDefined ? /* @__PURE__ */ jsx(DateValue, { children: getText(dateRangeValue.from) }) : texts?.startDatePlaceholder;
+    return /* @__PURE__ */ jsx(DateWrapper, { highlight: active && !disabled && !isFromDateDefined && highlight, children: text });
   }, [dateRangeValue, getText, active, disabled, texts, highlight]);
-  var renderEndDate = useCallback(function () {
-    var isEndDateDefined = dateRangeValue && dateRangeValue.to;
-    var isFromDateDefined = dateRangeValue && dateRangeValue.from;
-    var text = isEndDateDefined && dateRangeValue ? /*#__PURE__*/React.createElement(S.DateValue, null, getText(dateRangeValue.to)) : texts == null ? void 0 : texts.endDatePlaceholder;
-    return /*#__PURE__*/React.createElement(S.DateWrapper, {
-      highlight: active && !!isFromDateDefined && !isEndDateDefined && highlight
-    }, text);
+  const renderEndDate = useCallback(() => {
+    const isEndDateDefined = dateRangeValue && dateRangeValue.to;
+    const isFromDateDefined = dateRangeValue && dateRangeValue.from;
+    const text = isEndDateDefined && dateRangeValue ? /* @__PURE__ */ jsx(DateValue, { children: getText(dateRangeValue.to) }) : texts?.endDatePlaceholder;
+    return /* @__PURE__ */ jsx(DateWrapper, { highlight: active && !!isFromDateDefined && !isEndDateDefined && highlight, children: text });
   }, [dateRangeValue, getText, active, texts, highlight]);
-  var placeholder = useMemo(function () {
+  const placeholder = useMemo(() => {
     if (isLifetime(value)) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, (texts == null ? void 0 : texts.allTime) || 'Lifetime');
+      return /* @__PURE__ */ jsx(Fragment, { children: texts?.allTime || "Lifetime" });
     }
-    return /*#__PURE__*/React.createElement(React.Fragment, null, preferRelativeDesc && (dateRangeValue == null ? void 0 : dateRangeValue.translationKey) && ((texts == null ? void 0 : texts[dateRangeValue.translationKey]) || (dateRangeValue == null ? void 0 : dateRangeValue.translationKey)) + " (", renderFromDate(), /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(ArrowRightS, null),
-      color: theme.palette['grey-400']
-    }), renderEndDate(), preferRelativeDesc && (dateRangeValue == null ? void 0 : dateRangeValue.translationKey) && value && ')');
-  }, [value, preferRelativeDesc, dateRangeValue == null ? void 0 : dateRangeValue.translationKey, texts, renderFromDate, theme.palette, renderEndDate]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormField, {
-    errorText: errorText,
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig,
-    description: description
-  }, /*#__PURE__*/React.createElement(S.Container, {
-    tabIndex: 0,
-    onFocus: onFocus,
-    onClick: !disabled ? onClick : undefined,
-    onBlur: onBlur,
-    "data-testid": "date-range-picker-input-wrapper",
-    onMouseEnter: handleIconMouseEnter,
-    onMouseLeave: handleIconMouseLeave
-  }, /*#__PURE__*/React.createElement(S.RangeInputWrapper, {
-    error: showError,
-    disabled: disabled,
-    active: !!highlight && !disabled,
-    tabIndex: disabled ? -1 : 0,
-    focus: active && !disabled
-  }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), !readOnly && !disabled && hovered && hasValue && allowClear ? /*#__PURE__*/React.createElement(Tooltip, {
-    title: texts == null ? void 0 : texts.clear
-  }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Close3S, null),
-    "data-testid": "date-range-picker-input-clear",
-    onClick: handleClear
-  }))) : /*#__PURE__*/React.createElement(S.DefaultIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CalendarM, null),
-    color: theme.palette['grey-600']
-  }))))));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      preferRelativeDesc && dateRangeValue?.translationKey && `${texts?.[dateRangeValue.translationKey] || dateRangeValue?.translationKey} (`,
+      renderFromDate(),
+      /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrowRightS, {}), color: theme.palette["grey-400"] }),
+      renderEndDate(),
+      preferRelativeDesc && dateRangeValue?.translationKey && value && ")"
+    ] });
+  }, [value, preferRelativeDesc, dateRangeValue?.translationKey, texts, renderFromDate, theme.palette, renderEndDate]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(FormField, { errorText, label, tooltip, tooltipConfig, description, children: /* @__PURE__ */ jsx(Container, { tabIndex: 0, onFocus, onClick: !disabled ? onClick : void 0, onBlur, "data-testid": "date-range-picker-input-wrapper", onMouseEnter: handleIconMouseEnter, onMouseLeave: handleIconMouseLeave, children: /* @__PURE__ */ jsxs(RangeInputWrapper, { error: showError, disabled, active: !!highlight && !disabled, tabIndex: disabled ? -1 : 0, focus: active && !disabled, children: [
+    placeholder,
+    /* @__PURE__ */ jsx(IconSeparator, {}),
+    !readOnly && !disabled && hovered && hasValue && allowClear ? /* @__PURE__ */ jsx(Tooltip, { title: texts?.clear, children: /* @__PURE__ */ jsx(ClearIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Close3S, {}), "data-testid": "date-range-picker-input-clear", onClick: handleClear }) }) }) : /* @__PURE__ */ jsx(DefaultIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CalendarM, {}), color: theme.palette["grey-600"] }) })
+  ] }) }) }) });
+};
+export {
+  RangePickerInput as default
 };
-export default RangePickerInput;

package/dist/RangePickerInput/RangePickerInput.styles.d.ts

@@ -1,16 +1,16 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ClearIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DefaultIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RangeInputWrapper: import("styled-components").StyledComponent<"div", any, import("@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles").InputWrapperProps & {
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ClearIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DefaultIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RangeInputWrapper: import('styled-components').StyledComponent<"div", any, import('@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles').InputWrapperProps & {
     error?: boolean;
     focus?: boolean;
     disabled?: boolean;
     hover?: boolean;
     active?: boolean;
 }, never>;
-export declare const DateWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const DateWrapper: import('styled-components').StyledComponent<"div", any, {
     highlight?: boolean;
 }, never>;
-export declare const DateValue: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconSeparator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DateValue: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const IconSeparator: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/RangePickerInput/RangePickerInput.styles.js

@@ -1,44 +1,44 @@
-import styled from 'styled-components';
-import { InputWrapper } from '@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles';
-export var Container = styled.div.withConfig({
+import styled from "styled-components";
+import { InputWrapper } from "@synerise/ds-input/dist/InputMultivalue/InputMultivalue.styles";
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__Container",
   componentId: "sc-1b9h1ef-0"
 })([""]);
-export var ClearIconWrapper = styled.div.withConfig({
+const ClearIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__ClearIconWrapper",
   componentId: "sc-1b9h1ef-1"
-})(["margin-left:3px;.ds-icon > svg{fill:", ";}&:hover{.ds-icon > svg{fill:", ";}}"], function (props) {
-  return props.theme.palette['red-600'];
-}, function (props) {
-  return props.theme.palette['red-600'];
-});
-export var DefaultIconWrapper = styled.div.withConfig({
+})(["margin-left:3px;.ds-icon > svg{fill:", ";}&:hover{.ds-icon > svg{fill:", ";}}"], (props) => props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const DefaultIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__DefaultIconWrapper",
   componentId: "sc-1b9h1ef-2"
-})(["margin-left:3px;&&:hover{.ds-icon > svg{fill:", ";}}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var RangeInputWrapper = styled(InputWrapper).withConfig({
+})(["margin-left:3px;&&:hover{.ds-icon > svg{fill:", ";}}"], (props) => props.theme.palette["grey-600"]);
+const RangeInputWrapper = /* @__PURE__ */ styled(InputWrapper).withConfig({
   displayName: "RangePickerInputstyles__RangeInputWrapper",
   componentId: "sc-1b9h1ef-3"
 })(["display:flex;align-items:center;&{opacity:1;padding:2px 8px 2px 12px;}", "{opacity:0.4;}"], DefaultIconWrapper);
-export var DateWrapper = styled.div.withConfig({
+const DateWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__DateWrapper",
   componentId: "sc-1b9h1ef-4"
-})(["color:", ";"], function (props) {
-  return props.highlight ? props.theme.palette['blue-600'] : props.theme.palette['grey-500'];
-});
-export var DateValue = styled.div.withConfig({
+})(["color:", ";"], (props) => props.highlight ? props.theme.palette["blue-600"] : props.theme.palette["grey-500"]);
+const DateValue = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__DateValue",
   componentId: "sc-1b9h1ef-5"
-})(["color:", ";"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var IconSeparator = styled.div.withConfig({
+})(["color:", ";"], (props) => props.theme.palette["grey-600"]);
+const IconSeparator = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__IconSeparator",
   componentId: "sc-1b9h1ef-6"
 })(["display:flex;flex:1;"]);
-export var SuffixWrapper = styled.div.withConfig({
+const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "RangePickerInputstyles__SuffixWrapper",
   componentId: "sc-1b9h1ef-7"
-})([""]);
+})([""]);
+export {
+  ClearIconWrapper,
+  Container,
+  DateValue,
+  DateWrapper,
+  DefaultIconWrapper,
+  IconSeparator,
+  RangeInputWrapper,
+  SuffixWrapper
+};

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

@@ -1,8 +1,8 @@
-import type { CSSProperties, FocusEventHandler, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
-import type { DateToFormatOptions } from '@synerise/ds-core';
-import type { FormFieldCommonProps } from '@synerise/ds-form-field';
-import type { Texts } from '../DateRangePicker.types';
-import type { DateFilter, DateRange } from '../date.types';
+import { CSSProperties, FocusEventHandler, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import { DateToFormatOptions } from '@synerise/ds-core';
+import { FormFieldCommonProps } from '@synerise/ds-form-field';
+import { Texts } from '../DateRangePicker.types';
+import { DateFilter, DateRange } from '../date.types';
 export type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
     /**

package/dist/RangePickerInput/RangePickerInput.types.js

@@ -1 +1 @@
-export {};
+