@ssa-ui-kit/core 2.31.0 → 2.33.0

package/dist/index.js

@@ -1102,6 +1102,7 @@ __webpack_require__.d(Field_index_parts_namespaceObject, {
 var JsonSchemaForm_namespaceObject = {};
 __webpack_require__.r(JsonSchemaForm_namespaceObject);
 __webpack_require__.d(JsonSchemaForm_namespaceObject, {
+  DEFAULT_AVATAR_SIZE: () => (DEFAULT_AVATAR_SIZE),
   Fields: () => (fields),
   Form: () => (JsonSchemaForm_Form),
   Templates: () => (templates),
@@ -8226,7 +8227,8 @@ const useTooltip = props => {
     size = 'small',
     hasArrow = true,
     arrowProps = {},
-    isOpen: isInitOpen = false
+    isOpen: isInitOpen = false,
+    allowHoverContent = false
   } = props || {};
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const arrowRef = (0,external_react_namespaceObject.useRef)(null);
@@ -8244,7 +8246,8 @@ const useTooltip = props => {
   } = floatingData;
   const hover = (0,external_floating_ui_react_namespaceObject.useHover)(context, {
     enabled: enableHover,
-    move: true
+    move: true,
+    handleClose: allowHoverContent ? (0,external_floating_ui_react_namespaceObject.safePolygon)() : undefined
   });
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
     enabled: enableClick
@@ -14350,54 +14353,72 @@ function PersonInfo_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have t
 
 
 const PersonInfoBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb12"
+  target: "ej2kihb15"
 } : 0)( true ? {
   name: "3w0yoi",
   styles: "display:flex;flex-direction:column;gap:8px"
 } : 0);
 const PersonInfoHeader = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb11"
+  target: "ej2kihb14"
 } : 0)( true ? {
   name: "1ocjxm6",
   styles: "display:flex;align-items:flex-start;gap:8px"
 } : 0);
 const styles_IconWrapper = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb10"
+  target: "ej2kihb13"
 } : 0)( true ? {
   name: "13ltyg2",
   styles: "display:flex;align-items:flex-start;flex-shrink:0"
 } : 0);
 const styles_TitleWrapper = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb9"
+  target: "ej2kihb12"
 } : 0)( true ? {
   name: "1tcizyl",
   styles: "display:flex;flex-direction:column;gap:4px;flex:1"
 } : 0);
 const Title = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb8"
+  target: "ej2kihb11"
 } : 0)( true ? {
   name: "edklr6",
   styles: "font-size:14px;font-weight:600;line-height:19px"
 } : 0);
+const Row = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb10"
+} : 0)( true ? {
+  name: "1j5vobt",
+  styles: "display:flex;align-items:center;gap:4px"
+} : 0);
 const TextBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb7"
+  target: "ej2kihb9"
 } : 0)( true ? {
   name: "1bzpq77",
   styles: "font-size:14px;font-weight:400;line-height:19px"
 } : 0);
 const ValueWithCounter = /*#__PURE__*/base_default()("div",  true ? {
-  target: "ej2kihb6"
+  target: "ej2kihb8"
 } : 0)( true ? {
   name: "1j5vobt",
   styles: "display:flex;align-items:center;gap:4px"
 } : 0);
 const Counter = /*#__PURE__*/base_default()(TextBase.withComponent('span',  true ? {
-  target: "ej2kihb13"
+  target: "ej2kihb16"
 } : 0),  true ? {
-  target: "ej2kihb5"
+  target: "ej2kihb7"
 } : 0)("color:", ({
   theme
-}) => theme.colors.greyDropdownFocused, ";margin-left:5px;" + ( true ? "" : 0));
+}) => theme.colors.greyDropdownFocused, ";margin-left:5px;cursor:pointer;" + ( true ? "" : 0));
+const CounterTooltipContent = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb6"
+} : 0)( true ? {
+  name: "1oeds5o",
+  styles: "min-width:220px;padding:12px"
+} : 0);
+const CounterTooltipList = /*#__PURE__*/base_default()("div",  true ? {
+  target: "ej2kihb5"
+} : 0)( true ? {
+  name: "1acx518",
+  styles: "display:flex;flex-direction:column;gap:8px;height:auto;max-height:220px;overflow:hidden;overflow-y:auto;padding-right:4px"
+} : 0);
 const AttributesList = /*#__PURE__*/base_default()("div",  true ? {
   target: "ej2kihb4"
 } : 0)( true ? {
@@ -14441,6 +14462,29 @@ const CustomBadge = /*#__PURE__*/base_default()("div",  true ? {
   } = BADGE_COLORS(theme)[colorName];
   return bg;
 }, ";" + ( true ? "" : 0));
+const personInfoValueLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  display: 'inline-flex',
+  alignItems: 'center',
+  '&:hover': {
+    color: theme.colors.blue
+  }
+});
+const avatarWrapperLinkStyles = theme => ({
+  textDecoration: 'none',
+  color: theme.colors.greyDarker,
+  cursor: 'pointer',
+  transition: 'color 0.2s ease',
+  '&:hover': {
+    color: theme.colors.blue,
+    '& > div:last-child': {
+      color: theme.colors.blue
+    }
+  }
+});
 ;// ./src/components/PersonInfo/PersonInfoIcon.tsx
 
 
@@ -14465,17 +14509,25 @@ const PersonInfoIcon = ({
 
 const PersonInfoValue = ({
   value,
-  counter,
   css,
-  counterCss
+  linkAttributes
 }) => {
-  return (0,jsx_runtime_namespaceObject.jsxs)(TextBase, {
-    css: css,
-    children: [value, counter && (0,jsx_runtime_namespaceObject.jsxs)(Counter, {
-      css: counterCss,
-      children: [" ", counter]
-    })]
-  });
+  const isLink = Boolean(linkAttributes?.href);
+  return (0,jsx_runtime_namespaceObject.jsx)(TextBase, {
+    css: [isLink ? personInfoValueLinkStyles : undefined, css,  true ? "" : 0,  true ? "" : 0],
+    ...(linkAttributes ?? {}),
+    children: value
+  });
+};
+;// ./src/components/PersonInfo/helpers.ts
+const getLinkAttributes = (link, openLinkInNewTab) => {
+  const isLink = Boolean(link);
+  return isLink ? {
+    as: 'a',
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined,
+    rel: openLinkInNewTab ? 'noreferrer' : undefined
+  } : {};
 };
 ;// ./src/components/PersonInfo/PersonInfoAvatar.tsx
 
@@ -14483,22 +14535,34 @@ const PersonInfoValue = ({
 
 
 
+
 const PersonInfoAvatar = ({
   avatar,
   value,
-  counter,
-  styles
+  styles,
+  link,
+  openLinkInNewTab
 }) => {
+  const hasAvatar = Boolean(avatar);
+  const hasValue = Boolean(value);
+  const isLink = Boolean(link);
+  const linkAttributes = getLinkAttributes(link, openLinkInNewTab);
+  if (!hasAvatar && !hasValue) return null;
+  const valueNode = hasValue ? (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
+    value: value,
+    css: hasAvatar ? styles?.avatarName : styles?.value,
+    linkAttributes: !hasAvatar ? linkAttributes : undefined
+  }) : null;
+  if (!hasAvatar) {
+    return valueNode;
+  }
   return (0,jsx_runtime_namespaceObject.jsxs)(styles_AvatarWrapper, {
+    css: isLink ? avatarWrapperLinkStyles : undefined,
+    ...linkAttributes,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
       size: 24,
       image: avatar
-    }), value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
-      value: value,
-      counter: counter,
-      css: styles?.avatarName,
-      counterCss: styles?.counter
-    })]
+    }), valueNode]
   });
 };
 ;// ./src/components/PersonInfo/PersonInfoBadges.tsx
