@ssa-ui-kit/core 2.28.1 → 2.28.3

package/dist/index.js

@@ -1480,7 +1480,27 @@ const Wrapper = /*#__PURE__*/base_default()("div",  true ? {
   alignItems
 }) => alignItems ? alignItems : 'center', ";width:100%;flex-direction:", ({
   direction
-}) => direction ? direction : 'row', ";" + ( true ? "" : 0));
+}) => direction ? direction : 'row', ";", ({
+  isVisible = true,
+  fade,
+  fadeDelay = 0.3
+}) => {
+  const baseStyles = `
+      opacity: ${isVisible ? 1 : 0};
+    `;
+  if (fade) {
+    return `
+        ${baseStyles}
+        transition: opacity ${fadeDelay}s ease-in-out, visibility ${fadeDelay}s ease-in-out;
+        visibility: ${isVisible ? 'visible' : 'hidden'};
+        ${!isVisible ? `transition-delay: 0s, ${fadeDelay}s;` : ''}
+      `;
+  }
+  return `
+      ${baseStyles}
+      visibility: ${isVisible ? 'visible' : 'hidden'};
+    `;
+}, ";" + ( true ? "" : 0));
 /* harmony default export */ const Wrapper_Wrapper = (Wrapper);
 ;// ./src/components/Button/ButtonBase.tsx
 
@@ -8026,6 +8046,7 @@ const styles_blueLight = theme => /*#__PURE__*/(0,react_namespaceObject.css)("co
 
 
 
+
 const Tag_mapColors = {
   pink: [styles_pink, pinkBorder],
   yellow: [styles_yellow, yellowBorder],
@@ -8036,18 +8057,29 @@ const Tag_mapColors = {
   blue: [styles_blue, blueBorder],
   yellowWarm: [styles_yellowWarm, yellowWarmBorder]
 };
+const createCustomStyles = customStyles => {
+  if (!customStyles) return [];
+  const styles = [/*#__PURE__*/(0,react_namespaceObject.css)(customStyles.color && `color: ${customStyles.color};`, " ", customStyles.background && `background: ${customStyles.background};`, " ", customStyles.border && `border: ${customStyles.border};`, " ", customStyles.boxShadow && `box-shadow: ${customStyles.boxShadow};`, ";" + ( true ? "" : 0),  true ? "" : 0)];
+  return customStyles.css ? [styles, customStyles.css] : [styles];
+};
 const Tag = ({
   color = 'purple',
   size = 'medium',
   className,
-  children
-}) => (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
-  color: color,
-  size: size,
-  css: Tag_mapColors[color],
-  className: className,
-  children: children
-});
+  children,
+  customStyles
+}) => {
+  const hasCustomStyles = customStyles && Object.keys(customStyles).length > 0;
+  const defaultStyles = hasCustomStyles ? null : Tag_mapColors[color];
+  const customStylesArray = createCustomStyles(customStyles);
+  return (0,jsx_runtime_namespaceObject.jsx)(Badge_Badge, {
+    color: hasCustomStyles ? 'transparent' : color,
+    size: size,
+    css: [defaultStyles, ...(customStylesArray || []),  true ? "" : 0],
+    className: className,
+    children: children
+  });
+};
 /* harmony default export */ const Tag_Tag = (Tag);
 ;// ./src/components/Textarea/TextareaBase.tsx
 
