@ssa-ui-kit/core 2.1.1-canary-2f77c98-20250310 → 2.2.0

package/dist/index.js

@@ -85,6 +85,7 @@ __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),
@@ -92,6 +93,7 @@ __webpack_require__.d(__webpack_exports__, {
   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),
@@ -903,6 +905,18 @@ __webpack_require__.d(index_parts_namespaceObject, {
   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);
@@ -1139,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)',
@@ -4095,16 +4111,16 @@ function Dropdown_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to s
 
 
 
-/**
- * The structure of the component:
- *
- * Dropdown
- *   DropdownToggle
- *   DropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * Dropdown
+ *   DropdownToggle
+ *   DropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 
 const DropdownBase = /*#__PURE__*/base_default()("div",  true ? {
@@ -4519,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
@@ -4531,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 ? {
@@ -4552,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);
@@ -4681,6 +4699,8 @@ const InputInner = ({
   maxLength,
   helperText,
   showHelperText = false,
+  showStatusIcon = true,
+  showBorders = true,
   register,
   onKeyUp
 }, inputRef) => {
@@ -4690,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);
@@ -4711,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)({
@@ -4723,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,
@@ -5208,16 +5229,16 @@ const DropdownPlaceholderLabel = /*#__PURE__*/base_default()("div",  true ? {
   styles: "white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
 } : 0);
 
-/**
- * The structure of the component:
- *
- * MultipleDropdown
- *   DropdownToggle
- *   MultipleDropdownOptions
- *     DropdownOption
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
+/**
+ * The structure of the component:
+ *
+ * MultipleDropdown
+ *   DropdownToggle
+ *   MultipleDropdownOptions
+ *     DropdownOption
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
  **/
 function MultipleDropdownInner({
   selectedItems = [],
@@ -5462,8 +5483,8 @@ const NavToggle = ({
 
 
 
-/**
- * UI Component that shows the navigation bar
+/**
+ * UI Component that shows the navigation bar
  */
 const NavBar = ({
   items
@@ -6713,12 +6734,12 @@ const ProgressVertical = ({
 /* harmony default export */ const ProgressVertical_ProgressVertical = (ProgressVertical);
 ;// ./src/components/ResponsiveImage/ResponsiveImage.tsx
 
-/**
- * A simple wrapper over the `<img />` tag.
- *
- * Don't forget to adjust Device Pixel Ratio in DevTools
- * when testing srcSet, and use Hard Reload to force the
- * browser to load an image of another resolution.
+/**
+ * A simple wrapper over the `<img />` tag.
+ *
+ * Don't forget to adjust Device Pixel Ratio in DevTools
+ * when testing srcSet, and use Hard Reload to force the
+ * browser to load an image of another resolution.
  * */
 const ResponsiveImage = ({
   src,
@@ -7129,12 +7150,12 @@ const TabBarBase = /*#__PURE__*/base_default()("div",  true ? {
   target: "e1hg26v10"
 } : 0)( true ? "" : 0);
 
-/**
- * This component doesn't show contents of the selected tab,
- * however it accepts a required `renderContent()` render
- * prop and stores it into the Context. This lets the parent
- * component to decide where to render the contents of the
- * selected tab.
+/**
+ * This component doesn't show contents of the selected tab,
+ * however it accepts a required `renderContent()` render
+ * prop and stores it into the Context. This lets the parent
+ * component to decide where to render the contents of the
+ * selected tab.
  * */
 const TabBar = ({
   children
@@ -7451,13 +7472,13 @@ const useTooltipContext = () => {
 
 
 
-/*
- * <Tooltip>
- *   <TooltipTrigger>
- *     <Button />
- *   </TooltipTrigger>
- *   <TooltipContent>Tooltip</TooltipContent>
- * </Tooltip>
+/*
+ * <Tooltip>
+ *   <TooltipTrigger>
+ *     <Button />
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip</TooltipContent>
+ * </Tooltip>
  * */
 const Tooltip = ({
   children,
@@ -7931,9 +7952,9 @@ var CardList_ref =  true ? {
   name: "1fgo50s",
   styles: "list-style:none;padding:0;li{margin-bottom:15px;}"
 } : 0;
-/**
- *
- * UI Component that renders a list of items with a custom render function
+/**
+ *
+ * UI Component that renders a list of items with a custom render function
  */
 const CardList = ({
   title,
@@ -8803,8 +8824,8 @@ const SCREEN_SIZES = {
 
 
 
-/**
- * UI Component that shows the collapsible navigation bar
+/**
+ * UI Component that shows the collapsible navigation bar
  */
 
 const CollapsibleNavBar = ({
@@ -8896,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:", ({
@@ -8905,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 => {
@@ -9103,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)({
@@ -9131,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) {
@@ -9141,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;
@@ -9152,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();
@@ -9262,6 +9368,9 @@ const useDatePicker = ({
     calendarViewDateTime,
     maskInputRef,
     calendarType,
+    lastChangedDate,
+    luxonFormat,
+    safeOnChange,
     setCalendarType,
     setCalendarViewDateTime,
     setDateTime,
@@ -9284,6 +9393,7 @@ const DatePickerContext = /*#__PURE__*/(0,external_react_namespaceObject.createC
   inputRef: {
     current: null
   },
+  inputProps: {},
   isOpen: false,
   calendarType: 'days',
   inputValue: undefined,
@@ -9324,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,
@@ -9367,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
@@ -9389,7 +9511,7 @@ const DaysView = () => {
       });
       setCalendarViewDateTime(newDate);
       setDateTime(newDate);
-      onChange?.(newDate?.toJSDate());
+      safeOnChange?.(newDate);
       setIsOpen(false);
     }
   };
@@ -9410,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;
@@ -9428,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}`);
       })
@@ -9448,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
@@ -9490,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);
     })
@@ -9507,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,
@@ -9527,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({
@@ -9560,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}`);
@@ -9761,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)();
@@ -9786,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,
@@ -9813,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,
@@ -9831,7 +10007,8 @@ const DatePickerTrigger = () => {
               display: 'none'
             }
           },  true ? "" : 0,  true ? "" : 0)
-        })
+        }) : undefined,
+        ...restInputProps
       })
     })]
   });
@@ -9865,17 +10042,439 @@ 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, {})
 });
 const DatePicker = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)(DatePickerInner);
 ;// ./src/components/DatePicker/index.ts
 
+;// ./src/components/Field/FieldProvider.ts
+
+const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
+;// ./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/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');
@@ -10198,9 +10797,13 @@ const DrawerContent = /*#__PURE__*/(0,external_react_namespaceObject.forwardRef)
 
 
 
-;// ./src/components/Field/FieldProvider.ts
+;// ./src/components/Field/index.parts.ts
+
+
+
+
+
 
-const [FieldProvider, useFieldContext] = (0,hooks_namespaceObject.createSafeContext)('useFieldContext must be used within a FieldProvider');
 ;// ./src/components/Field/index.ts
 
 
@@ -11107,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({
@@ -11435,11 +11871,6 @@ function FiltersMultiSelect_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have
 
 
 
-
-
-
-
-
 var FiltersMultiSelect_ref =  true ? {
   name: "w1nxbg",
   styles: "padding:6px 14px"
@@ -13487,29 +13918,29 @@ const BarLineComplexChartView = ({
     debouncedFn();
   };
   const handleHover = () => {
-    /**
-     * Show tooltip on hover
-     * event: Readonly<Plotly.PlotHoverEvent>
-     * - event = {}
-     * - points:
-     * Array<{
-     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
-     *   curveNumber: number;
-     *   data: Plotly.Data;
-     *   fullData: Plotly.Data;
-     *   label: number;
-     *   pointIndex: number;
-     *   pointNumber: number;
-     *   value: number;
-     *   x: number;
-     *   y: number;
-     *   xaxis: string;
-     *   yaxis: string;
-     * }>
-     * - xaxes: Array<{}>
-     * - xvals: Array<number>
-     * - yaxes: Array<{}>
-     * - yvals: Array<number>
+    /**
+     * Show tooltip on hover
+     * event: Readonly<Plotly.PlotHoverEvent>
+     * - event = {}
+     * - points:
+     * Array<{
+     *   bbox: { x0: number; x1: number; y0: number; y1: number; };
+     *   curveNumber: number;
+     *   data: Plotly.Data;
+     *   fullData: Plotly.Data;
+     *   label: number;
+     *   pointIndex: number;
+     *   pointNumber: number;
+     *   value: number;
+     *   x: number;
+     *   y: number;
+     *   xaxis: string;
+     *   yaxis: string;
+     * }>
+     * - xaxes: Array<{}>
+     * - xvals: Array<number>
+     * - yaxes: Array<{}>
+     * - yvals: Array<number>
      */
     setIsOpen(false);
   };
@@ -14685,14 +15116,14 @@ var Typeahead_ref =  true ? {
   name: "1d3w5wq",
   styles: "width:100%"
 } : 0;
-/**
- * The structure of the component:
- * - TypeaheadTrigger
- * - TypeaheadOptions
- * - FormHelperText
- *
- * Aria attributes are set according to
- * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
+/**
+ * The structure of the component:
+ * - TypeaheadTrigger
+ * - TypeaheadOptions
+ * - FormHelperText
+ *
+ * Aria attributes are set according to
+ * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  **/
 const Typeahead = ({
   name = 'typeahead-search',
@@ -15127,6 +15558,7 @@ const WithVisibleUpToLG = (Component, styles) => {
 
 
 
+
 
 
 ;// ./src/contexts/Translation/config.ts