@@ -14535,6 +14599,100 @@ const PersonInfoBadges = ({
     })
   });
 };
+;// ./src/components/ImageItem/ImageItem.tsx
+function ImageItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+
+
+
+var ImageItem_ref =  true ? {
+  name: "c5ejfv",
+  styles: "gap:8px;text-decoration:none"
+} : 0;
+const ImageItem = ({
+  children,
+  image,
+  avatarSize = 24,
+  link = '',
+  openLinkInNewTab = false,
+  className
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const additionalProps = link ? {
+    href: link,
+    target: openLinkInNewTab ? '_blank' : undefined
+  } : {};
+  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+    css: ImageItem_ref,
+    as: link ? 'a' : 'div',
+    className: className,
+    "data-testid": "image-item",
+    ...additionalProps,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+      size: avatarSize,
+      image: image
+    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
+      css: /*#__PURE__*/(0,react_namespaceObject.css)({
+        color: theme.colors.greyDarker,
+        fontSize: 14,
+        fontWeight: 500,
+        cursor: link ? 'pointer' : 'default',
+        '&:hover': {
+          color: link ? theme.colors.blue : theme.colors.greyDarker
+        }
+      },  true ? "" : 0,  true ? "" : 0),
+      children: children
+    })]
+  });
+};
+;// ./src/components/PersonInfo/PersonInfoCounter.tsx
+
+
+
+
+
+
+
+const PersonInfoCounter = ({
+  counterTooltip,
+  css
+}) => {
+  const tooltipUsers = counterTooltip?.users ?? [];
+  const hasTooltipUsers = tooltipUsers.length > 0;
+  const counterValue = hasTooltipUsers ? `+${tooltipUsers.length}` : null;
+  if (!counterValue) {
+    return null;
+  }
+  const tooltipBody = (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipList, {
+    "data-testid": "person-info-counter-tooltip-list",
+    children: tooltipUsers.map(user => (0,jsx_runtime_namespaceObject.jsx)(ImageItem, {
+      image: user.avatar,
+      link: user.link,
+      openLinkInNewTab: user.openLinkInNewTab,
+      children: user.name
+    }, user.id))
+  });
+  const counterNode = (0,jsx_runtime_namespaceObject.jsx)(Counter, {
+    css: css,
+    "data-testid": "person-info-counter",
+    children: counterValue
+  });
+  return (0,jsx_runtime_namespaceObject.jsxs)(Tooltip_Tooltip, {
+    enableHover: true,
+    enableClick: false,
+    allowHoverContent: true,
+    placement: "top",
+    size: "medium",
+    hasArrow: true,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(TooltipTrigger_TooltipTrigger, {
+      children: counterNode
+    }), (0,jsx_runtime_namespaceObject.jsx)(TooltipContent_TooltipContent, {
+      children: (0,jsx_runtime_namespaceObject.jsx)(CounterTooltipContent, {
+        children: tooltipBody
+      })
+    })]
+  });
+};
 ;// ./src/components/PersonInfo/PersonInfo.tsx
 
 
@@ -14549,11 +14707,13 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
   value,
   badges,
   avatar,
-  counter,
+  counterTooltip,
   attributes,
   description,
   styles,
   className,
+  link,
+  openLinkInNewTab,
   ...props
 }, ref) {
   return (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBase, {
@@ -14567,16 +14727,17 @@ const PersonInfo = /*#__PURE__*/external_react_default().forwardRef(function Per
         children: [(0,jsx_runtime_namespaceObject.jsx)(Title, {
           css: styles?.title,
           children: title
-        }), avatar && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
-          avatar: avatar,
-          value: value,
-          counter: counter,
-          styles: styles
-        }), !avatar && value && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoValue, {
-          value: value,
-          counter: counter,
-          css: styles?.value,
-          counterCss: styles?.counter
+        }), (0,jsx_runtime_namespaceObject.jsxs)(Row, {
+          children: [(0,jsx_runtime_namespaceObject.jsx)(PersonInfoAvatar, {
+            avatar: avatar,
+            value: value,
+            styles: styles,
+            link: link,
+            openLinkInNewTab: openLinkInNewTab
+          }), counterTooltip && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoCounter, {
+            counterTooltip: counterTooltip,
+            css: styles?.counter
+          })]
         }), badges && (0,jsx_runtime_namespaceObject.jsx)(PersonInfoBadges, {
           badges: badges,
           styles: styles
@@ -14814,8 +14975,8 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 const TriggerWrapper = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e19l41fq0"
 } : 0)( true ? {
-  name: "1utaypi",
-  styles: "padding:14px"
+  name: "1h91tay",
+  styles: "padding:14px;cursor:default"
 } : 0);
 ;// ./src/components/DateRangePicker/utils/dates.ts
 
@@ -14907,7 +15068,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   nameFrom: '',
   nameTo: '',
   maskOptions: {},
-  openCalendarMode: 'icon',
   inputFromRef: {
     current: null
   },
@@ -14936,9 +15096,6 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
     day: 1
   }),
   currentIndex: 0,
-  handleSetIsOpen: () => {
-    // no-op
-  },
   handleToggleOpen: () => {
     // no-op
   },
@@ -14948,6 +15105,13 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   setCalendarType: () => {
     // no-op
   },
+  rangeSelectionStep: null,
+  setRangeSelectionStep: () => {
+    // no-op
+  },
+  clearInputValue: () => {
+    // no-op
+  },
   setCalendarViewDateTime: () => {
     // no-op
   },
@@ -14956,7 +15120,8 @@ const DateRangePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.cr
   },
   setLastFocusedElement: () => {
     // no-op
-  }
+  },
+  allowReverseSelection: false
 });
 ;// ./src/components/DateRangePicker/useDateRangePickerContext.tsx
 
@@ -15014,6 +15179,88 @@ const useRangeHighlighting = () => {
     hoveredDate
   };
 };