@@ -14014,13 +14046,89 @@ const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(Da
 
 ;// ./src/components/DateRangePicker/constants.ts
 const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
+const DEFAULT_MONTH_MASK_FORMAT = 'mm/yyyy';
+const DEFAULT_YEAR_MASK_FORMAT = 'yyyy';
 const constants_DEFAULT_MASK = '__/__/____';
+const DEFAULT_MONTH_MASK = '__/____';
+const DEFAULT_YEAR_MASK = '____';
 const constants_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const constants_DATE_MIN = '01/01/1900';
 const constants_DATE_MAX = '01/01/2150';
+const MONTH_DATE_MIN = '01/1900';
+const MONTH_DATE_MAX = '01/2150';
+const YEAR_DATE_MIN = '1900';
+const YEAR_DATE_MAX = '2150';
 const constants_OUT_OF_RANGE = 'The date is out of the defined range';
 const constants_INVALID_DATE = 'Invalid date';
 const FULL_DATE_LENGTH = 10;
+const FULL_MONTH_DATE_LENGTH = 7;
+const FULL_YEAR_DATE_LENGTH = 4;
+;// ./src/components/DateRangePicker/utils/format.ts
+
+const isMonthOnlyFormat = format => {
+  if (!format) return false;
+  const lowerFormat = format.toLowerCase();
+  const hasMonth = lowerFormat.includes('mm');
+  const hasYear = lowerFormat.includes('yyyy');
+  const hasDay = lowerFormat.includes('dd');
+  return hasMonth && hasYear && !hasDay;
+};
+const isYearOnlyFormat = format => {
+  if (!format) return false;
+  const lowerFormat = format.toLowerCase();
+  const hasYear = lowerFormat.includes('yyyy');
+  const hasMonth = lowerFormat.includes('mm');
+  const hasDay = lowerFormat.includes('dd');
+  return hasYear && !hasMonth && !hasDay;
+};
+const getExpectedDateLength = format => {
+  if (!format) return FULL_DATE_LENGTH;
+  if (isYearOnlyFormat(format)) {
+    return FULL_YEAR_DATE_LENGTH;
+  }
+  if (isMonthOnlyFormat(format)) {
+    return FULL_MONTH_DATE_LENGTH;
+  }
+  return FULL_DATE_LENGTH;
+};
+const getMaskForFormat = format => {
+  if (isYearOnlyFormat(format)) {
+    return DEFAULT_YEAR_MASK;
+  }
+  if (isMonthOnlyFormat(format)) {
+    return DEFAULT_MONTH_MASK;
+  }
+  return constants_DEFAULT_MASK;
+};
+const getDefaultDateRange = format => {
+  if (isYearOnlyFormat(format)) {
+    return {
+      defaultMin: YEAR_DATE_MIN,
+      defaultMax: YEAR_DATE_MAX
+    };
+  }
+  if (isMonthOnlyFormat(format)) {
+    return {
+      defaultMin: MONTH_DATE_MIN,
+      defaultMax: MONTH_DATE_MAX
+    };
+  }
+  return {
+    defaultMin: constants_DATE_MIN,
+    defaultMax: constants_DATE_MAX
+  };
+};
+const getFormatForRangePickerType = rangePickerType => {
+  switch (rangePickerType) {
+    case 'years':
+      return DEFAULT_YEAR_MASK_FORMAT;
+    case 'months':
+      return DEFAULT_MONTH_MASK_FORMAT;
+    case 'days':
+    default:
+      return constants_DEFAULT_MASK_FORMAT;
+  }
+};
 ;// ./src/components/DateRangePicker/components/DatesListWrapper.tsx
 
 
@@ -14093,8 +14201,9 @@ const styles_YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
 }) => isCalendarYear || isCalendarFirstDateSelected || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";background:", ({
   theme,
   isHighlighted,
-  isCalendarYear
-}) => isHighlighted && !isCalendarYear && theme.colors.blueRoyal16, ";&:hover{background:", ({
+  isCalendarYear,
+  isCalendarSecondDateSelected
+}) => isHighlighted && !isCalendarYear && !isCalendarSecondDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
 }) => theme.colors.greyLighter, ";color:", ({
   theme
@@ -14115,24 +14224,21 @@ const styles_MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   isCalendarSecondDateSelected
 }) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500;cursor:pointer;color:", ({
   theme,
