@ssa-ui-kit/core 2.1.1 → 2.2.0

package/dist/index.js

@@ -85,12 +85,15 @@ __webpack_require__.d(__webpack_exports__, {
   CollapsibleNavBarProvider: () => (/* reexport */ CollapsibleNavBarProvider),
   ColorPicker: () => (/* reexport */ ColorPicker_ColorPicker),
   DatePicker: () => (/* reexport */ DatePicker),
+  DateRangePicker: () => (/* reexport */ DateRangePicker),
+  Drawer: () => (/* reexport */ index_parts_namespaceObject),
   Dropdown: () => (/* reexport */ Dropdown_Dropdown),
   DropdownArrow: () => (/* reexport */ DropdownArrow_DropdownArrow),
   DropdownBase: () => (/* reexport */ components_DropdownBase_DropdownBase),
   DropdownOption: () => (/* reexport */ DropdownOption_DropdownOption),
   DropdownOptions: () => (/* reexport */ DropdownOptions_DropdownOptions),
   DropdownToggle: () => (/* reexport */ DropdownToggle_DropdownToggle),
+  Field: () => (/* reexport */ Field_index_parts_namespaceObject),
   Filters: () => (/* reexport */ Filters),
   FiltersMultiSelect: () => (/* reexport */ FiltersMultiSelect),
   FiltersMultiSelectEmpty: () => (/* reexport */ FiltersMultiSelectEmpty),
@@ -202,6 +205,7 @@ __webpack_require__.d(__webpack_exports__, {
   TypeaheadOption: () => (/* reexport */ TypeaheadOption_TypeaheadOption),
   TypeaheadOptions: () => (/* reexport */ TypeaheadOptions),
   Typography: () => (/* reexport */ Typography_Typography),
+  UseDrawerOptions: () => (/* reexport */ useDrawer_namespaceObject.UseDrawerOptions),
   UserProfile: () => (/* reexport */ UserProfile),
   WidgetCard: () => (/* reexport */ WidgetCard),
   WidgetCardBase: () => (/* reexport */ WidgetCardBase),
@@ -229,6 +233,7 @@ __webpack_require__.d(__webpack_exports__, {
   styles: () => (/* reexport */ Tooltip_styles_namespaceObject),
   useAccordionGroupContext: () => (/* reexport */ useAccordionGroupContext),
   useCollapsibleNavBarContext: () => (/* reexport */ useCollapsibleNavBarContext),
+  useDrawer: () => (/* reexport */ useDrawer),
   useFieldContext: () => (/* reexport */ useFieldContext),
   useFilterMultiSelect: () => (/* reexport */ useFilterMultiSelect),
   useFullscreenMode: () => (/* reexport */ useFullscreenMode),
@@ -880,6 +885,38 @@ __webpack_require__.d(Tooltip_styles_namespaceObject, {
   small: () => (Tooltip_styles_small)
 });
 
+// NAMESPACE OBJECT: ./src/components/Drawer/useDrawer.tsx
+var useDrawer_namespaceObject = {};
+__webpack_require__.r(useDrawer_namespaceObject);
+__webpack_require__.d(useDrawer_namespaceObject, {
+  b: () => (useDrawer)
+});
+
+// NAMESPACE OBJECT: ./src/components/Drawer/index.parts.ts
+var index_parts_namespaceObject = {};
+__webpack_require__.r(index_parts_namespaceObject);
+__webpack_require__.d(index_parts_namespaceObject, {
+  CloseButton: () => (DrawerCloseButton),
+  Content: () => (DrawerContent),
+  Header: () => (DrawerHeader),
+  Overlay: () => (DrawerOverlay),
+  Portal: () => (DrawerPortal),
+  Root: () => (Drawer),
+  Title: () => (DrawerTitle)
+});
+
+// NAMESPACE OBJECT: ./src/components/Field/index.parts.ts
+var Field_index_parts_namespaceObject = {};
+__webpack_require__.r(Field_index_parts_namespaceObject);
+__webpack_require__.d(Field_index_parts_namespaceObject, {
+  Control: () => (FieldControl),
+  Description: () => (FieldDescription),
+  Error: () => (FieldError),
+  Label: () => (FieldLabel),
+  Root: () => (FieldRoot),
+  Success: () => (FieldSuccess)
+});
+
 // NAMESPACE OBJECT: ./src/components/Charts/PieChart/colorPalettes.ts
 var colorPalettes_namespaceObject = {};
 __webpack_require__.r(colorPalettes_namespaceObject);
@@ -1116,6 +1153,8 @@ const main = {
     //#487de1
     blueRoyal6: 'rgba(72, 125, 225, 0.06)',
     //#487DE1
+    blueRoyal16: 'rgba(72, 125, 225, 0.16)',
+    //#487DE1
     blueRoyal12: 'rgba(72, 125, 225, 0.12)',
     //#487DE1
     dangerShades300: 'rgb(253, 128, 122)',
@@ -4496,8 +4535,9 @@ const InputBase = /*#__PURE__*/base_default()("input",  true ? {
 } : 0)("flex:1;background:", ({
   theme
 }) => theme.colors.white, ";border-radius:12px;background-origin:border-box;background-clip:padding-box,border-box;border:", ({
+  showBorders,
   theme
-}) => `1px solid ${theme.colors.grey}`, ";color:", ({
+}) => showBorders ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme
 }) => theme.colors.greyDarker, ";width:100%;height:44px;padding:14px;font-weight:400;font-size:0.875rem;line-height:1rem;&::placeholder{color:", ({
   theme
@@ -4508,8 +4548,9 @@ const InputBase = /*#__PURE__*/base_default()("input",  true ? {
 }) => theme.colors.greyLighter, ";&::placeholder{color:", ({
   theme
 }) => theme.colors.grey, ";}&:disabled,&:disabled:hover{border:", ({
+  showBorders,
   theme
-}) => `1px solid  ${theme.colors.grey}`, ";background-image:none;}}" + ( true ? "" : 0));
+}) => showBorders ? `1px solid  ${theme.colors.grey}` : 'none', ";background-image:none;}}" + ( true ? "" : 0));
 ;// ./src/components/Input/InputGroup.tsx
 
 const InputGroup = /*#__PURE__*/base_default()("div",  true ? {
@@ -4529,7 +4570,7 @@ const basic = theme => /*#__PURE__*/(0,react_namespaceObject.css)({
       borderColor: theme.colors.greyDarker80
     },
     '&:focus': {
-      borderColor: `2px solid ${theme.colors.blueRoyal}`
+      borderColor: theme.colors.blueRoyal
     }
   }
 },  true ? "" : 0,  true ? "" : 0);
@@ -4658,6 +4699,8 @@ const InputInner = ({
   maxLength,
   helperText,
   showHelperText = false,
+  showStatusIcon = true,
+  showBorders = true,
   register,
   onKeyUp
 }, inputRef) => {
@@ -4667,7 +4710,7 @@ const InputInner = ({
     }
   }, []);
   const [countChar, setCountChar] = external_react_default().useState(0);
-  const showStatusIcon = () => !disabled && !endElement;
+  const showStatusIconByProps = !disabled && !endElement && showStatusIcon;
   const registerResult = register?.(name, validationSchema);
   const handleCount = e => {
     setCountChar(e.currentTarget.value.length);
@@ -4688,6 +4731,7 @@ const InputInner = ({
       }) : null, (0,jsx_runtime_namespaceObject.jsx)(InputBase, {
         type: type,
         id: `formElement-${name}`,
+        showBorders: showBorders,
         placeholder: placeholder,
         disabled: disabled,
         css: /*#__PURE__*/(0,react_namespaceObject.css)({
@@ -4700,9 +4744,9 @@ const InputInner = ({
         ...registerResult,
         onBlur: handleBlur,
         ref: (0,external_floating_ui_react_namespaceObject.useMergeRefs)([registerResult?.ref, inputRef])
-      }), status === 'error' && showStatusIcon() ? (0,jsx_runtime_namespaceObject.jsx)(InputStatusError, {
+      }), status === 'error' && showStatusIconByProps ? (0,jsx_runtime_namespaceObject.jsx)(InputStatusError, {
         errorTooltip: errorTooltip
-      }) : null, status === 'success' && showStatusIcon() ? (0,jsx_runtime_namespaceObject.jsx)(InputStatusSuccess, {
+      }) : null, status === 'success' && showStatusIconByProps ? (0,jsx_runtime_namespaceObject.jsx)(InputStatusSuccess, {
         successTooltip: successTooltip
       }) : null, endElement ? (0,jsx_runtime_namespaceObject.jsx)("div", {
         css: styles_endElement,
@@ -8873,7 +8917,9 @@ const external_luxon_namespaceObject = require("luxon");
 
 const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   target: "e19kqgld2"
-} : 0)("width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:6px;border:", ({
+} : 0)("position:relative;width:40px;height:40px;justify-content:center;font-size:14px;font-weight:500;border-radius:", ({
+  isHighlighted
+}) => isHighlighted ? 0 : '6px', ";border:", ({
   theme,
   isCalendarDateNow
 }) => isCalendarDateNow ? `1px solid ${theme.colors.greyFocused}` : 'none', ";color:", ({
@@ -8882,46 +8928,96 @@ const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
 }) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
   theme,
   isCalendarDateSelected
-}) => isCalendarDateSelected ? `linear-gradient(247deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
+}) => isCalendarDateSelected && `linear-gradient(247deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)`, ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
   theme
-}) => theme.colors.grey, ";cursor:default;pointer-events:none;}&[aria-disabled='false']:hover{background:", ({
+}) => theme.colors.grey, ";cursor:default;pointer-events:none;}&[aria-disabled='false']{background:", ({
+  theme,
+  isCalendarDateSelected,
+  isHighlighted
+}) => isHighlighted && !isCalendarDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
 }) => theme.colors.greyLighter, ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";}&:hover{border:", ({
+}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
+  isCalendarFirstDateSelected
+}) => isCalendarFirstDateSelected ? '0' : 'auto', ";right:", ({
+  isCalendarSecondDateSelected
+}) => isCalendarSecondDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+  theme
+}) => theme.colors.blueRoyal16, ";}}&:hover{border:", ({
   theme,
   isCalendarDateNow
 }) => isCalendarDateNow && `1px solid ${theme.colors.greyFocused}`, ";}" + ( true ? "" : 0));
 const YearsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   target: "e19kqgld1"
-} : 0)("display:flex;justify-content:center;align-items:center;width:70px;height:40px;border-radius:6px;font-size:14px;font-weight:500px;user-select:none;cursor:pointer;color:", ({
+} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:70px;height:40px;border-radius:", ({
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500px;user-select:none;cursor:pointer;color:", ({
   theme,
-  isCalendarYear
-}) => isCalendarYear && theme.colors.white, ";background:", ({
+  isCalendarYear,
+  isCalendarSecondDateSelected
+}) => (isCalendarYear || isCalendarSecondDateSelected) && theme.colors.white, ";background:", ({
   theme,
+  isCalendarYear,
+  isCalendarSecondDateSelected
+}) => isCalendarYear || isCalendarSecondDateSelected ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";background:", ({
+  theme,
+  isHighlighted,
   isCalendarYear
-}) => isCalendarYear ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";&:hover{background:", ({
+}) => isHighlighted && !isCalendarYear && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
 }) => theme.colors.greyLighter, ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";}" + ( true ? "" : 0));
+}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
+  isCalendarSecondDateSelected
+}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
+  isCalendarFirstDateSelected
+}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+  theme
+}) => theme.colors.blueRoyal16, ";}" + ( true ? "" : 0));
 const MonthsViewCell = /*#__PURE__*/base_default()("div",  true ? {
   target: "e19kqgld0"
-} : 0)("display:flex;justify-content:center;align-items:center;width:99px;height:40px;border-radius:6px;font-size:14px;font-weight:500px;cursor:pointer;color:", ({
+} : 0)("display:flex;justify-content:center;position:relative;align-items:center;width:99px;height:40px;border-radius:", ({
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? '6px' : 0, ";font-size:14px;font-weight:500;cursor:pointer;color:", ({
   theme,
-  isCalendarMonth
-}) => isCalendarMonth && theme.colors.white, ";user-select:none;background:", ({
+  isCalendarMonth,
+  isCalendarSecondDateSelected
+}) => (isCalendarMonth || isCalendarSecondDateSelected) && theme.colors.white, ";user-select:none;background:", ({
   theme,
-  isCalendarMonth
-}) => isCalendarMonth ? `linear-gradient(247.37deg, ${theme.colors.blueLighter} 14.71%, ${theme.colors.blue} 85.29%)` : 'none', ";&[aria-disabled='true']{cursor:default;pointer-events:none;color:", ({
+  isCalendarMonth,
+  isCalendarSecondDateSelected
+}) => isCalendarMonth || 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']:hover{background:", ({
+}) => theme.colors.grey, ";}&[aria-disabled='false']{background:", ({
+  theme,
+  isHighlighted,
+  isCalendarMonth,
+  isCalendarSecondDateSelected
+}) => isHighlighted && !isCalendarMonth && !isCalendarSecondDateSelected && theme.colors.blueRoyal16, ";&:hover{background:", ({
   theme
 }) => theme.colors.greyLighter, ";color:", ({
   theme
-}) => theme.colors.greyDarker, ";}" + ( true ? "" : 0));
+}) => theme.colors.greyDarker, ";}&::before{content:'';display:", ({
+  isCalendarFirstDateSelected,
+  isCalendarSecondDateSelected
+}) => isCalendarFirstDateSelected || isCalendarSecondDateSelected ? 'block' : 'none', ";position:absolute;width:10px;height:40px;left:", ({
+  isCalendarSecondDateSelected
+}) => isCalendarSecondDateSelected ? '0' : 'auto', ";right:", ({
+  isCalendarFirstDateSelected
+}) => isCalendarFirstDateSelected ? '0' : 'auto', ";z-index:-1;background:", ({
+  theme
+}) => theme.colors.blueRoyal16, ";}}" + ( true ? "" : 0));
 ;// ./src/components/DatePicker/utils/dates.ts
 
 const getDaysForCalendarMonth = date => {
@@ -9080,6 +9176,12 @@ const useDatePicker = ({
   });
   const [isLoading, setLoading] = (0,external_react_namespaceObject.useState)(true);
   const [dateTime, setDateTime] = (0,external_react_namespaceObject.useState)();
+  const [lastChangedDate, setLastChangedDate] = (0,external_react_namespaceObject.useState)(undefined);
+  const [dateTimeForChangeEvent, setDateTimeForChangeEvent] = (0,external_react_namespaceObject.useState)(undefined);
+  const [currentError, setCurrentError] = (0,external_react_namespaceObject.useState)({
+    date: null,
+    error: null
+  });
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(false);
   const splittedFormat = format.split('/');
   const [formatIndexes, setFormatIndexes] = (0,external_react_namespaceObject.useState)({
@@ -9108,6 +9210,31 @@ const useDatePicker = ({
     month: dateMinParts[formatIndexes['month']],
     day: dateMinParts[formatIndexes['day']]
   });
+  const safeOnChange = newDateTime => {
+    const _newDateTime = newDateTime ? newDateTime.startOf('day') : undefined;
+    const _dateTimeForChangeEvent = dateTimeForChangeEvent ? dateTimeForChangeEvent.startOf('day') : undefined;
+    if (_newDateTime?.toMillis() !== _dateTimeForChangeEvent?.toMillis()) {
+      setDateTimeForChangeEvent(newDateTime);
+      if (_newDateTime) {
+        setLastChangedDate(_newDateTime.toJSDate());
+        onChange?.(_newDateTime.toJSDate());
+      } else {
+        setLastChangedDate(undefined);
+        onChange?.();
+      }
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const safeOnError = (date, error) => {
+    if (currentError.date !== date && currentError.error !== error) {
+      setCurrentError({
+        date,
+        error
+      });
+      onError?.(date, error);
+    }
+  };
   const processValue = newValue => {
     const newDateTime = typeof newValue === 'string' && newValue.length === 10 ? external_luxon_namespaceObject.DateTime.fromFormat(newValue, luxonFormat) : undefined;
     if (!newDateTime?.isValid) {
@@ -9118,8 +9245,8 @@ const useDatePicker = ({
         shouldFocus: true
       });
       setDateTime(undefined);
-      onChange?.();
-      onError?.(newValue, errorMessage);
+      safeOnChange();
+      safeOnError?.(newValue, errorMessage);
     } else if (newDateTime !== undefined) {
       if (newDateTime < dateMinDT || newDateTime > dateMaxDT) {
         const errorMessage = OUT_OF_RANGE;
@@ -9129,23 +9256,25 @@ const useDatePicker = ({
           shouldFocus: true
         });
         setDateTime(undefined);
-        onError?.(newValue, errorMessage);
-        onChange?.();
+        safeOnError?.(newValue, errorMessage);
+        safeOnChange();
       } else {
         setDateTime(newDateTime);
         clearErrors();
-        onError?.(null);
-        onChange?.(newDateTime.toJSDate());
+        safeOnError?.(null);
+        safeOnChange?.(newDateTime);
       }
     }
   };
   const handleBlur = event => {
     event.preventDefault();
     const blurredValue = event.currentTarget.value;
-    processValue(blurredValue);
+    if (blurredValue.length > 0) {
+      processValue(blurredValue);
+    }
   };
   (0,external_react_namespaceObject.useEffect)(() => {
-    if (typeof inputValue === 'string' && inputValue.length < 10) {
+    if (typeof inputValue === 'string' && inputValue.length && inputValue.length < 10) {
       setIsOpen(false);
       setTimeout(() => {
         maskInputRef.current.focus();
@@ -9239,6 +9368,9 @@ const useDatePicker = ({
     calendarViewDateTime,
     maskInputRef,
     calendarType,
+    lastChangedDate,
+    luxonFormat,
+    safeOnChange,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
@@ -9261,6 +9393,7 @@ const DatePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.createC
   inputRef: {
     current: null
   },
+  inputProps: {},
   isOpen: false,
   calendarType: 'days',
   inputValue: undefined,
@@ -9301,6 +9434,11 @@ const DatePickerProvider = ({
     restHook.handleBlur(e);
     rest.onBlur?.(e);
   };
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (typeof rest.isOpenToggle === 'boolean') {
+      restHook.setIsOpen(current => !current);
+    }
+  }, [rest.isOpenToggle]);
   return (0,jsx_runtime_namespaceObject.jsx)(DatePickerContext.Provider, {
     value: {
       ...rest,
@@ -9344,16 +9482,23 @@ const DaysView = () => {
     calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
+    lastChangedDate,
+    highlightDates,
     setCalendarViewDateTime,
     setDateTime,
     setIsOpen,
-    onChange
+    safeOnChange
   } = useDatePickerContext();
   const selectedDateTime = dateTime?.toFormat('D');
   const currentDate = calendarViewDateTime?.toJSDate();
   const currentMonth = currentDate?.getMonth();
   const dates = getDaysForCalendarMonth(currentDate);
   const nowDate = external_luxon_namespaceObject.DateTime.fromJSDate(new Date()).toFormat('D');
+  const isHighlightEnabled = !!highlightDates?.enabled;
+  const {
+    otherDate
+  } = highlightDates || {};
+  const otherDateDT = otherDate && external_luxon_namespaceObject.DateTime.fromJSDate(otherDate);
   const handleDaySelect = event => {
     const {
       target
@@ -9366,7 +9511,7 @@ const DaysView = () => {
       });
       setCalendarViewDateTime(newDate);
       setDateTime(newDate);
-      onChange?.(newDate?.toJSDate());
+      safeOnChange?.(newDate);
       setIsOpen(false);
     }
   };
@@ -9387,8 +9532,14 @@ const DaysView = () => {
         const calendarMonth = currentDate.getMonth();
         const ariaLabel = currentDT.toLocaleString(external_luxon_namespaceObject.DateTime.DATE_HUGE);
         const isCalendarDateNow = nowDate === calendarDate;
-        const isCalendarDateSelected = selectedDateTime === calendarDate;
         const isCalendarMonth = currentMonth === calendarMonth;
+        const isCalendarFirstDateSelected = calendarDate === selectedDateTime;
+        const isCalendarSecondDateSelected = calendarDate === otherDateDT?.toFormat('D');
+        const isCalendarDateSelected = isCalendarFirstDateSelected || isCalendarSecondDateSelected;
+        let isHighlightDate = false;
+        if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
+          isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT < currentDT && currentDT < dateTime : dateTime < currentDT && currentDT < otherDateDT;
+        }
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
           isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
@@ -9405,6 +9556,9 @@ const DaysView = () => {
           "aria-label": ariaLabel,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
+          isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+          isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+          isHighlighted: isHighlightDate,
           children: calendarDay
         }, `day-${currentDate.getFullYear()}-${currentDate.getMonth()}-${currentDate.getDate()}-${index}`);
       })
@@ -9425,14 +9579,22 @@ var MonthsView_ref =  true ? {
 } : 0;
 const MonthsView = () => {
   const {
+    dateTime,
     calendarViewDateTime,
     dateMinDT,
     dateMaxDT,
+    lastChangedDate,
+    highlightDates,
     setCalendarType,
     setDateTime,
     setCalendarViewDateTime,
     onMonthChange
   } = useDatePickerContext();
+  const isHighlightEnabled = !!highlightDates?.enabled;
+  const {
+    otherDate
+  } = highlightDates || {};
+  const otherDateDT = otherDate && external_luxon_namespaceObject.DateTime.fromJSDate(otherDate);
   const handleMonthSelect = event => {
     const {
       target
@@ -9467,10 +9629,19 @@ const 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?.toFormat('yyyy-MM');
+      const isCalendarSecondDateSelected = currentMonthDT.toFormat('yyyy-MM') === otherDateDT?.toFormat('yyyy-MM');
+      let isHighlightDate = false;
+      if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
+        isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT < currentMonthDT && currentMonthDT < dateTime : dateTime < currentMonthDT && currentMonthDT < otherDateDT;
+      }
       return (0,jsx_runtime_namespaceObject.jsx)(MonthsViewCell, {
         isCalendarMonth: isCalendarMonth,
         "aria-disabled": isAriaDisabled,
         "aria-label": `${month}, ${calendarViewDateTime?.year}`,
+        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isHighlighted: isHighlightDate,
         children: month
       }, month);
     })
@@ -9484,16 +9655,20 @@ function YearsView_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 
 
 
+
 var YearsView_ref =  true ? {
   name: "1n393qe",
   styles: "flex-wrap:wrap;overflow-y:auto;height:280px;align-content:flex-start"
 } : 0;
 const YearsView = () => {
   const {
+    dateTime,
     calendarViewDateTime,
     dateMinParts,
     dateMaxParts,
     formatIndexes,
+    lastChangedDate,
+    highlightDates,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
@@ -9504,6 +9679,11 @@ const YearsView = () => {
     yearsFrom: dateMinParts[formatIndexes['year']],
     yearsCount: dateMaxParts[formatIndexes['year']] - dateMinParts[formatIndexes['year']] + 1
   });
+  const isHighlightEnabled = !!highlightDates?.enabled;
+  const {
+    otherDate
+  } = highlightDates || {};
+  const otherDateDT = otherDate && external_luxon_namespaceObject.DateTime.fromJSDate(otherDate);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (calendarViewDateTime && wrapper.current) {
       wrapper.current.querySelector('[aria-current=date]')?.scrollIntoView({
@@ -9537,8 +9717,17 @@ const YearsView = () => {
       if (isCalendarYear) {
         additionalProps['aria-current'] = 'date';
       }
+      const isCalendarFirstDateSelected = year.toString() === dateTime?.toFormat('yyyy');
+      const isCalendarSecondDateSelected = year.toString() === otherDateDT?.toFormat('yyyy');
+      let isHighlightDate = false;
+      if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
+        isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT.year < year && year < dateTime.year : dateTime.year < year && year < otherDateDT.year;
+      }
       return (0,jsx_runtime_namespaceObject.jsx)(YearsViewCell, {
         isCalendarYear: isCalendarYear,
+        isCalendarFirstDateSelected: isCalendarFirstDateSelected,
+        isCalendarSecondDateSelected: isCalendarSecondDateSelected,
+        isHighlighted: isHighlightDate,
         ...additionalProps,
         children: year
       }, `year-${year}`);
@@ -9738,11 +9927,17 @@ const DatePickerTrigger = () => {
     label,
     openCalendarMode,
     inputRef,
+    inputProps,
     disabled,
     helperText,
+    showCalendarIcon,
     onBlur: handleBlur,
     setIsOpen
   } = useDatePickerContext();
+  const {
+    inputProps: inputElementProps,
+    ...restInputProps
+  } = inputProps || {};
   const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)(); // Using FormProvider from react-hook-form
   const useFormResult = (0,external_react_hook_form_namespaceObject.useForm)();
   const theme = (0,react_namespaceObject.useTheme)();
@@ -9763,25 +9958,29 @@ const DatePickerTrigger = () => {
     if (openCalendarMode === 'both' || openCalendarMode === 'input' && tagName === 'input' || openCalendarMode === 'icon' && tagName === 'button') {
       toggleOpen();
     }
+    if (e.currentTarget instanceof HTMLInputElement) {
+      inputProps?.inputProps?.onClick?.(e);
+    }
   };
   return (0,jsx_runtime_namespaceObject.jsxs)((external_react_default()).Fragment, {
     children: [label && (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
-      htmlFor: `field-${name}`,
+      htmlFor: name,
       children: label
     }), (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
       asChild: true,
       children: (0,jsx_runtime_namespaceObject.jsx)(Input_Input, {
         name: name,
         placeholder: format,
-        showHelperText: true,
         ref: inputRef,
         disabled: disabled,
         register: register,
         inputProps: {
           onBlur: handleBlur,
           onClick: handleToggleOpen,
-          id: `field-${name}`,
-          'data-testid': 'datepicker-input'
+          id: inputProps?.inputProps?.id || name,
+          'data-testid': 'datepicker-input',
+          autoComplete: 'off',
+          ...inputElementProps
         },
         errors: fieldError,
         status: fieldStatus,
@@ -9790,7 +9989,7 @@ const DatePickerTrigger = () => {
           name: "lhoo11",
           styles: "&>span::first-letter{text-transform:uppercase;}"
         } : 0),
-        endElement: (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
+        endElement: showCalendarIcon ? (0,jsx_runtime_namespaceObject.jsx)(Button_Button, {
           endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
             name: "calendar",
             size: 16,
@@ -9808,7 +10007,8 @@ const DatePickerTrigger = () => {
               display: 'none'
             }
           },  true ? "" : 0,  true ? "" : 0)
-        })
+        }) : undefined,
+        ...restInputProps
       })
     })]
   });
@@ -9842,11 +10042,15 @@ const DatePickerContent = () => {
 const DatePickerInner = ({
   format = DEFAULT_MASK_FORMAT,
   openCalendarMode = 'icon',
+  showCalendarIcon = true,
+  isOpenToggle,
   ...rest
 }, inputRef) => (0,jsx_runtime_namespaceObject.jsx)(DatePickerProvider, {
   format: format,
   openCalendarMode: openCalendarMode,
   inputRef: inputRef,
+  showCalendarIcon: showCalendarIcon,
+  isOpenToggle: isOpenToggle,
   ...rest,
   children: (0,jsx_runtime_namespaceObject.jsx)(DatePickerContent, {})
 });
@@ -9856,122 +10060,866 @@ const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(Da
 ;// ./src/components/Field/FieldProvider.ts
 
 const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
-;// ./src/components/Field/index.ts
-
-
-
-;// ./src/components/TableFilters/styles.ts
-function TableFilters_styles_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)."; }
+;// ./src/components/Field/FieldRoot.tsx
 
-const tableFilterPopoverContentStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", theme.colors.greyDropdownMain, ";border-radius:20px;padding:20px 20px 14px 18px;width:340px;background:", theme.colors.white, ";z-index:1;" + ( true ? "" : 0),  true ? "" : 0);
-const tableFilterDividerStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", theme.colors.greyDropdownMain, ";width:calc(100% + 38px);margin:22px auto 14px -19px;" + ( true ? "" : 0),  true ? "" : 0);
-const baseButtonStyle =  true ? {
-  name: "jk3zq0",
-  styles: "padding:0 14px;height:38px;border-radius:5px;font-size:14px;font-weight:600;&:hover{box-shadow:none;}"
-} : 0;
-;// ./src/components/TableFilters/TableFilterTrigger.tsx
 
+const FieldRoot = ({
+  children,
+  ...props
+}) => {
+  const {
+    disabled = false,
+    status = 'basic',
+    forwardFocus = true,
+    ...divProps
+  } = props;
+  return (0,jsx_runtime_namespaceObject.jsx)("div", {
+    ...divProps,
+    children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
+      value: {
+        disabled,
+        status,
+        forwardFocus
+      },
+      children: children
+    })
+  });
+};
+;// ./src/components/Field/FieldLabel.tsx
 
 
 
-const filterButtonStyles = count => theme => /*#__PURE__*/(0,react_namespaceObject.css)("height:40px;color:", theme.colors.greyDisabled, ";background:", theme.colors.white, ";border:1px solid ", theme.colors.greyDropdownMain, ";border-radius:6.5px;padding:0 11px 0 13px;font-size:14px;letter-spacing:normal;gap:5px;user-select:none;&::before{display:block;content:'\"Filter\"';content:", count ? '"More"' : '"Filter"', ";}@media screen and (min-width: 900px){&::before{content:'More';}}&:hover{border-color:", theme.colors.greyDropdownFocused, ";}&:active{border-color:", theme.colors.blueNotification, ";}&:disabled{background:", theme.colors.grey, ";}" + ( true ? "" : 0),  true ? "" : 0);
-const TableFilterTrigger = ({
+const FieldLabel = ({
   children,
-  count,
-  ...rest
+  ...props
 }) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  return (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
-    variant: "custom",
-    css: filterButtonStyles(count),
-    endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
-      name: "filter",
-      color: theme.colors.greyFilterIcon,
-      size: 20
-    }),
-    ...rest,
+  const ctx = useFieldContext();
+  return (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
+    isDisabled: ctx.disabled,
+    ...props,
     children: children
   });
 };
-;// ./src/components/TableFilters/TableFilterTriggerWithNotification.tsx
-function TableFilterTriggerWithNotification_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)."; }
+;// ./src/components/Field/FieldControl.tsx
 
 
 
 
-var TableFilterTriggerWithNotification_ref =  true ? {
-  name: "3e57yb",
-  styles: "width:16px;height:16px;min-width:16px;display:flex;justify-content:center;align-items:center"
-} : 0;
-const TableFilterTriggerWithNotification = ({
-  children,
-  count,
-  visible = true
+const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
+  target: "e1lr2tz0"
+} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
+  status,
+  theme
 }) => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  const css = {
-    display: visible ? 'flex' : 'none'
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.grey;
+}, ";background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
+  disabled,
+  theme
+}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";box-shadow:none;}&:hover{cursor:", ({
+  disabled
+}) => disabled ? 'default' : 'pointer', ";}&:focus-within,&:active{border-color:", ({
+  status,
+  disabled,
+  theme
+}) => {
+  if (disabled) return theme.colors.grey;
+  if (status === 'error') return theme.colors.red;
+  if (status === 'success') return theme.colors.greenLighter;
+  return theme.colors.blueRoyal;
+}, ";}" + ( true ? "" : 0));
+const isForwardRefComponent = component => {
+  if (typeof component.type === 'object' && component.type.$$typeof?.toString() === 'Symbol(react.forward_ref)') {
+    return true;
+  }
+  return false;
+};
+const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function FieldControl({
+  children,
+  controlRef,
+  ...props
+}, ref) {
+  const ctx = useFieldContext();
+  const baseProps = {
+    ...props,
+    ...ctx
   };
-  if (count) {
-    css.background = theme.colors.blueDropdownWithSelectedItems;
-    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+  const internalRef = (0,external_react_namespaceObject.useRef)(null);
+  let _children = typeof children === 'function' ? children(ctx) : children;
+  if (ctx.forwardFocus && /*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(_children) && isForwardRefComponent(_children)) {
+    const setRef = defaultRef => element => {
+      internalRef.current = element;
+      if (defaultRef) {
+        if (typeof defaultRef === 'function') {
+          defaultRef(element);
+        } else {
+          defaultRef.current = element;
+        }
+      }
+    };
+    _children = /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(_children, {
+      ref: setRef(children.ref)
+    });
   }
-  return (0,jsx_runtime_namespaceObject.jsxs)(TableFilterTrigger, {
-    css: css,
-    count: count,
-    children: [children, count ? (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdownNotification_MultipleDropdownNotification, {
-      as: 'div',
-      css: TableFilterTriggerWithNotification_ref,
-      "data-testid": 'trigger-notification',
-      children: count
-    }) : '']
+  return (0,jsx_runtime_namespaceObject.jsx)(FieldControlBase, {
+    ...baseProps,
+    ref: ref,
+    onClick: event => {
+      baseProps.onClick?.(event);
+      if (controlRef) {
+        controlRef.current?.focus?.();
+      } else if (internalRef.current) {
+        internalRef.current?.focus?.();
+      }
+    },
+    children: _children
   });
-};
-;// ./src/components/TableFilters/TableFiltersAccordion.tsx
-
-
-
-const TableFiltersAccordion = props => (0,jsx_runtime_namespaceObject.jsx)(Accordion, {
-  ...props,
-  css: /*#__PURE__*/(0,react_namespaceObject.css)({
-    display: props.isHidden ? 'none' : 'flex',
-    padding: '10px 0',
-    '&:last-child': {
-      paddingBottom: 0
-    }
-  },  true ? "" : 0,  true ? "" : 0)
 });
-;// ./src/components/TableFilters/TableFiltersAccordionContent.tsx
-
+;// ./src/components/Field/FieldDescription.tsx
 
 
-const TableFiltersAccordionContent = ({
-  isOpened,
-  children,
-  ...rest
-}) => (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
-  ...rest,
-  isOpened: isOpened,
-  css: /*#__PURE__*/(0,react_namespaceObject.css)({
-    padding: isOpened ? '18px 3px 5px 3px' : 0
-  },  true ? "" : 0,  true ? "" : 0),
-  children: children
-});
-;// ./src/components/TableFilters/TableFilterCheckbox.tsx
 
+const FieldDescription = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'basic') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "basic",
+    children: children
+  });
+};
+;// ./src/components/Field/FieldError.tsx
 
 
 
-const getStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("margin:0 0 14px;& span{margin-left:16px;color:", theme.colors.greyDisabled, ";user-select:none;}& input+div{border-radius:2px;&::before{border-radius:2px;}}", checkboxStyles.blueInput(theme), ";" + ( true ? "" : 0),  true ? "" : 0);
-const TableFilterCheckbox = props => {
-  const theme = (0,react_namespaceObject.useTheme)();
-  const styles = getStyles(theme);
-  return (0,jsx_runtime_namespaceObject.jsx)(Checkbox_Checkbox, {
-    ...props,
-    css: styles
+const FieldError = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'error') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "error",
+    children: children
   });
 };
-;// ./src/components/Popover/PopoverClose.tsx
+;// ./src/components/Field/FieldSuccess.tsx
+
+
+
+const FieldSuccess = ({
+  children
+}) => {
+  const ctx = useFieldContext();
+  if (ctx.status !== 'success') {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
+    status: "success",
+    children: children
+  });
+};
+;// ./src/components/DateRangePicker/constants.ts
+const constants_DEFAULT_MASK_FORMAT = 'mm/dd/yyyy';
+const constants_DEFAULT_MASK = '__/__/____';
+const constants_MONTHS = (/* unused pure expression or super */ null && (['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 constants_OUT_OF_RANGE = 'The date is out of the defined range';
+const constants_INVALID_DATE = 'Invalid date';
+;// ./src/components/DateRangePicker/DateRangePicker.tsx
+
+function DateRangePicker_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)."; }
+
+
+
+
+
+
+
+// keep the same place for datepicker (from / to)
+// don't close the datepicker while switching between from / to
+// add errors (date to less than date from...)
+// add a logic to reset date to when date to less than date from
+// create subcomponents
+// hover daterange effect for the datepicker (from design)
+
+var DateRangePicker_ref =  true ? {
+  name: "mwgsbg",
+  styles: "& input{border:none !important;}"
+} : 0;
+var DateRangePicker_ref2 =  true ? {
+  name: "jpxugn",
+  styles: "margin:0 14px"
+} : 0;
+var DateRangePicker_ref3 =  true ? {
+  name: "ud49p1",
+  styles: "color:inherit;&::first-letter{text-transform:uppercase;}"
+} : 0;
+const DateRangePicker = ({
+  format = constants_DEFAULT_MASK_FORMAT,
+  openCalendarMode = 'both',
+  name,
+  label,
+  value,
+  defaultValue,
+  ...rest
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  // const [_value, _setValue] = useState(value || []);
+  const formContext = (0,external_react_hook_form_namespaceObject.useFormContext)();
+  const [currentStatus, setCurrentStatus] = (0,external_react_namespaceObject.useState)(rest.status);
+  const errorsFrom = formContext.formState.errors[`${name}From`]?.message;
+  const errorsTo = formContext.formState.errors[`${name}To`]?.message;
+  const errorMessage = [errorsFrom, errorsTo].filter(Boolean);
+  const {
+    disabled
+  } = rest;
+  const [fromOpenToggle, setFromOpenToggle] = (0,external_react_namespaceObject.useState)();
+  const [toOpenToggle, setToOpenToggle] = (0,external_react_namespaceObject.useState)();
+  const [changedDate, setChangedDate] = (0,external_react_namespaceObject.useState)([null, null]);
+  const [lastFocusedElement, setLastFocusedElement] = (0,external_react_namespaceObject.useState)('from');
+  const [valueFrom, valueTo] = value || [];
+  const [defaultValueFrom, defaultValueTo] = defaultValue || [];
+  const datepickerFromRef = (0,external_react_namespaceObject.useRef)(null);
+  const datepickerToRef = (0,external_react_namespaceObject.useRef)(null);
+
+  // const datepickerFromAdditionalProps = {};
+  // const datepickerToAdditionalProps = {};
+
+  // useEffect(() => {
+  //   _setValue(value || []);
+  // }, [value]);
+
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setCurrentStatus(rest.status);
+  }, [rest.status]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    if (errorMessage.length) {
+      setCurrentStatus('error');
+    } else {
+      setCurrentStatus(rest.status || 'basic');
+    }
+  }, [errorMessage]);
+  const toggleOpen = () => {
+    if (lastFocusedElement === 'from') {
+      setFromOpenToggle(current => !current);
+      setTimeout(() => datepickerFromRef.current?.focus(), 5);
+    } else {
+      setToOpenToggle(current => !current);
+      setTimeout(() => datepickerToRef.current?.focus(), 5);
+    }
+  };
+  const handleToggleOpen = e => {
+    const tagName = e.currentTarget.tagName.toLowerCase();
+    if (openCalendarMode === 'both' || openCalendarMode === 'input' && tagName === 'input' || openCalendarMode === 'icon' && tagName === 'button') {
+      toggleOpen();
+    }
+    if (tagName === 'input' && rest.inputProps?.inputProps?.onClick) {
+      rest.inputProps.inputProps.onClick(e);
+    }
+  };
+  const handleFocus = e => {
+    const {
+      name
+    } = e.currentTarget;
+    setLastFocusedElement(name.endsWith('From') ? 'from' : 'to');
+    rest.inputProps?.inputProps?.onFocus?.(e);
+  };
+  const onChangeFrom = date => {
+    const newDate = date || null;
+    if (newDate !== changedDate?.[0]) {
+      const changedData = [newDate, changedDate ? changedDate[1] : null];
+      setChangedDate(changedData);
+      if (!changedDate?.[1]) {
+        setLastFocusedElement('to');
+        setToOpenToggle(true);
+      }
+      rest.onChange?.(changedData);
+    }
+  };
+  const onChangeTo = date => {
+    const newDate = date || null;
+    if (changedDate[0] && newDate) {
+      const selectedDateFromDT = external_luxon_namespaceObject.DateTime.fromJSDate(changedDate[0]);
+      const selectedDateToDT = external_luxon_namespaceObject.DateTime.fromJSDate(newDate);
+      if (selectedDateFromDT > selectedDateToDT) {
+        const changedData = [newDate, null];
+        setChangedDate(changedData);
+
+        // const dateStr = DateTime.fromJSDate(newDate).toFormat(
+        //   format.replace('mm', 'MM'),
+        // );
+        // _setValue([dateStr, _value[1] === undefined ? '' : undefined]);
+        // _setValue([dateStr, undefined]);
+        datepickerToRef.current?.focus();
+        rest.onChange?.(changedData);
+        return;
+      }
+    }
+    if (newDate !== changedDate?.[1]) {
+      const changedData = [changedDate ? changedDate[0] : null, newDate];
+      setChangedDate(changedData);
+      datepickerToRef.current?.focus();
+      rest.onChange?.(changedData);
+    }
+  };
+
+  // TODO: change status dynamically
+  return (0,jsx_runtime_namespaceObject.jsxs)(FieldRoot, {
+    status: currentStatus,
+    disabled: rest.disabled,
+    children: [(0,jsx_runtime_namespaceObject.jsx)(FieldLabel, {
+      htmlFor: lastFocusedElement === 'from' ? `${name}From` : `${name}To`,
+      children: label
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
+      children: (0,jsx_runtime_namespaceObject.jsxs)(Wrapper_Wrapper, {
+        css: DateRangePicker_ref,
+        children: [(0,jsx_runtime_namespaceObject.jsx)(DatePicker, {
+          format: format,
+          openCalendarMode: openCalendarMode,
+          isOpenToggle: fromOpenToggle,
+          name: `${name}From`,
+          value: valueFrom,
+          defaultValue: defaultValueFrom,
+          label: '',
+          showCalendarIcon: false,
+          ...rest,
+          ref: datepickerFromRef,
+          onChange: onChangeFrom,
+          highlightDates: {
+            enabled: true,
+            mode: 'dateFrom',
+            otherDate: changedDate[1]
+          },
+          inputProps: {
+            showStatusIcon: false,
+            ...rest.inputProps,
+            inputProps: {
+              ...rest.inputProps?.inputProps,
+              onFocus: handleFocus,
+              onClick: handleToggleOpen
+            }
+          }
+        }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+          name: "carrot-right",
+          size: 18,
+          color: theme.colors.greyDarker80,
+          css: DateRangePicker_ref2
+        }), (0,jsx_runtime_namespaceObject.jsx)(DatePicker, {
+          format: format,
+          openCalendarMode: openCalendarMode,
+          isOpenToggle: toOpenToggle,
+          name: `${name}To`,
+          value: valueTo,
+          defaultValue: defaultValueTo,
+          label: '',
+          showCalendarIcon: false,
+          ...rest,
+          ref: datepickerToRef,
+          onChange: onChangeTo,
+          highlightDates: {
+            enabled: true,
+            mode: 'dateTo',
+            otherDate: changedDate[0]
+          },
+          inputProps: {
+            showStatusIcon: false,
+            ...rest.inputProps,
+            inputProps: {
+              ...rest.inputProps?.inputProps,
+              onFocus: handleFocus,
+              onClick: handleToggleOpen
+            }
+          }
+        }), (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,
+          css: /*#__PURE__*/(0,react_namespaceObject.css)({
+            padding: 0,
+            margin: '0 8px 0 14px',
+            cursor: openCalendarMode === 'input' || disabled ? 'default' : 'pointer',
+            '&:focus::before': {
+              display: 'none'
+            }
+          },  true ? "" : 0,  true ? "" : 0)
+        })]
+      })
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldDescription, {
+      children: rest.helperText
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldError, {
+      children: errorMessage ? errorMessage.map((error, index) => (0,jsx_runtime_namespaceObject.jsx)("span", {
+        css: DateRangePicker_ref3,
+        children: error
+      }, `error-${index}`)) : rest.helperText
+    }), (0,jsx_runtime_namespaceObject.jsx)(FieldSuccess, {
+      children: rest.helperText
+    })]
+  });
+};
+;// ./src/components/DateRangePicker/index.ts
+
+;// ./src/components/Drawer/DrawerProvider.tsx
+
+const [DrawerProvider, useDrawerContext] = (0,hooks_namespaceObject.createSafeContext)('useDrawer must be used within a DrawerProvider');
+;// ./src/components/Drawer/useDrawer.tsx
+
+
+
+const useDrawer = ({
+  opened,
+  duration = 200,
+  defaultOpened,
+  dismissable = false,
+  position = 'left',
+  title,
+  withCloseButton = false,
+  onOpenChange
+} = {}) => {
+  const [_opened, setOpened] = (0,hooks_namespaceObject.useUncontrolled)({
+    value: opened,
+    defaultValue: defaultOpened,
+    finalValue: false,
+    onChange: onOpenChange
+  });
+  const [portalNode, setPortalNode] = (0,external_react_namespaceObject.useState)(null);
+  const toggle = open => {
+    const _open = open ?? !_opened;
+    setOpened(_open);
+  };
+  const {
+    context,
+    refs
+  } = (0,external_floating_ui_react_namespaceObject.useFloating)({
+    open: _opened,
+    onOpenChange: setOpened
+  });
+  const transition = (0,external_floating_ui_react_namespaceObject.useTransitionStatus)(context, {
+    duration
+  });
+  const dismiss = (0,external_floating_ui_react_namespaceObject.useDismiss)(context, {
+    enabled: dismissable
+  });
+  const click = (0,external_floating_ui_react_namespaceObject.useClick)(context);
+  const interactions = (0,external_floating_ui_react_namespaceObject.useInteractions)([dismiss, click]);
+  return {
+    opened: _opened,
+    dismissable,
+    position,
+    duration,
+    floatingContext: context,
+    interactions,
+    transition,
+    title,
+    withCloseButton,
+    portalNode,
+    setFloating: refs.setFloating,
+    setPortalNode,
+    toggle
+  };
+};
+;// ./src/components/Drawer/DrawerRoot.tsx
+
+
+
+const Drawer = ({
+  children,
+  store: controlledStore
+}) => {
+  const uncontrolledStore = useDrawer({});
+  const store = controlledStore || uncontrolledStore;
+  if (!store.transition.isMounted) {
+    return null;
+  }
+  return (0,jsx_runtime_namespaceObject.jsx)(DrawerProvider, {
+    value: {
+      store
+    },
+    children: children
+  });
+};
+;// ./src/components/Drawer/DrawerOverlay.tsx
+
+
+
+
+const StyledFloatingOverlay = /*#__PURE__*/base_default()(external_floating_ui_react_namespaceObject.FloatingOverlay,  true ? {
+  shouldForwardProp: propName => !propName.startsWith('$'),
+  target: "ebw2uwr0"
+} : 0)("transition-property:opacity;transition-duration:", ({
+  $duration
+}) => $duration, "ms;transition-timing-function:ease;opacity:", ({
+  $transitionStatus
+}) => $transitionStatus === 'close' ? 0 : 1, ";", ({
+  $inPortal
+}) => !$inPortal && `
+    overflow: hidden !important;
+    position: absolute !important;
+  `, " pointer-events:", ({
+  $dismissable
+}) => $dismissable ? 'auto' : 'none', ";" + ( true ? "" : 0));
+const DrawerOverlay = ({
+  children,
+  ...props
+}) => {
+  const ctx = useDrawerContext();
+  const {
+    duration,
+    dismissable,
+    transition,
+    portalNode
+  } = ctx.store;
+  const inPortal = portalNode !== null;
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledFloatingOverlay, {
+    $inPortal: inPortal,
+    $duration: duration,
+    $dismissable: dismissable,
+    $transitionStatus: transition.status,
+    ...props,
+    children: children
+  });
+};
+;// ./src/components/Drawer/DrawerPortal.tsx
+
+
+
+
+const DrawerPortal = ({
+  children,
+  ...props
+}) => {
+  const ctx = useDrawerContext();
+  const portalNode = (0,external_floating_ui_react_namespaceObject.useFloatingPortalNode)();
+  (0,external_react_namespaceObject.useEffect)(() => {
+    ctx.store.setPortalNode(portalNode);
+    return () => ctx.store.setPortalNode(null);
+  }, [portalNode]);
+  return (0,jsx_runtime_namespaceObject.jsx)(external_floating_ui_react_namespaceObject.FloatingPortal, {
+    root: portalNode,
+    ...props,
+    children: children
+  });
+};
+;// ./src/components/Drawer/DrawerHeader.tsx
+
+function DrawerHeader_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)."; }
+
+
+const StyledDrawerHeader = /*#__PURE__*/base_default()("header",  true ? {
+  target: "e1boxa1c0"
+} : 0)( true ? {
+  name: "loooz6",
+  styles: "position:sticky;top:0;display:flex;align-items:center;justify-content:space-between"
+} : 0);
+const DrawerHeader = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerHeader({
+  children,
+  ...props
+}, ref) {
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerHeader, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerTitle.tsx
+
+function DrawerTitle_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)."; }
+
+
+const StyledDrawerTitle = /*#__PURE__*/base_default()("h2",  true ? {
+  target: "e1cuo4pw0"
+} : 0)( true ? {
+  name: "10bzkug",
+  styles: "font-weight:600;font-size:20px;text-align:center"
+} : 0);
+const DrawerTitle = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerTitle({
+  children,
+  ...props
+}, ref) {
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerTitle, {
+    ref: ref,
+    ...props,
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerCloseButton.tsx
+
+
+
+
+
+
+
+const StyledDrawerCloseButton = /*#__PURE__*/base_default()(Button_Button,  true ? {
+  target: "evbyx180"
+} : 0)("margin-inline-start:auto;padding:0;display:inline-flex;align-items:center;justify-content:center;height:32px;width:32px;background:", ({
+  theme
+}) => theme.colors.greyFocused, ";" + ( true ? "" : 0));
+const notReachable = _ => _;
+const getIconName = position => {
+  switch (position) {
+    case 'top':
+      return 'carrot-up';
+    case 'bottom':
+      return 'carrot-down';
+    case 'left':
+      return 'carrot-left';
+    case 'right':
+      return 'carrot-right';
+    default:
+      return notReachable(position);
+  }
+};
+const DrawerCloseButton = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerCloseButton({
+  children,
+  ...props
+}, ref) {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const ctx = useDrawerContext();
+  const iconName = getIconName(ctx.store.position);
+  return (0,jsx_runtime_namespaceObject.jsx)(StyledDrawerCloseButton, {
+    "data-testid": "drawer-close-button",
+    startIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: iconName,
+      size: 18,
+      color: theme.colors.greyDarker
+    }),
+    ref: ref,
+    onClick: () => ctx.store.toggle(false),
+    ...props,
+    children: children
+  });
+});
+;// ./src/components/Drawer/DrawerContent.tsx
+
+
+
+
+
+
+
+
+const ContentWrapper = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eoa7lk01"
+} : 0)("display:flex;justify-content:", ({
+  position
+}) => position === 'left' ? 'flex-start' : 'flex-end', ";align-items:", ({
+  position
+}) => position === 'top' ? 'flex-start' : 'flex-end', ";height:100%;" + ( true ? "" : 0));
+const getBorderStyle = (position, color) => {
+  const borders = {
+    left: `border-right: 1px solid ${color};`,
+    right: `border-left: 1px solid ${color};`,
+    top: `border-bottom: 1px solid ${color};`,
+    bottom: `border-top: 1px solid ${color};`
+  };
+  return borders[position];
+};
+const getTransform = (position, open) => {
+  const closedTransforms = {
+    left: 'translateX(-100%)',
+    right: 'translateX(100%)',
+    top: 'translateY(-100%)',
+    bottom: 'translateY(100%)'
+  };
+  return open ? 'translate(0)' : closedTransforms[position];
+};
+const StyledDrawerContent = /*#__PURE__*/base_default()("div",  true ? {
+  target: "eoa7lk00"
+} : 0)("flex:1;background-color:#f4f5f9;height:100%;pointer-events:auto;transition:transform ", ({
+  duration
+}) => duration, "ms ease-in-out;", ({
+  position,
+  theme
+}) => getBorderStyle(position, theme.colors.greyFocused), " transform:", ({
+  position
+}) => getTransform(position, false), ";&[data-transition='open']{transform:", ({
+  position
+}) => getTransform(position, true), ";}" + ( true ? "" : 0));
+const DrawerContent = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(function DrawerContent({
+  children,
+  ...props
+}, ref) {
+  const ctx = useDrawerContext();
+  const {
+    title,
+    withCloseButton,
+    position,
+    duration,
+    transition,
+    interactions,
+    setFloating
+  } = ctx.store;
+  const mergedRef = (0,external_floating_ui_react_namespaceObject.useMergeRefs)([setFloating, ref]);
+  const hasHeader = !!title || withCloseButton;
+  return (0,jsx_runtime_namespaceObject.jsx)(ContentWrapper, {
+    position: position,
+    children: (0,jsx_runtime_namespaceObject.jsxs)(StyledDrawerContent, {
+      ref: mergedRef,
+      "data-transition": transition.status,
+      "data-position": position,
+      position: position,
+      duration: duration,
+      ...interactions.getFloatingProps(props),
+      children: [hasHeader && (0,jsx_runtime_namespaceObject.jsxs)(DrawerHeader, {
+        children: [title && (0,jsx_runtime_namespaceObject.jsx)(DrawerTitle, {
+          children: title
+        }), withCloseButton && (0,jsx_runtime_namespaceObject.jsx)(DrawerCloseButton, {})]
+      }), children]
+    })
+  });
+});
+;// ./src/components/Drawer/index.parts.ts
+
+
+
+
+
+
+
+;// ./src/components/Drawer/index.ts
+
+
+
+;// ./src/components/Field/index.parts.ts
+
+
+
+
+
+
+;// ./src/components/Field/index.ts
+
+
+
+;// ./src/components/TableFilters/styles.ts
+function TableFilters_styles_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)."; }
+
+const tableFilterPopoverContentStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", theme.colors.greyDropdownMain, ";border-radius:20px;padding:20px 20px 14px 18px;width:340px;background:", theme.colors.white, ";z-index:1;" + ( true ? "" : 0),  true ? "" : 0);
+const tableFilterDividerStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("border:1px solid ", theme.colors.greyDropdownMain, ";width:calc(100% + 38px);margin:22px auto 14px -19px;" + ( true ? "" : 0),  true ? "" : 0);
+const baseButtonStyle =  true ? {
+  name: "jk3zq0",
+  styles: "padding:0 14px;height:38px;border-radius:5px;font-size:14px;font-weight:600;&:hover{box-shadow:none;}"
+} : 0;
+;// ./src/components/TableFilters/TableFilterTrigger.tsx
+
+
+
+
+const filterButtonStyles = count => theme => /*#__PURE__*/(0,react_namespaceObject.css)("height:40px;color:", theme.colors.greyDisabled, ";background:", theme.colors.white, ";border:1px solid ", theme.colors.greyDropdownMain, ";border-radius:6.5px;padding:0 11px 0 13px;font-size:14px;letter-spacing:normal;gap:5px;user-select:none;&::before{display:block;content:'\"Filter\"';content:", count ? '"More"' : '"Filter"', ";}@media screen and (min-width: 900px){&::before{content:'More';}}&:hover{border-color:", theme.colors.greyDropdownFocused, ";}&:active{border-color:", theme.colors.blueNotification, ";}&:disabled{background:", theme.colors.grey, ";}" + ( true ? "" : 0),  true ? "" : 0);
+const TableFilterTrigger = ({
+  children,
+  count,
+  ...rest
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  return (0,jsx_runtime_namespaceObject.jsx)(PopoverTrigger, {
+    variant: "custom",
+    css: filterButtonStyles(count),
+    endIcon: (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
+      name: "filter",
+      color: theme.colors.greyFilterIcon,
+      size: 20
+    }),
+    ...rest,
+    children: children
+  });
+};
+;// ./src/components/TableFilters/TableFilterTriggerWithNotification.tsx
+function TableFilterTriggerWithNotification_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 TableFilterTriggerWithNotification_ref =  true ? {
+  name: "3e57yb",
+  styles: "width:16px;height:16px;min-width:16px;display:flex;justify-content:center;align-items:center"
+} : 0;
+const TableFilterTriggerWithNotification = ({
+  children,
+  count,
+  visible = true
+}) => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const css = {
+    display: visible ? 'flex' : 'none'
+  };
+  if (count) {
+    css.background = theme.colors.blueDropdownWithSelectedItems;
+    css.borderColor = theme.colors.blueDropdownWithSelectedItemsBorder;
+  }
+  return (0,jsx_runtime_namespaceObject.jsxs)(TableFilterTrigger, {
+    css: css,
+    count: count,
+    children: [children, count ? (0,jsx_runtime_namespaceObject.jsx)(MultipleDropdownNotification_MultipleDropdownNotification, {
+      as: 'div',
+      css: TableFilterTriggerWithNotification_ref,
+      "data-testid": 'trigger-notification',
+      children: count
+    }) : '']
+  });
+};
+;// ./src/components/TableFilters/TableFiltersAccordion.tsx
+
+
+
+const TableFiltersAccordion = props => (0,jsx_runtime_namespaceObject.jsx)(Accordion, {
+  ...props,
+  css: /*#__PURE__*/(0,react_namespaceObject.css)({
+    display: props.isHidden ? 'none' : 'flex',
+    padding: '10px 0',
+    '&:last-child': {
+      paddingBottom: 0
+    }
+  },  true ? "" : 0,  true ? "" : 0)
+});
+;// ./src/components/TableFilters/TableFiltersAccordionContent.tsx
+
+
+
+const TableFiltersAccordionContent = ({
+  isOpened,
+  children,
+  ...rest
+}) => (0,jsx_runtime_namespaceObject.jsx)(AccordionContent, {
+  ...rest,
+  isOpened: isOpened,
+  css: /*#__PURE__*/(0,react_namespaceObject.css)({
+    padding: isOpened ? '18px 3px 5px 3px' : 0
+  },  true ? "" : 0,  true ? "" : 0),
+  children: children
+});
+;// ./src/components/TableFilters/TableFilterCheckbox.tsx
+
+
+
+
+const getStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("margin:0 0 14px;& span{margin-left:16px;color:", theme.colors.greyDisabled, ";user-select:none;}& input+div{border-radius:2px;&::before{border-radius:2px;}}", checkboxStyles.blueInput(theme), ";" + ( true ? "" : 0),  true ? "" : 0);
+const TableFilterCheckbox = props => {
+  const theme = (0,react_namespaceObject.useTheme)();
+  const styles = getStyles(theme);
+  return (0,jsx_runtime_namespaceObject.jsx)(Checkbox_Checkbox, {
+    ...props,
+    css: styles
+  });
+};
+;// ./src/components/Popover/PopoverClose.tsx
 
 
 
@@ -10762,173 +11710,6 @@ const Filters = ({
 };
 ;// ./src/components/Filters/index.ts
 
-;// ./src/components/Field/FieldRoot.tsx
-
-
-const FieldRoot = ({
-  children,
-  ...props
-}) => {
-  const {
-    disabled = false,
-    status = 'basic',
-    forwardFocus = true,
-    ...divProps
-  } = props;
-  return (0,jsx_runtime_namespaceObject.jsx)("div", {
-    ...divProps,
-    children: (0,jsx_runtime_namespaceObject.jsx)(FieldProvider, {
-      value: {
-        disabled,
-        status,
-        forwardFocus
-      },
-      children: children
-    })
-  });
-};
-;// ./src/components/Field/FieldLabel.tsx
-
-
-
-const FieldLabel = ({
-  children,
-  ...props
-}) => {
-  const ctx = useFieldContext();
-  return (0,jsx_runtime_namespaceObject.jsx)(Label_Label, {
-    isDisabled: ctx.disabled,
-    ...props,
-    children: children
-  });
-};
-;// ./src/components/Field/FieldControl.tsx
-
-
-
-
-const FieldControlBase = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1lr2tz0"
-} : 0)("display:flex;align-items:center;min-height:44px;height:auto;border-radius:8px;overflow:hidden;border:1px solid ", ({
-  status,
-  theme
-}) => {
-  if (status === 'error') return theme.colors.red;
-  if (status === 'success') return theme.colors.greenLighter;
-  return theme.colors.grey;
-}, ";background:", ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";&>*{background:transparent;}&:active,&:hover{background:", ({
-  disabled,
-  theme
-}) => disabled ? theme.colors.greyLighter : theme.colors.white, ";box-shadow:none;}&:hover{cursor:", ({
-  disabled
-}) => disabled ? 'default' : 'pointer', ";}&:focus-within,&:active{border-color:", ({
-  status,
-  disabled,
-  theme
-}) => {
-  if (disabled) return theme.colors.grey;
-  if (status === 'error') return theme.colors.red;
-  if (status === 'success') return theme.colors.greenLighter;
-  return theme.colors.blueRoyal;
-}, ";}" + ( true ? "" : 0));
-const isForwardRefComponent = component => {
-  if (typeof component.type === 'object' && component.type.$$typeof?.toString() === 'Symbol(react.forward_ref)') {
-    return true;
-  }
-  return false;
-};
-const FieldControl = /*#__PURE__*/external_react_default().forwardRef(function FieldControl({
-  children,
-  controlRef,
-  ...props
-}, ref) {
-  const ctx = useFieldContext();
-  const baseProps = {
-    ...props,
-    ...ctx
-  };
-  const internalRef = (0,external_react_namespaceObject.useRef)(null);
-  let _children = typeof children === 'function' ? children(ctx) : children;
-  if (ctx.forwardFocus && /*#__PURE__*/(0,external_react_namespaceObject.isValidElement)(_children) && isForwardRefComponent(_children)) {
-    const setRef = defaultRef => element => {
-      internalRef.current = element;
-      if (defaultRef) {
-        if (typeof defaultRef === 'function') {
-          defaultRef(element);
-        } else {
-          defaultRef.current = element;
-        }
-      }
-    };
-    _children = /*#__PURE__*/(0,external_react_namespaceObject.cloneElement)(_children, {
-      ref: setRef(children.ref)
-    });
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FieldControlBase, {
-    ...baseProps,
-    ref: ref,
-    onClick: event => {
-      baseProps.onClick?.(event);
-      if (controlRef) {
-        controlRef.current?.focus?.();
-      } else if (internalRef.current) {
-        internalRef.current?.focus?.();
-      }
-    },
-    children: _children
-  });
-});
-;// ./src/components/Field/FieldDescription.tsx
-
-
-
-const FieldDescription = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'basic') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "basic",
-    children: children
-  });
-};
-;// ./src/components/Field/FieldError.tsx
-
-
-
-const FieldError = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'error') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "error",
-    children: children
-  });
-};
-;// ./src/components/Field/FieldSuccess.tsx
-
-
-
-const FieldSuccess = ({
-  children
-}) => {
-  const ctx = useFieldContext();
-  if (ctx.status !== 'success') {
-    return null;
-  }
-  return (0,jsx_runtime_namespaceObject.jsx)(FormHelperText_FormHelperText, {
-    status: "success",
-    children: children
-  });
-};
 ;// ./src/components/FiltersMultiSelect/useFiltersMultiSelect.tsx
 
 function useFilterMultiSelect({
@@ -11090,11 +11871,6 @@ function FiltersMultiSelect_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 
-
-
-
-
-
 var FiltersMultiSelect_ref =  true ? {
   name: "w1nxbg",
   styles: "padding:6px 14px"
@@ -14509,7 +15285,7 @@ const styles_ResetBtnStyles =  true ? {
   name: "2hrei",
   styles: "padding:0;height:auto;background:none;&:focus,&:hover{border:none;background:none;box-shadow:none;&::before{border:none;}}"
 } : 0;
-const ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0px 4px 15px 0px ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
+const styles_ContentWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("width:224px;background:", theme.colors.greyPopoverLight, ";border-radius:20px;box-shadow:0px 4px 15px 0px ", theme.colors.black25, ";" + ( true ? "" : 0),  true ? "" : 0);
 const UserInfo =  true ? {
   name: "fwy071",
   styles: "gap:2px;width:100%;padding:10px"
@@ -14547,7 +15323,7 @@ const UserProfile = ({
       css: styles_ResetBtnStyles,
       children: trigger
     }), (0,jsx_runtime_namespaceObject.jsxs)(PopoverContent, {
-      css: ContentWrapper,
+      css: styles_ContentWrapper,
       className: className,
       children: [(0,jsx_runtime_namespaceObject.jsxs)("div", {
         css: UserInfo,
@@ -14780,6 +15556,8 @@ const WithVisibleUpToLG = (Component, styles) => {
 
 
 
+
+