+;// ./src/components/DateRangePicker/hooks/useRangeSelection.ts
+
+const useRangeSelection = ({
+  createNewDate,
+  getComparisonFormat
+}) => {
+  const {
+    dateTime,
+    calendarViewDateTime,
+    setCalendarViewDateTime,
+    setDateTime,
+    setIsOpen,
+    setLastFocusedElement,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue,
+    allowReverseSelection = false,
+    onChange
+  } = useDateRangePickerContext();
+  const handleRangeSelect = selectedValue => {
+    const newDate = createNewDate(selectedValue);
+    if (!newDate) return;
+
+    // Range selection logic
+    const isSelectingStart = rangeSelectionStep === 'start';
+    if (isSelectingStart) {
+      clearInputValue('to');
+      setLastFocusedElement('to');
+      setRangeSelectionStep('end');
+    }
+    let newDateTuple = isSelectingStart ? [newDate, undefined] : [dateTime[0], newDate];
+    setCalendarViewDateTime(isSelectingStart ? [newDate, newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
+
+    // Check if dates are in reverse order
+    const isReversed = newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() > newDateTuple[1].toMillis();
+    if (isReversed) {
+      if (allowReverseSelection) {
+        // Auto-swap dates when reverse selection is allowed
+        newDateTuple = [newDateTuple[1], newDateTuple[0]];
+      } else if (!isSelectingStart) {
+        // User selected an earlier date - update start date
+        newDateTuple = [newDateTuple[1], undefined];
+        setLastFocusedElement('to');
+        setRangeSelectionStep('end');
+        setCalendarViewDateTime([newDateTuple[0], newDateTuple[0]]);
+      }
+    }
+    setDateTime(newDateTuple);
+    const normalizeToMidnight = dt => dt.set({
+      hour: 0,
+      minute: 0,
+      second: 0,
+      millisecond: 0
+    }).toJSDate();
+
+    // Call onChange when a date is selected from calendar
+    if (isSelectingStart && newDateTuple[0]) {
+      // First date selected
+      onChange?.([normalizeToMidnight(newDateTuple[0]), null]);
+    } else if (newDateTuple[0] && newDateTuple[1] && newDateTuple[0].toMillis() <= newDateTuple[1].toMillis()) {
+      // Both dates selected and in correct order
+      onChange?.([normalizeToMidnight(newDateTuple[0]), normalizeToMidnight(newDateTuple[1])]);
+      setRangeSelectionStep(null);
+      setIsOpen(false);
+    }
+  };
+  const getDateSelectionState = currentDT => {
+    const comparisonFormat = getComparisonFormat();
+    const isCalendarFirstDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[0]?.toFormat(comparisonFormat);
+    const isCalendarSecondDateSelected = currentDT.toFormat(comparisonFormat) === dateTime[1]?.toFormat(comparisonFormat);
+    const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+    return {
+      isCalendarFirstDateSelected,
+      isCalendarSecondDateSelected,
+      isCalendarDateSelected
+    };
+  };
+  return {
+    handleRangeSelect,
+    getDateSelectionState
+  };
+};
 ;// ./src/components/DateRangePicker/components/DaysView.tsx
 function components_DaysView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -15040,15 +15287,9 @@ var components_DaysView_ref3 =  true ? {
 const DaysView_DaysView = () => {
   const weekDays = dates_getWeekDays();
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
-    lastFocusedElement,
-    currentCalendarViewDT,
-    setCalendarViewDateTime,
-    setDateTime,
-    setIsOpen
+    currentCalendarViewDT
   } = useDateRangePickerContext();
   const currentDate = currentCalendarViewDT.toJSDate();
   const currentMonth = currentDate?.getMonth();
@@ -15059,22 +15300,23 @@ const DaysView_DaysView = () => {
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedDay => currentCalendarViewDT.set({
+      day: Number(selectedDay)
+    }),
+    getComparisonFormat: () => 'D'
+  });
   const handleDaySelect = event => {
     const {
       target
     } = event;
-    const selectedDay = Number(target.innerHTML);
+    const selectedDay = target.innerHTML;
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
     if (isEnabled) {
-      const newDate = currentCalendarViewDT.set({
-        day: selectedDay
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      handleRangeSelect(selectedDay);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
@@ -15088,16 +15330,18 @@ const DaysView_DaysView = () => {
       css: components_DaysView_ref3,
       onClick: handleDaySelect,
       children: dates.map((currentDate, index) => {
-        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate);
+        const currentDT = external_luxon_namespaceObject.DateTime.fromJSDate(currentDate).startOf('day');
         const calendarDate = currentDT.toFormat('D');
         const calendarDay = currentDate.getDate();
         const calendarMonth = currentDate.getMonth();
         const ariaLabel = currentDT.toLocaleString(external_luxon_namespaceObject.DateTime.DATE_HUGE);
         const isCalendarDateNow = nowDate === calendarDate;
         const isCalendarMonth = currentMonth === calendarMonth;
-        const isCalendarFirstDateSelected = calendarDate === dateTime[0]?.toFormat('D');
-        const isCalendarSecondDateSelected = calendarDate === dateTime[1]?.toFormat('D');
-        const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+        const {
+          isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected,
+          isCalendarDateSelected
+        } = getDateSelectionState(currentDT);
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
           isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
@@ -15146,24 +15390,36 @@ var components_MonthsView_ref =  true ? {
 } : 0;
 const MonthsView_MonthsView = () => {
   const {
-    dateTime,
-    calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
     lastFocusedElement,
     currentCalendarViewDT,
+    calendarViewDateTime,
     rangePickerType,
     setCalendarType,
     setCalendarViewDateTime,
-    onMonthChange,
-    setDateTime,
-    setIsOpen
+    onMonthChange
   } = useDateRangePickerContext();
   const {
     handleDateHover,
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedMonth => {
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
+      const newMonth = currentCalendarViewDT?.set({
+        month: monthNumber + 1
+      });
+      return newMonth?.set({
+        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
+      });
+    },
+    getComparisonFormat: () => 'yyyy-MM'
+  });
   const handleMonthSelect = event => {
     const {
       target
@@ -15174,29 +15430,20 @@ const MonthsView_MonthsView = () => {
       return;
     }
     const selectedMonth = target.innerHTML;
-    const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
     if (rangePickerType === 'days') {
+      // Navigation case: selecting month navigates to days view
+      const monthNumber = constants_MONTHS.findIndex(month => month === selectedMonth);
       const newDate = currentCalendarViewDT?.set({
         month: monthNumber + 1
       });
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
       if (newDate) {
+        setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
         onMonthChange?.(newDate.toJSDate());
+        setCalendarType('days');
       }
-      setCalendarType('days');
     } else {
-      const newMonth = currentCalendarViewDT?.set({
-        month: monthNumber + 1
-      });
-      const newDate = newMonth?.set({
-        day: lastFocusedElement === 'from' ? 1 : newMonth.daysInMonth
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting month completes the range
+      handleRangeSelect(selectedMonth);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -15211,8 +15458,10 @@ const MonthsView_MonthsView = () => {
       const isMinMonthReached = dateMinDT ? currentMonthDT.month < dateMinDT.month && currentMonthDT.year === dateMinDT.year : false;
       const isMaxMonthReached = dateMaxDT ? currentMonthDT.month > dateMaxDT.month && currentMonthDT.year === dateMaxDT.year : false;
       const isAriaDisabled = isMinMonthReached || isMaxMonthReached;
-      const isCalendarFirstDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[0]?.toFormat('yyyy-MM');
-      const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === dateTime[1]?.toFormat('yyyy-MM');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentMonthDT);
       const classNames = getClassNames(currentMonthDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -15248,7 +15497,6 @@ var components_YearsView_ref =  true ? {
 const YearsView_YearsView = () => {
   const {
     rangePickerType,
-    dateTime,
     calendarViewDateTime,
     currentCalendarViewDT,
     dateMinParts,
@@ -15257,9 +15505,7 @@ const YearsView_YearsView = () => {
     lastFocusedElement,
     setCalendarType,
     setCalendarViewDateTime,
-    onYearChange,
-    setDateTime,
-    setIsOpen
+    onYearChange
   } = useDateRangePickerContext();
   const wrapper = (0,external_react_namespaceObject.useRef)(null);
   const yearsList = dates_getYearsList({
@@ -15271,6 +15517,24 @@ const YearsView_YearsView = () => {
     getClassNames,
     isHighlightDate
   } = useRangeHighlighting();
+  const {
+    handleRangeSelect,
+    getDateSelectionState
+  } = useRangeSelection({
+    createNewDate: selectedYear => {
+      const newYear = currentCalendarViewDT?.set({
+        year: Number(selectedYear)
+      });
+      return newYear?.set(lastFocusedElement === 'from' ? {
+        day: 1,
+        month: 1
+      } : {
+        day: 31,
+        month: 12
+      });
+    },
+    getComparisonFormat: () => 'yyyy'
+  });
   (0,external_react_namespaceObject.useEffect)(() => {
     if (currentCalendarViewDT && wrapper.current) {
       wrapper.current.querySelector('[aria-current=date]')?.scrollIntoView({
@@ -15278,15 +15542,16 @@ const YearsView_YearsView = () => {
         block: 'center'
       });
     }
-  }, [calendarViewDateTime, lastFocusedElement]);
+  }, [calendarViewDateTime, lastFocusedElement, currentCalendarViewDT]);
   const handleYearSelect = event => {
     const {
       target
     } = event;
-    const selectedYear = Number(target.innerHTML);
+    const selectedYear = target.innerHTML;
     if (rangePickerType !== 'years') {
+      // Navigation case: selecting year navigates to months view
       const newDate = currentCalendarViewDT.set({
-        year: selectedYear
+        year: Number(selectedYear)
       });
       setCalendarType('months');
       setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
@@ -15294,22 +15559,8 @@ const YearsView_YearsView = () => {
         onYearChange?.(newDate.toJSDate());
       }
     } else {
-      const newYear = currentCalendarViewDT?.set({
-        year: selectedYear
-      });
-      const newDate = newYear?.set(lastFocusedElement === 'from' ? {
-        day: 1,
-        month: 1
-      } : {
-        day: 31,
-        month: 12
-      });
-      const newDateTuple = lastFocusedElement === 'from' ? [newDate, dateTime[1]] : [dateTime[0], newDate];
-      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, dateTime[1] ? calendarViewDateTime?.[1] : newDate] : [dateTime[0] ? calendarViewDateTime?.[0] : newDate, newDate]);
-      setDateTime(newDateTuple);
-      if (newDateTuple[0] && newDateTuple[1]) {
-        setIsOpen(false);
-      }
+      // Range selection case: selecting year completes the range
+      handleRangeSelect(selectedYear);
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -15327,8 +15578,10 @@ const YearsView_YearsView = () => {
       if (isCalendarYear) {
         additionalProps['aria-current'] = 'date';
       }
-      const isCalendarFirstDateSelected = year.toString() === dateTime[0]?.toFormat('yyyy');
-      const isCalendarSecondDateSelected = year.toString() === dateTime[1]?.toFormat('yyyy');
+      const {
+        isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected
+      } = getDateSelectionState(currentYearDT);
       const classNames = getClassNames(currentYearDT, {
         isCalendarFirstDateSelected,
         isCalendarSecondDateSelected
@@ -15668,24 +15921,9 @@ function TriggerInput_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried
 
 
 
-const WithTriggerPopover = ({
-  isEnabled,
-  children
-}) => {
-  return isEnabled ? (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-    asChild: true,
-    children: /*#__PURE__*/external_react_default().cloneElement(children, {
-      ...children.props
-    })
-  }) : (/*#__PURE__*/external_react_default().cloneElement(children, {
-    ...children.props
-  }));
-};
 const TriggerInput = ({
   datepickerType,
-  withPopover = false,
-  className,
-  onClick
+  className
 }) => {
   const {
     format,
@@ -15698,7 +15936,9 @@ const TriggerInput = ({
     messages,
     setLastFocusedElement,
     classNames,
-    onBlur: handleBlur
+    onBlur: handleBlur,
+    isOpen,
+    setIsOpen
   } = useDateRangePickerContext();
   const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
   const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
@@ -15720,42 +15960,55 @@ const TriggerInput = ({
     setLastFocusedElement(datepickerType);
     inputProps?.inputProps?.onFocus?.(e);
   };
-  const handleOpen = event => {
-    onClick?.(event);
-  };
-  return (0,jsx_runtime_namespaceObject.jsx)(WithTriggerPopover, {
-    isEnabled: withPopover,
-    children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
-      name: currentName,
-      placeholder: format,
-      ref: datepickerType === 'from' ? inputFromRef : inputToRef,
-      disabled: disabled,
-      register: register,
-      className: className,
-      wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
-      inputProps: {
-        onBlur: handleBlur,
-        onClick: handleOpen,
-        onFocus: handleFocus,
-        id: inputProps?.inputProps?.id || currentName,
-        'data-testid': `daterangepicker-input-${datepickerType}`,
-        autoComplete: 'off',
-        className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-          name: "15obm9d",
-          styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
-        } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
-        ...inputElementProps
+  return (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
+    name: currentName,
+    placeholder: format,
+    ref: datepickerType === 'from' ? inputFromRef : inputToRef,
+    disabled: disabled,
+    register: register,
+    className: className,
+    wrapperClassName: /*#__PURE__*/(0,css_namespaceObject.css)("display:flex;padding-left:", datepickerType === 'from' ? 0 : 14, "px;" + ( true ? "" : 0),  true ? "" : 0),
+    inputProps: {
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onClick: e => {
+        if (isOpen) {
+          setIsOpen(false);
+        }
+        inputProps?.inputProps?.onClick?.(e);
       },
-      showStatusIcon: false,
-      errors: fieldError,
-      status: fieldStatus,
-      helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
-      helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
-        name: "lhoo11",
-        styles: "&>span::first-letter{text-transform:uppercase;}"
-      } : 0),
-      ...restInputProps
-    })
+      onKeyDown: e => {
+        inputProps?.inputProps?.onKeyDown?.(e);
+      },
+      onBeforeInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onBeforeInput?.(e);
+      },
+      onInput: e => {
+        // pass-through
+        inputProps?.inputProps?.onInput?.(e);
+      },
+      onChange: e => {
+        inputProps?.inputProps?.onChange?.(e);
+      },
+      id: inputProps?.inputProps?.id || currentName,
+      'data-testid': `daterangepicker-input-${datepickerType}`,
+      autoComplete: 'off',
+      className: [/*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+        name: "15obm9d",
+        styles: "border:none!important;height:auto!important;padding:0!important;min-width:75px;line-height:16px;max-height:16px;letter-spacing:0.8px;border-radius:0!important;&::placeholder{letter-spacing:normal;}"
+      } : 0), datepickerType === 'from' ? classNames?.trigger?.inputFrom : classNames?.trigger?.inputTo].filter(Boolean).join(' '),
+      ...inputElementProps
+    },
+    showStatusIcon: false,
+    errors: fieldError,
+    status: fieldStatus,
+    helperText: fieldStatus === 'basic' ? messages?.description : messages?.error,
+    helperClassName: /*#__PURE__*/(0,css_namespaceObject.css)( true ? {
+      name: "lhoo11",
+      styles: "&>span::first-letter{text-transform:uppercase;}"
+    } : 0),
+    ...restInputProps
   });
 };
 ;// ./src/components/Field/FieldDescription.tsx
@@ -15855,8 +16108,8 @@ function Trigger_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to st
 
 
 var Trigger_ref =  true ? {
-  name: "1ldd2k6",
-  styles: "margin:0 3px"
+  name: "cx8u11",
+  styles: "margin:0 3px;cursor:pointer"
 } : 0;
 const Trigger = () => {
   const {
@@ -15866,7 +16119,6 @@ const Trigger = () => {
     lastFocusedElement,
     disabled,
     status,
-    openCalendarMode,
     isOpen,
     showCalendarIcon,
     showStatusArea,
@@ -15899,49 +16151,46 @@ const Trigger = () => {
         ref: wrapperRef,
         className: classNames?.trigger?.controlsWrapper,
         children: [(0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
-          withPopover: true,
           datepickerType: "from",
-          className: classNames?.trigger?.inputFrom,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
+          className: classNames?.trigger?.inputFrom
         }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
           name: "carrot-right",
           size: 16,
           color: disabled ? theme.colors.grey : theme.colors.greyDarker,
           className: classNames?.trigger?.arrowIcon,
+          onClick: () => {
+            if (isOpen) {
+              setIsOpen(false);
+            }
+          },
           css: Trigger_ref
         }), (0,jsx_runtime_namespaceObject.jsx)(TriggerInput, {
           datepickerType: "to",
-          className: classNames?.trigger?.inputTo,
-          onClick: () => {
-            if (!isOpen) {
-              setIsOpen(true);
-            }
-          }
-        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
-          endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-            name: "calendar",
-            size: 16,
-            color: disabled ? theme.colors.grey : theme.colors.greyDarker
-          }),
-          "data-testid": 'daterangepicker-button',
-          onClick: handleToggleOpen,
-          variant: "tertiary",
-          "aria-label": "Calendar",
-          isDisabled: disabled,
-          className: classNames?.trigger?.calendarIcon,
-          css: /*#__PURE__*/(0,react_namespaceObject.css)({
-            padding: 0,
-            margin: '0 0 0 10px',
-            height: 'auto',
-            cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
-            '&:focus::before': {
-              display: 'none'
-            }
-          },  true ? "" : 0,  true ? "" : 0)
+          className: classNames?.trigger?.inputTo
+        }), showCalendarIcon && (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+          asChild: true,
+          children: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+            endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+              name: "calendar",
+              size: 16,
+              color: disabled ? theme.colors.grey : theme.colors.greyDarker
+            }),
+            "data-testid": 'daterangepicker-button',
+            onClick: handleToggleOpen,
+            variant: "tertiary",
+            "aria-label": "Calendar",
+            isDisabled: disabled,
+            className: classNames?.trigger?.calendarIcon,
+            css: /*#__PURE__*/(0,react_namespaceObject.css)({
+              padding: 0,
+              margin: '0 0 0 10px',
+              height: 'auto',
+              cursor: disabled ? 'default' : 'pointer',
+              '&:focus::before': {
+                display: 'none'
+              }
+            },  true ? "" : 0,  true ? "" : 0)
+          })
         })]
       })
     }), showStatusArea && (0,jsx_runtime_namespaceObject.jsx)(TriggerStatusArea, {})]
@@ -15966,12 +16215,8 @@ const Content_DatePickerContent = () => {
 };
 ;// ./src/components/DateRangePicker/hooks/useDatePickerMask.tsx
 
-
 const useDatePickerMask_useDatePickerMask = ({
-  maskOptions,
-  formatIndexes,
-  dateMinParts,
-  dateMaxParts
+  maskOptions
 }) => {
   const {
     mask,
@@ -15984,28 +16229,13 @@ const useDatePickerMask_useDatePickerMask = ({
     mask,
     replacement,
     track: ({
-      data,
-      selectionStart,
-      selectionEnd,
-      value: currentValue
+      data
     }) => {
-      const isDateMask = typeof mask === 'string' && /^[_/]+$/.test(mask);
-      if (isDateMask) {
-        const newValue = currentValue.slice(0, selectionStart) + data + currentValue.slice(selectionEnd);
-        const updatedValue = (0,mask_namespaceObject.format)(newValue, {
-          mask,
-          replacement
-        });
-        const splittedValue = updatedValue.split('/');
-        const isChecked = dates_processDate({
-          day: splittedValue[formatIndexes['day']],
-          month: splittedValue[formatIndexes['month']],
-          year: splittedValue[formatIndexes['year']]
-        }, dateMinParts[formatIndexes['year']], dateMaxParts[formatIndexes['year']]);
-        return isChecked ? data : '';
-      } else {
-        return data;
-      }
+      // The mask should only format input, not validate it
+      // Validation happens on blur in useDateRangePicker.handleBlur
+      // This allows users to freely type and edit dates without blocking
+      // Return data as-is (string for insertions, null/undefined for deletions)
+      return data;
     },
     ...restMaskOptions
   });
@@ -16047,15 +16277,12 @@ const useDateRangePicker = ({
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isOpenState);
   const [status, setStatus] = (0,external_react_namespaceObject.useState)(rest.status);
   const previousOpenState = (0,external_react_namespaceObject.useRef)(isOpenState);
-  const handleSetIsOpen = open => {
-    setIsOpen(open);
-  };
+  const previousDateTime = (0,external_react_namespaceObject.useRef)([undefined, undefined]);
+  const defaultValueProcessed = (0,external_react_namespaceObject.useRef)(false);
   const {
     clearErrors,
     setError,
-    setValue,
-    resetField,
-    setFocus
+    setValue
   } = (0,external_react_hook_form_namespaceObject.useFormContext)();
   const nameFrom = `${_name}From`;
   const nameTo = `${_name}To`;
@@ -16069,7 +16296,6 @@ const useDateRangePicker = ({
   const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
   const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-  const currentName = lastFocusedElement === 'from' ? nameFrom : nameTo;
   const [dateTimeForChangeEvent, setDateTimeForChangeEvent] = (0,external_react_namespaceObject.useState)(undefined);
   const [currentError, setCurrentError] = (0,external_react_namespaceObject.useState)({
     date: null,
@@ -16082,6 +16308,7 @@ const useDateRangePicker = ({
     year: splittedFormat.findIndex(item => item === 'yyyy')
   });
   const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)(rangePickerType);
+  const [rangeSelectionStep, setRangeSelectionStep] = (0,external_react_namespaceObject.useState)(null);
   const [calendarViewDateTime, setCalendarViewDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
     day: 1
@@ -16091,14 +16318,18 @@ const useDateRangePicker = ({
   const dateMinParts = finalDateMin.split('/').map(Number);
   const dateMaxParts = finalDateMax.split('/').map(Number);
   const defaultMask = getMaskForFormat(format);
-  const maskInputRef = useDatePickerMask_useDatePickerMask({
+  // separate mask refs per input to prevent focus/typing conflicts
+  const maskInputRefFrom = useDatePickerMask_useDatePickerMask({
     maskOptions: {
       mask: defaultMask,
-      ...maskOptions
-    },
-    dateMaxParts,
-    dateMinParts,
-    formatIndexes
+      ...(maskOptions || {})
+    }
+  });
+  const maskInputRefTo = useDatePickerMask_useDatePickerMask({
+    maskOptions: {
+      mask: defaultMask,
+      ...(maskOptions || {})
+    }
   });
   const dateMaxDT = external_luxon_namespaceObject.DateTime.fromObject({
     year: dateMaxParts[formatIndexes['year']],
@@ -16152,7 +16383,7 @@ const useDateRangePicker = ({
       setError(currentName, {
         message: errorMessage
       }, {
-        shouldFocus: true
+        shouldFocus: false
       });
       setStatus('error');
       setDateTime(newDateTimeIfInvalid);
@@ -16164,7 +16395,7 @@ const useDateRangePicker = ({
         setError(currentName, {
           message: errorMessage
         }, {
-          shouldFocus: true
+          shouldFocus: false
         });
         setStatus('error');
         setDateTime(newDateTimeIfInvalid);
@@ -16172,6 +16403,33 @@ const useDateRangePicker = ({
         safeOnChange();
       } else {
         setDateTime(newDateTimeIfValid);
+        // Update calendar view to reflect the manually entered date
+        let adjustedDateTime = newDateTime.startOf('day');
+        if (adjustedDateTime < dateMinDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMinDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        if (adjustedDateTime > dateMaxDT) {
+          const {
+            year,
+            month,
+            day
+          } = dateMaxDT;
+          adjustedDateTime = adjustedDateTime.set({
+            year,
+            month,
+            day
+          });
+        }
+        setCalendarViewDateTime(currentElementType === 'from' ? [adjustedDateTime, calendarViewDateTime[1] || adjustedDateTime] : [calendarViewDateTime[0] || adjustedDateTime, adjustedDateTime]);
         clearErrors();
         setStatus('basic');
         safeOnError?.(null);
@@ -16180,26 +16438,35 @@ const useDateRangePicker = ({
     }
   };
   const handleBlur = event => {
-    event.preventDefault();
     const blurredValue = event.currentTarget.value;
+    const fieldName = event.currentTarget.name;
+    const isFromField = fieldName === nameFrom;
     if (blurredValue.length > 0) {
-      processValue(blurredValue);
+      processValue(blurredValue, isFromField ? 'from' : 'to');
+    } else {
+      // User cleared the field - clear the corresponding dateTime
+      setDateTime(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => isFromField ? [undefined, prev[1]] : [prev[0], undefined]);
+      setValue(fieldName, undefined);
+      clearErrors(fieldName);
     }
   };
   const processInputValue = (inputValue, elementName) => {
     const currentElementType = elementName || lastFocusedElement;
     const currentName = currentElementType === 'from' ? nameFrom : nameTo;
+    const currentWatchedValue = currentElementType === 'from' ? inputValueFrom : inputValueTo;
     if (typeof inputValue === 'string' && inputValue.length && inputValue.length < expectedDateLength) {
       setIsOpen(false);
-      setTimeout(() => {
-        maskInputRef.current.focus();
-      }, 10);
     }
     let newDateTime;
     if (typeof inputValue === 'string' && inputValue.length === expectedDateLength) {
       newDateTime = external_luxon_namespaceObject.DateTime.fromFormat(inputValue, luxonFormat);
-      setValue(currentName, inputValue);
-      processValue(inputValue, elementName);
+      // Avoid redundant setValue to prevent React Hook Form update loops
+      if (currentWatchedValue !== inputValue) {
+        setValue(currentName, inputValue);
+      }
+      // Do NOT validate immediately here to avoid blocking mid-edit scenarios and feedback loops.
+      // Validation will happen on blur explicitly.
     }
     const newCalendarViewDateTime = newDateTime && newDateTime.isValid ? newDateTime : undefined;
     if (newCalendarViewDateTime) {
@@ -16247,56 +16514,95 @@ const useDateRangePicker = ({
     }
   }, [inputValueTo]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    const currentIndex = lastFocusedElement === 'from' ? 0 : 1;
-    const currentInputValue = currentIndex === 0 ? inputValueFrom : inputValueTo;
-    if (dateTime?.[currentIndex]) {
-      const newValue = dateTime[currentIndex].toFormat(luxonFormat);
-      if (currentInputValue !== newValue) {
-        setValue(currentName, newValue);
+    // Only sync when dateTime actually changes (from calendar selection or programmatic change)
+    // Don't sync when only inputValue changes (user typing)
+    const dateTimeChanged = previousDateTime.current[0]?.toMillis() !== dateTime[0]?.toMillis() || previousDateTime.current[1]?.toMillis() !== dateTime[1]?.toMillis();
+
+    // Initialize on first run
+    if (previousDateTime.current[0] === undefined && previousDateTime.current[1] === undefined && (dateTime[0] !== undefined || dateTime[1] !== undefined)) {
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+      // Continue to sync on initialization
+    } else if (!dateTimeChanged) {
+      // dateTime hasn't changed, don't sync (user is typing)
+      return;
+    } else {
+      // Update previous dateTime
+      previousDateTime.current = [dateTime[0], dateTime[1]];
+    }
+    const nextFromValue = dateTime[0]?.toFormat(luxonFormat);
+    if (nextFromValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueFrom) {
+        // Input is empty - sync from dateTime
+        setValue(nameFrom, nextFromValue);
+      } else if (inputValueFrom === nextFromValue) {
+        // Already in sync - no action needed
+      } else if (inputValueFrom.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameFrom, nextFromValue);
       }
     }
-  }, [dateTime, lastFocusedElement, currentName]);
+    const nextToValue = dateTime[1]?.toFormat(luxonFormat);
+    if (nextToValue) {
+      // Sync dateTime to form when dateTime changed (calendar selection)
+      // Don't overwrite if user is actively typing (input is focused and partial)
+      const isInputFocused = inputFromRef.current && document.activeElement === inputFromRef.current || inputToRef.current && document.activeElement === inputToRef.current;
+      if (!inputValueTo) {
+        // Input is empty - sync from dateTime
+        setValue(nameTo, nextToValue);
+      } else if (inputValueTo === nextToValue) {
+        // Already in sync - no action needed
+      } else if (inputValueTo.length < expectedDateLength && isInputFocused) {
+        // User is actively typing partial input - don't overwrite
+      } else {
+        // dateTime changed (calendar selection) - sync to form
+        setValue(nameTo, nextToValue);
+      }
+    }
+  }, [dateTime, inputValueFrom, inputValueTo, luxonFormat, nameFrom, nameTo, setValue, expectedDateLength, inputFromRef, inputToRef]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (dateTime[0] && dateTime[1] && dateTime[0] > dateTime[1]) {
+      // When dates are in reverse order, swap them silently
+      // Calendar only opens via user click on icon button, not automatically
       if (lastFocusedElement === 'from') {
-        resetField(nameTo);
         setDateTime([dateTime[0], undefined]);
         setLastChangedDate([dateTime[0].toJSDate(), undefined]);
         setValue(nameTo, undefined);
-        setLastFocusedElement('to');
-        setTimeout(() => {
-          setFocus(nameTo, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       } else {
-        resetField(nameFrom);
         setDateTime([undefined, dateTime[1]]);
         setLastChangedDate([undefined, dateTime[1].toJSDate()]);
         setValue(nameFrom, undefined);
-        setLastFocusedElement('from');
-        setTimeout(() => {
-          setFocus(nameFrom, {
-            shouldSelect: true
-          });
-        }, 50);
-        setIsOpen(true);
       }
     }
-  }, [dateTime]);
+  }, [dateTime, lastFocusedElement, nameFrom, nameTo, setValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (previousOpenState.current !== isOpen) {
       if (isOpen) {
         onOpen?.();
+        setRangeSelectionStep('start');
+        setLastFocusedElement('from');
+        // Sync calendar view with current dateTime when opening
+        // This ensures preselected dates are visible in the calendar
+        if (dateTime[0] || dateTime[1]) {
+          setCalendarViewDateTime([dateTime[0] || dateTime[1] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          }), dateTime[1] || dateTime[0] || external_luxon_namespaceObject.DateTime.now().set({
+            day: 1
+          })]);
+        }
       } else {
         onClose?.();
+        setRangeSelectionStep(null);
         setCalendarType(rangePickerType);
         setCalendarViewDateTime([dateTime[0], dateTime[1]]);
       }
       previousOpenState.current = isOpen;
     }
-  }, [isOpen]);
+  }, [isOpen, dateTime, rangePickerType, onOpen, onClose]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const splittedFormat = format.split('/');
     setFormatIndexes({
@@ -16323,27 +16629,18 @@ const useDateRangePicker = ({
     if (Array.isArray(rest.value)) {
       const newDateTimeFrom = typeof rest.value[0] === 'string' && rest.value[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[0], luxonFormat) : undefined;
       const newDateTimeTo = typeof rest.value[1] === 'string' && rest.value[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[1], luxonFormat) : undefined;
-      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom : undefined, newDateTimeTo?.isValid ? newDateTimeTo : undefined];
+      const newDateTime = [newDateTimeFrom?.isValid ? newDateTimeFrom.startOf('day') : undefined, newDateTimeTo?.isValid ? newDateTimeTo.startOf('day') : undefined];
       setDateTime(newDateTime);
       setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      // Sync calendar view with the new dates so they're visible when calendar opens
+      setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
       setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
       setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
     }
-  }, [rest.value]);
+  }, [rest.value, expectedDateLength, luxonFormat, nameFrom, nameTo, setValue, _name]);
   (0,external_react_namespaceObject.useEffect)(() => {
     setStatus(rest.status);
   }, [rest.status]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    if (lastChangedDate[0] || lastChangedDate[1]) {
-      if (lastFocusedElement === 'from' && !lastChangedDate[1]) {
-        setFocus(nameTo);
-      }
-      if (lastFocusedElement === 'to' && !lastChangedDate[0]) {
-        setFocus(nameFrom);
-        inputFromRef.current?.focus();
-      }
-    }
-  }, [lastChangedDate]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (calendarViewDateTime[0] && !calendarViewDateTime[1]) {
       setCalendarViewDateTime([calendarViewDateTime[0], calendarViewDateTime[0]]);
@@ -16358,11 +16655,20 @@ const useDateRangePicker = ({
     }
   }, [isOpenState]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (defaultValue) {
-      setValue(nameFrom, defaultValue[0]);
-      setValue(nameTo, defaultValue[1]);
+    // Only process defaultValue once on mount to avoid re-processing
+    if (Array.isArray(defaultValue) && !defaultValueProcessed.current) {
+      const defaultDateTimeFrom = typeof defaultValue[0] === 'string' && defaultValue[0].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[0], luxonFormat) : undefined;
+      const defaultDateTimeTo = typeof defaultValue[1] === 'string' && defaultValue[1].length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(defaultValue[1], luxonFormat) : undefined;
+      const newDateTime = [defaultDateTimeFrom?.isValid ? defaultDateTimeFrom.startOf('day') : undefined, defaultDateTimeTo?.isValid ? defaultDateTimeTo.startOf('day') : undefined];
+      setDateTime(newDateTime);
+      setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
+      // Sync calendar view with default dates so they're visible when calendar opens
+      setCalendarViewDateTime([newDateTime[0] || newDateTime[1] || undefined, newDateTime[1] || newDateTime[0] || undefined]);
+      setValue(nameFrom, newDateTime[0]?.toFormat(luxonFormat));
+      setValue(nameTo, newDateTime[1]?.toFormat(luxonFormat));
+      defaultValueProcessed.current = true;
     }
-  }, []);
+  }, [defaultValue, expectedDateLength, luxonFormat, nameFrom, nameTo, setCalendarViewDateTime, setValue, _name]);
   return {
     formatIndexes,
     dateMinParts,
@@ -16373,7 +16679,6 @@ const useDateRangePicker = ({
     inputValueFrom,
     inputValueTo,
     calendarViewDateTime,
-    maskInputRef,
     calendarType,
     lastChangedDate,
     luxonFormat,
@@ -16384,16 +16689,24 @@ const useDateRangePicker = ({
     currentCalendarViewDT,
     isOpen,
     status,
-    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputFromRef]),
-    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRef, inputToRef]),
+    inputFromRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefFrom, inputFromRef]),
+    inputToRef: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([maskInputRefTo, inputToRef]),
     setIsOpen,
-    handleSetIsOpen,
     setLastFocusedElement,
     safeOnChange,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
-    handleBlur
+    handleBlur,
+    rangeSelectionStep,
+    setRangeSelectionStep,
+    clearInputValue: field => {
+      const targetName = field === 'from' ? nameFrom : nameTo;
+      clearErrors(targetName);
+      setValue(targetName, undefined);
+      setDateTime(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+      setLastChangedDate(prev => field === 'from' ? [undefined, prev[1]] : [prev[0], undefined]);
+    }
   };
 };
 ;// ./src/components/DateRangePicker/DateRangePickerProvider.tsx
@@ -16422,7 +16735,7 @@ const DateRangePickerProvider = ({
   };
   const handleToggleOpen = e => {
     const tagName = e.currentTarget.tagName.toLowerCase();
-    if (rest.openCalendarMode === 'both' || rest.openCalendarMode === 'input' && tagName === 'input' || rest.openCalendarMode === 'icon' && tagName === 'button') {
+    if (tagName === 'button') {
       toggleOpen();
     }
     if (tagName === 'input' && rest.inputProps?.inputProps?.onClick) {
@@ -16449,7 +16762,6 @@ const DateRangePickerProvider = ({
 
 const DateRangePicker = ({
   format,
-  openCalendarMode = 'icon',
   showCalendarIcon = true,
   showStatusArea = true,
   rangePickerType = 'days',
@@ -16458,7 +16770,6 @@ const DateRangePicker = ({
   const actualFormat = format || getFormatForRangePickerType(rangePickerType);
   return (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
     format: actualFormat,
-    openCalendarMode: openCalendarMode,
     showCalendarIcon: showCalendarIcon,
     showStatusArea: showStatusArea,
     rangePickerType: rangePickerType,
@@ -18173,52 +18484,6 @@ const FiltersMultiSelectOptions = ({
 ;// ./src/components/Icon/index.ts
 
 
-;// ./src/components/ImageItem/ImageItem.tsx
-function ImageItem_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-
-
-
-var ImageItem_ref =  true ? {
-  name: "c5ejfv",
-  styles: "gap:8px;text-decoration:none"
-} : 0;
-const ImageItem = ({
-  children,
-  image,
-  avatarSize = 24,
-  link = '',
-  openLinkInNewTab = false,
-  className
-}) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  const additionalProps = link ? {
-    href: link,
-    target: openLinkInNewTab ? '_blank' : undefined
-  } : {};
-  return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: ImageItem_ref,
-    as: link ? 'a' : 'div',
-    className: className,
-    "data-testid": "image-item",
-    ...additionalProps,
-    children: [(0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
-      size: avatarSize,
-      image: image
-    }), (0,jsx_runtime_namespaceObject.jsx)("span", {
-      css: /*#__PURE__*/(0,react_namespaceObject.css)({
-        color: theme.colors.greyDarker,
-        fontSize: 14,
-        fontWeight: 500,
-        cursor: link ? 'pointer' : 'default',
-        '&:hover': {
-          color: link ? theme.colors.blue : theme.colors.greyDarker
-        }
-      },  true ? "" : 0,  true ? "" : 0),
-      children: children
-    })]
-  });
-};
 ;// ./src/components/ImageItem/index.ts
 
 ;// ./src/components/LinksTabBar/LinksTabBarBase.tsx
@@ -21132,10 +21397,22 @@ const RadioWidget = props => {
     }, i)) : undefined
   });
 };
+;// ./src/components/JsonSchemaForm/constants.ts
+const DEFAULT_AVATAR_SIZE = 24;
 ;// ./src/components/JsonSchemaForm/widgets/SelectWidget.tsx
 
 
 
+
+const getAvatarNode = (option, uiOptions) => {
+  const avatar = option.schema?.avatar;
+  if (!avatar) return;
+  const avatarSize = uiOptions.typeaheadAvatarSize ?? DEFAULT_AVATAR_SIZE;
+  return (0,jsx_runtime_namespaceObject.jsx)(Avatar_Avatar, {
+    size: avatarSize,
+    image: avatar
+  });
+};
 const SelectWidget = props => {
   const {
     id,
@@ -21156,6 +21433,7 @@ const SelectWidget = props => {
     enumDisabled = []
   } = options;
   const customPlaceholder = placeholder || uiSchema?.['ui:placeholder'];
+  const selectUiOptions = uiSchema?.['ui:options'] || {};
   const isMultiple = !!multiple || Array.isArray(value);
   const items = Array.isArray(enumOptions) ? enumOptions : [];
   const handleChange = onChangeOverride ? onChangeOverride : value => {
@@ -21183,8 +21461,7 @@ const SelectWidget = props => {
   };
   const handleTypeaheadChange = (changedValue, isAdded) => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = isAdded ? [...currentSelected, changedValue] : currentSelected.filter(item => item !== changedValue);
+      const newSelected = isAdded ? [...selectedItems, changedValue] : selectedItems.filter(item => item !== changedValue);
       handleFormChange(newSelected);
     } else {
       const newValue = isAdded ? changedValue : undefined;
@@ -21207,8 +21484,7 @@ const SelectWidget = props => {
   };
   const onRemoveSelectedClick = removedValue => {
     if (isMultiple) {
-      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
-      const newSelected = currentSelected.filter(item => item !== removedValue);
+      const newSelected = selectedItems.filter(item => item !== removedValue);
       handleChange(newSelected);
     } else {
       handleChange(undefined);
@@ -21233,15 +21509,13 @@ const SelectWidget = props => {
         label,
         input
       }) => highlightInputMatch(label, input),
-      children: items.map(({
-        label,
-        value
-      }) => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
-        value: value,
-        label: label || value,
-        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(value),
-        children: label || value
-      }, value))
+      children: items.map(item => (0,jsx_runtime_namespaceObject.jsx)(TypeaheadOption_TypeaheadOption, {
+        value: item.value,
+        label: item.label || item.value,
+        avatar: getAvatarNode(item, selectUiOptions),
+        isDisabled: disabled || Array.isArray(enumDisabled) && enumDisabled.includes(item.value),
+        children: item.label || item.value
+      }, item.value))
     })
   });
 };
@@ -21579,6 +21853,7 @@ const JsonSchemaForm_Form = /*#__PURE__*/base_default()(UnstyledForm,  true ? {
   styles: ".form-group{margin-bottom:16px;}.form-group:last-child{margin-bottom:0;}"
 } : 0);
 
+
 ;// ./src/components/index.ts