-  isCalendarMonth,
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
-}) => (isCalendarMonth || isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
+}) => (isCalendarFirstDateSelected || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
   theme,
-  isCalendarMonth,
   isCalendarFirstDateSelected,
   isCalendarSecondDateSelected
-}) => isCalendarMonth || isCalendarFirstDateSelected || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
   theme
 }) => theme.colors.greyDarker, ";background:", ({
   theme
 }) => theme.colors.grey, ";}&[aria-disabled='false']{background:", ({
   theme,
   isHighlighted,
-  isCalendarMonth,
   isCalendarSecondDateSelected
-}) => isHighlighted && !isCalendarMonth && !isCalendarSecondDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
+}) => isHighlighted && !isCalendarSecondDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
 }) => theme.colors.greyLighter, ";color:", ({
   theme
@@ -14487,9 +14593,12 @@ const MonthsView_MonthsView = () => {
     dateMaxDT,
     lastFocusedElement,
     currentCalendarViewDT,
+    rangePickerType,
     setCalendarType,
     setCalendarViewDateTime,
-    onMonthChange
+    onMonthChange,
+    setDateTime,
+    setIsOpen
   } = useDateRangePickerContext();
   const {
     handleDateHover,
@@ -14507,20 +14616,34 @@ const MonthsView_MonthsView = () => {
     }
     const selectedMonth = target.innerHTML;
     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) {
-      onMonthChange?.(newDate.toJSDate());
+    if (rangePickerType === 'days') {
+      const newDate = currentCalendarViewDT?.set({
+        month: monthNumber + 1
+      });
+      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+      if (newDate) {
+        onMonthChange?.(newDate.toJSDate());
+      }
+      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);
+      }
     }
-    setCalendarType('days');
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
     css: components_MonthsView_ref,
     onClick: handleMonthSelect,
     children: constants_MONTHS.map((month, index) => {
-      const isCalendarMonth = currentCalendarViewDT ? currentCalendarViewDT.month === index + 1 : false;
       const currentMonthDT = external_luxon_namespaceObject.DateTime.fromObject({
         year: currentCalendarViewDT?.year,
         month: index + 1,
@@ -14536,7 +14659,6 @@ const MonthsView_MonthsView = () => {
         isCalendarSecondDateSelected
       });
       return (0,jsx_runtime_namespaceObject.jsx)(styles_MonthsViewCell, {
-        isCalendarMonth: isCalendarMonth,
         "aria-disabled": isAriaDisabled,
         "aria-label": `${month}, ${currentCalendarViewDT?.year}`,
         isCalendarFirstDateSelected: isCalendarFirstDateSelected,
@@ -14566,6 +14688,7 @@ var components_YearsView_ref =  true ? {
 } : 0;
 const YearsView_YearsView = () => {
   const {
+    rangePickerType,
     dateTime,
     calendarViewDateTime,
     currentCalendarViewDT,
@@ -14575,7 +14698,9 @@ const YearsView_YearsView = () => {
     lastFocusedElement,
     setCalendarType,
     setCalendarViewDateTime,
-    onYearChange
+    onYearChange,
+    setDateTime,
+    setIsOpen
   } = useDateRangePickerContext();
   const wrapper = (0,external_react_namespaceObject.useRef)(null);
   const yearsList = dates_getYearsList({
@@ -14600,13 +14725,32 @@ const YearsView_YearsView = () => {
       target
     } = event;
     const selectedYear = Number(target.innerHTML);
-    const newDate = currentCalendarViewDT.set({
-      year: selectedYear
-    });
-    setCalendarType('months');
-    setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
-    if (newDate) {
-      onYearChange?.(newDate.toJSDate());
+    if (rangePickerType !== 'years') {
+      const newDate = currentCalendarViewDT.set({
+        year: selectedYear
+      });
+      setCalendarType('months');
+      setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
+      if (newDate) {
+        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);
+      }
     }
   };
   return (0,jsx_runtime_namespaceObject.jsx)(DatesListWrapper, {
@@ -14644,20 +14788,21 @@ const YearsView_YearsView = () => {
     })
   });
 };
-;// ./src/components/DateRangePicker/components/MonthsSwitch.tsx
+;// ./src/components/DateRangePicker/components/YearsMonthsSwitch.tsx
 
-function MonthsSwitch_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)."; }
+function YearsMonthsSwitch_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 MonthsSwitch_ref =  true ? {
+var YearsMonthsSwitch_ref =  true ? {
   name: "9cmux7",
   styles: "width:72px;gap:24px"
 } : 0;
-const MonthsSwitch = () => {
+const YearsMonthsSwitch = () => {
   const {
+    rangePickerType = 'days',
     calendarType,
     calendarViewDateTime,
     dateMinDT,
@@ -14674,40 +14819,44 @@ const MonthsSwitch = () => {
   });
   const isMinMonthReached = calendarViewDateTime ? currentCalendarViewDT?.month === dateMinDT.month && currentCalendarViewDT.year === dateMinDT.year : false;
   const isMaxMonthReached = calendarViewDateTime ? currentCalendarViewDT?.month === dateMaxDT.month && currentCalendarViewDT.year === dateMaxDT.year : false;
-  const handlePreviousMonth = () => {
-    const newDate = currentCalendarViewDT?.minus({
+  const handlePrevious = () => {
+    const newDate = currentCalendarViewDT?.minus(isDayCalendarType ? {
       month: 1
+    } : {
+      year: 1
     });
     setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
     if (newDate) {
       onMonthChange?.(newDate.toJSDate());
     }
   };
-  const handleNextMonth = () => {
-    const newDate = currentCalendarViewDT?.plus({
+  const handleNext = () => {
+    const newDate = currentCalendarViewDT?.plus(isDayCalendarType ? {
       month: 1
+    } : {
+      year: 1
     });
     setCalendarViewDateTime(lastFocusedElement === 'from' ? [newDate, calendarViewDateTime[1]] : [calendarViewDateTime[0], newDate]);
     if (newDate) {
       onMonthChange?.(newDate.toJSDate());
     }
   };
-  if (!isDayCalendarType) {
+  if (rangePickerType === 'days' && calendarType !== 'days' || rangePickerType === 'months' && calendarType !== 'months' || rangePickerType === 'years') {
     return null;
   }
   return (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
-    css: MonthsSwitch_ref,
+    css: YearsMonthsSwitch_ref,
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-left",
         size: 14,
-        tooltip: "Previous month",
+        tooltip: `Previous ${rangePickerType === 'days' ? 'month' : 'year'}`,
         color: isMinMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
       variant: 'tertiary',
-      "aria-label": "Previous month",
-      "data-testid": "previous-month",
-      onClick: handlePreviousMonth,
+      "aria-label": `Previous ${rangePickerType === 'days' ? 'month' : 'year'}`,
+      "data-testid": "previous-year-month",
+      onClick: handlePrevious,
       isDisabled: isMinMonthReached,
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         padding: 4,
@@ -14721,14 +14870,14 @@ const MonthsSwitch = () => {
       endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
         name: "carrot-right",
         size: 14,
-        tooltip: "Next month",
+        tooltip: `Next ${rangePickerType === 'days' ? 'month' : 'year'}`,
         color: isMaxMonthReached ? theme.colors.grey : theme.colors.greyDarker
       }),
       variant: 'tertiary',
-      onClick: handleNextMonth,
+      onClick: handleNext,
       isDisabled: isMaxMonthReached,
-      "aria-label": "Next month",
-      "data-testid": "next-month",
+      "aria-label": `Next ${rangePickerType === 'days' ? 'month' : 'year'}`,
+      "data-testid": "next-year-month",
       css: /*#__PURE__*/(0,react_namespaceObject.css)({
         padding: 4,
         height: 32,
@@ -14756,28 +14905,29 @@ var Header_ref2 =  true ? {
 } : 0;
 const Header_Header = () => {
   const {
+    rangePickerType,
     calendarType,
     currentCalendarViewDT,
     setCalendarType
   } = useDateRangePickerContext();
   const handleCalendarTypeChange = () => {
-    setCalendarType(calendarType === 'days' ? 'years' : 'days');
+    setCalendarType(calendarType === 'days' || calendarType === 'months' ? 'years' : rangePickerType ?? 'days');
   };
   return (0,jsx_runtime_namespaceObject.jsxs)(PopoverHeading, {
     css: components_Header_ref,
     as: 'div',
     children: [(0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
-      endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-        name: calendarType === 'days' ? 'carrot-down' : 'carrot-up',
+      endIcon: rangePickerType !== 'years' ? (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+        name: calendarType === 'days' || calendarType === 'months' ? 'carrot-down' : 'carrot-up',
         size: 14,
         tooltip: ""
-      }),
+      }) : null,
       variant: "tertiary",
       onClick: handleCalendarTypeChange,
       "data-testid": "calendar-type-change-button",
       css: Header_ref2,
-      children: currentCalendarViewDT.toFormat('LLLL yyyy')
-    }), (0,jsx_runtime_namespaceObject.jsx)(MonthsSwitch, {})]
+      children: currentCalendarViewDT.toFormat(rangePickerType === 'days' ? 'LLLL yyyy' : 'yyyy')
+    }), (0,jsx_runtime_namespaceObject.jsx)(YearsMonthsSwitch, {})]
   });
 };
 ;// ./src/components/DateRangePicker/components/Calendar.tsx
@@ -15258,7 +15408,6 @@ const Content_DatePickerContent = () => {
 ;// ./src/components/DateRangePicker/hooks/useDatePickerMask.tsx
 
 
-
 const useDatePickerMask_useDatePickerMask = ({
   maskOptions,
   formatIndexes,
@@ -15266,7 +15415,7 @@ const useDatePickerMask_useDatePickerMask = ({
   dateMaxParts
 }) => {
   const {
-    mask = constants_DEFAULT_MASK,
+    mask,
     replacement = {
       _: /\d/
     },
@@ -15281,7 +15430,8 @@ const useDatePickerMask_useDatePickerMask = ({
       selectionEnd,
       value: currentValue
     }) => {
-      if (mask === constants_DEFAULT_MASK) {
+      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,
@@ -15309,22 +15459,32 @@ const useDatePickerMask_useDatePickerMask = ({
 
 
 
+
 const useDateRangePicker = ({
-  dateMin = constants_DATE_MIN,
-  dateMax = constants_DATE_MAX,
+  dateMin,
+  dateMax,
   name: _name,
-  format = 'mm/dd/yyyy',
+  format: propFormat,
   maskOptions,
   isOpenState = false,
   defaultValue,
+  rangePickerType = 'days',
   onOpen,
   onClose,
   onError,
   onChange,
   ...rest
 }) => {
+  const format = propFormat || getFormatForRangePickerType(rangePickerType);
+  const {
+    defaultMin,
+    defaultMax
+  } = getDefaultDateRange(format);
+  const finalDateMin = dateMin || defaultMin;
+  const finalDateMax = dateMax || defaultMax;
   const inputFromRef = (0,external_react_namespaceObject.useRef)(null);
   const inputToRef = (0,external_react_namespaceObject.useRef)(null);
+  const previousRangePickerType = (0,external_react_namespaceObject.useRef)(rangePickerType);
   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);
@@ -15362,16 +15522,21 @@ const useDateRangePicker = ({
     month: splittedFormat.findIndex(item => item === 'mm'),
     year: splittedFormat.findIndex(item => item === 'yyyy')
   });
-  const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)('days');
+  const [calendarType, setCalendarType] = (0,external_react_namespaceObject.useState)(rangePickerType);
   const [calendarViewDateTime, setCalendarViewDateTime] = (0,external_react_namespaceObject.useState)([undefined, undefined]);
   const currentCalendarViewDT = calendarViewDateTime[currentIndex] || external_luxon_namespaceObject.DateTime.now().set({
     day: 1
   });
   const luxonFormat = format.replace('mm', 'MM');
-  const dateMinParts = dateMin.split('/').map(Number);
-  const dateMaxParts = dateMax.split('/').map(Number);
+  const expectedDateLength = getExpectedDateLength(format);
+  const dateMinParts = finalDateMin.split('/').map(Number);
+  const dateMaxParts = finalDateMax.split('/').map(Number);
+  const defaultMask = getMaskForFormat(format);
   const maskInputRef = useDatePickerMask_useDatePickerMask({
-    maskOptions,
+    maskOptions: {
+      mask: defaultMask,
+      ...maskOptions
+    },
     dateMaxParts,
     dateMinParts,
     formatIndexes
@@ -15379,12 +15544,12 @@ const useDateRangePicker = ({
   const dateMaxDT = external_luxon_namespaceObject.DateTime.fromObject({
     year: dateMaxParts[formatIndexes['year']],
     month: dateMaxParts[formatIndexes['month']],
-    day: dateMaxParts[formatIndexes['day']]
+    day: formatIndexes['day'] !== -1 ? dateMaxParts[formatIndexes['day']] : 1
   });
   const dateMinDT = external_luxon_namespaceObject.DateTime.fromObject({
     year: dateMinParts[formatIndexes['year']],
     month: dateMinParts[formatIndexes['month']],
-    day: dateMinParts[formatIndexes['day']]
+    day: formatIndexes['day'] !== -1 ? dateMinParts[formatIndexes['day']] : 1
   });
   const safeOnChange = newDateTime => {
     const _newDateTime = newDateTime ? newDateTime.startOf('day') : undefined;
@@ -15420,7 +15585,7 @@ const useDateRangePicker = ({
   const processValue = (newValue, elementName) => {
     const currentElementType = elementName || lastFocusedElement;
     const currentName = currentElementType === 'from' ? nameFrom : nameTo;
-    const newDateTime = typeof newValue === 'string' && newValue.length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(newValue, luxonFormat) : undefined;
+    const newDateTime = typeof newValue === 'string' && newValue.length === expectedDateLength ? external_luxon_namespaceObject.DateTime.fromFormat(newValue, luxonFormat) : undefined;
     const newDateTimeIfInvalid = [currentElementType === 'from' ? undefined : dateTime?.[0], currentElementType === 'to' ? undefined : dateTime?.[1]];
     const newDateTimeIfValid = [currentElementType === 'from' ? newDateTime : dateTime?.[0], currentElementType === 'to' ? newDateTime : dateTime?.[1]];
     if (!newDateTime?.isValid) {
@@ -15465,14 +15630,14 @@ const useDateRangePicker = ({
   const processInputValue = (inputValue, elementName) => {
     const currentElementType = elementName || lastFocusedElement;
     const currentName = currentElementType === 'from' ? nameFrom : nameTo;
-    if (typeof inputValue === 'string' && inputValue.length && inputValue.length < FULL_DATE_LENGTH) {
+    if (typeof inputValue === 'string' && inputValue.length && inputValue.length < expectedDateLength) {
       setIsOpen(false);
       setTimeout(() => {
         maskInputRef.current.focus();
       }, 10);
     }
     let newDateTime;
-    if (typeof inputValue === 'string' && inputValue.length === FULL_DATE_LENGTH) {
+    if (typeof inputValue === 'string' && inputValue.length === expectedDateLength) {
       newDateTime = external_luxon_namespaceObject.DateTime.fromFormat(inputValue, luxonFormat);
       setValue(currentName, inputValue);
       processValue(inputValue, elementName);
@@ -15506,16 +15671,19 @@ const useDateRangePicker = ({
       setCalendarViewDateTime(currentElementType === 'from' ? [newCalendarViewDateTime, calendarViewDateTime[1]] : [calendarViewDateTime[0], newCalendarViewDateTime]);
     }
   };
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setCalendarType(rangePickerType);
+  }, [rangePickerType]);
   (0,external_react_namespaceObject.useEffect)(() => {
     processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
   }, [lastFocusedElement]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (inputValueFrom && inputValueFrom.length === FULL_DATE_LENGTH) {
+    if (inputValueFrom && inputValueFrom.length === expectedDateLength) {
       processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
     }
   }, [inputValueFrom]);
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (inputValueTo && inputValueTo.length === FULL_DATE_LENGTH) {
+    if (inputValueTo && inputValueTo.length === expectedDateLength) {
       processInputValue(lastFocusedElement === 'from' ? inputValueFrom : inputValueTo);
     }
   }, [inputValueTo]);
@@ -15531,18 +15699,31 @@ const useDateRangePicker = ({
   }, [dateTime, lastFocusedElement, currentName]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (dateTime[0] && dateTime[1] && dateTime[0] > dateTime[1]) {
-      resetField(nameFrom);
-      resetField(nameTo);
-      setDateTime([dateTime[1], undefined]);
-      setLastChangedDate([dateTime[1].toJSDate(), undefined]);
-      setValue(nameFrom, dateTime[1].toFormat(luxonFormat));
-      setLastFocusedElement('to');
-      setTimeout(() => {
-        setFocus(nameTo, {
-          shouldSelect: true
-        });
-      }, 50);
-      setIsOpen(true);
+      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]);
   (0,external_react_namespaceObject.useEffect)(() => {
@@ -15551,7 +15732,7 @@ const useDateRangePicker = ({
         onOpen?.();
       } else {
         onClose?.();
-        setCalendarType('days');
+        setCalendarType(rangePickerType);
         setCalendarViewDateTime([dateTime[0], dateTime[1]]);
       }
       previousOpenState.current = isOpen;
@@ -15565,10 +15746,24 @@ const useDateRangePicker = ({
       year: splittedFormat.findIndex(item => item === 'yyyy')
     });
   }, [format]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (previousRangePickerType.current !== rangePickerType) {
+      if (dateTime[0] || dateTime[1]) {
+        const newLuxonFormat = format.replace('mm', 'MM');
+        if (dateTime[0]) {
+          setValue(nameFrom, dateTime[0].toFormat(newLuxonFormat));
+        }
+        if (dateTime[1]) {
+          setValue(nameTo, dateTime[1].toFormat(newLuxonFormat));
+        }
+      }
+      previousRangePickerType.current = rangePickerType;
+    }
+  }, [rangePickerType, format, dateTime, nameFrom, nameTo, setValue]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (Array.isArray(rest.value)) {
-      const newDateTimeFrom = typeof rest.value[0] === 'string' && rest.value[0].length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[0], luxonFormat) : undefined;
-      const newDateTimeTo = typeof rest.value[1] === 'string' && rest.value[1].length === FULL_DATE_LENGTH ? external_luxon_namespaceObject.DateTime.fromFormat(rest.value[1], luxonFormat) : undefined;
+      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];
       setDateTime(newDateTime);
       setLastChangedDate([newDateTime[0]?.toJSDate(), newDateTime[1]?.toJSDate()]);
@@ -15694,19 +15889,24 @@ const DateRangePickerProvider = ({
 
 
 const DateRangePicker = ({
-  format = constants_DEFAULT_MASK_FORMAT,
+  format,
   openCalendarMode = 'icon',
   showCalendarIcon = true,
   showStatusArea = true,
+  rangePickerType = 'days',
   ...rest
-}) => (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
-  format: format,
-  openCalendarMode: openCalendarMode,
-  showCalendarIcon: showCalendarIcon,
-  showStatusArea: showStatusArea,
-  ...rest,
-  children: (0,jsx_runtime_namespaceObject.jsx)(Content_DatePickerContent, {})
-});
+}) => {
+  const actualFormat = format || getFormatForRangePickerType(rangePickerType);
+  return (0,jsx_runtime_namespaceObject.jsx)(DateRangePickerProvider, {
+    format: actualFormat,
+    openCalendarMode: openCalendarMode,
+    showCalendarIcon: showCalendarIcon,
+    showStatusArea: showStatusArea,
+    rangePickerType: rangePickerType,
+    ...rest,
+    children: (0,jsx_runtime_namespaceObject.jsx)(Content_DatePickerContent, {})
+  });
+};
 ;// ./src/components/DateRangePicker/index.ts
 
 ;// ./src/components/Drawer/DrawerProvider.tsx
@@ -20351,17 +20551,49 @@ const SelectWidget = props => {
     onChange,
     onBlur,
     onFocus,
+    value,
     onChangeOverride,
-    value
+    multiple
   } = props;
   const {
     enumOptions = [],
     enumDisabled = []
   } = options;
-  const selectedIndex = (0,external_rjsf_utils_namespaceObject.enumOptionsIndexForValue)(value, enumOptions);
+  const isMultiple = !!multiple || Array.isArray(value);
+  const items = Array.isArray(enumOptions) ? enumOptions : [];
   const handleChange = onChangeOverride ? onChangeOverride : value => {
     onChange(value);
   };
+  const getSelectedItems = () => {
+    if (isMultiple) {
+      if (Array.isArray(value)) return value;
+      if (value !== undefined) return [value];
+      return [];
+    }
+    if (value === undefined || value === null) return [];
+    const index = (0,external_rjsf_utils_namespaceObject.enumOptionsIndexForValue)(value, enumOptions);
+    return index !== undefined ? [value] : [];
+  };
+  const selectedItems = getSelectedItems();
+  const handleFormChange = newValue => {
+    if (isMultiple) {
+      const arrayValue = Array.isArray(newValue) ? newValue : [newValue];
+      handleChange(arrayValue);
+    } else {
+      const singleValue = Array.isArray(newValue) ? newValue[0] : newValue;
+      handleChange(singleValue);
+    }
+  };
+  const handleTypeaheadChange = (changedValue, isAdded) => {
+    if (isMultiple) {
+      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
+      const newSelected = isAdded ? [...currentSelected, changedValue] : currentSelected.filter(item => item !== changedValue);
+      handleFormChange(newSelected);
+    } else {
+      const newValue = isAdded ? changedValue : undefined;
+      handleFormChange(newValue);
+    }
+  };
   const handleBlur = ({
     target
   }) => onBlur(id, target && target.value);
@@ -20370,11 +20602,21 @@ const SelectWidget = props => {
   }) => onFocus(id, target && target.value);
   const onEmptyChange = isEmpty => {
     if (isEmpty) {
-      handleChange();
+      handleChange(isMultiple ? [] : undefined);
+    }
+  };
+  const onClearAll = () => {
+    handleChange(isMultiple ? [] : undefined);
+  };
+  const onRemoveSelectedClick = removedValue => {
+    if (isMultiple) {
+      const currentSelected = Array.isArray(selectedItems) ? selectedItems : [];
+      const newSelected = currentSelected.filter(item => item !== removedValue);
+      handleChange(newSelected);
+    } else {
+      handleChange(undefined);
     }
   };
-  const items = Array.isArray(enumOptions) ? enumOptions : [];
-  const selectedItems = selectedIndex ? [items[Number(selectedIndex)].value] : [];
   return (0,jsx_runtime_namespaceObject.jsx)("div", {
     id: id,
     onBlur: handleBlur,
@@ -20383,12 +20625,13 @@ const SelectWidget = props => {
       width: "100%",
       selectedItems: selectedItems,
       isDisabled: disabled,
-      name: name
-      // RJSF provides placeholder as empty string
-      ,
+      name: name,
+      isMultiple: isMultiple,
       placeholder: placeholder || undefined,
-      onChange: handleChange,
+      onChange: handleTypeaheadChange,
       onEmptyChange: onEmptyChange,
+      onClearAll: onClearAll,
+      onRemoveSelectedClick: onRemoveSelectedClick,
       renderOption: ({
         label,
         input